Taller de HTML5 y herramientas

6,435 views

Published on

En esta Guía se tratará de explicar las nuevas etiquetas de HTML5 para la maquetación de una Web, explicando e incorporando todas sus ventajas y novedades, así mismo, se darán a conocer diversas herramientas para el diseño y maquetación de webs de forma sencilla.

Se darán respuesta a las siguientes cuestiones:
¿Qué es HTML?
¿En qué consiste HTML?
¿Cómo se escriben las etiquetas?
¿Cómo se muestra una página Web?
¿Qué es la semántica HTML?
¿Qué es HTML5?
¿Por qué surge HTML5?
¿Qué va a pasar con las Web en HTML4?
¿Cómo se crea una página Web?
¿Cómo se declara un documento HTML5?
¿Qué etiquetas se usan para maquetar en HTML5?
¿Qué herramientas usaremos?

El taller correrá a cargo de Antonio Cruz Gómez, amigo y presidente de la Asociación EnRed 2.0 (http://enred20.org/)

Para más información puedes mirar la web: http://enred20.org/node/39
O ponerte en contacto con nosotros o con la Asociación EnRed 2.0

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
6,435
On SlideShare
0
From Embeds
0
Number of Embeds
3,202
Actions
Shares
0
Downloads
135
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Taller de HTML5 y herramientas

  1. 1. ¿Qué es HTML?HTML son las siglas de HyperText Markup Language (“lenguaje de marcado de hipertexto”), esdecir, lenguaje que se usa para elaboración una página Web.HTML utiliza una estructura de marcado de la información mediante etiquetas, en formato dehipertexto, para incluir textos, imágenes, vídeos, sonidos, etc.Este lenguaje, HTML, es leído e interpretado, por un navegador la Web, mediante el protocoloHTTP (HyperText Transfer Protocol - Protocolo de Transferencia de Hipertexto) y nos muestrael contenido en forma de documento, que es lo que conocemos cómo una página Web.HTML se escribe con “etiquetas”, van rodeadas por corchetes angulares (< - >) y cada etiquetatiene unos atributos y eso atributos tiene unos valores.¿Qué es la semántica HTML?La semántica HTML es, utilizar las etiquetas para que realice las funciones que tienen y fueroncreadas, es decir, que cada etiqueta de HTML, fue creada para reflejar un tipo de contenido, yno se debe usar para otros propósitos, por ejemplo:  Un párrafo está contenido entre la etiqueta <p></p>.  Una lista ordenada está contenido entre la etiqueta <ol></ol>.  Un bloque de texto citado es contenido entre la etiqueta <blockquote></blockquote>Los elementos HTML no son usados para otro propósito que no sea el de la semántica. Porejemplo:  h1 contiene encabezados; no es para hacer el texto más grande.  blockquote contiene una cita larga; no es para aplicar sangría al texto.  Un elemento de párrafo vacío (p) no se usa para saltar líneas.
  2. 2. ¿Qué es HTML5?HTML5 es última la actualización de HTML.Pero en realidad, HTML5 es un término de que se usa para agrupar varias tecnologías dedesarrollo de páginas Web: HTML5, CSS3 y nuevas capacidades de JavaScript (en especial conla nueva etiqueta de HTML5: canvas).¿Por qué surge HTML5?Porque la versión anterior de HTML, es decir HTML4, carece de características necesarias parasoportar, los nuevos contenidos que se estaban incluyendo las páginas Web y se necesitabanplugins de otras aplicaciones, como Adobe Flash, para que los navegadores mostrasen esoscontenidos.Flash ha sido usado para reemplazar estas carencias que tenía HTML, a la hora de desarrollarWeb apps y que superaran las habilidades de un navegador: Audio, video, Webcams,micrófonos, animaciones vectoriales, componentes de interfaz complejos, entre muchas otrascosas.Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y sobre todo que existe una grancompatibilidad y competencia entre navegadores, para incorporar los estándares de HTML5.Además ha originado una guerra entre las compañías de estos navegadores para incorporar losnuevos estándares de HTML5.También el uso de JavaScript y de FrameWorks, cómo jQuery, Dojo.js, Ext JS, ShowCase, ect,han ayudado a que estos contenidos se muestre en el navegador, sin la necesidad de tener queinstalar, estos plugins.
  3. 3. ¿Qué va a pasar con las Web en HTML4?HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML seguiráfuncionando sin problemas en HTML5.¿Cómo se crea una página Web?Tenemos que saber que una página Web, se crea a partir de diferentes tecnologías.  HTML  CSS  JavaScriptA la hora de crea y maquetar una página Web, lo podemos hacer dos formas diferentes: 1. Escribimos tanto todo el código dentro del documento HTML, es decir, los etilos y el código JavaScript, mezclado con el código HTML. Esta opción en un principio parece más ventajosa, pero en el caso de que tengamos que modificar el código nos va a resultar más tedioso y complicado. Y sobre todo si tenemos que modificar los estilos de un sitio Web, tendremos que hacerlo página por página. 2. Escribimos el código CSS y JavaScript en documentos distintos y luego hacemos referencia a esto documento, en el head del documento HTML, es decir, los etilos y el código JavaScript, están en archivos distintos del código HTML. Esta opción en un principio parece más complicada, pero en el caso de que tengamos que modificar el código nos va a resultar más fácil y cómodo. Y en el caso de tener que modificar los estilos de un sitio Web, sólo tendremos que modificar la línea del estilo deseado y se aplicará a todas las páginas del sitio Web, de forma automática.Cómo podéis comprobar la segunda opción, es un poco más complicada de realizar en tiempode desarrollo, pero las ventajas que proporciona a la hora de realizar modificaciones soninnegables.
  4. 4. ¿Cómo se declara un documento HTML5?Para empezar a usar HTML5, lo único que se tiene que hacer es colocar el DOCTYPE, alprincipio del documento, es decir, antes de la etiqueta <html>.Ejemplo en HTML5: <!DOCTYPE html>Esta declaración de DOCTYPE está más simplificada, que cuando se declaraba un documentoen XHTML y te permite usar todas las habilidades de HTML5.Ejemplo en XHTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta http-equiv="content-language" content="es" />Etiqueta dir = LTR | RTL [CI]:Este atributo específica la dirección del texto, es decir, texto que no tiene direccionalidadheredada según se define en [UNICODE] de los contenidos o los valores de los atributos de unelemento. Valores posibles:  LTR: Texto o tabla de izquierda a derecha (Left-to-right).  RTL: Texto o tabla de derecha a izquierda (Right-to-left).
  5. 5. ¿Cuáles son las nuevas etiquetas de HTML5?La mayoría de las nuevas etiquetas de HTML5 no tienen una representación especial enpantalla y se comportan cómo un <div> o un <span>. Pero cada una tiene un significadosemántico superior a un simple div o span.<header>Hacer lo mismo que cuando declarábamos en nuestro documento HTML, la capa de lacabecera con: <div id="header"> en los proyectos Web.<header> está diseñada para reemplazar la necesidades de crear una capa (div) sin significadosemántico.<hgroup>Muchos header necesitan múltiples títulos, cómo un Blog que tiene un título del nombre delBlog o sitio Web y una línea (tagline) con el lema o explicando el contenido Blog o sitio Web.<hgroup> permite escribir un h1, h2 y h3 dentro del header sin afectar el SEO, además nospermitirá usar otra etiqueta h1 dentro del contenido del sitio Web.En el HTML actual, sólo puedes usar h1 una vez por página Web o el h1 pierde prioridad en elSEO.<nav>Tiene el mismo valor semántico que <header>, <nav> está diseñada para insertar la barra denavegación principal, es decir, los botones para navegar dentro del sitio Web.
  6. 6. Se puede colocar cualquier etiqueta dentro, pero lo recomendado es usar listas <ul>. Y sólopuedes haber un elemento <nav> por página Web.<section>Tiene el mismo valor semántico que <header>. Se usa para definir la sección donde está elcontenido dentro de la página Web, es decir, donde vamos a escribir lo que queremos que elusuario lea en nuestra página Web. Se puede crear distintas secciones en una página Websiempre y cuando cada sección tenga contenido único.Por ejemplo:En un Blog, sería la zona donde están los posts o artículos.En un video de YouTube, habría un section para el video, uno para los datos del video, otropara la zona de comentarios.<article>Define zonas únicas de contenido independiente. Por ejemplo:En el home o página de inicio de un Blog, cada post o artículo sería un article y cada uno de suscomentarios sería un <article>.<aside>Cualquier contenido que no esté relacionado con el objetivo primario de la página va en unaside. Por ejemplo:
  7. 7. En un Blog, el aside es la barra lateral de información o de enlaces a otro Blog. En el home deun periódico, puede ser el área de indicadores económicos, el tiempo, enlaces a sígueme en lasredes sociales.¿Cuándo se debe usar div, aside, section o article?Hay que de diferenciar el uso de div, section y article. Aunque no es sencillo, tampoco es muycomplicado, para entender cuáles son los detalles que diferencian estas tres etiquetas, queparecen que tienen las mismas funciones.La diferencia está principalmente en la semántica que le vamos a dar al contenido. Por esousaremos:  Article: para representar cualquier información que tenga un sentido por él mismos. Un ejemplo: un artículo de un Blog, el resumen de ese artículo en una portada de Blog, una pregunta en un foro, un comentario…  Section: para agrupar contenido relacionado. Puede servirnos para enmarcar un conjunto de artículos, o artículos que se dividan en secciones.  Aside: para agrupar contenido que no tiene relación con el contenido principal, cómo pueden ser enlaces a antiguos artículos, redes sociales, enlaces al otras Web, publicidad, etc.  Div no tiene intención semántica, es simplemente un contenedor de contenido.Imaginemos un documento, que esta viene divida en secciones, para a entender mejor estainformación. Y las secciones pueden estar divididas en más secciones, que aglutinan elcontenido del documento (los artículos).<footer>Es el pie de página. La etiqueta footer representa el pie de un documento o sección. Lainformación que se suele añadir en este bloque es el autor del documento, enlaces acontenido relacionado, información de copyright, avisos legales, etc.
  8. 8. Igualmente podremos agregar al pie información de contacto. Recordar que para ellodisponemos de otra etiqueta llamada address. Al igual que en la etiqueta anterior, a pesar desu nombre, este elemento no tiene porque ir al final del documento o sección aunque sueleser lo más normal.Atención: div no está muertoEstas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuandonecesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significadosemántico. Sólo usa las etiquetas semánticas de HTML5 donde sean necesarias.Ejemplo de código con HTML5<header> <hgroup> <h1>El Blog de Freddie Mercury</h1> <h2>Este Blog es un homenaje a la vida profesional de Freddie Mercury</h2> </hgroup></header><nav> Aquí va la botonera de navegación</nav><section> <article>Aquí va un post, con su titulo en h2</article> <article>Aquí va un post, con su titulo en h2</article> <article>Aquí va un post, con su titulo en h2</article></section><aside> Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts viejos, etc.
  9. 9. </aside><footer> Pie de página, copyright, avisos legales, etc.</footer>Las etiquetas nuevas "importantes" de HTML5Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y un buendesarrollo Web, no es la razón por la que todo el mundo habla de HTML5.Video, audio y animación vectorial están en la lista de prioridades y en la boca de todas laspersonas que alaban su uso. Específicamente, las nuevas etiquetas son:<video>Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soportacodecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs.<audio>Inserta audio sin necesidad de plugins. Se puede usar múltiples formatos, en especial mp3,pero también depende del navegador.<input>Input ya existía cómo la etiqueta para insertar cajas de texto y botones en los formularios,pero ahora es más poderosa, con la capacidad de insertar cajas tipo "email" que seautovalidan, calendarios tipo "date", números, entre otras.<canvas>
  10. 10. Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo para Javascript.<svg>Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo deFlash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.La segunda revolución de la Web y el soporte de HTML5 en navegadores antigüosHTML5 la incorporación al desarrollo Web nuevas habilidades para facilitar la inserción<video>, <audio> y <canvas>, con estos elementos, que cada vez eran más que necesarios, yevitar la necesidad de recurrir a elementos externos, ni la instalación de plugins.Sin embargo, no es el primer gran cambio de Internet. La primera gran revolución deldesarrollo Web vino en el 2004 con Gmail, que puso en funcionamiento el objetoXmlHttpRequest, más conocido como AJAX.Pocos son los que saben es que AJAX fue creado por Microsoft para Internet Explorer 5 en1999. Sí, el navegador responsable de detener la innovación de los estándares Web, estambién el creador de la innovación más importante sin la cual, cosas como Gmail, Facebook,Google Maps o quizás Twitter, habrían sido inviables.Internet Explorer, es también hoy la razón de la poca implementación de HTML5, en muchossitios Web, porque no incorporan los estándares de HTML5, hasta Internet Explorer 9, que sólose puede instalar en Windows Vista y 7.Sin embargo, hay formas de que las etiquetas semánticas de HTML5 y atributos de CSS3funcionen en IE. Gracias a los grandes hackers del mundo:  HTML5 Enabling Script: Permite usar las etiquetas semánticas dentro de IE6, 7 y 8 como si fueran div normales y permite utilizar CSS3. Sin este script, las etiquetas de
  11. 11. HTML5 son ignoradas en por el navegador IE y es imposible maquetar en HTML5, y que se vea correctamente IE6, 7 y 8.  IE-CSS3: Este script permite usar cosas como bordes redondeados y sombras sobre objetos de CSS3 en IE6, 7 y 8.  Selectivizr: Librería JS que nos simula el comportamiento de CSS en los navegadores IE6-IE8.  Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene soporte para múltiples capacidades de Javascript, HTML5 y CSS3.  Html5shiv: El código añade nuevos elementos HTML5 y también es compatible con la impresión de elementos HTML5 e incluye los estilos predeterminados para los elementos de HTML5, como bloque sobre el artículo y sección.Para incluir Html5shiv en una página Web, sería:<header> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></header>Nuevas capacidades de JavaScriptJavaScript, el lenguaje favorito del desarrollador de FrontEnd y ha recibido muchas habilidadesy funcionalidades nuevas. Las más importantes son: Web StorageLas cookie es una forma cutre de guardar información en el lado del cliente, pero también es laúnica forma. Las cookies no pueden guardar más de 4KB por cookie, 100KB por dominio.Esto es muy poco, pero todo el contenido de las cookies va pegado a las peticiones HTTP quese hagan al servidor. Lo que significa que por cada vez que el usuario recarga la página se tieneque subir los KB que pesan todas las cookies que le hemos dado de nuevo al servidor.
  12. 12. Con Web Storage se soluciona este problema. Son variables que se pueden guardar en el discodel usuario, con soporte en todos los navegadores (incluyendo IE8), puedes guardar hasta 5MBy no sólo texto. Cualquier tipo de datos cabe en un Storage. Web SQLEs una base de datos tipo SQLite controlable con sólo Javascript. Pero Internet Explorer 9declaró que no implementará Web SQL y la realidad es que Web Storage es más que suficientepara la mayoría de usos. Así que esto por ahora no sirve. Web Workers¿Sabías que Javascript sólo puede hacer una cosa al tiempo? Es una de las razones por la quelas Web apps son simples, ya que la multitarea es imposible. Web Workers soluciona eso ypermite tener multiples .js corriendo en paralelo en una misma página. Haciendo tareascomplejas más veloces gracias al multithreading.Web Sockets al igual que XMLSockets en Actionscript, permite hacer aplicaciones multiusuarioen tiempo real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte deWeb Sockets, es posible usar implementaciones multiusuario en Javascript comoPubSubHubBub. Arrastrar y soltarEl gesto de arrastrar y soltar ahora es posible, gracias a HTML5. Un ejemplo, sería: Gmail, creaun email arrastrar un archivo del explorador de archivos al mail. Comprobarás que es posibleadjuntarlo sólo arrastrarlo. GeolocalizaciónEl navegador hará uso de muchos métodos (GPS, Skyhook, Google Geo, IP) para darte la latitudy longitud de tus usuarios, pero para ellos te tienen que dar permiso. Lo mejor es que funcionaen cualquier PC. Prueba este demo.
  13. 13. Fuentes y páginas de interés:http://www.comocreartuweb.com/curso-de-html/estructura-semantica-html5/etiquetas-semanticas/section-o-article.htmlhttp://www.ibm.com/developerworks/ssa/web/library/wa-html5fundamentals/http://www.creativasfera.com/infografia-estructura-de-un-documento-html5-bien-redactadohttp://www.baluart.net/articulo/html5-series-estructura-y-secciones-de-los-documentoshttp://activ.com.mx/uso-de-elementos-semanticos-en-html5/http://www.cristalab.com/tutoriales/pagina-en-construccion-estilo-minimalista-en-html5-y-css3-c107576l/http://www.cristalab.com/tags/html5/http://www.cristalab.com/tutoriales/introduccion-a-html5-c92171l/http://www.creativasfera.com/5-principios-para-crear-un-codigo-css-limpio-y-optimizado/http://www.genbetadev.com/desarrollo-web/introduccion-a-la-web-semantica-en-html5http://caniuse.comhttp://www.laWebera.es/diseno-Web/diseno-Web-en-html5.phphttp://www.imaginanet.com/Blog/como-usar-html-5.htmlhttp://www.imaginanet.com/Blog/maquetacion-en-html5.htmlhttp://www.pedroventura.com/desarrollo-Web/10-herramientas-online-para-ayudar-y-crear-codigo-html5/http://www.foroshtml5.comhttp://www.useragentman.com/Blog/2010/07/27/creating-cross-browser-html5-forms-now-using-modernizr-Webforms2-and-html5widgets-2/http://www.limejs.com/Generadores de Código HTML5:
  14. 14. http://www.initializr.com/http://reuze.me/http://reuze.me/http://foundation.zurb.com/download.phpGeneradores de Código CSS3:http://westciv.com/tools/http://westciv.com/tools/audio/http://modernizr.com/download/http://css3please.com/http://css3pie.com/http://www.layerstyles.org/builder.htmlhttp://www.wordpressthemeshock.com/css-drop-shadow/http://border-radius.com/http://www.css3.me/http://css3gen.com/http://css-tricks.com/examples/ButtonMaker/http://www.spritebox.net/http://www.css3shapes.com/http://buzz.jaysalvat.com/http://www.css3maker.com/index.htmlhttp://www.3dcsstext.com/http://css3generator.com/http://www.css3generator.in/http://prefixmycss.com/
  15. 15. Validador de CSS3:http://csslint.net/Formularios:http://djdesignerlab.com/2011/08/08/10-useful-html5-and-css3-forms-tutorial-with-source-file/Los Mejores Frameworks y Grids de CSS para Responsive Design:http://www.creativasfera.com/los-mejores-frameworks-y-grids-de-css-para-responsive-designCrear Plantallas gratis HTML, WorkPress, Joomla, ASP.net:http://www.cooltemplate.com/

×