Hoy domingo, estrenamos la nueva web de la Clínica Ginecológica del Doctor Cubillo. Un ginecólogo de Madrid que ha confiado en DGCmedia para desarrollar su sitio web, y las campañas de posicionamiento en buscadores y publicidad en Google Adwords!
La web, cuenta con nuestro gestor de contenidos (CMS) y permite al personal de la clínica, cambiar todos los contenidos de la web de forma fácil y rápida.
Hemos diseñado y desarrollado un nuevo sitio web. Diner Sport Café!
Gracias a nuestro gestor de contenidos (CMS), el cliente puede gestionar los eventos de todo tipo (fútbol, baloncesto, fórmula 1, tenis…) que ofrece en sus siete pantallas gigantes; editar su carta, añadiendo nuevos platos y secciones…. además de, por supuesto, poder cambiar todos los textos e imágenes de su web y crear nuevas páginas de forma sencilla.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
Luego, donde queremos crear el botón, llamamos a la función declarada anteriormente.
|
1 2 3 4 5 |
<div id="lk_pie">
<script type="text/javascript">
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<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+"&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…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<? $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> |
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
A partir del 30 de Marzo, las páginas de Facebook (fan pages) tendrán un aspecto similar a la ya conocida biografía de los perfiles de usuario.
Las páginas, de este modo, son mucho más visuales y atractivas, aunque algo menos personalizables.
Podemos observar varios cambios:
Esperamos, os haya servido de ayuda.
Hemos desarrollado un tema personalizado de WordPress para la web de CTPI Ingeniería.
Esta web, además de un blog y diseños personalizados, dispone de un gestor de contenidos (CMS) para permitir al cliente modificar los textos e imágenes de su web.