Desarrollo Web con Sublime Text

Hace bastante tiempo cambie mi IDE de desarrollo (Dreamweaver) por Sublime Text, en su version 2, ahora ya podemos disfrutar de la version 3, pero eso da para escribir otro post con las nuevas caracteristicas y diferencias.

Que es Sublime Text 2?

sublime-text-2-iconSublime Text, en terminos simples, es un editor de texto ligero, pensado desde un inicio en la velocidad, haciendolo uno de los editores de texto más rápido y facil de usar. Además de la velocidad se tiene más de 1000 de plugins adicionales y todas de codigo abierto, con una comunidad de desarrolladores que día a día contribuyen con nuevos plugins.

Sublime Text puede ser utilizado para multiples lenguaje de programacion, no solo para desarrollo Web. Sabemos de sobremanera como trabaja un IDE de desarrollo y las ventajas que ofrece, entonces porque cmabiarnos a Sublime Text, si estamos cómodos con nuestro IDE favorito ? Ahora les comentare las diferencias y ventajas que ofrece Sublime Text.

Saltar a cuelquier lugar

go_toSublime Text tiene una característica llamada “go to anything”, el cual despleiga un panel que permite buscar archivos, metodos, variables, funciones e ir directamente a ciertas líneas de código.

Para acceder a este panel lo único que hay que hacer es precionar la combinación de teclas: CTRL + P, donde se podrá escribir el criterio de búsqueda y a medida que vaya introduciendo el texto, se iran filtrando los resultados de busqueda, esto hace que sea tan rápido encotrar algo, que no se necesita saber de memoria al estructura de carpetas, solo el nombre del archivo.

En la busqueda de archivos, solo hay que hacerlo a travéz de los nombre, pero si queremos buscar dentro de los archvios, existen dos maneras, CTRL + P nos permitira realizar busquedas de funsiones, variables y lineas de codigo especificas, para lo cual utilizaremos el simbolo @ para las funciones, y el simbolo # para las variables y el signo : (dos puntos) para saltar a una determinada línea de código.

Para realizar estas busquedas, no es necesario que el archivo este abierto, por ejemplo si quiere ir a la clase CSS home_page del archivo style.css, se puede teclear lo suguiente en el panel.

goto2Multi cursor

Una de las características que más me llamo la atención y que lo utilizo con relativa frecuencia es esta, la de multi cursor. Ésta característica le permite hacer multiples cambios al mismo tiempo, por ejemplo, si se ha escrito un par de lineas con una variable, pero se desea cambiar el nombre de la variable, en lugar de buscar la funsión de Buscar y Reemplazar se puede utilizar de forma rápida cursor multiselector para buscar la variable y cambiar todos los nombres al mismo tiempo.

multicursorLa combinacion de teclas CTRL + D nos permitira seleccionar una palabra (variable) sobre la que este el cursor, si volvemos a presionar la conbinacion de teclas CTRL + D volvera a buscar la siguiente coincidencia creando dos cursores. Esto hace que sea muy facil para agragar variables o funciones multiples, y lo mejor todo al mismo tiempo.

Gestión de Proyectos

Cuando se trabaja en varios proyectos, la gestión de éstos es fundamental para no cometer el error de modificar archivos que no pertenecen al proyecto. La gestión de proyectos en Sublime Text es muy fácil, se puede agregar carpetas a los nuevos proyectos y Sublime Text va a generar un archivo del proyecto automáticamente para ayudar con la administración.

La mejor parte de la administracion de proyectos con Sublime Text es el cambio rapido que se puede hacer de un proyecto a otro (si se tiene que cambiar de un proyecto a otro, entonces Sublime Text es el indicado).

Para poder utilizarlo, solo se debe presionar la combinacion de teclas CTRL + ALT + P y una ventana listando los proyectos sera mostrado, desde aqui se puede seleccionar cualquier otro proyecto. Cuando se selecciona un nuevo proyecto todos los archivos actuales se cerraran y serán sustituidos con el nuevo proyecto. Pero lo mas interesante es que Sublime Text recordará que archivos estaba abiertos para mostrarlo nuevamente la siguiente vez que se seleccione el proyecto.

