Uso de sockets con Node.js

Llevo un tiempo profundizado en el mundo de Node.js y hace unos días probé a desarrollar el ejemplo clásico para practicar los socket, la realización de un chat. Si no sabéis que son los sockets, tan solo deciros que es una evolución de Ajax. La ventaja de usar sockets con Node.js frente a Ajax, es que los sockets solo se activan cunado la información ha cambiado, mientra que con Ajax debemos de comprobar cada cierto tiempo si la información ha cambiado. Me ha parecido una autentica pasada la verdad, y mi más profunda enhorabuena a Carlos Azaustre por su detallado vídeo de explicación de como implementar esta tecnología. Vídeo de uso de sockets con Node.js Apuntes personales sobre el vídeo […]

Redimensionar las columnas de una tabla

Hoy día ver una tabla estática y simple en una web resulta un poco soso (ya nos hemos acostumbrado a nuevas y mejoradas tecnologías), así que si queremos darle un poco de vidilla a nuestras tablas de forma que podamos redimensionar la anchura de sus columnas en Ubuntu Life nos presentan jquery.grid.columnSizing, un plugin para JQuery con el que mediante un simple clic y arrastrar nos hará esa tarea. La forma de usarlo es descargar e importar las librerias js necesarias [html]<script type="text/javascript" src="jquery-1.1.3.1.pack.js"></script> <script type="text/javascript" src="jquery.dimensions.pack.js"></script> <script type="text/javascript" src="jquery.cookies.pack.js"></script> <script type="text/javascript" src="jquery.iutil.pack.js"></script> <script type="text/javascript" src="jquery.idrag.js"></script> <script type="text/javascript" src="jquery.grid.columnSizing.js"></script>[/html] Y luego incluir la llamada correspondiente para tu tabla, por ejemplo: [jscript]$("table") .eq(0) .columnSizing({ viewResize : false, viewGhost : false, selectCells […]

Menú Css y Ajax

No se si os habrá pasado en alguna ocasión que intentáis poner un menú ajax pero al final lo dejáis por imposible porque suelen ser demasiado poco flexibles. Os quiero enseñar uno que me ha gustado mucho por su sencillez a la hora de ser usado. Este menú de stunicholls lo podéis ver en su web. Lo mejor de todo es que ha sido testado para IE5.5, IE6, IE7, Firefox, Opera, Netscape, Mozilla, Safari (PC) y Safari (iPod Touch). El código Javascript: [jscript] /* Credits: Stu Nicholls */ /* URL: http://www.stunicholls.com/menu/pro_dropdown_2/stuHover.js */ stuHover = function() { var cssRule; var newSelector; for (var i = 0; i < document.styleSheets.length; i++) for (var x = 0; x < document.styleSheets[i].rules.length ; x++) { […]

Código Konami en Javascript

El Código Konami (Konami Code) es un truco que la gente de Konami integraba en muchos de sus juegos y que generalmente ofrecía acceso a una sección secreta. ??? ??? ??? ??? ??? ??? ??? ??? B A Muchas son las aplicaciones web que integran este código, implementar este código en cualquier página web mediante Javascript es algo tan sencillo como esto: [code lang=”javascript”]<head> <script type="text/javascript"> var $ = { enabled: false, tmp: Array(), _konamiCode: Array(65,66,39,37,39,37,40,40,38,38), init: function() { this.tmp = Array(65,66,39,37,39,37,40,40,38,38); }, konamiCode: function(e) { if(!this.enabled) { var t = this.tmp.pop(); if((e.keyCode-t) == 0) { if(this.tmp.length == 0) { this.enabled = true; } } else { this.init(); } } else { this.action(); } }, // Cambiamos por nuestra funcionalidad. […]

Generar documentos PDFs con Javascript

A través de Ubuntu Live descubro jsPDF, una librería muy simple (no se pueden elaborar documentos PDFs muy complejos) pero con la ventaja de poder crear un PDF directamente desde el lado cliente con javascript, lo cual para ciertas ocasiones, es mas que suficiente. Un ejemplo de creación de PDF (extraído de los ejemplos de la librería) seria el siguiente: [js] var doc = new jsPDF(); doc.setFontSize(22); doc.text(20, 20, ‘This is a title’); doc.setFontSize(16); doc.text(20, 30, ‘This is some normal sized text underneath.’); // Output as Data URI doc.output(‘datauri’); [/js] Os recomiendo que veáis el funcionamiento en los ejemplos, especialmente el último, donde se interactúa con el cliente. Enlace al proyecto y descarga.

Traductor en 52 idiomas para tu web

Si estás meditando sobre la idea de incluir un traductor a tu web deberías sopesar la posibilidad de usar TranslateThis, un botón sencillo que nos permitirá traducir nuestra página hasta en 52 idiomas diferentes: <div id=”translate-this”> <a href=”http://translateth.is/”>Translate</a> </div> <script type=”text/javascript” src=”http://www.google.com/jsapi”> </script> <script type=”text/javascript” src=”http://x.translateth.is/translate-this.js”> </script> <script type=”text/javascript”> TranslateThis(); </script> Usa la API de Google Translator, así que como es un traductor bastante potente (teniendo en cuenta lo difícil que es la traducción automática de textos) creo que es una buena solución. ¡Facilísimo de implementar y usar! ¿Conocéis alguna otra alternativa? Fuente

Generar HTML desde Javascript

He trabajado mucho con Javascript y sin duda alguna una de las cosas más laboriosas y repetitivas es la creación de elementos DOM. Pues bien, el otro día encontré una bonita forma de generar HTML desde Javascript. Una pena no haberla conocido antes. Se trata de Jaml, una implementación que nos permite generar fácilmente estos elementos DOM usando una estructura muy clara y nos permite generar un código realmente limpio. // Javascript div( h1({cls: ‘titulo’}”Some title”), p(“Some exciting paragraph text”), br(), ul( li(“First item”), li(“Second item”), li(“Third item”) ) ); // HTML generado <div> <h1 class=”titulo”>Some title</h1> <p>Some exciting paragraph text</p> <br /> <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> </div> Además, disponemos de una serie de métodos que […]

6 Caruseles y efectos de transición en Javascript

El otro día navegando por la Red descubrí una serie de galerías y caruseles bastantes curioso, aquí os dejo una recopilación de la Web Cats Who Code. En su web ponen 10 pero los últimos no me gustan mucho como funcionan. SpaceGallery Transición muy buena y ligera en JQuery. Es la típica que se puede ver en muchas tiendas virtuales. Noobslide Galería de imágenes basada en Mootools Accessible News Slider He tenido la oportunidad de usarlo y la verdad es que estoy muy contento con el acabado, simple y rápido de desplegar. SmoothGallery Otra galería más con efecto humo entre imágenes. jQuery Multimedia Portfolio Galería que permite tener video .flv, archivos de audio, imágenes,… JCarousel También he tenido la oportunidad […]

Controla el teclado con Javascript

En OpenJS publican un interesante script para facilitarnos una forma de controlar el teclado desde Javascript. Debido a la facilidad con la que ha sido desarrollado permite realizar combinaciones de teclas de una forma fácil y sobretodo fácil de comprender al mirar el código. shortcut.add(“Ctrl+Shift+X”,function() { alert(“Hi there!”); }); Instalación Al igual que cualquier script de Javascript la instalación comienza por la inclusión del fichero JS que contiene la lógica del script. <script src=”shortcut.js” type=”text/javascript”></script> Una vez incluido a nuestro proyecto, ya podemos indicar nuestras combinaciones de teclas. shortcut.add() Añadir una combinación de teclas es sencillo como podemos ver en el siguiente código: shortcut.add(“Ctrl+B”,function() { alert(“The bookmarks of your browser will show up after this alert…”); },{ ‘type’:’keydown’, ‘propagate’:true, ‘target’:document […]

CoverFlow en Javascript Open Source

Directamente desde la página de Andrés Nieto: Si estás buscando un script para hacer CoverFlow a tus imágenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox 3.5 + y Safari 4.0) ya que usa canvas para conseguir el efecto. Por suerte, están trabajando en la compatibilidad con los más antiguos. Descargar Demo