|
| 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>BRACKETS-ALOITUSOPAS</title> |
| 8 | + <meta name="description" content="Interaktiivinen aloitusopas Brackets-sovellukselle."> |
| 9 | + <link rel="stylesheet" href="main.css"> |
| 10 | + </head> |
| 11 | + <body> |
| 12 | + |
| 13 | + <h1>BRACKETS-ALOITUSOPAS</h1> |
| 14 | + <h2>Tämä on oppaasi!</h2> |
| 15 | + |
| 16 | + <!-- |
| 17 | + TEHTY <3:LLA JA JAVASCRIPTILLA |
| 18 | + --> |
| 19 | + |
| 20 | + <p> |
| 21 | + Tervetuloa varhaiseen Brackets-sovelluksen esiversioon, uuteen avoimen lähdekoodin editoriin seuraavan |
| 22 | + web-sukupolven puolesta. Olemme suuria standardien faneja ja haluamme rakentaa paremmat työkalut |
| 23 | + JavaScriptille, HTML:lle ja CSS:lle sekä niihin liittyville avoimille web-tekniikoille. Tämä on nöyrä |
| 24 | + alkumme. |
| 25 | + </p> |
| 26 | + |
| 27 | + <!-- |
| 28 | + MIKÄ ON BRACKETS? |
| 29 | + --> |
| 30 | + <p> |
| 31 | + <em>Brackets on erityyppinen editori.</em> |
| 32 | + 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 on välttämättömät taidot muokata ja |
| 34 | + laajentaa editoria. Itse asiassa käytämme Bracketsia joka päivä Brackets’n 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. |
| 37 | + </p> |
| 38 | + |
| 39 | + |
| 40 | + <h2>Kokeilemme muutamia uusia asioita</h2> |
| 41 | + |
| 42 | + <!-- |
| 43 | + HTML:N, CSS:N JA JAVASCRIPTIN VÄLINEN SUHDE |
| 44 | + --> |
| 45 | + <h3>Pikamuokkaus CSS:lle ja JavaScriptille</h3> |
| 46 | + <p> |
| 47 | + Ei lisää dokumenttien välillä vaihtamista ja tietojen menetyksiä. Kun muokkaat HTML:ää, käytä |
| 48 | + <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. |
| 52 | + </p> |
| 53 | + |
| 54 | + <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. |
| 59 | + </samp> |
| 60 | + |
| 61 | + <a href="screenshots/quick-edit.png"> |
| 62 | + <img alt="Kuvankaappaus näyttää CSS:n pikamuokkauksen" src="screenshots/quick-edit.png" /> |
| 63 | + </a> |
| 64 | + |
| 65 | + <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 | + </p> |
| 70 | + |
| 71 | + <!-- |
| 72 | + ESIKATSELU |
| 73 | + --> |
| 74 | + <h3>Esikatsele CSS:n muutoksia reaaliaikaisesti selaimessa</h3> |
| 75 | + <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 | + </p> |
| 80 | + <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 | + Brackets’lla ei tarvitse kopioida ja liittää lopullista CSS:ää takaisin editoriin. Koodisi suoritetaan |
| 84 | + selaimessasi, mutta se sijaitsee editorissasi! |
| 85 | + </p> |
| 86 | + |
| 87 | + <h3>Korosta HTML-elementtejä ja CSS-sääntöjä reaaliaikaisesti</h3> |
| 88 | + <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 | + kun muokatessa HTML-tiedostoa, Brackets korostaa vastaavat HTML-elementit selaimessa. |
| 92 | + </p> |
| 93 | + |
| 94 | + <samp> |
| 95 | + Jos sinulla on Google Chrome asennettuna, voit kokeilla tätä itse. Napsauta salama-kuvaketta |
| 96 | + Brackets-ikkunan oikeassa yläkulmassa tai napsauta <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 | + |
| 100 | + 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 1 pikselistä 10 pikseliin tai vaihda taustaväriä ”dimgray”:sta |
| 103 | + ”hotpink”:iin. Jos sinulla on Brackets ja selaimesi suoritetaan rintarinnan sen kanssa, näet muutokset |
| 104 | + välittömästi selaimessasi. Siistiä, eikö? |
| 105 | + </samp> |
| 106 | + |
| 107 | + <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. |
| 113 | + </p> |
| 114 | + |
| 115 | + <h3>Pikanäkymä</h3> |
| 116 | + <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 gradienttia ja Brackets näyttää esikatselun tästä |
| 120 | + väristä/gradientista automaattisesti. Sama tulee kuviin: yksinkertaisesti osoita kuvalinkkiä |
| 121 | + Brackets-editorissa ja se näyttää esikatselussa tämän kuvan pikkukuvan. |
| 122 | + </p> |
| 123 | + |
| 124 | + <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 gradienteissa 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. |
| 130 | + </samp> |
| 131 | + |
| 132 | + <!-- |
| 133 | + ANNA MEIDÄN TIETÄÄ, MITÄ MIELTÄ OLET |
| 134 | + --> |
| 135 | + <h2>Tule mukaan</h2> |
| 136 | + <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 Brackets’n kykyjä. |
| 139 | + Anna meidän tietää, mitä mieltä olet. Jaa ideasi tai osallistu suoraan projektiin. |
| 140 | + </p> |
| 141 | + <ul> |
| 142 | + <li><a href="http://brackets.io">Brackets.io</a></li> |
| 143 | + <li><a href="http://blog.brackets.io">Brackets-tiimin blogi</a></li> |
| 144 | + <li><a href="http://github.com/adobe/brackets">Brackets GitHub’ssa</a></li> |
| 145 | + <li><a href="https://github.com/adobe/brackets/wiki/Brackets-Extensions">Brackets-laajennukset</a></li> |
| 146 | + <li><a href="http://github.com/adobe/brackets/wiki">Brackets Wiki</a></li> |
| 147 | + <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> |
| 149 | + <li>Chattaa Brackets-kehittäjien kanssa IRC:ssä #brackets’ssa Freenode-palvelussa</li> |
| 150 | + </ul> |
| 151 | + |
| 152 | + </body> |
| 153 | +</html> |
| 154 | +<!-- |
| 155 | +
|
| 156 | + [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] |
| 157 | + [:::::::::::::: ::::::::::::::] |
| 158 | + [:::::::::::::: ::::::::::::::] |
| 159 | + [::::::[[[[[[[: :]]]]]]]::::::] |
| 160 | + [:::::[ ]:::::] |
| 161 | + [:::::[ ]:::::] |
| 162 | + [:::::[ ]:::::] |
| 163 | + [:::::[ ]:::::] |
| 164 | + [:::::[ CODE THE WEB ]:::::] |
| 165 | + [:::::[ http://brackets.io ]:::::] |
| 166 | + [:::::[ ]:::::] |
| 167 | + [:::::[ ]:::::] |
| 168 | + [:::::[ ]:::::] |
| 169 | + [:::::[ ]:::::] |
| 170 | + [::::::[[[[[[[: :]]]]]]]::::::] |
| 171 | + [:::::::::::::: ::::::::::::::] |
| 172 | + [:::::::::::::: ::::::::::::::] |
| 173 | + [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] |
| 174 | +
|
| 175 | +--> |
0 commit comments