Jak powstaje strona www?

Jak się okazało pomysł z zatrudnieniem Antoniego Dobromysła, naszego firmowego speca od zadań niemożliwych, spotkał się z Waszym żywym zainteresowaniem. Otrzymujemy coraz więcej maili z zapytaniami o różne kwestie związane z e-biznesem (i nie tylko). Na jeden z tych maili postanowiliśmy już dziś odpowiedzieć. Wielkiego śledztwa przy tej okazji, Antoni nie musiał przeprowadzać, gdyż zapytanie dotyczyło tego czym zajmujemy się na co dzień, czyli tworzenia stron www. Nasz fejsbukowy Fan, zapytał nas „jak tak naprawdę wygląda tworzenie stron internetowych? Od A do Z”.

Oczywiście każda firma zajmująca się webdesignem ma swój plan działań. Da się jednak zauważyć pewien schemat. Jako, że od wielu lat sami zajmujemy się tworzeniem stron i sklepów internetowych opiszę to na naszym przykładzie.

Rozmowa

To taki naturalny początek. Dyskutujemy o Twoich oczekiwaniach, potrzebach i pomysłach. Może to się odbyć w formie mailowej, telefonicznej lub nawet bezpośredniej. Bardzo ważne aby już na tym etapie omówić wszystkie najważniejsze kwestie. Czyli:

• Typ – Tu dowiadujemy się nad czym będziemy pracować. Z zasady kiedy zgłasza się do nas Klient już ma mniej więcej pomysł na projekt. Wie do czego ta strona ma służyć i co ma się na niej znaleźć. Jednak są i tacy Klienci którzy wiedzą tylko, że muszą mieć stronę www 🙂 W takim przypadku staramy dowiedzieć się jak najwięcej o ich potrzebach i doradzić najlepsze rozwiązanie. Wyróżniamy kilka podstawowych typów stron internetowych:
  • Strony firmowe – coś co jest wręcz obowiązkowe jeśli prowadzisz swój własny biznes. To Twoja wizytówka w Internecie
  • Serwisy, portale – strony skupiające informacje z jednej lub wielu dziedzin
  • Sklepy internetowe – jak sama nazwa wskazuje, miejsce gdzie można dokonać zakupów
  • Do tego dochodzą również coraz popularniejsze blogi czy serwisy społecznościowe.
• Kierunek – Kolejny istotny aspekt pierwszego etapu. Tu dowiadujemy się czy ma to być zupełnie nowa strona czy chcesz przerobić swoją obecną? Uściśla to niejako kierunek naszych działań. Jeśli ma to być coś zbudowanego od A do Z nasza dyskusja będzie na pewno bardziej szczegółowa. Będziemy chcieli poznać jak najwięcej szczegółów dotyczących treści i budowy strony. Jeśli ma to być przeróbka strony już istniejącej przystępujemy do jej audytu i wskazujemy wszelkie elementy do poprawki. Pamiętaj, że my jesteśmy tylko narzędziem. Owszem, kreatywnym i profesjonalnym 😉 Ale to będzie Twoja strona i od Ciebie zależeć będzie co na niej się znajdzie i jak będzie ona wyglądała.
• Materiały – Kiedy szczegóły zostaną już ustalone prosimy wtedy o udostępnienie wszystkich materiałów które mogą nam się przydać przy budowie Twojej strony. Grafika, teksty, logo – czyli wszystko to co już posiadasz i wiesz, że musi znaleźć się w efekcie finalnym. Oczywiście służymy tu wszelkim wsparciem i doradztwem.
• Domena i hosting – Jeśli jest to nowa strona pomagamy przy wyborze nazwy domeny dla niej. Oprócz tego doradzamy odpowiedni pakiet hostingowy.

Brief

Wypadkową powyższej rozmowy powinno być wypełnienie przez Klienta briefu. Jest to coś na kształt ankiety, która pozwoli nam opracować wstępną koncepcję projektu. W takiej specyfikacji należy podać wszystkie istotne informacje techniczne typu kolorystyka, rodzaj czcionki, układ strony, ilość zakładek czy proponowane technologie. Dodatkowo można podać przykłady innych stron, na których chcesz abyśmy się wzorowali.

Innymi słowy przelewasz na papier wszystko to co ustaliliśmy podczas rozmowy wstępnej oraz wszelkie pomysły, propozycje i koncepcje na Twoją stronę internetową. Pomoże nam to „uszyć projekt na wymiar”.

Po otrzymaniu briefu ustalamy całkowity koszt projektu, termin realizacji zlecenia i formalizujemy umowę. W tym momencie zabieramy się do pracy.

Budowa struktury

Zgodnie z ustaloną koncepcją zaczynamy budować „szkielet” strony. Ustalamy jak będzie wyglądać strona główna, gdzie będzie znajdować się menu i jakie elementy będą tworzyć całość. Zaplanujemy układ i ilość podstron, a także nawigację po nich. Zgodnie z wytycznymi zaproponujemy kolorystykę serwisu oraz układ graficzny.

W tym etapie przedstawiamy również propozycję technologii z jakiej najlepiej będzie skorzystać przy tworzeniu serwisu. Mogą to być tak gotowe, ogólnodostępne produkty, jak i dedykowane specjalnie dla Państwa rozwiązania programistyczne. Wszystko zależy od stopnia rozbudowania strony.

Projekt graficzny

Kiedy „szkielet” strony jest już gotowy przychodzi czas na szatę graficzną serwisu.  Zgodnie z ustaloną koncepcją i układem strony, grafik tworzy tzw. layout. Wykorzystuje do tego ustaloną kolorystykę, odpowiednią czcionkę oraz wszelkie elementy dekoracyjne. Trzeba sobie jasno powiedzieć, że każdy projekt jest po trochu dziełem sztuki. Musi to być coś unikalnego, oryginalnego i interesującego. A to wcale nie takie proste patrząc na ilość stron www które możemy znaleźć w Internecie.

I tak przygotowany układ graficzny przedstawiamy do akceptacji. Czekamy potem na ewentualne sugestie i uwagi. Dzięki naszemu doświadczeniu tych jest zazwyczaj niewiele 😉

„Cięcie”

W momencie gdy tak układ strony jak i szata graficzna zostanie zaakceptowana przechodzimy do tzw. „cięcia” strony czyli kodowania. Najprościej rzecz ujmując wszystko co do tej pory zrobiliśmy przekładamy na język programistyczny, tak aby strona normalnie mogła funkcjonować w sieci.

Staramy się tworzyć kod jak najbardziej przejrzysty aby można było potem go łatwo edytować. Musi on być zgodny z obowiązującymi standardami aby strona wyświetlała się prawidłowo pod różnymi przeglądarkami, systemami i urządzeniami.

Kod jest równocześnie optymalizowany tak aby strona była łatwiej odnajdywana przez wyszukiwarki. To bardzo istotne pod kątem pozycjonowania witryny.

Wstępnie przygotowany kod HTML zostaje wsparty przez kaskadowe arkusze styli (CSS). Język CSS służy do opisu formy prezentacji (wyświetlania) stron www. To lista reguł które ustalają w jaki sposób ma wyświetlać się każdy element strony (czcionka, kolor tekstu, odstępy, marginesy) w przeglądarce.

Na koniec następuje implementacja wybranych skryptów i aplikacji. Strona tym samym zostaje zakodowana i właściwie już gotowa do wypchnięcia jej w wirtualny świat. Pozostaje tylko…

Podpięcie systemu CMS

Po zakodowaniu strony przychodzi moment wyposażenia jej w CMS czyli tzw. system zarządzania treścią. Pozwoli to na łatwą aktualizację i rozbudowę serwisu. Innymi słowy otrzymasz prosty w obsłudze interfejs za pomocą którego sam będziesz mógł potem kształtować treść oraz sposób jej prezentacji na stronie. To właściwie już standard przy tworzeniu stron. Czasy w których byłeś uzależniony od programisty przy każdej małej poprawce na stronie odchodzą w niepamięć.

W przypadku sklepu internetowego następuje podczepienie oprogramowania e-commerce. W naszym przypadku jest to jeden z najpopularniejszych, otwartych silników e-sklepów na świecie – PrestaShop. Opensource’owy charakter tego rozwiązania, sprawia że jest ono ciągle rozwijane przez społeczność programistów. W chwili obecnej jest to ponad 300 funkcji i 2000 modułów które są dostępne zupełnie za darmo.

Test

Czyli sprawdzamy czy wszystko działa tak jak powinno. Najistotniejsze kwestie to zgodność z obowiązującymi standardami, poprawność kodu źródłowego oraz działanie strony www pod różnymi przeglądarkami. Niestety każda przeglądarka „widzi” strony internetowe na swój własny sposób 🙂 Najmniej przyjazny jest tu Internet Explorer który wymaga osobnego dostosowania kodu źródłowego. Dlatego dokładnie analizujemy wyświetlanie się pod wszystkimi przeglądarkami i wyłapujemy ewentualne nieprawidłowości. Testujemy również wszelkie zainstalowane skrypty i aplikacje. Takim oto sposobem proces tworzenia strony www dobiega końca.

Wdrożenie

Sprawdzona i zaakceptowana strona zostaje zainstalowana na serwerze. Oznacza to, że wszystkie pliki niezbędne do jej działania, czyli skrypty konfiguracyjne oraz bazy danych zostaną skopiowane na bezpieczny serwer.

Po końcowej konfiguracji strona internetowa będzie już widoczna pod wybrany adresem.

I to by było na tyle. Jeśli macie jakieś pytania nie wahajcie się pisać.

Mariusz Korzeniecki

O Autorze