Vefþróun og hönnun 101

web_development_101Viltu vita um grunnatriðin í vefþróun og hönnun? Æðislegur…


En það eru vandamál með þessa hugsunarlínu, eða fjöldi þeirra reyndar …

  • Hver er tilgangurinn með að hafa vefsíðu? Þurfa allir virkilega einn?
  • Ef svo er, hvernig byggirðu upp góða vefsíðu? Eða með öðrum orðum, hvernig lærir þú grunnþróun og hönnun á vefnum sem gerir þér kleift að byggja upp þessa gæða vefsíðu sjálfur?
  • Meira um vert, getur þú byggt upp góða vefsíðu í fyrsta skipti sem þú reynir? Eða þarftu margra ára reynslu á bak við þig áður en þú getur vonað einhverjar niðurstöður ofar hræðilegu?

Við skulum svara öllu þessu í þessu handbók byrjenda um þróun og hönnun á vefnum.

[Spoiler viðvörun. Já, þú getur smíðað góða vefsíðu í fyrsta skipti.]

Hvað er fjallað um í þessari handbók?

Allt í lagi, fyrst við erum ánægð með að þú hafir haldið áfram að lesa og að þú hafir ákveðið að prófa netþróunina! Svona mun það spila út:

Kaflarnir eru kynntir á mjög einfaldan hátt, með aðalinnihald vinstra megin, og hlutirnir til hægri. Eins og svo:

Inngangsleiðbeiningar: 1. kafli

Hvernig á að halda áfram:

  • Þegar þú ert á 1 lestri þínum: Við mælum með að þú lesir allan hlutinn frá toppi til botns. Þetta mun veita þér góða 10.000 feta sýn á efnið og hjálpa þér að skilja mikilvægustu hluta þess. Það mun einnig veita þér grunn verkfæri og aðferðir til að takast á við einstök verkefni.
  • Þegar þú ert á 2. lestri þínum og lengra: Notaðu TOC og hoppaðu yfir á þann hluta sem vekur áhuga þinn mest. Einnig skaltu ekki hika við að nota deilihnappana við hliðina á hverjum kafla og sendu annað hvort krækjurnar til þín sjálfra eða til vina þinna / fylgjenda.

Tilbúinn? Förum til 1. kafla.

Fyrir hvern er þessi handbók?

Ef þú vilt læra grunnþróun og hönnun á vefnum er þessi handbók fyrir þig. Hver hvatning þín gæti verið.

Þú þarft ekki að hafa fyrri tæknilega þekkingu til að byrja (annað en grundvallaratriði „vefkunnáttu“). Allt lið þessarar handbókar er að vera eins konar „101“ námskeið fyrir alla sem hafa áhuga á að byggja upp vefsíður og læra þróun á vefnum.

Hér eru nokkrar algengar ástæður fyrir því að þú gætir haft áhuga:

  • 1. Þú þarft vefsíðu fyrir fyrirtæki þitt (og þú vilt sjá hvort þú getir byggt það sjálfur).
  • 2. Þú vilt læra þróun á vefnum af ástríðu eða tímabundnum áhuga (ekkert slæmt við það).
  • 3. Þú þarft vefsíðu fyrir skólann.
  • 4. Þú verður að hjálpa vini eða fjölskyldumeðlimi til að fá vefsíðu þeirra á netinu.

Aðalhugmyndin sem mun leiða okkur

Þetta er mikilvægt! Og vinsamlegast ekki vera reiður við okkur ef þú ert háþróaður vefur verktaki að lesa þetta, en aðalhugmyndin sem er að fara að leiðbeina okkur um alla þessa vefsíðuþróun og hönnun 101 úrræði er:

„Sísta mótstöðuaðferðin“

Hér eru þrjú meginreglur minnstu viðnámsaðferðar:

  • Við erum það ekki að brjóta hluti niður á sameinda stigi. Þ.e.a.s. við ætlum ekki að komast til botns í því hvernig forritunarmál virka eða hvernig vefþjónn virkar.
  • Við erum það ekki að finna upp hjólið aftur. Þ.e.a.s. ef einhver hefur þegar leyst tiltekið vandamál og gert lausnina tiltæka, ætlum við að nota það.
  • Við erum það gera einfalda lausn æðisleg, frekar en flókin og að því er virðist virkari lausn þrjótur og ekki skiljanlegur.

Kafli 1: Áætlunin

Hugmynd þín, vefsíðugerð, lén og hýsing.

Áður en þú setur upp vefsíðu þarftu áætlun

Það er kaldhæðnislegt eins og það gæti hljómað – sýningin „The A-Team“ á níunda áratugnum hefur kennt okkur, góð áætlun er lykill að velgengni.

Ef þú hefur haft vefsíðu sem situr í þér í smá stund núna, þá ertu örugglega spennt yfir þeirri einu hugmynd að loksins fá það út fyrir aðra að lesa og fletta.

Þú vilt að vefsíðan þín sé æðisleg. Þú veist líklega hvernig það mun líta út að einhverju leyti. Eða kannski hefurðu jafnvel fullkomna merkið tilbúið.

En…

