HTML 5

Por qu es importante HTML5?

Hace aos hablbamos de la Web 2.0. No se invent nada nuevo y cuando Tim Oreilly acu el trmino identific un cambio en el mercado, otro tipo de internet que se adapta al cambio de los tiempos y a muchos nuevos perfiles que habitan en el mundo digital. Por suerte no fue slo un cambio de dgitos y el marketing no fue suficiente para que se llenaran la boca de Web 3.0 o Web semntica. All no se identificaba nada y la frmula no funcion del todo.

Por eso quiero hablarles de HTML5. La magia de esta unin de tecnologas agrupada en un solo trmino no es inventar nada nuevo, sino unir esfuerzos que por primera vez tienen a toda la industria empujando hacia una direccin y que identifican un cambio que ya sucedi en como debemos hacer la web hoy mismo.

HTML 5
Por qu es importante HTML5?

HTML5 es el presente de la web y si no ests asimilando lo que est pasando ya eres parte de la vieja generacin de desarrolladores. Eso tendra que tenerte preocupado.

HTML 5
Por qu es importante HTML5?

Entender HTML5 es entender que hoy nos conectamos desde telfonos mviles, tabletas, eBooks, netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los webmasters y hoy hablamos de equipos multidiciplinarios de empresas de tecnologa que cuentan con frontends, backends, sysadmins, mobile devs, comunity managers y arquitectos de informacin en los proyectos que estn reiventando mercados y generando trfico e ingresos.

HTML 5
Por qu es importante HTML5?

Podemos hablar de todas las empresas gigantes de la web, podemos enumerar a Microsoft, Google, Apple, Adobe, Facebook, Yahoo, Mozilla y miles de proyectos tecnolgicos que independientemente de sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en cdigo en el navegador ms cercano a tu pantalla. Es una de sus ms importantes estrategias de posicionamiento y es una de sus ms fuertes apuestas de reclutamiento.

HTML 5
Por qu es importante HTML5?

Si crees que HTML sigue representando las siglas del Hypertext Markup Language no has entendido nada. HTML5 es una poca maravillosa de la web que tienes el privilegio de estar disfrutando. No es tecnologa, ni es tendencia. Es una poca dorada. Disfrutala y embriagate de sus tags.

HTML 5
qu es HTML?

Siglas de HyperText Markup Language (lenguaje de marcado hipertextual), hace referencia al lenguaje de marcado predominante para la elaboracin de pginas web que se utiliza para describir y traducir la estructura y la informacin en forma de texto, as como para complementar el texto con objetos tales como imgenes. El HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>). HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo, JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML

HTML 5
qu es XHTML?
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es ms que una adaptacin de HTML al lenguaje XML. Tcnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez, tambin es descendiente de SGML).

HTML 5
qu es XHTML?
Las pginas y documentos creados con XHTML son muy similares a las pginas y documentos HTML. Las discusiones sobre si HTML es mejor que XHTML o viceversa son recurrentes en el mbito de la creacin de contenidos web, aunque no existe una conclusin ampliamente aceptada. Actualmente, entre HTML 4.01 y XHTML 1.0, la mayora de diseadores escogen XHTML. En un futuro cercano, si los diseadores deben elegir entre HTML 5 y XHTML 1.1 o XHTML 2.0, quizs la eleccin sea diferente.

HTML 5
qu es XHTML?

HTML 5
HTML y CSS
Originalmente, las pginas HTML slo incluan informacin sobre sus contenidos de texto e imagenes. Con el desarrollo del estndar HTML, las pginas empezaron a incluir tambin informacin sobre el aspecto de sus contenidos: tipos de letra, colores y mrgenes. La posterior aparicin de tecnologas como JavaScript, provocaron que las pginas HTML tambin incluyeran el cdigo de las aplicaciones (llamadas scripts) que se utilizan para crear pginas web dinmicas. Incluir en una misma pgina HTML los contenidos, el diseo y la programacin complica en exceso su mantenimiento. Normalmente, los contenidos y el diseo de la pgina web son responsabilidad de diferentes personas, por lo que es conveniente separarlos. CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos:

