jumpstart html5 development with visual · history of standards specification html 4.01 •w3c...

27

Upload: others

Post on 28-Jul-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000
Page 2: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

Jumpstart HTML5 Development with Visual Studio 2010

Walter Wong MVP – Developer Security Gain Secure [email protected] http://walterwws.wordpress.com

Page 3: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

Agenda

Introduction to HTML5

Visual Studio and HTML5

HTML5, CSS and Javascript

Page 4: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

“If you think HTML5 is totally different from everything else, then you still don't understand what HTML5 is” Quote by Chan Wei Min aka Marauderz, VB.Net MVP

Page 5: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

History of Standards Specification

HTML 4.01

• W3C Recommendation 24th December 1999

XHTML 1.0

• W3C Recommendation 26th January 2000

XHTML 1.1

• W3C Recommendation 21st May 2001

Page 6: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

You will use XHTML…… in 2001

What are you using now? HTML4 in 2011

Page 7: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000
Page 8: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

Apple say “no” to Flash. Plug-ins are OUT

HTML5 is IN

Page 9: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000
Page 10: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000
Page 11: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000
Page 12: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

Apple loves HTML5 Google loves HTML5

Microsoft loves HTML5

Page 13: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

1. http://www.beautyoftheweb.com 2. Box2DRaphaelJoy by Wei Min

Page 14: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

Visual Studio and HTML5

Visual Studio 2010 SP1 support HTML5 and CSS3 validation

HTML5 intellisense supported via additional add-in. Available in Visual Studio Gallery

You can start developing HTML5 using Visual Studio 2011 Today!

Page 16: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

HTML5 CSS 3.0 Javascript (Jquery)

Page 17: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

HTML 5

Is terse

Additional new tags

Common layout idioms get promoted to first class elements

Enhanced with Accessible Rich Internet Application (ARIA) 1.0 standard

Includes Audio and Video support into standards

Support scalable graphics

Page 18: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

HTML5 Syntax

Enhancement on controls

<input type=“date”, required>

Layout Elements

<header>,<footer>,<aside>

Multimedia Elements

<audio>, <video>

Many others….

Page 19: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

HTML Layout design

Page 20: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

Recommended Layout for HTML5

Page 21: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

Introduction to HTML5

Page 22: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

CSS 3.0

Classic CSS still works

Reduce graphic designer burden

New enhancements Radius corner

Box-Shadow

Opacity

Columns Layout

Gradient color * most browser not support yet.

Page 23: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

CSS 3.0

Page 24: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

Javascript

Recommend JQuery.js

For data operation – datajs Available in Codeplex

Support Odata operations

JQuery.tmpl.js Support template

Prevent cross-site scripting (XSS)

Page 25: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

Javascript / JQuery

Page 26: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

Key Take Away

Reuse existing HTML skills

No rebuild, just enhance of current HTML page

Easy to get started

Feature detection script is required for the moment

Final recommendation of HTML5 specification by W3C is due on 2022

Features development is driven by vendors

Page 27: Jumpstart HTML5 Development with Visual · History of Standards Specification HTML 4.01 •W3C Recommendation 24th December 1999 XHTML 1.0 •W3C Recommendation 26th January 2000

Questions & Answers [email protected]