En este artículo vamos a crear un Timeline gracias al plugin llamado Timeline jQuery, en el siguiente enlace puedes ver el ejemplo: https://ilkeryilmaz.github.io/timelinejs/ de lo que estamos a punto de implementar no es una conversión de elementos HTML .

1.-Crea las referencias a los archivos necesarios para la utilizanción del plugin

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="dist/js/timeline.min.js"></script>
<link rel="stylesheet" href="dist/css/timeline.min.css" />

2.- Crea la estructura HTML para convertie en un TimeLine

<div class="timeline-container timeline-theme-1">
<div class="timeline js-timeline">
<div data-time="2017">
your content or markup
</div>
<div data-time="2016">
your content or markup
</div>
<div data-time="2015">
your content or markup
</div>
<div data-time="2014">
your content or markup
</div>
<div data-time="2013">
your content or markup
</div>
</div>
</div>

3.-Crea la referencia con JQuery para los elementos HTML

$('.js-timeline').Timeline();

The post Mostrar tiempo con Timeline en jQuery appeared first on Develoteca.

Creando código QR con imagen, el plugin es QArt.js, un código QR (del inglés Quick Response code, “código de respuesta rápida”) es la evolución del código de barras, esta código es muy útil y usado en dispositivos móviles, en sitios web y además en proyecto de escritorio.

QArt.js es una biblioteca JavaScript que fusiona imágenes y códigos QR para códigos QR artísticos. Se puede utilizar como componente en el siguiente enlace puedes ver un ejemplo de implemetación: https://kciter.github.io/qart.js/ .

Su resultado que plugin QArt.js es como se ve en la siguiente imagen:

Este resultado se genera gracias a que se une la información de una imagen con un código QR tradicional.

Pasos para usar el plugin.

1.- Tienes que incluir jQuery, el plugin.

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/qartjs/1.0.2/qart.min.js"></script>

2.- Crear el elemento donde se mostrará la imagen final “Código QR”.

<div id="codigoQR"></div>

3.- Crear el script para convertir una imagen y un texto en código QR.

<script>
$( document ).ready(function() {
new QArt({
value: "http://develoteca.com",
imagePath: "imagen.jpg",
filter: 'color',
size: 195
}).make(document.getElementById('codigoQR'));
});</script>

The post Creando código QR con imagen, el plugin es QArt.js appeared first on Develoteca.

Agregar mapa a proyecto web con JQuery Location Picker y Bootstrap, este plugin permite encontrar y seleccionar fácilmente una ubicación en el mapa de Google,  permite elegir un área proporcionando su centro y el radio.

Todos los datos se pueden guardar en cualquier elemento de entrada de HTML automáticamente, así como ser procesados ​​por Javascript (soporte de devolución de llamada).

La otra característica del plug-in es la resolución automática de direcciones que permite obtener la línea de dirección desde la latitud y la longitud seleccionadas, agregando un buscador que permite esta localización “autocompletar de la API de Google”.

Para ver más sobre este plugin te dejamos el enlace del autor: http://logicify.github.io/jquery-locationpicker-plugin/ 
El plug-in actualmente utiliza JQuery y Google Maps y para implementar este plugin solo necesitamos modificar algunos aspectos del plugin (en este caso ponerlo como un modal), vamos a hacerlo.

1.- Incluir los scripts que permiten crear el modal y trabajar de forma rápida con el plugin, como es el caso de jQuery

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"/>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

2.-  Incluiremos el plugin y el enlace de google que recibe con parámetros la api key de google api

<script type="text/javascript" src='https://maps.google.com/maps/api/js?sensor=false&libraries=places&key=API_KEY'></script>
<script src="locationpicker.jquery.min.js"></script>

3.- Agregar el código del modal para bootstrap (Incluiremos código ya implementado y que no esta incluido en la documentación).

