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/

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

Í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?

¿Qué es HTML?

HTML son las siglas de
HyperText Markup
Language (“lenguaje de
marcado de hipertexto”´.

¿En qué consiste
HTML?

HTML consiste hacer una
estructura de marcado
de la información
mediante etiquetas.

¿Cómo se escriben las etiquetas?

Las “etiquetas” de
HTML, van rodeadas
por corchetes angulares,
cada etiqueta tiene unos
atributos y eso atributos
tiene unos valores.

¿Cómo se muestra una página Web?

HTML, es leído e
interpretado, por un
navegador la Web y
nos muestra el
contenido.

¿Qué es la semántica HTML?

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?

Por ejemplo:

∞ <p></p>
∞ <blockquote></blockquote>
∞ <h1></h1>

¿Qué es HTML5?

HTML5 es última la
actualización de HTML.

Pero en realidad, HTML5
agrupar varias tecnologías
de desarrollo de páginas
Web.

¿Por qué surge 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.


Flash ha sido usado para
reemplazar estas
carencias, a la hora de
desarrollar Web apps.


HTML5 es capaz de
hacer esto sin plugins y
ha originado:

∞ compatibilidad
∞ competencia


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.

¿Qué va a pasar con las Web en
HTML4?

HTML4 y HTML5 son
100% compatibles.

HTML4 seguirá funcionando sin problemas en los
navegadores.

¿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
∞ JavaScript


Podemos hacer 2
cosas a la hora de
generar y maquetar
una página Web.


1. Podemos escribir el
código de JavaScript
y CSS, dentro del
documento HTML.

Pero cómo tengas que hacer alguna
modif icación, busca esta pistola.


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ólo
las parte que deseamos.

¿Cómo se declara un documento
HTML5?

Para empezar a usar
HTML5, lo único que se
tiene que hacer es colocar el
DOCTYPE, al principio del
documento.

HTML5?

Ejemplo:

<!DOCTYPE html>

La declaración está mucho
más simplificada con HTML5.

XHTML?
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtm
l1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1
999/xhtml" xml:lang="es"
lang="es" dir="ltr">

¿Qué etiquetas se usan para
maquetar en 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.

<header>

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.

<hgroup>

Muchos header necesitan
múltiples encabezados.

Por ejemplo:

Blog que tiene un título
del nombre y el lema.

<hgroup>

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.

<nav>

Está diseñada para
insertar la barra de
navegación.

Es recomendable usar listas
(<ul>). Es aconsejable que
sólo haya un elemento
<nav> por página Web.

<section >

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.

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

<aside>

El contenido que no esté
relacionado con el objetivo
primario de la página va en
un aside.

<aside>

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.

<footer>

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.

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

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

Atención : div no está muerto

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.

¿Qué herramientas usaremos?

Generadores de Código HTML5

http://switchtohtml5.com/

http://www.initializr.com/


Generadores de Código HTML5

http://reuze.me/

http://foundation.zurb.com/download.php


Generadores de Código CSS3

http://www.3dcsstext.com/

http://www.css3maker.com/

Maquetación web con html5

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Maquetación web con html5

Similar a Maquetación web con html5 (20)

Más de Antonio Cruz Gómez

Más de Antonio Cruz Gómez (7)

Último

Último (20)

Maquetación web con html5