Mobile Web Development from Scratch am Beispiel des Pressehandbuch Mobile.

1. Mobile Website Development am Beispiel von Pressehandbuch

3. Anforderungen des Kunden

4. Development (Frameworks)

5. Mobile Webdesign (Usability, Optimierungen)

6. Mobile Webstandards (XHTML MP)

7. Smartphone Detection

8. Google Maps

9. Google Analytics

10. TestingMobile Website Development from ScratchFH Hagenberg, 6. März 2010

12. Seit 2006 online unter www.pressehandbuch.at

13. 18.000 Journalistenkontakte

14. Mediadaten und Tarife von 3.700 Medien

15. Aktuelle Sonderthemen

16. Verband österreichischer Zeitungen

17. Ab März 2010 auch als mobile Version verfügbar

18. Print, Online, MobileMobile Website Development from ScratchFH Hagenberg, 6. März 2010

19. Crossmediale Produktion Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

21. Rasche Umsetzung und somit geringe Entwicklungskosten

22. Vereinfachtes User Interface

23. Reduzierter Funktionsumfang (einfache Suche, kein Export,...)

24. Support von möglichst vielen Devices

25. Optimierung für geringe Bandbreiten (GPRS)

26. Schnelles Rollout von ApplikationsupdatesMobile Website Development from ScratchFH Hagenberg, 6. März 2010

28. Endgeräte klassifiziert

29. Prototypen (z.B: HTML-Dummy)

30. GUI

31. Entwicklung

32. Testing, Testing, Testing!

33. Rollout auf dem ProduktionssystemMobile Website Development from ScratchFH Hagenberg, 6. März 2010

35. Alpha Version innerhalb von 5 Personentagen

36. Keine Adaptierung der Business Logik notwendig

37. Refactoring

38. Pair Programming

39. Unit Tests, Selenium TestsMobile Website Development from ScratchFH Hagenberg, 6. März 2010

41. Application Server: Apache Tomcat 6

42. Database: MySQL 5.x

43. Model View Controller: Apache Struts

44. Object Relation Mapping: Hibernate

45. Searchindex: Apache Lucene

46. Build: Apache ANT

47. Revision Control: Subversion

48. Wiki: Atlassian Confluence

49. Task/Bug Tracking: Atlassian JIRAMobile Website Development from ScratchFH Hagenberg, 6. März 2010

50. A simple change of style from media=„screen“ to media=„handheld“ is all you need to do to agically mobilize your site, right? WRONG! Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

52. Bereits existierende Website?

53. Reduzierter Content und Funktionen, nicht alles wird mobil benötigt (z.B Export Presseverteiler, etc.)

54. Texte, Navigation: Keep it simple as possible!

55. Eigene Subdomain („m.“, „mobile.“, „mobil.“) oder .mobi TLDMobile Website Development from ScratchFH Hagenberg, 6. März 2010

56. Keep it simple! vs. Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

57. Screen Resolution Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

58. Screen Resolution Android iPhone/iPod touch Blackberry Windows mobile QVGA: 320 x 240 HVGA: 480 x 320 (WVGA:ca. 854x480) QVGA: 320 x 240 Unbek.: 400 x 240 HiRes: 320 x 320 VGA: 640 x 480 WVGA: 800 x 480 Kleiner: mehrere QVGA: 320 x 240 HVGA: 480 x 320 Unbek.: mehrere HVGA: 480 x 320 Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

59. Devices Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

60. Klassisches Webdesign Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

61. Mobile Web Design Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

63. Lange Texte vermeiden

64. Tabellen vermeiden

65. Einfache Navigationsstruktur, klare Strukturen

66. Navigationselemente

67. „Access Keys“ und „Tab Order“ verwenden

68. Tastatureingaben auf ein Minimum beschränken

69. Validen XHTML Code erzeugen

70. Google Mobile Sitemaps Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

72. Inhalte nur im Bedarfsfall laden

73. Einzelne große Objekte werden schneller übertragen als viele kleine

74. HTTP Compression (mod_deflate,...)

75. Externe Ressourcen vermeiden (JS, Images,...)

76. Minimieren des Codes (Kommentare entfernen, etc.)

77. Minified CSS / JS (code.google.com/p/minify/)Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

79. OMA: 350 Mitglieder, darunter MS, Vodafone, Nokia, IBM

80. Wireless Application Protocol (WAP)

81. Wireless Markup Language (WML)

82. XHTML Mobile Profile 1.2 (Subset of XHTML Basic 1.1)

