Diseño de Paginas HTML5 PDF

HTML 5
Por: Ing. Edwin Calle Terrazas

Diseo de Pginas Web
Uagrm Ingeniera de Sistemas Tecnologa Web
El HTML5 (HyperText Markup Language, versin 5) es la quinta
revisin del lenguaje de programacin bsico de la World Wide
Web, el HTML.
Esta nueva versin pretende remplazar al actual (X)HTML,
corrigiendo problemas con los que los desarrolladores web se
encuentran, as como redisear el cdigo actualizndolo a nuevas
necesidades que demanda la web de hoy en da.
Introduccin
Estructura del cuerpo
Ultimadamente el elemento <div> comenz a dominar la escena. Con el
surgimiento de webs ms interactivas y la integracin de HTML, CSS y
Javascript, el uso de <div> se volvi una prctica comn en la ubicacin
de los elementos en la estructura de una pgina web. Pero este elemento,
as como <table> no provee demasiada informacin acerca de las parte
del cuerpo que est representando, las imgenes a mens, textos, enlaces,
cdigos, formularios u otra cualquier cosa puede ir entre las etiquetas de
apertura y cierre de un elemento <div>. En otras palabras, la palabra
clave div solo especifica divisiones en el cuerpo de una pgina, as como
las celdas de una tabla, pero no ofrece indicio alguno sobre qu clase de
divisin es, cul es su propsito en la estructura de una pgina o qu
contiene.
HTML5 incorpora nuevos elementos que ayudan a identificar cada
seccin del documento y organizar el cuerpo de una pgina. Las
secciones ms importantes son diferenciadas y la estructura
principal ya no depende ms de los elementos <div> o <table>
Normalmente una pgina o aplicacin web est dividida entre varias reas visuales
para mejorar la experiencia del usuario y facilitar la interactividad. Las palabras claves que
representan cada nuevo elemento de HTML5 estn ntimamente relacionadas con estas
reas
Representacin visual de la estructura de un clsico diseo web
La Cabecera, se encuentra el espacio donde usualmente se
ubica el logo, ttulo, subttulos y una corta descripcin del
sitio web o la pgina. La Barra de Navegacin donde casi
todos los desarrolladores ofrecen un men o lista de enlaces
con el propsito de facilitar la navegacin a travs del sitio.
El contenido ms importante de una pgina web se encuentra
ubicado en el centro. La mayora de las veces es dividida en
varias filas y columnas. En este ejemplo se utilizan solo dos
columnas: Informacin Principal y Barra Lateral, pero
esta seccin es flexible y normalmente diseadores la adaptan
acorde a sus necesidades insertando ms columnas, o
dividiendo cada columna entre bloques ms pequeos. El
contenido presentado en esta parte del diseo es usualmente
de alta prioridad. En Informacin Principal podra contener
una lista de artculos, descripcin de productos, entradas de
un blog o cualquier otra informacin importante. La Barra
Lateral podra mostrar una lista de enlaces apuntando hacia
cada algunos tems. En un blog, por ejemplo, esta ltima
columna ofrecer una lista de enlaces apuntando a cada
entrada del blog, informacin acerca del autor u otros, etc
A partir de ahora podemos decir al navegador para qu es cada seccin.
HTML5 considera esta estructura bsica y provee nuevos elementos para
diferenciar y declarar cada una de sus partes.
1. Cabecera 4. Barra Lateral
2. Barra de Navegacin 5. El pie o la barra Institucional
3. Seccin de Informacin Principal
No debe ser confundido con <head> usado para construir la cabecera del documento. Del
mismo modo que <head>, la intencin de <header> es proveer informacin introductoria
(ttulos, subttulos, logos), pero difiere con respecto a <head> en su alcance. Mientras que el
elemento <head> tiene el propsito de proveer informacin acerca de todo el documento,
<header> es usado solo para el cuerpo o secciones especficas dentro del cuerpo
Nuevos elementos
El elemento <nav> fue creado para ofrecer ayuda para la navegacin, como en mens
principales o grandes bloques de enlaces. <nav> se encuentra dentro de las etiquetas
<body> pero es ubicado despus de la etiqueta de cierre de la cabecera (</header>), no
dentro de las etiquetas <header>. Esto es porque <nav> no es parte de la cabecera sino una
nueva seccin. Un ejemplo de esta versatilidad es que el elemento <nav> podra ser
insertado dentro del elemento <header> o en cualquier otra parte del cuerpo. Sin embargo,
siempre se debe considerar que estas etiquetas fueron creadas para brindar informacin a los
navegadores.
<header> </header>
<nav> </nav>
Como explicamos anteriormente, la columna Informacin Principal contiene la
informacin ms relevante de la pgina. El elemento en html5 que especifica estas secciones
se llama simplemente <section>
<section> </section>
la Barra Lateral contendr una lista de enlaces. La informacin dentro de esta barra est
relacionada con la informacin principal pero no es relevante por s misma. Siguiendo el
mismo ejemplo podemos decir que las entradas del blog son relevantes pero los enlaces y las
pequeas reseas sobre esas entradas son solo una ayuda para la navegacin pero no lo que
al lector realmente le interesa. En html5 podemos diferenciar seccin secundaria de
informacin utilizando el elemento <aside>
<aside> </aside>
Ya contamos con la cabecera del cuerpo, secciones con ayuda para la navegacin,
informacin importante y hasta una barra lateral con datos adicionales, por lo tanto lo nico
que nos queda por hacer es cerrar nuestro diseo para otorgarle un final al cuerpo del
documento. Html5 provee un elemento especfico para este propsito llamado <footer>
El elemento <footer> representar el final del cuerpo de nuestro documento. Sin embargo,
<footer> puede ser usado mltiples veces dentro del cuerpo para representar tambin el final
de diferentes secciones (del mismo modo que la etiqueta <header>). Estudiaremos esta
ltima caracterstica ms adelante.
<footer> </footer>
<html>
<head> <title>Ttulo del documento</title> </head>
<body>
<header> <h1>TITULO DE LA PAGINA</h1> </header>
<nav>
<table border="2">
<tr><td> <a href="principal.html"> Principal </a> </td>
<td> <a href="fotos.html">Fotos</a> </td>
<td> <a href="videos.html">Videos </a> </td> </tr>
</table>
</nav>
<section>
Esta es la seccin de informacin principal
</section>
<aside>
<blockquote>informacion 1</blockquote>
<blockquote>informacion 2</blockquote>
<a href="enlace.html"> Es un enlace </a>
</aside>
<footer> Derechos Reservados Copy 2013-2014 </footer>
</body>
</html>
El elemento input adquiere gran relevancia al ampliarse los elementos
que se permiten en el type.
<input type="search"> cajas de bsqueda.
<input type="number"> para adicionar o restar nmeros mediante botones
<input type="range"> selecciona un valor entre dos valores predeterminados
<input type="color"> seleccionar un color
<input type="tel"> nmeros telefnicos
<input type="url"> direcciones web
<input type="email"> direcciones de email
<input type="date"> seleccionar un da en un calendario
<input type="month"> seleccionar un mes en un calendario
<input type="week"> para semanas.
<input type="time"> para fechas
<input type="datetime"> para una fecha exacta, absoluta y tiempo.
<input type="datetime-local"> para fechas locales y frecuencia.
Mejoras en los formularios
Ejemplo
<html>
<head> </head>
<body>
<form name="form1" method="post">
Caja de busqueda <input type="search"> <br>
Correo <input type="email"> <br>
Direccion URL<input type="url"> <br>
Selecciona color <input type="color"> <br>
Rango <input type="range"> <br>
Selecciona mes <input type="month"> <br>
Fecha <input type="date" name="d1"> <br>
Hora <input type="time"> <br>
</form>
</body>
</html>
Un cambio notable en la especificacin de HTML5 ya se puede ver en la primera lnea
de cualquier documento HTML. La lnea inicial de la mayora de los archivos HTML es
la que se llama DOCTYPE, que le indica al navegador el tipo de documento que tiene
que traducir. Ejemplo, cuando un diseador utiliza la versin transicional de HTML
(4.0.1), la declaracin DOCTYPE es:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Si utiliza la versin estricta de XHTML 1.0, la misma declaracin se queda en:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

