<title>BRACKETSIN KÄYTÖN ALOITUS</title>

<meta name="description" content="Vuorovaikutteinen aloitusopas Bracketsille.">

<h1>BRACKETSIN KÄYTÖN ALOITUS</h1>

Tervetuloa Bracketsin varhaiseen esiversioon, uuteen avoimen lähdekoodin editoriin seuraavalle web-sukupolvelle.

Olemme suuria standardien faneja ja haluamme rakentaa paremmat työkalut JavaScriptille, HTML:lle ja CSS:lle sekä

niihin liittyville, avoimille web-tekniikoille. Tämä on vaatimaton alkumme.

Yksi huomattava ero on se, että tämä editori on kirjoitettu JavaScriptillä, HTML:llä ja CSS:llä. Se tarkoittaa, että

useilla teistä Bracketsin käyttäjistä on tarvittavat taidot editorin muokkaamiseen ja laajentamiseen. Itse asiassa

käytämme Bracketsia joka päivä sen itsensä kehittämiseen. Bracketsissa on joitakin ainutlaatuisia ominaisuuksia,

kuten pikamuokkaus, reaaliaikainen esikatselu ja muita, joita et voi löytää muista editoreista. Oppiaksesi lisää,

kuinka käyttää näitä ominaisuuksia, jatka lukemista.

Ei lisää dokumenttien välillä vaihtamista tai asiayhteyden hukkaamista. Muokatessasi HTML:ää käytä

<kbd>Cmd/Ctrl + E</kbd> -näppäinyhdistelmää avataksesi upotetun pikaeditorin, joka näyttää kaiken tiedostoon

liittyvän CSS:n. Muokkaa CSS:ääsi, paina <kbd>ESC</kbd>-näppäintä ja olet takaisin editoimassa HTML:ää, tai jätä

CSS-säännöt auki ja ne tulevat osaksi HTML-editoriasi. Jos painat <kbd>ESC</kbd>-näppäintä pikaeditorin ulkopuolella,

ne kaikki sulkeutuvat.

Haluatko nähdä sen toiminnassa? Aseta osoitin alla olevan <!-- <samp> --> -tagin päälle ja paina

<kbd>Cmd/Ctrl + E</kbd>. Sinun pitäisi nähdä CSS-pikaeditorin ilmestyvän alapuolelle näyttäen CSS-säännön, joka

kuuluu sille. Pikamuokkaus toimii niin class- kuin id-attribuuttien kanssa.

Voit luoda uusia sääntöjä samalla tavalla. Napsauta jotakin alaosan <!-- <p> --> -tageista ja paina

<kbd>Cmd/Ctrl + E</kbd>. Sille ei ole sääntöjä juuri nyt, mutta voit napsauttaa Uusi sääntö -painiketta lisätäksesi

uuden säännön <!-- <p> --> -tageille.

Voit käyttää samaa näppäinyhdistelmää muokataksesi myös muita asioita, kuten funktioita JavaScriptissä, värejä ja

animaatioiden ajoitusfunktioita, ja lisäämme koko ajan yhä enemmän ominaisuuksia. Toistaiseksi sisäeditorit eivät voi

Tiedäthän sen ”tallenna/päivitä-tanssin”, jota olemme tehneet vuosia? Se, jossa tehdään muutoksia editorissa,

tallennetaan, vaihdetaan selaimeen ja sitten päivitetään tuloksen näkemiseksi viimein? Bracketsissa sinun ei

Brackets avaa <em>reaaliaikaisen yhteyden</em> paikalliseen selaimeesi ja vie HTML:n CSS:n päivitykset samalla kun

kirjoitat! Saatat jo olla tehnyt jotain tämän kaltaista selainpohjaisilla työkaluilla, mutta Bracketsin kanssa ei

tarvitse kopioida ja liittää lopullista koodia takaisin editoriin. Koodisi suoritetaan selaimessasi, mutta se

sijaitsee editorissasi!

CSS-säännön päällä, Brackets korostaa kaikki sääntöön liittyvät elementit selaimessa. Samoin muokatessa

Jos sinulla on Google Chrome asennettuna, voit kokeilla tätä itse. Napsauta salama-kuvaketta Brackets-ikkunan

oikeassa yläkulmassa tai paina <kbd>Cmd/Ctrl + Alt + P</kbd>. Kun esikatselu on käytössä HTML-dokumentissa, kaikkia

linkitettyjä CSS-dokumentteja voidaan muokata reaaliajassa. Kuvake muuttuu harmaasta kultaiseksi, kun Brackets

muodostaa yhteyden selaimeesi.

Aseta osoittimesi nyt yläpuolella olevan <!-- <img> --> -tagin päälle. Huomaa sininen korostus, joka ilmestyy kuvan

ympärille Chromessa. Käytä seuraavaksi <kbd>Cmd/Ctrl + E</kbd> -näppäinyhdistelmää avataksesi määritellyt

