Programador de Software: 2015

miércoles, 9 de septiembre de 2015

lunes, 27 de julio de 2015

Guías Disponibles

-Guía C
-Guía PHP
-Guía C++
-Guía Ruby
-Guía HTML
-Guía Jquery
-Guía Python
-Guía Django
-Guía MySQL
-Guía JavaScript
-Guía PostgreSQL
-Guía de comandos en Linux

Tweets por el @argenisosorio.

#!/usr/bin/ruby

#### Guía Ruby by dM ####

#Instalación en Debian:
aptitude install ruby

#Características:
#-Casi todo es un objeto
#-Son innecesarias las declaraciones de variables
#-Las variables no tienen tipo
#-La sintaxis es simple y consistente
#-La gestión de memoria se realiza automáticamente

**********Consola de Ruby**********

$ ruby -v # Para saber mi version de Ruby

#En mi caso sería:
#ruby 2.2.1p85 (2020-01-01 revision 58769) [x86_64-linux]

#Por lo tanto, al entrar a la consola Ruby nos saldrá el intérprete

#Abrimos un terminal y escribimos:

$ irb # Interactive Ruby Shell

#2.2.1 :001 > #Este es el intérprete de Ruby lo que indica que ya podemos
#comenzar a escribir, se muestra la versión instalada (2.2.1)

#Si no accede a la consola de Ruby es porque no esta instaladado o no
#instaló correctametne.

Ctrl + D # Salir de la Consola

**********Imprimir por pantalla**********

puts "¿Por qué estas aqui?" #Agrega una linea en blanco al final, como un fin de línea.

print "Esto es un sueño dentro de un sueño" #Imprime el texto normalmente, sin fin de linea.

print "Hola\nRuby\n3\n" # \n Salto de linea.

print "Hola\tRuby\t3\t" # \t Tabulación

**********Operaciones básicas**********

#Ruby permite hacer operaciones aritmeticas básicas

2 + 2

2 - 2

2 * 2

2 / 2

2 ** 2

**********Creando un archivo**********

#Los archivos o los programas de ruby se guardan con la
#extencion (.rb)

#Crear un archivo ejemplo.rb y dentro escribimos:

#!/usr/bin/ruby

#Cabecera de los ficheros, indica a cualquier programa
#que lea ese fichero que es del tipo ruby

print "Hola Ruby"
puts "Hola Ruby 2"

#Guardamos como ejemplo.rb y para ejecutarlo hacemos un:

ruby ejemplo.rb #Se debe estar en el directorio del archivo o en su defecto
#le pasamos la ruta del archivo--> ruby /home/user/ejemplo.rb

**********Comentarios en ruby*********

# Comentario de una línea

=begin
    Comentario
de varias
lineas
=end

**********VARIABLES**********

#En ruby las variables no tienen tipos

#Se pueden declarar variables sin especificar el tipo de dato que va a almacenar, similar a Python

mi_num = 25

mi_booleano = true

mi_booleano = false

mi_string = "Ruby"

#En ruby, las cadenas son objetos pertenecientes a la clase String
#¡no confundir con pertenecientes al tipo String!

**********Mostrando el valor de una variable**********

nombre = "David Webb" #Declaramos una variable y le asignamos una cadena
puts "#{nombre}" #Imprimimos el valor de la variable declarada y cargada
puts "Tu nombre es #{nombre}" #Imprimimos una cadena y a su vez el valor de la variable cargada

#Otro ejemplo

#Asignación de valores a las variables.
nombre = 'David Webb'
edad = 31
ojos = "marrón"
cabello = 'negro'

#Imprimiendo el valor de las variables.
puts "Mi nombre es #{nombre}"
puts "tengo #{edad}"
puts "mis ojos son de color #{ojos} "
puts "y mi cabello es de color #{cabello}"

**********Usando métodos**********

"David Webb".length #Nos sirve para contar la cantidad de caracteres de una cadena, como el metodo de JavaScript
#10

"David Webb".reverse #Nos mostrara el reverso de la cadena que escribimos
#"bbeW divaD"

"David Webb".upcase #Nos mostrara la cadena que escribimos en mayúsculas
#"DAVID WEBB"

"David Webb".downcase #Nos mostrara la cadena que escribimos en minusculas
#"david webb"

"Webb".downcase.reverse.upcase #Usamos 3 metodos en en una sola linea de código
# Convertimos la cadena a minusculas, luego la invertimos y hacemos que se transforme en mayusculas
#"BBEW"

**********Capturando datos**********

# (gets) es el método de Ruby que obtiene datos de parte de los usuarios.
# Cuando se obtienen datos, Ruby agrega automáticamente una línea en blanco (o línea nueva) después de esos datos;
# chomp elimina esa línea adicional.

#(chomp) es un metodo que omite el fin de línea que se muestra al momento de imprimir
#una variable

print "¿Cuál es tu nombre?" #Pedimos por pantalla al usuario que introduzca un dato
nombre = gets.chomp #Almacenamos el dato en una variable (nombre)

----------

#Ejemplo:
print "¿Cuál es tu edad 1?"
edad1 = gets
puts "Tienes #{edad1} años"

print "¿Cuál es tu edad 2?"
edad2 = gets.chomp
puts "Tienes #{edad2} años"

----------

print "¿Cuál es tu Nombre? "
nombre = gets.chomp

print "¿Cuál es tu Apellido? "
apellido = gets.chomp

print "¿Cuál es tu Ciudad? "
ciudad = gets.chomp

********** if **********

print "Entero, por favor: "
num_usuario = Integer(gets.chomp)

if num_usuario < 0
puts "¡Elegiste un entero negativo!"
elsif num_usuario > 0
puts "¡Elegiste un entero positivo!"
else
puts "¡Elegiste cero!"
end

********** Funciones **********
#Una funcion de suma
#-Como vimos anteriormente, en ruby las variables no tienen tipos
#-Esto implica que al pasar variables a funciones, estas no necesitan tipo
#-Implica, además, que ruby tan solo se limita a ejecutar el método
#llamado para un objeto, da igual cual sea éste mientras tenga ese método

def
suma (a, b)
    a + b
end
puts suma(3, 3)
puts suma("hola", "mundo")

--- Otro Ejemplo ---

def
fun1()
    puts ("cadena 1")
end
def
fun2()
    puts ("cadena 2")
end
fun1
fun2
#print fun1
#print fun2

**********Usando métodos**********
**********Usando métodos**********
**********Usando métodos**********
**********Usando métodos**********
**********Usando métodos**********

martes, 14 de julio de 2015

Guías disponibles...

-Guía HTML
-Guía PHP
-Guía Python
-Guía C
-Guía C++
-Guía Django
-Guía JavaScript
-Guía Jquery
-Guía PostgreSQL
-Guía MySQL
-Guía de comandos en Linux

Guía PostgreSQL

### Guía PostgreSQL by dM ###

#######################
##### Instalacion #####
#######################

$ aptitude update // Actualizar los repositorios
$ aptitude search postgresql // Buscar la version actual en los repositotios
$ aptitude install postgresql postgresql−server // Instalar la version de PostgreSQL

--------------------

$ su // hacerse root
$ su postgres // Acerce root de postgres
$ psql // Entrar a posgresql

psql (9.x.x) // Al ver esto postgresql fue instalado correctamente
Type "help" for help.

postgres=# // Linea de comandos de postgresql

postgres=# help // Ayuda de postgresql
Está usando psql, la interfaz de línea de órdenes de PostgreSQL.
Digite: \copyright para ver los términos de distribución
       \h para ayuda de órdenes SQL
       \? para ayuda de órdenes psql
       \g o punto y coma («;») para ejecutar la consulta
       \q para salir
postgres=#

--------------------

# \du //Para ver los roles existentes (usuarios)

# \l //Ver las bases de datos creadas

# CREATE USER nombre_usuario; //Crear usuario sin password, es mejor asignarle el pass

# CREATE USER nombre_usuario PASSWORD 'password'; //Crear usuario y asignarle el password

# ALTER USER usuario WITH PASSWORD 'nueva_password'; //Asignarle o cambiarle el password a un usuario, debe estar creado

# DROP USER nombre_usuario; // Borrar un usuario

# CREATE DATABASE nombre_db; // Crear una base de datos

# DROP DATABASE nombre_db; // Borrar una base de datos

# CREATE DATABASE nombre_BaseDatosprueba OWNER nombre_usuario; // Creando una base de datos, debe estar creado el usuario

# \c name_db; //Conectarse a la base de datos creada

name_db=# CREATE TABLE nombre_tabla (nombre varchar(20),edad int); //Creacion de una tabla con un campo varchar de tamaño 20 y un campo para enteros

name_db=# \d // Para ver la lista de relaciones de la db, se debe estar conectado a la db, se pueden ver las tablas

namedb=# \d nombre_tabla // Para ver la descripción (nombre de columnas, tipo de datos de una tabla, etc.

namedb=# INSERT INTO nombre_tabla (nombre_campo, ..., nombre_campo) values (valor_campo, ..., valor_campo); //Insertar datos en la tabla

Ejemplo:
namedb=# INSERT INTO usuario (nombre, nacionalidad, cedula) values ('vladimirov','V',12345678); //Insertar datos en la una tabla, las cadenas
se expresan entre ('').

namedb=# INSERT INTO usuarios VALUES ('mariana','V',12345678); // Insertar datos, no se pueden dejar campos vacios.

namedb=# SELECT nombre_campo FROM nombre_tabla; // Hacer una consulta a los datos de un campo especifico.

namedb=# SELECT * FROM nombre_tabla; // Hacer una consulta de los datos de la tabla, (*) Significa que lea todas las columnas de la tabla

GRANT ALL PRIVILEGES ON DATABASE nombre_BaseDatos TO nombre_usuario; // Al crear un usuario podemos darle permisos a una base de datos existente

nombredb=# DELETE FROM nombre_tabla; // Eliminar los registros de una tabla

nombredb=# DELETE FROM nombre_tabla WHERE nombre_campo='xxx'; // Eliminar los registros de un campo especifico
Ejemplo:
nombredb=# DELETE FROM usuario WHERE nombre='vladimirov'; // En este ejemplo eliminaremos los registros de una tabla usuarios
pero solo de los campos cuyo nombre sea igual a (vladimirov), por ello se usa la clausula WHERE.

nombredb=# TRUNCATE TABLE nombre_table; // Vaciar los registros de una tabla, (elimina todos los registros de la tabla)
y vuelve a crear la tabla con la misma estructura.

// La diferencia con "delete" es la velocidad, es más rápido "truncate table" que "delete" (se nota cuando la cantidad
de registros es muy grande) ya que éste borra los registros uno a uno.

nombredb=# DROP TABLE nombre_tabla // elimina una tabla asi como sus registros.

nombredb=# ALTER TABLE nombre_tabla ADD nombre_campo tipo_campo; //Agregar un nuevo campo a una tabla.
Ejemplo:
prueba=# ALTER TABLE usuarios ADD cedula int; //En la base de datos prueba, agregamos a la tabla usuarios un nuevo campo
cedula de tipo entero.

nombredb=# ALTER TABLE nombre_tabla RENAME nombre_campo TO nuevo_nombre_campo; //Cambiar o renombrar el nombre de un campo creado.

nombredb=# ALTER TABLE nombre_tabla DROP COLUMN nombre_columna; // Para eliminar un campo o una columna de una tabla.

nombredb=# ALTER TABLE nombre_tabla ALTER COLUMN nombre_campo TYPE tipo_campo; // Modificar el tipo de dato de una columna.

nombredb=# UPDATE nombre_tabla SET nombre_campo='xxx' WHERE nombre_campo='xxxx'; // Modificar el registro de un campo
Ejemplo:
Prueba=# UPDATE usuarios SET nombre='Vitaly' WHERE cedula='12345678'; // En la base de datos prueba, vamos a actualizar un registro
de la tabla usuarios que corresponde a la columna o campo nombre, el registro que se modificara sera el que corresponda con el parametro
pasado con WHERE, sera el parametro de busqueda en la columna, pero puede ser el id por ejemplo.

***** Creando columna de autoincremento *****

Para crear una columna de autoincremento, ideal para la columna (id) se usa el tipo de dato (serial)

Ejemplo:
nombredb=# CREATE TABLE usuarios (id serial, nombre varchar(20)); //Creamos una tabla usuarios con dos campos,
id que sera (serial) y otro campo nombre de tamaño 20, el campo serial toma el valor por defecto de (1) al momento de
comenzar a introducir registros en los campos.

Ejemplo:
prueba=# INSERT INTO usuarios (nombre) VALUES ('Kristina');
prueba=# INSERT INTO usuarios (nombre) VALUES ('Khalifa');
// Introducimos los registros 'Kristina' y 'Khalifa' en la columna nombre, como vemos
no hace falta introducir el valor de la columna (id) puesto que lo toma automaticamente autoincrementando en
relacion al anterior registro. Si observamos la tabla se vería asi:

prueba=# SELECT * FROM usuarios;
id | nombre
----+-------+
1 | Kristina |
2 | Khalifa |
(2 filas)

-------

nombredb=# CREATE TABLE nombre_tabla (id serial primary key, nombre_campo varchar(20)); //Creando un campo id tipo clave primaria.

########################################################
########## Hacer un dump de una base de datos ##########
########################################################

pg_dump -U username -W -h host basename > basename.sql

################################################
########## Importar una base de datos ##########
################################################

// Se debe tener creado el usuario con la contraseña y la base de datos, luego el dum sustituira a la bd creada

psql -U username -W -h localhost nombre_base < dump_base.sql

// -U Se refiere al Usuario, en este caso puede ser el usuario propietario de la base de datos o el usuario postgres
// -W Con este parámetro conseguiremos que nos solicite el password del usuario antes especificado
// -h Con este indicamos cuál es el servidor PostgreSQL al que nos conectaremos para obtener nuestro dump, si estamos local podemos colocar localhost sino ponemos la IP del servidor PostgreSQL
// basename Este es el ultimo parámetro realmente en esta linea de comando, por esa razon no tiene alguna letra que indique que el siguiente parámetro es el nombre de la base de datos
// basename.sql Esta parte en realidad solo indica que la salida de nuestro comando pg_dump la guarde en un archivo basename.sql

user@debian:~$ pg_dump -U autana_bd -h 127.0.0.1 comun > comun.sql

######################
##### phppgadmin #####
######################

PhpPgAdmin es una aplicación web, escrita en PHP, para administrar bases de datos PostgreSQL.
Es una aplicación web que provee una interfaz grafica a los usuarios para crear bases de datos, tablas, alterarlas y consultar
sus datos usando el lenguaje estándar SQL. phpPgAdmin estuvo basado en phpMyAdmin, pero hoy día ya no comparte código con él; incluso
provee las mismas funcionalidades y más a los usuarios del servidor de base de datos PostgreSQL.

Instalacion:
$ aptitude install phppgadmin

http://localhost/phppgadmin/ // Interfaz grafica en el navegador web

viernes, 3 de abril de 2015

Media

jueves, 2 de abril de 2015

Guía Jquery

--- ¿Qué es JQuery? ---

jQuery es una biblioteca de JavaScript, permite simplificar la
manera de interactuar con los documentos HTML, manipular el
árbol DOM, manejar eventos, desarrollar animaciones y agregar
interacción con la técnica AJAX a páginas web.

Cada sentencia en JQuery contiene un "selector", para seleccionar
uno o más elementos HTML del documento.

-Ejemplo:
$(selector).acccion();

-Ejemplo:
$(elemento).metodoAEjecutar();

