Este es el weblog de Horacio Bella donde se tratan temas relacionados a internet, comunicación, diseño y algunas cosas más. Si lo deseas puedes ponerte en contacto conmigo o seguir lo que voy escribiendo mediante el feed del sitio.

Gran Impetu



Febrero 24, 2008 ~ Permalink

5 maneras de generar más espacio en la página

Generar Espacio

Por lo general en los blogs tratamos de poner la mayor cantidad de elementos, textos, imágenes y todo lo que sea posible insertar pero tratando de que no ocupe mucho espacio, algo que es verdaderamente difícil.

El espacio en blanco es un bien muy valorado en el orden de un sitio web por lo que generarlo te va a ser de gran ayuda más que nada para que mejorar la usabilidad de tu blog. Voy a tratar de darte algunos consejos evitando decirte “sacá toda esa basura demás que tienes en tu sidebar!”.

Menúes desplegables

Una buena manera de ganar espacio es reduciendo esas largas listas que tienes en tu sitio tales como el blogroll, el archivo, las categorías, etc. Para esto puedes usar menúes desplegables los cuales “desplegarán” la información sólo cuando se la solicite. Puedes hacerlo con el famoso tag de html, pero te recomiendo hacerlo con CSS (tal vez un poco de JavaScript) si buscas optimizar esos enlaces para buscadores.

Ventanas Pop-up

Tranquilo. Entiendo que es un tema complicado y casi tomado como un pecado, pero hay ocasiones que ameritan usar un Pop-up. Tal vez estas incluyendo información en tu blog que quizás no debería estar allí pero quieres que el usuario la obtenga, un pop-up sería una opción. No abusar de esto, ya sabemos porqué.

Overlays en CSS

Bendito sea quien tuvo esta idea. Para los que no sepan de que hablo me refiero a la información que se muestra en una especie de pop-up pero sin cargar una página nueva ni cambiar a una tercera, todo hecho con JS y CSS. Los más populares son los usados para las galerías de imágenes y hay muchas opciones para elegir y poner a funcionar sin complicaciones.

Todo tipo de información “secundaria”, es decir, que el usuario va a recibir sólamente si la requiere, puede ir en este tipo de ventanas. Así el visitante podrá obtenerla rápidamente sin tener que abandonar la página que está visitando y quien no la necesite simplemente no la verá.

DIVs ocultos

Otra opción para este tipo de información que llamo “secundaria” es la de ubicarla en DIVs ocultos que el usuario podrá hacer visibles con un simple toogle. Un ejemplo lo tienen en este mismo sitio. Si hacen click en el botón “Navegación” en la cabecera podrán ver todos los enlaces que considero que pueden no estar entre las opciones del sitio.

Cualquier librería de javascript permite hacer esto y es una manera óptima de ocultar información que se desplegará con simplemente un click.

Pestañas DOM

Tal como en muchas aplicaciones, podemos agregar a nuestro sitio un sistema de pestañas donde el usuario va seleccionando la información que desea desplegar. Muy útil cuando tenemos todo separado por temáticas o categorías. No es recomendable abusar con la información en cada pestaña ya que la página carga inicialmente (al igual que en los DIVs ocultos), todos los datos, aunque no se despleguen.

Un ejemplo de pestañas que me gusta mucho es el que usa Coda.


Febrero 22, 2008 ~ Permalink

Internet Explorer y la propiedad clip

La propiedad clip de CSS puede sernos de gran ayuda por ejemplo para recortar una imagen. Para usarla aplicamos lo siguiente:

clip: rect(10px, 250px, 5px, 5px)

Pero esta entrada no es para explicar el uso de la propiedad sino para comentar el problema que se presenta a tratar de utilizarla con Internet Explorer ya que el mismo no admite el uso de comas en las sentencias CSS por lo que no interpreta esta propiedad. Para solucionar esto eliminamos las comas y problema “solucionado”. Hay que hacer lo siguiente:

clip: rect(10px, 250px, 5px, 5px)
clip: rect(10px 250px 5px 5px)

Especificando dos veces la propiedad lo hacemos una vez para cada tipo de navegador, la primera para Firefox, Opera, etc. y la segunda para Internet Explorer. Cada navegador interpretará la que considere correcta y pasará por alto la otra. El problema es que obviamente esto no es válido.


Febrero 20, 2008 ~ Permalink

CSS Rand, inspiración divina

Como les comentaba en el minipost anterior, ayer puse online mi propia galería CSS que a pesar de hacer lo que hacen todas las demás, es decir, mostrar sitios realmente bonitos, lo hace de una manera diferente. Al ingresar al sitio se carga una página aleatoria de la galería con un recuadro de opciones de CSS Rand que pueden ir moviendo a gusto.