<div class="modal fade" id="ModalMap" tabindex="-1" role="dialog" >
<style>.pac-container { z-index: 99999; }</style>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Ubicación:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="ModalMap-address" />
</div>
<div class="col-sm-1">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
</div>
<div id="ModalMapPreview" style="width: 100%; height: 400px;"></div>
<div class="clearfix">&nbsp;</div>
<div class="m-t-small">
<label class="p-r-small col-sm-1 control-label">Lat.:</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="ModalMap-lat" />
</div>
<label class="p-r-small col-sm-2 control-label">Long.:</label>

<div class="col-sm-3">
<input type="text" class="form-control" id="ModalMap-lon" />
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-primary btn-block" data-dismiss="modal" >Aceptar</button>
</div>

</div>
<div class="clearfix"></div>
<script>
$('#ModalMapPreview').locationpicker({
radius: 0,
location: {
latitude: 20.938297181414647,
longitude: -89.61501516379462
},
inputBinding: {
latitudeInput: $('#ModalMap-lat'),
longitudeInput: $('#ModalMap-lon'),
locationNameInput: $('#ModalMap-address')
},
enableAutocomplete: true,
onchanged: function (currentLocation, radius, isMarkerDropped) {
$('#ubicacion').html($('#ModalMap-address').val());
}
});
$('#ModalMap').on('shown.bs.modal', function () {
$('#ModalMapPreview').locationpicker('autosize');
});
</script>
</div>
</div>
</div>
</div>

4.- Incluiremos el código del botón que activa el modal (puedes poner el botón donde gustes).

<button type="button" data-toggle="modal" data-target="#ModalMap" class="btn btn-default">
<span class="glyphicon glyphicon-map-marker"></span> <span id="ubicacion">Seleccionar Ubicación:</span>
</button>

The post Agregar mapa a proyecto web con JQuery Location Picker y Bootstrap appeared first on Develoteca.

ClockPicker para campos de entrada con Bootstrap y jQuery, muchas veces tenemos que implementar un campo de entrada en HTML y necesitamos solicitar una hora determinada, es aquí donde entra este plugin llamado ClockPicker que funciona como un reloj seleccionador de hora, este se anexa a lado del input, donde el usuario puede dar clic y seleccionar una hora.

A continuación te mostramos la implementación:

Utilizando Bootstrap, jQuery.

Paso 1. – Necesitas incluir jQuery en tu proyecto (esto es esencial)

  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 

Paso 2. – Si usas Bootstrap incluir el Framework.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Paso 3.- Incluir los archivos siguientes, que son los del plugin (Están en el botón de descarga):

 <link href="clockpicker.css" rel="stylesheet" />
 <script src="clockpicker.js"></script>
 <link href="bootstrap-clockpicker.css" rel="stylesheet" />

Paso 4.- Crear un elemento HTML tipo Input con las siguiente característica.

 <div class="input-group clockpicker " data-autoclose="true">
 <span class="input-group-addon">
 <span class="glyphicon glyphicon-time"></span>
 </span>
 <input type="text" class="form-control" value="09:30" />
 </div>

Paso 5.- Crear el script que transforma el input en un reloj.

 $('.clockpicker').clockpicker();

Utilizando jQuery sin Bootstrap.

Paso 1. – Necesitas incluir jQuery en tu proyecto (esto es esencial)

  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 

Paso 2. – Si no usas Bootstrap incluye este archivo

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

Paso 3.- Incluir los archivos siguientes, que son los del plugin (Están en el botón de descarga):

 <link href="clockpicker.css" rel="stylesheet" />
 <script src="clockpicker.js"></script>
 

Paso 4.- Crear un elemento HTML tipo Input con las siguiente característica.

 <div class="input-group clockpicker " data-autoclose="true">
 <span class="input-group-addon">
 <span class="glyphicon glyphicon-time"></span>
 </span>
 <input type="text" class="form-control" value="09:30" />
 </div>

Paso 5.- Crear el script que transforma el input en un reloj.

 $('.clockpicker').clockpicker();

