Dobre lekcje układu. Układ adaptacyjny: lekcje czy prosto do bitwy? Gdzie jest granica pomiędzy układem, projektowaniem stron internetowych i front-endem?

Witam, nazywam się Alexander Zelenin i jestem programistą stron internetowych.
Często spotykałem się z opinią, że układ graficzny to domena początkujących frontenderów. Chociaż tak naprawdę jest to najważniejsza część każdego (prawie) projektu internetowego. To właśnie widzą użytkownicy jako pierwsi. Obecnie wysokiej jakości układ (zwłaszcza projekt blokowy) w dużym projekcie wymaga dużej liczby różnych umiejętności.

W tym artykule przedstawiam plan rozwoju dla projektanta układu

[duże po kliknięciu]
Oczywiście nie jest to schemat kompleksowy i jedyny poprawny. Istnieje cała góra powiązanych umiejętności, odpowiednich technologii i tak dalej. Gradacja jest subiektywna.

Od razu dodam, że w artykule nie będzie konkretnych linków do materiałów edukacyjnych. Chętnie dodam uzupełnienia w komentarzach.

Czego oczekujemy?

Przede wszystkim należy zrozumieć, czego oczekujemy od osoby na każdym poziomie. Twoje oczekiwania mogą się różnić.
Junior- zna główne tagi, potrafi poprawić treść na gotowej stronie html, wie jak poprawnie sformatować tekst, bez problemu wstawia osadzony element (wideo z YouTube, mapa Yandex), pracuje przez system kontroli wersji tylko dla siebie (mistrz, 1 współpracownik). Potrafi od zera wymyślić coś prostego i to nawet nie zadziała (dla niego osobiście). Generalnie nie jest to jednostka samodzielna i wymaga przywództwa z góry.
Środek- mniej lub bardziej autonomiczna jednostka (lub całkowicie autonomiczna w przypadku małych i średnich projektów). Średniej wielkości witrynę internetową można dobrze zaprojektować i będzie ona poprawnie wyświetlana we wszystkich aktualnych wersjach przeglądarek. Rozumie, jak działają silniki szablonów i potrafi z nich korzystać (pod warunkiem, że dostarczona jest reszta kodu). Potrafi planować i dokumentować swoją pracę oraz szacować terminy. Rozumie znaczenie utrzymywania stylu kodu. Rozumie, dlaczego istnieją systemy gridowe i frameworki CSS. Potrafi wydobyć wszystkie niezbędne informacje z projektów projektanta. Potrafi współpracować z małym zespołem, tworzyć oddziały i pobierać żądania.
Senior- potrafi zaprojektować układ blokowy dla dużego projektu. Wie, jak unikać powtórzeń i obszarów problematycznych, gdy inni programiści używają jego kodu. Potrafi rozkładać złożone problemy i kompetentnie formułować zadania. Wie, jak zastosować co najmniej jedną metodykę rozwoju (np. BEM). Może sprawić, że projekt zostanie otwarty tak szybko, jak to możliwe. Dobrze rozumie kilka popularnych silników szablonów. Potrafi pisać kolektory i automatyzować proces z tym związany. Może przeprowadzać recenzje kodu i nadzorować innych twórców kodu.
Rozważmy teraz nieco bardziej szczegółowo, co zawiera każdy z bloków na każdym poziomie.

Junior

