HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in...
Transcript of HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in...
![Page 1: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/1.jpg)
1
HTML5
Marcel Kessler, Reto Gigerguild42.ch, Restaurant Schmiedstube in Bern
2011-11-14
![Page 2: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/2.jpg)
2
Websites (Mobile) Applications
guild42.ch
Google Docs
Gmail
Remember the Milk
derbund.ch
Google Reader
![Page 3: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/3.jpg)
3
Agenda
Introduction Mobile / HTML5Technical Demonstration„Real-Life“ Examples
![Page 4: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/4.jpg)
4
About Netcetera
![Page 5: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/5.jpg)
5
Mobile
![Page 6: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/6.jpg)
Time
Visi
bilit
yLet‘s Take a Look at the Gartner Hype Cycle
Technology Trigger
Peak of Inflated Expectations
Trough of Disillusionment
Slope of Enlightenment
Plateau of Productivity
![Page 7: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/7.jpg)
Time
Visi
bilit
yMobile Apps and Mobile Content on the Hype Cycle
Today
![Page 8: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/8.jpg)
8
Smartphone market grew 19% in the first
quarter of 2011Source: Gartner
![Page 9: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/9.jpg)
9
Mobile data traffic is expected to leap
23% in 2011Source: Gartner
![Page 10: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/10.jpg)
10
In summer 2011 there were twice as many
tablets sold as netbooksSource: ABI Research
![Page 11: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/11.jpg)
11
Europeans browse the mobile Internet 6.4 hours
per weekInternet-on-the-move is proving a more frequent pastime than reading
newspapers (4.8 hours) or magazines (4.1 hours).
Source: European Interactive Advertising Association
![Page 12: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/12.jpg)
12
By 2013, mobile phones will overtake PCs as the
most common Web access device worldwide
Source: Gartner
![Page 13: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/13.jpg)
13
In the U.S., when it comes to mobile Web traffic,
Apple and Android dominate with 81 percent
market share Source: Gartner
![Page 14: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/14.jpg)
14
Mobile is not an option.
![Page 15: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/15.jpg)
15
Native versus Web App
![Page 16: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/16.jpg)
16
Native Apps
§ Native runs faster§ Native can access hardware features§ Native is easier / harder to develop§ Native fits platform look-and-feel§ Native apps are easier to discover§ Native can be monetized§ Native can be expensive (costs)§ Native is easy to install§ Native is App Store§ Native is heavy to maintain§ Native is not reusable
![Page 17: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/17.jpg)
17
Web Apps
Cost
Know How
Reuse
Deployment
![Page 18: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/18.jpg)
18
What is better? Native or Web App?
It depends…
![Page 19: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/19.jpg)
19
Introduction HTML5
![Page 20: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/20.jpg)
20
Web Stack
![Page 21: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/21.jpg)
21
HTML5 (is just a nickname)
§ HTML5 is specified by W3C and WHATWG § HTML5 is even more than written in the specification§ HTML5 is drag and drop§ HTML5 supports local storage§ HTML5 is Web Sockets§ HTML5 needs a good new browser§ HTML5 is mobile§ HTML5 is lightweight§ HTML5 looks good§ HTML5 is a hype§ HTML5 is multimedia without plugins
![Page 22: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/22.jpg)
22
HTML5 is NEWT(New Exciting Web Technologies)
![Page 23: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/23.jpg)
23
HTML5 is NOT
§ HTML5 is not flash§ HTML5 is not (running) on IE 6, 7 and 8§ HTML5 is not SVG§ HTML5 is not geo location
![Page 24: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/24.jpg)
24
Timeline
1990 1995 2010 2015
HTML4
XHTML1
CSS2
CSS1 + JavaScript
WHATWGWeb Hypertext Application Technology Working Group
AJAX
HTML5 „RC“
Tableless Web Design
HTML
HTML2
2000 2005
Web Applications 1.0
HTML5 „final“
W3C
2022
![Page 25: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/25.jpg)
25
HTML5 is a spec about 600 pages
![Page 26: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/26.jpg)
26
HTML5 is not a big thing
![Page 27: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/27.jpg)
27
HTML5 will “never” be finished.
But you can start today!
![Page 28: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/28.jpg)
28
Mobile Web Application Frameworks
§ jQuery Mobile (http://jquerymobile.com/)§ Titanium Mobile
(http://www.appcelerator.com/products/titanium-mobile-application-development/)
§ jQTouch (http://www.jqtouch.com/)§ Sencha Touch (http://www.sencha.com)§ PhoneGap (http://phonegap.com/)
![Page 29: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/29.jpg)
29
Mobile Web Application Frameworks
§ There are lots of different frameworks§ Do not reinvent the wheel. Use them! Touch-based functions
are hard to implement.§ Evaluate the framework carefully
![Page 30: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/30.jpg)
30
Mobile WebsiteYou can build them manually
Mobile Web ApplicationsUse frameworks
![Page 32: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/32.jpg)
32
References (our favorites)
HTML5 book:http://introducinghtml5.com/
HTML5 resource:http://www.html5rocks.com/
jQuery Mobile:http://jquerymobile.com/
Netcetera, Zypressenstrasse 71, 8040 Zürich
![Page 34: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/34.jpg)
Demos
www.ro.me
http://thewildernessdowntown.com/
http://playbiolab.com/
http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
http://html5readiness.com/
http://html5demos.com/
34
![Page 35: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/35.jpg)
No Strings Attached
![Page 36: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/36.jpg)
36
Dr. Andrej VckovskiCEO
Joachim HaggerCTO
Thomas GeierCFO
Ronnie BrunnerHead of Solutions
Mike FranzHead of Business Development
Dr. Jens PiesbergenHead of Systems Engineering and Services
Dr. Hansruedi Vonder MühllHead of Software Engineering
Peter ZurbrüggOperations Manager
36
Products:• Target IDP
• Target Desktop• Target Financial
Planning• Target Web Tools
• Target Components
Expertise:• Data Quality
Assessment• Process Performance
Management• Contact Center
Performance• BI Assessment
• Systems Integration• Business and Process
Analysis• Java & .NET
• Web-, Mobile and Rich-Clients
• Agile Methods• ITIL v. 3.0
Hans Peter GränicherManaging Director D1 Solutions
Daniel BareissManaging Director Brain-Group
Jacqueline DuvoisinManaging Director Netcetera Middle East
Krume DolnenecManaging Director Netcetera Macedonia
Netcetera’s services cover the entire life cycle of an IT system
EmployeesManagement
About Netcetera
250
0
50
100
150
200
250
300
1996
2000
2005
2010
![Page 37: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14](https://reader035.fdocuments.es/reader035/viewer/2022062603/5f024dd17e708231d4039a2a/html5/thumbnails/37.jpg)
37
Award-Winning Netcetera
Swiss ICT Champion Award
Best of Swiss Web§ PostFinance iApp: silver category Innovation & bronze category
Online Marketing§ Züri Schlaflos: silver award, category Display Ads§ Wemlin: silver award, category Usability§ Kanton Zug: bronze award, category Usability§ ALIS: seal of approval, category Public Affairs§ CSS 10sekunden.ch: seal of app., category Online & Mobile Campaigns§ CSS Prämienrechner: winner, category Technology Innovation
Eclipse Award§ NeTS: Nomination as Best Commercial RCP Application
Swiss IT Award§ SBB Pathfinder
Swiss eGovernment Award§ PloneGov (www.plonegov.ch)
Java One Coding Challenge§ Grand Price für Aleksandar Nikov, CTO Netcetera Skopje