Avisar de contenido inadecuado
Expand

Fundamentos Web 2007: Allí estaremos

15853-15130.jpgFundamentos Web es uno de los eventos a nivel nacional más importantes en el ámbito del desarrollo y el diseño web con estándares. La edición de este año se celebrará los días 3 al 5 de Octubre en Gijón, Asturias y reunirá a profesionales de la talla de Tim Berners Lee, al que podríamos considerar el "padre y la madre" de la WWW tal y como la conocemos hoy en día, o Tantek Çelik (blog), director de tecnología de Technorati.

Animado por la experiencia del año pasado, espero poder repetir este año. Además de poder escuchar en vivo a algunas de las voces más influyentes del mundo en esta área, resulta especialmente interesante el networking que se genera en este tipo de eventos, las discusiones que se inician de forma paralela después de cada ponencia, y los talleres prácticos con los que suelen concluir.

Por el momento no hay mucha información sobre el programa en la web oficial del congreso, así que estaremos atentos para poder ir publicando las novedades.

Mientras tanto, y después de haber recuperado algunos apuntes del año pasado, estoy preparando una serie de artículos a modo de resumen de algunos de los temas que más interesantes me parecieron en la edición del 2006. El primero de ellos tratará sobre internacionalización: "Practical and Cultural Issues in Designing International Websites". Próximamente en sus pantallas.

Actualización: Lo prometido es deuda:

{
}
Expand

JQuery 1.1.3: más rápido, más estable, igual de ligero

15801-15085.jpg JQuery, mi framework javascript preferido, se ha actualizado hoy a la versión 1.1.3. En esta nueva versión aseguran haber mejorado la velocidad de parseo del DOM en más de un 800%, convirtiéndose en el framework que mejores resultados da sobre el navegador (aún) mayoritario: IE.

En las pruebas de rendimiento que se han realizado sobre la suite de pruebas SlickSpeed los resultados son sorprendentes, ya no sólo cuando comparamos el rendimiento de esta nueva versión sobre sus principales alternativas ( Prototype, mootools, Dojo... ), si no sobretodo cuando comparamos con la anterior versión de la misma librería.

Navegador jQuery 1.1.2 jQuery 1.1.3 % Mejora
IE 6 4890ms 661ms 740%
Firefox 2 5629ms 567ms 993%
Safari 2 3575ms 475ms 753%
Opera 9.1 3196ms 326ms 980%
Mejora media: 867%

Algunas de las mejoras y novedades que encontraremos en esta actualización:

  • Nuevos selectores
  • Renderización de las animaciones más rápidas y suaves
  • Mejoras en el manejo de eventos
  • Posibilidad de usar múltiples ".is()"
  • Implementación de Jquery.browser.version para saber qué navegador y versión está usando el usuario

En el mismo post nos avanzan algunos planes de futuro bastante jugosos. Particularmente me ha parecido interesante la iniciativa de Paul Bakaus de montar una JQuery UI, una completa librería que implementará Draggables, Droppables, Sortables, Resizables... todo lo que hasta ahora sólo era posible hacer con plugins como Interface.

Estaremos atentos a las novedades. 

Expand

iPhoney: Simulador web de iPhone

iPhoney es un simulador  que nos permitrá saber cómo se verán / funcionarán nuestros diseños en el navegador web del iPhone.

Con iPhoney podrás:

  • Testear la apariencia de tus diseños o tus aplicaciones web.
  • Abrir cualquier sitio que funcione en Safari ( el navegador del iPhone usará Safari como motor web )
  • Rotar el interfaz del simulador para comprobar la apariencia de los sites en formato apaisado.
  • Simular el USER AGENT del iPhone, pudiendo testear o implementar correctamente redirecciones basadas en el navegador del usuario.

Sólo apuntar que iPhoney requiere MAC OS X 10.4.7 o superior, así que linuxeros y windowseros... naranjas de la china.

Via | Bitelia 

Expand

Safari para Windows: A la tercera va la vencida

Después de la metida de pata que supuso el prematuro lanzamiento de la versión para Windows de Safari, el navegador web de Apple, parece que los chicos de Jobs se han puesto las pilas. En la última actualización ( la tercera en una semana ), las cosas empiezan a pintar bien:

  15187-14887.jpg

