Mostrando entradas con la etiqueta ayuda web. Mostrar todas las entradas
Mostrando entradas con la etiqueta ayuda web. Mostrar todas las entradas

Los “trucos” de Facebook para que descuides tu privacidad


No hace mucho en este blog nos hacíamos eco de la cantidad y calidad de datos personales a los que tienen acceso las aplicaciones que habitan en las redes sociales y, en particular, en Facebook.
Como alertábamos, muchas de las aplicaciones más populares obtienen información sensible de los usuarios y de los amigos de éstos que luego es utilizada con finalidad muy diversa, no siempre la más deseada. En efecto, según un estudio publicado por el Wall Street Journal, las cien aplicaciones más populares en Facebook recaban información del usuario (y, en ocasiones, de los amigos del usuario) relativas a, entre otras, sus direcciones de correo electrónico, ubicación geográfica y preferencias sexuales (por ejemplo, “interesado en hombres/mujeres”).
Pero lo cierto es que, en aplicación de la legislación española, al objeto de poder recabar y tratar datos de carácter personal de un usuario, resulta necesario para quien recaba los datos contar con el consentimiento inequívoco del usuario afectado. Así lo exige de modo expreso el artículo 6 LOPD.
Y hasta aquí todo en orden porque las aplicaciones en Facebook solicitan el consentimiento del usuario para acceder a sus datos y posteriormente tratarlos con las finalidades correspondientes. Pero resulta que el consentimiento, nuevamente en aplicación de lo exigido por la legislación española, en particular por el artículo 1.265 del Código Civil, es nulo cuando es “prestado por error, violencia, intimidación o dolo”.
Latinajos al margen, y continuando con la aplicación del propio Código Civil, “para que el error invalide el consentimiento, deberá recaer sobre la sustancia de la cosa que fuere objeto del contrato, o sobre aquellas condiciones de la misma que principalmente hubiesen dado motivo a celebrarlo” (artículo 1266 CC). Es decir, que el error tiene que ser sobre el objeto principal del contrato –los datos del usuario en este caso- y no sobre elementos accesorios del mismo.
Pues bien, en este escenario que parecía claro, el paso fin de semana, la web de tecnología Techcrunch publicaba un interesantísimo post en el que hacía referencia a una serie de “trucos” utilizados por Facebook para facilitar el consentimiento del usuario en la entrega de datos. Y como no he podido resistirme, ahí van. Juzguen ustedes si esos trucos son o no suficientes para invalidar el consentimiento del usuario en la entrega de sus datos personales.
1.- Truco Primero: El truco del botón único.
El diseño antiguo de acceso a datos nos permitía optar entre “permitir” y “no permitir”. El nuevo diseño sólo nos permite “jugar”. Hábil, ¿no?
2.- Truco segundo: El truco del texto en gris.
Todos lo sabemos, el gris no es importante. Y si no es importante, mejor ni lo leemos, ¿no?
3.- Truco tercero: El truco de esconder la información a la que permites acceso.
El anterior diseño describía toda la información a la que se tenía acceso. El nuevo diseño sustituye esta retahíla de información por un mucho más “elegante” signo de interrogación.
4.- Truco cuarto: El truco del campo de visión.
¿Y si ponemos el botón “jugar” antes que el resto de la información? Ya nadie se leerá lo de abajo, ¿no? Mucho mejor, habrán pensado.
5.- Truco quinto: El truco del lenguaje amigable.
Éste es mi preferido. ¿Para que pedir permiso si se puede sustituir con un simple “a jugar”?
Ante esta nueva situación, sea legal o no, sean o no suficientes los trucos empleados por Facebook para anular el consentimiento del afectado, lo recomendable es darnos un paseo por la “configuración de las aplicaciones” de Facebook y conocer quién tiene acceso a nuestros datos. Me apuesto que habrá sorpresas.

Expandir y contraer partes de una entrada

Este truco permite esconder partes de una entrada y con la posibilidad de mostrarlos cuando el lector quiera. Se puede esconder texto, imágenes o video y sirve para ahorrar espacio cuando tenemos un elemento muy largo dentro de la entrada.


Primero vamos a Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->


Antes de pegar lo anterior verifica si tu plantilla ya lo tiene, de ser así omite ese paso.
Lo siguiente será usar el código que es el que ocultará las partes dentro de un post. Así que cuando quieras ocultar algún elemento de la entrada deberás usar este código:
<a href='#' onclick='Effect.toggle("expandir1","slide"); return false'>[+/-] Ver / Ocultar</a><div id='expandir1' style='display: none;'>Aquí va el contenido que se ocultará</div>

Toma en cuenta que donde dice expandir1 deberás cambiarlo cada vez que quieras usar este efecto, puedes modificarlos por expandir2expandir3, etc. Lo que está en color rojo es el contenido que estará oculto, puede ser texto, imágenes, tablas, videos, etc. cualquier elemento que tengas dentro de un post podrás ocultarlo.

fuente . http://goo.gl/rkeL7

Insertar tablas en Blogger

Pregunta Ricardo de Alicante, España cómo crear tablas en las entradas del blog. Si bien es algo sencillo requiere de un poco de atención para poder entender, así que haré mi mayor esfuerzo para explicarme.

