JWT 2015 - Johdatus www-tekniikoihin
© Aulikki Hyrskykari, Antti Sand, 2015 - Kopiointi ilman lupaa kielletty.

Lisätietoa ja materiaaleja

Www-sivujen luontiin on olemassa erilaisia WYSIWYG sivueditoreita (SeyMonkey, Dreamweaver, WordPress, ...), joiden avulla sivut rakennellaan samantien ulkoasultaankin halutunlaisiksi. Vähän samaan tapaan kuin WYSIWYG-tekstinkäsittelyohjelmat tallentavat tekstin mukana myös dokumentin ulkoasuun liittyvät määritykset.

Tällä kurssilla ei käytetä näitä sivueditoreita, vaan sivut kirjoitetaan puhtaana tekstinä, mihin muotoon sivueditoritkin tuotetun dokumentin tallentavat. Vaikka jatkossa käyttäisitkin näitä työkaluja, on olennaista, että ymmärrät mitä koodia nämä editoria tuottavat, muuten sivujen odottamaton toiminta ja muokkaaminen saattaa olla työlästä tai mahdotonta. Kurssilla tarvitset siis tekstieditorin, jolla kirjoitat HTML- ja CSS-dokumentteja.

Sen lisäksi on erittäin hyödyllistä hankkia kehittäjän työkaluohjelmisto, jolla voit tutkia miten selain tulkitsee sivulle noudetun dokumentin.

Jos teet sivuja jossain muualla kuin yliopiston mikroluokissa, tarvitset myös tiedonsiirto-ohjelman.

1. Kurssilla käytettävät ohjelmat

Tekstieditori: Sublime Text 2 Sublime Text 2 editor logo tai Notepad++ Notepad plus plus logo
Luennolla HTML/CSS -koodien kirjoittamiseen luennolla käytetään Sublime Text 2 -editoria. Sublime on monipuolinen ja tehokas editori (itse suosittelen sen käytön opettelimista), mutta myös Notepad++ -editori on käypä työkalu html ja css-koodin kirjoittamiseen. Molemmat editorit tunnistavat useiden kielten syntaksin (muitakin kuin edellä mainitut). Niiden tekemä värikoodaus ja apu hierarkiatasojen kirjoittamisessa auttaa kirjoittamaan siistiä koodia ja huomaamaan tekemiään virheitä.

Ilmainen videokurssi Sublimen käyttöön.

Web-kehittäjän työkaluohjelmat: Firebug Firebug logo tai selaimen omat työkalut
Firebug on Firefoxiin ladattava lisäosa, jonka voit käydä lataamassa oman Firefoxiisi. Sitä ei löydy yliopiston mikroluokista, mutta voit asentaa sen koneelle aina istunnon aluksi - sen tekee todella nopeasti. Firebugin sijasta tai ohella voi käyttää suoraan selaimiiin valmiiksi asennettua Developers Tool -työkalupakkia. Ne saa auki asetusvalikkojen kautta, tai suoraan komennolla Firefoxisssa shift+F5 ja Chromessa ctrl+shif+i.

Kehittäjän työkalupakki ovat korvaamaton apu kun tutkit joko omaa tai jonkun muun kirjoittaman sivun lähdekoodia. Sen avulla voit tutkia yksittäisiä html-elementtejä sivulla, niin niihin liittyviä html-koodeja ja css-määrityksiä. Voit myös muokata koodia, ja kokeilla miten se vaikuttaa sivun tulostumiseen. Työkaluilla tehty muokkaus on luonnollisesti väliaikaista, kun lataat sivun uudelleen, tekemäsi muokkaukset häviävät.

Työkalun käyttö tulee sinulle tutuksi luennoilla ja harjoituksissa.
Sivujen julkaiseminen ja tiedostojen siirto: WinSCP WinSCP logo
Kurssilla tehtävät harjoitukset ja sivut julkaistaan kotihakemistojen kautta yliopiston palvelimella.

Tietotekniikkataidot-kurssilla www-sivuja julkaistiin viemällä ne omaan kotihakemistoon kansioon, joka nimettiin nimellä 'public_html'. Tiedostojen siirtoon ja oikeuksien hallintaan käytettiin TectiaClient SSH -tiedonsiirto-ohjelmaa. Nuo ohjeet ovat päteviä tälläkin kurssilla, paitsi että kotihakemistot sisältävän palvelimen nimi on nyt people.uta.fi (ei siis enää kielo.uta.fi). TectiaClientin sijasta kurssilla käytetään WinSCP-ohjelmaa joka on toiminnaltaa ja ulkonäöltäänkin hyvin samankaltainen SSH TectiaClient File Transfer -ohjelman kanssa.