Al menos los errores más importantes de renderización, y los bugs más críticos, como el relacionado con el uso de las opciones de favoritos, se han solucionado. Veamos, tras un uso intensivo de esta nueva versión de Safari, si merece ganarse un puesto en nuestra barra de Inicio Rápido...

Si aún no lo habéis probado, podéis descargar Safari para Windows desde la web de Apple.

{
}
Expand

Fondos de escritorio para monitores duales

Hace un par de días me topé con Mandolux, una web dedicada a recopilar wallpapers especiales para pantallas duales. La recopilación es realmente buena, y además los archivos de imagen están disponibles para descarga en diferentes resoluciones para uno y otro lado (en mi caso, por ejemplo, trabajo en la oficina con un monitor de 22" y uno de 19", así que el tamaño del fondo debe ser diferente en uno y otro lado). 

14145-14555.jpg

Habrás advertido, sin embargo, que colocar un fondo de pantalla diferente en cada monitor no es tarea fácil: Windows por ejemplo sólo ofrece la posibilidad de cambiar un sólo fondo de pantalla, repitiéndolo en cada monitor. Sin embargo, con un sencillo truco podremos colocar tantos fondos diferentes como pantallas tengamos conectadas a nuestro ordenador. Os explico.

El truco consiste básicamente en sacar partido de los "Elementos Web" que podemos colocar en el escritorio. Debes acceder a las propiedades de pantalla, con un clic derecho sobre el escritorio o a través del panel de control. Luego tendrás que ir a la pestaña "Escritorio" y seleccionar la opción "Personalizar Escritorio". En la nueva ventana que se abrirá, haz clic en la pestaña "Web" y crea un nuevo Elemento Web.

14145-14556.jpg

Al hacer clic en "Nueva", deberás seleccionar la imagen complementaria a la que ya estés mostrando en el escritorio 14145-14558.jpg( si ya has seleccionado el fondo para la pantalla izquierda, tocará seleccionar la imagen correspondiente a la derecha ). Ésto creará un bloque dinámico en tu escritorio, con la imagen seleccionada como fondo. Ahora sólo queda arrastrar ese bloque al monitor que corresponda, maximizarlo, y marcar la opción "Organizar > Bloquear elementos web en el escritorio", haciendo clic derecho sobre vuestro escritorio. Voilá. Ya tendrás una imagen diferente en cada pantalla.

Y tú, que sigues trabajando con una sola pantalla, ¿Aún no has convencido a tu jefe acerca de los beneficios en cuanto a tu productividad que supone el hecho de trabajar con dos monitores?

Expand

Congreso.es: El trabajo mal hecho sale caro

14518-14552.jpg El Congreso de los Diputados ha estrenado la nueva versión de su web hace pocos días, y la red está que arde con los resultados. El rediseño se encuentra dentro de un plan de modernización que ha costado unos 14.000.000€, entre los cuales se incluye la infraestructura tecnológica tanto de la web como del propio Parlamento, y de los cuales "sólo" 5 millones han sido destinados a "consultoría".

Sea como sea, el rediseño ha resultado ser un conjunto de despropósitos que han encendido los ánimos de la comunidad internauta. Entre los puñados de errores o meteduras de pata cabría destacar:

  • DOCTYPE definido de forma incorrecta: No aparece al principio de la página y en cambio se incluye repetidas veces a lo largo del documento.
  • No se guarda la jerarquía de etiquetas del documento: Se abren y se cierran varias veces las etiquetas <body> o <head> ( ¡he contado al menos 7! )
  • Marcado caótico y obsoleto: las etiquetas no siguen ningún tipo de criterio en cuanto al uso de mayúsculas, se usan tablas indiscriminadamente para maquetar, se incrustan estilos en el código, tanto inline, como mediante kilométricos <styles> ( el primer contenido visible aparece más allá de la linea 600 ), aparecen <font> por todas partes...
  • Problemas de accesibilidad: Muchos consecuencia directa de lo anterior, además de iframes sin contenido alternativo, enlaces con javascript incrustado, tablas que rompen el orden de contenidos...
  • ...

En anieto2k han hecho un exhaustivo repaso a los errores, así os os emplazo a continuar allí si queréis ver una lista completa.

14518-14551.jpg

