Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.

Commit 7ecf9e0

Browse files
ingorichteringorichter
committed
Merge branch 'valtlait-patch-1'
2 parents c870793 + c76fbfc commit 7ecf9e0

File tree

2 files changed

+268
-181
lines changed

2 files changed

+268
-181
lines changed

‎samples/fi/Aloitus/index.html‎

Lines changed: 64 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="utf-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
77
<title>BRACKETS-ALOITUSOPAS</title>
8-
<meta name="description" content="Interaktiivinen aloitusopas Brackets-sovellukselle.">
8+
<meta name="description" content="Interaktiivinen aloitusopas Bracketsille.">
99
<link rel="stylesheet" href="main.css">
1010
</head>
1111
<body>
@@ -30,122 +30,133 @@ <h2>Tämä on oppaasi!</h2>
3030
<p>
3131
<em>Brackets on erityyppinen editori.</em>
3232
Yksi huomattava ero on se, että tämä editori on kirjoitettu JavaScriptilla, HTML:llä ja CSS:llä. Tämä
33-
tarkoittaa, että useimmilla Brackets-sovelluksen käyttäjillä on välttämättömät taidot muokata ja
34-
laajentaa editoria. Itse asiassa käytämme Bracketsia joka päivä Bracketsin rakentamiseen. Siinä on myös
35-
joitakin ainutlaatuisia ominaisuuksia, kuten pikamuokkaus, reaaliaikainen esikatselu ja muita, joita et
36-
voi löytää toisista editoreista. Oppiaksesi lisää, kuinka käyttää näitä ominaisuuksia, jatka lukemista.
33+
tarkoittaa, että useimmilla Bracketsin käyttäjillä on välttämättömät taidot muokata ja laajentaa editoria.
34+
Itse asiassa käytämme Bracketsia joka päivä sen itsensä rakentamiseen. Siinä on myös joitakin ainutlaatuisia
35+
ominaisuuksia, kuten pikamuokkaus, reaaliaikainen esikatselu ja muita, joita et voi löytää toisista
36+
editoreista. Oppiaksesi lisää, kuinka käyttää näitä ominaisuuksia, jatka lukemista.
3737
</p>
3838

3939

4040
<h2>Kokeilemme muutamia uusia asioita</h2>
4141

4242
<!--
43-
HTML:N, CSS:N JA JAVASCRIPTIN VÄLINEN SUHDE
43+
HTML:N, CSS:N JA JAVASCRIPTIN SUHDE
4444
-->
4545
<h3>Pikamuokkaus CSS:lle ja JavaScriptille</h3>
4646
<p>
4747
Ei lisää dokumenttien välillä vaihtamista ja tietojen menetyksiä. Kun muokkaat HTML:ää, käytä
4848
<kbd>Cmd/Ctrl + E</kbd> -pikanäppäintä avataksesi nopean sisäeditorin, joka näyttää kaiken tiedostoon
49-
liittyvän CSS:n. Tee muokkaus CSS:ääsi, paina <kbd>ESC</kbd>-näppäintä ja olet takaisin editoimassa
50-
HTML:ää, tai jätä vain CSS-säännöt auki ja ne tulevat osaksi HTML-editoriasi. Jos painat
51-
<kbd>ESC</kbd>-näppäintä nopean sisäeditorin ulkopuolella, ne kaikki sulkeutuvat.
49+
liittyvän CSS:n. Tee muokkaus CSS:ääsi, paina <kbd>ESC</kbd>-näppäintä ja olet takaisin editoimassa HTML:ää,
50+
tai jätä vain CSS-säännöt auki ja ne tulevat osaksi HTML-editoriasi. Jos painat <kbd>ESC</kbd>-näppäintä
51+
nopean sisäeditorin ulkopuolella, ne kaikki sulkeutuvat.
5252
</p>
5353

5454
<samp>
55-
Haluatko nähdä sen toiminnassa? Aseta osoittimesi alla olevan <!-- <samp> --> -tagin päälle ja paina
56-
<kbd>Cmd/Ctrl + E</kbd>. Sinun pitäisi nähdä CSS-pikaeditorin ilmestyvän alapuolelle. Oikealla näet
57-
luettelon CSS-säännöistä, jotka liittyvät tähän tagiin. Yksinkertaisesti vieritä sääntöjä
58-
<kbd>Alt + Up/Down</kbd> -pikanäppäimillä löytääksesi sen säännön, jota haluat muokata.
55+
Haluatko nähdä sen toiminnassa? Aseta kursori alla olevan <!-- <samp> --> -tagin päälle ja paina
56+
<kbd>Cmd/Ctrl + E</kbd>. Sinun pitäisi nähdä CSS-pikaeditorin ilmestyvän alapuolelle näyttäen CSS-säännön,
57+
joka sopii siihen. Pikamuokkaus toimii niin class- kuin id-attribuuttienkin kanssa.
58+
59+
Voit luoda uusia sääntöjä samalla tavalla. Napsauta jotakin <!-- <p> -->-tageista alapuolella ja paina
60+
<kbd>Cmd/Ctrl + E</kbd>. Sillä ei ole sääntöjä juuri nyt, mutta voit napsauttaa Uusi sääntö -painiketta
61+
lisätäksesi uuden säännön <!-- <p> -->-tagille.
5962
</samp>
6063

