Plugin para dar tours en un sitio web (Presentación de elementos), este plugin es para enseñar al usuario a navegar en un sitio web, esta presentación se hace cuando el usuario entra por primera vez a un sitio y no sabe cómo navegar en dicho sitio, esta funcionalidad es usada comúnmente en aplicaciones como facebook, google que presentan información con una pequeña “Ayuda al usuario”

Sin duda algo elegante de implementar y que ayudara a tus usuarios a conocer exactamente que hace cada elemento de tu sitio web

Llego la hora de la implementación y lo primero que tienes que hacer es descargarte el
archivo dknotus-touris de la siguiente dirección https://github.com/DKNotusIT/DKNotus-Tour e incluido en tu sitio web, es importante recordar que para usar este piugin es necesario usar bootstrap y jQuery, así que no se hace mención de su Implementación, pero esta representado en las siguientes líneas de código

1 -Archivos necesario para el funcionamiento del plugin

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

2.- Implementación elementos HTML

<div id="iteml">Contenido html 1</div>
 <div id="item2">Contenido html 1</div> 

3.- Incluir la descripción de cada elemento

$(function(){
   
      Tour.run([
        {
          element: $('#iteml'),
          content: 'by default tour is on the right'
        },
        {
          element: $('#item2'),
          content: 'but it can be on top',
          position: 'top'
        }
      ],{languaje:"es"});
       
  });

The post Plugin para tours en un sitio web(Presentación de elementos) appeared first on Develoteca.

Calificar mi sitio web con jQuery star-rating, sistema de estrellas, este plugin nos nos facilita mucho la conversión de elementos select(html) a estrellas de votación, aunque no hay mucho que decir sobre este sistema de rating podemos ver el uso en algunas plataformas que exponen películas (muy común en plataformas como netflix), sin duda la implementación se puede realizar donde tu gustes crearlo.

Puedes ver una demostración en el siguiente enlace: http://www.jqueryscript.net/demo/Dynamic-Select-Based-Rating-Plugin-For-jQuery-star-rating-js/
1.- Creando las referencias.

<link href="css/star-rating.css" rel="stylesheet">
<script src="js/star-rating.min.js"></script>

2.- Creando los elementos html a convertir (select)

<select id="star-rating">
<option value="">Select a rating</option>
<option value="5">Excellent</option>
<option value="4">Very Good</option>
<option value="3">Average</option>
<option value="2">Poor</option>
<option value="1">Terrible</option>
</select>

3.- Convirtiendo los elementos html a estrellas.

<script>
// Using vanilla javascript:
var starrating = new StarRating( document.getElementById( 'star-rating' ));
// OR - Using jQuery:
$( '#star-rating' ).starrating();
</script>

4.- Aplicando opciones de visualización

$( '#star-rating' ).starrating({
clearable : true,
initialText: "Click to Rate",
onClick : null,
showText : true,
});

Este plugin se usaría para iniciar un sistema completo de calificaciones, pues realmente faltaría guardar la calificación de cada usuario, sacar promedio y mostrar el promedio, además de eso validar que un usuario solo pueda votar una vez, lo que posiblemente incluya cookies, base de datos, promedio de calificaciones, un buen diseño e implementación repetitiva, como sugerencia puedes implementar este plugin a una clase para ahorrarte mucho trabajo.

Alternativa 2 – starrr

1.- Para esta otra opción

<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="starrr.min.js"></script>

2.- Crear elementos a convertir y agregar pequeños estilos

<style>

.starrr { display: inline-block; }

.starrr i {
font-size: 16px;
padding: 0 1px;
cursor: pointer;
color: #ffd119;
}

</style>

<div class='starrr'></div>

<script>
$('.starrr').starrr();
</script>

The post Calificar mi sitio web con jQuery star-rating, sistema de estrellas. appeared first on Develoteca.

Plugin para convertir radios html a slider html, este simple pero poderoso plugin realizado con jQuery te ayudara a presentar tu proyecto con un toque visual y muy interesante en los elementos radio html ,te explicamos como aplicarlo a tu proyecto de forma rápida y efectiva.

