SlideShare a Scribd company logo

Browsers & Web Technology - an Opera talk

•
•
Zi Bin Cheah
Zi Bin Cheah
Technology
1 of 39
Download to read offline
Browser and Web Technology browser and web technology: a brief overview of everything http://www.flickr.com/photos/suzijane/243962216/sizes/o/ Friday, October 1, 2010
Hej hej zibin Web Evangelist twitter:zibin http://www.slideshare.net/zibin Friday, October 1, 2010
God bless Internet http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg Friday, October 1, 2010
that’s the whole universe WWW http://obamapacman.com/wp-content/uploads/2009/08/First-World-Wide-Web-Server-at-CERN-made-possible-by-Tim-Berners-Lee-hosted-on-Steve-Jobs-NeXT-workstation- computer-300x225.jpg Friday, October 1, 2010
W3C is WWW’s standards police Friday, October 1, 2010
Why do open Red, orange, green...Standards GO! standards matter? Friday, October 1, 2010
When Standards go wrong 13717712538 http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg Friday, October 1, 2010
Everything you need Friday, October 1, 2010
Everything you need...now runs in a browser Friday, October 1, 2010
Evolution of HTML Friday, October 1, 2010
HTML5 = HTML (with bling) Friday, October 1, 2010
Web Workers Web Forms Cross Document Messaging HTML5 widgets Canvas Text Video geolocation HTML5 and friends http://www.flickr.com/photos/fuyoh/809640616/sizes/o/ Friday, October 1, 2010
Video source: http://zibin.tehais.com/?p=1641 Friday, October 1, 2010
Video <embed src="http://player.youku.com/player.php/sid/ XMTk1NjY4NDc2/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x- shockwave-flash"></embed> Friday, October 1, 2010
Video <video src="video.ogg" width="300" height="150" controls></video> Friday, October 1, 2010
Canvas Friday, October 1, 2010
SVG Friday, October 1, 2010
Friday, October 1, 2010
Web Forms Text type="date" Friday, October 1, 2010
Appcache Web Storage WebDB http://dev.opera.com/articles/view/offline-applications-html5-appcache/ http://www.flickr.com/photos/bfionline/2380398365/ Friday, October 1, 2010
Geolocation http://www.flickr.com/photos/turatti/4550842025/sizes/m/ Friday, October 1, 2010
Widgets Friday, October 1, 2010
Widgets on desktop, TV, mobile....fridge? Friday, October 1, 2010
CSS3 Friday, October 1, 2010
border-radius aka rounded-corners border-radius: 25px; Friday, October 1, 2010
border-radius aka rounded-corners border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Friday, October 1, 2010
border-radius aka rounded-corners Friday, October 1, 2010
box-shadow box-shadow: 10px 10px 0px #fff; Friday, October 1, 2010
box-shadow box-shadow: 10px 10px 20px #fff; Friday, October 1, 2010
Web fonts Friday, October 1, 2010
Friday, October 1, 2010
text-shadow: #000000 10px 10px 19px; Friday, October 1, 2010
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; Friday, October 1, 2010
p le x a m E CSS3 + HTML5 Friday, October 1, 2010
Future is now Friday, October 1, 2010
<Thank you:-)/> Friday, October 1, 2010
Q&A zibin AT opera.com twitter: zibin Friday, October 1, 2010
Creative Commons license image clap http://www.flickr.com/photos/tudor/953584594/ spider web http://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/ now http://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to- maximize-profits shadow http://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/ transitions transform http://www.flickr.com/photos/28481088@N00/1298930743/ borders and background http://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/ web fonts http://www.flickr.com/photos/sekimura/4363831481/sizes/o/ clapping photo http://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpg sun flower http://www.flickr.com/photos/treyevan/429692359/sizes/l/ transition http://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/ Friday, October 1, 2010
Demo & artlcle background and borders articles http://dev.opera.com/articles/view/css3-border-background-boxshadow/ border-radius flower demo http://people.opera.com/zibin/css3flower/flower.html transiitons and transform article http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/ web fonts article http://dev.opera.com/articles/view/seven-web-fonts-showcases/ 9elements HTML5 demo http://9elements.com/io/projects/html5/canvas/ David’s photobook demo http://people.opera.com/dstorey/transforms/image-gallery.html Presentation reference introduction to CSS2.1 and CSS3 http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3 Friday, October 1, 2010

