Bienvenidos al blog de FactorSIM.

En varias ocasiones os hemos hablado sobre Drupal y os hemos explicado porqué es una herramienta de desarrollo web que nos parece interesante. Una de las utilidades que hemos encontrado a esta herramienta PHP Open Source CMS es la posibilidad de desarrollar entornos sociales para empresas , las llamadas Redes Sociales Corporativas.

Para los que no estén familiarizados con este concepto, una red social corporativa es la versión social de lo que hace no tanto tiempo conocíamos como una Intranet. La diferencia entre ambas es, básicamente, que antes la información se generaba y distribuía top-down y ahora es al revés, permitiendo a todos los usuarios la posibilidad de compartir, opinar, generar y recibir información.

De este modo, todas las personas de la empresa pueden tener una voz en la misma y se eliminan, de alguna manera, las barreras jerárquicas que se producen en el ámbito de la comunicación interna. Asimismo, una red social corporativa bien diseñada puede ser una potente herramienta para mejorar procesos, generar contenidos, favorecer el trabajo colaborativo, incentivar la creatividad y el trabajo en equipo, etc.

En muchas ocasiones este tipo de plataformas generan una idea preconcebida negativa: son complicadas de desarrollar y, por lo tanto, muy costosas. En Factorsim pensamos que Drupal ofrece interesantes posibilidades para evitar este problema y, de hecho, hemos desarrollado varios entornos de este tipo en los ámbitos de la distribución y la banca.

Con un desarrollo Drupal sencillo se pueden diseñar entornos sociales que permitan a sus usuarios recibir y compartir documentación, participar en foros y encuestas, integrar herramientas como Moodle, realizar el alta de usuarios, vincularlos a sus sistemas de gestión, incorporar funcionalidades de comunicación, implementar una gráfica determinada siguiendo la imagen corporativa de la empresa, etc.  Además, los gestores de estas plataformas pueden trabajar con grupos de usuarios, ver estadísticas de uso, descargar datos en formato excel, etc.  En el siguiente enlace encontraréis plugins pensados para integrar un sinfín de funcionalidades.

Si piensas que esto es complicado, y lo que buscas es un “Out of the box”, te proponemos la instalación de la fantástica Drupal Commons con el que seguro cubrirás la mayoría de necesidades de comunicación y trabajo colaborativo.

Drupal_commons

Os dejamos aquí uno de los primeros bocetos de uno de los entornos sociales para empresa que hemos diseñado:

Nunca me han gustado las matemáticas. Cuando cerré el libro al acabar 2º de BUP me prometí a mi misma que no volvería a pasar por aquel calvario. ¿Se puede saber porqué tenía yo que sumar lo que estaba dentro del paréntesis antes que la multiplicación que había justo delante? ¿Quién creó esa regla? ¿Y porqué?

Dicho y hecho, empecé letras puras y me fui directa a una filología (especializada en literatura). Sin duda, con las palabras siempre me he llevado mucho mejor. Con el tiempo he comprendido que es que las palabras y yo nos entendemos, pero a esto de las matemáticas nunca le vi el sentido.

Justamente por ese sentimiento de frustración tan desagradable he intentado siempre dar a mis alumnos un contexto a aquellas cosas que no acababan de entender. ¿Por qué en inglés se escribe de una forma y se pronuncia de otra? (Tranquilos, no lo voy a explicar aquí). Detrás de esta pregunta hay un motivo, un contexto, una historia que contar (igual que la había detrás de los dichosos paréntesis y que nadie me explicó), en definitiva, Storytelling.

El sábado pasado Factorsim estuvo en el EBE Barcelona, un encuentro a cerca de Internet y la red social. Personalmente, me interesó mucho la presentación de  Eva Snijders “El Storytelling no es marketing”. Siempre he tenido muy claro que es el Storytelling, pero la verdad es que nunca me había parado a pensar en una definición. A lo largo de su presentación, la conferenciante explicaba lo que para ella es y no es el Storytelling (aplicado al mundo del marketing) y la verdad es que acabó por darme esa definición que me faltaba. Os dejo en este enlace con la presentación y la conferencia en la que Snijders define el Storytelling como el arte de dar sentido.

