Responsive_Web_Design_Projektowanie_elastycznych_witryn_w_HTML5_i_CSS3_resweb.pdf

(1953 KB) Pobierz
Tytuł oryginału: Responsive Web Design with HTML5 and CSS3
Tłumaczenie: Maciej Reszotnik
ISBN: 978-83-246-6901-1
© Helion 2014.
All rights reserved.
Copyright © Packt Publishing 2012.
First published in the English language under the title ‘Responsive Web Design with HTML5 and CSS3’
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 kompletne
i 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 również
żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/resweb.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/resweb
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
Kup książkę
Poleć książkę
Oceń książkę
Księgarnia internetowa
Lubię to! » Nasza społeczność
Spis tre ci
O autorze
O recenzentach
Przedmowa
Rozdzia 1. Podstawy HTML5, CSS3 i projektowania elastycznych uk adów stron
9
11
13
19
Czemu smartfony s tak wa ne (a stary Internet Explorer nie)?
20
Czy zdarzaj si sytuacje, w których uk ad elastyczny nie jest dobrym rozwi zaniem?
22
Uk ad skalowalny — definicja
22
Czemu ogranicza si tylko do skalowalnych projektów?
23
Przyk ady skalowalnych projektów witryn
23
Gdzie znajdziesz narz dzia testowe obszaru operacyjnego?
24
ród a inspiracji w sieci
30
HTML5 — zalety stosowania
32
Oszcz dno czasu i kodu w HTML5
33
Nowe elementy semantyczne HTML5
34
CSS3 a wra liwy projekt witryn i dodatkowe mo liwo ci arkuszy
35
Wniosek jest prosty — CSS3 niczego nie zepsuje!
36
Jak CSS3 rozwi zuje codzienne problemy projektantów witryn?
36
Patrz, mamo! — bez obrazów! ........................................................................................................39
Co jeszcze CSS3 ma do zaoferowania? ..........................................................................39
Czy standardy HTML5 i CSS3 dzia aj poprawnie ju dzi ? ...........................................................42
RWD nie jest lekarstwem na wszystko ...........................................................................................43
U wiadomienie klientom, e witryna nie powinna prezentowa si tak samo
w ka dej przegl darce .....................................................................................................................44
Podsumowanie .................................................................................................................................45
Kup książkę
Poleć książkę
Spis tre ci
Rozdzia 2. Zapytania medialne: obs uga zró nicowanych obszarów operacyjnych
Zapyta medialnych mo esz u ywa ju dzi
Skalowalne projekty a zapytania medialne
Sk adnia zapyta medialnych
Zapytania medialne i porównywanie parametrów urz dze
U ywanie zapyta medialnych do zmodyfikowania projektu witryny
Najlepszy sposób adowania zapyta medialnych w metodologii RWD
Nasz pierwszy skalowalny projekt
Mo e Ci zaskoczy , e nasz pierwszy uk ad b dzie mia sta szeroko
Projekt wra liwy — ograniczanie wielko ci obrazów
Przycinanie tre ci w mniejszych obszarach operacyjnych
Wy czanie mechanizmu automatycznego skalowania strony
Dopasowanie projektu witryny do ró nych szeroko ci obszaru operacyjnego
W metodologii RWD tre ci zawsze stoj na pierwszym miejscu
Zapytania medialne — tylko cz
rozwi zania
Potrzebny nam uk ad p ynny
Podsumowanie
47
48
48
49
51
52
52
53
53
57
59
60
63
65
69
69
69
Rozdzia 3. Opanowanie uk adów p ynnych
Uk ady sta e nie s przystosowane do nowych wyzwa
Czemu uk ady proporcjonalne s tak wa ne w metodologii RWD?
Transformacja sta ego uk adu w projekt proporcjonalny
Wa ne równanie
Definiowanie kontekstu w elementach proporcjonalnych
Zawsze nale y pami ta o kontek cie
Wykorzystywanie jednostek em zamiast pikseli w kontek cie typografii
P ynne obrazy
Skalowanie obrazów w obr bie obszaru operacyjnego
W a ciwe regu y dla w a ciwych obrazów
Nak adanie hamulców na uk ad p ynny
Wszechstronna w asno max-width
Wczytywanie ró nych obrazów dla ró nych ekranów
Konfigurowanie us ugi Adaptive Images
P ynne siatki i zapytania medialne tworz jedno
System siatek CSS
B yskawiczne konstruowanie strony w systemie siatek
Podsumowanie
71
72
72
73
73
75
82
85
87
87
89
91
92
93
94
98
99
100
105
Rozdzia 4. HTML5 i projekty elastyczne
Z jakich cz ci standardu HTML5 mo emy korzysta ju dzi ?
Wi kszo witryn mo e by konstruowana w oparciu o HTML5
Wype nienia, skrypty i Modernizr
W jaki sposób pisa strony w standardzie HTML5?
Oszcz dno ci wynikaj ce z wykorzystania HTML5
Rozs dne podej cie do pisania kodu
Oddajmy cze wszechmocnemu elementowi <a>
Elementy j zyka HTML, które uleg y dezaktualizacji
107
108
108
108
109
110
111
111
112
4
Kup książkę
Poleć książkę
Spis tre ci
Nowe elementy semantyczne HTML5
Element <section>
Element <nav>
Element <article>
Element <aside>
Element <hgroup>
Element <header>
Element <footer>
Element <address>
Praktyczne wykorzystanie elementów strukturalnych HTML5
A co z g ówn zawarto ci strony?
HTML5 i semantyka na poziomie tekstu
Element <b>
Element <em>
Element <i>
Zasady semantyki na poziomie tekstu w kodzie
Poprawienie dost pno ci strony za pomoc standardu WAI-ARIA
Punkty orientacyjne w standardzie ARIA
Zagnie d anie elementów multimedialnych w HTML5
Zagnie d anie multimediów wed ug HTML5
Alternatywne ród a plików
Awaryjna obs uga w starszych przegl darkach
Znaczniki audio i video dzia aj niemal identycznie
Skalowalne odtwarzacze filmów
Aplikacje sieciowe w trybie offline
Aplikacje offline od podszewki
Wdra anie trybu offline
Sk adnia pliku manifestu
Automatyczne wczytywanie stron w manife cie
Komentarze wersji
Odczytywanie strony w trybie offline
Rozwi zywanie problemów z aplikacjami offline
Podsumowanie
112
113
114
114
114
115
116
117
117
117
123
123
124
124
125
125
127
127
130
131
132
133
133
134
137
137
137
139
139
140
140
141
142
Rozdzia 5. CSS3: selektory, typografia i tryby barw
Co CSS3 oferuje projektantom stron?
Obs uga CSS3 w Internet Explorerze 6, 7 i 8
Wykorzystanie CSS3 do projektowania i formatowania stron w przegl darce
Struktura regu CSS
Przedrostki autorskie i sposób ich wykorzystania
Przydatne triki w CSS3
Uk ad wielokolumnowy w CSS3 dla projektu skalowalnego
Zawijanie tekstu
Nowe selektory CSS3 i sposób ich wykorzystania
Selektory atrybutów w CSS3
Strukturalne pseudoklasy CSS3
Poprawki wprowadzane w pseudoelementach
143
144
144
145
145
145
148
148
151
152
152
155
164
5
Kup książkę
Poleć książkę
Zgłoś jeśli naruszono regulamin