Leandono´s Blog

Silksprite: Iconos de famfamfam como plugin de Blueprint

Leandro D'Onofrio — Mon, 5 Jan 2009 00:09:18 -0300

Silksprite es un plugin para Blueprint que permite añadir la colección de iconos Silk de famfamfam a nuestros diseños. Todos los iconos estan juntados en una unica imagen y para mostrarlos el css utiliza la técnica de CSS Sprites.

Buscar dibujos a mano alzada en Google Images

Leandro D'Onofrio — Sun, 4 Jan 2009 19:28:32 -0300

En Vecindad Gráfica cuentan de un tip que ni me había percatado: Poniendo como opción de filtro Line drawings, en Google Images se pueden realizar búsquedas que únicamente muestren como resultados dibujos a mano alzada.

Blogs argentinos sobre diseño

Leandro D'Onofrio — Sun, 4 Jan 2009 19:08:36 -0300

Recopilación de frogx.three enumerando 28 blogs argentinos que tienen como temática el diseño en todas sus formas.

Migración a Joomla! 1.5: Pasos a seguir y que hay que tener en cuenta

Leandro D'Onofrio — Sun, 4 Jan 2009 00:13:59 -0300

Ante todo, Feliz año nuevo!

En la última semana puse manos a la obras, y le dediqué al blog una horas para poder migrarlo de Joomla! 1.0.x hacia Joomla! 1.5, siendo el resultado muy positivo, sin ningún tipo problema. Asi que aprovechando la experiencia, me gustaría hablar de algunos puntos a tener en cuenta si estan en una situación de migración entre ramas de Joomla!:

Lo primero que se debe evaluar es si es conveniente para nuestro caso realizar una migración. Es sabido que Joomla! 1.5 posee muchas ventajas (funcionales, de usabilidad, estéticas, de desarrollo) con respecto a la rama 1.0.x, sin embargo existen casos en que la decisión de migrar se torna difícil, por ejemplo, cuando se tiene una instancia del CMS muy customizado, con desarrollos propios o componentes modificados a gusto y sin documentación. Estos últimos casos suelen pasar empresas que ofrecen a Joomla! como producto y lo van modificando a las necesidades del cliente. Si este no es nuestro caso, podemos pasar al siguiente punto.
Verificar que existen versiones para J! 1.5 de los componentes, módulos y plugins que estamos utilizando. Esto podemos checarlo ingresando al directorio de extensiones de Joomla!, y fijarnos si la extensión posee la insignia ó . Si la extensión es nativa, podremos bajarla y evaluar su funcionamiento, lo mismo sucede si tiene soporte legado (en este caso tenemos que habilitar el plugin System - Legacy en el back-end del sitio). En caso de no encontrar la extensión que necesitamos tenemos como alternativa:
- Buscar algo similar que sí sea soportado ó
- Sentarnos un rato y ponernos a adaptar la extensión original a la rama 1.5.
En mi caso, paso un poco de todo, tuve que buscar alternativas (pasé de SEF Avance a sh404SEF y de JooMap a SEF Service Map 2), encontré extensiones soportadas para 1.5, algunas que funcionan a la perfección (Zaragoza Clouds, Tabs & Slides) y otras que no tanto (JCE), y además tuve que sentarme a adaptar algunas extensiones. Todo depende de la complejidad de nuestro sitio y de las funcionalidades que le hayamos agregado.
Diseño: Si utilizamos una plantilla paga, las empresas que las comercializan ya disponen de versiones de sus productos para J! 1.5. También podemos elegir una nueva plantilla que se adapte a nuestros gusto o en caso de usar una plantilla propia, guiarnos con el tutorial para plantillas de Joomla! 1.5 y adaptarla. La metología para la creación de templates no cambió mucho, las funciones se modificaron en sintaxis pero basicamente realizan lo mismo, por lo que no deberia llegar a ser dificil el trabajo.

Una vez evaluados todos los puntos, si decidimos que migrar es nuestra opción, podemos comenzarla con los sencillos pasos que entablan en los foros de Comunidad Joomla!:

Instalar Joomla! 1.5 de forma normal, sin los datos de ejemplos.
Descargar e instalar mtwMigrator
Exportar la base de datos de nuestro sitio en Joomla! 1.0.x
Crear una nueva base de datos e importar la base que obtuvimos en el paso anterior
Entrar al back-end de nuestro Joomla! 1.5, ir al componente mtwMigrator, configurarlo para que importe los datos de la base que creamos antes y presionar el botón para comenzar la migración. En segundos ya estará todo listo.

La migración que realiza el componente es de contenidos y menus, que es lo mas importante, pero luego nosotros tenemos que configurar los parámetros de cada sección y categoría, dar de alta los modulos basicos que queremos mostrar, instalar las extensiones que hemos seleccionado antes, trasladar el directorio de imágenes antigua a esta nueva instancia...es decir, todavia nos queda un poco de trabajo, pero lo importante es que el trabajo mas duro ya está hecho, y en mi caso solo me damandó dedicarle unas horas en la semana.

AVA7 Patterns

Leandro D'Onofrio — Mon, 1 Dec 2008 00:21:44 -0300

¿Buscando patrones para tu diseño? AVA7 Patterns posee una gran catálogo gratuito, con diseños de todo tipo y forma.

Via: Xyberneticos

jQuery Delay Plugin

Leandro D'Onofrio — Sun, 30 Nov 2008 21:37:54 -0300

Pequeño y efectivo (212 bytes), jQuery Delay Plugin es justamente un plugin para jQuery que nos permite definir un tiempo de espera antes de ejecutar una función específica:

$(document).ready(function(){ 
// 4 segundos de espera antes de ejecutar la función... 
$(this).delay(4000,function(){
// Cambiamos el color de los parrafos 
$("p").css("color","red");
});
});

ThemeWiki: Tutoriales para templates de CMS, en un solo lugar

Leandro D'Onofrio — Sun, 30 Nov 2008 21:13:49 -0300

ThemeWiki es un interesante lugar, en donde podremos encontrar una gran variedad de tutoriales para crear templates de diferentes CMS:

Wordpress;
Joomla!;
Drupal;
phpBB;
Mediawiki;
Blogger ;
Entre varios más

Buenas practicas en el diseño de formularios web

Leandro D'Onofrio — Thu, 13 Nov 2008 00:35:55 -0300

Un formulario web puede tener variadas formas y objetivos (un formulario de contacto, una registración, una encuesta) pero muchas veces el hecho de que éste tenga o no éxito va a depender de como haya sido conformado y diseñado.

Best Practices for Web Form Design es un completo documento, realizado por Luke Wroblewski, en donde se detallan todos los aspectos a tener en cuenta al diseñar y crear un formulario: Usabilidad, organización de los elementos, flexibilidady por supuesto, tips y buenas prácticas con cantidad de ejemplos.

El documento es muy recomendable y puede descargarse en PDF (133 páginas, 4 MB) o verlo online como presentación

Ya se encuentra disponible Joomla! 1.5.8

Leandro D'Onofrio — Wed, 12 Nov 2008 12:52:51 -0300

A casi dos meses de su última versión, ya está disponible para su descarga Joomla! 1.5.8, el cual soluciona varios bugs entre ellos dos de seguridad de nivel moderado. Todos los detalles de la nueva versión pueden ser consultados en Comunidad Joomla!

Aprendiendo a usar jQuery con videotutoriales en español

Leandro D'Onofrio — Mon, 10 Nov 2008 13:24:26 -0300

Desde hace ya unas semanas, en Séptimo Continente (del cual ya hablamos hace un tiempo) podemos encontrar una serie de videotutoriales que conforman el Curso de jQuery en español para ver online o descargar (se necesita estar registrado para descargar):

Mejora drásticamente la carga de tu sitio con Minify

Leandro D'Onofrio — Mon, 10 Nov 2008 02:21:51 -0300

A menudo sucede que a medida que estamos creando un sitio, vamos incorporando unos estilos por aquí, un framework javascript por este otro lado, algún que otro plugin de ese framework por allá (que ademas viene con su propio CSS) y al final nos damos cuenta que:

El header de nuestro sitio termina siendo una infinidad de llamados a estilos en cascadas y javascripts;
La web termina tardando un tiempillo considerable en cargar

Para darnos una ayuda en este sentido, podemos contar con Minify, un script PHP que realiza tres trabajos principales:

Nos ayuda a reducir el numero de peticiones al servidor combinando varios CSS / JS en uno solo;
Minimiza el código de los archivos, eliminando espacios vacíos, saltos de líneas y comentarios;
Cachea en el servidor los archivos creados

Para utilizarlos, tan solo debemos descargar el paquete, mover la carpeta "min" a la raíz de nuestro sitio y dirigirse a http://www.nuestrositio.com/min/
Allí vamos creando la lista con los archivos que queremos procesar:

Una vez listo le damos Update, y ya tendremos los archivos comprimidos y combinados, listos para ser utilizados:

Otras opciones que otorga son las de crear grupos predefinidos de archivos y un bookmark para facilitar el trabajo al añadir archivos para procesar.

Optimizar el código y reducir el numero de peticiones son dos puntos que podemos tomar en cuenta en el momento de optimizar un sitio, para abordar más en el tema recomiendo el excelente artículo de Yahoo! Developer Network con 34 reglas para mejorar la velocidad de un sitio web.

Minify

JavaScript Table Sorter

Leandro D'Onofrio — Fri, 7 Nov 2008 18:32:51 -0300

Un pequeño script (1.7 KB) para cuando necesitamos ordenar datos contenidos en una tabla de manera sencilla. Funcional en IE, Firefox, Opera, Safari y Chrome. Ver Demo

Superheroes simpsonizados: el poster

Leandro D'Onofrio — Thu, 6 Nov 2008 17:33:05 -0300

Después de un arduo trabajo, Springfield Punx nos entrega su super póster recopilatorio con todos los superheroes simpsonizados hasta la fecha (click en la imagen para ver el póster mas grande)

Templates gratuitos de calidad en CSS Creme

Leandro D'Onofrio — Thu, 6 Nov 2008 16:32:32 -0300

CSS Creme ofrece en su sección de templates gratuitos diseños de muy buena calidad, full XHTML/CSS y de distintas temáticas, como por ejemplo Electronix:

CSS Creme | Free templates

Acelera el back-end de Joomla! con Google Gears

Leandro D'Onofrio — Thu, 6 Nov 2008 15:04:51 -0300

Así como Wordpress tiene capacidad nativa para funcionar con Google Gears, en Joomla! 1.5 también podemos lograr lo mismo instalando esta extensión, lo único que tienes que tener en cuenta es tener tu sitio funcionando en PHP 5, con Joomla! 1.5 y por supuesto Google Gears instalado.

Una vez instalado, debemos ir a Extensiones-->Gestor de plugins y publicamos la extensión System - Google Gears Support. A los pocos segundos, en la parte superior derecha aparecerá una leyenda que dice Update Gears.

Al hacer click allí nos aparecerá el siguiente cartel preguntando si deseamos habilitar Google Gears para que trabaje con el sitio:

Para luego comenzar a descargar los archivos a nuestra computadora y de esa forma poder trabajar más rápido con el back-end.