Lo mejor del 2009

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

• Generando passwords aleatorios en PHP
• Barra de progreso de Uploads en PHP sin Flash
• Preparando el terreno para php 5.3
• Link wrapper con PHP
• Parsear HTML con PHP
• Cambiar password de root en MySQL
• Guía de Optimización MySQL
• Mostrar el tiempo en PHP con Google Weather API
• Enviar emails desde tu wampserver local
• Open Web Analytics

Javascript / jQuery

• Editores WYSIWYG jQuery
• 6 Calendarios javascript con jquery
• Diseño interactivo javascript
• Detectar copiar, cortar y pegar con jQuery
• Easy Slider
• Generando passwords con JS
• Cuidado con parseInt en javascript
• Gráficas con javascript

Linux

• Themes xSplash para ubuntu 9.10
• Puesta a punto de Ubuntu 9.10
• Limitar el uso de CPU de un proceso en Linux
• Preload: Acelera tu Linux
• 10 comandos de consola Linux

Vídeos

Read more

Zoomimage – jQuery

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

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

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

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:

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

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

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

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

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';


Read more

Diseño interactivo javascript

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

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….

Read more

lo mejor de la semana en la red

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…)