Twitter is in korte tijd erg populair geworden. Maar het is niet altijd makkelijk om nieuwe volgers te vinden. Om het bezoekers van je site of weblog zo makkelijk mogelijk te maken je te volgen op Twitter, kun je sinds kort eenvoudig een Volg mij-knop samenstellen.

Een voorbeeld hoe dit er uitziet, zie je in de rechter kolom van deze website:

De werkwijze hiervoor is erg eenvoudig en vind je op de Twitter-site zelf.

1. ga naar Twitter.com en zorg er voor dat je bent ingelogd.

2. Klik in de rechterkolom op Twitter Follow Button. Als je Twitter op Nederlands hebt ingesteld, is deze knop op het moment van schrijven van dit blog niet zichtbaar.  Kies via Instellingen de Engelse weergave van Twitter om deze knop te zien.

3. Je kunt ook de rechtstreekse URL gebruiken voor de volgknop: http://twitter.com/about/resources/followbutton.

4. Typ je gebruikersnaam en kies de overige instellingen: de taal die je wilt gebruiken, het kleurschema en of je aantal volgers wilt tonen. Het scherm ziet er als volgt uit:

5. Dubbelklik in het vak met code dat rechts staat en kopieer de code met Ctrl+C of Cmd+C (Mac) naar het klembord.

6. Ga naar je editor (Dreamweaver, Visual Studio of andere website-editor) en plak deze code op de plaats waar je de volgknop wilt laten verschijnen. De code kan er bijvoorbeeld als volgt uitzien:

<a href="http://twitter.com/{screen_name}" class="twitter-follow-button" 
data-show-count="false"
data-lang="nl">Follow @PeterKassenaar</a>
<script src=http://platform.twitter.com/widgets.js 
type="text/javascript"></script>

7. Vergeet daarna niet om in de code {screen_name} te vervangen door je eigen gebruikersnaam. In mijn geval wordt dus : PeterKassenaar.

8. Sla de pagina op en plaats hem via FTP op je website. Vanaf dat moment kan iedereen die je website bezoekt zich met één klik op de knop aanmelden als nieuwe volger.

Veel succes er mee en veel nieuwe volgers toegewenst!

Tip

Bekijk de pagina About / Resources bij Twitter voor meer opties. Je vindt hier ook handleidingen om een tweetknop op je eigen site te plaatsen, verschillende logo’s en een optie om widgets op je site te tonen: http://twitter.com/about/resources

Peter Kassenaar
-- 30 augustus 2011

Vorige week bezocht ik namens Yindo het e-reading event 2011 in Mechelen, Belgie. Het e-reading event is een vakbeurs voor iedereen die met e-reading, e-books en digitaal publiceren van content te maken heeft (zie het verslag van eLinia). Yindo hoort daar als cloud-based leesplatform uiteraard thuis. Behalve op de stand uitleg geven over Yindo en bij te praten met vakgenoten kon ik ook een paar sessies bezoeken.

“Elke uitgever wil een app”

Een van de items die mij opviel was dat veel uitgevers en andere professionals de app zo ongeveer heilig hebben verklaard. Enigszins gechargeerd kun je zelfs stellen dat de algemene gedachte was ‘als je geen app hebt, besta je niet’. Ik zie dit ook dagelijks in mijn Twitter-timeline. Als het over ‘digitaal uitgeven’ gaat, wordt hier in negen van de tien gevallen een app mee bedoeld.

Zo ook op het e-reading event. Tijdschriften moeten in een app, kranten moeten in een app, boeken moeten in een app. Een app moet abonnementen verkopen en losse exemplaren kunnen verkopen, een app moet advertenties kunnen verkopen, een app moet... Nou ja, de trend is duidelijk. Er waren stands van fabrikanten die App Software aan de man brachten (waaronder Woodwing en Adobe Digital Publishing Suite) en meer. En:

hier begrijp ik nou werkelijk helemaal niets van.

Ik snap niet dat uitgevers, wier type content bij uitstek geschikt is om in standaard webformaat te distribueren zich zo willoos uitleveren aan de nukken en grillen van Apple om maar vertegenwoordigd te zijn in het stuwmeer van ondertussen 500.000+ apps (and counting) en tegelijkertijd verwachten daar ook nog op te vallen en geld te verdienen.

Stelling

Mijn stelling is ‘apps voor uitgevers zijn in 95% van de gevallen overbodig’. Daarentegen: een geoptimaliseerde website is dé aangewezen manier om content te distribueren op mobiele apparaten zoals iPad en Android-tablets.

Let op: ik zeg niet dat álle apps overbodig zijn of altijd vervangen kunnen worden door een webgebaseerde variant, maar wel dat apps voor uitgevers in de meeste gevallen de moeite van de investering niet waard zijn. Dat geld kan veel beter worden besteed aan een geoptimaliseerde mobiele website.

Laat ik dit toelichten door eerst een stapje hoger te gaan kijken en de voor- en nadelen van native apps versus web apps te vergelijken. In het (uitmuntende!) boek Building iPhone apps with HTML, CSS and JavaScript noemt Jonathan Stark onder meer de volgende kenmerken (uitgebreid een aangepast aan de huidige omstandigheden door ondergetekende)

Voordelen van native apps

• Verkrijgbaar via de App Store, een bekend mechanisme voor alle miljoenen iPad-bezitters, te installeren met een muisklik. Je app is instant beschikbaar voor een potentieel miljoenenpubliek.
• Een native app biedt toegang tot alle specifieke hardwarekenmerken van het apparaat: accelerometer, camera, microfoon, videokaart, luidsprekers, enzovoort.
• Programmeurs kunnen een bekende programmeeromgeving (XCode) gebruiken met mogelijkheden voor simulatie, debugging en standaard interfacecomponenten (sliders, vensters, knoppen, menubalken en dergelijke).
• Er is meestal geen netwerkverbinding noodzakelijk om app te kunnen starten (ofschoon voor het ophalen van webcontent uiteraard wel een internetverbinding nodig is, anders blijft de user tegen een leeg scherm met een draaiende indicator ‘loading...’ aankijken).

