Si tratas con FLASH seguro que alguna vez te has topado con esta “característica”. Si no usas archivos externos no hay ningún problema, pero si haces uso de archivos de configuración externos en formato txt, carga de imágenes externas, te habrás dado cuenta de que no importa donde hayas puesto tu SWF en el arbol de directorios, la ruta relativa a esos archivos externos siempre se hace desde el HTML donde se carga.

Por ejemplo tienes un SFW visor.swf y una imagen arbol.jpg que están dentro de la carpeta MULTIMEDIA colgando de la raiz que es donde está tu index.html.

Al editar el flash lo lígico es que pongas que la ruta de la imagen sea “arbol.jpg“, ya que está en la misma carpeta que la imagen, y si abrimos el SWF a pelo comprobarás que la carga correctamente. El problema viene cuando cargamos el SWF en el index.html, cosa bastante normal. El flash por defecto tomará la ruta actual de carga, no donde se encuentra el archivo SWF realmente, con lo que buscará en este caso en el raiz el archivo arbol.jpg y no lo encontrará.

Una solución es que si sabemos que el flash se va a cargar en el index.html que está en raiz, cambiar la ruta de carga del flash a “multimedia/arbol.jpg” y funcionará. Para sitios sencillos esto funciona bien, pero ¿que pasa cuando queremos cargar ese flash en otro HTML que no está en raiz?, no funcionará, y por lo tanto no podemos usar el mismo SWF para 2 lugares (o 3, 7, 200) siendo que el visor es el mismo. También surgen problemas cuando usamos gestores de contenido con URL dinamicas, tipo permalinks, etc, donde una dirección como www.nerv.es/blog/titulo-del-articulo dará error al cargar el visor ya que el flash se cree que está en una estructura de directorios “/blog/titulo-del-articulo” que no existe físicamente.

La mejor solución es usar un atributo que no es muy conocido llamado base.

Si en el código de carga del flash usamos:

<param name=”base” value=”.”>

para <object> y para <embed>:

base=”.”

No importa desde donde se cargue el archivo SWF que la ruta base para él será donde esté ubicado realmente dentro del arbol de directorios. Con esto conseguimos que funciones siempre sin importar desde donde ser carge. ( dentro del mismo dominio al menos )

Trabajar con CSS puede parecer una batalla constante. Los navegadores siempre están cambiando la manera en que leen el código (*cof* Internet Explorer *cof*), y parece que hay un montón de pequeñas “pillerías” en CSS. Aunque es un lenguaje increíblemente poderoso, puede ser utilizado de forma incorrecta con facilidad, lo cual condenará tu desarrollo a una vida de imperfecciones.

1) Ignorar la Compatibilidad con el Navegador

Este es, probablemente, el problema número uno en desarrollo web, ya que debes tener layouts que se vean siempre igual, sin importar qué navegador esté utilizando el visitante al navegar el sitio. Este hecho a veces puede parecer la maldición de tu existencia: hay diferencias fundamentales en la manera en que Internet Explorer renderea una página, comparado con Firefox. Aunque ya no es tan grave como solía ser, todavía existe una gran diferencia entre navegadores.

Es fácil para los desarrolladores web diseñar la página en su navegador favorito y no preocuparse acerca de cómo se ve en otros navegadores de uso frecuente, ya que probablemente no se verán las diferencias. (Y soy un gran culpable de esto. ¡A veces diseño el sitio en Firefox y me olvido de revisarlo en IE hasta después de haberlo terminado!). Aunque hay algunos métodos ya probados para ayudar a salvaguardar tus diseños para el rendereo de diferentes navegadores, la mejor manera de asegurarse de que todo se ve constante es simplemente utilizar Browsershots. Browsershots entrega una instantánea acertada de cómo se ve tu sitio en diferentes plataformas y navegadores, permitiéndote estar seguro de que nada se ve distorsionado en un navegador.

2) No tomar en cuenta las resoluciones de navegador más pequeñas

Mientras que varios de nosotros, los diseñadores web, tenemos monitores de computador grandes (y estamos bastante orgullosos de ello), una gran parte de los visitantes de tu sitio puede que no. Puedes utilizar tus programas de análisis para ver las resoluciones de navegación de tus visitantes y qué tan amplio es su rango (Google Analytics hace esto de maravilla). Sin embargo, hay un mundo de diferencia en la manera en que un diseño se ve en una resolución de 1024×768 en oposición a una resolución de 800×600. Puede convertir un hermoso diseño en algo casi inútil.

