mobile web development from scratch

Mobile Website Development am Beispiel von Pressehandbuch

Session Overview

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

• Überblick Pressehandbuch

• Anforderungen des Kunden

• Development (Frameworks)

• Mobile Webdesign (Usability, Optimierungen)

• Mobile Webstandards (XHTML MP)

• Smartphone Detection

• Google Maps

• Google Analytics

• Testing

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

http://www.pressehandbuch.at/

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!


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

Mobile Content


Keep it simple!

vs.


Screen Resolution


QVGA: 320 x 240HVGA: 480 x 320(WVGA:ca. 854x480)

Android

HVGA: 480 x 320

iPhone/iPod touch Blackberry

Kleiner: mehrere QVGA: 320 x 240HVGA: 480 x 320Unbek.: mehrere

QVGA: 320 x 240Unbek.: 400 x 240HiRes: 320 x 320VGA: 640 x 480WVGA: 800 x 480

Windows mobile

Screen Resolution

Devices


Klassisches Webdesign


Mobile Web Design



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: „Usability“


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/)

Thema: „Bandbreite“

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“

Smartphone Detection


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

Smartphone Detection


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


mobile web development from scratch

Technology

scratchfh hagenberg

mobilen website

verfgbar fr

lists fr navigation

iphone als

iphone maemo

google maps app

smartphone detection