tytuł oryginału: responsive web design with html5 and css3pdf.helion.pl/resweb/resweb.pdf ·...
TRANSCRIPT
Tytuł oryginału Responsive Web Design with HTML5 and CSS3
Tłumaczenie Maciej Reszotnik
ISBN 978-83-246-6901-1
copy Helion 2014All rights reserved
Copyright copy Packt Publishing 2012
First published in the English language under the title lsquoResponsive Web Design with HTML5 and CSS3rsquo
All rights reserved No part of this book may be reproduced or transmitted in any form or by any means electronic or mechanical including photocopying recording or by any information storage retrieval system without permission from the Publisher
Wszelkie prawa zastrzeżone Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione Wykonywanie kopii metodą kserograficzną fotograficzną a także kopiowanie książki na nośniku filmowym magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli
Wydawnictwo HELION dołożyło wszelkich starań by zawarte w tej książce informacje były kompletnei rzetelne Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich Wydawnictwo HELION nie ponosi roacutewnież żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce
Wydawnictwo HELIONul Kościuszki 1c 44-100 GLIWICEtel 32 231 22 19 32 230 98 63e-mail helionhelionplWWW httphelionpl (księgarnia internetowa katalog książek)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem ftpftphelionplprzykladyreswebzip
Drogi CzytelnikuJeżeli chcesz ocenić tę książkę zajrzyj pod adres httphelionpluseropiniereswebMożesz tam wpisać swoje uwagi spostrzeżenia recenzję
Printed in Poland
bull Kup książkębull Poleć książkę bull Oceń książkę
bull Księgarnia internetowabull Lubię to raquo Nasza społeczność
Spis tre ci
O autorze 9
O recenzentach 11
Przedmowa 13
Rozdzia 1 Podstawy HTML5 CSS3 i projektowania elastycznych uk adoacutew stron 19
Czemu smartfony s tak wa ne (a stary Internet Explorer nie) 20Czy zdarzaj si sytuacje w ktoacuterych uk ad elastyczny nie jest dobrym rozwi zaniem 22Uk ad skalowalny mdash definicja 22Czemu ogranicza si tylko do skalowalnych projektoacutew 23Przyk ady skalowalnych projektoacutew witryn 23
Gdzie znajdziesz narz dzia testowe obszaru operacyjnego 24roacuted a inspiracji w sieci 30
HTML5 mdash zalety stosowania 32Oszcz dno czasu i kodu w HTML5 33Nowe elementy semantyczne HTML5 34
CSS3 a wra liwy projekt witryn i dodatkowe mo liwo ci arkuszy 35Wniosek jest prosty mdash CSS3 niczego nie zepsuje 36Jak CSS3 rozwi zuje codzienne problemy projektantoacutew witryn 36
Patrz mamo mdash bez obrazoacutew 39Co jeszcze CSS3 ma do zaoferowania 39
Czy standardy HTML5 i CSS3 dzia aj poprawnie ju dzi 42RWD nie jest lekarstwem na wszystko 43U wiadomienie klientom e witryna nie powinna prezentowa si tak samow ka dej przegl darce 44Podsumowanie 45
Kup książkę Poleć książkę
Spis tre ci
4
Rozdzia 2 Zapytania medialne obs uga zroacute nicowanych obszaroacutew operacyjnych 47
Zapyta medialnych mo esz u ywa ju dzi 48Skalowalne projekty a zapytania medialne 48
Sk adnia zapyta medialnych 49Zapytania medialne i poroacutewnywanie parametroacutew urz dze 51U ywanie zapyta medialnych do zmodyfikowania projektu witryny 52Najlepszy sposoacuteb adowania zapyta medialnych w metodologii RWD 52
Nasz pierwszy skalowalny projekt 53Mo e Ci zaskoczy e nasz pierwszy uk ad b dzie mia sta szeroko 53Projekt wra liwy mdash ograniczanie wielko ci obrazoacutew 57Przycinanie tre ci w mniejszych obszarach operacyjnych 59
Wy czanie mechanizmu automatycznego skalowania strony 60Dopasowanie projektu witryny do roacute nych szeroko ci obszaru operacyjnego 63W metodologii RWD tre ci zawsze stoj na pierwszym miejscu 65Zapytania medialne mdash tylko cz rozwi zania 69
Potrzebny nam uk ad p ynny 69Podsumowanie 69
Rozdzia 3 Opanowanie uk adoacutew p ynnych 71
Uk ady sta e nie s przystosowane do nowych wyzwa 72Czemu uk ady proporcjonalne s tak wa ne w metodologii RWD 72Transformacja sta ego uk adu w projekt proporcjonalny 73
Wa ne roacutewnanie 73Definiowanie kontekstu w elementach proporcjonalnych 75Zawsze nale y pami ta o kontek cie 82
Wykorzystywanie jednostek em zamiast pikseli w kontek cie typografii 85P ynne obrazy 87
Skalowanie obrazoacutew w obr bie obszaru operacyjnego 87W a ciwe regu y dla w a ciwych obrazoacutew 89Nak adanie hamulcoacutew na uk ad p ynny 91Wszechstronna w asno max-width 92
Wczytywanie roacute nych obrazoacutew dla roacute nych ekranoacutew 93Konfigurowanie us ugi Adaptive Images 94
P ynne siatki i zapytania medialne tworz jedno 98System siatek CSS 99
B yskawiczne konstruowanie strony w systemie siatek 100Podsumowanie 105
Rozdzia 4 HTML5 i projekty elastyczne 107
Z jakich cz ci standardu HTML5 mo emy korzysta ju dzi 108Wi kszo witryn mo e by konstruowana w oparciu o HTML5 108Wype nienia skrypty i Modernizr 108
W jaki sposoacuteb pisa strony w standardzie HTML5 109Oszcz dno ci wynikaj ce z wykorzystania HTML5 110Rozs dne podej cie do pisania kodu 111Oddajmy cze wszechmocnemu elementowi ltagt 111Elementy j zyka HTML ktoacutere uleg y dezaktualizacji 112
Kup książkę Poleć książkę
Spis tre ci
5
Nowe elementy semantyczne HTML5 112Element ltsectiongt 113Element ltnavgt 114Element ltarticlegt 114Element ltasidegt 114Element lthgroupgt 115Element ltheadergt 116Element ltfootergt 117Element ltaddressgt 117
Praktyczne wykorzystanie elementoacutew strukturalnych HTML5 117A co z g oacutewn zawarto ci strony 123
HTML5 i semantyka na poziomie tekstu 123Element ltbgt 124Element ltemgt 124Element ltigt 125Zasady semantyki na poziomie tekstu w kodzie 125
Poprawienie dost pno ci strony za pomoc standardu WAI-ARIA 127Punkty orientacyjne w standardzie ARIA 127
Zagnie d anie elementoacutew multimedialnych w HTML5 130Zagnie d anie multimedioacutew wed ug HTML5 131
Alternatywne roacuted a plikoacutew 132Awaryjna obs uga w starszych przegl darkach 133Znaczniki audio i video dzia aj niemal identycznie 133
Skalowalne odtwarzacze filmoacutew 134Aplikacje sieciowe w trybie offline 137
Aplikacje offline od podszewki 137Wdra anie trybu offline 137Sk adnia pliku manifestu 139Automatyczne wczytywanie stron w manife cie 139Komentarze wersji 140Odczytywanie strony w trybie offline 140Rozwi zywanie problemoacutew z aplikacjami offline 141
Podsumowanie 142
Rozdzia 5 CSS3 selektory typografia i tryby barw 143
Co CSS3 oferuje projektantom stron 144Obs uga CSS3 w Internet Explorerze 6 7 i 8 144Wykorzystanie CSS3 do projektowania i formatowania stron w przegl darce 145
Struktura regu CSS 145Przedrostki autorskie i sposoacuteb ich wykorzystania 145Przydatne triki w CSS3 148
Uk ad wielokolumnowy w CSS3 dla projektu skalowalnego 148Zawijanie tekstu 151
Nowe selektory CSS3 i sposoacuteb ich wykorzystania 152Selektory atrybutoacutew w CSS3 152Strukturalne pseudoklasy CSS3 155Poprawki wprowadzane w pseudoelementach 164
Kup książkę Poleć książkę
Spis tre ci
6
W asna typografia sieciowa 166Regu a font-face 166Odwo anie do fontoacutew w regule font-face 167
Pomocy mdash moje nag oacutewki font-face CSS3 wygl daj okropnie 170Uwagi na temat elementoacutew typograficznych font-face
i elastycznego projektu strony 173Nowe formaty barw CSS3 i kana alfa 173
Tryb RGB 174Tryb HSL 175Awaryjne tryby barw dla Internet Explorera 6 7 i 8 176Kana y alfa 176
Podsumowanie 178
Rozdzia 6 Spektakularny wygl d i CSS3 179
Cieniowanie tekstu w CSS3 180Obs ugiwane tryby barw HEX HSL i RGB 180Jednostki piksele em i rem 181Blokowanie w a ciwo ci text-shadow 182Tworzenie efektu uwypuklenia za pomoc w asno ci text-shadow 184Nak adanie wielu efektoacutew cienia na tekst 184
Cieniowanie komponentoacutew 185Cieniowanie do wewn trz elementu 185Nak adanie wielu cieni na element 187
Gradienty t a 188Liniowe gradienty t a 189Gradienty ko owe 193Powtarzanie gradientu 196
Wzorce t a gradientu 198Projektowanie elastyczne a CSS3 200Korzystanie z wielu w a ciwo ci CSS3 naraz 202Wiele obrazoacutew t a naraz 206
Wymiary t a 208W a ciwo background position 208Skroacutecona deklaracja w a ciwo ci background 209
Wi cej w a ciwo ci CSS3 209Elastyczne ikony doskona e dla projektu skalowalnego 209Podsumowanie 210
Rozdzia 7 Przej cia transformacje i animacje w CSS3 213
Czym s przej cia CSS3 i jak mo emy z nich korzysta 214Typy w a ciwo ci przej 215Ciekawe typy przej dla elastycznych stron 218
Transformacje dwuwymiarowe a CSS3 219Co mo emy podda transformacji 220
Zabawa transformacjami troacutejwymiarowymi 224Sk adnia transformacji troacutejwymiarowych 226Transformacje troacutejwymiarowe wci raczkuj 230
Kup książkę Poleć książkę
Spis tre ci
7
Animacje w CSS3 231czenie animacji i transformacji CSS3 234
Podsumowanie 237
Rozdzia 8 Opanowanie formularzy w HTML5 i CSS3 239
Formularze a HTML5 240Komponenty w formularzach HTML5 242placeholder 242required 243autofocus 244autocomplete 244list (i powi zane elementy listy) 245Rodzaje kontrolek HTML5 246Kontrolki daty i godziny 252
Wype nienia dla starszych przegl darek 257Formatowanie formularzy HTML5 za pomoc arkuszy CSS3 258
Selektory pseudoklas CSS3 dla formularzy 262Podsumowanie 265
Rozdzia 9 Rozwi zywanie problemoacutew kompatybilno ci uk adoacutew wra liwychz przegl darkami 267
Ulepszenie post powe a agodna degradacja 272Praktyka 272
Czy powiniene naprawia problemy we wszystkich wersjach Internet Explorera 273Dane statystyczne (znowu) 274Kwestia w asnego wyboru 274
Modernizr mdash scyzoryk projektanta stron 275Rozwi zywanie problemoacutew z formatowaniem 277Obs uga elementoacutew HTML5 w starszych Internet Explorerach a Modernizr 279Implementacja obs ugi zapyta medialnych w Internet Explorerze 6 7 i 8 280Modernizr i wczytywanie warunkowe 282
Transformacja nawigacji mdash menu pionowe 284Urz dzenia z ekranami o wysokiej rozdzielczo ci (rzut okiem w przysz o ) 288Podsumowanie 291
Skorowidz 293
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
3
Opanowanieuk adoacutew p ynnych
Gdy w latach 90 ubieg ego wieku zacz em konstruowa witryny ich uk ad powstawa na ba-zie tabeli Najcz ciej wymiary pojedynczych sekcji ka dej strony by y wyra ane w procen-tach Przyk adowo lewa kolumna nawigacji mog a wype nia 20 procent strony podczas gdyobszar tre ci 80 procent W przesz o ci nie by o tak wielkich roacute nic mi dzy obszarami opera-cyjnymi przegl darek jak obecnie wi c te uk ady by y dobrze skalowane w w skim wyborzeekranoacutew Nikogo nie obchodzi o e pojedyncze zdania wygl da y odrobin inaczej na roacute -nych ekranach Jednak e z biegiem czasu uk ady CSS sta y si norm bo pozwala y na od-zwierciedlenie zasad typograficznych stosowanych w materia ach drukowanych Zmiana taoznacza a znaczne zmniejszenie liczby uk adoacutew konstruowanych na podstawie proporcji mdash za-miast nich powstawa y ich sztywne odpowiedniki ktoacuterych wymiary definiowano w pikselach
Podobnie jak inne wa ne osi gni cia aktualnie ten rodzaj projektowania prze ywa renesansW przeci gu ostatnich lat miniaturowe samochody trwa a fryzura (chcia oby si hellip) oraz jeansydzwony powroacuteci y do ask Nadszed czas by roacutewnie uk ady proporcjonalne zosta y odkrytena nowo
W tym rozdziale dowiesz si czemu uk ady proporcjonalne s tak wa ne w filozofii RWD nauczysz si wyra a elementy zbudowane w sta ej szeroko ci warto ciami
procentowymi nauczysz si definiowa elementy typografii wyra one w pikselach w jednostkach em zrozumiesz jak umie ci elementy we w a ciwych kontekstach nauczysz si p ynnie przeskalowywa obrazy dowiesz si jak dopasowa wielko grafik do wymiaroacutew ekranu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
72
zrozumiesz w jaki sposoacuteb uzupe niaj si zapytania medialne i p ynne uk ady stronoraz grafik
stworzysz uk ad skalowalny od podstaw w oparciu o system siatek CSS
Uk ady sta e nie s przystosowanedo nowych wyzwaJak ju wspomnia em od czasoacutew uk adoacutew tabelarycznych nie mia em zbyt wielu okazji bywykorzystywa projekty proporcjonalne Zwykle klienci prosz mnie o stworzenie uk adunajbli ej odzwierciedlaj cego graficzny model w obr bie 950 ndash 1000 pikseli Je eli zbudowa -bym projekt w oparciu o proporcjonalne warto ci (np 90) szybko dosta bym skarg bdquoAle towygl da inaczej na moim monitorzerdquo Witryny skonstruowane na bazie sta ych wymiaroacutewwyra onych w pikselach pozwala y na atwe dopasowanie uk adu do prototypu
Nawet w dzisiejszych czasach gdy u ywa o si zapyta medialnych celem stworzenia ulep-szonej wersji uk adu dopasowuj cej si do szeroko ci popularnych urz dze np iPada lubiPhonersquoa (o czym przekona e si w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo) wymiary uk adu w dalszym ci gu mog y by wyra one w pik-selach poniewa znali my wielko obszaru operacyjnego Cho znajd si tacy ktoacuterzy ch t-nie wy l klientowi rachunek za ka dym razem gdy najdzie go ochota by doda nowy bajer dostrony nie jest to podej cie dobrze przygotuj ce witryn na przysz o Na rynku pojawiaj sicoraz to nowsze typy obszaroacutew operacyjnych wi c musimy znale jaki sposoacuteb by przygoto-wa si na nadej cie nieznanego
Czemu uk ady proporcjonalne s tak wa new metodologii RWDMimo e zapytania medialne s bardzo przydatne maj pewne ograniczenia Dowolny sta yprojekt witryny korzystaj cy z zapyta medialnych do dopasowania si do roacute nych obszaroacutewoperacyjnych b dzie po prostu przechodzi z jednego zestawu regu do drugiego bez adnejanimacji pomi dzy stanami Jak pami tasz w przyk adzie z rozdzia u 2 bdquoZapytania medialneobs uga zroacute nicowanych obszaroacutew operacyjnychrdquo obszar operacyjny zmienia si w obr biesta ych zakresoacutew zapyta i wymaga przewijania strony w poziomie dla niestandardowychrozdzielczo ci (ktoacutere mog obowi zywa w nowych nieznanych dot d urz dzeniach) Myjednak chcemy by nasz uk ad przewija si i wygl da dobrze we wszystkich obszarach opera-cyjnych a nie tylko tych zdefiniowanych w zapytaniu medialnym Ci cie (Rozumiesz Ci cieTakie filmowe powiedzenie w sam raz dla naszej filmowej witrynyhellip Prawda Nie Ju id poswoacutej p aszczhellip) Musimy przemieni nasz sta y uk ad wyra ony w pikselach w uk ad p ynny zbu-
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
73
dowany w oparciu o proporcjonalne jednostki Pozwoli to elementom dynamicznie dopasowywasi wzgl dem obszaru operacyjnego do momentu gdy do akcji wkroczy zapytanie medialnei zmodyfikuje uk ad
Symbioza uk adu proporcjonalnego i zapyta medialnych
Wspomnia em wcze niej artyku autorstwa Ethana Marcottersquoa na temat metodologii RWD ktoacutery opubli-kowano w witrynie A List Apart (httpwwwalistapartcomarticlesresponsive-web-design) Cho na-rz dzia ktoacuterych u y w omawianym przyk adzie (p ynny uk ad obrazy i zapytania medialne) nie by ywcale nowe prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworze-nia spoacutejnej ca o ci Dla wielu projektantoacutew witryn ten artyku by kluczem do wiata nowych mo liwo-ci Przedstawia sposoacuteb ktoacutery czerpie to co najlepsze z dwoacutech wiatoacutew stworzenie p ynnego uk adu
bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementoacutew zapomoc zapytania medialnego Wykorzystanie tych aspektoacutew razem jest fundamentem metodologii RWDdzi ki ktoacuterej powstaje co znacznie wi kszego ni suma cz ci sk adowych
Transformacja sta ego uk aduw projekt proporcjonalnyW najbli szej przysz o ci wszystkie gotowe kompozyty ktoacutere otrzymasz lub stworzysz b dmia y sta szeroko Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworkswymiary elementoacutew wielko marginesoacutew itp wyra amy w pikselach Dane te wprowadza-my poacute niej w arkuszach styloacutew CSS To samo dotyczy rozmiaroacutew tekstu W naszym ulubio-nym programie graficznym klikamy fragment tekstu zapisujemy wielko fontu (te wyra onw pikselach) i przenosimy j do odpowiednich regu CSS W jaki wi c sposoacuteb mo emy prze-mieni nasz uk ad sta y w proporcjonalny
Wa ne roacutewnanieBy mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcottersquoa lecz czuj e mu-sz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo paprzed nim na kolana) W ksi ce autorstwa Dana Cederholma mdash Handcrafted CSS mdash EthanMarcotte wspoacute tworzy rozdzia po wi cony p ynnym siatkom projektowym W nim opisaprosty i niezawodny wzoacuter s u cy do transformacji warto ci pikselowych w uk adzie sta ym nawarto ci procentowe w projekcie proporcjonalnym
element docelowy kontekst = wynik
Roacutewnanie to jest niepozorne czy nie Szybko jednak oka e si e jest ono Twoim najlepszymprzyjacielem Zamiast rozprawia o teoriach wykorzystajmy ten wzoacuter w praktyce zamieniaj cjednostki wymiaroacutew witryny Zwyci zc nie jesthellip na procenty
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
74
Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt
W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze
wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Spis tre ci
O autorze 9
O recenzentach 11
Przedmowa 13
Rozdzia 1 Podstawy HTML5 CSS3 i projektowania elastycznych uk adoacutew stron 19
Czemu smartfony s tak wa ne (a stary Internet Explorer nie) 20Czy zdarzaj si sytuacje w ktoacuterych uk ad elastyczny nie jest dobrym rozwi zaniem 22Uk ad skalowalny mdash definicja 22Czemu ogranicza si tylko do skalowalnych projektoacutew 23Przyk ady skalowalnych projektoacutew witryn 23
Gdzie znajdziesz narz dzia testowe obszaru operacyjnego 24roacuted a inspiracji w sieci 30
HTML5 mdash zalety stosowania 32Oszcz dno czasu i kodu w HTML5 33Nowe elementy semantyczne HTML5 34
CSS3 a wra liwy projekt witryn i dodatkowe mo liwo ci arkuszy 35Wniosek jest prosty mdash CSS3 niczego nie zepsuje 36Jak CSS3 rozwi zuje codzienne problemy projektantoacutew witryn 36
Patrz mamo mdash bez obrazoacutew 39Co jeszcze CSS3 ma do zaoferowania 39
Czy standardy HTML5 i CSS3 dzia aj poprawnie ju dzi 42RWD nie jest lekarstwem na wszystko 43U wiadomienie klientom e witryna nie powinna prezentowa si tak samow ka dej przegl darce 44Podsumowanie 45
Kup książkę Poleć książkę
Spis tre ci
4
Rozdzia 2 Zapytania medialne obs uga zroacute nicowanych obszaroacutew operacyjnych 47
Zapyta medialnych mo esz u ywa ju dzi 48Skalowalne projekty a zapytania medialne 48
Sk adnia zapyta medialnych 49Zapytania medialne i poroacutewnywanie parametroacutew urz dze 51U ywanie zapyta medialnych do zmodyfikowania projektu witryny 52Najlepszy sposoacuteb adowania zapyta medialnych w metodologii RWD 52
Nasz pierwszy skalowalny projekt 53Mo e Ci zaskoczy e nasz pierwszy uk ad b dzie mia sta szeroko 53Projekt wra liwy mdash ograniczanie wielko ci obrazoacutew 57Przycinanie tre ci w mniejszych obszarach operacyjnych 59
Wy czanie mechanizmu automatycznego skalowania strony 60Dopasowanie projektu witryny do roacute nych szeroko ci obszaru operacyjnego 63W metodologii RWD tre ci zawsze stoj na pierwszym miejscu 65Zapytania medialne mdash tylko cz rozwi zania 69
Potrzebny nam uk ad p ynny 69Podsumowanie 69
Rozdzia 3 Opanowanie uk adoacutew p ynnych 71
Uk ady sta e nie s przystosowane do nowych wyzwa 72Czemu uk ady proporcjonalne s tak wa ne w metodologii RWD 72Transformacja sta ego uk adu w projekt proporcjonalny 73
Wa ne roacutewnanie 73Definiowanie kontekstu w elementach proporcjonalnych 75Zawsze nale y pami ta o kontek cie 82
Wykorzystywanie jednostek em zamiast pikseli w kontek cie typografii 85P ynne obrazy 87
Skalowanie obrazoacutew w obr bie obszaru operacyjnego 87W a ciwe regu y dla w a ciwych obrazoacutew 89Nak adanie hamulcoacutew na uk ad p ynny 91Wszechstronna w asno max-width 92
Wczytywanie roacute nych obrazoacutew dla roacute nych ekranoacutew 93Konfigurowanie us ugi Adaptive Images 94
P ynne siatki i zapytania medialne tworz jedno 98System siatek CSS 99
B yskawiczne konstruowanie strony w systemie siatek 100Podsumowanie 105
Rozdzia 4 HTML5 i projekty elastyczne 107
Z jakich cz ci standardu HTML5 mo emy korzysta ju dzi 108Wi kszo witryn mo e by konstruowana w oparciu o HTML5 108Wype nienia skrypty i Modernizr 108
W jaki sposoacuteb pisa strony w standardzie HTML5 109Oszcz dno ci wynikaj ce z wykorzystania HTML5 110Rozs dne podej cie do pisania kodu 111Oddajmy cze wszechmocnemu elementowi ltagt 111Elementy j zyka HTML ktoacutere uleg y dezaktualizacji 112
Kup książkę Poleć książkę
Spis tre ci
5
Nowe elementy semantyczne HTML5 112Element ltsectiongt 113Element ltnavgt 114Element ltarticlegt 114Element ltasidegt 114Element lthgroupgt 115Element ltheadergt 116Element ltfootergt 117Element ltaddressgt 117
Praktyczne wykorzystanie elementoacutew strukturalnych HTML5 117A co z g oacutewn zawarto ci strony 123
HTML5 i semantyka na poziomie tekstu 123Element ltbgt 124Element ltemgt 124Element ltigt 125Zasady semantyki na poziomie tekstu w kodzie 125
Poprawienie dost pno ci strony za pomoc standardu WAI-ARIA 127Punkty orientacyjne w standardzie ARIA 127
Zagnie d anie elementoacutew multimedialnych w HTML5 130Zagnie d anie multimedioacutew wed ug HTML5 131
Alternatywne roacuted a plikoacutew 132Awaryjna obs uga w starszych przegl darkach 133Znaczniki audio i video dzia aj niemal identycznie 133
Skalowalne odtwarzacze filmoacutew 134Aplikacje sieciowe w trybie offline 137
Aplikacje offline od podszewki 137Wdra anie trybu offline 137Sk adnia pliku manifestu 139Automatyczne wczytywanie stron w manife cie 139Komentarze wersji 140Odczytywanie strony w trybie offline 140Rozwi zywanie problemoacutew z aplikacjami offline 141
Podsumowanie 142
Rozdzia 5 CSS3 selektory typografia i tryby barw 143
Co CSS3 oferuje projektantom stron 144Obs uga CSS3 w Internet Explorerze 6 7 i 8 144Wykorzystanie CSS3 do projektowania i formatowania stron w przegl darce 145
Struktura regu CSS 145Przedrostki autorskie i sposoacuteb ich wykorzystania 145Przydatne triki w CSS3 148
Uk ad wielokolumnowy w CSS3 dla projektu skalowalnego 148Zawijanie tekstu 151
Nowe selektory CSS3 i sposoacuteb ich wykorzystania 152Selektory atrybutoacutew w CSS3 152Strukturalne pseudoklasy CSS3 155Poprawki wprowadzane w pseudoelementach 164
Kup książkę Poleć książkę
Spis tre ci
6
W asna typografia sieciowa 166Regu a font-face 166Odwo anie do fontoacutew w regule font-face 167
Pomocy mdash moje nag oacutewki font-face CSS3 wygl daj okropnie 170Uwagi na temat elementoacutew typograficznych font-face
i elastycznego projektu strony 173Nowe formaty barw CSS3 i kana alfa 173
Tryb RGB 174Tryb HSL 175Awaryjne tryby barw dla Internet Explorera 6 7 i 8 176Kana y alfa 176
Podsumowanie 178
Rozdzia 6 Spektakularny wygl d i CSS3 179
Cieniowanie tekstu w CSS3 180Obs ugiwane tryby barw HEX HSL i RGB 180Jednostki piksele em i rem 181Blokowanie w a ciwo ci text-shadow 182Tworzenie efektu uwypuklenia za pomoc w asno ci text-shadow 184Nak adanie wielu efektoacutew cienia na tekst 184
Cieniowanie komponentoacutew 185Cieniowanie do wewn trz elementu 185Nak adanie wielu cieni na element 187
Gradienty t a 188Liniowe gradienty t a 189Gradienty ko owe 193Powtarzanie gradientu 196
Wzorce t a gradientu 198Projektowanie elastyczne a CSS3 200Korzystanie z wielu w a ciwo ci CSS3 naraz 202Wiele obrazoacutew t a naraz 206
Wymiary t a 208W a ciwo background position 208Skroacutecona deklaracja w a ciwo ci background 209
Wi cej w a ciwo ci CSS3 209Elastyczne ikony doskona e dla projektu skalowalnego 209Podsumowanie 210
Rozdzia 7 Przej cia transformacje i animacje w CSS3 213
Czym s przej cia CSS3 i jak mo emy z nich korzysta 214Typy w a ciwo ci przej 215Ciekawe typy przej dla elastycznych stron 218
Transformacje dwuwymiarowe a CSS3 219Co mo emy podda transformacji 220
Zabawa transformacjami troacutejwymiarowymi 224Sk adnia transformacji troacutejwymiarowych 226Transformacje troacutejwymiarowe wci raczkuj 230
Kup książkę Poleć książkę
Spis tre ci
7
Animacje w CSS3 231czenie animacji i transformacji CSS3 234
Podsumowanie 237
Rozdzia 8 Opanowanie formularzy w HTML5 i CSS3 239
Formularze a HTML5 240Komponenty w formularzach HTML5 242placeholder 242required 243autofocus 244autocomplete 244list (i powi zane elementy listy) 245Rodzaje kontrolek HTML5 246Kontrolki daty i godziny 252
Wype nienia dla starszych przegl darek 257Formatowanie formularzy HTML5 za pomoc arkuszy CSS3 258
Selektory pseudoklas CSS3 dla formularzy 262Podsumowanie 265
Rozdzia 9 Rozwi zywanie problemoacutew kompatybilno ci uk adoacutew wra liwychz przegl darkami 267
Ulepszenie post powe a agodna degradacja 272Praktyka 272
Czy powiniene naprawia problemy we wszystkich wersjach Internet Explorera 273Dane statystyczne (znowu) 274Kwestia w asnego wyboru 274
Modernizr mdash scyzoryk projektanta stron 275Rozwi zywanie problemoacutew z formatowaniem 277Obs uga elementoacutew HTML5 w starszych Internet Explorerach a Modernizr 279Implementacja obs ugi zapyta medialnych w Internet Explorerze 6 7 i 8 280Modernizr i wczytywanie warunkowe 282
Transformacja nawigacji mdash menu pionowe 284Urz dzenia z ekranami o wysokiej rozdzielczo ci (rzut okiem w przysz o ) 288Podsumowanie 291
Skorowidz 293
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
3
Opanowanieuk adoacutew p ynnych
Gdy w latach 90 ubieg ego wieku zacz em konstruowa witryny ich uk ad powstawa na ba-zie tabeli Najcz ciej wymiary pojedynczych sekcji ka dej strony by y wyra ane w procen-tach Przyk adowo lewa kolumna nawigacji mog a wype nia 20 procent strony podczas gdyobszar tre ci 80 procent W przesz o ci nie by o tak wielkich roacute nic mi dzy obszarami opera-cyjnymi przegl darek jak obecnie wi c te uk ady by y dobrze skalowane w w skim wyborzeekranoacutew Nikogo nie obchodzi o e pojedyncze zdania wygl da y odrobin inaczej na roacute -nych ekranach Jednak e z biegiem czasu uk ady CSS sta y si norm bo pozwala y na od-zwierciedlenie zasad typograficznych stosowanych w materia ach drukowanych Zmiana taoznacza a znaczne zmniejszenie liczby uk adoacutew konstruowanych na podstawie proporcji mdash za-miast nich powstawa y ich sztywne odpowiedniki ktoacuterych wymiary definiowano w pikselach
Podobnie jak inne wa ne osi gni cia aktualnie ten rodzaj projektowania prze ywa renesansW przeci gu ostatnich lat miniaturowe samochody trwa a fryzura (chcia oby si hellip) oraz jeansydzwony powroacuteci y do ask Nadszed czas by roacutewnie uk ady proporcjonalne zosta y odkrytena nowo
W tym rozdziale dowiesz si czemu uk ady proporcjonalne s tak wa ne w filozofii RWD nauczysz si wyra a elementy zbudowane w sta ej szeroko ci warto ciami
procentowymi nauczysz si definiowa elementy typografii wyra one w pikselach w jednostkach em zrozumiesz jak umie ci elementy we w a ciwych kontekstach nauczysz si p ynnie przeskalowywa obrazy dowiesz si jak dopasowa wielko grafik do wymiaroacutew ekranu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
72
zrozumiesz w jaki sposoacuteb uzupe niaj si zapytania medialne i p ynne uk ady stronoraz grafik
stworzysz uk ad skalowalny od podstaw w oparciu o system siatek CSS
Uk ady sta e nie s przystosowanedo nowych wyzwaJak ju wspomnia em od czasoacutew uk adoacutew tabelarycznych nie mia em zbyt wielu okazji bywykorzystywa projekty proporcjonalne Zwykle klienci prosz mnie o stworzenie uk adunajbli ej odzwierciedlaj cego graficzny model w obr bie 950 ndash 1000 pikseli Je eli zbudowa -bym projekt w oparciu o proporcjonalne warto ci (np 90) szybko dosta bym skarg bdquoAle towygl da inaczej na moim monitorzerdquo Witryny skonstruowane na bazie sta ych wymiaroacutewwyra onych w pikselach pozwala y na atwe dopasowanie uk adu do prototypu
Nawet w dzisiejszych czasach gdy u ywa o si zapyta medialnych celem stworzenia ulep-szonej wersji uk adu dopasowuj cej si do szeroko ci popularnych urz dze np iPada lubiPhonersquoa (o czym przekona e si w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo) wymiary uk adu w dalszym ci gu mog y by wyra one w pik-selach poniewa znali my wielko obszaru operacyjnego Cho znajd si tacy ktoacuterzy ch t-nie wy l klientowi rachunek za ka dym razem gdy najdzie go ochota by doda nowy bajer dostrony nie jest to podej cie dobrze przygotuj ce witryn na przysz o Na rynku pojawiaj sicoraz to nowsze typy obszaroacutew operacyjnych wi c musimy znale jaki sposoacuteb by przygoto-wa si na nadej cie nieznanego
Czemu uk ady proporcjonalne s tak wa new metodologii RWDMimo e zapytania medialne s bardzo przydatne maj pewne ograniczenia Dowolny sta yprojekt witryny korzystaj cy z zapyta medialnych do dopasowania si do roacute nych obszaroacutewoperacyjnych b dzie po prostu przechodzi z jednego zestawu regu do drugiego bez adnejanimacji pomi dzy stanami Jak pami tasz w przyk adzie z rozdzia u 2 bdquoZapytania medialneobs uga zroacute nicowanych obszaroacutew operacyjnychrdquo obszar operacyjny zmienia si w obr biesta ych zakresoacutew zapyta i wymaga przewijania strony w poziomie dla niestandardowychrozdzielczo ci (ktoacutere mog obowi zywa w nowych nieznanych dot d urz dzeniach) Myjednak chcemy by nasz uk ad przewija si i wygl da dobrze we wszystkich obszarach opera-cyjnych a nie tylko tych zdefiniowanych w zapytaniu medialnym Ci cie (Rozumiesz Ci cieTakie filmowe powiedzenie w sam raz dla naszej filmowej witrynyhellip Prawda Nie Ju id poswoacutej p aszczhellip) Musimy przemieni nasz sta y uk ad wyra ony w pikselach w uk ad p ynny zbu-
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
73
dowany w oparciu o proporcjonalne jednostki Pozwoli to elementom dynamicznie dopasowywasi wzgl dem obszaru operacyjnego do momentu gdy do akcji wkroczy zapytanie medialnei zmodyfikuje uk ad
Symbioza uk adu proporcjonalnego i zapyta medialnych
Wspomnia em wcze niej artyku autorstwa Ethana Marcottersquoa na temat metodologii RWD ktoacutery opubli-kowano w witrynie A List Apart (httpwwwalistapartcomarticlesresponsive-web-design) Cho na-rz dzia ktoacuterych u y w omawianym przyk adzie (p ynny uk ad obrazy i zapytania medialne) nie by ywcale nowe prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworze-nia spoacutejnej ca o ci Dla wielu projektantoacutew witryn ten artyku by kluczem do wiata nowych mo liwo-ci Przedstawia sposoacuteb ktoacutery czerpie to co najlepsze z dwoacutech wiatoacutew stworzenie p ynnego uk adu
bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementoacutew zapomoc zapytania medialnego Wykorzystanie tych aspektoacutew razem jest fundamentem metodologii RWDdzi ki ktoacuterej powstaje co znacznie wi kszego ni suma cz ci sk adowych
Transformacja sta ego uk aduw projekt proporcjonalnyW najbli szej przysz o ci wszystkie gotowe kompozyty ktoacutere otrzymasz lub stworzysz b dmia y sta szeroko Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworkswymiary elementoacutew wielko marginesoacutew itp wyra amy w pikselach Dane te wprowadza-my poacute niej w arkuszach styloacutew CSS To samo dotyczy rozmiaroacutew tekstu W naszym ulubio-nym programie graficznym klikamy fragment tekstu zapisujemy wielko fontu (te wyra onw pikselach) i przenosimy j do odpowiednich regu CSS W jaki wi c sposoacuteb mo emy prze-mieni nasz uk ad sta y w proporcjonalny
Wa ne roacutewnanieBy mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcottersquoa lecz czuj e mu-sz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo paprzed nim na kolana) W ksi ce autorstwa Dana Cederholma mdash Handcrafted CSS mdash EthanMarcotte wspoacute tworzy rozdzia po wi cony p ynnym siatkom projektowym W nim opisaprosty i niezawodny wzoacuter s u cy do transformacji warto ci pikselowych w uk adzie sta ym nawarto ci procentowe w projekcie proporcjonalnym
element docelowy kontekst = wynik
Roacutewnanie to jest niepozorne czy nie Szybko jednak oka e si e jest ono Twoim najlepszymprzyjacielem Zamiast rozprawia o teoriach wykorzystajmy ten wzoacuter w praktyce zamieniaj cjednostki wymiaroacutew witryny Zwyci zc nie jesthellip na procenty
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
74
Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt
W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze
wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Spis tre ci
4
Rozdzia 2 Zapytania medialne obs uga zroacute nicowanych obszaroacutew operacyjnych 47
Zapyta medialnych mo esz u ywa ju dzi 48Skalowalne projekty a zapytania medialne 48
Sk adnia zapyta medialnych 49Zapytania medialne i poroacutewnywanie parametroacutew urz dze 51U ywanie zapyta medialnych do zmodyfikowania projektu witryny 52Najlepszy sposoacuteb adowania zapyta medialnych w metodologii RWD 52
Nasz pierwszy skalowalny projekt 53Mo e Ci zaskoczy e nasz pierwszy uk ad b dzie mia sta szeroko 53Projekt wra liwy mdash ograniczanie wielko ci obrazoacutew 57Przycinanie tre ci w mniejszych obszarach operacyjnych 59
Wy czanie mechanizmu automatycznego skalowania strony 60Dopasowanie projektu witryny do roacute nych szeroko ci obszaru operacyjnego 63W metodologii RWD tre ci zawsze stoj na pierwszym miejscu 65Zapytania medialne mdash tylko cz rozwi zania 69
Potrzebny nam uk ad p ynny 69Podsumowanie 69
Rozdzia 3 Opanowanie uk adoacutew p ynnych 71
Uk ady sta e nie s przystosowane do nowych wyzwa 72Czemu uk ady proporcjonalne s tak wa ne w metodologii RWD 72Transformacja sta ego uk adu w projekt proporcjonalny 73
Wa ne roacutewnanie 73Definiowanie kontekstu w elementach proporcjonalnych 75Zawsze nale y pami ta o kontek cie 82
Wykorzystywanie jednostek em zamiast pikseli w kontek cie typografii 85P ynne obrazy 87
Skalowanie obrazoacutew w obr bie obszaru operacyjnego 87W a ciwe regu y dla w a ciwych obrazoacutew 89Nak adanie hamulcoacutew na uk ad p ynny 91Wszechstronna w asno max-width 92
Wczytywanie roacute nych obrazoacutew dla roacute nych ekranoacutew 93Konfigurowanie us ugi Adaptive Images 94
P ynne siatki i zapytania medialne tworz jedno 98System siatek CSS 99
B yskawiczne konstruowanie strony w systemie siatek 100Podsumowanie 105
Rozdzia 4 HTML5 i projekty elastyczne 107
Z jakich cz ci standardu HTML5 mo emy korzysta ju dzi 108Wi kszo witryn mo e by konstruowana w oparciu o HTML5 108Wype nienia skrypty i Modernizr 108
W jaki sposoacuteb pisa strony w standardzie HTML5 109Oszcz dno ci wynikaj ce z wykorzystania HTML5 110Rozs dne podej cie do pisania kodu 111Oddajmy cze wszechmocnemu elementowi ltagt 111Elementy j zyka HTML ktoacutere uleg y dezaktualizacji 112
Kup książkę Poleć książkę
Spis tre ci
5
Nowe elementy semantyczne HTML5 112Element ltsectiongt 113Element ltnavgt 114Element ltarticlegt 114Element ltasidegt 114Element lthgroupgt 115Element ltheadergt 116Element ltfootergt 117Element ltaddressgt 117
Praktyczne wykorzystanie elementoacutew strukturalnych HTML5 117A co z g oacutewn zawarto ci strony 123
HTML5 i semantyka na poziomie tekstu 123Element ltbgt 124Element ltemgt 124Element ltigt 125Zasady semantyki na poziomie tekstu w kodzie 125
Poprawienie dost pno ci strony za pomoc standardu WAI-ARIA 127Punkty orientacyjne w standardzie ARIA 127
Zagnie d anie elementoacutew multimedialnych w HTML5 130Zagnie d anie multimedioacutew wed ug HTML5 131
Alternatywne roacuted a plikoacutew 132Awaryjna obs uga w starszych przegl darkach 133Znaczniki audio i video dzia aj niemal identycznie 133
Skalowalne odtwarzacze filmoacutew 134Aplikacje sieciowe w trybie offline 137
Aplikacje offline od podszewki 137Wdra anie trybu offline 137Sk adnia pliku manifestu 139Automatyczne wczytywanie stron w manife cie 139Komentarze wersji 140Odczytywanie strony w trybie offline 140Rozwi zywanie problemoacutew z aplikacjami offline 141
Podsumowanie 142
Rozdzia 5 CSS3 selektory typografia i tryby barw 143
Co CSS3 oferuje projektantom stron 144Obs uga CSS3 w Internet Explorerze 6 7 i 8 144Wykorzystanie CSS3 do projektowania i formatowania stron w przegl darce 145
Struktura regu CSS 145Przedrostki autorskie i sposoacuteb ich wykorzystania 145Przydatne triki w CSS3 148
Uk ad wielokolumnowy w CSS3 dla projektu skalowalnego 148Zawijanie tekstu 151
Nowe selektory CSS3 i sposoacuteb ich wykorzystania 152Selektory atrybutoacutew w CSS3 152Strukturalne pseudoklasy CSS3 155Poprawki wprowadzane w pseudoelementach 164
Kup książkę Poleć książkę
Spis tre ci
6
W asna typografia sieciowa 166Regu a font-face 166Odwo anie do fontoacutew w regule font-face 167
Pomocy mdash moje nag oacutewki font-face CSS3 wygl daj okropnie 170Uwagi na temat elementoacutew typograficznych font-face
i elastycznego projektu strony 173Nowe formaty barw CSS3 i kana alfa 173
Tryb RGB 174Tryb HSL 175Awaryjne tryby barw dla Internet Explorera 6 7 i 8 176Kana y alfa 176
Podsumowanie 178
Rozdzia 6 Spektakularny wygl d i CSS3 179
Cieniowanie tekstu w CSS3 180Obs ugiwane tryby barw HEX HSL i RGB 180Jednostki piksele em i rem 181Blokowanie w a ciwo ci text-shadow 182Tworzenie efektu uwypuklenia za pomoc w asno ci text-shadow 184Nak adanie wielu efektoacutew cienia na tekst 184
Cieniowanie komponentoacutew 185Cieniowanie do wewn trz elementu 185Nak adanie wielu cieni na element 187
Gradienty t a 188Liniowe gradienty t a 189Gradienty ko owe 193Powtarzanie gradientu 196
Wzorce t a gradientu 198Projektowanie elastyczne a CSS3 200Korzystanie z wielu w a ciwo ci CSS3 naraz 202Wiele obrazoacutew t a naraz 206
Wymiary t a 208W a ciwo background position 208Skroacutecona deklaracja w a ciwo ci background 209
Wi cej w a ciwo ci CSS3 209Elastyczne ikony doskona e dla projektu skalowalnego 209Podsumowanie 210
Rozdzia 7 Przej cia transformacje i animacje w CSS3 213
Czym s przej cia CSS3 i jak mo emy z nich korzysta 214Typy w a ciwo ci przej 215Ciekawe typy przej dla elastycznych stron 218
Transformacje dwuwymiarowe a CSS3 219Co mo emy podda transformacji 220
Zabawa transformacjami troacutejwymiarowymi 224Sk adnia transformacji troacutejwymiarowych 226Transformacje troacutejwymiarowe wci raczkuj 230
Kup książkę Poleć książkę
Spis tre ci
7
Animacje w CSS3 231czenie animacji i transformacji CSS3 234
Podsumowanie 237
Rozdzia 8 Opanowanie formularzy w HTML5 i CSS3 239
Formularze a HTML5 240Komponenty w formularzach HTML5 242placeholder 242required 243autofocus 244autocomplete 244list (i powi zane elementy listy) 245Rodzaje kontrolek HTML5 246Kontrolki daty i godziny 252
Wype nienia dla starszych przegl darek 257Formatowanie formularzy HTML5 za pomoc arkuszy CSS3 258
Selektory pseudoklas CSS3 dla formularzy 262Podsumowanie 265
Rozdzia 9 Rozwi zywanie problemoacutew kompatybilno ci uk adoacutew wra liwychz przegl darkami 267
Ulepszenie post powe a agodna degradacja 272Praktyka 272
Czy powiniene naprawia problemy we wszystkich wersjach Internet Explorera 273Dane statystyczne (znowu) 274Kwestia w asnego wyboru 274
Modernizr mdash scyzoryk projektanta stron 275Rozwi zywanie problemoacutew z formatowaniem 277Obs uga elementoacutew HTML5 w starszych Internet Explorerach a Modernizr 279Implementacja obs ugi zapyta medialnych w Internet Explorerze 6 7 i 8 280Modernizr i wczytywanie warunkowe 282
Transformacja nawigacji mdash menu pionowe 284Urz dzenia z ekranami o wysokiej rozdzielczo ci (rzut okiem w przysz o ) 288Podsumowanie 291
Skorowidz 293
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
3
Opanowanieuk adoacutew p ynnych
Gdy w latach 90 ubieg ego wieku zacz em konstruowa witryny ich uk ad powstawa na ba-zie tabeli Najcz ciej wymiary pojedynczych sekcji ka dej strony by y wyra ane w procen-tach Przyk adowo lewa kolumna nawigacji mog a wype nia 20 procent strony podczas gdyobszar tre ci 80 procent W przesz o ci nie by o tak wielkich roacute nic mi dzy obszarami opera-cyjnymi przegl darek jak obecnie wi c te uk ady by y dobrze skalowane w w skim wyborzeekranoacutew Nikogo nie obchodzi o e pojedyncze zdania wygl da y odrobin inaczej na roacute -nych ekranach Jednak e z biegiem czasu uk ady CSS sta y si norm bo pozwala y na od-zwierciedlenie zasad typograficznych stosowanych w materia ach drukowanych Zmiana taoznacza a znaczne zmniejszenie liczby uk adoacutew konstruowanych na podstawie proporcji mdash za-miast nich powstawa y ich sztywne odpowiedniki ktoacuterych wymiary definiowano w pikselach
Podobnie jak inne wa ne osi gni cia aktualnie ten rodzaj projektowania prze ywa renesansW przeci gu ostatnich lat miniaturowe samochody trwa a fryzura (chcia oby si hellip) oraz jeansydzwony powroacuteci y do ask Nadszed czas by roacutewnie uk ady proporcjonalne zosta y odkrytena nowo
W tym rozdziale dowiesz si czemu uk ady proporcjonalne s tak wa ne w filozofii RWD nauczysz si wyra a elementy zbudowane w sta ej szeroko ci warto ciami
procentowymi nauczysz si definiowa elementy typografii wyra one w pikselach w jednostkach em zrozumiesz jak umie ci elementy we w a ciwych kontekstach nauczysz si p ynnie przeskalowywa obrazy dowiesz si jak dopasowa wielko grafik do wymiaroacutew ekranu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
72
zrozumiesz w jaki sposoacuteb uzupe niaj si zapytania medialne i p ynne uk ady stronoraz grafik
stworzysz uk ad skalowalny od podstaw w oparciu o system siatek CSS
Uk ady sta e nie s przystosowanedo nowych wyzwaJak ju wspomnia em od czasoacutew uk adoacutew tabelarycznych nie mia em zbyt wielu okazji bywykorzystywa projekty proporcjonalne Zwykle klienci prosz mnie o stworzenie uk adunajbli ej odzwierciedlaj cego graficzny model w obr bie 950 ndash 1000 pikseli Je eli zbudowa -bym projekt w oparciu o proporcjonalne warto ci (np 90) szybko dosta bym skarg bdquoAle towygl da inaczej na moim monitorzerdquo Witryny skonstruowane na bazie sta ych wymiaroacutewwyra onych w pikselach pozwala y na atwe dopasowanie uk adu do prototypu
Nawet w dzisiejszych czasach gdy u ywa o si zapyta medialnych celem stworzenia ulep-szonej wersji uk adu dopasowuj cej si do szeroko ci popularnych urz dze np iPada lubiPhonersquoa (o czym przekona e si w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo) wymiary uk adu w dalszym ci gu mog y by wyra one w pik-selach poniewa znali my wielko obszaru operacyjnego Cho znajd si tacy ktoacuterzy ch t-nie wy l klientowi rachunek za ka dym razem gdy najdzie go ochota by doda nowy bajer dostrony nie jest to podej cie dobrze przygotuj ce witryn na przysz o Na rynku pojawiaj sicoraz to nowsze typy obszaroacutew operacyjnych wi c musimy znale jaki sposoacuteb by przygoto-wa si na nadej cie nieznanego
Czemu uk ady proporcjonalne s tak wa new metodologii RWDMimo e zapytania medialne s bardzo przydatne maj pewne ograniczenia Dowolny sta yprojekt witryny korzystaj cy z zapyta medialnych do dopasowania si do roacute nych obszaroacutewoperacyjnych b dzie po prostu przechodzi z jednego zestawu regu do drugiego bez adnejanimacji pomi dzy stanami Jak pami tasz w przyk adzie z rozdzia u 2 bdquoZapytania medialneobs uga zroacute nicowanych obszaroacutew operacyjnychrdquo obszar operacyjny zmienia si w obr biesta ych zakresoacutew zapyta i wymaga przewijania strony w poziomie dla niestandardowychrozdzielczo ci (ktoacutere mog obowi zywa w nowych nieznanych dot d urz dzeniach) Myjednak chcemy by nasz uk ad przewija si i wygl da dobrze we wszystkich obszarach opera-cyjnych a nie tylko tych zdefiniowanych w zapytaniu medialnym Ci cie (Rozumiesz Ci cieTakie filmowe powiedzenie w sam raz dla naszej filmowej witrynyhellip Prawda Nie Ju id poswoacutej p aszczhellip) Musimy przemieni nasz sta y uk ad wyra ony w pikselach w uk ad p ynny zbu-
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
73
dowany w oparciu o proporcjonalne jednostki Pozwoli to elementom dynamicznie dopasowywasi wzgl dem obszaru operacyjnego do momentu gdy do akcji wkroczy zapytanie medialnei zmodyfikuje uk ad
Symbioza uk adu proporcjonalnego i zapyta medialnych
Wspomnia em wcze niej artyku autorstwa Ethana Marcottersquoa na temat metodologii RWD ktoacutery opubli-kowano w witrynie A List Apart (httpwwwalistapartcomarticlesresponsive-web-design) Cho na-rz dzia ktoacuterych u y w omawianym przyk adzie (p ynny uk ad obrazy i zapytania medialne) nie by ywcale nowe prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworze-nia spoacutejnej ca o ci Dla wielu projektantoacutew witryn ten artyku by kluczem do wiata nowych mo liwo-ci Przedstawia sposoacuteb ktoacutery czerpie to co najlepsze z dwoacutech wiatoacutew stworzenie p ynnego uk adu
bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementoacutew zapomoc zapytania medialnego Wykorzystanie tych aspektoacutew razem jest fundamentem metodologii RWDdzi ki ktoacuterej powstaje co znacznie wi kszego ni suma cz ci sk adowych
Transformacja sta ego uk aduw projekt proporcjonalnyW najbli szej przysz o ci wszystkie gotowe kompozyty ktoacutere otrzymasz lub stworzysz b dmia y sta szeroko Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworkswymiary elementoacutew wielko marginesoacutew itp wyra amy w pikselach Dane te wprowadza-my poacute niej w arkuszach styloacutew CSS To samo dotyczy rozmiaroacutew tekstu W naszym ulubio-nym programie graficznym klikamy fragment tekstu zapisujemy wielko fontu (te wyra onw pikselach) i przenosimy j do odpowiednich regu CSS W jaki wi c sposoacuteb mo emy prze-mieni nasz uk ad sta y w proporcjonalny
Wa ne roacutewnanieBy mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcottersquoa lecz czuj e mu-sz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo paprzed nim na kolana) W ksi ce autorstwa Dana Cederholma mdash Handcrafted CSS mdash EthanMarcotte wspoacute tworzy rozdzia po wi cony p ynnym siatkom projektowym W nim opisaprosty i niezawodny wzoacuter s u cy do transformacji warto ci pikselowych w uk adzie sta ym nawarto ci procentowe w projekcie proporcjonalnym
element docelowy kontekst = wynik
Roacutewnanie to jest niepozorne czy nie Szybko jednak oka e si e jest ono Twoim najlepszymprzyjacielem Zamiast rozprawia o teoriach wykorzystajmy ten wzoacuter w praktyce zamieniaj cjednostki wymiaroacutew witryny Zwyci zc nie jesthellip na procenty
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
74
Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt
W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze
wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Spis tre ci
5
Nowe elementy semantyczne HTML5 112Element ltsectiongt 113Element ltnavgt 114Element ltarticlegt 114Element ltasidegt 114Element lthgroupgt 115Element ltheadergt 116Element ltfootergt 117Element ltaddressgt 117
Praktyczne wykorzystanie elementoacutew strukturalnych HTML5 117A co z g oacutewn zawarto ci strony 123
HTML5 i semantyka na poziomie tekstu 123Element ltbgt 124Element ltemgt 124Element ltigt 125Zasady semantyki na poziomie tekstu w kodzie 125
Poprawienie dost pno ci strony za pomoc standardu WAI-ARIA 127Punkty orientacyjne w standardzie ARIA 127
Zagnie d anie elementoacutew multimedialnych w HTML5 130Zagnie d anie multimedioacutew wed ug HTML5 131
Alternatywne roacuted a plikoacutew 132Awaryjna obs uga w starszych przegl darkach 133Znaczniki audio i video dzia aj niemal identycznie 133
Skalowalne odtwarzacze filmoacutew 134Aplikacje sieciowe w trybie offline 137
Aplikacje offline od podszewki 137Wdra anie trybu offline 137Sk adnia pliku manifestu 139Automatyczne wczytywanie stron w manife cie 139Komentarze wersji 140Odczytywanie strony w trybie offline 140Rozwi zywanie problemoacutew z aplikacjami offline 141
Podsumowanie 142
Rozdzia 5 CSS3 selektory typografia i tryby barw 143
Co CSS3 oferuje projektantom stron 144Obs uga CSS3 w Internet Explorerze 6 7 i 8 144Wykorzystanie CSS3 do projektowania i formatowania stron w przegl darce 145
Struktura regu CSS 145Przedrostki autorskie i sposoacuteb ich wykorzystania 145Przydatne triki w CSS3 148
Uk ad wielokolumnowy w CSS3 dla projektu skalowalnego 148Zawijanie tekstu 151
Nowe selektory CSS3 i sposoacuteb ich wykorzystania 152Selektory atrybutoacutew w CSS3 152Strukturalne pseudoklasy CSS3 155Poprawki wprowadzane w pseudoelementach 164
Kup książkę Poleć książkę
Spis tre ci
6
W asna typografia sieciowa 166Regu a font-face 166Odwo anie do fontoacutew w regule font-face 167
Pomocy mdash moje nag oacutewki font-face CSS3 wygl daj okropnie 170Uwagi na temat elementoacutew typograficznych font-face
i elastycznego projektu strony 173Nowe formaty barw CSS3 i kana alfa 173
Tryb RGB 174Tryb HSL 175Awaryjne tryby barw dla Internet Explorera 6 7 i 8 176Kana y alfa 176
Podsumowanie 178
Rozdzia 6 Spektakularny wygl d i CSS3 179
Cieniowanie tekstu w CSS3 180Obs ugiwane tryby barw HEX HSL i RGB 180Jednostki piksele em i rem 181Blokowanie w a ciwo ci text-shadow 182Tworzenie efektu uwypuklenia za pomoc w asno ci text-shadow 184Nak adanie wielu efektoacutew cienia na tekst 184
Cieniowanie komponentoacutew 185Cieniowanie do wewn trz elementu 185Nak adanie wielu cieni na element 187
Gradienty t a 188Liniowe gradienty t a 189Gradienty ko owe 193Powtarzanie gradientu 196
Wzorce t a gradientu 198Projektowanie elastyczne a CSS3 200Korzystanie z wielu w a ciwo ci CSS3 naraz 202Wiele obrazoacutew t a naraz 206
Wymiary t a 208W a ciwo background position 208Skroacutecona deklaracja w a ciwo ci background 209
Wi cej w a ciwo ci CSS3 209Elastyczne ikony doskona e dla projektu skalowalnego 209Podsumowanie 210
Rozdzia 7 Przej cia transformacje i animacje w CSS3 213
Czym s przej cia CSS3 i jak mo emy z nich korzysta 214Typy w a ciwo ci przej 215Ciekawe typy przej dla elastycznych stron 218
Transformacje dwuwymiarowe a CSS3 219Co mo emy podda transformacji 220
Zabawa transformacjami troacutejwymiarowymi 224Sk adnia transformacji troacutejwymiarowych 226Transformacje troacutejwymiarowe wci raczkuj 230
Kup książkę Poleć książkę
Spis tre ci
7
Animacje w CSS3 231czenie animacji i transformacji CSS3 234
Podsumowanie 237
Rozdzia 8 Opanowanie formularzy w HTML5 i CSS3 239
Formularze a HTML5 240Komponenty w formularzach HTML5 242placeholder 242required 243autofocus 244autocomplete 244list (i powi zane elementy listy) 245Rodzaje kontrolek HTML5 246Kontrolki daty i godziny 252
Wype nienia dla starszych przegl darek 257Formatowanie formularzy HTML5 za pomoc arkuszy CSS3 258
Selektory pseudoklas CSS3 dla formularzy 262Podsumowanie 265
Rozdzia 9 Rozwi zywanie problemoacutew kompatybilno ci uk adoacutew wra liwychz przegl darkami 267
Ulepszenie post powe a agodna degradacja 272Praktyka 272
Czy powiniene naprawia problemy we wszystkich wersjach Internet Explorera 273Dane statystyczne (znowu) 274Kwestia w asnego wyboru 274
Modernizr mdash scyzoryk projektanta stron 275Rozwi zywanie problemoacutew z formatowaniem 277Obs uga elementoacutew HTML5 w starszych Internet Explorerach a Modernizr 279Implementacja obs ugi zapyta medialnych w Internet Explorerze 6 7 i 8 280Modernizr i wczytywanie warunkowe 282
Transformacja nawigacji mdash menu pionowe 284Urz dzenia z ekranami o wysokiej rozdzielczo ci (rzut okiem w przysz o ) 288Podsumowanie 291
Skorowidz 293
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
3
Opanowanieuk adoacutew p ynnych
Gdy w latach 90 ubieg ego wieku zacz em konstruowa witryny ich uk ad powstawa na ba-zie tabeli Najcz ciej wymiary pojedynczych sekcji ka dej strony by y wyra ane w procen-tach Przyk adowo lewa kolumna nawigacji mog a wype nia 20 procent strony podczas gdyobszar tre ci 80 procent W przesz o ci nie by o tak wielkich roacute nic mi dzy obszarami opera-cyjnymi przegl darek jak obecnie wi c te uk ady by y dobrze skalowane w w skim wyborzeekranoacutew Nikogo nie obchodzi o e pojedyncze zdania wygl da y odrobin inaczej na roacute -nych ekranach Jednak e z biegiem czasu uk ady CSS sta y si norm bo pozwala y na od-zwierciedlenie zasad typograficznych stosowanych w materia ach drukowanych Zmiana taoznacza a znaczne zmniejszenie liczby uk adoacutew konstruowanych na podstawie proporcji mdash za-miast nich powstawa y ich sztywne odpowiedniki ktoacuterych wymiary definiowano w pikselach
Podobnie jak inne wa ne osi gni cia aktualnie ten rodzaj projektowania prze ywa renesansW przeci gu ostatnich lat miniaturowe samochody trwa a fryzura (chcia oby si hellip) oraz jeansydzwony powroacuteci y do ask Nadszed czas by roacutewnie uk ady proporcjonalne zosta y odkrytena nowo
W tym rozdziale dowiesz si czemu uk ady proporcjonalne s tak wa ne w filozofii RWD nauczysz si wyra a elementy zbudowane w sta ej szeroko ci warto ciami
procentowymi nauczysz si definiowa elementy typografii wyra one w pikselach w jednostkach em zrozumiesz jak umie ci elementy we w a ciwych kontekstach nauczysz si p ynnie przeskalowywa obrazy dowiesz si jak dopasowa wielko grafik do wymiaroacutew ekranu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
72
zrozumiesz w jaki sposoacuteb uzupe niaj si zapytania medialne i p ynne uk ady stronoraz grafik
stworzysz uk ad skalowalny od podstaw w oparciu o system siatek CSS
Uk ady sta e nie s przystosowanedo nowych wyzwaJak ju wspomnia em od czasoacutew uk adoacutew tabelarycznych nie mia em zbyt wielu okazji bywykorzystywa projekty proporcjonalne Zwykle klienci prosz mnie o stworzenie uk adunajbli ej odzwierciedlaj cego graficzny model w obr bie 950 ndash 1000 pikseli Je eli zbudowa -bym projekt w oparciu o proporcjonalne warto ci (np 90) szybko dosta bym skarg bdquoAle towygl da inaczej na moim monitorzerdquo Witryny skonstruowane na bazie sta ych wymiaroacutewwyra onych w pikselach pozwala y na atwe dopasowanie uk adu do prototypu
Nawet w dzisiejszych czasach gdy u ywa o si zapyta medialnych celem stworzenia ulep-szonej wersji uk adu dopasowuj cej si do szeroko ci popularnych urz dze np iPada lubiPhonersquoa (o czym przekona e si w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo) wymiary uk adu w dalszym ci gu mog y by wyra one w pik-selach poniewa znali my wielko obszaru operacyjnego Cho znajd si tacy ktoacuterzy ch t-nie wy l klientowi rachunek za ka dym razem gdy najdzie go ochota by doda nowy bajer dostrony nie jest to podej cie dobrze przygotuj ce witryn na przysz o Na rynku pojawiaj sicoraz to nowsze typy obszaroacutew operacyjnych wi c musimy znale jaki sposoacuteb by przygoto-wa si na nadej cie nieznanego
Czemu uk ady proporcjonalne s tak wa new metodologii RWDMimo e zapytania medialne s bardzo przydatne maj pewne ograniczenia Dowolny sta yprojekt witryny korzystaj cy z zapyta medialnych do dopasowania si do roacute nych obszaroacutewoperacyjnych b dzie po prostu przechodzi z jednego zestawu regu do drugiego bez adnejanimacji pomi dzy stanami Jak pami tasz w przyk adzie z rozdzia u 2 bdquoZapytania medialneobs uga zroacute nicowanych obszaroacutew operacyjnychrdquo obszar operacyjny zmienia si w obr biesta ych zakresoacutew zapyta i wymaga przewijania strony w poziomie dla niestandardowychrozdzielczo ci (ktoacutere mog obowi zywa w nowych nieznanych dot d urz dzeniach) Myjednak chcemy by nasz uk ad przewija si i wygl da dobrze we wszystkich obszarach opera-cyjnych a nie tylko tych zdefiniowanych w zapytaniu medialnym Ci cie (Rozumiesz Ci cieTakie filmowe powiedzenie w sam raz dla naszej filmowej witrynyhellip Prawda Nie Ju id poswoacutej p aszczhellip) Musimy przemieni nasz sta y uk ad wyra ony w pikselach w uk ad p ynny zbu-
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
73
dowany w oparciu o proporcjonalne jednostki Pozwoli to elementom dynamicznie dopasowywasi wzgl dem obszaru operacyjnego do momentu gdy do akcji wkroczy zapytanie medialnei zmodyfikuje uk ad
Symbioza uk adu proporcjonalnego i zapyta medialnych
Wspomnia em wcze niej artyku autorstwa Ethana Marcottersquoa na temat metodologii RWD ktoacutery opubli-kowano w witrynie A List Apart (httpwwwalistapartcomarticlesresponsive-web-design) Cho na-rz dzia ktoacuterych u y w omawianym przyk adzie (p ynny uk ad obrazy i zapytania medialne) nie by ywcale nowe prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworze-nia spoacutejnej ca o ci Dla wielu projektantoacutew witryn ten artyku by kluczem do wiata nowych mo liwo-ci Przedstawia sposoacuteb ktoacutery czerpie to co najlepsze z dwoacutech wiatoacutew stworzenie p ynnego uk adu
bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementoacutew zapomoc zapytania medialnego Wykorzystanie tych aspektoacutew razem jest fundamentem metodologii RWDdzi ki ktoacuterej powstaje co znacznie wi kszego ni suma cz ci sk adowych
Transformacja sta ego uk aduw projekt proporcjonalnyW najbli szej przysz o ci wszystkie gotowe kompozyty ktoacutere otrzymasz lub stworzysz b dmia y sta szeroko Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworkswymiary elementoacutew wielko marginesoacutew itp wyra amy w pikselach Dane te wprowadza-my poacute niej w arkuszach styloacutew CSS To samo dotyczy rozmiaroacutew tekstu W naszym ulubio-nym programie graficznym klikamy fragment tekstu zapisujemy wielko fontu (te wyra onw pikselach) i przenosimy j do odpowiednich regu CSS W jaki wi c sposoacuteb mo emy prze-mieni nasz uk ad sta y w proporcjonalny
Wa ne roacutewnanieBy mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcottersquoa lecz czuj e mu-sz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo paprzed nim na kolana) W ksi ce autorstwa Dana Cederholma mdash Handcrafted CSS mdash EthanMarcotte wspoacute tworzy rozdzia po wi cony p ynnym siatkom projektowym W nim opisaprosty i niezawodny wzoacuter s u cy do transformacji warto ci pikselowych w uk adzie sta ym nawarto ci procentowe w projekcie proporcjonalnym
element docelowy kontekst = wynik
Roacutewnanie to jest niepozorne czy nie Szybko jednak oka e si e jest ono Twoim najlepszymprzyjacielem Zamiast rozprawia o teoriach wykorzystajmy ten wzoacuter w praktyce zamieniaj cjednostki wymiaroacutew witryny Zwyci zc nie jesthellip na procenty
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
74
Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt
W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze
wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Spis tre ci
6
W asna typografia sieciowa 166Regu a font-face 166Odwo anie do fontoacutew w regule font-face 167
Pomocy mdash moje nag oacutewki font-face CSS3 wygl daj okropnie 170Uwagi na temat elementoacutew typograficznych font-face
i elastycznego projektu strony 173Nowe formaty barw CSS3 i kana alfa 173
Tryb RGB 174Tryb HSL 175Awaryjne tryby barw dla Internet Explorera 6 7 i 8 176Kana y alfa 176
Podsumowanie 178
Rozdzia 6 Spektakularny wygl d i CSS3 179
Cieniowanie tekstu w CSS3 180Obs ugiwane tryby barw HEX HSL i RGB 180Jednostki piksele em i rem 181Blokowanie w a ciwo ci text-shadow 182Tworzenie efektu uwypuklenia za pomoc w asno ci text-shadow 184Nak adanie wielu efektoacutew cienia na tekst 184
Cieniowanie komponentoacutew 185Cieniowanie do wewn trz elementu 185Nak adanie wielu cieni na element 187
Gradienty t a 188Liniowe gradienty t a 189Gradienty ko owe 193Powtarzanie gradientu 196
Wzorce t a gradientu 198Projektowanie elastyczne a CSS3 200Korzystanie z wielu w a ciwo ci CSS3 naraz 202Wiele obrazoacutew t a naraz 206
Wymiary t a 208W a ciwo background position 208Skroacutecona deklaracja w a ciwo ci background 209
Wi cej w a ciwo ci CSS3 209Elastyczne ikony doskona e dla projektu skalowalnego 209Podsumowanie 210
Rozdzia 7 Przej cia transformacje i animacje w CSS3 213
Czym s przej cia CSS3 i jak mo emy z nich korzysta 214Typy w a ciwo ci przej 215Ciekawe typy przej dla elastycznych stron 218
Transformacje dwuwymiarowe a CSS3 219Co mo emy podda transformacji 220
Zabawa transformacjami troacutejwymiarowymi 224Sk adnia transformacji troacutejwymiarowych 226Transformacje troacutejwymiarowe wci raczkuj 230
Kup książkę Poleć książkę
Spis tre ci
7
Animacje w CSS3 231czenie animacji i transformacji CSS3 234
Podsumowanie 237
Rozdzia 8 Opanowanie formularzy w HTML5 i CSS3 239
Formularze a HTML5 240Komponenty w formularzach HTML5 242placeholder 242required 243autofocus 244autocomplete 244list (i powi zane elementy listy) 245Rodzaje kontrolek HTML5 246Kontrolki daty i godziny 252
Wype nienia dla starszych przegl darek 257Formatowanie formularzy HTML5 za pomoc arkuszy CSS3 258
Selektory pseudoklas CSS3 dla formularzy 262Podsumowanie 265
Rozdzia 9 Rozwi zywanie problemoacutew kompatybilno ci uk adoacutew wra liwychz przegl darkami 267
Ulepszenie post powe a agodna degradacja 272Praktyka 272
Czy powiniene naprawia problemy we wszystkich wersjach Internet Explorera 273Dane statystyczne (znowu) 274Kwestia w asnego wyboru 274
Modernizr mdash scyzoryk projektanta stron 275Rozwi zywanie problemoacutew z formatowaniem 277Obs uga elementoacutew HTML5 w starszych Internet Explorerach a Modernizr 279Implementacja obs ugi zapyta medialnych w Internet Explorerze 6 7 i 8 280Modernizr i wczytywanie warunkowe 282
Transformacja nawigacji mdash menu pionowe 284Urz dzenia z ekranami o wysokiej rozdzielczo ci (rzut okiem w przysz o ) 288Podsumowanie 291
Skorowidz 293
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
3
Opanowanieuk adoacutew p ynnych
Gdy w latach 90 ubieg ego wieku zacz em konstruowa witryny ich uk ad powstawa na ba-zie tabeli Najcz ciej wymiary pojedynczych sekcji ka dej strony by y wyra ane w procen-tach Przyk adowo lewa kolumna nawigacji mog a wype nia 20 procent strony podczas gdyobszar tre ci 80 procent W przesz o ci nie by o tak wielkich roacute nic mi dzy obszarami opera-cyjnymi przegl darek jak obecnie wi c te uk ady by y dobrze skalowane w w skim wyborzeekranoacutew Nikogo nie obchodzi o e pojedyncze zdania wygl da y odrobin inaczej na roacute -nych ekranach Jednak e z biegiem czasu uk ady CSS sta y si norm bo pozwala y na od-zwierciedlenie zasad typograficznych stosowanych w materia ach drukowanych Zmiana taoznacza a znaczne zmniejszenie liczby uk adoacutew konstruowanych na podstawie proporcji mdash za-miast nich powstawa y ich sztywne odpowiedniki ktoacuterych wymiary definiowano w pikselach
Podobnie jak inne wa ne osi gni cia aktualnie ten rodzaj projektowania prze ywa renesansW przeci gu ostatnich lat miniaturowe samochody trwa a fryzura (chcia oby si hellip) oraz jeansydzwony powroacuteci y do ask Nadszed czas by roacutewnie uk ady proporcjonalne zosta y odkrytena nowo
W tym rozdziale dowiesz si czemu uk ady proporcjonalne s tak wa ne w filozofii RWD nauczysz si wyra a elementy zbudowane w sta ej szeroko ci warto ciami
procentowymi nauczysz si definiowa elementy typografii wyra one w pikselach w jednostkach em zrozumiesz jak umie ci elementy we w a ciwych kontekstach nauczysz si p ynnie przeskalowywa obrazy dowiesz si jak dopasowa wielko grafik do wymiaroacutew ekranu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
72
zrozumiesz w jaki sposoacuteb uzupe niaj si zapytania medialne i p ynne uk ady stronoraz grafik
stworzysz uk ad skalowalny od podstaw w oparciu o system siatek CSS
Uk ady sta e nie s przystosowanedo nowych wyzwaJak ju wspomnia em od czasoacutew uk adoacutew tabelarycznych nie mia em zbyt wielu okazji bywykorzystywa projekty proporcjonalne Zwykle klienci prosz mnie o stworzenie uk adunajbli ej odzwierciedlaj cego graficzny model w obr bie 950 ndash 1000 pikseli Je eli zbudowa -bym projekt w oparciu o proporcjonalne warto ci (np 90) szybko dosta bym skarg bdquoAle towygl da inaczej na moim monitorzerdquo Witryny skonstruowane na bazie sta ych wymiaroacutewwyra onych w pikselach pozwala y na atwe dopasowanie uk adu do prototypu
Nawet w dzisiejszych czasach gdy u ywa o si zapyta medialnych celem stworzenia ulep-szonej wersji uk adu dopasowuj cej si do szeroko ci popularnych urz dze np iPada lubiPhonersquoa (o czym przekona e si w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo) wymiary uk adu w dalszym ci gu mog y by wyra one w pik-selach poniewa znali my wielko obszaru operacyjnego Cho znajd si tacy ktoacuterzy ch t-nie wy l klientowi rachunek za ka dym razem gdy najdzie go ochota by doda nowy bajer dostrony nie jest to podej cie dobrze przygotuj ce witryn na przysz o Na rynku pojawiaj sicoraz to nowsze typy obszaroacutew operacyjnych wi c musimy znale jaki sposoacuteb by przygoto-wa si na nadej cie nieznanego
Czemu uk ady proporcjonalne s tak wa new metodologii RWDMimo e zapytania medialne s bardzo przydatne maj pewne ograniczenia Dowolny sta yprojekt witryny korzystaj cy z zapyta medialnych do dopasowania si do roacute nych obszaroacutewoperacyjnych b dzie po prostu przechodzi z jednego zestawu regu do drugiego bez adnejanimacji pomi dzy stanami Jak pami tasz w przyk adzie z rozdzia u 2 bdquoZapytania medialneobs uga zroacute nicowanych obszaroacutew operacyjnychrdquo obszar operacyjny zmienia si w obr biesta ych zakresoacutew zapyta i wymaga przewijania strony w poziomie dla niestandardowychrozdzielczo ci (ktoacutere mog obowi zywa w nowych nieznanych dot d urz dzeniach) Myjednak chcemy by nasz uk ad przewija si i wygl da dobrze we wszystkich obszarach opera-cyjnych a nie tylko tych zdefiniowanych w zapytaniu medialnym Ci cie (Rozumiesz Ci cieTakie filmowe powiedzenie w sam raz dla naszej filmowej witrynyhellip Prawda Nie Ju id poswoacutej p aszczhellip) Musimy przemieni nasz sta y uk ad wyra ony w pikselach w uk ad p ynny zbu-
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
73
dowany w oparciu o proporcjonalne jednostki Pozwoli to elementom dynamicznie dopasowywasi wzgl dem obszaru operacyjnego do momentu gdy do akcji wkroczy zapytanie medialnei zmodyfikuje uk ad
Symbioza uk adu proporcjonalnego i zapyta medialnych
Wspomnia em wcze niej artyku autorstwa Ethana Marcottersquoa na temat metodologii RWD ktoacutery opubli-kowano w witrynie A List Apart (httpwwwalistapartcomarticlesresponsive-web-design) Cho na-rz dzia ktoacuterych u y w omawianym przyk adzie (p ynny uk ad obrazy i zapytania medialne) nie by ywcale nowe prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworze-nia spoacutejnej ca o ci Dla wielu projektantoacutew witryn ten artyku by kluczem do wiata nowych mo liwo-ci Przedstawia sposoacuteb ktoacutery czerpie to co najlepsze z dwoacutech wiatoacutew stworzenie p ynnego uk adu
bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementoacutew zapomoc zapytania medialnego Wykorzystanie tych aspektoacutew razem jest fundamentem metodologii RWDdzi ki ktoacuterej powstaje co znacznie wi kszego ni suma cz ci sk adowych
Transformacja sta ego uk aduw projekt proporcjonalnyW najbli szej przysz o ci wszystkie gotowe kompozyty ktoacutere otrzymasz lub stworzysz b dmia y sta szeroko Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworkswymiary elementoacutew wielko marginesoacutew itp wyra amy w pikselach Dane te wprowadza-my poacute niej w arkuszach styloacutew CSS To samo dotyczy rozmiaroacutew tekstu W naszym ulubio-nym programie graficznym klikamy fragment tekstu zapisujemy wielko fontu (te wyra onw pikselach) i przenosimy j do odpowiednich regu CSS W jaki wi c sposoacuteb mo emy prze-mieni nasz uk ad sta y w proporcjonalny
Wa ne roacutewnanieBy mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcottersquoa lecz czuj e mu-sz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo paprzed nim na kolana) W ksi ce autorstwa Dana Cederholma mdash Handcrafted CSS mdash EthanMarcotte wspoacute tworzy rozdzia po wi cony p ynnym siatkom projektowym W nim opisaprosty i niezawodny wzoacuter s u cy do transformacji warto ci pikselowych w uk adzie sta ym nawarto ci procentowe w projekcie proporcjonalnym
element docelowy kontekst = wynik
Roacutewnanie to jest niepozorne czy nie Szybko jednak oka e si e jest ono Twoim najlepszymprzyjacielem Zamiast rozprawia o teoriach wykorzystajmy ten wzoacuter w praktyce zamieniaj cjednostki wymiaroacutew witryny Zwyci zc nie jesthellip na procenty
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
74
Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt
W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze
wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Spis tre ci
7
Animacje w CSS3 231czenie animacji i transformacji CSS3 234
Podsumowanie 237
Rozdzia 8 Opanowanie formularzy w HTML5 i CSS3 239
Formularze a HTML5 240Komponenty w formularzach HTML5 242placeholder 242required 243autofocus 244autocomplete 244list (i powi zane elementy listy) 245Rodzaje kontrolek HTML5 246Kontrolki daty i godziny 252
Wype nienia dla starszych przegl darek 257Formatowanie formularzy HTML5 za pomoc arkuszy CSS3 258
Selektory pseudoklas CSS3 dla formularzy 262Podsumowanie 265
Rozdzia 9 Rozwi zywanie problemoacutew kompatybilno ci uk adoacutew wra liwychz przegl darkami 267
Ulepszenie post powe a agodna degradacja 272Praktyka 272
Czy powiniene naprawia problemy we wszystkich wersjach Internet Explorera 273Dane statystyczne (znowu) 274Kwestia w asnego wyboru 274
Modernizr mdash scyzoryk projektanta stron 275Rozwi zywanie problemoacutew z formatowaniem 277Obs uga elementoacutew HTML5 w starszych Internet Explorerach a Modernizr 279Implementacja obs ugi zapyta medialnych w Internet Explorerze 6 7 i 8 280Modernizr i wczytywanie warunkowe 282
Transformacja nawigacji mdash menu pionowe 284Urz dzenia z ekranami o wysokiej rozdzielczo ci (rzut okiem w przysz o ) 288Podsumowanie 291
Skorowidz 293
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
3
Opanowanieuk adoacutew p ynnych
Gdy w latach 90 ubieg ego wieku zacz em konstruowa witryny ich uk ad powstawa na ba-zie tabeli Najcz ciej wymiary pojedynczych sekcji ka dej strony by y wyra ane w procen-tach Przyk adowo lewa kolumna nawigacji mog a wype nia 20 procent strony podczas gdyobszar tre ci 80 procent W przesz o ci nie by o tak wielkich roacute nic mi dzy obszarami opera-cyjnymi przegl darek jak obecnie wi c te uk ady by y dobrze skalowane w w skim wyborzeekranoacutew Nikogo nie obchodzi o e pojedyncze zdania wygl da y odrobin inaczej na roacute -nych ekranach Jednak e z biegiem czasu uk ady CSS sta y si norm bo pozwala y na od-zwierciedlenie zasad typograficznych stosowanych w materia ach drukowanych Zmiana taoznacza a znaczne zmniejszenie liczby uk adoacutew konstruowanych na podstawie proporcji mdash za-miast nich powstawa y ich sztywne odpowiedniki ktoacuterych wymiary definiowano w pikselach
Podobnie jak inne wa ne osi gni cia aktualnie ten rodzaj projektowania prze ywa renesansW przeci gu ostatnich lat miniaturowe samochody trwa a fryzura (chcia oby si hellip) oraz jeansydzwony powroacuteci y do ask Nadszed czas by roacutewnie uk ady proporcjonalne zosta y odkrytena nowo
W tym rozdziale dowiesz si czemu uk ady proporcjonalne s tak wa ne w filozofii RWD nauczysz si wyra a elementy zbudowane w sta ej szeroko ci warto ciami
procentowymi nauczysz si definiowa elementy typografii wyra one w pikselach w jednostkach em zrozumiesz jak umie ci elementy we w a ciwych kontekstach nauczysz si p ynnie przeskalowywa obrazy dowiesz si jak dopasowa wielko grafik do wymiaroacutew ekranu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
72
zrozumiesz w jaki sposoacuteb uzupe niaj si zapytania medialne i p ynne uk ady stronoraz grafik
stworzysz uk ad skalowalny od podstaw w oparciu o system siatek CSS
Uk ady sta e nie s przystosowanedo nowych wyzwaJak ju wspomnia em od czasoacutew uk adoacutew tabelarycznych nie mia em zbyt wielu okazji bywykorzystywa projekty proporcjonalne Zwykle klienci prosz mnie o stworzenie uk adunajbli ej odzwierciedlaj cego graficzny model w obr bie 950 ndash 1000 pikseli Je eli zbudowa -bym projekt w oparciu o proporcjonalne warto ci (np 90) szybko dosta bym skarg bdquoAle towygl da inaczej na moim monitorzerdquo Witryny skonstruowane na bazie sta ych wymiaroacutewwyra onych w pikselach pozwala y na atwe dopasowanie uk adu do prototypu
Nawet w dzisiejszych czasach gdy u ywa o si zapyta medialnych celem stworzenia ulep-szonej wersji uk adu dopasowuj cej si do szeroko ci popularnych urz dze np iPada lubiPhonersquoa (o czym przekona e si w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo) wymiary uk adu w dalszym ci gu mog y by wyra one w pik-selach poniewa znali my wielko obszaru operacyjnego Cho znajd si tacy ktoacuterzy ch t-nie wy l klientowi rachunek za ka dym razem gdy najdzie go ochota by doda nowy bajer dostrony nie jest to podej cie dobrze przygotuj ce witryn na przysz o Na rynku pojawiaj sicoraz to nowsze typy obszaroacutew operacyjnych wi c musimy znale jaki sposoacuteb by przygoto-wa si na nadej cie nieznanego
Czemu uk ady proporcjonalne s tak wa new metodologii RWDMimo e zapytania medialne s bardzo przydatne maj pewne ograniczenia Dowolny sta yprojekt witryny korzystaj cy z zapyta medialnych do dopasowania si do roacute nych obszaroacutewoperacyjnych b dzie po prostu przechodzi z jednego zestawu regu do drugiego bez adnejanimacji pomi dzy stanami Jak pami tasz w przyk adzie z rozdzia u 2 bdquoZapytania medialneobs uga zroacute nicowanych obszaroacutew operacyjnychrdquo obszar operacyjny zmienia si w obr biesta ych zakresoacutew zapyta i wymaga przewijania strony w poziomie dla niestandardowychrozdzielczo ci (ktoacutere mog obowi zywa w nowych nieznanych dot d urz dzeniach) Myjednak chcemy by nasz uk ad przewija si i wygl da dobrze we wszystkich obszarach opera-cyjnych a nie tylko tych zdefiniowanych w zapytaniu medialnym Ci cie (Rozumiesz Ci cieTakie filmowe powiedzenie w sam raz dla naszej filmowej witrynyhellip Prawda Nie Ju id poswoacutej p aszczhellip) Musimy przemieni nasz sta y uk ad wyra ony w pikselach w uk ad p ynny zbu-
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
73
dowany w oparciu o proporcjonalne jednostki Pozwoli to elementom dynamicznie dopasowywasi wzgl dem obszaru operacyjnego do momentu gdy do akcji wkroczy zapytanie medialnei zmodyfikuje uk ad
Symbioza uk adu proporcjonalnego i zapyta medialnych
Wspomnia em wcze niej artyku autorstwa Ethana Marcottersquoa na temat metodologii RWD ktoacutery opubli-kowano w witrynie A List Apart (httpwwwalistapartcomarticlesresponsive-web-design) Cho na-rz dzia ktoacuterych u y w omawianym przyk adzie (p ynny uk ad obrazy i zapytania medialne) nie by ywcale nowe prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworze-nia spoacutejnej ca o ci Dla wielu projektantoacutew witryn ten artyku by kluczem do wiata nowych mo liwo-ci Przedstawia sposoacuteb ktoacutery czerpie to co najlepsze z dwoacutech wiatoacutew stworzenie p ynnego uk adu
bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementoacutew zapomoc zapytania medialnego Wykorzystanie tych aspektoacutew razem jest fundamentem metodologii RWDdzi ki ktoacuterej powstaje co znacznie wi kszego ni suma cz ci sk adowych
Transformacja sta ego uk aduw projekt proporcjonalnyW najbli szej przysz o ci wszystkie gotowe kompozyty ktoacutere otrzymasz lub stworzysz b dmia y sta szeroko Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworkswymiary elementoacutew wielko marginesoacutew itp wyra amy w pikselach Dane te wprowadza-my poacute niej w arkuszach styloacutew CSS To samo dotyczy rozmiaroacutew tekstu W naszym ulubio-nym programie graficznym klikamy fragment tekstu zapisujemy wielko fontu (te wyra onw pikselach) i przenosimy j do odpowiednich regu CSS W jaki wi c sposoacuteb mo emy prze-mieni nasz uk ad sta y w proporcjonalny
Wa ne roacutewnanieBy mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcottersquoa lecz czuj e mu-sz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo paprzed nim na kolana) W ksi ce autorstwa Dana Cederholma mdash Handcrafted CSS mdash EthanMarcotte wspoacute tworzy rozdzia po wi cony p ynnym siatkom projektowym W nim opisaprosty i niezawodny wzoacuter s u cy do transformacji warto ci pikselowych w uk adzie sta ym nawarto ci procentowe w projekcie proporcjonalnym
element docelowy kontekst = wynik
Roacutewnanie to jest niepozorne czy nie Szybko jednak oka e si e jest ono Twoim najlepszymprzyjacielem Zamiast rozprawia o teoriach wykorzystajmy ten wzoacuter w praktyce zamieniaj cjednostki wymiaroacutew witryny Zwyci zc nie jesthellip na procenty
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
74
Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt
W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze
wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
3
Opanowanieuk adoacutew p ynnych
Gdy w latach 90 ubieg ego wieku zacz em konstruowa witryny ich uk ad powstawa na ba-zie tabeli Najcz ciej wymiary pojedynczych sekcji ka dej strony by y wyra ane w procen-tach Przyk adowo lewa kolumna nawigacji mog a wype nia 20 procent strony podczas gdyobszar tre ci 80 procent W przesz o ci nie by o tak wielkich roacute nic mi dzy obszarami opera-cyjnymi przegl darek jak obecnie wi c te uk ady by y dobrze skalowane w w skim wyborzeekranoacutew Nikogo nie obchodzi o e pojedyncze zdania wygl da y odrobin inaczej na roacute -nych ekranach Jednak e z biegiem czasu uk ady CSS sta y si norm bo pozwala y na od-zwierciedlenie zasad typograficznych stosowanych w materia ach drukowanych Zmiana taoznacza a znaczne zmniejszenie liczby uk adoacutew konstruowanych na podstawie proporcji mdash za-miast nich powstawa y ich sztywne odpowiedniki ktoacuterych wymiary definiowano w pikselach
Podobnie jak inne wa ne osi gni cia aktualnie ten rodzaj projektowania prze ywa renesansW przeci gu ostatnich lat miniaturowe samochody trwa a fryzura (chcia oby si hellip) oraz jeansydzwony powroacuteci y do ask Nadszed czas by roacutewnie uk ady proporcjonalne zosta y odkrytena nowo
W tym rozdziale dowiesz si czemu uk ady proporcjonalne s tak wa ne w filozofii RWD nauczysz si wyra a elementy zbudowane w sta ej szeroko ci warto ciami
procentowymi nauczysz si definiowa elementy typografii wyra one w pikselach w jednostkach em zrozumiesz jak umie ci elementy we w a ciwych kontekstach nauczysz si p ynnie przeskalowywa obrazy dowiesz si jak dopasowa wielko grafik do wymiaroacutew ekranu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
72
zrozumiesz w jaki sposoacuteb uzupe niaj si zapytania medialne i p ynne uk ady stronoraz grafik
stworzysz uk ad skalowalny od podstaw w oparciu o system siatek CSS
Uk ady sta e nie s przystosowanedo nowych wyzwaJak ju wspomnia em od czasoacutew uk adoacutew tabelarycznych nie mia em zbyt wielu okazji bywykorzystywa projekty proporcjonalne Zwykle klienci prosz mnie o stworzenie uk adunajbli ej odzwierciedlaj cego graficzny model w obr bie 950 ndash 1000 pikseli Je eli zbudowa -bym projekt w oparciu o proporcjonalne warto ci (np 90) szybko dosta bym skarg bdquoAle towygl da inaczej na moim monitorzerdquo Witryny skonstruowane na bazie sta ych wymiaroacutewwyra onych w pikselach pozwala y na atwe dopasowanie uk adu do prototypu
Nawet w dzisiejszych czasach gdy u ywa o si zapyta medialnych celem stworzenia ulep-szonej wersji uk adu dopasowuj cej si do szeroko ci popularnych urz dze np iPada lubiPhonersquoa (o czym przekona e si w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo) wymiary uk adu w dalszym ci gu mog y by wyra one w pik-selach poniewa znali my wielko obszaru operacyjnego Cho znajd si tacy ktoacuterzy ch t-nie wy l klientowi rachunek za ka dym razem gdy najdzie go ochota by doda nowy bajer dostrony nie jest to podej cie dobrze przygotuj ce witryn na przysz o Na rynku pojawiaj sicoraz to nowsze typy obszaroacutew operacyjnych wi c musimy znale jaki sposoacuteb by przygoto-wa si na nadej cie nieznanego
Czemu uk ady proporcjonalne s tak wa new metodologii RWDMimo e zapytania medialne s bardzo przydatne maj pewne ograniczenia Dowolny sta yprojekt witryny korzystaj cy z zapyta medialnych do dopasowania si do roacute nych obszaroacutewoperacyjnych b dzie po prostu przechodzi z jednego zestawu regu do drugiego bez adnejanimacji pomi dzy stanami Jak pami tasz w przyk adzie z rozdzia u 2 bdquoZapytania medialneobs uga zroacute nicowanych obszaroacutew operacyjnychrdquo obszar operacyjny zmienia si w obr biesta ych zakresoacutew zapyta i wymaga przewijania strony w poziomie dla niestandardowychrozdzielczo ci (ktoacutere mog obowi zywa w nowych nieznanych dot d urz dzeniach) Myjednak chcemy by nasz uk ad przewija si i wygl da dobrze we wszystkich obszarach opera-cyjnych a nie tylko tych zdefiniowanych w zapytaniu medialnym Ci cie (Rozumiesz Ci cieTakie filmowe powiedzenie w sam raz dla naszej filmowej witrynyhellip Prawda Nie Ju id poswoacutej p aszczhellip) Musimy przemieni nasz sta y uk ad wyra ony w pikselach w uk ad p ynny zbu-
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
73
dowany w oparciu o proporcjonalne jednostki Pozwoli to elementom dynamicznie dopasowywasi wzgl dem obszaru operacyjnego do momentu gdy do akcji wkroczy zapytanie medialnei zmodyfikuje uk ad
Symbioza uk adu proporcjonalnego i zapyta medialnych
Wspomnia em wcze niej artyku autorstwa Ethana Marcottersquoa na temat metodologii RWD ktoacutery opubli-kowano w witrynie A List Apart (httpwwwalistapartcomarticlesresponsive-web-design) Cho na-rz dzia ktoacuterych u y w omawianym przyk adzie (p ynny uk ad obrazy i zapytania medialne) nie by ywcale nowe prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworze-nia spoacutejnej ca o ci Dla wielu projektantoacutew witryn ten artyku by kluczem do wiata nowych mo liwo-ci Przedstawia sposoacuteb ktoacutery czerpie to co najlepsze z dwoacutech wiatoacutew stworzenie p ynnego uk adu
bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementoacutew zapomoc zapytania medialnego Wykorzystanie tych aspektoacutew razem jest fundamentem metodologii RWDdzi ki ktoacuterej powstaje co znacznie wi kszego ni suma cz ci sk adowych
Transformacja sta ego uk aduw projekt proporcjonalnyW najbli szej przysz o ci wszystkie gotowe kompozyty ktoacutere otrzymasz lub stworzysz b dmia y sta szeroko Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworkswymiary elementoacutew wielko marginesoacutew itp wyra amy w pikselach Dane te wprowadza-my poacute niej w arkuszach styloacutew CSS To samo dotyczy rozmiaroacutew tekstu W naszym ulubio-nym programie graficznym klikamy fragment tekstu zapisujemy wielko fontu (te wyra onw pikselach) i przenosimy j do odpowiednich regu CSS W jaki wi c sposoacuteb mo emy prze-mieni nasz uk ad sta y w proporcjonalny
Wa ne roacutewnanieBy mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcottersquoa lecz czuj e mu-sz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo paprzed nim na kolana) W ksi ce autorstwa Dana Cederholma mdash Handcrafted CSS mdash EthanMarcotte wspoacute tworzy rozdzia po wi cony p ynnym siatkom projektowym W nim opisaprosty i niezawodny wzoacuter s u cy do transformacji warto ci pikselowych w uk adzie sta ym nawarto ci procentowe w projekcie proporcjonalnym
element docelowy kontekst = wynik
Roacutewnanie to jest niepozorne czy nie Szybko jednak oka e si e jest ono Twoim najlepszymprzyjacielem Zamiast rozprawia o teoriach wykorzystajmy ten wzoacuter w praktyce zamieniaj cjednostki wymiaroacutew witryny Zwyci zc nie jesthellip na procenty
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
74
Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt
W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze
wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
3
Opanowanieuk adoacutew p ynnych
Gdy w latach 90 ubieg ego wieku zacz em konstruowa witryny ich uk ad powstawa na ba-zie tabeli Najcz ciej wymiary pojedynczych sekcji ka dej strony by y wyra ane w procen-tach Przyk adowo lewa kolumna nawigacji mog a wype nia 20 procent strony podczas gdyobszar tre ci 80 procent W przesz o ci nie by o tak wielkich roacute nic mi dzy obszarami opera-cyjnymi przegl darek jak obecnie wi c te uk ady by y dobrze skalowane w w skim wyborzeekranoacutew Nikogo nie obchodzi o e pojedyncze zdania wygl da y odrobin inaczej na roacute -nych ekranach Jednak e z biegiem czasu uk ady CSS sta y si norm bo pozwala y na od-zwierciedlenie zasad typograficznych stosowanych w materia ach drukowanych Zmiana taoznacza a znaczne zmniejszenie liczby uk adoacutew konstruowanych na podstawie proporcji mdash za-miast nich powstawa y ich sztywne odpowiedniki ktoacuterych wymiary definiowano w pikselach
Podobnie jak inne wa ne osi gni cia aktualnie ten rodzaj projektowania prze ywa renesansW przeci gu ostatnich lat miniaturowe samochody trwa a fryzura (chcia oby si hellip) oraz jeansydzwony powroacuteci y do ask Nadszed czas by roacutewnie uk ady proporcjonalne zosta y odkrytena nowo
W tym rozdziale dowiesz si czemu uk ady proporcjonalne s tak wa ne w filozofii RWD nauczysz si wyra a elementy zbudowane w sta ej szeroko ci warto ciami
procentowymi nauczysz si definiowa elementy typografii wyra one w pikselach w jednostkach em zrozumiesz jak umie ci elementy we w a ciwych kontekstach nauczysz si p ynnie przeskalowywa obrazy dowiesz si jak dopasowa wielko grafik do wymiaroacutew ekranu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
72
zrozumiesz w jaki sposoacuteb uzupe niaj si zapytania medialne i p ynne uk ady stronoraz grafik
stworzysz uk ad skalowalny od podstaw w oparciu o system siatek CSS
Uk ady sta e nie s przystosowanedo nowych wyzwaJak ju wspomnia em od czasoacutew uk adoacutew tabelarycznych nie mia em zbyt wielu okazji bywykorzystywa projekty proporcjonalne Zwykle klienci prosz mnie o stworzenie uk adunajbli ej odzwierciedlaj cego graficzny model w obr bie 950 ndash 1000 pikseli Je eli zbudowa -bym projekt w oparciu o proporcjonalne warto ci (np 90) szybko dosta bym skarg bdquoAle towygl da inaczej na moim monitorzerdquo Witryny skonstruowane na bazie sta ych wymiaroacutewwyra onych w pikselach pozwala y na atwe dopasowanie uk adu do prototypu
Nawet w dzisiejszych czasach gdy u ywa o si zapyta medialnych celem stworzenia ulep-szonej wersji uk adu dopasowuj cej si do szeroko ci popularnych urz dze np iPada lubiPhonersquoa (o czym przekona e si w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo) wymiary uk adu w dalszym ci gu mog y by wyra one w pik-selach poniewa znali my wielko obszaru operacyjnego Cho znajd si tacy ktoacuterzy ch t-nie wy l klientowi rachunek za ka dym razem gdy najdzie go ochota by doda nowy bajer dostrony nie jest to podej cie dobrze przygotuj ce witryn na przysz o Na rynku pojawiaj sicoraz to nowsze typy obszaroacutew operacyjnych wi c musimy znale jaki sposoacuteb by przygoto-wa si na nadej cie nieznanego
Czemu uk ady proporcjonalne s tak wa new metodologii RWDMimo e zapytania medialne s bardzo przydatne maj pewne ograniczenia Dowolny sta yprojekt witryny korzystaj cy z zapyta medialnych do dopasowania si do roacute nych obszaroacutewoperacyjnych b dzie po prostu przechodzi z jednego zestawu regu do drugiego bez adnejanimacji pomi dzy stanami Jak pami tasz w przyk adzie z rozdzia u 2 bdquoZapytania medialneobs uga zroacute nicowanych obszaroacutew operacyjnychrdquo obszar operacyjny zmienia si w obr biesta ych zakresoacutew zapyta i wymaga przewijania strony w poziomie dla niestandardowychrozdzielczo ci (ktoacutere mog obowi zywa w nowych nieznanych dot d urz dzeniach) Myjednak chcemy by nasz uk ad przewija si i wygl da dobrze we wszystkich obszarach opera-cyjnych a nie tylko tych zdefiniowanych w zapytaniu medialnym Ci cie (Rozumiesz Ci cieTakie filmowe powiedzenie w sam raz dla naszej filmowej witrynyhellip Prawda Nie Ju id poswoacutej p aszczhellip) Musimy przemieni nasz sta y uk ad wyra ony w pikselach w uk ad p ynny zbu-
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
73
dowany w oparciu o proporcjonalne jednostki Pozwoli to elementom dynamicznie dopasowywasi wzgl dem obszaru operacyjnego do momentu gdy do akcji wkroczy zapytanie medialnei zmodyfikuje uk ad
Symbioza uk adu proporcjonalnego i zapyta medialnych
Wspomnia em wcze niej artyku autorstwa Ethana Marcottersquoa na temat metodologii RWD ktoacutery opubli-kowano w witrynie A List Apart (httpwwwalistapartcomarticlesresponsive-web-design) Cho na-rz dzia ktoacuterych u y w omawianym przyk adzie (p ynny uk ad obrazy i zapytania medialne) nie by ywcale nowe prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworze-nia spoacutejnej ca o ci Dla wielu projektantoacutew witryn ten artyku by kluczem do wiata nowych mo liwo-ci Przedstawia sposoacuteb ktoacutery czerpie to co najlepsze z dwoacutech wiatoacutew stworzenie p ynnego uk adu
bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementoacutew zapomoc zapytania medialnego Wykorzystanie tych aspektoacutew razem jest fundamentem metodologii RWDdzi ki ktoacuterej powstaje co znacznie wi kszego ni suma cz ci sk adowych
Transformacja sta ego uk aduw projekt proporcjonalnyW najbli szej przysz o ci wszystkie gotowe kompozyty ktoacutere otrzymasz lub stworzysz b dmia y sta szeroko Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworkswymiary elementoacutew wielko marginesoacutew itp wyra amy w pikselach Dane te wprowadza-my poacute niej w arkuszach styloacutew CSS To samo dotyczy rozmiaroacutew tekstu W naszym ulubio-nym programie graficznym klikamy fragment tekstu zapisujemy wielko fontu (te wyra onw pikselach) i przenosimy j do odpowiednich regu CSS W jaki wi c sposoacuteb mo emy prze-mieni nasz uk ad sta y w proporcjonalny
Wa ne roacutewnanieBy mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcottersquoa lecz czuj e mu-sz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo paprzed nim na kolana) W ksi ce autorstwa Dana Cederholma mdash Handcrafted CSS mdash EthanMarcotte wspoacute tworzy rozdzia po wi cony p ynnym siatkom projektowym W nim opisaprosty i niezawodny wzoacuter s u cy do transformacji warto ci pikselowych w uk adzie sta ym nawarto ci procentowe w projekcie proporcjonalnym
element docelowy kontekst = wynik
Roacutewnanie to jest niepozorne czy nie Szybko jednak oka e si e jest ono Twoim najlepszymprzyjacielem Zamiast rozprawia o teoriach wykorzystajmy ten wzoacuter w praktyce zamieniaj cjednostki wymiaroacutew witryny Zwyci zc nie jesthellip na procenty
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
74
Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt
W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze
wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
72
zrozumiesz w jaki sposoacuteb uzupe niaj si zapytania medialne i p ynne uk ady stronoraz grafik
stworzysz uk ad skalowalny od podstaw w oparciu o system siatek CSS
Uk ady sta e nie s przystosowanedo nowych wyzwaJak ju wspomnia em od czasoacutew uk adoacutew tabelarycznych nie mia em zbyt wielu okazji bywykorzystywa projekty proporcjonalne Zwykle klienci prosz mnie o stworzenie uk adunajbli ej odzwierciedlaj cego graficzny model w obr bie 950 ndash 1000 pikseli Je eli zbudowa -bym projekt w oparciu o proporcjonalne warto ci (np 90) szybko dosta bym skarg bdquoAle towygl da inaczej na moim monitorzerdquo Witryny skonstruowane na bazie sta ych wymiaroacutewwyra onych w pikselach pozwala y na atwe dopasowanie uk adu do prototypu
Nawet w dzisiejszych czasach gdy u ywa o si zapyta medialnych celem stworzenia ulep-szonej wersji uk adu dopasowuj cej si do szeroko ci popularnych urz dze np iPada lubiPhonersquoa (o czym przekona e si w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo) wymiary uk adu w dalszym ci gu mog y by wyra one w pik-selach poniewa znali my wielko obszaru operacyjnego Cho znajd si tacy ktoacuterzy ch t-nie wy l klientowi rachunek za ka dym razem gdy najdzie go ochota by doda nowy bajer dostrony nie jest to podej cie dobrze przygotuj ce witryn na przysz o Na rynku pojawiaj sicoraz to nowsze typy obszaroacutew operacyjnych wi c musimy znale jaki sposoacuteb by przygoto-wa si na nadej cie nieznanego
Czemu uk ady proporcjonalne s tak wa new metodologii RWDMimo e zapytania medialne s bardzo przydatne maj pewne ograniczenia Dowolny sta yprojekt witryny korzystaj cy z zapyta medialnych do dopasowania si do roacute nych obszaroacutewoperacyjnych b dzie po prostu przechodzi z jednego zestawu regu do drugiego bez adnejanimacji pomi dzy stanami Jak pami tasz w przyk adzie z rozdzia u 2 bdquoZapytania medialneobs uga zroacute nicowanych obszaroacutew operacyjnychrdquo obszar operacyjny zmienia si w obr biesta ych zakresoacutew zapyta i wymaga przewijania strony w poziomie dla niestandardowychrozdzielczo ci (ktoacutere mog obowi zywa w nowych nieznanych dot d urz dzeniach) Myjednak chcemy by nasz uk ad przewija si i wygl da dobrze we wszystkich obszarach opera-cyjnych a nie tylko tych zdefiniowanych w zapytaniu medialnym Ci cie (Rozumiesz Ci cieTakie filmowe powiedzenie w sam raz dla naszej filmowej witrynyhellip Prawda Nie Ju id poswoacutej p aszczhellip) Musimy przemieni nasz sta y uk ad wyra ony w pikselach w uk ad p ynny zbu-
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
73
dowany w oparciu o proporcjonalne jednostki Pozwoli to elementom dynamicznie dopasowywasi wzgl dem obszaru operacyjnego do momentu gdy do akcji wkroczy zapytanie medialnei zmodyfikuje uk ad
Symbioza uk adu proporcjonalnego i zapyta medialnych
Wspomnia em wcze niej artyku autorstwa Ethana Marcottersquoa na temat metodologii RWD ktoacutery opubli-kowano w witrynie A List Apart (httpwwwalistapartcomarticlesresponsive-web-design) Cho na-rz dzia ktoacuterych u y w omawianym przyk adzie (p ynny uk ad obrazy i zapytania medialne) nie by ywcale nowe prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworze-nia spoacutejnej ca o ci Dla wielu projektantoacutew witryn ten artyku by kluczem do wiata nowych mo liwo-ci Przedstawia sposoacuteb ktoacutery czerpie to co najlepsze z dwoacutech wiatoacutew stworzenie p ynnego uk adu
bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementoacutew zapomoc zapytania medialnego Wykorzystanie tych aspektoacutew razem jest fundamentem metodologii RWDdzi ki ktoacuterej powstaje co znacznie wi kszego ni suma cz ci sk adowych
Transformacja sta ego uk aduw projekt proporcjonalnyW najbli szej przysz o ci wszystkie gotowe kompozyty ktoacutere otrzymasz lub stworzysz b dmia y sta szeroko Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworkswymiary elementoacutew wielko marginesoacutew itp wyra amy w pikselach Dane te wprowadza-my poacute niej w arkuszach styloacutew CSS To samo dotyczy rozmiaroacutew tekstu W naszym ulubio-nym programie graficznym klikamy fragment tekstu zapisujemy wielko fontu (te wyra onw pikselach) i przenosimy j do odpowiednich regu CSS W jaki wi c sposoacuteb mo emy prze-mieni nasz uk ad sta y w proporcjonalny
Wa ne roacutewnanieBy mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcottersquoa lecz czuj e mu-sz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo paprzed nim na kolana) W ksi ce autorstwa Dana Cederholma mdash Handcrafted CSS mdash EthanMarcotte wspoacute tworzy rozdzia po wi cony p ynnym siatkom projektowym W nim opisaprosty i niezawodny wzoacuter s u cy do transformacji warto ci pikselowych w uk adzie sta ym nawarto ci procentowe w projekcie proporcjonalnym
element docelowy kontekst = wynik
Roacutewnanie to jest niepozorne czy nie Szybko jednak oka e si e jest ono Twoim najlepszymprzyjacielem Zamiast rozprawia o teoriach wykorzystajmy ten wzoacuter w praktyce zamieniaj cjednostki wymiaroacutew witryny Zwyci zc nie jesthellip na procenty
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
74
Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt
W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze
wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
73
dowany w oparciu o proporcjonalne jednostki Pozwoli to elementom dynamicznie dopasowywasi wzgl dem obszaru operacyjnego do momentu gdy do akcji wkroczy zapytanie medialnei zmodyfikuje uk ad
Symbioza uk adu proporcjonalnego i zapyta medialnych
Wspomnia em wcze niej artyku autorstwa Ethana Marcottersquoa na temat metodologii RWD ktoacutery opubli-kowano w witrynie A List Apart (httpwwwalistapartcomarticlesresponsive-web-design) Cho na-rz dzia ktoacuterych u y w omawianym przyk adzie (p ynny uk ad obrazy i zapytania medialne) nie by ywcale nowe prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworze-nia spoacutejnej ca o ci Dla wielu projektantoacutew witryn ten artyku by kluczem do wiata nowych mo liwo-ci Przedstawia sposoacuteb ktoacutery czerpie to co najlepsze z dwoacutech wiatoacutew stworzenie p ynnego uk adu
bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementoacutew zapomoc zapytania medialnego Wykorzystanie tych aspektoacutew razem jest fundamentem metodologii RWDdzi ki ktoacuterej powstaje co znacznie wi kszego ni suma cz ci sk adowych
Transformacja sta ego uk aduw projekt proporcjonalnyW najbli szej przysz o ci wszystkie gotowe kompozyty ktoacutere otrzymasz lub stworzysz b dmia y sta szeroko Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworkswymiary elementoacutew wielko marginesoacutew itp wyra amy w pikselach Dane te wprowadza-my poacute niej w arkuszach styloacutew CSS To samo dotyczy rozmiaroacutew tekstu W naszym ulubio-nym programie graficznym klikamy fragment tekstu zapisujemy wielko fontu (te wyra onw pikselach) i przenosimy j do odpowiednich regu CSS W jaki wi c sposoacuteb mo emy prze-mieni nasz uk ad sta y w proporcjonalny
Wa ne roacutewnanieBy mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcottersquoa lecz czuj e mu-sz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo paprzed nim na kolana) W ksi ce autorstwa Dana Cederholma mdash Handcrafted CSS mdash EthanMarcotte wspoacute tworzy rozdzia po wi cony p ynnym siatkom projektowym W nim opisaprosty i niezawodny wzoacuter s u cy do transformacji warto ci pikselowych w uk adzie sta ym nawarto ci procentowe w projekcie proporcjonalnym
element docelowy kontekst = wynik
Roacutewnanie to jest niepozorne czy nie Szybko jednak oka e si e jest ono Twoim najlepszymprzyjacielem Zamiast rozprawia o teoriach wykorzystajmy ten wzoacuter w praktyce zamieniaj cjednostki wymiaroacutew witryny Zwyci zc nie jesthellip na procenty
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
74
Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt
W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze
wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
74
Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt
W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze
wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
75
display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px padding-right 10px margin-right 10px margin-left 10px float left width 220pxfooter float left margin-top 20px margin-right 10px margin-left 10px clear both width 940px
Wszystkie wymiary s obecnie wyra one w pikselach Zacznijmy od elementu po o onego naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik
Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div
Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
76
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV
A oto jak nasza strona prezentuje si w oknie przegl darki
Na razie nie jest le Warto 96 procent sprawdza si ca kiem dobrze cho mogliby my wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
77
Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) znajduje si wewn trz elementu div wrapper (kontekstu) Dlatego ustalamy e header(element docelowy) ma szeroko 940 pikseli po czym dzielimy t warto przez szeroko kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS
header margin-right 10px margin-left 10px width 979166667 940 960
Zauwa my e elementy navigation i footer maj t sam szeroko wi c bez problemu mo-emy zamieni warto ci wyra one w pikselach na procenty
Na koniec zanim otworzymy stron w przegl darce zajmijmy si elementami content i wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV header margin-right 10px margin-left 10px width 979166667 940 960 navigation padding-bottom 25px
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
78
margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 698 960 sidebar border-right-color e8e8e8 border-right-style solid border-right-width 2px margin-top 58px margin-right 10px margin-left 10px float left width 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960
Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli
Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
79
A tych liczb to nie mo na zaokr gli
Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew jest mieszne Mo esz sam si zastanawia czy nie warto by oby ich zaokr -gli Odpowied brzmi przegl dark nale y informowa z jak najwi ksz dok adno ci Dzi ki temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
80
Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach
Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje
navigation padding-bottom 25px margin-top 26px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
81
margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation ul li a height 42px line-height 42px margin-right 25px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Na pierwszy rzut oka wydaje si e za ca y chaos jest odpowiedzialna trzecia regu a dla se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb
navigation ul li a height 42px line-height 42px margin-right 26595745 25 940 text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
To nie by o takie trudne Sprawd my co pokazuje nam nasza przegl darkahellip
A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
82
Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod
ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
83
ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt
Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci
navigation ul li display inline-block
Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji
Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline
navigation ul li display inline
Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach
navigation ul li display inline-block margin-right 26595745 25 940 navigation ul li a height 42px line-height 42px text-decoration none text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 27px color black
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
84
Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli
Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
85
Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji
U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem
font-size 100font-size 16pxfont-size 1em
Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie
logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo span color dfdada
Podzielmy wi c 48 16 = 3 Nasze style maj wi c nast puj c posta
logo display block padding-top 75px color 0d0c0c
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
86
text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3
Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony
lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt
Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co
content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69
Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)
em mdash co to takiego
Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu
Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
87
P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-
gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS
img max-width 100
W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych
imgobjectvideoembed max-width 100
Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew
Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew
Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co
lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
88
lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt
Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny
Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu
ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt
Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width
ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
89
Zobaczmy co si stanie gdy od wie ymy okno
To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi
W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie
ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt
Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
90
img max-width 100sideBlock img max-width 45
Poni szy rysunek prezentuje wygl d naszej strony po zmianach
Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty
Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
91
Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik
oscarMain float left margin-top -28px width 289398281 698 202
Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px
Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-
nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
92
oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px
Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu
Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper
wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
93
W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli
Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji
Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
94
Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images
Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
95
Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum
Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache
U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777
Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew
ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
96
Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co
ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
97
Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian
ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt
Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
98
Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew
P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
99
na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie
media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em
Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami
medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego
System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew
Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD
Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)
Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
100
Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)
B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu
W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16
Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=cssmaincss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
101
ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
102
Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container
ltdiv id=wrapper class=containergt
Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu
ltdiv id=header class=rowgt
Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12
ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt
W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row
ltdiv id=navigation class=rowgt
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
103
Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt
ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt
ltheadgt
ltbodygt
ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt
lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
104
ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt
ltdivgtltbodygtlthtmlgt
Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co
navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Rozdzia 3 bull Opanowanie uk adoacutew p ynnych
105
Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki
Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi
PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3
106
Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Skorowidz
col_x 103
htaccess 95 97
Qcontainer 228
row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113
AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut
autobuffer 131autofocus 244
autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256
autocomplete 244awaryjne tryby barw 176
Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260
CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219
Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Skorowidz
293
deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu
dokumentuHSL 176typu dokumentu 33
device-aspect-ratio 51domy lne style CSS 69
Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element
footer 77navigation 77
ltheadgt 49elementy
HTML5 272semantyczne 34 112strukturalne 117
em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283
Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie
formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145
formaty barw 173formularz 240 242funkcja czasu 217
GGoogle Fonts 168gradient 260
HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109
Iinput 242Internet Explorer 20 36 41 42 44 49 53 144
274
JJavaScript 33 40 48 144jednostka 86
Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog
assets 97bkg 97
klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252
Llink 110list 245lista 245lista pseudoklas 163
agodna degradacja 272czenie animacji i transformacji 234
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Skorowidz
294
MMac App Store 61matrix 220 222mechanizm automatycznego
dopasowania 60skalowania strony 60
menu pionowe 284Microsoft Internet Explorer Developer Toolbar
24Microsoft Internet Explorera Patrz Internet
Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39
Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA
130number 247
Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50
Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57
Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt
elastyczny 22wra liwy 22
projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263
Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt
witrynyrzeczywisto rozszerzona 22
SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Skorowidz
295
selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262
semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne
projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny
kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt
witrynyuk ad witryny 23grafiki wektorowe 290
skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta
medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153
Ttel 249testy witryny 275text-indent 166time 254t o 36
transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje
dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230
transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215
Uuk ad
adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych
22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22
uk adyp ynne 13proporcjonalne 72
ulepszenie post powe 272url 248
WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Skorowidz
296
Web Hypertext Application TechnologyWorking Group 107
Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo
animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52
WOFF 169wra liwy projekt strony 30 173wtyczka
FitVid 136Webshims Lib 257
wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24
YYepNopejs 282
Zzagnie d anie elementoacutew multimedialnych
w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69
72268sk adnia 49
zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik
ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63
znak 139
dania HTTP 37
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę