La Buhardilla Pixel » HTML-CSS

Zonas activas o Mapa de Imágenes con ImageMapper

Pilar — Fri, 23 Jul 2010 00:45:29 +0000

En muchas ocasiones interesa poner links en un gráfico para captar la atención del visitante. En este tutorial, zonas activas o mapa de imagenes, explico una forma de hacerlo muy sencilla utilizando un pequeño programa “ImageMapper“.

En el gráfico puedes comprobar las zonas activas.

Tutorial: Auto Scrolll para tu web

Pilar — Wed, 14 Oct 2009 22:05:09 +0000

Tutorial: Auto Scroll para tu web

Vista previa

El explorador no admite los marcos flotantes o no está configurado actualmente para mostrarlos.

—————————————————–————————————–

Ver:

Listado de tutoriales, La Buhardilla Pixel

—————————————————–————————————–

Tutorial: zonas activas o mapa de imagenes. Freebie

Pilar — Wed, 30 Sep 2009 13:41:45 +0000

Una imagen vale mas que mil palabras…

En el gráfico puedes comprobar las zonas activas.

El explorador no admite los marcos flotantes o no está configurado actualmente para mostrarlos.

Gracias a todos nuestros visitantes por votar ente blog en los premios Bitácoras…

Sigue votando este blog en la categoria de blog personal

Ver: Clasificación parcial

últimas noticias

120 ejemplos de menú horizontal en CSS

Pilar — Tue, 03 Mar 2009 03:55:10 +0000

En CSSTea puedes encontrar 120 ejemplos de menú horizontal para tu sitio en CSS, con estos menus vamos aprender hacer un buen diseño para crear una web de facil navegación.

Via: Twitter

Como bloquear algunos robots maliciosos desde el .htaccess

Pilar — Sun, 04 Jan 2009 00:19:13 +0000

Definición de .htaccess segun Wikipedia (en ingles)

.htaccess (Acceso de Hiper-Texto) es el nombre por defecto del archivo de configuración de directorios de Apache. Provee de la habilidad para personalizar la configuración de las directivas definidas en el archivo de configuración principal.
Las directivas de configuración necesitan estar en el contexto de .htaccess y el usuario necesita los permisos apropiados.

