Es un nuevo servicio de Google que permite ver una imagen de la web antes de salir de Google para ir a la página. Además esta imagen no será una simple captura, sino que incluirá ciertas anotaciones de Google como las keywords más representativas de la búsqueda.

¿Quién tiene acceso?

Pues de momento usuarios de Google de Estados Unidos, Francia, Alemania, Italia, Rusia y España. Evidentemente como pasa con casi todas las mejoras en Google se ampliará a todos los países. Tiempo al tiempo.

Además esta mejora sólo se puede ver si se está usando Chrome 5+, Firefox 3, Safari 5 (Mac) e IE 8+. Aprovecho para recordarte, querido lector, que si estás usando IE6 deberías actualizar ya! =)

De momento sólo está disponible para ordenadores, y no dispositivos móviles, pero como pasó con Instant la mejora no se tardará en llevar a estos medios.

¿Quieres verlo en funcionamiento?

Puedes acceder a la página de Google si estás en uno de los países antes listados o ver un vídeo que lo demuestra:

Ten en cuenta que no afectará al ránking de Google, así que los expertos en SEO que me estén leyendo pueden respirar tranquilos.

Tutoriales / Artículos

• Completo tutorial sobre como hacer un wireframe, con una presentación y audio incluido: Link.
• Artículo sobre cómo hacer un wireframe, pero desde una perspectiva más general: Link.
• Ciertos puntos clave del uso de wireframes: Link.
• Reunión por Smashing Magazine de algunos artículos (y recursos) sobre los wireframes: Link.
• Colección de excelentes wireframes. Link.

Herramientas para hacer wireframes

Pencil (addon para Firefox)

Mockflow (App Web)

Cacoo (App Web)

Omnigraffle (Mac)

Balsamiq Mockups (App Web y Escritorio)

Mockingbird (App Web)

iPlotz (App Web y Escritorio)

Protoshare (App Web)

Qué es un wireframe

¿Sabes esos esquemas en formas de garabatos que sueles hacer antes de plantear un diseño o una idea? Pues tienen un nombre, wireframes.Un wireframe no es más que un esquema o croquis donde exponer de manera simplificada una serie de ideas, un diseño o una serie de datos que nos pueden ser útiles. Lo cierto es que dicho así puede sonar un poco rollo su uso es facilísimo y tiene una utilidad sorprendente. Veamos algunas de las más comunes:

• Distribución de elementos en un diseño
• Jerarquía de un sitio web o aplicación
• Representación de eventos en interfaces
• Etc…

Es cierto que de toda la vida existen los wireframes en papel pero con el uso de las nuevas tecnologías realmente podemos mejorar y agilizar su uso.

Claves para hacer un buen wireframe

Capta lo simple

El objetivo de un wireframe es esquematizar, hacernos una idea. No es un diseño que va a ser pasado a HTML, no es un PSD con un nivel de detalle suficiente para ser exportado o impreso en un trabajo final, es simplemente un esquema.

Usa anotaciones

Uses la herramienta que uses siempre podrás tener la posibilidad de añadir anotaciones, bien en post-its (si estás trabajando en papel) o bien en bocadillos al margen (si estás trabajando con un programa). En cualquier caso las anotaciones te ayudarán a explicar mejor la organización de lo realizado y a recordar ciertos puntos clave para el diseño.

Divide en varios wireframes

No hace falta que un mismo wireframe incluya toda la información o todas las partes del diseño que queremos representar, no hay problema en hacer varios y luego unirlos con un clip o componer un PDF con todos ellos. Seguro que te ayudará.

Documenta

Como pasa con el código es bueno documentar. En este caso se trata más bien de organizar los esquemas en carpetas físicas o digitales, pero tener un registro de cada parte del proyecto o de los diseños posibles para no perder ninguno y poder acceder a ellos si es necesario.

Elige la herramienta adecuada

Hay multitud de herramientas en el mercado para todos los gustos. La más barata y próxima es tu bolígrafo favorito y un folio, pero hay software realmente potente que nos puede ayudar mucho. En el próximo post sobre wireframes mostraré algunas alternativas y la que uso personalmente.

Ejemplos gráficos de wireframes

Wireframes en papel

Wireframes digitales

Diacode

Diacode es el nombre de la start-up que he creado junto con un socio y a partir de ahora PolarGeek pertenece como un proyecto más a nuestra empresa. Eso significa que a partir de ahora tendréis 2 o 3 artículos semanales y un logo de la empresa en la página.

Espero que se ahora en adelante tanto PolarGeek como Diacode crezcan de la mano y todos salgamos beneficiados aprendiendo cada día más sobre desarrollo web. Podéis ver nuestra página en http://diacode.com y nuestro Facebook en http://facebook.com/diacode. Bienvenidos a la nueva etapa de PolarGeek.

Foto de shinnygogo

PHP y su entorno

PHP y el servidor

