Demo Lab 1_Tasneem Sayeed_Symbian Foundation

8/14/2019 Demo Lab 1_Tasneem Sayeed_Symbian Foundation

1/45


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


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


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


4/45


Screen Size/Resolution

Keep Layout as simple andfluid as possible

Keep your page contentsall in a single column


other so regardless ofscreen size/resolution,information simply wraps

Test with and without CSS

and JavaScript


5/45


Limited Memory Limits amount of

processing that can be

handled Limited battery power

Limits implementations ofJavaScript, Flash and other


Drains battery Creates a slower user

experience Increases the bandwidth

(i.e. can be more costly todownload web content)


6/45

Mobile Web Development Challenges



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 -


Java ME BREW Windows Mobile Blackberry

iPhone (Objective-C based) Linux-based Android Palm Web OS and more on the way!


8/45

Web Technologies for Symbian



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

-


, , ,

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


10/45

SEE 2009 Demo Walkthrough


Demo source code based on SEE 2009 Widget developed by Ivan Litovski, Symbian Foundation


11/45

SEE 2009 Widget Demo index.html


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"));


:

:twitterView = new ListView(null,

"


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;


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();

}


14/45

Sending AJAX Requests and

Retrieving Data using Nokia WRT



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);


// 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...");

}


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


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);


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,


"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;


18/45


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);

}


} 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


19/45


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


s. p.rea y a e ==

}


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 != "") {


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 = "";


21/45

Parsing the data: getTextofNode()

if ( endind == -1 ) {

url = buf.substring(ind);

} else {

url = buf.substring(ind, endind);

}

tmp += "";

tmp += ""


tmp += url + "";

if ( endind != -1 ) {

tmp += buf.substring(endind);

}

buf = tmp;

}

return buf;

}


22/45

Performance Rules



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


.

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


24/45

Performance Rules: Make Fewer HTTP Requests

Less components = fast page

HTTP Request overhead Combine scripts

Combine CSS stylesheets


Combine images into CSS sprites


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


Content-Encoding: gzip All text components should be sent

gzipped: html (php), js, css, xml, txt


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


Your page here


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



28/45

Performance Rules: Avoid CSS Expressions

CSS expression

#content {

position: absolute;

left:expression(document.body.offsetWidth +px);


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


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



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


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


31/45

Performance Rules

Avoid Redirects

A wasted HTTP Request


Causes a Restart Remove Duplicate Scripts

IE may decide to download them again


32/45

Performance Rules: Make AJAX Cacheable

Content returned from XMLHttpRequest


Returned content must be Gzipped

Could be cached

Cache-control: max-age=?


33/45

Newer Performance Rules



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


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



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


ax eng s ecause o POST without actually posting data is the same as GET


Yahoo!Mail Research)


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


Source: http://developer.yahoo.com/performance/rules.htmlYUI Image LoaderYUI Get Utility


37/45

Performance Rules: Minimize DOM Access

DOM access is the slowest

Cache


p a e no es o ne an en a em o e ree

Avoid fixing layout with JavaScript



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)


Remove gamma chunks which helps with cross-browser colors

Strip comments

jpegtran lossless JPEG operations can be used to

optimize and remove comments


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



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


P f R l


41/45

Performance Rules:

Pack components into a multipart document

For UAs that support it

For example,

Email with attachments



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


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


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


- , ,

http://www.see2009.org/


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


Collaborate with the developer community to furtherenhance the mobile Web development experience!

M I f ti


45/45

More Information

My Blog

http://mymobilecorner.blogspot.com

Follow me on Twitter

Copyright 2009 Symbian Foundation.

. .

Symbian Developer Grouphttp://developer.symbian.org

Documents

Demo Lab 1_Tasneem Sayeed_Symbian Foundation