• Save
Mobile Web Development from Scratch
Upcoming SlideShare
Loading in...5
×
 

Mobile Web Development from Scratch

on

  • 7,123 views

Mobile Web Development from Scratch am Beispiel des Pressehandbuch Mobile.

Mobile Web Development from Scratch am Beispiel des Pressehandbuch Mobile.

Statistics

Views

Total Views
7,123
Views on SlideShare
5,974
Embed Views
1,149

Actions

Likes
3
Downloads
1
Comments
1

5 Embeds 1,149

http://blog.databyte.at 1128
http://www.slideshare.net 16
http://cmahr.wordpress.com 3
http://www.google.de 1
http://translate.googleusercontent.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile Web Development from Scratch Mobile Web Development from Scratch Presentation Transcript

  • 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
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • Crossmediale Produktion
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • Der Weg...
    • Erstellung Konzept
    • Endgeräte klassifiziert
    • Prototypen (z.B: HTML-Dummy)
    • GUI
    • Entwicklung
    • Testing, Testing, Testing!
    • Rollout auf dem Produktionssystem
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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
    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
  • 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
    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
  • 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
  • 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
  • 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
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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 Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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)
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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
  • 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
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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>
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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“
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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");
    }
    %>
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • 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
  • 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
  • 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
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010
  • Vertrauen
    Mobile Website Development from ScratchFH Hagenberg, 6. März 2010