CSS-säännöt. Yritä muuttaa reunaviivan kokoa arvosta 10px arvoon 20px tai vaihtaa taustaväriä arvosta ”transparent”

arvoon ”hotpink”. Jos Brackets ja selaimesi ovat näytöllä vierekkäin, näet muutosten heijastuvan välittömästi

selaimeesi. Siistiä, eikö?

Tällä hetkellä Brackets tukee esikatselua vain HTML:lle ja CSS:lle. Kuitenkin jo nykyisessä versiossa muutokset

esikatselun tuomiseksi JavaScriptille. Esikatselu on myös mahdollista vain Google Chromella, mutta toivomme

pystyvämme tuomaan tämän toiminnon kaikille merkittäville selaimille tulevaisuudessa.

Niille meistä, joilla ei ole vielä muistissa värien vastineita HEX- tai RGB-arvoille, Brackets tekee nopeaksi ja

helpoksi nähdä täsmälleen, mitä väriä ollaan käyttämässä. Sekä CSS:ssä että HTML:ssä osoita yksinkertaisesti mitä

tahansa väriarvoa tai liukuväriä ja Brackets näyttää esikatselun tästä (liuku)väristä automaattisesti. Sama pätee

kuviin: yksinkertaisesti osoita kuvalinkkiä Brackets-editorissa ja se näyttää pikkukuvaesikatselun tästä kuvasta.

Kokeillaksesi pikanäkymää itse aseta osoittimesi tämän dokumentin yläosassa olevan <!-- <body> --> -tagin päälle ja

paina <kbd>Cmd/Ctrl + E</kbd> avataksesi CSS-pikaeditorin. Nyt yksinkertaisesti osoita mitä tahansa väriarvoista

CSS:n yhteydessä. Voit myös nähdä sen toiminnassa liukuvärin kohdalla avaamalla CSS-pikaeditorin <!-- <html> -->

-tagille ja osoittamalla mitä tahansa taustakuvan arvoista. Kokeillaksesi kuvan esikatselua aseta osoittimesi tässä

dokumentissa aiemmin esiintyneen kuvankaappauskuvan päälle.

Sen kaiken hyvän lisäksi, mitä Bracketsiin on rakennettu, suuri ja kasvava laajennuskehittäjien yhteisömme on tehnyt

yli sata laajennusta, jotka lisäävät hyödyllisiä toimintoja. Jos on jotakin, mitä tarvitset ja jota Brackets ei

tarjoa, enemmän kuin todennäköisesti joku on tehnyt laajennuksen siihen. Selataksesi tai hakeaksesi saatavilla

olevien laajennusten luetteloa valitse <strong>Tiedosto &gt; Laajennusten hallinta</strong> ja napsauta ”Saatavilla”-

välilehteä. Kun löydät haluamasi laajennuksen, napsauta vain ”Asenna”-painiketta sen vierestä.

<h3>Projektit Bracketsissa</h3>

<p>

Muokataksesi omaa koodiasi Bracketsia käyttäen voit vain avata tiedostosi sisältävän kansion. Brackets pitää nykyistä

avointa kansiota ”projektina”; Ominaisuudet, kuten koodivihjeet, esikatselu ja pikamuokkaus käyttävät vain tällä

hetkellä avoinna olevan kansion tiedostoja.

</p>

<samp>

Heti kun olet valmis luopumaan tästä näyteprojektista ja muokkaamaan omaa koodiasi, voit käyttää vasemman sivupalkin

pudotusvalikkoa kansioiden vaihtamiseen. Juuri nyt pudotusvalikossa lukee ”Aloitus”. Tämä on tiedoston, jota katsot

juuri nyt, sisältävä kansio. Napsauta pudotusvalikkoa ja valitse ”Avaa kansio…” avataksesi oman kansiosi. Voit

käyttää pudotusvalikkoa myös myöhemmin vaihtaaksesi takaisin kansioihin, jotka olet avannut aiemmin, sisältäen tämän

näyteprojektin.

</samp>

<h2>Lähde mukaan</h2>

kehittämiseen. Paljon enemmän rakennetaan laajennuksia, jotka laajentavat Bracketsin kykyjä. Anna meidän tietää,

mitä ajattelet. Jaa ideasi tai osallistu suoraan projektiin.

<li><a href="https://github.com/adobe/brackets">Brackets GitHubissa</a></li>

<li><a href="https://brackets-registry.aboutweb.com">Brackets-laajennusten rekisteri</a></li>

<li><a href="https://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>

<li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Brackets-kehittäjien postituslista</a></li>

<li><a href="https://twitter.com/brackets">@brackets Twitterissä</a></li>

<li>Chattaa Brackets-kehittäjien kanssa IRC:ssä: <a href="https://webchat.freenode.net/?channels=brackets&uio=d4">#brackets Freenode-palvelussa</a></li>