HTML5 and friends - standards>next Manchester 24.11.2010

This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.

1. The document discusses optimizing websites for high performance mobile experiences. It provides 14 best practices for mobile optimization, including making fewer HTTP requests, using content delivery networks, gzipping components, and optimizing images. 2. Mobile optimization is important because mobile internet usage is growing rapidly. Performance impacts metrics like user experience and revenue. 3. Tools for measuring and improving mobile performance are introduced, such as PcapPerf for analyzing network traffic and Weinre for debugging JavaScript on mobile devices. Faster mobile sites will have an advantage as mobile becomes the primary internet platform.

Slides from my talk at #digiday at EAAA. Contains a lot of links for more detailed information on the topics.

This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. It discusses using feature testing versus browser sniffing to determine the appropriate image to serve, including testing browser width, screen resolution, and bandwidth. It then covers various techniques for serving adaptive images, such as using .htaccess files, the <picture> element, srcset attributes, and JavaScript libraries. It emphasizes using a mobile-first approach and progressive enhancement to provide the best experience for all devices.

The document summarizes techniques for improving JavaScript performance in web applications. It discusses how JavaScript execution blocks the browser UI thread, leading to unresponsive user experiences if scripts run for too long. It then provides recommendations to limit JavaScript execution times to under 50ms and describes load time techniques like placing scripts at the bottom of the page, combining files, and loading scripts dynamically or deferring their execution to improve page load performance.

This document discusses mobile app development using Sencha Touch. It begins with an introduction to the author and their experience. It then outlines different mobile app development modes including WAP, webview, hybrid, and native. Webview and hybrid approaches are noted to have disadvantages like increased memory usage and performance issues. The document proceeds to discuss Sencha Touch, highlighting its object-oriented architecture, class loading, widgets, and support for HTML5, CSS3, and MVC. It provides an example of an Android app called Poseidon developed with Sencha Touch and outlines its project organization and use of Sencha Touch libraries. It concludes with recommendations for organizing a cross-platform mobile development team using the webview approach.

The document discusses the evolution of using the web as a real application platform. It outlines key technologies like HTML5, JavaScript, and WebGL that have advanced the capabilities of web applications. The document also notes shortcomings in earlier versions of the web around user interaction, performance, and compatibility issues. However, new technologies and browser improvements have helped address many of these issues. The document concludes that the web is becoming a viable platform for developing full-featured applications that combine the benefits of installed software and web-based applications.

For Frontend developer meetup in Amsterdam. About the essence of Web Components and comparing the developer experience and overall architecture.

The document discusses techniques for prebrowsing or prefetching resources to improve page load performance. It describes how developers can use <link> tags with rel="dns-prefetch", rel="prefetch", and rel="prerender" to hint to browsers on resources that could be pre-resolved, pre-downloaded or pre-rendered before they are needed. It also explains how browsers perform internal prefetching optimizations like DNS pre-resolution, TCP pre-connection and prefetching of likely-needed resources during page transitions using predictors. The goal is to get resources the browser will need before it needs them to reduce load times.

In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users. This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!

FOWA London 2015 The open web platform using HTML, CSS, and JavaScript is the best: write once, run everywhere, platform that we have created but it is far from perfect. The subtle differences between browsers whether on desktop or mobile platforms make cross-browser testing a daily requirement. Adrian will take you on a behind-the-scenes tour of the WebDriver architecture and standardisation work. He will show just how easy it is to get up and running with your own WebDriver tests and run the same test across different browsers.

Progressive Enhancement is one of the most important and useful software engineering tools in our web development toolbox, but in practice it's largely ignored. We'll dive into the basics of PE, the common pitfalls (think &lt;noscript> and the newer class="no-js"), how to support Blackberry 4.x and IE6 without a ton of extra work, tools to avoid that violate PE best practices, and how to apply PE pragmatically.

[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.

This document provides a checklist of best practices for improving performance in single page applications built with frameworks like BackboneJS. It lists tools and techniques for optimizing areas like JavaScript module loading with RequireJS, preventing memory leaks by unbinding events, reducing DOM reflows when rendering collections, avoiding unnecessary XHR requests on page load, using profiling tools to identify bottlenecks, debating the tradeoffs of view reduction vs. caching, following jQuery performance rules, and references additional resources on Backbone best practices. The goal is to verify and apply these techniques to enhance code performance.

This document provides links to various resources for the Wicket framework: - Official Wicket sites such as wicketframework.org and wicketstuff.org which contain documentation, examples, and components. - Other sites like wicket-library.com that provide libraries, documentation, and examples. - Integration projects like wiQuery that allow using jQuery with Wicket. - Component libraries for Wicket like inMethod grids. - Resources for Ajax frameworks and finding Wicket code.

This document summarizes Matt Raible's presentation on the future of web frameworks. It discusses how web frameworks have evolved from early technologies like CGI and PHP to modern frameworks like Ruby on Rails and Grails. It also explores emerging trends like HTML5, mobile development, APIs, and the growing importance of speed. Raible believes future frameworks will focus on performance, support plugins and mobile/desktop, and encourage innovation while building on past successes. The most important factors will be hiring smart developers and focusing on APIs and applications over meetings.

From the 'HTML5 player showcase/How to Build an HTML5 player' given at the Open Video Conference in October 2010.

The document discusses using social media as a "virtual neighborhood" to build relationships, with public platforms like Facebook and Twitter representing the "front yard" for weak ties, private messaging and email representing the "backyard" and "kitchen" for stronger ties, and suggesting moving relationships from social media to phone or in-person meetings represents moving to a "virtual block party" and developing the strongest personal ties. It encourages using social media to create, maintain and build relationships over time by being present, investing time, and focusing on quality over quantity of contacts.

This document discusses strategies for making websites work well on touchscreen devices. It begins by explaining how browsers emulate mouse events on touchscreens but that this has limitations. Native touch events are introduced as a better solution. The document then covers challenges like the 300ms delay between touch and click, issues with hover interfaces on touch, and difficulties tracking finger movement. It provides examples and recommendations for handling these problems, such as using touchstart instead of click, avoiding hover menus, and handling both touchmove and mousemove events. Throughout, it provides links to code samples demonstrating these strategies in action.

This document discusses approaches to web development for mobile devices. It begins by noting the increasing importance of the mobile web. It then examines three approaches: 1) Doing nothing and hoping modern mobile browsers can handle desktop sites, 2) Creating a separate mobile site, and 3) Having a single adaptive site that refactors content for different screens using fluid layouts, progressive enhancement and media queries. The document dives into techniques for adaptive design like viewport meta tags, touch events, and responsive images. It also notes remaining challenges like viewport interpretation and high-DPI screens lying about resolution.

The document discusses using social media to expand professional networks. It recommends posting often on different platforms and including photos to engage current supporters. Using social media allows for inexpensive communication to update supporters on activities and mobilize support. While social media is a public platform, moving conversations private through direct messages or offline through meetings strengthens relationships from weak ties to stronger personal ties. Real networking involves building relationships through consistent online and offline presence.

The document discusses HTML5 multimedia capabilities for playing audio and video natively in browsers without plugins like Flash. It covers the <video> and <audio> tags, supported formats like MP4, WebM, Ogg Theora, and browser support. It also discusses the media playback API and features like controls, sources for different formats, and responsive design.

The document provides tips for building relationships with media and getting coverage for an organization. It stresses the importance of understanding media outlets and reporters, being a consistent source of information, having a strategic outreach plan, following up after meetings, and being flexible to cover unplanned stories. The key is investing time in media relationships, having a calendar of planned outreach that provides newsworthy information and story ideas, and following through to maintain credibility.

This document provides an overview of HTML5 and related technologies, including: - A brief history of HTML5 and how it came to be standardized by the W3C. - New semantic elements in HTML5 that provide more accurate meanings. - Improved form controls like date/time pickers without JavaScript. - Native audio and video playback with <audio> and <video> tags. - The <canvas> element for scriptable drawing. - New JavaScript APIs for features like geolocation. - Recommendations around feature detection and progressive enhancement when using emerging HTML5 features.

This document provides an overview of HTML5 and discusses whether it should be used today. It notes that while HTML5 is exciting, there are still interoperability issues that make it premature to deploy for most sites. The document then covers the history and development of HTML5, new semantic elements, forms, multimedia capabilities like video and canvas, geolocation, offline detection and more. It emphasizes using feature detection and providing fallback options to support older browsers.

HTML 5 may take some time to find full support in all major browsers, but you may be surprised to discover how many of HTML 5’s features are available today! HTML 5 is the next generation standard for web applications, and it promises to give plug-in based RIAs a serious challenge. In this demo heavy session, you’ll see HTML 5 in action and learn what you can do with today’s browser support for the new standard. If you’re building rich web applications and you’ve never touched HTML 5, this session is a must see.

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.

HTML5 is a new version of HTML that provides new semantic elements and APIs for multimedia content like video and canvas scriptable graphics without plugins. It standardizes current browser behaviors and introduces new form and media elements that work across browsers. While support is not perfect yet, progressive enhancement approaches ensure graceful degradation. HTML5 provides alternatives to plugins like Flash, giving developers more choice in how to build rich web applications.

Bruce Lawson demos HTML5, especially forms and video element at Sheffield Speak The Web, 8 February 2010

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

HTML5 is an umbrella term for new HTML elements and JavaScript APIs that provide richer semantics and interactions on the web. Some key features of HTML5 include new elements like <video>, <audio>, and <canvas>, offline application caching, local storage, and geolocation. HTML5 aims to make the web more app-like without plugins by standardizing media playback, graphics, offline support, and other capabilities in a way that works across browsers. The specification is developed through the joint efforts of browser vendors to provide a common set of features that work consistently on different browsers without needing plugins.