Lo primero que debemos aprender es qué es PHP y que papel tiene en el desarollo web. Pues bien, PHP es un lenguaje de programación de uso gratuito y del lado del servidor, esto significa que haremos programas para que se ejecuten en un servidor, cuando alguien, normalmente un navegador, nos pida o envíe datos.

Para entenderlo mejor echa un vistazo al siguiente esquema, que muestra una petición GET:

Pues bien, nuestros scripts estarán en el lado de la derecha, de tal forma que normalmente se pedirán a raíz de una petición, como he dicho antes.

Influencias de PHP

La sintaxis es muy similar a la C, así que si sabes este lenguaje tienes mucho ganado, por supuesto también si sabes Java, ya que también tiene la sintaxis similar a C.

Además de C, PHP tiene muchas influencias, una de ellas y la más notable desde el principio es que las variables tengan un símbolo de dólar ($) al principio, pues bien, esto viene de Perl. Otros que de los que deriva son Python o C++, pero no te preocupes porque iremos paso a paso sobre todo.

Tipo de lenguaje

Si sabes otros lenguajes probablemente te ayude a su aprendizaje saber que PHP es un lenguaje multiparadigma, soportando la orientación a objetos y la programación imperativa. Si no sabes lo que estos palabros significan no te preocupes por ahora, paso a paso irás entendiendo lo que esto implica para nosotros como desarrolladores.

Instalación de PHP

Bueno queremos programar en PHP pero primero tendremos que instalarlo. Para ello veamos distintos tipos de sistemas operativos y cómo instalarlo en cada uno de ellos.

Windows

Descargar el programa WAMP de aquí. Recuerda que no solo estás instalando PHP sino también Apache y MySQL, necesario el primero para PHP y el segundo necesario para el caso de que utilicemos bases de datos, que también lo haremos.

Si no te gusta esta opción y quieres instalarlo a mano, aquí tienes una excelente guía paso a paso que estoy seguro te ayudará.

Mac

Para Mac existe una solución similar a WAMP llamada MAMP (las siglas son Mac | Apache | MySQL | PHP). A modo de curiosidad cuando veas ofertas para programadores LAMP están pidiendo gente que sea capaz de majer Apache, Linux, MySQL y PHP o Python, aunque esto último es menos común.

Pero volviendo al asunto que nos ocupa, la aplicación la puedes descargar de la página oficial de MAMP, cuenta con una versión gratuita y otra de pago, pero en general la gratuita suele ser suficiente.

Linux y otros entornos Unix

En estos entornos normalmente los documentos que servirá Apache estarán en /var/www, a diferencia de Windows y Mac que viene marcado por el programa de instalación que hayamos usado. En cualquier caso suele ser configurable así que no importa demasiado, pero debes tenerlo en cuenta para alojar tus scripts de PHP que haremos más adelante.

Para los usuarios de Ubuntu/Debian, que suelen ser la mayoría os dejo este tutorial, también genial explicado.

Y para los que no usáis una distribución basada en Debian, pues aquí tenís cómo instalarlo en Fedora.

Haciendo nuestro primer script

Hagamos ahora el script más sencillo del mundo, si, es un hola mundo. Para ello cremos un archivo vacío de texto normal y ponemos la etiqueta de inicio y de fin de PHP, quedando:

<?php
  //Código
?>

Ahora mostramos un mensaje por pantalla, con echo, que saca el string que le demos por la salida estándar, en este caso el html que muestra el navegador.

<?php
  echo 'Hola Mundo';
?>

Pues con esto en un archivo, lo guardamos como index.php, por ejemplo y lo ponemos en el directorio que en Apache hayamos configurado, esto depende del sistema operativo y la forma de instalarlo así que no hay un sitio fijo para todos, pero seguro que en el programa que hayas usado te viene. En Mac, con MAMP suele estar en Sites, bajo la carpeta de usuario.

Sólo es el comienzo

Bien ya podemos hacer scripts en PHP y que funcionen y además no tendremos problemas para conectarnos con MySQL si has seguido las instrucciones de los posts. A partir de ahora aprenderemos PHP íntegramente sin preocuparnos demasiado por el entorno. Espero que te sea útil, y si es así házmelo saber en los comentarios, nos queda un largo camino por delante. Un saludo.

HTML5 y CSS3 han venido para quedarse, pero como una adopción se tarda un poco en el papeleo. Así que hasta que los navegadores no interpreten las etiquetas y estilos en su mayoría, casi no se puede desarrollar para el pequeño sector que tiene los últimos navegadores.

Aquí tenemos un listado de páginas y aplicaciones web diseñadas integramente con HTML5 y/o CSS3 (a veces también con javascript), así que es aconsejable que los veas con Chrome/Safari en su mayoría.

Partículas (Liquid Particles)

Efecto muy bueno con partículas, que se juntan y separan según movamos el ratón o hagamos click. Hace falta un poco de matemáticas para programar esto.

Vinilos con CSS3

