The Virtual Creative Deja volar tu Imaginación!

miércoles, 23 de junio de 2010

Menus Css

. miércoles, 23 de junio de 2010

Revisando el archivo del blog llegaba a dos artículos: un recopilatorio de los mejores ejemplos CSS y otro recopilatorio con tutoriales para crear botones CSS. Para completar el tema de CSS (Cascading Style Sheets), en el blog sixrevisions.com he encontrado una colección de excelentes técnicas de navegación que utilizan CSS para proporcionar a los usuarios una navegación más sencilla y accesible y un aspecto visual más atractivo.

Estas son una gran variedad de técnicas para crear menús en CSS que realmente muestran la capacidad de las hojas de estilo:

The Menu menu



Se cierne sobre un elemento del menú para mostrar un submenú. Si quieres utilizar este menú en tus trabajos simplemente copia el código fuente de su página. Demo en la página.


Pure CSS hover menu


Con esta técnica CSS, podrás crear un menú orientado verticalmente que muestre un submenú cuando un elemento del menú principal está seleccionado. Demo en la página.


Matte CSS Menu

Mate es un simple menú CSS con esquinas redondeadas usando sólo dos pequeñas imágenes de 13styles. Su creador es David Appleyard, que tiene un montón de simples y avanzados menús basados en CSS. Demo en la página.

CSS Blur Menu

Esta técnica de CSS muestra un método de creación de un menús que desdibuja los elementos del menú siguientes cuando se coloca el ratón sobre un elemento. Demo en la página.

CSS Horizontal Menu


Ian Main ofrece una gran cantidad de menús libres con estilo CSS y fácil de implementar en tus proyectos. Demo en la página.


Woody CSS Menu

Woody es un menú CSS que está listo para su uso ya que ha sido probado en: IE6, IE 7, Firefox, Opera, Safari y Chrome. Para modificarlo a tu gusto deberás comprar el archivo .psd. Demo en la página.


Advanced CSS Menu


Creado por Nick La, es uno de los más destacados de la lista de menús, utiliza la propiedad ‘CSS position’ y contiene un completo tutorial para personalizarlo a tu gusto. Demo en la página.


Simple Yellow Tabbed

Este menú es de la página CSS Menu Generator que contiene menús libres de alta calidad, además nos permite modificarlos desde la web y descargar el nuevo código directamente. Demo en la página.


Vimeo-Like Top Navigation


Está basado en el menú CSS de navegación de la web de videos Vimeo. Demo en la página.


Two Level Horizontal Navigation in CSS



Veerle Pieters CSS ofrece un menú y tutorial creado con la propiedad CSS ‘text-indent’. Demo en la página.


Tabbed Navigation Using CSS

Excelente manual para la creación de un módulo de interfaz por pestañas basado puramente en CSS. Dentro de las pestañas de la página puedes conocer las instrucciones sobre la forma de aplicar esta técnica. Demo en la página.

PostHeaderIcon Convierte cualquier web en una aplicación

A raíz de este artículo, Adios Spotify, Hola Grooveshark app en el que su autor explica cómo realizar una aplicación de un servicio web, en este caso de Grooveshark una web para escuchar música en streaming. Me asaltan las dudas de si sería una buena opción tratar a más de uno de estos servicios web (Facebook, Google Calendar, Google Reader, Gmail) como si fueran aplicaciones de escritorio. En contra el problema principal que se nos presenta es el excesivo consumo de memoria RAM de estas webapp.

Mozilla Prism [Win-Mac]

De la mano de Mozilla Labs tenemos a Prism, un sistema capaz de simular aplicaciones de escritorio a partir de aplicaciones web. XULRunner se encarga de ejecutar las páginas XUL que componen el interfaz de Firefox. De igual forma Prism, se encarga de crear plantillas en XUL con nuestras aplicaciones para ejecutarlas posteriormente.


Las aplicaciones creadas pueden:

  • minimizarse en la bandeja del sistema / Dock y la navegación puede ser añadida allí
  • configurarse para mostrar mensajes de estado y ventanas emergentes en la bandeja del sistema / Dock
  • y más…

Fluid [Mac]

Fluid está basado en Webkit y funciona bajo MacOS X. Es sencillo de configurar y los pasos principales para crear una SSB son: introducir la URL, configurar el nombre y opcionalmente el icono, hacer clic en crear y en cuestión de unos pocos minutos el sitio web estará convertido en una aplicación de escritorio Mac y aparecerá en el Dock.

