Libro Gratis!: “Planeta WEB2.0 Inteligencia Colectiva o Medios Fast Food”

Planeta WEB 2.0 - Inteligencia Colectiva o Medios Fast Food
Nuevo libro sobre el fenómeno Web 2.0, escrito por Cristóbal Cobo y Hugo Pardo.
Se puede descargar y leer completo de forma gratuita porque está publicado con una licencia Creative Commons.
Son en total 162 páginas en formato PDF.

Web: http://www.planetaweb2.net/

www.webtodoweb.com

YAML: framework CSS

YAML (Yet Another Multicolumn Layout) es un framework XHTML/CSS que nos permite crear plantillas para diseños web proporcionandonos diferentes tipos de layouts. Está basado en estándares, es sencillo de usar y comprobado en sitios web profesionales.

A parte, nos ofrece una herramienta online para crear nuestros propios diseños de forma rápida y sencilla. Solo hay que indicar el tipo de diseño, los tamaños, podremos añadirle elementos HTML y por último recuperar el código fuente.

Sitio: http://builder.yaml.de/

Nuevo sitio - WEBTODOWEB.com

Desde hace un par de meses esta pronto y al aire www.webtodoweb.com, misma web, mismos temas, mismos articulos, un poco mejor...
Clic para ir >>

Jing: capturas en tu web

Jing es una aplicación de Windows y Mac que permite capturar imágenes y vídeos de nuestro escritorio y los sube a internet, copiando en el portapapeles la url final para nosotros pegarla en nuestra web.Una herramienta muy útil si queremos realizar documentación o tutoriales. En las imágenes permite insertar flechas y texto, y los vídeos muestran con claridad las acciones que se realizan.

Tanto los vídeos como las imágenes se alojan en screencast.com, disponiendo todos los usuarios 200Mb de alojamiento.

http://www.jingproject.com/

8 consejos para mejorar la usabilidad

8 buenos consejos para que podamos mejorar la usabilidad de nuestras aplicaciones web, algo que a veces se ignora pero que hace sufrir a algún que otro usuario.

• Cuanta más interacción se necesite para realizar una tarea, más difícil se vuelve: cuando se necesite realizar una acción hay que evitar pedir todas las posibles características de la acción, simplemente pide lo estrictamente necesario. Por ejemplo, un buscador, puedes pedir que te ofrezcan la categoría, el número de resultados, el criterio de orden, … o simplemente pedir la palabra a buscar y si se quiere ofrecer una búsqueda avanzada para quien quiera refinar la búsqueda.
• Cuanto mayor tiempo de concentración se necesite para realizar una tarea, menor es la usabilidad: intenta que la aplicación responda lo más rápido posible para que el usuario mantenga su atención.
• Cuanto más tenga que trabajar el usuario, menos efectiva es la interfaz: lo que nos lleva a otro punto, haz la interfaz intuitiva.
• No vayas en contra de lo que espera el usuario: el usuario está acostumbrado a una serie de herramientas: botón para volver, recargar, … Diseña la aplicación teniendo en cuenta que el usuario está acostumbrado a algo y es lo que espera encontrar. El mal uso de Ajax a veces va en contra de esta premisa.
• Las páginas de error no gustan: nada es peor que mostrar uno o dos errores al usuario al mismo tiempo.
• Permite al usuario modificar la interfaz: a todo el mundo le gusta modificar los colores y el aspecto del entorno de trabajo. Que la gente se sienta cómodo con los colores es también algo a tener en cuenta.
• No esperes que los usuarios lean las instrucciones: debido a ello, la interfaz debe ser lo más parecido a lo que se está acostumbrado, para que cuando se encuentren con lo que tienen que hacer sea igual o muy parecido que lo de siempre.
• Mantén al usuario libre de errores: por ejemplo, una página 404 no dice nada, en vez de ello ofrece alternativas.

5 (+3) tips to increase web application usability

Libros Gratis - LibrosWeb.es

LibrosWeb.es publica gratuitamente todo el material que utiliza su autor en los cursos que imparte. Además, publica traducciones de libros gratuitos interesantes relacionados con el diseño y la programación web.