Þetta er alls ekki þar sem þú ættir að byrja. Ef þú byrjar með fyrirfram staðfestar væntingar, mun þetta aðeins leiða þig til mikils rugls á leiðinni og undir-par niðurstaða í lokin.

Hugleiddu í staðinn eftirfarandi:

  1. Aðgreindu þig frá tæknilegum markmiðum sem þú gætir haft. Eins og til dæmis markmiðið að læra vefsíðutækni eða ákveðinn hugbúnað á vefsíðu.
  2. Spurðu sjálfan þig eina meginspurningu: „Til hvers þarf ég síðuna?“

Þetta er ekki um þig, þetta er um markmið vefsins.

Spurningar sem þú þarft að spyrja sjálfan þig áður en þú setur upp vefsíðuna þína

  1. Hvað vefnum er ætlað að ná?
  2. Hver verður aðal „hluturinn“ sem kynntur er á vefnum? (t.d. fyrirtæki þitt, vara, bloggfærslur þínar osfrv.)
  3. Mun vefsíðan hafa einhvern sérstakan tilgang? (t.d. e-verslun, eigu ljósmyndara osfrv.)
  4. Hver er markhópurinn?
  5. Af hverju hafa þeir áhuga á efni síðunnar?
  6. Hvaða sársauki leysir vefurinn fyrir einstaka áhorfendur?

Um þessar síðustu 3 spurningar skulum við tala í eina mínútu …

Það eru 2 meginreglur fyrir byggingu vefsíðna. Hér er regla # 1:

 Lesandinn / gesturinn kemur fyrstur. Þeir eru aðalpersónan sem vefsíðan þín þarf að þóknast.

Á vissan hátt er vefsíðan þín ekki þín. Það er þeirra.

