Botons per a accessibilitat (Components bootstrap) per a moodle

BOTONS i FONS de TEXT (components Bootstrap)

Una de les moltes coses que aprenem mentre anem preparant materials és a millorar la presentació dels continguts. L’aparença de moodle es pot canviar una mica i fer-la més professional editant el codi de text.

Al grup de treball de “preparació de materials de moodle” que estem fent ens han proporcionat aquesta fantàstica eina per a fer botons editables: elements web que es poden utilitzar per posar èmfasi en una part del continguts de moodle. 

Per a incloure’ls cal copiar el codi que ens interessi, anar al botó “mostra/amaga botons avançats” (fletxa ⤵ dels botons) i després al botó HTML </> de la barra de botons de l’editor de text i canviar el text pel text que vulguem. Dins de moodle ho veurem així:

**************************************

PER CANVIAR ELS TIPUS DE BOTONS I FONS DE PARÀGRAFS 

 __________________________________________________________

L’aparença de moodle es pot canviar una mica i fer-la més professional editant el codi de text.

Per a incloure’ls cal copiar el codi que ens interessi, anar al botó “mostra/amaga botons avançats” (fletxa ⤵ dels botons) i després al botó HTML </> de la barra de botons de l’editor de text i canviar el text pel text que vulguem.

////////////////////////////////////////////////////////////////////////////////////////////////////////////

TIPUS DE BOTONS I CODIS  

 

button

<button type=”button”>button<br></button><br>

 

Primary 

<button type=”button” class=”btn btn-primary” id=”yui_3_17_2_1_1594241010966_65″>Primary</button>

Secondary 

<button type=”button” class=”btn btn-secondary” id=”yui_3_17_2_1_1594241010966_66″>Secondary</button>

Success

<button type=”button” class=”btn btn-success” id=”yui_3_17_2_1_1594241010966_60″>Success</button>

Danger

<button type=”button” class=”btn btn-danger” id=”yui_3_17_2_1_1594241010966_67″>Danger</button>

Warning

<button type=”button” class=”btn btn-warning” id=”yui_3_17_2_1_1594241010966_69″>Warning</button>

Info

<button type=”button” class=”btn btn-info” id=”yui_3_17_2_1_1594241010966_70″>Info</button>

Light

<button type=”button” class=”btn btn-light” id=”yui_3_17_2_1_1594241010966_71″>Light</button>

Dark

<button type=”button” class=”btn btn-dark” id=”yui_3_17_2_1_1594241010966_72″>Dark</button>

Link

<button type=”button” class=”btn btn-link”>Link</button>

 

<div style=”text-align: center;” class=”_mce_tagged_br” id=”yui_3_17_2_1_1594241010966_75″><span style=”background-color: rgb(255, 68, 68); font-weight: bold;” id=”yui_3_17_2_1_1594241010966_74″><a style=”background-color:#f44″ class=”btn btn-danger btn-lg” title=”link” target=”_blank” href=”https://…” id=”yui_3_17_2_1_1594241010966_73″>TEXT</a></span></div>

////////////////////////////////////////////////////////////////////////////////////////////////////////////

TÍTOL DEL TEMA

 

<table class=”table table-bordered” style=”background-color: #0bb; width: 100%; height: 20px;” id=”yui_3_17_2_1_1594241010966_81″>

    <caption></caption>

    <thead id=”yui_3_17_2_1_1594241010966_80″>

        <tr id=”yui_3_17_2_1_1594241010966_79″>

            <th scope=”col” id=”yui_3_17_2_1_1594241010966_78″>

                <p style=”text-align: center;”><span style=”color: rgb(255, 255, 255); font-size: x-large;”>&nbsp;</span><br></p>

                <p style=”text-align: center;” id=”yui_3_17_2_1_1594241010966_77″><span class=”” style=”font-size: xx-large; color: rgb(255, 255, 255);” id=”yui_3_17_2_1_1594241010966_76″>TÍTOL DEL TEMA</span></p>

            </th>

        </tr>

    </thead>

    <tbody></tbody>

</table>

////////////////////////////////////////////////////////////////////////////////////////////////////////////

CONTINGUTS       

 

<div class=”well ” style=”background: #D9EDF7; padding:15px;margin:10px 0px 20px 0px “” id=”yui_3_17_2_1_1594241010966_85″ >

    <p>En la tasca 1 de cada mòdul us proposem explorar diferents recursos digitals [aspectes del funcionament de …].</p>

    <p>Concretament en aquest mòdul treballem:</p>

    <ul id=”yui_3_17_2_1_1594241010966_84″>

        <li id=”yui_3_17_2_1_1594241010966_83″>Títol tasca 1.1.</li>

        <li>Títol tasca 1.2.</li>

    </ul>

</div>

 

////////////////////////////////////////////////////////////////////////////////////////////////////////////

FONS PER A ACTIVITATS 

<div class=”well” style=”padding:15px;margin:10px 0px 20px 0px”><span class=”label label-info” style=”text-align: left; font-size: large;”></span><span class=”label label-info” style=”text-align: left; font-size: large;”>ACTIVITAT</span>&nbsp;<br>

        <p dir=”ltr”><span id=”docs-internal-guid-a8927b6e-7fff-35c7-9a41-93c929688e6d”>Descripció</span></p>

        <span class=”label label-danger” style=”text-align: left;”><span class=”” style=”font-size: medium;”>Què has de fer</span><br></span>

        <span class=”” style=”font-size: medium;”><br></span>

        <ul>

        </ul>

        <ol>

            <li>…</li>

            <li>…</li>

        </ol>

        <ul>

            <li><br></li>

            <li><br></li>

        </ul>

 

        <ul>

            <li><br></li>

 

        </ul>

 

        <span class=”label label-danger” style=”text-align: left; font-size: large;”><span class=”” style=”font-size: medium;”>En la tramesa</span></span>

        <span class=”” style=”font-size: medium;”><br></span>

        <ul>

            <li><span id=”docs-internal-guid-367441cf-7fff-c3a7-a392-364c2e72e616″>&nbsp;Copia l’enllaç de l’arxiu i comparteix-lo en aquesta tasca convenientment.</span></li>

        </ul><span class=”” style=”color: rgb(239, 69, 64);”><span class=”” style=”color: rgb(51, 51, 51);”></span></span>

    </div>

    <div class=”well” style=”background: #FFFFDD;padding:15px;margin:10px 0px 20px 0px”>

        <p>&nbsp;<span class=”label label-info” style=”font-size: medium;”>Info</span><span><span style=”color: rgb(172, 32, 18);”><span style=””><span style=”color: rgb(172, 32, 18);”>&nbsp;</span></span>

            </span>

            </span><span style=”font-size: 1rem;”><span style=”color: rgb(172, 32, 18);”><span><span><span><span class=”” style=”color: rgb(51, 51, 51);”>Aquesta activitat té seguiment de </span>

            <span class=”” style=”color: rgb(51, 51, 51);”>compleció&nbsp;automàtic</span><span class=”” style=”color: rgb(51, 51, 51);”>.<span><span class=”” style=”color: rgb(239, 69, 64);”> Per tal que</span></span><span>

        </span></span><span>

        </span></span><span>

        </span></span><span>

        </span></span><span>

        </span></span><span>

        </span></span><span style=”font-size: 1rem;”><span style=”color: rgb(172, 32, 18);”><span><span class=”” style=”color: rgb(51, 51, 51);”><span><span class=”” style=”color: rgb(239, 69, 64);”>&nbsp;es mostri l’activitat com completada cal que realitzis l’entrega.</span></span>

            </span>

            </span>

            </span>

            </span>

        </p>

 

        <p>&nbsp;<span class=”label label-info” style=”font-size: medium;”>Avaluació</span><strong>&nbsp;</strong><span style=”font-size: 1rem;”>Aquesta activitat la revisarà el teu professor/a i tindrà efectes sobre la qualificació general.</span></p><span>

    <p style=”font-weight: bold;”></p>

  <p>&nbsp;<span class=”label label-info” style=”font-size: medium;”>Recursos</span><strong>&nbsp;</strong><span style=”font-size: 1rem;”>Com crear… (</span><a href=”https://support.google.com/drive/answer/2375091?co=GENIE.Platform%3DDesktop&amp;hl=es”

            target=”_blank” style=”background-color: rgb(255, 255, 221); font-size: 1rem;”>support.google.com</a><span style=”font-size: 1rem;”>)</span></p>

        </span>

    </div><br>

    <p></p>

////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

FONS PER A MÉS INFORMACIÓ 

 

<div class=”well ” style=”background: #FFFFDD; padding:15px;margin:10px 0px 20px 0px “>

    <p>Una vegada feu la tramesa de la tasca es marca la compleció de manera automàtica. Encara que els facilitadors poden comprovar la vostra tramesa no us faran cap comentari de manera regular.</p>

    <p>La tasca és una activitat autoavaluable, té tramesa però <strong>no té avaluació per part dels facilitadors</strong>.</p>

    <p></p>

    <p><span class=”label label-info “>Info</span><strong><span style=”color: #ac2012; “><strong><span style=”color: #ac2012; “> Aquesta tasca té seguiment de <a target=”_blank ” href=”http://ateneu.xtec.cat/wikiform/wikiexport/cmd/tac/moodle2/b7_avaluacio/01_seguiment#complecio_del_curs_i_de_les_activitats “>compleció</a>, perquè es mostri l’activitat com completada cal que facis la tramesa.</span></strong></span>

        </strong>

    </p>

</div>

 

////////////////////////////////////////////////////////////////////////////////////////////////////////////

FONS PER A ACTIVITATS 

 

 

 

 

 

<div class=”well ” id=”yui_3_17_2_1_1594241010966_86 “; padding: 15px;margin:10px 0px 20px 0px”><span class=”label label-info” > TASCA 1.1.</span> <strong>TÍTOL TASCA 1.1.</strong><span class=”label label-info” ></span>

    <p></p>

    <p>En aquesta tasca us proposem …</p>

    <p></p>

    <p>Feu:</p>

    <ul>

        <li></li>

    </ul>

    <span class=”label label-danger”>En la tramesa: </span> Afegiu …</div>

////////////////////////////////////////////////////////////////////////////////////////////////////////////

CODI PER CREAR UNA TAULA 

TAULA: Full de càlcul

	A	B	C	D	E
1	Ref	Capçal 1	Capçal 2	Capçal 3	Capçal 4
2	1	A	A1	…	…
3	2	…	…	…	…
4	…	…	…	…	…

<table width=”100%” style=”font-size: 1rem; border: 1px solid rgb(170, 170, 170);”>

            <caption style=”font-size: 14px; text-align: center; color: #FFFFFF; background-color: #008888″><span style=”font-size: large;” class=””>TAULA:&nbsp;</span><span style=”font-size: large;” class=””><span class=”” style=”color: rgb(255, 207, 53);”>Full de càlcul</span><br></span>

            </caption>

            <thead>

                <tr style=”background-image:linear-gradient(#ddd,#fff,#eee,#ddd,#bbb);”>

                    <th scope=”col” style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 5px;”><br></th>

                    <th scope=”col” style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 5px;”>A</th>

                    <th scope=”col” style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 5px;”>B</th>

                    <th scope=”col” style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 5px;”>C</th>

                    <th scope=”col” style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 5px;”>D</th>

                    <th scope=”col” style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 5px;”>E</th>

                </tr>

            </thead>

            <tbody>

                <tr style=”background-color:#b2cdf7;”>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); background-image: linear-gradient(rgb(221, 221, 221), rgb(255, 255, 255), rgb(238, 238, 238), rgb(221, 221, 221), rgb(187, 187, 187)); padding: 3px; vertical-align: text-top;”>1</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>Ref</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>Capçal 1</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>Capçal 2</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>Capçal 3</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>Capçal 4</td>

                </tr>

                <tr>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); background-image: linear-gradient(rgb(221, 221, 221), rgb(255, 255, 255), rgb(238, 238, 238), rgb(221, 221, 221), rgb(187, 187, 187)); padding: 3px; vertical-align: text-top;”>2</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>1</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>A</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>A1</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>…</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>…</td>

                </tr>

                <tr style=”background-color:#ecf9ff;”>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); background-image: linear-gradient(rgb(221, 221, 221), rgb(255, 255, 255), rgb(238, 238, 238), rgb(221, 221, 221), rgb(187, 187, 187)); padding: 3px; vertical-align: text-top;”>3</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>2</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>…<br></td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>…</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>…</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>…</td>

                </tr>

 

                <tr>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); background-image: linear-gradient(rgb(221, 221, 221), rgb(255, 255, 255), rgb(238, 238, 238), rgb(221, 221, 221), rgb(187, 187, 187)); padding: 3px; vertical-align: text-top;”>4</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>…</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>…</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>…</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>…</td>

                    <td style=”text-align: center; border-right-style: solid; border-right-color: rgb(170, 170, 170); padding: 3px; vertical-align: text-top;”>…</td>

                </tr>

            </tbody>

        </table>

 

BOTONS i FONS de TEXT (components Bootstrap)

<table style=”background-color: rgb(9, 150, 178)” width=”100%” height=”70px” border=”2px”>
<thead>
<tr>
<th scope=”col” style=”text-align: left;”>
<b style=”text-align: left;”><span class=”” style=”font-size: x-large;”>&nbsp;<span class=”” style=”color: rgb(255, 255, 255);”>BOTONS i FONS de TEXT (components Bootstrap)</span></span><span class=”” style=”font-size: x-large;”><span class=”” style=”color: rgb(125, 159, 211);”>&nbsp;</span></span></b>
<div class=”editor-indent” style=”margin-left: 30px;”>
</div><span class=”” style=”font-size: large;”>
</span>
</th>
</tr>
</thead>
</table>