Blog

Esempio di codice valido html5 responsive per video Youtube e Vimeo

Autore : vania Categoria : Open Source Mercoledì, 2 Settembre 2015 - 14:03

Ecco un semplice esempio di codice valido html5, responsive per i video youtube sul vostro sito:

Codice

<div style="width:98%;margin:auto">
<div style="
        position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;">
<object style="
        position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;"
        data="https://www.youtube-nocookie.com/embed/pRpeEdMmmQ0">
</object>
</div>
</div>

Ecco il risultato:

Ancora pi� comoda può essere la soluzione di inserire una classe CSS in un foglio di stile:

Codice

.video-responsive {
p...</codice=12></codice=17><div style="text-align:right"> <span style="cursor:pointer" class="data" onclick="DisPlay('Blog1_0');DisPlay('Blog2_0')"><strong>[Leggi tutto]</strong></span> </div>
</td></tr></table></div>
<div id="Blog2_0" style="display:none">
<table style="width:100%"><tr><td class="box" style="padding:6px 1px 6px 1px"><h4 style="margin-top:0">
Ecco un semplice esempio di codice valido html5, responsive per i video youtube sul vostro sito:
</h4>
<fieldset class="bcod" style="margin:6px 5px;padding:3px 4px 4px 4px"><legend class="bcod"> Codice </legend><textarea readonly rows="17" cols="30" style="font-size:12px;border:0px;overflow:auto;width:100%">
<div style="width:98%;margin:auto">
<div style="
        position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;">
<object style="
        position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;"
        data="https://www.youtube-nocookie.com/embed/pRpeEdMmmQ0">
</object>
</div>
</div>

Ecco il risultato:

Ancora pi� comoda può essere la soluzione di inserire una classe CSS in un foglio di stile:

Codice

.video-responsive {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden
}
.video-responsive iframe,object,embed {
position:absolute;
top:0;left:0;
width:100%;
height:100%
}

E quindi baster� poi includere tutti gli object dei video all'interno di un div con la classe da noi creata:

Codice

<div class="video-responsive">
<object data="https://player.vimeo.com/video/96602728?color=b3b526"></object>
</div>

[Comprimi]

Cookie Law e banner Google - la soluzione definitiva

Autore : vania Categoria : Internet Domenica, 14 Giugno 2015 - 11:41

[Leggi tutto]

In un articolo di Massimiliano Bossi su Mr.Webmaster viene proposto un codice molto interessante, che permette di caricare un banner di Google Adsense soltanto dopo che l'utente compie un click sulla pagina o un piccolo scroll. Ho modificato il codice in modo da far comparire un messaggio nel riquadro del banner ed un pulsante specifico per l'approvazione dei banner. In questo modo si può accettare la policy del sito e continuare la navigazione senza dover per forza accettare il banner e relativi cookie, proprio come la normativa esige. Infatti, ricordiamolo ancora una volta: prima di registrare cookie profilanti nel dispositivo di un utente è necessaria una specifica approvazione preventiva per un cookie o gruppo di cookie.

Per semplicità in questo codice mi sono avvalso di funzioni dipendenti dalla libreria Jquery e dal plugin Jquery-cookie, dal momento che già li uso nel CMS per altre cose. Se non vi serve Jquery potreste valutare l'uso di una qualche altra funzione javascript per la lettura e la scrittura dei cookie (ad esempio date un occhiata a questo tutorial).
Se volete usare Jquery e le vostre pagine non sono già predisposte al caricamento della libreria, inserite nell'header:

Codice

<script type="text/javascript">
 var ACLbannerCaricati = false;
function ACLcaricaBanner(){
  var ACLbannerCaricati = true;
  var t = 1;
  $('.adsense-cookie-law').each(function() {
    var banner = $(this);
    setTimeout(function(){
      var c = banner.data('client');
      var s = banner.data('slot');
      var w = banner.data('width');
      var h = banner.data('height');
      var adsense = '<scr'+'ipt>\n'
                  + 'google_ad_client = "'+c+'";\n'
                  + 'google_ad_slot = "'+s+'";\n'
                  + 'google_ad_width = '+w+';\n'
                  + 'google_ad_height = '+h+';\n'
                  + '</scr'+'ipt>';
      var a = document.createElement('ads'); 
      var s = document.createElement('script');  
      var w = document.write;
      document.write = (function(params) {
        a.innerHTML = params;
        document.write = w;
      });
      s.setAttribute('type', 'text/javascript');
      s.setAttribute('src', 'http://pagead2.googlesyndication.com/pagead/show_ads.js');
      banner.html(adsense).append(a).append(s);
    }, t);
    t += 300;
  });
}
$(function() {
  if ($.cookie('banok')) {
    ACLcaricaBanner();
  }else{
    $('.banok').click(function(){
      $.cookie('banok', 'yes', { expires: 180, path: '/' });
      $('.adsense-cookie-law').css({ 'border': '0' });
      if (!ACLbannerCaricati) {
        ACLcaricaBanner();  
      } 
    });
    $('.adsense-cookie-law').each(function() {
      $(this).css({
        'background-color': '#FDFDFD',
        'border': '1px #000 solid',
        'font-size': '14px',
        'padding': '2px 3px',
        'text-align': 'left',
        'font-family': '"Comic Sans MS", cursive, sans-serif',
        'width': $(this).data('width'),
        'height': $(this).data('height')
      });
    });
  }   
});
</script>

Ultimo passo, inserire il codice per fare apparire il messaggio/banner nel punto voluto della pagina (quindi nel body):

Codice

<div class="adsense-cookie-law"
   data-client="ca-pub-XXXXXXXXXXXXXXXX"
   data-slot="XXXXXXXXXXXX"
   data-width="XXX"
   data-height="XX"
   >
   <div>
   In questo riquadro, cliccando su OK, comparirà un banner pubblicitario che fa uso di cookie profilanti.
   Clicca OK per sostenere questo sito, oppure valuta un modo alternativo per aiutarci.
    <input style="cursor:pointer" class="banok" value="ok" type="button">
   </div>
</div>

Al posto delle X metterete i valori corrispondenti che troverete nel codice del banner adsense da visualizzare in quel punto. Lo stesso codice lo potete utilizzere più volte, per più banner.
Penso sia tutto, spero di esservi stato utile.

P.S.: cliccate due volte sul banner del mio sito (eheh, scherzo, una) per vedere come funziona lo script.

[Comprimi]

Risolvere una volta per sempre i problemi di tearing con driver Nvidia su Linux

Autore : vania Categoria : Gnu-Linux Martedì, 17 Febbraio 2015 - 14:39

Problemi di tearing con driver Nvidia?

Provate questa soluzione, in Section "Screen" del vostro xorg.conf aggiungete la seguente linea:

Codice

Option "metamodes" "nvidia-auto-select +0+0 { ForceFullCompositionPipeline = On }"

Questo rimuove il tearing...

[Leggi tutto]

Metro: Last Light disponibile anche per Linux

Autore : vania Categoria : Gnu-Linux Mercoledì, 6 Novembre 2013 - 15:06

Da 2 giorni su Steam è disponibile il gioco Metro: Last Light anche per i sistemi operativi basati su kernel Linux. Aumenta così, con un ambito titolo tripla A, il catalogo di giochi compatibili con il pinguino su Steam, per ora poco più di 300 ...

[Leggi tutto]

Left 4 Dead 2 Beta per Linux uscirà la settimana prossima

Autore : vania Categoria : Gnu-Linux Venerdì, 26 Aprile 2013 - 12:54

Il videogioco che forse più di tutti stanno aspettando i gamer linuxiani è sicuramente Left 4 Dead 2: annunciato ufficialmente dalla Valve come primo titolo portato su Linux, dopo quasi due mesi dal lancio ufficiale del client Steam per tale p...

[Leggi tutto]

Velocizzare Firefox compattando il DB

Autore : vania Categoria : Software Mercoledì, 26 Settembre 2012 - 10:39

Un sistema molto semplice per velocizzare un pò Firefox, su sistemi Gnu-Linux è quello di compattare il DB SQL tramite un semplice script. Create un file tipo testo ed all'interno di questo inserite il seguente codice:

Codice

#!/bin/sh
for f in ~/.moz...</codice=3><div style="text-align:right"> <span style="cursor:pointer" class="data" onclick="DisPlay('Blog1_5');DisPlay('Blog2_5')"><strong>[Leggi tutto]</strong></span> </div>
</td></tr></table></div>
<div id="Blog2_5" style="display:none">
<table style="width:100%"><tr><td class="box" style="padding:6px 1px 6px 1px"><img src="uploads/img/0_firefox36-2.png" title="firefox36-2.png" style="float:right" alt=""><p>
	Un sistema molto semplice per velocizzare un pò Firefox, su sistemi Gnu-Linux è quello di compattare il DB SQL tramite un semplice script. Create un file tipo testo ed all'interno di questo inserite il seguente codice:</p>

<fieldset class="bcod" style="margin:6px 5px;padding:3px 4px 4px 4px"><legend class="bcod"> Codice </legend><textarea readonly rows="3" cols="30" style="font-size:12px;border:0px;overflow:auto;width:100%">#!/bin/sh
for f in ~/.mozilla/firefox/*/*.sqlite; do sqlite3 $f 'VACUUM;'; done

Salvate quindi il file con il nome che preferite ed estensione .sh e rendetelo eseguibile (tasto destro del mouse Proprietà/Permessi/Eseguibile).

Eseguite di tanto in tanto il file cliccandoci sopra, dovreste notare qualche piccolo miglioramento

Per velocizzare ulteriormente Firefox seguite questa guida (applicabile anche in Microsoft Windows): Spostare la cache di firefox in RAM

[Comprimi]

Ricomprimere file avi con ffmpeg

Autore : vania Categoria : Gnu-Linux Martedì, 24 Gennaio 2012 - 17:26

Siete utenti di un sistema GNU-Linux ? Bene, se avete un imponente archivio di film codificati con Xvid o DiVx ed il vostro hardisk comincia ad essere pieno potreste pensare di ricomprimerli in modo rapido e semplice con il programma da linea di...

[Leggi tutto]

[ 1 2 3 4 5 6 ]