Detectar si un usuario usa Adblock Plus

El tema de la publicidad en internet está candente últimamente. Por un lado algunas páginas se pasan de publicidad intrusiva (y no hablo sólo de sitios donde ver retransmisiones deportivas on-line, basta con entrar en la web de cualquier periódico español «grande» para ver anuncios que a veces hasta dificultan la lectura), pero por otra parte también están muchas webs gratuitas cuya única fuente de ingresos es la publicidad, y al bloquearla les dejamos sin un dinero necesario para pagar los gastos ocasionados. Algunas web optan por bloquear a los usuarios que llegan con el adblock puesto, yo no comparto estas medidas draconianas ya que soy el primero que ve eso y lo siguiente que hace es salir de la página y buscar otra que me ofrezca lo mismo sin esta publicidad. Creo que la mejor solución sería el «buenrollismo«, vamos, que si se detecta en AdBlock se le saca al usuario un aviso tipo «tío, que alojamiento y dominio son 50 pavos anuales, que no es mucho pero me los sacaba con estos anuncillos de google, no me jodas y saca el bloqueador, man». La mayoría no te harán ni caso, pero bloqueándoles no te creas que lograrías mejores resultados, al menos así puede que lo compartan en redes sociales y logres ingresos de otros usuarios que lo miren.

Vamos pues con la chicha ¿cómo se detecta AdBlock? Bueno, yo lo he hecho mediante el método del señuelo, que de momento va furrulando. La cuestión es que AdBlock tiene una lista negra de palabras y bloquea según qué javascript si detecta alguna de ellas. El truco es meter un javascript con un nombre que haga saltar Adblock, comprobar que dicho javascript no está furrulando y, en ese caso, lanzar un aviso al usuario.

Empezamos creando un archivo de javascript con el título advertisement.js, un nombre que hará saltar a Adblock para evitar su carga, con un contenido más o menos como el siguiente:

document.write('<div id="le_truquito">Publicidad malvada y terrible!!</div>');

La idea es hacer el document.write de un div con un id concreto, lo del texto ya es chorrada mía. Por si entra un usuario sin Adblock lo mejor es que ocultemos ese div que se creará con CSS, para que no le aparezca por medio.

#le_truquito{
    display:none;
}

Ok, lista la trampa lo siguiente es añadir otro código de javascript que comprobará si se ha bloqueado el primero (cerciorándose de si existe el div que debería crear) y, en caso de que no lo haya hecho sacará un mensaje en pantalla.

<script type="text/javascript">
if (document.getElementById("le_truquito") == undefined)
{
    window.alert("tío, que alojamiento y dominio son 50 pavos anuales, que no es mucho pero me los sacaba con estos anuncillos de google, no me jodas y saca el bloqueador, man");
}
</script>

En el ejemplo puse un window.alert, pero también podéis crear un div con un texto en la página… en fin, lo que veáis más práctico.

De momento el sistema funciona, y tiene pinta de que al menos durante una temporada lo hará. En todo caso podéis buscar el nombre de un archivo de javascript de publicidad de Google, o de otra compañía, que sepáis positivamente que se está bloqueando por AdBlock y llamarle así en lugar de advertisement.js (aunque de momento con ese nombre furrula).

Consulta SQL para conocer el número de campos de una tabla

Por avatares del destino hoy estaba modificando una página en ASP clásico y necesitaba saber el número de campos que tenía una tabla. Basta con una consulta para tener estos datos:

SELECT Table_Name, COUNT(*) As NumeroCampos
FROM Information_Schema.Columns
WHERE Table_Name = 'nombre_de_la_tabla'
GROUP BY Table_Name;

Si queréis saber el de todas las tablas de la base de datos podéis hacer lo siguiente:

SELECT Table_Name, COUNT(*) As NumeroCampos
FROM Information_Schema.Columns
GROUP BY Table_Name
ORDER BY Table_Name

Meta etiquetas de Apple para hacer que una web parezca un app para iPhone o iPad

