Webbutveckling och design 101

web_development_101Vill du veta grunderna i webbutveckling och design? Grymt bra…


Men det finns ett problem med den här tanken, eller ett antal av dem faktiskt …

  • Vad är syftet med att ha en webbplats? Behöver alla verkligen en?
  • I så fall hur bygger du en webbplats med kvalitet? Eller med andra ord, hur lär du dig grundläggande webbutveckling och design som gör att du kan bygga den kvalitetswebbplatsen själv?
  • Ännu viktigare är det att du kan bygga en kvalitetswebbplats på ditt första försök? Eller behöver du många års erfarenhet bakom dig innan du kan hoppas på något resultat ovanför fruktansvärt?

Låt oss svara på allt detta i detta nybörjarguide för webbutveckling och design.

[Spoiler varning. Japp, du kan bygga en webbplats för kvalitet på första försöket.]

Vad som behandlas i den här guiden?

Okej, första sakerna först, vi är glada över att du har läst och att du har bestämt dig för att prova webbutveckling! Så här kommer det att spela ut:

Kapitlen presenteras på ett mycket enkelt sätt, med huvudinnehållet till vänster och de handlingsbara artiklarna till höger. Såhär:

Guide introduktion: kapitel 1

Hur du fortsätter:

  • På din första läsning: Vi rekommenderar att du läser hela saken från topp till botten. Detta ger dig en bra 10.000 fotvy av ämnet och hjälper dig att förstå de viktigaste delarna av det. Det kommer också att ge dig grundläggande verktyg och metoder för hur du hanterar enskilda uppgifter.
  • Under din andra läsning och vidare: Använd TOC och hoppa över till den del som intresserar dig mest. Känn dig också gärna med delningsknapparna bredvid varje kapitel och skicka antingen länkarna till dig själv eller till dina vänner / följare som kan vara intresserade.

Redo? Låt oss gå till kapitel 1.

Vem är den här guiden för?

Om du vill lära dig grundläggande webbutveckling och design är den här guiden åt dig. Oavsett din motivation kan vara.

Du behöver inte heller tidigare teknisk kunskap för att komma igång (annat än grundläggande “webbfärdigheter”). Hela poängen med denna guide är att vara en slags “101” -kurs för alla som är intresserade av att bygga webbplatser och lära sig webbutveckling.

Här är några vanliga orsaker till att du kanske är intresserad:

  • 1. Du behöver en webbplats för ditt företag (och du vill se om du kan bygga det själv).
  • 2. Du vill lära dig webbutveckling av passion eller tillfälligt intresse (inget dåligt med det).
  • 3. Du behöver en webbplats för skolan.
  • 4. Du hjälper en vän eller familjemedlem för att få sin webbplats online.

Huvudidén som kommer att vägleda oss

Det här är viktigt! Och snälla var inte arg på oss om du är en avancerad webbutvecklare som läser detta, men huvudidén som kommer att leda oss genom hela denna webbutveckling och design 101-resurs är:

“Den minsta motståndsstrategin”

Här är de tre principerna för den minst motståndsstrategin:

  • vi är inte bryta ner saker på molekylär nivå. Dvs. vi kommer inte att komma till botten av hur programmeringsspråk fungerar eller hur en webbserver fungerar.
  • vi är inte uppfinna hjulet igen. Dvs. om någon redan har löst ett givet problem och gjort lösningen tillgänglig kommer vi att använda det.
  • vi är gör en enkel lösning fantastisk, snarare än en komplicerad och till synes mer funktionell lösning buggy och inte förståelig.

KAPITEL 1: Planen

Din idé, webbplatstyp, domännamn och värd.

Innan du skapar en webbplats behöver du en plan

Ironiskt som det kanske låter – hit 80-talets show “The A-Team” har lärt oss, en bra plan är en nyckel till framgång.

Om du har haft en webbplats som sitter i dig ett tag nu är du säkert upphetsad över den enda idén att äntligen få den ut för andra att läsa och bläddra.

Du vill att din webbplats ska vara fantastisk. Du vet förmodligen hur det kommer att se ut till en viss grad. Eller kanske har du till och med den perfekta logotypen redo.

Men…

Det är inte alls här du bör komma igång. Om du börjar med förutbestämda förväntningar leder detta bara till mycket förvirring under vägen och ett sub-par-resultat i slutet.

