Online fotoboek-editor zonder flash
Geplaatst door Peter Bondt op 18 april 2012
Tag(s): Hobbyprojecten, Infi
HTML5 is de nieuwe standaard voor het ‘opmaken’ van websites. Eén van de grote voordelen van HTML5 is dat je er veel mee kunt zonder javascript. Een voorbeeldje is drag-en-drop. Je versleept een foto naar een ander gedeelte van je scherm. Of nog mooier: je versleept een foto van je Windows verkenner naar de website. Vóór HTML5 had je, om dit te kunnen doen, veel javascript (lees: Jquery plugin) nodig. Op zich niet erg, maar gemak dient de mens. Dus als het simpeler en sneller kan, dan graag.
Maar het grote nadeel is dat de standaard nog niet officieel in gebruik is. Veel nieuwere browsers ondersteunen al wel veel nieuwe functionaliteiten van HTML5, maar nog lang niet alle. Dit heeft als gevolg dat je bij het ontwikkelen van webapplicaties weer in de wirwar van alle browsers terecht komt met elk hun eigen compatibiliteit.
Het doel
Omdat ik nog weinig kaas heb gegeten van HTML5, wilde ik dit onderwerp leidend maken voor mijn hobbyweek. Ik heb mijzelf de opdracht gegeven om een fotoboek-editor te maken in HTML5 zonder flash. Hierin moet je foto´s kunnen slepen, resizen en draaien. Bovendien moet je kunnen inzoomen op een deel van de pagina die je aan het bewerken bent. En, als de tijd het zou toelaten, wilde ik een export kunnen maken van een canvas en deze later kunnen inladen.
De week
Omdat het verslepen van een foto uit een losse div naar een canvas binnen vijf minuten was geregeld, kon ik me daarna gaan inlezen op het canvas-element. Dit is een element waarin je dynamisch plaatjes kunt bewerken en kunt tekenen. Zie het als een soort tekenbord waarop je zonder HTML-elementen kunt tekenen. Na wat onderzoek heb ik kineticJS gevonden die je helpt bij het inrichten van je canvas. Tegen deze library kun je zeggen: hier heb je een plaatje, dat wil ik op die positie hebben en het moet zo groot zijn. Dit kun je zonder library ook nog wel, maar als je een pagina wilde schalen, en inzoomen, dan neemt zo’n library je veel werk uit handen.
Tevens kun je kineticJS goed gebruiken voor het groeperen van al je elementen die je binnen het canvas wilt laten zien. Ook kun je lagen aanbrengen waarop je die groepen plot, waardoor je je canvas met alle elementen en functionaliteiten goed kunt aansturen. Een klein voorbeeldje: voor deze webapp heb ik twee lagen ingericht: één die zo groot blijft als het canvas zelf en waar bijvoorbeeld de scrollbars op liggen en een laag waarop alle plaatjes worden geprojecteerd. Zo hoef je alleen maar de tweede laag opnieuw te tekenen als je wilt inzoomen.
Geleerd
De eerste les die ik heb geleerd is: gebruik altijd een library! KineticJS is een prettige library die je veel werk uit handen neemt. Tevens is hij nog volop in ontwikkeling. Dat heeft natuurlijk als voordeel dat er nog veel verbeteringen worden doorgevoerd, maar het betekent ook dat er nog veel aan verandert. Het grote voordeel van KineticJS is dat het een groot aantal gebruikers heeft, waardoor de ondersteuning goed is en er veel informatie en hulp te vinden is op het web.
Tevens heeft deze week me de ogen geopend voor de mogelijkheden van HTML5. Het nadeel van HTML5 is echter dat het nog geen officiële standaard is. Dit weerhoudt veel ontwikkelaars en bedrijven ervan om ermee aan de slag te gaan. Hierdoor ontstaan alleen hobbyprojecten: echt grote applicaties in HTML5 zijn er nog weinig.