Así al apretar F5 (refresh) o hacer click en el logo podrán ir viendo al azar los sitios que componen la galería en una especie de zapping por sitios de buen diseño. Entre las opciones se encuentran la de visitar el sitio mostrado y obtener el permalink correspondiente en la galería para por ejemplo pasarselo a alguien por email.

cssrand.jpg

No creo que haya mucho más que explicar, el sitio funciona con PHP y obviamente con la función random (mt_rand), para conocer más pueden visitar la sección About (en inglés). Dicho sea de paso, decidí hacer el sitio en ese idioma ya que las opciones son pocas e intuitivas y así se puede llegar a un público mayor.

¿Comentarios?

Actualización: Ya está lista la galería (http://cssrand.com/gal) aunque todavía no la incorporé a las opciones del sitio. La hice “a mano” porque necesitaba algo simple, es decir, siguiendo la idea del sitio. Si tienen alguna idea como para complementarla (nada de cosas supergaláticas por favor ^^) comentenla así la voy terminando y la pongo a funcionar.

Nueva actualización: Ya está disponible el feed (suscripción suscripción!) con los últimos sitios agregados a la galería.

Otra actualización: Ya está casi todo listo para el funcionamiento del sitio. Agregué un blog para ir poniendo las noticias relacionadas con el mismo y los thumbnails ya se guardan en el servidor. Además hice un pequeño cambio en la disposición de las opciones cuando se navega por la manera random. Ahora será cuestió de hacer conocido el sitio, recibir Pagerank y que algunos anunciantes se interesen.


Acabo de poner online CSS Rand (http://cssrand.com) mi galería CSS. Pronto ampliaré con más información. (2)

David Walsh participando en CSS Tricks nos muestra un tutorial de como cambiar el aspecto de nuestro sitio según el estado del clima usando CSS y PHP. (0)

Febrero 17, 2008 ~ Permalink

Contratar un buen diseñador es como ir a la peluquería

peluqueria.jpg

A menos que se cuente con una habilidad impresionante o que no hayas expectativas muy grandes con el resultado, el corte de cabello es uno de los pocos puntos del aseo personal que no puede realizarse uno mismo. Para esta tarea debe contratarse a otra persona que se encargará del mismo y en quien se pondrá toda su confianza. Algo muy parecido sucede al contratar un diseñador.

Apenas se sienta y antes de comenzar le dices al peluquero que es lo que necesites y como quieres que quede tu cabello. Es más, puedes decirle que te gustaría tener un estilo parecido al de Carlitos Balá, Iván de Pineda, Mister T o Martín Palermo en su vieja época. No importa cual sea el estilo, él irá en busca del mismo.

Habrá momentos en que no sepas que es lo que está haciendo con tu cabello. Tal vez cada tanto te muestre en el espejo como va quedando pero tu nunca le dirás cuando usar las tijeras, cuando mojar el cabello o cuando usar la máquina de cortar. Puedes confiar en él y sus habilidades por lo que puedes sentarte a disfrutar de la conversación (política, deportes y si no hay mucha confianza… el clima).

Al final del día te deja con una sonrisa en la cara. Puede ser que tarde algunos días en gustarte o tal vez sea amor a primera vista. De cualquier modo sabe que fue un excelente trabajo y que hizo precisamente lo que querías que hiciera.

Así puedes irte y hacer crecer su cabello sabiendo que no necesitará un corte por algún tiempo. Lo que también sabrás es a quien recurrir cuando lo necesites nuevamente.


Febrero 16, 2008 ~ Permalink

Diseño o código: Pros y contras

discode.jpg

El diseñador web está encargado de dos aspectos bien difereneciados, por un lado la parte gráfica, es decir, todo lo estético en cuanto a imágenes que trabaja con su Photoshop o Gimp y por otro lado está la parte del código, el HTML, CSS, Javascript, etc. que trabaja en su editor de texto plano. Lo ideal sería que meneje a la perfección ambos campos, pero por lo general cada uno se especializa en alguno de los dos. A continuación algunos pros y contras de cada uno.

Diseño

Pros

  • Estas en condiciones de crear algo bello y ponerlo orgullosamente en su porfolio.
  • Puede tomarse la libertad de diseñar algo muy complejo, algo que normalmente no haría si usted mismo hiciera el código.
  • Su tarifa por hora puede ser muy alta si usted trabaja rápido.
  • Su mamá puede mirar su trabajo y decir “Wow, eso es muy bonito”.
  • Puede inspirarse fácilmente en el trabajo de otros.

Contras

  • Los clientes a veces tienen mal gusto, y que insisten en cosas que tu jamás harías.
  • Trabajo con pésimo material (logos, imágenes) proporcionados por el cliente, quien pretende la creación de “el mejor diseño en el planeta”.
  • Un sinfín de idas y vueltas, no importa lo buena que usted siga las instrucciones de su cliente, siempre hay otra cosa que se pueda imaginar en el último minuto.
  • No importa cuán bueno eres, siempre hay una posibilidad de que su diseño sea rechazado. Sobre gustos no hay nada escrito dicen.
  • La mayoría de los clientes quieren originalidad, así que tiene que venir con algo nuevo casi siempre.

Código

Pros

  • Si eres bueno, no hay forma de que su trabajo puede ser rechazado. Aquí no hay misterios ni juicios de valor.
  • Usted puede fácilmente calcular cuántas horas usted va a gastar en ciertos proyectos. El tiempo es oro y saberlo administrar muy valioso.
  • Usted inmediatamente recibirá un status de “experto” si el aspecto de las páginas se ve igual en todos los navegadores.
  • No tienen que ser extra inspirado para hacer un buen trabajo, su conocimiento pueden trabajar en auto-piloto.
  • Los clientes nunca interfieren en lo que haces.
  • Usted puede reutilizar código una y otra vez. Esto es muy importante.

Contras

  • Trabajar sólamente con código tal vez no sea muy productivo para una persona creativa.
  • Sólo quienes sepan de código podrán saber exactamente cuán bueno eres, otros sólo pueden suponerlo.
  • Tu mamá no podrá ver lo que hiciste y decir “Wow, eso es muy bonito”.

En Blogoscoped entrevistaron a Ruth Kadar, la diseñadora que creó el logo de Google. Cuenta como conoció a Larry y Sergei y como surgió la idea. (0)

Febrero 13, 2008 ~ Permalink

Razones comunes para el fracaso de un sitio web

Si el objetivo de tu sitio es aumentar día a día su audiencia y generar con esto algún tipo de ingreso seguramente sabrás que no es un trabajo fácil. Hay muchos motivos que se repiten en la mayoría de los casos, los cuales llevan a que el sitio no tenga éxito o no logre su objetivo. Algunos pueden ser los siguientes:

Ausencia de objetivos bien definidos
Si tu no sabes lo que quieres es muy difícil que lo consigas. Antes de comenzar y una vez en ruedo debes tener muy bien en claro tus objetivos tanto a largo como a corto plazo. Hablar con personas que ya han pasado por este proceso puede serte de gran ayuda.

Falta de foco en el usuario
Sin usuarios tu sitio no es más que un par de archivos en un servidor. Debes enfocarte en el mismo, que es lo que quiere, que es lo que busca y como quiere encontrarlo. Sin usuarios o sin usuarios felices tampoco hay dinero.

Poco o insignificante contenido
En muy pocas ocaciones los usuarios vendrán a ver el diseño de tu sitio o para ver si has agregado publicidad nueva. Ellos vienen por el contenido, si no lo encuentran se van y muy dificilmente vuelvan. No es una novedad que diga que el contenido es el que manda.

Una mala estrategia de marketing
No es necesario gastar mucho dinero en marketing y hacerlo tampoco asegura un éxito en la campaña. Antes de comenzar hay que tener en claro los pasos a seguir para atraer tanto a usuarios como a anunciantes.

Una mala selección de nicho
Tener un sitio o en particular un blog en un nicho sobrecargado de competencia no es una buena idea a menos que seas un gurú en el tema o tengas contenido exclusivo que ofrecer. Si tu caso no es ninguno de los dos tal vez pierdas el tiempo incursionando por ejemplo con un blog de gadgets.

Actualizaciones poco frecuentes
El usuario es un devorador de información, siempre quiere que sea reciente y no le agradan los largos períodos de inactividad sin obtenerla. Hay que establecer un tiempo de actualización óptimo para el sitio. Una sobrecarga de información también puede resultar molesta.

Falta de compromiso
Estas adentro o afuera, blanco o negro, no hay grises. Si quieres realmente cumplir el objetivo debes comprometerte con el mismo. Nadie te regalará nada y lamentablemente esto requiere mucho tiempo de inversión.

Sistema de monetización ineficiente
Si deseas convertir tu tiempo y esfuerzo en dinero debes plantearte muy bien como hacerlo, es decir, que método utilizarás. Tal vez logres atraer a miles de usuarios, pero si no sabes como transformar esto en dinero tu cheque no será muy gordo a fin de mes.

Un mal diseño
El diseño de tu sitio es una herramienta que será clave en los procesos de atraer usuarios, entregarles lo que quieren y hacerles generar tu dinero. Si esta herramienta no es óptima nada de eso sucederá. Si te interesa puedes saber que es lo que hace a un buen diseño web.


Una estadísitica realmente extraña. Un grupo de usuarios pequeño, (6% del total), que no representa a la población, o mejor dicho, al usuario promedio, genera el 50% de los clicks en las publicidades online. (0)

Navbar