Micaela 1 de agosto de 2009 a las 09.06
   Imprimir artículo
elWebmaster.com

HTML5 y CSS3: técnicas y tips para crear un blog de vanguardia


html5css3En 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.

Paso por paso explicaremos cómo 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 página al terminarla:

Diagram of basic structure

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 constru√≠rla.

HTML 5

HTML 5 es la siguiente versi√≥n mejorada de HTML. Posee una gran cantidad de elementos nuevos que hacen que nuestra p√°gina sea m√°s sem√°ntica. Esto facilita el trabajo de los motores de b√ļsqueda y los lectores de pantalla al navegar nuestras p√°ginas, y mejoran la experiencia web de todos. Adem√°s, HTML 5 tambi√©n incluye muy buenas APIs para dibujar gr√°ficos en la pantalla, almacenar informaci√≥n offline, dragging and dropping, y mucho m√°s.

Estructura b√°sica

Antes de comenzar deberíamos tener la estructura básica:

Diagram of basic structure

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:

<!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 HTML 5, existe un sólo doctype. Está declarado al comienzo de la página mediante <!doctype html>. Y simplemente le informa al navegador que está lidiando con un documento HTML.

* La nueva etiqueta de título está envuelta en elementos introductorios, tales como el título de la página o un logo. Cada cabecera típicamente contiene una etiqueta heading de <h1> a<h6>. En este caso la cabecera se utiliza para dar introducción a la página completa, pero luego la utilizaremos para introducir una sección de la página.

* La etiqueta nav es utilizada para contener elementos navegacionales, tales como la navegaci√≥n principal de un sitio o navegaci√≥n m√°s especializada como los links “anterior/siguiente”.

* La etiqueta section es usada para denotar una secci√≥n en el documento. Puede contener todo tipo de c√≥digo y m√ļltiples secciones pueden ser anidadas una dentro de la otra.

*La etiqueta aside es utilizada para envolver contenido relacionado con el contenido principal de la página, que podría ser separado del resto e igualmente tendría sentido. En este caso, lo estamos utilizando para la sidebar.

* La etiqueta footer debería contener información adicional sobre el contenido principal, como por ejemplo información del autor o del copyright, links a documentos relacionados, etc.

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

La navegación es delimitada de la misma forma en que lo haríamos 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 introducción

Ya hemos definido una nueva sección en el documento mediante la etiqueta section. Ahora sólo 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>

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

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, debería ser fácil escribir el cóodigo.

Delimitando el post del Blog

Miremos el códdigo 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 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:

Diagram describing use of the datetime HTML attribute

1. El a√Īo seguido por un gui√≥n del medio (-)

2.  El mes seguido por un guión del medio (-)

3. La fecha

4. Una T may√ļscula 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>
<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”

En HTML 5 se han introducido varias mejoras en lo que respecta a formularios. Ya no tenemos que hacer la validación 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 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

El código de la sidebar y el pie de página es extremadamente simple. Algunas secciones con algo de contenido dentro, el aside apropieado y las etiquetas footer.

Puedes ver un ejemplo del código final, sin estilo, en este enlace. Ahora pasemos al estilo.

D√°ndo estilo con CSS3

CSS 3 est√° construido en base a los principios de estilo, selectores y cascada que ya conocemos de la versi√≥n anterior de CSS. Pero a√Īade muchas funcionalidades, incluyendo nuevos selectores, pseudo-clases y propiedades. Y gracias a estas nuevas funciones se vuelve mucho m√°s f√°cil programar nuestro dise√Īo.

Programación básica

Para comenzar vamos a definir algunas reglas básicas en lo que concierne a la tipografía, el color de fondo de la página, etc. Reconocerás 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 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

Es importante notar que el ancho del cuerpo ha sido definido como 940px y que fue centrado. Nuestra barra de navegación 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 l√≠mites del dise√Īo:

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.

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

El código de la introducción es bastante simple: Una sección con un titular y un párrafo de texto. Sin embargo, usaremos algo de CSS 3 para hacerlo lucir más 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 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.

#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.

#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.

#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

El área de contenido y la sidebar serán alineadas una al lado de la otra. Tradicionalmente, haríamos 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 código. Para comenzar, necesitaremos algunos divs para agrupar las secciones de una forma un poco más lógica.

<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:

#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

Darle estilo al t√≠tulo del post es bastante trivial, as√≠ que pasaremos directamente a la parte divertida: el dise√Īo de columnas m√ļltiples.

Columnas m√ļltiples

Las columnas m√ļltiples de texto antes eran imposibles a menos que se separara el texto de forma manual, pero con CSS 3 es muy f√°cil. Aunque tendremos que a√Īadir un div alrededor de los p√°rrafos 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 sólo:

.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.

.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 atención la imagen del post notarás 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;
}

Illustration describing how the browsers render the box-shadow CSS property

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:

.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 selecci√≥n de todos los elementos por medio de javascript, luego el loopeo a trav√©s 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 funci√≥n de forma incre√≠blemente f√°cil 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 programaci√≥n todas las series comienzan en 0, por lo que el elemento 1 es en verdad el segundo de la serie.

Alternativamente, podrías sólo escribir:

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

