Tvorba přizpůsobivých webových rozhraní

Rozměr: px

Začít zobrazení ze stránky:

Download "Tvorba přizpůsobivých webových rozhraní"

Břetislav Marek
před 8 lety
Počet zobrazení:

1 Tvorba přizpůsobivých webových rozhraní Diplomová práce Bc. Jiří Stránský vedoucí práce doc. Ing. Jiří Sochor, CSc.

2 Zadání práce Tvorba přizpůsobivých webových rozhraní (PC, mobil, tablet) z technického pohledu Na straně klienta Na straně serveru Webová rozhraní pro mobilní zařízení s různými hustotami bodů na displeji SW knihovna pro Ruby on Rails Přizpůsobení na straně serveru (detekce, větvení)

3 Kontext práce Růst chytrých telefonů a mobilního internetu Aktuální příležitosti pro byznys Interim Project Narubi Webové aplikace použitelné napříč zařízeními Start v rámci SSME Interim Project, podzim 2011

4 Přehled technik přizpůsobení Na straně klienta Responsive web design Na straně serveru Úprava výstupu serveru Přesměrování na samostatné aplikace

5 Responsive web design Realizován pomocí CSS Doplňkově také JavaScript Všem klientům stejná odpověď serveru Klienti upravují vykreslení dle svých vlastností Nejčastěji dle rozlišení displeje

6 Responsive web design

7 Úprava výstupu serveru Detekce typu zařízení Skupiny počítač, mobil, (tablet) Heuristika pracující s HTTP hlavičkou (user-agent) nebo volba pomocí URL, uložení cookie, Výpis HTML dokumentu se pozmění dle typu zařízení

8 Úprava výstupu serveru

9 Samostatné aplikace Detekce typu zařízení Skupiny počítač, mobil, (tablet) Heuristika pracující s HTTP hlavičkou (user-agent) nebo volba pomocí URL, uložení cookie, Klient je přesměrován na jednu z více aplikací dle typu zařízení

10 Samostatné aplikace

11 Srovnání technik Na straně klienta (Responsive web design) Přesnější a jemnější úpravy dle vlastností zařízení Menší zásah do struktury aplikace Na straně serveru Šetrnější na množství přenesených dat Lze provádět výraznější změny Samostatné aplikace umožňují i změnu workflow Techniky lze do jisté míry kombinovat

12 Rozdílnost mobilních displejů Kvalita displejů (hustota pixelů) se může násobně lišit napříč zařízeními. 125 dpi (HTC Wildfire) vs. 326 dpi (iphone 4) Na iphone by se rozhraní vykreslilo téměř 3x menší Řešení: průhled (virtuální vykreslovací plocha) Nastavitelný webovou aplikací Prozatím nestandardizováno, rozdíly v implicitním chování prohlížečů

13 Průhled šířka a hustota pixelů Simulovaná šířka displeje Implicitně nastavena pro nepřizpůsobivá rozhraní Vypnout pro přizpůsobivá rozhraní Simulovaná hustota pixelů Možnost sjednotit velikost virtuálního pixelu Implicitní nastavení prohlížečů nejsou stejná

14 Implicitní nastavení

15 Bez virtualizace <meta viewport= width=device-width, target-densitydpi=device-dpi >

16 Implicitní simulace hustoty px <meta viewport= width=device-width >

17 Doporučená simulace hustoty px <meta viewport= width=device-width, target-densitydpi=medium-dpi >

18 Knihovna Mobvious SW knihovna přizpůsobení na straně serveru Výběr verze rozhraní (detekce typu zařízení) Konfigurace návrhový vzor Strategie Základní strategie: heuristika nad řetězcem user-agent, URL pattern matching, cookie Větvení kódu aplikace Rozděleno na dva moduly Mobvious výběr rozhraní (pro Rails, Sinatra, ) Mobvious-Rails větvení kódu (pouze pro Rails)

19 Knihovna Mobvious ukázka Konfigurace detekčního modulu Mobvious Mobvious.configure do config config.strategies = [ Mobvious::Strategies::Cookie.new([:mobile, :tablet, :desktop]), Mobvious::Strategies::MobileESP.new(:mobile_tablet_desktop) ] end Větvení kódu pomocí modulu Mobvious-Rails <% for_device_type :mobile do %> <%= stylesheet_link_tag 'mobile_styles' %> <% end %>

20 Knihovna Mobvious počty stažení Mobvious Mobvious-Rails

21 Použití výsledků práce Techniky přizpůsobení Vykreslování na různých displejích Získání základní orientace Klíčové vývojářské znalosti hodí se při tvorbě téměř každé přizpůsobivé webové aplikace Knihovna Mobvious Pro Ruby (Ruby on Rails) webové aplikace Open-source, nerestriktivní licence MIT Dobrá dokumentace a unit testy

22 Děkuji za pozornost Otázky?

Podobné dokumenty

KIV/PIA 2012 Ing. Jan Tichava

KIV/PIA 2012 Ing. Jan Tichava Opera Mini Zobrazených stránek za měsíc 90 G 80 G 70 G 60 G 50 G 40 G 30 G 20 G 10 G 0 G January 2011 May 2011 September 2011 January 2012 May 2012 September 2012 State of