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 unser demütiger
24+ Anfang.
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+
143+ -->
0 commit comments