Webdesign | Software en tutorials

Noud van Kruysbergen, Jo Bager, Herbert Braun, Axel Kossel Tools en tutorials Software en tutorials voor webontwikkeling

Voor het bouwen van een website kun je kiezen uit een groot arsenaal aan programma's. Dat varieert van simpele WYSIWYG-editors, waar je zonder pro­grammeerkennis een leuke hobbysite mee kunt maken, tot complexe databaseondersteunde webapplicaties met de nieuwste Ajax-technologieën. Het is ondoenlijk die allemaal in één artikel te noemen. Vandaar dat we ons beperken tot een aantal meer of minder bekende toepassingen, die zonder al teveel kosten of zelfs gratis te gebruiken zijn. Daarnaast noemen we een aantal tutorials die als pdf te downloaden zijn of die je als video kunt bekijken en waarmee je snel aan de slag kunt!

e meest simpele manier om een (kleine) Build 300 gaat deze editor door het leven als taxis highlighting, codeaanvulling voor tags website te maken, is nog steeds met HTML-Kit Tools en moet er online 65 dollar en CSS of het automatische omzetten van alle Deen HTML-editor. En als je het echt spar- voor betaald worden. tags in kleine letters. Het onzichtbaar maken taans wilt houden en alles helemaal zelf wilt is een andere HML-editor. van alle tags vereenvoudigt het bewerken doen, heb je genoeg aan het Kladblok van Win- Deze is gebaseerd op Java, dus je moet wel van de paginacontent. Maar de core business dows of vi in een Linux-omgeving. Maar dan een Java Runtime geïnstalleerd hebben. Het is het zoeken naar fouten. Daarbij blijf je in ben je wel eigenhandig verantwoordelijk voor programma doet wat ouderwets aan als ty- tegenstelling tot bij de verschillende online alle aspecten van het maken van een website, pische Java-applicatie met alle menu's in het validatiediensten niet verbouwereerd achter en dat kan redelijk arbeidsintensief zijn, zeker font Courier, maar de schijn bedriegt. Via de met een cryptische melding, maar komt het naarmate je website begint te groeien. optie 'Programming' kun je Java- en C++- programma met zinvolle correctievoorstellen Een zeer uitgebreide HTML-editor is HTML- scripts laten compileren. AceHTML is ook een die je in het editvenster ook meteen kunt laten ­Kit. Dat is een gratis editor voor HTML, XHTML, freeware HTML-editor met een handig over- uitvoeren. CSE maakt bovendien melding van XML en CSS, JavaScript, PHP en andere script- zicht van pagina-elementen als images en ongerijmdheden in de broncode, controleert talen. Met de tabbladen boven aan het ven- links en een controle van de HTML-syntaxis. links en maakt een overzichtelijke structuur- ster kun je snel de tags voor een groot aan- Wel irritant dat de VMN Toolbar automatisch weergave van het document. De Standard- tal verschillende elementen invoegen. Ook mee geïnstalleerd wordt. versie kost 69 dollar, de Professional-editie kun je in één keer alle tags aanpassen (grote/ Bij het handmatig inkloppen van HTML- met een batchwizard, configuratie-editor en kleine letters) en de HTML-code netjes oprui- code is het risico op fouten altijd aanwezig. XML-output kost 129 dollar. Van die laatste is men. Toch is de interface redelijk summier en Met CSE HTML Validator kun je die redelijk een trialversie beschikbaar waarmee je 100 opgeruimd en kun je alle opties snel vinden. makkelijk achterhalen. Bovendien kun je die documenten binnen 30 dagen kunt laten Versie 292 is de laatste freeware versie, vanaf gebruiken als tekstgebaseerde editor met syn- controleren.

48 c’t special 1/2009 – Webdesign

ctNL09wd_048051_dvdsoft_ok.indd 48 01-09-2009 10:53:05 Webdesign | Software en tutorials

Iedere vooruitstrevende website-ontwikkelaar Een geheel andere manier om je website aan- is een voorbeeld van een simpele maar komt vroeg of laat in aanraking met de Exten- trekkelijker te maken is het toevoegen van een toch krachtige webeditor. Het is een concur- sible Markup Language XML. Dan helpt XML- dropdown-menu. Dat kan bijvoorbeeld met rent voor programma's als Microsoft Front- Blueprint 4.5 bij het maken en bewerken van ZZEE DHTML Menu, waarmee je op een web- Page en de eerdere versies van Dreamwea- goed gestructureerde XML-documenten. De pagina makkelijk een menu kunt aanmaken dat ver. Sinds versie 1.0 in 2005 verscheen, zijn editor completeert de namen van elementen zowel optisch als wat functieomvang betreft er geen updates meer geweest. KompoZer en attributen automatisch, vult end-tags aan, afgeleid lijkt van het Windows-startmenu. Om is echter een doorontwikkeling van Nvu en highlight taalelementen en zorgt er met in- het JavaScript-framework te gebruiken moet je is eveneens gebaseerd op de Com- springen voor dat alles overzichtelijk blijft. Het de scripts en stijlen in je eigen applicaties op- poser, zodat het eindresultaat schone code resultaat kun je in een previewvenster contro- nemen. Verder heeft de applicatie alleen een oplevert. Het grote voordeel van beide pro- leren. De syntaxiscontrole is vooral onmisbaar paar simpele initialisatie-instructies nodig en gramma's is dat ze opensource zijn en er voor mensen die voor het eerst met XML aan natuurlijk de beschrijving van het menu zelf. De versies zijn voor zowel Windows als Linux de slag gaan. De bijgeleverde voorbeelddocu- bijgeleverde documentatie laat met een voor- en Mac OS X. De mogelijkheid binnen Kom- menten zijn dan handig om door te kijken. Het beeldpagina, tutorial en API-referentie niets te poZer om de broncode als HTML-tags te be- programma is 10 dagen lang gratis te probe- wensen over. De clou: de menubalken kunnen kijken geeft een goed overzicht van de op- ren, daarna kost het 85 dollar. niet alleen met JavaScript worden aangemaakt, bouw van een pagina. maar eventueel ook via een PHP-interface. Zo PhotonFX Easy Website Pro zet binnen Zelf opleuken geef je PHP-applicaties heel makkelijk een enkele minuten aan de hand van sjablonen mooie interface. De gratis versie heeft die PHP- een kant-en-klare website online. Met behulp Nadeel van het handmatig bewerken van de interface helaas niet en heeft bovendien maar van variaties op de lay-out, kleurschema's en broncode is dat je de CSS-instructies ook zelf één stylesheet. De volledige versie kost 20 dol- afbeeldingen pas je de pagina's aan je eigen moet bijhouden. Daar zijn gelukkig wel hulp- lar en heeft vier verschillende themes. wensen aan. Dan is de inhoud aan de beurt: middelen voor. Free CSS Toolbox is, de naam CoffeeCup was in het verleden voorname- er wordt een logo vastgelegd en de knop- zegt het al, gratis. Deze toolbox bestaat o.a. lijk bekend door de HTML Editor, die de laatste pen voor eigen pagina's, externe adressen of uit een CSS-validator, die ervoor zorgt dat je jaren steeds weer uitgebreid is en inmiddels 50 mailto-links worden aangemaakt. Dan vul je CSS-bestand de webrichtlijnen volgt, een CSS- dollar kost. Er is ook een Free HTML Editor-ver- de pagina's met de ingebouwde Visual Style formatter/beautifier om de lay-out van het sie van, maar die is wel erg uitgekleed. Daar- Editor. Als je wilt, kun je daar ook HTML-code bestand overzichtelijk te houden en een CSS- naast heeft CoffeeCup ook een Free DHTML bij gebruiken. Veranderingen aan de auto- compressor om alle overbodige tekens, zoals Menu Builder, waarmee je aan het menu zo'n matisch aangemaakte CSS-pagina's behoren tabs en extra spaties, te verwijderen. Hierdoor beetje alles kunt aanpassen wat er aan te pas- tot de mogelijkheden, evenals het aanpas- kost het downloaden van het CSS-bestand zo sen valt. Dat maakt het wel flexibeler maar niet sen van de metatags. Tot de extra's behoren min mogelijk bandbreedte. overzichtelijker. gekleurde scrollbalken, de snelnavigatie per Met het programma Simple CSS maak je uitvouwmenu en een e-mailformulier. De met een paar keer klikken de basislay-out voor Snel resultaat pagina's kunnen worden opgepimpt met je website. Daarbij bepaal je de fonts en de Flash-animaties en geluiden. Het resultaat kleuren en andere pagina-elementen. Simple Naast de kale HTML-programma's (al zijn die kan lokaal opgeslagen worden en van daar- CSS is lekker overzichtelijk, maar ondersteunt qua functionaliteit helemaal niet zo kaal) zijn er uit desgewenst via FTP naar de webserver toch CSS2. de WYSIWYG-editors. De HTML-code blijft hier- geüpload worden. De try-outversie biedt De top onder de CSS-editors wordt ge- bij op de achtergrond, je bewerkt het uiteinde- alle mogelijkheden voor 30 dagen, de qua vormd door TopStyle. Met versie 4 kun je lijke resultaat zonder je met de achterliggende tijd onbegrensde versie kost 60 euro voor het resultaat bekijken terwijl je de CSS aan code te (hoeven) bemoeien. De grote commer- niet-commerciële websites, 70 dollar voor het bewerken bent. Ook kun je de CSS-code ciële namen hierin zijn Dreamweaver, tegen- bedrijfssites en 160 dollar voor resellersites. testen voor meerdere browsers en zien welke woordig onderdeel van Adobes CS4-pakket en NetObjects Fusion 11 is een webdesign- stijlen er op een bepaald moment gebruikt los te koop voor 570 euro en Microsofts Expres- programma met een hele batterij aan tools worden. De volledige versie 4 kost 80 dollar, sion Web Designer, waarvan versie 3 voor zo'n en mogelijkheden en biedt een naadloze maar er is ook een gratis Lite-variant van ver- 170 euro te koop is. Maar gelukkig kan het ook integratie met XHTML, CSS, JavaScript, XML sie 3.10. minder uitgebreid en (daardoor) goedkoper. en Ajax-componenten. Er zijn aparte wizards

Met HTML-Kit kun je de broncode overzichtelijk bewerken zon- Met AceHTML kun je de HTML-syntaxis maten controleren. der al teveel gestoord te worden door allerlei toeters en bellen.

c’t special 1/2009 – Webdesign 49

ctNL09wd_048051_dvdsoft_ok.indd 49 01-09-2009 10:53:11 Webdesign | Software en tutorials

De CSS-editor TopStyle heeft een groot aantal bewerkingsmogelijk- heden. De gratis Lite-versie is minder uitgebreid, maar nog steeds heel goed bruikbaar.

Met de Free DHTML Menu Builder van Coffeecup kun je snel interactieve menu's voor op de website maken.

voor het maken van contact met databases Zeta Producer Desktop is eveneens een heel menu­structuren. Zelfs workflows kunnen en voor formulieren. De volledige versie kost gemakkelijk te bedienen CMS. Het wordt lo- door simpel drag&drop in beeld worden ge- online bij de producent tijdelijk 90 euro, maar kaal geïnstalleerd en de voltooide pagina's bracht. Intrexx Extreme kan bestaande gege- er is ook een gratis Essentials-variant. Na kunnen via FTP naar de server geüpload vens gebruiken, zoals gebruikersinformatie het installeren en verplicht registreren kun worden. De structuur van de website wordt van een externe LDAP-server, en dat com- je met de Site Wizard een lay-out kiezen en links als een mapstructuur weergegeven. De bineren met webservices. Een Portal Mana- vervolgens met de pagina's aan de slag. De subpagina's kunnen worden in- en uitge- ger is gratis te downloaden (300 MB). Maar interface is overzichtelijk, en toch zitten alle klapt. Als je op een pagina klikt, verschijnt er de core business van Intrexx Xtreme bestaat opties erin. Met een bijna dtp-achtige manier in het rechter venstergedeelte een preview, natuurlijk uit de Server-versies, variërend van werken kun je met drag&drop volledig van waaruit je via tabs naar verschillende van Start (525 euro) tot Server License voor WYSIWYG je website opbouwen, waarbij je pagina's kunt gaan die tools aanbieden 44.100 euro (allebei exclusief BTW). toch de mogelijkheid houdt de HTML-code in voor de bewerking. De interface is vrij sober Een iets bescheidener variant is de Site te zien en te bewerken. opgezet, maar dat betekent ook dat je niet Manager van Bitrix. Dit pakket legt de na- lang hoeft te zoeken naar alle noodzakelijke druk op makkelijk websitebeheer in een High-end management instelmogelijkheden. Je kunt kiezen uit 26 Microsoft Office-achtige omgeving. De ge- lay-outs, die niet veranderd kunnen worden. bruikersinterface heeft daardoor een steile Het programma WebSite X5 is een eenvou- De kleuren kun je daarentegen wel aanpas- leercurve. Tijdens het installeren wordt de dige combinatie van een WYSIWYG-editor sen. De mogelijkheid om externe editors te Bitrix Environment gedownload met daarin en een contentmanagementsysteem (CMS). integreren, bijvoorbeeld voor HTML-pagina's de software die nodig is om de Site Manager We hebben speciaal voor c't-lezers een Smart of foto's, onderstreept het professionele ka- te kunnen gebruiken: MySQL, PHP, Apache, 8-versie online staan (zie softlink) die na re- rakter van deze tool. Zeta Producer Desktop Zend Optimizer en eAccelerator. Er is een gistratie volledig en onbeperkt te gebruiken 9 kost 129 dollar, waarmee je vervolgens 80 30-dagen probeerversie. Ook hier lopen de is. Registreer het programma op de website pagina's kunt beheren. De gratis versie heeft prijzen weer aardig uiteen: van 250 dollar van de producent met onze speciale product- dezelfde mogelijkheden, maar gaat maar tot voor de Start Edition tot 2400 dollar voor de code, die ook te vinden is bij de softlink. 10 pagina's. De producent biedt nog andere Enterprise Edition en 9990 dollar voor de Ul- Met de Smart 8-versie van WebSite X5 versies aan, die bijvoorbeeld workflows on- timate Edition met ondersteuning voor ver- kun je tot 28 pagina's aanmaken en daar- dersteunen en veranderingen aan de lay-out schillende databases. bij kiezen uit meer dan 100 voorgedefini- toestaan, maar die zijn een stuk duurder. Gelukkig zijn er ook opensource moge- eerde templates. Die templates kun je ook Een portal biedt meteen meerdere web­ lijkheden. Plone is geschikt voor content-, nog eens een keer aanpassen aan je eigen applicaties op intranet of internet aan. Als document- en kennismanagement. In een smaak. Een menu wordt automatisch aan- je een complexe portal wilt ontwerpen, kun paar minuten heb je een intranet, portal, gemaakt. Eigenlijk gebeurt vrijwel alles in je bij nul beginnen en alles met de hand groupware-tool of website. Het is beschik- wizard-vorm, tot en met het uploaden van je programmeren of een aantal kant-en-klare baar voor Windows, Linux en Mac OS X. Na bestanden aan toe. Op dezelfde manier kun systemen zoals een forum en gebruikersbe- het installeren kom je via de Plone Controller je achteraf de pagina's makkelijk aanpassen. heer met elkaar combineren. Met Intrexx bij de managementinterface van Zope of de Het gemak van deze manier van werken be- Ex­treme kan dat een stuk sneller. Dit por- Plone-site. Het aanmaken van een site is zo tekent wel dat je binnen de mogelijkheden talframework heeft voor veel taken al kant- gepiept, daarna kun je meteen aan de slag van die wizard moet blijven, maar dan heb en-klare componenten zoals een kalender, met de content. Ook is het vrij eenvoudig je ook snel resultaat. De volledige versie van nieuwsbrief, contentmanagement, wiki's, een andere stijl te downloaden en te instal- Incomedia's WebSite X5 heet Evolution 8 en blogs en nog veel meer. Met geïntegreerde leren. Het lijkt qua opbouw en bediening kost 71 euro; Compact 8, de eenvoudigere tools genereer je hieruit op maat gemaak- allemaal wel wat minder overzichtelijk dan versie, kost 42 euro. te toepassingen, formulieren, lay-outs en Joomla en zeker Drupal.

