PDF de programación - desarrollo extension brackets JARADIGITAL

Desarrollo de una extensión para el editor Brackets

jaradigital.es

Desarrollo de una extensión para el editor Brackets

jaradigital.es

ÍNDICE

1) Introducción

1.1) Placehold.it

2) Contexto tecnológico

2.1) Node.js

2.2) GitHub

2.3) Documentación, API, recursos

2.4) Directorios de extensiones instaladas y en desarrollo

3) Herramientas y preparación

3.1) Archivos necesarios

3.2) Recursos de apoyo

3.3) El entorno de desarrollo, Brackets y Chrome como IDE

4) El código

4.1) main.js

4.2) jaraphitstyle.css

4.3) El icono de la toolbar

4.4) El cuadro de diálogo jaraphitdialog.html

4.5) package.json

4.6) LICENSE y README.md

4.7) Resultado final

5) Publicación

5.1) Publicación en GitHub

5.2) Publicación en el repositorio de extensiones de Brackets

6) Despliegue

6.1) Instalación manual

6.2) Instalación desde el Gestor de extensiones

7) Conclusión de resultados obtenidos

8) Bibliografía

Apéndice, Licencia de este documento

1

Desarrollo de una extensión para el editor Brackets

jaradigital.es



1) Introducción

Brackets es un programa multiplataforma editor de código orientado al
desarrollo web. A su vez, está desarrollado usando estas tecnologías,
principalmente javascript.

Originalmente, fue creado por la empresa Adobe, la cual liberó el código.

Hoy en día, el programa se desarrolla bajo la licencia MIT y cuenta con una gran
comunidad de desarrolladores. La licencia MIT permite reutilizar el software así
licenciado tanto para ser software libre como para ser software no libre, permitiendo no
liberar los cambios realizados al programa original. También permite licenciar dichos
cambios con licencia BSD, GPL, u otra cualquiera que sea compatible (es decir, que
cumpla las cláusulas de distribución).

Como editor de código, Brackets tiene la mayoría de características que hoy en día son
casi un estándar: resaltado de código, coloreado de sintaxis, autocompletado,
sugerencias, cursores múltiples, etc.

Sin embargo, hay tres características del programa que merece la pena destacar:

1. Quick Edit. Esta característica permite ver de un solo vistazo todas las

propiedades que pueden afectar a un elemento de un proyecto web. Es decir, se
puede mostrar visualmente todos los .css que afectan dicho elemento.

2. Vista de cambios del proyecto en vivo. Si activamos dicha opción, se abrirá una

ventana del navegador Chrome con el proyecto y cualquier cambio que
realicemos en los archivos se apreciará automáticamente en pantalla. Merece la
pena ver un vídeo sobre esto: Brackets Live Development for HTML & CSS
3. Por último, el que esté desarrollado usando tecnologías web permite gran

flexibilidad y extensibilidad a toda la comunidad de desarrolladores.



2

Desarrollo de una extensión para el editor Brackets

jaradigital.es



1.1) Placehold.it

Con el desarrollo de esta extensión, lo que pretendo es añadir la funcionalidad de la
página web Placehold.it al editor.

Placehold.it es una aplicación web que nos devuelve una imagen del tamaño y
características que le especifiquemos. Las diferentes opciones las especificaremos en
la url de solicitud al servidor.



Este servicio es muy útil cuando estamos desarrollando una web y queremos agregar
imágenes para maquetarla correctamente.

El objetivo con la extensión es que dispongamos de un botón en la barra de
herramientas y una entrada en los menús de Brackets que nos muestre un diálogo
para personalizar y posteriormente insertar la etiqueta img con la url de una imagen
Placehold.it en nuestro documento.



3

Desarrollo de una extensión para el editor Brackets

jaradigital.es



2) Contexto tecnológico

Como ya he mencionado, en el desarrollo de Brackets se usan esencialmente
tecnologías web. Por tanto, para crear extensiones, nos apoyaremos en las mismas
tecnologías:

❏ Javascript
❏ CSS
❏ Html
❏ Bootstrap
❏

jQuery

Apreciamos, pues, que todo desarrollador web puede verse capacitado para ello.



2.1) Node.js

Para nuestro desarrollo esta tecnología es transparente, pero sí
merece la pena hacer un apunte.

Brackets hace uso de una tecnología que hoy en día adquiere cada vez más
protagonismo. Se trata de Node.js.

Node.js permite ejecución de código javascript en la parte del servidor. Además, una
de sus características principales es que está orientado a eventos. Está basado en el
motor de ejecución de javascript V8, que es el que utiliza Google Chrome.

A modo de comentario, su uso es el que permite la previsualización en vivo, de la cual
hemos hablado en el primer capítulo.



2.2) GitHub

GitHub es una plataforma de desarrollo colaborativo de software para
alojar proyectos utilizando el sistema de control de versiones Git. En
GitHub, el código se almacena de forma pública, aunque también se puede
hacer de forma privada, creando una cuenta de pago. Hacemos este inciso
porque nuestra extensión va a ser almacenada y publicada en este
sistema más adelante.



