Bienvenidos al blog de FactorSIM.

Hace unos meses definimos un plan estratégico (el primero de la empresa desde la fusión). Uno de los puntos del plan era mejorar ciertos aspectos de la oficina, por ejemplo, pintar las paredes y añadir el logotipo. Ayer llegaron los pintores y comenzaron el trabajo y nos gusta cómo ha quedado…

Ahora ya estamos preparados para la siguiente fase: cambio de la web

En la última MoodleMoot, realizamos un taller sobre cómo Moodle no tiene porqué ser feo.

Durante el taller, presentamos entre otras técnicas, el uso de JQuery y CSS para modificar ciertos comportamientos del tema gráfico y crear una sensación de dinamismo. En concreto hicimos dos pequeños códigos:

En el header.html, añadimos la librería de JQUERY (si no está ya instalada):

<script type=”text/javascript” src=”<?php echo $CFG->themewww .’/’. current_theme() ?>/jquery-1.2.6.min.js”></script>

y posteriormente añadimos este código:

<script language=”javascript”>
$(document).ready(function() {
$(“#left-column”).click(function(){
$(“#middle-column”).fadeIn();
$(this).toggleClass(“active”); return false;
});
$(“#right-column”).click(function(){
$(“#middle-column”).fadeOut();
$(this).toggleClass(“active”); return false;
});
});
</script>

El código lo que hace es algo tan “sencillo” cómo ocultar una columna al clicar en ella. No tiene una utilidad práctica, pero permite ver la potencia de trabajar con código de programación en los temas gráficos.

El segundo código es más divertido, primero añadimos un código php en el header.html para obtener la ciudad del alumno y pintarla en la construcción del div page:

<div id=”page” <?php
echo “class=’”;
if($USER->city==”") echo “default”;
else echo $USER->city;
echo “‘”;
?>
>

Según esto, el <div id=”page”> pasaría a ser <div id=”page” class=”madrid”>, por ejemplo.

Una vez que sabemos un dato de usuario podemos hacer cambios y juegos visuales vía css, por ejemplo:

.madrid #header,
.madrid #header-home{
background-image:url(barca.jpg);
background-repeat:repeat;
height:120px;
}

Lo que hacemos con el código es pintar una imagen del Barça a todos aquellos que son del Madrid. Aparte de la pequeña broma, nos permite personalizar la apariencia dependiendo de la variable que leamos del usuario.

Quedaría más o menos así:

Con esto ya podemos ampliar un poquito más los límites de Moodle…

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