Author Archives: admin

UOC:El modelo de composición de CSS: cajas, bordes, márgenes, relleno

Logo de Mosaic

CSS
El modelo de composición de CSS: cajas, bordes, márgenes, relleno

30. El modelo de composición de CSS: cajas, bordes, márgenes, relleno

Ben Henick. 26 de septiembre del 2008 Publicado en: desbordamiento, abreviamiento, modelo, flotante, caja.

A primera vista, el modelo de composición de CSS es muy sencillo. Las cajas, los bordes y los márgenes son elementos bastante simples y la sintaxis de CSS ofrece una manera fácil de describir sus características.

Sin embargo, los motores de representación de los navegadores siguen una lista de reglas descritas en la Recomendación CSS y unas cuantas propias. Por esta razón, hay muchos detalles que debemos comprender antes de poder añadir técnicas avanzadas al repertorio de un especialista en estilos.

En este apartado se presentan las propiedades de CSS que manipulan la composición de los elementos HTML como los bordes, los márgenes y muchos más. También se tratan algunas de las reglas mencionadas antes. En próximos apartados se hablará de la disposición avanzada de columnas y las técnicas de parrilla, y se tratará con más detalle la composición de los formularios, los elementos flotantes, la distancia y el posicionamiento.

Nota

A lo largo de todo el apartado encontraréis muchos ejemplos de código enlazados para demostrar las técnicas de las que se habla, pero si queréis trabajar con el código en vuestro ordenador, podéis descargaros todos los ejemplos de código.

Descargad los ejemplos en:article30_examples.zip

Los contenidos de este apartado son los siguientes:

30.1. Cambiar la composición: márgenes, bordes y relleno en CSS

Muchos elementos de HTML, como los elementos div y los títulos, se representan por defecto de manera que ocupen todo el ancho del lienzo del navegador y fuercen un salto de línea terminal, de modo que una serie de estos elementos se representaría como una pila de principio a fin sobre el lienzo del documento.

Sin embargo, los elementos de HTML y los estilos que el navegador suele asignarles no son adecuados para la gama completa de casos de uso que se pide a los desarrolladores que tengan en cuenta cuando hacen su trabajo. El modo como CSS y HTML se combinan se ha ajustado a una relación de “llenar los agujeros”, de manera que las class e id puedan añadir significado semántico al etiquetado mientras que las reglas de hoja de estilo pueden cambiar la composición y la presentación del contenido de manera precisa, quizá incluso cancelando gran parte de los estilos predeterminados del navegador.

El control cuidado del espacio en blanco es una de las herramientas más importantes del diseñador y, según el autor de estas líneas, la más importante de todas. No obstante, el grado de control del espacio en blanco que aporta un valor de producción elevado al diseño de un sitio no está presente en las hojas de estilo predeterminadas de los navegadores, lo que significa que los especialistas en estilos suelen utilizar a menudo los márgenes, los bordes, el relleno y otras propiedades de CSS que se explican en este apartado.

Los márgenes (margin), los bordes (border) y el relleno (padding) se disponen tal como se muestra en la figura 1.

Vemos un texto, rodeado por dos cajas. La primera caja es el borde, y la separación entre texto y borde es el relleno. La segunda caja es el margen.Figura 1. Representación explícita de las diferentes partes de una caja de elementos, con las respectivas etiquetas de las propiedades de CSS pertinentes

30.1.1. Colocar espacio en blanco en torno a un elemento: las propiedades margin-top, margin-right,margin-bottom, margin-left y margin

Los márgenes pueden especificarse de manera individual o en una regla abreviada. Además, la regla abreviada sigue permitiendo controlar cada uno de los bordes que rodean un objeto. Los valores válidos suelen especificarse en unidades px o em (píxeles o ems). En las hojas de estilo específicas de impresión pueden utilizarse las unidades in, cm, o pt (pulgadas, centímetros o puntos).

En todos los casos, % (porcentaje) es un valor válido, pero se debe utilizar con cuidado porque estos valores se calculan como una proporción de la anchura del elemento padre, y una previsión no suficientemente precisa de valores podría tener consecuencias no deseadas. Esta dificultad se explica con más detalle cuando se habla del modelo de caja de CSS.

Ved también

Podéis ver la explicación del modelo de caja de CSS en el subapartado 29.2 de este módulo.

Exceptuando las imágenes, los elementos en línea carecen de márgenes y no aceptan valores de margen.

Ved también

En la tabla 2 que se muestra en el subapartado 30.4.1, hay una lista de los elementos en línea.

Márgenes automáticos

Dependiendo de las circunstancias, la provisión de un valor auto ordena al navegador que represente un margen según el valor proporcionado en su propia hoja de estilo. Sin embargo, cuando se aplica un margen así a un elemento con una anchura significativa, un margen auto provoca que todo el espacio disponible se represente como espacio en blanco.

Con la regla siguiente:

.narrowWaisted {
   width: 16.667em;
   margin: 1em auto 1em auto;
}

un elemento de bloque de la clase narrowWaisted (clase cintura estrecha) se centrará en medio del lienzo disponible.

También puede asignarse al margen derecho de un elemento aplicable un valor relativamente pequeño, mientras que al margen izquierdo se le asigna un valor auto.

Cuando se hace esto, un elemento así se representará casi pegado a la derecha.

Márgenes negativos

A todas las propiedades de márgenes se les pueden asignar valores negativos. En este caso, un margen adyacente puede ser “cancelado” a cualquier nivel. Si se aplica un valor lo suficientemente negativo a un elemento lo suficientemente grande, el elemento adyacente afectado puede acabar quedando por debajo del otro.

Como ejemplo, pongamos por caso los siguientes elementos sencillos div:

<div id="header"><h1>Lovely header</h1></div>
<div id="content"><p>Overlapping text is entirely unreadable</p></div>

Cuando se le aplican estilos con el CSS siguiente:

body {background-color:white font-family:Geneva, Arial, Helvetica, sans-serif;}
#header { background-color:yellow }
h1 { color:red; font-size:2em; }

se crea lo que se puede ver en la figura 2:

Figura 2. Los dos elementos de nuestro sencillo ejemplo. No tiene nada de especial.

Archivo fuente:Negativemargins1 example

Pero ahora viene la parte interesante. Ahora añadiremos un margen negativo bastante grande encima del elemento inferior mediante la regla siguiente:

#content {margin-top:-3em;}

Esto provoca el efecto visual de cambiar el elemento de manera que se superponga con el título tal como se puede ver en la figura 3.

Dos elementos sin márgenes negativos aplicadosFigura 3. Cuando se le aplica un margen negativo, el elemento inferior pasa arriba y se superpone con el título.

Archivo fuente:Negativemargins2 example

Colapso de los márgenes

En los casos en los que dos elementos de bloque adyacentes y parecidos comparten márgenes que son mayores que cero, sólo se aplicará el margen mayor de los dos. Por ejemplo, pongamos por caso la regla siguiente:

p {
   margin: 1em auto 1.5em auto;
}

Si un documento que incluya esta regla de estilo se representa de manera literal, el margen final entre los dos párrafos seguidos sería de 2.5 em, es decir, la suma del margen inferior del párrafo 1 (1,5 em) y el margen superior del párrafo 2 (1 em). No obstante, a causa de la aplicación de márgenes colapsados, el margen entre ellos es sólo de 1.5 em.

Las listas y títulos son peculiares entre los elementos de bloque, de manera que sus márgenes no se colapsarán sobre los márgenes de los demás elementos de bloque.

Demostración 1

En el apartado anterior, de aplicación de estilos al texto, se hizo la tipografía de la sección introductoria de una historia de F. Scott Fitzgerald con la mayoría de herramientas de CSS. De cara a la demostración de este apartado, se utiliza aquella misma página con algunos pequeños cambios (principalmente, la adición de un elemento contenedor en torno a todo el texto central). Los estilos del texto no cambian, pero se han eliminado los pocos estilos de composición que se habían aplicado a aquella demostración.

Para empezar, se añadirán márgenes a todos los elementos que los necesiten.

body { margin: 0; }
   #main { margin: 0 auto 0 auto; }
   h1 { margin: 0 0 1em 0; }
   .pullQuote { margin: auto 0 1em 1em; }
   p { margin: 0; }
   .attribution { margin: 0 0 1.5em 0; }

Archivo fuente de:Ejemplo con sólo el mínimo de estilos

Archivo fuente de:Hoja de estilo de inicio

Archivo fuente de:Ejemplo con márgenes nuevos en body, título, texto destacado, contenedor de documentos y párrafos

Archivo fuente de:Hoja de estilo de la demostración 1

30.1.2. Añadir un borde a un elemento: propiedades de borde

Hay una propiedad de border (borde) abreviada, pero sólo es útil cuando se quiere proporcionar un borde completo y consistente alrededor de los cuatro lados de un elemento. También es posible establecer el peso (anchura), estilo y color de cualquiera de los cuatro bordes de un elemento mediante cualquier combinación significativa de las propiedades siguientes:

  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color

Las propiedades border-width

Estas propiedades se comportan exactamente como sería de esperar: asignan peso explícito a uno o más bordes.

La propiedad abreviada border-width (anchura de borde) acepta valores con la misma notación que la propiedad abreviada de margin (margen), pero no acepta valores porcentuales. Puede ser que en el futuro debáis redactar una regla como la siguiente:

td {
   border-width: 1px 0 0 1px;
}

Las propiedades border-style

Ocho valores diferentes del estilo de borde CSS: dashed (con rayas), dotted (con puntos), doble (con doble línea continua), inset, groove, outset y ridge (con perfiles simulando profundidad) y solid (línea sólida continua)Figura 4. Los ocho estilos de borde más habituales

Las propiedades border-style (estilo de borde) suelen aceptar cualquiera de los valores siguientes:

  • dashed. La longitud de las secciones de línea y la cantidad de espacio en blanco entre ellas las determina el navegador.
  • dotted. La cantidad de espacio en blanco entre los puntos (que pueden tener cualquier forma con una proporción de 1) la determina el navegador.
  • double. La anchura proporcionada se dividirá en tercios y se asignará en el orden lleno-negativo-lleno.
  • groove. Se representará un outset inmediatamente dentro de y junto a un inset.
  • inset. Al borde se le aplicará una sombra para que parezca que el elemento al que se aplica está incrustado en el lienzo.
  • none. Equivalente a especificar una -width (anchura) de cero.
  • outset. Al borde se le aplicará una sombra para que parezca que el elemento al que se aplica sobresale del lienzo.
  • ridge. Se representará un inset inmediatamente dentro de y junto a un outset.
  • solid. El borde es una línea continua sin sombra.

Cuando se utiliza la propiedad abreviada border-style (estilo de borde), ésta acepta hasta cuatro valores que se aplican de la misma manera que los valores abreviados margin (margen).

La práctica de oscurecer un borde (en lugar de omitirlo) se controla con las propiedades -color.

Las propiedades border-color

Para terminar, es posible establecer cualquier color en cualquier borde concreto, tanto con una única propiedad como las que se acaban de enumerar, como con la propiedad abreviada border-color (color de borde).

Ved también

Podéis consultar la explicación de la propiedad abreviada de margin (margen) en el subapartado 27.4 para saber más detalles sobre los resultados de proporcionar menos de cuatro valores.

De la misma manera que background-color, border-color puede adoptar un valor de transparent. Esto puede ser útil para los casos límite que necesitan una composición consistente pero no un uso consistente de los bordes.

La propiedad abreviada border y sus cuatro primos, con más detalle

Al contrario que las distintas propiedades de borde -width, -style y -color, estas cinco propiedades permiten definir las tres características de los cuatro bordes de un objeto o de cualquier borde concreto en cualquier momento. Los valores abreviados de border (etc.) incluyen alguna o todas las propiedades de anchura, estilo y color que se aplican a un borde; la única limitación es que se debe hacer referencia o bien a un único lado cualquiera de un elemento o bien a los cuatro a la vez.

Tened en cuenta la siguiente regla de border:

#borderShorthandExample {
   border: 2px outset rgb(160,0,0);
   padding: .857em;
   background-color: rgb(255,224,224);
}

Un elemento sobre el que se haya aplicado la norma anterior, presentará exactamente este aspecto.

Cuando se omite un valor de una regla abreviada de border, el elemento representado mostrará un resultado por defecto:

  • La anchura del borde la determinará el navegador.
  • El estilo del borde será solid.
  • El color del borde será idéntico al color aplicado al elemento en cuestión.

Crear reglas: la razón de ser de cinco propiedades abreviadas de borde en vez de una sola

Las “reglas” que se mencionan aquí son líneas trazadas sobre una composición y no directrices que haya que seguir. Estas líneas mejoran el contraste entre un elemento y el espacio que tiene alrededor y, en la mayoría de los casos, contribuyen a crear la ilusión de profundidad en una composición. Este último resultado se ejemplifica por la existencia de los estilos de borde inset y outset.

Si bien estos mismos efectos pueden conseguirse colocando bordes en torno a los cuatro lados de un elemento, la habilidad para trazar líneas definidas con precisión en una composición permite al diseñador alcanzar un control considerable sobre los detalles.

¿…Y por qué tantas propiedades? Sólo son bordes, ¿no?

Cuando se crea una composición que exige mucha pericia de un experto en estilos, siempre existe la necesidad de tener en cuenta casos límite.

