Ik geef training in frontend tools en stacks als HTML, JavaScript, TypeScript, React, Angular en Vue. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter(@PeterKassenaar).

In dit blog vind je persoonlijke artikelen, die niet noodzakelijk tech-gerelateerd zijn.

Views and expressions are my own.

Terug naar de algemene site.

03november

Microsoft Surface - eerste indrukken

Met het verschijnen van Windows 8 heeft Microsoft voor het eerst ook een een eigen tablet uitgebracht, de Microsoft Surface met Windows RT (de versie van Windows 8 die speciaal voor tablets met een ARM-processor is geoptimaliseerd).

Ruim twee jaar geleden, in april 2010 kocht ik in Los Angeles een iPad voordat deze in Nederland verkrijgbaar was. Het leek me leuk om ook deze gadget aan te schaffen voordat hij officieel op de Nederlandse markt zou verschijnen. Als was de weg er naartoe dit keer wel heel gewoontjes – ik heb in de Duitse Microsoft Store een bestelling geplaatst en enkele dagen na het verschijnen van de Surface werd hij door een koerier van FedEx aan de deur afgeleverd.

Als je ook een Surface wilt bestellen voordat deze via de officiële Nederlandse kanalen verkrijgbaar is, bezoek dan bijvoorbeeld www.surface.de. Maar ook via de Engelse Microsoft Store kun je een tablet bestellen, zij het dat je in ponden (omgerekend) iets meer betaalt dan in euro’s.

Ik bestelde de Surface 32 GB met Touch Cover. Omdat ik bij het schrijven van het Handboek Windows 8 al had gemerkt dat je heel makkelijk van taal kunt wisselen in Windows 8 was ik niet bang dat ik met een puur Duits product zou blijven zitten.

1. Verpakking

Microsoft is vaak bekritiseerd om de uitbundig vormgegeven verpakkingen met tal van reclamekreten en versieaanduidingen. De doos van de surface is minimalistisch ontworpen en ziet er smaakvol uit. Het zwarte deel is de doos, het witte deel de binnendoos die je er uit trekt.DSC_6508

 

Op achterkant staat in kleine letters vermeld wat Windows RT is en dat je geen gewone desktopapplicaties op de tablet kunt installeren. Op de onderkant staan de landen waarin het product verkocht kan worden. Ook NL staat er bij, dat lijkt me een goed teken.

DSC_6512DSC_6513

De binnendoos uitgeschoven:

DSC_6514

 

Onder de binnendoos gaat een inlay verscholen waarin de Touch Cover (toetsenbord en beschermhoes ineen) verscholen gaat. Keurig vormgegeven.DSC_6515

 

De touch cover lift je makkelijk uit de sjabloon:DSC_6516

 

Toetsenbord ‘touch cover’

Kleine tegenvaller: het toetsenbord is wel degelijk van een Duitse indeling voorzien en niet van een US-International-indeling zoals de meeste toetsenborden. De indeling hiervan (QWERTZ) is bijna gelijk, maar de toetsen Y en Z zijn omgewisseld en er zijn apart toetsen voor veelgebruikte accentletters als ü, ö en ä.

Dit was op de afbeelding in de MS Store helaas niet goed zichtbaar, anders had ik de versie zonder toetsenbord besteld. Zodra de Surface officieel in Nederland verkrijgbaar is zal ongetwijfeld een goed toetsenbord worden meegeleverd.

Het materiaal waarvan de touch cover is gemaakt voelt heerlijk zacht, bijna fluweelachtig aan. De toetsen hebben geen merkbaar indrukmoment. Het zijn echt aanraaktoetsen.

De touch cover bevat zelfs een Windows-toets om snel terug te keren naar het startscherm en een heuse trackpad.

DSC_6518

Het toetsenbord heeft daarnaast aparte knoppen om de speciale Windows 8-charms voor Zoeken, Instellingen en meer direct te openen.

DSC_6529

 

2. Inhoud van de doos

De surface zelf is verpakt in de witte binnendoos. Via een klapdeksel wordt de inhoud zichtbaar.

DSC_6520

DSC_6521

DSC_6522

De complete inhoud van de doos:

  • Surface
  • Netsnoer en adapter (wel geschikt voor Nederlandse wandcontactdozen)
  • Summier boekje en gebruiksaanwijzing.
  • Touch cover met toetsenbord

DSC_6523

De Surface heeft aan de achterkant een uitklapbaar deel. Hiermee kun je de surface rechtop zetten om bijvoorbeeld een film te kijken, foto’s als diavoorstelling af te spelen of om het toetsenbord in te klikken en de tablet als laptop te gebruiken.

DSC_6524

Het toetsenbord klikt zich met een verrassend sterke magnetisch klik vast aan de tablet. Je kunt zonder problemen de Surface optillen aan het toetsenbord zonder dat hij er af valt. Ik heb de indruk dat de bevestiging steviger is dan de cover van de iPad 2. Als je een iPad 2 (of 3) optilt aan het covertje, dan valt de tablet op de grond. De Surface zit steviger vast. De complete opstelling ziet er dan zo uit:

DSC_6525

Je kunt de touch cover op verschillende manieren over of achter de tablet vouwen. Het toetsenbord zelf is niet oprolbaar (zoals het hoesje van de iPad 2). Dit is één rigide deel.

DSC_6526

DSC_6527

 

3. Surface in gebruik nemen

Tijd om de Surface in gebruik te nemen. Hij wordt opgeladen geleverd, dus als het goed is kun je direct aan de slag. De aan/uitknop zit rechtsboven (als je de tablet rechtop houdt, met het Windows-logo aan de onderkant en de camera aan de bovenzijde).

DSC_6528

Installatiestappen

De installatiestappen zijn eenvoudig. Je hoeft bijvoorbeeld geen versienummer in te vullen. Wel moet je de beveiligingssleutel van je Wifi-netwerk bij de hand hebben. Deze kun je tijdens de installatie direct opgeven.

1) Kies de weergavetaal. De keuzes bij deze (Duitse) Surface waren Deutsch, English en Francais. Ik koos bij de installatie voor Engels (en heb dit later omgeschakeld naar Nederlands, zie verderop). Daarna moet je de licentievoorwaarden accepteren.

DSC_6531

Je kunt dit zowel via aanraakbediening als via het toetsenbord doen, desgewenst zelfs gemixt. Op het moment dat je de touch cover losklikt wordt automatisch een on-screen toetsenbord getoond als je in een tekstvak klikt.

Terzijde: ik had dit nodig omdat ik mijn e-mailadres moest invullen. Maar ik had geen idee hoe dit op een Duits toetsenbord moest. Het @-teken (Shift+2 op een US-toetsenbord) staat op de touch cover rechts onder de Q. En wat ik ook probeerde (Shift+Ctrl+Q, Alt+Shift+Q), het lukte me niet om een apestaartje op het scherm te toveren. Uiteindelijk heb ik het toetsenbord maar losgeklikt en via het on-screen toetsenbord mijn e-mailadres ingevuld. Daar zat de @ gelukkig op de vertrouwde plek ;-)

