Skapa webbgränssnitt: var du ska börja

Annons

Mer än tegel-och-murbruk, datorkod och pixlar är grunden för 2000-talets ekonomi. Om du någonsin har tittat på "Sidkälla" eller "Utvecklarverktyg" i din webbläsare har du troligtvis stött på ett smuts med text och undrat hur det gör att webbsidan fungerar.

Webbutvecklare ringer Graphical User jagnterfaces (GUIs) kollektivt front-end på en webbsida, i motsats till baksidan. Framsidan är vad användaren kan manipulera, vidta åtgärder med och på annat sätt använda. Baksidan kan betraktas som den infrastruktur som innehåller och stöder all information och uppgifter som implicit innebär.

Den här artikeln handlar om frontend. Vi kartlägger territoriet så att du kan få en förståelse för de distinktioner och kapaciteter som gör gränsen till vad det är och visa dig hur du kan börja vara meningsfullt - och använda - av webbutvecklarens verktyg för att skapa tilltalande och interaktiv webb sidor.

Webbdesign kontra front-end-utveckling

I stora organisationer är design och utveckling uppgifter som utförs av team av professionella med olika kompetensuppsättningar. Formgivare skulle skapa en specifik visuell och interaktionsdesign; front-end utvecklare skulle implementera det.

För en individ finns det dock ingen anledning att begränsa din utforskning: bara för att du är intresserad av utveckling, betyder det inte att du inte har någon vision för design och vice versa. En blygsam mängd kunskap om grundläggande webbteknologier eller designprinciper kan vara mycket fördelaktigt i din karriär eller ditt företag.

Utvecklingen i front är både mer och mindre en kodningsaktivitet. Mer eftersom det är mer än hälften av designen i sitt tänkande: många koncept dras från tryckproduktionens värld. Mindre för att medan den använder datorkod är den koden en variation som är mindre komplex, mer förlåtande och kräver mindre grundläggande kunskaper om programmering än andra webbprogrammeringsspråk (av vilka många finns på baksidan) Vilket programmeringsspråk att lära sig - webbprogrammeringIdag ska vi ta en titt på de olika webbprogrammeringsspråken som driver Internet. Detta är den fjärde delen i en nybörjars programmeringsserie. I del 1 lärde vi oss det grundläggande för ... Läs mer .

Webbens front-end: Markering, stilark och programmeringsspråk

De flesta webbsidor är konstruerade med en trio av teknologier: hypertext markup language (HTML), cascading styleheets (CSS) och JavaScript (JS):

• Markeringsspråk som HTML markera ett dokument med taggar. Taggar avgränsar semantiskt innehåll och strukturerar dokumentet. Strukturerade dokument kan vara styled.
• CSS är en stilark språk och ättling till vägbeskrivningar i en stil till en sidkomponist (som skapar den slutliga utskrivbara bilden för en tryckpress); på webben dikterar CSS presentation av innehåll som typografi och layout i allmänhet, samt att placera grafik.
• Javascript, till skillnad från de två föregående, är ett programmeringsspråk. JS hanterar interaktion och användarinmatning och är fokuserad på de händelser en användare producerar. För att fylla i bilden lite mer är det motsatta av ett händelsestyret paradigm en där programmering körs oavsett användarinmatning.

html

Det har gått över tjugo år, och kärnämnet med HTML förblir detsamma: att skilja texten som är avsedd för en läsare från strukturen som behövs för att analysera dokumentet.

Varför du behöver det

Varför är HTML fortfarande viktigt? För att uttrycka det enkelt är HTML där den semantiska betydelsen av ditt innehåll ligger. Det är nödvändigt för maskinläsare som sökmotorspindlar och skärmläsare (för tillgänglighet). Med tiden har relevansen av att skilja det semantiska kontra det strukturella ökat snarare än minskat med tiden. Den senaste versionen av HTML (5) introducerade taggar som

,

Anatomi av ett HTML-element