Jos olet unohtanut miten tiedostoja julkaistaan ja niiden oikeuksia hallitaan yliopiston serverillä, voit kerrata asiat lyhyesti Tietohallinnon sivuilta (https://intra.uta.fi/portal/group/tietopankki/kotisivuohje tai tarvittessasi perusteellisempia ohjeita, pidemmin T3-materiaalista (erityisesti luku 3).

Vastaavanlaisia työkaluja löytyy muitakin, mutta luennoilla käytän Sublimea ja Firebugia, joten luentojen seuraaminen saattaa olla helpompaa, jos käyttää samoja työkaluja. Jos joku kurssilaisista käyttää muita ohjelmia ja haluaa suositella niitä muillekin, pistäkää viestiä, voin laittaa tähän listaa suositelluista vaihtoehdoista.

Takaisin ylös

2. Standardit

W3C: HTML, CSS ja DOM

World Wide Web Consortium (W3C) kehittää yhteisiä ja yhteensopivia Webin pelisääntöjä ja teknologioita (spesifikaatioita, ohjeita, ohjelmistoja sekä työkaluja). W3C:n työn keskeinen muoto on standardin ("suositus", "recommendation") asettaminen. Standardit ovat huolellisen valmistelutyön tuloksia jotka ohjaavat Webin kehittymistä tarjoamalla konkreettisia ja tarkkoja pelisääntöjä yhteisen toiminnan tueksi.

Www-sivun validointi: HTML5 validaatori ja CSS validaattori
Kannattaa heti alusta alkaen opetella tekemään sivujen validoinnista ruutininomainen toimenpide. Validoinnilla tarkoitetaan dokumentin syntaktista läpikäyntia, tarkistetaan annettujen spesifikaatioiden mukainen. Virheilmoitukset ovat yleensä helposti ymmärrettäviä, joten aloittelevalle sivujen laatijalle validaattori toimii myös oppimisvälineenä.

Jotta validaatori osaa käyttää tarkastukseen oikeata spesifikaatiota, on dokumentin alussa oltava dokementtityypin määrittely, joka HTML5 kirjoitettaessa on yksinkertaisesti <!DOCTYPE html>. Validoinnin tekeminen helppoa ja nopeaa, sen voi tehdä antamalla validaattorille osoitteen julkaistulle sivulle, tai, vaikka et olisi sivua vielä palvelimelle vienytkään, voit kopioidan koko sivun koodin suoraan validaattoriin.

Huomaa kuitenkin, että sivulle tehdään vain syntaktinen tarkistus, validaattorin antama hyväksyntä ei tietystikään tarkoita, että sivustosi välttämättä olisi rakenteeltaan, toiminnaltaan tai ulkoasultaan hyvä. Näistä asioista sinun tulee pitää huolta itse.

W3C www-tekniikoihin liittyvät W3C standardit:
W3C sivuilta löytyy "virallinen" tieto erilaisiin www-julkaisuun liittyviin asoihin, kuten esim.

W3C:n sivuston materiaali ei välttämättä ole aina kovin helppolukuista, ja kannattaakin käyttää hyväkseen verkosta löytyvää runsasta tutoriaalisivustoja, alla on mainittu kolme suositeltavaa sivustoa MDN, W3School ja HTMLDog

ECMA: ECMAScript

JavaScript seuraa ECMAScript standardia, joista viimeisin versio on:
ECMAScript 5.1: Standard ECMA-262: ECMAScript®Language Specification 5.1
julkaistiin vuonna 2011. Jos haluat tutustua syvemmin JavaScriptiin, kannattaa katsoa yhden JavaScipt-kehityksen taustavoimista, Doug Crockfordin esitys JavaScript 5-versiosta vuodelta 2011:
ECMAScript 5: The New Parts

Takaisin ylös

3. Oppaita, tutoriaaleja

Verkko on täynnä hyviä oppaita ja materiaali www-sivujen suunnitteluun ja totetukseen. On kuitenkin vaikea tietää mitkä resurssit ovat hyviä ja suositeltavia. MSD, W3School ja HTML Dog ovat kaikki suositeltavia ja selkeitä referessisivustoja aloittelevalle ja kokeneellemmakin www-sivujen toteuttajalle.

MDN (Mozilla Developer Network)

W3School

HTML Dog

TP - tutorialspoint

Takaisin ylös

4. Videotutoriaaleja

Takaisin ylös