HTML- znajomość podstawowych tagów i atrybutów. Zrozumienie, jak to napisać w zasadzie.
Typografia- Możliwość formatowania tekstu. Tekst jest podstawą niemal każdego projektu. W razie potrzeby wstawianie spacji nierozdzielających, wyróżnianie pogrubieniem, kursywą, skrótem i tak dalej. Możesz skorzystać z drukarki lub podobnej usługi, ale będziesz w stanie zrozumieć wynik.
Semantyka- zrozumienie, że istnieją pewne znaczniki dla określonych zadań. Dowiedz się, jak wybrać odpowiedni tag.
Głoska bezdźwięczna- jakie rodzaje multimediów można osadzić na stronie.
Iframe- osadzanie widżetów innych firm (wideo, audio, mapy itp.).
Audio Video- możesz odłożyć naukę, bo częściowo rozwiązany za pomocą elementu iframe. Dowiedz się, jakie formaty może odtwarzać przeglądarka, jak zaprojektować odtwarzacz i tak dalej.
Obrazy- jakie formaty graficzne i w jakiej formie odbiera przeglądarka. Plusy i minusy korzystania z niektórych formatów.
Raster-jpg, png, gif. Zrozumieć różnicę pomiędzy formatami i móc zastosować to, czego i gdzie potrzebujesz.
SVG- możesz odłożyć naukę, bo używane rzadziej, niż byśmy tego chcieli. Poznaj zalety, wady, ograniczenia itp.
Czcionki- możesz przełożyć naukę. To właściwie dość złożony temat i ogólnie początkującym radziłbym używać czcionek systemowych. Możliwość ładowania czcionek, optymalizacji wyświetlania i minimalizowania opóźnień renderowania dzięki niestandardowym czcionkom.
Układ stołu- opcjonalny. Dla tych, którzy chcą w przyszłości tworzyć wysokiej jakości biuletyny e-mailowe.
CSS1- czcionki, kolory, wyrównanie, rozmiary.
CSS 2.1- kontrola zachowania bloku, pozycjonowanie, pełny projekt.
Selektory- proste selektory tagu, klasy, elementu zagnieżdżonego. Proste pseudoselektory, takie jak:hover.
Nazewnictwo- jak nazwać zajęcia, żeby nie bolało potwornie.
Układ blokowy- podziel obraz na świadome bloki, zaimplementuj bloki w HTML i zaprojektuj je za pomocą CSS.
Przeglądarki- możesz przełożyć naukę. Jakie przeglądarki istnieją, jaka jest ich różnica.
Narzędzia deweloperskie- możesz przełożyć naukę. Użyj narzędzi przeglądarki, aby zrozumieć problemy z wyświetlaniem.
Redaktorzy tekstu- jakie edytory tekstu są dostępne dla programistów i dlaczego. SublimeText i Notepad++ podano jako przykłady, ponieważ są mi znane. Potrafić konfigurować w nich podstawowe rzeczy, takie jak wcięcia, podziały wierszy i tak dalej.
Systemy kontroli wersji- Osobiście uważam, że możliwość wykorzystania ich, choćby indywidualnie, dla siebie, jest bardzo ważna. Zrozum, dlaczego te systemy są tworzone i czym są.
Git- rozumieć ogólnie zadanie i zasady najpopularniejszego systemu kontroli wersji.
Githuba/bitbucketa- móc korzystać z jednej z popularnych platform dla gita.
Kasa/zatwierdzenie/push/pull- podstawowe operacje do użytku osobistego.
Chować na potem- do tymczasowego przechowywania aktualnie niepotrzebnych danych.
10 prac- wykonaj co najmniej 10 prac w różnych wzorach. Możesz zrobić testy, to nie ma znaczenia. Ważne jest, aby były one kompletne w ramach aktualnej wiedzy.

Środek

