SlideShare una empresa de Scribd logo
1 de 54
Descargar para leer sin conexión
The future of web technologies
WEB STANDARDS, CROSS-DEVICE DEVELOPMENT AND THE WEB AS UBIQUITOUS PLATFORM




 Patrick H. Lauke / Transmission2 #tx2 / Manchester / 25 November 2009
Web Evangelist at Opera
1. new web standards
2. adaptive content
3. browser as platform
1. new web standards
2. adaptive content
3. browser as platform
new technologies you can start using today
HTML5
<!DOCTYPE html>
HTML5 does not replace HTML 4.01
HTML5 has more bling!
“...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:
markup elements and 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>
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);
canvas mixing things up with external graphics
ctx = canvas.drawImage(…)

Demonstration of canvas
<video>
<object width="425" height="344">
  <param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en
&fs=1&"></param>
  <param name="allowFullScreen"
value="true"></param>
  <param name="allowscriptaccess"
value="always"></param>
  <embed
src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&f
s=1&" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="425" height="344"></embed>
</object>
<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" />
   <!-- fallback content -->
</video>


       still include fallback for old browsers
            http://camendesign.com/code/video_for_everybody
video and canvas on any device
        without plugins
     (Java / Flash / Silverlight not ubiquitous)
IANAL, but … EOLAS?
and many more...
(geolocation, drag and drop, web workers, offline support, storage)
1. new web standards
2. adaptive content
3. browser as platform
Mobile web and why it matters
        www.opera.com/smw
Opera Mini: +150% users, +224% traffic
   15 Billion pages served / month
             September 2008 - 2009
"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 & CEO
“One Web” is an uneven landscape:

● constrained browsers (WAP, …)
● mobile “Full Web” (Android, Opera Mobile, …)

● proxy-based (Opera Mini, …)

● laptop, Netbook, Tablet PC, Desktop

● games consoles, set-top boxes, TVs
Device capabilities also vary:

● screen size and resolution
● input mechanism – touch, keypad, other?

● memory and processing power

● colour palettes

● connection speed / quality
Approaches to cross-device development:

● do nothing – use standards, defensive design
● separate site (m.mysite.com, mysite.mobi)

●
  single site, but optimised for cross-device
CSS 2.1 Media Types:

● print, screen, handheld, projection, tv, …
● partially supported

● lump all devices into single categories



http://www.w3.org/TR/CSS21/media.html
CSS 2.1 Media Types:

<link rel="stylesheet" ...
media="print" 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
CSS 3 Media Queries and SVG:

● SVG already resolution independent
● ideal for device interfaces, maps, graphs, …

● combination with CSS 3 Media Queries



Demonstration of Media Queries + SVG
1. new web standards
2. adaptive content
3. browser as platform
Full Web is not always practical or desirable
Widgets are nothing new
Yahoo! Widgets (aka Konfabulator), OS X Dashboard, Windows Sidebar,
              Adobe Air, iPhone Apps, Android Apps, …
“…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
W3C Widgets – application development filled
      with web standards goodness,
    using browser engine as platform
Widgets on desktop, mobile, TV … fridge?
Opera had widget capability for a long time …
latest 10.20 alpha widgets as standalone apps
       dev.opera.com/articles/view/widgets-as-standalone-applications
Standardised JavaScript APIs
to access device-specific capabilities
               (JIL / BONDI)
1. new web standards
2. adaptive content
3. browser as platform
www.opera.com/developer
people.opera.com/patrickl/presentations/Transmission2_25.11.2009/Transmission2_25.11.2009.pdf
                             patrick.lauke@opera.com

Más contenido relacionado

La actualidad más candente

HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
Patrick Lauke
 
Widget Workshop Advanced Development
Widget Workshop Advanced DevelopmentWidget Workshop Advanced Development
Widget Workshop Advanced Development
Dominik Helleberg
 
Internet browers comparison
Internet browers comparisonInternet browers comparison
Internet browers comparison
ferristic
 
Group 2 macromedia flash
Group 2   macromedia flashGroup 2   macromedia flash
Group 2 macromedia flash
Mark Eneria
 
Introduction To Google Chrome Os
Introduction To Google Chrome OsIntroduction To Google Chrome Os
Introduction To Google Chrome Os
Saurabh Jinturkar
 
Googlechrome ppt
Googlechrome pptGooglechrome ppt
Googlechrome ppt
abshah37
 
Chrome OS presentation
Chrome OS presentationChrome OS presentation
Chrome OS presentation
melodyhe121
 
Flash Presentation 25.11.10
Flash Presentation 25.11.10Flash Presentation 25.11.10
Flash Presentation 25.11.10
buschko
 

La actualidad más candente (20)

HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
 
Widget Workshop Advanced Development
Widget Workshop Advanced DevelopmentWidget Workshop Advanced Development
Widget Workshop Advanced Development
 
Internet browers comparison
Internet browers comparisonInternet browers comparison
Internet browers comparison
 
