Download - Demo Lab 1_Tasneem Sayeed_Symbian Foundation
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
1/45
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
2/45
Outline
Definition of Mobile Web
Mobile Device Constraints
Mobile Development Challenges
SEE 2009 Widget Demo Walkthrough
Sending AJAX Requests and Retrieving Data
Performance Rules & Mobile Web Development Strategies
Copyright 2009 Symbian Foundation. 2
Conclusion
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
3/45
Definition of the Mobile Web
Mobile Web
W3C pushing the idea of One Web
Making the same information and services available
to users irrespective of the device they are using
Does not mean exactly the same information is
available in exactly the same representation across
Copyright 2009 Symbian Foundation. 3
The context ofmobile use, device capability variations,
bandwidth issues and mobile network capabilities all
affect the representation
Some services and information better suited for and
targeted at particular user contexts
Source: W3C Mobile best practices One Web page
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
4/45
Mobile Device Constraints
Screen Size/Resolution
Keep Layout as simple andfluid as possible
Keep your page contentsall in a single column
Copyright 2009 Symbian Foundation. 4
other so regardless ofscreen size/resolution,information simply wraps
Test with and without CSS
and JavaScript
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
5/45
Mobile Device Constraints
Limited Memory Limits amount of
processing that can be
handled Limited battery power
Limits implementations ofJavaScript, Flash and other
Copyright 2009 Symbian Foundation. 5
Drains battery Creates a slower user
experience Increases the bandwidth
(i.e. can be more costly todownload web content)
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
6/45
Mobile Web Development Challenges
Copyright 2009 Symbian Foundation. 6
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
7/45
Mobile Web Development Challenges
Code once, run anywhere is a foreign concept Many browser and device types to accommodate
Unresolved connectivity and caching issues to contend On our 5th Generation of HTML with WML, XHTML, andcHTML still alive
Constellation of mobile platforms -
Copyright 2009 Symbian Foundation. 7
Java ME BREW Windows Mobile Blackberry
iPhone (Objective-C based) Linux-based Android Palm Web OS and more on the way!
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
8/45
Web Technologies for Symbian
Copyright 2009 Symbian Foundation. 8
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
9/45
Web Technologies
Web Runtime (WRT) for S60 devices A set of components based on the WebKit architecture
that enables you to apply your skills at creating webcontent to create full mobile web applications that aresimple, powerful and optimized for mobile devices
Widget development is simplified with plug-ins for AptanaStudio, Adobe Dreamweaver, and Microsoft Visual Studio
-
Copyright 2009 Symbian Foundation. 9
, , ,
and deploy widgets all from within their web developmenttool of their choice
For more information::http://www.forum.nokia.com/Technology_Topics/Web_Technologies/Web_Runtime/ /See Mobile 2.0 Developer Talk on Developing Web Runtime Widgets with Aptana
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
10/45
SEE 2009 Demo Walkthrough
Copyright 2009 Symbian Foundation. 10
Demo source code based on SEE 2009 Widget developed by Ivan Litovski, Symbian Foundation
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
11/45
SEE 2009 Widget Demo index.html
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
12/45
SEE 2009 Widget Demo main.jsfunction init() {
if (window.widget) {
widget.setNavigationEnabled(false);
menu.showSoftkeys();
var updateMenuItem = new MenuItem("Check for updates", 0);
updateMenuItem.onSelect = CheckForUpdates;
menu.append(updateMenuItem);
// wrt bug fix
setInterval("if ( IsHSViewMode() ) UpdateMiniView();", 30000);
}
// create UI manager
uiManager = new UIManager(document.getElementById("main"));
Copyright 2009 Symbian Foundation. 12
:
:twitterView = new ListView(null,
"
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
13/45
SEE 2009 Widget Demo main.js// Called when the data is loadedfunction ShowMainView(){
if (mainView == null) {
UpdateMiniView();
mainView = new ListView(null, header);
var currentSessions = schedule.GetCurrentSessions();
if (currentSessions != null) {
// todo
}
:
:
twitterView.previousView = mainView;
Copyright 2009 Symbian Foundation. 13
var twitterTitle = new NavigationButton(null, "tweetz-icon.png",
"");twitterTitle.addEventListener("ActionPerformed", function(event){
if ( twitter == null ) {
twitter = new Twitter(twitterView);
}
twitter.Update(10);
twitterView.show();
});mainView.addControl(twitterTitle);
//twitter = new Twitter(mainView);
//twitter.Update(10);
mainView.previousView = null;
}
mainView.show();
}
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
14/45
Sending AJAX Requests and
Retrieving Data using Nokia WRT
Copyright 2009 Symbian Foundation. 14
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
15/45
Update Twitter Status using WRT
Twitter.prototype.Update = function(numToShow){
this.numToShow = numToShow;
if ( this.buttons == null ) {
// add the separator
var separator = new NavigationButton(null, "tweetz-icon.png",
"");
separator.setEnabled(false);
this.parentView.addControl(separator);
Copyright 2009 Symbian Foundation. 15
// create buttons
this.buttons = new Array();for( var i = 0 ; i < this.numToShow; i++ ) {
var button = new NavigationButton("twitter_button_"+i,
null , "");
this.parentView.addControl(button);
this.buttons.push(button);
}this.buttons[0].setText("Loading twitter feed...");
}
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
16/45
Sending AJAX Requests using Twitter API
// Twitter API for getting a users RSS feed
var twitterurl =
"http://twitter.com/statuses/user_timeline/TwitMyMobile.rss";
// Get the rss feed
// Prepare for asynchronous download
this.http = new Ajax();
true means as nchronous re uest
Copyright 2009 Symbian Foundation. 16
this.http.open("GET", twitterurl , true);
// When the AJAX request is done, it will call self.DoUpdate()
this.http.onreadystatechange = function()
{ self.DoUpdate(); };
// send the AJAX request
this.http.send(null);
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
17/45
Parsing the RSS Data: DoUpdate()
Twitter.prototype.DoUpdate = function(){if (this.http.readyState == 4) {
try {
// Get parsed Doc
var xmlDoc = this.http.responseXML;
if (xmlDoc == null) {// if the content type is not set correctly,
// we get the response as text
var xmlparser = new DOMParser();
xmlDoc =
xmlparser.parseFromString(this.http.responseText,
Copyright 2009 Symbian Foundation. 17
"text/xml");
}
var itemElements =
xmlDoc.getElementsByTagName("item");
var loopEnd = Math.min(this.numToShow,
itemElements.length);
// traverse elements and create buttons
for (var i = 0; i < loopEnd; i++) {// iterate through child nodes of this item
// and gather tweets
var title = null;
var date = null;
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
18/45
Parsing the RSS Data: DoUpdate()
node = itemElements[i].firstChild;while (node != null) {
if (node.nodeType == Node.ELEMENT_NODE){
if (node.nodeName == "title") {
// item title
title = getTextOfNode(node);
}
else if (node.nodeName == "pubDate" ||
node.nodeName == "dc:date") {
// item publishing date
date = getTextOfNode(node);
}
Copyright 2009 Symbian Foundation. 18
} end while
node = node.nextSibling;
} // end for
this.buttons[i].setText("" +
date + " " + title + "");
this.buttons[i].setImage("tweet.png");
} // end if (xmldoc == null)} // end try
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
19/45
Parsing the RSS Data: DoUpdate()
catch (x) {
this.buttons[0].setText(
"Uh-Oh! Tweetz not tweeting
right now.");
for (var i = 0; i < this.numToShow; i++) {this.buttons[i].setText("");
this.buttons[i].setImage(null);
} // end for
} // end catch
Copyright 2009 Symbian Foundation. 19
s. p.rea y a e ==
}
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
20/45
Parsing the data: getTextofNode()
// Returns the text of a node.function getTextOfNode(node) {
var buf = "";
// iterate through all child elements and
// collect all text to the buffer
var child = node.firstChild;
while (child != null) {
if (child.nodeType == Node.TEXT_NODE ||
child.nodeType == Node.CDATA_SECTION_NODE)
{
// append text to buffer
if (buf != "") {
Copyright 2009 Symbian Foundation. 20
buf += " ";
}
buf += child.nodeValue;
}
child = child.nextSibling;
}
// make link if there is a url
var ind = buf.indexOf("http://");var endind = buf.indexOf(" ", ind);
if ( ind != -1 ) {
var tmp = buf.substring(0,ind);
var url = "";
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
21/45
Parsing the data: getTextofNode()
if ( endind == -1 ) {
url = buf.substring(ind);
} else {
url = buf.substring(ind, endind);
}
tmp += "";
tmp += ""
Copyright 2009 Symbian Foundation. 21
tmp += url + "";
if ( endind != -1 ) {
tmp += buf.substring(endind);
}
buf = tmp;
}
return buf;
}
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
22/45
Performance Rules
Copyright 2009 Symbian Foundation. 22
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
23/45
14 Performance Rules (Yahoo)
1. Make Fewer HTTP Requests2. Use a Content Delivery Network3. Add an Expires Header (or Cache-control)4. GZip Components5. Put CSS (Stylesheets) at the Top6. Move Scripts to the Bottom (inline too)
serverserver
serverserver
serverserver
CSSCSS
CSSCSS
javascriptjavascript
contentcontent
Copyright 2009 Symbian Foundation. 23
.
8. Make JavaScript and CSS External9. Reduce DNS Lookups10. Minify JavaScript and CSS (inline too) CSS11. Avoid Redirects
12. Remove Duplicate Scripts13. Configure ETags14. Make AJAX Cacheable
Source: http://developer.yahoo.com/performance/rules.html
JavascriptJavascriptcontentcontent
JavascriptJavascript
contentcontent
JavascriptJavascript
sserversserver
contentcontent
CSSCSS
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
24/45
Performance Rules: Make Fewer HTTP Requests
Less components = fast page
HTTP Request overhead Combine scripts
Combine CSS stylesheets
Copyright 2009 Symbian Foundation. 24
Combine images into CSS sprites
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
25/45
Performance Rules: GZip Components
When you send zipped content over theinternet, the browser unpacks it
Modern browsers understandcompressed content
Request headerAccept-Encoding:gzip,deflate
Response header
Copyright 2009 Symbian Foundation. 25
Content-Encoding: gzip All text components should be sent
gzipped: html (php), js, css, xml, txt
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
26/45
Performance Rules: Put CSS at the Top
Firefox and IE will not render anything untilthe last piece of CSS reaches the wire
Place stylesheets as early as possible inthe document
Copyright 2009 Symbian Foundation. 26
Your page here
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
27/45
Performance Rules: Move Scripts to the Bottom
(inline too)
Scripts block downloads Since the script can do
location.href or document.write at
any time, browser blocks rather thandownloading possibly useless components
Inline scripts too
Copyright 2009 Symbian Foundation. 27
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
28/45
Performance Rules: Avoid CSS Expressions
CSS expression
#content {
position: absolute;
left:expression(document.body.offsetWidth +px);
Copyright 2009 Symbian Foundation. 28
In IE, this is the only way to have Javascript inCSS
CSS expressions tend to get executed moreoften than was intended, think aboutonmousemove
Smart expressions overwritethemselves
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
29/45
Performance Rules:
Make Javascript and CSS External
Helps with caching, never expire policy Share with other pages
However, this is two more HTTP requests
Copyright 2009 Symbian Foundation. 29
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
30/45
Performance Rules: Minify JavaScript and CSS (inline
too)
Minify, but still Gzip
JSMin (Written in Javascript, but has a PHP port) YUI compressor minifies CSS too Inline styles and scripts should also be minified
Copyright 2009 Symbian Foundation. 30
Removes unnecessary characters from code to reduce its size, thus improvingload times When JS/CSS code is minified, all comments are usually removed as well as
unnecessary white space characters like , , and With respect to JavaScript, this improves load time performance because the
size of the file downloaded is often significantly reduced
Two Popular Tools for Minifying JavaScript code are: JSMin YUI Compressor
To learn more on Minification tools, see MinifyJS.com and MinifyCSS.com
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
31/45
Performance Rules
Avoid Redirects
A wasted HTTP Request
Copyright 2009 Symbian Foundation. 31
Causes a Restart Remove Duplicate Scripts
IE may decide to download them again
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
32/45
Performance Rules: Make AJAX Cacheable
Content returned from XMLHttpRequest
Copyright 2009 Symbian Foundation. 32
Returned content must be Gzipped
Could be cached
Cache-control: max-age=?
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
33/45
Newer Performance Rules
Copyright 2009 Symbian Foundation. 33
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
34/45
20 New Performance Rules for Faster Web Pages (Yahoo)
1. Flush the buffer early2. Use GET for AJAX requests3. Post-load components4. Preload components5. Reduce the number of DOM elements
6. Split components across domains7. Minimize the number of iframes8. No 404s9. Reduce cookie size10. Use cookie-free domains for com onents
Copyright 2009 Symbian Foundation. 34
11. Minimize DOM access12. Develop smart event handlers13. Choose over @import14. Avoid filters15. Optimize images16. Optimize CSS sprites
17. Dont scale images in HTML18. Make favicon.ico small and cacheable19. Keep components under 25K20. Pack components into a multipart document
Source: http://developer.yahoo.com/performance/rules.html
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
35/45
Performance Rules:Use GET for AJAX Requests
GET is for retrieving data POST is a two-step process (send headers, send data) GET request is one TCP packet, except in the case you
have a lot of cookies
Copyright 2009 Symbian Foundation. 35
ax eng s ecause o POST without actually posting data is the same as GET
Source: http://developer.yahoo.com/performance/rules.html
Yahoo!Mail Research)
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
36/45
Performance Rules: Post-Load Components
Determine the components absolutely required initially torender the page. Rest of the components (i.e. drag and drop, animations,
hidden content, images below the fold) can all wait
Copyright 2009 Symbian Foundation. 36
Source: http://developer.yahoo.com/performance/rules.htmlYUI Image LoaderYUI Get Utility
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
37/45
Performance Rules: Minimize DOM Access
DOM access is the slowest
Cache
Copyright 2009 Symbian Foundation. 37
p a e no es o ne an en a em o e ree
Avoid fixing layout with JavaScript
Source: http://developer.yahoo.com/performance/rules.html
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
38/45
Performance Rules:Optimize Images
GIF dont use a bigger palette than you will need
Use PNGs instead of GIFs
Use pngcrush tool (or optipng or pngoptimizer)
Copyright 2009 Symbian Foundation. 38
Remove gamma chunks which helps with cross-browser colors
Strip comments
jpegtran lossless JPEG operations can be used to
optimize and remove comments
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
39/45
Performance Rules: Do not scale images in HTML
Scaling images in HTML downloads unnecessary bytes
If you need
Better to just have myPic.jpg 200x200 not 1000x1000
Copyright 2009 Symbian Foundation. 39
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
40/45
Performance Rules: Keep components under 25K
Because mobile phones may generally not cache them Uncompressedsize under 25K
Minify HTML in addition to JavaScript and CSS
Copyright 2009 Symbian Foundation. 40
P f R l
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
41/45
Performance Rules:
Pack components into a multipart document
For UAs that support it
For example,
Email with attachments
Copyright 2009 Symbian Foundation. 41
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
42/45
Bridging the Mobile Web Tools Gap
Develop an Eclipse Plug-in for Web Development onSymbian to support Web Runtimes
Open Source Eclipse Plug-in Alpha with the belowfeatures to enable tool developer collaboration byDecember 2009
Copyright 2009 Symbian Foundation. 42
Incremental Project Builder Creates built state based on project contents,
and keeps it synchronized to project changes Integrated Debugger with basic debugging capabilities
J i h S bi C i
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
43/45
Join the Symbian Community
Silicon Valley Symbian Programming SIG
http://www.meetup.com/Silicon-Valley-Symbian-Developers-Meetup/
Symbian SIG Mailing List
[email protected] Developer Group
http://developer.symbian.org
Copyright 2009 Symbian Foundation. 43
- , ,
http://www.see2009.org/
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
44/45
Summary
Make the experience feel like a native application
Take advantage of the enhanced features
Dont simply release a hybrid version of the mobile web site
Copyright 2009 Symbian Foundation. 44
Collaborate with the developer community to furtherenhance the mobile Web development experience!
M I f ti
-
8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation
45/45
More Information
My Blog
http://mymobilecorner.blogspot.com
Follow me on Twitter
Copyright 2009 Symbian Foundation.
. .
Symbian Developer Grouphttp://developer.symbian.org