Dreamweaver CS6

HTML5 Captulo 1
Introduccin
El HTML5 (HyperText Markup Language) es la quinta revisin del lenguaje de programacin
bsico de la World Wide Web. Esta nueva versin pretende remplazar al actual (X)HTML,
corrigiendo problemas con los que los desarrolladores web se encuentran, as como redisear el
cdigo actualizndolo a nuevas necesidades que demanda la web de hoy en da.
Muchas empresas ya estn desarrollando sus sitios webs en esta versin del lenguaje. A
diferencia de otras versiones de HTML, los cambios en HTML5 comienzan aadiendo semntica
y accesibilidad implcitas, especificando cada detalle y borrando cualquier ambigedad. Se tiene
en cuenta el dinamismo de muchos sitios webs (Facebook, twenti, etc.), donde su aspecto y
funcionalidad son ms semejantes a aplicaciones webs que a documentos.
Mejor estructura
Actualmente es abusivo el uso de elementos DIV para estructurar una web en bloques. El HTML5
nos brinda varios elementos que perfeccionan esta estructuracin estableciendo qu es cada
seccin, eliminando as <div> innecesarios. Este cambio en la semntica hace que la estructura
de la web sea ms coherente y fcil de entender por otras personas y los navegadores podrn
darle ms importancia a segn qu secciones de la web facilitndole adems la tarea a los
buscadores, as como cualquier otra aplicacin que interprete sitios web. Las webs se dividirn
en los siguientes elementos:

<! DOCTYPE html>

Doctype es el encargado de indicarle al navegador web que el documento que est abriendo es
un documento html. En esta versin el Doctype es mucho ms simplificado y compatible con
HTML y XHTML.

<header></header>
Elemento <header> representa un grupo de artculos introductorios o de navegacin.

<nav></nav>
El elemento <nav> representa una seccin de una pgina que es un link a otras pginas o a
partes dentro de la pgina: una seccin con links de navegacin. En otras palabras es la barra
de navegacin con su correspondiente botonera.
No todos los grupos de enlaces en una pgina tienen que estar en un elemento <nav>, slo las
secciones que consisten en bloques principales de la navegacin son apropiadas para ser
utilizadas con el elemento <nav>. Puede utilizarse particularmente en el pie de pgina para tener
un men con un listado de enlaces a varias pginas de un sitio, como el Copyright; home page,
poltica de uso y privacidad. No obstante, el elemento <footer> es plenamente suficiente sin
necesidad de tener un elemento <nav>.

<article></article>
El elemento <article> representa un componente de una pgina que consiste en una composicin
autnoma en un documento, pgina, aplicacin, o sitio web con la intencin de que pueda ser
reutilizado y repetido. Podra utilizarse en los artculos de los foros, una revista o el artculo de
peridico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o
gadget, o cualquier otro artculo independiente de contenido.

pg. 1
Dreamweaver CS6

Cuando los elementos de <article> son anidados, los elementos de <article> interiores
representan los artculos que en principio son relacionados con el contenido del artculo externo.
Por ejemplo, un artculo de un blog que permite comentarios de usuario, dichos comentarios se
podran representar con <article>.

<section></section>
Se utiliza para representar una seccin general dentro de un documento o aplicacin, como un
captulo de un libro. Puede contener subsecciones y si lo acompaamos de h1 h6 podemos
estructurar mejor toda la pgina creando jerarquas del contenido, algo muy favorable para
el buen posicionamiento web. Si comparamos con un blog, aqu estaran todas las entradas de
un post.

<aside></aside>
Representa una seccin de la pgina que abarca un contenido tangencialmente relacionado con
el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este
elemento puede utilizarse para efectos tipogrficos, barras laterales, elementos publicitarios,
para grupos de elementos de la navegacin, u otro contenido que se considere separado del
contenido principal de la pgina.
<footer></footer>
El elemento <footer> representa el pie de una seccin, con informacin acerca de la
pgina/seccin que poco tiene que ver con el contenido de la pgina, como el autor, el copyright
o el ao.
Es importante aclarar que las etiquetas <div></div> an pueden ser utilizadas. Siempre deben
usarse cuando necesites una caja con objetivos de diseo grfico o cualquier cosa que no tenga
significado semntico.
Ahora veamos cmo quedara estructurada una pgina con las nuevas etiquetas de HTML5 que
anteriormente hemos especificado.

pg. 2
Dreamweaver CS6

Ejemplo de una pgina con HTML5

<header>
<h1>El blog de www.virtualtec.cl</h1>
<h2>Este es el blog de VirtualTec</h2>
</header>
<nav>
Aqu va la barra de navegacin
</nav>
<section>
<article>Aqu va un post, con su ttulo en h2</article>
</section>
<aside>
Aqu va la Barra lateral con los ltimos posts, enlaces destacados, nube de etiquetas, etc.
</aside>
<footer>
Aqu va el nombre del desarrollador, Diseador, Copyright, lo que siempre va al pie de una pgina
o lo que quieras colocar.
</footer>
Mejoras en los formularios
El elemento input adquiere gran relevancia al ampliarse los elementos que se permitirn en el
type.
<input type=search> Para cajas de bsqueda.
<input type=number> Para adicionar o restar nmeros mediante botones.
<input type=range> Para seleccionar un valor entre dos valores predeterminados.
<input type=color> Seleccionar un color.
<input type=tel> Nmeros telefnicos.
<input type=url> Direcciones web.
<input type=email> Direcciones de email. Lo nuevo es que se auto valida.
<input type=date> Para seleccionar un da en un calendario.
<input type=month> Para meses.
<input type=week> Para semanas.
<input type=time> Para fechas.
<input type=datetime> Para una fecha exacta, absoluta y tiempo.
<input type=datetime-local> Para fechas locales y frecuencia.

Otros elementos muy interesantes

<audio></audio> y <video></video>
Nuevos elementos que permitirn incrustar un contenido multimedia de sonido o de vdeo,
respectivamente. Es una de las novedades ms importantes e interesantes en este HTML5, ya
que permite reproducir y controlar vdeos y audio sin necesidad de plugins como el de Flash.
El comportamiento de estos elementos multimedia ser como el de cualquier elemento nativo, y
permitir insertar en un video, enlaces o imgenes, por ejemplo. YouTube, ya ha anunciado que
deja el Flash y comienza a proyectar con HTML5.
<embed></embed>
Se emplea para contenido incrustado que necesita plugins como el Flash. Es un elemento que
ya reconocen los navegadores, pero ahora al formar parte de un estndar, no habr conflicto con
<object>.
<canvas></canvas>

pg. 3
Dreamweaver CS6

Este es un elemento que permite que se generen grficos vectoriales y de bitmaps con JavaScript
en su interior. Es importante recordar que esta etiqueta fue creada por Apple para su navegador
Safari y en un principio existieron problemas para implementarla debido a los derechos de
creacin. Finalmente las licencias fueron liberadas.
<svg></svg>
(Scalable Vector Graphics), Una etiqueta para insertar dibujos y animaciones vectoriales al estilo
de Flash; todo basado en el estndar abierto SVG derivado de XML.

HTML5 Captulo 2

Una pregunta muy comn en estos tiempos es: Cmo puedo empezar a utilizar HTML5 si
existen navegadores antiguos que no lo soportan? Pero la pregunta en s se ha formulado de
forma errnea. El HTML5 no es una cosa grande como un todo, sino una coleccin de elementos
individuales, por consiguiente lo que s se podr ser detectar si los navegadores soportan cada
elemento por separado.
Cuando los navegadores realizan un render de una pgina, construyen un Modelo de Objeto de
Documento (Document Object Model DOM), una coleccin de objetos que representan los
elementos del HTML en la pgina. Cada elemento <p>, <div>, <span> es representado en el
DOM por un objeto diferente.
Todos los objetos DOM comparten unas caractersticas comunes, aunque algunos tienen ms
que otros. En los navegadores que soportan rasgos del HTML5, algunos objetos tienen una nica
propiedad y con una simple ojeada al DOM podremos saber las caractersticas que soporta el
navegador.