La función $() hace una petición al documento HTML para encontrar
el elemento especificado por el selector, después regresa un objeto
JQuery que es una colección de todos esos objetos que buscó.

En este punto el evento "document ready" es disparado en el
navegador para dar señal de que el documento esta listo para
ser manipulado por JQuery.

El documento puede ser reconocido especificando el documento como tal
y mandando llamar la función ready(), es decir, que cuando el documento
este listo entonces se disparen los eventos.

$(document).ready()

No es posible interactuar de forma segura con el contenido de una página
hasta que el documento no se encuentre preparado para su manipulación.
jQuery permite detectar dicho estado a través de la declaración
$(document).ready() de forma tal que el bloque se ejecutará sólo una
vez que la página este disponible.

El bloque $(document).ready()

<script>
$(document).ready(function() {
      console.log('el documento está preparado');
});
</script>

Es buena practica especificar una función JavaScript anónima junto con
los paréntesis de la función ready(), ejemplo:

<script>
    $(document).ready(function(){
        alert("¡Hola esto es una alerta!");
    });
</script>

En el caso de los eventos, ejemplo:

<script>
    $(elemento).click(function(){
       //Código a ejecutar.
    });
</script>

------------------------
###### Selectores ######
------------------------

Los selectores nos permiten obtener contenido del documento
para poder manipularlo. Digamos que es la parte query de jQuery.

Al ser utilizados, los selectores retornan un array de objetos que
coinciden con los criterios especificados. Este array no es un conjunto
de objetos del DOM, más bien son objetos de Query con un gran número
de funciones y propiedades predefinidas para realizar operaciones con
los mismos.

Selector Descripción:

- #id = Encuentra elementos por ID o identificador
- .clase = Encuentra elementos por clase
- etiqueta.clase = Encuentra elementos del tipo de la etiqueta que tengan
la clase "clase"
- etiqueta#id.clase = Encuentra elementos del tipo de la etiqueta que tienen
el ID "id" y la clase "clase"
- * = Encuentra todos los elementos de la página

-Repaso:
Existe algo llamado selectores, los selectores nos permiten
levantar una etiqueta por su nombre, id e incluso por su class.
Para levantar un elemento por su id. Primero que nada cuando
usamos como en el ejemplo anterior:

<script>
    $(document).ready(function(){
       //Código a ejecutar cuando se carga la página
    });
</script>

Lo que estamos haciendo es levantar un objeto document que es el
padre de todos los elementos de html, ya sean h1, p, ul, div, span, etc.
Lo que estamos diciendo con el evento ready() es que cuando toda la
página esté lista, cuando todas las etiquetas se hayan cargado,
ejecute el código que tiene dentro de la función.

En el caso de que queramos levantar un elemento por su id deberíamos
usar el caracter # seguido por el nombre del id de la siguiente forma:

<script>
    $("#id_del_elemento")
</script>

-------------------------------------


<!doctype html>
<html lang="en">
<head>
<title>Prueba Selectores</title>
<meta charset="UTF-8">
<script src="jquery-1.9.1.js" type="text/javascript"></script><html>
<script type="text/javascript">
$(document).ready(function() {
    $('p').click(function() {
      alert("Es un párrafo");
    });
    $('b').click(function() {
      alert("Está en negrita");
    });
    $('span').click(function() {
      //alert("Está la etiqueta span");
    });
    $('#span_id').click(function() {
      alert("Etiqueta span con id");
    });
    $('.span_class').click(function() {
      alert("Etiqueta span con class");
    });
});
</script>
</head>
<body>
<p>Párrafo 1</p>
<b>Letra A</b>
<br />
<br />
<span>Etiqueta span</span>
<br />
<br />
<span id="span_id">Etiqueta span con id</span>
<br />
<br />
<span class="span_class">Etiqueta span con class</span>
</body>
</html>

-------------------------------------

*Dato: Los Jquery descargados como: jquery-1.9.1.js representan una librería que
se puede manipular para hacer modificaciones, el codigo viene indentado para ser mas
legible, a diferencia de las librerías con la extensión .min.js como: jquery-1.9.1.min.js
que es una versión de la librería donde el codigo viene comprmido, sin indentación lo que
hace el fichero mas liviano al momento de descargarse, util cuando se hace el llamado a
la librería desde un servidor externo.

-------------------------------------


<html>
<head>
      <title>XXX</title>
      <script src="jquery-1.9.1.js" type="text/javascript"></script>
      <meta charset="UTF-8">
</head>
<script type="text/javascript">
$("document").ready(function () {
    alert("¡La página acaba de cargar!");
});
</script>
<body>
XXXXXXXXXXXX
</body>
</html>


-------------------------------------



-------------------------------------


<html>
    <head>
        <title>jQuery Hello World</title>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <meta charset="UTF-8">
    </head>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#texto").html("Hola mundo con JQuery"); //Este texto se escribira en el documento en donde esta la etiqueta con el id especificado
        });
    </script>
    <script>
        $(document).ready(function() {
            $("p").html("Esto es un párrafo"); // El texto se escribirá en todas las etiquetas (<p>)
        });
    </script>
<body>
<div id="texto"> 
</div>
<p></p> 
</body>
</html>

-------------------------------------


<head>
<meta charset="UTF-8">
<title>Prueba jQuery</title>
<script src="jquery-1.9.1.js" type="text/javascript"></script><html>
<script type="text/javascript">
     $('document').ready(function() {
      $("#boton1").click(function() {
        $('.cosas').html('<li>Casa</li>');
      });
     });
</script>
</head>
<body>
<ul class="cosas">
    <li>Puerta</li>
    <li>Techo</li>
    <li>Ventana</li>
    <li>Piso</li>
</ul>
</body>
<button id="boton1">Activar</button>
</html>

-------------------------------------


<html>
    <head>
        <title>jQuery Hello World</title>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <meta charset="UTF-8">
    </head>
    <script type="text/javascript">
        $(document).ready(function() {
            alert("Hola mundo");
        });
    </script>
<body>
xxxxxxxxxx
</body>
</html>

-------------------------------------

<html>
    <head>
      <title>Prueba</title>
      <meta charset="UTF-8">
      <script src="jquery-1.9.1.js" type="text/javascript"></script>
      <script>
            $(document).ready(function() {
              $("#boton1").click(function() {
                  //alert("¡Alerta 1 Activada!");
                  $("#x").html("Alerta 1 activada");
              });
              $("#boton2").click(function() {
                  //alert("¡Alerta 2 Activada!");
                  $("#x").html("Alerta 2 activada");
              });
            });
        </script>
    </head>
<body>
<button id="boton1">Activar 1</button> <p />
<button id="boton2">Activar 2</button>
<div id="x"></div>
</body>
</html>

-------------------------------------

<html>
<head>
    <meta charset="UTF-8">
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#perro").click(function() {
            $("#caja").html("Usted escogió un Perro");
          });
          $("#gato").click(function() {
            $("#caja").html("Usted escogió un Gato");
          });
          $("#conejo").click(function() {
            $("#caja").html("Usted escogió un Conejo");
          });
       });
    </script>
</head>
<body>
Por favor escoja un animal <p />
<button id="perro">Perro</button>
<button id="gato">Gato</button>
<button id="conejo">Conejo</button>
<p id="caja"> ... </p>
</body>
</html>

-------------------------------------


<html>
    <head>
      <title>Prueba</title>
      <meta charset="UTF-8">
      <script src="jquery-1.9.1.js" type="text/javascript"></script>
      <script>
            $(document).ready(function() {
                $("#h").click(function(){
                    alert("Escribirá en el html un Hola Mundo ");
                    $("p").html("Hola Mundo");
                });
                $('#btn').click(function () {
                    alert("Activó la función");
                });
            });
        </script>
    </head>