Nadelen van native apps

• Je moet betalen om te mogen ontwikkelen onder de Apple licentie en om je app in de App Store te mogen publiceren.
• Je moet afwachten of je app wordt goedgekeurd, er zijn geen garanties over de termijn waarbinnen dit gebeurt en wanneer je app vervolgens in de App store verkrijgbaar is.
• Als de app eenmaal in de store beschikbaar is, moet hij concurreren met honderduizenden gelijksoortige apps. Je moet veel moeite doen om op te vallen.
• Je bent overgeleverd aan de nukken en grillen van Apple met betrekking tot de voorwaarden van app developmet (en deze worden nogal eens –onaangekondigd – gewijzigd volgens het principe ‘We kondigen twee forste stappen verzwaring aan, en zwakken dat later af tot één forste stap, iedereen blij’).
• Als je een bug ontdekt, is er geen manier om dit snel te herstellen. Je moet de app dan opnieuw indienen en opnieuw de goedkeuringsmachine afwachten. Het kan weken duren voordat je gefixte app in de store verschijnt.
• Het ontwikkelproces is daarmee traag en langdurig. Je moet er bovendien rekening mee houden dat lang niet alle users altijd hun apps zullen updaten. Je moet dus verschillende versies (blijven) ondersteunen en debuggen/bugfixen.
• Bestaande businessmodellen zijn vaak niet bruikbaar binnen apps. Je moet je plooien naar het prijsmodel van Apple, het advertentiemodel van Apple en het abonnementenmodel van Apple. Je keuzevrijheid hierin is zo goed als nihil.

Voordelen van web apps

• Webdevelopers kunnen hun eigen bekende tools blijven gebruiken (Dreamweaver, Photoshop Visual Studio, Notepad, enzovoort).
• Je huidige programmeerkennis van HTML, CSS en JavaScript volstaat om volwaardige web apps te maken. Steeds meer vormgevingstools (Adobe InDesign, Corel-tools) kunnen publiceren naar HTML-formaat.
• Je ontwikkelomgeving mag je zelf kiezen (pc, Mac, Linux).
• Je applicatie zal draaien in elke device met een webbrowser. Niet alleen op iPhone/iPad.
• De ontwikkelcyclus is snel. Bug ontdekt? Fix de code op de server en iedereen profiteert daar instant van.
• Alle users gebruiken dezelfde versie van de app.
• Inmiddels mogelijkheden beschikbaar voor caching en offline gebruik van de app (ofschoon de hoeveelheid data hierbij vooralsnog beperkt is)

Nadelen van web apps

• Native hardware van het iDevice (camera, speakers, accelerometer) is niet beschikbaar/bereikbaar.
• Als je betaalmodellen binnen je app wilt, of voor het gebruik van de app wilt laten betalen, zul je dit zelf moeten programmeren.
• Het is lastiger dezelfde gebruikerservaring (slide, scroll, pinch/zoom) en User Interface-conventies te bieden als met een native app. Performance van web apps in in het algemeen geringer dan van native apps.

Als je nu de voor- en nadelen van een native app op een rijtje zet, dan blijkt dat native apps bij uitstek geschikt voor specifieke doeleinden: games, ultieme multimediale ervaring, applicaties waarbij toegang tot de hardware van het iDevice onontbeerlijk is: foto-applicaties, kalender- en zakelijke applicaties, muziektoepassingen (hoewel toegang tot deze gegevens door Apple zeer beperkt is. Je mag alleen werken via de door Apple ter beschikking gestelde API’s).

En uitgevers?

Als we nu kijken naar het type content dat uitgevers willen exploiteren, dan is dit in de meeste gevallen: eigen tekst, beeld en visueel rijk opgemaakte content (met kolommen, insets, aflopende illustraties, diverse lettertypen). In enkele gevallen zal daar –tamelijk eenvoudige – multimedia aan te pas komen: animaties, audio- of videofragmenten.

En, uitgevers, wees eens eerlijk, iedereen praat wel over de interactieve, verrijkte e-boeken en alle mogelijkheden die dit gaat geven en ‘die alleen een app kan bieden’ als meerwaarde boven het traditionele e-book. Maar wie heeft die rijke, interactieve e-boeken al gemaakt? Juist. Niemand dus. Want het maken en samenstellen van verrijkte e-boeken blijkt verrekte lastig en bovendien erg duur. Dat is onbetaalbaar in een wereld waar een app van 1,99 euro al als ‘duur’ wordt beschouwd en waar de teller maximaal tot enkele honderden betaalde downloads zal oplopen.

En vervolgens moet je ze de volgende maand – in het geval van een magazine – opnieuw tot aankoop zien te verleiden. Op een aantal pioniers na (tevens: Timo en het toverboek), die behoren tot de vijf procent die ik hierboven als uitzondering heb genoemd is het maken van een app daarom feitelijk geen voor de hand liggende keuze.

De overgrote bulk van alle inhoud bestaat uit de hiervoor genoemde inhoud. Tekst (dat vooral, zowel fictie als non-fictie en proza), afbeeldingen en eenvoudige multimedia. Bij uitstek het type inhoud waar HTML, CSS en JavaScript voor gemaakt is!

Webstandaarden For The Win

De iPad (maar ook de Android tablets) zijn zonder uitzondering voorzien van moderne browsers die overweg kunnen met de nieuwste standaarden op het gebied van HTML5 en CSS3.

