Oprettelse af webgrænseflader: Hvor skal man starte

Reklame

Mere end mursten, computerkode og pixels er fundamentet for det 21. århundredes økonomi. Hvis du nogensinde har set på "Sidekilde" eller "Udviklerværktøjer" i din browser, har du sandsynligvis stødt på et rod med tekst, og spekuleret på, hvordan det får websiden til at fungere.

Webudviklere ringer Graphical User jegnterfaces (GUI'er) kollektivt front-end på en webside i modsætning til bagenden. Frontend er, hvad brugeren kan manipulere, tage handling med og på anden måde bruge. Bagenden kan betragtes som den infrastruktur, der indeholder og understøtter al den information og opgaver, der er implicit af frontend.

Denne artikel handler om frontend. Vi kortlægger territoriet, så du kan få en forståelse af de sondringer og evner, der gør front-end hvad det er og vise dig, hvordan du begynder at give mening - og brug - af webudviklerens værktøjer til at skabe tiltalende og interaktiv web sider.

Webdesign versus front-end-udvikling

I store organisationer er design og udvikling opgaver, der udføres af teams af fagfolk med forskellige kvalifikationssæt. Designere ville skabe et specifikt visuelt og interaktionsdesign; front-end udviklere ville implementere det.

For et individ er der dog ingen grund til at begrænse din udforskning: bare fordi du er interesseret i udvikling, betyder det ikke, at du ikke har nogen vision for design og vice versa. En beskeden mængde viden om grundlæggende webteknologier eller designprincipper kan vise sig at være meget gavnlige i din karriere eller virksomhed.

Front-end-udvikling er både mere og mindre en kodningsaktivitet. Mere fordi det er mere end halvt design i sin tankegang: mange koncepter er hentet fra printproduktionens verden. Mindre fordi mens den bruger computerkode, er denne kode en sort, der er mindre kompleks, mere tilgivende og kræver mindre grundlæggende viden om programmering end andre webprogrammeringssprog (hvoraf mange findes på back-end) Hvilket programmeringssprog man skal lære - WebprogrammeringI dag skal vi se på de forskellige webprogrammeringssprog, der driver Internettet. Dette er den fjerde del i en begynderprogrammeringsserie. I del 1 lærte vi det grundlæggende i ... Læs mere .

Webets front-end: markering, stilark og programmeringssprog

De fleste websider er konstrueret med en trio af teknologier: HTML-sprog (HTML), cascading styleheets (CSS) og JavaScript (JS):

• Markup sprog som HTML markere et dokument med tags. Mærker afgrænser semantisk indhold og strukturerer dokumentet. Strukturerede dokumenter kan være stylet.
• CSS er en stilark sprog og efterkommer af instruktioner i udskriftsstil til en sidekomponist (som opretter det endelige udskrivbare billede til en trykpresse); på nettet dikterer CSS præsentation af indhold som typografi og layout generelt samt placering af grafik.
• JavaScript, i modsætning til de foregående to, er en programmeringssprog. JS håndterer interaktion og brugerinput og er fokuseret på de begivenheder, en bruger producerer. For at udfylde billedet lidt mere er det modsatte af et hændelsesdrevet paradigme en, hvor programmering udføres uanset brugerinput.

HTML

Det har været over tyve år, og det centrale formål med HTML forbliver det samme: at adskille teksten, der er beregnet til en læser, fra strukturen, der er nødvendig for at analysere dokumentet.

Hvorfor du har brug for det

Hvorfor er HTML stadig vigtigt? Kort sagt er HTML, hvor den semantiske betydning af dit indhold ligger. Det er nødvendigt for maskinlæsere som søgemaskinspiders og skærmlæsere (for tilgængelighed). Over tid er relevansen af ​​at adskille det semantiske versus det, der er strukturelt, vokset snarere end mindsket med tiden. Den seneste version af HTML (5) introducerede tags som

,

Anatomi af et HTML-element

HTML-elementer er som minimum par af åbning og lukning af tags, hvert tag indesluttet i , sådan som afsnitskoden nedenfor i cyan. Elementer kan tage egenskaber, som nedenfor i magenta, såsom en "klasse", der ville gøre elementet til et medlem af en gruppe, som HTML og JS kan påvirke. Det stil attribut, hvis indhold er skrevet med rødt nedenfor, er faktisk en måde at oprette en engangs CSS-regel netop for dette element. (CSS er bedst skrevet på webstedet eller sideniveauet, som vi vil diskutere nedenfor).

Resultatet af denne markering:

Almindelig afsnitstekst her.

Ekstra kredit (avanceret)

Udviklere af alle slags er besat af udførelseshastighed. Med henblik herpå optimerer de selve sprogene til hurtig skrivning og oprettelse af læsbare linjer. Dette kaldes syntaktisk sukkercoating. HTML-samfundet har produceret et par af disse anstrengelser.

Hvorfor bruge en udvikler-centreret genvej, når du formodentlig er en novice? Ved at oprette ting i en enklere markering kan du fokusere på intentionen, ikke udtrykket, mens du validerer mod en standard for det sidste. Kildefilerne, du genererer i den forenklede markering, kompileres enten til gyldig HTML, eller kompilatoren kaster en fejl på et specifikt linjenummer. Du kan synes, at det er mere lærerigt end at jage gennem "tag-suppe" for en manglende vinkelbeslag. De kræver hver et mellemliggende stykke software for at transkompilere dem til HTML. (Det er ekstra kredit, når alt kommer til alt.)

• Haml (HTML-abstraktionsmarkeringssprog) | Kræver Rubin (som vi tankevækkende har skrevet om før 3 interaktive, sjove, gratis måder at begynde at lære Ruby-programmeringssprog påRuby er et udtryksfuldt scripting-sprog på meget højt niveau. Det bruges hovedsageligt på Internettet som en del af webudviklingsrammen Ruby on Rails, men også som enkeltstående. Hvis du er nysgerrig efter hvad Ruby (ikke ... Læs mere ) at samle
• Jade [Ødelagt URL fjernet] | Kræver node.js (finder du en introduktion her Hvad er knudepunkt. JS og hvorfor skal jeg passe? [Web-udvikling]JavaScript er bare et programmeringssprog på klientsiden, der kører i browseren, ikke? Ikke mere. Node.js er en måde at køre JavaScript på serveren på; men det er så meget mere også. Hvis... Læs mere ) at samle
• Slim | Kræver at Ruby skal samles (som ovenfor)

CSS

CSS gør det muligt at rumme semantisk indhold og dokumentpræsentation separat, hvilket gør stilistiske funktioner som layout, farver og typografi bærbare og anvendelige til forskellige dokumenter. Når indhold og visuelt design er adskilt, får udvikleren større fleksibilitet og konsistens i visuel design.

Hvorfor du har brug for det

Ustylede websteder ser forfærdelige og ubehagelige ud. Mens de muligvis kan læses, er CSS hjørnestenen i det visuelle informationshierarki på grund af det layout, det muliggør. For eksempel illustrerer figuren herunder delvis den aktuelle øverste navigationsmenu af makeuseof.com, uden nogen CSS anvendt.

Bemærk, at bortset fra typografi og farve, er den unstylede menu lodret, fordi det er standardstil for browseren. Det er usandsynligt, at du ønsker at genoprette internettet fra 1990, så du vil have en sund og kontinuerlig dosis CSS-viden for at være virkelig kompetent. Derudover med fremkomsten af ​​forskellige størrelser og tilsluttede enheder som iPhones, tablets, et cetera, en af de vigtigste færdigheder er blevet ”Responsive Design” eller websider, der tilpasser sig forskellige skærmbilleder størrelser. Alt dette opnås via CSS.

Anatomi af en CSS-regel

CSS-regler er skrevet et af tre steder: a) inline inden for et element, b) ved at oprette en

Ideelt set skrives stilarter i separate stilark, som flere websider muligvis refererer til. Ved at bruge det samme sæt regler, kan forfattere spare tid og skabe visuel præsentation med mere orden og konsistens. (Inline-stilarter kan ikke hjælpe dig med at danne grundstenen til site- eller endda sideomfattende stil - det er grunden til, at de bedst bruges sparsomt til at imødekomme specifikke behov.)

CSS-regler begynder med en vælgeren, skrevet med grønt nedenfor. I dette tilfælde er vælgeren til reglen p, for afsnit: reglen gælder for afsnitelementer. Reglen er lukket i {krøllede seler}, i modsætning til . I dette tilfælde gør reglen skrifttypen for afsnitstekst normal.

CSS-regler kan blive mere komplekse og komplicerede, end denne introduktion tillader. Derfor kan du forvente, hvad angår tidsforpligtelse CSS vil tage meget længere tid at beherske end HTML.

Ekstra kredit (avanceret)

Ligesom HTML har CSS sine optimeringer for dem, der ønsker at opnå mere, hurtigere.

• Sass (og SCSS) | Kræver Ruby som ovenfor
• Mindre | Kræver Node.js som ovenfor

JavaScript

Når mange mennesker tænker på kodning, tænker de på det som at instruere computeren hvordangøre noget. Dette er opgaven med et programmeringssprog, vores sidste tilføjelse til frontend ligningen.

