Wymagania sprzętowe

Wymagania sprzętowe nie są wygórowane: wystarczy zwykła przeglądarka, edytor tekstu i chęci. Z tym ostatnim czasami może być problem, ale od czego są internetowe aukcje...

Przeglądarka

Jeżeli chodzi o przeglądarki, osobiście używam Firefoxa ze znakomitym dodatkiem Firebug. W zasadzie dla nas - super bohaterów - jest to obowiązkowa sprawa. Pozostałe super przeglądarki (Opera, Chrome itp.) - wedle uznania.

IE oczywiście też będziemy uruchamiać, chociaż nie za często, by nie wywoływać u ciebie nadmiernej frustracji ^^ (zakład?). Niestety odmienność IE jest czasami tak duża (przynajmniej w starszych wersjach), że sprawdzanie czy nasze twory tam działają staje się koniecznością.

Edytor tekstu

Jeżeli chodzi o edytor tekstu, to Windowsowy Notatnik zostawmy sobie w spokoju. Nas interesują edytory z kolorowaniem kodu, zwijaniem fragmentów kodu i ewentualnymi podpowiedziami. Warto przetestować kilka takich programów, by wybrać swój ulubiony.

Przykładem takich edytorów mogą być np:

• Php Storm - jeden z najlepszych edytorów na rynku dla systemu Windows. Tyle na temat. Kto podważa te słowa, pewnie go nie używał. Istnieje też webstorm, ale tamten nie wspiera PHP.
• Aptana - bardzo dobre, darmowe i wygodne środowisko-kombajn do tworzenia stron. Nieco podobne do PhpStorma. Jedyna wada, to fakt, że została napisana w Javie, przez co nieco trąci wydajnością (w praktyce zupełnie nie przeszkadza)
• Notepad++ - bardzo dobry i darmowy (ma zwijanie składni, obsługę skinów itp). Jako dodatkowy "szybki" edytor w sam raz.
• PsPad - Znowu za darmo :). W tej kategorii jeden z najlepszych na rynku.
• Pajączek - znany i lubiany rodzimy produkt. Kombajn do tworzenia stron. Bardzo dobrze wspiera sprawdzanie pisowni i gramatyki (ala Word) - przydatna rzecz dla mnie - bugofila :)

Firebug

Wymagany dodatek. Nie raz i nie dwa uratuje nam skórę.

Instalacja tego dodatku wygląda tak samo jak innych dodatków do Firefoxa.
Po zainstalowaniu Firebuga, w prawym dolnym rogu przeglądarki pojawi się mały ognisty robaczek :).

Jeżeli nasz dodatek jest domyślnie wyłączony, klikamy na niego prawym guzikiem, i z menu wybieramy "włącz wszystkie konsole".
Od tej chwili po kliknięciu na niego lewym guzikiem myszki, otworzy nam się konsola Firebuga, a wraz z nią bramy do raju.

W jej górnej części mamy zakładki Konsola (Console), HTML, CSS, Skrypt, DOM, Sieć. Pierwsza z nich to nasz drugi dom, w którym będziemy sprawdzać co robią nasze skrypty, czytać błędach, obiektach itp. W zakładce HTML podejrzymy bieżący kod dokumentu. Każdy element będziemy mogli dowolnie edytować, dopisywać z palca nowe, lub usuwać istniejące (tak więc jsowe zabezepieczenia na stronach przestaną dla nas istnieć). W CSS poznamy style dla elementów, będziemy mogli je modyfikować itp, a w zakładce Skrypt - nasze skrypty. Zakładana DOM pokaże nam informacje o naszym dokumencie, a Sieć informacje o czasach, połączeniach itp.
Nas interesują przede wszystkim Konsola i HTML.

Po włączeniu którejkolwiek konsoli Firebug, będziemy mogli używać w naszych skryptach dodatkowych komend, które są bardzo pomocne

• console.log( ... ) - wypisze tekst z nawiasów. Jako tekst możemy przekazać pobrany element, czy jakiś obiekt
• console.error( ... ) - wypisze tekst w formie błędu
• console.warn( ... ) - wypisze tekst w formie ostrzeżenia

Z lewej strony konsoli magiczna niebieska strzałka służy do badania obiektów - bardzo ważna funkcjonalność.
Z prawej strony konsoli mamy miejsce na wpisywanie skryptów. Wystarczy je powiększyć by na bierząco aplikować skrypty dla otwartej strony :). Przydatna rzecz...

Właściwie więcej na temat tego dodatku nie ma sensu pisać. Wystarczy że poklikasz i pobawisz się nim by poznać jego niuanse, bo wcale nie jest trudny w obsłudze.

Więcej na temat konsoli firebuga możecie przeczytać tutaj.