samples/fi/Aloitus/index.html - master - githubmirror/brackets

samples/fi/Aloitus/index.html
208 строк12 KB
Prashanth Nethi
Merge pull request #10797 from dvorapa/patch-2
28 мар 2015, 06:40
28 мар 2015, 06:406dabe66
<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>BRACKETSIN KÄYTÖN ALOITUS</title>
        <meta name="description" content="Vuorovaikutteinen aloitusopas Bracketsille.">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        
        <h1>BRACKETSIN KÄYTÖN ALOITUS</h1>
        <h2>Tämä on oppaasi!</h2>
        
        <!--
            TEHTY <3:LLA JA JAVASCRIPTILLÄ
        -->
        
        <p>
            Tervetuloa käyttämään Bracketsia, nykyaikaista, avoimen lähdekoodin koodieditoria, joka ymmärtää
            web-suunnittelun. Se on kevyt mutta silti tehokas: koodieditori, joka sulauttaa visuaaliset työkalut suoraan
            editoriin, niin että saat oikean määrän apua silloin, kun haluat sitä.
        </p>
        
        <!--
            MIKÄ BRACKETS ON?
        -->
        <p>
            <em>Brackets on erityyppinen editori.</em>
            Bracketsissa on joitakin ainutlaatuisia ominaisuuksia, kuten pikamuokkaus, reaaliaikainen esikatselu ja
            muita, joita et voi löytää muista editoreista. Lisäksi Brackets on kirjoitettu JavaSciptillä, HTML:llä ja
            CSS:llä. Se tarkoittaa, että useimmilla Bracketsin käyttäjistä on riittävät taidot muokata ja laajentaa
            editoria. Itse asiassa käytämme Bracketsia joka päivä sen itsensä kehitykseen. Oppiaksesi lisää siitä,
            kuinka käyttää avainominaisuuksia, jatka lukemista.
        </p>
        
        <!--
            ALOITUS OMIEN TIEDOSTOJESI KANSSA
        -->
        
        <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 parhaillaan 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
            kansio, joka sisältää tiedoston, jota tarkastelet juuri nyt. Avaa oma kansiosi napsauttamalla
            pudotusvalikkoa ja valitsemalla ”Avaa kansio…”.
            Voit käyttää pudotusvalikkoa myös myöhemmin vaihtaaksesi takaisin kansioihin, jotka olet avannut aiemmin,
            sisältäen tämän näyteprojektin.
        </samp>
        
        <!--
            YHTEYS HTML:N, CSS:N JA JAVASCRIPTIN VÄLILLÄ
        -->
        <h3>Pikamuokkaus CSS:lle ja JavaScriptille</h3>
        <p>
            Ei lisää dokumenttien välillä vaihtamista tai asiayhteyden hukkaamista. Muokatessasi HTML:ää käytä
            näppäinyhdistelmää <kbd>Cmd/Ctrl + E</kbd> avataksesi upotetun pikaeditorin, joka näyttää kaiken tiedostoon
            liittyvän CSS:n. Muokkaa CSS:ääsi, paina <kbd>ESC</kbd>-näppäintä ja olet taas muokkaamassa HTML:ää, tai
            yksinkertaisesti jätä CSS-säännöt auki, ja niistä tulee osa HTML-editoriasi. Jos painat
            <kbd>ESC</kbd>-näppäintä pikaeditorin ulkopuolella, ne kaikki sulkeutuvat. Pikaeditori löytää myös LESS- ja
            SCSS-tiedostoissa määritellyt säännöt, sisältäen sisäkkäiset sellaiset.
        </p>
        
        <samp>
            Haluatko nähdä sen toiminnassa? Aseta kohdistin alla olevaan <!-- <samp> --> -tägiin ja paina
            <kbd>Cmd/Ctrl + E</kbd>. Sinun pitäisi nähdä, kun CSS-pikaeditori ilmestyy alapuolelle näyttäen CSS-säännön,
            joka pätee siihen. Pikamuokkaus toimii toki myös class- ja id-attribuuttien kanssa. Voit käyttää sitä myös
            LESS- ja SCSS-tiedostojesi kanssa.
            
            Voit luoda uusia sääntöjä samalla tavalla. Napsauta yhtä alaosan <!-- <p> --> -tägeistä 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> --> -tägeille.
        </samp>
        
        <a href="screenshots/quick-edit.png">
            <img alt="Kuvankaappaus, jossa näkyy CSS:n pikamuokkaus" src="screenshots/quick-edit.png" />
        </a>
        
        <p>
            Voit käyttää samaa näppäinyhdistelmää muokataksesi myös muita asioita - kuten JavaScriptin funktioita,
            värejä ja animaatioiden ajoitusfunktioita - ja me lisäämme koko ajan yhä enemmän ominaisuuksia.
        </p>
        <p>
            Toistaiseksi sisäeditorit eivät voi olla sisäkkäin, joten voit käyttää pikamuokkausta vain silloin, kun
            kohdistin on täyskokoisessa editorissa.
        </p>
        
        <!--
            ESIKATSELU
        -->
        <h3>Esikatsele HTML:n ja CSS:n muutoksia reaaliaikaisesti selaimessa</h3>
        <p>
            Tiedäthän sen ”tallenna ja päivitä -tanssin”, jota olemme harrastaneet vuosia? Se, jossa tehdään muutoksia
            editorissa, painetaan tallenna, vaihdetaan selaimeen ja sitten päivitetään, jotta tulos tulee viimein
            näkyville? Bracketsissa sinun ei tarvitse harrastaa tätä tanssia.
        </p>
        <p>
            Brackets avaa <em>reaaliaikaisen yhteyden</em> paikalliseen selaimeesi ja vie HTML:n CSS:n päivitykset
            samalla kun kirjoitat! Saatat olla jo tehnyt jotakin 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!
        </p>
        
        <h3>Korosta HTML-elementtejä ja CSS-sääntöjä reaaliaikaisesti</h3>
        <p>
            Brackets tekee helpoksi nähdä, kuinka muutoksesi HTML:ssä ja CSS:ssä vaikuttavat sivuun. Kun kohdistin on
            CSS-säännöllä, Brackets korostaa kaikki siihen liittyvät elementit selaimessa. Samalla tavoin muokattaessa
            HTML-tiedostoa Brackets korostaa vastaavat HTML-elementit selaimessa.
        </p>
        
        <samp>
            Jos sinulla on Google Chrome asennettuna, voit kokeilla tätä itse. Napsauta Brackets-ikkunan oikeassa
            yläkulmassa sijaitsevaa salamakuvaketta tai paina <kbd>Cmd/Ctrl + Alt + P</kbd>. Kun esikatselu on käytössä
            HTML-dokumentissa, kaikkia linkitettyjä CSS-dokumentteja voi muokata reaaliajassa. Kuvake muuttuu harmaasta
            kultaiseksi, kun Brackets muodostaa yhteyden selaimeesi.
            
            Aseta kohdistin nyt yläpuolella olevaan <!-- <img> --> -tägiin. 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 selain ovat näytölläsi vierekkäin, näet muutosten
            heijastuvan välittömästi selaimeesi. Siistiä, eikö?
        </samp>
        
        <p class="note">
            Nykyisellään Brackets tukee esikatselua vain HTML:lle ja CSS:lle. Kuitenkin jo nykyisessä versiossa
            muutokset JavaScript-tiedostoihin päivitetään automaattisesti tallentaessasi tiedoston. Työskentelemme
            parhaillaan esikatselun tuomiseksi JavaScriptille. Esikatselu on myös mahdollista vain Google Chromella,
            mutta toivomme pystyvämme tuomaan tämän toiminnon kaikille pääselaimille tulevaisuudessa.
        </p>
        
        <h3>Pikanäkymä</h3>
        <p>
            Niille meistä, jotka eivät vielä osaa ulkoa värien vastineita HEX- tai RGB-arvoille, Brackets tekee nopeaksi
            ja helpoksi nähdä täsmälleen, mitä väriä on käyttämässä. Kerta kaikkiaan osoita mitä tahansa väriarvoa tai
            liukuväriä joko CSS:ssä tai HTML:ssä, ja Brackets näyttää esikatselun tästä väristä tai liukuväristä
            automaattisesti. Sama tulee kuviin: osoita yksinkertaisesti kuvalinkkiä Brackets-editorissa ja se näyttää
            pienen esikatselukuvan tästä kuvasta.
        </p>
        
        <samp>
            Kokeile pikanäkymää itse asettamalla kohdistimesi tämän dokumentin yläosassa sijaitsevaan <!-- <body> -->
            -tägiin ja painalla <kbd>Cmd/Ctrl + E</kbd> avataksesi CSS-pikaeditorin. Nyt yksinkertaisesti osoita mitä
            tahansa CSS:n väriarvoista. Voit myös nähdä sen toiminnassa liukuväreissä avaamalla CSS-pikaeditorin
            <!-- <html> --> -tägille ja osoittamalla mitä tahansa taustakuva-arvoista. Kokeile kuvan esikatselua
            asettamalla osoittimesi tässä dokumentissa aiemmin esiintyneen kuvankaappauskuvan päälle.
        </samp>
        
        <h3>Tarvitsetko jotakin muuta? Kokeile laajennusta!</h3>
        <p>
            Sen kaiken hyvän lisäksi, jota Bracketsiin on rakennettu, on suuri ja kasvava laajennuskehittäjien
            yhteisömme tehnyt satoja laajennuksia, jotka lisäävät hyödyllisiä toimintoja. Jos on jotakin, jota tarvitset
            ja jota Brackets ei tarjoa, enemmän kuin todennäköisesti joku on tehnyt laajennuksen siihen. Selaa
            saatavilla olevien laajennusten luetteloa tai hae siitä valitsemalla <strong>Tiedosto &gt; Laajennusten
            hallinta</strong> ja napsauttamalla ”Saatavilla”-välilehteä. Kun löydät haluamasi laajennuksen, napsauta
            vain ”Asenna”-painiketta sen vierestä.
        </p>
        
        <!--
            KERRO MEILLE, MITÄ AJATTELET
        -->
        <h2>Lähde mukaan</h2>
        <p>
            Brackets on avoimen lähdekoodin projekti. Web-kehittäjät ympäri maailmaa osallistuvat paremman koodieditorin
            kehittämiseen. Vieläkin enemmän kehitetään laajennuksia, jotka laajentavat Bracketsin kykyjä. Kerro meille,
            mitä ajattelet. Jaa ideasi tai osallistu suoraan projektiin.
        </p>
        <ul>
            <li><a href="http://brackets.io">Brackets.io</a></li>
            <li><a href="http://blog.brackets.io">Brackets-tiimin blogi</a></li>
            <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>Rupattele Brackets-kehittäjien kanssa IRC:ssä: <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets Freenodessa</a></li>
        </ul>
        
    </body>
</html>
<!--

    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[     CODE THE WEB     ]:::::]
    [:::::[  http://brackets.io  ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]

-->