Recommended

Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Zi Bin Cheah
 
CSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asiaCSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asiaZi Bin Cheah
 
互联网精神
互联网精神互联网精神
互联网精神kaven yan
 
MozStory 2014
MozStory 2014MozStory 2014
MozStory 2014Irvin Chen
 
BEST WEBSITE LINKS
BEST WEBSITE LINKSBEST WEBSITE LINKS
BEST WEBSITE LINKSQSGaming
 
Common web performance recommendations
Common web performance recommendationsCommon web performance recommendations
Common web performance recommendationsAlex Painter
 
CSS3: The Future is Now at Drupal Design Camp Boston
CSS3: The Future is Now at Drupal Design Camp BostonCSS3: The Future is Now at Drupal Design Camp Boston
CSS3: The Future is Now at Drupal Design Camp BostonJen Simmons
 
Identity
IdentityIdentity
Identitybrynmorg
 

Recommended

Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Zi Bin Cheah
 
CSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asiaCSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asiaZi Bin Cheah
 
互联网精神
互联网精神互联网精神
互联网精神kaven yan
 
MozStory 2014
MozStory 2014MozStory 2014
MozStory 2014Irvin Chen
 
BEST WEBSITE LINKS
BEST WEBSITE LINKSBEST WEBSITE LINKS
BEST WEBSITE LINKSQSGaming
 
Common web performance recommendations
Common web performance recommendationsCommon web performance recommendations
Common web performance recommendationsAlex Painter
 
CSS3: The Future is Now at Drupal Design Camp Boston
CSS3: The Future is Now at Drupal Design Camp BostonCSS3: The Future is Now at Drupal Design Camp Boston
CSS3: The Future is Now at Drupal Design Camp BostonJen Simmons
 
Identity
IdentityIdentity
Identitybrynmorg
 
Toolbox for Freeapps
Toolbox for FreeappsToolbox for Freeapps
Toolbox for FreeappsDr Neelesh Bhandari
 
Over The Air Mobile Mashups
Over The Air Mobile MashupsOver The Air Mobile Mashups
Over The Air Mobile Mashupssnig178
 
Free Software Presentation Dkg
Free Software Presentation DkgFree Software Presentation Dkg
Free Software Presentation Dkglightybug
 
21st Century Catechists
21st Century Catechists21st Century Catechists
21st Century CatechistsCaroline Cerveny
 
Sano_john
Sano_johnSano_john
Sano_johnJohn Sano
 
I Like 43 Delicious Things
I Like 43 Delicious ThingsI Like 43 Delicious Things
I Like 43 Delicious ThingsChris Betcher
 
courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)
courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)
courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)nous sommes vivants
 
Big Data, Small Dashboard
Big Data, Small DashboardBig Data, Small Dashboard
Big Data, Small DashboardAndrea Maietta
 
Website basics
Website basicsWebsite basics
Website basicsMichigan Nonprofit Association
 
Bibliografías
BibliografíasBibliografías
BibliografíasAlexia Lecuona
 
Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Zi Bin Cheah
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduZi Bin Cheah
 
谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010Zi Bin Cheah
 
HTML5 Apps - Cross platform
HTML5 Apps - Cross platformHTML5 Apps - Cross platform
HTML5 Apps - Cross platformwolframkriesing
 
let's talk web standards
let's talk web standardslet's talk web standards
let's talk web standardsZi Bin Cheah
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Adrian Olaru
 
HTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit BangaloreHTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit Bangalorewolframkriesing
 
Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands Bastian Hofmann
 
Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3Meagan Fisher
 
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...Jeremie Charlet
 
The Tech Side of Project Argo
The Tech Side of Project ArgoThe Tech Side of Project Argo
The Tech Side of Project ArgoWesley Lindamood
 
Webmontag München Cross Platform
Webmontag München Cross PlatformWebmontag München Cross Platform
Webmontag München Cross Platformwolframkriesing
 

More Related Content

What's hot

Over The Air Mobile Mashups
Over The Air Mobile MashupsOver The Air Mobile Mashups
Over The Air Mobile Mashupssnig178
 
Free Software Presentation Dkg
Free Software Presentation DkgFree Software Presentation Dkg
Free Software Presentation Dkglightybug
 
I Like 43 Delicious Things
I Like 43 Delicious ThingsI Like 43 Delicious Things
I Like 43 Delicious ThingsChris Betcher
 
courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)
courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)
courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)nous sommes vivants
 
Big Data, Small Dashboard
Big Data, Small DashboardBig Data, Small Dashboard
Big Data, Small DashboardAndrea Maietta
 

What's hot (10)

Toolbox for Freeapps
Toolbox for FreeappsToolbox for Freeapps
Toolbox for Freeapps
 
Over The Air Mobile Mashups
Over The Air Mobile MashupsOver The Air Mobile Mashups
Over The Air Mobile Mashups
 
Free Software Presentation Dkg
Free Software Presentation DkgFree Software Presentation Dkg
Free Software Presentation Dkg
 
21st Century Catechists
21st Century Catechists21st Century Catechists
21st Century Catechists
 
Sano_john
Sano_johnSano_john
Sano_john
 
I Like 43 Delicious Things
I Like 43 Delicious ThingsI Like 43 Delicious Things
I Like 43 Delicious Things
 
courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)
courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)
courts circuits : l'innovation dans le luxe 'mon idendité de luxe" (partie 3)
 
Big Data, Small Dashboard
Big Data, Small DashboardBig Data, Small Dashboard
Big Data, Small Dashboard
 
Website basics
Website basicsWebsite basics
Website basics
 
Bibliografías
BibliografíasBibliografías
Bibliografías
 

Similar to Browsers & Web Technology - an Opera talk

Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Zi Bin Cheah
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduZi Bin Cheah
 
谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010Zi Bin Cheah
 
HTML5 Apps - Cross platform
HTML5 Apps - Cross platformHTML5 Apps - Cross platform
HTML5 Apps - Cross platformwolframkriesing
 
let's talk web standards
let's talk web standardslet's talk web standards
let's talk web standardsZi Bin Cheah
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Adrian Olaru
 
HTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit BangaloreHTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit Bangalorewolframkriesing
 
Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands Bastian Hofmann
 
Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3Meagan Fisher
 
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...Jeremie Charlet
 
The Tech Side of Project Argo
The Tech Side of Project ArgoThe Tech Side of Project Argo
The Tech Side of Project ArgoWesley Lindamood
 
Webmontag München Cross Platform
Webmontag München Cross PlatformWebmontag München Cross Platform
Webmontag München Cross Platformwolframkriesing
 
Ember.js - scratching the surface
Ember.js - scratching the surfaceEmber.js - scratching the surface
Ember.js - scratching the surfaceUģis Ozols
 
Web Standards Indonesia Tour
Web Standards Indonesia TourWeb Standards Indonesia Tour
Web Standards Indonesia TourZi Bin Cheah
 
Up close and personal - Future of Digital 2010
Up close and personal - Future of Digital 2010Up close and personal - Future of Digital 2010
Up close and personal - Future of Digital 2010Rob Manson
 
Designing for the mobile web
Designing for the mobile webDesigning for the mobile web
Designing for the mobile webZi Bin Cheah
 
In depth with html5 java2days 2010
In depth with html5 java2days 2010In depth with html5 java2days 2010
In depth with html5 java2days 2010Mystic Coders, LLC
 

Similar to Browsers & Web Technology - an Opera talk (20)

Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu
 
谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010
 
HTML5 Apps - Cross platform
HTML5 Apps - Cross platformHTML5 Apps - Cross platform
HTML5 Apps - Cross platform
 
let's talk web standards
let's talk web standardslet's talk web standards
let's talk web standards
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
HTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit BangaloreHTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit Bangalore
 
Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands
 
Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3
 
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
 
The Tech Side of Project Argo
The Tech Side of Project ArgoThe Tech Side of Project Argo
The Tech Side of Project Argo
 
Webmontag München Cross Platform
Webmontag München Cross PlatformWebmontag München Cross Platform
Webmontag München Cross Platform
 
Ember.js - scratching the surface
Ember.js - scratching the surfaceEmber.js - scratching the surface
Ember.js - scratching the surface
 
Christian Heilmann's 'State of the Browser in 2011'
Christian Heilmann's 'State of the Browser in 2011'Christian Heilmann's 'State of the Browser in 2011'
Christian Heilmann's 'State of the Browser in 2011'
 