En HTML5 la declaracin DOCTYPE es bastante ms sencilla:
<!DOCTYPE html>
DOCTYPE sirve para validar documentos. Los navegadores actuales y futuros pueden
comprobar la sintaxis de documentos que se declaran a s mismos como HTML.
Cualquier incorreccin sintctica (por ejemplo una etiqueta mal escrita o un atributo que
falta), devuelve un error. La validacin es un proceso opcional, pero los diseadores y
los desarrolladores lo utilizan mucho para detectar posibles fallos en el cdigo o
elementos que puedan faltar.

La declaracin DOCTYPE de HTML5
Puedes encontrar otros elementos nuevos que sirven para que la estructura interna de las
pginas se entienda mejor. Por ejemplo, los elementos <figure> y <figurecaption> nos
permiten identificar imgenes y sus rtulos dentro del contenido.
Los elementos <figure> y <figurecaption> de HTML5
<html>
<body>
<figure><img src="imagen.jpg" alt="Yo soy una imagen" /></figure>
</body> </html>
Este elemento est pensado para identificar o destacar ciertas partes de la pgina, como
imgenes, diagramas o grficos. Podemos adems emparejar la figura con un rtulo
aadiendo un elemento llamado <figcaption>.
<html>
<body>
<figure>
<img src="imagen.jpg" alt="Es una imagen" />
<figcaption> Este es mi rotulo</figcaption>
</figure>
</body> </html>
<html>
<head> <title>Ttulo del documento</title>

