Html5 y Css3

HTML5 y CSS3: tcnicas y tips para
crear un blog de vanguardia
En esta nota vamos a contarte como construir un blog utilizando

las tcnicas de la prxima generacin, mediante HTML 5 y CSS3, para estar
siempre actualizado y listo para recibir a las nuevas tendencias.
Paso por paso explicaremos cmo construir cada uno de los sitios una vez que
hayan sido finalizadas las especificaciones y todos los
navegadores hayan implementado los cambios.
Lo que vamos a construir
As lucir nuestra pgina al terminarla:
Algo bastante similar al diseo de tu blog de cada da. Cabecera con ttulo, navegacin
horizontal, rea de contenido con comentarios y formulario, sidebar y pie de pgina.
Nada demasiado sofisticado. Comencemos a construrla.
HTML 5
HTML 5 es la siguiente versin mejorada de HTML. Posee una gran cantidad de
elementos nuevos que hacen que nuestra pgina sea ms semntica. Esto facilita el
trabajo de los motores de bsqueda y los lectores de pantalla al navegar nuestras
pginas, y mejoran la experiencia web de todos. Adems, HTML 5 tambin incluye
muy buenas APIs para dibujar grficos en la pantalla, almacenar informacin offline,
dragging and dropping, y mucho ms.
Estructura bsica
Antes de comenzar deberamos tener la estructura bsica:
En HTML 5 existen etiquetas especficas para delimitar la cabecera, el ttulo, la

navegacin, la sidebar y el pie de pgina. Primero echmosle un vistazo al cdigo y
luego lo explicamos:
<!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>
Todava luce como cdigo HTML, pero hay algunas cosas que debemos notar:
* En HTML 5, existe un slo doctype. Est declarado al comienzo de la pgina
mediante <!doctype html>. Y simplemente le informa al navegador que est lidiando
con un documento HTML.
* La nueva etiqueta de ttulo est envuelta en elementos introductorios, tales como el
ttulo de la pgina o un logo. Cada cabecera tpicamente contiene una etiqueta heading
de <h1> a<h6>. En este caso la cabecera se utiliza para dar introduccin a la pgina
completa, pero luego la utilizaremos para introducir una seccin de la pgina.
* La etiqueta nav es utilizada para contener elementos navegacionales, tales como la
navegacin principal de un sitio o navegacin ms especializada como los links
anterior/siguiente.
* La etiqueta section es usada para denotar una seccin en el documento. Puede
contener todo tipo de cdigo y mltiples secciones pueden ser anidadas una dentro de
la otra.
*La etiqueta aside es utilizada para envolver contenido relacionado con el contenido
principal de la pgina, que podra ser separado del resto e igualmente tendra sentido.
En este caso, lo estamos utilizando para la sidebar.
* La etiqueta footer debera contener informacin adicional sobre el contenido
principal, como por ejemplo informacin del autor o del copyright, links a documentos
relacionados, etc.
En lugar de utilizar divs para contener las diferentes secciones de la pgina, ahora
estamos utilizando las etiquetas semnticas apropiadas.
Delimitando la navegacin
La navegacin es delimitada de la misma forma en que lo haramos en HTML 4 o
XHTML, utilizando una lista desordenada. La clave es que esta lista se ubica dentro de
las etiquetas nav.
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 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:
1. El ao seguido por un guin del medio (-)

2. El mes seguido por un guin del medio (-)
3. La fecha
4. Una T mayscula que denota que especificaremos el tiempo local
5. El tiempo local en el formato: hh:mm:ss
6. La zona horaria relativa al GMT.
Delimitando los comentarios
Delimitar los comentarios es bastante directo. No se necesita usar etiquetas ni
atributos.
<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>
</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>
</article>
</section>
Delimitando el formulario de ingresa tu comentario

