Gracias a RibosoMatic he llegado a un script en jQuery que realiza la siguiente tarea: busca todas las imágenes de nuestro diseño y, en caso de que no exista alguna de ellas, la elimina del DOM asociado a nuestro documento.

<script language="javascript">
   $(document).ready(function() {
      $('img').error(function() {
         $(this).remove();
      });
   });
</script>

» Vía: RibosoMatic

Puede que te interese

• 01/03/2010 -- jQuery Grid Plugin
• 14/11/2009 -- Las funciones callback en jQuery
• 08/10/2009 -- Bordes redondeados sin imágenes utilizando jQuery
• 25/09/2009 -- Cheat Sheet o “chuleta” de jQuery 1.3
• 18/09/2009 -- Formulario de contacto en pop-up con jQuery
• 16/09/2009 -- Menú de navegación por pestañas con jQuery
• 15/09/2009 -- Convertir un div entero en enlace con jQuery
• 14/09/2009 -- Menú animado con descripción utilizando jQuery
• 05/05/2009 -- Primeros pasos con jQuery: manuales del framework de Javascript
• 12/09/2008 -- 30 tips o trucos para Google Chrome

Hoy es el turno de hablar del plugin en el que he estado inmerso estos últimos 8 meses: jqGrid o jQuery Grid. Pero, ¿qué es exactamente  y para qué sirve? jqGrid (desarrollado por el equipo de Trirand) es un conjunto de plugins destinados, básicamente, al tratamiento de tablas dinámicas mediante Ajax. Disponible actualmente en su versión 3.6.4, jqGrid intenta poner solución a toda una serie de operaciones que podemos realizar sobre una tabla de datos:

• Consultar datos de una fila.
• Añadir registros.
• Eliminar registros.
• Editar registros.
• Buscar registros.
• …

Una de las principales ventajas de este plugin es que puede integrarse con tecnologías tales como PHP, ASP, Servlets de Java, JSP, ColdFusion y Perl para realizar el tratamiento de la información en el lado del servidor. También contamos con una extensa documentación acerca de la utilización del grid (wiki), ejemplos de uso (demos) y un foro en el que consultar nuestras dudas. Aunque una de las partes más atractivas de este plugin es su combinación con jQuery UI: tenemos la posibilidad de formatear y personalizar nuestras tablas utilizando los themes y aspectos disponibles en la web de de jqueryui.com (que hablaremos más detenidamente otro día).

En el próximo post veremos cómo realizar nuestro primer grid utilizando los diferentes tipos de parseado que disponemos: JSON y XML. También puedes seguir mis acciones y quehaceres de este plugin a través de mi cuenta de Twitter: twitter.com/bitelemental.

» Página oficial de jqGrid.
» Documentación de jqGrid.
» Ejemplos y demostraciones.
» Foro de jqGrid.
» jQuery UI.

Puede que te interese

• 18/09/2009 -- Formulario de contacto en pop-up con jQuery
• 05/03/2010 -- Eliminar imágenes rotas con jQuery
• 14/11/2009 -- Las funciones callback en jQuery
• 08/10/2009 -- Bordes redondeados sin imágenes utilizando jQuery
• 25/09/2009 -- Cheat Sheet o “chuleta” de jQuery 1.3
• 16/09/2009 -- Menú de navegación por pestañas con jQuery
• 15/09/2009 -- Convertir un div entero en enlace con jQuery
• 14/09/2009 -- Menú animado con descripción utilizando jQuery
• 05/05/2009 -- Primeros pasos con jQuery: manuales del framework de Javascript

Si una tabla posee 10 filas, podemos coger los valores y autoincrementarlos a mano, pero ¿y si nuestra tabla tiene más de 1.000 registros? La solución la tenemos en esta pequeña sentencia:

SET @temp =0;
UPDATE nombre_tabla SET campo_autoincremental = @temp := ( @temp +1 );

Podemos tener 10 ó 10.000 registros, nuestra tabla se actualizará automáticamente siguiendo el orden correcto.  Un pequeño fragmento de código que nos soluciona un gran problema.

Puede que te interese

• 25/07/2008 -- TextSnip: envía código fuente con formato
• 09/05/2008 -- Recopilación de tutoriales

La página web que he estado diseñando me ha llevado mucho tiempo. No he tenido ni un momento para comer.

» Enlace: Comics of the Week #1

Puede que te interese

• 22/07/2008 -- Los 10 mandamientos del diseño web
• 08/05/2008 -- Enjuto Mojamuto – Ídolos
• 11/04/2008 -- Ice Age 3: trailer

» Enlace: Desktop Wallpaper Calendar: December and Christmas 2009

Puede que te interese

• 15/11/2009 -- Wallpapers del mes de Noviembre (2009)
• 05/10/2009 -- Wallpapers del mes de Octubre (2009)
• 18/09/2009 -- Wallpapers del mes de Septiembre (2009)
• 02/06/2009 -- Wallpapers del mes de Junio (2009)
• 29/05/2009 -- Colección de 20 wallpapers minimalistas
• 30/04/2009 -- Wallpapers del mes de Mayo (2009)
• 08/04/2009 -- La mejor recopilación de Graffiti Wallpapers
• 04/03/2009 -- Wallpapers del mes de Marzo (2009)
• 17/02/2009 -- Wallpapers en alta definición
• 03/02/2009 -- Wallpapers del mes de Febrero (2009)

» Enlace: Desktop Wallpaper Calendar: November 2009

Puede que te interese

• 02/12/2009 -- Wallpapers del mes de Diciembre (2009)
• 05/10/2009 -- Wallpapers del mes de Octubre (2009)
• 18/09/2009 -- Wallpapers del mes de Septiembre (2009)
• 02/06/2009 -- Wallpapers del mes de Junio (2009)
• 29/05/2009 -- Colección de 20 wallpapers minimalistas
• 30/04/2009 -- Wallpapers del mes de Mayo (2009)
• 08/04/2009 -- La mejor recopilación de Graffiti Wallpapers
• 04/03/2009 -- Wallpapers del mes de Marzo (2009)
• 17/02/2009 -- Wallpapers en alta definición
• 03/02/2009 -- Wallpapers del mes de Febrero (2009)

Según la documentación de jQuery, una función callback es  una función pasada como argumento de otra función y su ejecución se realizará después de que el elemento padre termine de realizar sus acciones correspondientes. Dicho de esta forma parece un poco confuso, pero viendo un par de ejemplos podremos apreciar el resultado.

El objetivo de nuestros ejemplos es  ocultar un bloque de texto pulsando en un botón y, después de esto, ocultar el botón sobre el que hemos pinchado.

La primera aproximación se ha realizado sin aplicar ninguna función de callback. La ejecución de los efectos se realiza de forma paralela consiguiendo un efecto totalmente distinto al que buscamos (recordemos que primero queremos ocultar el bloque de texto y, después, el botón).
»Ejemplo sin utilizar una función de callback

Si observamos el segundo ejemplo podemos comprobar la funcionalidad deseada. El bloque texto se oculta y, después de esto, es el propio botón el que desaparece.
»Ejemplo utilizando una función de callback

El código javascript asociado a este último ejemplo es el siguiente:

<script language="JavaScript">
	$(document).ready(function() {
		$("#btn").click(function(){
			$("#content").hide('slow', function(){
				$("#btn").hide('slow');
			});		
		});
	});
</script>

Espero que estas pequeñas demostraciones hayan servido para comprender con un poco más de detalle algunos de los aspectos que jQuery nos brinda.

Puede que te interese

• 08/10/2009 -- Bordes redondeados sin imágenes utilizando jQuery
• 16/09/2009 -- Menú de navegación por pestañas con jQuery
• 15/09/2009 -- Convertir un div entero en enlace con jQuery
• 14/09/2009 -- Menú animado con descripción utilizando jQuery
• 05/05/2009 -- Primeros pasos con jQuery: manuales del framework de Javascript
• 05/03/2010 -- Eliminar imágenes rotas con jQuery
• 01/03/2010 -- jQuery Grid Plugin
• 25/09/2009 -- Cheat Sheet o “chuleta” de jQuery 1.3
• 18/09/2009 -- Formulario de contacto en pop-up con jQuery

1. Empieza siempre reseteando todos los valores (reset.css).
2. Realiza sangrados en el código, separando las clases y los identificadores de sus respectivos valores.
3. Los comentarios son tu mejor amigo.
4. Una regla = una línea / Varias reglas = varias líneas.
5. Escribe código consistente: si empiezas desarrollando el código de una forma, no la cambies a mitad del documento.
6. Separa tus “hacks” y elementos condicionales.
7. Aprende a utilizar los “shorthands” o abreviaturas.
8. Crea una tabla de contenidos antes de iniciar el documento CSS (como forma de pequeño índice).
9. Utiliza nombres sencillos, tanto para las clases como para los identificadores, siempre serán más fáciles de encontrar.
10. Ordena tu código alfabéticamente.

Si estos consejos te han sido de ayuda, es hora de que leas atentamente los principios o reglas recomendadas por los mejores maestros del diseño web, puede que te resulten interesantes.

»Enlace: 10 Tips for Writing Better CSS

Puede que te interese

• 05/10/2009 -- Resaltar el foco de un formulario con CSS
• 12/05/2009 -- La importancia de resetear los valores de las CSS
• 02/10/2009 -- Integración de Wordpress a un sitio web
• 30/09/2009 -- Aptana Studio, completo entorno de desarrollo web
• 16/06/2009 -- 16 sitios de estilo “collage”
• 11/06/2009 -- Manual CSS detallado por… borrachos!
• 08/06/2009 -- Tiago Hoisel
• 29/05/2009 -- Colección de 20 wallpapers minimalistas
• 26/05/2009 -- FreeVectors.net: extensa recopilación de imágenes vectoriales
• 20/05/2009 -- LogoPond: inspiración para la creación de logotipos

» Enlace: 80 Stunning Background Patterns For Your Websites

Puede que te interese

• 26/10/2009 -- Recursos para el Webmaster (XVII): Quartz Icon Pack
• 22/09/2009 -- Recursos para el Webmaster (XVI): 70 packs de iconos tematizados
• 17/06/2009 -- Recursos para el Webmaster (XV): spray brushes para Photoshop
• 09/06/2009 -- Recursos para el Webmaster (XIII): 50 packs de iconos para tus diseños
• 28/04/2009 -- Recursos para el Webmaster (X): 42 packs de brushes de todos los estilos
• 22/04/2009 -- Recursos para el Webmaster (IX): Pack de 40+ iconos gratis
• 24/03/2009 -- Recursos para el Webmaster (VI): brushes estilo abstracto
• 27/01/2009 -- Recursos para el Webmaster (IV): 5 packs de iconos
• 19/01/2009 -- Recursos para el Webmaster (III): 50 fuentes gratis
• 14/01/2009 -- Recursos para el Webmaster (II): menús horizontales

»Descargar: Quartz Icon Pack

Puede que te interese

• 22/09/2009 -- Recursos para el Webmaster (XVI): 70 packs de iconos tematizados
• 09/06/2009 -- Recursos para el Webmaster (XIII): 50 packs de iconos para tus diseños
• 22/04/2009 -- Recursos para el Webmaster (IX): Pack de 40+ iconos gratis
• 27/01/2009 -- Recursos para el Webmaster (IV): 5 packs de iconos
• 28/10/2009 -- Recursos para el Webmaster (XVIII): +80 background patterns para tus diseños web
• 17/06/2009 -- Recursos para el Webmaster (XV): spray brushes para Photoshop
• 28/04/2009 -- Recursos para el Webmaster (X): 42 packs de brushes de todos los estilos
• 31/03/2009 -- Recursos para el Webmaster (VII): 60 packs de iconos
• 24/03/2009 -- Recursos para el Webmaster (VI): brushes estilo abstracto
• 19/01/2009 -- Recursos para el Webmaster (III): 50 fuentes gratis