Actualizar el valor de un elemento Auto_Increment en MySQL

 23/12/2009

El otro día me encontré frente a un problema la solución del cual era más fácil de lo que me pensaba. En este caso, mi intención era actualizar, en cadena, toda una serie de registros importados de una tabla en MySQL, siendo uno de los campos un elemento de tipo Auto_Increment (un valor entero almacenado de forma automática en orden ascendente).

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.


La dieta del diseñador web

 02/12/2009

WebDesignerDepot ha abierto una sección nueva en su espacio en la que plasma, a modo de imágenes cómicas, las vivencias y situaciones más graciosas del día a día de cualquier diseñador web. En algunas de ellas me siento verdaderamente identificado…

la-dieta-del-disenyador-web-bitelemental

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


Wallpapers del mes de Diciembre (2009)

 

Una vez más, sesión de fondos de pantalla de Smashing Magazine. Pero hay más: este mes también están disponibles wallpapers para adornar tu escritorio de forma navideña, acorde a las fechas venideras. Que los disfrutéis.

x-mas-walls-diciembre-bitelemental

» Enlace: Desktop Wallpaper Calendar: December and Christmas 2009


Wallpapers del mes de Noviembre (2009)

 15/11/2009

Como todos los meses (aunque este un poco tarde), os dejo con los calendarios en forma de fondo de pantalla para personalizar vuestros escritorios. Como siempre, todo a cargo de Smashing Magazine.

bitelemental-walls-november09
» Enlace: Desktop Wallpaper Calendar: November 2009


Las funciones callback en jQuery

 14/11/2009

Todo aquel que esté aprendiendo a utilizar este framework seguro que, en repetidas ocasiones, ha echado mano de la documentación de jQuery a través de su página web (si alguien no lo ha hecho creo que debería empezar ya). Navegando entre sus muchas opciones puede que se haya encontrado con un concepto que le suene desconocido. Estoy hablando  del  vocablo “callback”.

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.


10 consejos para elaborar mejor tus CSS

 13/11/2009

Web Design Ledger nos recomienda seguir 10 pasos prácticos a la hora de realizar nuestras hojas de estilo. Siguiendo estos consejos, nuestra capa de diseño presentará mejor aspecto y nos resultará más fácil localizar elementos:

  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


Recursos para el Webmaster (XVIII): +80 background patterns para tus diseños web

 28/10/2009

Esta vez es Noupe quien nos trae una extensa recopilación de patrones para utilizar como fondo en nuestros proyectos web. Cuando nuestra creatividad se ve mermada o cuando estemos exhaustos de tanto diseño, la utilización de backgrounds patterns es, sin duda, una solución bastante interesante.

background-patterns-bitelemental

» Enlace: 80 Stunning Background Patterns For Your Websites


Recursos para el Webmaster (XVII): Quartz Icon Pack

 26/10/2009

Bonito paquete de iconos creados por Andy Gongea y disponibles en Smashing Magazine. Su licencia es libre, tanto para uso comercial como personal.

quartz-icon-pack-bitelemental

»Descargar: Quartz Icon Pack


Bordes redondeados sin imágenes utilizando jQuery

 08/10/2009

Son muchos los efectos que podemos aportar a nuestros diseños utilizando alguna librería Javascript, como es el caso de jQuery. Uno de los más utilizados y más vistos  es el de redondear las esquinas de las cajas de texto, efecto que otorga elegancia y estilismo a nuestra página.

Si hacemos una mirada retrospectiva, para realizar el efecto comentado siempre teníamos que echar mano de imágenes:  elaborábamos el “background” deseado  y lo aplicábamos sobre la capa que necesitáramos mediante el uso de CSS. Aparte de ser una medida bastante arcaica y molesta, era la única a la que podíamos acudir si nuestro objetivo era conseguir unos bordes ovalados. Con Javascript la cosa ha cambiado bastante. Existe un plugin denominado NiftyCube que hace precisamente eso, sin la ayuda de ningún tipo de elemento adicional.

Además, tenemos la opción de configurar el grado de curvatura de nuestro borde. Y no sólo es aplicable a los elementos de tipo “div” (como muchos estarán pensando), sino que también podemos redondear los márgenes de elementos tales como  “p”, “h2″, “inputs”… Basta con descargar el archivo javascript y su hoja de estilos asociada. Una vez tengamos estos dos archivos, realizamos la siguiente llamada:

<script language="javascript">
   $(document).ready(function() {
      Nifty("div#id_elemento", "tipo_de_borde");
   });
</script>

Podéis ver todas las opciones disponibles a través de la página de NiftyCube.

bitelemental-niftycube-javascript

» Ejemplo bordes redondeados sin imágenes utilizando jQuery | Descargar NiftyCube


Resaltar el foco de un formulario con CSS

 05/10/2009

La usabilidad en los formularios de contacto web es una de las cosas que muchas veces no tenemos en cuenta y, sin embargo, es más importante de lo que creemos. Una de las directrices que debemos contemplar será la focalización de elementos, es decir, señalar de alguna forma el campo que el usuario está rellenando en ese momento.

Podemos conseguir esto de una forma muy sencilla, simplemente deberemos utilizar la pseudo-clase :focus del elemento input. Sólo son necesarias un par de líneas para aplicar este efecto y dotar a nuestro diseño de la funcionalidad deseada.

input:focus {
   border:1px solid #666;
   background:#FFFFCC;
}

bitelemental-foco-input-formulario

Nota: Se ha comprobado el funcionamiento en Firefox, Chrome y Opera. Por desgracia, Internet Explorer (7 e inferiores) no soportan esta característica.

» Ejemplo resaltar el foco de un formulario con CSS


Este blog funciona gracias a WordPress con el theme GimpStyle
© bitelemental. Todos los derechos reservados.