Leer más…

Autor el artículo en inglés: Taylor Davidson de unstructuredventures.com

Comencé a escribir acerca de las claves del éxito para empresarios y principiantes, pero mientras escribía me di cuenta que mientras he visto fracasar compañías, hundirse proyectos y morir ideas, he tenido poca experiencia de primera mano con el éxito. Mis ideas sobre las claves del éxito se quedan sólo en eso: ideas.

Pero he aprendido mucho a través del fracaso. La observación cercana y experiencias personales desafortunadas de primera mano me han enseñado varias lecciones acerca de por qué las compañías fracasan.

Seamos claros: esto intenta ser un ensayo de las 25 lecciones más importantes que he aprendido a través del fracaso, no un análisis exhaustivo de todas las razones por las cuales los empresarios y principiantes fracasan (y créanme, esta es la versión corta: he aprendido más de 25).

Los primeros dieciséis principalmente se refieren a asuntos estratégicos y operacionales mientras que los últimos nueve tienen más que ver con asuntos de gestión y organización. Debido a que creo que los tres factores más importantes para cualquier compañía son las personas, productos y mercado, no estoy seguro de haber llegado a la cantidad “apropiada” de maneras de fallar, pero quizás ustedes tendrán ideas que dejarán esta cantidad más exacta. Estoy esperando a escuchar los secretos que ustedes han aprendido a través del fracaso.

1. Vacila, vacila, vacila; planifica, planifica, planifica.
En vez de eso: Fracasa rápido. Dispara, apunta, repite.

El tiempo es el bien más valioso que tiene una persona, y aún así es la cosa más fácilmente y comúnmente desperdiciada. La velocidad genera ímpetu y pasión, motivación y una tendencia a la acción. Aprender a través de la experiencia es mucho más valioso que aprender a través de planificar, hacer prototipos o investigar ya que nada es más directo, significativo y visceral que ver cómo funciona (o no) algo.

Leer más…

En un tiempo de crisis económica, los desarrolladores web y freelancers en todas partes han comenzado a comerse las uñas. Sin embargo, no importa qué tanto empeore la economía, siempre habrá trabajo en ciertos campos del desarrollo web que están en pleno auge.

Como moderador del foro de trabajo de Freelance Switch, hay ciertos tipos de trabajos que están constantemente en demanda. Aquí están las 10 habilidades que son o serán las más demandadas para los desarrolladores. Si eres competente en estas habilidades, estarás en una gran posición para encontrar trabajo y sobrellevar cualquier caída de la economía.

Autor: Glenn Stansberry
Glen Stansberry es un desarrollador web y blogger. Puedes leer más trucos acerca de desarrollo web en su blog Web Jackalope o seguirlo en Twitter.

1. Conocimientos de un Framework

Parece ser que los frameworks serán la próxima cosa de moda. Con el meteórico ascenso a la fama de Rails, Django, y otros frameworks MVC, los desarrolladores han aprendido que pueden construir sitios web mucho más rápido con la ayuda de estas herramientas. Los frameworks te ayudan a acortar la mayoría de las tareas repetitivas que la programación personalizada normal requeriría. Tener el conocimiento de los mejores frameworks (Rails, Django, CakePHP, Symfony, y otros varios), le puede dar una dimensión completamente nueva a tu conjunto de habilidades.

2. Desarrollo de widgets

Los widgets han cambiado la manera en que se hace el desarrollo web en los últimos años. Con la llegada de los widgets, los datos se han hecho más portátiles, interactivos y, más importantemente, virales. En casi todos los planes de las páginas de inicio web está el incluir uno o dos widgets en algún punto, principalmente porque ayuda a aumentar su audiencia y lleva más miradas hacia su contenido.

El desarrollo de widgets requiere conocimientos de Javascript y/o flash, sin mencionar el conocimiento del lenguaje regular con el cual está construido el sitio principal.

3. Temas de CMS personalizados

Los diseñadores y desarrolladores siempre pueden encontrar trabajo creando o personalizando un tema de CMS. Así como la popularidad de CMS como Wordpress o Drupal ha crecido durante los últimos años, también lo ha hecho la demanda para la creación de temas para estos softwares.

Mucha gente usa CMS para potenciar sus sitios web personales o de negocios, así que este trabajo siempre va a existir. Un sitio web decente necesita un diseño único y utilizable que refleje bien la marca detrás de él.

Leer más…

Vamos con la segunda parte de este recopilatorio de logos con animales como principal temática.

Leer más…

