Nettutvikling og design 101

web_development_101Vil du vite det grunnleggende om nettutvikling og design? Rått…


Men det er et problem med denne tankegangen, eller mange av dem faktisk …

  • Hva er hensikten med å ha et nettsted? Trenger alle virkelig en?
  • I så fall, hvordan bygger du et nettsted for kvalitet? Eller med andre ord, hvordan lærer du grunnleggende webutvikling og design som vil tillate deg å bygge det kvalitetsnettstedet selv?
  • Enda viktigere er det at du kan bygge et kvalitetsnettsted på FØRSTE forsøk? Eller trenger du mange års erfaring bak deg, før du kan håpe på noe resultat over fryktelig?

La oss svare på alt dette i dette nybegynnerguide for nettutvikling og design.

[Avslørings varsel. Jepp, du kan bygge et kvalitetsnettsted på første forsøk.]

Hva dekkes i denne guiden?

OK, først, først er vi glade for at du fortsetter å lese, og at du har bestemt deg for å prøve nettutvikling! Slik kommer det til å spille ut:

Kapitlene presenteres på en veldig enkel måte, med hovedinnholdet til venstre og de handlinger som er til høyre. Som så:

Innføring i guide: kapittel 1

Slik går du frem:

  • Mens du er på første lesing: Vi anbefaler at du leser hele saken fra topp til bunn. Dette vil gi deg et godt syn på emnet på 10.000 fot og hjelpe deg med å forstå de viktigste delene av det. Den vil også gi deg grunnleggende verktøy og metoder for hvordan du kan håndtere individuelle oppgaver.
  • Mens du er på 2. les og videre: Bruk TOC og hopp over til den delen som interesserer deg mest. Bruk gjerne delingsknappene ved siden av hvert kapittel, og send linkene til deg selv eller til dine venner / følgere som kan være interessert.

Klar? La oss gå til kapittel 1.

Hvem er denne guiden til?

Hvis du vil lære grunnleggende webutvikling og design, er denne guiden for deg. Uansett hva motivasjonen din er.

Du trenger heller ikke tidligere teknisk kunnskap for å komme i gang (annet enn grunnleggende “nettferdigheter”). Hele poenget med denne guiden er å være et slags “101” -kurs for alle som er interessert i å bygge nettsteder og lære nettutvikling.

Her er noen vanlige årsaker til at du kan være interessert:

  • 1. Du trenger et nettsted for virksomheten din (og du vil se om du kan bygge det selv).
  • 2. Du vil lære nettutvikling av lidenskap eller midlertidig interesse (ikke noe dårlig med det).
  • 3. Du trenger et nettsted for skolen.
  • 4. Du hjelper deg med en venn eller familiemedlem for å få nettstedet deres på nettet.

Hovedideen som skal veilede oss

Dette er viktig! Og vær ikke sint på oss hvis du er en avansert nettutvikler som leser dette, men hovedideen som kommer til å veilede oss gjennom hele nettutviklingen og design 101-ressursen er:

“Den minste motstandsmetoden”

Her er de tre prinsippene for den minste motstandstilnærmingen:

  • Vi er ikke bryte ting ned på molekylært nivå. Dvs. vi kommer ikke til bunns i hvordan programmeringsspråk fungerer, eller hvordan en webserver fungerer.
  • Vi er ikke oppfinner hjulet på nytt. Dvs. Hvis noen allerede har løst et gitt problem og gjort løsningen tilgjengelig, vil vi bruke det.
  • Vi er gjør en enkel løsning fantastisk, snarere enn en komplisert og tilsynelatende mer funksjonell løsning buggy og ikke forståelig.

KAPITTEL 1: Planen

Din idé, nettstedstype, domenenavn og hosting.

Før du setter opp et nettsted, trenger du en plan

Ironisk som det kan høres ut – treffens 80-talls show “The A-Team” har lært oss, en god plan er en nøkkelen til suksess.

Hvis du har hatt et nettsted som sitter i deg en stund nå, er du helt sikkert spent på den eneste ideen om å endelig få det ut for andre å lese og bla gjennom.

Du vil at nettstedet ditt skal være kjempebra. Du vet sikkert hvordan det skal se ut til en viss grad. Eller kanskje har du til og med den perfekte logoen klar.

Men…

Dette er overhode ikke der du bør komme i gang. Begynner du med forhåndsbestemte forventninger, vil dette bare føre deg til mye forvirring underveis og et sub-par-resultat på slutten.

Tenk i stedet på følgende:

  1. Skill deg fra alle tekniske mål du måtte ha. Som for eksempel målet om å lære nettstedsteknologier eller bestemt programvare for nettstedet.
  2. Still deg et hovedspørsmål: “Hva trenger jeg nettstedet til?”

Dette handler ikke om deg, dette handler om målet med nettstedet.

Spørsmål du må stille deg før du setter opp nettstedet ditt

  1. Hva nettstedet er ment å oppnå?
  2. Hva vil være den viktigste “tingen” presentert gjennom nettstedet? (f.eks. virksomheten din, et produkt, blogginnleggene dine osv.)
  3. Vil nettstedet ha noe spesielt formål? (f.eks. en e-handelsbutikk, en fotografportefølje osv.)
  4. Hvem er målgruppen?
  5. Hvorfor er de interessert i emnet på nettstedet?
  6. Hvilken smerte løser nettstedet for individuelle publikummedlemmer?

La oss snakke publikum om et øyeblikk om disse tre siste spørsmålene …

Det er to hovedregler for bygging av nettsteder. Her er regel nr. 1:

 Leseren / besøkende kommer først. De er hovedpersonen som nettstedet ditt må glede.

På en måte er ikke nettstedet ditt. Det er deres.

(Regel 2 diskuterer vi om et øyeblikk.)

Å glemme denne enkle retningslinjen kan føre deg helt feil vei, til og med til et sted som er forvirrende for alle rundt deg.

“Ugh! Folk forstår bare ikke hva dette nettstedet handler om. Hvordan kan de være så ignorante ?! ” – du ender opp med å tenke. Men som det viser seg, den uvitende var deg.

Den eneste måten å unngå det på er å bygge nettstedet ditt med leseren i tankene helt fra start.

Så … ta det papiret, og svar på alle spørsmålene ovenfor.

Når du er ferdig, har du det endelige sett med retningslinjer som du skal handle etter mens du jobber på nettstedet ditt.

Disse svarene vil være et usedvanlig kraftig verktøy når du følger med. Du kan komme tilbake til dem når du blir møtt med en beslutning angående nettstedet ditt.

Bør du gjøre * dette * eller * det *? Gå til svararket og finn ut. Bør du bruke en bred eller smal sidefelt? Gå til svarene, finn ut hva som er mer sannsynlig å resonere med målleseren. Og så videre.

Domenenavn og webhotell

Hvis du vil være eieren av en webside, trenger du et domenenavn og en webhost.

Vel, greit nok, teknisk sett kan du bygge et testnettsted alt på din egen datamaskin og deretter kjøre det fra en lokal webserver (også installert som programvare på datamaskinen din), men det ville ikke være en brukbar løsning for 99% av tilfeller, så la oss bare hoppe over det.

Så, en vert og et domene …

Den dårlige nyheten her er at de begge koster penger.

Den gode nyheten … det er ikke så mye penger i den store tingenes ordning. I tillegg, mens du lærer, kan du til og med starte flere små nettsteder på et enkelt domenenavn og under en enkelt webhotell.

Men la oss komme i gang i begynnelsen.

Nettverter:

  • Enkelt sagt er en webhotell der nettstedet ditt sitter, og hvor de besøkende kan finne det. På en måte er webverter for nettsteder akkurat som leiligheter for mennesker. Under panseret er webhotell firmaer som leier ut serverne sine i bytte for penger (… små leiligheter for nettsteder).
  • For å komme i gang vil en standard delt hostingplan gjøre. Du kan få dem for alt fra $ 3 per måned. Her er en fin sammenligning av populære webverter. Sjekk det ut og bestemme hvilke av disse selskapene som virker helt riktig for deg. Imidlertid går anbefalingene våre for SiteGround, A2 Hosting og Dreamhost.

domener:

  • Hvis en webhotell er en leilighet, er et domene adressen til den leiligheten. For eksempel er domenet til dette nettstedet hostingfacts.com.
  • Måten å komme i gang er å velge ønsket domenenavn og deretter kjøpe det fra en registrar. Her er en omfattende guide for hvordan du kjøper et domenenavn, og her er en liste over domenenavnegeneratorer.

 

Forslag og tips for valg av domenenavn

OK, så det å gå til noen domeneregistrator og faktisk kjøpe domenet er en ting, men hvordan velger du riktig domenenavn?

