Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

RESPONSIVNÍ WEB DESIGN. WEBOVÉ STRÁNKY 2 Číslo projektuCZ.1.07/1.5.00/34.0808 Označení materiálu VY_32_INOVACE_15 Šablona III/2 Inovace a zkvalitnění.

Podobné prezentace


Prezentace na téma: "RESPONSIVNÍ WEB DESIGN. WEBOVÉ STRÁNKY 2 Číslo projektuCZ.1.07/1.5.00/34.0808 Označení materiálu VY_32_INOVACE_15 Šablona III/2 Inovace a zkvalitnění."— Transkript prezentace:

1 RESPONSIVNÍ WEB DESIGN

2 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í výuky prostřednictvím ICT Tematická oblastStatický návrh webových stránek Škola Střední průmyslová škola strojní a elektrotechnická a Vyšší odborná škola, Liberec 1, Masarykova 3, příspěvková organizace AutorMgr. Michal Stehlík Téma hodinyNávrh responzivních stránek Předmět, ročníkIKT, 2. ročník Anotace Žáci se seznámí s možnostmi moderního návrhu stránek přizpůsobivých prohlížeči.

3 DŮVODY WEBOVÉ STRÁNKY 3

4 STARÝ PŘÍSTUP  Návrh stránky pro různá zařízení:  Stránka pro iPod  iPad  iPhone (mobilní telefon)  Televize  Počítačový monitor  Čtečka e-knih WEBOVÉ STRÁNKY 4

5 NEVÝHODY  Duplicitní obsah = náročná údržba  Moc práce kvůli marginálnímu přínosu  Stejně nejsme připraveni pro jiná zařízení  Drahé  Neschopné adaptace WEBOVÉ STRÁNKY 5

6 PODÍL MOBILNÍCH A DESKTOPOVÝCH PŘÍSTUPŮ WEBOVÉ STRÁNKY 6

7 NEJPOUŽÍVANĚJŠÍ ROZLIŠENÍ bar WEBOVÉ STRÁNKY 7

8 NEJPOUŽÍVANĚJŠÍ ROZLIŠENÍ V MOBILNÍCH ZAŘÍZENÍCH WEBOVÉ STRÁNKY 8

9 UKÁZKOVÁ RESPONZIVNÍ STRÁNKA WEBOVÉ STRÁNKY 9

10 1680 X 888  Stránka se vystřeďuje na obrazovce  Nad 1350px šířky  Kolem hlavního obsahu se vytváří okraje WEBOVÉ STRÁNKY 10

11 970 X 800  Stránka vyplňuje celou šířku  Zatím se nic nepřeskupuje WEBOVÉ STRÁNKY 11

12 760 X 600  Přeformátovalo se záhlaví a zápatí  Přesunul se postranní sloupec WEBOVÉ STRÁNKY 12

13 UKÁZKOVÁ RESPONZIVNÍ STRÁNKA WEBOVÉ STRÁNKY 13

14 NAD 1360PX  Stránka se vystřeďuje na obrazovce  Kolem obsahu se tvoří okraje WEBOVÉ STRÁNKY 14

15 NAD 960PX  Fotografie jsou 3x3 WEBOVÉ STRÁNKY 15

16 960 – 720PX  Fotografie jsou 2x4 WEBOVÉ STRÁNKY 16

17 720 – 480PX  Fotografie opět 3x3  obsah je pod galerií  Obrázkové menu WEBOVÉ STRÁNKY 17

18 POD 480PX  Opět změněná galerie WEBOVÉ STRÁNKY 18

19 PROSTŘEDKY WEBOVÉ STRÁNKY 19

20 RESET STYLE  Normalize  WEBOVÉ STRÁNKY 20

21 ZABRÁNĚNÍ AUTOSCALINGU BROWSERŮ   Pro prohlížeče založené na WebKitu WEBOVÉ STRÁNKY 21

22 FLUIDNÍ LAYOUT  Rozměry v procentech  Cíl / kontext = výsledek WEBOVÉ STRÁNKY 22 Šířka obalujícího prvku Požadovaná šířka prvku Někdy i šířky okrajů a marginy!

23 EM PRO TYPOGRAFII  Veškeré rozměry písma a typografických prvků v násobcích Em odvozených od základní velikosti písma.  H1 {font-size: 1.5em;} WEBOVÉ STRÁNKY 23

24 FLUIDNÍ OBRÁZKY  Šířka v procentech  Max-width: 28%;  I na malá rozlišení přenášíme velké obrázky WEBOVÉ STRÁNKY 24

25 FLUIDNÍ OBSAH  Float: left;  Float: right;  Clear: left / right / both;  Display: inline-block; WEBOVÉ STRÁNKY 25

26 MEDIA QUERY  Umožňují vybrat specifický styl pro určitý viewport  Médium  Šířka WEBOVÉ STRÁNKY 26

27 MOŽNOSTI MEDIA QUERY  Width  Height  Device-width  Device-height  Orientation: portrait / landscape  Aspect-ratio: 16/9  Device-aspect-ratio  Color: 16 (16bit)  Monochrome: 2 (počet odstínů)  Resolution: 300dpi  Scan: progressive / interlaced WEBOVÉ STRÁNKY 27

28 VLOŽENÍ MEDIA QUERY   Přímo vnořený blok WEBOVÉ STRÁNKY 28

29 DOPORUČENÍ  Co je hlavní obsah stránky?  Začněme od nejmenšího rozlišení, postupně přidáváme a přeorganizováváme prvky.  Textový řádek musí být čitelný najednou – nesmí být moc široký. (~800px)  Navigace musí být přehledná, neměla by se příliš měnit její podstata.  Jen proto, že je zařízení malé, není správné část obsahu před ním skrývat. WEBOVÉ STRÁNKY 29

30 DĚKUJI VÁM ZA POZORNOST Máte nějaké dotazy? WEBOVÉ STRÁNKY 30

31 POUŽITÉ MATERIÁLY  LAWSON, Bruce, Remy. Introducing HTML 5: výukový kurz webového vývojáře. 2nd ed. Berkeley, CA: New Riders, c2012, xvi, 295 p. Voices that matter. ISBN  Frain, Ben. Responsive Web Design with HTML5 and CSS3. Packt Publishing, ISBN13:  MARCOTTE, ETHAN: Responsive Web Design, , design design WEBOVÉ STRÁNKY 31


Stáhnout ppt "RESPONSIVNÍ WEB DESIGN. WEBOVÉ STRÁNKY 2 Číslo projektuCZ.1.07/1.5.00/34.0808 Označení materiálu VY_32_INOVACE_15 Šablona III/2 Inovace a zkvalitnění."

Podobné prezentace


Reklamy Google