Dispositivas CURSO HTML 5.pdf

Historia
de
HTML5

• 1989
…
1991:
Tim
Berners-‐Lee
–
URL
+
HTTP
+
HTML

• 1994:
World
Wide
ConsorIum
(W3C)

• 1995:
HTML
2.0

• 1999:
HTML
4.01

• 2000:
XHTML
1.0
(grámaIca
XML
y
vocabulario
HTML)

• 2001:
XHTML
1.1

• 2006:
HTML5

¿Qué
es
HTML5?

• Es
el
nuevo
estándar
de
HTML

• Esta
basado
en
HTML,
CSS,
DOM
y
JavaScript.

• Contenido
más
rico
sin
necesidad
de
plugins.

• MulIplataforma.

• Valor
semánIco
de
las
eIquetas.

Diferencias
con
HTML
4.01

• Sintaxis

• Nuevos
elementos

• Nuevos
atributos

• Elementos
cambiados

• Atributos
cambiados

• Elementos
eliminados

• Atributos
eliminados

Principales
caracterísIcas

• Estructura
del
cuerpo

• EIquetas
para
contenidos
especíﬁco

• Canvas

• Bases
de
Datos
locales

• Web
Workers

• Aplicaciones
Web
Oﬄine

• Geolocalización

• Nuevas
APIs
para
interfaz
de
usuario

• Fin
de
las
eIquetas
de
presentación

TEMA
2.
ELEMENTOS
DE
HTML5

DOCTYPE

• Antes:

<!DOCTYPE html PUBLIC "-//W3C//
DTD XHTML 1.0 Transitional//EN”
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
• Ahora:

<!DOCTYPE html>

Cabecera
y
Metainformación

• La
cabecera
conIene
código
e
información

que
no
es
visible
en
la
ventana
del
navegador.

Puede
contener
información
importante
como

el
ntulo
de
la
página,
el
Ipo
de
codiﬁcación

que
vamos
a
uIlizar,
enlaces
a
ﬁcheros
css
o

javascript.

EIqueta
head

• <head>
….
</head>

• Puede
contener
los
siguientes
elementos:

Itle,
style,
base,
link,
meta,
script
y
noscript

En
anteriores
versiones
de
HTML
disponiamos

del
atributo
“proﬁle”

EIqueta
Itle

• <Itle>
…
</Itle>

• Deﬁne
el
Itulo
del
documento

• El
Itulo
aparece
en:

-‐
La
barra
de
Itulo
del
navegador

-‐
Cuando
agregamos
la
página
a
favoritos

-‐
Los
motores
de
busqueda

<title>Título página web</title>

EIqueta
meta

• <meta
/>

• Información
sobre
el
documento
HTML

• No
se
visualiza
en
el
navegador

<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<meta charset="UTF-8">
<meta name="autor" content="Juan" />
<meta name="description" content=”descripción web" />
<meta name="keywords" content=”html5, css3, responsive" />
<meta name="robots" content="index, follow" />

EIqueta
style

• <style>
…
</style>

• Permite
deﬁnir
esIlos
parIculares
para
los

elementos
de
una
página,
basados
en

deﬁniciones
CSS

<style type="text/css">
p { color: black; font-family: Verdana; }
</style>

EIqueta
link

• <link
/>

• Deﬁne
una
relación
entre
un
documento

HTML
y
un
recurso
externo.
Su
uso
más

común
es
para
enlazar
hojas
de
esIlo

deﬁnidas
mediante
CSS.

<link rel="stylesheet"
type="text/css" href="theme.css”
media=“screen”>

EIqueta
script

• <script>
…
</script>

• Se
usa
para
deﬁnir
un
script
del
lado
del
cliente

<script type=“text/javascript”>
document.write(”Hola mundo")
</script>
<script src=
http://code.jquery.com/
jquery-1.7.2.min.js type=“text/
javascript”></script>

EIqueta
noscript

• <noscript>
…
</noscript>

• Deﬁne
un
contenido
alternaIvo
para
los
usuarios

que
Ienen
deshabilitado
la
ejecución
de
scripts

en
sus
navegadores
o
no
son
soportados
por

este.

• Con
HTML5,
también
en
<head>
…
</head>

<script>
document.write(”Hola mundo")
</script>
<noscript>Tu navegador no soporta JavaScript!</
noscript>

EIquetas
HTML

• <body>
….
</body>

• <div>
….
</div>

• <span>
….
</span>

• Cabeceras
(<h1>
….
</h1>,
<h2>
….
</h2>,
…)

• Hiperenlaces
<a>
….
</a>

• Párrafos
<p>
….
</p>

• Listas
<ul><li>
….
</li></ul>

• Tablas
<table><thead><tr>…</tr></thead><tbody><td>...</
td></tbody></table>

• Imágenes
<img
/>

• Formularios
<form><input/></form>

• Iframe
<iframe>
….
</iframe>

EIqueta
body

• <body>
…
</body>

• Deﬁne
el
cuerpo
del
documento
HTML.
ConIene
todos
los
contenidos
de

un
documento
HTML
y
lo
que
se
visualizará
en
el
navegador

<html>
<head>
<title>Título de la página</title>
</head>
<body>
Contenido de la página
</body>
</html>

EIqueta
div

• <div>
…
</div>

• Deﬁne
una
sección/división
en
un
documento

HTML

• Se
les
da
formato
con
CSS
para
maquetar
la

página
web.

<div style="color:#0000FF">
<h3>Esto es la cabecera</h3>
<p>Esto es un parrafo.</p>
</div>

EIqueta
span

• <span>
…
</span>

• Se
usa
para
agrupar
elementos
en
la
misma
línea.

• No
produce
ningún
cambio
visual
por
sí
mismo.

• Se
usa
como
método
para
referenciar
(hook)

alguna
parte
del
documento.

<p>
Color <span style="color:blue">azul</span>.
</p>

Encabezados

• <h1>…</h1>

….

<h6>…</h6>

• Deﬁne
encabezados
de
texto
en
el
documento

HTML.

<h1>Cabecera 1</h1>
<h2>Cabecera 2</h2>
<h3>Cabecera 3</h3>
<h4>Cabecera 4</h4>
<h5>Cabecera 5</h5>
<h6>Cabecera 6</h6>

Hiperenlaces

• <a>
…
</a>

• Sirve
para
enlazar
desde
una
página
web
a
otra
o

a
algún
recurso
(pdf,
zip,
etc…).

•
El
atributo
más
importante
es
href,
que
deﬁne
el

enlace
de
desIno.

• En
HTML5
se
puede
no
especiﬁcar
el
href
para

que
actúe
como
un
marcador
de
posición.

<a href="http://www.google.es">Enlace a google</a>

Parrafo

• <p>
….
</p>

• Deﬁne
un
párrafo.

• Los
navegadores
añaden
un
margen
antes
y

después
de
cada
eIqueta
por
defecto.

<p>Esto es un párrafo de texto.</p>

Listas

• Combinación
de
varias
eIquetas.

• ul:
definea
una
lista
desordenada.

• ol:
define
una
lista
ordenada.

• li:
define
un
elemento
de
la
lista

<ol>
<li>Madrid</li>
<li>Barcelona</li>
<li>Valencia</li>
</ol>
<ul>
<li>Madrid</li>
<li>Barcelona</li>
<li>Valencia</li>
</ul>

Tablas

• Combinación
de
varias
eIquetas

• table:
define
una
tabla
en
HTML.
Es
el

contenedor
principal.

• thead:
define
el
contenido
de
la
cabecera
de
una

tabla.

• tbody:
define
el
contenido
del
cuerpo
de
la
tabla.

• tr:
define
una
fila
de
la
tabla.

• th:
define
una
celda
de
la
cabecera
de
la
tabla.

• td:
define
una
celda
del
cuerpo
de
la
tabla

Ejemplo
de
tabla
sencilla

<table>
<tr>
<th>Artículo</th>
<th>Precio</th>
</tr>
<tr>
<td>Ordenador</td>
<td>400 €</td>
</tr>
<tr>
<td>Impresora</td>
<td>80 €</td>
</tr>
</table>

Ejemplo
de
tabla
completa

<table>
<thead>
<tr>
<th>Ordenador</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ordenador</td>
<td>400 €</td>
</tr>
<tr>
<td>Impresora</td>
<td>80 €</td>
</tr>
</tbody>
</table>

EIqueta
form

• <form>
…
</form>

• Engloba
todos
los
campos
de
introducción
de
datos
por
parte
del
usuario.

• Puede
contener
los
siguientes
elementos:

-‐
input

-‐
textarea

-‐
buxon

-‐
select

-‐
opIon

-‐
optgroup

-‐
ﬁeldset

-‐
label

<form action=”tratamiento.php" method=”post">
Nombre: <input type="text" name=”nombre"><br>
Apellido: <input type="text" name=”apellido"><br>
<input type="submit" value=”Enviar">
</form>

EIqueta
label

• <label>
…
</label>

• Deﬁne
una
eIqueta
para
un
elemento
de

entrada
de
datos
(input).

<form action=”tratamiento.php">
<label for=”nom">Nombre</label>
<input type=”text" name=”nombre" id=”nom" value=”Pepe"><br>
<input type="submit" value="Submit">
</form>

EIqueta
ﬁeldset

• Sirve
para
agrupar
elementos
de
un
formulario.

<form>
<fieldset>
<legend>Datos personales</legend>
Nombre: <input type="text"><br>
Apellido: <input type="text"><br>
DNI: <input type="text">
</fieldset>
</form>

EIqueta
input

• <input
/>

• Deﬁne
un
campo
donde
el
usuario
puede

introducir
datos.

<form action=”tratamiento.php">
Nombre: <input type="text" name=”nombre"><br>
Apellidos: <input type="text" name=”apellidos"><br>
<input type="submit" value=”Enviar">
</form>

EIqueta
input

• Nuevos
Ipos
en
HTML5:

-‐
color

-‐
date

-‐
dateIme

-‐
dateIme-‐local

-‐
email

-‐
month

-‐
number

-‐
range

-‐
search

-‐
tel

-‐
Ime

-‐
url

-‐
week

EIqueta
textarea

• <textarea>
…
</textarea>

• Deﬁne
un
área
mulI
línea
para
introducir

grandes
canIdades
de
texto.

<textarea rows="4" cols="50">
Esta es un área de texto, donde
podemos introducir grandes
cantidades de datos para enviar en
un formulario.
</textarea>

EIqueta
select

• <select>
…
</select>

• Especiﬁca
una
lista
desplegable
a
modo
de

selector.

• Cada
elemento
del
selector
se
deﬁne
con
la

eIqueta
<opIon>
…
</opIon>

EIqueta
opIon

• <opIon>
…
</opIon>

• Deﬁne
un
elemento
para
un
selector.

<select>
<option value="volvo">Volvo</option>
<option value=”lotus”>Renault</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

EIqueta
optgroup

• <optgroup>
…
</optgroup>

• Se
uIliza
para
agrupar
diferentes
opciones
dentro
de
un
selector

<select>
<optgroup label=”Coches franceses">
<option value=”renault”>Renault</option>
<option value=”citroen”>Citroen</option>
</optgroup>
<optgroup label=”Coches alemanes">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

EIqueta
datalist

• <datalist>
…
</datalist>

• Deﬁne
un
lista
de
opciones
predeﬁnidas.

<input list="navegadores">
<datalist id=”navegadores">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

EIqueta
keygen

• Especiﬁca
un
campo
generador
de
pares
de

claves.

• La
clave
privada
se
guarda
localmente.

• La
clave
pública
se
envía
al
servidor.

<form action="keygen.php" method="post">
Usuario: <input type="text" name="usuario">
Encriptación: <keygen name="seguridad">
<input type="submit" value="Enviar">
</form>

EIqueta
output

• Representa
el
resultado
de
un
cálculo.

<form oninput="result.value=parseInt(a.value)
+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>

Nuevas
eIquetas
en
HTML
5

• Eliminar
elementos
en
desuso
de
HTML
4.01.

• Redefinir
elementos
de
HTML
4.01.

• Introducción
de
nuevas
APIs.

• Significado
a
los
elementos
estructurales
(web
semánIca).

• Elementos
eliminados:
acronym,
applet,
basefont,
big,
center,
dir,

Font,
frame,
frameset,
noframes,
strike,
6.

• Nuevos
elementos:
canvas,
audio,
embed,
source,
track,
video,

datalist,
keygen,
output,
ar9cle,
aside,
bdi,
details,
dialog,

figcap9on,
figure,
footer,
header,
main,
mark,
menuitem,
meter,

nav,
progess,
rp,
rt,
ruby,
sec9on,
summary,
9me,
wbr:.

EIqueta
header

• <header>
…
</header>

• Deﬁne
la
cabecera
del
documento
o
de
una

sección.

<body>
<header>
<h1>Título de la página</h1>
<p>Breve descripción</p>
</header>
</body>

EIqueta
nav

• Deﬁne
el
bloque
de
navegación
de
la
página.

• Menú.

<nav>
<ul>
<li><a href=”index.html”>Inicio</a></li>
<li><a href=”galeria.html”>Galería</a></li>
<li><a href=”empresa.html”>La empresa</a></li>
<li><a href=”contacto.html">Contacto</a></li>
</ul>
</nav>

EIqueta
hgroup

• <hgroup>
…
</hgroup>

• Se
usa
para
agrupar
elementos
de
cabecera
cuando

tenemos
mulIples
niveles
de
encabezados.

<hgroup>
<h1>El Cartagena gana la Champions</h1>
<h2>Una final agónica frente a…</h2>
</hgroup>
<p>El
parIdo
se
decidió
ﬁnalmente
en
la
ronda
de

penalIs,
donde
el
Cartagena
no
falló
ninguno.</p>

EIqueta
main

• <main>
…
</main>

• Deﬁne
el
contenido
principal
de
la
página.

• El
contenido
insertado
dentro
debería
ser
único.

<main>
<h1>Navegadores web</h1>
<article>
<h1>Google Chrome</h1>
</article>
<article>
<h1>Mozilla Firefox</h1>
</article>
</main>

EIqueta
secIon

• <secIon>
…
</secIon>

• Deﬁne
una
sección
del
documento,
agrupando

elementos
de
la
misma
temáIca.

<section>
<h1>Título</h1>
<p>Texto largo</p>
</section>

EIqueta
arIcle

• <arIcle>
…
</arIcle>

• Deﬁne
un
contenido
independiente,
como
podría
ser
un
arnculo
de
un

blog,
una
noIcia,
un
comentario,
etc…

<section>
<article>
<h1>Noticia 1</h1>
<p>Texto noticia 1.</p>
</article>
<article>
<h1>Noticia 2</h1>
<p>Texto noticia 2.</p>
</article>
</section>

EIqueta
aside

• <aside>
…
</aside>

• Deﬁne
un
contenido
aparte.
Es
lo
que
se
conoce

vulgarmente
como
barra
lateral
de
la
web
(sidebar).

<p>Vacaciones familiares.</p>
<aside>
<h4>Listado de hoteles</h4>
<ul>
<li>Hotel Victoria</li>
<li>Hotel NH</li>
</ul>
</aside>

EIqueta
figure

• <figure>
…
</figure>

• Define
una
sección
donde
agrupar
contenido

como
imágenes,
ilustraciones,
diagramas,

etc…

<figure>
<img src=”imagen.jpg" alt=”Una imagen” />
</figure>

EIqueta
figcapIon

• <figcapIon>
…
</figcapIon>

• Define
un
subntulo
para
un
elemento
<figure>

<figure>
<img src=”imagen.jpg" alt=”Una imagen” />
<figcaption> Fig 1. Mis vacaciones.</
figcaption>
</figure>

EIqueta
footer

• <footer>
…
</footer>

• Deﬁne
un
pié
para
un
documento
o
sección.

<footer>
<p>Autor: Juan</p>
<p>Información de contacto:
<a href=mailto:mail@mail.com>Enviar mail</a>.
</p>
</footer>

EIqueta
details

• <details>
…
</details>

• Es
un
elemento
interacIvo
que
el
usuario
puede
abrir
o
cerrar.

• La
eIqueta
<summary>…</summary>
deﬁne
el
texto
visible
del

detalle.

<details>
<summary>Todos los derechos reservados.</
summary>
<p> - por La Empresa. </p>
<p>Todo el contenido y las imágenes de esta
página web son propiedad de Le Empresa.</p>
</details>

EIqueta
mark

• <mark>
…
</mark>

• Deﬁne
un
subrayado
en
un
texto.

<p>Mi nombre es Juan Diego <mark>Navarro</mark>.</p>

EIqueta
menu
y
menuitem

• Con
esta
combinación
de
eIquetas
podemos
generar
opciones
que
se
añadirán
al

menú
contextual
del
sistema
operaIvo
al
uIlizar
el
botón
derecho
del
ratón.

<div style="background:red;border:1px solid
#cccccc;padding: 10px;" contextmenu="mymenu">
<p>Click derecho con el raton</p>
<menu type="context" id="mymenu">
<menuitem label="Recargar web"
onclick="window.location.reload();">
</menuitem>
<menuitem label="Saludar" onclick="alert('hola');">
</menuitem>
</menu>
</p>
</div>

EIqueta
progess

• <progess></progess>

• Deﬁne
una
barra
de
progreso
para
una
tarea
.

• Se
puede
usar
junto
con
javascript
para

mostrar
el
progreso
del
valor.

<progress value="22" max="100"></progress>

EIqueta
audio

• <audio>
…
</audio>

• Deﬁne
un
reproductor
de
sonidos.

• Formatos
permiIdos:
mp3,
wav
y
ogg.

<audio controls>
<source src=”musica.ogg" type="audio/ogg">
<source src=”musica.mp3" type="audio/mpeg">
Su navegador no soporta la etiqueta audio.
</audio>

EIqueta
video

• <video>
…
</video>

• Deﬁne
un
reproductor
de
video.

• Formatos
permiIdos:
mp4,
webM
y
ogg.

<video width="320" height="240" controls>
<source src= "peli.mp4" type="video/mp4">
<source src=”peli.ogg" type="video/ogg">
Su navegador no soporta la etiqueta video.
</video>

EIqueta
canvas

• <canvas>
…
</canvas>

• Crea
un
área
para
dibujar
mediante
lenguajes
de
script

(normalmente
javascript).

<canvas id=”area-dibujo"></canvas>
<script>
var canvas=document.getElementById(’area-dibujo');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

Atributos

• Añaden
información
adicional
a
los
elementos

HTML.

• Se
deﬁnen
en
la
eIqueta
de
apertura.

• Están
deﬁnidos
por
un
par
nombre=valor

Atributo
Class

• Especiﬁca
uno
o
más
nombres
de
clase
para

un
elemento.

• Lo
uIlizamos
junto
con
las
hojas
de
esIlo.

• Una
clase
se
puede
repeIr
tantas
veces
como

se
quiera
en
una
misma
página
web.

• jQuery.

Atributo
id

• Especifica
un
idenIficador
para
un
elemento.

• Este
idenIficador
debe
ser
único
en
la
página

web
.

• Se
puede
usar
el
id
para
idenIficar
el

elemento
mediante
lenguajes
de
script.

Atributo
style

• Sirve
para
especiﬁcar
un
esIlo
en
línea

mediante
CSS.

Atributo
Itle

• Información
extra
de
un
elemento.

• Se
visualiza
como
toolIp.

• Buscadores.

CSS
3

• Permite
separar
los
esIlos
del
contenido.

• Ahorramos
eIquetas
y
atributos.

• Con
un
solo
archivo
CSS
podemos
aplicar

esIlos
a
miles
de
páginas.

<font color="red" face="Arial" size="5">Titular de la página</font>

EsIlos
en
el
código

• Se
incluye
en
la
eIqueta
HTML
mediante
el

atributo
“style”.

• Debería
ser
uIlizado
solo
en
situaciones
muy

especiﬁcas

<p style="color: black; font-family: Verdana;”>Párrafo.</p>

EsIlos
internos

• Se
deﬁnen
en
la
cabecera
del
documento
HTML.

• Se
uIliza
la
eIqueta
<style>.

• Pocas
reglas
CSS
o
especiﬁcas
para
una
página
de

un
siIo
web.

p { color: black; font-family: Verdana; }
</style>

EsIlos
externos

• Se
uIliza
la
eIqueta
<link>
de
HTML.

• Un
mismo
archivos
de
esIlos
para
mulItud
de

páginas.

• Aplicación
homogénea.

<link rel="stylesheet"
type="text/css" href="/css/
estilos.css" media="screen" />

EsIlos
externos

• También
se
puede
usar
@import
(regla
CSS).

• Es
mejor
usar
<link>,
según
la
W3C.

<style type="text/css" media="screen">
@import '/css/estilos.css';
@import url('/css/estilos.css');
</style>

Sintaxis

• Regla:
cada
uno
de
los
esIlos
que
componen
una
hoja
de
esIlos.

• Selector:
indica
el
elemento
o
elementos
HTML
a
los
que
se
aplica
la
regla.

• Declaración:
especiﬁca
los
esIlos
que
se
aplican
a
los
elementos.
Esta

compuesta
por
una
o
más
propiedades.

• Propiedad:
caracterísIca
que
se
modiﬁca.

• Valor:
establece
el
nuevo
valor
de
la
caracterísIca.

Sintaxis

• Un
archivo
CSS
puede
contener
un
número
ilimitado
de

reglas.

• Cada
regla
se
puede
aplicar
a
selectores
diferentes.

• Cada
declaración
puede
contener
tantos
pares
propiedad/
valor
como
queramos.

Selectores

• Selector
universal

• Se
aplica
a
todos
los
elementos
HTML

* {
margin: 0;
padding: 0;
}

Selectores

• Selector
de
Ipo
o
eIqueta

• Selecciona
todos
los
elementos
de
la
página

cuya
eIqueta
HTML
coincide
con
el
valor
del

selector.

a {
color: red;
}

Selectores

• CSS
permite
agrupar
varias
reglas
individuales

en
una
sola
regla
con
un
selector
múlIple.

h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

Selectores

• Selector
descendente

• Selecciona
elementos
que
se
encuentran
dentro
de

otros
elementos.

p span { color: red; }
<p>
<span>texto1</span>
<a href="">...<span>texto2</span></a>
</p>

Selectores

• Selector
de
clase.

• Se
aplica
la
regla
a
todos
las
eIquetas
HTML
que
Ienen

deﬁnido
como
nombre
de
clase,
el
nombre
del
selector.

• En
una
misma
página
HTML
varios
elementos
diferentes

pueden
uIlizar
el
mismo
valor
en
el
atributo
class.

• Sintaxis:
.selector

.destacado { color: red; }
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>

Selectores

• Los
selectores
de
Ipo
y
selectores
de
clase
se

pueden
combinar.

p.destacado { color: red }
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<a href=”#” class="destacado"> Enlace</a>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>

Selectores

• Es
posible
aplicar
los
esIlos
de
varias
clases

CSS
sobre
un
mismo
elemento.

.error { color: red; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
.error.destacado { color: blue; }
<p class="especial destacado error">Párrafo de texto...</p>

Selectores

• Selector
de
id.

• Permite
seleccionar
un
elemento
de
la
página
a
través
del
valor
de

su
atributo
id.

• Solo
seleccionan
un
elemento
de
la
página
ya
que
el
valor
del

atributo
id
no
se
puede
repeIr
en
otros
elementos
de
la
página.

• Sintaxis:
#selector

#destacado { color: red; }
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>

Selectores

• Selector
de
hijos.

• Se
uIliza
para
seleccionar
un
elemento
que
es

hijo
directo
de
otro
elemento.

• Sintaxis:
elemento
>
elemento

p > span { color: blue; }
<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>

Selectores

• Selector
adyacente.

• Dos
elementos
son
adyacentes
cuando
son
hermanos
y

están
uno
al
lado
del
otro.

h2 { color: green; }
h1 + h2 { color: red }
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
<h2>Otro subtítulo</h2>
</body>

Selectores

• Con
CSS3
se
añade
el
selector
general
de
elementos
hermnos.

• Funcional
igual
que
el
selector
adyacente
pero
no
Iene
en
cuenta
que
los

elementos
tengan
que
estar
uno
al
lado
del
otro.

h1 + h2 { ... } /* selector adyacente */
h1 ~ h2 { ... } /* selector general de hermanos */
<h1>...</h1>
<h2>...</h2>
<p>...</p>
<div>
<h2>...</h2>
</div>
<h2>...</h2>

Selectores

• Selector
de
atributos.

• Permite
seleccionar
elementos
HTML
en
función
de
sus
atributos
y/o
valores
de

esos
atributos.

/* Se muestran de color azul todos los enlaces que tengan un atributo
"class", independientemente de su valor */
a[class] { color: blue; }
"class" con el valor "externo" */
a[class="externo"] { color: blue; }
/* Se muestran de color azul todos los enlaces que apunten al sitio
"http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
"class" en el que al menos uno de sus valores sea "externo" */
a[class~="externo"] { color: blue; }

Selectores

• Selectores
de
atributos
en
CSS3

/* Selecciona todos los enlaces que apuntan a
una dirección de correo electrónico */
a[href^="mailto:"] { ... }
/* Selecciona todos los enlaces que apuntan a
una página HTML */
a[href$=".html"] { ... }
/* Selecciona todos los títulos h1 cuyo atributo
title contenga la palabra "capítulo" */
h1[title*="capítulo"] { ... }

Pseudo-‐elementos

• :ﬁrst-‐line

• Permite
seleccionar
la
primera
línea
de
un

elemento.

p:first-line { text-transform: uppercase; }

Pseudo-‐elementos

• :ﬁrst-‐lexer

• Permite
seleccionar
la
primera
letra
de
la

primera
línea
de
texto
de
un
elemento.

p:first-letter { text-transform: uppercase; }

Pseudo-‐elementos

• :before
y
:a|er

• Se
uIlizan
en
combinación
con
la
propiedad

content.

• Añaden
contenidos
antes
o
después
del

contenido
original.

h1:before { content: "Capítulo - "; }
p:after { content: "."; }

Pseudo-‐elementos

• En
CSS3
cambia
la
sintaxis
de
los
pseudo-‐
elementos,
se
cambia
“:”
por
“::”.

• CSS3
añade
un
pseudo-‐elemento

nuevo
::selección,
el
cual
selecciona
el
texto

que
ha
seleccionado
un
usuario
con
su
ratón
o

teclado.

Pseudo-‐clases

• :ﬁrst-‐child

• Selecciona
el
primer
elemento
hijo
de
un

elemento.

p em:first-child {
color: red;
}
<p>Esto <span><em>es un texto</em></span> dentro
de una etiqueta de <em>parrafo</em>.</p>

Pseudo-‐clases

• :link
y
:visited

• Se
uIlizan
para
aplicar
esIlos
a
los
enlaces
de

una
misma
página.

a:link { color: red; }
a:visited { color: green; }

Pseudo-‐clases

• :hover,
:acIve
y
:focus

• :hover
se
acIva
cuando
el
usuario
pasa
el
ratón

por
encima
de
un
elemento.

• :acIve
se
acIva
cuando
el
usuario
pulsa
sobre

cualquier
elemento.
Se
muestra
solo
el
intervalo

de
Iempo
en
el
que
el
usuario
pulsa

y
suelta
el

botón
del
ratón.

• :focus
se
acIva
cuando
el
elemento
Iene
el
foco

del
navegador,
es
decir,
cuando
el
elemento
está

seleccionado.

Pseudo-‐clases

• En
CSS3
se
añaden
varias
pseudo-‐clases
nuevas.

• elemento:nth-‐child(numero)

• elemento:nth-‐last-‐child(numero)

• elemento:empty

• elemento:ﬁrst-‐child
y
elemento:last-‐child

• elemento:nth-‐of-‐type(numero)

• elemento:nth-‐last-‐of-‐type(numero)

• :not(elemento)

li:nth-child(2n+1) { ... }
/* selecciona todos los elementos impares de una lista */
li:nth-child(2n) { ... }
/* selecciona todos los elementos pares de una lista */

Herencia

• Cuando
se
establece
el
valor
de
una
propiedad
en
un
elemento,
sus
elementos
descendientes

heredan
de
forma
automáIca
el
valor
de
esa
propiedad
.

<html>
<head>
body { color: blue; }
h1 { font-family: Verdana; }
p { color: blue; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>

Herencia

• Podemos
forzar
la
herencia

<html>

<head>

<!-‐-‐meta
charset="UTF-‐8”à

<style
type="text/css”>

ul
{

background:
blue;

color:
white;

margin:
0;

padding:
0;

}

ul
li
{

display:
inline;

margin:
0;

padding:
0
0.5em;

border-‐right:
1px
solid;
}

ul
li
a
{

/*color:
inherit;*/

text-‐decoraIon:
none;

}

</style>

</head>

<body>

<ul>

<li><a
href="/">Inicio</a></li>

<li><a
href="/news/">NoIcias</a></li>

</ul>

</body>

</html>

Cascada

• Importancia:

– 1.
Hojas
de
esIlo
de
agentes
de
usuario.

– 2.
Declaraciones
normales
en
hojas
de
esIlo
de

usuario
.

– 3.
Declaraciones
normales
en
hojas
de
esIlo
de
autor.

– 4.
Declaraciones
importantes
en
hojas
de
esIlo
de

autor.

– 5.
Declaraciones
importantes
en
hojas
de
esIlo
de

usuario.

• Especiﬁcidad.

• Orden
de
las
fuentes.

Unidades
de
medida

• in:
pulgadas
("inches",
en
inglés).
Una
pulgada
equivale
a
2.54

cennmetros.

• cm:
cennmetros.

• 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.

• em:
(no
confundir
con
la
eIqueta
<em>
de
HTML)
relaIva
respecto
del

tamaño
de
letra
del
elemento.

• ex:
relaIva
respecto
de
la
altura
de
la
letra
x
("equis
minúscula")
del
Ipo
y

tamaño
de
letra
del
elemento.

• px:
(píxel)
relaIva
respecto
de
la
resolución
de
la
pantalla
del
disposiIvo

en
el
que
se
visualiza
la
página
HTML.

Colores

• Colores
por
palabras
clave:
aqua,
black,
blue,
fuchsia,
gray,

green,
lime,
maroon,
navy,
olive,
orange,
purple,
red,
silver,

teal,
white,
yellow

• RGB
Decimal:
p
{
color:
rgb(71,
98,
176);
}

• RGB
Porcentual:
p
{
color:
rgb(27%,
38%,
69%);
}

• RGB
hexadecimal:
p
{
color:
#4762B0;
}

• RGB
con
opacidad:
p
{
color:
rgba(71,
98,
176,
0.5);
}

Anchura

• Width

• Controla
la
anchura
de
la
caja
de
los
elementos.

• No
admite
valores
negaIvos.

• Los
valores
en
porcentaje
se
calculan
a
parIr
de
la
anchura

de
su
elemento
padre.

• Por
defecto
su
valor
es
auto.

#lateral { width: 200px; }
<div id="lateral">
...
</div>

Altura

• Height

• Controla
la
anchura
de
la
caja
de
los
elementos.

• No
admite
valores
negaIvos.

• Los
valores
en
porcentaje
se
calculan
a
parIr
de
la
anchura

de
su
elemento
padre.

• Por
defecto
su
valor
es
auto.

#cabecera { height: 60px; }
<div id="cabecera">
...
</div>

Margen

• margin-‐le|,
margin-‐right,
margin-‐top
y
margin-‐boxom.

.destacado {
margin-left: 2em;
}
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nam et elit.</p>
<p class="destacado">Vestibulum lectus diam,
luctus vel, venenatis ultrices, cursus vel,
tellus.</p>

Margen

• CSS
deﬁne
una
propiedad
especial
que
permite
deﬁnir
los

cuatro
márgenes
con
una
sola
propiedad:
margin.

• Si
solo
se
indica
un
valor,
los
cuatro
márgenes
tomarán
ese

valor.

• Si
se
indican
dos
valores,
el
primero
se
asigna
al
margen

superior
e
inferior
y
el
segundo
a
los
márgenes
izquierdo
y

derecho.

• Si
se
indican
tres
valores,
el
primero
se
asigna
al
margen

superior,
el
tercero
se
asigna
al
margen
inferior,
y
el

segundo
se
asigna
a
los
márgenes
izquierdo
y
derecho.

• Si
se
indican
los
cuatro
valores
el
orden
de
asignación
es:

superior,
derecho,
inferior
e
izquierdo.

Relleno

• Funciona
igual
que
margin.

body {padding: 2em} /* Todos los rellenos valen 2em */
body {padding: 1em 2em} /* Superior e inferior = 1em,
Izquierdo y derecho = 2em */
body {padding: 1em 2em 3em} /* Superior = 1em, derecho
= 2em, inferior = 3em, izquierdo = 2em */
body {padding: 1em 2em 3em 4em} /* Superior = 1em,
derecho = 2em, inferior = 3em, izquierdo = 4em */

Bordes

• La
anchura
se
controla
con
las
propiedades:

border-‐top-‐width,
border-‐right-‐width,
border-‐
boxom-‐width
y
border-‐le|-‐width.

div {
border-top-width: 10px;
border-right-width: 1em;
border-bottom-width: thick;
border-left-width: thin;
}

Bordes

• Podemos
uIlizar
la
propiedad
border-‐width
para
deﬁnir
simultáneamente

los
cuatro
bordes
por
igual.

p { border-width: thin }
/* thin thin thin thin */
p { border-width: thin thick }
/* thin thick thin thick */
p { border-width: thin thick medium }
/* thin thick medium thick */
p { border-width: thin thick medium thin }
/* thin thick medium thin */

Bordes

• El
color
se
controla
con
las
propiedades:
border-‐top-‐color,

border-‐right-‐color,
border-‐boxom-‐color
y
border-‐le|-‐color.

• Podemos
uIlizar
la
propiedad
border-‐color
para
deﬁnir

simultáneamente
los
cuatro
colores
por
igual.

div {
border-top-color: #CC0000;
border-right-color: blue;
border-bottom-color: #00FF00;
border-left-color: #CCC;
}

Bordes

• El
esIlo
se
controla
con
las
propiedades:
border-‐top-‐style,

border-‐right-‐style,
border-‐boxom-‐style
y
border-‐le|-‐style.

• Podemos
uIlizar
la
propiedad
border-‐style
para
deﬁnir

simultáneamente
los
cuatro
esIlos
por
igual.

div {
border-top-style: dashed;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: solid;
}

Bordes

• CSS
también
posee
una
propiedad
que
permite

establecer
todos
los
atributos
de
forma

simultánea:
border-‐top,
border-‐right,
border-‐
boxom
y
border-‐le|.

div {
border-top: 1px solid #369;
border-bottom: 3px double #369;
}

Bordes

• Por
úlImo
tenemos
una
propiedad
para

establecer
de
manera
global
el
valor
de
todos

los
atributos
y
todos
los
bordes.

div { border: 1px solid red; }

Bordes

• Bordes
con
esquinas
redondeadas

div
{
border:2px solid;
border-radius:25px;
}

Bordes

• Se
le
puede
añadir
sombra
a
una
caja.

div
{
box-shadow: 10px 10px 5px #888888;
}

Bordes

• Podemos
asignar
una
imagen
para
crear
el

borde

div
{
-webkit-border-image:url(border.png) 30 30 round; /*
Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera
10.5-12.1 */
border-image:url(border.png) 30 30 round;
}

Fondos

• El
fondo
puede
ser
un
color
simple
o
una

imagen.

• Solo
se
visualiza
en
el
área
ocupada
por
el

contenido
y
su
relleno.

• Hay
cinco
propiedades
para
deﬁnir
los
fondos.

• Una
sexta
propiedad
que
engloba

simultáneamente
a
las
demás.

Fondos

• Color

• Con
CSS3
podemos
especiﬁcar
el
área
que

queremos
pintar.

body {
background-color: #F5F5F5;
}
background-clip: border-box|
padding-box|content-box|initial|
inherit;

Fondos

• Imagen

• CSS
permite
establecer
simultáneamente
un

color
y
una
imagen
de
fondo.

• CSS3
permite
uIlizar
varias
imágenes
de

fondo,
tan
solo
separandolas
con
una
,

• También
podemos
establecer
el
tamaño
de
la

imagen
de
fondo.

body { background-image: url("imagenes/fondo.png")
background-size: 50%;}

Fondos

• RepeIción.

• repeat:
se
repite
horizontal
y
verIcalmente.

• repeat-‐x:
solo
se
repite
horizontalmente.

• repeat-‐y:
solo
se
repite
verIcalmente.

• no-‐repeat:
solo
se
muestra
la
imagen
una
vez.

body { background-image: url("imagenes/fondo.png")
no-repeat}

Fondos

• Posición.

• Se
suelen
indicar
dos
valores,
el
primero
indica
el

desplazamiento
horizontal
y
el
segundo
el
desplazamiento

verIcal.

#caja1 {
background-image: url("fondo.gif");
background-repeat: no-repeat;
background-position: bottom left;
}

Fondos

• background

/* Color e imagen de fondo de la página mediante una
propiedad shorthand */
body { background: #222d2d url(./graphics/colorstrip.gif)
repeat-x 0 0; }
/* La propiedad shorthand anterior es equivalente a las
siguientes propiedades */
body {
background-color: #222d2d;
background-image: url("./graphics/colorstrip.gif");
background-repeat: repeat-x;
background-position: 0 0;
}

Fondos

• Background-‐origin

• Especiﬁca
a
que
debe
ser
relaIvo
la
posición

de
la
imagen.

background-origin: padding-box|border-box|content-
box|initial|inherit;

Fondos

• Gradientes.

• Con
CSS3
podemos
deﬁnir
gradientes
de
colores

para
nuestros
fondos.

• Los
gradientes
pueden
ser:
lineales,
radiales,

lineal
repeIIvo
y
radial
repeIIvo.

background: linear-gradient(direction, color-stop1,
color-stop2, ...);
background: linear-gradient(angle, color-stop1, color-
stop2);
background: radial-gradient(center, shape size, start-
color, ..., last-color);

Posicionamiento
y
visualización

• Los
elementos
de
bloque
("block
elements"
en
inglés)
siempre

empiezan
en
una
nueva
línea
y
ocupan
todo
el
espacio
disponible.

• Los
elementos
en
línea
("inline
elements"
en
inglés)
no
empiezan

necesariamente
en
nueva
línea
y
sólo
ocupan
el
espacio
necesario

para
mostrar
sus
contenidos.

• Los
elementos
en
línea
definidos
por
HTML
son:
a,
abbr,
acronym,

b,
basefont,
bdo,
big,
br,
cite,
code,
dfn,
em,
font,
i,
img,
input,
kbd,

label,
q,
s,
samp,
select,
small,
span,
strike,
strong,
sub,
sup,

textarea,
x,
u,
var.

• Los
elementos
de
bloque
definidos
por
HTML
son:
address,

blockquote,
center,
dir,
div,
dl,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,

hr,
isindex,
menu,
noframes,
noscript,
ol,
p,
pre,
table,
ul.

Posicionamiento

• Cinco
modelos
diferentes:
normal
o
estáIco,

absoluto,
relaIvo,
fijo
y
flotante.

• El
posicionamiento
se
define
mediante
la

propiedad
posiIon.

• Normalmente
cuando
se
posiciona
una
caja

también
es
necesario
desplazarla
respecto
de
su

posición
original
o
respecto
de
otro
origen
de

coordenadas.

• CSS
define
cuatro
propiedades:
top,
le|,
right
y

boxom.

Posicionamiento

• Normal
o
estáIco.

• Es
el
modelo
que
uIlizan
por
defecto
los

navegadores
para
mostrar
los
elementos
de
las

páginas.

• Se
Iene
en
cuenta
si
el
elemento
es
de
bloque
o

en
línea,
sus
propiedades
width
y
height
y
su

contenido.

• Si
un
elemento
se
encuentra
dentro
de
otro,
el

elemento
padre
se
llama
"elemento
contenedor"

y
determina
tanto
la
posición
como
el
tamaño
de

todas
sus
cajas
interiores.

Posicionamiento

• RelaIvo.

• Desplaza
una
caja
respecto
de
su
posición

original
establecida
mediante
el
posicionamiento

normal.

• El
posicionamiento
relaIvo
de
una
caja
no
afecta

al
resto
de
cajas
adyacentes.

Posicionamiento

• Absoluto.

• Se
uIliza
para
establecer
de
forma
exacta
la
posición
en
la

que
se
encuentra
la
caja
de
un
elemento.

• Cuando
una
caja
se
posiciona
de
forma
absoluta,
el
resto

de
elementos
de
la
página
se
ven
afectados
y
modiﬁcan
su

posición.

• A
diferencia
del
posicionamiento
relaIvo,
la
interpretación

de
los
valores
de
posicionamiento
depende
del
elemento

contenedor
de
la
caja
posicionada.

• Por
tanto,
si
se
quiere
posicionar
un
elemento
de
forma

absoluta
respecto
de
su
elemento
contenedor,
es

imprescindible
posicionar
este
úlImo.

Posicionamiento

• Fijo

• Caso
parIcular
del
posicionamiento
absoluto.

•
Es
inamovible
dentro
de
la
ventana

Posicionamiento
flotante

• La
propiedad
CSS
que
permite
posicionar
de

forma
flotante
una
caja
se
denomina
float.

• Cuando
una
caja
se
posiciona
con
modelo
de

posicionamiento
flotante,
automáIcamente

se
convierte
en
una
caja
flotante,
lo
que

significa
que
se
desplaza
hasta
la
zona
más
a

la
izquierda
o
más
a
la
derecha
de
la
posición

en
la
que
originalmente
se
encontraba.

Posicionamiento
flotante

• La
propiedad
clear
permite
modificar
el

comportamiento
por
defecto
del

posicionamiento
flotante
para
forzar
a
un

elemento
a
mostrarse
debajo
de
cualquier

caja
flotante.

• La
propiedad
clear
indica
el
lado
del
elemento

HTML
que
no
debe
ser
adyacente
a
ninguna

caja
posicionada
de
forma
flotante.

Visualización

• La
propiedad
display
permite
ocultar
completamente

un
elemento.

• El
resto
de
elementos
de
la
página
se
mueven
para

ocupar
su
lugar.

• Los
valores
más
usados
para
la
propiedad
display
son:

-‐
block:
muestra
un
elemento
como
si
fuera
un

elemento
de
bloque.

-‐
inline:
visualiza
un
elemento
en
forma
de
elemento

en
línea.

-‐
none:
oculta
el
elemento.

Visualización

• La
propiedad
visibility
permite
hacer
invisible
un

elemento.

• El
resto
de
elementos
no
modifican
su
posición.

• Los
valores
más
usados
para
la
propiedad

visibility
son:

-‐
hidden:
convierte
una
caja
en
invisible.

-‐
collapse:
solo
se
puede
uIlizar
en
las
filas,

grupos
de
filas,
columnas
y
grupos
de
columnas

de
una
tabla.

Visualización

• La
propiedad
overﬂow
permite
controlar
la
forma
en
la
que

se
visualizan
los
contenidos
que
sobresalen
de
sus

elementos.

-‐
visible:
el
contenido
no
se
corta
y
se
muestra
lo
que

sobresale.

-‐
hidden:
el
contenido
sobrante
se
oculta.

-‐
scroll:
solamente
se
visualiza
el
contenido
que
cabe

dentro
de
la
zona
reservada,
pero
también
se
muestran

barras
de
scroll
que
permiten
visualizar
el
resto
del

contenido.

-‐
auto:
el
comportamiento
depende
del
navegador,

aunque
normalmente
es
el
mismo
que
scroll.

Visualización

• UIlizando
la
propiedad
z-‐index
es
posible

crear
páginas
complejas
con
varios
niveles
o

capas.

• El
valor
más
común
de
z-‐index
es
un
número

entero.

• z-‐index:8
<
z-‐index:10
<
z-‐index:12

Tipogra†as
y
efectos
de
texto

• Color

• Establece
el
color
del
texto.

h1 { color: #369; }
p { color: black; }
a, span { color: #B1251E; }
div { color: rgb(71, 98, 176); }

Tipogra†as
y
efectos
de
texto

• Font-‐family

• Establece
el
Ipo
de
letra
del
texto:

1.
Mediante
el
nombre
de
una
familia

Ipográﬁca.

2.
Mediante
el
nombre
genérico
de
una

familia
Ipográﬁca.

font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;

Tipogra†as
y
efectos
de
texto

• Font-‐size

• Permite
indicar
el
tamaño
de
la
letra
del
texto.

Tipogra†as
y
efectos
de
texto

• Font-‐weight

• Permite
modiﬁcar
el
grosor
del
texto.

#especial em {
font-weight: bold;
}
#especial strong {
font-weight: normal;
background-color: #FFFF66;
padding: 2px;
}

Tipogra†as
y
efectos
de
texto

• Font-‐style.

• Se
suele
uIlizar
para
mostrar
el
texto
en

cursiva
con
el
valor
italic.

Tipogra†as
y
efectos
de
texto

• Font

• Permite
indicar
de
forma
directa
algunas
o
todas
las
propiedades
de
la
Ipogra†a
de
un
texto.

font:
76%/140%
Verdana,Arial,HelveIca,sans-‐serif;

font:
normal
24px/26px
"Century
Gothic","Trebuchet
MS",Arial,HelveIca,sans-‐serif;

font:
normal
.94em
"Trebuchet
MS",Arial,HelveIca,sans-‐serif;

font:
bold
1em
"Trebuchet
MS",Arial,Sans-‐Serif;

font:
normal
0.9em
"Lucida
Grande",
Verdana,
Arial,
HelveIca,
sans-‐serif;

font:
normal
1.2em/1em
helveIca,
arial,
sans-‐serif;

font:
11px
verdana,
sans-‐serif;

Tipogra†as
y
efectos
de
texto

• Text-‐align

• Permite
alinear
el
texto
según
los
valores

tradicionales:
izquierda
(le|),
derecha
(right),

centrado
(center)
y
jusIﬁcado
(jusIfy).

• Además
de
alienar
el
texto
de
un
elemento,

también
alinea
todos
sus
contenidos
como

imágenes.

Tipogra†as
y
efectos
de
texto

• Line-‐height

• Se
usa
para
controlar
el
interlineado,
ya
que

controla
la
altura
ocupada
por
cada
línea
de

texto.

Tipogra†as
y
efectos
de
texto

• Text-‐decoraIon.

• Se
usa
para
decorar
un
texto.

• underline:
subraya
el
texto.

• overline:
añade
una
línea
a
la
parte
superior.

• line-‐through:
muestra
el
texto
tachado.

• blink:
muestra
el
texto
parpadeando.

• none:
sin
ningún
Ipo
de
decoración.

Tipogra†as
y
efectos
de
texto

• Text-‐transform.

• Se
usa
para
transformar
el
texto.

• -‐
uppercase:
texto
en
mayúsculas.

• -‐
lowercase:
texto
en
minúsculas.

• -‐
capitalize:
la
primera
letra
de
cada
palabra

en
mayúscula.

Tipogra†as
y
efectos
de
texto

• Text-‐shadows

• Permite
crear
sombras
en
los
textos.

h1
{
text-shadow: 5px 5px 5px #bbbbbb;
}

Tipogra†as
y
efectos
de
texto

• Permite
que
se
usen
fuentes
que
no
están
instaladas
en
el
ordenador

clientes
y
tomarlas
directamente
del
servidor.

@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}

Layout
mulIcolumna

• CSS3
incorpora
reglas
para
maquetado
mulIcolumna.

• column-‐count:
especificaremos
el
número
de

columnas.

• column-‐width:
servirá
para
definir
la
anchura
de
las

disIntas
columnas
a
crear.

• column-‐gap:
nos
permiIrá
definir
el
espacio
en
blanco

entre
columnas.

• column-‐rule:
servirá
para
crear
una
línea
divisoria

entre
las
columnas.

Animaciones
y
transiciones

• Transform

• Aplica
una
transformación
2D
o
3D
a
un

elemento.

Animaciones
y
transiciones

• Transform

• Aplica
una
transformación
2D
o
3D
a
un

elemento.

• Transformaciones
2D:
translate,
rotate,
scale
y

skew

Animaciones
y
transiciones

• Transform

• Aplica
una
transformación
2D
o
3D
a
un

elemento.

2D:
translate,
rotate,
scale
y

skew.

3D:
rotateX
y
rotateY

Animaciones
y
transiciones

• Podemos
añadir
transiciones
cuando

cambiamos
de
un
esIlo
a
otro.

• Para
conseguir
una
transición
debemos

especiﬁcar:

-‐
La
propiedad
CSS
a
la
que
queremos
añadir

el
efecto.

-‐
La
duración
del
efecto.

Animaciones
y
transiciones

• Debemos
crear
una
regla
@keyframes

• Podemos
usar
porcentajes
para
definir
cuando
ocurrirá

la
animación.

• Podemos
usar
las
palabras
“from”
y
“to”
para
definir
el

principio
y
el
final.

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

Técnicas
de
maquetación

• Centrar
una
página
horizontalmente.

• anchura
ﬁja
adecuada
y
centrar
la
página

horizontalmente
respecto
de
la
ventana
del

navegador.

• Si
le
damos
al
ancho
un
valor
porcentual

podemos
conseguir
un
diseño
dinámico
o

líquido.

Técnicas
de
maquetación

• Diseño
a
dos
columnas
con
cabecera
y
pie
de

página.

Técnicas
de
maquetación

• Diseño
a
tres
columnas

TEMA
4.
DISEÑO
WEB
RESPONSIVE

Introducción

• Corresponde
a
una
tendencia
de
creación
de

páginas
web
que
pueden
ser
visualizadas
en
todo

Ipo
de
disposiIvos
sin
necesidad
de
crear
una

versión
diferente
para
cada
uno
de
ellos.

• CSS3
Media
Queries
y
un
layout
ﬂexible.

• El
siIo
web
detecta
con
que
Ipo
de
disposiIvo

está
accediendo
el
usuario
y
muestra
la
versión

más
opImizada
para
ese
medio.

Introducción

• No
es
lo
mismo
enfocar
el
diseño
a
la
resolución
de
la
pantalla
que

al
ancho
del
navegador.

Viewport

• Fue
inicialmente
creada
por
Apple
para
deﬁnir
diversas

directrices
sobre
como
el
iPhone
debe
renderizar
un

documento
web.

• Sirve
para
deﬁnir
que
área
de
pantalla
está
disponible
al

renderizar
un
documento,
cuál
es
su
nivel
de
escalado
que

puede
realizar
el
usuario,
así
como
si
el
navegador
debe

mostrarla
con
algún
zoom
inicial.

• El
viewport
corresponde
con
el
área
que
está
disponible
en

la
pantalla
del
navegador
donde
se
mostrará
la
página
web.

• En
el
caso
de
disposiIvos
móviles,
no
corresponde
al

tamaño
real
de
la
pantalla
en
píxeles,
sino
al
espacio
que
la

pantalla
está
emulando
que
Iene.

Viewport

• La
eIqueta
META
dispone
de
los
siguientes
parámetros:

-‐
Width:
anchura
virtual
del
viewport.

-‐
Height:
altura
virtual
del
viewport.

-‐
IniIal-‐scale:
la
escala
inicial
del
documento.

-‐
Minimum-‐scale:
la
escala
mínima
que
se
puede

poner
en
el
documento.

-‐
Maximum-‐scale:
la
escala
máxima
que
se
puede

poner
en
el
documento.

-‐
User-‐scalable:
si
se
permite
o
no
hacer
zoom
al
usuario.

Viewport

<meta name="viewport" content="user-scalable=no,
width=device-width, initial-scale=1">
• Con
width=device-‐width
conseguimos
que
el

viewport
sea
igual
a
la
anchura
real
de
la
pantalla

del
disposiIvo,
de
modo
que
no
se
tratará
de

emular
una
pantalla
mayor
de
lo
que
realmente

es.

• Con
iniIal-‐scale=1
conseguimos
que
no
se
haga

zoom
sobre
el
documento.

• Con
user-‐scalable=no
conseguimos
que
el
usuario

no
pueda
hacer
zoom.

El
layout
ﬂuido

• Se
diseña
con
la
idea
en
mente
de
que
se
expandan

hasta
ocupar
el
total
disponible
o
una
parte
de
pantalla

del
disposiIvo
que
renderiza
la
página
web.

• Están
basados
en
anchos
por
porcentajes
y
sus

elementos
se
redimensionan
si
cambiamos
la

resolución
o
si
visualizamos
la
página
desde
diferentes

disposiIvos.

• En
la
mayoría
de
ocasiones,
no
todos
los
contenedores

usan
valores
con
porcentaje,
muchos
usan
valores
con

un
ancho
ﬁjo
en
píxeles.
Esto
úlImo
es
muy
común
en

menús
laterales
por
ejemplo.

El
layout
ﬂuido

• Iene
un
inconveniente
cuando
el
ancho
del
disposiIvo
que
visita
la
página
es
muy
grande
y
el

contenido
escaso.

• También
puede
darse
el
caso
contrario,
que
el
ancho
del
disposiIvo
sea
demasiado
pequeño
y
en

una
página
web
con
muchos
elementos
al
comprimirlos
tanto
toda
la
maquetación
se
descuadre.

Fuentes
ﬂexibles

• Si
deseamos
que
aumente
de
manera

proporcional
el
tamaño
del
texto,
deberemos

indicar
el
tamaño
del
texto
de
manera
relaIva

en
el
elemento
padre
de
mas
alta
jerarquía.

body{font-size: 100%}
• Después
para
cada
caso
le
daremos
un

tamaño
en
em.

Fuentes
ﬂexibles

• Para
pasar
un
valor
px
a
em:

• Target/context
=
result

• Target:
tamaño
de
letra
que
queremos

conseguir.

• Context:
tamaño
de
fuente
base
del

navegador.

• Para
pasar
32px
a
em:
32/16=
2em

Imágenes
ﬂexibles

• Problema:
cuando
la
imagen
excede
del

tamaño
del
contenedor,
la
imagen
excederá

del
tamaño
de
este.

• Solución:
img { width: 100%}
• De
esta
manera
se
adaptará
al
ancho
del

contenedor
ocupando
el
100%
del
mismo.

Imágenes
ﬂexibles

• Otro
problema:
Cuando
el
contenedor
es
más
grande
que
la

imagen,
está
intentará
llenar
el
100%
del
contenedor
y
ocurrirá
un

pixelado
de
la
imagen.

• Solución:
img { max-width: 100%}
• De
esta
manera
conseguimos
que
la
imagen
sea
ﬂuida
pero
hasta

un
límite.

-‐
si
el
contenedor
Iene
300px
nuestra
imagen
de
400px

ocupará
300px.

-‐
si
el
contenedor
Iene
400px
nuestra
imagen
de
400px
ocupará

400px.

-‐
si
el
contenedor
Iene
1200px
nuestra
imagen
de
400px
ocupará

400px.

Media
queries
de
CSS3

• El
diseño
sensible
(responsive)
nos
ofrece
todo
el

control
que
tendríamos
con
un
diseño
de
ancho
fijo
y

nos
ofrece
mucha
más
flexibilidad
que
el
diseño
fluido.

• Los
media
queries
forman
parte
de
CSS3
e

inspeccionan
las
caracterísIcas
†sicas
del
medio
que

va
a
mostrar
nuestro
diseño.

• Una
media
query
consiste
en
un
Ipo
de
medio
y
al

menos
una
consulta
que
limita
las
hojas
de
esIlo

uIlizando
caracterísIcas
del
medio
como
ancho,
alto
y

color,
la
cual
se
resuelve
como
verdadera
o
falsa.

Media
queries
de
CSS3

• Podemos
uIlizar
las
media
queries
de
tres
formas
diferentes:

@media [only|not] <media_type> [ and
(<media_feature>:value)]*] {
/* Aquí van las reglas CSS necesarias */
}

<link rel="stylesheet" type="text/css"
media="<media_type> [ and
(<media_feature>:value)]*]"
href="<fichero_css>" />

@import url("<fichero_css>") <media_type> [ and
(<media_feature>:value)]*];

Media
queries
de
CSS3

• Algunos
ejemplos:

• Aplicar
una
serie
de
reglas
para
pantallas
superiores
a
1200px:

@media screen and (min-width: 1200px) {}

• Aplicar
una
hoja
de
esIlos
diferente
para
anchos
de
pantalla

inferiores
a
480px:

<link rel="stylesheet" type="text/css" media="screen and
(max-width: 480px)" href="style.css" />
@import url("style.css") screen and (max-width: 480px);
• Aplica
hojas
de
esIlo
diferentes
según
la
orientación
de
la
pantalla:

<link rel="stylesheet" media="all and
(orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and
(orientation:landscape)" href="landscape.css">

Media
queries
de
CSS3

• Los
<media_type>
hacen
referencia
al
Ipo
de
medio:

– all:
todos
los
Ipos
de
medios.

– screen:
pantallas.

– aural:
sintenIzadores
de
sonido.

– braille:
disposiIvos
de
retroalimentación
braille.

– embossed:
impresoras
braille.

– handheld:
disposiIvos
pequeños
portáIles.

– print:
impresoras.

– projecIon:
proyectores.

– xy:
teleIpos,
terminales,
etc...

– tv:
televisiones.

Media
queries
de
CSS3

• Los
<media_feaures>
hacen
referencia
a

carácterísIcas
del
medio:

Media
queries
de
CSS3

• device-‐width,
device-‐height
(max
y
min)

• Describe
la
anchura/altura
del
disposiIvo
de

salida
(la
pantalla
y
no
el
área
del
documento

a
renderizar).

• Pantalla
de
al
menos
800
píxeles:

<link rel="stylesheet" media="screen and (max-
device-width: 799px)" />

