Enfin, l'aide de l'informatique est ici

Blog de solutions informatiques.

Améliorer les performances d'un site web (boutons sociaux)

Publié par Xaus Xavier Nadal 17th sur Mars 2013

Aujourd'hui, nous vous montrons comment améliorer les performances d'un site web en faisant les boutons sociaux facebook, twitter et Google Plus sont chargés sur le web, mais seulement quand on passe la souris sur.

Comme tout le monde saura que je suis passionné par l'amélioration des performances Web et vous pouvez voir des exemples dans ce blog.

Nous avons obtenu de très bons résultats, même lors du chargement sur un partagé sans hébergement VPS par manque de pâte.

Un des derniers développements qui ont mis en œuvre a été la charge de sandwichs réseaux sociaux ennuyeux pour obtenir une partie de la partition dans les pages de test de performance que http://www.webpagetest.orgou http://www.gtmetrix.com Ils ont fait le web se charge plus lente provoquant une diminution de positionnement google entre autres moteurs de recherche.

Pour contourner ce problème, je vais vous montrer quelques exemples en direct afin qu'il puisse adapter à l'un de vos sites Web.

  • Le site perçoit une 55% plus rapide.
  • WordPress -> Vous pouvez voir le résultat dans ce blog http://www.megacrack.es.
  • Prestashop -> Vous pouvez voir le résultat dans http://www.venlotodo.com (Site Web vendant toutes sortes de produits, y compris sexshop avec des prix impressionnants (envoyer un courriel à ventas@venlotodo.com et dire que vous venez et vous ferez un MegaCracks rabais d'assurance.) Le malheur est que seulement vendre en Espagne, et aussi si vous êtes dans la province de Barcelone parler avec eux et le prix encore mieux).

Pour que vous puissiez voir le changement que vous pouvez utiliser le lien suivant comparant la vitesse de chargement entre les sites 2 http://whichloadsfaster.com/.

Je me considère comme tout à fait incapable de programmation, mais je suis très habile dans l'art de la logique et de comprendre comment les choses fonctionnent et surtout j'aime ce que je fais et investir le temps qu'il faut. (Je dis cela parce que je suis sûr que le code source peut être grandement améliorée avec vos commentaires et si vous pouvez faire les avantages de la communauté, il vous remercie de ce blog voir vos suggestions d'amélioration).

Pour mettre en œuvre sur tout Web avec HTML

Ensuite, le code source de la bande que j'enseigne (HTML), Ce que nous faisons est d'avoir plusieurs images des mêmes boutons que nous avons sur facebook, twitter et Google plus et si vous survolez l'aide d'un appel de fonction javascript qui a déclenché le script de chacun des éléments sociaux.

<html>
<corps>

<div classe="G-plusone" les données de taille="Medium" données href="Http://www.megacrack.es" onMouseOver="Activate_gp ()">
<IMG SRC="../files/gplus.png" largeur=35 la taille=23>
</div>
<div>
<a href="Https://twitter.com/megacracks" classe="Twitter-suivi-bouton"
 données-show-count="True" Show-screen-nom de données="Faux" données-lang="Il est" onMouseOver="Activate_tw ()">
<IMG SRC="../files/seguir.png" largeur=62 la taille=22></A></div>
<div classe="Fb-like" données href="Http://www.megacrack.es" données send="Faux" agencement des données="Button_count"
 les données de largeur="100" données-show-faces="Faux" onMouseOver="Activate_fa ()" >
<div classe="Fb-like" données href="Http://www.megacrack.es" données send="Faux" agencement des données="Button_count"
 les données de largeur="100" données-show-faces="Faux" onMouseOver="Activate_fa ()" ></div>
<IMG SRC="../files/megusta.png" largeur=74 la taille=24></div>

<scénario type="Text / javascript">

	<! - <JavaScript SD pour Facebook Like Button /> ->
	fonction activate_fa () {(fonction(D, s, id) {
		  var js, fjs = d.getElementsByTagName (s) [0];
		  if (D.getElementById (id)) retour; js = d.createElement (s); js.id = id; js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1"; fjs.parentNode.insertBefore (js, FJS); } (Document, 'Script',  'Facebook-jssdk')); } <! - <JavaScript SD pour Comme Bouton Google Plus /> ->
	fonction activate_gp () {fenêtre .___ gcfg = {lang: 'es'}; (fonction() {
			var po = document.createElement ('Script'); Po.type = 'Text / javascript'; Po.async = vrai; po.src = 'Https://apis.google.com/js/plusone.js';
			
			var s = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (po, s); }) (); } <! - <JavaScript SD pour Twitter Bouton /> ->	
	fonction activate_tw () {!fonction (D, s, id) {
			var js, fjs = d.getElementsByTagName (s) [0];if= {Js d.createElement (s) (D.getElementById (id)!); Js.id = id; js.src ="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, FJS); }} (Document,"Script","Twitter-WJS"); }
</scénario>

</corps>
</html>

Pour mettre en œuvre dans Wordpress

de tout ce que vous aurez à télécharger vos fichiers d'image d'abord sont optimisés avec une telle RIOT (programme impressionnant de compression d'images) d'être aussi efficace que possible à vos fichiers wordpress dans le dossier par exemple. A la fin de l'article, je vous laisse le lien vers les fichiers png afin de ne pas être de les télécharger et de les compresser, etc ... (Ils sont super optimisé)

Qu'est-ce que je l'ai fait est de séparer le code des fonctions en javascript et le mettre dans le fichier header.php Situé sur le contenu de \ thèmes Route \ <votre thème> \ de header.php juste avant la fermeture de la tête.

<scénario type="Text / javascript"> <! - <JavaScript SD pour Facebook Like Button /> -> fonction activate_fa () {(fonction(D, s, id) { var js, fjs = d.getElementsByTagName (s) [0]; if (D.getElementById (id)) retour; js = d.createElement (s); js.id = id; js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1"; fjs.parentNode.insertBefore (js, FJS); } (Document, 'Script', 'Facebook-jssdk')); } <! - <JavaScript SD pour Comme Bouton Google Plus /> -> fonction activate_gp () {fenêtre .___ gcfg = {lang: 'es'}; (fonction() { var po = document.createElement ('Script'); Po.type = 'Text / javascript'; Po.async = vrai; po.src = 'Https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (po, s);}) ();} <- <JavaScript SD pour Twitter Button /> -> fonction activate_tw () {!fonction (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);}} (document,"Script","Twitter-WJS"); } </scénario>

J'ai créé un widget HTML et j'ai le code qui affiche les images dans plusieurs div. Ce morceau de code est ce qui va afficher les boutons des réseaux sociaux. Adaptadlos pour lesquelles vous pourriez avoir.

<div classe="G-plusone" les données de taille="Medium" données href="Http://www.megacrack.es" onMouseOver="Activate_gp ()">
<IMG SRC="../files/gplus.png" largeur=35 la taille=23>
</div>
<div>
<a href="Https://twitter.com/megacracks" classe="Twitter-suivi-bouton"
 données-show-count="True" Show-screen-nom de données="Faux" données-lang="Il est" onMouseOver="Activate_tw ()">
<IMG SRC="../files/seguir.png" largeur=62 la taille=22></A></div>
<div classe="Fb-like" données href="Http://www.megacrack.es" données send="Faux" agencement des données="Button_count"
 les données de largeur="100" données-show-faces="Faux" onMouseOver="Activate_fa ()" >
<div classe="Fb-like" données href="Http://www.megacrack.es" données send="Faux" agencement des données="Button_count"
 les données de largeur="100" données-show-faces="Faux" onMouseOver="Activate_fa ()" ></div>
<IMG SRC="../files/megusta.png" largeur=74 la taille=24></div>

Fonctionne très bien sauf pour facebook ne sais pas comment y remédier. (Si quelqu'un m'aide à être reconnaissants et aussi de la communauté).

Pour déployer prestashop

Dans prestashop est un peu plus compliqué, mais vous pouvez aussi le faire.

Ce que nous faisons est d'éditer le fichier header.tpl vous trouverez à l'emplacement suivant sur votre FTP ou votre fournisseur d'hébergement pour prestashop: public_html \ themes \ default \ header.tpl

Agregad les lignes de code suivantes juste avant la fermeture de la tête.

<scénario type="Text / javascript">

 fonction activate_fa () {(fonction(D, s, id) {
	  var js, fjs = d.getElementsByTagName (s) [0];
	  if (D.getElementById (id)) retour, Js = d.createElement (s); js.id = id; js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1"; Fjs.parentNode.insertBefore (js, fjs);} (document, 'Script',  'Facebook-jssdk'));}

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

fonction activate_tw () {!fonction (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);}} (document,"Script","Twitter-WJS"); }
</scénario>

Lorsque vous avez fait cela aurez besoin d'un addon prestashop appelé HTMLBOX que vous pouvez télécharger à partir de http://mypresta.eu/modules/front-office-features/html-box.html.

Maintenant que vous devrez activer le module dans sa configuration et ajoutez le code suivant:

Les premières lignes de code, vous pouvez partir sans mettre (pour obtenir un look est identique à celle des autres modules de la version de prestashop 1.5.3)

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

color: # fff; text-shadow: # 0 1 0 000 px; font-size: 12px; font-weight: bold; "> CLIQUEZ COMME AIDE</p>

Ce morceau de code est ce qui va afficher les boutons des réseaux sociaux. Adaptadlos pour lesquelles vous pourriez avoir.

<p>

<div classe="Fb-like" données href="Http :/ / www.venlotodo.com" données send="Faux"
 agencement des données="Button_count" données-show-faces="Faux" ></div>
<div classe="Fb-like" données href="Http :/ / www.venlotodo.com" onMouseOver="Activate_fa ()"
 données send="Faux" agencement des données="Button_count" données-show-faces="Faux" >
<IMG SRC="../files/megusta.png" largeur=74 la taille=24>
</div>

<div classe="G-plusone" données href="Http :/ / www.venlotodo.com" les données de taille="Medium"
 onMouseOver="Activate_gp ()">
<IMG SRC="../files/gplus.png" largeur=35 la taille=23>
</div>

<div>
<a href=«Https :/ / twitter.com / share" classe="Twitter-share-button" données url="Http :/ / www.venlotodo.com"
 données-lang="Il est" onMouseOver="Activate_tw ()">
<IMG SRC=".. / Files / twittear.png" largeur=62 la taille=22></A></div>
</p>

C'est tout, j'espère que vous avez appris dans leurs efforts pour améliorer la qualité du site et si vous avez des problèmes de laisser un message et tenter de répondre.

Les fichiers avec des images de boutons sociaux compressés

Comme je l'ai promis avant mon départ les fichiers image de comprimés de réseautage social et prêts à télécharger:

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

Mots clés: , , , , , , , , ,
Publié par la performance Web | Pas de commentaires »

Wayback Machine ou tirer en arrière de temps sur Internet.

Publié par Xaus Xavier Nadal 31st sur Octobre 2012

Le titre de l'article Wayback Machine ou tirer en arrière de temps sur Internet semble quelque chose d'irréel, quelque chose de futuriste, mais en réalité il peut être fait par une entité sans but lucratif qui pétaoctets 10 d'information en sa possession, il est possible de tirer le temps de nous remettre sur l'Internet peut voir une capture d'écran d'un site Web depuis le début jusqu'à aujourd'hui, l'évolution de n'importe quel site, toute entreprise sur Internet, comment tout a commencé, comme l'étaient les anciens formats HTML statiques telles qu'elles ont évolué au format HTML 5.

Seulement, vous devez accéder au site web suivant http://archive.org/web/web.php et écrivez votre site web La Wayback Machine et cliquez sur Take Me Back.

Ils ont environ 150 milliards de pages web archivées à partir de 1996 jusqu'à il ya quelques semaines.

Si vous voulez plus d'information, vous pouvez lire à ce sujet dans le lien suivant: http://archive.org/about/

C'est ce que le Big Data, Pour avoir la plus grande quantité de données stockées et des outils capables de déplacer ces données et offrir aux clients un résultat de la recherche avec des latences très faibles.

Ici vous pouvez voir l'évolution de ce blog:

Depuis sa création en 2008 549 et stockés dans un instantané considère le 25 2008 Mars.

Megacrack lire »

Mots clés: , , , , ,
Publié par Big Data | Pas de commentaires »

Développe JavaScript, HTML et CSS en ligne.

Publié par Xaus Xavier Nadal 28th sur Octobre 2012

JsFiddle ou comme ils l'appellent "parc de loisirs pour les développeurs Web", est un excellent outil de web qui peut être utilisé de plusieurs façons, comme éditeur en ligne pour créer des extraits JavaScript, HTML et le code CSS, de partager notre code source et d'autres personnes testeen et de voir les résultats en cours d'exécution directement sur un site Web simple et convivial.

Avec cette web les développeurs peuvent facilement isoler les erreurs et afficher les résultats en temps réel, même vérifier si le code compile correctement JavaScript.

Dans l'interface du produit, nous 3 zones distinctes au travail, au sommet, nous pouvons voir les icônes, pour exécuter le code, l'enregistrer, partager, sur le côté gauche, nous pouvons modifier diverses options pour obtenir les bons panneaux contiennent les outils nécessaires pour atteindre les résultats souhaités de modifier les panneaux pour modifier le code de programmation, SCSS, coffeescript, JavaScript, etc ..

Et la magie dans les bons panneaux 4, HTML, CSS, JavaScript et Résultat où appuyant sur le bouton RUN pour voir les résultats de notre code.

Je laisse un exemple et laissez-moi savoir si vous avez été utile ce site (http://jsfiddle.net/B6Jsy/50/)

Dans l'exemple que je créé une partie de CSS et autre code HTML pour mettre des modules publicitaires de 2 Adsense dans un bloc avec des marges entre eux et avec un alignement centré.

Comme vous pouvez le voir dans le code HTML j'appelle la classe "publidiv«J'ai créé dans la feuille de style (CSS) et donc je peux l'utiliser partout sur le site que l'appel de la classe publidiv o publica pour le contenu de la publicité adsense qui a toujours centré.

Megacrack lire »

Mots clés: , , , , ,
Publié par programmation | Pas de commentaires »

Annoncez dans Blogger

Publié par Xaus Xavier Nadal 29th sur Avril 2012

Aujourd'hui, nous allons vous expliquer comment insérer un code de la publicité dans votre technologie de blog Blogger développé sous, faisons un peu plus compliqué que d'habitude, je l'explique:

Cet article va arriver à placer une annonce dans un article par le blogueur, mais cela apparaît sur la page d'accueil Blog parce que vous savez que vous avez des politiques d'utilisation des adsense nous empêchent de mettre plus de 3 blocs publicitaires du même type sur la même page.

La première chose à faire est d'accéder à l'administration de notre gestionnaire de compte Adsense ou de la publicité que vous avez, et obtenir le code de la publicité qui convient le mieux à vos mesures de blog.

Par exemple le code que nous avons choisi aujourd'hui est la suivante: une bannière de 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;
// ->
</ Script>
<Script type = "text / javascript"
src = "http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</ Script>

Lorsque vous avez le code pulsáis sur un de ces liens 2 convertissent le code HTML en texte brut blogueur tout à fait compréhensible.

http://nosetup.org/php_on_line/convertir_html_texto

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

Nous devrions ressembler à quelque chose comme ce qui suit:

& Lt; script type = & quot; text / javascript & quot; & gt; & lt ;! -
google_ad_client = & quot; ca-pub-2342147052953367 & quot ;;
/ * Contessota * /
google_ad_slot = & quot; & quot ;; 6351243105
google_ad_width = 468;
google_ad_height = 60;
// - & Gt;
& Lt; / script & gt;
& Lt; script type = & quot; text / javascript & quot;
src = & quot; http: //pagead2.googlesyndication.com/pagead/show_ads.js&quot; & gt;
& Lt; / script & gt;

A partir de ce moment, nous ne définissons où placer la publicité sur notre blog.

Blogger nous accéder à notre compte d'administrateur de blog et nous sommes situés dans le menu Modèle.

Megacrack lire »

Mots clés: , , , , , , , , , , , , , ,
Publié par active Directory, Google, publicité | Pas de commentaires »

Developer Community (wikicode)

Publié par Xaus Xavier Nadal 18th sur Août 2011

bon,

Aujourd'hui, pour vous qui sont toujours déconner avec le code source, je passe une des plus grandes communautés de futurs environnements de programmation et se développe actuellement très rapidement.

wikicode

basé sur l'échange de code qui est créé avec l'intention de devenir une référence en matière de programmation communautaire.

À bientôt.

Mots clés: , , , , , , , , , , , , , ,
Publié par androïde, iphone, programmation | Pas de commentaires »