Qua opmaakmogelijkheden zijn Mobile Safari en Google Chrome verder dan hun desktop-tegenhangers. Hier kun je bij het ontwerp van je web app goed gebruik van maken. Zaken als soepel scrollen, hardware-acceleratie van afbeeldingen (!) en CSS3-animaties gaan mobiel veel beter dan op de desktop (waarbij de ontwerper zoals bekend ook rekening moet houden met oude versies van Internet Explorer en Mozilla Firefox). Tablets hebben op dit gebied geen historie, omdat ze nog maar zo kort bestaan. Voor de webdeveloper is dat prettig, want hij weet zeker dat zijn moderne code goed uitgevoerd zal worden.

HTML5

Elke moderne mobiele web app zal gebaseerd worden op de nieuwe webstandaarden voor HTML5. En ofschoon deze nog niet gereed is, zijn veel onderdelen al gewoon bruikbaar. Elke mobiele browser ondersteunt de specifieke tags waar uitgevers in web apps behoefte aan hebben, zoals <article>, <section>, <aside>, <header> en <footer> voor artikelen en sectionering van inhoud en <audio> en <video> voor multimedia. Alle ingrediënten voor een succesvolle mobiele web app voor uitgevers zijn dus ruimschoots voorhanden.

Mobiele frameworks

Ik wil overigens niet de suggestie wekken dat het maken van een geoptimaliseerde mobiele versie van de site versus de ontwikkeling van een native app primair een kwestie van kostenbesparing is. De huidige generatie webdesigners, gespecialiseerd in desktopontwerp en –CMS’en, redden het niet met hun HTML- en CSS-kennis. Je komt van een koude kermis thuis als je denkt dat je alleen maar in Dreamweaver een paar extra mediaqueries en CSS-rules hoeft te schrijven. Gedegen studie en veel testwerk blijven noodzaak. En gespecialiseerde mobiele front-end designers zijn nog schaars. En dus duur. Het schrijven van geoptimaliseerde HTML5 en CSS3 is een vak apart.

Wel zijn er ondertussen een aantal frameworks gereed die het leven van de mobiele webdesigner wat makkelijker maken. Dit zijn bijvoorbeeld

• jQuery mobile
• Sencha Touch
• HTML5 boilerplate (niet specifiek voor mobile design, maar wel erg geschikt)

Conclusie

Voor Yindo hebben we al in een vroeg stadium gekozen een geoptimaliseerde mobiele versie van de website in plaats van een native app. Deze is zeker nog niet perfect – zo is de combinatie van swipe, pinch & zoom is een lastig issue in web apps – maar het geeft al wel goed de richting aan die we op willen gaan. We zijn hiermee volledig onafhankelijk van welke App Store dan ook, kunnen onze eigen business logic (en die van onze klanten) implementeren en onze eigen businessmodellen uitvoeren en testen. En als we een bug ontdekken, is deze vaak binnen een werkdag gefixt.

Internationaal gezien is laatstelijk bijvoorbeeld de mobiele versie van de Financial Times veel in het nieuws geweest. Ook zij hebben het native app-model vaarwel gezegd en zijn overgestapt op een web app-benadering. Mijn verwachting is dat veel uitgevers zullen volgen.

Maar misschien zie ik het wel helemaal verkeerd en zijn er uitgevers die kunnen toelichten waarom een app voor hen juist onontbeerlijk is? Ik hoor het graag van ze via de commentaren onder dit artikel!

Peter Kassenaar
-- 10-13 juni 2011

Deze week is Modern Redesign – 2e geheel herziene editie verschenen. Dit boek is de opvolger van Modern Redesign – met XHTML, CSS en XML uit 2004.

Het boek is daadwerkelijk (zoals de titel al zegt) geheel herzien. De inhoud is naar schatting voor ongeveer 85% vernieuwd, waardoor het boek ook een must is als u lang geleden de eerste versie al hebt aangeschaft.

In Modern Redesign – 2e geheel herziene editie leest u hoe u de overstap maakt van het ‘oude’ HTML4 en CSS2 naar de nieuwe webstandaarden HTML5 en CSS3. Hierbij krijgt u niet alleen een overzicht van nieuwe elementen en hun schrijfwijze, maar leert u (vooral!) ook de conceptuele betekenis en achterliggende ideeën van deze elementen. Natuurlijk zijn de standaarden HTML5 en CSS3 nog steeds in ontwikkeling, maar het boek laat zien welke delen van de standaard al volwassen zijn (en welke u veilig kunt gebruiken) en welke delen nog niet gereed zijn. Er wordt ook getoond hoe u nieuwe sites kunt ontwerpen die er ook in oude browsers goed blijven uitzien.

Specificaties

• Boek, paperback, 427 pagina’s
• ISBN-13: 9789012582438
• Platform- en productonafhankelijk geschreven
• Geschikt voor Windows en Macintosh
• Prijs: EUR 54,95 (aanbieding tot 23 maart 2011: EUR 44,95)

Van de flaptekst

“U leest wat de achterliggende gedachte is geweest bij het ontwikkelen van nieuwe elementen als <article>, <section>, <video> en <audio> en leert hoe ze in nieuwe projecten worden toegepast. Vroeger was de browser vooral een container om webpagina’s te tonen. Tegenwoordig is de browser zelf een compleet programmeerplatform. HTML5 is de eerste versie van HTML die hier rekening mee houdt”.

Beknopte inhoudsopgave

