Opprette webgrensesnitt: Hvor skal du begynne

Annonse

Mer enn murstein, datamaskinkode og piksler er grunnlaget for det 21. århundrets økonomi. Hvis du noen gang har sett på "Sidekilde" eller "Utviklerverktøy" i nettleseren din, har du sannsynligvis møtt et rot av tekst, og lurt på hvordan det får websiden til å fungere.

Nettutviklere ringer Graphical User Jegnterfaces (GUIs) kollektivt front-end på en webside, i motsetning til baksiden. Grensesnittet er det brukeren kan manipulere, iverksette tiltak med og på annen måte bruke. Baksiden kan tenkes som infrastrukturen som inneholder og støtter all informasjon og oppgaver implisert av frontend.

Denne artikkelen handler om frontend. Vi kartlegger territoriet slik at du kan få forståelse for distinksjoner og evner som gjør frontend hva det er, og viser deg hvordan du kan begynne å være fornuftig - og bruke - av webutviklerens verktøy for å lage tiltalende og interaktiv nett sider.

Nettdesign kontra frontend-utvikling

I store organisasjoner er design og utvikling oppgaver som utføres av team av fagfolk med forskjellige ferdighetssett. Designere ville lage et spesifikt visuelt og interaksjonsdesign; front-end utviklere ville implementere det.

For et individ er det imidlertid ingen grunn til å begrense utforskningen din: bare fordi du er interessert i utvikling, betyr ikke det at du ikke har noen visjon for design, og omvendt. En beskjeden mengde kunnskap om grunnleggende webteknologier eller designprinsipper kan vise seg å være enormt gunstig i din karriere eller virksomhet.

Front-end utvikling er både mer og mindre en kodingsaktivitet. Mer fordi det er mer enn halvparten av designen i tankegangen: mange konsepter er hentet fra printproduksjonens verden. Mindre fordi mens den bruker datakode, er den koden en rekke som er mindre kompliserte, mer tilgivende, og krever mindre grunnleggende kunnskap om programmering enn andre programmeringsspråk på nettet (hvorav mange finnes på baksiden) Hvilket programmeringsspråk å lære - nettprogrammeringI dag skal vi se på de forskjellige nettprogrammeringsspråkene som driver Internett. Dette er den fjerde delen i en nybegynner-programmeringsserie. I del 1 lærte vi det grunnleggende om ... Les mer .

Nettets front-end: Markup, stilark og programmeringsspråk

De fleste websider er konstruert med en trio av teknologier: HTML-tekst (hypertext markup language), cascading styleheets (CSS) og JavaScript (JS):

• Markeringsspråk som HTML markere et dokument med tags. Tagger avgrenser semantisk innhold og strukturerer dokumentet. Strukturerte dokumenter kan være stylet.
• CSS er en stilark språk og etterkommer av instruksjoner i utskriftsstil til en sidekomponist (som lager det endelige utskrivbare bildet for en trykkpresse); på nettet dikterer CSS presentasjonen av innhold som typografi og layout generelt, samt å plassere grafikk.
• JavaScript, i motsetning til de to foregående, er en programmeringsspråk. JS håndterer interaksjon og brukerinput, og er fokusert på hendelsene en bruker produserer. For å fylle ut litt mer i bildet, er det motsatte av et hendelsesdrevet paradigme det der programmering utføres uavhengig av brukerinput.

HTML

Det har gått over tjue år, og hovedformålet med HTML forblir det samme: å skille teksten som er ment for en leser, fra strukturen som er nødvendig for å analysere dokumentet.

Hvorfor du trenger det

Hvorfor er HTML fremdeles viktig? For å si det enkelt, HTML er der den semantiske betydningen av innholdet ditt ligger. Det er nødvendig for maskinlesere som søkemotor edderkopper og skjermlesere (for tilgjengelighet). Over tid har relevansen av å skille det som er semantisk kontra det som er strukturelt vokst snarere enn redusert over tid. Den siste versjonen av HTML (5) introduserte tags som

,

Anatomi av et HTML-element