83. Wireless CSS (Subset of CSS)Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

84. XHTML-MP 1.2 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="/tags/struts-bean" prefix="bean" %> <%@ taglib uri="/tags/struts-html" prefix="html" %> <%@ taglib uri="/tags/struts-tiles" prefix="tiles" %> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="../../css/styleMobile.css" rel="stylesheet" type="text/css" /> <title><bean:message bundle="frontend" key="page.title"/></title> </head> <body> Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

86. Ordered Lists für Navigation

87. Telefonnummern verlinken: <a href="tel:+12065450210">+1 206 545-0210</a>

88. Input Elemente: <input style="-wap-input-format='*N'">

89. Ordered Lists für Navigation

90. Mobile Browser verzeihen meist keine XHTML Fehler

91. XHTML Mobile mit W3C mobileOK Checker validieren Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

93. IPHONE / Maemo: „tel:“

94. Sonstige: „ wtai://wp/mc;“

95. Text „2006-2010“ wird von IPHONE als Tel.nr. Erkannt

96. Lösung: <span>2006</span>-<span>2010</span> Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

98. IPHONE: „http://maps.google.at/m?f=q&source=s_q&hl=de&q=Vienna“

99. Android: „geo:0,0?q=Vienna“Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

101. Dem User jederzeit den Wechsel ermöglichen

102. z.B. Im Falle von false-positive

103. Fertige Klassen kapseln Logik für User Agent AuswertungMobile Website Development from ScratchFH Hagenberg, 6. März 2010

105. Verfügbar für: Java, ASP.NET, PHP, JavaScript//1. Instantiate the object to do our testing with.<%@page import="com.handinteractive.mobile.UAgentInfo"%> <% //2. Initialize the browser info variables String userAgent = request.getHeader("User-Agent"); String httpAccept = request.getHeader("Accept"); //3. Create the UAgentInfo object UAgentInfo detector = new UAgentInfo(userAgent, httpAccept); //4. Detect whether the visitor is using a mobile device. // For example, if it's an iPhone, redirect them to the // iPhone-optimized version of your web site. if (detector.detectIphoneOrIpod()) { response.sendRedirect("http://www.mycompany.com/iphone"); } else { response.sendRedirect("http://www.mycompany.com/default"); } %> Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

107. Google bietet fertige serverseitige Code Snipplets

108. Snipplets verfügbar für Perl, PHP, JSP, ASPX

109. Einbindung über eine <img>-URL, d.h. sehr kompaktMobile Website Development from ScratchFH Hagenberg, 6. März 2010

110. Google Analytics (JSP) <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ page import="java.io.UnsupportedEncodingException, java.net.URLEncoder" %> <%! private static final String GA_ACCOUNT = "MO-3845491-5"; private static final String GA_PIXEL = "ga.jsp"; private String googleAnalyticsGetImageUrl( HttpServletRequest request) throws UnsupportedEncodingException { StringBuilder url = new StringBuilder(); url.append(GA_PIXEL + "?"); url.append("utmac=").append(GA_ACCOUNT); url.append("&utmn=").append(Integer.toString((int) (Math.random() * 0x7fffffff))); String referer = request.getHeader("referer"); String query = request.getQueryString(); String path = request.getRequestURI(); if (referer == null || "".equals(referer)) { referer = "-"; } url.append("&utmr=").append(URLEncoder.encode(referer, "UTF-8")); if (path != null) { if (query != null) { path += "?" + query; } url.append("&utmp=").append(URLEncoder.encode(path, "UTF-8")); } url.append("&guid=ON"); return url.toString(); } %> Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

111. Google Analytics (JSP) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Sample Mobile Analytics Page</title> </head> <body> Publishers content here. <% String googleAnalyticsImageUrl = googleAnalyticsGetImageUrl(request); %> <img src="<%= googleAnalyticsImageUrl %>" /> Testing: <%= googleAnalyticsImageUrl %> </body> </html> Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

113. Unit Tests: JUnit 4.7 Framework (junit.org)

114. Automatisierte Webapp Tests: SeleniumHQ (seleniumhq.org)

115. Manuelle Tests auf unterschiedlichen Endgeräten inkl. Reports

116. Emulatoren nicht 100% vertrauen!

117. Bei Build &Deployment: Automatisiertes TestenMobile Website Development from ScratchFH Hagenberg, 6. März 2010

118. Vertrauen Mobile Website Development from ScratchFH Hagenberg, 6. März 2010