Usabilidad "Like a Boss"

Todos hemos oído el término de usabilidad, es algo que ha permeado nuestras vidas internetísticas desde tiempos inmemoriales, y aún cuando es uno de los aspectos más importantes al momento de realizar cualquier sitio web, ¿qué tanto realmente entendemos el término de usabilidad?

Usabilidad

Por medio de este pequeño artículo revisaremos lo que es la usabilidad, desde su concepción clásica pasando por nuevos factores que debemos de considerar hoy en día viendo qué es y cómo ha ido evolucionando la usabilidad en estos últimos años.


Usabilidad 101

Empecemos viendo de un modo breve el concepto de usabilidad:

Usabilidad realmente sólo significa que algo funcione bien: que una persona de habilidad y experiencia promedio (o a veces más baja) pueda hacer uso del objeto –ya sea un sitio web, un jet o una puerta giratoria- para el propósito que se creó sin que se frustre. Steve Krugg, 2001. Don’t make me Think

Pa pronto, cuando hablamos de usabilidad, nos referimos a hacer que las cosas funcionen bien y sean fáciles de usar, haciendo que el usuario obtenga el comportamiento esperado de lo que está usando.

Leer más...

Creando un efecto Parallax con jQuery, HTML5 y CSS3

Hace poco publicamos un tutorial de un efecto "Parallax" con CSS3 (realizado por el buen Edgar Parada). Como ya sabemos, en desarrollo y diseño web, un mismo resultado (independientemente de lo que estemos haciendo) lo podemos obtener de muchas formas diferentes, por lo que en esta ocasión haremos un pequeño tutorial de Parallax pero ahora hecho con jQuery, HTML y CSS.

Leer más...

Los efectos de SOPA sobre el diseño gráfico

La semana pasada fue una semana de cambios que hasta hace poco no se creían posibles. Una iniciativa del gobierno estadounidense amenazaba con acabar con Internetz del modo en que lo conocemos, fue tan grande el cambio que se proponía, que propició que sitios de la importancia de Google y la Wikipedia mostraran su descontento por medio de protestas en su sitio. En el caso de Google, fue un link que llevaba a una firma de peticiones para detener la iniciativa, en el caso de wikipedia, fue un cierre total en su servicio por un día. ¿Pero de qué trata esta iniciativa y cómo es que nos afecta? Por medio de éste artículo trataremos de explicar un poco de qué trata SOPA y cómo nos afecta a los diseñadores.

¿Qué es SOPA? Un poco de contexto

 

SOPA, por sus siglas en ingles Stop Online Piracy Policy, es una iniciativa de ley iniciada por el Senador Lamar Smith, que según el gobierno de Estados Unidos busca el ayudar a la lucha contra el infringimiento de copyright al expandir las facultades del gobierno para actuar.

Anteriormente, el modo de acusar a un sitio de infringimiento de copyright era el siguiente: La compañía dueña del copyright acusaba al sitio, si el sitio se encontraba hospedado en un servidor dentro del área de estados unidos, se procedía a actuar en contra del dueño del sitio. Aquí hay dos puntos clave que hay que aclarar:

- La jurisdicción del gobierno terminaba al emprender acciones legales en contra del dueño del sitio, sin perjudicar a un sitio aledaño o afectando a alguien más.


- Si el contenido con copyright era subido por algún usuario del sitio y no el dueño, el sitio podía ampararse gracias a una ley denominada Digital Millennium Copyright Act, que básicamente dice que el sitio no es culpable del contenido que los usuarios suban, siempre y cuando al momento en que haya alguna queja por parte del dueño de los derechos de autor, se elimine el material que tenga copyright.

Leer más...

CSS y @font-face para el uso de fuentes tipográficas en diseño web.

Uno de los principales obstáculos al que nos enfrentábamos hace algunos años al diseñar sitios web era la pequeña cantidad de fuentes tipográficas que teníamos a nuestra disposición para desarrollar sitios que pudieran ser vistos en cualquier navegador. Las famosas "Web-Safe Fonts" eran un grupo de 18 fuentes tipográficas que venían pre-instaladas en la mayoría de las computadoras, por lo que teníamos que hacer uso de estas para estar seguros de que cualquier navegador podría ver nuestras páginas de la misma forma y con las mismas fuentes que como las habíamos imaginado a la hora de diseñar.

 

CSS y @font-face para el uso de fuentes tipográficas en diseño web.

 

Esta limitante nos orillaba a hacer uso de recursos o técnicas en caso de querer diseñar con fuentes distintas a las "web-safe fonts", podíamos por ejemplo utilizar imágenes en lugar de texto o recurrir al uso de Flash, teniendo claro que esto va en contra de los estándares web, haciendo a estos textos no seleccionables, inaccesibles e imposibles de identificar e indexar por los buscadores.

 