Det er et par skoler:

  • Merkevaren domenenavn. Dette er domener som består av ikke-eksisterende ord. Tenk ting som Google.com eller Yahoo.com. Før disse selskapene fulgte med betydde disse ordene ingenting. Ulempen med et merkevaredomenenavn er at det er … vel, veldig merkevare, minneverdig, og det er lett å skille nettstedet ditt fra de andre.
  • Nøkkelordbaserte navn. Disse består av eksisterende ord, satt i en sekvens som beskriver formålet med nettstedet. Tenk ting som Pizza.com eller StartBloggingOnline.com. Med et slikt domenenavn vil de besøkende kunne forutsi nøyaktig hvilken type nettsted de nettopp skal besøke. Ulempen er at disse domenene generelt er mindre brennbart.
  • Kombinerte navn. Dette er merkede domener og søkeordbaserte domener satt sammen. Tenk, Facebook.com eller Copyblogger.com. Slike navn antyder “noen” deler av nettstedets natur for besøkende, men de er fremdeles meget brandable.

Noen generelle retningslinjer uavhengig av domenetype du velger:

  • Gjør domenet enkelt å huske.
  • Gjør det kort og enkelt. Jo lengre domene er, desto mer forvirrende er det.
  • Få et .com (hvis mulig). .Com er det viktigste “toppdomenet” tilgjengelig. Ikke nøy deg med noe annet.
  • Forsøk å unngå bindestreker. Få navnet ditt i en enkelt klattform som “cakerecipes.com” i stedet for “cake-recipes.com”

Ting å ha klar etter dette kapitlet:

  • Et domenenavn.
  • En webvert.
  • Svararket ditt – målene for nettstedet ditt og hvordan det skal tjene publikum.

Trenger du mer hjelp? Her er videre lesing for deg:

  • Hvorfor delt hosting? Hovedtyper verter sammenlignet
  • 10 ting som gjør et webhotell bra
  • 12 regler for valg av riktig domenenavn
  • En omfattende guide for nettstedplanlegging

KAPITTEL 2: Designing and Wireframing

Ta papir og penn og skrap sammen med nettstedstrukturen din

OK, la oss gå inn i designfasen.

Første ting først, her er arbeidsetikken vi skal gå etter her:

  • Vi bruker penn og papir så lenge vi kan, og først deretter bytter vi til datamaskinen. Tro oss, hvert minutt som brukes på å jobbe med designen din på papir, spares en time når du begynner å stille inn ting på datamaskinen.
  • Vi jobber med iterativt arbeid … Vi sjekker resultatene »forbedrer» sjekker resultatene »gjenta til det er gjort.

I kapittel 1 nevnte vi noe vi kalte regelen nr. 1 for nettstedbygging. Nå er det tid for regel nr. 2:

Regel 2 av nettstedbygging:

Tenk innhold først.

Innhold er det som betyr noe på et nettsted. Ikke designet. Innhold.

Folk kommer for innholdet. De kommer ikke for designen. Designet er bare et kjøretøy for å levere innholdet.

Begynn aldri med hvordan nettstedet ditt ser ut. Begynn med innhold. Innhold. Innhold. Innhold.

Så hva mener vi med “innhold”? Kort sagt, det er det folk vil ha fra nettstedet ditt. Blogginnlegg, produkter i butikken, forumtråder hvis du bygger et forum, nyhetsartikler, forretningstilbudet ditt, og så videre.

“Egentlig? Utseendet betyr ikke noe? ” – Du spør.

I stedet for at vi slår dette ned, sjekk ut denne siden:

Enkel webside

Denne enkle nettsiden er den desidert beste forklaringen på hva design er og hvilket formål den tjener på nettet.

Så husk, innhold først!

Nettstedets innhold og struktur

Ok, siden innholdet er det viktigste, må du ha (det meste av) det klart på forhånd. Eller i det minste må du ha en god ide om hvor mye innhold det kommer til å være og i hvilken form.

Merk. Vi vet at denne delen kan være tøff. Å begynne med innhold virker ganske unaturlig for design av nettsteder, men det er virkelig den beste måten å oppnå et ypperlig resultat til slutt. Så tenk på innholdet du vil dele med leseren, og hvordan du vil presentere det.

Det neste trinnet er å utpeke de enkelte sidene som du trenger (for eksempel en hjemmeside, en produktside, en kategoriside, en om-side, en kontaktside, hovedsalgssiden, en destinasjonsside for nyhetsbrev, hovedbloggoppføring, individuelle innlegg, kanskje en butikk, og hva annet ser ut til å være nødvendig).

Tenk, hva er den mest effektive måten å organisere innholdet ditt på nettstedet?

Gjør alt dette på papir. Det vil sannsynligvis være enklere og raskere for deg enn å lære noe stykke tegningsprogramvare på stedet.

Eksempel:

innhold-struktur

Skrap sammen en trådramme

En wireframe i webdesign er ganske enkelt en sideskjema eller blåkopi – en visuell guide som representerer rammen for et nettsted (Wikipedia forteller oss).

Trådrammer er kjempebra! Vi bruker dem til det meste vi gjør som er ment å vises på nettet. Her er for eksempel en wireframe for denne guiden:

Skrap sammen en trådramme

Som du kan se, igjen, det er på papiret. Selv om det er flere apper for denne typen arbeid, anbefaler vi ikke å bruke dem. De kan være gode for proffdesignere, men en nybegynner eller en mellomperson vil bare miste tid på å lære dem, og til slutt vil de ikke få mye forbedring i forhold til hva de ville oppnå gjennom penn og papir.

Så hvordan wireframe?

Det er to tilnærminger hvis du er nybegynner:

  • Gå med flyten hvis du føler deg sterk, og bare dra deg unna (ikke alltid en perfekt løsning).
  • Få rask kunnskap om hvordan du rammer ordentlig (vanligvis bedre).

For sistnevnte, gå hit – en flott guide.

(Sørg for å lage en wireframe for alle viktige sider som du har listet opp i forrige trinn.)

Ting å ha klar etter dette kapitlet:

  • Det meste av innholdet for nettstedet, eller i det minste det meste av det spådde (for eksempel hvis du er avhengig av brukergenerert innhold, er det vanskelig å ha det på forhånd).
  • Nettstedets innholdsstruktur utarbeidet som en graf.
  • En trådramme for de enkelte sidetypene du trenger.

Videre lesning:

  • 9 trinn for å planlegge innhold på nettstedet
  • Er du ny på nettdesign? Start her.

KAPITTEL 3: UX og UI

Undervurder aldri viktigheten av brukeropplevelse og brukergrensesnitt

Som i brukeropplevelse og brukergrensesnitt.

WebDesignerDepot gir oss en ganske poetisk definisjon av de to:

UI er salen, stigbøylene og regjeringene.

UX er følelsen av at du kan ri hesten, og tau storfeene dine.

For en mer praktisk definisjon:

  • UI er det brukeren ser når de ser på nettstedet ditt.
  • UX er hvordan de føler om det.

Paret, og hvor godt det er utført, definerer i utgangspunktet nettstedets nytte for sluttbrukeren / besøkende.

Både UX- og UI-design er store temaer i seg selv, og det er mange mindre elementer som spiller en rolle i det endelige resultatet.

Kort sagt, det er mye å lære hvis du nettopp begynner på reisen.

Så i stedet for at vi prøver å kramme et helt UX- og UI-designkurs her, la oss bare trekke frem en håndfull viktige elementer, og så sende deg et annet sted for videre lesning.

Brukermål

UX handler om brukermål … Ikke så mye av dine mål … Brukermål.

Ok, hva betyr dette? Først av alt, gå tilbake til formålet med nettstedet ditt – det du jobbet med i de forrige kapitlene. Årsaken til at du bygger nettstedet og hvordan det hjelper brukeren / besøkende.

Hvordan oversettes det til besøkende? … Hva er den eneste tingen besøkende vil få eller oppnå når de kommer til nettstedet ditt? Det er deres mål.

Hvor enkle er de målene å oppnå?

Deretter fokuserer du på følgende spørsmål:

  • Kan besøkende oppnå målet sitt enkelt? – Kan de komme til den nøyaktige informasjonen de kom til på en enkel måte?

For å svare på dette, må du gå tilbake til wireframe, innholdsstrukturen og dobbeltsjekke tingene.

Forsikre deg om at innholdsstrukturen og sidene du har tenkt ut er fornuftige fra brukerens synspunkt. Forsikre deg om at det er mulig for dem å navigere mellom de viktige sidene fritt og på en ikke-forvirrende måte.

I hovedsak sørger vi for at nettstedet gir besøkende besøkende verdi.

Det er ikke vanskelig å finne ut av alt dette på egen hånd?

Det anbefales på det sterkeste at du sjekker ressursene som er oppført i delen “videre lesing” i dette kapittelet … men du kan også prøve “en hack”, for å si det slik.

Tenk på hva som frustrerer deg når du besøker nettsteder som ligner den du vil bygge? Kanskje det er noe informasjon som er veldig vanskelig å få til eller et grensesnittelement som gjør nettstedet forvirrende.

Ta notater, trekk konklusjoner, ikke gjør de samme feilene med nettstedet ditt.

Bruke følelser som et verktøy

Når du jobber med UI og UX på nettstedet ditt, er det du i utgangspunktet sikter til å påkalle en viss følelse hos besøkende.

Du vil at de skal føle seg en viss måte, som deretter vil overbevise dem om å handle på en bestemt måte. Dermed gjør nettstedet ditt virkelig nyttig.

For å jobbe med den emosjonelle delen av jobben, er et av de beste verktøyene farge.

Farger har forskjellige betydninger i forskjellige kulturer. Å forstå disse forskjellene kan gjøre arbeidet ditt mye enklere. Her er et fint jukseark.

Når du er i ballparken for hvilke farger du vil (muligens) bruker, er her et par generelle retningslinjer når du jobber med farger:

  • Velg ett hovedfargeskjema som består av et par farger som går bra sammen. Her er en flott fargevalggenerator.
  • Velg en farge som skal være din aksentfarge – fargen som skal brukes til handlingsknapper, kjøpknapper osv. I utgangspunktet er alt som trenger brukerens oppmerksomhet.

typografi

I mange tilfeller er typografi der du vinner (eller taper) spillet om nettstedsbygging.

Det er så sååååå lett å glemme typografi fullstendig og bare bruke Arial til alt.

Ikke anbefalt.

I disse dager er det uber-enkelt å jobbe med tilpassede skrifter, og du trenger ikke engang å gjøre noe teknisk for å aktivere de tilpassede skriftene på nettstedet ditt.

Stor, storslagen typografi er veldig mye i mote i disse dager, og det gjør også en designers arbeid – spesielt en nybegynnerdesigner – mye enklere.

Sjekk ut dette nettstedet, for eksempel:

bonobos

Har du lagt merke til noe? Jepp, skrifttypene er enorme, og de ser bra ut!

Slik jobber du med dette:

  • Generelt trenger hver nettstedsdesign to typer tekst: overskrifter og avsnitt. I de fleste tilfeller er det bare en font per hver.
  • Gå til Google-skrifter – Googles eget bibliotek med gratis skrifter du kan bruke på nettstedet ditt – og se etter en overskriftstype som du virkelig liker.
  • Ta deretter navnet på skrifttypen og se etter den på Font Pair – det er et bibliotek med ferdiglagde fontkoblinger som går bra sammen.
  • Velg en sammenkobling som ser fantastisk ut.
  • Skriv ned navnene på begge skriftene, du trenger dem senere.

Hvis du gjør det på denne måten, vil du øke hastigheten på prosessen din og fremdeles gi deg et flott resultat.

For eksempel fant vi en font som heter Bree Serif i Google Font som vi liker:

Bree-Serif

Deretter tok vi den med til Font Pair, og nettstedet antydet at Bree Serif går bra med Open Sans. Perfekt:

Bree-Serif-open-sans

Den endelige strukturen

Endelig det siste trinnet!

Hele poenget med dette kapitlet er å lande på en endelig utforming / struktur som du skal bruke på nettstedet ditt. På dette tidspunktet bør du være omtrent sikker på hva du vil gjøre med designen din og brukergrensesnittet.

Ting å ha klar etter dette kapitlet:

  • Brukermålene dine er tydelig oppført.
  • Trådrammen din dobbeltsjekket for å sikre at disse målene ikke er forvirrende.
  • Fargeskjemaet er valgt.
  • Typografien fant ut.
  • Hele nettstedets layout / struktur / organisering av nettstedet.

Videre lesning: 

  • UX Magazine
  • UX-messe
  • Psykologien og følelsene bak farger i webdesign
  • Hva er brukeropplevelsesdesign? Oversikt, verktøy og ressurser
  • Sette smarte forretningsmål for et nettsted
  • 8 regler for å lage effektiv typografi

KAPITTEL 4: WordPress, HTML eller Maler?

Bestem hvilken rute du skal gå – innholdshåndteringssystemer eller kode det fra bunnen av

Her starter det virkelige, håndskitne, under panseret!

Dette er trolig den skumleste delen av prosessen (innrøm det!).

For en gangs skyld er det riktig tidspunkt å legge penn og papir til side og begynne å jobbe med litt programvare.

Og rett ut porten, er det massevis av spørsmål …

  • Bør jeg lære HTML?
  • Hva med CSS?
  • Vil ferdige HTML-nettstedsmaler gjøre susen for meg?
  • Må jeg lære et programmeringsspråk som PHP?
  • Jeg har hørt WordPress er måten å bygge et nettsted i disse dager.
  • Jeg så den Squarespace Super Bowl-annonsen. Hva skjer med det?
  • Hva heter denne saken Joomla? eller Drupal?
  • og av og på og videre.

Svaret på alle disse er ja.

Som i, ja, kan du gjøre en av eller alle disse tingene, og det er bare opp til deg å bestemme hvilken vei du skal velge.

Det vi prøver å si er at det ikke er den beste fremgangsmåten her. Det avhenger av hvor involvert du ønsker å bli med nettutvikling, hvor mye av det grunnleggende om bygging av nettstedet du vil lære, hvor raskt du trenger et kvalitetsnettsted og hvor tilpassbar du vil at det skal være etterpå..

Så her kommer vi til å gå videre fra dette kapittelet. Først, velg den persona som definerer deg best:

  • en) Jeg vil lære hva webutvikling handler om, alt det grunnleggende, alle de indre funksjonene til et nettsted, og alle mekanismene som gjør at et nettsted fungerer.
  • b) Jeg vil lære hvordan du bruker en pålitelig nettstedbygger som vil takle det meste av tunge løft for meg.
  • c) Jeg vet ikke hva jeg skal gjøre. Jeg vil bare ha en webside som jeg kan bygge selv, og som vil fungere ordentlig.

Besvarte a)? Gå til kapittel 5.

Besvart b)? Gå til kapittel 6.

Besvart c)? Ta en titt på denne artikkelen og kom tilbake (det skal hjelpe deg å velge den perfekte veien):

  • 8 beste plattformer for blogging og nettstedbygging som er gjennomgått … Hver plattform er beskrevet sammen med sine fordeler og ulemper, og ressursen foreslår også det beste tilgjengelige valget (Wix eller SB) for dine spesifikke behov.

Har du lest den? Flott! Så hvilken av personene ovenfor beskriver deg best – a) eller b)?

Verktøyene som kan komme til å være nyttige underveis:

  • Grafikk: Paint.NET, Gimp, Pixlr.
  • Kodeskriving: Notepad ++, TextWrangler, SublimeText.
  • Arbeidsledelse: Trello.
  • Design: fargevalg, Google-skrifter, verktøyene herfra.
  • Fotografering: Unsplash, AllTheFree lager

KAPITTEL 5: Introduksjon til HTML, CSS & Javascript

Hvordan nettsteder er en innebygd virkelighet

I dette kapittelet skal vi trekke frem de grunnleggende grunnleggende forholdene for nettutvikling, forklare de viktigste begrepene og så sende deg videre til noen spesifikke ressurser der du kan øke kunnskapen og ferdighetene dine.

HTML

HTML er språket på nettsteder. Hver webside er bygget eller konvertert til HTML på et tidspunkt.

For å se HTML-strukturen i denne guiden du leser her, trykker du bare “Ctrl + U” på tastaturet.

HTML definerer hver blokkering du ser på en webside. På slutten av dagen, for å vise noe på en webside, må det konverteres til HTML.

For å lære HTML effektivt, anbefaler vi deg å registrere deg på et av (gratis eller betalte) kursene som er tilgjengelige på nettet. Noen av de beste finner du på Codeacademy eller Treehouse.

Her er for eksempel et spesifikt avsnitt om Codeacademy, alt om HTML og CSS.

CodeCademys hjemmeside

Så det er den omfattende tilnærmingen til HTML.

CSS

CSS – for å hoppe over de kjedelige tekniske detaljene – er ansvarlig for å style alt som er synlig på en webside.

CSS tar HTML-tagger og strukturerer dem deretter. Ting som: fet tekst, fargejusteringer, skygger, oppsett, til og med animasjoner, gjøres nå hovedsakelig med CSS.

For en bedre forståelse av hvordan dette akkurat fungerer, hopp over til dette raske kurset på Codeacademy.

For mer dyptgående læring, sjekk også CSS-seksjonene på Codeacademy eller Treehouse.

JavaScript, jQuery, Bootstrap osv.

JavaScript er et programmeringsspråk som lar deg introdusere noen dynamiske handlinger på nettstedet ditt. Du kan for eksempel gjøre ting som å validere nettformer eller samhandle med brukeren på en mer strømlinjeformet måte uten å måtte laste inn siden de befinner seg på. Her er en fin tutorial av w3schools.

Når du har det i bakhodet, er jQuery et JavaScript-bibliotek som lar deg lage avanserte ting med mindre koding. Veldig nyttig for en nettutvikler. Lær mer her.

Endelig er Bootstrap en veldig interessant oppfinnelse. Opprinnelig introdusert av Twitter, er det i utgangspunktet et front-end miljø som fremskynder prosessen med å konstruere et nettsted ved å levere de fleste av de vanlige nettstedelementene som allerede er forhåndsbygget. Det høres komplisert ut, ikke sant?

Men det er det ikke. Bare sjekk ut dette startkurset på Codeacademy (forresten, slik har vi opprinnelig lært Bootstrap).

Ting å ha klar etter dette kapitlet:

  • I utgangspunktet er det første utkastet til HTML / CSS-nettstedet ditt fullstendig bygget. Derfra kan du begynne å iterere og forbedre det endelige resultatet.

KAPITTEL 6: Byggeplattformer på nettstedet

Setter du opp ditt første nettsted? Prøv gratis nettstedplattformer som WordPress, Joomla eller Drupal

Kapittel 6: Byggeplattformer for nettsteder

  • Square
  • WordPress
  • Joomla & Drupal

Det er flere nettstedbyggere der ute enn du kan riste på deg. (Hvis du er den typen som rister på ting.)

Ok, vitser til side.

Hvis du ikke har lyst til å lære å kode ting for hånd, er de helt klart flere løsninger som kan hjelpe deg.

Merk. Husk at alt annet vi diskuterte i kapittel 1-4 fortsatt gjelder her. Selv om du går med en nettstedsbyggingsløsning som er en slags hands-off, må du fortsatt være forsiktig med å gjøre det endelige produktet vennlig for brukerne og i samsvar med alles mål. Disse verktøyene for bygging av nettsteder er akkurat det … verktøyet.

Begynn med de som er lettest å forstå:

Square

Den eneste nettstedplattformen som annonserer under Super Bowl.

Kort sagt, en veldig praktisk løsning som kan brukes av hvem som helst. Ingen tidligere ferdigheter kreves.

Det lar deg bygge klassiske nettsteder, blogger, til og med e-handel butikker vi til og med skrev en anmeldelse om dem. Grensesnittet og hele prosessen med å bruke det er ganske enkelt å forstå, pluss at Squarespace-gutta gir mange interessante tutorials. Sjekk dem her.

WordPress

Ærlig talt, vi elsker WordPress.

Det meste av tiden er det den perfekte plattformen å bygge et nettsted med. Den har den perfekte balansen mellom kompleksitet og brukervennlighet, og den er i utgangspunktet uendelig tilpassbar.

WordPress-animasjon

Det er også den mest populære nettstedplattformen for dem alle. Som delt av skaperen av WordPress – Matt Mullenweg – styrker WordPress nå 25% av hele internett. Kan alle disse menneskene ta feil?

OK, så for å komme i gang med WordPress trenger du i utgangspunktet bare ditt domene og hosting. WordPress-programvaren i seg selv er helt gratis.

For å begynne, følg gjerne en av disse stiene:

a) “Hurtigstartstien”

  • Gå hit for å lære den forenklede måten å installere WordPress og starte nettstedet på en ettermiddag.
  • Velg et gratis tema fra den offisielle katalogen – sørg for at det stemmer overens med nettstedsmålene dine, og at layout / design ikke er langt fra ønsket struktur (du vil justere det litt).
    • Sjekk disse to ressursene for å lære hvordan du tilpasser et eksisterende tema.
    • Alternativt kan du velge et flerbrukt premium-tema som kan justeres gjennom et praktisk brukergrensesnitt (ingen koding involvert). X-temaet er et godt eksempel på noe slikt.
  • Installer noen av de mest populære og beste plugins for å få ekstra funksjoner.

b) “Den dyptgående banen”

  • Start med å lære WordPress gjennom et online kurs. Treehouse tilbyr en fantastisk en.
  • Velg tema og plugins akkurat som ovenfor. Alternativt kan du bygge ditt eget tema fra grunnen av.

Til slutt er WordPress sannsynligvis den mest allsidige nettstedplattformen på markedet. Med det kan du bygge praktisk talt alle typer nettsteder, ikke bare blogger eller enkle forretningsnettsteder. Her er en liste over 47 (!) Forskjellige måter å bruke WordPress på, bare for å få deg til å tenke.

Joomla og Drupal

Selv om de er litt forskjellige fra hverandre, er Joomla og Drupal begge gode innholdsstyringssystemer for mer avanserte nettprosjekter.

De er ikke så sterke designmessige, men de kan tilpasses og er i stand til å håndtere alle slags nettsteder du måtte ha i plan.

Noen ganger, avhengig av kompleksiteten i prosjektet, kan det hende at de krever mye mer tid til å mestre og mye mer krefter på det.

For mer dyptgående trening er det kjempeflott kurs på Lynda.com, både for Joomla og Drupal.

Ting å ha klar etter dette kapitlet:

  • Det første utkastet til nettstedet ditt er helt bygget, uansett om du bestemte deg for å bruke WordPress eller en annen plattform.
  • Forsikre deg om at det stemmer overens med dine opprinnelige mål, målgruppen, og at den leverer god UX.

KAPITTEL 7: Mobilt responsivt design

Mer enn 60% av mennesker bruker mobiler og nettbrett for å surfe på nettet

Mobil respons er nå et veldig viktig aspekt ved bygging av nettsteder, sannsynligvis mer enn det noen gang har vært.

Dette er hva hele saken handler om:

I utgangspunktet, akkurat nå, er det flere som bruker mobile enheter for å få tilgang til nettet enn noen gang før. Faktisk er det anslått at det nå er flere mobile internettbrukere enn stasjonære internettbrukere (75,1% mot 52,7%).

Men det er et problem.

Ikke alle nettstedsdesign skal optimaliseres for å bli sett på mobile enheter rett utenfor porten.

Noen vanlige problemer inkluderer:

  • skriftene er for små,
  • selve oppsettet justeres ikke i det hele tatt til et mindre skjermbilde,
  • eller teknologien som brukes til å bygge nettstedet som ikke er tilgjengelig på mobil.

Det er her ideen om mobil lydhørhet spiller inn.

Et responsivt nettsted reagerer på miljøet det blir sett på. Hvis det er en stasjonær datamaskin, gjengis nettstedet på en viss måte. Hvis det er en mobil, gjengis den på en annen måte.

Her er en bedre forklaring: What the Heck is Responsive Web Design?

Så ting å gjøre akkurat nå ville være å sjekke og sørge for at nettstedet ditt fungerer på mobile enheter. Bruk dine egne enheter for å sjekke dette, men prøv også Googles mobilprøve, eller hopp over til et verktøy som Responsive Design Tester.

Hvis det er problemer, må du fikse dem.

Noen løsninger:

  • Responsiv nettdesign – hvordan du gjør det
  • Hvordan gjøre nettstedet responsivt på omtrent 15 minutter

KAPITTEL 8: Få det hele sammen

Du kjenner det grunnleggende, nå er det din tur

Hold fast, vi er nesten der!

Dette er det siste kapittelet på vår ganske lange reise.

På dette tidspunktet bør du ha din første webside bygget … Det være seg med WordPress, håndbygget HTML / CSS, noen nettstedsbygger, eller hva som helst andre verktøy du valgte for jobben.

Kort sagt, gratulerer! Men det er fortsatt et par ting som er verdt å gjøre:

  • Dobbeltkontroller tingene vi diskuterte i kapittel 1 og 2. Forsikre deg om at målene faktisk fungerer for sluttbrukeren, og at nettstedet ikke er forvirrende.
  • Valider kodestrukturen din gjennom W3Cs godkjenningstjeneste for markering.
  • Sjekk om det ikke er noen sikkerhetsproblemer med nettstedet. Bruk skanneren av Sucuri til det.
  • Få tilbakemeldinger fra samfunnet. Sjekk hva andre mennesker synes om arbeidet ditt. Forumene over på Sitepoint kan være bra for det.

Hvis det er din første lesing av denne ressursen, oppfordrer vi deg til å komme tilbake til den et par ganger og behandle den som en referansefil for din videre utdanning.

Som vi sa i begynnelsen, bruk gjerne TOC og naviger fra kapittel til kapittel og ressurs til ressurs etter behov..

Til slutt er vi nysgjerrige … hva er din største utfordring når det gjelder bygging av nettsteder, webutvikling eller design? Del gjerne i kommentarene eller via Twitter. Vi er alle ører!

Takk for at du leser, du er fantastisk!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector