Tutorial Brackets Web Editor: Que és y como instalarlo

[ice 1065]

 

 

Buenas noches a todos y todas, vamos a explicar que es Brackets, para que sirve y cómo instalarlo

 

 

¿Qué es Brackets y para qué sirve?

 

Básicamente Brackets es un "editor de texto" que es Open Source desarrollado por Adobe y es orientado a la programación web, en el cuál podemos editar código HTML, CSS y Javascript entre varios otros similares.

En éste proyecto tenemos muchas facilidades a la hora de manejar codigo web.

Lamentablemente sólamente soporta Chrome y Chromium a la hora de poder visualizar en tiempo real nuestras modificaciones en nuestro código. No funciona con Firefox.

 

 

PreInstalación:

 

Quiero avisar que éste proyecto se encuentra en el repositorio AUR, asi que en el caso que no tengan instalado yaourt, pueden darse una vuelta por el how-to de como instalarlo aquí.

 

 

Instalación:

 

1 - Abrimos nuestra terminal que usamos habitualmente (en mi caso Tilda) y escribimos lo siguiente:

 

$ yaourt -S brackets-bin

 

 

* Elegí ésta versión porque es la más actual y se encuentra en desarrollo constante y además es estable.

* Comenzará el proceso al cuál ya sabemos como continuar en la instalación.

 

2 - Finalizada la instalación, ya queda disponible para utilizarlo, como verán en cinnamon ya queda listo.

 

 

3 - Una vez que lo ejecutemos nos dará una pantalla de Bienvenida con la cuál nos aparecerá el código fuente y pueden tocar en el "rayo" que está a la derecha para que ejecute chrome o chromium y verán la pantalla de Bienvenida también.

 

 

 

* Como comenté anteriormente, no funciona la vista previa con Firefox, esperemos que para futuros updates habiliten ésa función para los que utilizamos otros navegadores.

 

 

 

Ahora para los que quieran instalar en otras distribuciones como ser en mi caso en Debian SID deben hacer lo siguiente:

 

1 - Vamos a la TTY (uso la tty, porque en Debian no tengo Entorno Gráfico, pero para que vean que también pueden instalarlo desde su terminal favorita.)

 

2 - En el caso que no tengan instalado wget, lo van a instalar (como root o usando sudo):

 

# apt-get install wget

 

 

3 - Luego ejecutamos (como usuario común)

 

$ wget https://github.com/adobe/brackets/releases/download/release-1.7/Brackets.Release.1.7.64-bit.deb

 

 

4 - Ahora instalan el paquete así (no muestro screen porque estoy con debian 32-Bits):

 

# dpkg -i Brackets.Release.1.7.64-bit.deb

 

5 - Listo! Ahora tienen Brackets instalado y listo para funcionar!

 

NOTA: En la web oficial en Other Downloads, tienen el paquete para compilar si lo desean y obviamente el source también.

 

A continuación dejo un video tutorial por las dudas:

 

 

 

Espero que les haya servido!

 

 

¿Qué utilizamos?

Programa: Brackets.

Instalación: Desde AUR.

Terminal: Tilda.

Distribución: Archlinux - Debian SID.

[JPablos 871]

Buenas tardes @ice, acabo de instalar Brackets. Gracias, tiene muy buena pinta.

 

Instalado sobre Ubuntu 16.04 , vía PPA:

 

sudo add-apt-repository ppa:webupd8team/brackets

sudo aptitude update

sudo aptitude upgrade

sudo aptitude install brackets

 

Un saludo

 

JPablos

 

[JPablos 871]

Buenas tardes, algunas de mis experiencias con Brackets.

 

Spoiler

 

 

 

 

 

 

Primero, editar el  archivo de "Atajos de teclado" (keymap.json).

 

Se abre desde la interface Brackets

Spoiler

Inglés:
		Debug -->  Open user keymap

Español:
		Desarrollo -->  Abrir archivo de atajos de teclado

 

 

 

 

 

Si el archivo no existe, la acción anterior lo crea.

 

Aparecerá algo como esto:

 

Spoiler

Formato del archivo
{
    "overrides": {
        "<key>": "<command-id>"
        [, "<key>": "<command-id>"]
    }
}

 

 

 

 

 

Los atajos de teclado son:

 

Spoiler

