582313 - Digitaalisen median tekniikat (4 op) - kevät 2009 / 4. periodi

Leht. Harri Laine, Tuntiop. Matti Paksula, Tuntiop. Samuli Kaipiainen

IN ENGLISH!

Palautelomake sivun pohjalla. Sivua muokattu viimeksi: 05.09.2009 16:17

Menneet ja tulevat erilliskokeet: Erilliskokeet

Tulokset: intranetissä

Kurssikuvaus

Uudistettu DIME 2.0! Uusia WWW-tekniikoita käytettävyyden ja esteettömyyden ehdoilla!

Luennoilla esitellään kurssin sisältöä esimerkkien ja demojen kautta. Esimerkeillä pohjustetaan harjoitusten itsenäistä tekemistä.

Ydin

WEB, HTML, CSS, JavaScript, AJAX, palvelinohjelmointi

Tausta

Palvelimen taakan siirtäminen asiakkaalle, sivujen optimointi, selainyhteensopivuus, standardit

Esitellään

JavaScript-kirjastot, WWW-kehykset, PHP, Flash, kuva- ja videomuodot, sisällönhallintajärjestelmät, WYSIWYG-editorit, kehitystyökalut (Firebug ym.), XML, JSON, palveluiden yhdistäminen toisiinsa

Blogi

Kurssilla on kurssiblogi, jossa kerrotaan kurssin uudet, äkilliset ja jännittävät tapahtumat! Tämä sivu pidetään mahdollisimman tiiviinä ja muuttumattomana.

IRC-kanava

Kurssilla on puolivirallinen IRC-kanava #dime (IRCNet). Mitään tärkeää et menetä jos et ole kanavalla.

Kurssin suoritus

Kurssi muodostuu ilmoittautumisesta, luennoista, harjoitustyöstä, harjoitustehtävistä ja tentistä seuraavasti:

• Tentti (24 p, hyväksymisraja 12 p).
• Harjoitustyö (30 p, hyväksymisraja 15 p).
• Vapaaehtoiset harjoitustehtävät (6 p), jotka tukevat harjoitustyön rakentamista.

Harjoituksista ja harjoitustyöstä saadut pisteet ovat voimassa uusintakokeissa vuoden 2009 loppuun. Uusintakokeeseen voi osallista vain tehtyään kurssin aikana hyväksytyn harjoitustyön.

Esitiedoiksi riittävät kurssit Tietokonen työvälineenä ja Ohjelmoinnin perusteet.

Luennot

Matti Paksula ja Samuli Kaipiainen.

Luennot 4. periodissa (10.3. - 22.4.) tiistaisin ja keskiviikkoisin klo 12-14 salissa B123.

Luentoaikataulu ja oheismateriaali

Disclaimer: toisin kuin muilla kursseilla, tällä kurssilla luentokalvot todella eivät ole itseopiskelumateriaalia! Mutta: 1) tutustu luentokalvoihin, niin tiedät/muistat mitä luennolla on tehty, 2) katso webbimatskusta tai kurssikirjasta miten luennon asiat tehdään, 3) tee itse!

1. Intro ja web
   • Wikipedia: Browser wars
   • History of Internet -video hyvää matskua sotilasverkoista yms!
   • Engelbartin 1968 demo -video hiiri, hypertext ja muut asiat!
2. XHTML johdatus ja XHTML rajoille
   • Luennon esimerkkidokumentti (normalisoitu)
   • Browser wars 2.0
   • DOCTYPEn eri osat
   • Villit vuodet
3. CSS
   • Luennon esimerkkidokumentti (CSS)
   • QuirksMode: CSS browser compatibility
   • Block vs. Inline
   • User Agent Style Sheets
   • 25 Rounded Corners Techniques with CSS
   • Vertical Centering in CSS
   • Graafista suunnittelua: CSS Zen Garder, Textures In Modern Web Design
4. JavaScript (korjattu)
   • Luennolla esitelty esimerkkigalleria
   • Mozilla JavaScript -referenssi
5. AJAX ja JavaScript-kirjastot
   • Esimerkkigalleria jQuerylla tehtynä
   • AJAX-demoja
   • Ennen JavaScript-kirjastoja
   • jQueryn kuvaplugin-perspektiivejä
6. Esteettömyys ja saavutettavuus
   • Saavutettava lomake-esimerkki
   • Nielsenin mokat
   • WCAG
7. Palvelinohjelmointi (PHP)
   • SSI esimerkki
   • Istunto-esimerkki
   • Lomakkeen käsittely (minkä tahansa lomakkeen!)
   • MUREA KUHA php-opas
8. PHP jatkuu + pelkkiä kysymyksiä luento
   • Tiedoston vastaanotto: lomake ja käsittelijä
   • Taustajärjestelmä: taustajärjestelmän kuvaus Huom: luennolla esitettyä (huonohkoa) jQuery-AJAX esimerkkiä ei julkaista -> harjoitustehtävä!
9. Kuva, video ja ääni (huom: PDF-XChange jpeg-uudelleenpakkasi osan kuvista, mikä virheellisesti korostaa (muttei riko) osaa pakkaushäiriödemoista)
   • Putkiteevee
   • PNG ja JPEG 2000
   • Tarkista ja testaa selaimesi osaamat kuvaformaatit sekä PNG-läpinäkyvyys
   • MPEG-1, MPEG-2 ja MPEG-4 (hyvää+rankkaa matskua)
   • YouTube- ja Digital Cinema -formaatit
   • Miten niin ei voi käyttää embed/objectia Flashin lisäämiseen?
   • Flowplayerin vaihtoehtoiset asennukset (embed/object)
