E-book details

Head First Web Design. Edycja polska

Head First Web Design. Edycja polska

Ethan Watrall, Jeff Siarto

Ebook

Poznaj sekrety tworzenia efektownych stron WWW, spełniających wszelkie wymagania dostępności i użyteczności

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

Praktyczny, intuicyjny i niezawodny podręcznik tworzenia nowoczesnych stron internetowych!



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)

  • Title: Head First Web Design. Edycja polska
  • Author: Ethan Watrall, Jeff Siarto
  • Original title: Head First Web Design
  • Translation: Anna Trojan
  • ISBN: 978-83-246-6061-2, 9788324660612
  • Date of issue: 2012-10-16
  • Format: Ebook
  • Item ID: hfwdep
  • Publisher: Helion