Práce se zabývá přizpůsobením uživatelského rozhraní webových stránek pro různá zobrazovací zařízení. V práci jsou popsány nejběžnější zařízení pro zobrazování webových stránek. Popsán je také design přizpůsobivých uživatelských rozhraní a metody jejich tvorby. V úvodu praktické části jsou vyjmenovány požadavky pro tvorbu přizpůsobivého uživatelského rozhraní na daném projektu. Práce dále nabízí analýzu současného nepřizpůsobivého uživatelského rozhraní projektu, při zobrazení na různých zobrazovacích zařízeních. Popsán je i vytvořený design přizpůsobivého uživatelského rozhraní, který se podrobil uživatelskému testování na různých zařízeních. Výsledky testování jsou v práci detailně popsány.
Anotace v angličtině
The aim of the thesis is to examine flexible user interface and adaptation of web pages to various display devices. The most common display devices for browsing the web are introduced to the reader, as well as the design of a flexible user interface and methods used when designing such a web application. The requirements of the particular project are stated in the introduction of the practical part, the thesis also concerns an analysis of the contemporary static user interface of the project when viewed on various display devices. The design and the structure of the flexible user interface are described, the responsive web design was a subject of a user testing on various display devices and results of the testing follow in detail.
Klíčová slova
Responzivní webdesign, detekce zařízení, přizpůsobivé uživatelské rozhraní, přizpůsobivý layout, Media Queries, CSS, HTML, zobrazovací zařízení, mobilní zařízení
Klíčová slova v angličtině
Responsive web design, device detection, flexible user interface, flexible layout, Media Queries, CSS, HTML, display devices, mobile devices
Rozsah průvodní práce
115 s.
Jazyk
CZ
Anotace
Práce se zabývá přizpůsobením uživatelského rozhraní webových stránek pro různá zobrazovací zařízení. V práci jsou popsány nejběžnější zařízení pro zobrazování webových stránek. Popsán je také design přizpůsobivých uživatelských rozhraní a metody jejich tvorby. V úvodu praktické části jsou vyjmenovány požadavky pro tvorbu přizpůsobivého uživatelského rozhraní na daném projektu. Práce dále nabízí analýzu současného nepřizpůsobivého uživatelského rozhraní projektu, při zobrazení na různých zobrazovacích zařízeních. Popsán je i vytvořený design přizpůsobivého uživatelského rozhraní, který se podrobil uživatelskému testování na různých zařízeních. Výsledky testování jsou v práci detailně popsány.
Anotace v angličtině
The aim of the thesis is to examine flexible user interface and adaptation of web pages to various display devices. The most common display devices for browsing the web are introduced to the reader, as well as the design of a flexible user interface and methods used when designing such a web application. The requirements of the particular project are stated in the introduction of the practical part, the thesis also concerns an analysis of the contemporary static user interface of the project when viewed on various display devices. The design and the structure of the flexible user interface are described, the responsive web design was a subject of a user testing on various display devices and results of the testing follow in detail.
Klíčová slova
Responzivní webdesign, detekce zařízení, přizpůsobivé uživatelské rozhraní, přizpůsobivý layout, Media Queries, CSS, HTML, zobrazovací zařízení, mobilní zařízení
Klíčová slova v angličtině
Responsive web design, device detection, flexible user interface, flexible layout, Media Queries, CSS, HTML, display devices, mobile devices
Zásady pro vypracování
Proveďte literární rešerši na téma přizpůsobivého webového designu.
Analyzujte současný stav uživatelského rozhraní pro různá zobrazovací prostředí.
Formou projektu navrhněte design přizpůsobivého uživatelského rozhraní.
Realizujte přizpůsobivé uživatelské rozhraní s ohledem na bezpečnost aplikace.
Proveďte vyhodnocení projektu a diskusi nad jeho výstupy.
Zásady pro vypracování
Proveďte literární rešerši na téma přizpůsobivého webového designu.
Analyzujte současný stav uživatelského rozhraní pro různá zobrazovací prostředí.
Formou projektu navrhněte design přizpůsobivého uživatelského rozhraní.
Realizujte přizpůsobivé uživatelské rozhraní s ohledem na bezpečnost aplikace.
Proveďte vyhodnocení projektu a diskusi nad jeho výstupy.
Seznam doporučené literatury
MARCOTTE, Ethan. Responsive web design. New York: A Book Apart, 2011. ISBN 978-0-9844425-7-7.
WROBLEWSKI, Luke. Mobile First. New York: A Book Apart, 2011. ISBN 978-1-937557-02-7.
KRUG, Steve. Nenuťte uživatele přemýšlet!: Praktický průvodce testováním a opravou chyb použitelnosti webu. Brno: Computer Press, 2010. ISBN 978-80-251-2923-4.
DAWSON, Alexander. Výjimečný webdesign. Brno: Computer Press, 2012. ISBN 978-80-251-3719-2.
WROBLEWSKI, Luke. Device Experiences & Responsive Design. Facebook Developers [online]. 2012 [cit. 2012-11-11]. Dostupné z: https://developers.facebook.com/html5/blog/post/6/.
The Mobile Movement. Think with Google [online]. 2011 [cit. 2012-11-12]. Dostupné z: http://www.thinkwithgoogle.com/insights/library/studies/the-mobile-movement/.
Responsive eCommerce. Gravity Department [online]. 2012 [cit. 2012-11-12]. Dostupné z: http://gravitydept.com/blog/responsive-ecommerce/.
Seznam doporučené literatury
MARCOTTE, Ethan. Responsive web design. New York: A Book Apart, 2011. ISBN 978-0-9844425-7-7.
WROBLEWSKI, Luke. Mobile First. New York: A Book Apart, 2011. ISBN 978-1-937557-02-7.
KRUG, Steve. Nenuťte uživatele přemýšlet!: Praktický průvodce testováním a opravou chyb použitelnosti webu. Brno: Computer Press, 2010. ISBN 978-80-251-2923-4.
DAWSON, Alexander. Výjimečný webdesign. Brno: Computer Press, 2012. ISBN 978-80-251-3719-2.
WROBLEWSKI, Luke. Device Experiences & Responsive Design. Facebook Developers [online]. 2012 [cit. 2012-11-11]. Dostupné z: https://developers.facebook.com/html5/blog/post/6/.
The Mobile Movement. Think with Google [online]. 2011 [cit. 2012-11-12]. Dostupné z: http://www.thinkwithgoogle.com/insights/library/studies/the-mobile-movement/.
Responsive eCommerce. Gravity Department [online]. 2012 [cit. 2012-11-12]. Dostupné z: http://gravitydept.com/blog/responsive-ecommerce/.
Přílohy volně vložené
-
Přílohy vázané v práci
-
Převzato z knihovny
Ne
Plný text práce
Přílohy
Posudek(y) oponenta
Hodnocení vedoucího
Záznam průběhu obhajoby
Student seznámil komisi s obsahem a výsledky své diplomové práce v krátké prezentaci. Po přečtení posudků vedoucího a oponenta práce následovala diskuze, ve které byly položeny následující dotazy:
1.Ing. Russek: V některých verzích adaptivního webdesignu byla vynechána možnost filtrování
produktů podle různých kritérií, které jsou dostupné například v desktopové verzi. Je pro
tento krok konkrétní důvod? Předpokládá se, že například u mobilních telefonů, nemá
uživatel potřebu filtrovat podle konkrétní velikosti, značky, či barvy?
2.Ing. Russek: V ?media queries? jsou použity jednotky centimetrů pro detekci velikosti displeje
zařízení. Používají se tyto jednotky běžně v praxi?
3.Ing. Russek: Pro responsive webdesign vznikla již řada kvalitních frameworků. Můžete zdůvodnit,
proč nebyl některý z nich použit a vsadil jste spíše na své vlastní řešení? Zkoumal jste
některé z nich?
4. dr. Maláník: Je resposivní celý web?
5. doc. Prokopová: Co byl největší problém při tvorbě?
Student na položené dotazy odpověděl. Následovalo zkoušení ze tří předmětů.