Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. UX
Webdesign

Cómo mostrar notificaciones de actualizaciones en la pestaña del navegador

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Los sitios web y aplicaciones web que frecuentemente actualizan contenido tienen que buscar una forma de llamar la atención de los usuarios para señalarles las actualizaciones, particularmente donde los usuarios podrían haberse alejado de la pestaña donde está activo el sitio web o aplicación.

Hay un par de patrones comunes que verás en el escenario real. Sitios sociales tales como Facebook, Twitter, y Linkedin, que potencialmente reciben nuevo contenido en cuestión de segundos, insertan el número relevante en el título de la página indicando la cantidad de nuevas actualizaciones en la pestaña.  Trello,por otro lado, muestra un pequeño botón rojo en el favicon.

Trello Facebook and Twitter notifications
Notificaciones en Trello, Facebook y Twitter.

En éste tutorial, vamos a replicar ésta forma de diseño de retroalimentación haciendo uso de la pestaña del navegador como medio para notificar a usuarios sobre actualizaciones.  Observa el demo y luego veremos como se hizo.

Usando el Título del Documento

Comenzaremos al agregar el número de nuevas actualizaciones al título de la página, similar a como lo hacen Facebook y Twitter.

En el escenario del mundo real podríamos tomar datos en cualquier número de formas (habla con tu amigo desarrollador). En éste caso, asumiremos que hemos tomado el número de actualizaciones y tenemos la cifra a nuestro alcance para jugar con ella en Javascript.  Parece que por ahora tenemos cero actualizaciones, así que pasaremos ese número a una variable:

Lo siguiente será el núcleo de nuestro código donde alteraremos el título del documento. Primero que nada, añadiremos document.title que tomará nuestro actual título de documento:

Luego crearemos una nueva función para cambiar el string dentro de ese título:

Aquí puedes ver que usamos el operador ++ de Javascript. Para propósitos de nuestra demostración el ++ incrementará nuestro número count (contador) en uno para cada iteración.  Como comenzamos en cero, la próxima iteración regresará 1. Usamos el operador ++ para simular el incremento de número, ya que no tenemos acceso a una API para que nos proporcione un número real.

Posteriormente creamos otra función que ejecutará la función changeTitle():

La función de arriba asume que necesitamos nuevas actualizaciones cada 2000 milisegundos (2 segundos). Nuestra función, changeTitle(), se ejecutará continuamente en el intervalo. Nosotros ejecutamos ésta función tan pronto como se recargue la página.

El primer método es muy simple. Tomamos el número y lo pasamos al título. Puedes cambiar los corchetes que encierran el número de () a [] o {} al cambiarlos en la función changeTitle().

Usando el Favicon.

Ahora vamos a intentar el segundo planteamiento, que es cambiar el favicon como lo hace la aplicación web de Trello. Para ésto, necesitaremos preparar dos variantes de favicon, donde la segunda variante es la alternativa que mostraremos cuando recibamos nuevas actualizaciones.

Comenzamos con enlazar el primer favicon dentro del documento.

Luego establecemos la ruta del nuevo favicon en una variable Javascript.

Al igual que en el primer planteamiento, también crearemos dos funciones:

La primera función, changeFavicon(), remplazará nuestro favicon inicial con el del botón rojo. La segunda función, newUpdate(), ejecutará la primera función dentro del tiempo especificado.

¡ Parece que hay algo nuevo para ver!

El segundo planteamiento no es tan complicado como pudiera parecer en primera instancia; es, de hecho, más sencillo que el primero donde actualizamos el string del título de la página. Adicionalmente, podemos poner mas creatividad en el favicon alterno. Por ejemplo, pudimos hacer el botón rojo intermitente en lugar de que estuviera quieto (ahora ten cuidado...), o quizá cambia el color y el ícono entero del favicon.

Nota: Chrome no soporta faviconos con GIFs animados.

Usando Favico.js

Para finalizar, ahora utilizaremos una librería Javascript llamada Favico.js,desarrollada por Miroslav Magda. La librería proporciona un útil API con muchísimas opciones para alterar el favicon tal como mostrar un botón junto con el número de actualizaciones.

Para comenzar, usando Javascript, definimos una nueva instancia de Favico que define la posición del botón, la animación, el color de fondo así como el color del texto.

Posteriormente añadimos un par de funciones para ejecutar ésta nueva instancia y finalmente mostramos el botón en el favicon.

El código en algo se asemeja al primer método que utilizamos previamente. Comenzamos creando la función que simulará el número de actualizaciones que mostraremos en el botón.  La segunda función, showFaviconBadge(), es para insertar el número en el botón y mostrar el botón en el favicon. La última función newUpdate() ejecutará la segunda función en el intervalo de tiempo especificado, dándonos una sensación de recibir nuevas actualizaciones.

Conclusión

En éste tutorial, hemos usado la pestaña del navegador como un medio de notificación para los usuarios. Hemos replicado métodos que son comúnmente aplicados en sitios web populares como Facebook, Twitter, y Trello junto con la evaluación de sus limitaciones.

De nuevo, probablemente tendrás que efectuar un par de cambios para que encaje en tu aplicación web particular, pero los ejemplos que viste aquí ¡te ayudarán a tener un gran inicio!.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.