jQuery Animation Plugins

 11/06/2010

De la mano de 1stWebDesigner os traigo una recopilación de 30 plugins, todos ellos creados utilizando el framework jQuery, de temática relacionada con la animación y efectos gráficos (zoom, 3D, slideshows…). Muy recomendada para aquellos que quieran expandir sus diseños con un toque más artístico.

» Enlace: Add Motion To Website: jQuery Animation Plugins From 2010


Eliminar imágenes rotas con jQuery

 05/03/2010

En nuestros diseños, alguna que otra vez, es posible que hayamos referenciado imágenes situadas en servidores ajenos con lo que, si dicho servicio desapareciese o realizase cambios estructurales, las rutas correspondientes a nuestras imágenes se verían afectadas.

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


jQuery Grid Plugin

 01/03/2010

Después de este parón/abandono que ha sufrido este espacio debido a problemas personales, vuelvo a la carga con más plugins relacionados con el mundo de la programación en Javascript y, en especial, con jQuery.

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.


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.


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


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


Manual CSS detallado por… borrachos!

 11/06/2009

Brillante trabajo que ha realizado Darío Ferrer, en el que explica algunas de las características de las hojas de estilo utilizando ilustraciones de gente ebria.

Merece la pena pasarse por su rincón y estudiar todas las propiedades. Nada mejor que empezar el día con una sonrisa de oreja a oreja al mismo tiempo que aprendemos CSS de forma diferente.

css-position-absolute-bottom-0-bitelemental

Enlace: Borrachos y CSS


La importancia de resetear los valores de las CSS

 12/05/2009

Cuando un diseñador realiza un proyecto web lo habitual y recomendable es probar los resultados en los diferentes navegadores existentes. Pero siempre nos encontramos la sorpresa de que en algunos existen descuadres y no conseguimos el deseado cross-browser (soporte para todos los navegadores).

Esto ocurre porque cuando los navegadores muestran una página web, además de aplicar las hojas de estilo de los diseñadores, siempre se aplican dos hojas de estilo más:

  1. Hoja de estilos del navegador: siempre se aplica a todas las páginas web si el diseñador no incluye ninguna. Se utiliza para marcar el estilo inicial por defecto de todos los elementos HTML (tamaños de letra, márgenes…)
  2. Hoja de estilos del usuario: relativa a la que aplica el usuario mediante las opciones del navegador (no es muy utilizada, pero existe la posibilidad de cambiar el estilo en el que queramos ver las páginas web utilizando las preferencias del navegador).

Como el orden de preferencia de las hojas de estilo del navegador y del usuario prevalecen sobre la del diseñador, nos encontraremos con los descuadres anteriormente mencionados y nos llevará muchos quebraderos de cabeza el acoplar el estilo de una página a todos los navegadores (mediante tips o trucos).

reset-css-bitelemental

Para solucionar este problema, el diseñador Eric Meyer desarrolló un sistema de borrado o “reseteo” de los estilos que aplican por defecto los navegadores. El propio Eric recuerda que esta hoja de estilo es el punto de partida en el que cada diseñador debe readaptar su código hasta obtener los resultados esperados.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Por último y como punto clave, se recomienda separar las hojas de estilo de reset y la principal de la siguiente forma:

<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="principal.css" type="text/css" />

El póster de los programadores

 02/03/2009

Cuanta razón alberga esta imagen… y qué duro es el trabajo del programador!

eat-sleep-code

Vía: PuntoGeek


El poder de las CSS

 21/01/2009

A modo de recordatorio y para que se observe todo lo que es posible conseguir con sólo CSS. Román Cortés nos impresionó en Abril del 2008 realizando un Homer Simpson utilizando únicamente CSS. Digno de admirar.

Enlace: Homer CSS


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