Este primer párrafo es de lo más arriesgado porque como los que estamos dentro del mundillo de internet sabemos no hay dos sitios iguales y generalizar es prácticamente imposible. Ya veo a alguien que va a coger al teléfono y montar un cristo porque le han cobrado una pasta por su web. En los últimos dos años he visto muchos más timos en el tramo de “lo barato” que de “lo caro”. Exceptuando, lógicamente, páginas de la Administración Pública donde las cifras están infladísimas y uno ve cosas lamentables, aún antes de saber el precio. Sabiéndolo ya le dan ganas de salir a pegar tiros al ayuntamiento más cercano.

El caso es que lo más quema a un principiante es esa respuesta permanente de “depende, depende, depende…” por eso me he mojado un poco más arriba. Pero es que el “depende” es lo más normal del mundo. Si nos ponemos con Wordpress más aún porque la cantidad de plugins disponibles te permiten montar desde algo sencillísimo hasta el blog de la Casa Blanca (bueno, aunque ellos usan Drupal :-)

Por otro lado lo del diseño es para dar de comer aparte. Que no debería valer lo mismo un buen diseño que uno malo parece claro pero es que si a tu cliente le gustan los carteles enormes de EN CONSTRUCCIÓN y los gifs animados para indicar la nacionalidad de la web ¿qué haces? A mí me encanta el diseño del blog de Hugo pero al usuario medio lo más probable es que la parezca soso ¡no tiene nada que parpadea! En fin que detrás de estas líneas no hay otra cosa que las palabras Información Asimétrica (que junto con Riesgo Moral y Selección Adversa deberían escocer a todos los economistas en la sala). En última instancia, sólo tú sabes el valor real de tu trabajo y tu cliente tendrá muy poca idea de cuánto vale lo que quiere.

Osea, que si normalmente el precio de un bien lo fijan la oferta y la demanda (lejos de lo que piensan el 99% de los españoles que consideran que el precio de un bien equivale a lo que cuesta fabricarlo) en el ámbito del desarrollo web estamos bien jodidos por ambos lados.

Por eso, para todos los que estéis empezando con vuestros trabajos de desarrollo web recomiendo encarecidamente este magnífico post de Carlos Leopoldo:

• Cómo hacer presupuestos para diseño web (original en inglés)

Mezcla bastantes métodos que he oído por ahí y la ideal del multiplicador por el grado de dificultad me parece muy buena.

Pues en el Tumblr de Iván lasso descube Dummy Image Generator que hace lo mismo pero con imágenes. ¿Cómo es esto?

Vale, suponte que necesitas colocar en un sitio una imagen de 300 x 250 pixels que aún no sabes cómo será. Pues en el código de tu página web pones:

<img src="http://dummyimage.com/300x250" alt="imagen prueba/>

Y te saldrá algo como esto:

Para otros ejemplos sólo tienes que cambiar las dimensiones de la línea código (donde pone 300×250) y listo.

Por ello lo mejor es empaparse un poquito antes de empezar y aquí os dejo esta lista de artículos para principiantes de Line 25 que descubrí hace tiempo y que me han servido de mucho. No son para principiantes totales, algo tendrás que saber, pero seguro que alguno de ellos tarde o temprano te saca de un apuro.

1. Resetting your styles with CSS Reset

Te parecerá extraño pero aunque empieces tu hoja de estilo desde cero, es posible que para los navegadores tu diseño no parta de cero. Por ello lo primero es poner a todos los navegadores de acuerdo y que no se tomen licencias que tú no quieres a la hora de considerar algunos espacios o dismensiones. Esto se hace a través de la técnica del CSS Reset sobre la que por cierto hay muchas variaciones como se puede observar en Perishable Press o en Inspiringpixel

2. Learn CSS Positioning in ten steps

Un tema que puede volver loco a cualquier los primeros días: las diferentes formas de posicionar un elemento a través de la hoja de estilos. Este me parece el mejor tutorial que he visto hasta la fecha y aún así no acabo de tenerlo del todo claro.

3. Internet Explorer and the CSS box model

