40
MAQUETACIÓN WEB CON HTML5 Realizado por: Antonio Cruz Gómez https://www.facebook.com/antonio.cruzgomez.9 8 https://twitter.com/acruzgomez

Maquetación web con html5

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Maquetación web con html5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MAQUETACIÓN WEB CON HTML5

Ejemplo Gráfico del código de HTML5

Page 35: Maquetación web con html5

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

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

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

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

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

FIN