Investigación HTML5 y CSS3

HTML 5
Es la quinta revisión del lenguaje HTML. Esta versión, en conjunto con CSS3, define los
nuevos estándares de desarrollo web, rediseñando el código para resolver problemas y
actualizándolo así a nuevas necesidades. No se limita solo a crear nuevas etiquetas o atributos, sino
que incorpora muchas características nuevas y proporciona una plataforma de desarrollo de
complejas aplicaciones web (mediante los APIs). Esta versión nos permite una mayor interacción
entre nuestras páginas web y el contenido media (video, audio, entre otros) así como una mayor
facilidad a la hora de codificar nuestro diseño básico.
Algunas de las nuevas características de HTML5 son:
 Nuevas etiquetas semánticas para estructurar los documentos HTML, destinadas a remplazar
la necesidad de tener una etiqueta <div> que identifique cada bloque de la página.
 Los nuevos elementos multimedia como <audio> y <video>.
 La integración de gráficos vectoriales escalables (SVG) en sustitución de los genéricos
<object>, y un nuevo elemento <canvas> que nos permite dibujar en él.
 El cambio, redefinición o estandarización de algunos elementos, como <a>, <cite> o <menu>.
 MathML para fórmulas matemáticas.
 Almacenamiento local en el lado del cliente.
 Y otros muchos nuevos APIs que veremos a lo largo de los siguientes capítulos.

Beneficios de HTML5
1. Incorporación de video. Los videos, se han convertido en parte esencial de varios sitios Web.
Esto se debe, principalmente, a su gran poder de atracción visual. Los diseñadores han sabido
implementarlos de diversas formas, para así darle dinamismo a un sitio Web. HTML5
proporciona un estándar para mostrar videos, haciendo que su incorporación sea sencilla y
popular.
2. Experiencia de usuario. Gracias a que HTML5 ofrece una gran variedad de herramientas, se
pueden diseñar y presentar sitios y aplicaciones Web que superen las expectativas de los
usuarios. Consecuentemente, aumentando las visitas y proporcionando una buena
experiencia.
3. Un código más limpio. Para los desarrolladores Web, tratar de hacer cambios, en un código
desordenado, puede tornarse en una situación de terror. Sin embargo, HTML5 ha sido creado
para ofrecer un código más limpio, que soluciona el tan aquejado problema de tener que hacer
modificaciones en un sitio Web.
4. Compatibilidad múltiple entre navegadores. Los diseñadores Web pueden estar tranquilos
de que, los sitios o sistemas que desarrollen, serán compatibles en todos los navegadores.
5. Optimización para móviles. Actualmente, sabemos que los teléfonos celulares y tabletas, no
pueden ser ignorados. Por esta razón, HTML5 es aún más increíble, ya que está optimizado
para desarrollar sitios y aplicaciones móviles. Esto significa que, con HTML5, podrás llevar a
cabo proyectos responsivos y funcionales para todo tipo de dispositivos.
6. Una mejor posibilidad de ranking. HTML5 ofrece un código optimizado para ser leído por los
motores de búsqueda con mayor facilidad. Debido a esto, el contenido de un sitio Web
desarrollado con HTML5, podrá ser comprendido para, consecuentemente, obtener un mejor
ranking en las búsquedas.
 Etiquetas HTML5
