Operacja Frontend + CMS cz. 2

Opublikowane przez Piotr Wachulec w dniu

Cześć !

W kolejnej części zmagań z przygotowaniem identyfikacji wizualnej, a przy tym nowego super szablonu dla mojej strony, porozmawiamy o nowinkach (może nie już takich ciepłych, ale za to bardzo ważnych!), które chciałbym wykorzystać przy implementacji szablonu. Dla części z Was na pewno będzie to oczywiste, a dla pozostałych może stanowić pewnego rodzaju przypomnienie.

Semantyka w HTML

Słowo semantyczny idąc za słownikiem języka polskiego oznacza:

Dotyczący znaczenia wyrazów; znaczeniowy

I dokładnie do tego odnosi się hasło semantyczny w języku HTML5. Pewnie każdy z Was pisał jakąś stronkę w HTML i tworzył takie potworki.

<body>
    <div class="grid-container">
        <div class="row">
            <div class="col-12"></div>
            <div class="row">
                <div class="col-12"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-8">
                <div id="article-header"></div>
                <div id="article-content"></div>
                <div id="article-footer"></div>
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row">
            <div class="col-12"></div>
        </div>
    </div>
</body>

Jak dobrze, że w Visual Studio Code jest Emmet… Samo myślenie o tym jest ciężkie, a co dopiero tego pisanie. Szablon oparty na wygenerowanej przez nas samych siatce lub dostarczonej z zewnątrz, np. przez Bootstrapa. O zgrozo, komu się chce to pisać! Plus dodatkowe klasy w zależności od rozdzielczości, w jakiej wyświetlana jest strona. Poza tym mówiliśmy wcześniej, że HTML służy do opisu struktury dokumentu, a tutaj na pewno tak nie jest. Dzisiaj dzięki semantyce w języku możemy to samo napisać w ten sposób (przede wszystkim prawidłowo!).

<body>
    <header>
        <nav></nav>
    </header>
    <main>
        <section>
            <header></header>
            <article></article>
            <footer></footer>
        </section>
        <aside></aside>
    </main>
    <footer></footer>
</body>

Język HTML dostarczył nowych znaczników, które jednoznacznie informują programistę (zaraz polecą baty, że w HTMLu się nie programuje i ja się w tym 100% zgadzam), kogoś kto zagląda w źródło strony, co w danej sekcji dokumentu się znajduje. Funkcjonalnością odpowiadają zwykłemu znacznikowi div. Co to daje w takim razie? Nie mogło zostać tak jak było? No nie. Dzięki temu dokument staje się czytelniejszy i jak definicja mówi, język służy do opisania struktury dokumentu. Jednoznacznie widać, gdzie jest zdefiniowany nagłówek strony, główna treść, stopka itd. Ponadto prawidłowe zaimplementowanie strony znacznikami semantycznym pozwala SEO lepiej pozycjonować nasza stronę oraz czytnikom dla osób niedowidzących prezentować treść w pożądany sposób. Tutaj dodatkowe fajne źródło!

Responsive design

Kolejny ze standardów dzisiejszego internetowego świata. Znaczy to tyle, ze odwiedzane przez nas strony maja się dostosowywać do urządzeń, na których są wyświetlane. Pamiętacie pewnie, dawniej strony tworzyło się w 5 wersjach i w zależności od tego, jakie urządzenie odpytywało serwer, to ten odpowiedni kontent mu serwował. Dzisiaj na szczęście odeszliśmy od tej nadmiarowej roboty i tworzymy jedna stronę, która w zależności od rozdzielczości wyświetlacza, dostosowuje wyświetlane treści, zmienia ich układ na stronie. Właściwie robi to przeglądarka. Dlatego też powstają pewne narzędzia wspomagające implementację responsywności. Powiesz teraz: Gościu, no właśnie to co powiedziałeś, że jest beeeee, to była droga do responsywności. I co teraz??? No to ja Ci powiem, zapoznaj się CSS Grid.

CSS Grid

Wyżej masz przykład, jakie cuda tworzyliśmy, kiedy chcieliśmy stworzyć stronę responsywną. Już nie będę tego komentował, ile nadmiarowego kodu… i weź to potem człowieku utrzymaj. No ni… Połowa znaczników to hacki na responsywność. Straszne rzeczy. I dlatego mądrzy ludzie wymyślili grid w CSSie. Z czym to się je? W telegraficznym skrócie – w arkuszu styli definiujemy sobie klasę, która przechowuje siatkę. Mówimy na ile wierszy i kolumn dzieli się owa siatka. Potem mówimy, które elementy znajdują się w kolejnych polach siatki. O, i działa. Koniec. No dobra mistrzu, a jak zamienić miejscami elementy ze sobą? Hmm no normalnie by się nie dało bez użycia JS. A tutaj… 🙂 Wystarczy zdefiniować odpowiednią regułę @media  opisującą siatkę dla danej rozdzielczości i przeglądarka sama poprzestawia elementy. Chcecie przykład? No to klikamy play 😉 Z tego też przykładu nauczyłem się używania gridów. Fajny filmik znalazłem w jutubach:

No i jeszcze polecam prezentację Mortena Rand-Hendriksena z konferencji Wordcamp Europe 2017, jakoś przypadkowo się na nią natknąłem i od razu chciałem to zaimplementować w swoim szablonie 🙂

Stylizacja

