HTML5, the new buzzword

•

0 likes•433 views

The document is a presentation about HTML5. It discusses what HTML5 is, some of the new elements it introduces like canvas, video, audio, and geolocation. It also covers new features like CSS3 media queries, web fonts using WOFF, and whether HTML5 is ready for use. The presentation encourages trying out HTML5 and provides some resources for learning more.

HTML5, the new buzzword

Nova Scotia Day of DotNetNuke - 2011-06-11
Frederic Harper

The bald guy in the front
Frederic Harper
Developer Evangelist @ Microsoft
fredh@microsoft.com

http://blogs.msdn.com/b/cdndevs/
http://alabase2.com (in french)

http://linkedin.com/in/fredericharper
http://twitter.com/fharper
http://facebook.com/fharper

The rules

#1 - Camp style presentation

#2 - Law of Two Feet

The presentation

1. What is HTML5?

2. Do I have to care about it (HTML5, CSS3

and the lovely JavaScript)?

HTML5 and you
Quizz

A. You use it
B. You will use it
C. You won’t use it
D. You don’t know what I am talking about

HTML5
• Web Standard
• Next version of HTML4 (I know, I’m so brilliant)
• Draft
• 9 new structure tags
• 16 new HTML elements
• 13 new input types

header, footer, nav,
aside, figure,
section, article

Traditionnal Website
<div id=“header”>
<div id=“nav”>
<div id=“section”>
<div id=“article”> <div
id=“sid
<div id=“article”> ebar”>

<div id=“media”>

<div id=“footer”>

HTML5 Website (semantic++)
<header>
<nav>
<section>
<article>
<aside>
<article>

<figure>

<footer>

Code
<svg width="400" height="200">
<rect fill="red" x="20" y="20" width="100"
height="75" />
<rect fill="blue" x="50" y="50" width="100"
height="75" />
</svg>

Code
<canvas id=“myCanvas" width="200" height="200">
Sorry, your browser doesn’t support HTML5
</canvas>

<script type="text/javascript">
var example = document.getElementById(“myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>

Code
<video src="video.mp4" id="videoTag">
<source src="video.webm" />
<a href="http://videolink.com/">
Sorry, your browser doesn’t support HTML5
</a>
<!– Flash/Silverlight video here -->
</video>

Code
<audio src="audio.mp3" id="audioTag"
autoplay controls>
<!– Flash/Silverlight audio here -->
</audio>

Code
function getLocation() {
if (navigator.geolocation != undefined) {
navigator.geolocation.getCurrentPosition(callBack);
}
}

function callBack(position) {
var accuracy = position.coords.accuracy;
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}

Code
<style type="text/css">
@font-face {
font-family: MyFont;
src: url('Font.woff');
}
</style>

<div style="font: 24pt MyFont, sans-serif;">
I put my text here as usual.
</div>

Code
<link href="mobile.css" rel="stylesheet"
media="screen and (max-width:480px)“
type="text/css" />

<link href="netbook.css" rel="stylesheet“
media="screen and (min-width:481px) and (max-
width: 1024px)“ type="text/css" />

<link href="laptop.css" rel="stylesheet"
media="screen and (min-width:1025px)“
type="text/css" />

I am a .NET developers

You already use HTML
You already (almost) have the tools
Visual Studio 2010 SP1
Visual studio 2008 + plugin http://j.mp/mDXyps

 You can have help from HTML developers

Next steps

Try it

Read on it

Do a cool project

Have fun!

Ressources
http://www.w3.org/TR/html5/

http://caniuse.com

http://makeawesomeweb.com

http://html5gallery.com

http://html5labs.interoperabilitybridges.com/

http://www.beautyoftheweb.com

Questions? Comments?
Frederic Harper
Developer Evangelist @ Microsoft
fredh@microsoft.com

http://blogs.msdn.com/b/cdndevs/
http://alabase2.com (in french)

http://linkedin.com/in/fredericharper
http://twitter.com/fharper
http://facebook.com/fharper

What's hot

Css best practices style guide and tips

Chris Love

Saide de fotos

maumaugrelhados

Hello, Canvas.

Seth McLaughlin

$C:\fakepath\url$ $C:\fakepath\url$

C:\fakepath\url

guest6b97bc

