Head First Web Design. Edycja polska

Transkrypt

1 Head First Web Design. Edycja polska Autorzy: Ethan Watrall, Jeff Siarto T³umaczenie: Anna Trojan ISBN: Tytu³ orygina³u: Head First Web Design Format: , stron: 496 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!

2

3 f.

4 ZAAKCEPTOWANE

5

6

7

8

9

10

11

12

13

14 Pierwsza z reguł kształtujących na nowo obraz Internetu brzmiała: Internet jako platforma. Jednocześnie był to niegdyś slogan perełki Web 1.0, firmy Netscape, która przegrała wyczerpującą rywalizację z Microsoftem. Co ciekawsze, pionierami traktowania Internetu jako platformy były także dwa sztandarowe przykłady firm z nurtu Web 1.0 DoubleClick i Akamai. Ludzie nieczęsto myślą o reklamach w Internecie jak o usługach sieciowych, ale w rzeczywistości reklamy były pierwszymi powszechnie wykorzystywanymi usługami sieciowymi, a przy tym także

15 1. Tworzenie atrakcyjnych stron internetowych

16 Pewnie, że dasz radę. Od czego, Twoim zdaniem, należy zacząć?

17

18

19

20 Od czego powinienem zacząć? i Co teraz? to naprawdę dobre pytania.

21 Nasza firma Produkty Strona główna Kontakt Odnośniki Książki drukowane ebooki Sztuka Rzemiosło Jaka treść składa się na witrynę internetową Red Lantern Design? W jaki sposób możesz ją uporządkować? Czy będziesz potrzebował więcej materiałów?

22 Od: Jane INFORMACJE Temat: Zawartość strony internetowej Przyda nam się część, w której będziemy umieszczać aktualności i nowości dotyczące studia Red Lantern Design. Z całą pewnością potrzebna nam będzie część, w której będziemy mogli pokazać fantastyczne rzeczy, nad którymi planujemy pracować. Witryna potrzebuje strony kontaktowej. Jak uda nam się pozyskać klientów bez takiej strony?! Myślę, że dobrze byłoby poświęcić jedną stronę samej fi rmie co robimy i tak dalej. Na pewno odwiedzający muszą widzieć, że zajmujemy się consultingiem i projektowaniem stron internetowych!

23 Strona główna

24 Od: Jane INFORMACJE Temat: Zawartość strony internetowej Przyda nam się część, w której będziemy umieszczać aktualności i nowości dotyczące studia Red Lantern Design. Z całą pewnością potrzebna nam będzie część, w której będziemy mogli pokazać fantastyczne rzeczy, nad którymi planujemy pracować. Witryna potrzebuje strony kontaktowej. Jak uda nam się pozyskać klientów bez takiej strony?! Myślę, że dobrze byłoby poświęcić jedną stronę samej fi rmie co robimy i tak dalej. Na pewno odwiedzający muszą widzieć, że zajmujemy się consultingiem i projektowaniem stron internetowych!

25 Strona główna

26 Czy to wystarczy, by użytkownicy potrafili się odnaleźć na stronie?

27 Strona główna

28

29

30 Gotowy pomysł tego, jak chcesz rozmieścić na ekranie poszczególne bloki, zaoszczędzi Ci sporo czasu na etapie programowania.

31

32

33

34 Ustaliliśmy z Jane podstawowy układ witryny jaki zatem powinien być nasz kolejny krok? Uruchomienie starego, dobrego edytora tekstu, wyciągnięcie przykładowej treści od Jane i wypracowanie kodu XHTML?

35 Skoro wiesz już, jaki układ strony podoba się Jane dla witryny Red Lantern Design, czas stworzyć szkic. Weź kartkę papieru oraz ołówek i zabierz się do pracy. Efekt ma być tak szczegółowy, jak to tylko możliwe. Jeśli masz pod ręką kredki, pokoloruj swój szkic.

36

37 Pogawędki przy kominku Ołówek: Program do tworzenia stron: Ołówek: Kod [podsłuchuje]: Program do tworzenia stron:

38 Teraz jest dobry czas na stworzenie prototypu kodu.

39 Gotowy do podania kod ftp://ftp.helion.pl/przyklady/hfwdep.zip body { } margin: 0; /* Projekt przebudowy strony Red Lantern Design */ padding: 0; background: #7a2122 url(../images/body_bg.gif ) repeat-x top; font-family: Helvetica, sans-serif; font-size: 62.5%; color: #333; h1, h2, p, ul, li { } p { } ul { } margin: 0; padding: 0; font-size: 1.4em; line-height: 1.4em; list-style-type: none; a:link, a:visited { color: #333; background: #eee; }a:link, a:visited { color: #333; background: #eee; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <title>red Lantern Design</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="stylesheets/screen.css" type="text/ </head> <body> css" media="screen" /> <div id="masthead"> <h1><img alt="logo Red Lantern Design" src="images/rl_logo.png" /></h1> <ul id="nav"> </ul> </div> <li><a class="active" title="strona główna Red Lantern Design" href="index.html">strona główna</a></li> <li><a title="usługi projektowania stron internetowych" href="services.html">usługi</a></li> <li><a title="nasze prace" href="portfolio.html">portfolio</a> </li> <li><a title="kontakt z Red Lantern Design" <div id= wrap"> href="contact.html">kontakt</a></li> <div id="header"> <img alt="panorama Tokio" src="images/tokyo.jpg" />

40 Jazda próbna Został jeszcze jeden dzień. Szybko, wstaw do strony treść. Przesłałam ją mailem. Ten etap powinien być naprawdę prosty, skoro projekt jest już gotowy Jane

41 Oto tekst przysłany przez Jane. Weź stoper i ustaw go na piętnaście sekund. Rozpocznij pomiar i zacznij czytać tekst. Kiedy czas się skończy, napisz na dole, o czym jest ten tekst. Od: Jane Temat: Zawartość strony internetowej INFORMACJE Ludzie zwracają coraz większą uwagę na odpowiednie zaprojektowanie. Bez względu na to, czy dotyczą usługi, czy produktu, bez względu na potrzeby czy wartość, wszystkie interakcje otacza pewien nierozerwalnie z nimi związany kontekst. Odnoszący sukcesy przedsiębiorcy zdają sobie sprawę, że muszą oferować dobrze zaprojektowane usługi bądź produkty, i inwestować odpowiednie zasoby w ich ulepszanie. Ludzie nie tylko zwracają coraz większą uwagę na zaprojektowanie towaru; pragną również obrazów, atmosfery i doświadczeń, które zaspokajają ich potrzeby na wielu poziomach estetycznym, pragmatycznym, ideologicznym czy kulturowym. Ludzie pragną dobrych projektów. Jądrem projektu jest łączenie. Pracując z klientami, zawsze podkreślamy znaczenie głębokiego, pełnego namysłu procesu analitycznego, w którym nacisk kładziemy na słuchanie klienta i uczenie się. W trakcie procesu projektowania koncentrujemy się również na odbiorcach docelowych oraz kontekście. Projektujemy z myślą o prawdziwych ludziach, a nie statystykach i demografii. Rozumiemy, że prawdziwi ludzie szukają czegoś więcej i pomagamy ukierunkować klienta oraz proces projektowania w taki sposób, by wytworzyć prawdziwe wartości. Firma Red Lantern Design projektuje i buduje proste, użyteczne i atrakcyjne witryny internetowe, które są szybkie, łatwe do odczytania i dostępne a wszystko to z wykorzystaniem standardów internetowych. Specjalizujemy się w: projektowaniu interfejsu (projektowaniu i budowaniu interfejsów oraz szablonów z wykorzystaniem standardów internetowych), przebudowie istniejących witryn internetowych (oferta przeznaczona dla osób, które chcą uaktualnić swoją stronę czy zbudować ją z użyciem CSS), optymalizacji kodu HTML oraz CSS (uproszczenie kodu ma na celu poprawę szybkości strony oraz jej struktury), consultingu (pomocy w utworzeniu strategii projektu, sugestiach dotyczących kodu HTML i CSS, a także seminariach).

