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


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>
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
esilo de Flash; todo basado en el estndar abierto SVG derivado de XML.
</Captulo 1>

En el CAPTULO 2 veremos HTML5 y los navegadores antiguos y mucho ms. Hasta la
prxima entrega.










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


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
como HTML5 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.

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.

</Captulo 2>

Recuerda repasar el CAPTULO 1 de este manual
En el CAPTULO 3 veremos HTML5 y las novedades en formularios. Hasta la prxima
entrega !!











______________________________________-
HTML5 Captulo 3

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

autofocus:
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 passwordque 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 navegadoresque 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.


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.


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.


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:


</Captulo 3>
Este ha sido un captulo muy interesante y detallado. Espero que repases el Captulo
1 y el Captulo 2.
El Captulo 4 veremos HTML5 con CSS3. Hasta la prxima entrega amigos.







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 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 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:
#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 elementos HTML5 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 section article {}

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.
</Captulo 4>

Hasta aqu el captulo 4 de este Manual de HTML5 y CSS3.
Recuerden repasar

HTML5 Captulo 5

{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)

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.
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
forma an + 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.

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.
</Captulo 5>

Este ha sido un captulo muy tcnico que naturalmente requiere un estudio y prctica
profundo y sistemtica. Realizar ejercicios constantes es excelente para poder dominar lo
aprendido.
En el Captulo 6 aplicaremos reglas CSS3. Todo esto de forma muy detallada como es
frecuente en este Manual de HTML5 y CSS3. Recuerda repasar los captulos anteriores de
este Manual.
Hasta la prxima entrega !!

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
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-condensedextra-
condensedsemi-condensedexpandedsemi-
expandedextra-expandedultra-expanded
Opcional. Define cmo la fuente debe ser estirada. El valor por defecto es normal.
font-style normalItalicoblique Opcional. Define cmo la fuente debe ser estilizada. El valor por defecto es normal
font-weight normalbold100 hasta 900 Opcional. Define el peso de la fuente. El valor por defecto es normal
Ejemplo
@font-face { font-family: miPrimeraFuente; src: url
(http://www.virtualtec.tk/fuentes/Hug_Bear.ttf); } #titulo { font-family:
miPrimeraFuente; }
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. 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 reglargba:
body {
background-color: rgba(77,65,30,0.7)
}
</Captulo 6>
En el captulo 7 veremos de forma muy detallada Esquinas redondeadas y Crear
Sombras todo esto con muchos ejemplos y con la mayor cantidad posible de informacin,
como nos ha caracterizado en cada captulo. Recuerda leer y practicar todos los captulos
anteriores de este Manual de HTML5 y CSS3. Si deseas comentar o sugerir puedes visitar
nuestra pgina en facebook. Hasta la prxima entrega !!







HTML5 captulo 7

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;
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:
#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);
}

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
#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);
}
</captulo 7>

Hasta aqu el captulo 7 de nuestro manual. En el Captulo 8 hablaremos de
las animaciones en CSS3.
Como siempre insistimos, recuerden repasar los Captulo 1, Captulo 2, Captulo
3, Captulo 4, Captulo 5 y el Captulo 6 de este Manual de HTML5 y CSS3.
Hasta la prxima entrega.
















HTML5 captulo 8


<CAPITULO 8>
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]

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;
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
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:


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).
#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 X representan 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 {
-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);
}
</Captulo 8>
Bueno estimados lectores, este ha sido un gran captulo; como siempre bien detallado y
muy didctico este Gran Manual de HTML5 y CSS3. Como siempre les recordamos
siempre repasar los Captulo 1 Captulo 2 Captulo 3 Captulo 4 Captulo
5 Captulo 6 y el Captulo 7
En el Captulo 9 veremos Cmo usar CSS3 para crear animaciones con fotogramas
clave. Hasta la prxima entrega.