Además de estar visualmente muy logrado, se me ocurre que combinado con un script del lado del servidor puede ser una bonita forma de crear recortes de imágenes.

Ver demo
Descargar código

Jquery cuenta con al menos tres métodos para simplificar más aun la lectura de este formato.

$.getJSON()

Esta función carga y parsea ficheros json

$.getJSON('/json/somedata.json', function(data) {
    // do something with the data here
});

$.parseJSON()

En caso de tener los datos lleven string, podemos convertirlos a json con este método:

data = $.parseJSON(string);

$.ajax()

también podemos indicarle a jQuery que los datos que recibiremos en una petición ajax están formateados en json:

$.ajax({
    dataType: 'json',
    success: function(data) {
        // do something
    },
    url: '/json/somedata.json'
});

vía electrictoolbox

Lanzado el 14 de enero, coincidiendo con el cuarto aniversario del proyecto, esta versión supone la reescritura de buena parte de las funciones más populares con el objetivo de simplificar el mantenimiento del core y aumentar la velocidad de respuesta del framework.

Setters

Las funciones .attr(),.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), y .toggleClass() ya aceptan funciones como parámetro facilitando la modificación de los elementos.

// find all ampersands in A's and wrap with a span
$('a').html(function(i,html){
  return html.replace(/&/gi,'&');
});

// Add some information to the title of the anchors
$('a[target]').attr("title", function(i,title){
  return title + " (Opens in External Window)";
});

Serializar parámetros anidados

En jQuery 1.3 {foo: ["bar", "baz"]} era serializado como foo=bar&foo=baz, ahora el resultado quedaría en foo[]=bar&foo[]=baz

De todas formas, aún es posible volver a el comportamiento tradicional:

// Enables for all serialization
jQuery.ajaxSettings.traditional = true;

// Enables for a single serialization
jQuery.param( stuff, true );

// Enables for a single Ajax requeset
$.ajax({ data: stuff, traditional: true });

El método serialize() también reconoce ahora elementos html5 como `datetime` o `range`.

Contexto en llamadas ajax

Ahora puedes especificar el contexto en las llamadas ajax y este se mantiene en los callbacks

jQuery.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
        // this corresponde a document.body
        jQuery(this).addClass("done");
    }
});

Construcción rápida de elementos

jQuery("
", {
 id: "foo",
 css: {
 height: "50px",
 width: "50px",
 color: "blue",
 backgroundColor: "#ccc"
 },
 click: function() {
 $(this).css("backgroundColor", "red");
 }
}).appendTo("body");

Valores negativos en .eq(), .get()

$("div").eq(-2);
$("div").get(-2);

Nuevo método toggleClass()

Ahora es posible llamar a .toggleClass() con multiples selectores

$("div").toggleClass("current active");

Efectos

Asignar estilos independientes de animación por propiedad