• 1. Introductie – waarom Redesign?
• 2. Kennismaken met HTML5
• 3. Redesign – structureren volgens nieuwe standaarden
• 4. Meer details bij redesign van HTML4 naar HTML5
• 5. Overige nieuwe HTML5-elementen
• 6. De presentatie verzorgen met CSS
• 7. CSS3 en HTML5 in de praktijk
• 8. Redesign – webformulieren van HTML4 naar HTML5
• 9. Redesign – de nieuwe HTML5 API’s gebruiken
• 10. Redesign – interactie toevoegen met JavaScript
• 11. Redesign – overige tips en trucs

Onderwerpen die uitgebreid worden besproken zijn bijvoorbeeld het converteren van websites van HTML4 naar HTML5, Het ontwerpen voor mobiele platforms, het werken met CSS3 media queries, de rol van jQuery en jQuery-plugins (inclusief online voorbeelden), CSS3 slagschaduw, afgeronde hoeken en @font-face.

Website bij het boek

• http://www.kassenaar.com/redesign2/ - Dit is de website met codevoorbeelden - ook beschikbaar als download-versie-  die bij dit boek hoort. Deze site is (zeer :–) eenvoudig gehouden qua layout, zodat de broncode niet wordt doorspekt met tags die alleen dienen voor de opmaak van de site.
• Overzicht met alle hyperlinks uit het boek – Een lijst met alle hyperlinks die in de verschillende hoofdstukken worden genoemd.

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

• Bestellen bij Computerboek.nl
• Bestellen bij bol.com (volgt)

-- Peter Kassenaar 
14 maart 2011

Deze pagina bevat een overzicht van alle hyperlinks die worden genoemd in het boek Modern Redesign, 2e geheel herziene editie (SDU/Academic Service, 2011, ISBN 9789012582438, bestel bij computerboek.nl).

Lees ook het originele blogartikel met de aankondiging van dit boek.

Hoofdstuk 1

• http://www.w3.org/People/Berners-Lee/Weaving/Overview.html – Weaving the web – homepage van het boek van Tim Berners-Lee.
• http://www.w3.org/MarkUp/ - algemene MarkUp-pagina bij W3C, voorheen de homepage van de XHTML 2.0 Working Group.
• http://www.w3.org/TR/html5/ - de status en officiële standaard voor HTML 5.
• http://www.webstandards.org/ - Homepage van WaSP, Web Standards Project.
• http://www.apple.com/html5/ - HTML5 Demo’s bij Apple (best viewed with Safari browser).
• www.ecma-international.org/publications/standards/Ecma-262.htm – Officiele ECMA-262 specificatie
• http://getfirebug.com/ - Firebug, de onmisbare plugin voor Mozilla Firefox voor webdevelopers.
• http://www.csszengarden.com/ - CSS Zen Garden, de showcase-site voor modern CSS-design.
• http://www.w3.org/Style/CSS/current-work – De huidige status van CSS3.
• http://www.w3.org/2008/webapps/ - de Web Application Working Group, de groep die het verder ontwikkelen van DOM Level 3 voor haar rekening neemt.

Hoofdstuk 2

• http://en.wikipedia.org/wiki/MIME_type – informatie over MIME-types bij Wikipedia, inclusief een lijst met veelgebruikte MIME-types.
• http://www.fiddler2.com/fiddler2/ - Fiddler, voor het analyseren van http- en Ajax-verkeer.
• http://www.whatwg.org/news/start – Geschiedenis van de WHATWG.
• http://diveintohtml5.info/past.html – Meer over MIME-types en het ontstaan van HTML5 vanuit W3C en WHATWG.
• http://blogs.techrepublic.com.com/programming-and-development/?p=718 – Interview met Ian Hickson over de ontwikkeling/tijdlijn van HTML5.
• http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) – Overzicht van HTML5-ondersteuning op Wikipedia.
• http://www.findmebyip.com/litmus/#target-selector – Overzicht van HTML5-ondersteuning op FindMeByIP.
• http://www.caniuse.com/ - Can I Use – een site om browsers te vergelijken op verschillende gebieden (PNG, HTML5, SVG, CSS3 enzovoort).
• http://www.html5test.com/ - laat zien hoe uw specifieke browser scoort op het gebied van HTML5 –ondersteuning (ditzelfde wordt geboden door de homepage van FindmeByIp.com).
• http://html5readiness.com/ - een mooie grafiek waarin duidelijk te zien is welke browsers welke HTML5 en CSS3 elementen ondersteunen.
• http://www.w3.org/TR/html5-diff/ - Beknopt overzicht van de nieuwe elementen en attributen in HTML5 en de verschillen met HTML4.

Hoofdstuk 3

• http://mxr.mozilla.org/seamonkey/source/parser/htmlparser/src/nsElementTable.cpp – de lijst nsElementTable.cpp, met herkende elementen voor Mozilla Firefox.
• http://html5doctor.com/html-5-reset-stylesheet/ - HTML5 reset stylesheet van Richard Clark.
• http://xopus.com/devblog/2008/style-unknown-elements.html – How to style unknown elements in Internet Explorer, originele blogpost van Sjoerd Visscher.
• http://remysharp.com/2009/01/07/html5-enabling-script/ - HTML5 enabling script, van Remy Sharp.
• http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon – specificaties voor het favicon/shortcut icon.

Hoofdstuk 4

• http://gsnedders.html5.org/outliner/ - HTML 5 Outliner (online tool).
• https://chrome.google.com/extensions/detail/afoibpobokebhgfnknfndkgemglggomo?hl=nl – HTML 5 Outliner als Google Chrome Extension.
• http://www.w3.org/TR/html5/content-models.html – Officieel overzicht van de HTML5 Content Models (inhoudsmodellen).
• http://www.w3.org/TR/html5/grouping-content.html#the-div-element – beschrijving van de huidige status van het DIV element.

hoofdstuk 5

