Como hacer un fondo degradado en un div con CSS

Para hacer buenos diseños en nuestras páginas web, nos va a ser muy práctico poder utilizar fondos con un degradado de color que vaya progressivamente de un tono a otro. Para ello antes no teníamos más remedio que poner una imagen de fondo en el div que previamente havíamos hecho en Photoshop pero ahora, gracias a las nuevas propiedades del CSS3 lo podemos hacer muy fácilemnte con código para integrar en nuestro HTML.

La propiedad se llama Gradient Background (fondo degradado) y se puede aplicar en cualquier div o tabla (aunque no lo recomiendo en tablas). Se trata de una transición de color suave entre dos o más colores. La ventaja es que no solo ahorramos tiempo, sino que también tiempo de descarga y ancho de banda, con lo que utilizando fondos degradados en un div con CSS hacemos que nuestras páginas web vayan más rápidas.

Continuar leyendo

2 maneras de crear un fondo transparente para un div

Muchas veces es interesante jugar con fondos semi-transparentes en nuestros elementos de la página web para hacerla más atractiva y funcional.

Para ello os propongo dos maneras muy sencillas:

Continuar leyendo

Como generar un sitemap en 2 minutos

El uso de sitemap siempre es práctico para que los buscadores tengan el 100% del contenido de nuestro sitio web indexado.

Aquí­ os dejo una herramienta para generar un sitemap en varios formatos para poder enviar a Google y tener una versión en html por si queremos publicarla en nuestro sitio:

Continuar leyendo

Redireccionamiento mediante meta html

A veces nos puede interesar hacer que una página cambie de dirección automáticamente cuando un usuario accede a ella. Para ello podemos usar la siguiente etiqueta meta:

<META HTTP-EQUIV=”Refresh” CONTENT=”3; URL=http://www.dissenyaweb.com”>

Poniendo esta etiqueta entre <head> y </head> de nuestra página conseguiremos que en 3 segundos redireccione automáticamente a http://www.dissenyaweb.com

Veamos un ejemplo de como serí­a la tí­pica página de “En 3 segundos comenzará la descarga”:

<html>
<head>
<title>ejemplo redireccionamiento meta html</title>
<META HTTP-EQUIV=”Refresh” CONTENT=”3; URL=archivo.zip”>
</head>
<body>
En 3 segundos comenzará la descarga. Si no empieza, pulsa <a href=’archivo.zip’>aquí­</a>
</body>
</html>

El “archivo.zip” debe estar en el mismo directorio que el archivo .html para que este ejemplo funcione. Evidentemente podemos poner la ruta que queramos.

Esta forma se llama “meta refresh”

Si nos interesa consrvar el pagerank de la antigua página y que este sea heredaro por la nueva, tendremos que utilizar otras técnicas como por ejemplo

301 Redirect:

Un “301 redirect” es la forma más eficiente y eficaz para redireccionar urls. De echo es la opción que más recomiendan los buscadores. Esta técnica es prácticamente transparente al usuario (sólo puede ver el cambio de url en la barra de direcciones de su navegador), y además es el método más rápido.

Este tipo de redirección se implementa en un archivo .htaccess.

Cuando un visitante pide una página que se encuentra en un directorio concreto, el servidor Apache lo primero que hace es comprobar si hay un archivo .htaccess en ese directorio. íÉste archivo contiene información especí­fica sobre cómo manejar errores, opciones de seguridad y de redireccionamiento entre otras.

El código 301 se interpreta en el servidor como “movido permanentemente”. Antes que nada necesitarás un archivo .htaccess en el directorio donde estan alojadas todas las páginas. Puedes crear uno con el bloc de notas si no existe. Nota: Fí­jate en poner un “.” al principio del nombre de archivo. Este archivo no tiene extensión.

El código de redireccionamiento es así­:

redirect 301 /tutoriales/viejo.htm http://www.webtutoriales.com.com/tutoriales/nuevo.htm

Así­ de simple, guarda el archivo y súbelo al servidor. Para probarlo deberí­as acceder a la dirección vieja y instantáneamente serás redireccionado a la nueva. Te recordamos que debes poner la ruta completa de la nueva página (siempre empezando con “http://…”) tal y como está en nuestro ejemplo.

Puedes ver un ejemplo de esto en: http://www.webtutoriales.com/

Otra opción seria  para hacer un redirect 301 seria mediante PHP:

Redirección 301 con PHP

La página que vamos a redireccionar la reemplazamos por un archivo PHP con el siguiente código:

<?php
header("HTTP/1.1 301 Moved Permanently");
header("location:http://www.neoideas.com.mx");
?>

Es importante que este código esté hasta el principio del archivo php (en la primera lí­nea).