Como bloquear algunos robots maliciosos, como spiders o descargadores. Para ello utilizaremos los codigos siguientes el el archivo .htaccess . Normalmente los robots maliciosos ignoran el archivo de directivas robots.txt por lo que se podría querer forzar un error 403 cada vez que quieran recorrer o descargar tu sitio:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^BlackWidow [OR]
RewriteCond %{HTTP_USER_AGENT} ^Bot\ mailto:craftbot@yahoo.com [OR]
RewriteCond %{HTTP_USER_AGENT} ^ChinaClaw [OR]
RewriteCond %{HTTP_USER_AGENT} ^Custo [OR]
RewriteCond %{HTTP_USER_AGENT} ^DISCo [OR]
RewriteCond %{HTTP_USER_AGENT} ^Download\ Demon [OR]
RewriteCond %{HTTP_USER_AGENT} ^eCatch [OR]
RewriteCond %{HTTP_USER_AGENT} ^EirGrabber [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailSiphon [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailWolf [OR]
RewriteCond %{HTTP_USER_AGENT} ^Express\ WebPictures [OR]
RewriteCond %{HTTP_USER_AGENT} ^ExtractorPro [OR]
RewriteCond %{HTTP_USER_AGENT} ^EyeNetIE [OR]
RewriteCond %{HTTP_USER_AGENT} ^FlashGet [OR]
RewriteCond %{HTTP_USER_AGENT} ^GetRight [OR]
RewriteCond %{HTTP_USER_AGENT} ^GetWeb! [OR]
RewriteCond %{HTTP_USER_AGENT} ^Go!Zilla [OR]
RewriteCond %{HTTP_USER_AGENT} ^Go-Ahead-Got-It [OR]
RewriteCond %{HTTP_USER_AGENT} ^GrabNet [OR]
RewriteCond %{HTTP_USER_AGENT} ^Grafula [OR]
RewriteCond %{HTTP_USER_AGENT} ^HMView [OR]
RewriteCond %{HTTP_USER_AGENT} HTTrack [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Image\ Stripper [OR]
RewriteCond %{HTTP_USER_AGENT} ^Image\ Sucker [OR]
RewriteCond %{HTTP_USER_AGENT} Indy\ Library [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^InterGET [OR]
RewriteCond %{HTTP_USER_AGENT} ^Internet\ Ninja [OR]
RewriteCond %{HTTP_USER_AGENT} ^JetCar [OR]
RewriteCond %{HTTP_USER_AGENT} ^JOC\ Web\ Spider [OR]
RewriteCond %{HTTP_USER_AGENT} ^larbin [OR]
RewriteCond %{HTTP_USER_AGENT} ^LeechFTP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Mass\ Downloader [OR]
RewriteCond %{HTTP_USER_AGENT} ^MIDown\ tool [OR]
RewriteCond %{HTTP_USER_AGENT} ^Mister\ PiX [OR]
RewriteCond %{HTTP_USER_AGENT} ^Navroad [OR]
RewriteCond %{HTTP_USER_AGENT} ^NearSite [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetAnts [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetSpider [OR]
RewriteCond %{HTTP_USER_AGENT} ^Net\ Vampire [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetZIP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Octopus [OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline\ Explorer [OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline\ Navigator [OR]
RewriteCond %{HTTP_USER_AGENT} ^PageGrabber [OR]
RewriteCond %{HTTP_USER_AGENT} ^Papa\ Foto [OR]
RewriteCond %{HTTP_USER_AGENT} ^pavuk [OR]
RewriteCond %{HTTP_USER_AGENT} ^pcBrowser [OR]
RewriteCond %{HTTP_USER_AGENT} ^RealDownload [OR]
RewriteCond %{HTTP_USER_AGENT} ^ReGet [OR]
RewriteCond %{HTTP_USER_AGENT} ^SiteSnagger [OR]
RewriteCond %{HTTP_USER_AGENT} ^SmartDownload [OR]
RewriteCond %{HTTP_USER_AGENT} ^SuperBot [OR]
RewriteCond %{HTTP_USER_AGENT} ^SuperHTTP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Surfbot [OR]
RewriteCond %{HTTP_USER_AGENT} ^tAkeOut [OR]
RewriteCond %{HTTP_USER_AGENT} ^Teleport\ Pro [OR]
RewriteCond %{HTTP_USER_AGENT} ^VoidEYE [OR]
RewriteCond %{HTTP_USER_AGENT} ^Web\ Image\ Collector [OR]
RewriteCond %{HTTP_USER_AGENT} ^Web\ Sucker [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebAuto [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebCopier [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebFetch [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebGo\ IS [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebLeacher [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebReaper [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebSauger [OR]
RewriteCond %{HTTP_USER_AGENT} ^Website\ eXtractor [OR]
RewriteCond %{HTTP_USER_AGENT} ^Website\ Quester [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebStripper [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebWhacker [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebZIP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Wget [OR]
RewriteCond %{HTTP_USER_AGENT} ^Widow [OR]
RewriteCond %{HTTP_USER_AGENT} ^WWWOFFLE [OR]
RewriteCond %{HTTP_USER_AGENT} ^Xaldon\ WebSpider [OR]
RewriteCond %{HTTP_USER_AGENT} ^Zeus
RewriteRule .* – [F]

Texto descriptivo en los enlaces

Pilar — Sat, 03 Jan 2009 01:08:35 +0000

Código para añadir a los enlaces una descripción al pasar el ratón.

Le agregamos la propiedad “title” y la propiedad “alt”, para que el texto sea visible en IE y Firefox, seguido del texto que queremos que aparezca al pasar el cursor, en este ejemplo le añadi “La Buhardilla“.

(Pasa el cursor por el enlace)

La Buhardilla Pixel

Ver código:

xanarts.com“target=”_blank”/javascript/” title=”La Magia del Arte y el Diseño” alt=”Tutoriales“>La Buhardilla Pixel

Solo tienes que cambiar los datos que aparecen en negrita

Cómo proteger directorios de visitantes curiosos

Pilar — Thu, 01 Jan 2009 04:02:58 +0000

Es muy frecuente encontrarnos con con directorios y que todas sus carpetas esten visibles para los curiosos, un buen ejemplo es el de wp-plugins(ver ejemplo) y wp-content (ver ejemplo), de WordPress, si entras en cualquier blog: www.tusitio.com/wp-plugins veras que en una gran mayoria se pueden ver las carpetas con los plugins del blog.

Esto podemos evitarlo de dos formas: subiendo un index en blanco o simplemente añadir en el .htaccess de tu sitio lo siguiente:

Options -Indexes

De esta forma cuando alguien intente “chusmear” en nuestro sitio se encontrara con algo parecido a esto:

Frames accesibles a los buscadores

Pilar — Tue, 30 Dec 2008 23:43:53 +0000

Todos sabemos que los iframe son muy útiles en numerosas ocasiones, pero tienen el inconveniente que no se llevan demasiado bien con los buscadores…

Bueno, pero la idea es evitar su uso dentro de contenidos, para así impedir la limitada accesibilidad que nos entrega (no todos los browsers lo interpretan) y que sea indexado separadamente por los buscadores (así como ocurre con los , que tienen la misma lógica). Mediante CSS lograremos el mismo fin, el de poder diagramar un espacio donde el contenido fluya a través de scroll vertical. Pero todo dentro de la misma página.

Demo

El HTML no será nada distinto a un bloque de texto cualquiera, soportado por un

Texto aqui…p>

Texto aqui…p>

A través de CSS veremos reales cambios. Primero, al igual que en la etiqueta , definiremos alto y ancho fijo. Todo lo que se salga de ese alto será absorbido por una elegante barra de scroll, la que será mostrada mediante la propiedad overflow: scroll;

#contenido_scroll {
     width: 300px;
     height: 200px;
     overflow: scroll;
}

Texto con movimiento en la barra de navegación.

Pilar — Sat, 29 Nov 2008 12:01:27 +0000

Texto con movimiento en la barra de navegación. Solo tienes que cambiar el titulo La Buhardilla Pixel de por el de tu pagina. Coloca el codigo entre head y head

Ver Demo

Tutorial: Comenzando con HTML y CSS

Pilar — Wed, 26 Nov 2008 23:14:23 +0000

Comenzando con HTML y CSS es un tutorial para aquellos que se inician, explicado de forma clara y sencilla. un minimo de conocimientos de HYML y CSS son indispensables para quien se está iniciando en Diseño Web