Krótka historia web designu

Internet z jakiego korzystamy dzisiaj zawdzięcza swoją formę dzięki wynalezieniu World Wide Web w latach 80. W 1988 pracujący w CERN sir Tim Berners-Lee zaproponował utworzenie globalnego projektu, nad którym pracował już od kilku lat, a który pozwoliłby na proste dodawanie oraz wymianę informacji między użytkownikami Internetu.

Przed wynalezieniem WWW spora część świata była już podłączona do Internetu ale to wynalazek Bernersa-Lee doprowadził do rewolucji w komunikacji. Strony internetowe, które funkcjonowały do tej pory były zwykłymi dokumentami tekstowymi, pozbawionymi hipertekstu bogatego w hiperłącza (protokołu HTTP). Nowy sposób przeglądania stron za pomocą przeglądarki internetowej wymagał wprowadzenia nowego, specjalnego systemu kodowania dzięki, któremu tworzenie stron byłoby proste i możliwe dla wszystkich użytkowników. W 1990 roku Berners-Lee zaprezentował język HyperText Markup Language nazywany HTML. Oficjalnym dniem narodzin WWW uważa się pierwsze połączenie internetowe za pomocą protokołu HTTP między CERN’em a Uniwersytetem Stanforda 6 sierpnia 1991 roku.

pierwsza strona www

Przeglądarkowa rewolucja

Nawigacja po pierwszych stronach nie była najprostsza, należało znać adres strony internetowej, na którą chciało się wejść, a szczególnie pomocne w tej kwestii były strony zbiorcze, będące bazami wszystkich najnowszych stron umieszczonych w Internecie. Momentem przełomowym w rozwoju World Wide Web było wprowadzenie graficznej przeglądarki. Skonstruowano ją w 1992 roku pod patronatem Politechniki Helsińskiej a nazwano Erwise, jednak dopiero ta wprowadzona rok później o nazwie Mosaic zrewolucjonizowała sposób prezentowania treści w sieci. Mosaic (która ewoluowała potem w Netscape) rozpoczęła także nadal trwającą wojnę przeglądarek. W 1994 roku 90% użytkowników Internetu w ciągu miesiąca przeniosło się z dotychczasowych przeglądarek na świeżo wypuszczonego Netscape, to sytuacja, która nigdy wcześniej ani później się nie wydarzyła. Na wielki sukces Netscape natychmiast odpowiedział technologiczny gigant Microsoft. Pod przywództwem Billa Gatesa stworzono nową przeglądarkę Internet Explorer, którą każdy użytkownik mógł pobrać za darmo. Na rynku pojawia się coraz więcej nowych przeglądarek, w 2003 roku do walki o przywództwo w Internecie stanęły Mozilla Firefox, Safari, Opera i wiele innych. Od 2008 roku do wojny przeglądarek stanęła także należąca do Google Inc. – Google Chrome.

Rodzaj przeglądarki z jakiej korzysta użytkownik komputera ma duży wpływ na to w jaki sposób odbiera zaprezentowane na stronach internetowych treści. Od wprowadzenia pierwszej grafiki na strony kolejni producenci i programiści starają się dodawać nowe funkcjonalności do swoich produktów. Coś co jest plusem w oczach użytkownika – wybór przeglądarek i możliwość dopasowania do swoich potrzeb, w oczach projektanta jest dużym utrudnieniem. W związku z różnicami, które pojawiają się między nimi, projektant musi mieć pewność, że niezależnie od sposobu wyświetlania strony internetowej czy aplikacji, końcowy projekt będzie prezentował się w każdej przeglądarce tak samo. A to nie jedyne utrudnienie, na które napotka na swojej drodze projektant przygotowujący grafiki na potrzeby World Wide Web.

Pierwsze strony HTML były czystymi dokumentami tekstowymi – charakteryzowały się głównie dużą ilością tekstu (często dość nieczytelnie sformatowanego), limitowanej palecie kolorów, zamkniętych w dość prosty, przewidywalny layout. Składały się głównie ze sformatowanego tekstu i hiperłączy, które łączyły ją z zewnętrznymi serwisami internetowymi. W tej chwili tworzone są dużo bardziej rozbudowane dokumenty – struktura strony składa się z kilkunastu lub kilkudziesięciu różnych elementów – tekstów, obrazów, hiperłączy, skryptów, opartych na rozbudowanych silnikach CMS umożliwiających archiwizowanie wpisów, komentowanie i zarządzanie całą treścią.

pierwsze zdjęcie w Internecie

Przyszedł czas na grafikę

