Quasar – Todo Informática

A partir de Marzo Google dejará de dar soporte a Internet Explorer 6 según informó mediante un Blog relacionado con el servicio Google Docs “Modern Browsers for Modern Applications” (Navegadores Modernos para Aplicaciones Modernas).

La iniciativa que comenzó hace bastante tiempo ya es una realidad. El problema: los navegadores viejos son lentos, inseguros y carecen de la funcionalidad para soportar tecnologías como AJAX y soporte para plantillas CSS de manera correcta.

Algunas personas apuntan a que esta medida también se toma por los recientes ataques a Google en China en donde se utilizaron vulnerabilidades de navegadores y productos.

Internet Explorer 6 sigue en uso debido a que muchas aplicaciones, sobre todo a nivel corporativo, fueron diseñadas para este navegador y migrar a uno más nuevo implica costos para los departamentos técnicos. Sin embargo Microsoft alentó desde el lanzamiento de Internet Explorer 7 la migración. Por otro lado sitios como YouTube y otros anunciaron y descartaron el soporte a este navegador el año pasado.

MockingBird es una aplicación en línea para diseñar borradores de diseño. Utiliza AJAX (Capuccino, Framework) lo que se traduce en que no necesitamos descargar nada para usarlo.

Se pueden compartir los diseños con clientes y todo. Muy buena herramienta. Tanto para el que diseña como para los clientes que quieren poner en pantalla las ideas del diseño que quieren para que después el diseñador las vea o ajuste según haga falta.

Google lanzará antes de fin de año su servicio Google Wave, el cual creo que va a aportar bastante a Internet. Como habíamos mencionado utiliza lo último en tecnología web y diseño: HTML5, CSS y Javascript entre otras cosas. Con la historia de que Internet Explorer 6 sigue en el mercado y teniendo en cuenta que muchas empresas lo mantienen porque es más caro migrar o adaptar aplicaciones a este navegador tan odiado la gente de Google sabe que ofrecer que los usuarios se pasen a Goolge Chrome (el navegador de Google) no es posible.

La solución que ellos ofrecen es un plugin que agrega a Internet Explorer todo lo que le hace falta: un motor de Javascript más rápido, HTML5, CSS (al día con bordes redondeados y otros juguetes) y otros avances para asegurar terreno a la hora de que Google Wawe se use con este navegador.

Estas son algunas cosas que a veces se nos escapan:

• Siempre definir margin y padding. Este es uno de los problemas más molestos a la hora de diseñar para Firefox e Internet Explorer (especialmente IE6) ya que cada navegador tiene valores predeterminados diferentes. Pueden usar * {padding:0; margin:0; } para definir 0 padding y margin para todos los elementos.
• link, visited, hover y active es el orden en los que hay que definir los atributos de a (links)
• Tipos de letras con espacios deben encerrarse entre comillas. Por ejemplo: “Trebuchet MS”
• Usar em en vez de pixel nos ayuda a mantener los tipos de letra en forma proporcional. Usando font-size: 62.5% setea el tamaño a aproximadamente 10px. Que es igual a 1em. De ahi podemos usar 1.1em (11px) y así.
• Siempre usar background (o background-color) y color: #xxxxxx para definir el color de fuente ya que no solo es requerido para ser CSS válido sino que también hay usuarios que cambian los colores por defecto. Al usar esto nos garantizamos que el color de fondo y de fuentes sea el que queremos para nuestro diseño.
• En vez de setear margin-top, margin-right, margin-bottom y margin-left podemos poner todo en una línea: margin: 12px 4px 6px 3px; (en el sentido de las agujas del reloj: arriba, derecha, abajo, izquierda).
• Para alinear (flotar) imagenes a la derecha o izquierda para que el texto las rodée podemos usar float: right o float: left.
• En Firefox y Opea podemos usar bordes redondeados de CSS3 con:
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  En Internet Explorer tenemos que seguir usando imagenes para emular este efecto.
• Si queremos usar una imagen en vez de un texto, pero queremos mantener el texto en el código podemos usar display: none y un background con imagen: background: #fff url(/imagenes/mi_imagen.gif); Aunque es preferible usar el background y que el texto quede visible porque sino Google puede tomar ese detalle en contra pensando que uno está ocultando keywords (ver referencia).
• Recordar que HTML y Body pueden cambiarse con CSS también.
• Al usar CSS con Flash podemos usar z-index para que el CSS / Flash esté por encima o por debajo del elemento que queramos. También, en Flash se puede usar la opción OPAQUE para tener más control sobre esto aunque no funcione bien en todos los navegadores.