Media
queries
de
CSS3

• Color

• Indica
el
número
de
bits
por
componente
de

color
del
disposiIvo
de
salida.
Si
el
disposiIvo

no
soporta
colores,
este
valor
es
0.

• 4
bits
por
componente
de
color:

@media all and (min-color: 4) { ... }

Media
queries
de
CSS3

• Color-‐index

• Indica
el
número
de
entradas
en
la
tabla
de

colores
para
el
disposiIvo
de
salida.

• 256
colores:

@media all and (min-color-index:256) { ... }

Media
queries
de
CSS3

• Aspect-‐raIo

• Representa
la
razón
de
aspecto
de
los
pixeles

horizontales
(primer
termino)
a
los
pixeles

verIcales
(segundo
termino).

• Mismo
ancho
que
alto:

@media screen and (min-aspect-ratio: 1/1) { ... }

Media
queries
de
CSS3

• Grid

• Determina
cuando
el
disposiIvo
de
salida
es

un
disposiIvo
de
cuadrícula
(pantalla
de

teléfono
de
solo
texto).

• DisposiIvo
portaIl
con
una
pantalla
de
15

caracteres
o
más
estrecha:

@media handheld and (grid) and (max-width: 15em) { ... }

Media
queries
de
CSS3

• Monochrome