Grafika na stronach internetowych zaczęła się od bardzo specyficznego zdjęcia – grupy Les Horribles Cernettes. To zespół czterech pracowniczek CERN’u, które utworzyły parodię girls bandu. Kolorowo ubrane w stroje w stylu lat 50., uśmiechające się do obiektywu, stały się symbolem rozwoju grafiki na stronach Internetowych. Pierwsze zdjęcie w Internecie zostało zrobione w 1992 roku przez Silvano de Gennaro – programistę pracującego w CERN’ie a umieszczone w sieci przez samego twórcę WWW Sir Tima Berners-Lee. Mimo, że umieszczanie grafik na stronach było możliwe, programiści świadomie ich unikali. Problemem było wolne w tych czasach łącze internetowe. Bogata w grafiki i efekty strona internetowa ładowałaby się nawet około kilkunastu minut, zatem aby usprawnić poruszanie się po sieci celowo upraszczano całe dokumenty. Okres takich działań można określić mianem epoki brązu projektowania na potrzeby Internetu.

Kamieniem milowym w projektowaniu stron było wprowadzenie na rynek przeglądarek graficznych. Szybsze, proste w obsłudze i wygodne w użyciu zachęciły użytkowników do tworzenia własnych stron. Początek lat 90 to złoty okres w historii Internetu. To czas kiedy powstali tacy giganci jak Amazon czy Ebay, których majątek teraz szacuje się na miliony dolarów. To także czas kiedy zaczęto myśleć o rozwijaniu sieci bardziej globalnie. W 1994 roku miało miejsce utworzenie World Wide Web Consortium, potoczniej zwanego W3C. Głównym celem konsorcjum było zapobieganie monopolizacji kodu oraz sposobu wyświetlania grafik na stronach internetowych. W3C założone przez twórcę WWW, Sir Tima Berners-Lee zrzesza ponad 400 organizacji – są wśród nich zarówno firmy prywatne, agencje rządowe czy ośrodki uniwersyteckie z całego świata. To przede wszystkim eksperci, którzy cały czas pracują nas ustanawianiem standardów sieci. Wśród zagadnień, którymi zajmuje się W3C są między innymi języki znaczników, których używa się do pisania kodu strony – HTML, xHTML; kaskadowe arkusze stylów – CSS, które odpowiadają za wizualną część strony internetowej; formaty graficzne wyświetlane w Internecie, np. SVG, które przenosi do sieci właściwości grafiki wektorowej.

stara strona internetowa Microsoft

Utworzenie konsorcjum oraz upowszechnienie idei ciągłego rozwoju sieci pozwoliło na narodziny stron internetowych drugiej generacji. Między 1992 a 1994 rokiem utworzono nowy standard programowania stron HTML 2. Kodowanie stało się łatwiejsze a grafiki bardziej popularne. W przeciągu krótkiego czasu pojawiła się nowa wersja HTML 3 – a rok 1995 to narodziny tzw. arkuszy stylów (odpowiadających za ostylowanie kodu źródłowego, nadania mu kolorów, justowania lub pogrubiania tekstów) a także wypuszczenie na rynek nowej, najbardziej znanej przeglądarki Internet Explorer.

Gify, latający kursor i animowane intro

Nowa generacja HTML’a stała się niejakim utrapieniem dla dzisiejszych projektantów. Wiele stron w Internecie nosi w sobie znamiona ówczesnej rewolucji. Strony trzeciej generacji to strony obfite w grafiki, kolorowe wzory, pstrokate tła. Pojawiają się animacje dzięki popularnemu formatowani grafik .gif oraz pierwsze strony wykonane w technologii Flash. Strony internetowe stały się dynamiczne, kolorowe i przez to bardzo często… nieczytelne!
Kiedy projektanci stron powoli ochłonęli po wprowadzonych rewolucjach zaczęto baczniej przyglądać się funkcjonalności stron internetowych, zaczęto zwracać uwagę na estetykę projektów oraz ich przyjazność względem użytkownika. Czwarta generacja to wprowadzenie skryptów, oswojenie się z potężnym narzędziem jakim są arkusze stylów CSS, Flash oraz XML.

stare flashowe strony

Flash to słowo klucz w historii projektowania stron internetowych. Oraz jedno z przekleństw użytkowników stron o wolniejszym łączu internetowym. Każdy miał chyba okazję sprawdzić na własnej skórze jak flashowe wersje stron ładują się długimi minutami aby w końcu przekonać się, że nie ma na nich nic interesującego. Szczególnie tę technologię upodobali sobie artyści. Flashowe wersje portfolio do tej pory są bardzo popularne – kilkusekundowe intro, bogate w muzykę lub dźwięki reagujące na naszą interakcję z projektem, animowane przejścia.

html5 strony internetowe

Kolejną rewolucją w dziedzinie web designu było wprowadzenie HTMLa nowej generacji – HTML5 oraz nowej wersji arkuszy stylów CSS3. Świat projektantów stron internetowych oszalał na ich punkcie, mimo, że nadal większość z nich prowadzonych jest po omacku. Świeżo wprowadzone standardy mają bowiem wiele wad, które trzeba wziąć pod uwagę budując stronę. Strony piątej generacji to w pełni multimedialne twory – dzięki dodaniu takich znaczników jak video czy audio wprowadzenie filmów i dźwięków na stronę staje się bardzo proste – również zarządzanie nim nie przysparza już tylu trudności jak w przypadku poprzednich generacji.