Ved también

Podéis ver los casos límite en el apartado 27 sobre los márgenes.

A causa del modo como se ejecutan los diseños de los sitios, os encontraréis muchos casos en los que algún elemento pueda llegar a tener propiedades estructurales parecidas a otros elementos de un documento pero que tenga requisitos de presentación diferentes. En estos casos, tiene todo el sentido del mundo escribir una regla para el caso más común y reglas adicionales para cada uno de los casos límite. Por este motivo, existen los valores auto (automático) e inherit (heredar): para utilizar un estilo predeterminado como caso límite.

En el caso de los bordes, los casos límite puede ser que requieran la modificación de una sola característica de un borde de un único lado de un elemento, y cuando se es lo bastante sabio para seguir el principio KISS, normalmente lo mejor es cambiar únicamente los detalles que sean estrictamente necesarios.

Ved también

Podéis ver el principio KISS en el subapartado 27.4 de este módulo.

Demostración 2

Determinadas secciones del documento deberían decorarse con reglas y bordes.

h1 { border-bottom: 1px solid rgb(153,153,153); }
.pullQuote { border: 1px solid rgb(153,153,153); }

Archivo fuente de:Ejemplo con una regla inferior en el título y un borde alrededor del texto destacado

Archivo fuente de:Hoja de estilo de la demostración 2

30.1.3. Cuando sólo con los márgenes no es suficiente: propiedades padding

Encontraréis elementos con colores de fondo de tonos secundarios o destacados que necesitan canales entre el contenido y los márgenes. También puede ser que necesitéis incluir espacio entre los bordes y el texto que hay cerca.

En estos casos y en muchos otros os serán muy útiles las propiedades padding (relleno), padding-top(relleno superior), padding-right (relleno derecha), padding-bottom (relleno inferior) y padding-left(relleno izquierda). Estas propiedades insertan espacio negativo entre los márgenes o bordes de un elemento y su contenido. Podéis ver la figura 1 anterior como claro ejemplo de la relación entre márgenes, bordes y relleno.

Ved también

Podéis ver la figura 1 en el subapartado 30.1 de este módulo.

Estas propiedades se comportan exactamente igual que las propiedades de margen pero con las excepciones siguientes:

  • Los valores auto son funcionalmente inútiles en referencias a las propiedades de relleno.
  • Los valores negativos de relleno son inválidos.
  • El relleno nunca se colapsa.
  • Los valores de margen no se aplican a los elementos en línea, pero los valores de relleno sí.

Ved también

Podéis ver las propiedades de margen en el subapartado 30.1 de este módulo.

Demostración 3

Los canales deberían aplicarse a los elementos a los que ya se han aplicado bordes previamente.

body { padding: 0; }
   h1 { padding: .5em 0 .5em 0; }
   .pullQuote { padding: .5em; }

Archivo fuente de:Ejemplo de inserción de canales adyacentes a los bordes previamente aplicados al título y al texto destacado

Archivo fuente de:Hoja de estilo de la demostración 3

30.2. Trabajar con la anchura y altura de los elementos

Pueden modificarse las dimensiones de la mayoría de los elementos.

Ved también

Anteriormente en el subapartado 30.1.1, cuando hablábamos de los márgenes auto, ya se ha demostrado que la mayoría de los elementos se pueden modificar.

Las propiedades CSS utilizadas para modificar las dimensiones de los elementos son: width, height, min-width, max-width, min-height y max-height. Estas propiedades pueden separarse de (o enlazarse a) las dimensiones del contenido de los elementos con la propiedad overflow.

También hay una propiedad clip (recorte) que esconde partes de un elemento dentro de los márgenes. Sin embargo, no hablaremos de ello en este apartado a causa de sus limitadas posibilidades de uso.

30.2.1. Conceptos básicos de width y height

En general, width y height producen exactamente los resultados que cabría esperar. No obstante, su uso implica algunas notas importantes.

  • width y height no pueden aplicarse a elementos inline hay varios elementos (como span,strong y em) que ignoran la aplicación de los valores width y height en circunstancias normales.

Ved también

Podéis ver una lista de los elementos que ignoran la aplicación de los valores width y height en el subapartado 30.3 de este módulo.

  • … excepto a las imágenes, a las que se les puede asignar width y height aunque sean elementos en línea. La Recomendación CSS 2.1 habla de las imágenes como elementos “sustituidos”, lo que significa que los navegadores siempre deberían tratarlas como si tuvieran dimensiones estáticas. Por este motivo, estas dimensiones pueden modificarse arbitrariamente.
  • width y height sólo son dos de las propiedades que pueden afectar a las dimensiones funcionales de un elemento. Por lo tanto, es fácil encontrarse en situaciones en las que un elemento sea demasiado pequeño (normalmente demasiado estrecho) para contener el contenido como debería, lo que provoca errores.

Ved también

Podéis ver cómo las propiedades pueden afectar a las dimensiones funcionales de un elemento en el subapartado 30.3 de este módulo, que trata sobre el modelo de cajas de CSS.

  • Los errores de representación de Microsoft Internet Explorer (IE) hacen necesario especificar las parejas de valor/propiedad de width o height para algunos elementos. Hay algunas peculiaridades del motor de representación de IE que sólo pueden resolverse con la fuerza bruta. La mayoría de estas peculiaridades son bien conocidas y se eliminarán de IE 8, pero hasta que esta versión sustituya a sus predecesoras en el mercado, este problema seguirá siendo un caso de prueba inevitable. PositionIsEverything.net y la wiki de discusión de CSS ofrecen mucha información sobre este asunto y técnicas para resolverlo.
  • De vez en cuando, los algoritmos de redondeo provocan diferencias fuera de especificación en los navegadores que muestran los contenidos con medios de visualización LCD, LED o CRT (type="screen"). El tipo de medio screen (pantalla) requiere que todas las unidades se conviertan en medidas de píxeles, de manera que la imagen puede quedar diferente en cada navegador.

30.2.2. min-width, max-width, min-height y max-height

En ocasiones os encontraréis situaciones en las que necesitáis limitar el tamaño de un elemento, generalmente para garantizar que una columna de tamaño proporcional conserve siempre una anchura legible. Las distintas propiedades min- y max- responden a este requisito. Del mismo modo que con widthy height, los resultados que pueden esperarse de utilizar estas propiedades son bastante previsibles en realidad.

Demostración 4

Se colocaron márgenes auto a la izquierda y a la derecha del contenedor de la página. Ahora es necesaria una width para que los valores de margen tengan sentido. Además, el plan es asignar un valor float al texto destacado de manera que también obtenga una anchura.

#main { width: 42em; }
.pullQuote { width: 14em; }

Archivo fuente de:Ejemplo de cambio de la anchura del contenedor del documento y del texto destacado

Archivo fuente de:Hoja de estilo de la demostración 4

30.2.3. Desbordamiento: poner barreras al código o dejarlo libre

Cuando se establece la width o la height de un elemento, a veces es necesario pensar qué resultados son deseables en caso de que los contenidos de este elemento ocupen más espacio del que hay disponible. Esto es especialmente cierto para los sitios con contenido generado por el usuario y con especificaciones de composición estrictas.

La propiedad overflow (desbordamiento) y sus cuatro valores válidos (visible, hidden, auto y scroll) existen para hacer frente a estas circunstancias. En la figura 5 puede observarse el efecto que tienen cuando se aplican a un elemento cuyo contenido se desborda de los límites de su caja.

Los efectos de la propiedad de desbordamiento de CSSFigura 5. Los efectos de la propiedad de desbordamiento de CSS

Los resultados de los cuatro valores de overflow

  • visible (por defecto). El contenido que sobrepasa las dimensiones de la caja de un elemento se muestra sin afectar al flujo o los márgenes de los elementos adyacentes. En consecuencia, puede parecer que el contenido de un elemento choque con el contenido de un elemento adyacente. En subapartados posteriores, se habla de las técnicas para evitar esta situación y casos especiales provocados por problemas de representación en IE.
  • hidden. Cualquier contenido que esté fuera de los límites de un elemento quedará escondido.
  • auto. Las dimensiones de un elemento estarán limitadas igual que cuando se utiliza el valor hidden(escondido), pero se crearán las barras de desplazamiento que sean necesarias para que el contenido que no quepa sea accesible al visitante.
  • scroll. Se incorporarán barras de desplazamiento verticales y horizontales al elemento aunque no sean necesarias.

30.3. Los modelos de caja de CSS: hacer que todo encaje

Ahora que ya hemos hablado de las propiedades fundamentales de composición, es el momento de descubrir cómo el navegador representa la anchura de un elemento según sus propiedades de CSS y cómo evitar que los elementos creen errores en las composiciones. Algunos resultados tendrán todo el sentido del mundo y otros parecerán horriblemente antiintuitivos.

30.3.1. Elegir las unidades adecuadas para la composición

Tal como sucede con el texto, el tamaño de los elementos puede ajustarse con unidades proporcionales como % o em, o con unidades estáticas como px. Otro elemento que se debe tener en cuenta es que el lienzo del navegador siempre tiene un tamaño de un valor estático que no se puede asumir sin utilizar un script en el lado del cliente para recuperar el tamaño de la ventana o cambiarlo, técnicas que se ajustan mal a las exigencias de la accesibilidad, usabilidad y portabilidad de medios.

La regla principal de aplicar tamaño a los elementos: mezclar unidades proporcionales y estáticas con cuidado, o no hacerlo

El valor por defecto tanto de width como de height es auto, que es una directiva que significa: “Utiliza el espacio disponible”. El resultado de los elementos de bloque es que su width computada ocupa todo este espacio. En cuanto a la height, los elementos se amplían por defecto para incluir su contenido.

Si cambiáis los valores de width y height, debéis ir con mucho cuidado para garantizar que el contenido de un elemento encaje (con los márgenes, los bordes y el relleno) con la anchura que habéis especificado. La manera más fácil de hacerlo es llevar a cabo el proceso siguiente:

  1. Pensad en el ancho máximo que pueda tener vuestra composición teniendo en cuenta las resoluciones de visualización habituales y/o el tamaño de la tipografía. En el momento de escribir estas líneas, esta anchura será normalmente de unos 1.024 píxeles. Un valor muy común que se suele usar es el de 960 píxeles puesto que, por un lado, es muy fácil de dividir en hasta 12 columnas y, por otro, que muchos navegadores de dispositivos móviles tienden a asumir que las páginas web tienen este ancho.
  2. Cread un elemento contenedor para todo el documento ajustado a una anchura determinada inferior a la calculada en el paso #1.
  3. Utilizad el mismo tipo de unidad cuando establezcáis las propiedades de composición de los elementos en el elemento contenedor creado en el paso #2.

Elegir el tipo de unidad adecuada para la composición: ventajas y desventajas

Unidad Ventajas Desventajas
Tabla 1. Ventajas y desventajas del porcentaje, de em y de unidades de píxel que especifiquen propiedades de composición.
em Es más adecuado para crear cuadrículas de composición muy precisas en dos dimensiones.

Cuando se utiliza en relación con contenedores de documentos, posibilita composiciones que se amplían o se contraen según el tamaño del texto central.

Las dimensiones computadas de los elementos se convierten en fácilmente previsibles.

Puede ser que las unidades fraccionarias se amplíen o se contraigan con ligeras diferencias entre navegadores.

Para conseguir los mejores resultados, todos los valores de font-size y line-height del documento deberían establecerse en valores explícitos y previsibles.

porcentaje Es más adecuado para composiciones totalmente flexibles.

Es más fácil para crear elementos como columnas iguales.

Para evitar errores, quizá se necesiten elementos contenedores adicionales.

Puede resultar en elementos anchos de manera inaceptable o estrechos.

Los resultados dependen mucho del contexto.

px Ofrece el mayor control sobre la composición.

Elimina la mayoría de la variación en la composición entre navegadores.

Es el menos adecuado para requisitos de accesibilidad y aceptación de todo tipo de medios.

Es el más susceptible de causar errores.

30.3.2. Los componentes del modelo de cajas

En realidad, el modelo de cajas sólo es una serie de directivas que definen cómo interactúan entre sí las diferentes especificaciones de composición de un elemento. Los componentes que incluye el modelo de caja son:

  1. Lienzo de documento.
  2. Márgenes.
  3. Bordes.
  4. Relleno.
  5. Anchuras y alturas de los elementos.
  6. Propiedades de elementos hijo.

El último de estos elementos incluye a los otros cinco. Sin embargo, para simplificar, este subapartado se centrará en las relaciones sencillas de padre-hijo, y se reserva el tema de las interacciones de modelos de caja de múltiples niveles para futuros apartados que tratarán con más detalle los puntos de la composición de página.

30.3.3. El modelo de caja del W3C: todo es acumulable

La regla básica es que la anchura o altura computada de un elemento es igual a:

margin + border + padding + (width|height)

En muchos casos, la width y/o height se establecerán en su valor predeterminado de auto, lo que significa que la zona del lienzo reservada para el contenido es igual a:

lienzo_disponible - margin - padding - border