Etiqueta Función Etiqueta Función Etiqueta Función
Grupo de elementos
Define un parámetro
<!–…–> Define un comentario <fieldset> relacionados en un <param>
para un objeto
formulario
Define el tipo de Define el título para Define texto pre-
<!DOCTYPE> <figcaption> <pre>
docuemento una figura <figure> formateado
Representa el progreso
Especifica auto-
<a> Define un hipervínculo <figure> <progress> de una tarea en una
contenido
barra
Define una Define el pie de página
<abbr> <footer> <q> Define una cita corta
abreviación de un documento
Define que debe
Define la información
mostrar en
de contacto del autor / Define un formulario
<address> <form> <rp> navegadores que no
propietario del html
soportan scripts de
documento
ruby
Define una
Define un área dentro Define encabezados o
<area> <h1> a <h6> <rt> pronunciación de
de un mapa de imagen títulos
caracteres
Define información Define una notación de
<article> Define un artículo <head> <ruby>
hacerca del documento ruby
Define el contenido Define la sección de
Define texto que no es
<aside> lateral del contenedor <header> encabezado del <s>
correcto
de una página docuemnto
Define contenido de Grupo de encabezado Define un ejemplo de
<audio> <hgroup> <samp>
sonido (<h1> a <6>) salida de un programa
Define un cámbio de
Define un script del
<b> Define texto en negrita <hr> temática a partir de <script>
lado cliente
una línea dibujada
Especifica la base
donde se abrirán todas Define la raíz del Define una sección de
<base> <html> <section>
las URL del documento un documento
documento
Aísla una parte del
Define una parte del
texto que puede tener Define un drop-down
<bdi> <i> texto de modo <select>
un formato diferente list
alternativo
del texto externo
Sobreescribe la Define un frame en
<bdo> <iframe> <small> Define texto pequeño
dirección del texto línea
Define los recursos
Define una sección
<blockquote> <img> Define una imagen <source> para elementos
que tiene otra fuente
multimedia
Define una pequeña
Define el cuerpo del Define un control de
<body> <input> <span> sección de un
documento entrada de texto
documento
Define texto que ha
Define un salto de Define un texto en
<br> <ins> sido insertado en un <strong>
línea negrita
documento
Define un estilo para
Define un botón Define entrada del
<button> <kbd> <style> la información de un
clickeable teclado
documento
 Define un campo
Se usa para dibujar Define un texto que es
<canvas> <keygen> generador de claves <sub>
gráficos en pantalla subíndice
para formularios
Define un encabezado
Define el título de una Define el rótulo para
<caption> <label> <summary> visible para el
tabla un elemento <input>
elemento <details>
Define un título para
Define el título de un los elementos Define un texto que es
<cite> <legend> <sup>
trabajo <fieldset>, <figure>, superíndice
<details>
Define un trozo de
Define un ítem de una
<code> código de <li> <table> Define una tabla
lista
programación
Especifica las Define la relación
propiedades de la entre un documento y
Define el cuerpo de
<col> columna para cada <link> un recurso externo <tbody>
una tabla
columna del elemento (generalmente con
<colgroup> hojas de estilo)
Especifica un grupo de
Define un mapa de Define una celda en
<colgroup> una o más columnas <map> <td>
imagen del cliente una tabla
de una tabla
Define un botón Define un control de
Define texto resaltado
<command> command al que un <mark> <textarea> entrada de múltiples
o marcado
usuario puede invocar líneas
Especifica en un input Agrupa los footer
Define la lista de un
<datalist> una lista pre-definida <menu> <tfoot> contenidos en una
menú
de opciones tabla
Define la descripción Define una celda de
Define un metadato de
<dd> de un ítem en una lista <meta> <th> encabezado en una
un documento
de definición tabla
Define un texto que ha Define una medida Agrupa los
<del> sido definido en un <meter> escalar en un rango <thead> encabezados de una
Mdocument conocido tabla
Define detalles
adicionales que el Define un link de
<details> <nav> <time> Define fecha / hora
usuario puede ver o navegación
esconder
Define un contenido
alternativo para los
Define el término de Define un título para el
<dfn> <noscript> usuarios que no <title>
una definición documento
soportan scripts del
cliente
Define una caja o Define un objeto Define una fila en una
<dialog> <objet> <tr>
ventana de dialogo embebido tabla
Define texto de la pista
Define una sección en Define una lista para elementos
<div> <ol> <track>
un documento ordenada multimedia (vídeo y
audio)
Define un grupo de
Define una lista de opciones relacionadas Define una lista
<dl> <optgroup> <ul>
definición en una lista desordenada
desplegable
Define un término (un
Define una opción en
<dt> ítem) en una lista de <option> <var> Define una variable
una lista desplegable
definición
Define énfasis en un Define el resultado de Define un vídeo o
<em> <output> <video>
texto un cálculo película
 Define el contenedor
Define un posible salto
<embed> de una aplicación <p> Define un párrafo <wbr>
de linea
externa (no html)
CSS3
Es un lenguaje de marcado que se emplea para dar formato a un sitio web. Es decir, funciona
en conjunto con los archivos HTML. Se puede aplicar en la misma hoja en la que se está
desarrollando un documento HTML, pero por motivos de productividad se suele realizar en un
documento aparte con la extensión “.css”. Este documento se puede vincular a cada página HTML
que conforme el sitio web, es por ello que es más útil realizar los estilos por separado.
CSS3 funciona mediante módulos, algunos de los más comunes son “colors”, “fonts”,
“backgrounds”, etc. Los módulos son sólo categorías en las que se pueden dividir las modificaciones
que hacemos al aspecto de nuestro sitio web. Existen una gran variedad de módulos, pero
mencionaremos algunos de los más útiles y que añaden mayor interactividad a un sitio.
CSS3 ofrece la posibilidad de añadir animaciones y transiciones. Gracias a las transiciones
puedes cambiar la apariencia y el comportamiento de un elemento cada vez que se da un cambio de
estado (por ejemplo, cuando el cursor se posa sobre dicho elemento). Por otro lado, las animaciones
permiten que tanto la apariencia como el comportamiento de un elemento se alteren en base a
fotogramas. De esta manera, puedes añadir mayor interactividad a tu sitio sin recurrir a JavaScript o
Flash, sólo con el poder de CSS3.

Layout con columnas. Todas las páginas web trabajan con columnas. De hecho, muchos
diseños se hacen en base a una cuadrícula y como mínimo se emplean dos columnas. En el caso de
layout tipo revista, el número de columnas suele ser mayor. Sin importar el número de columnas
bajo el cual decidas organizar tu sitio, puedes crear un layout con diversas columnas gracias a la
propiedad “Multicolumn Layout” de CSS3. Esta propiedad no sólo te permite especificar el número
de columnas de tu layout, sino también el ancho de cada columna.

Gradientes. CSS3 no sólo te permite modificar el color de los elementos que conforman tu
página, sino que también te permite crear gradientes. Anteriormente, esto no era posible y tenías
que emplear imágenes, pero ahora que puedes hacerlo desde el mismo archivo CSS. De esta
manera, mejorar el tiempo de respuesta de tu sitio. Puedes crear gradientes lineales especificando la
dirección o añadiendo un ángulo bajo el cuál se creará la gradiente. Puedes elegir de dos a más
colores para tus gradientes e incluso añadirle transparencia, de modo que a nivel creativo realmente
no hay límites al momento de crear tus gradientes CSS3.

Rotación de elementos. La propiedad “Transform” de CSS3 no sólo te permite rotar

elementos, sino también cambiar su tamaño y moverlos. Esta transformación puede ser aplicada a
imágenes, botones y cualquier otro elemento 2D. También te permite realizar animaciones en base a
la rotación de elementos, de modo que puedes hacer girar un elemento como un péndulo o de la
forma que desees. “Transform” también te permite realizar modificaciones a elementos 3D, puedes
girarlos o cambiar su tamaño, es decir, puedes aplicar las mismas modificaciones tanto en 3D como
en 2D, obviamente los resultados varían. Debido a la popularidad del minimalismo y el diseño flat,
los objetos 3D ya no son tan comunes, sin embargo, un uso común de “Transform” en elementos 3D
es en galerías.
 Uso de fuentes. Probablemente una de las más grandes adiciones de CSS es el poder para
poder añadir fuentes desde librerías como Google Fonts. En esta librería tienes a tu disposición un
gran número de fuentes gratuitas que puedes colocar en tu archivo CSS sin mayores problemas. Si
la tipografía que has elegido tiene diversos formatos como cursivas, semi-cursivas, negritas, etc.
puedes también darle formato a las fuentes y especificar su tamaño. Esto permite que el diseño se
encuentre más unificado, es decir, que los elementos gráficos y la tipografía se complementen y
formen parte de una misma línea gráfica. A nivel de marca, es una gran adición poder añadir fuentes
diferentes en tu página. Por otro lado, debido a que utilices una librería que se encuentra en la nube
todo el tiempo, no dependes de las fuentes instaladas en el sistema del usuario.

Ventajas
 Es gratuito.
No se necesita de ningún software costoso para empezar a codificar en CSS. Lo que sí
necesitas es un amplio conocimiento del idioma si estás pensando en realizar tu código
CSS en un bloc de notas. Aunque es posible, no es recomendable, ya que no distingue las
etiquetas especiales de CSS.
 Todos los estilos en una sola página.
