Lightbox JS
Febrero 5, 2007, 10:53 am
Guardado en: HTML / JavaScript

Este script nos sirve para abrir imágenes a gran tamaño en la página actual al hacer clic sobre una imagen thumb en miniatura, y es soportado por todos los navegadores modernos.

Puedes ver un ejemplo en la página original del articulo
http://www.huddletogether.com/projects/lightbox/

Descarga de archivos necesarios

  •  lightbox.js - el script
  •  lightbox.css - hoja de estilos del script
  •  overlay.png - 80% de opacidad, para crear sombra
  •  loading.gif - gif animado que aparece sólo mientras se descarga la imagen grande del pop-up.
  •  close.gif - ‘X’ botón cerrar pop-up situado en la esquina superior derecha del pop-up.

    • /////////////////////////////////////////

    Instalación y puesta en marcha del invento

    1.- Incluye en el head de tu página el siguiente script
    <script type=”text/javascript” src=”lightbox.js” mce_src=”lightbox.js”></script>

    2.- Añadir el atributo rel=”lightbox” en todos los enlaces de las imágenes thumb que abrirán las grandes a través del lightbox, de la siguiente forma:

    <a href=”images/image-1.jpg” mce_href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>

    0 comentarios


    Abrir un pop-up con HTML y flash
    Enero 9, 2007, 5:04 pm
    Guardado en: Flash / ActionScript, HTML / JavaScript

    Siempre se me olvida el script para abrir un pop-up en HTML, de modo que aqui me dejo una pequeña chuleta…

    <a href=”javascript:window.open(’PAGINA’,'TITULOPOPUP’,'width=ANCHO,height=ALTO’);void(0);”>blablabla</a>

    Desde flash, idem…

    on (release){
          getURL(”javascript:window.open(’PAGINA’,'NOMBRE’,'width=ANCHO,height=ALTO’);void(0)”);
    }

    2 Comentarios


    SMART-SHOP, crea tu tienda virtual
    Enero 3, 2007, 11:45 am
    Guardado en: E-Commerce, HTML / JavaScript

    Por Patricia Campuzano 

    SMART-SHOP es un servicio para crear tiendas virtuales de forma online, una novedosa herramienta para dar de alta y mantener tus stocks a un precio muy reducido ($25 al mes).

    Tienda demo 

    http://demo.smart-shop.com/

    No son necesarios conocimientos de programación ni disponer de una gran infraestructura, funciona a grandes rasgos como la administración de un weblog: eliges plantilla, logotipo e imágenes, das de alta tus productos con su correspondiente información y listo.

    Backoffice tienda demo

    http://demo.smart-shop.com/index.php?page=login&command=login&email=admin@smart-shop.com&password=asd

    • Buscador de productos accesible
    • No es necesario instalar ningún software
    • Acepta tarjetas de crédito
    • Plantillas profesionales
    • Acceso a estadísticas en tiempo real

    Si quieres probar una demo por 15 días, pulsa aqui

    1 comentario


    Buscadores Google personalizados
    Enero 3, 2007, 11:30 am
    Guardado en: HTML / JavaScript, SEO, Usabilidad

    Por Patricia Campuzano

    El pasado mes de octubre Google amplió su plataforma con Custom Search Engine. Básicamente permite crear buscadores personalizados para buscar contenidos en nuestro sitio web o en otros que especifiquemos al crear el buscador.

    Tan rápido y sencillo como dar nombre al buscador, una descripción, palabras clave que describan los contenidos que el buscador se encargará de localizar (hojas de estilos css, dhtml, javascript, etc…), idioma y sitios web donde realizará la búsqueda.

    Como es habitual, para utilizar el servicio (totalmente gratuito) es necesario tener una cuenta gmail. Una vez creado, puedes incluir el buscador en tu sitio web copiando el código correspondiente.

    0 comentarios


    Mostrar una imagen diferente al recargar la página
    Diciembre 11, 2006, 4:43 pm
    Guardado en: HTML / JavaScript

    Por Patricia Campuzano 

    El siguiente script permite mostrar una imagen diferente y de forma aleatoria cada vez que se recarga la página (dentro de un intervalo de tiempo), muy apropiado para aquellas portadas de site que muestran sólo una imagen a gran tamaño.

    1.- Insertamos el siguiente script dentro del <head> de nuestro documento web

    <script language=”Javascript”>
    function rnd_image(){
       var now = new Date();
       var sec_divide = now.getSeconds();
       rnd_number = Math.floor(sec_divide/10); // /20=0, 1, 2  /10=0, 1, 2, 3, 4, 5  etc…
       document.write(’<img src=”image’ + rnd_number +’.jpg”>’);
    }
    // –>
    </script>

    2.- Insertamos el siguiente script dentro del <body> en el lugar donde queremos cargar las imágenes de forma aleatoria

    <script>
    rnd_image();
    </script>

    5 Comentarios


    Banners rotatorios
    Diciembre 11, 2006, 4:33 pm
    Guardado en: HTML / JavaScript

    Por Patricia Campuzano 

    El banner rotatorio cambia el contenido de un elemento en un intervalo de tiempo. Los banners pueden contener texto, imágenes (de distintos tamaños), enlaces o cualquier otro elemento HTML.

    Descargar ejemplos aqui

    0 comentarios


    Distintos tamaños de fuente
    Diciembre 11, 2006, 4:16 pm
    Guardado en: HTML / JavaScript, Usabilidad

    Por Patricia Campuzano 

    El tamaño del texto es un factor importante a tener en cuenta cuando diseñamos una página web. Algunas páginas web ofrecen al usuario la posibilidad de aumentarlo (+) o disminuirlo (-) adaptándolo a sus necesidades visuales. Gracias a Sharon Paine (de Dynamic Web Coding)  ofrecer este servicio en nuestra web es relativamente sencillo (leer los términos de uso).

    Descargar ZIP

    1.- Descargar los siguientes archivos .js que permitirán cambiar el tamaño de todos los textos de nuestro sitio web. Los guardamos la raíz del sitio web dentro de una carpeta llamada js

    http://www.dyn-web.com/js/dw_cookies.js
    http://www.dyn-web.com/dhtml/sizefont/src/dw_sizerdx.js

    2.- Crear tres botones gráficos de aumentar, disminuir y reestablecer.

    3.- En el documento web, añadimos dentro del <head> el script de los js

    <script src=”js/dw_cookies.js” mce_src=”js/dw_cookies.js” type=”text/javascript”></script>
    <script src=”js/dw_sizerdx.js” mce_src=”js/dw_sizerdx.js” type=”text/javascript”></script>

    4.- Creamos la barra de navegación compuesta por los tres botones que servirán para aumentar, disminuir o reestablecer el texto

    <!– Botón para disminuir el tamaño texto –>

        <a href=”" mce_href=”" onclick=”dw_fontSizerDX.adjust(2); return false” title=”Aumentar texto”><img src=”images/mas.gif” mce_src=”images/mas.gif” width=”20″ height=”20″ alt=”" border=”0″></a>

    <!– Botón para aumentar el tamaño texto –>

        <a href=”" mce_href=”" onclick=”dw_fontSizerDX.adjust(-2); return false” title=”Disminuir texto”><img src=”images/menos.gif” mce_src=”images/menos.gif” width=”20″ height=”20″ alt=”" border=”0″></a>

    <!– Botón para reestablecer el tamaño del texto –>

        <a href=”" mce_href=”" onclick=”dw_fontSizerDX.reset(); return false” title=”Reestablecer texto”
        ><img src=”images/reset.gif” mce_src=”images/reset.gif” width=”20″ height=”20″ alt=”" border=”0″></a>

    Listo! Al hacer click sobre el botón correspondiente, aumentará, disminuirá o se reestablecerá el tamaño del texto de nuestro sitio web.

    1 comentario


    Las páginas Error! de tu sitio web también existen
    Junio 14, 2006, 7:59 pm
    Guardado en: HTML / JavaScript, Usabilidad

    por Patricia Campuzano 

    ¿Alguien se acuerda alguna vez de diseñar las páginas de error típicas (ErrorDocument 404! Página no encontrada) de su sitio web? Ah! ¿pero se pueden diseñar? Si, y debería ser una de las primeras páginas a componer, puesto a menudo es donde va a parar un usuario que accede a una url “rota” de nuestro sitio web.

    Las estadísticas demuestran que la página de error es una de las más vistas en internet, por lo que conviene que esta página, además de informar del error, informe al usuario de los contenidos que SI puede encontrar en nuestro sitio web (”no encontraste lo que buscabas, ¡pero hay más cosas que ver!”).

    Pasos a seguir:

    1.- Componemos la página HTML que, además de contener el error de página no encontrada, tenga otros enlaces como “Home”, “Nuestra ofertas de este mes”, etc…

    2.- Guardamos esta página HTML como 400.html, 401.html, 403.html, 404.html, 405.html, 406.html, etc… Tantas como página de error queramos crear, aunque normalmente con la 404 (página no encontrada) será suficiente.

    3.- Subimos las páginas HTML al directorio principal de nuestro servidor.

    4.- Creamos un documento txt que contenga la siguiente información:

    ErrorDocument 401 http://www.el-nombre-de-tu-dominio.com/401.html
    ErrorDocument 402 http://www.el-nombre-de-tu-dominio.com/402.html
    ErrorDocument 403 http://www.el-nombre-de-tu-dominio.com/403.html
    ErrorDocument 404 http://www.el-nombre-de-tu-dominio.com/404.html

    etc..

    Una línea por cada página de error creada.

    5.- Guardarmos este documento de texto con el nombre .htaccess . Tiene que empezar por . y no debe llevar ninguna extensión (.txt, .doc, .html ni nada que se le parezca).

    6.- Subimos el documento .htaccess al directorio raiz de nuestro sitio web.

    Al intentar acceder a una página errónea de nuestro sitio web, por ejemplo, http://www.design-root.com/asfaas se verá la página de error 404 de página no encontrada creada anteriormente.

    En la web de Maestros del web tienes un interesante articulo sobre las páginas de error 404!.

    0 comentarios