Table of contents icon

Obserwuj @varjs

Jak dalej się rozwijać?

Rozdział 13

Właśnie zbudowałeś swoją, pierwszą pełnoprawną stronę internetową. Podzieliłeś umiejętnie stronę na trzy kolumny, dodałeś menu i formularz do komentowania. Kolejne kroki jakie wykonasz na swojej drodze postawisz już sam. Zapewne zapytasz teraz, co dalej? Mam dla Ciebie kilka porad.

Przede wszystkim wybierz swoją ulubioną stroną internetową i postaraj się ją odtworzyć, pisząc własnoręcznie kod od nowa. Podziel jej elementy na pojedyncze części według ich funkcjonalności. Najpierw stwórz kod HTML, a dopiero potem dodaj CSS. Zawsze pamiętaj o tej kolejności. Niezwykle ważny jest semantyczny kod HTML. Dzięki niemu inni programiści front-end (tak nazywają się osoby, zajmujące się warstwą interfejsu użytkownika, a więc językami HTML, CSS i JavaScript) będą mogli łatwo wgryźć się w Twój kod. Co więcej, Twój trud wynagrodzą wyszukiwarki internetowe - dobrze ustrukturyzowana treść pozycjonuje się w nich o wiele lepiej. Ponadto dobry HTML jest bardzo ważny dla różnych czytników, które nie obsługują CSS-a i wyświetlanie tekstu mogą oprzeć jedynie na znacznikach. Im lepiej one dobrane, tym większy komfort czytania – nikt nie chciałby przecież, by nagłówek wyświetlał się tak, jak zwykła treść.

Po skończonej pracy sprawdź, jak kod napisali autorzy oryginału. Poznawaj nowe techniki, dopytuj, bądź krytyczny.

Schematy

Bardzo ważne jest też uświadomienie sobie, że programowanie front-endu to w większości praca oparta na schematach. Każda działka (HTML, CSS oraz JavaScript, który zapewne poznasz w przyszłości) ma swoje własne niespodzianki i tajemnice. W każdej z nich czyha na Ciebie mnóstwo pułapek. W HTML jest to na przykład tzw "classitis", czyli nadmiarowe dodawanie niepotrzebnych klas. Jest też zjawisko "divitis", czyli nadużywanie elementów <div>, kiedy można je zastąpić czymś bardziej semantycznym. W takie pułapki będziesz wpadał bardzo często. Wychodząc z nich obronną reką zdobędziesz doświadczenie, które potem zaprocentuje. Nie będzie już dla Ciebie problemem to, jak ułożyć parę elementów obok siebie. Pójdziesz dalej, poszukasz sposobu, jak zrobić to w najmniejszej liczbie linii kodu. Jak ulepszyć semantykę HTML, jak sprawić, by przeglądarka wyświetliła to najszybciej. Będziesz pracować nad własnym fachem popełniając błędy i ucząc się na nich. Poznasz wzorce postępowania w danych przypadkach, które społeczność koderów HTML i CSS zdążyła wypracować przez kilkanaście lat swojego istnienia.

Trzymaj rękę na pulsie!

Po przerobieniu tej książki, warto byś sięgnął po kolejną, która opisuje wszystkie znaczniki HTML i CSS – może to być na przykład Wstęp do HTML5 i CSS3. Ja pokazałem Ci tylko sposób myślenia, pora byś nauczył się reszty tagów HTML i własności CSS. Wiedz, że to dość dynamiczne języki. Z HTML-em jest ten problem, że nie zmienia się on rewolucyjnie – często zmieniają się jednak detale i pojedyncze tagi. Warto, byś śledził grupy W3C i WHATWG, które pracują nad rozwojem tego języka. Zdarza się bowiem, że jakiś tag HTML nagle przestaje być elementem specyfikacji, więc nie należy go używać. Innym razem zmienia się jego przeznaczenie. Trzymaj rękę na pulsie!

CSSowe sztuczki