Si ves que aparecen CSS e Internet Explorer en la misma frase vete haciendo café. Como decía en el primer tutorial, la forma en que interpretan las medidas los distintos navegadores te hará llevarte las manos a la cabeza más de una vez, pero la forma en la que las interpreta Internet Explorer merece darle de comer aparte. Estupendo artículo para enfrentarse a este problema.

4. Specifics on CSS Specificity

No me gusta el color de este enlace así que voy a cambiarlo en la hoja de estilos [...] ¿Pero qué? [...] ¿Por qué demonios sigue saliendo en rojo si lo acabo de cambiar? Pues probablemente porque en algún otro lugar le hayas dicho al navegador que ese enlace va en rojo y o cambias las prioridades o te puedes armar un buen  jaleo. De eso va este tutorial: de qué propiedades de tu hoja de estilos valen más que otras o cómo interfieren entre sí.

5. Faux Columns

Cualquier tutorial que venga de A List Apart es de calidad. En esta ocasión comentan algunos trucos para conseguir que una columna se extienda verticalemente más allá de su contenido. Muy útil cuando tenemos un diseño tipo blog con una columa de dimensión variable que cambia según el tamaño de los post y otra que es siempre igual (la barra lateral) pero que queremos que “acompañe” a la principal.

6. Sexy Ordered Lists with CSS

Algo tan sencillo como darle estilo a una lista ordenada numéricamente pero separando el estilo de los números de los elementos de la lista.  Se puede ver un ejemplo del resultado.

7. Divitis. What is and How to Avoid it.

Si vienes de diseñar con tablas seguro que el maravilloso mundo del <div> te atrapa y te pones a “enmarcar” todos los trocitos de tu web con divisiones. Esto es la divitis y la mayoría de las veces no es necesario. A mí me ha pasado muchas veces que por no saber darle estilo a una lista o a una imagen, la metía dentro de un <div> y le daba formato a este. Pues como te imaginarás hay formas mucho mejores de hacerlo.

8. Using background-image to replace text

Una clásico. Si aparte del CSS te interesa un poco el mundo del SEO sabrás que aunque pongas un maravilloso logo hecho en Photoshop de tu negocio en la web, convendría que ese logo estuviera acompañádo de un <h1> con el nombre de la empresa en el código HTML. ¿Cómo hacemos para que no se muestre el texto del <h1> pero sí el logo? Hay diversas técnicas con pros y contras discutidas en el tutorial.

9. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

A mí ya me costó en su día lo de usar una única imagen y que al pasar el ratón por encima cambie pero es que de un tiempo a esta parte lo que optimiza la carga de tu sitio web es meter la mayor cantidad posible de iconos en una única imagen y jugar con la posición de esta. Muchos sitios como Google que necesitan un tiempo de carga muy rápido usan ya esta técnica. Al final del tutorial tienes más ejemplos con Facebook o Google Reader.

10. How to create CSS Menu using Image Sprites

Enlace a la caché de Google porque el original no tira bien. En la línea del anterior, cómo crear un menú clásico de navegación de un sitio web con efectos y una única imagen.

11. 10 Examples of Beautiful CSS Typography and how they did it…

De primeras cuando uno se pone a jugar con la tipograf’ia en una hoja de estilos piensa que no tiene muchas posibilidades pero la verdad es que con un poco de imaginación y creatividad se pueden hacer vriguerías desde la hoja de estilos. Aquí tienes unos cuantos ejemplos.

12. CSS Shorthand Guide

Una guía de ¿bolsillo? con técnicas para reducir el tamaño de tu hoja de estilos agrupando diversas propiedades en un única línea. A veces no hace falta que el color, la posición, el tamaño y más cosas vaya cada una por su cuenta. Podemos agruparlas todas y así seguir mejorando la velocidad de carga de nuestro sitio web.

13. Push Your Web Design Into The Future With CSS3

Y con todo lo que te ha llevado a ti aprender CSS2 y ahora resulta que tienes que cambiarlo a CSS3 . No te preocupes, la evolución suele traer muchas más ventajas que inconvenientes así que si quieres aprender cómo poner sombras, transparencias o usar tipografías personalizadas todo a través de CSS aquí aprenderás cómo.

14. How to use headings in HTML

