Możesz postrzegać narzędzia do tworzenia stron jako świeży, mile widziany dodatek do świata WordPress.

Możesz też postrzegać je jako kłopotliwe narzędzia dla oszustów i leniwych, chcących zostać projektantami stron internetowych.

Możesz nawet postrzegać je jako zwykłego szkodnika.

Jednak debata na temat zalet i wad narzędzi do tworzenia stron sięga daleko wstecz, przez całą historię projektowania stron internetowych.

Aż do początków czasu… Prawie. Dinozaury niedawno wymarły; cofnęliśmy się do poprzedniego tysiąclecia.

Rok 1999.

Wtedy nie było jeszcze programów do tworzenia stron. Jednak debata była taka sama, ukryta pod innym modnym hasłem.

W 1999 r. modnym hasłem nie było „przeciągnij i upuść” – było to „WYSIWYG” – skrót od „dostajesz to, co widzisz”.

Widzisz, Adobe nabyło edytor HTML o nazwie GoLive CyberStudio.

Adobe, będąc firmą z lat 80., szybko przemianowali ją na Adobe GoLive, w stylu Batemana.

I tak jak Patrick Bateman miał konkurenta w postaci Paula Allena, tak Adobe GoLive miał rywala: Macromedia Dreamweaver.

Dreamweaver był potężny, ale bardziej tradycyjny w swoim podejściu do tworzenia stron internetowych. Z drugiej strony GoLive: był innowacyjny!

Wśród wielu ciekawych funkcji GoLive miał siatkę układu .

Siatka układu „przeciągnij i upuść” Adobe GoLive [źródło obrazu]

Tak naprawdę, im bardziej strona internetowa przypomina drukowaną broszurę, tym lepiej. To samo tyczy się witryn opartych na technologii Flash. Jedyną różnicą było to, że na stronach Flash elementy były animowane.

Jeśli nie przepadałeś za GoLive, Dynamic HTML, Dreamweaver, Flash i innymi, alternatywą była strona w stylu GeoCities, zwykle utworzona w Microsoft Frontpage lub Netscape Composer, z kilkoma opcjami formatowania poza wyrównywaniem każdego elementu do lewej , środkowy lub prawy. Z wyjątkiem sytuacji, gdy do układu używałeś tabel. Więcej o tym za chwilę.

Rzeczywiście: strasznie okropne czasy. Pełne tandetnych animowanych przycisków GIF dla łączy e-mailowych:

W tamtych czasach ludzie CHCIELI e-maili. Żadnych rozmów o „skrzynce zerowej” ani ogłoszeniu „bankructwa e-mailowego”… Nie, raczej było tak:

„Proszę, PROSZĘ, czy ktoś mógłby wysłać mi e-mail?! Mam przycisk e-mail „animowany gołąb”! Jak możesz się oprzeć?”

…A animacja „W budowie” była spełnieniem marzeń prokrastynatora: rozwiązała wszystkie problemy związane z projektowaniem i rozwojem:)

Co się stało z GoLive?

Na fali sukcesu Flasha, Dreamweaver firmy Macromedia wygrał konkurs popularności.

Myśląc „jeśli nie możesz ich pokonać, dołącz do nich” Adobe przejął Macromedia pod koniec 2005 roku, pozwalając GoLive umierać powolną, ale pewną śmiercią przez zaniedbanie, aż do początków 2008 roku, kiedy Adobe w końcu ogłoszony przyznał, że sprzedaż i rozwój GoLive zostaną zatrzymane – na korzyść Dreamweavera.

Niestety tak.

GoLive podobał mi się znacznie bardziej niż Dreamweaver. Było to wizjonerskie, nowoczesne narzędzie do projektowania stron internetowych – siatka układu to tylko niewielka część jego atrakcyjności.

Co ciekawe, Adobe zdecydowało się także zabić Fireworks, aplikację przypominającą Sketch, przeznaczoną do tworzenia grafiki internetowej, na rzecz starego, dobrego Photoshopa. Fireworks była znakomitą aplikacją, ale Adobe zawsze traktowała ją jak niechcianego pasierba po przejęciu Macromedia.

Adobe robi tak, jak sądzę…

W każdym razie… Wracając do projektowania stron internetowych metodą „WYSIWYG” i metodą „przeciągnij i upuść”:

Doskonale pamiętam, jak GoLive był krytykowany za rozdęty kod powstały w wyniku użycia edytora Layout Grid (choć radził sobie lepiej niż Microsoft Frontpage). Smukły, szybko ładujący się kod był wtedy tak samo ważny, jak dzisiaj.

Proponowana wówczas alternatywa? Praca fizyczna, czyli ręczne kodowanie .

Proponowana dzisiaj alternatywa? Unikaj narzędzi do tworzenia stron, koduj układy ręcznie. Możesz też zadowolić się pojedynczym obszarem treści WordPress. Wykonalny? Może… Albo (może) nie.

Projektowanie stron internetowych w oparciu o tabele (to były czasy…)

Jako projektanci stron internetowych zaczęliśmy następnie ciąć naszą grafikę na kawałki i umieszczać je w komórkach tabeli. To była era projektowania stron internetowych „układu opartego na tabelach”.

Ach, to były czasy, co? Papa Bob zapomniał ukryć krawędzie stołu, ale dzięki temu powstał projekt tak stylowy jak ten:

Widzisz, jak ten obraz Leo jest wyrównany do lewej? Super, co?

Jeśli jesteś za młody, aby mieć doświadczenie w projektowaniu stron internetowych w oparciu o tabele: nie martw się. To naprawdę nie było wszystko, na co wyglądało. Bardziej jak… rozdział w książce, który można pominąć;)

Oh! I nie zapomnij:

Projektowanie stron internetowych w oparciu o ramki

Ach, te niekończące się radości związane z ramkami i ramkami iframe… Od czasów, gdy Michael Jackson był czarny, mama była jeszcze małym chłopcem, koks był czysty i biały jak śnieg i… cóż, rozumiesz o co chodzi :)

Ach, te klatki na tej japońskiej stronie anime. Oni naprawdę są kimś… mogliby chodzić, jakby byli więksi od Prince’a, prawda?

Aha, i aplety Java! Pamiętasz je? Nie mylić z JavaScriptem, są to małe pliki wykonywalne, które mogą przekręcić obraz. Możesz też umieścić pod obrazem efekt odbicia na żywo. Naprawdę okropna rzecz. Ale pamiętaj: nie mieliśmy wtedy narzędzi do tworzenia stron. Głodowaliśmy sposobów, aby nasze strony internetowe były ciekawe i piękne.

Nie żeby aplet Java pomógł w którymkolwiek z tych dwóch, ale… czasy były inne… wtedy… ehm…

Nie poddam cię prawdziwemu apletowi Java. Mogą powodować niestabilność przeglądarek. Ale ten mały GIF-anim jest całkiem podobny do apletu Java:

Parallax pokonuje aplety Java w dowolnym miejscu i czasie. Zgadzać się?

Wejdź do lśniącego ogrodu Zen, kwitnącego pięknym CSS

Brzydota dobiegła końca wraz z CSS Zen Garden.

CSS Zen Garden zapoczątkował pożar „semantycznego” projektowania stron internetowych. Początkowo tylko puryści przyjęli „XHTML” i ścisłe oddzielenie treści (XHTML) od prezentacji (CSS), ale wkrótce stało się to powszechnie akceptowane jako standardowy sposób tworzenia stron internetowych (aż do HTML5).

Wraz z semantycznym oddzieleniem treści i prezentacji nastąpiła subtelna, mile widziana reforma estetyki projektowania stron internetowych. Dlaczego? Trudno określić dokładną przyczynę, ale (IMO) strony internetowe ogólnie stały się prostsze i o wiele ładniejsze w kolejnych latach.

