The document discusses HTML5 and provides information on several topics:
- Browser support for HTML5 audio and video formats is still problematic due to a lack of unified support. The <audio> and <video> elements allow for fallback sources to help address this issue.
- When structuring an HTML5 document, it's important to think about outlining the document and using the appropriate new sectioning elements like <header>, <nav>, <article>, and <section> to reflect the document structure and provide semantic meaning.
- Various HTML5 myths are busted, including claims that HTML5 won't be complete for 10 years, that it isn't supported by most browsers, and that it makes XHTML and
The AV Foundation has grown from a simple audio player quietly added in iPhone OS 2.2 to an extraordinarily ambitious media-creation framework in iOS 4. The latest version provides highly-customizable audio and video capture, deep support for editing and Core Animation-based effects, and export. It is far more comprehensive than nearly any other platform's media framework, mobile or desktop. As a developer, this gives you incredible power… and one heck of a learning curve. In this session, we will take a ground-up look at AV Foundation, starting with its core concepts and patterns, and moving through its most practical and powerful capabilities. Along the way, we'll see how AV Foundation works with iOS' other media APIs -- Core Audio, Media Player, and Core Media -- and how it aggressively uses new iOS 4 programming paradigms like blocks and Grand Central Dispatch. Attendees will come away understanding the straight-arrow paths to AV Foundation's most important features like capture, editing, and export, and how its pieces might be combined in interesting ways to create even more powerful media applications.
The physical universe and the online web universe have many similarities. This talk looks at several of those likenesses and explores the concept of Entropic Websites.
Responsive design sounds simple enough, but in practice it can have you banging your head against the wall. I conducted a poll with the readers on RWD Weekly to find out what was causing the biggest headaches.
We will look through the 6 most common issues and techniques on how you can get started or flip to expert mode.
Responsive Images
Improving Performance
Responsive Typography
Media queries in JavaScript
Layout
HTML5 Multimedia: where we are, where we're goingbrucelawson
A much-hyped feature of HTML5 is native multimedia. In this session we’ll look at embedding <audio> and <video> into your pages, and how to make it work cross-browser and degrade gracefully in older browsers. Sound too good to be true? It’s not!
We’ll look at the pros and the cons of HTML5 multimedia and see how to write simple controls with JavaScript. Most excitingly, we’ll also look at how HTML5 builds in support for subtitles and captions for multimedia accessibility. And you might pick up a Turkish dancing tip on the way.
---
Edited version of my Web Directions London talk on 26 May 2011. Slides that don't make sense out of context are removed.
The AV Foundation has grown from a simple audio player quietly added in iPhone OS 2.2 to an extraordinarily ambitious media-creation framework in iOS 4. The latest version provides highly-customizable audio and video capture, deep support for editing and Core Animation-based effects, and export. It is far more comprehensive than nearly any other platform's media framework, mobile or desktop. As a developer, this gives you incredible power… and one heck of a learning curve. In this session, we will take a ground-up look at AV Foundation, starting with its core concepts and patterns, and moving through its most practical and powerful capabilities. Along the way, we'll see how AV Foundation works with iOS' other media APIs -- Core Audio, Media Player, and Core Media -- and how it aggressively uses new iOS 4 programming paradigms like blocks and Grand Central Dispatch. Attendees will come away understanding the straight-arrow paths to AV Foundation's most important features like capture, editing, and export, and how its pieces might be combined in interesting ways to create even more powerful media applications.
The physical universe and the online web universe have many similarities. This talk looks at several of those likenesses and explores the concept of Entropic Websites.
Responsive design sounds simple enough, but in practice it can have you banging your head against the wall. I conducted a poll with the readers on RWD Weekly to find out what was causing the biggest headaches.
We will look through the 6 most common issues and techniques on how you can get started or flip to expert mode.
Responsive Images
Improving Performance
Responsive Typography
Media queries in JavaScript
Layout
HTML5 Multimedia: where we are, where we're goingbrucelawson
A much-hyped feature of HTML5 is native multimedia. In this session we’ll look at embedding <audio> and <video> into your pages, and how to make it work cross-browser and degrade gracefully in older browsers. Sound too good to be true? It’s not!
We’ll look at the pros and the cons of HTML5 multimedia and see how to write simple controls with JavaScript. Most excitingly, we’ll also look at how HTML5 builds in support for subtitles and captions for multimedia accessibility. And you might pick up a Turkish dancing tip on the way.
---
Edited version of my Web Directions London talk on 26 May 2011. Slides that don't make sense out of context are removed.
SXSW 2010 presentation: Does the one-size-fits-all approach of "One Web" meet the needs of all groups of web users, as web content becomes more complicated? We will discuss strategies for improving accessibility across different devices, covering current issues with mobile accessibility, and potential solutions such as geolocation and CSS3 media queries.
Open Video Conference: HTML and the video tagSilvia Pfeiffer
Slides that were prepared together by all the participants of the "HTML5 and <video> tag" panel at the Open Video Conference, 20th June 2009. Participants: Philip Jagenstedt from Opera, Jan Gerber from Xiph, Viktor Gal from Annodex, Michael Dale from Metavid, Eric Carlson from Apple, and Silvia Pfeiffer from Annodex/Xiph.
Updated Wordpress Multimedia deck with Brightcove, Polls, WP-Geo and more. Originally presented at Wordcamp Raleigh 2010. Presented at WordcampNYC 2010.
HTML5 video & Amazon elastic transcoder - FCIP August 2014RZasadzinski
An intro to implementing HTML5 video in HTML files, as well as using the WordPress short code to embed HTML5 video. A brief description of the Flash approach that still works better for transparent video, and how to embed that Flash content with SWFObject 2 and include fallback content using the HTML5 video techniques covered. This allows use of Flash for video with a transparent background for all users & browsers that have Flash installed, and uses an HTML5 fallback for devices and users that don't have an appropriate version of the Flash Player installed.
A few key items are also listed with regard to using Amazon's Elastic Transcoder to convert videos into the needed formats for HTML5 video.
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
SXSW 2010 presentation: Does the one-size-fits-all approach of "One Web" meet the needs of all groups of web users, as web content becomes more complicated? We will discuss strategies for improving accessibility across different devices, covering current issues with mobile accessibility, and potential solutions such as geolocation and CSS3 media queries.
Open Video Conference: HTML and the video tagSilvia Pfeiffer
Slides that were prepared together by all the participants of the "HTML5 and <video> tag" panel at the Open Video Conference, 20th June 2009. Participants: Philip Jagenstedt from Opera, Jan Gerber from Xiph, Viktor Gal from Annodex, Michael Dale from Metavid, Eric Carlson from Apple, and Silvia Pfeiffer from Annodex/Xiph.
Updated Wordpress Multimedia deck with Brightcove, Polls, WP-Geo and more. Originally presented at Wordcamp Raleigh 2010. Presented at WordcampNYC 2010.
HTML5 video & Amazon elastic transcoder - FCIP August 2014RZasadzinski
An intro to implementing HTML5 video in HTML files, as well as using the WordPress short code to embed HTML5 video. A brief description of the Flash approach that still works better for transparent video, and how to embed that Flash content with SWFObject 2 and include fallback content using the HTML5 video techniques covered. This allows use of Flash for video with a transparent background for all users & browsers that have Flash installed, and uses an HTML5 fallback for devices and users that don't have an appropriate version of the Flash Player installed.
A few key items are also listed with regard to using Amazon's Elastic Transcoder to convert videos into the needed formats for HTML5 video.
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
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.
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.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Welocme to ViralQR, your best QR code generator.ViralQR
Welcome to ViralQR, your best QR code generator available on the market!
At ViralQR, we design static and dynamic QR codes. Our mission is to make business operations easier and customer engagement more powerful through the use of QR technology. Be it a small-scale business or a huge enterprise, our easy-to-use platform provides multiple choices that can be tailored according to your company's branding and marketing strategies.
Our Vision
We are here to make the process of creating QR codes easy and smooth, thus enhancing customer interaction and making business more fluid. We very strongly believe in the ability of QR codes to change the world for businesses in their interaction with customers and are set on making that technology accessible and usable far and wide.
Our Achievements
Ever since its inception, we have successfully served many clients by offering QR codes in their marketing, service delivery, and collection of feedback across various industries. Our platform has been recognized for its ease of use and amazing features, which helped a business to make QR codes.
Our Services
At ViralQR, here is a comprehensive suite of services that caters to your very needs:
Static QR Codes: Create free static QR codes. These QR codes are able to store significant information such as URLs, vCards, plain text, emails and SMS, Wi-Fi credentials, and Bitcoin addresses.
Dynamic QR codes: These also have all the advanced features but are subscription-based. They can directly link to PDF files, images, micro-landing pages, social accounts, review forms, business pages, and applications. In addition, they can be branded with CTAs, frames, patterns, colors, and logos to enhance your branding.
Pricing and Packages
Additionally, there is a 14-day free offer to ViralQR, which is an exceptional opportunity for new users to take a feel of this platform. One can easily subscribe from there and experience the full dynamic of using QR codes. The subscription plans are not only meant for business; they are priced very flexibly so that literally every business could afford to benefit from our service.
Why choose us?
ViralQR will provide services for marketing, advertising, catering, retail, and the like. The QR codes can be posted on fliers, packaging, merchandise, and banners, as well as to substitute for cash and cards in a restaurant or coffee shop. With QR codes integrated into your business, improve customer engagement and streamline operations.
Comprehensive Analytics
Subscribers of ViralQR receive detailed analytics and tracking tools in light of having a view of the core values of QR code performance. Our analytics dashboard shows aggregate views and unique views, as well as detailed information about each impression, including time, device, browser, and estimated location by city and country.
So, thank you for choosing ViralQR; we have an offer of nothing but the best in terms of QR code services to meet business diversity!
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
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.
13. HTML5 won’t be complete
for 10 years!
Definition of complete
is different
14. HTML5 won’t be complete
for 10 years!
Definition of complete
is different
According to this
definition, CSS2 isn’t
complete
15. HTML5 won’t be complete
for 10 years!
Definition of complete
is different
According to this
definition, CSS2 isn’t
complete
Is curently in final
comment stage
16. HTML5 won’t be complete
for 10 years!
Definition of complete
is different
According to this
definition, CSS2 isn’t
complete
Busted!
Is curently in final
comment stage
18. HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
19. HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class=xxx> also
20. HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class=xxx> also
HTML4 is part of
HTML5
21. HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class=xxx> also
HTML4 is part of
HTML5
Little else
22. HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class=xxx> also Plausible!
HTML4 is part of
HTML5
Little else
32. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
33. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, also FF and Chrome nightlies
34. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, also FF and Chrome nightlies
Flash will soon ship with VP8 codec, but not WebM
35. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, also FF and Chrome nightlies
Flash will soon ship with VP8 codec, but not WebM
IE will support VP8 codec if installed separately
36. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, also FF and Chrome nightlies
Flash will soon ship with VP8 codec, but not WebM
IE will support VP8 codec if installed separately
Good analysis at http://x264dev.multimedia.cx/?p=377
37. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, also FF and Chrome nightlies
Flash will soon ship with VP8 codec, but not WebM
IE will support VP8 codec if installed separately
Good analysis at http://x264dev.multimedia.cx/?p=377
License prohibits Apple and MS from using it
39. Thinking in HTML5
Outline your document
Map document sections to sections of your outline
Use sectioning elements to reflect that structure
http://gsnedders.html5.org/outliner/
40. Thinking in HTML5
Outline your document
Map document sections to sections of your outline
Use sectioning elements to reflect that structure
http://gsnedders.html5.org/outliner/
Expand to more complete site outline
Aids document processing
42. Using the New Structure
Elements
They’re not just <div>’s with a new name
43. Using the New Structure
Elements
They’re not just <div>’s with a new name
They have semantic meanings which can be used by
assistive technologies
Can locate navigation links more easily
Locate page’s main content easily
Pages can be meaningfully processed (SEO, etc.)
46. Using Sectioning Elements
There are far more in HTML5 than just <div>
To avoid confusion, ask yourself a series of questions
about the content of the section to help clarify your
choice
51. Does it contain summary
information?
This sort of information would include info such as
copyright date, author information, links to related
documents, etc.
52. Does it contain summary
information?
This sort of information would include info such as
copyright date, author information, links to related
documents, etc.
If yes, mark it up as <footer>
58. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>
59. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>
Is it required in order to understand the content?
60. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>
Is it required in order to understand the content?
If no, mark it up as <aside>
61. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>
Is it required in order to understand the content?
If no, mark it up as <aside>
If yes, could it also be an appendix?
62. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>
Is it required in order to understand the content?
If no, mark it up as <aside>
If yes, could it also be an appendix?
If yes, mark it up as <figure>
63. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>
Is it required in order to understand the content?
If no, mark it up as <aside>
If yes, could it also be an appendix?
If yes, mark it up as <figure>
If no, it’s really part of the main content (see
next question)
67. Does it have semantic
meaning?
If yes, mark it up with the element that reflects its
semantic value
68. Does it have semantic
meaning?
If yes, mark it up with the element that reflects its
semantic value
If no, then use a <div>
69. <audio>
Browser mp3 Vorbis wav AAC
Firefox x x
Opera x x
Safari x x x
Chrome x x
IE9 x ? x
70. <audio>
Browser mp3 Vorbis wav AAC
Problematic, due to
lack of unified suport Firefox x x
Opera x x
Safari x x x
Chrome x x
IE9 x ? x
71. <audio>
Browser mp3 Vorbis wav AAC
Problematic, due to
lack of unified suport Firefox x x
Element allows fallback Opera x x
sources Safari x x x
Chrome x x
IE9 x ? x
72. <audio>
Browser mp3 Vorbis wav AAC
Problematic, due to
lack of unified suport Firefox x x
Element allows fallback Opera x x
sources Safari x x x
http://dev.opera.com/ Chrome x x
articles/view/html5-
audio-radio-player/ IE9 x ? x
73. <video>
Browser Theora H.264 WebM
Chrome x x *
Firefox x *
IE9 *
Opera x x
Safari x
74. <video>
Browser Theora H.264 WebM
Lacks universal
support Chrome x x *
Firefox x *
IE9 *
Opera x x
Safari x
75. <video>
Browser Theora H.264 WebM
Lacks universal
support Chrome x x *
Firefox x *
Allows for fallback
sources IE9 *
Opera x x
Safari x
76. <video>
Browser Theora H.264 WebM
Lacks universal
support Chrome x x *
Firefox x *
Allows for fallback
sources IE9 *
IE9 will support VP8 Opera x x
codec with separate Safari x
install, but not WebM
84. Video Delivery
http://camendesign.com/code/video_for_everybody
HTML solution which uses multiple sources to
support video delivery, falling back to Flash, and even
to .wmv files
http://www.html5video.org/
Aggregation of many javascript-based solutions
87. <details>
Expandable box containing further information
Contains <summary> element (title of details box)
followed by flow content
88. <details>
Expandable box containing further information
Contains <summary> element (title of details box)
followed by flow content
Enables authors to implant further details in a page
without resorting to javascript
92. Forms
Most <form> improvements mimic current javascript
practice
Support for them is currently spotty and idiosyncratic
Best practice is to set up a fallback to javascript for
dumb browsers to use.
94. New Form Field Attributes
autofocus
Focus will automatically start on this field
95. New Form Field Attributes
autofocus
Focus will automatically start on this field
placeholder
Placeholder text
96. New Form Field Attributes
autofocus
Focus will automatically start on this field
placeholder
Placeholder text
use javascript fallback
if (!("autofocus" in document.createElement("input")))
103. Why use them?
If not supported, no effect on browser
Some user agents can modify behavior accordingly
104. Why use them?
If not supported, no effect on browser
Some user agents can modify behavior accordingly
If supported, built-in-browser validation will check them
for you
105. Why use them?
If not supported, no effect on browser
Some user agents can modify behavior accordingly
If supported, built-in-browser validation will check them
for you
pattern attribute supplies regex for “normal” fields
106. Why use them?
If not supported, no effect on browser
Some user agents can modify behavior accordingly
If supported, built-in-browser validation will check them
for you
pattern attribute supplies regex for “normal” fields
If not supported, use a js fallback
110. A simple fix
HTML5Shiv (Fixes IE to recognize new structure
elements)
111. A simple fix
HTML5Shiv (Fixes IE to recognize new structure
elements)
proposed by John Resig, coded by Remy Sharp
112. A simple fix
HTML5Shiv (Fixes IE to recognize new structure
elements)
proposed by John Resig, coded by Remy Sharp
http://html5shiv.googlecode.com/svn/trunk/html5.js
113. A simple fix
HTML5Shiv (Fixes IE to recognize new structure
elements)
proposed by John Resig, coded by Remy Sharp
http://html5shiv.googlecode.com/svn/trunk/html5.js
Include <script src="http://
html5shiv.googlecode.com/svn/trunk/html5.js"></
script> with a conditional comment
122. Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr.inputtypes[inputtype] to test for presence of
new input types
Modernizr.audio[format] for audio format support
123. Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr.inputtypes[inputtype] to test for presence of
new input types
Modernizr.audio[format] for audio format support
CSS3 features indicated by classes attached to <html>
124. Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr.inputtypes[inputtype] to test for presence of
new input types
Modernizr.audio[format] for audio format support
CSS3 features indicated by classes attached to <html>
http://www.modernizr.com/ (11K unzipped, minimized)