Mobile Web Development from Scratch
-
Upload
robert-erlinger -
Category
Technology
-
view
1.356 -
download
0
description
Transcript of Mobile Web Development from Scratch
![Page 1: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/1.jpg)
Mobile Website Development am Beispiel von Pressehandbuch
![Page 2: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/2.jpg)
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
![Page 3: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/3.jpg)
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
![Page 4: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/4.jpg)
Crossmediale Produktion
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
![Page 5: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/5.jpg)
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
![Page 6: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/6.jpg)
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
![Page 7: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/7.jpg)
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
![Page 8: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/8.jpg)
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
![Page 9: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/9.jpg)
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!
![Page 10: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/10.jpg)
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
![Page 11: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/11.jpg)
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
Keep it simple!
vs.
![Page 12: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/12.jpg)
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
Screen Resolution
![Page 13: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/13.jpg)
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
![Page 14: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/14.jpg)
Devices
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
![Page 15: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/15.jpg)
Klassisches Webdesign
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
![Page 16: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/16.jpg)
Mobile Web Design
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
![Page 17: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/17.jpg)
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“
![Page 18: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/18.jpg)
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“
![Page 19: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/19.jpg)
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)
![Page 20: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/20.jpg)
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>
![Page 21: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/21.jpg)
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
![Page 22: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/22.jpg)
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>
![Page 23: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/23.jpg)
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“
![Page 24: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/24.jpg)
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
![Page 25: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/25.jpg)
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"); }%>
![Page 26: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/26.jpg)
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
![Page 27: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/27.jpg)
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(); }%>
![Page 28: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/28.jpg)
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>
![Page 29: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/29.jpg)
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
![Page 30: Mobile Web Development from Scratch](https://reader035.fdocuments.in/reader035/viewer/2022070321/558a5417d8b42a851e8b45ce/html5/thumbnails/30.jpg)
Vertrauen
Mobile Website Development from ScratchFH Hagenberg, 6. März 2010