En este tutorial aprenderás a crear tu propio sistema de pago por tweet con PHP. El pago por tweet es una técnica de marketing por la cual restringimos el acceso a ciertos contenidos/descargas y sólo los hacemos accesibles si el usuario nos da permiso a publicar un tweet desde su cuenta.
Leer entrada completa
La propiedad filter es una de las más impresionantes en el apartado gráfico. La constante evolución de HTML5 y CSS3 nos acerca a funciones tan increíbles como esta, que nos permite aplicar efectos “tipo Photoshop” sobre nuestros elementos.
Al día que escribo estas líneas, las últimas versiones de Chrome ya soportan filter, y aunque no sea conveniente aplicarlo todavía en nuestros proyectos profesionales, podemos ir viendo como funciona.
Leer entrada completa
En este tutorial veremos como usar iconos vectoriales con @font-face en nuestra web. Los iconos vectoriales tienen varias ventajas:
Aquí está el manual de CSS3 en español para que podáis descargarlo y compartirlo totalmente gratis. Se trata de una modificación de mi curso de CSS3 en Cristalab. No solo cambia el formato (PDF) sino también el contenido, donde se han añadido nuevas reseñas y capítulos.
Leer entrada completa
Cómo anunciaba en la anterior entrada, el pasado día 13 de junio ofrecí un seminario gratuito de Less.js y responsive design. Espero que las tres horas que dedicamos a profundizar en estos temas fueran del agrado de los asistentes y que se lo pasasen igual de bien que yo. Desde luego con gente tan increíble se hace muy sencillo explicar cualquier cosa. Gracias a todos los que asististeis.
Con todos ellos como con todos los que no pudieron asistir me gustaría compartir la presentación – explicación – tutorial sobre Less.js. Si no me equivoco es el único tutorial completo de Less.js en español. En cuanto al tema de responsive, y ya que lo abordamos exclusivamente desde un caso práctico no puedo ofreceros material propio, pero si la recomendación de seguir a un auténtico maestro, Leonidas Esteban, que en su canal de youtube guarda unos más que completos tutoriales de diseño sensible.
.
Este tutorial muestra cómo usar la API de geolocalización combinada con la API de Google Maps para mostrar nuestra posición actual sobre un mapa con HTML5.
Nivel: Medio
Sin entrar en si forma parte o no de HTML5, podemos definir la geolocalización como una nueva API Javascript que nos permite conocer de forma fácil nuestras coordenadas desde un navegador.
Esta API destaca por lo fácil que es usarla. Por ejemplo:
Código :
<script>
function localizame() {
navigator.geolocation.getCurrentPosition(coordenadas);
}
function coordenadas(){
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
}
</script>
Con este código tan simple tenemos almacenados en las variables latitud y longitud la latitud y longitud de nuestra posición
Es posible que obtengamos algún tipo de error a la hora de usar esta API. El más común para los usuarios desactualizados (vamos, los que usen IE) es que el navegador no soporte geolocalización. En ese caso controlaremos:
Código :
<script>
function localizame() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(coordenadas);
}else{
alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
}
}
</script>
Existen además otros errores relacionados con los permisos sobre privacidad del usuario, tiempo de espera, etc. Para ello crearemos una función sencilla que muestre un mensaje según el código de error, y la llamamos en la función getCurrentPosition:
Código :
<script>
function localizame() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(coordenadas, errores);
}else{
alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
}
}
function errores(err) {
if (err.code == 0) {
alert("Oops! Algo ha salido mal");
}
if (err.code == 1) {
alert("Oops! No has aceptado compartir tu posición");
}
if (err.code == 2) {
alert("Oops! No se puede obtener la posición actual");
}
if (err.code == 3) {
alert("Oops! Hemos superado el tiempo de espera");
}
}
</script>
Veamos los pasos directamente sobre los comentarios del código:
Código :
<!DOCTYPE html>
<html>
<head>
<title>Localizador</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> /*Usamos JQuery*/
<style>
body{
font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
}
</style>
</head>
<body>
<header>
<h1>Localizador mediante HTML5</h1>
</header>
<section>
<article>
<div id='map_canvas' style='width:100%; height:400px;'></div>/*Esta capa hará de elemento contenedor del mapa*/
</article>
</section>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> /*Cargamos la API de Google Maps*/
<script type="text/javascript">
var map;
var latitud;
var longitud;
$(document).ready(function() {
localizame(); /*Cuando cargue la página, cargamos nuestra posición*/
});
function localizame() {
if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
navigator.geolocation.getCurrentPosition(coordenadas, errores);
}else{
alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
}
}
function coordenadas(position) {
latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
cargarMapa();
}
function errores(err) {
/*Controlamos los posibles errores */
if (err.code == 0) {
alert("Oops! Algo ha salido mal");
}
if (err.code == 1) {
alert("Oops! No has aceptado compartir tu posición");
}
if (err.code == 2) {
alert("Oops! No se puede obtener la posición actual");
}
if (err.code == 3) {
alert("Oops! Hemos superado el tiempo de espera");
}
}
function cargarMapa() {
var latlon = new google.maps.LatLng(latitud,longitud); /* Creamos un punto con nuestras coordenadas */
var myOptions = {
zoom: 17,
center: latlon, /* Definimos la posicion del mapa con el punto */
mapTypeId: google.maps.MapTypeId.ROADMAP
};/*Configuramos una serie de opciones como el zoom del mapa y el tipo.
map = new google.maps.Map($("#map_canvas").get(0), myOptions); /*Creamos el mapa y lo situamos en su capa */
var coorMarcador = new google.maps.LatLng(latitud,longitud); /Un nuevo punto con nuestras coordenadas para el marcador (flecha) */
var marcador = new google.maps.Marker({
/*Creamos un marcador*/
position: coorMarcador, /*Lo situamos en nuestro punto */
map: map, /* Lo vinculamos a nuestro mapa */
title: "Dónde estoy?"
});
}
</script>
</body>
</html>
Pincha aquí para ver el ejemplo completo.
La API de geolocalización no es más que una interfaz que nos entrega los datos de localización que nuestro dispositivo nos puede ofrecer. Esta es la clave: los que el dispositivo ofrece.
Si tu dispositivo es un pc sobremesa, casi seguro que la localización la realizará en base a la geolocalización IP, el más básico de los métodos, que puede incluso dar resultados a cientos de Km. Sin embargo si tenemos un smartphone, las coordenadas podrán responder a una triangulación en base a las redes móviles cercanas. En el mejor de los casos (wow, tengo un iPhone o cualquier otro smartphone Android de gama media / alta) el dispositivo dispondrá de GPS con lo cual la localización será casi perfecta (menos de 20m de exactitud).
Por otro lado el navegador es quien decide qué sistema de localización usar en base a su propia tabla de prioridades.
En resumen:
- Si quiero hacer una aplicación HTML5 para dispositivos móviles que me localize los restaurantes cercanos, la geolocalización es genial.
- Si quiero hacer una página que me corrobore que estoy delante del pc de mi casa, la geolocalización es una mierda.
Continuamos esta mini-guía para afrontar proyectos. Te recomiendo que leas los principios básicos incluidos en el anterior artículo y los tengas en cuenta para las siguientes explicaciones.
Son los proyectos en los que en principio no vas a tener beneficio, por ejemplo los concursos o los típicos proyectos por compromiso con un amigo o familiar. Este tipo de trabajos van en contra del tercer principio y por tanto te recomiendo que los evites a no ser que no tengas nada mejor que hacer. Por un lado los concursos suelen tener unas condiciones abusivas y aún en el caso de ganarlos, pueden salirte caros. Conozco un caso muy descriptivo:
Un concurso de creación de logotipo. Premio 500?. El ganador no leyó la letra pequeña de las bases que indicaban que el premiado, además de ceder todos sus derechos sobre el logo, debía realizar el manual de identidad corporativa, diversas piezas publicitarias y el diseño de la web.
En el caso de los compromisos lo típico es encontrarse primero en un ambiente distendido. Pero los “cuando tu puedas” y “cómo tu quieras” que se dan al principio se van tornando en exigencias cuanto más tiempo pasa.
Cómo afrontarlo: Si te ves obligado a realizar uno de estos proyectos, trata de realizarlo en el menor plazo posible, pero jamás por delante de otros proyectos.
Es diferente al proyecto gratuito. Aunque no lo haces por dinero, recibirás otros beneficios como promoción, visitas a tu web, reconocimiento, portfolio y el resultado será un escaparate de tus habilidades.
Cómo afrontarlos: Aquí prima el principio 2. El beneficio que obtendrás depende directamente de la calidad. Debes emprender estos proyectos exclusivamente en tu tiempo libre.
Son los que requieren poco esfuerzo. Son fáciles y suelen ser breves.
Cómo afrontarlo: Deben ocupar los primeros puestos en nuestro esquema de tiempo ya que al ser más cortos tienen menos margen. Es indispensable aplicar el principio de calidad por sencillo o corto que sea un proyecto. Al principio la mayoría de tus proyectos serán de este tipo y debes cuidar los detalles.
No es un proyecto habitual. Aunque sólo eres diseñador de cualquier tipo, acuden a ti para que realices labores de diseño y de mil campos más que no dominas. Suelen ser proyectos importantes, bien pagados aunque de plazos ajustados.
Cómo afrontarlo: Es imposible saber de todo en profundidad. Cuando te encuentres con un proyecto de este tipo debes pensar si cumples los siguientes factores:
Si no los cumples, rechaza el proyecto. Olvídate de ideas como “no he programado nunca en Python, pero seguro que aprendo en una semana“. Puede que lo consigas pero no tendrás experiencia, por lo que no eres un profesional, no lo vas a hacer bien y habrás perdido tiempo de proyecto. Si un cliente quiere que hagas un proyecto importante, también lo puede querer otro.
Si cumples estos tres factores te encuentras en la situación perfecta para aceptar el trabajo. Subcontrata los profesionales necesarios y dirígelos. Hazlos partícipes de tus principios. Recuerda asegurarte un ingreso dinero mediante pagos fraccionados o por módulos y aún así recuerda conservar el colchón económico para imprevistos. Estos proyectos necesitan mucho tiempo y dedicación pero no debes descuidar trabajos más pequeños. Piensa que si cae el “mega proyecto”, deben quedarte otros trabajos.
Para terminar
Es importante que no olvides hacer un buen trabajo y sobre todo divertirte mientras lo haces. No abarques más proyectos de los que puedas y evitarás quedar mal con tus clientes. Confía en tus habilidades y entrénalas.
Para convertirte en un buen profesional no basta sólo con ser bueno diseñando: tienes que saber gestionar tu tiempo y tus medios. Existen diferentes tipos de proyectos y cada uno se debe afrontar de forma diferente. Aparte de las cláusulas que se puedan incluir en cada contrato, tomas una actitud con cada tipo. El siguiente texto está basado en mis propias experiencias, en los aciertos, fallos y el ensayo y error de este servidor. Empecemos por el principio, o mejor dicho, los principios.
Los principios básicos son objetivos que debes cubrir en todo proyecto que realices. Numerados para referencias, sin ningún orden en particular:
Ahora que conocemos los principios, es hora de ver los tipos de proyectos y la forma en la que tienes que actuar ante cada uno.
Es ese proyecto que parece que va a llegar, pero que nunca llega o nunca se acaba. Es una completa pérdida de tiempo y energías.
Cómo afrontarlo: No hay forma de saber si un proyecto va a convertirse fantasma, así que cobra siempre una parte inicial. La excepción es que sea un cliente de mucha confianza.
Pocas veces verás uno de estos. Son proyectos en los que tienes más tiempo del que necesitas. No creo que un cliente te de un plazo largo porque entienda que estás estresado. Lo hará porque no tiene mucho interés o bien falta algún punto importante, como por ejemplo, dinero para llevarlo a cabo.
Cómo afrontarlo: Pide una parte del dinero por adelantado para (por curioso que suene) implicar al cliente. Procura presionar para que el cliente quiera avanzar y aplícate a ti mismo un plazo razonable. No empieces a procrastinar.
Si tus esfuerzos por convertirlo en un proyecto de plazos razonables no funcionan, te aconsejo que lo evites: puede ser un proyecto fantasma.
Los más habituales. Son esos proyectos catalogados como urgentes para los que te dan muy poco tiempo para realizar un trabajo.
Cómo afrontarlo: Si no puedes cumplir con los principios 1 y 2, recházalos. Ten presente el principio del valor del trabajo.
Si tienes la mitad del tiempo para hacer un trabajo, su beneficio debería subir al doble. Si esto no se cumple deberías rechazarlo.
Si aceptas el proyecto incluso en contra del principio de beneficio valora si realmente es urgente para elegir sus prioridad frente a otros.
Si además está bien pagado, mándamelo 
.
Ahora en serio. Son aquellos en los que tienes un plazo realista para que realices tu trabajo. Menos comunes que los de plazo corto.
Cómo afrontarlo: Los clientes que dan plazos realistas entienden de que hablan, saben lo que quieren y son buenos clientes. Debes buscar un buen lugar en tu timming para ellos y ajustar el precio del trabajo. Estos sacrificios repercuten en la posterior relación con el cliente.
En el siguiente artículo veremos otros tipos diferentes de proyectos y cómo afrontarlos.
Los colores evocan sensaciones y transmiten mensajes. Si queremos realizar diseños eficientes es fundamental que aprendamos a combinarlos y sobre todo, conozcamos la psicología que se esconde tras ellos.
Los colores pueden tener varios significados dependiendo del contexto del mensaje y del contexto cultural. A continuación te mostraré los colores fundamentales y algunos de sus significados. Verás algunos obvios y abstractos. Todos los significados han sido contrastados en varias fuentes, de las que destacaría el libro de Eva Heller, Psicología del color.
[blockquote align="right"]Los colores pueden tener varios significados dependiendo del contexto del mensaje y del contexto cultural[/blockquote]El color azul es el color del cielo y por eso evoca inmensidad y divinidad. De igual manera pensamos que el agua es azul (aunque no lo sea) por lo que pensamos que es un color frío y transparente, y cuanto más azul, más profundo. Estas relaciones psicológicas con lo enorme, profundo y lo lejano llevan a entender el azul como un color de fidelidad (que se pone a prueba con la lejanía) y de lo fantástico (ideas alejadas de la realidad).
El rojo es el color más cálido y más apasionado. A veces es contradictorio y pesa mucho el contexto en el que se exprese. El rojo es el color del fuego y la sangre. Simboliza la vida ya que es el color de la sangre. Se relaciona con el amor y la pasión por su calidez y su fuerza, pero también con el odio y la violencia. En los países orientales se relaciona con la suerte y no tiene connotaciones negativas como en occidente. Visualmente ocupa las posiciones más cercanas.
El naranja es un color cálido que refleja el optimismo, la diversión y el dinamismo. Es opuesto al azul, por lo que en vez de espiritualidad e inmensidad hay un enorme letrero de “a vivir que son dos días”. Es el color del sabor por su presencia en muchos alimentos. Es muy llamativo por lo que se relaciona con advertencia e incluso peligro cuanto más componente amarillo posee. Cuando se oscurece, el amarillo da sensación de vejez, de otoño. En la india el amarillo se considera una tonalidad del naranja y no al revés como en occidente.
El amarillo es un color más cálido que el verde, pero menos que el rojo. E un color optimista, divertido y que invita a la actividad. Podríamos decir que es el color del sol y que con el sol todos nos animamos y empezamos a hacer cosas. Nos indica peligro (los animales más venenosos suelen tener colores amarillos), es ácido como el limón y cuanto más verdoso sea ira y enfado (bilis). Es también el color del oro y puede evocar tanto dinero como avaricia. En china el amarillo es el color de la nobleza.
El verde es un color neutral. Se relaciona con la naturaleza por ser el tono predominante en las plantas. Por supuesto de las plantas sanas y jóvenes, aquellas que no están marchitas. Por eso también simboliza salud, vitalidad, frescura e incluso fertilidad. Como se relaciona con la primavera y todo la vida que comienza en ella, es también el color de la esperanza y de aquello que está entrando en la juventud y es aún inmaduro. Pero el verde es también un color venenoso y extraño, alienígena. Para las culturas islámicas ya que es el color relacionado con Mahoma.
[blockquote align="left"]Los colores evocan sensaciones y transmiten mensajes. Si queremos realizar diseños eficientes hay que conocerlos[/blockquote]El violeta o púrpura es un color místico usando entre otros en vestimentas y utensilios cristianos. Tiene acepciones de penitencia y sobriedad en sus tonos oscuros. Es un tanto extravagante y mágico. Une tanto lo espiritual con lo sensual, como el amor y la abstinencia… es un color contradictorio. Evoca cierta sensación de originalidad y poca naturalidad, por lo que tiene tendencia a relacionarse con lo tecnológico.
Considerado muchas veces como un rojo suavizado, descafeinado. Es el color de lo delicado, y por tanto encantador y cortés. En ocasiones cursi. Evoca la piel, por ello el desnudo y por tanto el erotismo. Los tonos suaves son infantiles y pequeños. Se considera en ocasiones femenino y débil en relación a la menor fuerza física de la mujer, aunque en sus tonos intensos resulta chocante e incluso agresivo, aunque sin llegar al nivel del rojo.
El no color. Es elegante y fuerte. El negro simboliza la noche y lo más profundo del universo. Por tanto es el final de las cosas, la muerte y con ella el luto y el dolor. Se puede considerar malo o sucio, tenebroso y terrorífico. Es la ausencia de color que nos atemoriza, pero aquello que nos da miedo también nos provoca curiosidad. Destaca sobre los otros colores y sirve como delimitador de las figuras. Es un color que renuncia a los ornamentos. Pese a todas las connotaciones negativas descritas, el negro cambia su sentido dependiendo del color que lo acompañe. Es sencillo y funcional lo que lo hace el favorito de los diseñadores.
El blanco es inocente y bueno. Pacífico. El blanco es el color de la luz. Es minimalista al igual que el negro ya que los colores son meras herramientas estéticas. El blanco simboliza la nada ya que cualquier elemento sobre blanco destaca. Aquello que está blanco está limpio y es aséptico. Da sensación de amplitud y es cómodo y acogedor.
