HTML5: Maturity of the Web?

2,000 views
1,946 views

Published on

Présentation de mon projet de fin d\'année pour le MSc Multimedia Computing.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,000
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5: Maturity of the Web?

  1. 1. HTML5: MATURITY OF THE WEB? Sébastien Michel – 07209495 - MSc Project 1
  2. 2. 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
  3. 3. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 3
  4. 4. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 4
  5. 5. 2.2 – WHAT IS HTML5? 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 5
  6. 6. 2.2 – WHAT IS HTML5? 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 6
  7. 7. 2.2 – WHAT IS HTML5? 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 7
  8. 8. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 8
  9. 9. 2.3 – WHY MATURITY? 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 9
  10. 10. 2.3 – WHY MATURITY? 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 6- After the project 7- Conclusion GeoLocation, Web Storage, Offline Application …) Sébastien Michel - 07209495 - MSc Project 10
  11. 11. 2.3 – WHY MATURITY? 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 6- After the project 7- Conclusion HTML4 Sébastien Michel - 07209495 - MSc Project 11
  12. 12. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 12
  13. 13. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 13
  14. 14. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 14
  15. 15. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 15
  16. 16. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 16
  17. 17. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 17
  18. 18. 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 Sébastien Michel - 07209495 - MSc Project 18
  19. 19. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 19
  20. 20. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 20
  21. 21. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 21
  22. 22. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 22
  23. 23. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 23
  24. 24. 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 6- After the project 7- Conclusion Sébastien Michel - 07209495 - MSc Project 24

×