Bonito efecto que saca el vinilo del sobre cuando pasamos el ratón por encima.

Mesa con Polaroids

Demo interactivo con un conjunto de fotos que se pueden mover, ampliar y reducir.

Spread

Animación con extensiones partiendo de una raiz.

Caja de Google

Caja de búsqueda pero de verdad, con efecto 3D y si buscas la caja se abre para que veas los resultados.

Etcha

Juego basado en el famoso aparato para dibujar con el que más de uno se ha visto negro para dibujar líneas diagonales.

Árbol de plasma

Efecto de plasma que se abriendo en forma de árbol. Haciendo click empiezan a crecer nuevos árboles.

Partículas Magnéticas

Efecto usando canvas y JavaScript para crear un efecto de magnetismo con raíz en un núcleo.

Conversión de Video a ASCII en tiempo real

Efecto de conversión de vídeo a ASCII, usando HTML5 y canvas.

Acuario

Acuario creado completamente con Javascript. ¡No pinchéis demasiado que asustaréis a los peces!

Simulador de Ropa Tendida

Probablemente el más impactante sin usar colores, por el detalle del comportamiento a nivel físico de la “ropa”.

Juego Anigma

Juego realizado con CSS3, también se usa la etiqueta audio para el sonido. Es bastante adictivo así que si estás ahora mismo trabajando no te lo recomiendo.

Piscina de Bolas

Original experimento con canvas para tener un conjunto de bolas que rebotan, se mueven e interactuan apartándose unas a otras

Ola con Canvas

Efecto ola con canvas, configurable con distintas opciones como la amplitud, la longitud, el ancho…etc.

Sistema Solar

Emulación del sistema solar con explicaciones de cada planeta, ver en Chrome o Safari para disfrutar del efecto.

Tiempo Real

Es la idea detrás de SmallTalk, donde la sobre un mapa de USA, se tienen los tweets relativos al tiempo en la zona.

Parallax

Efecto de movimiento con varias capas, utilizado a veces en las cabeceras de webs.

Animación de texto con partículas

Un efecto bastante chulo con un texto configurable usando canvas y javascript, por supuesto.

Visualizador de moléculas

Visualizador de moléculas usando también canvas principalmente, con efecto 3D. Puedes ver como está formada la cocaína o el colesterol, por poner un par de ejemplos famosos.

Reproductor hecho con CSS3

Reproductor realizado con CSS3, no tiene funcionalidad, pero lo importante aquí es que no se utiliza una imagen sino propiedas CSS3.

Más aplicaciones

• Chrome Experiments
• Aplicaciones en menos de 10K (concurso abierto)

Si conoces algún sitio más coméntalo y lo añado a la lista.

¿Para qué sirve un plugin de jQuery?

Antes que nada, tenemos que saber para qué nos sirve hacer un plugin y por qué tiene ventajas sobre hacer un par de funciones, por ejemplo. Lo primero que debemos recordar es que plug in significa conectar, es decir, haremos algo que luego podremos conectar a distintos sitios.

Teniendo esto en mente, nos podemos imaginar el plugin como una caja negra, que hará algo y nos devolverá el resultado (o realizará una acción simplemente).

Por tanto un plugin tendrá la posibilidad de aceptar una entrada y producir un resultado, y esta “caja” que se ve en el esquema se podrá llevar a cualquier proyecto, sin ninguna modificación, aceptando allí otra salida. Esa es la clave de los plugin, que son reutilizables en cualquier sitio, sin tener que preocuparnos por cómo está hecho ni siquiera, simplemente “conectándolo” e invocándolo con datos de entrada.

Además, la invocación de este plugin será la misma que hacemos cuando usamos cualquier método de jQuery:

$('#caja').acortar( ); //acortar será el nombre del plugin

Nuestro primer plugin

Qué vamos a hacer

Este plugin reducirá el texto en una caja, y con un click en un enlace lo expandirá. Así de simple, aunque como veremos después la implementación va a ser un pelín más larga de lo que debería para ser nuestro primer plugin, pero sin problema, poco a poco lo haremos. Si te quedan dudas sobre qué vamos a hacer tienes un enlace al demo aquí y al final del post.

Primeros pasos al construir un plugin

Cuando se construye un plugin hay una serie de pasos generales, que se hacen para todos los plugin que construyamos y que son los siguientes:

Declaración del plugin

El primer paso al hacer un plugin es declararlo, extender la serie de métodos que tiene jQuery originalmente. Para ello escribimos lo siguiente:

1
2
3
4
5
6

(function($){
  $.fn.acortar = function() {
     return this.each(function() {
     });
  };
})(jQuery);

Línea 1. Pasamos a nuestra declaración “jQuery”, el objeto, de tal forma que lo podemos usar como $, sin que interfiera con otras librerías.

Línea 2. Extendemos el objeto jQuery con nuevo método llamado acortar.