The document discusses HTML5 and provides information on its features and uses. It outlines the main components of HTML5 including multimedia, styling, connectivity and more. It provides examples of HTML5 markup for video, semantics, fonts and responsive design. It also discusses the HTML5 standards process and offers resources for learning more about HTML5.

In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.

Bruce Lawson gave a presentation on HTML5 and why it was created. Some key points: - HTML5 was created to better support web applications as existing technologies like HTML 4 were not adequately serving this area. - It provides new semantic elements, rich forms, video/audio elements, and JavaScript APIs to build powerful web applications without Flash/Silverlight. - It aims to balance backwards compatibility, new features, interoperability, and accessibility.

The document discusses the current state and capabilities of HTML5. It provides an overview of new HTML5 elements that add semantics, improved form controls, multimedia elements like video and audio, and the canvas element. While browser support for HTML5 is still evolving, many features can be used today through progressive enhancement. Feature detection and polyfills can help support older browsers. The document advocates an approach of giving developers choice between HTML5 and other technologies like Flash.

21 September 2011 presentation to Accessibility London (#a11yldn) unconference on HTML5 and accessibility by Bruce Lawson of Opera.

1. Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax. It defines detailed processing models to foster interoperable implementations and improves markup for documents and APIs for emerging web applications. 2. Todd Anglin discusses HTML5, CSS3, and techniques for using them today including progressive enhancement, feature detection, and libraries that help support older browsers. 3. He recommends trying a new HTML5/CSS3 technique like data attributes, border radius, box shadow, or animations using CSS transitions.

The document provides an overview of HTML5 and how to implement it with Drupal 7. It discusses new HTML5 elements, attributes, and forms; how to make Drupal 7 themes responsive with HTML5; differences between HTML4, XHTML, and HTML5; and how to use CSS3 with HTML5 for effects like shadows and gradients. The document includes links to HTML5 tools and resources for Drupal and recommends familiarity with HTML, CSS, Drupal theming, and modern browsers.

The document discusses the future of web technologies, focusing on three main areas: 1. New web standards like HTML5 that provide more capabilities without plugins through elements, forms, canvas and video. CSS3 media queries also allow adaptive content for different devices. 2. Adaptive content through media queries and responsive design can make sites work across devices that vary in screen size, input, and capabilities. 3. The browser is emerging as a platform through widgets, JavaScript APIs and the browser runtime, allowing development across devices without writing for each platform natively. Standards will make the browser a ubiquitous platform.

The document discusses the history and features of HTML5. It describes how HTML5 aims to evolve the HTML standard to enable richer web applications while maintaining compatibility. Key features discussed include new semantic elements, forms improvements, video/audio playback, 2D/3D canvas drawing, and local storage APIs to store data on the client-side. The document provides examples and browser support information for various HTML5 features.

This document provides an introduction and overview of HTML5. It discusses that HTML5 includes the 5th revision of HTML, CSS3, and JavaScript APIs. It is developed by a consortium including Mozilla, Opera, Apple, and Google. Key features of HTML5 mentioned include reach, portability, freedom from plugins, rich graphics, performance improvements, semantics, interactivity, offline access, real-time capabilities, and security. Examples are given of HTML5 capabilities like canvas drawing, 3D rendering with WebGL, smarter forms, CSS3 effects, and geolocation. Resources for learning more about HTML5 are also provided.

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.

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...

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

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...

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...

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

Patrick H. Lauke: Styling Your Web Pages with Cascading Style Sheets / EDU course / University of Salford / 13 February 2006

Patrick H. Lauke: Evaluating web sites for accessibility with Firefox / Manchester Digital Accessibility Working Group (MDAWG) / 1 March 2006

Patrick H. Lauke: Managing and educating content editors - experiences and ideas from the trenches / Public Sector Forums / 10 May 2007

Patrick H. Lauke - Implementing Web Standards across the institution: trials and tribulations of a redesign / Institutional Web Management Workshop IWMW / Birmingham / 28 July 2004

Patrick H. Lauke: Geolinking content - experiments in connecting virtual and physical places / Institutional Web Management Workshop IWMW / York / 16 July 2007

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.

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.

Patrick H. Lauke: Doing it in style - creating beautiful sites, the web standards way / WebDD / Reading / 3 February 2007

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 web developer can use / South By Southwest SXSW / Austin, Texas, 11 March 2007

One from the archives...presentation about the development of the University of Salford website in 2007

Patrick H. Lauke: Keyboard accessibility - just because I don't use a mouse doesn't mean I'm second class / Skillswap Bristol / 11 Nobember 2008

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/

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/

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.

Everything that I found interesting last month about the irresponsible use of machine intelligence

The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era. Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.

Recent advancements in the NIST-JARVIS infrastructure: JARVIS-Overview, JARVIS-DFT, AtomGPT, ALIGNN, JARVIS-Leaderboard