En definitiva lo que más mosquea es que un montón de gente se haya conseguido que se elabore y apruebe una legislación sobre accesibilidad en Sistemas de Información, y los primeros que deben cumplirla y dar ejemplo se la pasen por el forro... y que además nosotros, los ciudadanos, paguemos la estafa de nuestros bolsillos. 

[...]

Uno. Las Administraciones Públicas adoptarán las medidas necesarias para que la información disponible en sus respectivas páginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de 2005. Asimismo, podrán exigir que las páginas de Internet cuyo diseño o mantenimiento financien apliquen los criterios de accesibilidad antes mencionados.

[...]

» Legislación Española sobre Accesibilidad para la Sociedad de la Información

Y es que hacer las cosas bien o hacerlas mal cuesta casi lo mismo. De hecho casi diría que hacerlas TAN mal cuesta mucho más, y no sólo en términos de esfuerzo. Cuando dentro de un tiempo alguien se dé cuenta de la cagada y toque rehacer el trabajo, ¿de dónde saldrá, de nuevo, el dinero?

Ya sabes. Trabaja bien, desde el principio: será una buena inversión.

Más información

Expand

Komoo, clon chino de Twitter

Logo Komoo Si días atrás comentábamos acerca de cómo algunas empresas sobrepasaban ciertos límites cuando diseñaban sus productos, rozando el plagio, en AOL: ¿Inspiración o plagio?, hoy volvemos a las andadas.

Komoo es un clon chino de Twitter, la aplicación 2.0 del momento.  Aunque en cierto modo es habitual que surjan réplicas de las aplicaciones web de éxito ( de hecho Twitter tiene ya las suyas, desde hace tiempo: Jaiku, Trickr... ), lo de Komoo ha ido hasta tal extremo que resulta difícil decir que se trate de dos webs diferentes, más allá de las obvias diferencias de alfabeto e idioma...

Comparaci�n Komoo VS Twitter

De hecho, revisando código e imágenes, vemos que han usado elementos idénticos, sin siquiera preocuparse en cambiarles el nombre:

fondo
http://komoo.cn/background_image/bg.gif

¿Habrá puesto su mirada la Gran Fotocopiadora China en la web 2.0? Surprised

Expand

Frameworks Javascript & AJAX

aNieto2K se hace eco de la nota aparecida en ajaxian: 210 Ajax Frameworks and counting.

 Y es que la verdad es que desde la popularización de ciertas técnicas avanzadas de Javascript y su implantación en muchas de las aplicaciones de lo que se ha venido a llamar la Web 2.0, resulta más que práctico casi imprescindible echar mano de algún tipo de framework que nos facilite el trabajo, ya sea en lo referente exclusivamente a comunicaciones AJAX o para simplificar el acceso y modificación del DOM, o la gestión de eventos.

De todas formas, a pesar de la variedad he de decir que, al menos hasta ahora, no he encontrado nada tan potente, sencillo de usar y optimizado en cuanto a rendimiento y tamaño como JQuery.

¿Qué framework usas tú? ¿O quizás eres de los que piensan que esto de los frameworks es para cobardes y te curras todo tu javascript a pelo? Wink 

Más información

Expand

CSS: Consejos y buenas prácticas

11635-12987.jpgJusto esta semana pasada empezamos en la oficina una fase de revisión de marcado y de css de una web bastante grande, y en la que participaremos varios desarrolladores. Ésto nos ha obligado a acordar algunas convenciones a la hora de trabajar, en cuanto a codificación, estructura, nomenclatura... y a plasmarlas por escrito para que todo el equipo, ahora y en el futuro, pueda consultarlas en un documento de referencia.

En esa guía, además, hemos tratado de incluir algunas recomendaciones de "buenas prácticas" entre las que voy a tratar de resumir algunas de ellas, las más importantes a mi entender.

Consideraciones previas

  • Asegúrate de definir siempre un DOCTYPE, ¡y úsalo!
    De otra forma, el navegador entrará en el Quirk Mode, aumentando el tiempo de renderizado y provocando algunos desajustes en cuanto a la interpretación de ciertas propiedades CSS.
  • Evita usar estilos incrustados o elementos presentacionales en tu marcado.
    Reserva etiquetas <strong> y <em> para aquellos textos que realmente requieran ser enfatizados, y nada de estilos incrustados con styles dentro de tu código HTML. Los estilos SIEMPRE separados del contenido.
  • Valida tu código a medida que codifiques.
    Te evitarás muchos dolores de cabeza al final del proceso. Gran parte de problemas de renderizado son consecuencia de marcado no válido.De igual forma, asegúrate de que esa propiedad tan molona de CSS que estás usando sea estándar y no exclusiva para IE.
  • Resetea las propiedades CSS para eliminar diferencias entre navegadores desde el principio.
    Es muy buena idea empezar tu hoja de estilos general con una serie de declaraciones que reseteen propiedades como los margin, los padding y los border de los elementos más comunes. Echa un vistazo al reset.css que ofrece la librería de Yahoo o al artículo de Daniel que lo comenta más a fondo.
  • Usa el navegador más moderno y con mejor soporte de los estándares durante el desarrollo y el testeo, antes de probarlo en los navegadores "problemáticos", y no al revés.
    Puede que no sigas esta norma y no tengas ningún problema, pero si testeas primero en IE6 tienes muchas probabilidades de terminar con un CSS lleno de hacks, o peor, de terminar metiendo "hacks" para los navegadores que sí cumplen los estándares. Tu objetivo tiene que ser conseguir el código y el CSS más limpio y cross-browser posible y, créeme, la mejor manera de conseguirlo es ésta.
  • Usa el menor número de archivos posible. Es mejor un sólo archivo de 30Kb que 3 archivos de 10Kb.
    Piensa que para cada uno de los archivos estáticos enlazados desde un documento HTML ( CSS, Javascript, imágenes, etc... ), éste debe realizar una conexión HTTP y lanzar una petición, con sus correspondientes cabeceras, cookies si las hubiere... todo suma y al final, tanto en tamaño como en tiempo de descarga, penalizarás al usuario.

Estructura, nomenclatura y otras yerbas

  • Sea cual sea, trata de ser consistente en el idioma usado cuando codifiques, tanto en los nombres como en los comentarios.
    Esto toma especial importancia en grandes equipos o con personas de diferentes procedencias.
  • Usa siempre minúsculas y guiones o guiones bajos para separar palabras.
    Algunos navegadores antiguos han demostrado tener problemas con mayúsculas-minúsculas, así que ve a los seguro.
  • Sé descriptivo en los nombres y huye de usar aquellos que se refieran a la apariencia de los elementos.
    Mejor usar un #main-product que un #m-prod, y nada de clases del tipo .centered, .red... O te encontrarás con que cuando toque cambiar el color o la alineación de contenidos, tendrás que ir modificando las clases de cada elemento... ¡¿Dónde están entonces las ventajas de gestionar el diseño desde una hoja de estilos?!
  • Trata de sacar partido de la cascada
    Evita crear demasiadas instancias siempre que no sean imprescindibles. Por ejemplo
    #main_table { width:100% }
    #main_table th { font-weight:bold; text-align:center }
    #main_table td { text-align:right; font-size:1.5em }

    es mejor que
    #main_table { width:100% }
    .cell_header { font-weight:bold; text-align:center }
    .cell_contents { text-align:right; font-size:1.5em }

    Además, los nombres pueden ayudar a ubicar un elemento dentro de la jerarquía de capas. Por ejemplo, posiblemente sea mucho más práctico usar #header_logo que no #logo a secas.
  • Usa criterios consistentes para organizar las declaraciones de estilos dentro de tu CSS.
    Puedes decidir enunciar las declaraciones según su orden de aparición dentro del código, o agruparlas por el tipo de elemento al que se refieren ( listados, titulares, imágenes... ) Sea cual sea, que éste sea constante, o te vas a volver loco cuando la hoja de estilos adquiera un tamaño importante...
  • Trata de comprimir lo más posible el archivo resultante.
    Ésto lo puedes conseguir no sólo eliminando espacios y saltos de linea sobrantes en tu hoja de estilos mediante alguno de los compresores gratuítos disponibles en internet, si no configurando tu Apache para que sirva comprimidos los archivos determinados tipos de archivos ( HTML, Javascript, CSS ). Piensa que algunos archivos estáticos se enlazan desde todas ( o casi ) las páginas de tu site. Puedes ahorrarte mucho tráfico con esto.
  • Evita usar comillas alrededor de las llamadas a imágenes.
    Todos los navegadores lo entenderán correctamente. Con comillas, en cambio, tendrás problemas en IE para Mac. Pudiendo tenerlos a todos contentos... ¿porqué no hacerlo?