pg. 4
Dreamweaver CS6

Existen cuatro tcnicas bsicas para saber cundo un navegador soporta una de estas
particulares caractersticas, desde las ms sencillas a las ms complejas:
1. Comprueba si determinadas propiedades existen en objetos genricos o globales (como
window o navigator). Ejemplo: comprobar soporte para la Geolocalizacin.
2. Crear un elemento, luego comprobar si determinadas propiedades existen en ese elemento.
Ejemplo: comprobar soporte para canvas.
3. Crear un elemento, comprobar si determinados mtodos existen en ese elemento, llamar el
mtodo y comprobar los valores que devuelve. Ejemplo: comprobar qu formatos de video
soporta.
4. Crear un elemento, asignar una propiedad a determinado valor, entonces comprobar si la
propiedad mantiene su valor. Ejemplo: comprobar qu tipo de <input> soporta.
Sin embargo, hay formas de que las etiquetas de HTML5 y atributos de CSS3 funcionen en IE.
Algunas tcnicas que usuarios avanzados de la red (hackers) han creado para que HTML5
funcione desde IE 6 hasta su versin 8:
HTML5 Enabling Script: Permite usar las etiquetas semnticas dentro de IE 6, 7 y 8 como divs
normales, estilzables por CSS. Sin este script, las etiquetas son ignoradas en IE y es imposible
agregarles Atributos de diseo a ellas o cualquier elemento dentro de ellas. Para poder utilizarlo
simplemente debes incluir esta lnea dentro del <HEAD></HEAD> de tu documento.
<! [if lt IE 9]>
<script src=http://HTML5shim.googlecode.com/svn/trunk/HTML5.js>
</script>
<! [endif] >

MODERNIZR: Esta es una biblioteca para detectar HTML5. Es una librera de JavaScript con
cdigo abierto que detecta si son compatibles muchos elementos para HTML5 y CSS3. Dicha
librera se ir actualizando y para utilizarla solo hay que incluir en <head><script> de tu pgina.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Dive Into HTML5</title>
<script src=modernizr.min.js></script>
</head>
<body>

</body>
</html>
Modernizr (http://www.modernizr.com/) se ejecuta automticamente, no es necesario llamar a
ninguna funcin tipo: modernizr_init(). Cuando se ejecuta, se crea un objeto global llamado
Modernizr, que contiene un set de propiedades Boleanas para cada elemento que detecta. Por
ejemplo si su navegador soporta elementos canvas, la propiedad de la librera Modernizr.canvas
ser true. Si tu navegador no soporta los elementos canvas, la propiedad Modernizr.canvas
ser false.

pg. 5
Dreamweaver CS6

HTML5 y la compatibilidad entre navegadores

Si tus habilidades son las de investigador te sugiero que entres al sitio
web http://www.caniuse.com/ . Aqu encontrars una lista con todas las capacidades de HTML5
y CSS3 y el nuevo JavaScript. Podrs encontrar, adems, una tabla con las
compatibilidades de todos los navegadores. Los cuadros rojos indican que no lo soportan, sin
embargo muchos de estos cuadros rojos pasan a ser de color verde con script comoHTML5
Enabling Script , el que ya hemos mencionado. Ac una imagen de caniuse.

Para entender un poco ms algunas de las etiquetas que sern utilizadas con mayor frecuencia
en HTML5 damos la siguiente informacin:
Canvas
HTML 5 define el elemento <canvas> como un rectngulo en la pgina donde se puede utilizar
Java Script para dibujar cualquier cosa. Tambin determina un grupo de funciones (canvas API)
para dibujar formas, crear gradientes y aplicar transformaciones.

Texto Canvas
Si tu navegador soporta las API de canvas no quiere decir que pueda soportar las API para texto-
canvas. Las API de canvas se han ido generando con el tiempo y las funciones de texto se han
aadido posteriormente, por lo que algunos navegadores puede que no tengan integrado las API
para texto.

pg. 6
Dreamweaver CS6

Video
El HTML5 ha definido un nuevo elemento llamado <video></video> para incrustar video en las
pginas de la web. Actualmente insertar un video en la web era imposible sin determinados
plugins como el QuickTime o el Flash. El elemento <video></video> ha sido diseado para
utilizarlo sin la necesidad de que tenga que detectar ningn script. Se pueden especificar
mltiples ficheros de video y los navegadores que soporten el video en HTML5 escogern uno
basado en el formato que soporte.

Formatos de video
Los formatos de video son como los lenguajes escritos. Un peridico en ingls contiene la misma
informacin que un peridico en espaol, aunque solo uno le ser til. Con los navegadores pasa
lo mismo, necesitan saber en qu idioma est escrito el video. Los lenguajes de los videos se
llaman codecs un algoritmo utilizado para compactar un video. Existen docenas de codecs en
uso en todo el mundo, aunque dos son los ms relevantes. Uno de estos codecs cuesta dinero
por la licencia de la patente, y funciona en safari y los iphones. El otro codec es gratis y de cdigo
abierto y funciona en navegadores como Chrome y Firefox.

Aplicaciones OFFline
Leer pgina webs offline es relativamente sencillo. Te conectas a Internet, cargas una web, te
desconectas y puedes sentarte tranquilamente a leer. Pero qu sucede cuando son
aplicaciones como Gmail o Google Docs? Gracias al HTML5 cualquiera puede crear una
aplicacin web que funcione offline. Las aplicaciones web offline se ejecutan como una aplicacin
online. La primera vez que se visita una web offline que est disponible, el servidor web le dir a
al navegador los ficheros que necesita para poder trabajar desconectado. Estos ficheros pueden
ser, HTML, JavaScript, imgenes y hasta videos. Una vez que el navegador ha descargado los
ficheros necesarios podrs volver a visitar la web aunque no ests conectado a Internet. El
navegador reconocer que ests desconectado de Internet y utilizar los ficheros que haba
descargado con anterioridad. La prxima vez que te conectes, si has realizado cambios en la
web offline, estos se subirn al servidor actualizndolo.

Geolocalizacin
La geolocalizacin es la forma de suponer donde te encuentras en el mundo y si quieres,
compartir informacin con gente de confianza. Existen muchas maneras de descubrir donde te
encuentras, por tu
direccin IP, la conexin de red inalmbrica, la torre de telefona mvil por la que habla tu telfono
mvil (celular), o GPS especficos que reciben las coordenadas de longitud y la latitud de satlites
que estn en el cielo.

HTML5 Captulo 3

pg. 7
Dreamweaver CS6

HTML5 nos trae varias novedades para nuestros formularios que podemos implementar
actualmente. Muchos navegadores empiezan a implementar algunas de sus caractersticas.
En el caso de que utilicemos estas caractersticas y el navegador no sea compatible con las
mismas, simplemente las ignorar sin causarnos mayores problemas. Incluso podremos
condicionar nuestros scripts para que funcionen solo en navegadores sin soporte para las nuevas
caractersticas de manejo de formularios, por ejemplo si tenemos un script de seleccin de fechas
podremos hacer que funcione solo en Internet Explorer pero que en Opera sea el mismo
navegador el que se encargu de mostrarnos su selector de fechas.
placeholder:
Si no disponemos de las caractersticas de los nuevos formularios HTML5, la forma comn de
hacer un placeholder sera con JavaScript jugando con los eventos de focos. Hoy en da,
podemos con este atributo agregar un texto que se ver en el input cuando este est vaco y no
tenga el autofocus.

<input type=text placeholder=Buscar en VirtualTec>

Actualmente es soportado por los navegadores Chrome y Safari. Si realmente deseas utilizarlo
para otros navegadores puedes recurrir al plugin de jQuery placeholder.

autofocus:

pg. 8
Dreamweaver CS6

Otra muy buena ventaja de los formularios en HTML5, este es otro claro ejemplo que permite el
control del autofoco sin hacer uso de JavaScript, como se hubiera hecho antes. Como su nombre
lo indica, con autofocus establecemos que un input tendr el foco. No tiene mucha ciencia,
simplemente agregamos autofocus en el elemento:
<input id=Vt type=text autofocus>

Nuevos tipos de <input>

Como vimos en el <captulo 1> dentro de la gran cantidad de novedades que nos ofrece HTML5
son los nuevos valores para el atributo type del elemento input.
Estos nuevos tipos de campos hacen que los navegadores adopten distintos comportamientos
que, sin dudas, nos van a hacer la vida ms fcil a los desarrolladores de sitios web.
As como actualmente tenemos el conocido password que oculta la contrasea con asteriscos
o crculos (dependiendo del navegador) ahora contamos con el nuevo search que presenta una
pequea cruz para poder borrar su contenido o tambin el nuevo campo numrico number que
muestra dos flechas (hacia arriba y hacia abajo) para aumentar o disminuir el valor del nmero.
Algo muy importante a tener en cuenta es que si bien estos elementos todava no son soportados
por todos los navegadores modernos, el uso de los mismos no afectar de ningn modo en los
navegadores que no los soporten, actuarn simplemente como si fuesen del tipo text.
Veamos entonces algunos ejemplos:
search
<input type=search name=busqueda>
Al ingresar texto en el campo, el navegador muestra una x a la derecha para borrar todo lo que
hemos escrito.

Si queremos habilitar la Bsqueda por voz simplemente debemos agregar en el input lo

siguiente:
x-webkit-speech, quedando de la siguiente manera: <input type=search x-webkit-speech>
Esto mostrar SOLO en Chrome algo as:

tel
<input type=tel name=telefono>
A la hora de completar un input del tipo tel un Smartphone como iPhone convierte su teclado
en nmeros de telfono.

pg. 9
Dreamweaver CS6

url
<input type=url name=url>
Al utilizarlo en un formulario el campo slo aceptar direcciones de tipo URL. Es importante
destacar que se debe escribir la URL completa (ej.: http://www.virtualtec.cl) de lo contrario saldr
un mensaje solicitando una direccin vlida. Todo esto sucede slo si el navegador soporta este
type.
En el caso de iPhone el teclado pasa a ser qwerty pero en modo url y ofrece teclas
fundamentales para escribir una direccin web como son el punto (.), barra diagonal (/) y la tecla
.com.

email
<input type=email name=correo>
Al crear un campo de tipo email el navegador validar de forma automtica la direccin
ingresada. Este ejemplo est realizado en Chrome. Fantstico Verdad?

datetime
<input type=datetime name=fechahora>
Esto slo es posible en los navegadores Opera en su ltima versin. Al hacer clic en el campo
se desplegar un calendario completo que el navegador ofrece de forma nativa.

pg. 10
Dreamweaver CS6

date
<input type=date name=fecha>
Si nos encontramos en el navegador Opera el calendario ser el mismo que el anterior.

week
<input type=week name=semana>
El calendario que nos mostrar Opera nos permitir elegir el nmero de semana del ao.
time
<input type=time name=hora>
En este caso el input est con el formato de hora con los dos puntos (:) correspondientes y sus
respectivas flechas para subir o bajar.

number
<input type=number name=numero min=0 max=12>
En este input tenemos los atributos min y max para establecer el mnimo y el mximo que
aceptar el rango. Adems aparecen flechas para subir y bajar. Este ejemplo est realizado en
el navegador Chrome.

En un Smartphone como iPhone veremos el teclado numrico.

pg. 11
Dreamweaver CS6

range
<input type=range name=rango min=0 max=69>
Este tipo de input se presenta con un control para deslizar con el mouse o con un dedo en el
caso que lo estemos visualizando en un mvil con pantalla touch o Tablet. Este input, como
number, acepta los atributos min y max.

color
<input type=color name=color>
Si ests viendo este campo con la ltima versin de Chrome u Opera te vas a sorprender, porque
el navegador presenta de forma nativa un selector de color otra funcionalidad que
comnmente tendramos que utilizar JavaScript (Safari, Firefox).

Pero algo que sorprende an ms es que al hacer clic en otros de la imagen anterior, Opera
muestra una ventana con un selector de color mucho ms avanzado como lo hace Chrome de
forma nativa:

pg. 12
Dreamweaver CS6

HTML5 Captulo 4

Los diseadores Web podemos hacer algunas cosas muy bien con HTML 4 y CSS 2.1. Podemos
estructurar nuestros documentos de manera lgica y crear sitios que ofrecen informacin sin
depender de diseos arcaicos basados en tablas. Podemos estilizar nuestras pginas web con

pg. 13
Dreamweaver CS6

la belleza y detalle sin recurrir a la lnea de etiquetas <font> y <br>. De hecho, nuestros
mtodos de diseo actuales nos han llevado mucho ms all de la poca infernal de la guerra
de los navegadores.
Por lo que hemos venido usando HTML 4 y CSS 2.1, sin embargo, podemos hacerlo
mejor. Podemos refinar la estructura de nuestros documentos y aumentar su precisin
semntica. Podemos afinar la presentacin de nuestras hojas de estilo y avanzar en su
flexibilidad estilstica. A medida que continuamos ampliando los lmites de las
lenguas existentes, HTML 5 y CSS 3 estn ganando popularidad rpidamente, dejando al
descubierto su poder colectivo con algunas posibilidades de diseo nuevo y emocionante.
Adis a la sopa de <div>, hola marcado semntico.
En el pasado, los diseadores lucharon con diseos basados en tablas semnticamente
incorrectas. Con el tiempo, gracias al pensamiento revolucionario de la talla de Jeffrey
Zeldman y Meyer Eric , diseadores inteligentes adoptaron mtodos de diseo ms correcto
semnticamente, la estructuracin de sus pginas con elementos <div> en lugar de tablas, y
el uso de hojas de estilo externas para su presentacin. Por desgracia, los diseos complejos
requieren una diferenciacin significativa de elementos estructurales subyacentes, que suele
dar lugar al sndrome de la sopa de <div>. Tal vez esto te resulta familiar:
<div id="news">
<div class="section">
<div class="article">
<div class="header">
<h1> demostracin Sopa de Div.</h1>
<p> Publicado el 05 de Abril 2012</p>
</div>
<div class="content">
<p> texto Lorem ipsum, bla, bla, bla. </p>
<p> texto Lorem ipsum, bla, bla, bla. </p>
<p> texto Lorem ipsum, bla, bla, bla. </p>
</div>
<div class"footer">
<p>Etiqueta: HMTL, cdigo, demo </p>
</div>
</div>
<div class="aside">
<div class="hader">
<h1> informacin tangencial </ h1>
</div>
<div class="content">
<p> texto Lorem ipsum, bla, bla, bla. </p>
<p> texto Lorem ipsum, bla, bla, bla. </p>
<p> texto Lorem ipsum, bla, bla, bla. </p>
</div>
<div class="footer">
<p>Etiqueta: HMTL, cdigo, demo </ p>
</div>
</div>
</div>
</div>
Aunque un poco artificial, este ejemplo sirve para ilustrar la redundancia estructural del diseo
de diseos complejos con HTML 4 (as como XHTML 1.1 y otros). Afortunadamente, HTML 5
alivia esta Sopa de<div> dndonos un nuevo conjunto de elementos

pg. 14
Dreamweaver CS6

estructurales. Estos nuevos elementos de HTML 5 sustituye el sentido <div> con definiciones
ms precisas semnticamente, y al hacerlo, dar ms naturalidad al documento con el
estilo CSS. Con HTML 5, el ejemplo se desarrolla de la siguiente manera:
<section>
<section>
<article>
<header>
<h1>Demostracin de Sopa de Div</h1>
<p>Publicado el 28 de diciembre de 2011</p>
</header>
<section>
<p>Lorem ipsum text bla, bla, bla.</p>
<p>Lorem ipsum text bla, bla, bla.</p>
<p>Lorem ipsum text bla, bla, bla.</p>
</section>
<footer>
<p>Etiqueta: HMTL, code, demo</p>
</footer>
</article>
<aside>
<header>
<h1>Informacin tangencial</h1>
</header>
<section>
<p>Lorem ipsum text bla, bla, bla.</p>
<p>Lorem ipsum text bla, bla, bla.</p>
<p>Lorem ipsum text bla, bla, bla.</p>
</section>
<footer>
<p> Etiqueta: HMTL, code, demo </p>
</footer>
</aside>
</section>
</section>
Como puedes ver, HTML 5 nos permite reemplazar nuestra multitud de <div> con elementos
estructurales semnticamente significativos. Esta especificidad semntica no slo mejora la
calidad y el significado subyacente de nuestras pginas web, sino que tambin nos permite
eliminar muchas de los atributos class y id que se requiere previamente para los objetivos
de nuestros CSS. De hecho, CSS3 permite eliminar prcticamente todos los atributos class y
id.

Adis atributos class, hola marcado limpio.

Cuando se combina con los nuevos elementos semnticos de HTML 5, CSS3 proporciona a los
diseadores web con poderes divinos en sus pginas web. Con la potencia de HTML 5, se
obtiene un control mucho ms significativo en la estructura de nuestros documentos, y con el
poder de CSS3, nuestro control sobre la presentacin de nuestros documentos tiende al infinito.
Incluso sin algunos de los selectores CSS avanzados a nuestra disposicin, la nueva variedad
de elementos especficos de HTML 5 nos permiten aplicar estilos a travs de secciones
similares, sin la necesidad de definir los atributos class y id. Al estilo de nuestro ejemplo
anterior de sopa de <div>, apuntara a la multitud de atributos a travs de la siguiente CSS:

pg. 15
 Dreamweaver CS6

#news { }
.section { }
.article { }
.header { }
.content { }
.footer {}
.aside {}
Por otro lado, al estilo de nuestro ejemplo HTML 5, pueden dirigirse a las regiones de varios
documentos directamente con este CSS:
section { }
article { }
header { }
footer { }
aside { }
Esta es una mejora, pero hay varias cuestiones que deben abordarse. Con el ejemplo de
los <div>, nos dirigimos a cada rea en particular mediante el uso de los atributos
class y id. Usando esta lgica nos permite aplicar estilos a cada regin del documento,
ya sea colectiva o individualmente. Por ejemplo, en el caso de las
divisiones <div>.section y .content son fciles de distinguir, sin embargo, en
el caso HTML 5, el elemento <section> se utiliza para estas dos reas y otros. Esto se
resuelve fcilmente mediante la adicin de los selectores de atributos especficos de los
distintos elementos <section>.

Orientacin a los elementos HTML5 sin class o id

Para completar el artculo, vamos a ver algunos ejemplos prcticos de la orientacin de
los elementosHTML5 sin class o id. Hay tres tipos de selectores CSS que nos permitir dirigir
y diferenciar los elementos de nuestro ejemplo. Son los siguientes:
1. El descendiente de seleccin [CSS 2.1]: EF
2. El selector adyacente [CSS 2.1]: E + F
3. 3. El selector hijo [CSS 2.1]: E> F
Vamos a echar un vistazo a cmo estos selectores nos permiten apuntar a cada una de las
secciones de nuestro documento sin necesidad de class o id.

Dirigirse al elemento <section> ms externo

Debido a lo incompleto de nuestro ejemplo, vamos a suponer que los elementos <section>
ultraperifricos se encuentran junto a un elemento <nav> que a su vez es un descendiente
directo de un elemento <body>. En este caso, pueden dirigirse a las regiones
<section> ultraperifricas de la siguiente manera: body nav+section {}

Dirigirse al prximo elemento <sectioin>

Como el nico descendiente directo del exterior <section>, los prximos
elementos <section> pueden ser especficamente con el siguiente
selector: section>section {}

Dirigirse al elemento <article>

Hay varias maneras de dirigirse al elemento <article> en concreto, pero lo ms fcil es usar
un selector de descendiente simple: section article {}

pg. 16
Dreamweaver CS6

Dirigirse a los elementos <header>, < section> y <footer>

En nuestro ejemplo, cada uno de estos tres elementos existen en dos ubicaciones: una vez
dentro del elemento <article> y una vez dentro del elemento <aside>. Esta distincin hace
que sea muy fcil dirigirse a cada elemento individual:
article header {}
article section {}
article footer {}
O colectivamente:
section section header {}
section section section {}
section section footer {}

Nota para los usuarios de WordPress

Si eres desarrollador de sitios web puedes comenzar a usar HTML5 ahora mismo. Para ver un
ejemplo en vivo de un tema WordPress creado ntegramente en HTML5 visita http://digwp.com/ .
Si buscas plantillas de WordPress realizadas en HTML5+CSS3 puedes
visitar http://wpmu.org/top-25-free-html5-and-css3-themes-for-wordpress/. Ah encontrars 25
plantillas para tu disposicin.

HTML5 Captulo 5

pg. 17
Dreamweaver CS6

{CSS3}
{Selectores}
En primer lugar los conceptos bsicos. Un selector CSS se compone de un patrn que se
compara con todos los elementos en la estructura del documento. Cuando todas las condiciones
en el patrn son verdaderas, las declaraciones dentro de la regla se aplican al elemento o
elementos que coinciden. Tenga en cuenta esta regla CSS muy sencilla y la hemos utilizado
siempre:
p {color: #F00;}
Ahora veamos los nuevos selectores en CSS3.
Elemento [atributo^=valor]
Equivale a la seleccin de todos los Elementos con ese atributo y cuyo valor se inicia con
la cadena de texto indicado en valor. Veamos un ejemplo. La siguiente regla establece color
de fondo a todos los elementos div cuyo id comienza con noticia: div [id^= noticia]
{background: #ff5}

Elemento [atributo$=valor]
Equivale a la seleccin de todos los Elementos con ese atributo y cuyo valor termina con
la cadena de texto indicado en valor. Para hacer referencia al elemento div cuya id termina
con primaria, se puede utilizar la siguiente regla: div [id$= primaria] {background: #ff5}

Elemento [atributo*=valor]
Equivale a la seleccin de todos los Elementos con ese atributo y cuyo valor contiene la
cadena de texto indicado en valor. La siguiente regla se aplicar a todos los elementos div
cuya id contiene la subcadena contenido: div [id*= contenido] {background: #ff5}

{Pseudo-clases}
Elemento: root
Coincide con el elemento del documento raz. En HTML5, el elemento raz ser siempre el
elemento HTML5 .

Elemento: nth-child(N)
Selecciona los elementos en base a sus posiciones en una lista de elementos hijos dentro de un
elemento padre. N es el nmero de la posicin.
Esta pseudo-clase selecciona elementos sobre la base de sus posiciones dentro de la lista un
elemento principal de los elementos secundarios. Esta pseudo-clase acepta un argumento, N,
que puede ser una palabra clave, un nmero o una expresin numrica de la forma de an + b .
Si N es un nmero o una expresin numrica, :nth-child( N ) selecciona los elementos que estn
precedidas por N -1 hermano en la estructura del documento.

El siguiente ejemplo los selectores son equivalentes, y selecciona los nmeros impares de las
filas de la tabla:
tr: nth-child (2n +1) {
declaraciones
}
tr: nth-child (odd) {
declaraciones
}
Elemento: nth-last-child(N)

pg. 18
Dreamweaver CS6

Equivale a la seleccin de todos los elementos en base a sus posiciones en una lista de
elementos hijos dentro de un elemento padre. N sera el nmero de la posicin. Esta pseudo-
clase acepta un argumento, N , que puede ser una palabra clave, un nmero o una expresin
numrica de la forma de an + b.
Si N es un nmero o una expresin numrica, :nth-last-child (N ) selecciona los elementos que
tienen un hermano N -1 delante de ellos en la estructura del documento.
{Ejemplo 1}
El selector selecciona los ltimos cuatro elementos de la lista en cualquier lista, ya sea ordenada
o desordenada:
li: nth-last-child (n-4) {
declaraciones
}
{Ejemplo 2}
El selector selecciona cualquier prrafo que es el elemento ltimo hijo de su elemento padre:
p: nth-last-child (1) {
declaraciones
}
Elemento: nth-of-type(N)
Selecciona los elementos en base a sus posiciones en una lista de un elemento principal de los
elementos secundarios del mismo tipo. Esta pseudo-clase selecciona elementos en base a sus
posiciones dentro de la lista de un elemento principal de los elementos secundarios del mismo
tipo. Esta pseudo-clase acepta un argumento, N , que puede ser una palabra clave, un nmero
o una expresin numrica de la forma de an+b .
Si N es un nmero o una expresin numrica, :nth-of-type( N) selecciona los elementos que
estn precedidas por un hermano N -1 con el mismo nombre de elemento en la estructura del
documento.
{Ejemplo 1}
El selector siguiente selecciona el segundo, quinto, octavo prrafo de un elemento div, y as
sucesivamente, haciendo caso omiso a los hijos que no son los prrafos:
<div> p: nth-of-type (3n-1) {
declaraciones
}
{Ejemplo 2}
Los selectores permitir la aplicacin de diferentes estilos CSS para los elementos de imagen
impares y pares, que son hijos del elemento cuyo id coincide con el valor de atributo galera:
# galeria> img: nth-of-type (odd) {
declaraciones
}
# galeria> img: nth-of-type (even) {
declaraciones
}

Elemento: nth-last-of-type(N)
Selecciona los elementos sobre la base de sus posiciones dentro de la lista un elemento principal
de los elementos secundarios del mismo tipo. Esta pseudo-clase acepta un argumento N que
puede ser una palabra clave, un nmero o una expresin numrica de la forma an+b.

pg. 19
Dreamweaver CS6

Si N es un nmero o una expresin numrica, :nth-last-of-type(N) selecciona los elementos que

tienen un hermano N-1 delante de ellos con el mismo nombre de elemento en la estructura del
documento.
{Ejemplo 1}
El selector selecciona los tres ltimos elementos de la imagen de que son hijos del elemento
cuyo id coincide con el valor del atributo galera:
#galeria> img:nth-last-of-type(-n+3)
{
declaraciones
}

{Ejemplo 2}
El selector selecciona el penltimo trmino en la lista de definiciones:
dt:nth-last-of-type(2) {
declaraciones
}
{Entendiendo las expresiones de la Pseudo-clase :nth-
child}
El argumento, N, puede ser una palabra clave, un nmero o una expresin numrica de la
formaan + b. Estas pseudo-clases aceptan las palabras extraas, para la seleccin de los
elementos de nmero impar, y an, para la seleccin de los elementos de nmero par.
Si el argumento N es un nmero, que representa la posicin ordinal del elemento
seleccionado. Por ejemplo, si el argumento es 5, el quinto elemento se seleccionar.
El argumento N tambin se puede administrar como an + b, donde a y b son nmeros enteros
(por ejemplo, 3n +1).
En esta expresin, el nmero b representa la posicin ordinal del primer elemento que desea
buscar, y el nmero a representa el nmero ordinal de todos los elementos que desea hacer
coincidir despus de eso. As que nuestro ejemplo la expresin 3n +1 coincidir con el primer
elemento, y cada tercer elemento despus de eso: la de primero, cuarto, sptimo, dcimo, y
as. La expresin 4n 6 coincidir con el sexto elemento y cada elemento de cuarto despus de
que: el sexto, dcimo, dcimo cuarto, y as sucesivamente. La palabra clave y valor raro es
equivalente a la expresin 2n +1.
Si a y b son iguales, o si b es igual a cero, b se puede omitir. Por ejemplo, las
expresiones 3n+3 y 0+3n son equivalentes a 3n se refieren a todos los elementos de
terceros. La palabra clave y valor incluso es equivalente a la expresin 2n.
Si a es igual a 1, se puede omitir. As, por ejemplo, 1n+3 se puede escribir como n+3. Si a es
igual a cero, lo que indica un patrn no se repite, slo el elemento b tiene la obligacin de indicar
la posicin ordinal del elemento que desea hacer coincidir. Por ejemplo, la expresin 0n+5 es
equivalente a 5 , y como vimos ms arriba, que va a coincidir con el quinto elemento.
Tanto a y b puede ser negativo, pero los elementos slo se comparar si N tiene un valor
positivo. Si b es negativo, reemplazar el signo + con un signo - .
Si tu cabeza est girando por ahora, no te preocupes, no ests solo, pero espero que la Tabla te
ayude a poner las cosas en perspectiva. La expresin representa un nmero fijo lineal que se
utiliza para que coincida con los elementos. Por lo tanto, la primera columna de la tabla
representa los valores de N , y las otras columnas muestran los resultados (de N ) de
expresiones de ejemplo diferentes. La expresin selecciona si el resultado es positivo y existe
un elemento en esa posicin dentro de la estructura del documento.

pg. 20
Dreamweaver CS6

As la expresin 4n+1 selecciona el primero, quinto, noveno, dcimo tercero, dcimo sptimo,
vigsimo primero, as sucesivamente, si es que existen los elementos, mientras que la expresin
n+3 selecciona los elementos tercero, segundo y primero solamente.
La diferencia, entonces, entre las pseudo clases nth- y nth-last- es que la pseudo clase nth-
cuenta desde la parte superior del rbol del documento hacia abajo que seleccionan los
elementos que tienen un hermano N-1 delante de ellos, mientras que la pseudo-clase nth-last-
cuenta de abajo hacia arriba que seleccionan los elementos que tienen un hermano N-1 despus
de ellos.

HTML5 Captulo 6

En el captulo anterior de este manual vimos todo lo referente a los selectores en HTML5 y CSS3

@Font-face
@ Font-face es una regla CSS que te permite subir una fuente particular a tu servidor
para incorporar al diseo de una pgina web. Esto significa que los diseadores web ya no

pg. 21
 Dreamweaver CS6

tienen que ajustarse a un conjunto particular de fuentes web segura que el usuario haya pre-
instalado en su equipo.
Cmo lo hago?
1. Crea una regla font-face, dando un nombre cualquiera a esta fuente:
font-family: miPrimeraFuente;
2. Incluye el archivo de la fuente en algn lugar del servidor y haz referencia de la ruta donde se
encuentra:
src: url (http://www.virtualtec.cl/fuentes/Hug_Bear.ttf);
3. Si el archivo de la fuente se encuentra en un dominio diferente, utiliza la direccin URL
completa en su lugar:
scr: (http://www.institutoeinstein.cl/css3/Hug_Bear.ttf);
Ahora la fuente est lista para usar, incorporndola en el diseo de cualquier pgina web que
realices. A continuacin un ejemplo de cmo usarlo para todos los elementos div:
div {
font-family: MiPrimeraFuente;
}

Sintaxis
@font-face {
Propiedades de fuente
}
Tabla de propiedades para fuente
Descriptor fuente Valor Descripcin

Font-family Nombre Obligado. Define el nombre de la fuente.

scr url Obligado. Define la URL donde se encuentra la

fuente para ser utilizada.

font-stretch normalcondensedultra- Opcional. Define cmo la fuente debe ser estirada.

condensedextra- El valor por defecto es normal.
condensedsemi-
condensedexpandedsemi-
expandedextra-
expandedultra-expanded

font-style normalItalicoblique Opcional. Define cmo la fuente debe ser

estilizada. El valor por defecto es normal

font-weight normalbold100 hasta Opcional. Define el peso de la fuente. El valor por

900 defecto es normal

Ejemplo
@font-face {
font-family: miPrimeraFuente;
src: url (http://www.virtualtec.tk/fuentes/Hug_Bear.ttf);
}
#titulo {
font-family: miPrimeraFuente;
}

pg. 22
Dreamweaver CS6

Creando columnas con CSS3

CSS3 nos trae la nueva propiedad denominada columns. Con ella podremos crear una
estructura de texto definiendo la cantidad de columnas y el ancho de ellas respectivamente. Esta
regla de estilo es soportada por los navegadores Chrome, Safari, Firefox y Opera. Por esta razn
es que los ejemplos se realizarn para dicha compatibilidad ocupando los prefijos moz- y
webkit- respectivamente:

body {
-moz-column-width: 200px;
-webkit-column-width: 200px;
}

En este ejemplo el elemento body se establece que el ancho de las columnas ser de 200
pixeles. El nmero exacto de columnas depender del espacio disponible.

El nmero de columnas tambin se pueden configurar de forma explcita en la hoja de estilo:

body {
-moz-column-count:2;
-webkit-column-count:2;
}
En este caso, el nmero de columnas es fijo (2) y el ancho de las columnas puede variar en
funcin de la anchura disponible.

La propiedad columns puede ser utilizada para una o ambas propiedades (ancho y nmero de
columnas):
body {-webkit-columns: 2;}
body { -webkit-columns:300px;}
body { -webki-columns:2 300px;}

En estos tres ejemplos, el nmero de columnas, el ancho de las columnas y el nmero y ancho
de las columnas se establecen respectivamente.
Otro grupo de propiedades introducidas en este mdulo son las que se refieren a los espacios y
lneas de relleno entre las columnas:
column-gap: establece la separacin entre dos columnas adyacentes. (similar a padding)
column-rule: establece una lnea de relleno entre dos columnas adyacentes.

pg. 23
Dreamweaver CS6

Veamos algunos ejemplos para comprender de mejor forma:

article {
-webkit-column-count: 3;
-webkit-column-gap: 15px;
-webkit-column-rule: 2px solid red;
}
En este ejemplo la primera declaracin establece la cantidad de columnas (3). La segunda
declaracin (column-gap) establece el espacio entre dos columnas adyacentes de 15 pixeles. En
medio de este espacio habr una lnea de 2 pixeles, slida y de color rojo. Para utilizar una linea
delgada puedes usar la palabra thin (delgada) para definir el grosor de la lnea en lugar de
establecerlo en pixeles. Adems se ha fijado el color por medio de su nombre en reemplazo de
su valor hexadecimal.

rgba en CSS3
Y para finalizar este captulo estimados lectores veremos cmo incorporar rgba en CSS3.
Como sabrs normalmente los colores en CSS los hemos expresados en RGB y en sus valores
hexadecimal. Ahora CSS3 nos incorpora ms elementos a esta regla. Por un lado a los valores
RGB nos aade el canal alfa, quedando, de esta manera, los valores ahora como rgba. El canal
alfa (alpha) nos viene a dar el grado de transparencia u opacidad a los colores, siendo para a el
valor cero (0) como la transparencia absoluta y uno (1) como la opacidad absoluta o en otras
palabras como su mxima visibilidad. En CSS2.1 y anterior la transparencia la logrbamos con
la regla opacity. Los valores que debemos representar en la regla rgba ser numrico y desde
el rango que va desde 0 a 255 para cada color (rgb).
Cada uno de los tres colores mezclados se representa de manera numrica en funcin de su
intensidad de 0% a 100%. El porcentaje se indica con un nmero entre 0 y N donde 0 significa
0% de intensidad y N 100% de intensidad.
El valor N depender de cuntos bits utilicemos pero para programacin y diseo web se utiliza
el modo 24 bit donde N ser 255 que a su vez representa el 100% de intensidad. De esta manera
el color amarillo sera:
Rojo: 255 verde: 255 azul: 0
Cuando definimos un texto en HTML utilizamos en CSS un color RGB de 24 bits (de 0 a 255) en
modo hexadecimal, de manera que el porcentaje de intensidad de un color ser un nmero entre
00 y FF (255). Con CSS3 no tendra sentido utilizar los valores hexadecimales. Un ejemplo de
cmo utilizaramos la nueva regla rgba:
body {
background-color: rgba(77,65,30,0.7)
}
HTML5 captulo 7

pg. 24
Dreamweaver CS6

En el captulo 6 de este manual comenzamos a aplicar reglas CSS3. En esta oportunidad

continuaremos. Seguramente muchas ya las habrn aplicado en sus proyectos web pero
sabemos que este manual es consultado tambin por personas que estn introducindose al
mundo del desarrollo y queremos que aqu encuentren todo desde cero.
Esquinas redondeadas con CSS3
No vamos entrar en detalle de cmo se creaban esquinas redondeadas ya que eso de utilizar
una imagen png en una esquina hace bastante tiempo que se ha dejado de utilizar. Para darle
bordes redondeados cada una de las cuatro esquinas tenemos las siguientes reglas CSS3:
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
El resultado es el siguiente:

Sin embargo podemos obtener el mismo resultado usando la forma abreviada de la regla CSS3:
border-radius: 5px;

Para realizar una figura con radios de diferentes valores la sintaxis es la siguiente:
border-top-left-radius: 15px;
border-top-right-radius: 0px;

pg. 25
Dreamweaver CS6

border-bottom-right-radius: 30px;
border-bottom-left-radius: 50px;

Sin embargo podemos obtener el mismo resultado usando la forma abreviada de la regla CSS3:
border-radius: 15px; opx; 30px; 50px;

Como habrs visto todos estos ejemplos tienen colores diferentes. border-radius no tiene
sentido si no lo complementamos con otras reglas de estilo. Veamos entonces un ejemplo
prctico.
Lo primero que haremos ser definir un rea donde podamos aplicar los bordes redondeados.
Utilizamos la etiqueta <nav></nav> con un identificador:
<nav id=menu> Aqu la lista del men</nav>
Aplicamos las reglas de estilo que le darn ancho, color, bordes redondeados:
#menu {
width: 500px;
margin-left: auto;
margin-right: auto;
background-color: rgba(153,204,0,1);
border-radius: 5px;
color: rgba(255,255,255,1);
font-size: 40px;
text-align: center;
-webkit-box-shadow: 1px 2px 3px 2px rgba (102,102,102,1);
}
El resultado es el siguiente:

Crear sombras en CSS3

En el ejemplo anterior te habrs dado cuenta que se ha creado una sombra detrs de la caja.
Bueno este efecto lo podremos aplicar de forma muy fcil, solo incluyendo la regla box-
shadow. La sintaxis es la siguiente:
box-shadow: desplazamientoX desplazamientoY desenfoque extensin color;
Si deseas que aparezca en todos los navegadores el prefijo es el que sigue:
-webkit- : Chrome y Safari
-moz- : Firefox
-o- : Opera
-ms- : Internet Explorer 9
El ejemplo anterior quedara de la siguiente manera para poder ver el efecto en todos los
navegadores:

pg. 26
Dreamweaver CS6

#menu {
width: 500px;
margin-left: auto;
margin-right: auto;
background-color: rgba(153,204,0,1);
border-radius: 5px;
color: rgba(255,255,255,1);
font-size: 40px;
text-align: center;
-webkit-box-shadow: 1px 2px 3px 2px rgba (102,102,102,1);
-moz-box-shadow: 1px 2px 3px 2px rgba (102,102,102,1);
-o-box-shadow: 1px 2px 3px 2px rgba (102,102,102,1);
-ms-box-shadow: 1px 2px 3px 2px rgba (102,102,102,1);
}

Ejemplo A
Muestra un desplazamiento X hacia la izquierda y un desplazamiento Y hacia arriba de 5px
#A {
-moz-box-shadow: -5px -5px rgba(102,102,102,1);
-webkit-box-shadow: -5px -5px rgba(102,102,102,1);
box-shadow: -5px -5px rgba(102,102,102,1);
}

Ejemplo B
Muestra la misma sombra pero ahora con un desenfoque de 5px
#B {
-moz-box-shadow: -5px -5px 5px rgba(102,102,102,1);
-webkit-box-shadow: -5px -5px 5px rgba(102,102,102,1);
box-shadow: -5px -5px 5px rgba(102,102,102,1);
}

Ejemplo C
Muestra la misma sombra pero con una distancia de extensin de 5px
#C {
-moz-box-shadow: -5px -5px 0 5px rgba(102,102,102,1);
-webkit-box-shadow: -5px -5px 0 5px rgba(102,102,102,1);
box-shadow: -5px -5px 0 5px rgba(102,102,102,1);
}

pg. 27
Dreamweaver CS6

Ejemplo D
Muestra la misma sombra pero con una distancia de desenfoque de 5px y de extensin de 5px

#D {
-moz-box-shadow: -5px -5px 5px 5px rgba(102,102,102,1);
-webkit-box-shadow: -5px -5px 5px 5px rgba(102,102,102,1);
box-shadow: -5px -5px 5px 5px rgba(102,102,102,1);
}

