Zgodovina izdelave spletnih strani in spletnega oblikovanja

Zgodovina izdelave spletnih strani in spletnega oblikovanja …  Čeprav je spletno oblikovanje precej novo področje, ga je mogoče povezati z drugimi področji, kot je npr. grafično oblikovanje. Toda na spletno oblikovanje je mogoče gledati tudi s tehnološkega vidika. Postaja namreč velik in pomemben del vsakdanjega življenja ljudi. Težko si je predstavljati internet brez animirane grafike, različnih stilov tipografije, ozadja in seveda drugih interaktivnih vsebin, kot so npr. videi.

Leta 1989 je Tim Berners-Lee med delom v CERN-u predlagal oblikovanje globalnega projekta hiperteksta, ki je pozneje postal znan kot svetovni splet (world wide web). Med letoma 1991 in 1993 se je tako rodil svetovni splet. Spletne strani, ki so samo besedilo, si lahko ogledate s preprostim brskalnikom v vrstnem redu. Leta 1993 sta Marc Andreessen in Eric Bina ustvarila brskalnik Mosaic.

Začetek spletnega in spletnega oblikovanja

Takrat je bilo več brskalnikov, vendar je bila večina Unixovih in seveda besedila težka. Za elemente grafičnega oblikovanja, kot so slike ali zvoki, ni bilo integriranega pristopa. Mozaik brskalnik je zlomil ta model. W3C je bil ustanovljen oktobra 1994, da bi “razvil celoten potencial svetovnega spleta z razvojem skupnih protokolov, ki spodbujajo njegov razvoj in zagotavljanje njegove interoperabilnosti.”  To je odvrnilo eno podjetje od monopolizacije pravilnega brskalnika in programskega jezika, ki lahko spremenila učinek svetovnega spleta kot celote. W3C nadaljuje z določanjem standardov, ki jih danes lahko vidimo s JavaScriptom. Leta 1994 je Andreessen ustanovil podjetje Communications Corp, ki je kasneje postal znan kot Netscape Communications, brskalnik Netscape 0.9. Netscape je ustvaril lastne HTML oznake, ne glede na tradicionalni standard. Netscape 1.1 je na primer vseboval oznake za spreminjanje barv ozadja in oblikovanje besedila s tabelami na spletnih straneh. V letih od 1996 do 1999 so se začele vojne brskalnikov, saj sta se Microsoft in Netscape borila za končni prevladujoči položaj brskalnika. V tem času je bilo na tem področju veliko novih tehnologij, predvsem Cascading Style Sheets, JavaScript in Dynamic HTML. Na splošno je konkurenca v brskalniku privedla do številnih pozitivnih kreacij in je pomagala pri hitrem razvoju spletnega oblikovanja.

 

Razvoj spletnega oblikovanja

Leta 1996 je Microsoft izdal svoj prvi konkurenčni brskalnik, ki je bil opremljen z lastnimi funkcijami in oznakami. To je bil tudi prvi brskalnik, ki je podpiral slogovne liste, ki so bili takrat obravnavani kot nejasna tehnika avtorstva.Oznaka HTML za tabele je bila prvotno namenjena prikazovanju tabelarnih podatkov. Vendar so oblikovalci hitro spoznali potencial uporabe tabel HTML za ustvarjanje kompleksnih postavitev v več stolpcih, ki sicer niso bile možne. V tem času, kot se je zdelo, da sta oblikovanje in dobra estetika imela prednost pred dobro strukturo pribitkov, in semantiki in spletni dostopnosti je bilo posvečeno le malo pozornosti. Spletne strani HTML so imele omejene možnosti oblikovanja, še bolj pa starejše različice HTML-ja. Da bi ustvarili zapletene modele, so morali mnogi oblikovalci spletnih strani uporabiti zapletene strukture tabel ali celo uporabiti prazne spacer .GIF slike, da bi preprečili, da bi se prazne celice tabele zrušile. [6] CSS je bil uveden decembra 1996 s strani W3C za podporo predstavitvi in ​​postavitvi. To je omogočilo, da je koda HTML semantična in ne tako semantična kot predstavitvena, izboljšana spletna dostopnost, glej tableless spletno oblikovanje.

 

Leta 1996 je bil razvit Flash (prvotno znan kot FutureSplash). V tem času je bilo orodje za razvoj vsebine Flash relativno preprosto v primerjavi z zdaj, z osnovnimi orodji za postavitev in risanje, omejenim predhodnikom ActionScripta in časovnim razporedom, vendar je oblikovalcem spletnih strani omogočilo, da presežejo točko HTML, animirane GIF-je in JavaScript . Ker pa je Flash zahteval vtičnik, se je veliko spletnih razvijalcev izogibalo uporabi zaradi strahu pred omejitvijo tržnega deleža zaradi pomanjkanja združljivosti. Namesto tega so se oblikovalci obrnili na gif animacije (če se niso popolnoma odrekli uporabi gibalne grafike) in JavaScript za pripomočke. Vendar so prednosti Flasha dovolj priljubljene med določenimi ciljnimi trgi, da bi sčasoma prišle do velike večine brskalnikov in dovolj močne, da bi jih lahko uporabili za razvoj celotnih spletnih mest. [6]

 

Konec prvih vojn v brskalniku

Leta 1998 je Netscape izdal kodo Netscape Communicator v okviru odprtokodne licence, ki je tisočim razvijalcem omogočila sodelovanje pri izboljšanju programske opreme. Vendar pa so se odločili začeti od začetka, ki je vodil razvoj odprtokodnega brskalnika in kmalu razširil na popolno aplikacijsko platformo. [5] Oblikovan je bil projekt spletnih standardov, ki je spodbujal skladnost brskalnikov s standardi HTML in CSS z ustvarjanjem testov Acid1, Acid2 in Acid3. 2000 je bilo veliko leto za Microsoft. Za Mac je bil izdan Internet Explorer; to je bilo pomembno, saj je bil prvi brskalnik, ki je v celoti podpiral HTML 4.01 in CSS 1 in dvignil bar v smislu skladnosti s standardi. To je bil tudi prvi brskalnik, ki v celoti podpira format slike PNG. [5] V tem času je bil Netscape prodan AOL-u in to je bilo videti kot uradna izguba Netscapea v Microsoftu v vojnah brskalnikov. [5]

 

2001–2012

Od začetka 21. stoletja naprejb se je vse bolj vključevalo v življenja ljudi. Ker se je to zgodilo, se je nadaljevala tudi tehnologija spleta. Prav tako je prišlo do pomembnih sprememb v načinu, kako ljudje uporabljajo in dostopajo do spleta, in to je spremenilo način oblikovanja spletnih mest.

 

Od konca vojn brskalnikov [ko?] So bili izdani novi brskalniki. Mnoge od teh so odprtokodne, kar pomeni, da se nagibajo k hitrejšemu razvoju in bolj podpirajo nove standarde. Številne [besede s podlasicami] menijo, da so nove možnosti boljše od Microsoftovega Internet Explorerja.

 

W3C je izdal nove standarde za HTML (HTML5) in CSS (CSS3), kot tudi nove API-je za JavaScript, vsak kot nov, vendar individualen standard. [Kdaj?] Čeprav se izraz HTML5 uporablja le za sklicevanje na novo različico HTML in nekateri API-ji JavaScripta, je postalo običajno, da ga uporabljamo za sklicevanje na celotno zbirko novih standardov (HTML5, CSS3 in JavaScript).

 

Orodja in tehnologije

Spletni oblikovalci uporabljajo različna orodja, odvisno od tega, v katerem delu proizvodnega procesa so vključeni. Ta orodja se sčasoma posodabljajo z novejšimi standardi in programsko opremo, vendar načela ostajajo enaka. Spletni oblikovalci uporabljajo urejevalnike vektorskih in rastrskih grafičnih elementov za ustvarjanje spletnih slik ali prototipov za oblikovanje. Tehnologije, ki se uporabljajo za ustvarjanje spletnih strani, vključujejo standarde W3C, kot so HTML in CSS, ki jih lahko ročno kodirate ali ustvarite z WYSIWYG programsko opremo za urejanje. Druga orodja, ki bi jih lahko uporabili spletni oblikovalci, so validatorji za označevanje [7] in druga testna orodja za uporabnost in dostopnost, da zagotovijo, da njihova spletna mesta izpolnjujejo smernice za spletno dostopnost.

 

