source: main/adopters/nm-epht/trunk/src/main/webapps/nmepht-content/xml/html_content/topic-notes.xml @ 24389

Last change on this file since 24389 was 24389, checked in by GarthBraithwaite_STG, 6 months ago

nm epht content - changed ibis:hash to standard href="# to use html_content processing xslt code.

File size: 17.0 KB
Line 
1<?xml version="1.0" encoding="ISO-8859-1"?>
2
3<HTML_CONTENT xmlns:ibis="http://www.ibisph.org">
4
5
6FLAGGING ISSUES: When in doubt about something create a TODO element with text
7within that describes what the question or issue is.  This is simply a convention
8to mark something within the file that needs to be addressed.  For example if you
9are wanting something bolded red with a gray background you could simply create
10something like this:
11
12<TODO>would like this paragraph to be bolded red with a gray background</TODO>
13
14Best practice would be to locate this TODO in the area of the file that needs the
15attention.  Feel free to annotate with any other info that is relivent like if
16this is a question for Deyonne or Stephanie (put in whatever will make sense
17so that it can be recalled/understood what the issue is at some future point):
18
19<TODO>
20        There are not any related topics to link to.  Should we show the section
21        anyway or if not how best to display this section (Brett/Garth)?
22</TODO>
23
24-or-
25
26<TODO>
27        Stephanie, do we want to include a footnotes about xyz...
28</TODO>
29
30
31
32Replace the TITLE element with the correct value.  Copy this element from the
33original file -OR- copy the text within the TITLE element and paste that value
34into the new TITLE element from the template and then also paste that text value
35into the "h1" element within the CONTENT (see line 26 in the template).
36        <TITLE>Generators</TITLE>
37
38Set the page's topic type CSS value.  This controls main image title background color and
39will likely be used for other styles.  For now, values are always "Topic" and either
40"Health" or "Environment".  The template defaults to enviro as there's more of these
41pages so if doing a health page change to "Topic Health":
42        <HTML_CLASS>Topic Environment</HTML_CLASS>
43
44This exists within the template.xml and does not need to be changed for now.
45        <OTHER_HEAD_CONTENT>
46                <link href="css/Topic.css" rel="stylesheet" type="text/css"/>
47                <link href="css/_SiteSpecific-Topic.css" rel="stylesheet" type="text/css"/>
48
49                <script src="js/jquery.scrollBlockListItems.js"/>
50                <script>
51                        var optionOverrides = {"maxSelectionsContainerHeight":120};
52                        $( document ).ready(function() {
53                                $(".Topic #moreData .Selections").scrollBlockListItems(optionOverrides);
54                        });
55                </script>
56        </OTHER_HEAD_CONTENT>
57
58
59        <CONTENT>
60
61Update the image path to the correct header image.  This image must be the same
62size as all header images for the h1 title to work properly.  By convention you
63can keep all main headers named the same since they are in their own specific
64directory.  It is also okay to name it something else if that's the direction
65that makes more sense - just be consistent.  Set the img title attribute with an
66appropriate value that describes that image.
67Lastly, update the h1 title value.  This will likely be the same value contained
68within the TITLE element from the top of the file.  You can either manually type
69it in or copy and paste the text value.
70                <header>
71                        <img src="contentfile/image/environment/generators/header.png" title="some basic title"/> 
72                        <h1>Generators</h1>
73                </header>
74
75First section which is the intro or about this topic.  This is typically the
76first ibis:ExpandableContent element within the old topic file.   
77                <section>
78Copy the old TITLE value and put within the h2.
79                        <h2>What are generators?</h2>
80
81Copy all the content within the ibis:ExpandableContent's CONTENT and paste below
82the /h2 and before the closing /section tag.  Example:
83                        Portable generators are internal combustion engines used to generate electricity.  People use generators when electricity is not available, such as during power outages or when camping. Generators are also used for temporary or remote power during recovery efforts after a disaster.
84                        <br/><br/>
85
86                        Commercial generators are designed to help prevent service interruptions at critical infrastructure facilities, such as hospitals, utility facilities, and emergency response agencies. Portable generators made for household use are designed to provide temporary power to operate a few appliances or lights.
87                        <br/><br/>
88
89                        Although useful, especially during emergencies and recovery situations, generators must be used with caution because, as fuel burning appliances, generators will emit carbon monoxide gas. <a href="health/poisonings/CarbonMonoxidePoisoning.html">Carbon monoxide</a>, also known simply as "CO", is a highly toxic invisible gas formed when fuel is burned. It cannot be seen, smelled or tasted. Breathing high levels of carbon monoxide can cause sudden illness or death in a matter of minutes. On-going exposure to lower, but still dangerous levels, can cause people to become ill. Symptoms of carbon monoxide poisoning are nonspecific and are like those of a cold or flu. Common ailments include headache, fatigue, difficulty concentrating, and nausea or digestive issues.
90                        <br/><br/>
91                        Other safety issues include electrical problems and fires which is a concern in the home, recreation, hobbies, and for many occupations.
92
93
94FOOTNOTE OPTION: If you want to include footnotes you need 2 blocks of text to be
95added into the appropriate area.  See Lois's IBIS topic pages for examples.  Here's
96the 2 items:
97
981) Text and a link within the body of the content.
99Example of optional ref link to the footer for a section:
100This can be included anywhere in the body of any of the section's text.  You can
101include as many refs as needed whereever it makes sense to have them within the body.
102Numbering or name is not critical but links and footer refs MUST match up...
103<a href="#ref1" id="ref1.link" aria-describedby="footnote-label">get their health needs met.</a>
104
1052) The reference footer.
106Example of footer for this section - see above [href] and pay attention to the naming and/or numbering:
107                        <footer class="Footnotes"><ol>
108                                <li id="ref1"> <a href="http://www.countyhealthrankings.org/our-approach/health-factors/access-care">
109                                        County Health Rankings and Roadmaps, Access to Care.</a> Downloaded 2/10/2015
110                                <a href="#ref1.link" aria-label="Back to content">«</a></li>
111                        </ol></footer>
112
113                </section>
114
115
116*** The rest of the following "sections" will depend on the page's author and
117what they're wanting to show.  As it is currently each section has alternating
118block formatting (odd sections have a white background, even sections have the pale
119yellow background with gradients on the top and bottom of the block).  This example
120shows how to have sub sections with images on one side and content on the other.
121Note that this is from the generator mockup so it will not apply to all topics.
122The section "class="SubSectionsContainer"" along with a section within a section is
123needed so that sub section blocks can be formatted appropriately.
124                <section class="SubSectionsContainer">
125
126Copy the old section title and replace within the h2 element below (likely the
127ibis:ExpandableContent TITLE element value):
128                        <h2>Operator Safety</h2>
129
130add whatever main html content you want.  In many cases this will simply be the
131content contained within the associated ibis:ExpandableContent CONTENT element.
132If so, copy from the old and paste in here, and of course edit as needed:
133                        Portable generators are useful when temporary or remote electrical power is needed, like when the power goes out due to storms or when camping. However, using these require some safety measures to avoid carbon monoxide poisoning because generators create <a href="health/poisonings/CarbonMonoxidePoisoning.html">carbon monoxide gas</a> in their exhaust. Breathing in carbon monoxide is harmful.
134                        <br/><br/>
135                        <ul class="Indent">
136                                <li>
137                                        <span class="Bold">Never use a generator in an enclosed area</span> or near garage, shed, camper, tent, boat, barn, stable, cabin or spiritual/ceremonial structures.
138                                </li>
139                                <li>
140                                        <span class="Bold">Always run your generator outside</span>, at least 20 feet from any home, camper, tent, or buildings with exhaust hoses pointing away from people and structures.  While you move it away from your home or camping site, make sure you do not move it near another home or camping site.
141                                </li>
142                                <li>
143                                        <span class="Bold">Install carbon monoxide detectors</span> on each floor of your home. Use battery-powered detectors when you are inside other structures where you will be using gas-powered tools and generators.
144                                </li>
145                        </ul>
146
147Here's the first side by side image/html block.  Note the  "section class="ImageInfoBlock""
148as this is needed for formatting.  This "ImageInfoBlock" requires 2 container blocks.
1491) a "figure" and 2) a "div".  Order is important as the first block is located on
150the left size and the 2nd is on right.
151                        <section class="ImageInfoBlock">
152
153Since this is an image it is put within a figure element and can have an optional
154caption that describes the image.  Note that the image (img) ibis:src path will
155need to be updated to point to the desired image.
156                                <figure title="enter a quick summary about what this image is about.">
157                                        <img src="contentfile/image/environment/generators/poison.png"/> 
158
159Example of optional fig caption:
160                                        <figcaption>
161                                                Here's some text about this image.  Typical CSS formatting
162                                                shows this as a gray boxed note but can easily be changed.
163                                                These are great for 508 compliance but are not needed as
164                                                the figure or image title attribute can also be set to
165                                                describe this image.
166                                        </figcaption>
167                                </figure>
168
169here's the 2nd block and contains an h3 header that needs an appropriate value
170and in this case a list.  This is standard html so put whatever you'd like to
171present in this block.
172                                <div>
173                                        <h3>Prevent carbon monoxide poisoniong</h3>
174                                        <ul>
175                                                <li>
176                                                        <span class="Bold">Generators can create high levels of dealdly co</span> in their exhaust. 
177                                                        Carbon monoxide cannot be seen or smelled.
178                                                </li>
179                                                <li>
180                                                        <span class="Bold">Never use ....</span>, like any home, garage etc. 
181                                                </li>
182                                        </ul>
183                                </div>
184                        </section>
185
186Here's the 2nd image block.  In Brett's example he had these alternating between
187image left and image right.  In this case notice how the "div" is the first block
188as it will be on the left with the "figure" showing on the right.
189                        <section class="ImageInfoBlock">
190                                <div>
191                                        <h3>Prevent electrical problems</h3>
192                                        <ul>
193                                                <li>
194                                                        <span class="Bold">Generators can create high levels of dealdly co</span> in their exhaust. 
195                                                        Carbon monoxide cannot be seen or smelled.
196                                                </li>
197                                                <li>
198                                                        <span class="Bold">Never use ....</span>, like any home, garage etc. 
199                                                </li>
200                                        </ul>
201                                </div>
202                                <figure >
203                                        <img src="contentfile/image/environment/generators/shock.png"/> 
204                                </figure>
205                        </section>
206
207Here's the 3rd block with the image on the left and content on the right.
208                        <section class="ImageInfoBlock">
209                                <figure>
210                                        <img src="contentfile/image/environment/generators/fire.png"/> 
211                                </figure>
212
213                                <div>
214                                        <h3>Prevent fires</h3>
215                                        <ul>
216                                                <li>
217                                                        <span class="Bold">Generators can create high levels of dealdly co</span> in their exhaust. 
218                                                        Carbon monoxide cannot be seen or smelled.
219                                                </li>
220                                                <li>
221                                                        <span class="Bold">Never use ....</span>, like any home, garage etc. 
222                                                </li>
223                                        </ul>
224                                </div>
225                        </section>
226                </section>
227
228
229Here's a third section and in this example is basic block of html.  Do as many/few
230of these sections as is needed.  The concept is to have a section with an h2 title
231followed by the section's content.
232                <section>
233
234Like before populate the h2 with the approriate value (likely from the
235ibis:ExpandableContent TITLE element value):
236                        <h2>Generators, Carbon Monoxide, and Public Health</h2>
237
238Like other sections copy from the old ibis:ExpandableContent CONTENT and paste
239after the h2 and before the /section.
240                        <p>
241                                first para.  These can be optionally done as [P]aragraph elements
242                                or simply with
243                                <br/><br/> 
244
245                                in between blocks of text...
246                        </p>
247
248                        <p>
249                                second para
250                        </p>
251                       
252                        <section>
253                                <h3>Notifiable Condiation (Reportable to NMDOH)</h3>
254                                again can use [p] or simple line breaks etc.
255                        </section>
256                </section>
257
258
259
260                <nav id="moreInformation" title="Links for more information">
261
262                        <div id="downloadsResources">
263                                <h3>Downloads and Resources</h3>
264                                <div class="Columns">
265                                        <div class="Selections">
266                                                <ul>
267Populate the "Resources links".  In the old file these are typically under
268ibis:ExpandableContent titleLevel="3" with a TITLE of "Resources".  Simply copy
269all the li items and paste into the template.  Generators Example:
270                                                        <li>
271                                                                <a href="contentfile/pdf/environment/generators/GeneratorFactSheet2019Final.pdf">Click to Download a PDF: Portable Generator Safety Factsheet from NM EPHT</a>
272                                                        </li>
273                                                        <br/>
274                                                        <li>
275                                                                <a href="https://www.osha.gov/OshDoc/data_Hurricane_Facts/portable_generator_safety.pdf">Click to Download a PDF: OSHA Factsheet Using Portable Generators Safely in Workplaces</a>
276                                                        </li>
277                                                        <br/>
278                                                        <li>
279                                                                <a href="health/poisonings/CarbonMonoxidePoisoning.html">Carbon Monoxide Poisoning Prevention Education and Data from NM EPHT</a>
280                                                        </li>
281                                                        <br/>
282                                                        <li>
283                                                                <a href="https://www.cdc.gov/co/generatorsafetyfactsheet.html">CDC Carbon Monoxide Poisoning and Generators</a>
284                                                        </li>
285NOTE: some items will need to be moved into different selection lists.  For
286example the CarbonMonoxidePoisoning is really a related topic that will belong
287in the related topics section below etc.
288                                                </ul>
289                                        </div>
290                                        <img src="contentfile/image/topic/downloads_resources.png"/>
291                                </div>
292                        </div>
293
294                        <div id="moreData" class="Columns">
295                                <div id="relatedData">
296                                        <img src="contentfile/image/topic/related_data.png"/>
297                                        <h3>Reports and Data</h3>
298                                        <div class="Selections Scroll">
299                                                <ul>
300like above, copy any existing/old indicator or query module link li's with a's
301into this list:
302                                                        <li><a href="indicator/summary/some_ip_name.html" title="some appropriate link title">Indicator 1 title</a></li>
303                                                        <li><a href="indicator/summary/some_ip_name.html" title="some appropriate link title">Indicator 2 title</a></li>
304                                                        <li><a href="indicator/summary/some_ip_name.html" title="some appropriate link title">Indicator 3 title</a></li>
305                                                        <li><a href="indicator/summary/some_ip_name.html" title="some appropriate link title">Indicator 2 title</a></li>
306                                                        <li><a href="indicator/summary/some_ip_name.html" title="some appropriate link title">Indicator 3 title</a></li>
307
308                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 1 title</a></li>
309                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 2 title</a></li>
310                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 1 title</a></li>
311                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 2 title</a></li>
312                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 1 title</a></li>
313                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 2 title</a></li>
314                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 1 title</a></li>
315                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 2 title</a></li>
316                                                </ul>
317                                        </div>
318                                        <button>Show All</button>
319                                </div>
320
321                                <div id="relatedTopics">
322                                        <img src="contentfile/image/topic/related_topics.png"/>
323                                        <h3>Related Topics</h3>
324                                        <div class="Selections">
325                                                <ul>
326like above, copy any existing/old related topic link li's with a's
327into this list:
328                                                        <li><a href="health/some_topic_dir/some_topic_name.html" title="some appropriate link title">Health Topic a</a></li>
329                                                        <li><a href="health/some_topic_dir/some_topic_name.html" title="some appropriate link title">Health Topic b</a></li>
330                                                        <li><a href="health/some_topic_dir/some_topic_name.html" title="some appropriate link title">Health Topic c</a></li>
331                                                </ul>
332                                        </div>
333                                </div>
334                        </div>
335                </nav>
336
337
338The citation sections are undefined.
339                <section class="Citation">
340                        <h2>Citation</h2>
341                        Page content updated on 1/1/2020, Published on 1/1/2020
342
343At this point replace "SomeEpiGroupContactInfo" with some consitent, appropriate
344value.  We can also do an easy search and replace to update as needed IF it is
345named consistently.             
346                        <ibis:include href="xml/html_content/citation/SomeEpiGroupContactInfo.xml" children-only-flag="true"/>
347                       
348Similar to above...             
349                        <ibis:include href="xml/html_content/citation/DeyonneSandoval.xml" children-only-flag="true"/>
350                </section>
351
352        </CONTENT>
353</HTML_CONTENT>
Note: See TracBrowser for help on using the repository browser.