CSS3- gradacje, cienie, wygładzanie, filtry, transformacje.
Zaawansowane selektory- elementy następujące po zdefiniowanym (+), zdefiniowane przez liczbę (n-te dziecko), Shadow-dom, przed/po i tak dalej.
Animacje- opcjonalny. przejście i animacja. Płynne przejścia, animacje. Zrozumienie ograniczeń i wad.
Siatki- dlaczego istnieją, jak je zbudować, jakie gotowe rozwiązania są dostępne. Możesz na przykład spojrzeć na siatkę Flexbox lub dowolną inną siatkę, którą znajdziesz.
Frameworki (CSS)- dlaczego są potrzebne, jak z nich korzystać. Wskazane jest, aby nauczyć się korzystać z przynajmniej jednej studni. Bardzo przydatne przy prototypowaniu. Znacząco poprawia jakość projektu przy braku budżetu na projekt (nie unikalny, ale użyteczny).
Preprocesory CSS- możesz przełożyć naukę. Optymalizacja pracy, piękniejszy i czytelniejszy kod. Zmienne, miksy itp. Pracuj z jednym lub kilkoma popularnymi preprocesorami, takimi jak SASS, LESS, Stylus.
Zapytania mediów- możesz przełożyć naukę. Wyświetlaj żądane style w zależności od warunków (urządzenie, rozmiar ekranu, gęstość pikseli, wersja do druku itp.).
Styl kodu- zrozum, dlaczego istnieją konwencje stylistyczne, przestudiuj i zacznij je stosować (polecam z AirBNB).
SUCHY/CAŁOŚĆ/STAŁY- możesz przełożyć naukę. Zrozum ważne zasady rozwoju, które znacznie upraszczają dalsze wsparcie projektu.
OOCSS- opcjonalny. Zrozum, czym jest CSS zorientowany obiektowo i do czego służy. Jest używany w tej czy innej formie w wielu projektach (aczkolwiek bez zrozumienia, że ​​to jest to). Najlepiej nauczyć się projektować. Może być świetny do dużych projektów.
Dokumentacja- rozumieć, co i jak dokumentować. Dokument. Możesz to odłożyć, ale pamiętaj o przestudiowaniu przeceny w przyszłości.
Planowanie- nauczyć się szacować terminy na podstawie obrazu i ustalać kolejność prac.
Rozkład- możesz przełożyć naukę. Naucz się dzielić zadanie na podzadania. To trudniejsze niż się wydaje :-)
Ustalać cele- możesz przełożyć naukę. Naucz się jasno opisywać zadania tekstem, aby inni programiści, także ci z mniejszymi kwalifikacjami, jasno zrozumieli, co należy zrobić, aby je wykonać.
Flexbox- zrozumienie modelu, umiejętność jego pełnego zastosowania.
Układ listu- opcjonalny. Ogólnie rzecz biorąc, umiejętność nie jest zbędna. Zapoznaj się z funkcjami systemów pocztowych, zachowuj dobry wygląd i nie wpadaj w spam (jeśli nie jest to spam).
Polifilly- zrozumieć, jak korzystać z najnowszych funkcji programistycznych, zachowując jednocześnie kompatybilność wsteczną. Poznaj zalety i wady tego podejścia.
Układ wieloplatformowy- zrozumieć, co należy zrobić, aby projekt dobrze wyglądał nie tylko pod Windows, Linux i Mac, ale także pod SmartTV czy PS.
Układ dla różnych przeglądarek- zrozumieć różnice w renderowaniu przeglądarki i sprawić, aby wyświetlały się tak samo. Strona CanIUse bardzo w tym pomaga.
Układ mobilny- możesz przełożyć naukę. Zrozum ograniczenia platform mobilnych. Korzystaj mądrze z ograniczonej przestrzeni.
Optymalizacja- możesz przełożyć naukę. Zrozum „cenę” niektórych technik. Zrozumienie etapów wyświetlania witryny użytkownikowi. - możesz przełożyć naukę. Optymalizacje związane z rozmiarem, pamięcią podręczną, kompresją, łączeniem zasobów itp.
Wykonanie- możesz przełożyć naukę. Optymalizacje związane z szybkością renderowania po załadowaniu.
SEO- możesz przełożyć naukę. Przynajmniej podstawowa wiedza na temat działania wyszukiwarek. Możliwość „pomocy” wyszukiwarce w zorientowaniu się, gdzie szukać i co jest ważne.
Silniki szablonów- zrozumieć, w jaki sposób można ponownie wykorzystać kod, elementy grup i strony układu. Zdecydowanie zaleca się nauczenie renderowania zarówno po stronie serwera, jak i po stronie klienta. Dotyczy to również szablonów w „czystym” języku (takich jak proste wstawki PHP). Nie interesuje nas praca „przed” (przepływ danych) silnika szablonów.
PHP- możesz przełożyć naukę. Zrozumienie podstawowej składni i możliwość wprowadzenia drobnych zmian związanych z projektem strony.
CMS-a- możesz przełożyć naukę. Dowiedz się jakie istnieją CMS-y i po co zostały stworzone. Naucz się pisać szablony przynajmniej dla jednego (polecam Wordpress).
JavaScript- możesz przełożyć naukę. Naucz się podstawowej składni, zrozum, jak dołączać proste procedury obsługi i wykonywać prostą pracę z DOM.
jQuery- możesz przełożyć naukę. Naucz się oszczędzać dużo czasu na rozwiązywanie dość typowych problemów, korzystając z wtyczek do najpopularniejszej biblioteki js (oczywiście po wanilii.js).
WęzełJS- możesz przełożyć naukę. Dowiedz się, jak uruchomić prosty serwer, dystrybuować dane statyczne i renderować po stronie serwera. Możesz użyć Expressu lub dowolnego innego frameworka.
Montaż- opcjonalny. Dowiedz się, jak złożyć projekt z kilku plików CSS/HTML w to, czego potrzebujesz. Polecam zapoznać się przynajmniej z chrząknięciem i przełykaniem, jako przedstawiciele „różnych” obozów.
IDE- opcjonalny. Dowiedz się, dlaczego potrzebne są środowiska IDE i jak z nich korzystać. Przełącz się na używanie IDE, aby zaoszczędzić czas. Ważne: nauka IDE jest porównywalna z pełną nauką języka programowania i inwestowanie w to dużej ilości czasu może nie być tego warte. Osobiście korzystam z edytorów tekstu (i włączam IDE tylko przy bardzo dużych projektach).
Rozgałęzianie- naucz się zarządzać gałęziami w git.
Łączyć- naucz się łączyć gałęzie w celu rozwiązywania konfliktów.
Pobierz/Rebase- dowiedz się, do czego służą, kiedy ich używać i zacznij z nich korzystać, jeśli zajdzie taka potrzeba.
Edytor graficzny- dowiedzieć się, czym są i dlaczego. Czym wektor różni się od rastra? Ważne jest, aby zrozumieć redaktora przynajmniej na poziomie „czytania” układu od projektanta. Wybierz odpowiednią czcionkę, rozmiar, kolor itp. Nie z widzenia, ale na pewno. Polecam pracować z co najmniej 1 ratrem (Photoshop) i 1 wektorem (Figma).
50 prac- na koniec etapu będziesz miał około 50 różnych prac prezentujących umiejętności z badanych dziedzin.

Senior

