Redirección de HTTP a HTTPS con .htaccess

En las últimas semanas, Google nos recomienda usar en todos nuestros sitios web el protocolo HTTPS, en caso contrario, se mostrará un aviso de sitio inseguro en el navegador, por ahora, Chrome y Firefox.

Si acabas de pasar tu sitio HTTP a HTTPS, no debes olvidarte de redirigir todas las URL antiguas HTTP a HTTPS.

 

Intrucciones para redirigir el tráfico HTTP a HTTPS con .htaccess:

  1. Si no lo tienes creado ya, crea un archivo de texto plano con nombre .htaccess.
  2. Añade las líneas de código del ejemplo que más se adapte a tus necesidades en la parte superior de tu archivo .htaccess.
    1. Reemplaza el texto de los ejemplos con el nombre de tu dominio, o el nombre de tu directorio.
    2. Usa un cliente FTP para subir el archivo .htaccess al directorio de tu dominio.

 

Ejemplos de códigos

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.example.com/$1 [R,L]

Para especificar un dominio concreto, usar:

RewriteEngine On 
RewriteCond %{HTTP_HOST} ^example\.com [NC]
RewriteCond %{SERVER_PORT} 80 
RewriteRule ^(.*)$ https://www.example.com/$1 [R,L]

Para redirigir tráfico de HTTPS sin WWW a HTTPS con WWW:

RewriteCond %{HTTPS} off
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule .* https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

¡Espero que les haya sido útil! ¡Gracias!

Impedir listar un directorio

A veces, tenemos carpetas en el servidor web para almacenar archivos como imágenes, ebooks, juegos, y si la carpeta no tiene un archivo index.html, los usuarios pueden ver un listado con todos los archivos que hay dentro de la carpeta. Con una línea en el archivo .htaccess de nuestro sitio, podremos solucionarlo.

¿Cómo evitar el listado de directorios y archivos con .htaccess?

Una solución es añadir un archivo index.html en blanco, vacío, dentro del directorio del cual no queremos que se visualice su contenido. Pero lo más probable es que no tengamos sólo una carpeta, sino muchas, por lo que esta labor puede resultar poco práctica.

Otra solución a nuestro problema es modificar el archivo .htaccess de la raíz de nuestro proyecto o sitio web añadiendo el siguiente código:

Options -Indexes

Si quieres evitar que se listen únicamente unos determinados archivos,  por ejemplo los archivos .jpg y .gif, puedes usar el código:

IndexIgnore *.jpg *.gif

¡Espero que os haya sido útil!

Obtener número de Likes en Facebook

Número Me gusta en FacebookPara obtener el número de “Me gusta” o “Like” de un artículo o de una página web, basta con recoger los datos que devuelve la siguiente url:

https://graph.facebook.com/fql?q=SELECT%20url,%20normalized_url,%20%20share_count,%20like_count,%20%20comment_count,%20total_count,%20%20commentsbox_count,%20comments_fbid,%20click_count%20%20FROM%20link_stat%20WHERE%20url=’http://www.compartelibros.com’

 

Esta dirección devuelve los siguientes datos:

{
   "data": [
      {
         "url": "http://www.compartelibros.com",
         "normalized_url": "http://www.compartelibros.com/",
         "share_count": 1906,
         "like_count": 21383,
         "comment_count": 1440,
         "total_count": 24729,
         "commentsbox_count": 0,
         "comments_fbid": "10150585935291040",
         "click_count": 0
      }
   ]
}

Para recoger los datos y tratarlos con PHP, solo tienes que hacer:

$contents = file_get_contents($url);
$obj = json_decode($contents);

echo "Likes: " . $obj->{'data'}[0]->{"like_count"};

En este ejemplo, solo se muestra cómo obtener el número de Me gustas en Facebook de un artículo o de un sitio web, pero también puedes conocer el número de veces que ha sido compartida una dirección, el número de veces que se ha comentado, etc.

Espero que os haya sido de ayuda ¡Saludos!

Crear un Favicon online para tu blog o sitio web

Para crear un favicon (icono .ico) personalizado para tu blog o sitio web, no hace falta que descargues ningún software, actualmente hay muchas herramientas online que te permiten generar favicons de manera fácil y rápida, sin necesidad de registros, en unos pocos segundos.

Una de las herramientas más utilizadas es Favicon.pro, un generador de iconos muy útil para completar tu blog o sitio web.

Crear un favicon

 

¿Cómo lo hago para crear un favicon?

En su página web explican los pasos a realizar detalladamente:

1. Seleccione el tamaño del favicon que desea crear.
2. Seleccione la imagen y súbala en el servidor.
3. Haga clic derecho en el enlace que le aparecerá y elija ‘Guardar como’.

 

¿Cómo añadir el favicon.ico creado en mi sitio web?

Lo único que tienes que hacer es subir el archivo al directorio raíz de tu sitio web, y copiar y pegar el siguiente código html dentro de la etiqueta <head> de todas tus páginas (generalmente es una plantilla):

<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>

Espero haber sido de ayuda. ¡Saludos!

Fuente: http://www.favicon.pro/es/

Obtener url actual con PHP

Si necesitas averiguar cuál es la url actual que está ejecutando un script php, existen varias variables (llamadas $_SERVER) que te pueden ayudar a obtener dicha información:

  • $_SERVER["REQUEST_URI"]: Devuelve la URL que estás ejecutando sin el dominio
  • $_SERVER["PHP_SELF"]: Devuelve el script que estás ejecutando, sin el dominio, que puede ser distinto que REQUEST_URI porque estés utilizando un .htaccess.
  • $_SERVER["SERVER_NAME"]: Almacena el servidor donde está la página.
  • $_SERVER[‘SERVER_PORT’]: Esta variable indica el puerto del servidor por el cual se está mostrando la url. Normalmente las web se sirven por el puerto 80.
  • $_SERVER[‘HTTP_HOST’]: Se obtiene el dominio de la web, en mi caso sería scriptsde.com

Para obtener la url actual con php basta con usar las siguientes líneas de código:

<? $host= $_SERVER["HTTP_HOST"];
$url= $_SERVER["REQUEST_URI"];
echo “http://” . $host . $url; ?>

Para obtener el dominio de una web con php:

<? $host= $_SERVER["HTTP_HOST"];
echo “http://” . $host; ?>

MovSim, simulador de resoluciones para webs

Hoy os traemos una herramienta que os será muy útil para probar si un sitio web es responsive o no, MovSim, un simulador de diferentes resoluciones de pantalla.

Muchos desarrolladores no tenemos la posibilidad de tener en nuestras manos Smartphones o Tablets de diferentes fabricantes y tamaños para probar nuestros sitios web y comprobar que se adaptan correctamente. MovSim es un emulador de dispositivos móviles y tablets que te permitirá hacer un test de tu diseño Responsive.

Simulador de resoluciones de pantalla para tus sitios web

Simulador de resoluciones de pantalla para tus sitios web

Sólo tienes que introducir la URL de tu sitio web o blog y esta herramienta simulará de forma automática la visualización que un usuario tiene en un iphone 4. Si deseas probar con otra resolución, basta con clicar en el menú el dispositivo que queremos, podemos ir cambiando de uno a otro sin necesidad de volver a introducir la url de nuestra página web.

Espero que os haya sido útil. ¡Hasta la próxima!

Fuente: http://movsim.com

Obtener el tiempo de carga de una página web

Pingdom toolsSi estás optimizando tus páginas web para mejorar el posicionamiento en buscadores y la usabilidad de tus usuarios, y necesitas saber el tiempo de ejecución (medir el tiempo de carga) para comparar tus scripts y ver si tus cambios son mejores, puedes usar las siguientes herramientas:

  • Pingdom Tools: Load Time Analiza el sitio web completo revisando el peso y la carga de cada uno de los elementos que componen el sitio web, generando un reporte en forma de cascada con colores distintos para diferenciar cada elemento y ver objeto es el que tarda más en cargar.
  • Google: PageSpeed Insights Se trata de una herramienta de análisis que Google ofrece para optimizar sitios web. Lo único que tienes que hacer es introducir la url y esperar a que genere un reporte personalizado con una lista de sugerencias para mejorar el tiempo de carga en dispositivos móviles y navegadores de escritorio.
  • GTMetrix Esta herramienta te muestra de manera porcentual el impacto de cada error de tu página web on una posible solución detallada para que puedas corregirlo fácilmente. Además, en GTMetrix puedes medir la velocidad de tu sitio web y ver el comportamiento de cada elemento como: Javascript, CSS, Solicitudes HTTP, Búsquedas de DNS, Ajax,…
  • Load Impact
  • WooRank

 

También podéis usar la función microtime() en PHP para sacar el tiempo de ejecución de un bloque de código, el tiempo calculado es en microsegundos.

Un ejemplo de código que podríais usar:

<?php
//Crear la variable inicio al principio de la ejecución
$inicio = microtime(true);

// Código del que quieres medir el tiempo

// Volvemos a calcular el tiempo
$final = microtime(true);

// Haciendo la diferencia entre el tiempo de inicio y el tiempo final, sabemos el total
$total = $final – $inicio;
echo ‘Tiempo en ejecutar el script: ‘.$total.’ microsegundos';
?>

Hacer que un sitio web cargue rápido es todo un reto para los diseñadores y programadores. Esperamos que este artículo os haya sido de ayuda.

Obtener Id próximo (auto_increment) de una tabla

Estoy trabajando en un proyecto en el que necesitaba obtener el identificador próximo para asignárselo a un campo ya existente, es decir, quería modificar el id de un campo por el id AUTO_INCREMENT de Mysql. Por si a alguien le sirve, solo hay que hacer una consulta a la tabla tables de information_schema para obtener ese identificador:

select AUTO_INCREMENT from information_schema.TABLES where TABLE_SCHEMA=’nombre_bd’ and TABLE_NAME=’nombre_tabla';

También es posible del siguiente modo:

SHOW TABLE STATUS LIKE ‘mitabla’

Eso te devuelve todo el estado de la tabla y una de las columnas devueltas es el AUTO_INCREMENT.

Si habéis insertado una fila en una tabla, también podéis consultar el último identificador insertado con la función mysql_insert_id()

 

Espero que os sirva de ayuda!

Redirigir según el idioma del navegador con .htaccess

traduction - pays étrangersImaginenos que tenemos estas direcciones en nuestra web según el idioma:

www.pagina.com  (para español)
www.pagina.com/en  (para inglés)
www.pagina.com/fr  (para francés)

Editando nuestro archivo .htaccess de la siguiente manera, podemos redireccionar a cada una de las páginas a los usuarios en función del idioma con el que tengan configurado su navegador:

RewriteEngine on
RewriteCond %{HTTP:Accept-Language} (en) [NC]
RewriteRule .* http://www.pagina.com/en/ [R,L]

RewriteCond %{HTTP:Accept-Language} (es) [NC]
RewriteRule .* http://www.pagina.com/ [R,L]

RewriteCond %{HTTP:Accept-Language} (fr) [NC]
RewriteRule .* http://www.pagina.com/fr/ [R,L]

Tenéis que tener en cuenta que el archivo .htaccess es muy delicado, cualquier fallo puede dar error y hacer que la web no funcione.

Anuncios Adsense en sitios web Responsive Design

Últimamente recibo mensajes de Herramientas del Webmaster de Google diciendo que mis sitios no són optimizados para dispositivos móviles, y cuando voy a ver qué es lo que falla me aparecen las rutas de los anuncios de Adsense, que son 728×90 en lugar de 300×250. ¿Cómo puedo solucionarlo?

Al principio pensé en cambiar el formato del anuncio directamente, pero entonces en el escritorio no se veía bien ya que quedaba mucho espacio alrededor del anuncio en blanco. Buscando por la red encontré que Google había anunciado hacía un tiempo unos bloques de anuncio adaptables, justamente para los administradores de blogs con diseños responsive.

¿Cómo crear un bloque de anuncios Adaptable de Adsense?

Pulsas sobre el botón Nuevo bloque de anuncios y a continuación se elige en la sección Tamaño del anuncio -> Otro – Adaptable

Cuando pulses Guardar y Obtener Código, en la ventana siguiente tienes que clicar en Modo -> Avanzado (Modificación de código obligatoria).

El código será más o menos el siguiente:

<style>
.nombre-de-bloque { width: 300px; height: 250px; }
@media(min-width: 500px) { .nombre-de-bloque { width: 336px; height: 280px; } }
@media(min-width: 800px) { .nombre-de-bloque { width: 728px; height: 90px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– nombre-de-bloque –>
<ins class=”adsbygoogle nombre-de-bloque”
style=”display:inline-block”
data-ad-client=”ca-pub-XXXXXXXXXX”
data-ad-slot=”XXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Dentro de las etiquetas <style></style> está el código que debemos o podemos modificar. En las líneas que empiezan con el indicador @media se puede poner un tamaño de bloque de anuncio según el tamaño mínimo de pantalla que tenga el visitante. Yo, por ejemplo, he puesto que si el tamaño de pantalla de un usuario es de 500px se muestre el anuncio de 336×280 px en lugar de un 468x60px.

Nota: No puedes poner cualquier tamaño, debe ser uno de los tamaños de los anuncios que te proporciona Google Adsense.

Espero que os haya sido de ayuda. Saludos y hasta la próxima!