En la siguiente dirección puedes ver el ejemplo: https://weareoutman.github.io/clockpicker/  y también puedes ver otras opciones.

The post ClockPicker para campos de entrada con Bootstrap y jQuery appeared first on Develoteca.

Hoy por hoy el diseño y desarrollo de una aplicación web toma tiempo y muchas veces buscamos alternativas para disminuir este tiempo, una de la soluciones factibles son los famosos “templates”.

Los templates nos ayuden a disminuir tiempo y esfuerzo logrando un buen resultado, en este artículo te encontraras los 7 templates Bootstrap para aplicaciones web administrativas que puedes usar en tus proyectos web.

Número 1.- Gentella

https://colorlib.com/polygon/gentelella/index.html

Este template esta realizado con bootstrap, su color es azul con verde y cuenta con varios componentes para mostrar gráficos en diferentes formatos, mapas, calendario entre otras opciones, la plantilla cuenta también con varias versiones para los diferentes frameworks, entre los que destacan las siguientes:

• Ruby on Rails
• Smarty
• Yii framework 2
• Angular 2
• Laravel PHP
• Django
• CakePHP

Esta plantilla está bajo la Licencia MIT (MIT). Lo que significa que se puede usar, copiar, modificar, fusionar, publicar, distribuir, sublicenciar y / o vender copias. Pero siempre debes de indicar que Colorlib es el autor original de esta plantilla.

Número 2.- Metis

https://colorlib.com/polygon/metis/dashboard.html

Este template administrativo tiene una apariencia mucho más seria, aunque uno de sus principales elementos es el cambio de color que se puede implementar en el template. Los componentes que maneja este template pueden ser de gran utilidad en tus aplcaiciones web, además este template maneja diferentes elementos como son las tablas, formularios, calendarios, estadísticas, estilos para mapas y validaciones de formularios muy atractivos.

Número 3.- Lumino

            https://medialoot.com/preview/frame/lumino.html

Es un template gratuito que tiene un diseño flat, un poco más amigable, el tono del template es azul y tiene de igual forma varios complementos como son: gráficas de barras, formularios, listas, entre otros. Aunque la plantilla no muestra ejemplos de implementaciones tan completo como esperamos, este template te puede servir para aplicaciones muy sencillas que requieren un alto nivel de atracción visual.

Número 4.- DashGum

http://www.blacktie.co/demo/dashgum/

Este template es de color amarillo, tiene un toque minimalista y al parecer el template está realizado para los sistemas que realizan la administración de un sistema de ventas en línea o para los sistemas que gestionan portafolios, el único detalle de este template es que no tiene la opción de modificar dicho color, si sabes de estilos y css podrás cambiarle de color y tendrás una excelente plantilla web.

Número 5.- SB admin 2

https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html

Este template proviene de startbootstrap y es muy popular, su color es gris con blanco, tiene la mayoría de los complementos web necesarios para una aplicación, sin embargo el template carece de un calendario como demostración aunque si en algún momento lo requieres podrías  implementar el plugin llamado fullcalendar,

El template tiene demostración de tablas, formularios, paneles, botones entre otros elementos.

Número 6.- Hierapolis

http://lab2023.github.io/hierapolis/dashboard.html

Este template tiene un diseño diferente a los templates administrativos tradicionales, la diferencia está en el menú lateral izquierdo y los componentes html, el template es un muy sencillo por lo que podrías usarlo en un sistema web pequeño, el template tiene gráficos, formularios, tablas, mensajes, sección de perfil y una fantástica opción de configuración, algo muy peculiar que tiene este template es que sus tablas están preparadas para eliminar, ver y modificar registros en una tabla, por lo que si tu sistema gestiona tablas de las bases de datos esto te será de gran ayuda.

Número 7.- ace Admin

http://ace.jeka.by/

