|
| 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>KOM GODT I GANG MED BRACKETS</title> |
| 8 | + <meta name="description" content="En interaktiv guide til at komme godt i gang med Brackets."> |
| 9 | + <link rel="stylesheet" href="main.css"> |
| 10 | + </head> |
| 11 | + <body> |
| 12 | + |
| 13 | + <h1>KOM GODT I GANG MED BRACKETS</h1> |
| 14 | + <h2>Dette er din guide!</h2> |
| 15 | + |
| 16 | + <!-- |
| 17 | + SKABT MED <3 OG JAVASCRIPT |
| 18 | + --> |
| 19 | + |
| 20 | + <p> |
| 21 | + Velkommen til dette tidlige smugkig på Brackets, en ny open-source editor til den næste generation af |
| 22 | + nettet. Vi er stærke tilhængere af standarder og ønsker at skabe bedre værktøjer til JavaScript, HTML, CSS |
| 23 | + og andre åbne web teknologier. Dette er vores ydmyge begyndelse. |
| 24 | + </p> |
| 25 | + |
| 26 | + <!-- |
| 27 | + HVAD ER BRACKETS? |
| 28 | + --> |
| 29 | + <p> |
| 30 | + <em>Brackets er en anderledes editor.</em> |
| 31 | + En nævneværdig forskel er, at denne editor er skrevet i JavaScript, HTML og CSS. |
| 32 | + Det betyder, at de fleste af jer der bruger Brackets har de nødvendige færdigheder til at ændre og udvide editoren. |
| 33 | + Faktisk bruger vi selv Brackets hver dag for at bygge Brackets. Det har også nogle unikke funktioner såsom Lyn-Redigering, |
| 34 | + Live-Forhåndsvisning og andre som du ikke finder i andre editorer. |
| 35 | + Hvis du vil vide mere om, hvordan du bruger disse funktioner, så læs videre. |
| 36 | + </p> |
| 37 | + |
| 38 | + |
| 39 | + <h2>Vi afprøver et par nye ting</h2> |
| 40 | + |
| 41 | + <!-- |
| 42 | + FORHOLDET MELLEM HTML, CSS OG JAVASCRIPT |
| 43 | + --> |
| 44 | + <h3>Lyn-Redigering til CSS og JavaScript</h3> |
| 45 | + <p> |
| 46 | + Slut med at skifte mellem dokumenter og miste fokuset. Når du redigerer HTML, kan du trykke |
| 47 | + <kbd>Cmd/Ctrl + E</kbd> for at åbne en indlejret editor som viser alt det relevante CSS. |
| 48 | + Tilpas dit CSS, tryk <kbd>ESC</kbd> og du ryger tilbage til dit HTML-dokument, eller du kan efterlade |
| 49 | + CSS-reglerne åbne så de bliver en del af din HTML-editor. Hvis du trykker <kbd>ESC</kbd> udenfor |
| 50 | + en Lyn-Redigerings-editor, bliver de alle klappet sammen. |
| 51 | + </p> |
| 52 | + |
| 53 | + <samp> |
| 54 | + Vil du se hvordan det virker? Placér markøren på <!-- <samp> --> tagget ovenfor og tryk |
| 55 | + <kbd>Cmd/Ctrl + E</kbd>. Du burde se Lyn-Redigering dukke frem, som viser den CSS-regel som |
| 56 | + anvendes på den. Lyn-Redigering virker også med klasse- og id-attributter. |
| 57 | + |
| 58 | + Du kan oprette nye regler på samme måde. Klik i en af <!-- <p> --> tagsne ovenover og tryk |
| 59 | + <kbd>Cmd/Ctrl + E</kbd>. Der er ingen regler til den lige nu, men du kan klikke på "Ny Regel" |
| 60 | + for at oprette en ny regel til <!-- <p> -->. |
| 61 | + </samp> |
| 62 | + |
| 63 | + <a href="screenshots/quick-edit.png"> |
| 64 | + <img alt="Et skærmbillede der viser CSS-Lyn-Redigering" src="screenshots/quick-edit.png" /> |
| 65 | + </a> |
| 66 | + |
| 67 | + <p> |
| 68 | + Du kan også bruge den samme genvej til at redigere andre ting--såsom funktioner i JavaScript, |
| 69 | + farver, og timing-funktioner til animationer--og vi føjer mere til hele tiden. |
| 70 | + Indtil videre kan editorerne ikke indlejres i hinanden, så du kan kun bruge Lyn-Redigering så længe markøren |
| 71 | + er i det primære redigerings-felt. |
| 72 | + </p> |
| 73 | + |
| 74 | + <!-- |
| 75 | + LIVE-FORHÅNDSVISNING |
| 76 | + --> |
| 77 | + <h3>Se ændringer i HTML og CSS live i browseren</h3> |
| 78 | + <p> |
| 79 | + Kender du den "gem/genindlæs"-finte vi har lavet i årevis? Den hvor du laver ændringer i |
| 80 | + din editor, gemmer, skifter over til browseren og så genindlæser for endeligt at se resultatet? |
| 81 | + Med Brackets kan du lægge den finte på hylden. |
| 82 | + </p> |
| 83 | + <p> |
| 84 | + Brackets åbner en <em>direkte forbindelse</em> til din lokale browser og sender HTML og CSS opdateringer imens du |
| 85 | + skriver! Måske gør du allerede noget lignende i dag med browser-baserede værktøjer, men med Brackets |
| 86 | + behøver du ikke kopiere den endelige kode tilbage i editoren. Din kode kører i din browser, |
| 87 | + men bor i din editor! |
| 88 | + </p> |
| 89 | + |
| 90 | + <h3>Live fremhævelse af HTML-elementer og CSS-regler</h3> |
| 91 | + <p> |
| 92 | + Brackets gør det nemt at se dine ændringer i HTML og CSS vil påvirke siden. Når markøren |
| 93 | + er på en CSS-regel, vil Brackets fremhæve alle påvirkede elementer i browseren. Ligeledes, når en |
| 94 | + HTML-fil redigeres, vil Brackets fremhæve de tilsvarende HTML-elementer i browseren. |
| 95 | + </p> |
| 96 | + |
| 97 | + <samp> |
| 98 | + Hvis du har Google Chrome installeret, kan du prøve det af selv. Klik på lyn-ikonet |
| 99 | + i øverste højre hjørne af Brackets vinduet eller tryk <kbd>Cmd/Ctrl + Alt + P</kbd>. Når |
| 100 | + Live-Forhåndsvisning slåes til på et HTML-dokument, kan alle tilknyttede CSS-dokumenter redigeres i realtid. |
| 101 | + Ikonet skifter fra grå til guld når Brackets har etableret en forbindelse til browseren. |
| 102 | + |
| 103 | + Placér nu markøren på <!-- <img> --> tagget ovenover. Bemærk den blå fremhævning der dukker op |
| 104 | + rundt om billedet i Chrome. Tryk derefter på <kbd>Cmd/Ctrl + E</kbd> for at åbne de definerede CSS-regler. |
| 105 | + Prøv at ændre tykkelsen på kanten fra 10px til 20px eller ændre baggrundsfarven |
| 106 | + fra "transparent" til "hotpink". Hvis du har Brackets og browseren til at køre side om side, |
| 107 | + kan du med det samme se dine ændringer blive vist i browseren. Er det ikke sejt? |
| 108 | + </samp> |
| 109 | + |
| 110 | + <p class="note"> |
| 111 | + I dag understøtter Brackets kun Live-Forhåndsvisning for HTML og CSS. Ændringer til JavaScript-filer |
| 112 | + bliver dog genindlæst automatisk når du gemmer. Vi arbejder i øjeblikket på at Live-Forhåndsvisning |
| 113 | + også understøtter JavaScript. Live-Forhåndsvisning er også kun muligt med Google Chrome, men vi håber på |
| 114 | + at bringe denne funktionalitet ud til alle gængse browsere i fremtiden. |
| 115 | + </p> |
| 116 | + |
| 117 | + <h3>Lyn-visning</h3> |
| 118 | + <p> |
| 119 | + For dem af os, som endnu ikke kan alle farvers HEX- eller RGB-kode udenad, gør Brackets |
| 120 | + det hurtigt og nemt at se nøjagtig hvilken farve der er brugt. I enten CSS eller HTML, peger du ganske enkelt på en |
| 121 | + farve-værdi eller gradient og Brackets vil vise et eksempel af den farve/gradient automatisk. Det |
| 122 | + samme gælder for billeder: du peger ganske enkelt på billede-adressen i editoren og der vises en |
| 123 | + miniature-udgave af det billede. |
| 124 | + </p> |
| 125 | + |
| 126 | + <samp> |
| 127 | + Du kan afprøve Lyn-Visning ved at placére markøren på <!-- <body> --> tagget øverst i dette |
| 128 | + dokument og trykke <kbd>Cmd/Ctrl + E</kbd> for at åbne CSS-Lyn-Redigering. Her kan du pege på enhver |
| 129 | + farve-værdi i CSS'en og se farven. Du kan også set det i aktion i gradienter ved at åbne Lyn-Redigering |
| 130 | + på <!-- <html> --> tagget og pege på en af værdierne for baggrundsbilledet. For at se et smugkig af billeder, |
| 131 | + peg på adressen til skærmbilledet, som er indsat tidligere i dette dokument. |
| 132 | + </samp> |
| 133 | + |
| 134 | + <h3>Har du brug for noget andet? Prøv en udvidelse!</h3> |
| 135 | + <p> |
| 136 | + Som tilføjelse til alle de gode sager der er indbygget i Brackets, har vores store og voksende samfund af |
| 137 | + udviklere skabt over hundrede udvidelser, som tilføjer nyttig funktionalitet. Hvis der er |
| 138 | + noget du har brug for, som Brackets ikke tilbyder, er det ret sandsynligt at nogen har lavet en udvidelse til |
| 139 | + det. For at gennemse eller søge i listen af tilgængelige udvidelser, vælg <strong>Filer > Udvidelses-håndtering</strong> |
| 140 | + og klik på fanen "Udvalg". Når du har fundet en udvidelse du kunne tænke dig, klikker du blot på |
| 141 | + knappen "Installér" ud for den. |
| 142 | + </p> |
| 143 | + |
| 144 | + <!-- |
| 145 | + GIV DIN MENING TIL KENDE |
| 146 | + --> |
| 147 | + <h2>Bliv involveret</h2> |
| 148 | + <p> |
| 149 | + Brackets er et open-source projekt. Web-udviklere fra hele verden bidrager til at bygge |
| 150 | + en bedre kode-editor. Endnu flere bygger udvidelser der udvider funktionaliteten af Brackets. |
| 151 | + Fortæl os hvad du synes, del dine idéer eller bidrag direkte til projektet. |
| 152 | + </p> |
| 153 | + <ul> |
| 154 | + <li><a href="http://brackets.io">Brackets.io</a></li> |
| 155 | + <li><a href="http://blog.brackets.io">Brackets team-blog</a></li> |
| 156 | + <li><a href="http://github.com/adobe/brackets">Brackets på GitHub</a></li> |
| 157 | + <li><a href="https://brackets-registry.aboutweb.com">Brackets udvidelses-register</a></li> |
| 158 | + <li><a href="http://github.com/adobe/brackets/wiki">Brackets wiki</a></li> |
| 159 | + <li><a href="http://groups.google.com/group/brackets-dev">Brackets mailingliste for udviklere</a></li> |
| 160 | + <li><a href="https://twitter.com/#!/brackets">@brackets på Twitter</a></li> |
| 161 | + <li>Chat med Brackets-udviklere på IRC i #brackets på Freenode</li> |
| 162 | + </ul> |
| 163 | + |
| 164 | + </body> |
| 165 | +</html> |
| 166 | +<!-- |
| 167 | +
|
| 168 | + [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] |
| 169 | + [:::::::::::::: ::::::::::::::] |
| 170 | + [:::::::::::::: ::::::::::::::] |
| 171 | + [::::::[[[[[[[: :]]]]]]]::::::] |
| 172 | + [:::::[ ]:::::] |
| 173 | + [:::::[ ]:::::] |
| 174 | + [:::::[ ]:::::] |
| 175 | + [:::::[ ]:::::] |
| 176 | + [:::::[ CODE THE WEB ]:::::] |
| 177 | + [:::::[ http://brackets.io ]:::::] |
| 178 | + [:::::[ ]:::::] |
| 179 | + [:::::[ ]:::::] |
| 180 | + [:::::[ ]:::::] |
| 181 | + [:::::[ ]:::::] |
| 182 | + [::::::[[[[[[[: :]]]]]]]::::::] |
| 183 | + [:::::::::::::: ::::::::::::::] |
| 184 | + [:::::::::::::: ::::::::::::::] |
| 185 | + [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] |
| 186 | +
|
| 187 | +--> |
0 commit comments