Google Chrome Frame es un plugin open source que trae la rapidez y versatilidad de Webkit (el motor por detrás de Chrome y Safari) directo a IE6. Con esto, podrás fácilmente utilizar todo lo que siempre quisiste sin preocuparte de este malogrado browser, incluyendo CSS3, HTML5 y Javascript.
Lo bueno es que utilizarlo es pan comido: basta con agregar una etiqueta dentro del <head></head> en todas tus páginas que detecta si el usuario -que utiliza IE6- tiene o no ya instalado Google Frame: si no lo tiene, lo redirecciona a una página para su instalación; si el usuario ya lo tiene instalado, comienza automáticamente a instalarse:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Alternativamente, tambien puedes utilizar un script que realiza la misma detección:
<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>
CFInstall.check({
destination: "http://www.misitio.com"
});</script>
<![endif]-->
Esto incluye un <iframe> en el sitio donde le indica al usuario las instrucciones para instalar Google Frame. Una vez instalado, el usuario es redireccionado a lo que hayas declarado en destination.
¿Y cómo funciona?
La primera vez que lo instalé en un PC con WinXP e IE6, realmente me sorprendió. Lo que hace es colocar un marco por sobre el browser mismo, sin que se note que es algo ajeno al navegador. Este marco funciona con todos los botones que por defecto el usuario típico de IE6 está ya acostumbrado (y los que son algunas de las razones por las que no se actualizan nunca). Se ve como IE6, pero su motor es Webkit, lo que más nos interesa. Atrévanse a utilizarlo en sus proyectos, y ojalá puedan tener más tiempo y libertad para crear y menos para arreglar defectos.
Links:
]]>
Durante mis vacaciones me propuse leer este libro que me trajo Papá Noel para Navidad. Al comienzo me entusiasmó el tema ya que como pueden haber notado soy un usuario de Macintosh desde hace muchos años ya, y no me cambiaría de plataforma ni que me pagaran. He leído algo sobre la forma de pensar y de trabajar del actual CEO de Apple, pero en esta ocasión el autor Leander Kahney (blogger de Cult of Mac de Wired) describe muchas anécdotas que envuelven la creación de Apple (y por consiguiente de los computadores personales a finales de los ’70), la contínua búsqueda de la innovación y de la simplicidad de todos sus productos, la cuasi-quiebra de la compañía y de cómo Steve Jobs volvió a Apple tímidamente y con su mentalidad arrolladora logró posicionarla como una de las más importantes en el área tecnológica y de consumo.
La lectura se pone entretenida luego de comienzo cuando uno trata de entender cómo una persona que ha sido tildada de ególatra, sociópata, genio de los negocios, amante del video, budista zen, pescadariano (vegetariano que come pescados), perfeccionista y visionario ha logrado transformar cuatro grandes indústrias: la de los PC (con el Macintosh), de la música (con el iPod y luego con la iTunes Store), la de los dispositivos móviles (con la Newton y luego con el iPhone) y la de la animación digital (con Pixar). El autor constantemente cuestiona la personalidad de Jobs, su carácter y sus manías más íntimas, muchas de las cuales rozan la obsesión. Exigente y narcisista, está siempre buscando detalles que pueden ser mejorados en todos sus productos, sean éstos de hardware o de software.
Interesante es leer cómo Apple logra tanto hermetismo en torno a sus productos, hasta segundos antes de su lanzamiento; cómo se ha propiciado en la empresa un ambiente tal que impulsa a sus empleados a entregar más de lo que se les requiere, todo por mantenerla como una de las más innovadoras del mundo.
Muchas son las lecciones que uno puede tomar de este libro; algunos extractos:
Una de las partes más importantes del proceso de diseño de Apple es la simplificación. La simplicidad de los productos de la compañía viene de remover opciones al consumidor. Para Jobs, menos es siempre más.
Jobs es el grupo de foco de Apple. Una de sus mayores ventajas es que él no es ingeniero. Jobs no tiene entrenamiento formal en ingeniería ó programación. No tiene un MBA. En verdad, no está titulado en nada, ya que dejó la universidad. Jobs no piensa como ingeniero, sino como un consumidor lo que lo hace el usuario perfecto para pruebas de los productos de Apple.
Cuando comienzas a mirar a un problema y crees que es simple, no comprendes cuán complejo realmente es.
Siempre que Steve veía algo nuevo que le daba curiosidad, él la compraba, la desmontaba y trataba de entender cómo funciona.
Con entrevistas a personas cercanas a Steve, Leander Kahney no logra sostener muchas de sus fuentes sin antecedentes bibliográficos; aún así es importante entender el proceso por el cual se ha cimentado los fundamentos por los cuales estamos trabajando actualmente. Conocer cómo funciona la mente creativa e innovadora de uno de los hombres más influyentes de nuestra era es un buen argumento para leer En la cabeza de Steve Jobs.
PD: Mi copia está en portugués pero lo encontré además en inglés y en castellano.
]]>Textmate
Tras años de ser esclavo de Dreamweaver desde su versión 1.0 (y confieso haber pasado hasta por Microsoft Frontpage), me rendí ante su potencia en demasía. Era mucho software y poco el provecho que le sacaba: no necesito templates, behaviors y menos aún componentes. Me gusta hacer las cosas a mano y que ningún editor me ensucie el código; sólo así logré sacarme de la cabeza el ‘facilismo’ y aprender realmente a escribir código fuente como la gente. Lo bueno de Textmate es que es liviano de utilizar, versátil y aún así te ayuda a escribir código, entregándote ‘tips’ si se te olvida alguna sentencia en el lenguaje que quieras.
Photoshop
Oh sí, un editor de imágenes que de seguro Chuck Norris usa. Consume más memoria RAM que el mismo Sistema Operativo (fue una de las causas directas por las que dupliqué la memoria de mi laptop), pero tiene de todo lo que se me ocurra y no tengo que recurrir a otros softwares para nada; lo que se me antoje en el diseño lo aplico con Photoshop. No hay caso con Fireworks ni Illustrator; los PSD’s de mis diseños pesan 50mb como mínimo pero no me importa.
Pipette
Lejos uno de los freeware más útiles que he encontrado. Pippette logra de manera rápida y fácil el color en hexacromía RGB de lo que tengas en tu monitor.
Transmit
Llega la hora de subir tu sitio y probarlo en ese FTP que es más lento que una tortuga; con Transmit he logrado una simbiosis de años y no me falla. Si hay error es del servidor o de la conexión, pero nunca de Transmit. He probado incluso Coda pero no me gustan las llaves suizas: cada producto que sea el mejor para cada función.
Safari, Firefox, Opera, IE4OSX
Safari por lo rápido de Webkit; Firefox por lo masivo; Opera por lo estricto y IE4OSX porque no puedo sacarme a IE6 e IE7 de encima…
Adium
Para mantener contacto con personas reales de carne y hueso, nada mejor que un multi-mensajero que soporta GTalk, Jabber, MSN, AIM, Yahoo! Messenger, .Mac, Bonjour y ICQ entre muchos otros. Te ahorras RAM y espacio en tu escritorio, y es freeware.
iTunes
No puedo vivir y menos trabajar sin música, sino no tengo estímulo para hacer bien las cosas. iTunes me ordena bastante bien mis músicas y mis playlists, además de sincronizarla con mi iPod. Todo lo que necesito.
pd. Por si no se han fijado, utilizo desde hace años plataforma Mac…
]]>La idea detrás de DivIt es simple: mediante class‘es pre-establecidad, divides los elementos siempre y cuando el ancho total sume 100%. Por ejemplo, para una fila puedes usar:
- 100%
- 50%+50%
- 33%+33%+33%
- 25%+25%+25%+25%
- 50%+25%+25%
- etc etc etc
La combitatoria va con tu imaginación y tu necesidades. Puedes establecer un contenedor con ancho fijo, o con ancho también con porcentaje. En este caso DivIt (y el uso de porcentajes en general) es bastante flexible y hace bastante fácil su implementación, principalmente para quienes se dificultan con calcular anchos de cajas para layouts complejos.
¿Qué pasa si entre las cajas tiene padding y/o margin? Rolando recomienda utilizar una class que contenga estas propiedades, entre la caja de layout y el contenido mismo de la caja, tal como recomendé hace un tiempo atrás. ¿Pero si entre cajas hay un border-right, y luego un margin-right? Eses son casos de diseño que se deben de solucionar con bastante ingenio, ya que sabemos que son elementos que hacen parte del modelo de caja e influyen en el ancho de la caja, inclusive si son con porcentajes.. y personalmente esos son impedimentos que me hacen preferir definir y construir el layout a mano; pierdo más tiempo pero tengo más control.
En mis pruebas DivIt anduvo bastante bien, logrando armonía entre mis browsers de pruebas, así que logró mi satisfacción y que me tomara mi tiempo en escribir este review. Para funcionar, Rolando entrega un .zip con varios archivos necesarios:
- reset.css
- divit.css
- ie.css
- minmax.js
El reseter.css es necesario para cualquier layout, pero aquí está incluído como archivo aparte; divit.css contiene las class‘es de porcentajes necesarias; ie.css las arregla para IE6 y minmax.js según las palabras de Rolando "para soportar min/max-width en IE". Estos dos últimos archivos asumo que deben ser incluídos mediante comentarios condicionales, y según entiendo este último .js no es necesario si no usas min/max-width… tampoco me quedó claro eso.
Pros:
- fácil de entender.
- fácil de usar.
- resultados reales.
Contras:
- falta documentación más detallada (instrucciones).
- falta comentarios detallados en los source entregados.
- la implementación con IE podría ser más integrada (sin necesidad de una hoja de estilos externa o comentarios condicionales).
Link: DivIt // Un grid-system que divide el trabajo
]]>Finalmente son 10 las leyes con que John nos explica con un vocabulario muy simple (sí, seguro también lo pensó) el camino para lograr productos simples:
- Reducir
- Organizar
- Tiempo
- Aprendizaje
- Diferencias
- Contexto
- Emoción
- Confianza
- Fracaso
- La Única
Una lectura muy amena, simple y directa que nos ayudará no sólo a simplificar nuestro trabajo, sino que seguro nuestras vidas. Podremos darle más sentido a nuestras acciones, dándoles más valor y aprovechando más el tiempo. Búsquenlo en su libreria favorita, espero lo puedan encontrar y tener su copia.
]]>A primera vista es un libro bastante delgado, lo que me incentivó a leerlo durante ese mismo viaje. Su temática es muy precisa: aborda el concepto detrás de la usabilidad web, y el sentido común para lograr una exitosa experiencia por parte del usuario. Steve entrega muchos tips, técnicas y ejemplos de su experiencia personal, lo que valoro mucho de este libro. Su lectura es muy amena y precisa; él mismo lo deja claro desde el comienzo -"este es un libro para que sea leído en un viaje corto de avión"- lo que hace la lectura muy fácil.
Entre los temas que toca, están:
- Patrones de usuario
- Diseño de navegación
- Layout de una página de inicio
- Tests de usabilidad
Ya van en la segunda edición (2006), y como el mercado web va tan rápido, creo que ya es hora de una tercera actualización de sus contenidos y ejemplos principalmente (muestra sitios web del 2000… totalmente obsoletos).
Muy recomendable, lamentablemente no se encuentra en librerías locales. Mi copia está en portugués y la traducción no es la mejor (mucho tecnicismo que no puede ser traducido); me imagino que en español debiese pasar lo mismo. Si tienen buen inglés, no duden en encargar su copia.
]]>Shadowbox es una ventana modal escrita enteramente en Javascript. Puede desplegar una amplia gama de archivos gráficos (imágenes, películas, etc.). Es crossbrowser, multiplataforma, de código limpio, relativamente bien documentado (aunque es nuevo).
Más prestaciones:
- Su marcado se apega a los estándares web (valida).
- Puede adaptarse fácilmente a cualquier aplicación.
- Fácilmente customizable mediantye skins (CSS).
- Soporta formatos de imágenes, Quicktime, Windows Media Player, Flash, Flash Video, HTML y páginas externas.
- Maneja errores de plugin elegantemente, desplegando una sugerencia de link para bajarlo si hay necesidad.
- Ofrece opciones configurables sin tocar código fuente.
- Soporta enlaces vía mapeo de imágenes (mediante la etiqueta <area>).
- Compatible con Firefox 1.5+, Camino, Safari 2+, Opera 9+, Internet Explorer 6+.
Impresionante, ¿no? Pero lo que más me llamó la atención fue otro detalle:
- Mediante adaptadores, puedes usarla sin importar el framework que hayas implementado en tu sitio, o que estés acostumbrado a trabajar. O sea, puedes usar Shadowbox con Prototype, jQuery, Yahoo! UI, Mootools, Ext o Dojo; el que más te acomode. ¡Genial! Sólo debes incluir el adapter necesario de acuerdo al framework a gusto del consumidor.
Lo implementé en un nuevo proyecto personal llamado Rulz, y realmente muy potente. Lo mejor es que actúa mediante la asignación del atributo rel="shadowbox" dentro de <a>, lo que a contrario de Thickbox (que fue el que estaba usando), no me interfiere en el enlace ya que estaba ya pasando algunos parámetros de geo-ubicación (para Google Maps, pueden probarlo si entran a alguna reseña y presionan "Ver mapa de ubicación").
Pros:
- fácil implementación.
- ultra-mega-customizable.
- multi-framework (!!!).
Contras:
- no es tan liviano como quisiera.
Link
]]>
Hasta que me topé con Origo CSS. Según su propio autor: "Origo CSS es una base estructural para el diseño de interfaces de usuario web desarrollada en CSS y HTML, que permite definir los cimientos de la organización y distribución de unidades de información." En palabras simples: Origo CSS son varias hojas de estilos con propiedades definidas, las que te permiten usarlas para diagramar estructuras de manera fácil para tu sitio web, a través de filas y columnas ya declaradas. Con un poco de tiempo y entrenamiento se puede llegar a acostumbrar a su uso.
Su aporte es un nuevo método de clearfix, donde creativamente utiliza un overflow: hidden; para que el contenedor soporte sus elementos flotantes. Un interesante mecanismo que valió la pena el estudio de este proyecto.
Pros:
- fácil uso.
- relativamente liviano para proyectos grandes.
- bien documentado y en castellano.
Contras:
- el nuevo método de clearfix no me convenció del todo.