Presentaties

Van bijna elke presentatie zijn video-opnamen gemaakt. De organisatie heeft beloofd die video’s online te zetten. Zodra dat is gebeurd, zal ik de links toevoegen in onderstaand overzicht.

45 Modules in 45 Minutes – the Best Modules You’re Not Using

Iedere Drupal-ontwikkelaar kent CCK en Views, maar in deze sessies passeerden 45 andere modules de revue die veel minder bekend zijn, maar toch de moeite waard. Better Messages, HTML Purifier, Image Resize Filter, Table Wizard, Persistent Login, Automated Logout, Taxonomy Breadcrumb, Taxonomy Image – ik kende ze allemaal nog niet, maar sommige ga ik zeker gebruiken.
» presentatie en videobeelden: drupaleasy.com/45

Sustainable theming: how to take a vacation

Een vlotte lezing waarin het belang van duurzame CSS werd uitgelegd, zodat je naderhand gemakkelijker dingen kunt aanpassen of uitbreiden. Natuurlijk een behartenswaardig onderwerp, alleen bleef het allemaal nogal abstract bij gebrek aan concrete voorbeelden van duurzame en niet-duurzame CSS.
» presentatie: www.slideshare.net/caroltron/sustainable-theming

Geo tools for Drupal

Als liefhebber van wandelen kijk ik reikhalzend uit naar alle ontwikkelingen die met GIS te maken hebben. In de Drupal-community wordt volop gewerkt aan koppelingen met GIS-servers en mashups, waarvan in deze sessie verslag werd gedaan. Een bijzonder interessante ontwikkeling, zij het tot nu toe nog zonder veel zichtbare resultaten.

Basics of making a mobile website with Drupal

Wat mij betreft een van de beste presentaties van de hele conferentie. Tom Deryckere van Siruna behandelde eerst de algemene principes van mobiele websites, zoals navigatie, tools en valkuilen. Daarna liet hij een veelbelovende nieuwe tool van Siruna zien om websites te vertalen naar mobiele platforms.
» presentatie: www.mobiledrupal.com/content/slides-presentation-mobile-drupal-drupal-camp-colorado (van een eerdere conferentie, maar ogenschijnlijk dezelfde presentatie)
» promotiefilmpje: www.siruna.com/our-technology-platform (is nog in bèta).

Drupal for Media + Edipresse Success Story

Een sessie over de introductie van Drupal bij het Zwitserse uitgeefconcern Edipresse. Daarbij viel vooral op hoe snel ze het allemaal voor elkaar kregen, mede dankzij de Agile-ontwikkelmethodiek en slim hergebruik van HTML/CSS-templates. De verschillen tussen adverteren in print en op internet werden nogal breed uitgemeten. Ja, het is moeilijk om met een nieuwssite geld te verdienen. Ja, traditionele adverteerders geven voor kranten en tijdschriften meer geld uit dan voor websites. Maar dat wisten we tien jaar geleden toch allemaal al?
» presentatie (gedeeltelijk): www.slideshare.net/pjduvivier/drupal-experience-at-edipresse-media-company

Social + Media: What We Need Next

Een geanimeerde keynote speech van Chris Heuer over social media. Niet dat ik me heb verveeld, maar anderhalve week later is me eigenlijk maar één ding van zijn betoog bijgebleven en dat is dat bedrijven vooral als media moeten gaan denken. Eigenlijk wel grappig, want in de vorige sessie over Edipresse was de ondertoon juist tegengesteld: media moesten daar vooral als bedrijven gaan denken.

Transforming The Economist Online using Drupal, open-source and Scrum

Deze vlag dekte de lading precies. De invoering van Drupal bij The Economist was niet alleen de overgang op een andere techniek, maar ook op een andere filosofie (open-source) en andere ontwikkelmethodiek (Scrum). Zelf heb ik nog geen ervaring met Agile en Scrum, maar ik zie duidelijk voordelen ten opzichte van de traditionele watervalmethode (ook enkele nadelen overigens).
» samenvatting: http://paris2009.drupalcon.org/session/transforming-economist-online-using-drupal-open-source-and-scrum

Make a Module: A Hands-on Intro to Module Development

Een spoedcursus Drupal-modules bouwen. Duidelijk verhaal, voor mij erg leerzaam.

How To: Install, Upgrade, Backup, & Migrate

In deze sessie zag ik vooral heel veel scripting voorbij komen. Plus één markante uitspraak onthouden: dat het upgraden van n aparte Drupal-installaties soms sneller gaat dan één grote multisite-installatie waar alle n websites op draaien, terwijl je juist het omgekeerde zou verwachten.
» presentatie: drupaladmin.net/paris

Drupal Ingredients for your Website Dish, or Modules You Should Use on Every Site

Nog een bloemlezing van leuke Drupal-modules, je zou er wel vijf sessies mee kunnen vullen.
» presentatie: docs.google.com/present/view?id=dcv55663_82d9m66bdz

Agile Drupal Development with Scrum

Agile en Scrum werden al in andere lezingen genoemd en geroemd. Hier werd er wat uitgebreider op ingegaan wat ze precies behelzen. Een goed-gestructureerde presentatie.

Understanding Drupal 6 Themes

Het afgelopen halfjaar heb ik veel gestoeid met theming in Drupal. Toch maar een kijkje nemen, dacht ik, wie weet leer ik nog wat nieuws. De sessie duurde echter maar 20 minuten: 15 minuten om de basisprincipes uit te leggen en 5 minuten voor wat vraagjes uit de zaal. Dus nog ruim een half uur over om leerzame praktijkvoorbeelden te geven? Nee, de sessie bleek afgelopen.
» presentatie: docs.google.com/present/view?id=0AUvHZLXzMJuBZGZrc3B2NzdfNmdxNDRmemNy&hl=en

Semantic Web fundamentals

Een keynote speech van Dan Brickley, deskundig op het gebied van W3C-webstandaarden. Deze presentatie ging over de toekomst van het web, met voor mij (ooit mijn loopbaan begonnen op een wetenschappelijke bibliotheek) een eyeopener: Brickley strooide met termen die al tientallen jaren in de bibliotheekwereld in zwang zijn, zoals thesauri, taxonomieën, Dublin Core, enzovoorts. Door de komst van het web en Google in het bijzonder zijn bibliotheken door veel mensen overbodig verklaard, maar na zo’n lezing lijkt het wel alsof juist deze ogenschijnlijk stoffige beroepsgroep mede de sleutel in handen heeft tot de toekomst van het web. Een fascinerende gedachte die mij de rest van de dag niet heeft losgelaten.

jQuery for designers and themers

Voor mij is jQuery niet nieuw, maar op deze sessie zag ik toch weer leuke nieuwe voorbeelden. De spreker nam in ieder geval de moeite om vanuit een praktijkvoorbeeld te werken en na elke aanpassing direct het effect te laten zien. jQuery UI, gebaseerd op jQuery, komt in de core van Drupal 7.
» presentatie: docs.google.com/present/view?id=drmcbw4_1816qv2fkc7

Building blocks for your module’s UI

Hier kregen Drupal-modulebouwers tips en best practices voorgeschoteld hoe je een prettige interface maakt voor je nieuwe Drupal-module. In algemene zin valt het mij op dat de Drupal-gemeenschap veel aandacht besteedt aan een gebruiksvriendelijke backend.

Welcome to the Jungle! Basic Drupal Recipes and Best Practices for Beginners

Een razendsnelle Drupal-introductie voor absolute beginners, eigenlijk meer gericht op ‘power users’ dan op ontwikkelaars. De beste tip van de hele sessie, en misschien wel van de hele conferentie: maak eerst een uitgewerkte schets op papier van wat je wilt gaan bouwen.

Sharing content across multiple sites with Domain Access

Ik ben nog te kort bezig met Drupal om alle ins en outs van deze presentatie te doorgronden. Maar het feit dat er meer dan tien Drupal-modules voorbijkwamen, plus nog wat PHP-code om bijvoorbeeld cookies te zetten, doet mij desondanks concluderen dat een ander open-source cms als Typo3 op dit specifieke punt veel eleganter in elkaar steekt. Anderzijds heeft Drupal op andere punten ook weer grote voordelen ten opzichte van Typo3. Op de verschillen tussen Drupal en Typo3 wil ik later in een aparte blogpost terugkomen.

Bij WordPress is speciale aandacht besteed aan zoekmachinevriendelijke pagina’s en aan het spamvrij houden van het gastenboek en het contactformulier. Hiervoor zijn verschillende WordPress-plugins ingezet, waaronder Akismet, All in One SEO Pack, WP Comment Sorter, Google XML Sitemaps, en niet te vergeten het krachtige en gebruiksvriendelijke cFormsII.

Nog niet zichtbaar op de site is NextGEN Gallery, een fantastische plugin om WordPress-websites uit te breiden met diashows.

Dankzij een zelfgeschreven conversieprogramma is het gelukt om het gastenboek van de oude website naar WordPress om te zetten.

Het nieuwe ontwerp zal op het eerste gezicht niet sensationeel ogen, maar is niettemin het resultaat van langdurig brainstormen, eindeloos bijschaven en jarenlang klantencontact. Allereerst moest de website als geheel een zonnige en kleurrijke uitstraling hebben, die bezoekers meteen in vakantiestemming brengt. In de nieuwe kleurstelling zijn de oude kleuren, de Intertrek-huisstijl en de brochure van vorig jaar verwerkt.

Verder is veel aandacht besteed aan de presentatie van elke wandelreis. De belangrijkste kenmerken (bezienswaardigheden, type reis, prijs, vertrekdata, karakteristieke beelden) moesten in één oogopslag te zien zijn. Op basis van deze eerste indruk kan de bezoeker snel een keuze maken: uitgebreide reisinfo opvragen, meer foto’s bekijken, de pagina printen, de reis boeken, of contact opnemen met Intertrek (voorbeeld). Over elke knop is nagedacht.

Een bijkomend nieuwtje is de mogelijkheid om elke bestemming te bekijken via Google Maps. Bij een groot deel van de reizen is een kaartje toegevoegd in de rechterkolom.

Bij de technische realisatie van de site is zoveel mogelijk rekening gehouden met algemeen geldende webstandaarden. Toch hebben we na lang beraad een concessie gedaan: het gebruik van Javascript was noodzakelijk om formulieren in popupvensters te openen en om reispagina’s overzichtelijker en compacter te houden met behulp van tabjes.

Laterna heeft de site daarom van de grond af aan opnieuw gebouwd met HTML en CSS, en het resultaat overgezet naar WordPress. Net als bij Lopende Zaken is hard gewerkt om de site ook perfect te krijgen in de belangrijkste Mac-browsers, Safari en Firefox. Een belangrijk hulpmiddel daarvoor is BrowserCam, een betaalde dienst die je site laat zien op elk gewenst platform, in elke gewenste browser en in elke gangbare beeldschermresolutie.

Voor technisch onderlegde lezers volgen hier enkele browserproblemen waarmee ik te maken kreeg:

• Op sommige pagina’s rouleert de foto linksboven met een overvloei-effect. Daarvoor had ik in eerste instantie een Flash-animatie gebruikt, gemaakt met het handige FlashSlider. Dit bleek echter in Firefox een onoplosbaar probleem op te leveren: als je met behulp van layers een element bovenop een Flash-animatie plaatst – in dit geval de kop martijndegroot.communicatie – dan verdwijnt dat element in Firefox steevast ónder de animatie.
  De oplossing: de Flash-animatie vervangen door een stuk Javascript, de Ultimate Fade-in slideshow. Dit op zich voortreffelijke script leverde weer een ander, heel curieus browserprobleem op in Safari (bij elke fotowisseling wordt de z-index van de foto 1 opgehoogd, waardoor de kop na zekere tijd alsnog verdwijnt), maar die waren op te lossen door de kop martijndegroot.communicatie een hele hoge z-index te geven.