42 Zamiast czytać treść strony od lewej do prawej i od początku do końca, tak jak książkę, użytkownicy przebiegają tekst wzrokiem w poszukiwaniu słów kluczowych oraz pojęć by szybko zrozumieć, czego dotyczy witryna.

43

44 Oto raz jeszcze tekst przysłany przez Jane. Spróbuj go poprawić w taki sposób, by był zgodny z listą punktów znajdującą się obok. Od: Jane Temat: Zawartość strony internetowej INFORMACJE Ludzie zwracają coraz większą uwagę na odpowiednie zaprojektowanie. Bez względu na to, czy dotyczą usługi, czy produktu, bez względu na potrzeby czy wartość, wszystkie interakcje otacza pewien nierozerwalnie z nimi związany kontekst. Odnoszący sukcesy przedsiębiorcy zdają sobie sprawę, że muszą oferować dobrze zaprojektowane usługi bądź produkty, i inwestować odpowiednie zasoby w ich ulepszanie. Ludzie nie tylko zwracają coraz większą uwagę na zaprojektowanie towaru; pragną również obrazów, atmosfery i doświadczeń, które zaspokajają ich potrzeby na wielu poziomach estetycznym, pragmatycznym, ideologicznym czy kulturowym. Ludzie pragną dobrych projektów. Jądrem projektu jest łączenie. Pracując z klientami, zawsze podkreślamy znaczenie głębokiego, pełnego namysłu procesu analitycznego, w którym nacisk kładziemy na słuchanie klienta i uczenie się. W trakcie procesu projektowania koncentrujemy się również na odbiorcach docelowych oraz kontekście. Projektujemy z myślą o prawdziwych ludziach, a nie statystykach i demografii. Rozumiemy, że prawdziwi ludzie szukają czegoś więcej i pomagamy ukierunkować klienta oraz proces projektowania w taki sposób, by wytworzyć prawdziwe wartości. Firma Red Lantern Design projektuje i buduje proste, użyteczne i atrakcyjne witryny internetowe, które są szybkie, łatwe do odczytania i dostępne a wszystko to z wykorzystaniem standardów internetowych. Specjalizujemy się w: projektowaniu interfejsu (projektowaniu i budowaniu interfejsów oraz szablonów z wykorzystaniem standardów internetowych), przebudowie istniejących witryn internetowych (oferta przeznaczona dla osób, które chcą uaktualnić swoją stronę czy zbudować ją z użyciem CSS), optymalizacji kodu HTML oraz CSS (uproszczenie kodu ma na celu poprawę szybkości strony oraz jej struktury), consultingu (pomocy w utworzeniu strategii projektu, sugestiach dotyczących kodu HTML i CSS, a także seminariach).

45 Lista do sprawdzenia

46 Zmodyfikowałeś tekst Jane zgodnie z listą rzeczy do zrobienia. Lista do sprawdzenia INFORMACJE Od: Jane Temat: Zawartość strony internetowej Ludzie zwracają coraz większą uwagę na odpowiednie zaprojektowanie. Bez względu na to, czy dotyczą usługi, czy produktu, bez względu na potrzeby czy wartość, wszystkie interakcje otacza pewien nierozerwalnie z nimi związany kontekst. Odnoszący sukcesy przedsiębiorcy zdają sobie sprawę, że muszą oferować dobrze zaprojektowane usługi bądź produkty, i inwestować odpowiednie zasoby w ich ulepszanie. Ludzie nie tylko zwracają coraz większą uwagę na zaprojektowanie towaru; pragną również obrazów, atmosfery i doświadczeń, które zaspokajają ich potrzeby na wielu poziomach estetycznym, pragmatycznym, ideologicznym czy kulturowym. Ludzie pragną dobrych projektów. Jądrem projektu jest łączenie. Pracując z klientami, zawsze podkreślamy znaczenie głębokiego, pełnego namysłu procesu analitycznego, w którym nacisk kładziemy na słuchanie klienta i uczenie się. W trakcie procesu projektowania koncentrujemy się również na odbiorcach docelowych oraz kontekście. Projektujemy z myślą o prawdziwych ludziach, a nie statystykach i demografii. Rozumiemy, że prawdziwi ludzie szukają czegoś więcej i pomagamy ukierunkować klienta oraz proces projektowania w taki sposób, by wytworzyć prawdziwe wartości. Firma Red Lantern Design projektuje i buduje proste, użyteczne i atrakcyjne witryny internetowe, które są szybkie, łatwe do odczytania i dostępne a wszystko to z wykorzystaniem standardów internetowych. Specjalizujemy się w: projektowaniu interfejsu (projektowaniu i budowaniu interfejsów oraz szablonów z wykorzystaniem standardów internetowych), przebudowie istniejących witryn internetowych (oferta przeznaczona dla osób, które chcą uaktualnić swoją stronę czy zbudować ją z użyciem CSS), optymalizacji kodu HTML oraz CSS (uproszczenie kodu ma na celu poprawę szybkości strony oraz jej struktury), consultingu (pomocy w utworzeniu strategii projektu, sugestiach dotyczących kodu HTML i CSS, a także seminariach).

