Verkkoliittymien luominen: mistä aloittaa

Mainos

Enemmän kuin tiili ja laasti, tietokonekoodi ja pikselit ovat 2000-luvun talouden perusta. Jos olet joskus tarkastellut selaimesi ”Sivun lähde” tai “Kehittäjän työkalut”, olet todennäköisesti törmännyt tekstin sekoitukseen ja miettinyt, kuinka se saa verkkosivun toimimaan.

Web-kehittäjät soittavat Graphical User minän käyttöliittymät (GUI) yhdessä etupään verkkosivun vastakohtana taustalle. Käyttöliittymä on mitä käyttäjä voi manipuloida, ryhtyä toimiin ja muuten käyttää. Taustaosaa voidaan pitää infrastruktuurina, joka sisältää ja tukee kaikkia etuosan tarkoittamia tietoja ja tehtäviä.

Tämä artikkeli käsittelee käyttöliittymää. Suunnittelemme alueen, jotta saat ymmärryksen eroista ja ominaisuuksista, jotka tekevät käyttöliittymästä mitä se on, ja näytä sinulle, miten Web-kehittäjien työkalujen hyödyntäminen ja hyödyntäminen on helppoa luoda houkuttelevan ja interaktiivisen webin luomiseen sivuja.

Verkkosuunnittelu vs. käyttöliittymäkehitys

Suurissa organisaatioissa suunnittelu ja kehitys ovat tehtäviä, jotka hoitavat ammattilaisryhmät, joilla on erilaiset taidot. Suunnittelijat luovat erityisen visuaalisen ja vuorovaikutussuunnittelun; käyttöliittymäkehittäjät toteuttavat sen.

Yksilölle ei kuitenkaan ole syytä rajoittaa etsintääsi: se, että olet kiinnostunut kehityksestä, ei tarkoita, että sinulla ei ole visio suunnittelusta, ja päinvastoin. Vaatimaton määrä tietoa verkkoteknologiasta tai suunnittelun periaatteista voi osoittautua erittäin hyödylliseksi urallasi tai liiketoiminnassasi.

Etuosakehitys on sekä enemmän että vähemmän koodaavaa toimintaa. Enemmän, koska sen ajattelussa on yli puolet suunnittelusta: monet käsitteet ovat peräisin painotuotannon maailmasta. Vähemmän siksi, että kun se käyttää tietokonekoodia, kyseinen koodi on lajike, joka on vähemmän monimutkainen, anteeksiantavampi ja vaatii vähemmän perustiedot ohjelmoinnista kuin muut web-ohjelmointikielet (joista monia löytyy taustasta) Mikä ohjelmointikieli opitaan - Web-ohjelmointiTänään katsomme erilaisia ​​Internet-ohjelmointikieliä, jotka ohjaavat Internetiä. Tämä on aloittelijoiden ohjelmasarjan neljäs osa. Osassa 1 opimme perustiedot ... Lue lisää .

Verkon käyttöliittymä: merkinnät, tyylilomake ja ohjelmointikielet

Useimmat verkkosivut on rakennettu kolmella tekniikalla: hypertekstin merkintäkieli (HTML), CSS-tyylisivut ja JavaScript (JS):

• Merkintäkielet kuten HTML, merkitse asiakirja tunnisteet. Tunnisteet rajaavat semanttisen sisällön ja rakentavat asiakirjan. Jäsennellyt asiakirjat voivat olla tyylistä.
• CSS on tyylisivun kieli ja tulostustyyppisten ohjeiden jälkeläiset sivukomposiittorille (joka luo lopullisen tulostettavan kuvan painokoneelle); CSS sanelee verkossa sisällön, kuten typografian ja asettelun, yleisen esityksen sekä grafiikan sijoittamisen.
• JavaScript, toisin kuin kaksi edellistä, on ohjelmointikieli. JS käsittelee vuorovaikutusta ja käyttäjän syöttämiä tietoja ja keskittyy käyttäjän tuottamiin tapahtumiin. Kuvan täyttämiseksi hiukan enemmän, tapahtumapohjaisen paradigman vastakohta on sellainen, jossa ohjelmointi suoritetaan käyttäjän syötöstä riippumatta.

HTML

Se on kulunut yli kaksikymmentä vuotta, ja HTML: n päätarkoitus on edelleen sama: erottaa lukijalle tarkoitettu teksti asiakirjan jäsentämiseen tarvittavasta rakenteesta.

Miksi tarvitset sitä

Miksi HTML on edelleen tärkeä? Yksinkertaisesti sanottuna, HTML on missä sisältösi semanttinen merkitys on. Se on tarpeen koneiden lukijoille, kuten hakukoneiden hämähäkkeille ja näytönlukijoille (saavutettavuuden kannalta). Ajan myötä semanttisen ja rakenteellisen erottamisen merkitys on ajan mittaan kasvanut eikä vähentynyt. Uusin HTML-versio (5) esitteli tunnisteet kuten

,

HTML-elementin anatomia

HTML-elementit ovat vähintään paria avaaminen ja sulkeminen, jokainen tagi suljettu , kuten kappaleitagi, alla syaanilla. Elementit voivat viedä määritteet, kuten magenta-alla, kuten "luokka", joka tekisi elementistä ryhmän jäsenen, johon HTML ja JS voivat vaikuttaa. tyyli attribuutti, jonka sisältö on kirjoitettu punaisella alla, on oikeastaan ​​tapa luoda kertaluonteinen CSS-sääntö juuri tälle elementille. (CSS kirjoitetaan parhaiten sivusto- tai sivutasolla, kuten käsittelemme alla.)

Tämän merkinnän tulos:

Pelkkä kappaleteksti täällä.

Lisäluotto (edistynyt)

Kaikenlaiset kehittäjät ovat pakkomielle toteutuksen nopeudesta. Tätä varten he optimoivat kielet itse kirjoittamisen nopeuden ja luettavien rivien luomiseksi. Tätä kutsutaan syntaattinen sokeripinnoite. HTML-yhteisö on tuottanut muutaman näistä yrityksistä.

Miksi käyttää kehittäjäkeskeistä pikakuvaketta, kun olet oletettavasti aloittelija? Luomalla asioita yksinkertaisemmalla merkinnällä, voit keskittyä tarkoitukseen, ei ilmaisuun, samalla kun validoit tavallista viimeistä. Yksinkertaistetussa merkinnässä luodut lähdetiedostot joko käännetään kelvolliseksi HTML-koodiksi tai kääntäjä heittää virheen tiettyyn rivinumeroon. Saatat huomata, että se on enemmän opettavaa kuin etsiminen puuttuvan kulmakiinnikkeen "tag-keiton" kautta. Molemmat vaativat välittäjän ohjelmiston niiden uudelleenkompiloimiseksi HTML-muotoon. (Se on ylimääräinen luotto loppujen lopuksi.)