Aunque ya sabéis que le tengo alergia a los iCacharros, y sobre todo a sus fanáticos seguidores, hay que reconocer que Apple de vez en cuando saca cosillas interesantes. Una de ellas es la meta etiqueta viewport de la que ya hablamos en el pasado, pero no es la única meta equita que se sacó de la manga Apple para el diseño web móvil. Y es que dando uso a sus etiquetas podemos hacer que una web aparezca en pantalla como si fuera un app nativa, que se le pueda hacer un acceso directo desde el menú de aplicacione con un icono… todo esto mediante una serie de etiquetas.

Para conseguir que al abrir la web esta se vea sin ningún marco del navegador en pantalla hay que usar la siguiente etiqueta en la cabecera de la web, gracias a la cual lograremos ese aspecto app-like:

<meta name="apple-mobile-web-app-capable" content="yes" />

Sigamos ¿cómo escogemos un icono? Bueno, realmente necesitamos dos iconos, uno para la versión normal y otro para la versión con pantalla de alta densidad (o como reza su nombre comercial «retina display«). El primero ha de ser de 57*57px y la siguiente de 114*114px, la propiedad href apuntará a donde tengáis guardada la imagen:

<link rel="apple-touch-icon" href="img/icons/icono5757.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/icono114114.png">

Es posible que al abrir la web/app os salga durante unos segundos una imagen en blanco mientras esta carga (muy posible), algo que queda «feo» pero que tiene también solución: podéis definir una imagen que se muestre durante esta carga, una startup-image:

<link rel="apple-touch-startup-image" href="img/loading.png">

Y finalmente, existe una posibilidad de modificar mínimamente la barra de estado de Apple en la parte superior. No es que tengáis mucho con lo que jugar, no es que haya mucha opción, pero algo se puede ir apañando, pudiendo elegir entre el color por defecto, el negro o un efecto traslúcido.

<!--Por defecto-->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!--negro-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--traslúcido-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Y con estas opciones podréis hacer que vuestra web parezca un app para dispositivos Apple. La he probado en el curro (web PHP+Javascript) en un proyecto y el resultado fue satisfactorio. La pena es que no haya algo así para Windows Phone y Android.

Archivos encriptados OMG : Protegerse de este ransomware y eliminarlo

En el pasado ya hablamos por aquí del popularmente llamado virus GEMA o virus de la policía, tanto en su versión para Windows como su menos dañina y más fácil de eliminar versión para Mac.Entre otras cosas también hablamos de cómo desencriptar los archivos que este virus encriptaba. El problema viene con que este ransomware es bastante cabrón y utiliza una encriptación extremadamente fuerte, ni con Panda ni con el Rahno Decryptor… nada, he probado mucho software pero no hay manera. Hay gente que dice que pagaron y les enviaron el programa para desencriptar, pero yo no estaría muy seguro, por mi parte no lo haría. Hay quien dice que ha logrado desencriptar los archivos OMG con el programa MBLBlock pero yo no he sido capaz de recuperar los ficheros. En todo caso, o dejo un enlace a un tutorial sobre como usarlo por si queréis probar.Eso sí, no os lancéis a ello antes de desinfectar el equipo. Esta nueva encarnación del malware suele aparecer como Anti-child Porn Spam Protection.

Tras la decepción de las, hasta el momento, pocas posibilidades de recuperación vamos con la desinfección y la protección:

En el primer caso el tutorial sobre MBLBlock da una serie de pautas, podéis seguirlas, si bien yo lo hice de otra forma. En mi caso simplemente arranqué en modo seguro con funciones de red, instalé y ejecuté un análisis a fondo con Malwarebytes y la cosa funcionó. Finiquité limpiando el registro con CCleaner.

Una vez desinfectado vamos con los consejos de protección. Consejos que si todavía no habéis sido atacados también deberíais tener en cuenta.

  • Los principales antivirus detectan este ransomware. El problema es que la infección suele llegar a través de un ataque que permite a quien lo realiza conectarse al servidor y desconectar el antivirus. La protección residente entonces se torna inútil, por lo que tendrás que llevar a cabo unas políticas de seguridad más activas.
  • Comentado esto una primera opción es, desde luego, poner una contraseña fuerte para dificultar los ataques por fuerza bruta, una contraseña larga (más de 12 caracteres) que combine letras mayúsculas, minúsculas, símbolos y números y que no utilice nombres, palabras que estén en un diccionario (sobre todo palabras inglesas) o fechas.
  • Tener el sistema actualizado desde luego es básico: instalad las actualizaciones de seguridad pertinentes tanto de Windows como del software que uséis. Los parches MS13-029 o MS13-030 son necesarios para hacerla todavía más robusta.
  • Cambiando el puerto de escucha de Terminal Server conseguiréis dificultar el ataque. Los atacantes suelen probar a lanzar una petición al puerto 3389 (que es el puerto por defecto de Terminal Server) para continuar con un ataque por fuerza bruta para romper la contraseña, pero si no reciben respuesta de ese puerto es poco probable que sigan intentándolo. Así que cambiando el puerto por defecto se consigue una protección extra. En este artículo de la web de Microsoft veréis cómo hacerlo
  • En vista de que las posibilidades de recuperar los datos son, por el momento, bajas una política activa de backups, almacenados en otra ubicación, permitirá al menos restaurar parte de los archivos que podáis perder por el ataque
  • Todo esto no garantiza nada ya que la seguridad total y perfecta es una quimera, pero dificultará el ataque. La idea de los atacantes es la de extorsionarte así que si ven que les va a dar mucho trabajo lo más probable es que te dejen y se busquen una presa más fácil, porque no les resultará rentable.

En fin, si no os han atacado todavía comenzad con una política activa de defensa. Si ya lo han hecho, desinfectad y ponéos las pilas para que no vuelvan a cazaros. Si sabéis de alguna herramienta fiable para desencriptar los archivos estaré muy agradecido de que lo pongáis en los comentarios, a ver si en un tiempo aparece algo para solucionarlo, porque ya hace unos meses que se vienen sufriendo estos ataques, según he podido comprobar en San Google.

Redireccionar y recargar web con javascript

Todavía está virgen 2014 de alguna entrada sobre informática, al empezar el año de vacaciones me dediqué a temas más ociosos. Vamos pues con una minientrada sobre javascript ¿cómo redireccionar una web usando este lenguaje?

Empecemos por un punto, existen muchas formas de hacer redirecciones, tanto desde el servidor como desde el cliente. Hasta con una mera etiqueta en HTML podemos hacerlo. Vamos a ver cómo se puede hacer desde javascript dado que tiene mucha chicha. Para ello nos serviremos del objeto Location.

Para ir a una URL determinada lo más sencillo es usar la propiedad href de location. Con href podremos tanto recuperar la url en la que navegamos como cambiar el valor de la misma. Podemos usar una url absoluta para ir a otra web externa a la nuestra o una relativa para navegar dentro de nuestra web:

/*Ruta absoluta, nos llevaría a una web externa*/ 
location.href = "http://www.webquequeremosver.com"; 
/*En cambio esta nos llevaría a una dentro de nuestro dominio*/ 
location.href="admin.php";

Otra opción son los métodos replace y assign. Ambos hacen que location cargue un nuevo documento, pero con una diferencia: replace quita el sitio actual de la historia de navegación del documento, de esa forma el botón «atrás» del navegador no puede utilizarse para volver a la página anterior. En cambio assign simplemente carga el nuevo documento, por lo que sí tendrás esa función de navegar hacia atrás activa.

/*Con replace nos vamos a un nuevo document y bloqueamos el botón de atrás*/
location.replace("http://google.es"); 
/*Con assign en cambio conservamos esa funcionalidad*/ 
location.assign("http://google.es");

¿Y para recargar la página? Pues está el método reload, el cual por defecto recargará desde la caché a no ser que le pasemos el parámetro true para forzar la recarga desde el servidor. Es decir, el método por defecto funcionaría como la tecla F5 en vuestro navegador, y con el true en cambio lo haría como ctrl+F5

/*Recargamos desde caché*/ 
location.reload(); 
/*Forzamos la recarga*/ 
location.reload(true);

Mobsyte: Generador de webs móviles en HTML5