Import Mac key bindings from Sublime Text

    "overrides": {
        "Cmd-Shift-L":     "edit.splitSelIntoLines",
        "Ctrl-Shift-Up":   "edit.addCursorToPrevLine",
        "Ctrl-Shift-Down": "edit.addCursorToNextLine",
        "Cmd-Shift-D":     "edit.duplicate",
        "Ctrl-Shift-K":    "edit.deletelines",
        "Cmd-L":           "edit.selectLine",
        "Cmd-D":           "cmd.addNextMatch",
        "Cmd-Opt-1":       "cmd.splitViewNone",
        "Cmd-Opt-2":       "cmd.splitViewVertical",
        "Cmd-Opt-Shift-2": "cmd.splitViewHorizontal",
        "Ctrl-G":          "navigate.gotoLine",
        "Cmd-Opt-Right":   "navigate.nextDoc",
        "Cmd-Opt-Left":    "navigate.prevDoc",
        "Cmd-R":           "navigate.gotoDefinition",
        "Cmd-P":           "navigate.quickOpen"
    }

Import Windows/Linux key bindings from Sublime Text

    "overrides": {
        "Ctrl-Shift-L":  "edit.splitSelIntoLines",
        "Ctrl-Alt-Up":   "edit.addCursorToPrevLine",
        "Ctrl-Alt-Down": "edit.addCursorToNextLine",
        "Ctrl-Shift-D":  "edit.duplicate",
        "Ctrl-Shift-K":  "edit.deletelines",
        "Ctrl-D":        "cmd.addNextMatch",
        "Alt-Shift-1":   "cmd.splitViewNone",
        "Alt-Shift-2":   "cmd.splitViewVertical",
        "Alt-Shift-8":   "cmd.splitViewHorizontal",
        "Ctrl-R":        "navigate.gotoDefinition",
        "Ctrl-P":        "navigate.quickOpen"
    }

 

 

 

 

 

Editar según nuestra distribución, en mi caso Linux, quedando así el archivo editado:

 

Spoiler

Para Linux/Windows

    "overrides": {
        "Ctrl-Shift-L":  "edit.splitSelIntoLines",
        "Ctrl-Alt-Up":   "edit.addCursorToPrevLine",
        "Ctrl-Alt-Down": "edit.addCursorToNextLine",
        "Ctrl-Shift-D":  "edit.duplicate",
        "Ctrl-Shift-K":  "edit.deletelines",
        "Ctrl-D":        "cmd.addNextMatch",
        "Alt-Shift-1":   "cmd.splitViewNone",
        "Alt-Shift-2":   "cmd.splitViewVertical",
        "Alt-Shift-8":   "cmd.splitViewHorizontal",
        "Ctrl-R":        "navigate.gotoDefinition",
        "Ctrl-P":        "navigate.quickOpen"
    }

 

 

 

 

 

Ahora, tenemos Atajos de Teclado.

 

Todo lo anterior para ambientar el uso de una extensión para Brackets que genera el famoso "Lorem Ipsum", muy útil cuando estamos maquetando el diseño de alguna página Web que queramos crear.

 

Segundo. Instalar la extensión:

 

Spoiler

How to Install

    Select Brackets > File > Extension Manager...
    Search for this extension.
    Click on the Install button.

Cómo Instalar

	Brackets > Archivo > Gestionar Extensiones
	Buscar la extensión "Lorem Ipsum"
	Hacer clic en el botón Instalar

 

 

 

 

 

Asignar un Atajo de Teclado:

 

Spoiler

For example, if you want the shortcut Alt-Shift-X to generate Lorem Ipsum, type the following entry into the overrides section of your keyboardmap.json file:

		"Alt-Shift-X": "lkcampbell.loremIpsum"

Por ejemplo, sí quiere asignar la combinación de teclas Alt-Shift-X para generar Lorem Ipsum, escriba lo siguiente en la sección "overrides" de su archivo 
keyboardmap.json (el archivo de los atajos de teclado descrito arriba)

		"Alt-Shift-X": "lkcampbell.loremIpsum"

En mi caso, sobre-escribí la combinación "Ctrl-Shift-L":  "edit.splitSelIntoLines", quedando así:

		"Ctrl-Shift-L": "lkcampbell.loremIpsum"

 

 

 

 

 

Para usar la extensión, escribir " lorem" e inmediatamente presionar la combinación de teclas que hayamos asignado.

 

Espero sea de utilidad

 

Un saludo

 

JPablos

Editado Abril 12, 2017 por JPablos
Editar presentación de contenido

[ice 1065]

Buenas tardes [mention=710]ice[/mention], acabo de instalar Brackets. Gracias, tiene muy buena pinta.
 
Instalado sobre Ubuntu 16.04 , vía PPA:
 

sudo add-apt-repository ppa:webupd8team/bracketssudo aptitude updatesudo aptitude upgradesudo aptitude install brackets

 
Un saludo
 
JPablos
 

Gracias por la alternativa del repositorio. Pero personalmente prefiero mil veces descargar desde la web oficial y no depender de un tercer.
Igualmente gracias.

Enviado desde mi MotoG3 mediante Tapatalk