Polecenie 1

Przejrzyj strony WWW związane z interesującą cię branżą lub tematyką. Te, które najbardziej przypadną ci do gustu, zapisz w formie zrzutów ekranu.

Stworzenie projektu strony internetowejstrona internetowastrony internetowej wymaga zaplanowania jej struktury – zarówno graficznej, jak i tekstowej. Pomocne w tym mogą być różne edytory graficzne, jednak lepszy efekt uzyskasz, stosując język HTML (ang. Hyper Text Markup Language). Jest to hipertekstowy język znaczników, który daje możliwość:

  • oznaczania tytułów,

  • oznaczania sekcji,

  • oznaczania rozdziałów,

  • dodawania tabel i grafik,

  • oddzielania akapitów,

  • łączenia zawartości poprzez odnośniki.

Sposób wyświetlania strony przez przeglądarkę opisuje się za pomocą języka CSS (ang. Cascading Style Sheets).

Ciekawostka

20 grudnia 1990 roku Europejska Organizacja Badań Jądrowych CERN uruchomiła pierwszą stronę internetową – World Wide Web – autorstwa Tima Bernersa‑Lee. Początkowo witryna ta działała tylko w obrębie CERN‑u, zaś w sierpniu 1991 roku została udostępniona publicznie. Do dziś istnieje ona pod adresem http://info.cern.ch/hypertext/WWW/TheProject.html.

Od czego zacząć projekt strony internetowej? Przede wszystkim ustal, jaki ma być cel twojej witryny. Czy ma ona służyć do dzielenia się informacjami, sprzedaży produktów i usług, zbierania danych potencjalnych klientów, a może po prostu do prezentowania profilu firmy? Kolejny krok to analiza konkurencji w danej branży oraz poszukanie inspiracji do stworzenia projektu, który będzie zgodny z aktualnie panującymi trendami.

Strony statyczne i dynamiczne – czyli jakie?

Strony mogą być statyczne – wówczas dokument HTMLdokument HTMLdokument HTML jest stworzony raz. Przechowuje się go pod określonym adresem URLadres URLadresem URL na serwerzeserwer internetowyserwerze w stanie niezmienionym. Aktualizacje strony wprowadzane są ręcznie w kodzie HTML, osobno w każdej podstroniesingle page (podstrona lub pojedyncza strona)podstronie projektu. Statyczne strony cechuje niska cena obsługi (prawie nie wymagają konserwacji) oraz fakt, że ładują się szybciej i nie potrzebują dostępu do baz danych. Ich hostowanie jest również tanie, bo serwer nie ma wymagań innych niż przechowywanie danych.

Drugi rodzaj to strony dynamiczne, opierające się na dwóch filarach: szablonie układu oraz treściach. Przy każdym odwiedzeniu witryny serwer generuje jej zawartość zgodnie z tym, co aktualnie znajduje się w mechanizmie agregującym (baza danych, plik JSON lub XML). Oznacza to, że za każdym razem, gdy adres strony jest wywoływany, pobierane są treści, a witryna generowana jest w formie graficznej. W efekcie np. dodając jedną grafikę, na stronie zmieniamy tylko ją, bo układ witryny jest już zdefiniowany. Ta zależność działa także w drugą stronę. Modyfikując szablon strony, zmieniamy tylko sposób jej prezentacji. Treści pozostaną nienaruszone.

Ze względu na stałe generowanie treści strony dynamicznej wymaga ona serwera WWW o zwiększonej wydajności oraz bazy danych, za pomocą której serwer zarządza zawartością witryny. Do zarządzania tego rodzaju stroną zazwyczaj potrzebny jest CMSCMSCMS. Warto pamiętać, że konfiguracja systemu wymaga nie tylko podstawowej wiedzy na temat HTML, ale także znajomości języka programowania, np.: PHP, Perl, Java Script, Ruby on Rails. Dynamiczne strony internetowe cieszą się większą popularnością, ponieważ są elastyczne i oparte na predefiniowanych układach i szablonach projektowych.

Klasyfikacja stron internetowych ze względu na pełnione funkcje

Cel, w jakim tworzymy stronę WWW, warunkuje jej funkcjonalności. Przeznaczenie strony może być jednym z kryteriów podziału witryn na rodzaje. Pamiętaj jednak, że nie ma jednej obowiązującej klasyfikacji stron WWW. Wynika to z szybkiego rozwoju branży IT.

Często można spotkać następujące rodzaje witryn:

  • wizytówka firmowa w formie strony (edytowana jedynie po stronie programistycznej) lub wizytówka z systemem CMS (zarządzana poprzez system CMS) – to statyczna strona internetowa, która stanowi tylko dodatek do działalności firmy, np. prowadzonej głównie w mediach społecznościowych; wizytówka jest też dobrym rozwiązaniem, gdy firma poprzez swoją obecność w internecie chce uwiarygodnić swoją działalność w oczach klientów lub gdy właściwa strona firmy jest w budowie;

RehEfHGcgfpyw
Źródło: tylko do użytku edukacyjnego.
  • blog – dynamiczna strona, która ma na celu dzielenie się wiedzą;

R14ES9pHz2UhL
Źródło: tylko do użytku edukacyjnego.
  • serwis i portal internetowy – zbiór stron internetowych, który może mieć różne cele.

RAnjsgavAvWIG
Źródło: tylko do użytku edukacyjnego.

Wymienione strony mogą mieć różne formy:

  • landing page – strona, która służy konkretnemu celowi: zbieraniu kontaktów, skupieniu ruchu dotyczącego jakiejś akcji, kampanii reklamowej; witryna nie zawiera wielu informacji, natomiast od razu pokazuje, jaki jest jej cel; najczęściej nie zawiera menu;

  • one page – jedna strona, która nie wymaga przechodzenia do podstron (czasem posiada ułatwiające nawigację zakładki w menu, które kierują do odpowiedniego miejsca na stronie); ten typ witryn stosowany jest do prezentowania niewielkiej ilości informacji i sprawdza się jako np. wizytówka firmowa, strona produktowa, portfolio czy strona dedykowana konkretnej akcji (konkurs – zbieranie danych potencjalnych klientów za pomocą formularza zgłoszeniowego);

Ciekawostka

Projektanci coraz częściej sięgają po efekt paralaksy, by uatrakcyjnić stronę typu one page. Daje on złudzenie ruchu i efekt 3D.

  • multi page – klasyczna strona internetowa, która składa się z dowolnej liczby podstron; pozwala na prezentację dużej ilości informacji i treści w uporządkowany sposób; menu umożliwia szybkie przejście do interesującej użytkownika podstrony; w wersji mobilnej menu powinno zwinąć się do formy „hamburgera”, aby ułatwić korzystanie z niego na urządzeniach z mniejszym wyświetlaczem.

Projektowanie za pomocą edytora graficznego – podstawowe informacje

Za pomocą edytora graficznego strony mogą projektować zarówno osoby, które zajmują się tym po raz pierwszy, jak dla te, które mają doświadczenie i posiadają wiedzę z zakresu języka HTML i CSS. Przeanalizujmy ścieżkę projektową na przykładzie popularnego kreatora WIX.

Po założeniu konta w serwisie użytkownik odpowiada na pytania, które ułatwiają mu odnalezienie odpowiedniego miejsca w kreatorze. Pytania dotyczą m.in. przeznaczenia i tematyki strony, doświadczenia projektanta itd. Po udzieleniu odpowiedzi użytkownik zostaje przeniesiony na stronę z szablonami.

RCymH5gwOe2Zr
Źródło: tylko do użytku edukacyjnego.

Na który szablon się zdecydować? Zastanów się, który z nich najlepiej pasuje do wybranej przez ciebie branży. Zwróć także uwagę, który jest nowoczesny i ma czytelne i intuicyjne menu. Spójrz, jak wyglądają podstrony i dokonaj wyboru. Następnie przejdź do trybu edycji.

RrKZSGftmYNOm
Źródło: tylko do użytku edukacyjnego.

O tym, jak powinna wyglądać strona, by zainteresować potencjalnego klienta, dowiesz się z kolejnych e‑materiałów z tej serii.

Projektowanie za pomocą edytora tekstowego – podstawowe informacje

Znajomość języka HTML sprawi, że w pełni zapanujesz nad swoim projektem, dzięki czemu będzie on oryginalny i niepowtarzalny.

Zaczynając pracę w HTML, możesz skorzystać np. z płatnego edytora Pajączek albo Bluefish. Zawierają one poradniki i gotowe szablony dla początkujących. Darmowy edytor Notepad++ jest kompatybilny z różnymi systemami operacyjnymi, a za pomocą wbudowanego wsparcia dla składni języka HTML ułatwia proces tworzenia kodu strony. Więcej na ten temat dowiesz się z e‑materiałów: Projektowanie stron – język HTML, cz. 1P12jbJinmProjektowanie stron – język HTML, cz. 1Projektowanie stron – język HTML, cz. 2PMd1LN1GlProjektowanie stron – język HTML, cz. 2.

R17E5acv6lA3s
Źródło: tylko do użytku edukacyjnego.

Słownik

adres URL
adres URL

usługa pozwalająca na publikowanie treści (stron, witryn, serwisów) w sieci Internet

certyfikat SSL
certyfikat SSL

szyfrowanie, które zabezpiecza dane pozostawiane na stronie WWW, np. w formularzach kontaktowych, podczas logowania; certyfikat ten podnosi pozycję strony w wyszukiwarkach oraz zwiększa jej wiarygodność

CMS
CMS

oprogramowanie do zarządzania treścią strony (ang. Content Management System)

dokument HTML
dokument HTML

dokument (strona WWW) czytany przez przeglądarki internetowe, widoczny pod konkretnym adresem URL; zawiera tekst, odnośniki (linki), informacje o multimediach i zdjęciach

domena
domena

adres strony internetowej, np. www.zlompol.pl

home page (strona główna)
home page (strona główna)

strona, na którą domyślnie kieruje adres witryny internetowej

hosting
hosting

przestrzeń na zdalnym serwerze, gdzie przechowywana jest zawartość strony

kreator stron WWW
kreator stron WWW

narzędzie do tworzenia stron internetowych; znajdziesz tam gotowe szablony

link
link

zwany także odnośnikiem, jest aktywnym fragmentem tekstu albo obrazkiem; pozwala przejść na inny adres URL albo wykonać inną czynność, np. przesłać zapytanie przez formularz kontaktowy

post
post

wpis na stronie

responsywność
responsywność

automatyczne dostosowanie rozmiaru strony do urządzeń, na których będzie ona wyświetlana; responsywna strona to taka, która poprawnie wyświetla się na wszystkich monitorach i wyświetlaczach

serwer internetowy
serwer internetowy

urządzenie do obsługi technicznej stron WWW (przechowywanie plików strony WWW, poczty elektronicznej, multimediów itp.)

single page (podstrona lub pojedyncza strona)
single page (podstrona lub pojedyncza strona)

unikalna strona internetowa stanowiąca odrębny dokument zawierający treść

strona internetowa
strona internetowa

zbiór dokumentów HTML; połączone są ze sobą linkami URL (odnośnikami); dokumenty te znajdują się w obrębie jednej domeny internetowej (serwisu internetowego albo witryny internetowej)

witryna internetowa / serwis internetowy
witryna internetowa / serwis internetowy

zbiór połączonych ze sobą pojedynczych stron internetowych