Responzivní web – Štěpán Farka

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. …víceméně

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. …víceméně