Weboldalak fejlesztése mobil eszközökre

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Weboldalak fejlesztése mobil eszközökre"

Péter Szekeres
6 évvel ezelőtt
Látták:

1 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

2 Ne tegyünk semmit 2

3 Formázás eltávolítása 3

4 A céleszköz megtalálása- átirányítás 4

5 Teljes detektálás és adaptálás

6 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

7 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

8 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, */* sec14.html#sec14.1 8

9 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

10 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

11 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

12 Az User-Agent fejléc Nokia6230i/2.0 (03.25) Profile/MIDP-2.0 Configuration/CLDC-1.1 Nokia6600/1.0 ( ) 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/ Profile/MIDP-2.0 Configuration/CLDC- 1.1) 12

13 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

14 Az Accept-Charset fejléc ISO , US-ASCII, UTF-8; q=0.8, ISO UCS-2; q=0.6 ISO , US-ASCII, UTF-8; q=0.8, ISO UCS-2; q=0.6 q - quality alapértelmezett érték 1 sec14.html#sec

15 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

16 Az x-wap-profile és profile fejléc UAProf (User Agent Profile) egy XML dokumentum. I9100.xml 16

17 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

18 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

19 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

20 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

21 UAProf (User Agent Profile)... <prf:component> <rdf:description rdf:id="hardwareplatform"> <rdf:type rdf:resource= " F/ccppschema #HardwarePlatform"/>... <prf:screensize>208x208</prf:screensize>... </rdf:description> </prf:component> 21

22 UAProf (User Agent Profile) Hardware platform Software platform NetworkCharacteristics BrowserUA WapCharacteristics PushCharacteristics MmsCharacteristics 22

23 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. 23

24 Tera-WURFL

25 Facebook

26 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\" \" <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

27 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\" \" > <html xmlns=\" <head> <meta http-equiv=\"cache-control\" content=\"no-cache\" /> <title>main page</title> </head> <body> <p> XHTML MP PAGE. </p> </body> </html> ";?> 27

Hasonló dokumentumok

WCSS (Wap CSS), Wireless CSS

WCSS (Wap CSS), Wireless CSS A WCSS (WAP Cascading Style Sheet vagy WAP CSS) mobil változata a CSS-nek. WAP speciális kiterjesztéseket tartalmaz. Azok a CSS2 jellemzők és tulajdonságok, amelyek nem hasznosak