jquery mobile kompakt - das kompendium - über 150 seiten (typovision)

Click here to load reader

Post on 19-May-2015

22.969 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

jQuery Mobile ist das führende Framework zur Erstellung von mobilen Websites. Das über 150 Seiten umfassende Kompendium behandelt alle Elemente der aktuelle Version 1.1.0 und führt mit zahlreichen Beispielen und Code-Examples umfassend in die Verwendung ein.

TRANSCRIPT

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILEKompakt

    16.05.2012

    Patrick Lobacher (GF typovision GmbH)

    1

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EINFHRUNGin jQuery Mobile

    2

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DAS MOBILE WEB - MYTHEN

    Es gibt kein mobiles Web - es gibt nur das Web ansich?!

    Man bentigt keine spezielle Anpassung fr das mobile Web?!

    Eine Website sollte auf allen Zugangsgerten funktionieren?!

    Um eine mobile Website zu erstellen, gengt es mit einer Breite von 240px zu arbeiten?!

    => Neue Herausforderungen im mobilen Bereich

    3

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    MOBILE LSUNGEN

    4

    Native App

    (eigener Code fr alle Plattformen)

    Hybride App

    (Web-Technologie eingebettet in nativem Rahmengerst)

    Web App

    (speziell optimierte Applikation bestehend aus Web-

    Technologie)

    Kompatible Website

    (Keine Anpassung)

    Optimierte Website

    (Viewport, BuildIn, ...)

    Mobile Framework

    (Web-Technologie, optimiert fr alle Zugangsgerte)

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    MOBILE FRAMEWORKS

    5

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    WAS IST JQUERY MOBILE

    Was ist jQuery Mobile?

    jQuery Mobile: Berhrungsoptimiertes Web Framework fr Smartphones & Tablets

    A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

    progressive enhancement graceful degradationProgressive Verbesserung wrdevolle Herabstufung

    6

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE - PROGRESSIVE

    Progressive Enhancement?

    Basis-Inhalte sind von allen Browsern zugnglich

    Basis-Funktionalitten sind von allen Browsern zugnglich

    Der Inhalt wird in semantischem Markup abgebildet

    Erweitertes Layout wird ber extern verlinkte CSS-Dateien zur Verfgung gestellt

    Erweiterte Funktionen werden ber extern verlinkte, unaufdringliche JS-Dateien realisiert

    7

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    WAS IST JQUERY MOBILE NICHT

    Was ist jQuery Mobile NICHT? jQuery Mobile ist keine jQuery-Alternative fr mobile Browser

    Um jQuery Mobile zu benutzen, muss das jQuery Framework eingebunden werden. Es ist kein Ersatz, sondern ein UI-Layer auf Basis von jQuery

    jQuery Mobile ist kein Webapp-SDK Man kann damit natrlich komplette Web-Apps erstellen - die allerdings

    erst mit Hybrid-Frameworks wie PhoneGap nativ werden

    jQuery Mobile ist kein Framework fr JavaScript Liebhaber Ausser fr erweiterte Themen, wird kein JavaScript bentigt

    jQuery Mobile ist NICHT die Lsung fr ALLE mobile Applikationen, Websites oder Spiele

    Aber fr die meisten :-)

    8

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE GESCHICHTE

    Erfunden 2010 vom Team rund um Jon Resig ( jQuery Team)

    John Resig, JavaScript Tool Entwickler fr die Mozilla Corporation (@jeresig auf Twitter)

    Dual Lizenz: GPL oder MIT

    jquerymobile.com

    Aktuelle Version: 1.1.0 (13.04.2012)

    Gre: 19 KB (130 KB)

    (Gre jQuery: 32 KB / 247 KB - Gesamt: 51 KB / 377 KB)9

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE FEATURE

    jQuery Mobile Feature List

    Cross platform, cross device, and cross browser

    UI optimized for touch devices

    Themeable and customizable design

    Usage of nonintrusive semantic HTML5 code only, without the need of any Java-Script, CSS, or API knowledge

    AJAX calls automatically to load dynamic content

    Built on the well-known and supported jQuery core

    Lightweight size, 12Kb compressed

    Progressive enhancement

    Accessibility support (http://www.w3.org/TR/wai-aria/)

    10

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE KOMPATIBILITT

    11

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE KOMPATIBILITT

    12

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    HTML5

    jQuery Mobile verwendet einige der HTML5/CSS3-Features direkt und kann mit folgenden gut integriert werden:

    Offline access Offline storage Web sockets Geolocation access Accelerometer and gyroscope support Animations 2D and 3D transformations Gradients and visual effects Viewport management (for zooming support inside the browser) Webapp installation metadata Integration with native applications Multimedia support Graphic drawing (vector and bitmap)

    13

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EMULATOREN

    http://www.mobilexweb.com/emulators

    z.B. Android: http://developer.android.com/sdk/index.html

    Download

    Start der Datei android im Verzeichnis tools

    Download der Updates

    Tools > Manage AVDs

    NIE ohne Endgert oder Emulator testen!!14

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    GETTING STARTEDJetzt gehts los :-)

    15

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE EINBINDEN

    Download von http://jquerymobile.com/download/

    Einbindung von LATEST (nur zu Testzwecken):

    16

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    HTML5-GRUNDGERST

    Basis HTML

    Titel

    17

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    META-DATEN

    Angaben fr den Viewport

    width = Wert in Pixel oder device-widthinitial-scale = Wert der initialen Skalieren (1.0 fr normal)maximum-scale = Wert fr die maximal mgliche Skalierungminimum-scale = Wert fr die minimal mgliche Skalierunguser-scalable = Angabe, ob der User berhaupt skalieren darf

    Angaben zum Fullscreen-ModusFullscreen Modus - kein Bottom-Controls und kein URL-Feld mehr - kann per JS ber window.navigator.standalone abgefragt werdenFarbe der Status-Leiste oben - diese kann nicht ausgeblendet werden

    18

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    WEBCLIPS ICON

    Fr alle Icon-Gren und/oder Devices mssen eigene Angaben gemacht werden:

    => iPhone/iPod: 320460 / iPad Portrait: 7481004 / iPad Landscape: 7481024(rotated 90 degrees)

    19

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    RESPONSIVE LAYOUTS MIT JQM

    Media-Queries z.B. um die Orientierung zu befragen:@media (orientation: portrait) { /* Code hier fr die Orientierung Portrait... */}@media (orientation: landscape) { /* Code hier fr die Orientierung Landscape... */}

    => http://www.w3.org/TR/css3-mediaqueries/

    Beim Orientierungswechsel kann es in iOS-Gerten dazu kommen, dass der Zoom nicht mehr stimmt (iOS Bug) - dafr gibt es zwei Lsungen:

    Abschalten des Zooms

    Dynamisches Neuberechnen des Zoomshttp://adactio.com/journal/4470/

    20

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    RESPONSIVE LAYOUTS MIT JQM

    Beispiel: Label neben Formularelemente im Landscape Mode:@media all and (min-width: 450px){2 label.ui-input-text { display: inline-block; }}

    => http://www.w3.org/TR/css3-mediaqueries/

    Abfrage von iOS Retina [email protected] screen and (-webkit-min-device-pixel-ratio: 2){ // iOS Rentina Display}

    Abfrage der Media Queries ber jQuery// Test auf Screen Media Type$.mobile.media("screen");

    // Test auf min-width$.mobile.media("screen and (min-width: 480px)");

    // Test auf iOS Retina Display$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");

    21

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    ARCHITEKTUR

    Cards & Roles

    Idee kommt von WML: Eine oder mehrere Zielseiten befinden sich in einem HTML-Dokument

    Eine Seite ist ein DIV-Element mit einer spezielle Rolle Zugehriges Attribut ist data-role (In HTML5 gibt es die data-* Attribute um spezielle, eigene

    Auszeichnungen zu vergeben - custom data attributes) Vorteil: Funktioniert auch auf Non-HTML5-Browser

    22

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    ARCHITEKTUR - ROLLEN

    23

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    SEITENSTRUKTUR

    data-role ist NICHT