.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ======================================== EXT: Moble devices capabilities detector ======================================== :Created: 2010-02-18T17:33:18 :Changed by: Tomasz Krawczyk :Changed: 2013-08-20T11:55:34.680000000 :Classification: tk_mobiledetector :Description: ---- forAdmins (use this for Administrators) forDevelopers (use this for Developers) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) ---- :Keywords: mobile, device, uaprof, capabilities, typoscript, conditions :Author: Tomasz Krawczyk :Email: tomasz@typo3.pl :Info 4: :Language: en |img-1| |img-2| EXT: Moble devices capabilities detector - tk\_mobiledetector .. _EXT-Moble-devices-capabilities-detector: EXT: Moble devices capabilities detector ======================================== Extension Key: tk\_mobiledetector Language: en Keywords: mobile, device, uaprof, capabilities, typoscript, conditions Copyright 2011-2013, Tomasz Krawczyk, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- `EXT: Moble devices capabilities detector 1 <#__RefHeading__596_1075316393>`_ **`Introduction 3 <#__RefHeading__598_1075316393>`_** `What does it do? 3 <#__RefHeading__600_1075316393>`_ `How it works? 3 <#__RefHeading__1073_1604790853>`_ `Why not WURFL? 3 <#__RefHeading__1364_1604790853>`_ **`Administration 4 <#__RefHeading__608_1075316393>`_** `Installation 4 <#__RefHeading__610_1075316393>`_ `Extension configuration 4 <#__RefHeading__815_1604790853>`_ `Backend module 4 <#__RefHeading__1366_1604790853>`_ **`TypoScript conditions 5 <#__RefHeading__612_1075316393>`_** `Examples 7 <#__RefHeading__2585_1604790853>`_ **`Mobile site debugging 11 <#__RefHeading__623_872419733>`_** `Firefox plugin - Modify headers 11 <#__RefHeading__625_872419733>`_ `FE Plugin “Mobile detector – tester” 11 <#__RefHeading__697_872419733>`_ **`Bug reports 12 <#__RefHeading__622_1075316393>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ - This extension tries to detect mobile device capabilities and stores them into database. - Provides new TypoScript conditions that may help you create better mobile sites. .. _How-it-works: How it works? ^^^^^^^^^^^^^ Device capabilities detection is based on `UAProf (User Agent Profile) `_ . Extension looks for HTTP headers: HTTP\_PROFILE, HTTP\_X\_WAP\_PROFILE, WAP-PROFILE, X-WAP- PROFILE or XX-PROFILE. Those headers may contain link to UAProf file. The UAProf file is an XML document that describes mobile device capabilities such as: vendor, model, screen size, supported image types and many other. Extension checks if found UAProf link exists in data table. If yes then gets device capabilities from the table. If the link doesn't exist in data table then UAProf link is red, parsed and mobile device capabilities are stored in database. For detecting device type from User Agent method from `http://detectmobilebrowsers.com `_ was taken. .. _Why-not-WURFL: Why not WURFL? ^^^^^^^^^^^^^^ Since August 2011 the great WURFL database is no longer Open Source. From its last free version devices was extracted and all unique device UAProfs was stored to static extension data. .. _Administration: Administration -------------- You may administer the extension in two places. In The Extension Manager and in the Backend module. .. _Installation: Installation ^^^^^^^^^^^^ - Install the extension tk\_mobiledetector in the Extension manager. - Import static data. - Set the extension configuration options. - Include example static templates or write them on you own. Two templates are provided “Mobile Main” for a whole mobile site and “Mobile tt\_news” for news images sizing. .. _Extension-configuration: Extension configuration ^^^^^^^^^^^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _DetectTablets: DetectTablets """"""""""""" .. container:: table-row Option DetectTablets Description If you turn this feature on then this ext will try to detect tablets. Device type “tablet” will be available in TypoScript. In most cases tablets should be considered full sized browsers. Default 0 .. _DetectedDeviceType: DetectedDeviceType """""""""""""""""" .. container:: table-row Option DetectedDeviceType Description This is a short string used in Typoscript in order to tell difference between browser, grabber or robot. Curently TYPO3 supports “pda” and “wap” for all mobile devices. This extension adds new type **mobi** . Default mobi .. _MobileSiteUrl: MobileSiteUrl """"""""""""" .. container:: table-row Option MobileSiteUrl Description Enter here your mobile site address. This will be used in the future release for exchange with capabilities server. Default http://mysite.mobi .. ###### END~OF~TABLE ###### .. _Backend-module: Backend module ^^^^^^^^^^^^^^ Extension adds to the backend “Mobile devices” module to the Admin Tools section. Currently you can use two options: Device statistics – provides information about imported devices from the last open source WURFL database and collected by your site from visiting devices. Check and add device – lets you check if UAProf link exists in database. If the link is new then it is parsed and added to data table. .. _TypoScript-conditions: TypoScript conditions --------------------- .. ### BEGIN~OF~TABLE ### .. _vendor: vendor ^^^^^^ .. container:: table-row Condition vendor Data type string Description Device vendor like: Nokia, SonyEricson, HTC, LG, …You can use wildcard \* or PCRE Regular Expressions (see doc\_tut\_tsref and “UserAgent” example). **[vendor= = Nokia]** lib.xtest.value = It is Nokia **[vendor= Acer\*]** // may be “ACER” or “ACER Corporation” or “Acer Incorporated “ **[end]** .. _model: model ^^^^^ .. container:: table-row Condition model Data type string Description Mobile device model like Blackstone, N95, 6630...You can use wildcard \* or PCRE Regular Expressions (see doc\_tut\_tsref and “UserAgent” example). .. _screen-width: screen\_width ^^^^^^^^^^^^^ .. container:: table-row Condition screen\_width Data type integer Description Screen width in pixels.You may use integer operators to compare screen sizes. **[** **screen\_width** **= >= 240]** .. _screen-height: screen\_height ^^^^^^^^^^^^^^ .. container:: table-row Condition screen\_height Data type integer Description Screen height in pixels.You may use integer operators to compare screen sizes. .. _browser-name: browser\_name ^^^^^^^^^^^^^ .. container:: table-row Condition browser\_name Data type string Description Mobile browser nameYou can use wildcard \* or PCRE Regular Expressions (see doc\_tut\_tsref and “UserAgent” example). .. _browser-version: browser\_version ^^^^^^^^^^^^^^^^ .. container:: table-row Condition browser\_version Data type string Description Mobile browser version.Because some browser versions are not only numeric simple string operator may be used here. **[** **browser\_version** **= = 3.8]** .. _frames: frames ^^^^^^ .. container:: table-row Condition frames Data type boolean Description True when device supports HTML frames. **[frames= = 1]** **//** The browser supports frames **[end]** .. _html-tables: html\_tables ^^^^^^^^^^^^ .. container:: table-row Condition html\_tables Data type boolean Description True when device supports HTML tables .. _java: java ^^^^ .. container:: table-row Condition java Data type boolean Description True when device supports Java .. _javascript: javascript ^^^^^^^^^^ .. container:: table-row Condition javascript Data type boolean Description True when device supports JavaScript .. _html-version: html\_version ^^^^^^^^^^^^^ .. container:: table-row Condition html\_version Data type string Description Supported HTML version.Numeric compare operators are allowed. **[html\_version= >= 4.0]** .. _xhtml-version: xhtml\_version ^^^^^^^^^^^^^^ .. container:: table-row Condition xhtml\_version Data type string Description Supported XHTML version .. _os: os ^^ .. container:: table-row Condition os Data type string Description Device OS like Android, Symbian, Windows Mobile, …You can use wildcard \* or PCRE Regular Expressions (see doc\_tut\_tsref and “UserAgent” example). .. _os-version: os\_version ^^^^^^^^^^^ .. container:: table-row Condition os\_version Data type string Description OS version.Numeric compare operators are allowed. **[os\_version= >= 2.0]** .. _os-vendor: os\_vendor ^^^^^^^^^^ .. container:: table-row Condition os\_vendor Data type string Description OS vendor.You can use wildcard \* or PCRE Regular Expressions (see doc\_tut\_tsref and “UserAgent” example). .. _gif: gif ^^^ .. container:: table-row Condition gif Data type boolean Description True when device supports GIF images. .. _jpg: jpg ^^^ .. container:: table-row Condition jpg Data type boolean Description True when device supports JPG images. .. _png: png ^^^ .. container:: table-row Condition png Data type boolean Description True when device supports PNG images. .. _call-str: call\_str ^^^^^^^^^ .. container:: table-row Condition call\_str Data type string Description String that may be used to make phone calls directly from the site. **Note:This is not implemented yet.** .. ###### END~OF~TABLE ###### .. _Examples: Examples ^^^^^^^^ You can set global image size on the mobile site. |img-3| HTML headers: |img-4| |img-5| Company logo: |img-6| tt\_news image sizes: |img-7| Other conditions for particular devices: |img-8| .. _Mobile-site-debugging: Mobile site debugging --------------------- .. _Firefox-plugin-Modify-headers: Firefox plugin - Modify headers ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ During mobile site creation it is really helpful to use Firefox plugin called “Modify headers”. Using this plugin you will be able to check the page on your computer. When you set UAProf header then Mobile detector will be able to detect device capabilities. |img-9| .. _FE-Plugin-Mobile-detector-tester: FE Plugin “Mobile detector – tester” ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ This plugin shows a few tables with device detection results. The first table “Browser info” presents data from UAProf header. .. _Bug-reports: Bug reports ----------- Report them here: `http://forge.typo3.org/projects/extension- tk\_mobiledetector/issues `_ |img-2| 12 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 407 .. :id: grafika1 .. :name: grafika1 .. :width: 512 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 244 .. :id: grafika2 .. :name: grafika2 .. :width: 669 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 327 .. :id: grafika3 .. :name: grafika3 .. :width: 669 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 619 .. :id: grafika4 .. :name: grafika4 .. :width: 597 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 499 .. :id: grafika5 .. :name: grafika5 .. :width: 568 .. |img-8| image:: img-8.png .. :align: left .. :border: 0 .. :height: 103 .. :id: grafika6 .. :name: grafika6 .. :width: 469 .. |img-9| image:: img-9.png .. :align: left .. :border: 0 .. :height: 382 .. :name: Modify headers .. :width: 669