Apuntes al Margen

El rol de JavaScript en el desarrollo web actual

Tue, 21 May 2013 00:00:00 -0300

Para hacer un sitio web interactivo, la primera idea que a la mayoría de los diseñadores y desarrolladores web se le viene a la cabeza es usar JavaScript (o buscar un plugin para jQuery), pero hoy en día muchos de estos componentes¹ se pueden resolver con CSS. Por otro lado, el backend era territorio exclusivo de PHP, Python y Ruby hasta la llegada de Node.js. Entonces, ¿para qué sirve JavaScript hoy?

JavaScript del lado del cliente

Con JavaScript podés enviar y recibir datos al servidor en segundo plano (asíncrono) y modificar el contenido de una página sin necesidad de recargarla. Tiene múltiples aplicaciones, por ej. podés ofrecerle al usuario sugerencias de búsqueda mientras escribe, en una red social podés enviarle alertas y notificaciones, en un sitio web de noticias podés actualizar información que cambia constantemente sin necesidad de interacción del usuario, etc.

HTML5 agregó diversas mejoras para formularios, que van desde nuevos tipos de inputs incluyendo selector de colores, de fecha y de números (spinner o slider) hasta validación de email, de números y campo requerido. Lamentablemente el soporte de los navegadores es todavía limitado, por ej. el selector de fecha sólo funciona en Opera y Safari para iOS, así que JavaScript es indicado para crear formularios con funcionalidades avanzadas.

Para aplicaciones web, además de los controles de formularios, con JavaScript podés implementar atajos del teclado, arrastrar y soltar, y trabajar sin conexión a Internet, tres características que antes eran exclusivas de las aplicaciones de escritorio.

Flash se usaba como reproductor de audio y video y para juegos. Hoy en día podés hacerlo con JavaScript. Para finalizar, con JavaScript podés hacer efectos visuales complejos, como el parallax, donde múltiples imágenes de fondo se mueven a diferente velocidad a medida que el usuario hace scroll.

JavaScript en el servidor

Podés usar Node.js para desarrollar íntegramente una aplicación web. El diseño del lenguaje es especialmente indicado para SPAs (aplicaciones de una página) y la web en tiempo real (por ej. chats).

JavaScript más allá de la web

Con PhoneGap podés crear aplicaciones híbridas, basadas en JavaScript, para Android, iOS, Windows Phone y otros. En la app store de Windows 8² podés distribuir aplicaciones basadas en JavaScript.

Conclusiones

JavaScript cambió mucho en los últimos años, por eso siempre es importante mantenerse al día. Con JavaScript hoy podés crear aplicaciones web bien estructuradas, rápidas, escalables y además las podés distribuir en tiendas de aplicaciones.

Un menú desplegable se puede hacer puramente en CSS usando :hover. Con el selector CSS :target se pueden hacer carruseles de imágenes y otros componentes.
↩
Create your first Windows Store app using JavaScript es un tutorial de programación de aplicaciones para Windows 8 en JS.
↩

Brackets vs Sublime Text

Mon, 20 May 2013 00:00:00 -0300

Anteriormente comparé Espresso vs Sublime Text y Sublime Text salió ganador, hoy se enfrenta a Brackets, el editor de código open-source de Adobe.

Round 1: UI y espacio de trabajo

Vista rápida de imágenes en Brackets. También disponible para colores y degradés.

Brackets

Brackets tiene 2 botones: desarrollo en vivo (rayo) e instalar extensión (lego).
Al igual que Espresso, los archivos abiertos están en el área de trabajo, arriba del árbol del proyecto en la barra lateral. La barra lateral se puede mostrar / ocultar con ⌘⇧H / CTRL + H.
Podés trabajar a pantalla completa o lado a lado junto con un navegador para desarrollar en vivo.
El tema por defecto es con fondo blanco ¡puaj!, podés instalar temas adicionales, aunque sólo encontré 2 disponibles :(

En términos generales, Brackets es sencillo y amigable con diseñadores.

Sublime Text

En comparación con Brackets, Sublime Text es mucho personalizable, podés mostrar/ocultar la barra lateral y el minimapa, disponer las pestañas en filas y columnas, instalar temas y esquemas de color, etc.
La archivos abiertos en pestañas funciona muy bien si ocultás la barra lateral.

Round 2: Características distintivas

Brackets

Brackets es un editor de código específico para desarrollo web front-end: HTML, CSS y JavaScript. Brackets está en desarrollo y las funcionalidades están en plena evolución. La versión que comento en este artículo es el sprint 24.

Brackets y Chrome conectados. Editando reglas CSS desde un HTML (⌘E).

Edición rápida: Presionando ⌘E / CTRL + E activás el modo edición rápida. Por ej. si estás en un archivo .html y tenés el cursor en una clase, id o etiqueta, podés editar rápido las reglas de estilo asociadas. En JavaScript podés editar una función desde un llamado a una función. Desde valores RGBa, HEX o HSLa (en cualquier tipo de archivo) podés invocar una interfaz de selector de color.
Desarrollo en vivo: Si desde un archivo HTML, presionás el botón desarrollo en vivo, Brackets abre el archivo en Chrome. Cuando editás el archivo CSS enlazado, instantáneamente ves los cambios en el navegador y te recuadra los elementos afectados. Si guardás un HTML o JS, recarga la previsualización en el navegador. La implementación no es perfecta, pero está bueno tener esta funcionalidad en el editor y no tener que recurrir a herramientas adicionales.
Vista rápida: Cuando pasás el mouse por arriba de un color, degradé o imagen, te la muestra en un popup (se puede desactivar), pero me sorprende que intentar abrir una imagen, da un error.
Documentación rápida: Presionando ⌘K / CTRL + K en las propiedades y valores CSS, podés acceder a la documentación en WebPlatform. Esta es una función muy útil para principiantes y podría serlo para todos si incorporara la documentación de JavaScript y sus librerías (jQuery, Backbone, etc.).

En HTML y CSS, las sugerencias de código son las estándar, para JavaScript usa Tern¹, que es un motor de análisis de código.

Como todas las aplicaciones, tiene accesos directos del teclado:

Presionando ⌘⇧O / CTRL + shift + O podés abrir un archivo.
Con ⌘T / CTRL + T podés saltar a la definición de un método en el archivo JS actual y con ⌘L / CTRL + G a un número de línea.

Sublime Text

Sublime Text soporta múltiple lenguajes incluyendo HTML, CSS, JavaScript, PHP, Python y Ruby.

Sublime Text tiene atajos del teclado para buscar, seleccionar y editar código y modificar el espacio de trabajo. Los más útiles son ir a cualquier cosa, la paleta de comandos y los cursores múltiples.

Sublime Text tiene además algunas características avanzadas:

Proyectos: Si trabajás en equipo, en Sublime Text podés configurar preferencias a nivel de proyecto, que sobreescriben las preferencias del usuario. No importa si un desarrollador es fanático de las tabs y otro de los espacios, con las configuraciones por proyectos, el código va a quedar consistente.
Builds: Con los builds podés ejecutar programas externos desde el editor, para que no tengas que ir y venir a la terminal. En desarrollo front-end podés aprovechar los builds para compilar Sass a CSS, CoffeScript a JavaScript, etc. cuando guardás los archivos.
Macros y Snippets: Con los macros podés automatizar una secuencia de comandos y los snippets son fragmentos de código. Son dos opciones para evitar tareas repetitivas.

Round 3: Extensiones

Instalación de una extensión en Brackets.

Brackets

En GitHub hay una lista de extensiones para Brackets organizadas por categoría. Una vez que encontraste la que querés, tenés que copiar y pegar la URL del archivo .zip o repositorio de GitHub en el cuadro de instalación.

Extensiones interesantes:

Emmet (aka ZenCoding): para mí es imprescindible para trabajar con HTML, nunca usaría un editor de código que no sea compatible con Emmet.
CanIUse: visor en línea sobre soporte a características HTML5/CSS3 de los navegadores.

Me preocupó no encontrar extensiones para Sass. Aunque no encontré información al respecto, según mis pruebas, Brackets reconoce los archivos de LESS y Sass, pero no los de Stylus. La función de “documentación rápida”, sin embargo, sólo funciona con CSS. También reconoce correctamente los archivos de CoffeeScript.

Documentación rápida en Brackets, desde WebPlatform.org disponible por ahora sólo para CSS.

Sublime Text

En Sublime Text con Package Control es super sencillo buscar, instalar y administrar extensiones.

Round 4: Otros detalles

Brackets

Brackets es lo mejor de los 2 mundos: un proyecto open-source administrado por Adobe².
Actualmente está en desarrollo y se actualiza con frecuencia.
Cuando abrís la aplicación por primera vez, te muestra una página “Primeros pasos con Brackets”. Me sorprendió gratamente que un proyecto que todavía no está “terminado” tenga ayuda y traducción al español y otros idiomas para facilitar la adopción.
Brackets es gratis, lo cual es obviamente un factor atractivo para estudiantes y para desarrolladores amateur.

Sublime Text

Según tengo entendido Sublime Text es desarrollado exclusivamente por Jon Skinner.
Es un editor maduro, la tercera versión se encuentra en beta (disponible para usuarios registrados).
Sublime Text cuesta US$ 70. Si trabajás, con un proyecto que completes para un cliente, o con un sueldo, deberías poder pagarlo, no estamos hablando de un software de miles de dólares.

Y el ganador es… ¡Sublime Text!

La edición rápida de Brackets es un modo de edición en contexto que no interrumpe el proceso creativo, es conceptualmente similar a lo que plantea Chris Granger en Light Table. Sin embargo, todavía no veo a Brackets como un reemplazo viable a Sublime Text, pero me encanta ver finalmente innovación en editores de código y por supuesto voy a seguir de cerca su desarrollo y actualizar este artículo cuando amerite.

TernJS también está disponible como plugin para Sublime Text.
↩
Lo más parecido que tiene actualmente Adobe a un editor de código es Dreamweaver, el último sobreviviente de la vieja Macromedia y me intriga saber qué tiene que decir Adobe sobre HTML.
↩

Teoría del color para diseñadores web

Wed, 15 May 2013 00:00:00 -0300

Si te dedicás al diseño web y/o al desarrollo front-end seguramente alguna vez usaste un selector de color, visitaste sitios como COLOURlovers o Kuler, o usaste una función de color de un pre-procesador de CSS, ¿pero sabés qué es un color complementario o cuál es la diferencia entre RGB y HSL?

Primero que nada, ¿qué es el color? El color es una percepción, o una interpretación visual del espectro electromagnético (luz) captado por el ojo humano. Como te habrás dado cuenta, en la oscuridad no vemos los colores.

En las artes visuales y el diseño, la teoría del color estudia la combinación de los colores y el efecto de dichas combinaciones.

Modelo de color RGB

Un modelo de color es un modelo matemático abstracto que describe cómo se representan los colores en números. RGB es el modelo usado en pantallas (televisores, monitores, etc.). Se lo llama aditivo porque la suma de luces rojas, verdes y azules genera los distintos colores.

Un espacio de color es un modelo de color más una punto blanco y una curva de corrección de gama. Los espacios de color más comunes son sRGB y Adobe RGB. Esto explica las diferencias entre los colores que ves en una aplicación de diseño que generalmente está usando un perfil de gestión del color y el navegador. Para diseño web, generalmente se recomienda que deshabilites la gestión de color en las aplicaciones de diseño. Los optimizadores de imágenes como ImageOptim eliminan los perfiles de color de las imágenes para disminuir el tamaño.

Los colores primarios¹ son colores perfectos imaginarios que no coinciden necesariamente con los productos reales disponibles en el mercado. Los colores efectivamente creados por un dispositivo se llaman gama. Para aumentar la gama, se puede agregar uno o más colores extras². Los primarios del modelo RGB se relacionan, pero no coinciden exactamente, con los conos sensitivos al color del ojo humano.

El modelo RGB tiene 2 notaciones:

Valores RGB (rojo, verde, azul): cada color se representa por 3 valores separados por comas en un rango del 0 al 255. Ej.: .esmeralda {color: rgb(0, 155, 119)}.
Valores HSL³ (matiz, saturación, luminosidad): Es una representación cilíndrica, donde la dimensión angular parte del rojo a 0º, pasa por el verde a 120º y el azul a 240º. El radio y la altura representan la saturación (de gris a todo color) y luminosidad (de negro a blanco).

En CSS3 para RGB y HSL podés definir un cuarto valor correspondiente al canal alfa que va desde el 0 (trasparente) al 1 (opaco), por ej. Ej.: .esmeralda-semi-transparente {color: hsla(166, 100%, 30%, .5)}.

En HTML, CSS, SVG, etc. también podés definir colores usando la notación hexadecimal que consiste en 3 pares de 2 dígitos para expresar las intensidades de los colores primarios RGB. Se usan los números del 1 al 9 y 6 letras A a la F. En la notación hexadecimal abreviada, #FF0 es equivalente a #FFFF00. Ej.: .esmeralda {color: #009B77}.

Por último, en CSS también podés definir los colores por su nombre⁴ y algunas palabras clave “especiales”: transparent (transparente) y currentColor (equivalente a color: inherint). Ej.: body {background-color: white}

RGB vs HSL

Con HSL y sobre todo con las funciones de color de Sass es fácil crear una paleta de colores a partir de un color base:

adjust-hue: cambia el matiz para generar un análogo, complementario, etc.
saturate y desaturate: ajusta la saturación. Por ej. una paleta “retro” es poco saturada.
darken y lighten: ajusta la luminosidad para una paleta monocromática.

Si a partir de un color, necesitás otro color más oscuro, para usar por ej. en el degradé en un botón, en RGB no es claro qué valores tenés que modificar, en HSL tenés que simplemente disminuir el tercer valor.

Armonías de color

Los esquemas de color tradicionales o armonías del color son combinaciones equilibradas⁵ que se basan en la posición de los colores en el círculo cromático. El círculo cromático se construye a partir de los colores primarios que generan colores secundarios y así sucesivamente.

Construcción del círculo cromático

Monocromático

La paleta de color monocromática consiste en un color y sus mezclas con blanco o negro. Es la más sencilla de crear, en el sentido de que es difícil crear una paleta monocromática “fea”. Es tranquila y elegante, pero como no hay contraste, no te sirve si necesitás destacar un elemento.

Esquema de color monocromático en Sass:

$color-base: hsl(166, 100%, 30%);

.muestra{
	.color-4{
		background-color: lighten($color-base, 10%);
	}
	.color-0{
		background-color: $color-base;
	}
	@for $i from 1 to 3{
		.color-#{$i}{
			background-color: darken($color-base, $i * 10%);
		}
	}
}

Análogo

La paleta de color análoga son tres colores adyacentes en un círculo cromático con 12 divisiones, preferentemento todos cálidos o todos fríos. Es una combinación que se suele encontrar en la naturaleza.

Esquema de color análogo en Sass:

$color-base: hsl(166, 100%, 30%);

.muestra{
	.color-0{
		background-color: $color-base;
	}
	.color-1{
		background-color: adjust-hue($color-base, 30);
	}
	.color-2{
		background-color: adjust-hue($color-base, -30);
	}
}

Complementario

Los complementarios están en lados opuestos del círculo cromático. Es la combinación más contrastante. Los colores complementarios (puros) cuando se ponen uno junto al otro producen un efecto óptico desagradable (vibran) y por lo tanto necesitan una barrera (blanco o negro) o un color intermedio que funcione como pasaje, o también podés desaturar al color frío.

Esquema de color complementario en Sass:

$color-base: hsl(166, 100%, 30%);

.muestra{
	.color-0{
		background-color: $color-base;
	}
	.color-1{
		background-color: complement($color-base);
	}
}

Complementario dividido es una variante, donde sustituís un complementario por sus 2 análogos, mantiene el contraste visual del esquema complementario, pero con menos tensión. Después de la paleta monocromática, esta es la otra opción amigable para principiantes, con la cual no te podés equivocar.

Esquema de color complementario dividido en Sass:

$color-base: hsl(166, 100%, 30%);

.muestra{
	.color-0{
		background-color: $color-base;
	}
	.color-1{
		background-color: adjust-hue($color-base, 180 + 30);
	}
	.color-2{
		background-color: adjust-hue($color-base, 180 - 30);
	}
}

La tétrada o doble complementario es una combinación compuesta por 2 pares de complementarios. Te ofrece variedad, pero es más difícil balancear en qué proporción usás cada color para que quede bien.

Tríada

Como su nombre lo indica, la tríada consiste en 3 colores equidistantes en el círculo cromático. Tiene contraste visual y equilibrio.

Esquema de color triaxial en Sass:

$color-base: hsl(166, 100%, 30%);

.muestra{
	.color-0{
		background-color: $color-base;
	}
	.color-1{
		background-color: adjust-hue($color-base, 120);
	}
	.color-2{
		background-color: adjust-hue($color-base, -120);
	}
}

Cálidos y fríos

Los colores cálidos son los colores del fuego (del rojo al amarillo) y los colores fríos son los colores del agua y del hielo (del violeta al verde). El naranja siempre es cálido y el azul siempre es frío, pero los colores que están en el límite no son absolutos, por ej. un amarillo puede funcionar como frío.

Tienen connotaciones psicológicas, como todos los colores, pero además tienen la particularidad de que los colores cálidos avanzan y los fríos, retroceden y por lo tanto la yuxtaposición de ambos genera profundidad.

Recursos

Hay muchos libros sobre color, pero elegí los de Pantone, porque son la autoridad en color, además del sistema para identificar e igualar color, se dedican al estudio del color y a cómo nos afecta física y emocionalmente.

Pantone's Guide to Communicating with Color: Es un libro sobre el rol del color en la comunicación visual. Tiene capítulos sobre teoría del color y sobre el significado de cada familia de colores.
Color - Messages and Meanings: A PANTONE Color Resource es un libro para ayudarte a elegir el color apropiado para un diseño basadas en la respuesta emocional a los colores. Incluye una lista de conceptos positivos y negativos asociados a cada color. Es la segunda parte a Pantone's Guide to Communicating with Color por la misma autora.
Pantone: The Twentieth Century in Color: es un recorrido por las paletas de colores características de cada década del siglo XX y la relación del color con la cultura. Es un libro interesante porque las tendencias de color, al igual que la moda, son cíclicas.

Conclusiones

En diseño, como en otras áreas, antes de romper las reglas tenés que saber cuáles son. Con los pre-procesadores de CSS, como por ej. Sass, podés generar esquemas de colores sin necesidad de usar una aplicación especializada y sobre todo podés crear estilos re-utilizables, personalizables y desarrollar tu propio framework.

Los colores primarios dependen del medio. En pintura (témpera, acrílico, óleo) son rojo, amarillo y azul, en tintas transparentes cyan, magenta y amarillo y en luz, rojo, verde y azul.
↩
Por ej.: en el modelo de color CMYK teóricamente C100 M100 Y100 sería negro, en la realidad es un marrón sucio y se agrega la tinta negra (o inclusive C100 K100) para crear un negro bien negro.
↩
Otros modelos son: HSV (matiz, saturación, valor), HSB (matiz, saturación, brillo) y HSI (matiz, saturación, intensidad). El matiz son las variantes que puede tener un color sin perder su nombre (¿es verde? ¿es azul?). Los otros conceptos (valor, luminosidad, tono, saturación, tinte, etc.) no tienen definiciones estandarizadas, se refieren a la pureza del color (¿es intenso? ¿es pálido?) y la luminosidad (¿es claro? ¿es oscuro?) o en otras palabras cuánto gris, blanco o negro tiene.
↩
Ver lista de CSS3 color keywords.
↩
Las armonías del color son un punto medio entre caótico y aburrido. Son visualmente interesante, pero tienen un orden.
↩

Compass vs Bourbon

Thu, 09 May 2013 00:00:00 -0300

Sass extiende las características de CSS e incluye algunas funciones básicas (por ej. porcentaje) y funciones de colores (por ej. complementario, saturar). Bourbon y Compass llevan Sass al próximo nivel con más mixins y funciones para agilizar tus proyectos web, pero, ¿qué los diferencia? ¿cuál es mejor?

Round 1: Mixins y funciones

Bourbon

Mixins: Tiene mixins para las propiedades CSS3 y podés configurar para cuáles navegadores querés agregar prefijos. El mixin box está basado en la sintaxis de flex-box del 2009, pero hay un enlace a un mixin con la especificación de fines del 2012.
Funciones: Tiene funciones para generar layouts en columnas con anchos en porcentajes o pixeles, trabajar con escalas modulares y agrega 2 funciones de colores.
Add-ons: En los add-ons hay principalmente clases de utilidades, por ej. Clearfix, Hide-text (reemplazo de texto por imágenes).

Compass

CSS3: El módulo CSS3 tiene mixins para crear código CSS3 crossbrowser y podés configurar a cuáles navegadores/versiones querés darle soporte.
Helpers: Los ayudantes son funciones que aumentan las funciones de Sass. Incluyen más funciones de colores y matemáticas, funciones de dimensiones que retornan el ancho o altura de una imagen, etc. que te pueden servir para crear tu propio framework.
Layout: El módulo de maquetación no es una grilla, son un par de herramientas de maquetación, por ej. el mixin grid-background que usando degradés genera al vuelo una grilla, como en las aplicaciones de diseño, para verificar la alineación de los elementos en la página
Reset: Incluye el reset global de Eric Meyer y otras opciones.
Typography: El módulo tipografía incluye mixins para patrones comunes, por ej.: lista horizontal, reemplazo de texto con imágenes y para ajustar texto a una retícula base.
Utilities: Las utilidades son mixins básicos para patrones comunes, incluyendo un método sencillo para trabajar con sprites CSS¹ y mixins para hacer layouts en columnas con CSS (floats y clearfix).

Round 2: Extensiones

Bourbon

Grilla: Bourbon Neat es una grilla semántica adaptable.

Compass

Grilla: Susy es una grilla adaptable.
Otros: Beemuse, Fancy Buttons, Harsh. Foundation es un framework front-end creado con Sass y Compass.

Round 3: Documentación

Bourbon

La primera vez que visité el sitio me quedó muy claro que hace y para qué sirve Bourbon. La documentación es una única página, con explicaciones concisas y ejemplos de código. Los mixins y funciones están ordenados alfabéticamente.

Compass

Una vez que llegás a la referencia de cada función o mixin, está bien explicado e inclusive hay ejemplos de código (HTML, Sass y previsualización), pero el sitio está bastante recargado con publicidad, comentarios, enlaces a otros sitios que no sé qué tienen que ver con el tema. Hay que hacer varios clicks para llegar al contenido, son páginas y páginas de navegación. La referencia de por ej. las listas está repetida en typography y utilities, en general no lo encuentro bien organizado.

Y el ganador es… ¡Bourbon!

Compass es un meta-framework (un framework para desarrollar un framework). Para ese caso de uso concreto, tiene algunas funciones (helpers) que puede ser útiles, pero para el desarrollo front-end de un sitio web, Bourbon tiene varias joyitas:

HIDPI-media-query: genera una media query para pantallas de alta resolución
Flex-grid: es un mixin para crear fácilmente un layout con columnas con anchos en porcentajes.
Golden-ratio: retorna la sección áurea de un número y Modular-scale se puede usar para crear una escala modular con cualquier constante.
Button: es un estilo para botones, se puede elegir entre 3 estilos y cualquier color.
Em: convierte pixeles a ems. Acepta un segundo argumento (contexto).
Position: es una notación abreviada para la propiedad posición y Size para ancho y altura.
Triangle: genera un triángulo con CSS.

1) Para instalar la gema de Bourbon:

sudo gem install bourbon

2) Para crear la carpeta de Bourbon, desde la carpeta del proyecto ejecutar:

bourbon install

3) Importar los mixins a tu hoja de estilo:

@import 'bourbon/bourbon';

En OSX podés usar Bourbon con Codekit, Hammer o LiveReload y en Windows con LiveReload.

Uno de los puntos fuertes de Compass es que es fácil de trabajar con sprites CSS, pero hoy en día, que se están usando las fuentes de símbolos para los iconos, no le encuentro mucho sentido.
↩

Trencito para Sublime Text

Mon, 06 May 2013 00:00:00 -0300

Si te imprimís el trencito¹ de Sublime Text, lo ponés en un lugar visible y usás los atajos del teclado hasta que te los memorices, vas a sacarle verdadero provecho a este fantástico editor de código.

Versión imprimible

Navegación

Ir a cualquier cosa ・ OS X: ⌘P² ・ Windows: Ctrl + P

⌘P abre la paleta ir a cualquier cosa para hacer búsquedas difusas³ instantáneas en todos los archivos abiertos y archivos del proyecto actual. Se puede combinar con:

@ saltás directamente a un método (función, clase, símbolo, etc.).
: vas a un número de línea.

Ej. editar una regla CSS desde cualquier archivo (suponiendo que el archivo que querés editar se llama mystyle.scss): ⌘P mys@body

Intercambiar proyecto ・ OS X: ^⌘P ・ Windows: Ctrl + alt + P

Sublime Text recuerda todos los archivos abiertos del proyecto. Con ^⌘P podés intercambiar de proyectos en la misma ventana.

Paleta de comandos ・ OS X: ⌘⇧P ・ Windows: Ctrl + shift + P

La paleta de comandos tiene todas las opciones disponibles en el menú y los plugins instalados.

Ej. activar/desactivar el minimapa.

Búsqueda

Sublime Text tiene diversos métodos para buscar en proyectos y archivos. El más “completo” es buscar en archivos.

Buscar ・ OS X: ⌘F ・ Windows: Ctrl + F
Reemplazar ・ OS X: ⌘⌥F ・ Windows: Ctrl + H
Buscar en archivos ・ OS X: ⌘⇧F ・ Windows: Ctrl + Shift + F
Búsqueda incremental ・ OS X: ⌘I ・ Windows: Ctrl + I (presionar repetidas veces)

Buscar en archivos.

Selección y cursores múltiples

En Sublime Text podés seleccionar y editar simultáneamente varios fragmentos de código.

Selección múltiple ・ OS X: ⌘D ・ Windows: Ctrl + D

Con ⌘D seleccionás una palabra y volviendo a presionar ⌘D agregás la próxima ocurrencia. Podés repetir tantas veces como sea necesario. Con ^⌘G seleccionás todas las ocurrencias.

Otras selecciones:

Expandir selección a {llaves} ・ OS X: ⌃⇧M ・ Windows: Ctrl + shift + M
Expandir selección a etiqueta⁴ ・ OS X: ⌘⇧A ・ Windows: Ctrl + shift + A

Seleccionar línea ・ OS X: ⌘L ・ Windows: Ctrl + L

Con ⌘L podés seleccionar una línea entera.

Dividir selección en líneas ・ OS X: ⇧⌘L⁵ ・ Windows: Ctrl + Shift + L

Si seleccionás varias líneas, podés “dividir” la selección, es decir, agregar un cursor a cada línea. Sublime Text agrega el cursor múltiple al final, pero podés moverlo al principio con ⌘←

Cursores múltiples en Sublime Text.

Sublime Text tiene varios atajos para trabajar con líneas:

Saltar al inicio de la línea ・ OS X: ⌘← ・ Windows: Ctrl + izquierda
Saltar al final de la línea ・ OS X: ⌘→ ・ Windows: Ctrl + derecha
Subir línea ・ OS X: ^⌘↑ ・ Windows: Ctrl + shift + arriba
Bajar línea ・ OS X: ^⌘↓ ・ Windows: Ctrl + shift + abajo
Insertar línea antes ・ OS X: ⌘⇧↩ ・ Windows: Ctrl + shift +enter
Borrar línea ・ OS X: ⌃⇧K ・ Windows: Ctrl + shift +k
Borrar hasta el final de la línea ・ OS X: ⌘K ・ Windows: Ctrl + K
Borrar hasta el inicio de la línea ・ OS X: ⌘⌫ ・ Windows: Ctrl + retroceso
Duplicar línea ・ OS X: ⌘⇧D ・ Windows: Ctrl + shift + D
Unir líneas ・ OS X: ⌘J ・ Windows: Ctrl + J

Edición

Sublime Text tiene características que pueden sonar tontas, pero son útiles como por ej. podés comentar sin tener que acordarte el formato de cada lenguaje.

Comentar/descomentar: ・ OS X: ⌘/⁶ ó ⌘⌥/・ Windows: Ctrl + /
Remover/agregar sangría: ・ OS X: ⌘[⁷ y ⌘] ・ Windows: Ctrl + [ y Ctrl + ]
Saltar hasta la {llave} coincidente: ・ OS X: ⌃M ・ Windows: Ctrl + M
Para HTML: envolver selección con etiqueta ・ OS X: ^⇧W ・ Windows: Alt + shift + W

Espacio de trabajo

En Sublime Text podés trabajar con archivos abiertos en pestañas, en ventanas, a pantalla completa estándar o en modo libre de distracciones y a pantalla dividida.

Trabajando a pantalla completa en Sublime Text a 2 columnas. Los colores por defecto no están nada mal, pero te recomiendo instalar los esquemas de color de Dayle Rees.

Pantalla dividida

Podés dividir la pantalla en 2 columnas (⌘⌥2) ó en una grilla de 4 columnas (⌘⌥5) y luego con ⌘⇧2 (o el número correspondiente) mover la pestaña activa a la columna deseada. La pantalla dividida funciona mejor a pantalla completa (o en una ventana grande).

Varios

Mostrar/ocultar barra lateral ・ OS X: ⌘KB ・ Windows: Ctrl + K,B
Deshacer/rehacer suave (movimiento): OS X: ⌘U y ⌘⇧U ・ Windows: Ctrl + U y Ctrl + Shift + U

Conclusiones

En todas las aplicaciones, siempre que uso un comando del menú o una herramienta, miro cuál es el atajo del teclado y trato de memorizarlos. Hay miles de tutoriales de programas de diseño y ofimática, pero ¿cómo se aprende un editor de código? practicando los atajos del teclado e investigando todas las funcionalidades.

Un “trencito” en Uruguay se le llama a un apunte escondido. En otros países se le dice machete o chuleta.
↩
Para principiantes en Mac: ^ es la tecla ctrl, ⌥ es alt (opción) y ⌘ es cmd.
↩
En las búsquedas difusas podés poner cualquier letra de por ej. un nombre de archivo, no importa si faltan letras, cuanto más únicas sean las letras, más posibilidades tenés de que lo que buscás salga en el primer lugar.
↩
Dependiendo del lenguaje en el que estés programando te puede servir alguna otra opción del menú “Selection”.
↩
Con LittleSnapper abierto, ⇧⌘L me traía LittleSnapper al frente, si tenés algún conflicto con otra aplicación, cerrála.
↩
Según la documentación es ⌘/, en la realidad es ⌘⇧7
↩
En el teclado en español, para remover/agregar sangría: ⌘⌥[ y ⌘⌥]
↩

Nuevo diseño de Apuntes al Margen

Fri, 03 May 2013 00:00:00 -0300

La semana pasada empecé a trabajar en el diseño de Apuntes al Margen y ahora que está online decidí compartir las motivaciones y el proceso porque hace mucho que tengo ganas de escribir un detrás de cámaras.

Un poco de historia

Empecé Apuntes al Margen en el 2008, pero el enfoque actual en diseño web y desarrollo front-end es más reciente. A fines del 2011, leí el artículo How To Use Calepin, the Easiest Blog Tool in the World y gracias al descubrimiento de los generadores estáticos de blog me dieron ganas de volver a escribir (hoy uso Jekyll).

Un año después, a fines del 2012, empecé a participar en las comunidades de Google+ y eso fue lo que terminó de darle forma al proyecto porque encontré un canal para promocionar a AAM y una fuente de inspiración. Algunos artículos son de hecho respuestas largas a preguntas vistas en comunidades de Google+.

Nuevo diseño

¿Por qué un nuevo diseño? Básicamente porque AAM no tenía diseño. 6 meses atrás no sabía exactamente qué dirección iba a tomar el blog, no tenía los objetivos definidos y el contenido actual era sólo una lista de ideas.

Uno de los objetivos de AAM es promover buenas herramientas para diseño web y desarrollo front-end. No pasa sólo por escribir reseñas y/o tutoriales, quiero ser coherente con lo que recomiendo y que el blog sea un ejemplo de lo que se puede hacer con dichas herramientas.

Para el diseño usé Sketch¹ porque tiene todo lo necesario para diseño web, ni más ni menos:

La calidad del texto es impresionante, ¡el renderizado es idéntico al navegador!
Es una aplicación vectorial, así que es súper fácil crear elementos, seleccionarlos y modificarlos. Inclusive las operaciones booleanas son no destructivas. Podés hacer zoom usando una grilla de pixeles para asegurarte que al exportar como mapa de bits va a quedar perfecto.
Podés crear estilos (por ej. para botones ó texto) y re-utilizarlos.
Tiene una grilla en columnas totalmente configurable.
El lienzo es infinito, pero podés sub-dividir en múltiples mesas de trabajo con medidas fijas. También podés crear páginas.
Podés exportar slices (¿tajadas?) como JPG, PNG, etc. para web y en alta resolución.
Soporta múltiples rellenos y sombras (igual que en CSS).

Contenido primero

En AAM publico textos largos que incluyen:

Comparaciones: por ej. Espresso vs Sublime Text. Este tipo de artículos consiste en una serie de rounds como en el boxeo (criterios de comparación) y el ganador (conclusión).
Ejemplos de código: por ej. Implementación del Affix de Bootstrap. Para resaltar la sintaxis uso Prism.
Enlaces recomendados: por ej. Guía definitiva para aprender diseño web y desarrollo front-end. Cada enlace recomendado tiene una breve descripción y una imagen opcional y están agrupados según un criterio.
Imágenes: Por ej. Inspiración para diseño web. Las imágenes generalmente son capturas de pantalla con una leyenda opcional.
Listas: por ej. Herramientas de desarrollo front-end. No es necesario que leas la lista secuencialmente, te puede interesar sólo 1 item.
Pasos: por ej. Cómo solucionar problemas de maquetación con HTML y CSS. Hay artículos que incluyen mini-tutoriales, con instrucciones paso a paso. Puede ser necesario mostrar números sobre imágenes para relacionar algún elemento con un texto.
Sólo texto: por ej. Blogs en español es sólo texto.

Basándome en los tipos de contenido mencionados más arriba, diseñé algunos “módulos” en Sketch. Con módulos me refiero a elementos que se repiten, por ej. título + metadata + introducción, no son tan literales como las comps ni tan libres como las styles tiles.

Diseño de AAM en Sketch.

Actualmente el 10% de las visitas son de móviles (incluyendo tabletas). El nuevo diseño sigue siendo adaptable, pero hice una interpretación más libre del concepto de “móvil primero”. Podés leer AAM desde un celular sin pellizcar y hacer zoom, pero a pantalla completa en un monitor grande (por ej. 21 pulgadas) también se aprovecha el espacio.

AAM en escritorio a pantalla completa y en un iPhone.

En una versión anterior había una foto de la costa montevideana a la que un par de lectores le tomaron cariño, en esta versión, cada artículo va a tener una imagen ilustrativa editada en Pixelmator. Pixelmator es un excelente editor de imágenes que no tiene nada que envidiarle a Photoshop. Por ej. en Herramientas de desarrollo front-end hay una imagen de un jabalí² que hace referencia a Grunt. El punto de partida son fotos encontradas en Flickr con licencia de Creative Commons para modificar, adaptar o usarlo como base y para unificarlas usé la paleta de colores de Flat UI.

Una versión anterior de AAM con un cabezal decorativo.

Siempre diseño de adentro hacia afuera³, en la homepage incluí el último artículo publicado para los lectores frecuentes y una lista de artículos recomendados e información acerca del blog para los nuevos.

Código

Apuntes al Margen es un blog dirigido a diseñadores web y desarrolladores front-end. Asumo que los lectores usan un navegador moderno y de hecho las estadísticas de Google Analytics lo confirman, así que no usé Modernizr para ofrecer alternativas a navegadores que no soporten ciertas características.

Hace mucho que quería probar Compass o Bourbon, en esta versión usé Bourbon, una librería de mixins para Sass bien documentada y sencilla de implementar:

Flex-grid: con el mixin flex-grid resolví las columnas (el contenido principal es una única columna, pero el diseño es en realidad a 12 columnas) y no tuve necesidad de agregar un sistema específico de grilla.
Pixels to Ems: para mí es más sencillo pensar en pixeles que en ems, así que usé este mixin para convertir algunas medidas a ems.
Position y Size: son dos mixins para definir la posición (que generalmente requiere coordenadas) y el tamaño, no es imprescindible, pero el código quedó más sencillo de leer y por lo tanto de mantener.
Prefixer: de Bourbon también usé los mixins para agregar los prefijos para cada navegador de las propiedades CSS3.
Triangle: Conozco la técnica para crear triángulos con CSS, pero este mixin me simplificó la tarea.

Me encantan los demos de Codrops y para el menú principal usé el blueprint Slide and push menus con algunas modificaciones y agregué más iconos de FontAwesome.

Incluí el botón de Pocket (un servicio gratuito para guardar páginas web para leerlas más tarde) porque lo uso y me encanta. No incluí los botones oficiales de Google+ y Twitter porque el que usa dichas redes, no necesita el botón, el usuario de Pocket, tampoco, pero me gustaría tener más lectores, y Pocket se alinea más con ese objetivo que Google+ o Twitter.

Al final de los artículos nuevos, el “comentar en Google+” y “responder en Twitter” son menos sutiles porque me interesa recibir feedback. Uso Jekyll que no tiene un sistema nativo de comentarios, pero la razón no es técnica (podría usar Disqus). En AAM no hay comentarios porque hoy las conversaciones y discusiones se dan naturalmente en las redes sociales.

Planes futuros

En los próximos días voy a pulir algunos detalles y a partir de la semana que viene me voy a dedicar 100% al contenido. Aparte de escribir artículos nuevos, trato de mantener actualizados los artículos anteriores.