• Indica
el
número
de
bits
por
píxel
de
un

disposiIvo
monocromáIco.

• Todos
los
disposiIvos
monocromáIcos:

@media all and (monochrome) { ... }

Media
queries
de
CSS3

• Scan

• Describe
el
proceso
de
exploración
de

televisión
en
los
disposiIvos
de
salida

(progressive
o
interlace).

• Televisores
de
exploración
progresiva:

@media tv and (scan: progressive) { ... }

Media
queries
de
CSS3

• ResoluIon

• Indica
la
resolución
(densidad
de
pixeles)
del

disposiIvo
de
salida,
un
puntos
por
pulgada

(dpi)
o
en
puntos
por
cennmetro
(dpcm).

• 300
dpi
de
resolución:

@media print and (min-resolution: 300dpi) { ... }

Media
queries
de
CSS3

• OrientaIon

• Indica
cuando
el
disposiIvo
esta
en

modo
landscape
(el
ancho
de
la
pantalla
es

mayor
al
alto)
o
modo
portrait
(el
alto
de
la

pantalla
es
mayor
al
ancho).

• esIlo
solo
en
orientación
verIcal
(portrait):

@media all and (orientation: portrait) { ... }

Media
queries
de
CSS3

• Width/height

• Describe
el
ancho/alto
de
la
superﬁcie
a

