1. #1
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128

    De Grote Webmastergids - Beginnen met webdevelopment

    Welkom in de Grote Webmastergids.

    Deze thread is een leidraad voor iedereen die wilt beginnen met webdevelopment. Maar het web verandert constant, wat het onmogelijk maakt voor ons om steeds up-to-date informatie te bieden. Daarom is deze thread beperkt tot een kleine greep van beschikbare technologiën, die de basis vormen voor webdevelopment.

    Wil je meer leren of meer documentatie vinden dan kan je onderandere terecht op de sites bij elk onderdeel of één van de volgende websites:

    Web technology for developers | MDN
    Your Web, documented · WebPlatform.org

    Een groot deel van het ontwikkelen van deze kennis bestaat uit zelfstudie, het doorzoeken van documentatie en andermans problemen om jouw struikelblokken te overkomen. Indien je een probleem toch niet opgelost krijgt zijn wij er om je te helpen.
    Laatst gewijzigd door Zero Grav; 25 januari 2014 om 15:07
    no votes  

  2. #2
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128
    Hoe maak ik een eigen website?

    Een eigen site maken kan op verschillende manieren, de ene al wat beter dan de andere.
    Veel gebruikers beginnen met een WYSIWYG-editor, dit staat voor 'What You See Is What You Get'. Deze programma's laten je toe een website op te bouwen zonder technische kennis, je sleept de elementen die je nodig hebt gewoon op de plaats waar je ze wilt en een paar klikken later is je website klaar. Het programma zal ondertussen voor jou de achterliggende code genereren.

    Dit is natuurlijk niet de beste manier omdat de code die het programma genereert meestal verouderd en slecht gestructureerd zal zijn. Dit kan ertoe leiden dat de website die er bij jou perfect uitziet er in een andere browser (Internet Explorer, Firefox, Safari, ..) heel anders uitziet.

    Als je echt serieus wilt beginnen met het maken van een website dan kan je best starten met het leren van (x)HTML en CSS. Dit zijn de twee talen die je nodig hebt om een volledig statische website te bouwen.

    Als je (x)HTML en CSS volledig onder de knie hebt kan je gebruik beginnen maken van Javascript. Deze taal laat je toe om extra kleine effecten toe te voegen aan je website en om deze iets interactiever te maken voor de gebruiker. Het is geen vereiste om deze taal te kennen om websites te kunnen bouwen, het biedt alleen extra's.

    Eens je wat grotere websites wilt bouwen kan je soms inhoud willen toevoegen zonder steeds in de code te moeten zoeken. Zeker als je zoveel inhoud krijgt dat je met meerdere pagina's moet gaan werken om het overzichtelijk te houden. Op zo'n moment komen de talen PHP en ASP(.NET) goed van pas. Deze talen laten je toe om dynamische websites te bouwen waardoor je de inhoud van je website kunt aanpassen zonder in de code te moeten kijken. Net zoals het maken van een post op dit forum kan je gewoon je inhoud in een tekstvak typen en bevestigen.

    Of eerder op zoek naar een gratis site die je gemakkelijk zelf kan aanpassen?

    Vandaag de dag wordt er veel gebruikgemaakt van CMS'en, Content Management Systems.
    Dit zijn downloadbare pakketten die volledig aanpasbaar en uitbreidbaar zijn met nieuwe functionaliteiten en designs. Op deze manier kan zonder veel voorkennis en moeite bijvoorbeeld een volledige webshop of blog worden opgezet. Door de grote populariteit van deze CMS'en is er vaak ook een grote beschikbaarheid aan bestaande plugins die met een simpele klik geïnstalleerd kunnen worden.

    De site Open Source CMS biedt de mogelijkheid om verschillende CMS'en uit te testen.


    Laatst gewijzigd door Zero Grav; 15 augustus 2011 om 00:02
    no votes  

  3. #3
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128
    Wat heb ik nodig om een eigen website te maken?

    Om te beginnen heb je een computer nodig met minstens één browser (Internet Explorer, Firefox, Safari, ..). Dit hoeft geen krachtige computer te zijn, gewone websites vereisen doorgaans niet zoveel geheugen.

    Daarna moet je een editor hebben om je code in te schrijven. Dit kan een WYSIWYG-editor zijn, of een gewone teksteditor zoals kladblok op Windows. Er zijn echter ook 'veredelde' tekstverwerkers die je helpen code te schrijven door automatisch lijnen in te springen en in kleur aan te duiden. (Zie Editors)

    Om je site online te plaatsen heb je webruimte nodig. De meeste ISP's (Telenet, Belgacom, ..) geven gratis webruimte bij je internet abonnement. Maar om gewoon een site te leren maken heb je genoeg aan je eigen computer.

    Wil je je site online zetten dan zal je gebruik moeten maken van een FTP client. Dit programma wordt gebruikt om verbinding te leggen met je webruimte. (Zie FTP Clients)

    In een latere fase kan je webruimte aankopen bij een hostingbedrijf. Eens je overgaat op dynamische websites die gebruikmaken van PHP/ASP(.NET) zal je dit sowieso moeten doen omdat de gratis webruimte van je ISP (Telenet, Belgacom, ..) geen parser (programma dat een taal verwerkt) ter beschikking heeft.
    no votes  

  4. #4
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128
    Welke programma's kan ik hiervoor gebruiken?

    Doorgaans is elk programma goed om mee te beginnen. Zelfs in kladblok, het standaard tekstverwerkingsprogramma van Windows, kan je een volledige website maken. Het is echter aangeraden om een iets geavanceerder programma te gebruiken dat kleine, maar belangrijke functies heeft zoals code hinting, color coding en line numbers. Hieronder vind je een opsomming van programma's die je kan gebruiken.

    het onderdeel WYSIWYG (What You See Is What You Get) editors bevat programma's die code voor jou schrijven. Waarbij je dus een website kan bouwen door gewoon enkele elementen op je pagina te slepen en enkele opties aan te passen.

    Als derde onderdeel hebben we de FTP-Clients. FTP staat voor File Transfer Protocol, deze programma's laten ons dus ook toe om bestanden via het web te versturen en te downloaden. Door middel van deze programma's zullen we onze website uiteindelijk dus ook online zetten.

    De laatste lijst tenslote omvat de grafische programma's. Een website ontstaat doorgaans eerst als Template in Photoshop of een dergelijk programma voor er tot scripten wordt overgegaan.

    Editors

    Texteditors

    Mac



    Windows



    WYSIWYG Editors

    Mac



    Windows



    FTP-Clients

    Mac



    Windows



    Grafische Pakketten

    Mac



    Windows

    Laatst gewijzigd door Zero Grav; 12 april 2012 om 09:35
    no votes  

  5. #5
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128
    HTML en xHTML

    (x)HTML is een taal die gebruikt wordt op het Internet om webpagina's structuur te geven. Deze taal beschikt over enkele logische tags waarin de inhoud van een webpagina kan worden opgedeeld, de opmaak van die inhoud kan dan aan de hand van CSS worden bepaald.

    xHTML is dus de taal waarin je zegt, dit is een alinea, dit is een titel, dit is een lijst, etc… CSS wordt dan later gebruikt om te bepalen hoe ver iets ingesprongen is, of het gecentreerd staat, of het een bepaalde kleur heeft, etc…

    xHTML werd oorspronkelijk ontwikkeld als vervanger van HTML. Deze beschikte onderandere over een mooiere syntax en een striktere regelgeving. Na verloop van tijd werden er 2 werkgroepen opgestart om over de toekomst van HTML te beslissen, één groep werkte verder aan XHTML 2.0 en de andere groep hield zich bezig met de ontwikkeling van HTML 5. Deze groepen werden uiteindelijk toch weer samengevoegd en er werd besloten om HTML 5 tot een nieuwe standaard te ontwikkelen.

    Op het moment van schrijven bevindt de HTML 5 specificatie zich in "Last Call" status. Dit is dus nog steeds geen officiële standaard en wordt standaard ook nog niet door alle browsers ondersteund, de ondersteuning neemt echter wel snel toe.

    Momenteel kan je nog steeds kiezen om HTML 4 te leren of xHTML 1(.1). Doorgaans wordt xHTML 1 beschouwd als de standaard in de webwereld en hiervoor is dus ook de beste ondersteuning terug te vinden.

    HTML 4 en xHTML 1(.1) zijn beide standaarden en zijn dus ook onderhevig aan enkele regels. Er wordt verwacht dat een ontwikkelaar deze regels volgt en probeert elke webpagina volledig valid te houden. Om dit te controleren stelt het w3 de code validator ter beschikking. Deze controleert je code op eventuele fouten en kan je helpen eventuele bugs op te lossen.

    Waarom voor xHTML kiezen boven HTML? De striktere regels die ons door xHTML 1(.1) worden opgelegd zijn er voor een reden. Voor xHTML was het web maar een warboel van tags, er waren regels om HTML te schrijven, maar deze waren vrij los en werden amper toegepast. Ook was er in die tijd weinig nagedacht over het logisch gebruiken van bepaalde tags (semantiek). Je kan nog steeds HTML schrijven en zelfs net zo goed als met xHTML, maar bij HTML is het eerder een keuze en bij xHTML meer een verplichting.

    Met de komst van xHTML is dit sterk verbeterd, niet dat dit enigszins verplicht is om een correct xHTML document te hebben, maar mensen begonnen veel meer na te denken over de structuur van hun document. Een site werd niet langer opgebouwd in tabellen maar in divs, menu's werden in lijsten gestoken en er werd met headers en titels gewerkt om ook de slechtzienden beter te kunnen bereiken.

    Ook de ontwikkelaar profiteert hiervan. Door een document op te splitsen in een pure data en opmaak kant kunnen er veel sneller wijzigingen in een document aangebracht worden. Zo kan de layout van een site volledig worden aangepast door er gewoon een nieuw CSS bestand aan te linken (Proof Of Concept op css Zen Garden: The Beauty in CSS Design).

    Dit alles vereist geen xHTML, maar omdat het gebruik van semantisch coden en usability/accessibility samen met xHTML opkwam gaat het wel vaak hand in hand.

    xHTML wordt echter niet altijd hetzelfde weergegeven in browers als HTML. De browser bekijkt de code en gaat specifieke renderingsregels toepassen aan de hand van het gebruikte doctype. Gebruik je geen doctype dan gaat de browser terugvallen op Quirks mode, een oudere manier van renderen waardoor alles er verkeerd kan gaan uitzien.. Vergeet dus zeker nooit een doctype toe te voegen, of je nu met HTML of xHTML werkt. Het HTML5 doctype is niets meer dan <!doctype html>, dus dat is een kleine moeite.

    Voor meer uitleg kan je terecht op Frequently Asked Questions (FAQ) - The Web Standards Project

    Handige Links


    Laatst gewijzigd door Zero Grav; 7 januari 2012 om 13:03
    no votes  

  6. #6
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128
    CSS

    CSS staat voor Cascading Style Sheets. Deze taal wordt gebruikt om webpagina's op te maken. Hierbij denken we bijvoorbeeld aan kleuren, de positie van een element, de grootte, etc.. Het is een aanvulling op (x)HTML die je in staat stelt de droge brokken zwartwitte content een eigen uiterlijk te geven.

    Op het moment van schrijven is CSS2 de standaard. Net als bij HTML is er echter een opvolger in ontwikkeling in de vorm van CSS3. Ook al zijn sommige CSS3 properties al bruikbaar in de laatste generatie browsers, toch moet je nog goed nadenken vooraleer je deze gebruikt. Een groot deel van de Internetpopulatie gebruikt nog steeds browsers als Internet Explorer 6, welke amper ondersteuning biedt voor CSS2, laat staan CSS3. Wil je je site dus zo toegankelijk mogelijk maken dan kan je best eerst uitvoerig testen of CSS3 nog even achterwege laten.

    Handige Links


    Laatst gewijzigd door Zero Grav; 24 maart 2013 om 13:57
    no votes  

  7. #7
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128
    Javascript (of JQuery)

    Javascript is de standaard voor webscripts. Deze taal kan enkele taken op zich nemen die de gebruikerservaring verbeteren zoals het on-the-fly valideren van formulieren, dynamisch updaten van content en kleine animaties.

    Javascript wordt echter niet door alle browsers op dezelfde manier ondersteund wat soms tot problemen kan leiden. Daarom zijn er verschillende frameworks/libraries in ontwikkeling die de cross browser problemen van Javascript voor zich nemen en ook enkele extra functionaliteiten toevoegen aan de taal. Dit is geen vervanging voor Javascript maar een aanvulling ervan om het gebruik ervan te vergemakkelijken.

    Zo is er bijvoorbeeld de JQuery library die gebruikmaakt van CSS selectors. Zo kan elke webontwikkelaar met CSS kennis direct aan de slag en wordt de leercurve een pak minder steil.

    Deze taal kan door iedereen gebruikt worden, er bestaan duizenden scripts die gratis te downloaden zijn en die met 2 lijnen code toelaten om nieuwe functionaliteit (zoals bijvoorbeeld drag & drop of een slideshow) toe te voegen aan je website.

    Belangrijk bij het gebruik van Javascript is dat je non-obtrusive code probeert te schrijven. Dit betekent dat je site nog steeds 100% functioneert zonder Javascript. Heb je bijvoorbeeld een formulier dat je via Javascript wilt valideren, zorg dan dat het ook nog steeds gesubmit kan worden als de gebruiker Javascript af heeft staan en dat het ook nog via PHP gevalideerd wordt.

    Bij het ontwikkelen van Javascript kunnen sommige fouten soms erg onduidelijk zijn. Om beter zicht op de zaak te krijgen kan je gebruikmaken van de gratis Firefox plugin Firebug, zo wordt debuggen een pak gemakkelijker.

    Handige Links




    Libraries/Frameworks




    Handige links voor Libraries/Frameworks


    Laatst gewijzigd door Zero Grav; 6 april 2012 om 17:46
    no votes  

  8. #8
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128
    PHP

    PHP staat voor Hypertext-Preprocessor. Dit is een Server-Side scriptingtaal en vereist speciale software om verwerkt te worden. Met deze taal kan je echter dynamische pagina's maken waar de gebruiker zelf data aan kan toevoegen.

    Ook PHP beschikt over frameworks (zie: Rails-inspired PHP frameworks - H3RALD)

    Handige Links





    ASP(.NET)

    ASP(.NET) is de tegenhanger van PHP en werd ontwikkeld door Microsoft. Het ontwikkelen in deze taal is gratis, en ook deze taal vereist speciale software om verwerkt te worden. De parser vereist echter wel een Microsoft-server, die doorgaans duurder is om te huren dan een Linux-server met PHP.

    Handige Links


    Laatst gewijzigd door Zero Grav; 24 augustus 2011 om 23:42
    no votes  

  9. #9
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128
    Ruby On Rails

    Rails is een Model-View-Controller (MVC) framework ontworpen in Ruby, een dynamische object-gëorienteerde programmeertaal, waar het DRY (Don't Repeat Yourself), Coding-over-Convention en agile development concept centraal staan. Zijn built-in support voor automated testing, naadloze integratie met diverse databases, mapping van database tabellen naar Ruby objecten (ORM-Object Relational Mapping)... maakt dat dit framework uitermate geschikt is voor het creëeren van (grote) web applicaties.

    Handige Links


    Laatst gewijzigd door Zero Grav; 18 juni 2010 om 20:28
    no votes  

  10. #10
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128
    MySQL

    MySQL is de de facto standaard databank voor het bewaren van gegevens op het net. Dynamische sites gebouwd in PHP en ASP(.NET) maken ervan gebruik om data extern op te slaan. Het gebruik van MySQL vereist speciale software.

    Handige Links


    no votes  

  11. #11
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128
    XML

    XML staat voor Extensible Markup Language en werd ontworpen om data op een gemakkelijke manier op te kunnen slaan. Het is een soort plaintext databankje waar kleine hoeveelheden data in kunnen worden opgeslagen om later terug uit te lezen. Voor grotere hoeveelheden data wordt doorgaans MySQL gebruikt.

    Deze technologie wordt vaak gebruikt voor het doorgeven van data tussen verschillende talen.

    XML heeft geen standaardtags, de tags die je nodig hebt kan je zelf uitvinden. Om toch regels op te stellen voor een de opbouw van de tags kan je zelf een Doctype ontwerpen en aan je XML document linken.

    De bestanden kunnen ook omgezet worden naar een (x)HTML door gebruik te maken van een XLS bestand. Dit bestand verwerkt en structureert de XML data als (x)HTML.

    Handige Links





    JSON

    JSON staat voor Javascript Object Notification. Het is net als XML een text-based formaat om data in op te slaan. Het wordt vooral gebruikt voor het uitwisselen van data in Javascript applicaties, bijvoorbeeld in combinatie met AJAX.

    Eén van de voordelen van JSON is dat het minder overhead biedt dan XML. De data wordt namelijk niet omringd door tags waardoor het een compacter formaat vormt. Ook hebben de meeste, zo niet alle, talen JSON-support op de één of andere manier wel ingebouwd of is er een library voor beschikbaar waardoor het parsen ervan automatisch kan gebeuren, wat bij XML doorgaans niet het geval is.

    Handige Links


    Laatst gewijzigd door Zero Grav; 16 februari 2011 om 08:12
    no votes  

  12. #12
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.820
    iTrader
    18 (100%)
    Reputation
    38/128
    Flash

    Flash is een ontwikkeling van Adobe en kan gebruikt worden om dynamische, geanimeerde websites te maken. De ontwikkeling van Flash vereist de Adobe Flash IDE om SWF's te compileren en vereist van de gebruiker dat hij de Flash Player Plugin heeft geïnstalleerd.

    Veel gebruikers denken dat Flash begint en stopt met animeren op de tijdslijn. Flash gaat echter veel verder en heeft ook een eigen programmeertaal die luister naar de naam ActionScript 3.0. Deze taal maakt van Flash een uiterst krachtige en veelzijdige plugin voor het web.

    Naast Flash voor het web kan je door middel van het AIR platform ook desktopapplicaties (en in de toekomst ook mobiele applicaties) ontwikkelen.

    Handige Links





    Silverlight

    Silverlight is een concurrent van Adobe Flash en wordt actief ontwikkeld door Microsoft. Ook hier is een speciale SDK voor nodig en wordt van de gebruiker verwacht dat hij de Silverlight plugin geïnstalleerd heeft.

    Ook Silverlight is een zeer krachtige speler op de markt met aanwezigheid op zowel de desktop- als de mobiele markt.

    Handige Links


    Laatst gewijzigd door Zero Grav; 19 juli 2010 om 01:46
    no votes  

Regels voor berichten

  • Je mag geen nieuwe discussies starten
  • Je mag niet reageren op berichten
  • Je mag geen bijlagen versturen
  • Je mag niet je berichten bewerken
  •  

Inloggen

Inloggen