Desarrollo web » javascript

Lo mejor del 2009

flmn — Mon, 28 Dec 2009 02:33:53 +0000

Apenas quedan unos días para que el 2009 llegue a su fin y parece un buen momento para echar la vista atrás y recordar algunos de los temas más destacados que hemos tratado por aquí.

PHP – MySql

Javascript / jQuery

Linux

Vídeos

Otros

¿Cuales han sido vuestros favoritos?

Zoomimage – jQuery

flmn — Sun, 27 Dec 2009 15:25:51 +0000

Zoomimage es otro plugin para jquery diseñado para crear galerías de imágenes estilo lightbox.

El script cuenta con las funcionalidades típicas en este tipo de galerías e incluye:

Preload de imagenes
Permite agrupar las imágenes en galerías
Escala las imágenes para que encajen en la pantalla del usuario
Navegación rápida con teclado

La novedad de este plugin radica en el efecto que se les aplica a las imágenes al ser ampliadas, logrando una animación muy convincente.

Zoomimage es un plugin gratuito que viene con el script jquery, las imágenes y las hojas de estilo necesarias listas para descargar y usar en nuestros proyectos.

Ver demo de zoomimage y descargar el código

Cuenta atrás javascript

flmn — Fri, 11 Dec 2009 06:53:59 +0000

Aprovechando que las vacaciones de navidad están a la vuelta de la esquina, he grabado un vídeo donde muestro cómo funciona el objeto Date de javascript y cómo crear una sencilla cuenta atrás del 25 de diciembre.

Descargar vídeo (12 min – 21mb – 1440×900)
Descargar código

Webslide – presentaciones javascript

flmn — Tue, 01 Dec 2009 04:32:32 +0000

Webslide es una aplicación javascript para la visualización de maquetas/imágenes. Permite desplazarnos de manera sencilla entre los distintos elementos mediante teclas de aceso rápido (→, ←, z, x, y n) o bien mediante un elegante menú en pantalla.

Liberada bajo una licencia Creative Commons Attribution – Noncommercial – Share Alike 3.0, este script cuenta con las siguientes funcionalidades:

No precisa de código del lado del servidor
Configurable por el usuario
Acepta themes personalizados mediante CSS
Navegación rápido mediante teclado
Zoom in/out de las imágenes
Protección por password opcional

Podéis ver la demo aquí

Cambiar el cursor con javascript

flmn — Fri, 13 Nov 2009 05:11:39 +0000

Hasta ahora siempre había usado reglas css (pointer:cursor; /* por ejemplo */) para modificar el cursor del ratón en proyectos web, modificando mediante javascript las clases de los nodos xHTML para que cogieran el puntero deseado.

Hoy descubro que también se puede hacer directamente desde javascript de manera aún más sencilla, limpia y rápida. Aquí tenéis un ejemplo válido:

document.body.style.cursor = “wait”;

Los parámetros que acepta son exactamente los mismos que en CSS: default, crosshair, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text y w-resize.

Fuente y demo online: electrictoolbox

Recopilatorio de vídeos javascript

flmn — Wed, 11 Nov 2009 01:59:28 +0000

En net.tutsplus.com han publicado un post titulado 17 Hours of JavaScript from the Masters donde se recopilan algunos videotutoriales de reconocidos gurús del lenguaje.

Más de 17 horas de material que lamentablemente esta en ingles y requiere de un nivel mínimo de la lengua de shakespeare.

Generando passwords con JS

flmn — Mon, 26 Oct 2009 17:54:08 +0000

Hace algunos días vimos cómo generar passwords aleatorios en php. Hoy descubro vía jquery-howto un script con la misma finalidad escrito en javascript:

function password(length, special) {
  var iteration = 0;
  var password = "";
  var randomNumber;
  if(special == undefined){
      var special = false;
  }
  while(iteration < length){
    randomNumber = (Math.floor((Math.random() * 100)) % 94) + 33;
    if(!special){
      if ((randomNumber >=33) && (randomNumber <=47)) { continue; }
      if ((randomNumber >=58) && (randomNumber <=64)) { continue; }
      if ((randomNumber >=91) && (randomNumber <=96)) { continue; }
      if ((randomNumber >=123) && (randomNumber <=126)) { continue; }
    }
    iteration++;
    password += String.fromCharCode(randomNumber);
  }
  return password;
}

Graficas con javascript

flmn — Mon, 26 Oct 2009 17:44:57 +0000

gRaphaël es una biblioteca javascript, basada en la biblioteca Raphaël, que permite crear gráficos de tarta, barras, líneas o puntos.