$("#clickme").click(function() {
  $("div").animate({
    width: ["+=200px", "swing"],
    height: ["+=50px", "linear"],
  }, 2000, function() {
      $(this).after("
Animation complete.

");
  });
});

jQuery.proxy()

Solventa el problema del contexto entre funciones

var app = {
 config: {
 clickMessage: 'Hi!'
 },
 clickHandler: function() {
 alert(this.config.clickMessage);
 }
};

// jQuery 1.3.2
jQuery('a').bind('click', app.clickHandler);  // Esto produce un error al llamar a this dentro de jQuery

// jQuery 1.4
jQuery('a').bind(
 'click',
 jQuery.proxy(app, 'clickHandler')
);

Eventos live

A excepción de focus y blur (usar focusin y focusout) todos los eventos aceptados por .bind() tambien pueden ser eventos live

Delay

Nueva función que simplifica los setTimeout() se javascript

$("div").fadeIn().delay(4000).fadeOut();

Gráficas de rendimiento

Fuentes:
jquery14
anieto2k

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

• Conociendo Mac OS X
• Hacer un croma con adobe premiere
• xHTML – Presentación y primeros pasos
• Drag & Drop con jQuery

Otros

• Cherokee webserver
• Redes 2.0 y blogs en cifras
• VirtualBox 3.1
• Firefox 3.6 beta 4 y 3.7
• Flash Player 10.1 prerelease
• Google acelera
• Vídeo rodado con cámaras de fotos

¿Cuales han sido vuestros favoritos?

• 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

Este tipo de limitaciones se suelen solventar con un proxy del lado del servidor que realiza la lectura del feed y nos la devuelve aunque existen soluciones más sencillas como el plugin que vemos hoy. Básicamente se trata de un plugin para jquery que crea una capa de abstracción sobre la Google Feeds API permitiendo la lectura de cualquier rss bajo cualquier dominio. Además el contenido es convertido a JSON automáticamente dejándolo listo para trabajar con el cómodamente con javascript.

Su uso es muy sencillo, por ejemplo:

<script src="jquery.js">
<script src="jquery.jgfeed.js">
<script>
$.jGFeed('http://feeds.feedburner.com/jQueryHowto',
function(feeds){
  // Check for errors
  if(!feeds){
    // there was an error
    return false;
  }
  // do whatever you want with feeds here
  for (var i=0; i < feeds.entries.length; i++) {
    var entry = feeds.entries[i];
    // Entry title
    entry.title;
  }
}, 10);
</script>

El script acepta los siguientes parámetros:

• URL – Dirección del feed a cargar
• Callback - Función a ejecutar cuando la lectura haya sido completada
• Num – Número de entradas a cargar
• Key – Google API key a usar mientras se cargan los RSS

Una vez terminada la lectura y conversión a JSON, el contenido sigue la siguiente estructura:

{
  "title":"Blog Title",
  "link":"http://www.example.com",
  "author":"Author Name",
  "description":"Blog description.",
  "type":"RSS type (atom10, etc.)",
  "entries":[
    {
      "title":"Blog entry title 1",
      "link":"http://www.example.com/entry-1.html",
      "author":"Post Author Name",
      "publishedDate":"Mon, 25 May 2009 07:07:00 -0700",
      "contentSnippet":"Short blog post snippet ...",
      "content":"Longer snippet of the blog post",
      "categories":[
        "category 1",
        "category 2",
        "category 3"
      ]
    },
    {
      "title":"Blog entry title 2",
      "link":"http://www.example.com/entry-2.html",
      "author":"Post Author Name",
      "publishedDate":"Mon, 25 May 2009 07:07:00 -0700",
      "contentSnippet":"Short blog post snippet ...",
      "content":"Longer snippet of the blog post",
      "categories":[
        "category 3",
        "category 2",
        "category 1"
      ]
    },
    ...
}

Enlaces:
descargar jQuery Google feed API
Artículo original del autor del plugin

• La función live ha sido drásticamente revisada y ya acepta los eventos submit, change, mouseenter, mouseleave, focus y blur en todos los navegadores soportados.
• append, prepend, find, empty, remove, addClass, removeClass, hasClass, attr, and css han sido ampliamente optimizadas

El código ya ha sido testado en todos los navegadores compatibles y ya se considera estable, si bien quedan algunos bugs pendientes de corregir (ver lista completa de bugs).

Para terminar os dejo con una presentación en la que se hace un repaso a los últimos cambios internos de este framework javascript:

Para esta tarea nada mejor que FormToWizard, un plugin para jquery capaz de dividir los formularios y crear los botones de siguiente-anterior por nosotros. Su uso no podía ser más simple: agrupar los inputs que compartan una categoría mediante fieldsets, y una vez lo tengamos, ejecutar el script para que se encargue del resto.

En el artículo original del autor encontrareis un resumen de su funcionamiento junto a una demo online y el código listo para descargar.

Listado completo de parametros aceptados:


$(Obj).FontEffect({
outline :false, // Apply the outline effect
outlineColor1 :"", // [find contrasting] The upper left outline color
outlineColor2 :"", // [outlineColor1] the lower right outline color
outlineWeight :1, // 1=light,2=normal,3=bold
mirror :false, // Apply the mirror effect
mirrorColor :"" // [object color] The color of the reflex
mirrorOffset :-10, // The distance from text
mirrorHeight :50, // The height of the reflex (perc.)*
mirrorDetail :1, // The reflex detail 1=high,2=medium,3=low
mirrorTLength :50, // The length of the sfumature (perc.)*
mirrorTStart :0.2, // The starting opacity of the reflex (0-1)
shadow :false, // Apply the shadow effect
shadowColor :"#000",// The color of the shadow
shadowOffsetTop :5, // The top offset position (px)
shadowOffsetLeft:5, // The left offset position (px)
shadowBlur :1, // The shadow blur 1=none,2=low,3=high
shadowOpacity :0.1, // The opacity of the shadow (0=none,1=all)
gradient :false, // Apply the gradient effect
gradientColor :"", // The color of the gradient
gradientPosition:20, // The start position of the gradient (perc.)*
gradientLength :50, // The length of the gradient (perc.)*
gradientSteps :20, // the steps of the gradient
hideText :false, // Hide the source text
});


Ya que gran parte del contenido de este blog se ha centrado siempre en el framework javascript jQuery, entiendo que gran parte de vosotros hacéis uso (al menos esporádico) del mismo, de manera que os dejo un listado de editores html que hacen uso esta librería.

markItUp!

Editor multi-sintaxis (HTML, BBcode, Wiki y otros) compatible con skins, macros, gadgets, multi-instancia, scripts del lado del servidor vía ajax, etc.

Web oficial de markItUp!
Ver demo

D small rich text editor

Incluye todas las funcionalidades básicas en pocos kb. Muchas de las funcionalidades viene como plugins externos al script base (fileupload, tablas, colores, bbcode …) y viene con el back-end en PHP.

Web oficial / Demo de D small rich text editor

jWYSIWYG

Otro editor que cumple con las funcionalidades básicas en la edición HTML. No cuenta con nada del otro mundo pero su tamaño es reducido.

Web oficial de jWYSIWYG

jHtmlArea

Alternativa, muy en la linea de las anteriores, que cumple a la perfección con las necesidades básicas.

Web oficial de jHtmlArea

Hoy os dejo 6 calendarios javascript capaces de cubrir cualquier necesidad.

FullCalendar

jQuery Week Calendar

Calendar

Date Picker

Simple jQuery date picker

jQuery UI Datepicker

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.

Como se puede observar en la imagen su uso es de lo más sencillo, solo cuenta con 5 parámetros y todos son opcionales. Otro punto fuerte de el plugin es su tamaño, poco más de 2Kb. Aquí tenéis un ejemplo de la llamada con la explicación de cada uno de los parametros:

$(selector).gradientz({
   start: "red",      // Color inicial del degradado.
   end: "blue",      // Color final del degradado.
   distance: 100,  // distancia, alto del div por default
   angle: 72         // Angulo para el degradado
   css: "right: 0px" // Css adicionales
 }

He dejado de lado algunas mejoras que hubiera sido interesante mostrar, el script ya alcanzaba las 200 lineas de código y de hacerlo me hubiera sido imposible grabarlo todo en un único video. Por lo tanto he optado por dejarlo así. De todas formas se cubren los aspectos fundamentales del tema tratado. Espero que os guste.

descargar video
descargar código
Nos vemos en septiembre con nuevos cursos

En la imagen he intentado reflejar el efecto, pero no me ha quedado especialmente bien, así que nada como pasarse por la web del autor y probar la demo para entenderlo.

Opciones del plugin:

• content: Define el nuevo contenido a la que hemos aplicado el efecto. Acepta html, texto y selectores jQuery
• direction: La dirección a la que orientar el efecto. Posible valores: ‘tb’ arriba-abajo, ‘bt abajo-arriba’, ‘lr’ izquierda-derecha y ‘rl’ derecha-izquierda
• bgColor: Color de fondo al inicio de la animación
• color: Color de fondo al final de la animación
• speed: Valocidad en milisegundos
• onBefore: Función a ejecutar antes de realizar la animación
• onAnimation: Función a ejecutar durante la animación
• onEnd: Función a ejecutar una vez terminada la animación

Más info, demo y descarga en la web del autor.

Aquí tenéis un ejemplo de el código:

        $(document).ready(function() {
            $("#Text1").bind('copy', function(e) {
                alert('copying text!');
            });
            $("#Text1").bind('paste', function(e) {
                alert('pasting text!');
            });
            $("#Text1").bind('cut', function(e) {
                alert('cut text!');
            });
        });

También podéis echarle un vistazo a esta tabla que muestra la compatibilidad de los distintos browsers con distintos elementos (formularios, imágenes y demás)

Artículo original en devcurry.com

descargar código javascript
descargar vídeo

Nota: El vídeo hace uso de el codec H264. Si tienes algún problema para reproducirlo usa el vlc.
También puedes probar instalando el codec ffdshow si prefires reproducirlo con el media player.

Lista de funcionalidades:
- Slide automático
- Slide continuo
- Botones “ir al principio” e “ir al final”
- Slide vertical
- Múltiples sliders por página

Aquí tenéis algunas demos: demo horizontal, demo vertical

Más info y descarga del plugin en el post original del autor.

La técnica usada es de lo más simple, una imagen de 4000px de alto deslizándose por detrás de un png con fondo transparente. El fondo lo mueven mediante jquery acompañado del plugin backgroundposition.js de Alexander Farkas.

En el blog de la página encontramos un artículo donde comparten y explican el código javascript.

Si habéis seguido el videotutorial “efecto zoom con jquery” no tendréis ningún problema para entenderlo, hace uso de la propiedad background-position de css para crear la animación.

Si queréis podéis dejar algún comentario explicando que os ha parecido la serie de vídeos, si os gustaría que explicara alguna cosa más, profundizar más en algún tema/apartado… lo que queráis.

Tenéis la opción de descargar el vídeo (142 mb – 1440×900px) y el código.

NOTA:
En el código descargable la propiedad opacity del <div id=”cursor”> es asignada mediante javascript en lugar de css.
El código ha sido testeado y funciona correctamente bajo Mozilla Firefox 3.0/3.5 preview, Google Chrome e Internet Explorer 8.

descargar código
descargar vídeo

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

Dell prueba android en sus netbooks
Vídeo de un ingeniero de Dell mostrando un Mini 10v funcionando con la versión Cupcake de Android.

Ubuntu 9.10 alpha 1 apunta maneras
Parece que Ubuntu 9.10 va a ser una buena versión, de momento la primera alpha ya muestra mejoras importantes de rendimiento y en acceso a disco.

Gmail labs añade traducción a los correos
Ya es capaz de traducir automáticamente cualquier e-mail que nos llegue tan sólo haciendo un simple clic.

Agresiva campaña de pepephone
¡Mira que me voy! Una campaña fresca y un tanto desvergonzada que, a buen seguro, no dejará indiferente a nadie

Calendario con jQuery
Plugin que te permite generar un calendario flexible y ligero para tus aplicaciones web, muy al estilo de Google Calendar.

Explain en Mysql
Función que nos puede ayudar a la hora de optimizar nuestra tablas y consultas sql.

Tenéis el vídeo en youtube y el link para descargar el vídeo en hd (73 mb – 1440x 900 px).

descargar vídeo

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

Como siempre os dejo el vídeo en youtube y el link para descargar el vídeo original en alta resolución (133 mb – 1440x 900 px).

descargar vídeo

Nota: El video ha sido comprimido usando el codec H264. Si tienes algún problema para reproducirlo usa el vlc