Finally the help of IT is here

Blog of computer solutions.

Improve website performance (Social buttons)

Posted by Xaus Xavier Nadal 17th on March 2013

Today we show you how to improve website performance by making the social buttons facebook, twitter and google plus loaded on the web, but only when you hover over it.

As you all know I am passionate about improving Web performance and you can see examples of this in this blog.

We got very good results even in a load sharing without VPS hosting for lack of pasta.

One of the latest developments that have implemented has been the burden of sandwiches annoying social networks to get off part of the score in the performance test pages as http://www.webpagetest.orgo http://www.gtmetrix.com made the loaded web slower causing a decrease in google positioning among other search engines.

To get around this problem I will show several examples Live to adapt it to any of your websites.

  • The site charges a 55% faster.
  • WordPress -> You can see the result in this blog http://www.megacrack.es.
  • Prestashop -> You can see the result in http://www.venlotodo.com (Website selling all kinds of products including sexshop with impressive prices (send an email to ventas@venlotodo.com and say that you come from MegaCracks and will make a insurance discount.) The pity is that only sell to Spain, and also if you are in the province of Barcelona speak with them and the price even better).

For you to see the change you can use the following link comparing the speed of loading between sites 2 http://whichloadsfaster.com/.

I consider myself quite unable to programming, but I am quite skilled at the art of logic and understand how things work and most of all I like what I do and invest the time it takes. (I say this because I am sure that the source code can be improved greatly with your comments and if you can make the community benefits it will thank you from this blog seeing your suggestions for improvement).

To implement on any web with HTML

Then the source code of the web I teach (HTML), What we do is have multiple images of the same buttons we have on facebook, twitter and google plus and if you hover over using a javascript function call that triggered the script of each of the social elements.

<html>
<body>

<div class="G-plusone" data-size="medium" data-href="Http://www.megacrack.es" onMouseOver="Activate_gp ()">
<I'M G SRC=".. / Files / gplus.png" width=35 height=23>
</div>
<div>
<a href="Https://twitter.com/megacracks" class="Twitter-follow-button"
 data-show-count="True" data-show-screen-name="False" data-lang="Is" onMouseOver="Activate_tw ()">
<I'M G SRC=".. / Files / seguir.png" width=62 height=22></A></div>
<div class="Fb-like" data-href="Http://www.megacrack.es" data-send="False" data-layout="Button_count"
 data-width="100" data-show-faces="False" onMouseOver="Activate_fa ()" >
<div class="Fb-like" data-href="Http://www.megacrack.es" data-send="False" data-layout="Button_count"
 data-width="100" data-show-faces="False" onMouseOver="Activate_fa ()" ></div>
<I'M G SRC="../files/megusta.png" width=74 height=24></div>

<script type="Text / javascript">

	<! - <JavaScript SD forum Facebook Like Button /> ->
	function activate_fa () {(function(D, s, id) {
		  was js, fjs = d.getElementsByTagName (s) [0];
		  if (D.getElementById (id)) return, 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 forum Like Google Plus Button /> ->
	function activate_gp () {window.___gcfg = {lang: 'en'}; (function() {
			was po = document.createElement ('Script'); Po.type = 'Text / javascript'; Po.async = true; Po.src = 'Https://apis.google.com/js/plusone.js';
			
			was s = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (po, s);}) ();} <! - <JavaScript SD forum Twitter Button /> ->	
	function activate_tw () {!function (D, s, id) {
			was 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");}
</script>

</body>
</html>

To deploy Wordpress

First of all you will have to upload your image files are optimized with such RIOT (Impressive program for compressing images) to be as efficient as possible to your wordpress files in the folder for example. At the end of the article I will post the link to the png files to keep them, downloading them and compress them, etc ... (They are super optimized)

What I have done is to separate the code of the functions in javascript and put it in the file header.php located on Route wp-content \ themes \ <vuestro tema> \ header.php just before closing the head.

<script type="Text / javascript"> <! - <JavaScript SD forum Facebook Like Button /> -> function activate_fa () {(function(D, s, id) { was js, fjs = d.getElementsByTagName (s) [0]; if (D.getElementById (id)) return, 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 forum Like Google Plus Button /> -> function activate_gp () {window.___gcfg = {lang: 'en'}; (function() { was po = document.createElement ('Script'); Po.type = 'Text / javascript'; Po.async = true; Po.src = 'Https://apis.google.com/js/plusone.js'; was s = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (po, s);}) ();} <! - <JavaScript SD forum Twitter Button /> -> function activate_tw () {!function (D, s, id) { was 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"); } </script>

I created an HTML widget and I have the code that displays the images within several div. This piece of code is what will show the buttons of social networks. Adaptadlos for which you may have.

<div class="G-plusone" data-size="medium" data-href="Http://www.megacrack.es" onMouseOver="Activate_gp ()">
<I'M G SRC=".. / Files / gplus.png" width=35 height=23>
</div>
<div>
<a href="Https://twitter.com/megacracks" class="Twitter-follow-button"
 data-show-count="True" data-show-screen-name="False" data-lang="Is" onMouseOver="Activate_tw ()">
<I'M G SRC=".. / Files / seguir.png" width=62 height=22></A></div>
<div class="Fb-like" data-href="Http://www.megacrack.es" data-send="False" data-layout="Button_count"
 data-width="100" data-show-faces="False" onMouseOver="Activate_fa ()" >
<div class="Fb-like" data-href="Http://www.megacrack.es" data-send="False" data-layout="Button_count"
 data-width="100" data-show-faces="False" onMouseOver="Activate_fa ()" ></div>
<I'M G SRC="../files/megusta.png" width=74 height=24></div>

Works great except for facebook do not know how to fix it. (If someone helps me be grateful and also community).

To deploy prestashop

In prestashop is a bit more complicated, but you can also do.

What we do is edit the file header.tpl you will find in the following path on your FTP or your hosting provider for prestashop: public_html \ themes \ default \ header.tpl

Agregad the following lines of code just before closing the head.

<script type="Text / javascript">

 function activate_fa () {(function(D, s, id) {
	  was js, fjs = d.getElementsByTagName (s) [0];
	  if (D.getElementById (id)) return, 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'));}

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

function activate_tw () {!function (D, s, id) {
	was 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");}
</script>

When you have done this'll need a prestashop addon called HTMLBOX that you can download from http://mypresta.eu/modules/front-office-features/html-box.html.

Now only you will have to activate the module in its configuration and add the following code:

The first lines of code you can leave without putting (to get a look is identical to that of the other modules in 1.5.3 version of prestashop)

<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; "> CLICK LIKE HELP</p>

This piece of code is what will show the buttons of social networks. Adaptadlos for which you may have.

<p>

<div class="Fb-like" data-href="Http://www.venlotodo.com" data-send="False"
 data-layout="Button_count" data-show-faces="False" ></div>
<div class="Fb-like" data-href="Http://www.venlotodo.com" onMouseOver="Activate_fa ()"
 data-send="False" data-layout="Button_count" data-show-faces="False" >
<I'M G SRC="../files/megusta.png" width=74 height=24>
</div>

<div class="G-plusone" data-href="Http://www.venlotodo.com" data-size="medium"
 onMouseOver="Activate_gp ()">
<I'M G SRC=".. / Files / gplus.png" width=35 height=23>
</div>

<div>
<a href="Https://twitter.com/share" class="Twitter-share-button" data-url="Http://www.venlotodo.com"
 data-lang="Is" onMouseOver="Activate_tw ()">
<I'M G SRC=".. / Files / twittear.png" width=62 height=22></A></div>
</p>

That's all, I hope you have learned as they work to improve website performance and if you have any problems leave a message and try to answer.

Files with social button images compressed

As I promised before I leave the image files of social networking tablets and ready to 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

tags: , , , , , , , , ,
Posted by web performance | No Comments »

Wayback Machine or pull back time on the Internet.

Posted by Xaus Xavier Nadal 31st on October 2012

The title of the article Wayback Machine or pull back time on the Internet seems something unreal, something futuristic, but in reality it can be done through a nonprofit entity that 10 petabytes of information in its possession makes it possible to pull the time we get back on the Internet can see a screenshot of any website since the beginning until today, the evolution of any site, any internet business, how it all started, as were the old static HTML formats as they have evolved to HTML 5.

Only you will have to access the following web http://archive.org/web/web.php and write your website The Wayback Machine and click on Take Me Back.

They have around 150 billion web pages archived from 1996 until a few weeks ago.

If you want more information you can read about it in the following link: http://archive.org/about/

That is what the Big Data, To have the greatest amount of stored data and tools able to move this data and give customers a result of the search with very low latencies.

Here you can see the evolution of this blog:

Since its inception in 2008 549 and stored in a snapshot views the 25 2008 March.

Megacrack read »

tags: , , , , ,
Posted by Big Data | No Comments »

Develops JavaScript, HTML and CSS Online.

Posted by Xaus Xavier Nadal 28th on October 2012

JsFiddle or as they call it "recreational park for web developers", is a great web tool that can be used in many ways, such as online editor to create JavaScript snippets, HTML and CSS, to share our source code and other what testeen people and to see the results directly running on a simple and friendly website.

With this web developers can easily isolate errors and view results in real time, even check if the code compiles correctly JavaScript.

The product interface 3 have distinct areas in which to work, at the top we can see the icons, to run the code, save it, share it, on the left side we can modify various options to get the right panels contain the tools necessary to achieve the desired results from modifying the panels to modify the programming code, SCSS, CofeeScript, JavaScript, etc. ..

And the magic in the right panels 4, HTML, CSS, JavaScript and Result where pressing the RUN button see the results of our code.

I leave an example and let me know if you recommend this site (http://jsfiddle.net/B6Jsy/50/)

In the example I created a part of CSS and HTML code to put Adsense advertising 2 modules in one block with margins between them and with a centered alignment.

As you can see in the HTML call the class "publidiv"I created in the style sheet (CSS) and so I can use it anywhere on the website only calling the class publidiv o published for the adsense advertising content that always centered.

Megacrack read »

tags: , , , , ,
Posted by Programming | No Comments »

Advertise in Blogger

Posted by Xaus Xavier Nadal 29th on April 2012

Today we will explain how to insert an advertising code in your Blogger blog technology developed under, let's do a little more complicated than usual, I explain:

This article will get to place one ad in an article by blogger but this appears on the home page Blog because as you know that you have adsense usage policies prevent us from putting more than 3 advertising blocks of the same type on one page.

The first thing to do is access the administration of our Adsense account manager or advertising that you have, and get the advertising code that best suits your blog measures.

For example the code we have chosen today is this: a banner 468 × 60