Medium 9788328300385

Responsywne strony WWW dla ka_dego

Views: 279
Ratings: (0)

<h3>Twórz skalowalne strony WWW (RWD) dla wszystkich urz?dze?!</h3>Responsywne strony WWW umiej?tnie dostosowuj? si? do rozmiaru ka?dego ekranu, na jakim zechcesz je wy?wietli?. Ta ich w?a?ciwo?? pomaga równie? generowa? zyski! Po pierwsze, wystarczy utrzymywa? tylko jedn? wersj? responsywnej strony. Po drugie, Twoi potencjalni klienci i u?ytkownicy mog? zapozna? si? z Twoj? ofert? lub skorzysta? z niej praktycznie w dowolnym miejscu ?wiata. I to niezale?nie od tego, czy korzystaj? ze smartfona, z tabletu czy z komputera stacjonarnego!<br /><br />Je?eli chcesz nauczy? si? tworzy? takie strony, ta ksi??ka b?dzie dla Ciebie najlepszym ?ród?em! Ju? za chwil? dowiesz si?, w jaki sposób zbudowa? skalowalne strony WWW z wykorzystaniem najnowszych mo?liwo?ci kaskadowych arkuszy stylów <strong>CSS3 </strong>oraz j?zyka <strong>HTML5</strong>. Przekonasz si?, jak ?atwo mo?esz modyfikowa? style pod konkretne media oraz jak najlepiej zorganizowa? proces projektowania responsywnej strony WWW. Zaznajomisz si? te? z najlepszymi technikami poprawy wydajno?ci Twoich stron WWW. To jest obowi?zkowa lektura dla wszystkich programistów i projektantów stron WWW!<ul> <li>Przygotuj strategi? tre?ci strony zanim zajmiesz si? jej wizualnym wygl?dem</li> <li>Dowiedz si?, dlaczego domy?lnym wzorcem powinna by? strona przystosowana do ma?ych ekranów</li> <li>Poznaj elementy j?zyka HTML i w?a?ciwo?ci stylów CSS niezb?dne do tworzenia skalowalnych stron</li> <li>Zastosuj zapytania o media, aby wy?wietla? ró?ne style CSS na ekranach ró?nej wielko?ci</li> <li>Modyfikuj obrazy, czcionki i sekcje nawigacji</li> <li>Stosuj techniki optymalizacyjne, aby tworzy? mniejsze i szybsze strony</li></ul><strong>Odkryj mo?liwo?ci responsywnych stron WWW!</strong>

List price: $12.75

Your Price: $10.20

You Save: 20%

Remix
Remove
 

11 Slices

Format Buy Remix

1. Czym jest responsywna strona WWW?

ePub

Dziś niemal każdy, kto zajmuje się stronami internetowymi, słyszał o projektowaniu responsywnych stron WWW (Responsive Web Design — RWD), ale co ciekawe, wielu nie wie dokładnie, czym one właściwie są.

W tym rozdziale poznasz podstawy, na których opiera się responsywna strona WWW. Później poznasz nieco historii, dzięki czemu będziesz miał wyobrażenie, skąd wzięła się potrzeba responsywności i jak się ona ma do dotychczasowych metod tworzenia stron.

Dowiesz się również, dlaczego strony responsywne są zazwyczaj najlepszym sposobem tworzenia witryn internetowych, które sprawnie działają na wielu urządzeniach i ekranach różnej wielkości, a ich utworzenie w dłuższej perspektywie wymaga mniejszego nakładu pracy. Zapoznasz się też z mniej oczywistym efektem występującym w responsywnych stronach: wpływem na wyniki zwracane przez wyszukiwarki internetowe.

Jeżeli sięgnąłeś po tę książkę, ponieważ słyszałeś już o responsywnych stronach WWW, ale nie wiesz dokładnie, czym one są, to w tej części poznasz podstawy ich tworzenia.

 

2. Responsywna treść

ePub

Jeżeli uważasz, że kody HTML i CSS stanowią najważniejsze części strony WWW, warto, abyś spojrzał na nie z innej perspektywy. Użytkownicy odwiedzają Twoją stronę ze względu na jej treść (i funkcjonalność) i nie potrafią doceniać talentu projektanta ani umiejętności programisty.

