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:

Lo ví y me gustó #7 – 16 Febrero 2006

Lo ví y me gustó #6 – 13 Enero 2006

La corriente actual nos dice: «no uses tablas al diagramar un sitio web…» Pero si están bien utilizadas, siguen siendo de gran ayuda, ya que su compatibilidad con browsers es por años y por versiones comprobadas. En el siguiente link, se muestra la forma correcta de utilizarlas. Si quieres seguir utilizando tablas, en esta galería se muestran buenos estilos que se pueden integrar a un tabla. Atrévete y envía el tuyo.

#5 – 16 Diciembre 2005 Gracias a todos los aportes en ‘Envía tu Sitio’. El criterio que ocupo al revisar un sitio, es que primero, sea construído en CSS (aunque no completamente); que gráficamente sea atractivo, y que se vea bien en diferentes browsers y plataformas (no importa q sea o no válido por W3C).

#4 – 2 Diciembre 2005

Cuando creamos un nuevo documento HTML en nuestro editor favorito, no nos fijamos que se agregan un par de líneas de código que por ignorancia desconocemos, pero tienen gran importancia a la hora de renderizar la página y validar su estructura. En este momento, nos referiremos al DOCTYPE y los DTD.