Budowa strony internetowej (cz.1)

Serwer i hosting

Możemy rozpocząć pracę na dowolnym etapie spośród tych, które przedstawiamy. Nowy projekt zwyczajowo zaczynamy od wyboru serwerowni i hostingu. Nową stronę internetową możemy osadzić ( zainstalować ) na serwerze wybranym przez zleceniodawcę ( zazwyczaj bez sprzeciwu ) lub skorzystać z jednego ze znanych nam hostingów. Testowaliśmy różne rozwiązania i jesteśmy skorzy zaproponować usługi takiej serwerowni, z której sami korzystamy, lub która jest adekwatna do potrzeb zleceniodawcy. Wybór właściwego hostingu ma zasadnicze znaczenie dla udanego startu projektu internetowego. Zlecając projektowanie małej strony online ( wizytówki internetowej ) warto wybrać tani i niezawodny hosting ze sprawdzonej serwerowni. Sprawa nieco komplikuje się w przypadku budowy e-sklepu, bo cięższe silniki e-commerce i większe serwisy internetowe wymagają już dużo szybszego, pojemniejszego i jeszcze bardziej niezawodnego ( rozwojowego ) hostingu w najlepszej serwerowni.

Instalacja oprogramowania

Kolejnym krokiem na drodze budowy strony WWW jest instalacja oprogramowania deweloperskiego. Na wykupionym serwerze umieszczamy katalogi z plikami startowymi silnika wybranego pod budowę strony internetowej. Z uwagi na to, że pracujemy na WordPress i WooCommerce ograniczymy się do omawiania tej problematyki pod tym kątem. W zasadzie jednak wszystko sprowadza się do odpowiedniego zainstalowania i wstępnej personalizacji silnika website.

API Keys WordPress Divi

W następnej kolejności dokonujemy początkowej ( czyszczącej ) konfiguracji WordPress. Konfigurujemy ustawienia w taki sposób, aby móc w pełni wykorzystać możliwości modułu Divi i zbudować stronę internetową spełniającą oczekiwania klienta. W tym celu musimy dokonać przeglądu ustawień WordPress, zainstalować plugin ( wtyczkę Divi ) i aktywować ją wpisując unikalny klucz API WordPress Divi. Divi to moduł deweloperski ( zakupiony na licencji ), który klient otrzymuje bezpłatnie w ramach kupionej strony internetowej.

API Keys WordPress Divi
API Keys WordPress Divi

Divi jest modułem WordPress dla webmasterów. Jest to obecnie ( 2020r. ) najprawdopodobniej najdroższe i zarazem najlepsze oprogramowanie na rynku, za pomocą którego webmaster może zbudować świetnie wyglądającą i w pełni responsywną stronę WWW. Dzięki temu, że moduł ten jest instalowany na silniku WordPress, klient ma nie tylko możliwość łatwego dodawania wpisów, tekstów na podstrony i opisów produktowych, ale i po małym kursie ( patrz YT ) może samodzielnie rozbudowywać layout i wprowadzać zmiany w wyglądzie swoich stron online.

Klient otrzymuje API Keys WordPress Divi dożywotnio, albowiem usługodawca webmasterki – firma web3promagraco Michał Chechelski również jest dożywotnim właścicielem licencji na ten moduł. Usługodawca generuje dla klienta nowy klucz sub-licencyjny i wprowadza go do ustawień silnika website zainstalowanego na domenie klienta. W praktyce wszystko poza pracą twórczą związaną z kreacją strony WWW podlega zasadom gospodarki podarków, która obowiązuje w Sieci. W przypadku utraty klucza, zmiany domeny lub nowej koncepcji marketingowej, nieodpłatnie generowany jest nowy klucz sub-licencyjny.

Konfiguracja Divi WordPress

W następnej kolejności webdeweloper dokonuje wstępnej konfiguracji modułu Divi.

divi-wordpress
Divi WordPress

Webdeweloper Divi WordPress właściwie konfiguruje wtyczkę pod względem ogólnym. Na przykład ustawiana jest pełna szerokość dla stron, podstron, stron blogowych i kart produktowych. Konfigurowane są podstawowe ustawienia SEO dla strony głównej i innego typu stron.

W kreatorze motywów Divi webmaster WP ustawia podstawowe motywy dla każdego rodzaju stron, które będą budowane na serwisie klienta. Na najmniejszych i zarazem najprostszych serwisach WWW webmaster tworzy domyślny szablon strony internetowej. Dla większych projektów, takich jak katalogi usług czy e-sklepy wykonywane są motywy ( szablony ) dla stron, wpisów i produktów.