47 Twoja wersja tekstu może wyglądać nieco inaczej, jednak jeśli tylko zastosujesz przedstawione wyżej techniki, sprawiające, że tekst łatwiej będzie szybko przejrzeć, czytelnicy pozostaną Ci wdzięczni. To spora zmiana. Moja wersja tekstu nie była aż tak, hm, treściwa. Czy Jane nie będzie się gniewać, że wycięliśmy wszystkie tak starannie przez nią ułożone zdania? Pewnie, może tak być. Ale ta wersja jest krótka, na temat i o wiele bardziej atrakcyjna.

48 Jazda próbna

49

50 ROZDZIAŁ 1. Niesamowite 34 strony i udało Ci się już całkowicie przebudować dość nędznie wyglądającą stronę internetową. W kolejnym rozdziale o wiele bardziej szczegółowo zajmiemy się fazą preprodukcji. Kiedy tworzysz strony internetowe, powinieneś stosować się do zasad projektowania zorientowanego na użytkownika budowania witryn, które skupiają się na zaspokajaniu potrzeb użytkowników. Proces projektowania pomaga ustrukturyzować projekt, dzięki czemu pozostajesz skupiony na zadaniu i wszystko wykonujesz o wiele wydajniej. Większość procesów (o ile nie wszystkie) projektowania witryn internetowych składa się z czterech etapów: preprodukcji, budowania układu strony, tworzenia nawigacji oraz pisania tekstów. Architektura informacji to proces, w którym dzielisz treść strony internetowej na części, a następnie układasz je w hierarchię zgodnie z logiką wzajemnych relacji między nimi. Tworzenie architektury informacji to proces dwustopniowy, składający się z organizowania informacji witryny i budowania diagramu. Diagram architektury informacji reprezentuje hierarchiczne uporządkowanie części i podczęści informacji strony. Nawigacja najwyższego poziomu zazwyczaj zawiera odnośniki do tych części architektury informacji, które znajdują się o poziom niżej od strony głównej witryny. Projekt nawigacji najwyższego poziomu uzależniony jest od całościowego projektu oraz układu strony. Istnieje kilka przydatnych modeli projektowania nawigacji najwyższego poziomu: poziome zakładki czy przyciski, pionowe menu lub zakładki. Szkice wykorzystuje się do wizualizacji projektu i przetestowania pewnych koncepcji układu strony przed zabraniem się za kod. Szkice to świetny sposób na wyłapanie potencjalnych problemów projektowych przed straceniem czasu na tworzenie kodu strony. Pisanie tekstów przeznaczonych na strony internetowe różni się od pisania na potrzeby mediów drukowanych. Użytkownicy przebiegają strony internetowe wzrokiem, zamiast czytać je od początku do końca. Treść stron internetowych musi być pisana w taki sposób, by przebieganie ich wzrokiem było możliwe.