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

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
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
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
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
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 

Recently uploaded (20)

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
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
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
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
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 

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