Estándares W3C | Blog de diseño y desarrollo web | Blog – DGCmedia diseño y desarrollo de páginas web

En DGCmedia no paramos.

Esta semana inauguramos dos páginas web.

La primera, describe los servicios de la Residencia de Ancianos Los Gladiolos, situada la localidad de Colmenar Viejo. El centro está compuesto por dos edificios (válidos y asistidos) y lleva más de 25 años cuidando de nuestros mayores con las mejores instalaciones y unas vistas inmejorables de la sierra madrileña.

Optimizada para su correcto indexado por parte de los buscadores y desarrollada por el gestor de contenidos DGCcms, permite al cliente modificar todos sus contenidos de forma fácil y rápida.

Hoy también lanzamos la web del Servicio Técnico Satedi Asistencia.

Compuesta por más de 500 páginas, permite al cliente administrar todas ellas de forma simplificada, y gracias al gestor de contenidos profesional Beta Web Tool, modificar su imagen y datos a su antojo.

Destacar la velocidad de carga, generando las páginas en una media de 70 ms.

Sendas páginas web están validadas por la W3C y cumplen con todos los estándares web de la actualidad.

Rating: 5.0/5 (1 vote cast)

Rating: +1 (from 1 vote)

Parece ser que a Twitter, Facebook, LinkedIn y Google les importa poco que sus botones de tweet/follow, me gusta, share y +1 validen en la W3C.

Para el correcto funcionamiento de una web, no suele tener importancia, pero como desarrolladores web, nos gusta que nuestro sitio cumpla los estándares establecidos.

Por ello, hemos desarrollado unas funciones que permiten validar nuestras páginas y agilizar el tiempo de carga. Esperamos un tiempo y creamos los elementos que contienen el botón en cuestión. El código del botón de LinkedIn sería el siguiente:

En el head, añadimos el siguiente fragmento de código JavaScript:

<script type="text/javascript">
function crearLinkedIn(pagina,id) {      
   var lk1 = document.createElement("script");      
   lk1.setAttribute("type","text/javascript");
   lk1.setAttribute("src","http://platform.linkedin.com/in.js");      
   var lk2 = document.createElement("script");      
   lk2.setAttribute("data-counter","right");      
   lk2.setAttribute("data-url",pagina);      
   lk2.setAttribute("type","IN/Share");      
   document.getElementById(id).appendChild(lk1);      
   document.getElementById(id).appendChild(lk2); 
}
</script>

function crearLinkedIn(pagina,id) {

var lk1 = document.createElement("script");

lk1.setAttribute("type","text/javascript");

lk1.setAttribute("src","http://platform.linkedin.com/in.js");

var lk2 = document.createElement("script");

lk2.setAttribute("data-counter","right");

lk2.setAttribute("data-url",pagina);

lk2.setAttribute("type","IN/Share");

document.getElementById(id).appendChild(lk1);

document.getElementById(id).appendChild(lk2);

}

</script>

Luego, donde queremos crear el botón, llamamos a la función declarada anteriormente.

<div id="lk_pie">
   <script type="text/javascript">
      setTimeout ('crearLinkedIn("http://www.e-sort.net","lk_pie")',2000);
   </script>
</div>

setTimeout ('crearLinkedIn("http://www.e-sort.net","lk_pie")',2000);

</script>

</div>

A continuación, incluimos el código de los botones de las redes sociales principales que validan perfectamente en la W3C.

En el head:

<script type="text/javascript">
function crearLinkedIn(pagina,id){
   var lk1 = document.createElement("script");
   lk1.setAttribute("type","text/javascript"); 		      
   lk1.setAttribute("src","http://platform.linkedin.com/in.js");
   var lk2 = document.createElement("script");
   lk2.setAttribute("data-counter","right");
   lk2.setAttribute("data-url",pagina);
   lk2.setAttribute("type","IN/Share");	
   document.getElementById(id).appendChild(lk1); 		
   document.getElementById(id).appendChild(lk2); 	
}

function crearFacebook(pagina,id){
   var fb = document.createElement("iframe");
   fb.setAttribute("style","border:none; overflow:hidden; width:180px; height:21px;"); 		   
   fb.setAttribute("allowTransparency","true");
   fb.setAttribute("scrolling","no"); 
   fb.setAttribute("frameborder","0"); 		   
   fb.setAttribute("src","http://www.facebook.com/plugins/like.php?href="+pagina+"&#038;send=false&#038;layout=button_count&#038;width=180&#038;show_faces=false&#038;action=like&#038;colorscheme=light&#038;font=arial&#038;height=21"); 		
   document.getElementById(id).appendChild(fb); 
}

function crearTwitter(pagina,id,compartir){
   var tw = document.createElement("a");
   if(compartir){
      tw.setAttribute("href","https://twitter.com/share"); 			
      tw.setAttribute("class","twitter-share-button");
      tw.setAttribute("data-url",pagina);
      tw.setAttribute("data-hashtags","diseñoweb");
      tw.setAttribute("data-via","DGCmedia_es");
   }else{
      tw.setAttribute("class","twitter-follow-button");	 			   
      tw.setAttribute("href","http://twitter.com/DGCmedia_es");
   }
   tw.setAttribute("data-lang","es_ES");
   tw.text="Twittear";
   var tw2 = document.createElement("script");
   tw2.setAttribute("type","text/javascript"); 		   
   tw2.setAttribute("src","http://platform.twitter.com/widgets.js");	 		
   document.getElementById(id).appendChild(tw); 		
   document.getElementById(id).appendChild(tw2);
} 	

function crearGoogle(pagina,id){
   var google = document.createElement("div"); 
   google.setAttribute("class","g-plusone");
   google.setAttribute("data-size","medium");
   google.setAttribute("data-href",pagina);
   var google2 = document.createElement("script"); 		
   google2.setAttribute("type","text/javascript"); 		   
   google2.setAttribute("src","https://apis.google.com/js/plusone.js");
   google2.text="{lang: 'es'}";
   document.getElementById(id).appendChild(google2); 		
   document.getElementById(id).appendChild(google); 	
}
</script>

function crearLinkedIn(pagina,id){

var lk1 = document.createElement("script");

lk1.setAttribute("type","text/javascript");

lk1.setAttribute("src","http://platform.linkedin.com/in.js");

var lk2 = document.createElement("script");

lk2.setAttribute("data-counter","right");

lk2.setAttribute("data-url",pagina);

lk2.setAttribute("type","IN/Share");

document.getElementById(id).appendChild(lk1);

document.getElementById(id).appendChild(lk2);

}

function crearFacebook(pagina,id){

var fb = document.createElement("iframe");

fb.setAttribute("style","border:none; overflow:hidden; width:180px; height:21px;");

fb.setAttribute("allowTransparency","true");

fb.setAttribute("scrolling","no");

fb.setAttribute("frameborder","0");

fb.setAttribute("src","http://www.facebook.com/plugins/like.php?href="+pagina+"&send=false&layout=button_count&width=180&show_faces=false&action=like&colorscheme=light&font=arial&height=21");

document.getElementById(id).appendChild(fb);

}

function crearTwitter(pagina,id,compartir){

var tw = document.createElement("a");

if(compartir){

tw.setAttribute("href","https://twitter.com/share");

tw.setAttribute("class","twitter-share-button");

tw.setAttribute("data-url",pagina);

tw.setAttribute("data-hashtags","diseñoweb");

tw.setAttribute("data-via","DGCmedia_es");

}else{

tw.setAttribute("class","twitter-follow-button");

tw.setAttribute("href","http://twitter.com/DGCmedia_es");

}

tw.setAttribute("data-lang","es_ES");

tw.text="Twittear";

var tw2 = document.createElement("script");

tw2.setAttribute("type","text/javascript");

tw2.setAttribute("src","http://platform.twitter.com/widgets.js");

document.getElementById(id).appendChild(tw);

document.getElementById(id).appendChild(tw2);

}

function crearGoogle(pagina,id){

var google = document.createElement("div");

google.setAttribute("class","g-plusone");

google.setAttribute("data-size","medium");

google.setAttribute("data-href",pagina);

var google2 = document.createElement("script");

google2.setAttribute("type","text/javascript");

google2.setAttribute("src","https://apis.google.com/js/plusone.js");

google2.text="{lang: 'es'}";

document.getElementById(id).appendChild(google2);

document.getElementById(id).appendChild(google);

}

</script>

Y en donde queramos llamar a los botones…

<? $dirFB=urlencode("http://www.e-sort.net"); ?>
<div id="fb_pie" class="fb">
   <script type="text/javascript">
      setTimeout('crearFacebook("","fb_pie")',2000);
   </script>
</div>
<div id="tw_pie" class="tw">
   <script type="text/javascript">
	setTimeout('crearTwitter("http://www.e-sort.net","tw_pie",false)',2000);
   </script>
</div>
<div id="gplus_pie" class="gplus">
   <script type="text/javascript">
      setTimeout('crearGoogle("http://www.e-sort.net","gplus_pie")',2000);
   </script>
</div>
<div id="lk_pie" class="lk">
   <script type="text/javascript">
      setTimeout('crearLinkedIn("http://www.e-sort.net","lk_pie")',2000);
   </script>
</div>

<? $dirFB=urlencode("http://www.e-sort.net"); ?>

setTimeout('crearFacebook("","fb_pie")',2000);

</script>

</div>

setTimeout('crearTwitter("http://www.e-sort.net","tw_pie",false)',2000);

</script>

</div>

setTimeout('crearGoogle("http://www.e-sort.net","gplus_pie")',2000);

</script>

</div>

setTimeout('crearLinkedIn("http://www.e-sort.net","lk_pie")',2000);

</script>

</div>

Para Twitter, la función tiene un parámetro booleano compartir, en el que se indica si se trata del botón de compartir o el de seguir.

Esperamos que haya sido de ayuda y gracias a Moisés por conseguir algo que a muchos, nos ha quitado horas intentando validar nuestras páginas en la W3C

Rating: 5.0/5 (2 votes cast)

Rating: +1 (from 1 vote)

Blog de diseño y desarrollo de páginas y aplicaciones web.

Archivo de la categoría: Estándares W3C

DGCmedia estrena nueva página web

Nuevas páginas web de la semana

Valida tus botones de Facebook, Twitter, Google +1 y LinkedIn para la W3C

Servicios

Contacto

Contacto

Últimos Post

DGCmedia en Twitter

Menú