Día a día quienes nos dedicamos al diseño web tenemos que repetir muchas cosas que hacemos a diario, por eso estoy haciendo una colección con algunas herramientas online que uso para facilitarme el trabajo.
Es seguro que aquí no estén todas las herramientas que hubiese querido poner, pero pienso ir actualizando este post para ir agregando nuevas herramientas.
Poco a poco estamos viendo Backbone.js por todos lados, por su capacidad de vincular eventos de diferentes elementos de la interfaz web, la facilidad que ofrece a los programadores de organizar aplicaciones grandes con Javascript siguiendo una arquitectura con modelos y Vistas y la flexibilidad para elegir cualquier sistema de templates.
Revisando en mis bookmarks he decidido hacer una lista de recursos para aprender sobre Backbone.js y algunos temas relacionados. Todo comienza con Understanding MVC And MVP (For JavaScript And Backbone Developers)
Aparte de los enlaces superiores que solo están dedicados a Backbone.js también quise poner algunos enlaces que tratan de temas relacionados muy estrechamente.
Creo que esta lista vá a ir creciendo con el tiempo y según mis bookmarks, no es que haya buscado, pero me gustaría encontrar tambien posts sobre Backbone.js en español.
Si tienes algún enlace que pueda agregar en la lista escríbelo en un comentario.
Este es un libro que descargue ayer y he estado leyendo, me parece muy bueno. Explica los principales design patterns y cuando usarlos. El libro viene junto a unos cheat sheets imprimibles y un material de referencia sobre los design patterns.
Se puede descargar desde el sitio web del autor.
Hace unos días tuve un reto con un layout en html, quería meter un div dentro de otro para posicionar unos elementos en forma de grid, lo cual es totalmente posible, no podía modificar la estructura html de ese grid, pero si podía insertar código javascript.
Lo primero que pensé fué usar el metodo clone de jquery, crear el wrapper e insertar el objeto clonado ahí.
Pero investigué un poco más y conocí el wrap que se encarga de hacer justamente lo que necesitaba.
Tienes una colección de imágenes en en el html, todas tienen su debida descripción en el atributo alt.
Primero envuelves cada una de las imágenes en un div que vas a usar como el contenedor de la imagen y el pie de foto.
Puedes verlo funcionando en este ejemplo (ver código fuente)
Una forma de mostrar un FAQ o las preguntas frecuentes sin la necesidad de muchos divs y otras cosas superfluas. (Ver código fuente)
Viendo ejemplos de jQuery ultimamente, he visto que muchos programadores usan loops con while() o for() en sus scripts. No hay nada de malo en eso, pero debemos saber que .each() también puede hacer loop sobre arrays y objetos.
Hace mucho tiempo que ya no usamos tablas para hacer un layout. Nunca debe hacerse un layout en tablas, eso implica mucho código que no significa nada, para eso debemos escribir html estructural y crear nuestros diseño con CSS. Pero, las tablas todavía tienen uso, cuando queremos mostrar data tabular en filas y columnas.
Los ejemplos donde las tablas son recomendadas incluyen calendarios, horarios, resultados de exámenes, resultados médicos, yo para este ejemplo voy a utilizar una tabla de posiciones de los equipos en la división este de la liga americana. La tabla de ejemplo.
Las tablas tienen el codigo HTML mas interesante, asi que los resultados dependerán de que nivel de complejidad sea requerido.
Estructura de las tablas
Utilizo <thead><tfoot> y <tbody> porque estos tags permiten que podamos agrupar las filas de la tabla en grupos de secciones: header, footer y body.
Aunque con la excepción del thead, no hay diferencia visual entre una tabla que tenga estos elementos y una que no los tenga, pero siempre es bueno incluirlos porque proveen valiosa información extra sobre la estructura de la tabla, que puede ser usada para mostrarla en impresión o en la pantalla.
Diseñando
A esta tabla le añadimos una clase a las filas impares, para aplicarles una imagen de fondo. Este truco se puede lograr con javascript fácilmente, evitándonos aplicarle una clase a cada fila impar.
Con jQuery, seleccionar filas impares o pares es muy directo:
$("table tbody tr:odd").addClass("impar");
con un poco de color, padding y algunos bordes tenemos una tabla asi.
Para inspiración de diseños de tablas, vale la pena visitar http://icant.co.uk/csstablegallery/, es un website al estilo Zen-Garden donde una misma tabla es rediseñada por hojas de estilos enviadas por los usuarios.
Columnas
el elemento <colwrap> y el elemento <col> permiten aplicar algunos estilos a una columna individual en una tabla. Voy a ponerle un fondo de un color mas oscuro a la columna de juegos ganados. Ejemplo final.
Javascript y AJAX nos brindan la capacidad de hacer aplicaciones web dinámicas, que no tienen que cargar una pagina completa para mostrar un fragmento de información, sino que simulan una carga inmediata, lo que significa menos carga para el servidor, menos ancho de banda e información más accesible.
Hoy en día, los diseñadores web están tan enfocados trabajando en sus aplicaciones web dinámicas que se olvidan de que la mayoría del tráfico es proveniente de los buscadores, que pasan mucho trabajo, o no pueden indexar los enlaces hechos con AJAX.
En otras palabras, muchas de tus páginas en AJAX están escondidas para los buscadores. Para completar el problema, la mayoría de los websites en AJAX tienen un solo link, el buscador tiene menos páginas que indexar.
La idea es optimizar nuestros sitios para que el javascript no haga que nuestros links no sean indexados. Aquí hay una pequeña guía para crear u optimizar un website con Javascript/AJAX que sea totalmente amigable con Google.
Diseña tu websites usando Javascript Degradable, de forma que el website sea totalmente navegable para un visitante sin Javascript y para otro con Javascript.
Cuando tengas un website navegable completamente sin Javascript, entonces puedes comenzar a incluir las partes de AJAX en algunos lugares.
Es bueno ir revisando el desarrollo del diseño en un browser de texto, como Lynx o SEO Browser
Detecta si los objetos existen, o si es un browser con capacidad de ejecutar Javascript, para que solo sirvas AJAX a quienes pueden usarlo.
Aparte de esos pasos es de suma importancia enviar un sitemap completo del website. El sitemap solo no es suficiente, todo el conjunto es necesario para que funcione perfectamente.
De esta forma es posible utilizar Javascript y AJAX en nuestros websites de forma que sean accesibles y que sean visibles para los buscadores.
En estos días ha habido mucho interés por parte de los desarrolladores web en el lanzamiento de Google Doctype. Es una enciclopedia y referencia abierta a contribuciones de todo el mundo, su enfoque principal es la documentación (Específicamente, documentar la Web Abierta [The Open Web]).
La documentación está básicamente dividida en dos partes:
Todo el contenido de Google Doctype es 100% abierto, Open Source, y se puede colaborar
jQuery es una librería que nos ayuda a simplificar la programación en javascript y AJAX. A diferencia de otras librerías de javascript, jQuery nos permite expresar un código muy complejo de la forma más sencilla y corta posible.
La metodología es simple: Encuentra cosas, y actúa sobre ellas. Encontramos los elementos con el objeto jQuery $(), que funciona básicamente como document.getElementById, excepto que no solo soporta ids sino también selectores de CSS y xPath, en vez de retornar solo un elemento, puede retornar un array de elementos.
Aquí una pequeña muestra del impacto que jQuery puede tener en tu código. Para una tarea sencilla como añadir un evento al click en los links de una región en una página, usarías javascript y métodos del DOM asi:
Con jQuery vamos directo al punto y nos ahorramos tener que hacer un loop sobre todos los elementos, no hay necesidad de usar múltiples métodos del DOM, solo con un pequeño string tenemos lo que necesitamos.
Cuando este listo … $(document).ready()
Es lo primero que hay que aprender de jQuery. Si quieres que un evento funcione en la página hay que llamarlo dentro de $(document).ready(), todo lo que este dentro de esta llamada, será ejecutado justo cuando el DOM este listo y antes de que el contenido de la página se cargue.
La ventaja de $(document).ready() es que se pueden tener tantos llamados a este método como sea necesario, aparte de que se ejecuta antes de que el contenido de la página este disponible, permitiendo que una cantidad de efectos de esconder, mostrar y otros, estén listas inmediatamente cuando el usuario ve por primera vez los elementos de la página.
Añadiendo contenido
Con jQuery tenemos acceso de forma pragmática al Dom, navegar el documento, tomar y modificar los atributos de los elementos y podemos quitar e insertar contenido.
Este fragmento aparte de mostrar la facilidad para insertar contenido al DOM, un efecto fadeIn, y aplicarle un estilo CSS al nuevo elemento, es un ejemplo de otra de las ventajas de jQuery, el encadenamiento de los llamados a los métodos.
Cada vez que se llama un método de jQuery, esta retorna el mismo objecto jQuery, lo que nos permite volverlo a utilizar sin tener que repetir el selector.
Efectos
jQuery cuenta con un grupo importante de efectos como show(“speed”), hide(“speed”), fadeIn(), fadeOut(), slideUp(), slideDown(), aparte de algunos efectos que sirven para cambiar el estado visible o invisible de un elemento dependiendo de su estado actual toggle().
Cuando son llamados sin el parametro de velocidad los metodos show() y hide(), muestran o esconden inmediatamente el elemento en cuestion. Todos el resto de este grupo de metodos llamados sin parametro de velocidad, usan la velocidad por defecto 400ms.
… Despues de jQuery …
Solo hé tratado una minúscula introducción sobre lo que es posible con jQuery. jQuery es divertido, porque siempre se aprenden nuevos trucos que resultan increíblemente naturales. jQuery simplifica tu código javascript desde la primera vez que lo usas, cada vez que aprendes algo tu código es un poco más simple.
Algunos links importantes:
Soy Wilbur Suero, Retrorock es mi website personal. Aquí escribo de diseño, desarrollo web, negocios y la vida en general.
Puedes continuar leyendo sobre mi
