HTML5 in audio v Google Chrome

Pred nekaj dnevi sem se ukvarjal s spletno stranjo, ki bo služila lokalnemu študentskem klubu kot informativna stran za pustni dogodek.En izmed zaželjenih featurjev je bil tudi, da v ozadju teče pesem glavne skupine.

In kot verjetno vsakdo sem preko iskalnika google poiskal spletno stran, kjer sem pesem pretvoril v 3 formate, kateri so podprti v vseh novejših brskalnikih in sicer v .wav (audio/wav), .mp3 (audio/mpeg) in .ogg (audio/ogg). Nato sem v html kodo dodal pesem v vseh treh omenjenih formatih

in tukaj sem naletel na zelo zanimivo težavo. Kljub temu, da je na wikipedia (vir: http://en.wikipedia.org/wiki/HTML5_Audio#Supported_audio_coding_formats) bilo jasno prikazano v tabeli, da Google Chrome podpira audio značko od verzije 9 naprej, se pesem le v chromu ni začela samodejno predvajati.

Rešitev sem sicer z nekaj iskanja po googlu sicer našel, ni mi pa čisto jasen vzrok te težave..

Rešitev, ki je v moji situaciji pomagala je bila ta, da sem bil primoran na audio značko dodati event listener:

 

Integracija WYSIWYG urejevalnika

WYSIWYG editor (angleška kratica za What You See Is What You Get – to kar vidiš, to boš tudi dobil) je popularen urejevalnik za urejanje besedil.

Velikokrat se ga uporablja v spletnih aplikacijah razvitih po meri, saj nam zelo olajša vnašanje in urejanje besedil z funkcijami kot so:

  • krepko, ležeče, podčrtano, prečrtano,
  • različni slogi
  • neoštevilčen in oštevilčen seznam
  • poravnave – levo, sredinsko in desno poravnano
  • odmiki besedila
  • vstavljanje povezav
  • in še številne druge funkcije.

wysiwyg urejevalnikSama integracija urejevalnika je sila preprosta. Sama koda za integracijo zgleda nekako takole kot je spodaj. Glavni del kode, ki je ne smete pozabiti vstaviti je delček javascript code med značakama <script></script> in pa seveda ne pozabiti vključiti ckeditor.js knjižnice in assets/style.css stila.

 

Enostavnejše kodiranje z Emmet pluginom

Emmet plugin – prej se je imenoval ZenCoding, je meni osebno najboljši plugin, ki jih uporabljam pri kodiranju, saj zelo pohitri samo kodiranje.

Zdaj se verjetno že sprašujete kaj je tisto, zaradi česar je pri meni ta plugin tako priljubljen. Odgovor je sila preprost. Kot sem že zgoraj povedal, plugin nudi super-duper funkcije s katerimi si lahko zelo pohitrite kodiranje oziroma pisanje html kode. Preberi več o Enostavnejše kodiranje z Emmet pluginom

HTML5 placeholder cross-browser podpora

Mnogi izmed vas verjetno že veste kakšno vlogo ima html5 placeholder funkcija, katero lahko uporabimo v značkah <input>. Za tiste, ki morda še ne veste, to je funkcija katero lahko uporabimo naprimer pri kontaktnih obrazcih, obrazcih za registracijo, pri obrazcih za prijavo itd. kot namig pri vnosu podatkov namesto, da bi uporabili <label> značke, kajti sama placeholder funkcija poskrbi, da se v <input> znački pojavi vnaprej določeno besedilo. Verjetno se sedaj že sprašujete kakšna je korist od te funkcije. Ja koristno je vsekakor to, da na strani ne rabimo več pisat pred vsako <input> značko še dodatnih značk – <label>, ampak preprosto to vrednost vpišemo v placeholder. Pa najboljše, da si to ogledamo kar na primeru.

Preberi več o HTML5 placeholder cross-browser podpora