...
W3C : Developing Mobile Web Applications
Puhujat: Frances de Waal, WaalWeb owner ja Robin ?? joka tulee toisen tilalle ("Dominique Hazaël-Massieux, W3C Mobile Web Initiative Activity Lead and Frances de Waal, WaalWeb owner" ei päässytkään.)
Frances aloittaa, hän opettaa myös w3campus kursseilla: http://www.w3devcampus.com/
...
Mediakyselyistä seuraavaksi (jolla voi esim tarjota yhtä tyylimäärettä isoille näytöille ja toista pienille.) Mediakyselyjä on parempi käyttää CSS-tiedoston sisällä (eik eikä esim. kaksi eri tiedostoa) koska kaikki sleaimet lataavat joka tapauksessa kaikki tyylitiedostot (vaikka eivät niitä käyttäisi), joten tämä synnyttää ylimääräisiä http-kyselyjä jne.
Vierustoveri vastustaa tätä, koska hän toivoo selainten kohta osaavan ladata vain tarvittavan tyylitiedoston, mutta sitä ei tiedä milloin se aika koittaa.
Nyt hands-on kokeilua, eli koodin tutkimista & kokeilua. Katso täältä: http://lyon.waalweb.nl/lesstof/
sivun ala-laidassa BEETHOVEN-tiedostot. Vertaa esim nämä:
- http://lyon.waalweb.nl/lesstof/2-beethoven-enhanced/beethoven-linear/linear.css
- http://lyon.waalweb.nl/lesstof/2-beethoven-enhanced/beethoven-tablet/tablet.css
- http://lyon.waalweb.nl/lesstof/2-beethoven-enhanced/beethoven-desktop/desktop.css
- http://lyon.waalweb.nl/lesstof/2-beethoven-enhanced/result-v2/adaptive.css
KAHVITAUKO Nyt jatkuu..
Mielenkiitnoinen kahvikeskustelu, minulle suositeltiin Google Web Toolkitin käyttöä PHP:n sijaan: https://developers.google.com/web-toolkit/
Myöskin suunnittelemaani html5-app-paketoija (phonegap) on kuulema huono, eikä ole hyvää tapaa tehdä html5:llä mobiiliappeja android ja iphone -kauppoihin. Webbisivuja kyllä, mutta ei appeja. (Oiskohan näin, pitää selvitellä & kokeilla. Tämä muuttaisi kesän mobiiliapp-kurssia 
)
Optimization
Miksi optimoida?
- tarvittu kaista pienenee (bandwdth)
- nopeus lisääntyy
- halvempaa tiedonsiirtoa
- mobiiliakut kestääpidempään
Voi harkita Sprite:n käyttöä, jos haluaa optimoida joitain osia sivullaan yhteen ainoaan lataukseen. Sprote on yksi iso kuva, eli yksi lataus, ja sen osia voi käyttää eri kohdissa. Lisää Spriteistä esim. täällä: http://css-tricks.
...
Cache-control: kirjoitetaan PHP:ssä, ja tämä pakottaa palvelimen pitämään tiedostot välimuistissa tetyn ajan (joka vähentää palvelimen rasitusta.)
ETags: nämä kertovat selaimelle milloin tiedostoa on muokattu, jolloin selain voi valita tarvitseeko sen ladata uusi tiedosto vai ei.
Expire headers: kannattaa käyttää, näillä voi määritellä kauanko sivu on voimassa, eli milloin pitää ladata uusi versio.
gZip: tällä voi palvelimella zipata tiedostot, jolloin verkon yli menee zipatut tiedostot ja etäpalvelin hoitaa zipin purun.
On olemassa työkaluja / palveluja jotka poistavat oodista turhat erkit (välilyönnit, rivinvahdot) ja kommentit jne. Optimoi siis kooditiedoston mahdollisimman pieneksi.
Hyvä lähde, jos haluaa oppia lisää välimustin optimoinnista on: http://www.mnot.net/cache_docs/
Adaptive Content (sisällön mukautuminen tarpeen mukaan)
Kyseessä on yksi (1) sivu, jolla on eri sisältö mobiili ja pöytäkoneille. Miten tämä tehdään? tarvitsemme päätelaittunnistuksen. Eli scriptin joka tunnistaa, onko asiakas mobiililaitteella vai ei. Sen jälkeen tietokannasta tarkistetaan mitä asiakkaalle tulisi tarjota.
Käytännössä kyse suht monimutkainen php-tiedosto, joka yleensä pitää sisällään koko saitin. Eli on yksi kehys-PHP-tiedosto joka rakentaa eri osista eri alasivuja riippuen paitsi käyttäjän selaimesta / alustasta myös riippuen siitä millä ns. "alasivulla" käyttäjä on tällä hetkellä menossa.
Seuraava osio tulee olemaan improvisoitu ilman kalvoja koska alkuperäinen puhuja ei päässyt ja tämä henkilö sai vasta eilen tietää tulevansa tänne tänään.
Robin Berjon
Robin aloittaa näyttämällä & puhumalla vähän Mobiilikontekstissa hyödyllisistä API:sta.
Web Storage
Mahdollistaa offline toiminnan, voi talettaa paikallisesti tietoa. Vähän kuten hyvin yksinkertainen paikallinen tietokanta.
IndexDB
Paljon tehokkaampi tallennustapa, ei käytä SQL:ää, mutta on muuten verrattavissa siihen, paitsi että tämä on hieman vaativampi / vaikeampi käyttää.
Application Cache
Ei dokumenteile, vaan ohjelmille, webbisivukokonaisuuksille. Käskee selaimen pitämään kokonaisuuden välimuistissa, joka mahdollistaa verkko-ohjelman käytön offline. Tätä ei vielä tueta niin hyvin kuin pitäisi, tämä on siis aika raakaversio tekniikasta yhä. Tämän testaamista ja kokeilua suositellaan silti, esim. mobiiliappien pakkaamiseen ennen app-kauppaan toimittamista.
Mielenkiintoista: Tutkimus on osoittanut että selaimet ovat hyvin erilaisia toisistaan tänä päivänä, joten tämä mahdollistaa käyttäjien seuraamisen verkossa tavalla josta ei yleensä keskustella. Siihen ei edes tarvita mitään erityiskeksejä, tai esim. Flashin superkeksejä jotka keräävät tietoa käyttäjistä.
Mobiililaitteissa on mielenkiintoisia sensoreita joita voi hyödyntää. Esim. kallistus, kiihdytys, lämpö ja läheisyys -sensorit. Yleisempiä on kuitenkin kamera ja mikrofoni.
Kännykän kameran voi saada käyttöönsä ihan vain perus <input type="file" capture="camera"> -merkkauksella. Ääni on hankalampi, ja siihen kehitetään Javascript liittymä.
Geolokaation (GPS) käyttö on aika suoraa ja helppoa lyhyellä javascript-pätkällä: navigator.geolocation.getCurrentPosition(...
Orientaatio, eli miten päin laite on. Tätä voisi gyödyntää esim. mobiililaitepeleissä. Laitteista saa yksinekrtaisia tapahtumia scriptillä, mutta saatujen tietojn käyttö / tulkinta voi olla aika vaikeaa.
Myös laitteistoon (hardware) voidaan kohta olla yhteydessä, esim. akkuun ja vibraatioon. Javascriptillä esim: navigator.vibrate(100);
Lopuksi vapaata keskustelua, esim. tietoturvasta ja webbiappien yleistymisestä (käyttääkö ihmiset enää desktop-ohjelmia?) Myöskin rahasta, verkkorahanvaihtoa pohditaan paljon nykyään, ja sen suhtene odotetana ensi vuonna jonkinlaisia julkaisuja / standardeja kenties.
(Robinin joitain kalvoja julkaistaan myöhemmin, laitan sitten linkin tänne kunhan muistan ja huomaan.)
LOPPU / FIN