renderizar
en
el
disposiIvo
de
salida,
como
el

ancho
de
la
ventana
de
un
documento.

• 320px,
480px,
600px,
768px,
900px
y
1200(+)px.

• Cuando
la
ventana
Iene
un
ancho
entre
500
y

800
píxeles:

@media screen and (min-width: 500px) and (max-width: 800px)

TEMA
5.
TECNICAS
SEO

Introducción

• SEO:
proceso
de
transformación
de
un
siIo

web
para
mejorar
el
posicionamiento
en
los

principales
buscadores
y
aumentar
el
tráﬁco

de
usuarios
o
clientes.

• No
obstante
hay
que
crear
contenidos
para
las

personas,
no
para
los
buscadores.

Introducción

• Básicamente
estas
técnicas
consisten
en:

-‐
Realizar
un
estudio
completo
de
palabras
clave
para
su

siIo.

-‐
Actualizar
y
añadir
eIquetas
META.

-‐
Mejorar
la
estructura
del
siIo
(Encabezados
y
eIquetas

alt,
texto
en
negrita,
enlaces,
etc.).

-‐
Integrar
las
palabras
clave
en
el
contenido
del
siIo.

-‐
Enviar
esos
cambios
a
los
motores
de
búsqueda.

-‐
Llevar
el
seguimiento
de
los
resultados.

-‐
Valorar
los
resultados
y
opImizar
repiIendo
el
proceso.

Introducción

• Elegir
un
buen
alojamiento
(localizado
en
el
país
de
la
web
y
rápido).

• Indexarse
de
manera
manual.

• robots.txt

User-agent: *
Disallow: /archivo.html
Disallow: /carpeta/
• sitemap.xml

<urlset>
<url>
<loc>http://www.ejemplo.com</loc>
<lastmod>2014-01-01</lastmod>
<change>weekly</change>
<priority>1</priority>
</url>
</urlset>

Meta
eIquetas

• META
descripción:
proporciona
a
los
motores
de

búsqueda
un
resumen
sobre
la
página
y
debe
contener

las
palabras
clave
que
hemos
extraído
del
estudio

previo.
Hay
que
procurar
que
cada
página
web
que

conforman
el
siIo
tenga
una
descripción
diferente.

• META
Keywords:
obsoleta,
aunque
se
sigue
usando.
En

esta
eIqueta
se
ponen
las
palabras
clave
por
las
que
te

quieres
posicionar
separadas
por
comas.

• META
robots:
la
usamos
solo
para
páginas
que
no

queremos
que
sean
indexadas
(noindex,
nofollow).

Estructura
y
elementos

• Nombre
de
dominio.

• Tener
en
cuenta
en
que
país
queremos

posicionar
la
web
para
escoger
la
extensión.

• Usar
palabras
clave
en
el
dominio.

• AnIgüedad.

Estructura
y
elementos

• Título.

• La
eIqueta
Itle
indica
el
tema
sobre
el
que

trata
una
página.

• Un
Itulo
diferente
para
cada
página.

Estructura
y
elementos

• Encabezados.

• H1
es
el
Itulo
principal
de
la
página.

• Cada
página
debe
contener
solo
un
H1.

• H2
para
los
subntulos.

• El
resto
de
encabezados
no
se
Ienen
en

cuenta
en
el
SEO.

Estructura
y
elementos

• OpImizar
imágenes.

• Nombre
descripIvo.

• Usar
atributo
alt.

Estructura
y
elementos

• URL
amigables.

• NO:
hxp://www.ejemplo.com/?p=1

• SI:
hxp://www.ejemplo.com/una-‐pagina

• La
mayoría
de
gestores
de
contenido
pueden

hacer
esto
automáIcamente,
pero
si
hemos
de

hacerlo
manualmente,
un
tutorial:

hxp://www.emenia.es/como-‐crear-‐urls-‐amigables-‐
con-‐htaccess/

Contenidos

• Publicar
contenidos
de
calidad,
bien

estructurados
y
que
aporten
valor
al
lector.

• Al
menos
400
palabras
con
una
densidad
de

palabras
clave
del
2-‐3%.

• Los
usuarios
permanecen
más
Iempo
en
la

web
y
pueden
comparIr
ese
contenido.