• HAML (HTML-abstraktion merkintäkieli) | vaatii Rubiini (josta olemme miettivästi kirjoittaneet aiemmin 3 interaktiivista, hauskaa, ilmaista tapaa aloittaa Ruby-ohjelmointikielen oppiminenRuby on ilmaiseva, erittäin korkeatasoinen skriptikieli. Sitä käytetään Webissä pääasiassa osana Ruby on Rails -verkkoskehityskehystä, mutta myös erillisenä. Jos olet kiinnostunut siitä, mitä Ruby (ei ... Lue lisää ) kääntää
• Jade [Broken URL Poistettu] | vaatii Node.js (löydät täältä johdannon Mikä on solmu. JS ja miksi minun pitäisi välittää? [Verkkokehitys]JavaScript on vain asiakaspuolen ohjelmointikieli, joka toimii selaimessa, eikö niin? Ei enää. Node.js on tapa käyttää JavaScriptiä palvelimella; mutta se on niin paljon enemmänkin. Jos... Lue lisää ) kääntää
• Hoikka | Vaatii Rubyn kääntämistä (kuten yllä)

CSS

CSS mahdollistaa semanttisen sisällön ja asiakirjaesityksen sijoittamisen erikseen, mikä tekee tyyliohjeet, kuten asettelun, värit ja typografian siirrettävissä ja sovellettavissa eri asiakirjoihin. Kun sisältö ja visuaalinen suunnittelu ovat erillisiä, kehittäjä saa enemmän joustavuutta ja johdonmukaisuutta visuaalisessa suunnittelussa.

Miksi tarvitset sitä

Tyylitön verkkosivusto näyttää kauhealta ja houkuttelevalta. Vaikka CSS saattaa olla luettavissa, CSS on visuaalisen tiedon hierarkian kulmakivi sen mahdollistaman asettelun vuoksi. Esimerkiksi alla oleva kuva kuvaa osittain nykyistä navigointivalikkoa makeuseof.com, ilman CSS: ää.

Huomaa, että typografian ja värin lisäksi, tyylittämätön valikko on pystysuora, koska se on selaimen oletus tyyli. On epätodennäköistä, että haluat luoda uuden vuoden 1990 Internetin, joten haluat terveellisen ja jatkuvan annoksen CSS-tietämystä ollakseen todella pätevä. Lisäksi erikokoisten ja kytkettyjen laitteiden, kuten iPhones, tablet, et cetera, nousun myötä Tärkeimmistä taidoista on tullut “Responsive Design” tai verkkosivut, jotka mukautuvat eri näytöihin kokoja. Kaikki tämä tapahtuu CSS: n kautta.

CSS-säännön anatomia

CSS-säännöt kirjoitetaan yhteen kolmesta kohdasta: a) elementin sisällä, b) luomalla

Ihannetapauksessa tyylit kirjoitetaan erillisillä tyylisivuilla, joihin useat verkkosivut voivat viitata. Käyttämällä samoja sääntöjä kirjoittajat voivat säästää aikaa ja luoda visuaalisia esityksiä, joissa on enemmän järjestystä ja johdonmukaisuutta. (Sisäiset tyylit eivät voi auttaa sinua muodostamaan sivusto- tai jopa koko sivutyylin kallioperää - siksi niitä käytetään parhaiten säästeliäästi tiettyjen tarpeiden tyydyttämiseen.)

CSS-säännöt alkavat merkillä valitsin, kirjoitettu alla vihreänä. Tässä tapauksessa säännön valitsin on pkohtaan: sääntöä sovelletaan kappaleiden elementteihin. Sääntö on suljettu {kiharaketjuihin}, toisin kuin . Tässä tapauksessa sääntö tekee kappaletekstin kirjasintyypin normaaliksi.

CSS-säännöt voivat olla monimutkaisempia ja monimutkaisempia kuin tämä johdanto sallii. Siksi varatun ajan suhteen voit odottaa CSS: n hallitseminen vie paljon kauemmin kuin HTML.

Lisäluotto (edistynyt)

Aivan kuten HTML, CSS: llä on myös optimointinsa niille, jotka haluavat saavuttaa enemmän, nopeammin.

• SASS (ja SCSS) | Vaatii Ruby, kuten yllä
• Vähemmän | Vaatii Node.js, kuten yllä

JavaScript

Kun monet ihmiset ajattelevat koodausta, he ajattelevat sitä tietokoneen ohjaamiseksi mitentehdä jotain. Tämä on ohjelmointikielen tehtävä, viimeinen lisäys käyttöliittymään.

Ohjelmointikielet luokitellaan yleensä abstraktitasolla, jota he käyttävät semantiikassa, esi-kielellään, paradigmat, ja heidän konekirjoituksia. JavaScript uhmaa yksinkertaista luokittelua, koska sitä on laajennettu niin moniin kehyksiin sopimaan niin moniin eri tarkoituksiin. Se on joustava, epämääräisesti johdettu C-perheestä, moniparadigma, löysästi tyypillinen hybridi kameleontti, joka pelaa koodauskäsitteillä varustettua harakkaa. Se on joko loistava esimerkki hyvin yleiskielisestä tai erittäin huono esimerkki monista erityyppisistä kielistä.

