XHTML MP Mobile Internet Axel Reusch ar047 MIB
Agenda Was ist XHTML MP Prinzip Funktionsweise WTAI Vorteile Nachteile Quellen Seite 2
Untermenge von XHTML (aktuell XHTML 1.1) Strikteres HTML (alle Tags erlaubt) Richtlinie XML Was ist XHTML MP Übermenge von XHTML Basic Keine grafischen Elemente (<font>,<b>, ) Keine StyleSheets, Frames, Scripting Optimiert für mobile Endgeräte XML HTML Mobile Profile Seite 3
Regeln Wohlgeformtheit Geschlossene Tags Tags & Attribute klein geschrieben Attributwert in Anführungszeichen Einbettungen Was ist XHTML MP Ziel Technologien zur Entwicklung mobiles Internet und www zusammenbringen Seite 4
Was ist XHTML MP Definiert durch WAP 2.0 (Wireless Application Protocol) Spezifikation mobiler Services Durch Open Mobile Alliance Da Subset von XHTML auch auf PC lesbar Nutzt StyleSheets WCSS (WAP CSS Simplifizierung von CSS2) Nutzt Scriptsprachen Client-seitig: EcmaScript MP (vgl. JavaScript) Serverseitig wie gewohnt JSP, PHP Seite 5
Was ist XHTML MP Browser für mobile Geräte Mobile Safari iphone, ipod touch Opera Mobile Symbian OS, Windows Mobile Opera Mini J2ME kompatible Handys Mozilla Minimo Maemo, Windows Mobile Doris Browser Symbian OS Seite 6
Was ist XHTML MP Scriptsprachen PHP, ASP, JSP, Perl EcmaScript XHTMLMP Server Client Seite 7
Was ist XHTML MP Simples Beispiel: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/dtd/xhtml-mobile12.dtd"> <html> <head> <title>xhtmlmp ole </title> </head> <body> <p>test</p> </body> </html> Endungen.xhtml,.html,.htm typisch Seite 8
Was ist XHTML MP Simples Beispiel: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/dtd/xhtml-mobile12.dtd"> <html> <head> <title>xhtmlmp ole </title> </head> <body> <p>test</p> </body> </html> XML Deklaration da XHTMLMP XML-Spezifikation entspricht Seite 9
Was ist XHTML MP Simples Beispiel: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/dtd/xhtml-mobile12.dtd"> <html> <head> <title>xhtmlmp ole </title> </head> <body> <p>test</p> </body> </html> DTD definiert erlaubte Syntax Seite 10
Was ist XHTML MP Simples Beispiel: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/dtd/xhtml-mobile12.dtd"> <html> <head> <title>xhtmlmp ole </title> </head> <body> <p>test</p> </body> </html> Vgl. HTML Elemente <html>, <head>, <title>, <body> Pflicht Seite 11
Was ist XHTML MP Simples Beispiel: Seite 12
Was ist XHTML MP Vorgänger WML (Wireless Markup Language) > XHTMLMP WMLScript > ECMAScript WML Fehlende Funktionen in XHTML MP Können aber anderweitig implementiert werden (z.b. Timer, ) Seite 13
Was ist XHTML MP WML Beispiel <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/dtd/wml13.dtd"> <wml> <card id="card1" title="wml buh"> <p> WML<br/> ist alt!</p> </card> </wml> Seite 14
Was ist XHTML MP WML Beispiel <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/dtd/wml13.dtd"> <wml> <card id="card1" title="wml buh"> <p> WML<br/> ist alt!</p> </card> </wml> wml-tags Wurzel-Element Seite 15
Was ist XHTML MP WML Beispiel <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/dtd/wml13.dtd"> <wml> <card id="card1" title="wml buh"> <p> WML<br/> ist alt!</p> </card> </wml> Cards Typisch WML alle Cards -> deck immer 1 card pro Screen id zum anspechen Seite 16
Was ist XHTML MP WML Beispiel <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/dtd/wml13.dtd"> <wml> <card id="card1" title="wml buh"> <p> WML<br/> ist alt!</p> </card> </wml> Allgemein WML eigene Auszeichnungssprache Besonderheiten (Cards, WMLScript, WBMP, ) Seite 17
Was ist XHTML MP WML Beispiel Seite 18
Prinzip XHTMLMP WCSS Server Client Seite 19
Prinzip Vereinfachte StyleSheet-Datei CSS > WCSS (Wireless CSS) Für Präsentation Trennung Content, Struktur und Design Styles auch direkt in XHTML MP XHTMLMP WCSS Server Client Seite 20
Prinzip XHTMLMP WCSS 2 WCSS WCSS 3 Server Client Seite 21
Prinzip Mehrere WCSS Files Benötigt Identifikation des Endgeräts Serverseitiges Script zur Zuordnung JSP, Perl, PHP, ASP <head> <link href="diffclients.jsp" rel="stylesheet" type="text/css"/> XHTMLMP </head> WCSS 2 WCSS WCSS 3 Server Client Seite 22
Prinzip Script (zb JSP ) XHTMLMP WCSS 2 WCSS WCSS 3 Server Client Seite 23
<meta>-tags für CacheControl, Refresh, Weiterleitung Funktionsweise Wenn keine meta-unterstützung Endgerät keine Beachtung <meta http-equiv= Cache-Control content= max-age=300 /> 300 Sekunden Cache Expiry <meta http-equiv= Cache-Control content=no-cache /> <meta http-equiv= refresh content= 15 /> Refresh 15 Sekunden <meta http-equiv= refresh content= 15;URL=anotherPage.xhtml /> Sprung zur Seite nach 15 Sek. Seite 24
Scripting Teil 2/2 <! HEAD --> <body> <form name="form1" action="" method="post" > <div id="testfeld"> </div> <select name="sel" > </select> </form> </body> </html> Mit Klick auf Selection Test starten!<br/><a href="http://www.hdmstuttgart.de accesskey= 1 >HdM</a><br/> <option value="1" onclick="compute()">test</option> Link (accesskey!) Funktionsweise Seite 25
Scripting Teil 2/2 <! HEAD --> <body> <form name="form1" action="" method="post" > <div id="testfeld"> </div> <select name="sel" > </select> </form> </body> </html> Mit Klick auf Selection Test starten!<br/><a href="http://www.hdmstuttgart.de accesskey= 1 >HdM</a><br/> <option value="1" onclick="compute()">test</option> Aufruf ECMAScript Funktionsweise Seite 26
Funktionsweise Scripting Teil ½ <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/dtd/xhtml-mobile12.dtd"> <head> <link href="nokia.css" rel="stylesheet" type="text/css"/> <title>xhtmlmp ole</title> <script type="text/javascript"> function Compute(){ var string; Now = new Date(); Std = Now.getHours(); </script> </head> <! BODY --> Min = Now.getMinutes(); Sec = Now.getSeconds(); string="test bestanden um "+Std+":"+Min+":"+Sec+" Uhr!"; document.getelementbyid("testfeld").innerhtml=string;} Script zur Ermittlung aktueller Zeit + String-Rückgabe Seite 27
Funktionsweise Scripting Seite 28
WTAI Wireless Telephony Application Interface Auf Funktionen des Handys zugreifen über WAP- Programme Anrufen Kontakt in Telefonbuch eintragen Tonsignale schicken WML und XHTMLMP z.b. Anruf eines Mitarbeiters direkt über Link Seite 29
WTAI Beispiel <p align="center">telefon Mitarbeiter Mister X: </p> <a href="wtai://wp/mc;0711123456"> 0711-12 34 56 </a> <br/> <a href="wtai://wp/ap; 0711123456;Mister X"> </a> Zum Adressbuch hinzufügen Seite 30
WTAI Beispiel <p align="center">telefon Mitarbeiter Mister X: </p> <a href="wtai://wp/mc;0711123456"> 0711-12 34 56 </a> <br/> <a href="wtai://wp/ap; 0711123456;Mister X"> </a> Zum Adressbuch hinzufügen Mc = Anruf wird getätigt WTAPublic.makeCall( nummer ) Seite 31
WTAI Beispiel <p align="center">telefon Mitarbeiter Mister X: </p> <a href="wtai://wp/mc;0711123456"> 0711-12 34 56 </a> <br/> <a href="wtai://wp/ap; 0711123456;Mister X"> </a> Zum Adressbuch hinzufügen Ap = Kontakt ins Adressbuch einfügen WTAPublic.addPBEntry( nummer,name ) Seite 32
WTAI Beispiel <p align="center">töne senden: </p> <a href="wtai://wp/sd;0123456789*#abcd >Die Unvollendete </a> Sd = Tonsignal senden WTAPublic.sendDTMF( tonsequenz ) Erlaubte Zeichen s.o. Seite 33
WTAI Keine Panik beim Klick auf Links! WTAI fragt vor Ausführung der Aktion immer per Messagebox nach Seite 34
Größter Vorteil: Vorteile Gleiche Technologien zur Entwicklung für mobile und normale Entwicklung von Internetseiten Einfacher Umstieg von HTML, xhtml Keine eigenen Entwicklungstools notwendig Simple Anpassung vorhandener Seiten auf XHTMLMP Seite 35
Nachteile Anpassung für mobile Endgeräte notwendig Display Performance Speichermöglichkeiten Keine direkte Verwendung bereits bestehender Seiten Seite 36
Quellen Developer.openwave.com Phone Simulator Download (Registrierung notwendig) De.wikipedia.org En.wikipedia.org Developershome.com Techrepublic.com Oreillynet.com Wmlscript.de Seite 37