„Wierzcie lub nie, ale był czas, kiedy CSS nie był traktowany tak poważnie jako funkcja estetyczna strony internetowej. Dave Shea postanowił zmienić to postrzeganie, tworząc CSS Zen Garden, witrynę prezentującą różne projekty CSS, które mogą być niezwykle piękne, zabawne, funkcjonalne lub spełniać wszystkie powyższe kryteria. Ta witryna, będąca podatnym gruntem do zaprezentowania nowych koncepcji, stała się ogromnym źródłem inspiracji dla projektantów, którzy szukają nowych sposobów wykorzystania CSS.
Alec Rojas, 20 lat CSS

Plan Dave'a Shea zadziałał: spotkanie i zapoznanie się z przykładami CSS Zen Garden zmieniło moje spojrzenie na projektowanie stron internetowych. Byłem pod wrażeniem. Postanowiłem nauczyć się CSS i szybko to zrobiłem, korzystając ze świetnego samouczka CSS, który jest nadal dostępny online do dziś.

Niestety, choć CSS Zen Garden pomógł spopularyzować „semantyczne” projektowanie stron internetowych – i zreformować estetykę projektowania stron internetowych, skupiając się na prostocie i elegancji: osoby nietechniczne w dalszym ciągu nie byłyby w stanie zaprojektować własnych układów stron bez pisania HMTL i CSS, czyli więcej kodowania.

Tak więc, podczas gdy projektanci stron internetowych rozkoszowali się chwałą czystych projektów CSS, osoby nietechniczne nadal nie miały szczęścia.

Powyższa lekcja historii ma na celu to, co następuje:

Odkąd pod koniec lat 90. sieć WWW stała się głównym nurtem, projektanci stron internetowych, ich klienci, a także przeciętni „Janes” i „Joes” pragnęli dobrze zaprojektowanych, interesujących graficznie witryn internetowych – zrobionych łatwo i szybko.

Kreatory stron – drugie przyjście WYSIWYG

Cue ścieżka dźwiękowa: „Joy to the World” z Three Dog Night.

FFWD trwało kilka lat, a wraz z nimi pojawiły się potężne frameworki motywów WordPress i elastyczne supermotywy, takie jak Headway, PageLines (w tym jego wcielenie „DMS” – Design Management System), Divi i wiele innych.

I oczywiście: narzędzia do tworzenia stron WordPress – w szczególności Visual Composer.

Jego monumentalne przyjęcie na rynku sprawiło, że zapotrzebowanie na narzędzia do tworzenia stron stało się krystalicznie jasne, gdy wystartowało w 2013 roku.

Od tego czasu na scenę weszło sporo innych (i lepszych, IMO) twórców stron. Beaver Builder jest jednym z najpopularniejszych i nie bez powodu.

Projektowanie stron internetowych metodą „przeciągnij i upuść” – wreszcie naprawdę

W świetle powyższej historii: narzędzia do tworzenia stron są błogosławieństwem – jednym z siedmiu cudów współczesnego projektowania stron internetowych.

Mamy szczęście, że w końcu mamy narzędzia „WYSIWYG” / przeciągnij i upuść, na które czekaliśmy od ostatniego tysiąclecia!

Wreszcie przyszłość dogoniła nasze oczekiwania :)

A co z tobą? Czy jesteś zwolennikiem tworzenia stron – czy nadal się wahasz? Podziel się swoim komentarzem poniżej!

O Oliverze Nielsenie · WebMatros.com

Oliver Nielsen prowadzi witrynę WebMatros.com, aby pomóc odważnym, bohaterskim przedsiębiorcom indywidualnym rozwinąć skrzydła w Internecie. Prawdziwy specjalista od tworzenia treści: jest utalentowanym pisarzem, fotografem, montażystą wideo i producentem audio. Jest także myślicielem i majsterkowiczem, który rozkłada rzeczy na części, aby je w pełni przetestować i przejrzeć, uzyskując w rezultacie zaskakująco eleganckie spostrzeżenia. Kiedy nie pracuje, drwiąc ze swojego psa Muffina (prawie) bawi się tak samo, jak drwi z niego – kiedy pracuje