Darío Ferrer » HTML y CSS

Borrachos y CSS

Darío Ferrer — Thu, 04 Jun 2009 11:47:08 +0000

¿Acaso pensaban que los honorables ebrios no podían ofrecernos unas buenas lecciones de CSS? Pues así es. Estos héroes anónimos asumen día a día (y noche a noche) la difícil tarea de actuar como tutoriales vivientes a favor de nuestro aprendizaje.

Contrario a lo que algunos puedan pensar, el CSS es una disciplina nada fácil de dominar. Quienes nos dedicamos a la profesión de maquetar webs apreciamos sumamente toda fuente de aprendizaje. Mientras más ilustrativas mejor. Y aquí es donde entran nuestros amigos los beodos, quienes se encuentran en la constante búsqueda de métodos y procedimientos -sin escatimar, esfuerzo, costo o tiempo- a favor de la noble causa que envuelve el diseño web. Veamos algunos ejemplos:

display:block: Hace que los elementos se muestren en formato bloque.

La propiedad display:block es una de las más complejas del CSS, ya que muchas veces implica la adición de una serie de propiedades complementarias que justifican su uso. Quizás sea por tal motivo que los navegadores tengan tantos problemas para renderizarla correctamente.

position:absolute: Facilita el control del lugar que ocuparán los elementos en una página.

Para posicionar elementos de forma absoluta sólo se necesita que el elemento padre (o contenedor) también esté posicionado, bien sea absoluta o relativamente. De lo contrario el elemento contenido saldrá fuera de sus límites y tomará posición respecto al primer contenedor posicionado o -en última instancia- a la etiqueta , la cual es la raiz del código html visible.

color / background: Tal como sus nombres lo indican, sirven para fijar los colores de un elemento y los de su fondo.

Existen tres métodos principales para asignar colores: 1) Por nombres (“white”, “black”, “blue”, “red”, etc.) cuya variedad es muy limitada, 2) el método RGB, con una gama bastante amplia y 3) el método hexadecimal, de igual espacio de colores pero más sencillo de implementar.

En el caso de los colores de fondo (background) el CSS permite el uso de imágenes, a las cuales es posible asignar repetición horizontal, vertical, total o ninguna, al igual que su posición dentro del mismo elemento, tomando en cuenta las coordenadas respecto a su punto superior, inferior, izquierdo, derecho o medio.

white-space:nowrap Suprime todo salto de línea en el elemento afectado.

Si aplicáramos la propiedad white-space:nowrap a -por ejemplo- un párrafo, éste se mostraría en una sola línea independientemente de los límites de ancho de la página. A pesar de la creencia de algunos, white-space:nowrap resulta muy útil en determinados casos, tales como el formateo de menús cuyo texto no deseamos cortar.

display-inline: Ajusta elementos para mostrarlos en línea.

Otra de las variantes de la propiedad display es inline, la cual ubica los elementos horizontalmente, uno al lado del otro. Es ampliamente utilizada para formatear listas (originalmente mostrada en fomato bloque) y más específicamente en menús horizontales.

overflow:hidden: Oculta un elemento dentro de los límites del elemento padre.

“Overflow” significa “sobreflujo”, y “hidden” significa “escondido”. Cuando asignamos a un elemento la propiedad overflow:hidden, el flujo de todos sus elementos hijos (los que están contenidos dentro de éste) están circunscritos a sus límites. Esto quiere decir que cualquier sobreflujo se encontrará escondido dentro del contenedor afectado.

overflow-visible: muestra el contenido de los elementos fuera del contenedor.

En contraparte de lo anteriormente explicado, overflow:visible muestra el contenido de los elementos hijos fuera de los límites del contenedor (o padre). La mayoría de los elementos html vienen con esta propiedad de forma predeterminada, por lo cual sólo es utilizada si previamente se le ha asignado overflow:hidden a la misma clase.

border: Define el borde de un elemento.

La propiedad border tiene más variantes que fijan el grosor, tipo y color del borde de un elemento. La mayoría de los navegadores suman el ancho del borde al ancho total de la caja afectada, por lo cual -por ejemplo- una capa de 300px con borde de 1px tendrá un tamaño final de 302px (300 + el píxel del borde por lado).

En CSS existe variedad de formas de presentación de los bordes. Sin embargo, navegadores como Internet Explorer tienen problemas para renderizar (o mostrar) correctamente algunos de ellos.

Conclusión

Es posible que a partir de este momento veas a los ebrios desde el lente de la humildad académica.

Catálogo de fuentes web