Algunos de los libros para descargar:
Introducción a AJAX
Introducción a JavaScript
Introducción a CSS
Introducción a XHTML
web: www.librosweb.es

El Sindrome de la página en blanco

Todos nos hemos enfrentado al pánico de empezar un proyecto con una página (o monitor) en blanco al inicio de un proyecto y ninguna gran idea. Hace algunos años alguien pidió ayuda a la lista de correo Graphic Arts. Gunnar Swanson, profesor de diseño, escribió una respuesta que aun conservo en mi archivo, y utilizo a menudo.

La respuesta de Gunnar Swanson:

Asumo que el "Síndrome de la página en blanco" significa parálisis psicológica en las primeras etapas de un trabajo. Mi sugerencia es hacer algo — aunque sea algo malo. Entonces puedes examinarlo y ver porqué está mal y hacer otra cosa y examinarla y ver porqué está mal y hacer otra cosa… y muy pronto estarás haciendo algo bueno.

Si estás en el mero principio de un proyecto, tienes suerte. Es una etapa bastante mecánica. Le preguntas al cliente cosas como "¿Qué estis College of Art andás tratando de decir?" y "¿A quién se lo estás tratando de decir?" Sigue preguntando esas preguntas en diferentes niveles — "¿Cuál es el subtexto de todo esto? ¿Cómo quieres que la gente se sienta?"

El siguiente paso es juntar todo esto como un registro coherente, listando características en orden de importancia ("los criterios del proyecto"). Esto es bueno para que obtengas una visión clara del proyecto, y te permite que tu cliente este de acuerdo con estos criterios, de manera que no te estés matando por hacer algo que a tu cliente no le importa.

El siguiente paso es donde sospecho que estás. Es la fase de "necesito una gran idea". No necesitas una gran idea. Te conviene más tener muchas ideas pequeñas. Un ejercicio que les doy a mis estudiantes usa una retícula. En el eje Y (el lado izquierdo), ennumera palabras clave o conceptos sobre tu proyecto / tema. En el eje X (arriba), haz una lista de cada término que puedas pensar que describa una relación de forma y significado. Llena los cuadrados formados por la retícula con dibujos.

Ejemplo: Tu proyecto es diseñar un logo para un restaurante llamado "La Casa del Perro". Las palabras clave obvias son perro, casa, comida … trata de extender la lista.

Las relaciones de forma y significado incluyen términos de semiótica de Peirce — icono, indice y símbolo. Para simplificar, un icono en este sentido, es algo que se ve como lo que significa (por ejemplo, un dibujo de un perro). Un indice representa una relación física en la que no existe una parecido actual (como humo para un fuego o huellas digitales para una presencia humana). En el caso de "perro" incluiría huellas, un hueso, excrementos, o lo que sea. Símbolo, en este sentido, significa cualquier representación meramente cultural sin una base en la naturaleza (como las formas P E R R O en el caso del perro).

Otra buena fuente de relaciones entre forma y significado puede ser creada por todo lo que tu profesor de literatura trató de decirte cuando no estabas escuchando — metáforas y tropos literarios. Estas incluyen la sinécdoque, que es una metáfora en la que una parte de algo se usa para describir el todo. Por ejemplo, si digo "Al no tener techo, empezó a ganarse el pan a las 15 primaveras", se entiende que a los 15 años empezó a ganarse la vida por no tener casa. (Una sinécdoque de un perro podría ser una cola meneándose.)

Otros tropos incluyen la metonimia (literalmente "cambio de nombre" en griego). Esta incluye reemplazar un trabajador por una herramienta (como la hoz y el martillo soviéticos) y lo opuesto de la sinécdoque. Si digo "Me levanté esta mañana y la ley estaba tras de mi. El FBI me tenía rodeado", es claro que no me refiero a que los códigos penales de los Estados Unidos, el sistema judicial entero y todos sus empleados, todos los edificios y archiveros del FBI… todos estaban a mi puerta. Estoy usando el todo para describir una parte.

Si aprender nuevos términos te da dolores de cabeza, puedes poner en la parte de arriba "grande por chico" "chico por grande" "suena como", y lo que tenga sentido para ti.

