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

<?xml version="1.0" encoding="ISO-8859-1"?>

<HTML_CONTENT xmlns:ibis="http://www.ibisph.org">


FLAGGING ISSUES: When in doubt about something create a TODO element with text 
within that describes what the question or issue is.  This is simply a convention
to mark something within the file that needs to be addressed.  For example if you
are wanting something bolded red with a gray background you could simply create
something like this:

<TODO>would like this paragraph to be bolded red with a gray background</TODO>

Best practice would be to locate this TODO in the area of the file that needs the 
attention.  Feel free to annotate with any other info that is relivent like if 
this is a question for Deyonne or Stephanie (put in whatever will make sense
so that it can be recalled/understood what the issue is at some future point):

<TODO>
        There are not any related topics to link to.  Should we show the section 
        anyway or if not how best to display this section (Brett/Garth)?
</TODO>

-or- 

<TODO>
        Stephanie, do we want to include a footnotes about xyz...
</TODO>



Replace the TITLE element with the correct value.  Copy this element from the 
original file -OR- copy the text within the TITLE element and paste that value
into the new TITLE element from the template and then also paste that text value
into the "h1" element within the CONTENT (see line 26 in the template).
        <TITLE>Generators</TITLE>

Set the page's topic type CSS value.  This controls main image title background color and 
will likely be used for other styles.  For now, values are always "Topic" and either 
"Health" or "Environment".  The template defaults to enviro as there's more of these
pages so if doing a health page change to "Topic Health":
        <HTML_CLASS>Topic Environment</HTML_CLASS>

This exists within the template.xml and does not need to be changed for now. 
        <OTHER_HEAD_CONTENT>
                <link href="css/Topic.css" rel="stylesheet" type="text/css"/>
                <link href="css/_SiteSpecific-Topic.css" rel="stylesheet" type="text/css"/>

                <script src="js/jquery.scrollBlockListItems.js"/>
                <script>
                        var optionOverrides = {"maxSelectionsContainerHeight":120};
                        $( document ).ready(function() {
                                $(".Topic #moreData .Selections").scrollBlockListItems(optionOverrides);
                        });
                </script>
        </OTHER_HEAD_CONTENT>


        <CONTENT>

Update the image path to the correct header image.  This image must be the same 
size as all header images for the h1 title to work properly.  By convention you
can keep all main headers named the same since they are in their own specific 
directory.  It is also okay to name it something else if that's the direction 
that makes more sense - just be consistent.  Set the img title attribute with an 
appropriate value that describes that image.
Lastly, update the h1 title value.  This will likely be the same value contained
within the TITLE element from the top of the file.  You can either manually type
it in or copy and paste the text value.
                <header>
                        <img src="contentfile/image/environment/generators/header.png" title="some basic title"/> 
                        <h1>Generators</h1>
                </header>

First section which is the intro or about this topic.  This is typically the
first ibis:ExpandableContent element within the old topic file.   
                <section>
Copy the old TITLE value and put within the h2.
                        <h2>What are generators?</h2>

Copy all the content within the ibis:ExpandableContent's CONTENT and paste below
the /h2 and before the closing /section tag.  Example: 
                        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.
                        <br/><br/>

                        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.
                        <br/><br/>

                        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.
                        <br/><br/>
                        Other safety issues include electrical problems and fires which is a concern in the home, recreation, hobbies, and for many occupations.


FOOTNOTE OPTION: If you want to include footnotes you need 2 blocks of text to be 
added into the appropriate area.  See Lois's IBIS topic pages for examples.  Here's 
the 2 items: 

1) Text and a link within the body of the content.
Example of optional ref link to the footer for a section:
This can be included anywhere in the body of any of the section's text.  You can
include as many refs as needed whereever it makes sense to have them within the body.
Numbering or name is not critical but links and footer refs MUST match up...
<a ibis:hash="ref1" id="ref1.link" aria-describedby="footnote-label">get their health needs met.</a>

2) The reference footer.
Example of footer for this section - see above [href] and pay attention to the naming and/or numbering:
                        <footer class="Footnotes"><ol>
                                <li id="ref1"> <a href="http://www.countyhealthrankings.org/our-approach/health-factors/access-care">
                                        County Health Rankings and Roadmaps, Access to Care.</a> Downloaded 2/10/2015
                                <a ibis:hash="ref1.link" aria-label="Back to content">«</a></li>
                        </ol></footer>

                </section>


*** The rest of the following "sections" will depend on the page's author and 
what they're wanting to show.  As it is currently each section has alternating
block formatting (odd sections have a white background, even sections have the pale
yellow background with gradients on the top and bottom of the block).  This example
shows how to have sub sections with images on one side and content on the other.
Note that this is from the generator mockup so it will not apply to all topics.
The section "class="SubSectionsContainer"" along with a section within a section is
needed so that sub section blocks can be formatted appropriately. 
                <section class="SubSectionsContainer">

Copy the old section title and replace within the h2 element below (likely the 
ibis:ExpandableContent TITLE element value):
                        <h2>Operator Safety</h2>

add whatever main html content you want.  In many cases this will simply be the
content contained within the associated ibis:ExpandableContent CONTENT element.
If so, copy from the old and paste in here, and of course edit as needed: 
                        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.
                        <br/><br/>
                        <ul class="Indent">
                                <li>
                                        <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.
                                </li>
                                <li>
                                        <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.
                                </li>
                                <li>
                                        <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.
                                </li>
                        </ul>

Here's the first side by side image/html block.  Note the  "section class="ImageInfoBlock""
as this is needed for formatting.  This "ImageInfoBlock" requires 2 container blocks.
1) a "figure" and 2) a "div".  Order is important as the first block is located on 
the left size and the 2nd is on right.
                        <section class="ImageInfoBlock">

Since this is an image it is put within a figure element and can have an optional
caption that describes the image.  Note that the image (img) ibis:src path will 
need to be updated to point to the desired image.
                                <figure title="enter a quick summary about what this image is about.">
                                        <img src="contentfile/image/environment/generators/poison.png"/> 

Example of optional fig caption:
                                        <figcaption>
                                                Here's some text about this image.  Typical CSS formatting 
                                                shows this as a gray boxed note but can easily be changed.
                                                These are great for 508 compliance but are not needed as 
                                                the figure or image title attribute can also be set to 
                                                describe this image.
                                        </figcaption>
                                </figure>

here's the 2nd block and contains an h3 header that needs an appropriate value
and in this case a list.  This is standard html so put whatever you'd like to 
present in this block.
                                <div>
                                        <h3>Prevent carbon monoxide poisoniong</h3>
                                        <ul>
                                                <li>
                                                        <span class="Bold">Generators can create high levels of dealdly co</span> in their exhaust.  
                                                        Carbon monoxide cannot be seen or smelled.
                                                </li>
                                                <li>
                                                        <span class="Bold">Never use ....</span>, like any home, garage etc.  
                                                </li>
                                        </ul>
                                </div>
                        </section>

Here's the 2nd image block.  In Brett's example he had these alternating between
image left and image right.  In this case notice how the "div" is the first block
as it will be on the left with the "figure" showing on the right.
                        <section class="ImageInfoBlock">
                                <div>
                                        <h3>Prevent electrical problems</h3>
                                        <ul>
                                                <li>
                                                        <span class="Bold">Generators can create high levels of dealdly co</span> in their exhaust.  
                                                        Carbon monoxide cannot be seen or smelled.
                                                </li>
                                                <li>
                                                        <span class="Bold">Never use ....</span>, like any home, garage etc.  
                                                </li>
                                        </ul>
                                </div>
                                <figure >
                                        <img src="contentfile/image/environment/generators/shock.png"/> 
                                </figure>
                        </section>

Here's the 3rd block with the image on the left and content on the right.
                        <section class="ImageInfoBlock">
                                <figure>
                                        <img src="contentfile/image/environment/generators/fire.png"/> 
                                </figure>

                                <div>
                                        <h3>Prevent fires</h3>
                                        <ul>
                                                <li>
                                                        <span class="Bold">Generators can create high levels of dealdly co</span> in their exhaust.  
                                                        Carbon monoxide cannot be seen or smelled.
                                                </li>
                                                <li>
                                                        <span class="Bold">Never use ....</span>, like any home, garage etc.  
                                                </li>
                                        </ul>
                                </div>
                        </section>
                </section>


Here's a third section and in this example is basic block of html.  Do as many/few
of these sections as is needed.  The concept is to have a section with an h2 title
followed by the section's content.
                <section>

Like before populate the h2 with the approriate value (likely from the 
ibis:ExpandableContent TITLE element value):
                        <h2>Generators, Carbon Monoxide, and Public Health</h2>

Like other sections copy from the old ibis:ExpandableContent CONTENT and paste
after the h2 and before the /section.
                        <p>
                                first para.  These can be optionally done as [P]aragraph elements 
                                or simply with 
                                <br/><br/> 

                                in between blocks of text...
                        </p>

                        <p>
                                second para
                        </p>
                        
                        <section>
                                <h3>Notifiable Condiation (Reportable to NMDOH)</h3>
                                again can use [p] or simple line breaks etc.
                        </section>
                </section>



                <nav id="moreInformation" title="Links for more information">

                        <div id="downloadsResources">
                                <h3>Downloads and Resources</h3>
                                <div class="Columns">
                                        <div class="Selections">
                                                <ul>
Populate the "Resources links".  In the old file these are typically under 
ibis:ExpandableContent titleLevel="3" with a TITLE of "Resources".  Simply copy 
all the li items and paste into the template.  Generators Example: 
                                                        <li>
                                                                <a href="contentfile/pdf/environment/generators/GeneratorFactSheet2019Final.pdf">Click to Download a PDF: Portable Generator Safety Factsheet from NM EPHT</a>
                                                        </li>
                                                        <br/>
                                                        <li>
                                                                <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>
                                                        </li>
                                                        <br/>
                                                        <li>
                                                                <a href="health/poisonings/CarbonMonoxidePoisoning.html">Carbon Monoxide Poisoning Prevention Education and Data from NM EPHT</a>
                                                        </li>
                                                        <br/>
                                                        <li>
                                                                <a href="https://www.cdc.gov/co/generatorsafetyfactsheet.html">CDC Carbon Monoxide Poisoning and Generators</a>
                                                        </li>
NOTE: some items will need to be moved into different selection lists.  For 
example the CarbonMonoxidePoisoning is really a related topic that will belong 
in the related topics section below etc.
                                                </ul>
                                        </div>
                                        <img src="contentfile/image/topic/downloads_resources.png"/>
                                </div>
                        </div>

                        <div id="moreData" class="Columns">
                                <div id="relatedData">
                                        <img src="contentfile/image/topic/related_data.png"/>
                                        <h3>Reports and Data</h3>
                                        <div class="Selections Scroll">
                                                <ul>
like above, copy any existing/old indicator or query module link li's with a's 
into this list:
                                                        <li><a href="indicator/summary/some_ip_name.html" title="some appropriate link title">Indicator 1 title</a></li>
                                                        <li><a href="indicator/summary/some_ip_name.html" title="some appropriate link title">Indicator 2 title</a></li>
                                                        <li><a href="indicator/summary/some_ip_name.html" title="some appropriate link title">Indicator 3 title</a></li>
                                                        <li><a href="indicator/summary/some_ip_name.html" title="some appropriate link title">Indicator 2 title</a></li>
                                                        <li><a href="indicator/summary/some_ip_name.html" title="some appropriate link title">Indicator 3 title</a></li>

                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 1 title</a></li>
                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 2 title</a></li>
                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 1 title</a></li>
                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 2 title</a></li>
                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 1 title</a></li>
                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 2 title</a></li>
                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 1 title</a></li>
                                                        <li><a href="query/result/some_QM_name/some_QM_config.html" title="some appropriate link title">Queryable dataset 2 title</a></li>
                                                </ul>
                                        </div>
                                        <button>Show All</button>
                                </div>

                                <div id="relatedTopics">
                                        <img src="contentfile/image/topic/related_topics.png"/>
                                        <h3>Related Topics</h3>
                                        <div class="Selections">
                                                <ul>
like above, copy any existing/old related topic link li's with a's 
into this list:
                                                        <li><a href="health/some_topic_dir/some_topic_name.html" title="some appropriate link title">Health Topic a</a></li>
                                                        <li><a href="health/some_topic_dir/some_topic_name.html" title="some appropriate link title">Health Topic b</a></li>
                                                        <li><a href="health/some_topic_dir/some_topic_name.html" title="some appropriate link title">Health Topic c</a></li>
                                                </ul>
                                        </div>
                                </div>
                        </div>
                </nav>


The citation sections are undefined.
                <section class="Citation">
                        <h2>Citation</h2>
                        Page content updated on 1/1/2020, Published on 1/1/2020

At this point replace "SomeEpiGroupContactInfo" with some consitent, appropriate 
value.  We can also do an easy search and replace to update as needed IF it is 
named consistently.             
                        <ibis:include href="xml/html_content/citation/SomeEpiGroupContactInfo.xml" children-only-flag="true"/>
                        
Similar to above...             
                        <ibis:include href="xml/html_content/citation/DeyonneSandoval.xml" children-only-flag="true"/>
                </section>

        </CONTENT>
</HTML_CONTENT>