Klaus De Vries

Klaus HTML5 de Vries

 Progress work experience since 1989 Founded 1994 in Hamburg, Germany Longest customer relationship exists since 1993 25 motivated members of staff  Fields of work – 90% Progress OF-1 (Object Framework - One) Consulting, technology transfer, development Viper, PCase, Skin-Client (Mobile, Java, HTML5)

 Expectations  History  Technology + Examples  Development with HTML5  Libraries and Frameworks  JQuery calling OE live demo  Conclusion

 Better HTML, less JS, → Better performance  Replace 3rd party products (like Flash, ActiveX)  Will make web programming easier  Will make browser more compatible (less browser sniffing)  Can make Flash like painting  Can have app like applications (work local, sync later), Google docs  It is only about Audio and Video  Animations in 2 and 3D  I have no idea at all

 Difference to AJAX?  Is it a tool or a technology (will replace AJAX)?  Is is more than HTLM4 + JS?  Difference to DHTML?  Is there more then the video tag?  Difference to Flash and Silverlight?

 2000 HTML 4.01 defined  2004 Web Hypertext Application Technology Working Group Started  2007 Adobe and MS want to rule “Any Device” with Flash / SL  2010 April, Apple banned Flash  2011 Nov., Adobe / MS stopped Flash / Silverlight for mobile devices  2011 HTML5 started to become de-facto standard  2014 HTML 5 should be a recommendation by end of year

 The Web is text and text has a meaning  Examples of semantic elements in HTML5: article aside figcaption figure footer header hgroup mark nav section http://playground.html5rocks.com/#semantic_markuphtml

 tel telephone numbers  search search text  url URL  email single address or list  datetime date/time with time zone  date date without time zone  number numeric input  range numerical range (1-5)  colour chose colour through colour wheel  more... http://mitemitreski.com/demo/html5/input.htmlhtml

 Draw lines, use images, use videos  Paint anything anywhere http://www.craftymind.com/factory/html5video/CanvasVideo.html http://guciek.github.com/burn_canvas.html http://www.movikantirevo.com/

 Native drag and drop in browser  Interactive sites http://www.mariaantoniettaperna.com/...StickyNotes.html

 Storage space 5MB+, may ask for more  Web Storage (local and session, fast 'n easy)  Web SQL Database (deprecated) / IndexedDB (object db)  File API

 Get location from device  Methods to locate: IP address (DNS) Wi-Fi and Bluetooth MAC address Radio-frequency identification Wi-Fi connection location Global Positioning System (GPS) GSM/CDMA cell IDs http://html5demos.com/geo if(!navigator.geolocation) { alert('error'); } else { navigator.geolocation.getCurrentPosition(function(position) { alert(position.coords.latitude + ', ' + position.coords.longitude); }); }

 Replace polling  Asynchronous calls to web server  Push data  Stream data  Gaming, group working, chat, ... http://scrumblr.ca/ var websocket = new WebSocket(wsUrl); websocket.onopen = function (evt) { onOpen(evt) }; websocket.onclose = function (evt) { onClose(evt) }; websocket.onmessage = function (evt) { onMessage(evt) }; websocket.onerror = function (evt) { onError(evt) }; function onOpen(evt) {...

 Asynchronous JavaScript  real Multi Threading  Keeps UI reactive  Run “local batch jobs” [Sorry, no Longer avail: ] ...html5_demo_web_workers/

 Multimedia on “any” platform without plugin  No video format mandatory  No audio format mandatory  Audio, video player, YouTube, animations, chat...  Real time CSS manipulation

CSS/HTML5 Video manipulation

 Manipulate “any DOM element” including images and videos 2D / 3D transformations WebFonts rounded corner, border-radius opacity, text shadows, box shadows much, much more...

 Browser prefix: box-shadow:9px 9px 16px #000000; -webkit-box-shadow:9px 9px 16px #000000; http://www.sciweavers.org/i2style

http://gs.statcounter.com (get todays data here)

 Strong fragmented browser market, IE8 (XP), IE10 (Win7/8)

 Mobile phone Android update policy

Saturation cause of web site count method

 Fragmentation: Browser (Family), Feature Support, Content...  Supply multiple content

 JavaScript is flexible  Return of the browser sniffer  Use libraries or framework

 Modernizr.com – detect native browser HTML5 support often recommended and free! Allows to load so called “polyfills”.

http://modernizr.com/

 Polyfills – allow to emulate HTML5 features in older browser Cross-browser compatible (IE6+) HTML5 ready, use new tags

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills http://afarkas.github.com/webshim/demos/index.html

 A widget and interaction library Focus on web standards IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, and Google Chrome

JQuery UI JqGrid (PlugIn) Tomcat OE Base Widgets (AIA) AppServer Effects Using WebService Themes Grid features

HTML Page Using (soapclient)

JQuery http://localhost:8080/oews/index.html DOM Manipulation Event Handling Animation Ajax Browser abstraction

 Link client to AppServer  Decisions: Session Context, Trigger Handling

“Fat” Client AppServer Session Context http / WebService Call Trigger: JavaScript Business Logic

“Thin” Client AppServer

Display Logic http / Web Sockets Session Context Trigger: ABL Business Logic

 HTML5 = HTML + CSS3 + JavaScript  Web Development (and desktop) !!!Mobile!!!  Issues Fragmentation: Browser, Features, Content, (UI) Framework or abstraction library needed

HTML5: Revolution in Evolution!

●[email protected]

●

Mashup (Music) visualization (http://daftpunk.themaninblue.com/) http://www.w3.org/2011/05/html5lc-faq.html

Compare HTML5 and Flash (Wikipedia)

Can I use a given HTML5 feature

Interaktive online HTML5 presentation

CSS3 Maker CSS3 Me

CSS3 rectangle formatting CSS3 button generator