Uno de los templates gratuitos más completos que hay en la web, tiene muchos componentes como son: Gráficos, botones muy completos en cuanto a tamaños y formas, tablas con un muy diseño, además tiene una demostración de altas, bajas y cambios que incluye modales para solicitar datos al usuario. Tiene listados para selector de archivos, calendarios de picker, modales con jQuery UI, listas drag and drop, diferentes layouts, elementos como botones, paneles, tabs, sliders, formularios con varios controles incluidos el selector multiple, lista doble, tags, elementos wizard, Wysiwyg con diferentes opciones, plugin para adjuntar archivos, widgets múltiples, calendarios con funciones drag and drop, galerías, páginas de perfil de usuario, inbox, tablas de precios, entre otras.

Está disponible en varios colores dándonos la posibilidad de implementarlo en un proyecto web.

Si conoces otro template gratuito puedes comentar en la caja de abajo, si este artículo  te ha gustado no olvides en darle me gusta y compartirlo en las redes sociales.

The post Los 7 templates gratuitos de Bootstrap para aplicaciones web administrativas appeared first on Develoteca.

Crear una ruleta html5 para un valor aleatorio también conocido como winwheel, esta interesante librería puede crear una ruleta para poner diferentes elementos como son nombres de personas, nombres de equipos, retos, etc.

El detalle con esta librería es que hay que saberlo implementar, modificar y adaptar a tus necesidades, el siguiente enlace es del autor de la librería y en ella se encuentra muy buena documentación y ejemplo de uso: http://dougtesting.net/winwheel/docs

Una de las principales cualidades son los segmentos que son la parte fundamental de la creación de la ruleta, a continuación te explicamos cómo crear una ruleta simple.

Si quieres una implementación, puedes hacerlo en el siguiente enlace: https://oscaruhp.github.io/Laruleta/
1.- Como primer paso tienes que agregar los archivos js que están adjuntos a este artículo.

<script src="Winwheel.js"></script>
 <script src="TweenMax.min.js"></script>

2.- Crea los elementos que controlan y muestran la ruleta.

<input type="button" value="Girar" onclick="miRuleta.startAnimation();" />
 <br />
 <br />
 <canvas id='canvas' height="400" width="400"></canvas>

3.- Configura el script de la ruleta.

var miRuleta = new Winwheel({
           'numSegments': 5, // Número de segmentos
           'outerRadius'    : 170, // Radio externo
            'segments':[ // Datos de los segmentos
                { 'fillStyle': '#f1c40f', 'text': 'CSharp' },
                { 'fillStyle': '#2ecc71', 'text': 'JavaScript' },
                { 'fillStyle': '#e67e22', 'text': 'Python' },
                { 'fillStyle': '#e74c3c', 'text': 'Php' },
                { 'fillStyle': '#8e44ad', 'text': 'Go' },
            ],
            'animation': { 
                'type': 'spinToStop', // Giro y alto
                'duration': 5, // Duración de giro
                'callbackFinished': 'Mensaje()', // Función para mostrar mensaje
                'callbackAfter': 'dibujarIndicador()' // Funciona de pintar indicador
            }
         });

4.- Crea las funcionas del indicador y la función de mensaje de la ruleta.

// Funciones complementarias 
dibujarIndicador();
       function Mensaje() {
           var SegmentoSeleccionado = miRuleta.getIndicatedSegment();
           alert("Elemento seleccionado:" + SegmentoSeleccionado.text + "!");
           miRuleta.stopAnimation(false);
           miRuleta.rotationAngle = 0;
           miRuleta.draw();
           dibujarIndicador();
       }
       function dibujarIndicador() {
            var ctx = miRuleta.ctx;
            ctx.strokeStyle = 'navy';     
            ctx.fillStyle = 'black';     
            ctx.lineWidth = 2;
            ctx.beginPath();             
            ctx.moveTo(170, 0);          
            ctx.lineTo(230, 0);          
            ctx.lineTo(200, 40);
            ctx.lineTo(171, 0);
            ctx.stroke();                
            ctx.fill();                  
       }

The post Crear una ruleta html5 para rifar cosas, también conocido como winwheel appeared first on Develoteca.

