Avisar de contenido inadecuado
Expand

Fundamentos web 2007: día 2

Mesa redonda Fundamentos Web

Empieza el segundo día de las jornadas. Parece que la espicha hizo estragos entre los participantes: la sala está medio vacía. De todas formas la primera ponente ha empezado su presentación. Se trata de George Oates, de Flickr, y va a hablarnos de "Cómo diseñar para y con la Comunidad Web". Here we go.

10:18 - Empieza explicando qué es Flickr. "Un buen lugar para compartir fotos". Da algunos números interesantes. Tienen más o menos 1.4 ¡billones! de fotos. ¿Sabíais que Flickr empezó siendo un juego online? Quizás haya algo en la Wayback Machine... De todas formas, comenta que ya en aquella versión "primitiva" de Flickr, la idea subyacente era permitir la colaboración, la idea de poder "compartir" con otros usuarios...

10: 24 - Comenta que sólo eran 5 personas cuando empezó todo, pero que el equipo creció rápidamente. Habla sobre el proceso de desarrollo y publicación de código y fixes en Flickr: realizan releases de código varias veces al dia. Defiende el concepto de Beta como un estado en el que se acepta la idea de que algunas cosas puedan fallar, pero que se encuentra en contínua mejora y evolución, los errores se solucionan sobre la marcha.

Flickr: fundamentos para su crecimiento

  • Está formado por gente. Es importante tenerles en cuenta. Importancia de la gestión de la privacidad.
  • Diseñar teniendo en cuenta el "blank state". Lo comentaré con detalle más tarde, hay algún link por ahí de 37signals que puede ser interesante para ampliar este concepto.
  • Tener en cuenta la configuración por defecto de las opciones de privacidad tratando de tener el cuenta la mejor experiencia posible para el usuario.
  • Ofrecer diferentes vías para disfrutar de la experiencia.
  • Mostrar la actividad de los usuarios. Es una de las bases del sistema
  • Ofrecer ayuda y soporte de forma accesible y sencilla. Habla de las normas de comportamiento de la comunidad para asegurar un ambiente de relación correcto entre usuarios. Interesante...
  • Mantener un punto de vista neutral. "Un gran poder comporta una gran responsabilidad". Interesante de nuevo... no debe ser nada fácil gestionar una comunidad virtual tan inmensa como la de Flickr.

10:44 -  Habla de la API externa de Flickr. La API no deja de ser una representación virtual de Flickr de la cual cualquier desarrollador puede sacar partido para crear su propia aplicación, reinterpretando los contenidos para mostrar su propia idea. Muestra algunos ejemplos originales de aplicaciones que sacan partido de la API de Flickr. Recomienda visitar Big Huge Labs, donde se muestran decenas de desarrollos específicos que parten de la API de Flickr.

10: 49 - Aparecen las machine tags, y comenta sobre diferentes aplicaciones que sacan partido de ellas. Básicamente se trata de etiquetas complejas que permiten añadir un nivel de especificidad. LastFM por ejemplo las usa para relacionar fotografías en Flickr con eventos registrados en su site. Por ejemplo "lastfm:event=290867" nos diría que la etiqueta corresponde a LastFM, e identificaría que pertenece al evento 290867.

Habla de los riesgos de ofrecer su API en abierto, y de algunos estragos causados por desarrolladores poco cuidadosos... ( ¿ha mostrado una gráfica de cacti? )

Insiste en el respeto a la privacidad.

Los ordenadores adoran los estándares... las personas no tanto. La gestión del caos en la comunidad mediante la cooperación.  

Aplausos. 

11:14 - Mi batería se termina. Agh.

---

20:18 - Ya en el hotel, pasando las fotos del día al portátil para subirlas a Flickr. Las colgaré en el álbum que ya creé ayer, Fundamentos web 2007, y también en el grupo de Flickr de Fundamentos Web. Para las ponencias que no he podido "retransmitir", podéis esperar un par de días a que ordene las notas y las recoja en un post ( aunque de hoy creo que sólo rescataré la ponencia de Tantek Çelik sobre microformatos y las redes sociales abiertas... ) , o revisar torresburriel.com o tripix.net, donde han realizado un exhaustivo seguimiento de las mismas.

{
}
Expand

