sábado, 3 de mayo de 2014

La plantilla ArchiteXture



Desde que se publicó HTML5, multitud de diseñadores web han creado plantillas de diseño de sitios web (en inglés, templates) que utilizan HTML5.


1. La fuente

Esta es la URL de la plantilla: http://freehtml5templates.com/architexture-html5-and-css3-template/. A partir de esta dirección podremos probarla en línea y descargar los archivos fuente.


2. El diseño del sitio web

Observe el diseño de esta plantilla, que como ve, es bastante sobrio.


Podemos distinguir fácilmente las cuatro "zonas" de visualización del sitio web:
  • el menú de navegación en la parte superior, 
  • el banner de presentación del sitio web, que contiene el nombre, un eslogan y un logotipo, 
  • la zona central, que muestra información general en el lado izquierdo y los artículos en la parte derecha, 
  • el pie de página, que contiene los vínculos, en la parte inferior.

3. La estructura general

La estructura general del sitio web refleja fielmente la presentación visual.

Tenemos una caja <div id="wrapper"> que sirve de contenedor general y que permite centrar el sitio web en la ventana del navegador.

Encontramos a continuación el elemento <nav>, que contiene el menú de navegación de la parte de arriba. El diseñador ha empleado correctamente el elemento <nav>, ya que lo ha usado para insertar el menú de navegación principal del sitio web.

La información general del sitio web se ha insertado en un elemento <header>. Resulta bastante acertado, ya que se trata de información general que se mostrará en todas las páginas del sitio web. Efectivamente, se trata de una cabecera de página de sitio web.

La zona central del sitio web es un elemento <section>. Una sección es una zona de visualización que reúne elementos con una temática similar. En el ejemplo se trata, simplemente, de mostrar esos elementos en la zona central de la página.

El pie de página es, lógicamente, un elemento <footer>.

Veamos la estructura de las cajas:


4. El código de la estructura

Veamos el código HTML5 de la estructura de este sitio web:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ArchiteXture</title>
<link rel="stylesheet" href="styles.css" type="text/css"
media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
media="print" />
<!--[if IE]><script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
</head>
<body>
<div id="wrapper">
<nav>
...
</nav>
<header>
...
</header>
<section id="main">
...
</section>
<footer>
...
</footer>
</div>
</body>
</html>


5. El menú de navegación

El menú de navegación (<nav>) contiene una caja <div> que incluye la clásica lista (<ul>) de vínculos.

Este es el código:

<nav><!-- top nav -->
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav><!-- end of top nav -->

La visualización del menú de navegación:



6. El banner de presentación

El banner de presentación (<header>) contiene una caja <div> con el logotipo, un título de nivel 1 (<h1>) y un párrafo.

Este es el código:

<header><!-- header -->
<div id="plandesign"><img src="images/plans.png" alt=""/></div>
<h1><a href="#">ArchiteXture</a></h1>
<p>Praesent libero...</p>
</header><!-- end of header -->

La visualización del banner de presentación:



7. La zona central

La zona central del sitio web se ha insertado en un elemento <section id="main">. Este contiene a su vez otra caja <section id="content"> para mostrar el contenido propiamente dicho del sitio web, los artículos de la parte derecha, y un elemento <aside id="sidebar"> para mostrar información general en la parte izquierda.

El elemento <section id="content"> contiene, lógicamente, los elementos <article> para los distintos artículos del sitio web. Cada artículo contiene títulos <h2> y párrafos <p>.

El elemento <aside> contiene diversos elementos: títulos <h3>, listas <ul> e imágenes <img>.

Esta es la estructura de las cajas:


Veamos el código de la zona central:

<section id="main"><!-- #main content and sidebar area -->
<section id="content"><!-- #content -->
<article>
<h2><a href="#">First Article Title</a></h2>
<p>Lorem ipsum dolor...</p>
</article>
<article>
<h2><a href="#">Second Article Title</a></h2>
<p>Lorem ipsum...</p>
</article>
</section><!-- end of #content -->
<aside id="sidebar"><!-- sidebar -->
<h3>Things To Do</h3>
<ul>
<li><a href="#">Play Games and Network</a></li>
<li><a href="#">Chat With Friends</a></li>
</ul>
<h3>Sponsors</h3>
<img src="images/ad125.jpg" alt="" />
<img src="images/ad125.jpg" alt="" /><br />
<h3>Connect With Us</h3>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</aside><!-- end of sidebar -->
</section>

Así se presenta la zona central, <section id="main">:



8. El pie de página

El pie de página utiliza el elemento <footer>. Este contiene dos cajas <div> para obtener el diseño deseado. Dentro de la segunda caja <div> encontramos cuatro elementos <aside>, que corresponden a las cuatro zonas de visualización.

Este es el código:

<footer>
<section id="footer-area">
<section id="footer-outer-block">
<aside class="footer-segment">
<h4>Friends</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
</ul>
</aside><!-- end of #first footer segment -->
<aside class="footer-segment">
...
</aside><!-- end of #second footer segment -->
<aside class="footer-segment">
...
</aside><!-- end of #third footer segment -->
<aside class="footer-segment">
...
</aside><!-- end of #fourth footer segment -->
</section><!-- end of footer-outer-block -->
</section><!-- end of footer-area -->
</footer>


Y el diseño obtenido:




Espero haber ayudado en algo. Hasta la próxima oportunidad!




No hay comentarios:

Publicar un comentario en la entrada