10. QUIRKS
    • Quirks-esimerkkejä
    • Romahtavat marginaalit
    • Mikä quirksmode? Mitä quirksmodessa tapahtuu?
    • W3:n XHTML- ohjenuorat ja mediatyypit; vinkkejä selainyhteensopivuuteen.
11. Hyviä, mutta vähän käytettyjä web-standardeja // TODO:
    • XML + client-side XSLT!
      • XML vs. JSON -demo
      • Google AJAXSLT ja sille jQuery-plugin
      • XSLT-jQuery-plugin 1 (osaa parametrit, vaatii lisäplugareita)
      • XSLT-jQuery-plugin 2 (ei osaa parametreja, mutta toimii kuristetuissa IE:ssa)
    • svg
    • rdf
      • rss 1.0
      • rss vs. atom
      • SPARQL, Dojo RdfStore?
      • xfn vs. foaf
    • canvas
    • textile basecamp
    • BOOKMARKLET readability!
    • YES!
    • not-sIFR: http://wiki.github.com/sorccu/cufon/about
12. Yhteenveto

Harjoitukset

Kurssilla on kuusi harjoituskertaa, harjoitukset alkavat ja loppuvat samalla viikolla kuin luennot. Harjoituksista saa 1 pisteen / osallistumiskerta.

Harjoitustehtävät

• Harjoitukset 1 ensimmäiselle viikolle.
• Harjoitukset 2 toiselle viikolle.
• Harjoitukset 3 kolmannelle viikolle.
• Harjoitukset 4 neljännelle viikolle.
• Harjoitukset 5 viidennelle/kuudennelle (pääsiäinen) viikolle.
• Harjoitukset EXTRA auttamaan tehtävissä.

Harjoitusryhmät mikroluokassa B221

1. LuK Eero Pailinna ti 14-16
2. LuK Petrus Repo ke 16-18
3. MuK Samuli Kaipiainen to 12-14 (in english)
4. LuK Petrus Repo pe 12-14
5. MuK Matti Paksula pe 10-12

Pääsiäinen

Pääsiäisloma on viikoilla 15-16, torstaista 9.4. keskiviikkoon 15.4. Katso ensimmäisistä luentokalvoista, mitä tästä seuraa.

Harjoitustyö

Harjoitustyö tehdään kahdessa osassa. Ensimmäinen osa palautetaan 5.4., jonka jälkeen työstä saa välipalautteen sekä listan vielä tehtävistä ja korjattavista asioista. Harjoitustyön lopullinen palautuspäivä on 29.4.

Harjoitustyön ohjeet ja aiheet löytyvät harjoitustyösivulta.

Kurssimateriaali

Kaikki kurssilla tarvittava materiaali löytyy netistä. Tässä mainioiksi todettuja.

X(HT)ML ja CSS

• Wikipedia: XHTML ja CSS.
• W3-konsortion TR-sivuilta löydät alkuperäiset, kattavat standardit, jotka ovat kurssin tärkein tiedonlähde:
  • HTML 4.01
  • XHTML 1.0
  • CSS 2.1
  • HTML-validaattori ja CSS-validaattori
  • How to Read W3C Specs
• QuirksModessa mahtavat selainyhteensopivuustaulukot!
• Jukka Korpelalla on paljon hyvää WEB-matskua, esim. saavutettavuudesta.
• HTML Dogin tutoriaalit (XHTML ja CSS) ovat lupsakoita ja perusteellisia perusteiden opettelun välineitä.
• Vuokon Haaga-Helia-matsku on sinulle, joka haluat suomea.

DOM ja JavaScript

• Wikipedia: JavaScript ja DOM.
• W3: DOM-tasot
• W3: XMLHttpRequest
• developer.mozilla.org API+referenssi arreaitta!
• Unobtrusive JavaScript (sisältää vaihtoehtoisen kurssikirjan!)

Kurssikirjat

Kurssikirjoiksi valittiin ja vastaavista vaihtoehdoista parhaiksi todettiin:

• Steve Krug: Don't Make Me Think
• Jeremy Keith: DOM Scripting: Web Design with JavaScript and the Document Object Model

Don't Make Me Think löytyy myös suomennettuna Älä pakota minua ajattelemaan (readme.fi) ja se löytyy opiskelijakirjastosta.

Kirjoja tilattiin tiedekirjastoon 3+3 kpl lainattavaksi ja 1+1 kpl lukusaliin. Kirjoja ei tarvitse ostaa. Ne ovat kuitenkin hyödyllistä ja mahtavaa lisämateriaalia.

Tentti

Tiistaina 28.4. klo 16-19 salissa A111.

Tentissä ei kysytä yksityiskohtia, vaan suurempia kokonaisuuksia. Tentissä ei koodata paperille, mutta tentissä saatetaan kysyä, mikä on vialla annetussa koodissa. Kurssikirjoja ei tarvitse lukea tenttiä varten.

Erilliskoe

Kurssin voi suorittaa myös erilliskokeella. Erilliskoe perustuu kurssikirjoihin ja luentomateriaaliin. Erilliskokeeseen sisältyy kotikoetehtävänä harjoitustyön laatiminen. Erilliskokeiden ajat löytyvät laitoksen koeaikataulusta.

Palaute

Voit antaa palautetta kurssista milloin tahansa oheisella lomakkeella. Palautteen lukee Matti ja Samuli. Hyvä (eli herkullinen) palaute välitetään Jaakko Kurhilalle (opintoesimies). Jos haluat vastauksen, laita viestiin yhteystietosi.

---

Sivua muokattu viimeksi: 05.09.2009 16:17