Para la implementación de este plugin se necesitan los elementos radio de html, es decir los input que tienen la propiedad type=”radio”, a continuación te mostramos un ejemplo de esta etiqueta html que tiene como valor del id option1:

 <input id="option1" name="options" type="radio">

Una vez que conoces los elementos a los que les puedes aplicar este cambio visual te mostramos la implementación de este plugin que consta de unos simples pasos que serán descritos en la siguiente lista:

1.- Incluir jQuery que es el framework que utilizaremos en nuestro archivo.

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

2.- Incluir archivos css que vendrá en la carpeta del plugin.

<link rel="stylesheet" type="text/css" href="css/radios-to-slider.css" />

3.- Incluir el archivo js que también vendrá en la carpeta del plugin.

<script type="text/javascript" src="js/jquery.radios-to-slider.js"></script>

4.- Crear los elementos html que se convertirán el slider.

<div id="radios">
 <input id="option1" name="options" type="radio">
 <label for="option1">1 year</label>
 <input id="option2" name="options" type="radio">
 <label for="option2">2 years</label>
 <input id="option3" name="options" type="radio" checked>
 <label for="option3">3 years</label>
 <input id="option4" name="options" type="radio">
 <label for="option4">4 years</label>
 <input id="option5" name="options" type="radio">
 <label for="option5">5+ years</label>
</div>

5.- Crear la referencia para convertir los elementos radio html en slider.

$('#radios').radiosToSlider();

En conclusión podemos decir que el plugin realiza un cambio visual que te tomaría muchas horas en construir si lo hicieras desde cero, por otra parte este plugin esta limitado en el diseño visual ya que se presenta de un solo color y una sola forma, nada que no se pueda modificar con los estilos.

Si consideras usar este plugin cuéntanos donde lo usaste.

The post Plugin para convertir radios html a slider html appeared first on Develoteca.

jQuery minicolors para convertir tus elementos input html en pickers de color, con solo unas cuantas lineas de código, esto le pondrá un toque especial a tus proyectos.

