HTML 5 Qu es HTML5?

HTML5 (HyperText Markup Language, versin 5) 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. Todava se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por mltiples desarrolladores web por sus avances, mejoras y ventajas. 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. El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C. Estndar: http://www.w3.org/html/wg/html5/

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 cmo debemos hacer la web hoy mismo.

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.

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. 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. Dije adems que HTML5 tiene logo de superheroe y que venden camisetas para apoyar al movimiento? 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.

Por qu HTML5 es semntico?

Aade etiquetas para manejar la Web Semntica (Web 3.0): header, footer, article, nav, time (fecha del contenido), link rel= (tipo de contenido que se enlaza). Estas etiquetas permiten describir cual es el significado del contenido. Por ejemplo su importancia, su finalidad y las relaciones que existen. No tienen especial impacto en la visualizacin, se orientan a buscadores. Los buscadores podrn indexar e interpretar esta meta informacin para no buscar simplemente apariciones de palabras en el texto de la pgina. Permite incorporar a las pginas ficheros RDF / OWL (con meta informacin) para describir relaciones entre los trminos utilizados. Adems de ofrecer versatilidad en el manejo y animacin de objetos simples, imgenes etc.

Introduccin y las nuevas etiquetas de HTML5

HTML5 es la actualizacin de HTML, el lenguaje en el que es creada la web. HTML5 tambin es un trmino de marketing para agrupar las nuevas tecnologas de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript. La versin anterior y ms usada de HTML, HTML4, carece de caractersticas necesarias para la creacin de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQuery,1 jQuery UI2, Sproutcore3, entre otros. Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran las habilidades de un navegador: Audio, video, webcams, micrfonos, datos binarios, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran compatibilidad entre navegadores.

Nuevas etiquetas de 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 DOCTYPE4 antes de la etiqueta <html>:

<!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.
1 http://www.cristalab.com/tutoriales/tutorial-de-jquery-c214l/ 2 http://jqueryui.com/ 3 http://www.cristalab.com/blog/sproutcore-la-competencia-en-javascript-a-flex-y-flash-c58098l/ 4 http://www.cristalab.com/tips/la-importancia-de-doctype-y-de-validar-xhtml-y-css-c57338l/ 5 http://www.cristalab.com/tutoriales/tutorial-basico-de-xhtml-c143l/

<header>
Hacer cosas como <div id=header> es un poco estpido cuando el 99% de los proyectos web tienen una cabecera. <header> est diseada para reemplazar la necesidad de crear divs sin significado semntico.

<hgroup>
Muchos headers necesitan mltiples ttulos, como un blog que tiene un titulo y un tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio. En el HTML actual, slo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.

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

<article>
Define zonas nicas de contenido independiente. En el home de un blog, cada post sera un article. En un post del blog, el post y cada uno de sus comentarios sera un <article>.

<aside>
Cualquier contenido que no est relacionado con el objetivo primario de la pgina va en un aside. En un blog, obviamente el aside es la barra lateral de informacin. En el home de un peridico, puede ser el rea de indicadores econmicos.

<footer>
Este es obvio. Es el pie de pgina y todo lo que lo compone.

Atencin <div> no est muerto:

Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites una caja con objetivos de diseo grfico o cualquier cosa que no tenga significado semntico. Slo usa las etiquetas semnticas de HTML5 donde sean necesarias.
4

JavaScript Qu es JavaScript?
JavaScript es un lenguaje de programacin que se utiliza principalmente para crear pginas web dinmicas. Una pgina web dinmica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario. Tcnicamente, JavaScript es un lenguaje de programacin interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios. A pesar de su nombre, JavaScript no guarda ninguna relacin directa con el lenguaje de programacin Java. Legalmente, JavaScript es una marca registrada de la empresa Sun Microsystems, como se puede ver en http://www.sun.com/suntrademarks/.

Historia
JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, el cual fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript. El cambio de nombre coincidi aproximadamente con el momento en que Netscape agreg soporte para la tecnologa Java en su navegador web Netscape Navigator en la versin 2.002 en diciembre de 1995. La denominacin produjo confusin, dando la impresin de que el lenguaje es una prolongacin de Java, y se ha caracterizado por muchos como una estrategia de mercadotecnia de Netscape para obtener prestigio e innovar en lo que eran los nuevos lenguajes de programacin web.5 6 JavaScript es una marca registrada de Oracle Corporation. Es usada con licencia por los productos creados por Netscape Communications y entidades actuales como la Fundacin Mozilla.7 Microsoft dio como nombre a su dialecto de JavaScript JScript, para evitar problemas relacionadas con la marca. JScript fue adoptado en la versin 3.0 de
5

