Círculo de Maquetadores » CSS

Depuración de CSS (parte II) – Convenciones de nomenclatura semántica

Jorge López — Sun, 04 Jul 2010 18:15:28 +0000

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.

Depuración de CSS (parte I) – Comentarios y documentación

Jorge López — Fri, 11 Jun 2010 15:57:15 +0000

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

Selectores de atributo, ¿Todavía nos los utilizas?

Jorge López — Sat, 09 Jan 2010 23:15:59 +0000

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.

Font-face en CSS

Álvaro Brito — Sun, 27 Dec 2009 23:07:35 +0000

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.

70 Tutoriales CSS3 y HTML5 (CSS3 & HTML5 Tutorials)

Álvaro Brito — Fri, 25 Sep 2009 22:31:00 +0000

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

Cajas con alturas iguales usando CSS (Equal Height Boxes with CSS)

Álvaro Brito — Wed, 16 Sep 2009 21:18:01 +0000

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.

Usando HTML5 (coding HTML 5)

Álvaro Brito — Wed, 05 Aug 2009 12:41:47 +0000

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.

Suavizado de Texto con CSS para usuarios MAC (css font antialiasing)

Álvaro Brito — Tue, 04 Aug 2009 21:13:48 +0000

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

Guía de Referencia CSS3 (css3 reference guide)

Álvaro Brito — Mon, 03 Aug 2009 15:45:21 +0000

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.

Sistema de votos con CSS (CSS Rating Star)

Álvaro Brito — Thu, 23 Jul 2009 21:33:00 +0000

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