Chociaż na diagramie ta grupa wydaje się niewielka, w rzeczywistości jest największa. Ponieważ W tym momencie konieczne jest przestudiowanie wszystkiego, co zostało odłożone.
Układ adaptacyjny / responsywny- zrozumieć najwyższy poziom i połączyć całą zdobytą dotychczas wiedzę. Projekt powinien wyglądać dobrze wszędzie i na wszystkim (w granicach rozsądku).
Stopniowa degradacja/stopniowa poprawa- zrozumieć, co to jest i dlaczego. Używać.
Gitflow- potrafić wytłumaczyć innym programistom jak tworzyć gałęzie, gdzie je łączyć, jak dokonać przeglądu kodu (oczywiście układu, nie kodu).
BEM- opcjonalny. Zrozum metodologię, która pozwala tworzyć nieograniczoną liczbę dużych projektów, tak aby przy minimalnej synchronizacji różne zespoły mogły korzystać ze swoich bloków. Istnieją inne metodologie, które nie dają gorszych wyników. W tym momencie będziesz już o nich wiedział w taki czy inny sposób i będziesz mógł, jeśli chcesz, je przestudiować.
100 prac- mają w sumie sto prac prezentujących różne nabyte umiejętności. W rzeczywistości wszystko to jest warunkowe. Możesz mieć w swoim portfolio jedną pracę (składającą się z różnych części), która już pokaże, że niczego się nie boisz.

Wniosek

W rzeczywistości wiele z tych tematów jest małych. Jednak trzymanie w głowie wielu różnych czynników jest bardzo trudne. W ciągu 15 lat komunikowałem się z mniej niż dziesięcioma projektantami układów (i w ogóle programistami), których określiłbym jako Seniorów (dobrych projektantów i programistów było znacznie więcej).
Całkiem możliwe, że spędzisz rok na studiowaniu i ćwiczeniu samego układu od zera (lub więcej, jeśli zajmiesz się projektowaniem komponentów).

Mam nadzieję, że tym, którzy są na początku swojej drogi, schemat podpowie im, gdzie jeszcze mogą się poruszyć i że nie trzeba od razu (albo w ogóle nie ruszać się w tym kierunku) wskakiwać w programowanie.

Planuję także stworzyć pełnoprawny darmowy kurs ze szczegółowym omówieniem każdego z tematów prostokąta ze schematu. Chętnie otrzymam sugestie, recenzje, życzenia i tak dalej.
Kurs będzie prawdopodobnie miał formę lekcji wideo z pełnym tekstem i powielaniem grafiki. Jeśli wszystko pójdzie dobrze, w przyszłości dodam linki w komentarzach. Dodaj tagi

Od autora: Cześć przyjaciele! Podobnie jak ludzie, strony internetowe mają swój własny szkielet, który można zobaczyć w ich kodzie. Zwykły użytkownik „spacerując” po Internecie raczej nie spojrzy na kod HTML. Ale nie projektanci układu – oni zawsze są zainteresowani obejrzeniem pracy innych osób. Tworzenie kodu, który jest schludny, zrównoważony i działa we wszystkich przeglądarkach, jest sztuką. Dzisiaj porozmawiamy z Tobą o tym jak to ogarnąć, czyli inaczej mówiąc jak szybko i skutecznie nauczyć się układu strony internetowej.

Gdzie zaczyna się układ?

Układ strony internetowej to opis jej elementu wizualnego za pomocą kodu programu. Jednocześnie strona musi wyglądać i działać poprawnie na każdej przeglądarce (być kompatybilna z różnymi przeglądarkami). Naukę projektowania stron internetowych od podstaw warto rozpocząć od samodzielnego stworzenia układu PSD, mimo że teoretycznie powinien on być stworzony przez projektanta stron internetowych.

Głównym zadaniem projektanta układu jest obróbka materiału, który do niego dociera w postaci tekstów, obrazów, katalogów itp., i przekształcenie go w strony internetowe w oparciu o zatwierdzony projekt strony internetowej.

Wyobraź sobie jednak, że jesteś projektantem układu „2 w jednym” i z jakiegoś powodu musiałeś zaprojektować układ zamiast projektanta, który nie przejmuje się Twoimi problemami.

Aby szybko nauczyć się rysować układy, niezależnie od tego, jak banalnie to zabrzmi, wystarczy je dużo rysować. Bardzo pomoże Ci także ciągłe przyglądanie się pracy innych osób. Jednocześnie zwróć uwagę na wszystkie drobne szczegóły, jakie kolory, gradienty, czcionki, wcięcia itp. Są użyte.

Z biegiem czasu zaczniesz sama odczuwać, co wygląda pięknie, a co nie. Na samym początku możesz po prostu przejąć i skopiować np. elementy interfejsu innych osób. To skłoni Cię do zastanowienia się nad tym, jak te właśnie elementy są zbudowane i z czego są wykonane. A wtedy piękne projekty nie będą już dla Ciebie czymś mitycznym, bo będziesz wiedziała, jak stworzyć coś podobnego.

Narzędzia do tworzenia układu strony internetowej

Jeśli chodzi o narzędzia, wielu projektantów stron internetowych używa programu Adobe Photoshop do tworzenia interfejsów. Dzięki temu programowi możesz zrobić wszystko, co chcesz.