Esto puede ser difícil de entender porque solo tiene sentido si lo entiendes. Si sólo vas a hacer parte de esto, la columna "indice" es donde se halla una cantidad tremenda de buenas cosas. Piensa como sabes que algo está ahí sin verlo, qué es lo que indica su ausencia.

La buena noticia es que no tienes que pensar una gran idea. Solo tienes que responder muchas respuestas pequeñas. Puedes encontrar que no hay respuestas para algunas de las preguntas, pero este proceso te dará un banco de imágenes. Si algunas son particularmente buenas o interesantes, ponlas junto con tus palabras y preguntate si el hueso al que llegaste como indice de perro o metonomia de perro vale la pena continuar. Pon "hueso" en la retícula y haz las mismas preguntas sobre el—- cual es el indice del hueso.

Toma este banco de ideas y trata de combinar cada una con todas las demás. Ahora tienes miles de ideas. La mayoría son malas, pero no necesitas mil buenas ideas, solo unas cuantas.

Fuente: Diseñorama.com
Escrito por Gunnar Swanson

Web Developer Toolbar de Chris Pederick

Si es que todavía no sabíais de su existencia, os presento una pequeña (174 Kb) barra de herramientas que es un 'must' para cualquier diseñador o desarrollador Web.


Esta utilidad creada por Chris Pederick desnuda cualquier página web que visitemos, proporcionando una gran cantidad de información de todo tipo : su código HTML, sus hojas CSS, el tamaño de las imágenes, los atributos 'Alt', la información sobre las cookies, muestra las tablas que componen el diseño en diferentes colores, permite validar el código de la página, muestra los diferentes valores de profundidad de las div... y un largo etcétera de información. Realmente una maravilla para todos los que estamos metidos en el mundo de la creación web.

La barra está disponible sólo para los navegadores de la familia Mozilla como Firefox y Flock. El enlace directo para descargar la barra Web Developer es (también con su versión en castellano) :

http://chrispederick.com/work/web-developer/

Si queréis instalarla directamente como una extensión del navegador Mozilla Firefox éste es el enlace :

https://addons.mozilla.org/es-ES/firefox/addon/60

Entro en una página web cualquiera y...

... muchas veces no estaré más de 5 segundos en ella y cambiaré de sitio ! ¿Por qué? ¿Porque no tiene una animación flash que me gusta? ¿Porque la foto que sale en portada está mal pixelada? ¿Porque no me ofrecen un precio atractivo por el producto que estoy buscando?

Puede ser alguna de esas respuestas, pero el 99% de las veces que saldré del sitioe para seguramente no volver nunca más, será por otra razón : No quiero perder el tiempo intentando descifrar la página. Estaba buscando alguna información (precio, artículo, noticia, comentario, foto, explicación, etc) y sucedieron dos cosas : ni la encontré a la primera (decepcionado pero no frustrado)... ni el diseñador me ayudó a que la pudiera encontrar ¡(así que frustrado, me largué del sitio)!

¿A qué me refiero? Al concepto básico que debe tener cualquier sitio web y que muchos diseñadores obvian: ¡ U-S-A-B-I-L-I-D-A-D !, sobre el cual no hace falta escribir un tratado de 20 páginas. En mi modesta opinión, teniendo en cuenta unos pocos aspectos, ayudaremos al usuario a encontrar lo que está buscando en nuestro sitio (si es que se lo podemos proporcionar) o como mínimo no saldrá de nuestro sitio jurando no volver nunca más. Estos puntos serían :

1 - Facilitar al usuario de forma inmediata la situación exacta dentro del sitio web. ¿Cómo?

• Con un titular bien grande al principio del contenido de la página, donde le informará de forma resumida de qué trata esta sección de la web. Pensemos un poco : si cualquier medio impreso lo facilita, ¿por qué no debe tenerlo cualquier página de un sitio web?


• Con un menú de navegación principal claro y conciso. Si nuestro sitio tiene menús secundarios (seguramente sí) también aplicaremos la misma regla. Por menús claros me refiero a palabras que identifiquen cuáles son las grandes secciones tiene el sitio (menú principal) y qué opciones hay disponibles en el nivel en el que se encuentra el usuario (menú secundario)


