Category Archives: jquery

jaquery

Tutorial app con phonegap

Phonegap es la tecnología que nos permite crear apps para dispositivos móviles multi plataforma usando HTM5 CSS y JS sin pasar por objetive c

Para este ejemplo usaremos jquery mobile, que es una tecnología para crear aplicaciones web móviles simples.

Al utilizar esta tecnología como alternativa para crear apps debemos cambiar la forma de estructurar nuestra web app  ya no se tiene que pensar en sitios multi pagina en las que por cada sección de nuestro sitio existe una página por separado, si no que ahora todo estará dentro de una misma. En jquery mobile a cada sección de nuestra página que actuara como vista(activity) dentro de la app se le asigna un “ROL” por ejemplo para declarar una vista(activity)  se coloca “data-role= page” y dentro de cada página se asignan 3 roles más, que pueden no ser asignados pero que comúnmente se usan y son: un encabezado un contenido y un pie.

Dicho lo anterior nos poneos manos a la obra:

En primer lugar debemos tener instalado eclipse y el sdk de android como lo explique en mi anterior articulo.

Segundo, crearemos nuestro html que actuara como app y que debe contener la siguiente estructura:

 HTML | 
 
 copy code |
?

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5.     <!-- declaramos la escala del contenido de nuestra app  y esto ayuda a adapterse al dispositivo que corra la app-->
  6.     <meta name="viewport" content="width=device-width, initial-sacle=1">
  7.     <!-- importamos jquery y la hoja de estilos -->
  8.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  9.     <script src="http://code.jquery.com/jquery-1.6.4.min.js" ></script>
  10.     <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" ></script>
  11.   <title>Mi app</title>
  12.     
  13. </head>
  14. <body>
  15. <div data-role="page">
  16.      <!-- En el header de la app comunmente vienen los botones de "atras"-->
  17.             <div data-role="header">
  18.          <h1 id="_title">App1</h1>
  19.         </div>
  20.         <!-- Cuerpo de la app -->
  21.         <div data-role="content">
  22.             <p id="_desc">HOLA MUNDO</p>
  23.         </div>
  24.         <!-- En la parte del footer es donde van los botones de las apps -->
  25.         <div data-role="footer">
  26.          <h4>pie de la APP</h4>
  27.         </div>
  28.     </div>
  29. </body>
  30. </html>

Lo guardamos como index.html

Abrimos eclipse y seguimos estos pasos:

Creamos un proyecto nuevo de android en File > project > Android > Android Aplication Project

a)      Le colocamos nombre.

pantalla1

b)      En la siguiente ventana dejamos los parámetros por defecto

pantalla2

c)      Asignamos un icono a nuestra app

pantalla3

d)      Seleccionamos “Blank activity”

pantalla4

e)      Le damos el nombre al activity que para este ejemplo le dejaremos la que viene por defecto

pantalla5

f)       Finish

Nota: debe de mostrarse del lado izquierdo el “Package Explorer” si no es asi vamos a :

 pantalla6

Ya creado el proyecto, creamos una carpeta “www” dentro de assets

Creamos una carpeta “libs” en la raiz del proyecto

Vamos a http://phonegap.com/install/ y descargamos el phonegap, para este ejemplo use phonegap-2.9.0

Después de descomprimir el zip phonegap que descargamos del sitio abrimos la subcarpeta lib > android y arrastramos él “.jar” y el “.js” a la carpeta libs, el js nos ayuda cuando nuestras apps trabajan con los recursos de los dispositivos como la cámara y demás, en este ejemplo no se ocupa pero por costumbre lo hacemos ya que no está de más.

También arrastramos la carpeta “xml” a la carpeta “res” de nuestro proyecto

Copiamos nuestro HTML a la carpeta www que creamos, ya solo quedan un par de cambios

pantalla8

vamos a la carpeta “src” > “nombre_de_nuestra_app” > “MainActivity.java” y modificamos para que quede de esta manera:

 Java | 
 
 copy code |
?

  1. package com.nalonsor.demoapp;
  2. //importamos cordova
  3. import org.apache.cordova.*;
  4. import android.os.Bundle;
  5. //ahora deriva de Droidgap
  6. public class MainActivity extends DroidGap {
  7.        @Override
  8.        public void onCreate(Bundle savedInstanceState) {
  9.              super.onCreate(savedInstanceState);
  10.              //llmamamos a nuestro html
  11.              super.loadUrl("file:///android_asset/www/index.html");
  12.        }
  13. }

