Blog InterGraphicDESIGNS » css

OOCSS, CSS Orientado a Objetos

Rolando — Tue, 21 Jul 2009 16:24:36 +0000

Cuando se trata de construir nuestros archivos CSS, debemos considerar qué tan fácil es para cualquier otra persona agregar nuevos elementos al diseño o modificar los actuales.

Existe una forma más modular desarrollada por Nicole Sullivan, en la que podemos construir los archivos CSS: CSS Orientado a Objetos (OOCSS). Esta forma pretende brindar extensibilidad y mantenibilidad a nuestro código CSS, sin dejar de lado la facilidad de comprensión del mismo.

El objetivo de esta metodología es “escribir código CSS escalable, sano y mantenible”, en palabras de Sullivan, quien usa y recomienda un “grid framework” de la conocida librería de Yahoo “Yahoo YUI”. Sin embargo, cada quien puede escribir su CSS sin necesidad de este framework pero aplicando los principios del OOCSS.

El adoptar el uso de OOCSS, implica el pensar en reutilización de estilos y su fácil mantenimiento. Cada componente es una estructura fija HTML, en la cual se aplican una seria de reglas CSS que controlan su diseño (estructura) y otra serie de reglas CSS que controlan su apariencia (piel o “skin”).

Una recomendación de Sullivan es evitar a toda costa lo que ella llama “selectores basados en la ubicación”, esto es, estilos que afectan el contenido según la ubicación que tengan en la página. Para esto, ella recomienda agregar una clase base para el objeto HTML y agregar clases “hija” que son las que aplican los estilos según la ubicación en la página; con esto, este CSS puede ser fácilmente reutilizado en otro lugar del sitio.

Ejemplo

Supongamos que todas las páginas del sitio tienen un menú lateral, cuyo código CSS es el siguiente:



… contenido del menú ...

Ahora, supongamos que hay una página de noticias en la que queremos que este menú tenga un estilo diferente, por ejemplo, diferente color de fondo. Tradicionalmente, se agregaría una clase al de esta forma:

Con esto, las reglas de estilo que se escribirían para esa página serían algo así:

body.noticias .menulateral { background-color: #FF0000; }

El enfoque recomendado por OOCSS es diferente. En vez de tener una clase aplicada al , se crea una clase por cada tipo de elemento que se quiere que se vea diferente. Con OOCSS, el ejemplo anterior cambiaría a lo siguiente:

.noticiasmenulateral { /* extends .menulateral*/ background-color: #FF0000; }

Esta clase hereda de la clase existente que describe el estilo estándar para el elemento. Así, se aplica “en adición” a la clase base existente:



… contenido del menú ...

Conclusión

Siguiendo estos principios, se puede tener una estructura bastante ordenada y reutilizable no solamente en el mismo sitio sino en otros proyectos; además que OOCSS brindaría beneficios significativos en cuanto al rendimiento de las páginas.

Al enfocarse en reutilizar estilos CSS en todo el sitio, con OOCSS los archivos CSS serían considerablemente más pequeños, aunque los archivos HTML sean un poco más grandes. Esto es deseable ya que el tamaño de los archivos CSS influencia directamente la cantidad de tiempo que el navegador usa para desplegar una página en blanco mientras el sitio carga. Archivos CSS más pequeños implican menos tiempo invertido leyendo una página en blanco.

Evitando los selectores basados en la ubicación, se reduce la cantidad de trabajo que el navegador debe hacer para determinar la apariencia de un elemento específico en la página. Tanto en dispositivos móviles, como en el escritorio de computadoras, puede producir un mejoramiento en el rendimiento del sitio.

Un aspecto que debe tomarse muy en cuenta, es la facilidad o complejidad que puede resultar del OOCSS en un equipo de trabajo, ya que motivar a todo un equipo a adoptar OOCSS puede convertirse en un compromiso muy grande. Lo que convendría es aplicar OOCSS en un proyecto pequeño y decidir si vale la pena aplicarlo en proyectos más grandes en los que varias personas se encuentran involucradas.

Información Complementaria

Object Oriented CSS

View more presentations from Nicole Sullivan.

El atributo z-index.

igdonline — Thu, 28 Aug 2008 13:31:00 +0000

El z-index es un atributo css que permite editar a un elemento hace referencia al orden en que los elementos se superponen unos con respecto a otros. Permite crear “capas” dentro de la web.

A continuación un link de referencia que presenta ejemplos:

Formulario interactivo que muestra resultados de la manipulación de z-index.
Tutorial del z-index.

DIV y CSS vs Tablas. Maquetación web. Razones para utilización de DIVs y CSS

igdonline — Wed, 20 Aug 2008 22:26:00 +0000

Hace algunos años era normal que la maquetación HTML de todos los sitios estuviera realizada utilizando la etiqueta table para dar forma al diseño, estructura de las diferentes secciones de un sitio web, etc… Desde hace unos años se viene utilizando en vez de esto la etiqueta div y apoyándose en estilos de archivos .css para dar cuerpo a la forma (layout) de un sitio web.

La discusión sobre cuál de las dos formas es mejor es un tema muy tratado ya en Internet, la práctica y la tendencia escogida por los principales proyectos web demuestra que lo mejor es la utilización de DIVs/CSS sobre las tablas.

Ahora bien, muchos webmasters deben dar una explicación a sus clientes sobre por qué escoger una forma u otra, incluso algunos webmasters siguen poniendo en duda las ventajas de una forma sobre otra. Adjuntamos dos enlaces sumamente útiles para hacer esta justificación:

http://css-discuss.incutio.com/?page=WhyCss

http://www.hotdesign.com/seybold/10filesize.html

El primer artículo describe en español básicamente los siguientes puntos, los cuales son contundentes en la justificación:

1. Editando un solo archivo CSS puede hacer cambios drásticos a un diseño completo en segundos.
2. CSS le permite tener un output en múltiples formatos de una forma muy sencilla
3. CSS le permite usar nombres para cada elemento de una página. Usted por ejemplo puede darle a un DIV el nombre de “Encabezado” que describe perfectamente el contenido de su HTML.
4. Los CSS externos se quedan almacenados en el cache de los navegadores por lo que se reduce el tiempo de descarga de un sitio web
5. CSS elimina código innecesario y obsoleto, por ejemplo la etiqueta font, gifs spacer, tablas encadenadas. Todo esto mejora el tiempo de carga y hace la vida del desarrollador más fácil
6. CSS permite hacer cosas más interesantes que el HTML por sí sólo no permite como un mejor control de los tipos de letra, posicionamiento absoluto, borders más elegantes, etc.
7. El buen uso de CSS mejora la accesibilidad y la lectura que tienen los motores de búsqueda sobre un sitio web.
8. El uso de :hover en CSS elimina el uso de Javascript para crear efectos de onmouseover.
9. Si quiere validación XHTML strict no le queda otro camino que usar este método.

Editores de código fuente

igdonline — Fri, 01 Aug 2008 15:07:00 +0000

Smashing Magazine analiza un conjunto de editores de código del mercado para el desarrollo. Un En Intergraphic Designs la experiencia indica que no existe un editor que lo haga todo bien, por ejemplo, dreamweaver puede ser uno de los mejores editores para trasladar del diseño al html, pero se queda corto con respecto a la programacion, en comparacion contra un phpDesigner o un NuSphere

Ver artículo aquí.

¿Cómo abreviar el código CSS?

igdonline — Fri, 27 Jun 2008 16:34:00 +0000

Es muy frecuente encontrar código CSS en varias líneas que podrían ser simplificadas en una sola. Muchos diseñadores CSS prefieren la versión “contraída” del CSS para tener menos código, reducir el tamaño de sus archivos CSS, etc.

Acá presentamos algunos ejemplos conocidos sobre cómo se podrían simplificar algunas línea de código CSS:

Backgrounds:

CSS Expandido ( background ) – - – - – - – >
background-color: red;
background-position: top;
background-position: center;
background-image: url(../);
background-attachment: scroll;
background-repeat: repeat-x;

contracción – - – - – - – >
background: url(../) red top center scroll repeat-x;

Márgenes:

CSS Expandido ( margin / padding ) – - – - – - – >
margin-top: 10px;
margin-left: 5px;
margin-right: 5 px;
margin-bottom: 10px;

contracción 1 – - – - – - – >
margin: 10px 5px 10px 5px ;
contracción 2 – - – - – - – >
margin: 10px 5px;

Tipos de letra:

CSS Expandido ( font ) – - – - – - – >
font-family: Arial, Helvetica, “Trebuchet MS”;
font-size: 12px;
font-style: italic;
font-weight: bold;
line-height: 15px;

contracción – - – - – - – >
font: bold italic 12px/15px Arial, Helvetica, “Trebuchet MS”;

Bordes:

CSS Expandido ( border ) – - – - – - – >
border-top: 1px;
border-bottom: 1px;
border-left: 1px;
border-right: 1px;
border-color: red;
border-style: solid;

contracción – - – - – - – >
border: 1px solid red;

Colores:

CSS Expandido ( color ) – - – - – - – >
color:#0099FF;
color:#000000;
color:#660000;

contracción – - – - – - – >
color:#09F;
color:#000;
color:#600;

Listas:

CSS Expandido ( list-style ) – - – - – - – >
list-style-image: url(../);
list-style-position: inside;
list-style-type: circle;

contracción – - – - – - – >
list-style: url(../) inside circle;

Es posible encriptar CSS, Javascript, HTML o PHP?

igdonline — Tue, 17 Jun 2008 04:26:00 +0000

Pues primero hay que tener claro qué es lo que se ejecuta en el servidor y luego qué es lo que se ejecuta en el cliente:

Servidor:

PHP: la programación conocida como “del lado del servidor”.

Cliente:

CSS.
Javascript
HTML

Primero que todo ninguno de los códigos anteriores se puede encriptar porque si fuera así se irrespetaría la sintaxis del lenguaje y el código pierde su valor y deja de ser funcional.

Por otro lado, en el caso de los CSS, HTML y Javascript que se ejecutan en el navegador, sólo en el último caso se puede aplicar un obfuscador, el cual no encripta propiamente el código sino que lo reemplaza por otro que puede ser interpretado (se respeta la sintaxis de javascript) pero que no es leíble fácilmente por un humano. Sin embargo, todo lo que se ejecuta en el cliente se almacena de manera local (en caché) por lo que los archivos siempre son descargadas y si alguien se propone adueñarse de un código, técnicamente no hay nada que le impida hacerlo; pero se pueden usar ciertas técnicas (como el obfuscamiento) para que dicha tarea sea más difícil.

CSSGlance.com incorpora cuatro de nuestros proyectos

InterGraphicDESIGNS — Mon, 12 May 2008 08:10:00 +0000

El portal sobre sitios web CSSGlance.com ha incorporado a su galería tres de nuestros proyectos. Los sitios web montanacoffeeshop.com, ricardoarce.com, intergraphicdesigns.com y nadieconhambre.org ya pertenecen a la galería. De acuerdo con sus autores, CSSGlance es un proyecto que cumple con el objetivo de brindar a sus visitantes una base de datos de sitios web basados en CSS que sean innovadores y bien diseñados, el proyecto desea mostrar que el buen diseño y el cumplimiento de estándares web son dos caras de la misma moneda.

Más información:

Sitios de Costa Rica en CSSGlance.com

Café Montaña en CSSGlance.com
InterGraphicDESIGNS en CSSGlance.com
RicardoArce.com en CSSGlance.com
NadieconHambre.org en CSSGlance.com

¿Cómo hacer gradientes o rotar una página con CSS?

igdonline — Fri, 25 Apr 2008 13:02:00 +0000

Algunos se preguntan cómo hacer el gradiente de un sitio web (el degradado o transición de un color a otro) sin necesidad de utilizar una imagen, sino sólamente utilizando atributos CSS. Otra pregunta que es común encontrar es cómo rotar o inclinar un texto utilizando sólamente CSS.

Actualmente estas características CSS no están totalmente implementadas, sin embargo, existen iniciativas interesantes que nos dejan ver que estas características podrían ser parte de Internet dentro de un tiempo.

WebKit:

Todos los navegadores tienen un sistema para interpretar el código HTML y CSS para así mostrar una página web dada, WebKit es este sistema para el navegador Safari, y ya se empieza a utilizar en otros dispositivos como algunos teléfonos celulares Nokia. Puede descargar la versión más reciente de WebKit

Con Webkit, ya es posible implementar algunas de estas características, por ejemplo, para utilizar gradientes podríamos utilizar el siguiente código:

background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

Para rotar una página podríamos utilizar lo siguiente:

body {
-webkit-transform: rotate(-2deg);
}

En general, podríamos decir que estas características aún no deberían ser utilizadas en cualquier sitio web, debido a que la mayoría de los navegadores no tienen instalado WebKit, sin embargo, es una iniciativa interesante que parece indicar que, si en el futuro todos los navegadores empiezan a incorporar la facilidad para interpretar estos atributos CSS, pronto podemos empezar a utilizarlos. Por ahora, a los diseñadores web se les recomienda descargar WebKit para ir probando algunas de estas funciones y prepararse para el futuro cercano de CSS.

¿Qué es el sIFR?

igdonline — Thu, 03 Apr 2008 20:02:00 +0000

Una pregunta que muchos diseñadores web llegan a hacerse es cómo utilizar cualquier texto con cualquier fuente (tipo de letra) sin necesidad de tener que editar una imagen, y haciendo que este texto sea reconocido por los buscadores más populares. Esto era imposible hasta hace unos años, y es un tema solucionado gracias al sIFR, una técnica publicada gracias al trabajo de Mike Davidson y Mark Wubben.

El sIFR (Scalable Inman Flash Replacement) es una técnica que mezcla Flash y funciones de Javascript para lograr este objetivo. Puede ver ejemplos de esta técnica aplicada en cualquiera de las páginas internas del sitio web de InterGraphicDESIGNS (Ver un ejemplo aquí).

Para poner a funcionar sIFR en su sitio web puede descargar la última versión del producto en alguno de los sitios web de sus creadores, donde se indican en detalle todas las instrucciones necesarias.

Conocer más detalles del funcionamiento del sIFR (Inglés)

Descargar el sIFR (Versión 2.0.2)

Ver la página oficial de ejemplo

Documentación oficial

InterGraphicDESIGNS felicita a Pinturas Koral por su nuevo sitio web

InterGraphicDESIGNS — Thu, 27 Mar 2008 12:27:00 +0000

En uno de nuestros proyectos más recientes, colaboramos para Pinturas Koral en el desarrollo de su nuevo sitio web a quienes también brindamos el servicio de hospedaje web . El proyecto está desarrollado utilizando maquetación con DIVs y CSS, aplicando estándares de codificación y cuidando aspectos importantes de usabilidad y navegabilidad del sitio. Esperamos que el nuevo diseño del sitio web brinde a Pinturas Koral los objetivos esperados. Puede conocer más de este proyecto en http://www.pinturaskoral.com