Programmeringssprog klassificeres normalt efter det abstraktionsniveau, de bruger i deres semantik, deres stamfar, deres paradigmerog deres skrive discipliner. JavaScript trosser enkel klassificering, fordi den er blevet udvidet til så mange rammer for at passe til så mange forskellige formål. Det er en fleksibel, vagt-afledt-fra-C-familie, multi-paradigme, løst typisk hybrid kamæleon, der spiller magpie med kodningskoncepter. Det er enten et godt eksempel på et meget generelt sprog eller et meget dårligt eksempel på mange forskellige typer sprog.

Hvorfor du har brug for det

Hvorfor lære JavaScript? Som min kollega påpeger, har JavaScript sine mestre og krænkere 6 nemmeste programmeringssprog at lære for begyndereAt lære at programmere handler om at finde det rigtige sprog lige så meget som det handler om opbygningsprocessen. Her er de seks mest nemmeste programmeringssprog for begyndere. Læs mere især i tilfælde af dets egnethed til førstegangselever. det er eventuelt det dagens mest populære programmeringssprog. Selvom det ikke giver et stærkt fundament for at forstå resten af ​​det kodende rige, er der et godt argument, der skal fremsættes for at lære JS sammen med Ruby eller PHP.

Når det er sagt, går vanilla JS ikke meget langt - rammer er ansvarlige for dagens sider.

Populære rammer

• Angular, Googles JS-ramme for webapplikationer som GMail og resten.
• JQuery At gøre Internettet interaktivt: En introduktion til jQueryjQuery er et script-bibliotek på klientsiden, som næsten alle moderne websteder bruger - det gør websteder interaktive. Det er ikke det eneste Javascript-bibliotek, men det er det mest udviklede, mest understøttede og mest anvendte ... Læs mere , allerede dækket af MUO her At gøre Internettet interaktivt: En introduktion til jQueryjQuery er et script-bibliotek på klientsiden, som næsten alle moderne websteder bruger - det gør websteder interaktive. Det er ikke det eneste Javascript-bibliotek, men det er det mest udviklede, mest understøttede og mest anvendte ... Læs mere , der driver WordPress blandt andre applikationer.
• Reagere, bygget af Facebook-ingeniørlegioner, er lavet til at oprette brugergrænseflader.

Ekstra kredit (avanceret)

JavaScripts palimpsest natur beder om en vis påføring af struktur. Hver af sukkerfrakkerne nedenfor går nogle af vejen mod implementering

• CoffeeScript | Kræver Node.js som ovenfor
• maskinskrift | Kræver Node.js som ovenfor

Hvor skal man begynde at lære

Da frontend-udvikling nu i vid udstrækning betragtes som en afgørende jobfærdighed for vidensarbejdere af alle slags, finder du mange udgangspunkter i form af e-learning-kurser. Her er en kurateret liste, som vi lavede til vores læsere:

• coursera (Betalt)
  Coursera indsamler onlinekurser fra universiteter og læringsinstitutioner. Prisklasse falder fra 50-250 USD for et kursus, men de reklamerer for en høj standard for viden og resultater med høj kompetence.
• Generalforsamling Dash (Ledig)
  Generalforsamlingen er en populær mulighed for betalt faglig uddannelse. Dash er deres gratis tilbud og dækker HTML / CSS / JS.
• MakeUseOf.com - The Learn to Code 2017 Bundle (Betalt, stik)
  Livstidsadgang til 10 klasser, der dækker spektret af front- og back-end webudvikling, for så få som 20 USD.
• Mozilla Developer Network (Ledig)
  MDN er autoritativ, men bruger mere end dokumentationsstilen end undervisning i klasselokaliseret stil eller gamified-tilbud online.
• Træhus (Betalt)
  Et andet online tilbud, denne betalt per måned snarere end kursus. Dette kommer på anbefaling af Karen X Cheng i hendes virale Medium post “Sådan får du et job som designer uden at gå i designskole.”
• Webdesignvejledninger af Envato Tuts + (Blandet af gratis og betalt indhold af lige kvalitet)
  Et væld af engangsartikler og multidelt-serier af høj kvalitet, specifik og målrettet information, som regel om et emne.

Kom godt i gang

En af fordelene, som front-end-udvikling har for begynderen, er, at det for det meste ikke kræver det dyre proprietære værktøjer: det mest basale værktøj til frontend-udvikling er teksteditoren parret med din browser valg:

• Tekstredaktører kan lide Git's Atom-teksteditor, Sublim tekst (betalt) eller VS-kode af Microsoft
• Browsere som Mozilla Firefox eller Google Chrome
• Det er nyttigt, men uden for denne artikels rækkevidde, at have hosting eller en lokal server (som f.eks XAMPP) Opsætning.

Mere praktiske, hvis mindre permanente, alternativer er webbaserede live-redaktører, såsom:

• Codepen.io
• JSbin.com

Genvej

HTML-strukturer er for det meste godt forståede og ikke nøjagtigt værdige til at genindtaste med stor frekvens. For CSS er det gennemsnitlige websteds stilark tusinder af linjer langt, og du kan satse på, at få moderne, der udelukkende er skrevet for hånd. Og med hensyn til interaktivitet er visse standarder dukket op. I kraft af disse kendsgerninger vil du opdage, at mange front-end-udviklere bruger forudbyggede rammer som rygrad og derefter justerer, fjerner eller erstatter efter behov.

• bootstrap, der oprindeligt blev udviklet af Twitter, indeholder HTML-, CSS- og JS-skabeloner, der findes bredt på nettet i dag. Bootstrap er næsten en lingua franca i begyndelsen af ​​webudvikling.
• Fundament fakturerer sig selv som den mest avancerede ramme i verden og er bygget med vægt på lille størrelse og hastighed.

Referencemateriale

• En liste bortset fra - En publikation på A-listen, "For mennesker, der laver websteder"
• Kan jeg bruge - "Supporttabeller til HTML5, CSS3 osv."
• CSS-Tricks - Et knudepunkt for CSS-samfund og en viden om viden om bedste praksis og kompatibilitet
• HTML levestandardokumentation - "The Living Standard - udgave til webudvikler"
• HTML5 venligst - "Brug det nye og skinnende ansvarligt"
• Smashing Magazine - "For professionelle webdesignere og -udviklere"

Konklusion

Vi håber, at du nød denne orientering til frontend-verdenen. Som du kan se, er front-end-udvikling et felt, der er fyldt med en masse muligheder, men har mange indgangspunkter. At lære det vil tilføje en imponerende færdighed til din portefølje og give dig mulighed for at tage det næste trin i din karriere eller overgang til en helt ny.

Udviklere: Hvad er der i din front-end stack?

begyndere: Hvad kunne vi ellers have medtaget for at orientere dig?