.:$$:.

Istnieje tylko jedna metoda, dzięki której możesz stać się doświadczonym webmasterem - to samodzielne projektowanie i tworzenie witryn internetowych. Dzięki książce, którą trzymasz w rękach, z pewnością zdobędziesz umiejętności w tej dziedzinie. Ten niezwykły podręcznik został bowiem przygotowany tak, aby zmusić Twój mózg do przyswojenia potrzebnych informacji. W rezultacie Tobie pozostanie już tylko wykonać zaproponowane przez autorów ćwiczenia. A więc do dzieła! Współpracując ze swoim mózgiem, możesz zostać twórcą atrakcyjnych i użytecznych witryn WWW.

Książka "Head First Web Design. Edycja polska" zawiera wszystko to, czego naprawdę potrzebujesz, aby stworzyć doskonałą witrynę internetową, a jednocześnie nie zaśmiecać pamięci niepotrzebnymi informacjami. Podręcznik został wzbogacony ilustracjami, anegdotami i opisami, a przede wszystkim ciekawymi ćwiczeniami i zadaniami do rozwiązania - tak abyś jak najszybciej nauczył się projektować architekturę strony WWW. To nie wszystko. Podczas lektury dowiesz się, jak wykorzystywać systemy nawigacji, testy użyteczności oraz narzędzia do prowadzenia statystyk, a także jak sporządzać kalkulacje i listy ofertowe dla klientów.

• Organizacja strony internetowej
• Układ strony - przestrzeganie złotej reguły
• Architektura informacji i nawigacja
• Pisanie tekstów na potrzeby strony WWW
• Ankiety i grupy fokusowe
• Testy użyteczności
• Narzędzia do prowadzenia statystyk witryny
• Projektowanie stron jako biznes
• Kalkulacja oferty i listy ofertowe
• Flash, XHTML, CSS
• Biblioteka JavaScript JQuery

---

Przykładowe strony:

Rozdział 1: Red Lantern Design
Rozdział 2: Mark w Japonii_r02
Rozdział 3: Mark w Japonii_r03
Rozdział 4: RPM Music
Rozdział 5: Sample Rate
Rozdział 6: College of New Media (stara wesja)
Rozdział 6: College of New Media (nowa wesja)
Rozdział 7: Przebieganie wzrokiem
Rozdział 8: Audio 2 Go (stara wersja)
Rozdział 8: Audio 2 Go (nowa wersja)
Rozdział 9: RPM Music
Rozdział 10: Red Lantern Design
Rozdział 11: Foo Bar
Rozdział 11: Foo Bar (kradziony)
Wprowadzenie

• Dla kogo przeznaczona jest ta książka? (22)
• Wiemy, co sobie myślisz (23)
• Metapoznanie - myślenie o myśleniu (25)
• A oto, co możesz zrobić, by skłonić swój mózg do posłuszeństwa (27)
• Ważne informacje (28)
• Zespół korektorów merytorycznych (30)
• Podziękowania (31)

1. Tworzenie atrakcyjnych stron internetowych

• Twoja wielka szansa - Red Lantern Design (34)
• Od czego zaczynamy? (37)
• ZACZNIJ od narysowania projektu (39)
• Ustalenie nawigacji najwyższego poziomu (45)
• Umieszczenie wszystkiego w kontekście (47)
• Pokaż Jane proste szkice (48)
• Szkice pomagają skoncentrować się na funkcjonalności (49)
• Nie rujnuj dobrego projektu złym tekstem (60)
• Co sprawia, że tekst można szybko przebiec wzrokiem? (61)
• Projektowanie stron internetowych oparte jest na komunikacji i UŻYTKOWNIKACH (67)

2. Faza preprodukcji

• Twoje pierwsze "międzynarodowe" zlecenie... (70)
• Pomyśl, zanim zabierzesz się za tworzenie kodu (72)
• Jasna metafora wizualna wzmacnia motyw przewodni strony internetowej (73)
• Motyw przewodni reprezentuje zawartość strony (74)
• Burza mózgów - droga do metafory wizualnej (77)
• Wymyśl motyw przewodni i metaforę wizualną dla Marka (78)
• Elementy strony powinny kształtować metaforę wizualną (81)
• Zbuduj szybko próbkę kodu XHTML dla Marka (88)
• A także kod CSS... (89)
• Użyj szkiców, by rozwinąć pomysły i zaoszczędzić trochę czasu bez tworzenia kodu (93)
• Nie projektuj dla siebie! (94)
• Utworzymy teraz szkic dla Marka (96)

3. Organizacja strony

