[ un desarrollo de PATAGONIA CREATIVE ]
Email Facebook Rss

  • Diseño Web | Scripts | Tutoriales

    24 /04 / 2008 - 8:51 pm

    Publicado por Nikko.

    • 2
    • 975

    Social Link

    NETTUTS – Tutoriales y tips sobre desarrollo

    netsus.jpg

    NETTUTS es un blog muy reciente que estará enfocado al desarrollo web y tips de gran utilidad, sin duda es un blog que promete mucho. Si notan un diseño similar al de PSDTUTS, es precisamente porque son ellos quienes están detrás de este blog. Tan solo lleva días online, pero ya podremos encontrar algunos tips muy interesantes, por ejemplo:

    tabsnetsus.jpg

    Crear Tabs usando CSS y jQuery - Una de las formas mas simples de introducir mucho contenido en una sección reducida, es mediante la utilización de “tabs”, en Nettuts podremos encontrar un tutorial muy completo para crear bonitos tabs que podremos usar posteriormente en nuestros proyectos. Si buscas algo simple será muy útil, pero les recomiendo el ejemplo en el cual se ha utilizado jQuery, porque posee unos efectos realmente extraordinarios.

    Ver Demo – Mas Info Create a Slick Tabbed Content Area using CSS & jQuery

    netpaypal.jpg

    Crear formularios de pagos Paypal - Un tips muy agradable que le servirá a aquellos que desean tener desde sus web un formulario integrado a su cuenta paypal, y el cual permita recibir los montos de una forma mas directa o simple. Tips útil para recibir donación o vender.

    Ver demo y mas Info Creating a PayPal Payment Form

    Via css-tricks

  • Diseño Web | Scripts

    21 /04 / 2008 - 4:14 am

    Publicado por Nikko.

    • 3
    • 982

    Social Link

    Spoiler Revealer – Ocultar contenido adicional con jquery

    spoiler.jpg

    Fade-in Spoiler Revealer, es una agradable técnica que veo en css-tricks, en la cual usando jQuery podremos ocultar o mostrar toda la parte de un texto y sustituirla por un " revelar contenido adicional" o “seguir leyendo”. Inclusive al Mostar el contenido oculto, se produce un efecto desvanecimiento que lo hace ver muy bonito. Queda en ustedes, pensar en que proyecto en el cual trabajan podrá ser realmente útil.

    Ver Demo - Descarga Ejemplo - Mas Info css-tricks
    Instalacion
    Añadimos a nuestro encabezado

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript" src="js/jquery.js"></script>
       
        <script type="text/javascript">
        $(document).ready(function() {
           
            $("span.spoiler").hide();
           
             $('<a class="reveal">Reveal Spoiler&gt;&gt;</a> ').insertBefore('.spoiler');
       
            $("a.reveal").click(function(){
                $(this).parents("p").children("span.spoiler").fadeIn(2500);
                $(this).parents("p").children("a.reveal").fadeOut(600);
            });

        });
        </script>

    Uso

    PLAIN TEXT
    HTML:
    <p>texto, texto, texto<span class="spoiler">Contenido oculto........</span></p>

  • CSS | Tutoriales | WordPress

    21 /04 / 2008 - 3:52 am

    Publicado por Nikko.

    • 1
    • 990

    Social Link

    Paginar artículos recientes en WordPress

    pagarticulos.jpg

    Para aquellos que siempre están pensando en agregar cositas nuevas a sus themes wordpress, acabo de ver este agradable tip para generar paginación con nuestros articulos recientes.

    Ver demo en raproject - Mas info weblogtoolscollection

    Uso:

    Agregamos a nuestro sidebar el siguiente codigo

    PLAIN TEXT
    JavaScript:
    <div id="recientespag">
    <h3>Articulos Recientes</h3>
    <ul>
    <?php
    $temp = $wp_query;
    $wp_query= null;
    $wp_query = new WP_Query();
    $wp_query->query('showposts=5'.'&paged='.$paged);
    ?>
    <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
        <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
    <?php endwhile; ?>
    </ul>
    <div class="navigation">
      <div class="alignleft"><?php previous_posts_link('&laquo; Otros') ?></div>
      <div class="alignright"><?php next_posts_link('Leer Mas &raquo;') ?></div>
    </div>
    <?php $wp_query = null; $wp_query = $temp;?>
    </div>

    un poco de estilo (Básicamente el estilo que muestro en la foto del post)

    PLAIN TEXT
    CSS:
    #recientespag {
        width:300px;
        background: #1B1B19;
    border: 1px solid #2A2A2A;
        float:right;
        padding:13px 15px 8px 15px;
        }
    #recientespag h3 {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 2.2em;
        color: #C7C54F;
    }

    #recientespag ul {
        margin-top:-5px;
        }
       
    #recientespag li {
        border-bottom:1px solid #2A2A2A;
        list-style:none;
        padding:7px 0 7px 0px;
        }

    #recientespag a, #recent a:visited {
        color:#999831;
        font-size:0.9em;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        }

  • CSS | Diseño Web | Scripts

    21 /04 / 2008 - 3:19 am

    Publicado por Nikko.

    • 5
    • 3.736

    Social Link

    Image Cross Fade Transition

    fadetransi.jpg

    En jqueryfordesigners podremos ver diversas técnicas para lograr fundidos mientras vamos generando transiciones entre una y otra imagen. Es un efecto sencillo pero que puede dar un estilo agradable a nuestros proyectos. Se puede lograr de una forma muy simple con CSS o mediante JavaScript, con una imagen que al posar el ratón sobre ella genere la transición y luego de haber dejado nuestro ratón vuelva lentamente a la imagen original con un desvanecimiento muy suave.

    Ver Demo - Descarga Ejemplo - Mas info jqueryfordesigners - Mas demos 1, 2, 3

    Tecnica con jQuery
    En nuestro encabezado

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

        <script type="text/javascript">
        <!--
       
        $(function () {
            // find the div.fade elements and hook the hover event
            $('div.fade').hover(function() {
                // on hovering over find the element we want to fade *up*
                var fade = $('> div', this);

                // if the element is currently being animated (to fadeOut)...
                if (fade.is(':animated')) {
                    // ...stop the current animation, and fade it to 1 from current position
                    fade.stop().fadeTo(250, 1);
                } else {
                    fade.fadeIn(250);
                }
            }, function () {
                var fade = $('> div', this);
                if (fade.is(':animated')) {
                    fade.stop().fadeTo(3000, 0);
                } else {
                    fade.fadeOut(3000);
                }
            });
        });
       
        //-->
        </script>

    Un poco de CSS

    PLAIN TEXT
    CSS:
    .fade {
      position: absolute;
      top: 100px
      left: 100px
    }

    .fade div {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }

    Nuestra estructura

    PLAIN TEXT
    HTML:
    <h2> Tecnica jQuery</h2>
    <div class="fade">
      <a href="http://xyberneticos.com/"><img src="1.jpg" /></a>
      <div>
        <a href="http://xyberneticos.com/"><img src="2.jpg" /></a>
      </div>
    </div>

    TECNICA con CSS

    PLAIN TEXT
    CSS:
    img.fade {
      opacity: 1;
      -webkit-transition: opacity 1s linear;
    }

    img.fade:hover {
      opacity: 0;
    }

    PLAIN TEXT
    HTML:
    <h2> Tecnica CSS</h2>
          <span style="position: relative;">
        <img src="2.jpg" />
        <img
          style="position: absolute; left: 0px;"
          src="1.jpg" class="fade" />
    </span>

  • Diseño Web | Scripts

    19 /04 / 2008 - 4:51 am

    Publicado por Nikko.

    • 5
    • 4.661

    Social Link

    Menu Kwicks con jQuery

    kwicks.jpg

    Debo admitir que a lo largo del tiempo he conoció cantidad de menú que podríamos usar en nuestros proyectos. Cantidad de diseños y sobre todos efectos. Algo así como un menú adecuado para cada proyecto que nos encontremos encarando. Pero dentro de todos los que he probado o dentro de todos los diseños que me han gustado, uno de los que mas ha llamado mi atención es aquel que podremos encontrar en la Web oficial de MooTools, el cual posee un efecto denominado “kwicks” y el cual en una oportunidad comente aquí (basado en MooTools). Pero hoy acabo de encontrar este mismo menú, que se caracteriza por generar un desplazamiento al estilo de marcianas horizontales, pero esta vez realizado en base a jQuery. El efecto sigue siendo igual de extraordinario, lo que me recuerda que de una vez por todas, lo debería usar en mi porfolio personal. Si aun no entienden de lo que hablo, tan solo vean el menú citado en el ejemplo.

    Ver Demo - Descarga Ejemplo - MAs Informacion jeremymartin

    Instalación:
    Alojamos los archivos necesarios en nuestro servidor, y realizamos las llamadas correspondientes a nuestros archivos.

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="jquery.kwicks.js"></script>

    <script type="text/javascript">
    $().ready(function() {
        $('#menukwicks .kwicks').kwicks({
            maxWidth: 205,
            spacing:  5
        });
    });
    </script>

    damos estilo

    PLAIN TEXT
    CSS:
    .kwicks {
        list-style: none;
        position: relative;
        margin: 0;
        padding: 0;
    }

    .kwicks li {
        width: 125px;
        height: 100px;
        margin-right: 5px;
    }
    #kwick1 {
        background-color: #53b388;
    }
    #kwick1.active {
        background-color: #86e6bb;
    }
    #kwick2 {
        background-color: #5a69a9;
    }
    #kwick2.active {
        background-color: #8d9cdc;
    }
    #kwick3 {
        background-color: #c26468;
    }
    #kwick3.active {
        background-color: #f5979b;
    }
    #kwick4 {
        background-color: #bf7cc7;
        margin-right: none;
    }
    #kwick4.active {
        background-color: #efaffa;
    }

    Y por ultimo, la estructura de nuestro Menu

    PLAIN TEXT
    HTML:
    <div id="menukwicks">
        <ul class="kwicks">
            <li id="kwick1"></li>
            <li id="kwick2"></li>
            <li id="kwick3"></li>
            <li id="kwick4"></li>
        </ul>
    </div>

    Via Anieto2k - diariothc

  • Diseño | Generadores | Herramientas

    19 /04 / 2008 - 3:36 am

    Publicado por Nikko.

    • 2
    • 7.542

    Social Link

    WaveMyPic – Añadir agua en movimiento a cada una de tus fotos

    wavemypic.jpg

    WaveMyPic una simple aplicación online que nos permitirá añadir a nuestras imágenes, reflejos pero con un efecto de agua en movimiento. Claro esta, que esta pensado para aquellos que busquen resultados realmente rápidos y no deseen algo muy profesional, pero si, algo original. Debo decir que el resultado que obtendremos con WaveMyPic es muy agradable, salvo claro, la publicidad que deberemos soportar. De mas esta decir, que su utilización es realmente fácil, solo deberemos subir una imagen desde nuestro ordenador, y dejar todo el trabajo pesado a WaveMyPic, Ojala todo en la vida fuera así, pero por desgracia, solo sucede en las películas.

    Enlace WaveMyPic

    Via puntogeek

  • Galerias | Scripts

    17 /04 / 2008 - 4:30 am

    Publicado por Nikko.

    • 6
    • 8.978

    Social Link

    jQuery virtual tour – Para crear visitas virtuales

    vitualjquery.jpg

    jQuery virtual tour una extensión para simple panorama viewerr que nos permite jugar un poco más con jQuery añadiendo interactividad al transformar algunas vistas panorámicas en una visita virtual. jQuery virtual tour tiene la particularidad de ser accesible y puede funcionar incluso si el javascript no se ha activado. Para la navegación utiliza las etiquetas estándar < map > y < area /> con las cuales crearemos áreas en nuestro Tour virtual con información adicional. Quizas lo mejor sea que no hay necesidad de utilizar Flash, Quicktime o Java.

    Ver Demo - Mas info jQuery virtual tour
    Uso
    En Nuestro encabezado < head >, realizamos las llamadas correspondientes

    PLAIN TEXT
    JavaScript:
    <link rel="stylesheet" type="text/css" href="css/thickbox.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" media="screen" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.panorama.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("img.advancedpanorama").panorama({
                        auto_start: 0,
                            start_position: 0
                /* add your execution parameters here */
                 });
        });
    </script>
    <script type="text/javascript" src="js/cvi_text_lib.js"></script>
    <script type="text/javascript" src="js/jquery.advanced-panorama.js"></script>
    <script type="text/javascript" src="js/thickbox.js"></script>

    En nuestro contenido añadimos la imagen panorámica, y creamos las áreas interactiva mediante coordenadas. Añadimos la clase “thickbox” si se trata de imágenes.

    PLAIN TEXT
    HTML:
    <img src="img/sculpteur.jpg" class="advancedpanorama" width="2448" height="375" usemap="testmap" alt="Atelier du sculpteur" />
    <map id="testmap" name="testmap">
            <area shape="rect" coords="1653,72,1839,255" href="index.html" alt="vers la salle de formation" />
            <area shape="rect" coords="2013,114,2091,210" href="img/statue1.jpg" alt="statues" class="thickbox" />
            <area shape="rect" coords="1920,276,2070,351" href="img/gouges.jpg" alt="gouges" class="thickbox" />
    </map>


Pagina 44 de 96« Portada...«3940414243444546474849»...Ultima »