En una expresión de este tipo, lienzo_disponible es un valor discreto en sí (aunque a menudo autocomputado), del que se restan las cantidades correspondientes a márgenes, bordes y relleno. Este número es de gran importancia para la anchura de los elementos porque los errores de cálculo de anchura que cometa un diseñador tendrán la desagradable consecuencia de provocar que aparezca una barra de desplazamiento horizontal en la ventana del navegador. Adicionalmente, los navegadores siempre sitúan los elementos en el margen izquierdo del lienzo del navegador, ya que, en caso contrario, se desbordan fuera del margen derecho de la ventana del navegador si no se especifica lo contrario.

Fijaos en la siguiente regla de hoja de estilo:

#myLayoutColumn {
   width: 50em;
   margin: 1.5em auto 1.5em auto;
   border: .1em;
   padding: .9em;
}

Como ya hemos comentado en la explicación de las propiedades del margen, se puede esperar que#myLayoutColumn se centre en su elemento contenedor, independientemente de si el contenedor es body o algo creado por el grupo de producción.

Además, también se puede esperar que la anchura no marginal computada prevista sea:

.1em + .9em + 50em + .9em + .1em = 52em

En los medios screen, el navegador tomará este valor, redondeará todos los valores de manera separada hasta el píxel más próximo y representará el resultado de acuerdo con ello.

Márgenes proporcionales y relleno

Los márgenes proporcionales y el relleno se computan en relación con la width computada del elemento contenedor. Por poner un ejemplo, si especificáis margin: 20% para un elemento incluido en un elemento que tiene 800 píxeles de anchura, el margen que se representa alrededor del primer elemento será de 160 píxeles por todos los lados (ya que el 20% de 800 son 160).

Si a este mismo elemento se le asigna padding: 5%, la anchura computada del contenido será de 400 píxeles:

20% + 5% + 5% + 20% = 50%
0.50 × 800 = 400
800 - 400 = 400

30.4. Trabajar con flujo de documentos

Los próximos apartados tratan de la creación de composiciones de múltiples columnas, de manera que debemos presentar tres propiedades de CSS que aún nos faltan en este apartado: display, float y clear.

30.4.1. Tipos de elementos y la propiedad display

Excepto las partes de html, body y table, todos los elementos de la Recomendación de HTML relacionados con contenido primario tienen un tipo asociado “en línea” o “bloque”. Cada tipo determina el comportamiento de la composición por defecto de varias maneras.

  1. En línea
    • El texto y las imágenes que hay inmediatamente delante y/o detrás de elementos en línea se representan sobre una línea base común con el contenido del elemento en línea, a no ser que sean tan largos que se superpongan sobre el límite del elemento contenedor, en cuyo caso el contenido insertado acabará sobre una nueva línea base por debajo de la primera.
    • Las líneas de texto dentro de elementos en línea se disponen con saltos de línea blandos según sea necesario (o según se pueda), excepto en los casos en los que este comportamiento se modifica por el uso de la propiedad white-space (espacio en blanco).
    • Las propiedades margin, width, height y float en reglas de hoja de estilo aplicables a estos elementos (excepto img y object) se ignoran.
    • Los elementos en línea sólo pueden contener texto u otros elementos en línea.
  2. Bloque
    • Estos elementos se representan como bloques discretos dentro de sus contenedores.
    • A no ser que se les asigne un valor float de left o right, siempre se representarán con saltos de línea precedentes y posteriores.
    • En general, los saltos de línea entre elementos de bloque anidados que no tienen ningún contenido entre ellos se colapsarán.
    • Los elementos de bloque con una anchura de auto (la predeterminada) siempre se ampliarán para llenar toda la anchura que puedan.

La propiedad display (visualizar) tiene tres valores que se utilizan habitualmente: block, inline y none, de los cuales dos hacen referencia a los tipos de elemento correspondiente. El efecto de cambiar el valor de display de un elemento es provocar que un elemento en línea se comporte como un elemento de bloque, que un elemento de bloque se comporte como uno en línea o modificar la representación del documento como si el elemento (y todo su contenido) no existiera en absoluto.

De hecho, es fundamental saber qué elementos se corresponden con qué tipos por defecto. Las relaciones se exponen brevemente en la tabla 2:

Elemento Tipo Subtipo Notas
Tabla 2. Elementos de HTML de uso frecuente y sus tipos. Sólo se colapsarán los márgenes entre dos elementos de bloque adyacentes del mismo subtipo.
a en línea especial
abbr en línea frase
address bloque En la práctica se comporta de manera parecida a p.
blockquote bloque
body Engloba todo el lienzo del documento; normalmente tiene un margen (en IE, Firefox y Safari) o un relleno (en Opera) de10px cuando el medio es screen.
cite en línea frase
div bloque
em en línea frase
fieldset bloque Normalmente se representa por defecto con border: 1px black;.
form bloque
h1... h6 bloque título
input en línea control de formulario
img en línea especial
label en línea control de formulario
li bloque Tipo de elemento no especificado en la Definición de Tipo de Documento, pero este elemento puede contener elementos de bloque o insertados; la Recomendación CSS 2.1 completa reserva un valor display para elementos de lista.
ol bloque lista
p bloque Sólo puede incluir elementos en línea, que normalmente se representan con márgenes superiores e inferiores.
span en línea especial
strong en línea frase
table bloque
ul bloque lista

Demostración 5

¿Y si eliminamos la anotación “Prólogo” del título únicamente para esta demostración?

.sectionNote { display: none; }

Archivo fuente de:Ejemplo con eliminación de la parte superflua de un apartado

Archivo fuente de:Hoja de estilo de la demostración 5

30.4.2. Hacer que algunos elementos fluyan en torno a otros: la propiedad float

Un gato con tocino pegado en el lomo con cinta adhesiva.

Hay una foto colocada a la izquierda de este párrafo. Prácticamente todos veréis que el texto siguiente fluye de manera natural a su alrededor, aunque puede que algunos primero debáis dejar de preguntaros por qué un famoso escritor de novelas de ciencia ficción decide pegar tocino a su gato con cinta adhesiva, por muy aburrido que esté. Los atributos del HTML pueden utilizarse para especificar el comportamiento de la composición que podéis observar, pero en este caso los resultados se han conseguido con CSS.

Tal como os podéis imaginar, la pareja propiedad/valor que lo hace posible es float: left;. En futuros apartados se tratarán las sutilezas de trabajar con elementos flotantes, pero, de momento, es necesario tocar este tema de pasada. float: right también es una pareja de propiedad/valor perfectamente útil, y para aquellas ocasiones en las que necesitáis contradecir una asignación de class que invoque float, podéis especificar float: none.

La propiedad float sí que tiene unas cuantas instrucciones de uso:

  • Un valor float sólo tendrá relevancia si se aplica a un elemento de bloque con una width explícita.
  • Las propiedades float, clear y margin aparecen juntas en las reglas de hojas de estilo para crear columnas en una composición.
  • Es complicado hacer que un elemento flotante se estire hasta llegar a la parte inferior de su contenedor, pero no es imposible. La manera habitual de hacerlo se denomina faux-columns.

Demostración 6

Ya hemos hablado de la colocación de un valor float en el texto destacado, de manera que ahora lo haremos y veremos cómo queda. Y, ya que estamos, añadámosle un poco de color de fondo para que se distinga mejor del contenido principal.

.pullQuote { float: right;
background-color: rgb(204,204,204); }

Archivo fuente de:Ejemplo de hacer ‘flotar’ el texto destacado hacia el margen derecho

Archivo fuente de:Hoja de estilo de la demostración 6

30.4.3. Forzar elementos por debajo de sus predecesores flotantes: la propiedad clear

De la misma manera que la propiedad float, a la propiedad clear puede asignársele uno de los valoresleft, right o none. El valor both (ambos) también es posible.

Aunque la propiedad float rige cómo debería fluir el contenido de los elementos subsiguientes a su alrededor, la propiedad clear rige cómo debe fluir un elemento en torno a todos sus vecinos; en la mayoría de los casos, no debería fluir en absoluto.

La figura 6 demuestra el funcionamiento de clear: left; en una composición en la que a dos elementos consecutivos se les han asignado valores idénticos de height y valores de float de left y right:

Composición de tres columnas adyecentes con un pie inferior. La columna izquierda tiene identificador #fLeftWidget, una anchura de 25%, una altura (height) de 14 em y el valor de left asignado a la propiedad float. La columna derecha tiene identificador #fRightWidget, una anchura de 25%, una altura (height) de 14 em y el valor de right asignado a la propiedad float. El pie tiene identificador #clearWidget y el valor de left asignado a la propiedad clear. En la columna central hay un texto en latín.Figura 6. clear:left permite que la caja inferior corte las dos columnas porque son de la misma altura.

En la demostración anterior, el flujo por defecto de #cLeftWidget lo colocaría justo por debajo del texto en latín, es decir, entre #fLeftWidget y #fRightWidget.

Pensad qué sucede cuando el primero de la misma colección de elementos se hace más corto que su hermano que toca a la derecha, tal como se ve en la figura 7.

La misma composición de tres columnas y un pie de la imagen anterior. Ahora la columna de la derecha se solapa con el pie. En la columna izquierda se ha reducido el valor de la propiedad height de 14 a 10.5 ems.Figura 7. Cuando la columna derecha es más larga que la columna izquierda,clear:left no cortará las dos columnas y, por lo tanto, hay que utilizarclear:both.

En el primer ejemplo, el valor clear del elemento final se establece en left para demostrar este hecho: como los dos elementos con float son igual de altos, el elemento con clear se coloca automáticamente por debajo de los dos. Sin embargo, el segundo ejemplo demuestra que para conseguir el mismo resultado con elementos con float de alturas diferentes, hay que utilizar clear: both;.

Esta información sobre la propiedad clear está pensada sólo como una pequeña introducción a sus efectos, ya que los detalles de la técnica asociada a su uso se tratarán en apartados posteriores.

Resumen

Entre las diferencias entre motores de representación, la necesidad de incluir una amplia gama de terreno definido tradicionalmente y la inhabilidad para predecir las dimensiones exactas de una ventana de navegador, la composición de documentos web está llena de dificultades y riesgos. A pesar de todo, el nivel habitual de soporte de CSS ha avanzado hasta el punto de que no es difícil conseguir que los documentos web den resultados aceptables en cualquier navegador.

Preguntas de repaso

Preguntas a las que deberíais poder responder:

  1. ¿En qué circunstancias es mejor utilizar el valor abreviado como margin o una única propiedad de margen como margin-top?
  2. Cuando las propiedades abreviadas de margin, padding y border-width se presentan con los cuatro valores, ¿en qué orden se aplican estos valores a los cuatro lados de un elemento?
  3. Si quisierais colocar una regla bajo el texto de cada título de un documento, ¿qué propiedad utilizaríais?
  4. ¿Qué valor de border-style utilizaríais para hacer que un elemento parezca un botón de interfaz?
  5. Sí o no: ¿especificar un borde alrededor de un elemento también creará automáticamente un canal en torno al elemento?
  6. Si creáis un elemento que no sea tan ancho como su contenedor, ¿qué pareja de propiedad/valor debéis establecer para garantizar que el elemento quede centrado horizontalmente en su contenedor?
  7. Sí o no: si colocáis un elemento contenedor dentro de body y establecéis la width en un valor superior a 100%, ¿cambiará el comportamiento del lienzo del documento?
  8. Si una imagen es demasiado grande para el elemento contenedor, ¿qué pareja de propiedad/valor utilizaríais para garantizar que no se creen errores en la composición de la página y por qué?
  9. Si asignáis un valor de display de block a un elemento a (enlace) y dais una altura y una anchura razonables a este elemento, ¿cómo cambia el comportamiento del enlace cuando se pasa el ratón por encima en un medio de visualización screen?
  10. En circunstancias normales, un elemento de bloque se amplía hasta llenar la anchura de su contenedor (menos márgenes, bordes y relleno). Por defecto, ¿cambia realmente este comportamiento cuando este elemento va precedido de un elemento con float, o sólo parece que cambia?
  11. Si pretendéis aplicar un valor float a un elemento, ¿qué otra propiedad también debéis establecer en este elemento?
  12. Si quisierais estar del todo seguros de que un elemento siempre se ampliará para llenar la anchura de su contenedor, ¿qué parejas de propiedad/valor estableceríais?

Lecturas complementarias

Bergevin, Holly; Gallant, John (2006). Explorer exposed. Position Is Everything. [Fecha de consulta: 1 de julio del 2008].

Bos, Bert y otros (2007). Cascading style sheets level 2 revision 1 (CSS 2.1) specification. World Wide Web Consortium. [Fecha de consulta: 30 de junio del 2008].

Raggett, Dave y otros (1999). HTML 4.01 specification. World Wide Web Consortium. [Fecha de consulta: 30 de junio del 2008].

Raymond, Eric; Steele, Guy (eds.) (2003). Brute force. The Jargon File (Version 4.4.7). [Fecha de consulta: 30 de junio del 2008].

Scalzi, John (2006). Clearly you people thought I was kidding. Whatever. [Fecha de consulta: 30 de junio del 2008].

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial – Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :

UOC:Creación de estilos de texto con CSS

Logo de Mosaic

CSS
Creación de estilos de texto con CSS

29. Creación de estilos de texto con CSS

Ben Henick. 3 de octubre del 2008. Publicado en: alineación, texto, aliasing, fuente, tipografía

Como la web es una colección de documentos, algunos dinámicos, otros estáticos y otros funcionales, las convenciones con las que se les aplica un formato se extraen de nuestro mejor punto de referencia: los seis siglos de historia de la imprenta. Y esto incluye la tipografía. Sin embargo, la web es un medio nuevo y diferente, y la tipografía para sitios web necesita un conjunto de competencias de diseño editorial muy diferente y, además, está mucho más limitada.

Este apartado se basa en los conocimientos adquiridos previamente en el curso y ofrece una guía detallada para aplicar estilo a un texto de manera efectiva utilizando CSS.

Nota

A continuación, se enlaza con varios ejemplos que demuestran las técnicas mencionadas; podéis descargaros los 29 ejemplos del apartado con el fichero “article29_examples.zip”.

Descargad los ejemplos en:article29_examples.zip

Los contenidos de este apartado son los siguientes:

29.1. Repaso de tipografía en la web

En la web, los diseñadores tienen mucho menos control sobre la presentación que en otros medios. Este hecho se ve claramente cuando se trata de las propiedades del lienzo del documento como el tamaño, la resolución y el contraste. También hay muchas limitaciones con respecto a la calidad de la tipografía de la web, un tema que ya se ha tratado.

Ved también

Podéis ver los conceptos básicos de tipografía en el apartado 11 del módulo “Conceptos de diseño web”.

Otros aspectos que merecen ser tratados son el contraste y la facilidad de lectura, de los cuales hablaremos a continuación.

29.1.1. Contraste

El contraste del tipo de letra, la facilidad con la que pueden distinguirse las líneas del espacio en blanco y de las líneas adyacentes, depende de varios factores como la luminosidad, el color, el tamaño y la composición. Se menciona en este apartado por el mero hecho de destacar que el texto de contraste bajo se debería establecer en el mayor tamaño posible.

29.1.2. Facilidad de lectura

En un contexto de diseño utilizamos la palabra inglesa legibility para referirnos a la facilidad con la que podemos buscar fragmentos específicos de información, mientras que con su sinónimo readabilty nos referimos a la facilidad de comprensión de un texto. Las decisiones de diseño que potencian una u otra calidad se enumeran en la tabla 1.

Objetivo Longitud de línea Canales y espacio interlineal Tipos Justificado
Tabla 1. Características de la facilidad de lectura.
‘Readability’ moderada aumentados serif inexistente
[izquierda]
‘Legibility’ corta normales sans-serif variable, a menudo completo

En el próximo apartado, “El modelo de composición de CSS”, se hablará sobre la anchura óptima de columna.

29.2. Propiedades CSS de fuentes: cambiar el aspecto del texto

La composición de textos es la manipulación del texto con respecto a la composición general y al aspecto de las letras y las palabras. Esta segunda tarea se lleva a cabo mediante las propiedades CSS de fuente, de las que hablaremos a continuación.

29.2.1. font-size y selección del tipo de unidad

Como los documentos generalmente varían de tamaño de fuente más que de tipo de letra y las variantes de fuentes suelen manipularse con las hojas de estilos de usuario, la propiedad principal de interés es font-size (tamaño de la fuente). Cuando se utiliza en una regla, va seguida de un valor que especifica una medida de unidad o, en ocasiones, un tamaño de palabra clave (como pequeño o medio).

Cómo se hace

La declaración de font-size más importante de una hoja de estilo es más o menos así:

body {...
   font-size: 14px;
...}

La herencia hace que todas las especificaciones de tamaño de la fuente de un documento se basen en el tamaño declarado por el documento body, ya sea en la hoja de estilo del navegador o en la nuestra.

El valor por defecto típico de 16 píxeles de los navegadores es un buen punto de inicio para la parte central del texto, pero la mayoría de los visitantes pueden leer sin problemas tipos de letra más pequeños. Por lo tanto, la mayoría de los diseñadores eligen un tamaño más pequeño, de unos 11-14 píxeles.

La herencia se aplica al tamaño del tipo de letra cuando se especifica un tamaño relativo y cuando se especifica un tamaño de palabra clave para un elemento con un progenitor cuyo tamaño no se especifica con una palabra clave.

¿Qué tipos de unidad pueden aplicarse en las propiedades de texto CSS?

En las reglas de hojas de estilo, los tipos de unidad que suelen aplicarse más a menudo al texto son píxeles (px), ems (em, se explica más adelante), porcentajes (%) y puntos (pt). En la tabla 2 se describe el comportamiento del texto redimensionado con estas unidades.

Unidad Definición1 Uso
Tabla 2. Unidades de CSS convenientes para dimensionar un texto
1 ∆ es la proporción de cambio en el tamaño de la fuente a partir del valor heredado.
2 Sólo se hereda el valor del tamaño no especificado en palabra clave más cercano.
Ems de CSS ∆ = x 1,333 em
Palabras clave Definido por el agente de usuario2 large, etc.
Porcentaje ∆ = x / 100 133.3%
Píxels Unidad absoluta 16 px
Puntos Unidad absoluta 12 pt

Otros tipos de unidad posibles son las palabras clave de tamaño, las picas (pc, una pica equivale exactamente a 12 puntos) y las exes (ex). También están disponibles la mayoría de los otros tipos de unidad que acepta CSS2, pero no se utilizan casi nunca cuando se trabaja con texto.

¿Para qué sirve tener tantos tipos de unidad diferentes?

Como se indica en la tabla 2, hay unidades de tamaño relativo y absoluto. Las palabras clave incluyen ambas características, es decir, tamaño absoluto entre sí, pero relativas al valor no especificado en palabra clave que heredan. La mejor manera de utilizarlas es ésta:

  • Los tamaños absolutes (px, unidades estandarizadas como pt) es mejor aplicarlas a composiciones que no cambien en relación con las propiedades de lienzo del documento, las llamadas composiciones “fijas”, “estáticas” o “de hielo”.
  • Los tamaños relativos (em, %) deberían utilizarse en composiciones no estáticas y en situaciones en las que hay que establecer un compromiso entre la usabilidad del sitio y el control del diseñador de la composición.
  • Los tamaños de palabra clave (que se explican a continuación) deberían utilizarse cuando la usabilidad prevalezca por encima de todas las demás consideraciones del diseño.

Tamaños absolutos y usabilidad

Las versiones antiguas de Internet Explorer no permiten al visitante modificar el tamaño del texto que se ha establecido en tamaños absolutos y las interfaces de modificación del tamaño del texto de algunos navegadores que sí que permiten este nivel de control de usuario pueden costar de encontrar (los usuarios de Opera y Firefox lo tienen fácil con Shift + Ctrl/Cmd + más/menos y Ctrl/Cmd + más/menos, respectivamente). A causa de estas limitaciones, se suele establecer el font-size de body en un valor relativo, normalmente en unidades em, que se supone que el navegador controla por defecto.

¿Cuál es el equivalente físico de un píxel?

Aunque es estrictamente imposible definir o predecir las dimensiones literales de un píxel, los patrocinadores de proyectos comerciales más nerviosos suelen sorprenderse cuando descubren que el diseño de su sitio adquiere un aspecto diferente en los ordenadores de los clientes que tienen una configuración diferente de la suya y riñen al diseñador web por este motivo. Por lo tanto, puede ser útil comprender cómo funcionan los píxeles. Esta información os servirá para cuando alguien que os haya encargado crear una página web se queje de que el texto no queda exactamente igual en diferentes ordenadores.

Las empresas de software mantienen un acuerdo informal según el cual, 96 ppp (píxeles por pulgada) es un tamaño razonable. De esta manera, un texto central de 16 píxeles se imprimirá a un tamaño de una sexta parte de una pulgada o 12 puntos. En la pantalla de cristal líquido cada vez más habitual de 17″ 1280×800, un texto de 16 píxeles tendrá un tamaño aproximado de 13 puntos en la pantalla, pero en una pantalla parecida de ordenador portátil de 15″, el tamaño será de 11,44 puntos.

Estas medidas son efectivas con la configuración por defecto. La mayoría de los entornos permiten al usuario final establecer una medida habitual de ppp, de manera que siempre se darán casos diferentes.

En conclusión: un píxel es un píxel, pero todo lo demás es variable.

Ems, porcentajes y puntos según el CSS

Tradicionalmente, un em es equivalente a la altura de la “M” mayúscula de la fuente de que hablemos. Sin embargo, en CSS, la unidad em es el equivalente a la altura total de una línea; o, dicho de otro modo, para un elemento al que se le ha establecido el font-size a 14 píxeles:

1em = 100% = 14px

En entornos normales, esta declaración puede ampliarse a:

1em = 100% = 14px = 10,5pt

El aumento y la reducción del tamaño funcionan de manera multiplicativa, de modo que si hay un segundo elemento que se quiera definir con un tamaño de 16 píxeles, teniendo en cuenta la herencia habitual, todo lo que se muestra a continuación obtendría el resultado deseado:

1,143em = 114,3% diferent de 16px = 12pt

Breve comentario sobre la recomendación oficial de CSS

En ocasiones, os dirán que consultéis la Recomendación Candidata o Candidate Recommendation delWorld Wide Web Consortium para la especificación CSS. Como todas las recomendaciones del W3C, este documento puede considerarse la definición de un estándar web; algunos se siguen más que otros, tanto por parte de los fabricantes de navegadores como por los desarrolladores de webs.

Aunque es útil conocer de arriba abajo las recomendaciones del W3C, este curso se ha diseñado para proporcionar una introducción concisa y fácil de asimilar al diseño/desarrollo web y las recomendaciones del W3C pueden ser un poco pesadas. En todos los casos en los que se os pida visitar la recomendación de CSS, se os está dirigiendo a un material demasiado complejo como para justificar una explicación detallada en este apartado.

Palabras clave de tamaño

También se pueden utilizar palabras clave de tamaño, como se ha mencionado anteriormente. Hay siete, desde xx-small hasta xx-large, y medium es el valor medio (y predeterminado). La lista completa de los siete valores se muestra más adelante en la tabla 3, que incluye todas las palabras clave que aceptan las distintas propiedades CSS mencionadas en este apartado.

La recomendación de CSS ofrece una gran cantidad de información adicional sobre las palabras clave defont-size.

Demostración 1

De vez en cuando, este texto enlazará con un documento de Demostración cada vez con más estilo que mostrará las propiedades CSS de las que hablamos en su uso real. El primero de los ejemplos es el documento HTML de muestra sin ningún tipo de estilo aplicado.

Archivo fuente de:Ejemplo sin estilos

Nuevas reglas

body { font-size: 14px; }
h1 { font-size: x-large; }
.sectionNote { font-size: medium; }
.attribution { font-size: small; }

Archivo fuente de:Ejemplo con título redimensionado, atribuciones y parte central del texto aplicados

Archivo fuente de:Ejemplo de hoja de estilo de la Demostración 1

29.2.2. font-family y selección de tipos de letra

Cuando tengáis el texto con el tamaño que os guste, ya podéis pasar a seleccionar uno o dos tipos de letra. Esto se hace con la propiedad font-family, que se utiliza como se muestra a continuación en la Demostración 2.

Cuando se ofrece un valor para la propiedad font-family, hay que seguir estas reglas:

  1. Las tipografías se deben llamar exactamente como se llaman en la biblioteca de fuentes del ordenador cliente, utilizando como guía la fuente no variante.
  2. Todas las tipografías con nombre deben separarse con comas, con espacio detrás o sin él.
  3. En los casos en que el nombre de una tipografía contenga más de una palabra, hay que poner comillas simples o dobles al principio y al final. Ejemplo: 'Times New Roman‘.
  4. Hay que enumerar las tipografías por orden ascendente de posible disponibilidad. Por ejemplo, si queréis que los usuarios de Macintosh vean una página con el texto en Palatino, la declaración de valor de propiedad probablemente debería ser así: font-family: Palatino, Georgia, serif;. La Palatino es exactamente la que queréis, pero puede ser que algunos usuarios no la tengan; la Georgia tiene más probabilidades de estar disponible y se parece a la Palatino; serif hace referencia a la fuente serif predeterminada genérica; si no se dispone de la Palatino ni de la Georgia, el sistema volverá a su fuente serif por defecto.
  5. Como método de seguridad, el valor font-family siempre debería acabar con el nombre genérico apropiado, tal como se ha explicado anteriormente. En la figura 1 se muestran las tipografías que se utilizan en las familias genéricas en MacOS 10.5.

Tipografía genérica por defecto de MacOs 10.5.Figura 1. Las tipografías “genéricas” predeterminadas de MacOS 10.5 tal como quedan representadas a 24 píxeles en Safari 3.1.

En la recomendación del CSS se enumeran varias tipografías más que pueden aplicarse a cada familia genérica.

Demostración 2

Ahora que el tamaño del texto es previsible, queremos optimizar las tipografías utilizadas. Lo mejor es aplicar una tipografía sans serif al título para que sea de fácil lectura y al texto en sí, una tipografía serif.

Nuevas reglas

body { font-family: Palatino,'Palatino Linotype',Georgia, sans-serif; }
h1 { font-family: Helvetica,Arial,sans-serif; }
blockquote { font-family: Helvetica,Arial,sans-serif; }

Archivo fuente de:Hoja de estilo de la Demostración 2

29.2.3. font-style, font-variant y font-weight: cambiar los detalles

