A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP.
You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.
5. "Our goal is to take the one true Web and
make it available to people on their terms."
Jon S. von Tetzchner, Opera Co-founder
"All I ask is access to the full Web, for everyone, everywhere.
And some more beer."
Me
6.
7. 1. new web standards
2. adaptive content
3. browser as platform
8. 1. new web standards
2. adaptive content
3. browser as platform
11. -moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
16. “...extending the language to better support Web
applications, since that is one of the directions the Web is
going in and is one of the areas least well served by HTML
so far. This puts HTML in direct competition with other
technologies intended for applications deployed over the
Web, in particular Flash and Silverlight.”
Ian Hickson, Editor of HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
26. Scalable Vector Graphics:
● Supported in 4 modern browsers, and IE9
● Vector graphics, therefore infinitely scalable
● XML so text-based - can be made accessible
● Keeps a DOM
● Can author with Adobe Illustrator or Inkscape
30. video format debates – Free formats vs MP4
<video controls autoplay poster=… width=… height=…>
<source src=movie.mp4 type=video/mp4>
<source src=movie.webm type=video/webm>
<!-- fallback content -->
</video>
still include fallback for old browsers
http://camendesign.com/code/video_for_everybody
31. video as native object...why is it important?
● “play nice” with rest of the page
● keyboard accessibility built-in
● API for controls
Demonstration of video in Opera,
scripted controls
33. find out your location via JavaScript
navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
/* where's Waldo? */
var lat = position.coords.latitude;
var long = position.coords.longitude;
...
}
43. Opera Mini: 29.6 billion pages were served
and 4.1 petabytes of operator data were
compressed for Opera Mini users.
Unique users increased 114%.
July 2009 – July 2010
http://www.opera.com/smw/2010/07/
44. “One Web means making, as far as is reasonable, the
same information and services available to users
irrespective of the device they are using. However, it does
not mean that exactly the same information is available in
exactly the same representation across all devices.”
W3C Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/#OneWeb
56. Tips for optimising for mobile/ devices:
● Use CSS3 Media Queries
● Define size of images in HTML
● Put JavaScript as far down as you can
● Reduce HTTP requests
57. CSS 3 Media Queries:
@media screen and
(max-device-width: 480px) {
// insert CSS rules here
}
http://www.w3.org/TR/css3-mediaqueries/
Demonstration of Media Queries
58. Images:
●
Images take a long time to load, so tell the browser
to leave a space for them
● If you don't, when the image finally loads, the
browser will redraw the page to fit the image in,
perhaps scrolling off screen
● Redrawing the screen wastes processor time (and
battery life)
● Some turn off images; design for accessibility
59. Put JS as far down the source as possible:
●
Browsers wait for JS to load. If they're at the top,
rendering pauses.
● If your JS is at the bottom of the page, the user can
read the content etc while she is waiting to interact
with the page.
60. Minimise HTTP requests:
●
Combine JS into one file. Same with CSS.
● Use CSS sprites to combine decorative images
● Consider encoding images directly in your page as
data URLs
● Use SVG or <canvas> for images
61. 1. new web standards
2. adaptive content
3. browser as platform
62.
63. “…the browser run-time is perfect…you’re out
of writing for Windows Mobile, Android, S60, each
of which require testing...we want to abstract
that.
All the cool innovation is happening inside the
browser – you don’t need to write to the native
operating system anymore.”
Mobile Entertainment Market, June, 2009
64. W3C Widgets – application development filled
with web standards goodness,
using browser engine as platform
65. Anatomy of a widget
index.html, assets + config.xml,
zipped and renamed .wgt