CSS Profis und Website mit jQuery
=================================
Da Webseiten für Mobilphone auf deren Hardware- und andere Eigenschaften reagieren müssen,
kann eine Desktop-Webseite nicht als Mobil-Webseite herhalten.
Man kann die Webseite komplett neu erstellen indem ein Framework (Baukasten) benutzt wird,
das u.a. Bibliothelen eben für die Mobilphone-Eigenschaften hat.
CSS Profis und Website mit jQuery
Falls Sie selbst oder jemand aus Ihrem Bekanntenkreis mit CSS vertraut ist, können Sie für
die mobile Ansicht in einer eigenen CSS-Datei anlegen.
Die Bearbeitung der CSS-Datei wird Ihnen beispielweise beim Baukasten von Webvisitekarte.net gestattet.
Je nach Medientyp verweisen Sie im HTML-Header der Website dann auf ein anderes Stylesheet:
Professionelle Seitenbetreiber mit Programmierkenntnissen sollten für die mobile Website
einen Frameworkt, das das Javascript-Framework JQuery Mobile (http://jquerymobile.com/) umfasst,
verwenden, das speziell für mobile Websites entwickelt wurde.
Es gibt zig andere Javscript-Frameworks, die spezielle Bedürfnisse z.B. im Layout bedienen können.
Einen Universal-Framework gibt es nicht.
Konzeption der Touch-Events
===========================
Nachfolgend eine Kurzbeschreibung
touch-Events emmulieren die Maus auf mobilen Geräten mit Touchscreen und sind das Äquivalent zu den click-Events der Maus.
Zur Behandlung von Rvents von Eingabegeräten wie einen Pen: siehe Konzeption der Pointer-Events.
Click-Events reagieren auch auf die Berührung des Fingers, denn so erwarten wir das: Ein Link und das Absenden eines
Formulars müssen auf dem Tablett und dem Smartphone genauso auf den Finger reagieren, wie am Desktop auf die Maus.
In den meisten Anwendungen muss also kein gesondertes touch-Event für mobile Geräte einsetzt werden. Bei Anwendungen NUR
für mobile Geräte macht es Sinn, Maus-Events genauer zu betrachten und durch touch-Events zu ersetzen.
touchstart entspricht mousedown
touchend entspricht mouseup
touchmove entspricht mousemove
touchcancel entspricht nichts
document.getElementById('firstc').ontouchstart = function (eve) {
this.innerHTML = 'Touch Down!';
}
document.getElementById('secc').onclick = function (eve) {
this.innerHTML = 'Clicked!';
}
Definitions
-----------
Surface
The touch-sensitive surface. This may be a screen or trackpad.
Touch point
A point of contact with the surface. This may be a finger (or elbow, ear, nose, whatever, but typically a finger) or stylus.
Interfaces
----------
TouchEvent
Represents an event that occurs when the state of touches on the surface changes.
Touch
Represents a single point of contact between the user and the touch surface.
TouchList
Represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time.
Touch events consist of three interfaces (Touch, TouchEvent and TouchList) and the following event types:
touchstart - fired when a touch point is placed on the touch surface.
touchmove - fired when a touch point is moved along the touch surface.
touchend - fired when a touch point is removed from the touch surface.
touchcancel - fired when a touch point has been disrupted in an implementation-specific manner (for example, too many touch
points are created).
The Touch interface represents a single contact point on a touch-sensitive device. The contact point is typically referred to
as a touch point or just a touch. A touch is usually generated by a finger or stylus on a touchscreen, pen or trackpad.
A touch point's properties include a unique identifier, the touch point's target element as well as the X and Y coordinates
of the touch point's position relative to the viewport, page, and screen.
The TouchList interface represents a list of contact points with a touch surface, one touch point per contact. Thus, if the user
activated the touch surface with one finger, the list would contain one item, and if the user touched the surface with
three fingers, the list length would be three.
The TouchEvent interface represents an event sent when the state of contacts with a touch-sensitive surface changes. The state
changes are starting contact with a touch surface, moving a touch point while maintaining contact with the surface,
releasing a touch point and canceling a touch event. This interface's attributes include the state of several modifier
keys (for example the shift key) and the following touch lists:
touches - a list of all of the touch points currently on the screen.
targetTouches - a list of the touch points on the target DOM element.
changedTouches - a list of the touch points whose items depends on the associated event type:
For the touchstart event, it is a list of the touch points that became active with the current event.
For the touchmove event, it is a list of the touch points that have changed since the last event.
For the touchend event, it is a list of the touch points that have been removed from the surface (that is, the set of
touch points corresponding to fingers no longer touching the surface).
Together, these interfaces define a relatively low-level set of features, yet they support many kinds of touch-based interaction,
including the familiar multi-touch gestures such as multi-finger swipe, rotation, pinch and zoom.
// Register touch event handlers
someElement.addEventListener('touchstart', process_touchstart, false);
someElement.addEventListener('touchmove', process_touchmove, false);
someElement.addEventListener('touchcancel', process_touchcancel, false);
someElement.addEventListener('touchend', process_touchend, false);
// touchstart handler
function process_touchstart(ev) {
// Use the event's data to call out to the appropriate gesture handlers
switch (ev.touches.length) {
case 1: handle_one_touch(ev); break;
case 2: handle_two_touches(ev); break;
case 3: handle_three_touches(ev); break;
default: gesture_not_supported(ev); break;
}
}
// Create touchstart handler
someElement.addEventListener('touchstart', function(ev) {
// Iterate through the touch points that were activiated
// for this element and process each event 'target'
for (var i=0; i < ev.targetTouches.length; i++) {
process_target(ev.targetTouches[i].target);
}
}, false);
// touchmove handler
function process_touchmove(ev) {
// Set call preventDefault()
ev.preventDefault();
}
Konzeption der Pointer-Events
=============================
touch-Events emmulieren die Maus auf mobilen Geräten mit Touchscreen und sind das Äquivalent zu den click-Events der Maus.
Zur Behandlung von Rvents von Eingabegeräten wie einen Pen ist das Konzept der Pointer-Events heranzuziehen.