source: main/adopters/nj/trunk/src/main/webapps/doh-shad-content/xml/html_content/home/Basics.xml @ 23267

Last change on this file since 23267 was 23267, checked in by GarthBraithwaite_STG, 14 months ago

nj - initial v3 webapp and content.

File size: 9.7 KB
1<?xml version="1.0" encoding="ISO-8859-1"?>
3<HTML_CONTENT xmlns:ibis="">
5        <ibis:doc>
6                <name>home/</name>
7                <summary>Very basic basics</summary>
8                <description>
9                </description>
11                <author>Maria Baron</author>
12                <company>NJ Department of Health</company>
13                <versions>
14                        <version><number>1.0</number><date>3/8/18</date><who>Maria</who>
15                                <description>For real beginners</description>
16                        </version>
17                </versions>
18        </ibis:doc>
20<TITLE>The Basics of NJSHAD</TITLE>
23        Through doing NJSHAD demonstrations, we've found that some users need additional assistance so they can get started using NJSHAD.  Aspects of the system that we take for granted as "easy" actually aren't to users who are not experienced with online data query systems.  This page covers many NJSHAD basics.  If you think of other things we should add here, please <a href="home/ContactInformation.html">let us know</a>.  Our users are valued stakeholders who can help improve NJSHAD to be more accessible and useful to them. 
25<div class="container clearfix" id="content">
26        <section id="content">
27                <div class="row" style="margin-top:-20px;">             
28                        <div class="col-md-4">
29                                <div class="panel darkblue">
30                                        <div class="panel-heading">
31                                                <h10 class="panel-title">Site Navigation</h10>
32                                        </div>
33                                        <div class="panel-body">
34                                                There are two types on menus in NJSHAD: <br/><br/>
35                                                <ul>
36                                                        <li>The <b>top navigation menu</b> is the same on every NJSHAD page, so you should always be able to find your way back home.<br/>
37                                                        <img src="view/image/topmenu.png" title="snip of top menu"/></li>
38                                                        <br/>
39                                                        <li>The <b>left navigation menu</b> is "context specific" and changes depending on which section you're in and/or which page you're on.<br/>
40                                                        </li>
41                                                </ul>
42                                                        <!--img src="view/image/leftmenu.png" style="vertical-align:text-top;"/-->
43                                                        <img src="view/image/leftmenu.png" style="height:120px" title="snip of Home left menu"/> 
44                                                        <img src="view/image/leftmenu2.png" style="height:120px" title="snip of Topics left menu"/> 
45                                                        <img src="view/image/leftmenu3.png" style="height:120px" title="snip of Resources left menu"/>
46                                        </div>
47                                </div>
48                        </div>
49                        <div class="col-md-4">
50                                <div class="panel orange">
51                                        <div class="panel-heading">
52                                                <h10 class="panel-title">Symbols</h10>
53                                        </div>
54                                        <div class="panel-body">
55                                                <b>Pluses and Minuses</b><br/>
56                                                Throughout NJSHAD you will see PLUS signs and MINUS signs.<br/>
57                                                <img src="view/image/icon/16/box_plus-gray.png" title="plus sign"/> 
58                                                <img src="view/image/icon/16/box_minus-gray.png" title="minus sign"/><br/> 
59                                                In menu buttons, they look like this (and the minus will be an X):<br/>
60                                                <img src="view/image/icon/16/plus_circle-blue.png" title="plus sign"/> 
61                                                <img src="view/image/icon/16/cross_3d-circle-red.png" title="red X"/><br/> 
62                                                Clicking a PLUS sign will expand content below it.<br/>
63                                                Clicking a MINUS sign will collapse the content below it.<br/>
64                                                <br/>
65                                                <b>Question Marks</b><br/>
66                                                In the Dataset Query section of NJSHAD, you'll see question marks.<br/>
67                                                <img src="view/image/icon/16/question_balloon-white.png" title="question bubble"/> 
68                                                <img src="view/image/icon/16/text_question.gif" title="question link"/><br/> 
69                                                Hover over the blue ones and you'll get a pop-up with more information.<br/>
70                                                Click the yellow ones to go to another page with a lot more information.
71                                        </div>
72                                </div>
73                        </div>
74                        <div class="col-md-4">
75                                <div class="panel blue">
76                                        <div class="panel-heading">
77                                                <h10 class="panel-title">Who's responsible?</h10>
78                                        </div>
79                                        <div class="panel-body">
80                                                At the bottom of each page, below a solid gray line and above the dark grey box full of light blue links, you'll see bold black text with a program name, address, URL, e-mail address, and possibly other contact info.<br/>
81                                                <img src="view/image/orgunitfooter.png" title="sample footer"/><br/><br/>
82                                                That is the program in NJDOH that's responsible for the information on that page.  They may not necessarily have put the info into NJSHAD, but they are the original source of the data or information.<br/><br/> 
83                                                If you have questions about the information on a page (other than website-related issues), that's who you should contact for more information.
84                                        </div>
85                                </div>
86                        </div>
87                </div>
88                <div class="row">               
89                        <div class="col-md-4">
90                                <div class="panel green">
91                                        <div class="panel-heading">
92                                                <h10 class="panel-title">Graph It!</h10>
93                                        </div>
94                                        <div class="panel-body">
95                                                After you submit a query, <b>Graph It!</b> will appear in the left navigation menu.<br/>
96                                                <img src="view/image/home/graphitcollapsed.png" title="Graph It!"/><br/>
97                                                Click this button to create or change a graph of the data in your query result.  Change graph types as many times as you like to get the graph you need.
98                                        </div>
99                                </div>
100                        </div>
101                        <div class="col-md-4">
102                                <div class="panel blue">
103                                        <div class="panel-heading">
104                                                <h10 class="panel-title">Rearranging Columns</h10>
105                                        </div>
106                                        <div class="panel-body">
107                                                All NJSHAD table columns can be moved from left to right to rearrange the order in which they are displayed.<br/><br/> 
108                                                Click the column header, drag the column to where you want it, and let go.
109                                        </div>
110                                </div>
111                        </div>
112                        <div class="col-md-4">
113                                <div class="panel darkblue">
114                                        <div class="panel-heading">
115                                                <h10 class="panel-title">Hover Over</h10>
116                                        </div>
117                                        <div class="panel-body">
118                                                Throughout NJSHAD, you can <span title="If you can read this, you're hovering!">hover</span> your mouse over certain text to see a pop-up with more information about where that link will take you or get more information about an image.
119                                        </div>
120                                </div>
121                        </div>
122                </div>
123                <div class="row">               
124                        <div class="col-md-6">
125                                <div class="panel orange">
126                                        <div class="panel-heading"><a name="ind"></a>
127                                                <h10 class="panel-title">Graph and Map Secrets</h10>
128                                        </div>
129                                        <div class="panel-body">
130                                                <b>Hover Over</b><br/>
131                                                In NJSHAD graphs and maps, if you hover your mouse pointer over a data point, the corresponding data (rate, numerator, denominator, etc.) will pop-up. <img src="view/image/home/hoverinfo.png" style="vertical-align:text-top;" title="graph pop-up info"/><br/>
132                                                <br/>
133                                                <b>Removing Graph Categories</b><br/>
134                                                Let's say you have a graph for four causes of death over the years 2010 to 2015 and you decide you only want to see three of the causes.  Go to the legend/key to the right of the graph and click the cause you no longer want to see and it'll disappear from the graph! <img src="view/image/home/lineafter.png" style="vertical-align:text-top;"/> Click it again and it'll come back. <img src="view/image/home/linebefore.png" style="vertical-align:text-top;"/><br/>
135                                                This works for any category, not just causes of death.
136                                                <br/><br/>
137                                                <b>Fun With Maps</b><br/>
138                                                <img src="view/image/home/mapzoom.png" style="float:left; padding-right:10px" title="map tools"/> <img src="view/image/home/maptools.png" style="float:right" title="map tools"/> 
139                                                &#8592; In the top left corner of each map are tools to zoom in (+) and zoom out (-).<br/>
140                                                <span style="font-size:75%">&#9679;</span> &#160; 4 arrows: zoom way out.<br/>
141                                                <span style="font-size:75%">&#9679;</span> &#160; Rounded arrow: reset map to original size.<br/><br/>
142                                                <!--img src="view/image/home/maptools.png" style="float:right"/><br/><br/><br/-->
143                                                &#8594; In the top right corner of each map is a control panel. <!--span style="font-size:200%;"> &#8594; &#8594; &#8594; &#8594; </span-->
144                                                <ul>
145                                                        <li>Click the <b>X</b> to shrink the panel.</li> 
146                                                        <li>Click None under <b>Base Map</b> to remove the terrain layer.</li>
147                                                        <li>Change the <b>Grouping Type</b> and <b>Size</b> farther down in the panel.</li>
148                                                        <li>Reverse the <b>colors</b> at the bottom.</li>
149                                                </ul>
150                                        </div>
151                                </div>
152                        </div>
153                        <div class="col-md-6">
154                                <div class="panel green">
155                                        <div class="panel-heading">
156                                                <h10 class="panel-title">Sorting, Hiding, and Filtering Table Columns</h10>
157                                        </div>
158                                        <div class="panel-body">
159                                                All NJSHAD tables have little arrows in the column headers that look like the letter V. <img src="view/image/home/sortfilter.png"/>  These arrows can be used to sort and hide columns and to filter rows.<br/><br/> 
160                                                Clicking on the arrow will bring up this menu: <img src="view/image/home/sortmenu.png"/>.<br/> 
161                                                The first two choices, obviously, <b>sort</b> the table by the data in that column: low value to high value or vice versa.<br/><br/>
162                                                Clicking or hovering over <b>Columns</b> will show a list of the column names with checkboxes. <img src="view/image/home/columnmenu.png"/><br/>
163                                                Unchecking a box will hide that column from the table.  Checking the box will bring it back.<br/><br/>
164                                                Clicking or hovering over <b>Filter</b> will show a selection box that lets you only show rows that contain certain values. <img src="view/image/home/filtermenu.png"/>
165                                        </div>
166                                </div>
167                        </div>
168                </div>
169        </section>
171                <div class="Note">
172                        <h2>Operating Systems and Browsers</h2>
173                        NJSHAD was developed for desktop using <b>Windows 7</b> and <b>Google Chrome</b>
174                        Other operating systems and browsers may not render pages properly. 
175                        Most notably, <span style="color:red;font-weight:bold">Internet Explorer will not show pages or run queries properly.</span>
176                        Make sure your browser version is up to date. 
177                        <a href="home/WhatsNewIn23.html#browsers" title="Click for more information">More info...</a>                   
178                </div>                 
180        </CONTENT>
Note: See TracBrowser for help on using the repository browser.