SlideShare a Scribd company logo
©
Inc.

    –




    –
        •
        •




            ©

    –



    –


    –




        ©
©
©





    ©
©
©

    –
    –
    –




        ©

    –

    –

    –

    –




        ©


    –
        •


    –

    –

                
                    –
                    –

            ©

    –

    –

    –

        •




            ©


    –

    –

    –

    –

    –


        ©










    ©
©



    –




        ©
©
©
©

    –
    –



    –




        ©

    –



    –




        ©

    –
    –




        ©
©

    –


    –


    –




        ©

    –

        •

    –

    –




            ©


    –




        ©
©
©
©
©

    –
    –
        •


        •




            ©

    –




        ©
©


    –
    •
    •
    •

    •
    •

    •




        ©


    <canvas width="480" height="268"></canvas>

                                                                         HTML
    function onEnterFrame3() {
       ctx.beginPath();
       ctx.clearRect(0, 0, slideArea_w, canvas.height);
       sx = (sx + dx * 1 + tmpCanvas.width) % tmpCanvas.width;
       var w = Math.min(slideArea_w, tmpCanvas.width - sx);
       ctx.drawImage(tmpCanvas, sx, 0, w, cellH, 0, 0, w, cellH);
       var w1 = slideArea_w - w;



                                                        JavaScript
       var x1 = w;
       while (w1 > 0) {
          var w2 = Math.min(w1, tmpCanvas.width);
          w1 = w1 - w2;
          ctx.drawImage(tmpCanvas, 0, 0, w2, cellH, x1, 0, w2, cellH);


                                                    ©
©


    –
        •
        •
        •
        •
            –
            –
            –
            –




                ©


    –


    –




        ©
–
–

CACHE MANIFEST                    # CSS
                                  /css/iphone.css

# Version: 200911041941           # JavaScript
                                  /js/lib/jquery.js
                                  /js/iphone.js
                                  /js/iphone/appreciate.js
CACHE:
                                  # Images
                                  /img/iphone/bg/body.png
# Desktop Icon                    /img/iphone/viewer/logo.png
/img/iphone/ico/desktop.png

                              ©
<html manifest="/hoihoi.iphone.manifest">

                              HTML



                  ©
–
    AddType text/cache-manifest .manifest




                     ©


    –
        •

            –



        •

        •



                ©





    ©
©


    –
        •




            ©
Key Value






    –
        •




            ©

    –
        •




    <img src="data:image/png;base64,iVBORw0KGgoAAAAN
    SUhEUgAAAJYAA......">




                          ©

    –

    –




        ©
©


<input type="text">           input[type="text"],
<input type="email">          input[type="password"],
<input type="password">       input[type="email"],
                              input[type="number"] {
<input type="number">
                                   width: 410px;
                                   margin-bottom: 3px;
                                   padding: 10px 7px;
                                   border: 1px solid #ff789e;
                                   -webkit-border-radius: 5px;
                                   background: #fffbd0;
                              }
                              input[type="password"],


               HTML                                    CSS
                              input[type="number"] {
                                   width: 200px;
                              }

                          ©




    –
        •

    –
        •

    –
        •



            ©

    –
    –




        ©

    –
    –




        ©

    –

    –




        ©
©



    –
        •
    –
        •
    –
        •
    –
    –
        •
        •
        •



            ©
©
©
©

More Related Content

Similar to HTML5のメリットを活かしたコンテンツアイデア

HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichRobert Nyman
 
Building the new AppExchange using Responsive Design
Building the new AppExchange using Responsive DesignBuilding the new AppExchange using Responsive Design
Building the new AppExchange using Responsive DesignSalesforce Developers
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Eduardo Shiota Yasuda
 
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 TricksPreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
incidentist
 
HTML5 y CSS3
HTML5 y CSS3HTML5 y CSS3
HTML5 y CSS3
InterGraphicDESIGNS
 
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventHTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventRobert Nyman
 
Posts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press phpPosts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press php
Miroslav Miskovic
 
Posts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press phpPosts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press php
Miroslav Miskovic
 
Posts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press phpPosts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press phpMiroslav Miskovic
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
Patrick Chanezon
 
This is a test
This is a testThis is a test
This is a test
cmailhotos4
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
Robert Nyman
 
[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpuNAVER D2
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Remy Sharp
 
CSS3 Tips & Techniques
CSS3 Tips & TechniquesCSS3 Tips & Techniques
CSS3 Tips & TechniquesUIEpreviews
 
Html5
Html5Html5
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1Bitla Software
 
Css animation
Css animationCss animation
Css animation
Aaron King
 
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVGJavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
Patrick Chanezon
 

Similar to HTML5のメリットを活かしたコンテンツアイデア (20)

HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
 
Building the new AppExchange using Responsive Design
Building the new AppExchange using Responsive DesignBuilding the new AppExchange using Responsive Design
Building the new AppExchange using Responsive Design
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
 
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 TricksPreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
 
HTML5 y CSS3
HTML5 y CSS3HTML5 y CSS3
HTML5 y CSS3
 
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventHTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
 
Posts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press phpPosts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press php
 
Posts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press phpPosts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press php
 
Posts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press phpPosts ‹ teslaecoenergy — word press php
Posts ‹ teslaecoenergy — word press php
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
This is a test
This is a testThis is a test
This is a test
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
 
[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
CSS3 Tips & Techniques
CSS3 Tips & TechniquesCSS3 Tips & Techniques
CSS3 Tips & Techniques
 
Html5
Html5Html5
Html5
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
Css animation
Css animationCss animation
Css animation
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVGJavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
 

HTML5のメリットを活かしたコンテンツアイデア

  • 2. –  – • • ©
  • 3. –  – – ©
  • 4. ©
  • 5. ©
  • 6. ©
  • 7. ©
  • 8. ©
  • 9. – – – ©
  • 10. – – – – ©
  • 11. – • – –  – – ©
  • 12. – – – • ©
  • 13. – – – – – ©
  • 15. ©
  • 16. – ©
  • 17. ©
  • 18. ©
  • 19. ©
  • 20. – –  – ©
  • 21. –  – ©
  • 22. – – ©
  • 23. ©
  • 24. – – – ©
  • 25. – • – – ©
  • 26. – ©
  • 27. ©
  • 28. ©
  • 29. ©
  • 30. ©
  • 31. – – • • ©
  • 32. – ©
  • 33. ©
  • 34. – • • • • • • ©
  • 35.   <canvas width="480" height="268"></canvas> HTML function onEnterFrame3() { ctx.beginPath(); ctx.clearRect(0, 0, slideArea_w, canvas.height); sx = (sx + dx * 1 + tmpCanvas.width) % tmpCanvas.width; var w = Math.min(slideArea_w, tmpCanvas.width - sx); ctx.drawImage(tmpCanvas, sx, 0, w, cellH, 0, 0, w, cellH); var w1 = slideArea_w - w; JavaScript var x1 = w; while (w1 > 0) { var w2 = Math.min(w1, tmpCanvas.width); w1 = w1 - w2; ctx.drawImage(tmpCanvas, 0, 0, w2, cellH, x1, 0, w2, cellH); ©
  • 36. ©
  • 37. – • • • • – – – – ©
  • 38. – – ©
  • 39. – – CACHE MANIFEST # CSS /css/iphone.css # Version: 200911041941 # JavaScript /js/lib/jquery.js /js/iphone.js /js/iphone/appreciate.js CACHE: # Images /img/iphone/bg/body.png # Desktop Icon /img/iphone/viewer/logo.png /img/iphone/ico/desktop.png ©
  • 41. AddType text/cache-manifest .manifest ©
  • 42. – • – • • ©
  • 43. ©
  • 44. ©
  • 45. – • ©
  • 46. Key Value  – • ©
  • 47. – • <img src="data:image/png;base64,iVBORw0KGgoAAAAN SUhEUgAAAJYAA......"> ©
  • 48. – – ©
  • 49. ©
  • 50.  <input type="text"> input[type="text"], <input type="email"> input[type="password"], <input type="password"> input[type="email"], input[type="number"] { <input type="number"> width: 410px; margin-bottom: 3px; padding: 10px 7px; border: 1px solid #ff789e; -webkit-border-radius: 5px; background: #fffbd0; } input[type="password"], HTML CSS input[type="number"] { width: 200px; } ©
  • 51. – • – • – • ©
  • 52. – – ©
  • 53. – – ©
  • 54. – – ©
  • 55. ©
  • 56. – • – • – • – – • • • ©
  • 57. ©
  • 58. ©
  • 59. ©