6164
<a href="screenshots/quick-edit.png">
6265
<img alt="Kuvankaappaus näyttää CSS:n pikamuokkauksen" src="screenshots/quick-edit.png" />
6366
</a>
6467

6568
<p>
66-
Voit käyttää samaa oikotietä JavaScript-koodille näyttääksesi funktion vartalon asettamalla osoittimen
67-
sen funktion nimen päälle, jota kutsut. Toistaiseksi sisäeditorit eivät voi olla sisäkkäin, joten voit
68-
käyttää pikamuokkausta vain, kun osoitin on täyskokoisessa editorissa.
69+
Voit käyttää samaa oikotietä muokataksesi myös muita asioita – kuten funktioita JavaSciptissa, värejä ja
70+
animaatioiden ajoitusfunktioita – ja lisäämme yhä enemmän koko ajan. Toistaiseksi sisäeditorit eivät voi
71+
olla sisäkkäin, joten voit käyttää pikamuokkausta vain, kun osoitin on täyskokoisessa editorissa.
6972
</p>
7073

7174
<!--
7275
ESIKATSELU
7376
-->
74-
<h3>Esikatsele CSS:n muutoksia reaaliaikaisesti selaimessa</h3>
77+
<h3>Esikatsele HTML:n ja CSS:n muutoksia reaaliaikaisesti selaimessa</h3>
7578
<p>
76-
Tiedätkö sen ”tallenna/päivitä-tanssin”, jota olemme tehneet vuosia? Se, missä tehdään muutoksia
77-
editorissa, napsautetaan tallenna, vaihdetaan selaimeen ja sitten päivitetään nähdäksemme tulos?
78-
Brackets-sovelluksessa sinun ei tarvitse harrastaa tätä tanssia.
79+
Tiedätkö sen ”tallenna/päivitä-tanssin”, jota olemme tehneet vuosia? Se, missä tehdään muutoksia editorissa,
80+
napsautetaan tallenna, vaihdetaan selaimeen ja sitten päivitetään nähdäksemme tulos? Bracketsissa sinun ei
81+
tarvitse harrastaa tätä tanssia.
7982
</p>
8083
<p>
81-
Brackets avaa <em>reaaliaikaisen yhteyden</em> paikalliseen selaimeesi ja vie CSS:n päivitykset samalla
82-
kun kirjoitat! Saatat jo olla tehnyt jotain tämän kaltaista selainpohjaisilla työkaluilla, mutta
83-
Bracketsilla ei tarvitse kopioida ja liittää lopullista CSS:ää takaisin editoriin. Koodisi suoritetaan
84+
Brackets avaa <em>reaaliaikaisen yhteyden</em> paikalliseen selaimeesi ja vie HTML:n CSS:n päivitykset
85+
samalla kun kirjoitat! Saatat jo olla tehnyt jotain tämän kaltaista selainpohjaisilla työkaluilla, mutta
86+
Bracketsilla ei tarvitse kopioida ja liittää lopullista koodia takaisin editoriin. Koodisi suoritetaan
8487
selaimessasi, mutta se sijaitsee editorissasi!
8588
</p>
8689

8790
<h3>Korosta HTML-elementtejä ja CSS-sääntöjä reaaliaikaisesti</h3>
8891
<p>
89-
Brackets tekee helpoksi nähdä, kuinka muutoksesi HTML:ssä ja CSS:ssä vaikuttavat sivuun. Kun
90-
osoittimesi on CSS-säännön päällä, Brackets korostaa kaikki vaikuttavat elementit selaimessa. Samoin
91-
kuin muokatessa HTML-tiedostoa, Brackets korostaa vastaavat HTML-elementit selaimessa.
92+
Brackets tekee helpoksi nähdä, kuinka muutoksesi HTML:ssä ja CSS:ssä vaikuttavat sivuun. Kun osoittimesi on
93+
CSS-säännön päällä, Brackets korostaa kaikki vaikuttavat elementit selaimessa. Samoin kuin muokatessa
94+
HTML-tiedostoa, Brackets korostaa vastaavat HTML-elementit selaimessa.
9295
</p>
9396

9497
<samp>
9598
Jos sinulla on Google Chrome asennettuna, voit kokeilla tätä itse. Napsauta salama-kuvaketta
96-
Brackets-ikkunan oikeassa yläkulmassa tai paina <kbd>Cmd/Ctrl + Alt + P</kbd>. Kun esikatselu on
97-
käytössä HTML-dokumentissa, kaikkia linkitettyjä CSS-dokumentteja voidaan muokata reaaliajassa. Kuvake
98-
muuttuu harmaasta kultaiseksi, kun Brackets muodostaa yhteyden selaimeesi.
99+
Brackets-ikkunan oikeassa yläkulmassa tai paina <kbd>Cmd/Ctrl + Alt + P</kbd>. Kun esikatselu on käytössä
100+
HTML-dokumentissa, kaikkia linkitettyjä CSS-dokumentteja voidaan muokata reaaliajassa. Kuvake muuttuu
101+
harmaasta kultaiseksi, kun Brackets muodostaa yhteyden selaimeesi.
99102

100103
Aseta osoittimesi nyt <!-- <img> --> -tagin yläpuolelle. Huomaa sininen korostus, joka ilmestyy kuvan
101-
ympärille Chromessa. Käytä seuraavaksi <kbd>Cmd/Ctrl + E</kbd> -pikanäppäintä avataksesi määritellyt
102-
säännöt. Yritä muuttaa kehyksen kokoa 10 pikselistä 20 pikseliin tai vaihtaa taustaväriä ”transparent”
103-
”hotpink”. Jos sinulla on Brackets ja selaimesi rinta rinnan, näet muutokset
104-
välittömästi selaimessasi. Siistiä, eikö?
104+
ympärille Chromessa. Käytä seuraavaksi <kbd>Cmd/Ctrl + E</kbd> -pikanäppäintä avataksesi määritellyt säännöt.
105+
Yritä muuttaa kehyksen kokoa 10 pikselistä 20 pikseliin tai vaihtaa taustaväriä ”transparent” ”hotpink”.
106+
Jos sinulla on Brackets ja selaimesi rinta rinnan, näet muutokset välittömästi selaimessasi. Siistiä, eikö?
105107
</samp>
106108

107109
<p class="note">
108-
Nykyisin Brackets tukee esikatselua vain CSS:lle. Kuitenkin nykyisessä versiossa muutokset HTML- ja
109-
JavaScript-tiedostoihin päivitetään automaattisesti, kun tallennat tiedoston. Työskentelemme tällä
110-
hetkellä tuodaksemme tuen HTML:lle ja JavaScriptille. Esikatselut ovat myös mahdollisia vain Google
111-
Chromella, mutta toivomme saavamme tämän toiminnallisuuden kaikille merkittäville selaimille
112-
tulevaisuudessa.
110+
Nykyisin Brackets tukee esikatselua vain HTML:lle ja CSS:lle. Kuitenkin nykyisessä versiossa muutokset
111+
JavaScript-tiedostoihin päivitetään automaattisesti tallentaessasi tiedoston. Työskentelemme tällä hetkellä
112+
esikatselun JavaScript-tuen parissa. Esikatselut ovat mahdollisia vain Google Chromella, mutta toivomme
113+
saavamme tämän toiminnallisuuden kaikille merkittäville selaimille tulevaisuudessa.
113114
</p>
114115

115116
<h3>Pikanäkymä</h3>
116117
<p>
117-
Niille meistä, joilla ei ole vielä muistissa värien vastineita HEX- tai RGB-arvoina, Brackets tekee
118-
nopeaksi ja helpoksi nähdä täsmälleen, mitä väriä käyttää. Sekä CSS:ssä että HTML:ssä yksinkertaisesti
119-
osoita mitä tahansa väriarvoa tai liukuväriä ja Brackets näyttää esikatselun tästä
120-
väristä/liukuväristä automaattisesti. Sama tulee kuviin: yksinkertaisesti osoita kuvalinkkiä
121-
Brackets-editorissa ja se näyttää esikatselussa tämän kuvan pikkukuvan.
118+
Niille meistä, joilla ei ole vielä muistissa värien vastineita HEX- tai RGB-arvoina, Brackets tekee nopeaksi
119+
ja helpoksi nähdä täsmälleen, mitä väriä käyttää. Sekä CSS:ssä että HTML:ssä yksinkertaisesti osoita mitä
120+
tahansa väriarvoa tai liukuväriä ja Brackets näyttää esikatselun tästä väristä/liukuväristä automaattisesti.
121+
Sama tulee kuviin: yksinkertaisesti osoita kuvalinkkiä Brackets-editorissa ja se näyttää esikatselussa tämän
122+
kuvan pikkukuvan.
122123
</p>
123124

124125
<samp>
125-
Kokeillaksesi pikanäkymää itse aseta osoittimesi <!-- <body> --> -tagin päälle tämän dokumentin
126-
yläosaan ja paina <kbd>Cmd/Ctrl + E</kbd> avataksesi CSS:n pikaeditorin. Nyt yksinkertaisesti osoita
127-
mitä tahansa väriarvoista CSS:n sisällä. Voit myös nähdä sen toiminnassa liukuvärin kohdalla avaamalla CSS:n
128-
pikaeditorin <!-- <html> --> -tagilla ja osoittamalla mitä tahansa taustakuvan arvoista. Kokeillaksesi
129-
kuvan esikatselua aseta osoittimesi kuvankaappauskuvan päälle, joka on aimemmin tässä asiakirjassa.
126+
Kokeillaksesi pikanäkymää itse aseta osoittimesi <!-- <body> --> -tagin päälle tämän dokumentin yläosaan ja
127+
paina <kbd>Cmd/Ctrl + E</kbd> avataksesi CSS:n pikaeditorin. Nyt yksinkertaisesti osoita mitä tahansa
128+
väriarvoista CSS:n sisällä. Voit myös nähdä sen toiminnassa liukuvärin kohdalla avaamalla CSS:n pikaeditorin
129+
<!-- <html> --> -tagilla ja osoittamalla mitä tahansa taustakuvan arvoista. Kokeillaksesi kuvan esikatselua
130+
aseta osoittimesi kuvankaappauskuvan päälle, joka on aiemmin tässä asiakirjassa.
130131
</samp>
131132

133+
<h3>Tarvitsetko jotakin muuta? Kokeile laajennusta!</h3>
134+
<p>
135+
Sen kaiken hyvän lisäksi, mitä Bracketsiin on rakennettu, suuri ja kasvava laajennuskehittäjien yhteisömme
136+
on tehnyt yli sata laajennusta, jotka lisäävät hyödyllistä toiminnallisuutta. Jos on jotakin, mitä tarvitset
137+
ja jota Brackets ei tarjoa, enemmän kuin todennäköisesti joku on tehnyt laajennuksen siihen. Selataksesi tai
138+
hakeaksesi saatavilla olevien laajennusten luetteloa valitse <strong>Tiedosto &gt; Laajennusten
139+
hallinta</strong> ja napsauta ”Saatavilla”-välilehteä. Kun löydät haluamasi laajennuksen, napsauta vain
140+
”Asenna”-painiketta sen vierestä.
141+
</p>
142+
132143
<!--
133144
ANNA MEIDÄN TIETÄÄ, MITÄ MIELTÄ OLET
134145
-->
135146
<h2>Tule mukaan</h2>
136147
<p>
137-
Brackets on avoimen lähdekoodin projekti. Web-kehittäjät ympäri maailmaa osallistuvat paremman
138-
koodieditorin rakentamiseen. Monet muut rakentavat laajennuksia, jotka laajentavat Bracketsin kykyjä.
139-
Anna meidän tietää, mitä mieltä olet. Jaa ideasi tai osallistu suoraan projektiin.
148+
Brackets on avoimen lähdekoodin projekti. Web-kehittäjät ympäri maailmaa osallistuvat paremman koodieditorin
149+
rakentamiseen. Monet muut rakentavat laajennuksia, jotka laajentavat Bracketsin kykyjä. Anna meidän tietää,
150+
mitä mieltä olet. Jaa ideasi tai osallistu suoraan projektiin.
140151
</p>
141152
<ul>
142153
<li><a href="http://brackets.io">Brackets.io</a></li>
143154
<li><a href="http://blog.brackets.io">Brackets-tiimin blogi</a></li>
144155
<li><a href="http://github.com/adobe/brackets">Brackets GitHubissa</a></li>
145-
<li><a href="https://github.com/adobe/brackets/wiki/Brackets-Extensions">Brackets-laajennukset</a></li>
156+
<li><a href="https://github.com/adobe/brackets/wiki/Brackets-Extensions">Brackets-laajennusten rekisteri</a></li>
146157
<li><a href="http://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
147158
<li><a href="http://groups.google.com/group/brackets-dev">Brackets-kehittäjien postituslista</a></li>
148-
<li><a href="https://twitter.com/#!/brackets">@Brackets Twitterissä</a></li>
159+
<li><a href="https://twitter.com/#!/brackets">@brackets Twitterissä</a></li>
149160
<li>Chattaa Brackets-kehittäjien kanssa IRC:ssä #bracketsissa Freenode-palvelussa</li>
150161
</ul>
151162

0 commit comments

Comments
 (0)