(Regla # 2 munum við ræða eftir eina mínútu.)

Að gleyma þessum einföldu leiðbeiningum getur leitt þig á rangan hátt, jafnvel upp að því marki þar sem þú finnur þig með vefsíðu sem er ruglandi fyrir alla í kringum þig en þú.

„Ugh! Fólk skilur bara ekki hvað þessi síða fjallar um. Hvernig geta þeir verið svona fáfróðir ?! “ – þú endar að hugsa. En eins og það kemur í ljós, var fávísinn þú.

Eina leiðin til að forðast það er að byggja vefsíðuna þína með lesandann í huga strax frá því að fara.

Svo … taktu pappírinn og svaraðu öllum spurningunum hér að ofan.

Þegar því er lokið hefurðu fullkomlega leiðbeiningar sem þú ert að fara eftir þegar þú vinnur að vefsíðunni þinni.

Þessi svör verða einstaklega öflugt tæki þegar þú ferð með. Þú munt geta komið aftur til þeirra hvenær sem þú stendur frammi fyrir ákvörðun varðandi vefsíðuna þína.

Ættirðu að gera * þetta * eða * það *? Fara á svarblaðið og komast að því. Ættir þú að nota breiða eða þrönga hliðarstiku? Farðu í svörin, komdu að því sem líklegra er að hljóma við marklesarann. Og o.s.frv.

Lén og vefþjónusta

Ef þú vilt vera eigandi vefsíðu þarftu lén og vefþjón.

Jæja, allt í lagi, tæknilega séð geturðu smíðað prófunarvefsíðu allt á eigin tölvu og keyrt það síðan frá netþjóninum (einnig settur upp sem hugbúnaður á tölvunni þinni), en það væri ekki nothæf lausn fyrir 99% af málum, svo við skulum bara sleppa því.

Svo, gestgjafi og lén …

Slæmu fréttirnar hér eru að þær kosta báðar peninga.

Góðu fréttirnar … það eru ekki svo miklir peningar í stóru áætlun hlutanna. Auk þess sem þú ert að læra geturðu jafnvel sett af stað margar litlar vefsíður á einu léni og undir einum vefþjón.

En við skulum byrja í byrjun.

Vefþjónusta:

  • Einfaldlega er vefþjónusta þar sem vefsíðan þín situr og þar sem gestir geta fundið hana. Á vissan hátt eru vefþjónusta fyrir vefsíður alveg eins og íbúðir fyrir menn. Undir húddinu eru vefþjónusta fyrirtæki sem leigja netþjóna sína í skiptum fyrir peninga (… litlar íbúðir fyrir vefsíður þínar).
  • Til að byrja, mun venjuleg sameiginleg hýsingaráætlun gera. Þú getur fengið þær fyrir allt frá 3 $ / mánuði. Hér er ágætur samanburður á vinsælum vefþjóninum. Athugaðu það og taktu ákvörðun um hvaða fyrirtæki virðist rétt hjá þér. Tillögur okkar gilda þó um SiteGround, A2 Hosting og Dreamhost.

Lén:

  • Ef vefþjónusta er íbúð, þá er lén heimilisfang þeirrar íbúðar. Til dæmis er lén þessarar vefsíðu hostingfacts.com.
  • Leiðin til að byrja er að velja viðkomandi lén og kaupa það síðan af skrásetjara. Hér er yfirgripsmikil leiðbeining um hvernig á að kaupa lén og hérna er listi yfir lénsframleiðendur.

 

Tillögur og ráð til að velja lén

Allt í lagi, það er eitt að fara til einhvers lénsritara og kaupa lénið, en hvernig velurðu rétt lén??

Það eru nokkrir skólar:

  • Vörumerki lén. Þetta eru lén sem samanstanda af orðum sem ekki eru til. Hugsaðu, hluti eins og Google.com eða Yahoo.com. Áður en þessi fyrirtæki komu með þýddu þessi orð ekkert. Upphæð á vörumerki léns er að það er … vel, mjög merkt, eftirminnilegt og það er auðvelt að greina síðuna þína frá hinum.
  • Nöfn á lykilorði. Þau samanstanda af núverandi orðum, sett í röð sem lýsir tilgangi síðunnar. Hugsaðu um hluti eins og Pizza.com eða StartBloggingOnline.com. Með lénsheiti eins og það geta gestir þínir sagt fyrir um nákvæmlega hvaða vefsíðu þeir ætla að heimsækja. Gallinn er að þessi lén eru almennt minna vörumerki.
  • Samsett nöfn. Þetta eru vörumerki lén og lén byggð á leitarorðum sett saman. Hugsaðu, Facebook.com, eða Copyblogger.com. Slík nöfn benda „einhverjum“ hluta af eðli vefsíðunnar fyrir gestinn en þau eru samt mjög vörumerkjanleg.

Nokkrar almennar leiðbeiningar óháð lénsgerð sem þú velur:

  • Gerðu lénið auðvelt að leggja á minnið.
  • Gerðu það stutt og einfalt. Því lengur sem lénið er, því ruglingslegra er það.
  • Fáðu þér com. (Ef mögulegt er). . Com er aðal „efsta lén“ sem völ er á. Ekki sætta þig við neitt annað.
  • Reyndu að forðast bandstrik. Fáðu nafnið þitt í einsblönduðu formi eins og „cakerecipes.com“ í stað „cake-recipes.com“

Það sem þarf að hafa tilbúið eftir þennan kafla:

  • Lén.
  • Vefþjónn.
  • Svarblaðið þitt – markmið síðunnar og hvernig það mun þjóna áhorfendum.

Þarftu meiri hjálp? Hérna er frekari lestur fyrir þig:

  • Hvers vegna samnýtt hýsing? Helstu gerðir gestgjafa bornar saman
  • 10 hlutir sem gera vefþjóninn góðan
  • 12 reglur um að velja rétt lén
  • Alhliða leiðbeiningar um skipulagningu vefsíðna

Kafli 2: Hönnun og Wireframing

Taktu pappír og penna og klóraðu ásamt uppbyggingu vefsíðunnar þinnar

Allt í lagi, við skulum fara í hönnunarstigið.

Fyrstu hlutirnir fyrst, hérna er vinnusiðferði sem við ætlum að fara eftir hér:

  • Við notum penna og pappír eins lengi og við getum og skiptum yfir í tölvuna. Trúðu okkur, hver einasta mínúta sem þú notar í hönnun þína á pappír er klukkustund vistuð þegar þú byrjar að stilla hlutina á tölvunni.
  • Við erum að vinna í endurtekningu … Við gerum »athugaðu árangurinn» bætum »athugaðu niðurstöðurnar» endurtökum þar til þú ert búinn.

Í kafla 1 nefndum við eitthvað sem við kölluðum regluna nr. 1 um vefsíðugerð. Nú er kominn tími á reglu # 2:

Regla # 2 í byggingu vefsíðna:

Hugsaðu efni fyrst.

Innihald er það sem skiptir máli á vefsíðu. Ekki hönnunin. Innihald.

Fólk kemur fyrir innihaldið. Þeir koma ekki fyrir hönnunina. Hönnunin er aðeins ökutæki til að skila efninu.

Byrjaðu aldrei á því hvernig vefsíðan þín lítur út. Byrjaðu með innihald. Innihald. Innihald. Innihald.

Svo hvað er átt við með „innihaldi“? Í stuttu máli, það er það sem fólk vill fá af vefsíðunni þinni. Bloggfærslur, vörur í versluninni, spjallþræðir ef þú ert að byggja upp vettvang, fréttagreinar, viðskiptatilboð þitt osfrv.

“Í alvöru? Útlitið skiptir í raun ekki máli? “ – Þú spyrð.

Í stað þess að við berjum þetta niður, skoðaðu þessa síðu:

Einföld vefsíða

Þessi einfalda vefsíða er lang besta skýringin á því hvað hönnun er og hvaða tilgang hún þjónar á netinu.

Svo mundu, efni fyrst!

Innihald og uppbygging vefsíðu

Allt í lagi, þar sem innihaldið er það mikilvægasta, þá þarftu að hafa (flest) það tilbúið fyrirfram. Eða að minnsta kosti, þú þarft að hafa góða hugmynd um hversu mikið efni er að verða og í hvaða formi.

Athugið. Við vitum að þessi hluti getur verið erfiður. Byrjun með innihaldi virðist alveg óeðlilegt fyrir vefsíðugerð, en það er í raun besta leiðin til að fá framúrskarandi árangur í lokin. Hugsaðu svo um innihaldið sem þú vilt deila með lesandanum og hvernig þú vilt kynna það.

Næsta skref er að taka saman þær tegundir af síðum sem þú þarft (eins og heimasíða, vörusíðu, flokkasíðu, um síðu, tengiliðasíðu, aðalsölu síðu, einhverja áfangasíðu fréttabréfsáskriftar, aðal bloggskráning, einstök innlegg, verslun kannski og hvað annað sem þarf).

Hugsaðu, hver er árangursríkasta leiðin til að skipuleggja efnið þitt á vefsíðunni?

Gerðu allt þetta á pappír. Það mun líklega verða auðveldara og fljótlegra fyrir þig en að læra einhvern stykki af teikningarhugbúnað á staðnum.

Dæmi:

innihaldsskipan

Skafið saman vírammi

Þráðrammi í vefhönnun er einfaldlega blaðsíða eða teikning – sjónræn handbók sem táknar umgjörð vefsíðu (Wikipedia segir okkur).

Wireframes eru ógnvekjandi! Við notum þau fyrir flesta hluti sem við gerum sem er ætlað að birtast á netinu. Hér er til dæmis þráðrammi fyrir þessa handbók:

Skafið saman vírgrind

Eins og þú sérð, þá er það aftur á pappír. Jafnvel þó að það séu mörg forrit fyrir þessa vinnu, ráðleggjum við ekki að nota þau. Þeir gætu verið frábærir fyrir atvinnuhönnuðir, en byrjandi eða millistig tapar aðeins tíma í að læra þá og á endanum fá þeir ekki mikla framför um það sem þeir myndu ná með penna og pappír.

Svo, hvernig á wireframe?

Það eru tvær leiðir ef þú ert byrjandi:

  • Farðu með flæðið ef þér líður sterkur og dragðu þig bara frá (ekki alltaf fullkomin lausn).
  • Fáðu skjótan fróðleik um hvernig hægt er að víra ramma almennilega (venjulega betri).

Fyrir hið síðarnefnda, farðu hingað – frábær leiðarvísir.

(Gakktu úr skugga um að búa til þráðrammi fyrir allar mikilvægar gerðir síðna sem þú hefur skráð í fyrra skrefi.)

Það sem þarf að hafa tilbúið eftir þennan kafla:

  • Flest af innihaldi vefsins, eða að minnsta kosti flestu því spáð (ef þú treystir til dæmis á efni sem notandi myndar, þá er erfitt að hafa það fyrirfram).
  • Innihald vefsíðunnar þinnar er útbúin sem línurit.
  • Þráðrammi fyrir þær tegundir síðna sem þú þarft að þurfa.

Nánari lestur:

  • 9 skref til að skipuleggja innihald vefsíðu
  • Ertu nýr í vefhönnun? Byrjaðu hér.

Kafli 3: UX og HÍ

Aldrei vanmeta mikilvægi notendaupplifunar og notendaviðmóts

Eins og í notendaupplifun og notendaviðmóti.

WebDesignerDepot gefur okkur frekar ljóðræna skilgreiningu á þessu tvennu:

HÍ er hnakkurinn, stigbeinin og ríkin.

UX er sú tilfinning að þú færir að ríða hestinum og reipa nautgripina þína.

Fyrir hagnýtari skilgreiningu:

  • UI er það sem notandinn sér þegar hann skoðar síðuna þína.
  • UX er hvernig þeim líður um það.

Parið og hversu vel það er keyrt skilgreinir í grundvallaratriðum notagildi vefsíðunnar þinnar fyrir notendur / gesti.

Bæði UX og HÍ eru stórt efni í sjálfu sér og það eru fullt af minni þáttum sem gegna hlutverki í lokaniðurstöðunni.

Í stuttu máli, það er margt að læra ef þú ert rétt að byrja ferðina.

Svo í stað þess að við reynum að troða öllu UX og HÍ námskeiðinu hérna, skulum við bara benda á handfylli af mikilvægum þáttum og senda þig síðan einhvers staðar til frekari lesturs.

Markmið notenda

UX snýst um notendamarkmið… Ekki eins mikið af markmiðum þínum… Markmið notenda.

Allt í lagi, hvað þýðir þetta? Fyrst af öllu skaltu fara aftur að tilgangi vefsíðunnar þinnar – hluturinn sem þú vann að á fyrri köflum. Ástæðan fyrir því að þú ert að byggja upp vefsíðuna og hvernig það hjálpar notandanum / gestinum.

Hvernig þýðir það að markmiði gestsins? … Hvað er það eina sem gesturinn vill fá eða ná þegar þeir koma á síðuna þína? Það er markmið þeirra.

Hve auðveld eru þau markmið að ná?

Næst skaltu einbeita þér að eftirfarandi spurningu:

  • Getur gesturinn náð markmiði sínu auðveldlega? – Geta þeir komist að nákvæmum upplýsingum sem þeir komu fyrir á einfaldan hátt?

Til að svara þessu þarftu að fara aftur í þráðrammann þinn, innihaldsskipanina og tvöfalda athugun á hlutunum.

Gakktu úr skugga um að innihaldsskipan og síðurnar sem þú hefur ígrundað séu skynsamlegar frá sjónarhóli notandans. Gakktu úr skugga um að það sé mögulegt fyrir þá að sigla á milli mikilvægu síðanna frjálslega og á ekki ruglingslegan hátt.

Í meginatriðum erum við hér að tryggja að vefsíðan veitir gestum þínum gildi.

Erfitt að reikna þetta allt út á eigin spýtur, er það ekki?

Það er mjög mælt með því að kíkja á úrræði sem talin eru upp í „frekari lestri“ í þessum kafla … en þú getur líka prófað „hakk“ ef svo má segja.

Hugsaðu nefnilega hvað pirrar þig þegar þú heimsækir vefsíður sem eru svipaðar þeim sem þú vilt smíða? Kannski eru einhverjar upplýsingar sem er mjög erfitt að komast að eða einhver tengiþáttur sem gerir vefinn ruglingslegan.

Taktu minnispunkta, dragðu ályktanir, gerðu ekki sömu mistök með vefsíðuna þína.

Að nota tilfinningar sem tæki

Þegar þú vinnur að HÍ og UX vefsvæðisins, þá stefnirðu í grundvallaratriðum í að vekja ákveðna tilfinningu hjá gestinum þínum.

Þú vilt að þeim líði á ákveðinn hátt, sem mun þá sannfæra þá um að bregðast við á ákveðinn hátt. Þannig að gera vefsíðuna þína sannarlega gagnlega.

Til að vinna á tilfinningalegum hluta starfsins er litur einn af bestu tækjunum.

Litir hafa mismunandi merkingu í mismunandi menningarheimum. Að skilja þessi munur getur auðveldað vinnuna þína miklu. Hérna er fallegt svindlblaði.

Þegar þú ert kominn í boltann á hvaða litum þú vilt (mögulega) nota, eru hér nokkrar almennar leiðbeiningar þegar þú vinnur með lit:

  • Veldu eitt aðal litasamsetningu sem samanstendur af nokkrum litum sem fara vel saman. Hér er frábær litasamsetning.
  • Veldu einn lit sem á að verða hreimlitinn þinn – liturinn sem er að nota til aðgerðahnappa, kaupa hnappa o.s.frv. Í grundvallaratriðum er allt sem þarf athygli notandans.

Leturfræði

Í mörgum tilfellum er leturfræði þar sem þú vinnur (eða tapar) leiknum við byggingu vefsíðna.

Það er svo svoooo auðvelt að gleyma algerlega prentun og nota Arial bara fyrir allt.

Ekki mælt með.

Þessa dagana er það auðvelt að vinna með sérsniðnar leturgerðir og þú þarft ekki einu sinni að gera neitt tæknilegt til að gera þessar sérsniðnu leturgerðir mögulegar á vefsíðunni þinni.

Stórar, glæsilegar leturmyndir eru mjög í tísku þessa dagana og það gerir verk hönnuðar – sérstaklega vinnu byrjendahönnuðar – miklu auðveldara.

Skoðaðu þessa síðu, til dæmis:

bonobos

Tókstu eftir neinu? Já, letrið er mikið og þau líta vel út!

Svona vinnur þú að þessu:

  • Almennt þarf hverja vefsíðugerð tvenns konar texta: fyrirsagnir og málsgreinar. Í flestum tilfellum gerir það bara eitt letur fyrir hvert.
  • Farðu í Google leturgerðir – eigið bókasafn Google með ókeypis leturgerðum sem þú getur notað á vefsíðunni þinni – og leitaðu að fyrirsögn letur sem þú hefur mjög gaman af.
  • Taktu síðan nafn letursins og leitaðu að því á Font Pair – það er bókasafn með fyrirfram gerðum leturpörum sem fara vel saman.
  • Veldu par sem lítur ógnvekjandi út.
  • Notaðu nöfn beggja leturgerða, þú þarft þau seinna.

Að gera það með þessum hætti mun flýta fyrir ferlinu þínu og samt gefa þér frábæran árangur.

Dæmi, við fundum letur sem heitir Bree Serif í Google leturgerðum sem við höfum mjög gaman af:

Bree-Serif

Síðan fórum við með það til Font Pair og vefsíðan lagði til að Bree Serif færi vel með Open Sans. Fullkominn:

Bree-Serif-open-sans

Endanleg uppbygging

Að lokum, síðasta skrefið!

Allt málið með þessum kafla er að lenda á endanlegu skipulagi / uppbyggingu sem þú ætlar að nota fyrir síðuna þína. Á þessum tímapunkti ættir þú að vera alveg viss um það sem þú vilt gera við hönnun þína og HÍ.

Það sem þarf að hafa tilbúið eftir þennan kafla:

  • Notendamarkmið þitt eru greinilega skráð.
  • Þráðramminn þinn var tvisvar athugaður til að tryggja að þessi markmið séu ekki ruglingsleg.
  • Litavalið valið.
  • Leturgerðin reiknaði út.
  • Útlit / uppbygging / skipulag vefsíðunnar í heild sinni.

Nánari lestur: 

  • UX tímarit
  • UX búð
  • Sálfræðin og tilfinningarnar að baki litnum í vefhönnun
  • Hver er hönnun upplifunar notenda? Yfirlit, verkfæri og úrræði
  • Setja snjallt viðskiptamarkmið fyrir vefsíðu
  • 8 reglur til að búa til áhrifaríka leturfræði

KAFLI: WordPress, HTML eða sniðmát?

Ákveðið hvaða leið á að fara – innihaldsstjórnunarkerfi eða kóða það frá grunni

Hérna hefst hið raunverulega, handskítuga og undir hetta verk!

Þetta er líklega skelfilegasti hluti ferlisins (viðurkenndu það!).

Í eitt skipti fyrir er það rétti tíminn til að setja penna og pappír til hliðar og byrja að vinna með einhvern hugbúnað.

Og rétt út um hliðið, það er fullt af spurningum …

  • Ætti ég að læra HTML?
  • Hvað með CSS?
  • Ætla tilbúin HTML vefsíðusniðmát gera verkið fyrir mig?
  • Þarf ég að læra forritunarmál eins og PHP?
  • Ég hef heyrt að WordPress sé leiðin til að byggja upp síðu þessa dagana.
  • Ég sá þá Squarespace Super Bowl auglýsingu. Hvað er að þessu?
  • Hvað heitir Joomla? Eða Drupal?
  • og á og á og áfram.

Svarið við öllum þessum er já.

Eins og í, já, þú getur gert annan eða alla þessa hluti, og það er aðeins undir þér komið að ákveða hvaða leið þú vilt velja.

Það sem við erum að reyna að segja er að það er engin besta aðferðin hér. Það veltur allt á því hvernig þú vilt taka þátt í þróun á vefnum, hve mikið af grunnatriðum vefsíðunnar sem þú vilt læra, hversu fljótt þú þarft að gera góða vefsíðu og hversu sérhannaðar þú vilt að það verði síðan.

Þannig að við ætlum að halda áfram frá þessum kafla áfram. Í fyrsta lagi, veldu þá persónu sem skilgreinir þig best:

  • a) Mig langar að læra hvað vefþróun snýst um, öll grunnatriðin, öll innra starf vefsíðu og öll þau aðferðir sem gera vefsíðu virkar.
  • b) Ég vil læra að nota áreiðanlegan vefsíðugerð sem ætlar að takast á við flestar þungar lyftur fyrir mig.
  • c) Ég veit ekki hvað ég á að gera. Ég vil bara fá vefsíðu sem ég get smíðað sjálf og mun virka sem skyldi.

Svaraði a)? Farðu í 5. kafla.

Svarað b)? Farðu í 6. kafla.

Svarað c)? Ekki hika við að skoða þessa grein og koma svo aftur (það ætti að hjálpa þér að velja hina fullkomnu leið):

  • 8 bestu bloggfærslur og vefsíðubyggingarpallar skoðaðir … Hverjum vettvangi er lýst ásamt kostum og göllum, og auðlindin bendir einnig á besta fáanlegu val (Wix eða SB) fyrir sérstakar þarfir þínar.

Hefurðu lesið það? Flott! Svo hver af persónunum hér að ofan lýsir þér best – a) eða b)?

Tólin sem gætu komið sér vel á leiðinni:

  • Grafík: Paint.NET, Gimp, Pixlr.
  • Kóðaritun: Notepad ++, TextWrangler, SublimeText.
  • Vinnustjórnun: Trello.
  • Hönnun: litaval, Google leturgerðir, verkfærin héðan.
  • Ljósmyndun: Unsplash, AllTheFree lager

5. KAFLI: Kynning á HTML, CSS & Javascript

Hvernig vefsíður eru innbyggður raunveruleiki

Í þessum kafla ætlum við að benda á grundvallaratriðin í þróun vefsins, útskýra mikilvægustu hugtökin og senda þig síðan yfir á ákveðin úrræði þar sem þú getur aukið þekkingu þína og færni.

HTML

HTML er tungumál vefsíðna. Sérhver vefsíða er byggð eða breytt í HTML á einhverjum tímapunkti.

Til dæmis til að sjá HTML uppbyggingu þessarar handbókar sem þú ert að lesa hér, ýttu bara á „Ctrl + U“ á lyklaborðinu þínu.

HTML skilgreinir hverja reit sem þú sérð á vefsíðu. Þegar öllu er á botninn hvolft þarf að breyta því í HTML til að birta hvað sem er á vefsíðu.

Til að læra HTML á áhrifaríkan hátt ráðleggjum við þér að skrá þig á eitt (ókeypis eða gjaldskylda) námskeið sem til er á vefnum. Sumt af því besta er að finna í Codeacademy eða Treehouse.

Til dæmis, hérna er sérstakur hluti um Codeacademy allt um HTML og CSS.

Heimasíða CodeCademy

Svo það er heildstæð nálgun á HTML.

CSS

CSS – til að sleppa leiðinlegu tæknilegu smáatriðunum – ber ábyrgð á því að stíla öllu því sem sýnilegt er á vefsíðu.

CSS tekur HTML merki og skipuleggur síðan og bætir þeim stíl. Hlutir eins og: feitletruð texti, litabreytingar, skuggar, skipulag, jafnvel hreyfimyndir, eru nú aðallega gerðir með CSS.

Til að öðlast betri skilning á því hvernig þetta nákvæmlega virkar skaltu hoppa yfir á þetta fljótlega námskeið í Codeacademy.

Fyrir frekari ítarlegt nám, skoðaðu einnig CSS hlutana annað hvort Codeacademy eða Treehouse.

JavaScript, jQuery, Bootstrap osfrv.

JavaScript er forritunarmál sem gerir þér kleift að kynna nokkrar kvikar aðgerðir á vefsíðunni þinni. Til dæmis geturðu gert hluti eins og að staðfesta vefform eða hafa samskipti við notandann á straumlínulagaðari hátt án þess að þurfa að endurhlaða síðuna sem þeir eru á. Hérna er falleg einkatími hjá w3schools.

Með það í huga er jQuery JavaScript bókasafn sem gerir þér kleift að búa til háþróaða hluti með minni kóðun. Mjög handhægur fyrir vefur verktaki. Lærðu meira hér.

Að lokum, Bootstrap er mjög áhugaverð uppfinning. Upphaflega kynnt af Twitter, það er í grundvallaratriðum framanverndarumhverfi sem flýtir fyrir því að smíða vefsíðu með því að skila flestum sameiginlegu vefþáttum sem þegar hafa verið smíðaðir. Það hljómar flókið, er það ekki?

En það er það ekki. Skoðaðu bara þetta byrjunarnámskeið hjá Codeacademy (við the vegur, svona lærðum við upphaflega Bootstrap).

Það sem þarf að hafa tilbúið eftir þennan kafla:

  • Í grundvallaratriðum eru fyrstu drög að HTML / CSS vefsíðunni algjörlega byggð. Þaðan geturðu byrjað að endurtaka og bæta lokaniðurstöðuna.

Kafli 6: Uppbyggingarpallar vefsíðna

Ertu að setja upp fyrstu síðuna þína? Prófaðu ókeypis vefsvæði eins og WordPress, Joomla eða Drupal

6. kafli: Byggingarpallar vefsíðna

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Það eru fleiri byggingameistarar þarna úti en þú getur hrist á staf á. (Ef þú ert svona manneskja sem hristir fast við hlutina.)

Allt í lagi, brandarar til hliðar.

Ljóst er að ef þú hefur ekki löngun til að læra að kóða hlutina með höndunum eru þetta örugglega margar lausnir sem geta hjálpað þér.

Athugið. Hafðu í huga að allt hitt sem við ræddum í 1-4 kafla eiga enn við hér. Jafnvel ef þú ert að fara með byggingarlausn sem er eins konar afgreiðsla, verður þú samt að vera varkár til að gera lokaafurðina vingjarnlega fyrir notendur og í takt við markmið allra. Þessi verkfæri til að byggja upp svæði eru nákvæmlega það … verkfæri.

Byrjaðu á þeim sem auðveldast er að átta sig á:

SquareSpace

Eini vefsíðan sem auglýsir á meðan Super Bowl stendur.

Í stuttu máli, mjög handhæg lausn sem allir geta notað. Engin fyrri færni krafist.

Það gerir þér kleift að smíða klassískar vefsíður, blogg, jafnvel e-verslun sem við skrifuðum meira að segja um þær. Viðmótið og allt ferlið við að nota það er frekar auðvelt að átta sig á, auk þess sem krakkar í Squarespace bjóða upp á mikið af áhugaverðum námskeiðum. Athugaðu þá hér.

WordPress

Heiðarlega, við elskum WordPress.

Oftast er það hinn fullkomni vettvangur til að byggja upp vefsíðu með. Það hefur hið fullkomna jafnvægi milli margbreytileika og notkunar og það er í grundvallaratriðum endalaust aðlagað.

WordPress fjör

Einnig er þetta vinsælasti vefsíðan þeirra allra sem stendur. Eins og deilt af höfundi WordPress – Matt Mullenweg – dreifir WordPress nú 25% af öllu internetinu. Getur allt þetta fólk haft rangt fyrir sér?

Allt í lagi, svo til að byrja með WordPress þarftu í grundvallaratriðum aðeins lénið þitt og hýsingu. WordPress hugbúnaðurinn sjálfur er alveg ókeypis.

Til að byrja, ekki hika við að fylgja einni af þessum slóðum:

a) „Fljótabraut“

  • Farðu hér til að læra á einfaldaða leiðina til að setja upp WordPress og ræsa síðuna þína síðdegis.
  • Veldu ókeypis þema úr opinberu skránni – vertu viss um að það sé í takt við markmið síðunnar og að skipulagið / hönnunin sé ekki langt frá viðkomandi uppbyggingu (þú ætlar að laga það aðeins).
    • Athugaðu þessi tvö úrræði til að læra hvernig á að sérsníða fyrirliggjandi þema.
    • Einnig er hægt að velja fjölnota þema sem hægt er að breyta með handhægum notendaviðmóti (engin kóðun er um að ræða). X þemað er gott dæmi um slíkt.
  • Settu upp nokkrar af vinsælustu og bestu viðbótunum til að fá auka eiginleika.

b) „Djúpstígurinn“

  • Byrjaðu á því að læra WordPress í gegnum netnámskeið. Treehouse býður upp á ógnvekjandi.
  • Veldu þema og viðbætur alveg eins og hér að ofan. Skiptirðu eigin þema frá grunni.