• Mantener
el
siIo
actualizado
(blog).

Enlaces
externos

• PageRank:
valor
numérico
que
representa
la

popularidad
de
una
página
web.

• Más
popularidad
cuanto
más
se
hable
de
I.

• Estrategia
Link
Building.

• ¡Cuidado
con
las
trampas!

Redes
sociales

• SMO
(Social
Media
OpImizaIon)

• Conseguir
que
nuestros
contenidos
sean
más

enlazados.

• Actualización
constante
de
nuestro
contenido.

• Tener
presencia
en
redes
sociales.

• Facilitar
medios
para
que
los
usuarios

compartan
nuestro
contenido.

Introducción

• Es
una
librería.

• CaracterísIcas:

– Acceder
a
elementos
del
documento.

– Modiﬁcar
la
apariencia
de
una
web.

– Alterar
el
contenido
de
un
documento.

– Responder
a
la
interacción
de
un
usuario.

– Animar
cambios
realizados
a
un
documento.

– Recuperar
información
de
un
servidor
sin
refresco.

– Simpliﬁcar
tareas
JavaScript
comunes.

Introducción

• Esta
sentencia
ejecutará
el
código
introducido

cuando
el
documento
se
haya
cargado:

$(documento).ready(function(){
… código…
})

Eventos

• Reacción
a
la
interacción
del
usuario
y
otros

eventos.

• jQuery
amplía
los
mecanismos
disponibles
en

JavaScript.

Eventos

• Eventos
de
documento.

• .load():
cuando
se
cargan
todos
los
elementos

del
DOM.

• .ready():
cuando
se
cargan
todos
los

elementos
del
DOM.

Eventos

• Eventos
de
Navegador

• .error():
cuando
se
produce
un
error

JavaScript.

• .resize():
cuando
se
redimensiona
la
ventana

del
navegador.

• .scroll():
cuando
se
produce
desplazamiento

por
la
ventana
del
navegador

Eventos

• Eventos
de
formulario.

• .blur():
cuando
un
elemento
input
pierde
el
foco.

• .change():
cuando
un
elemento
de
formulario
cambia
su

valor.

• .focus():
cuando
un
elemento
de
formulario
Iene
el
foco.

• .focusin():
permite
saber
cuando
un
elemento
o
alguno
de

sus
hijos
gana
el
foco.

• .select():
cuando
se
selecciona
un
texto
del
elemento
sobre

el
que
se
gesIona
el
evento.
Se
aplica
solo
a
los
textarea
y

a
los
input
de
Ipo
texto.

• .submit():cuando
se
envían
los
datos
del
formulario.

Eventos

• Eventos
de
teclado.

• .focusout():
cuando
un
elemento
pierde
el
foco.

• .keydown():
cuando
se
pulsa
una
tecla.

• .keypress():
cuando
se
pulsa
una
tecla,
pero
a

diferencia
del
anterior,
si
mantenemos
la
tecla

pulsada,
este
evento
se
capturaría
varias
veces.

• .keyup():
cuando
se
suelta
la
tecla
que
el
usuario

estaba
pulsando.

Eventos

• Eventos
de
ratón.

• .click():
cuando
pinchamos
sobre
un
elemento
al
que
tenemos
asociado
el
evento.

• .dblclick():
cuando
pinchamos
dos
veces
sobre
un
elemento.

• .hover():
cuando
pasamos
el
cursor
por
encima
de
un
elemento.

• .mousedown():
cuando
pinchamos
sobre
un
elemento
y
antes
del
soltar
el
botón.

• .mouseenter():
cuando
el
ratón
entra
en
el
elemento
asociado
al
evento.

• .mouseleave():
cuando
el
ratón
entra
en
el
elemento
asociado
al
evento.

• .mousemove():
cuando
el
ratón
está
encima
del
elemento.

• .mouseout():
cuando
el
ratón
deja
de
estar
encima
del
elemento.

• .mouseover():
cuando
el
ratón
entra
por
primera
vez
en
un
elemento.

• .mouseup():
cuando
al
haber
pulsado
con
el
ratón
sobre
un
elemento,
soltamos
el

botón.

• .toggle():
se
uIliza
para
generar
comportamientos
de
cambio
de
estado
generados

al
pinchar
sobre
un
elemento,
por
ejemplo,
si
queremos
que
al
pinchar
sobre
un

elemento
se
muestre
y
que
al
volver
a
pinchar
se
oculte,
esto
lo
podemos

conseguir
asociando
dos
o
más
funciones
al
mismo
evento
que
se
van
ejecutando

de
manera
secuencial.

Eventos

• Asignador
de
eventos.

• .bind():
nos
permite
asociar
funciones
a
eventos
de
elementos
tanto
del
DOM

como
del
navegador.

• .delegate():
asigna
eventos
para
elementos
específicos
que
son
hijos
de
los

elementos
seleccionados.

• .die():
nos
permite
borrar
controladores
de
eventos
que
hemos
añadido
con
el

siguiente
método.

• .live():
asigna
controladores
de
eventos
para
los
elementos
seleccionados.

• .off():
borrar
controladores
asociados
con
el
método
on.

• .on():
asigna
controladores
de
eventos
a
los
elementos
seleccionados
y
sus

elementos
descendientes.

• .one():
igual
que
bind
pero
el
elemento
sólo
se
ejecuta
una
vez.

• .trigger():
acIva
el
evento
especificado
y
el
comportamiento
predeterminado
de

un
evento
para
los
elementos
seleccionados.

• .unbind():
borrar
funciones
asociadas
a
eventos
mediante
la
función
bind.

• .undelegate():
borrar
eventos
asociados
con
delegate.

Eventos

• El
objeto
event
es
pasado
a
todos
los
eventos
que
se

lanzan
y
pone
a
nuestra
disposición
una
serie
de

atributos
para
trabajar
con
eventos.

• Event.data:
devulve
los
datos
que
hayamos
podido

pasar
al
evento
cuando
se
asocia
con
bind.

• Event.preventDefault:
anula
la
acción
predeterminada.

• Event.stopPropagaIon:
previene
que
se
ejecute

cualquier
event
que
pudiera
estar
asociado
a
los

padres
del
elemento
dentro
del
arbol
DOM.

• Event.target:
es
el
elemento
DOM
que
inicio
el
evento.

Modiﬁcación
y
animación
de
propiedades
CSS

• Mediante
jQuery
podemos
cambiar
las

propiedades
CSS
de
un
elemento
para
darle

un
esIlo
diferente.

• jQuery
dispone
de
un
método
para
que
esos

cambios
se
produzcan
mediante
una

animación.

Modiﬁcación
y
animación
de
propiedades
CSS

• .css()

• Este
método
sirve
tanto
para
recibir
el
valor
de
un
atributo
CSS

como
para
asignarle
un
nuevo
valor
y
su
funcionamiento
depende

de
los
parámetros
que
podamos
enviarle.

• Podemos
cambiar
varios
atributos
a
la
vez.

$("#micapa").css({
"background-color": "#ff8800”,
"position": "absolute”,
"width": "100px”,
"top": "100px”,
"left": "200px”
})

Modiﬁcación
y
animación
de
propiedades
CSS

• addClass()
y
removeClass()

• Estas
funciones
nos
permiten
añadir
o

eliminar
nombres
de
clase
a
un
elemento

HTML.

$("#micapa").addClass("fondo_rojo");
$("#micapa").removeClass("fondo_rojo");

Modiﬁcación
y
animación
de
propiedades
CSS

• .animate()

• Nos
permite
animar
varias
propiedades,
con
valores

numéricos,
de
CSS
en
un
solo
paso.

• Propiedades:
atributos
CSS
que
queremos
actualizar.

• Duración:
duración
de
la
animación.

• Función
de
animación:
sirve
para
indicar
como
se
realizará

la
animación.

• Callback:
función
que
se
ejecutará
una
vez
terminada
la

animación.

.animate( Propiedades, [ Duración],
[ Función de animación ], [ Callback ] )

Control
de
visibilidad

• Mediante
una
serie
de
métodos
podemos
ser

capaces
de
ocultar
y
mostrar
elementos.

• Además
jQuery
dispone
de
varios
métodos

que
nos
proporcionan
una
animación
sin

necesidad
de
usar
funciones
de
animación.

Control
de
visibilidad

• .hide()

• Este
método
oculta
los
elementos

seleccionados.

$( ".elemento" ).hide();

Control
de
visibilidad

• .show()

• Este
método
muestra
los
elementos

seleccionados.

$( ".elemento" ).show();

Control
de
visibilidad

• .toggle()

• Este
método
alterna
entre
ocultar
y
mostrar

los
elementos
seleccionados.

• Muestra
elementos
que
están
ocultos
y
oculta

elementos
que
están
visibles.

$( ".elemento" ).toggle();

Control
de
visibilidad

• .fadeIn()
y
.fadeOut()

• Estos
métodos
muestran
y
ocultan
respecIvamente
mediante
un

efecto
de
opacidad.

$( ".elemento" ).fadeIn("slow", function() {
alert( "Animación completa." );
});
$( ".elemento" ).fadeOut("fast", function() {
alert( "Animación completa." );
});

Dispositivas CURSO HTML 5.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a Dispositivas CURSO HTML 5.pdf

Similar a Dispositivas CURSO HTML 5.pdf (20)

Dispositivas CURSO HTML 5.pdf