HTML5: Maturity of the Web?

HTML5:
MATURITY OF
THE WEB?
Sébastien Michel – 07209495 - MSc Project

1

1- INTRODUCTION
HTML5
1 - Introduction • HTML5 is a trending topic:
2 - Analyze
2.1 - HTML – « The world is moving to HTML5 » (Steve Jobs, 2010)
2.2 - What is
HTML5? – « You can’t escape it. Everyone’s talking about HTML5 »
2.3 - Why maturity? (Smashing Magazine, 2010)
3 – Design &
Development
3.1 - Guidelines • Objectives:
3.2 - Website
– Study HTML5.
3.3 - Demonstration
4 - Evaluation – Produce a guidelines document.
4.1 - Guidelines – Produce a website.
4.2 - Website
5- Management
6- After the project
7- Conclusion

Sébastien Michel - 07209495 - MSc Project 2

HTML5
1 - Introduction
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?

2- ANALYZE
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
7- Conclusion


2.2 – WHAT IS HTML5?
HTML5
1 - Introduction
• 5th version of HTML
2 - Analyze
2.1 - HTML • Started in 2003.
2.2 - What is • Candidate Recommendation planned in 2012.
HTML5?
• Final Recommendation in 2022.
2.3 - Why maturity?
3 – Design &
Development
3.1 - Guidelines “Standards development isn’t like
3.2 - Website making software”
3.3 - Demonstration
4 - Evaluation
4.1 - Guidelines (Ian Hickson, 2008)
4.2 - Website
5- Management
7- Conclusion


HTML5
1 - Introduction
• Video & Audio
2 - Analyze
2.1 - HTML – HTML4: Multimedia and the Web
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 – HTML5: Web Multimedia
7- Conclusion


HTML5
1 - Introduction
• Drag & Drop
2 - Analyze
2.1 - HTML – Draggable attribute on any element you want.
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
7- Conclusion


HTML5
1 - Introduction
• Offline Applicaton
2 - Analyze
2.1 - HTML – A Web application works without Internet.
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
7- Conclusion


2.3 – WHY MATURITY?
HTML5
1 - Introduction
• HTML4 • HTML5
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?
2.3 - Why maturity? AUDIO WEB
3 – Design & • Text
Development
3.1 - Guidelines • Images
3.2 - Website VIDEO WEB • Audio
3.3 - Demonstration • Video
4 - Evaluation
4.1 - Guidelines
4.2 - Website
3 entities 1 entity
5- Management
7- Conclusion


HTML5
1 - Introduction
• HTML4 / Web 2.0
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?
2.3 - Why maturity? Internet
3 – Design &
Development
3.1 - Guidelines
3.2 - Website
3.3 - Demonstration
4 - Evaluation
4.1 - Guidelines
4.2 - Website
5- Management
7- Conclusion


HTML5
1 - Introduction
• HTML5 / Internet of Things
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?
2.3 - Why maturity? Internet
3 – Design &
Development
3.1 - Guidelines
3.2 - Website
3.3 - Demonstration
4 - Evaluation
4.1 - Guidelines
4.2 - Website
5- Management
7- Conclusion GeoLocation, Web Storage, Offline Application …)


HTML5
1 - Introduction <header>, <article>,
• Semantics <section>, …
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?
2.3 - Why maturity?
3 – Design &
HTML5
Development
3.1 - Guidelines
3.2 - Website
3.3 - Demonstration
<div id =“header”>,
4 - Evaluation
<div id = “content”>
4.1 - Guidelines
4.2 - Website
5- Management
7- Conclusion HTML4


HTML5
1 - Introduction
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?

3 – DESIGN &
2.3 - Why maturity?
3 – Design &

DEVELOPMENT
Development
3.1 - Guidelines
3.2 - Website
3.3 - Demonstration
4 - Evaluation
4.1 - Guidelines
4.2 - Website
5- Management
7- Conclusion


3.1 GUIDELINES
HTML5
1 - Introduction
• Objective: how to implement HTML5 features
2 - Analyze
2.1 - HTML • Target: developers
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
7- Conclusion


3.2 WEBSITE
HTML5
1 - Introduction
• Objective: Demonstrate the features of HTML5
2 - Analyze
2.1 - HTML • Target: Internet users
2.2 - What is • Contents: Features implemented in the guidelines
HTML5?
• Languages: HTML5 + CSS3
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
7- Conclusion


HTML5
1 - Introduction
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?

3.3 DEMONSTRATION
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
7- Conclusion


HTML5
1 - Introduction
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?

4 - EVALUATION
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
7- Conclusion


4.1 GUIDELINES
HTML5
1 - Introduction
• Feedbacks from the website development
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?
2.3 - Why maturity?
3 – Design &
Nb.Issue
Development
2,5
3.1 - Guidelines
3.2 - Website 2

3.3 - Demonstration 1,5
4 - Evaluation
1
4.1 - Guidelines
Nb.Issue
4.2 - Website 0,5

5- Management 0
7- Conclusion


4.2 WEBSITE
HTML5
1 - Introduction
• Accessibility (colors, access keys)
2 - Analyze
2.1 - HTML – Is the website accessible for everyone?
2.2 - What is Background
Color
Foreground
Color
WCAG 2 AA WCAG 2 AA WCAG 2 AAA
Compliant Compliant Compliant
WCAG 2 AAA
Compliant

HTML5? (Yes/No) (18pt+)
(Yes/No)
(Yes/No) (18pt+)
(Yes/No)

2.3 - Why maturity? #C8C5B2 #349CBB No No No No
3 – Design & #349CBB #FFFFFF No Yes No No
#349CBB #00005A Yes Yes No Yes
Development
3.1 - Guidelines
• W3C (Markup Validation Service)
3.2 - Website
3.3 - Demonstration – Highlight errors in the source code.
4 - Evaluation • Features
4.1 - Guidelines
– All the features have been implemented?
4.2 - Website
5- Management • Design
6- After the project – Compare with the models.
7- Conclusion


HTML5
1 - Introduction
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?

5 - MANAGEMENT
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
7- Conclusion


5 - MANAGEMENT
HTML5
1 - Introduction
• Logbook: keep a log about the work done.
2 - Analyze
2.1 - HTML • MindMap: keep ideas.
2.2 - What is • Meetings: help to improve the project to meet the
HTML5? objectives.
2.3 - Why maturity?
3 – Design & • Gantt: how the time has been managed for every tasks.
Development – 1st Gantt during the project proposal.
3.1 - Guidelines – 2nd during the project.
3.2 - Website
3.3 - Demonstration
4 - Evaluation
4.1 - Guidelines
4.2 - Website
5- Management
7- Conclusion


HTML5
1 - Introduction
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?

6 – AFTER THE
2.3 - Why maturity?
3 – Design &

PROJECT
Development
3.1 - Guidelines
3.2 - Website
3.3 - Demonstration
4 - Evaluation
4.1 - Guidelines
4.2 - Website
5- Management
7- Conclusion


6 – AFTER THE PROJECT
HTML5
1 - Introduction
• Improve the current materials
2 - Analyze
2.1 - HTML – Web Socket and Offline Application examples.
2.2 - What is – Evaluate the guidelines with « real » developers.
HTML5?
– Evaluate the website with a wide range of users.
2.3 - Why maturity?
3 – Design & • Every six months, check HTML5 supports.
Development
3.1 - Guidelines
3.2 - Website
3.3 - Demonstration
4 - Evaluation
4.1 - Guidelines
4.2 - Website
5- Management
7- Conclusion


HTML5
1 - Introduction
2 - Analyze
2.1 - HTML
2.2 - What is
HTML5?

7 - CONCLUSION
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
7- Conclusion


7 - CONCLUSION
HTML5
1 - Introduction
• HTML5:
2 - Analyze
2.1 - HTML – Free the multimedia content.
2.2 - What is – Desktop application and Web application harder to
HTML5? differentiate.
2.3 - Why maturity?
3 – Design & – Prepare for the future of Internet.
Development • MSc Project:
3.1 - Guidelines – Four months!
3.2 - Website
3.3 - Demonstration – Self-management is important.
4 - Evaluation – HTML5 is an added value in my skills.
4.1 - Guidelines
4.2 - Website
5- Management
7- Conclusion


HTML5: Maturity of the Web?

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie HTML5: Maturity of the Web?

Ähnlich wie HTML5: Maturity of the Web? (20)

HTML5: Maturity of the Web?