Permite vincular un solo archivo CSS a diversas páginas. De esta manera, se pueden
definir los estilos de un sitio web y vincularlos mediante las etiquetas respectivas según
corresponda. Si en algún punto se desea cambiar algún estilo que se repite en todas las
páginas, sólo se debe abrir el archivo CSS y realizar el cambio que se desee. Este cambio
será visible en todas las páginas sin la necesidad de realizar ninguna otra acción.
 Genera sitios más rápidos.
Mejora la productividad y ayuda a mejorar el tiempo de respuesta del sitio. Ya que todos
los estilos se encuentran en un solo archivo CSS, se evita tener que repetir código en los
archivos HTML. Esta repetición no sólo resta tiempo, sino que también genera mayor peso
en tus páginas. Esta hoja de estilos se mantiene en la caché del navegador de modo que
cuando un usuario visita otra página del sitio, evita que el archivo CSS se cargue
nuevamente, simplemente emplea la copia en la caché y de este modo se mejora el
tiempo de respuesta del sitio.
 CSS3 y el diseño adaptativo.
Permite maximizar la experiencia de usuario en los dispositivos móviles al emplear Media
Queries. Las Media Queries, o consultas de medios en CSS, permiten añadir estilos o
reglas específicas según el tamaño de pantalla, la dirección del dispositivo o la densidad
de pixeles. Emplear los Media Queries permite crear una experiencia mejorada según las
características de los dispositivos.

Nuevas etiquetas de formulario en HTML5

Number. El tipo number muestra el típico casillero para el ingreso de información, sólo que acepta
únicamente números dentro de un rango determinado por el diseñador del formulario.
<input type=range name=”numero” min=20, max=999>
Range. Esta etiqueta nos presenta un deslizador. Es decir, una línea horizontal con un botón que
podemos mover sobre ella para determinar un valor dentro de un rango dado. La etiqueta cuenta con
los atributos mínimo (min) y máximo (max) con el objetivo de limitar nuestra selección a un número
dentro de esos valores.
<input type=range name=”deslizador” min=1, max=100>
Search. La etiqueta search no es más que un típico campo de input de texto, sólo que con un
formato similar al muy conocido de búsqueda de contenido. Algunos navegadores agregan a la
derecha del casillero una “x” para eliminar el texto ingresado.
<input type=“search” name=“buscador”>
Ingreso de Fecha y Hora. HTML5 propone una nueva serie de tipos de input que nos dan la
posibilidad de ingresar datos de fechas y horarios, los cuales pueden seleccionarse desde un
calendario u otro tipo de elementos que automatizan el ingreso de información.
En los navegadores que aún no son compatibles con esta nueva característica de HTML5, estos
nuevos tipos en entrada se presentarán como un casillero normal de ingreso. Sin embargo, se
espera que en breve todos los navegadores soporten esta valiosa herramienta.
Datetime nos permite ingresar la fecha y la hora a partir de un calendario que el navegador nos
propone.
<input type=”datetime” name=”fechayhora”>
Así, se comportan de una manera similar los tipos date, month, week, time.

Datos de Identificación. Una interesante novedad en HTML5 es la ampliación de la etiqueta input

para simplificar el ingreso y la validación de variados elementos de identificación y localización. Los
nuevos tipos de input relacionados con esta característica son:
o tel, para el ingreso de números de teléfono.
<input type=”tel” name=”mitelefono”>
o url, para ingresar una dirección web.
<input type=“url” name=“url”>
o email, para la dirección de correo electrónico.
<input type=“email” name=“email”>
Atributos de Input en HTML5 .Además de las novedades en cuanto a etiquetas y tipos de input
para su uso en formularios, existen atributos nuevos que mejoran la experiencia de usuario y la
usabilidad.
o Autofocus fuerza el foco (la posición del cursor) dentro de un campo, una vez que se
carga la página. El mejor ejemplo de esto es google, cuando cargas la página
automáticamente el foco esá puesto en la caja de búsqueda para permitir escribir
directamente sin necesidad de hacer click en el input.
o Autocomplete permite el rellenado automático del input en base al texto que vaya
escribiendo el usuario, en base a los textos introducidos anteriormente. Puede utilizarse
como atributo de un campo de entrada o del formulario completo.
o Placeholder muestra un texto por defecto en el input hasta que este tiene el foco, en ese
momento el texto desaparece para que el usuario ingrese el texto que desee.
o Required es un atributo que se aplica a un campo de entrada e impide que se envíe el
formulario si el campo no se a rellenado.