No dobrze, troszkę mechaniki omówiliśmy, czas na karoserię. Mamy w architekturze pewne style architektoniczne, czy to historyczne, np. Gotyk, barok, czy dzisiejsze (tu nie będzie przykładu, bo się na tym nie znam). Przy projektowaniu UI aplikacji też są dostępne pewne style designu. Jednym z nich jest tak zwany Material Design od Google. Na pewno go kojarzycie, chociażby z klienta Gmail w Androidzie. Sami twórcy mówią o nich tak:

We created Material Design as a metaphor to rationalize design and implementation, establishing a shared language to help teams unite style, branding, interaction, and motion under a cohesive set of principles.

We believe a better design process yields better products, which is why we’re expanding Material to be a system that supports the principles of good design and strengthens communication and productivity with new tools and inspiration. We hope these resources will help teams realize their greatest design potential, and we’re eager to see the results.

A więcej możecie przeczytać na stronie Material.io.

Mówiłem, że nie będę korzystał z bibliotek zewnętrznych, ale nie mówiłem, że nie będę się na nich wzorował (w celach edukacyjnych oczywiście). Sam Google dostarcza bibliotekę, która pozwala na łatwe użycie elementów stylizowanych na Material Design. Więcej informacji na stronie frameworku Material Design Lite.
Niestety nie nam jakiegoś mega zmysłu grafika i ciężko mi spłodzić coś, co wygląda ładnie. Dlatego wzorowanie się na powyższej bibliotece ułatwi mi uzyskanie oczekiwanych funkcjonalności oraz przy okazji dobry wygląd (chociaż nie to jest ładne, co jest ładne, tylko to, co się komu podoba).

Ale jak w ogóle pisać dobrze te CSSy? Na blogu Żanety Jażdżyk Nettecode.com we wpisie Kierunek: Web Developer cz. I jest link do bloga NaFrontedzie.pl, gdzie autor opisuje różne metodyki tworzenia CSSów. W tym projekcie najprawdopodobniej zastosuję OOCSS (postaram się, ponieważ będzie to mój pierwszy raz).

Połączenie z WordPressem

No dobrze, to załóżmy, że mamy gotową w głowie kompozycję naszej strony, tylko… jak to spiąć z WordPressem? A no należy skorzystać z API! Dla niewtajemniczonych API, to skrót od Application Programming Interface. Z polskiego na nasze jest to zbiór funkcji czy metod, które pozwalają nam uruchomić żądane funkcjonalności w danej aplikacji. WordPress również dostarcza API, które należy wykorzystać przy rozwoju szablonu. Wbrew pozorom dobry programista charakteryzuje się trudną umiejętnością korzystania z dokumentacji i wcale nie mówię tego prześmiewczo. Korzystanie z dokumentacji nie jest sztuką łatwą i potrzeba sporo praktyki, żeby sprawnie się w niej poruszać. Przy praktyce programistycznej ilość materiałów jest duża. Jednak z praktyki inżynierskiej mam doświadczenia, że często naszą jedyną deską ratunku jest dokumentacja i na jej podstawie trzeba stworzyć coś. Nie ma podpowiedzi na StackOverflow czy innych serwisach, szczególnie, kiedy wchodzimy w bardzo specjalistyczną działkę. Dlatego tutaj będzie dobra okazja do przetrenowania tego skilla 🙂 A jeden z tutoriali jutubowych do tworzenia tematów w WordPressie możecie znaleźć tutaj 🙂

Kompatybilność z przeglądarkami

Wszystko ładnie pięknie, ale czy aby na pewno wszystkie dostępne dziś przeglądarki to obsługują, o czym piszesz na początku? Jak to sprawdzić? No jest taka stronka CanIUse.com, gdzie możemy sobie wyszukać interesujące nas ficzery i zobaczyć, które wersje przeglądarki to obsługują.

A co będzie z tymi użytkownikami, którzy korzystają z IE8 przykładowo albo wyświetlają Twoją stronę na cegle? No nic. Doszedłem do wniosku, że nie będę pakował jakiś sztucznych fixów na archaiczne przeglądarki, skoro i tak wiem, że na 99,99999% żaden z odwiedzających tego bloga nie korzysta z takich archaizmów. Będę się więc starał używać nowych technologii w najczystszej postaci. Jeżeli komuś coś nie będzie działało, to zawsze można to zgłosić przez zakładkę kontakt 🙂 Zdecydowana większość cywilizowanych przeglądarek obsługuje wszystkie nowe znaczniki z HTML5 i style CSS3.

Kurcze, kurcze, ja też chcę!

Zapytasz jak zacząć. Nie będę tworzył n-tego posta w Internecie, jak zacząć zabawę z frontem. Świetną robotę zrobiła już Pani Żaneta na swoim blogu 🙂 Tam znajdziesz milion ciekawych linków, z których i ja korzystam. A jak nie, to wujek Google i trzeba poszukać 🙂 Myślę, że szukanie nie zajmie więcej niż 30 sekund 🙂

Podsumowanie

Dobra Misie kolorowe, myślę, że poruszyłem mega ważne zagadnienia, które często gdzieś umykają. Mam nadzieję, że zainteresował Cię temat i będziesz chciał pogłębić swoją wiedzę. Jeżeli chcesz się do mnie przyłączyć to śmiało daj znać! A tym czasem trzymaj się i do zobaczenia gdzieś, kiedyś, na ulicy! 🙂