Scribd
Cargar
32 vistas59 páginas

S02.s2 - CSS y JavaScript

El documento presenta un temario sobre desarrollo web integrado que incluye HTML, CSS y JavaScript. Explica conceptos básicos como la estructura y propiedades de CSS así como las diferentes formas de incluir hojas de estilo. También describe brevemente a JavaScript y cómo implementarlo. El objetivo es que al finalizar la sesión, el estudiante pueda crear una página web estática usando estos lenguajes.

Cargado por

Claudio Ibarra Rios
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
32 vistas59 páginas

S02.s2 - CSS y JavaScript

El documento presenta un temario sobre desarrollo web integrado que incluye HTML, CSS y JavaScript. Explica conceptos básicos como la estructura y propiedades de CSS así como las diferentes formas de incluir hojas de estilo. También describe brevemente a JavaScript y cómo implementarlo. El objetivo es que al finalizar la sesión, el estudiante pueda crear una página web estática usando estos lenguajes.

Cargado por

Claudio Ibarra Rios
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 59

Desarrollo Web

Integrado
MSc. Yuliana Jáuregui Rosas
Conocimientos previos
• ¿Qué es HTML?
• ¿Cuáles son los elementos de HTML para construir tablas?
• ¿Cuáles son los elementos de HTML para construir formularios?
Fundamentos CSS y JS
Utilidad
Temario
➢ CSS
➢ HTML y CSS
➢ Estructura CSS
➢ Como incluir CSS
➢ CSS embebido
➢ CSS interno
➢ CSS externo
➢ Propiedades de maquetación básicas
Logro

Al finalizar esta sesión el estudiante,


elabora una pagina web estática
empleando los lenguajes HTML,
CSS y JavaScript y la plataforma
Java Enterprice Edition.
CSS
• Las hojas de estilo CSS son un conjunto reglas que se definen
en un archivo .css y que describen el aspecto que deben tener
los diferentes elementos HTML de una página.
• Trabaja bajo la filosofía de patrones o plantillas, es decir, no
es necesario especificar cada uno de los elementos, sino que se
pueden definir reglas como :
• “Los títulos de nivel 1 y 2 deben ser de color rojo y tamaño de fuente de
16 y 14 pixeles respetivamente.”
• “El texto de los párrafos deben estar alineados a la izquierda, con
tamaño de fuente de 12 pixeles y color de fuente azul marino.”
HTML y CSS
En las páginas web el lenguaje HTML se usa para estructurar el
contenido semánticamente (títulos, subtítulos, texto, etc.) y CSS
para la maquetación y estética del mismo.
Estructura CSS
La estructura CSS se basa en reglas que tienen el siguiente
formato:

Donde:
• Selector: Es el elemento HTML que vamos a seleccionar del
documento para aplicarle un estilo concreto.
• Propiedad: Característica de un elemento.
• Valor: Valores concretos de una característica.
Estructura CSS
• Se puede aplicar mas de una propiedad a un selector, en este
caso se separa las propiedad con un punto y coma (;).
Como incluir CSS
• Se puede incluir CSS a una pagina web de tres formas
diferentes:

• CSS embebido: a través del atributo style.


• CSS interno: dentro del lenguaje HTML.
• CSS externo: para este caso se crea un archivo *.css
y luego se enlaza con la pagina web.
CSS embebido
• Aplica estilos en un documento HTML de forma directa en las
propias etiquetas, a través del atributo style:

<p>Uno elige <span style="color:blue"> lo que es</span>!</p>

• Esta manera de aplicar estilos, NO se recomienda salvo en


casos muy específicos, pues se pierde la independencia de la
presentación y contenido
CSS interno
• Permite incluir estilos en <html>
un documento HTML a <head>
través de la etiqueta <title>Título de la página</title>
<style type="text/css">
<style></style> que se p{
añade en la cabecera color: rgb(32,32,32);
<head></head> del text-align: left;
documento. }
• Esta forma de aplicar </style>
estilos tampoco es </head>
<body>
recomendable.
…
• Ejemplo: </body>
</html>
CSS externo
• En la cabecera de la pagina web <head> </head> se incluye la
etiqueta <link>:

<link rel="stylesheet" type="text/css" href= "estilo.css" />