Spretnosti in tehnike

Marketing in komunikacijsko oblikovanje

Oblikovanje trženja in komunikacije na spletni strani lahko opredeli, kaj deluje za ciljni trg. To je lahko starostna skupina ali posebna vrsta kulture; tako lahko oblikovalec razume trende svojega občinstva. Oblikovalci lahko tudi razumejo vrsto spletne strani, ki jo oblikujejo, kar pomeni, na primer, da se (B2B) načini oblikovanja spletnih strani med podjetji lahko zelo razlikujejo od spletnih strani, ki so ciljno usmerjene na potrošnike, kot je spletno mesto za maloprodajo ali zabavo. Pazljivo bi bilo treba razmisliti o tem, da estetika ali celostna zasnova spletnega mesta ne bi bila v nasprotju z jasnostjo in natančnostjo vsebine ali enostavnostjo spletne navigacije [9], zlasti na spletni strani B2B. Oblikovalci lahko upoštevajo tudi ugled lastnika ali podjetja, ki ga predstavlja, da se prepričajo, ali so prikazani ugodno.

 

Oblikovanje uporabniških izkušenj in interaktivno oblikovanje

Uporabnikovo razumevanje vsebine spletne strani je pogosto odvisno od razumevanja uporabnika, kako deluje spletno mesto. To je del oblikovanja uporabniške izkušnje. Uporabniška izkušnja je povezana s postavitvijo, jasnimi navodili in označevanjem na spletnem mestu. Od interaktivnega oblikovanja spletnega mesta je lahko odvisno, kako dobro uporabnik razume, kako lahko komunicirajo na spletnem mestu. Če uporabnik zaznava uporabnost spletne strani, je bolj verjetno, da jo bodo še naprej uporabljali. Uporabniki, ki so usposobljeni in dobro seznanjeni z uporabo spletnega mesta, lahko najdejo bolj značilen, vendar manj intuitiven ali manj uporabniku prijazen uporabniški vmesnik. Vendar pa uporabniki z manj izkušnjami manj verjetno vidijo prednosti ali uporabnost manj intuitivnega vmesnika spletnega mesta. To spodbuja trend bolj univerzalne uporabniške izkušnje in enostavnega dostopa, da se čim večjemu številu uporabnikov omogoči, ne glede na uporabniško znanje. [10] Velik del oblikovanja uporabniške izkušnje in interaktivnega oblikovanja se upošteva pri oblikovanju uporabniškega vmesnika.

 

Napredne interaktivne funkcije lahko zahtevajo vtičnike, če ne napredne jezikovne spretnosti kodiranja. Če odločite, ali boste uporabljali interaktivnost, ki zahteva vtičnike, je odločilna odločitev pri oblikovanju uporabniške izkušnje. Če vtičnik pri večini brskalnikov ni vnaprej nameščen, obstaja tveganje, da uporabnik ne bo imel niti znanja in potrpljenja, da bi namestil vtičnik samo za dostop do vsebine. Če funkcija zahteva napredne jezikovne spretnosti kodiranja, je lahko preveč drago v času ali denarju za kodiranje v primerjavi s količino izboljšave, ki jo bo funkcija dodala uporabniški izkušnji. Obstaja tudi tveganje, da napredna interaktivnost ni združljiva s starejšimi brskalniki ali konfiguracijami strojne opreme. Objavljanje funkcije, ki ne deluje zanesljivo, je potencialno slabše za uporabniško izkušnjo kot da ne poskuša. Od ciljne skupine je odvisno, če je verjetno, da bo potrebna ali vredna tveganj.

 

Postavitev strani

Del oblikovanja uporabniškega vmesnika je odvisen od kakovosti postavitve strani. Oblikovalec lahko na primer med načrtovanjem postavitve razmisli, ali naj bo postavitev strani spletnega mesta skladna na različnih straneh. Širina pikslov strani se lahko šteje za ključnega pomena za poravnavo objektov v načrtu postavitve. Najbolj priljubljene spletne strani s fiksno širino imajo običajno enako nastavljeno širino, ki ustreza trenutnemu najbolj priljubljenemu oknu brskalnika, na trenutno najbolj priljubljeni ločljivosti zaslona, ​​na trenutno najbolj priljubljeni velikosti monitorja. Večina strani je tudi centrirana za cestetiko na večjih zaslonih.

 

