4webs

Diseñar páginas web con CSS

Css son las siglas de lo que se conoce como hojas de estilo en cascada. Las hojas de estilo nos permiten controlar el diseño de nuestras páginas web de forma general. Con ellas podemos tener control sobre el texto, las imágenes y otros elementos que forman el diseño de las páginas web, como puede ser la estructura. En definitiva, nos permiten maquetar nuestras páginas de una manera eficaz dándole estilo a nuestro código HTML en un documento aparte.

Ventajas para usar CSS en lugar de tablas.

  • Una de las principales ventajas de utilizar CSS para el diseño de nuestras páginas web es que puedes hacer modificaciones en varias páginas a la vez solo realizando un cambio en nuestra hoja de estilo. Por ejemplo si necesitamos cambiar el color del encabezado en las diferentes páginas que componen una web, no es lo mismo tener que cambiarlo en las 50 páginas internas que cambiarlo en un único documento que es la hoja de estilos y que automáticamente ese cambio se aplique en las 50 páginas internas.
  • Además nos proporciona un código más limpio, eficaz y cómodo para trabajar al poder tenerlo todo en un solo archivo y al poder usar nombres para cada uno de los elementos de una página, por lo que el contenido real de una página web está solo en un único archivo y los diferentes estilos se adjuntan en otro documento de estilos.
  • También conseguimos eliminar mucho código innecesario y obsoleto del HTML, permitiendo así mejorar tiempos de carga en los navegadores.
  • Añadimos a esto que los CSS se quedan almacenados en la cache de los navegadores, permitiendo reducir el tiempo de carga de nuestros sitios.
  • El buen uso de CSS mejora la accesibilidad y la lectura que tienen los motores de búsqueda sobre un sitio web, favoreciendo el posicionamiento de nuestras páginas web.

 

Validar páginas por W3C.
W3C es una organización que rige los estándares y recomendaciones de una web bien hecha. Gracias a esta organización, podemos comprobar que el diseño de nuestra página web es correcto y sigue los estándares actuales.
Tener el código limpio y claro es algo que siempre nos va a ayudar a posicionar mejor, ya que a google le encantan las paginas así , y  una manera de poder hacer esto es cumplir los estándares de W3C en todos nuestros diseños web.
Realizar una validación en W3C , nos proporcionará la calidad de un trabajo bien hecho, aunque en determinados trabajos pueden existir alguna incoherencia con esta organización por requerimientos del proyecto, es recomendable siempre que sea posible realizar la validación.

Ventajas de maquetar css con respecto al SEO
Las ventajas de maquetar páginas web con CSS para nuestro posicionamiento web, conocido también como SEO son muchísimas. Al tener un código tan limpio lleno de contenido, ayuda a que nuestro de diseño web sea semánticamente más correcto y aparezca mejor posicionada en los buscadores, entro los principales motivos destacan dos:

  • Separación del código html del css, el código que se usa es el que realmente necesita el buscador para posicionar, los estilos de toda la página van en otro documento anexo.
  • Velocidad de carga, desarrollar página web con css tiene la ventajas que los elementos cargan mediante caché, por lo que la velovidad de carga de la página web , es muy superior a otra página que tiene los estilos en el mismo documento html, está demostrado que Google tiene en cuenta la carga de las páginas web.

Recomendación antes de empezar.
Los que nos dedicamos a el diseño de páginas web y la maquetación de estas mismas sabemos lo difícil que es encontrar la compatibilidad entre todos los navegadores que existen, Internet Explorer, Firefox, Chrome, Safari,etc…, o por lo menos los más importantes. Esto viene porque los navegadores no interpretan el código de la misma manera y entre ellos hay pequeñas variaciones. Aquí entra en juego el reset de Eric Meyer, que es un código de los más conocidos de los que disponemos para poder resetear el CSS de nuestro diseño web. Al resetear digamos que ponemos a cero esos valores que pueden crear discrepancias entre navegadores y así poder empezar a dar el formato y a maquetar nuestras páginas web que nosotros queramos sin que el navegador haga su propia interpretación.

Otro proyecto interesante es Css Zen Garden, donde la comunidad con un único archivo html, crea páginas totalmente diferentes, mostrando el verdadero potencial que tiene maquetar páginas web mediante CSS.