Inhalt. 1 Apps HTML5 in der mobilen Webentwickung Native Apps vs. WebApps... 21

Transkript

1

2 Inhalt Inhalt Vorwort Apps Native Apps vs. WebApps WebApps allgemein Native Apps auf mobilen Geräten App Store, Google Play und Co WebApps auf mobilen Geräten Native App oder WebApp? Warum ist es sinnvoll, auf Touch-Geräten zu entwickeln? Der Mobilsektor boomt Browsertechnik auf Mobilgeräten Showcase das können HTML5-Apps HTML5 in der mobilen Webentwickung HTML5 Definition und aktueller Stand HTML als Standard HTML5 als Marketinginstrument HTML5 als Flash-Ablösung? Was HTML5 bietet Der Aufbau einer einfachen HTML5-Seite Semantische Elemente in HTML CSS3 Grundlagen und Neuerungen Was ist eigentlich CSS? Styling mit einer CSS-Datei Gestalten mit CSS Tipps und Tricks Die Neuerungen von CSS3 welche sind heute schon einsetzbar? Desktop vs. Mobile die Unterschiede Möglichkeiten und Limitationen von HTML5 auf einer mobilen Plattform

3 Inhalt Die neuen HTML- und CSS-Features in ios Von der Webseite zur WebApp Entwickeln mit JavaScript-Frameworks jquery & Co Die JavaScript-Syntax Einführung in jquery Wichtige Funktionen in jquery Nachteile von jquery Eine Alternative zu jquery Zepto.js Die Geschwindigkeit einer WebApp verbessern Kompression Die richtige Reihenfolge So wenig Anfragen wie möglich Konzeption und Gestaltungsprinzipien Touch-typisches Design in der Praxis Der feine Unterschied zwischen Berühren und Klicken Der Anwender erwartet so einiges Aufbau einer App Auf der Couch oder in der Bahn Alles eine Frage der Ausrichtung Eine App konzipieren Vorüberlegungen was genau soll meine WebApp können? Gedanken und Inhalte ordnen HTML5 als Designwerkzeug Ordnung halten mit CSS-Rastersystemen Einsatz des Less CSS Frameworks Das Raster für einen speziellen Einsatz MagazineGrid Mal was anderes als Arial Webfonts Schriften im Web Webfonts Font-Services Vor- und Nachteile von Webfonts

4 Inhalt Vorsicht! Schriften und deren Lizenzen Webschriften in Aktion Hinzufügen von Audio und Video Video Audio Animationen mit CSS CSS-Transitions und CSS-Animations Animieren mit -webkit-transition Animieren mit -webkit-animation Manipulation mit -webkit-transform Zeichnen mit JavaScript das canvas-element Erster Schritt: Canvas und Context registrieren Grundlegende Funktionen Zeichnen per Touch-Eingabe In der Praxis Canvas oder CSS? Canvas-Bibliotheken Positionsbestimmung Die Positionsbestimmung mit HTML Weitere Eigenschaften der Positionsbestimmung Die»Where to Eat«-App Position auf einer statischen Karte eintragen Interaktive Karten mit der Google Maps JavaScript API einbinden Liste der Restaurants laden und ausgeben Den Abstand zwischen zwei Koordinaten berechnen Die Programmoberfläche Eine Symbolleiste einfügen Die Restaurantliste erstellen Der letzte Schliff More Fun mit Geodaten Qype-API foursquare-api Google Places Twitter-API Flickr-API

5 Inhalt 6 Auslesen des Bewegungssensors mit JavaScript Diese Daten liefert der Bewegungssensor Vorüberlegungen zur App»Shake it like a Polaroid picture« »Shake it like a Polaroid picture«die Umsetzung Die HTML-Datei Laden eines Bildes aus dem Fotodienst Flickr via JSON Die CSS-Datei Das Laden eines Polaroids Das Sahnehäubchen eine leichte Rotation des Polaroids Offline damit eine App in jedem Winkel der Welt funktioniert Abhilfe schafft das Cache-Manifest Die Struktur der Cache-Manifest-Datei Ihre erste Cache-Manifest-Datei Wann werden welche Daten gecacht? Die Cache-Manifest-Datei im Einsatz localstorage, die Offline-Datenbank localstorage-funktionen Temporäre Speicherung von Daten im sessionstorage Die Offline-Todo-App Welche Anforderungen muss Ihre Todo-App erfüllen? Der Wireframe der Todo-App Funktionsbezogene Animation Zusätzliche EventHandler Checkliste zum Überprüfen der Offline-Fähigkeit einer WebApp WebApps mit Frameworks entwickeln Entwicklung einer WebApp mit jquery Mobile Zum heiteren Hering ein Fischrestaurant als WebApp Die Startseite

6 Inhalt Kurze Kaffeepause ein Blick hinter die Kulissen von jquery Mobile À la carte die Menüseite Implementierung einer Google-Maps-Karte inklusive Routenplanung Ein Kontaktformular mithilfe von PHP jquery-mobile-apps mit dem Themeroller und dem Interface-Builder von Codiqa noch schneller entwickeln Die Entwicklung einer App mit Sencha Touch Installation und erste Schritte mit Sencha Touch Interaktive Diagramme mit Sencha Touch Charts die Wetterstation HTML5-Tablet-Magazin mit Sencha Touch Native Anwendungen und App Stores Eine WebApp wird zur nativen Anwendung Die Vor- und Nachteile einer nativen App Die Erstellung einer nativen App mit PhoneGap (Apache Cordova) »Shake it like a Polaroid picture«die native Version Die kompilierten App-Dateien mithilfe von PhoneGap Build erstellen Apple-Zertifikate und Profile Einbinden von Zertifikat und Profil in PhoneGap Build Endlich! Das Hochladen der»shake it like a Polaroid picture«-daten Die App-Datei auf dem Endgerät installieren Icon- und App-Namen in PhoneGap Build anpassen Abschließende Worte zu PhoneGap und PhoneGap Build Eine native Magazin-App mit Laker Die Veröffentlichung einer App in einem App Store Das Veröffentlichen einer App in Apples App Store Das Veröffentlichen einer App in Google Play Publizieren der WebApp in einem Store oder als Webseite Auf den Vollbildmodus hinweisen

7 Inhalt Die Alternative zum App Store OpenAppMarket und Zeewe Weitere Möglichkeiten A Weiterführende Informationen 427 A.1 HTML5 und CSS A.2 ios, Apple A.3 Android, Google A.4 Technologie und Gadgets A.5 Digital Publishing A.6 Design und Inspiration A.7 Sonstiges A.8 Interessante Twitter-Kontakte Index

8 Kapitel 3 Konzeption und Gestaltungsprinzipien 3 Eine App weist im Normalfall eine Menge Gemeinsamkeiten mit einer klassischen Software auf. Vom Prinzip her löst sie, genau wie ein herkömmliches Programm, ein Problem. Ob dies nun die Frage nach dem aktuellen Fahrplan oder nach dem Weg zur nächsten Bank ist. Was die App allerdings z.b. von einem normalen Programm unterscheidet, sind der Einsatzort und die Bedienung. Aber das ist nur der Anfang. In diesem Kapitel lernen Sie die Eigenheiten einer Touch-Oberfläche kennen und steigen in die wichtige Konzeptionsphase einer App ein. 3.1 Touch-typisches Design in der Praxis Sie haben bisher schon einige neue HTML5- und CSS3-Definitionen kennengelernt und für einen Jaguarhai Ihre erste kleine WebApp programmiert. Dieses Kapitel wird Sie in die Theorie von App-Elementen und Benutzerschemata einführen und erläutern, was zu einer Touch-Oberfläche alles dazugehört Der feine Unterschied zwischen Berühren und Klicken Im Gegensatz zu Desktopsystemen gibt es auf Touch-Geräten keine Maus, also auch keinen Mauszeiger und somit keine linke und rechte Maustaste. Die Eingabe erfolgt mit dem Finger direkt auf dem Bildschirm. Folglich klicken Sie Elemente nicht, sondern berühren sie oder tippen sie an. Die fehlende rechte Maustaste wird durch den sogenannten»longtouch«ersetzt, bei dem der Nutzer seinen Finger für einige Sekunden auf einem Element hält. Analog zu Mausklicks haben sich folgende Begriffe durchgesetzt: Touch einfache Berührung eines Elements mit einem Finger DoubleTouch schnelles doppeltes Antippen mit einem Finger LongTouch langes Antippen mit einem Finger Das fehlende Mausrad wird durch zwei Gesten ersetzt, die horizontales und vertikales Rollen durch den Inhalt ermöglichen: 109

9 3 Konzeption und Gestaltungsprinzipien Scroll vertikales Ziehen des Fingers auf dem Bildschirm Swipe horizontales Ziehen des Fingers auf dem Bildschirm Flick schnelles horizontales Ziehen des Fingers auf dem Bildschirm Auf Multitouch-fähigen Geräten, also allen modernen Smartphones und Tablets, stehen dem Nutzer weitere Gesten zur Verfügung, die über das einfache Antippen hinausgehen: Pinch zwei Finger werden auf dem Bildschirm zueinander- oder auseinanderbewegt, um ein Element bzw. den Bildschirminhalt zu vergrößern oder zu verkleinern. Rotate zwei Finger werden auf dem Bildschirm im Kreis bewegt, um ein Element zu drehen. Auf ios-geräten haben sich außerdem folgende Gesten etabliert: 4-Finger-Swipe vier Finger werden gleichzeitig horizontal bewegt, um auf dem ipad zwischen Apps zu wechseln. 5-Finger-Pinch fünf Finger werden gleichzeitig zueinanderbewegt, um auf dem ipad eine App zu schließen. Shake das Gerät wird geschüttelt, um eine Eingabe oder eine Aktion zu widerrufen. Soweit die Theorie. Wir werden im Folgenden die englischen Begriffe verwenden, da diese als EventHandler-Bezeichnungen in JavaScript Verwendung finden. Besonders wichtig für Touch-basierte Interfaces ist, dass alle interaktiven Elemente von Beginn an für die Eingabe per Antippen konzipiert werden. Eine menschliche Fingerkuppe hat in etwa eine Grundfläche von 1 1 cm. Alle Buttons, Eingabefelder oder Checkboxen sollten daher mindestens genauso groß sein und über ausreichend Abstand zu Nachbarelementen verfügen, um Fehler beim Antippen zu vermeiden. Im Gegensatz zu einem Mauszeiger verdeckt ein Finger beim Antippen das betreffende Element fast vollständig, die Hand verdeckt dabei große Teile des restlichen Bildschirms. Aus diesem Grund klappen Menüs unter ios von unten nach oben aus der Inhalt soll sofort lesbar sein und nicht verdeckt werden. Ebenso gibt es keinen MouseOver-Zustand. Menüs, die sich bei Mausberührung öffnen, oder Tooltips mit wichtigen Hinweisen funktionieren hier nicht. In der Praxis der Bau einer Schaltfläche Aber genug der Theorie, in einem kleinen Beispiel bauen Sie mit HTML und CSS eine Touch-fähige Schaltfläche. 1. Schritt: HTML Zunächst gilt es, ein geeignetes HTML-Element für die Interaktion auszuwählen. Generell könnten Sie jedes Element mit einem entsprechenden EventHandler versehen und damit zu einer Schaltfläche machen. Die HTML-Spezifikation sieht jedoch 110

10 3.1 Touch-typisches Design in der Praxis zwei Elemente dafür vor: a und button. Den Hyperlink a verwenden Sie vor allem dann, wenn Sie von einem HTML-Dokument zu einem anderen wechseln oder innerhalb eines Dokuments zu einem Anker springen wollen. Für eine reine JavaScript- Interaktion verwenden sie das button-element: 3 <button>klick mich!</button> Abbildung 3.1 Ein HTML-Button auf dem iphone (links) und unter Android (rechts) 2. Schritt: Größe Der Button ist nun bereits klickbar, aber noch etwas klein geraten (Abbildung 3.1). Sie müssen sich schon etwas Mühe geben, um ihn mit dem Finger zu treffen. Gestalten Sie ihn daher mit CSS, um ihn auf die richtige Größe zu bringen: button { border: none; color: white; background-color: blue; font-family: sans-serif; font-weight: bold; font-size: 12px; line-height: 20px; padding: 5px 10px; -webkit-appearance: none; } Listing 3.1 Die CSS-Definitionen eines Buttons Dazu legen Sie die Schriftgröße und Zeilenhöhe auf lesbare 12 Pixel fest und geben mit padding einen großzügigen Innenabstand dazu. Sie werden sicherlich ein wenig herumprobieren müssen, bis Ihre Schaltfläche eine angenehme Größe besitzt. Anschließend entfernen Sie die graue Standardformatierung mit der Eigenschaft -webkit-appearance: none;. Jetzt können Sie Farbe und Formatierung Ihres Buttons frei vergeben. 111

11 3 Konzeption und Gestaltungsprinzipien Schon mal nicht schlecht, allerdings sieht die Schaltfläche eher wie ein blaues Rechteck aus und weniger nach einem Button (Abbildung 3.2). Abbildung 3.2 Button mit einfachem Stylesheet 3. Schritt: Klickbarkeit Damit der Nutzer sofort erkennt, dass es sich um ein interaktives Element handelt, simulieren Sie nun eine Haptik bzw. Tiefe. Dafür versehen Sie den Button mit abgerundeten Ecken, einem dezenten Farbverlauf und einem subtilen Schlagschatten (Abbildung 3.3): button { border: 1px solid blue; border-radius: 4px; background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 100%); box-shadow: 0 1px 1px #333; text-shadow: 0 1px 0 #333; } Listing 3.2 Der Button, erweitert um einen Farbverlauf Abbildung 3.3 Der finale Button 112

12 3.1 Touch-typisches Design in der Praxis Probieren Sie mit der Optik Ihres Buttons ruhig ein wenig herum, bis er Ihnen gefällt. Als Faustregel gilt: Je mehr ein Element seinem nativen Gegenstück ähnelt, desto eher wird es als solches erkannt. 4. Schritt: Feedback Im letzten Schritt fügen Sie Ihrer Schaltfläche ein visuelles Feedback hinzu: Der Nutzer soll merken, ob er eine Schaltfläche tatsächlich getroffen hat. Dafür nutzen Sie das :active-pseudoelement in CSS: 3 button:active { background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 100%); -webkit-tap-highlight-color: rgba(0,0,0,0); } In diesem Fall invertieren Sie den Farbverlauf, um den Eindruck eines»gedrückten«buttons zu erhalten. Unter ios wird per Standard ein transluzentes graues Rechteck über das Element gelegt. Um dieses zu entfernen, nutzen Sie die Eigenschaft -webkittap-highlight-color: rgba(0,0,0,0);. Auch hier gilt: Probieren Sie ein wenig mit den Eigenschaften herum, bis Ihnen Ihre Schaltfläche gefällt. Reihenfolge beachten! Generell sollten Sie bei interaktiven Elementen immer diese Reihenfolge einhalten: Zunächst wählen Sie ein HTML-Element aus, legen Größe und Aussehen fest und bestimmen dann das Verhalten, das dem Element beim Antippen zugewiesen werden soll Der Anwender erwartet so einiges Aufbau einer App Im Gegensatz zu Desktopsystemen werden Programme auf mobilen Telefonen nicht in unterschiedlich großen Fenstern, sondern stets im Vollbildmodus ausgeführt. Daher gibt es keine Symbole für das Maximieren, Minimieren oder Schließen einer App. In der Regel hat aber jede App am oberen Bildschirmrand eine, etwa einen Zentimeter hohe, Titelleiste. In dieser ist neben dem Namen der Anwendung auch noch Platz für zwei Buttons: Auf der linken Seite in der Regel eine Zurück- oder Abbrechen-Schaltfläche, auf der rechten Seite eine für Speichern oder Weiter (Abbildung 3.4). 113

13 Index Index.apk-Datei , 413.getCurrentPosition() htaccess , 309.ipa-Datei...398, 409 :active :first-child @-webkit-keyframes D-Animationen G-Verbindung Finger-Swipe Finger-Pinch A Abbuchungsvorgang...25 Abzeichen Achsenbewegungen Achsenwerte acronym...41 ActiveX-Objekt...180, 190 Adaptionsrate... 36, 69 Add Key Add2Home addclass Administratorenrechte Adobe Adobe Flash...36, 171 Adobe InDesign Adobe Photoshop... 45, 220 Adobe Typekit , 177 Adressleiste Advanced Audio Codec High Efficiency Advanced Audio Codec Low Complexity Advanced Audio Coding (AAC) AJAX Konzept Versand Ajax Spinner AJAX-Request Aktien-App Aktiengraph alert All in one Alleinstellungsmerkmal Siehe USP Android Besitzer Geräte...64 Marketplace SDK Version...30 Android Developer Android Developer Console Android Market Android Marketplace Android-Fans Animationen Animationsdurchlauf Animationsrichtung Anschnitt Anwendungsbereiche Apache...14 Apache Cordova Apache Foundation API API_KEY API-Schlüssel App Store...25 Zulassungsrichtlinien App-Datei , 409, 414 append appendto App-Framework App-Icons App-ID Apple Developer Account Apple Universal AppleID apple-touch-icon-precomposed...81 Application Loader Application-Objekt App-Schemata Array...354, 355, 367, 373, 377 aside Aside Magazine , 417 Asynchron Asynchronous JavaScript And XML attr

14 Index Audio , 402 Audio Interchange File Format Audioformate Auflösungen Automotive Agenda autoplay Autoplay-Attribut Browserentwicklung Browsermarkt...30 Browserplugin Browserspiele Bundle ID Bundle Identifier button B background-size...56, 273 Badges Baker Framework...401, 402, 403 Barcode-Scanner Base64-Format Baseline Profil Bedienanweisungen Bedienelemente... 22, 139 Bedienmuster...118, 139 Bedienoberfläche...139, 311 Bedienschema before beginpath Benutzer Benutzerablauf Benutzeroberfläche...28, 135, 144 Benutzerposition Benutzerschemata Benutzerworkflow Berners-Lee, Tim...35 Beschleunigungskurve Betriebsbedingungen Bewegung Bewegungsachsen Bewegungssensor...200, 261, 381, 388 Bezahlprozess... 25, 27 beziercurveto Bézierkurve Bildschirmauflösungen Bildschirmtastatur Bit-Raten Blackberry...30 Blindtextgenerator blur...91 Bookmark Bookmark-Funktion Bookmarklet border-radius box-shadow... 55, 58 C CACHE , 290, 291 Cache-Größe Cache-Manifest Datei Caching-Mechanismus Calhoun, David Callback-Funktion , 228, 241, 359 Camera Canvas Canvas-Bibliotheken Carousel , 117, 128, 350, 375, 376, 377 Carousel-View center...41 Certificates Siehe Zertifikat Cesar Animation Tool change...91 Checkbox...49 Claim Clear click...91 Codebasis Codecs Codiqa Codiqa Interface-Builder Comic Sans Context controls Creative-Commons CSS Befehle Rastersysteme CSS Reset CSS Effekte...53 CSS3-Definitionen CSS-Animations CSS-Transitions Cufon

15 Index D Darstellungstechnologien...30 data-add-back-btn data-back-btn-text data-icon datalist...41 data-position data-role data-tap-toggle data-theme data-transition Date.now() Dateisystem Datenbank dblclick...91 Default Layout Definitionssprache...35 Design Made in Germany Developer Account Schlüssel Zertifikat Devices Diagrammachsen Diagramme...220, 350, 361, 365, 366, 371 Dia-Shows DIN Document Object Model...86 DOM-Baum...86 DOM-Objekte Don't Listen, observe DoubleTouch Drag & Drop Droid Sans Dropdown-Feld E ease-in ease-in-out ease-out ebooks EDGE Eingabefelder Einkaufszettel Einsatzort Ein-Tasten-Telefon Elevator Pitch Elternelement Header Embed-Code Endlosschleife Entfernungsberechnung Entwickler-Account , 411 Entwurfssoftware Entwurfs-WebApp Erdradius Erfolgsmeldung Erwartungshaltung , 121, 134 Evans, Caleb EventHandler...91 EventListener...217, 303, 304, 308, 369 Ext JS Extra High Density...64 Extra Large Screen...64 F Facebook Facebook-Apps fadein...96 fadeout...96 fadetoggle...96 Fahrinfo-App Fahrstuhlfahrt FALLBACK Farben Farbenblindheit Farbtransparenzen Feed Fehlberührungen Fernbedienung FF Unit figcaption...40 figure...40 FileZilla...14 fill fillrect filltext Financial Times...27, 289, 290, 383 Fingerbewegungen Fingerkuppe first-child...49 Flash -> s. Adobe Flash Flash of Unstyled Content Flashplugin Flash-Widget Flavius Josephus

16 Index Flick Flickr...56, 155, 260, 261, 265, 269, 270, 274, 275, 276, 384 Account Feed Fotostream ID Flickr-API , 260 Flugmodus focus...91 font...41 Font-Service font-size FontSquirrel font-style font-weight footer Formelemente Formular Formulardaten Formvalidierung Förster-App Fotogalerie-App FOUC foursquare foursquare-api Frage-Antwort-App frame...41 Frame-Raten Framework Franchise FTP-Server...14 Fullscreen-Option Funkloch Funktionsbeschreibung Für Web und Geräte speichern , 103 Fußzeile Gerätehardware Geschlossene Systeme Geschwindigkeitszuwachs Gestaltungsprinzipien Gesten... 28, 110, 121 getcontext getjson...98, 331 Git Git Repository Gittermodel Siehe Wireframes Global Positioning System Google Analytics Google Checkout Google Loader Google Mail...21, 22 Google Maps Google Maps JavaScript API , 247 Google Music Google Places Google Play Google Web Font Directory Google Web Fonts google.maps.marker Google-Places-API GPS Abfragen Empfänger Koordinaten Graphen Gravitation Greenwich Grid-Elemente Grundlinienraster GUI-Template Gummibandeffekt Gutenberg Gutters G Game-Engines GDlib Gebühr Geodaten Geofunktionen Geolocation Geolocation-App Geoposition Georgia H H Halbmobil...122, 126, 134 Hallo Welt... 84, 352 Handskizze Handysendemasten Haptik Hardwarebeschleunigt Hardwarefunktionen Hardwarekomponenten

17 Index Hauptpfad Header header Helvetica Hewlett-Packard...30 HEX...45, 56 Hey Ya hide...96 High Density Hilfslinien Hintergrundbild... 42, 57 Hintergrundfarbe Hintergrundmusik , 193 Hintergrundmuster Hintergrundprozess Hirnströme Home-Bildschirm Home-Button Hörsaal hover...66, 91 HTC htdocs HTML Formularfeldtypen Showcase HTML5 Developer Plattform HTML5-Apps HTML-MP3-Player Hybridkarte Hyperlink...35 Hypertext...35 Hypertext Markup Language...35 I Icon Icon Sweets iconmask id IDC iframe ImageMagick ImageOptim Infobox Infokasten Inhaltsverzeichnis initial-scale innerheight...86 innerwidth...86 input...40 Instagram Instant Messenger Integer Interaktive Google-Karte Interaktivität Interface-Builder Interface-Elemente Interface-Framework Interfaces...110, 114, 119 Internet Explorer...30 Internettraffic...30 Internetverbindung Intros Investor ios Provisiong Portal ios Provisioning Portal ios-shake ios-style IP-Adresse iphone Mockup itunes Connect , 408, 409, 410, 411 App J Java JavaScript Frameworks...88 Konsole...89 Syntax JavaScript-Interaktion jcanvas JPEG jplayer jqplot jqtouch jquery...88 Objekt Plugins jquery Mobile JSON...241, 269, 270, 271, 328 API Aufruf Callbacks Feed Feeds Format ,

18 Index Objekt Validator JSON-Datei JSON-Format...98 JSONLint JSON-Objekt JSONP-Request JSONStore K Kamera , 385 Kameraaufruf Karte...204, 230 Ausschnitt , 238 dynamische...232, 240 interaktive Kartenmaterial statische Typ Karussell keydown...91 Keyframe , 201, 306 keygen...41 keypress...91 keyup...91 Kill-Switch...27 Klassen...46, 49 verschachtelte Klassendefinitionen Klassennamen Kollektion Kolumnentitel Kommandozeilentool Kommunikationskonzept Kompass Komplex-Symbiotisch Konkurrenz Konstruktor Kontaktformular Kontaktliste Kontaktseite Kontraste Konverter Konzeption , 134 Kopfzeile Korpi, Joni L Ladebalken Ladebildschirm Ladekreis Ladezeiten Laker Compendium Laker Starter Pack Landscape-Modus...64 Large Screen...64 Lastenheft Latitude Launch-Funktion , 353, 374 Lautstärketasten Leckerli One Lehni, Jürg Leonello, Chris LESS CSS Less CSS Framework Lichtverhältnisse Lifestyle-Magazin Lifestyle-Parameter linear lineto lipsum Liste...325, 333 Listeneinträge Listenelemente Listenrand listview Lizenz load localstorage , 295, 303, 304, 305 Lokale Suchmaschine Lokaler Speicher Longitude LongTouch Low Density...64 LTE M Magazin Magazin-App MagazineGrid Magazin-Frameworks Magazinlayout Magazin-Mashup Magic Land

19 Index Magnetresonanztomograf mail manifestr mark...40 Marker Markierungsstile Marktforschung Marktumfeld...135, 136 Mashup Master-Detail maximum-scale Media Queries Medium Density...64 Mehrspaltigkeit Meta-Tags meter...41 Microblogging-Service... 31, 258 Microsoft Visio Midi-Kompositionen Mikrofon... 28, 382 Miro Video Converter Mitbewerber-Apps Mobilbereich...35 Mobile Layout , 157 Mobile Safari...31, 69, 73 Mobile WebKit Mobilgerät Model-View-Controller Module Motorola mousedown...91 mousemove...91 MouseOver mouseup...91 MOV moveto MP MPEG-4-Standard Multimedia-Anwendungen Multimedia-Element Muster MySQL...14, 294 N Native Anwendungen Native Apps Nachteile Vorteile navbar Navigationselemente Navigationsgerät Navigationsleiste , 320 Navigationssystem navigator.geolocation Netbook Netscape...30 NETWORK Newsticker Nirvana Nokia Nokia Communicator Normal Screen...64 Noticia Text Notizen Nutzer-Flow Nutzerforen Nutzertest Nutzerverhalten Nutzerzentriertes Design O Objective C , 402 off Offline...123, 287, 296 Offline-Apps Offline-Datenbank Offline-Modus OGG Audio OGG Theora OmniGraffle on ondevicemotion...262, 263 opacity Open Source...31 Open Type Format OpenAppMarket Open-Source-Framework Opera...30 Orientierung outer margins Outkast output...41 Overlays

20 Index P p Pagina Palm...30 panel Paper.js Papierprototypen Performancevorteil Pflichtenheft PhoneGap Plugins PhoneGap Build PHP , 342, 343, 344, 345 Pinch Pixelraster Pixelverdopplung placeholder-attribut Plattformen...30 Android...30 ios...30 Plattformunabhängig...22 Playbook...30 Play-Pause-Button Plugin PNG PNG PngOptimizer , 103 Polaroid Portrait-Modus Position... 42, 123 position.coords.accuracy position.coords.altitude position.coords.altitudeaccuracy position.coords.heading position.coords.speed position:fixed...73 Positionierung Positionsabfrage Positionsbestimmung Positionsdaten Positionssensor poster Post-Its Präfixe...53 prepend preserve-3d Privater Schlüssel Profil Programmiersprachen Programmierung progress...41 Prototypen Provisioning Provisioning Portal Provisioning Profil Pseudomobil , 134 Public APIs...94 Publikation Puckey, Jonathan Pupillenbewegungen Pythagoras Q Querverweise Qype Qype-API R Radio-App Radiobutton...49 Raster Rastersystem Reason Why Rechner wissenschaftlicher Red Bull Registerreiter Regularien...27, 382 Reliefkarte remove...96 removeclass...94 Reset Retina-Displays RGB RGBA...56, 58 Rollball root Rotate rotate rotatey Rot-Grün-Schwäche Route Routenplanung , 340 Rundungsfehler

