Realizado por:            Antonio Cruz Gómezhttps://www.facebook.com/antonio.cruzgomez.98https://twitter.com/acruzgomezhtt...
“Los que se enamoran de lapráctica sin la teoría soncomo los pilotos sintimón, ni brújula, quenunca podrán saber adónde va...
Índice:∞ ¿Qué es HTML?∞ ¿En qué consiste HTML?∞ ¿Cómo se escriben las etiquetas?∞ ¿Cómo se muestra una página Web?∞ ¿Qué e...
¿Qué es HTML?HTML son las siglas deHyperText       MarkupLanguage (“lenguaje demarcado de hipertexto”´.
¿En qué       consisteHTML?HTML consiste hacer unaestructura de marcadode     la   informaciónmediante etiquetas.
¿Cómo se escriben las etiquetas?Las    “etiquetas”    deHTML, van rodeadaspor corchetes angulares,cada etiqueta tiene unos...
¿Cómo se muestra una página Web?HTML, es leído einterpretado, por unnavegador la Web ynos    muestra     elcontenido.
¿Qué es la semántica HTML?La semántica HTMLes la utilidad quetienen las etiquetas.Las    etiquetas   secrearon para realiz...
¿Qué es la semántica HTML?Por ejemplo:∞ <p></p>∞ <blockquote></blockquote>∞ <h1></h1>
¿Qué es HTML5?HTML5       es   última   laactualización de HTML.Pero en realidad, HTML5agrupar varias tecnologíasde desarr...
¿Por qué surge HTML5?HTML4,        carece    decaracterísticas necesariaspara soportar los nuevoscontenidos, que se estaba...
¿Por qué surge HTML5?Flash ha sido usado parareemplazar            estascarencias, a la hora dedesarrollar Web apps.
¿Por qué surge HTML5?HTML5 es capaz dehacer esto sin plugins yha originado:   ∞   compatibilidad   ∞   competencia
¿Por qué surge HTML5?El uso de JavaScript yde FrameWorks, cómo:jQuery, Dojo.js, ExtJS,etc., han ayudado paramostrar los co...
¿Qué va a pasar con las Web enHTML4?HTML4 y HTML5 son100% compatibles.HTML4 seguirá funcionando sin problemas en losnavega...
¿Cómo se crea una página Web?Tenemos que saber queuna página Web, se creaa partir de diferentestecnologías.  ∞ HTML  ∞ CSS...
¿Cómo se crea una página Web?Podemos hacer 2cosas a la hora degenerar y maquetaruna página Web.
¿Cómo se crea una página Web? 1. Podemos escribir el    código de JavaScript    y CSS, dentro del    documento HTML.Pero c...
¿Cómo se crea una página Web? 2. Podemos      escribir    el    código de JavaScript y    CSS,     en     diferentes    ar...
¿Cómo se declara un documentoHTML5?Para    empezar    a    usarHTML5, lo único que setiene que hacer es colocar elDOCTYPE,...
¿Cómo se declara un documentoHTML5?Ejemplo:  <!DOCTYPE html>La declaración está muchomás simplificada con HTML5.
¿Cómo se declara un documento  XHTML?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/D...
¿Qué  etiquetas se           usan   paramaquetar en HTML5?La mayoría de las nuevasetiquetas de HTML5 notienen una represen...
<header>Hacer lo mismo, que la capade la cabecera:    <div id="header“><header> está diseñada parareemplazar una capa (div...
<hgroup>Muchos header necesitanmúltiples encabezados.Por ejemplo:Blog que tiene un títulodel nombre y el lema.
<hgroup>Permite escribir un h1, h2y h3 dentro del header sinafectar el SEO.Permite usar otra etiquetah1 dentro del conteni...
<nav>Está    diseñada parainsertar la barra denavegación.Es recomendable usar listas(<ul>). Es aconsejable quesólo haya un...
<section >Se usa para definir lasección donde se incluyeel contenido.Se puede crear distintassecciones    siempre    ycuan...
<article >Define zonas únicas decontenido independiente.Por ejemplo:La página home de un Blog;cada     artículo     y susc...
<aside>El contenido que no estérelacionado con el objetivoprimario de la página va enun aside.
<aside>Por ejemplo:En un Blog, el aside es labarra lateral de informacióno de enlaces a otroBlog, enlaces a redessociales,...
<footer>Es el pie de página yrepresenta    la  seccióndonde va la informaciónsobre el autor, enlaces acontenido, informaci...
E j e m p l o d e có d i go co n H T M L 5<header> <hgroup>   <h1>El Blog de Freddie Mercury</h1>   <h2>Este Blog es un ho...
E j e m p l o G rá f i co d e l có d i go d e H T M L 5
Ejemplo de la etiqueta article<section> <article>     <header>            <hgroup>                         <h1>El Blog de ...
Atención : div no está muertoDiv se debe usar cuandose       necesite     uncontendor             deobjetos,    como     p...
¿Qué herramientas usaremos?Generadores de Código HTML5http://switchtohtml5.com/http://www.initializr.com/
¿Qué herramientas usaremos?Generadores de Código HTML5http://reuze.me/http://foundation.zurb.com/download.php
¿Qué herramientas usaremos?Generadores de Código CSS3http://www.3dcsstext.com/http://www.css3maker.com/
Maquetación web con html5
Próxima SlideShare
Cargando en…5
×

Maquetación web con html5

26.104 visualizaciones

Publicado el

Bases de la maquetación de una web en HTML5, 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

Publicado en: Tecnología
0 comentarios
7 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
26.104
En SlideShare
0
De insertados
0
Número de insertados
3.302
Acciones
Compartido
0
Descargas
609
Comentarios
0
Recomendaciones
7
Insertados 0
No insertados

No hay notas en la diapositiva.

Maquetación web con html5

  1. 1. Realizado por: Antonio Cruz Gómezhttps://www.facebook.com/antonio.cruzgomez.98https://twitter.com/acruzgomezhttp://antoniocruzgomez.blogspot.com.es/
  2. 2. “Los que se enamoran de lapráctica sin la teoría soncomo los pilotos sintimón, ni brújula, quenunca podrán saber adónde van.”Leonardo Da Vinci (1452-1519)Pintor, escultor e inventor italiano.
  3. 3. Índice:∞ ¿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?
  4. 4. ¿Qué es HTML?HTML son las siglas deHyperText MarkupLanguage (“lenguaje demarcado de hipertexto”´.
  5. 5. ¿En qué consisteHTML?HTML consiste hacer unaestructura de marcadode la informaciónmediante etiquetas.
  6. 6. ¿Cómo se escriben las etiquetas?Las “etiquetas” deHTML, van rodeadaspor corchetes angulares,cada etiqueta tiene unosatributos y eso atributostiene unos valores.
  7. 7. ¿Cómo se muestra una página Web?HTML, es leído einterpretado, por unnavegador la Web ynos muestra elcontenido.
  8. 8. ¿Qué es la semántica HTML?La semántica HTMLes la utilidad quetienen las etiquetas.Las etiquetas secrearon para realizarunas determinadafunciones.
  9. 9. ¿Qué es la semántica HTML?Por ejemplo:∞ <p></p>∞ <blockquote></blockquote>∞ <h1></h1>
  10. 10. ¿Qué es HTML5?HTML5 es última laactualización de HTML.Pero en realidad, HTML5agrupar varias tecnologíasde desarrollo de páginasWeb.
  11. 11. ¿Por qué surge HTML5?HTML4, carece decaracterísticas necesariaspara soportar los nuevoscontenidos, que se estabanincluyendo en las páginasWeb y se necesitabanplugins.
  12. 12. ¿Por qué surge HTML5?Flash ha sido usado parareemplazar estascarencias, a la hora dedesarrollar Web apps.
  13. 13. ¿Por qué surge HTML5?HTML5 es capaz dehacer esto sin plugins yha originado: ∞ compatibilidad ∞ competencia
  14. 14. ¿Por qué surge HTML5?El uso de JavaScript yde FrameWorks, cómo:jQuery, Dojo.js, ExtJS,etc., han ayudado paramostrar los contenidossin necesidad de usarplugins.
  15. 15. ¿Qué va a pasar con las Web enHTML4?HTML4 y HTML5 son100% compatibles.HTML4 seguirá funcionando sin problemas en losnavegadores.
  16. 16. ¿Cómo se crea una página Web?Tenemos que saber queuna página Web, se creaa partir de diferentestecnologías. ∞ HTML ∞ CSS ∞ JavaScript
  17. 17. ¿Cómo se crea una página Web?Podemos hacer 2cosas a la hora degenerar y maquetaruna página Web.
  18. 18. ¿Cómo se crea una página Web? 1. Podemos escribir el código de JavaScript y CSS, dentro del documento HTML.Pero cómo tengas que hacer algunamodif icación, busca esta pistola.
  19. 19. ¿Cómo se crea una página Web? 2. Podemos escribir el código de JavaScript y CSS, en diferentes archivos y luego vincularlos al documento HTML.Esta opción te permite modif icar sólolas parte que deseamos.
  20. 20. ¿Cómo se declara un documentoHTML5?Para empezar a usarHTML5, lo único que setiene que hacer es colocar elDOCTYPE, al principio deldocumento.
  21. 21. ¿Cómo se declara un documentoHTML5?Ejemplo: <!DOCTYPE html>La declaración está muchomás simplificada con HTML5.
  22. 22. ¿Cómo se declara un documento XHTML?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="es"lang="es" dir="ltr">
  23. 23. ¿Qué etiquetas se usan paramaquetar en HTML5?La mayoría de las nuevasetiquetas de HTML5 notienen una representaciónen pantalla y se comportancómo un <div> o un <span>.Pero tienen un significadosemántico superior.
  24. 24. <header>Hacer lo mismo, que la capade la cabecera: <div id="header“><header> está diseñada parareemplazar una capa (div) sinsignificado semántico.
  25. 25. <hgroup>Muchos header necesitanmúltiples encabezados.Por ejemplo:Blog que tiene un títulodel nombre y el lema.
  26. 26. <hgroup>Permite escribir un h1, h2y h3 dentro del header sinafectar el SEO.Permite usar otra etiquetah1 dentro del contenido,sin perder prioridad enSEO.
  27. 27. <nav>Está diseñada parainsertar la barra denavegación.Es recomendable usar listas(<ul>). Es aconsejable quesólo haya un elemento<nav> por página Web.
  28. 28. <section >Se usa para definir lasección donde se incluyeel contenido.Se puede crear distintassecciones siempre ycuando cada sección tengacontenido diferentes.
  29. 29. <article >Define zonas únicas decontenido independiente.Por ejemplo:La página home de un Blog;cada artículo y suscomentarios sería un<article>.
  30. 30. <aside>El contenido que no estérelacionado con el objetivoprimario de la página va enun aside.
  31. 31. <aside>Por ejemplo:En un Blog, el aside es labarra lateral de informacióno de enlaces a otroBlog, enlaces a redessociales, etc.
  32. 32. <footer>Es el pie de página yrepresenta la seccióndonde va la informaciónsobre el autor, enlaces acontenido, información decopyright, avisoslegales, etc.
  33. 33. E j e m p l o d e có d i go co n H T M L 5<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 Barra de navegación con sus botones</nav><section> <article>Aquí va un post, con su titulo en h1</article> <article>Aquí va un post, con su titulo en h1</article> <article>Aquí va un post, con su titulo en h1</article></section><aside> Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts anteriores, etc.</aside><footer> Pie de página, copyright, avisos legales, etc.</footer>
  34. 34. E j e m p l o G rá f i co d e l có d i go d e H T M L 5
  35. 35. Ejemplo de la etiqueta article<section> <article> <header> <hgroup> <h1>El Blog de Freddie Mercury</h1> <h2>Este Blog es un homenaje a la vida profesional de Freddie Mercury</h2> Meta-datos, como fecha de creación del artículo. </hgroup> </header> <p> La etiqueta <b>Article</b> debe usarse para fragmento independientes de contenido... </p> <aside> Enlaces con artículos relacionados. </aside> <footer> Enlaces a las redes sociales. </footer> </article></section>
  36. 36. Atención : div no está muertoDiv se debe usar cuandose necesite uncontendor deobjetos, como porejemplo una imagen. Dives un contender y no vana tener un significadosemántico.
  37. 37. ¿Qué herramientas usaremos?Generadores de Código HTML5http://switchtohtml5.com/http://www.initializr.com/
  38. 38. ¿Qué herramientas usaremos?Generadores de Código HTML5http://reuze.me/http://foundation.zurb.com/download.php
  39. 39. ¿Qué herramientas usaremos?Generadores de Código CSS3http://www.3dcsstext.com/http://www.css3maker.com/

×