Si tenemos en cuenta que más del 80% del contenido de internet es información escrita, nos damos cuenta de la importancia de la tipografía dentro del diseño, desarrollo y creación de sitios web. Y hablamos de esto no solo por el carácter estético que la tipografía representa, si no por su función de comunicar con claridad manteniendo leibilidad así como congruencia con la personalidad y presencia de la marca o producto que representa (Macro y Micro tipografía).


Dicho lo anterior, y si nuestro objetivo es hacer buen uso de la tipografía  en nuestros sitios pero sin tener la limitante de un número reducido de fuentes tipográficas, la mejor opción es el uso de @font-face, una opción de CSS que nos permite definir una familia tipográfica y ligar el texto de nuestro sitio a la fuente que hayamos subido a nuestro servidor, en lugar de ligarlo a las fuentes pre-instaladas de la computadora. Hemos de aclarar que @font-face no es una función nueva en CSS3 y que incluso ya tiene varios años que se se viene utilizando, aunque con el pequeño inconveniente de incompatibilidad con algunos navegadores web, ya que no todos ellos soportaban o reconocían esta función. Sin embargo a partir del 2009 este ha dejado de ser un problema ya que la mayoría de los navegadores como Safari, Chrome, Firefox, Opera y Explorer (e incluso navegadores de dispositivos móviles) son totalmente compatibles con @font-face.

Leer más...

FileReference, para subir y descargar archivos por medio de Flash y AS3.

En este tutorial vamos a aprender un poco acerca de la clase FileReference en Actionscript 3 para Flash y lo aplicaremos a un ejemplo práctico.

FileReference, para subir y descargar archivos por medio de Flash y AS3.

 

La clase FileReference nos permite subir archivos desde nuestra computadora hacia un servidor y viceversa, es decir descargarlos del servidor a nuestra máquina. Cabe mencionar que esta clase cambió para Flash Player 10, ya que  en versiones anteriores cuando el usuario seleccionaba un archivo para subirlo era necesario que se enviara al el servidor y después regresara la información a la aplicación para poder verla o hacer uso de ella. A partir de Flash  Player 10 es posible accesar a los datos del archivo directo desde el player local de la computadora sin la necesidad de mandarlo a un servidor. Para muestra de este ejemplo, da click en el ejemplo de abajo y selecciona cualquier archivo de imagen de tu computadora.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Para hacer uso de esta clase necesitamos accesar a ella mediante siguiente código:

 

import flash.net.FileReference;

 

// Creamos una variable para activar la clase

var archivo:FileReference = new FileReference();

 

// Creamos otra variable que mediante el objeto FileFilter establecerá un filtro para determinar qué tipo de archivo se mostrará o subirá, así como las extensiones que serán permitidas.

var filtroImagen = new FileFilter("Images", "*.jpg;*.jpeg;*.gif;*.png");

 

//El metodo browse tomará el "arreglo" (array) de nuestra variable filtroImagen como su filtro. Podemos también prescindir de esto y dejar que se busquen los archivos sin ningún tipo de filtro.

archivo.browse([filtroImagen]);

 

 

Vamos a armar un ejemplo rápido con pocas líneas para ver como funciona exactamente. Usaremos la imagen de un billete de 100 dólares y remplazaremos la imagen de Benjamin Franklin por alguna que tengas en tu computadora.

Leer más...

Entender que es un Content Management System y no morir en el intento.

En más de una ocasión hemos escuchado el término Content Management System, o sus siglas en inglés CMS, la primer pregunta que nos viene a la mente es, ¿qué es eso?. No te preocupes, es mas difícil pronunciar su nombre que tomarle cariño, comprenderlo y comenzarlo a utilizar.

Content Management System (Sistema de administración de contenido) es una solución web desarrollada para facilitar la actualización de tu sitio, permitiéndote crear secciones, páginas, artículos y contenido utilizando únicamente tu navegador, permitiéndote actualizar tu sitio prácticamente en cualquier computadora y lo mejor de todo, sin requerir conocimientos en HTML y CSS (Hojas de estilo en cascada), ya que el modo en que se actualiza un portal creado con un CMS es similar a la manera en la que redactas un correo electrónico, así de fácil.

 

Se escucha muy bien, pero, ¿Necesito yo un CMS?

 

Los CMS son soluciones muy poderosas y efectivas, pero no todo el mundo las necesita, para saber si nosotros la necesitamos o no, hay que tomar en consideración las siguientes preguntas:

 

¿La información de mi sitio web cambia constantemente?

¿Mi sitio web posee una gran cantidad de páginas?

¿Es mucho el tiempo que necesito para crear nuevas páginas web?

¿Necesito que el contenido que genero se publique en fechas especificas y después sea retirado de la web?

¿Invierto mucho dinero en proveedores que se encarguen de actualizar mi sitio?

Leer más...

Desmitificando HTML5

En estos últimos años, la web ha tenido un crecimiento excepcional, llenándonos de interesantes y nuevas propuestas, tanto creativas como tecnológicas. Uno de los temas más sonados dentro de "Internetz" en este año, ha sido todo lo relacionado con HTML5, pero, ¿de qué trata realmente?