• Ook de horizontale navigatiebalk leverde problemen op in Safari: de witte onderkopjes verschenen niet als je met je muis over de cijfers 1.0 t/m 4.0 bewoog. Na een paar uur puzzelen de oorzaak gevonden: in Safari blijk je met Javascript wel de CSS-eigenschappen van een gegeven blok te kunnen manipuleren, maar niet als die eigenschappen geërfd zijn van een groter blok, de zogeheten parent.
• De broodtekst liet weer een bug in Internet Explorer zien: bij cursieve teksten verschoof de rechtermarge naar rechts. Dit probleem en de oplossing worden beschreven op Positioniseverything.net. Opgelost met een extra CSS-regel overflow: hidden.
• Nog een overflow-probleem in de lichtkrant-achtige regels onder de broodtekst. Het CSS-kenmerk overflow: hidden blijkt in de meeste browsers niet te werken als de tekst op nowrap staat en ook nog relatief wordt gepositioneerd. Met dank aan mailinglijst WebProf vond ik een ‘hack’ voor Internet Explorer, maar in Opera (Windows) en Safari (Mac) bleef het probleem bestaan. De enige uitweg: deze regels links en rechts handmatig afkappen. Niet bijster elegant, maar als tijd en budget op zijn, dan is een pragmatische oplossing beter dan helemaal geen oplossing.

Ter vergelijking: de oude Flash-website staat voorlopig nog even hier geparkeerd.

Bijna iedereen die websites ontwerpt, ontwikkelt in de loop der jaren een duidelijk herkenbaar stijltje. Zo hou ik zelf van strak en stijlvol, zonder veel ornamenten. Maar soms is het heel leerzaam om eens over de grenzen van je eigen stijl heen te kijken.

Lopende Zaken, een projectbureau op het gebied van recreatie, geschiedenis en culturele planologie, schakelde Laterna in voor het ontwerpen en bouwen van een nieuwe site. Bij de briefing bleek de opdrachtgever sterke wensen te hebben: de vormgeving moest kleurrijk zijn, veel beeldmateriaal bevatten en passie voor cartografie uitstralen.

Laterna maakte vijf totaal uiteenlopende ontwerpschetsen, waaruit Lopende Zaken een uitkoos als basis voor de website. Het gekozen ontwerp werd verder visueel uitgewerkt, waarbij een deel van de vele ideeën en suggesties van de opdrachtgever een plaats kreeg. De spil van de site wordt gevormd door het enorme portfolio van het bureau, dat zowel tekstueel (knop Projecten) als visueel (klik op het kaartje in het linkerkader) kan worden bekeken.

Veel aandacht is besteed aan browseronafhankelijkheid. Op verzoek van de opdrachtgever heb ik de site ook geschikt gemaakt voor de Safari-browser op de Mac. Dat bleek geen triviale eis, maar dankzij extra scripting en veel geduld is dat uiteindelijk toch gelukt.

Het ontwerp maakte Remco zelf in Photoshop, Laterna paste het aan voor de meest gangbare beeldschermresoluties en vertaalde het naar browseronafhankelijke HTML en CSS. De fotogalerijen worden automatisch gegenereerd door een PHP-script, waardoor het eenvoudig is om bestaande galerijen aan te passen en nieuwe aan te maken.

Hoewel de schermafdruk anders doet vermoeden, is de hele site zonder ‘frames’ gebouwd. Dit zorgt voor een betere opname in Google en maakt het mogelijk om te dieplinken naar afzonderlijke galerijen. Verder is het e-mailadres op de contactpagina onleesbaar gemaakt voor ‘spambots’.

De site voldoet aan de officiële HTML-standaard en ook aan bijna alle overheidsrichtlijnen, op punt R-pd.8.18 na (e-mailadres coderen).

» www.remcovanblokland.nl

Het ontwerp is van Remco van Blokland. Laterna bouwde de website, inclusief fotogalerij en geluidsfragmenten.

» www.adrianelissen.com