Mój workflow: tworzenie stron internetowych od projektu do publikacji

Mój workflow: tworzenie stron internetowych od projektu do publikacji

Jeśli masz cokolwiek wspólnego z „rozwijaniem” stron internetowych, z pewnością masz swój sprawdzony schemat działania. Często korzystasz z tych samych narzędzi, frameworków czy własnej bazy snippetów. Przez kilka lat ciągłych zmian i ja wypracowałem własny workflow, który chciałbym przedstawić bez wdawania się w szczegóły.

Rozeznanie i analiza projektu graficznego

Proces tworzenia strony internetowej rozpoczyna się od projektu funkcjonalnego i graficznego. Przed rozpoczęciem prac należy dokładnie przeanalizować wszystkie elementy layoutu, jak powinny zachowywać się na urządzeniach mobilnych i spróbować przewidzieć problemy, które mogą się pojawić na dalszym etapie. Dobrą praktyką jest możliwe wczesne określenie elementów wspólnych, powtarzających się bloków treści i wstępne zaplanowanie klas. Taką analizę robię przy każdym projekcie, starając się zbadać każdy widok możliwie dokładnie. Jeśli będziesz w stanie przewidzieć trudności na początku – wierz mi lub nie – będziesz w stanie lepiej i efektywniej je rozwiązać na późniejszym etapie.

Nie będę się rozpisywał na temat potocznie zwanego „cięcia grafiki” na elementy składowe. W tym przypadku sprawa wygląda tak, że każda metoda dająca efekt jest dobra. Korzystając z Gulp czy Grunt (czytaj dalej) nie musimy się martwić o optymalizację obrazów do internetu, gdyż jest to robione automatycznie podczas generowania plików „do produkcji”.
Elementy takie jak ikony, strzałki czy logotyp warto zapisywać do plików SVG (o ile grafik przygotował projekt wektorowy). Metod osadzania plików wektorowych jest co najmniej kilka i każda z nich ma swoje wady i zalety – o tym przeczytacie w jednym z kolejnych artykułów.
Stałe elementy szaty graficznej, których nie można osadzić jako wektor, powinniśmy przygotowywać na tak zwanych „sprite-ach”. Sprite to nic innego jak plik graficzny zawierający od kilku do kilkunastu elementów graficznych. Takie podejście jest dobre pod względem optymalizacji (strona ładuje jeden plik zamiast kilkunastu) a także oceny punktowej w Google.

Gulp.js i preprocesory CSS

gulp workflowJeszcze kilka lat temu do napisania strony internetowej czy szablonu maila, wystarczył ulubiony edytor tekstowy i kilka kaw. Dziś każdy szanujący się developer nie obejdzie się bez narzędzi automatyzujących i optymalizujących jego pracę. Do narzędzi takich zaliczam mój ulubiony „task runner” Gulp.js. Gulp to łatwe w konfiguracji i wydajne środowisko JavaScript, zaprojektowane dla web developerów. Wystarczy nauczyć się 3-5 podstawowych komend terminala by cieszyć się automatyczną minimalizacją plików, optymalizacją obrazów, lokalną synchronizacją przeglądarek i szeregiem innych dostępnych funkcji. Owe funkcje – tzw. „taski” można dowolnie konfigurować wedle własnych potrzeb i przyzwyczajeń.

Kolejną ogromną zaletą kodowania z Gulp jest wbudowany preprocesor CSS oraz Autoprefixer. Czym te narzędzia?
Preprocesor CSS to program skryptowy, który tłumaczy uproszczony plik stylów SASS/SCSS na docelowy CSS. Definiując style w arkuszu SASS mamy do dyspozycji masę gotowych funkcji, które znacznie skracają czas pracy. Mamy możliwość korzystania z pętli, zagnieżdżeń czy zmiennych.
Czy pamiętasz czasy gdzie dla każdego silnika graficznego przeglądarki trzeba było korzystać z odpowiednich przedrostków np -moz , -webkit czy -o ? Dzięki narzędziu jakim jest autoprefixer możemy o tych przedrostkach zapomnieć. Przykładowo pisząc wyłącznie transform: rotate(-90deg) mamy pewność, że w pliku wynikowym CSS znajdą się odpowiedniki dla wszystkich wiodących przeglądarek.

