La pila tecnológica utilizada en este caso esta basada en Node.js:
Este es el proyecto en github que implementa esta sencilla utilidad, sólamente hay que bajarlo y seguir un par de pasos para tenerlo funcionando, serviría como código base para entender cómo funciona la autenticación en node.
]]>El servidor http que implementa node.js es rápido y eficiente, pero no siempre podemos arrancarlo en el puerto 80. Puede que no tengamos un usuario con los privilegios necesarios, puede que ya tengamos otras ṕaginas en esa máquina que tienen que seguir funcionando, o puede que necesitemos características propias de un servidor web y que no vienen incorporadas en el servidor web de node.
En esos casos mejor delegar el frontal en un servidor web también rápido y eficiente como es Nginx. Pongo la receta a utilizar para servir el contenido de nuestro servicio Node (escuchando en el puerto 3000) en una ruta de nuestro servidor web:
Sección http de Nginx:
1 2 3 |
|
Seccion server de Nginx:
1 2 3 4 5 6 7 8 9 |
|
Y listo, con esto habilitamos un proxy de Nginx que redirigirá las peticiones al puerto 80 de nuestro servidor, al puerto 3000 del interfaz local (127.0.0.1), que es donde estará corriendo nuestro servicio node.js.
En una siguiente entrada veremos como conseguir que nuestro servicio node este siempre funcionando en el sistema.
]]>Veamos la demo antes que nada (mejor visitar el enlace que os propongo abajo para que os funcione el botón de fullscreen):
En esta demo podemos observar 3 novedades puestas en práctica:
Vayamos por partes, de fácil a difícil.
El monitor de frames lo podemos incorporar en cualquiera de nuestros proyectos de una manera extremadamente fácil utilizando el código del proyecto stats.js.
Tal y como comenté en el anterior post, la Fullscreen API nos permite focalizar la atención del usuario maximizando una zona de nuestra web a pantalla completa. La implementación que véis en este código funciona tanto en Chrome como en Firefox. A destacar el código CSS necesario para unificar la manera de maximizar de los dos navegadores.
Finalmente, comentar que en el código veremos en funcionamiento una de las utilidades incorporadas recientemente en los navegadores como es el control de frames mediante la función requestAnimationFrame (todavía en desarrollo en algunos navegadores), así como la manera de realizar una rotación de imagen sobre un canvas, se ilustra perfectamente en esta imagen:
El código fuente es sencillo y se explica por si mismo: script.js.
Referencias:
]]>El uso de la API es muy simple, se resume en lo siguiente: Podemos coger un bloque multimedia de la web que estamos desarrollando (un video, una imagen, un canvas) y ampliarlo a pantalla completa para enfocar la atención del usuario a esa zona de nuestra web, consiguiendo así que el visitante se concentre y visualice mejor ese elemento.
Las llamadas a la API son muy concretas. Para pasar a pantalla completa un elemento, llamamos (vía javascript) a la función RequestFullScreen desde el propio elemento. Y para volver al modo normal, llamamos a la función CancelFullScreen desde el elemento document.
1 2 3 4 5 |
|
Dispondremos también del evento fullscreenchange que se dispara cuando se detecta el paso al modo pantalla completa. Ejemplo:
1
|
|
Finalmente, tenemos una propiedad de sólo lectura que nos informa si el navegador está en modo fullscreen.
1
|
|
Para terminar, simplemente comentar que mientras se estandariza la API, cada navegador la implementa por su cuenta, y como viene siendo habitual, necesitaremos llamar a estas funciones de manera diferente según el navegador (mozRequestFullScreen, webkitCancelFullScreen, etc.).
Podéis ver mejor todo esto en la demo siguiente: http://dev.micronautas.com/demos/fullscreen/fullscreen.html
En la versión actual de Firefox (v9.0.1) tendréis que habilitar la variable full-screen-api.enabled entrando en el about:config para poder probarlo.
Enlaces de interes:
]]>En esos casos lo primero que hago es instalarme CygWin, bajando un simple instalador y siguiendo un wizard siguiente-siguiente tendremos disponibles las principales herramientas Unix (cut, grep, find, awk, sort, cat, ls, etc.), pudiendo a su vez añadir más utilidades al estilo de un instalador de paquetes gráfico (por ejemplo podremos instalar vim, git, mercurial, etc.).
Sólamente instalarlo, abrir una línea de comandos y ver un bash en funcionamiento ya reconforta.
Además, si la consola clásica de Windows no nos convence, podemos utilizar una consola más usable como es un terminal de putty adaptado a cygwin: puttycfg
Os cuento cómo lo configuro:
Esta es la receta para el archivo nginx.conf:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
1 2 3 |
|
Las dos primeras opciones establecen nuestro nombre completo y dirección de correo que utilizaremos para identificar nuestros commits al repositorio. La tercera opción nos vendrá muy bien para colorear los mensajes que nos muestra Git por la salida estándar.
Estas tres opciones configuradas desde línea de comandos se traducen en una serie de directivas almacenadas en el archivo de configuración .gitconfig:
1 2 3 4 5 6 |
|
Lo mejor para estos casos es utilizar RVM, que nos instalará un entorno ruby propio para nuestros proyectos, independizándonos así de los paquetes ya instalados en el sistema.
Enlace: http://beginrescueend.com/
Receta de instalación de Ruby 1.9.2 con RVM:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
La ventaja principal: editas un archivo de texto formateado con Markdown, regeneras las páginas, haces un rsync y tu blog se publica de una manera estática, es decir, no necesitas ni PHP, ni Mysql, ni un software abierto a posibles fallos, para algo tan simple como escribir una entrada.
A mi me sirve, principalmente porque en lepus.uji.es sólo podemos poner contenido estático, asi que…
1 2 |
|