CSS to z kolei kopalnia wiedzy, wzorców i sposobów obejścia różnych problemów. Poznaliśmy jego podstawy i zasady działania. Jak zauważyłeś, jest to prosty język. Tworzysz selektor, dzięki któremu odnosisz się do tego, jak mają wyglądać dane elementy HTML. Aby zmodyfikować ich wygląd używasz jakichś własności np. height, gdy chcesz zmienić wysokość. Tych właściwości jest ich o wiele więcej. Możesz dodawać tła gradientowe, zaokrąglone rogi (poprzez border-radius), przeźroczystość (własność opacity), cienie tekstu (text-shadow), cienie elementów blokowych (box-shadow) i wiele więcej. Przejrzyj dokumentację CSS-a i poczytaj inne artykuły w sieci o CSS.

Bardzo istotne we front-endzie jest to, aby strony wyświetlały się tak samo w każdej przeglądarce. W niedalekiej historii był to dość duży problem. Wiele przeglądarek na rynku interpretowało standardy po swojemu (prym wiódł w tym Internet Explorer 6, który jest dziś owiany mroczną sławą). Dlatego też przez długi okres składanie stron polegało na wynajdowaniu różnych trików, które omijałyby niedogodności w danej przeglądarce. Najlepiej, gdyby były one semantyczne i nieinwazyjne. Dlatego też wertując archiwalne materiały (powiedzmy z 2006 roku) znajdziesz wiele technik takich jak faux columns (do uzyskania kolumn tej samej wysokości), PNGFix (wyświetlanie przeźroczystego obrazka PNG) czy clearfix, które znajdowały odpowiedź na problemy przeglądarek z tamtych lat. Część z nich jest nadal używana, jednak wiele odeszło w zapomnienie, ponieważ naprawiono błędy w popularnych przeglądarkach internetowych. Przebywając i czytając o CSS w internecie spotkasz je nie raz. Warto wtedy zapytać bardziej doświadczonego kolegę, czy jeszcze używa się danej techniki.

Historia przeglądarek

Przeglądarki poprzedniej dekady miały dużo wad. Chyba największą było to, że nie aktualizowały się automatycznie, a więc gdy chciano dodać nowe opcje w CSS, musiano czekać kilka, kilkanaście miesięcy na nową wersję przeglądarki. Wyobraź sobie, że nie możesz zastosować tła składającego się z gradientu, używając wyłącznie CSS-a. Tak, w tamtych latach to była codzienność. Trzeba było przygotować obrazek w postaci gradientu, wgrać go na serwer i ustawić go w CSS jako tło danego elementu. Robiło się to tak:

.news {
    background: url(gradient.jpg) no-repeat;
}

Dziś z kolei ustawianie tła gradientowego jest bardzo łatwe, definiuje się je w postaci własności linear-gradient:

.news {
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
}

Prefiksowe dziwolągi

Jak widać, przeglądarki internetowe cały czas ewoluują, a standardy pisania stron się zmieniają. Na przykładzie CSS-a jest to widoczne chyba najbardziej. Wyobraź sobie, że cały czas pojawiają się propozycje nowych opcji w CSS. Instytucja taka jak W3C, stojąca na straży standardów, nie może akceptować każdego pomysłu bez jego przetestowania i konsultacji. Jak to w życiu, być może istnieje lepsze rozwiązanie, może coś nie ma sensu i tak dalej. Wszystko trzeba zbadać. To trwa. Dlatego też producenci przeglądarek często wyprzedzają decyzje W3C, implementując nowe własności CSS poprzez dodanie do ich nazw przedrostki, które jednoznacznie identyfikują je z daną przeglądarką. Na przykład Chrome, gdy wprowadza jakąś eksperymentalną opcję, nazywą ją w ten sposób:

-webkit-nazwa

Wtedy, aby użyć takiej własności, musimy w CSS napisać:

.news {
    -webkit-nazwa: 20px;
}

Oczywiście -webkit-nazwa nie ma sensu i wymyśliłem to na potrzeby przykładu. Z istniejących własności można wymienić np. -webkit-box-sizing. Bywa więc, że musimy w CSS obsłużyć kilka wersji jednej własności CSS dla każdej z liczących się przeglądarek:

.news {
    -webkit-box-sizing: border-box; /* Chrome */
    -moz-box-sizing: border-box; /* Firefox */
    -ms-box-sizing: border-box;  /* Interner Explorer */
    box-sizing: border-box;
}

W powyższym przykładzie musiałem użyć aż czterech linijek. Najpierw dla Chrome, potem dla Firefoxa, następnie dla Internet Explorera, a na końcu zastosowałem nazwę bez prefiksu, na wypadek, gdyby któraś z przeglądarek przestała wspierać prefiksową wersję. Dzieje się tak, gdy W3C ostatecznie uznaje daną własność za prawidłową i wchodzi ona do standardów.

Kolory w CSS

CSS to dzisiaj naprawdę spora kopalnia pomysłów i możliwości. Same kolory można wyrazić w kilku różnych formatach. Jak zapewne zauważyłeś, w tej książce używaliśmy kolorów zapisanych w formie słownej. Wybrałem ten format, by nieco uprościć sprawę. Wiedz jednak, że najbardziej popularnym formatem kolorów jest format heksadecymalny, czyli na przykład kolor czarny zapisywany jest tak: #000000. Innym formatem jest rgb. Wtedy kolor czarny zapiszemy tak: rgb(0, 0, 0). Chcesz, aby Twoje tło było czarne i w połowie przeźroczyste? Nie ma problemu, użyjesz rgba – rgba(0, 0, 0, 0.5). W parze z selektorami używamy tego tak:

.news {
    color: #000000;
}

Wtedy wszystkie elementy .news będą miały czarny font. Kolory w tym formacie uzyskasz w każdym programie graficznym. Jeśli chcesz przetestować różne warianty bez ich instalowania, możesz wejść na przykład na ColorPicker.com i dowolnie eksperymentować. Szybko da się zauważyć o wiele więcej możliwości w stosunku do kolorów zapisanych słownie, prawda?

Responsive Web Design

Będąc przy CSSie, ostatnio bardzo modny jest temat tzw. Responsive Web Design. Chodzi tutaj o to, by strona wyglądała inaczej w zależności od rozdzielczości. Często na urządzeniach mobilnych z małym ekranem nie ma sensu pokazywać całej strony, wystarczy skupić się na treści głównej i ukryć pozostałe kolumny. Do tego służy właśnie RWD – aby komfort przeglądania strony był na jak najwyższym poziomie. Bez zastosowania technik Responsive Web Design często użytkownik (szczególnie korzystając ze smartphone’a z dość małym ekranem) musi przybliżać całą stronę. Nie jest to wygodne. W RWD piszesz w CSSie mniej więcej tak: dla rozdzielczości ekranu do 320px użyj takich i takich oto reguł. Zapisać to można tak:

@media screen and  (max-width: 320px) {
    .news {
        display: none;
    }
}

Użyliśmy tutaj tzw. "media queries". Dzięki temu na urządzeniach wyświetlaczem do 320px szerokości, elementy .news będą ukryte (display: none).

Narzędzia

Przeglądarki internetowe, oprócz stałego implementowania nowych opcji w HTML i CSS, zaczęły od pewnego czasu oferować również tzw. narzędzia developerskie, czyli wbudowane w przeglądarkę widgety, dzięki którym możesz m.in. obejrzeć swój kod HTML i zobaczyć, jakie style ustawiła im przeglądarka. A to tylko wierzchołek góry lodowej możliwości, jakie dają. Aby uruchomić je w Google Chrome, kliknij prawym klawiszem myszki na stronie i wybierz "Zbadaj element". Otworzy się wtedy nowy panel z przydatnym zestawem narzędzi o jakim właśnie wspomniałem. Spędź przy nich dłuższą chwilę – prawie wszystko można w nich zmienić, podejrzeć, zbadać. Podobne narzędzie znajdziesz w Firefoxie i Internet Explorerze.

Filozofia