Hace un par de días contactaron conmigo los creadores de la web Mobsyte invitándome a probar su nuevo producto por si me interesaba reseñarlo por aquí. Tras los excesos de fin de año y la recuperación en año nuevo me he decidido a probar un plan gratis de este generador de webs mobile first, todavía en fase beta, y plasmar mis impresiones.

Mobsyte

El mercado móvil cada vez es más importante dada la proliferación de estos dispositivos, cuyas ventas poco a poco van superando a los ordenadores, convirtiéndose en algo fundamental a la hora de plantear un proyecto de comunicación on-line. Lo que Mobsyte nos ofrece es una evolución del ya comentado en este blog eMobc Lander, un generador basado en el framework eMobc, con varios planes de precios, uno gratis (aunque un pelín limitado, todo hay que decirlo, ya que sólo permite 1000 visitas mensuales, además de no limitarte los mensajes, permitir dominio propio sino uno .mobsyte.com y de hacerte llevar el logotipo de Mobsyte) y dos de pago (9 euros al mes limitado a 5000 visitas, con la publicidad limitada, dominio propio y pero con branding de Mobsite, y otro de 19 euros mensuales sin límite de visitas y sin logo de Mobsyte).

Mobsyte Home Page

Mobsyte no te permitirá crear una aplicación web compleja, pero sí desarrollar una landing page o un microsite que te pueda servir como flyer on-line para una promoción. Desde un generador basado en plantillas podrás añadir secciones de texto, fotos, galerías de imágenes, enlaces, vídeos, fragmentos de HTML, mapas, calendario… las opciones son múltiples. El estar centrado en plantillas también limita más la personalización del sitio. En cuanto a temas de SEO o de conectividad con redes sociales Mobsyte te permitirá optimizarlo de forma sencilla, sólo cubriendo un par de formularios, y además incluye un módulo de estadísticas para conocer cuántos visitantes tienes, cuando te visitan y como.

La versión pro te da opciones como vender on-line, insertar encuestas o un formulario de búsqueda.

En resumen, fácil de usar y muy configurable, pero con limitaciones. Como ocurre siempre en estos casos, es el usuario quien debe pensar si le interesa o no, quien debe valorar si Mobsyte puede darle lo que necesita y si el precio de los programas de pago le sale rentable o si, por contra, cubrirá mejor sus necesidades contratando a una empresa que le haga una web personalizada.

Como ejemplo, en sólo 10 minutos y siguiendo pasoa paso los tutoriales hice una pequeña landing page que podéis ver en su versión para pc y aquí para móvil, que no es gran cosa, pero que demuestra lo rápido que se puede hacer una pequeña paginilla por medio de este servicio.

Uso de los pseudoelementos :before y :after de CSS3

¿Cuántas veces has tenido que poner una coletilla al lado de varios elementos en una web? Por ejemplo, poner la palabra «Error» antes de un mensaje de error. ¿No te encantaría que eso pudiera automatizarse?.

Pues con CSS3 puedes hacerlo. Con los pseudoelementos :before y :after. Estos te permiten añadir un contenido html antes (:before) o después (:after) de un elemento desde vuestra hoja de estilos. Para ello utilizaremos la propiedad «content». Vamos con un ejemplo, en el que añadiremos la palabra «Error» antes de un mensaje de error (vamos primero con lo más simple)

.error:before{
  content:"Error: ";
}

Furrula hasta en IE8 (7 no, no pidáis milagros), así que podéis ir trasteando con esto. Hay más posibilidades, claro, porque si sólo pudiéramos meter un textillo la cosa quedaría sosa. Lo primero, podemos dar estilos al contenido generado por estos elementos, como con cualquier otro elemento textual de la web:

.error:before{
  content:"Error: ";
  color:#FF0000;
  font-weight: bold;
}

O podemos incluir una imagen en lugar de un texto:

.error:before{
  content:url("carpetaimagen/imagenejemplo.png");
}

O crear un contenedor:

.error:before{
  content:"";
  display:block;
  background-color:#666;
  width:32px;
  height:32px;
  border:2px solid #ff0000;
}

