|
1 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 <html lang="en" xml:lang="en"> |
|
3 <head> |
|
4 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> |
|
5 <meta name="copyright" content="(C) Copyright 2005" /> |
|
6 <meta name="DC.rights.owner" content="(C) Copyright 2005" /> |
|
7 <meta content="concept" name="DC.Type" /> |
|
8 <meta name="DC.Title" content="WRTKit design considerations" /> |
|
9 <meta scheme="URI" name="DC.Relation" content="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html" /> |
|
10 <meta content="XHTML" name="DC.Format" /> |
|
11 <meta content="GUID-CD4C583D-E6D8-4AAB-B2D8-DBA09DD7A009" name="DC.Identifier" /> |
|
12 <meta content="en" name="DC.Language" /> |
|
13 <link href="commonltr.css" type="text/css" rel="stylesheet" /> |
|
14 <title> |
|
15 WRTKit design considerations</title> |
|
16 </head> |
|
17 <body id="GUID-CD4C583D-E6D8-4AAB-B2D8-DBA09DD7A009"><a name="GUID-CD4C583D-E6D8-4AAB-B2D8-DBA09DD7A009"><!-- --></a> |
|
18 |
|
19 |
|
20 |
|
21 <h1 class="topictitle1"> |
|
22 WRTKit design considerations</h1> |
|
23 |
|
24 <div> |
|
25 |
|
26 <div class="section"><h2 class="sectiontitle"> |
|
27 User interface design</h2> |
|
28 |
|
29 |
|
30 <p> |
|
31 |
|
32 The WRTKit uses views and controls as the basis for all user |
|
33 interfaces, and those views and controls have a look and feel that |
|
34 is more similar to mobile device applications than to web pages, |
|
35 despite the fact that the underlying technology is HTML, CSS and |
|
36 JavaScript. The WRTKit supports both the tab and pointer based |
|
37 navigations modes but staying true with the application-like look |
|
38 and feel, it's often a good idea to use the tab navigation mode as |
|
39 that will probably be more familiar to users. |
|
40 </p> |
|
41 |
|
42 <p> |
|
43 |
|
44 Consistency and clarity help guiding the user through the widget |
|
45 user interface. As the saying goes, less is more. Instead of having |
|
46 a huge user interface that users must scroll through to get to what |
|
47 they want, consider dividing the user interface into multiple views |
|
48 that only contain controls and functionality that logically fits |
|
49 together. Use NavigationButton controls or the Options menu for |
|
50 navigation between the views. |
|
51 </p> |
|
52 |
|
53 <p> |
|
54 |
|
55 Keep in mind that the right softkey can be programmatically changed. |
|
56 You can take advantage of this, for example so that you use it to |
|
57 allow users to return back to the previous or parent view. |
|
58 </p> |
|
59 |
|
60 <p> |
|
61 |
|
62 Consider placing all configurable options in a view that the user |
|
63 can access from the Options menu. If there are more configurable |
|
64 options than what fits within one or two screenfuls then it's |
|
65 probably a good idea to split them into multiple views. |
|
66 </p> |
|
67 |
|
68 <p> |
|
69 |
|
70 Errors happen so keep those in mind when designing the widget. |
|
71 The WRTKit offers easy to use notification popup dialogs that |
|
72 can be used to show error messages in a way that will be familiar |
|
73 to the user. |
|
74 </p> |
|
75 |
|
76 </div> |
|
77 |
|
78 <div class="section"><h2 class="sectiontitle"> |
|
79 Security</h2> |
|
80 |
|
81 |
|
82 <p> |
|
83 |
|
84 Most of methods in the WRTKit that accept strings as parameters |
|
85 use XHTML in their values. This allows the use of custom styles |
|
86 and other rich content in control and view captions, label |
|
87 values, content in content panels, and more. But like always |
|
88 when dealing with untrusted data from the Internet, you have to |
|
89 be careful with the data that you display in the user interface |
|
90 so that you don't end up placing malicious HTML (e.g. with |
|
91 script tags containing hostile code) into your user interface. |
|
92 </p> |
|
93 |
|
94 <p> |
|
95 |
|
96 Always filter the content that you fetch using AJAX to make sure |
|
97 that no HTML tags have been injected into that content. This is |
|
98 a good idea in any case even if there are no malicious intents, |
|
99 since arbitrary HTML mixed into content can easily cause your |
|
100 user interface to behave in unpredictable ways. |
|
101 </p> |
|
102 |
|
103 </div> |
|
104 |
|
105 </div> |
|
106 |
|
107 <div> |
|
108 <div class="familylinks"> |
|
109 <div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html">Overview of the WRTKit</a></div> |
|
110 </div> |
|
111 </div> |
|
112 |
|
113 </body> |
|
114 </html> |