Internet Explorer, liberado en agosto de 1996, e incluy compatibilidad con el Efecto 2000 con las funciones de fecha, una diferencia de los que se basaban en ese momento. Los dialectos pueden parecer tan similares que los trminos JavaScript y JScript a menudo se utilizan indistintamente, pero la especificacin de JScript es incompatible con la de ECMA en muchos aspectos. Para evitar estas incompatibilidades, el World Wide Web Consortium dise el estndar Document Object Model (DOM, o Modelo de Objetos del Documento en espaol), que incorporan Konqueror, las versiones 6 de Internet Explorer y Netscape Navigator, Opera la versin 7, Mozilla Application Suite y Mozilla Firefox desde su primera versin.[cita requerida] En 1997 los autores propusieron8 JavaScript para que fuera adoptado como estndar de la European Computer Manufacturers 'Association ECMA, que a pesar de su nombre no es europeo sino internacional, con sede en Ginebra. En junio de 1997 fue adoptado como un estndar ECMA, con el nombre de ECMAScript. Poco despus tambin como un estndar ISO.

Cdigo en JavaScript
El cdigo JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de cdigo en cualquier zona de la pgina, se recomienda definir el cdigo JavaScript dentro de la cabecera del documento (dentro de la etiqueta <head>). Ejemplo: mensaje de Hola mundo en el body: <script> window.alert("Hola mundo"); </script> Ejemplo: incluir el archivo externo de javascript en el head
<script type="text/javascript" src="/js/codigo.js"></script>

La sintaxis de JavaScript es muy similar a la de otros lenguajes de programacin como Java y C. Las normas bsicas que definen la sintaxis de JavaScript son las siguientes:
6

No se tienen en cuenta los espacios en blanco y las nuevas lneas: como sucede con XHTML, el intrprete de JavaScript ignora cualquier espacio en blanco sobrante, por lo que el cdigo se puede ordenar de forma adecuada para entenderlo mejor (tabulando las lneas, aadiendo espacios, creando nuevas lneas, etc.) Se distinguen las maysculas y minsculas: al igual que sucede con la sintaxis de las etiquetas y elementos XHTML. Sin embargo, si en una pgina XHTML se utilizan indistintamente maysculas y minsculas, la pgina se visualiza correctamente, siendo el nico problema la no validacin de la pgina. En cambio, si en JavaScript se intercambian maysculas y minsculas el script no funciona. No se define el tipo de las variables: al crear una variable, no es necesario indicar el tipo de dato que almacenar. De esta forma, una misma variable puede almacenar diferentes tipos de datos durante la ejecucin del script. No es necesario terminar cada sentencia con el carcter de punto y coma (;): en la mayora de lenguajes de programacin, es obligatorio terminar cada sentencia con el carcter ;. Aunque JavaScript no obliga a hacerlo, es conveniente seguir la tradicin de terminar cada sentencia con el carcter del punto y coma (;). Se pueden incluir comentarios: los comentarios se utilizan para aadir informacin en el cdigo fuente del programa. Aunque el contenido de los comentarios no se visualiza por pantalla, si que se enva al navegador del usuario junto con el resto del script, por lo que es necesario extremar las precauciones sobre la informacin incluida en los comentarios.

Definiciones Bsicas
Script: cada uno de los programas, aplicaciones o trozos de cdigo creados con el lenguaje de programacin JavaScript. Unas pocas lneas de cdigo forman un script y un archivo de miles de lneas de JavaScript tambin se considera un script. A veces se traduce al espaol directamente como "guin", aunque script es una palabra ms adecuada y comnmente aceptada. Sentencia: cada una de las instrucciones que forman un script. Palabras reservadas: son las palabras (en ingls) que se utilizan para construir las sentencias de JavaScript y que por tanto no pueden ser utilizadas libremente. Las
7

palabras actualmente reservadas por JavaScript son: break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with.

