SlideShare a Scribd company logo
1 of 45
Download to read offline
HTML5   CSS3                ?

          http://sofish.de
SUMMARY




 1


 2


 3
SUMMARY




 1


 2


 3
1



    HTML5              CSS3
    Background Size 	

         CSS Columns 	

          Local Storage 	

     IndexDB Database 	

    Multiple Backgrounds        CSS Gradients 	

        Session Storage 	

   Drag and Drop 	

    Border Image / Radius 	

   CSS Reflections           Post Message 	

      Hash Change (Event)
    Box Shadow 	

 	

          CSS Transform 	

        Offline Applications   History Management 	

    Text Shadow 	

             CSS Transitions 	

      Workers 	

           WebSockets 	

    Opacity 	

        	

      CSS FontFace 	

 	

     Query Selector 	

    GeoLocation
    CSS Animations 	

          FlexBox                  WebSQL Database 	

   Touch
    	

       	

      	





    Combo / Node.js / Facebook BigPie / IE filter / SVG
1



    HTML5              CSS3
    Background Size 	

         CSS Columns 	

          Local Storage 	

     IndexDB Database 	

    Multiple Backgrounds        CSS Gradients 	

        Session Storage 	

   Drag and Drop 	

    Border Image / Radius 	

    Box Shadow 	

 	

    Text Shadow 	

                                CSS Reflections
                                CSS Transform 	

                                CSS Transitions 	

                                                         Post Message 	

                                                         Offline Applications
                                                         Workers 	

                                                                               Hash Change (Event)
                                                                               History Management 	

                                                                               WebSockets 	

                                                                                                        ...
    Opacity 	

        	

      CSS FontFace 	

 	

     Query Selector 	

    GeoLocation
    CSS Animations 	

          FlexBox                  WebSQL Database 	

   Touch
    	

       	

      	





    Combo / Node.js / Facebook BigPie / IE filter / SVG
1



    HTML5              CSS3
    Background Size 	

         CSS Columns 	

          Local Storage 	

     IndexDB Database 	

    Multiple Backgrounds        CSS Gradients 	

        Session Storage 	

   Drag and Drop 	

    Border Image / Radius 	

    Box Shadow 	

 	

    Text Shadow 	

                                CSS Reflections
                                CSS Transform 	

                                CSS Transitions 	

                                                         Post Message 	

                                                         Offline Applications
                                                         Workers 	

                                                                               Hash Change (Event)
                                                                               History Management 	

                                                                               WebSockets 	

                                                                                                        ...
    Opacity 	

        	

      CSS FontFace 	

 	

     Query Selector 	

    GeoLocation
    CSS Animations 	

          FlexBox                  WebSQL Database 	

   Touch
    	

       	

      	





    Combo / Node.js / Facebook BigPie / IE filter / SVG   ...
1
1
1




    ...
1




    ...
1




    ...
1




    ...
1




    ...
1




    ...
1




    ...
Data Table form:
http://j.mp/cross-browser
Data Table form:
http://j.mp/cross-browser
2




    Firefox / Chrome / Safari / Opera / IE9
    IE8 / IE7       IE6


                /




    Apple Safari / Opera Mini /
    Webkit based Browser
            windows phone 7 IE


    APP /
2




    Firefox / Chrome / Safari / Opera / IE9
    IE8 / IE7       IE6


                /




    Apple Safari / Opera Mini /
    Webkit based Browser
            windows phone 7 IE


    APP /
2




    Firefox / Chrome / Safari / Opera / IE9
    IE8 / IE7       IE6


                /




    Apple Safari / Opera Mini /
    Webkit based Browser
            windows phone 7 IE


    APP /
2




    Firefox / Chrome / Safari / Opera / IE9
    IE8 / IE7       IE6


                /




    Apple Safari / Opera Mini /
    Webkit based Browser
            windows phone 7 IE


    APP /
2




    Firefox / Chrome / Safari / Opera / IE9
    IE8 / IE7       IE6


                /




    Apple Safari / Opera Mini /
    Webkit based Browser
            windows phone 7 IE


    APP /
2




    Firefox / Chrome / Safari / Opera / IE9
    IE8 / IE7       IE6


                /




    Apple Safari / Opera Mini /
    Webkit based Browser
            windows phone 7 IE


    APP /
3




    © CopyRIght : http://iflonely.com/page/50/
3




    © CopyRIght : http://iflonely
3


    1.   2.   	
  vs	
  




    3.   4.



                           © CopyRIght : http://iflonely
3


    1.

         Web
3


    1.

         Web




     Drag & Drop    http://sofish.de/file/html5/drag_and_drop/
          + HTML5                                              Gmail   Min.us
3


    2.          	
  vs	
  
         iPad                1024
3


    2.          	
  vs	
  
         iPad                1024




                                    Media Query
                                    http://sofish.de/file/html5/media_query/
                                        Media Query
3


    1.

         AA
3


    1.

                                   AA




     LocalStorage                http://sofish.de/file/html5/localStorage/
         Cookie                                     HTTP
                  LocalStorage + UserData(IE)
3


    4.
                    SNS
             AA           AA
         Check In
3


    4.
                                   SNS
             AA                                                          AA
         Check In




         Geolocation         http://sofish.de/file/html5/localStorage/

         HTML5 Geolocation                   IP        Wifi         GPS
3
3
3
3




    Arale/Alice   ...




    ....
3




    Arale/Alice   ...




    ....
3
3
3
ThankYou!! FAQ
    http://sofish.de

More Related Content

What's hot

Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
 
Even faster web sites presentation 3
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3
Felipe Lavín
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sites
Felipe Lavín
 
面向测试的前端知识
面向测试的前端知识面向测试的前端知识
面向测试的前端知识
chencheng 云谦
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
Christopher Schmitt
 

What's hot (20)

HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 
Advanced Thesis Techniques and Tricks
Advanced Thesis Techniques and TricksAdvanced Thesis Techniques and Tricks
Advanced Thesis Techniques and Tricks
 
Design Tips & Development with jQuery Mobile and PhoneGap
Design Tips & Development with jQuery Mobile and PhoneGapDesign Tips & Development with jQuery Mobile and PhoneGap
Design Tips & Development with jQuery Mobile and PhoneGap
 
Even faster web sites presentation 3
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structure
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sites
 
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ
 
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
ARTDM 171, Week 5: CSS
ARTDM 171, Week 5: CSSARTDM 171, Week 5: CSS
ARTDM 171, Week 5: CSS
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998
 
面向测试的前端知识
面向测试的前端知识面向测试的前端知识
面向测试的前端知识
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
 
Prototyping interactions
Prototyping interactionsPrototyping interactions
Prototyping interactions
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 

Similar to 新 · 交互

Cross platform mobile web apps
Cross platform mobile web appsCross platform mobile web apps
Cross platform mobile web apps
James Pearce
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web apps
James Pearce
 
Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshop
James Pearce
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
James Pearce
 
An Intro to Mobile HTML5
An Intro to Mobile HTML5An Intro to Mobile HTML5
An Intro to Mobile HTML5
James Pearce
 
XSS and CSRF with HTML5
XSS and CSRF with HTML5XSS and CSRF with HTML5
XSS and CSRF with HTML5
Shreeraj Shah
 
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Shreeraj Shah
 
Web app and more
Web app and moreWeb app and more
Web app and more
faming su
 
Krug Fat Client
Krug Fat ClientKrug Fat Client
Krug Fat Client
Paul Klipp
 

Similar to 新 · 交互 (20)

HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすもの
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
 
Building Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsBuilding Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web Apps
 
Cross platform mobile web apps
Cross platform mobile web appsCross platform mobile web apps
Cross platform mobile web apps
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web apps
 
Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshop
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
An Intro to Mobile HTML5
An Intro to Mobile HTML5An Intro to Mobile HTML5
An Intro to Mobile HTML5
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5
 
