Académique Documents
Professionnel Documents
Culture Documents
Delimitando la introduccin
Ya hemos definido una nueva seccin en el documento mediante la etiqueta section.
Ahora slo necesitamos algo de contenido.
<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>
Aadimos un id a la etiqueta section para que la podamos identificar ms tarde cuando
llevemos a cabo el estilamiento. Utilizamos la etiqueta header para envolver todo lo
que se encuentra alrededor del elemento introductorio h2. Adems de describir un
documento entero, la etiqueta header tambin debera usarse para describir las
secciones individuales.
Delimitando el rea de contenido principal
Nuestra rea de contenido principal consiste de tres secciones: los posts del blog, los
comentarios y el formulario de comentarios. Utilizando nuestros conocimientos sobre
las nuevas etiquetas estructurales de HTML 5, debera ser fcil escribir el codigo.
Delimitando el post del Blog
Miremos el cddigo y luego explicaremos los elementos:
<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 seccin y envolvemos todo el post del blog en una etiqueta
article. La etiqueta article se usa para denotar una entrada independiente en un blog,
discusin, enciclopedia, etc. y es ideal para usarla aqu. Dado que estamos viendo los
detalles de un slo post, slo tenemos un artculo, pero en la pgina principal del blog
envolveremos cada post en una etiqueta article.
El elemento header es utilizado para presentar la cabecera y la informacin meta sobre
el post. Le informamos a los usuarios cundo fue escrito el post, quin lo escribi y
cuantos comentarios tiene. La estampilla de tiempo est dentro de una etiqueta. sta
tambin es nueva en HTML 5 y se usa para sealar un momento especfico de tiempo.
Los contenidos del atributo datetime deberan ser:
}
Le damos a las dos imgenes de fondo dimensiones explcitas para asegurarnos que no
se sobrepongan, y listo.
Dndole estilo al rea de contenido y a la sidebar
El rea de contenido y la sidebar sern alineadas una al lado de la otra.
Tradicionalmente, haramos esto mediante floats, pero en CSS lo haremos con tablas.
En CSS 3 podemos hacer que los elementos se comporten como tablas sin que esto se
note en el cdigo. Para comenzar, necesitaremos algunos divs para agrupar las
secciones de una forma un poco ms lgica.
<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 semnticamente, 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:
#content {
display: table;
}
#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
}
aside {
display: table-cell;
width: 300px;
}
Y eso es todo!
Dndole estilo al post del blog
Darle estilo al ttulo del post es bastante trivial, as que pasaremos directamente a la
parte divertida: el diseo de columnas mltiples.
Columnas mltiples
Las columnas mltiples de texto antes eran imposibles a menos que se separara el
texto de forma manual, pero con CSS 3 es muy fcil. Aunque tendremos que aadir un
div alrededor de los prrafos multiples para que funcione en los navegadores actuales.
<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:
.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 slo:
.blogPost {
column-count: 2;
column-gap: 22px;
}
.blogPost header {
column-span: all;
}
Por supuesto las propiedades column-count y column-gap son soportados slo por
algunos navegadores, Safari and Firefox. As que por ahora debemos utilizar la
propiedad vendor-specific.
.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;
}
Los primeros 3px le indican al navegador dnde queremos que la sombra pare
horizontalmente. Los segundos 3px le dicen dnde queremos que pare verticalmente.
Los ltimos 7px indican cuan borroso debera ser el borde. Si lo programas en 0
ser completamente slido. 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 todava no haya sido implementada en
todos los navegadores. De hecho, slo funciona en Firefox 3 y Safari (aunque quizs
tambin lo haga en Chrome, dado que ambos usan el motor Webkit). En ambos casos
deberemos usar la propiedad vendor-specific.
Para Safari y Chrome:
.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;
}
Artculos relacionados
o CSS: Selectores Calificados
o BlogBackupr, realiza una copia de seguridad de tu blog
o Wordpress: 30 plugins recomendados para tu sidebar
o Web 2.0 Expo New York: Preprate para lo que viene
Comentarios (30)
1. Joseba dice:
Sbado, 1 de agosto de 2009 a las 09.14
nos va a tener que tocar estudiar ahora de nuevo? igual espero a que los editores de
web dreamweaver se actualizen a esta nueva version de html.
2. Slvia dice:
Sbado, 1 de agosto de 2009 a las 12.37
3. Fede dice:
Lunes, 3 de agosto de 2009 a las 14.52
Excelente explicacion, todo indica que el HTML5 + Css3 sera una bendicion!!!
Lamentablemente, mientras la mayor cantidad de usuarios siga estando anclado al
Iexplorer, tendremos que seguir perdiendo tiempo en arreglar nuestros maquetados
Super bueno, pero parece que la realidad no ha llegado, al menos IE8, que me interesa
no hay seas de compatibilidad, de que me sirve en Safari si el 80% de los usuiarios
son de IE.?
7. Wagner dice:
Lunes, 3 de agosto de 2009 a las 22.20
Muy bueno el tutorial, para personas como yo que todavia andamos un poco en las
nubes con esto de maquetar y disear una pagina web.
Me gustaria que incluyeran un curso taller como lo tienen de php, que se trate de
maquetar paginas con css y html
Gracias por el tutorial y sigan asi.
8. Jassiel dice:
Martes, 4 de agosto de 2009 a las 00.48
9. LockoGeek dice:
Martes, 4 de agosto de 2009 a las 02.00
Muy buenos tips! Es impresionante ver como la nueva version de CSS fcilita en gran
medida la aplicacin del diseo. Esperemos ver que tan pronto los cibernautas adoptan
versiones nuevas de navegador para gozar de CSS3.
gracias por el tutorial pues me parese bastante interesante ya que nos ayuda a
prepararnos para las nuevas versiones me parese exelente saludos
Estas herramientas son muy importantes para mi rapida creacin de mi sitio, ya que
me tienen una gua muy explicita de la herramient..Gracias
Buenos Das
primero que todo lo felicito por el excelente aporte que nos mantiene actualizado
quisiera preguntarle cmo hago para paginar una web hecha en HTML cinco sin usar
wordpress
aun no entiendo como poner un post en mi web, y los comentarios que he visto no me
han servico de mucho.
saludos
hola hmm pz si probais la nueva beta de internet explorer 9 ya incluye por primera vez
todos estos hermosos atributos que son css3 y html5 y pz no tardara tanto en la salir ya
la final de IE9 asi que a estudiar se ha dicho aunq yo sigo en el colegio pero esto es lo
que me gusta jajaj saludos excelente pagina y tutorial!!
15. Hector dice:
Mircoles, 27 de octubre de 2010 a las 17.00