a&m impact internetdiensten

Als afsluiting van mijn stageperiode als frontend webdeveloper moest ik een afstudeeropdracht uitvoeren. Aangezien a&m impact altijd op zoek is naar de nieuwste technieken en mogelijkheden, kreeg ik de mogelijkheid om een parallax website te ontwerpen. Dit leek mij een leuke en leerzame uitdaging en heb deze met beide handen aangegrepen.

Parallax?

Parallax is een nieuwe techniek die het mogelijk maakt om verschillende lagen onafhankelijk van elkaar te laten verschuiven. Ze worden door elkaar overlapt. Dit kan aan de hand van de scroll positie of de muispositie binnen de site. Hierdoor krijg je een mooi 3D effect. Een mooi en bekend voorbeeld is www.nikebetterworld.com.

Hoe werkt parallax?

Stel je wilt de achtergrond verplaatsen op het moment dat er gescrold wordt, dan wordt er de volgende functie gebruikt (stukje wiskunde):

function newPos(x, windowHeight, pos, adjuster, inertia){
return x + "% " + (-((windowHeight + pos) - adjuster) * inertia)  + "px";
}

Uitleg:
•    x = the horizontale positie van de afbeelding
•    windowHeight = de hoogte van je browser
•    pos = de positie van de scrollbar
•    adjuster = de waarde waarmee je de uitkomst wilt corrigeren
•    px = met hoeveel pixels de afbeelding moet scrollen

Vervolgens wordt er aan de hand van de volgende code de positie berekend:

photo.css({'backgroundPosition': newPos(50, windowHeight, pos, 3200, -0.1)});

Daarbij komt de volgende uitkomst: background-position: 50% 25.4px;
Telkens dat er gescrold wordt komen er een aantal pixels bij.

Hoe ben ik te werk gegaan

1: Analyseren en voorbereiding
De eerste fase bestaat uit het bekijken en analyseren van verschillende websites. Van daaruit heb ik bekeken wat de beste mogelijkheden en oplossingen zijn.

2: XHTML
Na het analyseren van een aantal websites heb ik een ontwerp gemaakt en omgezet naar XHTML. Deze heb ik zo opgebouwd zodat dit gaat werken met het parallax effect.

3: De opmaak
De opmaak wordt gemaakt in CSS(3). In de CSS geef ik het pad van de achtergrond afbeeldingen aan waarbij jQuery de positie regelt aan de hand van de scroll positie.

4: Parallax
De jQuery, hier gebeurt het allemaal. Op het moment dat er een div binnen de browser wordt getoond begint het verplaatsen van de achtergrond. Dit heb ik gedaan door de genoemde code te gebruiken bij het voorbeeld.

Tot slot

Over het eindresultaat ben ik zeer tevreden en dat mag ook wel met een eindcijfer van maar liefst een 9. Ben jij ook benieuwd? Hij is te bewonderen op http://pascalmijnen.am-impact.nl

Enkele dagen na het online gaan van de website www.mijncobb.nl voor onze klant Bills Barn, zijn wij door CSS Winner uitgeroepen tot de ‘Site of the day’ van 27 november 2011. Dit is een internationale prijs voor websites ontwikkeld met CSS.

Innovatie, creativiteit en talent erkennen van ontwerpers is het doel van CSS Winner. Het benoemen van een ‘Site of the day’ wordt gedaan door een jury van topontwerpers, bloggers en bezoekers. Zij selecteren websites voor de ‘Site of the day’. Een leuke erkenning voor een website waar we erg trots op zijn.  Niets is mooier voor een webdesigner dan de nominatie voor een ‘Site of the day’.

Bekijk onze nominatie op http://www.csswinner.com/details/mijncobb.nl/1381/

Naast het ontwerp van de website, speelt de technische kant ook een grote rol bij de user experience van de website. Het unieke design van de website bestaat voor het grootste gedeelte uit één pagina. Door naar beneden te scrollen ziet de bezoeker alle informatie over de Cobb. Ondanks dit design is de website volledig geoptimaliseerd voor een zoekmachine zoals Google. Onder de motorkap van de website hangt het Expression Engine Content Management Systeem (cms) welke door onze programmeurs zorgvuldig en met veel aandacht is geïmplementeerd.

