Craftyman Blog » JQuery http://craftyman.net Redes Sociales, WordPress, Desarrollo Web, SEO Wed, 01 Feb 2012 00:57:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Drag and Drop + Cookies con jQuery http://craftyman.net/drag-and-drop-cookies-con-jquery/ http://craftyman.net/drag-and-drop-cookies-con-jquery/#comments Thu, 17 Feb 2011 01:06:27 +0000 craftyman http://craftyman.net/?p=1258 (drag and drop) es una manera de personalizar el orden de módulos específicos de una pagina, ordenar una fila de registros entre otras cosas mas. Centrándonos en el concepto de la Web 2.0 esta es una funcionalidad indispensable para brindar personalización a nuestros usuarios.
En este tutorial implementaremos el Drag and drop en un HTML logrando mover modulos y guardándolos en cookies, esto para que el usuario al refrescar la pagina tenga su configuración guardada.

JavaScript

Necesitaremos incluir las librerías de jQuery, jQuery UI y jQuery Cookie en nuestro HTML. [html] <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> [/html] En el siguiente script declaramos variables y funciones que servirán para recorrer elementos, ordenarlos, y especificar zonas para el drag and drop. [javascript] <script type="text/javascript"> var divid = 'sidebar'; var cookiename = 'sidebar-cookie'; function getItems(id){ return $('#'+id+'-list').sortable('toArray').join(','); } function renderItems(id, itemStr){ var list = $('#' + id + '-list'); var items = itemStr.split(',') for ( var i in items ){ html = '<li class="sortable-item'; html += '" id="' + items[i] + '"><div class="loader"></div></li>'; list.append(html); $('#' + items[i]).load('content/' + items[i] + '.html'); } } var sidebarSource = 'search,entries,board,topics'; if($.cookie(cookiename) != null){ sidebarSource = $.cookie(cookiename); } $(document).ready(function(){ renderItems(divid, sidebarSource); $('#'+divid+' .sortable-list').sortable({ axis: 'y', containment: 'parent', forceHelperSize: true, forcePlaceholderSize: true, handle: '.section-title', opacity: 0.8, placeholder: 'placeholder', update: function(){ $.cookie(cookiename, getItems(divid)); } }); }); </script> [/javascript]

 

HTML

El contenedor de los elementos sera un UL, este deberá tener el identificador y clases que pusimos en el Javascript: [html] <div class="right sidebar" id="sidebar"> <ul class="sortable-list" id="sidebar-list"></ul> </div> [/html] Los módulos cargaran mediante Ajax, y el nombre del html sera igual a la variable declarada: [javascript] var sidebarSource = 'search,entries,board,topics'; [/javascript] Osea: tendremos HTML´s de forma: search.html, entries.html, board.html, topics.html. Los módulos deben manejar un estándar para reconocer zonas de donde hacer el drag and drop. [html] <div class="section"> <div class="section-title">Search</div> <div class="section-content"> <form method="post" action=""> <input type="text" class="text" size="28" />   <input type="submit" class="button" value="Submit" /> </form> </div> </div> [/html] ver demo - descargar Vía: DevHeart

 

Post Relacionados

]]> http://craftyman.net/drag-and-drop-cookies-con-jquery/feed/ 1 Detectar caras con jQuery http://craftyman.net/detectar-caras-con-jquery/ http://craftyman.net/detectar-caras-con-jquery/#comments Thu, 10 Feb 2011 06:35:25 +0000 craftyman http://craftyman.net/?p=1257 jQuery Face Detection es un plugin para jQuery que permite reconocer las caras humanas dentro de una imagen y enmarcarlos, sin duda un impresionante plugin que nos puede servir para etiquetar personas o cubrir rostros que no deberían mostrarse. Antes de implementarlo en nuestra Web lo que debemos hacer es bajarnos el plugin.

 

Descargar Plugin

 

Javascript

Estas librerías realizaran la funcionalidad de detectar las caras, todos son necesarios para el propósito. [html] <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="js/facedetection/ccv.js"></script> <script src="js/facedetection/face.js"></script> <script src="js/jquery.facedetection.js"></script> [/html] Este script servirá para guardar las coordenadas de cada rostro en un array de objetos, luego lo recorrera para armar el cuadro que los etiquetara, finalmente insertamos el html generado en un elemento que encierre a la imagen. (Este script debe estar justo antes de cerrar el </body>). [javascript] <script> $(function() { var $this = $(this); var coords = $('img').faceDetection(); for (var i = 0; i < coords.length; i++) { $('<div>', { 'class':'face', 'css': { 'position': 'absolute', 'left': coords[i].positionX +'px', 'top': coords[i].positionY +'px', 'width': coords[i].width +'px', 'height': coords[i].height +'px' } }) .appendTo('#content'); } }); </script> [/javascript]