Con el evidente problema de tráfico el día que murió Michael Jackson el dedo acusador no tardó en levantarse: la culpa la tienen las empresas de publicidad. En gran parte considero que es cierto. Con mi triste experiencia con mi conexión actual de Internet noté que mucho tiempo de carga, por ejemplo, cuando uno visita Facebook, se va en cargar los anuncios. Y seamos realistas: los sitios están cargados, muy cargados hoy día, con muchas empresas ofreciendo no solo anuncios de texto sino también flash. Yen cuanto al texto hayque aclarar que para cargarlo (y medirlo con programas de estadísticas) hay Javascript envuelto en el asunto. Es decir, por mas anuncio de texto que veamos podemos esperar mucho más código en el fondo.

Además de todo esto Google reconoció que un problema que tuvieron con Goolge News se debió a que el tráfico fue  tan grande y repentno que los sistemas lo tomaron como un ataque.

Claro, con conexiones rápidas no se nota tanto pero en cuanto se satura o se usa una conexión lenta se nota la diferencia. Quizás es hora de volver a optimizar sitios por su tamaño además de su contenido ya que con el auge de las nuevas conexiones quedaron atrás las épocas en las que un buen sitio pesaba menos de 90kb.

Acá van algunos mitos que conozco (y muchos que he sufrido). Si alguien tiene más puede comentar y los voy agregando.

• Es un trabajo de poca plata (o ad honorem) pero después me van a dar más trabajo: ja-ja esta la escuché muchas veces. Nunca sucede. Si no hay plata para la persona que va a hacer el proyecto o si el proyecto es tan importante y ambicioso entonces por qué no le pagan mejor al diseñador / programador o cómo es que siendo un poryecto tan TAN no hay plata… cómo piensan hacer plata entonces? triste pero cierto.
• El sitio se promociona solo): MENTIRA ja ja ja. salvo que estemos hablando de algun producto o persona famosa el cuento de que publicando un sitio web está disponible a millones de personas es una mentira. Para que lo vean cientos, miles, millones de personas al sitio lo tienen que conocer, y para que lo conozcan hay que publicitarlo, hay mil maneras, gratuitas y pagas pero si uno no se anuncia nadie lo va a ver. Nadie te Conoce, Nadie te Crée.
• Agregar un (agregar elemento acá) es fácil, solo te va a tomar unos minutos: esta es una maniobra que mucha gente explota sabiéndolo. Sí, muchas veces agregar un formulario de contacto, un cuadro con un texto sí es fácil. Pero siempre preguntar por qué y para qué. Una que pasa cuando uno empieza es la del formulario de contacto. Cuando a uno le piden eso se imagina un formulario simple (y muchas veces el cliente también lo piensa así) pero siempre hay un jeuga de vivo que pide lo simple y después sale conque necesita listado de paises, validación para todos los campos, que cuando faltan datos el color cambie y que además envíe un archivo adjunto… ahi ya no es simple… y el precio es el mismo.
• Si es Open Source se puede cambiar: esto lo estuvimos viendo con un amigo hace poco. Mucha gente piensa que cuando uno baja o compra un código abierto éste se puede cambiar y adaptar fácilmente. No es asi. Primero, todo programa tiene una lógica, una estructura y está hecho para ciertas funciones, si el código está bien hecho se le van a poder hacer algunos agregados pero llegado cierto punto hay que hacer modificaciones totales. Si por el contrario el código es un desastre porque al fin y al cabo también está el tema de que cada programador tiene sus mañas por más reglas y estándares que existan. Entonces en esos casos hacer cambios e suna pesadilla y consumen tanto tiempo que es probable que hubiera sido más fácil programar algo desde cero.
• Es muy caro / es muy barato: esto es muy virtual, siempre es mejor armar presupuestos sobre lo que uno cree que va a tomar de tiempo. Tambíen mucha gente se ampara con precios de otras personas y precios en el extranjero. Siempre tener en cuenta qué es lo que uno va a dar y cuánto tiempo le va a tomar, gastos, etc. No existe un precio estándar, y a mi manera de ver las cosas no se pueden cobrar tarifas fijas. Cada proyecto es diferente. Los precios fijos solo sirven para productos fijos, que ya están listos y de los cuales se conocen los gastos y beneficios. Es igual que un producto de supermercado… un chocolate del estante ya se sabe cuánto se produce, cuánto cuesta… pero si usted encarga un chocolate nuevo, con un envoltorio diferente… ¿crée que el precio va a ser el mismo?
• El Gurú: hay que tener cuidado con los gurús o cuando a uno lo tildan de uno. O se tira a chanta o le piden creyendo que porque sabe lo va a hacer fácil, rápido y encima va a cobrar poco.
• Necesito una fecha: por experiencia… en programación al igual que con cosas que se hacen desde cero, artesanales, no de paquete, solamente se pueden dar estimados, y por lo general todos los proyectos toman más de la cuenta. Sobre todo si se depende de muchas personas. Hace poco trabajé con un sistema de tarjetas cuyo backend era mitad de la empresa y mitad de otra empresa que proveía el servicio. Bastó con un correo que se perdió para perder tres días y otros problemas que salieron (inesperados) para perder otra semana… esas cosas no se planean. Pasan. Hay que recordar (como el ejemplo del chocolate, arriba) que estos proyectos son a la medida, no hay nada estático. Eso es en parte lo lindo de este trabajo pero también un dolor de cabeza.