Por qu usar JavaScript?

Desde su aparicin, JavaScript siempre fue utilizado de forma masiva por la mayora de sitios de Internet. La aparicin de Flash disminuy su popularidad, ya que Flash permita realizar algunas acciones imposibles de llevar a cabo mediante JavaScript. Sin embargo, la aparicin de las aplicaciones AJAX programadas con JavaScript le ha devuelto una popularidad sin igual dentro de los lenguajes de programacin web. JavaScript fue diseado de forma que se ejecutara en un entorno muy limitado que permitiera a los usuarios confiar en la ejecucin de los scripts. De esta forma, los scripts de JavaScript no pueden comunicarse con recursos que no pertenezcan al mismo dominio desde el que se descarg el script. Los scripts tampoco pueden cerrar ventanas que no hayan abierto esos mismos scripts. Las ventanas que se crean no pueden ser demasiado pequeas ni demasiado grandes ni colocarse fuera de la vista del usuario (aunque los detalles concretos dependen de cada navegador). Adems, los scripts no pueden acceder a los archivos del ordenador del usuario (ni en modo lectura ni en modo escritura) y tampoco pueden leer o modificar las preferencias del navegador. Por ltimo, si la ejecucin de un script dura demasiado tiempo (por ejemplo por un error de programacin) el navegador informa al usuario de que un script est consumiendo demasiados recursos y le da la posibilidad de detener su ejecucin. A pesar de todo, existen alternativas para poder saltarse algunas de las limitaciones anteriores. La alternativa ms utilizada y conocida consiste en firmar digitalmente el script y solicitar al usuario el permiso para realizar esas acciones.

CSS3 Definicin de CSS

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin de los documentos electrnicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentacin y es imprescindible para crear pginas web complejas. Separar la definicin de los contenidos y la definicin de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (tambin llamados "documentos semnticos"). Adems, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. Al crear una pgina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la funcin de cada elemento dentro de la pgina: prrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamao y tipo de letra del texto, separacin horizontal y vertical entre elementos, posicin de cada elemento dentro de la pgina, etc.

Qu es CSS3?
A diferencia de CSS2, que fue una gran especificacin que defina varias funcionalidades, CSS3 est dividida en varios documentos separados, llamados "mdulos". Cada mdulo aade nuevas funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad. Los trabajos en el CSS3, comenzaron a la vez que se public la recomendacin oficial de CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999. Debido a la modularizacin del CSS3, diferentes mdulos pueden encontrarse en diferentes estadios de su desarrollo, de forma que a fechas de noviembre de 2011, hay alrededor de cincuenta mdulos publicados, tres de ellos se convirtieron en
9

recomendaciones oficiales de la W3C en 2011: "Selectores", "Espacios de nombres" y "Color". Algunos mdulos, como "Fondos y colores", "Consultas de medios" o "Diseos multicolumna" estn en fase de "candidatos", y considerados como razonablemente estables, a finales de 2011, y sus implementaciones en los diferentes navegadores son sealadas con los prefijos del motor del mismo.

Por qu usar CSS?

1.- SEPARACIN DEL CONTENIDO Y PRESENTACIN. Las hojas de estilo generalmente se encuentran en archivos separados del cdigo principal (html, por ejemplo). Esto nos va a permitir que en un equipo de trabajo, programador y diseador puedan realizar sus tareas de forma independiente aunque paralela, sin correr el riesgo de que haya interferencias entre ambos, y ello no alterar el resultado final. 2.- FLEXIBILIDAD. Podramos comparar las hojas de estilo con la ropa que guardamos en nuestros cajones. Nosotros somos los mismos, pero dependiendo de la temporada variamos nuestra apariencia. En el caso de las hojas de estilo sucede lo mismo: podemos cambiar en cualquier momento alguna parte o la totalidad del diseo de nuestras pginas con slo modificar nuestra hoja de estilo, sin que ello suponga modificar el contenido. 3.- UNIFICACIN DEL DISEO DE LAS PGINAS DEL SITIO. Un sitio web, ya sea dinmico o esttico, suele estar formado por unas cuantas pginas. Mantener una misma apariencia se puede volver una tarea pesada y tediosa si tenemos que copiar y pegar cdigo cada vez que creemos una pgina nueva, o que deseemos modificar una misma cosa en todas. Enlazando a cada una de nuestras pginas nuestras hojas de estilo, agilizamos este proceso y minimizamos el trabajo. 4.- OPTIMIZACIN DE LOS TIEMPOS DE CARGA Y DE TRFICO EN EL SERVIDOR. Al haber dividido contenido y apariencia obtenemos archivos ms ligeros, y esto nos reporta dos beneficios: por un lado, reducimos notablemente los tiempos de
10

