Laajuus 5 op Luennot: 12 x 2t 11.3.2014 29.4.2014 Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Lähiopetuksen jäkeen harjoitustyö ja tentti Aulikki Hyrskykari Taru Muhonen Kurssin järjestelyistä Kurssilla käytettävistä työvälineistä o koodin editointi o koodin tutkiminen kehittäjän työkalut o tiedostojen vienti palvelimelle ja sivujen julkaisu Verkosta löytyvistä resursseista Taustaa webbisivujen tekemiselle o selaimen ja palvelimen välinen yhteistyö o merkkauskielistä ja niiden historiasta Perusperiaatteet o DOM o CSS o HTML ja CSS yhteispeli
Kurssisivut osoitteessa http://www.sis.uta.fi/~jwt/14 Kurssin aikataulu o luennot tiistaisin ja torstaisin 11.3. 29.4 (klo 10 12 ja klo 14 16) o 7 viikkoharjoitusta erittäin oleellisia kurssin läpäisemiseksi (!) o ratkaisut palautetaan WETO:on viikon kuluessa (WETO sulkeutuu ti klo 10) o apua harjoitusten tekemiseen ML7:ssa sukunimen mukaan: - A L: pe 10:15 11:45 - M Ö: ma 14:15 15:45 Kurssin suoritus o viikkoharjoitukset pakollisia + 35 % vaikutus arvosanaan - 50% viikkoharjoituksista + vertaisarviointi (1 vertaisarviointi) pakollisia - tekemättä jäänyt vertaisarviointi laskee viikkoharjoituspisteitä - vähimmäisrajan ylittävät viikkoharjoitukset 35% kurssin arvosanasta o harjoitustyö 35% kurssin arvosanasta ja o tentti 30% kurssin arvosanasta. Sivut koodataan tekstieditoreja käyttäen (ts.ei käytetä WYSIWYG sivueditoreita) o Sublime Text 2, Notepad++ Webkehittäjän työkaluohjelma o Firefox: Firebug (lisäosa) o Chrome : työkalu valmiina selaimessa (tools/developer tools tai yksinkertaisesti hiiren kakkospainike / Inspect element) Sivujen siirtäminen palvelimelle ja julkaisu o Hae Unix ja kotisivuoikeus! NYT! HETI! o Tiedostojen siirto: WinSCP o Julkaisu yliopiston people.uta.fi palvelimella o Käsitelty T3 kurssilla - kotisivuohje: https://intra.uta.fi/portal/group/tietopankki/kotisivuohje - T3 materiaali: http://www.sis.uta.fi/~jwt/14/mat/julkaiseminenwebissa.pdf
W3C = World Wide Web Consortium http://www.w3.org/standards/ W3C spesifikaatioiden kehitysprosessi http://www.w3.org/2005/10/process-20051014/tr o Working Draft (WD) o Candidate Recommendation (CR) o Proposed Recommendation (PR) o W3C Recommendation (REC) lopullinen versio standardista (vrt. http://arstechnica.com/information-technology/2012/09/w3c-announces-plan-to-deliver-html-5-by-2014-html-5-1/-in-2016) o Working Group Note julkaistaan kuvaamaan, että työ aiheesta on lopetettu, se voidaan antaa vaikka aiheesta ei olisikaan julkaistu Working Draft dokumenttia Standardit verkossa o HTML 5 spesifikaatio: http://www.w3.org/tr/html5/ o CSS spesifikaatio: http://www.w3.org/tr/css/ o WAI (Web Accessiblity Initiative), saavutettavuusohjeistus: http://www.w3.org/wai/ o DOM spesifikaatio: http://www.w3.org/dom/ Validaattorit o HTML 5 validaattori: http://validator.w3.org/ o CSS validaattori: http://jigsaw.w3.org/css-validator/validator.html.en W3C o HTML 5 markup language, helppolukuisempaan muotoon kirjoitettu kielen määrittely: http://www.w3.org/tr/html-markup/ MDN (Mozilla Developer Network) o Learn HTML: https://developer.mozilla.org/en-us/learn/html o Learn CSS: https://developer.mozilla.org/en-us/learn/css o Learn Javascript: https://developer.mozilla.org/en-us/learn/css W3School o HTML Tutorial: http://www.w3schools.com/html/default.asp o CSS Tutorial: http://www.w3schools.com/css/default.asp o Javascript Tutorial: http://www.w3schools.com/js/default.asp
Internet o verkkojen verkko o Infrastruktuuri World wide webille Käyttäjän kannalta ajateltuna o palvelimet (servers), joissa toimii palvelinohjelmisto o asiakastietokoneet (clients), joissa käytetään selainta (browser), ja o tiedonsiirron toteuttava verkko Asiakas palvelin o pyynnöt vastaukset o IP (internet protokolla, OSI malli) (HTTP, FTP, telnet, ) Rakenteinen dokumentti (structured document) o jollakin sovitulla merkkauskielellä (markup language) esitettyä dokumenttia o HTML kehitettiin alun perin kuvaamaan tieteellisten dokumenttien rakennetta o merkittävimmäksi sovellusalueeksi vakiintui www o www dokumentit luotu alusta asti HTML merkkauskielellä Periaate o kuvataan esitettävän dokumentin rakenne, mutta ei ulkomuotoa SGML o vanha (1980) yleiskäyttöinen merkkauskieli o ilmaisut eivät kiinnitettyjä: ei varsinaisesti kieli o ennemminkin menettelytapa määritellä kieli: ilmaisut määritellään formaalisti DTD määrittelydokumentissa o HTML yksi SGML sovellus
<!DOCTYPE html> <html> <head> <meta charset = "UTF 8" /> <title>ensimmäinen kokeilu</title> </head> <body> <h1>www sivun luominen</h1> <p> Harjoitellaan tällä sivulla ensin, mitkä ovat HTML dokumenttiin vaadittavat osat minimissään. </p> <p> Html dokumentti sisältää aina head ja body elementit, edellisessä kuvataan dokumenttiin liittyviä yleisempiä asioita ja jälkimmäiseen kirjoitetaan sivun varsinainen sisältö. Tämän dokumentin head elementtissä on määritelty dokumentin tallennuksessa käytettävä merkistökoodaus (meta charset...) ja dokumentin nimi (title). Body elementissä on annettu yksi ensimmäisen tason otsikko (h1) ja kaksi kappaletta (p). </p> </body> </html> Selain esittää dokumentin ymmärrettävässä ja havainnollisessa muodossa: http://www.sis.uta.fi/~jwt/14/esim/01-01-ensimmainen-sivu.html HTML5 määrittely määrittelee o kielen syntaksin + aiempaa tarkemmin miten selainten tulee esittää erilaiset kielen elementit käyttäjälle () Selainten kehitystyökalut sivun koodin tutkimisessa