Miksi tarvitset sitä

Miksi oppia JavaScriptiä? Kuten kollegani huomauttaa, JavaScriptillä on mestareitaan ja väärinkäyttäjiään 6 helpointa ohjelmointikieltä aloittelijoilleOhjelmoinnissa on kyse oikean kielen löytämisestä yhtä paljon kuin editointiprosessissa. Tässä on kuusi parasta helpointa ohjelmointikieltä aloittelijoille. Lue lisää , etenkin kun se soveltuu ensimmäistä kertaa oppijoille. se on mahdollisesti tämän päivän suosituin ohjelmointikieli. JS: n opiskelu Jyyn Rubyn tai PHP: n rinnalla on hyvä peruste, vaikka se ei tarjoa vahvaa perustaa ymmärtää muu koodauskunta.

Vanilla JS ei kuitenkaan mene kovinkaan pitkälle - kehykset vastaavat nykypäivän verkkosivuista.

Suositut kehykset

• Kulmainen, Googlen JS-kehys verkkosovelluksille, kuten GMail ja muut.
• jQuery Verkon tekeminen interaktiiviseksi: Johdatus jQueryynjQuery on asiakaspuolen komentosarjakirjasto, jota lähes kaikki nykyaikaiset verkkosivustot käyttävät - se tekee verkkosivustoista vuorovaikutteisia. Se ei ole ainoa Javascript-kirjasto, mutta se on kehittynein, tuetuin ja eniten käytetty ... Lue lisää , jota MUO on jo kattanut täällä Verkon tekeminen interaktiiviseksi: Johdatus jQueryynjQuery on asiakaspuolen komentosarjakirjasto, jota lähes kaikki nykyaikaiset verkkosivustot käyttävät - se tekee verkkosivustoista vuorovaikutteisia. Se ei ole ainoa Javascript-kirjasto, mutta se on kehittynein, tuetuin ja eniten käytetty ... Lue lisää , joka käyttää WordPressiä muiden sovellusten joukossa.
• suhtautua, jonka on suunnitellut Facebook-tekniikan legioonat, on tarkoitettu käyttöliittymien luomiseen.

Lisäluotto (edistynyt)

JavaScriptin palimpsest-luonto pyytää rakenteen määräämistä. Jokainen alla olevista sokerikerroksista kulkee jollain tavalla toteuttamiseen

• CoffeeScript | Vaatii Node.js, kuten yllä
• konekirjoitusteksti | Vaatii Node.js, kuten yllä

Mistä aloittaa oppiminen

Koska käyttöliittymän kehitystä pidetään nykyään laajalti kriittisenä ammattitaitona kaikenlaisille tietotyöntekijöille, löydät monia lähtökohtia verkko-opiskelukurssien muodossa. Tässä on kuratoitu luettelo, jonka teimme lukijoillemme:

• Coursera (Maksettu)
  Coursera kerää verkkokursseja yliopistoilta ja oppimislaitoksilta. Hintaluokka laskee kurssin 50–250 dollarista, mutta ne mainostavat korkeatasoista tietämystä ja korkean osaamisen tuloksia.
• Yleiskokouksen viiva (Vapaa)
  Yleiskokous on suosittu vaihtoehto maksetulle ammatilliselle koulutukselle. Dash on heidän ilmainen tarjouksensa, ja se kattaa HTML / CSS / JS.
• MakeUseOf.com - Opi koodaamaan 2017 -paketti (Maksettu, pistoke)
  Elinikäinen pääsy kymmeneen luokkaan, jotka kattavat web-sovellusten etu- ja takaosakehityksen, jopa 20 USD.
• Mozilla-kehittäjäverkosto (Vapaa)
  MDN on arvovaltainen, mutta osallistuu dokumentointityyliin enemmän kuin luokkahuonetyyppisiin ohjeisiin tai pelkästään online-tarjouksiin.
• Puuhun rakennettu maja (Maksettu)
  Toinen verkkotarjous, tämä maksoi kuukaudessa kurssin sijasta. Tämä tulee Karen X Chengin suosituksesta hänen virustapauksessa ”Kuinka saada työpaikka suunnittelijana menemättämättä suunnittelukouluun.”
• Envato Tuts +: n verkkosuunnitteluohjeet (Sekoitettu yhtä laadukasta ilmaista ja maksettua sisältöä)
  Kerros kertaluonteisia artikkeleita ja moniosaisia ​​sarjoja korkealaatuista, tarkkaa ja kohdistettua tietoa, joka yleensä kuuluu yhdestä aiheesta.

Päästä alkuun

Yksi eduista, joita front-end-kehityksellä on aloittelijalle, on, että suurin osa siitä ei vaadi kalliit omat työkalut: käyttöliittymäkehityksen tärkein työkalu on tekstieditori, joka on yhdistetty tietokoneesi selaimeen valinta:

• Tekstieditorit kuten Gitin Atom-tekstieditori, Ylpeä teksti (maksettu) tai Microsoftin VS-koodi
• Selaimet, kuten Mozilla Firefox tai Google Chrome
• On hyödyllistä, mutta tämän artikkelin ulkopuolella, että sinulla on isäntä tai paikallinen palvelin (kuten XAMPP) perustaa.

Kätevämpiä, jos vähemmän pysyviä vaihtoehtoja ovat verkkopohjaiset suoratoimittajat, kuten:

• Codepen.io
• JSbin.com

Lyhyt leikkaus

HTML-rakenteet ovat suurimmaksi osaksi hyvin ymmärrettyjä, eivätkä ne ole juuri sen arvoisia, että näppäillä uudelleen uudella taajuudella. CSS: n keskimääräinen sivuston tyylitaulukko on tuhansia rivejä pitkä, ja voit panostaa, että muutama moderni kirjoitetaan yksinomaan käsin. Ja vuorovaikutteisuuden suhteen on ilmennyt tiettyjä normeja. Näiden tosiasioiden perusteella huomaat, että monet käyttöliittymäkehittäjät käyttävät valmiiksi rakennettuja kehyksiä selkärankaksi ja säätävät, poistavat tai korvaavat tarvittaessa.

• bootstrap, jonka alun perin kehitti Twitter, sisältää HTML-, CSS- ja JS-malleja, joita löytyy nykyään laajasti verkosta. Bootstrap on melkein a lingua franca Web-kehityksen alussa.
• perusta laskuttaa itsensä maailman edistyneimmäksi kehykseksi, ja rakennetaan painottaen pienikokoisuutta ja nopeutta.

Viitemateriaali

• Lista Apart - A-listan julkaisu, "ihmisille, jotka tekevät verkkosivuja"
• Voinko käyttää - “HTML5: n, CSS3: n jne. Tukitaulukot”
• CSS-Tricks - Keskusta CSS-yhteisölle ja tietämys parhaista käytännöistä ja yhteensopivuudesta
• HTML Living Standard -dokumentaatio - ”Elintaso - Edition web-kehittäjälle”
• HTML5 kiitos - “Käytä uutta ja kiiltävää vastuullisesti”
• Smashing Magazine - ”Ammattimaisille verkkosuunnittelijoille ja kehittäjille”

johtopäätös

Toivomme, että nautit tästä suuntautumisesta käyttöliittymän maailmaan. Kuten huomaat, käyttöliittymäkehitys on kenttä, joka on täynnä paljon mahdollisuuksia, mutta jolla on monia lähtökohtia. Sen oppiminen lisää vaikuttavan taiton portfolioni ja antaa sinulle mahdollisuuden siirtyä urasi seuraavaan vaiheeseen tai siirtyä kokonaan uuteen.

Kehittäjät: Mitä edessäsi olevassa pinossa on?

aloittelijoille: Mitä muuta voisimme sisällyttää sinua suunnistamaan?