Más contenido: En Wunderlist tengo más de 50 ideas para nuevos artículos, así que el plan es regularizar la frecuencia y publicar idealmente 1 artículo nuevo por semana.
Multimedia: Actualmente los artículos son texto porque me gusta escribir, pero me gustaría publicar también algunos videos. Los videos serían un complemento del texto y no un sustituto. La motivación es para mejorar la calidad del contenido y atraer potenciales lectores, a través de resultados de búsquedas y sitios como YouTube, etc.

¿Comentarios? ¿Sugerencias?

Si tenés algún comentario o sugerencia sobre el diseño y/o contenido de Apuntes al Margen, te agradezco que te comuniques por email, mencionando a @nataliav en Twitter o +Natalia Ventre en Google+.

Apoyo el concepto de diseñar en el navegador, o más bien, tomar decisiones en el navegador, pero no quiere decir que haya que tirar todas las aplicaciones de diseño a la papelera.
↩
No sé qué animal exacto es el logo de Grunt y tampoco estoy segura de que el bicho de la foto sea un jabalí.
↩
En 37 Signals lo llaman Epicenter Design
↩

Cómo solucionar problemas de desarrollo web

Tue, 23 Apr 2013 00:00:00 -0300

Tanto los desarrolladores front-end principiantes como expertos cometen errores. Es frustrante que algo no te funcione como debería, pero si mantenés la calma, y seguís estos pasos, vas a poder resolver cualquier problema que se te presente. Los ejemplos son de HTML y CSS, pero los conceptos generales se pueden aplicar a cualquier problema de desarrollo web.

Paso 1: Tomar un descanso

El primer paso es alejarte de la computadora, tomáte un vaso de agua, da una vuelta a la manzana… Con suerte, cuando vuelvas, te vas a dar cuenta en qué te equivocaste.

Paso 2: Leer la documentación

En Mozilla Developer Network podés encontrar la documentación de HTML, CSS y JavaScript. W3Schools no es una fuente confiable.

Si estás usando un framework front-end, como por ej. Bootstrap, en su sitio web vas a encontrar la documentación. Si hay un demo disponible, compará el código con el tuyo y revisá si no te olvidaste de incluir algún archivo o algún otro error tonto. Para comparar archivos, podés usar Kaleidoscope.

Paso 3: Buscar la solución

Tratar de resolver el problema por tu cuenta o pedir ayuda depende principalmente de tu personalidad. No creo que preguntar sea el último recurso y tengas que desperdiciar horas en búsquedas y pruebas en vano para obtener el derecho a preguntar.

Opción A: Buscar la respuesta

Si elegís esta opción, las herramientas para desarrolladores de Chrome son tus nuevas mejores amigas. No son una varita mágica para arreglar código, pero te sirven para diagnosticar el problema y experimentar posibles soluciones directamente en el navegador. Discover DevTools es un curso gratuito de Code School patrocinado por Google. Para HTML y CSS tenés que saber usar bien la sección “Elements”.

Para abrir las herramientas para desarrolladores, presioná ⌥⌘I.
Para seleccionar hacé click en la lupa y luego en un elemento de la página.
En el panel derecho podés ver el estilo CSS generado. Un problema frecuente es que el estilo CSS no se está aplicando, acá podés ver una lista de todos los estilos coincidentes y cuáles de ellos están haciendo efecto. En “Styles” podés forzar los estados con el botón “Toggle element state”. En “Metrics” podés ver un diagrama del modelo de caja con los márgenes, padding, etc. aplicados.
Podés editar temporalmente el HTML y CSS haciendo doble click.

Otros problemas:

Compatibiliadad: Si tenés problemas en otros navegadores, en Can I use¹ hay tablas de soporte a HTML5, CSS3, SVG, etc. y problemas conocidos. Por ej. IE 8 no soporta la unidad rem, e IE 9 y 10 no soportan rems cuando se usa en la versión abreviada de la propiedad “font”, así que tendrías que declarar font-size aparte y aprovechar la cascada para ofrecer un valor alternativo en píxeles.
Técnica: Si no sabés cómo hacer algo concreto con CSS, por ej. centrar un elemento con posición absoluta, podés buscar si existe una técnica conocida, a veces el código es poco intuitivo.

Opción B: Hacer una pregunta

Cada comunidad online tiene sus reglas (¡deberías leerlas!)². No se trata de complacer a los moderadores, si hacés una buena pregunta, vas a obtener mejores respuestas más rápido.

Consejo 1: Para preguntar sobre código, incluí el código que te está dando problemas³. CodePen y jsFiddle son servicios que te permiten pegar el código HTML en el panel HTML, el CSS en el panel CSS y el JavaScript en el panel JavaScript y ver el resultado. Presionando Save obtenés una URL pública que podés adjuntar a la pregunta. Con un Fiddle o un Pen le facilitás enormemente el trabajo a la persona que te quiere ayudar, porque puede ver el problema, modificar el código y darte la solución.

Consejo 2: Para preguntar cómo se hace tal cosa, en vez de describir vagamente qué es lo querés hacer, es mejor que muestres un ejemplo concreto: una captura de pantalla, un sitio web donde lo viste, etc.

Recomendaciones finales

Si te estás equivocando en conceptos básicos, podés profundizar tus conocimientos.
Si te estás equivocando en la sintaxis de HTML, CSS o JavaScript, podés usar Emmet o Haml, Sass o Stylus y CoffeScript. Si usás Sublime Text podés instalar SublimeLinter, un plugin que te resalta errores potenciales en JavaScript, PHP y otros lenguajes.
Si no te gusta trabajar solo y querés rodearte de personas para pedirles ayuda y colaborar, podés unirte⁴ a una comunidad online.

Por último, podés aprender de tus errores creando tu propia biblioteca de snippets (fragmentos de código) para futura referencia. Podés usar una aplicación como CodeBox o crear una cuenta en sitios como Snipplr.

Browser Usage/Feature Statistics es una visualización de las características HTML5 y CSS3 soportadas por cada navegador/versión.
↩
Hay demasiadas reglas en la vuelta, son todas del estilo del nazi de la sopa de Seinfeld, en este artículo incluí sólo los 2 consejos que considero más importantes para obtener respuestas acertadas.
↩
En el proceso de aislar el código problemático y crear un caso de prueba reducido podés solucionar el problema.
↩
Con unirte a una comunidad, me refiero a que en vez de publicar la misma pregunta en 20 lugares diferentes cuando entrás en módo pánico, participes con frecuencia en la/s comunidad/es con más miembros y/o mejores respuestas.
↩

Guía definitiva para aprender diseño web y desarrollo front-end

Wed, 17 Apr 2013 00:00:00 -0300

¿Cómo aprendo a diseñar? ¿Cómo hago un formulario de contacto? ¿Dónde puedo descargar un manual de JavaScript? ¿Me pueden recomendar un tutorial de creación de temas para WordPress? Estas son preguntas frecuentes en foros y comunidades, y en alguna oportunidad yo misma me las he hecho, pero la respuesta no pasa solamente por recomendar tutoriales, libros y cursos.

¿Por qué querés aprender diseño web y desarrollo front-end? es la pregunta más importante. Podés querer aprender por hobby, como carrera con salida laboral o si ya estás trabajando en la industria, podés querer mejorar tus habilidades o aprender alguna tecnología nueva.

Aprender diseño web y desarrollo front-end como hobby

Te voy a contar un secreto: para crear un sitio web, no tenés que aprender absolutamente nada.

Tarjeta de presentación: Si querés tener un sitio web estilo tarjeta de presentación (foto, biografía, enlaces a tus perfiles en redes sociales, etc.), lo podés crear y personalizar en 5–10 minutos en about.me o Flavors.me.
Blog: Si querés tener un sitio web para publicar contenido, podés usar una plataforma de blog como Tumblr o WordPress y en 10–20 minutos queda pronto.

El diseño y desarrollo web es un tema bastante amplio, pero una vez que tengas online tu sitio web personal, te van a ir surgiendo dudas específicas o ideas para mejorarlo y podés buscar información en Internet, preguntar en comunidades de Google+, etc.

Si querés aprender HTML/CSS, JavaScript, PHP, Python o Ruby simplemente porque está de moda, en Codecademy hay cursos gratis. Los cursos son en el navegador (no necesitás instalar nada) y consisten en una serie de ejercicios repetitivos con una mínima explicación de lo que estás haciendo.

Aprender diseño web y desarrollo front-end como profesión

En este caso, tu prioridad número uno debería ser aprender a hacer las cosas bien. Que el curso o material de estudio sea gratuito o pago es secundario.

Educación formal / presencial

Una opción, evidentemente, es cursar una carrera técnica o universitaria de diseñador web, analista programador o similar. Para diseño te recomiendo evitar cursos en academias de computación porque sólo te enseñan a manejar programas y saber usar Photoshop no te convierte en diseñador, así como saber usar una calculadora no te convierte en contador.

La educación formal te da bases sólidas, pero para trabajar en diseño y desarrollo web, seguramente tengas que aprender por tu cuenta algún framework u otras herramientas puntuales.

Educación autodidacta: diseño web

Tip: Sucribíte a Creative Edge o Safari Books Online y accedé a un extensa biblioteca de libros publicados por Adobe Press, O'Reilly Media, etc.

Fundamentos del diseño

Above the fold de Brian Miller es uno de los pocos libros sobre el aspecto teórico del diseño web: elementos de diseño, tipografía, usabilidad, optimización para motores de búsqueda, etc. Cubre superficialmente todo el proceso de creación de un sitio web, desde la planificación hasta el lanzamiento y medición de resultados analizando estadísticas.
A book apart es una colección creciente de libros para personas que hacen sitios web sobre temas emergentes. Cada uno tiene alrededor de 100 páginas y se puede leer en 1–2 días y rápidamente aplicar los conceptos en tu próximo proyecto.

Software de diseño

Adobe publica una serie llamada Classroom in a Book que explica desde el área de trabajo hasta las funcionalidades más avanzadas de Illustrator, Photoshop y los demás programas de Adobe Creative Suite. Cada capítulo es un ejercicio temático con instrucciones paso a paso, capturas de pantalla y consejos para aprovechar al máximo las características de Adobe CS.
Envato tiene una red de blogs educativos, por ej. Psdtuts+ sobre Adobe Photoshop y Vectortuts+ sobre Adobe Illustrator. Los tutoriales te sirven como ejercicio, para practicar el manejo del programa.

¡A diseñar!

Finalmente, es importante que apliques los principios y técnicas de diseño en proyectos y recibas críticas constructivas. Te podés registrar por ej. en Behance, publicar WIPs (trabajos en progreso) y solicitar comentarios o enviar un proyecto a los workshops de Webdesigntuts+.

Educación autodidacta: desarrollo front-end

Para aprender a programar, lo ideal es el formato curso, es decir una combinación de contenido teórico (que puede ser texto y/o video) y ejercicios para verificar que realmente entendiste los conceptos y practicar. Personalmente me gusta mucho Code School¹ y el respaldo de GitHub, jQuery y Google es una prueba de la calidad de los cursos.

HTML y CSS

Hardboiled Web Design de Andy Clark es un libro sobre HTML5 y CSS3 con actitud. Explica el aspecto técnico, las etiquetas semánticas de HTML5 y cómo hacer efectos llamativos con CSS3, pero también evangeliza sobre diseñar en el navegador y sobre cómo encarar un desarrollo front-end crossbrowser.
Emmet: Todo bien con aprender HTML, obviamente hay que conocer las etiquetas, pero en la práctica profesional, nunca vas a escribir un doctype. Emmet es un plugin para editores de código que mejora el flujo de trabajo, por ej. si escribís html:5 y presionás TAB, Emmet te genera todas las etiquetas mínimas de un documento HTML.
CSS Cross-Country: es un curso de Code School que explica cómo hacer una maquetación en columnas con CSS, qué es el modelo de caja, cuándo usar position:absolute, para qué sirve cambiar el tipo de display, cómo y por qué hacer CSS sprites, técnica de reemplazo de imágenes, etc. Es un curso corto, pero tiene todo lo que tenés que saber sí o sí sobre CSS.
Journey into Mobile: es un curso de Code School sobre RWD (diseño web adaptable) y te enseña a trabajar con unidades relativas (ems, porcentajes), cuándo usar media queries y cómo determinar los breakpoints, cómo escalar imágenes y videos y hacer gráficos para pantallas de alta resolución (retina). Si ya sabés HTML/CSS y querés adentrarte en RWD, este curso es para vos.
Assembling Sass: es otro curso de Code School sobre el pre-procesador de CSS Sass. Sass es muy potente y en este curso aprendés lo básico (anidado, declaración e interpolación de variables) y lo intermedio–avanzado, cuándo usar un mixin, cómo se usan las directivas (@extend, @if, @for y @while), funciones matemáticas y de colores y cómo optimizar tu flujo de trabajo para RWD con Sass.

Software de desarrollo front-end

Perfect Workflow in Sublime Text es un curso gratuito en video sobre Sublime Text. Aunque parezca que usar un editor de código no tiene mucha ciencia, hay pequeños detalles que te pueden ayudar a mejorar tu flujo de trabajo y evitar errores.
Discover DevTools es un curso gratuito producido por Code School y patrocinado por Google para dominar las herramientas para desarrolladores de Chrome. Los desafíos están geniales porque inspeccionás elemento y empezás a resolver los ejercicios.
How to Use Terminal: The Basics A veces podés usar una interfaz gráfica, como CodeKit o la aplicación de GitHub, pero no está de más que sepas cómo usar la terminal.

JavaScript

En JavaScript.is(Sexy) hay un post excelente sobre cómo aprender apropiadamente JavaScript, donde el autor combina en un plan de 6–8 semanas una lista de lectura con ejercicios en Codeacademy.
Try jQuery es un curso gratuito producido por Code School y patrocinado por jQuery con videos y ejercicios en el navegador. Lo podés completar en un par de horas y es útil si estás apurado por arrancar con JavaScript o como repaso y/o actualización si ya manejás una versión anterior.

Otros

Cómo perder peso en el navegador es una guía reciente sobre rendimiento, pero hay otras más viejas como la de Yahoo que siguen teniendo validez. El rendimiento juega un rol importantísimo en la usabilidad y es una de las cosas que diferencia un trabajo profesional de uno mediocre.

Educación autodidacta: creación de plantillas

ExpressionEngine 2: A Quick-Start Guide por Ryan Irelan es el libro para empezar con ExpressionEngine. A partir de un sitio estático en HTML y CSS, te explica paso a paso cómo hacerlo dinámico usando EE y cuáles son las técnicas más comunes que se usan en las plantillas de EE, por ej. compartir datos entre plantillas. En el libro no se usa ningún add-on, pero en el sitio de Mijingo hay screencasts sobre cómo usar Playa, cómo desarrollar un add-on para EE y otros temas avanzados.
The ThemeShaper WordPress Theme Tutorial: 2nd Edition es un tutorial extenso sobre cómo desarrollar un tema para WP desde cero y completo con las funcionalidades más comunes (widgets, soporte al aside, menu y header personalizables, etc.), organizado en varias lecciones escritas por la gente de Automattic. Usa como base el tema Underscores (_s) y promueve buenas prácticas del desarrollo de temas, incluyendo la seguridad.
Create Stunning HTML Email That Just Works s un libro publicado por SitePoint para diseñadores web y desarrolladores front-end que quieren ofrecerles a sus clientes plantillas para enviar newsletters. Los emails usan HTML y CSS, pero muy básico, y con técnicas de hace 15 años atrás (diagramación basada en tablas). El libro es un punto de partida. En el sitio de Campaign Monitory MailChimp podés encontrar información actualizada y ejemplos de código.

Conclusiones

“Guía definitiva… ” es un título sensacionalista, pero me gustó ;D

Todos los cursos de Code School consisten en videos, donde el profesor te explica los temas con diapositivas (estilo conferencia) y ejercicios en el navegador. Podés descagar las diapositivas y los videos para futura referencia. Tienen algunos cursos gratis y los demás podés comprarlos y tener acceso para siempre a los ejercicios o suscribirte mensualmente (más barato). Al final de cada curso te indican recursos podés profundizar tus conocimientos y algunos cursos tienen descuentos en libros u otros materiales.
↩

Inspiración para diseño web

Mon, 15 Apr 2013 00:00:00 -0300

Los grandes artistas copian, los genios roban. — Pablo Picasso

Si para diseñar un sitio web buscás inspiración en galerías de CSS, Dribbble, etc. a propósito o de manera inconsciente vas a terminar creando sitios iguales o muy parecidos a otros. Con fuentes de inspiración “alternativas” podés crear un estilo propio.

Arquitectura

El blanco es limpio y hace que el contenido se destaque, pero no tiene por qué ser necesariamente #FFF, en arquitectura, y sobre todo en diseño de interiores, hay muchos ejemplos de colores casi blancos y grises claros cálidos.

Ejemplos de colores casi blancos encontrados en diseño de interiores.

Los arquitectos tienen a su disposición distintos materiales: acero, concreto, madera, vidrio, etc. Como diseñador web tenés un único material de contrucción que son los píxeles, pero podés usar texturas visuales sutiles para destacar elementos y agregar personalidad e inspirarte en la arquitectura para combinarlas.

La arquitectura es una profesión mucho más antigua que la del diseñador web y podés aprender sobre la relación profesional – cliente y el rol del “creativo” en el equipo de trabajo.

Cine y Televisión

Te podés inspirar en el cine para el tratamiento de imágenes. Por ej. para una galería de imágenes, en vez de simplemente cambiar el tamaño y/o recortar las imágenes para generar miniaturas podés además aplicarles algún filtro, como por ej. blanco y negro como Sin City, o una tonalidad de color como en Matrix. Para las transiciones de los carouseles de fotos, te podés inspirar en las iconicas transiciones de La guerra de las galaxias de George Lucas.

Algunas películas visualmente atractivas: 300, 2001, La celda, Drive, Matrix recargada, Sin City, La guerra de las galaxias.

Si no tenés tiempo de mirar una película entera, podés inspirarte en las secuencias de créditos. ¿No creés que se pueden tomar elementos de una secuencia de créditos y trasladarlos al diseño web? Mirá la secuencia inicial de The Man With The Golden Arm y el tema Vertigo para Tumblr y después me contás.

Las leyendas de imágenes no tienen por qué ser #FFF sobre rgba(0, 0, 0, 0.75), en cualquier noticiero podés encontrar opciones más creativas.

Bootstrap vs Deutsche Welle.

En la tele¹ hay algunos realities sobre diseño por ej.: Candice Tells All, Project Runway, Secrets From a Stylist, etc. donde podés ver el proceso creativo de otros diseñadores, cómo aplican los principios del diseño, cómo toman decisiones.

Juegos

En RWD (diseño web adaptable) se hace mucho incapié en las grillas fluidas, las media queries, etc. pero también es importante pensar en interacciones más allá del mouse y cuáles son las posibilidades y desafíos de una pantalla táctil. En ese sentido, la industria de los videojuegos está mucho más madura ya que tienen experiencia en variados dispositivos.

¿Cómo implemento la navegación? ¿De qué tamaño tienem que ser las zonas accionables? ¿Qué gestos táctiles uso para sustituir los eventos del mouse? Encontrá respuestas a estas y otras dudas, ¡jugando Angry Birds!

La gamificación consiste en aplicar las mecánicas de juego en otros contextos para aumentar la participación de los usuarios. En diseño web se aplica en la creación de tutoriales interactivos (al estilo por ej. de Tomb Raider que tiene un nivel cuya única función es explicar cómo se juega) y en las badges o insignias u otro tipo de premios por realizar acciones deseables.

Literatura

El cielo sobre el puerto tenía el color de una pantalla de televisor sintonizado en un canal muerto. — William Gibson (Neuromante)

Me encanta leer y no juzgo a un libro por la tapa, pero sí por sus primeras oraciones y Neuromante de William Gibson me atrapó instantáneamente. Para mí, el cielo sobre el puerto es gris, pero si sos de otra generación te podés imaginar que el cielo es azul o negro. La literatura, la radio, los medios no-visuales en general, tienen esa capacidad, de que al no decirte todo, al contrario de una foto o una película, tenés que imaginarte lo que falta y sirven como ejercicio para fomentar la creatividad.

En teoría de la comunicación, los ejemplos de metáfora, metonimia y otros tropos suelen ser literarios, pero también son recursos que funcionan visualmente para explicar o persuadir (publicidad).

Moda / Estilo de vida

La inspiración en la moda puede traducirse literalmente en colores y texturas, pero más allá de eso, también es importante los motivos por los cuales la gente se viste así.

Por ej. en wikiHow hay una serie de pautas sobre cómo ser un hipster que van desde usar chupines a ser vegetariano y hay muchos elementos que se pueden usar (y de hecho se usan) en diseño web. Usar porque sí elementos de una estética ajena no tiene demasiado sentido, pero si pensás que los conceptos de frugalidad y respeto al pasado de los hipster se traducen al diseño web en layouts minimalistas y fuentes vintage, podrías usar un proceso similar a partir de la misión de la empresa (o cualquier texto que tengan en la página “acerca”) de la empresa para la cual estás diseñando y traducirlos visualmente.

Música

Escuchar música mientras trabajás puede ser motivador y darte energía. Si en vez de escuchar tu música preferida, escuchás música acorde al público objetivo para el cual estás diseñando puede ayudarte a entener mejor a la audencia. Si esta técnica te falla, y la música no te evoca ninguna idea visual, en última instancia podés recurrir a videoclips, tapas de discos y otras manifestasiones visuales, ya que muchos géneros musicales tienen una estética asociada, por ej. la estética del punk.

El ritmo es uno de los principios básicos del diseño, siempre que repetís un patrón, generás ritmo, pero el concepto es más fácil de entender si lo asociás a la música.

Por último, de la música me parece inspirador que a veces los videoclips cuentan una historia que no tiene absolutamente nada que ver con la letra de la canción y sin embargo, funciona (por ej.: Sonne de Rammstein). En el caso de un sitio web, no necesariamente tenés que usar elementos visuales pertenencientes al rubro de la empresa para que quede bien.

Naturaleza

La inspiración en la naturaleza puede traducirse literalmente en texturas, formas y colores.

En vez de buscar directamente paletas de colores en sitios como COLOURlovers o Kuler, podés crear una paleta basada en la naturaleza a partir de una foto representativa del ambiente que estás buscando.

Creación de una paleta de colores a partir de una foto con ColorSchemer Studio.

En vez de usar estilos pre-definidos o buscar freebies para descargar, a partir de por ej. los colores del cielo podés crear degradés, fondos desenfocados, etc.

La sección áurea y la secuencia de Fibonacci son relaciones matemáticas que se encuentran en la naturaleza² y que históricamente se han usado en arquitectura y arte. Aunque no hay estudios científicos que lo demuestren, se dice que los objetos creados en base a dichos números son estéticamente agradables. Podés aplicar la sección áurea en diseño web en las proporciones por ej. de la sección principal y la barra lateral.

Golden Ratio Calculator es una herramienta online que calcula anchos de columnas a partir de la sección áurea. Por ej. si el ancho total es 100%, la sección principal debería medir 61,8% y la secundaria 38,2%.

Podés aplicar la secuencia de Fibonacci a las jerarquías de tamaño de texto (párrafos, títulos, etc.).

Typograph es una herramienta online para componer una escala tipográfica derivada de la serie de Fibonacci u otras escalas tipográficas tradicionales.

Períodos históricos

Saber elegir cuál estilo es apropiado para cada proyecto y ejecutarlo correctamente no es tarea menor, pero en vez de tomar como referencia tendencias actuales del diseño web, podés inspirarte en épocas pasadas. Al fin y al cabo “Metro” está inspirado en el estilo tipográfico internacional (o escuela suiza), así que nada te impide tomar elementos visuales característicos de una era y actualizarlos.

Conclusiones

Mirar sitios web de la competencia es parte de la etapa de investigación y buscar en Dribbble, Pattern Tap, etc. elementos muy puntuales, como por ej. formularios de búsqueda, etiquetas, etc. es totalmente válido, pero para crear el look & feel (aspecto y comportamiento o identidad visual) de un sitio web es mejor que te inspires en básicamente cualquier cosa excepto otro sitio web. Pinterest es ideal para encontrar rápidamente inspiración online, porque hay imágenes interesantes organizadas en categorías como Arquitectura, Ciencia y naturaleza, Moda, etc. y buscando encontré imágenes más relevantes que en Flickr o sitios similares.

En este artículo traté de poner ejemplos lo más concreto posibles, porque creo que cuando buscás inspiración, de alguna manera es porque te trancaste y no sabés cómo seguir. La “inspiración” no es sustituto de tener conocimientos de fundamentos del diseño y aplicarlos, pero tiene su lugar en el proceso, porque el diseño no es un examen multiple opción con una única respuesta correcta.

En Uruguay (y supongo toda Latinoamérica) el programa de Candice lo dan en H&H, Project Runway en E! y Glitz y Secrets from a Stylist en Fox Life.
↩
Plutón no es un planeta y los ejemplos clásicos de la sección aúrea en la naturaleza (el caracol nautilos) actualmente son disputados.
↩

Blogs en español

Fri, 05 Apr 2013 00:00:00 -0300

Anteriormente publiqué una lista de recursos para mantenerse actualizado en diseño y desarrollo web. No me interesa encontrar equivalentes a esos sitios web en español, pero sí me gusta leer a otros diseñadores y desarrolladores web que cuentan cómo trabajan, cómo solucionan problemas, qué opinan de la industria, etc.

La lista está ordenada alfabéticamente por nombre de dominio.

Alessandro Mascherpa

Alessandro Mascherpa es un desarrollador de software, tiene muy poquitos artículos publicados, pero igualmente lo añadí a la lista porque me gusto el estilo del blog en general (además cuualquiera que use Jekyll u Octopress tiene puntos extras a favor).

Artículo favorito:

Maquetación Html Para Correos Electrónicos: En este artículo define muy bien en qué consiste el desarrollo de HTML emails, que aunque no lo parezca, implica usar técnicas totalmente diferentes a las que usan para hacer una página web actual.

Antonio Villamarín

Antonio Villamarín es un empresario que escribe sobre variados temas incluyendo desarrollo y startups, me parece interesante leer un punto de vista, no tan centrado en el código sino más bien en el aspecto comercial.

Artículos favoritos:

Twitter, Facebook, LinkedIn y la madre.: una opinión centrada sobre tener presencia en todas las redes sociales.
Modelo Vista Controlador adaptado a la web: pensé que este artículo era sobre Backbone o similar, pero no, igualmente es una buena explicación del MVC para web.

Carmen Hevia

Carmen Hevia es una psicóloga española que trabaja en la aplicación de la psicología al marketing (psicomarketing) y a la experiencia de usuario (neurodiseño).

Artículos favoritos:

Deja que la Gestalt diseñe la Web por ti. Ley de la Semejanza.: Es parte de una serie sobre la Gestalt, una corriente alemana de la psicología que estudió la percepción y cuya filosofía se puede resumir en la frase “El todo es más importante que la suma de las partes”. Las leyes de la Gestalt están en el temario de los cursos de diseño, pero está muy bueno como Carmen las explica y ejemplifica con aplicaciones y sitios web.
La memoria en la experiencia de usuario. Reconocimiento Vs Recuerdo: Es un artículo sobre cómo funciona la memoria y cómo diseñar por ej. un proceso de compras teniendo estos conceptos en cuenta.

Emilio Cobos-CMC

Emilio Cobos es un estudiante de batchillerato español que escribe sobre Blogger y desarrollo web en general (HTML, CSS, JavaScript, PHP). Lo que más me gusta de Emilio es que está dispuesto a responder dudas de sus lectores.

Artículo favorito:

Migrar de blogger a WordPress: La guía definitiva: Migrar de plataforma siempre tiene sus desafíos y en este artículo comparte su experiencia y explica un método detallado a prueba de fallas.

fernetjs

Fernetjs es una comunidad de JavaScript en español sobre JavaScript client-side y server-side, librerías, etc. Los artículos son de distintos autores y aceptan contribuciones de nuevos autores. Me gusta porque es monotemático, los posts tienen ejemplos de código, están escritos en un estilo informal, sincero y ameno. Tal cual se definen en el acerca, se nota que a los autores les apasiona el tema.

Artículos favoritos:

La Historia de Javascript: Una línea de tiempo con la historia de JavaScript desde su creación en 1995 y con hitos significativos como jQuery y node.js
Fernet Volador: detrás de escena: En este artículo explican cómo implementaron un huevo de pascua (una botella de fernet volando) en el sitio con JavaScript.

Guiabreve

Guiabreve es el blog de Víctor Falcón, un diseñador web español. Escribe sobre CSS, diseño web adaptable, Sublime Text, WordPress, etc. y me gusta sobre todo ese “detrás de cámaras” que hace de Yuufit.

Artículos favoritos:

Añadir la sintaxis Htaccess a Sublime Text 2 No se me había ocurrido que se podía resaltar la sintaxis de los .htaaccess, pero seguí las instrucciones y me funcionó bien.
Opinión: ¿Por qué me encanta Sublime Text 2? Sublime Text está muy bueno, pero a primera vista no es tan claro como Coda o Espresso, así que cualquier artículo sobre el tema, me parece valioso.

Guillermo Carvajal

Guillermo Carbajal, no es diseñador, ni desarrollador, es un Licenciado en Geografía e Historia, que escribe profesionalmente guías turísticas y blogs de viaje, pero habla sobre temas que me interesan.

Artículos favoritos:

Es toda una experiencia vivir con miedo, ¿verdad?: gratis vs de pago: me gustó mucho este artículo, porque con tanta gente buscando y pidiendo recursos gratis en Internet, parece que si recomendás algo pago sos un bicho raro a pesar de que son sumas ínfimas si pensás en el valor que te aportan.
El silencioso éxito de Quora: este artículo me gustó porque no me gusta Quora (me parece infantil que no me dejen ver las respuestas porque no estoy registrada), pero reconozco que leer ideas con las cuales discrepo es más enriquecedor que leer más artículos que validen lo que pienso.

KsesoCss

Es un blog sobre CSS, abarca desde conceptos básicos como los modelos de caja, hasta las propuestas más nuevas como border-shape. Kseso también está en Twitter y modera una comunidad en Google+ CSS con estilo donde plantea debates interesantes. Pese a ser un tema tan técnico, los artículos tienen frases coloridas que le dan personalidad.

Artículo favorito:

Display: inline-block y su empeño en dejar espacios en blanco de separación. 8 soluciones. Con todas estas opciones, seguro vas a encontrar una que te quede cómoda.

Minid.net

Minid.net es un blog de tecnología del diseñador argentino Diego Martín Lafuente. Un pionero del blogging que publica artículos bastante extensos, son realmente material de lectura.

Artículos favoritos:

No me robes el estilo: es un artículo de opinión a raíz de que LayerVault denunció a Designmodo por infracción de derechos de autor en Flat UI.
Usted no es el cliente, usted es el producto: un artículo sobre el cambio de política de uso de Instagram. Muchos blogs de tecnología simplemente hacen eco de anuncios de prensa, pero para mí, seguir a un autor significa conocer su postura y leer un análisis y no sólo una copiada y pegada, o traducción, como hacen muchos otros.

Pablo Leone

En el blog del programador web Pablo Leone hay artículos sobre PhoneGap, WordPress y otros temas de desarrollo backend (PHP, MySQL).

Artículos favoritos:

Comenzando con PhoneGap: En este artículo está bien explicado cómo funciona básicamente una aplicación con PhoneGap y cuáles son los requisitos previos, o sea, qué lenguajes tenés que saber.
Crear un área restringida en 5 minutos con .htaccess: Es un tutorial paso a paso de cómo proteger un directorio con contraseña usando .htaccess y .htpasswd.

return(gis);

return(gis); es el blog de la arquitecta de software española Gisela Torres. En los últimos meses estuvo publicando varios artículos sobre APIs de HTML5 (geolocation, history, etc.) y también escribe sobre CSS, JavaScript, ASP.NET MVC y Windows Azure.

Artículos favoritos:

Atributos data-*: En este artículo explica qué son los atributos data-* y cómo manipularlos con JavaScript.
Requirejs: El cargador de módulos para JavaScript: sobre jQuery hay mucho material publicado, pero sobre herramientas un poco más avanzadas de JavaScript es más difícil encontrar información y a veces en vez de la documentación, necesitás leer artículos qué te expliquen para qué sirven y cómo se usan estas librerías.

Por favor, ¡recomendáme un blog! ¹

Si tenés un blog en español, me encantaría leerlo y te agradezco que me mandes un email, un tweet a @nataliav, una señal de humo, etc.

No me interesa participar en ningún sistema de intercambio de enlaces. No lo tomes como algo personal si me recomendás tu blog y no lo incluyo en la lista, los blogs, como los libros, la música, etc. son cuestión de gusto.
↩

Herramientas de desarrollo front-end

Mon, 25 Mar 2013 00:00:00 -0300

Para desarrollo front-end hay muchísimas herramientas disponibles que suenan bien, pero ¿para qué sirven realmente? ¿en qué me va a beneficiar usarlas? ¿cómo las integro a mi flujo de trabajo?

Bower

Bower es un gestor de paquetes (HTML, CSS, JavaScript) que instala, actualiza y gestiona dependencias.

Por ej. si desde la terminal ejecutás:

bower install jquery-ui

en la carpeta del proyecto, Bower crea una carpeta “components” y descarga jQuery UI y jQuery (dependencia).

Beneficio

Para crear un proyecto es más rápido que descargar, descomprimir y mover los archivos a la carpeta del proyecto manualmente, pero hay paquetes que están en la lista de componentes de Bower y no los instala correctamente¹.

Uso

Bower se instala usando Node y npm, como ya los tenía instalados fue muy sencillo. El uso es básicamente bower search, bower install, bower update, son pocos comandos y fáciles de recordar.

CoffeeScript

CoffeeScript es un lenguaje que compila a JavaScript. La sintaxis está inspirada en Ruby y Python. Omite los puntos y coma, llaves, la declaración de variable, el return (siempre ejecuta la última línea de una función) y reemplaza (){} por () -> para representar visualmente una función².

Por ejemplo:

cafe = (mensaje = "¿Te interesa CoffeScript?") ->
  respuesta = confirm mensaje
  "Tu respuesta es #{respuesta}"

alert cafe()

compila a:

var cafe;

cafe = function(mensaje) {
  var respuesta;

  if (mensaje == null) {
    mensaje = "¿Te interesa CoffeScript?";
  }
  respuesta = confirm(mensaje);
  return "Tu respuesta es " + respuesta;
};

alert(cafe());

Beneficio

CoffeeScript es JavaScript, pero más fácil de escribir y de leer y por lo tanto más fácil de mantener.

Uso

CoffeeScript se puede probar online, instalar con el Node Package Manager y compilarlo via la terminal o usar una aplicación como CodeKit, LiveReload, etc.

1) Instalar CoffeeScript:

npm install -g coffee-script

2) Vigilar y re-compilar un proyecto:

coffee -o js/ -cw coffee/

Grunt

Grunt automatiza tareas repetitivas, por ej.: compilación, concatenación, minificación, tests unitarios, linting, etc.

Para empezar a usar Grunt, hay que instalar³ una serie de cosas, en mi caso:

1) Instalar la CLI (interfaz de la línea de comando):

sudo npm install -g grunt-cli

2) Crear un package.json en la raíz del proyecto:

{
    "name": "Mi Proyecto",
    "version": "1.0"
}

3) Instalar Grunt y los plugins necesarios (en cada proyecto):

npm install grunt --save-dev

npm install grunt-contrib-sass --save-dev
npm install grunt-regarde --save-dev
npm install grunt-contrib-connect --save-dev
npm install grunt-contrib-livereload --save-dev

4) Crear un Gruntfile.js, agregar y configurar las tareas. Tarea de ejemplo⁴: compilar Sass y recargar el navegador (replicar la funcionalidad de LiveReload):

'use strict';
var path = require('path');
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;

var folderMount = function folderMount(connect, point) {
  return connect.static(path.resolve(point));
};

module.exports = function (grunt) {
  grunt.initConfig({
    connect: {
      livereload: {
        options: {
          port: 9001,
          middleware: function(connect, options) {
            return [lrSnippet, folderMount(connect, options.base)]
          }
        }
      }
    },
    sass: {
      dist: {
        files: {'css/style.css':'sass/style.scss'}
      }
    },
    watch: {
      sass: {
        files: ['**/*.scss'],
        tasks: ['sass']
      },
      css: {
        files: ['**/*.css'],
        tasks: ['livereload']
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-regarde');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-livereload');

  grunt.renameTask('regarde', 'watch');

  grunt.registerTask('default', ['livereload-start', 'connect', 'watch']);
};

5) Ejecutar Grunt:

grunt

Beneficio

Grunt es equivalente a aplicaciones como CodeKit, Hammer, Mixture, etc. pero mucho más personalizable. Se pueden definir distintos sets de tareas, por ej. dev (compilar Sass y CoffeScript) y dist (concatenar y minificar CSS y JS).

Uso

Grunt está bien documentado, cada plugin tiene código de ejemplo, no es difícil de usar, pero tampoco es para principiantes. En el episodio 021 del Build Podcast, que ya lo había mencionado en Recursos para mantenerse actualizado en diseño y desarrollo web, Sayanee muestra cómo empezar a usar Grunt.

LESS, Sass y/o Stylus

En artículos anteriores escribí sobre los beneficios de los pre-procesadores de CSS, la sintaxis de LESS, Sass y Stylus y por qué Sass es mejor.

Beneficio

Los pre-procesadores de CSS ayudan a concentrarse en el aspecto creativo de escribir código porque evitan tener que recordar valores de colores (variables), escribir prefijos para cada navegador (mixins), etc.

Uso

Hay varias aplicaciones amigables para los principiantes, por ej. CodeKit, LiveReload, etc. que compilan LESS, Sass y Stylus y por supuesto se pueden compilar desde la terminal.

Modernizr

Modernizr es una librería de JavaScript que detecta el soporte a características de HTML5 y CSS3 del navegador.

Ejemplo 1: usar un polyfill⁵ si el navegador no soporta los placeholders HTML5

Modernizr.load({
  test: Modernizr.placeholder,
  nope: 'Placeholders.js'
});

Ejemplo 2: estilo CSS alternativo si el navegador no soporta box-shadow

.no-boxshadow .recuadro{
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

Beneficio

Modernizr te permite aprovechar el potencial de HTML5 y CSS3 en los navagadores modernos y podés elegir para cuáles funcionalidades importantes hay que diseñar un plan B.

Uso

Tiene una versión de desarrollo y para producción se puede seleccionar qué items necesitás y descargar una versión personalizada minificada. Además de la documentación, en el sitio de Modernizr hay una lista de tutoriales.

Normalize.css

Normalize.css es un archivo CSS que reduce las diferencias o “normaliza” los estilos por defecto de cada navegador, no es un reset⁶.

Beneficio

Además de lo obvio, como por ej. body { margin: 0; } ó img { border: 0 }, normalize.css corrige algunos bugs comunes en todos los navegadores como por ej. que sub y sup afecte la line-height.

Uso

Normalize.css está incluido en el HTML5 Boilerplate y Bootstrap. El creador plantea 2 enfoques para usarlo, personalmente lo incluyo modificado (elimino algunos estilos, pero no personalizo valores).

Yeoman

Yeoman es un conjunto de herramientas, incluyendo Bower y Grunt, optimizadas para el desarrollo de aplicaciones web con MVC/MVVP/MVVM client side (por ej. AngularJS).

1) Crear un proyecto básico:

yo webapp
npm install && bower install

2) Previsualizar en el navegador⁷:

grunt server

3) Deploy:

grunt build

Beneficio

Yeoman maneja el concepto de opciones por defecto inteligentes, por ej. el pre-procesador de CSS es Sass, los test unitarios son con Mocha, etc. Simplifica y ahorra tiempo principalmente en la etapa de creación de un proyecto nuevo y preparación de los archivos para producción.

Uso

Es un proyecto ambicioso, más que una herramienta es un flujo de trabajo y el uso está muy ligado a las mejores prácticas del desarrollo front-end. Es una manera fácil de empezar a usar las herramientas que incluye.

Zepto

Zepto es una versión recortada de jQuery, compatible con todos los navegadores excepto Internet Explorer, ideal para desarrollar vistas basadas en HTML dentro de frameworks como PhoneGap.

Beneficio

Zepto minificada y gzipeada pesa 9.7kb (jQuery pesa 32Kb). En teoría suena perfecta, pero no es una receta instantánea para hacer un sitio más rápido.

Uso

El slogan es que si sabés jQuery, sabés Zepto. Basta con incluirla al final del documento con un fallback a jQuery:

...
<script src=zepto.min.js></script>
<script>document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>')</script>
</body>
</html>

Conclusiones

Cambié varias veces de editor de código y probé distintas aplicaciones para desarrollo front-end, pero las herramientas que realmente cambiaron cómo trabajo son los pre-procesadores de CSS y Grunt.

Hace años atrás, buscando información de cómo usar variables en CSS, llegué al sitio de Sass, pero en su momento (estaba usando Windows) me pareció complicado de usar, y ahora que lo tengo tan integrado al flujo de trabajo, me arrepiento de no haberle sacado provecho apenas lo descubrí.

Grunt me gusta mucho porque hay técnicas, por ej. minificar CSS y JS, que no hay duda que son buena idea, pero a veces porque dan un poquito de trabajo, o requieren usar múltiples mini-herramientas, no se hacen y con Grunt se pueden automatizar todas las tareas necesarias, pero tediosas.

Por ej. Bower no instala la dependencia de Backbone.js (Underscores.js).
↩
Meet CoffeeScript de PeepCode tienen animaciones que muestran claramente cómo se pasa de JavaScript a CoffeeScript (un ejemplo disponible en la free preview).
↩
-g instala globalmente (se puede ejecutar desde cualquier directorio) y –save-dev guarda en el package.json
↩
Esta tarea no ejemplifica el potencial de Grunt.
↩
En HTML5 Please hay una lista de características HTML5 y CSS3 y sugerencias en cuanto a su uso (usar, usar con fallback, usar con polyfill, evitar).
↩
Un reset de CSS hace cosas estúpidas como por ej. eliminar todos los márgenes.
↩
Nota a mí misma: cerrar la aplicación LiveReload para evitar errores (Got error listen EADDRINUSE).
↩

QDEP Google Reader

Fri, 15 Mar 2013 00:00:00 -0300

Me sorprendió la noticia del cierre de Google Reader, pero para ser sincera, para leer feeds RSS casi nunca accedí a Google Reader via web, sino a través de apps.

Alternativas a Google Reader

Las siguientes son aplicaciones para administrar suscripciones y leer feeds RSS. Google Reader tiene además recomendaciones, pero como de las 20 recomendaciones actuales, ninguna me interesa, no busco una funcionalidad equivalente.

feedly

feedly es una aplicación para Android, iOS y extensión para Firefox, Chrome y Safari. Tienen un proyecto llamado Normandy para migrar sin problemas desde Google Reader. La aplicación mostraba los feeds como una revista (similar a Flipboard), pero recientemente también agregaron una vista de lista, parecida a Google Reader.

Fever

Fever es una aplicación PHP/MySQL que instalás en tu propio servidor web. Los feeds se dividen en 2 tipos: Kindling y Sparks. Kindling son feeds esenciales y las Sparks son feeds suplementarios. En base a los links en las sparks, Fever calcula los temas “calientes” o más importantes. El concepto es interesante, pero en la práctica me resulto complicado buscar fuentes tipo sparks¹.

Para Mac se puede usar Fluid.app para tener un icono en el Dock con la cantidad de items no leídos actualizados.

Reeder

El desarrollador de Reeder anunció en Twitter:

Don't worry, Reeder won't die with Google Reader.
— Reeder (@reederapp) March 14, 2013

pero sus planes no están tan maduros como Feedly. En la versión 2 para Mac y iPad va a soportar Feedbin y otras opciones, pero no está definida la fecha de lanzamiento o cómo se van a manejar las migraciones.

Conclusiones

Por ahora voy a usar Feedly porque ya cuentan con una solución y está en desarrollo activo.

Sería genial poder agregar a usuarios de Twitter como “Sparks”.
↩

Bootstrap vs Foundation Parte 1: Prototipo rápido

Wed, 13 Mar 2013 00:00:00 -0300

TL;DR Bootstrap y Foundation son frameworks front-end similares y para determinar cuál es mejor me propuse hacer una página web con cada uno y comparar los resultados. Para prototipos rápidos obtuve mejores resultados con Bootstrap.

¿Qué diferencia a Bootstrap y Foundation?

Pre-procesadores: Bootstrap usa LESS y Foundation, Sass y Compass¹.
JavaScript: Bootstrap usa jQuery y Foundation, Zepto (con fallback a jQuery).
Compatibilidad: Bootstrap es compatible con IE7+² y Foundation con IE9+.
Uso: Además de la herramienta online para hacer un custom build, Bootstrap se puede instalar via Bower y Foundation tiene una gema para crear proyectos desde la terminal.
Estilos pre-definidos y componentes: Cada framework tiene algunos estilos CSS pre-definidos y componentes JavaScript que no están presentes en el otro. Ver una lista detallada de las diferencias.
Popularidad: A la fecha, Bootstrap tiene 46.538 estrellas en GitHub y Fundation 10.021.

¿Cuál es mejor?

Comparando las características de Bootstrap y Foundation para mí no hay un claro ganador, por eso me propuse hacer un pequeño experimento:

Prototipo rápido: a partir de un boceto en papel, ¿qué tan rápido y fácil es hacer un prototipo en HTML, CSS, JS adaptable con Bootstrap y con Foundation?
Diseño personalizado: a partir del prototipo y style-tiles, ¿qué tan sencillo o complejo es integrar un diseño personalizado? ¿son útiles los estilos pre-definidos?

Prototipo rápido con Bootstrap y Foundation

Hay varias definiciones de qué es un prototipo, en este caso me refiero a una página web funcional (HTML, CSS, JS), pero con contenido de relleno y sin diseño visual, básicamente un wireframe interactivo.

Ingredientes:

boceto en papel.
Un HTML con markup básico y contenido de relleno.
Picturefill y Font Awesome.

Trabajé en Sublime Text y el navegador con la documentación del framework a la vista. Originalmente pensé en considerar cuánto tiempo me llevó hacer el prototipo con cada framework como un factor decisivo, pero como ya tenía experiencia con Bootstrap, decidí determinar cuál es mejor en base a los resultados obtenidos.

Prototipo rápido con Bootstrap

Captura de pantalla del prototipo realizado con Bootstrap. Ver demo.

La documentación de Bootstrap es muy clara, pero el código de la navbar me parece bastante complejo, tendría que definir un snippet en Sublime Text.

Escribí 12 líneas de CSS para recuadrar rápidamente algunas secciones y “corregir” un margen que lucía como un defecto. Además modifiqué 2 variables para que el prototipo quedara en blanco y negro.

.media, .media .media{
	margin-top: 0;
}
footer.well{
	margin-top: 80px;
	margin-bottom: 0;
	padding: 40px 0;
}
.well{
	border: none;
	padding: 0;
}

El media object no funcionó como esperaba, porque en teléfonos no flota la imagen, para el prototipo usé las responsive utility classes (.visible-desktop), pero en la próxima etapa, tendría que considerar otra solución.

No tuve necesidad de escribir manualmente ninguna media query. La “versión teléfono” y “escritorio” quedaron aceptables automáticamente y principalmente para “tabletas” tuve que ajustar los tamaños de las imágenes.

Prototipo rápido con Foundation

Captura de pantalla del prototipo realizado con Foundation. Ver demo.

Foundation crea un proyecto entero, incluyendo un index.html que es útil, pero con demasiado contenido (un “Hello, World!” hubiera sido suficiente).

No encontré cómo limitar el ancho del contenido de la Top Bar y mirando el sitio de Foundation dudo que sea posible.

La grilla conceptualmente es interesante, es mobile first (1 columna por defecto), con un breakpoint a los 728px que intercambia entre la grilla small y la large, permitiendo un ajuste fino del contenido y además tiene clases para posicionar contenido independientemente del orden en el código. En la práctica tuve problemas para alinear elementos, sobre todo dentro del Orbit. No tuve necesidad de escribir manualmente ninguna media query.

Escribí 3 líneas de CSS y modifiqué una variable.

.panel{
	margin-bottom: 0;
}

La configuración de los componentes JavaScript es confusa.

<script>
	$(document).foundation('orbit topbar', {back_text: 'Atrás', bullets: false});
</script>

Y el ganador es… ¡Bootstrap!

Con Bootstrap no tuve inconvenientes y en aproximadamente media hora pude terminar el prototipo.

De Foundation me decepcionó que se define como el “más avanzado framework front-end del mundo” y sin embargo la grilla sólo funciona correctamente usando divs innecesarios.

En Bootstrap con el siguiente markup el h1 queda alineado con .span8:

<div class="container">
	<h1>...</h1>
</div>
<div class="container">
	<div class="row">
		<div class="span8">...</div>
		<div class="span4">...</div>
	</div>
</div>

En Foundation con markup equivalente, el h1 no queda alineado y es necesario agregar un div extra, ya que añadir la clase large-12.columns al h1 tampoco lo soluciona.

<div class="row">
	<div class="large-12 columns"> <!-- div extra -->
		<h1>...</h1>
	</div>
</div>
<div class="row">
	<div class="large-8 columns">...</div>
	<div class="large-4 columns">...</div>
</div>

La motivación principal de usar un framework front-end es tener a mano componentes que pueda adaptar a las necesidades de cada proyecto. El Carousel de Bootstrap tiene exactamente la funcionalidad que buscaba y solamente tendría que diseñar las flechas, el Orbit de Foundation no tiene suficientes opciones de configuración.

En el próximo artículo voy a comparar qué tan sencillo es implementar un diseño a medida con Bootstrap y Foundation. Suscribíte al feed RSS o agregame a tus círculos de Google+ para no perderte la segunda parte.

Compass a partir de la v4 no es una dependencia y se puede trabajar con Bourbon.
↩
En la versión 3 van a dejar de soportar IE7 y Firefox 3.6.
↩

Media queries

Fri, 15 Feb 2013 00:00:00 -0200

Las medias queries (consultas de medios) son una de las bases del diseño web adaptable y consisten en:

Un tipo de medio: por ej. print (páginas impresas), screen (pantallas a color) y all (todos).
Una o más expresiones, que involucran características del medio y que son verdaderas o falsas, por ej. device-aspect-ratio (orientación retrato o apaisado), device-width (ancho del dispositivo de salida), resolution (resolución), width (ancho de la superficie de renderizado).

Meta viewport

El viewport visual es la parte de la página que se está mostrando en la pantalla. El usuario puede hacer scroll para cambiar la parte de la pantalla que ve o hacer zoom para cambiar el tamaño del viewport visual.
El viewport de layout es más grande que el viewport visual y es a partir del cual CSS calculan las medidas en porcentajes.

<meta name="viewport" content="width=device-width">

Con la meta viewport se puede configurar que el viewport de layout sea igual al ancho del dispositivo para que las declaraciones CSS como por ej. width: 60% se calculen respetando la intención del diseño.

Breakpoints

Un enfoque es elegir los breakpoints según el tamaño de dispositivos populares. El problema con este enfoque es que no es amigable con el futuro, porque dispositivos que hoy son populares podrían no serlo mañana.

Ej. de mixin en Sass:

@mixin breakpoint($point) {
  @if $point == desktop {
    @media (min-width: 1249px) { @content; }
  }
  @else if $point == landscape-ipad  {
    @media (min-width: 1023px) { @content; }
  }
  @else if $point == portrait-ipad {
    @media (min-width: 767px) { @content; }
  }
  @else if $point == landscape-iphone {
    @media (min-width: 479px)  { @content; }
  }
}

.box {
  background-color: #eee;
  @include breakpoint(landscape-ipad)   { width: 75%; }
  @include breakpoint(landscape-ipad)   { width: 60%; }
  @include breakpoint(portrait-ipad)    { width: 80%; }
  @include breakpoint(landscape-iphone) { width: 95%; }
}

El otro enfoque es elegir los breakpoints según el contenido, simplemente cambiando el tamaño del navegador y determinando en qué punto el diseño necesita un ajuste.

Ej. de mixin en Sass:

@mixin adaptarse-a($query, $type:min-width){
  @media ($type: $query){
    @content
  }
}

.box{
  background-color: #eee;
  width: 90%;

  @include adaptarse-a(48em){
    width: 60%;
  }
}

mixin adaptarse-a: Con el mixin es más fácil modificar un estilo porque las declaraciones están todas juntas, en vez de estar separadas en diversas declaraciones media.
min-width vs max-width: En la filosofía Mobile first las media queries se definen con min-width¹. Empezás con estilos CSS para las pantallas más pequeñas y vas añadiendo media queries y CSS para que el diseño se adapte a pantallas más grandes.
em vs px: Usar “em” para los breakpoints es más a prueba de balas, hace que el diseño se ajuste también cuando el usuario hace zoom.

Alta definición

Para detectar dispositivos de alta resolución e incluir imágenes de fondo apropiadas u otros ajustes:

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi)
{ /* Sólo Retina (iPhone, iPad) */ }

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi)
{ /* Dispositivos de alta resolución (genéricos) */ }

Bourbon tiene un mixin para generar una media query para dispositivos de alta resolución. Acepta como parámetro opcional el pixel ratio.

.foo{
  @include hidpi(1.5) {
    background-image: url(fondo@2px.png);
  }
}

Resumen

Usar la meta viewport para RWD (diseño web adaptable).
Definir los breakpoints en min-width y ems según el contenido.

Respond.js es un polyfill para CSS3 media queries en IE 6-8.
↩

Fundamentos del diseño web actual

Thu, 14 Feb 2013 00:00:00 -0200

El acceso a Internet a través de dispositivos móviles y el auge de las redes sociales presentan desafíos y oportunidades para el diseñador web.

Desafío 1: Tamaños de pantallas

Hay un gran número de dispositivos que permiten acceder a Internet incluyendo:

dispositivos móviles: celulares, smartphones, tabletas.
dispositivos especializados: lectores de ebooks (ej. Kindle Fire), smart TVs.
dispositivos tradicionales: computadoras de escritorio, laptops, netbooks.

Mobile first

Diseñar en Photoshop con el 960 Grid System ya quedó en el pasado¹. Para diseñar para todos estos dispositivos, empezando por el básico (generalmente la pantalla más pequeña) y mejorando progresivamente (progressive enhancement) se consigue un sitio web que, como no está ligado a un dispositivo en particular, va a funcionar en todos los dispositivos actuales y futuros. Luke Wroblewski, autor de Mobile First (móvil primero) plantea las ventajas de este enfoque:

La limitaciones como por ej. el tamaño de la pantalla obligan a los diseñadores a enfocarse en el contenido y funcionalidades más importantes, lo que termina siendo beneficioso para la usabilidad en general.
Se pueden aprovechar las nuevas tecnologías como por ej. geolocalización, eventos táctiles, etc. para crear aplicaciones innovadoras.

320 and up por Andy Clarke y Jina Bolton es un ejemplo de framework que sigue la filosofía mobile first.

RWD

Responsive Web Design (diseño web adaptivo o adaptable) es un término inventado por Ethan Marcotte que define cómo adaptar un sitio web a pantallas de distintos tamaños usando:

Sistemas de grillas fluidos, basados en porcentajes, que se adaptan a cualquier tamaño de pantalla.
Imágenes y videos flexibles que mantienen el contenido intacto en cualquier resolución.
Media queries que permiten ajustar el diseño según el tamaño y resolución de la pantalla.

El diseñador web en vez de diseñar páginas, pasa a diseñar un programa (o guía de estilo) que define qué componentes se van a mantener iguales (color, forma, textura, tipografía, etc.) y cuáles van a cambiar (disposición, tamaño de letra, etc.). Al cliente en vez de mockups se le presentan style tiles que consisten en fuentes, colores y elementos de interfaz sin una disposición definida y luego microentregas en HTML/CSS para tomar decisiones en el navegador.

Desafío 2: Velocidad

La velocidad es un aspecto decisivo de la experiencia del usuario y con el crecimiento del uso móvil de Internet volvió a cobrar importancia.

PageSpeed Tools de Google e YSlow de Yahoo analizan un sitio web y dan pautas para mejorar la performance web, pero si sólo se hacen pequeños ajustes al finalizar el proyecto sin cambiar la mentalidad de diseño no se obtienen mejoras radicales.

La estética flat design está de alguna manera asociada a la performance web, porque obviamente un fondo de color sólido es más liviano que una textura (archivo de imagen) o efectos complejos con CSS (degradés, sombras, etc.), pero más allá de lo visual, un diseño enfocado en la velocidad:

se enfoca en resolver problemas, no en crear cosas lindas.
conoce profundamente al medio, cómo funcionan los navegadores y qué tipo de código se necesita para conseguir un determinado diseño o comportamiento.

Desafío 3: Contenido en todos lados

A partir del auge de las redes sociales como Twitter, Facebook, Google+, Pinterest, etc. el usuario tiene expectativas de encontrar, relacionarse y compartir contenido de más maneras y por lo tanto es importante generar contenido que pueda viajar a distintos canales y mantenerse intacto, como explica Sara Wachter-Boettcher en Content Everywhere.

Jeffrey Zeldman, autor de Designing with Web Standards, resume en un tweet el rol del contenido en el diseño web²:

Content precedes design. Design in the absence of content is not design, it's decoration.
— Jeffrey Zeldman (@zeldman) May 5, 2008

El diseñador web puede trabajar en equipo con los creadores de contenido y asesorarlos en cómo aprovechar el CMS (sistema de administración de contenido) para que el contenido sea re-utilizable. Para los diseñadores visuales la creación de gráficos útiles y atractivos, por ej. infografías que son muy compartidos en las redes sociales, es una oportunidad como especialización o como un servicio extra que puede ofrecerle al cliente.

Conclusiones

El diseño web como profesión es relativamente reciente, pero está llegando a una madurez que requiere un mayor profesionalismo. Las tácticas no son suficientes para diseñar un buen sitio web, se necesita conocer y aplicar estrategias.

Adobe está desarrollando Adobe Edge Reflow para diseñar para la web adaptable y Nathan Smith creador de 960 Grid System recientemente lanzó Unsemantic, un sistema de grilla basado en porcentajes.
↩
El contenido precede al diseño. Diseñar en ausencia de contenido no es diseño, es decoración.
↩

Qué es OOCSS

Thu, 14 Feb 2013 00:00:00 -0200

OOCSS (CSS orientado a objetos) es un término popularizado por Nicole Sullivan que se basa en 2 principios:

Separación de estructura y estilo visual: definir los estilos visuales (por ej. color de fondo y estilo de borde) como “skins” que se pueden aplicar a diversos módulos.
Separación de contenedor y contenido: evitar el selector descendiente, por ej. no usar .miObjeto h3.

Promueve la creación de una librería de componentes re-utilizables dentro del mismo sitio o entre proyectos. Los componentes son independientes de la ubicación en la página, se comportan en forma predecible¹, son por lo tanto portables y se pueden combinar para extender un módulo base.

Aplica el principio DRY (no te repitas) y por lo tanto produce CSS:

Escalable: se aplica a proyectos de cualquier tamaño.
Fácil de mantener: es una arquitectura transparente que sigue el principio de única responsabilidad.

Aplicación: el objeto media

El objeto media es una imagen y un contenido (texto) lado a lado, según se explica en The media object saves hundreds of lines of code.

<div class="media status">
	<a class="img" href="http://www.example.com/user/username">
		<img src="/images/profile-pic.jpg" alt="Nombre Usuario" />
	</a>
	<div class="bd">
		Condimentum Malesuada Tristique Risus Aenean
	</div>
</div>

.media{
	@extend %clearfix;
	display: block;
}

.media .img{
	float: left;
	margin-right: 10px;
}

.media .img{
	display: block;
}

Arquitectura front-end

Otros trabajos sobre arquitectura de CSS:

BEM: BEM (bloque, elemento, modificador) son una serie de principios desarrollados por la empresa de TI rusa Yandex para crear rápidamente sitios web fáciles de mantener en un período largo de tiempo.
SMACSS (Arquitectura modular y escalable para CSS) es una guía de estilo escrita por Jonathan Snook un diseñador y desarrollador web que trabajó en el re-diseño de Yahoo! Mail.
inuit.css es un framework BEM y OOCSS open source desarrollado Harry Roberts, un desarrollador web y arquitecto front-end.

Conclusiones

BEM, OOCSS, SMACSS surgieron como soluciones a problemas de mantenimiento de hojas de estilos CSS en grandes proyectos web, pero el concepto es aplicable a todo tipo de proyectos.

Para que la cascada se comporte de manera predecible se usan selectores de clase.
↩

SEO para diseñadores web

Mon, 11 Feb 2013 00:00:00 -0200

SEO (optimización para motores de búsquedas) son técnicas para mejorar la visibilidad de un sitio web en la página de resultados orgánicos (no pagos) de los motores de búsqueda. Estas técnicas incluyen la estrategia de contenido, la optimización del código y la promoción del sitio para conseguir enlaces.

Las técnicas se clasifican en:

white hat (sombrero blanco): técnicas aprobadas por los motores de búsqueda.
black hat (sombrero negro): técnicas penalizadas por los motores de búsqueda.

Como diseñador web podés optimizar el código, usando técnicas white hat y evitando técnicas black hat.

Técnicas SEO white hat

Metaetiquetas

Los títulos y la descripción deberían ser una descripción fiel y concisa del contenido de la página y que no se tienen que repetir en todo el sitio o en varias páginas.

<head>
	<title>Ejemplo de Título</title>
	<meta name="description" content="Ejemplo de descripción. Generalmente se muestra en la página de resultados de búsqueda.">
</head>

Como diseñador web podés indicarle al cliente qué campos del CMS (sistema de administración de contenido) vas a mostrar como título y descripción¹, o instalar un plugin para mayor flexibilidad.

Las redes sociales son un aspecto importante del SEO y agregando las metiquetas de Open Graph Protocol y Twitter Cards podés controlar los fragmentos que muestran Facebook y Twitter respectivamente cuando se comparte un enlace. Google+ usa Open Graph Protocol o Schema.org.

Estructura de las URL

Podés usar caracteres especiales en URLs, pero la práctica más aceptada es que las URLs sean en minúsculas, sin caracteres especiales (sin Ñs, sin espacios). En el canal de YouTube de GoogleWebmasterHelp hay respuestas a varias preguntas sobre SEO, en Do you recommend using special characters in URLs? y Underscores vs. dashes in URLs hay más información.

Para evitar contenido duplicado podés hacer un redireccionamiento 301 y establecer URLs canónicas.

Suprimir la “www.” al inicio de las URLs en el .htaaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

Por para ej. listados de productos que pueden estar ordenados por distintos criterios (alfabético, por precio) podés indicar la página canónica (versión preferida)².

<head>
	<link rel="canonical" href="http://www.example.com/product.php?item=camisas-hombre"/>
</head>

Para indicar la relación entre elementos paginados (por ej. un artículo dividido en varias páginas o un listado de productos que abarca varias páginas), usás rel=”next” y rel=”prev”.

Ej. para la página 2 de un artículo divido en 3 páginas:

<head>
  <link rel="prev" href="http://www.example.com/article?story=abc&page=1" />
  <link rel="next" href="http://www.example.com/article?story=abc&page=3" />
</head>

Sitemap

A través de las herramientas para webmasters podés enviar un mapa del sitio para informar a Google de todas las páginas de un sitio, incluyendo URLs que podrían no ser detectadas en los procesos de rastreo.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>http://www.example.com/</loc>
      <lastmod>2013-02-13</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.5</priority>
   </url>
</urlset>

Para generar un sitemap, podés usar un plugin o el propio sistema de plantillas del CMS para generar un archivo XML. lastmod (fecha de la última actualización), changefreq (frecuencia de actualización) y priority (prioridad) son opcionales.

Optimización de imágenes

Es recomendable que los nombres de archivo sean cortos y descriptivos, con guiones (‑) para separar palabras, pero en un sitio web grande, generalmente se nombran automáticamente las imágenes y en esos casos es importante que le des algún contexto a las imágenes, por ej. usando etiquetas.

Como diseñador web le tenés que dar al cliente herramientas para que siempre que suba una imagen pueda ingresar un atributo alt. En mi artículo anterior Accesibilidad para diseñadores web ya había mencionado la importancia de los mismos.

En ExpressionEngine podés usar el add-on Matrix y en Statamic el tipo de campo Grid para poder agregar un atributo alt a cada imagen subida.

Sobre todo si el contenido principal de tu sitio son imágenes, podés hacer un sitemap de imágenes para darle a Google más información.

<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
 <url>
   <loc>http://example.com/galeria.html</loc>
   <image:image>
     <image:loc>http://example.com/images/una-foto.jpg</image:loc>
     <image:title>Título de la Imagen</image:title>
     <image:caption>Pie de foto de la imagen.</image:caption>
   </image:image>
   <image:image>
     <image:loc>http://example.com/images/otra-foto.jpg</image:loc>
     <image:title>Otro título</image:title>
   </image:image>
 </url>
</urlset>

También podés hacer un sitemap para videos en donde podés incluir el título, descripción, la URL de la página de reproducción, la URL de miniatura, etc.

Datos estructurados

Google genera fragmentos enriquecidos de contenido marcado con microdatos (schema.org) y otros formatos (microformatos, etc.) para personas, eventos, opiniones, productos, recetas y rutas de navegación. En Does the use of schema.org markup create a ranking benefit? Matt Cutts explica que usar Schema.org es recomenendable aunque directamente no te asegura un mejor posicionamiento.

Ej. de fragmentos enriquecidos: opiniones (microdatos)

<div itemscope itemtype="http://data-vocabulary.org/Review">
  <span itemprop="itemreviewed">El Bar de la Esquina</span>
  por <span itemprop="reviewer">Juan Pérez</span> el
  <time itemprop="dtreviewed" datetime="2013-02-13">13 Feb</time>.
  <span itemprop="summary">¡El mejor bar que conozco!</span>
  <span itemprop="description">El Bar de la Esquina hace una pizza riquísima...</span>
  Puntaje: <span itemprop="rating">4.5</span>
</div>

Para poder marcar los datos tenés que definir campos personalizados en el CMS y crear las plantillas necesarias para cada tipo de dato.

La autoría se muestra en la página de resultados de búsqueda (de manera similar a los datos estructurados) y se especula que el posicionamiento de autor va a ser un cambio más radical que la actualización Panda y Pingüino.

Autoría en un resultado de búsqueda de Google.

Sobre todo para un blog multi-autor, como diseñador web podés agregar las etiquetas necesarias en la plantilla con un condicional, para dejarlo vacío si el autor no tiene aún perfil en Google+.

Contenido fresco

El contenido fresco (contenido nuevo o actualizado) es uno de las tantas señales que influye el posicionamiento. Por ese motivo, siempre es recomendable que desarrolles sitios basados en CMSs inclusive sitios web estilo folleto, para que el cliente pueda actualizar números de teléfono, horarios de oficina, sucursales y cualquier otra información útil para el visitante. Hay blogs sobre SEO que hacen curiosos experimentos de posicionamiento, pero Matt pone este tema en contexto en Is freshness an important signal for all sites?

Velocidad

La velocidad mejora la experiencia del usuario, reduce los costos operativos y además es uno de los tantos factores que Google usa para el posicionamiento en los resultados de búsqueda.

Si incorporás en tu flujo de trabajo herramientas como Page Speed o YSlow podés evaluar y mejorar la performance con sólo seguir consejos como por ej.: concatenar y minimizar archivos CSS y JavaScript, usar sprites CSS, optimizar imágenes, etc.

Técnicas SEO black hat

Nadie en su sano juicio hace black hat SEO porque no es una estrategia que funcione a largo plazo para tener un negocio legítimo en la web, pero es importante conocer en qué consisten estas técnicas para evitar problemas.

Texto y enlaces escondidos

No usar CSS para hacer el texto del mismo color que el fondo ni para que los enlaces no se distingan del texto normal.

Páginas puerta

Las páginas de resultados de búsqueda u otras páginas similares no son útiles para el visitante proveniente de un motor de búsqueda y por lo tanto conviene restringir el acceso a los robots de motores de búsqueda con un archivo robots.txt:

User-agent: *
Disallow: /resultados-de-busqueda/

Spam en comentarios

Para combatir el spam generado por los usuarios usá rel=”nofollow” para no transferirles PageRank.

Recursos

GoogleWebmasterHelp en YoutTube es un buen recurso para aprender sobre SEO y específicamente sobre el diseño y desarrollo del sitio hay varios videos cortos:

Conclusiones

Hay clientes que saben mucho de su negocio y nada sobre cómo funciona un sitio web, y cuando te contratan como diseñador web, está bueno que vos sí lo sepas. No se trata de agregar SEO como servicio o de hacer tareas ajenas a tu profesión. Se trata de asesorar al cliente y cuando le presentás el diseño, tener argumentos para justificar tus decisiones.

Por ej. para un blog basado en WordPress sería razonable usar el título de la entrada como título de la página y el extracto como meta descripción.
↩
En algunos casos es difícil determinar automáticamente cuál es la página canónica, como último recurso se puede agregar un campo personalizado para ingresarla manualmente.
↩

Accesibilidad para diseñadores web

Fri, 08 Feb 2013 00:00:00 -0200

Para desarrollar un sitio web para una audiencia muy específica, por ej. para personas ciegas hay que entender a fondo qué tecnologías de asistencia utilizan y cómo navegan la web, pero con sólo seguir algunas pautas se puede puede crear un sitio web accesible, es decir usable para la mayor cantidad de usuarios posible, incluyendo a aquellos que tienen discapacidades no sólo visuales sino también auditivas, motrices y cognitivas (dificultades de aprendizaje, desórdenes de atención, etc.).

Un sitio web accesible también se llama inclusivo en referencia a que contribuye a la inclusión social de personas con discapacidades, adultos mayores, usuarios móviles, personas con conexiones lentas, personas con bajo nivel de alfabetización y personas con discapacidades temporales (por ej. con un brazo enyesado).

¿Por qué es importante la accesibilidad?

Igualdad de oportunidades: Los sitios web accesibles permiten que las personas con capacidades diferentes accedan a más oportunidades de educación y empleo y a que puedan participar en actividades que damos por sentado, como leer noticias, etc.
Ley: Es un requisito legal en algunos casos y una buena práctica en general. Saber cómo hacer un sitio web accesible puede ser una oportunidad laboral para diseñadores y desarrolladores web.
Beneficia a todos: Un sitio web fácil de leer, fácil de navegar, etc. es beneficioso para todos los usuarios. Se pueden hacer diseños que comuniquen los valores del producto o servicio, que sean visualmente agradables y accesibles al mismo tiempo.

Diseño

El color debe ser una ayuda, pero no el único medio para trasmitir un mensaje. Por ej. en los errores de los formularios, tenés que indicar que falta completar un campo además de ponerle un borde rojo.

Suficiente contraste entre el color de fondo y el color del texto hace al sitio web más fácil de leer para todos. Una técnica para evaluar el contraste de cualquier diseño es verlo en escala de grises. Contrast Ratio es una herramienta online para calcular el contraste entre 2 colores. Indica si es o no aceptable y en qué contexto.

Código

WAI-ARIA es una especificación para que las tecnologías de asistencia, como por ej. un software de lectura de pantalla reconozca y puedan interactuar correctamente con los elementos de una página web, por ej. navegando con el teclado.

Ej. de documento HTML5 con atributos de roles ARIA:

<header role="banner">
	<a title="ir a la home page" href="/"><img src="imagenes/logo.png" alt="Nombre de la Empresa"/></a>
</header>
<section role="main">
	<!-- Contenido principal -->
</section>
<aside role="complementary">
	<!-- Artículos relacionados, etc. -->
</aside>
<footer role="contentinfo">
	© 2013 Nombre de la Empresa
</footer>

Se puede modificar el estilo por defecto de los enlaces en :focus, pero siempre hay que dejar una indicación visual para quienes navegan por el teclado.

a:focus{
	outline: thin dotted;
}

Para hacer accesibles los formularios, tenés que usar apropiadamente las etiquetas label e indicar antes del input si el campo es requerido.

Contenido

El diseñador no es responsable directo del contenido pero puede educar al cliente sobre la importancia de:

Atributos alt: El texto alt debe ser una descripción útil de las imágenes que se usan como contenido y se deja vacío (alt=”“) para imágenes decorativas. Palabras como “foto”, “imagen”, etc. son redundantes.
Subtítulos o transcripciones: Ofrecer transcripciones para contenido en audio (y video) beneficia a las personas con discapacidades auditivas y además resulta beneficioso para el SEO (optimización para motores de búsqueda).
Legibilidad: Escribir claro y simple beneficia no sólo a los usuarios con discapacidades cognitivas, sino también a los que leen por arriba, a los visitantes internacionales con conocimientos básicos del idioma del sitio, etc. Los enlaces deben tener sentido fuera de contexto (nunca usar “haga click aquí”).

Tests

WAVE es una herramienta online gratuita para evaluar la accesibilidad web. En vez de un reporte clásico, muestra la página y le superpone iconos e indicaciones. WAVE es una buena guía, pero como todo test automatizado, no sustituye al análisis completo que puede hacer un experto.

La Web Accessibility Checklist es una lista de puntos a tener en cuenta si querés hacer un sitio web accesible.

Conclusión

Un sitio web accesible es un trabajo en conjunto del diseñador web, el desarrollador front-end y el creador de contenido que beneficia a personas con capacidades diferentes y a todos los usuarios.

Tip rápido: Testing en dispositivos móviles

Wed, 06 Feb 2013 00:00:00 -0200

En diseño y desarrollo web siempre fue necesario testear en los distintos navegadores (cross-browser testing) y más recientemente en dispositivos móviles (mobile-device testing).

Testing en iPad con iOS Simulator, herramientas para desarrolladores y Edge Inspect.

Herramientas para desarrolladores de Chrome

Con las herramientas para desarrolladores de Chrome, podés anular el agente de usuario y elegir:

iPhone (iOS 4 ó iOS 5)
iPad (iOS 4 ó iOS 5)
Android 2.3 (Nexus S) y 4.0.2 (Galaxy Nexus)
BlackBerry (PlayBook 2.1, 9900, BB10)
MeeGo (Nokia N9)

También podés especificar una ubicación para la geolocalización, cambiar la orientación del dispositivo y emular los eventos táctiles.

Uso de las herramientas para desarrolladores de Chrome

Click derecho > Inspeccionar elemento
Ir a settings (el rulemán abajo a la derecha).

Simulador de iOS

El iOS Simulator se instala con Xcode y podés elegir el hardware:

iPad, iPad (Retina)
iPhone, iPhone (Retina 3.5 pulgadas), iPhone (Retina 4 pulgadas)

También podés girar a la derecha, a la izquierda, agitar, simular el teclado físico, etc.

Uso del iOS Simulator

Abrir Xcode
Ir a Xcode > Open Developer Tool > iOS Simulator

Para Android y BlackBerry también hay simuladores disponibles.

Adobe Edge Inspect

Adobe Edge Inspect sincroniza la navegación en Chrome en tu computadora con los dispositivos Android y/o iOS que estén en la misma red. Podés hacer una inspección remota con las herramientas para desarrolladores y tomar capturas de pantalla. Soporta URLs locales¹.

Uso de Adobe Edge Inspect

Instalar Edge Inspect en tu computadora, abrirlo y hacer login con tu ID de Adobe.
Instalar la extensión de Edge Inspect para Chrome.
Instalar el cliente en tu dispositivo Android, iOS o Kindle Fire.
Abrir el Adobe Edge Inspect en el dispositivo móvil y la extensión de Chrome. Insertar en la extensión de Chrome el código del dispositivo para conectarlos.

Conclusiones

Con cambiar el tamaño del navegador o usar un simulador no podés replicar la experiencia de tener en tu mano un dispositivo táctil con una pantalla de alta resolución ni evaluar la performance verdadera. Testear en dispositivos reales es lo ideal y Adobe Edge Inspect te ayuda a agilizar el proceso. De todas maneras, los simuladores son una herramienta útil, sobre todo para los desarrolladores de aplicaciones, y si no contás con una variedad de dispositivos, es mejor que hagas un test limitado o superficial a que no hagas ninguno.