• Donde:
• rel="stylesheet" indica que el enlace es con una hoja de estilos
• type="text/css" indica que el archivo es de texto, en sintaxis CSS
• href="estilo.css" indica el nombre del archivo *.css
Tipos de selectores

Selector de Selector de Selector de


elemento identificación clase

Selector de Selector de
atributo pseudoclase
Selector de elemento
• Selecciona el elemento de una página utilizando el nombre de la
etiqueta.
• Ejemplo:
Selector de identificación (id)
• Selecciona el elemento de una página
usando el atributo id, para este caso se
antepone la almohadilla '#' al valor del atributo
id.
• El atributo 'id' sólo admite un único valor y
además este valor debe ser único entre todos
los elementos de una pagina.
• Los selectores id permite aplicar un estilo
exclusivo a un elemento en concreto,
independientemente del que se le haya
aplicado de forma general.
Selector de identificación (id)
• Ejemplo:
Selector de Clase (class)
• Selecciona el elemento de una página usando
el atributo class, para este caso se antepone
un punto '.'al valor del atributo class.
• Una clase puede estar presenta en varias
elementos de una página, es asi que el class=“naranjas”
selector .miclase apuntará a todos los
elementos de la pagina que tengan declarado
class="miclase".
• El atributo 'class' admite valores múltiples
separados por un espacio en blanco.
Selector de Clase (class)
• Ejemplo:

Nota: en caso de colisión de estilos prevalece la segunda regla con independencia del orden por ser más específica.
Selector de atributo
• Selecciona los elementos en una página con el atributo
especificado.
Selector de Pseudoclase
• El selector de pseudoclase es una herramienta para poder apuntar
desde la hoja de estilos a un elemento del DOM (Document Objet
Model) en base a alguna información o detalle ajeno al propio
elemento, por ejemplo cuando el puntero esté sobre él.
Unidades de medida
• Las medidas en CSS se emplean, para definir la altura, anchura
y márgenes de los elementos y para establecer el tamaño de
letra del texto. Todas las medidas se indican como un valor
numérico entero o decimal seguido de una unidad de medida
(sin ningún espacio en blanco entre el número y la unidad de
medida). Tenemos:

Unidades absolutas

Unidades relativas
Unidades absolutas
• Su valor es directamente el valor que se debe utilizar, sin necesidad de
realizar cálculos intermedios. Son muy poco flexibles
Representación Unidad de medida Descripción
in pulgadas Una pulgada equivale a 2.54 centímetros.
cm centímetros
mm milímetros
pt puntos Un punto equivale a 1 pulgada/72, es decir,
unos 0.35 milímetros.
pc picas Una pica equivale a 12 puntos, es decir, unos
4.23 milímetros
Unidades relativas
• No están completamente definidas, ya que su valor siempre está referenciado respecto a
otro valor. Son las más utilizadas en el diseño web por la flexibilidad con la que se adaptan
a los diferentes medios.
Representación Descripción
em Relativa al tamaño de letra del elemento (no confundir con la etiqueta <em> de HTML) es decir,
si en elemento tiene un tamaño de fuente de 16 pixeles, entonces 1 em será igual a 16px.
rem Es un em basado en la raíz, si el elemento HTML tiene un tamaño de fuente de 16px, entonces
1rem, sería igual a 16px.
ex Relativa respecto de la altura de la letra x ("equis minúscula") del tipo y tamaño de letra del
elemento.
px Relativa respecto de la resolución de la pantalla del dispositivo en el que se visualiza la página
HTML. Representa pixeles
% Está formado por un valor numérico seguido del símbolo %, de manera predeterminada cada
elemento de bloque usa un ancho del 100%.
Propiedades de maquetación
básicas
Propiedades de maquetación
básicas
Propiedad Descripción
width Ancho de un elemento.
height Alto de un elemento.
vertical-align Alineamiento vertical dentro de un elemento.
margin Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por
lado (arriba, abajo, izquierda, derecha).
padding Relleno interior que se añade en los bordes del contenido del elemento, a
diferencia de margin, cuenta para el tamaño del elemento.
float Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se
usa en el posicionamiento flotante de CSS. El tema del posicionamiento en
CSS no es trivial y conviene estudiar cómo funciona antes de usar esta
propiedad.
Ejemplo
<header>
<nav>