HTML 5
HTML y CSS

HTML 5
HTML y CSS
Una ventaja aadida de la separacin de los contenidos y su presentacin es que los documentos XHTML creados son ms flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos mviles, impresoras y dispositivos utilizados por personas discapacitadas. De esta forma, utilizando exclusivamente XHTML se crean pginas web "feas" pero correctas. Aplicando CSS, se pueden crear pginas "bonitas" a partir de las pginas XHTML correctas.

HTML 5
NUEVAS ETIQUETAS EN HTML5
HTML5 es la quinta revisin importante del lenguaje bsico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: un clsico HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deber ser servida como XML (XHTML) (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le recomienda al usuario comn actualizar a la versin ms nueva, para poder disfrutar de todo el potencial que provee HTML5. HTML4 y HTML5 son 100% compatibles entre s. Todo el cdigo que tienes en HTML normal seguir funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo nico que tienes que hacer es colocar este DOCTYPE antes de la etiqueta <html>:

HTML 5
NUEVAS ETIQUETAS EN HTML5
<!DOCTYPE html> Es un DOCTYPE mucho ms simplificado que XHTML5 (cuyas reglas siguen siendo usadas) y te permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar. Las principales etiquetas HTML5 nuevas no tienen una representacin especial en pantalla. Todas se comportan como un <div> o un <span>. Pero cada una tiene un significado semntico superior a un simple div o span.

HTML 5
NUEVAS ETIQUETAS EN HTML5
<header> . <header> est diseada para reemplazar la necesidad de crear divs sin significado semntico, como por ejemplo <div id=header> <hgroup> Muchos headers necesitan mltiples ttulos, como un blog que tiene un ttulo y un tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header.

HTML 5
NUEVAS ETIQUETAS EN HTML5
<nav> Igual que <header>, <nav> est diseado para que ah coloques la botonera de navegacin principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>. <section> Define un rea de contenido nica dentro del sitio. En un blog, sera la zona donde estn todos los posts. En un video de youtube, habra un section para el video, uno para los datos del video, otro para la zona de comentarios.

HTML 5
NUEVAS ETIQUETAS IMPORTANTES EN HTML5

Las etiquetas semnticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo web, no son la razn por la que todo el mundo habla de HTML5. Video, audio y animacin vectorial estn en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Especficamente, las nuevas etiquetas son:

HTML 5
NUEVAS ETIQUETAS IMPORTANTES EN HTML5
<video> Inserta video sin necesidad de plugins. Es muy fcil usarla, pero cada navegador soporta codecs diferentes de video, lo que hace necesario recodificar un video en mltiples codecs. En un futuro captulo hablamos un poco del drama que este tag est generando. <audio>

Lo mismo que video, pero sin video. Puede usar mltiples formatos, en especial mp3, pero tambin depende del navegador.

HTML 5
NUEVAS ETIQUETAS IMPORTANTES EN HTML5
<input *> Input ya exista como la etiqueta para insertar cajas de texto y botones. Ahora es ms poderosa, con la capacidad de insertar cajas tipo email que se autovalidan, calendarios tipo date, sliders, nmeros, entre otras. <canvas> Un rea de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript

HTML 5
NUEVAS ETIQUETAS IMPORTANTES EN HTML5
<svg> Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estndar abierto SVG (Scalable Vector Graphics), derivado de XML.

HTML 5
CONCLUSIONES
HTML5 nos muestra mejoras a nivel de diseo. HTML5 brinda una mejor estructuracin a nivel de la informacin HTML5 permite mayor funcionalidad a las aplicaciones. Permiti el desarrollo en paralelo del XHTML . Nos brinda una cobertura de programacin que abarca aplicaciones para mviles y otros dispositivos. Mayor compatibilidad con navegadores Importante con el tema del video entender que HTML lo ha reconocido como una de las bases ms importantes de la web del presente y su mundo de posibilidades.