Tutorial de Photoshop. Botones 2.0
Escrito por Jordi Soro (Guepmascle) el 03 - 12 - 2007 • Diseño web , Tutoriales

Mirando WydBlog me encuentro con un sencillo pero práctico tutorial para realizar botones con brillo al más puro estilo web 2.0.

Mirando WydBlog me encuentro con un sencillo pero práctico tutorial para realizar botones con brillo al más puro estilo web 2.0.

Hema es una cadena holandesa dedicada a los complementos del hogar tipo Ikea, en el que podemos ver una presentación de los productos nada normal, recrean el archi-utilizado efecto dominó, pero como casi siempre con este efecto, sigue funcionando.
No pierdas la oportunidad de verlo, vale la pena.
Vía: Efecto Efe

Utilizar una metodología en el trabajo nos permite en muchos casos reducir el tiempo de trabajo para llegar a un mismo objetivo, y el caso del diseño web no es diferente. Es más, casi diría con seguridad que en este campo la metodología es mucho más importante que en otros campos, por eso desde webnova nos ofrecen un detallado planning a la hora de planificar el diseño de una web.
Vía: Webnova

No estamos hablando del web de un coche, estamos hablando de la maravilla que sirve para que el Audi R8 entre en internet, la verdad es que seguro que se puede hacer mejor, pero reto a quien quiera a que lo consiga (no lo tiene nada fácil). Este web tiene una mezcla perfecta de vídeo, animación 3d, interactividad, buen tratamiento fotográfico, navegabilidad, y por supuesto un producto a vendercon el que te se caerá la baba.
Os dejo con el making-off, que no tiene desperdicio.
Vía: Territorio creativo
Web oficial: Audi

YAML (Yet Another Multicolumn Layout) o lo que es lo mismo, Otra Disposición Multicolumna es un framework (X)HTML/CSS para crear modernas y flexibles disposiciones de capas. La estructura es extremadamente versátil en su programación y accesible a los usuarios finales.
Está basado en estandares web, es accesible, flexible y fácil de utilizar. Dispone de la versión online llamada YAML Builder que permite el desarrollo visual de capas CSS directamente en el navegador. Sus características disponibles permiten elegir los elementos básicos de disposición disposición (#header, #footer, …), el número y orden de las columnas contenidas, arrastrar y jerarquizar las subplantillas y el contenido simulado. Finalmente, muestra el código XHTML y CSS.
Enlaces: YAML Builder, YAML

Otro recurso para crear una web rápidamente, es con dotemplate. Su funcionamiento es senzillo: seleccionas un diseño y a partir de aquí puedes personalizar los colores, las tipografías y otros elementos a tu gusto, siempre viendo el resultado final y permitiéndote modificarlo en todo momento.
Enlace: dotemplate
Conceptos básicos de usabilidad
1. El usuario es el que manda. Los usuarios de internet son mucho más exigentes en la red que en los comercios tradicionales; primero porque estan en su casa y segundo porque nadie les va reconduciendo hacia ningún sitio, así que para que un usuario vuelva debes ofrecerle lo que está buscando sin titubeos y sin hacerle perder ni un segundo.
2. La calidad se basa en la rapidez y la fiabilidad. En internet lo que cuenta es que tu página sea más rapida que bonita, más fiable que moderna. En definitiva, para perdurar en internet hay que ser directo.
3. Simplifica, optimiza. Todo debe estar a un tiro de piedra; no esperes que tus visitantes aprendan tu site map y sepan como llegar a la información de memoria, eres tú quien debe poner toda la información ordenada y de manera lógica para que el usuario no tenga ninguna duda de donde está la información que necesita.
4. Buenos contenidos. Saber expresar lo que quieres decir de manera fácil y entendible a veces es muy complicado, pero debe ser el objetivo número uno si queremos que los visitantes vuelvan a por más información otra vez. Por ello hay que seguir algunas reglas básicas como poner las conclusiones al principio y escribir tan sólo un 25% de lo que pondrías en un papel (sintetizar las ideas).
Puntos básicos para ser accesible
1. Imágenes y animaciones. Describe cada una de las imágenes y animaciones en el Alt
2. Multimedia: Incluye subtítulos y descripciones en audio de lo que se está mostrando en la animación para hacer más accesibles estos elementos.
3. Enlaces de hipertexto: Los enlaces han de poder ser entendidos fuera de contexto, por eso un “enlace” o “click aquí” no servirán de mucho para determinado número de visitantes.
4. Figuras y diagramas: El atributo longdesc puede ayudarnos para hacer una descripción más amplia del contenido del elemento.
5. Scripts, applets y plug-ins: Muchos de ellos no son accesibles, por eso nuestra recomendación es no utilizarlos si queremos ser accesibles, pero aún en el caso de utilizarlos habría que complementarlos con otros elementos que sirvan la misma información de manera accesible, y de esa manera poder escoger el modo de llegar a la misma.
6. Texto ampliable: La utilización de CSS puede ayudarnos a la hora de hacer accesible nuestra web con la utilización de tamaños de letras en dimensiones “em” y no en píxeles, de esta manera podremos redimensionar de manera más fácil los textos y hacer más legible la información a personas con problemas de visión.
7. Revisar tu trabajo: Una vez realizados estos puntos básicos, revisa el resultado en webaim.org para saber si la web es accesible.
Vía: W3C

Dolors Pou, consultora de usabilidad en Xperiencie Consulting, diseñadora y periodista nos desgrana en un artículo para consumer.es las diferencias entre usabilidad y accesibilidad de una manera fácil y entendedora. Por eso pasamos a resumir los conceptos básicos que en él se apuntan.
“La misión de la usabilidad es hacer la vida más fácil a las personas que buscan información en una web”
Parece básico, pero muchas veces los diseñadores sacrificamos esta facilidad de movimiento por la web (navegación intuitiva) para poder realizar nuestras “pajas mentales” y crear páginas monísimas por las que, seguramente, nadie sabrá navegar.
Por tanto la usabilidad consiste simplemente en hacer más fácil a las personas llegar a la información que necesitan.
Google Maps se abre a todos para poder incluir sus mapas en nuestras páginas web, pudiendo personalizar la situación concreta del mapa, el nivel de zoom…
Para utilizar Google Maps en nuestra web tenemos que situarnos en la ubicación que queremos mostrar y hacer click en la parte superior derecha “Enlazar con esta página”, una vez allí nos muestra dos opciones, la de poner un link del mapa (eso ya funcionaba en Google Maps desde hace tiempo) y la segunda, incluir el mapa en una web.
Si hacemos click en “Personalizar y obtener vista previa del mapa incrustado”, se abre una nueva ventana en la cual podemos personalizar el tamaño del mapa, pudiendo elegir entre pequeño, mediano, grande o tamaño personalizado.
Vía: Incubaweb
Web oficial: Google Maps