El código básico para insertar una tabla es el siguiente:
<table border="1" cellpadding="4"><tbody>
<tr><td>Mesa</td>
<td>Silla</td>
<td>Cama</td></tr>
<tr><td>Carro</td>
<td>Barco</td>
<td>Avión</td></tr>
<tr><td>Lunes</td>
<td>Martes</td>
<td>Miércoles</td></tr>
</tbody></table>


El resultado es este:

MesaSillaCama
CarroBarcoAvión
LunesMartesMiércoles

Nótese que las tres primeras palabras forman la primera fila, luego las otras tres forman la segunda fila y las tres últimas la tercera fila. Si deseas insertar una fila más agrega esta parte antes de </tbody></table>
<tr><td>Palabra 1</td>
<td>Palabra 2</td>
<td>Palabra 3</td></tr>

Del mismo modo si quisieras que cada fila tuviera más celdas entonces agrega las que quieras añadiendo las palabras entre las etiquetas <td> </td> antes de cada </tr>

Ya teniendo claro esto, ahora podemos personalizar las tablas añadiendo unos atributos.
El borde de la tabla es el más delgado, si lo quieres más grueso cambia border="1" por un número más alto, si lo dejas en "0" se quedará sin borde.


<table border="5" cellpadding="4">
<tbody><tr><td>Tabla con borde "5"</td></tr>
</tbody></table>


Para cambiar el color del borde de la tabla añadimos después de <table el atributo
bordercolor="green" el color lo puedes cambiar, por ejemplo "red"


<table border="2" bordercolor="green" cellpadding="4">
<tbody><tr><td>Tabla con borde verde</td></tr>
</tbody></table>


Si quieres usar un color de fondo en toda la tabla agrega bgcolor="yellow" después de <table. El color lo puedes cambiar.


<table border="2" bgcolor="yellow" cellpadding="4">
<tbody><tr><td>Tabla con fondo amarillo</td></tr>
</tbody></table>


Este efecto también lo puedes agregar sólo a las celdas que quieras para que cada fila tenga distintos colores. Para hacer eso se usa el mismo atributo, pero en vez de ponerlo después de<table lo pones después de la etiqueta <tr por ejemplo:
Fila caféFila café
Fila grisFila gris


Este fue el código para hacer eso:
<table border="1" cellpadding="6">
<tbody><tr bgcolor="brown">
<td>Fila café</td><td>Fila café</td></tr>
<tr bgcolor="grey">
<td>Fila gris</td><td>Fila gris</td></tr>
</tbody></table>


También puedes poner una imagen de fondo en la tabla, para lograr eso agregabackground="URL de la imagen" después de <table. Yo he puesto una imagen animada (.gif) en el ejemplo.



Tabla con fondo de imagenTabla con fondo de imagen


<table background="URL de la imagen" border="1" cellpadding="4">
<tbody><tr><td>Tabla con fondo de imagen</td>
<td>Tabla con fondo de imagen</td></tr>
</tbody></table>


Como verás después de entender el código básico todo lo demás resulta fácil. De cualquier modo puedes probar los resultados y variaciones en un blog de pruebas antes de publicarlo.

El Fanbox de Facebook, flotante y con efecto deslizante



El gadget funciona con jQuery que es el que le da ese efecto deslizante, así que usaremos ese script, un poco de CSS y el FanBox de Facebook.

Lo primero es entrar en Diseño | Edición de HTML y antes de </head> pega el script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
Ahora antes de ]]></b:skin> agrega los estilos:
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh05CugOP37emACLcPICp6ZoYWDrhn6rznkL-zI6DbuF7G8nyjRhO-OlXzvsNlicurQy42b9GyGL0Y1Ps9dpDzlGuFuHhqccCZhrPRtLUh8kxq6FW3sWpin-pidRqP_F2QJlll6Aldcq4k/) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
Por último entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega esto:
<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-tu-pagina-de-facebook&amp;width=240&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>
Ese código contiene el Fanbox, así que cambia donde se indica el nombre de tu página, y listo.
No requiere muchos pasos ni mayor trabajo, a menos que quieras hacerle modificaciones.

La pestaña, así como el fondo del gadget es una imagen, así que si deseas cambiarle el color o tamaño tendrás que editar la imagen que se encuentra en el área de los estilos.
Lo ideal sería no modificar el tamaño, pero en caso de que desees hacerlo deberás -como dije- editar la imagen, cambiar las medidas tanto en los estilos como en el Fanbox, pero además mirar la entrada donde hablamos cómo agregar el fanbox sin borde, pues ese mismo procedimiento hemos usado aquí también, así que ahí podrás ver qué se necesita restar en las medidas del Fanbox.

Pero claro, eso es sólo si quieres modificar su tamaño, sino entonces no necesitarás nada más que los tres primeros pasos y podrás tener este Fanbox de Facebook, flotante y con efecto deslizante en tu blog.

Botones flotantes para recomendar el blog (Facebook, Twitter, PlusOne)




La instalación de estos botones es bastante sencilla, primero entra en la Edición HTML de la plantilla y antes de ]]></b:skin> agrega estos estilos:

#botones-like {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
background-color: #eee; /* Color de fondo del botón */
padding: 5px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 10pt; /* Tamaño del texto */
color: #999999; /* Color del texto */
text-align: center;
position:fixed;
bottom:5px;
right:30px;
}
#expandirBotones{
background:#eee; /* Color de fondo del contenedor */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 6px #696969;
-moz-box-shadow: 0px 0px 6px #696969;
box-shadow: 0px 0px 6px #696969;
position:fixed;
bottom:40px;
right:30px;
}


Ahora antes de </head> pega este código; si ya lo tuvieras no hace falta ponerlo otra vez:

<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>

Luego pega antes de </body> lo siguiente:

<a href='javascript:Void(0)' onclick='Effect.toggle(&apos;expandirBotones&apos;,&apos;appear&apos;); return false' style='text-decoration:none;'><div id='botones-like'>&#161;Recomienda este blog!</div></a>
<table border='0' id='expandirBotones' style='display:none'>
<tr>
<td>&lt;iframe allowTransparency=&#39;true&#39; frameborder=&#39;0&#39; scrolling=&#39;no&#39; src=&#39;http://www.facebook.com/plugins/like.php?href=http://nombre-de-mi-blog.blogspot.com&amp;layout=box_count&amp;show_faces=false&amp;width=72&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#39; style=&#39;border:none; overflow:hidden; width:72px; height:63px&#39;&gt;&lt;/iframe&gt;</td>
<td><g:plusone href='http://nombre-de-mi-blog.blogspot.com' size='tall'/><script type='text/javascript'>
window.___gcfg = {lang: &#39;es&#39;};
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script></td>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Me ha gustado este blog, seguro a ti también te gustará:' data-url='http://nombre-de-mi-blog.blogspot.com' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr>
</table>


Cambia la dirección de tu blog donde se indica, así como el mensaje que aparecerá en Twitter y listo.
En color verde puedes cambiar algunos aspectos del diseño, básicamente será el color de fondo y de texto.

¿Como saber donde está alojada una Web?


Esta es una de esas webs simples y efectivas, que permite conocer en que empresa de hosting está alojada un determinado dominio, una determinada página web en un segundo, sólo con teclear el nombre de dominio.

Se trata de http://www.whoishostingthis.com/,algo así como ¿quien aloja esto?, un nombre muy adecuado, si señor.

Lo cierto es que tanta rapidez y efectividad tiene sus inconvenientes: sólo dice en que empresa está alojada la web o el dominio, no el país, región ni otro dato que, en muchas ocasiones, necesitamos para "investigar" bien a la competencia. Pero como han pensado en eso, ofrecen un enlace directo a la empresa de hosting, para conocer más sobre ella.

Eso sí, si queremos más información, este servicio de esta nueva web no nos será de mucha ayuda, así que deberemos seguir usando el Whois de toda la vida, donde además de los datos propios del hosting, tendremos datos del registrante, fecha de registro del dominio, etc, etc por ejemplo desde:

http://www.whois.sc/

Botones para compartir flotantes que se deslizan al bajar

Para poner estos botones flotantes para compartir usaremos un script muy corto de jQuery.
Lo primero es ingresar a Plantilla | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y pegar antes de </head> lo siguiente:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/><script type='text/javascript'>// <![CDATA[$(function() {var offset = $("#BotonesFlotantes").offset();var topPadding = 15;$(window).scroll(function() {if ($(window).scrollTop() > offset.top) {$("#BotonesFlotantes").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});} else {$("#BotonesFlotantes").stop().animate({marginTop: 0});};});});// ]]></script><style>#BotonesFlotantes {position: absolute;left: -100px; /* Distancia desde la izquierda */border: 1px solid #FB5F55; /* Borde del contenedor */border-right: 0px;padding: 10px;background-color: #FFF; /* Color de fondo del contenedor */z-index:9;}#BotonesFlotantes div {margin: 10px 0;}</style>
Luego buscamos esta línea:
<div class='post-header'> 

Y debajo de ella pega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='BotonesFlotantes'><div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px'/></div>
<div><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></div>
</div></b:if>


Guarda los cambios y listo.
En el primer código hemos puesto tanto el script como los estilos ya que ambos son muy breves. Ahí verás en color verde a qué corresponde cada área.
Donde dice /* Distancia desde la izquierda */ debes modificarlo hasta que quede a la distancia correcta según tu plantilla. Ahí mismo verás dónde cambiarle el borde y fondo del contenedor.

Estos botones se verán sólo en las entradas individuales, de otra forma no funcionarían.
Si quisieras agregar más botones entonces añádelos antes de </div> y cada uno encerrado entre <div> y </div>

Recuerda que este gadget usa jQuery, por lo que si ya tienes la última versión de jQuery no hace falta repetir el script. Y si usas Mootools o Scriptaculous debes aplicar unos cambios al script.

Sino te aparecieran, pon la /* Distancia desde la izquierda */ en 0px, si tampoco aparecen entonces el último código ponlo arriba de <data:post.body/> 

fuente: http://goo.gl/JBPfy