The document is a presentation on the history of the Internet. It discusses how the Internet began as a US military program called ARPANET in the 1960s to enable communication between universities and researchers. Through the 1970s and 80s, ARPANET evolved and expanded to connect many universities, labs, and companies. Finally, in the 1990s, the World Wide Web was created, allowing for easy access to information through browsers and popularizing the Internet for public use.

Video gouache

guest2f77a50f

Nanoformats

rozario

The document discusses nanoformats, which are proposed as design patterns for HTML similar to microformats. Nanoformats aim to improve development processes, code quality, testing and extensibility through a component-based methodology. They provide structure to HTML and allow content to be programmatically discovered and manipulated. Examples show how nanoformats can help solve problems like generic code, semantically incorrect markup, and improve testability.

Html5 - Novas Tags na Prática!

Rômulo Reis de Oliveira

Basics of Front End Web Dev PowerPoint

Sahil Gandhi

Here are some tips for hands-on part 2: - Add a class like .paragraph to the <p> tags containing your sentences - Add an ID like #image to the <img> tag - In an internal or external CSS file: .paragraph { color: blue; font-size: 20px; } #image { padding: 10px; display: block; margin: 0 auto; } - For background: body { background-color: lightgray; } - Play around with other CSS properties like text-align, font-family etc.

Slideshare

nelsonvalentin

CSS3 Takes on the World

Jonathan Snook

Modern Front-End Development

mwrather

How to use CSS3 in WordPress

Suzette Franck

The document provides an overview of how to use CSS3 in WordPress. It introduces the presenter and their goal to teach the audience at least one new thing. It then covers CSS/CSS3 basics, terminology, syntax, properties, specificity, inspecting CSS, new CSS3 modules like colors, gradients, border radius, and how to add CSS in WordPress through themes, plugins or inline styles. Resources for further learning CSS are also provided, followed by time for questions.

Jager

paskar

Jager planetaire nevels

paskar

Bilder einbinden ist kein Thema, oder?

Walter Ebert

This document discusses best practices for optimizing images on websites. It covers image formats like JPG, PNG and SVG and techniques such as lazy loading, responsive images using srcset, and optimizing tools. It also discusses alternatives to icon fonts like using SVG sprites. The overall message is on improving page performance by choosing the right image format and implementing optimization strategies.

Илья Пухальский (EPAM Systems)

Ontico

The document discusses techniques for making SVG graphics responsive. It describes using media queries directly in SVG code to serve different background images based on viewport width. It also covers embedding SVG using inline, <img>, and <object> tags and their tradeoffs. The "Clown Car Technique" embeds the SVG as an <object> and uses media queries inside the SVG to switch background images. The "Poor Man's Method" defines all icon variants inside the SVG and shows/hides them with media queries. The "Man With A Gun's Method" uses transforms to adapt a single SVG to different sizes. JavaScript can also be added to SVG to make it more dynamic and responsive.

High Performance Images

Walter Ebert

How to use CSS3 in WordPress - Sacramento

Suzette Franck

The document provides an overview of how to use CSS3 in WordPress. It begins with introductions and then covers CSS/CSS3 basics, terminology, syntax, properties, comments, specificity, and inspecting CSS. It discusses using CSS in WordPress by adding it via themes, plugins, or inline styles. Finally, it highlights new CSS3 modules like colors, gradients, border radius, shadows, and transformations, and provides CSS resources.

Multimedia on the web - HTML5 video and audio

Christian Heilmann

Bilder usw...

Walter Ebert

This document provides information about various image formats (GIF, JPEG, PNG, SVG, WebP), optimizing images, responsive images, icon fonts versus SVG sprites, animations, and outdated techniques no longer needed due to HTTP/2. It includes links to resources for using different image formats, optimizing images, responsive image techniques like srcset and picture, icon fonts versus SVG sprites, video versus animated GIF, and outdated practices with HTTP/2.

What's hot (20)

Css best practices style guide and tips

Saide de fotos

Hello, Canvas.

$C:\fakepath\url$ $C:\fakepath\url$

C:\fakepath\url

Video gouache

Nanoformats

Html5 - Novas Tags na Prática!

Basics of Front End Web Dev PowerPoint

Slideshare

CSS3 Takes on the World

Modern Front-End Development

How to use CSS3 in WordPress

Jager

Jager planetaire nevels

Bilder einbinden ist kein Thema, oder?

Илья Пухальский (EPAM Systems)

High Performance Images

How to use CSS3 in WordPress - Sacramento

Multimedia on the web - HTML5 video and audio

