Embat | Outsourcing, Diseño, SEO, Programación web Mallorca

Labs: Un poco de node.js y socket.io (|)

Joan Ballester — Wed, 16 May 2012 07:30:18 +0000

Hace ya un tiempo, hablamos por aquí acerca de Stylus y Jade.

Pues hoy hablaremos un poco de node.js y socket.io, aunque creo que lo separaré en varios posts, porque es una explicación/investigación para empezar a entenderlos y/o manejarlos.

La idea inicial era generar una comunicación dentro de una comunidad-web que estamos programando para un cliente, pero como en todas estas historias, cuando te metes con las manos en la masa te empiezas a dar cuenta del potencial real de algunas tecnologías, que aunque “por norma” se utilicen para un determinado fin, tienen muchos más fines posibles ;-)

Y como siempre sucede, a medida que rascas y rascas, te informas y se te abren muchas puertas a diversas tecnologías, y éstas… abren puertas a muchas posibilidades, la imaginación es el límite.

Empecemos pues por explicar muy brevemente qué es Node.js y Socket.io, y a partir de ahí veremos cómo separar los posts en diferentes fragmentos de código.

Muchos explican node.js como “javascript desde el lado del servidor”, lo cual no es que sea erróneo ya que realmente es eso, javascript. Pero quizá se queda un poco corta la descripción inicial, porque leyendo esto se te ocurren más maldades que bondades… como cientos de líneas inútiles para pintar un calendario, o efectos de nieve, o punteros de cursor horteras…

Yo para completarlo y hacerlo más goloso ;-) diría que está pensado para la programación asíncrona, y que con él, puedes enriquecer webs que necesitan actualizar datos continuamente, sin tener que ir haciendo llamadas repetidamente (con ajax, whiles, sleeps…).

Si nos vamos más al lado técnico, node.js corre sobre V8 (motor Javascript de Google) y se basa en el paradigma de programación dirigida a eventos de entrada y de salida asíncronamente.

Y para definir un poco socket.io, vamos a meternos en faena, con lo que os gusta… ¡la documentación! (;D).

Primero, vamos con las bases de qué es un websocket (por la W3C, dentro de html5), que no es otra cosa que una tecnología que proporciona un canal de comunicación bidireccional sobre un único socket TCP, además, este canal de comunicación es capaz de mantener una comunicación bidireccional (full-dublex).

De todos modos, en ambas webs tenéis más información de la que podréis manejar (esto es lo que pasa con internet actualmente…), por tanto vamos un poco al grano.

Instalaciones

De momento, vamos a ir instalando lo necesario para montar un entorno de pruebas en local, y a partir de ahí ya iremos instalando a medida que necesitemos.

Primero instalad el paquete “npm” (node package manager), y a partir de él ya tendréis acceso al resto de instalaciones sin problemas:

$ aptitude install nodejs npm

Y a partir de ahí… con npm instalado ya podemos ir montando las estructuras en nuestros directorios web.

$ npm install express
...
$ npm install jade
...
$ npm install socket.io
... o siendo más vagos ;-)
$ npm install socket.io jade stylus express

Y a partir de aquí, ya tenemos todo preparado para empezar con nuestros primeros experimentos, en el próximo post montaremos una aplicación sencilla, usando Jade (con express, para que veáis la potencia), nodejs y socket.io, y después ya lo podemos ir complicando…

Declaración de guerra en toda regla #weareatwar

Joan Ballester — Tue, 08 May 2012 08:30:05 +0000

Nos gustó mucho la entrada de @david_bonilla titulada #weareatwar, y se podría resumir todo el post, en el que se incluye la declaración de guerra, con:

Programamos. Diseñamos. Trabajamos.

Que en sí misma parece insuficiente, pero que dice mucho más de lo que parece.

Se trata de una declaración de guerra mediante la cual, el objetivo principal es el de compartir datos prácticos y reales que ayuden a otros como nosotros, sobre nuestros proyectos y negocios.

Porque hay pocas formas mejores de avanzar, que mostrando los casos prácticos y compartiéndolos entre todos.

Queda claro que la mejor arma es la información, si es así, y teniendo internet, ¿por qué no explotarla al máximo?