<body>
    <div id="h">
        <a href="#">Función Hola Mundo</a>
    </div>
    <br />
    <button id="btn">Botón</button>
    <br />
    <p></p>
</body>
</html>

-------------------------------------


<html>
    <head>
        <title>Prueba</title>
        <meta charset="UTF-8">
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script>
            $(document).ready(function(){
                $("#h").click(function(evento){
                    alert("Alerta activada!");
                    evento.preventDefault();
                });
            });
        </script>
    </head>
<body>
    <div id="h">
        <a href="#">Activar alerta</a>
    </div>
</body>
</html>

-------------------------------------


<html>
<head>
   <title>prueba</title>
   <script src="jquery-1.9.1.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         $("#boton").click(function(){
            var nombre = $("#nombre").val();
            $("#saludo").html('Hola ' + nombre);
         });
      });
   </script>
</head>
<body>
    <form action="javascript:void(0);">
       <input type="text" id="nombre" />
       <input type="button" id="boton" value="Enviar" />
       <div id="saludo"></div>
    </form>
</body>
</html>

-------------------------------------


<html>
<head>
   <title>prueba</title>
   <meta charset="UTF-8">
   <script src="jquery-1.9.1.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         $("#boton").click(function(){
            var nombre = $("#nombre").val();
            //$("#saludo").html('Hola ' + nombre);
            if (nombre == '') {
              alert("El nombre es requerido");
            }
            else {
              alert("¡Datos enviados!");
            }
         });
      });
   </script>
</head>
<body>
    <form action="javascript:void(0);">
       <b>Nombre: </b><input type="text" id="nombre" />
       <input type="button" id="boton" value="Enviar" />
       <div id="saludo"></div>
    </form>
</body>
</html>

-------------------------------------


<html>
<head>
    <title>prueba</title>
    <meta charset="UTF-8">
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $("#boton").click(function(){
            var nombre = $("#nombre").val();
            if (nombre == '') {
              $("#error_mensaje").html('¡Campo requerido!');
              //alert("El nombre es requerido");
            }
            else {
              alert("¡Datos enviados!");
            }
         });
      });
    </script>
    <style type="text/css">
      span#error_mensaje {
        color: #FF0000;
      }
    </style>
</head>
<body>
    <form action="javascript:void(0);">
      <b>Nombre: </b><input type="text" id="nombre" />
      <span id="error_mensaje"></span>
      <br />
      <input type="button" id="boton" value="Enviar" />
    </form>
</body>
</html>

-------------------------------------


<html>
<head>
    <title>prueba</title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#copiar").click(function(){
             var parrafo = $("#parrafo1").html();
             $("#parrafo2").html(parrafo);
          });
       });
    </script>
</head>
<body>
    <p id="parrafo1"> XXXXXXXXXX </p>
    <a id="copiar" href="#"> Copiar </a>
    <p id="parrafo2"> ... </p>
</body>
</html>

-------------------------------------


<html>
<head>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#valor_1").keyup(function(){
             var valor = $(this).val();
             $("#valor_2").val(valor);
          });
       });
    </script>
</head>
<body>
    <form action="javascript:void(0);">
       Escribir algo
       <input type="text" id="valor_1" />
       <br />
       <textarea id="valor_2" cols="40" rows="10"></textarea>
    </form>
</body>
</html>

-------------------------------------


<html>
<head>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#cambiar").click(function() {
            variable = "YYYYYYY";
            $("#parrafo").html(variable);
          });
       });
      </script>
</head>
<body>
    <a id="cambiar" href="#">
      <button>cambiar</button>
    </a>
    <p id="parrafo"> XXXXXXX </p>
</body>
</html>

-------------------------------------


<html>
<head>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
      var texto = $("#caja").html();
        $("#caja").hover(
        function() {
          $(this).html('XXXXX');//Mouse arriba del elemento
        },
        function() {
          $(this).html(texto);//Mouse fuera del elemento
        }
      );
    });
</script>
<style type="text/css">
   #caja {
     background-color: #ccc;
     width: 100px;
     height: 100px;
     padding: 10px;
   }
</style>
</head>
<body>
<div id="caja">
    Posicione el mouse arriba
</div>
</body>
</html>

-------------------------------------




<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#aumentar").click(function(){
      $("img").attr("width", "200");
    });
    $("#normal").click(function(){
      $("img").attr("width", "100");
    });
});
</script>
</head>
<body>
<img src="firefox-icon.png" width="100"> <br />
<button id="aumentar">Aumentar</button>
<button id="normal">Normal</button>
</body>
</html>

-------------------------------------


<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

-------------------------------------


<html>
<head>
    <meta charset="utf-8" />
    <title>Seleccionar una fecha con jquery-ui</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        $(function() {
            $("#fecha").datepicker(
                {
                    dateFormat: "dd/mm/yy",
                    dayNames: [ "Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado" ],
                    dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ],
                    firstDay: 1,
                    gotoCurrent: true,
                    monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Deciembre" ]
                }
            );
        });
    </script>
    <style>
        #fecha {
            width:100px;
            text-align:center;
        }
    </style>
</head>
<body>
    <h1>Ejemplo de seleccionar una fecha con jquery-ui</h1>
    <form>
        <p>Fecha: <input type="text" name="fecha" id="fecha" value=""></p>
    </form>
</body>
</html>

-------------------------------------


<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Dialogo para formulario simple</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="jquery.ui.datepicker-es.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.2.sunny.css" />
<script>
    $(function () {
    $(function () {
    $.datepicker.setDefaults($.datepicker.regional["es"]);
    $("#datepicker").datepicker({
    firstDay: 1
    });
    });
    $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
    "Aceptar": function () {
    var texto1 = document.getElementById('nombre').firstChild;
    var newText1 = document.createTextNode(el_nombre.value);
    texto1.parentNode.replaceChild(newText1, texto1);
    var texto2 = document.getElementById('fecha').firstChild;
    var newText2 = document.createTextNode(datepicker.value);
    texto2.parentNode.replaceChild(newText2, texto2);
    $(this).dialog("close");
    },
    "Cerrar": function () {
    $(this).dialog("close");
    }
    }
    });
    $("#abrir")
    .button()
    .click(function () {
    el_nombre.value = document.getElementById('nombre').firstChild.nodeValue;
    datepicker.value = document.getElementById('fecha').firstChild.nodeValue;
    $("#dialog").dialog("option", "width", 600);
    $("#dialog").dialog("option", "height", 300);
    $("#dialog").dialog("option", "resizable", false);
    $("#dialog").dialog("open");
    });
    });
</script>
</head>
<body>
<div id="dialog" title="Formulario simple">
Nombre:<input type="text" id="el_nombre" value="" /><br />
Fecha:<input type="text" id="datepicker" />
</div>
Nombre: <strong id="nombre">Julio</strong><br />
Fecha: <strong id="fecha">11/07/1975</strong><br />
<hr />
<button id="abrir">Abrir diálogo</button>
</body>
</html>

-------------------------------------


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Validación con jQuery.validate</title>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
    $("#form1").validate();

    $("#txtNombre").rules("add", {
        required: true,
        messages: {
            required: "<span>El campo nombre es obligatorio</span>"
        }
    });

    $("#txtPwd").rules("add", {
        required: true,
        minlength: 6,
        messages: {
            required: "<span>El password no puede ser nulo.</span>",
            minlength: $.validator.format("<span>El largo mínimo permitido es {0} caracteres.</span>")
        }
    });

    $("#txtEdad").rules("add", {
        required: true,
        min: 18,
        messages: {
            required: "<span>Debe entrar una edad.</span>",
            min: $.validator.format("<span>La edad mínima debe ser {0} años.</span>"),
            max: $.validator.format("<span>La edad máxima debe ser {0} años.</span>")
        }
    });

    $("#txtEmail").rules("add", {
        email: true,
        messages: {
            email:"<span>Debe ingresar un email válido o dejarlo en blanco</span>"
        }
    });

    $('#btn').click(function () {
        $("#form1").valid();
        $("#form1").submit();
    });
});
</script>
<style>
    span {
      color: red;
      padding-left: 5px;
      display:inline;
    }
