10 verkkosuunnittelutermiä, jotka kaikkien on tiedettävä

Aivan kuten kaikilla teknisellä alalla toimivilla teollisuudenaloilla, myös web-suunnittelussa ei ole sanoja ja lauseita, ja vaikka olisitkin kokenut ammattilainen, voi olla vaikeaa seurata mitä on.

Takaisin kun Web-suunnittelu oli lapsenkengissään, se kärsi jo liian monien lyhenteiden ja teknisen kielen ongelmasta, sillä kaiken hyperbolin alla on melko suoraviivaisia ​​tekniikoita ja ideoita. Tämän päivän ympäristö on sata kertaa monimutkaisempi, kun verkossa käytettävät työkalut ja kehykset, kielet ja kirjastot ovat kehittyneet ja edenneet.



Suunnittelijat - jopa ammattimaiset web-suunnittelijat - voivat taistella pysyäkseen kaikkien eri tunnussanojen ja tekniikoiden päällä, joten tässä olemme koonneet kymmenen tärkeintä verkkosuunnittelutermiä, joista jokaisella pitäisi olla ainakin ymmärrys. Katso alla oleva luettelo ja ilmoita meille, jos olemme unohtaneet mitään, jonka uskot ilmestyvän alla oleviin kommentteihin.



01. HTML, CSS ja JavaScript

verkkosuunnittelun ehdot: HTML5

HTML tarkoittaa HyperText Markup Language ja HTML5 on uusin versio

Otetaan tämä ulos heti alusta alkaen!



HTML

HTML on lyhenne sanoista HyperText Markup Language ja se on verkkokieli.

Yksinkertaisesti sanottuna HTML tarjoaa web-suunnittelijalle tavan kertoa verkkoselaimellesi, kuinka tiettyä sisältöä kohdellaan. HTML sisältää useita erilaisia ​​tunnisteita, joiden avulla suunnittelija voi merkitä sisällönsä semanttisella merkityksellä niin, että kappaleet tunnistetaan tekstikopiona, kun taas kuvat tuodaan kuvina ja niin edelleen.

CSS

HTML ei kuitenkaan yksin riitä kauniiden verkkosivujen luomiseen. CSS (CSS) tarjoavat suunnittelijoille menetelmän luoda visuaalinen sääntöjoukko, joka määrittää, kuinka selain renderöi verkkosivun eri elementit näytöllä.



CSS: n avulla voidaan asettaa esimerkiksi tekstin väri, tausta, sivun kaikkien eri osien koko, muoto ja sijainti.

JavaScript

Lopuksi, JavaScript on (kuten nimestä käy ilmi) komentosarjakieli, jonka avulla suunnittelijat voivat luoda vuorovaikutusta verkkosivulla.

Historiallisesti JavaScriptiä käytettiin ensisijaisesti lomakkeiden validointiin, ja se tarjosi ne ärsyttävät hälytysruudut, jotka ilmestyivät, kun unohdit kirjoittaa puhelinnumerosi puhelinkenttään. Nykyään JavaScriptiä on paljon enemmän elinkelpoisia käyttötapoja, mukaan lukien erityiset visuaaliset tehosteet tai mahdollisuus ladata uutta sisältöä lataamatta koko sivua uudelleen.

Yksi tärkeä asia on huomata, että nimestään huolimatta JavaScriptillä ei ole mitään yhteyttä Java-ohjelmointikieleen.

Lue myös:

02. Reagoiva suunnittelu

verkkosuunnittelun ehdot: Reagoiva verkkosivujen suunnittelu

Reagoivasta verkkosuunnittelusta on nopeasti tulossa standardi lähestymistapa kaikkeen verkkosuunnitteluun

Et voi olla kuulematta reagoivan suunnittelun käsitteestä. Viime vuosien ajan tämä on ollut todellinen sirinä verkossa, eikä siinä ole merkkejä pettymyksestä. Asiakkaat ovat jopa alkaneet vaatia suunnittelijoiltaan reagoivia verkkosivustoja, usein ymmärtämättä täysin mitä he pyytävät!

Yksinkertaisesti sanottuna reagoiva malli on sellainen, joka sopeutuu käyttäjän laitteeseen ja ihanteellisessa maailmassa käyttäjän kontekstiin siten, että se näyttää tarvittavan sisällön sopivimmalla ja saavutettavimmalla tavalla riippumatta siitä, millainen verkkoon liitetty laite on käytetään katsomaan sitä. Käytännössä tämä tarkoittaa, että verkkosivu sivutetaan uudelleen, kun näytön koko pienenee tai kasvaa, ja se näytetään useissa sarakkeissa, kun sitä tarkastellaan pöytätietokoneella, mutta vain yksi sarake, kun sitä tarkastellaan älypuhelimella.

Huomaa, että reagoivan suunnittelun käsite on paljon muutakin kuin pelkkä sisällön muotoilu. Lue seuraavat artikkelit reagoivasta suunnittelusta saadaksesi lisätietoja:

03. Semanttinen merkintä

verkkosivujen termit: Semanttinen merkintä

Semanttisilla merkinnöillä on kyse asiaankuuluvien metatietojen liittämisestä sisältöön

Semanttinen merkintä on lähestymistapa HTML-koodaukseen, jossa sisällön kuvaamiseen käytetyt merkintätagit tarjoavat myös asiaankuuluvia sisällönkuvaustietoja itse sisällöstä. Esimerkiksi tieto, joka liittyy sivun pääsisältöön, mutta ei suoraan sivun aiheeseen, voidaan merkitä olevan.

paras elokuva kohta ja ampua kamera

Vaikka se saattaa kuulostaa ilmeiseltä parhaiden käytäntöjen menetelmältä, ja verkko on varmasti suunniteltu semantiikkaa ajatellen, tämän lähestymistavan käyttö ei ole aina ollut suoraviivaista ...

Ensimmäiset päivät

Verkon alkuaikoina käytettävissä olevien HTML-tunnisteiden määrä oli rajallinen. Monet olemassa olevista tunnisteista olivat puhtaasti semanttisia:

Tagia käytetään esimerkiksi kappaleen sisällön merkitsemiseen.

Ajan myötä suunnittelijat halusivat työntää rajoja sille, mikä oli mahdollista luoda kehittyneempiä asetteluja kuin kieli, jota käytettiin puhtaimmillaan, joten tykkäävät

ja
Tunnisteet, jotka oli tarkoitettu merkitsemään taulukkotiedot, suunniteltiin uudelleen tarjoamaan luotettava ratkaisu sarakemallien luomiseen.

Samaan aikaan suunnittelijat alkoivat luottaa tietyn tunnisteen oletusarvoisiin visuaalisiin ominaisuuksiin määrittääkseen, mitä tagia he käyttivät sisältöön, sen sijaan, että muotoiltaisivat uudelleen semanttisesti sopivan tunnisteen malliin sopivaksi. Tämän seurauksena iso lihavoitu teksti toistettiin usein otsikkona (

,

,

jne.) -tunniste eikä a tai - korostamiseksi - tag.

kuinka saada kaikki vsco-suodattimet ilmaiseksi

Kadotettu sukupolvi

Tämän seurauksena suuri osa HTML: n semanttisesta luonteesta menetettiin sukupolvelle. Ei-semanttisen verkon haittapuoli on se, että verkkosivuston taustakoodin ylläpitäminen tai ymmärtäminen on uskomattoman vaikeaa, ja hakukoneet eivät pysty määrittämään ohjelmallisesti sivun tärkeimpiä elementtejä tarkasti.

Onneksi molempien CSS: n ja HTML-kielen uusimman version myötä kyky merkitä puhtaammalla semanttisella lähestymistavalla on palannut. CSS helpottaa kehittyneempiä asetteluja kuin se oli mahdollista

-tunniste ja HTML-kieltä on laajennettu sisällyttämään uusia semanttisesti suuntautuneita tunnisteita, kuten ja.



04. Saas

verkkosivujen ehdot: SaSS

SaaS (Software as a Service) kuvaa kaikkea Google-dokumenteista Photoshop Expressiin

Ei pidä sekoittaa SASS , SaaS on lyhenne sanoista Software as a Service. Yksinkertaisesti sanottuna tämä tarkoittaa mitä tahansa palvelua, joka tarjoaa ohjelmistoalustan, toimitettuna pilvestä tai sen kautta.

Suosittuja esimerkkejä toiminnassa olevasta SaaS-palvelusta ovat uusimmat Microsoft Office Online-, Google Docs- ja Photoshop Express -versiot.

Jokainen näistä palveluista tarjoaa käyttäjälle työpöydän kaltaisen kokemuksen, mutta ne toimitetaan suoraan verkosta ilman, että käyttäjän tietokoneeseen tarvitsee asentaa mitään lisäohjelmistoja.

05. A / B-testaus

A / B-testauksen avulla voit kokeilla verkkosivun eri versioita

A / B-testauksen avulla voit kokeilla verkkosivun eri versioita

A / B-testaus on menetelmä, jolla kokeillaan erilaisia ​​tapoja saavuttaa sama lopputulos. Tavoitteena on kokeiden avulla selvittää, mikä ratkaisu on tehokkain.

Tyypillisesti A / B-testausta käytetään verkkosivujen erilaisten ulkoasujen kokeilemiseen seuraamalla, kuinka moni käyttäjä muuntaa maksaviksi asiakkaiksi vaihtoehtoisten asettelujen avulla.

Jatkamalla iteratiivista prototyyppien muodostamista, arviointia ja mukauttamista A / B-testaus voi lisätä merkittävästi yksittäisten sivujen tulosprosenttia. Se on hyödyllinen työkalu käyttää: parempi muuntaminen tarkoittaa parempaa tasetta!

Lue myös:

  • Kuinka käyttää AB-testausta, silmänseurantaa ja Verkkosivuston optimoijaa
  • Viisi taitoa, joita tarvitset, jotta AB-testaus onnistuu
  • Tie verkkosovelluksen menestykseen: prototyypit ja käyttäjätestit

06. ILMA

verkkosivujen ehdot: ARIA

ARIA (Accessible Rich Internet Application) kuvaa tekniikoita, jotka auttavat tekemään verkon saataville

ARIA on lyhenne sanoista Accessible Rich Internet Application, ja se viittaa ajatukseen siitä, että verkkosovelluksia käyttävät monet ihmiset, joilla on erilaiset tarpeet avustavaa tekniikkaa ja asettelua varten.

ARIA: ta käytetään yleensä terminä kuvaamaan käytettyjä tekniikoita, jotka auttavat kaventamaan kuilua käyttäjän tarpeiden ja verkkosivuston tai verkkosovelluksen välillä.

Tämän seurauksena se voi viitata näytönlukuohjelmiin, rakenteellisiin asetteluihin ja suunnittelumenetelmiin, kuten käyttäjälähtöiseen käyttöliittymäsuunnitteluun, sisällön ja toiminnallisuuden parantamiseksi. W3C sponsoroi suurta osaa tällä alalla tehdystä työstä, ja voit saada lisätietoja ARIA-verkkosivusto .

Lue myös:

  • Käytä kaikkia ARIA-tiedostoja
  • 5 HTML5- ja ARIA-mallia
  • Ota kaikki irti ARIA: n maamerkkirooleista
  • ARIA: n sovellusrooli

07. Tietoarkkitehtuuri (IA)

verkkosivujen ehdot: IA

Informaatioarkkitehtuuri (IA) pyörii siitä, miten verkkosivusto on järjestetty

Informaatioarkkitehtuuri (IA) on yleinen termi, jota käytetään kuvaamaan verkkosivuston sisällön ja tiedon semanttista ulkoasua. Se viittaa tiedon organisointiin käsittelemällä mitä sivut menevät mihin verkkosivuston rakenteessa, mitä sisältöä kullakin sivulla on ja miten kukin näistä on vuorovaikutuksessa sivuston muiden sivujen kanssa.

Alana IA pyrkii siihen, että käyttäjien on mahdollisimman helppo löytää etsimänsä tiedot tuloksen, tulojen ja / tai käyttäjien tyytyväisyyden lisäämiseksi.

  • Lue myös: Miksi verkkosivuston suunnittelu on kuin talon rakentaminen

08. Palvelinpuolen komentosarjat

verkkosivujen ehdot: PHP

Palvelinpuolen komentosarjat - PHP: n kaltaista kieltä käyttäen - tarkoittavat, että tietojen käsittely tapahtuu palvelimella

