Pixelovers

Codificando XHTML y CSS m�s rapido con Zen-Coding

juanmaguitar — Mon, 30 Aug 2010 09:00:00 +0100

Zen Coding es un plugin que está disponible para casi todos los editores del mercado y con el que podras codificar HTML/XML/CSS a gran velocidad.

Este plugin nos ofrece dos funcionalidades:

Expansión de abreviaciones: con unas abreviaciones determinadas (muy sencillas, ya que son muy parecidas a los selectores de CSS) podremos generar gran cantidad código HTML/XML/CSS con una simple combinación de teclas.
Selección de bloques (pares de tags): Pudiendo realizar una serie de acciones como seleccionar pares de tags, ir a zonas editables de los tags, envolver (wrap) un bloque con otras abreviaciones, comentar/borrar bloques y más cosas.

Para que veais lo que se puede hacer con este plugin os dejo aquí un video.

También hay disponible una demo online desde la que podeis probar su funcionamiento via web (CTRL+E para expandir, requiere Javascript)

Ejemplos

Veamos un ejemplo sencillo. Esta abreviación :


	div#page>div.logo+ul#navigation>li*5>a

Nos generaria lo siguiente (con una combinación de teclas que depende del editor, pero normalmente CTRL + ,)


	<div id="page">
		 <div></div>
		 <ul id="navigation">
		 <li><a href=""></a></li>
		 <li><a href=""></a></li>
		 <li><a href=""></a></li>
		 <li><a href=""></a></li>
		 <li><a href=""></a></li>
		 </ul>
	</div>

Otro ejemplo mas completo. La siguiente abreviación:


   html:xs>(div#header.header>img.logo[src="http://www.google.es" title="logo" alt=
   "logo"])+(div#content.content>h1+p*5)+(div#footer.footer>ul>li*5>a[href="./"])

Nos generaria el siguiente código:



  <!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
	  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	  <title></title>
    </head>
    <body>
	  <div id="header">
	    <img src="http://www.google.es" alt="logo" class="logo" title="logo" />
	  </div>
	  <div id="content">
		<h1></h1>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
	  </div>
	  <div id="footer">
		<ul>
			<li><a href="./"></a></li>
			<li><a href="./"></a></li>
			<li><a href="./"></a></li>
			<li><a href="./"></a></li>
			<li><a href="./"></a></li>
		</ul>
	  </div>
    </body>
  </html>

Mola , eh?

Editores

Hay una serie de plugins oficiales (desarrollados por el equipo de Zen Coding y con todas las caracteristicas de Zen Coding)

Aptana/Eclipse (crossplatform)
TextMate (Mac).
Coda (Mac)
Espresso (Mac)
Komodo Edit/IDE (crossplatform)
Notepad++ (Windows)
PSPad (Windows)
<textarea> (browser-based)
editArea (browser-based)

Pero ademas hay plugins desarrollados por terceros (en los que no se garantiza que esten disponibles todas las funcionalidades de Zen Coding) como pueden ser los de Dreamweaver o los de Vim

Puedes acceder a todos los plugins disponibles para los editores desde aquí o desde aquí

Enlaces y mas

En definitiva, esta es una herramienta de las que dices “¿Dónde has estado toda mi vida?”. Se acostumbra uno muy rapido a utilizarla ya que te ahorra muuuuuucho tiempo a la hora de codificar HTML/XML/CSS. Dentro de poco os vereis haciendo "CTRL + ," en cualquier editor de textos

¿Qué os parece esta herramienta? ¿La conocíais? ¿Conoceis alguna herramienta similar?

Esperamos vuestros comentarios.

Leer Codificando XHTML y CSS m�s rapido con Zen-Coding en Pixelovers

Sticky Footer: Como mantener el Footer en la parte inferior del navegador

juanmaguitar — Tue, 24 Aug 2010 09:02:00 +0100

En la maquetación de nuestros sitios web nos encontramos muchas veces con que tenemos que solucionar un pequeño problema: necesitamos mantener el footer pegado al pie de la pagina sea como sea el contenido de esta.

Este tipo de problema con el Footer tambien lo puedes encontrar por la red con el nombre de “Sticky Footer “ (Pie de pagina pegajoso) y aunque hay varias soluciones por la red, yo voy a compartir aquí una que me funciona muy bien. Y si algo te funciona, ¿para que cambiar? ¿No?

Asi que, resumiendo… ¿cómo se va a comportar nuestro Footer cuando apliquemos esta tecnica?

Que hay mucho contenido… pues la pagina hará su Scroll (como mandan los canones) y debajo de todo tendremos a nuestro Footer

Que hay poco contenido… pues veremos toda nuestra pagina sin Scroll y ahí debajo bien situado, pegadito al borde de abajo, veremos a nuestro Footer saludando

Esta técnica nos viene de la mano de Ryan Fait y lo unico que hay que hacer es añadir un DIV de mas.

Es decir para una estructura HTML como esta…


  <body>

    <div id="container">
      <div id="header"> … </div>
      <div id=”content”> … </div>

      <div class="push"></div>
    </div>    
    <div id=”footer”> … </div>  

  </body>

aplicaríamos este CSS …


  * { margin: 0; }
  html, body { height: 100%; }
  /* El margin-bottom de container es el valor negativo de la altura del footer */ 
  #container { min-height: 100%; height: auto !important; height: 100%; 
               margin: 0 auto -4em;  }
  /* .push debe tener la misma altura que footer */
  #footer, .push { height: 4em; clear:both; }

Puedes ver un ejemplo de esta tecnica de la mano del propio autor.

¿Y tu? ¿Conoces alguna otra técnica “definitiva” para solucionar este problema?

Esperamos vuestros comentarios

Leer Sticky Footer: Como mantener el Footer en la parte inferior del navegador en Pixelovers

jQuery Mobile: jQuery para tel�fonos moviles

juanmaguitar — Thu, 19 Aug 2010 21:19:00 +0100

http://static.obolog.net/multimedia/fotos/861000/860626/860626-284172.jpg

John Resig (creador de jQuery), nos presentaba hace unos dias oficialmente el nuevo proyecto del equipo de jQuery: jQuery Mobile.

Hasta ahora, para el desarrollo frontend de webs para dispositivos moviles habia que utilizar plantillas de diseño que podiamos encontrar por la red y plugins del tipo jQTouch, pero no habia una solucion integrada y estable… hasta ahora.

El objetivo de jQuery Mobile es el de ofrecer las herramientas necesarias para “desarrollar JavaScript de alto nivel y con un interfaz unificado, que funcione en los navegadores de los dispositivos moviles mas utilizados”… suena bien, no?

Entre otras cosas, este Framework nos ofrece unas plantillas optimizadas para moviles con la idea de unificar el diseño de widgets y layouts.

Podeis ver algunos de estos diseños aquí

Pero la principal diferencia que ofrece este nuevo Framework es la amplia variedad de navegadores para moviles con la que estan trabajando para ofrecer la maxima compatibilidad.

Para conseguir esto, estan utilizando una tabla llamada Graded Browser Support (ideada por Yahoo) en la que se clasifican los browsers y dispositivos en diferentes grados:

Grado A : browser de alta calidad y en dispositivos populares.
Grado B : browser de baja calidad en dispositivos populares o browser de alta calidad en pocos dispositivos del mercado
Grado C : browser de baja calidad y poco utilizado .

Podeis ver como queda esta tabla actualmente en la siguiente imagen:

Pues bien, el objetivo de jQuery Mobile es ofrecer soporte a todos los navegadores de grado A y B

Asi que, una buena noticia para los desarrolladores web ya que esta nueva herramienta nos va a facilitar (y mucho) el desarrollo de aplicaciones para moviles.

¡Ah! Se me olvidaba… está previsto que salga a finales de año.

NOTA:

Hace poco pude “asistir” (via web) a una conferencia online en la que John Resig nos contaba como se debian abordar las pruebas de rendimiento y de compatibilidad en un desarrollo en JS para moviles. Podeis ver esta presentación en slideshare.

En esta charla analizaba los dispositivos moviles y los browsers disponibles en el mercado y nos explicaba cómo hacer un testeo para moviles en condiciones (basado sobre todo, como decia, en Yahoo!s Graded Browser Support technique).

Todo lo que explicaba en esta charla es lo que estan aplicando para el desarrollo de jQuery Mobile

Ver �lbum de fotos | Leer jQuery Mobile: jQuery para tel�fonos moviles en Pixelovers

Redise�o de Flickr

jorgecasar — Tue, 29 Jun 2010 10:07:00 +0100

El otro día Juanma comentó sobre Facebook Facelift, el lavado de cara de Facebook y hoy me he encontrado que Flickr han cambiado la página de fotos. Hay que reconocer que el mensaje es muy llamativo: "We're introducing a new photo page, and you can check it out early. Take me to the future!" que viene a significar: "Estamos presentando una nueva página de foto y tu puedes echarle un vistazo antes de tiempo. ¡Llévame al futuro!

Por mi naturaleza aventurera y hambrienta de cosas nuevas no he podido resistirme a darle al enlace. Y me he llevado una grata sorpresa, un página de foto más grande, más rápida y más al estilo Flickr, como ellos mismos indican.

Para facilitarte la navegación por la nueva página te ofrecen una breve visita que consiste en 4 pasos por las principales características:

Explorar y ver: Puedes navegar rápidamente por la foto y la galería:
- Dónde estás: Ve rápidamente a la siguiente foto. encima de la foto a la derecha tienes 2 botones para ir a la anterior y a la siguiente foto.
- Acercarse: Mira esta foto más grande en la vista de caja de luz (lightbox). Entre los botones anteriores hay una lupa que te permite ampliar la foto actual. También puedes ampliarla haciendo click en la foto.
- Vista previa: Echa un vistazo a la cinta de película para ver las fotos relacionadas con esta. Debajo del mapa puedes ver una cinta de fotos que cuando pasas el ratón por encima aparece una flecha a la derecha y/o izquierda para ir corriendo la cinta.
Quién, qué, dónde:
- ¿De qué es esta foto?: Un título y una descripción pueden proporcionar detalles elementales acerca de esta foto. Debajo de la foto aparece el título y la descripción.
- La historia detrás de esta foto: Todos los detalles clave se pueden encontrar aquí: quién la tomó, cuándo se tomó, el lugar y más. A la derecha de la foto tienes toda la información referente a la foto.
Comentar y compartir:
- Favoritas e intercambio: Guarda tus fotos favoritas, compártelas con un amigo, agrégales una etiqueta y más. Ahora hay un menú de acciones relacionado con la foto arriaba a la izquierda que nos permitirá fácilemente: Agregar una etiqueta, Escribir una nota, Agregar una persona, Agregar al/quitar del álbum, Agregar a un grupo, Ver más tamaños, Ver presentación, Ver datos Exif, Encargar impresiones y más, Rotar, Editar foto en Picnik, Editar el título, la descripción y las etiquetas, Reemplazar esta foto, Eliminar esta foto
- Agregar a la conversación: Deja la tuya aquí. "¡Vaya, esta me encanta!"
Personas y lugar:
- ¡Coloca tu foto en el mapa!: Y responde a la pregunta: "Qué buena toma, ¿dónde tomaste esta foto?" Dan más importancia a la geolocalización de las fotos.
- Agregar personas y etiquetas: Cuéntanos quién o quiénes están en las fotos y agrégales etiquetas para describirlos. Esto te ayudará a organizarte y a hacer tus fotos más memorables.

Aquí os dejo una captura donde se indican todos los cambios:

La verdad es que es un gran avance y según lo vas usando te das cuenta que es muy intuitivo y tienes todas las acciones a mano. Sigue teniendo el mismo aspecto, limpio y sencillo, al que nos tiene acostumbrado Flickr. Auqnue me atrevería a decir que es más limpio y sencillo ahora. Al hacer el layout más grande, pasando de 800px a 975px, les permite también ampliar la foto de 500px a 640px y la columna de la derecha de 247px a 300px.

¿Vosotros que opináis del nuevo diseño? Os cuesta encontrar las cosas, o como me ha pasado a mi ¿habéis descubirto cosas que no sabías que existían, o estaban muy escondidas?

Ver �lbum de fotos | Leer Redise�o de Flickr en Pixelovers

Facebook Facelift, el lavado de cara de Facebook

juanmaguitar — Sun, 27 Jun 2010 12:25:00 +0100

En febrero de este año, Facebook hizo el ultimo cambio en su interface. Con este cambio se mejoró la navegabilidad de la aplicación y puso mas a mano las opciones mas usadas por los usuarios.

Pero desde algunos puntos de Internet piden un cambio más radical de la interface de Facebook.

Este es el caso de The Facebook Facelift que es una iniciativa promovida por Barton Smith para mejorar la interfaz de Facebook con un nuevo diseño que mejora la distribución del contenido y la experiencia de usuario.

La iniciativa tiene un grupo dentro del mismo Facebook para sumar apoyos a esta propuesta.

Aquí teneis el video para que veais lo que propone:

Facebook Facelift - Home & Profiles from Barton Smith on Vimeo.

También se pueden ver pantallazos de su propuesta en Flickr

La verdad es que el diseño propuesto es una pasada y después de ver el video y los pantallazos se queda uno un poco frustrado al volver al Facebook de siempre.

Desde luego, esta propuesta tiene mi voto

Y a ti ¿qué te parece esta propuesta de rediseño del Facebook?

Leer Facebook Facelift, el lavado de cara de Facebook en Pixelovers

Anywhere: Hovercards

jorgecasar — Fri, 18 Jun 2010 17:00:00 +0100

Continuando con serie de artículos dedicados al anywhere, ya vimos la semana pasada como enlazar nombre de usuario de Twitter. Y esta semana hemos analizado la función hovercards, la cual nos permite mostrar la ficha de usuario de Twitter en los nombres de usuario que haya en nuestra página.

La forma sencilla de llamar a esta función es mediante:

T.hovercards();

Cabe destacar que esta función llamará, implicitamente, a linkifyUser, por lo que no será necesario hacer cosas como:

T.linkifyUsers().hovercards();

Pero igual que linkifyUsers tiene opciones de personalización, aparte del selector de la función T, del que hablamos en el artículo de linkifyUsers, así que nos centraremos en los parámetros de la propia función hovercards. Esta función puede recibir como parámetro un objeto con las siguientes propiedades:

linkify: Esta propiedad sirve para indicar si queremos llamar a la función linkifyUsers o no (por defecto el valor es true).
infer: Nos permitirá indicarle a la función si el nombre de usuario se encuentra dentro del texto del elemento seleccionado o no (por defecto es false). Esta propiedad no es compatible con la anterior, si ponemos infer a true linkify pasará a false.
username: nos permite identificar cual es el nombre de usuario, cuando no se encuentra en el texto del elemento. Esta propiedad tampoco es compatible con linkify, si especificamos un username linkify pasará a false.
expanded:Permite mostrar la hovercard con la información extendida. Con toda la que sale tras pulsar en el "more...". Parece ser que no lo tienen implementado. No me ha funcionado y no he encontrado evidencia alguna en el código.
complete: Tal y como sucedía en linkifyUsers hemos encontrado en el código también la llamada a la funcióncomplete en hovercards. Atributo no documentado.
selector: Por defecto es: 'a.twitter-anywhere-user' pero puedes indicarle otro selecotr sobre el que aplicar las hovercards, por ejemplo si utilizaste el atributo className de linkifyUsers. Atributo no documentado.

Leer Anywhere: Hovercards en Pixelovers

Personalizar tu perfil de Twitter (y II)

juanmaguitar — Sat, 12 Jun 2010 13:24:00 +0100

Si eres un asiduo de Internet y estas al día en lo que a redes sociales se refiere, seguro que tienes una cuenta en Twitter y que la utilizas habitualmente.

Lo que a lo mejor tienes un poco abandonado es el background de tu perfil de Twitter, bien por que no tengas facilidad para el diseño o sencillamente porque aun no te has puesto a hacerlo.

Hay diseños impresionantes en algunos perfiles de twitter que puedes ver por la red. Albert Garcia ya nos hacia referencia en su dia a algunos de estos perfiles de Twitter con diseños realmente creativos.

Asi que, para que tu no seas menos, hemos recopilado una serie de herramientas y de recursos que te permitiran conseguir un background personalizado (y chulo) en poco tiempo ;-)

Free Twitter Designer .- Herramienta online que te permite crear de forma gratuita un background profesional
themeleon.- Herramienta online de la mano de ColourLovers que te permite crear de forma gratuita un background profesional
TwitBacks.- Crea tu background de forma gratuita con esta herramienta online
TweetBacks.- Otro grupo de backgrounds profesionales listos para ser usados
TweetyBack.- Diseños sencillos para tu cuenta
Free Twitter Layouts.- Colección de más de 50 backgrounds clasificados por categorias y listos para que te los bajes y los utilices en tu perfil
Twitter Gallery .- Colección de más de 200 backgrounds también clasificados por categorias. Tiene un sistema de instalacion automatica del fondo en un tu perfil de Twitter desde su web
TweetPlate .- Mas de 150 fondos gratuitos y muy profesionales.
Tweety Got Back.- Más de 400 Fondos realmente espectaculares.

¿Que te han parecido estos recursos? ¿Conoces alguno más que deberia estar en esta lista?

Esperamos vuestros comentarios

Leer Personalizar tu perfil de Twitter (y II) en Pixelovers

Acelera la carga de jQuery en tu site utilizando un CDN

juanmaguitar — Wed, 09 Jun 2010 23:37:00 +0100

Si utilizas jQuery, es una buena idea que cargues la librería desde un CDN (Content Delivery Network).

Pero, ¿qué es un CDN?

Es el nombre que recibe un grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros.

Hay varios CDN’s gratuitos, entre ellos el de Google, el de Microsoft y el de Edgecast.

Tambien hay CDN's de pago. Algunos puede que te suenen como Akamai o Amazon CloudFront

¿Cómo funciona un CDN?

La idea es que en vez de cargar las librerias desde tu servidor de hosting, las cargues directamente desde el CDN. De este modo cuando se haga la petición se cargará la librería (o librerias solicitadas) desde el nodo mas cercano al cliente con lo que se cargará más rapido.

¿Cómo lo utilizo en mi site?

Para cargar jQuery desde el CDN de Google, pondriamos en el HEADER de nuestro HTML lo siguiente:


  <script src="http://www.google.com/jsapi">
  <script type="text/javascript"> 
    google.load("jquery", "1.3.2");
  </script>

Y para cargarlo desde el CDN de Microsoft pondriamos esto:


   <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"> 
   </script>

¿Qué ventajas tiene usar un CDN?

Usar CDN tiene varias ventajas:

Liberas a tu servidor de la carga de estos archivos
Incrementas las posibilidades de que el fichero esté cacheado, ya que otros sitios que usen tu CDN enlazaran al mismo fichero
Un CDN muy probablemente servirá el fichero más rapido que desde tu propio servidor de hosting

¿Qué CDN gratuito me conviene utilizar?

Pues en Pingdom.com han hecho una comparativa de rendimiento entre los de Google, Microsoft y Edgecast, y han llegado a unas interesantes conclusiones:

El CDN de Google es el más lento de los 3 en America del Norte y en Europa
En Europa el CDN de Microsoft es el más rapido
En América del Norte, el CDN de Edgecast es el más rapido
El CDN de Edgecast gana en terminos de rendimiento medio

Un último factor a considerar es que el CDN más usado es con el que tendras más posibilidades de tener tu archivo cacheado, pero por ahora no hay datos de cual es el CDN más utilizado.

¿Y tu? ¿Qué opinas del uso del CDN? ¿Lo utilizas? ¿Cuál utilizas? ¿Alguno gratuito que no hayamos nombrado aquí?

Enlaces y más

Leer Acelera la carga de jQuery en tu site utilizando un CDN en Pixelovers

Anywhere: Auto-linkification of Twitter usernames

jorgecasar — Sun, 06 Jun 2010 22:11:00 +0100

Ya os hablamos hace un par de semanas de @Anywhere (API Javascript de Twitter) y hoy queremos entrar en más detalles sobre la librería, para que la puedas implementar en tu web de forma sencilla y potente. Por no hacer el artículo hablaremos en de cada uno de las funciones en un artículos separados. Así, hoy trataremos uno de los métodos más sencillitos de la API @Anywhere. También quiero destacar que todos los ejemplos de código estarán dentro de la llamada de callback (T) como dijimos en el anterior artículo:

twttr.anywhere(function (T) {
  // Tu código aquí...
});

Como sabéis la función T puede recibir como parámetro un selector el cual usará la librería Sizzle para encontrar los elementos del DOM, es la misma librería que usa jQuery, así que seguro que estáis familiarizados con este forma de encontrar elementos en el DOM. Si no le pasamos ningún argumento a T tomará todo el contenido del body de la página para buscar.

Con Linkify users podremos enlazar con el perfil de Twitter a todos usuarios que mencionemos en la página de la forma: @nombreUsuaurio teniendo en cuenta la siguiente expresión regular: /\B[@＠]([a-zA-Z0-9_]{1,20})\b/g, es decir,el símbolo '@' seguido de 1 a 20 caracteres alfanuméricos incluyendo el '_'. Por lo tanto nombres como @pixelovers, @jorgecasar y @juanmaguitar son nombre de twitter válidos.

Sabiendo esto simplemente podremos enlazar estos nombres utilizando el siguiente código en Javascript:

T.linkifyUsers();

Si queremos ser más específicos y que solo busque en cierta parte de nuestra página podemos llamar a la función especificando un selector:

T('#content').linkifyUsers();

También es importante saber que la función linkifyUsers puede recibir un objeto como argumento con las sugientes propiedades:

className: Puedes especificar un nombre de clase alternativo. (En la documentación)
complete: Puedes añadir una llamada de callback a la finalización del autoenlazado (No se especifica en la documentación)

Un ejemplo especificando todas las formas de llamar a esta función podría ser:

T('#content').linkifyUsers({
   className:"twitterName",
   complete: function(){
      alert('LinkifyUsers done!');
   }
});

Creo que con esto podréis hacer una primera toma de contacto con @Anywhere. Ya lo tienes implementado en tu sitio y quieres mostrarnos como lo has hecho. Deja un comentario explicandolo. Si has tenido problemas, preguntanos, entre todos podemos intentar encontrar la solución.

Leer Anywhere: Auto-linkification of Twitter usernames en Pixelovers

Google Font API: Usa tipograf�as open source en la web

jorgecasar — Mon, 24 May 2010 10:09:00 +0100

Cada vez salen más y más APIs, y Google es uno de los qué más APIs libera. Esta vez ha presentado en las conferencias Google I/O, realizadas el pasado 19 y 20 de Mayo, la Google Font API. Esta API te ayuda a añadir tipografías en cualquier página web. Esto tiene unos beficios claros como:

Disponer de tipografías de código abierto de alta calidad
Funciona en la mayoría de los navegadores
Es extremadamente facil de usar.

Puedes ver todas las tipografías disponibles en el Directorio de Tipografías de Google. De momento disponen de 18 fuentes, con variantes en itálica, negrita, italica negrita. Además 1 de ellas dispone de 10 familias diferentes. Por lo tanto contamos con un catálogo amplio que nos permitirá dar otro estilo a nuestra web y salirnos de las típicas tipografías universales.

Además el catálogo está muy cuidado, ya que dispone de una ficha por cada una de las tipografías. En la ficha puedes encontrar el nombre del diseñador, con un enlace a su biografía y otros datos personales. También dispones de la descripción de la tipografía y el set de caracteres. También hay ejemplos de textos en diferentes tamaños, desde 36px hasta 12px, en diferentes colores, #000, #333 y #666, y diferentes variantes, cursiva, negrita y negrita cursiva Puedes ver como ejemplo la ficha de la tipografía Cararell.

Si te parece interesante y quieres ver como incluirlo en tu web acontinuación te cuento las diferentes formas, solo con CSS y con ayuda de Javascript.

Solo con CSS

Tienes varias formas de incluir las tipografías en tu web. La más sencilla de todas es incluyendo una hoja de estilos adicional:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

Luego simplemente usas la tipografía en tu hoja de estilos de forma habitual:

CSS selector {
  font-family: 'Font+Name', serif;
}

Si no quieres cargar todas las variantes, puedes especificar las variantes que quieras añadiendo dos puntos y las variantes que quieras separadas por comas:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name:variante"/>

Si quieres añadir varias tipografías, no es necesario hacer 1 llamada por cada una de ellas, simplemente con separar los nombres con pipes "|" es suficiente:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans"/>

Y si quieres hacer todo a la vez simplemente sigue todas las reglas anteriores, y quedará algo de esta forma:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans"/>

Con ayuda de Javascript

Si no quieres que la carga de tu página se vea afectada por tener que resolver otras DNS y cargar contenido de servidores que no puedes controlar, puedes probar WebFont Loader. Una API de Javascript que te da un mayor control sobre las tipografías cargadas. Esta forma también es muy sencilla, pero requiere un mínimo de conocimiento de Javascript. Con añadir estas lineas en el head de tu página tendríamos todo listo para usarla

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>

Esto carga las tipografías indicadas en families y si todo ha ido correctamente y el navegador permite estas tipografías se añadirá en el html las clases: 'wf-active' y 'wf-family-type-active' (por ejemplo: 'wf-cantarell-n4-active').

Esto nos permite usar en nuestra hoja de estilo tipografías alternativas en caso de no haber podido cargar las deseadas, de esta forma:

.wf-inactive p {
   font-family: serif
 }
 .wf-active p {
    font-family: 'Cantarell', serif
 }

Con WebFont Loader puedes solicitar fuentes a otros proveedores como por ejemplo TypeKit o incluso hacer llamadar a cualquier proovedor de tipografías especificando el proveedor.

En la llamada a WebFont Loader puedes especificar callbacks para ejecutar tu propio código en un momento dado. Las funciones de calback de las que dispones son:

loading() Se llama cuando todos los módulos de proveedores de tipografías web (google, typekit, y/o custom) han reportadoq ue empiezan a cargar tipografías.
fontloading(fontFamily, fontDescription) Se llama cuando se empieza a cargar cada solicitud de tipografía web. El parámetro fontFamily es el nombre de la familia de la tipografía, y fontDescription representa el estilo y peso de la tipografía.
fontactive(fontFamily, fontDescription) Se llama cuando ha terminado de cargar cada una de las solicitudes.
fontinactive(fontFamily, fontDescription) Se llama si una solicitud ha fallado al cargar.
active() Se llama cuando todas las tipografías web han sido cargadas o bien no se haya podido cargar, siempre y cuando al menos una se cargado con éxito.
inactive() Se llama si el browser no soporta tipografías web o si ninguna de las fuentes se ha podido cargar.

Sabiendo todo esto, no me he podido resistir a hacer pruebas con esta nueva API, así que os dejo una demo de uso, en las que cargo las fuentes bajo demanda.

Demo de Google Font API

¿Qué os ha parecido la API? ¿Quiéres eseñarnos tus nuevos diseños usando estas tipografías?

Ver �lbum de fotos | Leer Google Font API: Usa tipograf�as open source en la web en Pixelovers

Anywhere: API Javascript de Twitter

jorgecasar — Wed, 19 May 2010 10:35:00 +0100

Hace 1 mes se realizó el Chirp, la conferencia oficial para desarrolladores de Twitter. Y en ella se presentaron varias novedades en torno al mundo Twitter. Entre ellas, una nueva página para desarolladores de Twitter: dev.twitter.com, donde podemos ver nuevas herramientas. En la que nos vamos a centrar, por ser la más cercana a la temática del blog es @Anywhere. @Anywhere es una API de Javascript que te permite integrar Twitter con tu sitio en unas pocas lineas de Javascript. Antes de empezar a utilizarla has de registrarte como desarrollador para que te faciliten una API key, para ello tienes el formulario de registro de un aplicación Anywhere. Tras ese paso, solo debemos añadir en las cabeceras de nuestra web la llamada a este script:

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>

Una vez añadido este script la foma de inicializar @Anywhere es la siguiente:

twttr.anywhere(function (T) {
  // Tu código aquí...
});

Como ves en realidad llamamos a una función y le pasamos una función de callback con un parámetro T (podéis llamarlo como queráis). La cual se ejecutará una vez cargado el script de Twitter @Anywhere. Con esta API, de momento, puedes realizar lo siguiente:

Autoenlazar nombres de usuario de Twitter
Hovercards
Botones de Follow
Caja de Tweet
Login de usuario

Os invito a que la probéis. Desde Pixelover estamos preparando algunas demos de uso que os iremos enseñando a lo largo de estas semanas.

Leer Anywhere: API Javascript de Twitter en Pixelovers

C�mo localizar un portatil robado

juanmaguitar — Mon, 17 May 2010 21:18:00 +0100

Durante mucho tiempo habia tenido el dilema de si comprarme un Mac o no. El motivo principal por el que no me decidía era el precio. Demasiado caros para mi gusto.

El tema es que hace cosa de un año me decidí por fin a entrar en el mundo Apple y me compré un portátil MacBook. Pero mira, por cosas de la vida, justo un par de meses después de haberlo comprado me entraron en casa y me lo robaron :(

Yo pensaba que al ser Apple y al tener el numero de serie y la factura, tendrian alguna forma de rastrear el portátil, de bloquearlo si se conectaba a Internet, o algo asi… pero no. Llamé al servicio técnico de Apple y me dijeron que no podian hacer nada.

Asi que bueno, investigando por la red, he encontrado algunos sistemas para poder localizar tu portátil en caso de robo o desaparición:

Adeona. Es un servicio abierto y gratuito, que permite realizar un seguimiento de la localización de un ordenador portátil perdido o robado.

Hay que instalar un pequeño programa agente (disponible para Windows Vista y XP, Linux y Mac OS X) con el que obtendremos un archivo y una clave. Con estos elementos, si alguna vez se pierde el ordenador, podremos recuperar entre otras cosas la IP Publica y Privada que esté utilizando el equipo para conectarse a la red

Ademas, si es un Mac, el cliente de Adeona hace una foto del usuario con la Webcams integrada y la registra.
Locate PC. Es un programa que nos puede enviar un email de manera silenciosa, con todos los datos necesarios para que podamos ubicar donde está el portatil.
Prey. Es una aplicación gratuita y muy ligera que te permitirá trackear y localizar tu portátil en caso de robo. Funciona en todos los SO.

El programa se autoconectará a la primera red WIFI disponible y te enviará por mail todos los datos que pueda recopilar, entre ellos la geo-localización de la conexión WIFI que esté utilizando tu portátil :)
Undercover. Con este programa, exclusivo para Mac, nuestro portátil quedará identificado en los servidores de Undercover, con lo que podremos activar en cualquier momento desde su web el "modo recuperacion". Además la aplicación se puede proteger contra borrado (y formateo).

Si nos lo roban, el sistema realizará varias acciones con el objetivo de localizar al intruso. Entre estas acciones está el registro de chats, correo electronico, logins, e imágenes a traves de la Webcam que quedaran registradas en sus servidores.

Si el intruso no se conecta a Internet, la aplicación simulará un fallo de hardware que hará necesario llevarlo al servicio tecnico.

¿Y tu? ¿Conoces algun sistema más para localizar tu portátil en caso de robo? ¿Cuál es tu opinión sobre estos que comentamos aquí? ¿Has tenido que utilizar alguno? ¿Te han servido para localizar tu portatil?

Esperamos vuestros comentarios

...por cierto, la historia del robo de mi portátil tiene final feliz. Lo recuperó la policia hace poco (1 año despues del robo!!!) de rebote por otra historia.

Eso si, ya me estoy instalando uno de estos por si (toco madera) me vuelve a pasar.

Enlaces y más

Ver �lbum de fotos | Leer C�mo localizar un portatil robado en Pixelovers

Comportamiento de los usuarios en los sitios web

juanmaguitar — Sun, 25 Apr 2010 21:06:00 +0100

La usabilidad web es el área que estudia cómo deben estar hechos los sitios web para que sean fáciles de usar por los usuarios finales, para que encuentren lo que buscan de la forma más rápida y eficiente posible.

Dicho estudio se basa en el comportamiento de los usuarios en la web.

Asi que es importante que tengamos en mente cómo se comportan los usuarios en internet a la hora de diseñar nuestros sitios web. De esta forma conseguiremos que le saquen el máximo partido posible a nuestra web.

Veamos cuales son los patrones básicos de comportamiento de los usuarios en la web:

Los usuarios aprecian la calidad y la credibilidad (El contenido es más importante que el diseño). Esto quiere decir que si ven un sitio con contenido de calidad van a perdonar la presencia de publicidad y/o un diseño pobre. Este es el motivo por el que sitios web no-tan-bien-diseñados pero con contenido de alta calidad ganan mucho tráfico con los años.
Los usuarios no leen, escanean (Organiza bien la información para que se asimile bien). Cuando miran una página web, los usuarios web buscan puntos de referencia que les sirvan de guia en su recorrido por el contenido de la pagina (headers, enlaces, texto en negrita,..).
Los usuarios web son impacientes (Que no les cueste encontrar lo que buscan). We want the world and we want it now decian The Doors en un tema. Pues esto es igual. Cuanto menos intuitiva sea la navegación y más le cueste a un usuario obtener lo que busca, mas posibilidades de que abandone nuestro sitio en busca de otra opción mejor.
Los usuarios no siempre eligen la mejor opción (No te pases optimizando). Los usuarios no siempre buscan la forma más rapida de encontrar la información. En vez de eso, escanean la página de una forma lineal, yendo secuencialmente de una seccion a otra. Y en cuanto encuentran un enlace que parece llevarles a lo que buscan lo clickan inmediatamente. Ten en cuenta esto y no te pases optimizando la disposicion de la información
Los usuarios siguen su intuición (Que las cosas hagan y digan lo que se espera de ellas). En la mayoria de los casos los usuarios seguiran su instinto para moverse en el sitio web antes que leer la información que se les ofrece. Asi que mejor que la informacion en tu sitio web esté dispuesta de la forma que esperan tus usuarios.
Los usuarios quieren tener el control (No les digas cómo navegar). Los usuarios quieren ser capaces de controlar su navegador y delegar en el sitio web la presentacion de la información. Por ejemplo, no quieren ventanas popups inesperadas y quieren que el boton “Back” siempre nos lleve a la página anterior.

¿Y tú que opinas? Esperamos vuestros comentarios.

Enlaces y más

Leer Comportamiento de los usuarios en los sitios web en Pixelovers

C�mo extender objetos con jQuery. Diferencia entre $.extend y $.fn.extend

juanmaguitar — Tue, 20 Apr 2010 00:03:00 +0100

En muchos de los plugins de jQuery que manejamos vemos las expresiones $.extend (o jQuery.extend) y $.fn.extend (o jQuery.fn.extend).

Pues bien, lo que estamos viendo en estas expresiones es la aplicación del metodo .extend().

Este método es la base para la creación de plugins y para la parametrización de nuestros plugins (es decir poder tener unos valores por defecto que el usuario pueda modificar al llamar al plugin).

Pero... ¿que hace exactamente el metodo .extend()?

Basicamente lo que hace es extender objetos. Esto significa que, dado un objeto, le añade el contenido (funciones y variables) de otro objeto (o de otros).

La nomenclatura de este metodo es la siguiente:


	jQuery.extend( target, [ object1 ], [ objectN ] )

Ahora bien, dependiendo del numero de objetos que reciba, el resultado final será diferente...

Cuando .extend() recibe un unico objeto

En este caso, como solo se le pasa un objeto, lo que hace es añadir los metodos definidos en este objeto al objeto jQuery o al objeto jQuery.fn (tambien llamado jQuery.prototype o $.fn)

Como norma general, debemos extender el objeto jQuery para funciones, y el objeto jQuery.fn para metodos. Una funcion, a diferencia de un metodo, no puede ser accedida directamente desde el DOM.

Por ejemplo, si extendemos el objeto jQuery.fn de esta forma:


	$.fn.extend({
		myMethod: function(){...}
	});

Podremos aplicar este nuevo metodo a elementos del DOM de esta forma:


	$("div").myMethod();
	// aunque tambien podria llamar asi: $.fn.myMethod();

Y si extendemos el objeto jQuery de esta forma:


	$.extend({
		myMethod2: function(){...}
	});

Podremos llamar a esta nueva funcion de esta forma


	$.myMethod2();

Cuando .extend() recibe dos o más objetos

Aquí lo que hace es añadirle al primer objeto, los metodos y variables definidos en el resto de objetos.

Por ejemplo:


	defaults = { size: 3 };
	options = { height: 6 };
	var opts = $.extend(defaults, options)

	// 'defaults' recibe los metodos y variable definidos en 'options'
	// opts == defaults == { size: 3, height: 6 }
	// options == { height: 6 };

El objeto 'defaults' se amplia (se extiende) con los elementos del objeto 'options'. El objeto 'options' permanece igual.

Si el primer objeto está vacio, se añadirán los metodos y variables del resto de objetos en un nuevo objeto. Esto es util cuando queremos agrupar los metodos y variables de diferentes objetos sin modificar ninguno de ellos.

Por ejemplo:


	var  opts = $.extend( {}, defaults, options)

	// 'opts' recibe todos los metodos y variables definidos en 'defaults' y  'options', sin que estos queden modificados
	// opts == { size: 3, height: 6 }
	// defaults == { size: 3 };
	// options == { height: 6 };

El objeto 'opts' se amplia (se extiende) con los elementos de 'defaults' y 'options'. Los objetos 'defaults' y 'options' permanecen igual.

Y por ultimo.... ¿hay más formas de extender los objetos jQuery, jQuery.fn o cualquier otro?

Pues si. Podemos extender cualquier objeto directamente con la nomenclatura de objetos, es decir haciendo ...


	jQuery.myNewFunction_1 = function() { 	
		// hago cosas chulas 
	}  

	jQuery.fn.myNewFunction_2 = function () { 	
		// aquí tambien hago cosas chulas 
	}

	miObjeto.myNewFunction_3 = function () { 	
		// y aquí no voy a ser menos 
	}

¿Y tú? ¿Has usado ya .extend() en tus aplicaciones? ¿Cómo lo has aplicado? Cuentanos tu experiencia.

Enlaces y más

Leer C�mo extender objetos con jQuery. Diferencia entre $.extend y $.fn.extend en Pixelovers

Por qu� no conviene usar variables globales en Javascript

juanmaguitar — Tue, 30 Mar 2010 00:25:00 +0100

Desde hace tiempo vengo leyendo en muchos blogs de desarrollo con Javascript la recomendación de no utilizar variables globales en nuestro código. Pero ¿por qué se recomienda no utilizar variables globales en Javascript?

En pixelovers hemos querido ahondar un poco en esta cuestión y para ello comenzaremos respondiendo a algunas preguntas:

¿Qué son las variables globales?
En Javascript los programas son entregados como texto. Este texto Javascript es evaluado (eval) y compilado en un ejecutable que se ejecuta inmediatamente. Esta ejecución puede dejar algunos elementos en el objeto global de la ventana.

El objeto global es el espacio de memoria que contiene las funciones y variables que estan en la raiz. Las variables que no se definen específicamente tambien son consideradas como variables globales. Los nombres de estas variables se mantienen en el objeto global y sus valores son accesibles desde cualquier parte del código.
¿Si no es recomendable el uso de variables globales en Javascript por qué existen?
Este uso de variables globales era conveniente para los pequeños scripts que Navigator 2 esperaba soportar. Con el tiempo, estos pequeños script han derivado en complejas aplicaciones Web 2.0 (POO, AJAX, uso de librerias, plugins, etc...) por lo que el uso de variables globales ya no tiene justificación.

Global variables are evil.

Las variables globales son una fuente de falta de fiabilidad y de inseguridad. Su uso hace que se incremente el riesgo de colisiones con otras variables de otros programas. El riesgo de colisiones es mayor, cuantos mas librerias, plugins y widgets utilizemos.

De hecho, una medida objetiva de la calidad de un programa Javascript es: ¿Cuantas variables globales y funciones globales tiene? Cuantas mas tenga, de peor calidad es

Veamos ahora las diferentes formas de crear variables globales asi como la mejor alternativa a su uso.

Hay 3 maneras de definir una variable global en Javascript:

La primera forma es declarar la variable fuera de cualquier funcion
```
			
			var myGlobalVar = value;
		
```
La segunda forma es asignar la variable como una propiedad del objeto global que en los navegadores web es el objeto window
```
			
			window.myGlobalVar = value;
		
```
La tercera forma es usar la variable directamente sin definirla antes. En este caso no importa si la variable está dentro o fuera de una funcion. Se considera implícitamente que es una variable global
```
			
			myGlobalVar = 'Hello world';
		
```

Una buena manera de minimizar el uso de variables globales es almacenarlas en un único objeto global. Haciendo esto puedes mantener todas tus variables y funciones en un único lugar, reduciendo ampliamente el riesgo de colisiones de nombre.

			
			// Define your global object  
			var myObj = {};  

			// Add property (variable) to it  
			myObj.myVar = 'Hello world';  


			// Add method to it  
			myObj.myFunctions = function() {  
				// Do cool stuff  
			};

Idealmente, un aplicación, librería, componente o widget define una unica variable global. Esta variable global deberia ser un objeto que es el namespace raiz de toda nuestra funcionalidad (funciones y variables)

El lenguaje javascript se diseñó con variables globales para hacer más facil a los principiantes empezar a programar con este lenguaje. Pero el efecto colateral es que es facil olvidar definir una variable y de esta forma crear un bug difícil de descubrir. Asi que hazte un favor, y evita el uso de variables globales siempre que sea posible.

¿Y tu que opinas? ¿Alguna idea más para comentar respecto al uso de variables globales o alternativas?. Esperamos vuestros comentarios.

Enlaces y más

Leer Por qu� no conviene usar variables globales en Javascript en Pixelovers

Libro manual jQuery UI 1.7

jorgecasar — Sat, 27 Feb 2010 16:55:00 +0100

Hace unos meses cayó en mis manos este fantástico libro: jQuery UI 1.7 de Dan Wellman. Y lo llevo usando casi a diario desde entonces puesto que estoy metido en un proyecto en el cual usamos casi toda la librería (Dialog, Slider, Tabs, Sortable...). Al principio pensé que no le daría uso puesto que existen demos y documentacion de jQuery UI, pero desafortunadamente no es tan buena como me esperaba.

Creo que una de las partes que más conflicto crea entre los usuarios del framework es la cantidad de clases que añade a los elementos involucrados. Y es cierto, añade muchas, pero todas ellas necesarias. Gracias a eso te permite controlar a tu gusto la interfaz. Ellos te proporcionan una serie de temas, los cuales puedes personalizar mediante el jQuery UI ThemeRoller, pero hay casos en los que te quieres salir de la norma y dar, en un caso concreto, un estilo diferente. Conociendo bien el porqué de cada clases es muy fácil, y para este caso el libro me ha venido como anillo al dedo. He podido aprender, ya en el capítulo 2, el CSS Framework, algo imprescindible para dotar a tu interzar la personalidad que buscabas.

Por otro lado el libro me ha venido muy bien para entender paso a paso el funcionamiento de los widgets. Con lo que he podido crear mis propois plugins para automatizar ciertos procesos, como por ejemplo la creación de sliders, o paneles configurables mediante sortable.

La verdad que siendo sincero, si piensas desarollar algo con jQuery UI 1.7 y quieres hacer bien, te recomeiendo este libro.

Leer Libro manual jQuery UI 1.7 en Pixelovers

Javascript y jQuery: Consejos y Buenas Practicas (Parte II)

juanmaguitar — Sat, 20 Feb 2010 20:30:00 +0100

Hace unas semanas iniciamos una serie de 2 posts para hablar de lo que consideramos que son unas buenas practicas para desarrollar codigo Javascript con la libreria jQuery.

Con este post cerramos la serie y profundizamos un poco más en el tema

En el primer post de esta serie comentamos algunas generalidades que nos pueden servir de base a la hora de desarrollar un código JS eficiente. En este segundo post hablaremos de como solucionar de forma eficiente problemas concretos que nos solemos encontrar en nuestros desarrollos.

Asi que, ahi vamos...

Practicas eficientes

Checkear la disponibilidad de un objeto antes de acceder a él. Muchos de los errores en Javascript se deben a que se intenta acceder a elementos o métodos que no existen en un determinado momento del periodo de ejecución. Para solucionar esto basta con realizar un pequeña comprobación antes de utilizar dicho elemento o método.
Ejemplo:
```
			

	if ( $('#signup').length ) {
		$('#signup input').change ( function () {
			alert ("Acabas de poner " + $(this).val() );
		});
	}
					
```

Evita el uso de variables globales. A fin de evitar el uso de variables globales, podemos utilizar data, un método de jQuery que nos permite mantener relaciones entre valores y elementos DOM.

Por ejemplo podemos guardar un dato en el objeto document de esta forma

			

	$(document).data('id_country',3) ,

Y acceder al dato de esta leer el dato de esta otra

			

	$(document).data('id_country')

Aunque lo suyo realmente es aprovechar la terminologia de objetos y ubicar las variables en su contexto

Ejemplo:

			

	var mySite = {
		general_1 : 100 ,
		general_2 : 200,
							
		myObject1 : {
							
			local_1 : 500,
			funcionLocal : function() {
				var local_2 = 600;
				console.log ("estoy en funcionLocal");
				console.log ("local_1=" + mySite.myObject1.local_1);
				console.log ("local_2=" + local_2);
			}
						
		},

		init : function() {
			console.log ("estoy en init");
			this.funcionalidad1();
			this.myObject1.funcionLocal();
		},
						
		funcionalidad1 : function() {
			console.log ("estoy en funcionalidad1");
			console.log ("general_1=" + this.general_1);
			console.log ("general_2=" + this.general_2);
		}
	}

Definir siempre las variables con VAR , incluso dentro de los FOR, de esta forma nos aseguramos que la variable tendrá el ambito que le corresponda. Si no se pone var se toma la variable como global.

Mala declaracion de variables para el FOR

			

	var i=0; // Creates a global variable

	function test() {
	   for (i=0; i<10; i++) {
		  // do something
	   }
	}

	test();

	alert(i); // The global variable i is now 10!

Buenas declaraciones de variables para el FOR

			

	var i=0; // Creates a global variable

	function test() {
	   var i=0;
	   for (i=0; i<10; i++) {
			// do something
	   }
	}

	function test2() {
	   for (var i=0; i<10; i++) {
			// do something else
	   }
	}

	test();
	test2();

	alert(i); // The global variable i is still 0!

Usa FOR en vez de EACH. Por lo general las funciones nativas de Javascript son mas rapidas que las derivadas de librerias

Ejemplos:

			

	var array = new Array ();  
	for (var i=0; i<10000; i++) {  
		array[i] = 0;  
	}  
	
	// Mas lento
	$.each (array, function (i) {  
		array[i] = i;  
	});  

	// Mas rapido
	var l = array.length;  
	for (var i=0; i<l; i++) {  
		array[i] = i;  
	}

Para concatenaciones largas de cadenas, mejor JOIN() que CONCAT(). JOIN devuelve texto y CONCAT devuelve un array.

Ejemplos:

			

	var array = [];  
	for (var i=0; i<=1000; i++) {  
		array[i] = '<li>'+i+'</li>';  
	}  

	// JOIN devuelve texto
	$('#list').html ( array.join (''));  

	// CONCAT devuelve array
	var array_concat = array.concat('');

Return FALSE Si no devuelves FALSE en la funcion la pagina salta al top, por eso a la hora de capturar eventos conviene devolver FALSE al final para que haga lo que nosotros definimos y nada mas
En vez de esto:
```
			
	
	$('#item').click (function () {
		// stuff here
	});
```
Mejor esto:
```
	$('#item').click (function () {
		// stuff here
		return false;
	});
```
Usar correctamente el tag SCRIPT. El atributo LANGUAGE está deprecado en el tag <script>. La forma correcta de crear un bloque de código javascript es:
```
	<script type="text/javascript >
		// code JS here
	<script>
```

La selección mas rápida es por ID. Siempre el selector más rápido y que menos iteraciones produce es la búsqueda por un #id, ya que simplemente lanza un document.getElementById(), lo que al ser nativo nos asegura un tiempo de respuesta mínimo y un mínimo consumo de proceso.

Por ejemplo, con este codigo:



	<div id="content">
		<form method="post" action="/">
			<h2>Traffic Light</h2>
				<ul id="traffic_light">
					<li><input type="radio" name="light" value="red" /> Red</li>
					<li><input type="radio" name="light" value="yellow" /> Yellow</li>
					<li><input type="radio" name="light" value="green" /> Green</li>
				</ul>
				<input id="traffic_button" type="submit" value="Go" />
		</form>
	</div>

En vez de esto:

			

	// Más lento
	var traffic_button = $('#content .button');

Mejor esto:



	// Más rápido
	var traffic_button = $('#traffic_button');

Para acceder a varios elementos, siempre que podamos debemos hacerlo partiendo de un #id, de esta forma nos aseguramos una iteración más ajustada.:



	var traffic_lights = $('#traffic_light input');

Usar tags delante de las clases. Al hacer selección de clases con jQuery, es recomendable indicar el tag del elemento solicitado ya que al hacer iternamente uso de document.getElementsByTagName() para localizarlos acotamos previamente los elementos en los que buscar las clases solicitadas.
Por ejemplo, para el HTML del punto anterior, si queremos seleccionar el elemento radio con, la opción más rápida sería la siguiente:
```
	
	var active_light = $('#traffic_light input.on');
```

Usar la caché de objetos. Coger el hábito de guardar una variable con el valor de un objeto jQuery nos evita realizar una serie de comprobaciones innecesarias y que en scripts pesados pueden suponer un aumento de rendimiento importante.

Seleccion poco eficiente de elementos:

			

	$('#traffic_light input.on).bind('click', function(){...});
	$('#traffic_light input.on).css('border', '3px dashed yellow');
	$('#traffic_light input.on).css('background-color', 'orange');
	$('#traffic_light input.on).fadeIn('slow');

Seleccion Eficiente de elementos:



	var $active_light = $('#traffic_light input.on');
	$active_light.bind('click', function(){...});
	$active_light.css('border', '3px dashed yellow');
	$active_light.css('background-color', 'orange');
	$active_light.fadeIn('slow');

Crear Objeto Global con resultados jQuery.. Si necesitamos utilizar una selección jQuery en diferentes funciones, se puede cachear en un objeto con ámbito global.

Ejemplo:



	// Define an object in the global scope (i.e. the window object)

	window.$my = {

              // Initialize all the queries you want to use more than once
              head : $('head'),
              traffic_light : $('#traffic_light'),
              traffic_button : $('#traffic_button')
	};

	function do_something() {

              // Now you can reference the stored results and manipulate them
              var script = document.createElement('script');

              $my.head.append(script);
              // When working inside functions, continue to save jQuery results

              // to your global container.
              $my.cool_results = $('#some_ul li');
              $my.other_results = $('#some_table td');

              // Use the global functions as you would a normal jQuery result
              $my.other_results.css('border-color', 'red');
              $my.traffic_light.css('border-color', 'green');
	}

Aprovechar el encadenamiento. El encadenamiento pese a producir un amasijo de código que no contribuye a mejorar la lectura del código hace que nuestro Javascript sea más ligero y puede ayudar a mejorar el rendimiento de nuestros scripts.
Ejemplo:
```
	var $active_light = $('#traffic_light input.on');
	
	$active_light.bind('click', function(){...})
		.css('border', '3px dashed yellow')
		.css('background-color', 'orange')
		.fadeIn('slow');
```
Usar subqueries siempre que se pueda. Si debemos realizar varias búsquedas sobre un elemento es altamente recomendable realizar un uso intensivo del método find() de jQuery para realizar las búsquedas. Mejoraremos el tiempo de respuesta al evitarnos búsquedas previas ya realizadas.
Ejemplo:
```
	var $traffic_light = $('#traffic_light'),
	$active_light = traffic_light.find('input.on'),
	$inactive_lights = $traffic_light.find('input.off');
```

Limitar la manipulación directa del DOM. La idea general es crear exactamente lo que necesitas en memoria y luego actualizar el DOM

Si necesitas crear una lista de elementos, en vez de :

			
 
	var top_100_list = [...], // assume this has 100 unique strings
	$mylist = $('#mylist'); // jQuery selects our <ul> element

	for (var i=0, l=top_100_list.length; i<l; i++) {
		$mylist.append('<li>' + top_100_list[i] + '</li>');
	}

Creamos la lista de elementos en un string antes de insertarlo en el DOM



	var top_100_list = [...], // assume this has 100 unique strings
	$mylist = $('#mylist'), // jQuery selects our <ul> element
	top_100_li = ""; // This will store our list items
	
	for (var i=0, l=top_100_list.length; i<l; i++) {
		top_100_li += '<li>' + top_100_list[i] + '</li>';
	}

	$mylist.html(top_100_li);

Usar JSON. Para guardar estructuras de datos o enviar/recibir estructuras de datos via AJAX mejor JSON que XML

Y hasta aqui la segunda parte y el final de la serie de consejos y buenas practicas para desarrollo con Javascript y jQuery.

¿Que te han parecido los puntos aqui comentados? ¿Algun punto que creas que falta en esta lista?.

Enlaces y más

Leer Javascript y jQuery: Consejos y Buenas Practicas (Parte II) en Pixelovers

Enlaces de la semana (semana 5 de 2010)

jorgecasar — Sun, 07 Feb 2010 16:40:00 +0100

Comenza febrero y con ello inauguramos una nueva sección el en blog "Enlaces de la semana", en la que haremos un resumen de todos los enlaces que hemos ido poniendo en twitter (@pixelovers) y en la página Pixelovers en Facebook.

Javascript

Código Konami en Javascript - http://bit.ly/a3Tm22.
Rich-Text Editors for 2010 and Beyond - http://bit.ly/b4BOEf.
The jQuery Cross-Domain Ajax Guide - http://bit.ly/aRfhU9.
10 funciones imprescindibles en Javascript - http://bit.ly/9VSGg8 | No va a ser todo jQuery. Funciones muy útiles en Javascript nativo.
Hovertip, plugin de jQuery para tooltips - http://bit.ly/cuFGl4 | El mas ligero y completo que hemos encontrado hasta la fecha.

CSS

Pure CSS bar charts as a simple API - http://bit.ly/aHS4AQ.

HTML

Nuevos campos de formulario en HTML5 - http://bit.ly/9ACgbU.

Diseño

MagazineXpert, publicación para la comunidad hispanohablante de tecnologías y aplicaciones Adobe - http://bit.ly/cXaZP5.
A Set Of User Interface Design Elements (PSD) - http://bit.ly/d2Lg1V | Control buttons, info boxes, breadcrumbs, forms, scrollbars & more.
Color Theory for Designers, Part 1: The Meaning of Color - http://bit.ly/9ixnJb | Smashing Magazine.
Color Theory For Designers, Part 2: Understanding Concepts And Terminology - http://bit.ly/asn06E | Smashing Magazine.
100+ Seamless Patterns Great for Creating Website Backgrounds - http://bit.ly/a9JoCE.
Beautiful Free Vector Downloads Roundup - http://bit.ly/9jQ8o8.

Utilidades web

Using firebug lite on Google Chrome. Originaly made by Firebug Team - http://bit.ly/doKjxi.
How to Use sIFR 3 - http://bit.ly/dlGflM | Video explicativo de este sistema que te permite usar cualquier fuente en la web
Best Practices To Develop Perfect Websites for iPhone and Mobile Devices - http://bit.ly/bFzPDd

Espero que os resulten interesantes y si queréis descubrir estos enaces antes siguenes en Twitter @pixelovers y hazte fan de la página Pixelovers en Facebook.

Leer Enlaces de la semana (semana 5 de 2010) en Pixelovers

Nuevos campos de formulario en HTML5

jorgecasar — Mon, 01 Feb 2010 21:38:00 +0100

Leo en anieto2k todo lo que necesitamos saber sobre los formularios HTML5, un artículo de Dive into HTML5 titlulado A Form of Madness. Habla de atributos y valores de atributos ya existentes, que abren un nuevo mundo alrededor de los formularios. Desafortunadamente no lo soportan casi ningún navegador, pero poco a poco todos van implementándolo.

Actualización: Como nos indica neiker, en Buffer Overflow encontramos una review en castellano sobre HTML5: Novedades en los formularios.

Leer Nuevos campos de formulario en HTML5 en Pixelovers

jQuery 1.4: 15 nuevas caracter�sticas que debes conocer

jorgecasar — Mon, 25 Jan 2010 15:30:00 +0100

Estamos preparando un análisis de la nueva versión jQuery 1.4. Pero mientras la probamos y estudiamos las nuevas funcionalidades, leo en Intenta un interesante artículo sobre jQuery 1.4 Released: The 15 New Features you Must Know. ¿Conoces ya estas nuevas características?

Pasar atributos a jQuery(...) – jQuery( html, propiedades )
¡Tódo "hasta que"! – .nextUntil([ selector ]), .prevUntil([ selector ]) y .parentsUntil([ selector ])
Enlazar múltiples controladores de eventos – .bind( eventos )
Per-property-easing (Facilitando por propiedad) – .animate(propiedades, opciones)
¡Nuevos eventos live! – .live("submit|change|focusin|focusout", controlador)
Control del contexto de una función – jQuery.proxy(función, contexto)
Demora una cola de Animación – .delay(duración, [ nombre de la cola ])
Comprobar si un elemento tiene algo – .has(selector) y jQuery.contains(contenedor, contenido)
Desenvolver elementos – .unwrap()
Eliminar elementos sin borrar datos – .detach([ selector ])
Mejoras en index(...) – .index(selector)
Los métodos de manipulación DOM aceptan "callbacks":
- after
- before
- append
- prepend
- addClass
- toggleClass
- removeClass
- wrap
- wrapAll
- wrapInner
- val
- text
- replaceWith
- css
- attr
- html
Determinar el tipo del objeto – jQuery.isPlainObject(objeto) y jQuery.isEmptyObject(objeto)
Mejoras en Closest(...) – .closest(selector, [ contexto ])
Nuevos eventos! focusIn y focusOut – .focusin(manejador) y .focusout(manejador)

Leer jQuery 1.4: 15 nuevas caracter�sticas que debes conocer en Pixelovers