Archivo de la categoría: Uncategorized

Internet Explorer 6 & 7 are dead

Todos/as aquellos/as que nos dedicamos al desarrollo web sufrimos una pesadilla recurrente: que nuestros sitios web no funcionen correctamente en las versiones 6 y 7 del navegador Internet Explorer.

Datos de Microsoft sobre el declive de IE6 (click en la imagen para acceder a los datos actualizados)

Datos de Microsoft sobre el declive de IE6 (click en la imagen para acceder a los datos actualizados)

Quien escribe esto, además de desarrollar sitios web, lleva muchísimos años impartiendo formación. Uno de los cursos que más veces he impartido es el de «Diseñador Web y Multimedia«, además de otros cursos específicos de HTML y CSS (últimamente HTML5 y CSS3), módulos de accesibilidad y usabilidad web y otras materias en las que la maquetación web y sus estándares han estado muy presentes. En dichos cursos, la secuencia didáctica, lógicamente, va in crescendo. El alumnado va asimilando, poco a poco, diferentes elementos de HTML, después de CSS, para acabar construyendo un layout sobre el que desarrollará el trabajo, llamémoslo así, de filigrana (especialmente en CSS y, en ocasiones, Javascript). Hasta aquí todo bien… por poco tiempo.

Infografía sobre el declive de IE7 (los datos son más o menos coincidentes con los aportados por Global Stat Counter)

Infografía sobre el declive de IE7 (los datos son más o menos coincidentes con los aportados por Global Stat Counter)

Y es que, pongamos por caso, un objetivo para uno de estos cursos puede ser la maquetación de un sitio web (estático o dinámico) con CSS, partiendo de un diseño previo (por ejemplo en un fichero PSD). Ahí es cuando surge el problema/pregunta planteado por cualquiera de los alumnos/as: «Profe, el menú no se me ve bien en Explorer 7«, «La caja de contenidos no llega hasta abajo» y un largo (interminable) etcétera de problemas que, en más de una ocasión, me han metido en un aprieto. Eso sí, de dicho aprieto siempre se acaba saliendo pero, para salir, y seguro que muchas de las personas que están leyendo este blog lo han vivido, debemos acudir a una serie de parches, reseteadores, scripts y otras «trampas» que, efectivamente, nos solucionan el problema… para fastidiarnos la validación de los estándares de la W3C 🙁

Estadísticas del uso de los navegadores

Estadísticas del uso de los navegadores de Global Stat Counter (gs.statcounter.com)

Pues bien, todo parece indicar que el uso de nuestros navegadores pesadilla, los inefables IE6 y IE7, está bajo mínimos. Tanto es así que un formador ortodoxo como el autor de estas líneas ha decidido abandonar definitivamente el desarrollo web orientado a estos navegadores. Los tiempos del contra-estándar han llegado a su fin. Larga vida a los nuevos navegadores, los nuevos dispositivos, el diseño web responsable (o adaptativo) y a frameworks como Bootstrap.

Parafraseando y mutando la vieja estrofa de los Smiths: Internet Explorer 6 & 7 are dead 🙂

 

El futuro del aprendizaje empresarial: Formación JIT

Un nuevo concepto de formación que está sonando cada vez más en foros y servicios formativos online es el de la formación JIT (Just in Time). El claro guiño del término a los procesos productivos impulsados por Toyota se basa en la innovadora naturaleza de este tipo de formación. La formación JIT provee a los alumnos de la información necesaria para poder llevar a cabo su trabajo en el momento que éstos la requieran desde sus puestos de trabajo.

JIT_Logo

Este concepto parte del tipo más efectivo de formación empresarial: la capacitación profesional que recibe un aprendiz de manos de un experto sobre tareas relacionadas a su puesto de trabajo. Pero J.I.T aporta el elemento fundamental de las nuevas tecnologías, es decir, no dependemos de la presencia del experto, simplemente podemos acceder a un repositorio bien organizado en nuestra plataforma de formación en nuestra intranet de los métodos y procesos de nuestro trabajo. Esta formación se convierte en un apoyo formativo constante a nuestro desempeño profesional.

Los beneficios de este tipo de formación son múltiples:

1 – En la formación tradicional en aula o taller, el alumno aprende una serie de técnicas que puede tardar bastante tiempo en ponerlas en marcha, con lo que es posible que con el tiempo cuando por fin necesite aplicar su aprendizaje, al alumno se le haya olvidado el proceso. Con JIT el tiempo entre el aprendizaje y la aplicación del mismo es mínimo con lo que se reduce el riesgo del olvido a cero.

2 – La formación JIT se transmite cuando se necesita y se basa en la necesidad específica del alumno en ese momento. Para eso, es esencial que la formación esté totalmente personalizada a las necesidades del puesto de trabajo. No tiene sentido realizar 1 hora de material formativo cuando en realidad sólo 15 minutos de ese material es relativo a nuestro puesto de trabajo. JIT consisten en múltiples y píldoras formativas bien organizadas y distribuidas por las posibles necesidades de un puesto de trabajo.

3 – No existe formación con mayor retorno a la inversión. Se quitan de golpe y plumazo los gastos típicos de la formación presencial: costes de impartición, desplazamiento, dietas, y el tiempo en que los participantes están fuera de sus puestos de trabajo. Aunque el coste inicial de la implementación de una plataforma JIT puede ser significante, sobre todo si se trata de una formación dirigida a un colectivo muy específico, estos costes se compensan rápidamente con la mejora de la productividad y la reducción en los tiempos de la formación continua.

Sobre el futuro de e-Learning y de la formación presencial

En el área de educación, el mercado de e-Learning es el que más está expandiendo gracias al crecimiento exponencial de usuarios de Internet (un 870% desde 2000) y el desarrollo de nuevas tecnologías que han revolucionado la manera en que adquirimos, almacenamos y compartimos el conocimiento.

Durante estos últimos 13 años, Las soluciones de eLearning se han diversificado en herramientas de aprendizaje como por ejemplo los sistemas de gestión educativa (LMS), las clases virtuales, plataformas móviles y MOOCs, entre otras.

La apuesta por estas herramientas tecnológicas formativas es cada vez más clara, pero también nos abre una serie de incógnitas sobre el futuro de la educación. Considerando las ventajas que aporta la formación por Internet, como por ejemplo su características de accesibilidad, mensurabilidad y sostenibilidad, ¿Cuál es el futuro que le espera a la formación presencial?images

El interés e implementación de eLearning en instituciones educativas y empresas está creciendo, pero mucho individuos cuestionan la efectividad pedagógica de este tipo de formación, sobre todo en ciertas materias de tipo humanista. Se también cuestiona su universalidad, puesto que la mayoría de LMS son a día de hoy poco intuitivos para personas que no estén acostumbradas a utilizar herramientas tecnológicas.

Algunos expertos apuestan por una solución intermedia: la formación “blended” que a día de hoy está aportando grandes resultados en Escuelas de Negocios y Academias.

También, gracias a la mejora en la calidad de las vídeo-conferencias en tiempo real por Internet, las clases presenciales están, cada vez más, emitiéndose mediante vídeo “streaming”, lo que permite una mayor difusión y nos permite abrir nuestra formación a un mercado mucho más amplio.

Cambios de Google para smartphones

El blog oficial para Webmasters de Google ha publicado ayer un post en el que anuncia una serie de cambios en los rankings de resultados en las búsquedas para smartphones. No hace falta ser especialmente avispado para entender que esos cambios afectarán negativamenta al ranking de aquellos sitios web que no tengan correctamente configurada su versión móvil. En definitiva, estamos ante una razón más para apostar por el diseño web responsable o adaptativo (responsive web design) en nuestros sitios web.

Google quiere responsive

Google responsive

Estas son algunas de las ideas fundamentales que aparecen en la entrada del blog de Google:

Redirecciones erróneas: Algunos sitios web tienen URLs distintas para la versión de escritorio y para la versión para móvil o tablet. En ocasiones, la URL original redirige a contenidos que no se corresponden con el contenido original, enlazando siempre a una página inicial para la versión móvil. Esto será considerado por Google como un error que interrumpe la secuencia de navegación de usuario y puede llevar a que éste abandone el sitio web. Por tanto, las redirecciones deben llevar al usuario a contenidos equivalentes para la versión móvil. Una vez más, la solución también podría pasar por un diseño web responsable

Errores específicos de la versión móvilOtro error más común de lo deseable es la aparición de errores al intentar acceder a un contenido desde la versión de escritorio a la versión móvil o viceversa. En el post se mencionan casos como los errores 404 al acceder desde una página en versión móvil a otra en versión de escritorio. Este error se subsana incluyendo una redirección al contenido en la versión correspondiente (o equivalente). 

  • En caso de no disponer de un contenido equivalente para la versión móvil, es preferible enlazar con la portada del sitio móvil. Pero, como se indica anteriormente, lo deseable es disponer de una versión equivalente para cada dispositivo.
  • Uso incorrecto del Googlebot mobile que deriva en un bucle infinito. En el post lo explican así: «Un error típico es cuando Googlebot-Mobile para smartphones se redirige incorrectamente a la página web optimizada para smartphones que, a su vez, redirige Googlebot-Mobile para smartphones de nuevo al sitio de escritorio. Esto da como resultado bucle infinito de redireccionamientos, que reconocemos como error«.
  • Otro error mil veces comentado es la incrustación de vídeos que que no se pueden reproducir en ciertos smartphones. De sobra conocido es el uso del reproductor de Flash en dispositivos iPhone o en versiones de Android 4.01 o superiores. 
  • Como es norma en los post del Google Webmaster Central, éstos vienen aderezados con una serie de enlaces que nos facilitan las cosas, como esta lista problemas habituales en los sitios para smartphones.  



 

 

Diseño web responsable

Que el diseño web está cambiando es un hecho que no tiene discusión. A los cambios en los lenguajes, en las versiones en los estándares del W3C, se suman, desde no hace tanto, la aparición de nuevos dispositivos que ya forman parte de nuestra cotidianidad. Me refiero, lógicamente, a los teléfonos móviles y a las tablets. Hoy en día no se debe(ría) concebir un diseño y un desarrollo web que no esté basado en parámetros de diseño web responsable (responsive web design). Veamos.

Diseño web adaptativo

Diseño web responsable

¿A quién no le a tocado visitar una web con su móvil para acabar dejándolo por imposible? ¿Quién no ha sufrido un horrible scroll horizontal en la web de un periódico para poder leer completo un texto, cada vez que cambiaba de línea? ¿Quién no se ha dejado la vista después de reducir el zoom de un sitio web en el móvil o tablet, precisamente para evitar desplazamientos en cada línea? El diseño web responsable busca, precisamente, que nos dejemos de hacer estas (y otras) preguntas. Se trata de implementar una solución a nuestros diseños para que nuestra web se adapte al dispositivo donde se esté visualizando. En definitiva, un sitio web profesional se debe adaptar a distintas resoluciones, orientaciones (vertical/horizontal), plataformas, navegadores, etc.

Para conseguir un diseño web responsable (o diseño adaptable), se pueden aplicar varias técnicas. Una de las más populares es el uso de un fluid grid (rejilla o retícula fluida). Existen frameworks bastante conocidos a este respecto como el Bootstrap (desarrollado por técnicos de Twitter) o el skeleton (que incluye características tipográficas, de botones o elementos de formulario) . Existe más frameworks como éstos, muchos de ellas basados en la división de nuestra pantalla en columnas que adaptarán su ubicación y tamaño dependiendo del dispositivo con que se abran.

Estas soluciones, basadas en las Media Queries  también han significado un cambio radical a la hora de desarrollar nuestros sitios web. El sistema de las media queries está basado en una estructura CSS condicional, mediante rangos de resolución. Podemos especificar las características visuales de una parte de nuestra web (por ejemplo, el menú de navegación) en base a la resolución del dispositivo del cliente. Por ejemplo, el menú de navegación de esta misma web, se transforma en un desplegable en el momento que de detecta una resolución propia de un teléfono móvil.

Como ven, las posibilidades de la tecnología responsive web design son infinitas. Además implica un ahorro económico nada desdeñable para nuestros clientes y es que, no hace tanto, se estilaba la creación de páginas distintas dependiendo la resolución utilizada por el navegador del visitante a nuestra web. Los nuevos estándares HTML5 y CSS3, sumados a las media queries abren un horizonte prácticamente ilimitado y en permanente desarrollo. Como muestra, este estupendo post publicado en Smashing Hub donde encontraremos 17 frameworks orientados al diseño responsable. ¡Que lo disfruten!

Fuente de la imagen: http://www.dotcominfoway.com

 

Unos links interesantes sobre CSS3

Hace tiempo que vengo trabajando con CSS3. Para las personas que no conozcan la materia, decir que CSS3 es el tercer nivel de les hojas de estilo en cascada, esto es, el lenguaje destinado a dotar de estilos a los documentos semánticos elaborados con HTML. O dicho otra manera, CSS  es el encargado de definir la estructura visual de los contenidos que escribimos en HTML haciendo posible la separación del contenido de la web (HTML) de su estructura (CSS). Sigue leyendo

Tipografías en la web

tipografías

tipografías

Uno de los problemas que nos encontramos los diseñadores y/o desarrolladores web es el de utilizar tipos de letra en nuestros sitios web. En un proyecto profesional, el punto de partida debería ser un diseño ad hoc, o sea, totalmente personalizado y adaptado a las necesidades del proyecto (cliente). Y es aquí donde nos encontramos con el problema de las fuentes… y sus limitaciones.

No es la primera primera vez que la selección tipográfica en un diseño me cuesta algún dolor de cabeza, incluso alguna discusión, cuando el proyecto web lo realizo con algún profesional del diseño gráfico. ¿Por qué? Pues muy fácil: para que el texto de una página web se vea tal cual está en el diseño, los visitantes deben tener instaladas dichas fuentes en su equipo. De no tenerlas, éstas serán sustituidas automáticamente por una fuente del sistema, con lo que perdemos el control sobre la apariencia de nuestra web.

Ante este problema siempre se ha optado por una solución ciertamente «castrante«. El uso de las llamadas safe fonts o fuentes seguras. Esta técnica está basada en la llamada, vía CSS, a pilas tipográficas, consistentes en referencias a fuentes instaladas en cualquier plataforma (Windows, MAC, Linux) o, en su defecto, alternativas más o menos equivalentes. A algunos de mis lectores les sonara una declaración como esta:

font-family: arial, helvetica, sans-serif;

Muy bien, pero ¿qué quiere decir esto?. Pues básicamente que queremos que esa parte o partes de la página se muestren en tipografía arial. Si el visitante no tuviera esa fuente instalada en su equipo, el texto se mostraría en helvética (en MAC, por ejemplo), para, en su defecto, mostrarse una tipografía sin serifa (de palo seco). Con esta técnica nos aseguramos de que las tipografías de nuestras páginas se vean igual (o casi) bajo cualquier plataforma, lo que no impide que tengamos un abanico de posibilidades bastante limitado. Aquí tenemos una lista de las fuentes seguras.

Sin embargo, desde hace un tiempo, existen alternativas que nos permiten ser más creativos a la hora de utilizar tipografías en nuestros sitios web. A continuación describo algunas de ellas:

  • sIFR (Scalable Inman Flash Replacement) Este sistema se basa en la incorporación de cualquier fuente que deseemos a través de un archivo de Flash, que se cargará en el servidor del sitio web. Posteriormente será Javascript el encargado de transformar esos ficheros SWF (flash) en texto ordinario que, por lo tanto, podrá ser seleccionado y localizado por motores de búsqueda como Google. ¿El problema? que el usuario no tenga el Flash instalado en su equipo y el funcionamiento en algunos dispositivos móviles… además de cierta ralentización de la página. Para más información podéis echar un vistazo a la wiki de sIFR.
  • @Font-face Estamos ante la opción más exitosa a la hora de usar tipografías más allá de las safe fonts. Hasta hace pocos años esta opción resultaba un poco aventurada debido a que no todos los navegadores daban soporte a esta opción del CSS. Pero hoy en día las estadísticas de uso de navegadores nos permiten dar un paso al frente.
  • Google web fonts

    Google web fonts

    Esta técnica, basada en el uso del CSS y en la subida de los ficheros con las tipografías a nuestro servidor, añadiendo un poco de código a nuestros ficheros. Pero lo más interesante es que podemos acceder a repositorios de fuentes web como Google Fonts, con tipografías de uso gratuito. (Ojo con utilizar la fuente que no de la gana… eso no es gratis!!)

  • Logo Typekit

    Logo Typekit

    Typekit es otra manera sencilla de implementar fuentes en nuestra web. Recientemente adquirida por Adobe, es solución de bajo coste que da acceso a una amplia gama de fuentes.

  • Además, en lugar de cargar una gran cantidad de ficheros al servidor, sólo tenemos que seleccionar las fuentes necesarias desde el sitio web de Typekit, donde están todos alojados. Un consejo: establecer fuentes de reserva en las pilas tipográficas para aquellos usuarios que tengan desactivado el javascript. Web de Typekit
  • Existen otras alternativas como Font Squirrel, pero de eso ya hablaremos otro día.