Są ludzie, którzy pracują wyłącznie z grafiką wektorową i używają programu Adobe Illustrator do tworzenia układów.
Jeszcze jednym edytorem, którego nie próbowałem, ale który podobno jest całkiem godną alternatywą dla powyższych, jest Sketch, ale działa tylko na Mac OS.

Spotkajmy się - HTML

Kolejnym krokiem po narysowaniu układu jest jego układ i utworzenie szablonu HTML. HTML to język używany do oznaczania dokumentów w Internecie, interpretowany przez przeglądarki w celu łatwego wyświetlenia jako dokumentu.
Za pomocą znaczników HTML zaznaczamy, gdzie na stronie internetowej pojawi się tekst, obrazy, przyciski i w jakiej kolejności będą się pojawiać obok siebie. Głównymi pojęciami w tym języku są tagi, atrybuty, elementy i byty.

Najbardziej podstawowy zasób sieciowy to nic innego jak zestaw stron HTML. Jeśli witryna jest statyczna, to po ułożeniu otrzymasz jej ostateczną wersję, a nie tylko szablon. Obecnie takie miejsca są naturalnie bardzo rzadkie. Wszystkie współczesne strony internetowe są generowane dynamicznie, przy użyciu pewnego rodzaju logiki po stronie serwera, którą albo piszesz sam, albo korzystasz z gotowych za pomocą jakiegoś CMS (systemu zarządzania treścią).

Bez tej logiki serwera większość usług online, z których korzystamy na co dzień i do których jesteśmy przyzwyczajeni, nie byłaby możliwa. Jeśli chodzi o HTML, jest to całkowicie prosty język.

W RuNet znajduje się ogromna liczba płatnych lekcji na temat projektowania stron internetowych i innych materiałów z przyzwoitą bazą szkoleniową. Moim zdaniem samodzielna nauka tego języka nie stanowi żadnego problemu.

Coraz lepiej — CSS

Gdy tylko opanujesz podstawy HTML, możesz od razu przystąpić do nauki CSS (kaskadowych arkuszy stylów), które pozwalają na ustawienie czcionek, kolorów i lokalizacji poszczególnych bloków strony.

Jeśli chodzi o CSS, mogę polecić dobry, który pomoże Ci zbudować karierę jako projektant układu, nawet jeśli nie masz podstawowej wiedzy na temat projektowania i układu stron internetowych.

Chcę Cię jednak przestrzec, że szkolenie na projektanta stron internetowych nie jest zadaniem łatwym. W układzie jest wiele subtelności i niuansów. Ogólnie rzecz biorąc, aby móc spojrzeć na układ i od razu wyobrazić sobie hierarchię jego elementów, jak dokładnie można je ułożyć i przy użyciu jakich właściwości, wszystko to wymaga dużego doświadczenia praktycznego.

Czy konieczna jest nauka wszystkich tagów, atrybutów i właściwości HTML/CSS?

W HTML istnieje wiele różnych tagów i atrybutów, a w CSS właściwości, które mogą mieć różne znaczenia. Dlatego wielu początkujących nurtuje pytanie: od czego zacząć projektowanie strony internetowej i czy trzeba zapamiętywać wszystkie te wartości, tagi i właściwości?

Oczywiście, jeśli masz wyjątkową pamięć fotograficzną, nie będzie ci trudno nauczyć się tego wszystkiego, a jednocześnie trzech tomów Wojny i pokoju. W przeciwnym razie nie ma potrzeby zapamiętywania wszystkich tych słów.

Na początku, gdy dopiero zaczynasz przygodę z CSS, nadal będziesz przyglądać się działaniu każdej właściwości i działaniu każdej wartości właściwości. Z biegiem czasu zrozumiesz, co możesz stworzyć za pomocą kaskadowych arkuszy stylów, a niektóre z tych właściwości/wartości utkwią Ci w głowie. No chyba, że ​​cierpisz na amnezję, oczywiście.

To samo dotyczy wszelkich języków, w tym JavaScript, PHP itp. Wszystko, czego często używasz, zostanie zapamiętane samo w sobie. W katalogu znajdziesz wszystko, czego rzadko używasz, a jest ich mnóstwo w Internecie. Nie ma w tym nic wstydliwego i powiem Ci w tajemnicy, że wszyscy webmasterzy tak robią.

Upraszczamy proces układania

W przypadkach, gdy trzeba szybko stworzyć jakiś interfejs lub prototyp strony internetowej, istnieją frameworki CSS, takie jak Bootstrap. Pozwala zostać webmasterem, programistą stron internetowych i projektantem układu w jednym, bez znajomości arkuszy stylów, języków programowania i znaczników hipertekstowych.

Kiedy już dobrze opanujesz CSS i zaczniesz tworzyć coś unikalnego, możesz nie mieć już wystarczającej elastyczności tego języka i będziesz chciał użyć jakiegoś preprocesora CSS. Preprocesory usuwają wszystkie śmieci z kodu CSS, czynią go czystszym i bardziej logicznym oraz zwiększają stopień abstrakcji za pomocą zmiennych i innych „sztuczek”. Najpopularniejsze preprocesory to LESS, Sass i Stylus.

