En este weblog Horacio Bella escribe sobre diseño, internet y trabajo freelance

HTML por comida

Algunos son capaces de hacer hasta los trabajos más insalubres por un poco de comida.

Muchos de los que tenemos un sitio/blog y estamos metidos en esto de la web 2.0 tenemos una cuenta en Twitter, la cual queremos integrar. A continuación mostaré como insertar la última actualización de Twitter en nuestro sitio usando JSON. Simplemente copiamos y pegamos el siguiente código:

<script type="text/javascript">
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
 
if (delta < 60) {
return 'menos de un minuto';
} else if(delta < 120) {
return 'hace un minuto';
} else if(delta < (45*60)) {
return (parseInt(delta / 60)).toString() + ' minutos atr&aacute;s';
} else if(delta < (90*60)) {
return 'hace una hora';
} else if(delta < (24*60*60)) {
return (parseInt(delta / 3600)).toString() + ' horas atr&aacute;s';
} else if(delta < (48*60*60)) {
return 'ayer';
} else {
return (parseInt(delta / 86400)).toString() + ' d&iacute;as atr&aacute;s';
}
}
 
function twitterCallback(obj) {
var id = obj[0].user.id;
document.getElementById('my_twitter_status').innerHTML = obj[0].text;
document.getElementById('my_twitter_status_time').innerHTML = relative_time(obj[0].created_at);
}
</script>
<span id="my_twitter_status"></span> &mdash;
<small><span id="my_twitter_status_time"></span></small>
 
<script type="text/javascript" xsrc="http://www.twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback&count=1"></script>

Modificamos USERNAME por nuestro nombre de usuario (o el que querramos mostrar) y listo. Y en la última línea modificamos “xsrc” por “src”. También se puede modificar la forma en que se muestra el tiempo que ha pasado desde ese twit. El texto se mostrará en el span con el ID my_twitter_status y el tiempo en my_twitter_status_time. Muy simple.

Si quieren también pueden mostrar las actualizaciones de sus amigos o del public timeline, pueden obtener la dirección para hacerlo en el API de Twitter. Un pequeño detalle que quiero recomendarles es el de agregar la línea del <script /> que cierra al final del código de su sitio, justo antes de </body> para hacer que esto sea lo último en cargar y que en caso de que Twitter esté caído (lo cual sucede a menudo) el resto de su sitio se cargue con normalidad.

Que Google te de el doble de lo que me deseas

– Frase trillada en modo geek

Si alguna vez han diseñado un sitio web sabrán que al tratar de colocar una imagen con determinado color de fondo para que se combine con el fondo del sitio (que es del mismo color), el resultado no es el mismo en todos los navegadores. Armonth lo explica muy de buena manera así que tomaré sus palabras:

La interpretación del color está sujeta a un perfil que interpretará el sistema operativo o la aplicación visualizadora. En el caso de una imagen el perfil puede estar incrustado (embedded) o marcado (tagged).

Dependiendo del navegador o el formato que tenga la imagen el resultado puede ser muy distinto. Personalmente trato de evitar este recurso si es posible, pero en caso de tener que llevarlo a cabo hay dos posibles soluciones:

La primera podría ser mediante los hacks de CSS y los comentarios condicionales, elegir el color adecuado para cada navegador con la ayuda de un selector de color. No es lo más recomendable pero para alguna ocasión puede servir pese a ser un trabajo engorroso. La otra opción y creo que la más simple es la de reemplazar el color sólido de fondo que estamos usando por una imagen de 1×1 pixeles de dicho color, así sea cual sea el navegador interpretará los colores de la misma manera, logrando el efecto deseado.

Hace algunos días había comentado sobre las preguntas a la que un diseñador freelance debe responder no para hacer su trabajo más agradable y respetable. Para completar esto y siguiendo lo que hizo Samuel a continuación voy a listar algunas preguntas a las que un freelance debe responder que sí para conseguir más trabajo y tener una mejor relación con el cliente.

¿Me podes decir tus precios? Sí.
Los aranceles que manejas no tienen que ser ningún secreto para los demás. El famoso método de tratar que el cliente ponga el precio para ver si se puede sacar algo más de lo normal no es lo mejor. Es importante también saber defender los precios de cada uno.

¿Puedes mostrarme otros trabajos tuyos? Sí.
Que mejor manera de mostrar como trabajamos que enseñar lo que ya hemos hecho. Un portfolio bien nutrido y detallado es una buena manera de conseguir potenciales clientes.

¿Podes tener esto terminado para mañana? Sí.
En el artículo anterior había dicho que la respuesta a esta pregunta era “no”, pero acalarando que si el cliente estaba dispuesto a pagar por ese plus y el trabajo estaba dentro de lo factible podíamos aceptarlo. Hay que analizar bien esta respuesta, tal vez no lleguemos a tenerlo listo para mañana, perderemos el trabajo, el plus y el tiempo utilizado.

¿Sos capaz de hacer …? Sí.
Tal vez el cliente te esta pidiendo en el trabajo algo que no has hecho nunca o en lo que no te especializas. No importa, dile que si puedes hacerlo. Primero inténtalo, si no hay buenos resultados terciariza el trabajo, para esto hay que tener una muy buena lista de contactos disponible.

¿Puedo editar el sitio por mi cuenta? Sí.
Esto es clave hoy en día, el cliente quiere tener la posibilidad de modificar su sitio de manera simple cuando se le antoje. Tal vez hace algunos años esta respuesta era algo difícil de responder, pero hoy con tantos CMS y scripts dando vuelta sin lugar a dudas tiene que ser “sí”.

¿Ofreces apoyo luego de terminado el trabajo? Sí.
Hay varias formas de manejar esto. Una buena manera de hacerlo es prestando soporte por cierta cantidad de tiempo de manera gratuita donde se traten errores en el trabajo o la optimización de mismo. Luego del momento en que el trabajo se considera finalizado, si se quiere modificar algo será trabajo nuevo, lo cual deberá ser remunerado con dinero nuevo.

¿Hay alguna otra manera de pagarte además de la que me acabas de decir? Sí.
Mientras más formas de posibilitarle el pago al cliente tengas, menos trabajo perderás por este motivo. Las 3 básicas y que por ejemplo yo utilizo son depósito bancario, Paypal y personalmente. Cada una se aplica por lo general por la ubicación geográfica del cliente.

Simple herramienta para generarle esquinas redondeadas a imágenes. Yo le agregaría un API, pero no todo es color de rosas. (0)
Las chicas también diseñan… y bastante bien. (0)

Theme Minimo para WordpressTengo el agrado de presentarles a “Minimo”, el último theme para Wordpress que acabo de liberar y que se suma a la lista de mis themes gratuitos para Wordpress. Como para variar es un theme minimalista donde traté de ubicar la menor cantidad de elementos para centrar la atención visual en el contenido.

No soy muy amante de los diseños oscuros, pero en esta ocasión quedé conforme con la gama de colores utilizada y que según fui probando hace muy fácil la lectura, con tipografías no demasiado pequeñas y un espaciado importante entre elementos. Está disponible en inglés y español, tiene un poco de SEO y es válido su XHTML y su CSS.

Espero sus comentarios al respecto y si alguno lo utiliza que avise, mucho más si lo modifica un poco. Además inauguro una especie de galería de demostración de mis themes donde pueden ir probando cada uno de ellos al seleccionarlos en el menú desplegable de la parte superior.

Muy buen tutorial de como hacer remeras con las imágenes de  videojuegos pixeladas. (1)

Como siempre digo, la mayoría de los blogs están hechos por personas y para personas, esto nos da la posibilidad de imprimir mucho más que texto e imágenes en cada uno de nuestros posts y generar así una identidad. Pero ¿para que queremos tener una identidad?.

Básicamente nuestra identidad nos va a servir para separarnos de los demás en un mercado o nicho bastante saturado, es decir, para que nuestros lectores o quienes lleguen al sitio rápidamente se den cuenta que no somos un blog más del montón.

Entre las principales ventajas que presenta esto podemos enumerar, tal como lo hacen en Daily Blog Tips, la posibilidad de crear lectores fieles que nos reconozcan fácilmente y tal vez se identidifiquen con nosotros produciéndole ganas de leer nuestras entradas y no sólo scannearlas, generar una marca con su nombre e imágen y en muchos casos poder tratar temas alejados del blog mostrándose usted como “persona”.

Dicha identidad no se va a crear de la noche a la mañana sino que requiere tiempo, mucho actividad en el blog susodicho y una visión clara de lo que se busca y en que parte del proceso se está. Algunos puntos que ayudarán a realizar esta tarea serán pensar en que cosas son las que lo diferencian de los demás y explotarlas, además de ver que es lo que están diciendo los demás sobre vos. Hay que pensar muy bien que tipo de identidad se quiere crear, una vez que lo hayas conseguido no vas a poder arrepentirse, o mejor dicho, va a ser muy difícil revertirla.