Uno de los problemas del diseño de páginas web es que no todas las fuentes, tipos de letras, están disponibles en todas las computadoras. Mucha gente quiere un tipo de letra específico pero la cantidad de tipos de letras que vienen por defecto en los sistemas operativos es limitada. Si bien hay equivalencias, por ejemplo para el tipo de letra Arial, en Linux, otras fuentes no corren con la misma suerte e incluso un leve cambio en el espaciado cambia la perspectiva y el diseño.

También está el tema de que mucha gente piensa su diseño usando muchos tipos de letras y eso tampoco es sano (ni estético) pero eso es otro problema.

Como si esto fuera poco mucha gente diseña y usando fuentes que no son gratuitas lo cual agrega otra traba a la hora de pasar un diseño desde el programa a la implementación en Web.

Recientemente con el desarrollo de HTML5 y CSS3 se van a implementar nuevas declaraciones para importar fuentes. Si bien esto no soluciona el tema de las fuentes pagas si soluciona que en un futuro no muy lejano podamos mostrar sitios con fuentes que no están presentes en la computadora del visitante.

Por suerte hay un nuevo proyecto que pronto va a dar una solución a ambos problemas. Se llama Typekit.

¿Cómo funciona?

Typekit negocia con los creadores de las fuentes un precio y Typekit le cobra a los diseñadores una tarifa (que según ellos no va a ser muy cara). Además Typekit va a ofrecer un sistema para buscar y navegar fuentes facilitando así la búsuqeda de la fuente perfecta para nuestro proyecto. De esta manera vamos a poder importar directamente desde nuestro CSS las fuentes.

Si bien esta no es una solución para muchos sí ayuda para sitios que requieren fuentes no convencionales. La verdad, a mi manera de pensar, es que si el precio es justo Typekit va a ser una herramienta útil.

Por otro lado sigo en desacuerdo con el tema de usar muchos tipos de letra diferentes. En un sitio de arte una letra rara puede verse bien pero algo que muchos clientes y diseñadores con poca experiencia creen es que cuanto más agresiva es la letra mejor… esto lo único que hace es que el sitio sea dificil de leer… y en Internet el Contenido es el Rey.

Pueden conocer más sobre Typekit desde su Blog. El sitio está en construcción pero parece que este mismo año lanzan el producto. También pueden dejar el correo en el sitio principal para que les avisen cuando Typekit esté disponible.

Si al igual que en mi caso usan Linux y Windows y les da pereza volver a Windows para usar Dreamweaver y crear el mapa de imagenes hay una alternativa en línea para usar vía web desde Linux.

El sitio Maschek.hu ofrece una herramienta para crear Image Maps en línea. Muy fácil de usar y ofrece las opciones para subir imagenes o usar imagenes alojadas en la web.

Parece una estupidez pero es algo realmente simple y efectivo. La empresa holandesa Spranq alteró el tipo de letra Vera Sans (que es open source) y le puso agujeros para disminuir el nivel de negro de cada letra sin perder de vista la visibilidad de la letra para que sea fácil de leer. El resultado es EcoFont que se puede descargar gratis.

Descargar EcoFont.

Después de varios años la W3C (World Wide Web Consortium), organización que se dedica a organizar y crear estándares para Internet, puso a disposición del público las guías de accesibilidad.

Bajo el título de “Estándar Web del W3C define la accesibilidad para la Web de nueva generación: El esfuerzo de colaboración se plasma en un estándar más flexible y fácil de probar que promueve la accesibilidad de la Web” el comunicado de prensa habla sobre la guía que ofrece por primera vez un punto de partida de dónde diseñadores y profesionales pueden basarse a la hora de desarrollar proyectos.

Ver comunicado de Prensa

Ver Guías