Nie bój się kodu!

Żyjemy w czasach technologii wszelakich. Większość z przedmiotów codziennego użytku to przedmioty mechaniczne z zaprogramowanymi funkcjami. Jednak pisząc ten tekst chciałbym się skupić na czymś prostszym, a być może większym. Mianowicie na internecie. To swoisty zbiór segregatorów (serwerów) przechowujących dynamiczne kartki papieru (strony www) oraz foldery z informacjami (bazy danych). By kartka papieru wyglądała tak jak sobie wymyślił jej autor, trzeba ją zakodować w odpowiedni sposób tak by przeglądarka zaprezentowała treść należycie. I tu zaczyna się granica, za którą zwykły Kowalski średnio chce przechodzić.

By tworzyć wyjątkową treść w internecie, według mnie trzeba znać podstawy HTMLa i CSS. No kurczę, ja pierwszy raz zajrzałem w źródło jakoś w wieku lat dziesięciu, a tworzenia prostej strony opartej na tabelkach uczyłem się na informatyce w ostatniej klasie podstawówki. Ja wiem, nie jestem przykładem zwykłego Kowalskiego. Warto pojąć, że podstawy HTMLa i CSSa to nie górnolotnie brzmiące programowanie, tylko swoiste tłumaczenie przeglądarce jak wygląda nasz dokument. Owszem, poziom wyżej zaczynają się już schody i magia kodu. Jednak z punktu, o którym piszę, jest jeszcze daleka droga do fajerwerków.

To teraz mam dla Ciebie zadanie (jeśli jesteś na desktopie), kliknij f12(dotyczy przeglądarek Chrome i Firefox na systemie Windows, Chrome na OS X obsługuje CMD + Alt + I). To co pojawiło się na Twoim ekranie nazywa się narzędzia deweloperskie. Brzmi groźnie, co? Nie odnotowano przypadków pogryzionych użytkowników. Wracając do sedna, w okienku, powinnien pojawić się kod strony, którą właśnie czytasz. Jeśli znasz choć podstawy angielskiego nie powinno sprawić Ci trudności wskazanie za co który fragment kodu odpowiada. Możesz sobie poklikać i pozwiedzać dalej, jeśli wola. Polecam zbadać w ten sposób inne strony, a nuż znajdziesz jakieś mrugnięcie Twórcy do Ciebie?;)jak na przykład ten 😉

Cały internet składa się ze znaczków działających na powyższych zasadach. Bardzo ale to bardzo zalecam nauczenie się tych podstaw HTMLa (to jest 5min przyswojenia wiadomości, potem działasz prawie jak ze słownikiem j. angielskiego) oraz CSSa (kilka prostych zasad do nauki a przy odrobinie pomyślunku i samozaparcia potrafią powstać naprawdę ciekawe projekty) bo to naprawdę przydatna umiejętność a do trudnych i strasznych nie należy.

Jako, że lepiej się człowiek uczy robiąc, niż tylko czytając chciałbym Ci polecić kilka stron, na których krok po kroku zapoznasz się ze standardami dzisiejszego internetu (nie budujemy już stron na tabelach!) oraz zrozumiesz czemu div z position:fixed stoi w miejscu na ekranie.

codecademy – portal, który co prawda na początku uczył podstaw JavaScriptu i programowania jako takiego, jednak zostały też utworzone kursy poświęcone stricte tworzeniu stron. Jeśli zainteresuje Cię JavaScript i inne języki programowania, nie krępuj się, zanurz się w kodzie!

teamtreehouse – kolejny portal, stawiający jednak na przebranżowienie się. Po zalogowaniu na dwa tygodnie demonstracji, można nauczyć się wielu przydatnych rzeczy. W tym stworzyć prostą stronę WWW. Polecam poświęcić te dwa tygodnie na przetestowanie, a potem przeznaczyć $25 miesięcznie na abonament. Testowałem, polecam. Do tego materiały zostały urozmaicone o pewną tajemniczą historię…;)

codeavangers – tu do wyboru mamy dwie ścieżki rozwoju. Napisać w JavaScripcie prostą grę RPG albo stronę WWW z użyciem HTML i CSS. Wszystko niemal łopatologicznie przedstawione.

LearnLayout – jeśli znasz już podstawy HTMLa, a CSS jest dla Ciebie wciąż czarną magią, to proszę, to powinno pomóc.

HackerTyper – i na koniec, psikus dla znajomych. Uruchom tę stronę, kliknij f11 (uruchomi się tryb pełnoekranowy) i pisz po klawiaturze co tam sobie wymyślisz. A na ekranie zatańczy kilkanaście wierszy literek rodem z Matrixa 😉

Mam nadzieję, że tym wpisem odegnałem Twój strach do tych ciągów znaków pisanych niby to nieskładnie, niby przypadkowo, ale niemal zawsze fontem stało szerokościowym (mono-spaced). Jeśli znasz jeszcze jakiś kurs online, pochwal się w komentarzu lub też na twitterze!

zdjęcie

  • Nie umiem w f12. BTW kodzenie jest mega!

    • Alternatywnie na na Win/Chrome można jeszcze zaczarować Ctrl+Shift+I , pochwal się jaka obowiązuje kombinacja na OS X/Chrome to poprawię 🙂

      • Mam, CMD+ALT+I

        • Te skróty klawiszowe to dopiero magia krzaczków….

          Dzięki! Poprawione!;)

          • A u mnie Cmd+Alt+I nie działa. Hm. Mac mnie codziennie zaskakuje z tymi skrótami. Czasem kot wejdzie mi na klawiaturę i dowiaduję się o cudownych nowych kombinacjach. Hm.

          • Jeśli działasz na Chrome to ostatecznie spróbuj F12 😉

            Ja Maca nie mam (jeszcze) więc operuję skrótami Windowsowymi/Linuxowymi.

          • Safari, inna bajka. Hmm, znajdę.

          • Obawiam się, że bez posiadania konta Dewelopera i jakichś magicznych wtyczek to niewiele zdziałasz z Safari…;/

          • Możliwe. Ale Safari jest super 😀

  • Nie miałam pojęcia o F12. Może dlatego, że wpoiłam sobie, żeby nie pchać palców tam, gdzie nie potrzeba. Na przypadkowe klawisze również. Dzięki za eurekę!