Patrick Lauke gives an overview of new web technologies available in HTML5, including canvas, video, geolocation, offline support, storage and more. He discusses the history and development of HTML5, how it standardizes current browser behavior, and new powerful form and semantic elements. Patrick provides demonstrations of canvas, video, geolocation and other features, noting their importance for building applications without plugins. He encourages developers to start using these technologies today.
WebGL, HTML5 and How the Mobile Web Was WonTony Parisi
The document discusses how WebGL and HTML5 have enabled 3D graphics and rich applications to be developed for the mobile web. Key points include:
- WebGL brings hardware-accelerated 3D rendering to the browser using OpenGL ES, and is now supported across desktop and major mobile browsers.
- HTML5 features like the canvas element, WebSockets, and device APIs allow rich applications to be developed using JavaScript and run within browsers.
- CSS 3D transforms enable basic 3D effects even on platforms without WebGL.
- Game engines, frameworks, and 3D content formats now make complex 3D content and games possible to deliver through the mobile web browser.
This document introduces web workers, which allow JavaScript code to perform processor-intensive calculations without blocking the user interface (UI) thread. Web workers allow web pages to run multiple scripts simultaneously, improving performance for tasks like live syntax highlighting, crunching large amounts of data, and smooth animations. They work by executing scripts in background threads separate from the main script, so the UI thread is not blocked. Developers create and communicate with worker threads to offload processing work from the UI thread.
This document provides an introduction and overview of WebUSB, including:
- A brief history of efforts to connect USB devices to web browsers before WebUSB.
- An explanation that WebUSB allows USB devices to be accessed safely from web applications using a familiar API, in a cross-platform way.
- An overview of the WebUSB specification and how developers can use it to build JavaScript libraries for USB devices that work across browsers.
- A demonstration of how WebUSB can be used to connect hardware like microcontrollers and display screens to web applications.
My Slides about creating web sites which could also be useable even if you are not online! From Web Storages to Service Workers.
Presented at Mobiletech Conference in Munich March 2017
This document discusses bringing 3D to the web using technologies like WebGL, THREE.js, and Autodesk Forge. It provides examples of using 3D on the web for creative, commercial, and industrial purposes. Autodesk Forge and its Model Derivative API and Viewer are presented as easier options for adding 3D to the web compared to lower-level APIs like WebGL. Considerations for mobile and VR/AR are also mentioned.
Peter Lubbers from Kaazing gave a presentation on HTML5 features such as Web Workers, Geolocation, and WebSockets. He discussed how these new technologies allow for asynchronous background processing, location detection, and bi-directional real-time communications without polling. Browser support for HTML5 features was also reviewed.
This document appears to be the slides for a presentation given by Tomoya Asai on Firefox and HTML5 at the OSC 2010 Tokyo/Spring conference. It includes links to examples and resources related to new and emerging HTML5 features in Firefox such as CSS gradients, geolocation, device orientation detection, WebGL, JSON, and autobuffering video. The slides provide examples of how these features can be used and link to developer documentation on Mozilla.org.
This document discusses web workers, which allow JavaScript to execute tasks in background threads apart from the main execution thread. It covers the need for web workers due to JavaScript's single-threaded nature. There are two types of web workers - dedicated workers which are linked to a single script, and shared workers which can be accessed by multiple scripts. The document outlines the web workers API, how to communicate with workers using message passing, and provides examples of dedicated and shared workers. It also discusses browser support for web workers and how to check for support.
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....Patrick Lauke
1. HTML5 provides new semantic elements like header, footer, nav and article that improve accessibility and help structure documents. It also extends existing APIs and adds new APIs for multimedia, geolocation, offline storage and more.
2. HTML5 introduces new form input types for dates, times, numbers and more. It also provides built-in form validation without JavaScript.
3. The <video> and <audio> elements allow native playback of multimedia across browsers without plugins. The <canvas> element allows dynamic drawing via JavaScript.
4. While still evolving, many HTML5 features can be used today through progressive enhancement and feature detection. It offers developers new capabilities for building web applications and interactive experiences on
This document discusses how HTML5 can be used to build engaging mobile applications. Key features covered include offline storage using the Application Cache API, storing data locally using Web Storage, using a SQL database with Web SQL, advanced graphics capabilities with Canvas and SVG, real-time communications over WebSockets, and tools for developing HTML5 apps like jQuery Mobile, Sencha Touch, and Google Web Toolkit. It emphasizes testing on multiple platforms and browsers to ensure compatibility.
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
HTML5 is the next generation web development standard that improves upon HTML4 and XHTML. It focuses on features rather than syntax, and includes new elements like <article> and <section>, native audio/video support, drawing APIs, geolocation, drag and drop, web forms 2.0, and more. HTML5 aims to improve multimedia capabilities while keeping code readable by humans and machines. It is supported by all major browsers, though support for specific features may vary, and polyfills can help with backwards compatibility.
In this, my talk for Webinale in Berlin, June 1st 2011, I give an overview of HTML5 history and main features, relating it all back to how possible it is use develop with these new features today. Thanks to Patrick Lauke for allowing me to steal a lot of his slides ;-)
1. HTML5 provides new semantic elements like <header>, <footer>, and <nav> that allow for more structured markup. It also extends existing APIs and adds new APIs for multimedia, forms, and building web applications.
2. HTML5 introduces multimedia elements <video> and <audio> that allow embedded video and audio without plugins. It also includes the <canvas> element for scriptable drawing.
3. HTML5 includes new APIs for building powerful web applications, including geolocation, offline application caching, local storage, and databases. However, browser support is still evolving so these should be used carefully with feature detection.
This document compares native applications, web applications, and widgets for mobile devices. Native applications have direct access to device features but must be developed for each platform. Web applications can be written once and deployed anywhere but run inside the browser without direct device access. Widgets combine the cross-platform capabilities of web applications with the ability to access device features and run standalone like native applications.
The document discusses HTML5, including what it is, its features, adoption, and changes from previous versions of HTML. It provides information on new HTML5 elements like <header>, <footer>, <nav>, <section>, and <article>. It also covers new form input types, multimedia support through <video> and <audio> elements, canvas graphics, geolocation, web sockets, and more. The document contains examples and explanations of how to implement and use various HTML5 features.
HTML5 is the latest revision of the HTML standard that aims to improve the language with support for the latest multimedia capabilities. It introduces many new features such as geolocation, web storage, web sockets, and canvas for 2D and 3D graphics. Developers can use these new features to build richer applications that work across devices while also improving semantics and markup.
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologiesgeorge.james
Ajax presents a new way of developing web applications that is more event-driven like typical client-server GUI applications. While Ajax uses technologies like JavaScript, XML, and CSS to asynchronously update parts of a page without reloading, the role of backends like Caché is reduced to basic data storage and retrieval. However, Caché remains well-suited for large, high-performance enterprise applications as they grow beyond what technologies like MySQL can easily support. Frameworks like EWD that define applications independently of technologies allow easier migration between backends like MySQL and Caché as applications scale.
This document provides an overview of JavaScript including its history, key features, and comparisons to other languages. It also discusses important JavaScript concepts like objects, functions, events, and libraries like jQuery. Key topics covered include the window, document, location, and history objects, arrays, cookies, closures, inheritance, callbacks, and popular JavaScript libraries and frameworks.
HTML5 is a draft specification from the W3C that adds new elements like canvas, video and audio to HTML. It is not finished yet and continues to evolve. HTML5 introduces elements like article, section and aside to structure content. It also supports new media capabilities like playing video and audio natively in the browser without plugins. HTML5 is supported in Internet Explorer 9 and later, and also in other modern browsers like Chrome and Firefox.
The document discusses building mobile web applications using HTML5. It covers topics like HTML5 features that are well supported on mobile browsers like forms, communication, canvas, geolocation, audio and video. It provides examples of using CSS3 for styling, animation and media queries for responsive design. It also discusses utilizing HTML5 APIs for advanced interactions, graphics, offline support, performance and accessing device capabilities.
HTML5 introduces several new features including new semantic elements, support for embedded video and audio, canvas element for 2D/3D graphics, offline web applications, and drag and drop. It also removes some older HTML elements. HTML5 is still a work in progress but is supported by all major browsers. It aims to make web pages more compatible with new technologies and reduce the need for browser plug-ins.
This document provides an overview of HTML5, including its history, timeline, new features, and compatibility with browsers. Some key points:
- HTML5 development is led by the WHATWG and W3C to standardize web applications. It simplifies HTML and introduces new semantic elements like <article>, <aside>, <header>.
- New features include multimedia with <audio> and <video> tags, 3D graphics with Canvas, and offline/storage APIs. Forms are enhanced with new input types.
- CSS3 adds animation, transitions and transforms. Performance improves with Web Workers and XMLHttpRequest Level 2.
- Browser support for HTML5 features is tracked on http://caniuse
HTML 5 provides more semantic and less verbose markup than previous standards. It introduces new elements like <canvas> and <video> that allow dynamic drawing and video playback without plugins. Features like geolocation, offline storage and application caching improve offline and mobile support. Microdata allows embedding machine-readable semantic data in HTML. While browser support varies, many features can be used today to create robust and responsive web applications.
The document discusses HTML5 and provides an overview of its key elements and features. It begins with a definition of HTML5 as a draft specification from the W3C that adds new elements like canvas, video and audio. It then provides summaries of important HTML5 elements and features like video, audio, canvas, SVG, CSS3, DOM scripting, geolocation and more. The document concludes by discussing resources for learning more about HTML5 and considerations around using HTML5 versus apps or other technologies on mobile.
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...Patrick Lauke
WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the guidelines' normative text. And, of course, it is not perfect - with some omissions, handwaving, and straight-up loopholes. So where does this leave developers and auditors?
In this talk - a reprise of a previous talk, now updated to cover new SCs from WCAG 2.2 - Patrick may not have all the answers, but he'll have a good rant around the subject anyway...
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePatrick Lauke
Update about Pointer Events Level 3 work for the upcoming W3C Technical Plenary and Advisory Committee (TPAC) 2023 in Seville
https://www.youtube.com/watch?v=r0spZl1qaa0
https://w3c.github.io/pointerevents/
https://www.w3.org/TR/pointerevents/
https://www.w3.org/2023/09/TPAC/
https://patrickhlauke.github.io/touch/w3c_tpac2023_pewg/
Cross-posted from https://www.w3.org/2023/09/TPAC/group-updates.html#pointer-events
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...Patrick Lauke
WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...Patrick Lauke
WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...
Too much accessibility - good intentions, badly implemented / Public Sector F...Patrick Lauke
HTML offers many features and attributes that can make your sites more accessible...but only if they're used wisely. Can there really be "too much accessibility"?
Audio recording: https://archive.org/details/Psf8August2007.PatrickH.Lauke-TooMuchAccessibilityGoodIntentions
Implementing Web Standards across the institution: trials and tribulations of...Patrick Lauke
Patrick H. Lauke - Implementing Web Standards across the institution: trials and tribulations of a redesign / Institutional Web Management Workshop IWMW / Birmingham / 28 July 2004
Geolinking content - experiments in connecting virtual and physical places / ...Patrick Lauke
Patrick H. Lauke: Geolinking content - experiments in connecting virtual and physical places / Institutional Web Management Workshop IWMW / York / 16 July 2007
All change for WCAG 2.0 - what you need to know about the new accessibility g...Patrick Lauke
WCAG 2.0 is the new set of web accessibility guidelines that was released in 2008 as a recommendation by the W3C. It addresses some issues with the previous WCAG 1.0 guidelines by being technology-agnostic, having clearly testable success criteria focused on user outcomes rather than techniques, and removing outdated requirements. WCAG 2.0 provides more freedom for authors while still ensuring accessibility. It includes 4 principles, 12 guidelines and 61 success criteria to evaluate websites. The transition from WCAG 1.0 involves evaluating sites based on the new success criteria and testing areas that may be different.
Web Accessibility - an introduction / Salford Business School briefing / Univ...Patrick Lauke
This document provides an introduction to web accessibility. It begins by addressing some common misconceptions about accessibility, noting that it aims to accommodate people with a wide range of disabilities, not just visual impairments. The document emphasizes that accessibility is important for both ethical and legal reasons, and that inclusive design benefits all users. It then outlines key web accessibility guidelines from the W3C, providing examples of how to make content more accessible through proper semantic markup and alternative text. The conclusion stresses that accessibility is an essential consideration for web development.
Web standards pragmatism - from validation to the real world / Web Developers...Patrick Lauke
The document discusses common misconceptions and pitfalls around using web standards. It argues that web standards are about more than just validation - they are about semantics, separation of concerns, and pragmatism. Some key points include: using the most appropriate HTML elements to convey meaning rather than appearance; applying styles through CSS instead of presentational markup; avoiding non-semantic class names; and recognizing that not all uses of tables or images are invalid. The document advocates for balancing standards with practical concerns like multiple authors and one-off content needs.
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Patrick Lauke
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any web developer can use / South By Southwest SXSW / Austin, Texas, 11 March 2007
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...Patrick Lauke
Vanilla HTML is limiting and boring. Our clients demand highly engaging and interactive web experiences. And wouldn’t you know, with just a bit of HTML and JavaScript we can craft amazing custom controls, widgets and effects that go far beyond the confines of traditional static markup. But how can we ensure that these custom experiences are both understandable and usable for people with disabilities, and in particular those using assistive technologies such as screen readers?
In this talk, we will look at the basics of making some common custom-built components accessible - covering how browsers and assistive technologies interact, the limitations of HTML, and how ARIA can help make interactive experiences more accessible. In addition, we will explore some of the recent additions in ARIA 1.1, as well as some particular challenges when it comes to traditional ARIA patterns and assistive technologies on mobile/tablet/touch devices.
Evergreen slidedeck at https://patrickhlauke.github.io/aria/presentation/ / https://github.com/patrickhlauke/aria/
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...Patrick Lauke
Vanilla HTML is limiting and boring. Our clients demand highly engaging and interactive web experiences. And wouldn’t you know, with just a bit of HTML and JavaScript we can craft amazing custom controls, widgets and effects that go far beyond the confines of traditional static markup. But how can we ensure that these custom experiences are both understandable and usable for people with disabilities, and in particular those using assistive technologies such as screen readers?
In this talk, we will look at the basics of making some common custom-built components accessible - covering how browsers and assistive technologies interact, the limitations of HTML, and how ARIA can help make interactive experiences more accessible. In addition, we will explore some of the recent additions in ARIA 1.1, as well as some particular challenges when it comes to traditional ARIA patterns and assistive technologies on mobile/tablet/touch devices.
Evergreen slidedeck at https://patrickhlauke.github.io/aria/presentation/ / https://github.com/patrickhlauke/aria/
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018Patrick Lauke
This document provides an introduction to Accessible Rich Internet Applications (WAI-ARIA). It discusses the need for ARIA to make complex web applications accessible, common ARIA roles and attributes, and best practices for using ARIA. Key points include: ARIA defines roles, states and properties to convey semantics to assistive technologies; common roles include buttons, toggles, and landmarks; and the five rules of ARIA use emphasize using native HTML when possible and ensuring interactive elements are keyboard accessible.
5. history of HTML5
● started at Opera – Web Applications 1.0
● reaction to XHTML's direction
● Mozilla and Apple joined
● W3C HTML5
● Microsoft involvement
9. “...extending the language to better support Web
applications, since that is one of the directions the Web is
going in and is one of the areas least well served by HTML
so far. This puts HTML in direct competition with other
technologies intended for applications deployed over the
Web, in particular Flash and Silverlight.”
Ian Hickson, Editor of HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
16. current and old browsers “support” these
(although some need a little extra help)
header, footer, … { display: block; }
17. Internet Explorer needs extra training wheels
document.createElement('header');
document.createElement('footer');
…
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
20. rich form elements – without JavaScript
<input type=”text” list=”mylist”>
<datalist id="mylist">
<option label="Mr" value="Mr">
<option label="Ms" value="Ms">
��
</datalist>
21. type and attributes for built-in validation
(of course you should still validate on the server)
<input type=”tel”>
<input type=”email”>
<input type=”url”>
<input … pattern="[a-z]{3}[0-9]{3}">
<input … required>
Demonstration of webforms
31. video as native object...why is it important?
● “play nice” with rest of the page
● keyboard accessibility built-in
● API for controls
Demonstration of video
32. video format debates – H.264 vs OGG Theora
<video controls autoplay poster="…" width="…" height="…">
<source src="movie.ogv" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<!-- fallback content -->
</video>
still include fallback for old browsers
http://camendesign.com/code/video_for_everybody
37. find out your location via JavaScript
navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
/* where's Waldo? */
var lat = position.coords.latitude;
var long = position.coords.longitude;
...
}
43. Web Database – full relational DB / SQL
var db =
openDatabase(dbName, version, displayName, expectedSize);
db.transaction(function(tx) {
tx.executeSql(sqlStatement, [], function (tx, result) {
/* do something with the results */
});
});