HTML

Esta es la estructura que debe tener el html de la imagen. [html] <div id="content"> <img src="img/faces.jpg" /> </div> [/html]

 

descargar

 

 

Post Relacionados

]]> http://craftyman.net/detectar-caras-con-jquery/feed/ 1 Player de Video HTML5: VideoJS http://craftyman.net/player-video-html5-videojs/ http://craftyman.net/player-video-html5-videojs/#comments Mon, 27 Sep 2010 19:33:49 +0000 craftyman http://craftyman.net/?p=1223 VideoJS es un Player para reproducir Videos en HTML5, esto permite compatibilidad con navegadores móviles y la ventaja de no requerir flash para ver los videos, otra de sus ventajas es que si el navegador no soporta HTML5 automáticamente nos muestra su reproductor en Flash alternativo.

 

 

Mejores características

  • De Licencia Open Source (libre)
  • Realmente ligero (no utiliza imágenes)
  • Skins 100% CSS
  • Modo Full Screen y Full Window
  • Control de volumen
  • Compatible en navegadores móviles
  • Incluye skins de Youtube, Vimeo y más.
  • Plugins para jQuery y WordPress

 

Como funciona?

Lo primero es descargar la ultima versión de VideoJS, luego descomprimirlo y colocarlo en una carpeta de nuestro servidor local. Descargar VideoJS

 

Incluir Librerías Javascript y CSS

El siguiente paso para incluir VideoJS en nuestra pagina web sera el de incluir los archivos JavaScript y CSS. 
<head>
    <script src="video.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
</head>
Ahora debemos ingresar una función JavaScript que se ejecutara cuando toda la pagina cargue, esto para tener las funcionalidades de VideoJS. 
<script type="text/javascript" charset="utf-8">
VideoJS.setupAllWhenReady();
</script>

 

Estructura del player

Finalmente dentro del body construimos el player dentro de un div con clase "video-js-box" para reconocer la sección. 
<div class="video-js-box">
...
</div>
Dentro de este colocamos el tag <video> con sus respectivos atributos y opciones de formato de video. 
<video id="example_video_1" class="video-js" width="640" height="264" preload poster="http://video-js.zencoder.com/oceans-clip.png" controls>
  <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
  
  <!-- Utilizar flash cuando el navegador no soporte HTML5 -->
  
  <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
	data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
	<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
	<param name="allowfullscreen" value="true" />
	<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
	
	<!-- Utilizar una imagen al no soportar Flash -->
	<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
	  title="No video playback capabilities." />
  </object>
  
</video>

<!-- Opción para descargar el video en caso no se soporte ninguna tecnología. -->

<p class="vjs-no-video"><strong>Download Video:</strong>
  <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
  <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
  <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
  <!-- Support VideoJS by keeping this link. -->
  <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
</p>
Con esto hemos obtenido un reproductor que soporta diferentes formatos de video, puede cambiar a Flash en caso el navegador no soporte HTML5 y la opción de descargar los videos en diferentes formatos si no se lograra reproducir de ninguna forma. Pueden ver una demo online de la funcionalidad del reproductor y sus excelentes Skins 100% CSS. Ver demos

 

Post Relacionados

]]> http://craftyman.net/player-video-html5-videojs/feed/ 3 Widget Twitter con jQuery y @AnyWhere http://craftyman.net/widget-twitter-jquery-anywhere/ http://craftyman.net/widget-twitter-jquery-anywhere/#comments Mon, 05 Jul 2010 18:47:37 +0000 craftyman http://craftyman.net/?p=1157 Like it? Tweet it! es un plugin para jQuery el cual genera un widget que permite a los usuarios de tu sitio web tweetear sobre la pagina mediante un widget desplegable que utiliza el nuevo servicio de Twitter: @AnyWhere para realizarlo.
Su implementacion es super sencilla, solo tenemos que incluir el siguiente script dentro del head de nuestra pagina web. Diseñar páginas Web. 
<script type="text/javascript" src="http://tweet-it.s3.amazonaws.com/tweet-it.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".tweet-this a").tweetIt();
	})
</script>
Luego dentro del body crearemos un enlace el cual llamara al widget, esta debe tener como clase a tweet-this para reconocerlo. si queremos personalizar una url corta al tweetear agregaremos este script dentro del head. 
<link rev="canonical" type="text/html" href="http://bit.ly/whatever" />
Este video es un ejemplo del funcionamiento de este plugin. Página Oficial: Like it? Tweet it!

 

