Bell M. - Darmowe sposoby na tworzenie profesjonalnych stron WWW. Podręcznik webmastera..pdf

Spis treĂci O autorze .........................................................................................................................................15 Dedykacja ........................................................................................................................................15 Podziękowania ................................................................................................................................15 Wprowadzenie ....................................................................................................................................17 CzÚĂÊ I. Podstawy 1. PorzÈdek rzeczy ..........................................................................................................................27 Proces tworzenia witryny internetowej ......................................................................................28 1. Planowanie ............................................................................................................................29 2. Projektowanie .......................................................................................................................30 3. Produkcja ..............................................................................................................................30 4. Testowanie ............................................................................................................................31 5. Promocja i utrzymanie ........................................................................................................31 Dlaczego warto przestrzegać tej kolejności ................................................................................31 2. Wybór lokalizacji witryny ............................................................................................................33 Hosting ............................................................................................................................................33 Czym jest serwer internetowy? .....................................................................................................34 Określenie wymagań hostingowych ............................................................................................35 Cena ...........................................................................................................................................35 Wymagana wiedza techniczna ...............................................................................................36 Utrzymanie serwera .................................................................................................................36 Miejsce na dysku ......................................................................................................................36 Dostępność ...............................................................................................................................36 Przepustowość ..........................................................................................................................36 Bezpieczeństwo ........................................................................................................................37 Zakres obsługi domeny ...........................................................................................................37 Hosting — możliwości ..................................................................................................................39 Hosting domowy ......................................................................................................................39 Darmowy hosting online ........................................................................................................39 Płatny hosting online ..............................................................................................................40 Hosting profesjonalny .............................................................................................................40 Hosting firmowy ......................................................................................................................40 Co będzie dla Ciebie najlepsze? ....................................................................................................40

4 Darmowe sposoby na tworzenie profesjonalnych stron WWW Praca z różnymi serwisami hostingowymi .................................................................................41 Darmowe usługi .......................................................................................................................41 Niedrogie serwisy komercyjne ...............................................................................................43 Inne źródła informacji ............................................................................................................44 CzÚĂÊ II. Planowanie i przygotowania 3. Planowanie witryny ......................................................................................................................45 Jakiego rodzaju witrynę chcesz stworzyć? ..................................................................................46 Rodzaje witryn ..........................................................................................................................46 Ucz się z witryn, które odwiedzasz ..............................................................................................49 Cele witryny ....................................................................................................................................50 Organizowanie witryn ...................................................................................................................51 Organizowanie witryny ...........................................................................................................52 Organizowanie witryny osobistej ..........................................................................................53 Organizowanie strony .............................................................................................................53 Układy stron internetowych ...................................................................................................54 Najlepsze sposoby organizowania witryny .................................................................................56 Zachowaj prostotę ....................................................................................................................56 Zachowaj spójność ...................................................................................................................57 Zadbaj o łatwość utrzymania .................................................................................................57 4. Projektowanie witryny .................................................................................................................59 Nie umiem zrobić takiej ładnej strony! .......................................................................................60 Treść, głupcze! ................................................................................................................................60 Ogólny projekt ................................................................................................................................61 Pomysły na design ...................................................................................................................61 Kolory ..............................................................................................................................................62 Magiczna czwórka ...................................................................................................................62 Kolory heksadecymalne ..........................................................................................................63 Schematy kolorów ....................................................................................................................64 Zaburzenia widzenia barw ......................................................................................................66 Fonty ................................................................................................................................................67 Fonty systemowe ......................................................................................................................67 Fonty jako obrazy .....................................................................................................................69 Fonty i kolor .............................................................................................................................69 Obrazy .............................................................................................................................................69 Kaskadowe arkusze stylów ............................................................................................................70 Najlepsze techniki designu .....................................................................................................70 Treść jest najważniejsza ..........................................................................................................70 Nowości umieść na początku i w środku ..............................................................................70 Zadbaj o prostotę .....................................................................................................................70 Nie używaj wodotrysków ........................................................................................................70 Zachowaj spójność ...................................................................................................................71

Spis treĂci 5 5. PrzeglÈd narzÚdzi ........................................................................................................................73 Wybór odpowiednich narzędzi ....................................................................................................74 Witryny z programami i recenzjami ...........................................................................................74 Pobieranie nowego oprogramowania .........................................................................................74 Nieodzowne narzędzia ..................................................................................................................75 Systemy operacyjne .................................................................................................................75 Przeglądarki ..............................................................................................................................76 Pakiety biurowe ........................................................................................................................76 Programy FTP ..........................................................................................................................76 Edytory tekstu ..........................................................................................................................78 Edytory graficzne .....................................................................................................................79 Edytory HTML .........................................................................................................................79 Rejestratory dźwięku ...............................................................................................................81 Edytory wideo ...........................................................................................................................81 Zaawansowane narzędzia .......................................................................................................81 Przyszłość darmowych narzędzi internetowych ........................................................................81 6. Przesyïanie i pobieranie plików ..................................................................................................83 Przechowywanie plików ................................................................................................................84 Nazewnictwo plików ...............................................................................................................84 Przechowuj wszystkie pliki internetowe w jednym miejscu ..............................................85 Stwórz strukturę organizacyjną .............................................................................................85 Używaj systemu kontroli wersji .............................................................................................86 Twórz kopie zapasowe plików ...............................................................................................87 Przesyłanie plików do internetu ..................................................................................................88 Logowanie .................................................................................................................................88 Tworzenie listy serwerów FTP ...............................................................................................89 Dodawanie plików ...................................................................................................................89 Podmienianie plików ...............................................................................................................90 Pobieranie plików z serwera FTP .................................................................................................91 Jeden plik lub więcej ................................................................................................................91 Pobieranie z przeglądarki .......................................................................................................91 Rodzaje pobieranych plików ..................................................................................................91 Zasady pobierania plików .......................................................................................................93 CzÚĂÊ III. Podstawy tworzenia witryn 7. Elementy witryny ..........................................................................................................................95 Treść .................................................................................................................................................96 Zasady tworzenia treści ...........................................................................................................96 Normy .......................................................................................................................................96 Części strony internetowej ............................................................................................................97 Tytuł ...........................................................................................................................................98 Nagłówek ..................................................................................................................................98

