Your SlideShare is downloading. ×
0
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12.10.20211
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,492

Published on

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

No Downloads
Views
Total Views
2,492
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
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. Handys und TabletsWEBENTWICKLUNG JENSEITS DES DESKTOPSPatrick H. Lauke / WebTech Conference / 12 October 2011
  • 2. web evangelist bei Opera
  • 3. mobile web istimmer wichtiger
  • 4. wir brauchen eine site fürs iPhone
  • 5. oh, und fürs iPad
  • 6. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  • 7. </werbung>
  • 8. sites die auf (fast) allenmobilen devices laufen
  • 9. was ist überhaupt ein “mobile device”?
  • 10. 3 ansätze
  • 11. 1. nichts tun
  • 12. nicht mehr nur WAP oder text
  • 13. moderne mobile browser kommen mit “normalen” sites zurecht
  • 14. theres an app for that...
  • 15. “aber der mobile kontext...”
  • 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. twitter.com/#!/stephenhay/status/23350345962889216
  • 18. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  • 19. vorsicht: browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  • 20. Opera/9.80 (Android; Linux; Opera Mobi/18187; U; en) Presto/2.8.149 Version/11.10 was bin ich?
  • 21. lasst den user entscheiden: desktop oder mobile?
  • 22. “refactored” für kleine displays, nicht verwässert für handys
  • 23. 3. einzige adaptive site
  • 24. nichts neues...fluid layout, progressive enhancement, graceful degradation
  • 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. was unterscheidet“desktop” von “mobile”?
  • 27. wie unterscheiden sichverschiedene devices?
  • 28. 1. input mechanismen2. displaygrösse
  • 29. 1. input mechanismen2. displaygrösse
  • 30. mouse / keyboard / touch
  • 31. touch interfaces
  • 32. kein hover auftouch devices* *nicht ganz wahr
  • 33. :hover, :focusonmouseover(...), onfocus(...)onmouseout(...), onblur(...)
  • 34. kein focus auftouch devices* *nur nach einem click
  • 35. mouseover > mousemove > mousedown > (focus) > mouseup > click
  • 36. http://developer.apple.com/library/IOS/...
  • 37. Touch eventstouchstart touchentertouchmove touchleavetouchend touchcancel www.w3.org/TR/touch-events
  • 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. 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. 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. e.touches[0].pageX; e.touches[0].pageY; …
  • 42. www.splintered.co.uk/experiments/archives/paranoid_0.4/
  • 43. www.splintered.co.uk/experiments/archives/paranoid_0.4/
  • 44. blah.addEventListener(touchstart, function(e){ … e.preventDefault(); /* stop gestures, scrolling, context */}, true);
  • 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. 1. input mechanismen2. displaygrösse
  • 47. CSS 2 Media Types
  • 48. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  • 49. CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
  • 50. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  • 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. Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 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. Multiple expressions – and keyword@media screen and (min-width:180px) and (max-width:480px) { // screen device and width > 180px // and width < 480px}
  • 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. Negative expressions – not keyword@media not screen and (min-width:800px) { // not applied to screen device // with width > 800px}
  • 57. Negative expressions – only keyword@media only screen and (min-width:800px) { // only applied to screen device // with width > 800px}
  • 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. www.alistapart.com/articles/responsive-web-design
  • 60. Responsive Web Design (RWD)fluid grid + fluid images + media queries
  • 61. bostonglobe.com
  • 62. http://mediaqueri.es
  • 63. http://mediaqueri.es
  • 64. http://mediaqueri.es
  • 65. http://mediaqueri.es
  • 66. www.themaninblue.com/writing/perspective/2004/09/21
  • 67. “not a magic bullet...”
  • 68. ungelöste probleme…
  • 69. viewport meta
  • 70. physiche vs virtuelle pixel
  • 71. mobile devices lügen
  • 72. viewport metaschlägt dem browser interpretierung vor
  • 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. Viewport propertieswidth initial-scaleheight minimum-scaleuser-scalable maximum-scale
  • 75. <meta name="viewport"content="width=device-width">
  • 76. high-dpi devices lügen zweimal
  • 77. <meta name="viewport"content="width=device-width,target-densitydpi=device-dpi">
  • 78. confused?“kleines” Fallbeispiel
  • 79. <meta name="viewport" content="width=550">
  • 80. <meta name="viewport" content="width=550">
  • 81. <meta name="viewport" content="width=550">
  • 82. <meta name="viewport"content="width=550,maximum-scale=1.0">
  • 83. <meta name="viewport"content="width=550,maximum-scale=1.0, target-densitydpi=device-dpi">
  • 84. maximum-scale=1.0verhindert zooming!
  • 85. JavaScript ansätze, um selektivmeta viewport zu modifizieren...argh!
  • 86. @viewport { width: device-width;}@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}www.w3.org/TR/css-device-adapt
  • 87. Viewport propertieswidth / min-width / max-width user-zoomheight / min-height / max-height orientationzoom / min-zoom / max-zoom resolution
  • 88. <meta name="viewport" content="width=550">@-o-viewport { width: 550px;}
  • 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. /* selektiver viewport per CSS */@media … { @-o-viewport { … }}
  • 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. still confused?ihr seid nicht allein... #headfuck
  • 93. ungelöste probleme…
  • 94. Responsive Web Design (RWD)fluid grid + fluid images + media queries
  • 95. /* fluid image based on parent container */img { width:100%; }
  • 96. http://adaptive-images.com
  • 97. mit HTML5 in die Zukunft...
  • 98. video, audio und canvas ohne “steck-eins”(kein Java / Flash / Silverlight auf mobilen geräten)
  • 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. offline applications application cache,localStorage/sessionStorage, IndexDB
  • 101. my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
  • 102. 1. nichts tun2. separate mobile site3. einzige adaptive site
  • 103. http://futurefriend.ly
  • 104. www.opera.com/developer patrick.lauke@opera.com

×