Html edizioa

Ikapp-en edukia editatzerakoan, gehienetan testu editore bat eskeintzen da. Testu arrunta idazten dugu eta editorearen laguntzaz html kodera bihurtzen da gehitzen ditugun edizio ezaugarriak (negritakkursibaletra tamainaletra kolorea, etab.)

Aldiz zenbait kasuetan edizio "konplikatuagoa" egin nahi dugu eta horretarako zuzenan html kodea "idatzi" behar dugu, adibidez audio edo/eta bideo bat zuzenean testuan erakusteko, zerrenda desplegagarri bat egiteko, etab. Honetarako testu editoreko "HTML Iturburua"  botoia erabili beharko dugu eta bertan ateratzen den kodea da html kodea, hemen gehitu beharko dugu guk nahi dugun kodea.

Ondorengo testuan horrelako adibideak bilduko ditugu, testu editoreak ematen ez dituen eta erabilgarri izan daitezkeen html kodeketa batzuen adibidea:

  • Audioa: Audio bat zuzenean entzugarri egon dadin nahi izango bagenu, zuzenean html kodea idatzi beharko genuke. Ikapp-en hau modu zuzenean gerta dadin kodeketa berezi bat proposatzen dugu.  
    Audioa testu editorean jarri aurretik bi gauza hartu behar dira kontutan: audioaren kokapena eta audioaren formatoa.
     
    Audioaren kokapena: Audioa webgunetik kanpo egon daiteke, kasu honetan audioaren web helbide osoa beharko genuke, adib: http://www.kilometroak.net/sites/default/files/KMK2014/Abestia/kmk14.ogg. Bestalde audioa ere gure webgunera igo dezakegu, horretarako webguneko Edukia ataleko Fitxategia pestañan sartu eta nahi dugun lekuan igo ditzakegu audioak (karpeta egitura ulergarri batean gordetzea gomendatzen dugu, adib. /audioak/abestiak/), fitxategia igo ondoren, fitxategian gainean eskuineko botoiarekin klik eginda ateratzen den menuan Get Info aukeratu eta ondoren erakusten zaigun leihoko path atala kopiatu, adib. /sites/default/files/KMK2014/Abestia/kmk14.ogg

    Audioaren formatoa: Nabigatzaile guztiek ez dute berdin funtzionatzen eta batzuetan ogg formatodun audioa hobesten bada ere beste batzuek ez dute hau ezagutzen eta beraz mp3 erabiltzea hobesten da kasu horietan, azken batzuek aldiz ez dute onartzen audio erreproduzigailua webgunean txertatzea. Beraz guk bi formato ezberdinetako audioa sortzea gomendatzen dugu .ogg eta .mp3, eta biak leku berean igotzea eta izen berdinarekin. Horrela ahalik eta aukera gehien osatuko ditugu.

    Kodearen formatua: Azkenik audio bat txertatzeko eta aurreko jarraibideak jarraitu badituzue ondorengo formatoa erabili beharko duzu html edizioan, ondoren audio erreproduktorea erakusteko. Ondorengo testua jarri zure editorean eta beltzez dagoen testua audioaren kokapenagatik aldatu. Audioa formatu bakarrean baldin badago dagokion formatokoa jarri bakarrik. Azken testua "Zure nabigatzaileak ez du audio etiketarik onartzen"  badaezpada jartzen da, nabegatzaileak ez badu audio formaturik onartuko testua aterako litzateke horren ordez.

    <audio controls>
       <source src="ogg  audioaren kokapenaren helbidea" type="audio/ogg"></source>
       <source src="mp3 audioaren kokapenaren helbidea" type="audio/mpeg"></source>
       Zure nabigatzaileak ez du audio etiketarik onartzen
    </audio>
    adib.
     Zure nabigatzaileak ez du audio etiketarik onartzen 
  • Bideo: Audien kasu antzeko da, baina beste etiketa batzuk beharko ditugu. Bideoaren kasuan, bideoa beste plataforma batean badago; youtube, vimeo, eta. beste modu bat erabiltzea da egokiean horretarako begiratu beste gida hau: bideoa txertatzeko gida
    Aldiz audio gure zerbitzarian bertan igo nahi badudu, audioen kasuan bezala webguneko Edukia ataleko Fitxategia pestañan sartu eta nahi dugun lekuan igo ditzakegu bideoak (karpeta egitura ulergarri batean gordetzea gomendatzen dugu, adib. /bideoak/), fitxategia igo ondoren, fitxategian gainean eskuineko botoiarekin klik eginda ateratzen den menuan Get Info aukeratu eta ondoren erakusten zaigun leihoko path atala kopiatu, adib. /sites/default/bideoak/bideoa.mp4

    Kodearen formatua: Azkenik bideo bat txertatzeko eta aurreko jarraibideak jarraitu badituzue ondorengo formatua erabili behar duzue html edizioan, ondorengo bideo erreproduktorea erakusteko. Ondorengo testua jarri zure editorean eta beltzen dagoen testua bideoaren kokapenagatik aldatu. Bideo formatu bakarrean baldin badago, dagokion formatukoa jarri bakarrik. Azken testua "Zure nabigatzaileak ez du video etiketarik onartzen" badaezpada jartzen da, nabigatzaileak ez badu video formaturik onartuko testua aterako litzateke horren ordez.
    <video controls width="320">

       <source src="ogg  bideoaren kokapenaren helbidea" type="video/ogg"></source>
       <source src="mp4 bideoaren kokapenaren helbidea" type="video/mpeg"></source>
       Zure nabigatzaileak ez du video etiketarik onartzen

    </video>
    adib.             Zure nabigatzaileak ez du video etiketarik onartzen

Gogoratu hau HTML edizio barruan bideo bat sartzeko egin daitekeen zairbait den arren, bideo eduki mota ere badagoela eta erabiltzeko errazago eta azkarragoa dela!
  • Menu desplegagarriak: Eduki batean batzuetan zerrendak gehitzen ditugu, zenbakidun zerrendak edo/eta buletadun zerrendak , baliteke kasu batzuetan zerrenda hauek azpi-zerrendak izatea  eta beraz agian zerrenda luzeegia geratzea. Kasu horietan agian menuko azpi-atal batzuk hasieran itxita ateratzea nahi izatea, horretarako ere html kodea editatu behar dugu.
    Azpi-zerrendadun zerrenda bat osatzean ondorengo html testua topatuko dugu HTML Iturburua atalean:
    <ul>
       <li>Menu desplegagarria (hasieran itxita)
          <ul>
             <li>Azpi-menu 1.1. aukera</li>
             <li>Azpi-menu 1.2. aukera</li>
             <li>Azpi-menu 1.3. aukera</li>
          </ul>
       </li>
       <li>Menu esteka arrunta</li>
       <li>Beste menu desplegagarria (hasieran zabalik)
          <ul>
             <li>Azpi-menu 3.1. aukera</li>
             <li>Azpi-menu 3.2. aukera</li>
          </ul>
       </li>
    </ul>

    Ezkutatu/erakutsi egin nahi dugun azpi-menuaren Izenburu testua div batean bildu behar dugu eta  "ikapp_collapsible" klasea eman behar diogu div-ari alde batetik, eta bestetik kanpo elementuari; <li>-ari hasieran zabalik edo itxita erakutsi nahi dugun adierazi behar da beste klase batez: itxita uzteko "ikapp_collapsed" klasea eman eta irekita uzteko "ikapp_ez_collapsed" klasea eman, horrela utziz:
    <ul>
       <li class="ikapp_collapsed"><div class="ikapp_collapsible">Menu desplegagarria (hasieran itxita)</div>
          <ul>
             <li>Azpi-menu 1.1. aukera</li>
             <li>Azpi-menu 1.2. aukera</li>
             <li>Azpi-menu 1.3. aukera</li>
          </ul>
       </li>
       <li>Menu esteka arrunta</li>
       <li class="ikapp_ez_collapsed"><div class="ikapp_collapsible">Beste menu desplegagarria (hasieran zabalik)</div>
          <ul>
             <li>Azpi-menu 3.1. aukera</li>
             <li>Azpi-menu 3.2. aukera</li>
          </ul>
       </li>
    </ul>

 

Adibidea.

  • Menu desplegagarria (hasieran itxita)
    • Azpi-menu 1.1. aukera
    • Azpi-menu 1.2. aukera
    • Azpi-menu 1.3. aukera
  • Menu esteka arrunta
  • Beste menu desplegagarria (hasieran zabalik)
    • Azpi-menu 3.1. aukera
    • Azpi-menu 3.2. aukera