Html 5

28
The Future in a Flash

description

 

Transcript of Html 5

Page 1: Html 5

The Future in a Flash

Page 2: Html 5

What is HTML?• Hypertext Markup Language• HTML elements form the building blocks of all

websites

Page 3: Html 5

What is the problem?• Browser inconsistency• Reliance on plug-ins

Page 4: Html 5

What is HTML 5?• Successor of HTML & XHTML• Developed by WHATWG (Web Hypertext

Application Technology Working Group)• Monitored by W3C (World Wide Web

Consortium)

Page 5: Html 5

IS HTML5 THE FUTURE?

Page 6: Html 5

Semantics Video

Audio Canvas

Drag & Drop

Local Storage

Geolocation Image & Type

HTML5 — Not a “thing”A collection of new conventions and methods

Page 7: Html 5

New in HTML5 — SemanticsContent is more organized, search friendly, and indexable

Page 8: Html 5

New in HTML5 — <Video>Using an HTML5 Javascript Library, your videos can be played back on the latest mobile devices and even on older browsers that require Flash.

Page 9: Html 5

New in HTML5 — <Audio>HTML5 specifies a standard way to include audio, with the audio element.

The audio element can play sound files, or an audio stream.

Page 10: Html 5

New in HTML5 — <Canvas>2D drawing platform within the browser without the need of a plug-in such as Flash. Applications include web apps, data visualization, animated graphics, and gaming.

Page 11: Html 5

New in HTML5 — Drag & Drop(DnD) Drag and drop is one of the often used functionalities throughout websites for various reasons.

HTML 5 allows this function to be implemented with ease.

Page 12: Html 5

New in HTML5 — GeolocationWebsites can benefit from knowing exactly where the user accessing their site is from, enabling a more personalized local experience.

Page 13: Html 5

New in HTML5 — Local StorageClient-side key-value database, stored in the users browser

The users data is saved on their machine inside their browser, not on the server

Page 14: Html 5

DESIGN IN HTML5

Page 15: Html 5

Design in HTML5 — Gradients, Transparencies, Shadows, Rounded Corners, and Text Effects

Page 16: Html 5

Design in HTML 5 — TypographyMore diverse, more brand friendly, more flexible for SEO and indexing

Page 17: Html 5
Page 18: Html 5
Page 19: Html 5

Design in HTML5 — Gaming

Page 20: Html 5

Design in HTML5 — Rich Media Experience

Page 21: Html 5

Design in HTML5 — Rich Media Experience

Page 22: Html 5

Design in HTML5 — Responsive Design

Page 23: Html 5

HTML5 FOR MARKETERS

Page 24: Html 5

Better for SEO• More specific tags to determine type of

content• Multimedia indexing• Better page segmentation• More unique function with crawlability

Page 25: Html 5

Mobile Features• Video integration• Audio integration• Better compatibility• Higher exposure across multiple devices

Page 26: Html 5

Email Marketing• Embedded video emails• No need for plugin compatibility• Cross browser support

Page 27: Html 5

Summary• Content/Media will become more important

to SEO as HTML5 makes it easier to rank and index• HTML 5 is important for marketing across

multiple screens/devices• HTML 5 imagines a web that is more visually

and interactively robust• The time to adopt is now, in order to prepare

for what is to come

Page 28: Html 5

THANK YOU.