La propiedad font-style manipula la cursiva sin tener que utilizar el elemento i; sus tres valores válidos son italic, oblique y normal.

Los valores italic y oblique proporcionan resultados funcionalmente idénticos en las versiones más recientes de todos los navegadores web del mercado general, aunque hay una diferencia técnica significativa entre los dos estilos.

¿Por qué hay que utilizar la propiedad font-style cuando los elementos “em” e “i” ya parecen bastante adecuados?

Como ya hemos visto, cada uno de estos elementos tiene usos específicos. Además, la apariencia real del texto marcado con em, i, o cualquier otro elemento, puede variar entre varios navegadores.

Hay situaciones en las que el uso de em y su hermano strong pueden requerir un punto de vista diferente. Por ejemplo, supongamos que queréis dar énfasis al texto haciéndolo más grande. Lo que habría que hacer para dar un mayor énfasis sería añadir cursiva, lo que daría lugar a reglas como las siguientes:

em {
   font-size: large;
   font-style: normal;
}
strong {
   font-size: large;
   font-weight: normal;
   font-style: italic;
}

Demostración 3

En el texto de demostración no hay palabras ni fragmentos en cursiva, y las atribuciones ya contienen la cursiva necesaria gracias al uso del elemento cite. Teniendo en cuenta la falta de opciones, el título es el mejor candidato para estar en cursiva.

h1 { font-style: italic; }
.sectionNote { font-style: normal; }

Archivo fuente de:Ejemplo con título en cursiva

Archivo fuente de:Hoja de estilo de la demostración 3

29.2.4. font-variant como herramienta para resaltar pasajes cortos

La propiedad font-variant tiene dos valores posibles, small-caps y normal. Algunos diseñadores utilizan versalitas o “small caps” para resaltar la frase inicial de un texto largo o para dar énfasis a la indicación de una cita, como por ejemplo:

ABANDONAD TODA ESPERANZA LOS QUE AQUÍ ENTRÁIS.

Demostración 4

opening { font-variant: small-caps; }

Archivo fuente de:Ejemplo con la frase inicial en versalitas

Archivo fuente de:Hoja de estilo de la demostración 4

29.2.5. font-weight: negrita y la falta de ésta

La propiedad font-weight (peso de la fuente) permite modificar el nivel de negrita de cualquier fragmento de texto al que se aplique.

Los valores habituales de la propiedad font-weight son normal y bold. La recomendación CSS proporciona los varios valores posibles.

Demostración 5

Poner el nombre de un autor en negrita es una técnica de diseño que se suele utilizar en las publicaciones periódicas, pero que aún encaja en varias situaciones de la web.

author { font-weight: bold; }

Archivo fuente de:Ejemplo con el nombre del autor en negrita

Archivo fuente de:Hoja de estilo de la demostración 5

29.2.6. La propiedad abreviada fuente

Muchas propiedades de texto pueden proporcionarse en el valor para una única propiedad, si procede, de una manera parecida a las propiedades de fondo.

A continuación, se muestra un ejemplo de regla abreviada de fuente:

h1 { font: italic normal bold x-large/1.167em Helvetica,Arial,sans-serif; }

Para obtener los mejores resultados, el valor dado a esta propiedad debería incluir los valores pretendidos para todas las propiedades individuales siguientes exactamente en este orden, separadas con espacios:

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size, seguido, si es necesario, de una barra y del valor de line-height (podéis verlo a continuación).
  5. font-family, que en este caso también puede ser una palabra reservada que especifica una fuente de sistema; los valores múltiples deberían estar separados por comas, pero no por espacios.
Propiedad Valores
Tabla 3. Valores de palabra clave aceptados para las propiedades que se han tratado en este apartado
font-family cursive, fantasy, monospace, sans-serif, serif
font-size xx-small, x-small, small, medium, large, x-large, xx-large
font-style italic, normal, oblique
font-variant normal, small-caps
font-weight bold, normal
line-height normal
text-align center, justify, left, right
text-decoration line-through, none, overline, underline
text-transform capitalize, lowercase, none, uppercase
white-space normal, nowrap, pre, pre-line, pre-wrap

29.3. Las propiedades de texto y alineación de CSS. Modificar la composición

Un especialista en estilos que trabaje con letras y palabras trata con detalles: líneas, curvas, puntos, píxeles y otras partes celulares de un diseño. Sin embargo, un diseño es todo un conjunto; tiene componentes más grandes que se destacan mediante el control de la composición principalmente a través del modelo de disposición de CSS. Además de este modelo de disposición, CSS también implementa propiedades de texto y alineación que afectan a la composición. El resto de este apartado trata sobre estas propiedades.

29.3.1. Alineación y justificación del texto

Como sucede con los entornos de procesamiento de texto, la propiedad text-align acepta cuatro valores de justificación: left, right, center y justify. Este último proporciona justificación completa: márgenes de texto visibles que son consistentes tanto por la izquierda como por la derecha de un bloque de texto.

Justificación adecuada del texto escrito en alfabetos occidentales

La mejor manera de utilizar las diferentes alineaciones disponibles es así:

  • La justificación izquierda es más adecuada para fragmentos de texto largos.
  • La justificación derecha es más adecuada para la columna de la izquierda del todo de tablas de datos y disposiciones de columna múltiple. Cuando la columna adyacente se deja justificada y colocada en el otro lado de un canal adecuadamente ancho, el resultado es mejorar la legibilidad de ambas columnas.
  • La justificación completa funciona bien para bloques pequeños, como citas de bloques y textos de ejemplo. Cuando se utiliza en fragmentos largos como texto de ancho óptimo con márgenes anchos, la justificación completa también mejora la coherencia de la maquetación.
  • El centrado se suele utilizar para los elementos de interfaz y listas en serie como las que se encuentran en los pies de página.

Demostración 6

Como la demostración se basa en un fragmento de texto de ficción extraído de un libro, ¿por qué no le aplicamos la justificación?

p { text-align: justify; }
blockquote p { text-align: left; }

Archivo fuente de:Página con justificación completa del texto central del fragmento

Archivo fuente de:Hoja de estilo de la demostración 6

29.3.2. Modificar el espaciado: las propiedades letter-spacing y word-spacing

El mismo nombre ya lo dice todo, es decir, estas propiedades permiten modificar la cantidad de espacio en blanco entre letras y palabras, respectivamente.

El uso más habitual de letter-spacing (espaciado de letra) es para dar un énfasis sutil parecido al efecto que proporciona font-variant: small-caps; también puede utilizarse para modificar sutilmente la composición de elementos de interfaz.

La propiedad word-spacing (espaciado de palabras) es mejor utilizarla para modificar deliberadamente la cantidad de palabras que es probable que aparezcan en una única línea de texto. Por ejemplo, puede utilizarse si tenéis un bloque de texto de la anchura habitual pero de tamaño de fuente atípica.

En la impresión, el espaciado de letras y el de palabras también se aplican ad hoc para evitar errores de composición, pero en la web esta técnica tiene una utilidad limitada.

Además de los valores de unidad, estas propiedades aceptan el valor normal.

Utilizar unidades em para un buen control

Cuando se cambia el espaciado entre letras de un texto, un pequeño espacio significa una gran distancia; el espaciado de letra predeterminado suele ser entre una décima y una vigésima parte de un em, de manera que los valores de letter-spacing que superen más del doble o la mitad del valor predeterminado pueden acabar haciendo que el texto sea ilegible.

Demostración 7

Al texto señal del que hablamos hacia el final le iría bien un poco de énfasis sutil… y, como la cita introductoria tiene un tamaño mayor, puede mejorarse mediante el espaciado entre palabras.

q { letter-spacing: .143em; }
.pullQuote { word-spacing: .143em; }

Archivo fuente de:Página con espaciado entre letras en los saludos propuestos en el penúltimo párrafo del fragmento

Archivo fuente de: Hoja de estilo de la demostración 7

29.3.3. Sangrar las primeras líneas: la propiedad text-indent

La propiedad text-indent (sangrado de texto) permite sangrar los párrafos de la misma manera que en el papel impreso. Además, esta propiedad y el hecho de que acepte valores negativos permite toda una serie de técnicas de maquetación avanzadas.

Los valores que acepta esta propiedad son los mismos que los que acepta font-size, además de normal.

Demostración 8

Por la misma razón que el fragmento tenía justificación completa, quizá debería tener sangrado en todas las primeras líneas de los párrafos.

p { text-indent: 1.429em; }
blockquote p { text-indent: 0; }

Archivo fuente de:Página con sangrado inicial en los párrafos del texto central

Archivo fuente de:Hoja de estilo de la demostración 8

29.3.4. Mayúsculas: La propiedad text-transform

De la misma manera que la propiedad font-variant proporciona acceso a las letras versalitas, la propiedad text-transform se ocupa específicamente de las mayúsculas. Los valores que permite cubren todas las mayúsculas, minúsculas o todo el texto inicial completamente en mayúsculas. Podéis ver la lista de los valores aceptados en la tabla 3.

Demostración 9

author { text-transform: uppercase; }

Archivo fuente de: “Página con el autor del fragmento destacado en versalitas

Archivo fuente de:Hoja de estilo de la demostración 9

29.3.5. Aplicar estilos a los enlaces y mostrar las eliminaciones: la propiedad text-decoration

Esta propiedad permite poner líneas por encima, por debajo y a través del texto. Su uso más habitual es para manipular el subrayado por defecto de los enlaces, aunque en las wikis o en textos satíricos y en otros entornos también va muy bien para tachar palabras. En estos casos, se utilizan los elementos ins (insertar) y del (eliminar), que ofrecen estilos equivalentes a:

ins {
text-decoration: underline;
}
del {
text-decoration: line-through;
}

Incluso sin reglas de hoja de estilo hechas a medida, ins y del aplican estilo de etiquetado de la siguiente manera:

Mark Twain Benjamin Disraeli es famoso por sus dichos agudos, como “hay mentiras, grandes mentiras y estadística”.

Márgenes, no subrayados, abbr

Algunos diseñadores suelen modificar el aspecto del elemento abbr para que aparezca con un subrayado que a primera vista parece una línea de puntos. No obstante, en realidad este efecto se consigue con un valor de border-bottom. (Recordad que algunos navegadores lo hacen automáticamente, pero otros, como IE 6, no.)

Demostración 10

source a { text-decoration: none; }

Archivo fuente de:Página con eliminación del subrayado del enlace a fuente del texto de muestra

Archivo fuente de:Hoja de estilo de la demostración 10

29.3.6. Ajuste del espacio interlineal y line-height

Es bien sabido que disponer de espacio en blanco entre líneas tiende a aumentar su facilidad de lectura porque el espacio adicional garantiza que las astas ascendentes y las astas descendentes (podéis ver la figura 2 para encontrar una explicación) en líneas adyacentes no competirán por la atención visual.

En la imagen se ve la palabra inglesa gallantly. Se dibujan sobre ella las líneas de base y media. Se aprecia como las letras l superan la línea media y la g y la y griega cruzan la línea baseFigura 2. Las astas ascendentes son la parte de las letras que sobresale de la línea media del texto y las astas descendentes son la parte de las letras que se extiende por debajo de la línea base sobre la que descansa el texto.

Existe una tenue relación entre el font-size (el tamaño de la fuente) de un elemento y su line-height(interlineado), pero, por defecto, todos los agentes de usuario insertan algo de espacio interlineal en cada línea de texto, normalmente del 10 al 15% de la altura de las letras. Como esta cantidad por defecto cambia de una tipografía a otra, la propiedad line-height (interlínea) acepta un valor de normal además de valores numéricos.

También cabe mencionar que, al contrario que la mayoría de las propiedades CSS, line-height(interlínea) acepta valores numéricos sin unidades, que después se representan como una proporción del valor básico predeterminado.

Demostración 11

Se ha hablado mucho de la relación entre espacio interlineal y legibilidad, de modo que aquí tenemos la demostración.

p { line-height: 1.5; }
attribution { line-height: 1.5; }

Archivo fuente de:Página con aplicación de una cantidad adecuada de interineado en un fragmento de texto

Archivo fuente de:Hoja de estilo de la demostración 1

29.3.7. Suplantar pre y br: La propiedad white-space

Estrictamente hablando, los saltos de línea forzados son un elemento de presentación, aunque hay muchas circunstancias en las que son un elemento deseable para el diseño de un sitio. Junto con la costumbre de los navegadores de cortar las líneas en espacios arbitrarios, ejercer el nivel de control deseado únicamente con el etiquetado puede ser complicado.

El elemento pre sirve para hacer frente a estos retos, aunque presenta sus propios retos, razón por la que CSS ofrece la propiedad white-space (espacio en blanco). Los valores que acepta, que se enumeran en la tabla 3, permiten al diseñador elegir si el navegador debe representar los espacios en blanco y los saltos de línea que se han añadido al etiquetado de origen o que se han insertado como contenido generado.

La recomendación CSS ofrece detalles exhaustivos sobre la implementación y el uso recomendados de la propiedad white-space (espacio en blanco).

Resumen

Un buen diseño de sitio requiere un nivel elevado de atención al detalle y el ajuste adecuado de la interacción de numerosos elementos, uno de los cuales es la tipografía.