<script type="text/javascript">
function dibujar(){
var lienzo = document.getElementById('lienzo');
var lienzo1 = lienzo.getContext('2d');
lienzo1.fillStyle="rgb(0,0,200)";
lienzo1.fillRect(45,35,45,100);
}
</script>
</head>

<body onload="dibujar()">
<h1> Ejemplo de lienzo </h1>
<canvas id="lienzo" width="600" height="500">
</canvas>

</body>
</html>
Dibujo de un cuadro con relleno y color
<html>
function setup() {
var canvas = document.getElementById('lessonCanvas');
if (canvas.getContext) {
var c1 = canvas.getContext('2d');
c1.strokeRect(0, 0, 200, 200); //construimos un cuadrado sin relleno
c1.strokeStyle = "rgb(255, 0, 0)"; //construimos un cuadrado color rojo mas pequeo
c1.strokeRect(0.5, 0.5, 100, 100);
//construirmos un cuadrado que se posiciona en x=20, y=20 del mismo tamao q el anterior
c1.fillRect(20, 20, 100, 100);
//construimos un cuadrado q se posiciona en x=50 y=50 del tamao anterior de color verde
c1.fillStyle = "rgb(0, 255, 0)";
c1.fillRect(50, 50, 100, 100);
}
}
</script> </head>
<body onload="setup()">
<canvas id="lessonCanvas" width="300"height="300" style="margin:100px;"></canvas>

</body>
</html>
Dibujo de cuadros con relleno y color
Dibujo de un cuadro a travs de lneas
<html>
function setup() {
var canvas = document.getElementById('lessonCanvas');
if (canvas.getContext) {
var c1 = canvas.getContext('2d');
c1.moveTo(0, 0);
c1.lineTo(200, 0);
c1.lineTo(200, 200);
c1.lineTo(0, 200);
c1.lineTo(0, 0);
c1.stroke();
}
}
</script>
</head>
<body onload="setup()">
<canvas id="lessonCanvas" width="300"height="300" style="margin:100px;"></canvas>
</body> </html>

Diseño de Paginas HTML5 PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Diseño de Paginas HTML5 PDF

Загружено:

Авторское право:

Доступные форматы

HTML 5

Por: Ing. Edwin Calle Terrazas

Вам также может понравиться