Widget: UserGuidance: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Marterer (talk | contribs)
No edit summary
 
(27 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<noinclude>Development version of the User Guidance.<br><strong style="color:red;">Under construction.</strong>
<noinclude>Development version of the User Guidance.<br><strong style="color:red;">Under construction.</strong></noinclude>
</noinclude>
 
<includeonly>
<includeonly>
    <style>
        :root {
            --compass-color: #C31980;
            --handbook-color: #C2902D;
            --safe-color: #80C319;
        }
        h2.opened .plus.icon::after,
        h3.opened .plus.icon::after,
        h4.opened .plus.icon::after {
            transform: rotate(0);
        }
        #cmp-container {
            font-family: 'Open Sans';
            font-size: 120%;
        }
        #cmp-container h1,
        #cmp-container h2,
        #cmp-container h3 {
            font-family: 'Raleway';
            font-weight: 300;
            letter-spacing: .06em;
            position: relative;
        }
        #cmp-container h4 {
            font-size: 1em;
            font-weight: 300;
            transition: all 0.4s ease;
        }
        #cmp-container h4.opened {
            font-size: 1em;
            font-weight: 500;
        }
        #cmp-container h1 {
            letter-spacing: .06em;
            color: var(--compass-color);
        }
        #cmp-intro h1 svg {
            height: 2em;
            fill: var(--compass-color);
        }
        #cmp-container h2 {
            margin-top: 1.5em;
            padding-bottom: 5px;
            color: var(--compass-color);
            cursor: pointer;
            transition: all 0.4s ease;
        }
        #cmp-container h2::before {
            content: '';
            display: block;
            position: absolute;
            left: 1.2em;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: currentColor;
            letter-spacing: .06em;
            transition: all 0.4s ease;
            transform: scaleX(0);
            transform-origin: bottom left;
        }
        #cmp-container h2.opened::before {
            transform: scaleX(1);
        }
        #cmp-container h3 {
            font-size: 1.4em;
            cursor: pointer;
        }
        .subtheme {
            margin-bottom: 2em;
            margin-left: 2em;
        }
        .question {
            font-size: 1.1em;
            padding-left: 1.65em;
            cursor: pointer;
            margin-bottom: 1em;
        }
        .answer {
            margin: 1em 1.8em;
            font-size: 1.2rem;
        }
        .subtheme,
        .question,
        .answer {
            display: none;
        }
        .subtheme.opened,
        .question.opened,
        .answer.opened {
            display: block;
        }
        .answer-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1em;
            margin-bottom: 2em;
        }
        .choice {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            border: 2px solid;
            border-radius: 5px;
        }
        .choice:hover .button {
            font-weight: 600;
        }
        .choice .button {
            width: 100%;
            transition: all 250ms;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: .75em;
            color: #fff;
            border-bottom: 2px solid;
            border-radius: 2px 2px 0 0;
        }
        .choice .desc {
            font-size: 75%;
            padding: 1em;
            transition: all 250ms;
        }
        .choice.tech {
            color: var(--links-blue);
        }
        .choice.guide {
            color: var(--links-orange);
        }
        .choice.case {
            color: var(--links-cyan);
        }
        .choice.handbook {
            color: var(--handbook-color);
        }
        .choice.safe {
            color: var(--safe-color);
        }
        .choice.tech .button {
            background-color: var(--links-blue);
            border-color: var(--links-blue);
        }
        .choice.guide .button {
            background-color: var(--links-orange);
            border-color: var(--links-orange);
        }
        .choice.case .button {
            background-color: var(--links-cyan);
            border-color: var(--links-cyan);
        }
        .choice.handbook .button {
            background-color: var(--handbook-color);
            border-color: var(--handbook-color);
        }
        .choice.safe .button {
            background-color: var(--safe-color);
            border-color: var(--safe-color);
        }
        .choice:hover .button {
            background-color: #fff;
        }
        .choice.tech:hover .button {
            color: var(--links-blue);
        }
        .choice.guide:hover .button {
            color: var(--links-orange);
        }
        .choice.case:hover .button {
            color: var(--links-cyan);
        }
        .choice.handbook:hover .button {
            color: var(--handbook-color);
        }


        .choice.safe:hover .button {
    <!-- STYLES BEGIN -->
            color: var(--safe-color);
    <link rel="stylesheet" href="https://api.safety-base.eu/v2/links/ug/styles.css">
        }
    <!-- STYLES END -->
    </style>


     <div id="cmp-container">
     <div id="cmp-container">
         <div id="cmp-intro">
         <div id="cmp-intro">
             <h1>
             <h1>
                 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="prefix__Livello_1" x="0" y="0"
                 <img src="https://api.safety-base.eu/v2/links/lib?q=0-compass_colored.svg">
                    version="1.1" viewBox="0 0 128 128">
                    <defs id="prefix__defs43">
                        <path id="prefix__rect345" d="M977.382 473.479h642.714v494.395H977.382z" />
                    </defs>
                    <style id="style2" type="text/css">
                        .prefix__st0 {
                            fill: #fff
                        }
 
                        .prefix__st1 {
                            fill: var(--compass-color)
                        }
 
                        .prefix__st2 {
                            fill: var(--compass-color)
                        }
                    </style>
                    <g id="prefix__g38" transform="translate(-585.75 -578.105)">
                        <ellipse id="prefix__circle4" cx="649.905" cy="642.245" stroke-width=".116" class="prefix__st0"
                            rx="49.012" ry="48.98" />
                        <path id="prefix__path6" stroke-width=".116"
                            d="M649.905 587.962c-30 0-54.32 24.303-54.32 54.283s24.32 54.284 54.32 54.284 54.32-24.303 54.32-54.284c-.002-29.98-24.321-54.283-54.32-54.283zm0 101.565c-26.13 0-47.313-21.169-47.313-47.282 0-26.113 21.183-47.281 47.313-47.281 26.13 0 47.313 21.168 47.313 47.281s-21.183 47.282-47.313 47.282z"
                            class="prefix__st1" />
                        <g id="prefix__g16" transform="matrix(.11647 0 0 .11639 574.077 567.372)">
                            <path id="prefix__polygon8" d="m649.51 640.66 38.15 143.56 291.19 185.79-185.78-291.2z"
                                class="prefix__st2" />
                            <path id="prefix__polygon10" d="m650.21 641.36-38.15-143.55-291.19-185.79 185.79 291.2z"
                                class="prefix__st2" />
                            <path id="prefix__polygon12" d="M650.24 640.25 506.68 678.4 320.9 969.6l291.19-185.79z"
                                class="prefix__st2" />
                            <path id="prefix__polygon14" d="m649.97 640.52 143.56-38.15 185.79-291.19-291.2 185.78z"
                                class="prefix__st2" />
                        </g>
                        <path id="prefix__path18" stroke-width=".116"
                            d="M649.905 603.864c-21.21 0-38.406 17.184-38.406 38.38 0 21.197 17.195 38.38 38.406 38.38 21.21 0 38.405-17.183 38.405-38.38 0-21.196-17.194-38.38-38.405-38.38zm0 74.706c-20.075 0-36.35-16.263-36.35-36.326s16.274-36.325 36.35-36.325 36.35 16.263 36.35 36.326-16.275 36.325-36.35 36.325z"
                            class="prefix__st1" />
                        <g id="prefix__g28" transform="matrix(.11647 0 0 .11639 574.077 567.372)">
                            <path id="prefix__polygon20" d="m649.16 642.83 151.75 88.04 398.36-88.04-398.36-88.03z"
                                class="prefix__st2" />
                            <path id="prefix__polygon22" d="M650.33 642.83 498.58 554.8l-398.35 88.03 398.35 88.04z"
                                class="prefix__st2" />
                            <path id="prefix__polygon24" d="M649.43 641.88 561.4 793.64l88.03 398.35 88.03-398.35z"
                                class="prefix__st2" />
                            <path id="prefix__polygon26" d="m649.43 642.33 88.03-151.75-88.03-398.36-88.03 398.36z"
                                class="prefix__st2" />
                        </g>
                        <ellipse id="prefix__circle30" cx="649.769" cy="642.189" stroke-width=".116" class="prefix__st0"
                            rx="13.741" ry="13.731" />
                    </g>
                </svg>
                 User Guidance
                 User Guidance
             </h1>
             </h1>
             <p class="lead">
             <p class="lead">
                 The LINKS User Guidance, like a compass, aims to support navigation and orientation within and across two
                 The LINKS User Guidance, like a compass, aims to support navigation and orientation within and across two
Line 288: Line 26:
         </div>
         </div>


        <!-- THEME -->
         <div class="theme">
         <div class="theme">
             <h2>Improving Communication</h2>
             <h2>Improving Communication</h2>
Line 293: Line 32:
                 <h3>Targeting Communication</h3>
                 <h3>Targeting Communication</h3>
                 <div class="question">
                 <div class="question">
                     <h4>
                     <h4>Who do you want to target with your communication plan(s)?</h4>
                        Who do you want to target with your communication plan(s)?
                    </h4>
 
                     <div class="answer">
                     <div class="answer">
                         <h5>Citizens <br>
                         <h5>Citizens <br>
Line 316: Line 52:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Readings and stories from Feel Safe.
                                     Explore projects from around the globe for a more child-targeted communication.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 322: Line 58:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Handbook on how to mobilise citizens.
                                     Learning module on how to be prepared in case of evacuation or in-sheltering.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 328: Line 64:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Handbook on risk awareness.
                                     Learning module on how to communicate risk using different media.
                                 </div>
                                 </div>
                             </div>
                             </div>
                         </div>
                         </div>
                         <h5>Vulnerable Groups<br>
                         <h5>Vulnerable Groups<br>
                         <small style="opacity:.7">How can you target vulnerable groups?</small></h5>
                         <small style="opacity:.7">How can you target vulnerable groups?</small></h5>
Line 345: Line 80:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     How to set up your communication channel.
                                     Learning module on how to create an accessible social media post.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 351: Line 86:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Potential accessibility problems.
                                     Learning module on how to solve potential accessibility issues.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 357: Line 92:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Connecting problems to actions.
                                     Learning module on how to connect accessibility problems to actions.
                                 </div>
                                 </div>
                             </div>
                             </div>
                         </div>
                         </div>
                         <h5>Students<br>
                         <h5>Students<br>
                         <small style="opacity:.7">How can you target students?</small></h5>
                         <small style="opacity:.7">How can you target students?</small></h5>
Line 368: Line 102:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Communicating during emergencies.
                                     Access educational resources on key topics that can help you organize and conduct diaster preparedness education activities with children.
                                </div>
                            </div>
                            <div class="choice safe" id="tc-who-stud-safe-vul">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Reducing vulnerability.
                                </div>
                            </div>
                            <div class="choice safe" id="tc-who-stud-safe-vul">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Increasing awareness.
                                </div>
                            </div>
                            <div class="choice safe" id="tc-who-stud-safe-vul">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Stories: Family communication plan.
                                 </div>
                                 </div>
                             </div>
                             </div>
                        </div>
                    </div>
                </div>
                <div class="question">
                    <h4>
                        How can you target your communication plan(s)?
                    </h4>
                    <div class="answer">
                        <div class="answer-wrapper">
                         </div>
                         </div>
                     </div>
                     </div>
Line 407: Line 113:
                 <h3>Ensuring Credible Information</h3>
                 <h3>Ensuring Credible Information</h3>
                 <div class="question">
                 <div class="question">
                     <h4>
                     <h4>How can you ensure credible information exchange?</h4>
                        How can you ensure credible information exchange?
                    </h4>
 
                     <div class="answer">
                     <div class="answer">
                         <div class="answer-wrapper">
                         <div class="answer-wrapper">
Line 428: Line 131:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Mobility: Giving information to citizens.
                                     Learning module on how to communicate with citizens.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 434: Line 137:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Feel Safe includes several activities on communication.
                                     Find here educational resources to explore the importance of a good communication in DRM.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 445: Line 148:
                 <h3>Making Information Accessible</h3>
                 <h3>Making Information Accessible</h3>
                 <div class="question">
                 <div class="question">
                     <h4>
                     <h4>How can you make your information accessible?</h4>
                        How can you make your information accessible?
                    </h4>
 
                     <div class="answer">
                     <div class="answer">
                         <div class="answer-wrapper">
                         <div class="answer-wrapper">
Line 472: Line 172:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Handbook on accessibility.
                                     How to ensure the accessibility of your information.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 478: Line 178:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Handbook on risk awareness.
                                     Learning module on how to communicate risk using different media.
                                </div>
                            </div>
                            <div class="choice safe" id="eci-acc-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Educational platform Feel Safe also covers information accessibility.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 495: Line 189:
                 <div class="rw-wrap">
                 <div class="rw-wrap">
                     <h4 class="rw">
                     <h4 class="rw">
                         <small>Tip:</small><br>
                         <small>Consider as well:</small><br>
                         What do you have to consider to facilitate strategic and inclusive use of social media and crowdsourcing in your
                         What do you have to consider to facilitate strategic and inclusive use of social media and crowdsourcing in your
                         organisation in disaster situations?
                         organisation in disaster situations?<br>
                        <div class="rw-link">Check the <a href="/index.php/Resilience_Wheel">Resilience Wheel</a>!</div>
                     </h4>
                     </h4>
                 </div>
                 </div>
Line 503: Line 198:
         </div>
         </div>


        <!-- THEME -->
         <div class="theme">
         <div class="theme">
             <h2>Engaging With Citizens</h2>
             <h2>Engaging With Citizens</h2>
Line 508: Line 204:
                 <h3>Collecting and Analysing Information</h3>
                 <h3>Collecting and Analysing Information</h3>
                 <div class="question" data-aspect="Social">
                 <div class="question" data-aspect="Social">
                     <h4>
                     <h4>How can you search and monitor information?</h4>
                        How can you search and monitor information?
                    </h4>
 
                     <div class="answer">
                     <div class="answer">
                         <div class="answer-wrapper">
                         <div class="answer-wrapper">
Line 530: Line 223:
                 </div>
                 </div>
                 <div class="question">
                 <div class="question">
                     <h4>
                     <h4>How can you carry out content analysis?</h4>
                        How can you carry out content analysis?
                    </h4>
 
                     <div class="answer">
                     <div class="answer">
                         <div class="answer-wrapper">
                         <div class="answer-wrapper">
Line 548: Line 238:
                                 </div>
                                 </div>
                             </div>
                             </div>
                             <div class="choice case" id="ewc-sam-case">
                             <div class="choice case" id="ewc-ca-case">
                                 <div class="button">Use cases</div>
                                 <div class="button">Use cases</div>
                                 <div class="desc">
                                 <div class="desc">
Line 562: Line 252:
                 <h3>Mobilising Citizens</h3>
                 <h3>Mobilising Citizens</h3>
                 <div class="question">
                 <div class="question">
                     <h4>
                     <h4>How can you mobilise citizens?</h4>
                        How can you mobilise citizens?
                    </h4>
 
                     <div class="answer">
                     <div class="answer">
                         <div class="answer-wrapper">
                         <div class="answer-wrapper">
Line 583: Line 270:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Handbook on mobility includes actions useful for mobilizing citizens.
                                     Learning module on how to coordinate spontaneous aids from citizens.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 589: Line 276:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Handbook on risk awareness.
                                     Learning module on how to create messages that motivate action.
                                 </div>
                                 </div>
                             </div>
                             </div>
                             <div class="choice safe" id="ewc-mob-handbook-safe">
                             <div class="choice safe" id="ewc-mob-safe">
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Feel Safe promotes the use of social media and digital education.
                                     Readings, studies and practical tools to help you engage children and young people in DRM.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 609: Line 296:
                         How can you mobilise volunteers?
                         How can you mobilise volunteers?
                     </h4>
                     </h4>
                     <div class="answer">
                     <div class="answer">
                         <div class="answer-wrapper">
                         <div class="answer-wrapper">
Line 627: Line 313:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Handbook on mobilizing volunteers.
                                     Learning module on how to mobilize volunteers.
                                 </div>
                                 </div>
                             </div>
                             </div>
                         </div>
                         </div>
                     </div>
                     </div>
                </div>
            </div>
            <div class="subtheme">
                <div class="rw-wrap">
                    <h4 class="rw">
                        <small>Consider as well:</small><br>
                        How can you create an overview of social media and crowdsourcing activities in your organisation in the
                        context of disasters?<br>
                        <div class="rw-link">Check the <a href="/index.php/Resilience_Wheel">Resilience Wheel</a>!</div>
                    </h4>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
       
     </div>
     </div>


     <script>
     <!-- SCRIPT BEGIN -->
        // Attach plus icon to the title of expandable blocks.
    <script type="text/javascript" src="https://api.safety-base.eu/v2/links/ug/script.js"></script>
        document.querySelectorAll('.theme > h2, .subtheme > h3, .question > h4').forEach(el => {
    <!-- SCRIPT END -->
            const icon = document.createElement('div');
            icon.classList.add('plus', 'icon');
            el.insertBefore(icon, el.firstChild);
        });
 
        // Set up toggles for expandable blocks.
        document.getElementById('cmp-container').addEventListener('click', event => {
            if (event.target.tagName === 'H2') {
                document.querySelectorAll('H2').forEach(el => {
                    if (el === event.target) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
 
                const group = event.target.closest('.theme');
                document.querySelectorAll('.subtheme').forEach(el => {
                    if (group.contains(el)) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
            }
            if (event.target.tagName === 'H3') {
                document.querySelectorAll('H3').forEach(el => {
                    if (el === event.target) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
 
                const group = event.target.closest('.subtheme');
                document.querySelectorAll('.question').forEach(el => {
                    if (group.contains(el)) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
            }
            if (event.target.tagName === 'H4') {
                document.querySelectorAll('H4').forEach(el => {
                    if (el === event.target && !el.classList.contains('rw')) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
 
                const group = event.target.closest('.question');
                document.querySelectorAll('.answer').forEach(el => {
                    if (group.contains(el)) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
            }
        });
 
        const search = 'Search and Monitor',
            post = 'Post and Schedule',
            analysis = 'Analysis',
            metrics = 'Metrics',
            report = 'Report',
            collab = 'Collaboration',
            interop = 'Interoperability',
            meta = 'Meta';
 
        // Click actions.
        const actions = {
            'eci-acc-tech': {
                filter: {
                    functions: {
                        'Posting content': true
                    }
                }
            },
            'ewc-sam-tech': {
                filter: {
                    functions: {
                        'Hashtag search': true,
                        'Hashtag monitoring': true,
                        'Keyword search': true,
                        'Keyword monitoring': true
                    }
                }
            },
            'ewc-ca-tech': {
                filter: {
                    functions: {
                        'Hashtag search': true,
                        'Hashtag monitoring': true,
                        'Keyword search': true,
                        'Keyword monitoring': true,
                        'Text analysis': true
                    }
                }
            }
        };
 
        const handler = event => {
            const answerId = event.currentTarget.id;
            const act = actions[answerId];
 
            if (!actions) return;
 
            if (answerId.indexOf('tech') !== -1) {
                const enc = btoa(encodeURIComponent(JSON.stringify(act)));
                window.location.assign('/index.php/List_of_Disaster_Community_Technologies' + (act ? '?do=' + enc : ''));
            }
 
            if (answerId.indexOf('case') !== -1) {
                window.location.assign('/index.php/List_of_Use_Cases');
            }
 
            if (answerId.indexOf('guide') !== -1) {
                window.location.assign('/index.php/List_of_Guidelines');
            }
 
            if (answerId.indexOf('safe') !== -1) {
                window.location.assign('/index.php/Feel_Safe');
            }
 
            if (answerId.indexOf('handbook') !== -1) {
                window.location.assign('/index.php/Including_Citizens_Handbook_-_Accessibility');
            }
        }
 
        document.querySelectorAll('.choice').forEach(el => el.addEventListener('click', handler, { passive: true }));


    </script>
</includeonly>
</includeonly>

Latest revision as of 18:36, 12 June 2024

Development version of the User Guidance.
Under construction.


Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:UserGuidance&oldid=12770"