Esittely latautuu. Ole hyvä ja odota

Esittely latautuu. Ole hyvä ja odota

Mukautuvat web-sivut Joni Korpi 01/20. Määritelmä Sivu, jonka asettelu – ja mahdollisesti sisältö – muuttuvat laitteen koon mukaan. 02/20.

Samankaltaiset esitykset


Esitys aiheesta: "Mukautuvat web-sivut Joni Korpi 01/20. Määritelmä Sivu, jonka asettelu – ja mahdollisesti sisältö – muuttuvat laitteen koon mukaan. 02/20."— Esityksen transkriptio:

1 Mukautuvat web-sivut Joni Korpi 01/20

2 Määritelmä Sivu, jonka asettelu – ja mahdollisesti sisältö – muuttuvat laitteen koon mukaan. 02/20

3 Esitelmän sisältö 1. Vanha kehitystapa 2. Uusi kehitystapa 3. Yhteenveto & parhaat käyttökohteet 4. Resursseja kiinnostuneille 03/20

4 Vanha tapa Monta erillistä sivustoa 04/20

5 Zeit Online 05/20

6 Facebook 06/20

7 Erilliset sivustot Usein täysin erillinen: HTML, CSS & Javascript Templaattikoodi Paljon työtä Lähinnä raskaille sivuille 07/20

8 Ongelmia Käyttäjien ohjaus Selainnuuhkiminen Vaatii jatkuvaa ylläpitoa Virhealtista Epäyhtenäisyys 08/20

9 Uusi tapa Yksi mukautuva sivusto 09/20

10 Eroja vanhaan Yksi yhtenäinen sivusto Mukautuu selaimen kokoon Ei selainnuuhkimista Ei käyttäjien ohjailua 10/20

11 CSS3 media queryt Osa CSS3-standardia Ottaa käyttöön tietyn palasen CSS:ää, kun määrätyt ehdot toteutuvat Periaatteessa IF-lauseke Käytetään CSS-tyylien yliajamiseen 11/20

12 “Jos selaimen leveys on tämä, tee näin.” #sivu {font-size: 16px; color: black;} @media (min-width: 1280px) { #sivu {font-size: 18px;} } 12/20

13 “Tämä on mukautuva sivu. Käytä näytön oikeaa leveyttä.” 13/20

14 Selaintuki Standardi Kaikki paitsi: Internet Explorer 6–8 Vanha Nokia Webkit & Opera Respond.js lisää tuen 14/20

15 Kaksi tyyppiä Staattinen (static/adaptive) Esim. Information ArchitectsInformation Architects Perinteisempi Venyvä (responsive) Esim. Ethan MarcotteEthan Marcotte Esim. SparkboxSparkbox 15/20

16 Ongelmia “Kokoteeskentely” Esim. Samsung Galaxy Tab Kehittäjä ei voi tälle mitään Laitevalmistajien ongelma Tiedostokoot ehkä raskaita 3G:lle 16/20

17 Pohdittavaa Sopiiko sama sisältö kaikille laitteille? Haluaako kännykällä selaaja eri asioita, kuin PC:llä selaaja? Kosketusnäytöt vs. hiiri Erilaiset vaatimukset 17/20

18 Yhteenveto 18/20

19 Kertausta Uusi tapa normaaleille sivuille Media queryt: standardeja Korjataan tuki Respond.js:llä Staattinen vs. venyvä Pidetään konteksti mielessä Vanha tapa erikoistapauksissa 19/20

20 Kiinnostuitko? Googlaa “responsive design” A List Apart – Responsive Web Design ethanmarcotte.com / @beep ethanmarcotte.com lessframework.com @jonikorpi / me@jonikorpi.comme@jonikorpi.com 20/20


Lataa ppt "Mukautuvat web-sivut Joni Korpi 01/20. Määritelmä Sivu, jonka asettelu – ja mahdollisesti sisältö – muuttuvat laitteen koon mukaan. 02/20."

Samankaltaiset esitykset


Iklan oleh Google