Responzivní web

Štěpán Farka

Bakalářská práce

Responsive website

Anotace:

Bakalářská práce je zaměřena na problematiku tvorby responzivních webových stránek. Hlavním cílem práce je analýza nástrojů a způsobů, které se používají k tvorbě responzivních návrhů. Teoretická část obsahuje literární rešerši odborných informačních zdrojů, kde jsou představeny moduly, jako flexbox a grid, které se v současnosti používají při implementaci responzivních webových stránek. Jsou představeny a pospány dílčí vlastnosti jednotlivých modulů. Dále se teoretická část zaměřuje na představení techniky Container Queries. Součástí teoretické části je seznámení s CSS frameworky Bootstrap a Tailwind CSS a popsání způsobu vykreslení webové stránky. Praktická část je zaměřena na tvorbu responzivních komponent s následnou implementací webové stránky. Jednotlivé komponenty jsou nejprve navrženy a následně implementovány. Implementace jsou porovnány srovnáním se stanovenými kritérii. Pomocí analýzy SWOT je zhodnocena implementace techniky Container Queries. Z porovnání a analýzy jsou formulovány výsledky.

Abstract:

The bachelor thesis is focused on the issue of creating responsive websites. The main goal of the thesis is to analyse the tools and methods that are used to create responsive designs. The theoretical part includes a literature search of professional information sources, where modules such as flexbox and grid, which are currently used in the implementation of responsive websites, are introduced. The partial properties of each module are introduced and discussed. Furthermore, the theoretical part focuses on the introduction of the Container Queries technique. The theoretical part includes an introduction to the Bootstrap and Tailwind CSS frameworks and a description of how to render a web page. The practical part focuses on the creation of responsive components with subsequent implementation of a web page. The individual components are first designed and then implemented. The implementations are compared against the established criteria. Using SWOT analysis, the implementation of the Container Queries technique is evaluated. From the comparison and analysis, results are formulated.

Klíčová slova

HTML, CSS, Tailwind CSS, Bootstrap, Flex, Grid, Responzivita

Keywords

HTML, CSS, Tailwind CSS, Bootstrap, Flex, Grid, Responsivity

Jazyk práce: čeština

Datum vytvoření / odevzdání či podání práce: 14. 3. 2024

Obhajoba závěrečné práce

• Obhajoba proběhla 21. 5. 2024
• Vedoucí: doc. Ing. Pavel Šimek, Ph.D.
• Oponent: Miroslav Brabec, Ing.

Česká zemědělská univerzita v Praze

Provozně ekonomická fakulta

Bakalářský studijní program:
Informatika