Weboldalak fejlesztése mobil eszközökre 1. Ne tegyünk semmit 2. Formázás eltávolítása 3. Médiatípusok használata / Responsive Web Design 4. A céleszköz megtalálása- átirányítás 5. Teljes detektálás és adaptálás 1
Ne tegyünk semmit 2
Formázás eltávolítása 3
A céleszköz megtalálása- átirányítás 4
Teljes detektálás és adaptálás www.google.com www.facebook.com www.youtube.com 5
Felhasználói agens detektálása Felhasználói agens detektálása (User Agent Detection): 1. HTTP headers fejlécek 2. UAProf (User Agent Profile) 6
HTTP fejlécek Megtalálhatóak a HTTP kérésekben, amelyek szerverre érkeznek. Az Accept fejléc A User-Agent fejléc Az Accept-Charset fejléc Az Accept-Language fejléc Az x-wap-profil, és a Profile fejléc 7
Az Accept fejléc Az Accept fejléc tartalmazza a MIME típusokat, hogy milyen típusú fájlokat fog elfogadni a felhasználói agens. application/vnd.wap.wmlscriptc, text/vnd.wap.wml, application/vnd.wap.xhtml+xml, application/xhtml+xml, text/html, multipart/mixed, */* http://www.w3.org/protocols/rfc2616/rfc2616- sec14.html#sec14.1 8
MIME típusok Audio 3GPP files (.3gp) Audio MP3 files (.mp3) Audio MP4 files (.mp4) audio/3gpp audio/mpeg audio/mp4 XHTML MP files (.xhtml,.html or.htm) application/vnd.wap.xhtml+xml application/xhtml+xml text/html WML files (plain text) (.wml) text/vnd.wap.wml 9
Java application JAR files(.jar) application/java application/java- archive application/x-java-archive MIME típusok Java application JAD files (.jad) text/vnd.sun.j2me.app-descriptor Symbian application SIS files (.sis) application/vnd.symbian.install Video 3GPP files (.3gp) video/3gpp Video MP4 files (.mp4) video/mp4 10
Az User-Agent fejléc A User-Agent fejléc tartalmaz egy sort a szövegben, amelyek alapján azonosíthatók a böngészők és a kliens eszközök. Olyan információkat is tartalmazhatnak, mint például a felhasználói készülék operációs rendszer verzióját, a böngésző verzióját, Java képességek, stb 11
Az User-Agent fejléc Nokia6230i/2.0 (03.25) Profile/MIDP-2.0 Configuration/CLDC-1.1 Nokia6600/1.0 (4.03.24) SymbianOS/6.1 Series60/2.0 Profile/MIDP-2.0 Configuration/CLDC-1.0 Mozilla/4.0 (compatible; MSIE 5.0; Series60/2.8 Nokia6630/4.06.0 Profile/MIDP-2.0 Configuration/CLDC- 1.1) 12
Az Accept-Charset fejléc Az Accept-Charset fejléc határozza meg a karakterkészletet, amelyet a felhasználói agens támogat. Ez a HTTP fejléc hasznos a nem angol nyelvű oldalakon. 13
Az Accept-Charset fejléc ISO-8859-1, US-ASCII, UTF-8; q=0.8, ISO-10646-UCS-2; q=0.6 ISO-8859-1, US-ASCII, UTF-8; q=0.8, ISO-10646-UCS-2; q=0.6 q - quality alapértelmezett érték 1 http://www.w3.org/protocols/rfc2616/rfc2616- sec14.html#sec14.2 14
Az Accept-Language fejléc Az Accept-Language fejléc információkat tartalmaz a támogatott nyelvekről a felhasználói agenseknél. Ez a HTTP fejléc hasznos a többnyelvű honlapoknál. zh, en-us; q=0.8, en; q=0.6 15
Az x-wap-profile és profile fejléc UAProf (User Agent Profile) egy XML dokumentum. http://nds1.nds.nokia.com/uaprof/n6230ir200.xml http://wap.samsungmobile.com/uaprof/gt- I9100.xml http://www.mobilemultimedia.be/ 16
Hogyan kell megszerezni a fejléc értékeit? <?php $a = $_SERVER["HTTP_ACCEPT"]; $u_a = $_SERVER["HTTP_USER_AGENT"]; $a_c = $_SERVER["HTTP_ACCEPT_CHARSET"]; $a_l = $_SERVER["HTTP_ACCEPT_LANGUAGE"]; $x_w_p = $_SERVER["HTTP_X_WAP_PROFILE"]; $p = $_SERVER["HTTP_PROFILE"];?> 17
UAProf (User Agent Profile) UAProf (User Agent Profile) az Open Mobile Alliance (korábban a WAP Forum) által meghatározott szabvány. Informáciokat tartalmaz a böngészőkről és a készülék képességeiről. Az előnye az, hogy több és részletesebb információt nyújt a böngészőről és a vezeték nélküli eszközökről, mint a hagyományos HTTP-fejlécek. A hátránya, hogy a régi vezeték nélküli eszközök nem támogatják az UAProf. 18
UAProf (User Agent Profile) Általában az UAProf fájlok kiterjesztése "rdf" vagy "xml", és MIME típusuk application / xml. Egy XML alapú fájl formátum. 19
UAProf (User Agent Profile) Az UAProf fájl írja le a mobil készülék képességeit. Újabb UAProf fájlok tartalmazhatnak részletesebb információkat a videó, multimédia, streaming-és MMSképességekről. 20
UAProf (User Agent Profile)... <prf:component> <rdf:description rdf:id="hardwareplatform"> <rdf:type rdf:resource= "http://www.openmobilealliance.org/tech/profiles/uapro F/ccppschema-20021212#HardwarePlatform"/>... <prf:screensize>208x208</prf:screensize>... </rdf:description> </prf:component> 21
UAProf (User Agent Profile) Hardware platform Software platform NetworkCharacteristics BrowserUA WapCharacteristics PushCharacteristics MmsCharacteristics 22
WURFL WURFL (Wireless Universal Resource File). A WURFL maga is egy XML konfigurációs fájl, amely információt tartalmaz a különféle mobil eszközök képességeiről és funkcióiról. http://wurfl.sourceforge.net/ 23
Tera-WURFL http://www.tera-wurfl.com http://www.tera-wurfl.com/explore/ http://web.wurfl.io/ http://deviceatlas.com/devices 24
Facebook http://www.youtube.com/watch?v=craweumexcc http://www.facebook.com/notes/facebook-engineering/crowdsourcing-mobiledevice-capabilities/441195668919 http://m.facebook.com/ 25
WML <?php header("content-type: text/vnd.wap.wml"); echo "<?xml version=\"1.0\"?>\n"; echo "<!DOCTYPE wml PUBLIC \"-//WAPFORUM//DTD WML 1.3//EN\" \"http://www.wapforum.org/dtd/wml13.dtd\"> <wml> <head> <meta http-equiv=\"cache-control\" content=\"no-cache\"/> </head> <card id=\"card1\" title=\ VTS WML PAGE\"> <p> WML page. </p> </card> </wml> ";?> 26
XTHML MP <?php header("content-type:application/vnd.wap.xhtml+xml"); echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n"; echo "<!DOCTYPE html PUBLIC \"-//WAPFORUM//DTD XHTML Mobile 1.0//EN\" \"http://www.wapforum.org/dtd/xhtml-mobile10.dtd\" > <html xmlns=\"http://www.w3.org/1999/xhtml\"> <head> <meta http-equiv=\"cache-control\" content=\"no-cache\" /> <title>main page</title> </head> <body> <p> XHTML MP PAGE. </p> </body> </html> ";?> 27