En HTML 5 se han introducido varias mejoras en lo que respecta a formularios. Ya no
tenemos que hacer la validacin del lado del cliente de los campos, mails requeridos,
etc, sino que el navegador se encarga de eso por nosotros.
<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 especifca que el usuario
debera ingresar una direccin de correo electrnica vlida y, URL que el usuario
debera ingresar una direccin de un sitio web vlida. 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 ningn valor.
Delimitando la Sidebar y el pie de pgina
El cdigo de la sidebar y el pie de pgina es extremadamente simple. Algunas secciones
con algo de contenido dentro, el aside apropieado y las etiquetas footer.
Puedes ver un ejemplo del cdigo final, sin estilo, en este enlace. Ahora pasemos al
estilo.
Dndo estilo con CSS3
CSS 3 est construido en base a los principios de estilo, selectores y cascada que ya
conocemos de la versin anterior de CSS. Pero aade muchas funcionalidades,
incluyendo nuevos selectores, pseudo-clases y propiedades. Y gracias a estas nuevas
funciones se vuelve mucho ms fcil programar nuestro diseo.
Programacin bsica
Para comenzar vamos a definir algunas reglas bsicas en lo que concierne a la
tipografa, el color de fondo de la pgina, etc. Reconocers todo esto de CSS 2.1
/* 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 cmo deberan dibujar esos elementos por defecto. Debemos decirles
esto hasta que el estndar 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
tamao de la fuente en pxeles y no en ems o %.
Una vez hecho esto, continuemos.
Dndole estilo a la navegacin
Es importante notar que el ancho del cuerpo ha sido definido como 940px y que fue
centrado. Nuestra barra de navegacin necesita hacer span en todo el ancho de la
ventana, por lo que tendremos que aplicar algunos estilos adicionales:
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 lmites del diseo:
nav ul {
margin: 0 auto;
width: 940px;
list-style: none;
}
Ahora definiremos algunos estilos adicionales para hacer que los tems de navegacin
luzcan ms bonitos y los alinearemos dependiendo de nuestro diseo.
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;
}
Dndole estilo a la introduccin

El cdigo de la introduccin es bastante simple: Una seccin con un titular y un
prrafo de texto. Sin embargo, usaremos algo de CSS 3 para hacerlo lucir ms
atractivo.
#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 poda hacer en CSS 2.1 sin cdigo no-semntico 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 slo
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.
#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 funcin background-size, como Firefox por ejemplo.
Ahora slo debemos darle estilo al titular y al texto.
#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 aadirse fcilmente dndole a #intro una segunda imagen
de fondo, algo que CSS 3 nos permite realizar.
#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 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;
}
Sombra de caja (box-shadow)

Si miras con atencin la imagen del post notars una drop-shadow. Podemos generar
esto mediante CSS 3 y la propiedad box-shadow.
.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}
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;
}
Realizar Zebra-striping en los comentarios

Zebra-striping, o resaltar cada segundo elemento de una serie (como las rayas
intercaladas de una cebra), ha involucrado tradicionalmente la seleccin de todos los
elementos por medio de javascript, luego el loopeo a travs de ellos y finalmente el
resaltado de todos los elementos impares. CSS 3 introduce la pseudo-clase nth-child,
que nos permite llevar a cabo esta funcin de forma increblemente fcil sin necesidad
de javascript. Lo usaremos para hacer zebra-stripe sobre los comentarios.
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:
2n selecciona cada segundo tem. Si escribes 3n seleccionar cada tercer tem, 4n
cada cuarto tem, y as sucesivamente.
El +1 le dice al navegador que empiece en el elemento 1. En la programacin
todas las series comienzan en 0, por lo que el elemento 1 es en verdad el segundo
de la serie.
Alternativamente, podras slo escribir:
section#comments article:nth-child(odd) { }
Dado que el estndar incluye los dos valores ms usados como taquigrafa, par e impar.
El resto del estilado de comentarios debera ser fcil de comprender con nuestros
nuevos conocimientos.
Dndole estilo al formulario de comentario, el pie de pgina y
la Sidebar
Deberemos reutilizar algunas de las tcnicas de CSS3 aprendidas para dar estilo al
formulario de nuevo comentario, al footer y a la sidebar. En el formulario de
comentario y el footer, usaremos el mismo tipo de estilo de tabla que en el diseo
principal. En la sidebar, en cambio, utilizaremos border-radius para agregar esquinas
redondeadas a las diferentes secciones.
El diseo final
Aqu puedes ver el diseo final con todo el estilo ya aplicado.
Compatibilidad
La pgina se ver correctamente en Safari 4 y en los nuevos navegadores basados en
webkit, porque son los nicos motores que soportan todas las tcnicas CSS3 que hemos
utilizado. Firefox 3 tiene algunos problemas al aplicar las esquinas redondeadas y no
soporta background-size, pero ms all de eso el diseo funciona. Tambin podras
definir algunas reglas ms y hacer que todo funcione en los mayores navegadores, pero
eso excede nuestro tutorial.
Conclusin
Una vez que HTML 5 y CSS 3 sean implementados en todos los navegadores ser mil
veces ms sencillo construir un sitio web de lo que ya es. Finalmente podremos dejar
de utilizar floats para los diseos y pasaremos un tiempo considerablemente menor
escribiendo javascript para poder escalar nuestras imgenes de fondo o hacer zebra-
stripe en nuestras tablas. Esperemos que esto suceda rpido!
Fuente: Net Tuts +
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
Hola compaero de Bitcoras!

Una completa gua. Lo veo un poco complicado pese a tu buena explicacin (soy algo
novata en estos temas).
Saludos
slvia
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
al gusto del MSIE.
4. Juan Miguel Gonzalez Garcia dice:

Un excelente artculo, yo soy instructor de computacin y con este ejemplo puedo

realizar ideas novedosas para mis alumnos. Muchas gracias por este aporte.
P.S. Excelente Sitio, sigan as.
5. Adrian Faundez dice:

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.?
6. Jos Manuel dice:

interesante un buen trabajo

saludos.
7. Wagner dice:
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
Buen articulo, en verdad seria ms sencillo programar pginas as y resultaria quizas

tambien ms barato para los servidores, ya q yo hago el zebra stripping del lado sel
servidor XD
aun no estoy seguro de implementarlo
pero el tiempo y los navegadores lo dirn XD
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.
10. neyllyn salvador dice:

Mircoles, 5 de agosto de 2009 a las 22.25
gracias por el tutorial pues me parese bastante interesante ya que nos ayuda a
prepararnos para las nuevas versiones me parese exelente saludos
11. Ariel Contreras dice:

Estas herramientas son muy importantes para mi rapida creacin de mi sitio, ya que
me tienen una gua muy explicita de la herramient..Gracias
12. Artenuata dice:

Domingo, 11 de octubre de 2009 a las 16.10
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
13. Eduardo rangel dice:

Jueves, 13 de mayo de 2010 a las 15.45
aun no entiendo como poner un post en mi web, y los comentarios que he visto no me
han servico de mucho.
saludos
14. Alexander dice:

Mircoles, 22 de septiembre de 2010 a las 15.30
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
Muy bueno para iniciar en html5
16. Crea tu blog en 20segundos dice:

Martes, 2 de noviembre de 2010 a las 04.44
la verdad que es muy interesante este aporte,muy interesante gracias,juanjose
17. PGesta dice:

Martes, 18 de enero de 2011 a las 09.15
Aadiendo el siguiente cdigo en la seccin HEAD mejora la compatibilidad con IE :

document.createElement(nav);
document.createElement(header);
document.createElement(footer);
document.createElement(section);
document.createElement(aside);
document.createElement(article);
18. HTML5 y CSS3: tcnicas y tips para crear un blog de

vanguardia Kg3n_t0d0L_CSS dice:
Viernes, 18 de febrero de 2011 a las 09.4

Html5 y Css3

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Html5 y Css3

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML5 y CSS3: tcnicas y tips para

crear un blog de vanguardia

En esta nota vamos a contarte como construir un blog utilizando

En HTML 5 existen etiquetas especficas para delimitar la cabecera, el ttulo, la

1. El ao seguido por un guin del medio (-)

Delimitando el formulario de ingresa tu comentario

Dndole estilo a la introduccin

La segunda propiedad nueva es border-radius, que aplica esquinas redondeadas al

Desafortunadamente, ninguna de las propiedades son implementadas por completo en

/* Background-size not implemented yet */

background: #467612 url(intro_background.png) top left (287px 100%) repeat-x,

Sombra de caja (box-shadow)

Realizar Zebra-striping en los comentarios

Hola compaero de Bitcoras!

al gusto del MSIE.

4. Juan Miguel Gonzalez Garcia dice:

Un excelente artculo, yo soy instructor de computacin y con este ejemplo puedo

5. Adrian Faundez dice:

6. Jos Manuel dice:

interesante un buen trabajo

Buen articulo, en verdad seria ms sencillo programar pginas as y resultaria quizas

10. neyllyn salvador dice:

11. Ariel Contreras dice:

12. Artenuata dice:

13. Eduardo rangel dice:

14. Alexander dice:

Muy bueno para iniciar en html5

16. Crea tu blog en 20segundos dice:

la verdad que es muy interesante este aporte,muy interesante gracias,juanjose

17. PGesta dice:

Aadiendo el siguiente cdigo en la seccin HEAD mejora la compatibilidad con IE :

18. HTML5 y CSS3: tcnicas y tips para crear un blog de

Anda mungkin juga menyukai