opettaja: Eeva Meltio, eeva.meltio@metropolia.fi
Work in progress eli kurssin sisältö päivittyy toukokuun loppuun saakka
Opiskelija - ymmärtää verkkoteknologioiden peruskäsitteet
- ymmärtää html- ja css -dokumenttien rakenteet ja toimintaperiaatteet
- osaa rakentaa oikeaoppisia verkkosivustoja
- oppii itsenäisesti seuraamaan verkkoteknologioiden kehitystä ja etsimään lisätietoa erilaisista lähteistä
|
|
|
Aikataulu
http://kulttuurilukkari.metropolia.fi/
Rakenne ja sisältö
Alla lyhyt kuvaus kurssin opetuskertojen sisällöstä. Sivustoille tulee lisämateriaalia koko ajan, myös kurssin edetessä.
Aloitus: HTML:n ja CSS:n historiaa ja peruskäsitteitä
1. HTML-sivun luominen ja julkaisu
2. CSS ulkoasun muotoilussa
3. Taitto verkkosivuilla I
4. Taitto verkkosivuilla II
5. Listat ja navigaation muotoilu
6. Yksiköt tarkemmin. Värit, kuvat ja multimedia verkkosivuilla
7. Sivuston linkitys. Lisää CSSn sovelluksia
8. Teknisesti toimivat sivut
9. Oman sivuston julkaiseminen
10. Sivunteko-ohjelmat
Kurssin suorittamiseksi opiskelijan on oltava läsnä opetuksessa 80%.
Harjoitustyö
Lisäksi opiskelija tekee harjoitustyönä 10-15 sivun kokonaisuuden. Sivuston aiheena on
- oma portfolio
- muu oma projekti (hyväksytä ensin opettajalla!)
Vaatimukset:
- validit html-sivut ja ulkoinen css-tiedosto (html 4.01 & css 2)
- sisältävät minimissään kuvaa ja tekstiä, mielellään myös muuta mediaa
- myös tulostusnäkymä on suunniteltu
Arviointikriteerit:
- Sivuston toimivuus ja käytettävyys
- Toimivuus eli selaimilla ja käyttöjärjestelmillä
- HTML:n ja CSS:n soveltamisen laajuus sivustolla:
- rakenteen ja ulkoasun erottaminen
- typografian suunnittelu: toimivuus käyttäjän kannalta
- layout: käytettävyys, visuaalisuus
Harjoitustyön muoto:
- omassa kotihakemistossa tai muualla verkossa julkaistu toimiva sivusto
- sähköpostitse lähetetty kuvaus (3-4 sivua) sivuston tavoitteesta, kohderyhmästä ja suunnitteluperiaatteista.
Palautuspäivä: 31.5.
Linkkejä harjoitteluun:
http://www.landofcode.com/code-editor.php?
Opettaja: Eeva Meltio, eeva.meltio a metropolia.fi |
| Panel |
|---|
| bgColor | #ffffff |
|---|
| title | Kurssin suorittaminen |
|---|
| - Läsnäolo opetuksessa 80%
- Harjoitustyönä toteutettava sivusto (vähintään 1-2 sivua) sekä dokumentaatio sivun suunnittelusta ja toteutuksesta
Ohjeita harjoitustyöhön - Tee validit html-sivut ja ulkoinen css-tiedosto (html 4.01 & css 2)
- Erota rakenne ja ulkoasu toisistaan
- Julkaise sivusto kotihakemistossasi tai muualla verkossa
Ohjeita dokumentaatioon Lähetä opettajalle sähköpostitse kuvaus (1-2 sivua) - Sivuston tavoite
- Kohderyhmä
- Suunnitteluperiaatteet
- Miten toteutettu ja miksi? (onko käytetty taulukoita, tyylitiedostoja)
- Mitä opin kurssista / harjoitustyön tekemisestä?
Harkkatyön arviointikriteerit - Oikeaoppinen ja validi HTML ja CSS
- Layout: käytettävyys, visuaalisuus
- Dokumentaatiossa kuvaillut perustelut tehdyille valinnoille: miten toteutettu sivusto vastaa tavoitteisiin?
|
Aikataulu ja sisällöt Perusopiskelijat | Aihe |
|---|
Ma 14.3. | Peruskäsitteet. Yksinkertaisen verkkosivun luominen. Validointi. | Ma 21.3. | Tyylitiedostojen luominen ja linkittäminen. Värien käyttö ja typografian muotoilu tyylitiedostoilla.
| Ma 28.3. | Kuvan ja taustakuvan lisääminen ja asemointi. Linkit ja hakemistorakenne. Värit ja yksiköt. Etäyhteydet: ssh, ftp. | Ma 4.4. | CSS-taitto: Elementtien asemointitavat. | Ma 11.4. | CSS-taitto: Elementtien asemointitavat. | Ma 18.4. | Taulukon luominen ja muotoilu tyylitiedostolla | Ma 2.5. | Listat ja navigaation muotoilu. | Ma 9.5. | Harjoitustyön teko | Ma 16.5. | Harjoitustyön teko
| Ma 23.5. | Harjoitustöiden esittely
|
|
| Column |
|---|
| Panel |
|---|
| bgColor | #efefef |
|---|
| title | Validointi |
|---|
| HTML- ja CSS -dokumenttien oikeellisuus kannattaa tarkistaa ns. validaattoreilla. Validaattorit vertaavat sille annettua dokumenttia niitä koskeviin määrittelyihin ja tarkastavat dokumenttien muodollisen oikeellisuuden. |
| Panel |
|---|
| bgColor | #efefef |
|---|
| title | Mitä ohjelmistoja tarvitaan? |
|---|
| Kurssilla käytetään tekstieditoreita html- ja tyylitiedostojen tekemiseen. >> Lataa Notepad++ (vain windows-käyttöjärjestelmälle) Mac-editoreita, esim: >> TextWrangler >> Coda |
|
|
...