Google chrome
Google chromeGoogle chrome
Google chrome
 
Google Chrome - OS & BROWSER
Google Chrome - OS & BROWSERGoogle Chrome - OS & BROWSER
Google Chrome - OS & BROWSER
 
Group 2 macromedia flash
Group 2   macromedia flashGroup 2   macromedia flash
Group 2 macromedia flash
 
Google chrome operating system.ppt
Google chrome operating system.pptGoogle chrome operating system.ppt
Google chrome operating system.ppt
 
Google chrome operating system
Google chrome operating systemGoogle chrome operating system
Google chrome operating system
 
Google chrome OS
Google chrome OSGoogle chrome OS
Google chrome OS
 
Google chrome
Google chromeGoogle chrome
Google chrome
 
Introduction To Google Chrome Os
Introduction To Google Chrome OsIntroduction To Google Chrome Os
Introduction To Google Chrome Os
 
Google Chrome OS
Google Chrome OSGoogle Chrome OS
Google Chrome OS
 
Google chrome
Google chromeGoogle chrome
Google chrome
 
Googlechrome ppt
Googlechrome pptGooglechrome ppt
Googlechrome ppt
 
Google chrome
Google chromeGoogle chrome
Google chrome
 
Google Chrome Operating System
Google Chrome Operating SystemGoogle Chrome Operating System
Google Chrome Operating System
 
Chrome os
Chrome os Chrome os
Chrome os
 
Chrome OS presentation
Chrome OS presentationChrome OS presentation
Chrome OS presentation
 
Introduction to google chromebooks and chromeboxes presentation tech-talk
Introduction to google chromebooks and chromeboxes presentation tech-talkIntroduction to google chromebooks and chromeboxes presentation tech-talk
Introduction to google chromebooks and chromeboxes presentation tech-talk
 
Flash Presentation 25.11.10
Flash Presentation 25.11.10Flash Presentation 25.11.10
Flash Presentation 25.11.10
 

Destacado

Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
Patrick Lauke
 
Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest /...
Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest /...Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest /...
Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest /...
Patrick Lauke
 
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Patrick Lauke
 
Building Winning Teams - Jain International Trade Organization Bangalore 06_J...
Building Winning Teams - Jain International Trade Organization Bangalore 06_J...Building Winning Teams - Jain International Trade Organization Bangalore 06_J...
Building Winning Teams - Jain International Trade Organization Bangalore 06_J...
Indus Khaitan
 
my research topics 09052009
my research topics 09052009my research topics 09052009
my research topics 09052009
Mostafa Akbari
 

Destacado (6)

Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest /...
Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest /...Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest /...
Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest /...
 
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
 
Building Winning Teams - Jain International Trade Organization Bangalore 06_J...
Building Winning Teams - Jain International Trade Organization Bangalore 06_J...Building Winning Teams - Jain International Trade Organization Bangalore 06_J...
Building Winning Teams - Jain International Trade Organization Bangalore 06_J...
 
Radical Social Media: Mobilizing Museum Communities to do Meaningful Work
Radical Social Media: Mobilizing Museum Communities to do Meaningful WorkRadical Social Media: Mobilizing Museum Communities to do Meaningful Work
Radical Social Media: Mobilizing Museum Communities to do Meaningful Work
 
my research topics 09052009
my research topics 09052009my research topics 09052009
my research topics 09052009
 

Similar a Transmission2 25.11.2009

openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
Patrick Lauke
 
Uni Tour Germany 11.2009
Uni Tour Germany 11.2009Uni Tour Germany 11.2009
Uni Tour Germany 11.2009
Patrick Lauke
 
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Patrick Lauke
 
World Usability Day Future Browsing 12.11.2009
World Usability Day Future Browsing 12.11.2009World Usability Day Future Browsing 12.11.2009
World Usability Day Future Browsing 12.11.2009
Patrick Lauke
 
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Patrick Lauke
 
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
rit2011
 
HTML5 vs Native Android: Smart Enterprises for the Future
HTML5 vs Native Android: Smart Enterprises for the FutureHTML5 vs Native Android: Smart Enterprises for the Future
HTML5 vs Native Android: Smart Enterprises for the Future
Motorola Mobility - MOTODEV
 

Similar a Transmission2 25.11.2009 (20)

openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
 
Uni Tour Germany 11.2009
Uni Tour Germany 11.2009Uni Tour Germany 11.2009
Uni Tour Germany 11.2009
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan PolandBruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
 
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
 
20 mLearning Tools in 60 Minutes - mLearnCon 2010
20 mLearning Tools in 60 Minutes - mLearnCon 201020 mLearning Tools in 60 Minutes - mLearnCon 2010
20 mLearning Tools in 60 Minutes - mLearnCon 2010
 
World Usability Day Future Browsing 12.11.2009
World Usability Day Future Browsing 12.11.2009World Usability Day Future Browsing 12.11.2009
World Usability Day Future Browsing 12.11.2009
 
W3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web StandardsW3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web Standards
 
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
 
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
 
Front-end. Global domination
Front-end. Global dominationFront-end. Global domination
Front-end. Global domination
 
Frontend. Global domination.
Frontend. Global domination.Frontend. Global domination.
Frontend. Global domination.
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Transforming the web into a real application platform
Transforming the web into a real application platformTransforming the web into a real application platform
Transforming the web into a real application platform
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape
 
Flash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen DevelopmentFlash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen Development
 
2011 08-24 mobile web app
2011 08-24  mobile web app2011 08-24  mobile web app
2011 08-24 mobile web app
 
HTML5 vs Native Android: Smart Enterprises for the Future
HTML5 vs Native Android: Smart Enterprises for the FutureHTML5 vs Native Android: Smart Enterprises for the Future
HTML5 vs Native Android: Smart Enterprises for the Future
 
Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platform
 

Más de Patrick Lauke

Más de Patrick Lauke (20)

These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
 
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
 
Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
 
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
 
Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...
 
Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...
 
Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...
 
All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...
 
Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...
 
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
 
Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...
 
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
 
The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007
 
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
 

Último

Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
Chris Hunter
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
 

Último (20)

Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 

Transmission2 25.11.2009

  • 1. The future of web technologies WEB STANDARDS, CROSS-DEVICE DEVELOPMENT AND THE WEB AS UBIQUITOUS PLATFORM Patrick H. Lauke / Transmission2 #tx2 / Manchester / 25 November 2009
  • 3. 1. new web standards 2. adaptive content 3. browser as platform
  • 4. 1. new web standards 2. adaptive content 3. browser as platform
  • 5. new technologies you can start using today
  • 7. HTML5 does not replace HTML 4.01
  • 8. HTML5 has more bling!
  • 9. “...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
  • 10. HTML5 is umbrella term: markup elements and JavaScript APIs
  • 11. new elements for more accurate semantics
  • 12. HTML5 elements for a typical blog
  • 13.
  • 14.
  • 15. HTML5 – unambiguous and machine readable
  • 16. current and old browsers “support” these new elements (although some need a little extra help)
  • 17. webforms – more powerful form elements
  • 18. standardise commonly-used rich form elements – without JavaScript
  • 19. built-in validation (of course you should still validate on the server) Demonstration of webforms
  • 22. 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);
  • 23. canvas mixing things up with external graphics ctx = canvas.drawImage(…) Demonstration of canvas
  • 25. <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en &fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&f s=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>
  • 26. <video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
  • 27. 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
  • 28. 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" /> <!-- fallback content --> </video> still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  • 29. video and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  • 30. IANAL, but … EOLAS?
  • 31. and many more... (geolocation, drag and drop, web workers, offline support, storage)
  • 32. 1. new web standards 2. adaptive content 3. browser as platform
  • 33. Mobile web and why it matters www.opera.com/smw
  • 34. Opera Mini: +150% users, +224% traffic 15 Billion pages served / month September 2008 - 2009
  • 35. "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 & CEO
  • 36. “One Web” is an uneven landscape: ● constrained browsers (WAP, …) ● mobile “Full Web” (Android, Opera Mobile, …) ● proxy-based (Opera Mini, …) ● laptop, Netbook, Tablet PC, Desktop ● games consoles, set-top boxes, TVs
  • 37. Device capabilities also vary: ● screen size and resolution ● input mechanism – touch, keypad, other? ● memory and processing power ● colour palettes ● connection speed / quality
  • 38. Approaches to cross-device development: ● do nothing – use standards, defensive design ● separate site (m.mysite.com, mysite.mobi) ● single site, but optimised for cross-device
  • 39. CSS 2.1 Media Types: ● print, screen, handheld, projection, tv, … ● partially supported ● lump all devices into single categories http://www.w3.org/TR/CSS21/media.html
  • 40. CSS 2.1 Media Types: <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
  • 41. 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/
  • 42. CSS 3 Media Queries: @media screen and (max-device-width: 480px) { // insert CSS rules here } Demonstration of Media Queries
  • 43. CSS 3 Media Queries and SVG: ● SVG already resolution independent ● ideal for device interfaces, maps, graphs, … ● combination with CSS 3 Media Queries Demonstration of Media Queries + SVG
  • 44. 1. new web standards 2. adaptive content 3. browser as platform
  • 45. Full Web is not always practical or desirable
  • 46.
  • 47. Widgets are nothing new Yahoo! Widgets (aka Konfabulator), OS X Dashboard, Windows Sidebar, Adobe Air, iPhone Apps, Android Apps, …
  • 48. “…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
  • 49. W3C Widgets – application development filled with web standards goodness, using browser engine as platform
  • 50. Widgets on desktop, mobile, TV … fridge?
  • 51. Opera had widget capability for a long time … latest 10.20 alpha widgets as standalone apps dev.opera.com/articles/view/widgets-as-standalone-applications
  • 52. Standardised JavaScript APIs to access device-specific capabilities (JIL / BONDI)
  • 53. 1. new web standards 2. adaptive content 3. browser as platform