Bilder usw...

Viewers also liked

Simon Rowell

Digital Publishing Forum NZ

This document provides a summary of intellectual property considerations for digital publishers in 3 sentences or less: Digital publishers must understand copyright laws to properly protect and license their content. This includes securing initial ownership of copyrighted works, protecting brands through trademarks, and properly licensing copyrighted content for syndication or third party use. The document outlines key aspects of copyright, licensing, and other intellectual property issues and best practices for digital publishers to manage their rights and comply with relevant laws.

Social networking and online community-building

Digital Publishing Forum NZ

Facebook, Twitter, Ning. Online social networks are seeing huge growth and smart book marketers are joining their readers online and building communities. Random House Canada's Heather Sanderson is a hands-on practitioner with plenty of experience of what works and what's hype. In this session, Heather explains how these social media work in book marketing, gives do's and don'ts for their successful use, and lifts the hood on some real-life case studies. Heather Sanderson, Manager, Digital Sales and Business Development, Random House of Canada

Paid Search and Web Analytics - SEO Part 2

Digital Publishing Forum NZ

Search Engine Optimisation (SEO)

Digital Publishing Forum NZ

This session looks at the principles of Search Engine Optimisation (SEO) to attract website visitors, and the tools and techniques for tuning website effectiveness. Using book marketing examples, it focuses on so-called organic search (natural search) and doesn't try to cover everything: rather it zeroes in on the most important things that website owners can do themselves with minimal technical knowledge. Search Engine Optimisation is part of the broader field of Search Engine Marketing (SEM). The related Part 2 presentation covers Paid Search using Google Adwords, YouTube and similar opportunities and briefly looks at measuring results using Google Analytics. Martin Taylor, Director, Digital Strategies Limited, Auckland, New Zealand

Introduction to Digital Publishing for Children's Publishers, Writers and Ill...

Digital Publishing Forum NZ

A Digital Roadmap for Writers

Digital Publishing Forum NZ

Looks at recent developments in ebooks and digital publishing, including Apple's iPad, and the impact of digitisation on authors. Examines changing role of the publisher, digital contracts, ebook self-publishing options, how writing might change. Finally, there's a crash course in internet marketing, an essential skill for writers. Presentation to the New Zealand Society of Authors, 15 May 2010 By Martin Taylor, Director, Digital Publishing Forum

Viewers also liked (6)

Simon Rowell

Social networking and online community-building

Paid Search and Web Analytics - SEO Part 2

Search Engine Optimisation (SEO)

Introduction to Digital Publishing for Children's Publishers, Writers and Ill...

A Digital Roadmap for Writers

Similar to HTML5, the new buzzword

Wordcamp Thessaloniki 2011 The Nextweb

George Kanellopoulos

HTML5 is a draft specification from the W3C that adds new elements like canvas, video and audio to HTML and changes some older elements. It is not yet finalized and continues to evolve. HTML5 allows embedding multimedia like video without plugins through new elements like <video> and <audio>. It also introduces new canvas element for drawing 2D graphics and SVG for vector graphics. HTML5 supports local storage and geolocation in the browser.

What you need to know bout html5

Kevin DeRudder

The document provides an overview of HTML5 including: - New tags such as article, aside, audio, canvas, and video - The structure of an HTML5 page including the doctype, meta charset, and link types - Forms with new input types and validation attributes - Playing audio and video with HTML5 tags and controlling them with JavaScript - Drawing graphics on a canvas using JavaScript - Web workers for running scripts in background threads - Options for data storage including web storage, web SQL, and IndexedDB

HTML 5 - Overview

Marcelio Leal

HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.

Web Development for UX Designers

Ashlimarie

HTML5 - A Whirlwind tour

Lohith Goudagere Nagaraj

This document provides an overview of HTML5 and related technologies. It discusses how HTML5 is more than just HTML, and covers the HTML5 specification process and components. It then provides a tour of new HTML5 features like <video>, <audio>, SVG, <canvas>, geolocation, and CSS3 specifications including borders, colors, shadows, backgrounds, fonts, media queries and transforms. The document demonstrates several of these features and provides resources for further information.

Put the 5 in HTML

HTML5, the new buzzword

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to HTML5, the new buzzword

Similar to HTML5, the new buzzword (20)

More from Frédéric Harper

More from Frédéric Harper (20)

Recently uploaded

Recently uploaded (20)

HTML5, the new buzzword