Para URLs tipo http://0.0.0 sustituir por http://localhost.
↩

Tip rápido: Internet Explorer en Mac

Mon, 04 Feb 2013 00:00:00 -0200

Con Sauce podés ejecutar distintas combinaciones de navegador y sistema operativo sin instalar una máquina virtual, incluyendo:

Internet Explorer 6, 7 y 8 en Windows XP
Internet Explorer 9 en Windows 7
Internet Explorer 10 en Windows 8

Además podés debuggear usando las herramientas para desarrolladores estándar.

Ventajas de usar un CMS

Fri, 01 Feb 2013 00:00:00 -0200

Un CMS o sistema de administración de contenido separa el contenido de la presentación. Usar un CMS tiene ventajas tanto para el diseñador web como para el cliente a nivel de costos, mantenimiento y usabilidad.

Ventajas para el diseñador web

Desarrollo rápido: Podés aprovechar las funcionalidades incorporadas en el CMS para cubrir las necesidades del proyecto.
Escalabilidad, performance, seguridad: Los CMSs son el producto de desarrolladores experimentados, no es sinónimo de que sean perfectos, pero la cantidad de desarrolladores y usuarios que tienen detrás, es una garantía.
Soporte: Si durante el desarrollo, te surge una duda o un problema, tenés una comunidad que te puede dar una respuesta rápida.
Presupuesto: Hay CMSs y add-ons gratuitos o pagos, pero inclusive los pagos son más baratos que un desarrollo a medida y permiten abaratar el presupuesto y realizar trabajos para clientes con un presupuesto limitado, como pequeñas empresas locales y organizaciones sin fines de lucro.
Mantenimiento: Instalar actualizaciones de un CMS normalmente no lleva más que un par de minutos (un cambio de versión puede requerir actualizar el código de plantillas y add-ons). Para hacer un re-diseño sólo tenés que modificar las plantillas.
Ingresos pasivos: además de trabajo para clientes, podés diseñar plantillas, ponerlas a la venta y generar ingresos pasivos.

Ventajas para el cliente

Posibilidad de actualizar el contenido: no es fácil crear contenido para la web, pero por lo menos al nivel de la publicación en sí, un CMS permite que cualquiera pueda actualizar (agregar, editar y eliminar) el contenido de un sitio web.
Mantenimiento: Al usar un CMS (al contrario de un desarrollo a medida), no sos rehén del proveedor y vos mismo podés encargarte del mantenimiento o conseguir a otra persona capacitada en el tema.
Soporte: Independientemente de la documentación que te hayan entregado, por ser un sistema conocido podés encontrar ayuda online.
Presupuesto: Podés optar por una plantilla con algunas personalizaciones y más adelante, cuando tu emprendimiento empiece a generar ganancias invertir en un diseño a medida.

Ejemplos de CMSs

Drupal

Drupal es un CMS open source flexible, que soporta diversos tipos de contenido (artículo, página básica, entrada de blog, etc.) y además permite crear tus propios tipos de contenido a través de campos personalizados. Tiene herramientas para organizar, estructurar y re-utilizar el contenido, apropiadas para sitios complejos como un periódico online.

La Casa Blanca es un sitio de alto perfil creado con Drupal. Ver más sitios creados con Drupal.

Drupal para el diseñador: Es difícil encontrar la información necesaria para poder arrancar con un proyecto.
Drupal para el cliente: El dashboard para editar el contenido se muestra sobre el sitio y resulta más intuitivo que trabajar dentro de un panel de control independiente.

ExpressionEngine

ExpressionEngine en un CMS basado en el framework PHP open source CodeIgniter, pero es un producto comercial ($299) y ofrece una versión recortada gratis para sitios web no-comerciales. Para crear los canales y campos personalizados necesitás tener el diseño o un wireframe muy detallado del sitio. Podés crear relaciones entre las entradas. La comunidad es pequeña pero muy activa a través de #eecms en Twitter, un chat semanal, etc.

Visit Philly creado por Happy Cog con ExpressionEngine. Ver más sitios creados con ExpressionEngine.

ExpressionEngine para el diseñador: El sistema de plantillas es sencillo y amigable y cualquier diseño se puede integrar rápidamente. No tiene una funcionalidad integrada que le permita al cliente modificar la navegación. Algunos add-ons como Low Variables, Matrix, etc. son prácticamente imprescindibles para cualquier proyecto y el costo de los add-ons puede aumentar bastante el presupuesto.
ExpressionEngine para el cliente: Lamentablemente para el cliente no hay ninguna ventaja específica en usar ExpressionEngine¹, ya que Drupal permite gestionar el contenido de manera similar.

WordPress

WordPress es un proyecto open source que empezó como un sistema de blog, pero que evolucionó hacia un sistema de administración de contenido con más de 20.000 plugins disponibles y hoy en día es el CMS más usado².

Best Buy Mobile creado con WordPress. Ver más sitios creados con WordPress.

WordPress para el diseñador: Hay libros, tutoriales, etc. para aprender a crear temas para WordPress. Es flexible, pero cuando querés hacer un sitio que se aleje mucho de un blog se requiere conocimientos de PHP.
WordPress para el cliente: La interfaz es muy pulida y fácil de usar. Es amigable si querés hacer todo vos mismo, hay hostings que inclusive te ofrecen la posibilidad de instalarlo con un click.

Cuando no usar un CMS

Aplicaciones web: Cuando el proyecto es más una aplicación que un sitio web, por ej. si querés crear el próximo Facebook³, es difícil encontrar un CMS idóneo y un desarrollo a media suele ser la solución más apropiada.
Proyectos personales: Si querés hacer un sitio personal para practicar nuevos conocimientos es válido y razonable que quieras hacer todo a mano.

Conclusiones

Para el diseñador web: Los CMSs son una herramienta valiosa que permiten al diseñador web, sobre todo a los freelance que trabajan solos, desarrollar rápidamente sitios web con sólidas funcionalidades.
Para el cliente: Un CMS no es una varita mágica que soluciona todo tipo de problemas, es simplemente una herramienta tecnológica que usada en conjunto con asesoramiento profesional en estrategia de contenido, SEO, marketing, diseño web y otras disciplinas permite administrar y mantener actualizado un sitio web.

Hay un artículo del 2010, pero todavía válido Where the WordPress vs. ExpressionEngine PDF came from sobre ExpressionEngine vs WordPress.
↩
WordPress es el CMS más usado según las estadísticas de BuildWith.
↩
El módulo Friends de Solspace para ExpressionEngine es un mini-Facebook, así que inclusive en el caso de un proyecto web con características de red social o aplicación podría usarse un CMS.
↩

Espresso vs Sublime Text

Thu, 31 Jan 2013 00:00:00 -0200

Espresso y Sublime Text tienen las características básicas de cualquier editor de código, por ej. soporte de diversos lenguajes (resaltado de sintaxis y auto-completado), snippets inteligentes, búsqueda dentro de un archivo o proyecto, etc. pero, ¿qué los diferencia? ¿cuál es mejor?

Round 1: UI y espacio de trabajo

Captura de pantalla de Espresso (tema Quiet Night)

Espresso

Espresso tiene la típica interfaz de una aplicación de Mac, un simpático icono de aplicación (una tacita de café), y en el estado en blanco hay una ilustración de Veerle Pieters.
Los archivos del proyecto se abren en “pestañas”, que se apilan verticalmente (workspace) arriba del árbol del proyecto en la barra lateral.
El navigator permite visualizar y navegar el árbol DOM y puede ser útil para localizar etiquetas mal cerradas.
Se puede trabajar a pantalla completa.
Se pueden instalar temas manualmente copiándolos a ~/Library/Application Support/Espresso/Themes.

Captura de pantalla de Sublime Text (esquema de color Patriot por Dayle Rees)

Sublime Text

A primera vista, la interfaz de Sublime Text es super austera y poco amigable.
Los archivos del proyecto se abren en pestañas, se puede mostrar/ocultar la barra lateral (⌘K, ⌘ B) y el minimapa.
Se puede dividir la pantalla en filas y columnas (paneles).
Se puede trabajar a pantalla completa o en el modo distraction free (sólo el texto en la mitad de la pantalla).
Sublime Text viene con 22 esquemas de colores y además se pueden instalar más con Package Control, por ej. los Dayle Rees Color Schemes, que son 33 en total y están todos muy buenos.

Round 2: Extensiones

Espresso

Se puede extender la funcionalidad de Espresso con sugars (azúcares), que se descargan e instalan haciendo doble click y de desinstalan manualmente. Hay una lista de sugars en el sitio web de MacRabbit y se puede encontrar alguna más en GitHub.

Sublime Text

Sublime Text tiene un administrador de paquetes que permite buscar, instalar, listar e eliminar paquetes desde la propia aplicación.

Para instalar el Package Control, abrir la consola y pegar el siguiente comando: import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(’ ’,’%20’)).read()); print(‘Please restart Sublime Text to finish installation’)
Presionar ⇧⌘P, empezar a tipear “install”, enter en “Package Control: Install Package” para ver y buscar en el listado de paquetes disponibles.

Algunos paquetes para desarrollo front-end:

AdvancedNewFile (⌘⌥N): permite crear un archivo dentro de un directorio nuevo o existente, escribiendo la ruta, ej.: /sass/style.scss
CoffeScript
Emmet
Placehold.it Image Tag Generator
Sass

Round 3: Características distintivas

Espresso

Espresso tiene varias funcionalidades únicas, útiles para diseñadores web y principiantes.

Vista web: Espresso tiene una vista web de archivos HTML y un inspector integrado para visualizar los márgenes, padding y otros estilos CSS aplicados a un elemento. La previsualización de Espresso no me resulta útil, estoy acostumbrada a trabajar con el editor de código y el navegador simultáneamente, usando LiveReload para compilar los archivos necesarios y refrescar la página y las Chrome Developers Tools para inspeccionar elementos y otras tareas.
Editor visual de CSS: Espresso viene con CSSEdit integrado (antes se vendía por separado), una herramienta visual para crear CSS, es básicamente un cuadro de diálogo (al estilo Dreamweaver) y resulta sobre todo útil para generar el código de los degradés con CSS3.
Publicación rápida: Tiene un cliente de FTP incorporado, para sincronizar el proyecto local con el servidor web.

Sublime Text

Sublime Text posibilita realizar las acciones más comunes con el teclado, al principio cuesta un poco memorizar los atajos del teclado, pero a larga, se ahorra tiempo.

Ir a cualquier cosa: Con ⌘P se pueden abrir archivos (tipeando algunas letras del nombre)¹, usar @ para saltar a símbolos², # para buscar dentro del archivo y : para ir a un número de línea.
Cursores múltiples: hasta que no los empezás a usar, no sabés de qué te estabas perdiendo. Presionando ⌘D seleccionás una palabra y presionando repetidamente, te selecciona otras ocurrencias de esa palabra y podés editarlas simultáneamente, es una alternativa más rápida a buscar y reemplazar. Se puede usar en combinación con ⇧⌘L que divide una selección en líneas.
Paleta de comandos: Con ⇧⌘P se accede a la paleta de comandos, que replica todas las funciones de los menús, más las funciones de los plugins instalados.

Round 4: Actividad

Espresso

La versión actual es la 2.0.5, no pude encontrar la fecha de lanzamiento, pero si mal no recuerdo fue a mediados del 2012.
De Espresso leí reseñas positivas, pero ni de casualidad, ni buscando encontré algún tip que pudiera resultarme útil.

Sublime Text

La versión actual es la 2.0.1 de julio del 2012, pero en el Sublime Blog ya se anunció que la primer beta de Sublime Text 3 ya está disponible para descargar.
A la fecha, hay 1003 paquetes para descargar a través de Package Control.
En Nettuts+ hay un curso gratuito en video Perfect Workflow in Sublime Text donde Jeffrey Way explica desde las funciones básicas hasta los paquetes más populares. Además hay cantidad de artículos en diversos blogs con tutoriales, tips, etc.

Round 5: Otros detalles

Espresso

Espresso tiene pocas aunque suficientes preferencias, en un cuadro de diálogo tradicional.
Es sólo para Mac.
Se puede probar gratis durante 15 días y cuesta $75.

Sublime Text

Las preferencias en Sublime Text se pueden configurar a través de un archivo JSON, es un enfoque diferente, pero el archivo por defecto está profusamente comentado y se entiende bien.
Está disponible para Mac, Windows y Linux.
Se puede probar indefinidamente y actualmente cuesta $70.

Y el ganador es… ¡Sublime Text!

Usé Espresso durante más de 2 años³ y no tengo quejas, pero hace unos meses me decidí a cambiarme a Sublime Text. Lo había visto funcionando en algunos videos y me atrajo mucho la posibilidad de trabajar con el teclado similar a Alfred. Me llevó un rato configurarlo, descargar algunos paquetes y aprender los comandos con el teclado, pero estoy muy conforme. No volví a abrir Espresso y estoy segura que voy a seguir usando Sublime Text por muchos años.

La búsqueda de Sublime Text es difusa, para abrir un archivo basta con tipear algunas letras que aparezcan en el nombre, sin importar el orden.
↩
La definición de “símbolo” depende del tipo de archivo, en JavaScript puede ser un método, en CSS una clase, etc.
↩
Anteriormente usé Dreamweaver y Komodo Edit.
↩

11 tips sobre Jekyll

Fri, 25 Jan 2013 00:00:00 -0200

Jekyll es un generador de sitios estáticos. A partir de una plantilla y de contenido (en formato Markdown) genera archivos HTML. Es también el motor detrás de las páginas de GitHub.

Uso Jekyll desde marzo del 2012, aprendí cómo funciona leyendo la documentación y viendo el código fuente de otros usuarios y buscando con Google soluciones a problemas que fui encontrando.

Personalizar el prompt

Para generar el sitio en Jekyll, hay que usar la terminal y por lo tanto, la quise hacer más divertida.

Como me gustan los gatos, en mi .bash_profile agregué un emoji ¹:

export PS1="😺 > \W$ "
export PATH="/usr/local/bin:/usr/local/sbin:~/bin:$PATH"

Captura de pantalla de una ventana de Terminal corriendo Jekyll.

Incluir un archivo .htaccess