HTML-elementer er som et minimum par åpning og lukking av koder, hver tagg vedlagt , slik som avsnitt-koden, nedenfor på cyan. Elementer kan ta egenskaper, som nedenfor i magenta, for eksempel en "klasse", som vil gjøre elementet til et medlem av en gruppe som HTML og JS kan påvirke. De stil attributt, hvis innhold er skrevet med rødt nedenfor, er faktisk en måte å lage en engangs CSS-regel bare for det elementet. (CSS er best skrevet på side- eller sidenivå, som vi vil diskutere nedenfor.)

Resultatet av denne markeringen:

Vanlig avsnitttekst her.

Ekstra kreditt (avansert)

Utviklere av alle slag er besatt av utførelseshastighet. For dette formål vil de optimalisere språkene selv for å skrive raskt og lage lesbare linjer. Dette kalles syntaktisk sukkerbelegg. HTML-samfunnet har produsert noen få av disse anstrengelsene.

Hvorfor bruke en utviklersentrisk snarvei når du, antagelig, er en nybegynner? Ved å lage ting i enklere markering, kan du fokusere på intensjonen, ikke uttrykket, mens du validerer mot en standard sist av alt. Kildefilene du genererer i den forenklede markeringen vil enten kompilere til gyldig HTML, eller kompilatoren vil kaste en feil på et spesifikt linjenummer. Du kan synes det er mer lærerikt enn å jakte gjennom "taggsopp" for en manglende vinkelfeste. De krever hver en mellomliggende programvare for å omformere dem til HTML. (Det er ekstra kreditt, tross alt.)

• Haml (HTML Abstraction Markup Language) | krever Rubin (som vi omtenksomt har skrevet om før 3 interaktive, morsomme, gratis måter å begynne å lære seg det rubin programmeringsspråketRuby er et ekspressivt, skriptspråk på høyt nivå. Den brukes hovedsakelig på nettet som en del av rammeverket for utvikling av nettet, men også frittstående. Hvis du er nysgjerrig på hva Ruby (ikke ... Les mer ) å kompilere
• Jade [Ødelagt URL fjernet] | krever node.js (finner du en introduksjon her Hva er Node. JS og hvorfor skal jeg bry meg? [Webutvikling]JavaScript er bare et programmeringsspråk på klientsiden som kjører i nettleseren, ikke sant? Ikke nå lenger. Node.js er en måte å kjøre JavaScript på serveren på; men det er så mye mer også. Hvis... Les mer ) å kompilere
• Slank | Krever Ruby for å kompilere (som ovenfor)

CSS

CSS gjør det mulig å hente semantisk innhold og dokumentpresentasjon separat, noe som gjør stilistiske funksjoner som layout, farger og typografi bærbare og gjeldende for forskjellige dokumenter. Når innhold og visuell design er separate, får utvikleren mer fleksibilitet og konsistens i visuell design.

Hvorfor du trenger det

Ustylerte nettsteder ser forferdelig og lite tiltalende ut. Selv om de kan være leselige, er CSS hjørnesteinen i visuelt informasjonshierarki på grunn av oppsettet som det muliggjør. For eksempel illustrerer figuren nedenfor delvis den gjeldende toppnavigeringsmenyen til makeuseof.com, uten noe CSS brukt.

Legg merke til at bortsett fra typografi og farge, er den unstyled-menyen vertikal fordi det er standardstil for nettleseren. Det er lite sannsynlig at du ønsker å opprette internett fra 1990, så du vil at en sunn og kontinuerlig dose CSS-kunnskap virkelig skal være kompetent. I tillegg, med økningen av forskjellige størrelser og tilkoblede enheter som iPhones, nettbrett, osv., En av de viktigste ferdighetene har blitt "Responsive Design" eller nettsider som tilpasser seg forskjellige skjermbilder størrelser. Alt dette oppnås via CSS.

Anatomi av en CSS-regel

CSS-regler er skrevet et av tre steder: a) inline i et element, b) ved å lage en

