1- <!DOCTYPE html>
2- < html >
3-
4- < head >
5- < meta charset ="utf-8 ">
6- < meta http-equiv ="X-UA-Compatible " content ="IE=edge,chrome=1 ">
7- < title > ERSTE SCHRITTE MIT BRACKETS</ title >
8- < meta name ="description " content ="Ein interaktiver Wegweiser für die ersten Schritte mit Brackets. ">
9- < link rel ="stylesheet " href ="main.css ">
10- </ head >
11- < body >
12-
13- < h1 > ERSTE SCHRITTE MIT BRACKETS</ h1 >
14- < h2 > Dies ist Ihre Anleitung!</ h2 >
15-
16- <!--
17- GEMACHT MIT <3 UND JAVASCRIPT
18- -->
19-
20- < p >
21- Willkommen zu einer super-frühen Vorschau von Brackets, einem neuen Open-Source-Editor für die
22- nächste Generation des Webs. Wir sind große Fans von Standards und wollen bessere Tools für
23- JavaScript, HTML und CSS sowie verwandte offene Web-Technologien bauen. Dies ist erst
24- der Anfang von dem, was wir noch vorhaben.
25- </ p >
26-
27- <!--
28- WAS IST BRACKETS?
29- -->
30- < p >
31- < em > Sie sehen sich eine frühe Version von Brackets an.</ em >
32- Auf vielerlei Weise ist Brackets eine andere Art Editor. Ein namhafter Unterschied ist, dass
33- dieser Editor in JavaScript geschrieben ist. Während Brackets also noch nicht ganz bereit für
34- den tagtäglichen Einsatz sein mag, verwenden wir es jeden Tag, um Brackets zu bauen.
35- </ p >
36-
37-
38- < h2 > Wir probieren ein paar neue Dinge aus</ h2 >
39-
40- <!--
41- DIE BEZIEHUNG VON HTML, CSS UND JAVASCRIPT
42- -->
43- < h3 > Schnelles Bearbeiten für CSS und JavaScript</ h3 >
44- < p >
45- Beim Bearbeiten von HTML verwenden Sie das Tastenkürzel < kbd > Cmd/Strg + E</ kbd > , um einen schnellen
46- Inline-Editor zu öffnen, der alles relevante CSS anzeigt. Ändern Sie eine Kleinigkeit in Ihrem CSS,
47- drücken Sie < kbd > ESC</ kbd > und Sie sind zurück im HTML-Editor. Oder lassen Sie die CSS-Regeln offen
48- und sie werden Teil Ihres HTML-Editors. Falls Sie < kbd > ESC</ kbd > außerhalb eines Schnell-Editors
49- drücken, schließen sich alle. Kein Umschalten mehr zwischen Dokumenten – so verlieren Sie nie den
50- Überblick.
51- </ p >
52-
53- < samp >
54- Sie wollen es in Aktion sehen? Setzen Sie Ihren Cursor auf den <!-- <samp> --> -Tag oben und drücken
55- Sie < kbd > Cmd/Strg + E</ kbd > . Sie sollten oben einen CSS-Schnell-Editor erscheinen sehen. Rechts sehen
56- Sie eine Liste der CSS-Regeln, die sich auf diesen Tag beziehen. Scrollen Sie einfach mit
57- < kbd > Alt + Oben/Unten</ kbd > durch die Regeln, um die zu finden, die Sie bearbeiten wollen.
58- </ samp >
59-
60- < a href ="screenshots/brackets-quick-edit.png ">
61- < img alt ="Ein Screenshot, der schnelles Bearbeiten von CSS zeigt " src ="screenshots/brackets-quick-edit.png " />
62- </ a >
63-
64- <!--
65- LIVE-VORSCHAU
66- -->
67- < h3 > Vorschau auf CSS-Änderungen live im Browser anzeigen</ h3 >
68- < p >
69- Sie kennen den „Speichern/Neu laden“-Tanz, den wir seit Jahren aufführen? Der, in dem Sie
70- Änderungen in Ihrem Editor machen, Speichern drücken, zum Browser schalten und dann neu laden,
71- um schließlich das Ergebnis zu sehen? Mit Brackets müssen Sie diesen Tanz nicht aufführen.
72- </ p >
73- < p >
74- Brackets öffnet eine < em > Live-Verbindung</ em > zu Ihrem lokalen Browser und sendet CSS-Updates,
75- während Sie tippen! Eventuell tun Sie etwas Ähnliches bereits heute mit browserbasierten Tools,
76- doch mit Brackets ist kein Kopieren und Einfügen des endgültigen CSS-Codes im Editor mehr nötig.
77- Ihr Code läuft im Browser, aber lebt in Ihrem Editor!
78- </ p >
79-
80- < samp >
81- Falls Sie Google Chrome installiert haben, können Sie das selbst ausprobieren. Klicken Sie auf
82- das Blitz-Symbol oben rechts oder drücken Sie < kbd > Cmd/Strg + Alt + P</ kbd > . Wenn die Live-Vorschau
83- für ein HTML-Dokument eingeschaltet ist, können alle verknüpften CSS-Dokumente in Echtzeit bearbeitet
84- werden. Das Symbol ändert sich von grau nach golden, wenn Brackets eine Verbindung zu Ihrem Browser
85- herstellt.
86-
87- Platzieren Sie Ihren Cursor jetzt auf den <!-- <img> --> -Tag oben und verwenden Sie
88- < kbd > Cmd/Strg + E</ kbd > , um die definierten CSS-Regeln zu öffnen. Versuchen Sie die Stärke des
89- Rahmens von 1px auf 10px zu ändern, oder die Hintergrundfarbe von "dimgray" auf "hotpink".
90- Falls Sie Brackets und Ihren Browser nebeneinander laufen haben, sehen Sie die Änderungen sofort
91- in Ihrem Browser umgesetzt. Cool, was?
92- </ samp >
93-
94- < p class ="note ">
95- Derzeit unterstützt Brackets die Live-Vorschau nur für CSS. Wir werden Unterstützung der Live-Vorschau
96- für HTML und JavaScript in einer künftigen Ausgabe hinzufügen. Live-Vorschauen sind heute nur mit
97- Google Chrome möglich. Wir möchten diese Funktionalität zu allen wichtigen Browsern hinzufügen,
98- und wir freuen uns darauf, mit den Herstellern zusammenzuarbeiten.
99- </ p >
100-
101- <!--
102- LASSEN SIE UNS WISSEN, WAS SIE DENKEN
103- -->
104- < h2 > Machen Sie mit</ h2 >
105- < p >
106- Brackets ist ein Open-Source-Projekt. Web-Entwickler rund um die Welt helfen mit, einen besseren
107- Code-Editor zu bauen. Lassen Sie uns wissen, was Sie denken, teilen Sie Ihre Ideen oder tragen
108- Sie direkt zu dem Projekt bei.
109- </ p >
110- < ul >
111- < li > < a href ="http://brackets.io "> Brackets.io</ a > </ li >
112- < li > < a href ="http://blog.brackets.io "> Brackets Team-Blog</ a > </ li >
113- < li > < a href ="http://github.com/adobe/brackets "> Brackets auf GitHub</ a > </ li >
114- < li > < a href ="http://github.com/adobe/brackets/wiki "> Brackets Wiki</ a > </ li >
115- < li > < a href ="http://groups.google.com/group/brackets-dev "> Brackets Developer-Mailingliste</ a > </ li >
116- < li > < a href ="https://twitter.com/#!/brackets "> @Brackets auf Twitter</ a > </ li >
117- < li > Mit Brackets-Entwicklern per IRC in #brackets auf Freenode chatten</ li >
118- </ ul >
119-
120- </ body >
121- </ html >
122- <!--
123-
124- [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
125- [:::::::::::::: ::::::::::::::]
126- [:::::::::::::: ::::::::::::::]
127- [::::::[[[[[[[: :]]]]]]]::::::]
128- [:::::[ ]:::::]
129- [:::::[ ]:::::]
130- [:::::[ ]:::::]
131- [:::::[ ]:::::]
132- [:::::[ CODE THE WEB ]:::::]
133- [:::::[ http://brackets.io ]:::::]
134- [:::::[ ]:::::]
135- [:::::[ ]:::::]
136- [:::::[ ]:::::]
137- [:::::[ ]:::::]
138- [::::::[[[[[[[: :]]]]]]]::::::]
139- [:::::::::::::: ::::::::::::::]
140- [:::::::::::::: ::::::::::::::]
141- [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
142-
1+ <!DOCTYPE html>
2+ < html >
3+
4+ < head >
5+ < meta charset ="utf-8 ">
6+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge,chrome=1 ">
7+ < title > ERSTE SCHRITTE MIT BRACKETS</ title >
8+ < meta name ="description " content ="Ein interaktiver Wegweiser für die ersten Schritte mit Brackets. ">
9+ < link rel ="stylesheet " href ="main.css ">
10+ </ head >
11+ < body >
12+
13+ < h1 > ERSTE SCHRITTE MIT BRACKETS</ h1 >
14+ < h2 > Dies ist Ihre Anleitung!</ h2 >
15+
16+ <!--
17+ GEMACHT MIT <3 UND JAVASCRIPT
18+ -->
19+
20+ < p >
21+ Willkommen zu einer frühen Vorschau von Brackets, einem neuen Open-Source-Editor für die
22+ nächste Generation des Webs. Wir sind große Fans von Standards und wollen bessere Tools für
23+ JavaScript, HTML und CSS sowie verwandte offene Web-Technologien bauen. Dies ist erst
24+ der Anfang von dem, was wir noch vorhaben.
25+ </ p >
26+
27+ <!--
28+ WAS IST BRACKETS?
29+ -->
30+ < p >
31+ < em > Sie sehen sich eine frühe Version von Brackets an.</ em >
32+ Auf vielerlei Weise ist Brackets eine andere Art Editor. Ein namhafter Unterschied ist, dass
33+ dieser Editor in JavaScript geschrieben ist. Während Brackets also noch nicht ganz bereit für
34+ den tagtäglichen Einsatz sein mag, verwenden wir es jeden Tag, um Brackets zu bauen.
35+ </ p >
36+
37+
38+ < h2 > Wir probieren ein paar neue Dinge aus</ h2 >
39+
40+ <!--
41+ DIE BEZIEHUNG VON HTML, CSS UND JAVASCRIPT
42+ -->
43+ < h3 > Schnelles Bearbeiten für CSS und JavaScript</ h3 >
44+ < p >
45+ Beim Bearbeiten von HTML verwenden Sie das Tastenkürzel < kbd > Cmd/Strg + E</ kbd > , um einen schnellen
46+ Inline-Editor zu öffnen, der alles relevante CSS anzeigt. Ändern Sie eine Kleinigkeit in Ihrem CSS,
47+ drücken Sie < kbd > ESC</ kbd > und Sie sind zurück im HTML-Editor. Oder lassen Sie die CSS-Regeln offen
48+ und sie werden Teil Ihres HTML-Editors. Falls Sie < kbd > ESC</ kbd > außerhalb eines Schnell-Editors
49+ drücken, schließen sich alle. Kein Umschalten mehr zwischen Dokumenten – so verlieren Sie nie den
50+ Überblick.
51+ </ p >
52+
53+ < samp >
54+ Sie wollen es in Aktion sehen? Setzen Sie Ihren Cursor auf den <!-- <samp> --> -Tag oben und drücken
55+ Sie < kbd > Cmd/Strg + E</ kbd > . Sie sollten oben einen CSS-Schnell-Editor erscheinen sehen. Rechts sehen
56+ Sie eine Liste der CSS-Regeln, die sich auf diesen Tag beziehen. Scrollen Sie einfach mit
57+ < kbd > Alt + Oben/Unten</ kbd > durch die Regeln, um die zu finden, die Sie bearbeiten wollen.
58+ </ samp >
59+
60+ < a href ="screenshots/brackets-quick-edit.png ">
61+ < img alt ="Ein Screenshot, der schnelles Bearbeiten von CSS zeigt " src ="screenshots/brackets-quick-edit.png " />
62+ </ a >
63+
64+ < p >
65+ Sie können das gleiche Tastenkürzel in JavaScript-Code verwenden, um den Rumpf einer Funktion
66+ anzuzeigen, die Sie aufrufen, indem Sie den Cursor auf den Funktionsnamen setzen. Oder öffnen Sie
67+ einen grafischen Farbwähler, indem Sie den Cursor auf irgendeine Farbe im Hex-, RGB- oder HSL-Format
68+ setzen. Im Augenblick können Inline-Editoren nicht verschachtelt werden. Sie können das
69+ Schnelle Bearbeiten also nur nutzen, solange der Cursor sich in einem „Vollgröße“-Editor befindet.
70+ </ p >
71+
72+ <!--
73+ LIVE-VORSCHAU
74+ -->
75+ < h3 > Vorschau auf CSS-Änderungen live im Browser anzeigen</ h3 >
76+ < p >
77+ Sie kennen den „Speichern/Neu laden“-Tanz, den wir seit Jahren aufführen? Der, in dem Sie
78+ Änderungen in Ihrem Editor machen, Speichern drücken, zum Browser schalten und dann neu laden,
79+ um schließlich das Ergebnis zu sehen? Mit Brackets müssen Sie diesen Tanz nicht aufführen.
80+ </ p >
81+ < p >
82+ Brackets öffnet eine < em > Live-Verbindung</ em > zu Ihrem lokalen Browser und sendet CSS-Updates,
83+ während Sie tippen! Eventuell tun Sie etwas Ähnliches bereits heute mit browserbasierten Tools,
84+ doch mit Brackets ist kein Kopieren und Einfügen des endgültigen CSS-Codes im Editor mehr nötig.
85+ Ihr Code läuft im Browser, aber lebt in Ihrem Editor!
86+ </ p >
87+
88+ < samp >
89+ Falls Sie Google Chrome installiert haben, können Sie das selbst ausprobieren. Klicken Sie auf
90+ das Blitz-Symbol oben rechts oder drücken Sie < kbd > Cmd/Strg + Alt + P</ kbd > . Wenn die Live-Vorschau
91+ für ein HTML-Dokument eingeschaltet ist, können alle verknüpften CSS-Dokumente in Echtzeit bearbeitet
92+ werden. Das Symbol ändert sich von grau nach golden, wenn Brackets eine Verbindung zu Ihrem Browser
93+ herstellt.
94+
95+ Platzieren Sie Ihren Cursor jetzt auf den <!-- <img> --> -Tag oben und verwenden Sie
96+ < kbd > Cmd/Strg + E</ kbd > , um die definierten CSS-Regeln zu öffnen. Versuchen Sie die Stärke des
97+ Rahmens von 1px auf 10px zu ändern, oder die Hintergrundfarbe von "dimgray" auf "hotpink".
98+ Falls Sie Brackets und Ihren Browser nebeneinander laufen haben, sehen Sie die Änderungen sofort
99+ in Ihrem Browser umgesetzt. Cool, was?
100+ </ samp >
101+
102+ < p class ="note ">
103+ Derzeit unterstützt Brackets die Live-Vorschau nur für CSS. Wir arbeiten derzeit an der Unterstützung
104+ der Live-Vorschau für HTML und JavaScript. In der aktuellen Version werden Änderungen an HTML- oder
105+ JavaScript-Dateien automatisch neu geladen, wenn Sie speichern. Live-Vorschauen sind nur mit
106+ Google Chrome möglich. Wir möchten diese Funktionalität zu allen wichtigen Browsern hinzufügen,
107+ und wir freuen uns darauf, mit den Herstellern zusammenzuarbeiten, um das zu erreichen.
108+ </ p >
109+
110+ <!--
111+ LASSEN SIE UNS WISSEN, WAS SIE DENKEN
112+ -->
113+ < h2 > Machen Sie mit</ h2 >
114+ < p >
115+ Brackets ist ein Open-Source-Projekt. Web-Entwickler rund um die Welt helfen mit, einen besseren
116+ Code-Editor zu bauen. Lassen Sie uns wissen, was Sie denken, teilen Sie Ihre Ideen oder tragen
117+ Sie direkt zu dem Projekt bei.
118+ </ p >
119+ < ul >
120+ < li > < a href ="http://brackets.io "> Brackets.io</ a > </ li >
121+ < li > < a href ="http://blog.brackets.io "> Brackets Team-Blog</ a > </ li >
122+ < li > < a href ="http://github.com/adobe/brackets "> Brackets auf GitHub</ a > </ li >
123+ < li > < a href ="http://github.com/adobe/brackets/wiki "> Brackets Wiki</ a > </ li >
124+ < li > < a href ="http://groups.google.com/group/brackets-dev "> Brackets Developer-Mailingliste</ a > </ li >
125+ < li > < a href ="https://twitter.com/#!/brackets "> @Brackets auf Twitter</ a > </ li >
126+ < li > Mit Brackets-Entwicklern per IRC in #brackets auf Freenode chatten</ li >
127+ </ ul >
128+
129+ </ body >
130+ </ html >
131+ <!--
132+
133+ [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
134+ [:::::::::::::: ::::::::::::::]
135+ [:::::::::::::: ::::::::::::::]
136+ [::::::[[[[[[[: :]]]]]]]::::::]
137+ [:::::[ ]:::::]
138+ [:::::[ ]:::::]
139+ [:::::[ ]:::::]
140+ [:::::[ ]:::::]
141+ [:::::[ CODE THE WEB ]:::::]
142+ [:::::[ http://brackets.io ]:::::]
143+ [:::::[ ]:::::]
144+ [:::::[ ]:::::]
145+ [:::::[ ]:::::]
146+ [:::::[ ]:::::]
147+ [::::::[[[[[[[: :]]]]]]]::::::]
148+ [:::::::::::::: ::::::::::::::]
149+ [:::::::::::::: ::::::::::::::]
150+ [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
151+
143152-->
0 commit comments