11 video's voor het leren van web design

(bron: Mashable)

UPDATE: Dankzij een reactie van Jeroen van Beijnen (waarvoor dank) is de lijst uitgebreid tot 11 stuks. Fontys heeft namelijk een bijzonder duidelijke (en Nederlandstalige) worskhop website maken samengesteld en openbaar gemaakt. Geen video tutorials als zodanig, maar wel een absolute aanrader!

Sommige mensen kunnen gemakkelijk geschreven instructies lezen over hoe je iets moet doen en dan vervolgens uitvoeren wat ze gelezen hebben. Andere mensen zien liever hoe iets gedaan wordt voordat ze het volledig begrijpen. Dat is natuurlijk mooi als je iemand hebt die je kan voordoen hoe iets moet, maar als dat niet zo is wordt het een tikje lastiger.

En daarvoor hebben we de video tutorial. Daarmee kun je gewoon op je computer kijken hoe iets gedaan wordt. Hieronder staan 10 van die tutorials (in het Engels) die je de basis leren van website ontwerp, van eenvoudige PHP, het maken van je eerste website tot en met het maken van WordPress thema's.

Je eerste website: Het edele handwerk - Dit is een basis uitleg over het bouwen van je website door alles zelf in te typen in een tekst editor.

PHP Video Tutorials voor website ontwerpers - Deze site biedt een flinke verzameling gratis video tutorials over PHP, van het allereerste begin tot en met het eind, inclusief het schrijven van je eerste PHP Script, PHP Lussen, en meer.

Maak CSS Layouts in Dreamweaver - Dit is de eerste video van drie over het werken met CSS in Dreamweaver.

Hoe maak ik van een willekeurige Web Template een WordPress Thema - Deze uitleg is gericht op de niet-nerds en is bijzonder handig wanneer je ooit met WordPress gaat werken.

Login, Registratie en Wachtwoord bescherming voor je website - Deze PHP tutorial biedt alles wat de titel zegt. Met het script dat je maakt kan een gebruiker zich registreren, in- en uitloggen, wachtwoord wijzigen, en het wachtwoord ophalen wanneer het vergeten is.

Inleiding in Microsoft Expression Web: hoe gebruik je een CSS - Deze video tutorial is onderdeel van een serie over Microsoft Expression Web en laat zien hoe je in die omgeving werkt met CSS.

Hoe voeg ik navigatie menuknoppen toe aan mijn website met Nvu - Deze tutorial laat zien hoe je navigatie elementen toevoegt wanneer je Nvu gebruikt, een gratis programma voor website ontwerp.

Mijn eerste web pagina - Deze tutorial van de Universiteit van Utah State biedt een eenvoudig overzicht voor iedereen die nog nooit een web pagina gebouwd heeft.

Tubetorial Archieven - Dit archief bevat tientallen video's over HTML, bloggen, WordPress, Yahoo! Pipes, het bouwen van een winstgevende site, en meer.

Hoe bouw ik een web pagina - Deze tutorial is uitstekend geschikt voor iemand voor wie HTML helemaal nieuw is en die een eigen site wil bouwen.

PhotoShop: 100 manieren om een foto te bewerken

Een erg mooie verzameling met 100 manieren om een foto te bewerken in PhotoShop vind je hier.

Eentje ervan heb ik net zelf uitgetest. Bekijk het resultaat hieronder. (Wil je de foto en de tekening ervan in het volle formaat zien, klik er dan op.)

Originele foto:

Tekening:

Firefox add-ons voor web designers

(bron: Mashable)


Firefox kan uitgebreid worden met extensies zodat je er bijna alles mee kunt doen. Dit keer kijken we naar de extensies die er zijn om je te helpen bij het ontwerpen van je website. Hieronder staan 16 suggesties om van Firefox een krachtige ontwerp-tool te maken.

Op Firefox add-ons for developers and designers vind je de eerste serie add-ons voor Firefox (in het Engels).

Font Finder - Selecteer tekst op een webpagina, klik met de rechter muisknop, kies FontFinder, en je krijgt alle informatie over de stijl van je selectie.

Link Evaluator - Controleer op een snelle manier de links in een pagina om zeker te weten dat ze werken. Goede links worden in groen weergegeven, problematische in rood.

LiveHTTPHeaders - Voegt de headers toe aan het pagina-informatie venster zodat je ze kunt bekijken en ook in real time nieuwe kunt toevoegen.

OperaView - Met OperaView kun je webpagina's bekijken zoals ze door Opera ge-rendered worden zonder uit Firefox weg te gaan.

Pagediff - Vergelijk de code van twee pagina's zodat je de verschillen kunt bekijken. Dit kan handig zijn om een oplossing te vinden voor een lastig coderingsprobleem.

Python Sidebar for Mozilla - Hiermee krijg je in de Firefox sidebar een snelle referentie voor de opdrachten van Python.

RankQuest - Werkbalk waarmee je je ranking kunt checken, je headers kunt testen, je pagina's kunt verifiëren en nog heel wat meer.

SEOforFriefox - Voegt informatie toe aan je Yahoo en Google zoekopdrachten zodat je meteen informatie krijgt over waar je site staat bij de verschillende ranking services. Handig om de "concurrentie" te checken.

SEOQuake - Biedt je veel opties om de ranking van je site te bekijken bij verschillende zoekmachines.

Total Validator - Een complete valideringstool die HTML en koppelingen controleert, screenshots kan maken en nog heel wat meer.

Validaty - Via een simpele knop kun je checken of de HTML van een pagine correct is.

View Cookies - Voegt een tab toe aan het pagina-informatie venster waarmee je de cookies kunt zien die door een pagina gezet worden; een snelle manier om je eigen cookies te testen.

ViewSourceWith - Hiermee kun je bestanden zoals css rechtstreeks in een externe editor openen.

Web Developer Toolbar - Biedt een enorme hoeveelheid tools, zoals: het tijdelijk uitzetten van delen van een webpagina, het uitzetten van cookies, het bekijken van de source en nog veel meer.

Window Resizer - Past automatisch de grootte van het browser venster aan tussen 640 bij 480, 800 bij 600, 1024 bij 768, 1280 bij 1024, 1600 bij 1200 om te zien hoe je pagina's er in die resoluties uitzien.

YSlow - Heb je je ooit afgevraagd waarom een pagina zo langzaam laadt? Met deze tool van Yahoo kun je bepalen welk deel van een pagina de vertraging veroorzaakt.

Design tool: Vind dat font

Vanmorgen kwam ik een tool tegen die voor designers en bloggers een life saver kan zijn. Misschien herken je de situatie: je ziet ergens op een site een logo met een heel mooi lettertype, maar je hebt geen idee welk lettertype dat nu is.

Op deze site kun je een afbeelding uploaden (of een link naar een afbeelding) waarin tekst in een bepaald lettertype staat. Het programma probeert dan de tekst te herkennen (je kunt correcties aanbrengen als iets niet herkend wordt of niet klopt) en vervolgens krijg je suggesties over welk lettertype gebruikt wordt. Uiteraard word je dan, als je daarvoor kiest, doorgelinkt naar dat lettertype op die site zodat je dat daar kunt kopen, maar natuurlijk is er daarnaast op internet een ruim aanbod aan gratis TrueType en andere lettertypes.

DrawAnywhere: online tekenen

DrawAnywhere is een website, waar je flowcharts en andere schema's en diagrammen kunt tekenen en aanpassen. De site ziet er net zo uit als een gewoon desktop programma.

Om het programma te draaien moet Flash geïnstalleerd zijn. Verder hoef je helemaal niets te downloaden of te installeren. Weer een fraai voorbeeld van Web 2.0.

45 gratis Design programma's

Hier vind je een overzicht van maar liefst 45 gratis Design programma's. Het overzicht is opgesplitst in: Beeldbewerking, Illustratie, Ontwerpprogramma's, Animatie, 3D Ontwerpen & CAD, Flash programma's en Diverse tools. Een groot deel van de programma's was me al bekend (waaronder het verslavende Google Sketchup 6), maar er stonden toch weer een paar nieuwe handige tools bij.