En config.yml teóricamente debería funcionar include: .htaccess, pero no funciona :( En GitHub, encontré la solución de Juev. Crear un archivo llamado htaccess (sin punto al comienzo) con el siguiente contenido:

---
layout: none
permalink: .htaccess
---

Generar un sitemap

Para generar un sitemap para Google usé el plugin Sitemap.xml Generator de Michael Levin. La documentación es muy clara y funciona perfectamente.

Usar : en los títulos

Para usar dos puntos, basta con ponerlo entre comillas. Ej:

title: "Mi título: es tal cosa"

Escapar caracteres en Markdown

Para mostrar un * o _ usar \ para escapar caracteres.

Resaltar sintaxis con Prism

Jekyll resalta la sintaxis con Pygments, no está mal, pero preferí usar el Jekyll Prism Plugin, ya que Prism de Lea Verou funciona muy bien con HTML/CSS/JS (se pueden definir más lenguajes) y me gustaron los estilos por defecto.

Mostrar un extracto

Para mostrar un fragmento del post (por ej. en la home page), se agrega la siguiente línea:

<!--break-->

Snippets de TextExpander

Para la metadata del post y las notas al pie (porque nunca me pude memorizar la sintaxis), uso snippets en TextExpander, ya que los puedo usar en Byword y Sublime Text.

.meta

---
layout: post
title: %fill:name%
description:
---

.fn

[^fn-%fill:name%]

Usar Grunt

Hasta poco estaba generando el sitio con jekyll –server y usando LiveReload para compilar Sass y recargar la ventana del navegador para previsualizar los cambios de contenido y diseño antes de publicar, pero ahora estoy haciendo todo en único paso con Grunt².

_config.yml

auto: false

Gruntfile.js

'use strict';
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

module.exports = function (grunt) {
	grunt.initConfig({
		connect: {
			options:{
				port: 9000
			},
			livereload: {
				options: {
					middleware: function(connect) {
						return [lrSnippet, mountFolder(connect, '_site')]
					}
				}
			}
		},
		sass: {
			dist: {
				files: {
					'css/style.css':'_sass/style.scss'
				},
				options:{
					style: 'compressed'
				}
			}
		},
		watch: {
			sass: {
				files: ['**/*.scss'],
				tasks: ['sass']
			},
			jekyllsources:{
				files: ['_includes/**', '_layouts/**.html', '_posts/**.md', 'css/**.css', '*.html'],
				tasks: 'shell:jekyll'
			},
			livereload: {
				files: ['_site/index.html'],
				tasks: ['livereload']
			}
		},
		shell:{
			jekyll:{
				command: 'jekyll',
				stdout: true
			}
		}
	});

	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.loadNpmTasks('grunt-regarde');
	grunt.loadNpmTasks('grunt-contrib-connect');
	grunt.loadNpmTasks('grunt-contrib-livereload');
	grunt.loadNpmTasks('grunt-shell');

	grunt.renameTask('regarde', 'watch');

	grunt.registerTask('default', ['livereload-start', 'connect', 'watch']);
};

Sincronizar con Trasmit

El sitio generado por Jekyll está en la carpeta “_site”. Uso Trasmit ³ como cliente de FTP e hice un par de ajustes para facilitarme la publicación:

Rules: Para publicar posts rápidamente, en las preferencias agregué una regla para que saltee las carpetas (CSS, JS, font) ya que sólo es necesario volver a subirlas al hacer un cambio en el diseño.
Linking: enlacé la carpeta local con la carpeta en el servidor. De esta manera, una vez que navego a la carpeta del servidor, en el panel izquierdo, me muestra la carpeta local.

Con esta configuración, para publicar un nuevo artículo sólo tengo que navegar hasta la carpeta del servidor y presionar el botón Sync.

Incluir un archivo Markdown

Para incluir un archivo en formato Markdown, desde un archivo HTML (por ej. incluir acerda.md en /acerca/index.html):

{% capture foo %}{% include foo.md %}{% endcapture %}
{{ foo | markdownify }}

Conclusión

En el 2009, usando Tumblr llegué a publicar 100 posts, pero sinceramente varios eran basura, desde que estoy usando Jekyll, me estoy enfocando más en escribir y me siento más orgullosa del contenido publicado. Además me resultó sencillo migrar artículos que había escrito anteriormente en otras plataformas.

Zach Holman escribió un artículo divertidísimo Abusing emoji in iOS and your Mac Los emoji sólo se ven en Safari.
↩
¿Por qué Grunt y no Rake? Como Jekyll está desarrollado en Ruby, tiene más sentido usar Rake que Grunt, pero como soy diseñadora web, me siento más cómoda con una solución basada en JavaScript.
↩
El artículo 15 Secrets of Transmit 4 me resultó muy útil.
↩

Recursos para mantenerse actualizado en diseño y desarrollo web

Thu, 24 Jan 2013 00:00:00 -0200

Mantenerse al día es importante básicamente para hacer un mejor trabajo. Conocer las nuevas técnicas y herramientas que dan resultado, y también por qué fallaron otras, te ayuda a tomar decisiones inteligentes sobre qué tecnologías web usar en un proyecto nuevo y te sirve para resolver problemas reales en un proyecto actual.

Estar al día no significa que tengas que aplicar en producción cada novedad que surge. Antes de adoptar una nueva tecnología, preguntáte:

¿es adecuada para el proyecto? Aunque tengas un martillo nuevo y brillante, todos los problemas siguen sin ser un clavo.
¿es una solución a largo plazo? Un diseño “última moda” puede verse viejo o aburrir dentro de pocos meses. Una especificación que está en desarrollo puede cambiar radicalmente y obligarte a refactorizar el código demasiado pronto.
¿cuál es el costo? Aprender y sobre todo dominar una herramienta nueva lleva tiempo.

Tomá tus propias decisiones, pero considerá adoptar una nueva tecnología cuando:

Escuchás repetidamente hablar de ella: distintas personas te la recomiendan, se habla de qué genial es en blogs y redes sociales, se publican libros técnicos sobre el tema.
Tiene una gran comunidad: miles de seguidores y cientos de contribuyentes en GitHub.
La usan los peces gordos: empresas y agencias la usan para desarrollar productos reales.

Finalmente, usar una nueva técnica o herramienta de diseño y desarrollo web puede darte un renovado entusiasmo en tu profesión e inclusive abrirte nuevas oportunidades laborales.

Artículos

Hace años leía prácticamente cada artículo publicado en decenas de blogs y sus respectivos comentarios. En la medida en que me dejaron de aportar valor o que cambiaron mis intereses, los abandoné¹. Hoy recomiendo:

The Accessibility Project: blog sobre accesibilidad, con artículos cortos y actualizados por la comunidad.
456 Berea Street: blog del desarrollador web sueco Roger Johansson principalmente sobre accesibilidad y CSS.
HTML5 Rocks: tutoriales y referencia sobre HTML5.
CSS Wizardry: blog del diseñador y desarrolladorr Harry Roberts sobre arquitectura, escalabilidad y mantenimiento de CSS con un fuerte enfoque en OOCSS.
Design Shack: blog sobre diseño web. Publican críticas de diseño, tutoriales de CSS, comparativas y reseñas de herramientas, libros y servicios y tips para aprovechar al máximo herramientas (por ej. Sublime Text 2).
Nettuts+ y Webdesigntuts+: artículos y tutoriales sobre HTML, CSS, JavaScript, etc. y Wptuts+ sobre WordPress.

Newsletters

Suscibirse a estas newsletters es la manera más fácil de mantenerse al día ya que semanalmente te envían una lista de enlaces (a veces con un pequeño resumen) organizados por temas.

Jakob Nielsen’s Alertbox: Jakob Nielsen el gurú de la usabilidad envía alertas de nuevos reportes.
HTML5 Weekly: resumen semanal sobre HTML5 y CSS3.
Web Design Weekly: resumen semanal de diseño y desarrollo web que incluye artículos, herramientas, recursos, inspiración, etc.
Web Standards Group: actualizaciones de la W3C, enlaces y recursos. Los enlaces también están disponibles en Max Design, el sitio web de Russ Weakley.
Hacker Newsletter: newsletter semanal sobre starups, tecnología y programación. Incluye artículos sobre diseño y desarrollo.
The Moz Top 10: newsletter quincenal con 10 noticias y/o tips de SEO.

Personas

Personas que vale la pena en seguir a través de publicaciones y entrevistas en distintos medios, conferencias, redes sociales, etc.² No hay enlaces, queda a tu criterio seguirlas via Google+, Twitter, RSS, etc.

David Bushell es un diseñador y desarrollador front-end, en su blog personal escribe sobre tu trabajo.
Andy Clarke, autor de Harboiled Web Design, en la Smashing Conference habló sobre fomentar una mejor participación de los clientes en proyectos de diseño adaptable y también sigue trabajando en plantillas de contratos para diseñadores web.
Brad Frost es un diseñador front-end. En setiembre del 2012 lanzó el sitio This is Responsive con patrones de diseño, recursos y noticias sobre experiencias web responsivas.
Ilya Grigorik es un ingeniero en rendimiento web, autor de High-Performance Browser Networking. En Faster, smaller and more beautiful web with WebP explica en profundidad el beneficio del formato de imagen WebP.
Paul Irish miembro del equipo de relaciones de desarrolladores de Google Chrome, desarrollador de Modernizr, CSS3 Please, HTML5 Boilerplate, etc. En Google I/O 2012 presentó Yeoman y en Fluent 2012 presentó el flujo de trabajo de desarrollo de JavaScript para el 2013.
Divya Manian, co-creadora del HTML5 Boilerplate, ingeniera de web avanzada e interactividad en Adobe, en Front-Trends 2012 habló sobre diseñar en el navegador y recientemente publicó HTML5 Boilerplate Web Development.
Matthew Moore trabaja como diseñador web. Muchos blogs de diseño giran alrededor de mostrar cosas lindas sin contexto ni análisis, pero Matthew escribe muy bien, por ej. en Branded Interactions habla sobre la relación entre la interacción con una aplicación y la identidad de la marca.
Ian Storm Taylor es el co-fundador de una startup y en su blog comenta sobre tu trabajo y explica por qué tomaron ciertas decisiones de diseño o programación. Uno de mis artículos preferidos es Never use black.
Philip Walton es un ingeniero front-end y de software, tiene unos pocos pero muy buenos artículos publicados incluyendo CSS Architecture y Defending Presentational Class Names. Para mí es el desarrollador revelación del año y me interesa seguirlo en el 2013 para saber qué más tiene para decir.

Referencia

Si vas a consultar una referencia, es importante que esté actualizada. Si estás leyendo un libro o vas a aplicar un tutorial publicado hace meses o inclusive años, te conviene verificar con una referencia si el código aún es válido o si hay algún cambio.

HTML5 Please: indica si una característica de HTML5 o CSS3 está lista para ser usada y ofrece un plan B o polyfill.
CSS3 Please!: es un generador cross-browser de reglas CSS3.
This is Responsive: patrones, recursos y noticias sobre responsive web design.

Varios

Codrops: publica tutoriales que implementan las posibilidades que ofrecen CSS3 y JavaScript en mini-proyectos como menús y carruseles de imágenes.
Line25: un resumen semanal de los mejores diseños web según el diseñador Chris Spooner para estar al corriente de las tendencias en diseño web actual.
Monday by Noon: una publicación semanal (los lunes al mediodía) donde el desarrollador Jonathan Christopher comenta artículos interesantes sobre diseño y desarrollo web.
Podcasts:La gran ventaja de los podcasts en audio es que podés escucharlos mientras trabajás y no necesitás sacarle tiempo a otra actividad.

Videos

Además de videos de varias conferencias, recomiendo estos shows:

Build Podcast: sobre herramientas de diseño y desarrollo. En cada episodio Sayanee explica paso a paso cómo usar Yeoman, Modernizr, Heroku, Grunt, etc, en un mini-proyecto.
The Breakpoint: dedicado a las herramientas para desarolladores enfocadas a la productividad conducido por Paul Irish y Addy Osmani.

Encontar un motivo para recomendar un blog, me sirvió para limpiar mi lista de suscripciones RSS.
↩
The Pastry Box Project publica los pensamientos de 30 personas influyentes sobre darle forma a la web. Svbtle y Medium son revistas online con algunos artículos relacionados a diseño y desarrollo web.
↩

En defensa de los frameworks front-end

Tue, 22 Jan 2013 00:00:00 -0200

Un framework (armazón) sirve para crear código robusto rápidamente. El desarrollo front-end abarca HTML, CSS y JavaScript. Los frameworks para HTML suelen denominarse boilerplates, para CSS sistemas de grillas y para JavaScript librerías.

Ejemplo de boilerplate

HTML5 Boilerplate: Permite usar los nuevos elementos HTML5 con confianza, ya que es compatible con Chrome, Firefox 3.6+, IE6+, Opera y Safari. Incluye una normalización de CSS y solución a bugs comunes, CSS helpers (por ej. .clearfix), estilos CSS predeterminados para impresión, un snippet optimizado para Google Analytics, configuraciones del servidor Apache orientadas a la performance (por ej. caching y compresión GZIP), favicons de ejemplo, etc. Sirve como punto de partida, en vez de empezar con un proyecto en blanco, y está profusamente comentado por lo que es también un material educativo sobre las mejores prácticas del desarrollo front-end actual¹. Creative Commons, Mercedes Benz, Nike, etc. usan el HTML5 Boilerplate.

Ejemplo de framework CSS

inuit: es un framework desarrollado por Harry Roberts de CSS Wizardry basado en Sass, que sigue los principios de OOCSS de Nicole Sullivan y la metodología BEM. Consiste en una serie de objetos abstractos, como el objeto media, el objeto isla, etc. y por supuesto un sistema de grilla basado en proporciones. Además tiene unos estilos para detectar visualmente código potencialmente inválido o no accesible.

Ejemplos de librerías de JavaScript

jQuery simplifica la selección y modificación del árbol DOM, el manejo de eventos y las interacciones AJAX. Es compatible con Chrome, Firefox 10+, IE6+, Opera y Safari 5.0+. Google, Netflix, WordPress, etc. usan jQuery.

Modernizr sirve para detectar capacidades (HTML5 y CSS3) soportadas por el navegador del usuario y ofrecer versiones alternativas o polyfills. Google, Microsoft, Twitter, etc. usan Modernizr.

Backbone.js: permite estructurar el código JS en el estilo MVC (Modelo, Vista, Controlador, o en este caso Colección) y es útil para programar aplicaciones ricas client-side donde la mayoría de la visualización y manipulación de data se realiza en el navegador (no en el servidor)². Basecamp Mobile, Rdio, Stripe, etc. usan Backbone.js.

Ejemplo de framework front-end

Bootsrap: basado en LESS, incluye una grilla de 12 columnas tradicional o fluida con breakpoints basados en dispositivos populares, estilos por defecto (tipografía, código, tablas, formularios, botones e imágenes), componentes (menús desplegables, barra de navegación, breadcrumbs, paginación barras de progreso, etc.) y plugins JavaScript (modal, pestañas, acordeón, carousel, etc.) y posibilita un desarrollo web rápido y fácil³.

BreakingNews.com de NBC hecho con Bootsrap. Más ejemplos en Built with Bootsrap.

Ventajas de usar un framework front-end

Menos código y desarrollo más rápido: Una vez superada la curva de aprendizaje, podés crear una aplicación o sitio web rápidamente, aprovechando del código incluido para no tener que escribir cada línea de código que el proyecto requeriría si empezaras de cero.
Opciones por defecto inteligentes: los frameworks front-end están basados en mejores prácticas. Los bugs más comunes y la compatibilidad con navegadores están resueltos. Son dogmáticos en la medida en que funcionan como el autor piensa que deberían funcionar en vez de tratar de complacer a todo el mundo, pero te evitan tener que re-inventar la rueda y te permiten enfocarte en los problemas reales concernientes a tu proyecto.
Soporte de la comunidad: Además del creador y/o un equipo dedicado, a través de GitHub, cientos de desarrolladores contribuyen en los frameworks front-end mencionados. Al ser usados por un gran número de personas, se requiere menos testeo.
Adecuados para el trabajo en equipo: Un framework front-end bien documentado facilita que nuevas personas comiencen a trabajar en un proyecto.

Mitos sobre los frameworks front-end

Repetidamente he escuchado críticas sobre los frameworks front-end. Paso a refutarlas:

no son semánticos: escribir HTML semántico se refiere a etiquetar la navegación primaria como nav, una composición auto-contenida como article, etc., es decir según su contenido. Las nombres de clase son sólo para los desarrolladores ya que sirven para relacionar estilos CSS o comportamientos JS con un elemento HTML⁴. Los nombres de clase atados al contenido son poco re-usables. De todas maneras, si no te gusta ver en tu código nombres de clase del estilo “.span4”, con un pre-procesador de CSS podés incluir los estilos de .span4 en por ej. “.noticia-principal” (con la directiva @extend o con los placeholders selectors de Sass).
es difícil implementar diseños complejos: algunos diseños son igualmente difíciles de implementar desde cero o usando un framework front-end, para mí el problema está causado por el desarrollo en cascada⁵, por la elección de un framework no idóneo para el proyecto o por una mala implementación del mismo.
son pesados: El error es no optimizar el código para producción, no tiene relación directa con el uso de un framework front-end.
los expertos crean su código desde cero: y seguramente usan el bloc de notas para programar. Darle la espalda a una herramienta que te simplifica el trabajo, no quiere decir que seas un experto, sino que te gusta perder el tiempo. Además me parece arrogante pensar que sos mejor que los 100+ desarrolladores que contribuyeron a Backbone, Bootsrap, HTML5 Boilerplate y jQuery, los 85 que contribuyeron a Modernizr y los 17 que contribuyeron a inuit en GitHub.

Conclusión

Los frameworks front-end son una excelente herramienta para crear un prototipo rápido y refinarlo iterativamente hasta llegar al código de producción. El HTML5 Boilerplate debería ser la opción por defecto para desarrollar cualquier aplicación o sitio web hoy en día y según sea necesario se puede combinar o sustituir por otro framework front-end más completo.

320 and up es un proyecto similar, que sigue los principios de contenido primero y diseño web adaptable, desarrollado por Andy Clarke, autor de Hardboiled Web Design.
↩
Angular.js y Ember.js son proyectos similares para crear aplicaciones web.
↩
Fundation es un proyecto casi idéntico a Bootsrap.
↩
Lectura recomendada: About HTML semantics and front-end architecture por Nicolas Gallagher y Defending presentational class names.
↩
Lectura recomendada: The Post-PSD Era por Brad Frost.
↩

Herramientas para crear y mantener un blog

Thu, 10 Jan 2013 00:00:00 -0200

No creo en la existencia de una herramienta absolutamente superior e idónea para todos los casos, por eso, en vez de recomendar sólo una o hacer una comparativa entre las diversas opciones disponibles, me pareció mejor escribir sobre el proceso de elección, ya que contestar “depende” tampoco es una respuesta útil.

¿El blog va a formar parte de un sitio web existente o es un emprendimiento nuevo? Si ya tenés un sitio web que utiliza un CMS (por ej. Drupal o ExpressionEngine) y estás conforme con él, lo más lógico es utilizar el mismo sistema para publicar y gestionar tu blog.

Si tu sitio web actual no utiliza un CMS (o no estás conforme con tu CMS actual) o se trata de un nuevo proyecto web, tenés que considerar:

Tu presupuesto.
Tus conocimientos técnicos.
Qué tipo de contenido vas a publicar.
Desde dónde vas a publicar.
Qué tan importante es tener un diseño personalizado.
Posibilidad de crecimiento.

Presupuesto

¿Estás dispuesto a gastar dinero o estás buscando una solución sin costo? Sobre todo si se trata de un blog personal, es totalmente válido usar una opción gratis, siempre y cuando tengas un plan B en caso de que el servicio cierre o deje de ser gratis y hayas leído con atención los términos y condiciones del servicio.

Opciones gratis

Calepin y Scriptogr.am leen archivos con formato Markdown y la metadata necesaria (título, fecha) almacenados en una carpeta de Dropbox y los convierten en un blog. Están orientados a escritores; podés usar directamente tu editor de texto favorito¹ para generar el contenido. En Scriptogr.am se puede personalizar el diseño con temas o CSS personalizado.
Tumblr: Tumblr te permite publicar distintos tipos de contenido (textos, fotos, citas, enlaces, música, vídeos) desde la web, a través de sus aplicaciones para Android e iOS e inclusive audio por teléfono². Además de herramienta para crear un blog, tiene características de red social, que pueden ayudarte a conseguir los primeros lectores y darle impulso a un blog nuevo. Se puede personalizar el diseño con temas o crear uno propio.
WordPress.com: WordPress.com te permite tener un sitio web gratis, podés publicar páginas y/o entradas de blog. Además de texto, también podés publicar galerías de imágenes, audio y video, desde la web o aplicaciones para móviles (Android, Blackberry, iOS, etc.). Tiene un filtro para el spam en los comentarios y un sistema de estadísticas propio. Se puede personalizar el diseño con temas. Tiene herramientas completas para importar/exportar contenido.

Bajo presupuesto

Si tenés un presupuesto muy limitado, te recomiendo que lo inviertas en comprar un nombre de dominio. Cualquiera de las opciones gratis mencionadas te dejan usar un dominio personalizado.

Opciones de pago

Squarespace: Squarespace te permite tener un sitio web con páginas, entradas de blog y/o galerías de imágenes, podés publicar desde la web o con sus aplicaciones para Android e iOS. Tiene un sistema de comentarios propio (o podés usar Disqus) y también tiene estadísticas. Se puede personalizar el diseño con temas o crear uno propio. Se puede importar contenido desde otros sistemas. Cuenta con soporte técnico 24/7.
WordPress.com: WordPress.com tiene varios upgrades premium: libre de avisos, almacenamiento extra, diseño personalizado, etc.

Conocimientos técnicos

Según tus conocimientos técnicos, podés elegir una opción hosted o self-hosted. Hosted es cuando simplemente accedés al servicio a través de la web o una aplicación, y self-hosted es cuando instalás el software en tu servidor web. No tenés que ser un genio de las computadoras para tener un blog self-hosted, de hecho la instalación de WordPress lleva 5 minutos, pero sí tenés que tener unas nociones mínimas (usar un cliente de FTP, etc.).

Principiante (hosted)

Intermedio (self-hosted)

Statamic: No necesita una base de datos, el contenido es la aplicación. Al contrario de otras opciones similares como Jekyll o StaceyApp, Statamic cuenta con un panel de control. Se puede crear un diseño a medida y hay first party add-ons para extender las funcionalidades o se pueden desarrollar plugins a medida. Es muy flexible, pero necesita bastante trabajo en el arranque. Se puede comprar una licencia para uso personal o comercial.
WordPress.org: Es la versión instalable de WordPress. Tiene las mismas características que WordPress.com y además podés instalarle plugins para extender las funcionalidades. No tiene costo.

Tipo de contenido

Obviamente podés publicar cualquier tipo de contenido con herramienta, pero hay detalles, ya sea en la interfase para publicar entradas o en las posibilidades que el sistema de plantillas tenga para darle un diseño diferente a cada tipo de contenido, que pueden facilitarte la publicación y darle una mejor experiencia a los visitantes.

Audio/Video: Tumblr y WordPress.com tienen características sólidas para publicar archivos multimedia.
Ejemplos de código: Si sos programador, podés usar Jekyll o cualquier generador estático de blog³, ya que podés generar el contenido en tu editor de código favorito y el flujo de trabajo es similar a lo que hacés todos los días.
Fotos: Si sos fotógrafo o artista visual, Squarespace tiene opciones para generar galerías de imágenes muy personalizadas con un par de clicks.
Texto: Si te gusta escribir en Markdown, seguramente te va a interesar Calepin, Scriptogr.am o Statamic.

Si tu contenido es principalmente vídeos y tu blog es self-hosted, podés usar el plan de Vimeo para alojar vídeos comerciales, o YouTube.

Desde dónde

Si vas a publicar seguido (o moderar comentarios, etc.) desde un dispositivo móvil, como un teléfono celular o una tableta, una plataforma de blog que cuente con una aplicación propia va a resultarte más cómoda.

Android: Squarespace, Tumblr, WordPress
iOS: Squarespace, Tumblr, WordPress
Windows Phone: WordPress

Diseño personalizado

Hoy por hoy deberías tener sí o sí un blog que se pueda leer cómodamente en cualquier dispositivo, si alguien tienen que usar Readability o similar para acceder a tu contenido es mala señal.

Tema Premium: Si aspirás a un diseño prolijo a bajo precio, podés optar por Tumblr ⁴ o WordPress, ya que son sistemas populares para los cuales hay una gran cantidad de temas premium disponibles.
A medida: Si tenés pensado contratar a un diseñador o si vos mismo vas a encargarte del diseño, podés elegir cualquier herramienta, aunque por regla general, las opciones self-hosted suelen ser más flexibles, ya que además de modificar el aspecto puramente estético, también podés agregar alguna funcionalidad extra que necesites por medio de plugins.

Crecimiento

Exportar/importar contenido es una tarea totalmente posible, pero por lo general engorrosa, por lo que te conviene elegir bien de entrada.

Comunidad: Si considerás importantes los comentarios, elegí por una plataforma con un sistema integrado de comentarios y que tenga un buen filtro anti-spam como Squarespace o WordPress.
Monetización: Si planeás monetizar tu blog con avisos o planes de afiliados, los términos y condiciones de algunos servicios gratuitos podrían impedírtelo. En Tumblr hay varios casos de éxito de bloggers que consiguieron propuestas editoriales, ¡vos podrías ser el próximo!
Tráfico: En las opciones self-hosted, a medida que aumenta el tráfico de tu blog, deberías mejorar el plan de hosting, para seguir proporcionándole una buena experiencia a tus lectores.

¿Y si el blog no es para mí?

Para un cliente: WordPress.org es una opción razonable, porque es una CMS flexible que puede cubrir diversas necesidades. El cliente se queda contento porque es fácil de usar y vos, una vez que aprendas bien cómo se hace un tema para WordPress vas a poder implementar cualquier diseño rápidamente y además tenés la posibilidad de generar ingresos pasivos vendiendo temas o plugins si te va más el desarrollo.
Para un amigo o familiar: si te interesa el proyecto para agregarlo a tu portfolio, podés tratarlo como a un cliente y optar por WordPress.org. Si estás ocupado y querés sacarte el proyecto rápidamente de encima, podés usar Squarespace y por último si tu amigo/familiar no quiere gastar, podés usar WordPress.com.

Mou tiene una opción para publicar directamente en Scriptogr.am.
↩
A través de una llamada de larga distancia internacional.
↩
Pelican, por ej., es el generador detrás de Calepin.
↩
En Tumblr no se puede diseñar el archivo :-(
↩

Calendarios de Adviento sobre diseño y desarrollo web

Mon, 24 Dec 2012 00:00:00 -0200

Varios sitios exclusivamente durante las 4 semanas anteriores a Navidad, publican un artículo por día.

24 ways

24 ways to impress your friends publica 24 artículos cada diciembre desde el 2005, pero conocí al sitio un par de años más tarde, buscando información sobre PNGs transparentes en Internet Explorer 6. Los artículos son principalmente sobre diseño y desarrollo front end.

Mi artículo preferido de todos los tiempos: Make your Mockup in Markup por Meagan Fisher, publicado en el 2009, argumenta que debido a que con CSS3 se logran sombras, bordes redondeados y degradés en código, Photoshop debe morir, ya que diseñar en el navegador es un proceso más eficiente.

Mi artículo preferido del 2012: Design Systems por Laura Kalbag donde explica que en el contexto de responsive web design en vez de buscar la perfección en los píxeles, que es poco realista, hay que diseñar un sistema que especifique cómo va a ser la tipografía, color, forma, etc. a través de los distintos viewports.

Web Advent

Web Advent publica desde el 2007 sobre PHP y programación en general.

Mi artículo preferido de todos los tiempos: The Framework as Franchise por Paul Jones, publicado en el 2008, dice que usar un framework para tu aplicación web es como si abrieras una franquicia (tenés una guía de cómo manejar tu negocio) y usar un framework público tiene ventajas sobre desarrollar el tuyo propio.

Mi artículo preferido del 2012: The Anti-Spec Movement Is Going Too Far por Tracy Osborn que dice que así como los desarrolladores trabajan gratis en proyectos open source, los diseñadores deberían ser más abiertos con su tiempo libre y colaborar en proyectos que beneficien a la comunidad.

Performance Calendar

Performance Calendar publica artículos desde el 2009 sobre performance.

Mi artículo preferido de todos los tiempos: Psychology of Performance por Stoyan Stefanov publicado en el 2009, nos recuerda que el tiempo es relativo y que si bien la velocidad es importante, no se trata sólo de cuántos milisegundos demora en cargarse la página, sino también de cómo se percibe.

Mi artículo preferido del 2012: Record, Examine, Fix por Addy Osmani es un tutorial paso a paso de cómo usar las DevTools para grabar y examinar y corregir una Timeline. En The Breakpoint Ep. 4 —The Tour De Timeline cubren también este tema.

UXmas

Uxmas es un calendario digital de adviento sobre UX y detrás de cada cuadro hay una sorpresa, puede ser un artículo, una historieta, etc.

Mi artículo preferido del 2012: The 4 H’s of Writing Error Messages por Ben Rowe, donde explica cómo escribir un buen mensaje de error y cuando se puede usar o no el sentido del humor.

Conclusiones

Fin de año es el momento ideal para aprender nuevas técnicas o finalmente decidirse a hacer cambios para el próximo año. ¿Ya pensaste qué vas a cambiar en el 2013? En lo personal en el 2013 quiero cambiar mi proceso de diseño y empezar por diseñar styles tiles en vez de bocetar el layout.

Podcasts sobre diseño y desarrollo web

Wed, 12 Dec 2012 00:00:00 -0200

Mantenerse al día es importante en cualquier profesión, pero sobre todo en diseño y desarrollo web, ya que constantemente surgen nuevas posibilidades y desafíos. Uno de mis métodos preferidos para mantenerme al día son los podcasts¹. porque los podés escuchar mientas hacés cualquier otra actividad.

¿Qué es un podcast?

A mí me gusta definir los podcasts como “programas de radio para descargar”². Generalmente son conducidos por una o más personas, suelen tener invitados, y cada episodio desarrolla un tema, o comentan varias noticias relevantes.

Te podés suscribir usando iTunes y configurar cada cuánto tiempo comprobar si hay episodios nuevos y qué pasa cuando hay un episodio nuevo (por ej. comprobar cada semana, cuando haya episodios nuevos descargar el más reciente y guardar todos los episodios no reproducidos).

The ExpressionEngine Podcast ➝

Actualmente conducido por Lea Alcantara (experta en diseño y ExpressionEngine) y Emily Lewis (diseñadora web freelancer, autora de Microformats Made Simple) es un podcast sobre diseño y desarrollo web enfocado en el CMS ExpressionEngine. Los episodios duran alrededor de media hora, tanto el título como la descripción de cada episodio son muy claros y hay una transcripción disponible en el sitio web de EE Podcast.

Mis episodios favoritos:

Episode #78 Stash & Template Partials, con Adrienne Travis de Devot:ee que comenta cómo implementar Stash en tu flujo de trabajo.
Episode #71 EE Hosting, con Nevin Lyne de EngineHosting que habla sobre qué hay que tener en cuenta para hostear un sitio basado en EE y cómo optimizarlo.
Episode #54 Multi-Languague Sites: Part Deux, con Nicolas Bottari, que habla sobre cómo encarar un sitio multi-lenguaje.
y un largo etc. ya que los episodios, ¡no tienen desperdicio!

Si bien los podcasts en audio no son un formato idóneo para tutoriales, el EE Podcast te da una guía sobre cómo encarar ciertos tipos de sitios (por ej. sitios con membresía, multi-lenguaje, galerías. etc.) y sobre cómo trabajar con EE profesionalmente, desde cómo venderle EE a los clientes, hasta contratos y entregables. También cubren cambios importantes realizados por EllisLab y entrevistan a miembros notorios de la comunidad de EE. Me gustaba más cuando estaba Ryan Irelan en lugar de Emily Lewis, pero sigo pensando que cualquier persona que desarrolle sitios web con ExpressionEngine, debería escuchar este podcast.

ShopTalk ➝

ShopTalk es un podcast sobre diseño web, desarrollo front end y UX, conducido por Chris Coyer (fundador de CSS-Tricks) y Dave Rupert (desarrollador en el estudio Paravel). Tienen invitados especiales y responden preguntas de los oyentes.

Mis episodios favoritos:

045: With Harry Roberts y 044:With Jefffrey Zeldman en los cuales discuten sobre la arquitectura CSS (OOCSS), dogmatismo (es malo usar IDs para estilizar vía CSS) y estándares web.
040: With Laura Kalbag: una diseñadora web británica con la cual me identifiqué a nivel personal, por su elección de diseñar en Sketch y su amor por los colores.

Entre todos los podcasts que escucho, ShopTalk es definitivamente el más divertido, por su sección #hotdrama, los chistes sobre desarrollo web de Dave y los efectos de sonido. Tienen un buen equilibrio entre las entrevistas, las respuestas a preguntas de oyentes y se nota que ambos conductores saben de qué están hablando. Es uno de los pocos podcasts de los cuales escucho absolutamente todos los episodios.

The Deeply Grapic Design Podcast ➝

Conducido por Wes McDowell (diseñador gráfico), Mikelle Morrison (diseñadora gráfica y web) y Brandon Voss (diseñador visual), para mí es un podcast refrescante, porque si bien, algunos de los conductores hacen también diseño web, se centra en diseño gráfico.

Mi episodio favorito:

Episode 14: A Pinteresting Turn of Events, en el cual comentan cómo usan Pinterest tanto para uso personal (inspiración) como para comunicarse con sus clientes.

Este podcast tiene buenos contenidos, con la candidez de diseñadores puramente visuales, que no están al tanto de qué pasa en la industria web y las redes sociales, pero creo que justamente por ese motivo, me parecen refrescantes, porque tienen un punto de vista diferente.

The East Wing ➝

Conducido por Tim Smith (diseñador), trata sobre diseño y UX.

Mi episodio favorito:

SASSin’ It Up with Bermon Painter, porque Bermon cuenta cómo se inició en la industria (jugando Diablo y Starcfrat) y por qué sabe español.

Este show tiene entrevistas a celebridades de la industria como Chris Coyer, Sarah Parmenter, Megan Fisher, Jessica Hische, Tim Van Damme, Jason Santa María, Ethan Marcotte, Bill Kenney, Matthew Smith, Dave Rupert, Paddy Donnnelly, Aarron Walter y Drew Wilson entre otros.

The Industry Radio Show ➝

Conducido por Jared Erondu (diseñador), Adam Stacoviak (fundador y editor en jefe de The Sass Way) y Drew Wilson se enfoca en starups orientadas al diseño y la industria. Tienen invitados, pero básicamente hablan sobre temas actuales.

Mis episodios favoritos:

#31: Jonathan Snook – Scalable and modular stylesheet-fu, CSS preprocessors, Retina goodness, and that fish cray, donde Jonathan Snook, el creador de SMACSS habla sobre su trabajo actual en Shopify.
#24: Joined by Ryan Singer – Great ideas, real designers, how to responsive, and Apple nailing it, donde el manager de producto de 37signals opina sobre qué es ser un Diseñador (con D mayúscula) y sobre responsive web design vs. un sitio independiente para celulares.

En cierta medida, este podcast es el más descartable ya que al hablar sobre noticias, no tiene mucho sentido volver a escuchar el episodio o escucharlo un tiempo después. Es también uno de los podcast donde los conductores hacen más auto-bombo y hablan sobre sus propios proyectos.

The Non Breaking Space Show ➝

Conducido por Christopher Schmitt (diseñador, desarrollador y autor), Dave McFarland (autor de varios “the missing manual”) y Chris Enns (desarrollador), son entrevistas a personalidades de la web.

Mis episodios favoritos son:

Verlee Pieters: la diseñadora belga más famosa cuenta cómo comenzó su carrera como freelancer, cómo conoció a su esposo y como él influyó en su negocio.
Jessica Hische: inspira sobre la importancia de tener proyectos personales.
Nicole Sullivan: cuenta cómo se inició en la industria.
y básicamente todos los episodios :D

De este show, me gusta el lado humano, los invitados son personalidades populares que han estado en otros shows (y conferencias, etc.), pero en The Non Breaking Space cuentan su historia de vida. Me parece muy interesante, porque al leer un post o una actualización de estado, o ver una shot en Dribbble, uno a veces se olvida que hay un ser humano detrás.

The Web Ahead ➝

Conducido por Jen Simmons (diseñadora y desarrolladora web, especialista en Drupal), trata sobre las tecnologías cambiantes y el futuro de la web. Los episodios duran entre 1 y 2 horas y tratan un tema en profundidad, es un show de 5by5, muy profesional, la calidad del audio es impecable y tienen un calendario con futuros episodios.

Mis episodios favoritos:

The Web Ahead 45: Web Design with Andy Clarke: Andy Clarke autor y conferencista habla sobre las críticas personales en Twitter, el diseño web, el futuro de Fireworks y las nuevas herramientas lanzadas por Adobe.
The Web Ahead 22: Apples and TVs with Jason Grigsby: sobre navegar en Internet a través de un smart TV.
The Web Ahead 21: Process & Tools with Paul Irish: Debo confesar que estoy enamorada de Paul, es entretenido escucharlo y todo lo que dice tiene sentido, me gusta su enfoque en la productividad y la importancia de elegir las herramientas adecuadas, ha aparecido en numerosos podcasts, pero creo que Jen lo entrevistó muy bien.
The Web Ahead 8: Sarah Parmenter on iOS Design: Sarah cuenta cómo diseña para iOS, qué hay que tener en cuenta, etc.

The Web Ahead no es un show particularmente divertido, ni dinámico, Jen y los invitados se extienden bastante (tiene un estilo más de conferencia que de programa de radio), los episodios duran más de 1 hora, pero el contenido vale la pena. Abarca todo lo que tiene que ver con Internet, desde sus comienzos hasta las nuevas APIs en HTML5, pasando por el contenido y las herramientas. Para mí es un show muy recomendable para cualquiera que trabaje no sólo como diseñador o desarrollador, sino también en cualquier otra profesión vinculada a Internet.

Conclusión

Como mencioné más arriba, los podcasts (de audio) son geniales para mantenerse al día, sin necesidad de dedicarle un tiempo especial, ya que se pueden escuchar mientras hacés otra cosa, en ese sentido son geniales, pero obviamente a veces se requiere profundizar en un tema más allá de lo que el podcast ofrece³.

Lamentablemente no conozco ningún podcast en español, todos los podcasts mencionados son en inglés.
↩
Un podcast puede ser cualquier archivo multimedia (audio, video).
↩
Próximamente voy a escribir sobre otros métodos “más completos” para mantenerse al día: blogs, libros y cursos online. Si te interesa, suscribíte vía RSS.
↩

¡Chau, Glitch!

Sat, 01 Dec 2012 00:00:00 -0200

Empecé a jugar Glitch durante su fase beta¹. El juego no estaba disponible 24/7, y las sesiones de testeo duraban un par de días. En cada sesión solía haber algo nuevo (una nueva habilidad, etc.).

En setiembre del 2011, Glitch hizo un reset (los jugadores beta perdieron todo los objetos y logros acumulados) y una semana después se lanzó el juego al público general, obteniendo menciones en publicaciones sobre MMOs.

El principio del fin

Apenas 2 meses después Glitch volvió a una modalidad de beta privada, debido a que los desarrolladores querían hacer cambios radicales para hacerlo más divertido para los nuevos jugadores y a su vez hacerlo interesante para que tuviera sentido seguir jugando a largo plazo.

Cambios durante el primer mes desde el lanzamiento

Espacios de fiesta: anteriormente los jugadores realizaban fiestas en sus casas, pero cualquier item, excepto aquellos guardados en el placard, podía ser “robado”.
Tomar fotos: Aprendiendo snapshotting y comprando una cámara, se pueden tomar fotos del juego.
Los emblemas obtenidos a partir de donaciones a los altares de los gigantes se pueden combinar y generar iconos.
Nuevas regiones con recursos de minería (Callopee y Pollokoo).

A fines del 2011 escribí una reseña de Glitch, mi problema con los cubimales se solucionó, y también la carencia de recursos, ya que con el nuevo sistema de casas, se puede tener casi todo disponible y este lugar especial mantiene vivos a los árboles de madera.

Cambios durante el 2012

La experiencia pasa a llamarse imaginación y se puede gastar en cartas para mejorar el personaje, en recursos para el jardín, etc.
En vez de comprar una casa con recursos definidos, todos los jugadores acceden a una casa, una torre, un jardín trasero y una calle expandibles, donde se pueden colocar recursos a elección (hierbas, luciérnagas, etc.). Con la suscripción o créditos se pueden comprar mejoras (modelos de casa y torre, papel tapiz, etc.).

Además de la casa y torre, en su calle, cada jugador tiene un mayordomo, también personalizable, que da y recibe mensajes y/o regalos a los visitantes.

La casa y el jardín trasero son privados (se pueden dar llaves) y la calle y la torre semi-privados (otros jugadores pueden visitar la calle e interactuar con los recursos). En la torre se pueden vender muebles o cualquier otro tipo de objetos creados (comida, huevos, semillas, etc.) u obtenidos (coleccionables, emblemas, etc.) por el jugador.

Venta de esencias y muebles en mi torre.

Con la posibilidad de fabricar muebles, surgen nuevas habilidades, herramientas y personajes (el perezoso que escupe clavos y el zorro que se puede cepillar para obtener textiles).

Al perezoso le gusta el heavy metal, come varillas de metal y escupe clavos.

Cajas para guardar cantidades infinitas del mismo objeto.
Cambios en el mapa para mejorar la navegación por el mundo.
Nuevas regiones exclusivas para recolectar monedas (Balzare, Haoma, Kloro y Roobrik).

En Haoma y Kloro hay unas plataformas rojas que te catapultan hacia arriba.

Los espíritus de la calle dejan de vender hielo y salmón y sólo se pueden obtener en determinadas regiones. (Hielo en Drifa y Nottis y salmón en Jal y Samudra).

El hielo demora en re-generarse, pero hay bonus por recolectarlo en equipo. Cuando pasa el cometa, se forma este corazón.

Un cardumen.

Las hazañas² sustituyen a los proyectos, durante 24 horas se plantea un objetivo, todos los participantes reciben piezas de coleccionables y se lanza una nueva región, búsquedas, etc. como premio.
El “hola”, presionando la tecla 5 ó H, se saluda a otros jugadores y hay varios logros relacionados.

Saludar es divertido, pero la performance en calles con muchos jugadores, pésima.

Una calle donde cuando entrás tenés una letra sobre tu cabeza y junto con otros jugadores podés formar palabras.
Moshi Moshi Oshilatis: una alternativa al subterráneo para viajar entre regiones distantes a través del sistema digestivo de unos dinosaurios de colores.

En el anuncio en global chat, GOD explica: Well, as it said on Keita's original proposal, Asslandia "can be explored by mouth or by anal" (true fact; his English, bless him, is still not great). (El estilo de caricaturas engaña, Glitch es un juego para mayores de 14 años, lleno de chistes con doble sentido.)

El intestino de un dinosaurio.

Shim Shiri (aka Asslandia).

El cierre

A mediados de noviembre del 2012, Tiny Speck anunció que el juego cierra en diciembre porque no atrajo una audiencia suficientemente grande para ser sustentable. Refundaron las suscripciones y compra de créditos, regalaron 2500 créditos a todos los jugadores y lanzaron todo tipo de cosas que tenían hechas para más adelante o que estaban sin terminar (regiones, estilos de casas, búsquedas, etc.).

A mí me sorprendió bastante el anuncio, porque días atrás, el staff posteó en el foro general pidiendo ideas para recetas de alto nivel para mejorar el árbol de habilidades de cocina. Poco tiempo atrás, también habían lanzado una enlace que dirigía a una landing page personalizada con tu avatar, para invitar a amigos y una hazaña que consistía en enviar invitaciones³, y hubo algunas competencias de snaps en Twitter. En perspectiva, son manotazos de ahogado.

Entre las cosas nuevas, se destaca la región Brillah (en blanco y negro), los Heli Kitties que ronronean cuando los acariciás y el Vortex of Random en el medio del Sea of Non-Specificity que consiste en varias calles diferentes entre sí, posiblemente pertenecientes a conceptos para nuevas regiones o búsquedas.

Meses atrás se había anunciado que los jugadores de niveles altos iban a poder automatizar algunas acciones con magia (pociones) o robots. El crafty bot se lanzó luego del anuncio del cierre.

Un grupo de jugadores ya había vivido el cierre de un juego social y no violento⁴ y en los foros y chat de Glitch, se percibe la frustración frente al cierre de otro MMO sobre todo porque Glitch nunca se abrió al público (excepto durante 2 meses) y no hubo esfuerzos de marketing⁵ y nuevamente se ven en la búsqueda de un juego similar.

En lo personal, el cierre de Glitch me lleva a reflexionar sobre el SaaS (software como un servicio) y el software beta. ¿Qué pasa si cierra? ¿Vale la pena invertir tiempo en probar un producto no terminado?

El jinete anuncia que el fin del mundo está cerca.

En aquel momento te podías registrar solicitando una invitación u obtener una invitación inmediata de un jugador.
↩
La única que me gustó fue la de completar búsquedas, ya que fue muy fácil encontrar a otros jugadores dispuestos a ayudar. Las demás hazañas consistían en acciones repetitivas sin sentido, como visitar tantas calles como fuera posible, decir muchos HOLAs, etc.
↩
Irónicamente, la única hazaña que no llegó a la meta mínima, fue la de invitar amigos.
↩
Faunasphere cerró en marzo del 2011.
↩
Te ofrecían algunas ventajas por comprar suscripciones durante la beta cuando el juego se lanzara públicamente, pero al mismo tiempo te advertían que el juego estaba en cambio constante. Siempre se pudo invitar amigos (aunque no te daban nada a cambio) y desde hace alrededor de un año compartir imágenes del juego, pero más allá del boca a boca, no tenían una estrategia de marketing palpable.
↩

LESS vs Sass vs Stylus

Tue, 27 Nov 2012 00:00:00 -0200

Anteriormente escribí sobre los beneficios de los pre-procesadores de CSS y la sintaxis de Less, Sass y Stylus y en esta oportunidad quería comentar otras diferencias significativas.

LESS

LESS es un pre-procesador que se mantiene fiel a la naturaleza declarativa de CSS. Te da algunas herramientas para que el CSS resulte más fácil de mantener, pero no intenta ser un lenguaje de programación.
La documentación es concisa y los ejemplos muy claros.
Se puede aprender (leyendo la documentación alcanza y sobra) e inclusive dominar en muy poco tiempo.
Aunque no es recomendable para producción, se puede empezar a usar en segundos simplemente linkeando un JavaScript, sin necesidad de instalar absolutamente nada.
Framework front-end: Bootsrap.

LESS es amigable para principiantes. Si sabés CSS, y querés mejorar tu flujo de trabajo sin hacer cambios radicales, es la mejor opción. En lo personal, después de terminar un proyecto con LESS, preferí seguir adelante y probar otras opciones.

Sass

La referencia del lenguaje es extensa.
Para aprender Sass, hay un curso en Code School Assembling Sass con videos y ejercicios para practicar el código en el navegador.
CSS Authoring Framework: Compass incluye patrones re-utilizables, mixins CSS3 cross-browser y facilita la creación de sprites. Bourbon es una librería de mixins para Sass.
Frameworks front-end: Foundation.

Sass agrega características completas de un lenguaje de programación a CSS. No todos los días vas a necesitar un loop, o un if/else, en tu hoja de estilos, pero cuando con unas pocas líneas de Sass podés resolver estilos complejos o repetitivos, es muy satisfactorio.

Stylus

La documentación es completa y con ejemplos claros, pero no tan prácticos como los de LESS.
Stylus se puede probar online.
CSS Authoring Framework: Nib es una pequeña librería con mixins CSS3 cross-browser, etc.
Framework front-end: Jeet Framework es un framework inspirado en el sistema de grilla Semantic.gs, que usa un pre-procesador de CSS para evitar incluir clases presentacionales en el HTML. Conceptualmente es lo opuesto a Bootstrap.

La sintaxis de Stylus es la más mínima (podría decirse hermosa), y la posibilidad de re-definir propiedades de CSS con los mixins transparentes es interesante, es un pre-procesador para hackers. Lamentablemente además de la documentación no hay prácticamente tutoriales o artículos detallando casos de uso.

Y el ganador es… ¡Sass!

Sass y Stylus están bastante parejos en cuanto a sus funciones, LESS es definitivamente el perdedor en ese sentido. Para mí Sass es la mejor opción porque:

hay cantidad de aplicaciones para compilar Sass para Mac/Windows, amigables para principiantes.
hay cursos en CodeSchool y artículos publicados en CSS-Tricks, The Sass Way y otros blogs para aprender Sass y mantenerse al día.
hay librerías de mixins como Compass y Bourbon, que son totalmente opcionales, pero ahorran tiempo, sobre todo para escribir CSS3 cross-browser.

I'm joining @linkedineng! They are committed to making Sass & Compass even better and so am I.chriseppstein.github.io/blog/2013/04/2…
— Chris Eppstein (@chriseppstein) April 22, 2013

Chris Eppstein anunció que va a empezar a trabajar en LinkedIn donde una de sus tareas va a ser mejorar Sass y Compass. Este es otro motivo para elegir Sass, porque hasta ahora todos estos proyectos eran mantenidos en el tiempo libre de sus creadores y tener el apoyo económico de una empresa es importante para que este tipo de proyectos pueda seguir creciendo.

Implementación del Affix de Bootsrap

Fri, 21 Sep 2012 00:00:00 -0300

Bootsrap permite crear un sitio rápidamente, simplemente agregando un par de clases aquí y allá, pero para hacer funcionar algunos componentes correctamente hay que trabajar un poquito más.

bootsrap-affix.js agrega una clase que define position:fixed al llegar a determinado punto, dejando el elemento siempre visible, mientras se scrollea el resto del documento.

Paso 1: Agregar data-spy=”affix” a un elemento de la barra lateral no tiene misterio.

<div data-spy="affix" class="quick-contact">
	...
</div>

Paso 2: Para determinar el data-offset (que define en qué punto del scroll se activa el affix), tomé una captura de pantalla con LittleSnapper y simplemente medí los pixeles.

<div data-spy="affix" data-offset-top="460" class="quick-contact">
	...
</div>

Paso 3: Como se trata de un sitio responsive, el paso siguiente fue evitar que el evento se detonara en phone y landscape tablet, ya que en esos casos, la sidebar en vez de a la derecha queda abajo del contenido principal.

En responsive.scss¹:

@media (max-width: 767px) {
	.affix{
		position: static;
	}
}
@media (max-width: 480px) {
	.affix{
		position: static;
	}
}

Paso 4: Para terminar, como position:fixed necesita un width, agregué width: inherit para que herede el ancho del parent.

.affix{
	top: 10px;
	width: inherit;
}

o responsive.less, estoy usando la versión de Bootstrap que ofrece Yeoman
↩

Alternativas a Adobe Creative Cloud para diseñadores web

Mon, 30 Apr 2012 00:00:00 -0300

Adobe en la conferencia Max del 06/05/2013 anunció el fin de Creative Suite y una nueva familia de aplicaciones y servicios Creative Cloud por suscripción y la muerte de Adobe Fireworks. Fireworks es una aplicación híbrida vectorial-pixelar y la más indicada de Creative Suite para diseño web. Si estás considerando otras opciones, Espresso, Pixelmator y Sketch son alternativas de desarrolladores independientes a Dreamweaver, Photoshop e Illustrator respectivamente, tienen un excelente rendimiento, funcionalidades específicas para diseño web y además cuestan una fracción del precio.

Espresso

Espresso es un IDE (entorno de desarrollo integrado), amigable para diseñadores¹, desarrollado por MacRabbit y es una excelente alternativa a Dreamweaver. Si te animás a un cambio más radical, te recomiendo Sublime Text.

Algunas funciones de Espresso

Herramientas de edición de código: CodeSense (autocompletado y resaltado de sintaxis), buscar y reemplazar (inclusive por proyecto), plegado, snippets, Zen coding, navegador de código, etc.
Sync y publicación: tiene incorporado un cliente de FTP para publicar rápidamente, sincronizar y navegar el servidor web.
Soporte CSS3: además de que obviamente auto-completa las propiedades y valores, tiene un panel para crear o modificar estilos, sin necesidad de acordarse la sintaxis de memoria, que especialmente es útil para los degradés y sombras CSS3.
Personalización: se puede extender las funcionalidades instalando sugars y personalizar el aspecto con temas.
Vista previa con rayos X: es una función similar a las herramientas para desarrolladores de Chrome o Firebug.

Qué le falta a Espresso

En comparación con Dreamweaver, Espresso no tiene un editor WYSIWYG. Personalmente no lo considero una carencia, pero hay otra app, Flux que sí tiene un editor visual.

Pixelmator

Pixelmator, la Mac app del año 2011, es un completo editor de imágenes y una buena alternativa a Adobe Photoshop para editar imágenes y a partir de la versión Blueberry que incorpora más herramientas vectoriales, es inclusive una alternativa a Adobe Fireworks. Soporta el auto guardado, versiones, modo a pantalla completa y almacenamiento en iCloud. La interface es agradable e intuitiva y la barra de herramientas es totalmente personalizable.

Algunas funciones de Pixelmator

Selección: Pixelmator cuenta con la varita mágica, la herramienta recuadro y recuadro oval y el lazo común y poligonal. También se puede entrar al modo máscara rápida y pintar con pinceles. Específicamente para eliminar fondos está la goma de borrar mágica.
Pintura: se pueden usar archivos de pinceles de Photoshop o crear pinceles con distinto tamaño, forma, dureza, modos de fusión, etc. Tiene también un pincel para pintar pixeles duros.
Retoque fotográfico: las herramientas para retoque son el dedo, el sello de clonar, la curita, la esponja (saturar/desaturar), enfocar, desenfocar, aclarar, oscurecer y corrección de ojos rojos. Con la herramienta curita es bastante fácil no sólo corregir pequeñas imperfecciones, sino también remover elementos no deseados. Pixelmator también cuenta con varias herramientas de corrección de color.
Compatibilidad: Pixelmator abre archivos .psd y puede exportar como .psd y todos los formatos de imagen populares y tiene una herramienta trincheta para exportar para web.
Efectos especiales: alrededor de 150 filtros.
Dibujo: si bien no es una aplicación específica para dibujo vectorial, tiene la pluma y formas básicas (cuadrado, círculo, etc.) y formas personalizadas. Las formas tienen ajustes de forma (relleno, trazo, sombra, sombra interna) similares a los estilos de capa de Photoshop.

Qué le falta a Pixelmator

Las herramientas de selección son buenas, pero extraño al lazo magnético. Photoshop tiene herramientas como los estilos de capa y las capas de ajuste que permiten un flujo de trabajo no destructivo, en Pixelmator podés volver a una versión anterior, podés duplicar capas, etc. pero no hay un método sencillo de re-ajustar una modificación más tarde.

Dónde aprender Pixelmator

Sitio oficial: En el sitio web de Pixelmator hay tutoriales disponibles en video y texto con capturas de pantalla creados por el equipo de Pixelmator y por terceros.
Abduzeedo: Fabio Sasso de Abduzeedo publica periódicamente tutoriales de Pixelmator, donde hace un uso creativo de los filtros.

Sketch

Sketch, la Mac app del año 2012, es una aplicación de dibujo vectorial desarrollada por Bohemian Coding para diseñadores web, de interfaces e iconos. Es una alternativa a Adobe Illustrator y a Adobe Fireworks. Al igual que Pixelmator, tiene soporte completo para todas las características de OS X

Algunas funciones de Sketch

Vectores definidos: permite dibujar vectores con la herramienta lápiz o a partir de primitivas y ajustarlos a una grilla de pixeles.
Estilos: cada capa puede tener hasta 4 rellenos (por ej. un color sólido + un degradé), opacidad, borde, sombra, desenfoque, etc. y muchos de estos estilos son fácilmente re-creables vía CSS e inclusive se pueden copiar al portapapeles como tal. También se pueden crear estilos de texto. En comparación con Photoshop, es mucho más sencillo y rápido crear un fondo de color sólido con ruido.
Grillas y guías: Sketch tiene una grilla tradicional (cuadriculado) y una grilla para maquetación (ancho total, número de columnas, espacio entre columnas, ancho de columna, retícula base). Las guías son inteligentes y además miden el espacio entre objetos.
Formas: las operaciones booleanas (adición, sustracción, etc.) son totalmente no-destructivas, así que trabajar con formas complejas es más sencillo porque cada parte mantiene su editabilidad.
Divisiones: Sketch tiene un campo de trabajo infinito, pero permite exportar divisiones y además la versión 2 incopora las mesas de trabajo. Un archivo puede tener múltiples mesas de trabajo, que tienen un comportamiento similar a las páginas de Fireworks, es decir, cada mesa de trabajo tiene dimensiones definidas. También se puede trabajar en páginas.

Qué le falta a Sketch

En comparación con Illustrator, el bézier no tiene tantas opciones.
En comparación con Fireworks no tiene símbolos (grupos de elementos instanciables).

Dónde aprender Sketch

Sketch Tips and Tricks blog: Bohemian Coding mantiene un blog con tutoriales, tips e inclusive archivos para descargar.
Community resources: Es una lista de videos, recursos, artículos², tutoriales, etc.

Conclusiones

Espresso, Pixelmator y Sketch son todas las herramientas necesarias para diseñar y desarrollar sitios web, carecen de algunas características presentes en Adobe Creative Cloud, porque no son tan multi-propósito, pero si solamente te dedicás al diseño web, no tiene sentido pagar por características que nunca vas a usar.

Pixelmator y Sketch tienen actualizaciones frecuentes, sin costo extra han agregado funcionalidades importantes y el futuro luce prometedor³.

Espresso muestra una pre-visualización de archivos de imágenes, es un detalle, pero la mayoría de los editores de código no lo hacen.
↩
Lectura recomendada: Photoshop Users: How To Switch To Sketch.
↩
Fuente: Cloudines y The future of Sketch
↩

Beneficios de los pre-procesadores de CSS

Mon, 12 Mar 2012 00:00:00 -0300

¿Para qué usar un pre-procesador de CSS?¹ Para escribir y mantener código CSS más rápido y con menor esfuerzo. ¿Cómo se logra esto?

Organizando mejor el código. Los pre-procesadores de CSS te permite anidar selectores, por ej. agrupar los distintos estados de los enlaces.

a{
	text-decoration: none;

	&:hover{
		text-decoration: underline;
	}
}

Usando variables. En vez “buscar y reemplazar” para cambiar por ej. un color, lo podés definir como variable. Es particularmente útil si diseñás en el navegador.

$colorAcento: #009B77;

blockquote{
	border-left: 5px solid $colorAcento;
}

Reutilizando código. Los mixins y los placeholders selectors te permiten re-utilizar bloques de código.

@mixin transicion($propiedad, $duracion:0.3s, $tweening:ease-out){
	-webkit-transition: $propiedad $duracion $tweening;
	-moz-transition: $propiedad $duracion $tweening;
	-o-transition: $propiedad $duracion $tweening;
	transition: $propiedad $duracion $tweening;
}

a{
	@include transicion(color, 0.5s);
}

%tiene-borde{
	border-bottom: 1px solid #eee;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

.item-lista{
	@extend %tiene-borde;
}

Haciendo operaciones. En vez de usar la calculadora y explicar en un comentario de dónde sacaste ese número, podés hacer la cuenta directamente.

$ritmo-vertical: 0.5em;

h1{
	margin-bottom: $ritmo-vertical * 4;
}

h1{
	margin-bottom: $ritmo-vertical * 2;
}

Usando funciones. Por ej. para un degradé o para diferentes estados de un botón o enlace, necesitás variantes de un color, hexadecimal no es un sistema particularmente intuitivo, así que en vez de usar una aplicación para elegir los colores, podés pedirle al pre-procesador un color más claro, oscuro, transparente o saturado.

$negro: #2C3E50;

.navbar{
	background-image: linear-gradient(to bottom, $negro, ligthen($negro, 10%));
}

Comentando el código. Nunca fui amiga de incluir comentarios en los archivos CSS, porque cualquiera puede verlos, pero con los pre-procesadores, tenés 2 tipos de comentarios, los clásicos que se incluyen en la compilación a CSS y los estilo JavaScript que quedan sólo en el archivo original, más privados, para vos mismo y tus compañeros de trabajo.

.btn{
	// Falta el resto de los prefijos. Usar un mixin!
	background-image: linear-gradient(to bottom, $colorEnlace, ligthen($colorEnlace, 10%));
}

Incluyendo archivos. Podés tener unas reglas básicas en un archivo maestro e incluirlo en todos tus proyectos, para no repetirte.

@import "normalize";
@import "css3-mixins";

Empezando con Sass

El código CSS es código válido Sass, así que podés empezar en cualquier momento, no tenés que esperar a empezar un proyecto de cero.

Aprender la sintaxis de Sass. En el sitio de Sass podés encontrar la documentación, con ejemplos de código Sass y código compilado CSS. El curso Assembbling Sass de CodeSchool está muy bien explicado y completo.
Compilar Sass. Podés usar una aplicación o la terminal.

Aplicaciones para compilar Sass

Aplicaciones para Mac: CodeKit (LESS/Sass/Stylus), LiveReload (LESS/Sass/Stylus), Hammer (Sass), Scout (Sass).
Aplicaciones para Windows: LiveReload (LESS/Sass/Stylus), Scout (Sass).

Uso de Sass desde la terminal

1) Instalar Sass:

gem install sass

2) Compilar Sass:

sass --watch sass/estilo.scss:css/estilo.css

Flujo de trabajo

Al empezar el proyecto, creá una carpeta “sass” o como quieras llamarla para guardar obviamente los archivos .scss y otra carpeta “css”.
Abrí la aplicación para compilar (o la terminal) y agregá la carpeta de tu proyecto, para que la vigile.
Listo!

Conclusiones

Trabajar con pre-procesadores de CSS tiene ventajas tanto en pequeños como en grandes proyectos. Si bien existen hace años, se pusieron de moda recientemente como técnica para hacer diseños web adaptables² y si todavía seguís escribiendo vanilla CSS³, te recomiendo que les una ojeada a:

Todos los ejemplos de código de este artículo son en Sass, el pre-procesador que uso y recomiendo actualemente. Los beneficios son válidos para los demás pre-procesadores con algunas diferencias en la sintaxis.
↩
Específicamente para RWD (diseño web adaptable) podés usar la función porcentaje por ej.: .sidebar{width: percentage(400px / 960px);}, usar un mixin para trabajar con media queries, etc.
↩
Como en los sundae, vanilla CSS es CSS común y corriente. Los pre-procesadores son el topping (o en español “la frutilla de la torta”).
↩

Behance vs Dribbble

Fri, 24 Feb 2012 00:00:00 -0200

¿Qué son Behance y Dribbble?

Behance es una plataforma online para mostrar y descubrir trabajo creativo. En Behance hay una gran variedad de campos creativos, artistas, fotógrafos, ilustradores, etc. El contenido es su mayoría proyectos terminados.

Dribbble es Twitter para diseñadores, los jugadores publican imágenes de 400x300px mostrando en qué están trabajando y anuncios de carácter personal. En Dribbble hay mucho diseño web y para iOS, el estilo predominante es bastante similar y perfecto desde el punto de vista de los pixeles. Es sólo por invitación.

Round 1: Behance vs Dribbble como inspiración

Proceso de diseño de Goch&Ambroziak en Behance

Behance es un sitio con una tendencia al portfolio, podés subir la cantidad que quieras de imágenes de hasta 5MB o videos, así que depende de vos, pero la mayoría muestra el proceso, la pieza terminada y detalles. Como inspiración, es interesante ver el proceso completo, ¿cómo surge la idea? ¿por qué lo hicieron así?

Shots de Mike | Creative Mints en Dribbble

Dribbble está lleno de cosas llamativas. He visto cosas geniales y otras no tanto, se puede juzgar solamente en teoría del diseño, porque no hay un contexto dentro del cual evaluar si el diseño funciona o no. 400x300px es un tamaño limitado, pero los jugadores pro pueden subir un adjunto. Mike | Creative Mints por ejemplo, suele subir un adjunto con el proceso.

Round 2: Behance vs Dribbble como feedback

En ambos sitios hay muchas felicitaciones, pero en Dribbble hay también críticas constructivas. Algunas críticas me recuerdan a los profesores en la facultad, “el texto está 1px demasiado alto”, raya lo ridículo.

Sobre un trabajo en progreso es más obvio emitir una crítica, pero de todas maneras en Behance me gustaría ver comentarios más elaborados.

Ambos sitios, apartes de los comentarios, hay un botón appreciate this (en Behance) y like en Dribbble.

Round 3: Behance vs Dribbble para descubrir

Industrial Design Served, una de las galerías curadas de Behance

En Behance, los más vistos, más discutidos y más apreciados son bastante estáticos, pero se pueden descubrir creativos en varias galerías curadas, a través del dashboard o con los múltiples filtros.

Primeras shots, agradeciendo la invitación a Dribbble

En Dribbble los novatos se destacan en la barra lateral, es un esfuerzo desde el punto de vista del sitio para promover nuevos talentos, pero por supuesto, un grupo reducido de diseñadores consigue siempre cantidades enormes de seguidores y likes, sin importar la calidad de la shot.

Round 4: ¿Quién está en Behance y Dribbble?

Opening titles de The Girl with the Dragon Tattoo por Onur Senturk

Las 10 personas o equipos más seguidos a la fecha en Behance son:

Peter Jaworowski director creativo y fundador del estudio de diseño Ars Thanea ubicado en Polonia. Entre sus clientes, se destacan Discovery Channel, Disney, Mercedes Benz, Nike y nVidia.
Jared Nickerson ilustrador y director artístico nortemericano
Joe Fenton artista
Glenn Jones después de su éxito diseñando remeras en threadleess.com, comenzó su propia línea.
Andrey & Lili fotógrafo de moda
Fontfabric diseñadores de fuentes independientes de Bulgaria
Irina Vinnij ilustradora rusa
Denis Olenik especialistas en identidad corporativa de Eslovenia
Martin Millar artista irlandés
Heydays estudio de diseño noruego

Behance es definitivamente internacional, los más seguidos son de distintas partes del mundo, tienen eventos locales en distintos países e inclusive los comentarios y contenido son en distintos idiomas, no exclusivamente en inglés.

Tapa del libro Adaptive Web Design por Veerle Pieters

Los jugadores con más seguidores en Dribbble son:

Dan Cederlholm co-fundador y diseñador de Dribbble, autor de CSS3 for web designers, publicado por A Book Apart
Meagan Fisher diseñadora web
Tim Van Damme diseñador web de Bélgica, trabaja en EEUU, en Instagram
Dribbble Actualizaciones del sitio
Morgan Allan Knutson Trabaja en Google
Rogie Diseñador web, ilustrador y blogger
SoftFacade Especialistas en UX e identidad (iconos para aplicaciones), trabajan desde San Franciso y St. Petersburgo.
Jason Santa maria Director creativo de Typekit, co-fundador de A Book Apart, fundador de Typedia, director creativo de A List Apart
Matthew Smith director creativo en Zaarly
Trent Walton Fundador de Paravel, conocidos por el sitio web promocional para IE9 “Lost World’s Fairs”

Los usuarios con más seguidores son o trabajan en EEUU y más de uno está relacionado con A List Apart.

Y el ganador es…. ¡Behance!

Creo que se puede aprender más de proyectos completos y terminados publicados en Behance que screenshots de trabajos en progreso, pero reconozco que a nivel de feedback, Dribbble tiene más potencial.

Como inspiración también prefiero Behance, porque hay trabajos de distintas disciplinas, en Dribbble hay mucho diseño web, y en las propias shots se nota un estilo demasiado similar.

Generadores de sitios web estáticos

Thu, 09 Feb 2012 00:00:00 -0200

El problema

Para entender para qué sirve un generador de sitios web estáticos, tenés que saber la diferencia entre sitios estáticos y dinámicos.

Estático: Un sitio web estático está compuesto por una o más páginas en HTML.
Dinámico: Un sitio web dinámico está compuesto por 1) una base de datos donde se almacena el contenido y la metadata (fecha de creación, categoría, autor, etc.) en tablas, 2) plantillas con el formato de las distintas páginas (por ej. página principal, página interior, etc.) y 3) un lenguaje de programación backend por ej. PHP que se comunica con la base de datos, extrae información, la coloca donde está indicado en la plantilla y genera páginas dinámicamente que cumplen ciertos criterios (por ej. las 10 noticias más recientes o los 5 productos más vendidos).