1.- Como primer paso tendremos que crear un archivo HTML e incluiremos el CDN de jQuery (https://code.jquery.com/jquery-3.2.1.js) y los archivos del plugin, tanto el archivo jquery.mincolors.js como el archivo jquery.mincolors.css, archivos que encontraras en la descarga de este plugin en la parte de arriba de este artículo.

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

2.- Como segundo paso crearemos los elementos HTML input para convertirlos en elementos selectores de color con la ayuda de jQuery minicolors, en este código utilizaremos 4 elementos ( 2 tipo text y 2 tipo hidden), además le pondremos valores iniciales a los inputs utilizando colores de inicio de selección, le pondremos nombre y un valor id.

<br/>
Inline en campo hidden (hex):<br/>
<input type="hidden" value="#0088cc" name="color0" id="c0"/>
<br/>
En campo hidden(hex):<br/>
<input type="hidden" value="#0088cc" name="color1" id="c1"/>
<br/>
En campo texto(hex):<br/>
<input type="text" value="#0088cc" name="color2" id="c2"/>
<br/>
En campo texto(rgb):<br/>
<input type="text" value="#0088cc" name="color3" id="c3"/>
<br/>

3.- Para el primer elemento html input, utilizaremos la referencia hacia el elemento html usando el id, incluiremos también un parámetro de configuración, en el caso de querer mostrar un pequeño cuadrado de color simplemente tienes que hacer referencia a un elemento hidden, puedes también incluir opciones en el plugin, basta con agregar entre llaves los valores requeridos, en este caso podrías consultar el final de la página que se encuentra en el siguiente enlace: http://labs.abeautifulsite.net/jquery-minicolors/#download 

 <script>
 $('#c0').minicolors({ inline:true});
 $('#c1').minicolors();
 $('#c2').minicolors({ animationEasing: 'swing'});
 $('#c3').minicolors({format: 'rgb'});
 </script>

Final de la implementación:

The post jQuery minicolors para convertir tus elementos input html en pickers de color appeared first on Develoteca.

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.

Gmaps jQuery un plugin para mostrar ubicaciones en tu sitio web es un ligero complemento jQuery que facilita la incorporación de Google Maps personalizable en la página web mediante los atributos de datos HTML y la API JavaScript de Google Maps.

Este plugin elimina mucha frustración cuando empezamos a trabajar con los mapas de google pues la api de google maps requiere de un conocimiento muy fuerte de JavaScript.

Este plugin tiene la facultad de convertir etiquetas HTML sin tener que trabajar tanto con JavaScript en la parte de configuración, este plugin soporta las siguientes características:

1. Marcadores personalizados.
2. Controles personalizados.
3. Estilos personalizados.
4. Permite activar / desactivar los eventos draggable, mousewheel y doubleclick.
5. Permite múltiples mapas de Google en una página.

Para implementar este plugin es importante usar los siguiente fragmentos de código:

1.- Incluir el código de jQuery y el plugin gmaps

 <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
 <link href="jquery.gmaps.css" rel="stylesheet" />
 <script src="js/jquery.gmaps.js"></script>

2.- Incluir una etiqueta HTML div con el siguiente formato:

<div data-key="AIzaSyDwNBXmHBDQ29JWsRH8gwNVkf7mM0-flaI"
data-control-zoom="true"
data-control-type="true"
data-control-scale="true"
data-control-streetview="true"
data-control-rotate="true"
data-event-mousewheel="true"

data-zoom="14" role="map" class="gmaps">

<!-- items de ubicaciones -->

</div>

3.- Integra los datos de ubicación a la etiqueta principal, esto se debe de realiza de la siguiente forma:

<div data-key="AIzaSyDwNBXmHBDQ29JWsRH8gwNVkf7mM0-flaI"
data-control-zoom="true"
data-control-type="true"
data-control-scale="true"
data-control-streetview="true"
data-control-rotate="true"
data-event-mousewheel="true"

data-zoom="14" role="map" class="gmaps">

<!-- items de ubicaciones -->

<div
data-id="1"
data-lat="-20.363"
data-lng="111.044"
class="marker">
<div class="map-card">
<h1>This is my title 1</h1>
<p>Address: Fake street, #445, Stgo.</p>
<p>Phone: +56753223344</p>
<p>e-Mail: fake1@email.com</p>
</div>
</div>

<div
data-id="2"
data-lat="-21.363"
data-lng="121.044"
class="marker">
<div class="map-card">
<h1>This is my title 2</h1>
<p>Address: Fake street, #445, Stgo.</p>
<p>Phone: +56753223344</p>
<p>e-Mail: fake2@email.com</p>
</div>
</div>

<div
data-id="3"
data-lat="-25.363"
data-lng="131.044"
class="marker">
<div class="map-card">
<h1>This is my title 3</h1>
<p>Address: Fake street, #445, Stgo.</p>
<p>Phone: +56753223344</p>
<p>e-Mail: fake3@email.com</p>
</div>
</div>
<!-- fin datos de ubicación -->

</div>

Paso 4.- Crea la referencia del plugin mediante el siguiente código:

$(document).ready(function () {
$('.gmaps').gmaps();
});

Paso 5.- Agregar estilos para especificar tamaños de pantalla:

<style>

.gmaps {
height:500px;
width: 100%;
}
</style>

El resultado debe de ser este:

Esto es para indicar la apiKey de Google maps, si tienes dudas pues ver este video: https://youtu.be/kC4KqQJJY0o?t=3m5s

The post Gmaps jQuery un plugin para mostrar ubicaciones en tu sitio web 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 ayudan 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.

Interesante utilidad que nos muestra un menú cuando presionamos la tecla control, en muchas ocasiones esta funcionalidad puede ayudarnos a cubrir una necesidad de acceso que no esta a la  vista.

Nos puede servir de gran ayuda a controlar mucho más funcionalidades de una aplicación web.

Demo: http://www.alexcheuk.com/hovermenu/

The post jQuery Hovermenu Master, menú con gran diseño, funciona presionando la tecla control appeared first on Develoteca.

Nos encanta siempre estar a la “moda” y tener mucho que mostrar al usuario final, pues este pop-up es parte de esa experiencia que podemos darle a nuestros usuarios.

Creo que la parte importante de este plugin es le manejo que tiene con los diferentes tipos de contenidos como el vídeo,iframe, etc.. , como podemos apreciar en el siguiente link : http://thomasgrauer.com/popeasy/, maneja una tabla de opciones muy interesante en la que podemos encontrar:

•  animationSpeed
• resizeWindow
•  moveOnScroll

Ademas se pueden usar múltiples pop-up.

The post Una buena impresión al usuario, con un pop-up muy elegante appeared first on Develoteca.

Plugin BootstrapDialog, para una presentación especializada, en estos días no es suficiente tener una implementación utilizando la misma caja de dialogo sin ninguna opción adicional, con BootstrapDialog puedes tener muchas alternativas a la presentación de los datos en una caja de dialogo (utilizando bootstrap) se puede utilizar de manera tradicional, las instancias de los elementos de javascript que permiten mejorar la presentación de información relevante.

Bueno a continuación se presenta un desglose de las cajas de dialogo que puede manejar este plugin, en las que incluye.

• Simple, de manera tradicional y muy simple de usar (Para presentar información de manera tradicional)
• Dialog Title (incluye titulo en las cajas de dialogo)
• Manipulating Dialog Title (son para modificar mediante acciones los títulos de los diálogos, se puede usar en procesos)
• Manipulating Dialog Message (Con una manipulación mas directa al contenido de la caja de dialogo)
• Buttons (Con botones personalizados)
• Manipulating Buttons (Manipulación de botones en las caja de dialogo, muy bueno para las configuraciones )
• Button Hotkey (Para manejar eventos en botones)
• Keys Conflicts (Para el manejo y detección de teclas )
• Creating dialog instances (Para la creación de múltiples cajas de dialogo)
• Open / Close multiple dialogs (Para abrir y cerrar muchas cajas de dialogo, esto puede servir para una serie de avisos en un sistema).
• Dialog Draggable (para mover la caja de dialogo a través del sistema).

Son muchas las opciones que te puedes encontrar utilizando este elegante y profesional caja de dialogo.

http://nakupanda.github.io/bootstrap3-dialog/

Recuerda que posiblemente encuentres este plugin muy interesante para implementar en tu sistema, sitio, o proyecto, pero no olvides descargar el ejemplo para analizar primero si es lo que buscabas.

The post Plugin BootstrapDialog, para una presentación especializada appeared first on Develoteca.

modales para llamara la atención en la interfaz del usuario, anno.js es una gran plugin ya que tiene como objetivo mostrar contenido en todo una aplicación o sitio mostrando un modal y mostrando solo un determinado contenido, lo interesante de este plugin es que muestra información dependiendo del id referenciado en el código, este plugin te permite cambiar el tamaño del modal presentado mediante los atributos “position:”, ademas que te permite implementar mucho más modales que podrían ser implementados en una bienvenida, al igual que otros códigos te permite generar botones de siguiente y atrás, con le objetivo de poder generar también un wizard de aplicaciones.

El plugin cuenta con los siguientes ejemplos:

1.- Uso básico.
2.- Posición y tamaño del modal.
3.- Botones en el modal.
4.- Mostrar y ocultar.
5.- Modal en Botstrap Modal.
6.- Modal dentro de un los scroll.
7.- Modificación de evento.

Por ejemplo en uno de los códigos se puede ver el manejo de contenido html dentro del modal:

var anno9 = new Anno({
  target: '#region9',
  content: "<code>#button1</code> is disabled, but <code>#button2</code> still works.",
  className: 'anno-width-400',
  onShow: function (anno, $target, $annoElem) {
    var handler = function(e){
      if(e.target.id === 'button1') e.stopPropagation() // filters out #button1
    }
    $target[0].addEventListener('click', handler, true) // `true` is essential
    return handler
  },
  onHide: function(anno, $target, $annoElem, handler) {
    $target[0].removeEventListener('click', handler, true)
  }
})

Aquí en este enlace, puedes encontrarte con mucho más ejemplos:http://iamdanfox.github.io/anno.js/

The post modales para llamara la atención en la interfaz del usuario anno.js appeared first on Develoteca.

jQuery Flip efecto muy llamativo, este efecto te puede servir para mostrar contenido en la parte trasera de un elemento html y lograr por ejemplos mostrar una pequeña descripción con un efecto.

En la siguiente dirección te puedes encontrar un ejemplo:http://nnattawat.github.io/flip/ de como quedaría el efecto de este plugin.

La implementación se guía de 3 pasos en concreto:

1.- Incluye los archivo necesarios (Plugin y jQuery) 

<script src="https://code.jquery.com/jquery-2.1.4.min.js">
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js">

2.-El HTML que quieres manipular con el flip front y back.

<div id="card"> 
<div class="front"> 
     Front content
   </div>
<div class="back">
     Back content
  </div>
</div>

3.- Posterior a esto el script de jQuery que permite lograr ese efecto

$("#card").flip();

4.- Agrega las opciones del plugin necesarios como por ejemplo:
a).- Efecto a hacer clic en el elemento HTML
b).- Efecto al pasar el mouse sobre el elemento HTML.
c).- Efecto controlado con botones HTML.
d).- Efecto de movimiento: eje x ó eje y

Este plugin es muy recomendable para usar en un portafolio, en una galería de imágenes o simplemente en algún elemento HTML que quieres resaltar.

The post jQuery Flip efecto muy llamativo appeared first on Develoteca.

Botones animados y elegantes para tú sitio web con jQuery, hoy en día existen botones para todo tipo de interacciones como por ejemplo: para descargar, archivar, bloquear, buscar, remover, para guardar entre otros.

Pues bien “loda button” es un plugin que tiene como finalidad presentar botones con animación, a este plugin no le encontramos ninguna utilidad en cuanto a problemas cotidianos, sin embargo este plugin puede darle una perspectiva diferente a los botones tradicionales.

La forma de usarlos es muy sencilla simplemente con este código :

<div><!-- Agrega las direcciones de style.css y loda-button.css--></div>
<div id="LC6"><link rel="stylesheet" href="../loda-button.css" /></div>
<div></div>
<!--Usa los diferentes llamados-->

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-lock"></span>
 Lock
 </a>

<a href = "#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-drawer"></span> Archive
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-upload"></span> Upload
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-download"></span> Download
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-connection"></span> Connect
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-user"></span> User
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-search"></span> Search
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-phone"></span>
 Phone
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-star"></span>
 Star
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-remove"></span>
 Remove
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-mail"></span>
 Mail
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-flickr"></span>
 Flickr
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-share"></span>
 Share
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-file-pdf"></span>
 PDF
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-disk"></span>
 Save
 </a>

Demostración: http://lugolabs.com/blog/2013/06/23/loda-button

The post Botones animados elegantes para tú sitio web appeared first on Develoteca.

Hoy la necesidad de crear sitios para todo dispositivo ha sido de alguna manera esencial en el Internet ya que hoy por hoy nuestros sitios son visitados en su mayoría por dispositivos móviles como el iPad y otros dispositivos táctiles es por eso que en esta nota les quiero comentar sobre : http://eightmedia.github.io/hammer.js/ y una demostración de :http://stereobit.github.io/dragend/ que son sitios donde se muestra el uso de esta excelente librería hecha en jQuery, muy fácil de usar y nos brinda un potencial muy bueno a la hora de tener que crear un sitio para dispositivos táctiles .

The post Mi sitio touch con Hammer JS appeared first on Develoteca.