10 principios para un diseño web efectivo

La gente de Smashing Magazine publica un excelente artículo tras otro. En particular, me parece muy bueno el dedicado a los 10 principios para un diseño web efectivo. El artículo, como es también su costumbre, está acompañado de numerosos ejemplos gráficos, capturas de pantalla y enlaces a los sitios mencionados y es muy recomendable para cualquiera que esté interesado en temas como el diseño gráfico, el diseño de la interfaz gráfica, la usabilidad, la experiencia de usuario y la interacción.
Los puntos clave, según el artículo, y desarrollados ampliamente, son (en traducción libre):

  1. No hagas pensar a los usuarios
  2. No abuses de la paciencia de los visitantes
  3. Arréglatelas para captar la atención de lus usuarios
  4. Esfuérzate en destacar los puntos clave
  5. Utiliza un estilo de escritura efectivo
  6. Trabaja en la simplicidad
  7. No temas al espacio en blanco
  8. Comunica efectivamente con un lenguaje visible
  9. Las convenciones son tus aliadas
  10. Haz tests pronto, házlos a menudo

A veces parece que pueda existir un conflicto entre el valor del diseño gráfico y la immediatez de la interacción con el usuario, y estoy de acuerdo sólo en parte con estos puntos; en particular, el de “las convenciones…” puede llevarnos fácilmente a la reiteración. Pero en general me parece un artículo que debe tenerse en cuenta. Al final encuentras una serie de enlaces a recursos relacionados que también merecen una visita.

WordPress para gestionar una web

Antes de empezar esta remodelación del sitio, he tenido que darle vueltas un tiempo a la cuestión de qué sistema emplear para gestionarlo. Por tanto, la decisión de utilizar WordPress se basa en diversas pruebas y en la comparación de sus características con la de otras plataformas de gestión de contenidos o de blogging. He probado varias aplicaciones: b2Evolution, Lifetype, Nucleus, Textpattern y, por supuesto, WordPress. En una serie de artículos compartiré el proceso de aprendizaje, y algunos trucos y descubrimientos útiles. Continuar leyendo “WordPress para gestionar una web”

Sleeveface, de la portada a la realidad

La galería de Sleeveface es para no perdérsela. Anda, busca entre tu colección de discos (de vinilo, claro, a menos que imprimas una gran ampliación de la diminuta carátula de un CD) y crea tu propia Sleeveface:
sleevefac,muestra 2sleeveface, muestra 1sleeveface,muestra 3
Continuar leyendo “Sleeveface, de la portada a la realidad”

WordPress y las etiquetas DIV

Mi intención al empezar este nuevo proyecto aquí en Vectoralia es compartir mis experiencias con WordPress, con la intención de que puedan ser útiles para los que se inician o quizás incluso para los que ya lo han manejado durante cierto tiempo.

Nada más empezar a utilizar el editor de posts de WordPress me he topado con un curioso problema, de hecho un bug de WordPress (o una limitación, sencillamente.) Después de un poco de investigación veo que el problema lleva un cierto tiempo produciéndose y la solución no es segura ni universal, aparentemente.

El problema en cuestión consiste en el campio de una etiqueta div por otra p. Quería colocar una pequeña caja al lado del texto, con una imagen y un pie de foto, y estos dos elementos figurarían en dicha caja, flotando a la derecha del texto del artículo. Pasé al editor de código de WordPress para introducir algo como lo que sigue:

Contenido dentro de la caja…

pero al encontrarse la etiqueta DIV, WordPress la sustituye por P, como ha sucedido precisamente aquí, a la izquierda. Es cierto que para este propósito una cosa puede ser casi equivalente a la otra, pero en otras situaciones este bug debería evitarse. Y ni siquiera acepta que introduzcas DIV dentro de un trozo de código, dentro de las etiquetas CODE.

¿Cuál es la solución? Existe la posibilidad de retocar el código de WordPress, pero quizás la solución más simple y en mi caso óptima es sencillamente desactivar el editor visual, ya que de todos modos prefiero teclear el código directamente.

div-problem.jpgPara desactivar (reversiblemente) el editor visual se accede a Users y se desactiva la casilla correspondiente (si el blog tiene múltiples editores cada uno puede elegir lo que prefiera.)

Con esta opción desactivada, puedes introducir un DIV dentro del código del artículo sin que WordPress se lo cargue.

Ahora probamos con el editor visual desactivado y ningún problema:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua…



El código utilizado para esta caja, que flotaría en este caso a la izquierda es:
<div style=”width: 250px; padding: 10px; float: left; border: 1px dotted black;”>Lorem ipsum…</div>