Eso sí, hay una cosa que debemos tener en cuenta: a la hora de accesibilidad y del uso de lectores de pantalla, por ejemplo, estos textos/imágenes están generados por CSS, no son parte del DOM, no forman parte del contenido en si de la web, por lo que no serán interpretados por estos. Es decir, mejor no crear contenido relevante con esto, tanto por la accesibilidad como por el hecho de que los buscadores no lo indizarán.

La propiedad css background-size y como hacerla funcionar en IE8

Si usas una imagen de fondo en alguna ocasión te habrás visto en la necesidad de usar una que se adapte al tamaño del elemento contenedor. La propiedad CSS3 background-size permite definir el tamaño de esta imagen, ya sea en píxeles o con un porcentaje relativo al tamaño del contenedor. Se definen dos parámetros para el tamaño: el primero es el alto y el segundo el ancho.

/*Este daría un alto de 250px y un ancho de 50*/
background-size:250px 50px; 
/*Este cubriría todo el contenedor*/
background-size:100% 100%;

Como os podéis imaginar, si andáis modificando tamaños la imagen se deformará al romperse la proporción de las medidas.

Existen además de estas medidas dos propiedades que podéis aplicar: cover y contain.

  • Contain: Esta propiedad escala la imagen de forma que mantenga las proporciones y ocupa o el alto o el ancho (dependiendo de la proporción)
  • Cover:Esta propiedad escala la imagen al mínimo tamaño, manteniendo también las proporciones, para que ocupe todo el contenedor. Es posible que esto provoque que parte de la imagen no se vea.
background-size:contain; 
background-size:cover;

Y ahora vamos con el problema (con el que me vi esta tarde): hemos acabado de maquetar, probamos en todos los navegadores y funciona. Entonces en Explorer empezamos con los modos de compatibilidad, y sin problemas en Explorer 10 y 9 pero, al llegar al 8, todo a tomar por culo… tras maldecir a Bill Gates, a Windows, al Explorer y compartir mis cuitas con los compañeros de curro toca buscar una solución… y aparece en StackOverflow, como no.

Con lo que basándome en eso, dejo el css como está, con su background-size que está furrulando en todos los navegadores (menos en Explorer 8 y previos) y en el marcado html modifico el div con el siguiente código, para que así la imagen ocupe todo el contenido:

<div style='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale');-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale')";'></div>

En fin, hasta que no queden eliminados todos los IE8 habrá que recurrir a este truquito para hacer funcionar esto. Conste que no soy partidario de usar imágenes de fondo, la verdad.

Etiquetas META

A la hora de elaborar una web y posicionarla en buscadores las etiquetas META (Metatags) son fundamentales, ya que nos permiten añadir cierta información que será invisible para el usuario de la web pero visible en las búsquedas. Vamos a verlas

  • Title: Empezamos por esta etiqueta dado que es fundamental en el posicionamiento y además tiene un comportamiento distinto al resto. Distinto porque será visible para el usuario, ya que será el título en la cabecera del navegador/pestaña. Según las especificaciones de la W3C es obligatoria y cada página de tu web debe tener una title distinta, dado que el contenido repetido será sancionado por Google (en cuanto a Bing y Yahoo ya no se, pero no os vendrá mal). Se suelen recomendar sobre 70-80 caracteres de longitud, más o menos.
  • Keywords: Hace años era fundamental para el SEO pero actualmente el abuso de esta etiqueta, en la que se listaban palabras clave, ha provocado que los navegadores las ignoren, al menos según dice Google (algunos sostienen que siguen funcionando), que afirman que tienen una cierta relevancia a la hora de definir el contenido de la página, pero no a la hora de posicionar. No metas muchas, no más de 15 palabras.
  • Description: Fundamental en los últimos años, la etiqueta description nos permite añadir una descripción de la página que será usada por el navegador para posicionar la web, además de ofrecer al usuario una explicación del sitio. Cuando compongáis el texto descriptivo intentad meter una gran densidad de palabras clave (sin excesos que provoquen que el texto sea un galimatías) y con una longitud de entre 250 y 300 caracteres, haciendo una pequeña sinopsis del contenido de la web.
  • Robots: La etiqueta robots es una alternativa al robots.txt, aceptando los pares de valores Index/NoIndex y Follow/NoFollow. Como ya te imaginas te permite configurar las opciones de rastreo e indexación.
  • Otras: Existen, además, otras etiquetas menos usadas como Author, Subject, Language… que han caído en desuso ya que no eran usadas por los buscadores, o incluso eran contraproducentes para la web.

