{"id":249959,"date":"2023-12-15T15:33:00","date_gmt":"2023-12-15T12:33:00","guid":{"rendered":"https:\/\/inform.click\/web-kehityksen-perusteet-kattava-opas\/"},"modified":"2023-12-15T16:02:00","modified_gmt":"2023-12-15T13:02:00","slug":"web-kehityksen-perusteet-kattava-opas","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/web-kehityksen-perusteet-kattava-opas\/","title":{"rendered":"Web-kehityksen perusteet \u2013 kattava opas"},"content":{"rendered":"

\n Verkkosuunnitteluun p\u00e4\u00e4seminen on sarja oppimista, harjoittelua ja j\u00e4lki-ja virhe -kokeita, jotka viev\u00e4t aikaa ja omistautumista.\n<\/p>\n

\n Monien pyrkivien kehitt\u00e4jien ei tarvitse vain k\u00e4yd\u00e4 l\u00e4pi uuden verkkosivuston luomisen perusteet, vaan my\u00f6s oppia tulevista verkkoa tukevista teknologioista. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 nopeatempoiset markkinat tuovat aina enemm\u00e4n esiin nykyisen sukupolven teknologian iteraatioita ja niiden seuraaminen on ratkaisevan t\u00e4rke\u00e4\u00e4.\n<\/p>\n

\n T\u00e4ss\u00e4 lyhyess\u00e4 johdannossa emme yrit\u00e4 ennustaa tulevaisuutta, vaan k\u00e4ymme l\u00e4pi perusasiat siit\u00e4, millaista tekniikkaa ja ty\u00f6kaluja k\u00e4ytet\u00e4\u00e4n uuden sivun tekemiseen verkkoon. Jos olet t\u00e4ysin uusi web-suunnittelun parissa, t\u00e4m\u00e4 olisi hyv\u00e4 paikka aloittaa. Kaikki perussivustot vaativat kuusi olennaista asiaa, jotka muodostavat yksinkertaisen sivun, ja t\u00e4\u00e4ll\u00e4 keskustellaan yksityiskohtaisesti siit\u00e4, mit\u00e4 ne ovat, miten ne toimivat verkkosivuston toiminnassa ja miksi on t\u00e4rke\u00e4\u00e4 oppia niist\u00e4.\n<\/p>\n

\n HTML5
\n<\/h5>\n

\n HTML on lyhenne sanoista Hyper Text Markup Language ja se on kieli, jolla kaikki verkkosivustot kirjoitetaan. Kun lataat verkkosivun, selaimesi lataa ensimm\u00e4isen\u00e4 verkkosivuston HTML-koodin, joka koostuu erikoissyntaksista. Sitten se lukee t\u00e4m\u00e4n kielen ymm\u00e4rt\u00e4\u00e4kseen verkkosivun sis\u00e4ll\u00f6n. Kaikki linkeist\u00e4, painikkeista, videoista, animaatioista, kuvista ja grafiikoista on upotettu HTML-koodiin ja kertoo selaimelle, mit\u00e4 verkkosivu sis\u00e4lt\u00e4\u00e4.\n<\/p>\n

\n Verkkoa k\u00e4ytt\u00e4nyt HTML otettiin k\u00e4ytt\u00f6\u00f6n yli kaksi vuosikymment\u00e4 sitten. Sen k\u00e4ytt\u00f6 kuitenkin lis\u00e4\u00e4ntyi r\u00e4j\u00e4hdysm\u00e4isesti, kun HTML:n nelj\u00e4s versio (tunnetaan nimell\u00e4 HTML4) esiteltiin uuden vuosituhannen kynnyksell\u00e4. HTML4 muutti kaiken ja web-selailusta tuli yh\u00e4 suositumpi, kun verkkokehityksest\u00e4 tuli helpompaa.\n<\/p>\n

\n HTML4:ss\u00e4 oli kuitenkin edelleen joitain ongelmia. Vaikka se oli vankka kieli, siit\u00e4 puuttui silti kyky tukea monimutkaisia \u200b\u200btoimintoja, kuten animaatioita ja videoiden suoratoistoa. N\u00e4iden asioiden tukemiseksi piti asentaa laajennuksia, jotka vain tekiv\u00e4t k\u00e4ytt\u00e4j\u00e4n tietokoneista ja mobiililaitteista hitaampia ja tehottomia. Niinp\u00e4 k\u00e4vi nopeasti selv\u00e4ksi, ett\u00e4 HTML:st\u00e4 tarvittiin uudempaa versiota.\n<\/p>\n

\n T\u00e4m\u00e4 johti \u00e4skett\u00e4iseen HTML5-julkaisuun. HTML5:n suurin ominaisuus oli sen kyky suoratoistaa videoita tehokkaammin s\u00e4\u00e4st\u00e4en sek\u00e4 kaistanleveytt\u00e4 ett\u00e4 akun k\u00e4ytt\u00f6ik\u00e4\u00e4. Siit\u00e4 tuli uusi standardi useimmille verkkosivustoille, ja monet sivustot hylk\u00e4siv\u00e4t laajennukset kokonaan toimiakseen sivustonsa oikein. Vaikka joitakin toimintoja on viel\u00e4 saavutettavissa vain laajennuksilla, HTML5:ss\u00e4 on l\u00e4hes kaikki tarvittavat ominaisuudet, joita k\u00e4ytt\u00e4j\u00e4 voi toivoa, ja se tulee varmasti olemaan ainoa kieli, jota k\u00e4ytet\u00e4\u00e4n verkkokehityksess\u00e4 nyt ja tulevaisuudessa.\n<\/p>\n

\n CSS3
\n<\/h5>\n

\"\"<\/a><\/p>\n

\n Kun selain lataa verkkosivun, se lataa yleens\u00e4 kaksi asiaa lopullisen verkkosivuston luomiseksi; HTML ja CSS. Olemme jo keskustelleet HTML:st\u00e4, se on kieli, joka sis\u00e4lt\u00e4\u00e4 kaiken verkkosivun olennaisen sis\u00e4ll\u00f6n. HTML ei kuitenkaan sis\u00e4ll\u00e4 sit\u00e4, kuinka suurin osa n\u00e4ist\u00e4 tiedoista pit\u00e4isi n\u00e4ytt\u00e4\u00e4. Jos esimerkiksi HTML kertoo selaimelle, ett\u00e4 sivu koostuu tekstirivist\u00e4, selain ei silti tied\u00e4 tarkasti, mihin teksti tulee sijoittaa ja milt\u00e4 sen pit\u00e4isi n\u00e4ytt\u00e4\u00e4. T\u00e4m\u00e4ntyyppiset tiedot, jotka liittyv\u00e4t verkkosivun ulkoasuun, tallennetaan erilliseen tiedostoon, jota kutsutaan CSS-tiedostoksi.\n<\/p>\n

\n CSS on ollut enimm\u00e4kseen sama useiden vuosien ajan, kuka tahansa HTML:n viimeaikaisesta kehityksest\u00e4, uudempi versio, joka tunnetaan nimell\u00e4 CSS3, on julkaistu tukemaan videoiden suoratoistoa ja monimutkaisia \u200b\u200banimaatioita. CSS on lyhenne sanoista Cascade Style Sheets ja sill\u00e4 on vain yksi tarkoitus, kertoa selain kuinka esitt\u00e4\u00e4 HTML-koodi ja mik\u00e4 tahansa olennainen visuaalinen tyyli. Se tekee t\u00e4m\u00e4n sis\u00e4lt\u00e4m\u00e4ll\u00e4 kaikki tarvittavat tiedot koodissaan, jolla on my\u00f6s ainutlaatuinen syntaksi. CSS toimii yhdess\u00e4 HTML:n kanssa ja kohdistaa kaikki tunnisteet ja otsikot sivuston vaatimaan tyyliin. Olet ehk\u00e4 n\u00e4hnyt, mit\u00e4 CSS:n puute voi tehd\u00e4 verkkosivustolle. Joskus, kun lataat sivun, n\u00e4et vain tekstin ja hyperlinkit, mutta ne ovat huonosti linjassa eik\u00e4 sivulla ole v\u00e4rej\u00e4. T\u00e4m\u00e4 tapahtuu, kun selain pystyy lataamaan sivun HTML-koodin, mutta ei CSS:\u00e4\u00e4.\n<\/p>\n

\n jQuery
\n<\/h5>\n

\"\"<\/a><\/p>\n

\n Vuorovaikutteisuuden verkkosivuston kanssa on l\u00e4hes aina oltava verkkosivustojen ominaisuus nyky\u00e4\u00e4n. Jos verkkosivustollasi ei ole mink\u00e4\u00e4nlaista interaktiivisuutta, se on vain ilmoitustaulu ja siit\u00e4 on hyvin v\u00e4h\u00e4n k\u00e4ytt\u00f6\u00e4. Kuvittele YouTube tai Facebook ilman painiketta, jotta voit navigoida helposti niiden sis\u00e4ll\u00f6ss\u00e4. Vuorovaikutus tarjoaa k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisen kokemuksen, joka vastineeksi antaa sinulle lis\u00e4\u00e4 vetovoimaa ja k\u00e4ytt\u00e4jien pysyvyytt\u00e4.\n<\/p>\n

\n Useimmat verkkokehitt\u00e4j\u00e4t ovat k\u00e4ytt\u00e4neet Javaa ja JavaScripti\u00e4 tarjotakseen interaktiivisuutta. N\u00e4it\u00e4 kieli\u00e4 k\u00e4ytet\u00e4\u00e4n yhdess\u00e4 HTML:n kanssa tekem\u00e4\u00e4n verkkosivustosta eloisampi. N\u00e4m\u00e4 kielet, erityisesti JavaScript, ovat kuitenkin vanhoja ja hankalia. Monet kehitt\u00e4j\u00e4t ymm\u00e4rsiv\u00e4t t\u00e4m\u00e4n ja vaativat paremman kielen luomista helpottamaan heid\u00e4n el\u00e4m\u00e4\u00e4ns\u00e4. T\u00e4st\u00e4 syyst\u00e4 olemme \u00e4skett\u00e4in ottaneet k\u00e4ytt\u00f6\u00f6n jQueryn.\n<\/p>\n

\n Yksinkertaisesti sanottuna jQuery antaa kehitt\u00e4jille kaikki tarvittavat ty\u00f6kalut tehokkaan verkkosivuston toteuttamiseen runsaalla interaktiivisella toiminnalla, mutta se on v\u00e4hemm\u00e4n ty\u00f6intensiivinen. Jotta saisit jonkinlaisen k\u00e4sityksen, yksi JavaScriptiss\u00e4 suoritettu toiminto, joka vie 10 rivi\u00e4 koodia, voidaan toteuttaa jQueryssa, mutta vain 2 rivill\u00e4 tai v\u00e4hemm\u00e4n. JQueryn ilmeinen etu on ollut niin suosittu kehitt\u00e4jien keskuudessa, ett\u00e4 ennen sen k\u00e4ytt\u00f6\u00f6nottoa yli 60 % verkkosivustoista k\u00e4ytt\u00e4\u00e4 jQuerya.\n<\/p>\n

\n jQuery antaa verkkosuunnittelijoille jopa mahdollisuuden k\u00e4sitell\u00e4 paljon taustaty\u00f6t\u00e4, kuten tietojen hakemista ja tallentamista tietokantoihin. T\u00e4m\u00e4 on tehnyt monista muista tietokannan hallintaj\u00e4rjestelmist\u00e4 hy\u00f6dytt\u00f6mi\u00e4, koska jQuery pystyy k\u00e4sittelem\u00e4\u00e4n suurimman osan ty\u00f6kuormasta. Lyhyesti sanottuna jQuery on v\u00e4ltt\u00e4m\u00e4t\u00f6n kaikille verkkokehitt\u00e4jille, koska se tekee heid\u00e4n ty\u00f6st\u00e4\u00e4n helpompaa ja tehokkaampaa.\n<\/p>\n

\n Kuvittaja
\n<\/h5>\n

\"\"<\/a><\/p>\n

\n Ennen kuin aloitat verkkosivuston ty\u00f6skentelyn, on yleens\u00e4 hyv\u00e4 idea piirt\u00e4\u00e4 se ensin, jotta saat k\u00e4sityksen siit\u00e4, milt\u00e4 se n\u00e4ytt\u00e4\u00e4. T\u00e4m\u00e4 voidaan tehd\u00e4 useilla tavoilla; voit luonnostella verkkosivun paperille, piirt\u00e4\u00e4 sivuston ominaisuudet laskentataulukkoon tai voit tehd\u00e4 koko sivuston k\u00e4ytt\u00f6liittym\u00e4n yksinkertaisella kuvaty\u00f6kalulla. Yksi niist\u00e4, joka on sek\u00e4 helppok\u00e4ytt\u00f6inen ett\u00e4 tehokas, on Adoben valmistama Illustrator.\n<\/p>\n

\n Illustrator on graafisen suunnittelun ty\u00f6kalu, jota k\u00e4ytet\u00e4\u00e4n yleisesti digitaaliseen taiteeseen. Kuitenkin sen monipuolisuus mahdollistaa sen k\u00e4yt\u00f6n my\u00f6s muihin tarkoituksiin, kuten web-sivun laatimiseen. Suosittelemme kaikkia aloittelevia verkkokehitt\u00e4ji\u00e4 hy\u00f6dynt\u00e4m\u00e4\u00e4n Illustratorin tehoja. Se ei ainoastaan \u200b\u200banna sinulle ja asiakkaillesi paremman k\u00e4sityksen siit\u00e4, milt\u00e4 verkkosivusto n\u00e4ytt\u00e4\u00e4, vaan my\u00f6s voit helposti koota verkkosivun Dreamweaverilla, josta puhumme my\u00f6hemmin.\n<\/p>\n

\n Illustratorin k\u00e4ytt\u00e4minen on hyvin samanlaista kuin taidetaulun k\u00e4ytt\u00e4minen. K\u00e4yt\u00f6ss\u00e4si on useita ty\u00f6kaluja, joiden avulla voit koota nopeasti, milt\u00e4 verkkosivustosi n\u00e4ytt\u00e4\u00e4. Voit aloittaa tavallisella mallilla ja jatkaa sitten yl\u00f6sp\u00e4in. Voit tehd\u00e4 kerrosten kerrosten j\u00e4lkeen ja ommella ne sitten yhteen lopulliseen koostumukseen. Kun olet valmis, voit render\u00f6id\u00e4 lopullisen kuvan korkearesoluutioiseksi esikatseluksi n\u00e4hd\u00e4ksesi itse, milt\u00e4 verkkosivusto n\u00e4ytt\u00e4\u00e4 ja n\u00e4ytt\u00e4\u00e4ksesi sen muille.\n<\/p>\n

\n Photoshop
\n<\/h5>\n

\"\"<\/a><\/p>\n

\n Jos olet kiinnostunut ajatuksesta laatia verkkosivustosi, Illustrator ei ole ainoa ty\u00f6kalu. Suosituin kuvank\u00e4sittelyohjelma, jota voit k\u00e4ytt\u00e4\u00e4, ei ole mik\u00e4\u00e4n muu kuin Photoshop.\n<\/p>\n

\n V\u00e4\u00e4rink\u00e4sitykseni Photoshopista on, ett\u00e4 sit\u00e4 k\u00e4ytet\u00e4\u00e4n yleens\u00e4 vain valokuvien ja grafiikan logojen muokkaamiseen. Photoshopin k\u00e4ytt\u00f6\u00e4 muihin tarkoituksiin ei kuitenkaan ole rajoitettu. Photoshop tukee monia laajennuksia sek\u00e4 kuvamuotoja. Se hy\u00f6dynt\u00e4\u00e4 my\u00f6s kuvittajan k\u00e4ytt\u00e4m\u00e4\u00e4 kerrosj\u00e4rjestelm\u00e4\u00e4, mik\u00e4 tarkoittaa, ett\u00e4 voit rakentaa verkkosivuston ohjelmaan.\n<\/p>\n

\n Photoshopin k\u00e4ytt\u00e4minen on kuin kuultopaperien k\u00e4ytt\u00f6\u00e4 ja niiden pinoamista yhteen lopullisen sommittelun aikaansaamiseksi. Aloita tekem\u00e4ll\u00e4 taustakuva verkkosivustollesi. Yksinkertaisen v\u00e4rimaailman ja s\u00e4vypaletin pit\u00e4isi riitt\u00e4\u00e4 luomaan perustan verkkosivustollesi. Seuraavaksi voit lis\u00e4t\u00e4 siihen tekem\u00e4ll\u00e4 tekstilaatikoita sek\u00e4 muita linkkej\u00e4 ja pudotusvalikoita, joiden pit\u00e4isi olla sivulla. Lis\u00e4ksi Photoshopin avulla voit helposti koota mukautettuja kirjasimia, jotka ovat eritt\u00e4in hy\u00f6dyllisi\u00e4 verkkosivustojen kehitt\u00e4misess\u00e4, koska yleens\u00e4 haluat v\u00e4ltt\u00e4\u00e4 perinteisten kirjasimien k\u00e4ytt\u00f6\u00e4. Tekem\u00e4ll\u00e4 n\u00e4it\u00e4 mukautettuja kirjasimia voit antaa verkkosivustollesi omaper\u00e4isyytt\u00e4 sek\u00e4 kaivattua identiteetti\u00e4, mik\u00e4 on v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4 maailmassa, jossa l\u00e4hes jokainen verkkosivusto n\u00e4ytt\u00e4\u00e4 jollain tavalla samalta. Suosittelemme Photoshopin k\u00e4ytt\u00f6\u00e4, vaikka et aio n\u00e4ytt\u00e4\u00e4 esikatselua asiakkaalle.\n<\/p>\n

\n Dreamweaver
\n<\/h5>\n

\"\"<\/a><\/p>\n

\n Monet graafiset suunnittelijat ty\u00f6skentelev\u00e4t nyky\u00e4\u00e4n web-kehitysyrityksiss\u00e4, ja taiteellinen asiantuntemus on v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4 upean n\u00e4k\u00f6isen verkkosivuston luomiseksi. Kaiken luonnostelun ja esikatselun j\u00e4lkeen tulee kuitenkin aika siirt\u00e4\u00e4 upeat kuvasi todelliselle verkkokehitysalustalle. On hy\u00f6dyt\u00f6nt\u00e4 tehd\u00e4 kaikkia noita kuvia ja verkkosivustojen kuvituksia, jos sinulla ei ole tapaa toteuttaa niit\u00e4 lopulta. Juuri t\u00e4st\u00e4 syyst\u00e4 siell\u00e4 on helppok\u00e4ytt\u00f6isi\u00e4 web-suunnittelupaketteja, nimitt\u00e4in Adobe Dreamweaver.\n<\/p>\n

\n Dreamweaver on yksinkertainen alusta, jonka avulla voit koota upean n\u00e4k\u00f6isen verkkosivuston ja antaa sille tarvittavan ohjelmointirungon verkkok\u00e4ytt\u00f6\u00f6n. Se tekee t\u00e4m\u00e4n sallimalla sinun luoda helposti CSS- ja HTML-koodinp\u00e4tk\u00e4n aina, kun liit\u00e4t kuvan ohjelmaan. Voit ajatella ohjelmistoa visuaalisena k\u00e4\u00e4nt\u00e4j\u00e4n\u00e4; kerrot Dreamweaverille, milt\u00e4 verkkosivustosi pit\u00e4isi n\u00e4ytt\u00e4\u00e4, ja vastineeksi Dreamweaver kertoo sinulle sen suorittamiseen tarvittavat koodit.\n<\/p>\n

\n Kaikki ei kuitenkaan ole niin yksinkertaista. Joskus automaattinen koodin luominen ei ole ihanteellinen tapa tehd\u00e4 verkkosivusto. On parempi liitt\u00e4\u00e4 kuvaluonnos ja kirjoittaa koodi itse. T\u00e4m\u00e4 v\u00e4ltt\u00e4\u00e4 tarpeettomat ajonaikaiset virheet sek\u00e4 helpottaa koodin kirjoittamista ja tarkistamista ajan my\u00f6t\u00e4.\n<\/p>\n

\n Johtop\u00e4\u00e4t\u00f6s
\n<\/h4>\n

\n Yhteenvetona voidaan todeta, ett\u00e4 verkkosivuston suunnittelun pit\u00e4isi olla helppoa kaikille, jotka ovat sit\u00e4 kohtaan intohimoisia, mutta se vaatii huomiota ja n\u00e4lk\u00e4\u00e4 oppia lis\u00e4\u00e4. Internet on tuonut saataville useita ty\u00f6kaluja, jotka antavat sinulle voiman tuottaa h\u00e4mm\u00e4stytt\u00e4v\u00e4n n\u00e4k\u00f6isi\u00e4 verkkosivustoja, sinulla on vain oltava aikaa ja energiaa menn\u00e4 ulos ja ime\u00e4 niin paljon kuin voit.\n<\/p>\n

\n Arviomme mukaan jonkun pit\u00e4isi kest\u00e4\u00e4 korkeintaan kuukausi ymm\u00e4rt\u00e4\u00e4 olennaiset asiat ja saada riitt\u00e4v\u00e4sti harjoittelua perustoiminnallisen web-sivun kokoamiseen. Sielt\u00e4 sinun on ponnisteltava, jotta voit tehd\u00e4 upeita verkkosivuja, jotka erottuvat joukosta.\n<\/p>\n<\/p>\n

\n : instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Verkkosuunnitteluun p\u00e4\u00e4seminen on sarja oppimista, harjoittelua ja j\u00e4lki-ja virhe -kokeita, jotka viev\u00e4t aikaa ja omistautumista. Monien pyrkivien kehitt\u00e4jien ei tarvitse vain k\u00e4yd\u00e4 l\u00e4pi uuden verkkosivuston luomisen perusteet, vaan my\u00f6s oppia tulevista verkkoa tukevista teknologioista. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 nopeatempoiset markkinat tuovat aina enemm\u00e4n esiin nykyisen sukupolven teknologian iteraatioita ja niiden seuraaminen on ratkaisevan t\u00e4rke\u00e4\u00e4. T\u00e4ss\u00e4 lyhyess\u00e4 johdannossa emme yrit\u00e4 ennustaa tulevaisuutta, vaan k\u00e4sittelemme perusasiat siit\u00e4, millaista tekniikkaa ja ty\u00f6kaluja k\u00e4ytet\u00e4\u00e4n, jotta voimme luoda uuden sivun\u2026<\/p>\n","protected":false},"author":1,"featured_media":143747,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[248,53,118],"tags":[],"class_list":["post-249959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fontit","category-web-ja-wordpress-2","category-web-tyokalut"],"_links":{"self":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/comments?post=249959"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249959\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media\/143747"}],"wp:attachment":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media?parent=249959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/categories?post=249959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/tags?post=249959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}