La combinación de propiedades de fuente y texto que ofrecen las implementaciones de CSS de los navegadores actuales da prácticamente el nivel de control máximo sobre la tipografía que permite el hardware y depende del diseñador concienciado aprender a utilizarlas como es debido. Cuando estas propiedades se utilizan bien, se producen sitios que pueden aspirar a acercarse a los estándares de calidad de la tipografía que normalmente se asocian al medio impreso, que se ha ido desarrollando durante siglos, aunque la Web aún no hace ni una generación que existe.

Preguntas de repaso

Preguntes que hauríeu de poder respondre:

  1. Decid tres elementos HTML que no sean b ni i, que por defecto se representen con fuentes variantes. Haced una descripción breve del propósito original de los elementos que habéis mencionado y explicad cómo el uso de una fuente variante es apropiado para los propósitos de estos elementos.
  2. Comprobad de manera subjetiva la facilidad de lectura de un fragmento de un texto largo cualquiera con diferentes valores de line-height (interlínea). Resumid brevemente los resultados.
  3. Aplicad text-transform: uppercase; a un único párrafo del fragmento utilizado en el ejercicio anterior y repetid la prueba subjetiva de legibilidad. Resumid brevemente los resultados.
  4. Explicad brevemente las ventajas y desventajas del antialiasing utilizando el repaso de la tipografía de este apartado como ejemplo.
  5. Describid el orden en el que deben especificarse las tipografías en un valor de font-family
  6. Sin consultar el material didáctico, elegid como mínimo tres propiedades de las descritas en este apartado y decid como mínimo un valor válido (aparte del predeterminado) de cada una. Demostrad o describid los resultados del uso de estas parejas de propiedades y valores en una hoja de estilo.
  7. Cread un elemento, añadidle texto central y asignadle un valor de font-size (tamaño de la fuente) de9px. Abrid el documento que contiene este elemento con Internet Explorer y pasad de un tamaño de fuente a otro de los que se proporcionan en el menú Visualiza > Tamaño del texto. Evaluad la conveniencia de estos resultados en sitios web con grandes cantidades de visitantes de mediana edad y de edad avanzada.

Lecturas complementarias

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial – Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :

GIS: CartoDB.js from the ground up

[Fuente: http://academy.cartodb.com/courses/beginners-course/]

This introduction to CartoDB.js from the ground up will take you through the common uses of the library. You’ll start out by pulling your maps from CartoDB with only a few lines of code. Later you’ll customize your maps with JavaScript, interact with the data, add custom SQL queries, integrate other features, and much more.

createVis vs. createLayer

Since this course explains CartoDB.js, it relies heavily on the JavaScript programming language. If you are not familiar with the language, check out some of the great free resources available on the web by looking at this StackExchange post. We also recommend Codecademy and Eloquent JavaScript to get started.

The CartoDB.js API provides powerful tools to build dynamic web apps. Along with CartoCSS, other JS libraries, and our SQL API, the sky’s the limit. This course, CartoDB.js from the Ground Up, will show you how to build amazing apps in a small amount of time.

In CartoDB, there are two main methods to bring your maps into custom webpages, createVis and createLayer.

The first method, createVis allows for quick and easy maps with a large degree of customization. It gives two map layers in an array: layer 0 is the base map; layer 1 is the CartoDB data layer.

The second method, createLayer, allows for much more customization, including the combining of layers from separate maps, each with its own levels of customization. createLayer also allows client-side control over basemaps.

Both methods allow custom CartoCSS styling, SQL queries, and overlay options (zoom controls, a search box, a share button, etc.). Before showing these methods, we need to be introduced to these methods’ main sources of information.

viz.json, nice to meet you

Up to this point, all of the methods for displaying maps to the world have involved the first two sharing options you’ve seen in the sharing panel (see below). The first, “Get the link,” creates a shortened URL that points to a map in your account on CartoDB’s website. The second, “Embed it,” gives you an iframe that you can drop into your custom web page. The third option, “CartoDB.js,” will be our jumping off point for this course because you’ll easily be able to see how the API’s methods line up with the data hierarchy of your map’s metadata.

Share panel

A viz.json is a file that contains all the data needed to reproduce the visualization you created in CartoDB. An analogy one can make is that CartoDB.js is like a DVD player, the viz.json is like the DVD disc, and CartoDB represents all the parts needed to create a film (cameras, actors, director, producers, etc.).

Download the viz.json used in this lesson here. You can download a viz.json from any visualization you’ve created and inspect it with your favorite text editor, or view it in your browser if you have a JSON viewer. For this lesson, we will be using the viz.json for a multi-layer map similar to the one created at the end of Course 1. If you’re unfamiliar with the JSON file format, check out the official site or Wikipedia for a lot more information.

There’s a lot of metadata in this file. Browsing through all the possibilities shows you how much power you have to customize your maps in the CartoDB Editor. Review the documentation for CartoDB Editor to explore what some of these JSON entries allow you to do in your maps.

Screenshot of viz.json

Looking at your viz.json, find the top-most level called layers. You can see that it’s an array of two objects. The first object’s options have type “Tiled” and a name of “CartoDB Flat Blue.” This layer, layers[0], corresponds to the base layer map of our visualization. If you try changing the base map in CartoDB Editor and reload the viz.json, you will see the information in this layer change accordingly. Make note of other properties included in this options object as they will come up again later.

The next object down, layers[1], contains information about the data that was loaded into the map and visualized. The first entry, type, tells you that this is a group of layers. Under options, you can see some of the information that’s used by the CartoDB.js API to retrieve information from the servers. In contrast to layers[0], the majority of this second object in the layers array is taken up by layer_definition. In our case, we have two sublayers in layers[1] because there are two objects in the layers array that’s under layer_definition. In future lessons, we will retrieve these layers by calling

sublayer1 = layers[1].getSubLayer(0);
sublayer2 = layers[1].getSubLayer(1);
...

Looking back at our viz.json, we can see that the zeroth layer, buried under options, has a layer_name of “us_counties” and comes from our us_counties dataset back in the Beginner’s Course. The second comes from another familiar dataset on tornados in the United States. Other important info to pick out:

  • sql: tells you the SQL statement used with each data set (defaults to select * from dataset)
  • visible: means it will display (defaults to true)
  • cartocss: tells you about the styles applied to your map
  • interactivity: tells you the columns that is click/hover enabled
sql: '...'
visible: true
cartocss: '...'
interactivity: 'column1, column2'

In summation, the viz.json is CartoDB.js’s conduit to the data, queries, basemaps, styles, etc. that you set when you created a visualization with the data you uploaded into your CartoDB account. Now that we’ve thoroughly met with our viz.json, let’s look at the two most important JavaScript methods that interact with it.

Check out the documentation for viz.json here.

CreateVis

The most basic way to display your map from CartoDB.js involves a call to

cartodb.createVis(div_id, viz_json_url)

Couched between the <script> ... </script> tags, createVis puts a map and CartoDB data layers into the DOM element you specify. In the snippet below we assume that <div id='map'></div> placed earlier in an HTML file.

window.onload = function() {
  var vizjson = 'link from share panel';
  cartodb.createVis('map', vizjson);
}

And that’s it! All you need is that snippet of code, a script block that sources CartoDB.js, and inclusion of the CartoDB.js CSS file. It’s really one of the easiest ways to create a custom map on your webpage.

createVis also accepts options that you specifiy outside of the CartoDB Editor. They take the form of a JS object, and can be passed as a third optional argument.

var options = {
  center: [40.4000, -3.6833], // Madrid
  zoom: 7,
  scrollwheel: true
};

cartodb.createVis('map',vizjson,options);

To see createVis out in the wild, check out an awesome example in our Map of the Week series on our blog.

Documentation for cartodb.createVis.

CreateLayer

If you want to exercise more control over the layers and base map, createLayer may be the best option for you. You specifiy the base map yourself and load the layer from one or multiple viz.json files. Unlike createVis, createLayer needs a map object, such as one created by Google Maps or Leaflet. This difference allows for more control of the basemap for the JavaScript/HTML you’re writing.

A basic Leaflet map without your data can be created as follows:

window.onload = function() {
  // Choose center and zoom level
  var options = {
    center: [41.8369, -87.6847], // Chicago
    zoom: 7
  }

  // Instantiate map on specified DOM element
  var map_object = new L.Map(dom_id, options);

  // Add a basemap to the map object just created
  L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
    attribution: 'Stamen'
  }).addTo(map_object);
}

Here we pulled the base map tiles from Stamen. There are many other options basemap options–learn more about your options in this great tutorial.

The map we just created doesn’t have any CartoDB data layers yet. If you’re just adding a single layer, you can put your data on top of the basemap from above. If you want to add more, you just repeat the process. We’ll be doing much more with this later.

This is the basic snippet to put your data on top of the map you just created. Drop this in below theL.tileLayer section.

var vizjson = 'link from share panel';
cartodb.createLayer(map_object, vizjson).addTo(map_object);

Check out this Map of the Week entry to see createLayer at work.

The documentation for createLayer.

Summing it up. And finally making something!

Now that we’re done with our crash course on the basics, let’s finally dive into making our first map with CartoDB.js.

Use this template, the URL for the viz.json linked above, and the code snippets for createVis or createLayer to make your first map using CartoDB.js. There are a couple of new things to notice about the template. Besides the normal HTML skeleton, the template includes the CartoDB.js library

<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

between the <body> tags AND the map styling sheet

<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />

between the <head> tags. You need them both to get your maps going.

After you get it working, swap out the viz.json we provided with some of the viz.jsons from your own visualizations. Try putting in the createVis examples introduced before. Check out stellar examples in the Map Gallery, look at some of the examples in the official CartoDB.js repository, and hack away! If you prefer JS Fiddle, run the demo here.

Example of simple map created with CartoDB.js

By the way, CartoDB.js is open source. Fork it and contribute.

GIS: What is CartoDB

[Fuente: https://cartodb.com/attributions]

It’s a location intelligence tool to create amazing visualizations of geospatial data in the cloud. Upload your data, create your visualizations without a line of code and share them with the world.

  • Editor

    CartoDB is the web’s easiest tool to create, share, and publish your interactive maps. Use our powerful in-browser Editor to transform your data into beautiful visualizations.

    Learn more

  •  Platform

    CartoDB hosts a multitude of high performance APIs to help leverage location intelligence and transform your data into actionable deep insights and develop masterful visualizations.

    Learn more

  • Extras

    Build tools using CartoDB: layering maps with interactive functionality, and leveraging location-based data to clarify your message and amplify the global impact of your maps.

    Learn more

    Data Attribution

    In CartoDB you can find two types of layers: basemaps and user data. Basemap is the layer that you see on the background of the maps and user data layer is the user data displayed on top of it. The data behind these two layers come from different places.

    • Basemaps

      We use a variety of different basemaps by default. We recommend you read their attribution information and respect their licenses when using them.

    • Stamen Tiles

      Stamen produces Toner, a tile set created using OpenStreetMap. Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.

    •  User tileset

      On the CartoDB interface, the user has the possibility to use external tile sets. The attribution to those tile sets should be state by the user on the interface where it is publishing the map, or using the JS library to do so.

    • User data

      On CartoDB most data is uploaded by the users. When the users upload their data, they acknowledge they have the right to do so and should provide attribution information together with the map or as complementary text visible together with the map

      Technology

      CartoDB is an Open Source project (under a BSD license) and it makes use of many different Open Source projects. It is very complicated to describe every single library/project used on the whole stack, so do not consider this a comprehensive list and please check the GitHub page for more information.

    Geocoding

Icons

In CartoDB you can use several icon sets to style markers or patterns. Those icons or images come from different places:

  • Pin of maps

    A set of map icons created by Freepik.

  • Maki Icons

    An Open Source icon set from Mapbox.

  • SimpleCircle Places

    A set of map icons created by SimpleIcon.

    CARTODB EDITOR

    The Power of Location Data at Your Fingertips

    INTRODUCTION

    The CartoDB Editor

    The CartoDB Editor is a self-service mapping and analysis tool that combines an intuitive interface with powerful discovery features. Mix and combine your datasets to get fresh insights into your visualizations. You don’t need to be an expert to start mapping your data today. Point and click interfaces let you do everything from design, to analysis, to publishing APIs.

    Create rich, dynamic maps in moments

    Whether you’re starting from a spreadsheet, connecting your favorite business software, or drawing from vast sensor networks, CartoDB brings your location data to life. CartoDB looks through your data and suggests map types that highlight key trends. Our intuitive tools mean you can make your visualizations as simple – or sophisticated – as you like.

    Learn more

    UNCOVER INSIGHTS

    Insights at your fingertips

    The CartoDB Editor helps you ask ‘where’ and ‘why.’ Filter, cluster, and explore location-based trends. Test your hunches and gain new perspective by incorporating our public, market-specific, and specialty data. Do advanced analysis on the fly, and see the results in real time.

    Discover location insights across industries

    Polish and Publish

    From the boardroom to major media outlets, CartoDB maps tell data stories with clarity and power. Share your insights securely with your team, or broadcast them to the world.

    • Seamless Embedding

      Embed your map in your article or blog, Reddit, WordPress or nearly anywhere. Every CartoDB plan includes unlimited map views — just watch it go viral.

    •  Pixel-Perfect Styling

      Adjust the style, annotate, and animate your maps to convey just the right message. Play around with style variations to get just the right visual.

    • Public and Private Sharing

      Publish and share your data visualizations safely and securely. Share your data-driven insights with just your colleagues or the world.

    FEATURES

    The CartoDB Advantage

    •  Born on the Web

      Never any software to install, so you can access the latest features any time, anywhere.

    •  Easy to Learn

      Great tutorials and documentation, and a gallery of amazing example visualizations.

    • Sync Your Data

      CartoDB connects to the places where your data already lives, so your analysis is always up-to-date.

    •  Amazing Support

      Our customer success experts are here to help. Receive the care that a cartographer needs.

    • Secure

      Our editor is built with leading, secure cloud-based providers. Your Location Intelligence stays your business – safe and sound.

    •  Performance

      We’re designed to answer big questions. Even with millions of data points and a huge audience, CartoDB stays speedy.

    •  Powerful APIs

      The perfect engine for building location-intelligent applications. Get more out of your data with our APIs or build your own.

    •  Enterprise-Ready

      Smart, flexible controls to share and manage datasets, connections and visualizations.

    INTEGRATION

    Plays well with others

    CartoDB supports the formats and tools you use every day.

    File formats

    • CSV
    • GEOjson
    • SQL
    • KML
    • XLS
    • ESRI Shapefile
    • GEOtiff
    • GPX
    • GTFS

    CartoDB for

     

CASE STUDY

Location intelligence for your industry

Organizations from around the world use CartoDB to leverage location intelligence for actionable insights. View behavior analysis to Location Intelligence data-driven visualizations.

Trucos para usar tu Mac como un desarrollador profesional

Mejorando el uso del Terminal

[Fuente:http://carlosazaustre.es/blog/configura-tu-mac-como-un-desarrollador-profesionalque-2/#at_pco=smlwn-1.0&at_si=563b05fb4c123c9e&at_ab=per-13&at_pos=0&at_tot=1]

¿Quieres tener un flujo de trabajo que te permita ser ágil, ahorrar tiempo y ser más productivo en el desarrollo de tus proyectos? A continuación cuento una serie de aplicaciones y configuraciones que harán más agradable la jornada de trabajo en tu Mac. Hoy hablaremos de la terminal.

A mi me fue bien instalando iTerm2 y Oh MyZSH

Ejecutar un servidor web rapidamente

Desplazate a la carpeta donde tengas los archivos HTML y ejecuta:

python -m SimpleHTTPServer 8000

VDSL vs ADSL

[Fuente: http://blogthinkbig.com/en-que-se-diferencia-el-vdsl-del-adsl/]

¿Sabías que el VDSL soporta la difusión de TV Digital, VoD y HDTV, además de poder efectuar llamadas por videoconferencia de gran calidad?

La conexión ADSL es la tecnología de transmisión de datos más extendida y generalizada en nuestro país. A pesar de las múltiples alternativas para su contratación, seguro que en algún momento te has planteado la posibilidad de contratar directamente VDSL o cambiar tu ADSL, ADSL2 o ADSL2+ por esta otra tecnología avanzada de acceso a Internet. Frente a las dudas acerca de lo que es el Very High bit-rate Digital Subscriber Line, vamos a explicar en qué consiste y cuáles son las diferencias VDSL y ADSL.

En principio, se trata de una tecnología de acceso a Internet de banda ancha que forma parte de las tecnologías xDSL y que puede suministrarse bien de manera simétrica –26 Mbps tanto de subida como de descarga–, bien de manera asimétrica –52 Mbps de descarga y 16 Mbps de subida– bajo condiciones ideales con una distancia nula a la central y sin resistencia de los pares de cobre.

El estándar VDSL utiliza hasta cuatro canales o bandas de frecuencia diferentes para la transmisión de datos, dos para la subida –del cliente hacia el proveedor– y dos para la bajada, aumentando significativamente la potencia de transmisión de datos y su velocidad con respecto al ADSL, ADSL2 y ADSL2+. Y aunque la técnica estándar de modulación más usada en este caso es DMT –Discrete multitone modulation–, podría ser también QAM/CAP –carrierless amplitude/phase–, ambas con un rendimiento similar.

No obstante, hay que tener en cuenta que la velocidad de transmisión de datos depende de numerosos factores, como el estado de la línea y la distancia entre el usuario a la central telefónica más cercana. Sin embargo, la evolución del VDSL al VDSL2 proporcionaría una mayor velocidad que podría alcanzar hasta los 100 Mb de descarga.

Del ADSL al VDSL

La principal diferencia reside en el número de canales que permiten la transmisión de datos a alta velocidad, que en el caso del ADSL cuenta sólo con dos respecto a los cuatro del VDSL: uno de subida usuario-red y otro de bajada red-usuario con una tasa de transferencia de 8 Mbps de descarga y 1 Mbps de subida.

Con la conexión ADSL2 se consigue una mejora de la calidad del servicio ADSL con una tasa de transferencia sensiblemente mayor de 24 Mbps de descarga y2Mbps de subida, al solucionar los problemas de potencia de la líneaperturbación de la señal. Para ello se introducen mejoras sustanciales como una mejor eficiencia del modulador/codificador, además del uso de algoritmos para el tratamiento de la señal.

diferencias VDSL y ADSL

La evolución lógica del ADSL y el ADSL2 se materializa con el ADSL2+. La principal diferencia con respecto a sus antecesores reside en la capacidad de los pares de cobre a soportar el doble de espectros, proporcionando un mejor ancho de banda. De esta forma se mejora las características del servicio con una velocidad máxima 24 Mbps, siempre y cuando la distancia del usuario a la centralita no sea superior a los 5km. Hay que considerar que, según los expertos, para conseguir velocidades próximas a las máximas, la centralita más cercana no debe estar a más de 1 o 1,5 km del usuario.

En el caso del VDSL, además de transmitir datos de vídeo y otros tipos de tráfico a una velocidad de 5 a 10 veces superior al ADSL, ofrece la capacidad de soportar la difusión de TV Digital, VoD y HDTV sobre el par de cobre estándar, junto con tráfico de Internet y las habituales llamadas de voz. También satisface la demanda de los entornos empresariales y oficinas con un acceso de datos mucho más rápido y la posibilidad de efectuar llamadas por videoconferencia de gran calidad.

Imágenes | vía pixabay y wikipedia

CSS: Dive into OOCSS principles

[Fuente: http://www.nicoespeon.com/en/2013/05/dive-into-oocss/]

OOCSS – what it is, what it does, what it is, what it isn’t.

I can haz OOCSS?

Consider a new web project: a start-up dreams of developing THE indispensable webapplication of tomorrow’s web. They choose wisefully technologies, frameworks, environments they’ll use… However, the front-end rendering will still the same for the browser: HTML, CSS and Javascript.

But here’s the thing: even if the whole application will probably take advantages of some frameworks, have a look over the stylesheet and you’ll probably get something like that, with or without preprocessor:

#form-generator {
    width: 760px;
    margin: auto;
}

#form-generator label {
    font-weight: bold;
    font-size: 12px;
    /* ... */
}

#form-generator label.title {
    font-weight: normal;
    font-size: 11px;
    /* ... */
}

#form-generator textarea {
  width: 350px;
}

#form-generator .big textarea {
  width: 500px;
}

/* a bunch of CSS */

This kind of code will cause a lot of hassles over time:

  • Lack of flexibility, it can only apply to elements which are contained in the form which gets the #form-generator identifier. That could sound relevant at first, but what if you want to build other pages with some similars forms in it?
  • Too much specificity, you have to overspecified again and again selectors when you want to create some particular cases. Just look at label.title-titre or .big textarea for instance.
  • Too complicated, you need to be an expert and know the architecture of every single page to dissect and maintain all of this mess. Plus, it would probably grow as the project develops.

If you add some messy organisation for CSS files, then you get a spaghetti code which would lead to a lot of troubles, errors, code duplication as new developers enters the ring over time.

This extreme dependency between the HTML structure makes the code be especially fragile: even if it’s clean, a simple mistake of a non-expert can ruined it completely.

In short, these non-mature practices will make things harder for the start-up and promises long sleepless nights of debug and refactor.

Finally, the problem here belongs to the 1:1 relation between CSS and the number of blocks, pages, modules of the website. As long as it grows, the stylesheet grows as well. That implies development time, and so money… We could do better in terms of ROI.

Your CSS is a MESS
Freely inspired by Jonathan Snoovvk =)

The Object Oriented CSS (OOCSS) bring its own solution to these problems. It’s nor a new preprocessor, nor a new language, but a code philosophy. It’s a set of best practices, rules and advices to help your CSS become scalable.

OOCSS has 2 principles :

  1. Separate structure from skin
  2. Separate container from content

1. Separate structure from skin

Usually, elements of a website have a visual aspect which is repeated in different contexts : colors, font, borders, … the graphic charter in a whole. This is the skin.

In the same time, a bunch of “non-visible” properties are repeated : width/height, overflow, etc. This is the structure.

If you separate them, you create re-usable components that can be shared into elements which have same properties. And so we speak about objects, which may sound familiar to back-end developers by the way.

2. Separate container from content

The deal here is not to stupidly constrain the style of an element (the content) to the its context (its container).

If you are designing titles, why limit yourself to those who are into the <header>, just because this is the only title place for now? Plus, it’s very likely that all your titles have a consistent design in your whole website for ergonomics concerns.

It’s even more true for modules.

Why is OOCSS good?

The 10 best practices

Here are the 10 best practices that are part of the OOCSS spirit:

  1. Create a library per component
    Each component – button, table, link, image, clearfix, etc. – should be a piece of Lego = combinable and re-usable as you wish.
  2. Use semantic and consistent styles
    The style of a new HTML element should be predictable.
  3. Design transparent modules
    The module is the container that could be used with any content.
  4. Be flexible
    Height and width should be extensible and adapt themself – RWD inside -.
  5. Learn to love grids
    Grids allow you to control width. Height is generally defined by the content.
  6. Minimize selectors
    Keep a low specificity [0-0-1-0] to have a better control over selectors.
  7. Separate structure from skin
    You must do the distinction, it’s a fundamental principle of OOCSS. Create abstract objects for blocks structure and use class to dress these blocks, regardless their nature.
  8. Separate container from content
    You must do the distinction, it’s a fundamental principle of OOCSS. Create 1:n relationship separating the container from its content.
  9. Extend objects with multiple classes : Class/objects are just like Legos you put together to build the expected result.
  10. Use resets and YUI fonts
    This is a specific choice of the OOCSS framework.

Legos first – A best practice is to design individual pages after having created basic components for the whole website.

The 9 pitfalls to avoid

Here are the 9 pitfalls to ban, according to the OOCSS spirit:

  1. Create styles that depend on context
    There is nothing less flexible but a article > p:nth-child(2) > span.plop selector.
  2. Overspecify selectors
    div.my-class is uselessly overspecific as .my-class is sufficient enough. However, it becomes relevant if you want to override a class styling for some specific elements –strong.error will override the defaults rules of .error for this special use -.
  3. Use IDs
    What an ID can do, a class can do better. Futhermore, IDs contribute in creating unexpected specificity mess.
  4. Use shadows and border-radius on irregular backgrounds
    It could have unexpected results.
  5. Create a sprite containing every images, excepted if you don’t have a lot of pages
    It’s not very optimal in certain cases as you need to deal with image rendering exclusively in CSS.
  6. Precisely adjust the height
    An element height is controlled by its content. Separate container from content will make your life easier.
  7. Use images as texts
    I guess you can reach a better accessibility level.
  8. Be redundant
    Two components which that look too close to be differenciate on a same page look too close to be used on the website: choose one!
  9. Do early optimisation
    Developers tend to waste a lot of time on the optimisation question when it’s not critical than to focus on what is essential to go on.

OOCSS benefits

As the project is going on, you will be able to create whole new pages combining existing elementswithout adding any CSS, even for a completely new architecture.

Re-use elements is also a totally free performance gain! You’ll create new elements with 0 line of CSS code, what could be better?

OOCSS force you to think the website as a whole instead of focusing on simple pages put one along the others. You should anticipate the future.

Finally, the main advantage of this philosophy IMHO is that it makes your CSS modular, easier to maintain. This modularity makes your CSS robust: a new developer would be less likely to break the design when working on it.

OOCSS, how does that works?

Gimme concrete examples!

Remember the 2 main principles:

  1. Separate structure from skin
  2. Separate container from content

With these good practices in mind, let’s see how to apply the philosophy on a daily code.

1. Separate structure from skin

Let’s take the favorite example over blog posts: buttons. A “classic” CSS would look like this, I guess:

 1 #button {
 2     display: inline-block;
 3     padding: 4px 12px;
 4     margin-bottom: 0;
 5 
 6     font-size: 14px;
 7     line-height: 20px;
 8     color: #333333;
 9     text-align: center;
