Crea un Complemento (Add-on) para Firefox

El reto de hoy es simple crear un complemento para Firefox

Firefox te provee de mucha ayuda al momento de crear un complemento (en ingles y español) para tu navegador preferido.

  1. Lo primero registrate una cuenta en firefox esto no solo te da acceso a crearte tu propia coleccion de complmentos sino tambien muchas otras mejoras.
  2. Luego podemos acceder al centro de desarrolladores de complementos

complemento FirefoxElige tu entorno de desarrollo

Firefox te brinda 2 entornos de trabajo en web y escritorio para el manejo de su SDK

El desarrollo de complementos para firefox es my sencillo!

Si sabes HTML, CSS y JavaScript, puedes hacer complementos Firefox.

Selection_033 Selection_034Comencemos con la version web:

Selection_035En este paso sera necesario logearse en Persona que es un login único de Firefox para sus servicios.

para tener algo mas de documentación en ingles

por la segunda opcion bajando el sdk podemos ejecutar

Selection_104

Ejecutando las anteriores lineas estoy arrancando el sdk y generando después la documentación off-line

Pero vamos a acelerar un poco las cosas para lo cual lo haremos via web

Selection_105

Una vez dentro del panel ya tnemos nuestro codigo construido y podemos realizar pruebas. para hacerlo correr

Selection_037Le damos click en el icono con el ojo para el test

Selection_036Con esto ya tenemos instalado nuestro primer complemento de Firefox con datos defecto no hace mucho y aun no esta personalizado (solo es un acceso directo a www.mozilla.org)

Selection_038Vamos a personalizarlo un poco para que lleve nuestro nombre y acceso directo a nuestro blog

Selection_039Como pudieron ver el codigo en este caso esta compuesto en un main.js el cual hemos adecuado, la herramienta tambien te drinda la opcion de descargar tu addon para distribuirlo

Selection_040De momento parece que hemos cumplido en el objetivo planteado. Espero en una próxima oportunidad mostrar algún contenido mas elaborado.

Anuncios

Reproductores multimedia para Drupal 7

html5-videoEn muchos de los proyectos Drupal se tiene la necesidad de implementar la reproducción de videos dentro de nuestro sitio. Una alternativa, la más sencilla, es implementar el módulo Video Embed Field que permite permite incrustar videos desde Youtube y Vimeo o mostrar sus thumbnails para ingresar a la dirección url del video. Sin embargo, cuando se requiere reproducir videos que no estén hospedados en servidores de terceros, es necesario implementar un reproductor multimedia. Drupal 7 tiene varios módulos que permiten realizar esta tarea.

A continuación se muestra los módulos que implementan esta funcionalidad.

MediaElement.js

Sitio oficial: http://mediaelementjs.com/

Módulo Drupal: https://drupal.org/project/mediaelement

Permite implementar el plugin del reproductor HTML5 MediaElement.js en Drupal. MediaElement es un plugin jQuery que permite emplear los tags video y audio usando h.264 para trabajar en los navegadores que no soportan el tag o el códec y proporcionar una consistente interface a través de todos los navegadores.

Video.js

Sitio oficial: http://www.videojs.com/

Módulo Drupal: https://drupal.org/project/videojs

Video.js es un reproductor de video basado en HTML5 con un fallback Flash para navegadores antiguos. Por medio de este reproductor, se puede reproducir videos en casi todos los dispositivos y sistemas operativos, proporcionando los codecs adecuados que serán usados.

JW Player

Sitio oficial: http://www.longtailvideo.com/

Módulo Drupal: https://drupal.org/project/jw_player

Permite implementar el reproductor JW Player en Drupal. Proporciona un formateador de campo para renderear archivos usando JW Player. Usa la versión de video HTML5 del reproductor, el cual es compatible con dispositivos móviles, con lo cual sólo se usa Flash si es necesario.

jPlayer

Sitio oficial: http://www.jplayer.org/

Módulo Drupal: https://drupal.org/project/jplayer

Este módulo permite implementar un reproductor basado en HTML5 que emplea un fallback Flash para navegadores que aún no tienen soporte para HTML5. Permite una presentación por defecto para el reproductor, además integra mediante el módulo Content Construction Kit (CCK) campos de archivo y un estilo de visualización de vistas.

MediaFront

Sitio oficial (Open Standard Media (OSM) Player): http://mediafront.org/osmplayer

Módulo Drupal: http://drupal.org/project/mediafront

El módulo MediaFront es una solución multimedia frontend para Drupal. Emplea un innovativo e intuitiva interface de administración que permite al administrador del sitio personalizar la experiencia multimedia en frontend para sus usuarios sin escribir ningún código. Este módulo proporciona una interfaz con la cual reproductores multimedia de terceros pueden integrarse y utilizar los ajustes preestablecidos para visualizar multimedia.