Fancy Box es un plugin jQuery que está basado en FancyBox, en esta versión del plugin se agregan las siguientes cualidades:

• Diseño responsive
• Presentación tipo slider
• Esquinas redondeadas
• Opciones extras para personalizar el Lightbox
• Soporta el MouseWheel y el teclado para pasar de imagen a imagen
• Soporta la mayoría de los contenidos como HTML,text,Ajax,Iframe, Videos, ademas de imágenes.
• Está probado para :IE7/8/9/10, Chrome, firefox, safari, opera, etc.

Demostración: https://oscaruhp.github.io/FancyBoxClone/ 

Para usar el plugin se hace de la siguiente forma:

1.- Incluir los scripts de jQuery, el plugin de fancybox

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="js/jquery.fancybox.js"></script>
 <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen" />

2.- Crear el grupo de imágenes y agregarles la clase fancybox, como se hace en el siguiente código

  <a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Imagen 1">
<img src="1_s.jpg" alt="" />
</a> 
    <a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Imagen 2">
<img src="2_s.jpg" alt="" />
</a> 
    <a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Imagen 3">
<img src="3_s.jpg" alt="" />
</a>

3.- Llama a la función de conversión de JQuery con el siguiente script:

 <script> $(document).ready(function() {
            $('.fancybox').fancybox();

    });
 </script>

4.- Agrega características adicionales, como se muestra en el siguiente fragmento:

 <script>
$(document).ready(function() {
            $('.fancybox').fancybox({ keyboard : true });

    });
</script>

The post Galería responsive en HTML con FancyBox 2, css3 y jQuery appeared first on Develoteca.

Handsontable tablas con javascritpt, jquery, angular.js al estilo excel, este plugin tiene la facilidad de mostrarnos la información mediante tablas similares a la funcionalidad que tiene las hojas de excel.

Este plugin tiene compatibilidad con backbone.js, jquery, bootstrap, raphael.js y angular.js, además tiene compatibilidad con:

1.- Ajax

2.- Trabaja conjuntamente con datos en formato json

3.- Tiene eventos que permiten realizar operaciones entre celdas.

4.- Aplica propiedades a celdas.

5.- Maneja tipos de celdas (Ejem. numérica, fecha, checkbox, select, dropdown, auto complementario,password).

6.- Permite tener el control del documento con el teclado.

7.- Maneja validaciones entre celdas.

8.- Permite la búsqueda de palabras entre las celdas.

La integración puedes encontrarla en el siguiente enlace:
Cell types: http://handsontable.com/demo/renderers.html

Validación: http://handsontable.com/demo/validation.html

Fecha: http://handsontable.com/demo/date.html

http://handsontable.com/

Para incluir está librería, simplemente hay que agregar el siguiente código.

Vamos a crear unas cuantas líneas, primero integramos lo que son las dependencias:

 <script src="handsontable/lib/jquery.min.js"></script>  <script src="handsontable/dist/handsontable.full.js"></script>  <link rel="stylesheet" media="screen" href="handsontable/dist/handsontable.full.css">

Posteriormente el siguiente código:

function getData() {
return [
["", "Kia", "Nissan", "Toyota", "Honda"],
["2008", 10, 11, 12, 13],
["2009", 20, 11, 14, 13],
["2010", 30, 15, 12, 13]
];
}
// Instead of creating a new Handsontable instance with the container element passed as an argument,
// you can simply call .handsontable method on a jQuery DOM object.
var $container = $("#hot");
$container.handsontable({
data: getData(),
startRows: 5,
startCols: 5,
minRows: 5,
minCols: 5,
maxRows: 10,
maxCols: 10,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true
});
// This way, you can access Handsontable api methods by passing their names as an argument, e.g.:
var hotInstance = $("#hot").handsontable('getInstance');

The post Handsontable tablas con javascritpt, jquery, angular.js al estilo excel appeared first on Develoteca.