Un sitio web dinámico suena bastante complejo, ¿por qué se usan entonces CMSs (sistemas de administración de contenido) como por ej. WordPress para sitios de pocas páginas? La respuesta corta es porque los sitios estáticos son difíciles de mantener. La respuesta larga es:

No hay separación de contenido y estructura: Para editar una página tenés que saber HTML para poder por ej. cambiar un texto o una imagen sin alterar la estructura (columnas, etc.).
No es DRY (“no te repitas”): Para agregar una nueva página, tenés que copiar y pegar la estructura del documento, cambiarle el contenido, y editar todas las páginas viejas para agregar la nueva a la navegación.

Un sitio web dinámico empieza a sonar genial… pero también tienen algunas desventajas:

Obsolencia: Una vez que creás un sitio con por ej. WordPress tenés que estar pendiente de las actualizaciones. Las actualizaciones no son opcionales, porque puede ser riesgoso a nivel de seguridad usar una versión vieja.
Costo y rendimiento: Cada vez que un visitante accede al sitio, se realizan consultas a la base de datos, se generan HTMLs, etc. usando CPU y memoria. Podés crear páginas estáticas del contenido dinámico y usar otros tipos de caching, pero por qué no usar directamente un generador de sitio web estático.

La solución

Jekyll es un generador de sitios web estáticos creado por Tom Preston-Werner co-fundador de GitHub. Se puede usar para generar cualquier tipo de sitio web incluyendo un blog.

1) Instalación: Jekyll está desarrollado en Ruby y se instala via RubyGems.

sudo gem install jekyll

2) Creación del proyecto: Jekyll requiere la siguiente estructura mínima de archivos y carpetas:

Estructura básica de un sitio basado en Jekyll.

config.yml es la configuración del sitio (formato de los permalinks, variables globales, etc.).
en _includes van los parciales (fragmentos de código re-utilizables) que se pueden incluir en _layouts y _posts.
en _layouts van las plantillas (en Liquid template engine).
en _posts van las entradas. Los archivos tienen que nombrarse año-mes-dia-titulo.md
en _site es donde Jekyll va a guardar el sitio web estático generado (lo que tenés que subir a tu servidor web).

Agregá más carpetas y archivos a gusto. Jekyll no copia a _site las carpetas cuyo nombre empiece con un guión bajo.

3) Creación del contenido: Además del formato de nombre de archivo mencionado más arriba, al principio de cada archivo se requiere una cabecera de YAML:

---
layout: post
title: Titulo del post
emoticon: ":)"
---

Nibh Dolor Vehicula Venenatis **Ipsum**.

En las cabeceras de YAML se puede incluir cualquier valor y acceder a él desde el template. Ej.: código del template post.html:

---
layout: default
---
<article>
    <h1>{{ page.title }} {{ page.emoticon }}</h1>
  	{{ content }}
</article>

3) Generación del sitio: Desde el directorio del proyecto, ejecutar:

jekyll --server

Suponiendo que default.html tiene el siguiente código:

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>{{ page.title }}</title>
</head>
<body>
	{{ content }}
</body>
</html>

el HTML generado por Jekyll para ese post será:

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Titulo del post</title>
</head>
<body>
	<article>
    	<h1>Titulo del post :)</h1>
  		<p>Nibh Dolor Vehicula Venenatis <strong>Ipsum</strong>.</p>
	</article>
</body>
</html>

Podés ver el sitio generado en http://localhost:4000.

4) Publicación: Subí los archivos de la carpeta _site a cualquier servidor web. Son HTMLs así que no hay requerimientos.

Resumen

Jekyll separa estructura (_layouts) y contenido (_posts), pero no usa base de datos. El contenido son archivos planos (super fácil de respaldar en Dropbox).
Cuando agregás/editás contenido, tenés que volver a generar el sitio y subirlo al servidor web.

Conclusiones

Jekyll no es para todo el mundo ni para todos los proyectos, pero si te convencí, te invito a leer estos tips sobre Jekyll.

Si preferís una opción basada en Pyhton, te recomiendo Pelican y si buscás una opción similar pero viable para hacer sitios web para clientes, te recomiendo Kirby y Statamic, ambos en PHP, no usan base de datos, pero sí tienen un panel de administración web para agregar/editar contenido.

La sintaxis de Less, Sass y Stylus

Tue, 03 Jan 2012 00:00:00 -0200

LESS, Sass y Stylus extienden CSS con comportamientos dinámicos (variables, mixins, operaciones y funciones).

Vanilla CSS es código válido de LESS, Sass y Stylus.
Sass tiene 2 sintaxis, la más común son los archivos con extensión .scss y la declaración de propiedades y valores es idéntica a CSS. En la sintaxis más vieja (los archivos .sass) en vez de llaves y punto y coma se usa indentación.
En Stylus se pueden omitir las llaves, los punto y coma y los dos puntos.

Variables

Las variables permiten definir colores, tamaños y otros valores y re-utilizarlos en la hoja de estilo.

LESS

@colorMarca: #e61b61

.foo{
	color: @colorMarca;
}

Sass

$colorMarca: #e61b61

.foo{
	color: $colorMarca;
}

Stylus

colorMarca #e61b61

.foo
	color colorMarca

Las variables también puede consistir en una lista de expressión:

font-size 2em
fontSans = font-size Arial, Helvetica, sans-serif

h2
	font fontSans

Y además se pueden referenciar valores sin necesidad de definir una variable, aunque no le encuentro aplicación práctica más allá de centrar un elemento con posición absoluta.

.foo
	height 100px
	position absolute
	left 50%
	top 50%;
	width 100px
	margin-left -(@width / 2)
	margin-top -(@height / 2)

Mixins

Los mixins permiten re-utilizar trozos de CSS y pueden aceptar parámetros. Los mixins son populares para agregar los prefijos de los vendedores.

LESS

.box-columns (@column-count: 2){
	-webkit-column-count: @column-count;
	-moz-column-count: @column-count;
	column-count: @column-count;
}

.foo{
	.box-columns(4);
}

Sass

@mixin box-columns( $column-count: 2) {
	-webkit-column-count: $column-count;
	-moz-column-count: $column-count;
	column-count: $column-count;
}

.foo{
	@include box-columns(4);
}

Además de “@include”, Sass también tiene la directiva “@extend” que compila un CSS “más eficiente.”

.error{
	border: 1px solid red;
}

.errorSerio{
	@extend .error;
	background-color: red;
	font-weight: bold;
}

compila como:

.error, .errorSerio{
	border: 1px solid red;
}

.errorSerio{
	background-color: red;
	font-weight: bold;
}

Actualización: Sass 3.2 agrega los selectores placeholder. Usando % en vez de un . no se compila, a menos que se extienda en un selector.

%decoBorde{
	border: 1px solid #eee;
	padding: 1em;
}
%decoFondo{
	background-color: DarkBlue;
	color: white;
}

.foo{
	@extend %decoBorde;
}

compila como:

.foo{
	border: 1px solid #eee;
	padding: 1em;
}

Stylus

column-count()
	-webkit-column-count arguments
	-moz-column-count arguments
	column-count arguments

.foo
	column-count 4

“@arguments” en LESS y “arguments” en Stylus pasa todos los parámetros.
En LESS y Sass los mixins pueden tener valores por defecto.
Los mixins en Stylus son transparentes, en el caso de los prefijos de vendedores, si en el futuro ya no se necesitan, se puede eliminar el mixin.

Operaciones y funciones

LESS, Sass y Stylus permiten sumar, restar, multiplicar y dividir valores en la propia hoja de estilo.

LESS

@column: 68px;
@gutter: 24px;

.sidebar{
	float: right;
	width: (@column * 3) + (@gutter * 2);
}

Sass

.sidebar{
	width: ($column * 3) + ($gutter * 2);
}

Stylus

.sidebar
	width (column * 3) + (gutter * 2)

Las funciones de colores son un método rápido para generar colores, sin necesidad de usar una aplicación de diseño.

LESS

a:hover{
	 color: spin(@colorEnlace, 10);
}

Sass

a:hover{
	 color: complement($colorEnlace, 10);
}

Stylus

a:hover
	 invert(colorEnlace)

Comentarios

LESS, Sass y Stylus soportan los comentarios estilo JavaScript que no aparecen el archivo CSS compilado, ideales para documentar el código.

LESS, Sass and Stylus

/* Un comentario estilo CSS va a aparecer en el archivo CSS compilado */

// Un comentario estilo JavaScript no va a aparecer en el archivo CSS compilado

Stylus

/*! Este comentario va a aparecer sí o sí sin importar las opciones de compresión */

Importar

LESS, Sass y Stylus pueden importar otras hojas de estilo¹.

LESS, Sass, and Stylus

@import "mixins";

Conclusiones

LESS, Sass y Stylus son bastante similares a nivel de sintaxis. Hay otras diferencias importantes a la hora de elegir un pre-procesador de CSS para un proyecto web.

Todos los archivos importados se compilan en un único archivo CSS.
↩

Mi portfolio 2008 - 2013

Fri, 09 Dec 2011 00:00:00 -0200

En el 2008 publiqué la primera versión de mi portfolio online¹. Era un sitio estático, así que, por supuesto, nunca lo actualicé ².

portfolio online 2008 (estático)

Después intenté con WordPress, pero los campos personalizados no son suficientemente amigables, así que terminé ingresando HTML en el editor para que quedara como quería, pero el proceso no me convenció.

portfolio online 2009 (WordPress)

Leí algo acerca de toto un sistema de administración de contenido en Ruby, que no necesita una base de datos, buscando una alternativa con el más familiar PHP, me encontré con Stacey. Stacey es muy flexible, y todavía me gusta.

portfolio online principios del 2010 (StaceyApp)

Siempre sentí curiosidad por ExpressionEngine, así que compré un ebook y me encantó, al día siguiente compré una licencia freelance y armé el sitio ³. Aprender EE me trajo beneficios inesperados porque conseguí un trabajo nuevo.

portfolio online + blog finales del 2010 (ExpressionEngine)

Al poco tiempo, cuando me sentí más cómoda con EE, lo rediseñé. Luego empecé a agregarle efectos CSS3 y hacerlo adaptable ⁴.

portfolio online + blog principios del 2011 (ExpressionEngine)

Durante todos los cambios de plataforma y re-diseños, el contenido quedó más o menos igual, si bien tenía más proyectos para publicar. Al encargarme del tema del diseño y del código del portfolio, como diseñadora web, sentía la responsabilidad de actualizarlo según mis conocimientos y tendencias, pero lo más importante en un portfolio es el contenido, así que opté por Prosite de Behance ⁵, que permite elegir entre varios templates y personalizarlos, pero se enfoca más en el contenido que el contenedor.

portfolio 2011 (Behance Prosite)

Ya que en Prosite, solamente personalicé algunos colores, a principios del 2012 hice un sitio de una página, con una introducción, algunos trabajos y un formulario de contacto, para submmitirlo en galerías de CSS y generar tráfico.

sitio de una página 2012 (ExpressionEngine)

Actualización: Depués de varios meses de usar Prosite, me empezó a frustar el método de publicación. Se publican proyectos a través de la web de Behance y páginas y personalizaciones de diseño a través de la web de Prosite, así que cancelé mi cuenta en Behance y desarrolle un portfolio provisorio con Jekyll.

En la versión actual de mi portfolio estoy usando Statamic, es un CMS muy interesante, en PHP y sin base de datos, que permite editar el contenido directamente o a través de un panel de administración. Statamic soporta varios tipos de campos, incluyendo: texto, fecha, estado, etiquetas, grilla, etc. que me resultaron muy útiles para agregar metadata a los proyectos y gestionar las imágenes.

Los cambios más importantes en esta versión:

suprimí las thumbnails porque en las miniaturas no se nota de qué se trata el proyecto, las reemplacé por un listado de items, cada uno con un color de fondo tomado de uno de los colores del proyecto.
integré un “curriculum / actualización de estado” en la sección “work”.
diseñé varios estilos de imágenes. Las screenshots están todas al 100%⁶ y el degradé y borde simulando un navegador está hecho con CSS, esto me va a dar gran flexibilidad en futuros re-diseños porque no voy a tener necesidad de actualizar las imágenes.
agregué una sección privada. Hay algunas piezas que por distintos motivos no están publicadas, pero se pueden ver con usuario y contraseña.

portfolio actual (Statamic)

Conclusiones

Es difícil diseñar para uno mismo, en cada re-diseño siempre tuve la intención de que fuera el último, para poder dedicarle más tiempo al contenido, a escribir mini casos de estudio y agregar más proyectos. También pasé por varios CMS, pero lo veo como una experiencia positiva porque creo que es importante tener por lo menos un sitio personal para experimentar y poder probar cosas nuevas.

En el 2005 creé un porfolio en Flash. En el 2007, con Macromedia Director. Era un CD que llevaba a entrevistas de trabajo, ahora estoy en una Mac y ni siquiera puedo abrir los archivos .exe, mala, mala idea.
↩
Diseñe otra versión estática con una textura de madera oscura de fondo, no tengo guardados los archivos. La ventaja de seguir una tendencia es que recibí bastante tráfico de galerías y showcases de sitios web basados en CSS.
↩
En el 2010 - 2011 incorporé un blog al portfolio, pero actualmente son 2 sitios independientes.
↩
Estuve puliendo detalles durante meses, pero nunca llegué a terminar ni a publicar esta versión (portfolio + blog adaptable en EE).
↩
También barajé la posibilidad de usar Carbonmade o Coroflot, pero no son suficientemente personalizables y Cargo es sólo por invitación.
↩
Desde el punto de vista de la performance, no es lo más inteligente usar imágenes tan grandes. Seguramente más adelante agregue por lo menos una versión alternativa de cada imagen optimizada para móviles.
↩

Reseña de Glitch

Thu, 08 Dec 2011 00:00:00 -0200

Glitch¹ es un juego multijugador masivo en línea, gratis para jugar, desarrollado por Tiny Speck². Es un side scroller y se juega en un navegador con Flash instalado. El caprichoso mundo, llamado Ur, se encuentra dentro de la mente de 11 gigantes. Se puede interactuar con diversos objetos y NPCs.

Glitch no es violento, ¡pero podés ir al infierno!

Puntos a favor

Estilo visual

El estilo visual es interesante. El mundo está dividido en regiones y cada una tiene su propio estilo, algunas inspiradas en el mundo real, como las ancestral lands y otras como Uralia y la isla de Ix surgen puramente de la creatividad de los ilustradores. Cada región tiene además una banda de sonido distintiva que completa la experiencia.

Tocando una canción para es cangrejo en Ix

Zona privada

Podés comprarte una casa, adquiriendo recursos privados y un placard para expandir el espacio de tu inventario, o simplemente dejar las cosas tiradas en el piso.

Sentido del humor

Los animales, árboles e incluso las rocas, tienen un gran sentido del humor. Hay varios items ridículos como por ejemplo los huevos de chancho y la mayoría de las bebidas, polvos, pociones, etc. tienen efectos divertidos, por ejemplo tomar Essence of Purple te teleporta a Le Voyage Violet, una calle violeta con una gravedad inusual, donde un personaje aparece y desaparece y te dice frases al azar.

Alucinando con esencia de purple.

Libertad

Tenés libertad de elegir distintos caminos y buscar actividades que te gusten e interesen, por ejemplo, podés acumular recursos para contribuir en proyectos, jugar carreras y mini-juegos, coleccionar artículos, hacer instalaciones artísticas, etc.

Instalación artística.

Puntos en contra

Acciones repetitivas, mucha espera

Las búsquedas son repetitivas. Por ejemplo, una vez que recorriste un determinado número de calles, tenés que buscar fantasmas, lo cual implica volver a viajar por todo el mapa, prestando particular atención a las zonas con fondo oscuro.

Búsqueda Notice the unnoticeable

Cada interacción con el mundo (por ej. regar un árbol) o crear un item (por ej. gas pesado) toma mucho tiempo. Tenés que ser una persona muy paciente para jugar Glitch. No hay gratificación instantánea.

Esperando la próxima fase de un proyecto en Rasana. Un proyecto suele tardar horas.

Ur es un mundo persistente, así que las acciones de un jugador, afectan a todos. No me molesta que un jugador envene un árbol y plante otro, pero como todo demora tanto en Glitch, es muy frustante, sobre todo para jugadores casuales, ir a una región buscando un recurso (por ej. sparkly en las cavernas) y que las calles estén totalmente vacías, sin ningún recurso disponible, ya que los recursos demoran varios minutos en re-generarse.

No hay metas

No hay una meta definida, te dan búsquedas cuando adquirís ciertas habilidades o llegás a cierto nivel, pero como hay un nivel máximo y una cantidad finita de búsquedas, muchos jugadores terminan viendo la descripción de los logros en la enciclopedia y hacen lo que haga falta para conseguir la medalla, pero sazonar 2003 huevos, uno atrás del otro, no es divertido.

Admirando el paisaje

Demasiado social

Una fiesta es una actividad social divertida, pero depender de otras personas para completar una tarea no lo es. Una búsqueda particularmente frustrante es Peter out Peat, donde se necesitan 4 personas y una sincronización perfecta para vaciar un peat bog. Además, en los jardines comunales, las minas, durante los ataques del rook y proyectos, la gente quiere imponer sus propias reglas y como adulto, es molesto que te digan qué hacer.

Una fiesta en Glitch

Fallas en la economía

Antes de octubre, podías comprar cualquier cosa a un NPCs, luego los desarrolladores retiraron algunos artículos, así que tenés que fabricarlos o comprárselos a otros jugadores, pero como no hay profesiones, todos pueden aprender todo, así que nadie compra, o por lo menos, nadie compra a precios mayores que el vendedor de herramientas. Cuando lanzan un item nuevo, los jugadores que lo obtienen primero lo venden a altos precios durante un período corto de tiempo, pero eso no es suficiente para mantener una economía saludable.

El Rube no es bueno canjeando, así que te ofrece artículos interesantes por cualquier porquería que tengas en el inventario.

Los cubimales

Siguiendo con el tema de la economía, en Glitch es bastante fácil obtener currants (la moneda del juego) y también muy fácil gastarlos rápidamente en fiestas y cubimales.

Los cubimales son juguetes a cuerda para jugar carreras, pero comprás la caja cerrada y es una sorpresa cuál viene adentro. Completar la colección de cubimales es tan difícil como ganar la lotería. No podés vender los repetidos en las subastas, ni donarlos en los altares, solamente canjearlos con otros jugadores, y encontrar interesados no es sencillo y lleva tiempo.

Pila de cubimales

Conclusiones

Glitch tiene mucho potencial, y si bien los desarrolladores lanzan nuevas vestimentas, regiones, habilidades, etc. relativamente seguido, por el momento, me aburrió.

Glitch cerró el 9/12/2012. Algunas de las imágenes son del 2012.
↩
Fundada en el 2009 por los creadores de Flickr.
↩

5 tips para optimizar ExpressionEngine

Tue, 01 Nov 2011 00:00:00 -0200

1. Deshabilitar queries innecesarias

{exp:channel:entries channel="channel_name" disable="categories|category_fields|custom_fields|member_data|pagination"}
	...
{/exp:channel:entries}

2. Deshabilitar las opciones de tracking

Opciones de tracking de ExpressionEngine

Si querés mostrar estadísticas tipo “714 usuarios online”, habilitá online user tracking.

3. Usar Mountee

Mountee es un add-on que monta los templates como un disco. Te ayuda a:

guardar los templates en la base de datos y no como archivo, sin perder la posibilidad de usar tus herramientas favoritas
usar snippets en vez de embeds: con Mountee, además de los templates, podés crear y editar fácilmente global variables y snippets, así que no hay excusa para usar embeds para todo. Excepto que necesites pasar una variable, los snippets son más rápidos.

4. Usar Minimee

Minimee es un add-on gratis para ExpressionEngine que combina y cachea archivos CSS y JS.

Crear una carpeta con permisos 777 y configurar el cache path y cache URL
Agregar las tags correspondientes

{exp:minimee:css minify=“y” combine=“y” }
  <link rel="stylesheet" href="{path='_styles/base'}">
  <link rel="stylesheet" href="{path='_styles/style'}">
{/exp:minimee:css}

{exp:minimee:js minify=“y” combine=“y”}
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="{path='_scripts/plugins'}"></script>
{/exp:minimee:js}

5. No exagerar

Si habilitaste compresión GZIP en un archivo .htaaccess, no la habilités también en el panel de control.
Habilitar el cache de templates puede ser contraproducente.

2 alternativas gratis a Microsoft Office

Tue, 19 Oct 2010 00:00:00 -0200

Excel, PowerPoint y Word son programas sólidos. Para una oficina, se justifica el precio, pero para un uso hogareño es medio caro. Hay alternativas, no tan completas, pero que definitivamente compensan sus carencias al ser gratis.

OpenOffice

OpenOffice es una suite Open Source disponible para Linux/Mac/Windows. Incluye:

Writer - equivalente a Word
Calc - equivalente a Excel
Impress - equivalente a PowerPoint
Draw - equivalente a Visio
Base - equivalente a Access

Lo podés descargar desde OpenOffice.org.

Ventajas de OpenOffice

Una de las principales ventajas a la hora de cambiarse es que podés abrir y editar archivos creados con MS Office e inclusive podés guardar archivos con extensión .doc (Word), .ppt (PowerPoint) y .xls (Excel). Otro punto a favor es que podés exportar como PDF.

Desventajas de OpenOffice

Faltan varias opciones/funciones, por ejemplo cambiar mayúsculas y minúsculas sólo tiene la opción “MAYÚSCULAS” o “minúsculas”, no existe la opción “Tipo oración”. Algunas opciones son muy difíciles de encontrar, los menús están ordenados raro.

Tienen un aspecto visual bastante desactualizado y pasado de moda, parece un programa de hace 10 años atrás. OpenOffice es una suite que funciona, pero no dan muchas ganas de pasar tiempo usándola.

Google Docs

Google Docs es una alternativa basada en web, para acceder simplemente necesitás una cuenta de Google. Por ser una aplicación web funciona en todos los sistemas operativos y no requiere instalación. Incluye:

Documentos - similares a Word
Presentaciones - similares a PowerPoint
Hojas de cálculo - similares a Excel
Formularios
Dibujos - equivalentes a Visio

Ventajas de Google Docs

Google Docs también te abre archivos de Office (Upload…) y te deja descargar archivos en varios formatos, incluyendo MS Office, OpenOffice y PDF. Las ventajas más importantes de Google Docs, derivan del hecho de tratarse de una aplicación web:

Almacenamiento seguro: los archivos se almacenan en la nube, no tenés que hacer backups manualmente
Podés acceder desde cualquier computadora conectada a Internet: no es necesario andar con un pendrive encima para trasladar archivos
Compartir es fácil: tan sólo tenés que otorgar permisos o mandar un link
Se actualiza automáticamente: está en constante desarrollo y las mejoras son notorias

Otra ventaja es la lista de archivos (equivalente al Explorador de Windows), que permite organizar los documentos en carpetas, con etiquetas de colores, para administrarlos de manera eficiente.

Con el formulario, que no tienen equivalente en MS Office, podés generar formularios de contacto, encuestas, etc., sin tener conocimientos de programación y publicarlos en la web, para que la gente los rellene.

Desventajas de Google Docs

Al igual que OpenOffice tiene algunas limitaciones, por ejemplo, podés aplicar estilos de texto, pero los estilos no son editables.

5 consejos para cambiarse de Windows a Mac

Thu, 09 Sep 2010 00:00:00 -0300

Usé Windows durante muchos años, pero me cansé de los problemas de rendimiento, de estar constantemente actualizando el antivirus y analizando todo el disco en busca de malware, de tocar el registro para solucionar problemas diversos, etc. Además veía capturas de pantalla y videos de aplicaciones para Mac, y me moría de ganas de usarlas!

Recientemente me cambié de Windows Vista a Mac OS X y quería compartir algunos consejos.

1. Invertir primero en un libro

Compré Switching to the Mac: The Missing Manual, Snow Leopard Edition por David Pogue y me ayudó en 2 aspectos:

La publicidad en el fondo es publicidad, los blogs sobre Mac están escritos por Apple fanboys, pero un libro técnico es neutral. La decisión ya la había tomado, pero el libro me dió la seguridad de que Mac era el sistema operativo adecuado para mí.
MAC OS X es fácil, lo difícil es cambiar. Con Switching to the Mac aprendí las tareas más básicas, instalar y desintalar una aplicación, cómo abro un programa, cómo borro un archivo, etc.

En el Kindle fui subrayando algunos pasajes y después que compré la Mac, revisé las notas.

2. Tener una mentalidad abierta

Cada sistema está desarrollado con una filosofía diferente, al alinear mi forma de pensar con dicha filosofía, me resultó más sencillo aprender y dominar rápidamente el Mac OS. Usar una Mac con la cabeza de Windows, no funciona. Como en Matrix, para doblar la cuchara, hay que entender que la cuchara no existe.

Para esto sí, me sirvió ver las keynotes de Steve Jobs, donde además de calificar todo como beautiful o magical, explica los por qué del diseño de los productos.

3. ¿Es necesario instalar…?

Antes de empezar a instalar a lo loco cuanta aplicación existe sobre la faz de la tierra, verifiqué si es una función nativa.

Ejemplos:

Vista Previa abre archivos PDF, no es necesario instalar Adobe Reader
Las Notas Adhesivas reemplazan a Post-it® Digital Notes
Gracias al Medidor de Color Digital ya no tengo que hacer una captura de pantalla y abrirla en un programa de diseño para ver el color de un elemento

4. Cambiar las aplicaciones

Hay cantidad de aplicaciones que son multiplataforma, por ejemplo todas las aplicaciones desarrolladas en Adobe AIR y los proyectos Open Source más conocidos (Firefox, Thunderbird, OpenOffice, etc.).

Me pareció tentador seguir utilizando las mismas aplicaciones, por ejemplo, en Windows usaba TweetDeck ¹ y lo podría instalar, pero clientes nativos como Echofon, rinden mejor y son más coherentes con la experiencia del usuario de Mac.

A cualquier desarrollador que le preguntes qué cliente de FTP usa en Windows, te va a contestar FileZilla. Tiene versión para Mac, pero sin embargo todo el mundo usa Cyberduck o Trasmit. Leo frecuentemente Mac.AppStorm para enterarme qué aplicaciones son populares.

El equivalente a Microsoft Office en Mac es iWork que incluye:

Pages: procesador de texto, equivalente a Word.
Numbers: hoja de cálculo, equivalente a Excel.
Keynote: presentaciones de diapositivas, equivalente a PowerPoint.

5. Empezar de a poco

El primer día, transferí archivos, usé Mail e instalé un par de aplicaciones esenciales para mi trabajo y nada más.

De a poco fui agregando más aplicaciones a mi arsenal. Nunca había usado una agenda, pero la verdad que iCal está muy bueno y potente en combinación con Automator. Lo que me queda por delante es aprender algo sobre Terminal.

Conclusiones

Cambiar es divertido, pero también lleva su tiempo, sobre todo dejar atrás los malos hábitos, en Windows perdía mucho tiempo organizando archivos, en Mac, Spotlight funciona, así que bien podría tirar todo de una única carpeta.

Actualización: Echofon está descontinuado. Twitter adquirió TweetDeck y está disponible en la App Store.
↩

Cloud storage el backup ideal

Mon, 16 Aug 2010 00:00:00 -0300

Los problemas del backup tradicional

En esta era digital en la que vivís, dependés en mayor o menor medida del uso de la computadora, que como bien sabés, puede fallar. Según el daño que sufra el disco duro, los datos pueden ser irrecuperables. Podés comprar uno nuevo, pero ¿cómo reemplazás documentos de trabajo, de estudio, fotografías digitales de familiares y amigos, etc.? ¹

Necesitás una copia de seguridad de tus archivos en CD, en DVD, en un pendrive, o en un disco duro externo como backup (o respaldo). Aplicando la Ley de Murphy (todo lo que puede salir mal, va a salir mal), tener una única copia, es lo mismo que no tener ninguna, ya que cuántas veces te habrá pasado de grabar un CD o DVD y que luego no lo puedas leer.

En este punto, llegamos a la primera conclusión: para que una copia de seguridad sea efectiva, tiene que ser redundante, o en otras palabras, tenés que tener más de 1 copia.

Ahora suponete que tenés la computadora y en la misma habitación 2 copias en DVD. ¿Qué pasa si ocurre un incendio, una inundación, un robo? Perdés todas las copias. Llegamos a la segunda conclusión: para que una copia de seguridad funcione, las tenés que almacenar en ubicaciones diferentes.

¿Entonces cómo hacés? Una opción puede ser guardar una copia en tu casa y otra en la de un amigo o familiar. Así surge un nuevo problema: tenés que mantener las copias sincronizadas, ya que obviamente vas a seguir generando nuevos documentos o modificando los existentes. Es un trabajo muy tedioso, pero por suerte hay otro método.

La solución moderna y efectiva

Los problemas que tenés como usuario con tu información, también los tienen las grandes empresas, y la solución es para todos la misma: almacenar los archivos en Internet, más específicamente usando un cloud storage (almacenamiento en la nube), donde se guarda la información en un disco virtual, que no guarda una relación directa con un recurso físico.

¿Cómo ponés en práctica esta solución? Dropbox es una aplicación muy sencilla que te permite acceder a todas las ventajas del cloud storage. Cuando lo instalás crea una carpeta especial y cuando copiás archivos a dicha carpeta los copia a un servidor Amazon S3. Si tenés más de una computadora (por ej.: una de escritorio y un laptop), podés instalar Dropbox para sincronizar tus archivos y también sirve para compartir archivos (por invitación o público).

En el video, te muestro cómo se usa DropBox.

video mostrando el uso de Dropbox

¿Es seguro guardar archivos en Internet?

Así como un banco se especializa en guardar dinero, hay empresas que se especializan en guardar información. En cuanto a la seguridad física, solamente ingresan los empleados necesarios y se verifica su identidad con múltiples métodos. A nivel informático cuentan con medidas contra los ataques más comunes. Más información en AWS Overview of Security Processes

¿Alguien puede ver mis archivos?

La información se almacena cifrada, usando el algoritmo AES 256 que hasta la fecha nadie ha podido romper e intentar combinaciones aleatorias para descifrar la clave tardaría más de una vida!

Solo se puede acceder a los archivos con el usuario y contraseña, por lo tanto tenés que eligir una contraseña de por lo menos 8 caracteres combinando letras/números, mayúsculas/minúsculas y signos de puntuación. Además tené precaución al usar la función de recordar contraseñas del navegador web si compartís la computadora con otras personas.

Conclusiones

Instalá DropBox y ¡empezá a hacer backup de tus documentos!

Este artículo fue publicado el 16/08/2010 en YoReparo
↩

Mejor legibilidad con Safari

Sun, 04 Jul 2010 00:00:00 -0300

Safari tiene 2 1/2 funcionalidades para facilitar la lectura en la pantalla: hoja de estilo personalizada, lector y habla.

1. Hoja de estilo personalizada

Ir a Safari > Preferencias > Avanzado y en hoja de estilo seleccionar tu propia hoja de estilo.

Si no estás familiarizado con el código CSS, te recomiendo typography.css del Better Web Readability Project.

2. Lector

Cuando Safari detecta un artículo, habilita el botón lector en el campo de direcciones inteligente. Lector muestra el sólo el artículo en una modal, bloqueando los avisos para que no te distraigan.

1/2. Habla

Si estás cansado o simplemente no tenés ganas, podés hacer click derecho > Habla > Iniciar locución.

Internet para principiantes: Búsqueda de información

Mon, 05 Apr 2010 00:00:00 -0300

Para buscar información en Internet se utilizan justamente “buscadores”. Los buscadores son sitios web que mediante programas automatizados (denominados spiders, web crawlers o bots), indexan, o sea elaboran un índice del contenido de la web. Al introducir palabras (términos de búsqueda), el buscador devuelve una lista de sitios relevantes.

Googlear es un neologismo que significa buscar en Google.

El buscador más popular en la actualidad es Google. Otros buscadores conocidos son Yahoo! y Bing. A su vez, es común que en sitios, especialmente blogs, foros y tiendas, haya buscadores propios o internos, que sólo buscan dentro de ese sitio en particular.

Cómo hacer una búsqueda en Google

Los navegadores, además de la barra de direcciones, tienen una barra de búsqueda o en el caso de Chrome¹ es una única barra con ambas funciones. También se puede ingresar la URL del buscador en la barra de direcciones, que es lo que te aconsejo hacer, ya que el buscador predeterminado varía según la configuración de cada navegador.

Para buscar en la web con Google, ingresá cualquier palabra o palabras y te devolverá una página de resultados de búsqueda. Si en la primera página de resultados, no encontrás lo que estabas buscando, te recomiendo probar con otros términos más descriptivos y remover todas las palabras superfluas.

Anatomía de un resultado de una búsqueda en Google

(1) Término/s de búsqueda utilizado/s.

(2) Quizás quisiste decir / Se muestran resultados de… Google ofrece una corrección ortográfica.

(3) Enlaces patrocinados - son publicidad, pero relacionada a lo que buscás y muchas veces son la respuesta.

(4) Título de la página web.

(5) URL de la página.

(6) Extracto o descripción de la página, en negrita se destacan los términos de búsqueda.

(7) Traducir esta página, para contenidos en otros idiomas, Google ofrece la posibilidad de ver una traducción automática.

(8) Nombre y foto del autor.

(9) Resultados de imágenes o videos, aunque no busques específicamente imágenes o videos, en algunos casos, te muestra algunos.

(10) Fragmentos enriquecidos: algunas búsquedas (por ej. eventos, reseñas, etc.) ofrecen información adicional en la propia página de resultados, que pueden ahorrarte tiempo según el dato que estés buscando.

(11) Búsquedas relacionadas, clickeando busca ese nuevo término.

En “Herramientas de búsqueda” (ver primera imagen) tenés más opciones para refinar tu búsqueda:

páginas en español, de tu país, traducidas
fecha
sitios con imágenes, páginas no visitadas, diccionario
tu ciudad

TIP Abrir enlace en una pestaña nueva: Cuando en una página de resultados, veas alguno que te interese, te recomiendo hacer click derecho > Abrir enlace en una pestaña nueva (o ⌘ click en Mac), porque es más práctico que ir para atrás y para adelante.

Búsqueda avanzada en Google

La búsqueda avanzada es más exacta y admite los siguientes operadores:

Ejemplo	Encuentra páginas que contengan…
auto Ford	las palabras auto y Ford
“había una vez”	la frase exacta había una vez
esto OR aquello	la palabra esto o la palabra aquello
receta -carne	recetas sin carne
Internet site:apuntesalmargen.com	la palabra internet en el sitio apuntesalmargen.com ²
LCD Philips $600..$800	un LCD Philips que cueste entre $600y $ 800³

Búsquedas especiales de Google

Ejemplo	Muestra directamente…
clima Madrid ó temperatura Madrid	el estado del tiempo en Madrid
Boston Celtics	el resultado del último y la fecha del próximo partido de los Boston Celtics
5 libras en kg	conversión de unidades
20 EUR en US$	conversión de monedas
2+2	calculadora
define: información	definición de la palabra información

Ver la lista completa de trucos y sugerencias de Google.

Búsqueda de imágenes

En Google también podés buscar imágenes y refinar los resultados por:

fecha
tamaño
color
tipo (rostros, fotos, etc.)

o podés buscar imágenes en sitios específicos como Flickr y Pinterest.

Flickr es una aplicación para administrar y compartir fotos y videos online. Las imágenes pertenecen a álbumes que usualmente contienen imágenes relacionadas y se pueden ver como presentación.
Pinterest: Pinterest es otro servicio que permite a los miembros que claven imágenes, videos y otros objetos en un muro de corcho virtual. Se puede buscar o también navegar las distintas categorías (arquitectura, moda femenina, etc.).

Búsqueda de videos

En Google se pueden buscar videos y refinar por:

duración
fecha
calidad
sólo subtitulados

o podés buscar en sitios específicos como YouTube o Vimeo.

YouTube: Es un sitio para compartir videos con familiares, amigos y el mundo.
Vimeo: Es otro sitio para compartir y descubrir videos libre de avisos.

Búsqueda de lugares

En Google Maps o en la aplicación Mapas de iOS 6 podés buscar direcciones, instrucciones de cómo llegar a un lugar determinado y comercios (o instituciones) locales. El mapa es interactivo, podés desplazarte, alejarte o acercarte y ver la vista estándar o satelital.

Búsqueda de personas

Podés buscar cualquier cosa incluyendo personas en Google, pero es más probable que encuentres…

amigos en Facebook: Facebook es una herramienta social que te pone en contacto con amigos, podés buscarlos por nombre y apellido, por amigos en común, por ciudad de origen/actual, centro de estudios, etc. y una vez que agregues un par de amigos, Facebook te va a sugerir personas que quizás conozcas.
colegas en LinkedIn: LinkedIn es una red profesional, funciona como un curriculum vitae online y más que nada vas a encontrar información de contacto y laboral de compañeros de estudios y trabajo.

Otros recursos

Para las ratas de biblioteca, Goodreads es un catálogo online de libros y reseñas, que permite buscar por género, título, autor o ISBN.
Para los amantes del cine, IMDb es el sitio más popular y completo para encontrar datos sobre cine, TV, actores, directores, etc.
Para estudiantes, Wikipedia es una enciclopedia gratis escrita y editada por voluntarios.

Preguntas y respuestas

Si en vez de buscar un dato, necesitás una respuesta con un toque humano, podés hacer tu pregunta en cualquier red social (por ej. Facebook, Google+, o Twitter) y según quiénes sean tus amigos/círculo/seguidores podrás o no obtener la solución, o más específicamente podés probar suerte en:

StackExchange: es un grupo de sitios de preguntas y respuestas temáticos donde los usuarios tienen un sistema de reputación que permite que el sitio se auto-modere. El primer sitio fue StackOverflow sobre programación y preguntas técnicas pero actualmente hay 94 sitios sobre temas que van desde matemática hasta religión y continúan aceptando propuestas para abrir nuevos temas. Muchas veces buscando en Google, vas a llegar a una respuesta publicada en StackExchange.
Quora es otro sitio de preguntas y respuestas editado y organizado por la comunidad. curaqion es una revista mensual que recopila respuestas a temas interesantes discutidos en Quora.

Conclusión

En Internet podés encontrar fácilmente cualquier tipo de información y como si esto no fuera suficiente, podés contactarte con expertos para obtener respuestas a tus dudas.

Actualización: Safari también unificó la barra de navegación y búsqueda.
↩
Esta búsqueda es muy útil para buscar en un sitio grande que no tenga buscador interno.
↩
También válido para fechas, precios y medidas.
↩

¿Cuál es el mejor navegador web?

Mon, 28 Dec 2009 00:00:00 -0200

Cada día Internet se torna más interactiva. Además de mirar páginas, comprás online y usás aplicaciones basadas en web - desde el simple correo electrónico hasta aplicaciones de oficina y administración, juegos, etc. - por lo tanto es relevante qué navegador usás.

Apple Safari (Windows/Mac)

Safari, el navegador predeterminado de Mac OS X, tiene una visualización única del historial: el cover flow. Tiene también un suavizado de fuentes propio, que hace que las fuentes en tamaños grandes, luzcan asombrosas.

Muchos desarrolladores utilizan el Firefug e YSlow (para Firefox), pero Safari cuenta con un inspector web nativo, que cumple las mismas funciones.

Es ideal para diseñadores y desarrolles web y para quienes prioricen el aspecto visual.

Google Chrome (Windows/Mac/Linux)

Chrome es el navegador web de Google, está basado en webkit, al igual que Safari. A primera vista, llama la atención su diseño minimalista, pero con el uso, te das cuenta, que no le falta nada. La interfase ocupa pocos píxeles y no tiene colores que te distraigan, lo más importante al usar Google Chrome, es la web, no el programa en sí.

La barra de direcciones y el buscador están integrados y se podés escribir una URL, el nombre de un sitio, palabras claves, etc. y siempre llegás a tu destino. Los sitios más visitados, las pestañas cerradas recientemente, el historial y las descargas, son muy fáciles de usar.

Rendimiento y estabilidad

El rendimiento de Chrome y Safari es excepcional en las páginas que utilizan JavaScript (generalmente aplicaciones web). Otra ventaja, es que si una pestaña se “cuelga”, se la podés cerrar sin afectar al resto.

Chrome es ideal para quienes se enfocan en la productividad.

Microsoft Internet Explorer (Windows)

Internet Explorer es el navegador predeterminado de Windows. Los productos de Microsoft, suelen tener muchos detractores con críticas fundadas o infundadas. Es cierto que el Internet Explorer 6 tiene hoy en día fallas graves de seguridad y otros problemas, pero en versiones posteriores, lo fueron solucionando.

Navegación InPrivate (de incógnito)

La navegación de incógnito sirve para navegar sin dejar huellas (historial, cookies, etc.). Esta función también la tienen otros navegadores, pero la menciono en Internet Explorer porque es bastante nueva y poco conocida.

Este navegador es ideal para personas que estén acostumbras a usar los programas de Microsoft (por ejemplo Office), porque les va a resultar familiar.

Mozilla Firefox (Windows/Mac/Linux)

Firefox, el navegador predeterminado de algunas distros de Linux, tiene muchos complementos. Fuera de eso, no le encuentro ninguna ventaja. No tiene ninguna función que los demás navegadores no tengan. En cuanto al rendimiento, las últimas versiones, son particularmente lentas, sobre todo a la hora de abrir el programa y actualizar los complementos, solicitando frecuentemente reiniciar el programa.

Para los más geeks, están los userscripts, para modificar la apariencia o funcionalidad de un sitio en particular, pero también funcionan en Opera, así que no es un factor decisivo.

Es ideal para los fanáticos a muerte del software libre o para los crédulos que se convenzan de que es mejor que los demás por la “barra de direcciones alucinante” y la “supervelocidad”.

Opera (Windows/Mac/Linux)

A Opera le han incorporado tantas características que hoy en día suena raro llamarlo navegador a secas, es una suite que incorpora todas las funciones asociadas con la web y algunas características novedosas como los gestos del mouse.

Turbo

Una de las funciones más interesantes de Opera es Turbo. Sirve para acelerar la navegación cuando detecta que la conexión es lenta (léase módem) con un mecanismo es muy similar al Opera Mini (la versión de Opera para celulares de gama media - baja).

Email, RSS, Torrents

Opera cuenta con un cliente de correo, un lector RSS y un gestor de descargas con BitTorrent. Hay varios programas open source que ofrecen la descarga como torrents. Si nunca descargaste un torrent, podés probar descargando OpenOffice.

Discado rápido y múltiples páginas de inicio

Opera se abre con todas las pestañas con las que se cerró, de esta manera permite tener múltiples páginas de inicio o restaurar la sesión si el programa se cierra por error. Al discado rápido, se pueden agregar 9 sitios para acceder rápidamente, es parecido a los favoritos o marcadores. Chrome y Safari tienen actualmente la misma función, pero Opera si no me equivoco, fue el primero.

Opera es ideal para quienes buscan un todo en uno.

Conclusiones

Basarse exclusivamente en estadísticas de rendimiento o en datos técnicos, no contempla la experiencia del usuario, que es lo más importante cuando se usa un programa con tanta frecuencia, como en el caso de los navegadores. No hay entonces un navegador que sea el mejor, sino un navegador para cada persona.

Con respecto a la seguridad, como Internet Explorer 8 sólo está disponible para Windows Vista y Windows 7, si usás una versión vieja de Windows (por ej.: Windows XP), no te queda otra opción que instalar Chrome.

En lo personal, uso Safari, porque con Top Sites accedo rápidamente a todos los sitios que uso a diario, no desperdicio espacio en la pantalla con mil barras inútiles, no tengo que instalar ningún plugin, ya que el inspector web tiene las funciones que necesito y el historial con imágenes me resulta mucho más útil que un simple listado.

Aplicaciones web para la vida cotidiana

Wed, 02 Dec 2009 00:00:00 -0200

¿Qué son las aplicaciones basadas en web? Son programas que no requieren instalación ya que los usás a través de Internet (accediendo con tu usuario y contraseña). ¹

¿Cuáles son las ventajas?

No perdés tiempo instalando programas ni haciendo actualizaciones constantes.
No hay necesidad de hacer backups porque la información en vez de almacenarse en tu disco duro, se encuentra en múltiples servidores web distribuidos en distintas ubicaciones geográficas (“en la nube”).
Podés usarlas desde cualquier equipo, desde tu casa, oficina, cybercafé, etc. sin necesidad de andar transportando tus archivos en un pendrive.
Podés usarlas en cualquier sistema operativo (Windows, Linux, Mac) y también desde tu celular u otros dispositivos móviles.

Google Docs

Google Docs es equivalente a Microsoft Office, tiene procesador de textos, hojas de cálculos, presentaciones con diapositivas y formularios.

Además de las ventajas que mencioné más arriba, Google Docs te permite trabajar en equipo. Por ejemplo, si estás elaborando un informe con compañeros de estudio o trabajo, podés darles permiso de edición y editar todos simultáneamente el mismo documento.

El formulario es muy potente, te permite crear sin ningún conocimiento de programación, una encuesta, u otro tipo de formulario, enviarlo y recoger los datos.

Ejemplos:

Este artículo en Google Docs
Una encuesta² creada con Form

Alternativa: Office Live de Microsoft

Google Calendar

Calendar es una agenda que podés usarla para actividades personales privadas o para organizar eventos sociales, deportivos, religiosos, etc. y notificar a los participantes.

A cada evento le podés asignar una hora de inicio, finalización, lugar donde se realiza, etc.

Remember the milk

Remember the milk (acordáte de la leche) sirve para hacer listas de tareas, desde la lista del supermercado, hasta ideas para un proyecto nuevo. La vida no gira alrededor de una computadora y esta aplicación es ideal por su flexibilidad al integrarse a otros servicios, permitiendo recibir recordatorios o anotar tareas realmente en cualquier momento y desde cualquier lugar.

Alternativa: Ta-da-lists de 37 Signals

Photoshop.com

Primero que nada, quiero aclarar que Photoshop.com no es una versión web de Photoshop, sino que se trata de una aplicación gratis, que sirve para almacenar imágenes y hacer ediciones básicas (cambiar tamaño, algunos efectos, eliminación de ojos rojos y otras correcciones). Para diseñadores y fotógrafos, hay mejores opciones, pero cubre todas las necesidades de un uso doméstico.

Alternativa: Phoenix de Aviary

Conclusiones

Las aplicaciones basadas en web no son nuevas, pero hoy es el momento ideal para empezar a usarlas e ir sustituyendo los programas de escritorio. ¿Por qué? Porque Google ya presentó un sistema operativo que sirve sólo para usar aplicaciones web y que estará disponible al público a mediados del 2010 y 2 grandes empresas del software de escritorio - Microsoft y Adobe - ya tienen aplicaciones web, que inclusive son gratis.

Este artículo fue publicado el 2/12/2009 en YoReparo.
↩
Una opinión dejada en el formulario: “Son el futuro de las aplicaciones convencionales, ¡es hacia donde apunta el mañana!”
↩

Cómo elegir un celular

Sun, 15 Nov 2009 00:00:00 -0200

El mejor celular no es necesariamente el último modelo ni el más caro, sino el que se adapta a tus necesidades. Comprar un celular es similar a comprar una computadora, te vas a encontrar con equipos que tienen tanta cantidad de características, que es difícil elegir. A continuación voy a comentar cuáles tener en cuenta según el uso que se le vas a dar. ¹

Un celular para hablar

Hablar es la función más obvia de un teléfono, la duración de la batería, el volumen, si tiene o no altavoz, que se le pueda asignar un ringtone diferente a cada contacto, son características que se pueden tener en cuenta, pero no son cruciales. Los modelos Push To Talk, funcionan como un walkie-talkie, si el servicio está disponible por la operadora y los costos del servicio pueden ser interesantes.

Recomendado para hablar: Moto RAZR

Un celular para mensajear

Para mensajes de texto o para cualquier otra actividad que implique escribir (email, Twitter) hay 2 factores a tener en cuenta: el teclado y el texto predictivo.

Teclado QWERTY Es más natural escribir en un teclado QWERTY que en el tradicional numérico. Pueden ser reales, generalmente en modelos que se deslizan o virtuales, cuando la pantalla es táctil.
Texto predictivo Hay varios sistemas de texto predictivo, por ejemplo iTap y T9. No se trata de que uno sea mejor que el otro, sino que simplemente son diferentes y si ya estamos muy acostumbrados a un sistema, cuesta adaptarse al cambio.

Es conveniente comprar el celular en una tienda donde nos permitan manipularlo, ¿las teclas son muy pequeñas y nos equivocamos con frecuencia? ¿cómo se siente el aparato en la mano? ¿hay que hacer mucha o poca presión sobre el teclado?

Recomendado para mensajear: Samsung Gravity (T459)

Un celular para escuchar música

Auriculares Se suele recomendar que el conector para auriculares sea estándard, para tener más opciones de auriculares, pero no significa que por tener un conector con formato propietario sea de mala calidad.
Memoria Para almacenar archivos, siempre nos va a convenir que tenga bastante memoria. Si la memoria es expandible, podemos comprarle la cantidad que necesitemos hasta el máximo permitido por cada aparato.

Hay modelos cuyo diseño está orientado a usarlos como reproductor de música, tienen un buen software para manejar las listas de reproducción y una interfase dedicada a las funciones del reproductor, que puede consistir desde teclas especiales hasta cambiar la canción al agitarlo.

Recomendado para escuchar música: Sony Ericsson W580

Un celular para sacar fotos (o filmar)

MP Hay modelos que tienen 3 ó 5 megapíxeles (que no está nada mal) y sin embargo la cámara es malísima. En algunas marcas, por ejemplo, las cámaras tienen una tendencia hacia un color, hay que tratar de ver fotografías tomadas con cada modelo.
Flash Si pretendemos sacar fotos en interiores o de noche, es imprescindible que tenga flash, los mejores son los de Xenon.
Formatos de video Algunos modelos, a pesar de contar con una pantalla grande, soportan pocos formatos, si vamos a ver videos con frecuencia, se pueden buscar modelos que soporten DivX.

Recomendado para sacar fotos: Nokia N82

Un celular para navegar en Internet

La conexión puede ser GPRS o 3G, los 3G son mucho más veloces, pero el costo por usar el servicio es también mayor. Algunos modelos tienen Wi-Fi, si alguien vive en una ciudad que tenga cobertura, es una buena opción. También influye el navegador, un lector de RSS, zoom y recordar contraseñas son funcionalidades deseables.

Recomendado para navegar en Internet: Samsung Omnia

Un celular para usar aplicaciones

Cada aparato trae algunas aplicaciones incorporadas, las más comunes son agenda, calculadora, visores de archivos de Office, juegos y además se pueden instalar aplicaciones, generalmente JAVA. Para los smartphones hay más cantidad de aplicaciones disponibles, que permiten utilizar el celular como una oficina móvil, pero generalmente no son necesarias para un usuario común.

Recomendado para usar aplicaciones: iPhone

Un celular equilibrado

Hay marcas que están sacando modelos de gama media, pero incluyendo las últimas tecnologías, como el accelerómetro (que responde a los movimientos) y las pantallas táctiles. ¡Los juegos con accelerómetro, son divertidísimos! Al que le guste tener la última tecnología, pero no quiera gastar mucho dinero, le recomiendo el LG Cookie (KP500/KP570) ó el Samsung S5230.

Recomendado por relación calidad - precio: LG Cookie

Espero que esta guía les resulte útil.

Este artículo fue publicado el 15/11/2009 en YoReparo.
↩

¿Es tan difícil copiar a Digg?

Thu, 08 Oct 2009 00:00:00 -0200

Hace un tiempo publiqué ¿Por qué Menéame no es más similar a Digg? Hace unos días atrás me crucé con otro sitio para votar sitios en español: Bitácoras.com y lo quise implementar en un blog para probar si daba buenos resultados.

Repasemos, ¿cómo se implementa Digg?

Haciendo nada, sí nada, no es necesario hacer ningún procedimiento especial para que un sitio sea votable en Digg
(opcional) Copiar y pegar un código para mostrar en el sitio web el botón “Digg This”

¿Cómo se implementa Bitácoras.com?

Si votás un sitio que no está agregado al directorio, no se agrega! Mandan un trackback - que Akismet lo marca como spam - avisándole al autor que se registre.

Procedemos al registro entonces…

Creás una cuenta o entrás con Facebook Connect (igual que en Digg)
Añadís la bitácora completando un formulario con 5 campos
Esperás a que la revisen y aprueben

Los botones son un código, pero para WordPress hay además un plugin. Hasta aquí vamos bien.

La documentación de lo que hay que agregar en el template es la siguiente:

agregador_bitacoras_com()
$tipo: tipo de botón (big, normal, mini, mini2 o favicon)

Es una descripción de la función, pero no sigue el mismo formato que el WordPress Codex así que es confuso y para colmo no ponen un ejemplo. Si tenés experiencia con WordPress, te das cuenta, que el que código es:

<?php agregador_bitacoras_com('normal') ?>

y listo! Queda el botón en la página, pero da error agregar una entrada que no está en el feed. Al momento de registrar la bitácora y según cuántas entradas tengas configuradas en el feed, va a agregar las 10 últimas por ejemplo, así que si es un blog con más cantidad de entradas, las anteriores no se pueden votar!

¿Qué pasa con las entradas más recientes? Si la entrada está en el feed pero según su fecha tiene más de 2 semanas de antigüedad, tampoco se puede votar!!

Sería aconsejable entonces llamar a la función agregador_bitacoras_com dentro de un condicional if para verificar que la fecha sea aceptable.

Un detalle que me llamó la atención: el botón de Bitácoras que se coloca en los sitios es naranja y gris y el que está en el sitio de ellos es azul, es un camaleón; el botón de Digg es siempre amarillo, reforzando la imagen de la marca.

Conclusiones

En conclusión, Digg es el sitio de social news más grande y popular, entonces si vas a copiarles la idea, por qué no analizar primero cómo funciona Digg, qué puntos buenos tiene y cuáles se pueden mejorar, para de esta manera lograr un sitio que sea realmente útil y ante todo fácil de usar, sin complicaciones para que más usuarios puedan beneficiarse.

5 apps para bloggers

Wed, 07 Oct 2009 00:00:00 -0200

No importa sobre qué tema sea tu blog, aparte de una plataforma para publicar online, necesitás algunas herramientas adicionales.

1. Un editor de texto libre de distracciones¹

Para Windows, recomiendo Q10, es un editor de texto a pantalla completa, similar al Bloc de Notas, no tiene opciones de formato, así que podés concentrarte solamente en escribir. Podés personalizar los colores, si no te gusta el estilo “consola”. Q10 guarda los archivos con extensión .txt.

2. Estadísticas

Para medir el éxito de tus posts y el blog en general, las estadísticas son útiles. Google Analytics es una solución muy completa, y FeedBurner te da estadísticas de tus feeds.

3. Libretas de Evernote

Con Evernote podés guardar información online y acceder a ella desde tu computadora de escritorio, laptop, celular, etc.. Podés crear una libreta para tips que encuentres en Internet, otra para code snippets ó recetas de WordPress y por supuesto para tomar notas para tus próximos posts. Las notas se pueden escribir con el teclado o a mano, podés grabarlas como audio, tomar fotos…

Una libreta de Evernote, es equivalente a tener una carpeta con toda la información referente a una investigación o un tema, con la ventaja de que en Evernote se pueden agregar etiquetas para filtrar rápidamente, editar el texto sin necesidad de abrir un programa, etc.

4. Un lector de feeds²

Hay muchos lectores de feeds, por ejemplo Google Reader (online) y FeedReader (Windows), pero si seguís muchos feeds, Fever te indica cuáles son los temas del momento.

5. Un cliente para Facebook y Twitter

En Twitter y Facebook podés promover tu blog y estar en contacto con tus lectores. Un cliente como TweetDeck o Seesmic te permite iniciar sesión y actualizar tu estado en múltiples networks sociales.

Actualmente uso y recomiendo Byword, un editor de texto para Markdown.
↩
Actualmente uso y recomiendo Reeder. El concepto de Fever es genial, pero no es tan fácil de configurar.
↩

¿Por qué Menéame no es más similar a Digg?

Tue, 08 Sep 2009 00:00:00 -0300

Estos días he estado trabajando en una sección de artículos dentro de un foro de informática y electrónica. A los artículos les llega tráfico desde el foro, newsletters, etc. pero ya que estaba, decidí agregarle algunos botoncitos para que los usuarios puedan promover entre sus colegas el contenido que les agrade.

Como se trata de un sitio en castellano, las opciones son limitadas y por un intento previo sabía también que era complicado de implementar.

Menéame vs Digg

Menéame es el equivalente en castellano de Digg, según su FAQ:

¿Por qué es tan similar a Digg? Porque era un buen punto de partida, la interfaz e interacción con el usuario era simple y efectiva. ¿Por qué reinventar la rueda desde cero si ya está bastante redonda?

Coincido con que no hay que reinventar la rueda, pero ya que copiaron el botón de Digg ¿les costaba tanto mantener la funcionalidad?

Digg ofrece instrucciones para insertar los botones (hay un diseño grande y otro condensado) con el puntaje y el enlace para votar. Este botón es de utilidad para ambas partes:

el autor demuestra su autoridad y le da al lector una herramienta fácil y llamativa para votarlo
Digg obtiene publicidad en una enorme cantidad de sitios y recibe tráfico
el autor recibe a cambio tráfico proveniente de la página de Digg

En cambio Menéame no tiene un botón para que pongas en tu sitio, es sólo para ellos. Hay algunos inventos en la vuelta, pero con defectos. Lo que sí se puede hacer es poner un simple enlace a Menéame pasando como parámetro la URL del artículo (permalink).

<a href="http://meneame.net/submit.php?url=example.com">Votar en Menéanme</a>

Posterous vs Tumblr

Wed, 12 Aug 2009 00:00:00 -0300

Posterous y Tumblr son sistemas comparables porque tienen funcionalidades o características en común:

tienen un nombre impronunciable
son sistemas hosteados gratis para publicar contenido
en un par de minutos empezás a publicar
podés seguir a otros usuarios del sistema
las interfases son minimalistas
permiten dominios personalizados

La característica que distingue a Posterous (no sólo de Tumblr, sino también de otros sistemas) es la publicación por email. Es novedosa porque:

interpreta ciertas URLs, por ejemplo escribiendo una URL de YouTube, se publicará un video
interpreta los adjuntos, publica las imágenes y convierte los .pdfs y otros adjuntos en descargas. En cualquier otro sistema se requiere subir archivos de este tipo por FTP y luego enlazarlos, así que es una funcionalidad que simplifica mucho el proceso de publicar un archivo para descargar.

Característica 100% exclusiva de Tumblr diría que no hay, pero destaco los distintos tipos de posts (video, foto, cita, etc.) y que el dashboard muestra las últimas publicaciones de quienes seguís.

Contenido bueno y malo se produce con cualquier plataforma, y por supuesto que cualquier sistema permite “copiar” o como quieran llamarle (¿publicar?) contenido no original extraído de otros sitios webs. Sin embargo en Tumblr hay una tendencia a rebloguear imágenes que raya lo absurdo, promovida por el Tumblarity. El lado positivo de esta tendencia son los tumbleblogs donde el propietario actúa como curador y reúne en un sólo sitio contenido temático, por ejemplo Jesus Is Love.

Con Tumblr (al igual que Blogger) cualquiera puede jugar al diseñador, modificando el template e insertándole cualquier cosa hecha con JavaScript. Por este motivo tienen un Tumblr varios diseñadores y han diseñado unos temas muy buenos - por ejemplo Vertigo, inspirado en la obra de Saul Bass - que cualquiera puede usar.

No recomiendo ninguno de estos dos sistemas para un blog con fines comerciales, sí para proyectos personales. Entonces no creo que Posterous sea mejor que Tumblr o viceversa sino que simplemente están dirigidos a un público diferente.

Tumblr es ideal para músicos, fotógrafos y disciplinas afines. Hay un paralelismo entre los tipos de posts y las profesiones: un actor puede publicar diálogos y videos; un diseñador y fotógrafo, imágenes, etc. Me parece un sistema para adolescentes que tienen tiempo de publicar gracias a cada rato, que están más para hacer amigos que para crear contenido.

Posterous lo encuentro más adecuado para personas que tienen una vida más ocupada, estás trabajando, mandás un mail, queda pronta la entrada y de paso se autopublica en varios sistemas.

En lo personal estoy usando ambos, pero no por mucho tiempo… para lo que me interesa en este momento, me conviene Posterous. Además el problema que tengo es que al ser diseñadora, pierdo mucho tiempo en detalles, y en este momento me interesa concentrarme en escribir, para diseñar tengo suficiente con el trabajo y con varios proyectos personales inconclusos.

Buscando bloggers en Tumblr, me encontré con estos 2 artículos interesantes:

CSS para impresión

Wed, 01 Jul 2009 00:00:00 -0300

Hace más de 10 años, Eric Meyer explicaba en el artículo CSS Design: Going to Print los puntos a tener en cuenta al crear una hoja de estilo CSS para impresión. Los estilos para impresión incluídos en el HTML5 Boilerplate¹ posibilitan imprimir una página con:

texto negro porque se imprime más rápido
mostrando el destino de los enlaces
imágenes enteras
saltos de página optimizados para evitar viudas y huérfanos
márgenes apropiados para papel

Para terminar, faltaría sólo ocultar (con display:none) los elementos que no tengan sentido por ej.: navegación, formularios, etc. Podés imprimir una página cualquiera de tu sitio, decidir qué está de sobra y con las Chrome Developer Tools inspeccionar rápidamente las clases u otros identificadores para seleccionar los elementos.

Para (Apuntes al Margen), a los estilos del HTML5 Boilerplate, agregué:

@media print{
	body{
		border: none;
	}

	footer{
		display: none;
	}
}

Conclusión

Es un trabajo que lleva 10 minutos, así que no hay excusa para no tener unos estilos básicos para impresión.

Antes del HTML5 Boilerplate, usaba Hartija.
↩

Los avatares verdes

Wed, 24 Jun 2009 00:00:00 -0300

Poner un avatar teñido de verde representa un apoyo a las elecciones en Irán, en la web Show support for #IranElection se detalla más información e inclusive ofrecen una herramienta para modificar la imagen.

Demostración de cómo funciona Show support for #IranElection on Twitter

Es interesante e irónico a la vez como se propagan este tipo de campañas, porque por un lado quieren sacar a la luz la verdad de lo que está ocurriendo en Irán en estos momentos, pero se valen de un moda y por lo tanto de gente que sólo sigue la corriente y en muchos casos no está tomando una decisión informada.

Lo que destaco como positivo y creo que más organizaciones deberían imitarlo es el impecable uso de la tecnología:

elegir Twitter es coherente con crear una campaña viral
los avatares son visibles en todo momento, así que es un mensaje que se trasmite continuamente
facilitan a todos aquellos que no sepan cómo teñir el avatar (o colocar un ribbon), solamente haciendo un click, es decir que no se necesita ningún conocimiento especial
utilizan Oauth para acceder a la cuenta de Twitter, o sea no obtienen las contraseñas de las cuentas lo cual genera confianza y aclaran para qué (cambiar el avatar y enviar un mensaje)

Usabilidad de los permalinks en Tumblr

Mon, 22 Jun 2009 00:00:00 -0300

Antecedentes

Así como el link a la home page en el logo es un estándar, en los blogs tradicionales, si bien puede haber otras soluciones, es estándar que el permalink sea en el título del post.

¿Qué es el permalink?

Es la URL permamente (que no cambia) de un post individual que sirve para guardarlo (agregándolo a favoritos, guardándolo en delicious, etc.) o compartirlo, (enviándolo por email, Twitter, etc.).

Además, exclusivamente en la página del post individual, que en los theme variables de Tumblr se denomina block:PermalinkPage, es donde se ven las notas y se ven y dejan comentarios.

El problema en Tumblr

Las entradas en Tumblr no necesariamente tienen título, pueden ser por ejemplo sólo una foto, entonces ¿dónde va el permalink?

Captura de pantalla del tema Litewire

Por ejemplo, en el tema Litewire, al pasar por arriba (hover) de una entrada, aparece una flechita con el permalink, en otros temas está en la fecha, o en un icono, a veces ni siquiera está… pero dada la importancia del permalink debería ser siempre claro para todos los visitantes dónde encontrarlo.

Fotografía Tilt-Shift

Mon, 22 Jun 2009 00:00:00 -0300

Little game por pattagon, en Flickr

Las fotografías tilt - shift hacen que los objetos tamaño normal parezcan minuaturas por la poca profundidad de campo, al estar tanto el sujeto como el fondo fuera de poco se pierde la noción de escala, visualmente son similares a las fotografías macro de objetos realmente pequeños. Se obtienen mediante 2 movimientos:

tilt: rotación del lente relativo al plano de la imagen
shift: movimiento del lente paralelo al plano de la imagen

Se necesita un lente tilt shift y es aconsejable realizar las tomas desde un ángulo alto, para acentuar la idea de que se está mirando a objetos pequeños.

El efecto tilt - shift en Photoshop se puede conseguir básicamente aplicando el filtro Lens Blur a una parte de la imagen (usando una máscara con degradé) y ajustando las curvas¹ .

Enlaces

El mismo efecto se puede lograr en Pixelmator con una técnica prácticamente idéntica.
↩

La fotografía cándida

Sun, 14 Jun 2009 00:00:00 -0300

Erich Salomon (1886 - 1944) fue un precursor del periodismo fotográfico moderno. Utilizando equipos pequeños y sin lámparas ni flash se caracterizó por fotografiar a políticos en actitudes naturales, no posando.

La foto superior fue tomada en el año 1931 y corresponde al momento en que un ministro francés nota la presencia del fotógrafo en una reunión donde no se admitía a periodistas. Es una de esas fotos inolvidables que con verlas una vez, te quedan grabadas en la memoria.

Fotografía macro

Sat, 13 Jun 2009 00:00:00 -0300

Raindrop por snuggles., en Flickr"

La fotografía macro son primeros planos de objetos muy pequeños. Un ejemplo típico es el ojo de un insecto, para lo cual se utiliza un lente especial. La profundidad de campo se reduce drásticamente, queda el sujeto en foco y el fondo desenfocado.

Siempre que tengas que fotografiar algo pequeño, acordate que en modo normal no se enfoca a corta distancia y que con el zoom difícilmente alcanza, así que utilizando el modo macro (una función de la mayoría de las cámaras digitales) se resuelven los inconvenientes.

Flujo de trabajo en InDesign

Thu, 04 Jun 2009 00:00:00 -0300

Trabajar metódicamente y minimizar la cantidad de ajustes manuales posibilita realizar una maquetación prolija y eficiente, sin conflictos a la hora de exportar el PDF. Voy a tomar como ejemplo la maquetación de un libro con varios capítulos, en el cual van a trabajar x cantidad de personas. En el caso de una revista o un catálogo el flujo de trabajo puede variar.

La previa

Empezá el proyecto armando un sencillo árbol de carpetas para asegurarte de que no se rompa ningún enlace. Luego, si ya no lo hiciste, tomáte unos minutos para personalizar el espacio de trabajo, agregando las paletas necesarias y desechando las que no vas a utilizar. El espacio se puede guardar para reutilizarlo en un proyecto similar.

Creá un documento donde diseñas las páginas maestras y definís todos los estilos necesarios. Es importantísimo tener el tamaño de página y los márgenes decididos antes de comenzar a incorporar contenido, ya que cambiarlo posteriormente implica un trabajo doble.

Páginas maestras

En las páginas maestras se definen los márgenes, se inserta el número de página y todos aquellos elementos del diseño que se repitan en todas las páginas (o en un conjunto de páginas). Si se trabaja con múltiples páginas maestras te recomiendo ponerles un prefijo descriptivo.

En las páginas maestras, en vez de guías, podés poner otros elementos más visibles (rectángulos) para definir la grilla en una capa y ocultarla al finalizar el diseño.

Estilos

En cuanto a los estilos de párrafo, definí por lo menos un título de capítulo, un título y un párrafo (o editá el párrafo básico), indicando todas las opciones necesarias para que el software resuelva los problemas y no tener que hacer demasiados ajustes manuales.

Una vez que determinaste cuál tipografía vas a utilizar (tamaño e interlineado), definís la retícula base. La retícula base va a ser igual al interlineado y en el estilo de párrafo definís un interlineado menor y marcás la opción alinear con retícula base. También definí cuántas líneas mantener juntas para evitar viudas y huérfanas. A los párrafos, se les puede definir un margen inferior (por ejemplo 2x del interlineado) o una sangría de primera línea.