Muy muy sencillo y muy recomendado también con los interesados en el SEO ya que un uso correcto de los encabezamientos en el código HTML es muy buena práctica de cara a Google y otros buscadores.

15. 10 HTML tag crimes You Really Shouldn’t Commit

Apuesto lo que sea a que si llevas menos de un mes con CSS hasta comentido al menos 8 de estos 10 errores. Muchos provienen de que en HTML+CSS al mismo objetivo se puede llegar por distinos caminos pero es no significa que sean todos igual de buenos. Una artículo estupendo

Con Antonio hemos hablado de erro500, del origen de Weblogs SL, de la remuneración de sus editores y de algunas controversias como la liberación del código de Weblogs y la gestión de las fuentes en los blogs comerciales.

Las preguntas que dejásteis en Facebook las responde en la parte final de la entrevista.

Por cierto, añadir que la sintonía de inicio y final que estrenamos en 2010 está sacada de We Are Love , el álbum de debut de The Brandy Hips que está licenciado con Creative Commons. Entrevistaremos a los Brandy en un par de semanas, pero ya os adelanto que su historia tiene mucho jugo. El disco lo podéis comprar, descargar o escuchar en Spotify.

Escuchar [Blip.TV] | Descargar |  Entrevistas anteriores

Suscribirse en iTunes | Suscribirse por RSS

“No tengo vocación de charlista”

“Liberaremos el código de Weblos SL por partes”

“Vivir de las fuentes es el camino a la irrelevancia”

Los que somos unos analfabetos del Photoshop, cuando nos ponemos a hacer un diseño web en tonos oscuros fácilmente caemos en unas combinaciones radioactivas que hacen daño a la vista y que podrían pasar por una web de 1997 (siempre que incluya un buen banner amarillo con “en construcción”) sin mayor problema.

Por eso, como estos días me estoy pegando con un diseño sobre fondo negro, tengo de tutorial de cabecera este estupendo artículo de Kabytes.com, que es una traducción-adaptación de The Do’s and Don’ts of Dark Web Design

• Cuestiones de los diseños oscuros [Kabytes]

¿Serif o Sans-Serif? ¿Que tono de blanco debo usar? ¿Con qué paleta de colores debo jugar? Todas estas cosas se tocan en el tutorial y más ampliamente en la versión original en inglés.

Y si además queréis algo de inspiración, os dejo dos listados de estos míticos de “Los mejores diseños oscuros” para que intentéis no caer en lo barroco (al menos de forma inconsciente):

• 30 Dark Designs You Should’ve Seen [Smashing Magazine]
• 25 Beautifully Dark website Designs [Vandelay]

El servicio de alertas consiste en avisarte con un “hey, está pasando algo raro hoy”. Puede ser bueno o malo pero el caso es que algunas cifras no están coincidiendo con las esperadas. Una página en concreto que tenía mucho éxito de repente pega un bajón de visitas (quizás porque Google cambió la posición de la misma en sus resultados), tu blog tiene un pico de tráfico espectacular (quizás te han citado en un sitio importante) , etc…

La idea, aún en Beta, es muy buena y tiene mucha miga estadística detrás sobre temas de medias, esperanzas y cosas así pero por les falta afinar un poco más. Sin en un momento te avisa de que la gente de Barcelona está pasando mucho más tiempo en tu web del previsto a lo mejor es porque un tipo en concreto, desde allí, se ha tirado toda la tarde navengando por tu web y Google lo extrapola al resto de barceloneses. Ya sabéis que hay mentiras, grandes mentiras y estadísticas.

Como decía al principio del post, tenemos la opción de crear alertas personalizadas que incluso nos notificarán en el e-mail cuando ocurra un suceso determinado:

Las combinaciones posibles dan vértigo. Por un lado seleccionamos el parámetro que queremos estudiar y por otro el valor que debería tomar para recibir una alerta. Para la imagen he usado un ejemplo sencillo donde pedimos recibir una alerta cuando las visitas desde Google sean superiores a 7000 para un día concreto.

(click para ampliar)

Sigo pensando que las enemil opciones de Google Analytics lo hacen algo árido para el usuario medio que quizás opte por otro sistema de estadísticas como Statcounter pero para qué negarlo, hay determinadas secciones que son un espectáculo estadístico.

Por otro lado, adoro Tumblr (incluso antes de la genial conferencia de David Karp en el EBE) y no me cansaré de recomendarlo para personas que se quieren hacer un blog sin demasiadas complicaciones.

Así pues tenemos:

• Un iPhone, con el gestor de correo configurado
• Una cuenta en Tumblr (os recomiendo nuestro especial de Tumblr para principiantes)
• Ganas de hacer fotos

La clave de todo esto, al igual que pasa con Posterous, es publicar las fotos a través del correo electrónico. Entra en tu cuenta de Tumblr, y en el menú superior acude a Goodies:

En la parte derecha verás una dirección de correo única a la que mandar tus fotos. No puedes personalizar este correo pero sí solicitar uno nuevo haciendo click en Reset this address:

Luego en tu iPhone, cuando hagas una foto le das a enviar por correo (el icono de abajo a la izquierda) y escribes a ese correo. No hace falta que le pongas título al mail. La foto se publicará en pocos segundos.

La diferencia básica entre Tumblr y Posterous es que el segundo está completamente orientado a la publicación a través del correo electrónico. De hecho en posterous no hace falta ni que te registres: con que mandas la primera foto por e-mail a  ya te abrirá tu propio espacio, y todas las gestiones de configuración te las enlazará a través de correo.

Sin embargo, Tumblr es bastante más personalizable (dentro de su funcionamiento tan sencillo) y tiene una comunidad más fuerte por lo que creo que merece la pena el tutorial.

Si no quieres salir de tu iPhone pero quieres mejorar la calidad de tus fotos hay tropecientas apps de retoque para el teléfono de Apple. La más popular y de reciente aparición es la app de Photoshop para el iPhone aunque me gustaría recomendaros un post de Fotomaf en el que recopila otras muy interesantes:

• El iPhone y la fotografía
  

Por último comentar que no sólo podéis mandar fotos a Tumblr por correo, sino cualquier de los siete tipos de contenido que soporta. Por ejemplo si ponéis un texto que empiece por comillas en el correo lo detectará como una cita. Podéis leer más al respecto en Mobile + Email publishing | Tumblr

• También en blogoff: Reordenar fotos en Flickr

Windows

Mac

Ubuntu

¿Pueden cambiar mucho los clicks que recibo en la publicidad de mi blog si coloco los banners a la izquierda en lugar de a la derecha? ¿Recibiré más correos si cambio el texto del formulario de contacto? ¿Puedo mejorar la cabecera de mi web para que aumenten las reservas en mi hotel?

Obviamente cada proyecto es un mundo y aunque existen recetas más o menos estándar para mejorar la usabilidad de un sitio web y las conversiones en sitios de compras y reservas, siempre hay pequeños detalles que nos sorprenden y que no seríamos capaces de detectar a no ser que estuviéramos sentados codo con codo con los visitantes de nuestra página web.

ABtests.com es una página muy chula que descubrí en Microsiervos y donde distintos desarrolladores hacen públicas las pruebas de los llamados Test A/B, es decir, hacen un pequeño cambio en el diseño de su web y observan cómo afecta al comportamiento de los usuarios.

Aunque por el momento no hay muchas colaboraciones, sí que podemos encontrar ejemplos interesantes como el de Mozilla que sencillamente cambiando el texto de su botón de descarga de “Try Firefox 3″ a “Download now” aumentó las conversiones en un 3,6%.

Algunas cosas uno las ve y piensa “caray, esto era obvio” pero con tantas obviedades es bastante probable que se nos pase alguna a la hora de diseñar nuestro sitio web :-)

La mayoría de los test vienen con información de cómo se han hecho, conclusiones enlaces a la fuente original.

(click para ampliar)

xkcd es una de las tiras cómicas más populares de la red (que hemos reseñado muchas veces por aquí) y el homenaje que le han hecho a Geocities el día de sus despedida es glorioso. Y es que hace 10 años lo teníamos claro: marquesinas + <blink> + Comic Sans es una combinación ganadora

• Visto en: Error 500