Dla użytkowników odwiedzających Twoją stronę nie ma znaczenia, czy jest ona responsywna czy nie, a większość z nich prawdopodobnie nawet nie wie, co ten termin oznacza. Nie zastanawiają się, czy korzystają z urządzenia odpowiedniego dla Twojej strony i czy ekran ma właściwą wielkość. Często nawet nie zwracają uwagi, jak strona wygląda. Chcą po prostu szybko uzyskać potrzebną informację lub funkcjonalność, niezależnie od urządzenia, którym się akurat posługują.

Dlatego tworząc responsywną stronę, musisz przede wszystkim mieć na uwadze jej treść.

Jeżeli do sprawy podejdziesz inaczej, tj. najpierw utworzysz projekt strony, a potem umieścisz w nim treść, wtedy informacja zawsze będzie mieć znaczenie drugorzędne, a użytkownicy raczej nie dostaną tego, czego chcą.

 

3. Kod HTML responsywnych stron

ePub

Do zbudowania responsywnej strony WWW użyjesz języków HTML i CSS (niekiedy wzbogacając ją również o kod JavaScript).

Nawet jeżeli Twoja praca nie polega na kodowaniu stron WWW, powinieneś nieco wiedzieć o tym, „co jest w środku” responsywnych stron, więc nie pomijaj kolejnych rozdziałów.

W tym rozdziale przyjęte jest założenie, że znasz w podstawowym zakresie język HTML. Jeżeli nie jesteś programistą, nie musisz dokładnie wiedzieć, jak wszystko działa, ale powinieneś rozumieć podstawową ideę.

Nawet jeżeli nie masz dużego doświadczenia w programowaniu w języku HTML, w tym rozdziale zawarte są pojęcia, których możesz nie znać, na przykład atrybut viewport (obszar widoku) czy zasady tworzenia stron za pomocą elementów strukturalnych wprowadzonych w języku HTML5.

Inne pojęcia, na przykład doctype lub charset, zapewne nie są dla Ciebie nowością, jednak zostały tu opisane, ponieważ są niezbędne do zrozumienia zasady właściwego kodowania responsywnej strony WWW.

 

4. Style CSS w responsywnych stronach

ePub

Kod HTML nadaje strukturę całej treści Twojej strony WWW, natomiast kod CSS instruuje przeglądarkę, jak treść ma być przedstawiona.

Ten rozdział, podobnie jak poprzedni, będzie dla doświadczonych programistów stanowił przypomnienie wiadomości. Opisuje on jednak bardziej szczegółowo, w porównaniu z HTML, podstawową koncepcję języka CSS, z tego prostego powodu, że CSS jest kodem decydującym o responsywności strony. Dogłębne zrozumienie budowy responsywnej strony jest niemożliwe bez poznania takich pojęć jak „kaskada stylów” i „model pudełkowy”.

Najpierw dowiesz się, na czym polega wersjonowanie języka CSS i w jaki sposób stosować prefiksy w celu prawidłowego zinterpretowania nowych właściwości stylów przez różne przeglądarki, nawet gdy właściwości te są jeszcze na etapie testów.

Następnie poznasz różne sposoby umieszczania stylów w swojej stronie WWW, czy to przez osadzanie ich za pomocą arkusza stylów obejmującego wiele stron lub całą witrynę, czy za pomocą wstawiania, obejmującego tylko poszczególne elementy strony.

 

5. Zapytania o media

ePub

Zapytania o media są tym, co sprawia, że strony WWW skalują się stosownie do urządzeń, na których są otwierane. Jak dotąd żadne deklaracje stylów CSS stosowane na stronie nie uwzględniały wielkości ekranu.

Zapytania o media umożliwiają stosowanie różnych deklaracji stylów w zależności od możliwości urządzenia, na którym otwierana jest strona, najczęściej od szerokości obszaru widoku. Zapytanie może np. brzmieć: zastosuj układ dwukolumnowy, ale jeżeli ekran ma szerokość większą niż 40 emów, zastosuj układ trójkolumnowy.

Zapytania to jedna z technik tworzenia responsywnych stron, dzięki której strona może mieć inny układ na ekranie telefonu komórkowego, inny na tablecie, a jeszcze inny na monitorze stacjonarnym. Zapytanie o medium jest często traktowane jako swego rodzaju magiczna różdżka dla responsywnej strony, ponieważ podporządkowane są mu wszystkie pozostałe elementy strony i dzięki niemu dzieją się rzeczy magiczne.

