Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

Koko: px

Aloita esitys sivulta:

Download "Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus"

Jorma Hyttinen
7 vuotta sitten
Katselukertoja:

1 Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Lähiopetuksen jäkeen harjoitustyö ja tentti Antti Sand Taru Muhonen

2 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

3 Kurssisivut osoitteessa Kurssin aikataulu o luennot tiistaisin ja torstaisin (klo 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: :15-11:34 ML40, :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.

4 Maanantai Tiistai Keskiviikko Torstai Perjantai L1 (T1) L H1a H1b L3 (T2) H1 palautus H2b L5 (T3) H2 palautus L H2a LOMA 3.4. LOMA 6.4. LOMA 7.4. LOMA 8.4. LOMA 9.4. L H3a H3b L7 (T4) H3 palautus H4H5b L9 H4 palautus L8 (T5) H4H5a L10 (T6) H5 palautus H6b L L12 (T7) H6 palautus H6a 1.5. Vappu 4.5. H7b H7a H7 pal.

5 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

6 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

7 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ä

8 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: - T3-materiaali:

9 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

10 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

11 W3C = World Wide Web Consortium W3C-spesifikaatioiden kehitysprosessi o Working Draft (WD) o Candidate Recommendation (CR) o Proposed Recommendation (PR) o W3C Recommendation (REC) lopullinen versio standardista (vrt. 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: o CSS spesifikaatio: o WAI (Web Accessiblity Initiative), saavutettavuusohjeistus: o DOM spesifikaatio: Validaattorit o HTML 5 validaattori: o CSS-validaattori:

12 W3C o HTML 5 markup language, helppolukuisempaan muotoon kirjoitettu kielen määrittely: MDN (Mozilla Developer Network) o Learn HTML: o Learn CSS: o Learn Javascript: W3School o HTML Tutorial: o CSS Tutorial: o Javascript Tutorial:

Internet o verkkojen verkko o Infrastruktuuri World wide webille Käyttäjän kannalta ajateltuna o palvelimet (servers), joissa toimii palvelinohjelmisto o asiakastietokoneet

13 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

14 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 - JWT Hyrskykari & Antti Sand, SIS, Tampereen yliopisto

15 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

16 <!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: 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

Samankaltaiset tiedostot

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

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