Tego typu smaczków jest więcej. Gdyby spróbować je opisać, ta książka mogłaby zapewne mieć kilkaset stron. Chciałem Ci tego zaoszczędzić. Wydaje mi się, że na początek najważniejsze jest, by poznać filozofię pisania HTML-a i CSS-a, a dopiero potem poszczególne techniki, pozwalające uzyskać dane efekty. Poznając dalej te technologie zapewne dowiesz się wkrótce o innych możliwościach uzyskania trójkolumnowego layoutu czy formularza, gdzie każdy wiersz jest pod sobą. To naturalne, ponieważ technologie te są na tyle elastyczne, że możliwości jest bardzo wiele. Byle były zgodne ze standardami! Jak więc być na czasie i dalej się rozwijać?

Miejsca w sieci

Zadawaj pytania. Bądź aktywny na forach internetowych i grupach na Facebooku. Odwiedź forum.webhelp.pl, ForumWeb oraz grupę HTML5 i CSS3 - pierwsze kroki. Gdy poznasz JavaScript, niezbędna będzie wizyta na JS News na Facebooku. To miejsca, gdzie dyskutują początkujący i doświadczeni developerzy.

Uczęszczaj na konferencje, gdzie możesz spotkać osoby pracujące nad kształtem dzisiejszego internetu (choćby z Mozilli czy z Google). W Polsce organizuję Front-Trends, która trwa 3 dni. Spotkasz na niej programistów z Polski i ze świata, którzy chętnie podzielą się z Tobą wiedzą i doświadczeniem.

Bądź częstym gościem różnych meetupów technologicznych, które są darmowe. W Polsce bardzo prężnie działa meet.js, który odbywa się w 8 miastach w Polsce. Występują na nich prelegenci, którzy chcą dzielić się wiedzą z zakresu HTML5, CSS3 i JS. Każde wystąpienie trwa od 10 do 20 minut. Każdy może się zgłosić, także Ty! Oprócz tego, warte odwiedzenia są również DevMeetingi, darmowe warsztaty z technologii webowych.

Próbuj czytać blogi o HTML i CSS. Wejdź na mojego bloga - znajdziesz tam wiele artykułów na temat HTML, CSS i JavaScript. Sprawdź o czym piszą na CSS Tricks, które jest świetnym centrum artykułów o różnych trikach w CSS. Inne wartościowe blogi i serwisy to:

Zagraniczne blogi:

Zagraniczne serwisy:

Polskie blogi:

Polskie serwisy:

Inne:

Próbuj coraz to nowych konceptów. Zainteresuj się bardziej poniższymi tematami. Warto je wygooglować:

Czytaj książki. Na początek polecam Dive Into HTML5 i HTML5 For Web Designers. Przejrzyj moją prezentację na temat tego, jak łatwe i przystępne są technologie webowe. Wkrótce zapewne wydam kolejny poradnik – zapisz się do newslettera, by otrzymać informacje o nowych materiałach, które pomogą Ci w nauce HTML5, CSS3 i JavaScript:

Poznaj więcej tagów HTML5 i próbuj nowych rzeczy z CSS3. Sprawdź, co jest obecnie możliwe we współczesnych przeglądarkach na Caniuse.com. Kiedy będziesz chciał sprawdzić, jak działa dana konstrukcja HTML-a lub CSS-a, sprawdzaj szczegóły na Mozilla Developer Network. Nie ufaj innym stronom, uważaj na w3schools, które mimo, że nazywa się podobnie do W3C, często zawiera niesprawdzone informacje. Ten rynek szybko ewoluuje, bądź na czasie. Załóż konto na Twitterze i obserwuj na nim osoby ze świata web developmentu. Dodaj też konto na GitHubie, publikuj tam kod i patrz, jak robią to inni. Próbuj różnych rzeczy na codepen.io i twórz własne. Sprawdź JSBin.com, gdzie możesz pisać kod i automatycznie dostać podgląd tego, jak wyświetliłaby go przeglądarka. Jest też w sieci wiele serwisów, które nauczają technologii, choćby Codecademy.com. Wypróbuj je.

Postaw na język angielski, to oficjalny język sieci. Dzięki niemu wszystko stanie się łatwiejsze. Zawodowo i prywatnie.

Najważniejsze jednak, byś nie przestawał się rozwijać.

PS Jeśli podobała Ci się książka, polub mój profil na Facebooku i podziel się opinią!