Como primer post de esta iniciativa, ya se abrió con: los gastos de envío en el comercio electrónico en España, post en el cual se explican los mitos sobre los gastos de envío para un proyecto online, y se arroja algo de luz sobre un tema que aunque a priori no parezca importante, cualquiera que haya lanzado un proyecto que incluya envíos, sabe que de “poco importante” no tiene nada.

Nosotros pasamos a formar parte de la resistencia, ¿y tu?.

Tenemos friki nuevo en la oficina

Joan Ballester — Wed, 02 May 2012 07:30:14 +0000

Pues sí, añadimos nuevo friki a nuestras filas.

Se llama Tolo Rosselló, y pasará a llevar algunos de nuestros proyectos y a ayudarnos en otros nuevos, decidle “Hola” ;-)

Lo conocimos dando clase en la Escuela Edib, donde impartimos el módulo de maquetación (html5, CSS3, JS, Frameworks, Dispositivos móviles, etc…) y el módulo de wordpress (Construcción de Themes) dentro del curso de desarrollo web, y nos gustó, tanto por sus conocimientos (cursó Ingeniería en la UIB) como por su curiosidad y predisposición a aprender (ambas cualidades son premisas indispensables en esta profesión).

Y a partir de ahí… ya forma parte de nuestro proyecto.

Embat crece, a pesar de que en estos tiempos que corren, no es tarea fácil ;-)

Foto Flickr (Autor)

Fast HTML5: 18, Audio

Joan Ballester — Fri, 13 Apr 2012 11:00:01 +0000

Entrada de la serie: Aprender html5 rápidamente (fast-html5).

La anterior entrega, Output, en esta… hablaremos sobre el elemento .

Vamos pues como siempre a la descripción de audio en la documentación:

An audio element represents a sound or audio stream.

Content may be provided inside the audio element. User agents should not show this content to the user; it is intended for older Web browsers which do not support audio, so that legacy audio plugins can be tried, or to show text to the users of these older browsers informing them of how to access the audio contents.

Realmente este tag no tiene excesivo problema, como veis es un tag mediante el cual enlazamos un archivo de audio.


...
    
        Paquito el chocolatero
    
...

Más sobre *.oga ;-).

Entrada de la serie: Aprender html5 rápidamente (fast-html5).

Fast HTML5: 17, Output

Joan Ballester — Tue, 07 Feb 2012 10:30:18 +0000

Entrada de la serie: Aprender html5 rápidamente (fast-html5).

La anterior entrega, Vídeo, en esta… hablaremos sobre el elemento .

Hace algunos posts, hablamos de tags específicos para formularios, pues bien, este es otro de ellos (y aún quedan algunos por salir), si podéis pegad un ojo a los anteriores posts con elementos de formularios, como fueron:

Vamos pues como siempre a la descripción de output en la documentación:

The output element represents the result of a calculation.

Esta es sencilla, ¿verdad?

No deja lugar a mucho que hablar, aunque como es algo nuevo tenemos que hacerlo, obviamente ;-)

En el “for” (del input ;-)) colocaremos una lista de ID’s de los elementos que serán calculados, y onforminput es un nuevo atributo, y cuidado porque en algunos casos está deprecated.

Vamos a por una suma sencilla para que veáis cómo funciona (fijaos en el type number):

Cuando pongamos valores a valor1 y valor2, en resultado se visionará la suma (evidentemente, si el navegador reconoce todos los elementos y atributos, recordad la página Can I Use).

Seguiremos con más elementos de formulario para montar uno grande incluyendo todos los nuevos tags y atributos ;-) Pero para abrir boca aquí tenéis algunos ejemplos avanzados utilizando output.

Entrada de la serie: Aprender html5 rápidamente (fast-html5).

Solocomedía, Alberto Casado, Ángel Martín y Rober Bodegas

Joan Ballester — Thu, 02 Feb 2012 11:25:18 +0000

Nuevo proyecto estrenado el 28 de diciembre, Solo Comedia, es un proyecto de Alberto Casado, Ángel Martín y Rober Bodegas en el que trabajamos hace unos meses.

La idea, al menos a priori, es sencilla: Divertir a la gente, y de eso ellos saben un rato… Otro gallo cantaría si nos dieran el micro a nosotros ;-)

En un mes han tenido 500.000 visitas, nada mal, ¿verdad?, y en los siguientes meses iremos sacando una serie de novedades y mejoras que pueden ser interesantes. Es divertido trabajar con ellos.

El proyecto está montado sobre un WordPress, con un sistema de publicidad extra, cacheado con wp-cache (de Ricardo Galli), y ahora tenemos entre manos algo de comunidad, tienda, etc… También vamos a probar de servir los vídeos sin plataformas de terceros (ahora están en Vimeo), alojando todo el material, pero aún estamos en fase de pruebas de rendimiento con la gente de JoopBox, poco a poco ;-)

Bueno, les deseamos suerte a los 3 campeones, que en esta época, y habiendo salido de la televisión… han apostado por Internet.

Fast HTML5: 16, Video

Joan Ballester — Mon, 30 Jan 2012 14:00:06 +0000

Entrada de la serie: Aprender html5 rápidamente (fast-html5).

La anterior entrega, datalist, en esta… hablaremos algo más sobre html5, y hoy toca: .

Como sabéis, internet, además de crecer exponencialmente en contenido de vídeos, ha tenido un “representante” hasta la fecha… Sí, supongo que todos sabéis que Flash era (y en muchos casos aún sigue siendo) la mayor forma de reproducción de vídeos en internet.

Y digo “era”, porque html5 ha llegado para quitarle ese lugar a Flash.

Desde que html5 está presente en los navegadores modernos (y lo que le queda aún…) Flash ha perdido enteros en la lucha por reproductores de vídeo (y formatos de vídeo, evidentemente), ya que con html5 (si el navegador es moderno) no necesitas instalar nada más para poder visionar correctamente los vídeos, y con flash, debíais instalar su plugin de visionado.

Desde este blog, hace ya muchísimo tiempo (artículo posiblemente desfasado) se ha luchado en algunas ocasiones contra flash, ya que defendemos a ultranza todo lo libre y abierto, y flash, como sabéis… tiene poco de libre ;-) y ha sido gracias al tema del vídeo (y dispositivos móviles) que definitivamente ha recibido los golpes necesarios como para, como mínimo, knockeralo…

La descripción de video en la documentación:

A video element is used for playing videos or movies, and audio files with captions.

Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.

Bueno, vamos a ello.

Como dice, es un elemento html5 para reproducir vídeos, y audios con capturas, con una serie de parámetros que el usuario no verá, pero que son útiles para los navegadores, tanto para el visionado como metadatos para búsquedas, etc…

Ejemplo completo (pertenece a esta página, pegadle un ojo también ;-)), y comentamos:

Parece complicado, ¿verdad?

Únicamente, lo que estamos haciendo es asegurándonos que en todos los navegadores actuales haya una solución de “lectura” (visionado, en este caso) que esté nativamente implantada en ellos, es decir, que no tengan que instalar nada para poder verlo correctamente… y en el caso de que el navegador sea antiguo o no pueda reproducirlo, se le da la opción del visionado con flash (si no lo tiene tampoco, entonces sí tendrá que instalarlo, como hasta ahora…).

Como veis, hay algunos detalles interesantes, como “autoplay” y “controls”, que son bastante evidentes, también hay otros interesantes, que no están puestos como “autobuffer”.

El atributo “poster”, muestra una imagen al empezar, hasta que no se le da al “play” (como veis también está dentro de , como tag ).

En la página “Video For Everybody” Test Page, os informa muy bien sobre los diferentes navegadores y versiones, y sobre los formatos, os recomiendo que os paséis por ella, e investiguéis bien el código fuente y sus instrucciones, porque es verdaderamente útil.

Entrada de la serie: Aprender html5 rápidamente (fast-html5).

stop SOPA

Joan Ballester — Wed, 18 Jan 2012 23:00:18 +0000

Labs: HTML5 Uploader

Joan Ballester — Fri, 06 Jan 2012 13:43:54 +0000