Ahora nos dirigimos al AndroidManifest.xml lo abrimos con doble clic, vamos a la pestaña “AndroidManifest.xml” localizamos lo siguiente:

 XML | 
 
 copy code |
?

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3.     package="com.example.lectorfeednalonsor"
  4.     android:versionCode="1"
  5.     android:versionName="1.0" >

y despues de esas lineas pegamos lo siguiente:

 XML | 
 
 copy code |
?

  1. <supports-screens
  2.    android:largeScreens="true"
  3.    android:normalScreens="true"
  4.    android:smallScreens="true"
  5.    android:resizeable="true"
  6.    android:anyDensity="true" />
  7. <uses-permission android:name="android.permission.CAMERA" />
  8. <uses-permission android:name="android.permission.VIBRATE" />
  9. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  10. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  11. <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
  12. <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  13. <uses-permission android:name="android.permission.INTERNET" />
  14. <uses-permission android:name="android.permission.RECEIVE_SMS" />
  15. <uses-permission android:name="android.permission.RECORD_AUDIO" />
  16. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  17. <uses-permission android:name="android.permission.READ_CONTACTS" />
  18. <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  19. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  20. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  21. <uses-permission android:name="android.permission.GET_ACCOUNTS" />
  22. <uses-permission android:name="android.permission.BROADCAST_STICKY" />

Tu aplicación esta lista para ser probada:

pantalla7

Esta es la base para realizar app con eclipse y phonegap ya solo resta que pongas en práctica tus conocimientos es css, html5 y jquery para mejorarla y con la ayuda de la documentación de phonegap seguro logras apps muy potentes.

node.js & puesta en marcha

Node.js es un entorno de programación en la capa del servidor basado en el lenguaje de programación Javascript, con I/O de datos en una arquitectura orientada a eventos y basado en el motor Javascript V8. Fue creado con el enfoque de ser útil en la creación de programas de red altamente escalables, como por ejemplo, servidores web.

Para instalarlo en windows es sencillo solo requiere los siguientes pasos:

  • Ir a http://nodejs.org
  • Descargar el instalador
  • Instalar Node.js
  • Buscar en los programas instalados: “Node.js Command Prompt”
  • Escribir node -v para comprobar que se instaló y revisar la versión instalada.

Despues de instalar es importante instalar/atualizar socket.io para esto buscamos en los programas instalados “Node.js Command Prompt” y ejecutamos la siguiente linea:

 DOS | 
 
 copy code |
?

  1. npm install socket.io

Una vez instalado, pasamos a probarlo. Encontramos el más básico de los ejemplos (prueba de instalación) en http://nodejs.org/api/synopsis.html.

creamos un archivo “ejemplo.js” preferentemente en la raíz de nuestra unidad “C”, por el momento para no complicarnos buscando la ruta, y pegamos el ejemplo de la pagina de node.

una vez creado el archivo vamos nuevamente al  “Node.js Command Prompt” y ejecutamos lo siguiente(estando el la raiz de la unidad “C”):

 DOS | 
 
 copy code |
?

  1. node ejemplo.js

Inmediatamente después debe de mostrarnos esto el   “Node.js Command Prompt”:

 DOS | 
 
 copy code |
?

  1. Server running at http://127.0.0.1:8124/

Nos dirigimos a un navegador y tecleamos : http://localhost:8124 y deberá mostrarnos “Hello World” 

mas adelante seguiré tratando el tema de Node.js

40 jquery plugins

Estas grandiosas librerias nos han facilitado la vida, cada dia se crean varios plugins, dada la facilidad en implementarlo se ha convertido en parte importante de la vida de todo programador, asi que sin más que acotar, aqui hay más de 40 plugin en jquery. Disfruten…

MotionCAPTCHA ( Demo Download )
MotionCAPTCH es un plugin de Jquery. Es te captcha pide a los usuarios que dibujen la forma en que ven la imagen, algo bastante dificil de imitar…. si eres un robot.

 