2) Kies een kleurenschema en een computernaam.DSC_6532

 

3) Kies een wireless netwerk om verbinding mee te maken. Wat me opviel was dat ik normaal gesproken in mijn kantoor ongeveer 3 draadloze netwerken ontvang (twee van mezelf en die van de buren). Maar de Surface leek zo ongeveer alle netwerken in de straat op te pikken:DSC_6533

 

4) Gebruik je e-mailadres (of ander Microsoft Live account) om je aan te melden. Windows 8 haalt dan direct je contactgegevens op en stelt de pc verder persoonlijk in. Hier had ik dus het @-teken nodig en moest ik werken via het on-screen toetsenbord.

DSC_6536

5) Daarna is het een kwestie van wachten. In mijn geval ongeveer 4-5 minuten. De apps worden geïnstalleerd en gegevens worden gesynchroniseerd. Ondertussen wordt op de Surface een filmpje met basisbediening afgespeeld en daarna wisselt het scherm telkens van kleur om aan te geven dat het installatieproces nog bezig is.

DSC_6540

DSC_6541DSC_6542

 

6) Gereed. Het Windows 8-startscherm verschijnt. Dat de synchronisatie is geslaagd, is direct te zien omdat het kleurenschema van mijn desktop Windows 8-pc is overgenomen (en niet het blauw dat ik bij de installatie koos). Ook de locatieherkenning werkt goed – het actuele weer voor mijn woonplaats werd opgehaald.

 

DSC_6544

DSC_6546

Tot mijn verbazing is in Windows RT ook een tegel Bureaublad aanwezig (ik dacht dat die hierin ontbrak, omdat je op Windows RT immers geen gewone Windows-toepassingen kunt installeren. Dit gaat nog voor heel wat vraagtekens en helpdesktelefoontjes zorgen ben ik bang!).

Hierin was in Internet Explorer zelfs al mijn standaardzoekmachine (Google) gesynchroniseerd, in plaats van de standaard zoekdienst Bing van Microsoft.

DSC_6547

Onderin de taakbalk zijn de pictogrammen voor Microsoft Word, Excel, Powerpoint en OneNote zichtbaar. Deze zijn standaard geinstalleerd op Windows RT en hoef je dus niet apart te kopen.

Ik was echter in de veronderstelling dat met Windows RT speciale Touch-versies (voorheen: “Metro”-versies) van Office zouden worden meegeleverd. Maar dat is dus niet het geval, het zijn de gewone Bureaubladversies. Vandaar misschien ook de aanwezigheid van de Bureaublad-tegel op het startscherm. Ik

4. Eerste gebruikerservaringen

Ik heb – al zeg ik het zelf – al een ruime gebruikerservaring met Windows 8. Hoewel het (nog) niet mijn standaard besturingssysteem is, werk ik al ruim een half jaar met Windows 8 en heb ik uiteraard het complete Handboek Windows 8 geschreven op een Windows 8-computer, inclusief touchscreen, de Dell ST220 T.

Maar een losse tablet zoals de Surface is toch weer wat anders. Opeens zit je op de bank in de huiskamer met Windows 8 in plaats van op je kantoor met comfortabele muis en toetsenbord onder handbereik.

Na één avondje oefenen (gisteravond) zijn dit mijn eerste indrukken:

  • Het scherm is van buitengewone kwaliteit. Helder, responsief, diep zwart. Een dikke pluim. Reageert heel goed op touch-bewegingen. Heerlijk om mee te werken.
  • De Windows-toets om terug te keren naar het startscherm geeft een kleine trilling als respons bij indrukken. Zo heb je echt het gevoel dat de tablet op je reageert. Door de plaatsing (midden op de lange zijde) ben je van nature geneigd de tablet horizontaal te houden, in tegenstelling tot bijvoorbeeld een iPad (waarbij de Home-knop midden op de korte kant zit).
  • De tablet ligt lekker in de hand. Breder en (iets) zwaarder dan een iPad, maar een lekker ‘warme’, zacht aanvoelende achterkant. Geen koud plastic of metaal.
  • De Surface-tablet is niet traag, maar toch merkbaar langzamer dan een desktopcomputer.
  • Het installeren van een aanvullende taal is goed te doen, maar verloopt ook via het bureaublad. Daardoor heb je ongemerkt toch het gevoel met een ‘pc’ te maken te hebben in plaats van met een tablet. Niet alles kan dus via de nieuwe interface. En dan moet je opeens een gewoon bureaubladvenster bedienen en manipuleren met je vingers. Dat voelt onnatuurlijk en overbodig.
  • Het downloaden en installeren van Nederlands als voorkeurstaal (130 MB taalpakket) duurt bijna een kwartier. Dat is lang.
  • Het lijkt er op dat dit voor elk account opnieuw moet gebeuren. Ik maakte een account voor de kinderen, maar dit staat standaard weer op Engels ingesteld en Nederlands staat niet genoemd in de lijst met beschikbare talen, ofschoon ik dat zojuist – voor mijn eigen account – had gedownload en geïnstalleerd.
  • In de Store staan onmiddellijk updates klaar voor belangrijke apps als Mail, Foto’s, Kaarten en andere. Dit is te zien zodra je
  • De camera’s aan voor- en achterzijde lijken vooral bedoeld voor Skypen en MSN’en. De resolutie en kwaliteit is te laag om echt video- en fotomateriaal mee te schieten.

Later meer gebruikservaringen. Mocht je ondertussen vragen of opmerkingen hebben, laat dan een reactie achter.

Peter Kassenaar
-- 3 november 2012.

23april

Mobiele apps zonder programmeren?

Er is de laatste tijd veel aandacht voor het ontwikkelen van mobiele applicaties, of kortweg apps. Niemand zal de populariteit van de iPhone, iPad en Android-telefoons en –tablets zijn ontgaan. Ik heb hier veel trainingen in verzorgd de afgelopen maanden. Steeds vaker krijg ik ook een vraag als ‘Ik wil graag apps ontwikkelen, maar heb eigenlijk geen programmeerachtergrond. Is dit een bezwaar’?

De vraag is eenvoudig genoeg. Het antwoord ligt – zoals vaak – wat gecompliceerder.

Statische applicaties