Fluidne postavitve so se povečale v priljubljenosti okrog leta 2000 kot alternativa postavitvam, ki temeljijo na HTML tabelah, in zasnovi, ki temeljijo na mreži, tako v načelu oblikovanja strani kot tudi pri tehniki kodiranja, vendar so bile zelo počasne za sprejetje. naprav za branje zaslona in različnih velikosti oken, na katere oblikovalci nimajo nadzora. V skladu s tem se lahko načrt razčleni na enote (stranske trakove, vsebinske bloke, vdelane oglaševalske površine, navigacijska območja), ki se pošljejo brskalniku in jih brskalnik vstavi v prikazno okno, kolikor je le mogoče. Ker brskalnik prepozna podrobnosti bralnikovega zaslona (velikost okna, velikost pisave glede na okno itd.), Lahko brskalnik prilagodi postavitev, ki ustreza uporabniku, postavitvam tekočin, ne pa tudi postavitev s fiksno širino. Čeprav lahko takšen prikaz pogosto spremeni relativni položaj glavnih vsebinskih enot, se lahko stranske trakove premaknejo pod besedilo telesa in ne na njegovo stran. To je bolj prilagodljiv prikaz kot trdi kodiran postavitev, ki ne temelji na oknu naprave. Zlasti se lahko relativni položaj vsebinskih blokov spremeni, medtem ko ostane vsebina znotraj bloka nespremenjena. To tudi zmanjša potrebo uporabnika, da se vodoravno pomakne po strani.

 

Odzivno spletno oblikovanje je novejši pristop, ki temelji na CSS3, in globlji nivo specifikacije na napravo znotraj slogovne strani strani z izboljšano uporabo pravila CSS @media. Marca 2018 je Google objavil, da bo uvedel indeksiranje, ki temelji na mobilnih napravah [11].

 

Tipografija

Spletni oblikovalci se lahko odločijo, da bodo različni tipi spletnih mest omejili le na nekaj, ki so podobnega sloga, namesto da bi uporabljali široko paleto pisav ali tipov pisav. Večina brskalnikov prepozna določeno število varnih pisav, ki jih oblikovalci večinoma uporabljajo za preprečevanje zapletov.

 

Prenos pisav je bil kasneje vključen v modul za pisave CSS3 in je od takrat implementiran v Safari 3.1, Opera 10 in Mozilla Firefox 3.5. S tem se je povečalo zanimanje za spletno tipografijo in uporabo prenašanja pisav.

 

Večina postavitev spletnih mest vključuje negativni prostor za razčlenitev besedila v odstavke in izogibanje besedilu, ki je poravnano s središčem. [12]

 

Motion grafika

Na postavitev strani in uporabniški vmesnik lahko vpliva tudi uporaba gibljivih slik. Izbira, ali naj se gibalna grafika uporablja ali ne, je lahko odvisna od ciljnega trga za spletno mesto. Motion grafiko je mogoče pričakovati ali vsaj bolje prejeti z zabavno orientirano spletno stranjo. Vendar pa lahko ciljno občinstvo spletnega mesta, ki ima resnejše ali formalne interese (kot so podjetja, skupnost ali vlada), meni, da so animacije nepotrebne in moteče, če so le za zabavo ali dekoracijo. To ne pomeni, da resnejših vsebin ni mogoče izboljšati z animiranimi ali video predstavitvami, ki so pomembne za vsebino. V obeh primerih lahko grafična podoba gibanja naredi razliko med bolj učinkovitimi vizualnimi ali motečimi vizualijami.

 

Motion grafike, ki jih ne sproži obiskovalec spletnega mesta, lahko povzročijo težave z dostopnostjo. Standardi dostopnosti konzorcija World Wide Web zahtevajo, da lahko obiskovalci spletnih mest onemogočijo animacije. [13]

 

Kakovost kode