Darío Ferrer — Sat, 31 Jan 2009 19:16:22 +0000

La tipografía web es un factor de suma importancia en el diseño. El correcto manejo de las fuentes nos permite obtener resultados satisfactorios en nuestra maquetación, puesto que estaremos tomando en cuenta el diseño, la compatibilidad entre navegadores y en consecuencia la calidad general de nuestros proyectos.

Una eficiente recopilación de fuentes por parte de Big Hustle nos muestra una lista de fuentes disponibles en distintos sistemas operativos. Fue necesario modificar dicha lista debido a algunas inexactitudes encontradas, de manera que puedes tomarla como referencia:

Fuentes predeterminadas para Windows XP

Aharoni Bold
Andalus
Angsana New
Angsana New Bold
Angsana New Bold Italic
Angsana New Italic
AngsanaUPC
AngsanaUPC Bold
AngsanaUPC Bold Italic
AngsanaUPC Italic
Arabic Transparent
Arabic Transparent Bold
Arial
Arial Black
Arial Bold
Arial Bold Italic
Arial Italic
Batang
Browallia New
Browallia New Bold
Browallia New Bold Italic
Browallia New Italic
BrowalliaUPC
BrowalliaUPC Bold
BrowalliaUPC Bold Italic
BrowalliaUPC Italic
Comic Sans MS
Comic Sans MS Bold
Cordia New
Cordia New Bold
Cordia New Bold Italic
Cordia New Italic
CordiaUPC
CordiaUPC Bold
CordiaUPC Bold Italic
CordiaUPC Italic
Courier New
Courier New Bold
Courier New Bold Italic
Courier New Italic
David
David Bold
David Transparent
DFKai-SB
DilleniaUPC
DilleniaUPC Bold
DilleniaUPC Bold Italic
DilleniaUPC Italic
Estrangelo Edessa
EucrosiaUPC
EucrosiaUPC Bold
EucrosiaUPC Bold Italic
EucrosiaUPC Italic
FangSong_GB2312
Fixed Miriam Transparent
Franklin Gothic Medium
Franklin Gothic Medium Italic
FrankRuehl
FreesiaUPC
FreesiaUPC Bold
FreesiaUPC Bold Italic
FreesiaUPC Italic
Gautami
Georgia
Georgia Bold
Georgia Bold Italic
Georgia Italic
Gulim
Impact
IrisUPC
IrisUPC Bold
IrisUPC Bold Italic
IrisUPC Italic
JasmineUPC
JasmineUPC Bold
JasmineUPC Bold Italic
JasmineUPC Italic
KaiTi_GB2312
KodchiangUPC
KodchiangUPC Bold
KodchiangUPC Bold Italic
KodchiangUPC Italic
Latha
Levenim MT
Levenim MT Bold
LilyUPC
LilyUPC Bold
LilyUPC Bold Italic
LilyUPC Italic
Lucida Console
Lucida Sans Unicode
Mangal
Marlett
Microsoft Sans Serif
Mingliu
Miriam
Miriam Fixed
Miriam Transparent
MS Gothic
MS Mincho
MV Boli
Narkisim
Palatino Linotype
Palatino Linotype Bold
Palatino Linotype Bold Italic
Palatino Linotype Italic
Raavi
Rod
Rod Transparent
Shruti
SimHei
Simplified Arabic
Simplified Arabic Bold
Simplified Arabic Fixed
Simsun
Sylfaen
Symbol
Tahoma
Tahoma Bold
Times New Roman
Times New Roman Bold
Times New Roman Bold Italic
Times New Roman Italic
Traditional Arabic
Traditional Arabic Bold
Trebuchet MS
Trebuchet MS Bold
Trebuchet MS Bold Italic
Trebuchet MS Italic
Tunga
Verdana
Verdana Bold
Verdana Bold Italic
Verdana Italic
Webdings
Wingdings

Fuentes predeterminadas para Windows 98

