HTML5: Maturity of the Web?

  • 1,786 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,786
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
25
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5: MATURITY OF THE WEB? Sébastien Michel – 07209495 - MSc Project 1
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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