Post Relacionados

]]> http://craftyman.net/widget-twitter-jquery-anywhere/feed/ 0 gvChart: Gráficos con Google Charts y jQuery http://craftyman.net/gvchart-graficos-google-charts-jquery/ http://craftyman.net/gvchart-graficos-google-charts-jquery/#comments Thu, 01 Jul 2010 21:24:19 +0000 craftyman http://craftyman.net/?p=1161 gvChat es un plugin para jQuery que utiliza la librería Google Charts para trabajar con gráficos estadísticos (Area, Lineal, Barras, Columnas y Pie) en nuestros proyectos. Para crear estos gráficos solo hace falta plasmarlos en una tabla HTML y el plugin se encargara de todo, con algunas configuraciones podemos personalizarlo. Dominios y Hosting

Estructura HTML.

Esta estructura será la que utilizaremos como estándar para generar nuestros gráficos. 
<table id="myTable" style="display: none;">
    <caption>Game players count</caption>
    <thead>
        <tr>
            <th></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>2010</th>
            <td>125</td>
            <td>185</td>
            <td>327</td>
            <td>359</td>
            <td>376</td>
            <td>398</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
        <tr>
            <th>2009</th>
            <td>1167</td>
            <td>1110</td>
            <td>691</td>
            <td>165</td>
            <td>135</td>
            <td>157</td>
            <td>139</td>
            <td>136</td>
            <td>938</td>
            <td>1120</td>
            <td>55</td>
            <td>55</td>
        </tr>
    </tbody>
</table>

Incluir los JavaScript

Utilizaremos la librería de Google Charts, jQuery y gvChart. 
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gvChart-0.1.min.js"></script>

<script type="text/javascript">
    gvChartInit();
    jQuery('#myTable').gvChart({
        chartType: 'ColumnChart',
        gvSettings: {
            vAxis: {title: 'No of players'},
            hAxis: {title: 'Month'},
            width: 720,
            height: 300,
            }
    });
</script>
chartType: Podemos cambiar de tipos de gráficos, estos son los permitidos:
  • AreaChart
  • LineChart
  • BarChart
  • ColumnChart
  • PieChart

Ejemplo de gvChart AreaChart

 

 

Post Relacionados

]]> http://craftyman.net/gvchart-graficos-google-charts-jquery/feed/ 2 Eliminar registros con AJAX y jQuery http://craftyman.net/eliminar-registros-ajax-jquery/ http://craftyman.net/eliminar-registros-ajax-jquery/#comments Thu, 10 Jun 2010 05:01:42 +0000 craftyman http://craftyman.net/?p=1121 página web al momento de eliminar algún registro de nuestra base de datos, es realizándolo con Ajax, para que sea un poco más animado e intuitivo para el usuario, podemos iluminar el registro a eliminar indicando que esta desapareciendo, como lo hace WordPress al eliminar comentarios.
Para nuestro ejemplo tendremos que incluir estos scripts en nuestro HTML:
Luego seguiremos dándole algún estilo con CSS a las filas.
Esta seria la estructura HTML a utilizar para nuestro ejemplo, tendríamos que hacerlas dinámicas en un caso real, jalar de la base de datos y recorrer los registros. 
		
	

		Eliminar
		Registro 1
	

	

		Eliminar
		Registro 2
Con esto podemos probar nuestra funcionalidad.

Demo

 

Post original: Animated AJAX Deletion using jQuery

 

Post Relacionados

]]> http://craftyman.net/eliminar-registros-ajax-jquery/feed/ 4 SliderNav: Lista de contactos iPhone con jQuery y CSS http://craftyman.net/slidernav-lista-de-contactos-iphone-con-jquery-y-css/ http://craftyman.net/slidernav-lista-de-contactos-iphone-con-jquery-y-css/#comments Thu, 03 Jun 2010 03:09:38 +0000 craftyman http://craftyman.net/?p=1116 SliderNav es un plugin para jQuery desarrollado por DevGrow que permite mediante una barra de navegación vertical el deslizamiento de contenido, se establece el contenido mediante secciones y pueden rotar con la rueda del mouse. ASP Hosting

Ejemplo SliderNav

 

Para implementar este Slider en nuestra Web, debemos de seguir estos pasos:

Paso 1: Incluir los archivos JavaScript y CSS en la cabecera.

Para nuestro ejemplo utilizaremos la librería jQuery y slidernav, luego inicializamos la función. 
<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />

Paso 2: Crear la estructura HTML.

Tenemos total flexibilidad en este Slider, podemos cambiar las letras del alfabeto por secciones según nuestra necesidad.
Post original: DevGrow

 