Najczęściej występującym połączeniem we współczesnych projektach stron jest HTML, CSS i Java Script. Ten ostatni, mimo, że istnieje od kilku lat zyskał nowe życie dzięki wprowadzeniu nowych bibliotek jQuery. Można by się pokusić o stwierdzenie, że gdyby nie jQuery, nowy HTML i CSS nie zyskałyby takiej popularności. Obliczono, że jQuery używane jest w ponad 65% wśród 10 tysięcy najczęściej odwiedzanych stron internetowych – w dzisiejszych czasach jest najbardziej popularną biblioteką JavaScript.

JavaScript jest językiem programowania, który powstał już w 1995 roku. Nie jest używana w zastępstwie HTML’a, jest raczej jego uzupełnieniem, dzięki niemu możemy otwierać nowe podstrony bez przeładowywania całej witryny, tworzyć animacje elementów – przesuwać je, zmniejszać lub zwiększać, tworzyć elementy interaktywne – kontrolować dźwięk i film, tworzyć walidację popularną zwłaszcza przy logowaniu do serwisów bądź wysyłaniu wiadomości przez formularz. Część funkcji wykorzystywanych przez jQuery można zamienić już na zwykły HTML5 i CSS3.

Era mobile

Coraz więcej narzędzi mają w swoich rękach projektanci i niestety coraz więcej problemów, które trzeba rozwiązać. Należy pamiętać, że strony internetowe nie są już tylko odtwarzane na domowych komputerach – w dzisiejszych czasach dysponujemy całą gamą przenośnych urządzeń – laptopów, tabletów, smartfonów. Nie bez powodu obecną dekadę nazywa się często erą mobile.

Organizacje prześcigają się w tworzeniu kolejnych konferencji poświęconych tworzeniu stron i aplikacji na potrzeby urządzeń przenośnych, wielkie firmy zmieniają wygląd swoich stron dostosowując je do każdego użytkownika. Nawet Google ogłosił w ostatnich dniach, że ukarze strony internetowe (obniżając ich współczynnik wyszukiwań), które nie będą posiadały mobilnej wersji strony. Rozpropagowanie nowych urządzeń, dzięki, którym możemy przeglądać zawartość sieci niesie za sobą duże konsekwencje w kwestii projektowania. Niestety brak spójności między urządzeniami w kwestii wielkości ekranu, rozdzielczości czy proporcji, a także coraz większa ilość oprogramowania sprawiają, że przed projektantami stoją kolejne wyzwania do pokonania.

projektowanie stron responsive

Pierwsze określenie Smart Phone użyto już 1997 roku, kiedy Ericsson przedstawił pierwszy prototyp inteligentnego telefonu GS 88 Penelope. Była to jednak daleka koncepcja urządzenia, które określamy dziś jako smartfon, czyli telefon z zainstalowanym rozbudowanym oprogramowaniem pozwalającym na szereg modyfikacji według uznania użytkownika. Co ciekawe, pierwsze mobilne strony internetowe pojawiły się w 1998 roku – na początku jako zwykłe dokumenty tekstowe, pozbawione grafiki i animacji. Nie zyskały jednak wielkiej popularności – transfery internetowe były zbyt ograniczone, łącza niestabilne i drogie. Telefony nowej generacji umożliwiają połączenie internetowe za pośrednictwem wygodnych i prostych w obsłudze przeglądarek graficznych, które są zminimalizowaną wersją ich stacjonarnych wersji.

W tej chwili można swobodnie orzec, że urządzenia mobilne stały się równie popularnymi odtwarzaczami naszych projektów jak laptopy i pecety. I chcąc czy nie, jako projektanci musimy temu sprostać. Na przestrzeni ostatnich dziesięciu lat pojawiło się tyle zmian i nowinek ile nie pojawiło się przez cały (choć krótki) czas istnienia WWW.

Słowo na… Nowy Rok 🙂

Ciężki czas przed nami… ale za to jaki ekscytujący! Więc odzywam się do Was wszystkich – web designerów, projektantów, twórców stron, artystów i rzemieślników – jakkolwiek się nie nazwiecie – bądźcie otwarci na nowe, na ciągły rozwój i naukę. Życzę Wam (i sobie przy okazji), żebyście mieli siłę i czas by chłonąć te wszystkie nowinki ale jednocześnie byście pamiętali o trzeźwej ocenie i tym, że projektując nie robimy tego wyłącznie dla siebie. I miejcie w sobie pasję!

You May Also Like
Read More

Gridy, czyli siatki w projektowaniu

Gridy, a po naszemu, siatki, to temat, który z pewnością obił się Wam nie raz o uszy. Zazwyczaj wiąże się je z projektowaniem stron internetowych, co oczywiście błędne…
Read More

Ikony w interfejsie (UI)

Trochę było ostatnio lajfstajlowych materiałów, to czas wrócić do projektowania. Pogadajmy o ikonach, piktogramach w interfejsie (UI). I nie tylko, bo część z zagadnień będzie pokrywać…