On olemassa kaksi erilaista tapaa tarjota sovellustoimintoja verkkosivustolla: asiakaspuoli, jossa kaikki logiikat ja tiedonkäsittely hoidetaan verkkoselaimella JavaScriptiä käyttäen, ja palvelinpuoli, jossa tietojen käsittely suoritetaan palvelimella. Suurin osa verkkosovelluksista yhdistää nämä kaksi, joten käyttäjän näkökulmasta kaikki hoidetaan selaimessa, mutta kulissien takana tietoja lähetetään takaisin palvelimelle varastoitavaksi, manipuloitavaksi tai generoitavaksi.

Palvelinpuolen komentosarjat ovat yleinen termi kuvaamaan kieliä, joita käytetään tämän palvelinpuolen tietojen manipuloinnin ohjelmointiin. Komentosarjakielet, kuten PHP ja ASP.NET, tarjoavat suoraviivaisen tavan web-kehittäjille luoda kehittynyttä liiketoimintalogiikkaa, joka voi olla vuorovaikutuksessa tietokannan kanssa, suorittaa monimutkaisia ​​datatoimintoja ja antaa tietoja takaisin selaimeen.

Koska käsittely tapahtuu palvelimella, käyttäjän verkkoselaimen ei tarvitse työskennellä niin kovasti, mikä parantaa näennäistä suorituskykyä, ainakin käyttäjän näkökulmasta.

09. Visuaalinen hierarkia

verkkosivujen termit: Visuaalinen hierarkia

Visuaalinen hierarkia tarkoittaa suunnitteluelementtien järjestämistä niin, että jotkut korostuvat toisten yli

Tämä ei rajoitu pelkästään verkkosivujen suunnitteluun, mutta sitä käytetään yhä enemmän viitattaessa verkkosivun suunnitteluun ja ulkoasuun, joten päädyimme siihen tärkeimpien termien luetteloon. Yksinkertaisesti sanottuna visuaalinen hierarkia viittaa suunnitteluelementtien sijoitteluun sivulla siten, että tärkeimmillä elementeillä näyttää olevan enemmän korostusta.

Tämä painotus saavutetaan yleensä käyttämällä kokoa, väriä, kirjasinta ja erikoistehosteita, kuten varjot. Visuaalinen hierarkia on usein tietoinen päätös informaatioarkkitehtuuriprosessin tuloksena.

10. Ääretön / parallaksinen vieritys

Ääretön vieritys ja parallaksirullaus ovat kaksi asiaan liittyvää tekniikkaa, jotka ovat yhä suositumpia

Ääretön vieritys ja parallaksirullaus ovat kaksi asiaan liittyvää tekniikkaa, jotka ovat yhä suositumpia

Ääretön vieritys ja parallaksi ovat kaksi erillistä asiaa, mutta ne nähdään usein yhdessä, joten olemme pakanneet ne yhteen täällä.

Ääretön vieritys on tällä hetkellä trendikäs tapa esittää sivusto siten, että sen sijaan, että lataat erillisiä sivuja sisällön tarkastelemiseksi, koko sivun sisältö ladataan yhdelle sivulle, joka vierittää näyttämään erilaisia ​​sisältöalueita.

Western Digital my cloud mirror -katselmus

Lähtökohtana on, että kun käyttäjä vierittää sivua alaspäin sisällön loppupuolella, uusi sisältö ladataan ja lisätään sivun alaosaan, mikä luo 'loputtoman' vierityksen. Suosittuja esimerkkejä ovat Facebook-aikajananäkymä, Pinterest ja Tumblr.

Parallaksi on vaikutus, joka näkyy, kun näkökulmaa lähempänä olevat kohteet näyttävät liikkuvan nopeammin kuin kauempana olevat kohteet. Tämä näkyy parhaiten liikkuvasta autosta tai junasta, jossa ajoneuvon lähellä olevat aidat ja puut näyttävät liikkuvan nopeasti ohi, kun taas etäisyyden vuoret näyttävät liikkuvan hitaammin.

Verkossa tätä samaa vaikutusta käytetään luomaan syvällisyyden tunne sivustosuunnitteluun, joka tarjoaa usein liikkeen vastauksena käyttäjän vieritykseen.

Lue myös:

Sanat: Sam Hampton-Smith