HTML-element är minst ett par av öppna och stänga taggar, varje tagg bifogad i , till exempel avsnittet, nedan på cyan. Element kan ta attribut, som nedan i magenta, till exempel en "klass", som skulle göra elementet till en medlem i en grupp som HTML och JS kan påverka. De stil attribut, vars innehåll är skriven i rött nedan, är faktiskt ett sätt att skapa en engångs CSS-regel just för det elementet. (CSS är bäst skriven på webbplats- eller sidnivå, som vi diskuterar nedan.)

Resultatet av denna markering:

Vanlig text här.

Extra kredit (avancerat)

Utvecklare av alla slag är besatta av körhastigheten. I detta syfte kommer de att optimera själva språken för att skriva snabbt och skapa läsbara linjer. Det här kallas syntaktisk sockerbeläggning. HTML-gemenskapen har producerat några av dessa ansträngningar.

Varför använda en utvecklarcentrerad genväg när du förmodligen är en nybörjare? Genom att skapa saker i enklare markering kan du fokusera på avsikten, inte uttrycket, samtidigt som du validerar mot en standard sist. Källfilerna som du genererar i den förenklade markeringen kommer antingen att kompilera till giltig HTML, eller så kommer kompilatorn att kasta ett fel på ett specifikt radnummer. Du kanske tycker att det är mer lärorikt än att jaga genom "taggsoppa" efter en vinkelfäste. De kräver vardera en mellanliggande programvara för att omvandla dem till HTML. (Det är extra kredit, trots allt.)

• HAML (HTML-abstraktionsmarkeringsspråk) | Kräver Rubin (som vi eftertänksamt har skrivit om tidigare 3 interaktiva, roliga, fria sätt att börja lära sig Ruby-programmeringsspråketRuby är ett uttrycksfullt, skriptspråk på mycket hög nivå. Det används på webben främst som en del av Ruby on Rails webbutvecklingsram, men också fristående. Om du är nyfiken på vad Ruby (inte ... Läs mer ) att sammanställa
• Jade [Broken URL Removed] | Kräver Node.js (hittar du en introduktion här Vad är Node. JS och varför ska jag bry mig? [Webbutveckling]JavaScript är bara ett programmeringsspråk på klientsidan som körs i webbläsaren, eller hur? Inte längre. Node.js är ett sätt att köra JavaScript på servern; men det är så mycket mer också. Om... Läs mer ) att sammanställa
• Smal | Kräver att Ruby ska sammanställa (som ovan)

CSS

CSS gör det möjligt att hålla in semantiskt innehåll och dokumentpresentation separat, vilket gör stilistiska funktioner som layout, färger och typografi bärbara och tillämpliga på olika dokument. När innehåll och visuell design är separata får utvecklaren mer flexibilitet och konsekvens i visuell design.

Varför du behöver det

Ostylerade webbplatser ser fruktansvärda och tilltalande ut. Även om de kan vara läsbara är CSS hörnstenen i den visuella informationshierarkin på grund av den layout som den möjliggör. Till exempel illustrerar figuren nedan delvis den aktuella toppnavigeringsmenyn för makeuseof.com, utan någon CSS tillämpad.

Lägg märke till att bortsett från typografi och färg är den ostylerade menyn vertikal eftersom det är standardformatet för webbläsaren. Det är osannolikt att du vill skapa nytt år 1990, så du vill att en hälsosam och kontinuerlig dos av CSS-kunskap verkligen ska vara kompetent. Dessutom med ökningen av olika storlekar och anslutna enheter som iPhones, surfplattor, et cetera, en av de viktigaste färdigheterna har blivit "Responsive Design", eller webbsidor som anpassas till olika skärmar storlekar. Allt detta uppnås via CSS.

Anatomi av en CSS-regel

CSS-regler skrivs på en av tre platser: a) inline i ett element, b) genom att skapa en