Línea 3. Recorremos todos los objetos que se le pasen a nuestro plugin. Recordemos que un selector puede seleccionar varios elementos, como todos los h1, por ejemplo. Aquí los recorremos y aplicamos la función que hagamos en nuestro plugin a cada uno de ellos.

Esto lo vamos a tener que hacer para todos los plugins que programemos, así que intenta entederlo bien. Lógicamente, cambiaremos el nombre dependiendo del plugin, en este caso lo llamaremos “acortar”.

Parámetros que aceptaremos como opciones del plugin

Casi todos los plugin tienen opciones, si estamos realizando un plugin que acorte el texto de una caja para que no se vea tan grande algunos parámetros que tenemos que permitir configurar al usuario pueden ser los siguientes:

• nCaracteres: Número de caracteres a mostrar. Ocultaremos el resto.
• nExtra: Para evitar acortar un texto sólo por unos caracteres. El número exacto es este parámetro.
• textoSuspense: String que se mostrará para hacer notar que hay más texto.
• textoContraer: Texto mostrado como link para contraer.
• linkExpandir: Texto mostrado como link para expandir

Así el usuario podrá personalizar el plugin sin tener que preocuparse de cómo está hecho por dentro. Empecemos por procesar la entrada:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(function($){
  $.fn.acortar = function(opciones) {
 
	var parametrosPorDefecto = {
	  nCaracteres: 300,
	  nExtra: 20,
	  textoSuspense: '...',
	  textoContraer: 'Contrae',
	  linkExpandir: 'Click para Expandir'
	};                   
 
    var opciones = $.extend(parametrosPorDefecto, opciones);
    return this.each(function() {
    });
  };
})(jQuery);

Por tanto cuando tengamos que acceder a uno de los parámetros de entrada haremos, por ejemplo, opciones.nExtra, así de simple.

Copiar el objeto que nos pasan a variable local

Cuando nos metemos en el bucle each, que puedes ver en la última sección de código, estamos procesando todos los elementos que han sido seleccionados al llamar el plugin. En ese preciso momento, cuando empezamos el bucle con un objeto, el objeto seleccionado está en la palabra reservada this, así que debemos guardarlo para referirnos siempre a él y no liarla cuando cambiemos el contexto (scope).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(function($){
  $.fn.acortar = function(opciones) {
 
	var parametrosPorDefecto = {
	  nCaracteres: 300,
	  nExtra: 20,
	  textoSuspense: '...',
	  textoContraer: 'Contrae',
	  linkExpandir: 'Click para Expandir'
	};                    
 
    var opciones = $.extend(parametrosPorDefecto, opciones);
 
	return this.each(function() {         
	  objeto = $(this);  
    });
  };
})(jQuery);

Implementando nuestro plugin

Bien, ya tenemos lo que queremos hacer, qué vamos a permitirle al usuario y cómo declarar el plugin. Empecemos ahora a implementar la funcionalidad en sí de éste. Esto por supuesto es propio de cada uno, así que intentaré no pararme demasiado en esta parte, porque, al fin y al cabo, ya sabemos crear un plugin genérico y la dificultad del resto dependerá de lo que queramos hacer.

Procesar texto

En este punto necesitamos ver si realmente tenemos que acortar el texto porque sobrepasa lo permitido (dado por el parámetro nCaracteres) y si es así ejecutamos toda la funcionalidad del plugin. A partir de aquí consideremos que estamos dentro del bucle que hemos mencionado antes (a partir de la línea 12 del último código). Veremos hasta los puntos suspensivos, dónde empezaremos en el siguiente punto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

var texto = objeto.html();
var longitudPermitida = opciones.nCaracteres + opciones.nExtra;
 