<main>

<section>

<section>
<article>

<aside>

<footer>

<nav>
Ejemplo
• Agrega a la página estilos mediante el uso de un archivo CSS.
JavaScript

• JavaScript es un lenguaje de programación con soporte para


programación orientada a objetos, que permite añadir características
interactivas a un sitio web, por ejemplo: juegos, eventos que ocurren
al presionar los botones de un formulario, efectos de estilo dinámicos,
animaciones y más.
• Se dice que JavaScript es un lenguaje del lado del cliente, pues los
scripts son ejecutados en el navegador del usuario.
• En JavaScript cada instrucción debe finalizar con un punto y coma.
• JavaScript distingue entre mayúsculas y minúsculas.
Implementación de JavaScript

• JavaScript se puede incorporar al documento mediante tres


técnicas diferentes:
• JavaScript embebido: Como gestores en línea.
• JavaScript interno: como contenido del elemento <script>
• JavaScript externo: Como un archivo externo.
JavaScript embebido

• El código se puede insertar en un elemento por medio de


atributos. Este caso no es una buena practica.

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
</head>
<body>
<button onclick="alert('Bienvenidos')">Aceptar</button>
</body>
</html>
JavaScript interno
<html>
• Se utiliza para trabajar <head>
con códigos extensos <title>TODO supply a title</title>
y personalizar las <meta charset="UTF-8">
<script>
funciones. alert('Bienvenidos');
• Este código se </script>
</head>
encuentra entre las
<body>
etiquetas <div>TODO write content</div>
<script></script> </body>
</html>
JavaScript Externo
• Se crea un archivo con • Por otro lado, mediante el atributo src
extensión .js que tendrá el de la etiqueta <script> se asigna la
código JavaScript, el cual ruta del archivo que contiene el código
podrá ser usado por varios JavaScript.
documentos.
<html>
micodigo.js
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
alert("Bienvenidos"); <script src="micodigo.js"></script>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
Operadores aritméticos
Resultado
Símbolo Definición Expresión
a=5yb=2
+ Adición r = a + b; 7
- Sustracción r = a - b; 3
* Multiplicación r = a * b; 10
/ División r = a / b; 2
% Resto r = a % b; 1
++ Incremento a++ 6
-- Decremento b-- 1
Operadores relacionales
Resultado
Símbolo Definición Expresión
a = 10 y b = 7
> Mayor que a>b Verdadero
>= Mayor o igual que a >= b Verdadero
< Menor que a<b Falso
<= Menor o igual que a <= b Falso
== Igual a a ==b Falso
=== Valor y tipo igual a===b Falso
!= Diferente a a != b Verdadero
!== Valor o tipo no igual a!===b Verdadero
Operadores lógicos
Símbolo Definición
&& and
|| or
! not

x y x && y x || y !x
Verdadero Verdadero Verdadero Verdadero Falso
Verdadero Falso Falso Verdadero Falso
Falso Verdadero Falso Verdadero Verdadero
Falso Falso Falso Falso Verdadero
Operadores de asignación

Resultado
Símbolo Definición Expresión
x = 12
= Asigna a una variable, el A=x+5 A = 17
resultado de una expresión o un
valor que se encuentra al lado
derecho del signo =
Operadores de asignación
• Se puede usar el operador de asignación compuesto cuando la operación
contiene como primer operando la misma variable en la que se almacena
el resultado.
Expresión Resultado
Símbolo Expresión
abreviada a = 10
+= a=a+6 a+=6 16
-= a=a-5 a-=5 5
*= a=a*4 a*=4 40
/= a=a/2 a/=2 5
%= a=a%3 a%=3 1
Funciones
• Una función es un pedazo de
código que permanece inactivo
hasta que es llamada por un
evento a través de su nombre.
• Las funciones se declaran
usando la palabra clave
function, el nombre seguido de
paréntesis, y el código entre
llaves.
• Ejemplo:
Funciones
• Las funciones también se pueden llamar con un enlace, incluyendo la
palabra javascript y el nombre de la función en la propiedad HREF.
Función alert()

• Muestra el valor del parámetro a través de una ventana


