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?

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.

Met CSS (Cascading Style Sheets) maken wij de gestructureerde informatie (HTML) van de pagina op. Hiermee kunnen wij zeggen dat een logo bijvoorbeeld links boven moet staan, met een blauw kleurtje, en wanneer je er overheen gaat dat deze groen moet worden.

De huidige versie van CSS is 2.1, en er wordt druk gewerkt door het W3C en browser bouwers aan de volgende versie; 3. Deze is nog lang niet af, maar een aantal punten zijn al wel geïmplementeerd door browsers.

In de nieuwe versie komen een aantal mooie dingen die een hoop werk schelen, en de HTML code nog gestructureerder kan maken, wat weer leidt tot betere zoekmachine optimalisatie, en kortere ontwikkeltijd.

Multiple backgrounds
Hiermee kun je op een element meerdere achtergronden zetten, zodat er met minder code meer gedaan kan worden, en er minder aparte afbeeldingen gemaakt hoeven te worden. Dit kan de site sneller maken, want het binnen halen van bestanden kost nou eenmaal tijd (en bandbreedte).

Animaties en transformaties
Met de huidige versie van CSS kun je niks aan een element animeren of veranderen, maar met CSS3 wordt het mogelijk om elementen te kunnen draaien, bewegen en van vorm te veranderen. Nu moet hier Javascript of Flash voor worden gebruikt.

Webfonts
Vanuit de browser kunnen hiermee niet-standaard lettertypes gebruikt worden op de pagina. Nu zijn hier ook weer technieken voor nodig als Javascript en Flash. Wanneer deze functie erin komt kunnen websites nog grafischer worden en meer hun eigen gezicht krijgen door het gebruik van aparte lettertypes.

Rounded corners
Hiermee kan er zonder extra plaatjes mooie ronde hoekjes aan elementen gegeven worden. Nu kost dit vaak veel tijd en moeite door dat die plaatjes allemaal gemaakt moeten worden, en dan in de achtergrond moeten worden gezet.

Dit is nog maar een kleine greep uit de nog veel extra features die erin komen, maar wel diegene die erg veel tijdswinst opleveren! Helaas ziet het er naar uit dat Internet Explorer deze de komende versies nog niet gaat ondersteunen… Gelukkig zijn browsers als Firefox, Safari en Opera flink in opmars, die hebben al wel een flinke implementatie van deze functies!