Ideelt sett er stiler skrevet i separate stilark som flere websider kan referere til. Ved å bruke det samme regelverket, kan forfattere spare tid og lage visuell presentasjon med mer orden og konsistens. (Inline-stiler kan ikke hjelpe deg med å danne grunnfjellet i stil eller til og med sideomfattende stil - det er grunnen til at de best brukes sparsomt for å dekke spesifikke behov.)

CSS-regler begynner med en velger, skrevet med grønt nedenfor. I dette tilfellet er velgeren for regelen p, for avsnitt: regelen gjelder for leddelementer. Regelen er omsluttet av {krøllete seler}, i motsetning til . I dette tilfellet gjør regelen skriften for avsnitttekst normal.

CSS-regler kan bli mer komplekse og kompliserte enn denne introduksjonen åpner for. Det er grunnen til at du kan forvente, når det gjelder forpliktet tid Det vil ta mye lengre tid å beherske CSS enn HTML.

Ekstra kreditt (avansert)

På samme måte som HTML, har CSS optimaliseringene for deg som vil oppnå mer, raskere.

• SASS (og SCSS) | Krever Ruby, som ovenfor
• Mindre | Krever Node.js, som ovenfor

Javascript

Når mange tenker på koding, tenker de på det som å instruere datamaskinen hvordangjøre noe. Dette er oppgaven til et programmeringsspråk, det endelige tillegget til front-ligningen.

Programmeringsspråk klassifiseres vanligvis etter abstraksjonsnivået de bruker i semantikken, sine forfedres språk, deres paradigmer, og deres skrive disipliner. JavaScript trosser enkel klassifisering fordi den er utvidet til så mange rammer for å passe til så mange forskjellige formål. Det er en fleksibel, vagt-avledet-fra-C-familie, multi-paradigme, løst typisk hybrid kameleon som spiller magpie med kodingskonsepter. Det er enten et flott eksempel på et språk med veldig generelt formål, eller et veldig dårlig eksempel på mange forskjellige typer språk.

Hvorfor du trenger det

Hvorfor lære JavaScript? Som min kollega påpeker, har JavaScript sine mestere og motbydere 6 enkleste programmeringsspråk å lære for nybegynnereÅ lære å programmere handler om å finne riktig språk like mye som det handler om oppbyggingsprosessen. Her er de seks enkleste programmeringsspråkene for nybegynnere. Les mer spesielt når det gjelder egnethet for første gangs elever. Det er muligens de dagens mest populære programmeringsspråk. Selv om det ikke gir et sterkt grunnlag for å forstå resten av det kodende riket, er det et godt argument for å lære JS sammen med Ruby eller PHP.

Når det er sagt, så går ikke vanilje JS veldig langt - rammer er ansvarlige for dagens sider.

Populære rammer

• Angular, Googles JS-rammeverk for nettapplikasjoner som GMail og resten.
• jQuery Å gjøre nettet interaktivt: en introduksjon til jQueryjQuery er et script-bibliotek på klientsiden som nesten alle moderne nettsteder bruker - det gjør nettsteder interaktive. Det er ikke det eneste Javascript-biblioteket, men det er det mest utviklede, mest støttede og mest brukte ... Les mer , allerede dekket av MUO her Å gjøre nettet interaktivt: en introduksjon til jQueryjQuery er et script-bibliotek på klientsiden som nesten alle moderne nettsteder bruker - det gjør nettsteder interaktive. Det er ikke det eneste Javascript-biblioteket, men det er det mest utviklede, mest støttede og mest brukte ... Les mer , som styrker WordPress blant andre applikasjoner.
• Reagere, bygget av Facebook-ingeniørlegionene, er laget for å lage brukergrensesnitt.

Ekstra kreditt (avansert)

JavaScripts palimpsest natur ber om en påføring av struktur. Hver av sukkerlakkene nedenfor går noen vei mot implementering

• CoffeeScript | Krever Node.js, som ovenfor
• Loggfila | Krever Node.js, som ovenfor

Hvor du skal begynne å lære

Siden frontend-utvikling nå anses som en viktig jobbferdighet for kunnskapsarbeidere av alle slag, vil du finne mange utgangspunkt i form av e-læringskurs. Her er en kuratert liste som vi lagde for leserne våre:

• Coursera (Betalt)
  Coursera samler online-kurs fra universiteter og læringsinstitusjoner. Prisområdet faller fra 50 til 250 USD for et kurs, men de reklamerer for en høy standard for kunnskap og høykompetanseutfall.
• Generalforsamling Dash (Gratis)
  Generalforsamling er et populært alternativ for betalt profesjonell utdanning. Dash er deres gratis tilbud, og dekker HTML / CSS / JS.
• MakeUseOf.com - The Learn to Code 2017-pakken (Betalt, plugg)
  Levetidstilgang til 10 klasser som dekker spekteret av front- og back-end webutvikling, for så lite som 20 USD.
• Mozilla Developer Network (Gratis)
  MDN er autoritativ, men tar del av dokumentasjonsstilen mer enn undervisning i klasseromsstil eller gamified online-tilbud.
• Trehytte (Betalt)
  Et annet online tilbud, dette betalt per måned i stedet for kurs. Dette kommer på anbefaling av Karen X Cheng i hennes virale Medium post “Hvordan få jobb som designer uten å gå på designskole.”
• Web Design Tutorials av Envato Tuts + (Blandet gratis og betalt innhold av lik kvalitet)
  En mengde engangsartikler og flerdelsserier av høy kvalitet, spesifikk og målrettet informasjon vanligvis om ett emne.

Starter

En av fordelene som frontend-utvikling gir for nybegynnerne er at den for det meste ikke krever det dyre proprietære verktøy: det mest grunnleggende verktøyet for frontend-utvikling er tekstredigereren sammenkoblet med nettleseren til din valg:

• Tekstredaktører som Git's Atom-tekstredigerer, Sublime tekst (betalt), eller VS-kode av Microsoft
• Nettlesere som Mozilla Firefox eller Google Chrome
• Det er nyttig, men utenfor rammen av denne artikkelen, å ha hosting eller en lokal server (som f.eks XAMPP) sette opp.

Mer praktiske, hvis mindre permanente, alternativer er nettbaserte live-redaktører som:

• Codepen.io
• JSbin.com

Kortsnitt

HTML-strukturer er for det meste godt forstått, og er ikke akkurat verdt å re-tastes med stor frekvens. For CSS er det gjennomsnittlige nettstedets stilark tusenvis av linjer langt, og du kan satse på at få moderne tekst utelukkende er skrevet for hånd. Og når det gjelder interaktivitet, har visse standarder dukket opp. I kraft av disse fakta vil du oppdage at mange front-end utviklere bruker forhåndsbygde rammer som ryggraden, og deretter finjustere, fjerne eller erstatte etter behov.

• Støvelhempe, utviklet opprinnelig av Twitter, inneholder HTML-, CSS- og JS-maler som du finner mye på nettet i dag. Bootstrap er nesten en Lingua franca i begynnelsen av webutvikling.
• Fundament fakturerer seg selv som det mest avanserte rammeverket i verden, og er bygget med vekt på liten størrelse og hastighet.

Referansemateriale

• En liste bortsett - En publikasjon på A-listen, "For folk som lager nettsteder"
• Kan jeg bruke - "Støttetabeller for HTML5, CSS3, osv."
• CSS-triks - Et knutepunkt for CSS-samfunnet og en kunnskapsspring om beste praksis og kompatibilitet
• HTML levestandardokumentasjon - “The Living Standard - Edition for Web Developer”
• HTML5 vær så snill - "Bruk det nye og skinnende ansvarlig"
• Smashing Magazine - "For profesjonelle webdesignere og utviklere"

Konklusjon

Vi håper du likte denne orienteringen til frontend-verdenen. Som du kan se, er front-end utvikling et felt som er fylt med mange muligheter, men har mange inngangspunkter. Å lære den vil gi en imponerende ferdighet til porteføljen din, og gjøre det mulig for deg å ta det neste trinnet i karrieren, eller gå over til en helt ny.

Utviklere: Hva er i front-stack?

nybegynnere: Hva annet kunne vi ha inkludert for å orientere deg?