Círculo de Maquetadores

Una de las cosas más frustrantes de heredar un proyecto de otra persona, es cuando las convenciones de nomenclatura para clases e identificadores no tienen ningún sentido. Esto puede dificultar una actualización o un rediseño y puede hacernos perder mucho tiempo. En este artículo te daremos algunos consejos sobre como nombrar a las clases e identificadores de tus proyectos, de manera que sean fácilmente entendibles por otros desarrolladores.

¿Cuántas veces has heredado un proyecto de otra persona, para descubrir que el código es un desastre y no entiendes nada?. Cada uno tiene su manera de escribir código, pero esto tiene serios inconvenientes a la hora de compartir proyectos, puesto que aunque nosotros lo entendamos, puede que nuestro código sea ininteligible para los demás.

En esta serie de artículos, te propondremos unas pautas y buenas prácticas de escritura css, que ayudarán a que tu código sea entendido por otros desarrolladores y por ti mismo. De esta manera evitarás incoherencias y redundancias que agilizarán el desarrollo en equipo y evitarán la duplicación de esfuerzos.

Todos sabemos que las etiquetas en HTML pueden tener atributos tales como alt, title, href etc… Aparte de para lo obvio estos atributos nos pueden servir para dar especificidad a nuestros selectores CSS. Los llamados selectores de atributo, son unos selectores avanzados y escasamente conocidos, capaces de identificar estos atributos de un elemento y pasarles un estilo. Con ellos nos podríamos librar de por ejemplo, poner clases e identificadores a muchas etiquetas HTML.

Existen un número reducido de selectores de atributo en CSS2, pero éstos se han ampliado para la próxima versión de CSS3. En este artículo veremos cuantos tipos de selectores de atributo hay y la mejor manera de utilizarlos.

Todos sabemos que la propiedad de CSS font-face funciona en los navegadores como Firefox y Opera entre otros. Pero nunca conseguíamos adaptarlo correctamente para Internet Explorer. Explicamos brevemente como conseguir que funcione sin problemas.

Antes de nada, debemos convertir la fuente al formato embebido eot. Este formato es el que usaremos para Internet Explorer, para el resto de navegadores se deja el formato estandar ttf.

CSS 3 y HTML 5 son capaces de revolucionar la forma en la que se diseñan los sitios Web. Ambos incluyen nuevas características y tantas funciones que es imposible no empezar a ver como funcionan. La inclusión de soporte nativo para cosas como las esquinas redondeadas y diseño de columnas múltiples son sólo la punta del iceberg.

A continuación se presentan los recursos de 70 tutoriales y artículos para empezar con CSS3 y HTML5. Un listado que nos trae CSS Gallery Muchas de las técnicas analizadas son soportados en cierta medida en algunos algunos navegadores modernos (Safari y Firefox con el apoyo más amplio), para que puedas empezar de inmediato.

Ver 70 Tutoriales CSS3 y HTML5

Muchas veces más de uno de nosotros nos hemos encontrado con “columnas” de distinto tamaño. Es decir, cajas de diferente altura. Siempre queremos conseguir que independientemente del contenido de las mismas la altura sea igual para todas.

Con CSS de forma muy muy sencilla podremos conseguir esto, no tenemos que recurrir a Javascript para modificar dinámicamente las alturas de la cajas, ni usar otros métodos que acumalan demasiados divs para conseguirlo, y que luego abarcan problemas del diseño de la estructura.

Ahora veremos que usando los atributos display:table; display:table-row; y display:table-cell; conseguiremos convertir las cajas o divs en una tabla, y ya sabemos que con las tablas nunca veremos una celda más alta que otra de la misma fila.

En el siguiente ejemplo, usaremos 3 cajas que se convertiran en 3 columnas con el mismo alto, independientemente de su contenido. La explicación de como hacerlo se explica en el mismo HTML que hay a continuación.

CSS3 y HTML5 están ya llegando poco a poco, y con ellos toda una nueva batalla por conseguir el mejor marcado. Estas nuevas tecnologías facilitarán también la integración de plantillas o maquetas a los desarrolladores. Por el contrario, tenemos que obtener una nueva ideología y modificar nuestros hábitos de codificación para mantener la Web Accesible.

Poco a poco nos tenemos que familiarizar con estas nuevas tecnologías (css3 y html5), ya que serán las que utilizaremos en un futuro no muy lejano. Todo esto va en continuo progreso así que nos conviene ir entrando en contacto.

Supongo que habéis notado que en la mayoría de los navegadores el suavizado de texto no se percibe tal y como lo hace el Internet Explorer 7 e Internet Explorer 8. Pero si véis el texto siguiente bajo el sistema operativo MAC notaréis que el suavizado de texto o smooth text se visualiza en Firefox de forma sorprendente, y como comprobaremos “no es una imagen”:

Círculo de Maquetadores: Comunidad de Maquetadores Web

Chris Hanscom ha desarrollado una nueva guía rápida de referencia CSS3 con las últimas especificaciones.

La guía de referencia CSS 3 dispone de una de las más completas y actualizadas hojas de cheats con la nueva especificación de CSS 3. Veremos las nuevas propiedades, selectores y que valores se pueden introducir según el estándar CSS3.

Más de uno de nosotros nos hemos encontrado con crear un sistema de votos factible y práctico. Como vemos en Youtube o en Amazon. La mayoría de ejemplos que encontramos por la Web, estan desarrollados con JavaScript que funcionan correctamente bien, pero ya sabemos que si lo tenemos desactivado ya no nos sirve de mucho.

A continuación vemos como crear un sistema de votos o Rating Star únicamente con CSS…