Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image...
Transcript of Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image...
![Page 1: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/1.jpg)
Mobile Web
Image sources: apple.com & samsung.com
Design
Thursday, March 14, 2013 an Infopeople webinar
presented by Chad Mairn
![Page 2: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/2.jpg)
Today’s Agenda • Know 3 innovaEve library mobile website designs.
• Understand how HTML, CSS, and JavaScript work together to
build mobile websites.
• Know what a mobile framework is and why they are used.
• Know 3 exisEng mobile services/apps that can be included in library-‐created mobile websites.
• Know the best pracEces in mobile Web development.
• Have a step-‐by-‐step guide for implemenEng a mobile website.
![Page 3: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/3.jpg)
Quick Poll
![Page 4: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/4.jpg)
Some Mobile Examples
![Page 5: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/5.jpg)
<p><a class="call" href="tel:17273417177" accesskey="0">Call the Library</a> | (727) 341-‐7177<br /> <a href="wtai://wp/ap;+17273417177; SPC%20Library">[Add to Phone Book]</a><br />
A simple mobile-‐opEmized Website can work on all devices!
![Page 6: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/6.jpg)
Learn and borrow from sites you like.
hdp://m.novarelibrary.com/
![Page 7: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/7.jpg)
Or you can build something using HTML, CSS, and JavaScript that acts like a naEve app!
Built using jQTouch Built using jQuery Mobile
![Page 8: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/8.jpg)
jQuery Mobile is …
a unified, HTML5-‐based user interface system for all popular mobile device plakorms.
Source: hdp://jquerymobile.com/
![Page 9: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/9.jpg)
jQuery Mobile is well-‐documented and there are great demos to get you started
![Page 10: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/10.jpg)
![Page 11: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/11.jpg)
Advanced Example (Web SQL Database stores data within user’s browser. No cookies!) HTML5 has offline storage
capabiliEes!
Favorites List Favorites Found: 4 Conference Commidee, Friday, 8-‐9am, Azalea A Building the Next GeneraEon of E-‐Govt, Thurs. 1-‐2pm, Jasmine Opening General Session, Wed. 9:15-‐11:15am, Floral Ballroom
hdp://novarelibrary.com/FLAmobile/ Note: this URL is not a best pracEce. More later.
![Page 12: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/12.jpg)
Although Web SQL Database worked on this Web app, the W3C recommends these storage-‐related specificaEons: Web Storage and Indexed Database API.
hdp://www.w3.org/TR/webdatabase/
![Page 13: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/13.jpg)
www.libsuccess.org
![Page 14: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/14.jpg)
What is HTML, CSS, and JavaScript and how do they all fit together?
![Page 15: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/15.jpg)
Source: h@p://goo.gl/kWzET
HyperText Markup Language (HTML) is the skeleton.
Cascading Style Sheets (CSS) are the skin, clothes, cologne etc.
JavaScript is the personality. The character. The pizazz!
![Page 16: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/16.jpg)
![Page 17: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/17.jpg)
NaEve Apps vs. Web/Browser Apps
Issues NaEve apps Web apps
Internet access Not required Required, except for apps wriden in HTML5 (offline capabiliEes)
Shareable content (Twider etc.) Only if it is built in to the app Web links can be shared. Social API’s allow 1-‐click posEng
Access to hardware sensors Yes: camera, gyroscope, microphone, compass, accelerometer, GPS
Access thru browser is limited. GeolocaEon works!
Development Build app for target plakorm (Android, iOS [ObjecEve-‐C] etc.)
Write/publish once using standard Web technologies, view it anywhere with URL. Speedy debugging and development.
DistribuEon Most app stores require approval. No hassles.
Source: hdp://goo.gl/zSeDU
![Page 18: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/18.jpg)
![Page 19: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/19.jpg)
Source: h@p://h@p://goo.gl/y8CFb
![Page 20: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/20.jpg)
Rapid Prototyping for jQuery Mobile
Try it at hdp://codiqa.com/
![Page 21: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/21.jpg)
Try it at hdp://jquerymobile.com/themeroller/
![Page 22: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/22.jpg)
Codiqa Demo
![Page 23: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/23.jpg)
3rd Party Apps/Services
![Page 24: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/24.jpg)
hdp://www.gale.cengage.com/apps/
![Page 25: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/25.jpg)
Mobile OPACs
![Page 26: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/26.jpg)
![Page 27: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/27.jpg)
Mobile Databases
![Page 28: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/28.jpg)
![Page 29: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/29.jpg)
![Page 30: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/30.jpg)
Powered by:
![Page 31: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/31.jpg)
Some e-‐reading Apps
![Page 32: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/32.jpg)
QR Codes etc.
![Page 33: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/33.jpg)
QR (Quick Response) codes can help guide mobile users in your physical spaces come visit your digital library spaces.
![Page 34: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/34.jpg)
![Page 35: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/35.jpg)
Check with your vendors to see if they have apps and/or mobile-‐
opEmized resources.
If they don’t, put some pressure on them to build something quickly!
![Page 36: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/36.jpg)
Gevng Started!
![Page 37: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/37.jpg)
“Fundamentally, ‘mobile’ refers to the user, not the device or applica:on.”
Barbara Ballard Designing the Mobile User Experience
![Page 38: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/38.jpg)
Take an emulated look at your desktop site.
Mobile Site Desktop Site
![Page 39: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/39.jpg)
Small Screen Rendering (260 px) using the Web Developer add-‐on in Firefox
Desktop Small Screen
![Page 40: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/40.jpg)
Note: you can determine how your user’s are accessing your Web site (e.g., mobile devices, carriers, browsers , OS’s, screen resoluEon etc.)
In-‐page AnalyEcs
![Page 41: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/41.jpg)
Sketch ideas
![Page 42: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/42.jpg)
Some Best PracEces • Follow the "m" convenEon (m.novarelibrary.com OR lifeonterra.com/
m/)
• Keep categories (directories) short. Remember that you are creaEng a page that people touch without much typing
• Limit image and markup sizes
• Limit HTML pages to 25KB to allow for caching
• "Minify" your scripts and CSS (JSLint, CleanCSS)
• Link to Full Site
• Sniff for User Agent – DetecEon (allow the user to decide where to go)
• One Column Layout with some whitespace
• Mobile refers to the user!
![Page 43: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/43.jpg)
Minified CSS Code
![Page 44: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/44.jpg)
RedirecEng Mobile Users <script type="text/javascript"> <!-‐-‐
if (screen.width <= 699) { document.location = "YOUR-‐MOBILE-‐SITE.com"; } //-‐-‐> </script>
1. 2. <span><script type="text/javascript"> <!-‐-‐
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { location.replace("<a href="http://YOUR-‐MOBILE-‐SITE.com">http://YOUR-‐MOBILE-‐SITE.com</a>"); } -‐-‐> </script> </span> Note: http://www.user-agents.org has an extensive list.
<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld"/> 3.
<? if ( stristr($ua, "Windows CE") or stristr($ua, "Mobile") ) { $DEVICE_TYPE="MOBILE"; }
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") { $location='YOUR-‐MOBILE-‐SITE.com/index.php'; header ('Location: '.$location); exit; } ?>
4.
Using WordPress? hdp://wordpress.org/extend/plugins/wordpress-‐mobile-‐pack/
Source: h@p://goo.gl/AmQ2
![Page 45: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/45.jpg)
Other mobile development tools/frameworks
![Page 46: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/46.jpg)
The Future of Mobile Web App/Site Development? Responsive Web Design?
![Page 47: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/47.jpg)
TesEng and validaEon
Test Page Speed in Firebug
hdp://gekirebug.com/
![Page 48: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/48.jpg)
W3C mobileOK Checker hdp://validator.w3.org/mobile/
![Page 49: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/49.jpg)
hdp://ready.mobi
![Page 50: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/50.jpg)
Editors and Tools • You can use a simple text editor (e.g., Notepad) or a more sophisEcated applicaEon
(e.g., Dreamweaver).
• Adobe Device Central is part of Adobe’s CS.
• iUI: hdp://code.google.com/p/iui/ for iPhone.
• MIT Mobile Web Open Source Project hdp://sourceforge.net/projects/mitmobileweb/
• Device detecEon? hdp://detectmobilebrowsers.mobi/
• To see your browser's HTTP Headers. Works on mobile browsers. hdp://rabin.mobi/hdp
• Web Developer Toolbar in Firefox: Select Miscellaneous >>> Small Screen Rendering (260 px) >>> the layout will be reformaded to simulate rendering by a mobile browser.
![Page 51: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/51.jpg)
Emulators/Simulators: • Cowemo Mobile Emulator: hdp://www.mobilephoneemulator.com/
• dotMobi Emulator -‐ hdp://mtld.mobi/emulator.php
• Opera Mini Simulator -‐ hdp://www.opera.com/mobile/demo/
• Mimic -‐ emulates European and Japanese models: N400i and N505i. hdp://pukupi.com/post/2059
• Android Emulator -‐ hdp://developer.android.com/guide/developing/tools/emulator.html
• BlackBerry Device Simulators -‐ hdps://www.blackberry.com/Downloads/entry.do?code=060AD92489947D410D897474079C1477
• iPhone Dev Center: hdp://developer.apple.com/iphone/
• Palm Pre -‐ hdp://developer.palm.com/
• Windows Mobile -‐ hdp://msdn.microso|.com/en-‐us/windowsmobile/default.aspx
• JAVA ME -‐ Java Plakorm Micro EdiEon was termed J2ME. It is considered one of the most ubiquitous applicaEon plakorm for mobile devices. hdp://java.sun.com/javame/reference/apis.jsp
![Page 52: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/52.jpg)
h@p://www.slideshare.net/chadmairn
@cmairn
at: h@p://goo.gl/NZAeG Real-‐Eme notebook powered by
![Page 53: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/53.jpg)
Virtual Pevng Zoo
Want to hangout?
gplus.to/chadmairn
anymeeEng.com/chadmairn
![Page 54: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/54.jpg)
Want to Hangout?
gplus.to/chadmairn
![Page 55: Thursday, March 14, 2013 an Infopeople webinar presented ... · 3/14/2013 · Mobile Web Image sources: apple.com & samsung.com n Thursday, March 14, 2013 an Infopeople webinar presented](https://reader034.fdocuments.net/reader034/viewer/2022050505/5f96dca9a537644f5b09bbe4/html5/thumbnails/55.jpg)
Infopeople webinars are supported in part by the U.S. Institute of Museum and Library Services under the provisions of the Library Services and Technology Act, administered in California by the State Librarian. This
material is licensed under a Creative Commons 3.0 Share & Share-Alike license. Use of this material should credit the author and funding source.