HTML5とIE10とWindows 8 in OSC2012会津
HTML5とIE10とWindows 8 in OSC2012会津HTML5とIE10とWindows 8 in OSC2012会津
HTML5とIE10とWindows 8 in OSC2012会津
 
HTML5とIE10とWindows 8
HTML5とIE10とWindows 8HTML5とIE10とWindows 8
HTML5とIE10とWindows 8
 
HTML5 and Beyond
HTML5 and BeyondHTML5 and Beyond
HTML5 and Beyond
 
XSS and CSRF with HTML5
XSS and CSRF with HTML5XSS and CSRF with HTML5
XSS and CSRF with HTML5
 
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
The web as it should be
The web as it should beThe web as it should be
The web as it should be
 
Krug Fat Client
Krug Fat ClientKrug Fat Client
Krug Fat Client
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
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
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
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
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 

新 · 交互

  • 1. HTML5 CSS3 ? http://sofish.de
  • 4. 1 HTML5 CSS3 Background Size CSS Columns Local Storage IndexDB Database Multiple Backgrounds CSS Gradients Session Storage Drag and Drop Border Image / Radius CSS Reflections Post Message Hash Change (Event) Box Shadow CSS Transform Offline Applications History Management Text Shadow CSS Transitions Workers WebSockets Opacity CSS FontFace Query Selector GeoLocation CSS Animations FlexBox WebSQL Database Touch Combo / Node.js / Facebook BigPie / IE filter / SVG
  • 5. 1 HTML5 CSS3 Background Size CSS Columns Local Storage IndexDB Database Multiple Backgrounds CSS Gradients Session Storage Drag and Drop Border Image / Radius Box Shadow Text Shadow CSS Reflections CSS Transform CSS Transitions Post Message Offline Applications Workers Hash Change (Event) History Management WebSockets ... Opacity CSS FontFace Query Selector GeoLocation CSS Animations FlexBox WebSQL Database Touch Combo / Node.js / Facebook BigPie / IE filter / SVG
  • 6. 1 HTML5 CSS3 Background Size CSS Columns Local Storage IndexDB Database Multiple Backgrounds CSS Gradients Session Storage Drag and Drop Border Image / Radius Box Shadow Text Shadow CSS Reflections CSS Transform CSS Transitions Post Message Offline Applications Workers Hash Change (Event) History Management WebSockets ... Opacity CSS FontFace Query Selector GeoLocation CSS Animations FlexBox WebSQL Database Touch Combo / Node.js / Facebook BigPie / IE filter / SVG ...
  • 7. 1
  • 8. 1
  • 9. 1 ...
  • 10. 1 ...
  • 11. 1 ...
  • 12. 1 ...
  • 13. 1 ...
  • 14. 1 ...
  • 15. 1 ...
  • 16.
  • 17.
  • 20. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  • 21. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  • 22. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  • 23. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  • 24. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  • 25. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  • 26. 3 © CopyRIght : http://iflonely.com/page/50/
  • 27. 3 © CopyRIght : http://iflonely
  • 28. 3 1. 2.  vs   3. 4. © CopyRIght : http://iflonely
  • 29. 3 1. Web
  • 30. 3 1. Web Drag & Drop http://sofish.de/file/html5/drag_and_drop/ + HTML5 Gmail Min.us
  • 31. 3 2.  vs   iPad 1024
  • 32. 3 2.  vs   iPad 1024 Media Query http://sofish.de/file/html5/media_query/ Media Query
  • 33. 3 1. AA
  • 34. 3 1. AA LocalStorage http://sofish.de/file/html5/localStorage/ Cookie HTTP LocalStorage + UserData(IE)
  • 35. 3 4. SNS AA AA Check In
  • 36. 3 4. SNS AA AA Check In Geolocation http://sofish.de/file/html5/localStorage/ HTML5 Geolocation IP Wifi GPS
  • 37. 3
  • 38. 3
  • 39. 3
  • 40. 3 Arale/Alice ... ....
  • 41. 3 Arale/Alice ... ....
  • 42. 3
  • 43. 3
  • 44. 3
  • 45. ThankYou!! FAQ http://sofish.de