Ir al contenido principal

¿Empezamos a crear páginas web en html5 y css3?

   Pues va siendo hora. El CSS3 ya está muy implementado en la mayoría de los navegadores. En cuanto a la implementación del HTML5 se está trabajando en ello. En algunos sitios he leído que la implementación ya debería estar realizada a fecha de hoy. En otros, que no lo estará hasta el 2014. En todo caso sería bueno ir conociéndolo e ir haciendo alguna "chapuza" con él, ya que, tiene una buena cantidad de nuevas etiquetas y, algunas, son un poco enrevesadas de entender.

   Yo estoy trabajando en una (para mi) llamada Las Edades de la Tierra.  En esta página voy a intentar usar el mayor número de las nuevas etiquetas HTML5 y de las nuevas facilidades que nos ofrece CSS3. Esta sólo se verá bien en los navegadores que están actualizados. Aviso que esta página puede que no se vea correctamente en el IE (Internet Explorer) ya que este es el navegador que más tarde implementa las novedades. También intentaré que se adapte al mayor número de pantallas y resoluciones.

   En otros posts iré explicando algunos de los códigos que voy insertando en la página. De momento, en éste post, sólo daré la estructura básica del HTML5 que es la siguiente:


<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8" />
<title>Título de la página</title>
<!-- Aquí los meta tag, links y scripts necesarios-->

</head>

<body>
<img id="imgback" src="imagen de fondo" alt="la tierra">

<header id="cabecera">
<!-- Aquí puede ir el título, logo, etc... de la página-->
</header>

<section>
<nav>
<article class="menu menuuno">
<hgroup>
<h2 class="titulo">Texto</h2>
<ul class="menu1">
<li><h2>texto</h2></li>
<div class="submenu">
<p>texto</p>
</div>
<li><h2>texto</h2></li>
<div class="submenu">
<p>texto</p>
</div>
</ul>
</hgroup>
</article>
</nav>
</section>

<aside id="enlaces">
<h2 style="text-align:center">Texto</h2>
texto
</aside>

<canvas id="migrafico">Tu navegador no soporta Canvas</canvas>

<footer itemscope itemtype="http://schema.org/Person">
<h2>Página diseñada y creada en HTML5 y CSS3 por <a href="http://construyendotuweb.blogspot.com.es/" itemprop="url" target="_blank"><span itemprop="name">Jose Luis Acebedo Parajón</span></a> en noviembre de 2012</h2>
<p>Email:<a href="mailto:acebedo.parajon@gmail.com" itemprop="email">acebedo.parajon@gmail.com</a></p>
</footer>

</body>
</html>

   El anterior código es un trozo de la página que os he comentado al comienzo del post.  

   Como podéis ver, el inicio de la página es más simple, basta con poner <!DOCTYPE html> y especificar el lenguaje en <html lang="es-ES">.

   Después tenemos una serie de etiquetas nuevas como <header>, <section>, <article>, <nav>, <hgroup>,  etc.... En este blog no voy a dar una descripción detallada de cada una de ellas. Aquí sólo insertaré algunos de los códigos de la página mencionada (Las Edades de la Tierra) y daré una breve explicación sobre ellos. Para estudiar y comprender más a fondo las nuevas etiquetas tenemos sitios como los siguientes:

-Como crear tu web.
-Desarrollo web.
-ibm.com.
-la webera.

   Y muchos más que podréis encontrar.

   Sólo decir que la pretendida función de estas nuevas etiquetas es la falicitar la tarea de los buscadores. Así, cuando encuentran, por ejemplo, la etiqueta <header> "saben" que dentro deberían encontrar la cabecera de la página osea, el logotipo, el título, descripción de la empresa o similares. También decir que estas etiquetas no formatean la página por si solas, es decir, no porque incluyas la etiqueta <header> esta se va a colocar por si sola en la cabecera de la página, es necesario ubicarlas, como siempre, mediante las reglas CSS.

Comentarios

Entradas populares de este blog

Leer un archivo XML con jQuery y javascript y modificar un HTML con su contenido

   Una manera muy interesante y fácil de modificar los textos de tu página web. Si, por ejemplo, tenemos una página donde cambiamos a menudo unas noticias que tenemos en el margen derecho, podríamos tener un código HTML como este:    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Manejar archivo XML</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="leerxml.js"></script> <link rel="stylesheet" href="estilos.css"> </head> <body> <h1>Titulo de la página</h1> <div id="derecha"> <div class="noticias"> <div class="prim

Recargar div con efecto de aparición suave (Fade In) en jQuery

  En este post continúo con el código que describí en el segundo post sobre cómo refrescar un div sin necesidad de refrescar toda la página, pero añadiéndole unas lineas para este se aparezca de forma suave. La página de ejemplo es http://www.talleresguadamia.com y el código es el que sigue: <script type="text/javascript"> $(document).ready(function(){    $("#contenido a").each(function(){       var href = $(this).attr("href");       $(this).attr({ href: "#"});       $(this).click(function(event){                  $("#contenido").css("display","none");          $("#contenido").load(href).fadeIn(700);        });    }); });; </script>   Podéis ver lo fácil que es. Hemos agregado sólo dos cosas:   - La linea  "$('#contenido').css('display','none')", que lo único que hace es cambiar la propiedad css "display" del div "#contenido&q

Código jQuery para ver una imagen al pasar el ratón sobre un enlace.

   Voy a explicar un código en jQuery , para que, al pasar el puntero del mouse sobre un enlace o, en este caso, sobre un texto cualquiera (sin necesidad de ser un enlace), se nos muestre una imagen cerca del enlace y que esta desaparezca al retirar el puntero del mouse (sin necesidad de hacer click sobre él). Podéis pensar que me estoy repitiendo con un anterior post. Casi que si. Pero la diferencia es que, en este caso, no sabemos donde estará situada la imagen. Es decir que, dependiendo de la situación de la pantalla donde esté el enlace o texto, allí se mostrará la imagen.    Vamos al grano. Primero el código en HTML:       <span class="enlace" title="hyneria.png">Hyneria</span>    Podéis ver que, en este caso, no se trata de un enlace. Le pongo el nombre de 'enlace' a la clase porque en el CSS le doy apariencia de enlace. Aquí lo importante es 'title' el cual contiene el nombre de la imagen que queremos mostrar (pod