Estas etiquetas no son la panacea en cuanto a SEO, su uso no te garantiza un buen posicionamiento en los buscadores, pero el descuidarlas o tenerlas mal en cambio sí ue puede perjudicaros profundamente.

Un ejemplo de cómo se usarían en una cabecera

<head>
	<title>Macariowar | Tienda | Sacacorchos</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="description" content="Sección de sacacorchos de la tienda Online de Macariowar, nombre absurdo inspirado por Manowar."/>
	<meta name="keywords" content="Aragón, Macariowar, tienda, hostelería, sacacorchos, sacachapas" />
<!-- Aquí los enlaces a css y javascript-->
</head>

Pie de página siempre al final de la web

Seguro que alguna vez os ha pasado que os trabajáis una maquetación que se ve de puta madre en vuestra pantalla de 15 pulgadas, pero al verla en una 22… ale, el pie al medio de la página. No hay contenido suficiente para llenar toda esa pantalla. Una opción es usar un posicionamiento absoluto, pero claro, si es una web con varias páginas igual en otra sí tienes suficiente contenido y entonces te queda un pie fijo en la parte de abajo del monitor aunque tengas que scrollear para ver toda la info.

Pero hay una solución, básicametne consiste en envolver todo el contenido superior al footer en un div contenedor, darle un alto mínimo del 100% de la pantalla, meterle debajo un margen negativo y allí insertar el pie. Ok, dicho así suena muy árido. Vamos con un ejemplo progresivo. Imaginemos que el que sigue es nuestro código:

<div id="header">Aquí la cabecera</div>
    <div id="nav">
       <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Primera</a></li>
          <li><a href="#">Segunda</a></li>
       </ul>
     </div>
<div id="content">Contenido interesante y original que te hará ganar posicionamiento en google.</div>

<div id="footer">Y aquí ese pie que no se nos queda abajo.</div>

Bueno, pues lo primero es el marcado (luego ya nos ponemos con el CSS). La idea es, como he dicho, encerrar todo el contenido en un div que será un contenedor general, y por si acaso al final de este metemos un div vacío con la misión de evitar problemas si hay elementos flotados encima.

<div id="container"> <!--El container-->
  <div id="header">Aquí la cabecera</div>
    <div id="nav">
       <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Primera</a></li>
          <li><a href="#">Segunda</a></li>
       </ul>
     </div>
  <div id="content">Contenido interesante y original que te hará ganar posicionamiento en google.</div>
  <div class="clear"></div><!--El citado div para evitar problemas con "flotaciones"-->
</div><!--cerramos el container-->
<div id="footer">Y aquí ese pie que no se nos queda abajo.</div>

Bueno, eso está listo. Ahora toca ceeseesear (CSS) todo. Como ya he dicho, la idea es dar a todo el contenedor un tamaño mínimo del 100% de la altura, meterle un margen negativo por abajo y allí insertar el pie. Vamos a meter un pie de 50px de alto en el ejemplo.

/*Lo primero, todo el cuerpo que ocupe el 100%*/
html, body {    
   height: 100%; 
}

/*Lo segundo, el container, con algura mínima del 100% y un margen inferior negativo igual al alto que queramos darle al pie*/
#container {
   min-height: 100%;
   margin-bottom: -50px;
   position: relative;
}

/*Lo tercero, el pie con la altura deseada (igual al margen negativo de antes)*/
#footer {
   height: 50px;
   position: relative;
}

/*Y terminamos con el clear, que ha de ser tan alto como el pie y "limpiar" todos los floats*/
.clear{
   height: 50px;
   clear: both;
}

Y con esto ya está, en todos los navegadores superiores a IE6 (y como IE6 está descontinuado por Microsoft ni me voy a molestar en buscar solución, aunque creo que basta con cambiar el min-height del container por height).

Artículo dedicado con cariño a Gaius Baltar, que se lo había prometido en el feisbuck… jojojo