#10 – 12 Abril 2006 /* Todos enviados por sus webmasters. Gracias! */

Un gran lío en esto de entender el CSS es el tema del posicionamiento: static, absolute, fixed e incluso float son usados para diagramar un sitio y su contenido. En el siguiente link se muestra con ejemplos prácticos cómo se comporta cada uno de estas propiedades, incluso juntas. link: Learn CSS Positioning in Ten Steps

Envié un estilo para tablas hace no muchos días, y hoy gratamente me doy cuenta que fue bien recibido y publicado en CSS Table Gallery. De ahí mismo se puede echar una mirada al código CSS. Muchas gracias, gente de icant.co.uk! link: CSS Table Gallery

#9 – 27 Marzo 2006

Tras años de diseño y desarrollo web para diferentes clientes e incluso para mí mismo, hasta no hace mucho que se ha creado una conciencia global en cuanto a regirse por las normas que impone ciertas organizaciones que como la W3C, hacen precisamente eso: marcar la cancha en cuanto a lo que de semántica se trata. Desde el boom de Google, que la gente, los empresarios, han valorado lo que significa estar bien posicionado en un buscador. Aparecer antes que todos, significa ventas. Y si de dinero se trata, vale la pena pagar un poco más por un sitio mejor hecho y que sea amigable para los spiders que lo visitan cada cuanto. Así que leyendo un artículo, me propuse a traducir y completar unos cuantos tips para el diseño y desarrollo web exitoso: Respeta tus visitantes: no trates de obligarlos a leer el contenido de tu sitio web. Déjalos escojer y decidir lo que quieren leer. Si tienes algo que decir, encontrarás a quienes te lean. Es increíble que el tema más absurdo, bizzarro, irracional, tiene llegada en cualquier parte del mundo. Porque hay que pensar global. De aquí viene la siguiente. Piensa global: si estás en Internet, estás para el mundo. En lo posible, trata de poner tu sitio en más de un idioma, dependiendo del target que tienes pesado para tu sitio. No pienses que sólo necesitas contactar a los de tu ciudad, también de tu país, o a todos los hispanohablantes. Un error típico en Contacto, es poner el número de teléfono sin el código de ciudad o de país. De ahí nadie sabe dónde estás localizado. Y más enccima tienes un .com …..

Listamatic, un excelente link donde se muestran variados ejemplos de menúes construídos con ‘s: verticales, horizontales, tabbed, experimentales…. con código incluído. Para aprender, y para sacar de aprietos.

Un gran mercado que en Chile está despegando, lentamente dado en parte por el alto costo de la tecnología y los teléfonos móviles que la soportan, es el del webdesign para móviles. En general, del diseño de multimedios orientado para dispositivos móviles: teléfonos, PDA’s, etc. Por ello, es imprescindible que los diseñadores sepan que existe esta posibilidad, que está abierta a ser utilizada y que no es nada del otro mundo implementarla. Si ya tienes tu sitio tableless, es cosa de ‘esconder’ algunos div‘s para que no sean desplegados, y formatar algunos espacios para el ancho de pantalla del móvil. Tamaños de pantallas: Aquí comienzan los problemas. Claro, nada es perfecto. La mayoría de las pantallas son verticales; las menos apaisadas, y menos aún las que puedes escoger entre ellas. El tamaño más común hoy en dia corresponden a 176 x 208px. Algunos más antigos tienden al cuadrado (128 x 128px y 120 x 144px). PDA’s usualmente usan VGA (480 x 640px). Otros tamaños comunes son de 200 x 640px y 320 x 640px.

#8 – 06 Marzo 2006

¿Cansado de usar las mismas tipografías por defecto? Tuviste que cambiarte a Flash por este motivo? Pues hay un antiguo método para que puedas utilizar cualquier fuente TrueType en un sitio construído en HTML. Es bastante simple, pero necesita de algunos pasos previos y ciertos conocimientos. Démosle: ¿Porqué encrustar una fuente? Una tipografía es un recurso del sistema operativo, no del browser. Si diseñas y construyen un sitio web localmente, en tu computador, utilizando una fuente no típica, por ejemplo, Futura, la podrás visualizar sin problemas. Pero no quien la visita y no la tiene instalada. Aquí comienzan los problemas. Flash fue durante mucho tiempo muy utilizado por esto, ya que permite ‘incrustar’ la fuente en al ingresarla como Static Text, y en el caso de la caja de texto ser dinámica, permite incluirla entera, o ciertos caracteres (lo que aliviana el peso del swf final). Pero con el crecimiento del uso de CSS en la web, se puede percibir claramente que se puede construir todo lo que hace Flash (bueno, casi todo) con AJAX y otros trucos. Y esto mucho más liviano, quizás algo más difícil. Lo que hace el uso de Javascript aún exclusivo para desarrolladores, y no tan divulgado entre diseñadores. Pero bueno, esto es materia para otro artículo. ¿Porqué no incluir una fuente? Esto sólo funciona en IE 4+ y Netscape 5+. Si cierto browser no la reconoce, ignoran el código. Aumenta el peso del sitio, ya que al incluir la tipografía, dependiendo de ella pueden ser desde 20kb hasta 500kb cada una. Si no sabes optimizar la cantidad de caracteres necesarios a ser utilizados, mejor olvídate de esto. Es inseguro. Por lo menos eso es lo que creen los browsers, al tener que bajar una fuente para visualizar un sitio el browser lo encontrará inseguro y advertirá de ello. Un usuario común suele tener miedo a estos mensajes de advertencia, más aún por la moda actual de ataques de spamware. Es necesario el uso de un software especial para convertir una fuente TrueType .ttf en Embeddable Open Type .eot. Me preocupan más los contras que los pro, así que para mí no es una opción. Sólo si necesito un caracter muy especial y no puedo utilizar un gif. Así que en este artículo mi intención es sólo mostrar que existe esta posibilidad y cómo se hace. No explicaré más allá, o paso a paso.

Debido al pedido del público fiel lector de CSSLab, me puse las pilas y anoto un artículo más con una vieja pero nunca mal ponderada técnica para construir menús de listas horizontal (usando y ), pero en esta oportunidad le agregaremos un rollover, ya q he recibido la inquietud de parte de Bane de cómo aplicar el artículo anterior ‘Rápidos rollovers con CSS‘ en este tipo de despliegue. Vayamos al grano: Lo primero es lo primero: creamos el menú con 1 , 1 y varios ‘s: <div id="menu"> <ul> <li><a href="#">Más Izquierda</a></li> <li><a href="#">Izquierda</a></li> <li><a href="#">Derecha</a></li> <li><a href="#">Más derecha</a></li> </ul> </div> Le vamos a dar color y forma a esto. Agregando estilo a #menu: