[ un desarrollo de PATAGONIA CREATIVE ]
Email Facebook Rss

Archivos en Categoria: Programacion

  • Diseño Web | Programacion | Recursos Web

    23 /11 / 2009 - 9:07 am

    Publicado por Nikko.

    • 15
    • 8.216

    Social Link

    34 hojas de trucos para diseñadores y desarrolladores web

    34hojasdetrucos.jpg

    Como diseñadores web solemos pasar gran parte de nuestro tiempo programado y utilizando diversos programas de diseño, por momentos descubrimos que es realmente difícil recordar cada uno de los atajos y combinaciones de teclas para cada programa. Pero con 34 cheat sheets for web designers and developers, un fabuloso artículo que descubrí, algunas cosas serán aun más fáciles de recordar. En este artículo se presentan 34 hojas de trucos esenciales para los programas más populares relacionados al desarrollo web.

    Enlace 34 cheat sheets for web designers and developers

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

    31 /08 / 2008 - 5:25 pm

    Publicado por Nikko.

    • 15
    • 8.783

    Social Link

    Interface Slideshow

    interfaceshoe.jpg

    Interface Slideshow, otra agradable alternativa para mostrar nuestras imágenes en diapositivas y con desvanecimiento. Sin duda la cantidad de opciones que se nos suelen presentar son tantas, que hace muy difícil la elección de uno a la hora de implementarlo en nuestros proyectos. Soy de esos que creen, que aunque suelan verse muy similar a otros, todos poseen diversas ventajas y pequeñas cosas que llamaran más la atención uno de otro. Sea en la forma de implementarse, la librería en la cual se basa, las diferentes opciones que nos presenta y demás. Interface Slideshow utiliza jquery y un poco de css para dar el estilo que veremos en el ejemplo. Creo que les gustara.
    Ver Demo -Interface Slideshow

    Uso:

    Lo primero será descargar ambas librerías, jQuery 1.1.2 19 kb junto con Interface 1.2 146kb alojarlo en nuestro servidor o la carpeta que contiene todas nuestras librerías y realizar la llamada a ellos desde nuestro encabezado. Dentro de nuestras etiquetas < Head >…

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

    Un poco de CSS

    PLAIN TEXT
    CSS:
    #slideShow1
    {
    width: 300px;
    height: 280px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    margin: 10px;
    }
    #slideShow2
    {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    margin: 10px;
    }
    .pagelinks a
    {
    font-weight: bold;
    color: #666;
    }
    .slideCaption
    {
    background-color: #FFFFCC;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    }
    .pagelinks a.activeSlide
    {
    color: #f90;
    }
    /* this is for IE so the prev/next links can be hovered*/
    .nextSlide,.prevSlide
    {
    background-image: url(images/spacer.gif);
    }
    .nextSlide:hover
    {
    background-image: url(images/nextslide.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    }
    .prevSlide:hover
    {
    background-image: url(images/prevslide.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    }
    .inputsTooltip
    {
    border: 1px solid #ccc;
    background-color: #eee;
    padding: 4px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    filter:alpha(opacity=70);
    -moz-opacity:.70;
    opacity:.70;
    }
    #tooltipURL
    {
    display: none;
    }

    Estructura de ambos ejemplos

    PLAIN TEXT
    HTML:
    <div id="slideShow1">
    <div class="slideshowLoader"></div>
    <div class="slideshowHolder"></div>
       
       
    <div class="slideshowLinks pagelinks"></div>

    <div class="slideshowCaption slideCaption"></div>
    </div>

    <div id="slideShow2"><div class="slideshowLoader"></div>
    <div class="slideshowHolder"></div>
       
       
    <div class="slideshowLinks pagelinks"></div>
    <div class="slideshowCaption slideCaption"></div>
    </div>

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript">
    $(document).ready(
        function()
        {
            $.slideshow(
                {
                    container : 'slideShow1',
                    loader: 'slideshow_files/slideshow_loader.gif',
                    linksPosition: 'top',
                    linksClass: 'pagelinks',
                    linksSeparator : ' | ',
                    fadeDuration : 400,
                    activeLinkClass: 'activeSlide',
                    nextslideClass: 'nextSlide',
                    prevslideClass: 'prevSlide',
                    captionPosition: 'bottom',
                    captionClass: 'slideCaption',
                    autoplay: 5,
                    random: true,
                    images : [
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Panda Dynamic'
                        },
                        {
                            src: 'slideshow_files/Active.jpg',
                            caption: 'Panda Actual'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Fiat Panda'
                        },
                        {
                            src: 'slideshow_files/Active.jpg',
                            caption: 'Panda Active'
                        }
                    ]
                }
            )
            $.slideshow(
                {
                    container : 'slideShow2',
                    loader: 'images/slideshow_loader.gif',
                    linksPosition: 'top',
                    linksClass: 'pagelinks',
                    linksSeparator : ' | ',
                    fadeDuration : 400,
                    activeLinkClass: 'activeSlide',
                    nextslideClass: 'nextSlide',
                    prevslideClass: 'prevSlide',
                    captionPosition: 'bottom',
                    captionClass: 'slideCaption',
                    autoplay: 5,
                    images : [
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Fiat Panda'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Panda Active'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Panda Actual'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpgg',
                            caption: 'Panda Dynamic'
                        }
                    ]
                }
            )
           
            $('a').ToolTip(
                {
                    className: 'inputsTooltip',
                    position: 'mouse'
                }
            );
        }
    );
    </script>

    Ver Demo -Mas info Interface Slideshow

  • Diseño Web | Programacion | Recursos Web | Scripts

    21 /07 / 2008 - 12:31 am

    Publicado por Nikko.

    • 15
    • 2.051

    Social Link

    Resaltar productos con MooTools

    prowerful.jpg

    Create a Simple, Powerful Product Highlighter with – Una bonita técnica que podremos utilizar en nuestros proyectos web para crear simples y potentes secciones resaltadas con MooTools. Este tutorial te permitirá conocer un poco esta técnica y las ventajas de utilizar MooTools.

    Ver Demo - Descarga - Mas info  Create a Simple, Powerful Product Highlighter with MooTools

    Instalacion:

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

    <script type="text/javascript" charset="utf-8"> window.addEvent(\'domready\', function() {

    // Create variables (in this case two arrays) representing our bubbles and pages    var myPages = $$(\'.page\');   var myBubbles = $$(\'.bubble\');

    // Set bubbles opacity to zero so they\'re hidden initially and toggle visibility on for their container        myBubbles.setStyle(\'opacity\', 0);    $(\'bubbleWrap\').setStyle(\'visibility\',\'visible\')

    // Add our events to the pages  myPages.each(function(el, i) {     el.set(\'morph\', {link : \'cancel\'});

    el.addEvents({    \'mouseenter\': function() {                 myBubbles[i].morph({                \'opacity\' : 1,           \'margin-top\' : \'-15px\'             });          },             \'mouseleave\' : function() {         myBubbles[i].morph({      \'opacity\' : 0,                     \'margin-top\' : 0     });    }           });    }); });

    </script>

    un poco de estilo

    PLAIN TEXT
    CSS:
    <style type="text/css" media="screen">  img { border: 0; }    #siteWrap {       margin: 287px auto 0 auto;         width: 642px;     height: 345px;       position: relative;       background: transparent url(images/bg_pageWrap.jpg) no-repeat top left;    }  #pageWrap {   position: absolute;   z-index: 5;   top: 138px;   left: 134px;

    }   #psdPage {       margin-right: 19px;       float: left;     cursor: pointer;  }    #netPage {         margin-right: 20px;         float: left;       cursor: pointer;   }      #audioPage {       float: left;     cursor: pointer;  }    #bubbleWrap {   position: absolute;   z-index: 10;         left: 158px;       top: 30px;     }   .bubble {         position: absolute;     }   .clear {   clear: both;     } </style>

    contenido

    PLAIN TEXT
    HTML:
    <p id="siteWrap">
    <p id="bubbleWrap" style="visibility: hidden">
    <p class="bubble"><img src="images/bubble_PSD.jpg" alt="PSDTUTS" /></p>
    <p class="bubble"><img src="images/bubble_NET.jpg" alt="NETTUTS" /></p>
    <p class="bubble"><img src="images/bubble_AUDIO.jpg" alt="AUDIOTUTS" /></p>

    <p id="pageWrap">
    <p class="page" id="psdPage"><a href="#"><img src="images/page_PSD.jpg" alt="PSDTUTS" /></a></p>
    <p class="page" id="netPage"><a href="#"><img src="images/page_NET.jpg" alt="NETTUTS" /></a></p>
    <p class="page" id="audioPage"><a href="#"><img src="images/page_AUDIO.jpg" alt="AUDIOTUTS" /></a></p>

    Mas info Create a Simple, Powerful Product Highlighter with MooTools

  • Diseño Web | Javascript | Programacion | Recursos Web | Scripts

    19 /06 / 2008 - 2:27 am

    Publicado por Nikko.

    • 15
    • 3.698

    Social Link

    10 scripts para generar estadísticas

    10chartgraf.jpg

    Si te encuentras trabajando en algún proyecto online en el cual deberás montar graficas de estadísticas u otro tipo de información, pero aun no sabes de que modo las diseñarlas, creo q este articulo denominado 10 Free Chart Scripts será realmente útil para ti, es ni mas ni menos que una pequeña recopilación de agradables script basados en JavaScript, Flash, Silverlight, y Java, que te permitirán crear todo tipo de graficas. Básicamente son solo 10 las opciones que encontraremos, pero considero que son más que suficiente. Todas son realmente muy diferentes, en cuanto a diseño y como montarlas en nuestros proyectos online, lo que seguramente significa que encontraras la forma mas adecuada de implementar algunas de estas graficas, al proyecto en el cual te encuentras trabajando.

    Enlace 10 Free Chart Scripts

  • Diseño Web | php | Programacion | WordPress

    16 /06 / 2008 - 5:42 pm

    Publicado por Nikko.

    • 15
    • 2.617

    Social Link

    Trucos útiles para wordpress

    usertipswp.jpg

    No hay dudas de lo que significa hoy para todo desarrollador wordpress, esta plataforma que se ha convertido en una de las más populares en Internet, y la que solemos utilizar frecuentemente sin importar cual sea el proyecto en el cual trabajaremos. Siempre mediante unas líneas de código adicionales, WordPress se adaptara a lo que necesitemos. Evidentemente trabajar con frecuencia con wordpres nos lleva cada día a aprender nuevos trucos, tips, o formas de solucionar ciertos problemas de la forma mas rápida y practica, pero es obvio que es tanta la información que es imposible recordar cada uno de ellos en el momento que lo estamos necesitando. Seguramente es lo que te pasara a ti en algún momento al trabajar en el diseño de tu próximo theme wordpress. La gente de Stylizedweb estos días ha despertado pensando en ello, y ha publicado un post que nos será muy útil en ocasiones. En el encontraremos fragmentos reutilizables de códigos que todos necesitamos de vez en cuando.El artículo incluye tips para:

    • Realización de una plantilla
    • Invertir orden de comentarios
    • Crear post Destacados
    • Incluir un archivo específico
    • Etiquetas condicional
    • Invertir el orden de post
    • Caracteres especiales
    • Y mas…

    Mas informacion Useful wordpress tricks
    Ejemplo: Reverse comment order

    PLAIN TEXT
    PHP:
    <?php $comments = array_reverse($comments, true); ?>
       <?php foreach ($comments as $comment) : ?>
         content here
       <?php endforeach; ?>

  • Diseño Web | Javascript | Programacion | Scripts

    10 /06 / 2008 - 2:22 am

    Publicado por Nikko.

    • 15
    • 2.571

    Social Link

    jQuery 1,5 UI: Mas Efectos, API, y Themeroller

    jQuery IU ha lanzado una importante actualización jQuery 1,5 UI. Realmente con muchos cambios. API que eliminan el 95% de nuestros métodos expuestos, y mantiene un solo método sobrecargado por el plugin. Todos los efectos conocidos desde script.aculo.us se han añadido (pliegue, diapositiva, etc), pero otro gran numero de efectos mas de traspaso, clip, escala. Etc. Mas info y descarga jQuery 1,5 UI - Ver Demos

    jqueryuitheme.jpg

    Pero lo mas practico es sin duda Themeroller, una interfaz de usuario donde podremos diseñar y construir nuestros propios themes personalizados, listo para ser descargados. Algo como Tabs, acordeones, recolectores de fechas, etc. Tan simple como ajustar los colores, fuentes y texturas a gusto personal, descargar y usar. Y lo mejor, podrás ver cada cambio que hagas en tiempo real u online.

    Enlace Themeroller

    via ajaxian - css-tricks

  • Diseño Web | Javascript | Programacion | Recursos Web | Scripts

    23 /01 / 2008 - 2:53 am

    Publicado por Nikko.

    • 15
    • 3.879

    Social Link

    Menu animado basado en Mootools

    menumootols.jpg

    Si les agradan los Menú animados para sus proyectos online, y específicamente el menú que vemos en el sidebar del sitio oficial de mootools, quizás este post Mootools animated sidebar menú les pueda ser útil. Es un tutorial del cual podremos descargar los ejemplos listos para ser usados en nuestros proyectos online. El pack de este menú basado en Mootools, contiene todo el código fuente, moofx.js y todo archivo que permitirá obtener los efectos visuales.

    Ver Demo - Descarga Demo


Pagina 1 de 212»