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)

 

Osoby które kupowały "Head First Web Design. Edycja polska", wybierały także:

• 100 rzeczy, które każdy projektant powinien wiedzieć o potencjalnych klientach. Wydanie II 58,98 zÅ‚, (29,49 zÅ‚ -50%)
• Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3. Wydanie III 69,00 zÅ‚, (34,50 zÅ‚ -50%)
• AngularJS. Tworzenie aplikacji webowych. Receptury 58,98 zÅ‚, (29,49 zÅ‚ -50%)
• Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych. Wydanie III 49,00 zÅ‚, (24,50 zÅ‚ -50%)
• Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych. Wydanie II 49,00 zÅ‚, (24,50 zÅ‚ -50%)

• 
• 
• 
• 
• 

Spis treści

Head First Web Design. Edycja polska eBook -- spis treści

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)