</style>
</head>
<body>
<form id="form1" action="#">
    Nombre: <input name="txtNombre" type="text" id="txtNombre" /> <br />
    Password: <input type="password" name="txtPwd" id="txtPwd" /> <br />
    Edad: <input name="txtEdad" type="number" id="txtEdad" min="18" max="60"/> <br />
    Email: <input name="txtEmail" id="txtEmail" type="email" /> <br />
    <input id="btn" type="button" value="Enviar"/>
</form>
</body>
</html>

-------------------------------------


<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Uso básico</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function () {
$("#dialog").dialog();
});
</script>
</head>
<body>
Diálogo:
<div id="dialog" title="Dialogo básico">
<p>
    Diálogo básico amodal. Puede ser movido, redimensionado
    y cerrado haciendo clic sobre el botón 'X'.
</p>
</div>
</body>
</html>

-------------------------------------


<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
    $( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>

-------------------------------------


<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Dialogo modal</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
    $(function () {
      $("#dialog").dialog({
        autoOpen: false,
        modal: true
    });
    $("#abrir").button().click(function () {
        $("#dialog").dialog("open");
      });
    });
</script>
</head>
<body>
Diálogo:
<div id="dialog" title="Dialogo básico">
    XXXXXXXXXXX
</div>
<button id="abrir">Abrir diálogo</button>
</body>
</html>

-------------------------------------


<html>
<head>
<title>Caja de diálogo jQuery UI</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
     $("#dialogo").dialog({
        modal: true,
        title: "Caja con opciones",
        width: 550,
        minWidth: 400,
        maxWidth: 650,
        show: "fold",
        hide: "scale"
     });
});
</script>
</head>
<body>
<h1>Caja de diálogo jQuery UI</h1>
<p>Cuando se terminen de cargar los scripts, aparecerá una caja de diálogo...</p>
<div id="dialogo">
     <p>Esta es la caja de diálogo más básica, que se puede redimensionar y arrastrar a otra posición. Además, se puede cerrar con el icono del aspa "X" que aparece en el titular de la caja.</p>
</div>
</body>
</html>

-------------------------------------
-------------------------------------

-------------------------------------
-------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plantilla básica de Bootstrap</title>
    
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <h1>¡Hola mundo!</h1>
    <h1>¡Hola mundo!</h2>
    <h1>¡Hola mundo!</h3>
    <b>¡Hola mundo!</b>
    
    <script src="http://code.jquery.com/jquery.js"></script>
    
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

-------------------------------------


<!doctype html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>jQuery desde Cero</title>
      <script src="jquery-1.9.1.js" type="text/javascript"></script>
    </head>
<script type="text/javascript">
$('document').ready(function() {
      $('p').css({
        //'border': '3px solid green',
        //'background-color': 'blue',
        'border': 'ridge 1px',
        'width': '500px'
      });
});
</script>
<body>
    <p>texto de prueba</p>
    <p>texto de prueba 2</p>
    <p>texto de prueba 3</p>
    <p>texto de prueba 4</p>
    </body>
</html>

-------------------------------------


<html>
    <head>
        <title>zxx</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">
        $('document').ready(function() {
            $("#activar").click(function() {
                $('#cuerpo1').appendTo('#cuerpo2');
            });
        });
        </script>
    </head>
<style type="text/css">
#cabecera {
    border:ridge 1px;
    height: 50px;
    background-color: yellow;
}
#cuerpo1 {
    border:ridge 1px;
    height: 100px;
    background-color: blue;
}
#cuerpo2 {
    border:ridge 1px;
    height: 200px;
    background-color: red;
}
</style>
<body>
<div id="cabecera">
    Cabecera
</div>
<p />
<div id="cuerpo1">
    <p>Xxxxxxxxxxxxx
    xxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxx</p>
</div>
<p />
<div id="cuerpo2">
    xxx
</div>
<div>
    <button id="activar">Activar</button>
</div>
</body>
</html>

-------------------------------------


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mover objeto en todo el documento jQuery</title>
    <script src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jquery.js"></script>
    <script type="text/javascript" src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jqueryui.js"></script>
    <style type="text/css">
        #mueveme{
            width:100px;
            height:100px;
            border:1px solid black;
        }
    </style>
    <script type="text/javascript">
        var x=$(document);
        x.ready(inicio);
        function inicio(){
            var x=$("#mueveme");
            x.draggable();
        }
    </script>
</head>
<body>
   <div id="mueveme">Mueveme</div>
</body>
</html>

-------------------------------------


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Algunos efectos que trae con sigo jQuery UI</title>
    <script src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jquery.js"></script>
    <script type="text/javascript" src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jqueryui.js"></script>
    <style type="text/css">
        .divefectos{
            width:200px;
            height:200px;
            text-align:left;
            border:1px solid black;
            position:relative;
            background:#CCC;
            margin-left: 20px;
        }
    </style>
    <script type="text/javascript">
        $('document').ready(function () {
            $("#boton1").click(function (){ $("#efecto1").effect( 'blind' , "slow" ); });
            $("#boton2").click(function (){ $("#efecto2").effect( 'bounce' , "slow" ); });
            $("#boton3").click(function (){ $("#efecto3").effect( 'shake' , "slow" ); });
            $("#boton4").click(function (){ $("#efecto4").effect( 'clip' , "slow" ); });
            $("#boton5").click(function (){ $("#efecto5").effect( 'drop' , "slow" ); });
            $("#boton6").click(function (){ $("#efecto6").effect( 'explode' , "slow" ); });
            $("#boton7").click(function (){ $("#efecto7").effect( 'puff' , "slow" ); });
            $("#boton8").click(function (){ $("#efecto8").effect( 'fade' , "slow" ); });
            $("#boton9").click(function (){ $("#efecto9").effect( 'fold' , "slow" ); });
        });
    </script>
</head>
<body>
<div id="efecto1" class="divefectos">Desaparece hacia arriba</div>
<input type="button" value="Efecto blind" id="boton1">
<p>------------</p>
<div id="efecto2" class="divefectos">Rebote vertical</div>
<input type="button" value="Efecto bounce" id="boton2">
<p>------------</p>
<div id="efecto3" class="divefectos">Rebote horizontal</div>
<input type="button" value="Efecto shake" id="boton3">
<p>------------</p>
<div id="efecto4" class="divefectos">Desaparece desde el centro</div>
<input type="button" value="Efecto clip" id="boton4">
<p>------------</p>
<div id="efecto5" class="divefectos">Combina transparencia con movimiento hacia la izquierda</div>
<input type="button" value="Efecto drop" id="boton5">
<p>------------</p>
<div id="efecto6" class="divefectos">Lo divide en 9 pedazos y los explota con transparencia</div>
<input type="button" value="Efecto explode" id="boton6">
<p>------------</p>
<div id="efecto7" class="divefectos">Hace lo mismo sin dividirlo y con escala mas cada vez mas grande</div>
<input type="button" value="Efecto puff" id="boton7">
<p>------------</p>
<div id="efecto8" class="divefectos">El objeto desaparece</div>
<input type="button" value="Efecto fade" id="boton8">
<p>------------</p>
<div id="efecto9" class="divefectos">El objeto se pliega</div>
<input type="button" value="Efecto fold" id="boton9">
</body>
</html>


-------------------------------------


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Algunos efectos que trae con sigo jQuery UI</title>
    <script src="googledrive_jquery.js" type="text/javascript"></script>
    <script src="jQueryUI.js" type="text/javascript"></script>
    <style type="text/css">
        #area_form {
            width: 500px;
            /*border: ridge 1px;*/
            text-align: right;
        }
    </style>
    <script type="text/javascript">
      $('document').ready(function () {
        //$("#boton1").click(function (){ $("#efecto1").effect( 'drop' , "slow" ); });
        $("#boton1").click(function () {
            $("#efecto1").effect( 'drop' , "slow" );
        });
        $("#boton2").click(function () {
            $("#efecto2").effect( 'drop' , "slow" );
        });
        $("#boton3").click(function () {
            $("#efecto3").effect( 'drop' , "slow" );
        });
        $("#boton4").click(function () {
            $("#efecto4").effect( 'drop' , "slow" );
        });
        $("#boton5").click(function () {
            $("#efecto5").effect( 'drop' , "slow" );
        });
        $("#boton6").click(function () {
            $("#efecto6").effect( 'drop' , "slow" );
        });
        $("#boton7").click(function () {
            $("#efecto7").effect( 'drop' , "slow" );
        });
      });
    </script>
</head>
<body>

<div id="area_form">
    <form action="#" method="get">
        <div id="efecto1" class="divefectos">
            Fecha: <input type="text" name="fecha">
            <input type="button" value="x" id="boton1">
        </div>
        <p />
        <div id="efecto2" class="divefectos">
            Hora de inicio: <input type="text" name="hora_inicio">
            <input type="button" value="x" id="boton2">
        </div>
        <p />
        <div id="efecto3" class="divefectos">
            Hora de finalización: <input type="text" name="hora_finalización">
            <input type="button" value="x" id="boton3">
        </div>
        <p />
        <div id="efecto4" class="divefectos">
            Asistentes: <input type="text" name="asistentes">
            <input type="button" value="x" id="boton4">
        </div>
        <p />
        <div id="efecto5" class="divefectos">
            Asunto: <input type="text" name="asunto">
            <input type="button" value="x" id="boton5">
        </div>
        <p />
        <div id="efecto6" class="divefectos">
            Puntos tratados: <input type="button" value="x" id="boton6"><br />
            <textarea name="puntos_tratados" rows="10" cols="40"></textarea>
        </div>
        <p />
        <div id="efecto7" class="divefectos">
            Acuerdos: <input type="button" value="x" id="boton7"><br />
            <textarea name="acuerdos" rows="10" cols="40"></textarea>
        </div>
        <p />
        <input type="submit" value="Guardar">
        <input type="reset" value="Borrar">
    </form>
</div>
</body>
</html>

-------------------------------------


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mover elementos de una lista con jQuery</title>
    
    <script src="googledrive_jquery.js" type="text/javascript"></script>
    <script src="jQueryUI.js" type="text/javascript"></script>
    <style type="text/css">
      #area_form {
        width: 500px;
        border: ridge 1px;
        text-align: right;
      }
      ul{
        list-style:none;
      }
      ul li{
        padding-top: 5px;
        border: ridge 1px red;
        background-color: #F2F2F2;
      }
      #campo {
        /*border: ridge 1px;*/
      }
    </style>
<script type="text/javascript">
    $('document').ready(function () {
        $("ul").sortable();
    });
</script>
</head>
<body>
<div id="area_form">
    <form action="#" method="get">
    <ul>
      <li>Fecha: <input type="text" name="fecha"></li>
      <p />
      <li>Hora de inicio: <input type="text" name="hora_inicio"></li>
      <p />
      <li>Hora de finalización: <input type="text" name="hora_finalización"></li>
      <p />
      <li>Asistentes: <input type="text" name="asistentes"></li>
      <p />
      <li>Asunto: <input type="text" name="asunto"></li>
      <p />
      <li>Puntos tratados: <br>
        <textarea name="puntos_tratados" rows="10" cols="40"></textarea><br />
      </li>
      <p />
      <li>
        Acuerdos:<br />
         <textarea name="acuerdos" rows="10" cols="40"></textarea>
       </li>
      <p />
      <li>
        <input type="submit" value="Guardar">
        <input type="reset" value="Borrar">
      </li>
    </ul>
    </form>
</div>
</body>
</html>

-------------------------------------


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Seleccionar varios elementos de una lista con jQuery</title>
    <script src="googledrive_jquery.js" type="text/javascript"></script>
    <script src="jQueryUI.js" type="text/javascript"></script>
    <style type="text/css">
    ul{
        list-style:none;
    }
    ul li{
        border: 1px solid gray;
        width:200px;
        height:30px;
    }
    ul .ui-selecting{
        background:yellow;
    }
    ul .ui-selected{
        background:red;
    }
</style>
    <script type="text/javascript">
    $('document').ready(function () {
      $("ul").selectable();
    });
</script>
</head>
<body>
   <ul>
     <li>Elemento 1</li>
     <li>Elemento 2</li>
     <li>Elemento 3</li>
     <li>Elemento 4</li>
     <li>Elemento 5</li>
</ul>
</body>
</html>

-------------------------------------


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>remove demo</title>

<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
$('document').ready(function () {
    $( "#enlace" ).click(function() {
      $( "a" ).remove();
    });
    $( "#titulo" ).click(function() {
      $( "h1" ).remove();
    });
    $( "#parrafo" ).click(function() {
      $( "p" ).remove();
    });
});
</script>
<style>
a {
    background-color: yellow;
}
h1 {
    background-color: blue;
}
p {
    background-color: red;
}

</style>
</head>
<body>
<a href="#">Esto es un enlace</a>
<h1>Esto es un título</h1>
<p>Esto es un párrafo...</p>
<br />
<button id="enlace">Borrar enlace</button>
<button id="titulo">Borrar título</button>
<button id="parrafo">Borrar párrafo</button>
</body>
</html>

-------------------------------------


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Algunos areas que trae con sigo jQuery UI</title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <style type="text/css">
        #area_form {
            width: 500px;
            border: ridge 1px;
            text-align: right;
        }
    </style>
    <script type="text/javascript">
      $('document').ready(function () {
        $("#boton1").click(function () {
            $("#area1").remove();
        });
        $("#boton2").click(function () {
            $("#area2").remove();
        });
        $("#boton3").click(function () {
            $("#area3").remove();
        });
        $("#boton4").click(function () {
            $("#area4").remove();
        });
        $("#boton5").click(function () {
            $("#area5").remove();
        });
        $("#boton6").click(function () {
            $("#area6").remove();
        });
        $("#boton7").click(function () {
            $("#area7").remove();
        });
      });
    </script>
</head>
<body>
<div id="area_form">
    <form action="#" method="get">
        <div id="area1">
            Fecha: <input type="text" name="fecha">
            <input type="button" value="x" id="boton1">
        </div>
        <p />
        <div id="area2">
            Hora de inicio: <input type="text" name="hora_inicio">
            <input type="button" value="x" id="boton2">
        </div>
        <p />
        <div id="area3">
            Hora de finalización: <input type="text" name="hora_finalización">
            <input type="button" value="x" id="boton3">
        </div>
        <p />
        <div id="area4">
            Asistentes: <input type="text" name="asistentes">
            <input type="button" value="x" id="boton4">
        </div>
        <p />
        <div id="area5">
            Asunto: <input type="text" name="asunto">
            <input type="button" value="x" id="boton5">
        </div>
        <p />
        <div id="area6">
            Puntos tratados: <input type="button" value="x" id="boton6"><br />
            <textarea name="puntos_tratados" rows="10" cols="40"></textarea>
        </div>
        <p />
        <div id="area7">
            Acuerdos: <input type="button" value="x" id="boton7"><br />
            <textarea name="acuerdos" rows="10" cols="40"></textarea>
        </div>
        <p />
        <input type="submit" value="Guardar">
        <input type="reset" value="Borrar">
    </form>
</div>
</body>
</html>

-------------------------------------


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
    $("document").ready(function(){
      $("#add").click(function () {
        $("#contenido").append( "<h2>Cabecera</h2>" );
      });
    });
