Mobile Web Development from Scratch
4 gefällt mir6,307 aufrufe
Das Dokument behandelt die Entwicklung von mobilen Websites am Beispiel des Pressehandbuchs, das seit 2006 eine umfassende Datenbank für Medienkontakte in Österreich bereitstellt und ab März 2010 auch in einer mobilen Version verfügbar ist. Es werden Anforderungen an die mobile Website, Designprinzipien, technische Standards sowie Testing-Methoden erläutert, um eine nutzerfreundliche und effiziente mobile Anwendung zu gewährleisten. Zudem werden Tools und Technologien wie Google Analytics und MVC-Pattern erwähnt, die zur Optimierung und Implementierung genutzt werden können.
Mobile Web Development from Scratch
- 1. Mobile Website Development am Beispiel von Pressehandbuch
- 3. Anforderungen des Kunden
- 5. Mobile Webdesign (Usability, Optimierungen)
- 6. Mobile Webstandards (XHTML MP)
- 8. Google Maps
- 10. TestingMobile Website Development from ScratchFH Hagenberg, 6. März 2010
- 11. Keyfacts Pressehandbuch Umfangreichste Medien- und Journalisten-Datenbank in AT
- 12. Seit 2006 online unter www.pressehandbuch.at
- 14. Mediadaten und Tarife von 3.700 Medien
- 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 ProduktionMobile Website Development from ScratchFH Hagenberg, 6. März 2010
- 20. Anforderungen KundeKeine App, sondern mobile Website
- 21. Rasche Umsetzung und somit geringe Entwicklungskosten
- 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
- 29. Prototypen (z.B: HTML-Dummy)
- 30. GUI
- 31. Entwicklung
- 33. Rollout auf dem ProduktionssystemMobile Website Development from ScratchFH Hagenberg, 6. März 2010
- 34. EntwicklungDank MVC Pattern rasche Implementierung einer neuen View
- 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
- 40. Architektur / Komponenten Language / IDE: JAVA / Eclipse
- 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
- 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
- 51. Mobile ContentWelche Inhalte und Funktionen machen Sinn?
- 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 ResolutionMobile Website Development from ScratchFH Hagenberg, 6. März 2010
- 58. Screen ResolutionAndroidiPhone/iPod touchBlackberryWindows mobileQVGA: 320 x 240HVGA: 480 x 320(WVGA:ca. 854x480)QVGA: 320 x 240Unbek.: 400 x 240HiRes: 320 x 320VGA: 640 x 480WVGA: 800 x 480Kleiner: mehrere QVGA: 320 x 240HVGA: 480 x 320Unbek.: mehrereHVGA: 480 x 320Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
- 59. DevicesMobile Website Development from ScratchFH Hagenberg, 6. März 2010
- 60. Klassisches WebdesignMobile Website Development from ScratchFH Hagenberg, 6. März 2010
- 61. Mobile Web DesignMobile Website Development from ScratchFH Hagenberg, 6. März 2010
- 62. Thema: „Usability“ Keep it simple!
- 65. Einfache Navigationsstruktur, klare Strukturen
- 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
- 71. Thema: „Bandbreite“ Datentransfer: Response < 10 kb – 25 kb
- 72. Inhalte nur im Bedarfsfall laden
- 73. Einzelne große Objekte werden schneller übertragen als viele kleine
- 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
- 78. Mobile Web Standards Mobile Web Standards von W3C und Open Mobile Alliance
- 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
- 85. XHTML-MP 1.2 Access Keys verwenden: <a href="news.html" accesskey="1">News</a>
- 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
- 92. Clickable Phone Numbers Wählen der Telefonnummer direkt von der mobilen Website
- 93. IPHONE / Maemo: „tel:“
- 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
- 97. Google Maps Integration Öffnen der Google Maps App
- 99. Android: „geo:0,0?q=Vienna“Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
- 100. Smartphone Detection Global für jeden Request z.B. als Tomcat Filter
- 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
- 106. Google Analytics Google hat das Problem mit JS in mobile Browsern erkannt
- 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
- 112. Testing, Testing, Testing! Development & Testing über mehrere Iterationen
- 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. VertrauenMobile Website Development from ScratchFH Hagenberg, 6. März 2010