Smart Validate ( Demo Download )
ES un plugin para agregar tu tarjeta de credito. Tiene soporte para las siguientes tarjetas: American Express, MasterCard, Visa, Diners Club, and Discover.

 

Multi Node Range Data Slider jQ Slider ( Demo Download )
JQ Slider es un plugin totalmente personalizable. Puedes modificarlo de acuerdo a lo que quieres.

 

Timelinr ( Demo Download )
Timelinr es un plugin para crear una linea de tiempo. Puedes utilizarlo de forma horizontal o vertical, ademas puedes configurar la velocidad, transparencia, etc.

 

Flexible Nav ( Demo Download )
Flexible Nav es una pequeña libreria de Jquery, que te permite añadir una barra de navegación a la derecha de la pagina.

 

Lettering.js ( Demo Download )
Lettering.js en un plugin de jQuery para tipografia web, este plugin te permite crear efectos asombrosos que solo podias imitar con flash.

 

jVectorMap ( Demo Download )
jVectorMap es un plugin de Jquery para crear mapas interactivos en poocos pasos. Utiliza SVG y es compatible para la mayoria de los navegadores Firefox 3 or 4, Safari, Chrome, Opera, IE9, y para la versiones antiguas utiliza VML.

 

ComboGrid ( Demo Download )
Combogrid es un plugin escrito en jQuery para añadir funciones avanzadas de auto-complementar en los campos input de los formularios.

 

Recurly.js ( Demo Download )
Recurly.js es una librería javascript que hace uso de jQuery para realizar cobros, transacciones o almacenar información sobre tarjetas de créditos, etc.

 

SmartGallery ( Demo Download )
SmartGallery es una galeria de imagenes, de poco peso, atractiva que incluye 20 efectos de transición

 

TagBox ( Demo Download )
TagBox es un plugin de Jquery que te ayuda a ingresar tags o etiquetas

 

jQuery Strong Password Plugin Power Pwchecker ( Demo Download )
Power PWChecke es un plugin que te ayuda  fortalecer tu contraseña. Este plugin puede ser incorporado en cualquier formulario de registro para que el usuario ingrese una contraseña segura.

 

Xml Driven Vertical News Scroller Script Using jQuery vScroller ( Demo Download )
vScroller muestra el contenido categorizado y codificado por color, en forma vertical.

 

Ideal Forms ( Demo Download )
Ideal Forms es un framework utilizado para construir formularios online. Es extremadamente simple de usar. Completamente Completely estilizable con CSS.

 

jQuery Sliding Content Bar Plugin: PushUp Content ( Demo Download )
Es una barra de contenido desplazable que puedes adaptarla en cualquier sitio web o aplicación web.Puedes utilizarlo para agregar un formulario de contacto, un formulario de registro o de login, agregar un mapa, etc.

 

Cuepoint JS ( Demo Download )
Cuepoint.js es un plugin para agregar cue-points (puntos insertados en el video) y subtitulos en el video en html5.

 

FitVids.js ( Demo Download )
FitVids.js es un plugin para incrustar de forma facil un video.

 

Gmap3 ( Demo Download )
gmap3 es un plugin de Jquery que te permite manipular el mapa de google.

 

Shuffle Letters Effect: a jQuery Plugin ( Demo Download )
Este es un pequeño tutorial que muestra cómo hacer un plugin de jQuery que se mezcla el contenido de texto de cualquier elemento DOM – un efecto atractivo que puede ser aplicado en títulos, logos y presentaciones de diapositivas.

 

Skitter ( Demo Download )
Skitter es un plugin for que prodce un asombroso efecto en el slideshow.

 

jFontSize ( Demo Download )
El plugin  jFontSize fue creado para que el proceso de creacion del famoso boton A+ y A- sea fácil,  que modifica el tamaño de la fuente en un sitio web. Esta herramienta fue creada para que las personas que tienen problemas visuales, puedan ver el contenido de una mejor manera.

 

Mosaiqy ( Demo Download )
Mosaiqy es un plugin de JQuery para ver y aumentar fotografias, funciona en Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome yIE7+.

 

HTML5 File Uploads with jQuery ( Demo Download )
PErmite  al gente subir fotos de sus computadores, solo con tomar y arrastrar la imagen.

 

