[ un desarrollo de PATAGONIA CREATIVE ]
Email Facebook Rss

Archivos en Categoria: Diseño Web

  • Diseño Web | Javascript | Scripts

    11 /01 / 2009 - 8:52 pm

    Publicado por Nikko.

    • 15
    • 4.965

    Social Link

    Botón Ampliar tamaño de texto en nuestros artículos

    ampliartextoifx.jpg

    Si suelen leer periódicos Online, seguramente habrán notado que la gran mayoría de ellos nos brinda en cada uno de los artículos que leemos, la opción para ampliar el texto, función que podemos utilizar en caso de desearlo. Si bien utilizo los Periódicos como referencia, ya que es por lo general donde suelo verlos, no significa que solo deba utilizarse cada vez que llevemos adelante este tipo de proyectos (Periódicos). Si deseamos facilitar la lectura de cada uno de nuestros usuarios, no sería mala idea comenzar a implementar este tipo de opciones en nuestros blogs o web empresariales. Justamente hoy recordé que Mauricio había realizado un simple tutorial (el cual busque hasta encontrar), muy fácil de seguir, que les permitirá llevar esta idea a sus proyectos online.

    Uso:

    Realizar las llamadas a los script

    PLAIN TEXT
    JavaScript:
    <script language="javascript" src="js/dw_cookies.js" type="text/javascript"></script>

          <script language="javascript" src="js/dw_sizerdx.js" type="text/javascript"></script>

    Seleccionamos que partes (DIV) son las que queremos que se modifique el tamaño del texto.

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript">
          dw_fontSizerDX.setDefaults( "px", 11, 11, 14, ['div.post p' , 'blockquote'] );
          dw_fontSizerDX.set(10, 10, 10, ['div#fontSize'] );
          dw_fontSizerDX.init();
          </script>

    Agregamos los Botones

    PLAIN TEXT
    HTML:
    <div id="fontSize">
            <ul>
              <li id="more"><a href="#" onClick="dw_fontSizerDX.adjust(1); return false" title="Aumenta el tama&ntilde;o de texto"> Aumentar tama&ntilde;o </a></li>
              <li id="less"><a href="#" onClick="dw_fontSizerDX.adjust(-1); return false" title="Disminuye el tama&ntilde;o de texto">Disminuir tama&ntilde;o</a></li>
            </ul>
          </div>

  • Diseño Web | Fuentes | Javascript | Scripts

    11 /01 / 2009 - 7:41 pm

    Publicado por Nikko.

    • 15
    • 3.684

    Social Link

    facelift – Para reemplazar textos por imagenes

    facelift.jpg

    Facelift es otro script que al igual que sIFR (basado en Flash), nos permite remplazar las fuentes (texto) de nuestra web por otras más originales y sin preocuparnos si nuestros usuarios poseen esas “fuentes” cargadas en sus ordenadores personales. Facelift no utiliza flash, sino que remplaza nuestras fuentes por imágenes, lo que puede ser toda una ventaja. Los resultados son realmente buenos y podremos definir colores ó diferentes tipografías para ciertas partes de nuestros textos.

    Fuente infectedfx

  • Diseño Web | Inspiracion

    11 /01 / 2009 - 7:18 pm

    Publicado por Nikko.

    • 15
    • 180.915

    Social Link

    120 bonitos ejemplos de Menu Horizontales con CSS

    120menu.jpg

    En el desarrollo de una nueva web, son muchas las etapas en las cuales nos sentamos a analizar, diagramar y probar ideas. La estructura será un factor muy importante, ya que dependiendo la diagramación de dicha estructura, será la organización de todo nuestro contenido. Pero los menús de navegación constituyen otro elemento importante en nuestro sitio web. Lograr un menú que facilite toda la navegación por cada una de las secciones de nuestra web y que se encuentre bien adaptado al diseño desarrollado, no siempre es tarea sencilla. Si te encuentras un poco retrasado tratando de lograr un menú que se adapte de forma adecuada a tu proyecto, buscar un poco de inspiración no será mala idea. 120 Excellent Examples of CSS Menu, es un artículo que recopila 120 menu Css horizontales que te ayudaran a construir originales nuevas ideas.

    Enlace 120 Excellent Examples of CSS Menu by csstea.com

  • Diseño Web | Galerias | Javascript | jQuery | Scripts

    07 /01 / 2009 - 1:30 am

    Publicado por Nikko.

    • 15
    • 28.233

    Social Link

    Easy Slider – Plugin jQuery ideal para tu porfolio

    easyslider.jpg

    Otro agradable plugin jQuery para agregar a nuestra extensa lista. Easy Slider, como llama a este plugin Alen Grakalic, nos permitirá deslizar horizontalmente o verticalmente tanto imágenes como cualquier otro contenido que se nos ocurra. Es completamente configurable tan solo con CSS, lo que permite una integración realmente simple a nuestro sitio. Si desean ver una idea de cómo podrían llegar a implementar Easy Slider en sus porfolios, basta con visitar templatica, otro de los sitios de Alen Grakalic, donde ha logrado integrar Easy Slider de una forma maravillosa.

    Demos

    Mas Info Easy Slider - Descarga ejemplos

    Uso:

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/easySlider.packed.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){   
            $("#slider").easySlider({
                orientation:'vertical'
            });
        });
    </script>

    agregando estilo

    PLAIN TEXT
    CSS:
    /* Easy Slider */

        #slider ul, #slider li{
            margin:0;
            padding:0;
            list-style:none;
            }
        #slider, #slider li{
            /*
                define width and height of container element and list item (slide)
                list items must be the same size as the slider area
            */
            width:696px;
            height:241px;
            overflow:hidden;
            }
        span#prevBtn{}
        span#nextBtn{}         

    /* // Easy Slider */

    Contenido

    PLAIN TEXT
    HTML:
    <div id="slider">
            <ul>               
                <li><a href="#"><img src="images/01.jpg" alt="Descripcion" /></a></li>
                <li><a href="#"><img src="images/02.jpg" alt="Descripcion" /></a></li>
                <li><a href="#"><img src="images/03.jpg" alt="Descripcion" /></a></li>
                <li><a href="#"><img src="images/04.jpg" alt="Descripcion" /></a></li>
                <<li><a href="#"><img src="images/05.jpg" alt="Descripcion" /></a></li>   
            </ul>
        </div>

    El script automáticamente agregara la navegación "anterior" y "próximo", pero se le ha asignado un ID (identificación) que pueden utilizar para darle un poco de estilo mediante CSS

    PLAIN TEXT
    HTML:
    <span id="prevId"><a href="javascript:void(0);">Previous</a></span>
    <span id="nextBtn"><a href="javascript:void(0);">Next</a></span>

  • Diseño Web | Generadores | Herramientas

    04 /01 / 2009 - 3:41 pm

    Publicado por Nikko.

    • 15
    • 1.439

    Social Link

    HTML Ipsum by Chris Coyier

    htmlimpsucode.jpg

    HTML Ipsum, el sitio que no hace mucho lanzo Chris Coyier, en el encontraremos (ya es fácil deducirlo con su nombre) los tradicionales lorem ipsum que nos permitirán probar el diseño visual junto con las tipografías, que formaran parte de nuestro proyecto online. A diferencia de otros sitios de este tipo HTML Ipsum, nos presenta los párrafos, lista, y demás, escritos completamente en HTML. Además se integra con los editores de código Coda y TextMate para Mac y Gedit para Linux.

    Enlace  HTML Ipsum

  • Diseño Web | Themes | WordPress

    04 /01 / 2009 - 2:54 pm

    Publicado por Nikko.

    • 15
    • 5.369

    Social Link

    WP Framework – Base para tu próximo theme WP

    wpframework.jpg

    WP Framework , un theme WordPress totalmente “blanco” , limpio, sin objetos, que te permitirá crear tus propios themes en poco tiempo. Una buena forma de no comenzar tus proyectos desde “cero”, y tener una base para comenzar a plasmar todas tus ideas y tus estructuras para el próximo Theme de tu blog.
    Ver demo – Descarga – Mas Info WP Framework

  • Diseño Web | Galerias | Javascript | jQuery | Scripts

    22 /12 / 2008 - 7:35 pm

    Publicado por Nikko.

    • 15
    • 6.354

    Social Link

    Crear un Widget Amazon Books con jQuery y XML

    amazonboxxml.jpg

    Create an Amazon Books Widget with jQuery and XML, un fabuloso tutorial paso a paso que nos permitirá crear un Widget Amazon Books con jQuery y XML, algo así como una caja donde exponer nuestros productos totalmente navegable mediante su carrusel. Inclusive nos permitirá añadir una breve descripción del producto, algo que lo torna mucho más interesante. Requiere de JavaScript y jQuery, esta ultima diseñada para recorrer documentos XML con facilidad, archivo que utilizaremos para actualizar los datos en nuestro widget de productos.

    Ver demo - Descarga demo - Mas info Create an Amazon Books Widget
    Uso
    Realizar las llamadas desde nuestro encabezado < head > - Observar que se hace referencia a la ubicación del archivo book.xml, documento que utilizaremos para actualizar los datos de nuestro widgets:

    PLAIN TEXT
    JavaScript:
    <script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/books.js"></script>
    <script language="javascript" type="text/javascript">

        $(function(){
            BOOKS.init({
                xmlPath : "data/books.xml",
                imgPath : "images",
                perView : 4
            });
        });

    </script>

    Un poco de estilo

    PLAIN TEXT
    CSS:
    #books {
        width: 515px; /* optional */
    }
    #books img {
        border: 0;
    }
    #books .clear_both {
        clear: both;
    }
    #books .float_left,
    #books  ul li {
        float: left;
        display: inline;
    }
    #books .float_right {
        float: right;
    }
    #books .overclear {
        width: 100%;
        overflow: hidden;
    }

    /* styles */

    #books .buttons {
        position: relative;
        height: 30px;
        margin: 0 0 5px 0;
    }
    #books .prev {
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
    }
    #books .next {
        position: absolute;
        top: 0;
        right: 0;
    }
    #books .showing {
        margin: 5px 60px 0 60px;
        text-align: center;
        font-size: .8em;
    }
    #books .top {
        background: url(../images/books_top.gif) repeat-x;
    }
    #books .inner {
        padding: 0 0 0 20px;
        margin: 0 0 -20px 0;
        background: url(../images/books_left_mid.gif) repeat-y;
    }
    #books  ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        background: url(../images/books_right_mid.gif) repeat-y top right;
    }
    #books  ul li {
        display: none;
        position: relative;
        margin: 0;
        padding: 0 20px 20px 0;
        font-size: .8em;
        z-index: 1;
    }
    #books  ul li.loader {
        display: block;
        float: none;
        height: 115px;
        margin: 0 0 20px -20px;
        background: url(../images/books_loader.gif) no-repeat center center;
    }
    #books  ul li a.info {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }
    #books  ul li a.thumb {
        display: block;
        border: 1px solid #ddd;
    }
    #books  ul li a.thumb img {
        display: block;
        margin: 0;
        padding: 3px;
    }
    #books .btm {
        background: url(../images/books_btm.gif) repeat-x;
    }
    .books_tool_tip {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 350px;
        z-index: 9999;
    }
    .books_tool_tip .books_pointer_left {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        background: url(../images/books_pointer_left.gif);
    }
    .books_tool_tip .books_pointer_right {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        background: url(../images/books_pointer_right.gif);
    }
    .books_tool_tip .inner {
        border: 1px solid #ddd;
        padding: 15px 15px 3px 15px;
        margin: 0 0 0 9px;
        background: #fff;
    }
    .books_tool_tip .inner_right {
        margin: 0 9px 0 0;
    }
    .books_tool_tip .inner p {
        font-size: .8em;
        margin: 0;
        padding: 0 0 12px 0;
    }

    Contenido

    PLAIN TEXT
    HTML:
    <div id="books">
            <div class="overclear buttons">
                <a href="#" class="prev"><img src="images/books_prev.gif" width="40" height="30" alt="Previous" /></a>
                <div class="showing"><!-- showing --></div>
                <a href="#" class="next"><img src="images/books_next.gif" width="40" height="30" alt="Next" /></a>
            </div>
            <div class="overclear top">
                <img src="images/books_left_top.gif" width="20" height="20" alt="" class="float_left" />
                <img src="images/books_right_top.gif" width="20" height="20" alt="" class="float_right" />
            </div>
            <div class="inner">
                <ul class="overclear">
                    <li class="loader"><!-- loader --></li>
                </ul>
            </div>
            <div class="overclear btm">
                <img src="images/books_left_btm.gif" width="20" height="20" alt="" class="float_left" />
                <img src="images/books_right_btm.gif" width="20" height="20" alt="" class="float_right" />
            </div>
        </div>


Pagina 8 de 35«345678910111213»...Ultima »