Archive for the ‘Diseño’ Category

Interesante menu, el cual queda genial en espacios pequeños. Se trata de un menú deslizante construido con jQuery el cual puede utilizarce como un cuadro de información, o una zona de acceso.

Si te interesa te dejo el enlace a la pagina en donde encontraras el codigo (muy sencillo por cierto) ademas de un demo para que veas como queda.

Link: Web Resources Depot | Sliding Top Menu With jQuery

• Menu estilo iPod con jQuery
• Menu tipo acordeon horizontal con JavaScript, sin Frameworks
• jQuery para diseñadores
• jQuery UI v1.5: API Mejorada, con efectos y Temas
• 30 aplicaciones Ajax/JavaScript que deberias conocer

Paul Bakaus y el Equipo de jQuery UI ha anunciado la salida de la version 1.5 de jQuery UI.

En palabras del equipo:

Cuando empezamos con el proyecto IU, nos propusimos construir un camino que fuera generico, basico, y que de forma muy sencilla permitiera añadir y ampliar la interacción básica a los elementos DOM. Sin embargo, pronto descubrimos que nuestro enfoque no estaba trabajando para la interfaz de usuario. Usando la “simpleza”, sólo hemos podido crear módulos de interacción simple, pero no logramos ofrecer una interfaz de usuario completa. El segundo problema es que algunos plugins procedían de fuentes externas por lo cual la interfaz de usuario parecia inconexa e incoherente.

Todo esto ocurrió justo después de que lanzamos la version 1.0 e inmediatamente nos dimos cuenta de que había llegado el momento de reconsiderar nuestro camino. Teníamos que encontrar un método que mantubiera la simplicidad de jQuery mientras que nos permite ofrecer una interfaz de usuario completa. Nosotros sabiamos que algo muy fácil de utilizar es muy difícil de desarrollar. La primera tarea era construir una API genérica que permitiera una máxima flexibilidad al tiempo que se mantiene asombrosamente simple. La próxima tarea es mantener esta simplicidad al momento de desarrollar plugins para esta API.

Para los que no tengan idea de que es jQuery UI, digamos que son un conjunto de widgets o pequeñas aplicaciones ya desarrolladas que como piezas de rompecabezas podemos unirlas para crear aplicaciones interactivas, ademas de que permiten ser personalizadas y obviamente estan desarrolladas utilizando JQuery.

Y pasando al temas de los efectos, siguen comentando:

En términos generales, ya tenemos más de 15 efectos listos para ser utilizados en sus proyectos, no sólo los provistos por script.aculo.us (blind,bounce,drop,fold,slide …), sino también efectos nuevos y frescos(transfer, explode. clip, scale) lo que hacen de jQuery UI una gran biblioteca para mejorar de sus aplicaciones!

Como se prometió en una de las últimas entradas del blog, viene con una documentación completa ademas de una página de prueba para que puedas verlos en acción.

El punto interesante es la aplicación que crearon llamada ThemeRoller! (imagen mostrada al inicio de este post) la cual nos permite personalizar los widgets para posterior uso. No esta por demas hecharle un ojo a una de tantas opciones que existen, revisala y cuentanos que te parecio.

A mi muy personal punto de vista siento que esto es cargarle mucho la mano al cliente, esta vien que quieran darle efectos tan “chulos” pero en ocasiones lo unico que hacen es alentar la aplicacion web, logrando con esto que se pierda el verdadero objetivo. Como sea supongo que utilizandolos con “sabiduria” tal vez puedan lucir.

Link: jQuery | jQuery UI v1.5 Released, Focus on Consistent API and Effects
Link: jQuery | ThemeRoller
Link: jQuery | Demo page
Link: Ajaxian | jQuery UI 1.5: Effects, API, and Themes
Link: javaHispano | JQueryUI 1.5: Nueva API, efectos y temas

• jQuery para diseñadores
• Menu deslizante con jQuery
• Menu estilo iPod con jQuery
• Menu tipo acordeon horizontal con JavaScript, sin Frameworks
• 30 aplicaciones Ajax/JavaScript que deberias conocer

Estas apunto de empezar algun proyecto o desarrollo web y quieres hacerlo como dios manda; entonces los siguiente consejos te seran de utilidad.

Via Sentido Web:

1. Menos es más, no uses mas código del necesario
2. No uses CSS o Javascript dentro del HTML, ya sea en las etiquetas como en el head.
3. Usa código semántico, las cabeceras mediante etiquetas h1, h2, …, resaltar mediante strong, …
4. No uses meta etiquetas redundantes
5. Usa microformatos para hacer tu sitio legible
6. Usa tablas solo para mostrar tablas
7. Usa rel=”external” para enlaces externos, no uses target=”_blank”, hazo mediante Javascript
8. No uses Javascript mediante enlaces
9. No muestres contenido importante mediante Flash o Ajax, siempre mediante HTML plano

El punto 7 debo de admitir que no me lo sabia, en lo personal uso target=”_blank” pero creo que sera interesante investigar como hacerlo con javascript; por otra parte creo que el tema de los microformatos y el codigo sematico se esta quedando un poco atrasado en este blog.
¿Que consejos agregarias?

Link: Sentido Web | Consejos para desarrollar cumpliendo estándares

• 4 Herramientas para Acelerar tu pagina que deberias conocer
• 15 herramientas para desarrollo web que deberias conocer
• ‘Hackean’ página de internet del Senado - Arriba el defacement!!!
• Nokia 5800 XpressMedia, el nuevo Nokia Tube????
• About

jQuery es una de las mejores librerias (framework) para manejar JavaScript y si eres diseñador web permiteme recomendarte un interesante articulo compuesto por una serie de tutoriales que demuestra sus bondades y que te permiten mejorar en gran medida la imagen grafica de tus sitios, desgraciadamente el articulo esta en ingles, pero no es dificil de entender.

Link: Web Designer Wall | jQuery Tutorials for Designers

• Menu deslizante con jQuery
• Menu estilo iPod con jQuery
• jQuery UI v1.5: API Mejorada, con efectos y Temas
• Menu tipo acordeon horizontal con JavaScript, sin Frameworks
• Por que usar SQLite…

Si estas en busca de ese toque “magico” que diferencie a tu blog (pagina) y simplemente la “photoshopeada” no se te da, existe una forma muy sencilla de hacerlo usando CSS.

Via Web Resources Depot, me entero de un sencillo truco publicado en Web Designer Wall, que haciendo uso de la etiqueta te permite darle un toque especial a tus fotos e imagenes.

Las ventajas de usar CSS para decorar tus imagenes son varias:

• Reduces tiempo: Ya que no tienes que crear tus diseño en el photoshop.
• Imagenes originales: No modificas la imagen original.
• Flexibilidad: Puedes cambiar el look de tus imagenes solo con modificar el CSS
• Funciona en cualquier sitio: El CSS funciona en cualquier sitio y con todas las imagenes
• Compatibilidad: Funciona en la mayoria de los navegadores (IExplorer, Firefox, Opera, safari)

Por tanto es una muy buena opcion para darle un toque de buen gusto a tus imagenes.

Link: Web Designer Wall | CSS Decorative Gallery
Link: Web Resources Depot | Decorate Your Images With CSS

• Actualizacion de imagenes satelitales en Google maps
• Patentar enlaces a imagenes - El colmo de “la pendejes”
• OpenSolaris - ¿un Ubuntu Cualquiera?
• 15 herramientas para desarrollo web que deberias conocer
• Nuevas Funciones en la API de Google Static Maps

Si estas pirado con JavaScript/Ajax y crees que a tu pagina web le hace falta ese toque 2.0 tan de moda, creo que deberias echarle un ojo a la siguiente coleccion. Los ejemplos incluyen algunos demos con jQuery, MooTools, Prototype, script.aculo.us, a que esperas para revisarlos

Link: noupe | Exceptional Ajax/javascript Techniques (Recently Created)
Link: aNieto2K | 30 scripts javascript/Ajax excepcionales

• 4 Herramientas para Acelerar tu pagina que deberias conocer
• 30 habilidades que cualquier persona de TI “deberia” tener
• 15 herramientas para desarrollo web que deberias conocer
• Footer’s (Pie’s) Geniales para tu blog, pagina o aplicacion web
• Historia de aplicaciones PHP que han cambiado al mundo