50 c’t special 1/2009 – Webdesign

ctNL09wd_048051_dvdsoft_ok.indd 50 01-09-2009 10:53:13 Webdesign | Software en tutorials

Tutorials

Er zijn op internet een heleboel handlei- dingen en online boeken te vinden over de meest verschillende onderwerpen. Daar moet je dan wel even voor gaan zitten. Alle tutorials die we hier noemen, zijn te vinden via de soft- link. Enkele tutorials zijn in de vorm van een pdf-bestand, zodat je die kunt downloaden en verder overal offline kunt bekijken, bijvoor- beeld op een e-bookreader. Een algemene inleiding in de Ajax-technolo- gie komt van Matthew Eernisse met 'Build Your Own AJAX Web Applications'. Daarin wordt ook het klassieke back-button probleem opgelost: in een Ajax-applicatie wordt van verschillende bronnen informatie opgehaald, waardoor de pagina er altijd anders uit zal zien, omdat die steeds opnieuw aangemaakt en geüpdatet wordt. Dan heeft een 'terug'-knop weinig waarde en leidt die tot rare bijverschijnselen. Voor de opensource CMS'en zijn prima tu- Met het CMS Plone torials te vinden, zoals 'Make a Joomla Tem- heb je zo een systeem online om content en documenten te beheren en te delen. plate in 5 Easy Steps' van Gary Reid en de 'Joomla! 1.5: Quick Start Guide' van de Joomla samen met iemand die er verstand van heeft meestal laag is en je er prima mee op gang Document Work Group, waarin alles over het mee aan de slag te gaan of je te laten voor- wordt geholpen. De problemen die je daarna installeren en beheren van Joomla 1.5 behan- doen hoe het moet. Gelukkig hoef je niet af- tegenkomt zijn meestal specifieker, en dan deld wordt. Daarna kun je met 'An Incomplete hankelijk te zijn van anderen: er zijn een aar- kom je vanzelf uit bij de eerder genoemde Guide To SEO + Joomla SEO' van Barrie North dig aantal videotutorials op internet die je in online tutorials. je website optimaliseren voor zoekmachines. alle rust kunt bekijken en waarmee je eventu- Voor Drupal kun je met de tutorial 'Drupal 6 eel meteen mee kunt doen. Zoek je eigen weg Content Administration' van J. Ayen Green het Als het begrip Ajax je nog niet helemaal CMS installeren maar vooral ook beheren, en duidelijk is, kun je op killerajax.com meer dan Het blijkt dat er veel verschillende manieren is dan ook met name bedoeld voor content- 3 uur video's bekijken over dat onderwerp. zijn om één en hetzelfde probleem op te los- editors. Daarbij komt de hele range van het XMLHttp­ sen. Welk type en welke webeditor je kiest, is Als je per se alles in eigen hand wilt hou- Request-object tot en met het inbedden van een kwestie van persoonlijke voorkeur, maar den, kun je bijvoorbeeld met Alavoor Vasude- de gebruikersinterfacecode Scriptaculous ook van de eisen die je aan je website stelt. vans uitgebreide inleiding 'PHP HOW−TO' aan aan bod. Voor vrijwel ieder aspect van het ontwikke- de slag of met 'Websites bouwen met Nvu' Voor Joomla en Drupal, maar ook voor an- len van een webapplicatie zijn er opensource van Wim van Dessel zelf een website maken. dere systemen als WordPress en phpBB, zijn en commerciële mogelijkheden. Ben je niet Als je toch minder geïnteresseerd bent in er videotutorials die met name voor de be- vies van wat handwerk en vind je het leuk om de code en meer in het creatieve proces via ginnende contentmanager bedoeld zijn. Die dingen zelf uit te zoeken, kijk dan eerst bij de WYSIWYG, dan biedt 'Creating a Website: In- video's laten in een notendop zien wat de mo- freeware mogelijkheden. Hecht je meer waar- troduction to Dreamweaver' een inleiding in gelijkheden zijn en waar je die in de back-end de aan ondersteuning en continuïteit, dan Dreamweaver CS3. kunt vinden. Dat werkt een stuk sneller dan hangt daar meestal ook een prijskaartje aan. dat zelf te moeten uitvissen. (nkr) Videovoorbeelden Ook voor onderwerpen als PHP, HTML en Softlink 09WD048 CSS zijn er videotu- Als je een programmeertaal echt goed wilt torials, waarbij de leren of met een softwaretool wilt kunnen moeilijkheidsgraad omgaan, is de meest efficiënte manier daar van de onderwerpen

Maak met NetObjects Fusion een website op een dtp-achtige ma- Met de wizard van WebSite X5 maak je snel een lay-out, die je daar- nier met drag&drop. na met dezelfde wizard van content kunt voorzien. c

c’t special 1/2009 – Webdesign 51

ctNL09wd_048051_dvdsoft_ok.indd 51 01-09-2009 10:53:16