Consideraciones adicionales

  • En el 90% de los casos, la solución más sencilla será la que menos problemas dé entre navegadores.  KISS.
    11635-12988.jpg Normalmente podrás usar varias combinaciones para conseguir el mismo efecto visual. Trata de encontrar la combinación más simple de elementos y propiedades. Mezcla paddings en el contenedor e hijos, margins e indentaciones negativos, y suma algunos posicionamientos absolutos en elementos anidados y tendrás los ingredientes perfectos para un bonito... caos.
  • Los hacks son la última solución.
    Invierte hoy 30 minutos más en encontrar la alternativa cross-browser y ahórrate horas la semana que viene tratando de modificar tu hoja de estilos.
  • Una mala y una buena noticia: ¿La mala? No te asustes, pero sí, algunos navegadores tienen bugs de render, sin explicación ni justificación alguna. ¿La buena? En sitios como PositionIsEverything han identificado muchas de ellas y pueden ahorrarte algunos quebraderos de cabeza. Un simple e inocuo position:relative; o un zoom:1; solucionan muchos de estos bugs.
  • En la línea de lo que comentábamos al principio respecto a la cantidad de archivos CSS a enlazar desde tu página, hay algunas técnicas que pueden ayudarte a reducir la cantidad de archivos de imagen que uses para construir tu página: CSS Sliding Doors & CSS Sprites. Hacer más con menos, keep in mind.
  • La guinda del pastel: no te olvides de preparar una hoja de estilos para impresión. Hace unos días dábamos algunos consejos desde Pixelovers al respecto en Hojas de estilo para impresión.
  • Puedes usar parámetros en la llamada a tu CSS para mantener el control sobre la caché del navegador, y decidir cuándo debe expirar tu hoja de estilos o forzar a tus usuarios a descargarla de nuevo en su siguiente visita.

Conclusiones

Para empezar, concluyo que finalmente el artículo ha salido algo más largo de lo que había previsto, pero había algunos puntos que no quería que quedaran en el tintero, así que espero disculpes mis excesos. Smile

Sin duda, elaborar una guia de estilo a modo de referencia es una práctica recomendable, cuando tengas que enfrentarte un proyecto de dimensiones considerables, y con más motivo si van a ser varios diseñadores / desarrolladores los que "metan mano" al código. Aún y codificando correctamente, cumpliendo estándares y produciendo código válido, semántico, etc... cada uno tiene sus costumbres y su manera de hacer, y mezclar formas de trabajar sin cierto orden en un mismo proyecto puede resultar algo problemático para mantener la web en un futuro. Definir una referencia de estilo, estructura y/o nomenclatura puede reducir, y mucho, esos problemas en equipos grandes.

¿Y tú, cómo trabajas? ¿Coinciden estas recomendaciones con las que incluirías tú en tu HOW-TO? 

Enlaces y más

Expand

AOL: ¿Inspiración o plagio descarado?

Empezaré diciendo que nunca he encontrado mal inspirarse o basarse en ideas o diseños de otros. Más allá de la estética, el diseño tiene una vertiente funcional, y en muchos casos hay decisiones de diseño que vienen dadas o por la experiencia de un equipo resolviendo determinadas situaciones, o como resultado de análisis expertos o tests de usuarios. Para alguien que empieza o no tiene los mismos recursos que determinadas empresas, muchas veces aplicar la solución que ya usan otros con éxito o basarse en el diseño de terceros está justificado.

¿Pero qué ocurre cuando una gran empresa copia descaradamente a otra? Pues que se pone en evidencia ante la competencia y da una imagen penosa a sus usuarios y al mercado en general.

11548-12524.jpg

A la izquierda está el diseño de la versión BETA del nuevo portal de AOL, y a la derecha tenéis la home actual de Yahoo. El parecido es más que evidente. Me pregunto qué ha llevado a una empresa como AOL a perpetrar tan descarado plagio.

Via | Techcrunch