Para usarla descarga e incluye los ficheros raphael.js y g.raphael.js junto a alguno de sus complementos (g.line.js, g.bar.js, g.dot.js y g.pie.js) en el HTML de tu página y empieza a utilizarla con ejemplos como el siguiente:

// Creates canvas 640 × 480 at 10, 50
var paper = Raphael(10, 50, 640, 480);

// Creates pie chart at with center at 320, 200, radius 100
// and data: [55, 20, 13, 32, 5, 1, 2, 10]
r.g.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10]);

La biblioteca, licencia bajo una licencia MIT, es compatible con los siguientes navegadores; Firefox 3.0+, Safari 3.0+, Opera 9.5+ e Internet Explorer 6.0+

Vía webmasterlibre.com

Cuidado con parseInt en javascript

flmn — Fri, 09 Oct 2009 03:48:55 +0000

Llamar a parseInt() antes de realizar operaciones aritméticas en javascript, para convertir en numéricos los valores y evitar que una suma se convierta en un concatenación, es de lo más común:
var a = '7'; var b = '11' a + b >>>> '711'; parseInt(a) + parseInt(b) >>>> '18';

Sin duda se trata una función muy utilizada, los valores recogidos mediante DOM son devueltos como strings, y de gran importancia que a pesar de su sencillez esconde algunos secretos que pueden arrojar resultados aparentemente sin sentido bajo ciertas circunstancias:
parseInt('07') + parseInt('011') >>>> '16'; parseInt('07') + parseInt('08') >>>> '7';

A pesar de lo que pueda parecer, estos resultados no son fruto de ningún bug sino de una funcionalidad. Y es que los valores numéricos precedidos por un cero en javascript son interpretados como valores octales. Es muy importante tener esto en mente cuando vayamos a utilizar parseInt ya que puede dar lugar a equivocos:

parseInt(‘011′) es equivalente a ‘9′ en decimal
En parseInt(‘08′), ‘08′ es un valor incorrecto (el sistema octal acepta valores entre 0 y 7) y es traducido como 0

Para evitar estos quebraderos de cabeza deberemos asegurarnos de que los dígitos no van precedidos de un 0, o simplemente indicarle a parseInt que se trata de valores decimales haciendo uso de su segundo parámetro. Ejemplo:

parseInt(‘07′, 10) + parseInt(‘011′, 10) >>>> ‘18′;
parseInt(‘07′, 10) + parseInt(‘08′, 10) >>>> ‘15′;

Espero que os sea útil.

Diseño interactivo javascript

flmn — Sun, 06 Sep 2009 12:04:31 +0000

Son muchos los diseñadores web a los que les resulta difícil programar en javascript. A medida que el mercado exige contenidos más dinámicos e interactivos promovidos por el hype de la web 2.0 esto se ha convirtido en un obstáculo.

El desarrollo de este tipo de proyectos suele implicar que una vez este el html/css un programador añada el código js y , a menudo, sea revisado una vez más por el diseñador para corregir pequeños imprevistos. Si bien la solución no resulta problemática requiere de un tiempo extra que nos podemos ahorrar gracias a IxEdit.

Tal y como como se aprecia en el video, IxEdit permite la creación rápida de prototipos que hagan uso de efectos y eventos javascript/jQuery sin la necesitad de escribir una sola linea de código.

webtips 03: alternativas a sIFR en javascript

flmn — Sat, 30 May 2009 18:56:16 +0000

Tercera entrega de webtips. Hoy veremos como reemplazar dinámicamente las fuentes de nuestro proyecto web por cualquier fuente deseada al margen de que nuestros usuarios tengan dicha fuente instalada en sus ordenadores. 22 minutos de videotutorial donde veremos paso a paso el uso de esta técnica.

Esta semana como novedad también incluyo un articulo donde se resume y complementa el vídeo, el código usado listo para descargar y la ya habitual opción de bajar el vídeo original.

+ Info

El método font-family de javascript nos permite asignar una fuente a cada uno de los elementos de nuestra página web. En caso de hacer uso de una fuente que nuestros clientes o usuarios no tengan instalada en sus ordenadores o dispositivos móviles esta será reemplaza automáticamente por una disponible….

Existen multitud de técnicas para evitar este problema. La más rudimentaria es crear una imagen con la fuente deseada que haga la labor de cabecera o titular. El problema es que esta solución esta muy limitada y nos nos serviría, por ejemplo, para textos o titulares dinámicos (a menos que estemos dispuestos a cambiar de imagen cada vez que la web es actualizada).