Oblikovalci spletnih strani lahko menijo, da je dobra praksa, da se skladajo s standardi. To se običajno opravi z opisom, ki določa, kaj element počne. Neupoštevanje standardov ne sme povzročiti, da bi spletna stran postala neuporabna ali napačna, vendar se lahko standardi nanašajo na pravilno postavitev strani za berljivost, prav tako pa je treba zagotoviti, da so kodirani elementi ustrezno zaprti. To vključuje napake v kodi, bolj organizirano postavitev kode in preverjanje pravilnosti identifikacije ID-jev in razredov. Slabo kodirane strani so včasih kolokvijsko imenovane juhe z oznako. Preverjanje veljavnosti prek W3C [7] se lahko izvede samo, ko je izdelana pravilna deklaracija DOCTYPE, ki se uporablja za označevanje napak v kodi. Sistem identificira napake in področja, ki niso skladna s standardi spletnega oblikovanja. Te informacije lahko nato popravi uporabnik. [14]

 

Ustvarjena vsebina

Obstajata dva načina ustvarjanja spletnih strani: statično ali dinamično.

 

Statične spletne strani

Glavni članek: Statična spletna stran

Statična spletna stran shranjuje edinstveno datoteko za vsako stran statičnega spletnega mesta. Vsakič, ko se zahteva ta stran, se vrne ista vsebina. Ta vsebina se ustvari enkrat, med oblikovanjem spletne strani. Običajno je ročno izdelana, čeprav nekatera spletna mesta uporabljajo samodejni postopek ustvarjanja, podobno dinamični spletni strani, katere rezultati se dolgoročno shranjujejo kot dokončane strani. Ta samodejno ustvarjena statična spletna mesta so postala bolj priljubljena okoli leta 2015, z generatorji, kot so Jekyll in Adobe Muse.

 

Prednosti statičnega spletnega mesta so, da so bile preprostejše za gostovanje, saj je njihov strežnik potreben samo za strežnik statične vsebine, ne za izvajanje skriptov na strani strežnika. To je zahtevalo manj strežniške administracije in imelo manj možnosti za razkritje svarnostne luknje. Stranke bi lahko hitreje strežile tudi na nizkocenovnem strežniškem strojni opremi. Te prednosti so postale manj pomembne, saj se je poceni spletno gostovanje razširilo tudi na dinamične funkcije, virtualni strežniki pa so nudili visoko zmogljivost za kratke intervale po nizki ceni.

 

Skoraj vsa spletna mesta imajo statično vsebino, saj so podporna sredstva, kot so slike in slogovne datoteke, običajno statična, tudi na spletni strani z zelo dinamičnimi stranmi.

 

Dinamične spletne strani

Glavni članek: Dinamična spletna stran

Dinamične spletne strani se ustvarjajo na letalu in za ustvarjanje spletnih strani uporabljajo tehnologijo na strani strežnika. Običajno izločajo vsebino iz ene ali več podatkovnih baz v ozadju: nekatere so poizvedbe v podatkovni bazi, ki iščejo katalog ali povzemajo številske informacije, druge pa lahko uporabijo podatkovno bazo, kot je MongoDB ali NoSQL, za shranjevanje večjih enot vsebine, kot so objave v blogih ali wiki članki.

 

V procesu oblikovanja so dinamične strani pogosto posmehane ali žične z uporabo statičnih strani. Nabor znanj, potrebnih za razvoj dinamičnih spletnih strani, je veliko širši kot za statične strani, kar vključuje kodiranje na strani strežnika in baze podatkov ter oblikovanje vmesnika na strani odjemalca. Tudi srednje veliki dinamični projekti so skoraj vedno skupinsko delo.

 

Ko so se razvile dinamične spletne strani, so bile običajno kodirane neposredno v jezikih, kot so Perl, PHP ali ASP. Nekateri od njih, zlasti PHP in ASP, so uporabili pristop „predloge“, pri katerem je stran na strani strežnika podobna strukturi zaključene strani odjemalca, podatki pa so bili vstavljeni v mesta, ki jih opredeljujejo „oznake“. To je bilo hitrejše sredstvo za razvoj kot kodiranje v čisto proceduralnem kodirnem jeziku, kot je Perl.

 