In principe is voor het maken van apps maar weinig programmeerkennis nodig. Met frameworks als MobDis (http://www.mobdis.com/tour-page/ ) of Codiqa voor jQuery Mobile (http://codiqa.com/) is in enkele stappen een mobiele user interface samen te stellen. Hiervoor kan dan zelfs al content worden ingesteld. De inhoud is dan wel beperkt tot statische tekst en afbeeldingen. Alle informatie van de app wordt rechtstreeks in het framework getypt en kan daarna worden gecompileerd naar een mobiele app. Kortom, op deze wijze heb je snel en (vrijwel) zonder programmeren een app. Tegelijkertijd is dit dan in feite niets meer dan een elektronische folder in app-formaat. Qua functionaliteit is dit vergelijkbaar met de eerste serie statische websites uit de jaren negentig van de vorige eeuw.

mobdis

Op het moment dat de app ook daadwerkelijk enige functionaliteit moet krijgen – er moeten bijvoorbeeld nieuwsberichten uit webservices worden getoond in de app of de app moet informatie kunnen onthouden, opslaan en doorgeven tussen verschillende pagina’s, of terugsturen naar een server van het bedrijf, dan ontkom je niet aan het feit dat je dit zelf zult moeten programmeren.

Kennis van alleen Dreamweaver, Photoshop of illustrator is dan onvoldoende. Immers, een app is – zoals de naam al zegt – een applicatie, oftewel een computerprogramma. En totdat processors zo slim zijn dat ze onze bedoelingen kunnen raden, moet je een computer exact, tot top de puntkomma nauwkeurig, vertellen wat je van hem verwacht. Dat proces staat al tientallen jaren bekend onder de naam programmeren :-)

Dynamische applicaties

Zodra beslist is dat een applicatie interactiviteit en functionaliteit moet bevatten zijn er verschillende keuzes die gemaakt kunnen worden. De twee belangrijkste zijn:

  • Ontwikkelen als web-app en daarna compileren met een tool als PhoneGap, AppMobi of Appcelerator. Hierbij wordt gebruik gemaakt van bekende webtechnieken als HTML, CSS en JavaScript. Dit is de eenvoudigste manier voor iemand met basis-webkennis om snel een mobiele app te maken. Maar let op: het is nog steeds programmeren. Er komt altijd minimaal een zekere hoeveelheid JavaScript bij kijken om een goed werkende app te maken, ongeacht of je een app wilt maken voor iOS, voor Android, of voor Windows Phone 7. Je hebt echter snel resultaat. In veel gevallen biedt deze werkwijze een goede kosten/baten-afweging.
  • Ontwikkelen als native app voor het doelplatform van je keuze. Je programmeert de app dan in de programmeertaal Objective C voor (Apple iOS), in Java (voor Android, Blackberry en andere), of in Xaml en C# voor Windows Phone. Dit is de krachtigste methode. Het stelt je in staat om rechtstreeks te werken met de tools die specifiek zijn gemaakt om het meeste uit de hardware te halen. Het zal echter geen verbazing wekken dat deze manier ook het meest van je kennis als programmeur vergt en een steile leercurve kent. Het ontwikkelen van apps voor meerdere platformen op deze wijze is daarnaast een prijzige methode. Want: de code die je hebt geschreven voor Apple (iPhone, iPad), laat zich niet 1:1 vertalen naar Java-code voor de andere platformen. Je moet de code dan deels opnieuw schrijven.

Naast de twee hiervoor genoemde manieren zijn er langzamerhand tal van mengvormen waarbij je met kennis van platform A kunt ontwikkelen voor platform B of omgekeerd. Een voorbeeld hiervan is het project Xamarin, waarbij je met C#-technieken (afkomstig uit het .NET-platform van Microsoft) kunt ontwikkelen voor Objective C van Apple of voor Android.

xamarin

Conclusie

De vraag ‘Ik wil graag apps ontwikkelen, maar heb eigenlijk geen programmeerachtergrond. Is dit een bezwaar?’ kan derhalve vaak worden beantwoord als:

“Nee, dat is geen bezwaar, zolang je er in dat geval tevreden mee bent dat je een uiterst eenvoudige app overhoud die behalve statische informatievoorziening geen toegevoegde kan bieden.”

In de praktijk blijkt dat bedrijven en organisaties (maar ook individuele ontwikkelaars) hier al snel ontevreden mee zijn en tegen beperkingen aanlopen. En dan zal in vrijwel alle gevallen alsnog aanvullende functionaliteit zelf geprogrammeerd moeten worden. Minimaal vereist in dat geval is JavaScript-kennis en de werking van HTML en CSS. Wie het onderste uit de kan wil halen moet zich gedegen verdiepen in het doelplatform van zijn of haar keuze.

Voor meer informatie over de mogelijkheden die in jouw situatie of uw bedrijf of organisatie het beste zijn (consultancy) of het zelf leren programmeren van cross-platform webapps (training) kun je contact opnemen voor een vrijblijvend inventariserend gesprek.

 

Peter Kassenaar
-- 23 april 2012

15september

Windows 8 installeren in Virtuele Machine

imageOp dinsdag 13 september 2011 toonde Microsoft op de BUILD-conferentie een eerste versie van Windows 8 aan het grote publiek. Verrassend was toch wel dat nog tijdens de keynote-sessie al een downloadadres werd opengesteld, van waaraf iedereen een developer preview kan downloaden. In dit artikel laat ik via een beeldverslag met veel schermafbeeldingen zien hoe u deze versie kunt downloaden en installeren in een Virtual Machine (VM).

Bezoek dev.windows.com voor het laatste nieuws over Windows 8.

Let op: een developer preview is een pré-beta versie van Windows 8. De software is beslist nog niet af en zal zeker fouten of onvolledigheden bevatten en zo nu en dan vastlopen. Het is echter wel een goede manier om kennis te maken met Windows 8. Dus als u nog ergens een oude netbook hebt liggen, of via een virtuele machine (VM) met Windows 8 wilt kennismaken, dan is dit uw kans. In dit artikel laat ik zien hoe Windows 8 wordt geinstalleerd in een VM.

Het is daarbij niet nodig het gedownloade bestand eerst op een dvd te branden en deze te gebruiken. Het mag natuurlijk wel.

Inleiding – welke Virtualisatie-opties zijn er?

Windows 8 kan worden geïnstalleerd op ‘echte’ hardware, maar ook in een virtuele machine. Hierbij gelden de volgende kenmerken voor de developer preview van Windows 8.

  • Windows 8 is niet te installeren in VMWare 7.x.
  • Windows 8 is niet te installeren op Virtual PC 2007, het virtualisatieprogramma dat met Windows 7 wordt meegeleverd.
  • Windows 8 is wel te installeren op Hyper-V, of op VirtualBox. Ik gebruik in dit artikel VirtualBox. Download en installeer Virtual Box vanaf http://www.virtualbox.org/wiki/Downloads.
  • Windows 8 kan ook worden gestart vanaf VHD (desgewenst zelfs vanaf USB-stick of externe vaste schijf). Scott Hanselmann heeft hiervan een uitstekende beschrijving gemaakt (Engelstalig).

Windows8VM_02

Windows 8 downloaden en installeren