Si se quiere realizar una comparación entre los distintos reproductores multimedia, de manera que se pueda conocer las características de cada uno de ellos. En la página presentada en html5video.org se muestra una breve comparación entre los reproductores multimedia presentados e incluso algunos más.

Favicon en Web, mobiles y Tablets

En esta oportunidad les hablare de la importancia del favicon (favorit Icon), y de su correcta insercion en páginas Web, dispositivos mobiles y Tablets (tanto android y iOS).

Sin ingresar en lo obsevivo, detallo a continuacion, lo que yo considero, lo básico y lo neceasrio para lograrlo:

HTML

La forma más básica de mostrar un favicon en la mayoria de los navegadores Web, es simplemente colocando un archivo con la extencion .ico en el directorio raiz del servidor.

Ahora, si lo que queremos es asegurarnos la presencia de nuestro favicon, podemos vincularlo en la cabecera de nuestro codigo:

favicon_basic

Referencia: http://es.wikipedia.org/wiki/Favicon

Para iOS 2.0+, Android 2.1

Para los usuarios de dispositivos moviles con versiones de iOS 2 o superior y Android 2.1 o superior podemos utilizar:

favicon_ios

Tanto en iOS y Android el nombre del archivo que debemos utilizar es favicon-152.png, este archivo se autoescala para los distintos dispositivos.

Para dispositivos Apple

Para lograr mostrar un favicon en distinto tamaño, opción muy útil en dispositivos de la Apple debemos utilizar:

favicon_ios2

Formato de imagen y dimenciones:

Para la mayoría de los navegadores alcanza con utilizar una imagen de 16×16 o 32×32 pixeles. En cambio para dispositivos iOS o Android podremos utilizar archivos más complejos con un tamaño de 152x152px.

Tips

Estos tips serviran para cuando no se visualizen los cambios (algo que muy habitualmente suede)

  • Borrar la cache del navegador.
  • Abrir y cerrar (en general funciona con Internet Explorer).
  • Abrir más pestañas si la actual no se refresca.
  • Agregar un parámetro al archivo para forzar la actualización (lo mismo que se suele hacer con archivos CSS)

favicon_parametros

Favicon con animación, imagen y video

Favicon.js, una libreria en JavaScript, está un paso mas adelante, ya que permite diferentes tipos de transiciones y animaciones, compatible con video html5, y live stream de la webcam. Desafortunadamente, no tiene soporte para Safari ni Internet Explorer (por el momento).

favicon_js

Para mas información:

Como una nota final , cabe hacer notar que no es valido favicon.png en la especificación HTML5 de W3C, solo favicon.ico http://www.w3.org/TR/html5/links.html#rel-icon

Tendencia en diseño Web – Flat Design

Flat designEn esta oportunidad me gustaría “hablar” un poco de la tendencia actual que al parecer es “Flat Design”.

¿Qué es Flat Design?

Flat Design es el diseño plano que se aplica a la interfaz de usuario del software como por ejemplo aplicaciones móviles, sitios web, trípticos, sistemas operativos, etc. Desde mi punto de vista (y algunos comentarios que encontré en Internet) este tipo de diseño se popularizo con la nueva versión de Microsoft, el sistema operativo Windows 8 que tiene la interfaz plana bajo el nombre “Modern UI”.

Windows 8

Flat Design consiste en un diseño sin sombras ni relieves tampoco incluye imágenes complejas ni en tres dimensiones, es más bien minimalista y sencillo.

¿Por qué Flat Design?

Hasta hace un tiempo el diseño de sitios, sistemas y aplicaciones mostraban una interfaz “sobrecargada” de información lo cual daba la apariencia que uno tenía que ser un experto para utilizar una herramienta, perdiéndose en un mar de iconos, botones, imágenes y datos.

El diseño Flat Design viene a reemplazar a los anteriores debido a su sencillez para el usuario, quien se siente cómodo con una interfaz limpia y sencilla es decir fácil de usar.

En Flat Design, los puntos importantes a tomar en cuenta son:

  • Combinación de colores: una agradable combinación de colores es fundamental puesto que no se debe exagerar con la cantidad de colores, sin embargo los colores seleccionados deben ser armónicos entre sí.

Mezcla de colores

  • Tipografía: una tipografía visualmente atractiva y moderna ayuda bastante al Flat Design, actualmente tenemos una gran cantidad de fuentes libres en Google Fonts, Adobe Web fonts y Typekit.

Font types

Animación

Todos los puntos anteriores pueden ser alcanzados con la versión “antigua” de HTML es decir XHTML, pero se recomienda usar HTML5 en combinación con CSS3 y JavaScript.

Para finalizar no olvidemos del RWD (Responsive Web Design), el diseño adaptativo está en continuo crecimiento, por lo tanto es importante tomar en cuenta Flat Design para aplicaciones Web y aplicaciones móviles.

Enlaces de interés:

  • Flat UI Pro: colección de recursos gráficos de pago que incluye más recursos que la versión Free y también permite obtener las fuentes PSD. http://designmodo.com/flat/