Your SlideShare is downloading. ×
0
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Maquetación web con html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Maquetación web con html5

20,882

Published on

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 …

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

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

No Downloads
Views
Total Views
20,882
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
392
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Realizado por: Antonio Cruz Gómezhttps://www.facebook.com/antonio.cruzgomez.98https://twitter.com/acruzgomezhttp://antoniocruzgomez.blogspot.com.es/
  • 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. Í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. ¿Qué es HTML?HTML son las siglas deHyperText MarkupLanguage (“lenguaje demarcado de hipertexto”´.
  • 5. ¿En qué consisteHTML?HTML consiste hacer unaestructura de marcadode la informaciónmediante etiquetas.
  • 6. ¿Cómo se escriben las etiquetas?Las “etiquetas” deHTML, van rodeadaspor corchetes angulares,cada etiqueta tiene unosatributos y eso atributostiene unos valores.
  • 7. ¿Cómo se muestra una página Web?HTML, es leído einterpretado, por unnavegador la Web ynos muestra elcontenido.
  • 8. ¿Qué es la semántica HTML?La semántica HTMLes la utilidad quetienen las etiquetas.Las etiquetas secrearon para realizarunas determinadafunciones.
  • 9. ¿Qué es la semántica HTML?Por ejemplo:∞ <p></p>∞ <blockquote></blockquote>∞ <h1></h1>
  • 10. ¿Qué es HTML5?HTML5 es última laactualización de HTML.Pero en realidad, HTML5agrupar varias tecnologíasde desarrollo de páginasWeb.
  • 11. ¿Por qué surge HTML5?HTML4, carece decaracterísticas necesariaspara soportar los nuevoscontenidos, que se estabanincluyendo en las páginasWeb y se necesitabanplugins.
  • 12. ¿Por qué surge HTML5?Flash ha sido usado parareemplazar estascarencias, a la hora dedesarrollar Web apps.
  • 13. ¿Por qué surge HTML5?HTML5 es capaz dehacer esto sin plugins yha originado: ∞ compatibilidad ∞ competencia
  • 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. ¿Qué va a pasar con las Web enHTML4?HTML4 y HTML5 son100% compatibles.HTML4 seguirá funcionando sin problemas en losnavegadores.
  • 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. ¿Cómo se crea una página Web?Podemos hacer 2cosas a la hora degenerar y maquetaruna página Web.
  • 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. ¿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. ¿Cómo se declara un documentoHTML5?Para empezar a usarHTML5, lo único que setiene que hacer es colocar elDOCTYPE, al principio deldocumento.
  • 21. ¿Cómo se declara un documentoHTML5?Ejemplo: <!DOCTYPE html>La declaración está muchomás simplificada con HTML5.
  • 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. ¿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. <header>Hacer lo mismo, que la capade la cabecera: <div id="header“><header> está diseñada parareemplazar una capa (div) sinsignificado semántico.
  • 25. <hgroup>Muchos header necesitanmúltiples encabezados.Por ejemplo:Blog que tiene un títulodel nombre y el lema.
  • 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. <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. <section >Se usa para definir lasección donde se incluyeel contenido.Se puede crear distintassecciones siempre ycuando cada sección tengacontenido diferentes.
  • 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. <aside>El contenido que no estérelacionado con el objetivoprimario de la página va enun aside.
  • 31. <aside>Por ejemplo:En un Blog, el aside es labarra lateral de informacióno de enlaces a otroBlog, enlaces a redessociales, etc.
  • 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. 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. 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. 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. 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. ¿Qué herramientas usaremos?Generadores de Código HTML5http://switchtohtml5.com/http://www.initializr.com/
  • 38. ¿Qué herramientas usaremos?Generadores de Código HTML5http://reuze.me/http://foundation.zurb.com/download.php
  • 39. ¿Qué herramientas usaremos?Generadores de Código CSS3http://www.3dcsstext.com/http://www.css3maker.com/

×