This slideset is designed for Opera, and uses some features only available in the Opera Video Builds. However the basic content should work in any browser.
To see this in presentation mode using Opera, simply select "View" ->"Full Screen". To see how all this is done, view the source...
Talk contents
Web history > pre-dotcom crash
<img>
in Mosaic beta. Now 99.57% (MAMA)Research by Opera's MAMA analyser shows that 99.57% of pages have an image applied by markup of some description
Web history > mature standards and mobile web
2004: WHAT-WG is Web Hypertext Application Technology Working Group. "Work on HTML5 originally started in late 2003, as a proof of concept to show that it was possible to extend HTML4's forms to provide many of the features that XForms 1.0 introduced, without requiring browsers to implement rendering engines that were incompatible with existing HTML Web pages. At this early stage, while the draft was already publicly available, and input was already being solicited from all sources, the specification was only under Opera Software's copyright.
In early 2004, some of the principles that underly this effort, as well as an early draft proposal covering just forms-related features, were presented to the W3C jointly by Mozilla and Opera at a workshop discussing the future of Web Applications on the Web. The proposal was rejected on the grounds that the proposal conflicted with the previously chosen direction for the Web's evolution.
Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort. A public mailing list was created, and the drafts were moved to the WHATWG site. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specifications.
In 2006, the W3C expressed interest in the specification, and created a working group chartered to work with the WHATWG on the development of the HTML5 specifications. The working group opened in 2007. Apple, Mozilla, and Opera allowed the W3C to publish the specifications under the W3C copyright, while keeping versions with the less restrictive license on the WHATWG site." http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#history0
Web standards > Opera involvement
25 employees work on standards
Web standards > Why standards?
"The Web is the platform"
Developers can validate; separate content and presentation - means specialisation and maintainability.
For owners, more maintainability; smaller pages; better SEO
Users: light-weight; interoperable; more likely accessible
Web standards > Future contenders
Some highlights
And more!
Web standards > Accessibility
Who it affects, how people access and what makes this work:
Web standards > Accessibility and Ajax
Ajax = asynchronous JavaScript and XML
Accessible Rich Internet Applications (ARIA) is the fix, it describes:
Technologies > SVG
Chris Wilson of IE has hinted that SVG is on their roadmap: "Vector graphics support is one of the things we'll see next".
For those who don't want to handcode, SVG can be authored with the free open-source Inkscape as well as serveral commercial products.
Technologies > SVG code minute hand
<g id="m">
<line stroke-width="4"
y2="95" stroke="red" opacity=".9" />
<animateTransform type="rotate"
attributeName="transform"
repeatCount="indefinite"
dur="60min" by="360" />
<circle r="6" fill="red"/> </g>
Technologies > HTML 5
HTML 4 great for documents...not suited for web apps
article
, footer
, aside
)<video>
<canvas>
<canvas>
Technologies > Canvas
"Immediate" Vector Graphics
(You can't manipulate them)
Technologies > Web forms 2.0
More robust forms
Easier to put together standards control archetypes that are complicated with HTML 4.x.
<input type=date>
:
<input type=range>
:
Technologies > CSS
...but there is a lot of hacking involved to achieve complex design features.
Hence CSS 3 was born, which aims to make popular design features easier to achieve, and give designers more control.
Technologies > CSS > zebra striping
tr.odd {background-color:green;}
<tr>…</tr>
<tr class="odd">…</tr>
now..no need for class
tr.nth-child(odd) {background-color:green;}
<tr>…</tr>
<tr>…</tr>
Technologies > CSS > text shadows
It is very easy to set text shadows using CSS 3.
p {
text-shadow: #777 2px 2px 2px;
}
Let's have a look at a slightly demonic example!
text-shadow: #f00 0px 0px 30px;
Technologies > CSS > Opacity
Opacity used to require JavaScript to achieve, but now it can be achieved using a single CSS property. Nice!
opacity: 0.25;
Technologies > The mobile web > Media queries
Tailor content to device and set up: screen, print..
Allow you to apply CSS selectively, depending on attributes such as viewport width.
@media all and (max-device-width: 480px) {
#big-wide-banner { display:none;}
#narrow-banner {display:block;}
}
Experimental stuff > HTML 5 <video>
Current way to embed video:
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/LtfQg4KkR88&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/LtfQg4KkR88&hl=en&fs=1" type="application/x-shockwave-flash"
allowfullscreen="true" width="425" height="344"></embed>
</object>
Experimental stuff > HTML 5 <video>
Badass sexy new way
<video src="video.ogv"
controls
autoplay
poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>
Experimental stuff > <abbr>HTML</abbr> 5 <video>
Technologies > New Opera builds
Some demonstrations need an Opera experimental build.
To learn more read All together now: Video, 3D, File access.
Opera Dragonfly > Inside Opera Dragonfly
Opera Dragonfly > What Opera Dragonfly does
Try it in Opera 9.5 +
Tools -> Advanced -> Developer Tools. Also try the Debug Menu.
Opera education
End credits!