Í the endir, WordPress er líklega fjölhæfur vefsíða pallur á markaðnum. Með því geturðu smíðað nánast hvers konar vefsíðu, ekki aðeins blogg eða einfaldar viðskiptasíður. Hérna er listi yfir 47 (!) Mismunandi leiðir til að nota WordPress, bara til að láta þig hugsa.

Joomla og Drupal

Þótt Joomla og Drupal séu aðeins frábrugðin hvert öðru, eru bæði frábært innihaldsstjórnunarkerfi fyrir þróaðri vefverkefni.

Þeir eru ekki svo sterkir af hönnunarskyni, en þeir eru mjög sérhannaðir og fær um að meðhöndla hvers konar vefsíðu sem þú gætir haft í áætlun.

Stundum, allt eftir flækjustigi verkefnisins, gætu þau þurft mun meiri tíma til að ná góðum tökum og miklu meiri fyrirhöfn við það.

Til að fá ítarlegri þjálfun eru æðisleg námskeið á Lynda.com, bæði fyrir Joomla og Drupal.

Það sem þarf að hafa tilbúið eftir þennan kafla:

  • Fyrstu drög að vefsíðunni þinni alveg byggð, sama hvort þú ákvaðst að nota WordPress eða einhvern annan vettvang.
  • Gakktu úr skugga um að það sé í takt við fyrstu markmið þín, markhópinn og að það skili góðum UX.

7. KAFLI: Hreyfanlegur móttækileg hönnun

Meira en 60% fólks nota farsíma og spjaldtölvur til að vafra um vefinn

Móttækileg fyrir farsíma er nú mjög mikilvægur þáttur í byggingu vefsíðna, líklega meira en það hefur nokkru sinni verið.

Hér er það sem allt málið snýst um:

Í grundvallaratriðum, núna, það eru fleiri sem nota farsíma til að fá aðgang að vefnum en nokkru sinni fyrr. Reyndar er áætlað að nú séu fleiri netnotendur en internetnotendur skrifborðs (75,1% á móti 52,7%).

En það er vandamál.

Ekki er ætlast til að öll vefsíðugerð verði fínstillt til að hægt sé að skoða þau í fartækjum beint út um hliðið.

Nokkur algeng vandamál eru:

  • letrið er of lítið,
  • skipulagið sjálft aðlagast alls ekki að minni skjá,
  • eða tæknin sem notuð er til að byggja vefinn er ekki til á farsíma.

Þetta er þar sem hugmyndin um farsímaviðbrögð kemur til leiks.

Móttækileg vefsíða bregst við umhverfinu sem verið er að skoða á. Ef þetta er skrifborðstölva birtist vefsíðan á ákveðinn hátt. Ef það er farsími gerir það það á annan hátt.

Hér er betri skýring: What the Heck is Responsive Web Design?

Það sem þarf að gera núna væri að athuga og ganga úr skugga um að vefsíðan þín virki í farsímum. Notaðu eigin tæki til að athuga þetta, en reyndu einnig að prófa farsíma Google eða hoppa yfir á verkfæri eins og Responsive Design Tester.

Ef vandamál eru til staðar þarftu að laga þau.

Nokkrar lausnir:

  • Móttækilegur vefhönnun – hvernig á að gera
  • Hvernig á að gera vefsíðu móttækileg á um það bil 15 mínútum

8. KAFLI: Að koma þessu öllu saman

Þú veist grunnatriðin, nú er komið að þér

Haltu áfram, við erum næstum því!

Þetta er síðasti kaflinn í nokkuð löngu ferðalagi okkar.

Á þessum tímapunkti ættirðu að hafa þína fyrstu vefsíðu byggð … Vera það með WordPress, handbyggð HTML / CSS, einhvern vefsíðugerð, eða hvað annað sem þú valdir í starfið.

Í stuttu máli, til hamingju! En það eru samt nokkur atriði sem vert er að gera:

  • Athugaðu það sem við ræddum í 1. og 2. kafla. Gakktu úr skugga um að markmiðin virki örugglega fyrir endanotandann og að vefsíðan sé ekki ruglingsleg.
  • Staðfestu kóðauppbygginguna þína í gegnum staðfestingarþjónustuna W3C.
  • Athugaðu hvort það séu ekki nein öryggisvandamál á vefnum. Notaðu skannann frá Sucuri til þess.
  • Fáðu athugasemdir frá samfélaginu. Athugaðu hvað öðrum finnst um vinnu þína. Málþingin á Sitepoint geta verið góð fyrir það.

Ef þetta er fyrsti lesturinn þinn af þessari auðlind hvetjum við þig virkilega til að koma aftur nokkrum sinnum til hennar og meðhöndla hana sem viðmiðunarskrá fyrir frekari menntun þína.

Eins og við sögðum í upphafi, ekki hika við að nota TOC og vafra frá kafla til kafla og auðlind til auðlindar eins og þér sýnist.

Að síðustu erum við forvitin … hver er stærsta áskorunin þín varðandi uppbyggingu vefsíðna, vefþróun eða hönnun? Vinsamlegast deilið í athugasemdunum eða með Twitter. Við erum öll eyru!

Takk fyrir að lesa, þú ert æðislegur!

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

About the author

Adblock
detector