org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-A33B7539-EE4A-4E0D-B72B-28565AEF369D.html
author Eugene Ostroukhov <eugeneo@symbian.org>
Fri, 04 Jun 2010 09:44:40 -0700
changeset 345 7723a46fe224
parent 229 716254ccbcc0
permissions -rw-r--r--
Bug 2480 - Excluded resources are still available in preview and debugger
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
229
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
     1
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
     2
<!DOCTYPE html
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
     3
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
     4
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Using graphics and scripting effectively"/><meta name="abstract" content="If an application uses a lot of resources, keep the graphics as light as possible and maintain a balance between good graphics and resource consumption. You can replace some graphical special effects with code to ensure better performance. For example, you can write code instead of inserting graphics or animation to create highlighted menu options or sparkling stars. You can use JavaScript optimization techniques that improve the user experience of Web applications on mobile devices. Generally, these are the same techniques that are used on desktop browsers."/><meta name="description" content="If an application uses a lot of resources, keep the graphics as light as possible and maintain a balance between good graphics and resource consumption. You can replace some graphical special effects with code to ensure better performance. For example, you can write code instead of inserting graphics or animation to create highlighted menu options or sparkling stars. You can use JavaScript optimization techniques that improve the user experience of Web applications on mobile devices. Generally, these are the same techniques that are used on desktop browsers."/><meta name="DC.Relation" scheme="URI" content="GUID-A60E9080-A08C-4701-A45E-0D0BAE33C88F"/><meta name="DC.Relation" scheme="URI" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Relation" scheme="URI" content="GUID-1C067AC7-2B92-4EEB-896B-814B4064590F"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-A33B7539-EE4A-4E0D-B72B-28565AEF369D"/><meta name="DC.Language" content="en"/><title>Using graphics and scripting effectively </title><script type="text/javascript">
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
     5
      function initPage() {}
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
     6
    </script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-A33B7539-EE4A-4E0D-B72B-28565AEF369D">Using graphics and scripting effectively</h1><div><p>If an application uses a lot of resources, keep the graphics as light as possible and maintain a balance between good graphics and resource consumption. You can replace some graphical special effects with code to ensure better performance. For example, you can write code instead of inserting graphics or animation to create highlighted menu options or sparkling stars. You can use JavaScript optimization techniques that improve the user experience of Web applications on mobile devices. Generally, these are the same techniques that are used on desktop browsers.</p>
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
     7
<div><h3>Optimizing image size</h3><p>Smaller images in terms of both pixel size and color depth conserve memory and load faster. A color depth of 16 bits is a good compromise between looks and size. The screen resolution defines the actual size of graphics on the display. For example, a graphic that looks very small on a large display may become too small on a device with the same number of pixels but a smaller display.</p><p>When possible, create images in the intended maximum size, because their quality degrades when you scale them up. Also, high-contrast edges in a image might result in poor quality when scaling down.</p><p>You can allow the Web Runtime (WRT) rendering engine to automatically scale images to fit different screen sizes, based on the <code>HTLM IMG</code> tag width and height parameters. However, this can result in poor image quality. For better quality, use a desktop imaging tool to scale images. First convert the image to 24-bit color mode, for example to PNG-24. The increased color depth allows a good scaling tool to add color gradations to perform anti-aliasing on the final image.</p></div>
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
     8
<div><h3>Optimizing JavaScript</h3>       <p>You can optimize JavaScript in the following ways:</p>     <ul>
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
     9
<li><p>Use external and not internal JavaScript. </p><pre class="codeblock">&lt;script src="url_to_js" type="text/javascript"/&gt;</pre><p>External JavaScript files can be cached independently of HTML files, which is good because JavaScript is usually more static than HTML. External JavaScript can be shared between pages. Remember to set the <code>Expires</code> header. </p></li>
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
    10
<li><p>Minimize the size of the final output JavaScript code, for example with automation tools. Strip comments from your code. Strip excess white space. Minimize and pack the code, using GZIP compression. Remember to consider the good balance of the XHTML structure and unobtrusive JavaScript.</p></li>
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
    11
<li><p>Do not run long-running JavaScript functions on page load. Web applications do not multi-task and the browser is thus blocked from the user input for the duration. If you have a long running script, try to speed it up, for example by profiling the functions and improving the XHTML structure.</p></li>
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
    12
<li><p>Do not use JavaScript where CSS can be used instead. For example, implement menus and rollover images with CSS instead of JavaScript.</p></li>
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
    13
</ul></div>
716254ccbcc0 Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff changeset
    14
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>