Swap Skills I Phone

  • 2,256 views
Uploaded on

i-phoneの制作方法をご紹介しています。

i-phoneの制作方法をご紹介しています。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,256
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. iPhoneのウェブ 2008/12/20(Sat) SwapSkill version
  • 2. SwapSkills x allWebクリエイター塾
  • 3. Agenda 1. iPhoneの与えたもの。 2. iPhoneを知る 3. iPhoneの便利な機能を 最大限に生かすXHTMLマークアップ 4. safariの先進的なCSS3を利用した 使いやすくて実用的なWEB
  • 4. 7月11日 発売されました。
  • 5. iPhone の あたえたモノ
  • 6. 市場最強の アプリ
  • 7. Web
  • 8. Safari3.1 iPhone2.0
  • 9. iPhone を知る!
  • 10. Orientation
  • 11. portlait
  • 12. landscape
  • 13. viewport
  • 14. 950px ??
  • 15. 仮想スクリーン
  • 16. マルチタッチ
  • 17. pinch in
  • 18. pinch out
  • 19. double tap
  • 20. 指≠マウス
  • 21. mobile web design
  • 22. どんなサイト ?
  • 23.  Facebook
  • 24. サイトを 作る環境
  • 25. 10.4.7
  • 26. SDK ASPEN SIMULATOR
  • 27. ver5.0
  • 28. 1.指でも使いやすい 2.見やすいデザイン 3.liquid design 4.Safariの為のデザイン
  • 29. XHTML
  • 30. HTML4.01 XHTML1.0
  • 31. 指でもつかいやすい 画面サイズ
  • 32. 320px,480pxでも 画面サイズが ブレない!
  • 33. viewport
  • 34. <meta />
  • 35. <meta name=quot;viewportquot; id=quot;iphone- viewportquot; content=quot;width=980, initial-scale=1.0, user-scalable=yes, maximum-scale=3.0quot; />
  • 36. .default .640px .480px
  • 37. default
  • 38. width=quot;640quot;
  • 39. width=quot;480quot;
  • 40. <meta name=quot;viewportquot; id=quot;iphone- viewportquot; content=quot;width=480, user-scalable=no, maximum-scale=0.6667quot; /> 480 x 0.6667=320.016
  • 41. 指でもつかいやすい ハイパーリンク
  • 42. <a href=quot;mailto:mantangs@gmail.comquot;> Takashi. Kikuchi </a>
  • 43. 指でもつかいやすい ハイパーリンク
  • 44. <a href=quot;http://maps.google.com/maps? q=cupertinoquot;> Cupertino </a>
  • 45. アップルストア銀座 ?
  • 46. http://maps.google.com/maps? q=アップルストア銀座
  • 47. CSS
  • 48. CSS2.1 CSS3.0
  • 49. CSS ↓ iPhone
  • 50. <link />
  • 51. <link media=quot;handheldquot; href=quot;ipodtouch.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot; />
  • 52. <link media=quot;screenquot; href=quot;pc.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot; />
  • 53. handheld
  • 54. handheld
  • 55. php?
  • 56. php?
  • 57. CSS3
  • 58. media query
  • 59. iPod<480px PC>481px
  • 60. <link media=quot;only screen and (max-device-width:480px)quot; href=quot;ipodtouch.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot;/>
  • 61. <link media=quot;screen and (min-device-width:481px)quot; href=quot;pc.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot;/>
  • 62. IE ?
  • 63. <!--[if IE]> <link rel=quot;stylesheetquot; type=quot; text/cssquot; href=quot;ie.cssquot; /> <![endif]-->
  • 64. Portlait ,landscape でも使える liquid design
  • 65. 800px 800px 800px
  • 66. width:100%
  • 67. 100% 100% 100%
  • 68. CSS3
  • 69. 見やすいデザイン テキストサイズ
  • 70. html{ -webkit-auto-text-size-adjust: none; }
  • 71. 見やすいデザイン 行 間
  • 72. html{ line-height: 1.8; }
  • 73. 指でもつかいやすい デザイン
  • 74. padding は多目に
  • 75. margin も多目に
  • 76. 指でもつかいやすい ハイパーリンク
  • 77. :hover
  • 78. a{ -webkit-tap-highlight-color: rgba (00,33,99,0.60); }
  • 79. John Allsop http://westciv.com/iphonetests/
  • 80. http://westciv.com/browsers/index.php5? title=Main_Paghttp://westciv.com/browsers/index.php5? title=Main_Pagee
  • 81. CSS3 selectors
  • 82. a[href^=quot;mailto:quot;] { background-image: url(email. gif); } a[href$=quot;.pdfquot;] { background-image: url(pdf.gif); }
  • 83. a[href^=quot;http:quot;] { background: url(images/externalLink.gif) no- repeat right top; padding-right: 10px; } a[href^=quot;http://www.yoursite.comquot;], a[href^=quot;http:yoursite.comquot;] { background-image: none; padding-right: 0; }
  • 84. text-shadow
  • 85. CSS2・・・
  • 86. h1{ text-shadow: #bbb 2px 2px 2px }
  • 87. text-stroke ?
  • 88. h1{ -webkit-text-stroke: 1px #990e95; }
  • 89. border-radius
  • 90. div#mixi{ -webkit-border-radius:10px; }
  • 91. multiple- background
  • 92. .box { width: 20em; background: #effce7 url(images/bottom- left.gif) norepeat left bottom; } .box-outer { background: url(images/bottom-right.gif) no-repeat right bottom; padding-bottom: 5%;}
  • 93. .box { background-image: url(top-left.gif), url(topright.gif), url(bottom-left. gif), url(bottomright.gif); background-repeat: no-repeat, no-repeat, norepeat,no-repeat; background-position: top left, top right, bottomleft, bottom right; }
  • 94. 以上 を踏まえると
  • 95. iPhone  User Interface
  • 96. ver5.0
  • 97. one more thing
  • 98. flickr http://www.flickr.com/photos/lightsportnews/386173917/ http://www.flickr.com/photos/yasmapaz/1639244955/
  • 99. EOS