Laajuus 5 op Luennot: 12 x 2t 17.3.2015 30.4.2015 Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Lähiopetuksen jäkeen harjoitustyö ja tentti Antti Sand 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/15 Kurssin aikataulu o luennot tiistaisin ja torstaisin 17.3.- 30.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 o apua harjoitusten tekemiseen ML7:ssa sukunimen mukaan: - A-L: pe 14:15-15:45 - M-Ö: ma 12:15-13:45 Paitsi: 20.3. 10:15-11:34 ML40, 23.3. 12:15-13:45 ML40 Kurssin suoritus o viikkoharjoitukset tärkeitä + 35 % vaikutus arvosanaan - 50% viikkoharjoituksista + vertaisarviointi (2 vertaisarviointia/harjoitus) pakollisia - tekemättä jäänyt vertaisarviointi laskee viikkoharjoituspisteitä - vähimmäisrajan ylittävät viikkoharjoitukset 35% kurssin arvosanasta - Tehtävänannot WETOssa o harjoitustyö 35% kurssin arvosanasta ja o tentti 30% kurssin arvosanasta.
Maanantai Tiistai Keskiviikko Torstai Perjantai 16.3. 17.3. L1 (T1) 18.3. 19.3. L2 20.3. H1a 23.3. H1b 24.3. L3 (T2) H1 palautus 30.3. H2b 31.3. L5 (T3) H2 palautus 25.3. 26.3. L4 27.3. H2a 1.4. 2.4. LOMA 3.4. LOMA 6.4. LOMA 7.4. LOMA 8.4. LOMA 9.4. L6 10.4. H3a 13.4. H3b 14.4. L7 (T4) H3 palautus 20.4. H4H5b 21.4. L9 H4 palautus 15.4. 16.4. L8 (T5) 17.4. H4H5a 22.4. 23.4. L10 (T6) H5 palautus 27.4. H6b 28.4. L11 29.4. 30.4. L12 (T7) H6 palautus 24.4. H6a 1.5. Vappu 4.5. H7b 5.5. 6.5. 7.5. 8.5. H7a 11.5. H7 pal.
Viikkoharjoituksiin mahdollista saada tukea o Harjoitusryhmät maanantaisin ja perjantaisin, yksi tukikerta viikossa per ryhmä o Harjoituksissa ei ole opetusta, eikä malliratkaisuja - siellä voi kysyä neuvoja o Ei ole tarkoitus tehdä koko harjoitusta tukitunnilla o Paikkoja rajallisesti Viikkoharjoitukset palautetaan WETOon aikataulun mukaan o Weton linkki kurssin sivuilla oikeassa yläreunassa o Viikkoharjoituksiin kuuluu vertaisarvioinnit o Arvioidaan oma ja yhden toisen työ joka palautuskerralla o Puolet harjoituspisteistä (35p) kerättävä päästäkseen tenttiin, yli menevä osa vaikuttaa arvosanaan
Harjoitustyön ohjeet ja pisteytysmääritteet kurssisivuilla o Voi aloittaa tekemisen vaikka heti o Harjoitustyön täytettävä vähintään minimivaatimukset - Ylimääräisistä osista saa pisteitä parempaan arvosanaan sivuilla olevan taulukon mukaisesti o Harjoitustyöstä on oltava esiversio palautettuna ennen tenttiä, jotta voi osallistua tenttiin
Tentti mikroluokassa o Saa käyttää vapaasti materiaalia verkosta tai painettuna, mutta yhteydenottaminen toisiin kielletty ja johtaa suoraan hylkäämiseen o Tentistä saatava vähintään noin puolet pisteistä päästäkseen läpi o Ylimenevät pisteet vaikuttavat arvosanaan - Mutta ihan täysiä pisteitä ei vaadita parhaaseen arvosanaan o Tenttiin ilmoittaudutaan erikseen ja tenttiin pääsy vaatii hyväksyttyä harjoituksen esiversion palautusta, sekä vähintään puolia pisteitä viikkoharjoituksien kokonaispistemäärästä
Sivut koodataan tekstieditoreja käyttäen (ts. ei käytetä WYSIWYG sivueditoreita) o Sublime Text 2, Notepad++, Brackets, yms. Webkehittäjän työkalut o Useimmat modernit selaimet tarjoavat kehittäjän työkalut sisäänrakkennettuina o Aiemmin esim. Firebug lisäosa Firefox -selaimelle Sivujen siirtäminen palvelimelle ja julkaisu o Hae kotisivuoikeus! 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/15/mat/julkaiseminenwebissa.pdf
Sivut voi tehdä haluamallaan tekstieditorilla kirjoittamalla HTML ja CSS merkintöjä o Vaikka Muistiokin riittää, kehittyneemmissä ohjelmoijien editoreissa paljon hyödyllisiä ominaisuuksia: syntax highlighting, code autocompletion, Emmet, o Muutamia suositeltavia tekstieditoreja - Sublime Text 2 (tai 3 beta) - Brackets - Atom - Vim & Emacs (vaativat enemmän opettelua) - Myös Visual Studio, joskin melko raskas kevyeen tekemiseen - WebMatrix o Tarvitaan myös kuvankäsittelyohjelmaa, mutta melko yksinkertaisetkin riittävät hyvin
Harjoituksissa palautetaan osoitteita omiin sivuihin people.uta.fi palvelimella o Pelkkä tiedostojen palautus ei riitä (pois lukien H1), koska myös oikeudet on osattava antaa o Tiedostot tulee jättää palvelimelle koko kurssin ajaksi, jotta ne voidaan tarkistaa o Muita palvelimia ei saa käyttää o Kannattaa tallentaa harjoitukset omiin kansioihinsa, ettei tule ylikirjoittaneeksi aiempaa palautusta
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, )
HTTP Verbit o GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, CONNECT, PATCH o Harjoituksissa käytetään lähinnä GET kutsua sivun ja siihen liittyvien resurssien noutamiseen (kuvat, JavaScript, ) o Lomakkeissa usein käytetään POSTia tiedon lähettämiseen o Muita verbejä voidaan käyttää rajapintojen toteuttamiseen o Myös GET kutsussa voidaan siirtää arvoja palvelimelle - http://palvelin/tiedosto.php#ankkuri?avain=arvo&avain2=arvo2 JWT 2015 @Aulikki Hyrskykari & Antti Sand, SIS, Tampereen yliopisto
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/15/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