Webontwikkeling en ontwerp 101

web_development_101Wil je de basis van Web Development en Design kennen? Geweldig…


Maar er is een probleem met deze gedachtegang, of een aantal van hen eigenlijk …

  • Wat is het doel van een website?? Heeft iedereen er echt een nodig?
  • Zo ja, hoe bouwt u een kwaliteitswebsite? Of met andere woorden, hoe leer je elementaire webontwikkeling en -ontwerp waarmee je die kwaliteitswebsite zelf kunt bouwen?
  • Wat nog belangrijker is, kunt u bij uw EERSTE poging een kwaliteitswebsite bouwen? Of heb je jarenlange ervaring nodig voordat je op een bovenstaand vreselijk resultaat kunt hopen?

Laten we dat allemaal hierin beantwoorden beginnershandleiding voor webontwikkeling en -ontwerp.

[Spoiler alert. Ja, u kunt bij uw eerste poging een kwaliteitswebsite bouwen.]

Wat wordt behandeld in deze gids?

Oké, om te beginnen zijn we blij dat je bent blijven lezen en dat je hebt besloten om webontwikkeling eens uit te proberen! Zo gaat het spelen:

De hoofdstukken worden op een zeer eenvoudige manier gepresenteerd, met de hoofdinhoud aan de linkerkant en de bruikbare items aan de rechterkant. Zoals zo:

Gids introductie: Hoofdstuk 1

Nu hoe verder te gaan:

  • Terwijl je voor het eerst leest: We raden u aan het hele ding van boven naar beneden te lezen. Dit geeft u een goed beeld van 10.000 voet van het onderwerp en helpt u de belangrijkste delen ervan te begrijpen. Het biedt u ook basishulpmiddelen en methoden voor het omgaan met individuele taken.
  • Terwijl je voor de tweede keer leest en verder: Gebruik de TOC en spring naar het deel dat u het meest interesseert. Voel je ook vrij om de deelknoppen naast elk hoofdstuk te gebruiken en stuur de links naar jezelf of naar je vrienden / volgers die mogelijk geïnteresseerd zijn.

Klaar? Laten we naar hoofdstuk 1 gaan.

Voor wie is deze gids bedoeld?

Als u basis webontwikkeling en -ontwerp wilt leren, is deze gids iets voor u. Wat je motivatie ook is.

Je hebt ook geen technische voorkennis nodig om aan de slag te gaan (behalve elementaire ‘webvaardigheden’). Het hele punt van deze gids is om een ​​soort “101” -cursus te zijn voor iedereen die geïnteresseerd is in het bouwen van websites en het leren van webontwikkeling.

Hier zijn enkele veelvoorkomende redenen waarom u mogelijk geïnteresseerd bent:

  • 1. U heeft een website nodig voor uw bedrijf (en je wilt zien of je het zelf kunt bouwen).
  • 2. U wilt webontwikkeling LEREN uit passie of tijdelijke interesse (niets slechts).
  • 3. Je hebt een website nodig voor school.
  • 4. Je HELPT een vriend of familielid om hun website online te krijgen.

Het belangrijkste idee dat ons gaat leiden

Dit is belangrijk! En wees alsjeblieft niet boos op ons als je een gevorderde webontwikkelaar bent die dit leest, maar het belangrijkste idee dat ons door deze hele bron voor webontwikkeling en ontwerp 101 zal leiden, is:

„De minste verzetsaanpak”

Dit zijn de drie principes van de benadering met de minste weerstand:

  • We zijn dingen niet op moleculair niveau afbreken. D.w.z. we gaan niet uitzoeken hoe programmeertalen werken of hoe een webserver werkt.
  • We zijn het wiel niet opnieuw uitvinden. D.w.z. als iemand een bepaald probleem al heeft opgelost en de oplossing beschikbaar heeft gemaakt, gaan we die gebruiken.
  • We zijn een eenvoudige oplossing geweldig maken, in plaats van een ingewikkelde en schijnbaar meer functionele buggy die niet begrijpelijk is.

HOOFDSTUK 1: Het plan

Uw idee, type website, domeinnaam en hosting.

Voordat u een website opzet, heeft u een plan nodig

Hoe ironisch het ook klinkt – de hit ’80s show’ The A-Team ‘heeft ons geleerd, een goed plan is een sleutel tot succes.

Als je al een tijdje een website in je hebt zitten, dan ben je zeker enthousiast over het enige idee om het eindelijk aan anderen uit te laten lezen en bladeren.

Je wilt dat je website geweldig is. Je weet waarschijnlijk tot op zekere hoogte hoe het eruit zal zien. Of misschien heb je zelfs het perfecte logo klaar.

Maar…

Dit is helemaal niet waar je moet beginnen. Als je begint met vooraf vastgestelde verwachtingen, zal dit je alleen maar tot veel verwarring leiden en aan het einde een ondermaats resultaat.

Denk in plaats daarvan aan het volgende:

  1. Scheid u af van eventuele technische doelen die u heeft. Zoals bijvoorbeeld het leren van websitetechnologieën of bepaalde websitesoftware.
  2. Stel jezelf een hoofdvraag: ‘Waar heb ik de site voor nodig?’

Dit gaat niet over jou, dit gaat over het doel van de site.

Vragen die u uzelf moet stellen voordat u uw website instelt

  1. Wat de site moet bereiken?
  2. Wat is het belangrijkste ‘ding’ dat via de site wordt gepresenteerd? (bijv. uw bedrijf, een product, uw blogposts, enz.)
  3. Heeft de website een speciaal doel? (bijv. een e-commerce winkel, een portfolio van een fotograaf, enz.)
  4. Wie is de doelgroep?
  5. Waarom zijn ze geïnteresseerd in het onderwerp van de site?
  6. Welke pijn lost de site op voor individuele leden van het publiek?

Over deze laatste 3 vragen, laten we het publiek even spreken …

Er zijn 2 hoofdregels voor het bouwen van websites. Hier is regel # 1:

 De lezer / bezoeker staat voorop, zij zijn de belangrijkste persoon die uw website moet behagen.

In zekere zin is uw website niet van u. Het is van hen.

(Regel # 2 bespreken we zo meteen.)

Als u deze eenvoudige richtlijn vergeet, kunt u de volledig verkeerde weg inslaan, zelfs tot het punt waarop u merkt dat u een website vindt die voor iedereen in de buurt verwarrend is.

‘Ugh! Mensen begrijpen gewoon niet waar deze site over gaat. Hoe kunnen ze zo onwetend zijn ?! ” – je gaat nadenken. Maar het bleek dat jij de onwetende was.

De enige manier om dat te voorkomen is door vanaf het begin uw website te bouwen met de lezer in gedachten.

Dus … pak dat stuk papier en beantwoord alle bovenstaande vragen.

Als u klaar bent, heeft u uw ultieme set richtlijnen waaraan u zult gaan werken terwijl u aan uw website werkt.

Die antwoorden zullen een buitengewoon krachtig hulpmiddel zijn terwijl je verder gaat. U kunt hierop terugkomen wanneer u voor een beslissing over uw website staat.

Moet je * dit * of * dat * doen? Ga naar het antwoordblad en ontdek het. Moet je een brede of smalle zijbalk gebruiken? Ga naar de antwoorden, zoek uit welke meer kans heeft om te resoneren met de doellezer. En etc.

Domeinnamen en webhosting

Als je website-eigenaar wilt worden, heb je een domeinnaam en een webhost nodig.

Oké, technisch gezien kun je een testwebsite helemaal op je eigen computer bouwen en deze vervolgens uitvoeren vanaf een lokale webserver (ook geïnstalleerd als software op je computer), maar dat zou geen bruikbare oplossing zijn voor 99% van de gevallen, dus laten we het gewoon overslaan.

Dus een host en een domein …

Het slechte nieuws hier is dat ze allebei geld kosten.

Het goede nieuws … het is niet zozeer geld in het grote geheel. Bovendien kunt u tijdens het leren zelfs meerdere kleine websites op één domeinnaam en onder één webhost lanceren.

Maar laten we bij het begin beginnen.

Webhosts:

  • Simpel gezegd, een webhost is waar uw website zich bevindt en waar uw bezoekers deze kunnen vinden. In zekere zin zijn webhosts voor websites net als appartementen voor mensen. Onder de motorkap zijn webhosts bedrijven die hun servers verhuren in ruil voor geld (… kleine appartementen voor uw websites).
  • Om te beginnen, is een standaard shared hostingplan voldoende. Je kunt die krijgen voor alles vanaf $ 3 / maand. Hier is een mooie vergelijking van populaire webhosts. Bekijk het en beslis welke van die bedrijven precies bij u past. Onze aanbevelingen gelden echter voor SiteGround, A2 Hosting en Dreamhost.

Domeinen:

  • Als een webhost een appartement is, dan is een domein het adres van dat appartement. Het domein van deze website is bijvoorbeeld hostingfacts.com.
  • De manier om aan de slag te gaan, is door de gewenste domeinnaam te kiezen en deze vervolgens te kopen bij een registrar. Hier is een uitgebreide handleiding voor het kopen van een domeinnaam, en hier is een lijst met domeinnaamgeneratoren.

 

Suggesties en tips voor het kiezen van een domeinnaam

Oké, dus naar een domeinregistreerder gaan en het domein daadwerkelijk kopen is één ding, maar hoe kies je de juiste domeinnaam?

Er zijn een paar scholen:

  • Branded domeinnamen. Dat zijn domeinen die bestaan ​​uit niet-bestaande woorden. Denk aan dingen als Google.com of Yahoo.com. Voordat die bedrijven kwamen, hadden die woorden niets te betekenen. Het voordeel van een merkdomeinnaam is dat het … nou ja, zeer merkbaar, gedenkwaardig is en dat het gemakkelijk is om uw site te onderscheiden van de andere.
  • Op trefwoorden gebaseerde namen. Deze bestaan ​​uit bestaande woorden, in een volgorde die het doel van de site beschrijft. Denk aan dingen als Pizza.com of StartBloggingOnline.com. Met een dergelijke domeinnaam kunnen uw bezoekers nauwkeurig voorspellen wat voor soort website ze op het punt staan ​​te bezoeken. Het nadeel is dat die domeinen over het algemeen minder merkbaar zijn.
  • Gecombineerde namen. Dat zijn merkdomeinen en op zoekwoorden gebaseerde domeinen die bij elkaar zijn gezet. Denk aan Facebook.com of Copyblogger.com. Dergelijke namen suggereren ‘een’ deel van de aard van de website aan de bezoeker, maar ze zijn nog steeds zeer merkbaar.

Enkele algemene richtlijnen, ongeacht het type domein dat u kiest:

  • Maak het domein gemakkelijk te onthouden.
  • Maak het kort en simpel. Hoe langer het domein is, hoe verwarrender het is.
  • Krijg een .com (indien mogelijk). .Com is het belangrijkste “top-level domein” dat beschikbaar is. Neem geen genoegen met iets anders.
  • Probeer koppeltekens te vermijden. Krijg uw naam in single-blob-vorm zoals “cakerecipes.com” in plaats van “cake-recipes.com”

Dingen om klaar te hebben na dit hoofdstuk:

  • Een domeinnaam.
  • Een webhost.
  • Uw antwoordblad: de doelen van uw site en hoe deze de doelgroep gaat dienen.

Meer hulp nodig? Hier leest u verder:

  • Waarom gedeelde hosting? Belangrijkste soorten hosts vergeleken
  • 10 dingen die een webhost goed maken
  • 12 regels voor het kiezen van de juiste domeinnaam
  • Een uitgebreide website-planningsgids

HOOFDSTUK 2: Ontwerpen en wireframen

Neem een ​​papier en een pen en kras samen met uw websitestructuur

Oké, laten we de ontwerpfase ingaan.

Om te beginnen, hier is de werkethiek die we hier gaan volgen:

  • We gebruiken pen en papier zo lang als we kunnen en schakelen dan pas over op de computer. Geloof ons, elke minuut die je aan je ontwerp op papier besteedt, is een uur bespaard zodra je dingen op de computer gaat afstemmen.
  • We doen iteratief werk … We doen »de resultaten controleren» verbeteren »de resultaten controleren» herhalen tot het klaar is.

In hoofdstuk 1 noemden we iets dat we de regel # 1 van website bouwen noemden. Dit is het moment voor regel # 2:

Regel # 2 van website bouwen:

Denk eerst aan inhoud.

Inhoud is waar het om gaat op een website. Niet het ontwerp. Inhoud.

Mensen komen voor de inhoud. Ze komen niet voor het ontwerp. Het ontwerp is slechts een middel om de inhoud te leveren.

Begin nooit met hoe uw website eruitziet. Begin met inhoud. Inhoud. Inhoud. Inhoud.

Dus wat bedoelen we met “inhoud”? Kortom, dit is wat mensen van uw website willen halen. Blogberichten, producten in de winkel, forumthreads als u een forum bouwt, nieuwsartikelen, uw zakelijke aanbieding, enzovoort.

“Werkelijk? Het uiterlijk doet er echt niet toe? ” – Je vraagt.

In plaats van dat we dit verslaan, bekijk dan deze pagina:

Eenvoudige website

Deze eenvoudige webpagina is verreweg de beste uitleg van wat design is en waarvoor het online dient.

Dus onthoud eerst de inhoud!

Website-inhoud en -structuur

Oké, dus aangezien de inhoud het belangrijkste is, moet je (het grootste deel) van tevoren klaar hebben. Of je moet tenminste een goed idee hebben van hoeveel inhoud er zal zijn en in welke vorm.

Notitie. We weten dat dit onderdeel moeilijk kan zijn. Beginnen met inhoud lijkt nogal onnatuurlijk voor het ontwerpen van websites, maar het is echt de beste manier om uiteindelijk een fantastisch resultaat te behalen. Denk dus na over de inhoud die u met de lezer wilt delen en hoe u deze wilt presenteren.

De volgende stap is om de afzonderlijke soorten pagina’s te selecteren die u nodig heeft (zoals een startpagina, een productpagina, een categoriepagina, een over-pagina, een contactpagina, de hoofdverkooppagina, een bestemmingspagina voor een nieuwsbriefabonnement, hoofdblogvermelding, individuele berichten, misschien een winkel en alles wat nog meer nodig lijkt).

Bedenk, wat is de meest effectieve manier om uw inhoud op de website te ordenen?

Doe dit allemaal op papier. Het zal waarschijnlijk gemakkelijker en sneller voor u zijn dan ter plekke een stukje software voor het tekenen van grafieken te leren.

Voorbeeld:

inhoudelijke structuur

Kras samen een draadframe

Een draadframe in webdesign is gewoon een paginaschema of blauwdruk – een visuele gids die het raamwerk van een website vertegenwoordigt (Wikipedia vertelt ons).

Wireframes zijn geweldig! We gebruiken ze voor de meeste dingen die we doen die bedoeld zijn om online te verschijnen. Hier is bijvoorbeeld een draadframe voor deze gids:

Kras een draadframe samen

Zoals je kunt zien, is dat weer op papier. Hoewel er meerdere apps zijn voor dit soort werk, raden we eigenlijk niet aan om ze te gebruiken. Ze zijn misschien geweldig voor professionele ontwerpers, maar een beginner of een gemiddelde persoon zal alleen tijd verliezen om ze te leren, en uiteindelijk zullen ze niet veel verbetering boeken ten opzichte van wat ze met pen en papier zouden bereiken.

Dus, hoe u een draadframe moet maken?

Welnu, er zijn twee benaderingen als je een beginner bent:

  • Ga met de stroom mee als je je sterk voelt, en trek gewoon weg (niet altijd een perfecte oplossing).
  • Krijg wat snelle kennis over hoe u correct draadframe kunt gebruiken (meestal beter).

Ga voor de laatste hier – een geweldige gids.

(Zorg ervoor dat u een draadframe maakt van elk belangrijk type pagina dat u in de vorige stap heeft vermeld.)

Dingen om klaar te hebben na dit hoofdstuk:

  • De meeste inhoud voor de site, of in ieder geval de meeste voorspeld (als u bijvoorbeeld vertrouwt op door gebruikers gegenereerde inhoud, is het moeilijk om dat vooraf te hebben).
  • De inhoudsstructuur van uw website opgesteld als een grafiek.
  • Een draadframe van de afzonderlijke soorten pagina’s die u nodig heeft.

Verder lezen:

  • 9 stappen voor het plannen van website-inhoud
  • Nieuw bij webdesign? Begin hier.

HOOFDSTUK 3: UX en UI

Onderschat nooit het belang van gebruikerservaring en gebruikersinterface

Zoals in gebruikerservaring en gebruikersinterface.

WebDesignerDepot geeft ons een nogal poëtische definitie van de twee:

UI is het zadel, de stijgbeugels en de heerschappij.

UX is het gevoel dat je het paard kunt berijden en je vee kunt vastbinden.

Voor een meer praktische definitie:

  • UI is wat de gebruiker ziet wanneer ze naar uw site kijken.
  • UX is hoe ze erover denken.

Het paar, en hoe goed het wordt uitgevoerd, definieert in feite het nut van uw website voor de eindgebruiker / bezoeker.

Zowel UX- als UI-ontwerp zijn grote onderwerpen op zich en er zijn veel kleinere elementen die een rol spelen in het eindresultaat.

Kortom, er valt veel te leren als je net aan je reis begint.

Dus in plaats van dat we hier een hele UX- en UI-ontwerpcursus proberen te verkrampen, laten we slechts een handvol belangrijke elementen aanwijzen en je dan ergens anders heen sturen voor verder lezen.

Gebruikersdoelen

UX gaat over gebruikersdoelen … Niet zoveel van uw doelen … Gebruikersdoelen.

Oké, wat betekent dit? Ga allereerst terug naar het doel van uw website – waar u in de vorige hoofdstukken aan hebt gewerkt. De reden waarom u de website bouwt en hoe deze de gebruiker / bezoeker helpt.

Hoe vertaalt het zich in het doel van de bezoeker? … Wat is het enige dat de bezoeker wil bereiken of bereiken wanneer ze naar uw site komen? Dat is hun doel.

Hoe gemakkelijk zijn die doelen te bereiken?

Richt u vervolgens op de volgende vraag:

  • Kan de bezoeker zijn doel gemakkelijk bereiken? – Kunnen ze op een eenvoudige manier het exacte stukje informatie vinden waar ze voor kwamen??

Om dit te beantwoorden, moet je teruggaan naar je draadframe, je inhoudsstructuur en dingen dubbel controleren.

Zorg ervoor dat de inhoudsstructuur en de pagina’s die je hebt bedacht, zinvol zijn vanuit het oogpunt van een gebruiker. Zorg ervoor dat ze vrij en op een niet-verwarrende manier tussen de belangrijke pagina’s kunnen navigeren.

Hier zorgen we er in feite voor dat de website uw bezoekers waarde geeft.

Moeilijk om dit allemaal zelf uit te zoeken, is het niet?

Het wordt ten zeerste aanbevolen om de bronnen te bekijken die worden vermeld in de sectie ‘Verder lezen’ van dit hoofdstuk … maar je kunt ook ‘hack’ proberen, om zo te zeggen.

Bedenk bijvoorbeeld wat u frustreert wanneer u websites bezoekt die vergelijkbaar zijn met degene die u wilt bouwen? Misschien is er informatie die heel moeilijk te bereiken is of een interface-element dat de site verwarrend maakt.

Maak aantekeningen, trek conclusies, maak niet dezelfde fouten met uw website.

Emotie gebruiken als hulpmiddel

Wanneer u aan de UI en UX van uw site werkt, wilt u in feite een bepaalde emotie bij uw bezoeker oproepen.

Je wilt dat ze zich op een bepaalde manier voelen, wat hen dan zal overtuigen om op een bepaalde manier te handelen. Zo wordt uw website echt nuttig.

Om aan het emotionele deel van het werk te werken, is een van de beste tools kleur.

Kleuren hebben in verschillende culturen verschillende betekenissen. Als u die verschillen begrijpt, kan uw werk een stuk eenvoudiger worden. Hier is een leuk spiekbriefje.

Als je eenmaal in de marge bent van welke kleuren je (mogelijk) wilt gebruiken, volgen hier een paar algemene richtlijnen bij het werken met kleur:

  • Kies een hoofdkleurenschema bestaande uit een paar kleuren die goed bij elkaar passen. Hier is een geweldige kleurenschema-generator.
  • Kies een kleur die je accentkleur wordt – de kleur die wordt gebruikt voor actieknoppen, koopknoppen en meer. Alles wat de aandacht van de gebruiker nodig heeft.

Typografie

In veel gevallen is typografie waar je het spel van het bouwen van een website wint (of verliest).

Het is zoooo gemakkelijk om typografie volledig te vergeten en Arial voor alles te gebruiken.

Niet aangeraden.

Tegenwoordig is het werken met aangepaste lettertypen heel eenvoudig en u hoeft zelfs niets technisch te doen om die aangepaste lettertypen op uw site in te schakelen.

Grote, grootse typografie is tegenwoordig erg in de mode en het maakt het werk van een ontwerper – vooral het werk van een beginnende ontwerper – veel gemakkelijker.

Bekijk deze site bijvoorbeeld:

bonobo's

Iets opgemerkt? Ja, de lettertypen zijn enorm en ze zien er geweldig uit!

Hier is hoe je hieraan kunt werken:

  • Over het algemeen heeft elk websiteontwerp twee soorten tekst nodig: rubrieken en paragrafen. In de meeste gevallen is slechts één lettertype per stuk voldoende.
  • Ga naar Google Fonts – Google’s eigen bibliotheek met gratis lettertypen die u op uw website kunt gebruiken – en zoek naar een hoofdlettertype dat u echt leuk vindt.
  • Neem vervolgens de naam van dat lettertype en zoek het op bij Font Pair – het is een bibliotheek met vooraf gemaakte lettertypeparen die goed bij elkaar passen.
  • Kies een combinatie die er geweldig uitziet.
  • Noteer de namen van beide lettertypen, je hebt ze later nodig.

Als u het op deze manier doet, wordt uw proces versneld en krijgt u nog steeds een geweldig resultaat.

We vonden bijvoorbeeld een lettertype met de naam Bree Serif in Google Fonts dat we best leuk vinden:

Bree-Serif

Vervolgens brachten we het naar Font Pair en de site suggereerde dat Bree Serif goed samengaat met Open Sans. Perfect:

Bree-Serif-open-sans

De definitieve structuur

Eindelijk de laatste stap!

Het hele punt van dit hoofdstuk is om te landen op een definitieve lay-out / structuur die u voor uw site gaat gebruiken. Op dit punt moet u vrijwel zeker zijn van de dingen die u met uw ontwerp en gebruikersinterface wilt doen.

Dingen om klaar te hebben na dit hoofdstuk:

  • Uw gebruikersdoelen duidelijk vermeld.
  • Uw draadframe is dubbel gecontroleerd om er zeker van te zijn dat die doelen niet verwarrend zijn.
  • Het geselecteerde kleurenschema.
  • De typografie is uitgekomen.
  • Uw hele sitelay-out / structuur / organisatie van de website.

Verder lezen: 

  • UX Magazine
  • UX-stand
  • De psychologie en emotie achter kleur in webdesign
  • Wat is user experience design? Overzicht, tools en bronnen
  • Slimme zakelijke doelen stellen voor een website
  • 8 regels voor het maken van effectieve typografie

HOOFDSTUK 4: WordPress, HTML of sjablonen?

Bepaal welke route u wilt gaan – contentmanagementsystemen of codeer het helemaal opnieuw

Hier begint het echte, handen-vuile werk onder de motorkap!

Dit is waarschijnlijk ook het engste deel van het proces (geef toe!).

Voor één keer is het het juiste moment om pen en papier opzij te leggen en met wat software te gaan werken.

En zo de poort uit, er zijn een hoop vragen …

  • Moet ik HTML leren?
  • Hoe zit het met CSS?
  • Zullen kant-en-klare HTML-websitesjablonen de juiste oplossing voor mij zijn?
  • Moet ik een programmeertaal leren zoals PHP?
  • Ik heb gehoord dat WordPress tegenwoordig de manier is om een ​​site te bouwen.
  • Ik zag die Squarespace Super Bowl-advertentie. Hoe zit het daarmee?
  • Hoe heet dit ding Joomla? Of Drupal?
  • en zo maar door en door.

Het antwoord op al die vragen is ja.

Zoals in, ja, je kunt een of al die dingen doen, en het is alleen aan jou om te beslissen welk pad je kiest.

Wat we proberen te zeggen, is dat er hier geen beste aanpak is. Het hangt allemaal af van hoe betrokken u wilt zijn bij webontwikkeling, hoeveel van de basisprincipes van het bouwen van websites u wilt leren, hoe snel u een kwaliteitssite nodig heeft en hoe aanpasbaar u wilt dat het daarna is.

Dus hier is hoe we verder gaan vanaf dit hoofdstuk. Eerste, kies de persona die jou het beste omschrijft:

  • een) Ik wil leren waar webontwikkeling over gaat, alle basisprincipes, alle innerlijke werking van een website en alle mechanismen die een website laten werken.
  • b) Ik wil leren hoe ik een betrouwbare websitebouwer kan gebruiken die het meeste zware werk voor me zal doen.
  • c) Ik weet niet wat ik moet doen. Ik wil gewoon een website die ik zelf kan bouwen en die goed zal werken.

Beantwoord a)? Ga naar hoofdstuk 5.

Beantwoord b)? Ga naar hoofdstuk 6.

Beantwoord c)? Bekijk dit artikel gerust en kom dan terug (het zou je moeten helpen het perfecte pad te kiezen):

  • 8 beste blog- en website-bouwplatforms beoordeeld … Elk platform wordt beschreven met zijn voor- en nadelen, en de bron suggereert ook de best beschikbare keuze (Wix of SB) voor uw specifieke behoeften.

Heb je het gelezen? Super goed! Dus welke van de persona’s hierboven beschrijft jou het beste – a) of b)?

De tools die onderweg van pas kunnen komen:

  • Afbeeldingen: Paint.NET, Gimp, Pixlr.
  • Code schrijven: Notepad ++, TextWrangler, SublimeText.
  • Werkbeheer: Trello.
  • Ontwerp: kleurenschema’s, Google Fonts, de tools van hier.
  • Fotografie: Unsplash, AllTheFreeStock

HOOFDSTUK 5: Inleiding tot HTML, CSS & Javascript

Hoe websites een ingebouwde realiteit zijn

In dit hoofdstuk gaan we de basisprincipes van webontwikkeling uitleggen, de belangrijkste termen uitleggen en u vervolgens naar enkele specifieke bronnen sturen waar u uw kennis en vaardigheden kunt verbeteren.

HTML

HTML is de taal van websites. Elke webpagina wordt op een bepaald moment gebouwd of geconverteerd naar HTML.

Als u bijvoorbeeld de HTML-structuur van deze gids wilt zien die u hier leest, drukt u op ‘Ctrl + U’ op uw toetsenbord.

HTML definieert elk blok dat u op een webpagina ziet. Om iets op een webpagina weer te geven, moet het uiteindelijk worden geconverteerd naar HTML.

Om HTML effectief te leren, raden we je aan om je aan te melden voor een van de (gratis of betaalde) cursussen die beschikbaar zijn op internet. Enkele van de beste zijn te vinden op Codeacademy of Treehouse.

Hier is bijvoorbeeld een specifiek gedeelte over Codeacademy over HTML en CSS.

CodeCademy homepage

Dat is dus de uitgebreide benadering van HTML.

CSS

CSS – om de saaie technische details over te slaan – is verantwoordelijk voor het stylen van alles wat zichtbaar is op een webpagina.

CSS neemt HTML-tags en vervolgens structuren en voegt er styling aan toe. Zaken als: vetgedrukte tekst, kleuraanpassingen, schaduwen, lay-outs, zelfs animaties, worden nu voornamelijk gedaan met CSS.

Voor een beter begrip van hoe dit precies werkt, spring naar deze snelle cursus bij Codeacademy.

Bekijk voor meer diepgaande kennis ook de CSS-secties op Codeacademy of Treehouse.

JavaScript, jQuery, Bootstrap, enz.

JavaScript is een programmeertaal waarmee u enkele dynamische acties op uw website kunt introduceren. U kunt bijvoorbeeld dingen doen zoals webformulieren valideren of op een meer gestroomlijnde manier met de gebruiker communiceren zonder dat u de pagina waarop ze zich bevinden opnieuw hoeft te laden. Hier is een leuke tutorial van w3schools.

Met dat in gedachten is jQuery een JavaScript-bibliotheek waarmee je geavanceerde dingen kunt maken met minder codering. Erg handig voor een webontwikkelaar. Lees hier meer.

Ten slotte is Bootstrap een zeer interessante uitvinding. Oorspronkelijk geïntroduceerd door Twitter, is het in feite een front-endomgeving die het proces van het bouwen van een website versnelt door de meeste algemene site-elementen te leveren die al vooraf zijn gebouwd. Het klinkt ingewikkeld, nietwaar?

Maar dat is het niet. Bekijk deze beginnerscursus op Codeacademy (trouwens, dit is hoe we Bootstrap oorspronkelijk hebben geleerd).

Dingen om klaar te hebben na dit hoofdstuk:

  • Kortom, het eerste concept van uw HTML / CSS-website is volledig gebouwd. Van daaruit kunt u beginnen met het herhalen en verbeteren van het eindresultaat.

HOOFDSTUK 6: Website Building Platforms

Je eerste site opzetten? Probeer gratis websiteplatforms zoals WordPress, Joomla of Drupal

Hoofdstuk 6: Website Building Platforms

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Er zijn meer website-bouwers dan waar je een stokje op kunt schudden. (Als je het soort persoon bent dat met dingen schudt.)

Oké, grappen opzij.

Het is duidelijk dat als u niet de wens heeft om dingen met de hand te leren coderen, er zeker meerdere oplossingen zijn die u kunnen helpen.

Notitie. Houd er rekening mee dat al het andere dat we in de hoofdstukken 1-4 hebben besproken, hier nog steeds van toepassing is. Zelfs als u kiest voor een site-building oplossing die een beetje hands-off is, moet u nog steeds voorzichtig zijn om het eindproduct vriendelijk te maken voor de gebruikers en in overeenstemming met ieders doelen. Die site-building tools zijn precies dat … tools.

Te beginnen met degenen die het gemakkelijkst te begrijpen zijn:

SquareSpace

Het enige websiteplatform dat adverteert tijdens de Super Bowl.

Kortom een ​​zeer handige oplossing die door iedereen kan worden gebruikt. Geen voorafgaande vaardigheden vereist.

Hiermee kunt u klassieke websites, blogs en zelfs eCommerce-winkels bouwen, we hebben er zelfs een recensie over geschreven. De interface en het hele proces van het gebruik ervan zijn vrij gemakkelijk te begrijpen, plus de Squarespace-jongens bieden veel interessante tutorials. Bekijk ze hier.

WordPress

Eerlijk gezegd houden we van WordPress.

Meestal is dit het perfecte platform om een ​​website mee te bouwen. Het heeft de perfecte balans tussen complexiteit en gebruiksgemak en is in principe eindeloos aanpasbaar.

WordPress animatie

Het is momenteel ook het populairste website-platform van allemaal. Zoals gedeeld door de maker van WordPress – Matt Mullenweg – verzorgt WordPress nu 25% van het hele internet. Kunnen al die mensen ongelijk hebben?

Oké, om aan de slag te gaan met WordPress heb je eigenlijk alleen je domein en hosting nodig. De WordPress-software zelf is volledig gratis.

Voel je vrij om een ​​van deze paden te volgen:

a) “Het snelstartpad”

  • Ga hierheen om de vereenvoudigde manier te leren om WordPress te installeren en uw site ‘s middags te starten.
  • Kies een gratis thema uit de officiële directory – zorg ervoor dat het in overeenstemming is met de doelen van uw site en dat de lay-out / het ontwerp niet ver verwijderd is van de gewenste structuur (u gaat het enigszins aanpassen).
    • Bekijk deze twee bronnen om te leren hoe u een bestaand thema kunt aanpassen.
    • Als alternatief kunt u een multifunctioneel premium-thema kiezen dat kan worden aangepast via een handige gebruikersinterface (zonder codering). Het X-thema is daar een goed voorbeeld van.
  • Installeer enkele van de meest populaire en beste plug-ins om extra functies te krijgen.

b) “Het diepgaande pad”

  • Begin met het leren van WordPress via een online cursus. Treehouse biedt een geweldige.
  • Kies uw thema en plug-ins net zoals hierboven. Of bouw je eigen thema vanaf de grond op.