• Dopasowanie zawartości strony do jej układu (103)
• Organizacja informacji znajdujących się na stronie (104)
• Organizacja strony za pomocą architektury informacji (111)
• Architektura informacji w oparciu o sortowanie kart (112)
• Cała prawda o sortowaniu kart (113)
• Posortuj karty w stosy zgodnie z ich podobieństwem (118)
• Nazwy stosów powinny być krótkie i opisowe (119)
• Który sposób sortowania jest właściwy? (124)
• Ułóż karty w hierarchię strony (125)
• Diagramy architektury informacji to po prostu karty posortowane na papierze (127)
• Diagramy architektury informacji NIE są tylko spisem odnośników między stronami (128)
• Przejście z fazy preprodukcji do produkcji (132)
• Budowanie struktury witryny Marka (133)
• Najpierw utworzymy plik index.html... (134)
• ...a później plik screen.css ze stylami (135)
• Od preprodukcji do produkcji - pełny proces (138)

4. Układ strony

• Projektuje się z myślą o odbiorcach (142)
• Twoje najnowsze zadanie - RPM Music (145)
• Ustalenie odbiorców strony RPM Music za pomocą person (146)
• Pozwól, by to persony były Twoimi przewodnikami... (152)
• Rozdzielczość wpływa na projekt i układ strony (154)
• Miejsce dostępne na ekranie określa, jak DUŻA część strony będzie widoczna w przeglądarce użytkownika (156)
• Zbuduj kod XHTML i CSS zoptymalizowany pod kątem rozdzielczości 1024×768 (160)
• Ludzie lubią, gdy wszystko jest dobrze zorganizowane i równo ułożone (164)
• Jak szeroka powinna być moja siatka? Użyj złotej proporcji (165)
• Reguła trójpodziału: uproszczenie złotej proporcji (166)
• Strona RPM Music i złota proporcja - studium (złego) przypadku (167)
• Pamiętasz o personach i kliencie? (171)
• Konfiguracja strony RPM Music 2.0 z platformą Blueprint (173)
• Użyj reguł CSS platformy Blueprint do nadania stylu stronie RPM Music 2.0 (176)
• Czas dodać zawartość strony RPM Music (177)
• Dodaj nieco kodu CSS, by uporządkować układ strony (181)

5. Projektowanie w kolorze

• Wspomóż lokalną scenę muzyczną (192)
• Strona 9Rules - złoty standard sieci blogów (193)
• Czasami możliwość wyboru jest nieco ograniczona (194)
• Kolor wpływa na emocje (195)
• Koło barw (czyli od czego wszystko się zaczęło) (199)
• Użyj koła barw do wybrania kolorów, które do siebie pasują (202)
• Najpierw wybiera się kolor PODSTAWOWY (202)
• Atrakcyjny wzorzec kolorów można stworzyć za pomocą schematu triady kolorów (203)
• Zaczynamy pisać kod strony SampleRate (205)
• Utworzenie prostego układu strony za pomocą arkusza CSS (206)
• Przeciwieństwem ciężkości jest... lekkość (212)
• Utwórz bogatszą paletę kolorów za pomocą schematu czwórkowego (214)
• Czas uaktualnić arkusz CSS strony SampleRate (218)

6. Dobry system nawigacyjny

• Nowy semestr w szkole rozpoczęty (226)
• Pierwszym krokiem w stronę dobrej nawigacji jest dobra architektura informacji (229)
• Czym tak naprawdę jest nazwa? (230)
• Rozwiązanie nr 1 - nawigacja z poziomymi zakładkami (236)
• Rozwiązanie nr 2 - nawigacja pionowa (238)
• Elementy blokowe to Twoi przyjaciele (244)
• Pozycjonowanie nawigacji blokowej za pomocą pływania (245)
• Ikony nic nie MÓWIĄ... po prostu ładnie wyglądają (247)
• Dodawaj ikony do tekstu, a nie odwrotnie (249)
• Uaktualnij kod XHTML strony CNM, by używał odnośników tekstowych (250)
• Teraz możesz nadać elementom blokowym styl... (251)
• Główny system nawigacyjny nie powinien się zmieniać... ale system drugorzędny już TAK (253)
• Każda podstrona otrzymuje własny drugorzędny system nawigacyjny (254)
• Dodanie stylu do nawigacji za pomocą arkusza CSS (255)

7. Pisanie tekstów na potrzeby stron internetowych

• Utwórz lepszą gazetę internetową (265)
• Strona gazety "The Hipster Intelligencer" - specyfikacja projektu (266)
• Problemem jest TEKST (266)
• Ulepszenie zawartości strony za pomocą odwróconej piramidy (273)
• Skracanie tekstu (279)
• Dodanie list do kodu XHTML (289)
• Nagłówki sprawiają, że tekst jeszcze łatwiej przebiec wzrokiem (291)
• Mieszaj ze sobą czcionki, by podkreślić nagłówki i inny tekst (300)
• Ważny jest poziom nagłówka, a nie jego rozmiar (301)

8. Dostępność

• Audio-2-Go - niedostępna dostępność (308)
• Dostępność oznacza, że ze strony może korzystać KAŻDY (309)
• Jak CZYTA się Twoja strona? (310)
• Informacje na stronie powinny być zrozumiałe... dla KAŻDEGO (312)
• Pogódź się z tym - komputery naprawdę są głupie (313)
• Komputer przeczyta tekst atrybutu ALT obrazka (314)
• Przekształć długi tekst atrybutu ALT w opis LONGDESC (318)
• Twoje modyfikacje poprawiły sytuację tylko NIEKTÓRYCH klientów Audio-2-Go (320)
• Dostępność nie ogranicza się do czytników ekranu (321)
• Elementy powinny być aktywowane PO KOLEI (323)
• Strona Audio-2-Go jest teraz ZNACZNIE bardziej DOSTĘPNA (326)
• WCAG Priority 1 (330)
• Kolory nie powinny być JEDYNĄ formą komunikacji (334)
• Świat w bezpiecznych barwach... (335)
• Świat w zaburzonych barwach... (335)
• Audio-2-Go oczami osoby z zaburzeniami rozpoznawania barw (336)
• Gwiazdki są prawdziwym problemem (338)
• Obrazki tła są nadal Twoimi przyjaciółmi (339)
• Kolejność to nie tylko atrybuty tabindex (340)

9. Słuchaj swoich użytkowników

• Problemy w RPM Music (352)
• Niech przemówią użytkownicy - za pośrednictwem ankiet i grup fokusowych (354)
• Ankiety i grupy fokusowe nie są darmowe (357)
• Zadaj w ankiecie właściwe pytania (360)
• Ostateczna wersja ankiety dla użytkowników strony RPM Music (370)
• Mamy wyniki! (372)
• Odpowiedzi na pytanie otwarte: (373)
• Użycie przeglądarek (375)
• Napraw błąd CSS na stronie RPM Music przez przeniesienie pseudoklasy :hover (376)
• Składniki taniego testu użyteczności (383)
• Wykorzystaj skrypt moderatora do organizacji testu (384)
• Przyjaciele i rodzina mogą być problemem (391)
• Wyniki testu użyteczności - czyli co mówią użytkownicy (392)
• Prosty problem... (393)
• O użytkownikach mówią statystyki strony (395)
• Narzędzia do statystyk strony internetowej (396)

10. Ewolucja projektu

• Twoje dotychczasowe portfolio... (402)
• Odświeżanie strony i jej zawartości sprawia, że użytkownicy chętnie powracają (404)
• W projektowaniu stron chodzi o ewolucję, nie rewolucję (407)
• Do ewolucji projektu strony wykorzystaj CSS (408)
• Dodaj interaktywność do strony za pomocą efektownego wyświetlania zdjęć z użyciem JavaScriptu (420)
• Dodanie biblioteki Facebox do strony Red Lantern Design (421)
• Edycja pliku strony głównej (422)
• Dodanie do strony bloga - WordPress (427)
• Dodaj bloga opartego na systemie WordPress do strony Red Lantern Design (428)
• Cała prawda o Blogu (430)
• Zmieniaj wygląd i sposób działania bloga za pomocą motywów (432)

11. Projektowanie stron jako biznes

• Najnowszy potencjalny klient - "Foo Bar" (436)
• Oferta dla restauracji "Foo Bar" musi zawierać (437)
• Budujemy prototyp strony restauracji "Foo Bar" (438)
• Witaj w świecie PIRACTWA PROJEKTÓW (445)
• Jakim typem projektanta stron jesteś? (448)
• Red Lantern Design ma nowego potencjalnego klienta (453)
• Co tak naprawdę składa się na projektowanie strony internetowej? (456)
• Ostateczna kalkulacja oferty... (457)
• W specjalnym liście ofertowym przedstaw klientowi szczegółowe wyliczenia (463)
• Podcast Trilobite Labs - kolejne wyzwanie (465)
• Wykorzystaj licencję Creative Commons (465)
• Licencje Creative Commons (466)

12. Dziesięć najważniejszych rzeczy (których nie omówiliśmy)

• Nr 1: Projekty międzynarodowe i wielokulturowe (472)
• Nr 2: Przyszłość kodu stron internetowych (474)
• Nr 3: Przyszłość CSS (476)
• Nr 4: Projektowanie dla urządzeń mobilnych (477)
• Nr 5: Tworzenie aplikacji internetowych (478)
• Nr 6: Rytm w układzie strony (479)
• Nr 7: Kontrastowy tekst (480)
• Nr 8: Dopasuj nazwy odnośników do stron, do których kierują (481)
• Nr 9: Kontrast jest podstawowym elementem tworzącym układ strony (482)
• Nr 10: Więcej narzędzi do projektowania (483)

Skorowidz (485)