Un simple juego de TicTacToe con jQuery,bootstrap y bootswatch, una solución para entretener a los usuarios en tú sitio, el juego del tic-tac-toe llamado también Tateti, tres en raya, el gato, ceros y cruces comenzó en Egipto, se cuenta que el tablero se descubrió con unas rayas diagonales y horizontales, también se comenta que el juego era jugado en épocas de confucio en china, el juego es muy sencillo ya que la lógica es muy básica para implementarla en una hoja de papel y ponerse a jugar, al principio cuando se empiezan las jugadas si los 2 jugadores son hábiles terminan en empate el secreto de ganar es el siguiente:

http://es.wikihow.com/ganar-jugando-tres-en-raya

http://develoteca.github.io/SimpleTicTacToe/

Como dato interesante:

OXO: Primer vídeo-juego de Tic-Tac-Toe: https://es.wikipedia.org/wiki/OXO

No hay duda que antes se tenía mucha imaginación para realizar dicho juego, la programación no era tan simple como ahora.

¿ Te imaginas desarrollar este juego en lenguaje maquina ?

Bueno pues para no hacer esto, aquí esta una solución simple a tus problemas, Simple Tic Tac Toe una aplicación realizada en jquery bootstrap y bootswatch que intenta tener una solución a un juego simple y entendible, esta es la primera versión de este simple juego, más adelante se modificara para ser implementada con websocket y nos servirá para entender el funcionamiento de las peticiones con websocket, además que tendrás un juego totalmente funcional.

The post Un simple juego de TicTacToe con jQuery,bootstrap y bootswatch appeared first on Develoteca.

Blockrain.js Juego de Tetris en HTML5 con jQuery, si bien el juego de tetris es uno de los juegos más antiguos de tipo (puzzle), fue lanzado el 6 de junio de 1984 por Alekséi Pázhitnov en la Unión Soviética, creo que el éxito más favorable para este juego fue despues de la salida de Gameboy.

Como dato interesante podemos comentar que el nombre “tetris” deriva del griego “tetra”, que significa “cuatro” esto lo notamos en las piezas que se arman de a cuatro, la mecánica no es necesaria explicarla, ya que le juego es muy sencillo de jugar, el objetivo es armar líneas con los bloques que el juego te otorgue cada determinado tiempo.

