|
Foro uCoz Ayuda a los webmasters Configuración del diseño Crear un blog duro (para los "cabezones") |
Crear un blog duro
|
HTML5 y CSS3: técnicas y tips para crear un blog de vanguardia En esta nota vamos a contarte como construir un blog utilizando las técnicas de la próxima generación, mediante HTML 5 y CSS3, para estar siempre actualizado y listo para recibir a las nuevas tendencias. Lo que vamos a construir Algo bastante similar al diseño de tu blog de cada día. Cabecera con título, navegación horizontal, área de contenido con comentarios y formulario, sidebar y pie de página. Nada demasiado sofisticado. Comencemos a construirla. HTML 5 Estructura básica En HTML 5 existen etiquetas específicas para delimitar la cabecera, el título, la navegación, la sidebar y el pie de página. Primero echémosle un vistazo al código y luego lo explicamos:
Quote <!doctype html> <html> <head> <title>Page title</title> </head> <body> <header> <h1>Page title</h1> </header> <nav> <!– Navigation –> </nav> <section id=”intro”> <!– Introduction –> </section> <section> <!– Main content area –> </section> <aside> <!– Sidebar –> </aside> <footer> <!– Footer –> </footer> </body> </html> Todavía luce como código HTML, pero hay algunas cosas que debemos notar: En lugar de utilizar divs para contener las diferentes secciones de la página, ahora estamos utilizando las etiquetas semánticas apropiadas. Delimitando la navegación
Quote nav> <ul> <li><a href=”#”>Blog</a></li> <li><a href=”#”>About</a></li> <li><a href=”#”>Archives</a></li> <li><a href=”#”>Contact</a></li> <li class=”subscribe”><a href=”#”>Subscribe via. RSS</a></li> </ul> </nav> Delimitando la introducción
Quote <section id=”intro”> <header> <h2>Do you love flowers as much as we do?</h2> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> </section> Añadimos un id a la etiqueta section para que la podamos identificar más tarde cuando llevemos a cabo el estilamiento. Utilizamos la etiqueta header para envolver todo lo que se encuentra alrededor del elemento introductorio h2. Además de describir un documento entero, la etiqueta header también debería usarse para describir las secciones individuales. Delimitando el área de contenido principal Delimitando el post del Blog
Quote <section> <article class=”blogPost”> <header> <h2>This is the title of a blog post</h2> <p>Posted on <time datetime=”2009-06-29T23:31:45+01:00″>June 29th 2009</time> by <a href=”#”>Mads Kjaer</a> - <a href=”#comments”>3 comments</a></p> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio…</p> </article> </section> Comenzamos una nueva sección y envolvemos todo el post del blog en una etiqueta article. La etiqueta article se usa para denotar una entrada independiente en un blog, discusión, enciclopedia, etc. y es ideal para usarla aquí. Dado que estamos viendo los detalles de un sólo post, sólo tenemos un artículo, pero en la página principal del blog envolveremos cada post en una etiqueta article. El elemento header es utilizado para presentar la cabecera y la información meta sobre el post. Le informamos a los usuarios cuándo fue escrito el post, quién lo escribió y cuantos comentarios tiene. La estampilla de tiempo está dentro de una etiqueta. Ésta también es nueva en HTML 5 y se usa para señalar un momento específico de tiempo. Los contenidos del atributo datetime deberían ser: 1. El año seguido por un guión del medio (-) Delimitando los comentarios
Quote <section id=”comments”> <header> <h3>Comments</h3> </header> <article> <header> <a href=”#”>George Washington</a> on <time datetime=”2009-06-29T23:35:20+01:00″>June 29th 2009 at 23:35</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> </article> <article> <header> <a href=”#”>Benjamin Franklin</a> on <time datetime=”2009-06-29T23:40:09+01:00″>June 29th 2009 at 23:40</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> </article> </section> Delimitando el formulario de “ingresa tu comentario”
Quote <form action=”#” method=”post”> <h3>Post a comment</h3> <p> <label for=”name”>Name</label> <input name=”name” id=”name” type=”text” required /> </p> <p> <label for=”email”>E-mail</label> <input name=”email” id=”email” type=”email” required /> </p> <p> <label for=”website”>Website</label> <input name=”website” id=”website” type=”url” /> </p> <p> <label for=”comment”>Comment</label> <textarea name=”comment” id=”comment” required></textarea> </p> <p><input type=”submit” value=”Post comment” /></p> </form> Ahora hay dos tipos nuevos de entradas: e-mail y URL. E-mail especifíca que el usuario debería ingresar una dirección de correo electrónica válida y, URL que el usuario debería ingresar una dirección de un sitio web válida. Si escribes required como atributo, el usuario no puede enviar un campo incompleto. “Required” es un atributo booleano, nuevo para HTML 5. Esto quiere decir que el atributo no se puede declarar sin ningún valor. Delimitando la Sidebar y el pie de página Puedes ver un ejemplo del código final, sin estilo, en este enlace. Ahora pasemos al estilo. Dándo estilo con CSS3 Programación básica
Quote /* Reseteamos los estilos de margin y padding */ { margin: 0; padding: 0; } /* Le dice al navegador que dibuje los elementos de HTML 5 como block */ header, footer, aside, nav, article { display: block; } body { margin: 0 auto; width: 940px; font: 13px/22px Helvetica, Arial, sans-serif; background: #f0f0f0; } h2 { font-size: 28px; line-height: 44px; padding: 22px 0; } h3 { font-size: 18px; line-height: 22px; padding: 11px 0; } p { padding-bottom: 22px; } Primero, reseteamos los estilos de margen y padding con una regla simple. Con esto bastará. Luego le decimos al navegador que dibuje todos los nuevos elementos HTML 5 como un bloque. Los navegadores no tienen problemas con los elementos que no reconocen, pero no saben cómo deberían dibujar esos elementos por defecto. Debemos decirles esto hasta que el estándar sea implementado en todos lados. Hasta que los navegadores implementen por completo HTML 5 y CSS 3 necesitaremos definir los valores en unidades relativas, por lo que es conveniente seleccionar el tamaño de la fuente en píxeles y no en ems o %. Una vez hecho esto, continuemos. Dándole estilo a la navegación
Quote nav { position: absolute; left: 0; width: 100%; background: url(”nav_background”); } Posicionamos el elemento nav de forma absoluta, lo alineamos a la izquierda de la ventana y hacemos que haga span en todo el ancho. Centraremos la lista anidada para mostrarla dentro de los límites del diseño:
Quote nav ul { margin: 0 auto; width: 940px; list-style: none; } Ahora definiremos algunos estilos adicionales para hacer que los ítems de navegación luzcan más bonitos y los alinearemos dependiendo de nuestro diseño.
Quote nav ul li { float: left; } nav ul li a { display: block; margin-right: 20px; width: 140px; font-size: 14px; line-height: 44px; text-align: center; text-decoration: none; color: #777; } nav ul li a:hover { color: #fff; } nav ul li.selected a { color: #fff; } nav ul li.subscribe a { margin-left: 22px; padding-left: 33px; text-align: left; background: url(”rss.png”) left center no-repeat; } Dándole estilo a la introducción
Quote #intro { margin-top: 66px; padding: 44px; background: #467612 url(”intro_background.png”) repeat-x; background-size: 100%; border-radius: 22px; } Estamos utilizando dos propiedades nuevas. La primera es background-size, que nos permite scalar la imagen de fondo. En nuestro caso, la escalamos al 100% en ambos ejes. Esto es algo que no se podía hacer en CSS 2.1 sin código no-semántico y sin tener varios problemas con el navegador.
La segunda propiedad nueva es border-radius, que aplica esquinas redondeadas al elemento. Puedes especificar valores diferentes para cada esquina o seleccionar sólo algunas esquinas redondeadas.
Desafortunadamente, ninguna de las propiedades son implementadas por completo en los navegadores. Pero a pesar de esto, podemos obtener algo de soporte utilizando atributos vendor-specific. Background-size es soportado por las nuevas versiones de Safari, Opera y Konqueror. Y border-radius es soportado por las nuevas versiones de Safari y Firefox.
Quote #intro { … /* Background-size not implemented yet */ -webkit-background-size: 100%; -o-background-size: 100%; -khtml-background-size: 100%; /* Border-radius not implemented yet */ -moz-border-radius: 22px; -webkit-border-radius: 22px; } Dado que tenemos un color de fondo definido, no habrá problemas mayores en los navegadores que no soporten la función background-size, como Firefox por ejemplo. Ahora sólo debemos darle estilo al titular y al texto.
Quote #intro h2, #intro p¬†{ width: 336px; } #intro h2 { padding: 0 0 22px 0; font-weight: normal color: #fff; } #intro p { padding: 0; color: #d9f499; } La imagen de la flor puede añadirse fácilmente dándole a #intro una segunda imagen de fondo, algo que CSS 3 nos permite realizar.
Quote #intro { … background: #467612 url(”intro_background.png”) top left (287px 100%) repeat-x, url(”intro_flower.png”) top right (653px 100%) no-repeat; … } Le damos a las dos imágenes de fondo dimensiones explícitas para asegurarnos que no se sobrepongan, y listo.
Dándole estilo al área de contenido y a la sidebar En CSS 3 podemos hacer que los elementos se comporten como tablas sin que esto se note en el código. Para comenzar, necesitaremos algunos divs para agrupar las secciones de una forma un poco más lógica.
Quote <div id=”content”> <div id=”mainContent”> <section> <!– Blog post –> </section> <section id=”comments”> <!– Comments –> </section> <form> <!– Comment form –> </form> </div> <aside> <!– Sidebar –> </aside> </div> Todo sigue teniendo sentido semánticamente, pero ahora puedes darle estilo. Queremos que el div #content se comporte como una tabla, con #mainContent y aside como celdas de la tabla. Mediante CSS 3, esto es sencillo:
Quote #content { display: table; } #mainContent { display: table-cell; width: 620px; padding-right: 22px; } aside { display: table-cell; width: 300px; } ¡Y eso es todo! Dándole estilo al post del blog Columnas múltiples
Quote <div> <p>Lorem ipsum dolor sit amet…</p> <p>Pellentesque ut sapien arcu…</p> <p>Vivamus vitae nulla dolor…</p> … </div> Ahora podemos agregar dos propiedades simples:
Quote .blogPost div { column-count: 2; column-gap: 22px; } Deseamos dos columnas y un espacio de 22px entre ellas. El div adicional se necesita porque actualmente no hay una forma soportada de hacer que un elemento tenga un span mayor que una columna. En el futuro, sin embargo, podremos especificar la propiedad span de la columna, y podremos escribir sólo:
Quote .blogPost { column-count: 2; column-gap: 22px; } .blogPost header { column-span: all; } Por supuesto las propiedades column-count y column-gap son soportados sólo por algunos navegadores, Safari and Firefox. Así que por ahora debemos utilizar la propiedad vendor-specific.
Quote .blogPost div { /* Column-count not implemented yet */ -moz-column-count: 2; -webkit-column-count: 2; /* Column-gap not implemented yet */ -moz-column-gap: 22px; -webkit-column-gap: 22px; } Sombra de caja (box-shadow)
Quote .blogPost img { margin: 22px 0; box-shadow: 3px 3px 7px #777; }
Los primeros “3px” le indican al navegador dónde queremos que la sombra pare horizontalmente. Los segundos “3px” le dicen dónde queremos que pare verticalmente. Los últimos “7px” indican cuan borroso debería ser el borde. Si lo programas en “0″ será completamente sólido. Por último, definimos el color base de la sombra. El color se verá desvanecido por supuesto, dependiendo de cuanta borrosidad y sombra hayamos seleccionado. No resulta sorprendente que esta propiedad todavía no haya sido implementada en todos los navegadores. De hecho, sólo funciona en Firefox 3 y Safari (aunque quizás también lo haga en Chrome, dado que ambos usan el motor Webkit). En ambos casos deberemos usar la propiedad vendor-specific. Para Safari y Chrome:
Quote .blogPost img { margin: 22px 0; -webkit-box-shadow: 3px 3px 7px #777; } Para Firefox 3: .blogPost img { margin: 22px 0; -moz-box-shadow: 3px 3px 7px #777; } Realizar Zebra-striping en los comentarios
Quote section#comments article:nth-child(2n+1) { padding: 21px; background: #E3E3E3; border: 1px solid #d7d7d7; /* Border-radius not implemented yet */ -moz-border-radius: 11px; -webkit-border-radius: 11px; } EL valor raro “2n+1″ es en verdad bastante simple si entiendes lo que quiere decir:
Quote section#comments article:nth-child(odd) { … } Dado que el estándar incluye los dos valores más usados como taquigrafía, par e impar. El resto del estilado de comentarios debería ser fácil de comprender con nuestros nuevos conocimientos. Dándole estilo al formulario de comentario, el pie de página y la Sidebar El diseño final Compatibilidad Conclusión Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
| |||
| |||