Deberemos reutilizar algunas de las t√©cnicas 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 dise√Īo principal.¬† En la sidebar, en cambio, utilizaremos border-radius para agregar esquinas redondeadas a las diferentes secciones.

El dise√Īo final

Aqu√≠ puedes ver el dise√Īo final con todo el estilo ya aplicado.

Compatibilidad

La p√°gina se ver√° correctamente en Safari 4 y en los nuevos navegadores basados en webkit, porque son los √ļnicos motores que soportan todas las t√©cnicas CSS3 que hemos utilizado. Firefox 3 tiene algunos problemas al aplicar las esquinas redondeadas y no soporta background-size, pero m√°s all√° de eso el dise√Īo funciona. Tambi√©n podr√≠as definir algunas reglas m√°s y hacer que todo funcione en los mayores navegadores, pero eso excede nuestro tutorial.

Conclusión

Una vez que HTML 5 y CSS 3 sean implementados en todos los navegadores ser√° mil veces m√°s sencillo construir un sitio web de lo que ya es. Finalmente podremos dejar de utilizar floats para los dise√Īos y pasaremos un tiempo considerablemente menor escribiendo javascript para poder escalar nuestras im√°genes de fondo o hacer zebra-stripe en nuestras tablas. ¬°Esperemos que esto suceda r√°pido!

Fuente: Net Tuts +


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (30)

  1. Joseba dice:

    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. Sílvia dice:

    Hola compa√Īero de Bit√°coras!
    Una completa guía. Lo veo un poco complicado pese a tu buena explicación (soy algo novata en estos temas).
    Saludos
    sílvia

  3. Fede dice:

    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 artículo, yo soy instructor de computación 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 se√Īas 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 dise√Īar 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:

    Buen articulo, en verdad seria más sencillo programar páginas así y resultaria quizas tambien más 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 dir√°n XD

  9. LockoGeek dice:

    Muy buenos tips! Es impresionante ver como la nueva version de CSS f√°cilita en gran medida la aplicaci√≥n del dise√Īo. Esperemos ver que tan pronto los cibernautas adoptan versiones nuevas de navegador para gozar de CSS3.

  10. neyllyn salvador dice:

    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 creación de mi sitio, ya que me tienen una guía muy explicita de la herramient..Gracias

  12. Artenuata dice:

    Buenos Días
    primero que todo lo felicito por el excelente aporte que nos mantiene actualizado… quisiera preguntarle c√≥mo hago para paginar una web hecha en HTML cinco sin usar wordpress

  13. Eduardo rangel dice:

    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:

    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:

    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:

    A√Īadiendo el siguiente c√≥digo en la secci√≥n 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: t√©cnicas y tips para crear un blog de vanguardia « Kg√ę3n_t0d0L_CSS dice:

    […] HTML5 y CSS3: t√©cnicas y tips para crear un blog de vanguardia. […]

  19. Laura dice:

    Hola, muy interesante tu post. Reci√©n estoy empezando con html5 y despu√©s de leer tu publicaci√≥n me surgi√≥ una duda. Si quisiera poner un men√ļ al costado, usando el tag , ¬Ņc√≥mo deber√≠a hacer para que tenga el mismo alto que el #mainContent, es decir hacer que se comporte como el aside, en tu ejemplo? ¬Ņes posible?
    Saludos!

  20. Paco dice:

    Y para hacer un backoffice?? Por que como aremos opara ir publicando noticias en nuestro blogg sin un backoffice? aras un tuto?? Gracias…

  21. anisakis dice:

    Tío eres un fenómeno! Muy bien explicado!!

    Muchas gracias!!

  22. anisakis dice:

    Tío eres un fenómeno! Muy bien explicado!!

    Muchas gracias!!

  23. Luis dice:

    Realmente, estaba buscando un tutorial que me diera idea para actualizar mi sitio web.
    Sobre todo al usar CSS3, este tute es muy bueno y supongo luego de leerlo y entender lo que necesito actualizo mi sitio.
    Gracias

  24. juan dice:

    buena explicaci√≥n, pero ¬Ņcomo se publican los comentarios?

  25. juan2 dice:

    prueba de envio

  26. Humberto Villamizar dice:

    Hola, esta super interesante este articulo, pero alguien podria ayudarme con el codigo fuente o la manera para programar los post o comentarios, pues estoy desarrollando una p√°gina que requiere el envio de comentarios con la condicion de que sean posteados inmediatamente en la p√°gina. agradezco profundamente cualquier aporte

  27. Alberto dice:

    gracias por el artículo!

  28. fernando sosa dice:

    Por que dicen programar… nada de esto es programar… no se confundan :S

  29. Esteban dice:

    Excelente explicación pero tengo la dudad de como hacer que los comentarios de mi pagina sean vistos en tiempo real no se si me pueda ayudar alguien muchas gracias

  30. mati dice:

    hola….Aver si me pueden ayudar…es tan simple y tan dificil al mismo tiempo…
    tengo que hacer un peque√Īo formulario.
    pero lo que quiero es que cuando alguien lo complete por primera vez y haga clic sobre el botón, automáticamente el formulario se bloquee, y ya nadie más pueda escribirlo.
    Además, los datos de la persona que completó el formulario tienen que quedar a la vista de todos.

    Es como para hacer un sorteo

    saludos!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder