• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Web Development from Scratch
 

Mobile Web Development from Scratch

on

  • 6,597 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
6,597
Views on SlideShare
5,531
Embed Views
1,066

Actions

Likes
3
Downloads
1
Comments
1

5 Embeds 1,066

http://blog.databyte.at 1045
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

11 of 1 previous next

  • 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