Brackets, eine kurze Übersicht

Was ist Brackets

Brackets ist ein Editor der von Adobe für "Edge Animate" als "Edge Code" entwickelt wurde. Das Programm wird als OpenSource-Projekt zum Download angeboten. Die Oberfläche von Brackets wurde mit HTML5, CSS3 und Javascript erstellt. Im Programm enthalten ist eine eigene Entwicklungsumgebung mit Wartungs- und Debugging-Tools. Es ist also ein Programm, das sich aus sich selbst weiterentwickeln lässt.

Erweiterungen

Bei der Installation von Brackets wird ein einfacher, übersichtlicher Editor erstellt. Viele Möglichkeiten und erwünschte "Tools" können über die "Erweiterungen Verwaltung" auf einfache Weise dazu ghebaut werden. Erweiterungen lassen sich aktivieren/deaktivieren oder ganz entfernen.

Verfügbar sind über 100 verschiedene Addons. Vom einfachen "Loremipsum" bis zu "Database" oder "DirectFTP". Einige praktische, von mir getestete Addons:

• Brackets Color Picker: https://github.com/mikailcolak/brackets-color-picker
• Brackets CSS Color Preview: https://github.com/cmgddd/Brackets-css-color-preview
• More CSS Code-Hints: https://github.com/coliff/Brackets-CSSCodeHints
• Standard-Adobe-Erweiterung: http://helpx.adobe.com/creative-cloud/help/extract-for-brackets.html
  Mit dieser Erweiterung lassen sich Positionen und Abstände per Mauklick aus Photoshop-Dateien in CSS-dateien übertragen. Mit etwas Kenntniss dieses Addons, lassen sich gut nutzbare Entwürfe in Photoshp realisieren.

Erweiterungen die nicht für den Einsteigerkurs gedacht sind, aber Brackets enorm aufwerten können:

• Emmet Toolkit for Web-Developpers: https://github.com/emmetio/brackets-emmet
• Beautify,schöne  Quellformatierung im Code: https://github.com/drewhamlett/brackets-beautify

 

Eigene Erweiterungen erstellen

Für unsere Kurse an der EB Zürich, ist es wichtig, Möglichkeiten zur Verfügung zu haben, um HTML-Elemente übersichtlich und mit wenigen Klicks zu erstellen.
Dazu habe ich die Erweiterung "EB Übungen" entwickelt. Sie bietet die wichtigsten Html-Elemente an, die mit einfachem Klick in den Editor geschrieben werden. Zur Installation von EB Übungen

Das Menu "Debug" bietet eine eigene Entwicklungsumgebung für Erweiterungen an, mit der das Programm massgeschneidert an unsere Kurse angepasst werden kann.

Kursunterlagen und Brackets

Vielversprechend erscheint mir die Möglichkeit, Kursunterlagen mit den gewünschten Anleitungen, Code-Snippets und Hilfestellungen anzubieten, die exakt zum Editor Brackets passen.

Ersetzt Brackets den Editor Dreamweaver in unseren Kursen?

Aus meiner Sicht liegen fast alle Vorteile auf der Seite von Brackets:

• Kostenlos
• Einfache Installation
• Grundlegendes Arbeiten mit den HTML-Elementen
• Das Verständniss der HTML-Semantik wird stark gefördert
• Sauberer HTML-Code
• CSS wird direkt im Code-Fenster erzeugt (ohne ablenkende Dialogboxen die an Word erinner)
• Übersicht und schöne Trennung von HTML und CSS

Nachteile beim Verwenden von Brackets anstelle Dreamweaver

• TN die "Dreamweaver lernen" wollen und daher an die EB kommen
• Lernziel, das spätere verwenden von Dreamwever eigenen Möglichkeiten (eher selten gewünscht)