W tym rozdziale poznasz strukturę zapytań o media i style, w których są stosowane. Dowiesz się, do czego można ich użyć — oczywiście, nie tylko do sprawdzenia szerokości ekranu — i w jaki sposób są one obsługiwane przez przeglądarki.

 

6. Obrazy

ePub

Dowiedziałeś się już, jak przygotować stronę WWW, zastosować w niej kilka podstawowych stylów i użyć zapytań o media w celu dopasowania układu strony do szerokości obszaru widoku.

Jednak dopóki nie umieścisz obrazów, strona będzie nudna.

Zapewne słyszałeś, że umieszczanie obrazów na responsywnej stronie jest bardzo skomplikowane. Obrazy nie zawsze są wyświetlane w takiej samej wielkości, ponieważ są elastyczne. Jak więc sprawić, aby nie trwonić pasma łącza na wysyłanie dużego obrazu do urządzenia z małym ekranem? A ponadto jak zagwarantować, że do urządzeń z wysokorozdzielczymi ekranami (retina) będą wysyłane odpowiednie obrazy?

Jest to jedno z zagadnień związanych ze responsywnymi stronami, nad którym ciągle trwają prace. Powszechnie stosowanych jest kilka rozwiązań, jednak każde z nich ma pewne mankamenty i żadne nie wydaje się idealne. Prawdopodobnie w najbliższych latach pojawią się w tej dziedzinie nowe pomysły, które zmienią sposób obsługi obrazów w responsywnych stronach.

 

7. Proces tworzenia responsywnej strony

ePub

Znajomość poszczególnych części responsywnej strony to jedno, a umiejętność zebrania wszystkiego w całość i utworzenia kompletnej strony to zupełnie co innego.

W tym rozdziale przyjrzymy się procesowi tworzenia responsywnej strony, począwszy od przeprowadzenia badań nad użytkownikami i strategią doboru treści, poprzez projektowanie tekstowe, szkicowanie i tworzenie responsywnych prototypów stron.

Poznasz wzorce stylów i inne nowe metody projektowania stron, będące alternatywą dla nieresponsywnych projektów o stałej szerokości, tworzonych w takich narzędziach, jak Photoshop.

Na końcu rozdziału omówione są sposoby propagowania responsywnych stron zarówno wśród użytkowników, jak i współpracowników oraz metody współpracy z klientami w trakcie realizacji projektu.

Zanim jeszcze zaczniesz rozważać projekt swojej responsywnej strony, musisz zatrzymać się na chwilę i zastanowić się nad celem, który chcesz osiągnąć.

Jeżeli tylko nie jest to rzadki przypadek tworzenia strony dla zabawy lub w celu nabycia umiejętności, to Twoim celem nie jest utworzenie strony, ale np. rozwiązanie problemu komunikacji z klientami, rozwinięcie sprzedaży w Internecie itp.

 

8. Urządzenia przenośne i nie tylko

ePub

Są dwa zagadnienia, którym musisz poświęcić szczególną uwagę, tworząc responsywną stronę: użytkownicy i urządzenia. Oba omówimy w tym rozdziale bardzo dokładnie.

Najpierw wyjaśnimy, czym jest wrażenie użytkownika i dlaczego jest ono takie ważne. Następnie omówimy strategie projektowania, dzięki którym będziesz miał pewność, że strona będzie działała i wyglądała dobrze na niemal wszystkich urządzeniach.

W dalszej kolejności zapoznamy się z dostępnymi obecnie na rynku typami urządzeń i ich wybranymi cechami, które należy rozważyć podczas projektowania strony, na przykład interfejsem dotykowym i wielkością ekranu. Dowiesz się również, jak sprawić, aby strona była użyteczna dla osób niepełnosprawnych.

Na koniec opiszemy sposoby testowania responsywnej strony — na jakich urządzeniach powinna być ona wyświetlana i testowana, jak możesz uzyskać dostęp do tych urządzeń i jakiego rodzaju testy możesz wykonać, nie posiadając prawdziwych modeli.

Twoim zadaniem jest utworzenie strony, która nie tylko będzie ładnie wyglądać, ale również dobrze działać i z której będzie można korzystać zgodnie z zamierzonym przeznaczeniem.

 

9. Typografia

ePub