• http://www.w3.org/TR/html5/video.html#audio – Het element <audio> wij W3C.
• http://www.w3.org/TR/html5/video.html#video – Het element <video> bij W3C.
• http://www.w3.org/TR/html5/the-canvas-element.html – Het element <canvas> bij W3C.
• http://visitmix.com/labs/ai2canvas/ - de plugin AI to Canvas, om vanuit Illustrator te exporteren naar <canvas>-formaat.
• http://www.w3.org/Graphics/SVG/ - De homepage van SVG bij W3C.
• http://www.w3schools.com/svg/svg_examples.asp – SVG-voorbeelden bij W3Schools.com.
• http://www.w3.org/TR/html5/the-iframe-element.html#the-embed-element – Het element <embed> bij W3C.
• http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element – Het element <time> bij W3C.
• http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-global-date-and-time-string – Valide datum- en tijdstrings voor het element <time>.
• http://www.w3.org/TR/html5/the-button-element.html#the-meter-element – Het element <meter> bij W3C.
• http://www.w3.org/TR/html5/interactive-elements.html#the-details-element – Het element <details> bij W3C.

API’s

• http://dev.w3.org/html5/canvas-api/canvas-2d-api.html – Canvas 2D API
• http://dev.w3.org/html5/websockets/ - Web Sockets API
• http://www.whatwg.org/specs/web-workers/current-work/ - Web Workers API

Hoofdstuk 6

• http://www.cssdrive.com/index.php/main/csscompressor –CSS compressor
• http://www.cssoptimiser.com/ - CSS optimiser
• http://www.w3.org/TR/CSS2/cover.html#minitoc – inhoudsopgave van de CSS2-standaard.
• http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors – Meer informatie over pseudo-classes
• http://www.w3.org/TR/CSS2/selector.html – overzicht van CSS2-selectors
• http://www.w3.org/TR/css3-selectors/ - overzicht van (aanvullende) CSS3-selectors
• http://www.w3.org/TR/css3-selectors/#nth-child-pseudo – de beschrijving van de pseudo-class :nth-child().

Hoofdstuk 7

• http://www.css3.info/modules/ - informatie over CSS3-modules
• http://www.w3.org/Style/CSS/current-work – idem, maar minder makkelijk leesbaar.
• http://en.wikipedia.org/wiki/Cascading_Style_Sheets – CSS (-geschiedenis) bij Wikipedia.
• http://en.wikipedia.org/wiki/Browser_wars – De browser wars
• http://css3generator.com/ - CSS3 browserspecifieke code genereren
• http://www.colorzilla.com/gradient-editor/ - Ultimate CSS Gradient Generator. Verlooptinten en kleurpaletten genereren.
• http://css3please.com/ - testsite voor CSS3-opties
• http://www.w3.org/TR/css3-text/#text-shadow – Formele beschrijving van text-shadow in de module CSS3 Text.
• http://www.w3.org/TR/css3-background/ - Formele beschrijven van (onder andere) box-shadow in de module Backgrounds and Borders.
• http://www.w3.org/TR/css3-multicol/ - Formele beschrijving van layout in kolommen, via de module Mult-column Layout.
• http://typekit.com/ - TypeKit, voor lettertype-abonnementen.
• http://fontdeck.com/ - FontDeck, een andere dienst voor weblettertypen.
• http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ - Bulletproof @font-face syntax. Uiterst belangrijk blogartikel.
• http://www.fontsquirrel.com/ - Font Squirrel – lettertypen zoeken en downloaden.
• http://code.google.com/webfonts – Google Font directory.
• http://code.google.com/intl/nl-NL/apis/webfonts/docs/webfont_loader.html – WebFontLoader – fonts laden via JavaScript voor meer controle over het eindresultaat.
• http://nicewebtype.com/ - Nice Web Type, veel achtergrondinformatie over typografie op het web.
• http://www.webfonts.info – Webfonts.info, een wiki-achtige site met typografie-informatie.
• http://www.w3.org/TR/css3-mediaqueries/ - Media Queries bij W3C.
• http://css-tricks.com/css-media-queries/ - Goed artikel over CSS Media Queries.
• http://building-iphone-apps.labs.oreilly.com/index.html – Gratis eBook Building iPhone Apps with HTML, CSS and jQuery.
• http://css3menu.com/ - Menu’s maken met CSS3 menu.com.
• http://www.css3.info/ - CSS3 Info, grote site met achtergrondinformatie over CSS3.

Hoofdstuk 8

• http://www.w3.org/TR/html5/forms.html Algemene homepage voor de HTML5-formulierspecificatie bij W3C.
• http://www.w3.org/TR/html5/the-input-element.html – het element <input>.
• http://www.w3.org/TR/html5/common-input-element-attributes.html – alle attributen en hun werking voor het element <input>.
• http://www.themaninblue.com/writing/perspective/2004/03/24/ - The Man in Blue – formulieren opmaken met CSS.
• http://realworldstyle.com/forms.html – Formulieren opmaken met CSS.

Hoofdstuk 9

• http://nl.wikipedia.org/wiki/H.264 – H.264-beschrijving op Wikipedia.
• http://www.mpegla.com/main/default.aspx – MPEG-LA, de groep die patentovereenkomsten voor H.264 sluit.
• http://nl.wikipedia.org/wiki/Theora_(compressieformaat) – Wikipedia over Theora.
• http://www.webmproject.org/ - WebM, Open Web Media Project.
• http://www.firefogg.org/ - Firefogg, Theora-encoder voor Firefox.
• http://www.longtailvideo.com/players/jw-flv-player/ - JW Player, een Flash videospeler die in uw eigen site kan worden ingevoegd.
• http://www.w3.org/TR/html5/video.html – Het element <video> bij W3C.
• http://camendesign.com/web-dev/video_for_everybody – Video for Everybody, van Kroc Kamen.
• http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/ - Alles wat u moet weten over HTML5 Audio en Video, van Opera Software.
• http://videojs.com/ - een JavaScript-bibliotheek met uitbreidingen voor audio en video.
• http://en.wikipedia.org/wiki/HTTP_cookie – achtergrondinformatie over Cookies bij Wikipedia.
• http://dev.w3.org/html5/webstorage/ - De officiële Web Storage specificatie bij W3C.
• http://www.jstorage.info/ - jStorage, een jQuery-wrapper rondom het standaard localStorage-object.
• http://paperkilledrock.com/2010/05/html5-localstorage-part-one/ - meerdelige reeks over localStorage.
• http://www.w3.org/TR/geolocation-API/ - Specificatie van de API Geolocation.
• http://code.google.com/p/geo-location-javascript/ - Geo.js, aanvullende JavaScript-biblitoheek voor geolocatieservices.
• http://html5demos.com/geo – Voorbeeld bij HTML5Demos.com. Werkt niet in Internet Explorer.
• http://htmlfive.appspot.com/static/whereami.html – voorbeeldcode van Google Map maken op basis van locatiedata.
• http://www.maxheapsize.com/static/html5geolocationdemo.html – idem, maar nu met extra tekstvak voor zoeken van locatie.
• http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html – Het element <canvas> bij WHATWG.
• http://diveintohtml5.info/canvas.html – Introductie <canvas> van Mark Pilgrim.
• http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html – ‘Drag-and-drop disaster’, door Peter-Paul Koch.

Hoofdstuk 10

• http://www2.webkit.org/perf/sunspider/sunspider.html – SunSpider JavaScript Benchmark Test , een bekende prestatie-index voor JavaScript in de browser.
• http://en.wikipedia.org/wiki/Unobtrusive_JavaScript – Meer over unobtrusive JavaScript bij Wikipedia.
• http://www.w3.org/DOM/ - Alles over het DOM bij W3C.
• http://www.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes/ - artikel met 40 nuttige JavaScript-bibliotheken.
• http://jquery.com/ - jQuery-homepage.
• http://en.wikipedia.org/wiki/List_of_JavaScript_libraries#JavaScript. Lijst van andere JavaScript-frameworks bij Wikipedia.
• http://api.jquery.com/category/selectors/ - Een overzicht van alle jQuery-selectors.
• http://craigsworks.com/projects/qtip/ - Craigsworks.com – download hier qTip.

Hoofdstuk 11

• http://www.jeremy-fry.com/ - homepage van Jeremy Fry, de maker van PikaChoose.
• http://pikachoose.com/ - PikaChoose, een jQuery-plugin voor diavoorstellingen.
• http://sorgalla.com/jcarousel/ - jCarousel, voor aanvullende animatie-effecten.
• http://tympanus.net/codrops/2009/09/07/42-jquery-image-gallery-plugins/ - overzicht van 42 jQuery-plugins voor slideshows en photo galleries.
• http://jqueryui.com/demos/tabs/ - Tabs demo bij jQuery UI.
• http://jqueryui.com/download – jQuery UI Downloaden.
• http://jqueryui.com/demos/accordion/ - JQuery accordeon-opties en demo.
• http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm – Holy Grail 3 column liquid layout, van Matthew James Taylor.
• http://bassistance.de/jquery-plugins/jquery-plugin-validation/ - homepage van de jQuery Validation plugin.
• http://docs.jquery.com/Plugins/Validation – documentatie van de Validation plugin.
• http://www.modernizr.com/ - Modernizr, een JavaScript feature-detection library.
• http://www.modernizr.com/docs/ - de documentatie van Modernizr.
• http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsla-color – informatie over HSLA- en RGBA-kleurwaarden bij W3C.
• http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/ - Modernizr-tutorial, van de maker ervan.

Links bij Overige tips en trucs

• http://diveintohtml5.info/ - Gratis eBook (HTML) over HTML 5.
• http://joshduck.com/periodic-table.html – Het periodiek systeem der elementen, maar dan voor HTML-tags.
• http://www.smashingmagazine.com/ - Smashing Magazine, onmisbaar blog voor webdesigners.
• http://blogs.sitepoint.com/2010/10/27/add-tweet-button-anywhere/ - artikel over het toevoegen van een Tweet-button aan pagina’s.
• wwww.html5rocks.com – HTML5 Rocks, HTML 5-site van Google.
• www.webmaster.nl/tools/html-5-cheat-sheet-pdf/ - HTML5 Cheat Sheet.
• http://sixrevisions.com/css/the-history-of-css-resets – artikel met de geschiedenis van CSS-reset stylesheets en voorbeelden.
• http://www.kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/ - artikel over multicolumn lay-outs met css3.
• http://www.colorzilla.com/gradient-editor – Online editor voor het samenstellen van CSS3-verlooptinten.
• http://www.1stwebdesigner.com/freebies/22-handy-html5-css3-tools-resources-and-guides/ - Lijst met 22 tools voor CSS3 en HTML5.
• http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/ - CSS3 cheat sheet.
• http://jqueryfordesigners.com/ - jQuery For Designers – talloze tips & turials.
• http://jqfundamentals.com/ - gratis eBook over jQuery.
• http://www.keyframesandcode.com/resources/javascript/deconstructed/- overzicht van jQuery opbouw.
• http://labs.impulsestudios.ca/jquery-cheat-sheet – jQuery Cheat Sheet.

Mochten er naar uw mening hyperlinks ontbreken, of treft u niet-werkende hyperlinks aan, neem dan even contact op!

Peter Kassenaar.
-- Oktober 2010 – januari 2011

Deze column is eerder verschenen in de nieuwsbrief van computerboek.nl – als onderdeel van de voorintekenactie bij het verschijnen van het boek Modern Redesign – 2e geheel herziene editie

Modern Redesign

“Lang geleden in de internetoudheid (2004, YouTube bestond nog niet eens!), schreef ik het boek Modern Redesign. Dit was een boek voor webdesigners die de overgang maakten van tabelgebaseerd ontwerpen naar CSS-gebaseerd ontwerpen. Dat was destijds het actuele vraagstuk. In het najaar van 2008 werd ik voor een cursus gevraagd waarbij Modern Redesign als boek werd aanbevolen. De enige reserve die de opdrachtgever had, was of het boek nog wel up-to-date was na zoveel jaar. Ik las het weer eens door en tot mijn verrassing kon ik doorgeven dat er sinds het verschijnen van het boek niet zo heel veel veranderd was. Het boek bleek prima geschikt voor de cursus. HTML werd wel zo’n beetje als klaar beschouwd. En als iets in HTML niet kon, dan hadden we altijd nog Flash en Silverlight. Maar al vrij snel daarna kwam de grote omslag. Medio 2009 was het boek ineens helemáál niet meer geschikt voor cursussen. De titel (‘modern’ redesign) deed zelfs een beetje lachwekkend aan. En hoewel het natuurlijk niet helemaal eerlijk is deze omslag aan één woord op te hangen, doe ik dat hier met het oog op eenvoud toch: iPhone.

iPhone

Het is immers niet overdreven te stellen dat het vooral de iPhone was die een revolutie heeft veroorzaakt in zowel het telefoonlandschap als het mobiele internetlandschap. Ineens werden websites geacht ook te werken op kleine telefoons met fantastische internetmogelijkheden. Maar: de iPhone biedt zoals bekend geen ondersteuning voor Flash of Silverlight. En ook andere smartphones zijn op zijn zachtst gezegd niet echt praktisch voor het weergeven van Flash-inhoud. Daar kun je over klagen, of forums over volschrijven, maar je kunt er ook wat aan doen. Dat deden bijvoorbeeld populaire videodiensten als YouTube en Vimeo. Zij stelden hun videomateriaal beschikbaar via wat ineens een ‘HTML5-videospeler’ werd genoemd. Iedereen werd wakker en plots stonden W3C en de Web Hypertext Application Technology Working Group (WHATWG) volop in de belangstelling. Hoe stond het eigenlijk met de ontwikkeling van de volgende versie van HTML? Hoe zat het met CSS3-opmaakkenmerken als slagschaduw, verlooptinten en afgeronde hoeken, die tot dan toe het exclusieve terrein van Flash waren?

HTML5 als marketingtool

De ontwikkeling van HTML5 en CSS3 raakte op deze manier in een stroomversnelling. Plots schoten de HTML5-demo’s als paddenstoelen uit de grond, ondersteund door nieuwe browserversies en indrukwekkende marketingsites. Want laten we eerlijk zijn, na de Web 2.0-hype van enkele jaren geleden was het hoog tijd geworden voor een nieuw buzzword. En zo werd HTML5 met graagte omarmd. Zit er een transparante achtergrond in een <div> op de site? CSS3! Kan een video op de site ook iPhone/iPad worden afgespeeld? Hup, we knallen er een HTML5-stempel op en geven een persbericht uit. Apple zelf gaf hiervoor de aftrap door een – toegegeven, indrukkwekkende – site te lanceren op apple.com/html5. Maar het eigenaardige is dat slechts twee van de hier gepresenteerde zeven demo’s ook inderdaad HTML5-onderdelen bevatten (het video- en het audiovoorbeeld).

De rest is een mengeling van JavaScript, al bestaande CSS-onderdelen (@font-face, al bekend sinds CSS 2!) en Safari-specifieke browseruitbreidingen die in het geheel niets met het werk van W3C en WHATWG te maken hebben. Maar ach, wie zegt dat je reclamemakers moet geloven? In ieder geval ging de boodschap er in als koek. Google Chrome en Microsoft Internet Explorer volgden met nieuwe browserversies en imposante grafieken en testresultaten die moeten benadrukken dat hun product toch echt het beste presteert op het gebied van de nieuwe webstandaarden. HTML5 heeft sinds vorige week zelfs een eigen logo gekregen. Dit kun je officieel afdrukken op stickers, koffiemokken en T-shirts. Kan iemand zich een logo van HTML 4 of HTML 3.2 herinneren? Techno-taal als marketingtool (terzijde: uiteraard zijn er ook al weer allerlei parodie-logo’s ontwikkeld. Lang leve de creatieve vrijheid op internet ;-)

De werkelijkheid

Voor webontwerpers – en boekenschrijvers – is het echter vervelend dat de werkelijkheid een stuk ingewikkelder en genuanceerder ligt. De standaard HTML5 is niet één pak papier dat op een bepaald moment gereed is, een stempel van goedkeuring krijgt en daarna wordt losgelaten op het grote publiek. HTML5 en ook CSS3 bestaan uit vele substandaarden die elk door een eigen werkgroep in een eigen tempo worden beheerd en verder ontwikkeld. Sommige delen van de standaard zijn min of meer volwassen (de nieuwe inhoudsmodellen, de nieuwe structuurtags), andere delen zijn nog hevig onderwerp van debat (de nieuwe invoertypen, drag-and-drop en meer). Zij zijn nog lang niet klaar om gebruikt te worden in echte sites.

Desondanks was de tijd aangebroken om eindelijk het oude boek Voorheen Modern Redesign aan te passen aan de nieuwste ontwikkelingen en zo goed aan te geven wat de komst van de nieuwe standaarden HTML5, CSS3 en JavaScript betekent voor de webdesigner. Vandaar dat binnenkort ‘Modern Redesign – 2^e geheel herziene editie’ in de winkels ligt. Welke onderdelen zijn nu al te gebruiken, en welke nog niet? Hoe kun je er voor zorgen dat nieuwe sites er ook in oude browsers nog goed uitzien? Op al dit soort vragen geeft het boek een antwoord.