Oba pristopa sta zdaj nadomestila številna spletna mesta z orodji, ki so osredotočena na aplikacije, kot so sistemi za upravljanje vsebin. Ti temeljijo na splošnih kodirnih platformah in predvidevajo, da obstaja spletna stran, ki ponuja vsebino v skladu z enim od več priznanih modelov, kot so časovno zaporedni blog, tematska revija ali spletna stran z novicami, wiki ali uporabniški forum. Ta orodja omogočajo enostavno izvajanje takšnega spletnega mesta in čisto organizacijsko nalogo, ki temelji na oblikovanju, ne da bi bilo potrebno kodiranje.

 

Urejanje same vsebine (kot tudi strani s predlogo) se lahko izvede s samim spletnim mestom in z uporabo programske opreme tretjih oseb. Možnost urejanja vseh strani je na voljo samo določeni kategoriji uporabnikov (na primer skrbnikom ali registriranim uporabnikom). V nekaterih primerih lahko anonimni uporabniki urejajo določeno spletno vsebino, ki je manj pogosta (na primer na forumih – dodajanje sporočil). Primer mesta z anonimno spremembo je Wikipedia.

 

Oblikovanje domače strani

Strokovnjaki za uporabnost, vključno z Jakobom Nielsenom in Kyleom Soucyjem, so pogosto poudarjali oblikovanje domače strani za uspeh spletnega mesta in trdili, da je domača stran najpomembnejša stran na spletni strani. [16] [17] [18] [19] Toda zdravniki iz leta 2000 so začeli ugotoviti, da naraščajoče število spletnih strani obide domačo stran, ki gre neposredno na interne strani z vsebinami prek iskalnikov, e-novic in virov RSS. Vodenje mnogih praktikov, da trdijo, da so spletne strani manj pomembne, kot misli večina ljudi. [21] [22] [23] [24] Jared Spool je leta 2007 trdil, da je domača stran spletnega mesta dejansko najmanj pomembna stran na spletnem mestu. [25]

 

V letih 2012 in 2013 so vrtiljaki (imenovani tudi »drsniki« in »vrtljivi transparenti«) postali izjemno priljubljen element oblikovanja na domačih straneh, ki se pogosto uporabljajo za predstavitev predstavljenih ali nedavnih vsebin v zaprtem prostoru. [26] [27] Mnogi praktiki trdijo, da so vrtiljaki neučinkovit element oblikovanja in škodujejo optimizaciji in uporabnosti spletnega iskalnika. [27] [28] [29]

 

Poklici

Pri ustvarjanju spletne strani sta vključeni dve glavni nalogi: spletni oblikovalec in spletni razvijalec, ki pogosto tesno sodelujeta na spletnem mestu. [30] Spletni oblikovalci so odgovorni za vizualni vidik, ki vključuje postavitev, barvanje in tipografijo spletne strani. Spletni oblikovalci bodo imeli tudi delovno znanje označevalnih jezikov, kot sta HTML in CSS, čeprav se bo obseg njihovega znanja razlikoval od enega spletnega oblikovalca do drugega. Zlasti v manjših organizacijah bo ena oseba potrebovala potrebna znanja za oblikovanje in programiranje celotne spletne strani, medtem ko bodo večje organizacije lahko imele spletnega oblikovalca, ki bo sam odgovoren za vizualni vidik. [31]

 

 

Nadaljnja delovna mesta, ki se lahko vključijo v oblikovanje spletne strani, so:

 

Grafični oblikovalci ustvarjajo vizualne podobe za spletno mesto, kot so logotipi, postavitve in gumbi

Strokovnjaki za internetno trženje, ki pomagajo ohranjati spletno prisotnost s strateškimi rešitvami za ciljanje gledalcev na spletno mesto, z uporabo tržnih in promocijskih tehnik na internetu

SEO pisateljev za raziskave in priporočajo pravilne besede, ki se vključijo v posebno spletno stran in da spletna stran bolj dostopna in najdemo na številnih iskalnikih

Internet copywriter ustvariti pisno vsebino strani za pritožbo na ciljne gledalce site [1]

Oblikovalec uporabniških izkušenj (UX) vključuje vidike oblikovanja, ki so osredotočeni na uporabnika in vključujejo informacijsko arhitekturo, uporabniško usmerjeno oblikovanje, testiranje uporabnikov, oblikovanje interakcij in občasno vizualno oblikovanje.