proyectosHaciendo nuevamente enfasis en la velocidad de Sublime Text, el cambiar de proyecto esta al alcance de un par de teclas y sin la perdida de los archivos que se estaba editando.

Personalización de cualquier caracterisitica

Si bien la mayoria de los IDE de desarrollo permiten modificar algunas características, en el caso de Sublime Text la personalización avarca a casi cualquier característica.

Se debe acceder a Preference > Setings – Default, donde se encontrará con la enorme lista de valores que se pueden cambiar, entre ellas están el tamaño de la fuente, tipo de letra, la combinación de colores, los números de líneas de pantalla, tamaño de la tabulación, márgenes, etc., etc., etc.

Tabuladores y Espacios

Cuando se trabaja en equipo, una de las cosas importantes es mantener el codigo limpio, de modo que sea mas facil su lectura. Desde el menu se puede seleccionar el numero de espacios que se utilizara.

tabulacionGuardado automatico

Se puede hacer que Sublime Text guarde automáticamente los archivos una vez que realice cambios en ellos (ni vien se pierta el foco), todo lo que se debe hacer es añadir (o modificar) una nueva propiedad en las preferencias de usuario. Por defecto se establece en “false”.

auto_saveAtajos de teclado

Además de tener la capacidad de modificar la forma en que el IDE funcionará, también se puede cambiar los atajos de teclado. Esto se lo hace mediante la navegación a Preferences -> Key Bindings – User .

Paquetes

Como se habia mencionado con anterioridad, una de las razones por las que Sublime Text es elegido, es la enorme cantidad de paquetes que están disponibles. Todos los paquetes que se instalan son como plugins que extienden la funcionalidad de Sublime Text.

El primer paquete que necesita instalar es el “Package Control ” (https://sublime.wbond.net). Este permite instalar / eliminar otros paquetes directamente en el nucleo de Sublime Tex. Con el uso de este plugin, se puede instalar un montón paquetes en cuestión de segundos.

package_controlAlgunos de los paquetes esenciales que se debe utilizar son:

Sublime Prefixr

Este paquete proporciona prefijos de navegador automatico para algunas propiedades CSS, un generador de degradez de color, sombras, bordes de radio, etc,etc.

Sidebar Enchancements

Este paquetes mejora la usabilidad de la barra lateral, dandole más opciones a los nuevos archivos, tambien permite mover archivos, copiar archivos y abrir archivos en otro programa, etc.

Sublime Linter

Este paquete hará resaltar código con errores en el editor de texto. Por ejemplo, si se salta un punto y coma en un archivo PHP, entonces Sublime Linter destacará esta fila para hacer notar que se ha cometido un error en esta línea.

Siblime Linter reconoce errores en los sigueintes lenguajes:

  • C/C++ – lint via cppcheck
  • CoffeeScript – lint via coffee -s -l
  • CSS – lint via built-in csslint, este requiere nodeJs
  • Haml – via haml -c
  • HTML – lint via tidy
  • Java – lint via javac -Xlint
  • Javascript – lint via built en jshint
  • Lua – via luac
  • Objective-J – lint via built-in capp_lint
  • Perl – lint via Perl
  • PHP – via php -l
  • Puppet – via puppet parser validate
  • Python
  • Ruby – via ruby -wc
  • XML – via xmllint

jQuery

Este paquete, viene con varios fragmentos de código listo para obtener ayuda con su desarrollo jQuery.

HTML5

Este paquete de HTML5 viene con fragmentos para el desarrollo HTML más rápido.

SVN

La integración SVN con todas las funciones de Sublime Text 2, proporciona una manera más rápida y mejor para trabajar con Subversion.

Automatic BrowserRefresh-sublime

Si se trabajando en un “montón” de cambios en hojas de estilo CSS (como es mi caso), entonces normalmente se tendría que ver la página, cambiar al IDE, realizar los cambios, guardarlos, volver al navegador, actualizar el navegador (F5) solo para ver los cambios. Con este paquete para Sublime Text 2, se puede saltar del paso de guardar los cambios y automáticamente actualizar el navegador para ver los cambios al instante.

Bootstrap

Este paquete viene con varios fragmentos de codigo lsitos apra ser utilizado concuntamente con este Framework.

Color Picker

Este paquete permite desplegar la apleta de colores.

File Diffs

Este paquete permite comparar archivos que se encuentre abierto (en los tabs).

Este editor de texto, es completamente gratis, sin ningun tipo de restricción ni limite de tiempo de uso, pero si se quiere contribuir con el proyecto, entonces se peude comprar la licencia que vale 59 Dolares.

Sprites, tips y mejores prácticas

No es una técnica nueva, pero el uso de sprites CSS, en lugar de un conjunto de imágenes sueltas/individuales más pequeños, acarreara como beneficio, una mejora en el rendimiento de las páginas web y mantendrá las cosas más organizadas. Veamos algunas de las mejores prácticas y algunas herramientas útiles para el flujo de trabajo con sprites.

new-google-sprite-november-2009

En términos de CSS, sprite es un archivo grande que contiene varias imágenes para ser utilizados en distintos lugares del sitio web, el ahorro de tiempo de carga y espacio web, es muy significativo con el uso de esta técnica.

La característica principal de la utilización en las hojas de estilo CSS la técnica Sprite es que el servidor sólo tiene que enviar un archivo de imagen que contiene todas las imágenes, y no una serie de imágenes individuales – ya través de CSS puede mostrar cualquier pequeño segmento de ese archivo como fondo de un elemento, evitando de esta manera, las peticiones HTTP al servidor por cada una de las imágenes separadas.

Es importante mantener el número de peticiones HTTP de un sitio lo más bajo posible, ya que los navegadores sólo pueden hacer un número limitado de solicitudes de cualquier servidor al mismo tiempo.

35-social-icons-sprites

Combinando las imágenes en un solo archivo, no sólo se va a disminuir considerablemente el número de peticiones HTTP, pero también disminuirá el tamaño total del archivo de las imágenes.

Enfoques

Hay dos enfoques “comunes” al utilizar la técnica sprites: hacerlo antes o después de la creación del sitio.

La primera: comenzando a la par con el proyecto, es decir de abajo hacia arriba, para ello se va a tener que actualizar el CSS para adaptarse, a medida que avanza el proyecto.

La segunda: como alternativa , se puede crear todas las imágenes como archivos separados, lo que hace a la edición de ellos mucho más sencillo. Una vez que el sitio este construido con todas las imágenes por separado, lo que queda es compilar de forma manual, (o utilizar una herramientas para ello)

Basado en mi experiencia, yo recomendaría utilizar siempre la segunda opción, ya que es más escalable.

images

Tips

Mantener todo organizado

Al colocar las imágenes en Photoshop (o cualquier otra herramienta que se este utilizando) es una buena idea tratar de organizar las cosas con la mayor claridad y facilidad posible. el redondeo (en tamaño) de las imágens a ser utilizadas es importante. Otro punto importante es el espacio entre imágenes, se debe intentar una cierta cantidad uniforme de espacio entre imagen e imagen. Esto ayudara al momento de escribir todo el CSS que lo acompaña, ya que no se tendrá que mantener la medida desiguales ni recordar coordenadas complejas.

Esperar hasta el final para definir todas imagenes con la técnica Sprite

Si se pone todas las imágenes en sprite, pasando bastante tiempo escribiendo el CSS y luego se decide/necesita una edición de imágenes, esto puede puede causar serios problemas, sobre todo si las imágenes necesitan un cambio de tamaño o redimencion, lo que significa que se tendrá que invertir mucho tiempo y esfuerzo en volver a definir posiciones.

El nombre de las etiquetas es fundamental

Si se utiliza Photoshop u otros editores de imágenes, entonces es una buena idea para mantener las capas de cada uno de sprites muy bien etiquetados y agrupados, así todo está muy claro si se tienen que modificar más adelante.

Esto debería ser una regla general para la mayoría de los diseñadores. Esto ahorra tiempo en el etiquetado si se ha tenido una hoja de estilos con sprites muy grande.
Por el lado del código CSS las etiquetas son definitivamente necesarias para confirmar que la imagen sprite se está seleccionado por el código/nombre respectivo.

grid

Algunas herramientas que nos van a ayudar al realizar imágenes Sprites:

http://www.spritecow.com/
http://es.spritegen.website-performance.org/
http://spriteme.org/
http://wearekiss.com/spritepad
http://csssprites.com/
http://www.spritebox.net/

enbolivia.com srl. diseña, desarrolla e implementa Plataforma Tecnológica para el Ministerio de Transparencia y Lucha Contra la Corrupción

transparenciaEl Ministerio de Transparencia Institucional y Lucha Contra la Corrupción (MTILCC) ha considerado beneficioso el desarrollo de una Plataforma Tecnológica que coadyuve a prevenir los hechos de corrupción mediante el acceso a la información para ejercer el control social informado y responsable en la gestión pública.

enbolivia.com srl. es la empresa elegida para llevar a cabo el proyecto  “Diseño, desarrollo e implementación de una Plataforma Tecnológica, Aplicaciones e Identificación de Brechas”  esta importante herramienta que será de ayuda para a todos los bolivianos servirá para que las entidades identificadas hagan rendición pública de cuentas y potencien el control social de la gestión pública en el marco de la “Política Nacional de Transparencia y Lucha Contra la Corrupción” contribuyendo a reducir los daños producidos al estado por retrasos y sobre-costos resultantes de actos de corrupción, mediante acciones dirigidas a transparentar los procesos de diseño, licitación, contratación y ejecución de proyectos públicos estratégicos de inversión pública, servicios y adquisiciones.screenshot_transparencia_02

En el diseño de la plataforma se aplicaron las siguientes tecnologías:

  • Symfony,
  • Google Maps,
  • XML,
  • JSON,
  • jQuery,
  • CSS3,
  • Font Awesome,
  • Twitter Bootstrap,
  • AJAX,
  • HTML5,
  • Exportar a Excel,
  • PHP,
  • MySQL.

Además es necesario mencionar que la plataforma cumple les requerimientos técnicos exigidos por el MTILCC y por organismos internacionales, entre dichas requerimientos técnicos están los siguientes:

  • La plataforma cuenta con métodos automatizados de recuperación en el menor tiempo posible, sin pérdida de información
  • Cumple con las mejoras prácticas internacionales (como las iniciativas CosT, EITI y OCDE-DAC)
  • Tiene capacidad de interacción con otros sistemas desarrollados bajo la estrategia de Web Services e integración de procesos.
  • Está basado en la Normativa del MTILCC.
  • Posee sistemas de seguimiento y monitoreo a la ejecución de los proyectos.
  • Cuenta con traducción fija del español al Quechua, Aymara, Guarani e Ingles además de otros idiomas.
  • Versátil interconexión con los sistemas y aplicaciones web del MTILCC.
  • Web georeferencial, multimedia e interactivo.

screenshot_transparencia_01

Comparar archivos y carpetas con Meld

¿Qué es Meld?

Meld es una herramienta gráfica que corre bajo diferentes plataformas (windows, linux, mac) para comparación de archivos y carpetas completas.

Meld compara lo que sea!

Experiencia personal usando Meld

Hace poco había escrito un articulo explicando como podemos comparar archivos o carpetas desde consola de linux. Esta solución es muy practica y ligera, pero ocasionalmente es un tanto dificultosa la forma de poder visualizar las diferencias. A este problema responde Meld de forma adecuada. Ya que nos permite ver las diferencias de forma gráfica. Brindando un servicio de comparación a mi criterio igual o mejor que el comparador de diferencias de netbeans ya que no solo nos permite comparar 2 archivos, sino que también podemos comparar 3 archivos,  as su vez también nos permite comparar carpetas completas utilidad muy practica de la cual e sacado provecho.

Otro punto a tomar en cuenta es que Meld puede ser usado para comparar archivos que estén bajo un manejador de versiones como git, svn

Resumiendo Meld puede:

  • Comparar Archivos
    • Ir directo a la linea que es diferente
  • Comparar carpetas
    • Abrir los archivos para comparar
    • Mostrar solo archivos con diferencias dentro de una carpeta
  • Comparar versiones
  • Mezclar las comparaciones (merge)

A continuación les dejo algunas capturas para que puedan ver la herramienta y les invito a que puedan leer mas acerca de las características de la  herramienta en el sitio oficial de Meld

Capturas de Pantalla

Escritop por: Gaston Nina

Magic Clip, eliminar el fondo de una imagen online

Cuando se trata de edición de imágenes, puede resultar una tarea compleja para quienes no tengan muchos conocimientos en diseño/edición de imágenes, incluso el cambio/retoque más pequeño puede convertirse en toda una tarea titánica para llegar a los resultados deseados.

editores

Para fortuna de muchos, en Internet existen nuevas herramientas, como es el caso caso de Clipping Magic, una interesante herramienta online y gratuita.

La característica principal de este servicio en la nube es eliminar el fondo de una imagen.

clippingmagic

Los pasos para eliminar el fondo de una imagen con Clipping Magic son muy sencillos:

  1. Subimos la imagen que queremos editar, (Drag and Drop) arrastrando y soltando o mediante el botón para seleccionar el archivo.
  2. Marcamos la zona que queremos mantener en la imagen, para ellos utilizamos el Pincel Verde de la herramienta. Solo basta con hacer clic sobre dicha parte y listo.
  3. Ahora con el Pincel Rojo vamos a marcar la parte de la imagen que queremos eliminar, que normalmente seria el fondo de la misma. Veremos como automáticamente dicha zona desaparece dejando solo la parte señalada en el paso anterior.
  4. Guardamos nuestra nueva imagen y la descargamos si estamos satisfechos con los resultados.

Destacar que el uso de esta herramienta es gratis y no requiere ningún registro.

Dirección: Clipping Magic

Penalizaciones comunes de Google

Penalizaciones de Google

Penalizaciones de Google

Las penalizaciones son sanciones que impone Google a los sitios Web que comenten abusos o incurren en “malas” prácticas, estos sitios Web buscan posicionarse en los primeros resultados de búsqueda en base al algoritmo de búsqueda de Google. La probabilidad de aparecer en primeros lugares se basa generalmente en la calidad del contenido pero existen servicios y sitios Web quienes utilizan prácticas deshonestas para forzar su aparición en los resultados de búsqueda.

En los resultados de búsqueda que Google suelen aparecer en primeros lugares sitios Web que no guardan ninguna relación con el contenido buscado, por esta razón Google decidió sancionar a estos sitos borrándolos de los resultados, disminuyendo su PageRank o no tomar en cuenta los enlaces desde la página sancionada.

Existen métodos conocidos por los cuales Google penaliza los sitios Web, entre los más comunes están:

  • Cloaking, se basa en el encubrimiento del contenido real del sitio Web, es decir cuando el robot de Google revisa el contenido de un sitio Web, el sitio esta pre-programado para generar un contenido con varias palabras claves de tal manera de que el sitio quede bien posicionado, pero cuando el sitio Web es visitado por un usuario común el contenido cambia su contenido realizando un engaño al visitante.
  • Doorway, es un subconjunto del Cloaking, esta técnica se basa en generar páginas altamente optimizadas para el robot de Google logrando buenas ubicaciones en los resultados de búsqueda pero cuando el usuario ingresa al sitio es re direccionado a un sitio diferente.
  • Texto oculto, esta técnica se logra por medio de texto que se pone en la página con el mismo color de fondo o en contenedores ocultos, estas palabras son palabras claves del sitio para aumentar el posicionamiento de la página, también se toma en cuenta las palabras que están en contenedores ocultos para el usuario.
  • Página duplicadas, esta práctica es llevada a cabo duplicando distintas páginas a las cuales se accede por direcciones URL distintas, por ejemplo:  http://misitio/noticias y http://misitio/misnoticias, ambas páginas tienen el mismo contenido y su finalidad es promocionar a una tercera página mediante enlaces.
  • Enlaces ocultos, es muy similar al texto oculto, la finalidad es agregar enlaces a otros sitios Web en el contenido ya sea poniendo los enlaces del mismo color de fondo o comentándolas, de esta manera el usuario no ve los enlaces pero el robot de Google sí.
  • Abuso de palabras clave, tambien conocida como “keyword stuffing” es una técnica mediante la cual un sitio Web tiene una gran cantidad de palabras clave en el contenido, pero estas palabras clave no están necesariamente relacionadas con el contenido, su objetivo es ganar posicionamiento.

En el listado anterior se mencionaron algunas de las muchas penalizaciones impuestas por Google, por lo cual su conocimiento es muy importante especialmente para empresas que captan mayores clientes por medio de este motor de búsqueda.

Aca les dejo un enlace con descripción de más penalizaciones.

¡Ya son 300 clientes satisfechos!

Es una gran alegría poder compartir que ya hemos alcanzado los 300 sitios web realizados. Esto ha sido posible gracias al empeño y esfuerzo de todo el equipo de enbolivia.com que siempre muestra el compromiso y la disciplina necesaria para presentar un trabajo de calidad superior y por supuesto la confianza de nuestros clientes que nos permitió destacar y llegar donde nos encontramos ahora.

Cartera de Clientes2013-10-21 10-09-26Hablar de 300 sitios web hechos por enbolivia.com parece tan solo una cifra, pero en realidad significa más que eso, han sido años de arduo trabajo y sacrificio llenos de satisfacciones y experiencias agradables que hemos compartido con nuestro personal y con nuestra clientela. La calidad del trabajo que desarrolla enbolivia.com viene respaldada por la experiencia adquirida durante estos 14 años de trabajo en los cuales hemos evolucionado junto con los requerimientos del mercado.

Enbolivia.com realiza soluciones en Internet para todo tipo de clientes alrededor del mundo, diversas soluciones en Internet, desde el diseño y desarrollo de sitios Web, el desarrollo de sistemas complejos en plataforma Web, sitios Web netamente informativos, integración con las redes sociales, concepto de Sitio Web corporativo, portales de desarrollo y los de negocios e incluso el posicionamiento de sitios Web. La orientación de nuestro trabajo ahora apunta a la integración de la Web a los modelos de negocios de las empresas, los sitios Web que desarrollamos ya no son solo informativos o comerciales, ahora buscan integrarse al concepto del negocio como un todo funcional que permita generar comunicación y beneficios tangibles para nuestros clientes, entrar en el mundo de las redes sociales y el marketing por Internet utilizando tecnologías de punta, incluso para el desarrollo de aplicaciones móviles.

El orgullo y la alegría de saber que contamos con 300 clientes satisfechos en 13 países nos da fuerzas y nos motiva a seguir trabajando de manera incansable. Nuestro compromiso se mantiene intacto, trabajamos y seguiremos trabajando cada día por ser mejores y así ofrecer a nuestros clientes soluciones en Internet de alta calidad.

Google Web Designer

Google no hace mucho ha anunciado el lanzamiento de Web Designer, una nueva herramienta para la creación de anuncios en  HTML5. La compañía dio alguna información escueta de este lanzamiento en junio, pero no tenía nada concreto ni oficial. Web Designer, que Google llama una “herramienta de diseño de calidad profesional”, es ahora oficialmente un beta pública y disponible para su descarga, tanto para Mac y Windows.

google-web-designer2

Google Web Designer es una aplicación web avanzada creada con HTML5 que le permite diseñar y compilar anuncios HTML5 y otros tipos de contenido web mediante una interfaz visual y de código integrada. Con la vista de diseño de Google Web Designer puede crear contenido con herramientas de dibujo, texto y objetos en 3D, y puede, además, animar objetos en una cronología. Una vez que haya terminado de crear su contenido, Google Web Designer genera archivos HTML5, CSS3 y JavaScript limpios y legibles.

google-web-designer

Entre las principales características de esta herramienta, están:

  • Crear animaciones sobre HTML5 con un herramienta de diseño “intuitiva” pero robusto al mismo tiempo.
  • Trabajar automáticamente sobre cualquier plataforma, incluyendo DoubleClick y AdMob
  • Ver y editar el código que se genera detrás de un diseño
  • Reflejar las ediciones de manera automática
  • Actualizaciones de producto de manera automática
  • Acceso gratuito a la descarga y uso de la herramienta

Si realmente se esta interesado, Google a publicado un canal oficial en YouTube, o si lo prefiere puede acceder al Foro. o la página en Google+. Como todavía se trata de una version Beta, Google esta recibiendo mucho feedback con sugerencias y errores encontrados.

google-web-designer1

Es de destacar que ya existían herramientas muy parecidas, como el Adobe Muse, Reflow y otros, que incluyen varias de las características de Google Web Designer, pero al estar esta última, disponible de forma gratuita, obliga a mejorar a la competencia.

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.

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.