Mobile for web
-
Upload
vo-duy-tuan -
Category
Technology
-
view
594 -
download
1
description
Transcript of Mobile for web
![Page 1: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/1.jpg)
Mobile for Web<?php //from a PHP dev ?>
PHP Developer from Reader.vn Social NetworkVo Duy Tuan
![Page 2: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/2.jpg)
$who_am_I?
My Name is Võ Duy Tuấn PHP 5 Zend Certified Engineer Interests: PHP, Social Network, Optimize Web,
Mobile, UI/UX Works:
Dienmay.com Reader.vn Freelancer: Designer, Developer
![Page 3: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/3.jpg)
$table_of_content
Introduction Detection jQuery Mobile Testing
![Page 4: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/4.jpg)
Introduction1
![Page 5: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/5.jpg)
1.1. Smartphone Trend
![Page 6: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/6.jpg)
1.2. Mobile Commerce
![Page 7: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/7.jpg)
1.3. Mobile version
Web App New Sub-domain for mobile access Responsive Design for current webpage
Installed App Native Controls (UI) HTML5 Webview HTML5 Webview + Native Features (Phonegap) Hybrid (Native Controls + HTML5 Webview)
![Page 8: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/8.jpg)
Which isBEST
for your site?
Which isBEST
for your site?
![Page 9: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/9.jpg)
PHP
Javascript
CSS
Detection2
![Page 10: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/10.jpg)
2.1. PHP Detection
![Page 11: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/11.jpg)
2.1. PHP Detection (cont.)
![Page 12: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/12.jpg)
2.1. PHP Detection (cont.)
Force to desktop Version on mobile device
![Page 13: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/13.jpg)
2.2. Javascript Detection
![Page 14: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/14.jpg)
2.3. CSS Responsive
![Page 15: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/15.jpg)
2.3. CSS Responsive (cont.)
![Page 16: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/16.jpg)
2.3. CSS Responsive (cont.)
![Page 17: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/17.jpg)
jQuery Mobile3
![Page 18: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/18.jpg)
3.1. Overview
![Page 19: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/19.jpg)
3.2. Usage
![Page 20: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/20.jpg)
3.3. Tips & Tricks
Front-end Optimization Resource Preload Disable Advanced CSS HTML Tag ID conflict
![Page 21: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/21.jpg)
3.3.1. Front-end Optimization
CSS Sprite CSS/JS Minification Domain Sharding Image Size optimize Caching …
![Page 22: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/22.jpg)
3.3.2. Resource Preload
![Page 23: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/23.jpg)
3.3.2. Resource Preload (cont.)
![Page 24: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/24.jpg)
3.3.3. Disable Advanced CSS
![Page 25: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/25.jpg)
3.3.4. HTML Tag ID Conflict
![Page 26: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/26.jpg)
Testing4
![Page 27: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/27.jpg)
4.1.Desktop
User-Agent Switcher (Chrome Extension) Window Resizer (Chrome Extension)
![Page 28: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/28.jpg)
4.2.Android Emulator
![Page 29: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/29.jpg)
4.2.Android Emulator (cont.)
IP Address of localhost is: 10.0.2.2, access the localhost file is at: http://10.0.2.2/ (not http://localhost/)
Edit HOSTS file on emulator (to test virtual host with domain): Step 1: Root Emulator Step 2: Edit HOSTS file Step 3: Upload back to emulator & Overwrite
HOSTS file.
![Page 30: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/30.jpg)
4.2.Android Emulator (cont.)
![Page 31: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/31.jpg)
4.3.iOS Simulator (Xcode)
![Page 32: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/32.jpg)
4.3.iOS Simulator (Xcode)
Run on Mac OS Use HOSTS file on your Computer.
(/etc/hosts)
![Page 33: Mobile for web](https://reader036.fdocuments.in/reader036/viewer/2022062704/555a008ad8b42ad00a8b4e9c/html5/thumbnails/33.jpg)
It’s time to query …
CONTACT
Fullname: Vo Duy Tuan
Email: [email protected]
Phone: 0938 916 902
Website: http://bloghoctap.com
Thank you!