Budowa strony internetowej

Opis części składowych strony internetowej przez analogię z budownictwem

2 Aug 2017

Aby łatwiej można było zrozumieć, z czego składa się strona internetowa posłużę się analogią z budownictwem: od podstaw, aż po wykończenie.

Działka/Hosting

Tak jak dom, tak i strona musi być na postawiona na jakimś fizycznym miejscu. W przypadku domu jest to działka, a strony - serwer hostingowy. Hosting to udostępnianie przez dostawcę usług internetowych zasobów serwerowni. Innymi słowy, polega to na "zarezerwowaniu" (oddaniu do dyspozycji):

  • określonej objętości dysku twardego,
  • maksymalnej ilości danych do przesłania przez łącza internetowe serwerowni,
  • usług obsługiwanych przez serwerownię (w zakresie zależnym od specyfiki usługi, np. udostępnienie bazy danych z określeniem maksymalnej jej objętości),
  • maksymalnego stopnia obciążenia serwerowni przez usługi.

Często oferowane zasoby określane są w oderwaniu od fizycznej budowy serwerowni. Z punktu widzenia dostawcy takich usług polega to głównie na dbaniu o stałe, poprawne działanie dysków i połączenie serwera z Internetem. Dobry dostawca powinien się zatem troszczyć o:

  • dobry stan techniczny zarówno dysków jak i innych podzespołów koniecznych do prawidłowego funkcjonowania serwera,
  • dobry stan techniczny połączenia z Internetem,
  • ochronę danych dotyczących klientów i ich kont - zarówno przed przeciekami typu kserowanie dokumentów z biurka jak i kradzieżami elektronicznymi, ochronę serwerów oraz znajdujących się na nich kont przed różnego typu atakami poprzez Internet,
  • maksymalnie pełną, szybką i stałą dostępność do przechowywanych zasobów przez Internet.

Usługa hostingu w zakresie wynajmu platform pod serwery HTTP nazywana jest web hostingiem. W Internecie można znaleźć darmowe usługi hostingowe. Hosting taki może posiadać wiele ograniczeń:

  • ograniczenia związane z maksymalnym miesięcznym transferem,
  • przestrzenią dyskową,
  • brak dostępu do baz danych,
  • brak obsługi języków skryptowych (np. PHP),

a także:

  • reklamy na stronie umieszczane przez dostawcę,
  • otrzymywanie reklamowych wiadomości drogą elektroniczną.

Gdy ograniczenia takie są nieodpowiednie od wymagań, konieczne staje się skorzystanie z płatnych usług. Firmy hostingowe dają możliwość bezpłatnego przetestowania oferowanych przez siebie usług w ograniczonym czasie (zazwyczaj 2 tygodnie).

Wg rankingu portalu WHT ponad 36% stron w Polsce jest hostowanych w 3 największych firmach: home.pl, nazwa.pl i az.pl.

Ze strony wikipedia.pl

Adres/Domena

Adres - numer domu otrzymuje się w Urzędzie Miasta i/lub Gminy, natomiast domenę można wykupić albo w firmie hostującej stronę, albo uzyskać np na aukcji domen - czasem można trafić na prawdziwe perełki.

Domena internetowa – ciąg nazw systemu Domain Name System (DNS) wykorzystywany w Internecie, składający się z wyrazów umieszczonych w pewnym poddrzewie struktury DNS tj. zakończonych stałym sufiksem (np. ".wikipedia.org").

Dla przykładu adres Wikipedii pl.wikipedia.org składa się z trzech wyrazów rozdzielonych kropkami. Aby lepiej zrozumieć sens domeny internetowej dobrze jest przeanalizować elementy adresu Wikipedii: org to domena najwyższego poziomu mająca najbardziej ogólne znaczenie – przypisywana jest stronom wszystkich organizacji, wikipedia.org to nazwa domeny wykupionej przez fundację Wikimedia i odnosi się do projektu o nazwie Wikipedia, natomiast domena pl.wikipedia.org identyfikuje jego polską wersję.

Jak widać na powyższym przykładzie, domeny tworzą hierarchię, która pozwala katalogować komputery w sieci według pewnych kategorii, dzięki czemu adresy internetowe stają się uporządkowane i możliwe do zapamiętania. Każda z nazw domenowych może zawierać litery, cyfry lub znak '-', a wielkie i małe litery nie są odróżniane (obecnie możliwe jest także stosowanie narodowych znaków diakrytycznych w domenach typu IDN). Wiele nazw domen jest płatnych.

Ze strony wikipedia.pl

Fundament/Skrypt

Fundament jest tym elementem domu, którego najczęściej nie widać a na którym opiera się cała konstrukcja. Podobnie jest ze skryptem strony. Skrypt może być napisany specjalnie dla danej strony, można zakupić autorski skrypt, albo skorzystać z alternatywy open-source. Do łatwego zarządzania stroną najlepiej nadają się CMS (z ang.: Content Management System, pol.: System Zarządzania Treścią).

