Programowanie bez komputera

2 września w Akademii Humanistyczno-Ekonomicznej w Łodzi odbyły się warsztaty mojego pomysłu “Od zera do HTML bohatera”. Kiedy jeden z uczestników przyszedł bez potrzebnego sprzętu, wywołał u nas chwilową panikę (i co teraz? ;)). Po warsztatach jednak naszła mnie myśl: “Hej, ja sama do nauki Pythona i JavaScript komputera nie używam prawie wcale!” Noo… Hmmm… Ale jak to!?

Jeżeli jesteś rodzicem małego odkrywcy to wiesz, że tego młodego człowieka interesuje absolutnie WSZYSTKO, a sprzęty elektroniczne jeszcze bardziej. Trzymanie laptopa przy moim egzemplarzu miniaturowego naukowca grozi zaślinieniem komputera, tudzież powyrywaniem klawiszy. Dlatego chcąc nie chcąc muszę korzystać z telefonu.

Mobilki dla przyszłych dev’ów

Właściciele platform do nauki kodowania na szczęście doceniają potencjał mobilnych rozwiązań (no sh*t, Sherlock!). Na co dzień korzystam z aplikacji Udemy, Udacity oraz Pluralsight, gdzie oglądam interesujące mnie kursy (Quick Start to JavaScript w Pluralsight jest świetny), robię krótkie lekcje w Py i Enki oraz uczę się z SoloLearn. CodeSchool swojej apki nie ma, ale zawsze można pobrać filmy i oglądać bezpośrednio. Czytam też You Don’t Know JS w GitBooks.<.p>

Ale gdzie klepanie kodów!?