Fundamentos web 2007: día 1

30596-29058.jpg

Trataré de actualizar este post con la información más relevante de las jornadas. También podéis seguir el evento a través de los exhaustivos seguimientos a los que nos tiene acostumbrados Daniel (me da que le tengo a un par de asientos).  

10:15- Acaban de terminar las presentaciones y el bla bla bla institucionales. Empieza el programa. La próxima ponencia se titual "10 años de CSS ( y los que le quedan)". Let's go.

Los principios

  • Mantener el HTML independiente del dispositivo y accesible
  • Hacer más fáciles de mantener los documentos, compartiendo los criterios de estilo.
  • Más y mejor control del estilo
  • Compartir el estilo con otros formatos SGML

La recomendación del w3c sobre CSS 1 fecha del 17 de diciembre de 1996

Originalmente sólo se plantearon 2 niveles, pero:

  • Demasiadas cosas tuvieron que dejarse fuera de la especificación ( bordes redondeados, sombras, etc...)
  • Algunas cosas se incluyeron en la especificación pero no se implementaron masivamente.
  •  Otras cosas se especificaron o se implementaron de forma incorrecta. ( IE suckof, cof, cof... )

Se decidió revisar el nivel 2 de CSS, con lo que:

  • Se solucionaron algunas ambigüedades
  • Se eliminaron algunas indefiniciones
  • Se aplazaron funcionalidades hasta el nivel 3
  • Se empezó en 2002 y se ¿terminó? este mismo año, 2007

En general el esfuerzo ha sido exitoso: hay menos bugs de navegador y el uso de CSS ha crecido a un 72% (!)

Prioridades en el desarrollo de CSS 3

  • Grid-based layouts
  • Rotaciones, etc.
  • Texto en vertival
  • Impresión de libros
  • Aritmética simple
  • Fondos mejorados
  • Bordes mejorados
  • Sombras
  • Transparencias
  • Fuentes incrustadas
  • Layouts para interfaces gráficas de usuario
  • Presentaciones
  • Comportamiento de los enlaces

 10:45 - Está poniendo algunos ejemplos de layouts complejos. Recuerdo algunas cosillas que nos avanzó el año pasado Dave Shea sobre CSS 3. Un año más tarde y seguimos aquí. No nos queda ná para conseguir eso, y que todos los navegadores lo soporten!

10:53 - La charla está acabando, llega la ronda de preguntas. Creo que haré una pausa... pensaba que la batería del portátil aguantaría un poco más, pero se hace mayor... ;-)

16:06 - Hemos terminado de comer y empieza la ponencia de Arthur Barstow, de Nokia: "Movilidad y estándares web". Los problemas de batería se suman a algunos problemas de red que hacen realmente difícil navegar o postear. Por el momento seguiré tomando notas en papel. Durante la tarde publicaré algunos resúmenes. De momento se mantiene el interés.  Buenísima la ponencia de Jeffrey Veen, de Google: "Diseñando la nueva generación de aplicaciones web". Un orador nato. :)

----

20:14 - Reflexión: tengo que cambiar de portátil. O mejor dicho: es la última vez que me llevo portátil ajeno a este tipo de eventos. MacBook ya. En fins... a falta de portátil he ido ordenando algunas ideas en papel que espero poder plasmar entre hoy ( va a ser complicado ) y mañana.  La charla de la tarde no ha estado mal, y el debate ha tenido momentos interesantes ( ¿siempre traen a uno de Microsoft para acribillarlo? ) comentando temas sobre el papel del W3C en todo esto de la web semántica, sobre la innovación, sobre cómo las definiciones evolucionan constantemente y otras yerbas. 

He colgado algunas fotos en Flickr, y podéis consultar las del resto en el grupo que hay creado bajo el nombre Fundamentos Web. Ahora voy a ir bajando que dentro de un ratín empieza la espicha. Mañana más. 

Expand

Mañana empieza Fundamentos Web

30471-28759.jpg Por fin ha llegado el dia: Mañana empiezan en Gijón las jornadas de Fundamentos Web 2007.

A los que tenéis que suerte de poder asistir, espero poder saludaros en persona y tomar juntos unas sidras a la salud de los estándares web, y a los que no, informaros que realizaremos un seguimiento de las ponencias, tanto a través del blog como de  nuestro Twitter ( http://www.twitter.com/pixelovers ).

Yo voy tirando para el aeropuerto o no llegaré a tiempo... ¡Hasta mañana! 

Expand

Interface del iPhone: Contexto VS consistencia

La inclusión del botón de acceso directo a iTunes en la portada ha servido a los chicos de Signal VS Noise para hacer una pequeña reflexión acerca de los motivos que han llevado a Apple a colocar ese botoncito ahí y no en otro lugar. Me ha parecido muy acertada, así que aprovecho para compartirla con vosotros.

30467-28758.jpg

Como ilustra la imagen, la posición siguiendo un criterio de consistencia, la natural respecto a nuestro orden de lectura-escritura, hubiera sido la izquierda. A pesar de esto, los responsables del diseño del interface del iPhone han decidido ubicar el nuevo icono a la derecha, primando la proximidad a otra opción relacionada: el botón de iPod. Ha primado el contexto frente a la consistencia.

Por otro lado resulta interesante fijarse en qué las dos opciones posiblemente más destacadas, SMS ( en primer lugar y arriba a la izquierda ) e iTunes ( en último lugar y abajo a la derecha ), son las dos que reportan algún tipo de beneficio económico directo a la compañía ( recordad que Apple recibe un porcentaje del gasto de llamadas y SMS del terminal ). ¿Intencional o casual? Genial, en cualquier caso.

Via | Signal VS Noise

{
}
Expand

Webstylemallorca, diseño web desde ses illes

Post patrocinado

Desde Zync nos llega una petición de reseña para esta empresa de servicios web ubicada en Palma de Mallorca, en las Islas Baleares, Webstylemallorca.

Webstylemallorca surge de la idea de Miquel Ramon, un joven informático independiente quien, con la ayuda de algunos amigos y colaboradores freelance, puso en marcha la empresa a finales del 2003. Básicamente ofrecen servicios relacionados con Internet y el desarrollo web, entre los que destacan:

  • Posicionamiento y optimización web
  • Diseño, programación  y alojamiento web
  • Registro de dominios
  • Auditorías LOPD y LSSICE
  • Servicio técnico a domicilio
  • y otros...

En su web, además de las habituales secciones de presentación, portafolio, servicios... desde el pasado 29 de Agosto cuentan además con un blog, en el que además de hablar de novedades relacionadas con sus proyectos, publican artículos sobre desarrollo web y optimización para buscadores.

En mi opinión Webstylemallorca es ejemplo de un caso que suele darse a menudo en empresas que se dedican al desarrollo web: en casa del herrero cuchillo de palo. A pesar de cuidar el aspecto técnico en la maquetación de sus páginas ( la mayoría validan correctamente xhtml 1.0 estricto ), la verdad es que han dejado el aspecto visual de la web en un segundo plano. Y esto creo que es un error, aún y cuando probablemente la principal fuente de nuevos clientes sea el boca a boca o los propios sites de sus clientes actuales. La primera impresión es importante, y no podemos arriesgarnos a perder un cliente porque nuestro site no alcance las expectativas de calidad o imagen que buscan nuestros clientes. En cualquier caso, si echamos un vistazo al portafolio comprobaremos que esa primera impresión no se corresponde con la realidad: la calidad del diseño de muchos de los sites de sus clientes es bastante buena, por encima de la del propio site.

En conclusión, sólo recomendaría a los responsables de Webstylemallorca cuidar un pelín más la imagen de su site, y quizás dar más relevancia a su blog corporativo ( muy buena idea ). Un blog con artículos relacionados con la actividad, y con las novedades referentes a su portafolio o clientes puede ser una muy buena manera de mantener una portada actualizada, de conseguir un gancho para que actuales o potenciales clientes se suscriban a futuras actualizaciones, y de dar una imagen de transparencia y proximidad.

Expand

Publicado el User Interface de JQuery

Pues sí, últimamente escribo poco y parece que sólo lo haga de JQuery, aunque en verdad creo que vale la pena llamar la atención sobre la última novedad de esta gente: una nueva librería, User Interface, preparada para funcionar al unísono con nuestro framework javascript favorito.

User Interface nos permitirá conseguir de forma sencilla efectos complejos como por arrastrar y soltar, listas ordenables, mensajes de aviso personalizables sin popups, elementos redimensionables... en definitiva un montón de funciones avanzadas que nos permitirán añadir más dinamismo a nuestras aplicaciones web, al estilo JQuery: de forma más rápida y con menos líneas de código.

Yo venía usando hasta ahora la extensión que habían preparado los chicos de interface.eyecon.ro, pero dado que dejaron de actualizarla desde la versión 1.1.2, y que esta nueva librería parte de los propios desarrolladores de JQuery, creo que empezaré a hacer pruebas para migrar en unas semanas.

Si tienes curiosidad por ver qué es capaz de hacer User Interface te recomiendo que le eches un vistazo al visualizador de imágenes que han preparado a modo de demo.

28182-27130.jpg

Expand

JQuery 1.2 y su nueva librería User Interface

Los chicos de JQuery no paran. Hace unos días anunciaban la última release de la versión 1.1, y ayer por la noche comentaban en su blog que ya está disponible para descarga la primera release de la nueva versión 1.2. Como siempre, la nueva versión viene con bastantes mejoras de rendimiento, varios bugfixes, y lo más importante: nuevas funcionalidades y atajos, y algunas otras que han pasado a mejor vida.

Si vas a pasarte a esta nueva versión no olvides repasar sus consejos de actualización, y leerte la nota completa del release de JQuery 1.2.

27562-26661.jpg En el mismo post anuncian también para este mismo domingo dia 16 de Septiembre el lanzamiento de su User Interface Library, que extenderá las posibilidades de la librería con un montón de nuevos eventos y funcionalidades: Drag & Drop, elementos ordenables, creación de árboles expandibles, acordeones, pestañas... y como ejemplo nos muestran una captura de lo que se podrá conseguir con ella. ¡Me muero de ganas de probarla!

27562-26662.jpg

Expand

Jquery 1.1.4: Nueva versión, y siguen mejorando

24593-23698.jpg

JQuery, uno de los mejores frameworks javascript que podéis encontrar actualmente ( el mejor, si me apuráis ), ha publicado hace unos días una actualización de la serie 1.1.x, la última antes de la versión 1.2 que posiblemente verá la luz durante el mes de septiembre.

Esta actualización va en la línea de la anterior: algunos bugfixes menores, y un trabajo centrado en optimizar el rendimiento de 3 de las partes más importantes de la librería:

  • Selectores de id - $("#id"): Se ha conseguido una mejora media del 1676%
  • Selectores de etiquetas - $("elem"): Se ha conseguido una mejora media del 295%
  • Iteración mediante .each: Se ha conseguido una mejora del 554%
Como en la versión anterior, los cálculos sobre la mejora de rendimiento de la librería se han efectuado los tests de la suite SlickSpeed.

Además de estas mejoras de rendimiento y los bugfixes, encontraréis algunas funciones nuevas y otras que han pasado a incluirse en funciones ya existentes, para simplificar la librería.

Encontraréis la información detallada de esta nueva versión en el blog de JQuery

Expand

Diseñar para la web móvil

Daniel AppelquistResumen, anotaciones y conclusiones extraídos de la ponencia de Daniel Appelquist en el marco de Fundamentos Web 2006

Daniel realizó una de las ponencias más interesantes de las Jornadas del año pasado, a mi parecer, bajo el título "Mobile completes the web: a call to action". Como su nombre indica, toda la charla giró alrededor de la necesidad de plantear un enfoque consistente de las aplicaciones web, independiente del dispositivo que se use para acceder a las mismas. Vino a llamar a ese enfoque "La web única".

16029-15206.jpgLa web ÚNICA ( The ONE web )

  • Las URI deben ser intercambiables entre dispositivos, es decir, una misma dirección web debería ser válida tanto para un ordenador de sobremesa como para un móvil, como para una PDA. Debemos ser capaces de identificar y redirigir al usuario a la versión adaptadad de los contenidos.
  • La experiencia de un usuario en un servicio puede diferir en diferentes tipos de dispositivo, pero el contenido debe ser temáticamente consistente.
  • La web única no significa la misma web con la misma experiencia, los mismos elementos de navegación, o las mismas funcionalidades en todos los dispositivos. Significa adaptar los contenidos al contexto y a los interfaces de acceso.

Consejos de diseño para la web ÚNICA

  • Usar xHTML básico
  • Usar CSS
  • Usar el atributo media de CSS
  • Usar la información del dispositivo para determinar y adaptar el contenido a sus capacidades: ¿Qué tamaño de pantalla tiene? ¿Permite el uso de cookies?
  • Realizar el testing en dispositivos reales
  • Tener muy en cuenta aspectos relacionados con la accesibilidad de nuestra aplicación.
  • ¿Entra en juego la internacionalización? Por supuesto.

Más recomendaciones en : http://ww.w3c.org/mobile

El software social es una de las áreas con más potencial en el entorno móvil.

Desafíos en el diseño de interfaces

  • Pantallas pequeñas
  • Operaciones que requieren el uso de una única mano
  • Habitualmente únicamente existe un control de 4 direcciones
  • El usuario puede no prestar el 100% de su atención a la interacción con el dispositivo

Debemos tratar a los usuarios móviles como ciudadanos de primera clase de la web. ¡Debemos diseñar para móvil!

Cómo curiosidad, apuntar que en países menos desarrollados, muchos usuarios optan antes por un móvil o un smartphone antes que un ordenador de sobremesa, por la relación entre el precio y el uso que pueden darle.

Material & Recursos

Expand

Internacionalización: Implicaciones culturales y problemas prácticos

Richard IshidaResumen, anotaciones y conclusiones extraídos de la ponencia de Richard Ishida en el marco de Fundamentos Web 2006

15854-15132.jpg Este resumen se plantea como una lista de puntos a tener en cuenta cuando nos encontremos desarrollando un site que deba estar preparado para su internacionalización. Nótese que no especifico "estar preparado para su traducción a varios idiomas", puesto que la internacionalización de un site no sólo comprende la traducción de sus textos, si no la adaptación de ciertos patrones, formatos de entrada de datos, o incluso estilos visuales o grupos de iconos.

Vamos con ello:

Implicaciones culturales y problemas prácticos frente a la internacionalización:

  • La traducción de un site a diversos idiomas presenta determinados problemas al emplear técnicas de reemplazo de variables, con lo que debemos prever los posibles contextos y situaciones.
    Ejemplos:
    • Un mismo valor puede encontrarse en diferentes lugares de una frase.
    • Una única palabra puede, entro idioma, necesitar varias formas: ON, en inglés, traducido al castellano puede significar activo/a/s, encendido/a/s, habilitado/a/s... dependiendo del contexto en qué se encuentre
  • Debemos evitar diseñar entornos que se vean limitados por el espacio: No usar gráficos de tamaño fijo, no usar contenedores con un ancho-alto prefijado...
  • El código no debe contener elementos presentacionales. En su lugar debemos usar etiquetado semántico. Hay que separar contenido y presentación. Debemos usar em en vez de i, strong en vez de b, etc... El japonés, por ejemplo, no usa negritas ni cursivas, ya que dan ciertos problemas de visualización de caracteres. Usan fondos de color.
  • Hay que tener muy en cuenta el formato de los diferentes tipos de datos: nºs de teléfono, fechas, direcciones, moneda... Prever que los usuarios pueden introducir los datos de diferentes formas dependiendo de su origen. En definitiva, los contenidos deben "adaptarse", no sólo traducirse. ( localización )
  • Hay que hacer un uso controlado de símbolos, iconos y colores, ya que pueden tener diferentes connotaciones según la cultura. Por ejemplo, un símbolo de un teléfono verde, que aquí podría carecer de significado, o podría asociarse a "iniciar llamada" o cosas similares, en Japón se usa para identificar los teléfonos públicos. Una mano abierta, que aquí podría significar "deténgase", en Grecia puede suponer un insulto.
  • Debemos tener en cuenta la dirección del texto
  • El uso de codificación Unicode nos ahorrará conflictos a la hora de usar diferentes juegos de caracteres.
  • Una mayor calidad en la preparación para la internacionalización de sites supone una mayor inversión de tiempo inicial, pero un ahorro a medio-largo plazo, aparte de que obviamente, es la manera correcta de trabajar.
Material adicional