4

Desarrollo de una extensión para el editor Brackets

jaradigital.es



2.3) Documentación, API, recursos

La comunidad de desarrolladores pone a nuestra disposición una amplia gama de
recursos y documentación en forma de wiki, a la cual podremos acceder desde el
repositorio GitHub del proyecto: https://github.com/adobe/brackets/wiki

Debemos hacer un apunte importante. La API de Brackets, como tal, no está
documentada. Deberemos recurrir, por tanto, al código fuente de los módulos del
programa que nos sean necesarios para nuestra extensión. Dicho código fuente está a
nuestra disposición en GitHub: ttps://github.com/adobe/brackets/tree/master/src

Pongamos un ejemplo, nuestra extensión va a hacer uso de los cuadros de diálogo del
programa. Para ver qué método debemos utilizar, accedemos al código fuente de
Dialogs.js (https://github.com/adobe/brackets/blob/master/src/widgets/Dialogs.js) y
podemos ver el método que necesitamos y sus parámetros necesarios:



function showModalDialogUsingTemplate(template, autoDismiss)[…]

Otro recurso que nos servirá mucho es observar el código fuente de otras extensiones
ya escritas. Merece la pena ahora comentar los directorios donde encontrar y
desarrollar las extensiones.



2.4) Directorios de extensiones instaladas y en desarrollo

Tal vez la ruta del directorio del sistema donde se alojan las extensiones cambie entre
diferentes sistemas operativos, pero sí es importante un apunte.

Por una parte, hay un directorio donde se alojarán las extensiones que instalemos y,
por otra, hay un directorio donde es conveniente alojar las extensiones que estemos
desarrollando. Esto es así para evitar que borremos la extensión en desarrollo desde el
gestor de extensiones del programa.

Para ver el directorio de extensiones instaladas, bastará ir al menú de ‘Ayuda’ de
Brackets y seleccionar ‘Abrir carpeta de extensiones’. A modo de ejemplo, en OSX
esto abrirá la carpeta ‘/Users/usuario/Library/Application
Support/Brackets/extensions’.

Por otra parte, la carpeta de desarrollo —que es donde alojaremos nuestro proyecto—
estará en ‘/extensions/dev’ de los archivos fuente de la aplicación. De nuevo, en OSX:
‘/Applications/Brackets.app/Contents/www/extensions/dev’.



5

Desarrollo de una extensión para el editor Brackets

jaradigital.es



3) Herramientas y preparación



3.1) Archivos necesarios



Ya estamos preparados para comenzar a escribir nuestra extensión. Lo primero que
haremos será crear una carpeta en el directorio de extensiones en desarrollo y darle
un nombre acorde a nuestro proyecto.

En nuestro caso la hemos llamado ‘custom-placeholdit-for-brackets.phit’. Dentro
de ésta ya podemos crear los archivos necesarios.

Una extensión necesita únicamente de un archivo ‘main.js’ para funcionar. Otros
archivos que pueden ser necesarios son un ‘README.md’ y un ‘config.json’ para
poder publicarla. No está de más también crear el archivo de licencia, ‘LICENSE’.

Además de los anteriores, nuestra extensión va a necesitar de un css para dar estilos,
un html para el cuadro de diálogo y unas imágenes para el icono de la toolbar. Es
conveniente el uso de carpetas.

Teniendo en consideración todo lo anterior, podemos ver la estructura de la carpeta.



6

Desarrollo de una extensión para el editor Brackets

jaradigital.es



3.2) Recursos de apoyo

Una capacidad que todo desarrollador debe tener es saber usar todos los recursos
disponibles a su disposición. ¿Por qué invertir tiempo y esfuerzo en cosas que
seguramente otros han hecho mejor? O ¿por qué leer una documentación extensa y
pesada si hay información filtrada y esquematizada? Debemos saber aprender del
trabajo de los demás, no sólo del nuestro.

Hago esta pequeña introducción para hablar de algunos recursos que me han sido de
utilidad a la hora de realizar este proyecto.

❏ Placehold.it for Brackets

Se trata de una extensión ya existente que hace uso también del servicio Placehold.it.
No permite la personalización de la imagen que queremos insertar. Con todo, su código
me ha sido de utilidad para entender el funcionamiento de las clases a utilizar. He
decidido, por tanto, darle créditos a su desarrollador en mi ‘README’.

❏ Extension Toolkit

Extensión creada por su desarrollador para facilitar a otros sus propios desarrollos.
Ejemplos comentados de código o accesos directos en los menús a las carpetas de
extensiones y código fuente son algunas de sus funciones.



3.3) El entorno de desarrollo, Brackets y Chrome como IDE

Cada programador se sentirá cómodo trabajando de diferente manera, sin embargo, en
este apartado vamos a proponer un modo que podríamos considerar óptimo a la hora
de escribir una extensión para Brackets.

El entorno se compone de dos ventanas del editor Brackets y una del navegador
Chrome con las herramientas de desarrollo abiertas.



7

Desarrollo de una extensión para e