No dobra, dobra, ale to jeszcze nie jest kodowanie! Otóż to, po przeczytaniu i zobaczeniu filmów przychodzi czas na najważniejsze, czyli rozwiązywanie zadań. Na początku korzystałam z onlinowego interpretera repl.it. Jest to o tyle ciekawe rozwiązanie, że pozwala w przeglądarce pisać kod w wybranym języku (wybór jest bardzo szeroki, od Haskella, przez C#, Go i Ruby do Pythona, JS z HTML i CSS), koloruje składnię i oferuje podpowiedzi.

W moim przypadku jednak repl.it się nie sprawdził: nie pozwala mi na kopiowanie i wklejanie fragmentów kodu, wariował przy zapisie projektów i przy przejściu do innej apki ładował ponownie nowy projekt, przez co traciłam niezapisany kod. Możliwe, że wynika to z moich ograniczeń sprzętowych (nie oszukujmy się, mój ZTE to nie to samo co flagowy Samsung). Znalazłam jednak alternatywę.

Simply is new sexy

Pobrałam darmową aplikację JS Run. Jest lekka (tylko ciut ponad 8 Mb), prosta nak konstrukcja przysłowiowego cepa, koloruje składnię i bez problemu mogę przejść z niej do innej apki (np. podejrzeć treść rozwiązywanego zadania) nie tracąc kodu, nad którym pracuję. Niestety nie oferuje podpowiedzi. Ma jeszcze jedną przewagę nad repl.it, mianowicie może działać offline.

Szklanka z wódką to jeszcze nie drink.

Obecnie jestem na etapie nauki podstaw JavaScript. Umiem już co nieco w funkcje i obiekty, ale jeszcze długa droga przede mną. Zdaję sobie sprawę, że pisanie kodu w JS Run jest jedynie czasowym substytutem IDE (na telefonie nie ogarnę np. skrótów klawiszowych w Visual Studio Code, z którego korzystam stacjonarnie). Tak samo o wiele trudniej pisać strony bez możliwości podejrzenia efektów na komputerze. Jednak dzięki zastosowanym rozwiązaniom jestem w stanie poświęcić 3 godziny dziennie na naukę i pogodzić ją z opieką nad dzieckiem.

BONUS – apka do nauki DOM

W tak zwanym międzyczasie przeszłam naturalnie od nauki podstaw składni JS do ogarniania drzewa DOM i do tego zadania JS Run już się nie nadaje. Ale za to odkryłam inną rewelacyjną aplikację, mianowicie Dcoder! W sekcji HTML można dołączyć kod CSS oraz JavaScript, jest więc idealny do kolejnych prób i błędów 🙂

A w temacie warsztatów na uczelni…

Owszem, udało się skombinować komputer. Całe szczęście, że brakowało tylko jednego sprzętu 🙂

Znaczniki HTML

Moja przygoda z HTML rozpoczęła się w 2004 roku, kiedy to pracowałam nad jakże ambitnym projektem mojej pierwszej strony internetowej. Była to galeria zdjęć kolegów i koleżanek z mojej klasy ze szkoły średniej. Nie miałam wtedy pojęcia, że po wielu latach wrócę do tej wiedzy.

Narodziny infant-webmastera

Podpisy pod zdjęciami wykonywałam w MS Paint, a same obrazy były jakości przecudnej, wszak wykonane zostały przy użyciu chińskiej kompaktowej cyfrówki za 200 PLN. Wspomniana witryna powstawała przy użyciu takich zaawansowanych technologii front-endowych, jak Pajączek czy Microsoft Frontpage. Moja praca polegała na posklejaniu elementów w edytorze graficznym i jak za dotknięciem magicznej różdżki dostałam kod HTML.

A jednak to właśnie graficzne edytory były moją pierwszą szkołą pisania kodu. Podpatrywałam zapis HTML, metodą prób i błędów osiągałam zamierzone efekty, spędzałam godziny na dłubaniu przy tej stronie. Najpierw dowiedziałam się do czego służą parametry „width” i „height” oraz „div-align” (wszystkie style były pisane w HTML, ofkors). Przez lata byłam pewna, że w tagu „img src” to „src” jest skrótem od „screen”, a nie „source” 😉 (tak, wiem, że literki trochę w złej kolejności).

Pozytyw(istycz)na praca u podstaw

Piszę o tym troszkę z ironią, a troszkę z nostalgią i wyrozumiałością, bo doskonale pamiętam jaką satysfakcję odczuwałam, kiedy zmiana w kodzie (!) dawała rezultat zgodny z moimi wyobrażeniami. Nauczyłam się jak przez FTP wysłać stronę na serwer, jak podpiąć grafikę, jakie formaty i nazwy powinny mieć konkretne pliki.

Z racji tego, że moimi „nauczycielami” były ww. programy oraz różne fora, a w 2004 o HTML5 mało kto słyszał, od kilku miesięcy nadrabiam braki w mojej edukacji. Zatem nadeszła pora na uzupełnienie wiedzy o znaczniki, których nie znałam.

Znaczniki HTML

<sup>
Znacznik indeksu górnego używany np. przy potęgowaniu.

<sub>
Znacznik indeksu dolnego stosowany np. przy wzorach chemicznych.

<hr />
Jest to znacznik, który wstawia wiersz przerwy wraz z poziomą linią w tym wierszu (jak <br /> + linia). Jako jeden z niewielu, nie wymaga znacznika zamykającego (jest elementem pustym), powinno się jedynie dodać spację oraz ukośnik po nazwie tagu.

<strong>
To znacznik semantyczny, który służy do wskazania istotnej treści i pogrubienia go. Nie jest to jednak to samo co znacznik <b>, ponieważ ten drugi nie służy do określania znaczenia wybranego tekstu, a jedynie do wywołania efektu pogrubienia.

<em>
Również jest znacznikiem semantycznym, który służy do wskazania treści z dodatkowym znaczeniem. Przeglądarki najczęściej publikują taki tekst kursywą. Analogicznie do znaczników <strong> i <b>, nie należy stosować <em> oraz <i> zamiennie, ponieważ <i> nie jest znacznikiem semantycznym.

<blockquote>
Służy do konstruowania osobnego bloku z cytatem, najczęściej przez przeglądarki zaznaczanego wcięciem z lewej strony (wewnątrz należy umieścić znacznik akapitu <p>).

<q>
Tag, dzięki któremu zaznaczymy obecność akapitu wewnątrz linii tekstu, opatrywany przez przeglądarki cudzysłowami (UWAGA! IE tego nie robi).

<abbr>
To znacznik używany do sygnalizowania skrótów i akronimów. Wykorzystując atrybut title podajemy pełne brzmienie skróconego tekstu.

<cite>
Służy do zaznaczenia źródła: książki, filmu, magazynu, etc. Może być również używany jako atrybut znaczników <q> oraz <blockquote> w celu określenia źródła cytatu.

<dfn>
Tego znacznika należy użyć, kiedy po raz pierwszy objaśniany jest jakiś termin.

Przy okazji tagu <dfn> warto wspomnieć o listach definicji. HTML poza standardowymi listami numerowanymi (<ol>, ordered list) oraz nienumerowanymi (<ul>, unordered list) udostępnia listy dedykowane seriom terminów wymagającym wyjaśnienia. Do ich utworzenia używamy znacznika <dl>, a wewnątrz korzystamy z tagów:
– <dt> dla objaśnianego terminu;
– <dd> dla definicji terminu.

<address>
Jest to element, który służy do podawania danych autora strony, takich jak adres zamieszkania, telefon oraz adres poczty elektronicznej. Podanie tych danych jest oczywiście dobrowolne.

<ins>
Znacznik, dzięki któremu możemy zaznaczyć na stronie obecność nowej treści. Przeglądarki często podkreślają ten tekst.

<del>
W przeciwieństwie do <ins>, znacznik <del> określa treści usunięte z artykułu, wyświetlane z przekreśleniem.

<s>
Tag analogicznie do <del> najczęściej wyświetlany z przekreśloną treścią – służy do zaznaczenia treści nieaktualnej.

<figure>
Jest to element, który służy do semantycznego powiązania obrazka wtaz z jego opisem. Wewnątrz tego tagu można umieścić więcej obrazków, o ile podpis odnosi się do tych obrazów.

<figcaption>
Ten znacznik umieszczony wewnątrz znacznika <figure>, służy do oznaczenia opisu zdjęcia/zdjęć tego znacznika.

Astrologowie ogłaszają czas nauki. Zasób ogarniętych tagów zwiększa się 😉

źródło: Duckett J. „HTML i CSS. Zaprojektuj i zbuduj witrynę WWW