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
 
(28 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 493: Line 187:


             <div class="subtheme">
             <div class="subtheme">
                 <h4 class="rw">What do you have to consider to facilitate strategic and inclusive use of social media and crowdsourcing in your
                 <div class="rw-wrap">
                    organisation in disaster situations?</h4>
                    <h4 class="rw">
                        <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
                        organisation in disaster situations?<br>
                        <div class="rw-link">Check the <a href="/index.php/Resilience_Wheel">Resilience Wheel</a>!</div>
                    </h4>
                </div>
             </div>
             </div>
         </div>
         </div>


        <!-- THEME -->
         <div class="theme">
         <div class="theme">
             <h2>Engaging With Citizens</h2>
             <h2>Engaging With Citizens</h2>
Line 503: 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 525: 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 543: 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 557: 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 578: 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 584: 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 604: 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 622: 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"