carga del sitio en el navegador. A esto debemos unir la capacidad de ste para mantener nuestra hoja de estilo en cach. Por otro lado, reducimos el volumen de trfico de nuestro servidor, que siempre es de agradecer, tanto si disfrutamos de servicios gratuitos en que solemos tener cuotas muy reducidas, como si pagamos por tener alojamiento propio. 5.- PRECISIN O ELASTICIDAD. Desde el momento en que usemos CSS, el tamao y posicionamiento de los elementos que formen nuestras pginas podr ser exacto. Podremos indicarle al navegador en qu pxel debe colocar sta o aqulla imagen, o qu alto y ancho deber mostrar. Pero al mismo tiempo, podremos emplear medidas variables o relativas que nos permitan expandir el contenido hasta ocupar la totalidad de la ventana de navegacin a nuestro antojo, o contraerla a slo una parte de la misma, con independencia de la resolucin de pantalla del usuario. 6.- ACCESIBILIDAD Y ESTRUCTURACIN. La combinacin de CSS y marcadores descriptivos va a posibilitar que nuestra pgina se vea correctamente con o sin hoja de estilos, puesto que en cualquier caso, la informacin se mantendr estructurada y ordenada. Esto supone que podr ser accesible sin ningn tipo de problemas tanto por navegadores antiguos o sin soporte para CSS, como para personas con algn tipo discapacidad. 7.- LIMPIEZA DEL CDIGO FUENTE. Si escribimos una hoja de estilo independiente, el cdigo fuente de nuestra web va a resultar menos farragoso y agilizaremos las tareas de localizacin de las lneas que busquemos. 8.- COMPATIBILIDAD Y CONTINUIDAD. Las reglas establecidas por la especificacin CSS-1 fijaron los estndares del diseo, y se mantienen y respetan en la CSS-2. Es de prever que en el nivel 3 suceder lo mismo con respecto a su predecesor. Pero lo realmente interesante es que los navegadores que no soporten CSS-3 no tendrn problemas a la hora de asimilar el contenido CSS puesto que siempre les

11

quedar la compatibilidad de CSS-2, o la CSS-1 en su caso. La compatibilidad de las especificaciones CSS anteriores estar siempre garantizada. 9.- ESTANDARIZACIN FRENTE A ESPECIFICACIONES PROPIETARIAS. La adopcin de estndares por la W3C ofrece la ventaja de la compatibilidad del cdigo entre los diferentes navegadores web. El uso de soluciones propietarias, como es el caso de muchas etiquetas o patrones usadas por Microsoft. En su interpretacin de lo que es y no es CSS, dificulta la creacin de pginas web, porque supone tener que escribir dos cdigos distintos para obtener un mismo resultado, en funcin del tipo de navegador que use el visitante. El uso del estndar CSS de la W3C evitar visualizaciones incorrectas de nuestras pginas en distintos navegadores. 10.- PERMITE LA DIFERENCIACIN DE ESTILOS PARA IMPRIMIR / VISUALIZAR EN PANTALLA. El uso de CSS nos va a permitir tambin maquetar separadamente el contenido de nuestra web para ser mostrado en pantalla o para ser impreso. Tengamos en cuenta que las necesidades y propiedades de un folio de papel y de un monitor nunca van a ser las mismas, y gracias a CSS podremos determinar cmo queremos que se imprima lo que mostramos en la pantalla, manteniendo siempre una apariencia limpia, ordenada y agradable visualmente. Espero que estas pequeas reflexiones hayan servido para animarte a dar el gran salto y vestir a tu web con un bonito traje CSS hecho a medida. Y si an no te animas a usar CSS en tu sitio, te invitamos a conocer CSS Reinicia, una iniciativa que busca que sitios web en nuestro idioma se reinventen gracias a esta tecnologa

12