por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery, Mootools
cambiar font-size con javascript
En diseño web cada vez encontramos más diseños en los que se combinan distintos tamaños de fuente. Esta práctica tan utilizada en diseño impreso, ahora y quizás debido a los blogs, se ve reflejada en muchos de los mejores diseños que vemos por la red.
Echando un vistazo a CSSTricks he encontrado un interesantísimo artículo en el que nos cuentan como cambiar el tamaño de la fuente de un párrafo en función de la cantidad de letras que contiene.
Chri Coyier, el autor de esta idea, nos cuenta cómo hacerlo usando javascript y nos deja dos ejemplos, uno usando Mootools y el otro usando jQuery.
A continuación os dejo los dos ejemplos, y os recomiendo que echéis un vistazo al post, porque de los comentarios también podréis aprovechar más de una idea que simplifica el código.
(más…)
por Omar Benyakhlef | Ajax
PageSlide con JQuery
¿Habéis visto el efecto que produce el iPhone cuando pasamos de una página a otra?, la pantalla se desplaza horizontalmente dejando ver el siguiente contenido. Este plugin permite a cualquier desarrollador crear una interacción similar en su propio sitio web utilizando unas simples líneas de Javascript.
Adjuntando el método a una etiqueta de ancla, pageSlide envuelve el contenido original en una capa y crea un nuevo bloque para el contenido secundario. Al hacer clic en el evento se invocamos la animación.
Una de las ventajas que tiene es que no perdemos de vista la ventana principal, por lo que en cualquier momento el usuario puede volver a su contenido original con solo hacer clic sobre él.
Este plugin lo encontré en los grupos para desarrolladores de google. La verdad es que es una mina, muy recomendable !!!
Más información sobre PageSlide
por Omar Benyakhlef | Ajax, Diseño de páginas web
Ajax para formularios
Poco más tengo que decir de las virtudes del Ajax, quien quiera saber más que vea los post relacionados con Ajax.
En este caso traigo código muy útil para webs con buscadores. Se trata de códigos para hacer más usable los formularios a los usuarios o por ejejmplo, para ordenar los resultados de una búsqueda por columnas (precio, nombre,…)
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web
Diapositivas con jQuery
A veces necesitamos hacer presentaciones de fotografías de modo automático, tipo diapositivas. Hasta ahora la única solución era meter las imágenes en flash y hacer transiciones entre ellas.
JQuery tiene un plugin llamado CrossSlide capaz de hacer varios tipos de animación cambiando solo un par de parámetros. Las transiciones son bastante fluidas, pero dado que dependen del navegador y de la plataforma que usemos para cambiar el posicionamiento y ver bien estas transiciones, varían los resultados dependiendo de la combinación que tengamos (firefox con windows, Mac o Linux, Explorer, Safari,…).
Toda la explicación de cómo usar este plugin y de cómo usar cada una de las posibilidades de transición las tenéis en Gruppo4.com
por Omar Benyakhlef | Ajax, Diseño de páginas web, Usabilidad
Ajax IM, un messenger en tu web
Otra muestra de lo que podemos llegar a hacer con Ajax es este motor de mensajería instantánea, comparable con el mismísimo messennger, yahoo o talk. Pero a diferencia de los demás este puede estar empotrado en tu web, y los demás son aplicaciones de escritorio. El paquete se llama Ajax IM, y es una magnífica solución para foros privados, redes sociales, y cualquier lugar que se os ocurra en el que poder aumentar la interacción entre usuarios o con los usuarios.
Por supuesto que no necesita refrescar la página para trabajar, y es un programa vivo, ya que en la misma página podréis ir consultando y descargando las nuevas versiones. Y para que veáis el nivel de detalle de la programación, mirad lo que sucede cuando metéis un usuario y contraseña falsos.
Os dejo dos enlaces, uno para descargaros y ver las explicaciones de Ajax IM y otro para ver una demo del Ajax IM (usar test como usuario y password)
por Omar Benyakhlef | Ajax, Diseño de páginas web, Usabilidad
Menús gratis en JQuery, Ajax, CSS,...
Con el desarrollo de tecnologías como las CSS, JQuery, Ajax, Mootools,… el abanico de posibilidades para diseñar menús ha aumentado hasta llegar a conseguir verdaderas maravillas. Hoy en día podemos diseñar menús en los que habrá que hacer uso del botón derecho del ratón para comprobar si se trata de flash. Movimientos fluidos, cambios de opacidad, desplazamientos de textos,… mil opciones que hasta hace muy poco sólo nos lo podíamos permitir con tecnología flash.
Además de la indiscutible vistosidad que proporcionan, no nos penalizan en los resultados de búsqueda, ya que con muy poco código podemos hacer uso de menús con la misma apariencia para el navegador que si de un simple html se tratase.
Podemos hacer «trucos» con CSS realmente vistosos o llegar a verdaderas complejidades realizadas en Ajax, pero siempre consiguiendo un resultado vistoso, usable y sin perjuicios a la hora del posicionamiento.
En 1stwebdesigner.com, podéis encontrar una recopilación de más de 300 ejemplos de menús con Jquery, CSS,….
