HTML5 ES MÁS QUE SOLO VIDEO , AUDIO Y CANVAS, VEAMOS LOS DETALLES EXTRAS PARA ENRIQUECER NUESTRO SITIOS

HTML5

HTML5

HTML5 lo ha cambiado todo, no solo desde el punto de vista de sus capacidades multimedia como audio y video; sino también los cambios propuestos para una web semántica, aunque algunas marcas de la anterior versión HTML4.01 aun están vigentes, otras ya no son recomendadas sus implementaciones como la marca <FONT> entre otras, si queremos incursionar y entrar con pasos firmes en el diseño web debemos aprenderlo junto con CSS3, esto nos dará otra perspectiva de las cosas, aparte que simplificará nuestra vidas en estos temas, al final seguro tendrás otra visión del famoso pero poco conocido HTML5 en todo su esplendor.

HTML y MóvilesPara los expositores y expertos John Freddy Vega (CRISTALAB) y Christian Van Der Henst (Maestros del WEB) nos advierten diciéndonos “HTML5 es el presente de la web y si no estás asimilando lo que está pasando ya eres parte de la vieja generación de desarrolladores.  Eso tendría que tenerte preocupado.”,  y un nuevo enfoque ya que entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, tabletas, eBooks, netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los webmaster y hoy hablamos de equipos multidiciplinarios de empresas de tecnología que cuentan con frontends, backends, sysadmins, mobile devs, comunity managers y arquitectos de información en los proyectos que están reinventando mercados y generando tráfico e ingresos (Slide Guía HTML5).

Entonces profundicemos un poco más, para empezar a codificar es importante indicar al inicio de un documento html5 la marca <!DOCTYPE HTML> que es compatible con navegadores antiguos, también la indicación del uso de caracteres ahora es más simple <metacharset=»utf-8″>, vincular una hoja de estilo externa usamos <link rel=»stylesheet» href=»style.css»/>, y para uso de código Javascript externo usamos <script src=»code.js»> </script> antes se ponía <script src=»code.js» type=»text/javascript»></script>, más sencillo verdad, si ;pero siempre y cuando ustedes hallan incursionado en esto del Diseño Web, comprendo si alguno de mis lectores cree que escribí chino.

Recordemos que en el antiguo HTML solo teníamos una marca de contenedor sin significado semántico como era el caso de <DIV>, ahora en HTML5 se incorporan a parte de <DIV> las marcas  <SECTION > para manejo de secciones y <ARTICLE> que suele llevar un titulo y un pie o footer, además no dejare de mencionar las marcas <ASIDE> para definir sidebar, <FOOTER> para los pies o la parte baja de nuestra información, <HEADER> para cabeceras y <NAV> para definir menús o barra de navegación para nuestra página, si recuerdan como era antes, pues se hacía uso de la propiedad de <DIV> llamada ID y teníamos que asignar las mismas palabras.

Así que si bien es cierto HTML5 trae cosas nuevas para el Audio y Video <AUDIO> <VIDEO>, en el caso de lienzos o áreas con <CANVA>; también  trae otras mejoras en el área de almacenamiento local, WebSockets, semántica cito los ejemplos antes mencionados, compatibilidad hacia atrás y eficacia en el renderizado de las páginas, otras cosas interesantes son la marca <COMMANDO> y sus diferentes aplicaciones como checked,disable,icon, label, radiogroup y type, podemos crear botones, botones de radio y casillas de verificación incluyendo eventos.

En otro ámbito como en la escritura, marcas como <MARK> para destacar palabras o una parte de un texto, podemos agrupar titulares usando <HGROUP>, en cuanto a tareas podemos visualizar su progreso usando la marca <PROGRESS>, si deseamos especificar la fuente de archivo ahora usamos <SOURCE> como en casos puntuales de archivos de audio y video; los encabezados  y su contenido de detalle para elementos con las marcas <SUMMARY> y <DETAILS>.

Los formularios no han sido la excepción, atributos como «PlaceHolder» usado como texto de ayuda al usuario, el atributo autofocus aunque se recomiendo su implementación con javascript,  también tenemos los tipos de texto para la marca <INPUT> que se asignan en la propiedad type como email, url, tel, range, para las fecha y alternativas tenemos date, month, week, time, datetime, detametima-local; sobre <CANVA> mencionare las instrucciones que incluye como beginPath, moveTo, lineTo, fill, closePath, fillText, stroke; también podemos dibujar imágenes con drawImage(), algo que llamó mi atención fue el uso de gradientes con createLinearGradient() y createRadialGradient().

Como lo mencione antes, no se olvidaron sobre el almacenamiento, así que HTML5 trae instrucciones para llevar a cabo esta tarea con sessionStorage y localStorage; los criterio de arrastrar y soltar quedan implementados en nuevos eventos como dragstart, drag, dragenter, dragover, dragleave, , drop, dragend; no olvidemos el atributo draggeble ponerlo a true para indicar que el elemento se puede arrastrar.

Bueno creo que con este vistazo rápido y muy técnico comprobaran que HTML5 es mucho más que las nuevas marcas AUDIO y VIDEO, nos abre un mundo de posibilidades grande para nuestros sitios web y enriquecerlo con mayor interactividad y mejor experiencia de usuario, aprovechemos y comencemos a estudiarlo al detalle.

Fuente:  HTML5 y CSS Andrés Pastorini, Sitio Maestros del Web – CritaLAB, Opinión personal

Leave a Reply