• El cartel "Ud está aquí", es decir, informar de forma destacada en qué posición exacta del sitio se encuentra el usuario. Esto podemos conseguirlo a través de una corta línea de hipertextos que indiquen la ruta seguida desde el home del sitio hasta llegar a esa página concreta :
  
  
  Usted está en: Página Principal > Servicios > Desarrollo de Software
  
  
  o bien marcando de forma eficiente en el menú de navegación en qué parte del mismo nos encontramos :
  
  
  

2 - Colocar una ventana de búsqueda ¡que funcione! en la página de inicio. Esto es, que su motor de búsqueda interno sea eficiente (imprescindible) y sobre todo, nada de palabras raras en el botón que active la búsqueda. Si lo que queremos es buscar, ¿por qué el botón muestra 'Ir', o 'Empezar'? Sí, sé que sonará obvio para la gran mayoría, pero realmente me sorprendo de la gran cantidad de sitios en los que el botón de búsqueda no muestra precisamente eso, 'Buscar'.

3 - Plasmar en la pantalla lo que parece tan evidente (y muchas veces no lo es). O dicho de otra forma, si en un sitio de una emisora de radio hay una opción para escucharla a través de Internet, y se indica con un vínculo 'Escuchar radio en vivo'... ¿qué cuesta agregar un pequeño icono con el símbolo universal de 'play' al lado? Fue curioso descubrirlo cuando en un mini-test de usabilidad, una persona joven con total dominio de un pc, hojeó a lo largo de toda la página principal de Virgin Radio y al final, medio molesta, se dirigió a mi para exclamar que no se podía escuchar la emisora por internet... Sí se puede, pero el diseñador no quiso plasmar lo evidente.

...para remate, hace tan sólo unas semanas en la página interna que da acceso a la emisora en vivo sí que agregaron el botón de play... lo cual merece aún otra consideración : ¿por qué no se tiene acceso a la radio en vivo desde el home del sitio, cuando muchísima gente visitará la página principal sólo para conectar la radio a través de Internet?... USABILIDAD, por favor diseñadores, ¡USABILIDAD!

Fuente Don't make me think by Steve Krug www.sensible.com

Cosas que no debes hacer al construir un sitio web

1. Nunca cambies el tamaño de la ventana del navegador del usuario automáticamente, es molesto, irrespetuoso y típico de los sitos de spam.
2. Mal si tu página es de las que primero carga una página señuelo y ésta “lanza” un popup con la página real. Error muy habitual de los sitios hechos en Flash.
3. Tampoco está bien preguntar al usuario si quiere ver una caca de página directamente o prefiere entrar a un sitio guay lleno de colorines y animaciones pero para el cual necesita aditamentos especiales y esperar un rato a que cargue.
4. Si todo tu sitio está hecho en Flash despide al desarrollador de la página y hazla otra vez; si la has hecho tú colócala en el apartado “sitios inútiles que he hecho” de tu portfolio y hazla otra vez.
5. No pretendas reinventar la navegación de los sitios web.
6. El contenido es el rey: si tu página web no tiene suficiente contenido o ningún texto real que no esté en una imagen contrata a un copy y despide a tu webmaster ahora.
7. Si tu sitio web no funciona o no se ve bien en Firefox...
8. Nada de texto parpadeando [, los navegadores con clase como Safari ya ni la interpretan], nada de usar FrontPage, nada de popups ni en enlaces ni automáticos, nada de texto en scroll, nada de intros en Flash,...
9. Si la página contiene música asegurate de que el usuario puede detenerla o apagarla y mejor si no se inicia automáticamente —lo mismo para el vídeo.
10. Los menús de navegación mejor en texto que en imágenes.
11. Un flujo de navegación bien pensado con subsecciones siempre es mejor que utilizar menús desplegables.
12. Si la única forma de encontrar la información importante de tu sitio web es utilizando el buscador, despide al tío que hizo el flujo de navegación —y que seguramente utilizó menús desplegables.
13. Cuida el tiempo que necesita la página para cargarse.
14. Si pretendes hacer pasar al usuario por alguna ruta predeterminada para llevarle a alguna página concreta o a la versión demo de tu producto es hora de que te compres una granja de hormigas para aliviar tus deseos de usurpador de voluntades con alguna especie que lo permita.
15. Si vas a poner vídeo olvidate de pedirle a los usuarios que elija distintos anchos de banda y formatos de video perdedores como RealPlayer, Windows Media Player, Quicktime,... Utiliza un reproductor de vídeo en formato Flash como hacen YouTube y similares —si, Flash ganó esta única batalla hace tiempo.
16. No utilices técnicas y tecnologías nuevas en tu sitio web simplemente porque puedes o porque son novedosas. Las tecnologías nuevas son chulas, pero utilizalas sólo si realmente mejoran de algún modo la vida a tus lectores / clientes / usuarios.

