Zajmuje się tworzeniem stron Internetowych już przeszło ponad 10 lat, na przestrzeni ostatniej dekady strony internetowe uległy znaczącym zmianom, w dużej mierze ze względu na szybki rozwój technologiczny oraz zmieniające się trendy w projektowaniu stron. Opiszę swoje doświadczenia jak zmieniło się projektowanie stron internetowych w ciągu dekady.
Moje początki ze stronami internetowymi
Moja pierwsza strona internetowa wykonana na lekcji informatyki w wieku 15 lat w programie Microsoft Frontpage. Był to program przypominający edytor tekstu Word do wizualnej edycji stron WWW, ale jak na tamte czasy i standardy był to ciekawy program. Była to moja pierwsza styczność ze stronami internetowymi. Dopiero w późniejszym okresie uczyłem się XHTML + CSS i zacząłem korzystać z programu Adobe Dreamweaver, który był i jest zaawansowanym edytorem kodu gdzie można przyśpieszyć czas pisania stron www za pomocą wstawiania odpowiednich fragmentów kodu dzięki metodzie WYSIWYG, czyli za pomocą myszki kliknąć w programie Dreamweaver np. wstawienie zdjęcia i wstawiała się linijka kodu ze ścieżką do obrazka. Dużo szybciej jest to wy klikać niż napisać ręcznie kod. Niektórzy narzekali na program, że robił śmietnik w kodzie HTML, ale ja umiałem go oczyścić ze zbędnych tagów czy znaczników i dopasować do standardów W3C, więc potrzebna jest wiedza i umiejętności do korzystania z takiego narzędzia. Dziś program Dreamweaver jest dalej rozwijany przez Adobe i wprowadzane są nowe funkcje. Przykładowo ulepszono edycje kodu, łatwiej jest wyszukać w arkuszu stylów CSS klasę w HTML przy tagu DIV, co ułatwia szybkie edytowanie klasy przy konkretnym znaczniku DIV. Nie trzeba długo szukać odpowiedniej linijki w kodzie CSS, aby zmienić style dla DIV.
Kolejnym etapem na mojej drodze był czas na HTML5 i CSS3 co wprowadziło nowe standardy. Nowe funkcje HTML5 pozwoliły na bardziej elastyczne projektowanie stron, a jednocześnie uprościły proces tworzenia strony. HTML5 umożliwia również dodawanie wideo, grafiki i animacji bez konieczności używania dodatkowych wtyczek, co przyczynia się do poprawy szybkości ładowania strony. CSS3 wprowadziło wiele nowych funkcji, takich jak przekształcenia, efekty przejścia, cieniowanie, gradienty i inne, co umożliwiło projektowanie stron internetowych na zupełnie nowym poziomie. Moje przejście z XHTML do HTML5 było szybkie, dużo dłużej zeszło dostosowanie wszystkich przeglądarek internetowych do HTML5, z tego, co pamiętam w pierwszej kolejności chyba Safari 4.0 wprowadziła wsparcie dla HTML5. Kiedyś siedziałem dniami i nocami, aby opanować te umiejętności, a było wtedy trudniej niż dzisiaj, ponieważ dziś jest dużo darmowych tutoriali w internecie czy kursów online do kupienia więc jest dużo prościej niż kiedyś.
Tak wyglądały moje początki od programu Frontpage przez XHTML do HTML5 i na builderach no code kończąc, ale o tym trochę później. W dalszej części opisze jak zmieniło się projektowanie stron internetowych w ostaniej dekadzie wprowadzając co raz to nowsze technologie. Dodatkowo wspomnę, że 10 lat temu napisałem artykuł pt. Jaki edytor HTML ? , w którym opisuje, w jakim edytorze pisać kod HTML, artykuł stary, ale jary.
Responsywne strony internetowe
Kiedyś była niewielka ilość ekranów, bo przeważnie 15 lub 17-calowe w rozdzielczości 800x600px, lub 1024x768px i to były dwie popularne rozdzielczości ekranów i wtedy standardową szerokością dla stron internetowych było dostosowanie do tych ekranów i tyle. Pojawiały się sondy, jakie rozdzielczości są najpopularniejsze i pod nie się dostosowywało.
Potem zaczęły się pojawiać większe panoramiczne monitory biurkowe o większych rozdzielczościach i w końcu smartfony i tablety o małych ekranach. W końcu internet mógł być w kieszeni. Jak to zmieniło projektowanie stron internetowych ?
Wprowadzono technologię Responsive Web Design (RWD), czyli podejście do projektowania stron internetowych, które umożliwia dostosowanie wyglądu strony do różnych urządzeń i rozmiarów ekranów. W dzisiejszych czasach wiele osób korzysta z różnych urządzeń, takich jak smartfony, tablety i komputery, aby przeglądać strony internetowe. Dlatego ważne jest, aby strona była zaprojektowana w sposób, który umożliwia wygodne i łatwe przeglądanie bez względu na to, jakie urządzenie jest używane. Responsive Web Design opiera się na technologiach takich jak HTML5, CSS3 i JavaScript, a także na zasadzie "mobile-first", czyli projektowania strony z myślą o urządzeniach mobilnych. Strony responsywne dostosowują wygląd, wielkość czcionki, rozmieszczenie elementów i układ strony w zależności od rozmiaru ekranu urządzenia. Dzięki temu użytkownik może łatwo przeglądać stronę bez konieczności zoomowania lub przewijania, co poprawia jego wrażenia z użytkowania strony. Dziś od 50% do 80% użytkowników przegląda strony internetowe na smartfonie więc RWD jest standardem. Wprowadzenie RWD dużo zmieniło w projektowaniu stron internetowych.
Aplikacje NO-CODE
Uważam, że dziedzina IT działa na korzyść usprawniania pracy, niektóre zadania zostały zautomatyzowane przez programy komputerowe, chociaż jeszcze nie przez sztuczną inteligencję, ale o niej też wspomnę później. Przykładowo człowiek obsługujący komputer i operujący po interfejsie oprogramowania wykonuje jakieś zadanie, które wykona w kilka lub kilka naście minut, a napisany program komputerowy po wpisaniu polecenia lub wyklikaniu wykona zadanie w kilka sekund. Jest to proces automatyzacji zadań, który przyśpiesza i ułatwia pracę. Wspomniałem o tym wcześniej na przykładzie programu Adobe Dreamweaver gdzie kilkoma kliknięciami w parę sekund można było uniknąć pisania kodu HTML, co przyspieszało pracę. Taka automatyzacja towarzyszyła mi w pracy na co dzień i rozwijała się na przestrzeni ostatnich lat, aż przyszedł czas na rewolucje w projektowaniu stron internetowych w postaci aplikacji NO-CODE, chociaż wiem, że wiele osób może nie zrozumieć tej rewolucji, ponieważ nie przeszła podobnej drogi jak ja, bo dziś od razu nauczyli się korzystać z narzędzi NO-CODE i promują się jako guru i eksperci w tworzeniu stron internetowych.
Jak zmieniło się projektowanie stron internetowych dzięki NO-CODE ?
Aplikacja No-Code to narzędzie, które umożliwia tworzenie aplikacji czy strony internetowej bez konieczności posiadania umiejętności programowania. Zamiast kodowania aplikacji od zera, No-Code wykorzystuje interfejs graficzny, który pozwala użytkownikom na projektowanie aplikacji za pomocą prostych elementów takich jak formularze, pola tekstowe, przyciski i inne. No-Code umożliwia również integrację z różnymi zewnętrznymi aplikacjami i narzędziami, takimi jak CRM, CMS, systemy płatności i inne. Dzięki aplikacjom No-Code, osoby bez doświadczenia w programowaniu mogą tworzyć własne aplikacje, co otwiera zupełnie nowe możliwości dla biznesu i przedsiębiorstw. No-Code umożliwia szybkie tworzenie aplikacji, a także pozwala na łatwe wprowadzanie zmian i dostosowywanie aplikacji do potrzeb użytkowników. Wprowadzenie No-Code do procesu tworzenia aplikacji i stron internetowych przyspiesza również cały proces, co oznacza, że aplikacje można dostarczać do użytkowników szybciej. W sumie No-Code jest doskonałym narzędziem dla osób, które chcą tworzyć bez konieczności posiadania umiejętności programowania. Dzięki No-Code proces tworzenia aplikacji jest prostszy, szybszy i bardziej elastyczny, co przyczynia się do poprawy efektywności biznesowej i zwiększenia konkurencyjności na rynku. Jednak ja wiedząc, jak zmieniały się strony internetowe w ciągu ostatniej dekady, uważam, że sama znajomość aplikacji No-Code bez znajomości struktur HTML i stylów CSS nie przekłada się na profesjonalne tworzenie stron internetowych.
Popularną aplikacją No-Code jest WebFlow i wiele podobnych projektów, z czego WebFlow jest najbardziej pro, bazując właśnie na strukturach HTML i CSS stosując projektowanie blokowe i pudełkowe i aby to zrozumieć trzeba mieć wiedzę na temat DIV w strukturze HTML, wtedy szybko zrozumie się logikę programu, w którym zupełnie bez pisania kodu można zrobić profesjonalną stronę internetową. Edytowanie strony odbywa się za pomocą interfejsu wizualnie i widać w nim dużo ustawień nawiązujących do stylów CSS więc znajomość HTML+CSS pomaga w obsłudze i projektowaniu w WebFlow i wielu innych podobnych aplikacjach.
Inne popularne aplikacje tego typu to Wix, Squarespace, Weebly, Site123 oraz Jimdo, WGoDaddy Website Builder i wiele innych. Każdy z tych Web Builderów ma swoje zalety i wady, dlatego ważne jest, aby wybrać ten, który najlepiej odpowiada potrzebom i wymaganiom.
Web Buildery - jak zmieniły projektowanie stron internetowych?
Web Builder to pokrewna nazwa dla aplikacji No-Code, ale należy wspomnieć o popularnym CMS, jakim jest WordPress i dedykowanych pod niego builderów takich jak Divi, Beaver Builder, Visual Composer czy Brizy, lecz najpopularniejszym w branży jest Elementor chyba przez ilość dodatków, motywów i prostotę jego obsługi. WordPress wprowadził swój wbudowany edytor Gutenberg i właśnie kiedyś porównano Gutenberga z Elementorem i wyciągnięto wnioski, że Gutenberg generuje bardziej przejrzysty kod HTML niż Elementor, przez co strona jest bardziej zoptymalizowana i szybciej się ładuje. Obecnie dobrym rozwiązaniem jest stosowanie CMS WordPress i Gutenberga w połączeniu ze wtyczką Spectra, która daje dodatkowe funkcje dla edycji bloków. Takie buildery wewnątrz WordPressa usprawniła edycję stron internetowych bez znajomości języków programistycznych. Jednak wydaje mi się, że każdy szanujący się web master/designer przyzna mi rację, że bez podstaw programowania można tylko zamulić CMS poprzez ilość instalowanych wtyczek, gdzie można czasem napisać parę linijek kodu, aby nie instalować jakiejś wtyczki w WP, więc dla zaawansowanych stron bez programowania się nie obejdzie, ale jest taka możliwość dzięki builderom, aby w ogóle nie zaglądać do kodu strony internetowej. Wszystkie wspomniane narzędzia testuje i wykorzystuje, a także miałem przyjemność administrować strony internetowe dla klientów na kilku wspomnianych builderach, ale spośród wielu builderów ja znalazłem swój spełniający wszystkie moje wymagania, lecz nigdzie w tym wpisie o nim nie wspomniałem, ponieważ nie zyskał takiej popularności jak wspomniane wcześniej co mnie dziwi, ponieważ jest lekki, generuje prosty kod, przez co strona ładuje się szybko, a sam interfejs przypomina trochę ten ze znanego i cenionego programu Figma. Nie zdradzę jego nazwy, niech to będzie moja tajemnica i nie będę się zbytnio o nim rozpisywał, po prostu ma wszystkie funkcje, jakie potrzebuje i działa blokowo i podobnie jak inne podobne, dodatkowo jest stale rozwijany i aktualizowany.
Projektowanie UI/UX
Jak zmieniło się projektowanie stron internetowych ? UI/UX to pojęcia związane z projektowaniem interfejsu użytkownika i doświadczenia użytkownika. UI (User Interface) odnosi się do projektowania graficznego, układu i funkcjonalności elementów interfejsu, natomiast UX (User Experience) dotyczy projektowania całego procesu interakcji użytkownika z produktem. Projektowanie UI/UX jest bardzo ważne dla tworzenia intuicyjnych i przyjaznych dla użytkowników stron internetowych, aplikacji mobilnych czy oprogramowania. Zrozumienie potrzeb użytkowników oraz ich zachowań na stronie internetowej jest kluczowe, aby zaprojektować optymalne rozwiązania. Dziedzina UX w ostatnich latach mocno zakorzeniła się na polskim rynku i jest duże zapotrzebowanie na tego typu specjalistów. Ja sam dużo zagłębiam technik i praktyk stosowanych w user experience, czytam badania, wyniki czy sondaże, które pozwalają mi zrozumieć potrzeby użytkowników oraz ich zachowań na stronie internetowej czy w aplikacji mobilnej. Dzięki zebranym danym mogę przeprowadzić analizę UX, która pozwala na dopracowanie interfejsu, tak aby spełniał potrzeby użytkowników. Bardziej uważam się za UI-owca niż UX-owca, ponieważ projektuje interfejsy, ale łącze te dwie dziedziny UI/UX z przewagą na UI i zagłębiam pojęcia UX. Stosowanie dobrych praktyk czy design systemów pozwala projektować strony internetowe o optymalnych rozwiązaniach dające dobre doświadczenia dla użytkowników. Kiedyś uczono mnie Web Usabilty, czyli użyteczności strony internetowej, lecz wtedy nie było jeszcze pojęcia UX, rozwinęło się dopiero w ostatnich latach. Dziś Web Usabilty jest częścią wiedzy UX-owca. Wszystkie te pojęcia UI/UX przyczyniły się na jakość w projektowaniu aplikacji i stron internetowych.
Sztuczna inteligencja
Już od ponad pół roku trwa fenomen sztucznej inteligencji np. Midjourney do generowania obrazów zdumiewającej jakości poprzez wpisywanie poleceń „prompt”. W zasadzie to się śmieje i czekam na oferty pracy pod nazwą coś w stylu „Prompt Master”, czyli specjalisty od wpisywania poleceń dla sztucznej inteligencji. W skrócie wpisywanie odpowiedniego polecenia w języku angielskim, czyli dobieraniu odpowiednich słów i poleceń wskazuje się SI, co ma zrobić. Im sprawniej napisze się polecenie, tym dokładniejszy i lepszy będzie wynik sztucznej inteligencji. Midjourney powala jakością generowanych obrazów, o czym wiele osób zdążyło się już przekonać. To narzędzie AI można wykorzystywać w projektowaniu graficznym do tworzenia szybkich konceptów przykładowo interfejsów stron internetowych i późniejsze projektowanie na ich bazie lub tworzenia innych obrazów przydatnych komercyjnie. W ostatnim czasie wyszła wersja Midjourney 5.1, która generuje obrazy jeszcze doskonalej z większymi szczegółami, aż trudno powiedzieć, że wygenerowała ją SI. Pojawiają się opinie, że wykosi grafików, lecz moim zdaniem na tym poziomie tylko umiejętnie wspomoże, bo jest to tylko generator obrazów, a nie samodzielny projektant graficzny. Chociaż technologia się rozwija i zobaczymy, co będzie umieć za rok. Niestety obecnie Midjourney nie ma już opcji darmowej i jest dostępny tylko w subskrypcji miesięcznej lub rocznej. Optymalna subskrypcja miesięczna wynosi 10$, co jest dobrą ceną za takie narzędzie wspomagające.
Kolejnym fenomenem w AI jest Chat GPT-zaawansowany model językowy stworzony przez OpenAI, oparty na architekturze GPT (Generative Pretrained Transformer). Jest to system sztucznej inteligencji, który jest w stanie generować naturalny tekst, odpowiadając na różnego rodzaju pytania oraz zadania. Chat GPT został stworzony przez przetrenowanie modelu GPT-3 na bardzo dużej liczbie danych tekstowych, co pozwoliło na zwiększenie jego zdolności do generowania naturalnego tekstu i odpowiadania na bardziej skomplikowane pytania. Model ten jest w stanie generować tekst w wielu językach, w tym również w języku polskim. Chat GPT znajduje zastosowanie w wielu dziedzinach, takich jak m.in. chatboty, systemy rekomendacyjne, redakcja treści oraz tłumaczenia językowe. Dzięki swojej zdolności do generowania naturalnego tekstu, Chat GPT może pomóc w usprawnieniu procesów biznesowych oraz poprawie interakcji z użytkownikami. Chat GPT potrafi też programować, po wpisaniu polecenia może napisać stronę internetową, czyli napisać kod HTML i CSS, ale trzeba wpisać odpowiednie polecenia, co ma być na stronie itp. Testowałem i jest to możliwe już w wersji darmowej.
Chat GPT pomógł mi również w pisaniu tego artykułu, wydałem mu polecenie, aby napisał mi czym jest HTML5+CSS3, czym jest RWD i aplikacja NO-CODE oraz co to jest UI/UX. Część jego odpowiedzi wplotłem w swoją ręcznie napisaną treść. Chcę przez to pokazać, że niektóre treści może nam napisać Chat GPT lub podpowiedzieć. Szczerze niektóre definicje Chat GPT lepiej napisał, niż miałbym sam opisywać, co pokazuje, że jest ode mnie lepszym pisarzem.
Jak ogólnie wiadomo Chat GPT w wersji darmowej, czyli wersja 3 ma dane do 2021 roku, więc nie są aktualne. Wersja płatna Chat GPT 4 to koszt około 20$ miesięcznie. GPT-4 ma aktualną bazę wiedzy i dosknalsze możliwości w pisaniu tekstu. Microsoft podpiął do przeglądarki Bing Chat GPT-4 i ma dostęp do Internetu. Ogólnie Chat w Bing działa zdumiewająco świetnie, jak wpisałem mu polecenie „podaj 3 blogi o grafice komputerowej” to między innymi podał mój blog 😊.
Ogólnie dążę do tego, jak można wykorzystać sztuczną inteligencję w pracy, a możliwości jest sporo każdy znajdzie coś dla siebie. Trzeba jednak pamiętać, że Chat GPT nie zawsze piszę prawdę więc lepiej sprawdzić napisaną treść, zanim się jej użyje. Z tego, co zauważyłem, prowadząc dłuższą rozmowę z chatem, zaczyna tracić wątek i wtrąca nieprawdziwą treść wtedy lepiej przeczyścić historię rozmowy i wraca do normy. Co oznacza, traci wątek ? To znaczy, że podczas rozmowy z chatem prowadzisz konwersację i możesz nawiązać do pytania zadanego kilka pytań wcześniej i on pamięta wcześniejsze pytanie i odpowiedź i nawiąże do tego, przez co wątek czasem jest pogubiony i zafałszowany, ale nie zawsze. Trzeba z nim pogadać, aby go wyczuć i sobie wytrenować. Czytałem gdzieś w necie, że ktoś zadał mu pytanie i Chat GPT odpwiedział, że nie ma odpowiedzi w swojej bazie danych, następnie użytwkonik zapytał, czy ma dostęp do internetu i odpowiedział, że tak więc użytkownik kazał mu poszukać odpowiedzi w internecie i dopiero odpowwiedział na zadanie pytanie. Opisuję to, aby pokazać, że Chat GPT trzeba sobie wytrenować i czasem konkretnie napisać co ma robić, bo sam się "nie domyśli".
Jak zmieniło się projektowanie stron internetowych na przestrzeni dekady?
Na bazie moich doświadczeń dochodząc do dzisiejszej technologii, gdzie SI nas wspomaga, a branża IT, a zwłaszcza projektowanie stron internetowych, zanotowała szybki rozwój, można powiedzieć, że zmieniło się wiele wraz z pojawieniem się nowych technologii oraz zmieniających się preferencji użytkowników, zmieniały się również trendy w projektowaniu stron. W ostatniej dekadzie zaobserwować można wiele zmian w projektowaniu stron internetowych. Jednym z najważniejszych trendów jest rozwój responsywnego projektowania, które pozwala na dostosowanie strony do różnych rozmiarów ekranów. Dzięki temu strony są bardziej dostępne dla użytkowników korzystających z różnych urządzeń.
Kolejnym ważnym trendem jest projektowanie stron z myślą o użytkowniku, czyli UX/UI. Projektanci coraz bardziej skupiają się na tworzeniu stron, które są łatwe w obsłudze i intuicyjne dla użytkownika. W ten sposób użytkownicy mogą łatwo znaleźć potrzebne informacje i korzystać z funkcjonalności strony. Minimalizm jest również coraz popularniejszy w projektowaniu stron internetowych. Projektanci decydują się na prosty, minimalistyczny design, który pozwala na łatwe nawigowanie po stronie i skupienie się na najważniejszych elementach. Minimalistyczny design pozytywnie wpływa również na szybkość ładowania strony.
Dzięki tym trendom strony internetowe stają się coraz bardziej dostępne i łatwiejsze w obsłudze dla użytkowników. Projektanci strony skupiają się na tworzeniu przyjaznych dla użytkownika doświadczeń, które pozwalają na szybkie i intuicyjne korzystanie z funkcjonalności strony. Mam nadzieję, że mój osobisty przegląd jak zmieniło się projektowanie stron internetowych na przestrzeni ostatniej dekady, pokazuje rewolucje i rozwój technologiczny, a także pokazuje, czego można się obecnie uczyć, aby zająć się projektowaniem stron internetowych. Dziś są buildery, ale wiedza wcześniejsza pomaga w obsłudze takiej aplikacji No-Code no i oczywiście bez wcześniejszych technologii nie powstałyby dzisiejsze web buildery. Warto znać temat od podszewki niż wziąć pierwszy lepszy builder i oferować się jako MasterPro. Taka moja dygrsja na koniec tematu jak zmieniało się projektowanie stron internetowych.
Obrazek web builder Obraz autorstwa blossomstar na Freepik
