Mobile Website Development am Beispiel von Pressehandbuch<br />
Session Overview<br /><ul><li>Überblick Pressehandbuch
 Anforderungen des Kunden
 Development (Frameworks)
Mobile Webdesign (Usability, Optimierungen)
Mobile Webstandards (XHTML MP)
Smartphone Detection
Google Maps
Google Analytics
Testing</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
Keyfacts Pressehandbuch<br /><ul><li> Umfangreichste Medien- und Journalisten-Datenbank in AT
 Seit 2006 online unter www.pressehandbuch.at
 18.000 Journalistenkontakte
 Mediadaten und Tarife von 3.700 Medien
 Aktuelle Sonderthemen
 Verband österreichischer Zeitungen
 Ab März 2010 auch als mobile Version verfügbar
Print, Online, Mobile</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
Crossmediale Produktion<br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
Anforderungen Kunde<br /><ul><li>Keine App, sondern mobile Website
Rasche Umsetzung und somit geringe Entwicklungskosten
Vereinfachtes User Interface
Reduzierter Funktionsumfang (einfache Suche, kein Export,...)
Support von möglichst vielen Devices
Optimierung für geringe Bandbreiten (GPRS)
Schnelles Rollout von Applikationsupdates</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
Der Weg...<br /><ul><li>Erstellung Konzept
Endgeräte klassifiziert
 Prototypen (z.B: HTML-Dummy)
GUI
Upcoming SlideShare
Loading in...5
×

Mobile Web Development from Scratch

8,808

Published on

Mobile Web Development from Scratch am Beispiel des Pressehandbuch Mobile.

