Download - Maquetación web con html5
![Page 1: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/1.jpg)
MAQUETACIÓN WEB CON HTML5
Realizado por:
Antonio Cruz Gómez
https://www.facebook.com/antonio.cruzgomez.98 https://twitter.com/acruzgomez http://antoniocruzgomez.blogspot.com.es/
![Page 2: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/2.jpg)
MAQUETACIÓN WEB CON HTML5
“Los que se enamoran de la práctica sin la teoría son como los pilotos sin timón, ni brújula, que nunca podrán saber a dónde van.”
Leonardo Da Vinci (1452-1519) Pintor, escultor e inventor italiano.
![Page 3: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/3.jpg)
MAQUETACIÓN WEB CON HTML5
Í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?
![Page 4: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/4.jpg)
MAQUETACIÓN WEB CON HTML5
¿Qué es HTML?
HTML son las siglas
de HyperText Markup Language (“lenguaje de marcado de hipertexto”´.
![Page 5: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/5.jpg)
MAQUETACIÓN WEB CON HTML5
¿En qué consiste HTML?
HTML consiste hacer una estructura de marcado de la información mediante etiquetas.
![Page 6: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/6.jpg)
MAQUETACIÓN WEB CON HTML5
Las “etiquetas” de HTML, van rodeadas por corchetes angulares, cada etiqueta tiene unos atributos y eso atributos tiene unos valores.
¿Cómo se escriben las etiquetas?
< >
![Page 7: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/7.jpg)
MAQUETACIÓN WEB CON HTML5
HTML, es leído e interpretado, por un navegador la Web y nos muestra el contenido.
¿Cómo se muestra una página Web?
![Page 8: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/8.jpg)
MAQUETACIÓN WEB CON HTML5
La semántica HTML es la utilidad que tienen las etiquetas. Las etiquetas se crearon para realizar unas determinada funciones.
¿Qué es la semántica HTML?
![Page 9: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/9.jpg)
MAQUETACIÓN WEB CON HTML5
Por ejemplo:
∞ <p></p>∞ <blockquote></
blockquote>∞ <h1></h1>
¿Qué es la semántica HTML?
![Page 10: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/10.jpg)
MAQUETACIÓN WEB CON HTML5
HTML5 es última la actualización de HTML.
Pero en realidad, HTML5 agrupar varias tecnologías de desarrollo de páginas Web.
¿Qué es HTML5?
![Page 11: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/11.jpg)
MAQUETACIÓN WEB CON HTML5
HTML4, carece de características necesarias para soportar los nuevos contenidos, que se estaban incluyendo en las páginas Web y se necesitaban plugins.
¿Por qué surge HTML5?
![Page 12: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/12.jpg)
MAQUETACIÓN WEB CON HTML5
Flash ha sido usado para reemplazar estas carencias, a la hora de desarrollar Web apps.
¿Por qué surge HTML5?
![Page 13: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/13.jpg)
MAQUETACIÓN WEB CON HTML5
HTML5 es capaz de hacer esto sin plugins y ha originado:
∞
compatibilidad ∞ competencia
¿Por qué surge HTML5?
![Page 14: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/14.jpg)
MAQUETACIÓN WEB CON HTML5
El uso de JavaScript y de FrameWorks, cómo: jQuery, Dojo.js, ExtJS, etc., han ayudado para mostrar los contenidos sin necesidad de usar plugins.
¿Por qué surge HTML5?
![Page 15: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/15.jpg)
MAQUETACIÓN WEB CON HTML5
HTML4 y HTML5 son 100% compatibles.
¿Qué va a pasar con las Web en HTML4?
HTML4 seguirá funcionando sin problemas en los navegadores.
![Page 16: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/16.jpg)
MAQUETACIÓN WEB CON HTML5
Tenemos que saber que una página Web, se crea a partir de diferentes tecnologías.
∞ HTML∞ CSS∞ JavaScript
¿Cómo se crea una página Web?
![Page 17: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/17.jpg)
MAQUETACIÓN WEB CON HTML5
Podemos hacer 2 cosas a la hora de generar y maquetar una página Web.
¿Cómo se crea una página Web?
![Page 18: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/18.jpg)
MAQUETACIÓN WEB CON HTML5
1. Podemos escribir el código de JavaScript y CSS, dentro del documento HTML.
¿Cómo se crea una página Web?
Pero cómo tengas que hacer alguna modificación, busca esta pistola.
![Page 19: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/19.jpg)
MAQUETACIÓN WEB CON HTML5
2. Podemos escribir el código de JavaScript y CSS, en diferentes archivos y luego vincularlos al documento HTML.
¿Cómo se crea una página Web?
Esta opción te permite modificar sólo las parte que deseamos.
![Page 20: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/20.jpg)
MAQUETACIÓN WEB CON HTML5
Para empezar a usar
HTML5, lo único que se tiene que hacer es colocar el DOCTYPE, al principio del documento.
¿Cómo se declara un documento HTML5?
![Page 21: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/21.jpg)
MAQUETACIÓN WEB CON HTML5
Ejemplo:
<!DOCTYPE html>
La declaración está mucho más simplificada con HTML5.
¿Cómo se declara un documento HTML5?
![Page 22: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/22.jpg)
MAQUETACIÓN WEB CON HTML5
<!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">
¿Cómo se declara un documento XHTML?
![Page 23: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/23.jpg)
MAQUETACIÓN WEB CON HTML5
La mayoría de las
nuevas etiquetas de HTML5 no tienen una representación en pantalla y se comportan cómo un <div> o un <span>. Pero tienen un significado semántico superior.
¿Qué etiquetas se usan para maquetar en HTML5?
![Page 24: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/24.jpg)
MAQUETACIÓN WEB CON HTML5
Hacer lo mismo, que la capa de la cabecera:
<div id="header“>
<header> está diseñada para reemplazar una capa (div) sin significado semántico.
<header>
![Page 25: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/25.jpg)
MAQUETACIÓN WEB CON HTML5
Muchos header necesitan múltiples encabezados.
Por ejemplo:
Blog que tiene un título del nombre y el lema.
<hgroup>
![Page 26: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/26.jpg)
MAQUETACIÓN WEB CON HTML5
Permite escribir un h1, h2 y h3 dentro del header sin afectar el SEO.
Permite usar otra etiqueta h1 dentro del contenido, sin perder prioridad en SEO.
<hgroup>
![Page 27: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/27.jpg)
MAQUETACIÓN WEB CON HTML5
Está diseñada para insertar la barra de navegación.
<nav>
Es recomendable usar listas (<ul>). Es aconsejable que sólo haya un elemento <nav> por página Web.
![Page 28: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/28.jpg)
MAQUETACIÓN WEB CON HTML5
Se usa para definir la sección donde se incluye el contenido.
Se puede crear distintas secciones siempre y cuando cada sección tenga contenido diferentes.
<section>
![Page 29: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/29.jpg)
MAQUETACIÓN WEB CON HTML5
Define zonas únicas de contenido independiente.
Por ejemplo:
La página home de un Blog; cada artículo y sus comentarios sería un <article>.
<article>
![Page 30: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/30.jpg)
MAQUETACIÓN WEB CON HTML5
El contenido que no esté relacionado con el objetivo primario de la página va en un aside.
<aside>
![Page 31: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/31.jpg)
MAQUETACIÓN WEB CON HTML5
Por ejemplo:
En un Blog, el aside es la barra lateral de información o de enlaces a otro Blog, enlaces a redes sociales, etc.
<aside>
![Page 32: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/32.jpg)
MAQUETACIÓN WEB CON HTML5
Es el pie de página y representa la sección donde va la información sobre el autor, enlaces a contenido, información de copyright, avisos legales, etc.
<footer>
![Page 33: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/33.jpg)
MAQUETACIÓN WEB 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 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>
Ejemplo de código con HTML5
![Page 34: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/34.jpg)
MAQUETACIÓN WEB CON HTML5
Ejemplo Gráfico del código de HTML5
![Page 35: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/35.jpg)
MAQUETACIÓN WEB CON HTML5
<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>
Ejemplo de la etiqueta article
![Page 36: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/36.jpg)
MAQUETACIÓN WEB CON HTML5
Div se debe usar cuando se necesite un contendor de objetos, como por ejemplo una imagen. Div es un contender y no van a tener un significado semántico.
Atención: div no está muerto
![Page 37: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/37.jpg)
MAQUETACIÓN WEB CON HTML5
Generadores de Código HTML5
http://switchtohtml5.com/ http://www.initializr.com/
¿Qué herramientas usaremos?
![Page 38: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/38.jpg)
MAQUETACIÓN WEB CON HTML5
Generadores de Código HTML5
http://reuze.me/ http://
foundation.zurb.com/download.php
¿Qué herramientas usaremos?
![Page 39: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/39.jpg)
MAQUETACIÓN WEB CON HTML5
Generadores de Código CSS3
http://www.3dcsstext.com/ http://www.css3maker.com/
¿Qué herramientas usaremos?
![Page 40: Maquetación web con html5](https://reader033.vdocuments.co/reader033/viewer/2022061207/54840802b47959190d8b4af0/html5/thumbnails/40.jpg)
FIN