Tvorba přizpůsobivých webových rozhraní Diplomová práce Bc. Jiří Stránský vedoucí práce doc. Ing. Jiří Sochor, CSc.
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í)
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
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
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
Responsive web design
Ú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í
Úprava výstupu serveru
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í
Samostatné aplikace
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
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čů
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á
Implicitní nastavení
Bez virtualizace <meta viewport= width=device-width, target-densitydpi=device-dpi >
Implicitní simulace hustoty px <meta viewport= width=device-width >
Doporučená simulace hustoty px <meta viewport= width=device-width, target-densitydpi=medium-dpi >
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)
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 %>
Knihovna Mobvious počty stažení 2000 1800 1600 1400 1200 Mobvious Mobvious-Rails 1000 800 600 400 200 0 12.2.2012 12.3.2012 12.4.2012 12.5.2012 12.6.2012
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
Děkuji za pozornost Otázky?