Uni Tour Germany 11.2009

Opera Education

www.opera.com/education

Components
University seminars
Student representatives: Opera Campus Crew
Web Standards Curriculum
Summer Internships in Norway, India and Poland: Application will open
in late February, selection process from mid-March
http://www.opera.com/company/jobs/internship/

Learn more

Email education@opera.com
Check out www.opera.com/education for
internships, student representatives
program and forums

Open standards
EMERGING TECHNOLOGIES FOR DESKTOP, MOBILE, AND CROSS-DEVICE WEB DEVELOPMENT

Patrick H. Lauke / Opera University Tour / November 2009

Opera – one browser on many devices

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

old-school way of making pages:

● creating markup based on how things look
● defining colours, widths, etc in your page

● using tables for layout

<p><font size=“+3” color=”ff0000”><b>This is a
heading</b></font></p>
<p><font color=“555555”>Blah blah blah</font></p>

<p><font size=“+2” color=”00ff00”><b>A sub-
section</b></font></p>

<p><font size=“+2” color=”00ff00”><b>A sub-
section</b></font></p>

HTML should define the meaning of content:

● <h1> … <h6> for headings
● <p> paragraphs

● <ul> unordered (bulletpoint) lists

● <ol> ordered (numbered) lists

● …

At this stage we don't care what it looks like…

separation of content, presentation, behaviour
using HTML, CSS, JavaScript

<h1>This is a heading</h1>
<p>Blah blah blah</p>

<h2>A sub-section</h2>

<h2>A sub-section</h2>

developers
maintainability and future proofing

site owners
smaller pages, better SEO

end-users
light-weight, interoperable, accessible

it's not all about pleasing the validator

One Web that works on all browsers, all devices

new technologies you can start using today

history of HTML5:

● started at Opera – Web Applications 1.0
● Mozilla and Apple joined

● W3C HTML5

● Microsoft involvement

HTML5 standardises current browser and
authoring behaviour

HTML5 does not replace HTML 4.01

“...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

HTML5 is umbrella term for various
technologies – new markup elements, new
JavaScript APIs

new elements for more accurate semantics

HTML5 elements for a typical blog

HTML5 – unambiguous and machine readable

current and old browsers
“support” these new elements
(although some need a little extra help)

Webforms – more powerful form elements

standardise commonly-used
rich form elements – without JavaScript

built-in validation
(of course you should still validate on the server)

Demonstration of webforms

canvas = “scriptable images”

canvas has standard API methods for drawing
ctx = canvas.getContext("2d");
ctx.fillRect(x, y, width, height);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);
…

Demonstration of basic canvas

canvas mixing things up with external graphics
ctx = canvas.drawImage(…)

Demonstration of drawing images on canvas

canvas appropriate use for enhanced visuals,
special effects – not pure content
Demonstration: http://www.filamentgroup.com/examples/charting_v2/

<video src="video.ogv"
controls
autoplay
poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

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 Presto 2.4

video format debates – MP4 vs OGG Theora
<video controls autoplay poster="…" width="…" height="…">
<source src="movie.ogv" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />

</video>

still include fallback for old browsers
http://camendesign.com/code/video_for_everybody

video on any device without plugins?

and many more...
(geolocation, drag and drop, web workers, offline support, storage)

SVG can be written by hand (if you must)
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<rect x="" y="" width="" height=""/>
<circle cx="" cy="" r=""/>
<ellipse cx="" cy="" rx="" ry=""/>
<line x1="" y1="" x2="" y2=""/>
<polyline points="x1,y1,x2,y2,..." />
<polygon points="x1,y1,x2,y2,..." />

</svg>

http://www.w3.org/TR/SVG11/

SVG complex images exportable from vector
graphics apps (InkScape, Adobe Illustrator, ...)

SVG maintains its own DOM and is scriptable
Demonstration of SVG

SVG in OBJECT, CSS and IMG element*
native inclusion in HTML5?
*only in Opera at the moment

CSS3 for better design control

@font-face – good typography on the web
@font-face {
font-family: "MyFont";
src: url(myfont.ttf)
}

…

body {
font-family: "MyFont", … sans-serif;
}

Demonstration of webfonts

@font-face solves issue of making images of
text, using image replacement, sIFR, …

@font-face still issues with font foundries –
check licenses

mediaqueries – adaptable designs

CSS 2.1 Media Types:

<link rel="stylesheet" ...
media="print, handheld" href="...">

@import url("...") print;

@media print {
// insert CSS rules here
}

CSS 3 Media Queries:

● Build and extend CSS 2.1 Media Types
● More granular control of capabilities

● width, height, orientation, color, resolution, …

http://www.w3.org/TR/css3-mediaqueries/

CSS 3 Media Queries:

@media screen and
(max-device-width: 480px) {

// insert CSS rules here

}

Demonstration of Media Queries

Widgets – standardised app development filled
with web standards goodness

Vodafone
For a large catalogue of apps – the browser run-time is perfect...

Then 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.

Source: Mobile Entertainment Market (mocoNews), June, 2009

widgets on desktop, mobile...and on TV

Anatomy of a widget
index.html + config.xml

Configuration file
<widget>
<widgetname>MyFirstWidget</widgetname>
<description>A demo widget</description>
<icon>images/widget.png</icon>
<width>320</width>
<height>240</height>
</widget>

Demonstration of basic widget

Opera tools to help develop widgets:

Opera Dragonfly
http://www.opera.com/dragonfly/

Widget emulator
http://dev.opera.com/articles/view/widget-emulator/

Opera LABS build
http://dev.opera.com/articles/view/opera-desktop-widgets-evolved/

Opera Unite
• Powerful platform that turns your Web
browser into a Web server:
– Share content directly without
having to upload anything to a
Web site.
– Stream music, show photo
galleries, share files and folders
or even host your Web pages.

Sharing with Opera Unite is different
• Traditional data sharing

• Data sharing with Opera Unite

Opera Unite Applications

Media Player Messenger
Access your complete home Communicate with your
music library from wherever friends in My Opera in a
you are. one-to-one, live session.

File Sharing The Lounge
Share files directly from your Invite your friends to a chat
computer easily and safely. in The Lounge hosted on
your computer.

File Inbox Web Server
Allow files to be
uploaded to your Host your Web sites running
computer, by you or from your own computer.
your friends, from
anywhere.

Photo Sharing Fridge
Share your personal photos Enjoy fun notes left on your
with friends around the world computer by friends.
without the need to upload
them.

Write your own Opera Unite applications
Based on powerful APIs and open Web standards:

• Easy to create and accessible from every Web browsing platform:
– Reuse your HTML, CSS and JavaScript skills
• Applications can be submitted to Opera’s online catalog
– http://unite.opera.com/applications/
• Documentation
– http://unite.opera.com/develop/

Opera Unite challenge!
Are YOU up to the challenge? Opera Software invites you to develop an
Opera Unite application:

• Win mobile phones and Opera gear
• Make a new Unite application or improve upon an existing application
• Submit your application online and email education@opera.com with:
– Name
– University
– Name of your application
Criteria, rules and resources to get started
http://unite.opera.com/develop

Opera Web Standards Curriculum

Web Standards Curriculum
www.opera.com/wsc

University Tour blog
my.opera.com/universitytours/blog

Developer resources
www.opera.com/developer

www.opera.com/developer
patrick.lauke@opera.com

Uni Tour Germany 11.2009

More Related Content

Viewers also liked

Similar to Uni Tour Germany 11.2009

More from Patrick Lauke

Recently uploaded

Uni Tour Germany 11.2009