En los títulos, si el tamaño no es múltiplo del tamaño del párrafo, sólo la primera línea se alineará con la retícula base. Tanto sean alineados a la izquierda o centrados, se deben balancear las líneas y no separar en sílabas. El título del capítulo se puede definir para que comience en una página impar. Los títulos generalmente tendrán un espacio superior y/o inferior.

A este archivo con lo básico pronto, ya podés colocarle texto e imágenes.

Documento Libro

Una vez que tengas un capítulo terminado, creás un nuevo documento Libro. Al libro le vas a agregar los archivos de cada capítulo. En el caso de que los capítulos empiecen en página impar, al agregarlos al libro, InDesign notifica si algún texto se desbordó de la caja, en ese caso abrís el archivo y lo corregís.

Para crear la tabla de contenidos o índice dinámico, seleccioná los estilos que correspondan, por ese motivo mencioné más arriba definir un título de capítulo (nivel 1) y título (nivel 2). Cuando termines de maquetar los capítulos, actualizá la tabla de contenidos. A partir de la tabla de contenidos se generan los marcadores del archivo pdf.

Suponete que cuando llegás al capítulo 5 te das cuenta de que en el texto también hay subtítulos y que además querés cambiar el color de los títulos. Creás y modificamos estilos y luego sincronizás el libro, tomando como base el archivo deseado, para que los cambios se reflejen en todos los capítulos. También se pueden sincronizar páginas maestras.

Una vez que todos los capítulos están maquetados, basta con seleccionarlos en la paleta libro y exportarlos como pdf, como eBook o para imprenta.

Conclusiones

En conclusión, utilizando los estilos (de carácter y de párrafo) y el tipo de documento libro, varias personas pueden colaborar en la maquetación, manteniendo el diseño uniforme a lo largo de todas las páginas y sin problemas para generar un único archivo pdf.

Tendencias en Twitter

Wed, 27 May 2009 00:00:00 -0300

Recientemente Twitter incorporó en la barra lateral los Trending Topics una función que ya tenía TweetDeck y que muestra los temas y hashtags más populares del momento.

Generalmente estas tendencias son de corta duración, pero hay un tema que está hace varios días y es #3wordsaftersex, por supuesto con respuestas graciosas e ingeniosas.

Títulos de las páginas en Tumblr

Fri, 22 May 2009 00:00:00 -0300

El título de la página es lo que va en la etiqueta title en el head, o sea, lo que ves en la barra de título del navegador. No te confundas con los h1-h6 que van en el body.

El título de la página es importante en primer lugar que exista, y no quede untitled document o similar.

En segundo lugar es importante que sea siempre diferente y que tenga relación con el contenido porque al guardar la página en marcadores (delicious, agregar a favoritos) o consultar el historial, se guarda justamente por título y si se guardás varias páginas de un mismo sitio, sería imposible saber cuál es cuál.

Que los títulos sean descriptivos y precisos (que contengan palabras claves) ayuda al SEO. Para los usuarios, si es muy largo generalmente se ve cortado, así que las primeras palabras son las más importantes.

En los blogs u otros CMS se estila utilizar el título del post + el nombre del blog como título de la página. Supongo que debido a que el ejemplo de Creating a custom HTML theme de Tumblr es el siguiente:

<html>
	<head>
		<title>{Title}</title>
	</head>
	<body>
		...
	</body>
</html>

muchos Tumblr blogs usan el nombre del blog para todas las páginas, cuando la mejor opción es la que está como ejemplo más abajo:

<title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}</title>

es decir, título del post - nombre del blog. El título del post se va a mostrar solamente cuando existe, es decir en la página de cada post (permalink). Como ya sabés, el título de los post es opcional, así que si no usás títulos, podés usar la siguiente alternativa que se genera automáticamente:

<title>{ block:PostSummary}{PostSummary} - {/ block:PostSummary}{Title}</title>

Correo no deseado: Invitaciones

Sun, 17 May 2009 00:00:00 -0300

Para disminuir la cantidad de correo no deseado recibido es fundamental en primer lugar determinar de qué tipo de correo se trata, para entonces proceder a eliminarlo y prevenirlo. El SPAM es por definición correo no deseado, generalmente de carácter publicitario que se envía masivamente y que perjudica de alguna manera a quien lo recibe.

En este post voy a tratar un tipo de email que está en la línea borrosa que separa el SPAM de los correos legítimos y se trata de las invitaciones para unirse a redes sociales diversas.

Ejemplo 1: Badoo

Correo no deseado de Badoo

Badoo es un sitio para conocer gente, en el cual no estoy registrada ni me interesa. Como tantos otros sitios, durante el registro, se le pide permiso a la persona para acceder a la libreta de direcciones y enviarle invitaciones a todos los contactos.

El punto a favor de Badoo es que ofrece la posibilidad de bloquear todos los futuros emails.

Bloquear invitaciones de Badoo

Eliminación: Bloquear futuros emails.
Prevención: No utilizar sistemas de invitaciones automáticas, si le quiero recomendar un sitio a un amigo, puedo hacerlo personalmente.

Ejemplo 2: Teencontre

Correo no deseado de Teencontre

Otro sitio similar a Badoo, pero que no permite cancelar las invitaciones. Además utiliza una técnica clásica de los spammers que consiste en poner como remitente un dato falso, el correo figura con remitente xxx @hotmail.com y el cliente de correo entre paréntesis me indica que la casilla desde la cual se envió es otra.

Eliminación: Marcar como “Correo no deseado”
Prevención: Leer la Política de Privacidad (“En ciertos casos, www . teencontre . com se propone ceder los Datos Personales a terceros”), usar casillas de correo descartables sin ninguna información personal para registrarse en sitios dudosos.

Fotografía infrarroja

Sat, 09 May 2009 00:00:00 -0300

Japanese Gardens IR por Zingavision, en Flickr

Fotografía es dibujar con luz, la fotografía infrarroja a través de un filtro especial captura la gama infrarroja que no es visible para el ojo humano. Generalmente se fotografían paisajes, porque la características de estas imágenes es que el cielo azul queda negro o muy oscuro y la vegetación queda blanca, además de contraste marcado.

No es muy común usar esta técnica para retratos, pero la piel queda como porcelana y sin imperfecciones.

Es una técnica difícil porque en el visor no se ve nada, así que hay que encuadrar antes de colocar el filtro y utilizar un enfoque automático. Los tiempos de exposición son largos y por lo tanto se utiliza trípode. En la post - producción (Photoshop) se corrigen los colores.

Enlaces

Terminator en Twitter

Thu, 30 Apr 2009 00:00:00 -0300

Hace unas semanas comenzó via Twitter un juego promocional de la película Terminator Salvation. Consiste en juegos de palabras y trivias que hay que responder dentro de las 2 horas de su publicación y agregando la #hashtag correspondiente.

A pesar de que puede parecer difícil a primera vista, tiene sentido que la comunicación deba realizarse utilizando códigos al mejor estilo espionaje y guerilla.

RA:PT Complete The destiny of “_____ _____” is to save mankind
— Resistance2018 (@Resistance2018) May 23, 2009

Además de los juegos, @Resistance2018 envía constantemente instrucciones del juego, como recordatorio o para los nuevos jugadores y mensajes sobre el mundo de Terminator. Cada mensaje tiene un código que lo precede e identifica de qué tipo de mensaje se trata.

SW: Machines are advancing rapidly
— Resistance2018 (@Resistance2018) May 19, 2009

No es el primer juego en Twitter, ya existen algunas trivias, ni tampoco el primer juego basado en una película, pero sí resulta novedoso del punto de vista del marketing, sobre todo el marketing utilizando social media:

la participación es 100% opcional, no realiza SPAM ni paga a bloggers para que hablen bien del producto
aporta contenido de interés, a través de mensajes que producen una sensación inmersiva
que la lista de participantes sea pública junto con el uso de los #hashtags, permite que los participantes se encuentren e interactúen entre ellos, concepto base de “social”
por tratarse de juegos de palabras, puede llegar a un público más amplio que los juegos 3d
además genera una previa al tener una duración en el tiempo más extensa que lo podría tardarse jugando un videojuego tradicional

Estadísticamente es muy pronto para evaluar, pero probablemente la promoción constante genere más ventas de entradas, por lo menos entre los participantes; a la fecha de hoy, no ví ningún aviso de la película, pero sí recibí 86 actualizaciones de @Resistance2018, más los mensajes privados (notificaciones con referencia al puntaje).

5 Ventajas de Tumblr

Wed, 22 Apr 2009 00:00:00 -0300

1. Promueve el hábito de escribir

Con el bookmarklet de Tumblr podés publicar cualquier cosa desde el navegador con sólo un click: un video gracioso, una imagen, un link interesante, o lo que tengas en el portapapeles como cita. De esta manera no es necesario pensar “Voy a sentarme a escribir una entrada”, no hay presiones, es más natural, ves algo, te inspira, lo publicás.

O por ejemplo, se te ocurre una idea, la grabás en el celular, la publicás por e-mail (mensaje multimedia).

El sólo hecho de agregar una breve descripción (que es opcional), va generando un hábito de escritura y la próxima vez que quieras escribir algo más elaborado, resulta más fácil, porque escribir deja de ser algo extraño y se convierte en una actividad más.

2. Da crédito al autor

Estando en un Tumblr blog ajeno cuando se presiona el botón reblog o también cuando es un contenido publicado desde el navegador, Tumblr agrega automáticamente la fuente, así siempre queda claro cuando una entrada es original o se republicó desde otro sitio.

3. Sirve para practicar HTML

El editor es tan minimalista (negrita, cursiva, tachado, link) que para dar cualquier formato, se termina usando HTML, así que viene bien para practicar.

4. Se integra con otros sistemas

Permite importar feeds de otros blogs, marcadores de delicious, actualizaciones de Twitter, etc. y a su vez el Tumblr blog se puede mostrar en cualquier otro sitio pegando un código JavSscript.

5. Acorta distancias

Al seguir un blog, muestra las actualizaciones en el Dashboard, no es necesario usar un feed reader, al ver en una única lista tus publicaciones y las publicaciones de los demás, se genera una sensación más fuerte de comunidad. Los demás bloggers no son una entidad externa y distante de la que recibís actualizaciones via Google Reader, son personas que están ahí mirándote.

Jugando piedra, papel o tijera con CSS

Fri, 17 Apr 2009 00:00:00 -0300

2 conceptos fundamentales para entender cómo funcionan las hojas de estilo en cascada son herencia y orden.

Herencia

Herencia significa que un elemento que desciende de otro, “hereda” atributos. Por ejemplo si para la etiqueta body defino que la fuente es Arial, un párrafo (que se encuentra dentro del body) automáticamente también tendrá fuente Arial.

Las propiedades que se heredan de manera predeterminada son:

table.parent{
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: 0;
}
table table{
  /* hereda los estilos de table.parent */
}
div{
  caption-side: left;
  color: black;
  cursor: pointer;
  direction: ltr;
  font: bold 1em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  font-family: serif;
  font-stretch: narrower;
  font-size: 16px;
  font-size-adjust: none;
  font-style: italic;
  font-variant: normal;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.5;
  quotes: none;
  text-align: center;
  text-indent: 2em;
  text-transform: uppercase;
  white-space: pre;
  word-spacing: 5px;
}
div p{
  /* hereda los estilos de div */
}
ul.parent{
  list-style: none;
  list-style-image: url (bullet.png);
  list-style-type: disc;
}
ul.parent ul{
  /* hereda los estilos de ul.parent */
}

Orden

El orden se refiere a que el código se lee de arriba a abajo y el último gana. Es decir, si en una .css (interna en el head or externa via @import o link) defino que el color de los h1 es gris y luego en el HTML agrego un estilo inline estableciendo que el color es red, el título quedará rojo.

Resumiendo, el orden predeterminado es:

Predeterminado del navegador (ejemplo links azules y subrayados)
Hoja de estilo externa
Hoja de estilo interna
Estilo inline

Piedra, papel o tijera

La batalla se pone interesante, porque además de un orden predeterminado, los selectores tienen prioridades. Clase la gana a elemento e id le gana a clase.

Prioridades básicas (de menor a mayor):

elemento
clase
id

Por ejemplo: si está definido que el tamaño de fuente de los párrafos es 14px y para #destacado es 18px, el tamaño de fuente de un p id=”destacado” será 18px.

Cuando se juega con todos los selectores, la especificidad se calcula de acuerdo a la tabla de especificidad de la W3C. El cálculo es complejo y la causa de muchos errores de CSS se deben a que un estilo no está suficientemente especificado.

Resulta muy útil usar el Firebug para ver cuáles estilos son los que se están heredando. No se trata de llenar todo el documento con mil clases e ids, agregando los selectores necesarios alcanza y sobra.

Todo sobre los favicons

Sun, 12 Apr 2009 00:00:00 -0300

Un favicon o shortcut icon era un icono de 16x16px que Internet Explorer 5 mostraba al lado de la URL en la barra de direcciones y en la lista de favoritos. Actualmente un favicon puede aparecer en distintos contextos y tamaños, por ej.

16px o más según el sistema operativo y la resolución de la pantalla en la barra de direcciones, pestañas o marcadores
57px: iPhone (no retina)
72px: pantalla de inicio de iPad (no retina)
114px: pantalla de inicio de iPhone 4+
144px: pantalla de inicio de Windows 8, iPad retina
de 114x114px a 256x160px: speed dial de Opera

Para dibujar un favicon o cualquier otro icono, se necesita una herramienta para dibujo vectorial con pre-visualización de pixeles, para asegurarse de que los bordes están alineados con la grilla y no se produzca desenfoque y además hay que tener en cuenta los siguientes puntos:

iOS: le aplica un brillo y esquinas redondeadas, excepto que se agregue el sufijo precomposed al nombre del archivo.
Windows 8: la imagen debe ser preferentemente transparente y se puede indicar un color de fondo.

Los favicons pueden tener formato:

ICO: soportado ampliamente y detectado automáticamente, en un mismo archivo puede contener diversos tamaños.
PNG: Chrome, Firefox, Opera 7+ y Safari 4+ aceptan el favicon PNG.

X-Icon Editor es una aplicación HTML5 basada en canvas que permite crear iconos en 4 resoluciones diferentes a través de su editor online o importando una imagen.

Jonathan T Neal en Undestand the Favicon explica cómo se comportan los distintos navegadores y plantea enlazar los favicons con el siguiente código para que Chrome y Safari usen el favicon.png en vez del favicon.ico:

<link rel="apple-touch-icon" href="ruta/al/touchicon.png">
<link rel="icon" href="ruta/al/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="ruta/al/favicon.ico"><![endif]-->

<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="ruta/al/tileicon.png">

Conclusión

Los favicons parecen un detalle menor y muchas veces se dejan para el final del proyecto, pero son un desafío:

a nivel de diseño: es difícil crear un icono que represente al sitio web y que funcione bien en distintos tamaños
a nivel técnico: hay que estar al tanto de cómo las nuevas versiones de los navegadores, sistemas operativos y dispositivos los muestran

Fotografía de alto rango dinámico

Sat, 11 Apr 2009 00:00:00 -0300

HDR es una técnica que permite combinar varias tomas (subexpuesta, sobreexpuesta, normal) de una misma escena en una única imagen que por lo tanto tiene detalle en las luces y sombras simultáneamente. Esta técnica se utiliza con frecuencia en fotografía de arquitecturas, para que a pesar de la cantidad de luz que entra por las ventanas, no se pierdan los detalles de los interiores.

Código Twitter

Fri, 03 Apr 2009 00:00:00 -0300

En comunicación código se refiere al conjunto de signos y símbolos que son entendidos por emisor y receptor. En Twitter podemos encontrar los #, los RTs y las @.

#hashtag

Los hashtags agregan metadata a los tweets para poder rastrearlos y su formato es #hashtag. Por ejemplo, si asisto a un evento importante y quiero comentarlo en Twitter y comunicarme con otras personas que estén participando, puedo decir:

Recién llegué a la #conferencia

y puedo buscar en la web y suscribirme al feed, o abrir una búsqueda en TweetDeck para la palabra clave #conferencia

Es recomendable no abusar de los #hashtags y usarlos con responsabilidad.

Debido a que Twitter es un servicio disponible en algunos países a través de SMS (o que se puede acceder vía web con el celular), Chris Messina propone los #hashtags como sistema para coordinación durante emergencias. Ampliar en Twitter hashtags for emergency coordination and disaster relief.

RT @username

Es la manera de redifundir un mensaje escrito por otra persona, equivale al reblog de Tumblr.

@username

Al incluir una @ antes de un nombre de usuario se crea automáticamente un link al perfil de esa persona y además a la persona le llegan como menciones (aka respuestas). Su uso es variado y siguiendo el ejemplo anterior, podría decir:

Recién llegué a la #conferencia y me encontré con @colega

Tips sobre Twitter

Thu, 19 Mar 2009 00:00:00 -0300

Basándome en mi experiencia personal y muchísimos consejos que he escuchado, voy a detallar con ejemplos, los tips más importantes para comenzar a usar Twitter con el pie derecho.

Elegir a la gente adecuada

Podés tener la línea de tiempo llena de balbuceos incoherentes y exhibicionistas o temas interesantes de los influenciadores de tu industria. Es una elección.

No ser un robot

Twitter no es un chat, pero es importante responder para demostrar interés en la gente que te sigue y seguís.

Ejemplo 1: Alguien comenta que es su 4º aniversario de bodas, lo felicito, unos minutos más tarde responde agradeciendo a las personas que le contestaron. Fin de la conversación.

Ejemplo 2: Una blogger pide que le traduzcan un comentario que recibió, le respondo con la traducción. Me agradece. Fin de la conversación.

También se pueden iniciar debates, haciendo preguntas, es útil sobre todo para investigar rápidamente temas para escribir una entrada en un blog.

Mantener el equilibrio

Volviendo sobre el tema de no ser un robot, es importante mantener un equilibrio entre los tweets personales y los tweets valiosos y relevantes para los seguidores (20/80).

Para tener una buena reputación, hay que tener un equilibrio sano entre la cantidad de gente que te sigue y la que seguís. Aquellos que no siguen a nadie, no son más que un altoparlante y aquellos que siguen a miles y nadie los sigue, probablemente sean spammers.

Ser rápido

Twitter es instantáneo, si alguien te sigue y te interesa seguirlo, hay que actuar de inmediato, hay que contestar las mensajes directos y respuestas a la brevedad, ser el primero que hace un RT o anuncia una noticia, etc.

Entender el poder del RT (re tweet)

Si le contás algo a 10 amigos y cada uno de ellos, se lo cuenta a 10 amigos, tu mensaje llega a 100 personas y así sucesivamente, tu mensaje llega a un número exponencial de personas, por lo tanto:

hacer tweets cortos (para que el que hace el RT pueda agregarle un comentario)
incluir una URL para dirigir tráfico a una entrada de blog, etc.

Escribir una buena biografía

La biografía importa. En Twitter no hay extensos perfiles como en otros sitios, sólo hay 140 caracteres para contar quién sos, qué hacés y obviamente incluir algunas palabras clave relevantes.

Incluir una foto

No incluir una foto se interpreta como alguien no interesado en la comunidad o que es demasiado novato.

Para unificar tu identidad online, es mejor usar el mismo avatar y nickname en todas las redes sociales; usar una foto real, y nunca está de más incluir también un elemento gráfico representativo de tu empresa (si corresponde). Otra posibilidad es utilizar una caricatura.

Historia del gráfico de área polar

Mon, 16 Mar 2009 00:00:00 -0300

Gráfico de las causas de mortalidad de los soldados en la guerra de Crimea por Florence Nightingale

El gráfico de área polar fue inventado por Florence Nightingale, la enfermera más famosa del mundo, para presentar datos recolectados sobre las causas de mortalidad de los soldados en la guerra de Crimea como parte de su campaña para reformar los hospitales militares mejorando los métodos sanitarios.

En este gráfico, cada tajada representa la cantidad de muertes por mes, en rojo causadas por heridas, en azul por enfermedades infecciosas y en negro por otras causas.

Es similar a un pie chart, pero se modifica el radio para representar las cantidades en vez del ángulo. En la primera versión denominada “ala de murciélago”, el radio era proporcional a la cantidad de muertes, pero no el área. Posteriormente Florence lo corrigió.

Desde el punto de vista del diseño de la información, la gráfica utilizada por Florence, tiene un dramatismo y un valor icónico que no se hubieran logrado con una gráfica de barras.

Enlaces

Plugin Contact Form 7 para WordPress

Wed, 11 Mar 2009 00:00:00 -0300

Contact Form 7 es un plugin te que permite crear formularios y enviarlos por email, que se pueden insertar en una página, una entrada o un widget. Es ideal para hacer formularios de contacto.

El formulario se construye mediante tags que reemplazan los elementos HTML: textos, checkboxes, radio buttons, adjuntar archivos, etc.
Podés modificar el texto de los errores y su presentación via CSS.
También podés personalizar el email, tanto el From y el Subject, como el propio mensaje que puede incluir HTML.
Tiene control anti-spam.

Para poder incluir en la respuesta una firma HTML, hay que marcar la casilla “Use HTML content type”

Plugin Local Avatar para WordPress

Sun, 08 Mar 2009 00:00:00 -0200

El sistema de avatares que utiliza Wordpress, es el Gravatar (globally recognized avatar). Es un sistema excelente y sumamente práctico, ya que asocia un email con una imagen, lo que permite que al comentar en otros blogs, solamente ingresando tu email, aparezca tu avatar.

WordPress también ofrece la posibilidad de generar imágenes a partir de la dirección de email. Las opciones son limitadas y se puede elegir entre monstruos o diseños abstractos.

Pero, porque siempre hay un pero, si estás desarrollando un sitio en WordPress, donde van a escribir distintos autores y querés mostrar la foto de cada uno, si se trata de gente con poco dominio de Internet (o que no saben inglés), resulta complicado pedirles que se registren en Gravatar.

El plugin Add Local Avatar desarrollado por Peter Sterling agrega al perfil del usuario la opción de subir una imagen. El administrador puede configurar dónde se va a almacenar esta imagen (el directorio tiene que tener permisos de escritura 777) y de qué tamaño se van a mostrar.

rimas.es

Fri, 08 Aug 2008 00:00:00 -0300

Cuando salió el TLD ME, me entusiasmó pensar que en español y en inglés se pueden formar frases que con el .com es imposible porque no hay palabras ni verbos conjugados que terminen en com.

rimas.es es un diccionario de rimas en español, inglés y otros idiomas, particularmente útil si querés registrar un dominio .us o .me formando una palabra dividiéndola en subdominio.dominio.tld (al estilo de del.icio.us, script.aculo.us, etc.).

Uso eficiente del email

Thu, 07 Aug 2008 00:00:00 -0300

Cuando empecé a usar Internet tenía una casilla de Hotmail y otra de Yahoo, donde me suscribía a cuanta newsletter se ofreciera por ahí y las leía! Actualmente tengo muchas más casillas, más SPAM, menos tiempo. Los siguientes puntos me ayudan a no pasarme horas enredada leyendo y administrando emails.

Usar un cliente de email

Usar un cliente permite tener todas las casillas en único lugar y poder revisarlas sin perder tiempo haciendo login en distintos sitios. Te recomiendo el Windows Live Mail¹, ya que funciona perfectamente, sin inconvenientes al procesar grandes cantidades de mensajes y es muy fácil de configurar cuentas.

Configurar las cuentas como IMAP

La ventaja de IMAP con respecto a POP3 es la sincronización. Por ejemplo, si desde la oficina entrás a GMail, leés un correo y lo respondés, cuando llegás a tu casa, abrís el cliente y el estado de ese correo es “respondido”. Otro ventaja, es que si no tenés acceso a tu computadora, podés entrar desde cualquier otra por webmail y ver los mensajes en la carpeta “Importante” o cualquier carpeta que hayas creado.

Organizar el correo en distintas casillas

Es fundamental tener por lo menos una casilla laboral y otra personal, de esta manera, si estás justo de tiempo, podés leer solamente los correos laborales, sin ni siquiera tener que andar leyendo los asuntos, para descartar las presentaciones de powerpoint, que tanta gente es adicta a enviar a toda la libreta de direcciones y las invitaciones de cuanta red social existe.

No crear sistemas complejos de organización

Con el buscador generalmente se puede encontrar sin problemas un mensaje archivado, así que no hay necesidad de organizarlos en miles de carpetas. Los correos que no se pueden contestar de inmediato, se pueden marcar con una banderita roja para ubicarlos rápidamente una vez que tengas tiempo de contestarlo.

Los correos con contraseñas para ingresar a un sitio u otros datos importantes y que se necesiten volver a leer con frecuencia, también es conveniente marcarlos o guardarlos en una carpeta o etiquetarlos.

No borrar (casi) nada

En la actualidad el espacio no suele ser un inconveniente, así que no hay motivo para perder tiempo eligiendo cuáles correos se pueden borrar y cuáles es importante almacenar, simplemente se pueden dejar todos. Si surge un malentendido o si querés consultar si ya le avisaste algo a alguien o en qué fecha, podés volver a leer los correos enviados y recibidos con esa persona.

Las carpetas de correo basura, generalmente se borrar automáticamente cada cierto tiempo y la papelera se puede configurar para vaciar al salir del programa.

Asuntos significativos

Para identificar de inmediato de qué se trata un correo y qué importancia tiene, es fundamental acostumbrarse a escribir asuntos que tengan que ver con el mensaje. Evitar responder y volver a responder infinitamente, si surge una nueva conversación sobre un tema diferente, es mejor mandar un correo nuevo con un asunto apropiado.

Usar la libreta de direcciones

Se puede configurar para que se agreguen automáticamente las personas a las que respondés y además agregar manualmente a las personas con las que tenés contacto para asegurarte de que nunca los correos personales sean marcados erróneamente como SPAM.

Usé Sparrow hasta Google lo adquirió y se pausó su desarrollo y volví a Mail.app pero para Windows, sigo recomendando el Windows Live Mail.
↩

9 conceptos sobre productividad

Sun, 06 Jul 2008 00:00:00 -0300

1. Planificar

Hacer una lista de tareas me ayuda a saber qué tengo que hacer hoy. Dividir un proyecto grande en varias tareas que puedo completar en poco tiempo, me sirve para saber mi progreso dentro del proyecto y poder estimar cuánto voy a tardar en finalizarlo.

2. Priorizar

Teniendo una prioridad, puedo elegir cuáles tareas merecen más dedicación y cuáles son necesarias para que el proyecto sea funcional. Siempre hay tiempo de pulir detalles después.

3. Establecer deadlines

Aunque se trata de proyectos personales, que no tienen fecha, es bueno ponerles un límite. Un límite de tiempo ayuda a finalizar el proyecto, si el tiempo fuera infinito, siempre podría seguir ajustando detalles, haciendo mínimos cambios y nunca quedaría terminado. Dentro de miles de posibilidades, al tener un tiempo, sí o sí hay que tomar una decisión.

4. Simplificar

Las herramientas deberían ayudarme a trabajar mejor y no a perder tiempo. Más arriba hablaba de hacer una lista de tareas, con prioridades y fechas de vencimiento, pero si el sistema se vuelve muy complejo, corro peligro de estar más tiempo organizando tareas, que haciéndolas.

5. Enfocar

Generalmente estoy conectada via mensajería instantánea con compañeros de trabajo, pero a veces necesito desconectarme un rato, para evitar interrupciones y poder terminar. A primera hora si me quedó algo pendiente del día anterior, tampoco leo emails, sino se me va el tiempo borrando presentaciones en PowerPoint, invitaciones a unirme a la red social de moda y diversos mails que aunque no sean por definición spam, son basura. También trabajo en un ambiente ordenado, para evitar distracciones.

6. Rechazar

Aunque a veces no puedo rechazar totalmente una tarea, la puedo por lo menos dejar para después que termine otras cosas más importantes. Si alguien pregunta (léase si el jefe reclama), puedo mostrarle lo que estuve haciendo y seguramente convencerlo de que usé bien el tiempo.

7. Delegar

Si no sé cómo se hace, me tranqué o tuve un problema y me retrasé, prefiero pedir ayuda y terminar la tarea.

8. Controlar

Una de las herramientas que más uso es la computadora, cuándo se va a romper el disco duro es una variable, con suerte no se va a romper nunca, se puede romper dentro de un mes o el día antes de entregar el proyecto más importante del año. Controlar las variables, en este caso, se puede resolver haciendo backups. Si hay un problema con el servicio de Internet, puedo hacer alguna tarea sin conexión o saber dónde está el cyber café más cercano, tener planes B nunca está de más.

9. Descansar

Trabajo mejor de manaña o de noche, ya se que al mediodía no rindo, ese es un buen momento para tomar un descanso.

Análisis de Campari red passion

Thu, 14 Aug 2003 00:00:00 -0300

El texto propuesto es un mensaje publicitario. De este hecho se puede desprender que el texto va a ser persuasivo y además propongo como hipótesis que va a utilizar una estrategia persuasiva semiótica, va a proporcionar un nuevo significado o modificar los significados de Campari para orientar la acción del lector. Estos significados se van a controlar desde la dupla paradigma – sintagma generando figuras retóricas, concretamente metáforas y metonimias.

Para analizar este texto, también cabe señalar que el mensaje reviste una función estética, ya que está estructurado de una manera ambigua y autoreflexiva. Por lo tanto los significantes adquirirán sus significados por interacción contextual y el mensaje puede abarcar varios niveles de realidad. (Eco)

Campari red passion

El texto está formado por la imagen de una botella, sugerida a partir de su etiqueta y tapa, rosas rojas y el slogan red passion. En cuanto al sintagma, se puede decir que por la disposición de los elementos, hay una metonimia, ya que se está nombrando un objeto (botella) por otro (etiqueta y tapa) que tiene con el primero una relación de contigüidad, más precisamente se están nombrando las partes por el todo. (Mortara)

El uso tradicional de las figuras retóricas es el de embellecimientos gracias a los cuales el razonamiento persuasivo, basado en los lugares comunes, parece nuevo, con una nota de información imprevista. Lo inesperado se regula de tal manera que tanto lo inesperado como lo informativo intervienen, no para provocar o poner en crisis lo que ya se sabe, sino para reestructurar en parte lo que ya se sabe. (Eco)

En el caso concreto de esta metonimia, además de su función como tal, también apela a la competencia comunicativa del lector y lo involucra en una especie de juego de unir los puntos que sirve de introducción a la construcción de un sentido más complejo del texto.

Siguiendo con el análisis de la disposición de los elementos, es importante resaltar la cantidad de rosas, su acumulación lleva al extremo los significados que trasmiten cada una de ellas, son como una exageración

Otro punto, en cuanto a la botella, es que en la forma en la que está representada es una figura abierta, si estuviera la botella real sería una figura cerrada. De esta manera, abierta, las rosas rojas se ven a través de la botella, siendo ésta como una ventana o puerta, lo que le da a la bebida un cierto atributo de llave a otro lugar o posibilidad de modificar el entorno en el cual se está.

En el lugar que debería ocupar la bebida han sido colocadas rosas rojas, lo cual nos lleva al plano del paradigma. De todas las posibilidades expresivas para Campari, se han elegido las rosas rojas. Si se hiciera una prueba de conmutación y se sustituyeran las rosas rojas por otra flor o por otra cosa roja, el mensaje evidentemente cambiaría, pero, sin embargo, no hay una oposición binaria que comprometa el ámbito ideológico, por lo cual se podría afirmar que en este caso no hay ninguna connotación que pueda resultarle ofensiva a nadie, en otras palabras, no hay ninguna interpretación que pueda resultar contraria a la deseada por el autor.

De toda la cadena flotante de significados de esta imagen, el mensaje lingüístico red passion, obliga a evitar unos significados y recibir otros, teniendo en cuenta la denotación y connotación de la misma. (Barthes)

El sentido denotado de las rosas es el de flores cultivadas con fines específicos, no se trata de flores que crecen espontáneamente, sino que requieren un cuidado. Una primera connotación es que se trata de un producto de calidad, manufacturado cuidadosamente. Además las rosas están completamente abiertas, no hay capullos, lo cual sugiere una plenitud, y una noción de que ya están preparadas, una idea de que la bebida está en las condiciones ideales para ser disfrutada.

Una connotación bastante obvia, se relaciona con la supremacía que tienen las rosas comparadas con otras flores como regalo romántico. Esto se vincula en forma directa con el concepto red passion, ya que asocia el color rojo con la idea de pareja, erotismo, etc.

Otra connotación, parte de las asociaciones virtuales que surgen de las rosas: “toda rosa tiene espinas”. Esta idea aporta cierto grado de peligro que implica el placer de las rosas, lo cual también es, en cierta medida, una invitación a la aventura y una advertencia, ya que por todo lo que podemos incluir en el contexto, se trata de una bebida fuerte.

Otra interpretación de las espinas, podría pasar por el lado del contenido alcohólico de la bebida. A pesar de que esta advertencia, viniendo de quien lo vende, podría sonar extraña, opino que si la ve una persona “cauta” la va a considerar apropiada y una persona quien justamente esté interesada en el aspecto alcohólico tampoco le va a molestar, ya que queda claro que las rosas rojas bien valen la pena a pesar de las espinas.

Todas estas connotaciones, que surgen de los movimientos dentro del paradigma, están generando una metáfora. Se está identificando a Campari mediante aquel objeto con el cual se lo compara, las rosas rojas. (Mortara) En esta instancia se ve como una imagen ambigua contiene mucha cantidad de información. Considerando ahora, las dos figuras retóricas presentes, se aprecia como la metáfora es mucho más potente que la metonimia, ya que al hacer modificaciones en el eje del paradigma influye de una manera mucho más explícita en el Umwelt.

Como conclusión, a través de las modificaciones realizadas en los ejes del sintagma y del paradigma, con su subsiguiente generación de figuras retóricas, vemos que Campari no es sólo una bebida roja y fuerte, como tantas otras, sino pasión, aventura y riesgo, llevados a límites extremos, y es esto, en última instancia, lo que lleva al lector a comprar la bebida, ya que a través de ella puede ingresar a este tan deseable mundo red passion.

Elementos visuales en el cómic

Mon, 07 Apr 2003 00:00:00 -0300

Los dibujos en los comic no son solamente una ilustración de lo que dice el texto, sino que ellos mismos tienen una función narrativa. Por lo tanto los dibujos se pueden analizar en términos de comunicación visual¹.

El grosor y tipo de línea utilizado responde a diferentes significados. Las líneas de contorno de las figuras además de componer el dibujo también aportan más información sobre los objetos. La variación en el grosor de las líneas de la mesa de luz, por ejemplo, informa desde el punto de vista de las dimensiones. Además la línea modulada le confiere movimiento y dinamismo al dibujo, tal es el caso de las sábanas.

El relleno a veces se realiza por medio de sucesión o superposición de líneas a modo de tramas o como manchas de color. El relleno tramado de la señora resulta más expresivo y los plenos contrastantes del criminal tienen más fuerza.

El color es otro recurso utilizado. Comparando las pesadillas de Spiderman y Batman, cuyo contenido es muy similar, se aprecia la diferencia que marca el color. Para Spiderman se utilizan colores naranjas y rojos que demuestran sentimientos y tensión y para Batman colores azules, fríos más acordes con la personalidad del personaje.

Se utiliza la perspectiva, en el caso de la ventana se trata de un uso convencional y en el caso de los edificios es una perspectiva deformada, en la cual las verticales se inclinan. El uso de la perspectiva en el primer caso le da realismo y en el segundo acentuando las diagonales se genera tensión.

Según la manera en que están dispuestas las viñetas en una página, se distinguen páginas con una diagramación equilibrada, pasiva y otras que resultan dinámicas. Esto varía dentro del mismo ejemplar generando ritmos y distintas velocidades, ya que algunas páginas pueden resultar más o menos complejas de leer, según la cantidad y distribución de las viñetas.

Bibliografía: Los lenguajes del comic. Danielle Barbieri
↩

Apuntes al Margen

El rol de JavaScript en el desarrollo web actual

JavaScript del lado del cliente

JavaScript en el servidor

JavaScript más allá de la web

Conclusiones

Brackets vs Sublime Text

Round 1: UI y espacio de trabajo

Round 2: Características distintivas

Round 3: Extensiones

Round 4: Otros detalles

Y el ganador es… ¡Sublime Text!

Teoría del color para diseñadores web

Modelo de color RGB

RGB vs HSL

Armonías de color

Monocromático

Análogo

Complementario

Tríada

Cálidos y fríos

Recursos

Conclusiones

Compass vs Bourbon

Round 1: Mixins y funciones

Round 2: Extensiones

Round 3: Documentación

Y el ganador es… ¡Bourbon!

Trencito para Sublime Text

Navegación

Búsqueda

Selección y cursores múltiples

Edición

Espacio de trabajo

Varios

Conclusiones

Nuevo diseño de Apuntes al Margen

Un poco de historia

Nuevo diseño

Contenido primero

Código

Social

Planes futuros

¿Comentarios? ¿Sugerencias?

Cómo solucionar problemas de desarrollo web

Paso 1: Tomar un descanso

Paso 2: Leer la documentación

Paso 3: Buscar la solución

Opción A: Buscar la respuesta

Opción B: Hacer una pregunta

Recomendaciones finales

Guía definitiva para aprender diseño web y desarrollo front-end

Aprender diseño web y desarrollo front-end como hobby

Aprender diseño web y desarrollo front-end como profesión

Educación formal / presencial

Educación autodidacta: diseño web

Educación autodidacta: desarrollo front-end

Educación autodidacta: creación de plantillas

Conclusiones

Inspiración para diseño web

Arquitectura

Cine y Televisión

Juegos

Literatura

Moda / Estilo de vida

Música

Naturaleza

Períodos históricos

Conclusiones

Blogs en español

Por favor, ¡recomendáme un blog! 1

Herramientas de desarrollo front-end

Bower

CoffeeScript

Grunt

LESS, Sass y/o Stylus

Modernizr

Normalize.css

Yeoman

Zepto

Por favor, ¡recomendáme un blog! ¹