Ejemplo E
Muestra una sombra sin desplazamiento y un desenfoque de 5px
#E {
-moz-box-shadow: 0 0 5px rgba(102,102,102,1);
-webkit-box-shadow: 0 0 5px rgba(102,102,102,1);
box-shadow: 0 0 5px rgba(102,102,102,1);
}

Ejemplo F
Muestra una sombra sin desplazamiento pero un desenfoque y una extensin de 5px
#F {
-moz-box-shadow: 0 0 5px 5px rgba(102,102,102,1);
-webkit-box-shadow: 0 0 5px 5px rgba(102,102,102,1);
box-shadow: 0 0 5px 5px rgba(102,102,102,1);
}
Creando sombra interior con la palabra clave inset
Utilizando los mismos ejemplos anteriores y solamente agregando la palabra clave inset antes
de definir los valores de desplazamiento, desenfoque, extensin y color crearemos una sombra
en el interior del elemento. Un interno box-shadow proyecta una sombra. La sombra interior se
dibuja dentro de los lmites del relleno. Veamos unos ejemplos:

Ejemplo G
Muestra una sombra interior, desplazamiento X a la izquierda desplazamiento Y hacia arriba de
5px
#G {
-moz-box-shadow: inset -5px -5px rgba(204,51,0,1);
-webkit-box-shadow: inset -5px -5px rgba(204,51,0,1);
box-shadow: inset -5px -5px rgba(204,51,0,1);
}