Akrobacje - JavaScript

Kiedy będziesz brać udział w bardziej zaawansowanych lekcjach projektowania stron internetowych, natkniesz się na elementy JavaScript osadzone w kodzie HTML, które czynią strony internetowe interaktywnymi. Jeśli planujesz zajmować się nie tylko Back-endem, ale także Front-endem, to musisz znać JavaScript na bardzo dobrym poziomie.

Oprócz samego języka musisz znać całą istniejącą wokół niego infrastrukturę (biblioteki, frameworki, interfejsy przeglądarek itp.). Opanowanie wszystkich tych elementów może zająć od roku do nieskończoności (w zależności od tego, czy masz życie osobiste).

Podsumujmy to

Tak więc, jak już, mam nadzieję, zrozumiałeś, projektant układu to bardzo ważny i starożytny zawód internetowy, od którego zależy:

prędkość ładowania witryny;

adekwatność jego wyświetlania w różnych przeglądarkach;

możliwość dostosowania do różnych ekranów użytkownika;

zgodność ze standardami HTML i wymaganiami wyszukiwarek.

To wszystko na teraz. Nie zapomnij zasubskrybować aktualności na naszym blogu, aby nie przegapić całej zabawy związanej z nauką projektowania stron internetowych od podstaw.

Do zobaczenia ponownie, drodzy koledzy i ci, którzy dopiero rozpoczynają tę trudną, ale bardzo ekscytującą ścieżkę tworzenia stron internetowych!

Jest dość stabilny, nic więc dziwnego, że rośnie liczba osób pragnących opanować to rzemiosło. Co więcej, moim zdaniem jest to jedna z najłatwiejszych „drog do wejścia do IT”. Choć trzeba zrozumieć, że aby uzyskać dobre rezultaty trzeba zostać profesjonalistą – oprócz posiadania wiedzy trzeba stale systematyzować i unowocześniać swoje umiejętności, zawsze być „na fali” i stosować wyłącznie odpowiednie, nowoczesne metody.

Jak w każdym innym zawodzie, naukę projektowania stron internetowych zaczynamy od podstaw – od podstawowych pojęć i teorii. Porozmawiamy o nich dzisiaj. W szczególności rozważę super przydatną usługę Interneting is Hard, którą w 100% polecam wszystkim początkującym.

Nie wiem, czy na współczesnych uczelniach są podobne kierunki, ale myślę, że prerogatywą w tym zakresie są specjalistyczne kursy online lub samodzielne studiowanie układu. Pierwsza metoda oferuje bardziej kompleksowe i poważne podejście, ale druga jest całkowicie bezpłatna. Biorąc pod uwagę rozwój blogów tematycznych i kanałów wideo, obecnie nie ma problemów ze znalezieniem informacji.

Osobiście zaczynałem od prostych (i papierowych) książek o HTML/CSS, potem były lata szkoleń i z czasem zdecydowałem się utrwalić/usystematyzować wiedzę za pomocą kilku kursów. Jest w czym wybierać, chociaż nie wszystkie opcje są opłacalne. Odbyłem szkolenie online z zakresu układu w firmie Netology. Obecnie trwają nabory do kolejnej grupy.

Zaletą kursów jest to, że pozwalają one na stopniowe i skuteczne zdobywanie wiedzy poprzez:

• wykłady informacyjne opracowane przez czołowych ekspertów i praktykujących projektantów układów;
• jasne i dobrze zilustrowane przykłady;
• zadania praktyczne mające na celu utrwalenie materiału.

W szczególności w Netology wszystko odbywa się w formie webinarów z możliwością zadawania pytań. Jest praca domowa, praca dyplomowa i zaświadczenie o ukończeniu szkolenia. Krótko mówiąc, wszystko jest poważne. Takie dodatkowe funkcje sprawiają, że kursy online są bardziej „opłacalne”, a koszty to po prostu inwestycja w siebie.

W razie wątpliwości poszukaj bezpłatnych materiałów na niektórych stronach - z reguły możesz w ten sposób uzyskać kilka zajęć lub artykułów edukacyjnych. Oczywiście istnieją dziesiątki innych edukacyjnych zasobów internetowych, za dostęp do których nie trzeba płacić.

Internet jest trudny — usługa nauki układu

Na koniec przejdźmy do projektu Interneting is Hard – sprawa jest naprawdę bardzo fajna! Jest to pełnoprawny, kompleksowy kurs opanowania HTML i CSS dla początkujących, którzy nigdy nie próbowali szczegółowo zrozumieć struktury stron internetowych i ich rozwoju. Jeśli nie wiesz od czego zacząć naukę układu, na 100% przyjdź tutaj.

