Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211

2,681 views
2,617 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,681
On SlideShare
0
From Embeds
0
Number of Embeds
88
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211

  1. 1. Handys und TabletsWEBENTWICKLUNG JENSEITS DES DESKTOPSPatrick H. Lauke / WebTech Conference / 12 October 2011
  2. 2. web evangelist bei Opera
  3. 3. mobile web istimmer wichtiger
  4. 4. wir brauchen eine site fürs iPhone
  5. 5. oh, und fürs iPad
  6. 6. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  7. 7. </werbung>
  8. 8. sites die auf (fast) allenmobilen devices laufen
  9. 9. was ist überhaupt ein “mobile device”?
  10. 10. 3 ansätze
  11. 11. 1. nichts tun
  12. 12. nicht mehr nur WAP oder text
  13. 13. moderne mobile browser kommen mit “normalen” sites zurecht
  14. 14. theres an app for that...
  15. 15. “aber der mobile kontext...”
  16. 16. “Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create twoseparate designs — typically with fewer features for mobile.” www.useit.com/alertbox/mobile-redesign.html
  17. 17. twitter.com/#!/stephenhay/status/23350345962889216
  18. 18. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  19. 19. vorsicht: browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  20. 20. Opera/9.80 (Android; Linux; Opera Mobi/18187; U; en) Presto/2.8.149 Version/11.10 was bin ich?
  21. 21. lasst den user entscheiden: desktop oder mobile?
  22. 22. “refactored” für kleine displays, nicht verwässert für handys
  23. 23. 3. einzige adaptive site
  24. 24. nichts neues...fluid layout, progressive enhancement, graceful degradation
  25. 25. The Sage “... accepts the ebb and flow of things, Nurtures them, but does not own them,” Tao Te Ching; 2 Abstraction www.alistapart.com/articles/dao
  26. 26. was unterscheidet“desktop” von “mobile”?
  27. 27. wie unterscheiden sichverschiedene devices?
  28. 28. 1. input mechanismen2. displaygrösse
  29. 29. 1. input mechanismen2. displaygrösse
  30. 30. mouse / keyboard / touch
  31. 31. touch interfaces
  32. 32. kein hover auftouch devices* *nicht ganz wahr
  33. 33. :hover, :focusonmouseover(...), onfocus(...)onmouseout(...), onblur(...)
  34. 34. kein focus auftouch devices* *nur nach einem click
  35. 35. mouseover > mousemove > mousedown > (focus) > mouseup > click
  36. 36. http://developer.apple.com/library/IOS/...
  37. 37. Touch eventstouchstart touchentertouchmove touchleavetouchend touchcancel www.w3.org/TR/touch-events
  38. 38. touch eventsblah.addEventListener(touchstart, function(e){ … }, true);blah.addEventListener(touchmove, function(e){ … }, true);blah.addEventListener(touchend, function(e){ … }, true);var hazTouch = ontouchstart in window || onMozTouchDown inwindow || createTouch in document;if (hazTouch) { … }
  39. 39. interface TouchEvent : UIEvent { readonly attribute TouchList touches; readonly attribute TouchList targetTouches; readonly attribute TouchList changedTouches; readonly attribute boolean altKey; readonly attribute boolean metaKey; readonly attribute boolean ctrlKey; readonly attribute boolean shiftKey; readonly attribute EventTarget relatedTarget;};
  40. 40. interface Touch { readonly attribute long identifier; readonly attribute long screenX; readonly attribute long screenY; readonly attribute long clientX; readonly attribute long clientY; readonly attribute long pageX; readonly attribute long pageY; …};
  41. 41. e.touches[0].pageX; e.touches[0].pageY; …
  42. 42. www.splintered.co.uk/experiments/archives/paranoid_0.4/
  43. 43. www.splintered.co.uk/experiments/archives/paranoid_0.4/
  44. 44. blah.addEventListener(touchstart, function(e){ … e.preventDefault(); /* stop gestures, scrolling, context */}, true);
  45. 45. proprietary touch eventsMobile Safari: gesturestart, gesturechange, gestureenddeveloper.apple.com/library/IOS/...IE10: MSPointerDown, MSPointerMove, MSPointerUp,MSPointerOver, MSPointerOutmsdn.microsoft.com/en-us/ie/hh272903.aspx#_DOMTouch
  46. 46. 1. input mechanismen2. displaygrösse
  47. 47. CSS 2 Media Types
  48. 48. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  49. 49. CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
  50. 50. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  51. 51. CSS 3 Media Queries● erweitern CSS 2.1 Media Types konzept● präzisere kontrolle (nicht nur screen, print...)http://www.w3.org/TR/css3-mediaqueries/
  52. 52. Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  53. 53. CSS 3 Media Queries<link rel="stylesheet" ...media="screen and (max-width:480px)" href="...">@import url("...") screen and (max-width:480px);@media screen and (max-width:480px) { // insert CSS rules here}
  54. 54. Multiple expressions – and keyword@media screen and (min-width:180px) and (max-width:480px) { // screen device and width > 180px // and width < 480px}
  55. 55. Multiple expressions – comma separated@media screen and (min-width:800px), print and (min-width:20em) { // screen device with width > 800px // or print device with width > 20em}
  56. 56. Negative expressions – not keyword@media not screen and (min-width:800px) { // not applied to screen device // with width > 800px}
  57. 57. Negative expressions – only keyword@media only screen and (min-width:800px) { // only applied to screen device // with width > 800px}
  58. 58. Multiple media queries/* “The absence of a media query is the firstmedia query” Bryan Rieger */@media screen and (max-width:480px) { // screen device and width < 480px}@media screen and (max-width:980px) { // screen device and width < 980px}@media screen and (min-width:980px) { // screen device and width > 980px}
  59. 59. www.alistapart.com/articles/responsive-web-design
  60. 60. Responsive Web Design (RWD)fluid grid + fluid images + media queries
  61. 61. bostonglobe.com
  62. 62. http://mediaqueri.es
  63. 63. http://mediaqueri.es
  64. 64. http://mediaqueri.es
  65. 65. http://mediaqueri.es
  66. 66. www.themaninblue.com/writing/perspective/2004/09/21
  67. 67. “not a magic bullet...”
  68. 68. ungelöste probleme…
  69. 69. viewport meta
  70. 70. physiche vs virtuelle pixel
  71. 71. mobile devices lügen
  72. 72. viewport metaschlägt dem browser interpretierung vor
  73. 73. viewport meta<meta name="viewport"content="width=480"><meta name="viewport"content="width=480, user-scalable=no">http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  74. 74. Viewport propertieswidth initial-scaleheight minimum-scaleuser-scalable maximum-scale
  75. 75. <meta name="viewport"content="width=device-width">
  76. 76. high-dpi devices lügen zweimal
  77. 77. <meta name="viewport"content="width=device-width,target-densitydpi=device-dpi">
  78. 78. confused?“kleines” Fallbeispiel
  79. 79. <meta name="viewport" content="width=550">
  80. 80. <meta name="viewport" content="width=550">
  81. 81. <meta name="viewport" content="width=550">
  82. 82. <meta name="viewport"content="width=550,maximum-scale=1.0">
  83. 83. <meta name="viewport"content="width=550,maximum-scale=1.0, target-densitydpi=device-dpi">
  84. 84. maximum-scale=1.0verhindert zooming!
  85. 85. JavaScript ansätze, um selektivmeta viewport zu modifizieren...argh!
  86. 86. @viewport { width: device-width;}@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}www.w3.org/TR/css-device-adapt
  87. 87. Viewport propertieswidth / min-width / max-width user-zoomheight / min-height / max-height orientationzoom / min-zoom / max-zoom resolution
  88. 88. <meta name="viewport" content="width=550">@-o-viewport { width: 550px;}
  89. 89. <meta name="viewport"content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@-o-viewport { width: 550px; max-zoom: 1; resolution: device;}
  90. 90. /* selektiver viewport per CSS */@media … { @-o-viewport { … }}
  91. 91. <meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@media screen { @-o-viewport { /* undo meta viewport settings */ width: auto; max-zoom: auto; }}@media screen and (max-device-width: 550px) { @-o-viewport { /* 550px viewport on small screen devices */ width: 550px; }}
  92. 92. still confused?ihr seid nicht allein... #headfuck
  93. 93. ungelöste probleme…
  94. 94. Responsive Web Design (RWD)fluid grid + fluid images + media queries
  95. 95. /* fluid image based on parent container */img { width:100%; }
  96. 96. http://adaptive-images.com
  97. 97. mit HTML5 in die Zukunft...
  98. 98. video, audio und canvas ohne “steck-eins”(kein Java / Flash / Silverlight auf mobilen geräten)
  99. 99. geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);function success(position) { /* wheres Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ...}
  100. 100. offline applications application cache,localStorage/sessionStorage, IndexDB
  101. 101. my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
  102. 102. 1. nichts tun2. separate mobile site3. einzige adaptive site
  103. 103. http://futurefriend.ly
  104. 104. www.opera.com/developer patrick.lauke@opera.com

×