jQuery PointPoint – A Plugin For Pointing To Things ( Demo Download )
Este plugin de jQuery  permitira que tus usuarios se concetren en cierta parte de la pagina.

 

jqZoomage ( Demo Download )
Permite a tus usuarios ver una parte pequeña de una imagen, es perfecto para ver los detalles de un producto.

 

ZOOMIFY, EXPLORE YOR IMAGES! ( Demo Download )
Si tienes una imagen muy grande, puedes dejar que tus usuarios exploren esa imagen, esta utilidad incluye zoom y es totalmente configurable.

 

JQUERY.MB.VERTICALSLIDER ( Demo Download )
jquery.mb.verticalSlider permite mostrar una larga lista de componentes, puedes usar los botones o simplemente la rueda del mouse.

 

jQuery Pagination revised ( Demo Download )
REsuelve los problemas de paginacion de distintas formas.

 

Diapo ( Demo Download )
Diapo es un simple slideshow. Puedes hacer todos los cambios que quieras.

 

Cool Dropdown Login Form with jQuery ( Demo Download )
Este es un formulario de login desplegable; es simple de implemntar, liviano y facil de configurar.

 

simpleSlider ( Demo Download )
simpleSlider es otro genial slideshow, simple de configurar, con multiples opciones, y perfectamente adaptable a cualquier diseño

 

Craftyslide ( Demo Download )
Craftyslide es un pequeño( solo 2kb) slideshow construido en jQuery.

 

jmFullWall ( Demo Download )
jmFullWall is un plguin de Jquery perfecto para un portafolio

 

Wave Display Effect with jQuery ( Demo Download )
Este plugin te permite ordenar tus imagenes en forma de ola, las imagenes principales son thumbnail que al clickearlas te lleva a la imagen principal

 

jQuery Widget ( Demo Download )
jqxWidgets es una completa libreria de widgets. Se autoriza a los desarrolladoras a mostrar su trabajo profesional

 

Elastislide – A Responsive jQuery Carousel Plugin ( Demo Download )
Este carrusel jQuery se adapta al tamaño de la pantalla, para ello reduce el tamaño de imagenes a ser mostradas o las aumenta dependiendo del tamaño de la pantalla.

 

FlexSlider ( Demo Download )

FlexSlider es un plugin para jQuery que pesa sólo 4kb en su versión minified. Toma las imágenes desde listas desordenadas y acepta descripciones y links. Es muy simple de utilizar. Tras la descarga del plugin, insertamos entre etiquetas <head>:

 

Draggable Image Boxes Grid ( Demo Download )
La idea es tener una cuadrícula desplazable que muestra las cajas de miniaturas y elementos del menú. Una vez que se hace clic, la imagen se ampliará a la imagen a tamaño completo y la caja del menú se expandirá a un área de contenido a pantalla completa.

 

Responsive Image Gallery with Thumbnail Carousel ( Demo Download )
En este tutorial de  Codrops se muestra cómo generar una galería de imágenes sensibles, con un carrusel en miniatura utilizando Elastislide. Inspirado por la “galería de un usuario” de Twitter.

 

grumble.js ( Demo Download )

Con la ayuda de un ángulo y una distancia medido en pixeles se puede añadir este efecto de burbujas o bubbles. Para ello hace uso de CSS3 Transforms y Matrix Filters para Internet Explorer.

 

Elycharts ( Demo Download )
Elycharts es una librería JavaScript basada en jQuery y Raphaël para crear gráficos estadísticos (de línea, barras, circulares, pastel, o combinados) de forma fácil, además, es personalizable y lo mejor de todo, es gratuita.

 

spin.js ( Demo Download )

spin.js: Una solución en Javascript para proveer feedback a usuarios sin necesidad de CSS adicional o imágenes.

 

wordCounter jQuery Plugin ( Demo Download )
A trouble-free word counter plugin for jQuery. When active, the counter div shows the word count from the target text field. The target could be a text area or a text box. Depending upon the choices supplied, the count could be the total amount or remaining amount of words entered into the target text field. If the negative numbers choice is furnished in that case the count will demonstrate a negative value if the word limit has been passed.

Eliminar elemento de una array Jquery