Istotą stron WWW jest komunikacja i przekazywanie użytkownikom informacji. Wprawdzie jej część jest przekazywana za pośrednictwem obrazów, jednak większość za pomocą tekstu.

Słowa znajdujące się na stronie są bardzo ważne, ponieważ są po to, aby można było skutecznie przekazać treść. Dlatego tworząc stronę, musisz być pewien, że tekst będzie czytelny i będzie dobrze się prezentował.

Twoim celem jest nie tylko przygotowanie dobrze wyglądającego tekstu i umieszczenie go w układzie strony, ale wywarcie jak najlepszego wrażenia na użytkowniku, który ten tekst przeczyta.

Tworząc stronę, mamy skłonność do przykładania nadmiernej wagi do wyglądu tekstu. Traktujemy go jak statyczny element, jak na stronie gazety. Staramy się dokładnie dopasować do innych elementów na stronie ułożenie tekstu i wygląd sąsiadujących ze sobą słów.

Do pewnego stopnia możemy tak robić, jednak tworząc stronę responsywną, tracimy kontrolę nad tekstem. Zamiast tego musimy nadać mu taki styl, aby dobrze się prezentował niezależnie od zmian układu strony, nawet jeżeli treść nie będzie wyświetlana na tworzonej stronie, tylko gdzie indziej.

 

10. Nawigacja i nagłówek strony

ePub

Umieszczenie w nagłówku strony responsywnej sekcji nawigacji i innych elementów jest jednym z największych wyzwań w procesie projektowania strony.

Nagłówek to górna sekcja strony, zawierająca informacje o marce, zazwyczaj główną sekcję nawigacji i dodatkowe elementy, takie jak pola formularza lub odnośniki do przeszukiwania strony i logowania. Najczęściej nagłówek na wszystkich stronach witryny wygląda tak samo.

Komponenty nagłówka pełnią dwie ważne funkcje: informują użytkownika, na jakiej stronie się znajduje, i umożliwiają mu poruszanie się po witrynie.

W tym rozdziale powrócimy do naszej przykładowej strony i wykorzystamy w niej kilka prostych stylów nawigacyjnych. Następnie przyjrzymy się przykładowym popularnym szablonom sekcji nawigacji wyświetlanej na ekranach urządzeń przenośnych i omówimy sposób, w jaki sekcja nawigacji może dostosowywać się do różnej szerokości ekranów.

Opiszemy również umieszczanie na stronie w jednolitym nagłówku informacji o marce, pól wyszukiwania i innych komponentów.

 

11. Wydajność stron WWW

ePub

Często słyszy się słowa krytyki pod adresem stron responsywnych, że ich wydajność jest raczej niska, to ich znaczy załadowanie i wyświetlenie trwa dłużej niż zwykłych stron.

W przypadku wielu stron responsywnych faktycznie tak jest, jednak nie dlatego, że strony te z definicji działają wolno, ale ponieważ nie zostały utworzone z myślą o wydajności. Istnieje wiele technik, dzięki którym strony mogą być mniejsze i szybsze.

Ten rozdział opisuje, dlaczego wydajność ma znaczenie i dlaczego należy ją brać pod uwagę podczas tworzenia strony.

W dalszej części zawarty jest opis krok po kroku wszystkich operacji wykonywanych przez przeglądarkę podczas ładowania i wyświetlania strony. Będziesz mógł lepiej zrozumieć wszystkie zdarzenia, jakie mają miejsce, i pojąć, co w całym procesie może pójść źle.

Później dowiesz się, jak przetestować wydajność strony i jakie czynniki mają na nią wpływ.

Na końcu rozdziału znajdziesz szczegółowy opis, co możesz zrobić, aby zwiększyć wydajność swojej strony. Niektóre operacje, którym się przyjrzymy, obejmują oczyszczenie kodu, minimalizację liczby żądań HTTP, kompresję plików, wykorzystanie pamięci podręcznej przeglądarki i usunięcie skryptów JavaScript blokujących ładowanie strony.

 

Details

Print Book
E-Books
Slices

Format name
ePub
Encrypted
No
Sku
B000000035654
Isbn
9788328300385
File size
14 MB
Printing
Allowed
Copying
Allowed
Read aloud
Allowed
Format name
ePub
Encrypted
No
Printing
Allowed
Copying
Allowed
Read aloud
Allowed
Sku
In metadata
Isbn
In metadata
File size
In metadata