Helst skrivs stilar i separata formatmallar som flera webbsidor kan hänvisa till. Genom att använda samma uppsättning regler kan författare spara tid och skapa visuell presentation med mer ordning och konsistens. (Inline-stilar kan inte hjälpa dig att bilda berggrunden i webbplats- eller ens sidbredd stil - det är därför de bäst används sparsamt för att tillgodose specifika behov.)

CSS-regler börjar med en väljare, skriven i grönt nedan. I detta fall är väljaren för regeln p, för stycke: regeln gäller för styckeelement. Regeln är innesluten i {lockiga hängslen}, i motsats till . I detta fall gör regeln typsnittet för stycketext normalt.

CSS-regler kan bli mer komplexa och komplicerade än den här introduktionen tillåter. Det är därför du kan förvänta dig, när det gäller engagerad tid CSS tar mycket längre tid att behärska än HTML.

Extra kredit (avancerat)

Liksom HTML har CSS sina optimeringar för de som vill uppnå mer, snabbare.

• SASS (och SCSS) | Kräver Ruby, som ovan
• Mindre | Kräver Node.js, som ovan

JavaScript

När många tänker på kodning, tänker de på det som att instruera datorn hurdo något. Detta är uppgiften för ett programmeringsspråk, vår sista tillägg till front-ekvationen.

Programmeringsspråk klassificeras vanligtvis efter den abstraktionsnivå de använder i sin semantik, sina förfäder språk, deras paradigm, och deras skriva discipliner. JavaScript trotsar enkel klassificering eftersom den har utökats till så många ramar för att passa så många olika syften. Det är en flexibel, vagt-härledd-från-C-familjen, multi-paradigm, löst typ hybridkameleont spelar skata med kodningskoncept. Det är antingen ett bra exempel på ett mycket allmänt språk, eller ett mycket dåligt exempel på många olika typer av språk.

Varför du behöver det

Varför lära sig JavaScript? Som min kollega påpekar har JavaScript sina mästare och förnekare 6 enklaste programmeringsspråk att lära sig för nybörjareAtt lära sig programmera handlar om att hitta rätt språk lika mycket som det handlar om uppbyggnadsprocessen. Här är de sex bästa enklaste programmeringsspråken för nybörjare. Läs mer särskilt när det gäller dess lämplighet för första gången. Det är eventuellt de dagens populära programmeringsspråk. Även om det inte ger en stark grund att förstå resten av det kodande kungariket, finns det ett bra argument för att lära sig JS tillsammans med Ruby eller PHP.

Som sagt, vanilj JS går inte så långt - ramarna är ansvariga för dagens sidor.

Populära ramverk

• Angular, Googles JS-ramverk för webbapplikationer som GMail och resten.
• JQuery Att göra webben interaktiv: en introduktion till jQueryjQuery är ett skriptbibliotek på klientsidan som nästan alla moderna webbplatser använder - det gör webbplatser interaktiva. Det är inte det enda Javascript-biblioteket, men det är det mest utvecklade, mest stödda och mest använda ... Läs mer , redan täckt av MUO här Att göra webben interaktiv: en introduktion till jQueryjQuery är ett skriptbibliotek på klientsidan som nästan alla moderna webbplatser använder - det gör webbplatser interaktiva. Det är inte det enda Javascript-biblioteket, men det är det mest utvecklade, mest stödda och mest använda ... Läs mer , som driver WordPress bland andra applikationer.
• Reagera, byggd av Facebook engineering legions, är gjord för att skapa UI: er.

Extra kredit (avancerat)

Javascript palimpsest natur ber om en viss påläggning av struktur. Var och en av sockerrockarna nedan går något av vägen mot implementering

• CoffeeScript | Kräver Node.js, som ovan
• skrivmaskin | Kräver Node.js, som ovan

Var du ska börja lära

Eftersom front-end-utvecklingen nu allmänt betraktas som en avgörande jobbfärdighet för kunskapsarbetare av alla slag, hittar du många utgångspunkter i form av kurser för e-lärande. Här är en sammanställd lista som vi skapade för våra läsare:

