html5: maturity of the web?

HTML5:

MATURITY OF

THE WEB? Sébastien Michel – 07209495 - MSc Project

1

• Objectives:

– Study HTML5.

– Produce a guidelines document.

– Produce a website.

1- INTRODUCTION HTML5 1 - Introduction 2 - Analyze 2.1 - HTML 2.2 - What is HTML5? 2.3 - Why maturity? 3 – Design & Development 3.1 - Guidelines 3.2 - Website 3.3 - Demonstration 4 - Evaluation 4.1 - Guidelines 4.2 - Website 5- Management 6- After the project 7- Conclusion

2 Sébastien Michel - 07209495 - MSc Project

• HTML5 is a trending topic:

– « The world is moving to HTML5 » (Steve Jobs, 2010)

– « You can’t escape it. Everyone’s talking about HTML5 » (Smashing Magazine, 2010)

2- ANALYZE

HTML5 1 - Introduction 2 - Analyze 2.1 - HTML 2.2 - What is HTML5? 2.3 - Why maturity? 3 – Design & Development 3.1 - Guidelines 3.2 - Website 3.3 - Demonstration 4 - Evaluation 4.1 - Guidelines 4.2 - Website 5- Management 6- After the project 7- Conclusion


2.2 – WHAT IS HTML5? HTML5 1 - Introduction 2 - Analyze 2.1 - HTML 2.2 - What is HTML5? 2.3 - Why maturity? 3 – Design & Development 3.1 - Guidelines 3.2 - Website 3.3 - Demonstration 4 - Evaluation 4.1 - Guidelines 4.2 - Website 5- Management 6- After the project 7- Conclusion


• 5th version of HTML

• Started in 2003.

• Candidate Recommendation planned in 2012.

• Final Recommendation in 2022.

“Standards development isn’t like making software”

(Ian Hickson, 2008)



• Video & Audio

– HTML4: Multimedia and the Web

– HTML5: Web Multimedia



• Drag & Drop

– Draggable attribute on any element you want.



• Offline Applicaton

– A Web application works without Internet.

2.3 – WHY MATURITY? HTML5 1 - Introduction 2 - Analyze 2.1 - HTML 2.2 - What is HTML5? 2.3 - Why maturity? 3 – Design & Development 3.1 - Guidelines 3.2 - Website 3.3 - Demonstration 4 - Evaluation 4.1 - Guidelines 4.2 - Website 5- Management 6- After the project 7- Conclusion


AUDIO

WEB VIDEO

WEB

• Text

• Images

• Audio

• Video

• HTML4

• HTML5

1 entity 3 entities



• HTML4 / Web 2.0

Internet



• HTML5 / Internet of Things

Internet

GeoLocation, Web Storage, Offline Application …)



<header>, <article>, <section>, …

<div id =“header”>, <div id = “content”>

HTML4

HTML5

• Semantics



3 – DESIGN &

DEVELOPMENT

3.1 GUIDELINES HTML5 1 - Introduction 2 - Analyze 2.1 - HTML 2.2 - What is HTML5? 2.3 - Why maturity? 3 – Design & Development 3.1 - Guidelines 3.2 - Website 3.3 - Demonstration 4 - Evaluation 4.1 - Guidelines 4.2 - Website 5- Management 6- After the project 7- Conclusion


• Objective: how to implement HTML5 features

• Target: developers

3.2 WEBSITE HTML5 1 - Introduction 2 - Analyze 2.1 - HTML 2.2 - What is HTML5? 2.3 - Why maturity? 3 – Design & Development 3.1 - Guidelines 3.2 - Website 3.3 - Demonstration 4 - Evaluation 4.1 - Guidelines 4.2 - Website 5- Management 6- After the project 7- Conclusion


• Objective: Demonstrate the features of HTML5

• Target: Internet users

• Contents: Features implemented in the guidelines

• Languages: HTML5 + CSS3



3.3 DEMONSTRATION



4 - EVALUATION

4.1 GUIDELINES HTML5 1 - Introduction 2 - Analyze 2.1 - HTML 2.2 - What is HTML5? 2.3 - Why maturity? 3 – Design & Development 3.1 - Guidelines 3.2 - Website 3.3 - Demonstration 4 - Evaluation 4.1 - Guidelines 4.2 - Website 5- Management 6- After the project 7- Conclusion


• Feedbacks from the website development

0

0,5

1

1,5

2

2,5

Nb.Issue

Nb.Issue

4.2 WEBSITE HTML5 1 - Introduction 2 - Analyze 2.1 - HTML 2.2 - What is HTML5? 2.3 - Why maturity? 3 – Design & Development 3.1 - Guidelines 3.2 - Website 3.3 - Demonstration 4 - Evaluation 4.1 - Guidelines 4.2 - Website 5- Management 6- After the project 7- Conclusion


• Accessibility (colors, access keys)

– Is the website accessible for everyone?

• W3C (Markup Validation Service)

– Highlight errors in the source code.

• Features

– All the features have been implemented?

• Design

– Compare with the models.

Background

Color

Foreground

Color

WCAG 2 AA

Compliant

(Yes/No)

WCAG 2 AA

Compliant

(18pt+)

(Yes/No)

WCAG 2 AAA

Compliant

(Yes/No)

WCAG 2 AAA

Compliant

(18pt+)

(Yes/No)

#C8C5B2 #349CBB No No No No

#349CBB #FFFFFF No Yes No No

#349CBB #00005A Yes Yes No Yes



5 - MANAGEMENT

5 - MANAGEMENT HTML5 1 - Introduction 2 - Analyze 2.1 - HTML 2.2 - What is HTML5? 2.3 - Why maturity? 3 – Design & Development 3.1 - Guidelines 3.2 - Website 3.3 - Demonstration 4 - Evaluation 4.1 - Guidelines 4.2 - Website 5- Management 6- After the project 7- Conclusion


• Logbook: keep a log about the work done.

• MindMap: keep ideas.

• Meetings: help to improve the project to meet the objectives.

• Gantt: how the time has been managed for every tasks.

– 1st Gantt during the project proposal.

– 2nd during the project.



6 – AFTER THE

PROJECT



6 – AFTER THE PROJECT

• Improve the current materials

– Web Socket and Offline Application examples.

– Evaluate the guidelines with « real » developers.

– Evaluate the website with a wide range of users.

• Every six months, check HTML5 supports.



7 - CONCLUSION



7 - CONCLUSION

• HTML5:

– Free the multimedia content.

– Desktop application and Web application harder to differentiate.

– Prepare for the future of Internet.

• MSc Project:

– Four months!

– Self-management is important.

– HTML5 is an added value in my skills.

html5: maturity of the web?

Documents