1. Download Windows 8 developer preview bij Microsoft. Sla het .iso-bestand op op het bureaublad. In Virtual Box kunt u zowel de 32-bits als de 64-bits versie gebruiken. De bestandsomvang varieert van 2.8 GB tot 4.8 GB.

Windows8VM_01a

2. Maak de VM met VirtualBox. Start VirtualBox en kies Nieuw.

Windows8VM_03

3. Maak een nieuwe VM. Stel een naam in (bijvoorbeeld Windows 8 Developer Preview) en kies Windows 7 als gastbesturingssysteem.

Windows8VM_04

4. Stel de hoeveelheid geheugen in. Een waarde tussen de 2 en 3 GB zou voldoende moeten zijn.

5. Neem de standaardinstellingen voor een virtuele vaste schijf over. Klik 2 x op Volgende.

Windows8VM_05

6. Stel een locatie en omvang voor het vaste schijfbestand in. Ik sla de virtuele harddisks op een aparte schijf op (In D:\Virtual Machines\) en heb een omvang van 60 GB ingesteld. U kunt ook een dynamische vaste schijf gebruiken, maar dit is vaak wat langzamer.

Windows8VM_06

7. Bekijk de samenvatting en klik op de knop Create.

De vaste schijf wordt gemaakt. Dit kan enkele minuten duren (ca. 5-10 min). Dit is afhankelijk van de omvang van de virtuele schijf die u hebt gekozen en de snelheid van de harddisk waarop de virtuele schijf wordt gemaakt.

Klik na afloop nogmaals op Create. De VM is nu gemaakt, maar nog niet geïnstalleerd of gestart.

De VM instellen

1. Kies in het hoofdscherm van VirtualBox Manager de knop Instellingen om enkele extra instellingen voor de VM op te geven. Kies eerst de sectie Systeem.

  • Selecteer de optie IO APIC activeren.
  • Kies op het tabblad Processor de optie 2 CPU (alleen als uw computer dit ondersteunt, uiteraard).
  • Controleer of op het tabblad Acceleratie de opties VT-x/AMD-V activeren en Geneste Paging activeren actief zijn.

Windows8VM_07

2. Kies de categorie Beeldscherm. Schakel hier de optie 3D acceleratie activeren in. Pas eventueel ook de hoeveelheid videogeheugen aan.

Windows8VM_08

3. In de categorie Opslag kunt u het eerder gedownloade .iso-bestand met de Windows 8-installatiebestanden mounten. Van hieruit kan Windows 8 vervolgens worden geïnstalleerd. Deze stap mag u daarom beslist niet overslaan.

Windows8VM_09

Windows8VM_10

4. Bekijk de overige categorieën en breng hierin naar wens de nodige aanpassingen aan. In principe is de VM nu klaar om gestart te worden. Sluit het venster Instellingen.

5. Klik in het hoofdvenster op Start om de installatie te starten. Na enkele ogenblikken verschijnt het venster Install Windows en kunt u de gewenste installatiegegevens instellen.

Windows8VM_11

6. Kies twee keer Next en daarna Install Now. Doorloop de installatie verder door de standaardinstellingen over te nemen en telkens op Next te klikken (Let op: de installatieoptie Upgrade is niet van toepassing. Kies Custom en daarna de eerder gemaakte virtuele harddisk van 60 GB om Windows 8 te installeren).

Windows8VM_12

7. Op een vlotte computer neemt installatie niet meer dan 3-5 minuten (!) in beslag. De VM start enkele keren opnieuw op. Daarna verschijnt het bekende groene Windows 8-scherm en kunt u enkele vragen beantwoorden.

  • Geef de computer een naam, bijvoorbeeld VM_Windows8.
  • Kies Use Express Settings om snel de standaardinstellingen te kiezen. Via Customize kunt u zelf instellingen maken voor het netwerk, Windows Update, bescherming van bestanden en meer.
  • Gebruik uw Windows Live ID (e-mailadres) om in te loggen bij Windows Live en het account op de VM in te stellen. Merkwaardig genoeg duurde dit bij mij ongeveer net zo lang als de installatie van de complete Windows 8-installatie.

Windows8VM_13

Windows8VM_14

Gereed

Windows 8 is nu geïnstalleerd. U kunt aan de slag met de nieuwe gebruikersomgeving, de Live Tiles, de Metro-style User Interface van applicaties, Internet Explorer 10 en meer. In volgende blogberichten hoop ik wat meer over de eerste gebruikerservaringen te kunnen vertellen.

Windows8VM_15

Peter Kassenaar
-- 15 september 2011

31januari

Tool voor .NET-developers: CSS Agent

css_agentEen goede webdesigner zorgt uiteraard voor een correcte scheiding van structuur (HTML), opmaak (CSS) en gedrag (JavaScript). Het opstellen en onderhouden van stylesheets is er in de loop der jaren echter niet eenvoudiger op geworden. Niet alleen is het aantal mogelijke CSS-eigenschappen met de aanstaande komst van CSS3 flink uitgebreid, alle browsers ondersteunen deze eigenschappen ook nog eens met een iets andere notatie. Browsers gebruiken hiervoor specifieke voorvoegsels als –moz-, –webkit- en –o-, voor respectievelijk Mozilla Firefox, Chrome en Opera. De standaardnotaties zoals door W3C zijn voorgesteld, worden door geen enkele browser ondersteund (op een enkele uitzondering na in de betaversie van IE9).

Problemen

Deze wildgroei aan CSS-eigenschappen zorgt voor een aantal problemen:

  • CSS-bestanden worden groot.
  • CSS-bestanden worden onoverzichtelijk en daardoor moeilijker – en dus duurder – om te onderhouden.

Vooral bij mobiele apparaten, die bijna per definitie met een beperkte bandbreedte te maken hebben, is dit van belang. Het scheelt het nogal of je een stylesheet van 120KB of van 40KB moet downloaden over een 3G-verbinding.

Oplossing

Vandaag bespreken we een tool die een oplossing kan bieden voor deze problemen: CSS Agent. CSS Agent is een ASP.NET Handler die stylesheets automatisch bewerkt voordat ze naar de browser worden verzonden. Simpel gezegd doet CSS Agent twee dingen:

  • CSS Agent zorgt voor automatische browserspecfieke voorvoegsels.
  • CSS Agent zorgt voor automatische minification (compressie) van CSS-bestanden.

Als extraatje introduceert CSS Agent bovendien de mogelijkheid CSS constanten te gebruiken. Je definieert dan bijvoorbeeld bovenin je bestand eenmalig een kleur in een $variable en verderop in je stylesheet gebruik je de variabelenaam in plaats van de letterlijke kleurwaarde. Dit kan niet alleen voor kleuren, maar ook voor achtergrondafbeeldingen, margin, padding en veelgebruikte andere CSS-eigenschappen. Jazeker, ook met CSS Agent moet je nog steeds zelf de basiscode schrijven, maar de rest wordt een stuk makkelijker gemaakt.

Je hoeft bijvoorbeeld niet meer precies te weten wat de Firefox-notatie voor afgeronde hoeken is, of welke verschillende notatiewijzen voor linear-gradient gebruikt worden voor Opera, Chrome en IE. CSS Agent ondersteunt 25 CSS3-eigenschappen, variërend van background-size tot transition-timing-function. Je vind ze allemaal op de site van maker Keith Clark.

Stappenplan

Het uitgangspunt is een ASP.NET-website die draait op Internet Information Server 7 of IIS Express. Eerdere versies van IIS of de Web Development Server van Visual Studio (Cassini) worden ook ondersteund, maar blijven in dit artikel buiten beschouwing. Zie eventueel de website van de maker voor meer informatie. Ik ga er van uit dat je de site maakt en onderhoud in Visual Studio 2010 of Visual Studio Express (gratis).

  • Download het zip-bestand vanaf http://www.keithclark.co.uk/labs/cssagent/. Op het moment van schrijven van dit artikel was v1.0.0 (alpha) de meest recente versie.
  • Het zip-bestand bevat twee bestanden: CSSAgent.dll (12 kb) en een changelog.txt-bestand.
  • Kopieer de DLL rechtstreeks naar de /bin-directory van je website. Een andere manier is hem in een map op je vaste schijf te plaatsen en daarna via Add Reference een verwijzing naar de DLL op te nemen. Het voordeel hiervan is dat je in de toekomst maar op één plek de DLL hoeft te kopiëren als er een nieuwe versie verschijnt. Projecten met een referentie worden dan automatisch bijgewerkt (auto-refresh).

css_agent_BinFolder

  • Schrijf een handler in web.config. Deze sluist de .css-bestanden door naar CSS Agent om te bewerken. De handler komt in de sectie <system.webServer> van web.config.

De code voor de handler ziet er als volgt uit:

<system.webServer>
<
validation validateIntegratedModeConfiguration="false"
/>
<handlers>
<add name="CSS Agent" path="*.css" verb="GET" type="KeithClark.Web.CSSAgent" />
</
handlers
>
</
system.webServer
>

Voorbeeld

Deze twee stappen (DLL kopieren en handler toevoegen aan web.config) zijn alles wat je hoeft te doen. Schrijf nu in je CSS-bestand de code die je graag zou willen gebruiken. Stel bijvoorbeeld dat je een koptekst met afgeronde hoeken en een verlooptint als achtergrond wilt gebruiken:

h1 {
   
color: #FFFFFF
;
   
border-radius: 10px
;
   
border: 1px solid #333
;
   
background: linear-gradient(top, black, grey)
;
   
height:40px
;
   
text-align:center
;
   
padding:10px;
}

En de HTML is als volgt:

<h1>Koptekst met CSS3-eigenschappen</h1>

Je ziet dat alleen de standaard W3C-notaties voor border-radius en background worden gebruikt, zonder verdere toevoegingen. Toch ziet het voorbeeld er in Firefox uit zoals verwacht:

cssAgent_heading

Analyse in Firebug laat zien dat de browserspecifieke eigenschappen zijn toegevoegd door CSS Agent:

cssAgent_heading2

Het zal duidelijk zijn dat dit je enorm veel typewerk zal schelen. Je hoeft nu alleen nog maar de ‘echte’ W3C-schrijfwijze te onthouden, en CSS Agent zorgt voor optimalisatie van deze, en nog 23 andere eigenschappen voor de verschillende browsers.

CSS minification

Door aan de verwijzing naar je .css-bestand de optie –min toe te voegen, zorgt CSS Agent voor automatische compressie (minification) van je stylesheet. De spectaculaire ruimtewinst die dit met zich meebrengt laat zich het best illustreren door een stylesheet uit een live site (in mijn voorbeeld: www.yindo.nl) te gebruiken:

In de pagina (of Master Page van de site) staat bijvoorbeeld de volgende code:

<link href="css/yindo.css" type="text/css" rel="stylesheet" />

Maak hiervan

<link href="css/yindo-min.css" type="text/css" rel="stylesheet" />

Analyse

Als je de pagina laadt, zul je geen verschil merken in vormgeving. Maar als je de resultaten op de achtergrond analyseert, zie je dat er veel veranderd is. Met de HTTP Debugging tool Fiddler is dit goed te zien.

cssAgent_fiddler1

Als de ‘gewone’ stylesheet wordt geladen, is de omvang ruim 15,3 KB (zie voorgaande afbeelding, klik eventueel voor een vergroting). De inhoud van de stylesheet is plain text en ziet er op deze manier uit:

cssAgent_fiddler2

Als in de Master Page de verwijzing wordt aangepast in yindo-min.css, wordt het beeld heel anders:

cssAgent_fiddler3

Het stijlenbestand is nu nog maar 2,9 KB in omvang. Een besparing van meer dan 75%! De code is sterk gecomprimeerd, zoals de tekstweergave laat zien.

cssAgent_fiddler4

Voor het menselijk oog is dit niet meer leesbaar, maar computers weten hier prima raad mee. Het bestand  yindo-min.css wordt door CSS Agent gecached op de server en alleen opnieuw gegenereerd als het originele .css bronbestand wordt gewijzigd. Je hoeft er dus niet bang voor te zijn dat de stylesheet elke keer wordt gecomprimeerd en zo voor extra belasting op de server zorgt. De foutmelding die Visual Studio toont (‘kan yindo-min.css niet vinden’), mag je rustig negeren.

Wat mij betreft is de keuze snel gemaakt. Vanaf dit moment gebruik ik CSS Agent voor elk nieuw project!

Aandachtspunten

Er zijn enkele aandachtspunten bij het gebruik van CSS Agent

  • CSS Agent werkt niet met inline CSS. Een <style>…</style> blok in een pagina wordt dus niet geparsed. Je zult moeten werken met gekoppelde CSS-bestanden, via <link href=”…” />. Alleen dan wordt het stylesheet door de handler goed opgepikt.
  • Het is een typische .NET-tool en bedoeld voor ASP.NET/IIS-websites. CSS Agent is daarmee niet geschikt voor PHP/MySQL/Apache-websites.
  • Het werken met Cassini (de ingebouwde Development Web Server van Visual Studio) kan problemen geven. Ik – en enkele andere developers - kregen hem in elk geval niet aan de praat, ondanks aanwijzingen van Keith Clark (zelf had hij er geen problemen mee, en kon de bug niet reproduceren). Maar het is sowieso ondertussen een goed idee om over te stappen op het nieuwere IIS Express.
  • CSS Agent is (nog?) niet beschikbaar via de NuGet Gallery. Je zult dus zelf het bestand moeten downloaden en installeren/referencen. Clark gaf aan dat hij de mogelijkheden hiervoor in de toekomst zou bestuderen, maar dat het voorlopig geen hoge prioriteit had.

Conclusie

CSS Agent is absoluut een tool die de moeite waard is. Het maakt je leven als developer een stuk eenvoudiger, in elk geval totdat de browsers overeenstemming hebben bereikt over de voorvoegsels. Daarna blijft CSS Agent nog nuttig om stylesheets automatisch te comprimeren en het werken met CSS contstants mogelijk te maken (niet besproken in dit artikel).

Tip: als je deze tool ook gaat gebruiken, overweeg dan een donatie aan de maker: Keith Clark vraagt een bescheiden bijdrage van GBP 5,- om de verdere ontwikkeling van deze tool mogelijk te maken.

Peter Kassenaar
-- 31 januari 2011

24januari

WebCamps 2011 – deelnemerservaring

webcampbadge100Om de ontwikkelingen op mijn vakgebied bij te houden, moet ik uiteraard regelmatig bijscholen. Dit doe ik onder meer door doorlopend door Twitter en LinkedIn-groepen bij te houden, (ontwikkel-)blogs te lezen en natuurlijk de maandelijkse tijdschriften te lezen. Maar ook door een à twee keer per jaar een conferentie te bezoeken. Vorig jaar was wat dat betreft een hoogtepunt, toen ik in april 2010 bij de Launch-conferentie van Silverlight 4 en Visual Studio 2010 in Las Vegas aanwezig was (zie mijn aparte blog hierover).

Maar dat is al weer bijna een jaar geleden. En in een jaar verandert er veel op internetgebied. Afgelopen week bezocht ik daarom samen met collega-auteur en –programmeur Michiel de Rond het puur op ontwikkelaars gerichte Microsoft WebCamp in Utrecht.

WebCamps

De Microsoft WebCamps zijn tweedaagse, gratis conferenties waarin in hoog tempo de laatste ontwikkelingen worden besproken. Uiteraard is de inhoud voornamelijk gericht op Microsoft-technologieen. Maar er is ook steeds meer aandacht voor de open standaarden, zoals HTML5, jQuery en meer. Sterker nog, zoals hoofdspreker Scott Hanselman het verwoorde, ‘ ja, we praten deze dagen bijna alleen maar over Microsoft-technologie. Maar tegelijkertijd is ruim 90% open source. Van alles wat we deze dagen bespreken, van jQuery tot MVC3, tot NuGet, kun je de broncode downloaden, inzien, verbeteren teruggeven aan de community. Micrsoft nowadays is not nearly as evil as you guys think we are. Or maybe even, as we used to be’. Dat was nog eens een hand in eigen boezem om de dagen mee te beginnen. En het schiep hooggespannen verwachtingen (ter vergelijk: lees nog eens mijn verslag van de Apple iPhone Tech Talk uit november 2008. Naar aanleiding van dit blog werd mij door Apple met juridische stappen gedreigd en ik heb niet de indruk dat dit beleid sindsdien is aangepast).

Alle presentaties, codevoorbeelden, labs en begeleidende papers van deze twee dagen is voor iedereen downloaden vanaf www.webcamps.ms/.

IMG_1560
Drew Robbins (li.) en Scott Hanselman voor de start van de eerste dag in De Fabrique, Utrecht.

Scott Hanselman

Met Scott Hanselman heeft Microsoft er voor gekozen een van zijn top-sprekers af te vaardigen. Een ijzersterke zet, wat mij betreft. Na vice president Scott Guthrie (ja, bij Microsoft is het kennelijk een pre als je Scott heet, om hogerop te komen in de hierarchie :) is Hanselman waarschijnlijk degene die het meest weet van alle technologieën die door Microsoft worden bedacht, uitgevoerd en in hoog tempo op de wereld worden losgelaten. En dat zijn er nogal wat. Alleen al het lijstje met nieuwe onderdelen en componenten op de eerste dag werd behandeld, zag er als volgt uit:

  • WebMatrix – een nieuwe ontwikkeltool met een lage instapdrempel. Geschikt voor iedereen die ‘ echt’ wil programmeren, maar niet direct bij het topproduct Visual Studio wil instappen.
  • MVC3 – de volgende versie van het steeds meer aan belang winnende Model-View-Controller framework. De basics werden besproken, daarna ook de meer complexe nieuwe onderdelen als dependency injection, Custom validation en Custom Action filters.
  • NuGet – een nieuwe manier om snel open source libraries uit de community(inclusief dependencies) aan je project toe te voegen.
  • HTML Helpers – voor MVC-projecten.
  • Razor – een nieuwe View Engine met eenvoudig(er) syntaxis voor MVC-projecten.
  • Entity Framework 4 – een nieuwe manier om data te modellen in classes (een ORM-tool), die in veel opzichten beschouwd kan worden als de opvolger van DBML/Linq-to-SQL. Drie benaderingen werden besproken: Model First, Code First en Database First
  • Unobtrusive AJAX en client validation  – voor jQuery en MVC-projecten.

Hanselman werd vergezeld door Technical Evangelist Drew Robbins, specialist op het gebied van PHP, Ruby, IIS en ASP.NET. Met zijn tweeen voerden ze een perfecte show op, waarbij Robbins - geheel volgens afspraak- met verve de rol van second banana (aangever in Amerikaanse talkshows) speelde.

IMG_1569
Robbins en Hanselman bespreken iPhone 4 vs. Windows Phone 7-opties tijdens de lunch

Hoewel, het woord ‘show’ is hierbij misschien een beetje misplaatst. Jazeker, er werd –zeker in het eerste uur- veel en uitbundig gelachen, maar ondertussen loog het tempo van de demo’s en de slides er niet om. In hoog tempo passeerden tal van onderwerpen de revue. Hanselman is een van die weinige geeks die tegelijk ook een perfect, onderhoudend, enthousiasmerend en toch kraakhelder betoog kan neerzetten en rap van de tongriem gesneden is (over een van de slides vol overbekende brochureplaatjes met tal van lachende mensen rond een pc  ‘I don’t know what this is, probably marketing bullshit. Just look at those clip art girls. Next.’).

Tijdens de presentaties kon je via Twitter vragen stellen, die dan direct beantwoord werden. Or you can just raise your hands, I guess. It’s a bit analogue, but I suppose it will do, aldus Hanselman, met een vette grijns.

Dag 2 – Hands on labs

Dag 2 van de webcamps was geheel ingeruimd voor hands on labs. Voor alle behandelde onderwerpen (en meer) waren voorbeeldwebsites en stap-voor-stap oefeningen aanwezig die je zelfstandig kon uitvoeren op je eigen laptop. Daarvoor was een zaal ingericht met stroompunten en draadloos internet. Een apart gezicht. Het leek inderdaad wel een LAN Party, maar dan voor programmeurs, zoals een van de aanwezigen twitterde. Er liepen veel medewerkers van Microsoft Nederland rond, en uiteraard waren ook Hanselman en Robbins weer van de partij. Zij hielpen je als je vragen had en beantwoorden ook vragen over projecten waar je zelf aan werkte op dat moment. Een hele dag helpdesk op het hoogste niveau.

IMG_1572
Hands on Labs op sfeervolle locatie – dag 2 – koffie & cola onder handbereik

IMG_1563

Ikzelf heb me deze dag met name gericht op MVC3 – het was mijn eerste kennismaking met dit type programmeermodel en het vergt een heel andere manier van denken over het ophalen en presenteren van data. Modellen maken, deze met een Controller bewerken en het resultaat in een View tonen in je website. Een hele omschakeling als je –zoals ik- al bijna 10 jaar gewend bent te werken met ASP.NET WebForms (naast uiteraard kale HTML, jQuery en CSS). Ook heb ik meer geleerd over Entity Framework en NuGet. Items die me in mijn dagelijks werk voor Yindo en andere projecten goed van pas zullen komen.

Links

Tot slot een paar handige links. Zoals was veel inhoud als open source beschikbaar. Dat gold ook voor de presentaties, voorbeeldcode, labs, tools en andere assets die deze dagen werden gebruikt. Hier zijn enkele adressen.

Peter Kassenaar
-- 22 januari 2011

P.S: waarom over deze bijeenkomst een blogartikel geschreven? Wel, deels opnieuw vanwege een wijsheid van Hanselman: ‘If you’ve got something to share or to remember, don’t e-mail it, don’t stuff it in a folder on your harddrive, but blog it. It might be to interest of others, and best of all, you can always Google yourself.

Waarvan akte.

webcampbadge400

30september

Softwaretip: synchroon scrollen in Word

Tags: | Categories: Software
E-mail | Permalink | Reacties (1) | Post RSSRSS comment feed

Pictogram Microsoft Word Je bent nooit te oud om te leren, zo blijkt maar weer eens. Gisteren kwam ik een handigheidje op het spoor waarvan ik wilde dat ik hem eerder had ontdekt. Het blijkt in Word mogelijk om twee documenten naast elkaar te openen en deze synchroon te laten scrollen. Dit kan buitengewoon praktisch zijn bij het reviewen van documenten, waar je bijvoorbeeld je eigen versie (origineel) vergelijkt met de aantekeningen van een redacteur of reviewer. Door synchroon scrollen in te schakelen kun je in het ene document omhoog of naar beneden bladeren, terwijl het andere document automatisch mee schuift.

Werking

Het proces zoals hier beschreven werkt in Word 2007 en Word 2010. Waarschijnlijk is het in eerdere versies van Word ook mogelijk, maar daarvan ken ik de bijbehorende menuopdracht niet.

  1. Open het eerste document in Word (bijvoorbeeld je eigen, originele bestand).
  2. Open het tweede document (bijvoorbeeld het bestand met aantekeningen van de redacteur).
  3. Kies in het eerste document in het Lint de tab Beeld.
  4. Klik op Naast elkaar weergeven.
    • Als er nog meerdere documenten zijn geopend, vraagt Word in een extra venstertje welk document samen met het huidige bestand weergegeven moet worden.
      word01
  5. De documenten worden naast elkaar gezet. Klik indien nodig op de knop Synchroon schuiven (deze wordt als het goed is vanzelf aangezet).
    word02
  6. Scrollen maar! De bestanden lopen synchroon van boven naar beneden. Uiteraard kun je het document bewerken zoals je gewend bent. Klik nogmaals op deze knoppen om het synchroon schuiven weer uit te schakelen.

Het beeldscherm ziet er hierbij bijvoorbeeld als volgt uit:

Word - synchroon schuiven

Ik hoop dat je wat aan deze tip hebt,

Peter Kassenaar
30 september 2010.

07juli

Dreamweaver CS5 – upgraden of niet?

 

 

Cover Handboek Dreamweaver CS5 Vorige maand is het Handboek Dreamweaver CS5 verschenen. In de aanloop naar het verschijnen hiervan schreef ik een aantal columns voor de nieuwsbrief van computerboek.nl.

De laatste column wil ik hier graag herpubliceren, omdat ik nog regelmatig vragen krijg over het wel-of-niet-upgraden naar een nieuwe versie van software. Hopelijk is dit artikel hierbij een beetje behulpzaam.

Dreamweaver CS5 – upgraden of niet?

Gedurende de afgelopen verkiezingsperiode was de onlinedienst Stemwijzer.nl ongekend populair. Bij de stemwijzer kan een bezoeker over dertig politieke stellingen zijn mening geven. Aan het eind van de rit rolt er een advies uit, welke partij het beste bij zijn of haar voorkeur past. De stemwijzer geeft een onbevooroordeeld oordeel over de voorkeur van de bezoeker. Dat is natuurlijk veel objectiever dan de verkiezingspropaganda van de partijen zelf.

Nu bestaat er niet zoiets als een stemwijzer voor software. Dat is wel eens jammer, want regelmatig krijg ik van lezers en cursisten de vraag 'of upgraden de moeite waard is'. Want iedereen weet natuurlijk wel dat wanneer je die vraag voorlegt aan de softwareboer zelf, het antwoord altijd 'ja, natuurlijk. Liever gisteren dan vandaag!' luidt.

Ook voor Dreamweaver CS5 is deze vraag de laatste weken al weer verschillende keren voorbij gekomen. Daarom bij gebrek aan een CS5-stemwijzer, hierbij mijn onbevooroordeeld en hopelijk nuttig advies.

1. De belangrijkste toevoeging aan Dreamweaver CS5 is zonder twijfel de ondersteuning voor CMS'en zoals Joomla!, Drupal en WordPress. Als u daarom regelmatig sites ontwikkelt met deze systemen of hier templates voor bouwt, dan is de upgradevraag een 'no-brainer'. Direct doen. Liever gisteren dan vandaag. De opties om CMS-sites in Live View direct binnen Dreamweaver te tonen en te bewerken zijn enig in zijn soort in webdesignland.

2. Gebruikt u Dreamweaver om dynamische sites en webapplicaties met PHP te onderhouden? Ook dan kan de upgradevraag zonder twijfel positief worden beantwoord. De Dreamweaver-mogelijkheden voor codehinting en inzicht in PHP-klassen en objecten begint eindelijk volwassen te worden. Sneller werken en veel minder typefouten en opzoekwerk maken een upgrade al snel de moeite waard.

3. Hetzelfde kan worden gezegd als u regelmatig JavaScript-bibliotheken gebruikt in uw sites. Denk hierbij aan tools als jQuery, MooTools en (uiteraard) Adobe Spry. De JavaScript-ondersteuning is vergelijkbaar met die van PHP, en biedt in CS5 ook codetips, aanvulling van functieparameters en meer. Helaas ontbreekt een JavaScript-debugger nog in de Live View van Dreamweaver CS5, hiervoor moet u alsnog omzien naar gespecialiseerde tools van Mozilla Firefox (Firebug) of Internet Explorer.

4. Adobe geeft ook hoog op van de verbeterde CSS-controle. Nu is het zeker handig dat u binnen de Dreamweaver-ontwerpomgeving het (visuele) effect kunt beoordelen van het selectief in- en uitschakelen van CSS-regels. Tegelijkertijd zijn de mogelijkheden vooralsnog beperkter dan in Firebug of vergelijkbare tools. Relatief eenvoudig CSS-opmaakwerk kan nu binnen de Dreamweaver-werkomgeving en dit bespaart zeker roundtrips naar de browser. Maar bij meer ingewikkelde lay-outs of CSS-opties moet u toch alsnog schakelen naar een externe tool en gaat de tijdwinst verloren. Daarom: als u nu tevreden bent met de combi Dreamweaver CS4 (of eerder) en aanvullende externe CSS-tools, dan is een upgrade voor wat betreft dit onderdeel niet beslist noodzakelijk.

5. Nieuw zijn ook de CS-Live diensten in Dreamweaver, zoals Adobe Browserlab, SiteCatalyst NetAverages en Acrobat.com . Ofschoon dit stuk voor stuk beslist nuttige toevoegingen zijn, acht ik ze niet van dusdanig 'must-have'-niveau dat ze een upgrade verplicht maken. Als u hierop uw hoop had gevestigd, bekijk dan eerst op de site van Adobe of u werkelijk niet zonder deze diensten kunt. Ze zijn ook zonder Dreamweaver CS5 te gebruiken (met CS4 bijvoorbeeld). Alleen zijn ze in CS5 handig gebundeld onder één knop. Da's alles.

6. De ondersteuning voor Photoshop-bestanden, andere externe media en samenwerking met overige Adobe-producten is ook in eerdere versies van Dreamweaver al zeer goed. Deze zijn in CS5 op een vergelijkbaar niveau gebleven. Hetzelfde geldt voor het maken van 'gewone' statische websites met behulp van HTML, CSS, afbeeldingen, sjablonen enzovoort. Als dit uw dagelijks werk is, dan kunt u de upgradeprijs beter in uw zak houden. Dergelijk werk is in CS5 fantastisch geregeld, maar was ook eerder al erg goed.

Hopelijk helpt dit u bij uw beslissing of een upgrade de moeite waard is. Rest nog de vraag of de aanschaf van een boek om te leren werken met Dreamweaver CS5 noodzakelijk is. Ook daarvoor kan ik u een prima advies geven, zij het dit keer niet geheel onbevooroordeeld.

Ja, natuurlijk! Liever gisteren dan vandaag. Het 'Handboek Dreamweaver CS5' lijkt mij een uitstekende keuze. ;-)

Peter Kassenaar.
7 juli 2010

28juni

Handboek Dreamweaver CS5

Tags: | Categories: Boeken | Software
E-mail | Permalink | Reacties (2) | Post RSSRSS comment feed

Cover Handboek Dreamweaver CS5Deze  week is het Handboek Dreamweaver CS5 verschenen. Dit Handboek is de logische opvolger van het Handboek Dreamweaver CS4 en bespreekt het maken van websites met Dreamweaver CS5 vanaf het startpunt. Er is veel veranderd in Dreamweaver CS5 en de manier waarop nieuwe sites worden ingesteld is daar één van. Hier krijgt u dus direct mee te maken.

Het boek is bij uitstek geschikt voor de beginnende webdesigner die nieuwe sites wil maken – of bestaande sites wil gaan onderhouden – met Dreamweaver CS5. Naast de basishandelingen voor het opzetten van websites, worden ook meer gevorderde onderwerpen besproken, zoals het zelf maken van webformulieren en het werken met een Content Management System (CMS) vanuit Dreamweaver CS5

Specificaties

  • Boek, paperback, 438 pagina’s
  • Geschikt voor Nederlandse en Engelstalige versie van Dreamweaver CS5
  • Geschikt voor Windows en Macintosh
  • ISBN-13: 9789059404779
  • Prijs: EUR 24,90

Van de flaptekst

“ Adobe Dreamweaver CS5 is een krachtig gereedschap om websites mee te ontwikkelen. Veel professionals maken gebruik van deze software. Dreamweaver CS5 is zowel voor beginners als gevorderde webdesigners de eerste keuze als het gaat om het ontwerpen van nieuwe websites of het bijhouden van bestaande sites. Dreamweaver biedt brede ondersteuning voor moderne technieken als het vormgeven en opmaken met Web 2.0 en AJAX.

In dit 'Handboek' laat Peter Kassenaar u aan de hand van vele praktische voorbeelden en workshops zien hoe u snel een professioneel ogende website opzet en onderhoudt. Daarbij wordt ook uitgebreid stilgestaan bij achterliggende ontwerptechnieken en de workflow rond het maken van een site.”

Beknopte inhoudsopgave

Tot de behandelde onderwerpen behoren:

  • kennismaken met de Dreamweaver-werkomgeving en de nieuwe mogelijkheden
  • Basishandelingen om een website op te zetten die is gebaseerd op sjablonen
  • bestanden, mappen en uw site beheren
  • teksten opmaken en kennismaken met CSS
  • pagina’s vormgeven en afbeeldingen toevoegen
  • Photoshop-afbeeldingen invoegen en bewerken
  • Werken met AJAX-technieken zoals een Spry-menu en Spry-accordeon
  • Formulieren maken
  • Flash-media invoegen
  • Dreamweaver CS5 gebruiken in combinatie met een CMS (WordPress)

Oefenbestanden

In het boek staan tal van workshops om ook daadwerkelijk met Dreamweaver aan de slag te gaan. Het is typisch een boek om naast het toetsenbord te leggen en zelf mee te oefenen. Het boek is daarmee buitengewoon geschikt voor opleidingen of zelfstudie. De oefenbestanden zijn te downloaden als één groot zip-bestand. Hierin staan de afzonderlijke zipbestanden met de oefenbestanden gerangschikt per hoofdstuk.

Oefenbestanden Dreamweaver CS5.zip (21 MB)

Hebt u het boek gelezen en heb je er opmerkingen over ter verbetering van een eventuele volgende druk? Of wilt u andere lezers laten delen in uw ervaringen? Laat dan een berichtje achter.

-- Peter Kassenaar
28 juni 2010

Tip: bent u bekend met het ontwikkelen van standaard, ‘statische’ sites in Dreamweaver? Kijk dan ook naar het Handboek Dynamische websites met Dreamweaver. Hierin wordt het maken van een dynamische website met databases en formulieren besproken. Ofschoon dit boek al wat ouder is, kan het prima als opvolger van het Handboek Dreamweaver CS5 worden gelezen.