This repository has been archived by the owner on Sep 6, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/release'
- Loading branch information
Showing
18 changed files
with
1,070 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,187 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| <title>KOM GODT I GANG MED BRACKETS</title> | ||
| <meta name="description" content="En interaktiv guide til at komme godt i gang med Brackets."> | ||
| <link rel="stylesheet" href="main.css"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h1>KOM GODT I GANG MED BRACKETS</h1> | ||
| <h2>Dette er din guide!</h2> | ||
|
|
||
| <!-- | ||
| SKABT MED <3 OG JAVASCRIPT | ||
| --> | ||
|
|
||
| <p> | ||
| Velkommen til dette tidlige smugkig på Brackets, en ny open-source editor til den næste generation af | ||
| nettet. Vi er stærke tilhængere af standarder og ønsker at skabe bedre værktøjer til JavaScript, HTML, CSS | ||
| og andre åbne web teknologier. Dette er vores ydmyge begyndelse. | ||
| </p> | ||
|
|
||
| <!-- | ||
| HVAD ER BRACKETS? | ||
| --> | ||
| <p> | ||
| <em>Brackets er en anderledes editor.</em> | ||
| En nævneværdig forskel er, at denne editor er skrevet i JavaScript, HTML og CSS. | ||
| Det betyder, at de fleste af jer der bruger Brackets har de nødvendige færdigheder til at ændre og udvide editoren. | ||
| Faktisk bruger vi selv Brackets hver dag for at bygge Brackets. Det har også nogle unikke funktioner såsom Lyn-Redigering, | ||
| Live-Forhåndsvisning og andre som du ikke finder i andre editorer. | ||
| Hvis du vil vide mere om, hvordan du bruger disse funktioner, så læs videre. | ||
| </p> | ||
|
|
||
|
|
||
| <h2>Vi afprøver et par nye ting</h2> | ||
|
|
||
| <!-- | ||
| FORHOLDET MELLEM HTML, CSS OG JAVASCRIPT | ||
| --> | ||
| <h3>Lyn-Redigering til CSS og JavaScript</h3> | ||
| <p> | ||
| Slut med at skifte mellem dokumenter og miste fokuset. Når du redigerer HTML, kan du trykke | ||
| <kbd>Cmd/Ctrl + E</kbd> for at åbne en indlejret editor som viser alt det relevante CSS. | ||
| Tilpas dit CSS, tryk <kbd>ESC</kbd> og du ryger tilbage til dit HTML-dokument, eller du kan efterlade | ||
| CSS-reglerne åbne så de bliver en del af din HTML-editor. Hvis du trykker <kbd>ESC</kbd> udenfor | ||
| en Lyn-Redigerings-editor, bliver de alle klappet sammen. | ||
| </p> | ||
|
|
||
| <samp> | ||
| Vil du se hvordan det virker? Placér markøren på <!-- <samp> --> tagget ovenfor og tryk | ||
| <kbd>Cmd/Ctrl + E</kbd>. Du burde se Lyn-Redigering dukke frem, som viser den CSS-regel som | ||
| anvendes på den. Lyn-Redigering virker også med klasse- og id-attributter. | ||
|
|
||
| Du kan oprette nye regler på samme måde. Klik i en af <!-- <p> --> tagsne ovenover og tryk | ||
| <kbd>Cmd/Ctrl + E</kbd>. Der er ingen regler til den lige nu, men du kan klikke på "Ny Regel" | ||
| for at oprette en ny regel til <!-- <p> -->. | ||
| </samp> | ||
|
|
||
| <a href="screenshots/quick-edit.png"> | ||
| <img alt="Et skærmbillede der viser CSS-Lyn-Redigering" src="screenshots/quick-edit.png" /> | ||
| </a> | ||
|
|
||
| <p> | ||
| Du kan også bruge den samme genvej til at redigere andre ting--såsom funktioner i JavaScript, | ||
| farver, og timing-funktioner til animationer--og vi føjer mere til hele tiden. | ||
| Indtil videre kan editorerne ikke indlejres i hinanden, så du kan kun bruge Lyn-Redigering så længe markøren | ||
| er i det primære redigerings-felt. | ||
| </p> | ||
|
|
||
| <!-- | ||
| LIVE-FORHÅNDSVISNING | ||
| --> | ||
| <h3>Se ændringer i HTML og CSS live i browseren</h3> | ||
| <p> | ||
| Kender du den "gem/genindlæs"-finte vi har lavet i årevis? Den hvor du laver ændringer i | ||
| din editor, gemmer, skifter over til browseren og så genindlæser for endeligt at se resultatet? | ||
| Med Brackets kan du lægge den finte på hylden. | ||
| </p> | ||
| <p> | ||
| Brackets åbner en <em>direkte forbindelse</em> til din lokale browser og sender HTML og CSS opdateringer imens du | ||
| skriver! Måske gør du allerede noget lignende i dag med browser-baserede værktøjer, men med Brackets | ||
| behøver du ikke kopiere den endelige kode tilbage i editoren. Din kode kører i din browser, | ||
| men bor i din editor! | ||
| </p> | ||
|
|
||
| <h3>Live fremhævelse af HTML-elementer og CSS-regler</h3> | ||
| <p> | ||
| Brackets gør det nemt at se dine ændringer i HTML og CSS vil påvirke siden. Når markøren | ||
| er på en CSS-regel, vil Brackets fremhæve alle påvirkede elementer i browseren. Ligeledes, når en | ||
| HTML-fil redigeres, vil Brackets fremhæve de tilsvarende HTML-elementer i browseren. | ||
| </p> | ||
|
|
||
| <samp> | ||
| Hvis du har Google Chrome installeret, kan du prøve det af selv. Klik på lyn-ikonet | ||
| i øverste højre hjørne af Brackets vinduet eller tryk <kbd>Cmd/Ctrl + Alt + P</kbd>. Når | ||
| Live-Forhåndsvisning slåes til på et HTML-dokument, kan alle tilknyttede CSS-dokumenter redigeres i realtid. | ||
| Ikonet skifter fra grå til guld når Brackets har etableret en forbindelse til browseren. | ||
|
|
||
| Placér nu markøren på <!-- <img> --> tagget ovenover. Bemærk den blå fremhævning der dukker op | ||
| rundt om billedet i Chrome. Tryk derefter på <kbd>Cmd/Ctrl + E</kbd> for at åbne de definerede CSS-regler. | ||
| Prøv at ændre tykkelsen på kanten fra 10px til 20px eller ændre baggrundsfarven | ||
| fra "transparent" til "hotpink". Hvis du har Brackets og browseren til at køre side om side, | ||
| kan du med det samme se dine ændringer blive vist i browseren. Er det ikke sejt? | ||
| </samp> | ||
|
|
||
| <p class="note"> | ||
| I dag understøtter Brackets kun Live-Forhåndsvisning for HTML og CSS. Ændringer til JavaScript-filer | ||
| bliver dog genindlæst automatisk når du gemmer. Vi arbejder i øjeblikket på at Live-Forhåndsvisning | ||
| også understøtter JavaScript. Live-Forhåndsvisning er også kun muligt med Google Chrome, men vi håber på | ||
| at bringe denne funktionalitet ud til alle gængse browsere i fremtiden. | ||
| </p> | ||
|
|
||
| <h3>Lyn-visning</h3> | ||
| <p> | ||
| For dem af os, som endnu ikke kan alle farvers HEX- eller RGB-kode udenad, gør Brackets | ||
| det hurtigt og nemt at se nøjagtig hvilken farve der er brugt. I enten CSS eller HTML, peger du ganske enkelt på en | ||
| farve-værdi eller gradient og Brackets vil vise et eksempel af den farve/gradient automatisk. Det | ||
| samme gælder for billeder: du peger ganske enkelt på billede-adressen i editoren og der vises en | ||
| miniature-udgave af det billede. | ||
| </p> | ||
|
|
||
| <samp> | ||
| Du kan afprøve Lyn-Visning ved at placére markøren på <!-- <body> --> tagget øverst i dette | ||
| dokument og trykke <kbd>Cmd/Ctrl + E</kbd> for at åbne CSS-Lyn-Redigering. Her kan du pege på enhver | ||
| farve-værdi i CSS'en og se farven. Du kan også set det i aktion i gradienter ved at åbne Lyn-Redigering | ||
| på <!-- <html> --> tagget og pege på en af værdierne for baggrundsbilledet. For at se et smugkig af billeder, | ||
| peg på adressen til skærmbilledet, som er indsat tidligere i dette dokument. | ||
| </samp> | ||
|
|
||
| <h3>Har du brug for noget andet? Prøv en udvidelse!</h3> | ||
| <p> | ||
| Som tilføjelse til alle de gode sager der er indbygget i Brackets, har vores store og voksende samfund af | ||
| udviklere skabt over hundrede udvidelser, som tilføjer nyttig funktionalitet. Hvis der er | ||
| noget du har brug for, som Brackets ikke tilbyder, er det ret sandsynligt at nogen har lavet en udvidelse til | ||
| det. For at gennemse eller søge i listen af tilgængelige udvidelser, vælg <strong>Filer > Udvidelses-håndtering</strong> | ||
| og klik på fanen "Udvalg". Når du har fundet en udvidelse du kunne tænke dig, klikker du blot på | ||
| knappen "Installér" ud for den. | ||
| </p> | ||
|
|
||
| <!-- | ||
| GIV DIN MENING TIL KENDE | ||
| --> | ||
| <h2>Bliv involveret</h2> | ||
| <p> | ||
| Brackets er et open-source projekt. Web-udviklere fra hele verden bidrager til at bygge | ||
| en bedre kode-editor. Endnu flere bygger udvidelser der udvider funktionaliteten af Brackets. | ||
| Fortæl os hvad du synes, del dine idéer eller bidrag direkte til projektet. | ||
| </p> | ||
| <ul> | ||
| <li><a href="http://brackets.io">Brackets.io</a></li> | ||
| <li><a href="http://blog.brackets.io">Brackets team-blog</a></li> | ||
| <li><a href="http://github.com/adobe/brackets">Brackets på GitHub</a></li> | ||
| <li><a href="https://brackets-registry.aboutweb.com">Brackets udvidelses-register</a></li> | ||
| <li><a href="http://github.com/adobe/brackets/wiki">Brackets wiki</a></li> | ||
| <li><a href="http://groups.google.com/group/brackets-dev">Brackets mailingliste for udviklere</a></li> | ||
| <li><a href="https://twitter.com/#!/brackets">@brackets på Twitter</a></li> | ||
| <li>Chat med Brackets-udviklere på IRC i #brackets på Freenode</li> | ||
| </ul> | ||
|
|
||
| </body> | ||
| </html> | ||
| <!-- | ||
| [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [::::::[[[[[[[: :]]]]]]]::::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ CODE THE WEB ]:::::] | ||
| [:::::[ http://brackets.io ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [::::::[[[[[[[: :]]]]]]]::::::] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] | ||
| --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| html { | ||
| background-color: #e6e9e9; | ||
| background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
| background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
| -webkit-font-smoothing: antialiased; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0 auto; | ||
| padding: 2em 2em 4em; | ||
| max-width: 800px; | ||
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| font-size: 16px; | ||
| line-height: 1.5em; | ||
| color: #545454; | ||
| background-color: #ffffff; | ||
| box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); | ||
| } | ||
|
|
||
| h1, h2, h3, h4, h5, h6 { | ||
| color: #222; | ||
| font-weight: 600; | ||
| line-height: 1.3em; | ||
| } | ||
|
|
||
| h2 { | ||
| margin-top: 1.3em; | ||
| } | ||
|
|
||
| a { | ||
| color: #0083e8; | ||
| } | ||
|
|
||
| b, strong { | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| samp { | ||
| display: none; | ||
| } | ||
|
|
||
| img { | ||
| -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1; | ||
| animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1; | ||
| background: transparent; | ||
| border: 10px solid rgba(0, 0, 0, 0.12); | ||
| border-radius: 4px; | ||
| display: block; | ||
| margin: 1.3em auto; | ||
| max-width: 95%; | ||
| } | ||
|
|
||
| @-webkit-keyframes colorize { | ||
| 0% { | ||
| -webkit-filter: grayscale(100%); | ||
| } | ||
| 100% { | ||
| -webkit-filter: grayscale(0%); | ||
| } | ||
| } | ||
|
|
||
| @keyframes colorize { | ||
| 0% { | ||
| filter: grayscale(100%); | ||
| } | ||
| 100% { | ||
| filter: grayscale(0%); | ||
| } | ||
| } |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.