37
1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

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

2

Websites (Mobile) Applications

guild42.ch

Google Docs

Gmail

Remember the Milk

derbund.ch

Google Reader

Facebook

Twitter

Page 3: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

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

4

About Netcetera

Page 5: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

5

Mobile

Page 6: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

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

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

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

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

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

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

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

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

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

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

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

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

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

19

Introduction HTML5

Page 20: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

20

Web Stack

Page 21: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

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

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

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

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

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

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

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

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

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

30

Mobile WebsiteYou can build them manually

Mobile Web ApplicationsUse frameworks

Page 31: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

31

Technical Demonstration

http://slides.html5rocks.com

Page 32: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

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 33: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

33

Questions?

Marcel [email protected]+41-31-740 75 73

Reto [email protected]+41-31-740 75 02

Page 34: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

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

No Strings Attached

Page 36: HTML5 - Guild42.ch · 1 HTML5 Marcel Kessler, Reto Giger guild42.ch, Restaurant Schmiedstube in Bern 2011-11-14

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

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