Upload
robert-erlinger
View
1.358
Download
0
Tags:
Embed Size (px)
DESCRIPTION
This presentation from the Nokia Developer Forum at FH Hagenberg shows the basic steps for Mobile Web Development with the example of the mobile edition of the austrian "pressehandbuch".
Citation preview
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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
Anforderungen Kunde
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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...
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
Erstellung Konzept
Endgeräte klassifiziert
Prototypen (z.B: HTML-Dummy)
GUI
Entwicklung
Testing, Testing, Testing!
Rollout auf dem Produktionssystem
Entwicklung
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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
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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
Keep it simple!
vs.
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
Screen Resolution
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
Klassisches Webdesign
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
Mobile Web Design
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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“
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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 Website Development from ScratchFH Hagenberg, 6. März 2010
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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
<%@ 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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
Ö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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
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)
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
<%@ 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)
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
<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!
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
• 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 Website Development from ScratchFH Hagenberg, 6. März 2010