Script utilizando javascript: FormData(), FileReader() y acumulando los archivos para subir en un array desde el navegador. Además, un pequeño script php para subir el archivo al servidor.

Ver ejemplo online

HTML

var formdata = new FormData();
document.getElementById("imgs").addEventListener("change", function (evt) {
    $("#ajax").html("Subiendo");
    var i = 0, len = this.files.length, img, reader, file;
    for ( ; i < len; i++ ) {
        file = this.files[i];
        if (!!file.type.match(/image.*/)) {
            if ( window.FileReader ) {
                reader = new FileReader();
                reader.onloadend = function (e) {
                    $('#imagenes').append('');
                };
                reader.readAsDataURL(file);
            }
            formdata.append("imgs[]", file);
        }
    }
    $.ajax({
        url: "upload.php",
        type: "POST",
        data: formdata,
        processData: false,
        contentType: false,
        success: function (res) {
            $("#ajax").html(res);
        }
    });
}, false);

PHP

$resultados = '';
$aPermitidos = array('image/jpeg','image/png','image/gif');
if(count($_FILES["imgs"])>0){
    foreach ($_FILES["imgs"]["error"] as $key => $fail) {
        if ($error == UPLOAD_ERR_OK) {
            if(in_array($_FILES["imgs"]["type"][$key],$aPermitidos)){
                $fichero = $_FILES["imgs"]["tmp_name"][$key];
                $lugar = "uploads/".$_FILES["imgs"]["name"][$key];
                if(move_uploaded_file($fichero, $lugar)){
                    $resultados .= 'Subido: '.$fichero.'
';
                }
            } else {
                $resultados .= 'Bazinga! No me seas pillín... ';
                break;
            }
        }
    }
} else {
    $resultados .= 'Bazinga! Error inesperado...';
}
echo $resultados;

Feliz 2012, y agradecimientos

Joan Ballester — Sat, 31 Dec 2011 23:01:18 +0000

No podíamos ser menos…

Embat os desea un feliz año entrante.

Que el 2012 sea un poquito mejor que el 2011 y un poquito peor que el 2013 ;-)

¡Felicidades de todo el equipo!

Deseamos dar las gracias a:

Iván Caparrós (de Contenido SEO, porque sin él, Embat no sería lo que es, ni trabajar sería tan y tan divertido y porque es lo más similar a un hermano)
Carlos Hernández (que podamos avanzar con Hosteltur por muchos años y agradecerle su inestimable ayuda)
Ángel Martín (porque es un verdadero placer que haya confiado en nosotros para solocomedia, y ya puestos, ¡que el proyecto triunfe!)
David Hernández (aka Dabo, por ser un crack, simplemente, y porque sus podcast son lo mejor :-))
Luis Eduardo Sánchez (de Hallucina, porque a pesar de usar Apple, entiende el concepto de libertad)
Sabrina Acuña (de WUAI, porque es uno de los mejores talentos que me he cruzado en el campo del diseño)
A nuestras mujeres, Patry y Lina (porque si no comprendieran nuestra pasión por esto, no sé que pasaría…)
A gente como Antoni Aloy (de APSL, porque conozco a pocos programadores tan competentes, y es un placer charlar con él), Ricardo Galli (de Meneame, porque es un referente para mi, y es mucho más cercano de lo que puede parecer, pese a que ¡aún ni nos vimos!), Eladio (de JoopBox, por su inestimable ayuda), y porque ellos nos inspiran día a día
A Miquel Frontera y Benet Joan Darder (por los buenos momentos juntos, y lo que aprendemos de ellos), Enrique Castro (porque sí, porque lo merece, y porque gente como él animan a seguir luchando como él mismo lo hace), Toni Serna (por su convencimiento con el software libre, y su pasión de enseñar… y porque el curso que estamos dando en EDIB nos está encantando), a Jorge (porque nos ayuda muchísimo desde Ibiza, y allí somos “forasters”), a David Martín (aka Suki, porque nos ha tirado un cable siempre que hemos necesitado) y un larguísimo etcétera, que sería complicado contemplar en estos minutos que estoy escribiendo…

Joan y Juan Antonio.

Esperemos, simplemente… Que Embat pueda seguir siendo.