1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,808
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Mobile Web Development from Scratch

  1. 1. Mobile Website Development am Beispiel von Pressehandbuch<br />
  2. 2. Session Overview<br /><ul><li>Überblick Pressehandbuch
  3. 3. Anforderungen des Kunden
  4. 4. Development (Frameworks)
  5. 5. Mobile Webdesign (Usability, Optimierungen)
  6. 6. Mobile Webstandards (XHTML MP)
  7. 7. Smartphone Detection
  8. 8. Google Maps
  9. 9. Google Analytics
  10. 10. Testing</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  11. 11. Keyfacts Pressehandbuch<br /><ul><li> Umfangreichste Medien- und Journalisten-Datenbank in AT
  12. 12. Seit 2006 online unter www.pressehandbuch.at
  13. 13. 18.000 Journalistenkontakte
  14. 14. Mediadaten und Tarife von 3.700 Medien
  15. 15. Aktuelle Sonderthemen
  16. 16. Verband österreichischer Zeitungen
  17. 17. Ab März 2010 auch als mobile Version verfügbar
  18. 18. Print, Online, Mobile</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  19. 19. Crossmediale Produktion<br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  20. 20. Anforderungen Kunde<br /><ul><li>Keine App, sondern mobile Website
  21. 21. Rasche Umsetzung und somit geringe Entwicklungskosten
  22. 22. Vereinfachtes User Interface
  23. 23. Reduzierter Funktionsumfang (einfache Suche, kein Export,...)
  24. 24. Support von möglichst vielen Devices
  25. 25. Optimierung für geringe Bandbreiten (GPRS)
  26. 26. Schnelles Rollout von Applikationsupdates</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  27. 27. Der Weg...<br /><ul><li>Erstellung Konzept
  28. 28. Endgeräte klassifiziert
  29. 29. Prototypen (z.B: HTML-Dummy)
  30. 30. GUI
  31. 31. Entwicklung
  32. 32. Testing, Testing, Testing!
  33. 33. Rollout auf dem Produktionssystem</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  34. 34. Entwicklung<br /><ul><li>Dank MVC Pattern rasche Implementierung einer neuen View
  35. 35. Alpha Version innerhalb von 5 Personentagen
  36. 36. Keine Adaptierung der Business Logik notwendig
  37. 37. Refactoring
  38. 38. Pair Programming
  39. 39. Unit Tests, Selenium Tests</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  40. 40. Architektur / Komponenten<br /><ul><li> Language / IDE: JAVA / Eclipse
  41. 41. Application Server: Apache Tomcat 6
  42. 42. Database: MySQL 5.x
  43. 43. Model View Controller: Apache Struts
  44. 44. Object Relation Mapping: Hibernate
  45. 45. Searchindex: Apache Lucene
  46. 46. Build: Apache ANT
  47. 47. Revision Control: Subversion
  48. 48. Wiki: Atlassian Confluence
  49. 49. Task/Bug Tracking: Atlassian JIRA</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  50. 50. A simple change of style from media=„screen“ to media=„handheld“ is all you need to do to agically mobilize your site, right?<br />WRONG!<br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  51. 51. Mobile Content<br /><ul><li>Welche Inhalte und Funktionen machen Sinn?
  52. 52. Bereits existierende Website?
  53. 53. Reduzierter Content und Funktionen, nicht alles wird mobil benötigt (z.B Export Presseverteiler, etc.)
  54. 54. Texte, Navigation: Keep it simple as possible!
  55. 55. Eigene Subdomain („m.“, „mobile.“, „mobil.“) oder .mobi TLD</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  56. 56. Keep it simple!<br />vs.<br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  57. 57. Screen Resolution<br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  58. 58. Screen Resolution<br />Android<br />iPhone/iPod touch<br />Blackberry<br />Windows mobile<br />QVGA: 320 x 240<br />HVGA: 480 x 320<br />(WVGA:ca. 854x480)<br />QVGA: 320 x 240<br />Unbek.: 400 x 240<br />HiRes: 320 x 320<br />VGA: 640 x 480<br />WVGA: 800 x 480<br />Kleiner: mehrere <br />QVGA: 320 x 240<br />HVGA: 480 x 320<br />Unbek.: mehrere<br />HVGA: 480 x 320<br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  59. 59. Devices<br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  60. 60. Klassisches Webdesign<br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  61. 61. Mobile Web Design<br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  62. 62. Thema: „Usability“<br /><ul><li> Keep it simple!
  63. 63. Lange Texte vermeiden
  64. 64. Tabellen vermeiden
  65. 65. Einfache Navigationsstruktur, klare Strukturen
  66. 66. Navigationselemente
  67. 67. „Access Keys“ und „Tab Order“ verwenden
  68. 68. Tastatureingaben auf ein Minimum beschränken
  69. 69. Validen XHTML Code erzeugen
  70. 70. Google Mobile Sitemaps </li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  71. 71. Thema: „Bandbreite“<br /><ul><li> Datentransfer: Response < 10 kb – 25 kb
  72. 72. Inhalte nur im Bedarfsfall laden
  73. 73. Einzelne große Objekte werden schneller übertragen als viele kleine
  74. 74. HTTP Compression (mod_deflate,...)
  75. 75. Externe Ressourcen vermeiden (JS, Images,...)
  76. 76. Minimieren des Codes (Kommentare entfernen, etc.)
  77. 77. Minified CSS / JS (code.google.com/p/minify/)</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  78. 78. Mobile Web Standards<br /><ul><li> Mobile Web Standards von W3C und Open Mobile Alliance
  79. 79. OMA: 350 Mitglieder, darunter MS, Vodafone, Nokia, IBM
  80. 80. Wireless Application Protocol (WAP)
  81. 81. Wireless Markup Language (WML)
  82. 82. XHTML Mobile Profile 1.2 (Subset of XHTML Basic 1.1)
  83. 83. Wireless CSS (Subset of CSS)</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  84. 84. XHTML-MP 1.2<br /><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><br /><%@ taglib uri="/tags/struts-bean" prefix="bean" %><br /><%@ taglib uri="/tags/struts-html" prefix="html" %><br /><%@ taglib uri="/tags/struts-tiles" prefix="tiles" %><br /><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"><br /><html><br /><head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /> <link href="../../css/styleMobile.css" rel="stylesheet" type="text/css" /><br /> <title><bean:message bundle="frontend" key="page.title"/></title><br /></head><br /><body><br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  85. 85. XHTML-MP 1.2<br /><ul><li> Access Keys verwenden: <a href="news.html" accesskey="1">News</a>
  86. 86. Ordered Lists für Navigation
  87. 87. Telefonnummern verlinken: <a href="tel:+12065450210">+1 206 545-0210</a>
  88. 88. Input Elemente: <input style="-wap-input-format='*N'">
  89. 89. Ordered Lists für Navigation
  90. 90. Mobile Browser verzeihen meist keine XHTML Fehler
  91. 91. XHTML Mobile mit W3C mobileOK Checker validieren </li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  92. 92. Clickable Phone Numbers<br /><ul><li> Wählen der Telefonnummer direkt von der mobilen Website
  93. 93. IPHONE / Maemo: „tel:“
  94. 94. Sonstige: „ wtai://wp/mc;“
  95. 95. Text „2006-2010“ wird von IPHONE als Tel.nr. Erkannt
  96. 96. Lösung: <span>2006</span>-<span>2010</span> </li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  97. 97. Google Maps Integration<br /><ul><li> Öffnen der Google Maps App
  98. 98. IPHONE: „http://maps.google.at/m?f=q&source=s_q&hl=de&q=Vienna“
  99. 99. Android: „geo:0,0?q=Vienna“</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  100. 100. Smartphone Detection<br /><ul><li> Global für jeden Request z.B. als Tomcat Filter
  101. 101. Dem User jederzeit den Wechsel ermöglichen
  102. 102. z.B. Im Falle von false-positive
  103. 103. Fertige Klassen kapseln Logik für User Agent Auswertung</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  104. 104. Smartphone Detection<br /><ul><li>com.handinteractive.mobile.UAgentInfo
  105. 105. Verfügbar für: Java, ASP.NET, PHP, JavaScript//1. Instantiate the object to do our testing with.</li></ul><%@page import="com.handinteractive.mobile.UAgentInfo"%><br /><%<br /> //2. Initialize the browser info variables<br /> String userAgent = request.getHeader("User-Agent");<br /> String httpAccept = request.getHeader("Accept");<br /> //3. Create the UAgentInfo object<br /> UAgentInfo detector = new UAgentInfo(userAgent, httpAccept);<br /> //4. Detect whether the visitor is using a mobile device.<br /> // For example, if it's an iPhone, redirect them to the <br /> // iPhone-optimized version of your web site.<br /> if (detector.detectIphoneOrIpod()) {<br /> response.sendRedirect("http://www.mycompany.com/iphone");<br /> } else {<br /> response.sendRedirect("http://www.mycompany.com/default");<br /> }<br />%><br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  106. 106. Google Analytics<br /><ul><li> Google hat das Problem mit JS in mobile Browsern erkannt
  107. 107. Google bietet fertige serverseitige Code Snipplets
  108. 108. Snipplets verfügbar für Perl, PHP, JSP, ASPX
  109. 109. Einbindung über eine <img>-URL, d.h. sehr kompakt</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  110. 110. Google Analytics (JSP)<br /><%@ page language="java" contentType="text/html; charset=ISO-8859-1"<br /> pageEncoding="ISO-8859-1"%><br /><%@ page import="java.io.UnsupportedEncodingException,<br /> java.net.URLEncoder" %><br /><%!<br /> private static final String GA_ACCOUNT = "MO-3845491-5";<br /> private static final String GA_PIXEL = "ga.jsp";<br /> private String googleAnalyticsGetImageUrl(<br /> HttpServletRequest request) throws UnsupportedEncodingException {<br /> StringBuilder url = new StringBuilder();<br /> url.append(GA_PIXEL + "?");<br /> url.append("utmac=").append(GA_ACCOUNT);<br /> url.append("&utmn=").append(Integer.toString((int) (Math.random() * 0x7fffffff)));<br /> String referer = request.getHeader("referer");<br /> String query = request.getQueryString();<br /> String path = request.getRequestURI();<br /> if (referer == null || "".equals(referer)) {<br /> referer = "-";<br /> }<br /> url.append("&utmr=").append(URLEncoder.encode(referer, "UTF-8"));<br /> if (path != null) {<br /> if (query != null) {<br /> path += "?" + query;<br /> }<br /> url.append("&utmp=").append(URLEncoder.encode(path, "UTF-8"));<br /> }<br /> url.append("&guid=ON");<br /> return url.toString();<br /> }<br />%><br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  111. 111. Google Analytics (JSP)<br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><br /><title>Sample Mobile Analytics Page</title><br /></head><br /><body><br />Publishers content here.<br /><%<br /> String googleAnalyticsImageUrl = googleAnalyticsGetImageUrl(request);<br />%><br /><img src="<%= googleAnalyticsImageUrl %>" /><br />Testing: <%= googleAnalyticsImageUrl %><br /></body><br /></html><br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  112. 112. Testing, Testing, Testing!<br /><ul><li> Development & Testing über mehrere Iterationen
  113. 113. Unit Tests: JUnit 4.7 Framework (junit.org)
  114. 114. Automatisierte Webapp Tests: SeleniumHQ (seleniumhq.org)
  115. 115. Manuelle Tests auf unterschiedlichen Endgeräten inkl. Reports
  116. 116. Emulatoren nicht 100% vertrauen!
  117. 117. Bei Build &Deployment: Automatisiertes Testen</li></ul>Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />
  118. 118. Vertrauen<br />Mobile Website Development from ScratchFH Hagenberg, 6. März 2010<br />

×