Ejemplo H
Muestra una sombra interior con un desenfoque de 5px

pg. 28
Dreamweaver CS6

#H {
-moz-box-shadow: inset -5px -5px 5px rgba(204,51,0,1);
-webkit-box-shadow: inset -5px -5px 5px rgba(204,51,0,1);
box-shadow: inset -5px -5px 5px rgba(204,51,0,1);
}

Ejemplo I
Muestra sombra interior con una de extensin de 5px
#I {
-moz-box-shadow: inset -5px -5px 0 5px rgba(204,51,0,1);
-webkit-box-shadow: inset -5px -5px 0 5px rgba(204,51,0,1);
box-shadow: inset -5px -5px 0 5px rgba(204,51,0,1);
}

Ejemplo J
Muestra una sombra interior con una distancia de desenfoque de 5px y de extensin de 5px
#J {
-moz-box-shadow: inset -5px -5px 5px 5px rgba(204,51,0,1);
-webkit-box-shadow: inset -5px -5px 5px 5px rgba(204,51,0,1);
box-shadow: inset -5px -5px 5px 5px rgba(204,51,0,1);
}

Ejemplo K
Muestra una sombra interior sin desplazamiento y un desenfoque de 5px
#K {
-moz-box-shadow: inset 0 0 5px rgba(204,51,0,1);
-webkit-box-shadow: inset 0 0 5px rgba(204,51,0,1);
box-shadow: inset 0 0 5px rgba(204,51,0,1);
}

Ejemplo L
Muestra una sombra interior sin desplazamiento pero un desenfoque y una extensin de 5px
#L {
-moz-box-shadow: inset 0 0 5px 5px rgba(204,51,0,1);
-webkit-box-shadow: inset 0 0 5px 5px rgba(204,51,0,1);
box-shadow: inset 0 0 5px 5px rgba(204,51,0,1);
}

HTML5 captulo 8

pg. 29
Dreamweaver CS6

Animaciones en CSS3
Bueno, ahora pasemos a la accin. Las animaciones con CSS3 son bastantes sencillas; cuando
te acostumbras a escribir cdigo te resultar muy fcil. Lo tedioso es repetir el mismo cdigo 4
veces para que nuestra animacin pueda ser vista en los diferentes navegadores:
webkit- : Chrome y Safari
-moz- : Firefox
-o- : Opera
-ms- : Inter Explorer
Para los siguientes ejemplos solo utilizar webkit- aunque hoy en da muchas de estas reglas
ya pueden usarse sin el prefijo para cada navegador; ustedes pueden agregar los dems y
probar.
transition
Con esta regla CSS3 se pueden crear cualquier tipo de animaciones como girar, aumentar el
tamao, color de sombra, cambiar el color de fondo, color de letra, etc. La sintaxis es la siguiente:
transition-property:[Propiedad CSS];
transition-duration:[Duracin];
transition-timing-function:[Funcin de Tiempo];
transition-delay:[Retardo];

