Diseño 14
Dibujando con curvas bezier en HTML5
Es posible dibujar curvas Bezier directamente en la página web con instrucciones utilizando el canvas de HTML5 y el método beziercurveTo.
¿para que sirven las curvas de bezier?
Las curvas de bezier sirven para hacer curvas bonitas, de hecho son un método matemático para describir curvas y que ha sido implementado en los sistemas CAD, Photoshop y quien sabe cuanta herramientas más, y,, como pronto se viene el evento de RailsGirls 2.0 hice este post Temático.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "rgba(200,0,0,0.5)";
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
ctx.font = "bold 16px Arial";
ctx.fillText("Rails Girls 2.0", 100, 100);
} else {
alert('Necesitas un navegador moderno para poder ocupar el canvas de Html5 .');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
¿y no sería lo mismo ocupar una imagen hecha en photoshop?
Claro, de hecho sería mucho más fácil, pero aquí viene el siguiente desafío, ya que el canvas de html5 se puede limpiar cada cierto tiempo como en este experimento, podrías ocupar las curvas de bezier para hacer una animación interesante.
El diseño web se ha comoditizado
Este es un tema polémico puesto que a nadie le gusta escuchar que lo que ha pasado años aprendiendo hoy tiene escaso valor, pero hay que afrontar la realidad, hoy el diseño de una página web se puede encontrar gratis en la web y una plantilla compleja para WordPress con soporte desde foros hasta E-commerce se puede comprar por 60 dólares.
Se ha hecho común ver a gente criticando las ofertas de trabajo en los grupos de diseñadores de Facebook donde se piden muchas herramientas (algunas ni siquiera directamente relacionadas con sus carreras) y ofrecen sueldos miserables, pero por más que exijas que valoren tu hora de trabajo el problema de los commodities es justo ese, sus precios se fijan a valor de mercado.
El problema partió cuando se popularizó la idea de que el diseño web consiste simplemente en hacer páginas web bonitas, y como el resultado final del diseño de una página consiste simplemente en un par de archivos e imágenes, copiarlos o venderlos digitalmente se hizo sencillo.
Como ya no es necesario hacer el diseño ya no se requiere conocimientos avanzados para hacer una página web, basta con buscar plantillas gratis (o pagadas) en google descargar algunas, y cambiar el contenido que tienen por el que tu quieres poner. El inspector de elementos es muy buen aliado para ayudarte con esto.
Todo esto está sucediendo porque aprender es fácil (o por lo menos mucho más fácil que antes). El mercado se ha inundado de practicantes que cobran poco por su trabajo y las personas que antes cobraban bien por el diseño web hoy lo tienen que hacer por un tercio o menos del valor que cobraban antes.
¿Cómo Diferenciarse?
Hay que entender que a el cliente final no le importa el proceso de como llegaste al resultado, a el sólo le importa el resultado, por lo tanto da lo mismo si utilizas plantillas o no, si no eres capaz de entregar una propuesta diferente para tu cliente entrarás a competir a precio mercado del commodity del diseño.
Para lograr una diferenciación debes entender como tu trabajo aporta valor al cliente más allá de lo que crees que aporta valor. Esta es la parte más difícil porque es común sobrevalor el trabajo de uno. Para encontrar cuanto valor aporta realmente tu trabajo debes aprender a medir tus resultados, al final esos datos te darán una ventaja competitiva por sobre los demás.
No es lo mismo haber hecho un sitio web para un cliente X, que haber hecho un sitio web para un cliente y que este haya aumentado un 500% sus ventas.
Finalmente, es importante destacar que siempre hay que seguir aprendiendo, las tecnologías web están constantemente cambiando y si conoces lo nuevo siempre tendrás ideas para propuestas interesantes y diferenciadoras.
Cómo disminuir el tamaño de muchas fotos simultáneamente?
Si uno tiene que editar una sola foto, no hay ningún problema con abrirlas en photoshop o en el preview de mac, editar los tamaños y exportarlas para la web, pero, ¿qué pasa cuando quieres subir todas las fotos de un evento, como a mi me pasó durante la Hackathon de hack4good?
Ahí es cuando OSX tiene un pequeño programa salvavidas llamado sips que permite disminuir el tamaño de fotos por lotes, y su uso es bastante sencillo, en la linea de comando entra en la carpeta de las fotos y luego:
sips -Z 800 *.jpg
Obviamente habría que cambiar la línea por .png o .jpeg en los casos respectivos por que no estamos cambiando el formato de la foto sólo cambiando su tamaño.
Advertencia: El comando es destructivo, o sea no te genera un respaldo de las fotos antes de disminuir su tamaño.Cómo escoger los colores para un sitio web
Yo no soy diseñador, incluso me cuesta combinar mi ropa, pero cómo todo programador que se dedica al área web constantemente me toca hacer un Landing Page o una página web y siempre me veo con la misma duda, ¿Cómo generar una paleta de colores interesante para un sitio web?
Al final siempre termino utilizando una da las siguiente 3 estrategias para escoger una paleta de colores
Mis 3 estrategias para escoger los colores para un sitio web
1) Ocupo cómo base los colores de algunas de las plantillas de Twitter Bootstrap de la página de Bootswatch
2) Generando una paleta de colores en base a una foto con herramientas como Pictaculous
3) Generar un paleta con la rueda de Adobe Kuler
Tipografías de la calle
Una idea muy interesante, si un simple letrero en la calle consigue que le des dinero a una persona, algo de especial ha de tener, y si no es el mensaje, es bastante probable que sea la tipografía.
Pero que tipo de tipografías son las que emanan de personas que viven en la calle, son muy distintas?, que las hace especiales?, los traumas de nuestra vida repercuten en la letra?
Con estas preguntas tres diseñadores reunieron esfuerzos para desarrollar el proyecto Homelessfonts, con el propósito no solo de recoger las tipografías de varios indigentes sino también para venderlas y de esta forma ayudar a las personas que viven en la calle.
No contentos con ese espectacular trabajo hicieron un potente video lleno de frases que dan mucho que pensar. En particular, las siguientes dos las encuentro muy poderosas
- Cuando escribes en un cartón, no vas a escribir algo bonito, estas transmitiendo a través de la escritura algo que te jode.
- Los indigentes escriben letreros que nadie quiere ver.
Aquí el video completo. Vale la pena verlo.
Las tipografías las puedes ver y comprar en la página oficial