Na początek wystarczy motywacja i znajomość języka angielskiego. Nie będzie problemów z kwestiami organizacyjnymi - programiści opracowali coś w rodzaju „programu nauczania”, który obejmuje:

• 14 rozdziałów ze stopniowym pogłębianiem materiału;
• 284 przejrzyste przykłady kodu;
• wykresy i wykresy;
• prawie 43 tysiące słów;
• nowoczesne technologie (tak, jest też Flexbox).

Funkcje i wskazówki dotyczące usługi

Proces uczenia się układu HTML w Internecie jest trudny, ma kilka zalet w porównaniu z innymi podobnymi projektami:

1. Piękne diagramy ilustrują trudne aspekty tematu, dzięki czemu trudne do zrozumienia struktury stają się jasne i proste. Zamiast gromadzić w głowie mnóstwo nieznanych koncepcji, wystarczy je zwizualizować w najbardziej podstawowy sposób, jak to robią autorzy kursu.

2. Proces szkolenia obejmuje wszystkie nowoczesne techniki układu: typografię internetową, semantyczny HTML, tworzenie responsywnych projektów i ilustracji, a także Flexbox. Pomogą początkującemu stać się poszukiwanym specjalistą, a profesjonalistom odświeżyć swoją wiedzę;

3. Ilustrujące przykłady demonstrują podstawowe koncepcje materiału prezentowanego w ramach konkretnych scenariuszy. Oznacza to, że użytkownik nie musi czytać niekończących się „płócien” tekstu. Takie podejście niezmiennie prowadzi do nudy, która ostatecznie prowadzi do porzucenia nauki.

Po co 2-3 akapitach następuje pisanie kodu i prezentacja jego działania. Tak przyszły specjalista zdobywa swoją pierwszą praktykę w edytorach tekstu i sprawdzaniu wyników w przeglądarce;

4. Ta opcja nauki projektowania stron internetowych jest całkowicie bezpłatna. Rozpoczynając naukę HTML, wiele osób wciąż ma wątpliwości, czy naprawdę chcą to robić. A jeśli płatne kursy mogą sprawić, że będziesz żałować straconych pieniędzy, Internet jest trudny zapewni ci maksymalną wiedzę, nie prosząc o dolara w zamian.

Sekcje do nauki układu krok po kroku

Jak wspomniałem powyżej, „program nauczania” składa się z 14 bloków tematycznych. Przyjrzyjmy się im szybko:

1. Wstęp. Część wprowadzająca wyjaśniająca, czym jest HTML, CSS i . Wyjaśnia także różnice pomiędzy frameworkami i językami, a także pokazuje, jak pracować z edytorem tekstu ATOM.
2. Podstawowe strony internetowe. Rozdział drugi ilustruje strukturę podstawowej strony internetowej. Tutaj pokazano strukturę HTML – „szkielet” witryny. Odwiedzający dowie się po co potrzebne są tagi, czym są i do czego każdy z nich jest przeznaczony.
3. Linki i obrazy. Znając podstawy projektowania, trzecia część wprowadzi użytkownika w porządkowanie obrazów i łączenie ze sobą stron internetowych.
4. Witaj CSSie. Następnie pojawiają się tak zwane arkusze stylów. Koncepcja ta obejmuje wszystko, co jest związane z projektowaniem: czcionkę, kolor, lokalizację, kształt i rozmiar tekstu.
5. Model pudełkowy. Piąty rozdział programu nauczania kontynuuje temat projektowania, mówiąc o „blokowym” modelu treści. Przyszli projektanci układu zapoznają się z takimi kwestiami, jak marginesy, obramowania, marginesy wewnętrzne i treść.
6. Selektory CSS. Po polach następują selektory - podstawa CSS. Korzystając z przykładów kodu w edytorze, twórcy kursu uczą prawidłowego stosowania stylów.
7. Pływa. Część siódma rozwija to, czego dowiedzieliśmy się o zarządzaniu rozmiarami bloków i obszarami wokół nich. Poświęcony jest pojęciu przepływu na stronie internetowej (Float) i opisuje niuanse pracy z siatką serwisu.
8. Flexbox. Po dotarciu na równik programu nauczania zapraszamy do zapoznania się z Flexboxem. Jest to nowoczesne narzędzie do tworzenia układu, które zapewnia pełną kontrolę nad wyrównaniem, kierunkiem, kolejnością i rozmiarem bloków. Swoją drogą ostatnio mówiłem o jeszcze fajniejszej rzeczy.
9. Zaawansowane pozycjonowanie. Dalej jest materiał bardziej złożony – zaawansowane pozycjonowanie i jego główne typy: względne, absolutne i stałe. Chociaż, pamiętam, na kursach studiowaliśmy tę funkcję razem z Float i oczywiście przed Flexboxem.
10. Elastyczny projekt. Sekcja dziesiąta wyjaśnia podstawy i rolę responsywnego projektowania strony internetowej. Teraz nie możesz bez niego żyć.
11. Responsywne obrazy. Lekcja poświęcona jest obrazom adaptacyjnym, ich skalowaniu, reżyserowaniu i tworzeniu alternatywnych formatów za pomocą specjalnych funkcji.
12. Semantyczny HTML. Rozdział dwunasty powraca do podstawowych pojęć HTML, ukazując go z semantycznego punktu widzenia. Tutaj czytelnik zapoznaje się z elementami „przekrojowymi”, nowymi znacznikami i ich zastosowaniami.
13. Formularze. W przedostatnim akapicie odwiedzający ma możliwość przestudiowania konstrukcji formularzy i ich elementów: list rozwijanych, menu, pól tekstowych, ich projektu i przesyłania informacji np. Przez.
14. Typografia internetowa. Ostatni tutorial omawia współczesną typografię internetową na stronach internetowych - wygląd tekstów, nagłówków, czcionek itp. Na moim drugim blogu znajduje się dział poświęcony typografii internetowej, w którym znajdziesz wiele przydatnych notatek na ten temat.

Struktura lekcji dla układu nauczania

Aby docenić funkcjonalność i wygodę usługi Interneting is Hard proponuję rozważyć wdrożenie jednego z jej podrozdziałów. Weźmy drugą lekcję dotyczącą tworzenia podstawowych stron internetowych.

Co mi się osobiście podoba:

• Cały materiał jest uporządkowany według podtytułów. Tekst napisany jest przystępnym językiem i nie wymaga głębokiej znajomości skomplikowanej terminologii. Wszystko krótko i na temat – w najlepszych tradycjach.
• Ważne i złożone punkty są pięknie zilustrowane diagramami.
• Aby ułatwić zrozumienie i umiejętności praktyczne, podano przykłady pisania kodu.
• Wszystko jest tak wygodne, jak to możliwe: w prawym górnym rogu znajduje się przycisk powrotu do menu, możesz od razu przejść do żądanego podtytułu lekcji (nawigacja po prawej stronie), a po wykładzie możesz otworzyć kolejny rozdział. Doskonała użyteczność.

wnioski

Jak mi się podoba? Interneting is Hard to obecnie jedna z najlepszych witryn do nauczania układu od podstaw. Autorzy kursu zadbali o to, aby osoby początkujące, które nigdy nie miały styczności z HTML i CSS, mogły w prosty i przystępny sposób zrozumieć podstawy tworzenia stron internetowych. Informacje są bardzo dobrze zorganizowane – w 14 sekcjach stopniowo przejdziesz drogę od początkującego użytkownika do doświadczonego projektanta układu. Oczywiście nie da się tego zrobić bez praktyki i zastosowania wiedzy, ale jeśli chodzi o podstawy teoretyczne, jest to najpełniejszy zbiór informacji, z jakim się kiedykolwiek spotkałem. Jeśli chcesz uczyć się z nauczycielami, sprawdź opcję Netology, która również jest całkiem niezła, choć płatna.

Jeśli znasz inne ciekawe usługi do badania układu strony internetowej, wyślij linki w komentarzach.

Układ blokowy

Jak można się domyślić powyżej, ten artykuł skupi się konkretnie na układzie bloków. Jeśli poprzedni artykuł był artykułem wprowadzającym, teraz przyjrzymy się bardziej szczegółowo przykładowi – jak stworzyć stronę internetową od podstaw. Studiując układ, szukałem szczegółowego podręcznika, jak krok po kroku ułożyć nawet najprostszą stronę HTML. W tym artykule chcę przyjrzeć się każdej linii kodu tak szczegółowo, jak to możliwe i wyjaśnić zasady pracy z HTML, aby każdy nowy w tym biznesie mógł to zrozumieć. Mam nadzieję, że mi się to uda. 🙂

Zacznijmy więc. Na przykład wziąłem prosty prototyp, nie można tego nazwać układem, normalny układ jest rysowany w formacie psd, ale tutaj jest w formacie jpg. Najważniejsze dla nas jest zrozumienie zasady, w jaki sposób należy układać strony internetowe układ blokowy. Aby pracować z układem blokowym, musisz wiedzieć nie tylko HTML, ale również css(Kaskadowe arkusze stylów). W cyklu artykułów dot układ strony internetowej, po prostu przestudiujemy ten zestaw stylów CSS, który w przyszłości zawsze pomoże Ci zaprojektować prawie każdy framework układu/makiety, ponieważ zasada jest taka sama.

Oto układ (klikalny).

Widzimy, że ma 4 logiczne części:

• Nagłówek strony internetowej (w dalszej części będziemy go nazywać nagłówkiem);
• Lewa kolumna (w dalszej części będziemy ją nazywać lewym paskiem bocznym);
• Prawa kolumna (dalej będziemy nazywać ją treścią);
• Stopka (zwana dalej stopką);

Zacznijmy oczywiście od bloku nagłówka. Nasza makieta ma szerokość 1000 pikseli (px).

Na początek powiem, że układ odbywa się za pomocą znaczników HTML. Na przykład,