Tanner Chrisensen nos propone estas reglas para crear un logotipo. Voy a comentar algunas tomando como ejemplo el logo de nerv para ver si se ajusta a dichas reglas o no.

1. No utilices más de tres colores.

2. Deshazte de todo lo que no sea absolutamente necesario.

El diseño de este logo tiene pocos elementos superfluos.

3. La tipografía debe ser lo suficientemente sencilla como para que tu abuela la pueda leer.

A falta de un ligero rediseño, la tipografía es suficientemente clara.

4. El logo debe ser reconocible.
5. Crea una forma o layout único para el logo.

La forma es bastante reconocible y peculiar.

6. Ignora completamente lo que tus padres y/o pareja piensan del diseño.
7. Confirma que el logo se vea atractivo para más de tres (3) individuos.
8. No combines elementos de logos populares y luego digas que es trabajo original.
9. No utilices clipart bajo ninguna circunstancia.
10. El logo debe verse bien en blanco y negro.

Prueba superada.

11. Asegúrate de que el logo es reconocible al ser invertido.
12. Asegúrate de que el logo es reconocible al cambiar su tamaño.

Hay que tener un poco de imaginación para reconocerlo invertido, pero el logo ya de por si es poco común. En cuanto a reducir el tamaño, no hay problema.

13. Si el logo contiene un ícono o símbolo, además de texto, ubica a cada uno de manera que se complementen el uno al otro.
14. Evita las tendencias recientes en diseño de logos. En vez de eso, haz que tu logo se vea atemporal.

Se han evitado los gradientes, sombras, reflejos y demás tendencias 2.0.

15. No utilices efectos especiales (incluyendo, pero no limitado a: gradientes, sombras, reflejos, y rayos de luz).

No se usa ninguno de estos elementos en el logo original.

16. Ajusta el logo a un layout cuadrado en lo posible, evita los layouts rebuscados.
17. Evita los detalles intrincados.

El logo tiene unas líneas bastante simples.

18. Considera los diferentes lugares y maneras en que el logo será presentado.
19. Invoca sentimientos atrevidos y confiados, nunca aburridos y débiles.
20. Date cuenta de que no crearás el logo perfecto.
21. Utiliza líneas duras para negocios duros, y líneas suaves para negocios suaves.
22. El logo debe tener alguna conexión con lo que está representando.

Aunque no es reconocible en un primer instante, el logo simboliza una neurona con algunas conexiones, 4 en este caso. Representa la capacidad de razonamiento y el simil con la red de redes.

23. Una foto no hace un logo.
24. Debes sorprender a los consumidores con la presentación.
25. No utilices más de dos fuentes.
26. Cada elemento del logo necesita estar alineado. Izquierda, centro, derecha, arriba o abajo.

27. El logo debe verse sólido, sin elementos colgantes.
28. Entérate de quién va a ver el logo antes de pensar en ideas para ello.
29. Siempre escoge función por sobre innovación.
30. Si el nombre de la marca es memorable, el nombre de la marca debe ser el logo.
31. El logo debe ser reconocible cuando se le aplica efecto espejo.

32. Incluso las grandes compañías necesitan logos pequeños.
33. El diseño del logo le debe gustar a todos, no sólo al negocio que lo va a usar.
34. Crea variaciones. Mientras más variaciones, es más probable que llegues al correcto.
35. El logo debe verse consistente a través de múltiples plataformas.
36. El logo debe ser fácil de describir.
37. No utilices taglines en el logo.
38. Bosqueja ideas usando lápiz y papel antes de trabajar en el computador.
39. Mantén el diseño simple.

Conseguido.

40. No utilices símbolos “swoosh” ni globos terráqueos.
41. El logo no debe distraer.
42. Debe ser honesto en su representación.
43. El logo debe estar balanceado visualmente.
44. Evita los colores neón brillantes y los colores opacos, oscuros.

45. El logo no debe romper ninguna de las reglas ya mencionadas.

(Fuente: artículo de tannersite.com escrito por Tanner Christensen y traducido por Sara Salazar para nerv. )

Selección de logotipos con algún animal como tema principal. En total, 1 conejo, 2 elefantes, 1 mantis, 4 pajaros,  3 perros, 1 caballito de mar,  1 pato, 1 abeja, 2 peces, 1 antilope, 1 oso, 1 pulpo, 1 cerdo, 1 lobo, 1 gallo, 1 hipopotamo, 1 mono y 1 buho.

Leer más…

Mi primer trabajo de diseño fue en una pequeña agencia de diseño de impresión en Manchester que producía el trabajo de varios medios de comunicación: embalaje, publicaciones, marketing de materiales de apoyo y… Correo directo. Pronto descubrí que los principios de diseño gráfico que había aprendido en la universidad eran de poco uso cuando diseñé para el correo directo, donde lo grande, las letras fuertes, y lo apiñado es el orden del día. En palabras de un cliente – palabras que nunca olvidaré – “un espacio en blanco es un espacio vacío”.

Creo que todos hemos tenido que pasar, a manos de jefes o exigencias del cliente, por este momento.

Los clientes del correo directo necesitan sus paquetes para permanecer en el mercado, porque trabajan para ello. Pero para todo lo demás, mi cliente no podría haber estado más lejos de la verdad.

Conocer los espacios en blanco

“Espacio en blanco” o “espacio negativo” es el espacio entre dos elementos en una composición. Más específico, el espacio entre los elementos mayores en una composición es el “macro especio en blanco”. El Micro espacio en blanco es – si, lo has adivinado – el espacio entre elementos más pequeños: entre listas de objetos, entre un título y una imagen, o entre palabras y letras. The itty-bitty stuff.

Figura 1. Macro espacio en blanco

Figura 2. Micro espacio en blanco.

Así que, ¿qué hacer con el espacio en blanco?

Micro espacio en blanco y legibilidad

Hace un par de meses, tuve bastante suerte de ver una conferencia de Erik Spiekermann. Parte de su charla se basaba en su rediseño del periódico The Economist, que en parte fue motivado por el cliente ya que su diseño era demasiado pesado y el contenido demasiado difícil para leer.

En el diseño del periódico, la información es densa. A veces, como en el diseño web, es difícil añadir espacios en blanco debido al contenido requerido. Los periódicos a menudo tratan con esto poniendo su contenido en un tipo de letra de imprenta sencilla con bastante espacio en blanco entre los caracteres. Esto era parte de la solución de Spiekermann para rediseñar The Economist.

Leer más…

Recientemente tuve la increíble experiencia de hacer un pequeño sitio web para un cliente en base a Wordpress, y aprendí muchas cosas acerca de codificar el tema y hacer más fácil la vida de los clientes. Voy a repasar las que, en mi opinión, son las cinco cosas más importantes que aprendí.

Sidebars “Widgetizadas” (Sidebars Dinámicas)

Esto fue lo que más me ayudó. El diseño del sitio necesitaba un área de enlaces en el pie de página para enlazar a otros grupos, departamentos y organizaciones relacionadas con el sitio. También necesitaba información de contacto al pie de página.

La solución fue utilizar barras laterales en base a widgets y luego modificar el código CSS para convertir estas barras laterales en pie de página.

Para agregar una barra lateral, inserta este código en el archivo functions.php de tu tema:

1
2
3
4

<?php
 if ( function_exists('register_sidebar') )
 register_sidebar(1);
?>

Puedes repetir este código para cuantas barras laterales necesites. Sólo tienes que ir cambiando el “1″ por otro número para cada barra.

Ahora inserta este código donde quieres que aparezca tu barra lateral:

1
2
3

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : ?>
<?php endif; ?>

Esto hará que tu barra lateral dinámica aparezca. En mi caso, sólo ajusté el ancho de cada widget y los alineé hacia la izquierda con este código:

1
2
3
4

#footer .widget{
width:290px;
float:right;
}

Al configurar el ancho de los widgets y alinearlos hacia la izquierda en mi pie de página, creé un área de contenido editable que no interfiere con las entradas o la estructura de la página, utilizando widgets y barras laterales dinámicas.

“Loops” Personalizados

En el sitio que estaba haciendo no iba a existir un blog, sino que una sección de noticias y una sección de eventos, así que necesitaba separar las entradas por categorías y realizar una consulta en forma separada:

1
2
3
4
5

<?php
 $news= 'category_name=news&orderby=date&order=DEC&showposts=3';
 query_posts($news); // run the query
 ?>
 

Este fragmento de código crea una nueva consulta llamada news ($news), toma 3 entradas desde la categoría de noticias y las ordena en forma descendente por fecha. Luego, se debe configurar el Loop de forma normal bajo ese código. Mi Loop completo se veía así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<?php
		if ( $news%2 ) {
    		echo "<li class='news_even'>";
			} else {
    		echo "<li class='news_odd'>";
			}
			?>
			<h3 class="smallindent"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
			<p class="posted smallindent"><?php the_time('m-d-y') ?> </p>
			<div class="smallindent"><?php the_excerpt(); ?></div>
		</li>
		<?php $news++ ?>
	<?php endwhile; ?>
	<?php else : ?>	
	</ul>
	<?php endif; ?>

