Mobile Web Development from Scratch

  • 6,822 views
Uploaded on

Mobile Web Development from Scratch am Beispiel des Pressehandbuch Mobile.

Mobile Web Development from Scratch am Beispiel des Pressehandbuch Mobile.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,822
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
1
Likes
3

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. Mobile Website Development am Beispiel von Pressehandbuch
  • 2. Session Overview
    • Überblick 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. Testing
    Mobile 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
    • 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, Mobile
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 19. Crossmediale Produktion
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 20. Anforderungen Kunde
    • Keine App, sondern mobile Website
    • 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 Applikationsupdates
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 27. Der Weg...
    • Erstellung Konzept
    • 28. Endgeräte klassifiziert
    • 29. Prototypen (z.B: HTML-Dummy)
    • 30. GUI
    • 31. Entwicklung
    • 32. Testing, Testing, Testing!
    • 33. Rollout auf dem Produktionssystem
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 34. Entwicklung
    • Dank 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 Tests
    Mobile 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
    • 47. Revision Control: Subversion
    • 48. Wiki: Atlassian Confluence
    • 49. Task/Bug Tracking: Atlassian JIRA
    Mobile 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 Content
    • Welche Inhalte und Funktionen machen Sinn?
    • 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 TLD
    Mobile 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
  • 62. Thema: „Usability“
    • Keep it simple!
    • 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
  • 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
    • 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
  • 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:“
    • 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
  • 97. Google Maps Integration
    • Öffnen der Google Maps App
    • 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
  • 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 Auswertung
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 104. Smartphone Detection
    • com.handinteractive.mobile.UAgentInfo
    • 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 kompakt
    Mobile 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 Testen
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 118. Vertrauen
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010