En met ‘geheel herziene editie’ wordt in dit geval ook echt Geheel Herzien bedoeld. Ik schat dat zo’n 80%-90% van de inhoud is gewijzigd ten opzichte van de uitgave van 2004. Alleen het inleidende hoofdstuk ‘Geschiedenis van het internet’ hoefde ik niet ingrijpend te wijzigen. Die was al bekend. Voor de rest: Back to the future. HTML5 komt er aan!

Peter Kassenaar.
-- 22 februari 2011

Een 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).

• 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:

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

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.

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:

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

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.

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

Om 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/.

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.

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.

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

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.

• Microsoft WebCamps – alle presentaties en voorbeeldcode van de web camps gratis beschikbaar
• Scott Hanselman – blog
• Drew Robbins blog
• Scott Guthrie MVC3 – blogpost met introductie MVC3 en tal van andere producten
• Jon Galloway MVC3 – blogpost
• MSDN NL – organisatie – thanks, guys!

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.

Een eeuwigheid geleden, in 2004, heb ik het boek Modern Redesign – met XHTML, CSS en XML geschreven. Op de oude site kun je nog de detailpagina van dit boek vinden. Het boek was gericht op de factoren die destijds bij modern web(re)design hoorden: het omzetten van een op HTML-tabellen gebaseerd ontwerp naar een CSS-gebaseerd ontwerp. Ook het vormgeven van elementen als formulieren, forums en blogs kwam aan de orde.

Inmiddels zijn we bijna zeven jaar verder en is er op webgebied enorm veel gebeurd. Het doet mij dan ook deugd te kunnen melden dat in het voorjaar van 2011 de opvolger van dit boek zal verschijnen: Modern Redesign – tweede herziene editie (titel nog onder voorbehoud).

Het boek zelf zal (haha) een compleet redesign ondergaan; ik verwacht dat 70%-80% van de inhoud vernieuwd zal worden ten opzichte van de eerste editie. Want de uitdaging waar de hedendaagse webdesigner voor staat is een heel andere dan destijds. Tegenwoordig moet de site voorbereid zijn op de komst van HTML5, maar wel zonder oudere browsers in de kou te laten staan, liefst zonder aanpassingen draaien op een veelheid aan platforms (Windows, Mac, iPad, iPhone, Android), en verwachten bezoekers veel meer van de interactieve mogelijkheden van een site.

Modern Redesign - tweede herziene editie komt hieraan tegemoet. Het wordt een boek voor alle webdesigners die nieuwe sites direct geschikt willen maken voor HTML 5, of oudere sites willen gaan opwaarderen naar de nieuwste standaarden. Uiteraard zal ik werken met veel praktijkvoorbeelden en tref je allerlei cases aan van redesignprojecten waarin (delen van) de HTML5-standaard verwerkt worden.

Beknopte inhoudsopgave

De inhoud staat op dit moment – aan de start van het schrijfproces - nog niet in steen gebeiteld, maar begint al wel vorm te krijgen. En: je kunt meepraten! Zie hiervoor de aanwijzingen aan het einde van dit artikel. Onder meer de volgende onderwerpen zullen aan de orde komen.

• Waarom Redesign? – een inleiding in de standaarden HTML, CSS en het DOM/JavaScript en de ontstaansgeschiedenis van HTML5.
• Consequent structureren – De HTML5-tijdlijn, wat is HTML5 (en wat is het niet?), de erfenis van XHTML, de juiste notatie van tags en attributen in diverse typen HTML-pagina’s.
• Redesign - van HTML4 naar HTML5 – De verschillen in DOCTYPE’s, nieuwe structuurtags voor HTML5, nieuwe tags voor inhoud in HTML5, verouderde HTML4-elementen en –attributen.
• Nieuwe documenten structureren – Top-level elementen structureren, inhoudselementen maken, headers maken, de document outline, ontwerpen voor verschillende browsers.
• De presentatie verzorgen met CSS3 – herhaling van basiskenmerken CSSS, nieuwe selectors in CSS3, graceful degredation.
• CSS3 en HTML5 in combinatie – verbeterde typografische mogelijkheden, CSS3-transitions, tools om problemen te omzeilen.
• Redesign – webformulieren van HTML4 naar HTML5 – nieuwe invoertypen, autofocus, placeholder teksten, formuliervalidatie, invoer van getallen, datums en cijfers.
• Redesign – nieuwe HTML5 API’s gebruiken – het element <canvas>, de elementen <audio> en <video>, de API drag-and-drop, API voor offline storage, Gerelateerde API’s.
• Interactie met JavaScript – ECMAScript en het DOM, kant-en-klare JavaScript bibliotheken, jQuery, menu’s, tabs en tooltips, Ajax-toepassingen met JavaScript en XHR.
• Redesign van overige elementen – een website zonder plug-ins, diashow’s en caroussels, geanimeerde menu’s, overige interactieve elementen.

Meedenken? Graag!

Het schrijfwerk van dit boek zal volgens planning tot medio januari 2011 duren. Mis je in bovenstaande opsomming onderdelen? Wil je sommige aspecten graag besproken zien of heb je misschien zelf een bijdrage die (uiteraard met naam/bronvermelding) in het boek aan de orde zou kunnen komen? Aarzel dan niet om dat in een commentaar bij dit bericht te laten weten. Je kunt ook 1:1 contact opnemen via het Contactformulier.

Ik ben benieuwd naar jullie input.

Peter Kassenaar
-- 4 oktober 2010