Hace unos días, leyendo por aquí y por allá, me encontré con esta herramienta online que puede facilitarle mucho la vida a aquellos que tienen una página web pero no saben programar.

Se trata de OnlyCSS Menu, una aplicación que te permitirá crear en minutos un menú funcional y completamente personalizado, en CSS y HTML.

La verdad, es que tiene en su galería diseños muy bien logrados, sean verticales, horizontales e incluso desplegables.

Por cada menú que elijas, obtendrás las imágenes, el código CSS y HTML y también te mostrará información sobre en cuales navegadores es compatible.

Y por demás está decir, que para usarlos en tu web, no es necesario que tengas amplios conocimientos de CSS y HTML, bastará con que sepas copiar y pegar

1. Despliegue en múltiples plataformas de usuario: El mismo código puede mostrarse en una gran cantidad de plataformas de usuario, es decir, en todos aquellos dispositivos que puedan leer XHTML , como buscadores, smartphones, celulares con navegadores, y lectores de pantalla para personas con debilidad visual.

2. Mejora del rendimiento: Las páginas se vuelven mucho más ligeras (en cuanto a tamaño del archivo) por lo que la descarga es mucho más rápida, esto debido a que el contenido ahora necesita un mínimo de formación en la estructura, ya que toda la presentación del sitio se guarda en un único archivo (css), por lo que el navegador tiene que descargarlo una única vez.

3. Funciona en la mayoría de los navegadores: Con un poco de esfuerzo, puedes hacer que tu página se vean correctamente en versiones anteriores, de esta manera, los usuarios obtienen la mejor experiencia con la tecnología que tienen disponible.

4. Separación del contenido y la presentación: Puedes cambiar o modificar por completo el contenido o el diseño sin afectar al otro

5. Confirmación de que tu código es correcto: los servicios de validación de XHTML y CSS, puedes usarlos durante el desarrollo, éstos informan al instante los errores en tu codificación, por lo tanto, el proceso de depuración es mucho más rápido, y tendrás la garantía de que la página se mostrará siempre completa tanto en los navegadores, como en la validación.

Entre las que mas se repiten se encuentran las siguientes:

1. ¿Cómo puedo evitar que un fondo se desplace, es decir que quede fijo a pesar del movimiento de la barra de desplazamiento?

Usa el siguiente código, reemplazando “imagen.gif” por el nombre de tu imagen.

body {
background: url(imagen.gif);
background-attachment: fixed;
}

2. ¿Cómo obligar el uso de un estilo en toda la página, de modo que si hay otras definiciones CSS sean ignoradas?

Esto lo logras mediante el uso de !important después de la definición. La definición que no llevase !important será sustituída por nuevos estilos. En el ejemplo, la propiedad text-align podrá ser modificada por otra declaración de estilos

H1{
color:green!important;
text-decoration:underline!important;
font:bold 30px/45px verdana!important;
text-align:center;
}

3. ¿Cómo aplicar dos o más clases a un mismo elemento?

Es tan sencillo, como colocar los nombres de las clases que quieres aplicar separadas por un espacio.

.mensaje {
    font-weight: bold;
    border: 1px solid #0f0;
}
.centrado {
    text-align: center;
}

<p class="mensaje centrado">
  	Este es un párrafo de tipo mensaje  y con el texto centrado.
	</p>

Lamentablemente, quienes empiezan en el diseño web, tienden a aprenderlo sin seguir los estándares, y no le dan la importancia que se le debe dar a una de las mejores tecnologías web, al grado de pensar que no existen las mejores prácticas de CSS. L

El resultado? Diseños mal elaborados, llenos de errores y horas y horas perdidas en tratar de resolver un problema que se pudo haber evitado desde un principio.

Es por esto, que hoy les explico algunos de los errores más comunes que los desarrolladores web cometen (e ignoran como solucionarlos).

1. No leer las especificaciones

Seamos sinceros, cuando tienes una duda, o algo no te queda claro al maquetar en CSS, ¿a quién acudes? ¿Dónde te informas? ¿foros, páginas web, compañeros diseñadores? Cuidado! Regularmente, cuando un diseñador intenta a explicarle a otro, regularmente omite o se equivoca por lo menos en un par de cosas, y esto ocurre aún más si el primero, no tiene una experiencia y un conocimiento serio de CSS. Cuando esto sucede, -ojo, no digo que no recurras a tus compañeros- es mejor recurrir al estándar (la página W3C CSS2 rev1 es hasta el momento, la única con información completamente detallada de las características de CSS.)

Recuerda, el estándar está cambiando continuamente, lo mejor que puedes hacer, es estar al día.

2. No usar los validadores

Aunque te parezca difícil de creer, hay páginas como Amazon, CNN, Facebook, Yahoo, tienen su buen conjunto de errores, la mayoría de ellos resulta extraño y hasta fuera de lugar encontrarlos en ellas.

Así que, asegúrate de validar tus páginas, así lograrás que se vea bien en todos los navegadores que soporten los estándares, y al final, trabajarás menos para corregir un detallito en un navegador, y otro detallito en otro.

Validador HTML

Validador CSS

3. Demasiados Divs

Uno de los más grandes y error frecuente de quienes empiezan a diseñar en web, es lo que comúnmente se conoce como Sopa de Divs. ¿Qué significa esto? Qué para lograr un determinado efecto (la mayoría de las veces, simple) se usan demasiados DIVS.

¿Qué problema tiene el usar tantos divs? Sencillo, tu página se tardará un poco más en cargar (y ya hemos hablado antes sobre la importancia de que una página cargue más rápido), se necesita escribir más código CSS, el parseo del DOM es más lento, y, el código se vuelve menos mantenible (lo cual implica más trabajo para ti a largo plazo).

4. Insertar CSS dentro del HTML

Debemos utilizar CSS siempre que podamos, haciendo la llamada desde el elemento hacia una clase, y no poniendo el código CSS dentro del elemento. Nuevamente, esto te ahorrará tiempo a la hora de cambiar los estilos de la página, y podrás usar la clase, para otros elementos que requieran el mismo estilo.

5. ID vs Class

Este es un problema común con diseñadores de CSS que no han aprendido el lado lógico de este. Para clarificar: IDs son para un solo elemento y clases son para muchos elementos.

De cualquier manera no hay que aplicarle clases a todas las colecciones de elementos. Si puedes encapsular una colección de elementos en un ID único, ya no necesitaras el atributo class dentro de estos. Esto ahorra ancho de banda y tiempo de desarrollo.

Cambia:

<div class="color-green"></div>
<div class="color-green"></div>
<div class="color-green"></div>
<div class="color-green"></div>
<div class="color-green"></div>

.color-green{ color: green; }

Por:

<div id="color-green">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
</div>

#color-green div { color: green; }

Cierto, agregamos un div más pero tiene un valor especifico, ahora tenemos ID unico y de esa manera nos ahorramos 5 clases (class).

6. No definir los atributos con la estructura correcta

Si tú has programado antes en algún lenguaje de programación como C o Java, sabrás que tu programa no se compila si alguna línea no termina con punto y como “;”.

Sabes qué pasa si omites al final de un atributo el punto y coma, en CSS? Sencillo! El siguiente atributo no será leído. Así que asegúrate de cerrar cada atributo con su respectivo “;” mientras estés escribiendo el código, y evítate dolores de cabeza posteriores.

7. Uso incorrecto de unidades de medida.

El tamaño de las fuentes, no las declares en pixeles! Esto, créeme, te lo agradecerá el usuario. Es bien cierto, que la resolución más común hoy en día es 1024×768, pero también es cierto que cada día hay monitores con resoluciones mayores, por lo tanto, el texto deber ser flexible, considera que leer un texto 10px, en una pantalla de 1920×1080 resulta realmente cansado y se convierte en una pérdida de tiempo para el usuario.

Soluciona este problema declarando el tamaño de las fuentes con la unidad em, como esto: font-size:1.2em, Esto quiere decir que el tamaño de la fuente de un particular elemento es 1.2 veces el tamaño de fuente predeterminada del navegador.

Un beneficio muy importante de esta práctica es que el tamaño de la fuente de todo el sitio puede ser incrementado simplemente cambiando la etiqueta BODY (o cualquier otra etiqueta contenedora) usando la propiedad font-size, efecto que resulta imposible si manejas medidas en pixeles.

El tamaño de las fuentes tampoco debería ser declarado en puntos (pt), centímetros (cm), o cualquier otro unidad de medida, tampoco porcientos (1em=100%).

8. Caracteres y tildes del español en los selectores, clases y valores.

Este error es muy frecuente en los diseñadores de habla hispana. Siendo programador o diseñador, lo primero que tienes que aprender, es que los nombres de clases, de selectores, en los valores (y en las variables) no puedes usar tildes (acentos) o símbolos como la ñ, ya que no podrán ser ejecutados correctamente.

Estos, son solo algunos de los errores más comunes al maquetar con CSS. Si a ti te ha pasado alguno que no hemos mencionado, coméntanoslo. Y si te ha pasado alguno (o varios) cuéntanos tu experiencia.