//Si tenemos un texto más corto no tenemos que hacer nada
if (texto.length > longitudPermitida) {
  var lugarCorte = texto.indexOf(' ', opciones.nCaracteres);
  if (lugarCorte != -1) {
    //Sacamos el texto hasta el lugar de corte
    var str1 = texto.substring(0,lugarCorte); 
 
	//Sacamos el resto del texto, que vamos a esconder
  	var str2 = texto.substring(lugarCorte,texto.length - 1);
 
	//Por último insertamos el enlace para ver más texto
	objeto.html(str1 + '<a href="#" class="textoSuspense">' + 
				opciones.textoSuspense + '</a>' + 
				'<span class="oculto">' + str2 + '</span>');
 
	//Ocultamos el resto con el método hide de jQuery
	$.find('.oculto').hide('fast'); 
 
	//Enlace para expandir o contraer el texto
    objeto.append(
	  '<div class="clearboth">' +
	    '<a href="#" class="anchorTexto">' + opciones.linkExpandir + '</a>' +
	  '</div>'
    );                                                                                      
//...
}

Ahora, sigamos en el siguiente apartado por donde están los puntos suspensivos (ya queda poco).

Manejando el evento onClick para ampliar o reducir el texto

Lo que falta por hacer es manejar que cuando se le da al link para ver más efectivamente se vea el resto del texto, además de que el texto se oculte. Hagamos esto entonces:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// ... Lo anterior ...
 
var ControlLink = $('.anchorTexto', objeto);
var restoTexto = $('.oculto', objeto);
var suspense = $('.textoSuspense', objeto);
 
ControlLink.click(function() {
  if(ControlLink.text() == opciones.linkExpandir) {
    restoTexto.show('normal');
    ControlLink.text(opciones.textoContraer);
    suspense.css("display", "none");
  } else {
    restoTexto.hide('normal');
    ControlLink.text(opciones.linkExpandir);
    suspense.css("display", "inline");
  }
  return false;
}); 
 
// ... Cierre de llaves abiertas antes....

En esta última parte vemos si tenemos el texto oculto o no. Y si está abierto cambiamos el texto al hacer click y lo ocultamos. Y viceveras si es al revés. Recuerda que estamos controlando el evento click en el enlace para expandir o contraer el texto, simplemento eso.

Recapitulación

Y eso es todo, hemos creado nuestro plugin que realmente funciona haciendo algo y además es configurable hasta cierto punto. Para llamarlo (puedes ver el código en el ejemplo) haremos lo siguiente, como hemos dicho al principio:

<script type="text/javascript" language="Javascript">
  $('#1').acortar({
  	nCaracteres: 300,
  	nExtra: 20,
  	textoSuspense: '...',
  	textoContraer: 'Contrae',
  	linkExpandir: 'Click para Expandir'
  });
</script>

Estos son los parámetros por defecto, por tanto si se los pasamos no pasa nada, pero es sólo un ejemplo, puedes pasarle otros.

Conclusiones

Por último destacar que lo más importante es que te quedes con cómo se construye cualquier plugin, más que con la implementación en concreto que hemos realizado. Aquí dejo los sitios que han ayudado a este post, sobre todo el de Jeremy Martin, de donde he sacado la idea del plugin y lo he modificada y separado para que sea más entendible.

• Blog de Jeremy Martin | Plugin original.
• Explicación del Core de jQuery | Documentación oficial.
• Autor de la “caja” | DevianArt

1. Entender qué es CSS

Lo más importante es entender la esencia de CSS (Cascading Style Sheets), hojas de estilo en cascada, y la palabra clave aquí es cascada. Esto implica que los estilos se aplican desde el elemento que lo definimos hacia todos los hijos:

Esta imagen de SitePoint representa una página web muy simple, pero muestra claramente lo que es para el navegador úna página web: un árbol. En concreto se llama DOM, aunque tiene muchos detalles, nos sirve para entender que cuando aplicamos un estilo a body, por ejemplo, tanto h1 como p se ven afectados si ese estilo es aplicable para esos elementos.

2. Evita usar demasiadas clases

Cuando estés diseñando probablemente solo veas clases y más clases posibles por todos lados, pero a veces no es necesario usando selectores más sencillos. Echemos un vistazo al siguiente HTML y CSS aplicado:

1
2
3
4

<div id="principal">
	<h1 class="titulo">Título</h1>
	<p class="parrafo">Texto ejemplo</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

#principal {
	margin: 0 auto;
	width: 960px;
}	             
 
#principal .titulo {
	font-size: 16px;
}                   
 
#principal .parrafo {
	margin-top: 10px;
}

La primera tentación al dar estilos puede ser algo como eso, pues bien, si nos damos cuenta no es necesario el uso de clases, reduciendo así la complejidad de nuestro HTML. Quedaría algo más sencillo:

1
2
3
4

<div id="principal">
	<h1>Título</h1>
	<p>Texto ejemplo</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

#principal {
	margin: 0 auto;
	width: 960px;
}	             
 
#principal h1 {
	font-size: 16px;
}                   
 
#principal p {
	margin-top: 10px;
}

3. Primero estructura HTML, después CSS

Es preferible empezar por crear la estructura HTML de las páginas que vayamos a maquetar, porque eso facilitará enormemente después el proceso de darle estilos. Una vez que se ha creado un esquema de cómo va a ser la página se puede identificar qué elementos tendrán un id, o una clase…etc.

4. Usa Reset CSS

Muchos navegadores modifican los estilos por defecto por distintas razones, como que cuando veas una imagen no se junte con la ventana, para evitarlo podemos usar una serie de propiedades CSS que hagan que todos los navegadores tengan los mismos estilos por defecto, en esta página puedes encontrar uno de ellos, aunque hay muchos más.

5. Da información al principio del CSS

Puedes usar un comentario como plantilla para ponerlo en todos los archivos CSS, de tal forma que otros desarrolladores puedan ver lo que tenías en mente cuando lo estabas escribiendo. Algo como esto:

1
2
3
4
5
6
7
8
9
10

/*---------------------------------------------------------------
- Nombre:				style.css
- Ultima actualización:			23/07/10
- Website:				www.polargeek.net
- Autor:				José
== ESTRUCTURA ===================================================
- Ancho mínimo:				980px
- Columnas:				2
- Posición cuerpo:			Centrado
---------------------------------------------------------------*/

Este es sólo un ejemplo, puedes incluir las secciones que consideres oportunas, si estás pensando ahora mismo en si esto haría que el archivo ocupara más y la carga de la página fuera más lenta te doy la enhorabuena porque es el primer paso para mejorar la carga. Vamos al siguiente punto.

6. Los estándares promueven el desarrollo

Seamos francos, IE es uno de los principales lastres para el desarrollo de la Web, pero nosotros, como desarrolladores, deberíamos validar nuestras páginas para saber que realmente estamos cumpliendo los estándares y usando apropiadamente este lenguaje de marcado.

Es cierto que a veces, por el simple hecho de usar CSS 3 no podemos validar, pero cuando no lo uses deberías hacerlo.

7. No uses hacks de CSS

Todos sabemos que hacer una página cross-browser es muy tedioso y solemos intentar terminarlo lo antes posible, pero usando hacks en CSS lo único que conseguimos es tener un código más difícil de mantener y que puede fallar en un futuro más próximo de lo que cabría esperar.

Si se quiere usar unos estilos en concreto para un navegador es mejor usar un CSS específico e incluirlo con un comentario condicional.

8. Evita estilos en el HTML

Prácticamente siempre edita los estilos en un archivo CSS aparte, así mantendremos nuestro HTML más limpio.

Existen excepciones como los correos en formato HTML, donde no puedes enlazar un CSS y todos los estilos se deben poner en el HTML, pero salvo este caso y pocos más nunca se deben usar.

9. Combina selectores

Si varios elementos comparten estilos júntalos en una sola línea con comas, algo como:

1
2
3
4
5
6
7
8

#principal {
	margin: 12px;
	color: #5D5D5D;
}                
 
#comentario {
	margin: 12px;
}

Se podría quedar en esto:

1
2
3
4
5
6
7

#principal, #comentario {
	margin: 12px;
}                
 
#principal {
	color: #5D5D5D;  
}

Que se podría pensar que es trivial, pero nada más lejos de la realidad. Si tenemos 5 divs por toda nuestra página y en todos hemos decidido mantener un color naranja, cuando cambiemos el diseño y digamos que ahora estos divs van a ser negros, será mucho más fácil cambiarlo una vez que cinco.

10. Usa minúsculas en todo el CSS

Esta es una de las convenciones que se adoptan y que realmente favorecen a todos. Haciendo todo el CSS con minúsculas el archivo queda más limpio y unificado. Así que lo más acertado son las minúsculas, incluso para el nombre del archivo, pero esto ya va por gustos.

11. La navaja de Ockham es tu amiga

Para no liarnos con filosofía ahora, esto quiere decir que mientras más simple mejor. Siempre que quieras hacer algo que es común y no sepas cómo, busca por Google, porque probablemente haya un modo facil.

Por ejemplo, imaginemos que queremos centrar un div, pues con esta sencilla propiedad y definiendo el ancho quedaría centrado:

1
2
3
4

#principal {
	margin: 0 auto;
	width: 960px;
}

La razón es bien simple, le decimos al navegador que haga que en la izquierda y la derecha haya el mismo hueco, así que la única manera es poniéndolo en el centro (el 0 no es estrictamente necesario, sólo se refiere al margin-top y al margin-bottom a la vez).

12. Comenta el CSS

Como casi cada cosa que hagas en la vida (sobre todo profesional) se te olvidará los detalles al poco tiempo, así que es preferible comentar casi todo lo que no tengas claro en un principio y así te podrás acordar después cuando tengas que retocar el diseño.

13. Usa los selectores justos y necesarios

Intenta no abusar de los selectores, porque hacen que la renderización de la página sea más lenta, de hecho a partir de 3 selectores deberías empezar a replantearte hacerlo de otro modo. Echemos un vistazo a este código:

1
2
3

body div.central a span {
	color: orange;
}

Esto tarda mucho más que lo siguiente:

1
2
3

#link span {
	color: orange;
}

Y si el anchor que contiene el span tiene el id “link” hará exáctamente lo mismo, pero mucho más rápido.

14. Comprime tus archivos CSS

Cuando trabajes en un diseño es mejor mantener una versión de desarrollo, local, y otra comprimida en el servidor. Esto ahorrará tiempo de carga y ancho de banda.

Hay muchas herramientas a día de hoy para hacer esta tarea, personalmente uso Css Compressor, aunque puedes buscar la que más se ajuste a las necesidades. Al fin y al cabo todas tienen un objetivo común, y es quitar espacios innecesarios, comentarios, e incluso algunos te reordenan el CSS (cuidado con esto último que se pude liar).