Jest to oprogramowanie pozwalające na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i rozbudowę przez redakcyjny personel nietechniczny. Kształtowanie treści i sposobu ich prezentacji w serwisie internetowym zarządzanym przez CMS odbywa się za pomocą prostych w obsłudze interfejsów użytkownika, zazwyczaj w postaci stron WWW zawierających rozbudowane formularze i moduły.

Podstawowym zadaniem platform CMS jest oddzielenie treści (zawartości informacyjnej serwisu) od wyglądu (sposobu jej prezentacji). Po wprowadzeniu nowych informacji przez uprawnionego redaktora system zapisuje je w bazie danych. Następnie system CMS generuje dynamicznie strony internetowe na podstawie treści pochodzącej z bazy danych oraz odpowiednich szablonów. Pozwala to na bardziej elastyczne a przede wszystkim wygodniejsze zarządzanie treścią niż ma to miejsce w przypadku zastosowania statycznych plików HTML.

Wykorzystanie szablonów stron sprawia, że zmiana koncepcji graficznej całego serwisu sprowadza się do przygotowania i zamiany szablonu (tzw. skórki). Dzięki takiemu podejściu proces publikacji w Internecie staje się prostszy. Ponadto te same dane można prezentować jednocześnie w różnych formatach np. jako pliki PDF.

W ostatnich latach platformy CMS znacznie ewoluowały, dodając m.in. możliwość elastycznej i dynamicznej modyfikacji już nie tylko treści, ale i struktury.

Systemy zarządzania treścią zazwyczaj oparte są na bazach danych i językach skryptowych (server-side), lub specjalistycznym oprogramowaniu uruchamianym po stronie serwera. CMS może być formą oprogramowania klienckiego, które do aktualizacji strony może używać takich protokołów jak FTP. Coraz częściej wykorzystywane są złożone techniki opisu struktur dokumentów (np. XML).

Najczęściej systemy CMS są napisane w językach takich jak: ASP, JSP, PHP, Python.

Systemy CMS bazujące na modułach to takie, które do prezentacji treści wykorzystują napisane do tego celu moduły/funkcje. Typowy system może zawierać zarządzanie wiadomościami, fora dyskusyjne etc. Zalety tego typu systemów to możliwość szybkiego uruchomienia portalu.

Przykłady:

  • Joomla!
  • Wordprees
  • Drupal

Elewacja/Szablon

Czyli to, co jest najbardziej widoczne

Szablon Joomla! to niewielka aplikacja, umieszczająca materiały na dynamicznie generowanych stronach zgodnie z projektem graficznym.

Wyświetlana w oknie przeglądarki internetowej strona jest obrazem. Obrazem specyficznym, bo powstającym w wyniku złożenia się w jedną całość przeróżnych czynników.

Klasyczna strona internetowa to obraz wyświetlany na ekranie monitora na podstawie instrukcji zawartych w pojedynczym umieszczonym na serwerze dokumencie HTML.

Dokument HTML zawiera:

  • instrukcje informujące przeglądarkę, co, w jakiej kolejności i jak ma wyświetlać,
  • teksty i odnośniki do obrazków, animacji, dźwięków oraz innych stron.

Klasyczne strony internetowe zawierały statyczną, w zasadzie niezmienną treść. Dość szybko przestały wystarczać i internautom, i twórcom, i wydawcom. W odpowiedzi na zapotrzebowanie programiści opracowali techniki umieszczania na jednej stronie kilku dokumentów HTML, a więc faktyczne kilku stron (w tzw. ramkach) i sposoby dodawania elementów dynamicznych (JavaScript, DHTML).

Mimo tego istota klasycznych stron internetowych pozostała nienaruszona. Poza drobnymi ożywionymi elementami, prezentowały treść statyczną, zapisaną w przygotowanych wcześniej dokumentach HTML.

A to oznacza, że można było stworzyć projekty graficznej każdej strony, a następnie stworzyć dokumenty HTML generujace w przeglądarkach statyczne przewidywalne obrazy.

Dynamiczne strony i dokumenty HTML

Treści współczesnych stron zmieniają się dynamicznie, bywa, że po każdym odświeżeniu okna przeglądarki. Twórca szaty graficznej nie jest w stanie zaprojektować tych setek, czy tysięcy stron, które powstaną w oparciu o jego projekt graficzny.

Strony dynamiczne powstają inaczej niż statyczne.

Strony statyczne powstają ze stworzonych wcześniej i umieszczonych na serwerze dokumentów HTML.

Strony dynamiczne natomiast powstają z informacji pobieranych z różnych źródeł, a następnie umieszczanych w dokumencie HTML generowanym przez oprogramowanie serwera.