Scuttle: crea tu propio servicio de marcadores sociales

Si dispones de un servidor web con la combinación PHP + MySQL, la habitual para tantos sistemas de gestión de contenidos, Scuttle te permite crear un sistema de marcadores sociales multiusuario similar a del.icio.us, diigo, ma.gnolia… en el cual diferentes usuarios pueden compartir y etiquetar sus preferidos en la red. Evidentemente, no hace falta reinventar la rueda y por algo es tan cómodo y útil utilizar los servicios ya existentes. Pero Scuttle te puede venir bien para gestionar un grupo restringido de usuarios que compartan un interés específico.

ShowYourself (Widget)

A medida que nos inscribimos en diferentes servicios relacionados con la web social, se llega a hacer necesaria alguna manera de poder mostrar una lista actualizada de nuestra página en Facebook, MySpace, del.icio.us, digg o cualquier otro sitio de esta creciente lista. ¿Para cuándo alguna manera de unificarlo todo y hacer todo más simple?

El servicio ShowYourself crea un Widget que luego puedes incluir en tu blog o en tu página personal, que sin duda te ayuda a establecer esta difusa y poliédrica identidad digital que todos estamos adoptando.

Bienvenidos (un poco de historia)

Al poner en marcha un nuevo proyecto para integrar contenidos dispersos en varias webs distintas, me tomo un momento para mirar hacia atrás y recordar cómo ha sido el proceso de aprendizaje, y cómo han cambiado las cosas a velocidad de vértigo.

Medio año después de poner en marcha Vectoralia, y tras un periodo de pruebas de varios CMS me he puesto manos a la obra con esta bitácora desarrollada en WordPress. A la vez, supone un replanteamiento de varios de mis proyectos en la red. Continuar leyendo “Bienvenidos (un poco de historia)”

Nigerian Scams

Me considero afortunado por haber dejado de recibir (prácticamente) emails de estafadores nigerianos, los bien conocidos nigerian scams. No sé si los filtros de spam últimamente funcionan de maravilla o si esta actividad delictiva ha bajado un poco en los últimos tiempos. Aunque creo que se trata de la primera opción. La actividad de phishing y otros engaños basados en una mezcla de codicia, ingenuidad y falta de precauciones de los usuarios están a la orden del día. Todas estas estafas son la puesta al día, versión digital, de timos que existen desde tiempos antiguos. No podemos negar que son un ejemplo, aunque sea pérfido y mal encaminado, de creatividad.

En un artículo reciente, Llorenç Valverde comenta que ha circulado incluso un scam en el que lo que se ofrece a los incautos internautas es una compensación por los efectos de las estafas nigerianas, o anuncian una presunta iniciativa para limpiar el buen nombre de los pobres nigerianos. ¡Un scam que tiene como gancho un scam! esto es rizar el rizo.

De todos modos, los nigerian scams son un clásico de esta internet que nos ha tocado padecer, y existen multitud de sitios dedicados a esta fastidiosa actividad. Algunos tienen un lado cómico, como el generador de cartas para Nigerian Scam te permite crear tus propios mensajes solicitando dinero para sacar de un apuro a una hija de un ministro, o desbloquear una cuenta en suiza de un funcionario del ministerio de petróleo, o lo que quieras. La ilustración muestra mi intento de epístola nigeriana…

Algunos sitios para saber más o apreciar la variedad de scams, conocer historias de terror relacionadas, organizaciones que tratan del tema incluyen the 419 coalition
o, en wikipedia, una página general dedicada a las estafas basadas en la confianza.

Tipografía material

Me ha llamado la atención una fotografía en I love typography (un excelente blog que os recomiendo), en la que se veían plantillas para estampar tipos hechas con… patatas. Sí, la bien conocida forma de crear tampones a partir del humilde tubérculo. Recientemente todo lo que tiene que ver con las técnicas gráficas me interesa mucho, y ando metido en la creación de grabados en diferentes técnicas: punta seca, aguafuerte, linograbado, monotipos… todo ello documentado en una serie de artículos en Acuarela.

Visitando la web que correspondía a la curiosa imagen me he encontrado con el interesante trabajo de Itamar lerner, un diseñador israelí actualmente residente en Berlín (sigue estudiando en la Hochschule für bildende Künste de Hamburgo. Trabaja como diseñador freelance en diferentes proyectos, documentados en su sitio. Se trata de aproximaciones originales y creativas a la tipografía, utilizando materiales y enfoques muy diversos. En conjunto se trata de un trabajo muy bueno.