Tools En Tutorials Software En Tutorials Voor Webontwikkeling
Total Page:16
File Type:pdf, Size:1020Kb
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 programmeerkennis 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 Arachnophilia 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- Nvu 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 Mozilla 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.