Post Relacionados

]]> http://craftyman.net/slidernav-lista-de-contactos-iphone-con-jquery-y-css/feed/ 2 MultiSelect con CSS y jQuery UI http://craftyman.net/multiselect-con-css-y-jquery-ui/ http://craftyman.net/multiselect-con-css-y-jquery-ui/#comments Thu, 20 May 2010 19:42:24 +0000 craftyman http://craftyman.net/?p=1109 plugin de jQuery que nos permite incluso ordenar y filtrar items de un MultiSelect. MySQL, PHP Hosting

1. Incluir las librerías JavaScript y CSS

<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ui.all.css" />
<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/ui.multiselect.js"></script>
<script type="text/javascript">
    $(function(){
        $.localise('ui-multiselect', {path: 'js/'});
        $(".multiselect").multiselect();        
    });
</script>

2. Estructura HTML
Esto es todo lo que necesitamos para nuestro demo.

Ejemplo de MultiSelect con jQuery

 

Post Relacionados

]]> http://craftyman.net/multiselect-con-css-y-jquery-ui/feed/ 3 Acordeón con CSS y jQuery http://craftyman.net/acordeon-con-css-y-jquery/ http://craftyman.net/acordeon-con-css-y-jquery/#comments Mon, 17 May 2010 18:12:22 +0000 craftyman http://craftyman.net/?p=1107 (acordeones) son muy utiles para la organización de contenido en una página web, este acordeón es una creación de SOHTANAKA y este tutorial les explicara detalladamente como implementar un simple acordeón con CSS y jQuery, muy ligero ya que esta hecha desde cero.

Paso 1: Estructura HTML.

Primero tenemos que crear la estructura HTML estableciendo los contenidos y secciones para el acordeón. [html] <h2 class="acc_trigger"> <a href="#">Sección #1</a></h2> <div class="acc_container"> <div class="block"> <!--Contenido--> </div> </div> <h2 class="acc_trigger"> <a href="#">Sección #2</a></h2> <div class="acc_container"> <div class="block"> <!--Contenido--> </div> </div> <!--Más secciones--> [/html]

Paso 2: Incluir el CSS.

El siguiente código CSS dara una buena apariencia al acordeón. [css] <style type="text/css"> .container { width: 500px; margin: 0 auto; } h2.acc_trigger { padding: 0; margin: 0 0 5px 0; background: url(h2_trigger_a.gif) no-repeat; height: 46px; line-height: 46px; width: 500px; font-size: 2em; font-weight: normal; float: left; } h2.acc_trigger a { color: #fff; text-decoration: none; display: block; padding: 0 0 0 50px; } h2.acc_trigger a:hover { color: #ccc; } h2.active {background-position: left bottom;} .acc_container { margin: 0 0 5px; padding: 0; overflow: hidden; font-size: 1.2em; width: 500px; clear: both; background: #f0f0f0; border: 1px solid #d6d6d6; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .acc_container .block { padding: 20px; } </style> [/css] Imagen: h2_trigger_a.gif

Paso 3: Incluir la librería jQuery y función JavaScript.

Incluiremos la librería jQuery y colocamos seguidamente el script que dara la funcionlidad de acordeón. [javascript] <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.acc_container').hide(); $('.acc_trigger:first') .addClass('active') .next() .show(); $('.acc_trigger').click(function(){ if( $(this).next().is(':hidden') ) { $('.acc_trigger') .removeClass('active') .next() .slideUp(); $(this).toggleClass('active') .next() .slideDown(); } return false; }); }); </script> [/javascript]

Ejemplo del Accordion

 

Post Relacionados

]]> http://craftyman.net/acordeon-con-css-y-jquery/feed/ 11 jConfirmAction : Plugin jQuery para cuadros de confirmación http://craftyman.net/jconfirmaction-plugin-jquery-para-cuadros-de-confirmacion/ http://craftyman.net/jconfirmaction-plugin-jquery-para-cuadros-de-confirmacion/#comments Wed, 12 May 2010 04:13:28 +0000 craftyman http://craftyman.net/?p=1104 jConfirmAction es un plugin para jQuery que reemplazara el típico cuadro de confirmación que realizamos con la función JavaSCript confirm('Aceptar o rechazar?'). La funcionalidad básicamente de este plugin es crear un div que contiene un cuadro de confirmación personalizado, aparece y desaparece con un suave efecto. página web
Para incluir este plugin jQuery solo debemos seguir estos pasos: Bajar jConfirmAction e incluir el script en un archivo .html para hacer las pruebas.
Como vemos esta función sera llamada para los elementos que contengan la clase .confirmation como el siguiente HTML: 
Eliminar
Si aceptamos el cuadro de confirmación nos llevara a la dirección establecida en el href, sino cancelara la llamada

 

Post Relacionados

]]> http://craftyman.net/jconfirmaction-plugin-jquery-para-cuadros-de-confirmacion/feed/ 1