• Coursera (Paid)
  Coursera samlar onlinekurser från universitet och lärosäten. Prisintervallet faller mellan 50-250 USD för en kurs, men de annonserar en hög kunskapsstandard och hög kompetensresultat.
• General Assembly Dash (Fri)
  Generalforsamling är ett populärt alternativ för betald yrkesutbildning. Dash är deras gratiserbjudande och täcker HTML / CSS / JS.
• MakeUseOf.com - The Learn to Code 2017-paketet (Betald, plugg)
  Livslängd tillgång till 10 klasser som täcker utbudet av front-och back-end webbutveckling, för så lite som 20 USD.
• Mozilla Developer Network (Fri)
  MDN är auktoritativ, men tar del av dokumentationsstilen mer än undervisning i klassrummet eller spelbaserade online-erbjudanden.
• Trähus (Paid)
  Ett annat online-erbjudande, det här betalas per månad snarare än kurs. Detta kommer på rekommendation av Karen X Cheng i hennes virala Medium post "Hur man får ett jobb som designer utan att gå på designskola.”
• Webbdesignstudier av Envato Tuts + (Blandat med gratis och betalt innehåll av lika kvalitet)
  En mängd engångsartiklar och flera delar av hög kvalitet, specifik och riktad information vanligtvis om ett ämne.

Komma igång

En av fördelarna som front-end-utvecklingen innebär för nybörjare är att den för det mesta inte kräver det dyra egna verktyg: det mest grundläggande verktyget för front-end-utveckling är textredigeraren ihopkopplad med din webbläsare val:

• Textredigerare som Git's Atom-textredigerare, Sublim text (betalt) eller VS-kod av Microsoft
• Webbläsare som Mozilla Firefox eller Google Chrome
• Det är användbart, men utanför denna artikel, att ha värd eller en lokal server (t.ex. XAMPP) uppstart.

Mer praktiska, om mindre permanenta, alternativ är webbaserade live-redaktörer som:

• Codepen.io
• JSbin.com

Genvägar

HTML-strukturer är för det mesta välförstått och inte exakt värda att nyckla in med stor frekvens. För CSS är den genomsnittliga webbplatsens stilark tusentals rader lång, och du kan satsa på att få moderna skrivs uteslutande för hand. Och vad gäller interaktivitet har vissa standarder dykt upp. På grund av dessa fakta kommer du att upptäcka att många front-end-utvecklare använder förbyggda ramverk som ryggraden och sedan justera, ta bort eller ersätta efter behov.

• bootstrap, som ursprungligen utvecklats av Twitter, innehåller HTML-, CSS- och JS-mallar som finns allmänt på webben idag. Bootstrap är nästan en lingua franca i början webbutveckling.
• fundament fakturerar sig själv som det mest avancerade ramverket i världen och är byggt med betoning på liten storlek och hastighet.

Referensmaterial

• En lista förutom - En A-lista publikation, "För människor som skapar webbplatser"
• Kan jag använda - "Supporttabeller för HTML5, CSS3, etc"
• CSS-Tricks - Ett nav för CSS-gemenskapen och kunskap om bästa praxis och kompatibilitet
• HTML levnadsstandard-dokumentation - "The Living Standard - Edition for Web Developer"
• HTML5 snälla - "Använd det nya och glänsande ansvarsfullt"
• Smashing Magazine - "För professionella webbdesigners och utvecklare"

Slutsats

Vi hoppas att du gillade den här orienteringen till front-end-världen. Som ni ser är utvecklingen i front-end ett fält som är fullt av många möjligheter, men har många inträdespunkter. Att lära sig det kommer att ge en imponerande färdighet i din portfölj och göra det möjligt för dig att ta nästa steg i din karriär eller övergå till en helt ny.

utvecklare: Vad finns i din front-stack?

nybörjare: Vad kunde vi ha inkluderat för att orientera dig?