Tänk istället på följande:

  1. Separera dig från alla tekniska mål du kan ha. Som till exempel målet att lära sig webbplatsteknologier eller viss webbplatsprogramvara.
  2. Ställ dig själv en huvudfråga: “Vad behöver jag webbplatsen för?”

Det här handlar inte om dig, det handlar om webbplatsens mål.

Frågor du behöver ställa dig själv innan du ställer in din webbplats

  1. Vad webbplatsen är tänkt att uppnå?
  2. Vad kommer att vara den viktigaste “saken” som presenteras via webbplatsen? (t.ex. ditt företag, en produkt, dina blogginlägg osv.)
  3. Kommer webbplatsen att ha något speciellt syfte? (t.ex. en e-handelsaffär, en fotografportfölj etc.)
  4. Vem är målgruppen?
  5. Varför är de intresserade av webbplatsens ämne?
  6. Vilken smärta löser webbplatsen för enskilda publikmedlemmar?

Om de tre senaste frågorna, låt oss prata publiken en minut …

Det finns två huvudregler för webbplatsbyggnad. Här är regel nr 1:

 Läsaren / besökaren kommer först. De är den viktigaste personen som din webbplats måste glädja.

På ett sätt är din webbplats inte din. Det är deras.

(Regel nr 2 kommer vi att diskutera om en minut.)

Att glömma bort den här enkla riktlinjen kan leda dig till helt fel sätt, även upp till den punkt där du befinner dig med en webbplats som är förvirrande för alla runt om.

“Usch! Folk förstår bara inte vad den här webbplatsen handlar om. Hur kan de vara så okunniga ?! ” – du slutar tänka. Men som det visar sig var den okunniga du.

Det enda sättet att undvika är att bygga din webbplats med läsaren i åtanke direkt från start.

Så … ta det papperet och svara på alla ovanstående frågor.

När du är klar har du din ultimata uppsättning riktlinjer som du kommer att agera när du arbetar på din webbplats.

Dessa svar kommer att vara ett exceptionellt kraftfullt verktyg när du går med. Du kommer att kunna komma tillbaka till dem när du står inför ett beslut angående din webbplats.

Ska du göra * detta * eller * det *? Gå till svarbladet och ta reda på det. Ska du använda en bred eller smal sidofält? Gå till svaren, ta reda på vilka som är mer benägna att resonera med målläsaren. Och så vidare.

Domännamn och webbhotell

Om du vill vara webbplatsägare behöver du ett domännamn och en webbhotell.

Tja, okej, tekniskt sett kan du bygga en testwebbplats alla på din egen dator och sedan köra den från en lokal webbserver (också installerad som programvara på din dator), men det skulle inte vara en användbar lösning för 99% av fall, så låt oss bara hoppa över det.

Så en värd och en domän …

De dåliga nyheterna här är att de båda kostar pengar.

De goda nyheterna … det är inte så mycket pengar i det stora tingen. När du lär dig kan du till och med starta flera små webbplatser på ett enda domännamn och under en enda webbhotell.

Men låt oss komma igång i början.

Webbhotell:

  • Enkelt uttryckt är en webbhotell där din webbplats sitter och där dina besökare kan hitta den. På ett sätt är webbhotell för webbplatser precis som lägenheter för människor. Under huven är webbhotell företag som hyr ut sina servrar i utbyte mot pengar (… små lägenheter för dina webbplatser).
  • För att komma igång kommer en vanlig delad värdplan att göra. Du kan få dem för allt från $ 3 / månad. Här är en fin jämförelse av populära webbhotell. Kolla in det och bestäm vilka av dessa företag som verkar helt rätt för dig. Våra rekommendationer gäller dock SiteGround, A2 Hosting och Dreamhost.

domäner:

  • Om en webbhotell är en lägenhet, är en domän adressen till lägenheten. Till exempel är domänen för denna webbplats hostingfacts.com.
  • Sättet att komma igång är att välja önskat domännamn och sedan köpa det från en registrator. Här är en omfattande guide för hur man köper ett domännamn, och här är en lista över domännamngeneratorer.

 

Förslag och tips för att välja ett domännamn

Okej, så att gå till en domänregistrator och faktiskt köpa domänen är en sak, men hur väljer du rätt domännamn?