Web Standards Indonesia Tour
Web Standards Indonesia TourWeb Standards Indonesia Tour
Web Standards Indonesia Tour
 
Up close and personal - Future of Digital 2010
Up close and personal - Future of Digital 2010Up close and personal - Future of Digital 2010
Up close and personal - Future of Digital 2010
 
Designing for the mobile web
Designing for the mobile webDesigning for the mobile web
Designing for the mobile web
 
Html5 Apps
Html5 AppsHtml5 Apps
Html5 Apps
 
Html5 Development
Html5 DevelopmentHtml5 Development
Html5 Development
 
In depth with html5 java2days 2010
In depth with html5 java2days 2010In depth with html5 java2days 2010
In depth with html5 java2days 2010
 

More from Zi Bin Cheah

W3C HTML5 Chinese IG Report
W3C HTML5 Chinese IG ReportW3C HTML5 Chinese IG Report
W3C HTML5 Chinese IG ReportZi Bin Cheah
 
Beyond HTML5:Device, Graphics, Orientation, Real Time
Beyond HTML5:Device, Graphics, Orientation, Real TimeBeyond HTML5:Device, Graphics, Orientation, Real Time
Beyond HTML5:Device, Graphics, Orientation, Real TimeZi Bin Cheah
 
Opera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsOpera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsZi Bin Cheah
 
不懂HTML5 非好汉 Be a man, learn HTML5
不懂HTML5 非好汉 Be a man, learn HTML5不懂HTML5 非好汉 Be a man, learn HTML5
不懂HTML5 非好汉 Be a man, learn HTML5Zi Bin Cheah
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Zi Bin Cheah
 
Nigeria & Designing for the Mobile Web
Nigeria & Designing for the Mobile WebNigeria & Designing for the Mobile Web
Nigeria & Designing for the Mobile WebZi Bin Cheah
 
Mobile Web Trends inIndonesia
Mobile Web Trends inIndonesiaMobile Web Trends inIndonesia
Mobile Web Trends inIndonesiaZi Bin Cheah
 
Standards: politics, case studies
Standards: politics, case studiesStandards: politics, case studies
Standards: politics, case studiesZi Bin Cheah
 
Web Standards @ Opera Talk Oslo
Web Standards @ Opera Talk OsloWeb Standards @ Opera Talk Oslo
Web Standards @ Opera Talk OsloZi Bin Cheah
 
Standards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour IndonesiaStandards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour IndonesiaZi Bin Cheah
 
Browser War 2: Standards strikes back
Browser War 2: Standards strikes backBrowser War 2: Standards strikes back
Browser War 2: Standards strikes backZi Bin Cheah
 

More from Zi Bin Cheah (12)

W3C HTML5 Chinese IG Report
W3C HTML5 Chinese IG ReportW3C HTML5 Chinese IG Report
W3C HTML5 Chinese IG Report
 
Html5games
Html5gamesHtml5games
Html5games
 
Beyond HTML5:Device, Graphics, Orientation, Real Time
Beyond HTML5:Device, Graphics, Orientation, Real TimeBeyond HTML5:Device, Graphics, Orientation, Real Time
Beyond HTML5:Device, Graphics, Orientation, Real Time
 
Opera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsOpera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 Standards
 
不懂HTML5 非好汉 Be a man, learn HTML5
不懂HTML5 非好汉 Be a man, learn HTML5不懂HTML5 非好汉 Be a man, learn HTML5
不懂HTML5 非好汉 Be a man, learn HTML5
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
 
Nigeria & Designing for the Mobile Web
Nigeria & Designing for the Mobile WebNigeria & Designing for the Mobile Web
Nigeria & Designing for the Mobile Web
 
Mobile Web Trends inIndonesia
Mobile Web Trends inIndonesiaMobile Web Trends inIndonesia
Mobile Web Trends inIndonesia
 
Standards: politics, case studies
Standards: politics, case studiesStandards: politics, case studies
Standards: politics, case studies
 
Web Standards @ Opera Talk Oslo
Web Standards @ Opera Talk OsloWeb Standards @ Opera Talk Oslo
Web Standards @ Opera Talk Oslo
 
Standards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour IndonesiaStandards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour Indonesia
 
Browser War 2: Standards strikes back
Browser War 2: Standards strikes backBrowser War 2: Standards strikes back
Browser War 2: Standards strikes back
 