Innymi słowy i w pewnym uproszczeniu - na serwerze nie istnieją gotowe dokumenty HTML przesyłane do przeglądarek. Zanim serwer wyśle dokument HTML, musi go stworzyć, wygenerować, pobierając treści z różnych źródeł. Za stworzenie źródłowego dokumentu HTML odpowiadają na serwerze specjalne skrypty, zapisane w językach typu PHP, ASP lub innych. Wśród nich skrypty szablonu. Szablonem nazywa się często wzorzec określający układ strony i wygląd treści. W tym znaczeniu zarówno strony statyczne, jak i dynamiczne korzystają z szablonów.

Ale mimo tej samej nazwy i ogólnej definicji różne są funkcje szablonów, a w związku z tym budowa szablonów stron statycznych i dynamicznych.

W pierwszym przypadku szablonami posługują się ludzie - projektanci stron, tworzący dokumenty HTML. Szablon jest szkieletem dokumentu HTML, który wypełnia twórca strony, dodając treści.

W drugim przypadku szablonami posługują się maszyny. Dokładniej - oprogramowanie serwera. Serwer musi pobrać z różnych źródeł potrzebne - materiały i umieścić je w dokumencie HTML według szablonu.

Szablon musi więc być zbiorem instrukcji dla serwera generującego dokument HTML.

W Joomla! i Mambo, a także wielu innych systemach zarządzania treścią dokumenty HTML są generowane dynamicznie. Dynamicznie generowane są źródłowe dokumenty HTML.

Mówiąc precyzyjniej, zanim strona pojawi się w oknie przeglądarki:

serwer internetowy musi:

  • stworzyć dokument HTML,
  • umieścić w nim materiały pobrane z plików, bazy danych lub innych źródeł,
  • oznaczyć rozmieszczenie materiałów zgodnie z regułami określonymi w szablonie. przeglądarka internetowa musi:
  • odczytać zawartość dokumentu źródłowego i innych, w nim wskazanych,
  • sformatować treści zgodnie instrukcjami formatującymi, Aby tę rolę spełniać, szablon musi mieć odpowiednią budowę.

Gdyby definiować szablon dla Joomla!, trzeba by wskazać na sześć poniższych właściwości:

  • Szablon jest aplikacją komputerową - zestawem skryptów i innych elementów (np. grafik, dźwięków), wykorzystywanych przez serwer stron WWW oraz urządzenia odczytujące, np. przeglądarki internetowe.
  • Szablon jest nieodzownym składnikiem Joomla! i Mambo: bez szablonu nie pokażą one żadnego materiału.
  • Szablon jest integralnym składnikiem Joomla! i Mambo: korzysta z parametrów i funkcji sterujących pobieraniem informacji i materiałów z różnych źródeł i umieszczaniem ich w dokumencie HTML.
  • Szablon jest szkieletem dokumentu HTML - przyszłym dokumentem HTML, wypełnianym treścią przez Joomla! i Mambo dynamicznie, w locie.
  • Szablon jest zbiorem instrukcji dla Joomla! lub Mambo określających miejsca przeznaczone na treść oraz zbiorem instrukcji dla przeglądarek, określających sposób formatowania treści.

Ze strony joomla.pl

Wystrój/Zawartość

By dom był funkcjonalny, trzeba go umeblować, udekorować. By strona była funkcjonalna, trzeba ją zapełnić treściami, informacjami, artykułami

Tu już dużo zależy od właściciela strony. Czy strona będzie o sporcie? Czy o pasji tworzenia? Hobby? A może nietuzinkowe zainteresowania, rzemiosło, firma... To już miejsce na własną kreację, na własne meblowanie.

Joomla! umożliwia dodawanie wielu komponentów:

  • Galerie zdjęć
  • Fora internetowe
  • Sklepy online
  • Ankiety
  • Kalendarium przyszłych wydarzeń (np spektakli, koncertów, wystaw...)

A także niszowe: prowadzenie ligi sportowej, pokazywanie turniejów szachowych (odtwarzanie ruchów na szachownicy), obsługa: rezerwacji, biblioteki, biura nieruchomości, wypożyczalni, a nawet... książki kucharskiej Na stronie mamy też możliwość umieszczenia modułów, powiązanych z ww. komponentami, albo zupełnie niezależnych. Przykłady? Całe mnóstwo:

  • menu strony
  • informacje kontaktowe
  • boksy reklamowe
  • losowe zdjęcia z galerii
  • produkty w promocji ze sklepu
  • pogodynka
  • wykresy walutowe i przeliczniki walut
  • ostatnio dodane artykuły
  • i wiele, wiele innych... Dodatkową cechą w najnowszej Joomli! jest opcja obsługi wielu języków, można także ustawić wersjonowanie artykułów (Joomla! zapamiętuje starsze wersje artykułów i wprowadzone poprawki, co ma znaczenie przy np. administracji samorządowej)