Even though the specification is still being written, HTML5 can be implemented for your website today. In this workshop presented by Christopher Schmitt focused on real world solutions, attendees will learn about the new HTML elements and their semantics, HTML5 form elements, incorporate audio and video without Flash, new JavaScript API like geolocation, and more.
Decoupling the Front-end with Modular CSSJulie Cameron
CSS is hard. It’s a simple language, but getting it right and avoiding specificity hell can be a challenge if you don’t have the right framework to back you up. Especially in large scaling projects, you might start adding ID selectors here and !important properties there and the next thing you know you’ve backed yourself into a corner where even the smallest of UI changes will take hours to work out. Ew.
Or how about this? Ever jump into a project and find that even the slightest markup change results in broken JavaScript AND sometimes even broken backend feature tests?! WTF. Ew.
This talk will look at how taking a modular, object-oriented approach to CSS can turn frontend woes into frontend wins. We’ll examine modern CSS approaches like OOCSS, SMACSS, and BEM and demonstrate how they will help to not only decouple your CSS styles and reduce specificity conflicts, but how they will also help to decouple your CSS and HTML from your JavaScript and feature specs.
Video from SEM.js November 2014: http://youtu.be/HoQ-QEusyS0
Decoupling the Front-end with Modular CSSJulie Cameron
CSS is hard. It’s a simple language, but getting it right and avoiding specificity hell can be a challenge if you don’t have the right framework to back you up. Especially in large scaling projects, you might start adding ID selectors here and !important properties there and the next thing you know you’ve backed yourself into a corner where even the smallest of UI changes will take hours to work out. Ew.
Or how about this? Ever jump into a project and find that even the slightest markup change results in broken JavaScript AND sometimes even broken backend feature tests?! WTF. Ew.
This talk will look at how taking a modular, object-oriented approach to CSS can turn frontend woes into frontend wins. We’ll examine modern CSS approaches like OOCSS, SMACSS, and BEM and demonstrate how they will help to not only decouple your CSS styles and reduce specificity conflicts, but how they will also help to decouple your CSS and HTML from your JavaScript and feature specs.
Video from SEM.js November 2014: http://youtu.be/HoQ-QEusyS0
The said coding with JavaScript is for toying also. There no way to do serious software engineering with JavaScript. The JS community proved that quote is wrong - this talk argues the same way.
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.
Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code.
Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Uma breve descrição sobre o HTML 5 e suas principais características como: forms, a nova estrutura, aúdio e vídeo, etc.
An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.
A short introduction to web components. The talk covers the basic standard specified by W3c like HTML imports, templates, shadow DOM and custom elements.
Further a short overview of polyme, x-tags/Brick is given and shows how these bring together native browser implementation, polyfills and framework code to leverage web components technology today.
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
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.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. Note: You are free to download, edit, distribute and use this work in any way you want.
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!Christopher Schmitt
Although the specification is still being written, HTML5 can be implemented on your website today. Get an overview of the new HTML elements and their semantics, learn how to incorporate audio and video without Flash, get acquainted with new JavaScript APIs (like geolocation), and more.
The said coding with JavaScript is for toying also. There no way to do serious software engineering with JavaScript. The JS community proved that quote is wrong - this talk argues the same way.
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.
Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code.
Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Uma breve descrição sobre o HTML 5 e suas principais características como: forms, a nova estrutura, aúdio e vídeo, etc.
An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.
A short introduction to web components. The talk covers the basic standard specified by W3c like HTML imports, templates, shadow DOM and custom elements.
Further a short overview of polyme, x-tags/Brick is given and shows how these bring together native browser implementation, polyfills and framework code to leverage web components technology today.
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
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.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. Note: You are free to download, edit, distribute and use this work in any way you want.
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!Christopher Schmitt
Although the specification is still being written, HTML5 can be implemented on your website today. Get an overview of the new HTML elements and their semantics, learn how to incorporate audio and video without Flash, get acquainted with new JavaScript APIs (like geolocation), and more.
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
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.
JavaScript front end performance optimizationsChris Love
No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them.
This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.
Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targetting, as well as solutions to modern browser bugs are covered. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
Color creates a massive impact on how we tell users about our brands and products. Selecting the colors that reflect that is tough, but also making sure they are working is also essential.
After reviewing the foundations of color theory, how colors can harmonize, color schemes that reflect themes or ideas, Christopher explores the problems with working on digital color.
By examining how sites popular brands use color, we will discuss how colors fail their intended goals as well as for people with low or problematic vision. We will review rules and guidelines that help ensure our colors are visible and provide the proper intent to our customers.
Smartphones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy. They also have better displays, which demands more of us when we use images. This session will work through tips and tricks to develop future friendly images in our sites and apps.
[CSSDevConf] Adaptive Images in Responsive Web Design 2014Christopher Schmitt
The web doesn't stop at the desktop anymore. Our image assets need to do more than look good in one context. In this talk, I look at how images like JPEG, GIFs, SVG, Icons, Unicode, and more can be used in a multi-device environment.
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
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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.
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.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
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.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
5. “THE ATTEMPT TO GET THE
WORLD TO SWITCH TO XML,
INCLUDING QUOTES AROUND
ATTRIBUTE VALUES AND
SLASHES IN EMPTY TAGS AND
NAMESPACES ALL AT ONCE
DIDN’T WORK.”
SIR TIM BERNERS-LEE
5
13. “TAKE CARE
OF THE LUXURIES AND
THE NECESSITIES WILL TAKE
CARE OF THEMSELVES.”
FRANK LLOYD WRIGHT
13
14. AGENDA ITEMS
• What’s different from XHTML to HTML5
• Building with HTML5 (You are here.)
• Video
• Audio
• GeoLocation ... and more!
• Prizes! http://interactwithwebstandards.com/
14
17. HTML 4.01 Transitional DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
XHTML 1.0 Transitional DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
17
19. EXERCISE
• Go to HTML validator at
http://validator.w3.org/#validate_by_input
• Then type the following HTML (below) and hit validate:
<!DOCTYPE html>
<title>Small HTML5</title>
<p>Hello world</p>
19
29. RELEARNING SYNTAX
• Attribute quotes “not really” required
• UPPERCASE and lowercase HTML elements allowed
• So is CaMeLcAse typing.
• No more need to do self-closing tags like <IMG /> or <BR />
• Also, no more minimalization. So, this is okay: <dl compact>
• Basically, everything that was bad from HTML4 in XHTML5 is good again.
• Full circle, baby! One more time.
29
33. ARTICLE VS ASIDE VS
SECTION
• Molly Holzschlag, Opera standards evangelist, says:
• <section> clarifies <div>
• <article> 'replaces' <div id="content">
• <aside> 'replaces' <div id="sidebar">
• Chris Mills, Opera browser employee, plays it safe:
http://boblet.tumblr.com/post/130610820/html5-structure1
33
34. WHAT ABOUT THE DIVS?
• Marc Grabanski, jQuery and HTML5 guy:
• “div has no meaning whatsoever, so there is nothing semantic about
divs”
• Bruce Lawson, Opera browser employee:
• “Like all semantic questions, it depends on the context. If your only
reason for wanting an element is to group stuff for styling, it's a div.”
34
35. <body>
<header>
<h1>Heading </h1>
</header>
<nav>
<h3>Site Navigation</h3>
<ul>...</ul>
</nav>
<section>
<article>
<h3>Weblog Entry</h3>
</article>
</section>
<aside>
<p>You are reading "Chocolate Rain", an entry posted on <time datetime="2009-03-05">5
March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <a
href="#">this collection</a>.</p>
</aside>
<footer>
<p>...</p>
</footer>
</body>
35
45. content {
/* CSS rules if a browser DOES NOT support geolocation */
...
}
.geolocation content {
/* CSS rules if a browser DOES support geolocation */
...
}
CSS Feature Detection
45
50. “Designed for humans first and
machines second,
microformats are a set of simple,
open data formats built upon
existing and widely
adopted standards.”
50
51. “HTML design patterns for common
chunks of content that web builders need
to markup anyway.”
“Oh, and Google understands them, too.”
51
53. REPLACING ABBR
• <ABBR> element is used by screenreaders to expand abbreviations
like “lbs” or “NCAAP”
• However unintended consequences occurred trying to workaround
browser bugs for other HTML elements
• What happens when a screenreaders text like this:
• “Let’s go to <abbr class="geo"
title="30.300474;-97.747247">Austin, TX</abbr>”
http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
53
54. <div class="vevent">
<a class="url" href="http://www.web2con.com/">http://
www.web2con.com</a>
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart"
title="2007-10-05">October 5</abbr>-
<abbr class="dtend" title="2007-10-20">20</
abbr>,
at the <span class="location">Argent Hotel, San Francisco,
CA</span>
</div>
54
55. <div class="vevent">
<a class="url" href="http://www.web2con.com/">http://
www.web2con.com</a>
<span class="summary">Web 2.0 Conference</span>:
<time class="dtstart"
datetime="2007-10-05">October 5</time>-
<time class="dtend"
datetime="2007-10-19">19</time>,
at the <span class="location">Argent Hotel, San Francisco,
CA</span>
</div>
http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
55
56. POSTSCRIPT
• <ABBR> issue has ben resolved with new pattern (dropping <ABBR>
altogether):
http://microformats.org/wiki/value-class-pattern
• <p>Let’s go to <span class="geo">51° 30' 48.45", -0° 8'
53.23" (<span class="value">51.513458;-0.14812</
span>)</span> </p>
56
57. DATA-ATTRIBUTE
• You can set data-attribute to any element you want.
• Set meta information that can be utilized by JavaScript or CSS later on.
<img src=“john-smith.jpg”
data-imgtype=“mugshot”
alt=“John Smith’s mugshot”>
57
61. POP-QUIZ
• How do you code for the main title of your site and the main
article/post/content of the page?
• Two H1s for both main title and content
• H1 for main title, then H2 for content
• H2 for main title, then H1 for content
61
62. XHTML2’S HEADINGS
• Had an “h” element, without a numeral
• Using the <section> element to determine its value:
• <section><h></h></section> = <h1>
• <section><section><h></h></section></section> = <h2>
62
63. HTML5’S HEADINGS
• Keepold system rather than introduce a new element, move away
from numbered headings
• However, adds the <section> element
• Also the <hgroup> element
• More insistence on keep hierarchy:
• h1 to h6
63
64. <HEADER>
• <header> contains information found at top of a page
• title,
• subtitle,
• and navigation
• Also, it can include an <hgroup>
• Canbe placed anywhere in a document except <footer> and
another <header>
64
65. <article>
<header>
<h1>The Great Gastby</h1>
<p>A book report by Christopher Schmitt</p>
</header>
<p>stuff goes here</p>
</article>
65
66. <article>
<header>
<hgroup>
<h1>The Great Gastby</h1>
<h2>A book report by Christopher Schmitt</h2>
</hgroup>
</header>
<p>stuff goes here</p>
</article>
66
67. <HGROUP>
• Can contain more than one heading
• In fact, must contain at least two heading elements
• Example: intended for titles and subtitles
• Keep hierarchy of heading elements
• h1 through h6
• Don’t need to place them in <hgroup> or <header>
67
68. VIDEO EXAMPLE OF HEADINGS w/ SCREENREADER
http://www.youtube.com/watch?v=AmUPhEVWu_E
68
74. HTML5 AUDIO
• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY,
LOOP, CONTROLS
• If you don’t have CONTROL, player becomes transparent
74
75. HTML5 AUDIO SUPPORT
FF3.5+ S4+ Ch3+ Op10.5+ IE9+
Ogg
Y Y Y
Vorbis
MP3 Y Y Y
WAV Y Y Y
75
76. SUPPORTING AUDIO
<audio controls autobuffer>
<source src="html5audio.mp3" />
<source src="html5audio.ogg" />
<!-- include Adobe Flash player EMBED and OBJECT code
here -->
</audio>
Use Flash for older versions of IE
76
81. HTML5 VIDEO
• WIDTH and HEIGHT should be required, IMO, but movie plays anyway
based on the values in the video file itself.
• Video formats may have their own posterframe. The browser should
use that by default unless overridden by valid POSTER attribute value.
• Text can be included within VIDEO element to allow user to download
video if their browser doesn’t support.
• If you want to give users control, use CONTROL attribute.
81
82. HTML5 VIDEO
• Video can start automatically if using the AUTOPLAY=”1” attribute and
value.
• Spec provides for LOOP, AUTOBUFFER which also take a value of O
or 1.
• Codecs support...
82
83. HTML5 VIDEO
“It would be helpful for interoperability if all browsers could
support the same codecs.
However, there are no known codecs that satisfy all the
current players: we need a codec that is known to not require
per-unit or per-distributor licensing, that is compatible with the
open source development model, that is of sufficient quality as
to be usable, and that is not an additional submarine patent
risk for large companies.
This is an ongoing issue and this section will be updated once
more information is available.”
- http://www.whatwg.org/specs/web-apps/current-work/#video-and-
audio-codecs-for-video-elements
83
84. CODECS
• Ogg (or “Vorbis”)
• No need to worry about patents
• H.264
• Created by the MPEG group
• If you have blu-ray disc player, you are using it
• WebM
• A wrapper for the VP8 video and Ogg audio streams
84
85. VIDEO CODEC SUPPORT
FF3.6+ S Ch5+ Op10.6+ IE9+
Ogg Y Y Y
H.264 Y Y* Y
WebM (W4.02+) (Ch6+) Y
85
89. LESSONS LEARNED
• Use VLC or Firefogg to encode common movie files types to OGG
• H.264 encoding? Use Handbrake
• If you are hot to trot for HTML5 Video, like, right now, check out Mark
Pilgrim’s tutorial:
http://diveintohtml5.org/video.html
• Good primer:
http://dev.opera.com/articles/view/introduction-html5-video/
89
102. SRT FILES
• SRT files are text files used in video playback; therefore, they do
not contain any video data.
• Text
file containing subtitles used by various video playback
programs; supported by DivX, DVD, and other video formats;
• Includesthe time each subtitle should be displayed followed by
the text of the subtitles.
• Subtitlefiles are often named according to the language of the
subtitles, i.e. "moviename-eng.srt" for English and
"moviename-ger.srt" for German subtitles.
102
103. TRANSCRIPT-EN.SRT
1
00:00:00,000 --> 00:00:6,000
Allow me to introduce myself My name is Tay It's T-A-Y, T-A-Y to the Z
2
00:00:06,000 --> 00:00:9,000
This is the web and it's gonna murder your TV It was Chocolate Rain
3
00:00:09,500 --> 00:00:11,500
Wrote a song about that history Chocolate Rain
4
00:00:12,000 --> 00:00:15,000
Now I'm paid a hefty hefty fee Chocolate Rain
103
112. if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition
(show_coordinates);
function show_coordinates(position){
alert('Your latitude is ' + position.coords.latitude + ' ' +
'and your longitude is ' + position.coords.longitude +
'.');
}
}
...or use Modernizr!
112
125. <script type="text/javascript"><!--
window.addEventListener('load', function () {
// Get the canvas element.
var elem = document.getElementById('myCanvas');
if (!elem || !elem.getContext) {
return;
}
// Get the canvas 2d context.
var context = elem.getContext('2d');
if (!context) {
return;
}
// Now you are done! Let's draw a blue rectangle.
context.fillStyle = '#00f';
context.fillRect(0, 0, 150, 100);
}, false);
// --></script>
125
133. ACCESSIBLE CANVAS ISSUES
• Setting user interface elements in canvas
• Setting images in canvas
• Setting text in canvas
http://www.paciellogroup.com/blog/?p=362
133
134. PROGRESSIVE ENHANCEMENT
& CANVAS
“Progressive enhancement is a strategy for web design that
emphasizes accessibility, semantic HTML markup, and external style
sheet and scripting technologies.”
http://en.wikipedia.org/wiki/Progressive_enhancement
134
150. TAKE AWAYS
• New HTML5 elements for improved semantics
• HTML5 Audio
• HTML5 Video
• Online video with HTML+JS captioning
• HTML5 Geolocation
150
151. RECOMMENDED
Design for Web Applications by Matt May and Wendy
• Universal
Chisholm
• Bulletproof Ajax by Jeremy Keith
• Designing with Progressive Enhancement by Filament Group
• Microformats Made Simple by Emily Lewis
• HTML5 Cookbook by a whole bunch of people!
151
152. UPCOMING E4H EVENTS
• Online, live 3rd Annual CSS Summit on July 26-27th
• http://CSSsummit.com/
• Online, live Mobile JavaScript Summit on Aug. 30th
• http://MobileJSsummit.com/
• Online, live 2nd Annual Accessibility Summit on Sept. 27th
• http://a11ysummit.com/
• SAVE 20% off with “PSUWEB” discount code
152
153. THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject
153