Mobile  Web  Development Stefan  Schuster IRIAN  Solu3ons  GmbH

Mobile  Web

Sta3s3cs 0% 20% 40% 60% 80% 100% September, 2010 December, 2010 March, 2011 June, 2011 September, 2011 December, 2011 March, 2012 June, 2012 3,5% 3,8% 4,0% 4,1% 4,3% 4,5% 4,7% 5,2% 5,8% 6,5% 7,0% 7,1% 6,7% 6,6% 7,0% 8,0% 8,5% 8,5% 9,0% 9,6% 10,1% 10,4% 11,1% 11,8% 96,5% 96,2% 96,0% 95,9% 95,7% 95,6% 95,3% 94,8% 94,3% 93,5% 93,0% 92,9% 93,3% 93,5% 93,1% 92,0% 91,5% 91,5% 91,0% 90,4% 89,9% 89,6% 88,9% 88,2% Desktop NetApplications Mobile NetApplications Desktop StatCounter Mobile StatCounter hGp://www.netmarketshare.com/ hGp://gs.statcounter.com/

Web  Technologies

Agenda • Über  mich • Browser • HTML – Page  setup – URL  schemes • CSS – CSS  3 – High  resolu3on • JS – Touch  events – Device  APIs

Über  mich • Stefan  Schuster • HTML/CSS/JS  Experte  bei  der  IRIAN  Solu3ons  GmbH • “R&D”:  iOS,  Node,  CouchDB,  Redis,  ... • Projekte – Mind42  (hGp://mind42.com) – Spaaze  (hGp://www.spaaze.com) – SimpleMeet.me  (hGp://www.simplemeet.me) • [email protected] • @puka_stooge

Browser

Smartphones • Smartphone  Browser  sind  moderne  Browser – Webkit  dominant • Viele  HTML5  Techniken  sind  daher  auf  fast  allen  Smartphones   vorhanden – hGp://mobilehtml5.org – Canvas – SVG – Webworkers – Websockets – ...

HTML

Viewport • BildausschniG  und  Skalierung  bei  mobilen  Browsern  “flexibler” • Standardverhalten: – Desktop  Webseiten  werden  stark  herausgezoomt  kompleG  dargestellt – Bei  iPhone:  Default  Viewport  980px  breit – Reale  (logische)  verfügbare  iPhone  Breite:  320px – Skalierung  flexibel

Viewport • Viewport  Metatag – Konfigura3on  für  BildauschniG  und  Zoom • Verfügbar  Op3onen – Viewport • width • height – Zoom • (minimum-­‐/maximum-­‐)  scale • ini3al-­‐scale • user-­‐scalable Apple  Developer:  Safari  Web  Content  Guide hGps://developer.apple.com/library/safari/documenta3on/AppleApplica3ons/Reference/SafariWebContent/Introduc3on/Introduc3on.html#//apple_ref/doc/uid/TP40002051

URL  Schemes • URL  Schemes  sind  eine  Methode  um  zwischen  Apps  zu   wechseln – Bei  iOS  der  einzige  Weg • z.B.:  twiGer://user?screen_name=puka_stooge – Bei  Android  üblicherweise  miGels  Intents • URL  Schemes  mit  intent-­‐filter  konfigurierbar • Und  natürlich  sind  URL  Schemes  für  das  Mobile  Web  relevant

URL  Schemes • Mail  Links – mailto:[email protected] • Phone  Links – tel:+43-­‐1-­‐8905303-­‐0 • SMS  Links – sms:+43-­‐664-­‐80508-­‐3900 • Rest  problema3sch – z.B.  Map  Links: • iPhone  (Android  fragt  nach  Programm): – hGp://maps.google.com/maps?q=cuper3no • Android – geo:0,0?q=linz • iOS  Übersicht:  hGp://handleopenurl.com

Sons3ge  Metadaten • Homescreen  App  Icon  (iOS  &  Android) • Startup  Screen  (iOS) • Keine  Browser  UI  /  Fullscreen  (iOS) • Statusbar  Styling  (iOS)

CSS

Overview • CSS3  wahrscheinlich  wich3gster  Bestandteil  performanter   mobiler  Webseiten – Bessere  Ladezeiten  durch  CSS3  Effekte  staG  Images • RGBA • Farbverläufe • Abgerundete  Ecken • SchaGen • Webfonts • Transforma3ons – Bessere  Performance  durch  tlw.  Hardwarebeschleunigung • CSS  Transi3ons/Anima3ons  staG  JavaScript

RGBA • Transparente  Farben • CSS  Property  “opacity”  wahrscheinlich  bekannt – Macht  ganzes  Element  (inklusive  Inhalt  wie  Text)  transparent • RGBA:  Transparenzeffekte  und  Schaverungen  ohne   Nebeneffekte – HEX:  #58b2d1   – RGB:  rgb(88,  178,  209) – RGBA:  rgba(88,  178,  209,  0.5)

Farbverläufe • Farbverläufe  mit  mehreren  Zwischenstufen  als CSS  Hintergründe • Vendor-­‐Prefix  bzw.  ältere  Vendor  Versionen  und Fallback  erforderlich • hGp://www.colorzilla.com/gradient-­‐editor/ • SASS/LESS  empfehlenswert background:  linear-­‐gradient(to  boGom,  #88bfe8  0%,#0081dd  100%); background: #88bfe8; background: -moz-linear-gradient(top, #88bfe8 0%, #70b0e0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bfe8), color-stop(100%,#70b0e0)); background: -webkit-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); background: -o-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); background: -ms-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); background: linear-gradient(to bottom, #88bfe8 0%,#70b0e0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#70b0e0',GradientType=0 );

Abgerundete  Ecken • Abgerundete  Ecken  (an  einzelnen  oder  allen  Ecken) • -­‐webkit  Vendor  Prefix  für  ganz  alte  Versionen  eventuell  relevant • border-­‐radius  auch  ohne  border  einsetzbar • DOM  Elemente  immer  rechteckig – Mit  dieser  Technik  auch  Kreise  möglich – 100px  breit/hoch,  50px  border-­‐radius  =  Kreis • hGp://css3generator.com border-­‐radius:  4px; border-­‐radius:  4px  4px  0  0;

SchaGen • SchaGeneffekte  für  DOM-­‐Elemente  oder  Text • -­‐webkit  Vendor  Prefix  für  box-­‐shadow  tlw.  erforderlich • Komplexe  Defini3on – inset – mehrere  SchaGen • Kostet  Performance • hGp://css3generator.com box-­‐shadow:  1px  1px  2px  0px  rgba(0,  0,  0,  0.5); text-­‐shadow:  1px  1px  2px  #000;

Webfonts • Erlaubt  die  Einbindung  von  Custom  Fonts • Format-­‐Wirrwarr  (EOT,  WOFF,  TTF,  ...) – Google  WebFonts:  hGp://www.google.com/webfonts – Typekit:  hGps://typekit.com • Verfügbare  Systemfonts – iOS:  hGp://iosfonts.com – Kaum  Fonts  auf  Android @font-­‐face  {  font-­‐family:  “...”;  src:  url(...);  }

Transforma3ons • Transforma3onen  des  Koordinatensystems  wie  z.B.  bei  Canvas – translate – scale – rotate • -­‐webkit  Vendor  Prefix  erforderlich – hGp://css3generator.com • 3D  Varianten  verfügbar:  translate3d,  scale3d,  rotate3d – Bessere  Performance  durch  Hardware  Beschleunigung – Eventuell  etwas  buggy transform:  rotate(15deg);

Anspruchsvolle  UIs • Anspruchsvolle  UI  durch  Kombina3on  aller  Effekte – Leichter  wartbar – Gerade  auf  Mobile:  Weniger  Bandbreite  erforderlich .badge { width: 100px; height: 100px; background: #ff3019; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); -webkit-transform: rotate(20deg); transform: rotate(20deg); -webkit-box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5); border-radius: 50px; border: 3px solid #eee; text-align: center; color: white; font-weight: bold; line-height: 100px; font-family: Helvetica; font-size: 30px; }

Anspruchsvolle  UIs • Viele  Dinge  können  ohne  Images  umgesetzt  werden

Transi3ons • Definiert  Übergangsverhalten  bei  CSS  Änderungen • Neue  Werte  die  mit  :hover  oder  JS  gesetzt  werden,  bekommen   einen  fließenden  Übergang • -­‐webkit  Vendor  Prefix  erforderlich • Kann  JS  Anima3onen  ersetzten transi[on:  background  500ms  ease;

Anima3onen • 1.  CSS  Zustände  für  Anima3onen  definieren • 2.  Definierte  Anima3onen  per  CSS  zuweisen • Komplex • Kann  JS  Anima3onen  ersetzen • In  Kombina3on  mit  HW  beschleunigten  3D  Transforms: – Flüssige  performante  Anma3onen @-­‐webkit-­‐keyframes  myAnim  {  from  {...}  to  {...}  } #myObject  {  -­‐webkit-­‐anima[on-­‐name:  myAnim;  ...  }

High  Resolu3on • High  resolu3on  displays  bzw.  Re3na  displays  (Apple) – Neuere  Smartphones,  Tablets  und  Notebooks  haben  sehr  hohe   Auflösungen – 220  DPI  ++ – CSS  Pixel  werden  nicht  mehr  1:1  auf  Display  Pixel  gemappt • 1  CSS  Pixel  =  2x2  Display  Pixel

High  resolu3on • Auswirkungen – Breite  640px  (iPhone  4)  =  Breite  320px  (iPhone  3GS) • Keine  Anpassungen  der  Maße  erforderlich – CSS3  Effekte  (Gradients,  SchaGen,  ...)  skalieren  automa3sch • Keine  Anpassungen  notwendig – EingebeGete  Bilder  (,  CSS  Backgrounds)  werden  hochskaliert • Logische  200px  Bilder  haben  200px  Bildquellen • Logische  200px  Bilder  werden  mit  400px  dargestellt • Darstellung  nicht  op3mal  (pixelig)

High  Resolu3on • Lösungsansatz – Höher  aufgelöste  Bildquellen  (400px  Bild  für  200px  Element) • Perfekte  Darstellung  auf  High  Resolu3on  Displays • Unnö3ge  Datenmenge  (Bandbreite)  und  Skalierung  (downscaling)  auf   klassischen  Displays  mit  1:1  Pixel  mapping – subop3mal

High  Resolu3on • CSS/JS  Pixel  Ra3o – CSS • • @media  screen  and  (min-­‐device-­‐pixel-­‐ra3o:  2)  {  ...  } • Vendor  Prefixes  notwendig • High  Resolu3on  CSS  Regeln  für  höher  aufgelöste  Bilder • Achtung:  Sprite  Offsets  auch  betroffen – JS:  window.devicePixelRa3o – hGp://coding.smashingmagazine.com/2012/08/20/towards-­‐re3na-­‐ web/

JavaScript

Touch  API • Klassische  JS  Maus-­‐Events  “theore3sch”  nutzlos – onclick,  onmouseover/out/down/move/up • Ohne  Touch-­‐Event-­‐Handler  werden  diese  “simuliert” – zeitverzögert • Touch/Gesten  API  verfügbar – ontouchstart/move/end/cancel – ongesturestart/change/end Apple  Developer:  Safari  Web  Content  Guide hGps://developer.apple.com/library/safari/documenta3on/AppleApplica3ons/Reference/SafariWebContent/Introduc3on/Introduc3on.html#//apple_ref/doc/uid/TP40002051

Touch  API • ontouchstart/move/end/cancel – Unterstützt  Mul3touch • Liste  aller  Berührungen – event.touches – event.targetTouches – event.changedTouches • Touches  haben  einen  Iden3fier – event.touches[0].iden3fier • Ansonsten  ähnlich  zu  Mouseevents – touch.pageX/pageY – Touchevents  im  Gegensatz  zu  simulierten  Mouseevents  ohne   Verzögerung

Gesture  API • Nur  auf  iOS • Erleichtert  Umgang  mit  Mul3touch  pinch/rotate • ongesturestart/change/end – event.rota3on – event.scale Images:  hGp://en.wikipedia.org/wiki/Mul3-­‐touch

Orienta3on • Device  Orienta3on  per  JS  API  überprü‚ar – window.orienta3on • JS  Event  für  Änderungen – body.onorienta3onchange 0                                                                            90                                                                                              -­‐90                                                                        180

Orienta3on • Gyroskop  /  Kompass – window.ondeviceorienta3on • event.alpha/beta/gamma • Accelerometer – window.ondevicemo3on • event.accelera3on • event.  accelera3onIncludingGravity • event.  rota3onRate hGp://dev.w3.org/geo/api/spec-­‐source-­‐orienta3on.html#devicemo3on

Orienta3on

Geoloca3on • GPS/WLAN/Cell  Tower  Ortung • Nur  nach  Einverständis  des  Benutzers • navigator.geoloca3on.getCurrentPosi3on(callback) – Einmalige  Posi3onsabfrage – posi3on.la3tude – posi3on.longitude • navigator.geoloca3on.watchPosi3on(callback) – Updates  bei  Posi3onsänderungen

Danke  für  die  Aufmerksamkeit Fragen?