6 Darmowe sposoby na tworzenie profesjonalnych stron WWW Część główna ............................................................................................................................99 Stopka ........................................................................................................................................99 Paski boczne ...........................................................................................................................101 Elementy nawigacyjne ...........................................................................................................101 Części witryny ...............................................................................................................................102 Strona główna .........................................................................................................................102 Strony z treścią .......................................................................................................................103 Skąd mam wiedzieć, jak zorganizować witrynę? .....................................................................105 Reklamy internetowe ...................................................................................................................106 Reklamy banerowe .................................................................................................................106 Reklamy animowane .............................................................................................................106 Google AdSense .....................................................................................................................107 iSocket .....................................................................................................................................107 Widgety reklamowe ...............................................................................................................108 8. Wykorzystanie istniejÈcych witryn ............................................................................................111 Serwisy społecznościowe .............................................................................................................112 MySpace ..................................................................................................................................112 Facebook .................................................................................................................................113 Twitter .....................................................................................................................................117 Inne serwisy Web 2.0 ...................................................................................................................118 Pinterest ..................................................................................................................................119 Flickr ........................................................................................................................................119 Delicious.com .........................................................................................................................120 Promowanie własnej witryny na innych stronach ..................................................................120 9. Kreatory witryn ...........................................................................................................................123 Zanim zaczniemy .........................................................................................................................124 Witryny Google ............................................................................................................................125 Rejestracja w Witrynach Google ..........................................................................................125 Utworzenie Witryny Google ................................................................................................127 Edycja strony ..........................................................................................................................129 Utworzenie strony .................................................................................................................131 Przenoszenie strony ...............................................................................................................132 Usuwanie strony ....................................................................................................................132 Edycja ustawień strony ..........................................................................................................133 Edycja ustawień witryny .......................................................................................................134 Zalety i ograniczenia Witryn Google ..................................................................................134 Weebly ...........................................................................................................................................134 Rejestracja na Weebly ............................................................................................................134 Utworzenie witryny na Weebly ...........................................................................................135 Edycja strony ..........................................................................................................................136 Zalety i ograniczenia Weebly ...............................................................................................137

Spis treĂci 7 Webs ..............................................................................................................................................137 Rejestracja na Webs ...............................................................................................................137 10. HTML od podstaw .......................................................................................................................139 Struktura języka HTML ..............................................................................................................140 Elementy, tagi i atrybuty .......................................................................................................141 Struktura elementów .............................................................................................................141 Standardowe znaczniki HTML ..................................................................................................142 Znaczniki struktury HTML ..................................................................................................142 Znaczniki tekstowe ................................................................................................................144 Listy ..........................................................................................................................................147 Tabele ......................................................................................................................................148 Linki .........................................................................................................................................149 Obrazy .....................................................................................................................................150 Darmowe edytory HTML ...........................................................................................................150 Edytory tekstowe ....................................................................................................................150 Edytory WYSIWYG ..............................................................................................................150 Dodatkowe materiały ..................................................................................................................152 Tworzenie kodu HTML w edytorze tekstowym ......................................................................153 11. HTML5 .........................................................................................................................................155 Co to jest HTML5 i co z tego wynika? ......................................................................................155 Standardy ......................................................................................................................................156 World Wide Web Consortium (W3C) .....................................................................................156 HTML i XHTML ...................................................................................................................156 Standard HTML5 .........................................................................................................................156 Duże zmiany ...........................................................................................................................156 Przeglądarki ............................................................................................................................157 Źródła informacji na temat HTML5 ...................................................................................157 Elementy HTML5 ........................................................................................................................158 Elementy struktury ................................................................................................................158 Elementy multimedialne .......................................................................................................162 Formularze HTML5 ..............................................................................................................163 Bajery .......................................................................................................................................165 Usunięte elementy .................................................................................................................166 12. Praca z obrazami .......................................................................................................................167 Tworzenie grafiki .........................................................................................................................168 Kompresja: stratna i bezstratna ............................................................................................168 Edycja obrazów ......................................................................................................................169 Zmiana wielkości obrazów ...................................................................................................170 Zapisywanie obrazów ............................................................................................................170 Optymalizacja obrazów .........................................................................................................171

