No todo tiene que ser malo en la vida de un diseñador freelance, y los que nos dedicamos a dignificar día a día ésta profesión lo sabemos, pues como independientes podemos darnos ciertos gustos que otros no, y la lista siguiente viene a ser el antónimo de los problemas de todo diseñador, para decirnos que no todo es malo…
Un error básico y que al parecer es muy recurrente al escribir un artículo en WordPress, es que queramos llamar un shortcode, pero no para ejecutarlo, sino que para ejemplificar que es lo que sucedería si tal codigo es escrito. Y bueno, escribiendo el artículo anterior descubrí que <code>[shortcode]</code> no es suficiente para impedir que sea interpretado, y porqué? se preguntará usted, bueno, en Ayudawordpress.com nos dicen que:
Algo que se me hacía necesario mientras escribía algún post, era poder seleccionar desde el editor mismo de WordPress el tipo de bloque de texto el cual estaba escribiendo. Ejemplo, escribir un h3, h4 o un código preformateado. El asunto es que necesitaba la opcion “codigo” o <code></code> para resaltar textos.
El siguiente código muestra como poder agregar distintos estilos para los bloques de texto de manera personalizada y muy fácil sólo editando nuestro archivo functions.php
function tiny_mce_agregar_opciones( $initArray ) {
$initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
return $initArray;
}
add_filter('tiny_mce_before_init', 'tiny_mce_agregar_opciones');
El resultado del código anterior se puede ver en la siguiente imagen, donde a la izquierda se ve el combobox con las opciones por defecto de WP, y la izquierda se ven las que hemos activado en la línea
$initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
que fueron el párrafo, dirección, texto preformateado, código (que era el que quería), y además desactive los H1 y H2, que corresponden al titulo del sitio y al título del post, para solo dejar activos los h3 a h6 y así no tener problemas de posicionamiento.
Para una completa guía de los controles que se pueden agregar o quitar, se puede visitar esta url que corresponde al Wiki del TinyMCE.
También podemos bloquear algunos botones y controles usando la opción theme_advanced_disable eligiendo, desde la misma lista anterior el control que se desea bloquear.
Las tecnologías web estás en constante cambio, y cada día está saliendo algo nuevo que posiblemente sea la revolución en el futuro, por lo cual todo desarrollador web tiene que estar siempre atento a estas nuevas tecnologías y a su modo de uso.
Hoy vamos a ver 5 nuevas técnicas que han aparecido con la introducción de CSS3 y HTML5, de manera que podamos estar a la moda.
Con la web 2.0 y la aparición de los smartphones, tablets y las resoluciones en FullHD, se hace imperioso que nuestros diseños y desarrollos web sean flexibles y se adapten a las distintas resoluciones de cada uno de estos dispositivos para que el usuario pueda recibir de buena manera nuestra información. Es así como gracias a CSS3 podemos especificar distintas hojas de estilos para las distintas resoluciones y dispositivos que tengamos.
Por ejemplo, podríamos especificar un ancho para cuando la resolución del usuario es menor a 1024px.
@media screen and (max-width:1024px){
#contenedor{
width:960px;
}
header h1#logo {
width:300px;
height:50px;
background:url(fondno-header-chico.jpg) no-repeat 0 0;
}
}
}
CSS3 sigue introduciendo nuevas tecnologías, y ahora ha creado una nueva unidad de medida que nos permite definir tamaños para las fuentes en relación al elemento de origen (rem = “r”oot “em”) y no al elemento padre como lo hace em.
html { font-size: 10px; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
HTML5 introduce una nueva característica, el Offline Caching, o guardar las páginas en el caché, y para qué? se preguntará usted, bueno, para permitirle al navegador del usuario guardar la página para así poder verlas más tarde incluso si se está desconectado de internet.
Para activar esta nueva característica hay que partir agregando la siguiente línea a su archivo .htaccess
AddType text/cache-manifest .manifest
Una vez listo, tenemos que crear un archivo llamado, por ejemplo, offline.manifest con las siguientes líneas:
CACHE MANIFEST CACHE index.html style.css image.jpg
Y finalmente linkear al archivo offline.manifest desde el archivo html
<html manifest="/offline.manifest">
Con estos pasos ya hemos activado ésta característica, la cual estará disponible si tu navegador, o el del usuario que visita tu sitio, soporta HTML5.
A diferencia del pasado, CSS3 nos permite aplicar múltiples fondos a un objeto determinado, de manera que se pueden obtener efectos visuales/gráficos que de otra manera podría resultar muy complicado de realizar.
div.prueba { background: url(imagen1.png), url(imagen2.png), url(imagen3.png) #000; }
CSS3 simplifica muchas cosas que hasta ahora solo era posible realizarlas con javascript frameworks como jQuery, como por ejemplo animaciones de color, de forma o posición de los objetos. Ahora, con la ayuda de CSS3 es posible realizar animaciones y transiciones de manera fácil y rápida.
Por ejemplo, para realizar un cambio de color suave para todos los enlaces con la clase prueba, el código sería algo más o menos así:
<a href="#" alt="Prueba" class="prueba">Enlace de prueba</a>
a.prueba {
color:#AAA;
-moz-transition-property: color;/* FF4+ */
-moz-transition-duration:1s;
-webkit-transition-property: color;/* Saf3.2+, Chrome */
-webkit-transition-duration:1s;
-o-transition-property: color;/* Opera 10.5+ */
-o-transition-duration:1s;
-ms-transition-property: color;/* IE10? */
-ms-transition-duration:1s;
transition-property: color;/* Standard */
transition-duration:1s;
}
a.prueba:hover {
color:#F00;
}
Los problemas para el diseñador nunca faltan, y la verdad es que luego de mi encuentro cercano con la muerte digital he buscado y encontrado una lista con los 10 problemas que todo diseñador ha de enfrentar en su vida…
Para los que inician el camino es típico cometer errores al momento de diseñar o maquetear una web, ya sea porque se usaron muchas imágenes, porque usaste tablas, o porque seguiste alguno de estos consejos. De todo lo que se pueda leer por ahí o de lo que te puedan decir existe un 50% de verdad y otro de mito, y aquí despejamos los 5 mitos del diseño web:
Puede ser que usar imágenes sea lo mejor para dejar clara una idea y hacer que el sitio sea más vistoso, pero la verdad de las cosas es que el abuso de gráficos puede ser perjudicial para el desempeño del sitio web en cuestión, haciendo que sea lento al cargar y que en ese intertanto el usuario se aburra y deje nuestro sitio.
Se dice que no hay que utilizar tablas para estructurar y maquetear un sitio, y es totalmente cierto pues para eso se inventó el CSS, para dar forma y colorear el HTML, pero también es cierto que las tablas fueron creadas para organizar la información de manera clara y ordenada, entonces, el único uso actual permitido para las tablas es para desplegar información importante dentro del sitio web y no para estructurar el mismo.
A veces se cree que llevar a cabo un sitio web es solo tener un poco de información, ordenarla de alguna forma y lograr meter esa información en un documento HTML, lo cual es una visión muy cerrada y básica sobre lo que significa un sitio web y la importancia del mismo, lo cual lo único que hace es mirar en menos el trabajo de diseñadores, maqueteadores, programadores y porque no de SEOs, que se esfuerzan por optimizar un sitio web al máximo, exprimiendo sus cerebros para lograr un sitio web exitoso, rápido, amigable, claro, fácil de entender, y un sin fin de etc’s… El asunto es que hay mucho trabajo y estudio tras un sitio web, vamos… sino pregunte cuanto tiempo ha tardado en ver la luz cerocreativo.cl…
Aquí volvemos a los puntos 1 y 3, y no es que el contenido sea lo más importante en lo que se refiere a texto, pues si lo vemos desde un punto de vista claramente puede ser el texto lo más importante, pero hablamos de un sitio web que tiene que ser amigable y que no canse al lector/visitante, con los cual nos vemos enfrentados a encontrar ese delicado equilibrio entre mostrar buenas pero pocas imágenes y a mostrar bastante pero no aburrido texto. Aquí es donde las neuronas del diseñador trabajan a mil para poder diagramar todo de la mejor manera, para así obtener un sitio atractivo al visitante.
Desde mi punto de vista, creo que un diseñador debe estar metido en el 100% del desarrollo del sitio, así como también el programador, pues será él quien dará vida a lo que la abstracta mente del diseñador invente, y será el diseñador quien tiene la visión global de como se deberá comportar el sitio; todo nos lleva a tener un gran trabajo en equipo. Aunque también es verdad que hay bastantes herramientas online, software para diseñar y programar, sitios de venta de templates, sitios de pirateo de templates y cuanta cosa exista para hacernos la vida fácil al diseñador y programador, de manera que le permite a cada uno prescindir del otro con el consiguiente efecto de tener que meter las manos en un terreno inexplorado, pero que ayuda a conocer nuevas cosas y estar en un constante aprendizaje.
Una adaptación a como lo ví en basekit
La verdad es que el método .serialize() de jQuery es un salvavidas a la hora de procesar los datos que son introducidos en un formulario, el cual devuelve una cadena de texto preformateada lista para ser trabajada por algún sistema que preparemos para lo que queramos.
La idea de utilizar serialize es para ahorrarnos el trabajo de extraer los 50 o más valores que tengan 50 o más campos de texto que hayamos hecho para enviar mediante el parámetro data en ajax… pero……… la idea es hacerlo bien, y no pasarse una hora intentando encontrar el error del javascript, cuando solo faltaba escribir el atributo name a cada input…
Leyendo por aquí y por allá, me encuentro este “tutorial” que describe los principios básicos para lograr que tus clientes amen, adoren y se vuelvan locos con tus diseños.
La verdad es que el artículo cala profundo en la cruda realidad que se vive al momento de someter un diseño de una interfaz al escrutinio del cliente, donde se vé como tu trabajo de horas, días y, muchas veces semanas se va a la basura cuando al cliente se le ocurre la gran idea… “pero cambiemos el color de fondo del sitio!”
El asunto no es justificar lo mal diseñador que se es, sino que siendo bueno, hay cosas que el cliente tiene que saber, y no se trata de manipular, sino de hacer entender el porque de cada cosa. Porque detrás o más bien dentro de cada uno hay años de historia, experiencia y estudios sobre la teoría del color, semiótica, estética formal, percepción, y un sin número de horas navegadas en internet viendo cuanto sitio web se atravesó por tus ojos, y quierámoslo o no, el ojo se afina a tal punto, que se pueden ver detalles que los demás no ven… entonces, cuando el cliente te pregunta, “de 1 a 100 ¿que tan creativo eres?” o “¿pero tu eres creativo de nacimiento?” no queda más que agachar la cabeza y pedirle a el pulento “¿por qué no te los llevas!?”, pués uno habla por una razón justificada (o centrada, o alineada a la izquierda, o como quiera), aunque si lo que uno dice no sirve, aquí van algunos principios que se pueden seguir para convencer “convincentemente”…
La diferencia principal entre un buen diseñador y un excelente diseñador no está en lo bueno o lindo de tus diseños, sino en saber vender tu obra, de manera que el cliente quede alucinado por la historia que le creas a tu trabajo más que por el trabajo mismo, porque querámoslo o no, el cliente no tiene idea de lo que diseño se trata, y todo se va a resumir en un “no me gusta” o si tienes suerte en un… “ok, sigamos”.
Es verdad que si no se tiene talento artístico no se puede ser un gran diseñador, pero el asunto es que frente a un cliente no se puede sacar al artista que tienes dentro, ya que si justificas algo como “creo que el degradado se ve bien de arriba a abajo con el color clarito arriba” seguramente tu cliente dirá, “no, cámbialo y déjalo con el color oscuro arriba, así me gusta a mí”. La solución es darle la vuelta, y decir algo como “el degradado tiene que ser con el color claro arriba, pues si ponemos el color oscuro arriba, el peso visual será insostenible, y no servirá para destacar lo que queremos”. Héchale una mirada a tus libros sobre configuración espacial, que para algo los tienes.
Cuando hables con tu cliente no te apartes del proyecto, sino que habla de “nosotros” necesitamos que el sitio sea funcional para tal o cual efecto, de ésta manera cliente y tu estarán formando parte del mismo equipo. Házle saber que estas comprometido con su proyecto.
Seguramente más de alguna vez tuviste que morderte la lengua y sujetar tus manos para no pegarle un maguachi a tu cliente diciéndole “esto ya lo habiamos conversado!!!” Bueno, el asunto aquí es que debes hacerlo, y por el contrario, soltar un amable “claro, su desición es totalmente válida e incluso el degradado visualmente queda mejor” pero debes agregar “pero será tan efectivo para cumplir el objetivo que requerimos?” y luego terminas con “pues el diseño que he realizado cumple a cabalidad con los estándares y sigue estrictas técnicas para lograr el exito”. Así tu cliente no podrá decirte que no, pues tomaste en cuenta su apreciación, pero le cuestionaste algo que no puede justificar.
En más de algún momento no se podrá conseguir la aprobación del cliente, quizás por no ser lo suficientemente bueno en los puntos 2 y 4, o talvez porque tu cliente tampoco puede decir, porque quizás incluya a un nivel superior en su empresa. Es aquí donde se debe detectar ésta situación y para no perder valioso tiempo de diseño, debes soltar un “ésta no es una desicion de diseño, sino una desicion politico-estratégica, yo no lo puedo ayudar, por lo cual usted deberá pasar un tiempo averiguando que hacer” Con lo cual tu cliente no querrá perder tiempo, y sorprendentemente pedirá tu consejo sobre como se puede proceder. En teoría debería funcionar así…
La mayoría de las veces, cuando te encuentres por primera vez con un cliente, la conversación comenzará por:
“Nuestro sistema de registro es complicado y la gente se pierde”
“La home del sitio es un desastre, tenemos que rediseñarla”
“Nuestro sitio parece un ppt puesto en la web, no nos gusta!”
Problemas que todo diseñador está preparado para enfrentar, pero siempre hay que saber el tipo de cliente que trajo el problema, de manera que identificándolo se puede buscar la solución precisa para cada uno. Dentro de esto, existen por lo menos 4 tipos de clientes problemáticos listados a continuación:
El Político: Este tipo de cliente normalmente es el que trabaja para una gran organización, y seguramente no le importa tomar la mejor desición sino la que mejor se ajuste a su propia carrera, de manera que no querrá hacer nada que se salga de las reglas, y así no lo culpen a él si algo sale mal, por lo cual pedirá pruebas de usabilidad, accesibilidad, que todo esté hecho según los estándares, etc, etc. Para satisfacer a éste cliente, lo que se debe hacer es venderle el diseño en base a la experiencia de otras empresas similares a su rubro, de manera que él vea que otras empresas lo han hecho y han tenido exito.
El que tiene información privilegiada: Es aquel que trabajó en alguna agencia dedicada y sabe como funcionan las cosas, de manera que va a venir a ganador exigiendo todo aquello que sabe; algo así como para pillarte si sabes o no de lo que hablas, pues el mismo se está jugando su reputación en su empresa. La mejor manera de ganárselo es dejar que se destaque por sobre sus colegas, haciendo referencia a lo que el conoce de manera que sienta que aún es parte de la indsutria y no se le pasó la vieja.
El vendedor de autos: es normalmente un cliente que no tiene idea de diseño y tiene un pésimo sentido estético. Es el enemigo número 1 de los espacios en blanco, pues considera que es espacio perdido y lo único que le importa es tener un sitio lleno de banners publicitarios o de alguna cosa que leyó que le podría aumentar las ventas. Para ganárselos hay que ser uno de ellos, de manera que hay que meterle carbón y decirle que el diseño está optimizado para generar ventas, para que los usuarios que visiten su sitio gatillen una desicion de compra, etc, etc. eso les dejará al borde el éxtasis.
El empresario: muchas veces el más complicado de todos, no porque el cliente en sí sea complicado, sino porque es el fundador de la empresa o representa un cargo importante en una gran empresa, por lo cual hay mucho en juego. Lo que hay que hacer para ganárse a estos clientes es sacar lo mejor de uno y explicar como el diseño va a ser capaz de lograr lo que ellos esperan y hacerle ver cosas que el aún no ve de manera que el se sienta sorprendido y a la vez confiado en el nivel de profesional que tiene en frente.
La cosa no es engañar al cliente con todas estas técnicas, sino que servirán para poder defender tu preciado trabajo, el cual debes realizar haciendo uso de todas tus habilidades artísticas y creativas, para que aún teniendo un gran diseño puedas explicar tus desiciones gráficas y las puedas justificar y rebatir con fundamentos, porque decir “se ve mejor” no es un fundamento en ninguna parte del mundo, ni siquiera en el ambiente “diseñístico”.
Saludos!
PD: ésta ha sido un resumen/traducción/adaptación de un artículo que leí en Black&White.
Cuando uno comienza en el diseño web, lo que más puede molestar al desarrollador o al maqueteador, es que al momento de abrir nuestro archivo .psd encuentre un laberinto de capas y capas enlazadas o capas que corresponden al header ubicadas en el footer del sitio, etc. Para esto debemos intentar organizar nuestra forma de trabajar, de manera que se nos haga entendible a nosotros mismos y al que se pueda enfrentar por primera vez a nuestro archivo.
Photoshopetiquette.com es un sitio web que nos muestra de manera entretenida y dinámica distintos tips relacionados a todo el proceso de diseño de una nueva interfase web, donde abordan los siguientes temas:
Definitivamente un muy buen sitio web, donde nos dan consejos que nunca está de más leer y poner en práctica.
Internet Explorer es realmente un mundo aparte, y cuando se trata de maquetear un sitio no podemos dejar de pensar en aquellos usuarios que aún usan este navegador, pues si usamos transparencias o distintos efectos especiales en nuestras hojas de estilos IE no lo interpreta bien, y normalmente se suceden errores, en los cuales el sitio web se desarma.
Para solucionar estos problemas, la solución consiste en agregar al html unas líneas de codigo condicionales, que permiten indicarle al navegador según su version, que muestre la hoja de estilos definida.
Este es el codigo que permite identificar Internet Explorer 6, 7 y 8.
<!--[if IE 6]> <link type="text/css" rel="stylesheet" href="css/estilosie6.css"> <![endif]--> <!--[if IE 7]> <link type="text/css" rel="stylesheet" href="css/estilosie7.css"> <![endif]--> <!--[if IE 8]> <link type="text/css" rel="stylesheet" href="css/estilosie8.css"> <![endif]-->
