Ultraszybki serwer VPS NVMe START
programowanie

Przejdźmy do napisania pierwszej strony internetowej w języku HTML – od tego niewątpliwie warto rozpocząć swoją przygodę z programowaniem webowym. Zrozumieć znaczniki – tak można by w dwóch słowach podsumować cel pierwszej lekcji w dowolnym kursie tworzenia stron internetowych. Jednak cel naszej dzisiejszej pracy jest inny: chcemy zrozumieć przeznaczenie każdej jednej wstawionej do kodu linii, i to niejednokrotnie w dość szerokim kontekście. Porozmawiamy więc o ewolucji standardów sieciowych, o optymalizowaniu strony dla wyszukiwarek (z ang. SEO – Search Engine Optimization), zwrócimy uwagę na rolę umiejętności miękkich w zdobywaniu wiedzy, dowiemy się jak poprawnie kodować polskie ogonki, oraz podepniemy do pliku HTML pierwszy arkusz stylów CSS oraz skrypt JS.

Będziemy niepokornie ciekawi, obsesyjnie zainteresowani, szukając frywolnie odpowiedzi na pytanie: „Dlaczego właśnie tak?”. Zdarzy nam się nawet bezwstydnie podejrzeć kod HTML innych programistów webowych (jak rasowy paparazzi zbadamy źródła popularnych portali) ale i zajrzymy do anglojęzycznych, wyczerpujących źródeł wiedzy. Niech ta lekcja przekona Cię, jak wciągającym, ciekawym i wielowymiarowym zajęciem jest tworzenie stron internetowych!

Wybór edytora (IDE), konfiguracja Notepad++

Czy po odcinku zerowym dokonałeś/aś już wyboru edytora kodu albo IDE? Po pierwsze wyjaśnijmy różnicę pomiędzy edytorem kodu a IDE.

Edytor kodu – program komputerowy umożliwiający nam wygodne pisanie linii kodu, zazwyczaj podświetlający składnię, numerujący kolejne linie, umożliwiający zaawansowaną edycję źródła (wyszukiwanie i zamiana tekstu, system podpowiedzi, konfiguracja kodowania znaków w pliku etc.). Często też edytory pozwalają nam zastosować tzw. tematy (skórki) – mamy do dyspozycji wiele różnych szablonów kolorystycznych, a jako że ludzie posiadają różne gusta i widzą przeróżne misie, ułatwia to spersonalizowanie procesu pisania własnego kodu. Przykłady edytorów: Notepad++, Sublime Text, Atom, Brackets.

IDE (ang. Integrated Development Environment) – jest to tak zwane: zintegrowane środowisko programistyczne. Zatem to już nie tylko edytor kodu, ale cały zestaw narzędzi pozwalający między innymi: uruchamiać napisane źródła, wygodnie je debugować (czyli wyszukiwać w nich błędy), testować, jak i dbać o strukturę i odpowiedni porządek realizacji całego projektu. Przykłady IDE: Eclipse, NetBeans, PHPStorm.

Uwaga: czasami spotkasz się z próbami uczynienia z edytora IDE poprzez np. dołączenie do niego odpowiedniej ilości wtyczek (pluginów) – stąd też ta różnica pomiędzy edytorem a IDE często bywa płynna. Podobnie jeśli nie używasz zaawansowanych opcji IDE, to niczym nie różni się to od używania edytora. Jeżeli ktoś uwielbia jakiś edytor, to często do np. debugowania użyje IDE, ale napisze większość swojego kodu w ukochanym edytorze. Nie jest też tak, iż pisanie w IDE automatycznie czyni z Ciebie lepszego programistę, podobnie jak chwalenie się tym przed ludźmi używającymi edytorów – jest to zachowanie podobne do postępowania osób, które przeczytawszy Grę o Tron chwalą się tym nałogowo wszystkim, którzy jedynie obejrzeli serial.

Co zatem wybrać? Na poziomie technikum, a już na pewno w pierwszych kontaktach z tworzeniem stron w ogóle, wystarczy jakikolwiek edytor podświetlający składnię i posiadający ciemne tło (choć nic nie stoi na przeszkodzie, aby od razu było to IDE). Reguła jest prosta: dokonaj wyboru na podstawie subiektywnego wrażenia „jak mi się pisze” w danym programie. Nie poświęcaj jednak zbyt wiele uwagi bawieniu się kolorkami i tematami w edytorach – pracuj z kodem, to na początku najważniejsze! Do świadomego wyboru swojego środowiska powrócisz na etapie szlifowania własnych umiejętności (po opanowaniu podstaw tworzenia witryn).

Na egzaminie E.14 na stanowisku dostępny będzie edytor kodu, najczęściej Notepad++ (proponowany przez CKE), aczkolwiek to asystent techniczny przygotowujący egzamin w danej szkole decyduje ostatecznie jakie edytory zainstalować (jeżeli zależy Ci na obecności jakiegoś konkretnego edytora na stanowisku, to koniecznie powiedz mu o tym odpowiednio wcześnie).

Jeżeli nie masz pomysłu co wybrać do nauki w tym kursie, to możesz na czas naszej wspólnej pracy korzystać z Notepada++ (to jego używam na nagraniach video w niniejszym kursie). Edytor można pobrać stąd (najlepiej wybierz pakiet ze słowem installer – wówczas będzie zawierał gotowy instalator). Podczas instalacji warto upewnić się, że zainstalowane zostaną tematy (themes).

…to jedynie wstęp do całego artykułu w PDF. Pobierz plik poniżej ↓


Obudowa dydaktyczna oraz wersja na słuchawki:

pdf file mp3 file






10 pytań sprawdzających wiedzę z odcinka:


Pobierz kody źródłowe z odcinka:


Udostępnij