Arial
Arial Black
Arial Bold
Arial Bold Italic
Arial Italic
Book Antiqua
Calisto MT
Century Gothic
Century Gothic Bold
Century Gothic Bold Italic
Century Gothic Italic
Copperplate Gothic Bold
Copperplate Gothic Light
Courier 10,12,15
Courier 10,12,15
Courier New
Courier New Bold
Courier New Bold Italic
Courier New Italic
Fixedsys
Fixedsys
Impact
Lucida Console
Lucida Handwriting Italic
Lucida Sans Italic
Lucida Sans Unicode
Marlett
Matisse ITC
Modern
MS Sans Serif 8,10,12,14,18,24
MS Sans Serif 8,10,12,14,18,24
MS Serif 8,10,12,14,18,24
MS Serif 8,10,12,14,18,24
MS-DOS CP 437
News Gothic MT
News Gothic MT Bold
News Gothic MT Italic
OCR A Extended
Small Fonts
Small Fonts
Symbol
Symbol 8,10,12,14,18,24
Symbol 8,10,12,14,18,24
System
Tempus Sans ITC
Terminal
Terminal
Times New Roman
Times New Roman Bold
Times New Roman Bold Italic
Times New Roman Italic
Verdana
Verdana Bold
Verdana Bold Italic
Verdana Italic
Webdings
Westminster
Wingdings

Fuentes predeterminadas para Windows ME

Abadi MT Condensed Light
Arial
Arial Black
Arial Bold
Arial Bold Italic
Arial Italic
Book Antiqua
Book Antiqua Bold
Book Antiqua Bold Italic
Book Antiqua Italic
Calisto MT
Century Gothic
Century Gothic Bold
Century Gothic Bold Italic
Century Gothic Italic
Comic Sans MS 0
Comic Sans MS Bold 0
Copperplate Gothic Bold
Copperplate Gothic Light
Courier New
Courier New Bold
Courier New Bold Italic
Courier New Italic
Impact
Lucida Console
Lucida Handwriting Italic
Lucida Sans Italic
Lucida Sans Unicode 98
Marlett
News Gothic MT
News Gothic MT Bold
News Gothic MT Italic
OCR A Extended
Symbol
Tahoma
Tahoma Bold
Times New Roman
Times New Roman Bold
Times New Roman Bold Italic
Times New Roman Italic
Verdana
Verdana Bold
Verdana Bold Italic
Verdana Italic
Webdings
Westminster
Wingdings

Fuentes predeterminadas para Mac OS X Beta

Apple Chancery
Arial
Arial Black
Arial Narrow
Arial Rounded MT
Brush Script MT
Capitals
Charcoal
Chicago
Comic Sans MS
Courier
Courier New
Gadget
Geneva
HeiseiKakuGothic
HeiseiMincho
Helvetica
Hiragino Kaku Gothic Pro
Hiragino Kaku Gothic Std
Hiragino Mincho Pro
Hoefler Text
Lucida Grande
Monaco
New York
Osaka
Palatino
Sand
Skia
Symbol
Techno
Textile
Times
Times New Roman
Trebuchet MS
Verdana
Webdings
Zapf Dingbats

Fuentes predeterminadas para Mac OS X

American Typewriter
Andale Mono
Apple Chancery
Arial
Arial Black
Arial Narrow
Arial Rounded MT
Baskerville
Big Caslon
Brush Script MT
Capitals
Charcoal
Chicago
Comic Sans MS
Copperplate
Courier
Courier New
Didot
Futura
Gadget
Geneva
Georgia
Gill Sans
HeiseiKakuGothic
HeiseiMincho
Helvetica
Helvetica Neue
Herculanum
Hiragino Kaku Gothic Pro
Hiragino Kaku Gothic Std
Hiragino Maru Gothic Pro
Hiragino Mincho Pro
Hoefler Text
Impact
Lucida Grande
Marker Felt
Monaco
New York
Optima
Osaka
Palatino
Papyrus
Sand
Skia
Symbol
Techno
Textile
Times
Times New Roman
Trebuchet MS
Verdana
VT 100
Webdings
Zapf Dingbats
Zapfino

Fuentes predeterminadas para Mac OS X Classic

Charcoal
Chicago
Courier Regular
Geneva
Helvetica
Monaco
New York
Palatino
Symbol
Times

Fuentes predeterminadas para Linux/Unix

charter
clean
courier
fixed
helvetica
lucida
lucidabright
lucidatypewriter
new century schoolbook
symbol
terminal
times
utopia
Charter BT
Utopia
URW Antiqua T
URW Grotesk T
URW Bookman L
Nimbus Mono L
URW Gothic L
Nimbus Sans L
URW Palladio L
Century Schoolbook L
Nimbus Roman No9 L
Standard Symbols L
URW Chancery L
Dingbats

Lista segura

La lista segura de fuentes (conocida también como safe list) está constituida por el conjunto tipográfico común en la mayoría de los navegadores. Obviamente el número es mucho menor que las anteriores listas, pero al mismo tiempo representan una guía para el diseñador web, a fin de optimizar al máximo la compatibilidad de los sitios creados:

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana