SlideShare ist ein Scribd-Unternehmen logo
1 von 35
Downloaden Sie, um offline zu lesen
<!DOCTYPE html>

     Brandon Byars

bbyars@thoughtworks.com
The HTML5 Ecosystem
HTML5
        CSS3




               new JavaScript APIs
HTML5
HTML5
HTML
Going Semantic
<nav>
  <ul>
    <li><a href=“/”>Home</a></li>
    <li><a href=“/about”>About Us</a></li>
    <li>
       <a href=“/faq”>
          Frequently Asked Questions
       </a>
    </li>
  </ul>
</nav>
<section id=“magazine”>

 <article>

   <header>

      <h1>Semantic Markup Rules!</h1>

      <p>An overview of new elements</p>

   </header>

   <p>Lorem ipsum dolor set amet…</p>

   <aside>For more details, see…</aside>

 </article>

</section>
<big>      <table
              align=“left”
<center>
              bgcolor=“#ff0”
<font>        border=“1px”
              cellpadding=“2px”
<strike>
              cellspacing=“2px” />
<u>

<tt>

<frame>
<input type="tel" />
<input type="url" />
<input type="email" />
<input type="number" />
<form action="/newAttributes">

<input type=text autofocus />

<input type=email placeholder="a@b.com" />

<input type=email required />

<input type=text pattern="^[1-9]+[0-9]*$" />

</form>
<img draggable="true" />



function drag(ev) { ev.dataTransfer.setData
                      ("Text",ev.target.id); }

function allowDrop(ev) { ev.preventDefault(); }

function drop(ev) {

       var data=ev.dataTransfer.getData("Text");

       ev.target.appendChild(document.getElementById(data)
);

       ev.preventDefault();

}
Multimedia
Audio

                Video



    Canvas

                        SVG
<video width="320" height="240” controls="controls">

<source src="movie.mp4" type="video/mp4" />

<source src="movie.ogg" type="video/ogg" />

Your browser does not support the video tag.

</video>
http://www.kaltura.org/apis/html5lib/kplayer-examples/Player_Themable.html
http://www.effectgames.com/demos/canvascycle/
SVG
<html manifest="demo.appcache">
       CACHE MANIFEST

       # 2012-02-21 v1.0.0

       /theme.css

       /logo.gif

       /main.js

       NETWORK:

       *
CSS
CSS3 Selectors
p:nth-of-type(2n+1) {color: red;}
p:nth-child(2n+1) {color: red;}
#content {
    column-count: 2;
    column-gap: 20px;
    column-rule: 1px solid #ddccb5;
}
span.weight:after { content: "lbs"; color: #bbb; }
<style media="only all and (max-width: 480)" />
CSS3 Transforms

• Rotate

• Scale

• Skew

• Matrix
@font-face {

    font-family: AwesomeFont;

    src: url(http://example.com/awesomeco.ttf);

    font-weight: bold;

}
JavaScript
localStorage.awesome = "true";

alert(sessionStorage.coolness);
HTML5
HTML5
More JavaScript

• Browser history

• Web workers

• File APIs

• Cross document messaging

• Touch events
http://caniuse.com
http://html5readiness.com/
Looking to the Future…

     HTML5 compatible

       phones to top

         1 billion

            in

           2013
HTML5

Weitere ähnliche Inhalte

Was ist angesagt?

`From Prototype to Drupal` by Andrew Ivasiv
`From Prototype to Drupal` by Andrew Ivasiv`From Prototype to Drupal` by Andrew Ivasiv
`From Prototype to Drupal` by Andrew IvasivLemberg Solutions
 
Movable Type 5 : テーマの作成方法
Movable Type 5 : テーマの作成方法Movable Type 5 : テーマの作成方法
Movable Type 5 : テーマの作成方法Jun Kaneko
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web componentsMarc Bächinger
 
Introduction to j query
Introduction to j queryIntroduction to j query
Introduction to j querythewarlog
 
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniquesWhen dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniquesWim Godden
 
Overview on jQuery mobile
Overview on jQuery mobileOverview on jQuery mobile
Overview on jQuery mobileMd. Ziaul Haq
 
HTML5 Hacking - Yahoo! Open Hack Day
HTML5 Hacking - Yahoo! Open Hack DayHTML5 Hacking - Yahoo! Open Hack Day
HTML5 Hacking - Yahoo! Open Hack DayTed Drake
 
Angular js How, What & Why - MetaRefresh 2014
Angular js How, What & Why - MetaRefresh 2014Angular js How, What & Why - MetaRefresh 2014
Angular js How, What & Why - MetaRefresh 2014shyamsesh
 
AngularJS Data Binding
AngularJS Data BindingAngularJS Data Binding
AngularJS Data BindingTicore Shih
 
Introduction to jQuery Mobile
Introduction to jQuery MobileIntroduction to jQuery Mobile
Introduction to jQuery Mobileejlp12
 
Notes on SF W3Conf
Notes on SF W3ConfNotes on SF W3Conf
Notes on SF W3ConfEdy Dawson
 

Was ist angesagt? (20)

JavaScript and BOM events
JavaScript and BOM eventsJavaScript and BOM events
JavaScript and BOM events
 
Dom
DomDom
Dom
 
`From Prototype to Drupal` by Andrew Ivasiv
`From Prototype to Drupal` by Andrew Ivasiv`From Prototype to Drupal` by Andrew Ivasiv
`From Prototype to Drupal` by Andrew Ivasiv
 
WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
 
Movable Type 5 : テーマの作成方法
Movable Type 5 : テーマの作成方法Movable Type 5 : テーマの作成方法
Movable Type 5 : テーマの作成方法
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web components
 
Introduction to j query
Introduction to j queryIntroduction to j query
Introduction to j query
 
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniquesWhen dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniques
 
Overview on jQuery mobile
Overview on jQuery mobileOverview on jQuery mobile
Overview on jQuery mobile
 
HTML5 Hacking - Yahoo! Open Hack Day
HTML5 Hacking - Yahoo! Open Hack DayHTML5 Hacking - Yahoo! Open Hack Day
HTML5 Hacking - Yahoo! Open Hack Day
 
Angular js How, What & Why - MetaRefresh 2014
Angular js How, What & Why - MetaRefresh 2014Angular js How, What & Why - MetaRefresh 2014
Angular js How, What & Why - MetaRefresh 2014
 
AngularJS Data Binding
AngularJS Data BindingAngularJS Data Binding
AngularJS Data Binding
 
Introduction to jQuery Mobile
Introduction to jQuery MobileIntroduction to jQuery Mobile
Introduction to jQuery Mobile
 
Html5 101
Html5 101Html5 101
Html5 101
 
27 iframe
27 iframe27 iframe
27 iframe
 
Coldfusion with Keith Diehl
Coldfusion with Keith DiehlColdfusion with Keith Diehl
Coldfusion with Keith Diehl
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
J query
J queryJ query
J query
 
Notes on SF W3Conf
Notes on SF W3ConfNotes on SF W3Conf
Notes on SF W3Conf
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 

Andere mochten auch

Rethinking the agile enterprise
Rethinking the agile enterpriseRethinking the agile enterprise
Rethinking the agile enterpriseBrandon Byars
 
Quality, Courtesy and a big Parking
Quality, Courtesy and a big ParkingQuality, Courtesy and a big Parking
Quality, Courtesy and a big ParkingFrancesco Fullone
 
Html5 storage and browser storage
Html5 storage and browser storageHtml5 storage and browser storage
Html5 storage and browser storageSway Deng
 
HTML5 Local Storage
HTML5 Local StorageHTML5 Local Storage
HTML5 Local StorageLior Zamir
 
HTML5 Storage/Cache
HTML5 Storage/CacheHTML5 Storage/Cache
HTML5 Storage/CacheAndy Wang
 
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3Basics of html5, data_storage, css3
Basics of html5, data_storage, css3Sreejith Nair
 
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0Cory Forsyth
 
Advanced Caching Concepts @ Velocity NY 2015
Advanced Caching Concepts @ Velocity NY 2015Advanced Caching Concepts @ Velocity NY 2015
Advanced Caching Concepts @ Velocity NY 2015Rakesh Chaudhary
 
HTTP/2 standard for video streaming
HTTP/2 standard for video streamingHTTP/2 standard for video streaming
HTTP/2 standard for video streamingHung Thai Le
 

Andere mochten auch (13)

Rethinking the agile enterprise
Rethinking the agile enterpriseRethinking the agile enterprise
Rethinking the agile enterprise
 
HTML 5
HTML 5HTML 5
HTML 5
 
Quality, Courtesy and a big Parking
Quality, Courtesy and a big ParkingQuality, Courtesy and a big Parking
Quality, Courtesy and a big Parking
 
Html5 storage and browser storage
Html5 storage and browser storageHtml5 storage and browser storage
Html5 storage and browser storage
 
HTML5 Local Storage
HTML5 Local StorageHTML5 Local Storage
HTML5 Local Storage
 
HTML5 Storage/Cache
HTML5 Storage/CacheHTML5 Storage/Cache
HTML5 Storage/Cache
 
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
 
Dtd
DtdDtd
Dtd
 
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
 
Xml dtd
Xml dtdXml dtd
Xml dtd
 
Html1
Html1Html1
Html1
 
Advanced Caching Concepts @ Velocity NY 2015
Advanced Caching Concepts @ Velocity NY 2015Advanced Caching Concepts @ Velocity NY 2015
Advanced Caching Concepts @ Velocity NY 2015
 
HTTP/2 standard for video streaming
HTTP/2 standard for video streamingHTTP/2 standard for video streaming
HTTP/2 standard for video streaming
 

Ähnlich wie HTML5

Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology updateDoug Domeny
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012crokitta
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and ImprovedTimothy Fisher
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web developmentAlberto Apellidos
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
Quick start guide to java script frameworks for sharepoint apps spsbe-2015
Quick start guide to java script frameworks for sharepoint apps spsbe-2015Quick start guide to java script frameworks for sharepoint apps spsbe-2015
Quick start guide to java script frameworks for sharepoint apps spsbe-2015Sonja Madsen
 
Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-15041903264...
Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-15041903264...Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-15041903264...
Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-15041903264...BIWUG
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoRob Bontekoe
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Cengage Learning
 
e-suap - client technologies- english version
e-suap - client technologies- english versione-suap - client technologies- english version
e-suap - client technologies- english versionSabino Labarile
 
A Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick ArmstrongA Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick ArmstrongNick Armstrong
 

Ähnlich wie HTML5 (20)

Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
html5
html5html5
html5
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Quick start guide to java script frameworks for sharepoint apps spsbe-2015
Quick start guide to java script frameworks for sharepoint apps spsbe-2015Quick start guide to java script frameworks for sharepoint apps spsbe-2015
Quick start guide to java script frameworks for sharepoint apps spsbe-2015
 
Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-15041903264...
Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-15041903264...Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-15041903264...
Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-15041903264...
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
 
e-suap - client technologies- english version
e-suap - client technologies- english versione-suap - client technologies- english version
e-suap - client technologies- english version
 
A Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick ArmstrongA Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick Armstrong
 
前端概述
前端概述前端概述
前端概述
 

Kürzlich hochgeladen

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 

Kürzlich hochgeladen (20)

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 

HTML5

Hinweis der Redaktion

  1. WHATWG = Google, Apple, Mozilla, Opera (MS declined b/c lack of patent policy). Formed to move HTML forward while W3C was mired in XHTML hell until 2009
  2. XHTML turned out to be a colossal waste of time, W3C finally abandoned in 2009WHATWG had been working on alternative that is now called HTML5 since 2004IE never recognized XHTML content type
  3. * Large thanks to mobile (iphone) and chrome - implementations
  4. Web spiders, robotsAccessibility (ARIA not mentioned much in this talk)AI – Siri exampleIf we’re going to make the web a platform for computers, need semantics
  5. divitis had replaced tables of 1998Focus on replacing common patterns of divs with semantically meaningful tags
  6. Also allows an aside and figcaption, for exampleRetains its document nature
  7. Frames popular in enterprise software (PeopleSoft, Outlook Web Access) but caused many usability and accessiblity issued
  8. Notice not xml conformant. It can be: autofocus=“true”Required and pattern didn’t work in my tests = test/index.html
  9. Drag &amp; drop with few enough characters I could fit it on a slide w/reasonable font sizeShows why it’s hard to separate HTML5 from the larger ecosystem (including JS)
  10. Audio:MP3 = IE, Chrome, SafariWav = Firefox, Chrome, Safari, OperaOgg = Firefox, Chrome, Opera
  11. TODO: What is controls?MP4 = IE, Chrome, SafariWebM = Firefox, Chrome, OperaOgg = Firefox, Chrome, Opera
  12. Canvas – again hard to separate HTML elements from the JS ecosystem
  13. Dev – create in text editor:* Can be created and edited with any text editorCan be searched, indexed, scripted, and compressedUser* Scalable and are zoomable (and the image can be zoomed without degradation)* can be printed with high quality at any resolution
  14. Allows webappsUpdate comment to refresh cacheTied with local storage
  15. Flip to boston globeAlso have orientation and color capabilities
  16. Uses Upgrade header in HTTP
  17. Simple api to get lat/long* On desktop, gives somewhat better resolution than picture indicates; can be quite accurate on a phone
  18. Touch events added