East of Toronto .NET Usergroup - Put the 5 in HTML

•

0 j'aime•560 vues

Frédéric Harper

Technologie Design

A. You know HTML5 and use it now

B. You know what is HTML5 and don’t use it

C. You don’t know what I am talking about

Performance Semantics Styling Multimedia

3D Effects Offline& Storage Connectivity Device Access

First draft Working draft Last call Recommendation candidate Recommendation

 Video  Drag-and-drop
 Document editing  Canvas
 Offline storage  Cross-document
 CSS3 Media messaging
Queries
 Audio
 Microdata
 Browser history
 WOFF
management
 Web Sockets
 Semantics elements
 Web Workers
 AND MUCH MORE!

<div id=“header”>
<div id=“nav”>

“sidebar”>
<div id=“section”>

<div id=
<div id=“article”>
<div id=“article”>

<div id=“media”>
<div id=“footer”>

<header>
<nav>
<section>

<aside>
<article>
<article>

<figure>
<footer>

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

<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" />

X X X X X Lowest Common
X X X Dominator
X X
Only use features natively
X X X
available in all target
X X browsers

X X X X X Polyfill Enriched
X X X X X

X X Only use features either
natively available OR
X X X available via JavaScript
polyfill
X X

polyfill
(n) poly • fill: JavaScript that implants HTML5
functionality in a browser that does not offer
native support

X X X X X
Alternate
X X X X X Experiences
X X X X X

X X X X X Only use features
available in target
X X browsers AND design
alternate experience for
other browsers

 http://caniuse.com/

 http://www.modernizr.com/

iOS Android Windows
Phone
Geolocation   
 
Offline   
Local Storage   
Video/Audio   
Canvas  
SVG   
WebSQL  
Gradients*   
CSS3 Animations*   
Text Shadows  
CSS3 Transforms 

1. You already know HTML

2. You already know the tools

1. You already know HTML

2. You already know the tools

3. Cross browsers / platforms / devices

1. You already know HTML

2. You already know the tools

3. Cross browsers / platforms / devices

4. One of the future technology

http://www.w3.org/TR/html5/
http://caniuse.com
http://www.modernizr.com/
http://makeawesomeweb.com
http://html5gallery.com
http://diveintohtml5.org/
http://www.html5tutorial.info/
http://www.beautyoftheweb.com
http://html5labs.interoperabilitybridges.com/

Frederic Harper
Developer Evangelist @ Microsoft
fredh@microsoft.com

http://webnotwar.ca
http://outofcomfortzone.net

Contenu connexe

Tendances

Aplicaciones Web Profesores

Luis Marcelo Ortiz Contreras

Pinkoi Mobile Web

mikeleeme

Web topic 24 usage of web browser

CK Yang

How to build a Portofino application

Giampiero Granatella

Making Chrome Extension with AngularJS

Ben Lau

Writing Scalable and Maintainable CSS

Dmitry Sheiko

Bruce lawson-over-the-air

brucelawson

Why Open Web Standards are cool and will save the world. Or the Web, at least.

brucelawson

Don't touch the mobile parts

Francesco Fullone

Forget the empty "Web 2.0" buzzword! Web development, however, is changing. In this session, Bruce gives and overview of HTML5, its intelligent forms, scriptable images and native video. Together with CSS3 and SVG, it will change the way you work making it easier to develop exciting applications. The emergence of more and more Web-enabled devices presents headaches: do you write and test many sites for different devices, or make one site for all? Some simple techniques help you write one site to work everywhere, saving you time and grey hairs. Web development 2.0: Web workers of the world, relax!

Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland

brucelawson

The modern web developer faces a moral choice when creating sites and apps. The angel on your shoulder tells you to use standards and respect accessibility across users of AT, older browsers, mobile, etc. The devil on your other shoulder meanwhile tells you to use all the shiny, satisfy your ego, and leave user agents over two weeks old in the dust. This talk walks you through the dilemma, looking at the perils of embracing the serpent and presenting solutions that will allow you to achieve a satisfactory compromise. We know the devil has all the good albums, and we want to rock out as much as you do! But not at the expense of the Web’s greatest strengths!

Angels versus demons: balancing shiny and inclusive

Chris Mills

Introduction to TomatoCMS

Phuoc Nguyen

Meet The Family

Beau Lebens

Behind Pinkoi Window Redesign

mikeleeme

Web Design class( HTML-01)

DUSRA SOFT

Wordpress multisite

Binh Dang Ngoc

How browser accessibility can enhance safe driving (AGL Summit Nov 2020)

Igalia

Tendances (17)

Aplicaciones Web Profesores

Pinkoi Mobile Web

Web topic 24 usage of web browser

How to build a Portofino application

Making Chrome Extension with AngularJS

Writing Scalable and Maintainable CSS

Bruce lawson-over-the-air

Why Open Web Standards are cool and will save the world. Or the Web, at least.

Don't touch the mobile parts

Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland

Angels versus demons: balancing shiny and inclusive

Introduction to TomatoCMS

Meet The Family

Behind Pinkoi Window Redesign

Web Design class( HTML-01)

Wordpress multisite

How browser accessibility can enhance safe driving (AGL Summit Nov 2020)

En vedette

123

collaborationnation

The Geeza'S

nmimic1991

Martin Taylor Intro

Digital Publishing Forum NZ

Pathways Project on NCSU Web Dev

Jason Austin

Reporting features for b2 bi edi solution provider a pentaho solution

Sigma Infosolutions, LLC

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

A Digital Roadmap for Writers

Digital Publishing Forum NZ

En vedette (6)

123

The Geeza'S

Martin Taylor Intro

Pathways Project on NCSU Web Dev

Reporting features for b2 bi edi solution provider a pentaho solution

A Digital Roadmap for Writers

Similaire à East of Toronto .NET Usergroup - Put the 5 in HTML

FITC Spotlight HTML5 - The state of the web

Frédéric Harper

WordCamp Thessaloniki2011 The NextWeb

George Kanellopoulos

Word camp nextweb

Panagiotis Grigoropoulos

Word camp nextweb

GreekTuts Ελληνικά Βοηθήματα

Echo HTML5

Nathan Smith

HTML5 is the Future of Mobile, PhoneGap Takes You There Today

davyjones

Immersed in the Web

Luis Diego González-Zúñiga, PhD

Uni Tour Germany 11.2009

Patrick Lauke

HTML5 Intoduction for Web Developers

Sascha Corti

HTML5 Webinar - Mind Storm Software

Romin Irani

Transmission2 25.11.2009

Patrick Lauke

PhoneGap talk from Singapore

Steve Gill

This slideshow provides an introduction to HTML5. The target audience should have an understanding of web development, javascript, and previous standards of HTML. This tutorial contains a brief background on the language and an overview of the most popular features. Features covered include native audio/video support, geolocation, canvas, drawing API, web forms 2.0, drag and drop, and more. Also covered is backwards compatibility and section 508 compliance. Extras include polyfills, modernizr, and a brief introduction to CSS3. Enjoy!

HTML5: An Introduction To Next Generation Web Development

Tilak Joshi

Sascha Corti With Internet Explorer 9, Microsoft has entered the league of HTML 5 browsers and with its active participation in the W3C working groups, the company proves its engagements towards the new and emerging standards. Developers however are often left wondering where the boundaries are drawn between HTML5 web site, plug-in based rich internet application and smart client or “app”. This session intends to answer this question and uses many examples to show you some of the most important enhancements introduced by HTML5, CSS3, SVG, DOM, WOFF and ECMA script. You will learn now the standards are still evolving and how Microsoft is contributing. http://soft-shake.ch/2011/conference/sessions/microsoft/2011/09/06/introduction-to-html5.html

soft-shake.ch - Introduction to HTML5

soft-shake.ch

MOTODEV Technology Evangelist, Suzanne Alexandra covers the many factors involved in choosing to develop an Android or web app that will meet enterprise requirements. She provides tips and best practices, and reviews sample apps on each platform. Topics include: -Key business and technology advantages of each approach -Examples of apps built on each platform -Browser support of HTML5 features -The hybrid app approach Twitter hashtag: #nativevsweb Got questions about this event tweet @motodev or post them on community.developer.motorola.com

The Enterprise Dilemma: Native vs. Web

Motorola Mobility - MOTODEV

Philly ete-2011

davyjones

Wordcamp Thessaloniki 2011 The Nextweb

George Kanellopoulos

[Slides from my 'Edge of the Web' workshop] The web platform has evolved significantly over the last several years, giving developers more power than ever to create rich, interactive applications delivered via browsers. New capabilities in HTML, CSS and JavaScript paired with constantly updating browsers make it possible to do things on the web that used to be the exclusive domain of plugins and native apps. In this workshop, you’ll be introduced to some of the most powerful and useful techniques available to the modern web developer that will change the way you think about web app development. The future of web app development is exciting, and these are the technologies that will underpin and drive that change. Don’t get left behind with IE8-era knowledge. Get ahead of the curve and master the edge of the web.

Edge of the Web

Todd Anglin

DevTeach Ottawa - Silverlight5 and HTML5

Frédéric Harper

HTML5 vs Native Android: Smart Enterprises for the Future

Motorola Mobility - MOTODEV

Similaire à East of Toronto .NET Usergroup - Put the 5 in HTML (20)

FITC Spotlight HTML5 - The state of the web

WordCamp Thessaloniki2011 The NextWeb

Word camp nextweb

Echo HTML5

HTML5 is the Future of Mobile, PhoneGap Takes You There Today

Immersed in the Web

Uni Tour Germany 11.2009

HTML5 Intoduction for Web Developers

HTML5 Webinar - Mind Storm Software

Transmission2 25.11.2009

PhoneGap talk from Singapore

HTML5: An Introduction To Next Generation Web Development

soft-shake.ch - Introduction to HTML5

The Enterprise Dilemma: Native vs. Web

Philly ete-2011

Wordcamp Thessaloniki 2011 The Nextweb

Edge of the Web

DevTeach Ottawa - Silverlight5 and HTML5

HTML5 vs Native Android: Smart Enterprises for the Future

Plus de Frédéric Harper

2017-11-09 - Fitbit Norcal Developers Meetup (fred)

Frédéric Harper

2018 04-25 - HLTH hackathon

Frédéric Harper

2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview

Frédéric Harper

2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview

Frédéric Harper

Public speaking - FDP tech leads summit - 2018-04-30

Frédéric Harper

2018 04-25 - HLTH hackathon

Frédéric Harper

We live in an era where developers are rock stars. I don’t like that expression as much as you, but let’s be honest, the supply and demand right now are insanely good for us, developers, which means that there is no better time than today to start your freelance career. Still, starting a business is not easy, and truth to be told, it’s not for everyone. Based on my successes and my failures, let me guide you through the 10 steps to become your own boss. Not sure if you wanna go rogue? This talk will help you understand all the groundwork needed to think about it as much as to start your new journey, but shh, don’t tell your boss you’ll attend this talk!

From employee to freelance developer in 10 steps - DevTeach - 2017-07-04

Frédéric Harper

Votre application. Votre infrastructure. Votre plateforme. Tous sont les bienvenus avec Microsoft Azure, un service cloud où l’Open Source est un citoyen de première classe. Vous en doutez? Que cela ne tienne, Frédéric Harper de No lion is born king et Raymond Kao de Microsoft Canada feront un survol des forces du logiciel libre en combinaison avec l’infrastructure (IaaS) des nuages provenant du géant de Redmond!

Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...

Frédéric Harper

You are one of the tech leaders in your community and you are passionate about what you do. People can see it. Your tribe, they know it… You are good at what you do, no doubt. Perhaps your blog or you inevitably share your opinions on your social media accounts? Maybe you speak at conferences or organize a user group? No matter what you do, you are an influencer. Stop being humble, you know it’s true, isn’t it? No matter what is your end goal, what you are doing, day to day, has an impact. A positive impact in the tech industry, in your city, at work and even online. So you need to get your shit together, and be responsible for this great power you have, influence! Not that I think you aren’t trustworthy, but, hey, we’ll talk about it...

With great power comes great responsibility - Microsoft Canada Open Source co...

Frédéric Harper

Did you ever try to participate in a not so small Open Source project? The experience is awful. Did you ever want to share your code on a public repository because you thought it was the thing to do? Of course, after that day, I felt like the worst developer in the world. I don’t even understand why I should put the code I created to “help” others, to share: I mean, I didn’t sleep for hours and lost a ton of hairs over that crazy problem… You got it, I don’t like Open Source, and you shouldn’t like it either!

Frédéric harper i don’t like open source, and you shouldn't like it eithe...

Frédéric Harper

There is no mobile or desktop Web: we view the same Web, but in different ways. So what is the secret sauce to give the best experience to our users? Drown your fixed-width design, destroy your device-specific approaches and ride the web's unicorn while an orchestra is playing we are the champion in the background: you found the holy grail! It's responsive web design. It's not new. It's not magical. Still, we need it as the bytes going thru the wires doesn't always give us the best experience out there. So stop watching cats videos, and learn more about how you can use Responsive Web Design's approach to your current site, today.

Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25

Frédéric Harper

Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...

Frédéric Harper

In today’s world, it's easier than ever to innovate and create great web applications. You release often, but let’s be honest, if you're like most developers out there, you don't spend your days worrying about security. You know it’s important, but you aren’t security savvy. So ask yourself, is your Python application secure? Come learn some of the different ways a hacker (cracker) can attack your code, and some of the best practices out there. In the end, your security is your users’ security.

Is your python application secure? - PyCon Canada - 2015-11-07

Frédéric Harper

Personal Branding for developers: it’s more important than you think. Do you think personal branding is not for you? Why should you care about your brand? After all, it’s not like you are an actor or the lead singer for a rock band. In fact, it’s never been more important for you to think about yourself as a brand. Doing so will provide rocket fuel for your career. You’ll find better jobs or become the “go-to guy” in certain situations. You’ll become known for your expertise and leadership; people will seek your advice and point of view. You’ll get paid better to speak, write, or consult. As a developer, there are many tools you can use to scale, and this presentation will help you understand how to get visibility, make a real impact, and achieve your goal. No need to be a marketing expert or a personal branding guru: be yourself and get your dream job or get to the next level of your career.

Personal branding for developers - West Island developers and entrepreneurs m...

Frédéric Harper

There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.

Responsive Web Design, get the best out of your designs - JavaScript Open Day...

Frédéric Harper

Differentiating yourself humber college - 2015-03-30

Frédéric Harper

Differentiating yourself - Hack Western - 2015-03-28

Frédéric Harper

Vous pensez peut-être que le personal branding n'est pas pour vous? Pourquoi devriez-vous vous souciez de votre propre branding, vous n'êtes pas un acteur et encore moins le chanteur d'un groupe rock international, non? En ces jours où tout le monde a le pouvoir de sortir du lot plus facilement, de partager plus rapidement et de faire grandir son réseau comme jamais, il est plus important que jamais de penser à vous, en tant que marque. Bien sûr, le but n'est pas d'aller aussi loin que votre marque de boisson gazeuse préférée, mais nous explorerons ensemble le quoi, pourquoi, qui et comment (what, why, who & how) du personal branding pour les développeurs.

Le personal branding, plus important que jamais - PHP Québec - 2015-03-05

Frédéric Harper

Do you think personal branding is not for you? Why should you care about your own brand? After all, it’s not like you are an actor or the lead singer for a rock band. In fact, it’s never been more important for you to think about yourself as a brand. Doing so will provide rocket fuel for your career as a developer. You’ll find better jobs or become the “go-to guy” in certain situations; you’ll become known for your expertise and leadership; people will seek your advice and point of view; you’ll get paid better to speak, write, or consult. As a developer, there are many tools you can use to scale, and this office hours will help you understand how to get visibility, make a real impact, and achieve your goal with a lot of time for Q&A. No need to be a marketing expert or a personal branding guru: be yourself, and get your dream job or get to the next level of your career.

Building a personal brand in the developer community - Codementor Office Hour...

Frédéric Harper

Ma Carrière Techno - École secondaire St-Henri - 2014-11-27

Frédéric Harper

Plus de Frédéric Harper (20)