10 
11     vertical-align: middle;
12     cursor: pointer;
13 
14     background-color: #d5d5d5;
15 }
16 
17 #button-primary {
18     display: inline-block;
19     padding: 4px 12px;
20     margin-bottom: 0;
21 
22     font-size: 14px;
23     line-height: 20px;
24     color: #ffffff;
25     text-align: center;
26     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
27 
28     vertical-align: middle;
29     cursor: pointer;
30 
31     background-color: #006dcc;
32 }
33 
34 #button-large {
35     display: inline-block;
36     padding: 8px 16px;
37     margin-bottom: 0;
38 
39     font-size: 18px;
40     line-height: 28px;
41     color: #333333;
42     text-align: center;
43 
44     vertical-align: middle;
45     cursor: pointer;
46 
47     background-color: #d5d5d5;
48 }
49 
50 #button-activation {
51     display: inline-block;
52     padding: 8px 16px;
53     margin-bottom: 0;
54 
55     font-size: 18px;
56     line-height: 28px;
57     color: #ffffff;
58     text-align: center;
59     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
60 
61     vertical-align: middle;
62     cursor: pointer;
63 
64     background-color: #006dcc;
65 }
<!-- The corresponding HTML -->
<a href="#" id="button">Default</a>
<a href="#" id="button-primary">Primary</a>
<a href="#" id="button-large">Large</a>
<a href="#" id="button-activation">Large Primary</a>

At the end, you come with a lot of redundancy and a #button-activation which is nothing but a large version of #botton-primary.

If you refactor this CSS with OOCSS principles, you’ll get something more flexible:

 1 .button {
 2     display: inline-block;
 3     padding: 4px 12px;
 4     margin-bottom: 0;
 5 
 6     font-size: 14px;
 7     line-height: 20px;
 8     color: #333333;
 9     text-align: center;
10 
11     vertical-align: middle;
12     cursor: pointer;
13 
14     background-color: #d5d5d5;
15 }
16 
17 .button-primary {
18     color: #ffffff;
19     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
20 
21     background-color: #006dcc;
22 }
23 
24 .button-large {
25     padding: 8px 16px;
26 
27     font-size: 18px;
28     line-height: 28px;
29 }
<!-- The corresponding HTML -->
<a href="#" class="button">Default</a>
<a href="#" class="button button-primary">Primary</a>
<a href="#" class="button button-large">Large</a>
<a href="#" class="button button-large button-primary">Large Primary</a>

.button define the generic properties – the “defaults” ones – for our buttons. If you override it, you come with new classes that you can combine to get the expected result, just like Legos!

Here was the trick.

2. Separate container from content

It did happen, sometimes, that my code looked like this when developing the main design:

 1 header h1 {
 2     font-family: 'Roboto', Helvetica, sans-serif;
 3     font-size: 2em;
 4 
 5     color: #F44;
 6 }
 7 
 8 /* a bunch of CSS */
 9 
10 footer h1 {
11     font-family: 'Roboto', Helvetica, sans-serif;
12     font-size: 1.5em;
13 
14     color: #F44;
15     opacity: 0.5;
16     filter: alpha(opacity = 50);
17 }
<!-- The corresponding HTML -->
<header>
    <h1>Header Title</h1>
</header>
<footer>
    <h1>Small title in the footer</h1>
</footer>

Here again, it’s a fail: I am duplicating code, which is useless and I didn’t even notice that!

The elements I defined here are simply not re-usable. They directly rely on a specific container. But it’s clear enough that some properties are not specific to this container.

And so I may have consider the following alternative:

 1 h1 {
 2     font-family: 'Roboto', Helvetica, sans-serif;
 3 
 4     color: #F44;
 5 }
 6 
 7 /* ... */
 8 
 9 h1, .h1-size { font-size: 2em;   }
10 h2, .h2-size { font-size: 1.8em; }
11 h3, .h3-size { font-size: 1.5em; }
12 
13 /* ... */
14 
15 .muted {
16     opacity: 0.5;
17     filter: alpha(opacity = 50);
18 }
<!-- The corresponding HTML -->
<header>
    <h1>Header Title</h1>
</header>
<footer>
    <h1 class="h3-size muted">Small title in the footer</h1>
</footer>

You may think “Why should I care? We don’t really reduce code here!”. For sure that’s true here… if you only focus on the title.

But OOCSS makes you think further about the future of your website. Here we don’t just improved titles flexibility, but we add few new elements:

  • Each level of title has a standard and homogene font-size. Each of these font-size is also set to an independent class and could be re-used, whatever the context

    Doing so, you’ll notice that I didn’t choose the level of title because of the default sizing it would render on the screen: it’s better for semantics, for accessibility and SEO \o/

  • I created a .muted class that allows me to mitigate the visibility/opacity of an element. I guess this little utility would be useful later and I’m sure I won’t have to duplicate that kind of code around in my CSS.

The media object

The most famous example which illustrate OOCSS is the media object created by Nicole Sullivan. It saves hundreds of lines of code.

The Media Object

It’s nothing but an abstract object which represents a media object – a picture, a video – aside to amedia body – typically a text -, to its left or to its right.

It’s a typical scheme that is repeated everywhere. Think about the Facebook display.

Here is basically the module content:

.media, .media-body { overflow:hidden; }
.media-img          { float:left; margin-right:20px; }
.media-img-rev      { float:right; margin-left:20px; }
.media-img img      { display:block; }
<!-- Base structure for the media object -->
<div class="media">
    <a href="#" class="media-img">
        <img src="#" alt="#">
    </a>
    <div class="media-body">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
    </div>
</div>

These few re-usable lines of CSS will save a lot of time and help to improve performance over a whole project.

You’ll note that Bootstrap has implemented it, just like inuit.css, which is not that surprising when you consider these two frameworks use OOCSS concepts.

Harry Roberts has recently proposed the flag object which incorporates more or less the media object with the vertical centering concept.

Implement the OOCSS in your project

First of all, you need to understand and adhere to the philosophy. There is no absolute rule and best practices change as the web develop and evolve. Plus, you should always consider the context of your project and define what is good for you.

That said, we can sum up the implementation of an OOCSS spirit with some concrete practices:

  • Don’t use IDs for CSS
  • Don’t overspecify your selectors (.error and not p.error), excepted for overriding reasons
  • Avoid the use of !important
  • Distinguish components of your project and create modules out of them
  • If relevant, adopt a CSS framework based over OOCSS principles. I’d advice you to useBootstrap if you need a predefined design ; inuit.css is you just need about structure and deal with the design by yourself. Note that the oocss framework from Nicole Sullivan exists as a reference.

Few comments

Good remarks and poor ideas

No need to say that these philosophy is a non-absolute vision of CSS that we could debate on.

However, we can point out the following things:

  • It’s absolutely possible to use IDs in HTML for JavaScript purpose, for instance. Moreover, identifiers could be useful as namespaces for a particular module that you want to share without breaking anything.
  • One of the arguments against OOCSS is that you are “polluting” HTML with a bunch of classes that some HTML-evangelist don’t appreciate, which is understandable. However,OOCSS doesn’t impact the HTML semantics.
  • OOCSS principles can perform miracles over big projects, where it worth to implement them. For little ones, it’s up to you! However, the philosophy is relevant regardless the size of your project and doesn’t take that long to be implemented than an ordinary development when you get used to it. Rather, modules you’ve already created for any other project could be re-used in a new one, you just have to change their design a bit and there you go!

Even if OOCSS is now a well-spread vision for the benefits it brings, I must say that I was suspicious when I read the assertion: “avoid the use of ID in CSS, ever”.
But since I understood the benefits of this practice, I warmly recommend it.

That said, as I get smacked for my code organisation, I now use IDs in my CSS in a unique place: the layout.

It’s just a matter of adaptation to your project needs and philosophy.

Another philosophy

Another vision of CSS give its importance to the context of elements.

It’s another philosophy, interface-oriented which considers that CSS is defined to design the existing HTML interface. To pollute HTML with classes is a non-sense when selectors and good code organisation can deal with the design.

Even though I don’t adhere to this practice – at least for a project which is meant to evolve -, it’s an interesting philosophy which could be relevant for small projects, for instance.

To go further

Here is a list of links you may have a look to go deeper into OOCSS:

Conclusion

Our little dive into OOCSS is now over.

After OOCSSAdopt the “Oh Oh” CSS

Plop!

Qué es Git Flow

[Fuente: http://aprendegit.com/que-es-git-flow/]

¿Qué es git-flow?

Si quieres seguir esta serie, debes disponer de una máquina con git instalado:

  • Windows: msysgit que puedes descargar de este enlace
  • Mac: a través de homebrew o macports
  • Linux: a través del gestor de paquetes de tu distribución

Flujos de trabajo

Hace unos días participé en el Open Space de Calidad del Software organizado en Madrid este mes de febrero. En la reunión se abordaron varios temas que iban desde responder a preguntas como ¿qué se calidad del software? ¿cuánto cuestan los tests funcionales? o ¿cómo hacer testing de desarrollos para dispositivos móviles? pasando por otros tan exóticos como el Pirata Roberts, llegando incluso a plantearse hasta la eliminación de los responsables de calidad de la faz de la tierra.

En casi todas las conversaciones en las que tuve la oportunidad de participar había un denominador común: las ramas. Se hablaba de ramas para hacer hot-fixes urgentes, ramas para desarrollar nuevas versiones separadas de las ramas maestras donde está la versión en producción. Ramas para probar nuevas versiones, ramas y repositorios para trabajar con proveedores externos, ramas para hacer pruebas en pre-producción, ramas para que los departamentos de calidad hagan sus pruebas antes de liberar nuevas versiones. Con git podemos crear ramas “como churros” y ese fin de semana tuve la oportunidad de compartir con varios colegas de profesión cómo utilizar las ramas para hacer el bien. Sin embargo, esta facilidad para crear ramas también se puede utilizar para hacer el mal y sembrar el terror. Más de una vez he visto ramas creadas sin ningún criterio, sin ningún flujo de información detrás que las sustente. Esta situación suele llevar al repositorio al caos más absoluto.

Para no acabar en el caos, debemos establecer unas “reglas del juego” que todo el equipo debe respetar. Aunque a grandes rasgos casi todos los proyectos pueden utilizar unas reglas de base comunes, las reglas deben ser flexibles para adaptarse a los cambios que puedan surgir en el tablero de juego; al fin y al cabo, las necesidades y particularidades de cada equipo, empresa o proyecto no son las mismas.

¿Y cuáles son estas reglas base comunes? En enero de 2010 Vincent Driessen publicó en su blog un artículo en el que compartía con la comunidad un flujo de trabajo que a él le estaba funcionando: “A successful Git branching model”. Como él mismo cuenta en el artículo (te recomiendo encarecidamente que lo leas) Vincent propone una serie de “reglas” para organizar el trabajo del equipo.

Ramas master y develop

El trabajo se organiza en dos ramas principales:

  • Rama master: cualquier commit que pongamos en esta rama debe estar preparado para subir a producción
  • Rama develop: rama en la que está el código que conformará la siguiente versión planificada del proyecto

Cada vez que se incorpora código a master, tenemos una nueva versión.

Además de estas dos ramas, Se proponen las siguientes ramas auxiliares:

  • Feature
  • Release
  • Hotfix

Cada tipo de rama, tiene sus propias reglas, que resumimos a continuación.

Feature or topic branches

feature branches

  • Se originan a partir de la rama develop.
  • Se incorporan siempre a la rama develop.
  • Nombre: cualquiera que no sea master, develop, hotfix-* o release-*

Estas ramas se utilizan para desarrollar nuevas características de la aplicación que, una vez terminadas, se incorporan a la rama develop.

Release branches

  • Se originan a partir de la rama develop
  • Se incorporan a master y develop
  • Nombre: release-*

Estas ramas se utilizan para preparar el siguiente código en producción. En estas ramas se hacen los últimos ajustes y se corrigen los últimos bugs antes de pasar el código a producción incorporándolo a la rama master.

Hotfix brancheshotfix branches

  • Se origina a partir de la rama master
    fuente http://nvie.com/posts/a-successful-git-branching-model/
  • Se incorporan a la master y develop
  • Nombre: hotfix-*

Esas ramas se utilizan para corregir errores y bugs en el código en producción. Funcionan de forma parecida a las Releases Branches, siendo la principal diferencia que los hotfixes no se planifican.

¿Qué es git-flow?

Si queremos implementar este flujo de trabajo, cada vez que queramos hacer algo en el código, tendremos que crear la rama que corresponda, trabajar en el código, incorporar el código donde corresponda y cerrar la rama. A lo largo de nuestra jornada de trabajo necesitaremos ejecutar varias veces al día los comandos git, merge, push y pull así como hacer checkouts de diferentes ramas, borrarlas, etc. Git-flow son un conjunto de extensiones que nos ahorran bastante trabajo a la hora de ejecutar todos estos comandos, simplificando la gestión de las ramas de nuestro repositorio.

La flexibilidad de git…y el sentido común

Las “reglas” que Vincent plantea en su blog son un ejemplo de cómo git nos permite implementar un flujo de trabajo para nuestro equipo. Estas no son reglas absolutas, bien es cierto que pueden funcionar en un gran número de proyectos, aunque no siempre será así. Por ejemplo ¿qué pasa si tenemos que mantener dos o tres versiones diferentes de una misma aplicación? digamos que tenemos que mantener la versión 1.X, la 2.X y la 3.X. El tablero de juego es diferente así que necesitaremos ampliar y adaptar estas reglas para poder seguir jugando.

git es una herramienta que nos permite modificar estas reglas y, lo que es más importante, irlas cambiando y adaptando a medida que el proyecto avanza y el equipo madura. Una vez más, una buena dosis de sentido común será nuestra mejor aliada para responder las preguntas que nos surjan durante el camino.

Referencias: