Infine l'aiuto di IT è qui

Blog di soluzioni informatiche.

Migliorare le prestazioni sito web (pulsanti sociali)

Pubblicato da Xaus Xavier Nadal 17th marzo 2013

Oggi vi mostriamo come migliorare le performance del sito web rendendo i pulsanti sociali Facebook, Twitter e Google Plus caricato sul web, ma solo quando si posiziona il mouse su di esso.

Come tutti voi sapete io sono appassionato di miglioramento delle prestazioni Web ed è possibile vedere alcuni esempi di questo in questo blog.

Abbiamo ottenuto ottimi risultati anche in una ripartizione di carico senza VPS per mancanza di pasta.

Uno dei più recenti sviluppi che hanno implementato è stato il carico di panini fastidiosi reti sociali per scendere una parte del punteggio nelle pagine di prova delle prestazioni come http://www.webpagetest.orgo http://www.gtmetrix.com fatto il web caricato più lento causando una diminuzione di posizionamento google tra altri motori di ricerca.

Per ovviare a questo problema vi mostrerò alcuni esempi dal vivo di adattarsi a qualsiasi dei tuoi siti web.

  • Il sito fa pagare una 55% più veloce.
  • WordPress -> Si può vedere il risultato in questo blog http://www.megacrack.es.
  • Prestashop -> Si può vedere il risultato in http://www.venlotodo.com (Sito di vendita tutti i tipi di prodotti, tra cui sexshop con prezzi impressionanti (inviare una mail a [Email protected] e dire che vieni e si farà una MegaCracks sconto di assicurazione.) Il peccato è che solo vendere alla Spagna, e anche se ci si trova nella provincia di Barcellona parlare con loro e il prezzo ancora meglio).

Per voi di vedere il cambiamento è possibile utilizzare il seguente link confrontando la velocità di caricamento tra i siti 2 http://whichloadsfaster.com/.

Mi considero del tutto incapace di programmazione, ma sono abbastanza abile nell'arte della logica e capire come funzionano le cose e soprattutto mi piace quello che faccio e investire il tempo che ci vuole. (Dico questo perché sono sicuro che il codice sorgente può essere migliorata notevolmente con i vostri commenti e se si può fare i benefici per la comunità che vi ringrazio da questo blog vedere i vostri suggerimenti per il miglioramento).

Per implementare su qualsiasi web con HTML

Poi il codice sorgente del web insegno (HTML), Ciò che facciamo è avere più immagini degli stessi pulsanti che abbiamo su Facebook, Twitter e Google Plus e se si passa sopra con una chiamata di funzione javascript che ha attivato lo script di ciascuno degli elementi sociali.

<html>
<corpo>

<div classe="G-plusone" dati-size="Medium" dati-href="Http://www.megacrack.es" onMouseOver="Activate_gp ()">
<IMG SRC="../files/gplus.png" larghezza=35 altezza=23>
</div>
<div>
<a href="Https://twitter.com/megacracks" classe="Pulsante di Twitter-follow-"
 data-show-count="True" dati-show-screen-name="False" data-lang="È" onMouseOver="Activate_tw ()">
<IMG SRC=".. / Files / seguir.png" larghezza=62 altezza=22></A></div>
<div classe="Fb-like" dati-href="Http://www.megacrack.es" dati inviati="False" dati-layout="Button_count"
 dati-width="100" data-show-volti="False" onMouseOver="Activate_fa ()" >
<div classe="Fb-like" dati-href="Http://www.megacrack.es" dati inviati="False" dati-layout="Button_count"
 dati-width="100" data-show-volti="False" onMouseOver="Activate_fa ()" ></div>
<IMG SRC=".. / Files / megusta.png" larghezza=74 altezza=24></div>

<copione Digitare="Text / javascript">

	<- <JavaScript SD per Facebook Like Button /> ->
	funzione activate_fa () {(funzione(D, s, id) {
		  var js, FJS = d.getElementsByTagName (s) [0];
		  if (D.getElementById (id)) ritorno, Js = d.createElement (s); js.id = id; js.src = "/ / Connect.facebook.net / es_LA / all.js # XFBML = 1", Fjs.parentNode.insertBefore (js, FJS);} (documento, 'Script',  'Facebook-jssdk'));} <- <JavaScript SD per Come Google Plus Button /> ->
	funzione activate_gp () {window.___gcfg = {lang: 'it'}; (funzione() {
			var po = document.createElement ('Script'); Po.type = 'Text / javascript'; Po.async = vero; Po.src = 'Https :/ / apis.google.com / js / plusone.js';
			
			var s = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (po, s);}) ();} <- <JavaScript SD per Twitter Button /> ->	
	funzione activate_tw () {!funzione (D, s, id) {
			var js, FJS = d.getElementsByTagName (s) [0];if(D.getElementById (id)) {js = d.createElement (s); js.id = id; js.src ="/ / Platform.twitter.com / widgets.js", Fjs.parentNode.insertBefore (js, FJS);}} (documento,"Script","Twitter-WJS");}
</copione>

</corpo>
</html>

Per distribuire Wordpress

Prima di tutto dovrete caricare i file di immagine sono ottimizzati con RIOT tale (imponente programma per la compressione di immagini) di essere il più efficiente possibile per i file nella cartella wordpress per esempio. Alla fine di questo articolo mi post il link ai file png per tenerli, scaricarli e comprimerli, ecc ... (sono super ottimizzato)

Quello che ho fatto è quello di separare il codice delle funzioni in javascript e metterlo nel file header.php situato sulla Route wp-content \ Themes \ \ header.php <vuestro tema> poco prima di chiudere la testa.

<copione Digitare="Text / javascript"> <- <JavaScript SD per Facebook Like Button /> -> funzione activate_fa () {(funzione(D, s, id) { var js, FJS = d.getElementsByTagName (s) [0]; if (D.getElementById (id)) ritorno, Js = d.createElement (s); js.id = id; js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1", Fjs.parentNode.insertBefore (js, FJS);} (documento, 'Script', 'Facebook-jssdk'));} <- <JavaScript SD per Come Google Plus Button /> -> funzione activate_gp () {window.___gcfg = {lang: 'it'}; (funzione() { var po = document.createElement ('Script'); Po.type = 'Text / javascript'; Po.async = vero; Po.src = 'Https :/ / apis.google.com / js / plusone.js'; var s = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (po, s);}) ();} <- <JavaScript SD per Twitter Button /> -> funzione activate_tw () {!funzione (D, s, id) { var js, FJS = d.getElementsByTagName (s) [0];if(D.getElementById (id)) {js = d.createElement (s); js.id = id; js.src ="/ / Platform.twitter.com / widgets.js", Fjs.parentNode.insertBefore (js, FJS);}} (documento,"Script","Twitter-WJS"); } </copione>

Ho creato un widget HTML e ho il codice che visualizza le immagini all'interno di div diversi. Questo pezzo di codice è ciò che mostrano i pulsanti di social network. Adaptadlos per i quali si può avere.

<div classe="G-plusone" dati-size="Medium" dati-href="Http://www.megacrack.es" onMouseOver="Activate_gp ()">
<IMG SRC="../files/gplus.png" larghezza=35 altezza=23>
</div>
<div>
<a href="Https://twitter.com/megacracks" classe="Pulsante di Twitter-follow-"
 data-show-count="True" dati-show-screen-name="False" data-lang="È" onMouseOver="Activate_tw ()">
<IMG SRC=".. / Files / seguir.png" larghezza=62 altezza=22></A></div>
<div classe="Fb-like" dati-href="Http://www.megacrack.es" dati inviati="False" dati-layout="Button_count"
 dati-width="100" data-show-volti="False" onMouseOver="Activate_fa ()" >
<div classe="Fb-like" dati-href="Http://www.megacrack.es" dati inviati="False" dati-layout="Button_count"
 dati-width="100" data-show-volti="False" onMouseOver="Activate_fa ()" ></div>
<IMG SRC=".. / Files / megusta.png" larghezza=74 altezza=24></div>

Funziona alla grande tranne che per i tuoi amici non sanno come risolvere il problema. (Se qualcuno mi aiuta a essere grati e anche della comunità).

Per distribuire PrestaShop

In PrestaShop è un po 'più complicato, ma si può anche fare.

Quello che facciamo è modificare il file header.tpl si trova nel seguente percorso sul vostro FTP o il vostro fornitore di hosting per prestashop: public_html \ themes \ default \ header.tpl

Agregad le seguenti righe di codice appena prima di chiudere la testa.

<copione Digitare="Text / javascript">

 funzione activate_fa () {(funzione(D, s, id) {
	  var js, FJS = d.getElementsByTagName (s) [0];
	  if (D.getElementById (id)) ritorno, Js = d.createElement (s); js.id = id; js.src = "/ / Connect.facebook.net / es_LA / all.js # XFBML = 1", Fjs.parentNode.insertBefore (js, FJS);} (documento, 'Script',  'Facebook-jssdk'));}

funzione activate_gp () {
	var po = document.createElement ('Script'); Po.type = 'Text / javascript'; Po.async = vero; Po.src = 'Https :/ / apis.google.com / js / plusone.js';
	
	var s = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (po, s);}

funzione activate_tw () {!funzione (D, s, id) {
	var js, FJS = d.getElementsByTagName (s) [0];if(D.getElementById (id)) {js = d.createElement (s); js.id = id; js.src ="/ / Platform.twitter.com / widgets.js", Fjs.parentNode.insertBefore (js, FJS);}} (documento,"Script","Twitter-WJS");}
</copione>

Dopo aver fatto questo avrete bisogno di un addon chiamato prestashop HTMLBOX che è possibile scaricare da http://mypresta.eu/modules/front-office-features/html-box.html.

Ora solo si dovrà attivare il modulo nella sua configurazione e aggiungere il codice riportato di seguito:

Le prime righe di codice è possibile lasciare senza mettere (per ottenere un aspetto è identico a quello degli altri moduli in versione 1.5.3 di prestashop)

<P class = stile "title_block" = "background-color: # 383838, imbottitura: 6px 11px;

color: # fff; text-shadow: # 0 1 0 000 px; font-size: 12px; font-weight: bold; "> CLICCA COME AIUTO</p>

Questo pezzo di codice è ciò che mostrano i pulsanti di social network. Adaptadlos per i quali si può avere.

<p>

<div classe="Fb-like" dati-href="Http :/ / www.venlotodo.com" dati inviati="False"
 dati-layout="Button_count" data-show-volti="False" ></div>
<div classe="Fb-like" dati-href="Http :/ / www.venlotodo.com" onMouseOver="Activate_fa ()"
 dati inviati="False" dati-layout="Button_count" data-show-volti="False" >
<IMG SRC=".. / Files / megusta.png" larghezza=74 altezza=24>
</div>

<div classe="G-plusone" dati-href="Http :/ / www.venlotodo.com" dati-size="Medium"
 onMouseOver="Activate_gp ()">
<IMG SRC="../files/gplus.png" larghezza=35 altezza=23>
</div>

<div>
<a href="Https :/ / twitter.com / share" classe="Twitter-share-button" dati-url="Http :/ / www.venlotodo.com"
 data-lang="È" onMouseOver="Activate_tw ()">
<IMG SRC=".. / Files / twittear.png" larghezza=62 altezza=22></A></div>
</p>

Questo è tutto, spero che tu abbia imparato che lavorano per migliorare le performance del sito web e se avete problemi lasciate un messaggio e cercare di rispondere.

I file con le immagini dei pulsanti sociali compresse

Come promesso prima di lasciare i file di immagine di compresse di social networking e disponibili per il download:

Twitter -> http://www.megacrack.es/files/seguir.png

Google Plus -> http://www.megacrack.es/files/gplus.png

Facebook -> http://www.megacrack.es/files/megusta.png

tag: , , , , , , , , ,
Pubblicato da prestazioni web | Nessun commento »

Wayback Machine o tirare indietro il tempo su Internet.

Pubblicato da Xaus Xavier Nadal 31st ottobre 2012

Il titolo dell'articolo Wayback Machine o tirare indietro tempo su Internet sembra qualcosa di irreale, qualcosa di futuristico, ma in realtà può essere fatto attraverso un ente no-profit che 10 petabyte di informazioni in suo possesso consente di tirare il tempo torniamo su Internet può vedere uno screenshot di qualsiasi sito web dall'inizio fino ad oggi, l'evoluzione di qualsiasi sito, tutto il commercio internet, come tutto è cominciato, come lo erano i vecchi formati HTML statici, quali si sono in HTML 5.

Solo si dovrà accedere al web seguente http://archive.org/web/web.php e scrivi il tuo sito web La Wayback macchina e cliccare su Take Me Back.

Hanno circa 150 miliardi di pagine web archiviate dal 1996 fino a poche settimane fa.

Se volete maggiori informazioni potete leggere nel seguente link: http://archive.org/about/

Questo è quanto la Big Data, Per avere la maggior quantità di dati memorizzati e di strumenti in grado di spostare i dati e offrire ai clienti un risultato della ricerca con latenze molto basse.

Qui è possibile vedere l'evoluzione di questo blog:

Fin dalla sua istituzione nel 2008 549 e conservati in uno snapshot vede il 25 2008 marzo.

MegaCrack leggi »

tag: , , , , ,
Pubblicato da Big Data | Nessun commento »

Sviluppa JavaScript, HTML e CSS in linea.

Pubblicato da Xaus Xavier Nadal 28th ottobre 2012

JsFiddle o come lo chiamano "parco ricreativo per gli sviluppatori web", è uno strumento di grande web che può essere utilizzato in molti modi, come ad esempio editor online per creare snippet JavaScript, HTML e CSS, di condividere il nostro codice sorgente e altre quello che la gente testeen e per vedere i risultati direttamente in esecuzione su un sito web semplice e cordiale.

Con questo gli sviluppatori web possono facilmente isolare gli errori e visualizzare i risultati in tempo reale, anche controllare se il codice viene compilato correttamente JavaScript.

Il 3 interfaccia del prodotto sono aree distinte in cui lavorare, in alto possiamo vedere le icone, per eseguire il codice, salvarlo, condividerlo, sul lato sinistro possiamo modificare diverse opzioni per ottenere i pannelli a destra contengono gli strumenti necessario per raggiungere i risultati desiderati dalla modifica dei pannelli per modificare il codice di programmazione, SCSS, CofeeScript, JavaScript, ecc ..

E la magia nei pannelli di destra 4, HTML, CSS, JavaScript e risultato in cui premendo il tasto RUN vedere i risultati del nostro codice.

Lascio un esempio e fatemi sapere se vi consiglio questo sito (http://jsfiddle.net/B6Jsy/50/)

In questo esempio ho creato una parte di codice CSS e HTML per mettere Adsense pubblicitarie moduli 2 in un blocco con margini tra loro e con un allineamento centrato.

Come si può vedere nella chiamata HTML della classe "publidiv"Ho creato nel foglio di stile (CSS) e quindi può essere utilizzato ovunque sul sito solo chiamando la classe publidiv o pubblicato per il contenuto della pubblicità adsense che sempre centrato.

MegaCrack leggi »

tag: , , , , ,
Pubblicato da programmazione | Nessun commento »

Pubblicità in Blogger

Pubblicato da Xaus Xavier Nadal 29th aprile 2012

Oggi vi spiegheremo come inserire un codice di pubblicità nel vostro blog di tecnologia di Blogger sviluppato sotto, facciamo un po 'più complicato del solito, mi spiego:

In questo articolo si arriva a mettere un annuncio in un articolo di blogger, ma sulla home page questo appare blog perché, come si sa di avere politiche di utilizzo di AdSense ci impediscono di mettere più di 3 blocchi pubblicitari dello stesso tipo sulla stessa pagina.

La prima cosa da fare è accedere alla amministrazione del nostro account AdSense manager o pubblicità che avete, e ottenere il codice di pubblicità che meglio si adatta alle tue misure blog.

Per esempio il codice che abbiamo scelto oggi è questo: uno striscione di 468 60 ×

<Script type = "text / javascript"> <! -
google_ad_client = "ca-pub-2342147052953367";
/ * * Contessota /
google_ad_slot = "6351243105";
google_ad_width = 468;
google_ad_height = 60;
/ / ->

src = "http://pagead2.googlesyndication.com/pagead/show_ads.js”>

Quando si dispone di codice pulsáis su uno di questi links 2 convertire l'HTML in testo normale del tutto comprensibile blogger.

http://nosetup.org/php_on_line/convertir_html_texto

http://blogcrowds.com/resources/parse_html.php

Ci dovrebbe essere qualcosa di simile al seguente:

<script type="text/javascript"> <! -
google_ad_client = "ca-pub-2342147052953367";
/ * * Contessota /
google_ad_slot = "6351243105";
google_ad_width = 468;
google_ad_height = 60;
/ / ->
</ Script>
<Tipo Script = "text / javascript"
src = "http://pagead2.googlesyndication.com/pagead/show_ads.js">
</ Script>

Da questo momento abbiamo solo definire dove inserire della pubblicità sul nostro blog.

Abbiamo accedere al nostro account di blog blogger di amministratore e ci si trova nel menu Template.

MegaCrack leggi »

tag: , , , , , , , , , , , , , ,
Pubblicato da Active Directory, Google, pubblicità | Nessun commento »

Developer Community (WikiCode)

Pubblicato da Xaus Xavier Nadal 18th agosto 2011

buona,

Ora, per quelli di voi che pasticciano con il codice sorgente fornito si passa una delle più grandi comunità di ambienti di programmazione per il futuro e sta crescendo molto rapidamente.

WikiCode

Comunitaria basata sullo scambio di codice che viene creato con l'intento di diventare un riferimento nel programma.

A presto.

tag: , , , , , , , , , , , , , ,
Pubblicato da Android, iphone, programmazione | Nessun commento »