Davilious, frontend desarrollador web

Mis progresos patinando II

admin — Fri, 06 Jan 2012 23:08:01 +0000

Llevo tiempo practicando en serio con los patines, le pego duro y práctico una hora al día, cuando puedo. Aquí un nuevo vídeo con mis progresos. Lo más interesante son las transiciones y como los tobillos han ganado destreza y seguridad.

Aprender jQuery

admin — Tue, 20 Sep 2011 20:59:46 +0000

jQuery es un entorno de trabajo para hacer cosas faciles con la web sin necesidad de escribir mucho código y asegurando que lo que escribes, si funciona, será crossbrowser.
En los días que estamos es vital aprender y seguir aprendiendo, el interés y las ganas de seguir en constante actualización son vitales si queremos seguir trabajando en web.

Voy a hacer una recopilación de enlaces que considero muy importantes para seguir estudiando jQuery, todos ellos en inglés.

Estudio

Api.jQuery.com (La api del sitio oficial de jQuery)
visualjQuery.com (Puedes encontrar de forma sencilla lo que estás buscando)
jQueryui.com/ (Un montón de funcionalidad y fáciles de implementar)
learningjQuery.com (Sitio dedicado al aprendizaje de jQuery)
jQueryforDesigners.com (Basando en ejemplos y niveles de aprendizaje)
/JavaScript-Garden/ (Gran sitio de referencia Javascript)

Estudio con vídeos

Curso básico en codeSchool (Buen curso para empezar y entender la base de jQuery $55)
Lynda.com (Actualmente no hay un curso de jQuery potente pero sí muchos ejemplos y uno muy bueno de javascript)
PeepCode.com (Para fieras, cursos a través de screencast de ruby, jquery, node.js, blackbone..etc)

Herramientas

jsfiddle.net/ (Probar tu código online usando diferentes frameworks)
jsbin.com/ (Probar tu código online usando diferentes frameworks)
CodeAcademy (Estudia con ejemplos)

Controla tus fuentes, ahora sí con Kerning.js

admin — Mon, 19 Sep 2011 08:46:49 +0000

Si quieres tomar el control total de la apariencia de las fuentes en la web ya no estás obligado a usar imágenes. Con esta librería y un poco de CSS puedes adaptar la fuente a lo que quieras hacer con ella.

Pásate por aquí donde el autor explica cómo hacerlo:

http://endtwist.github.com/kerning.js/

Genial.

Crear atajos con alias en MAC a través de la shell

admin — Mon, 29 Aug 2011 14:38:59 +0000

Usar la terminal para lanzar aplicaciones es un ahorro de tiempo y de espacio mental, ya que o tienes todas las aplicaciones en Dock separadas con separadores por tipo o por uso o abrir aplicaciones se puede convertir en algo pesado. Algunas aplicaciones no permiten lanzarlas desde el Dock y tienes que ir a Applications y lanzarlas desde ahí.

Una buena costumbre que llevará menos de 10 minutos es definir atajos a través de la shell. Existen varias maneras de hacerlo dependiendo de la versión pero aquí dejo 3 posibles vías para llevarlo a cabo.

1) Rústica. Después de abrir consola escribe:

alias safari ‘open /Applications/Safari.app/’

2) Algo más manual. Busca el fichero .profile que debe estar en raíz de tu usuario y escribe dentro:

alias safari=’open /Applications/Safari.app/’

3) La alternativa Teclea “tcsh” en la terminal y después sigue con opción 1.

alias safari ‘open /Applications/Safari.app/’

No sé cuál funciona en qué versión, a mí me funciono la última. Una vez configurados todos los atajos de teclado accede a ellos abriendo terminal y tecleando el nombre del alias seguido de un punto o sin él.

Ahorrar tiempo es salud.

Planificando la estructura de tu documento, HTML5.

admin — Wed, 17 Aug 2011 14:05:22 +0000

Cuando tengo un PSD en mis manos y me dicen de hacer el front para esa web, lo primero que hago es imprimir la imagen. Después reviso bien las secciones, agarro tres o cuatro colores y me pongo a dividir la estructura de la web de forma que quede lo más semántica posible. Esta tarea no es sencilla porque es muy subjetiva, donde yo veo un section otro ve un article y donde yo veo un article el otro ve un aside.

En este vídeo (en inglés) James Williamson explica un poco cómo estructurar el documento según sus criterios, que en mi opinión son muy buenos.

Choosing the right structural element

HTML5: Structure, Syntax, and Semantics | by James Williamson

View this entire course and more in the lynda.com Online Training Library®.

Problema usando animated de jQuery y pngs con Internet Explorer

admin — Wed, 17 Aug 2011 12:48:28 +0000

Gracias a un artículo muy interesante y bien explicado que he encontrado, he podido solucionar un problema que podía haberme tomado muchas horas y muchos dolores de cabeza.

Cuando usas el método animated de jQuery y lo que animas es un .PNG transparente, lo pongas como background o lo pongas como imagen incrustada IE7/8 le añaden a esa capa un filtro con un alpha(opacity=100). A pesar de que nuestro amigo intentó quitarle el atributo con .removeAttr() no había forma de conseguir el efecto deseado.

La solución, pasarle a .animate() el siguiente parámetro, de tal forma que le fuerzas a darle una propiedad filter vacía.

'filter': ' '

$('#elemento').animate({'marginTop': "-20px",'filter': ''})

La conclusión la pone muy bien el autor y paso a traducirle.

La lección aprendida con PNG´s en IE7/8 es que funcionan bien con imagenes estáticas pero no funcionan bien con el método animated de Jquery porque les cambia la opacidad.

Ver artículo original.
En este otro debate se encuentran varios problemas con solución a la implemtentación de jQuery con PNG.
Ver debate

Compass para desarrollo CSS

admin — Thu, 04 Aug 2011 16:20:52 +0000

Si eres desarrollador web puede que conozcas muchos framework que te facilitan la vida a la hora de programar una web como less, sass o el recién publicado proyecto de Jeffrey Way Prefixr, este último en versión Alpha.

Mi vida como desarrollador de páginas web cambió cuando conocí compass un opensource framework para css escrito en Ruby y que utilizando Sass hace que tu código sea más limpio, más actualizable y más agradable.

Lo primero si estás pensando en emplear o conocer compass es parasarte por su sección de ayuda ver el vídeo de Lorin Tackett y pasar la instalación.

Una vez instalado te pasas por la sección de tuturiales, por la de sass y con un poco de paciencia y entrenamiento verás la diferencia en desarrollo.

A disfrutar!!

Mis nuevas ruedas Matter Juice 80MM

admin — Wed, 03 Aug 2011 14:57:20 +0000

Hoy han llegado mis nuevas ruedas para los patines, las increibles Matter Juice la rueda preferida por los patinadores de alto nivel. Aunque yo todavía no soy alto nivel creo que sabré apreciar la diferencia y saborear la velocidad y agarre de estas gomas.
Después de romper mis otras ruedas llamé a patín de oro y les pedí consejo, ¡si quieres saborear la diferencia píllate estas ruedas!, y no lo dudé. Ahora solo queda montarlas en mis botas y salir a probar.

Vamos para allá sobre ruedas.

2 estudios important!

admin — Fri, 22 Jul 2011 21:16:38 +0000

Existen dos listados que siempre me acompañan en el desarrollo de un proyecto.

1) Las reglas para los selectores en CSS. Importante saber la diferencia entre:

#id li span
#id > li span
#id + li span
#id ~ li span

http://www.w3.org/TR/css3-selectors/#selectors

2) Empleo de cada tag en HTML5, no es lo mismo utilizar un ul, ol ó dl ¿sabes la diferencia?

http://dev.w3.org/html5/spec/Overview.html

Optimización de imagenes

admin — Thu, 21 Jul 2011 12:41:46 +0000

Los tiempos de carga es una de las tareas que el frontend developer tiene que llevar a cabo. Las llamadas al servidor, la utilización de archivos comprimidos y el uso de CDNs son buenas prácticas para reducir tiempos de carga. Recomiendo leer el libro de High Performance Web Sites – Book donde te explica el desarrollo de técnicas para aligerar el tiempo de carga.

La optimización de imagenes es también un aspecto importante. Uno tiene que utilizar el optimizador de photoshop y también usar CSS-sprites para reducir llamadas al servidor, pero después de esto es bueno pasarse por herramientas que pueden ayudar a optimizar aún más el peso de la imagen.

Aquí dejo una que me ha gustado y la voy a emplear en mi próximo proyecto, se trata de convertir la imagen en PNG y la imagen se reduce en un 30% (+ ó -) sin perder la calidad.

http://www.smushit.com/ysmush.it/