Det finns ett par skolor:

  • Domännamn med märkesvaror. Dessa är domäner som består av ord som inte finns. Tänk, saker som Google.com eller Yahoo.com. Innan dessa företag kom med betydde dessa ord ingenting. Uppsidan av ett märkesdomännamn är att det är … tja, mycket märkbart, minnesvärt och det är lätt att skilja din webbplats från de andra.
  • Sökordsbaserade namn. Dessa består av befintliga ord, läggs i en sekvens som beskriver webbplatsens syfte. Tänk, saker som Pizza.com eller StartBloggingOnline.com. Med ett sådant domännamn kan dina besökare exakt förutsäga vilken typ av webbplats de just kommer att besöka. Nackdelen är att dessa domäner i allmänhet är mindre märkbara.
  • Kombinerade namn. Dessa är varumärkesdomäner och nyckelordbaserade domäner sammansatta. Tänk, Facebook.com eller Copyblogger.com. Sådana namn föreslår “en del” av webbplatsens natur för besökaren, men de är fortfarande mycket märkbara.

Några allmänna riktlinjer oavsett vilken domäntyp du väljer:

  • Gör domänen lätt att memorera.
  • Gör det kort och enkelt. Ju längre domänen är, desto mer förvirrande är den.
  • Skaffa en. Com (om möjligt). .Com är den viktigaste “toppdomänen” som finns tillgänglig. Nöj inte med något annat.
  • Försök att undvika bindestreck. Skaffa ditt namn i enformad form som “cakerecipes.com” istället för “cake-recipes.com”

Saker att ha redo efter detta kapitel:

  • Ett domännamn.
  • En webbhotell.
  • Ditt svarblad – målen för din webbplats och hur den kommer att tjäna publiken.

Behöver du mer hjälp? Här är ytterligare läsning för dig:

  • Varför delad hosting? Huvudtyper av värdar jämfört
  • 10 saker som gör en webbhotell bra
  • 12 regler för att välja rätt domännamn
  • En omfattande guide för webbplatsplanering

KAPITEL 2: Designing and Wireframing

Ta papper och penna och repa tillsammans med din webbplatsstruktur

Okej, låt oss gå in i designfasen.

Första sakerna först, här är den arbetsetik vi ska gå här:

  • Vi använder penna och papper så länge vi kan och byter sedan till datorn. Tro oss, varje minut som du arbetar med din design på papper sparas en timme när du börjar ställa in saker på datorn.
  • Vi gör iterativt arbete … Vi gör »kontrollerar resultaten» förbättrar »kontrollerar resultaten» upprepa tills du är klar.

I kapitel 1 nämnde vi något vi kallade regel nr 1 för webbplatsbyggnad. Nu är det dags för regel nr 2:

Regel 2 för webbplatsbyggnad:

Tänk innehåll först.

Innehållet är det som betyder en webbplats. Inte designen. Innehåll.

Folk kommer för innehållet. De kommer inte för designen. Designen är bara ett fordon för att leverera innehållet.

Börja aldrig med hur din webbplats ser ut. Börja med innehåll. Innehåll. Innehåll. Innehåll.

Så vad menar vi med “innehåll”? Kort sagt, det är det som folk vill få från din webbplats. Blogginlägg, produkter i butiken, forumtrådar om du bygger ett forum, nyhetsartiklar, ditt affärserbjudande osv.

“Verkligen? Utseendet spelar ingen roll? ” – Du frågar.

I stället för att vi slår ned detta, kolla in den här sidan:

Enkel webbplats

Denna enkla webbsida är den överlägset bästa förklaringen av vad design är och vilket syfte den tjänar online.

Så kom ihåg, innehåll först!

Webbplatsens innehåll och struktur

Okej, så eftersom innehållet är det viktigaste måste du ha (det mesta) redo i förväg. Eller åtminstone måste du ha en god uppfattning om hur mycket innehåll det kommer att bli och i vilken form.

Notera. Vi vet att den här delen kan vara tuff. Börja med innehåll verkar ganska onaturligt för webbdesign, men det är verkligen det bästa sättet att få ett fantastiskt resultat i slutändan. Så tänk på innehållet du vill dela med läsaren och hur du vill presentera det.

Nästa steg är att ta bort de enskilda typerna av sidor du kommer att behöva (som en hemsida, en produktsida, en kategorisida, en om-sida, en kontaktsida, huvudsäljsidan, en målsida för prenumeration på nyhetsbrev, huvudblogglista, enskilda inlägg, kanske en butik och allt annat som verkar behövas.

Tänk, vad är det mest effektiva sättet att organisera ditt innehåll på webbplatsen?

Gör allt detta på papper. Det kommer sannolikt att bli enklare och snabbare för dig än att lära dig en bit kartritningsprogramvara på plats.

Exempel:

innehåll-struktur

Skrapa tillsammans en trådram

En trådram i webbdesign är helt enkelt en schematisk sida eller en ritning – en visuell guide som representerar ramen för en webbplats (Wikipedia berättar för oss).

Trådramar är fantastiska! Vi använder dem för de flesta saker vi gör som är tänkta att visas online. Här är till exempel en trådram för den här guiden:

Skrapa ihop en trådram

Som ni kan se, återigen är det på papper. Även om det finns flera appar för den här typen av arbete, rekommenderar vi inte att du använder dem. De kan vara bra för prodesigners, men en nybörjare eller en mellanliggande person kommer bara att förlora tid att lära sig dem och i slutändan kommer de inte att få mycket förbättring jämfört med vad de skulle uppnå genom penna och papper.

Så hur man trådsramar?

Det finns två tillvägagångssätt om du är nybörjare:

  • Gå med flödet om du känner dig stark och dra bara bort (inte alltid en perfekt lösning).
  • Få snabba kunskaper om hur man kan rätta till trådramen (vanligtvis bättre).

För det senare, gå hit – en bra guide.

(Se till att skapa en trådram för alla viktiga sidor som du har listat i föregående steg.)

Saker att ha redo efter detta kapitel:

  • Det mesta av innehållet för webbplatsen, eller åtminstone det mesta förutspådde (till exempel om du litar på användargenererat innehåll, är det svårt att ha det i förväg).
  • Din webbplats innehållsstruktur förberedd som en graf.
  • En trådram för de enskilda sidtyperna du behöver.

Vidare läsning:

  • 9 steg för att planera webbplatsens innehåll
  • Är du ny på webbdesign? Börja här.

KAPITEL 3: UX och UI

Underskatta aldrig vikten av användarupplevelse och användargränssnitt

Som i, användarupplevelse och användargränssnitt.

WebDesignerDepot ger oss en ganska poetisk definition av de två:

UI är sadeln, stigbotten och regeringen.

UX är en känsla av att du kan rida på hästen och repa ditt boskap.

För en mer praktisk definition:

  • UI är vad användaren ser när de tittar på din webbplats.
  • UX är hur de tycker om det.

Paret och hur väl det körs definierar i princip din webbplats användbarhet för slutanvändaren / besökaren.

Både UX- och UI-design är stora ämnen i sig själva, och det finns många mindre element som spelar en roll i det slutliga resultatet.

Kort sagt, det finns mycket att lära sig om du precis börjar din resa.

Så istället för att vi försöker krampa en hel UX- och UI-designkurs här, låt oss bara peka ut en handfull viktiga element och sedan skicka dig någon annanstans för ytterligare läsning.

Användarmål

UX handlar om användarmål … Inte lika mycket av dina mål … Användarmål.

Okej, vad betyder detta? Först av allt, gå tillbaka till syftet med din webbplats – det du arbetade med i de föregående kapitlen. Anledningen till att du bygger webbplatsen och hur den hjälper användaren / besökaren.

Hur översätts det till besökarens mål? … Vad är den ena saken som besökaren vill få eller uppnå när de kommer till din webbplats? Det är deras mål.

Hur enkla är dessa mål att uppnå?

Fokusera sedan på följande fråga:

  • Kan besökaren uppnå sitt mål enkelt? – Kan de komma till den exakta informationen de kom på på ett enkelt sätt?

För att svara på detta måste du gå tillbaka till din trådram, din innehållsstruktur och dubbelkontrollera saker.

Se till att innehållsstrukturen och sidorna du har tänkt på är användbara ur användarens synvinkel. Se till att det är möjligt för dem att navigera mellan de viktiga sidorna fritt och på ett icke-förvirrande sätt.

I själva verket ser vi till att webbplatsen ger dina besökare värde.

Svårt att ta reda på detta helt på egen hand, är det inte?

Det är starkt rekommenderat att du kolla in resurserna i avsnittet “vidare läsning” i detta kapitel … men du kan också pröva “en hack” så att säga.

Tänk nämligen på vad som frustrerar dig när du besöker webbplatser som liknar den du vill bygga? Kanske finns det lite information som verkligen är svårt att komma till eller gränssnittselement som gör webbplatsen förvirrande.

Ta anteckningar, dra slutsatser, gör inte samma misstag med din webbplats.

Använda känslor som ett verktyg

När du arbetar med användargränssnittet och UX på din webbplats är det du i princip syftar till att åberopa en viss känsla hos din besökare.

Du vill att de ska känna ett visst sätt, vilket sedan övertygar dem att agera på ett visst sätt. Således gör din webbplats verkligen användbar.

För att arbeta med den känslomässiga delen av jobbet är ett av de bästa verktygen färg.

Färger har olika betydelser i olika kulturer. Att förstå dessa skillnader kan göra ditt arbete mycket enklare. Här är ett trevligt fuskark.

När du väl är i fältet med vilka färger du vill (eventuellt) använda, här är några allmänna riktlinjer när du arbetar med färg:

  • Välj ett huvudfärgschema som består av ett par färger som går bra tillsammans. Här är en fantastisk färgschematgenerator.
  • Välj en färg som kommer att bli din accentfärg – färgen som kommer att användas för actionknappar, köpknappar osv. I princip allt som behöver användarens uppmärksamhet.

Typografi

I många fall är typografi där du vinner (eller förlorar) spelet med webbplatsbyggnad.

Det är så såååå lätt att glömma typografi helt och bara använda Arial för allt.

Rekommenderas inte.

Idag är det mycket lätt att arbeta med anpassade teckensnitt och du behöver inte ens göra något tekniskt för att aktivera de anpassade teckensnitten på din webbplats.

Stor, storslagen typografi är mycket i mode idag, och det gör också en designers arbete – särskilt en nybörjardesigner – mycket lättare.

Kolla in den här webbplatsen, till exempel:

bonobos

Har du lagt märke till någonting? Japp, teckensnitten är enorma, och de ser bra ut!

Så här arbetar du med detta:

  • I allmänhet behöver varje webbdesign två typer av text: rubrikerna och punkterna. I de flesta fall gör det bara ett teckensnitt per vardera.
  • Gå till Google-teckensnitt – Googles eget bibliotek med gratis teckensnitt du kan använda på din webbplats – och leta efter ett rubriksteckensnitt som du verkligen tycker om.
  • Ta sedan det typsnittets namn och leta efter det på Font Pair – det är ett bibliotek med färdiggjorda teckensnittsparningar som går bra tillsammans.
  • Välj en parning som ser fantastisk ut.
  • Skriv ner namnen på båda teckensnitten, du behöver dem senare.

Om du gör det på detta sätt påskyndas din process och ger dig fortfarande ett bra resultat.

Exempel: vi hittade ett teckensnitt som heter Bree Serif i Google-teckensnitt som vi ganska tycker om:

Bree-Serif

Sedan tog vi det till Font Pair, och webbplatsen föreslog att Bree Serif går bra med Open Sans. Perfekt:

Bree-Serif-Open-sans

Den slutliga strukturen

Slutligen det sista steget!

Hela poängen med detta kapitel är att landa på en slutlig layout / struktur som du kommer att använda för din webbplats. Vid denna punkt bör du vara nästan säker på vad du vill göra med din design och UI.

Saker att ha redo efter detta kapitel:

  • Dina användarmål tydligt listade.
  • Din trådram dubbelkontrolleras för att se till att dessa mål inte är förvirrande.
  • Det färgschema som valts.
  • Typografin räknade ut.
  • Hela webbplatsens layout / struktur / organisation av webbplatsen.

Vidare läsning: 

  • UX Magazine
  • UX-monter
  • Psykologin och känslorna bakom färg i webbdesign
  • Vad är design av användarupplevelse? Översikt, verktyg och resurser
  • Ställa in smarta affärsmål för en webbplats
  • 8 regler för att skapa effektiv typografi

KAPITEL 4: WordPress, HTML eller mallar?

Bestäm vilken väg du ska gå – innehållshanteringssystem eller kod det från grunden

Här börjar det verkliga, händerna smutsiga arbetet under huven!

Detta är förmodligen den läskigaste delen av processen (erkänn det!).

För en gångs skull är det rätt tid att lägga penna och papper åt sidan och börja arbeta med viss programvara.

Och precis utanför grinden finns det massor av frågor …

  • Ska jag lära mig HTML?
  • Vad sägs om CSS?
  • Kommer färdiga HTML-webbplatsmallar att göra tricket för mig?
  • Behöver jag lära mig ett programmeringsspråk som PHP?
  • Jag har hört WordPress är sättet att bygga en webbplats idag.
  • Jag såg den Squarespace Super Bowl-annonsen. Vad är det med det?
  • Vad heter den här saken Joomla? eller Drupal?
  • och på och på och vidare.

Svaret på alla dessa är ja.

Som i, ja, du kan göra endera eller alla dessa saker, och det är bara upp till dig att bestämma vilken väg du ska välja.

Det vi försöker säga är att det inte finns det bästa # metoden här. Det beror på hur involverad du vill få med webbutveckling, hur mycket av grunderna för webbplatsbyggnad du vill lära dig, hur snabbt du behöver en kvalitetswebbplats och hur anpassningsbar du vill att den ska vara efteråt.

Så här kommer vi att fortsätta från det här kapitlet framåt. Först, Välj den person som definierar dig bäst:

  • a) Jag vill lära mig vad webbutveckling handlar om, alla grunderna, alla inre funktioner på en webbplats och alla mekanismer som gör att en webbplats fungerar.
  • b) Jag vill lära mig att använda en pålitlig webbplatsbyggare som kommer att hantera det mesta av det tunga lyftet för mig.
  • c) Jag vet inte vad jag ska göra. Jag vill bara ha en webbplats som jag kan bygga själv och som kommer att fungera korrekt.

Besvarade a)? Gå till kapitel 5.

Besvarad b)? Gå till kapitel 6.

Besvarad c)? Kolla gärna in den här artikeln och kom tillbaka (det skulle hjälpa dig att välja den perfekta vägen):

  • 8 bästa plattformar för bloggning och webbplatsbyggnad granskade … Varje plattform beskrivs tillsammans med sina fördelar och nackdelar, och resursen föreslår också det bästa tillgängliga valet (Wix eller SB) för dina specifika behov.

Har du läst den? Bra! Så vilken av personas ovan beskriver dig bäst – a) eller b)?

De verktyg som kan komma till hands på vägen:

  • Grafik: Paint.NET, Gimp, Pixlr.
  • Kodskrivning: Anteckningar ++, TextWrangler, SublimeText.
  • Arbetsledning: Trello.
  • Design: färgscheman, Google-teckensnitt, verktygen härifrån.
  • Fotografi: Unsplash, AllTheFree lager

KAPITEL 5: Introduktion till HTML, CSS & Javascript

Hur webbplatser är en inbyggd verklighet

I det här kapitlet kommer vi att påpeka de grundläggande grunderna för webbutveckling, förklara de viktigaste termerna och sedan skicka dig till vissa specifika resurser där du kan förbättra dina kunskaper och färdigheter.

html

HTML är webbplatsens språk. Varje webbsida byggs eller konverteras till HTML vid någon tidpunkt.

För att se HTML-strukturen i den här guiden du läser här trycker du bara på “Ctrl + U” på tangentbordet.

HTML definierar varje block du ser på en webbsida. I slutet av dagen, för att visa allt på en webbsida, måste det konverteras till HTML.

För att lära dig HTML effektivt rekommenderar vi att du registrerar dig för en av de (gratis eller betalda) kurserna som finns på webben. Några av de bästa finns på Codeacademy eller Treehouse.

Här är till exempel ett specifikt avsnitt om Codeacademy som handlar om HTML och CSS.

CodeCademys hemsida

Så det är den omfattande metoden för HTML.

CSS

CSS – för att hoppa över tråkiga tekniska detaljer – ansvarar för att utforma allt som är synligt på en webbsida.

CSS tar HTML-taggar och strukturerar sedan och lägger till styling till dem. Saker som: fet text, färgjusteringar, skuggor, layouter, även animationer, görs nu huvudsakligen med CSS.

För en bättre förståelse av hur detta exakt fungerar, hopp över till denna snabba kurs på Codeacademy.

För mer djupgående lärande, kolla även CSS-avsnitten på antingen Codeacademy eller Treehouse.

JavaScript, jQuery, Bootstrap osv.

JavaScript är ett programmeringsspråk som låter dig introducera några dynamiska åtgärder på din webbplats. Till exempel kan du göra saker som validera webbformulär eller interagera med användaren på ett mer strömlinjeformat sätt utan att behöva ladda om den sida de är på. Här är en fin tutorial av w3schools.

Med detta i åtanke är jQuery ett JavaScript-bibliotek som låter dig skapa avancerade saker med mindre kodning. Mycket praktiskt för en webbutvecklare. Läs mer här.

Slutligen är Bootstrap en mycket intressant uppfinning. Ursprungligen introducerades av Twitter, det är i grunden en front-miljö som påskyndar processen för att bygga en webbplats genom att leverera de flesta av de gemensamma webbplatselement som redan är förbyggda. Det låter komplicerat, eller hur??

Men det är det inte. Kolla bara in denna startkurs på Codeacademy (förresten, det är så vi ursprungligen lärde oss Bootstrap).

Saker att ha redo efter detta kapitel:

  • I grund och botten är det första utkastet till din HTML / CSS-webbplats helt byggt. Därifrån kan du börja iterera och förbättra det slutliga resultatet.

KAPITEL 6: Plattformar för webbplatsbyggnad

Ställer du in din första webbplats? Prova gratis webbplatsplattformar som WordPress, Joomla eller Drupal

Kapitel 6: Webbplatsbyggnadsplattformar

  • Squarespace
  • WordPress
  • Joomla & Drupal

Det finns fler webbplatsbyggare ute än du kan skaka en pinne på. (Om du är en person som skakar fast vid saker.)

Okej, skämt åt sidan.

Det är uppenbart att om du inte har lusten att lära dig att koda saker för hand är de säkert flera lösningar som kan hjälpa dig.

Notera. Kom ihåg att allt annat vi diskuterade i kapitel 1-4 fortfarande gäller här. Även om du går med en webbplatsbyggande lösning som är typ av hands-off, måste du fortfarande vara noga med att göra den slutliga produkten vänlig för användarna och i linje med allas mål. Dessa platsbyggande verktyg är exakt det … verktyg.

Börja med de som är lättast att förstå:

Squarespace

Den enda webbplatsplattformen som annonserar under Super Bowl.

Kort sagt, en mycket praktisk lösning som kan användas av vem som helst. Inga tidigare kunskaper krävs.

Det låter dig bygga klassiska webbplatser, bloggar, till och med e-handel butiker vi skrev till och med en recension om dem. Gränssnittet och hela processen att använda det är ganska lätt att förstå, plus Squarespace-killarna ger många intressanta tutorials. Kolla in dem här.

WordPress

Ärligt talat, vi älskar WordPress.

För det mesta är det den perfekta plattformen att bygga en webbplats med. Det har den perfekta balansen mellan komplexitet och användarvänlighet, och det är i princip oändligt anpassningsbara.

WordPress-animering

Dessutom är det för närvarande den mest populära webbplatsplattformen för dem alla. Som delat av skaparen av WordPress – Matt Mullenweg – driver nu WordPress 25% av hela internet. Kan alla dessa människor ha fel?

Okej, så för att komma igång med WordPress behöver du bara din domän och värd. WordPress-mjukvaran i sig är helt gratis.

För att börja, känn dig fri att följa en av dessa vägar:

a) “Snabbstartvägen”

  • Gå hit för att lära dig det förenklade sättet att installera WordPress och starta din webbplats på en eftermiddag.
  • Välj ett gratis tema från den officiella katalogen – se till att det är i linje med dina webbplatsmål och att layouten / designen inte är långt ifrån den önskade strukturen (du kommer att justera det något).
    • Kontrollera dessa två resurser för att lära dig hur du anpassar ett befintligt tema.
    • Alternativt kan du välja ett mångsidigt premiumtema som kan justeras genom ett praktiskt användargränssnitt (ingen kodning inblandad). X-temat är ett bra exempel på en sådan sak.
  • Installera några av de mest populära och bästa pluginsna för att få extra funktioner.

b) “Den djupgående vägen”

  • Börja med att lära dig WordPress via en onlinekurs. Treehouse erbjuder en fantastisk.
  • Välj ditt tema och plugins precis som ovan. Bygg alternativt ditt eget tema från grunden.

I slutändan är WordPress förmodligen den mest mångsidiga webbplatsplattformen på marknaden. Med det kan du bygga praktiskt taget alla typer av webbplatser, inte bara bloggar eller enkla affärssidor. Här är en lista med 47 (!) Olika sätt att använda WordPress, bara för att få dig att tänka.

Joomla och Drupal

Även om Joomla och Drupal är lite olika från varandra är båda utmärkta innehållshanteringssystem för mer avancerade webbprojekt.

De är inte så starka designmässiga, men de är mycket anpassningsbara och kan hantera alla typer av webbplatser du kan ha i plan.

Ibland, beroende på komplexiteten i ditt projekt, kan de behöva mycket mer tid att behärska och mycket mer ansträngning för det.

För mer djupgående utbildning finns det fantastiska kurser på Lynda.com, både för Joomla och Drupal.

Saker att ha redo efter detta kapitel:

  • Det första utkastet till din webbplats helt byggd, oavsett om du bestämde dig för att använda WordPress eller någon annan plattform.
  • Se till att det är i linje med dina ursprungliga mål, målgruppen och att den levererar bra UX.

KAPITEL 7: Mobil responsiv design

Mer än 60% av människor använder mobiler och surfplattor för att surfa på webben

Mobil lyhördhet är nu en mycket viktig aspekt av webbplatsbyggnad, förmodligen mer än någonsin.

Det här är vad hela frågan handlar om:

I grund och botten just nu finns det fler människor som använder mobila enheter för att komma åt webben än någonsin tidigare. Det beräknas faktiskt att det nu finns fler mobila internetanvändare än stationära internetanvändare (75,1% mot 52,7%).

Men det finns ett problem.

Inte varje webbdesign kommer att optimeras så att den visas på mobila enheter precis utanför grinden.

Några vanliga problem inkluderar:

  • teckensnitten är för små,
  • själva layouten justeras inte alls till en mindre skärm,
  • eller den teknik som används för att bygga webbplatsen inte är tillgänglig på mobil.

Det är här idén om mobil lyhördhet spelar in.

En lyhörd webbplats svarar på den miljö den visas på. Om det är en stationär dator återges webbplatsen på ett visst sätt. Om det är en mobil återges den på ett annat sätt.

Här är en bättre förklaring: What the Heck is Responsive Web Design?

Så saken att göra just nu är att kontrollera och se till att din webbplats fungerar på mobila enheter. Använd dina egna enheter för att kontrollera detta, men prova också Googles mobiltest eller hoppa över till ett verktyg som Responsive Design Tester.

Om det finns problem måste du fixa dem.

Några lösningar:

  • Responsiv webbdesign – hur man gör
  • Hur man gör webbplatsen lyhörd på cirka 15 minuter

KAPITEL 8: Förena allt

Du känner till grunderna, nu är det din tur

Vänta, vi är nästan där!

Detta är det sista kapitlet på vår ganska långa resa.

Vid denna tidpunkt bör du ha din första webbplats byggd … Vara det med WordPress, handbyggd HTML / CSS, någon webbplatsbyggare eller vad som helst andra verktyg du valde för jobbet.

Kort sagt, grattis! Men det finns fortfarande ett par saker som är värda att göra:

  • Kolla in de saker vi diskuterade i kapitel 1 och 2. Se till att målen verkligen fungerar för slutanvändaren, och att webbplatsen inte är förvirrande.
  • Validera din kodstruktur genom W3Cs valideringstjänst för markering.
  • Kontrollera om det inte finns några säkerhetsproblem på webbplatsen. Använd skannern från Sucuri för det.
  • Få feedback från samhället. Kolla vad andra tycker om ditt arbete. Forum på Sitepoint kan vara bra för det.

Om det är din första läsning av den här resursen uppmuntrar vi dig verkligen att komma tillbaka till den ett par gånger och behandla den som en referensfil för din vidareutbildning.

Som vi sa i början, känn dig fri att använda TOC och navigera från kapitel till kapitel och resurs till resurs som du finner lämpligt.

Slutligen är vi nyfiken … vad är din största utmaning när det gäller webbplatsbyggnad, webbutveckling eller design? Vänligen dela i kommentarerna eller via Twitter. Vi är alla öron!

Tack för att du läste, du är fantastisk!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map