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.

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.

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.

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.

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.

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.

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?