Uiteindelijk is WordPress waarschijnlijk het meest veelzijdige websiteplatform op de markt. Hiermee kunt u vrijwel elk type website bouwen, niet alleen blogs of eenvoudige bedrijfssites. Hier is een lijst met 47 (!) Verschillende manieren om WordPress te gebruiken, gewoon om je aan het denken te zetten.

Joomla en Drupal

Hoewel ze enigszins van elkaar verschillen, zijn Joomla en Drupal beide uitstekende contentbeheersystemen voor meer geavanceerde webprojecten.

Ze zijn qua ontwerp niet zo sterk, maar ze zijn zeer aanpasbaar en kunnen elk soort website aan dat u in plan hebt.

Afhankelijk van de complexiteit van uw project, kunnen ze soms veel meer tijd nodig hebben om te beheersen en daar veel meer moeite voor doen.

Voor meer diepgaande training zijn er geweldige cursussen op Lynda.com, zowel voor Joomla als Drupal.

Dingen om klaar te hebben na dit hoofdstuk:

  • De eerste versie van uw website is volledig gebouwd, ongeacht of u besluit WordPress of een ander platform te gebruiken.
  • Zorg ervoor dat het in overeenstemming is met uw oorspronkelijke doelen, de doelgroep en dat het een goede UX levert.

HOOFDSTUK 7: Mobiel responsief ontwerp

Meer dan 60% van de mensen gebruikt mobiele telefoons en tablets om op internet te surfen

Mobiele responsiviteit is nu een zeer belangrijk aspect van het bouwen van websites, waarschijnlijk meer dan ooit.

Hier gaat het hele probleem over:

Kortom, op dit moment zijn er meer mensen die mobiele apparaten gebruiken om toegang te krijgen tot internet dan ooit tevoren. Er wordt zelfs geschat dat er nu meer gebruikers van mobiel internet zijn dan gebruikers van desktopinternet (75,1% versus 52,7%).

Maar er is een probleem.

Niet elk websiteontwerp zal worden geoptimaliseerd om direct vanaf de poort op mobiele apparaten te worden bekeken.

Enkele veelvoorkomende problemen zijn:

  • de lettertypen zijn te klein,
  • de lay-out zelf past zich helemaal niet aan aan een kleiner scherm,
  • of de technologie die is gebruikt om de site te bouwen, is niet beschikbaar op mobiele apparaten.

Dit is waar het idee van mobiele responsiviteit in het spel komt.

Een responsieve website reageert op de omgeving waarop deze wordt bekeken. Als het een desktopcomputer is, wordt de website op een bepaalde manier weergegeven. Als het een mobiel is, wordt het op een andere manier weergegeven.

Hier is een betere uitleg: What The Heck Is Responsive Web Design?

Dus wat u nu moet doen, is controleren en ervoor zorgen dat uw website werkt op mobiele apparaten. Gebruik uw eigen apparaten om dit te controleren, maar probeer ook de mobiele test van Google of ga naar een tool als Responsive Design Tester.

Als er problemen zijn, moet u deze oplossen.

Enkele oplossingen:

  • Responsive Web Design – de how-to
  • Hoe u website responsief maakt in ongeveer 15 minuten

HOOFDSTUK 8: Alles bij elkaar brengen

Je kent de basis, nu is het jouw beurt

Wacht even, we zijn er bijna!

Dit is het laatste hoofdstuk van onze vrij lange reis.

Op dit punt zou u uw eerste website moeten laten bouwen … Of het nu is met WordPress, met de hand gebouwde HTML / CSS, een website-bouwer of welke andere tools dan ook die u voor de taak hebt geselecteerd.

Kortom, gefeliciteerd! Maar er zijn nog een paar dingen die het waard zijn om te doen:

  • Controleer de dingen die we in de hoofdstukken 1 en 2 hebben besproken nogmaals. Zorg ervoor dat de doelen inderdaad werken voor de eindgebruiker en dat de website niet verwarrend is.
  • Valideer uw codestructuur via de markup-validatieservice van W3C.
  • Controleer of er geen beveiligingsproblemen zijn met de site. Gebruik daarvoor de scanner van Sucuri.
  • Krijg feedback van de community. Kijk wat andere mensen van je werk vinden. De forums op Sitepoint kunnen daar goed voor zijn.

Als dat de eerste keer is dat je deze bron leest, raden we je echt aan er een paar keer op terug te komen en het als een referentiebestand voor je verdere opleiding te beschouwen..

Zoals we in het begin al zeiden, voel je vrij om de inhoudsopgave te gebruiken en van hoofdstuk naar hoofdstuk en bron naar bron te navigeren zoals je wilt.

Ten slotte zijn we benieuwd … wat is uw grootste uitdaging als het gaat om het bouwen van websites, webontwikkeling of ontwerp? Deel het in de reacties of via Twitter. We zijn allemaal oren!

Bedankt voor het lezen, je bent geweldig!

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

About the author

Adblock
detector