Fluid permite crear aplicaciones de escritorio Cocoa con:

  • icono del Dock
  • barra de menú estándar
  • Growl Notifications
  • Userscripting (Greasemonkey)
  • y más…

Bubbles [Win]

Bubbles es quizás la más sencilla de utilizar ya que es un navegador cuya misión es crear una ventana específica para cada servicio web que quieras utilizar, además de poder añadir cualquier dirección, hay extensiones para: Facebook, Google Calendar, Google Reader, Gmail, Flickr, Meebo

Soporta:

  • icono en la bandeja del sistema y menú contextual
  • notificaciones
  • drag and drop para arrastrar tus fotos a la ventana subirlas automáticamente a tu cuenta de Flickr
  • y más…

Mango [Win]

Aparentemente el choof de la lista al depender de Internet Explorer para crear un fichero XML especial. Mango muestra una barra de menú con las funciones del sitio cargado y una vez configurada nuestra página favorita ofrece la posibilidad de crear un ejecutable independiente que la abrirá según nuestras preferencias.

PostHeaderIcon Estadísticas en tiempo real y mapas



Desde hace varios años utilizo el servicio de estadísticas que ofrece Reinvigorate. Sin duda su gran ventaja frente a Google Analytics es su sistema de estadísticas en tiempo real, sin embargo, desde esta semana después de mucho, mucho tiempo sin novedades podemos probar lo que será su principal mejora, los heatmaps o mapas de calor.

Reinvigorate

Es un completo sistema de estadísticas que lejos de ser una novedad (ya media el tráfico de muchos blogs importantes allá por 2003/2004) se ha mantenido siempre como una promesa o en el mejor de los casos como una segunda opción para medir las estadísticas de nuestros sites. Sin duda su punto fuerte son sus datos en tiempo real, una vez dentro de la plataforma en su página incial tenemos todos los datos de visitantes activos y páginas vistas actualizados al momento, hasta dispone de un programa Snoop, para Mac o Windows que monitoriza en tiempo real los movimientos de nuestra web, pudiendo ver cuándo nos postean un comentario, nos hacen un donativo, recibimos visitas, tenemos un referer… todo esto sin necesidad de entrar a la web para ver las estadísticas y prácticamente sin prestar atención ya que tiene la opción de programar diferentes avisos sonoros.

Otro punto de interés son sus tipos de mediciones:

  • Volúmenes de tráfico: páginas vistas y usuarios por horas, días, meses y años con comparativas.
  • Información sobre visitantes: navegador, plataforma, resolución y zona de procedencia de los usuarios.
  • Información sobre sesión: rutas de navegación que siguen los lectores, página de entrada, recorrido, páginas de salida, rutas más populares y mapa de calor.
  • Palabras clave, habituales referer y procedencia de buscadores: palabras clave, origen, destino o por enlaces desde otros sitios (referals).

Mapas de calor

Desde esta semana están invitando a muchos de sus usuarios a probar la nueva beta que incluye los heatmaps (mapas de calor) como principal novedad. Si bien es cierto que ya existen muchas otras herramientas específicas y posiblemente más desarrolladas para realizar mapas de calor y seguimiento de acciones de usuarios en nuestros sites (ejemplos: Crazy Egg, ClickHeat, clickdensity), es tremendamente útil y sencillo de implementar si ya utilizamos el sistema de estadísticas de Reinvigorate ya que no tendremos que configurar ningún parámetro ni código de seguimiento especial.

Para encontrar esta opción tendremos que ir a: Sesiones > Mapa de calor y asegurarnos que hayamos tenido el código por lo menos 48 horas en nuestra página, ya que es el período mínimo para generar un heatmaps con información relevante. Otras opciones que ofrece son: la posibilidad de ver sólo reflejado la zona de acción de la página, focos de interés y el típico mapa de calor de clics (el que se muestra en la imagen), todos medidos en un período de tiempo que va desde las 48 horas hasta las 4 semanas.

Destacar también de Reinvigorate que según su sistema de medición tendremos siempre un menor número de visitas que utilizando Google Analytics y que en su nueva versión ya no están disponible (por el momento) las estadísticas de usuarios con versiones de: Java o Javascript, Flash y .Net puntos importantes en los que los desarrolladores deberían ponerespecial interés.

0 comentarios:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Publicar un comentario

 
Una idea original de Virtual Creative | Realidad Virtual y Psicologia: Naturaleza Cosmica | Virtual Creative CrEaMoS TuS ReCuRsOs Consultanos!