You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 20 Next »

www2012, tiistai aamupäivä

W3C : Developing Mobile Web Applications

Puhujat: Dominique Hazaël-Massieux, W3C Mobile Web Initiative Activity Lead and Frances de Waal, WaalWeb owner

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(question) ) 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ä:

  • No labels
You must log in to comment.