Se comenta también que: “Jugar al Tetris de forma prolongada puede llevar a una actividad cerebral más eficiente durante el juego.La primera vez que se juega al Tetris, aumentan la función y actividad cerebral” (http://www.reuters.com/article/2009/06/02/us-videogames-tetris-idUSTRE5510V020090602).

Pero bueno sin importar los efectos que puede ocasionar este juego, lo importante de esta nota es hablar de la implementación del plugin, para tener este juego en nuestros sitio de forma fácil, efectiva y entretenida (con HMTL5).

La forma de implementar este juego es utilizar este plugin:  http://aerolab.github.io/blockrain.js/ aplicando unas cuantas lineas de código para su implementación:

1.- Lo primero que debemos hacer es, colocar codigo css y js para llamar al plugin:

<link rel="stylesheet" href="blockrain.css">
 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script src="blockrain.jquery.min.js"></script>

2.- Colocar una etiqueta html para invocar al plugin y controlar la aparición del juego.

<div class="game" style="width:250px; height:500px;"></div>

3.-  Incluir el script de javascript:

 $game=$('.game').blockrain( );

y obtendrás un juego de forma sencilla, si quieres más opciones puedes ingresar al siguiente enlace y ver la documentación completa.
https://github.com/Aerolab/blockrain.js

The post Blockrain.js Juego de Tetris en HTML5 con jQuery appeared first on Develoteca.

SimpleCalculadora jQuery Plugin para crear una calculadora bootstrap, este plugin es muy sencillo de usar ya que su implementación solo necesita un div, puede ser muy interesante implementarlo en tu sitio (si lo necesitas para cálculos sencillos), esta calculadora esta realizada con la ayuda de bootstrap y los estilos del siguiente snipp el enlace es el siguiente: http://bootsnipp.com/snippets/featured/3d-buttons-effects-fix , el plugin se centra en tener una solución rápida para tus aplicaciones, la demostración la puedes ver en el siguiente enlace: http://oscaruhp.github.io/SimpleCalculadora, este plugin tienes opciones como por ejemplo:

Cambio de:

1.- Colores de Botones.

2.- Colores de Signos.

3.- Orden de aparición de las teclas.

4.- Texto Personalizado.

5.- Control de salida de resultados.

Para realizar la aparición de dicho plugin en tu sitio puedes realizar la instalación de la siguiente forma.

1.- Incluir el archivo del plugin (el sitio tiene que estar creado en bootstrap, y tener jquery)

<!-- Bootstrap and JQuery -->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-2.1.4.min.js"> </script>

<!-- Plugin -->
<link rel="stylesheet" href="SimpleCalculadorajQuery.css">
<script src="SimpleCalculadorajQuery.js"></script>

2.- Crear los elementos donde quieres que aparezca la calculadora

<div id="idCalculadora"> </div>
<div id="micalc"> </div>

3.- Crear el script para instalar el plugin

$("#idCalculadora").Calculadora();
$("#micalc").Calculadora({'EtiquetaBorrar':'Limpiar'});

4.- Personalizarlo al gusto

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#idCalculadora"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Calculadora</span><span class="token punctuation">(</span><span class="token punctuation">{</span> EtiquetaBorrar<span class="token punctuation">:</span><span class="token string">'Clear'</span><span class="token punctuation">,</span> ClaseBtns1<span class="token punctuation">:</span> <span class="token string">'warning'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">/* Color Numbers*/</span> ClaseBtns2<span class="token punctuation">:</span> <span class="token string">'success'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">/* Color Operators*/</span> ClaseBtns3<span class="token punctuation">:</span> <span class="token string">'primary'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">/* Color Clear*/</span> TituloHTML<span class="token punctuation">:</span><span class="token string">'<h2>Develoteca.com</h2>'</span><span class="token punctuation">,</span> Botones<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token string">"+"</span><span class="token punctuation">,</span><span class="token string">"-"</span><span class="token punctuation">,</span><span class="token string">"*"</span><span class="token punctuation">,</span><span class="token string">"/"</span><span class="token punctuation">,</span><span class="token string">"0"</span><span class="token punctuation">,</span><span class="token string">"1"</span><span class="token punctuation">,</span><span class="token string">"2"</span><span class="token punctuation">,</span><span class="token string">"3"</span><span class="token punctuation">,</span><span class="token string">"4"</span><span class="token punctuation">,</span><span class="token string">"5"</span><span class="token punctuation">,</span><span class="token string">"6"</span><span class="token punctuation">,</span><span class="token string">"7"</span><span class="token punctuation">,</span><span class="token string">"8"</span><span class="token punctuation">,</span><span class="token string">"9"</span><span class="token punctuation">,</span><span class="token string">"."</span><span class="token punctuation">,</span><span class="token string">"="</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

No esperes mas, si quieres hacer cálculos en tu sitio, no esperes descargarlo y realiza las operaciones básicas, puedes agregarle más funcionalidades.

The post SimpleCalculadora jQuery Plugin para crear una calculadora bootstrap appeared first on Develoteca.

FModal, plugin complementario para un mensaje que ocupa toda la pantalla, este plugin muestra en pantalla completa la información que se agrega en un elemento html, mensajes completos para el usuario, este modal trabaja con algunos atributos que se agregan a las etiquetas html que realizan el llamado al modal, este plugin no muestra el contenido adentro de algún elemento html.

La idea principal de este plugin es llamar la atención al usuario, quien al fin y acabo es de quien necesitamos llamar la atención para que el este atento a lo que vamos a decir.

El uso es un poco diferente a la manera tradicional de los plugins que manejamos, en este caso se incluye jquery como de costumbre y el llamado al plugin, el plugin monitorea todos los elementos que tienen una etiqueta.

Si quieres ver las demostraciones: http://www.jqueryrain.com/?b_fMOoua

El uso es de la siguiente forma:

1.- Incluye el css del plugin

<link rel="stylesheet" href="css/modal.css">

2.- Incluye el elemento (en este caso un botón) con los atributos que llaman al modal

<button data-entrance="modal-fade" data-title="Fade-in Modal" data-text="Hello! I'm a Fade-in modal.">Button-1</button>

<button data-entrance="modal-scale" data-title="Zoom-in Modal". data-text="Que paso" data-btn="yes" data-btn-text="Go to Codepen" data-btn-link="codepen.io">Zoom-in Modal</button>

3.- Posteriormente a esto y muy importante tener en cuenta que este fragmento de código tiene que estar al final del archivo, el llamado al plugin y al framework jquery.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/fmodal.js"></script>

The post FModal, plugin complementario para un mensaje que ocupa toda la pantalla. appeared first on Develoteca.

Plugin BubbletrapsjQuery para implementar un juego sencillo en html5, Bootstrap y jQuery, este plugin es una demostración de un juego sencillo en donde el usuario o visitante, puede presionar un botón y el objetivo es que cuando el botón sea presionado el color este en alguna estrella con un puntaje ya sea 1 o 5.

Este plugin tiene la flexibilidad de poder crear con una colección de imágenes, puedes personalizar el plugin y crear múltiples juegos de forma diferente cambiando las opciones.

Demostración del plugin :http://oscaruhp.github.io/BubbletrapsjQuery/

La forma de utilizar es la siguiente:

1.- Primero tenemos que incluir los archivos necesarios para el plugin que en este caso son bootstrap y jQuery

   <!-- Bootstrap and JQuery -->
            <link rel="stylesheet" href="bootstrap.min.css">
            <script src="jquery-2.1.4.min.js"> </script>

            <!-- Plugin -->
            <link rel="stylesheet" href="BubbletrapsjQuery.css">
            <script src="BubbletrapsjQuery.js"></script>

2.- Posteriormente a esto tienes que poner el codigo (estructura de la siguiente forma), hay que mantener la estructura separada

 <div class="col-md-12 text-center" id="game">
      <img src="img/eb.png" alt="...">
      <img src="img/eb.png" alt="...">
      <img src="img/eb.png" alt="...">
      <h1 >
      <img src="img/1p.png" alt="...">
      <img src="img/5p.png" alt="...">
      <img src="img/1p.png" alt="...">
      </h1>
      <img src="img/eb.png" alt="...">
      <img src="img/eb.png" alt="...">
      <img src="img/eb.png" alt="...">
  </div>
<div class="col-md-12" id="reemplazo" style="display:none">
      <img src="img/em.png"  id="SelectorPuntajeNulo">
      <img src="img/eaz.png" data-points=5 id="SelectorPuntajeCentral">
      <img src="img/ev.png" data-points=1 id="SelectorPuntajeLateral" >
      <img src="img/er.png" id="SelectorVidas" >
  </div>
          <div class="col-md-12 text-center" >
      <div class="col-md-4" >Vidas:
        <h1 id="Vidas"></h1>
      </div>
      <div class="col-md-4" >
          <button type="button" id="ControlStop" class="btn btn-danger btn-lg  btn3d" style="    font-size: 29px;">
          <span class="glyphicon glyphicon-asterisk"></span> Alto  <span class="glyphicon glyphicon-asterisk"></span>
          </button>
      </div>
      <div class="col-md-4" > Puntos:
         <h1 id="puntajesJugador"></h1>
      </div>
  </div>

3.- Agregar el codigo(instancia del plugin)

$('#game').BubbletrapsjQuery();

4.- Modifica las opciones segun tu necesidad

 {
           SelectorPuntajeNulo:"#SelectorPuntajeNulo", /* Point selector null*/
           SelectorPuntajeCentral:"#SelectorPuntajeCentral", /* Selector center(5 Points) */
           SelectorpuntajesJugador:"#puntajesJugador", /* Selector (ponits game) */
           SelectorpuntajeVidas:'#SelectorVidas',/* Selector image lifes points */
           SelectorVidas:"#Vidas",/* Selector element (life points) */
           SelectorControlStop:"#ControlStop",/* Selector Stop Button */
           puntajeJugador:0,/* Point Start */
           MaximoVidas:3,/* Manimun life (Numbers)*/
		   VelocidadFichas:60,/* Time (Change item) (Number)*/
           VelocidadOrientacion:2000,/* Time (Change orientation) (Number)*/
		   sonidoFondo: new Audio('sonidos/fondo.mp3'),/* Sound Background */
           sonidoAlto : new Audio('sonidos/stop.mp3'), /* Sound Stop */
           sonidoPuntaje : new Audio('sonidos/pointCenter.mp3'), /* Sound Point */
           sonidoPuntajeNulo : new Audio('sonidos/pointnull.mp3')/* Sound Point Null */
	}

The post Plugin BubbletrapsjQuery para implementar un juego sencillo en html5, Bootstrap y jQuery appeared first on Develoteca.

3DCoverjQuery plugin para crear portadas de libros, dvd, carátulas de software con jQuery, muchas veces creamos sitios para vender productos digitales como por ejemplo: dvd, libro, juegos, etc.

Este plugin es una forma de cubrir la necesidad de presentar los productos de una forma atractiva, de forma digital, lo que hace este plugin es modificar el aspecto principal de las imágenes convirtiendo la imagen 2D en 3D usando estilos css3.

El uso de este plugin es sencillo ya que se centra en la estructura de elemento div que tiene como elemento hijo una etiqueta img.

Tienes una demostración del plugin en la siguiente dirección:http://oscaruhp.github.io/3DCoverjQuery/

La instalación se hace mediante 3 sencillos pasos.

1.- Incluir archivos del plugin

   <!-- Bootstrap and JQuery -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery-2.1.4.min.js"> </script>

    <!-- Plugin -->
    <link rel="stylesheet" href="Cover3D.css">
    <script src="Cover3D.js"></script>

2.- Crear la estructura HTML que se convertirá en la portada, frontal y tapa trasera del producto.

<div id="cover3">
    <img src="img/avengers-dvd-cover-1.jpg"/>
    </div>

3.- Crear la instancia del plugin mediante el acceso por medio del id al elemento.

   $('#cover3').CoverTresD();

Opciones, por el momento el plugin una única opción que es el color.

  { color:"#FF0" /*Border Color */}

The post 3DCoverjQuery plugin para crear portadas de libros, dvd, carátulas de software con jQuery appeared first on Develoteca.

Cubexy.js un plugin de jQuery para crear un generador de avatar y guardarlo como png, sin duda una de las etiquetas que nos permite manipular html5 son las canvas, debido a que html5 tiene mucha flexibilidad para mostrar mezclas de archivos de imágenes esta se aprovecha de tal manera que permite crear una sola imagen a partir de varias partes independientes de imágenes, una prueba de que canvas puede hacer esto es la de generar un avatar a partir de colecciones.

Con este plugin puedes crear un generador de avatares, solo tienes que conservar una estructura de acuerdo a las imagenes que quieres mezclar.

Ejemplo: http://oscaruhp.github.io/CubexyJSAvatarGenerator/

1.- Para implementar este plugin se tiene que incluir jQuery y cubexy.js de la siguiente forma:

<!-- Bootstrap and JQuery -->
<script src="jquery-2.1.4.min.js"> </script>

<!-- Plugin -->
<script src="Cubexy.js"></script>

2.- Posteriormente a esto agrega la estructura de salida del plugin (Estos elementos son para el botón descargar, el botón pre visualizar el canvas o salida y el selector de color)

<canvas width="300" height="300" id="canvas"></canvas>
<a id="Descargar">Descargar</a>
<a id="Preview">Preview</a>
<input type="hidden" id="colores"  />

3.- También tienes que colocar la lista de imágenes que quieres mezclar

<div id="avatar">

<div id="Rostro" >
<img src="1_piel/1.png"/>
</div>

<div id="Ojos">
<img src="2_Ojos/1.png"/>
<img src="2_Ojos/2.png"/>
</div>

<div id="Pelo">
<img src="4_Pelo/3.png"/>
<img src="4_Pelo/2.png"/>
</div>

<div id="Boca">
<img src="3_Boca/11.png"/>
<img src="3_Boca/12.png"/>
</div>

</div>

4.- Por ultimo colocar la instancia del plugin cubexy.js de la siguiente forma:

 $('#avatar').Cubexy();

5.- También puedes personalizar las opciones del plugin como por ejemplo los estilos y los nombres de los estilos

{idInputColor:'colores',
						 idDownload:'Descargar', /* Button Download image */
						 idPreview:'Preview', /* Button Preview image */
						 CanvasSalida:'canvas',  /* Canvas result */
						 attImagenGrande:'src', /* Big Image merge */
						 cssDefault:true, /* use css default ? */
						 cssCambioColor:'actual', /* css Color Selector */
						 cssParteActiva:'activo', /* css part Selector */
						 cssParteUnica:'seleccionado', /* css image Selector */
						 cssColorPicker:'colors' /* css Color Picker Selector */
}

The post Cubexy.js un plugin de jQuery para crear un generador de avatar y guardarlo como png appeared first on Develoteca.

ShakeBorder efectos con jQuery, gracias al uso de css3, es una de las demostraciones que se puede hacer con css3 y jQuery, sin duda el efecto que logra este plugin es el de vibrar y tener un color de borde, esto se logra con el plugin sobre una imagen con una etiqueta img  de tú codigo html.

Demo:http://oscaruhp.github.io/ShakeBorder/

La implementación es muy sencilla ya que solo tienes que hacer referencia a los elementos que deseas transformar, lo primero que tienes que hacer es referencias la librería de jQuery

1.- Incluir los archivos del plugin

<!-- Bootstrap and JQuery -->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"> </script>

<!-- Plugin -->
<link rel="stylesheet" href="ShakeBorder.css">
<script src="ShakeBorder.js"></script>

2.- Create los elementos HTML que tendrán el efecto.

<img class="ShakeAndBorder" alt="Cubexy.js" src="img/jquery-html5-avtargenerator-Cubexy.png" />

<img class="ShakeAndBorder" alt="SimpleCalculadora" src="img/jquery-bootstrap-calculator.png" />

<img class="ShakeAndBorder" alt="3dCover" src="img/jquery-css3-cover3d.jpg" />

3.- A continuación colocar el script del plugin que convertirá tú imagen y le pondrá efectos.

$('.ShakeAndBorder').ShakeBorder();

Este plugin puedes usarlo en algún portafolio o  proyecto donde presentes imágenes, también puedes agregar enlaces a esas imágenes como por ejemplo el siguiente código donde los elementos html se cambian.

<a href="http://oscaruhp.github.io/CubexyJSAvatarGenerator/">
<img class="ShakeAndBorder" alt="Cubexy.js" src="img/jquery-html5-avtargenerator-Cubexy.png" />
</a>
<a href="http://oscaruhp.github.io/SimpleCalculadora/">
<img class="ShakeAndBorder" alt="SimpleCalculadora" src="img/jquery-bootstrap-calculator.png" />
</a>

<a href="http://oscaruhp.github.io/3DCoverjQuery/">
<img class="ShakeAndBorder" alt="3dCover" src="img/jquery-css3-cover3d.jpg" />
</a>

The post ShakeBorder efectos con jQuery, gracias al uso de css3 appeared first on Develoteca.

17 Frameworks para Material Design, si estas buscando utilizar algún framework para empezar con los diseños de ultima moda “Material Design” aquí tenemos 17 frameworks para revisar, recuerda que la web siempre esta cambiando y mejorando, queremos apoyarte .

1.- Materializecss

Empezamos con materializecss que es un framework bastante flexible y muy fácil de aplicar, este framework maneja todos los componentes y elementos de Material Design como por ejemplo: cards, forms, colors, entre otros, este framework tiene documentación incluida y muy completa además que puedes encontrar ejemplos muy buenos.

http://materializecss.com/getting-started.html

http://materializecss.com/getting-started.html

2.- MDL/Dart – Material Design

Este Framework es esta realizado pensado para material design que integra la mayoria de los elementos compuestos por esta “filosofía”, este framework ofrece templates realizados como ejemplos de uso:

Enlace: http://www.material-design-lite.pub/#/button

3.- Material Design lite

Este framework a diferencia de los demas framework puede cambiar de color mediante una herramienta de selección de color, lo que este framework nos dice es: implementa css, utiliza algun template, o crealo desde cero, agrega componentes, estilos, y personaliza el color.

Enlace 1: http://www.getmdl.io/components/index.html

Enlace 2: http://www.getmdl.io/customize/index.html

4.- Material ui (Pensado para React.js)

Material UI es un framework con un set de componentes para React.js para implementar Material Design

Enlace: http://material-ui.com/#/components/date-picker

5.- LumX 

Este framework esta pensado para ser implementado con Angular.js y google Material Design, su implementación se apoya mucho de jQuery como complemento del framework.

Enlace: http://ui.lumapps.com/css/fab

6.- Material Design for Bootstrap

Este framework esta realizado para bootstrap con jQuery, si eres de las personas que les gusta utilizar bootstrap, aquí tienes este framework.

Enlace: http://fezvrasta.github.io/bootstrap-material-design/

7.- MUI Framework

MUI framework es ligero y que implementa Material Design de Google, su objetivo es ser pequeño, rápido y muy fácil de usar.

Enlace:https://www.muicss.com/docs/v1/css-js/tables

8.- Essence

La filosofía de este framework es “Créalo una vez y utilízalo muchas veces y en todos lados”, una de las principales cualidades de este framework es que en la documentación muestra ejemplos con html y con react.js, aunque algunos ejemplos están realizados completamente enfocados a react.js.

Enlace: http://essence.pearlhq.com/#

9.- Angular Material 

Angular Material es uno de los frameworks que esta enfocado al uso de angular.js, aunque la reusabilidad.

Enlace: https://material.angularjs.org/latest/#/

10.- Material CSS 

Este framework esta pensado para implementar de forma sencilla y rápida, en la documentación puedes encontrarte con varios ejemplos útiles para tu desarrollo.

Enlace: http://kearlsaint.github.io/material-css/

11.-  Material Framework 

Un framework muy bueno y sencillo, aunque carece de algunos componentes como por ejemplo “date-picker” te puede ser de gran utilidad para los desarrollos simples.

Enlace: http://nt1m.github.io/material-framework/#inputs

12.- Phonon Framework

El framework esta pensado más para los dispositivos moviles (Aunque sabemos que Google Material Design persigue la unificación de interfaces) este framework sugiere el uso con phoneGap

Enlace: http://phonon.quarkdev.com/#getting-started

13.- PaperKit (Con problemas) 

Este framework suena interesante aunque tiene fallas de implementación.

Enlace: http://paperkit.datatrends.es/learn/

14.- Framaterial (Con problemas)

Este framework aunque tiene también problemas de implementación por lo que la documentación es un poco inconsistente.

Enlace: http://framaterial.github.io/framaterial/javascript.html

15.- Surface 

Unos de los framworks más ligeros que implementa Google Material Design, las ventajas es que el framework es totalmente css, esto quiere decir que no se encontrarán complementos javascript (Todo es css hasta los efectos).

Enlace: http://iamsurface.com/docs/buttons.html

16.- Material Foundation

Framework sencillo de implementar, aunque no tiene todos los componentes Material Design que puedes requerir en un tú proyecto, hablando de proyectos un poco más elaborados.

Enlace: http://eucalyptuss.github.io/material-foundation/#

17.- Material

Framework pensado para implementar en diseños básicos, se puede notar ligeramente el descuido de los componentes input, independientemente de eso, es una solución pobre.

Enlace: http://daemonite.github.io/material/

Bueno esos son todos los frameworks con un poco de popularidad, recuerda usarlos y comentarnos.

¿Que te parecen?

The post 17 Frameworks para Material Design appeared first on Develoteca.

Corta tus contenidos con el plugin jQuery dotdotdot , un interesante plugin que nos recomienda Adriano Josué Díaz Hidalgo para implementar, la funcionalidad de este plugin se centra en mantener un contenido limpio, ya que muchas veces el contenido que esta adentro de una etiqueta se sale de los márgenes de su contenedor.

La funcionalidad que jQuery dotdotdot nos brinda puede servir en cualquier sitio web, portal, aplicación web ya que el funcionamiento es con jQuery, podemos utilizarlo en cualquier sistema realizado con php, asp.net o cualquier lenguaje de programación web que tenga que mostrar contenidos limpios.

Sin más rodeos, vamos a explicar como implementarlo:

1.- Incluir la referencia de los archivos (JQuery y jquery.dotdotdot.js)

<script src="jquery.js" type="text/javascript"></script>
	<script src="jquery.dotdotdot.js" type="text/javascript"></script>

2.- Identificar la etiqueta para hacer la referencia, en este caso:

<div id="contenido">


Lorem Ipsum is simply dummy text.

</div>

3.- Usando el plugin mediante con la referencia del elemento Contenido

$("#contenido").dotdotdot();

4.- Aplicar la configuración correspondiente.

$("#wrapper").dotdotdot({
 /* Continuación del texto*/
  ellipsis : '... ',
 
 /* Cortando el texto 'word'/'letter'/'children' */
 wrap : 'word',
 
 /* retroceder a tamaño carta */
 fallbackToLetter: true,
 
 /* Contenido que quieres poner posterior al corte */
 after : null,
 
 /* Ver puntos */
 watch : false,
 
 /* Longitud en altura (parámetro min-height css) */
 height : null,
 
 /* Tolerancia de altura. */
 tolerance : 0,
 
 /* Eventos que se pueden desencadenar una vez cortado el contenido */
 callback : function( isTruncated, orgContent ) {},
 
 lastCharacter : {
 
 /* Remover los símbolos  */
 remove : [ ' ', ',', ';', '.', '!', '?' ],
 
 /* No agregar ellipsis a un conjunto de datos (Definidos por arreglos)*/
 noEllipsis : []
 }
 });

Enlace del sitio del autor: http://dotdotdot.frebsite.nl/

The post Corta tus contenidos con el plugin jQuery dotdotdot appeared first on Develoteca.

EZ Tabs jQuery Plugin, si buscas tabs fáciles y rápidos de implementar, este es un plugin que es fácil de implementar lo que tenemos es un plugin que realiza una conversión de contenido, lo peculiar de este plugin es que tiene animación personalizada, para este plugin implementamos lo siguiente:

1.- Se incluye jQuery y eztabs

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="js/jquery.eztabs.min.js"></script>

2.- Incluimos  los archivos css

<link rel=”stylesheet” type=”text/css” href=”css/tabs.css”>

3.- Se incluye código para instanciar el efecto.

<script type="text/javascript">
$(function() {
$('.tabset').eztabs();
});
</script">

4.- Opciones, puedes usar estas opciones del plugin para modificar la instancia por default del plugin

Aquí tienes el enlace del autor: http://dcoder.eu/eztabs/

Si puedes probar el plugin puedes dejarnos tus comentarios y comentarnos que piensas.

The post EZ Tabs jQuery Plugin, si buscas tabs fáciles y rápidos de implementar appeared first on Develoteca.

Plugin clipboard.js para copiar y pegar texto, este plugin nos resuelve el problema que tenemos para copiar un texto determinado en html, el funcionamiento del plugin se basa en el uso de html5 y el potencial de esta tecnología, ademas de implementar una solución para proporcionar a los usuarios que quiere copiar cierto contenido.

En el siguiente enlace puedes ver el ejemplo: http://zenorocha.github.io/clipboard.js/ y página en github del autor del plugin.

La implemetación solo requiere un archivo js que es el que tiene el código que se encarga de crear esta funcionalidad

Este plugin también te permite crear eventos posteriores a la funcionalidad de copiado.

La implemetación basica se centra en utilizar : data-clipboard-target=“#foo”

o simplemente incluir la instancia del plugin.

The post Plugin clipboard.js para copiar y pegar texto appeared first on Develoteca.

Plugins para botones estilo Material Design – Quttons, sin duda las tendencias marcan el internet y pasamos de un diseño a otro, de un estilo a otro y la verdad es que todo esto es cambiante.

Sin duda tenemos que aprender a utilizar ciertas herramientas que le den un buen aspecto a nuestras creaciones, este plugin te ayuda a crear botones para utilizar el aspecto a material design, aunque este plugin tiene un popup integrado, que se integran durante la creación de los botones, sin duda alguna puedes cambiar de aspecto modificando el html los diferentes botones creados, puedes crear tu botón a la medida, agregándole color e imagen del icono de dicho botón.

La demostración puedes verla aquí: http://nashvail.me/Quttons/

Para la instalación se realiza lo siguiente:

Primero se crea la referencias a los archivos:

<link rel = "stylesheet" href = "Path/To/Quttons.css" />
<script src = "Path/To/jQuery" type = "text/javascript"></script>
<script src = "Path/To/velocity.js" type = "text/javascript"></script>
<script src = "Path/To/velocity.ui.js" type = "text/javascript"></script>
<script src = "Path/To/Quttons.js" type = "text/javascript"></script>

2.- El div que queremos :

<div id="uploadDialog">
    <h2>Upload a new file</h2>
        <input type="text" id = "fileUrl" placeholder = "Enter URL">
    <div id="button_basic_upload"> Choose a file to upload
    </div>
</div>

Para usarlo solo hay que agregar la parte del script:

<div class = "qutton" id = "qutton_upload">
 ...(Dialog created in previous step) ...
</div>

var quttonUpload = Qutton.getInstance($('#qutton_upload'));
quttonUpload.init({
    icon : './images/icon_upload.png',
    backgroundColor : "#917466"
});

The post Plugins para botones estilo Material Design – Quttons appeared first on Develoteca.

jQuery Puzzlecaptcha modo fácil,  hoy por hoy los bots están al orden del día, sin embargo con la técnica de captcha es posible disminuir a estos bots, para esto hay un plugin que nos ayuda a crear un captcha y con un objetivo, que es ponerle un juego al usuario para distraerse mientras resuelve el captcha, realmente la implementación se basa en el uso de imágenes para convertir en un puzzle.

http://plugins.supos.com.au/PuzzleCAPTCHA/

Código para incluir las referencias del plugin.

<script src="puzzleCAPTCHA.js"></script>

Los estilos para crear los efectos que utiliza el plugin

<link rel="stylesheet" href="puzzleCAPTCHA.css">

El script para hacer referencia  al div en donde se desea poner la referencia, en este caso se creo el div con id=”PuzzleCaptcha”

<div id="PuzzleCaptcha"></div>

Posterior a esto creamos la instancia del plugin de la siguiente forma:

<script>
    $("#PuzzleCaptcha").PuzzleCAPTCHA({
        imageURL:'http://distilleryimage2.s3.amazonaws.com/c886e1100cbe11e3a77722000a1fbc49_5.jpg'
    });
</script>

El Ejemplo funcional lo puedes ver en el siguiente enlace: http://plugins.supos.com.au/PuzzleCAPTCHA/

Puedes probarlo con diferentes imágenes.

The post jQuery Puzzlecaptcha modo fácil appeared first on Develoteca.

jQuery plugin twentytwenty un antes y después con mucho diseño, sin duda el plugin http://develoteca.com/before-y-after-con-jquery/  tenia un uso muy interesante ya que nos mostraba imágenes con el efecto antes y después, el plugin no deja de ser de gran ayuda, pero entonces viene la pregunta ¿solo ese existe?, tal vez la respuesta sea pues solo ese conozco, pero en general no significa que sea el único, por lo que existen varias alternativas, una de ellas es twentytwenty que tiene el mismo efecto de antes y despues pero con mucho estilo, veamos el ejemplo y ustedes comenten con cual se quedarían.

Paso 1.- incluir las referencias  de los scripts

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="js/jquery.event.move.js"></script>
    <script src="js/jquery.twentytwenty.js"></script>

Paso 2.- incluir los estilos

  <link href="css/foundation.css" rel="stylesheet" type="text/css" />
  <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />

Paso 3 incluir el codigo que quieres mostrar como antes y después

<div class="twentytwenty-container">
          <img src="img/1_1.jpg" />
          <img src="img/1_2.jpg" />
        </div>

Paso 4.- incluir el código que transforma el html en componente

$(window).load(function() {
  $("#container1").twentytwenty();
});

Este plugin se diferencia por controlar el efecto antes y después de forma horizontal y de forma vertical.

Puedes ver el siguiente ejemplo y el uso: http://zurb.com/playground/twentytwenty

The post jQuery plugin twentytwenty un antes y después con mucho diseño appeared first on Develoteca.

Plugin para realizar diagramas con Javascript y jQuery, seguro que alguna vez intentaste utilizar o mostrar un organigrama en web y lo terminaste creando en word, bueno pues te comentamos rápidamente que existían plugins que ya realizaban esta acción de forma iterativa y muy sencilla, este plugin tiene la facultad de mostrar la información de una jerarquía o simplemente como elementos padre e hijo pero de formas gráficas diferentes.

A continuación se presenta un ejemplo: http://fperucic.github.io/treant-js/examples/basic-example/  para el uso de un organigrama.

Tienes toda una colección para mirar las diferentes modalidades que este plugin presenta en el siguiente enlace: http://fperucic.github.io/treant-js/

Es importante mencionar que el plugin se enfoca a trabajar con información y no con el diseño, este manejo no significa que nos limitemos a crear diagramas simples, si no que también podemos modificar el diseño.

El uso es indeterminable ya que podemos adaptar las diferentes formas de presentación del plugin en cualquier parte de nuestro proyecto en general, eso significa que controlamos la manera de usar dicho plugin.

The post Plugin para realizar diagramas con Javascript y jQuery appeared first on Develoteca.

Plugin – Interactive Image, para mostrar texto encima de las imágenes,Este plugin tiene una funcionalidad que permite trabajar con elementos html que se colocan encima de una imagen, esto se hace par que el usuario pueda ver información en determinadas áreas.

Las funcionalidades que tenemos y las características son:
1. Inserte textos interactivos y las imágenes más grandes fotos
2. configuración de forma flexible
3. Fácilmente adaptable con CSS
4. Totalmente probado con CasperJS
5. Instalable a través de gestores de paquetes (inclusiones de código)

Puedes ver la demostración en el siguiente enlace: http://www.jpchateau.com/demo/interactive-image

Para empezar lo que se tiene que hacer es incluir los siguientes
Script css para mostrar la información de forma estilizada.

<link rel="stylesheet" href="/dist/jquery.interactive-image.min.css" />

Script js para poder utilizar este efecto

 
<script src="path/to/js/jquery-2.1.4.min.js"></script>
<script data-main="main" src="path/to/js/require.js"></script>
<script src="/dist/jquery.interactive-image.min.js"></script>

A continuación se usa el código que nos sirve para imagen.

<div class="interactive-image" class="interactive-image"
style="width: 900px; height: 598px; background: url('/path/to/images/image.jpg');"></div>

Código para configurar el plugin (opciones para utilizar el plugin)

// Items
var items = [{  title: "Fur",   description: "The fur of clouded leopards is of a dark grey or ochreous...",   position: {  left: 710, top: 290 }  },
    {      title: "Canines",   description: "They are often referred to as a \"modern-day saber tooth\"...",   position: {  left: 305,  top: 345  },  picture: "/path/to/images/picture.jpg"},
    {
 title: "Threats",   description: "Many of the remaining forest areas are too small to ensure...",        position: {  left: 660,top: 70 }, link: {   href: "http://www.website.org/",   label: "Website"     }}];
// Plugin configuration
var options = {    debug: true };
// Activate the plugin
$('.interactive-image').interactiveImage(items, options);

Cuentanos en donde lo aplicaste.

The post Plugin – Interactive Image, para mostrar texto encima de las imágenes appeared first on Develoteca.

Easy Tree, jerarquía para utilzar con bootstrap, este plugin esta realizado para ser usado con jQuery y bootstrap 3 , puede convertir una lista de pedidos a un árbol fácilmente.

El árbol se puede seleccionar , se puede añadir , editar y borrar.
Puedes ver el ejemplo en ejecución en la siguiente dirección: http://zgs225.github.io/easy-tree/

1.- Para el uso puedes incluir el script

 <script src="http://zgs225.github.io/easy-tree/dist/js/jquery-1.10.1.min.js"></script>
    <script src="http://zgs225.github.io/easy-tree/js/bootstrap.min.js"></script>
    <script src="http://zgs225.github.io/easy-tree/dist/js/easyTree.min.js"></script>

2.- Posterior a eso incluyes los estilos que le darán un aspecto muy vistoso.

   <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://zgs225.github.io/easy-tree/dist/css/easyTree.min.css">

3.- Una vez creadas las referencias podemos utilizar una lista para incluir en nuestra interfaz.

<div class='easy-tree'>
    <ul>
        <li>Example 1</li>
        <li>Example 2</li>
        <li>Example 3</li>
        <li>Example 4</li>
    <ul>
</div>

4.- Incluimos el script que convertirá la lista ul en un vistoso resultado, el fragmento javascript quedaría de la siguiente forma:

$('.easy-tree').EasyTree();

The post Easy Tree, jerarquía para utilzar con bootstrap appeared first on Develoteca.

jQuery Split.js para dividir contenidos html ó textos, Split.js es una utilidad ligera para crear vistas de división ajustables o paneles, la funcionalidad de este plugin viene  de la necesidad de mostrar contenido separado.

El contenido se puede separa en diferentes formas, como por ejemplo:

1.- División horizontal  (2 o más columnas)

2.- División vertical (2 o más  columnas)

3.- Subdivisiones (2 horizontales y una de la horizontal a la mitad)

Lo interesante de este plugin es que además de la división que se puede realizar, puede adaptar el contenido partido si es movido en el div el texto contenido se adaptara al tamaño puesto.

En el siguiente enlace puedes ver el ejemplo funcional:

http://nathancahill.github.io/Split.js/

Para su implementación se necesitan elementos con referencia (id o class) para poder crear el efecto con el plugin.

Vamos a seguir estos pasos:

1.- Crear los enlaces:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<script src="http://nathancahill.github.io/Split.js/split.js"></script>

2.- Crear los contenidos que serán divididos, como por ejemplo lo siguiente.

 <div id="a" class="split split-horizontal">
 <div id="c" class="split content"></div>
 <div id="d" class="split content"></div>
 </div>
 <div id="b" class="split split-horizontal">
 <div id="e" class="split content"></div>
 <div id="f" class="split content"></div>
 </div>

3.- Crear la relación hacia los elementos

 Split(['#a', '#b'], {
 gutterSize: 8,
 cursor: 'col-resize'
 })

 Split(['#c', '#d'], {
 direction: 'vertical',
 sizes: [25, 75],
 gutterSize: 8,
 cursor: 'row-resize'
 })

 Split(['#e', '#f'], {
 direction: 'vertical',
 sizes: [25, 75],
 gutterSize: 8,
 cursor: 'row-resize'
 })

Puedes descargar este plugin y comentarnos en donde lo utilizaste.

The post jQuery Split.js para dividir contenidos html ó textos appeared first on Develoteca.

Colores a imágenes con jQuery y Colorify.js, interesante plugin que modifica las imágenes y que reemplaza ciertos colores por imágenes referenciadas por el plugin, en la pagina oficial se muestran varios ejemplos donde se usan cuadros de colores donde al pasar el cursor se nota un cambio de color a imagen

Lo más interesante de este plugin es que tiene varias funcionalidades dentro de las que se mencionan la carga en espera (mientras las imágenes se cargan se muestra un cuadro de color). 

Según el sitio el plugin permite manipular los colores predeterminados que se tienen disponible, además de permitir manipular otras opciones del plugin.

1.- Para utilizarlo solo tienes que crear una referencia a los siguientes archivos:

<script src="path/to/colorify.js"></script>
<link rel="stylesheet" href="colorify.css">

2.- Crear las imagenes donde se quiere usar el efecto

<div colorify-main-color>
<img colorify src="image1.jpg">
<img colorify src="image2.jpg">
<img colorify src="image3.jpg">
</div>

3.- Crear las configuraciones necesarias para lograr el efecto deseado

colorify({
container: 'colorify-main-color',
accuracy: 10
});

Para entender un poco sobre la instalación puedes ver el sitio oficial: http://colorify.rocks/index.html#

También para un guía rápida puedes entrar al repositorio de github:https://github.com/LukyVj/Colorify.js

The post colores a imágenes con jQuery y Colorify.js appeared first on Develoteca.