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

(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

EINFHRUNGin jQuery Mobile
2

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

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)

MOBILE FRAMEWORKS
5

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

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

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

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

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

JQUERY MOBILE KOMPATIBILITT
11

JQUERY MOBILE KOMPATIBILITT
12

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

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

GETTING STARTEDJetzt gehts los :-)
15

JQUERY MOBILE EINBINDEN
Download von http://jquerymobile.com/download/
Einbindung von LATEST (nur zu Testzwecken):
16

HTML5-GRUNDGERST
Basis HTML
Titel
17

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

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

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

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

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

ARCHITEKTUR - ROLLEN
23

SEITENSTRUKTUR
data-role ist NICHT

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

Technology

jQuery in TYPO3 nutzen

JQuery Maya Kindler 5c. Entwickler/ Autor John Resig hat jQuery entwickelt. jQuery ist eine Javascript Bibliothek die das programmieren in Javascript

Airnergy kompendium

Agenturpräsentation typovision GmbH

jQuery - newbooks- · PDF file jQuery - newbooks-services.de ... Für

BIOS Kompendium 5.0

Radiation Kompendium

Cloe Kompendium 2014

TYPO3 4.6 - Die Neuerungen (typovision*)

Einbindung externer Webseiten via Javascript/jQuery

Kompendium Orthopädie

Java script data binding mit jQuery Mobile

JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“

Plain jQuery Mobile vs. APEX jQuery Mobile Smartphone · PDF fileDipl.-Inf. Oguz Ibram Prof. Dr. Petra Sauer Plain jQuery Mobile vs. APEX jQuery Mobile Smartphone vs. APEX Desktop

jQuery für Anfänger

jQuery Mobile

IT Kompendium

Stichwortverzeichnis „jQuery“files. · PDF file – jQuery Mobile 402 Dokumentationstools 17 DOM 23, 45 DOM Inspector 20 done – animate() 288 DOT-Notation 181 Download – jQuery

jQuery Mobile mit TYPO3

Kompendium Test