La única desventaja a mi parecer que puede tener esto es que hay que hacerlo a mano, es decir, que tienes que copiar el CSS, llevarlo a alguna aplicación que haga el trabajo y pegar en el archivo final el resultado. Esto va a tener una solución por parte de Google no dentro de mucho, que va a comprimir el CSS automáticamente en el servidor sin tener que hacerlo nosotros, informáré cuando esté.

15. Los frameworks pueden ahorrarte mucho tiempo

Hay muchísimos frameworks CSS que pueden ayudarte, sobre todo, a empezar un nuevo diseño. Hay multitud de frameworks, quizá dos de los más famosos sean Blueprint y 960 Grid System. Vale la pena echarles un vistazo, aunque sólo sea por la cantidad de tiempo que pueden ahorrarte.

16. Intenta hacer secciones dentro del CSS

Para que la hoja de estilos quede aún más clara, suele ser bueno “separarla” con secciones, como:

1
2
3
4
5
6
7
8

/*Reset CSS*/
...
/*Header*/
...
/*Body*/ 
...
/*Footer*/
...

17. Usa propiedades que agrupen varias

También se suelen llamar “shorthand”, y nos permite reunir en una sola propiedad varias. Aquí puedes ver un ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12

#principal {
	margin-top: 12px;
	margin-rigth: 10px;
	margin-bottom: 8px;
	margin-left: 12px;
}	                  
 
/*Lo mismo que: */
 
#principal {
	margin: 12px 10px 8px 12px;
}

También hay otras, como font, padding, border…etc

18. El SEO está en el HTML no en el CSS

Cuando pienses en optimizaciones SEO para una página, tienes que tener en cuenta que lo importante es el HTML, no como se vea. Si tienes 10 elementos h1 y a cada uno le das un estilo para que parezcan h1, h2, h3 lo estás haciendo mal. Google no tendrá en cuenta eso, sino que realmente tienes 10 “titulares” en una misma página, lo cual no es muy lógico.

En este línea, pasa algo parecido con muchos textos, que se ocultan con CSS, pero en realidad no se ven. Algo que no le suele gustar a Google y se considera spam, en la mayoría de los casos. Por tanto si usas CSS para ocultar algo que está en el HTML lo estás haciendo mal.

19. Usa Sprites

Los sprites en CSS son un conjunto de imágenes puestas juntas en una sola imagen más grande, y en vez de poner las imágenes directamente en HTML, se seleccionan con la propiedad de CSS background-position, de tal forma que solo se tiene que mandar una imagen y se ahorra ancho de banda.

Además ahorra un problema un poco tonto, pero que personalmente no me gusta nada. Cuando hacemos hover sobre una imagen y esta debe cambiar pasa un rato hasta que se recibe la imagen. Si se usa un sprite la imagen ya estará en el cliente y no se tendrá que esperar.

20. Código sostenible = Código limpio

Esto se puede aplicar a todos los lenguajes, pero hablando de estilos con CSS, tenemos que tener en cuenta que si creamos un archivo de 300 líneas, algo bastante común, al menos tenemos que hacerlo fácil de leer. Por ejemplo:

1
2
3
4
5

.caja {
	color: #FFF;
	background-color: #000;
	width: 312px;
}

Queda mucho más limpio que:

1

.caja {color: #FFF; background-color: #000;width: 312px;}

Por supuesto que esto también va en gustos y que el segundo ocupa menos en bytes, pero como he dicho en el punto 14, es mejor comprimir el CSS en una versión y en otra tenerla sólo para nosotros donde trabajar y poner los comentarios que queramos sin preocuparnos de que después se verán.

Soporte HTML5 y ayuda crossbrowser

En esta versión contamos con ayuda en el editor de HTML para saber que navegadores soportan ciertas etiquetas salidas recientemente, además de la facilidad de sugerencia de tags con el que ya contábamos en versiones anteriores.

Integración con Git

Posibilidad de usar Git desde el propio Aptana, lo cual facilita bastante las cosas.

Terminal integrado

Acceso rápido a un terminal desde el que podemos hacer la mayoría de acciones que hacemos en un terminal normal, pero con la facilidad de que no tenemos que irnos a otra ventana, que al final es uno de los objetivos cuando se opta por un IDE para desarrollar.

Personalización del IDE

Posibilidad de crear scripts que facilitan ciertas acciones repetitivas como se ve en la imagen de la página oficial.

Debugger integrado para Ruby On Rails

Los desarrolladores que hacen uso de Ruby On Rails van a agradecer esta nueva característica que se equipara a los debuggers de PHP con los que contamos en casi todos los IDEs famosos a día de hoy.

Eclipse

No olvidemos que Aptana, como pasa con Zend Studio, se basa en Eclipse, por tanto también tenemos la posibilidad de usar las extensiones que existen para este IDE, que probablemente sea el más usado por todo tipo de desarrolladores de una forma u otra.

Vídeo y descarga

Sin más, os dejo con uno de los vídeos que nos desvelan más características de esta versión de Aptana.

Página Oficial de Aptana | Descarga de Aptana 3 (beta)

Javascript, como quizá ya he dicho alguna vez, es el lenguaje con mayor relación de uso y desconocimiento del mismo, y cuando falla, la gente se sorprende, a pesar de que hayan empezado a programar en JavaScript sin tener ni idea del asunto.

Aquí vemos una serie de buenas prácticas traidas de Google, en su mayoría, que nos aclararán muchas ideas y nos ayudarán a mejorar nuestro código.

Buenas prácticas

Uso de la palabra var

A pesar de que se puede declarar una variable dentro de una función sin var, no es recomendable, porque no está claro en que contexto podemos acceder a ella. De tal forma, que no hay colisiones de nombres entre diferentes variables.

Uso de punto y coma

Quizá no sepas que JavaScript tiene por defecto lo que se llama implicit insertion, esto significa que por defecto inserta punto y coma el solito antes de cada salto de línea. Esto, que en principio podría parecer bueno y cómodo se convierte en un auténtico dolor de cabeza en ciertos casos, como este:

1
2
3
4
5
6
7

MyClass.prototype.myMethod = function() {
  return 42;
} // Sin punto y coma
 
(function() {
  // Inicialización de variables aquí
})();

Declaramos un método (no nos paremos a lo de prototype, ya lo explicaré en otro post) y después usamos una función anónima, pues bien, a la función primera se le pasa la segunda como parámetro, ¿intuitivo al máximo verdad? Pues para evitarlo sólo tenemos que tener en mente que siempre tenemos que usar los puntos y comas cuando acabemos una línea.

Usar objetos para tipos primitivos

Si queremos tener una variable de tipo booleana, o de un tipo primitivo hacer esto puede liar bastante las cosas:

1
2
3
4

var x = new Boolean(false);
if (x) {
  alert('hi');
}

Intuitivamente pensaríamos que no se va a imprimir nada, pero lo cierto es que si ejecutas el código, verás el alert con el texto ‘hi’.

Por tanto cuando queramos iniciar una variable de tipo primitivo, como “Boolean”, debemos usar la siguiente sintaxis:

1
2
3
4

var x = Boolean(0);
if (x) {
  alert('hi');  
}

Y ahora no veremos el ‘hi’. De hecho si usamos el typeof para ver el tipo de datos que tenemos podemos comprobar que lo que estábamos creando antes no era un booleano, sino un objeto.

1
2

typeof Boolean(0) == 'boolean';
typeof new Boolean(0) == 'object';

Ambas son true, así que tienes que tener claro cuando estás haciendo una variable de tipo objeto y cuando del tipo primitivo boolean.

Los estándares se deben imponer

Usa funciones o métodos estándar antes que otros que no lo son, porque favoreceran la compatibilidad entre navegadores y tu código se podrá integrar en otros más fácilmente, por ejemplo es preferible usar string.charAt(3) que string[3].

Reglas de Estilo

En todo lenguaje hay una serie de buenas prácticas, pero también un cierto estilo que nos ayuda a poder entender mejor el código y a adquirir una serie de reglas que hacen que el código sea igual en estilos en cualquier lugar.

Nombres

Siempre todo junto y cuando son varias palabras pues con mayúsculas a partir de la segunda.

• Funciones: estoEsUnaFuncion
• Variables: estoEsUnaVariable
• Clases: estoEsUnaClase
• Enumerados: enumeradoTres
• Métodos: estoEsUnMetodo
• Constantes: ESTO_ES_UNA_CONSTANTE

Strings

Preferiblemente con ” (comillas simples) en vez con “” (comillas dobles), sobre todo de cara a que cuando escribimos HTML en un string, no tenemos que “escapar” las comillas.

Paréntesis

Solo cuando hagan falta, por ejemplo, no uses paréntesis en operadores como delete, typeof o void, o después de palabras reservadas como return, throw, case o new.

Se consciente de lo que es true o false

Uno de tantos problemas tontos con los que te encuentras cuando programas en JavaScript es asumir que ciertas cosas son verdaderas o falsas. Aquí tienes una lista:

1
2
3
4
5
6
7
8

null //false
undefined  //false
'' string vacío //false
0 como número //false
 
'0' cero como string  //true
[] array vacío  //true
{} objeto vacío  //true

Comenta con estilo

Cuando se comenta el código además de hacer la razón por la que hacemos algo tenemos la posibilidad de generar documentación a la vez de manera sencilla, siguiendo una serie de reglas. Google lo hace así, y muchos desarrolladores lo recomiendan, en concreto podemos usar JSDoc, y si todos lo hiciéramos sería más sencillo leer el código de otros y entenderlo, así que adelante con ello.

Más información

Tienes más consejos y buenas prácticas aquí, hay muchos más, solo he destacado los más importantes y relativamente fáciles de explicar para no irme mucho del tema.