HTML5. Waarom HTML5 nu relevant is voor jóu.
•Download as PPTX, PDF•
0 likes•425 views
Waarom is HTML5 nu relevant voor jou? En wat is het precies? Wat kun je er mee, wat zijn toffe voorbeelden, en wat zijn de laatste ontwikkelingen. In de notities staan nog een aantal links om te inspireren. Gebruikt tijdens een gastcollege voor de Avans Hogeschool.
Recommended
More Related Content
Viewers also liked
Similar to HTML5. Waarom HTML5 nu relevant is voor jóu.
Similar to HTML5. Waarom HTML5 nu relevant is voor jóu. (20)
HTML5. Waarom HTML5 nu relevant is voor jóu.
- 2. Waarom HTML5 relevant is voor jou • Eh, internet. • Desktop applicaties • Mobiele apps, Firefox OS • Javascript op de server • Je gaat het sowieso tegenkomen. Mijn doel: aan het eind van dit college herken jij de situaties waar HTML5 je gaat helpen.
- 3. Wat is HTML? • Elke webpagina bestaat uit HTML ‘tags’ • HTML is een geneste structuur die een webpagina beschrijft HTML code Resultaat in browser
- 4. Wat is HTML5? • Strikt: de opvolger van HTML(4) • Meestal: al het nieuwe op het web
- 5. De onderdelen van HTML5
- 6. Hoe komen we aan al dat moois? Dit was 2009!
- 7. Hoe komen we aan al dat moois? Dit is nu!
- 8. Wat je er mee kunt doen. • HTML5 op het Web • HTML5 niet op het Web. Maar wel in een browser. • HTML5 onderdelen naast het web.
- 9. Wat je er mee kunt doen. • HTML5 op het Web • HTML om te structureren • CSS voor de mooiigheid • Javascript voor interactie
- 10. Wat je er mee kunt doen. • HTML5 niet op het Web. Maar wel in een browser. • HTML om te structureren • CSS voor de mooiigheid • Javascript voor interactie
- 11. Wat je er mee kunt doen. • HTML5 onderdelen naast het web. • CSS • Javascript • NodeJS. NPM grootste package manager • Full-stack Javascript. Meteor.
- 12. Vragen?
Editor's Notes
- 5. waarom HTML5 relevant is voor jou Well, internet. Er goed uitzien, snel werken, gebruikersinterface, vindbaarheid. Mobiele apps, Firefox OS. Javascript on the server Je gaat het sowieso tegenkomen. Mijn doel is dat je snapt waar HTML5 je kan helpen. Dit is geen talk om uit te leggen hoe HTML5 beter is dan iets anders, of hoe goed of handig het wel niet is. Maar ik wil dat je je zo goed mogelijk kan redden straks, en daar helpt HTML5 erg bij.
- Kale HTML is begrijpbaar genoeg voor Google Maar voor veel mensen is het te lelijk en het is maar zeer matig interactief Daarom CSS en Javascript HTML om te structureren CSS voor de mooiigheid Javascript voor interactie
- Strikt alleen de opvolger van HTML4. Normaalgesproken: al het nieuwe op het web. Maar er is nog veel meer, en HTML5 heeft verschillende onderdelen. Daar komen we zo op. Zie hier voor een mooie introductie: http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/
- 5. wat zijn de onderdelen van HTML5 Als eerste: HTML5 is niet één ding. Het bestaat uit drie grote onerdelen, die weer uit kleinere onderdelen bestaan. Er komen steeds nieuwe bij. Niet elke browser ondersteunt alle onderdeeltjes. Je kan zien welke browser wat ondersteunt op bijvoorbeeld http://caniuse.com. HTML (elementen waarmee je een webpagina of app opbouwt) CSS (hoe die elementen eruitzien en/of bewegen) Javascript (code om gebruikersinteractie af te vangen, interactie met de mobiele telefoon, elementen aan te sturen, contact met de server te maken enz. Sommige HTML elementen alleen maar met Javascript werkend te krijgen (canvas) https://www.mozilla.org/nl/firefox/os/ http://mudcu.be/sketchpad/ http://notlion.github.io/streetview-stereographic/#o=0,0,0,1&z=1.535&mz=17&p=36.86201,-5.17943 http://helloracer.com/racer-s/
- 10. maar hoe komen we aan al dat moois? slide van site in 1990 > Door naar volgende slide Bedankt Firefox. Zij wilden het web weer snel en goed maken. Dit zorgde voor innovatie. Bedankt Adobe. Zij lieten met Flash zien wat er mogelijk was. Bedankt Apple. Zij lieten zónder Flash zien wat er mogelijk was. Zij wilden geen afhankelijkheid van Adobe Flash. Ze wilden een snelle iPhone zonder plugins. En een wrange: Ze wilden de AppStore en dus moesten websites minder goed zijn dan websites. Bedankt Google. Zij brachten de innovatie in een stroomversnelling door Chrome. Door V8 zorgden ze indirect ook voor Javascript op de server. Bedankt alle Open Source frontenders. Open Source op het web (Github!) is fantastisch: iedereen kan direct je creaties bekijken, zonder iets te installeren, verbeteringen kunnen direct worden getest. Code is vaak te achterhalen, dus iedereen kan van elkaar leren.
- 10. maar hoe komen we aan al dat moois? slide van site in 1990 > Deze slide Bedankt Firefox. Zij wilden het web weer snel en goed maken. Dit zorgde voor innovatie. Bedankt Adobe. Zij lieten met Flash zien wat er mogelijk was. Bedankt Apple. Zij lieten zónder Flash zien wat er mogelijk was. Zij wilden geen afhankelijkheid van Adobe Flash. Ze wilden een snelle iPhone zonder plugins. En een wrange: Ze wilden de AppStore en dus moesten websites minder goed zijn dan websites. Bedankt Google. Zij brachten de innovatie in een stroomversnelling door Chrome. Door V8 zorgden ze indirect ook voor Javascript op de server. Bedankt alle Open Source frontenders. Open Source op het web (Github!) is fantastisch: iedereen kan direct je creaties bekijken, zonder iets te installeren, verbeteringen kunnen direct worden getest. Code is vaak te achterhalen, dus iedereen kan van elkaar leren. https://photosynth.net/preview/ http://tympanus.net/Development/BookBlock/index.html http://physicsketch.appspot.com/ http://skycraft.io/
- 15. Wat je er mee kunt doen Web HTML5 zorgt er voor dat je datgene wat je wil vertellen op zo gestructureerd, open (en doorzoekbaar!) mogelijke manier kan doen. En ja, je kan voor de grootste doelgroep (het web op desktop + mobile) je site erg mooi maken met CSS. Maar focus éérst op inhoud en een API. Daarna op de ervaring in verschillende contexten. HTML5 ergens anders Dus HTML is goed om te structureren, CSS laat het er goed uitzien, en Javascript om gebruikersinteractie te doen. Kunnen we dan niet buiten de browser iets nuttigs doen? Soort van: App.js (niet buiten de browser, maar een ingepakte browser) En Webview in native mobile app Losse componenten van HTML5 ergens anders CSS Javascript als standalone! Nodejs. Supersnelle ontwikkeling door full stack JS frameworks zoals Meteor.js
- Web HTML5 is drie dingen: semantiek (HTML5), fancyness (CSS3) en nieuwe vormen van interactie (Javascript) Semantiek HTML5 zorgt er voor dat je datgene wat je wil vertellen op zo gestructureerd, open (en doorzoekbaar!) mogelijke manier kan doen. ‘The semantic web’ Zie andere presentatie. Fancyness En ja, je kan voor de grootste doelgroep (het web op desktop + mobile) je site erg mooi maken met CSS. Maar focus éérst op inhoud en een API. Daarna op de ervaring in verschillende contexten. Hier hebben we al verschillende voorbeelden van gezien. http://tympanus.net/Development/BookBlock/index5.html SVG wil ik nog even noemen http://raphaeljs.com/ Nieuwe vormen van interactie Websockets zijn een live verbinding naar een server (twee kanten op) zodat je geen polling meer nodig hebt. http://sharejs.org/ DMV de file api kunnen we beter met bestanden omgaan en bijvoorbeeld betere file uploads maken http://timothypoon.com/blog/demos/ajax-file-api/ Web-Audio zorgt voor goede audio ervaring in de browser http://labs.dinahmoe.com/ToneCraft/# http://www.html5rocks.com/en/tutorials/webaudio/intro/ Canvas (2D). Daar hebben we al voorbeelden van gezien. Een aantal: http://chrome.angrybirds.com/ http://weavesilk.com/ http://physicsketch.appspot.com/ http://spielzeugz.de/html5/liquid-particles.html http://mudcu.be/sketchpad/ http://www.cuttherope.ie/ http://andrew-hoyer.com/andrewhoyer/experiments/cloth/ WebGL (3D). Daar hebben we al voorbeelden van gezien. Een aantal: http://threejs.org/ (bekendste WebGL framework) http://skycraft.io/ http://carvisualizer.plus360degrees.com/threejs/ http://hellorun.helloenjoy.com/ http://helloracer.com/webgl/ http://chandlerprall.github.io/Physijs/examples/jenga.html http://mrdoob.github.io/three.js/examples/webgl_terrain_dynamic.html http://notlion.github.io/streetview-stereographic/#o=0,0,0,1&z=1.535&mz=17&p=36.86201,-5.17943 En nog een berg zaken: GeoLocation ContentEditable Muis lock Volledig scherm Cross-document berichten History API Drag&Drop Offline storage Orientation Camera Webworkers
- HTML5 ergens anders Dus HTML is goed om te structureren, CSS laat het er goed uitzien, en Javascript om gebruikersinteractie te doen. Kunnen we dan niet buiten de browser iets nuttigs doen? Ja. Combinaties van een ingepakte Chromium met Nodejs (voor toegang tot lokale bestandssysteem en meer). Direct cross-platform! App.js http://appjs.com/ Node-webkit https://github.com/rogerwang/node-webkit/wiki/List-of-apps-and-companies-using-node-webkit En Webview in native mobile app http://cordova.apache.org/ (Open Source package die native mobile app wrappers heeft om apps te kunnen maken met HTML5. Zo heb je toegang tot oa camera, contacten, kompas enz van native apparaat) http://phonegap.com/ (cordova + extra support, build tools enz. Betaald)
- Losse componenten van HTML5 ergens anders CSS: QT http://qt-project.org/doc/qt-4.8/stylesheet.html Javascript als standalone! http://nodejs.org/ Supersnelle ontwikkeling door full stack JS frameworks zoals Meteor.js https://www.meteor.com/main