Developing Mobile Web Applications

www2012, tiistai aamupäivä

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" ei päässytkään.)

Frances aloittaa, hän opettaa myös w3campus kursseilla: http://www.w3devcampus.com/

Hänen luentokalvonsa löytyvät täältä: http://prezi.com/u8vjitqgfyui/view/#6_1548328
ja puhujan jonknlainen sivu: http://lyon.waalweb.nl/lesstof/

Tämä n.60 hengen pikkusali on ihan täpötäynnä.

Aloitetaan päivä tehtävällä: luetelkaa pahimmat mobiiliverkkokokemuksenne. Tällaisia yleisö luettelee:

Horisontaalinen skrollaus
videon käyttö mobiiliapeissa
flash-ongelmat eri mobiilialustoilla
ruudun koko, eli resoluutio-ongelmia
eri URLi mobiili ja pöytäkoneille (one web)
mobiiliversion puuttuminen kokonaan
viewport orientation, eli alustan orientaation muuttuminen
URLin pituus (liian pitkät & sekavat osoitteet)
isot tiedostot
pop-up ikkunat
tiettyjen oikean hiiren napin toimintojen puuttuminen (esim. "view source", vaikak sillekin kuulema löytyy oma appi)

Kysymys: ketkä käyttää HTL:ssä target="_blank" -koodia? (Yksi viittaa.) Puhuja sanoo että tämän päivän jälkeen kukaan ei käytä sitä enää.

Tulemme käsittelemään tänään suurinta osaa näistä asioista, mutta ei kaikkia.
Tänään käsittelemme:

Good habits (vähäsen vain / nopeati)
Adaptive design
Optimization
Adaptiivinen sisältö

Good habits

Tehkää validia koodia, käyttäkää Doctype-määrityksiä. Käyttäkää UTF-8:ia. (Nyt tulee kyllä tosi peruskamaa.) Laittakaa Javascript ulkoisiin tiedostoihin (jos on bodyssä, se voi sekoittaa mobiililaitteita ) Käyttäkää suhteellisia määreitä, esim. em ja prosentteja %. Lisäksi tähän kaikki muut perusdesignjutut jotka on turhankin selviä (esim. käyttää kuvissa alt-määreitä, ..) PNG-kuvamuotoa ei tue kaikki mobiililaitteet, joten suosikaa jpg ja gif-kuvia. Älkää käyttäkö taulukoita (table) layoutiin. Ei pop-up ikkunoita.

Adaptive design

Nyt puhumme sivun layoutista, siten että yksi ja sama sivu toimisi sekä pöytäkoneella että mobiililaitteilla. (Eli tämäkin tuttua meille, mutta hyvin ajankohtaista.) Kannattaa myös käyttää CSS :hover -määrettä jolloin tabulaattorilla navigoivat saavat saman mouseover -tekstin kuin hiirtä käyttävät.

Mobiililaitedesignissa tulisi ottaa sormen koko huomioon. Pienin sallittu koko on sormenpään koko.

JavaScriptin tulisi vain olla avustava lisä. Ottakaa huomioon että perustoiminnot toimivat myös ilman JS:ää.

Kuvien kokosuositus: max 120pix mobiililaitteelle. Jos kuvat siirtää HTML:stä CSS:ään, niin voi tarjota eri kuvan käyttäjälle alustan mukaan. Tässä tulee taas semanttisia ongelmia. Myöhemmin tänään käsitellään myös miten html:ssä olevan kuvan voi vaihtaa.

Hyvä keskustelu siitä että nämä ovat vain hänen suosituksia, mutta jokainen valitsee itse mitä näistä ohjeista käyttää.

Mobile layout: aloita leiskan suunnittelu mobiiliversiosta. Aloita minimi ja lineaarisesta sivusta, kaikki elementit allekkain, ei floatteja tai muita sijoituksia, koko sivu on vain yksi sarake, ei horisontaalia skrollausta. Tämän perusdesignin jälkeen voi lisätä muuta, siten että ne jotka osaavat ne näyttää, ne käyttävät niitä (muut ei).

Navigaatio: pidä header-osa pienenä (ettei se täytä koko mobiililaitteen ruutua.)

Resoluutio on ongelma, 1px ei enää ole 1px laitteesta riippumatta, nyt kun mobiililaitteilla on niin korkeat resoluutiot (kompensoidakseen korkeaa resoluttiota laitteet tulkitsee eri tavoin mitä 1px on.)

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

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.com/css-sprites/

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(...

Child pages