Nagłówek i stopka

Kolejnym krokiem podejmowanym przez webdewelopera na drodze budowy strony internetowej w kreatorze wizualnym Divi WordPress jest zaprojektowanie nagłówka i stopki. Stopka i nagłówek są wykonywane w Konstruktorze Motywów Divi. Można zastosować inne motywy dla różnych stron. Może przy tym szybko podmieniać i kopiować, nanosić zmiany.

Zmiany szczegółowe wymagają wejścia do wnętrza nagłówka (wow!). Naprawdę jest wrażenie przestrzeni. Header jest wyszczególniony. Mozna dodać nową sekcję. W praktyce więc możemy połączyć nagłówek z czymś innym, np. napisem ( przekazem, informacją ), może też być jakaś grafika stała, dla bardziej odważnych klientów. Wszystko odpowiednio przyozdabiamy CSS-em. Układanie nagłówka należy do pierwszych czynności definiujących wygląd strony WWW. Do stopki można przyczepić formularz kontaktowy, na przykład na całą szerokość ponad podstronami (powinna trochę przypominać komentowanie). Osobiście nie jestem zwolennikiem gospodarki opartej na komentarzach, ale zawsze chętnie rozważę każde zapytanie. Wygląd stopki i nagłówka bardzo świadczą o stronie. Podobają mi się układy wyraźne i wolne od standardów. Zbyt duże i wyraźne elementy nie są złe, jeśli się pamięta o telewizorach. Divi tego nie uwzględnia a szkoda.

Środek

Środek traktujemy inaczej, również pod względem koncepcyjnym. Dzielimy go na strony, wpisy, produkty, projekty ( fajnie, że to zostało uwzględnione ). Dochodzi do tego jeszcze strona główna, strony informacyjne i strony systemowe. Przy prostym układzie odpadają strony produktowe i projektowe. Tak czy inaczej nawet przy najmniejszym projekcie ( a zwłaszcza przy takim ) jest dużo pracy. Nawet na najmniejszej stronie WWW, tzw. wizytówce należy wykonać oryginalną stronę domową i stronę blogową ( szablon dla podstron ). Osobiście jestem zwolennikiem podstron o charakterze blogowym, ale niekiedy trzeba coś zaprezentować, np. cennik / kosztorys, proces realizacji jakiejś usługi i na takiej stronie można już skomplikować layout. W przypadku prostej aukcji internetowej układamy naprzemiennie zdjęcia i treści. Na stronach internetowych budujemy Landing Pages, czyli już nieco ciekawiej wyglądające przekładańce. W grę zaczynają wchodzić paski, przyciski, multimedia (nagrania audio, filmy). Wchodzi tu też problematyka różnej wielkości czcionek. Zabawy jest dużo i panuje względna swoboda, jeśli klient dysponuje dobrym serwerem, a deweloper wyłączył media na mobilnych ( chociaż niekoniecznie, to zależy od grupy docelowej ).

Cięcie layout strony WWW

Zabawa kreatorem i CSS-em to praca, którą można wykonać na samym końcu ( ale mi się dostanie od front-deweloperów ). Nie mam nic przeciwko kupieniu fajnej templatki, ale trzeba to robić świadomie. Świadomie jednak niestety to się głównie sprzedaje. Dlatego taka rada, aby odpalać stronę ze smartfona i na tej podstawie oceniać pracę dewelopera. Chodzi głównie o dostosowywanie strony do wymagań różnych urządzeń Nie chodzi o to, aby strona była skomplikowanie długa, ale o to aby była intuicyjna. W praktyce patrzymy na wszystko i poświęcamy dużo czasu na właściwe uporządkowanie stopek, nagłówków i wyglądu treści środka.

Prace końcowe

Kiedyś trzeba skończyć pracę nad stroną. Nad jej treściami, mediami, strukturą i wyglądem ( kolorystyką ). Wykończenie strony internetowej to nie lada sztuka. Zadanie to przerasta niejednego dewelopera. Jeszcze trudniejsze jest jednak podniesienie ( wy-pozycjonowanie ) strony internetowej. Te dwa zjawiska należą do organizmu złożonego z naczyń połączonych. Błędy na stronie stanowią jej barierę i zarazem określają zasięg, jaki strona WWW może osiągnąć w wyszukiwarce Google. Strony nie buduje się jednak po to, aby zachwycała swoim wyglądem, ale nade wszystko aby spełniała swoje zadanie – znajdowała klienta.