La gente de tutorialzine ha creado un excelente post donde detallan el proceso de creación de un script que simula el disparo de una cámara de fotos y muestra su miniatura.
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.
Hace ya unos años que xml dejo su lugar como formato omnipresente en el intercambio de información asíncrona entre navegador y servidor. Json, la alternativa integrada en el corazón los interpretes javascript, se perfilo como una opción más simple y rápida.
Jquery cuenta con al menos tres métodos para simplificar más aun la lectura de este formato.
Esta función carga y parsea ficheros json
$.getJSON('/json/somedata.json', function(data) {
// do something with the data here
});
En caso de tener los datos lleven string, podemos convertirlos a json con este método:
data = $.parseJSON(string);
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
El framework javascript más laureado llega con importantes mejoras de rendimiento y nuevas funcionalidades en su reciente versión 1.4.
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.
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)";
});
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`.
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í.
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:
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.
La popularización del concepto web 2.0 trajo consigo millones de páginas que hacían uso de Feeds, ajax y diseños simples y limpios. Por motivos de seguridad las llamadas ajax están limitadas a nuestro propio dominio siendo imposible, por ejemplo, realizar la lectura de un feed rss externo a nuestro site mediante javascript.
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:
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
El desarrollo de jQuery sigue imparable, fiel a su línea de pequeñas pero continuas mejoras y optimizaciones. Anunciado en el blog oficial de jQuery por John Resig, esta versión cuenta con un par de mejoras destacables:
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:
Dividir los formularios extensos en varios pasos, agrupados por categorías, es una buena forma de no espantar a los usuarios mientras cuidamos la estética del site.
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.
Font effect es un plugin para jquery capaz de crear degradados, sombras o reflejos sobre textos html.
No requiere de imágenes ni CSS adicionales para su uso, bastara con incluir el js y lanzar las llamadas necesarias. En la web del proyecto hay un buen número de ejemplos, ideales para dar los primeros pasos, además de un sandbox en el que podéis probar y valorar este trabajadísimo plugin sin necesidad de descargarlo siquiera.
Listado completo de parametros aceptados:
Read more
TinyMCE es el editor javascript WYSIWYG (What you see is what you get, o lo que ves es lo que obtienes) más utilizado por méritos propios. Si bien se trata del editor más completo que conozco además de muy configurable, puede darse el caso de que su amplia lista de funcionalidades nos venga grande para nuestro proyecto y queramos ahorrarnos algunos kbs.
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.
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
Read more
No son pocos los framework javascript que podemos encontrar en la red, mejores o peores dependiendo de nuestros gustos y necesidades. Pero hay algo en lo que ninguno puede competir con jQuery, su comunidad, y es que la ingente cantidad de plugins existentes para este framework sorprende a cualquiera.
Hoy os dejo 6 calendarios javascript capaces de cubrir cualquier necesidad.
FullCalendar
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.
