La lección de hoy es la de introducir un icono en vuestra página para que en los navegadores se pueda ver justo al lado de la ruta. Quiero explicarlo para tres casos distintos: Para una pa´gina web normal, para una aplicación de cakePHP y para el blog Wordpress.

Icono en web Normal

En el primero de los casos hay que realizar los siguientes pasos:

• Subir un icono mediante ftp a tu servidor.
• En aquellas páginas que se quiera tener es necesario agregar la siguiente línea de código en el head de la página en la que queráis el iconito (cambiad favicon por el nombre de vuestro icono):

 <link href="/favicon.ico" rel="shortcut icon">

Icono en web creada en CakePHP

Para aquellos que estéis trabajando con cakePHP simplemente tenéis que renombrar vuestro icono llamándolo favicon.ico y sustituyéndolo por el que se encuentra en la carpeta webroot de vuestra aplicación (el icono inicial es el que representa a una tarta).

Icono en un blog Wordpress

Tenéis que:

• Subir  vuestro icono a la carpeta raíz de vuestra web
• Introducir en el header.php del theme que estéis utilizando (ese theme se encontrará en la carpeta wp-content/themes/tutheme) la línea de código siguiente:

 <link href="/favicon.ico" rel="shortcut icon"/>

Buscador de iconos

Y si no sabéis donde encontrar vuestro icono aquí os dejo una página bastante interesante, en la cuál se pueden hacer búsquedas de iconos, que posteriormente te dan la oportunidad de descargar en diferentes tamaños, tipos,…. Realmente muy útil. Es http://findicons.com/.

Nota Importante: Puede que no veáis en un primer momento el icono que habéis instalado. Esto puede deberse a los archivos temporales que ha almacenado el navegador que utilizáis. Borradlos y volved a probar (o esperad a que automáticamente se borren, cosa que puede tardar un montón de tiempo)

Hoy hablaremos de uno de los problemas que más de cabeza tienen a los webmasters de las páginas web: el hotlinking

¿En qué consiste el hotlinking?
Hotlinking es copiar en tu blog o página web un enlace directo a una foto/vídeo de una web que no es nuestra.

¿Qué ventajas tiene hacer hotlinking para el que lo practica?

Si yo lo estuviera haciendo tendría varias ventajas fundamentales:

• El ancho de banda de la imagen corre a cuenta del usuario que la tiene la imagen alojada en su servidor, no en el mío.
• No es necesario alojar la imagen en mi servidor, con el consiguiente ahorro de espacio en el servidor.
• No infrinjo según las leyes estadounidenses ninguna ley de derechos de autor, ya que sólo estaría apuntando a otra página desde la mía (esta otra página sí que podría tener problemas con la justicia)

¿Qué otros nombres recibe el hotlinking?

Se llama también hotlinking, leeching, piggy-backing, direct linking, offsite image grabs.

¿Cómo se puede evitar?

Se puede evitar modificando el fichero .htaccess de nuestro sitio introduciendo el siguiente código.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?miweb.com(/)?.*$ [NC]
RewriteRule .*\.(gif|jpg|jpeg|bmp|zip|rar|mp3)$ – [F,NC]

Hoy toca un post para los que estén empezando en el mundo de la maquetación y desarrollo web.
Si os habéis adentrado en el código de diferentes páginas web (cosa siempre recomendable) os habréis dado cuenta que a veces se utilizan atributos id y en otros casos class de la siguiente forma:

<div id=”nombre”></div>

<div class=”nombre”></div>

Y por ello nos surge la siguiente duda: ¿Qué diferencias hay entre class e id?

• Los id’s se referencian con el prefijo “#” y las clases con “.”.
• Un id debe ser único y una clase puede ser referenciada por muchos elementos.
• Un elemento puede tener 2 o más clases, pero sólo un id.

Notas:

• Referencia de un id #nombreDelID { background: #ff80c0 }
• Referencia de un class .nombreDelClass { background: #ff80c0 }

En muchas páginas web me ha salido el típico mensaje 404… this page can’t be found….. blablablabla. Seguro que eso ha hecho que vuestro día haya sido más infeliz, y eso es algo que queremos evitarles a todos aquellos que llegan a nuestra página…..

Por ello, hoy vamos a aprender a hacer nuestra propia página de error. Los pasos a seguir serán los siguientes:

1. Crear un archivo 404.html , y editarlo a nuestro gusto (se puede poner la página no ha sido encontrada, te has equivocado o lo que quieras). Lo subimos a nuestro sitio web al directorio raíz (es decir, en mi caso en http://www.yises.com/)
2. Creamos un archivo htaccess.txt , y en su interior, pondremos lo siguiente: ErrorDocument 404 http://www.misitio.com/404.html (Cambiando www.misitio.com , por la dirección del archivo 404.html)
3. Renombramos el archivo htaccess.txt a .htaccess (con el punto delante).

Consejos para la realización de la página 404:

• La página de error debe tener el mismo diseño que la web.
• Pide perdon. Debes disculparte de alguna forma (la culpa no es del usuario normalmente).
• Presenta una caja de texto para que el usuario pueda buscar contenidos en tu web.
• Da a los lectores links importantes y que le sean útiles (tu página de inicio, un post similar al que buscaba,….)
• Introduce una forma de que puedan contactar contigo (imagina que conocían la existencia de una página que has eliminado y estos usuarios la necesitaban, de esta forma podrán comentarlo directamente).
• Automándate al mail qué página estaba intentando visualizar el usuario. Puedes hacerlo de la siguiente forma:

  mail("jesus@bonzzay.com", "404 report", $_SERVER['REQUEST_URI'], "From: jesus@bonzzay.com\n")

• Dale un toque humorístico. No encontrar lo que buscas molesta, y es bueno que el usuario pueda reirse XD.
• ¿Necesitas realizar un redireccionamiento de la página?

Nota: La página que crees no debe poseer un peso muy grande (si te preocupa el ancho de banda del servidor), pero tampoco poseer un tamaño muy pequeño, puesto que en caso de que sea menor de 512 bytes, el Internet Explorer asumirá que es un mensaje 404 estándar del servidor y lo reemplazará con su propia versión.

Nota2: Actualmente tengo dos páginas de error en mi sitio, una que se mostrará en el caso de estgar dentro del blog y otra fuera.