21 Index S Samsung Sandbox-Model Satelliten Satellitenkarte Schablonen Methode Schadsoftware Schaltfläche , 139 Schlagschatten Schlüssel , 294, 392, 393, 395, 396 Schlüsselbilder Schlüsselbund Verwaltung Schriftart Schriftdarstellung Schriften...169, 178 Schriftgestaltung Schriftgröße Schriftschnitte Schriftstile Schüttelgeste Scroll Scrollverhalten...67, 74 Seitenwechsel Selection Colours Selektionsfarben Selektoren Sencha Touch Syntax Sencha Touch Charts Serien Seriennummer Serververbindungen sessionstorage settimeout Shake-Event Sharky Shazam...23 Shoji Ansicht show...96 Sicherheitsbedenken sifr Signale Signing Silbentrennung Situation Situationsbeschreibung Skin Skriptsprache SKU-Nummer slidedown...96 Slider Slideshow slidetoggle slideup...96 Small Screen...64 Smaller Smartcover Social-Network-Anwendungen Soft-Hyphen Softwareentwicklung Softwareschema Sonnenlicht Sounddateien Soundeffekte Spalten Spiele...118, 127, 219 Splash Screen Spotlight-Suche Stadtführer Standardlayout Standardstile Startbildschirm Static Maps API Statusleiste Stern-App Store-Betreiber Storyboard Storyboard-Methode Straßenkarte String strip_tags stroke Stylesheet submit...91 Subtle Patterns...70, 317 Suchmaschinen...40 Surfer-App SVG Swipe Symbian Symbolleiste...247, 248, 249 Systemschriften

22 Index T Tablet...30 Android...30 Apps Bildschirm ipad...30 Magazine Markt...30 Playbook...30 Tablet Layout Tablet-Magazin Tabs...114, 123, 350 Tageslicht Tags Teehan+Lax Testablauf Testlabor Testperson Testsituation Texteingabefeld Texturen The Noun Project Themeroller Themes time...40 Times New Roman Tippen Titelleiste...113, 130 Titelzeile Todo-App Todo-Liste , 296, 297, 304 toggle toggleclass Ton Toolbar toolbar...354, 373 Tooltip Tooltips... 66, 110, 220 Touch Touch Charts , 366, 371 Touch-Geräte , 134 Touch-Geste touchicon Touch-Oberfläche Touchscreen touchstart Transformation Triangulieren Trojaner...27 Tutorial-Ansicht Tweets Twitter...31, 118, 193, 258 Twitter Pitch Twitter-API Typografie U U-Bahn Übertragungsgeschwindigkeit UDID UglifyJS UI Stencils Umfragen Umgebung Unique Selling Proposition Siehe USP Updatezyklus Usability-Labore Userflow user-scalable USP UTF , 172 V var...86 Vektorformate Vektorgrafiken Verbindungsgeschwindigkeit Verdana Verlaufsgenerator Versionen Verwendungsort video Viewport...78, 82, 132, 375, 377 Vimeo Viren Vollbild Vollbildmodus Vollbildvideos Vollmobil Vorüberlegungen

23 Index W W3C-Konsortium Wave Wave-Dateien WebApp-Store Webfonts WebGL...68 WebKit...31, 35, 53, 196 -webkit-animation webkit-animation-delay webkit-animation-direction webkit-animation-duration webkit-animation-fill-mode...203, 308 -webkit-animation-iteration-count webkit-animation-name webkit-animation-timing-function webkit-appearance webkit-backface-visibility webkit-linear-gradient webkit-overflow-scrolling webkit-tap-highlight-color webkit-transform , 281 -webkit-transform-style webkit-transition Webmailer...22 webos... 30, 391 Webschriften Webserver Webspace Werkzeugleiste Werteinhalt Wertepaar , 294 Werteschlüssel Wetter-API Wetter-App , 361 Wetterdaten Wetterdiagramm Wetterstation Where to Eat Wide Mobile Layout Wildcards window...86 Windows Phone...11, 33, 141, 382, 383, 390 Wireframe Model Wireframes Workflow World Weather Online X X-Achse XAMPP...12 Control Panel Installation...12 Netzwerkkonfiguration...14 Server...20 Xcode XMLHttpRequest xtype Y Y-Achse Yanone Kaffeesatz YouTube Z Z-Achse Z-Beschleunigung Zeewe Zeichen-App Zeichensatz Zeichnen...208, 216 Zeitschriftenabo ZEN Player Zepto.js Zertifikat Developer...391, 392, 395 Zielgerät Zielgruppe Zielgruppenanalyse Zielgruppenvertreter z-index Zoombutton Zoomstufe ZooTool...33 Zufallsfunktion Zufallszahl Zulassungsrichtlinien App Store Zulassungsverfahren Zum Home-Bildschirm Zurück-Button Zwitschern