Es muy común recurrir al Storytelling para desarrollar estrategias de comunicación en el ámbito del marketing, pero en muchas ocasiones esto se entiende de manera incorrecta. Como explicó Eva Snijders, el Storytelling no se trata de emocionar para vender, sino de dar sentido, de dialogar, de hacer visible lo invisible…

Llevado al mundo digital, esto se traduce en utilizar recursos visuales para contar historias. Cuando escogemos o descartamos un contenido, una usabilidad, un diseño, unos colores, una tipografía, un icono, etc. estamos pensando de qué manera entenderá el usuario aquello que nosotros le queremos contar. Queremos hacerle llegar un mensaje, una idea, una historia. Os dejo aquí tres ejemplos que utilizan el Storytelling de tres maneras diferentes pero, en mi opinión, todas ellas funcionan muy bien. Son las webs de Jim Carrey, Century of the Child – Growing by Design y Every last drop.

Fuente: www.jimcarrey.com

Las historias forman parte de la cultura humana y, a lo largo de la historia, han sido capaces de conectarnos, de crear comunidades al rededor de ideas. Es nuestra manera de comunicarnos y, por eso, al llevar la narrativa (textual o visual) a una web nos aseguramos de que el usuario entiende cuál es nuestro mensaje.

En Factorsim llevamos años trabajando en diversas tipologías de proyectos: desarrollo de campus de formación, de sites corporativos o de comunicación, aplicaciones para Android o para IOS (Iphone / Ipad)… pero uno de los ejes centrales de nuestro trabajo es la producción de maquetas interactivas para formación.

A lo largo del 2011 hemos dedicado gran parte de nuestros esfuerzos en reprogramar nuestra maqueta de desarrollo, añadiendo nuevos elementos de interacción, mayor control sobre el contenido, mejorando sustancialmente cargas y procesos y de paso, definir una estructura modular, fácilmente ampliable.

Para los que no conozcan nuestra maqueta, aquí les enumero algunas de las ventajas de la misma

• Utiliza tecnología xml, con lo que el cliente puede modificar si así lo necesita los contenidos del curso, de forma sencilla y sin necesidad de grandes conocimientos técnicos.
• Dispone de una gran variedad de recursos para utilizar en los contenidos:
• Listas, fijas y animadas
• Pergaminos
• Tablas dinámicas de contenidos, pestañas de visualización
• Glosarios, popups, ventanas flotantes.
• Inserción de imágenes, vídeos y animaciones.
• Actividades interactivas en html (respuesta múltiple, asociar conceptos, filling the gaps…)
• Actividades en flash.
• …
• Permite la creación de contenidos de un SCO o múltiples SCOs.
• Desarrollada para ser compatible con la mayoría de navegadores. El contenido se reproduce incluso en Iphone o Ipad.
• Como todo el contenido está en xml, es más fácil y económica la traducción a otros idiomas. Si lo deseas, la maqueta puede cambiar de idioma al instante, sin perder el seguimiento ni afectar a la navegación del alumno.
• Permite la generación de gráficas diferentes con el mismo contenido. La base xml es siempre la misma, de manera que podemos tener diferentes maquetas interactivas, con el mismo contenido, cambiando un par de carpetas del curso. Tan sencillo que parece magia.
• Es compatible SCORM y guarda tanto los valores convencionales (punto de libro, porcentaje de progreso, nota final, tiempo empleado…) como otros valores que puedes necesitar en variables (ver listado de variables SCORM 1.2). Por ejemplo, guardar la nota de cada actividad individual, o el tiempo empleado en cada nodo visitado.
• Simplificamos la generación de contenidos en versión impresa (por si deseas que tus alumnos dispongan de una versión offline del material).

Si deseas más información sobre la maqueta, puedes solicitar una demo comercial a info@factorsim.com. Te mostraremos en directo los ejemplos de lo que puedes llegar a hacer con esta tecnología.

Hoy he estado creando un sprite para el nuevo curso que estamos desarrollando. Bueno, en realidad yo he hecho un script y el script ha hecho el sprite, porque no tenía yo ganas de crear 100 imágenes a mano. Este es el resultado:

Las imágenes PNG individuales ocupan unos 950 bytes cada una. Parece poco, pero juntando las 100 salen 94.989 bytes. El sprite con las 100 imágenes dispuestas en una cuadrícula de 10×10 ocupa 14.384 bytes: un 15% del tamaño total de las imágenes individuales. Y de cara al navegador, en lugar de ser 100 peticiones es sólo una única carga (evitando latencia de cada imagen, su overhead, el hecho de que ningún navegador en su sano juicio lanzaría 100 peticiones en paralelo contra el mismo servidor, etc, etc…) .

Tal vez este sea un caso un poco extremo y habitualmente no nos encontremos con cosas tan evidentes, pero creo que esto explica por qué todos “los grandes” (google, yahoo, etc…) recomiendan el uso de sprites.

El resultado? Un linda pelotita que rueda y rueda cuando javascript le sopla…
Cómo se hace? En mi caso, con este script tan bonito:

1
2
3
4
5
6
7
8
9
10
11
12
13

#! /bin/sh
 
mkdir -p imgs
for i in `seq 1 100`; do
	sed -e s/##ENDANGLE##/`echo "scale=20; ( $i - 25 ) * 2 * 3.1415926535897932384626433832795 / 100" | bc`/g < drawing.svg > drawing_t.svg
	echo "$i..."
	"/cygdrive/c/Archivos de programa/Inkscape/inkscape.exe" -e 'C:\Documents and Settings\DaniM\Escritorio\sprites\imgs\'$i'.png' 'C:\Documents and Settings\DaniM\Escritorio\sprites\drawing_t.svg'
done
 
echo "Final sprite..."
sq=`seq 1 100`
names=`for i in $sq; do ( echo imgs/$i.png ) done`
/cygdrive/c/Archivos\ de\ programa/ImageMagick-6.4.0-Q8/montage.exe -background transparent -tile 10x10 -geometry +0+0 $names progress_sprite.png

El funcionamiento es sencillo: uso inkscape para crear un archivo vectorial SVG con el gráfico, utilizo sed para modificarle el ángulo final del arco y lo convierto a PNG invocando inkscape desde la linea de comandos. Una vez tengo las 100 imágenes, utilizo montage (parte de ImageMagick) para juntarlas en un sprite.

Como podeis ver, utilicé cygwin. Si hubiera usado un sistema operativo de verdad, no tendría que haber puesto toda esa marabunta de rutas en dos formatos diferentes.

Una opción interesante hubiera sido procesar el fichero SVG mediante xsltproc en lugar de mediante sed. Para casos más complejos seguramente sería una muy buena opción. Pero eso… lo dejo como ejercicio para el lector.

Cuando aparecieron las primeras WebApps nos reimos de ellas y nos negamos a llamar aplicación a “eso”. Pero dicen que quien rie el último rie mejor. Mediante ingenio, tecnología y nuevos estándares han superado sus limitaciones iniciales y ya hace tiempo que todos somos conscientes de que las aplicaciones web son aplicaciones de pleno derecho.

El más reciente gran paso es WebGL: un API OpenGL ES 2.0 para JavaScript. Es decir: gráficos 3D acelerados por hardware en el navegador. Estamos hablando del mismo tipo de tecnología con la que se desarrollan los juegos normales y corrientes. Y si bien JavaScript es más lento que el lenguaje C/C++ que utilizan los juegos, el hecho de que cada vez se haga más proceso en la GPU y menos en la CPU es una tendencia muy conveniente para hacer WebApps 3D competitivas.

WebGL no es un proyecto de especificación que algún dia verá la luz. Ya está aquí. Las últimas versiones de los principales navegadores ya lo implementan (lo que pone de manifiesto que Internet Explorer cada vez cumple menos su labor como navegador, ya que és la única excepción). Y las aplicaciones web que lo utilizan también están ya aquí. Por ejemplo:

Google Body Browser (http://bodybrowser.googlelabs.com/): un atlas anatómico completo en 3D.

Quake WebGL: por si teníamos alguna duda de si esto iba a servir para juegos. Hay una versión completa de Quake 2 (http://playwebgl.com/games/quake-2-webgl/) y visores de niveles de Quake 3 (http://media.tojicode.com/q3bsp/). Seguramente WebGL diera para portar juegos más modernos, si el código de estos estuviera disponible, claro.

Y otros muchos ejemplos de todo tipo: http://www.chromeexperiments.com/webgl