Menús Desplegables

Los clientes querían que el sitio web tuviera un menú despegable. Normalmente me habría opuesto a esta idea, pero ellos tenían bastante contenido que deseaban incluir en el sitio. Después de buscar durante varias horas y probar varios métodos para el menú despegable, encontré esto. Resultó ser el “santo grial” que estaba buscando, compatible con todos los navegadores, y funcionó de inmediato con el marcado generado por la función wp_list_pages.

Simplificar el Panel de Administración

Después de la primera reunión y sesión de entrenamiento, quería encontrar una manera de esconder varias partes del panel de administración que permanecerían sin uso. El asunto era simplificar Wordpress hasta dejarlo en lo más básico: sin etiquetas, sin necesidad de organizar categorías o la biblioteca multimedia. La solución fue wplite. Este ingenioso complemento permite deshabilitar paneles en la pantalla de administración. También, permite limitar los campos de metadatos de las entradas (excepciones, etiquetas de las entradas, orden de páginas, plantillas, nombres para url, etc). Resultó ser lo que estaba buscando para hacer la administración del sitio simple y fácil; incluso puede eliminar el tablero para que la página de inicio sea la escritura de una nueva entrada.

(Fuente: artículo de upsidedowncity.net escrito por Gino y traducido por Sara Salazar para nerv. )

Estás en la mesa con colegas diseñadores, un director de arte y un director creativo. La pantalla muestra diseños hechos por ti para ser criticados colectivamente. Esta es la primera vez que todos vosotros consideraréis los conceptos iniciales. El diseño sigue, uno a uno, y el trabajo comienza a fluir.

Esta es una frase que oirás a menudo: “El diseño está en los detalles“. Con el diseño, prestando atención a los pequeños detalles – y en algunos casos, obsesivamente enfocándote en “lo que no está bien” – puedes conseguir un diseño de “casi” a “eso es” y seguir más allá.
Asisto a las reuniones en las cuales los diseñadores presentan sus diseños – normalmente en la primera ronda – por primera vez. La mitad del tiempo el diseñador que presenta los diseños muestra un producto áspero en la pantalla y piensan que el diseño está hecho al 90-100%. Pero el diseñador experto en los detalles sabe que el trabajo expuesto sólo equivale al 50-70%. Puedes ver el trabajo preliminar, la fusión, y sentir el diseño delante de ti, pero sabes que no está terminado.

El objetivo de unificar los detalles es conseguir pensar críticamente y presentar el mejor diseño posible que puedas hacer – esa es la ronda 1. En esencia, quieres que tu diseño esté listo para una presentación real al cliente. Así que, ¿cómo tener un diseño al 100%? . Algo común entre los diseñadores es sentirse que se ha precipitado: tienes una fecha límite, estás bajo presión. Pero si te preocupas por tu arte y tus ideas, te tomarás tiempo extra, quizás trabajes hasta tarde por las noches, como todos hacemos, y añadas ese toque que sabes que hará a tu trabajo brillar. Sabes que esa forma de pensar se consigue cuando piensas, “Oh, sabía que tenía que haber intentado eso” Hazlo la primera vez que se te pase por la cabeza. No permitas que alguien que revise tu diseño piense en una idea en la que ya habías pensando.

Los consejos y las técnicas fortifican cualquier herramienta del diseñador, pero debo aventurar que el pensamiento crítico sobre un diseño es tan importante como las herramientas y habilidades necesarias para producirlo.
Aquí tienes una guía de comprobación e inspiración para conseguir que un sitio esté hecho, hecho, hecho. No dejes nada sin comprobar y no dudes sobre el diseño que presentas – déjale que brille.

El Experimento

No es insólito para mí crear hasta cuatro bocetos simultáneos para solamente la primera ronda de presentaciones de diseño. Yo suelo usar esos para “dar una primera impresión” de los diseños. Una navegación o el tratamiento del logo que no funciona en un boceto podría funcionar en otro boceto. Esto te permite tener lo que yo llamo “el Hermoso Error” – colocando elementos en otros ambientes que crean posibilidades. En lugar de que un diseñador se sienta bloqueado, sin inspiración, lanzas ideas que plasmas en bocetos y ves adónde llegan. Conseguir empezar es la mitad de la batalla.

Leer más…