La forma abreviada sera de la siguiente manera:

transition:[Propiedad CSS][Duracin][Funcin de Tiempo][Retardo]

pg. 30
Dreamweaver CS6

Detallemos ahora las opciones que nos da la regla transition:

Propiedad CSS (property)
Aqu ser colocada la propiedad CSS que ser animada. Puede ser cualquiera de las siguientes:

Para seleccionar una o varias propiedades CSS a animar podemos usar el comodn all. De
esta forma no ser necesario detallar cada una de las propiedades.

Duracin (duration)
Aqu colocaremos el tiempo que durar nuestra animacin. Se representa en segundos y puedes
colorcar el tiempo que desees: .1s - .5s - 1s - 5s - 10s - etc.

Funcin de tiempo (timing-function)

Funciones que estn predefinidas y que permiten que avance ms rpido al inicio de la animacin
y ms lento al final, al revs o que dure ms tiempo en el medio de la animacin. Las funciones
son las siguientes:
linear : La animacin se realiza de manera uniforme.
ease : La animacin se acelera al principio, se retarda en medio y se acelera nuevamente
al final.
ease-in : La animacin se retarda al inicio y se repone al final.
ease-out : La animacin se celera al inicio y se retarda al final.
ease-in-out: La animacin se retarda al inicio, se acelera en medio y se retarda al final.

