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
Download link
http://my.opera.com/chrismills
Look for the "Web standards education presentation" post.
Introductions!
I'm Chris Mills from the viking hordes of Opera.
Web history > pre-dotcom crash
<img>
in Mosaic beta. Now 99.57%Unpublished 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 > Which standards?
Web standards > Ajax
XMLHttpRequest (the "X" in Ajax)
Data request within a page
Web standards > Opera widgets
Little web technology applications that blur the distinction between web and desktop
Web standards > Future contenders
Some highlights
And more!
Web standards > 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 several commercial products.
Web standards > SVG code
<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>
Web standards > HTML 5
<video>
<canvas>
<canvas>
Web standards > Canvas
"Immediate" Vector Graphics
(Check out nihilogic.dk for some more cool examples)
Web standards > Web forms 2.0
More robust forms
Easier to put together standard control archetypes that are complicated with HTML 4.x.
<input type=range>
:
<input type=date>
:
contenteditable
Web standards > contenteditable
Various aspects of HTML 5 make the language a lot more interoperable, giving you more freedom to shape the functionality of various elements. For example, take the contenteditable
attribute.
contenteditable=""
Web standards > 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.
Web standards > CSS > zebra striping
tr.odd {background-color:green;}
<tr>…</tr>
<tr class="odd">…</tr>
tr.nth-child(odd) {background-color:green;}
<tr>…</tr>
<tr>…</tr>
Web standards > 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;
Web standards > CSS > Opacity
Opacity used to require JavaScript to achieve, but now it can be achieved using a single CSS property. Nice!
opacity: 0.15;
Dragonfly
The cool bit. Looking into a remote device.
Dragonfly > Inside Dragonfly
Mobile development > What is the mobile web?
Web standards > The mobile web > The future?
Mobile development > Devices
Desktop is fairly easy these days, but mobile browsers still differ a great deal in capabilities:
Mobile development > Opera Mini
Mobile development > Opera Mini
Mobile development > Device constraints
Screen size variance - how usable will your 1024 x 768 design look on a 240 x 320 screen?
But you should still plan:
Mobile development > Device constraints
Limited/varying controls
Mobile development > Device constraints
Aaaaaaand there's more...
Mobile development > Device-specific advantages
Location-based services (LBS)
<span class="geo"> <span class="latitude">0.000000</span> <span class="longitude">0.000000</span> </span>
Mobile development > Device-specific advantages
the Tel:
protocol:
<a href="tel:12345678">Call me at 12345678</a>
Mobile development > User experience
It won't be the same across all devices!
Test, test, test
Mobile development > How to develop for mobile
Mobile development > Optimizing sites
Optimizing your site for different devices can be done in a number of ways, and it is probably the most practical solution right now
Mobile development > Server-side detection
Query the UA strings or HTTP headers to identify devices and detect capabilities:
Opera/9.50 (J2ME/MIDP; Opera Mini/4.0.8462/8; U; en)
Accept-Language: no-bok, no-nyn, en;q=0.8, fr;q=0.4
Open to abuse. At least do capability detection, not
device detection, and tailor content in stages, not all or nothing.
Mobile development > Media types
Different CSS for different purposes:
<link rel="stylesheet" media="screen" type="text/css" href="main.css" /> <link rel="stylesheet" media="print" type="text/css" href="print.css" /> <link rel="stylesheet" media="handheld" type="text/css" href="m.css" />
Also open to abuse by developers, therefore Opera Mini and Mobile now react differently by default.
Web standards > The mobile web > Media queries
CSS 3 constructs: allow you to apply CSS selectively, depending on attributes such as viewport width.
@media all and (max-width: 480px) { img { margin: 10px auto; float: none; display: block; } }
New Opera builds
Demonstrations that need an Opera experimental build.
To learn more read All together now: Video, 3D, File access.
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 > HTML 5 <video>
Experimental stuff > HTML 5 <video> politics
Opera education
End credits!
There are no foolish questions - only fools who do not question