Struktura HTML

Gdybym miał odpowiedzieć na pytanie jak dobrze napisać stronę internetową, odpowiedziałbym „elastycznie”. Elastyczna strona to taka, w której powtórzenie elementów, zamiana ich kolejnością czy nawet połączenie dwóch elementów w jeden może się odbyć na końcowym etapie bez dużego nakładu pracy. Jest to bardzo ważna cecha witryny z punktu widzenia Ciebie jako sprzedawcy. Często bywa tak, że tuż przed publikacją strony w sieci, zleceniodawca potrzebuje zmienić część strony bo „nie przemyślał tego wcześniej”. Ty jako doświadczony programista, dokonasz takich zmian od ręki ponieważ dobrze przygotowałeś strukturę HTML jak i klasy CSS.

Dobrze napisany kod jest również semantyczny i zgodny z wytycznymi W3C. Oznacza to korzystanie ze znaczników HTML5 zgodnie z ich przeznaczeniem i charakterystyką. Należy również pamiętać o atrybutach „title” dla linków czy opisu „alt” dla obrazów. Dbanie o te elementy jest szczególnie ważne ze względu na roboty wyszukiwarek internetowe. Sam temat poprawności i integralności kodu jest długi jak rzeka i nadaje się na osobny artykuł. W tym miejscu zaznaczam tylko, że są to pojęcia, które nie mogą być obce żadnemu koderowi.

WordPress dostosowany na potrzeby klienta

Jak do tej pory żaden z darmowych systemów zarządzania treścią nie przekonał mnie tak do siebie jak WordPress. Do najważniejszych zalet tej platformy zaliczam ogromną liczbę pluginów, prostotę i przejrzystość zarządzania oraz banalnie łatwą do integracji z szablonem HTML strukturę.

wordpress workflow

Po instalacji czystej instancji WordPressa rozpoczynam instalowanie podstawowych wtyczek. Absolutnym „must have” w przypadku przeciętnej witryny są:

  • Advanced Custom Fields – niezbędna wtyczka do tworzenia pól treści. Do wyboru mamy między innymi pole powtarzalne, elastyczna treść, google maps czy obiekty typu obraz lub plik.
  • WPML – zaawansowany system kontroli wersji językowych strony.
  • Yoast SEO lub inny – wtyczka pomocna przy optymalizacji dla wyszukiwarek i portali społecznościowych. Pozwala w łatwy sposób ustawiać takie parametry jak page title, meta desciption czy słowa kluczowe.
  • Admin Menu Editor – zmyślny plugin do zarządzania menu administracyjnym WordPress-a. Pozwala skonfigurować panel administratora tak, aby był zrozumiały dla nowego właściciela strony.

Z własnej skóry wiem, że panel administracyjny należy przygotować „pod klienta”. Typowy właściciel strony firmowej nie ma żadnych doświadczeń z systemami CMS, dlatego powinno mu się ułatwiać życie jak to tylko możliwe. Owe ułatwienia, to chociażby dobrze opisane pola edycji treści, zalecane rozdzielczości obrazów, dostosowanie bloku nawigacji a także ukrycie niepotrzebnych elementów.

WordPress to niemalże kultowa i jednocześnie nowoczesna platforma open source dla webu. Na dzień dzisiejszy wykorzystuje się go jako system zarządzania blogiem, stroną firmową, galerią, portfolio a nawet sklepem internetowym. Ciągle dynamicznie rozwijany i aktualizowany, w połączeniu dostępnymi wtyczkami, jest numerem jeden na całym świecie.

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.