</script>
<style type="text/css">
#contenido {
    height: 400px;
    width: 400px;
    border: ridge 1px;
    overflow: auto;
}
</style>
</head>
<body>
    <div id="contenido">
    </div>
    <button id="add">Agregar</button>
</body>
</html>

-------------------------------------


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>clone demo</title>

<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#clonar").click(function(){
        $("#a").clone().prependTo("#b");
    });
});
</script>
</head>
<body>
    <div id="a">AAA</div>
    <div id="b"></div>
    <p />
    <button id="clonar">Clonar</button>
</body>
</html>

-------------------------------------


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XXXXXX</title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
    <div id="contenido"></div>
    <button id="fecha">Agregar Fecha</button>
</div>
</body>
</html>
<script>
$("document").ready(function() {
        cont = 0;
        limite = 3;
        $("#fecha").click(function () {
            if (cont == limite) {
                alert("Exedíste el límite de adición (" + cont + ") campos");
            }
            else {
                fecha = "<div id='area_fecha'>Fecha: <input type='text' name='fecha"+cont+"'><p /></div>"
                $("#contenido").append(fecha);
                //alert(contador);
                cont=cont+1;
            }
        });
    });
</script>

-------------------------------------


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function() {
                $('[data-toggle="tooltip"]').tooltip();
            });
        </script>
    </head>
<body>
    <div class="container">
        <h1>Titulo 1</h1>
        <h2>Titulo 2</h2>
        <h3>Titulo 3</h3>
        <a href="#" data-toggle="tooltip" title="Recuerda llenar todos los datos!">Registrarse</a>
    </div>
</body>
</html>

-------------------------------------



<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function() {
                $('[data-toggle="tooltip"]').tooltip();
            });
        </script>
    </head>
<body>
    <div class="container" align="center">
        <br />
        <br />
        <br />
        <br />
        <br />
        
        <button id="grafo" data-toggle="tooltip" data-placement="top" class="btn btn-success" title="Permite apreciar gráficamente cómo las cuentas de Twitter mencionan etiquetas (hashtags) y se mencionan entre sí. >Grafo de menciones">Grafo de menciones</button>

        <p>.</p>


        <button id="grafo" data-toggle="tooltip" data-placement="bottom" class="btn btn-success" title="Permite apreciar gráficamente cómo las cuentas de Twitter mencionan etiquetas (hashtags) y se mencionan entre sí. >Grafo de menciones">Grafo de menciones</button>

        <p>.</p>

        <button id="grafo" data-toggle="tooltip" data-placement="left" class="btn btn-success" title="Permite apreciar gráficamente cómo las cuentas de Twitter mencionan etiquetas (hashtags) y se mencionan entre sí. >Grafo de menciones">Grafo de menciones</button>

        <p>.</p>

        <button id="grafo" data-toggle="tooltip" data-placement="right" class="btn btn-success" title="Permite apreciar gráficamente cómo las cuentas de Twitter mencionan etiquetas (hashtags) y se mencionan entre sí. >Grafo de menciones">Grafo de menciones</button>

    </div>
</body>
</html>

-------------------------------------


<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
        button.tooltip {outline:none; }
        button.tooltip strong {line-height:30px;}
        button.tooltip:hover {text-decoration:none;}
        button.tooltip span {
            z-index:10;display:none; padding:14px 20px;
            margin-top:-30px; margin-left:28px;
            width:300px; line-height:16px;
        }
        button.tooltip:hover span{
            display:inline; position:absolute; color:#111;
            border:1px solid #DCA; background:#fffAF0;}
        .callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}

        /*CSS3 extras*/
        button.tooltip span
        {
            border-radius:4px;
            box-shadow: 5px 5px 8px #CCC;
        }
    </style>
</head>
<body>
    <center>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <button class="tooltip"> Grafo de Menciones
            <span>
                Permite apreciar gráficamente cómo las cuentas de Twitter mencionan etiquetas (hashtags) y se mencionan entre sí.
            </span>
        </button>
        <br/>
        <button class="tooltip"> Agrupamiento por temas
            <span>
                Permite apreciar gráficamente los "temas" principales tratados en los textos de los tuits.
            </span>
        </button>
    </center>
</body>
</html>

-------------------------------------


<html>
<head>
    <title></title>
    <meta charset="UTF-8">
<style type="text/css">
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 64px auto;
    text-align: center;
    font-size: 100%;
    max-width: 640px;
    width: 94%;
}

a:hover {
    text-decoration: none;
}

header,
.demo,
.demo p {
    margin: 4em 0;
    text-align: center;
}

/**
   * Tooltip Styles
   */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
    position: relative;
    cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition:
        opacity 0.2s ease-in-out,
          visibility 0.2s ease-in-out,
          -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
      -moz-transition:
          opacity 0.2s ease-in-out,
          visibility 0.2s ease-in-out,
          -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
      transition:
          opacity 0.2s ease-in-out,
          visibility 0.2s ease-in-out,
          transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform:    translate3d(0, 0, 0);
    transform:         translate3d(0, 0, 0);
    pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
    z-index: 1000;
    padding: 8px;
    width: 160px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    font-size: 14px;
    line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
    bottom: 100%;
    left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
    margin-left: -6px;
    margin-bottom: -12px;
    border-top-color: #000;
    border-top-color: hsla(0, 0%, 20%, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
    margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
    -webkit-transform: translateY(-12px);
    -moz-transform:    translateY(-12px);
    transform:         translateY(-12px);
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
    right: 100%;
    bottom: 50%;
    left: auto;
}

.tooltip-left:before {
    margin-left: 0;
    margin-right: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-left-color: #000;
    border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
    -webkit-transform: translateX(-12px);
    -moz-transform:    translateX(-12px);
    transform:         translateX(-12px);
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
    top: 100%;
    bottom: auto;
    left: 50%;
}

.tooltip-bottom:before {
    margin-top: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #000;
    border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
    -webkit-transform: translateY(12px);
    -moz-transform:    translateY(12px);
    transform:         translateY(12px);
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
    bottom: 50%;
    left: 100%;
}

.tooltip-right:before {
    margin-bottom: 0;
    margin-left: -12px;
    border-top-color: transparent;
    border-right-color: #000;
    border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
    -webkit-transform: translateX(12px);
    -moz-transform:    translateX(12px);
    transform:         translateX(12px);
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
    top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
    margin-left: 0;
    margin-bottom: -16px;
}
</style>
</head>
<body>
    <center>

        <p>Data attribute only <a href="#" data-tooltip="I’m the tooltip text">Tooltip</a></p>
        <p><code>.toolbar</code> <a href="#" class="tooltip" data-tooltip="I’m the tooltip text.">Tooltip</a></p>
        <p><code>.toolbar-top</code> <a href="#" class="tooltip-top" data-tooltip="I’m the tooltip text.">Tooltip</a></p>
        <p><code>.toolbar-right</code> <a href="#" class="tooltip-right" data-tooltip="I’m the tooltip text.">Tooltip</a></p>
        <p><code>.toolbar-bottom</code> <a href="#" class="tooltip-bottom" data-tooltip="I’m the tooltip text.">Tooltip</a><p>
        <p><a href="#" class="tooltip-left" data-tooltip="I’m the tooltip text.">Tooltip</a> <code>.toolbar-left</code></p>

    </center>
</body>
</html>

-------------------------------------


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
      $(document).ready(function(){
          $('[data-toggle="popover"]').popover();
      });
    </script>
</head>
<body>
    <div align="center">
      <h3>Ejemplo de Popover</h3>
      <a href="#" data-toggle="popover" title="Cabecera del Popover" data-content="contenido dentro del popover">Activar Popover</a>
    </div>
</body>
</html>









-------------------------------------


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
<body>
    <script>
        $(document).ready(function() {
            $('[data-toggle="popover"]').popover();
        });
    </script>

    <div class="container" align="center">
        <h3>Popover Example</h3>
        <a href="#" data-toggle="popover" data-trigger="hover" title="Cabecera" data-content="Cuerpo">Posa el cursor</a>
    </div>