8 Darmowe sposoby na tworzenie profesjonalnych stron WWW Kiedy używać różnych formatów ........................................................................................173 Dzielenie obrazów ..................................................................................................................173 Mapy obrazów ........................................................................................................................175 Animowane pliki .gif .............................................................................................................175 Obrazy i HTML ............................................................................................................................176 Znacznik obrazu .....................................................................................................................176 Obrazy w tekście ....................................................................................................................177 Obrazy tła ................................................................................................................................178 Wyszukiwanie obrazów ...............................................................................................................178 Darmowe obrazy ....................................................................................................................178 Obrazy cudzego autorstwa ...................................................................................................179 Korzystanie z własnych obrazów ...............................................................................................179 13. Praca z multimediami ................................................................................................................181 Cyfrowe pliki audio ......................................................................................................................183 Formaty plików audio ...........................................................................................................183 Odtwarzacze audio ................................................................................................................184 Digitalizacja dźwięku .............................................................................................................184 Edycja plików audio ..............................................................................................................185 Streaming ................................................................................................................................186 Dodatkowe materiały ............................................................................................................186 Cyfrowe pliki wideo .....................................................................................................................187 Formaty wideo ........................................................................................................................187 Odtwarzacze wideo ................................................................................................................188 Digitalizowanie filmów .........................................................................................................189 Edycja plików wideo ..............................................................................................................190 Serwisy filmowe ......................................................................................................................190 Praca z YouTube’em ..............................................................................................................190 Dodatkowe materiały ............................................................................................................193 Wskazówki co do pracy z multimediami ..................................................................................193 14. Tworzenie witryny w HTML-u .....................................................................................................195 Jak działa strona internetowa .....................................................................................................196 Plik strony ...............................................................................................................................196 Rozszerzenia ...........................................................................................................................196 Narzędzia do tworzenia stron internetowych ....................................................................197 Komponenty strony ...............................................................................................................198 Odnośniki ...............................................................................................................................199 Kaskadowe arkusze stylów ..........................................................................................................205 Format arkusza stylów ..........................................................................................................206 Tworzenie arkuszy stylów i odnoszenie do nich ...............................................................207 Zebranie wszystkiego w całość ...................................................................................................208 Skrypty ...........................................................................................................................................212 Szablony .........................................................................................................................................213

Spis treĂci 9 15. JavaScript dla poczÈtkujÈcych ..................................................................................................215 Ty też możesz zostać programistą! ............................................................................................215 Proces programowania ................................................................................................................216 Narzędzia programistyczne ........................................................................................................216 Konsola JavaScript .................................................................................................................217 Edytory tekstowe ....................................................................................................................217 Dodatki do przeglądarek .......................................................................................................218 Podstawy JavaScriptu ............................................................................................................218 Funkcje JavaScriptu ...............................................................................................................219 Wersje JavaScriptu .................................................................................................................219 Wymagania JavaScriptu ........................................................................................................219 Element script .........................................................................................................................219 Skrypty na stronach i skrypty zewnętrzne ..........................................................................220 Prosty przykład JavaScriptu: rollovery i dynamiczne treści .............................................221 Dodatkowe materiały o JavaScripcie .........................................................................................223 Samouczki ...............................................................................................................................223 Biblioteki skryptów ................................................................................................................225 CzÚĂÊ IV. Testowanie i utrzymanie witryny 16. Jak oni to zrobili? .......................................................................................................................227 Oglądanie kodu witryn ................................................................................................................228 Dodatki Firefoksa dla webdeweloperów ...................................................................................229 Polecane dodatki Firefoksa dla twórców witryn ................................................................229 Polecane dodatki Chrome dla twórców witryn .................................................................233 Polecane dodatki Safari dla twórców witryn ......................................................................233 Odznaki .........................................................................................................................................233 Widgety .........................................................................................................................................235 Szablony .........................................................................................................................................236 Sieci i witryny deweloperskie .....................................................................................................236 17. Funkcjonowanie witryny na smartfonach i tabletach ..............................................................239 Dlaczego internet mobilny jest ważny? .....................................................................................240 Jak ludzie korzystają z mobilnego internetu ......................................................................240 Zacznij korzystać z mobilnego internetu ..................................................................................240 Mobilne urządzenia internetowe .........................................................................................241 Mobilne systemy operacyjne ................................................................................................241 Przeglądarki mobilne ............................................................................................................242 Ograniczenia mobilnego internetu ............................................................................................244 Utworzenie mobilnej witryny ....................................................................................................245 Wykrywanie przeglądarek mobilnych ................................................................................245 Domeny i subdomeny ...........................................................................................................245 Używaj właściwego kodu ......................................................................................................246

10 Darmowe sposoby na tworzenie profesjonalnych stron WWW Rozmiary stron .......................................................................................................................246 Interfejs ....................................................................................................................................246 Czego unikać ..........................................................................................................................247 Narzędzia i witryny dla twórców mobilnych witryn .........................................................247 Testowanie witryny na telefonie komórkowym ......................................................................248 18. Testowanie witryny .....................................................................................................................249 Dlaczego testowanie jest ważne ..................................................................................................250 Plan testowania .............................................................................................................................251 Zaczynaj od końca .................................................................................................................251 Testowanie podstawowej funkcjonalności .........................................................................251 Testowanie kodu HTML .......................................................................................................252 Testowanie przeglądarek ......................................................................................................253 Testowanie rozdzielczości ....................................................................................................254 Testowanie wydruków ..........................................................................................................255 Testowanie nawigacji ............................................................................................................256 Testowanie spójności designu ..............................................................................................256 Testowanie bezpieczeństwa ..................................................................................................257 Testowanie witryn na telefony i tablety ..............................................................................257 Testowanie dostępności ........................................................................................................258 Po zakończeniu testowania .........................................................................................................258 Narzędzia do testowania .............................................................................................................259 CzÚĂÊ V. Tworzenie witryn — zajÚcia praktyczne 19. Promocja witryny .......................................................................................................................261 Autopromocja ...............................................................................................................................262 Oferuj doskonałe i unikalne treści .......................................................................................262 Aktualizuj treści .....................................................................................................................263 Wypromuj swój URL ............................................................................................................263 Kontakty z innymi .................................................................................................................263 Autopromocja w serwisach społecznościowych ......................................................................266 Wyszukiwarki ...............................................................................................................................267 Jak działają wyszukiwarki .....................................................................................................267 Optymalizacja witryny dla wyszukiwarek ................................................................................268 Słowa kluczowe ......................................................................................................................268 Znaczniki meta .......................................................................................................................268 20. Utrzymywanie witryny ................................................................................................................271 To jeszcze nie koniec?! ................................................................................................................271 Regularna obsługa ........................................................................................................................272 Zadania do wykonywania co tydzień ..................................................................................272 Zadania do wykonywania co miesiąc ..................................................................................272 Zadania do wykonywania co rok .........................................................................................272

Spis treĂci 11 Dane analityczne ..........................................................................................................................273 Dane analityczne i ich znaczenie .........................................................................................273 Google Analytics ....................................................................................................................274 Ulepszanie witryny w oparciu o dane analityczne ..................................................................278 21. Blog na silniku WordPress ........................................................................................................279 Czym jest blog? .............................................................................................................................280 Po co mi blog? ...............................................................................................................................280 Publikowanie na blogu ................................................................................................................280 Udostępnianie treści ....................................................................................................................281 Czym jest WordPress? .................................................................................................................281 Wersje oprogramowania .......................................................................................................281 Tworzenie bloga na WordPress.com ........................................................................................282 Rejestracja na WordPress.com .............................................................................................283 Aktywacja konta .....................................................................................................................285 Logowanie na bloga ...............................................................................................................286 Tworzenie wpisów blogowych .............................................................................................288 Zarządzanie wpisami blogowymi ........................................................................................289 Zmiana designu bloga ...........................................................................................................289 Zarządzanie komentarzami na blogu ..................................................................................290 Tworzenie bloga oprogramowaniem WordPress ....................................................................292 Co musisz wiedzieć, zanim rozpoczniesz ...........................................................................292 Jak działa oprogramowanie WordPress? ............................................................................292 Ile to wszystko kosztuje? .......................................................................................................293 Przed instalacją oprogramowania ..............................................................................................294 Sprawdź, czy na serwerze zainstalowane jest odpowiednie oprogramowanie ..............294 Zdobądź edytor tekstowy ......................................................................................................294 Zdobądź klienta FTP .............................................................................................................294 Wybierz nazwę użytkownika i hasło ...................................................................................294 Pobierz i zainstaluj WordPressa ................................................................................................295 Pobierz oprogramowanie WordPress .................................................................................295 Dostosowanie WordPressa .........................................................................................................295 Dodawanie motywów ............................................................................................................296 Dodawanie wtyczek ...............................................................................................................296 Personalizacja WordPressa .........................................................................................................297 Modyfikowanie motywów ....................................................................................................297 Tworzenie motywów .............................................................................................................298 Tworzenie wtyczek ................................................................................................................299 Blogowanie na iPhonie ..........................................................................................................299 Blogowanie w prosty sposób ......................................................................................................300 Bądź na czasie ...............................................................................................................................300

12 Darmowe sposoby na tworzenie profesjonalnych stron WWW 22. Strona firmowa oparta na systemie zarzÈdzania treĂciÈ ........................................................301 Pięć powodów, żeby używać open source’owego CMS-a .......................................................302 Tworzenie witryny przy użyciu Joomla! ...................................................................................303 Zanim zainstalujesz Joomla! .......................................................................................................304 Pobranie i instalacja Joomla! ......................................................................................................304 Dodawanie artykułów ...........................................................................................................305 Zarządzanie użytkownikami ................................................................................................307 Moduły, wtyczki, szablony ..........................................................................................................307 Bądź na czasie ...............................................................................................................................308 Inne open source’owe CMS-y ....................................................................................................308 23. Witryna multimedialna ..............................................................................................................311 Najlepsze metody pracy z multimediami .................................................................................312 Korzystanie z multimediów ........................................................................................................313 Przechowywanie plików multimedialnych ........................................................................314 Pobieranie plików audio i wideo .........................................................................................315 Strumieniowanie plików audiowizualnych ........................................................................315 Zaawansowana praca z multimediami ......................................................................................319 Wix.com (www.wix.com) .....................................................................................................320 Webtrends Apps (transpond.com) ......................................................................................320 Zaawansowane open source’owe multimedia ..........................................................................320 24. Wiki .............................................................................................................................................321 Pięć powodów, dla których warto użyć serwisu Wikia ...........................................................322 Pięć powodów, dla których warto użyć oprogramowania MediaWiki ................................323 Czym jest Wikia? ..........................................................................................................................323 Tworzenie wiki w serwisie Wikia ...............................................................................................324 Rejestracja na Wikia ..............................................................................................................324 Dodawanie stron ....................................................................................................................326 Edycja strony ..........................................................................................................................326 Linkowanie stron ...................................................................................................................327 Przeglądanie historii strony ..................................................................................................328 Czym jest MediaWiki? ................................................................................................................329 Co musisz wiedzieć przed rozpoczęciem pracy .................................................................329 Architektura oprogramowania MediaWiki .......................................................................330 Zanim zainstalujesz oprogramowanie MediaWiki ...........................................................330 Pobranie i instalacja MediaWiki ..........................................................................................330 Bądź na czasie ...............................................................................................................................332

Spis treĂci 13 Dodatki A. Lista najczÚĂciej uĝywanych tagów HTML ................................................................................333 B. Witryny z darmowym i open source’owym oprogramowaniem ................................................337 Historia open source’a .................................................................................................................338 Wiadomości ze świata open source ...........................................................................................338 Witryny o open source ................................................................................................................338 Systemy operacyjne ......................................................................................................................338 Przeglądarki ..................................................................................................................................338 Pakiety biurowe ............................................................................................................................339 Programy do transferu danych (FTP) .......................................................................................339 Edytory tekstu ...............................................................................................................................339 Edytory grafiki ..............................................................................................................................339 Edytory HTML .............................................................................................................................339 Edytory wideo ...............................................................................................................................340 Nagrywanie dźwięku ...................................................................................................................340 Serwery ..........................................................................................................................................340 Bazy danych ..................................................................................................................................340 Oprogramowanie blogowe .........................................................................................................340 Oprogramowanie CMS ...............................................................................................................340 Oprogramowanie wiki .................................................................................................................341 Narzędzia do tworzenia skryptów .............................................................................................341 Skorowidz ...................................................................................................................................343

14 Darmowe sposoby na tworzenie profesjonalnych stron WWW

O autorze Mark Bell jest doktorantem na Indiana University, gdzie bada media i ich wpływ na relacje społeczne. Przed powrotem na studia Mark przepracował piętnaście lat w branży informatycznej jako autor tekstów technicznych, szkoleniowiec i deweloper. Swoją pierwszą firmę webdesignerską założył w roku 1993 i od tego czasu nieustannie zajmuje się tworzeniem witryn internetowych i ich utrzymywaniem. Jest ojcem dziesięcioletniego Jacksona, ojczymem Morrigan, Teagan i Xandera oraz mężem Sary „Intellagirl” Smith-Robbins. Możesz do niego dotrzeć przez Twittera, Facebooka i LinkedIn. Dedykacja Trzem osobom: Sarze, mojej żonie, która pokładając wiarę w moją siłę i determinację, tym bardziej je wzmacnia. Daje mi energię, wolę życia i miłość. Mam niesłychanego farta, że ją poznałem. Mojemu synowi Jacksonowi, który jest dla mnie pociechą i inspiracją. Codziennie zaskakuje mnie swoim ciepłem i inteligencją. Synu, pragnę dla Ciebie wszystkiego, co najlepsze. Mojemu przyjacielowi Davinowi, który zawsze przy mnie był i kochał mnie bez względu na wszystko. Jest prawdziwym przyjacielem, który towarzyszył mi w podróży przez cyfrowy świat od samego początku, kiedy u niego w salonie stał timex sinclair 1000. PodziÚkowania Tę książkę napisał wprawdzie jeden człowiek, ale znajduje się w niej wiedza zebrana od tysięcy internautów z Twittera i Facebooka. Publikacja powstała również dzięki pomocy mojej żony Sary oraz moich intelektualnych towarzyszy, Matta, Norberta i Joshuy. Nigdzie bym nie zaszedł bez pomocy tych pięknych umysłów. Szczególne podziękowania należą się Mattowi za współpracę nad tą książką — za znajdowanie luk i niedoszlifowanych fragmentów oraz tworzenie zrzutów ekranowych. Bardzo dziękuję Indiana University i mojemu opiekunowi, Harmeetowi Sawhneyowi, który rozumie, że muszę się zajmować innymi „projektami”, żeby zarabiać. Dziękuję też Johnowi Daileyowi, który pokazał mi, jak mistrzowsko uczyć o internecie. Dziękuję Timowi Bernersowi-Lee za stworzenie internetu, Richardowi Stallmanowi za założenie ruchu open source oraz wszystkim open source’owym deweloperom, którzy przepracowali łącznie miliony godzin, abyśmy wszyscy mogli się cieszyć niesamowitym, darmowym oprogramowaniem.

16 Darmowe sposoby na tworzenie profesjonalnych stron WWW Dziękuję moim nauczycielom informatyki ze szkoły średniej — pani Todd i panu Cooperowi — którzy dali mi się wyszaleć na elektronicznym placu zabaw. Dziękuję matce, braciom, siostrom oraz ich rodzinom. Najbardziej jednak dziękuję rodzinie i przyjaciołom, którzy okazują wyrozumiałość mi i mojemu rozkładowi pracy autorskiej.

Wprowadzenie W TYM ROZDZIALE x Dlaczego ta ksiÈĝka? x Czy to naprawdÚ nic nie kosztuje? x To mi siÚ nie uda… Prawda? x Komentarz do trzeciego wydania x Moja witryna x Jak korzystaÊ z tej ksiÈĝki? x Internet — co trzeba wiedzieÊ x Czym jest witryna internetowa? x Czym jest przeglÈdarka internetowa? hcesz stworzyć witrynę i nie wydać na to ani grosza? Skoro czytasz tę książkę, to pewnie jesteś zainteresowany stworzeniem witryny internetowej (choć być może nawet nie wiesz do końca, co to jest) bez wydawania pieniędzy. Jeżeli nie masz pojęcia, czym właściwie jest wi- tryna internetowa, i potrzebujesz kilku podstawowych informacji, to wszystkiego dowiesz się z dalszej części wprowadzenia. Jeśli z kolei wiesz, czym jest strona internetowa, to pewnie bardziej Cię interesuje, jak zrobić ją bezpłatnie. Wszystkie omawiane w tej książce programy i narzędzia są darmowe. W miarę możliwości staram się wybierać najlepsze darmowe zamienniki oprogramowania komer- cyjnego. W ciągu minionego dziesięciolecia internet, a konkretniej sieć World Wide Web, znacząco się rozrósł. C

18 Tworzenie stron internetowych. Darmowe rozwiÈzania W sieci można teraz znaleźć miliony witryn o różnej tematyce, od stron rodzinnych i firmowych po serwisy edukacyjne i rozrywkowe. Niektóre witryny wykazały się żywotnością i użytecznością (np. Yahoo! i Google), podczas gdy inne zniknęły równie szybko, jak się pojawiły. Może planujesz stworzenie witryny, którą odwiedzałyby miliony? A może chcesz po prostu utworzyć stronę, która pozwoli Ci na utrzymanie kontaktu z członkami rodziny? Dlaczego ta ksiÈĝka? Po tę książkę sięgnąłeś prawdopodobnie dlatego, że kołacze Ci się po głowie jakiś pomysł — taki, którym chciałbyś się podzielić w formie strony internetowej z resztą sieci. Być może pomysł jest już w pełni ukształtowany, a być może dopiero jest zalążkiem czegoś większego, ale tak czy inaczej, masz jakiś punkt wyjścia. Może powierzono Ci zadanie utworzenia strony internetowej i nie masz pomysłu, od czego zacząć. Może po prostu palisz się do nawiązywania kontaktów z ludźmi. Niezależnie od powodów, dla których chcesz utworzyć witrynę, ta książka pomoże Ci w zrozumieniu procesu przekształcania takich wizji w strony internetowe, a następnie poprowadzi Cię przez tworzenie pięciu różnych witryn służących konkretnym celom. Te witryny to zwyczajna strona internetowa, blog, system zarządzania treścią, wiki oraz witryna multimedialna. Być może te pojęcia są Ci obce albo ich ścisłe znaczenie w ogóle Cię nie interesuje, ale z tej książki dowiesz się, jak stworzyć takie witryny bez wydawania pieniędzy. Omówię, jak rozplanować, zaprojektować i stworzyć stronę, a następnie nią zarządzać — wszystko przy użyciu darmowych narzędzi. Dzięki prostym instrukcjom, które poprowadzą Cię krok po kroku, w mgnieniu oka utworzysz własną witrynę w sieci. Czy to naprawdÚ nic nie kosztuje? Prawdopodobnie zastanawiasz się, ile Cię to będzie kosztować. W tytule książki jest wprawdzie mowa o tym, że ma być bezpłatnie, ale przecież nie wierzysz, że naprawdę można coś uzyskać zupełnie darmo. Otóż ta książka jest wyjątkowa. Od różnych ludzi i na różnych stronach internetowych można otrzymywać zapewnienia o możliwie najniższych cenach za narzędzia do tworzenia stron, hosting i produkcję. Rozsądek mówi, że niczego nie dostaje się darmo. W zasadzie im więcej zainwestujesz, tym więcej możliwości zyskasz. Tymczasem w ciągu ostatnich pięciu lat internet zapełnił się darmowymi programami i oprogramowaniem open source, pozwalającymi na tworzenie zabawnych, ciekawych i dynamicznych witryn niskim kosztem. O ile to tylko możliwe, w tej książce opisuję darmowe oprogramowanie. Skoro ludzie rozdają wysokiej jakości oprogramowanie, to należy z niego korzystać.

Wprowadzenie 19 Oprogramowanie open source W powyższym punkcie rzuciłem hasłem „oprogramowanie open source” i pewnie zastanawiasz się, o co w ogóle chodzi. Większość oprogramowania, w tym Twój system operacyjny, edytor tekstu i przeglądarka, produkuje się zgodnie z tradycyjnym podejściem. Oprogramowanie zwykle tworzy grupa ludzi prowadzących własne przedsiębiorstwo komputerowe, które z kolei potrzebuje pieniędzy, by działać. Właściciele firmy płacą programistom za pisanie i testowanie programów oraz zatrudniają marketingowców i handlowców odpowiedzialnych za sprzedawanie produktów firmy konsumentowi, czyli Tobie. Od lat 80. właśnie tak powstaje lwia część oprogramowania. Internet ciągle ulega zmianom. Jedni twierdzą, że open source jest rewolucją, a inni — że tylko przejściową modą. W rzeczywistości ten model nie zniknie. Oprogramowanie open source powstaje z udziałem zespołów pracujących darmo uczestników i jest szeroko rozpowszechniane bez żadnych opłat. Co więcej, twórcy projektów open source’owych udostępniają również części składające się na program, czyli kod źródłowy, którego tajności tradycyjne firmy pilnie strzegą. Przyświeca temu założenie, że im więcej ludzi programuje, modyfikuje i korzysta z oprogramowania open source’owego, tym bardziej zyskuje ono na jakości. Ponadto, kiedy praca rozłożona jest na tysiące ludzi, z których większość pewnie nigdy się nie spotka, obłożenie obowiązkami jednej osoby dramatycznie się zmniejsza. Nie mów tego ludziom z tradycyjnych firm informatycznych, ale ich programiści pracują dla nich w ciągu dnia, a w nocy robią to samo, tylko darmo! W tej książce będę w miarę możliwości odnosił się do oprogramowania open source, ponieważ zwykle jest darmowe i — co ciekawe — często ma najwyższą jakość. Istnieją open source’owe systemy operacyjne, przeglądarki, edytory graficzne, a nawet narzędzia do zarządzania witrynami. Wszystkie z nich w tej książce omówię. Przy każdym poleconym programie podaję informację, gdzie można znaleźć jego najnowszą wersję oraz listę jego najważniejszych funkcji. Czy to aby legalne? Teraz możesz spytać: „Skoro biorę to wszystko darmo, to czy kogoś nie okradam?”. Nie popieram ani nie polecam kradzieży bądź piratowania oprogramowania. Wszystkie opisywane przeze mnie programy są udostępniane bezpłatnie. Branża programistyczna jest pełna pracowitych ludzi, którzy zasługują na wynagrodzenie za swój wysiłek. Jeżeli za program trzeba zapłacić, wspomnę o tym. W takich przypadkach wspomnę także o darmowym zamienniku i opiszę różnice.

20 Tworzenie stron internetowych. Darmowe rozwiÈzania To mi siÚ nie uda… Prawda? Przez lata nauczania obsługi oprogramowania w świecie biznesu i nauki wielokrotnie słyszałem, jak ludzie twierdzili, że nie mogą na komputerze wykonać czegoś, co chcą lub muszą, z takiego a takiego powodu. Niektórzy twierdzą, że boją się komputerów albo „po prostu ich nie rozumieją”. Jedni narzekają na sprzęt, a inni mówią, że nie potrafią zrozumieć działania tych machin. Ta książka ma za zadanie sprawić, by nawet najbardziej onieśmielony, niewykwalifikowany, potencjalny webdeweloper w okamgnieniu mógł się zabrać do pracy. Do każdego zadania dołączam bardzo proste, zrozumiałe instrukcje. Komentarz do trzeciego wydania Każda książka o internecie staje się nieaktualna w chwili jej ukończenia. Niniejsza publikacja nie jest wyjątkiem, gdyż internet zmienia się w coraz szybszym tempie. Z tego powodu napisałem nowe, bardziej aktualne wydanie. Trzecie wydanie jest znacznie bardziej rozwinięte. Pojawiły się w nim dwa nowe rozdziały: pierwszy koncentruje się na najnowszej wersji HTML i związanych z nią ulepszeniach, a w drugim omawiam JavaScript. Każdy z rozdziałów obecnych w poprzednich wydaniach uaktualniłem najnowszymi informacjami. Aktualizacje koncentrują się na wykorzystaniu telefonów komórkowych i tabletów, nowym oprogramowaniu open source’owym oraz nowych linkach do materiałów. Moja witryna Pod adresem http://www.markwbell.com znajdziesz moją witrynę (rysunek W.1). W całej książce będę się odwoływał do niej jako przykładu tego, o czym mówię w tekście. Znajdziesz na niej wieści o moich najnowszych książkach, informacje prasowe i dane kontaktowe. Jak korzystaÊ z tej ksiÈĝki? W tej książce zetkniesz się z wieloma pomocnymi komentarzami.

Wprowadzenie 21 RYSUNEK W.1. Witryna autora Uwagi, wskazówki i ostrzeĝenia UWAGA W uwagach znajdziesz ciekawostki, które poszerzÈ TwojÈ wiedzÚ. Nie zawsze sÈ one bezpoĂrednio zwiÈzane z wïaĂciwym tekstem i nie ma w nich nieodzownych informacji, ale mogÈ stanowiÊ cenne uzupeïnienie. WSKAZÓWKA Wskazówki pozwolÈ Ci zaoszczÚdziÊ czasu lub pieniÚdzy. One równieĝ nie zawierajÈ nieodzownych informacji, ale powinieneĂ zwracaÊ na nie uwagÚ. OSTRZE¿ENIE Z ostrzeĝeniami trzeba siÚ natomiast koniecznie zapoznaÊ. Ostrzeĝenie trzeba przeczytaÊ, zanim podejmie siÚ wykonania jakiegoĂ zadania. Czytaj je uwaĝnie.

22 Tworzenie stron internetowych. Darmowe rozwiÈzania Sïowniczek geeka Świat komputerów i związana z nim kultura przepełnione są żargonem. Wydawałoby się, że branża informatyczna karmi się skrótowcami i terminami zrozumiałymi tylko dla wtajemniczonych. W tej książce technicznym terminom będą towarzyszyć ramki z objaśnieniami, tłumaczącymi prostymi słowami, o co właściwie chodzi. S’OWNICZEK GEEKA Te komentarze wytïumaczÈ Ci terminy uĝywane w Ărodowisku geeków. Linijki kodu, które nie mieszczą się w wierszach tej książki, będziemy rozbijać, a ich ciągłość wskazywać strzałką (´):Internet — co trzeba wiedzieÊ Celem tej książki jest ułatwienie Ci jak najtańszego stworzenia witryny internetowej. Aby mogło do tego dojść, konieczne jest omówienie podstaw, w tym sposobu, w jaki internet działa. Możesz korzystać z sieci codziennie, ale nie rozumieć, czym ona właściwie jest. Ogólna znajomość budowy internetu mnie samemu pomaga w tworzeniu lepszych witryn. Jeżeli wiesz już, jak internet działa oraz czym są strony i witryny internetowe, przejdź od razu do rozdziału 1., „Porządek rzeczy”. Jeżeli jednak chcesz sobie szybko odświeżyć podstawy wiedzy o internecie, doczytaj to wprowadzenie do końca. Czym jest internet? Czy w ogóle przypominasz sobie świat sprzed czasów internetu? Twoja odpowiedź może być inna w zależności od Twojego wieku, ale zastanów się: jak mogliśmy sobie bez niego radzić? Pomyśl, jak w czasach przed internetem wyglądało poszukiwanie restauracji, do której można by się udać. Trzeba było przejrzeć dział „Gastronomia” w ogłoszeniach gazetowych, znaleźć na mapie ulicę, przy której lokal się znajduje, a następnie samemu wymyślić, jak tam dotrzeć. Dzięki internetowi wszystko powyższe możesz zrobić jednym kliknięciem, a w dodatku masz możliwość zapoznania się z jadłospisem, przejrzenia zdjęć lokalu, a nawet złożenia rezerwacji bez opuszczania domu czy podniesienia słuchawki. Czym jednak jest ta niesłychanie użyteczna rzecz zwana internetem?

Wprowadzenie 23 Internet to zwyczajnie największa sieć komputerów, jaka istnieje. Wszystkie wchodzące w jej skład komputery porozumiewają się podobnym językiem i bez problemu dzielą się informacjami. I tyle. Nie musisz się znać na historii internetu i technologii, na jakiej jest oparty. Kiedy łączysz się za pomocą modemu z siecią, Twój komputer staje się częścią sieci komputerów zwanej internetem. Być może w domu lub w pracy masz sieć lokalną, ale ona też jest połączona z internetem. Czym jest World Wide Web? W rozmowach o sieci i internecie ludzie często błędnie utożsamiają jedno z drugim. Jak wspomniałem, internet jest siecią komputerów. World Wide Web jest z kolei metodą przeglądania informacji udostępnianych przez te komputery. World Wide Web jest zbiorem określonych plików na określonych komputerach wchodzących w skład sieci. W tych plikach zawarte są informacje, które zbiorczo noszą nazwę World Wide Web (rysunek W.2). RYSUNEK W.2. Internet skïada siÚ z serwerów internetowych, z którymi ïÈczy siÚ Twój komputer S’OWNICZEK GEEKA www Czy zastanawiaïeĂ siÚ kiedykolwiek, dlaczego tyle adresów stron zaczyna siÚ od www? Te litery sÈ technicznym skrótem, który wskazuje przeglÈdarce, ĝe szukasz czegoĂ w World Wide Web. Nie jest on jednak potrzebny — wiÚkszoĂÊ przeglÈdarek trafi na wïaĂciwÈ stronÚ niezaleĝnie od tego, czy go podasz, czy nie.

24 Tworzenie stron internetowych. Darmowe rozwiÈzania Czym jest strona internetowa? World Wide Web składa się ze stron internetowych. Strona internetowa jest plikiem zawierającym informacje, do których można uzyskać dostęp i które można wyświetlić na komputerze. Plik, z którego chcesz w ten sposób skorzystać, pobierany jest na dysk Twojego komputera. Kiedy wchodzisz na stronę Amazon.com (rysunek W.3), korzystasz z pliku znajdującego się na komputerze Amazona. Plik ten zostaje pobrany, a zawarte w nim informacje — wyświetlone na ekranie. Przeglądając internet, łączysz się z różnymi komputerami, które przekazują pliki Twojemu komputerowi. RYSUNEK W.3. Strona gïówna Amazon.com Nie wszystkie strony internetowe są takie same. Niektóre witryny dynamicznie generują strony, które widzisz. Kiedy wpisujesz hasło w wyszukiwarce Google, zestawia ona wyniki i na bieżąco tworzy stronę, na której je wyświetla. W tej książce zajmuję się głównie stronami statycznymi, ale niektóre witryny — blogi, wiki i serwisy społecznościowe — tworzy się z wykorzystaniem dynamicznych stron.

Wprowadzenie 25 Czym jest witryna internetowa? Witryna jest zbiorem znajdujących się na danym komputerze (zwanym serwerem internetowym) stron internetowych (rysunek W.4), z których korzystają inne komputery. Twórca witryny zamieszcza pliki na serwerze internetowym. Serwer internetowy to po prostu komputer korzystający ze specjalnego oprogramowania, umożliwiającego innym przeglądanie stron internetowych, gdy wchodzą oni na adres serwera. Pod adresem cnn.com znajduje się zbiór stron, które składają się na witrynę sieci CNN. RYSUNEK W.4. Witryna skïada siÚ ze stron internetowych Czym jest przeglÈdarka internetowa? Przeglądarka internetowa jest programem na komputerze lub urządzeniu przenośnym, który służy do przeglądania stron dostępnych na witrynach. Na każdym komputerze znajduje się przynajmniej jedna przeglądarka wchodząca w skład zainstalowanego fabrycznie oprogramowania. Przeglądarka internetowa jest narzędziem służącym do przeglądania witryn, ale coraz częściej jest wykorzystywana także jako narzędzie do ich tworzenia. Wszystkie przeglądarki działają w zasadzie jednakowo. Należy w nich wpisać adres witryny lub kliknąć odnośnik. W ten sposób każesz im wejść pod podany adres i pobrać pliki (obrazy, tekst, filmy) na komputer, telefon lub tablet. Pamiętaj, że z internetu w telefonie również korzystasz za pośrednictwem przeglądarki. Pobrane pliki są następnie (miejmy nadzieję) estetycznie wyświetlane na ekranie, umożliwiając Ci korzystanie z nich.

26 Tworzenie stron internetowych. Darmowe rozwiÈzania Dostępnych przeglądarek jest kilka. Dobry webdeweloper (czyli Ty!) powinien być obeznany z tymi najpopularniejszymi i mieć je zainstalowane na komputerze na potrzeby testów. Internet z niespotykaną dotąd częstotliwością przegląda się dziś przy użyciu przeglądarek na urządzeniach przenośnych. Twój telefon prawdopodobnie też jest wyposażony w przeglądarkę. Pamiętaj, że Safari na maku to co innego niż Safari na iPhonie. Jeżeli poważnie traktujesz kwestię tworzenia witryn, musisz mieć na komputerze najnowsze wersje przeglądarek. Musisz też znać unikalne właściwości i ograniczenia poszczególnych przeglądarek. Oto najpopularniejsze przeglądarki: x Internet Explorer (Microsoft) — http://www.microsoft.com/ie/ x Chrome (Google) — http://chrome.google.com x Firefox (Mozilla) — http://www.firefox.com x Safari (Apple) — http://www.apple.com/safari/ x Opera (Opera) — http://www.opera.com/ x Konqueror (Linux) — http://www.konqueror.org/