Fuente: http://www.microsiervos.com/archivo/internet/cosas-no-hace-construir-sitio-web.html

Palette Grabber - Extensión Firefox

Palette Grabber es una extensión para Firefox que nos permite obtener los colores de una página web y exportarlos a un archivo para su posterior utilización.

El formato más sencillo al que exporta los colores es un fichero de texto con los componentes RGB de cada color en formato decimal. Pero lo que más nos puede ser útil es que lo exporta a formatos de paleta de colores de Adobe, Flash, Paintshop Pro, GIMP y Adobe Fireworks.

Esta herramienta la veo muy útil para cuando te mandan hacer un prototipo de alguna página nueva y hay que basarse en un diseño que no es tuyo, por lo que no tienes el original sobre el que se trabajó.

Palette Grabber

Fuente: sentidoweb.com

Fotografias Gratis - Stock.XCHNG

Stock.XCHNG : Completa colección con más de 250.000 imágenes de altisima calidad para descargar en forma grtuita para utilizar simplemente registrandose en el sitio.
Imagenes separadas por categorias y descargas.

Paleta de Colores - "Kuler"

Excelente aplicacion de Adobe Labs llamada Kuler, permite preparar automaticamente paleta de colores
Dispone de varias paletas creadas por diseñadores y usuarios, las paletas mas populares y permite crear y guardar para compartir paletas personalizadas de hasta 5 colores colores para proyectos web, graficos o multimedia.
Herramienta interesante y muy util para seleccionar colores de fondo, tipografias, bordes, iconos y logos.
Link: http://kuler.adobe.com

El Título de la página

El Título de la página

Introducción

El título de la página es un metadato acerca del contenido de la página, que se define a través de la etiqueta HTML

Definir el título en todas las páginas que conforman el sitio web es una norma básica que aumenta considerablemente la 'findability' de la información contenida en cada página. Además, no definirlo supone mostrar una imagen poco profesional del sitio web y su diseño.

Al contrario de lo que pudiera parecer, el título de la página no es un elemento de orientación del usuario en su navegación, ya que la mayoría de los usuarios ni tan siquiera advertirán su existencia.

La utilidad real de definir el título de la página y hacerlo correctamente, se presenta cuando:

• El usuario ojea su lista de favoritos (a la que previamente ha añadido la página en cuestión).
• El usuario ojea la lista de resultados de un motor de búsqueda o un buscador interno, dónde se suele mostrar por cada página el título, un breve resumen o extracto y la URL. De estos tres elementos, el título es el que aparecerá siempre más enfatizado.
• El usuario tiene abiertas varias ventanas en su escritorio.
• El usuario navega a través del historial de su navegador.
• El usuario explora alguna carpeta de su disco local, dónde previamente había guardado la página.
• Un robot de búsqueda indiza el sitio web.

Sugerencias generales

No defina el mismo título para todas las páginas que formen el sitio web. Esto suele pasar en sitios web que utilizan marcos, otra razón más para no utilizarlos. En un sitio web, cada página contiene información diferente, y el título siempre debe describir la información contenida en la página.

El título debe ser breve, ya que la parte final de la cadena de caracteres de un título largo no será visible para el usuario en ninguna de las situaciones descritas en la introducción de este artículo.

Por esta misma razón, también debe mantener una jerarquía de información entre los elementos que formen el título, colocando al principio los más importantes. El siguiente título 'Post 13 Diciembre 2002 : Qué es la Usabilidad' sería más correcto de la siguiente forma 'Qué es la Usabilidad (Post 13 Diciembre 2002)'.

Suprima, cuando sea posible, las palabras vacías de significado al principio del título, como artículos o frases del tipo 'Bienvenido a...'.

Si utiliza signos de puntuación en el título, recuerde que los siguientes caracteres:

\ / : * ? " < > |

'desaparecerán' del título una vez los añada el usuario a su lista de favoritos o guarde la página en su disco local, por lo que si el título los contiene asegurese de que éste siga comunicando el mismo significado sin ellos.

Deformar el texto de un título, como en el siguiente ejemplo:

'D I S E Ñ A D O R E S W E B'

puede llamar la atención del usuario cuando ojea su lista de favoritos o los resultados de un buscador, aunque conlleva varios inconvenientes: connota poca profesionalidad, disminuye la legibilidad, y más importante, dificulta la indización de la página por parte de los robots de búsqueda, por lo que podemos vernos perjudicados con respecto a nuestra competencia en cuanto a nuestro posicionamiento en los resultados de búsqueda.

La Home Page

Las páginas de inicio o home pages, por sus características intrínsecas y diferentes respecto del resto de páginas del sitio web, si bien le son aplicables todos los consejos y sugerencias descritas anteriormente, merecen un tratamiento especial de su título.

Como en todas las páginas del sitio web, el título de la página de inicio debe describir su contenido. La mejor forma de hacerlo es indicando en el título el nombre y una breve explicación del sitio web, por este orden.

Nombre del sitio web

El nombre del sitio web no lo incluya en forma de semi-URL. Es decir, es preferible usar 'El Corte Inglés' a 'ElCorteIngles.es', 'www.elcorteingles.es' o 'http://www.elcorteingles.es'. Sólo en sitios web dónde el nombre de dominio de nivel superior (.com, .net, etc..) forme parte de la identidad de la empresa u organización, se debe incluir en el título de la home.

Si el nombre de dominio del sitio es un acrónimo, no encabece el título de la home con ese acrónimo, a no ser que sea más conocido así que de la forma expandida.

En nombres de sitios web que estén formados por más de una palabra, si cada una de esas palabras tiene significado por sí sola, debería escribirlas separadas en el título, para que los robots de búsqueda puedan indizar el sitio web de forma óptima.

Descripción del sitio web

En el título de la home, además del nombre, debe exponer una breve explicación o descripción de cuál es el contenido o finalidad del sitio web.

Si el sitio web posee ya un eslogan, y éste es verdaderamente descriptivo y significativo, utilícelo en el título de la home. No incluya frases vacías de autopromoción como 'Empresacualquiera.com - El mejor sitio web' o 'Empresacualquiera.com - Profesionalidad, rapidez y eficacia'.

La descripción que se debe exponer es la del sitio web, no la de la página. Por ello absténgase así mismo de utilizar frases explicativas del tipo 'Página de Inicio'.

Conclusiones

Consejos y sugerencias tan sencillos como los indicados en este artículo pueden aumentar considerablemente la findability de las páginas del sitio web, no únicamente desde el navegador y escritorio del usuario, o desde los resultados en motores de búsqueda, sino también en el propio sitio web desde los resultados mostrados por el buscador interno.

Para concluir habría que recordar que la elección del título de la página no debe realizarse de forma aislada por cada una de las páginas del sitio web. Es imprescindible su planificación en las primeras fases de desarrollo del sitio web, y de acuerdo a un control terminológico sistematizado. Es por ello que el responsable lógico de definir el título de las páginas (así como del resto de sistemas de rotulado) es el Arquitecto de la Información.

Notas

* Microsoft Explorer almacena las páginas guardadas desde el navegador con el nombre del título de la página, aunque otros navegadores como Mozilla no lo hacen de esta forma. Otra diferencia es que Explorer almacena en la lista de favoritos las páginas como si fueran archivos, por lo que no permite ciertos caracteres especiales

fuente: http://www.nosolousabilidad.com
Yusef Hassan Montero
Grupo SCImago, Universidad de Granada