</body>
</html>

-------------------------------------


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        
        <script>
            $(document).ready(function() {
                $('#boton').prop('title', 'Enunciado para el boton, se muestra al posar el cursor');
                $('#boton').click(function(e){
                    alert("Hola!");
                    e.preventDefault();
                });
            });
        </script>
    </head>
<body>
    <div align="center">
        <br />
        <br />
        <button id="boton" type="" class="btn btn-success" >PRUEBA</button>
    </div>
</body>
</html>

-------------------------------------


<!DOCTYPE html>
<html lang="en">
<head>
<title>Curso JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
      $('[data-toggle="tooltip"]').tooltip();
    });
</script>
<style type="text/css">
    label {
        display:block;
    }
</style>
</head>
<body bgcolor="red">
    <div class="container">
      <h2>Curso JavaScript</h2>
      <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Registrarse</button>
      
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">×</button>
              <h4 class="modal-title">Registrarse en el curso</h4>
            </div>
            <div class="modal-body">
                <form action="#" method="get">
                    <label>Nombre: <input type="text" name="nombre" placeholder="Tu Nombre" required> <br /></label>
                    <label>e-mail: <input type="text" name="email" placeholder="Tu email" required> <br /></label>
                    <p></p>
                    <input type="submit" data-toggle="tooltip" title="Recuerda llenar todos los campos!" value="Registrarse">
                    <input type="reset" value="Borrar">
                </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Salir</button>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

-------------------------------------


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
<p>JSON example Jquery</p>
<div id="caja" >
</div>
<button>Activar</button>
</body>
</html>
<script type="text/javascript">
var json_datos = {"usuarios":[
    {"nombre":"María","cedula":"12345678"},
    {"nombre":"Carlos","cedula":"87654321"},
]};
var a ="YYY"
$(document).ready(function() {
    $("button").click(function() {
      //alert("¡Alerta Activada!");
      //$("#caja").html(a);
      $("#caja").html(json_datos.usuarios[0].nombre);
    });
});
</script>

-------------------------------------


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
<p>JSON example Jquery</p>
<div id="caja" >
</div>
<button>Activar</button>
</body>
</html>
<script type="text/javascript">
var json_datos = {"usuarios":[
    {"nombre":"María","cedula":"12345678"},
    {"nombre":"Carlos","cedula":"87654321"},
]};
var a ="YYY"
$(document).ready(function() {
    $("button").click(function() {
      //alert("¡Alerta Activada!");
      //$("#caja").html(a);
      $("#caja").append("Nombre: " + json_datos.usuarios[0].nombre);
      $("#caja").append(" / Cédula: " + json_datos.usuarios[0].cedula);
      $("#caja").append("<br />");
      $("#caja").append("Nombre: " + json_datos.usuarios[1].nombre);
      $("#caja").append(" / Cédula: " + json_datos.usuarios[1].cedula);
    });
});
</script>

-------------------------------------


<!DOCTYPE html>
<html>
<head>

<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").empty();
    });
});
</script>
</head>
<body>
<div style="height:100px;background-color:yellow">
This is some text
<p>This is a paragraph inside the div.</p>
</div>
<p>This is a paragraph outside the div.</p>
<button>Remove content of the div element</button>
</body>
</html>

-------------------------------------


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <script>
          var counterText = 0;
          var counterRadioButton = 0;
          var counterCheckBox = 0;
          var counterTextArea = 0;
          function addAllInputs(divName, inputType){
               var newdiv = document.createElement('div');
               switch(inputType) {
              case 'text':
                         newdiv.innerHTML = "Entry " + (counterText + 1) + " <br><input type='text' name='myInputs[]'>";
                   counterText++;
                     break;
                    case 'radio':
                         newdiv.innerHTML = "Entry " + (counterRadioButton + 1) + " <br><input type='radio' name='myRadioButtons[]'>";
                   counterRadioButton++;
                   break;
                    case 'checkbox':
                         newdiv.innerHTML = "Entry " + (counterCheckBox + 1) + " <br><input type='checkbox' name='myCheckBoxes[]'>";
                         counterCheckBox++;
                   break;
                    case 'textarea':
                         newdiv.innerHTML = "Entry " + (counterTextArea + 1) + " <br><textarea name='myTextAreas[]'>type here...</textarea>";
                   counterTextArea++;
                   break;
                    }
               document.getElementById(divName).appendChild(newdiv);
          }
        </script>
    </head>
<body>
<form name="myForm" method="POST">
<div id="dynamicInputs">
</div>
<p />
<select name='inputSelect'>
    <option value ="text">text field</option>
    <option value ="radio">radio button</option>
    <option value ="checkbox">checkbox</option>
    <option value ="textarea">textarea</option>
</select>
<br />
<input type="button" value="Add selected input" onClick="addAllInputs('dynamicInputs', document.myForm.inputSelect.value);"><br />
</form>
</body>
</html>

-------------------------------------



<!DOCTYPE html>
<html lang="en">
    <head>
        <title>XXX</title>
        <meta charset="utf-8">
        <script>
          var EnunciadoText = 0;
          var counterText = 0;
          var counterTextArea_corto = 0;
          var counterTextArea_larga = 0;
          var counterVerdadero_Falso = 0;
          function addAllInputs(divName, inputType) {
            var newdiv = document.createElement('div');
            switch(inputType) {
              case 'enunciado':
                newdiv.innerHTML = "Enunciado, pregunta o título " + "(" + (EnunciadoText + 1) + ")" + "<br /><input type='text' name='myInputs_enunciado' ><p />";
                EnunciadoText++;
              break;
              case 'text':
                newdiv.innerHTML = "Texto Corto " + "(" + (counterText + 1) + ")" + "<br /><input type='text' name='myInputs' ><p />";
                counterText++;
              break;
              case 'textarea_corta':
                newdiv.innerHTML = "Area de Texto Corto " + "(" + (counterTextArea_corto + 1) + ")" + "<br /><textarea name='myTextAreas_corto' rows='5' cols='50' ></textarea><p />";
                counterTextArea_corto++;
              break;
              case 'textarea_larga':
                newdiv.innerHTML = "Area de Texto Largo " + "(" + (counterTextArea_larga + 1) + ")" + "<br /><textarea name='myTextAreas_larga' rows='10' cols='60' ></textarea><p />";
                counterTextArea_larga++;
              break;
              case 'verdadero_falso':
                newdiv.innerHTML = "Verdadero o Falso " + "(" + (counterVerdadero_Falso + 1) + ")" + "<br />Pregunta: <input type='text' name='myInputs_pregunta_vof'><select name='select_form[]'><option>---<option>Sí<option>No</select><p />";
                counterVerdadero_Falso++;
              break;
            }
            document.getElementById(divName).appendChild(newdiv);
          }
        </script>
    </head>
<body>
<h3>Agregar campos </h3>
<form name="myForm" method="GET">
<div id="dynamicInputs">
</div>
<p />
<hr>
<select name='inputSelect'>
    <option value ="enunciado">Enunciado, pregunta o título</option>
    <option value ="text">Campo de Texto</option>
    <option value ="textarea_corta">Area de Texto</option>
    <option value ="textarea_larga">Area de Largo</option>
    <option value ="verdadero_falso">Verdadero o Falso</option>
</select>
<br />
<br />
<input type="button" value="Agregar" onClick="addAllInputs('dynamicInputs', document.myForm.inputSelect.value);">
<input type="submit" value="Enviar">
</form>
</body>
</html>

-------------------------------------



-------------------------------------



-------------------------------------



-------------------------------------



-------------------------------------



-------------------------------------



-------------------------------------



-------------------------------------



-------------------------------------



-------------------------------------



-------------------------------------



-------------------------------------



-------------------------------------