Xyberneticos » Javascript http://xyberneticos.com Desarrollo Web, Diseño, Recursos, Wordpress, Themes Fri, 04 Nov 2011 14:10:38 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Tipped – The Javascript Tooltip Framework http://xyberneticos.com/index.php/2011/06/17/tipped-the-javascript-tooltip-framework/ http://xyberneticos.com/index.php/2011/06/17/tipped-the-javascript-tooltip-framework/#comments Fri, 17 Jun 2011 17:21:53 +0000 Nikko http://xyberneticos.com/?p=3158

Tipped Javascript es un nuevo proyecto de nickstakenburg, el cual nos presenta otra práctica forma para generar hermosos tooltips. Es una evolución generada a partir del popular Prototip, pero llevado al segundo nivel mediante el uso de HTML 5 para darle un control total sobre la apariencia. Al igual que en otros proyectos con similares características, encontraremos diseños ya prediseñados pero eso no nos limitara a obtener mejores resultados. Podrás jugar un poco con los skin además de personalizarlo por completo. Contaras con Callbacks y Eventos disponibles para una fácil integración con tu propio código. Además de visualizar Ajax & HTML o elementos de la página.
Mas info Tipped - Descargas

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>

Incluir tipped

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="/js/bridge/bridge.js"></script>
<script type="text/javascript" src="/js/excanvas/excanvas.js"></script>
<script type="text/javascript" src="/js/spinners/spinners.js"></script>
<script type="text/javascript" src="/js/tipped/tipped.js"></script>

PLAIN TEXT
HTML:
<link rel="stylesheet" type="text/css" href="/css/tipped.css" />

Uso basico

PLAIN TEXT
HTML:
<span class="tipped" title="A basic tooltip">I have a tooltip!</span>
<

Uso avanzado

PLAIN TEXT
HTML:
<span class="tipped" title="A more advanced tooltip" data-tipped-options="
  skin: 'light',
  hook: 'rightmiddle',
  hideOn: false,
  closeButton: true,
  hideDelay: .2,
  offset: { x: 10 }
">I also have a tooltip!</span>
<

]]> http://xyberneticos.com/index.php/2011/06/17/tipped-the-javascript-tooltip-framework/feed/ 4 Video JS – Reproductor de vídeo en HTML5 http://xyberneticos.com/index.php/2011/01/14/video-js-reproductor-de-video-en-html5/ http://xyberneticos.com/index.php/2011/01/14/video-js-reproductor-de-video-en-html5/#comments Fri, 14 Jan 2011 04:41:59 +0000 Nikko http://xyberneticos.com/?p=3090

Video JS es un reproductor de video basado en JavaScript que utiliza la funcionalidad de video HTML5 de los navegadores avanzados. En general, la ventaja de utilizar un reproductor de HTML5 es un aspecto coherente entre los navegadores.

WordPress HTML5 Reproductor de vídeo

Para utilizar HTML5 Video en WordPress, necesitaran un plugin adicional. HTML5 video player plugin for WordPress , el plug-in les permitira utilizar la etiqueta [video] para integrar HTML5 Video , y VideoJS para que funcione correctamente.

PLAIN TEXT
JavaScript:
<head>
  ...
    <script src="video.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
  ...
<script type="text/javascript" charset="utf-8">
    // Add VideoJS to all video tags on the page when the DOM is ready
    VideoJS.setupAllWhenReady();
  </script>

  </head>

PLAIN TEXT
HTML:
<!-- Begin VideoJS -->
  <div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video class="video-js" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- Download links provided for devices that can't play video in the browser. -->
    <p class="vjs-no-video"><strong>Download Video:</strong>
      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>
  <!-- End VideoJS -->

]]> http://xyberneticos.com/index.php/2011/01/14/video-js-reproductor-de-video-en-html5/feed/ 1 Banner animado personalizado con jQuery http://xyberneticos.com/index.php/2011/01/13/banner-animado-personalizado-con-jquery/ http://xyberneticos.com/index.php/2011/01/13/banner-animado-personalizado-con-jquery/#comments Thu, 13 Jan 2011 19:30:53 +0000 Nikko http://xyberneticos.com/?p=3087

Custom Animation Banner with jQuery, es una maravillosa idea para crear banner animados, personalizados con jQuery. La idea es contar con elementos diferentes, que irán apareciendo paso a paso o en una secuencia determinada, dependiendo de nuestra personalización. Se ha utilizado jQuery Easing Plugin y  jQuery 2D Transform Plugin para crear esta ingeniosa animación, muy similar a otras realizadas en flash.

Resultado: Demo - Descarga Ficheros Animation Banner

PLAIN TEXT
HTML:
<div id="ca_banner1" class="ca_banner ca_banner1">
    <div class="ca_slide ca_bg1">
        <div class="ca_zone ca_zone1"><!--Product-->
            <div class="ca_wrap ca_wrap1">
                <img src="images/product1.png" class="ca_shown" alt=""/>
                <img src="images/product2.png" alt="" style="display:none;"/>
                <img src="images/product3.png" alt="" style="display:none;"/>
                <img src="images/product4.png" alt="" style="display:none;"/>
                <img src="images/product5.png" alt="" style="display:none;"/>
            </div>
        </div>
        <div class="ca_zone ca_zone2"><!--Line-->
            <div class="ca_wrap ca_wrap2">
                <img src="images/line1.png" class="ca_shown" alt=""/>
                <img src="images/line2.png" alt="" style="display:none;"/>
            </div>
        </div>
        <div class="ca_zone ca_zone3"><!--Title-->
            <div class="ca_wrap ca_wrap3">
                <img src="images/title1.png" class="ca_shown" alt="" />
                <img src="images/title2.png" alt="" style="display:none;"/>
                <img src="images/title3.png" alt="" style="display:none;"/>
            </div>
        </div>
    </div>
</div>

PLAIN TEXT
CSS:
.ca_banner{
    position:relative;
    overflow:hidden;
    background:#f0f0f0;
    padding:10px;
    border:1px solid #fff;
    -moz-box-shadow:0px 0px 2px #aaa inset;
}
.ca_slide{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
}
.ca_zone{
    position:absolute;
    width:100%;
}
.ca_wrap{
    position:relative;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.ca_wrap img.ca_shown{
    display:inline !important;
}
/* Custom styles of banner1 */
.ca_banner1{
    width:650px;
    height:300px;
}
.ca_bg1{
    background:#fff url(../images/bg.jpg) no-repeat top left;
}
.ca_banner1 .ca_zone1{
    top:0px;
    left:0px;
}
.ca_banner1 .ca_wrap1{
    width:320px;
    height:300px;
}
.ca_banner1 .ca_zone2{
    top:100px;
    left:240px;
}
.ca_banner1 .ca_wrap2{
    width:387px;
    height:203px;
}
.ca_banner1 .ca_zone3{
    top:32px;
    left:250px;
}
.ca_banner1 .ca_wrap3{
    width:378px;
    height:31px;
}

/*Custom Style for Second Banner*/
.ca_banner2{
    width:120px;
    height:600px;
}
.ca_bg2{
    background:#fff url(../images/bgSmall.jpg) no-repeat top left;
}
.ca_banner2 .ca_zone1{
    top:10px;
    left:0px;
}
.ca_banner2 .ca_wrap1, /*They are the same size*/
.ca_banner2 .ca_wrap2{
    width:120px;
    height:220px;
}
.ca_banner2 .ca_zone2{
    top:250px;
    left:0px;
}

PLAIN TEXT
JavaScript:
$('#ca_banner1').banner({
    steps : [
        [
            //1 step:
            [{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
            [{"to" : "1"}, {}],
            [{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
        ],
        [
            //2 step:
            [{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],
            [{"to" : "1"}, {}],
            [{"to" : "2"}, {}]
        ],
        [
            //3 step:
            [{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],
            [{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}],
            [{"to" : "2"}, {}]
        ],
        [
            //4 step
            [{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],
            [{"to" : "2"}, {}],
            [{"to" : "3"}, {"effect": "zoomOut-zoomIn"}]
        ],
        [
            //5 step
            [{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
            [{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
            [{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
        ]
    ],
    total_steps : 5,
    speed : 3000
});

]]> http://xyberneticos.com/index.php/2011/01/13/banner-animado-personalizado-con-jquery/feed/ 4 HighCharts – Graficas en JavaScript http://xyberneticos.com/index.php/2009/12/07/highcharts-graficas-en-javascript/ http://xyberneticos.com/index.php/2009/12/07/highcharts-graficas-en-javascript/#comments Tue, 08 Dec 2009 01:58:31 +0000 Nikko http://xyberneticos.com/?p=2420 charts

HighCharts, un interesante script para la creación de gráficos escrito puramente en JavaScript. Brinda una forma muy fácil y atractiva para añadir estos gráficos a nuestras web, además de múltiples opciones si nos enfocamos en los estilos. Gráficos de barras, circulares, lineales, son algunas de las opciones por las que podremos optar. Su licencia es gratuita para uso personal, podrán encontrar soporte en línea y demos para nuevas ideas.

Enlace HighCharts

Fuente wwwhatsnew

]]> http://xyberneticos.com/index.php/2009/12/07/highcharts-graficas-en-javascript/feed/ 7 miniGallery – An extremely lightweight gallery template http://xyberneticos.com/index.php/2009/09/21/minigallery-an-extremely-lightweight-gallery-template/ http://xyberneticos.com/index.php/2009/09/21/minigallery-an-extremely-lightweight-gallery-template/#comments Mon, 21 Sep 2009 03:41:45 +0000 Nikko http://xyberneticos.com/index.php/2009/09/21/minigallery-an-extremely-lightweight-gallery-template/ minigallery.jpg

MiniGallery es una galería muy simple y bonita, que puede ser muy útil para tus proyectos web. El JavaScript utilizado en miniGallery es la secuencia de comandos Yetii, extremadamente ligero y tan flexible que es fácil de personalizar para satisfacer casi cualquier requisito.

Ver Demo - Descarga

]]> http://xyberneticos.com/index.php/2009/09/21/minigallery-an-extremely-lightweight-gallery-template/feed/ 7 16 Javascript para resaltar los códigos de tus post http://xyberneticos.com/index.php/2009/08/23/16-javascript-para-resaltar-los-codigos-de-tus-post/ http://xyberneticos.com/index.php/2009/08/23/16-javascript-para-resaltar-los-codigos-de-tus-post/#comments Mon, 24 Aug 2009 02:34:48 +0000 Nikko http://xyberneticos.com/index.php/2009/08/23/16-javascript-para-resaltar-los-codigos-de-tus-post/ 16scriptcode.jpg

Si suelen publicar en sus blog fragmentos de códigos CSS, php, html y demás, pero solo lo publican con un montón de texto en negro sencillo donde es realmente difícil encontrar cosas específicas, encontraran este articulo muy útil. 16 free javascript code syntax highlighters for better programming, es un artículo que les presentara 16 propuestas para utilizar a la hora de resaltar los códigos introducidos en los post de sus web. La idea es que al igual que los programas Pspad o Notepad + + entre otros, podamos resaltar diferentes relieves en las partes del código. Además, lo interesante de estos script, es que no solo debemos utilizarlo tal cual los encontramos, personalizarlos y adaptarlos al diseño de nuestro blog es realmente sencillo.

Enlace 16 free javascript code syntax highlighters for better programming

]]> http://xyberneticos.com/index.php/2009/08/23/16-javascript-para-resaltar-los-codigos-de-tus-post/feed/ 4 Añadir un Reproductor de Video Flash personalizado a tus proyectos web http://xyberneticos.com/index.php/2009/05/25/anadir-un-reproductor-de-video-flash-personalizado-a-tus-proyectos-web/ http://xyberneticos.com/index.php/2009/05/25/anadir-un-reproductor-de-video-flash-personalizado-a-tus-proyectos-web/#comments Mon, 25 May 2009 04:22:50 +0000 Nikko http://xyberneticos.com/index.php/2009/05/25/anadir-un-reproductor-de-video-flash-personalizado-a-tus-proyectos-web/ playplayer.jpg

How to Play Video Using an Open Source Player, un practico artículo que les enseñara paso por paso como montar un reproductor de video Flash, ideal para aquellos que deseen evitar recaer en youtube o bien para aquellos otros que gusten de la personalización. Para el tutorial se ha utilizado un reproductor de video de código abierto (MPW Player website), y básicamente se les explicara todo, incluyendo la conversión de un vídeo en formato tradicional a FLV y la incrustación de un reproductor personalizado utilizando SWFObject. La mejor parte es que no necesitaras para nada de Adobe Flash en todo el proceso.

El tutorial Incluye

  • Convertir la película a Flv usando Riva FLV Encoder
  • Descargar el reproductor
  • Insertar el Flash Player Usando SWFObject
  • Personalizar el aspecto del reproductor
  • Apoyo a los usuarios sin Flash y JavaScript
  • Adición de múltiples Rep. por pagina
  • Cómo usar el Audio Player
  • Más Personalización
]]> http://xyberneticos.com/index.php/2009/05/25/anadir-un-reproductor-de-video-flash-personalizado-a-tus-proyectos-web/feed/ 1 8 Javascript para solucionar los problemas más comunes de CSS http://xyberneticos.com/index.php/2009/04/27/8-javascript-para-solucionar-los-problemas-mas-comunes-de-css/ http://xyberneticos.com/index.php/2009/04/27/8-javascript-para-solucionar-los-problemas-mas-comunes-de-css/#comments Mon, 27 Apr 2009 03:33:01 +0000 Nikko http://xyberneticos.com/index.php/2009/04/27/8-javascript-para-solucionar-los-problemas-mas-comunes-de-css/ 8csssoluciones.jpg

El CSS es definitivamente una gran técnica para los diseñadores y desarrolladores web. Sin embargo, entre los problemas del navegador y la falta de apoyo CSS3 en los navegadores modernos, suelen transformarse en un verdadero problema. En catswhocode han recopilado 8 Javascript que les permitirá solucionar los problemas más comunes. Por ejemplos Transparencias, incluir clases diferentes para los diferentes navegadores, solucionar los problemas de alturas de las columnas, Solucionar la vista de las esquinas redondeadas, Fixing IE overflow problema, Los alineamientos verticales, las precargas de imágenes, Matar IE6 (colgará automáticamente una vez que la página se carga)

Enlace  8 Javascript solutions to common CSS problems

]]> http://xyberneticos.com/index.php/2009/04/27/8-javascript-para-solucionar-los-problemas-mas-comunes-de-css/feed/ 4 Ext Core – Muchos efectos para tus páginas web http://xyberneticos.com/index.php/2009/04/13/ext-core-muchos-efectos-para-tus-paginas-web/ http://xyberneticos.com/index.php/2009/04/13/ext-core-muchos-efectos-para-tus-paginas-web/#comments Mon, 13 Apr 2009 03:49:13 +0000 Nikko http://xyberneticos.com/index.php/2009/04/13/ext-core-muchos-efectos-para-tus-paginas-web/ extcore.jpg

Ext Core is a cross-browser, una completa biblioteca Java Script para la construcción de páginas web. Resultados reamente bellos, muy liviano, con un código muy limpio y muy sencillo de utilizar.

Mas Informacion - Descarga Completa Ext Core (Incluye ejemplos)

Podremos construir cosas como:

Carrusel - Ver Demo

Carrusel con el cual poder navegar por una serie de objetos. El cual puede ser configurado para satisfacer cualquier necesidad específica. Auto-play, animaciones, navegación y mucho más

Lightbox - Ver Demo

Los efectos tradicionales generados por los Lightbox, muy simple de configurar mediante css.

Menú - Ver Demo

Menu con efectos atractivos que convierte una lista de enlaces en un menú horizontal o vertical. Posee muchas opciones para ser configurado, incluyendo diferentes tipos de animaciones, fijar el elemento activo, los retrasos etc.

Simple Tabs - Ver Demo

Simple Tabs, una opción para implementar pestañas animadas que actúen como navegación de gran alcance, con sólo unas pocas líneas de código usando Ext. Core

]]> http://xyberneticos.com/index.php/2009/04/13/ext-core-muchos-efectos-para-tus-paginas-web/feed/ 6 TinyTable – Script de tan solo 2.5KB para crear Tablas personalizadas http://xyberneticos.com/index.php/2009/03/21/tinytable-script-de-tan-solo-25kb-para-crear-tablas-personalizadas/ http://xyberneticos.com/index.php/2009/03/21/tinytable-script-de-tan-solo-25kb-para-crear-tablas-personalizadas/#comments Sat, 21 Mar 2009 03:10:20 +0000 Nikko http://xyberneticos.com/index.php/2009/03/21/tinytable-script-de-tan-solo-25kb-para-crear-tablas-personalizadas/ tinytable.jpg

TinyTable, otro script de tan solo 2.5KB con el cual podremos crear tablas muy personalizadas. Incluye características muy interesantes como la opción de destacar columnas, opción de paginación, añadir enlaces y fechas, Ordenamiento, reconocimiento automático de datos, y demás. Testeado en Firefox 2/3, IE 6/7/8, Opera, Safari y Chrome.

Ver Demo - Descarga - Mas Info TinyTable

]]> http://xyberneticos.com/index.php/2009/03/21/tinytable-script-de-tan-solo-25kb-para-crear-tablas-personalizadas/feed/ 2