Incarca filme Youtube fara codul iframe sau jQuery (SEO)

Cautam recent o solutie pentru situl RobotFX de a incarca filmele tutorial ale acestuia fara a folosi insa codul initial al Youtube (iframe). Cred ca toti webmasterii stiu, sau ar trebui sa stie ca nu este recomandata folosirea iframe-urilor in paginile web. Nu numai ca ingreauneaza incarcarea paginii - deoarece se incarca si pagina din iframe, dar se 'scurge' si un pic din rank-ul paginii.
E simplu de facut cu jQuery si se gasesc nenumarate plugin-uri pentru a incarca filmele Youtube fara a folosi iframe-ul. Insa RobotFX nu are jQuery si nu dorea folosirea acestuia deoarece deja se foloseste de multe alte javascript-uri.
O solutie am gasit prin folosirea unui mic cod javascript si a unor trucuri CSS. Fara a mai lungi vorba, iata solutia:
Codul HTML

<div class="youtube-container"><div class="youtube-player" data-id="ZgEB_SRC9iw"><div><img alt="RobotFX video demonstration" class="youtube-thumb" src="//i.ytimg.com/vi/ZgEB_SRC9iw/hqdefault.jpg"><div class="play-button"></div></div></div></div>

Codul CSS

.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 570px; }
.youtube-player { display: block; width: 100%; padding-bottom: 56.25%; overflow: hidden; position: relative; height: auto; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button {height:318px;width:570px;left: 0px; top:0px; position: absolute; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6jj4SirQ4qs08-aZamQIca1hSW0gpXsSK0QwB_9tsLrNT7u1ewEwi2Xm7w4lQ5bqdTZ8DHTxVU2gmLbVqle6UJ2tRqOt7Qc4bL9kLddFtr2EQJNICm0bxIfS4_IEzOiNyTQz-ZAV6KRc/s1600/download.png") no-repeat; z-index:3;}
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index:99;}
div.play-button:hover {filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1);}

Codul JavaScript

function labnolThumb(e){return'<img alt="RobotFX video demonstration" class="youtube-thumb" src="//i.ytimg.com/vi/'+e+'/hqdefault.jpg"><div class="play-button"></div>'}function labnolIframe(){var e=document.createElement("iframe");e.setAttribute("src","//www.youtube.com/embed/"+this.parentNode.dataset.id+"?rel=0&autoplay=1&autohide=2&border=0&wmode=opaque&controls=1&showinfo=0"),e.setAttribute("frameborder","0"),e.setAttribute("id","youtube-iframe"),e.setAttribute("allowfullscreen","allowfullscreen"),this.parentNode.replaceChild(e,this)}!function(){for(var e=document.getElementsByClassName("youtube-player"),t=0;t<e.length;t++){var o=document.createElement("div");o.innerHTML=labnolThumb(e[t].dataset.id),o.onclick=labnolIframe,e[t].appendChild(o)}}();

Le gasiti si pe JSFiddle si puteti testa vizitand situl RobotFX.

Cum sa creezi imagini sprite automat

Spriteme.org

 Recent am gasit un sit ce ofera un serviciu util, cred, tuturor webmasterilor si creatorilor de situri web. Serviciul este gratuit, cel putin deocamdata, si consta in crearea de imagini sprite automat, din imaginile folosite de sit (in codul paginii sau in fisierele CSS).

 Pentru cei care nu stiu despre ce e vorba, am sa explic pe scurt. Cu cat sunt mai multe imagini inserate intr-o pagina web (site), sau orice alte elemente (javascript, flash, media, css, etc), cu atat pagina se va incarca mai greu. Apare deseori conflictul dintre dorinta de a crea un sit frumos, "colorat", si cea de a crea un sit simplu, rapid, insa mai putin atractiv ca si design. Din fericire, aceste elemente ce constituie pagina web se pot combina reducand, astfel, numarul de conexiuni dintre vizitatorul sitului si serverul ce gazduieste pagina web. Astfel creste viteza de navigare si de incarcare a paginilor web in browser (navigator). Fisierele javascript (js) se pot combina intre ele, CSS-urile de asemenea, iar imaginile des folosite (ca de exemplu imagini fundal pentru meniuri, butoane, chenare s.a.m.d.) se combina, deasemenea, in sprite-uri.

  Astfel, sprite-ul este o singura imagine ce contine toate celelalte imagini pe care le continea/folosea pagina web. O singura imagine inseamna o singura conexiune cu serverul si o viteza mult mai mare de incarcare a paginii in navigator.

 Situl ce ofera acest serviciu gratuit este spriteme.org. Pentru a crea sprite-uri din imaginile sitului dvs mergeti intai la spriteme.org si trageti bookmark-ul de pe pagina lor in meniul navigatorului. Vizitati apoi pagina sitului dvs si faceti click pe bookmark-ul spriteme.org din bara de link-uri favorite a navigatorului. Unealta este destul de inteligenta si va deschide o fereastra in care va recomanda numai anumite imagini; puteti sterge dintre ele ori adauga altele. In aceasta fereastra popup, odata ce ati decis ce imagini vor fi combinate, faceti click pe butonul Make Sprite; imaginile alese vor fi combinate. Dupa aceasta operatie faceti un click pe butonul export CSS - se va deschide o alta fereastra de unde puteti descarca imaginea sprite si vedea schimbarile ce trebuiesc facute in fisierul CSS.

Atat!

Atentie: imaginea sprite nu va fi gazduita pentru totdeauna de catre situl gazda, va trebui s-o descarcati in calculatorul dvs si s-o incarcati pe situl dvs. Bineinteles, puteti folosi alte servicii de gazduire imagini, precum Flickr, insa nu uitati sa modificaticodul CSS pentru a reflecta schimbarile facute.

Deasemenea, odata ce faceti click pe Make Sprite, unealta celor de la spriteme.org va afisa modificarile pe pagina dvs web a.i. puteti vedea daca totul functioneaza (va functiona) corect dupa ce veti face modificarile.

"Share links" cu jquery, fara AddThis sau ShareThis

Share cu jQuery

In acest articol am sa scriu cum puteti crea un meniu de "share links" asemanator celor oferite de siturile gen AddThis ori Share This (si alte cateva). O scurta explicatie, prin "Share links" ma refer la link-urile ce va trimit catre siturile pe care puteti sa publicati paginile/siturile dvs. favorite, precum Facebook, Twitter, Digg si multe altele. Stiu, nu sunt greu de facut, insa codul meu (de fapt al celor de la Craigslist, de unde l-am imprumutat) este mult mai rapid si nu ingreuneaza incarcarea paginii web care il contine.

Dezavantajul siturilor AddThis, ShareThis, etc, este ca de multe ori scriptul lor se incarca foarte greu.

Asadar, sa trecem la codul propriu-zis. Apropos de cod, sunt necesare librariile jQuery pentru ca acesta sa functioneze; majoritatea siturilor folosesc deja javascriptul jQuery, asa ca probabil puteti sterge linia din acest cod care include jQuery, pentru a nu-l incarca de 2 ori pe aceeasi pagina/site. Deasemenea, puteti modifica acest cod ori aspectul acestuia (stilul CSS) dupa cum doriti si va sfatuiesc si sa descarcati poza cu icoanele siturilor de socializare din <style></style>, s-o reincarcati pe situl dvs. (ori pe contul Flickr, Photobucker, Picasa s.a.m.d.) si s-o folositi pe a dvs. deoarece este posibil sa renunt in viitor la Flickr si sa sterg aceasta poza.

Share links cu jQuery

<style>

div#shareSocial{border:2px #ccc solid;float:right;font-size:x-small;font-family:sans-serif;display:none;background:#FFF;width:10em;margin:7px;padding:7px;}div#shareSocial #sstitle{font-size:small;}div#shareSocial #ssmain{border-top:2px #ccc solid;margin-top:6px;}div#shareSocial #ssGetMore{padding:2px 0 0 20px;}div#shareSocial a{color:#4c4c4c!important;text-decoration:none;background:url(http://farm9.staticflickr.com/8162/7252758694_794ca304f3_b.jpg) no-repeat top left;line-height:16px;display:block;height:16px;border-bottom:1px #eee solid;margin:3px;padding:0 0 0 20px;}div#shareSocial a.more{display:none;}#shareSocial a#delicious{background-position:0 -176px;}#shareSocial a#diigo{background-position:0 -208px;}#shareSocial a#digg{background-position:0 -192px;}#shareSocial a#email{background-position:0 -224px;}#shareSocial a#facebook{background-position:0 -240px;}#shareSocial a#fark{background-position:0 -256px;}#shareSocial a#friendfeed{background-position:0 -304px;}#shareSocial a#mixx{background-position:0 -464px;}#shareSocial a#myspace{background-position:0 -496px;}#shareSocial a#stumbleupon{background-position:0 -704px;}#shareSocial a#propellor{background-position:0 -576px;}#shareSocial a#reddit{background-position:0 -592px;}#shareSocial a#technorati{background-position:0 -752px;}#shareSocial a#twitter{background-position:0 -784px;}div#shareSocial a:hover{background:#eee;}

</style>

<div id="shareSocial">

<div id="sstitle">Share this on: </div>

<div id="ssmain">

<a title="Email" rel="nofollow" href="mailto:?subject=#T#&body=Read this: #U#" id="email">Email</a>

<a title="Diigo" rel="nofollow" target="_blank" class="more" href="http://www.diigo.com/post?url=#U#&amp;title=#T#" id="diigo">Diigo</a>

<a title="Digg" rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=#U#&amp;title=#T#" id="digg">Digg</a>

<a title="delicious" rel="nofollow" target="_blank" href="http://del.icio.us/save?v=5&amp;noui&amp;jump=close&amp;url=#U#&amp;title=#T#" id="delicious">delicious</a>

<a title="Facebook" rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=#U#&t=#T#" id="facebook">Facebook</a>

<a title="Fark" rel="nofollow" target="_blank" class="more" href="http://cgi.fark.com/cgi/fark/farkit.pl?u=#U#" id="fark">Fark</a>

<a title="FriendFeed" rel="nofollow" target="_blank" class="more" href="http://friendfeed.com?url=#U#&amp;title=#T#" id="friendfeed">FriendFeed</a>

<a title="Mixx" rel="nofollow" target="_blank" class="more" href="http://www.mixx.com/submit/story?page_url=#U#" id="mixx">Mixx</a>

<a title="MySpace" rel="nofollow" target="_blank" href="http://www.myspace.com/index.cfm?fuseaction=postto&amp;t=#T#" id="myspace">MySpace</a>

<a title="Propellor" rel="nofollow" target="_blank" class="more" href="http://www.propeller.com/story/submit/?url=#U#&amp;title=#T#" id="propellor">Propellor</a>

<a title="reddit" rel="nofollow" target="_blank" class="more" href="http://reddit.com/submit?url=#U#&amp;title=#T#" id="reddit">reddit</a>

<a title="StumbleUpon" rel="nofollow" target="_blank" class="more" href="http://www.stumbleupon.com/submit?url=#U#&amp;title=#T#" id="stumbleupon">StumbleUpon</a>

<a title="technorati" rel="nofollow" target="_blank" class="more" href="http://technorati.com/faves?add=#U#" id="technorati">technorati</a>

<a title="Twitter" rel="nofollow" target="_blank" href="http://twitter.com/home?status=#U#" id="twitter">Twitter</a>

<div id="ssGetMore">More...</div>

</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){$("#shareSocial").show()

.mouseleave(function(){$("#ssGetMore").show(50);$("#ssmain a.more").hide(50);});$("#shareSocial a").each(function(){h=$(this).attr('href');h=h.replace(/#U#/g,encodeURIComponent(self.location.href));h=h.replace(/#T#/g,encodeURIComponent($("head title").html()));$(this).attr('href',h);}).mouseover(function(){window.status='';return false;});$("#ssGetMore").mouseenter(function(){$("#ssGetMore").hide(50);$("#ssmain a.more").show(50);});});

</script>

In codul de mai sus aveti, in ordinea scrierii, codul CSS ce va permite sa schimbati aspectul casutei cu link-urile de sharing, DIV-ul ce contine link-urile, javascriptul jQuery gazduit de Google (stergeti-l daca il aveti deja inclus in pagina) si inca un script compatibil cu jQuery care extrage link-ul paginii si titlul acesteia, pentru a crea link-urile de sharing.
Atat!
Meniul drop-down cu link-urile de share va aparea precum in poza.