Retardo (delay)
Corresponde al tiempo que tardar la animacin en iniciar. Se representa en segundos y puede
ser los valores que estimes conveniente pero siempre pensar en el usuario:
.1s - .5s - 1s - 5s - 10s - etc.

Como ejemplo vamos a crear una capa que al posicionar el mouse sobre aumentar su ancho
de 300px a 600px, su color de fondo cambiar de gris a verde y su fuente de negro a blanco:
Dentro de <body></body>
<div id=muestra>Posiciona el mouse sobre mi</div>
Luego creamos una regla CSS para esta capa:
#muestra {
width:300px;
Font-size:20px;
margin:30px;
padding:5px;

pg. 31
Dreamweaver CS6

text-align: center;
background-color:rgba(204,204,204,1);
-webkit-border-radius:10px;
-webkit-box-shadow:3px 3px 5px rgba(51,51,51,1);
-webkit-transition: all .3s linear;
}
Al final agregamos la regla transition. En palabras simples le decimos que todas las
propiedades CSS (all) sern animadas. Dicha animacin durar 0.3 segundos y la animacin
ser lineal. Aunque solo cambiaremos su ancho (width) y color de fondo (backgroud-color)
optamos por escribir el comodn all.
A continuacin creamos una regla a las propiedades a modificar cuando el mouse sea
posicionado sobre la capa.
#muestra: hover {
width:600px;
background-color: rgba(0,153,102,1);
color: rgba(255,255,255,1);
}
El resultado es el siguiente:

Pero veamos qu otras reglas pueden acompaarse con transition:

transform
Aclaremos que esta regla no es propia de una animacin, es una regla que puede ser aplicada
por si sola. La utilizamos con transition para crear una animacin en los cambios de sus
propiedades puesto que el efecto es, como su nombre lo indica, una transicin. Aclarado esto
entonces veamos las propiedades que pueden ser utilizadas con transform.
rotate: Gira el <div> en una cierta cantidad de grados determinados por el usuario; su valor
puede ser negativo o positivo.
Sintaxis
transform: rotate(Ndeg);
Para girar el <div> Horizontal la sintaxis es:
transform: rotateX(Ndeg);
Para girar el <div> vertical la sintaxis es:
transform: rotateY(Ndeg);

Dentro de <body></body> creamos un <div> con un id e insertamos una imagen:

<div id=hp>
Curso para vendedores de productos HP
<img src=LogoHP.png>
</div

pg. 32
Dreamweaver CS6

Creamos la regla CSS para hp y aplicamos propiedades:

#hp{
width: 330px;
font-size:20px;
margin: 30px;
padding: 5px;
-webkit-border-radius: 10px;
background-color: rgba(204,204,204,1);
-webkit-transition: all .3s linear;
}
Como puedes ver agregamos la regla transition para crear la animacin:
La forma en que vamos a animar este <div> ser que cuando el usuario pase el mouse sobre
ste girar 5 grados hacia la derecha. Entonces debemos aplicar los cambios en el hover:
#hp:hover {
-webkit-transform:rotate(5deg);
}
El resultado ser el siguiente:

skew: distorsiona (sesgar) el <div> en una cierta cantidad de grados determinados por el usuario;
su valor puede ser negativo o positivo.
Sintaxis
transform: skew(Ndeg);
Utilizaremos el mismo ejemplo anterior y solo modificaremos el hover para crear la animacin.

#hp:hover {
-webkit-transform: skew(12deg);
}
El resultado es el siguiente:

pg. 33
Dreamweaver CS6

scale: Aumenta o reduce el tamao del <div> horizontal (X) y vertical (Y) en proporcin de su
tamao original. Sus valores son numricos y representa las veces que ser escalado el objeto.
El valor 1 es la escala que el objeto <div> tiene en su estado original, por lo que al ingresar este
valor no se producir ningn efecto de escala.
Sintaxis
transform: scale(X, Y);
En la propiedad scale se puede especificar el valor X e Y pero si deseamos realizar una escala
uniforme entonces bastar con insertar solo un valor:
transform: scale(N);
Para aplicar propiedad de scale solo horizontal entonces la sintaxis ser:
transform: scaleX(N);
De la misma manera para aplicar propiedad de scale solo vertical entonces la sintaxis ser:
transform: scaleY(N);

EJEMPLO 1
En este ejemplo el <div> aumenta su tamao 1.3 veces del original.
#hp:hover {
-webkit-transform: scale(1.3);
}
EJEMPLO 2
En este ejemplo el <div> disminuye su tamao 0.5 veces del original.
#hp:hover {
-webkit-transform: scale(0.5);
}
EJEMPLO 3
En este ejemplo el <div> aumenta su tamao 1.2 veces Horizontal (X) y disminuye 0.7 veces
vertical (Y) del original.
#hp:hover {
-webkit-transform: scale(1.2, 0.7);
}
EJEMPLO 4
En este ejemplo el <div> aumenta su tamao 1.2 veces SOLO Horizontal (X).

pg. 34
Dreamweaver CS6

#hp:hover {
-webkit-transform: scaleX(1.2);
}
EJEMPLO 5
En este ejemplo el <div> aumenta su tamao 1.5 veces SOLO vertical (Y).
#hp:hover {
-webkit-transform: scaleY(1.5);
}

translate: Desplaza el <div> horizontal (X) y vertical (Y). Sus valores son representados en
pixeles. El valor cero (0px) no indica movimiento, mantenindose en su posicin original. Los
valores negativos en Xrepresentan un desplazamiento hacia la izquierda. Los
valores negativos en Y indican desplazamientos hacia arriba.

Sintaxis
transform: translate(Xpx, Ypx);
Para desplazar un objeto solo horizontal entonces la sintaxis ser:
transform: translateX(N);
De la misma manera para desplazar un objeto solo vertical entonces la sintaxis ser:
transform: translateY(N);

EJEMPLO 1
En este ejemplo el <div> se desplaza 20 pixeles hacia la derecha (X) y 50 pixeles hacia abajo
(Y).
#hp: hover {
-webkit-transform: translate(20px, 50px);
}
EJEMPLO 2
En este ejemplo el <div> se desplaza 20 pixeles hacia la izquierda (X) y 50 pixeles hacia arriba
(Y).
#hp: hover {
-webkit-transform: translate(-20px, -50px);
}
EJEMPLO 3
En este ejemplo el <div> se desplaza 20 pixeles SOLO hacia la izquierda (X).
#hp: hover {

pg. 35
Dreamweaver CS6

-webkit-transform: translateX(-20px);
}
EJEMPLO 4
En este ejemplo el <div> se desplaza 50 pixeles SOLO hacia arriba (Y).
#hp: hover {
-webkit-transform: translateY(-50px);
}

pg. 36