Finally the help of IT is here

Blog de soluciones informaticas.

Mejorar rendimiento pagina web (Social buttons)

Posteado por Xavier Xaus Nadal on 17th Marzo 2013

Hoy os mostraremos como mejorar rendimiento pagina web haciendo que los botones sociales de facebook, twitter y google plus se carguen en la web, pero únicamente cuando le pasamos el ratón por encima.

Como todos sabréis soy un apasionado de la mejora del rendimiento web y podéis ver ejemplos de ello en este mismo blog.

Conseguimos muy buenos resultados de carga incluso estando en un hosting compartido sin VPS por falta de pasta.

Una de las últimas novedades que he implantado ha sido la carga de los fastidiosos bocadillos de las redes sociales que a parte de bajarnos la puntuación en las páginas de test de performance como http://www.webpagetest.org  o http://www.gtmetrix.com hacían que la web cargara más lenta provocando un descenso en el posicionamiento de google entre otros buscadores.

Para conseguir solventar este problema os voy a mostrar varios ejemplos en vivo para poderlo adaptar a cualquiera de vuestras webs.

  • La web carga un 55% más rápido.
  • WordPress –> Podéis ver el resultado en este mismo blog http://www.megacrack.es.
  • Prestashop –> Podéis ver el resultado en http://www.venlotodo.com (Página web de venta de todo tipo de productos entre ellos sexshop con unos precios impresionantes (enviad un mail a ventas@venlotodo.com y decid que venís de parte de MegaCracks y os harán un descuento seguro.) La lástima es que solo venden a España, y además si sois de la provincia de Barcelona hablad con ellos y el precio aún será mejor).

Para que veáis el cambio podéis usar el siguiente enlace que compara la velocidad de carga entre 2 webs http://whichloadsfaster.com/.

Me considero bastante incapacitado para la programación, pero soy bastante hábil en el arte de la lógica y en entender como funcionan las cosas y sobretodo me gusta lo que hago e invierto el tiempo que haga falta. (Os digo esto por que estoy seguro que el código fuente se podrá mejorar enormemente y si con vuestros comentarios podéis hacer que la comunidad se beneficie de ello os daremos las gracias desde este blog viendo vuestras sugerencias de mejora).

Para implementarlo en cualquier web con HTML

A continuación os enseño el código fuente de la web (HTML), lo que hacemos es disponer de varias imágenes de los mismos botones que tenemos en facebook, twitter y google plus y cuando pasamos el ratón por encima mediante un javascript llamamos a las funciones que activan el script de cada uno de los elementos sociales.

<html>
<body>

<div class="g-plusone" data-size="medium" data-href="http://www.megacrack.es" onMouseOver="activate_gp()">
<IMG 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="es" onMouseOver="activate_tw()">
<IMG 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>
<IMG SRC="../files/megusta.png" width=74 height=24></div>

<script type="text/javascript">

	<!-- <JavaScript SD for Facebook Like Button /> -->
	function activate_fa()
	{
		(function(d, s, id) {
		  var 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 for Google Plus Like Button /> -->
	function activate_gp()
	{
		window.___gcfg = {lang: 'es'};
		(function() 
		{
			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
			po.src = 'https://apis.google.com/js/plusone.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		}
		)();
	}
	<!-- <JavaScript SD for Twitter Button /> -->	
	function activate_tw(){

		  !function (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");
	}
</script>

</body>
</html>

Para implementarlo en Wordpress

Antes que nada deberéis subir vuestros ficheros con las imágenes optimizadas con RIOT por ejemplo (Impresionante programa para comprimir imágenes) para que sea lo más eficiente posible a vuestro wordpress en la carpeta files por ejemplo. Al final del artículo os dejaré los enlace a los ficheros png para que no tengáis que descargarlos y comprimirlos, etc… (Están súper optimizados)

Lo que he hecho es separar el código de las funciones en javascript y ponerlo en el fichero header.php ubicado en la ruta wp-content\themes\<vuestro tema>\header.php justo antes de cerrar el head.

<script type=“text/javascript”> <!– <JavaScript SD for Facebook Like Button /> –> function activate_fa() { (function(d, s, id) { var 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 for Google Plus Like Button /> –> function activate_gp() { window.___gcfg = {lang: ‘es’}; (function() { var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true; po.src = ‘https://apis.google.com/js/plusone.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s); } )(); } <!– <JavaScript SD for Twitter Button /> –> function activate_tw(){ !function (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”); } </script>

He creado un widget HTML y he puesto la parte de código que muestra las imágenes dentro de varios div. Esta parte de código es la que os mostrará los botones de las redes sociales. Adaptadlos por los que vosotros tengáis.

<div class="g-plusone" data-size="medium" data-href="http://www.megacrack.es" onMouseOver="activate_gp()">
<IMG 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="es" onMouseOver="activate_tw()">
<IMG 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>
<IMG SRC="../files/megusta.png" width=74 height=24></div>

Funciona muy bien excepto el de facebook que no sé como arreglarlo. (Si alguien me ayuda se lo agradeceré y la comunidad también).

Para implementarlo en prestashop

En prestashop es un poco más complicado, pero también se puede hacer.

Lo que haremos es editar el fichero header.tpl que encontraréis en la siguiente ruta en vuestro ftp o desde vuestro proveedor de hosting para prestashop: public_html\themes\default\header.tpl

Agregad las siguientes líneas de código justo antes de cerrar el head.

<script type="text/javascript">

 function activate_fa()
	{

         (function(d, s, id) {
	  var 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()
	{
	var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
	po.src = 'https://apis.google.com/js/plusone.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	}

function activate_tw()
	{

         !function (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");
	}
</script>

Cuando tengáis hecho esto necesitaréis un addon de prestashop llamado HTMLBOX que podéis descargar desde http://mypresta.eu/modules/front-office-features/html-box.html.

Ahora únicamente deberéis activar el módulo y en su configuración agregar el siguiente código:

Las primeras líneas de código las podéis dejar sin poner (Es para conseguir un aspecto idéntico al de los demás módulos en versión 1.5.3 de prestashop)

<p class=”title_block” style=”background-color: #383838; padding: 6px 11px;

color: #fff; text-shadow: 0 1 px 0 #000; font-size: 12px; font-weight: bold;”>AYUDANOS PULSA ME GUSTA</p>

Esta parte de código es la que os mostrará los botones de las redes sociales. Adaptadlos por los que vosotros tengáis.

<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" >
<IMG 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()">
<IMG 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="es" onMouseOver="activate_tw()">
<IMG SRC="../files/twittear.png" width=62 height=22></A></div>
</p>

Esto es todo, espero que os funcione que hayáis aprendido como mejorar rendimiento pagina web y si tenéis algún problema dejad un mensaje y los intentaré contestar.

Ficheros con imágenes de botones sociales comprimidos

Como he prometido antes os dejo los ficheros de imágenes de las redes sociales comprimidos y listos para descargar:

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: , , , , , , , , ,
Posteado por rendimiento web | No Comments »

WayBack machine o como tirar el tiempo hacia atrás en Internet.

Posteado por Xavier Xaus Nadal on 31st Octubre 2012

El título del artículo WayBack machine o como tirar el tiempo hacia atrás en Internet parece algo irreal, algo futurista, pero en realidad es posible hacerlo gracias a una entidad sin ánimo de lucro que con 10 PetaBytes de información en su poder hace posible que consigamos tirar el tiempo hacia atrás en internet pudiendo ver una captura de pantalla de cualquier web desde que empezó hasta la actualidad, la evolución de cualquier portal, de cualquier negocio en internet, como empezó todo, como eran los antiguos formatos HTML estáticos y como han ido evolucionando hasta el HTML 5.

Únicamente deberéis acceder a la siguiente web http://archive.org/web/web.php y escribir vuestra página web en The Wayback machine y pulsar sobre Take Me Back.

Disponen de alrededor de 150 billones de páginas web archivadas desde 1996 hasta hace unas pocas semanas.

Si queréis obtener más información al respecto la podéis leer en el siguiente enlace: http://archive.org/about/

De esto trata el Big Data, de disponer de la mayor cantidad de datos almacenada y de herramientas capaces de mover estos datos y ofrecer al cliente final un resultado a la búsqueda con unas latencias muy bajas.

Aquí podéis ver la evolución de este blog:

Desde sus comienzos en 2008 y sus 549 visitas almacenadas en un snapshot el 25 de Marzo de 2008.

Sigue leyendo MegaCrack »

Tags: , , , , ,
Posteado por Big Data | No Comments »

Desarrolla JavaScript, HTML y CSS Online.

Posteado por Xavier Xaus Nadal on 28th Octubre 2012

JsFiddle o como ellos lo llaman “parque recreativo para desarrolladores web”, es una gran herramienta web que se puede utilizar de muchas formas, como editor en línea para crear fragmentos de código JavaScript, HTML y CSS, para compartir nuestro código fuente y que otras personas lo testeen y para que vean los resultados directamente ejecutándose en una sencilla y amigable página web.

Con esta web los desarrolladores podrán aislar errores fácilmente y ver los resultados en tiempo real, incluso comprobar si el código JavaScript compila correctamente.

En la interfaz del producto tenemos 3 áreas bien diferenciadas donde trabajar, en la parte superior podemos ver los iconos, para ejecutar el código, guardarlo, compartirlo, en la parte lateral izquierda podemos modificar diferentes opciones para conseguir los paneles de la derecha contengan las herramientas necesarias para conseguir lo resultados deseados, desde modificar los paneles hasta modificar el código de programación, SCSS, CofeeScript, JavaScript, etc..

Y la magia en los 4 paneles de la derecha, HTML, CSS, JavaScript y Result donde al pulsar sobre el botón RUN veremos los resultados de nuestro código.

Os dejo un ejemplo y ya me contaréis si os ha sido útil esta web (http://jsfiddle.net/B6Jsy/50/)

En el ejemplo he creado una parte de código CSS y otra HTML para poder poner 2 módulos de publicidad Adsense en un sólo bloque con márgenes entre ellos y con una alineación centrada.

Como podéis ver en el código HTML llamo a la clase “publidiv” que he creado en la hoja de estilos (CSS) y de esta forma puedo usarla en cualquier punto de la página web únicamente llamando a la clase publidiv o publi para que el contenido de la publicidad adsense que centrada siempre.

Sigue leyendo MegaCrack »

Tags: , , , , ,
Posteado por Programación | No Comments »

Insertar publicidad en Blogger

Posteado por Xavier Xaus Nadal on 29th Abril 2012

Hoy vamos a explicar como insertar un código de publicidad en vuestro blog desarrollado bajo tecnología Blogger, vamos a hacerlo un poco más complicado de lo normal, os cuento:

Con este artículo conseguiremos ubicar un bloque de anuncios en un artículo de blogger pero sin que este aparezca en la página principal del blog ya que como sabéis los que tenéis adsense las políticas de uso nos impiden poner más de 3 bloques de publicidad del mismo tipo en una misma página.

Lo primero que debemos hacer es acceder a la administración de nuestra cuenta de Adsense o del gestor de publicidad que vosotros tengáis y obtener el código de publicidad que mejor se adapte a las medidas de vuestro blog.

Por ejemplo el código que hemos escogido hoy es el siguiente: un banner 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>

Cuando tengáis el código pulsáis sobre cualquiera de estos 2 enlaces que convertirán el código HTML a un texto plano entendible totalmente por blogger.

http://nosetup.org/php_on_line/convertir_html_texto

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

Os debería quedar algo como lo siguiente:

&lt;script type=&quot;text/javascript&quot;&gt;&lt;!–
google_ad_client = &quot;ca-pub-2342147052953367&quot;;
/* contessota */
google_ad_slot = &quot;6351243105&quot;;
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 este momento únicamente debemos definir donde ubicar nuestra publicidad en el blog.

Accedemos a blogger con nuestra cuenta de administrador del blog y nos ubicamos en el menú Plantilla.

Sigue leyendo MegaCrack »

Tags: , , , , , , , , , , , , , ,
Posteado por Active Directory, Google, Publicidad | No Comments »

Comunidad para desarrolladores (WikiCode)

Posteado por Xavier Xaus Nadal on 18th Agosto 2011

Buenas,

Hoy para los que estáis siempre enredando con código fuente os paso una de las futuras mayores comunidades de entornos de programación y que actualmente está creciendo muy rápidamente.

WikiCode

Comunidad basada en el intercambio de código que está creada con la intención de ser un referente en la programación.

Hasta pronto.

Tags: , , , , , , , , , , , , , ,
Posteado por Android, Iphone, Programación | No Comments »