Este día tuve la necesidad de trabajar con arrays de jquery, específicamente tuve la necesidad de eliminar elementos contenidos en el array y como es bien sabido la documentación es poca así es que aquí esta la contribución de como hacerlo:

 jquery | 
 
 copy code |
?

  1. var germanBeers = ['Oettinger', 'Franziskaner', 'Erdinger', 'Paulaner', 'Hansa', 'Hofbrau'];
  2. var germanBeerToRemove = 'Erdinger';
  3. germanBeers = $.grep(germanBeers, function(value) {
  4.     return germanBeerToRemove != value;
  5. });

Via: thedrunkenepic

HTML dinámico no ejecuta funciones de jquery! [SOLUCIÓN]

El dia de hoy que trabajaba en el mismo proyecto del post anterior me encontre con el detalle que al generar html dinamico por medio de jquery este no ejecutaba funciones definidas en mi codigo js y revisando un poco en la red me dicuenta que a muchos les ha pasado y la info que exite para resolver este problema es poca y por supuesto en español se encuentra en menor cantidad, asi que para los que no han resulto este problema o estan en el he aqui un ejmplo para que se den una idea de como hacerlo:

 jquery | 
 
 copy code |
?

  1. $('#divid').live('click', function() {
  2. alert('hello');
  3. });

la funcion “live()” nos ayuda a resolver este problema. Salu2.

via: codingforums.com

Trabajar con checkbox JQuery

Me encuentro trabajando en una especia de juego y para el he tenido la necesidad de trabajar con checkbox y jquery, así que me tuve que dar a la tarea de investigar y gracias a webintenta he podido resolver algunas de las dudas que he tenido al trabajar en este proyecto:

A continuación expongo unos pequeños snippets o trucos a la hora de trabajar con checkboxes y jQuery. En mi opinión, quizá la forma más adecuada de acceder a los checkboxes mediante jQuery es asignándoles una clase o id. De esta forma podemos actuar sobre los checkboxes de una manera selectiva. Podremos tener más elementos de este tipo en nuestra página web pero sólo actuaremos sobre los que poseen determinada clase o id. Algunos ejemplos:

Comprobar si un checkbox está marcado

 jquery | 
 
 copy code |
?

  1. $(".ck").is(":checked");

Devuelve true si está marcado y false en cualquier otro caso

Marcar un checkbox

 jquery | 
 
 copy code |
?

  1. $(".ck").attr("checked","checked");

Desmarcar un checkbox

 jquery | 
 
 copy code |
?

  1. $(".ck").removeAttr("checked");

Marcar todos los checkboxes

 CSS | 
 
 copy code |
?

  1. $(".ck:checkbox:not(:checked)").attr("checked", "checked");

Desmarcar todos los checkboxes

 jquery | 
 
 copy code |
?

  1. $(".ck:checkbox:checked").removeAttr("checked");

Combinando algunos de lo visto anteriormente podemos realizar fácilmente un check que haga la función de marcar/desmarcar todo y que actue sólo sobre los elementos con la clase “ck”:

 HTML | 
 
 copy code |
?

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <script language="javascript">
  3. $(document).ready(function(){
  4.    $(".check_todos").click(function(event){
  5.      if($(this).is(":checked")) {
  6.    $(".ck:checkbox:not(:checked)").attr("checked", "checked");
  7.   }else{
  8.   $(".ck:checkbox:checked").removeAttr("checked");
  9.   }
  10.    });
  11. });
  12. </script>
  13. <form>
  14. <p><input name="Todos" type="checkbox" value="1" class="check_todos"/>Seleccionar todos</p>
  15. <p>
  16.   <input name="elemento1" type="checkbox" value="1" class="ck"/>elemento 1<br />
  17.   <input name="elemento2" type="checkbox" value="2" class="ck"/>elemento 2<br />
  18.   <input name="elemento3" type="checkbox" value="3" class="ck"/>elemento 3<br />
  19.   <input name="elemento4" type="checkbox" value="4" class="ck"/>elemento 4<br />
  20.   <input name="elemento5" type="checkbox" value="5" class="ck"/>elemento 5</p>
  21. <p>El siguiente check no se verá afectado</p>
  22. <input name="elemento5" type="checkbox" value="5" />elemento n
  23. </form>

Fuente y ejmplo en: Webintenta