Cześć!

Zgodnie z wcześniejszą zapowiedzią, bierzemy się za tzw. mięso. Czas się wziąć za przygotowanie nowego szablonu strony. Może wydawać się to troszkę śmieszne, ale jakoś dawno nie miałem okazji pogrzebać nic więcej w szeroko rozumianym froncie, więc drobna okazja właśnie się do tego nadarzyła. Jakie to ma plusy?

  • Własny, 100% spersonalizowany wygląd strony (można sobie poczytać o pojęciu identyfikacji wizualnej, coś takiego właśnie zamierzam stworzyć).
  • Przegląd nowinek w technologiach frontowych – od kiedy więcej coś w tym robiłem minęło sporo czasu, pamiętam, że wtedy właśnie wchodził HTML5 i CSS3. Miałem też przyjemność uczestniczyć w bardzo ciekawych warsztatach frontendu od podstaw i w sumie bardzo mi się to spodobało!
  • Odkurzenie swoich umiejętności i nabycie nowych (może kiedyś fajnie by było zostać FullStack?)
  • Chcę, żeby wygląd strony robił pierwsze dobre wrażenie.
  • Przygotowanie odpowiedniego szablonu ma wpływ na SEO.
  • Dobra zabawa 😀

Nie ma co zwlekać, czas się wziąć za robotę!

Stos technologiczny

Od najniższego poziomu abstrakcji do najwyższego.

  1. Treść – oczywiście sama zawartość  zostanie opisana przy pomocy języka znaczników HTML5. Jest to standard w dzisiejszym Internecie i choćby dlatego warto to znać. Szczególną uwagę przyłożę do stosowania znaczników semantycznych. Pozwalają one na wyszczególnienie konkretnych fragmentów strony, co niesie ze sobą wiele korzyści. Przede wszystkim pozwala na usystematyzowanie zawartości strony, po drugie optymalizuje stronę pod względem wyszukiwarek. Ponadto sam format jest czytelniejszy dla tworzącego dokument. Należy zwrócić uwagę, aby oddzielić poszczególne warstwy od siebie. W dokumencie HTML nie możne znaleźć się osadzony styl CSS lub kod JS (przynajmniej nie powinien, jest to nieeleganckie, a my jesteśmy dżentelmenami :)). Dokument HTML z definicji ma za zadanie tylko i wyłącznie opisywać strukturę dokumentu, a nie jego wygląd. Do opisu wyglądu służą arkusze, które muszą znaleźć się w osobnych plikach.
  2. Wygląd – oczywiście będzie królował CSS3 i co do tego nie ma żadnych wątpliwości. CSS w wersji 3. daje bardzo dużą pulę narzędzi, które umożliwiają dynamiczne generowanie wyglądu strony. Dawniej wszystko się rysowało i wstawiało jako zdjęcia – cienie, ramki itd. Pamiętam nawet korzystałem z programu, który generował “fajne” przyciski… Dzisiaj patrzę na to z pożałowaniem… Na szczęście cały czas się rozwijamy! Wcześniej wspomniałem też o odizolowaniu warstwy dokumentu i wyglądu. Dzięki strona będzie złożona z łatwo wymienialnych modułów. Bardzo fajną analogią jest gniazdko zasilające w ścianie i urządzenia elektryczne. Łączą się ze sobą ściśle ustalonym interfejsem a jednocześnie są od siebie niezależne. Drugą bardzo ważną rzeczą dostarczoną przez CSS3 są tak zwane siatki (grid). Przyda się to przy implementacji responsywności strony, ale o tym niżej. Przy okazji nie będę korzystał z żadnych preprocesorów – mam założenie zagłębienia się w podstawy.
  3. Interakcja – JavaScript. Język, w którym budowane są dzisiaj całe serwisy, ale ja postaram się, aby po wyłączeniu obsługi JavaScript strona dalej zachowywała swoje funkcjonalności. Podziękujcie za to Krzaqowi – rozmawiał o tym z Maciejem Aniserowiczem w DevTalku z laureatami DSP. A postaram się to przetestować m. in. w takiej przeglądarce, którą zwą Elinks. Poniżej próbeczka:
  4. Obsługa treści – stary dobry WordPress (chociaż co do tego, czy dobry to zdania są podzielone). Ja używam i nie narzekam. Wychodzę z założenia, że trzeba sobie życie ułatwiać, a nie utrudniać. Dla mnie ten CMS jest wystarczający i bardzo ułatwia codzienną pracę z blogiem. Nie mam jakiś specyficznych wymagań co do funkcjonalności. Poza tym nawet jeżeli będę kiedyś potrzebował coś szczególnego, to sobie dopiszę wtyczkę 🙂 No właśnie, przy okazji WordPressa trzeba wspomnieć o PHP. Został on w nim stworzony, więc nie uniknę styczności z tym językiem. Podobno w wersji 7.x jest całkiem fajny 🙂 A no i najważniejsze – szablon musi być zbudowany zgodnie z API WordPressa.
  5. Reszta świata – postaram się nie korzystać z żadnych frameworków czy bibliotek. Chodzi o to, żeby poznać się z podstawami technologii. Czysty JS i PHP, czysty CSS bez stosowania preprocesorów (LESS, SASS, SCSS). Po prostu nie. Co najwyżej skorzystam z Grunta albo Gulpa do minifikacji plików. No i najważniejsze – Git. Kod będzie dostępny u mnie w repozytorium. Przy okazji potrenujemy sobie zabawy z tym systemem kontroli wersji. Nad projektem graficznym będą czuwały zasady Material Design.

Podsumowanie

O tak, zaczynamy powoli bawić się w tak zwane mięsko. Wypisałem podstawowy stos technologiczny, który swoją drogą nie jest zbyt wyszukany, ale taki ma być. Myślałem, że więcej  uda mi się opisać w tym wpisie, jednak jak sobie podsumowałem wszystko, to wyszło bardzo dużo zagadnień. Dlatego podzielę ten wstęp na kilka części. W następnej odsłonie, która być może ukaże się szybciej niż za tydzień, opowiem o smaczkach, które chciałbym zaimplementować w swoim szablonie, podam parę ciekawych źródeł oraz bardziej zagłębię się w poszczególne elementy stosu. Oprócz tego zaprezentuję Ci grafiki ilustrujące szablon strony na urządzenia mobilne oraz tablety i desktopy. Zapraszam do śledzenia! Czołem! 🙂

A może…?

Dziękuję Ci, że dotartłeś aż do tego miejsca. Mam nadzieję, że podobał Ci się mój wpis i dowiedziałeś się z niego czegoś wartościowego. Jeżeli chcesz być poinformowanym o moich kolejnych wpisach bądź od czasu do czasu dostać wiadomość ze zbiorem jakiś ciekawych linków, zapisz się proszę do mojego newslettera. Będzie mi niesamowicie miło, jeśli to zrobisz i dołączysz do mojej społeczności!


Piotr Wachulec

Student, konsultant IT/programista, bloger, w wolnych chwilach uczy się nowych rzeczy, tańczy bachatę lub pije pyszną kawę ze znajomymi (chętnie się jej napije także z Tobą! :)). Często można go spotkać na konferencjach, meetupach lub po prostu biegnącego po stolicy na tramwaj. Jego piątka w "teście" Gallupa: Learner, Achiver, Intellection, Relator, Harmony.