Hlavním cílem diplomové práce je vytvořit pojednání o tvorbě responzivního web designu, dostupných frameworcích pro jeho tvorbu a jeho návrhových modelech. V teoretické části práce nalezneme popis jak postupovat při návrhu a dále jsou zde rozebrány dostupné technologie, které při jeho tvorbě využíváme. V praktické části práce, nalezneme srovnání čtyř vybraných existujících responzivních šablon pro e-komerce systém OpenCart, popis samotného systému a jeho výchozí neresponzivní šablony. Dále následuje popis tvorby vlastního řešení responzivní šablony pro výše uvedený systém.
Anotace v angličtině
The main topic of this thesis is a description of the creation responsive web design, available frameworks for the creating design and which design models can be used. In the theoretical part we can find a description of how to proceed with the proposal and discussed the available elements which could be used in the work. In the practical part, we can find a comparison of four selected existing responsive templates, OpenCart system description and its default unresponsive template. This part is followed by description of own created solution of responsive template for OpenCart system.
Klíčová slova
responzivní web design, e-komerce, e-shop, OpenCart, frameworky pro tvorbu responzivního layoutu, Skeleton, Sass
Klíčová slova v angličtině
responsive web design, e-commerce, e-shop, OpenCart, framework for building responsive layout, Skeleton, Sass
Rozsah průvodní práce
75 s. (83 528 znaků)
Jazyk
CZ
Anotace
Hlavním cílem diplomové práce je vytvořit pojednání o tvorbě responzivního web designu, dostupných frameworcích pro jeho tvorbu a jeho návrhových modelech. V teoretické části práce nalezneme popis jak postupovat při návrhu a dále jsou zde rozebrány dostupné technologie, které při jeho tvorbě využíváme. V praktické části práce, nalezneme srovnání čtyř vybraných existujících responzivních šablon pro e-komerce systém OpenCart, popis samotného systému a jeho výchozí neresponzivní šablony. Dále následuje popis tvorby vlastního řešení responzivní šablony pro výše uvedený systém.
Anotace v angličtině
The main topic of this thesis is a description of the creation responsive web design, available frameworks for the creating design and which design models can be used. In the theoretical part we can find a description of how to proceed with the proposal and discussed the available elements which could be used in the work. In the practical part, we can find a comparison of four selected existing responsive templates, OpenCart system description and its default unresponsive template. This part is followed by description of own created solution of responsive template for OpenCart system.
Klíčová slova
responzivní web design, e-komerce, e-shop, OpenCart, frameworky pro tvorbu responzivního layoutu, Skeleton, Sass
Klíčová slova v angličtině
responsive web design, e-commerce, e-shop, OpenCart, framework for building responsive layout, Skeleton, Sass
Zásady pro vypracování
Zpracujte literární rešerši na téma responzivní layout.
Prostudujte dostupné CSS frameworky pro tvorbu responzivního layoutu.
Vypracujte srovnání dostupných řešení responzivních šablon pro e-commerce platformu OpenCart.
Navrhněte vlastní řešení responzivní šablony pro OpenCart s důrazem na kvalitu uživatelského zážitku a s možností jednoduchého brandingu.
Navrženou šablonu naimplementujte a vytvořte ukázkovou instalaci e-shopu.
Zásady pro vypracování
Zpracujte literární rešerši na téma responzivní layout.
Prostudujte dostupné CSS frameworky pro tvorbu responzivního layoutu.
Vypracujte srovnání dostupných řešení responzivních šablon pro e-commerce platformu OpenCart.
Navrhněte vlastní řešení responzivní šablony pro OpenCart s důrazem na kvalitu uživatelského zážitku a s možností jednoduchého brandingu.
Navrženou šablonu naimplementujte a vytvořte ukázkovou instalaci e-shopu.
Seznam doporučené literatury
CASTRO, Elizabeth a Bruce HYSLOP. HTML5 a CSS3: názorný průvodce tvorbou WWW stránek. 1. vyd. Brno: Computer Press, 2012, 439 s. ISBN 978-80-251-3733-8.
WROBLEWSKI, Luke. Mobile first. New York: A Book Apart, 2011. ISBN 19-375-5702-2.
KADLEC, Tim. Implementing responsive design: building sites for an anywhere, everywhere web. Berkeley, CA: New Riders, c2013, xv, 271 p. ISBN 03-218-2168-8.
FRAIN, Ben. Responsive web design with HTML5 and CSS3: learn responsive design using HTML5 and CSS3 to adapt websites to any browser or screen size. Mumbai: Packt Pub., 2012, vi, 305 p. Community experience distilled. ISBN 9781849693196.
MARCOTTE, Ethan a [foreword by Jeremy KEITH]. Responsive web design. New York: A Book Apart, 2011. ISBN 09-844-4257-X.
Seznam doporučené literatury
CASTRO, Elizabeth a Bruce HYSLOP. HTML5 a CSS3: názorný průvodce tvorbou WWW stránek. 1. vyd. Brno: Computer Press, 2012, 439 s. ISBN 978-80-251-3733-8.
WROBLEWSKI, Luke. Mobile first. New York: A Book Apart, 2011. ISBN 19-375-5702-2.
KADLEC, Tim. Implementing responsive design: building sites for an anywhere, everywhere web. Berkeley, CA: New Riders, c2013, xv, 271 p. ISBN 03-218-2168-8.
FRAIN, Ben. Responsive web design with HTML5 and CSS3: learn responsive design using HTML5 and CSS3 to adapt websites to any browser or screen size. Mumbai: Packt Pub., 2012, vi, 305 p. Community experience distilled. ISBN 9781849693196.
MARCOTTE, Ethan a [foreword by Jeremy KEITH]. Responsive web design. New York: A Book Apart, 2011. ISBN 09-844-4257-X.
Přílohy volně vložené
1 CD ROM
Přílohy vázané v práci
grafy, tabulky
Převzato z knihovny
Ne
Plný text práce
Přílohy
Posudek(y) oponenta
Hodnocení vedoucího
Záznam průběhu obhajoby
Studentka jasně prezentovala výsledky své diplomové práce. Poté došlo k seznámení s posudky vedoucího a oponenta a následně byla vedena rozprava nad diplomovou prací, ve které byly položeny následující dotazy:
Ing. Bezděk: Existuje obecně u CSS preprocesoru možnost automatické kompilace do CSS souboru v případě provedení změny v SCSS souboru? Jakým způsobem?
Ing. Vala: Praktická část pak přináší řešení založené na standardní Opencart šabloně, jež byla pomocí implementace dalších technologií transformována na šablonu responzivní.
prof. Farana: Jak jste dělala celosvětový výzkum rozšíření jednotlivých mobilních zařízení? Chybí mi citace u převzatých grafů. Vytvořený obchod je konkrétní nebo je to modelový příklad? Převezne nějaká konkrétní firma vaše zpracování? Vysvětlete pojem rebranding.
Prof. Dvořák: Jak je to s adresářovou strukturou systému. Jak jste použila jednotlivé šablony.
doc. Jašek: Líbí se midefinice jednotek rozšíření uvedené v práci.
Studentka jasně zodpověděla všechny dotazy, které byly během rozpravy vzneseny.