Responsivní design ANALÝZA A PROJEKTOVÁNÍ SYSTÉMŮ Roman Danel VŠB–TU Ostrava Hornicko-geologická fakulta Institut ekonomiky a systémů řízení.

Slides:



Advertisements
Podobné prezentace
Čísla stran v Microsoft Office Word
Advertisements

Technologie pro publikování na webu 1
Technologie pro publikování na webu 1
Štěpán Šípal Gymnázium Čakovice. Dnešní témata  Vznik XHTML a předchůdci  Základní prvky XHTML dokumentu  Tagy a atributy  Elementy a jejich druhy.
TVORBA WEBOVÝCH STRÁNEK
Základy informatiky úvod
HyperText Markup Language
TNPW1 Cvičení
Základy informatiky Ing. Roman Danel, Ph.D.
TVORBA WEBOVÝCH STRÁNEK
RESPONSIVNÍ WEB DESIGN. WEBOVÉ STRÁNKY 2 Číslo projektuCZ.1.07/1.5.00/ Označení materiálu VY_32_INOVACE_15 Šablona III/2 Inovace a zkvalitnění.
Layout stránky Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Určení polohy záhlaví, menu, textů, obrázků... Zachování polohy při změně.
Návrh a tvorba WWW Cvičení 2 CSS 3. Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu.
METODOLOGIE PROJEKTOVÁNÍ NÁVRH IS PRO TECH. PROCESY Roman Danel VŠB – TU Ostrava HGF Institut ekonomiky a systémů řízení.
PC Personal Computer Osobní počítač. Historie PC Osobní počítač.
Tvorba webových stránek II. Odkazy, obrázky, seznamy.
Základy informatiky Internet Ing. Roman Danel, Ph.D. Institut ekonomiky a systémů řízení Hornicko – geologická fakulta.
Ing. Roman Danel, Ph.D. Institut ekonomiky a systémů řízení Hornicko – geologická fakulta.
VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
Ročníková práce Školní rok 2012/2013
Odkazy Pomocí odkazu se lze pohybovat mezi stránkami. Cílem může být další stránka nebo identifikátor na aktuální stránce. Pomocí odkazu se lze pohybovat.
KASKÁDOVÉ STYLY 4.
Blokový model v CSS Obr. 1.
Měření mobilních služeb Mobilní metokomise Mobile Internet Forum 2010.
CSS: šířka prvku, rámečky, okraje, výplně plovoucí prvky #CSS – šířka prvku, rámečky, okraje, výplně #CSS – plovoucí prvky.
Textový procesor (MS Word)
U3V Počítačová grafika Organizace kurzu doc. Ing. Stanislav Horný, CSc. gml.vse.cz Vysoká škola ekonomická fakulta.
Úvod do nových médií a komunikace Ing. Jiří Kysela Katedra informačních technologií - Fakulta elektrotechniky.
U3V Počítačová grafika Organizace kurzu doc. Ing. Stanislav Horný, CSc. gml.vse.cz Kristýna Horná, Libor Krsek, Martin Seko a další z GML.
Maturitní okruh 22: Úvod do HTML. Značkovací a klasické jazyky Klasické: převládá strukturovaný text (programovací kód), skripty jsou prováděny na straně.
Referát č.13 Textový editor (struktura textu – přiřazení stylu, formátování (vzhled) textu, změna stylu, typografická a estetická pravidla)
Střední škola služeb a podnikání, Ostrava-Poruba příspěvková organizace Výukový materiál v rámci projektu OPVK 1.5 Peníze středním školám Číslo projektu:
Úvod do nových médií a komunikace Ing. Jiří Kysela Katedra informačních technologií - Fakulta elektrotechniky.
Geoinformační technologie Geografické informační systémy (GIS) Výukový materiál pro gymnázia a ostatní střední školy © Gymnázium, Praha 6, Nad Alejí 1952.
Systémová integrace Big Data
Test z počítačů Vytvořila:Liliana Drukerová Dne:14.června Třída:5.C.
Publikování a export výkresů Přednáška č.5. Témata přednášky e-Transmit Publikování Publikování v síti WWW Export výkresů.
Cvičení 3 - Řešení příkladu na oddíly Zadání viz: cv3_samostatne_oddily.doc.
Moduly ECDL M3_Word - prostředí
VY_32_INOVACE_4.3.IVT1.06/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS pozicování.
Řízení projektů v IT METODOLOGIE PROJEKTOVÁNÍ
PHP Programy pro tvorbu WWW stránek - 01
Bezpečnostní politika
I NOVACE VÝUKY INFORMATICKÝCH PŘEDMĚTŮ VE STUDIJNÍCH PROGRAMECH O STRAVSKÉ UNIVERZITY Z DOKONALOVÁNÍ GRAMOTNOSTI AKADEMICKÝCH A OSTATNÍCH PRACOVNÍKŮ OU.
Základy informatiky Aplikační SW Ing. Roman Danel, Ph.D. Institut ekonomiky a systémů řízení Hornicko – geologická fakulta.
Projektový management Certifikace a normy Ing. Roman Danel, Ph.D. Institut ekonomiky a systémů řízení Hornicko–geologická fakulta VŠB-TU.
Typografie a zpracování textů
WEBOVÝ PORTÁL O POČÍTAČOVÝCH HRÁCH ROMAN POSPĚCH.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
MIDAS – krátké představení Jan Růžička Institut ekonomiky a systémů řízení, odd. GIS Hornicko – geologická fakulta, VŠB-TU Ostrava 17.listopadu,
Číslo projektu: CZ.1.07/1.4.00/ Název DUM: Programy pro komunikaci Číslo DUM: III/2/VT/2/2/35 Vzdělávací předmět: Výpočetní technika Tematická oblast:
MS PowerPoint Pokročilé efekty a práce s multimédii.
BU51 CAD systémy RNDr. Helena Novotná. Obsah přednášek  Co potřebujeme z teorie  Ovládání a přizpůsobení AutoCADu (profily, šablony, pracovní prostory,
Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek.
Přístupnost (bezbariérovost) důležité kritérium hodnocení expertní tým zrakově postižených uživatelů pod vedením RNDr. Hany Bubeníčkové a Mgr. Radka Pavlíčka.
Zahradnická fakulta v Lednici S4U – Seminář o Univerzitním informačním systému 23. – 25. dubna 2008 S 4 U – Seminář o Univerzitním informačním systému.
Krátký úvodní kurz HTML Jenyk Obecně 1 - html  V HTML jazyce nezáleží na rozložení a délce řádku, extrémem je napsat celý program v jednom řádku.
Webdesign prakticky Jak probíhá tvorba webu pro střední a velké společnosti?
SKLADBA PC 18 OP VK VYT 2.18 Tablety
Bohumil Havel MoodleMoot.cz 2016
DRUHY POČÍTAČŮ Simona Korbová / 1.L.
Personal Computer Osobní počítač
Vytvořil Jaroslav Kudr pro OATGM
eLogika nad platformou Android
Tvorba WEBOVÝCH stránek – obrázky
Katedra výrobních strojů a konstruování - 340
Booleovské operace v prostoru
Počítačová síť.
METODOLOGIE PROJEKTOVÁNÍ
Propagace nové hry Epic Game
Transkript prezentace:

Responsivní design ANALÝZA A PROJEKTOVÁNÍ SYSTÉMŮ Roman Danel VŠB–TU Ostrava Hornicko-geologická fakulta Institut ekonomiky a systémů řízení

Co je to responsivní design?

Zdroj:

Ethan Marcotte, 2010 návrh webové stránky a jejího stylování, který bude optimalizovaný pro všechny druhy nejrůznějších zařízení: mobilní telefony, netbooky, notebooky, tablety, osobní počítače i nadměrné displeje

Resposivní design - principy Proporcionální design Flexibilní obrázky Media query

Proporcionální design – relativní jednotky Em – čtverčík (verzálka „M“) - relativní velikost vztaženou k velikosti písma Rem - relativní velikost vztaženou k velikosti písma kořenového elementu dokumentu. Ex - relativní velikost vztaženou ke střední výšce použitého písma. Její hodnota je často ve vztahu 1 ex ≈ 0,5 em. Ch – šířka znaku 0

Flexibilní obrázky Neuvádí se velikost a šířka Styl: img{ max-width: 100%; height: auto; }

Media queries Pro CSS3 Volba typu zařízení Bloky pro

Media types v media queries

Viewport Cílem je, aby zařízení stránku nezmenšilo na velikost zobrazení – uživatel pak musí zvětšovat

Dvousloupcový layout

Jednosloupcový layout