De 9lives Webdesign informatie sticky 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 volledige 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.
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 geen parser ter beschikking heeft.
Editors Gewone Editors Mac
● ● ● ● ●
Coda Espresso TextMate Dreamweaver TextEdit
Windows
● ● ● ● ● ● ● ●
Kladblok Notepad++ Aptana Dreamweaver Komodo Edit Zend Studio TopStyle 4 Microsoft® Visual Web Developer® 2008 Express Edition
WYSIWYG Editors Mac
● ●
Dreamweaver iWeb (standaard op elke Mac voorgeïnstalleerd)
Windows
● ●
Dreamweaver Microsoft Expression Web
FTP Clients Mac ● ● ● ●
Transmit Cyberduck Flow YummyFTP
Windows ●
FileZilla
● ● ●
CuteFTP SmartFTP FlashFXP
Grafische software Mac ● ● ● ●
Pixelmator Adobe Creative Suite Inkscape The Gimp
Windows ● ● ● ●
Adobe Creative Suite The Gimp Inkscape Paint.NET
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 vormgegeven. 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. 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 HTML was het web maar een zootje, er waren regels om HTML te schrijven, maar deze waren vrij los en werden amper toegepast. Ook werd er totaal niet over semantiek nagedacht (welke tags gebruiken voor welke elementen).
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 http://www.csszengarden.com). 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. Dit komt de render engine weet in welke taal de website geschreven is en zo nodig ook andere regels gaat toepassen in het renderen. xHTML wordt door de courante browsers normaal beter gerenderd dan HTML 4.01. Voor meer uitleg kan je terecht op http://www.webstandards.org/learn/faq/#p2133
Handige links ● ● ● ●
http://www.htmldog.com http://www.w3schools.com http://www.456bereastreet.com http://validator.w3.org/
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 ● ● ● ● ●
http://www.w3schools.com http://www.htmldog.com http://www.css-tricks.com http://css.maxdesign.com.au http://www.css3.info
Javascript 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 stijl. 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.
Handige links ●
http://www.w3schools.com
Libraries/Frameworks ● ● ●
http://www.jquery.com http://mootools.net http://developer.yahoo.com/yui
Handige links voor Libraries/Frameworks ●
www.learningjquery.com
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: http://www.h3rald.com/articles/rails-inspired-phpframeworks/)
Handige links ●
http://www.php.net
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 ● ●
http://www.w3schools.com http://www.asp.net
Ruby On Rails
Handige links
●
http://rubyonrails.org/
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 ● ●
http://www.mysql.com http://www.w3schools.com/sql/default.asp
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 ●
http://www.w3schools.com/xml/default.asp
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. Handige Links
●
http://www.json.org
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. Flash omvat niet alleen de grafische omgeving waar animaties in kunnen worden gecreëerd maar maakt ook gebruik van de programmeertaal ActionScript 3.0. 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 ● ● ● ●
http://www.adobe.com/devnet/flash/learning.html http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/index.html http://www.gotoandlearn.com http://www.flashfocus.nl
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.
Handige Links ●
http://silverlight.net
Handige Links & Resources Development ●
W3C Validator
● ●
http://stackoverflow.com http://www.addedbytes.com/cheat-sheets/
Dummytext ● ●
http://www.lipsum.com http://www.blindtextgenerator.com
Standaarden ●
http://www.webstandards.org/learn/faq/
(x)HTML ● ●
HTML leren voor kinderen Handleiding HTML
CSS ● ● ● ●
CSS Float tutorials http://www.css-tricks.com http://csstypeset.com/ http://riddle.pl/emcalc
PHP ● ● ●
IBM's Recommended PHP Reading List PHP Hulp PHP Security Consortium
ASP(.NET) ● ●
MSDN http://ajax.codeplex.com/
Interessante blogs van developers over development ● ● ● ● ● ●
Naarvoren A List Apart Smashing Magazine CSS Tricks CSS Snippets Tips, Tricks & Bookmarks on Webdevelopment
Tools ● ● ● ●
Web Developer Toolbar Firebug ColorZilla http://leftlogic.com/lounge/articles/entity-lookup/
Usability ●
Accessibility ●
Browsers ● ● ● ●
http://www.opera.com http://www.google.com/chrome http://www.getfirefox.com http://www.microsoft.com/windows/internet-explorer/default.aspx? ocid=ie8_b_1C438A12-D738-4A04-9BCB-9EA8BFF3E796
Performance ● ● ● ●
http://stevesouders.com/ http://developer.yahoo.com/yslow/ http://developer.yahoo.com/performance/rules.html http://www.youtube.com/watch?v=BTHvs3V8DBA
Kleurenkiezers ● ●
Adobe Kuler COLOURlovers :: Color Trends + Palettes
Website showcases ● ● ● ● ● ● ● ● ● ● ●
http://thefwa.com http://faveup.com http://cssartillery.com http://designmeltdown.com http://creamycss.com http://designsnack.com http://thecssgallerylist.com http://bestwebgallery.com http://cssillustrated.com http://cssiphone.com http://www.makebetterwebsites.com
Typografie ● ●
www.whatthefont.com Typetester - Compare Screen Type
Font resources ●
http://pixelfonts.style-force.net/
●
http://new.myfonts.com/
●
http://www.microsoft.com/Web
Artikels Webdevelopment
●
http://www.netlash.com/blog/detail/webdesign-proces-bij-netlash
CSS
● ● ●
Top CSS Tips 12 Lessons For Those Afraid Of CSS And Standards http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer6-7-and-8/
(x)HTML
● ●
http://legacy.www.nypl.org/styleguide/ http://diveintohtml5.org/semantics.html
.htaccess
●
A Beginner's Guide To .htcaccess
Search Engine Optimalisatie (SEO)
●
Typography
●
http://www.thedesigncubicle.com/2009/02/what-makes-a-quality-font/
Resources Icoontjes
●