Por medio de éste artículo tratamos de explicar qué es lo que pasa con HTML5, cómo funciona y qué posibilidades nos da, quitando algunos de los mitos más comunes que hay sobre él (digo, ya encarrerado el ratón…).

Leer más...

Parallax con CSS3

Texto por Edgar Parada (@edgarparada).

CSS3 nos permite acceder a diferentes niveles de personalización visual en nuestros sitios web, desde cajas con bordes redondeados, efectos de sombra en el texto, manejo de diferentes tipografías con @font-face, animaciones entre otros.

 

Parallax con CSS3

 

En esta ocasión aprovecharemos la propiedad de multiple-backgrounds para lograr un efecto llamado Parallax, que antes requería de insertar diferentes divs sin ningún sentido semántico para nuestro código HTML pero que hoy es más sencillo gracias a las hojas de estilo.

 

Parallax es una técnica donde se aplica profundidad a los diferentes elementos mediante el uso de capas. Esto permite simular un movimiento de cámara al estilo de las películas sci-fi donde se crean movimientos en el espacio que nos dejan percibir lo lejos que se encuentran las estrellas de nuestro sistema solar.

 

Da click para ver el Resultado final del Efecto Parallax con CSS3. (Al re-escalar la ventana del navegador podrás ver el efecto).

 

 

Selección de Imágenes

 

Para nuestro ejemplo utilizaremos una imagen generada por mi amigo y colega Juan Silva @kidbudda al cuál agradezco su valiosa contribución. Como es solamentente un ejemplo podemos darnos ciertos lujos en cuanto al peso de las imágenes pero ya en un sitio web de producción recomendaría que el tamaño de las mismas no excediera los 100kb.

Leer más...

Swiffy de Flash a HTML5 en segundos.

Texto por @edgarparada

Hace unos días Google dio a conocer una tecnología muy interesante llamada Swiffy (http://swiffy.googlelabs.com/) para convertir archivos SWF de Flash hacia HTML5 y permitiendo con ello reutilizar el mismo contenido en dispositivos que no tengan Flash Player instalado siendo más específicos iPhones y iPads.

 

 

Adobe había mostrado algo similar con Wallaby (http://labs.adobe.com/technologies/wallaby/), sin embargo el acercamiento de ambas tecnologías en un poco diferente. Swiffy es una tecnología que “vive” en los servidores de Google y aprovecha de fuente un archivo SWF para la conversión hacia HTML5 y Wallaby es una aplicación AIR que el desarrollador instala en su computadora y se alimenta de archivos FLA creados con Flash CS5 para convertir a HTML5.

 

¿Por qué la necesidad de convertir Flash a HTML5?

 

Si tienes algo que ver con el diseño y/o desarrollo web seguramente alguna vez has tenido alguna experiencia con estas tecnologías y habrás experimentado en carne propia el vía crucis que es, cuando algo a la mitad del camino no funciona, pero el hecho de tener opciones extra siempre se agradecerá enormemente.

 

En este caso la necesidad de convertir Flash a HTML5 viene a raíz de la ausencia de Flash Player en una plataforma móvil que se ha vuelto muy popular hoy en día, nos referimos a iOS de Apple, sobre la cuál se soportan dispositivos como iPhone, iPad, iPod Touch, etc.

 

Y ¿qué pasa con Android, BlackBerry, Symbian y los demás jugadores? bueno pues todos ellos participan en un proyecto llamado Open Screen Project (http://www.openscreenproject.org/partners/) donde su principal objetivo es llevar la misma experiencia de usuario a través de diferentes dispositivos, tratando de reducir la fragmentación mediante un runtime consistente a todos los ambientes, dicho proyecto ha tenido buenos resultados hasta el momento (http://www.adobe.com/flashplatform/certified_devices/)

 

Google Swifty y Adobe Wallaby

 

La pregunta obligada es ¿Cómo se comparan ambas tecnologías?, más allá de lo que ya mencionamos sobre que Swifty aprovecha el formato SWF y Wallaby necesita una fuente en formato FLA. En principio podríamos ver a Swiffy como un servicio donde dependemos totalmente de Google para decodificar los contenidos del SWF e interpretarlos como algo visible sin Flash Player y Wallaby como una aplicación standalone cuya mayor restricción es que tienen que ser archivos generados con Flash CS5.

Leer más...

Crea sitios optimizados para dispositivos móviles con Media Queries y Dreamweaver CS5.

Diseñar sitios web requiere cada día de mayor atención en detalles y aspectos que hasta hace unos años no eran necesarios. Como todos sabemos hoy en día es muy común navegar y buscar información en internet por medio de dispositivos como teléfonos móviles y tabletas digitales, tipo Xoom, Playbook y iPad por decir algunas.

Leer más...

Página 1 de 6