Ook op de bekendste showcase van dit CcmsMS, Show-EE, hebben wij een plekje weten te bemachtigen.

Net als vorig jaar hebben we ook dit jaar weer het Fronteers-congres bezocht. Dit vond afgelopen donderdag en vrijdag (6 / 7 oktober) plaats in het Tuschinski theater te Amsterdam.

Hieronder een korte impressie van de interessantste onderwerpen die werden besproken.

Donderdag

‘s Ochtends stond er al vroeg een lange rij voor de ingang te wachten. Na het ophalen van de toegangsbewijzen, goody bags en de eerste bak koffie kon het geheel beginnen.

Het congres werd geopend met een interessante presentatie van Aral Balkan, ” The future is native” genaamd. Het doel van presentatie was vooral om duidelijk te maken dat het onderscheid tussen een Native (specifiek voor het platform geschreven) en een Web applicatie aan het verdwijnen is. Een aantal mensen uit de community zijn hier te fundamentalistisch over en dat is volgens hem niet nodig. Verder gaat het aantal diverse apparaten wat toegang gaat krijgen tot web-content (door een native of webapplicatie) behoorlijk toenemen en is het een utopie om te denken dat je maar 1 keer een applicatie of vormgeving hoeft te maken, “write once”, maar vaak testen en optimaliseren zijn noodzakelijk. Volgens Aral zou niet de techniek, maar de ervaring voor de gebruiker leidend moeten zijn. Een front-end developer moet vooral vanuit een mens denken en niet teveel vanuit techniek of features.
Aanvullende info is hier te vinden: http://futurefriend.ly/

Derek Featherstone liet ons naar een website kijken door de ogen van een screenreader. Het is namelijk erg belangrijk dat ook mensen met een beperking een site kunnen bezoeken. Dat werkt nu nog te vaak niet goed. Daarnaast gaf hij een aantal voorbeelden van het verkeerd gebruik van tab-indexen op formelementen en gaf hij aan wat het meest logisch is voor de gebruiker en een eventuele screenreader. Ook sprak hij over ARIA en hoe je deze nieuwe attributen vooral niet moet gebruiken…
Meer info: http://examples.furtherahead.com/

Lea Verou had een erg interessante presentatie over CSS3. Ze vertelt dingen waarvan maar weinigen weten dat het mogelijk is . Zo laat ze zien welke achtergrond patronen je kan maken alleen met CSS3! ( http://leaverou.me/css3patterns/ ). Daarnaast een trucje om meerdere borders om een element te plaatsen met box-shadow. Verder nog een animatie techniek die “cubic-bezier” heet en is bedoeld om het verloop van een animatie te beinvloeden. Een tooltje hiervoor is te vinden op: http://cubic-bezier.com/#.17,.67,.83,.67. Jammer voor ons is dat de besproken mogelijkheden nog niet breed ondersteund wordt door de huidige browsers. Meer info: https://github.com/LeaVerou/CSSS

Uiteraard kwam HTML5 ook nog aan bod. Bruce Lawson vertelde op een erg grappige manier over de wat minder bekende tags binnen de HTML5 standaard en hun semantische betekenis. Semantiek houd vooral in dat het betekenis toevoegt aan een document. Hij benadrukte dat HTML5 tags een einde zou kunnen maken aan de wildgroei van diverse ID en classnames, die aan betekenis weinig toevoegen aan een webpagina. oa. de <ruby>, <bdi> en <figure> tags en had hij het over “sectioning” binnen content.

Stephen Hay sprak over de mogelijkheid om een webpagina meer op te laten maken als een krant of magazine. Binnen traditionele DTP pakketten is dit al heel lang mogelijk, maar web/frontend development loopt nog achter. Adobe is al bezig om mbv regions dit voor elkaar te krijgen.
Daarnaast vertelde hij over exclusions. Hiermee is het mogelijk om tekst in bepaalde vormen weer te geven. (zie afbeelding hiernaast) Ook hiermee zullen we waarschijnlijk nog een aantal jaar moeten wachten voordat het standaard is in de meeste browsers.

Tab Atkins werkt bij Google aan de browser Chrome en is lid van de CSS3 Working Group. Hij liet een aantal coole dingen zien. Zo is het mogelijk om HTML elementen te gebruiken als achtergrondafbeelding. Het invoeren van variabelen binnen CSS files was erg interessant, hiermee word het mogelijk om bijvoorbeeld een kleur 1 keer te definieren, wat het overbodig maakt om dmv. find and replace alle kleuren te moeten vervangen. Ook het gebruik van de calc functie in CSS klinkt veelbelovend. Tof om te weten dat er nieuwe dingen aan komen.

Vrijdag

De vrijdag beloofde een interessante dag te worden, waar we vooral uitkeken naar de sessie CreativeJs (animaties in de browser).

De dag begon met een presentatie van Alex Russell, een developer van Google. Het was meteen een presentatie om je aandacht er goed bij te houden, want het was vrij ingewikkeld. Hij focuste met name op het kijken in de toekomst. Het was wel duidelijk dat hij niet echt gecharmeerd was van hacks en manieren om nieuwe technieken te kunnen gaan gebruiken om ook oudere browsers te ondersteunen. Een klein puntje wat hij aanhaalde viel me op, namelijk het gebruik van scoped css. Dat is css die je in je element zet en die dus alleen wordt gebruikt voor de inhoud van dat element.

De volgende die het podium op kwam heet Divya Manian. Ze werkt bij Opera en werkt mee aan de html5boilerplate. Ze gaf een toffe presentatie over de workflow van nu in vergelijking met die van enkele jaren geleden.
10 jaar geleden was het web veel statischer en het grootste probleem van een ontwikkelaar was het kiezen van het juiste element voor hetgeen je wilde bouwen (bij wijze van spreken).
Nu zijn er zoveel mogelijkheden (met veel dynamiek) waardoor Photoshop eigenlijk niet eens meer een goed ontwerp-tool is. Want een statisch plaatje is niet meer representatief voor wat bezoekers uiteindelijk voor ervaring krijgen bij het bezoeken van de website, door animaties, interacties en de rest.
Hierop volgend liet ze een scala zien aan tools die een must zijn voor developers en hoe ze te gebruiken zijn. Al met al een boeiende, leuke presentatie.

Robert Nyman was hierna aan de beurt en ging presenteren wat met HTML5 in combinatie met formulieren mogelijk was. Een korte presentatie (half uurtje), waar al wel veel voor ons bekende zaken in naar voren kwamen.

En toen kwam Seb Lee-Delisle (oa oprichter van creativejs.com), met een presentatie over creatief met javascript. De sessie was in twee delen opgesplitst. Het eerste deel liet hij ons zien hoe je heel simpel met ‘particles’ toffe effecten kan maken, bijvoorbeeld het laten lijken of er rook uit de cursor komt. Was erg leuk om te zien en het prikkelde je heel erg om hier meteen mee te gaan spelen. Gelukkig heeft hij de code die hij gebruikte in de presentatie op github neer gezet. Het tweede deel van de sessie was nog mooier. Hij vroeg iedereen die in het bezit was van een Android of iPhone naar een website te gaan, waardoor hij de telefoons kon gaan bedienen. Bij iedereen sprong de telefoon op groen, op deze manier was elk mobiel een pixel. Door de camera op het podium konden we dit goed zien op het grote scherm achter op het podium. Vervolgens ging hij de telefoons laten switchen van kleur, waardoor je animaties kreeg in het publiek . Erg gaaf ondanks enkele crashes van het systeem.

John Resig is de de oprichter van jQuery, de javascript-library waar wij veel mee werken. Hij gaf een goede presentatie over het succes van jQuery en hoe dit succes tot stand is gekomen. Dit was niet bedoeld als verkoop-praatje, maar vooral als advies naar iedereen. Schrijf duidelijke documentatie (ga er vanuit dat gebruikers er niks van begrijpen), wees 100% transparant over je product, de ontwikkelingen en behandel iedereen serieus. Wie weet op welke manier diegene je in de toekomst kan helpen.

De meest nuttige presentatie van deze dag kwam van Jake Archibald. Hij kreeg makkelijk een uur vol over het gebruik van lettertypes in je site dmv @font-face. Hij behandelde tot in detail hoe de verschillende browsers om gaan met de implementatie en hoe je het laden van fonts kan optimaliseren.
In combinatie met veel humor was het een zeer prettige presentatie om naar te luisteren.

De afsluiter van de dag (en dus van Fronteers11) was net als vorig jaar Christian Heilmann, Developer Evangelist van Mozilla. Hij gaf een inspirerende preek over het gebruik van nieuwe technieken. Wij weten hoe het moet, dus moeten we het delen. Dmv bijvoorbeeld Github kun je elkaar helpen en aanvullen.
Dus deel vooral kennis en zorg dat we met ons allen coole dingen gaan maken.

Al met al was het een erg geslaagde dag. Ook geweest toevallig? Welke sessie vond jij het interessantst?

In september van het afgelopen jaar is er door ons al geblogd over de komst van Internet Explorer 9. Afgelopen week heeft Microsoft deze nieuwe versie van Internet Explorer gelanceerd.  Volgens Microsoft “houdt Internet Explorer 9 rekening met de sites van de toekomst”. Of dat zo is blijft natuurlijk afwachten. In ieder geval is IE9 een flinke stap voorwaarts ten opzichte van de vorige versie IE8.

Een nieuwe browser betekent: betere ondersteuning nieuwe technieken, kortere laadtijden van webpagina’s, veiliger over het web kunnen surfen en ook nog een beter gebruikersgemak.

Wat betekent IE9 voor jou?

Uiterlijk en mogelijkheden
In IE9 zijn een aantal zaken anders dan in IE8. Zo is het eerste wat op valt het vereenvoudigde ontwerp van de browser. Microsoft heeft zich waarschijnlijk laten inspireren door de eenvoudige interface van Google Chrome. Het grote voordeel is dat je meer ruimte overhoudt voor de webpagina’s.
Een belangrijke toevoeging is de traceerbeveiliging. Met deze optie kun je gegevens geheim houden voor de websites die je bezoekt.
Ook de mogelijkheid om een website te ‘pinnen’ is nieuw. Een website kun je eenvoudig vastmaken aan je takenbalk, waardoor je direct naar de site kan gaan zonder de browser eerst te starten. Ook geeft dit nog enkele andere opties die te vinden zijn onder de rechtermuisknop.
Meer info over de nieuwe features van IE9.

Snelheid
IE9 heeft een snellere javascript-engine, wat betekent dat websites sneller en vloeiender kunnen  “draaien”. Het laden van afbeeldingen en video’s gaat beter.  De nieuwe browser kan nu naast de processor ook gebruik maken van de rekenkracht van de grafische schijf. Wat de snelheid ten goede komt.

Ondersteuning technieken
HTML5 is de nieuwste versie van de html-standaard. Deze versie is nog in volle ontwikkeling, maar er zijn al onderdelen die worden ondersteund door verschillende browsers. Ook IE9 geeft een vrij brede ondersteuning voor html5.

Wat betekent IE9 voor de toekomst?

Prognose
Microsoft verwacht dat in de zomer 20 à 30 procent van de Nederlanders gebruikmaakt van IE9.

Kritische noot
Volgens critici loopt de nieuwe versie van IE al weer achter ten opzichte van bijvoorbeeld Firefox en Chrome. IE9 zou HTML5 nog niet genoeg ondersteunen (Lees het artikel op NU.nl)

Wat ik zelf een groot nadeel van IE9 vindt ten opzichte van andere browsers, is dat andere browsers een auto-update functie hebben zodat deze altijd de nieuwste technieken ondersteunen. Bij Internet Explorer moeten we weer wachten op de volgende versie. We verwachten dat het dus niet lang duurt tot IE9 weer achterloopt op de andere browsers.

Wat betekent de komst van IE9 voor a&m impact?

Hoewel IE9 een hele vooruitgang is hoeft dit voor ons niet meteen te betekenen dat we nieuwere technieken kunnen gaan gebruiken. We zullen altijd rekening moeten houden met de voorgaande versies van Internet Explorer en andere browsers.
Bij de komst van IE9 hebben we een groot aantal websites nagelopen op een aantal zaken. Daarnaast gaan we bij oplevering van de website checken of de website goed werkt.

IE9 ook voor jou?
IE9  is voor iedereen met  Windows 7 of Vista te downloaden. Helaas dus niet voor gebruikers met Windows XP.

Onlangs hebben Rob Lohman en ik een interne presentatie gegeven over de nieuwe mogelijkheden van HTML 5 en CSS3. Dit is een nieuwe versie van de bestaande HTML en CSS, die een aantal leuke nieuwe features bied. We hebben onder andere de onderstaande punten behandeld:

Video en Audio

Het wordt mogelijk video en audio af te spelen met HTML, zonder de tussenkomst van plugins als Media Player, Quicktime of Flash. Voordeel is dat iedereen deze dan af kan spelen, en het daarmee dus heel toegankelijk wordt.  Een groot nadeel is dat de browsers onderling in de clinch liggen over welke codec ze nu moeten gaan ondersteunen. Daardoor moet er voor Mozilla een ander bestand dan voor Webkit aangeleverd worden. Meer informatie en een voorbeeld.

LocalStorage en SessionStorage

Deze twee functies zijn eigenlijk de nieuwe cookies. Hiermee kan meer data dan een cookie opgeslagen worden, en wordt het makkelijker om deze te gebruiken in je javascripts. Een klein nadeel is dat gebruikers deze aan moeten zetten, en niet zoals cookies dat ze standaard aan staan.

Semantische tags en attributen

Er worden een aantal nieuwe tags en attributen toegevoegd waarmee de code semantisch opgebouwd kan worden, en er meer meta data aan elementen gegeven kan worden. Dit is handig om data in de pagina te stoppen voor de javascripts, maar ook erg goed voor zoekmachines als Google. Deze kan zo nog meer uit de pagina halen, en duidelijker zien wat een navigatiebalk is, en welke data bij elkaar hoort.

Canvas

Het tekendoek van HTML. Met een uitgebreide programmeer API kan hier in 2D en 3D (nog in ontwikkeling) op getekend worden. Dit kan van kleine tekeningen (handtekening bijvoorbeeld), tot complete spellen. Meer informatie en een aantal voorbeelden.

Formulieren

Er zijn een flink aantal nieuwe formulier elementen ontwikkeld die het voor de gebruiker en ontwikkelaar een stuk makkelijker maken. Zo zit er standaard een datum veld in, waardoor niet meer de datum ingetypt hoeft te worden, maar dit gekozen kan worden in een kalender. Doordat deze door de browsers geïmplementeerd worden werkt dit overal op dezelfde manier, en kan de gebruiker overal op dezelfde manier hiermee werken.

GeoLocation

Hiermee kan de locatie van de gebruiker opgevraagd worden, mits deze daar toestemming voor geeft. Dit kan handig zijn voor bijvoorbeeld een mobiele webapplicatie met een navigtatie systeem erin. Met GeoLocation is dan de exacte positie, hoogte en kijkrichting van de gebruiker op te vragen.

…vervanger voor Flash?

De laatste tijd is er veel rumoer op het internet over dat HTML 5 de vervanger gaat worden van Flash. Apple is hier mee begonnen door op zijn iPhone geen ondersteuning te willen bieden voor Flash, omdat zij beweren dat hetzelfde bereikt kan worden met HTML 5. Andere browser bouwers zijn het hier mee eens, en het lijkt erop dat Adobe Flash een beetje in een hoek gedreven is.

Voorlopig zitten we nog wel met Flash, aangezien veel browsers nog niet veel van HTML 5 geïmplementeerd hebben (mede omdat het nog niet af is!), en een groot deel van de internetters nog met oude versies van browsers surfen, waardoor er sowieso een Flash applicatie gemaakt moet worden om ondersteuning te bieden voor alle bezoekers.