Mobile Web Development from Scratch

Mobile Website Development am Beispiel von Pressehandbuch

Session Overview
Überblick Pressehandbuch
Anforderungen des Kunden
Development (Frameworks)
Mobile Webdesign (Usability, Optimierungen)
Mobile Webstandards (XHTML MP)
Smartphone Detection
Google Maps
Google Analytics
Testing
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010

Keyfacts Pressehandbuch
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

Crossmediale Produktion

Anforderungen Kunde
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

Der Weg...
Erstellung Konzept
Endgeräte klassifiziert
Prototypen (z.B: HTML-Dummy)
GUI
Entwicklung
Testing, Testing, Testing!
Rollout auf dem Produktionssystem

Entwicklung
Dank MVC Pattern rasche Implementierung einer neuen View
Alpha Version innerhalb von 5 Personentagen
Keine Adaptierung der Business Logik notwendig
Refactoring
Pair Programming
Unit Tests, Selenium Tests

Architektur / Komponenten
Language / IDE: JAVA / Eclipse
Application Server: Apache Tomcat 6
Database: MySQL 5.x
Model View Controller: Apache Struts
Object Relation Mapping: Hibernate
Searchindex: Apache Lucene
Build: Apache ANT
Revision Control: Subversion
Wiki: Atlassian Confluence
Task/Bug Tracking: Atlassian JIRA

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 Content
Welche Inhalte und Funktionen machen Sinn?
Bereits existierende Website?
Reduzierter Content und Funktionen, nicht alles wird mobil benötigt (z.B Export Presseverteiler, etc.)
Texte, Navigation: Keep it simple as possible!
Eigene Subdomain („m.“, „mobile.“, „mobil.“) oder .mobi TLD

Keep it simple!
vs.

Screen Resolution

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

Devices

Klassisches Webdesign

Mobile Web Design

Thema: „Usability“
Keep it simple!
Lange Texte vermeiden
Tabellen vermeiden
Einfache Navigationsstruktur, klare Strukturen
Navigationselemente
„Access Keys“ und „Tab Order“ verwenden
Tastatureingaben auf ein Minimum beschränken
Validen XHTML Code erzeugen
Google Mobile Sitemaps

Thema: „Bandbreite“
Datentransfer: Response < 10 kb – 25 kb
Inhalte nur im Bedarfsfall laden
Einzelne große Objekte werden schneller übertragen als viele kleine
HTTP Compression (mod_deflate,...)
Externe Ressourcen vermeiden (JS, Images,...)
Minimieren des Codes (Kommentare entfernen, etc.)
Minified CSS / JS (code.google.com/p/minify/)

Mobile Web Standards
Mobile Web Standards von W3C und Open Mobile Alliance
OMA: 350 Mitglieder, darunter MS, Vodafone, Nokia, IBM
Wireless Application Protocol (WAP)
Wireless Markup Language (WML)
XHTML Mobile Profile 1.2 (Subset of XHTML Basic 1.1)
Wireless CSS (Subset of CSS)

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>

XHTML-MP 1.2
Access Keys verwenden: <a href="news.html" accesskey="1">News</a>
Ordered Lists für Navigation
Telefonnummern verlinken: <a href="tel:+12065450210">+1 206 545-0210</a>
Input Elemente: <input style="-wap-input-format='*N'">
Ordered Lists für Navigation
Mobile Browser verzeihen meist keine XHTML Fehler
XHTML Mobile mit W3C mobileOK Checker validieren

Clickable Phone Numbers
Wählen der Telefonnummer direkt von der mobilen Website
IPHONE / Maemo: „tel:“
Sonstige: „ wtai://wp/mc;“
Text „2006-2010“ wird von IPHONE als Tel.nr. Erkannt
Lösung: <span>2006</span>-<span>2010</span>

Google Maps Integration
Öffnen der Google Maps App
IPHONE: „http://maps.google.at/m?f=q&source=s_q&hl=de&q=Vienna“
Android: „geo:0,0?q=Vienna“

Global für jeden Request z.B. als Tomcat Filter
Dem User jederzeit den Wechsel ermöglichen
z.B. Im Falle von false-positive
Fertige Klassen kapseln Logik für User Agent Auswertung

com.handinteractive.mobile.UAgentInfo
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");
}
%>

Google Analytics
Google hat das Problem mit JS in mobile Browsern erkannt
Google bietet fertige serverseitige Code Snipplets
Snipplets verfügbar für Perl, PHP, JSP, ASPX
Einbindung über eine <img>-URL, d.h. sehr kompakt

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();
}
%>

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>

Testing, Testing, Testing!
Development & Testing über mehrere Iterationen
Unit Tests: JUnit 4.7 Framework (junit.org)
Automatisierte Webapp Tests: SeleniumHQ (seleniumhq.org)
Manuelle Tests auf unterschiedlichen Endgeräten inkl. Reports
Emulatoren nicht 100% vertrauen!
Bei Build &Deployment: Automatisiertes Testen

Vertrauen

http://blog.databyte.at	432
http://www.slideshare.net	16
http://cmahr.wordpress.com	3

Mobile Web Development from Scratch

by NokiaAppForum on Mar 06, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 451

Statistics

Mobile Web Development from Scratch — Presentation Transcript