Imagina un mundo mágico en el que los diseñadores web y las resoluciones de dispositivos en los que se desplegara la página convivan en armonía, una sola web para gobernarnos a todos, una web que se adapte a las necesidades del medio en el que se requiere desplegar esa página, ¿suena como una utopía verdad? pues esa utopía que asemeja una visión loca, tomada de la mente hippie de John Lenon es una realidad, bienvenido al mundo del diseño responsivo.

Tabla nutrimental, lo que vamos a encontrar.

Vamos a iniciar con los pasos necesarios para crear sitios web que se adapten mágicamente a las necesidades y tamaños del navegador (Spoiler Alert), en realidad no es magia, se trata de la utilización inteligente de un layout fluido, CSS3 y Media Queries (termina Spoiler Alert). Con esto podrás tener una sola página que se adapte en diseño y tamaño a cualquier dispositivo en el que se este consultando sin importar si es una lap, computadora de escritorio, smartphone o tablet.

Vamos a comenzar con las bases, la formula mágica que nos va a servir para olvidarnos de utilizar esas medidas en pixeles al momento de hacer nuestras hojas de estilo y nos ayude a declarar todas las medidas en Ems; pero antes de comenzar resolveremos dos dudas importantiosas que para estos momentos debes de tener (o por lo menos eso espero XD) ¿qué es un Em? Y ¿Para que me sirve tener mis medidas en Ems?

Así es que decidiste aventurarte a crear tu sitio web móvil, ¡muy bien! con el mercado de los Smarthphones a la alza, la gente que navega por internet en estos dispositivos va creciendo hasta tomar cifras importantes, así que es tiempo de comenzar a pensar en crear una versión optimizada para dispositivos móviles de nuestra pagina web.

¿Qué es lo que vamos a aprender en este articulo?, aquí no vamos a encontrar un tutorial que te de el código para copiar, pegar y tener lista tu pagina web, no señor, este artículo va mas allá, es una serie de tips y consejos que te van a servir para tener una mejor visión de lo que necesitas para crear tu sitio web, ya que aquí encontrarás consejos a seguir que harán de tu sitio web móvil un mejor lugar, un lugar feliz al que todos podrán acceder rápidamente desde su celular.

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?

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.

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.

Haz scroll con la barra para ver el efecto

Básicamente y para los que no lo tienen tan claro, Parallax (hablando de videojuegos, sitios web y gráficos en computadora) es el efecto visual que se crea al desplazar varios planos de una composición a velocidades o intervalos distintos creando la sensación de profundidad. Es un recurso muy utilizado sobre todo en juegos de video, ya sea de plataformas tipo Playstation o Xbox hasta en juegos sencillos hechos en Flash para computadora o dispositivos móviles. Si nos ponemos a investigar un poco este concepto nos podemos remitir a épocas lejanas donde los astrónomos utilizaban este principio para medir las distancias a nivel astronómico como estrellas, galaxias y otros cuerpos celestes.

Últimamente Parallax se ha vuelto muy popular en el diseño de sitios, principalmente por el efecto 3D y la ilusión de profundidad que imprime al diseño, esto mediante varias opciones que pueden ser Flash, CSS3, HTML5, Javascript y/o jQuery. En unas cuantas líneas de código y con 4 imágenes vamos a hacer un ejemplo de como lograrlo, ya dependerá de ti y de tu creatividad, la manera en que puedas aplicar (o mejorar) esto a tu sitio web. Incluso te dejaremos algunas ligas muy interesantes de varios sitios que lo implementan muy bien dentro de su desarrollo.

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.