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 [Email protected] 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 »

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 »

Developer Community (WikiCode)

Posted by Xaus Xavier Nadal 18th on August 2011

Good,

Today for you who are always messing with source code I pass one of the largest communities of future programming environments and is currently growing very rapidly.

WikiCode

Community based on the exchange of code that is created with the intention of becoming a reference in programming.

See you soon.

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