emergente con un botón.
• Su sintaxis es:

alert(“Texto a mostrar");

Donde:
• Texto a mostrar: Es el mensaje que se mostrará en la ventana
emergente.
Función prompt()
• Esta función muestra una ventana emergente con un campo de entrada que
permite al usuario introducir un valor. Retorna el valor ingresado. Su sintaxis es:

prompt("Texto descriptivo","Texto por defecto");

Donde:
• Texto descriptivo: Es el mensaje que se mostrará por pantalla pidiendo la inserción
o rellanado de información.
• Texto por defecto (Opcional): Podemos dejar un valor por defecto para que el
usuario no tenga que escribirlo o rellenarlo.
Función confirm()
• Muestra una ventana de diálogo con un mensaje opcional y dos botones,
Aceptar y Cancelar.
• Su sintaxis es:

resultado = confirm(‘mensaje’);

Donde:
• Mensaje: es la cadena que se muestra en el diálogo.
• Resultado: es un valor booleano indicando si se ha pulsado Aceptar (true) o
Cancelar (false).
Función
document.getElementById()
• Esta función pertenece al objeto document. Permite obtener el
objeto que hace referencia al elemento con un id concreto.
• Permite obtener un valor numérico si se considera el siguiente
formato.

variable = document.getElementById(id).value;
Función
document.getElementByName()
• Permite obtener un conjunto de valores (array).

arreglo = document.getElementsByName(name);
Función document.write()
• La función document.write() escribe el contenido solo al cargar la página, si
se llama posteriormente, será necesario volverla a cargar.
• Su sintaxis es:

document.write('texto');
document.write(variable);
document.write(variable1 + variable2);
Donde:
• Texto: es el mensaje que se muestra.
• Variable: muestra el valor que contiene una variables
Estructuras condicionales
• Una estructura condicional permite elegir entre una, dos o más alternativas diferentes, el
cual dependerá de evaluar una condición cuya respuesta puede ser Verdadera o Falsa.

simple

doble
Estructuras
condicionales
anidado

múltiple
Estructuras condicionales
if (condición)
if (condición) instrucción 1;
instrucción; else
instrucción 2;

if (condición1)
instruccion1;
else
switch (variable) {
if (condición2)
case c1: instruccion1; break;
instruccion2;
case c2: instruccion2; break;
else
...
if (condición3)
case cn: instruccionN; break;
instruccion3;
default: instruccionX;
else
}
instruccion4;
Estructuras repetitivas
• Las estructuras que repiten una secuencia de instrucciones un número determinado de
veces se denominan Bucles. Entre las estructuras repetitivas se encuentran:

while

Estructuras
do -while
Repetitivas

for
Estructuras repetitivas

while (condición){ do {
instrucciones; instrucciones;
}
} while (condición);

for (inicialización; condición; incremento){


instrucciones;
}
JavaScript para cambiar el estilo
• Javascript ofrece la posibilidad, modificar el estilo (tamaño, estilo, tipo de
fuente, color de fondo, etc.) original de una página y sin tener que volver a
cargar la página del servidor.
• Para que el usuario pueda realizar estas modificaciones puede utilizarse
cualquier evento, como un clic del ratón o cualquier otro método con que se
pueda trasmitir una instrucción.
• La modificación al estilo puede ser accedido de varias formas, desde el
documento o desde el elemento individual al que va dirigido el estilo.
Desde el documento

• Permite aplicar estilo de forma general al documento.


• Su sintaxis es:

document.body.style.propiedad = "valor"
Ejemplo
• Cambiar el tamaño de fuente y el color de fondo de toda la pagina.
Desde el elemento

• Permite aplicar estilo a un bloque o elemento definido por un


identificador (id).
• Su sintaxis es:

document.getElementById("id").style.propiedad = "valor"
Ejemplo
• Cambiar tipo y color de fuente de un párrafo.
Aplicaciones
Implementar en el laboratorio
lo explicado en clase
Resumiendo…
• CSS es __________________________________.

• La estructura que utiliza el código CSS es _____________________________________.

• ¿Cómo se puede incluir código CSS?


___________________, __________________ y _______________.
• La modificación de los estilos se puede realizar en dos ámbitos:
_____________________ y ______________________.

También podría gustarte