Recently uploaded

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 

Recently uploaded (20)

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 

Browsers & Web Technology - an Opera talk

  • 1. Browser and Web Technology browser and web technology: a brief overview of everything http://www.flickr.com/photos/suzijane/243962216/sizes/o/ Friday, October 1, 2010
  • 2. Hej hej zibin Web Evangelist twitter:zibin http://www.slideshare.net/zibin Friday, October 1, 2010
  • 3. God bless Internet http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg Friday, October 1, 2010
  • 4. that’s the whole universe WWW http://obamapacman.com/wp-content/uploads/2009/08/First-World-Wide-Web-Server-at-CERN-made-possible-by-Tim-Berners-Lee-hosted-on-Steve-Jobs-NeXT-workstation- computer-300x225.jpg Friday, October 1, 2010
  • 5. W3C is WWW’s standards police Friday, October 1, 2010
  • 6. Why do open Red, orange, green...Standards GO! standards matter? Friday, October 1, 2010
  • 7. When Standards go wrong 13717712538 http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg Friday, October 1, 2010
  • 8. Everything you need Friday, October 1, 2010
  • 9. Everything you need...now runs in a browser Friday, October 1, 2010
  • 10. Evolution of HTML Friday, October 1, 2010
  • 11. HTML5 = HTML (with bling) Friday, October 1, 2010
  • 12. Web Workers Web Forms Cross Document Messaging HTML5 widgets Canvas Text Video geolocation HTML5 and friends http://www.flickr.com/photos/fuyoh/809640616/sizes/o/ Friday, October 1, 2010
  • 13. Video source: http://zibin.tehais.com/?p=1641 Friday, October 1, 2010
  • 14. Video <embed src="http://player.youku.com/player.php/sid/ XMTk1NjY4NDc2/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x- shockwave-flash"></embed> Friday, October 1, 2010
  • 15. Video <video src="video.ogg" width="300" height="150" controls></video> Friday, October 1, 2010
  • 19. Web Forms Text type="date" Friday, October 1, 2010
  • 20. Appcache Web Storage WebDB http://dev.opera.com/articles/view/offline-applications-html5-appcache/ http://www.flickr.com/photos/bfionline/2380398365/ Friday, October 1, 2010
  • 23. Widgets on desktop, TV, mobile....fridge? Friday, October 1, 2010
  • 25. border-radius aka rounded-corners border-radius: 25px; Friday, October 1, 2010
  • 26. border-radius aka rounded-corners border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Friday, October 1, 2010
  • 27. border-radius aka rounded-corners Friday, October 1, 2010
  • 28. box-shadow box-shadow: 10px 10px 0px #fff; Friday, October 1, 2010
  • 29. box-shadow box-shadow: 10px 10px 20px #fff; Friday, October 1, 2010
  • 32. text-shadow: #000000 10px 10px 19px; Friday, October 1, 2010
  • 33. text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; Friday, October 1, 2010
  • 34. p le x a m E CSS3 + HTML5 Friday, October 1, 2010
  • 35. Future is now Friday, October 1, 2010
  • 37. Q&A zibin AT opera.com twitter: zibin Friday, October 1, 2010
  • 38. Creative Commons license image clap http://www.flickr.com/photos/tudor/953584594/ spider web http://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/ now http://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to- maximize-profits shadow http://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/ transitions transform http://www.flickr.com/photos/28481088@N00/1298930743/ borders and background http://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/ web fonts http://www.flickr.com/photos/sekimura/4363831481/sizes/o/ clapping photo http://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpg sun flower http://www.flickr.com/photos/treyevan/429692359/sizes/l/ transition http://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/ Friday, October 1, 2010
  • 39. Demo & artlcle background and borders articles http://dev.opera.com/articles/view/css3-border-background-boxshadow/ border-radius flower demo http://people.opera.com/zibin/css3flower/flower.html transiitons and transform article http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/ web fonts article http://dev.opera.com/articles/view/seven-web-fonts-showcases/ 9elements HTML5 demo http://9elements.com/io/projects/html5/canvas/ David’s photobook demo http://people.opera.com/dstorey/transforms/image-gallery.html Presentation reference introduction to CSS2.1 and CSS3 http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3 Friday, October 1, 2010