Como programadores nuestro trabajo se basa en automatizar tareas como esta y a día de hoy contamos con multitud de formas de hacerlo. La primera opción, y más veterana, es hacerlo mediante flash. Proyectos como sIFR nos permiten el reemplazo de texto standard por textos flash haciendo uso de cualquier tipo de fuente. Con el tiempo fueron saliendo varias alternativas, algunas de ellas basadas en javascript, que son las que tratamos en el vídeo.

El reemplazo de texto por javascript se hace mediante canvas-VML y cuenta con algunas ventajas a tener en cuenta sobre los proyectos flash. La primera ventaja es la compatibilidad, javascript no necesita ningún plugin para funcionar. Por ejemplo en el caso de smartphones como puede ser el iPhone no existe ningún plugin para ejecutar o reproducir flash. Por el contrario si que cuenta con un navegador web perfectamente compatible con javascript.

Si bien es cierto que en España / Europa los usuarios que hacen uso de estos dispositivos para navegar es aun muy bajo, en países como EEUU o especialmente Japón el porcentaje de usuarios que acceden a paginas web con estos terminales es ya un porcentaje muy a tener en cuenta. Es presumible que esta tendencia se extienda a Europa durante los próximos 2-3 años, así que no está de más el ir adaptando nuestro sites para un futuro cercano/medio.

En el vídeo vemos 2 proyectos javascript que cumplen con la tarea asignada. Por un lado tenemos typeface y por otro cufon. Los pasos a seguir en ambos son muy parecidos: Descargarnos una fuente, descargarnos el js del proyecto que encontramos en sus webs, generar una fuente compatible con el proyecto (ambos tienen un generador online en sus respectivos sites) y linkarlo en nuestro proyecto para finalizar. En menos de 5 minutos podemos tenerlo todo funcionando.

Typeface es probablemente la mejor opción para diseñadores o programadores que no tengan conocimientos javascript. Es realmente sencillo de utilizar y su generador de fuentes es el que más me ha gustado de los dos. En cambio los resultados han sido más flojos que los de cufon en las pruebas realizadas.

Cufon por su parte cuenta con un generador que a los hispanohablantes nos puede resultar más problemático (no indica que caracteres incluye la fuente, vocales acentuadas por ejemplo). Los resultados, eso si, son muy satisfactorios y puede resultar más como de utilizar para aquellos que tengan unas nociones básicas de javascript. También cuenta con algunas opciones que no encontramos en typeface. A mi personalmente es el más me ha convencido.

———–

descargar demos

descargar el vídeo

Nota: El vídeo hace uso del codec H264. Si tienes algún problema para reproducirlo usa el vlc

lo mejor de la semana en la red

flmn — Tue, 05 May 2009 22:36:52 +0000

7 diferencias javascript entre firefox e internet explorer
Interesante referencia para aquellos que no hagan uso de ningún framework js

Aplicaciones de escritorio en php
Introducción a php-gtk

Crea tus propios diseños css desde 0
960 Grid System, photoshop y un poco de paciencia

Presentaciones de la ultima MySql Conference & Expo 2009
Optimizaciones, clusters, mejoras de rendimiento, etc

Mootools file manager
Curradísimo script para mootools que permite subir,ver y modificar tus ficheros vía browser

Linux llega al 1% de cuota de mercado y Mac OS roza el 10%
Informe del mes de abril de NetApplications

El Partido Pirata sueco en el Parlamento Europeo
Un sondeo revela que obtendría los votos necesarios para contar con un escaño en el Parlamento Europeo

Blogs interesantes sobre seguridad
Recopilación de los mejores blogs de dicha temática (phising, bugs…)

Lo mejor de la semana en la red

flmn — Tue, 28 Apr 2009 22:16:40 +0000

GPGPU en Snow Leopard
OpenCL será integrado en el core del próximo Mac OS X

MySQL 5.4 Preview
Se espera que llegue a finales de año o principio del año próximo

Ubuntu 9.04 release
Importantes mejoras de rendimiento para la distro más popular del panorama actual

Oracle se hace con Sun
Y hace suyos java, mysql, virtualbox etc.

Php quick profiler
El firebug de php

Geolocalización por IP mediante Javascript y JSON
geolocalización con javascript

Video: google O3D

flmn — Tue, 28 Apr 2009 01:00:08 +0000

Hay que joderse cuanto talento alberga esta empresa. Esta semana google nos volvía a sorprender con el lanzamiento de una plataforma con la que crear aplicaciones interactivas en 3D en el navegador programable mediante Javascript.

Ya es compatible con Google Chrome, Firefox, Internet Explorer y Safari (Windows, Linux y Mac OS X). Requiere, eso si, unas tarjetas gráficas específicas, como las Nvidia GeForce 8 o las ATI Radeon HD.

Link al proyecto