The document provides an overview of HTML5, including its history, new semantic elements like <header> and <article>, improved forms capabilities with built-in validation, and error handling standardized in the specification. It discusses both benefits like leaner markup and criticisms like incomplete browser support for new features. Examples are given throughout to illustrate new HTML5 syntax and capabilities.
HTML5 has arrived! The W3C published a new editor's draft at the start of 2011, and many of the new features detailed within have widespread support across all the latest major browsers. But what does it mean to you, the web developer on the street? Should you embrace it right now, and start using it to implement your own futuristic unicorns and rainbows? In this talk Chris Mills from the Opera web browser looks at some HTML5 history, how it improves upon HTML4, the basics of some of the major new features, such as new structural elements, new form controls, <video> and <canvas>, and how to produce an HTML5 site that will also function in older browsers.
HTML5 has arrived! The W3C published a new editor's draft at the start of 2011, and many of the new features detailed within have widespread support across all the latest major browsers. But what does it mean to you, the web developer on the street? Should you embrace it right now, and start using it to implement your own futuristic unicorns and rainbows? In this talk Chris Mills from the Opera web browser looks at some HTML5 history, how it improves upon HTML4, the basics of some of the major new features, such as new structural elements, new form controls, <video> and <canvas>, and how to produce an HTML5 site that will also function in older browsers.
(For non-developers) HTML5: A richer web for everyoneChris Mills
This talk is designed to explain the advantages of HTML5 in a way that makes more sense to the non-developers involved in a web site project. It is therefore aimed at designers, brand managers, project managers and bosses, and talks about HTML5 with less code and tech specs, and more real world advantages of using it in your web project.
C# Corner Delhi Chapter announces its first monthly chapter meet for students.
On 20th September, prepare yourself for Industries, Interviews and Learn HTML5
http://www.c-sharpcorner.com/Events/104/delhi-students-day-prepare-yourself-for-industries-interv.aspx
In recent years, a number of features have appeared on the web platform that allow us to provide better user experiences, largely through doing things more efficiently rather than inventing completely new patterns. In this talk, Mozilla’s Chris Mills explores a few of these features — such as Streams, Service workers and PWAs — and why they are worth knowing about as we move towards the future.
Feedback handling, community wrangling, panhandlin’Chris Mills
Feedback is a big deal. As tech writers we want to receive adultation when the docs rock, or constructive criticism when there is cleanup required. Or EVEN BETTER, we want the engineers/community members/reddit readers/clowns giving the feedback to come on board and help fix the problems.
But. Actually tweaking the signal to noise ratio to something useful is really difficult. Especially when you are curating a site as enormous as MDN, the content of which is open licensed, multilingual, and open for public editing.
In this talk, MDN writer Chris Mills discusses topics such as how to choose the right feedback mechanism(s) for your situation, how to stem the torrent and get the right kind of feedback and contributions (actually useful), effective begging, stealing and borrowing, and how to balance being firm and keeping control of your product with being diplomatic and being able to sleep at night.
(For non-developers) HTML5: A richer web for everyoneChris Mills
This talk is designed to explain the advantages of HTML5 in a way that makes more sense to the non-developers involved in a web site project. It is therefore aimed at designers, brand managers, project managers and bosses, and talks about HTML5 with less code and tech specs, and more real world advantages of using it in your web project.
C# Corner Delhi Chapter announces its first monthly chapter meet for students.
On 20th September, prepare yourself for Industries, Interviews and Learn HTML5
http://www.c-sharpcorner.com/Events/104/delhi-students-day-prepare-yourself-for-industries-interv.aspx
In recent years, a number of features have appeared on the web platform that allow us to provide better user experiences, largely through doing things more efficiently rather than inventing completely new patterns. In this talk, Mozilla’s Chris Mills explores a few of these features — such as Streams, Service workers and PWAs — and why they are worth knowing about as we move towards the future.
Feedback handling, community wrangling, panhandlin’Chris Mills
Feedback is a big deal. As tech writers we want to receive adultation when the docs rock, or constructive criticism when there is cleanup required. Or EVEN BETTER, we want the engineers/community members/reddit readers/clowns giving the feedback to come on board and help fix the problems.
But. Actually tweaking the signal to noise ratio to something useful is really difficult. Especially when you are curating a site as enormous as MDN, the content of which is open licensed, multilingual, and open for public editing.
In this talk, MDN writer Chris Mills discusses topics such as how to choose the right feedback mechanism(s) for your situation, how to stem the torrent and get the right kind of feedback and contributions (actually useful), effective begging, stealing and borrowing, and how to balance being firm and keeping control of your product with being diplomatic and being able to sleep at night.
Web developers now have a large number of APIs available allowing them to harness complex functionality via JavaScript and produce ever more interesting web experiences. This presentation looks at where we can from, where APIs are going in the future, and what problems we are currently in the process of solving. This includes providing offline installation, multimedia, performance, and more.
Web developers now have a large number of APIs available allowing them to harness complex functionality via JavaScript and produce ever more interesting web experiences. This presentation looks at where we can from, where APIs are going in the future, and what problems we are currently in the process of solving. This includes Multimedia, Offline, device hardware access, internationalization, and more.
This presentation shares some ideas and insights on Guerrilla education that may help in improving learning experiences related to the Web and web development/design. It also gives thoughts on Mozilla's new education tools and where things are going in the near future.
In this talk, Chris Mills discusses the historic problems with web apps and which technologies are stepping up to fill the holes. This includes device APIs such as Web Activities, Camera, device orientation and nfc, offline apps (which are finally looking realistic thanks to service workers), installable apps, and high quality games and other immersive high performance experiences using such features as Web audio API, Pointer lock, asm.js and Emscripten.
This set of slides accompanies the MDN workshop held at BrazilJS 2014. It features a guide to getting started with contributing to the Mozilla Developer Network documentation resource, and links to JavaScript and API work to get started on.
For years when designing web sites we'e had to use a lot of of image files--a lot!--for anything and everything. And I’m moving beyond content images here, thinking more about background images for textures, gradients, interesting borders, rounded corners, transparency, drop shadows, interesting fonts, and more.
This contributed to the whole experience being complicated, inflexible, and inefficient, with loads of assets and HTTP requests to deal with. Fast forward to the modern day, and the good news is that CSS now provides us with a lot of new tools for programmatically creating images for many common uses, making things a whole lot easier to handle.
In this talk Chris Mills will touch upon a number of more widely supported featured such as gradients, border-radius, border-image, and box-shadow, before moving on to what we can expect a bit further down the line with more nascent features like shaders, filters and masks. In addition, he will also briefly discuss what can be done about older browsers that do not support such features.
This is the full version of my main presentation for 2013, providing an overview of the most interesting new layout features available in CSS3, along with advice on supporting older browsers, and some context around why they are important.
This version of my main presentation for 2013, first given at the Camp Digital event in Manchester, provides an overview of the most interesting new layout features available in CSS3, along with advice on supporting older browsers, and some context around why they are important.
This presentation is a discussion of good and bad accessibility practices, leading up to the point that accessibility that accessibility should not be a separate subject, but instead should be a mandatory part of good web design.
This talk was given at the responsive web design event at Manchester Metropolitan university on December 5th 2012. It looks at responsive design from the standards perspective, starting with history, and how we got to where we are now, and looking at the technologies available for practicing RWD in the modern day and in the near future.
The world is now officially device-crazy!
Just look at the number of Mobile phones and tablets sold recently, and the number of ordinary people (not just geeks) who have a mobile device and a tablet in addition to their desktop computer, or have even dispensed with the desktop computer altogether.
It would be foolish of us to just design for desktop, or just for mobile. What we need is a way to optimize our layouts for a multitude of different screen sizes and other factors!
In this talk Chris Mills looks at media queries and viewport in detail:
Their origins in media types
Why media types failed for mobile and devices, and why media queries will succeed
Media query basics
Practical examples of how they work across modern browsers and devices
Exploring viewport - why it is needed, and how best to use viewport and MQ's together
A look forward to the future, and the @viewport proposal
Mobile first versus desktop first
The IE problem, and how we can slay that beast in this particular context
Device breakpoints versus content breakpoints. What works best?
Adapt and respond: keeping responsive into the futureChris Mills
Media queries blah blah blah. You've all heard that talk a hundred times, so I won't do that. Instead, I'll go beyond the obvious, looking at what we can do today to adapt our front-ends to different browsing environments, from mobiles and other alternative devices to older browsers we may be called upon to support.
You'll learn advanced media query and viewport tricks, including a look at @viewport, Insights into responsive images: problems, and current solutions, providing usable alternatives to older browsers with Modernizr and YepNope, other CSS3 responsive goodness - multi-col, Flexbox, and more, and finally where RWD is going — matchMedia, CSS4 media queries, etc.
Angels versus demons: balancing shiny and inclusiveChris Mills
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!
HTML5 and CSS3: does now really mean now?Chris Mills
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
This presentation was given at the Greenwich university "Talk web design" day, 11th January 2012. It discusses what open web standards are and why they are a better alternative to proprietary technologies, what the W3C is and how web standards are created, and what relationship the W3C has with the rest of the web community.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
HTML5 Pearson preso
1. The “crazy” world of
HTML5
Chris Mills, Opera Software
Monday, 19 September 2011
2. Who am I?
‣ Opera open standards evangelist and tech writer
‣ Telling the world about open standards & Opera
‣ Improving web education
‣ Drumming in a heavy metal band
Monday, 19 September 2011
4. What is HTML5?
A new HTML spec that defines:
‣ New semantic elements
‣ New features such as native video, more
powerful forms, web sockets
‣ New APIs for controlling such features
‣ Error handling, and other such useful things
Monday, 19 September 2011
5. Or according to some...
‣ HTML5
‣ CSS3, WOFF
‣ SVG, SMIL, WebGL
‣ Geolocation, WAC
‣ Indexed DB, File API
‣ Server-sent events
‣ Web workers, XHR2
‣ & every other open standard under the sun!
Monday, 19 September 2011
6. A brief history of HTML
‣ HTML first proposed 1989-1991
‣ HTML3 first standardised in 1995
‣ HTML 4.01 standardised in 1999
‣ Corrections submitted in 2001
Monday, 19 September 2011
7. HTML5 history + politics
‣ W3C decided the future was XHTML
‣ This didn’t go down well, and no-one cared
about XHTML2
Monday, 19 September 2011
8. Why did XHTML fail?
‣ XHTML2 features aren’t backwards compatible
with “the Web so far”
‣ XHTML1 didn’t work properly anyway
‣ XML in general doesn’t suit the Web
Monday, 19 September 2011
9. HTML5 history + politics
‣ HTML5 (was web applications 1.0) started by
WHATWG in 2004ish
‣ Adopted by W3C 2008
‣ WHATWG version became version-less in 2011
Monday, 19 September 2011
10. HTML is the new HTML5?
In January 2011, Ian Hickson announced that the
WHATWG HTML5 spec was dropping its version
number, and becoming a living spec that could
keep being added to, as more features came to
fruition. The W3C version is keeping its version
number, and acting as a snapshot.
Monday, 19 September 2011
11. Why can HTML5 succeed?
‣ It is backwards compatible with HTML4
‣ It is written to be competitive with other
technologies, eg Flash, Silverlight
‣ It fills up holes and adds features: it doesn’t
replace HTML4.x
Monday, 19 September 2011
12. HTML5 features
http://www.flickr.com/photos/cybertoad/247896160/
Monday, 19 September 2011
13. There’s nothing wrong with
HTML4...
http://www.flickr.com/photos/birdfarm/519230710/
Monday, 19 September 2011
14. But HTML5 has more bling
As if! Not publishing this one...
Monday, 19 September 2011
15. HTML5 features
‣ More accurate semantics (eg <header>,
<footer>)
‣ Better forms
‣ <video>, <audio>
‣ <canvas>
‣ Offline apps
‣ Web Sockets*, Geolocation*
‣ Microdata, Web Workers, History API, etc.
Monday, 19 September 2011
16. New semantics
http://www.flickr.com/photos/zscheyge/49012397/
Monday, 19 September 2011
17. HTML5 doctype
<!DOCTYPE html>
Monday, 19 September 2011
19. Most common classes and
IDs?
Google did a study of the most common classes
and IDs on the Web. so did Opera.
‣ http://code.google.com/webstats/2005-12/
classes.html
‣ http://devfiles.myopera.com/articles/572/idlist-
url.htm
‣ http://devfiles.myopera.com/articles/572/
classlist-url.htm
Monday, 19 September 2011
26. <aside>
<aside>
<h2>About the author</h2>
<p>Chris Mills is a front-end bling junkie
working for Opera Software...</p>
</aside>
Monday, 19 September 2011
27. <time>
<p>Article published on the
<time datetime="2011-03-12T09:48">
12th March 2011, at 9:48am
</time>
</p>
Monday, 19 September 2011
28. <hgroup>
<hgroup>
<h1>Top level heading</h1>
<h2>This is a really descriptive subtitle</h2>
</hgroup>
Monday, 19 September 2011
29. <figure> and <figcaption>
<figure>
<img src="bear.jpg"
alt="this is the bear that I wrestled" />
<figcaption>This is the bear that I
wrestled.</figcaption>
</figure>
Monday, 19 September 2011
30. Where does this leave the
humble <div>?
Use it for anything that isn’t covered by other new
elements, and is just a general grouping, e.g. for
styling purposes, for which you don’t want to
create a new section. An intro <div>, perhaps?
Monday, 19 September 2011
31. The HTML5 outlining
algorithm
Heading/section hierarchy based on sectioning
element hierarchy, not <hx> elements used
‣ No longer limited to six heading levels
‣ Hierarchy stays correct when syndicated
‣ You can retain HTML4 heading levels for
backwards compatibility
Monday, 19 September 2011
33. New semantics rock!
‣ Better machine readability
‣ Better interoperability
‣ More consistency of code
‣ Better accessibility (once screen readers catch
up)
‣ Leaner markup that is easier to style
‣ More in keeping with what real webdevs do
Monday, 19 September 2011
34. Lax syntax?
Some say that HTML5 syntax is really lax — you:
‣ don’t need to quote attributes
‣ can minimise attributes
‣ don’t need to self close
‣ can mix upper and lower case
‣ You don’t even need to include <html>, <head>
and <body>!
Monday, 19 September 2011
35. Lax syntax?
But this more accurately reflects what real
developers do, rather than what the XHTML spec
THINKS they should
‣ You can use the style you want (although you
should stick to some best practices)
‣ The browser fills in a lot of this stuff
‣ The HTML5 spec defines how errors should be
handled
Monday, 19 September 2011
36. Example
http://people.opera.com/cmills/workshop/
http://devfiles.myopera.com/articles/4612/
pwei_sample_html5.html
Monday, 19 September 2011
37. Browsers don’t ACTUALLY
support these ... yet
But we can get them displaying fine
‣ You can style any element with CSS, even if the
browser doesn’t recognise it
‣ Give all the structural elements display: block;
‣ IE also needs createElement('article');
Monday, 19 September 2011
38. Styling with CSS
http://www.flickr.com/photos/nickwebb/3016498475/
Monday, 19 September 2011
39. Styling with CSS
‣ Not much different to what we already do
‣ Needs a bit of extra help to style HTML5
semantic elements
‣ CSS3 brings some useful tricks
‣ Fallbacks need some careful thought
Monday, 19 September 2011
40. Extra styling help
article, section, footer {
display: block;
}
document.createElement('article');
document.createElement('section');
document.createElement('footer');
Monday, 19 September 2011
43. Error handling
http://www.flickr.com/photos/nickwebb/3016498475/
Monday, 19 September 2011
44. HTML error handling...
...never existed previous to HTML5
So browsers had to work out what do to with bad
markup themselves.
Monday, 19 September 2011
45. This sample...
<p><b>This text should be bold</p>
<p>Should this text be bold?</p>
<p><a href="#"></b>This text should be a link</p>
<p>Should this text be a link?</p>
Monday, 19 September 2011
46. ...in Opera...
<p><b>
This text should be bold
<p>Should this text be bold?</p>
<p>
<a href="#">This text should be a link</a>
<p>Should this text be a link?</p>
</p>
</p></b>
Monday, 19 September 2011
47. ...in Firefox...
<p><b>This text should be bold</b></p>
<b/>
<p><b>Should this text be bold?</b></p>
<b/>
<p><a href="#">This text should be a link</a></p>
<a href="#"/>
<p><a href="#">Should this text be a link?</a></p>
<a href="#"/>
Monday, 19 September 2011
48. ...in IE...
<p><b>This text should be bold</b>
This text should be a link
</p>
<p>Should this text be bold?</p>
<p><a href="#"/></p>
<p>Should this text be a link?</p>
Monday, 19 September 2011
49. HTML5 states exactly what
to do
This will cut down on a lot of cross site problems
For more, see “100% Ragnarök’n’roll” at
http://labs.opera.com/news/2011/07/21/
Monday, 19 September 2011
58. Other new input types
<input type="email">
<input type="url">
<input type="tel">
Monday, 19 September 2011
59. Validation
Form validation used to be horrendous
Monday, 19 September 2011
60. function validate() {
var str = “”;
var elements = document.getElementsByTagName('input');
// loop through all input elements in form
for(var i = 0; i < elements.length; i++) {
// check if element is mandatory; ie has a pattern
var pattern = elements.item(i).getAttribute('pattern');
if (pattern != null) {
var value = elements.item(i).value;
// validate the value of this element, using its defined pattern
var offendingChar = value.match(pattern);
// if an invalid character is found or the element was left empty
if(offendingChar != null || value.length == 0) {
// add up all error messages
str += elements.item(i).getAttribute('errorMsg') + “n” +
“Found this illegal value: '” + offendingChar + “' n”;
// notify user by changing background color, in this case to red
elements.item(i).style.background = “red”;
}
}
}
if (str != “”) {
// do not submit the form
alert(”ERROR ALERT!!n” +str);
Monday, 19 September 2011
61. HTML5 gives you this
<input type="text" required>
Monday, 19 September 2011
62. And this
<input type="text" required
pattern="[A-z]{1,20} [A-z]{1,20}">
Monday, 19 September 2011
63. Other new attributes
autofocus
placeholder
min
max
step
Monday, 19 September 2011
66. JS custom error message
input.setCustomValidity('That is not the correct answer!');
Monday, 19 September 2011
67. Form awesomeness
‣ Much easier validation
‣ Easier to implement complicated controls, with
better semantics
‣ They degrade to basic text inputs
‣ Hinting at better UX
Monday, 19 September 2011
69. Form detractors
‣ Support not completely there yet
‣ Not easy to customise text of error messages
‣ Impossible to customise styling of error
messages
Monday, 19 September 2011
70. Examples
http://people.opera.com/cmills/workshop/
html5_forms.html
http://devfiles.myopera.com/articles/4582/html5-
forms-example.html
Monday, 19 September 2011
71. <video> and <audio>
http://www.flickr.com/photos/stonebird/28894187/
Monday, 19 September 2011
72. <video> and <audio>
New elements, plus new API for controlling audio
and video
Monday, 19 September 2011
73. The old school way
<object width="425" height="344">
<param name="movie" value="http://
www.example.com/v/LtfQg4KkR88&hl=en&fs=1">
</param>
<param name="allowFullScreen" value="true">
</param>
<embed src="http://www.example.com/v/
LtfQg4KkR88&hl=en&fs=1"
type="application/x-shockwave-flash"
allowfullscreen="true" width="425" height="344">
</embed></object>
Monday, 19 September 2011
74. The new school: <video>
<video src="video.webm"
width="480px"
height="283px"
controls
poster="poster.png"
autoplay
loop>
</video>
Monday, 19 September 2011
75. Fallback
<video src="video.webm"
width="480px"
height="283px"
controls
poster="poster.png"
autoplay
loop>
<p>Your browser doesn’t support HTML5 video. <a
href="myVideo.webm">Download the video
instead</a>.</p>
</video>
Monday, 19 September 2011
81. Native <video> is awesome!
‣ Works well with other open standards
‣ Built-in keyboard accessibility
‣ API for customizing controls, etc.
‣ Doesn’t require plugins!
‣ Good cross browser support
‣ Can provide fallbacks for older browsers
‣ Many ready rolled players exist - jPlayer, Sublime
video
Monday, 19 September 2011
82. What’s bad about <video>?
‣ People can download <video> easily
‣ Captioning and suchlike is at an early stage
‣ Format wars...
Monday, 19 September 2011
83. WebVTT (née WebSRT)
‣ Add text tracks onto a video
‣ for things such as subtitles and captions
‣ .vtt files contain timestamp ranges with text
tracks, and limited styling info
‣ <track> element associates these with video
Monday, 19 September 2011
84. .vtt file example
WEBVTT
1
00:00:10.500 --> 00:00:13.000 A:start
Elephant's Dream
2
00:00:15.000 --> 00:00:18.000 A:end L:10%
At the <b>left</b> we can see...
Monday, 19 September 2011
85. <track> element example
<video controls>
<source src="video-file.mp4" type="video/mp4">
<source src="video-file.webm" type="video/webm">
<track src="en.vtt" kind="subtitles" srclang="en"
label="English subtitles">
</video>
Monday, 19 September 2011
86. Currently supported
nowhere
‣ But you can add support in using JS libraries
‣ Playr
‣ Leanback Player
‣ Captionator
Monday, 19 September 2011
87. Future Audio APIs
‣ Web Audio API (and Moz’s Audio Data API)
‣ Supported in Chrome and FF, respectively
‣ Access sample rates, frame buffer length, etc.
‣ Create audio visualisations
‣ Write your own audio data programatically
‣ Audio stream synthesis and processing
‣ Spacialised audio for 3D games
Monday, 19 September 2011
88. APIs for streaming media
‣ getUserMedia — get a media source (eg a
microphone or a web cam)
‣ PeerConnection API — make a connection (web
socket or XHR) between peers through which to
send media
‣ Stream API — stream a media source
‣ WebRTC (http://www.webrtc.org/) is the umbrella
term for all this stuff
‣ Opera has experimental support
Monday, 19 September 2011
89. Adaptive streaming
‣ Each stream stored in multiple quality levels
‣ As bandwidth changes, the supporting device
can grab video chunks from the different quality
levels
‣ an XML manifest file stores the data that relates
to the different quality levels
‣ MPEG’s DASH is a first attempt, but not great
Monday, 19 September 2011
90. <canvas>
http://www.flickr.com/photos/pixeljuice23/3121241987/
Monday, 19 September 2011
91. <canvas>
‣ Standard API for drawing
‣ Scriptable graphics
Monday, 19 September 2011
92. The basics
<canvas id="canvas" width="400" height="300">
...fallback...
</canvas>
Monday, 19 September 2011
93. The basics
ctx = canvas.getContext("2d");
ctx.fillRect(x, y, width, height);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);
Monday, 19 September 2011
94. Drawing an image onto a
canvas
ctx = canvas.getContext("2d");
var logo = new Image();
logo.src = 'logo.png';
ctx.drawImage(logo,x1,y1,w1,h1,x2,y2,w2,h2);
Monday, 19 September 2011
95. Accessing an image data
array
ctx = canvas.getContext("2d");
canvasData = ctx.getImageData(x,y,w,h);
[R,G,B,A,R,G,B,A,R,G,B,A,R,G,B,A, … ]
Monday, 19 September 2011
96. Canvas can also do video
ctx = canvas.getContext("2d");
v = document.getElementById('player');
ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);
Monday, 19 September 2011
97. <canvas> pros
‣ Great for games and image/video manipulation
(now JS processors have caught up)
‣ Much faster than markup-based animation (eg
SVG, SMIL)
‣ Runs on iDevices, unlike Flash
‣ Support across all modern browsers
‣ Add support for older browsers using Polyfills,
like Excanvas
Monday, 19 September 2011
98. <canvas> cons
‣ Content is inaccessible
‣ No animation API built in
‣ Can be really slow for large dynamic areas, like
UIs
Monday, 19 September 2011
100. Offline apps
http://www.flickr.com/photos/bzedan/2441516764/
Monday, 19 September 2011
101. The web is pretty crap
offline
‣ So how do we address this?
‣ HTML5 saves the day (again)
‣ Application Cache (AppCache) for assets
‣ Web storage for simple data
‣ WebSQL/IndexedDB for complex data
Monday, 19 September 2011
102. AppCache Manifest
reference
<html manifest="blah.manifest">
Monday, 19 September 2011
103. Manifest file
CACHE MANIFEST
# send this with correct text/cache-manifest MIME
images/sprites.png
scripts/common.js
scripts/jquery.js
styles/global.css
NETWORK:
# never cached (apart from normal caching mechanism)
onlineonly.css
FALLBACK:
# pattern matching. fallback file will also be cached
images/ images/not-offline.png
Monday, 19 September 2011
104. Web (local/session) storage
localStorage/sessionStorage
localStorage.setItem(key, value);
localStorage.getItem(key);
localStorage.clear();
localStorage.key = value;
if (localStorage.key == '…') { … }
Monday, 19 September 2011
105. WebSQL
var db =
openDatabase(dbName, version, displayName,
expectedSize);
db.transaction(function(tx) {
tx.executeSql(sqlStatement, [], function (tx, result) {
/* do something with the results */
});
});
Monday, 19 September 2011
106. Web databases: future
‣ WebSQL supported in Opera/Webkit
‣ But being discontinued
‣ Moz/IE prefer IndexedDB
‣ All will eventually go this way
‣ WebSQL may well remain good option for mobile
Monday, 19 September 2011
108. HTML5 accessibility
best practices
http://www.flickr.com/photos/tjmartins/3890142316/
Monday, 19 September 2011
109. HTML5 accessibility?
‣ Still no magic bullet
‣ Some a11y boons
‣ And some new (old?) problems
‣ html5accessibility.com is very useful
Monday, 19 September 2011
110. The good things
‣ A lot of elements have keyboard accessibility
built in
‣ New semantics mean lot of advantages (eg no
more skip links?)
‣ Video captioning is coming
‣ WAI ARIA can still be used to supplement where
needed
‣ Some browsers have started exposing element
semantics to AT
Monday, 19 September 2011
111. The bad things
‣ Canvas!
‣ Video a11y (coming soon)
Monday, 19 September 2011
113. When should I use it?
Now!
‣ Most modern browsers support most of this stuff
now
‣ Workarounds are perfectly possible
‣ You are already using HTML5 by using HTML4.x
‣ Don’t wait till it’s completely finished
Monday, 19 September 2011
114. The UK road system is
never finished...
http://www.flickr.com/photos/50014762@N03/4632637811/
Monday, 19 September 2011
115. In general...
‣ ...don’t do browser sniffing
Monday, 19 September 2011
116. Do feature detection/
graceful degradation
‣ http://diveintohtml5.org/everything.html
‣ http://www.modernizr.com/
‣ http://yepnopejs.com/
Monday, 19 September 2011
117. And patch older browsers
as needed
‣ https://github.com/Modernizr/Modernizr/wiki/
HTML5-Cross-Browser-Polyfills
Monday, 19 September 2011
118. HTML5 security?
http://www.flickr.com/photos/freefoto/5692512457/
Monday, 19 September 2011
119. HTML5 security?
‣ Very similar to HTML4
‣ Not much can be done to protect source
‣ Need to be careful about cross domain resource
sharing and messaging
‣ Other questions?
Monday, 19 September 2011
120. Device APIs
http://www.flickr.com/photos/freefoto/5692512457/
Monday, 19 September 2011
121. Device APIs
‣ http://www.w3.org/2009/dap/
‣ Far from being supported
‣ And there are still competing proposals, like WAC
‣ Shame, as this is one killer feature area for web
apps
Monday, 19 September 2011
122. Questions?
What would we like to
see in the spec?
http://www.flickr.com/photos/mikecogh/1812288874/
Monday, 19 September 2011
123. Thanks for listening!
‣ cmills@opera.com
‣ @chrisdavidmills
‣ http://dev.opera.com/articles/tags/html5/
‣ http://html5doctor.com
Monday, 19 September 2011