jueves, 26 de diciembre de 2013

Encriptar datos locales con Adobe AIR

Encriptamos datos por medio de la clase flash.utils.BytesArray, que nos servirá para guardar datos en forma binaria. Cada una de las palicaciones (y cada uno de los usuarios de la aplicación) tendrá una archivo cifrado, el cual se puede guardar y extraer información con la clase EncryptedLocalStore.

Los datos encriptados se colocan en un subdirectorio del directorio de datos de aplicación del usuario; la ruta del subdirectorio es Adobe/AIR/ELS/ seguido del identificador de la aplicación.
Si se manejan datos en el disco duro del usuario, se recomienda que la información se encuentre encriptada.

Si actualiza una aplicación de AIR, se recomienda el uso de BytesArray.
Se debe usar una instacia BytesArray dentro de la clase EncryptedLocalStore.

//Almacenar como datos binarios:
var data:String = "Esta es una cadena";
var ba:BytesArray = new BytesArray();
ba.writeUTFBytes(data);

//Recuperar los datos binarios a datos decimales
var returnedData:String = ba.readUTFBytes(ba.bytesAvailable);

La clase BytesArraytiene varios métodos para escribir y leer información en diferentes formatos:
writeUTFBytes() readUTFBytes()
writeInt() readInt()
writeBoolena() readBoolena()

Información encriptada

Sólo se puede almacenar 10MB de información encriptada por aplicación AIR

var ba:BytesArray = new BytesArray();
ba.writesUTFBytes( password.text);
EncrypedLocalStore.setItem(username.text, ba);
username.text = "";
password.text = "";
Leer los datos encriptados:
var ba:ByteArray = EncryptedLoaclStore.getItem(username.text);
if(ba){
var returnedPassword:String = ba.readUTFBytes( ba.bytesAvailable );
if(password.text==returnedPassword){
this.visible = false;
} else {
trace("Password incorrecto");
} else {
trace("No existe el usuario");
}

Otro ejemplo:
 
var str:String = "Bob";  
var bytes:ByteArray = new ByteArray();  
bytes.writeUTFBytes(str);  
EncryptedLocalStore.setItem("firstName", bytes);    

var storedValue:ByteArray = EncryptedLocalStore.getItem("firstName");  
trace(storedValue.readUTFBytes(storedValue.length)); // "Bob"    

EncryptedLocalStore.removeItem("firstName");
 
http://www.pacoarce.com 

martes, 24 de diciembre de 2013

Herencia y manejo de eventos del sistema entre componentes en Coldfusion 10

Podemos heredar las propiedades y métodos de otro componente usando la propiedad extends dentro de la etiqueta <cfcomponent>.
Si el componente no se encuentra en la misma carpeta, se tiene que indicar por medio de un "path", por ejemplo:

<cfcomponent extends = "components.myComponent">

Los componentes se pueden "extender" varias veces y los componentes hijos se pueden convertir en otro componentes.


Llamar a métodos de componentes padre

Por medio de la instrucción super se puden llamar métodos de un componente padre desde un componente hijo.

Manejo de eventos de aplicación por medio del componente Application.cfc

Con el componente Application.cfc se pueden detectar dos eventos de la aplicación:

■ onApplicationStart
■ onApplicationEnd

Por medio del uso del componente Application.cfc se puede generar un archivo con extensión XML o INI para almacenar valores que serán utilizados en la aplicación.


Por seguridad, este archivo se mantiene fura de la carpeta raíz (webroot) de la aplicación.

ColdFusion procesa automáticamente el método onApplicationStart() en cualquiera de estas tres opciones:

■ La primer página de la aplicación es lanzada
■ El primer componente es invocado desde un gateway asíncrono
■ La primera consulta de un web service un componente flash remoting es ejecutado

Un método onApplicationStart() contiene código que lanza las siguientes tareas:

■ Inicialización de variables globales
■ Procesos de Loggingnotificaciones de reinicio del Administrador
■ Bloque el acceso a recursos vitales, como la base de datos, cuando no se encuentran disponibles o existe un proceso de reiniciación del servicio

El método onApplicationStart() regresa un valor booleano:

■ true: el proceso de inicio fue correcto y continua la aplicación
■ false: el proceso de inicio fue incorrecto y debe abortar la aplicación

Manejo de cierre de la aplicación o baja en el servicio

Coldfusion lanzará en forma automáica el código que se encuentre en el método: onApplicationEnd() si:

■ Está abajo el servicio de ColdFusion
■ Se agotó el tiempo de espera de la aplicción

Por lo general este método contendrá notificaciones de salidaq al usuario y grabar los datos que se encuentran en la memoria cache.

Este método no recibe ni regresa valor alguno.

http://www.pacoarce.com

lunes, 23 de diciembre de 2013

Las expresiones regulares en PHP

Una herramienta muy poderosa que nos brinda PHP para poder validar cadenas, por ejemplo, nombres, correos electrónicos, números de tarjeta de crédito, com muchos, muchos etcéteras, son las expresiones regulares.

Las expresiones regulares son un conjunto de caracteres especiales que nos enviarán un valor verdadero si la cadena a comparar coincide con la expresión regular, o un cero si no coindicen.

El punto

El punto representa cualquier caracter. Escribiendo un punto en un patrón querrás decir que ahí hay un caracter, cualquiera. Desde la A a la Z (en minúscula y mayúscula), del 0 al 9, o algún otro símbolo, incluyendo los acentos y la eñe.

Principio y fin de cadena

Con ^ para inicio y $ para final de una cadena.

Contadores

Usando + queremos decir que el elemento anterior aparece una o más veces. Usando * decimos que el elemento anterior aparece cero o más veces.

Si lo que queremos indicar al patrón es que un elemento puede que esté (una vez) o puede que no, lo haremos con el signo de interrogación.

Para definir la cantidad de veces que va a repetirse el elemento, tendremos que hacer uso de las llaves { }.

Rangos

Los corchetes [] incluidos en un patrón permiten especificar el rango de caracteres válidos a comparar. Basta que exista cualquiera de ellos para que se de la condición. Dentro de ellos pondremos cualquier cantidad de caracteres, uno a continuación del otro; o un rango del abecedario o de los números enteros del 0 al 9.

Dentro de los corchetes, hay que tener en cuenta que el símbolo ^ ya no significa inicio, sinó que es un negador, es decir: “[^a-Z]” coincidirá con cualquier texto que NO tenga ningún caracter alfabético (ni minúsculas ni mayúsculas), y “^@ ” coincide con cualquier caracter excepto “@” y “espacio

Alternancia

Para alternar entre varias opciones de caracteres, usamos el símbolo |  o barra vertical. Con este mecanismo haremos un disyuntor, que nos permitirá dar varias opciones. Si una de ellas coincide, el patrón será cierto.

Agrupadores

Los paréntesis nos sirven para agrupar un subconjunto.

Secuencias de escape

 Si deseamos representar algún caracter especial, como *, $, etc. en nuestro patrón, necesitamos utilizar una diagonal invertida \, por ejemplo \$ o \* para que el analizador sintáctico "escape" de su lógica.

Modificadores (del manual de PHP)

i (PCRE_CASELESS)
Si se aplica este modificador, las letras en el patrón coincidirán tanto con letras mayúsculas como minúsculas. 
 
m (PCRE_MULTILINE)
 
Por defecto, PCRE trata la cadena objetivo como si fuera una única "línea" de caracteres (incluso si en realidad contiene varias nuevas líneas). El meta-carácter "inicio de línea" (^) coincide sólo con el inicio de la cadena, mientras que el meta-carácter "final de línea" ($) coincide sólo con el final de la cadena, o antes del final de una nueva línea (a menos que el modificador D se aplique). 
Esto es igual que en Perl. Cuando se aplica este modificador, los constructores "inicio de línea" y "final de línea" coinciden inmediatamente después o inmediatamente antes que cualquier nueva línea de la cadena objetivo, respectivamente, así como al inicio y final absolutos. 
Esto es equivalente al modificador /m de Perl. Si no hay caracteres "\n" en una cadena objetivo, o no hay incidencias de ^ o $ en el patrón, la aplicación de este modificador no tiene efecto. 
 
s (PCRE_DOTALL)
 
Si se aplica este modificador, un meta-carácter punto en el patrón coincide con todos los caracteres, incluyendo nuevas líneas. Sin él, las nuevas líneas son excluidas. Este modificador es equivalente al modificador /s de Perl. Una clase negativa como [^a] siempre coincidirá con un carácter de nueva línea, independientemente de la aplicación de este modificador. 
 
x (PCRE_EXTENDED)
 
Si se aplica este modificador, los caracteres de información de espacios en blanco en el patrón se ignoran totalmente excepto cuando están escapados (diagonal invertida) o dentro de una clase carácter, y los caracteres entre un # sin escapar fuera de una clase carácter y el siguiente carácter nueva línea, inclusive, también son ignorados. Esto es equivalente al modificador /x de Perl, y hace posible incluir comentarios dentro de patrones complicados. Observe, sin embargo, que esto se aplica sólo a caracteres de información.
A (PCRE_ANCHORED)
 
Si se aplica este modificador, el patrón es forzado a ser "anclado", es decir, se le obliga a coincidir sólo con el inicio de la cadena que está siendo buscada (la "cadena objetivo"). Este efecto también se puede lograr mediante construcciones apropiadas en el patrón mismo, lo cual es la única manera de hacerlo en Perl. 
 
D (PCRE_DOLLAR_ENDONLY)
 
Si se aplica este modificador, un meta-carácter dólar en el patrón coincidirá sólo con el final de la cadena objetivo. Sin este modificador, un dólar coincide también inmediatamente antes del carácter final si éste es una nueva línea (pero no antes de cualquier otra nueva línea). Este modificador es ignorado si el modificadr m se aplica. No existe equivalente a este modificador en Perl. 
 
S
Cuando un patrón se va a usar varias veces, merece la pena dedicar más tiempo a analizarlo a fin de acelerar el tiempo tomado para las comparaciones. Si se aplica este modificador, se realiza este análisis extra. Actualmente, estudiar un patrón es útil sólamente para patrones no anclados que no tienen un carácter de inicio único fijo. 
 
U (PCRE_UNGREEDY)
 
Este modificador invierte la "codicia" de los cuantificadores de modo que no sean codiciosos por defecto, pero se vuelven codiciosos si son seguidos por ?. Esto no es compatible con Perl. También se puede aplicar por un modificador de ajuste dentro del patrón (?U) o por un signo de interrogación detrás del cuantificador (p.ej. .*?). 
X (PCRE_EXTRA)
 
Este modificador pone en marcha funcionalidad adicional de PCRE que es incompatible con Perl. Cualquier barra invertida en un patrón que esté seguida por una letra que no tenga un significado especial causa un error, por lo que se reservan estas combinaciones para futuras expansiones. Por defecto, como en Perl, una barra invertida seguida de una letra que no tenga un significado especial se trata como un literal. No hay en la actualidad otras características controladas por este modificador. 
 
J (PCRE_INFO_JCHANGED)
 
El ajuste de opción interna (?J) cambia la opción local PCRE_DUPNAMES. Permite nombres duplicados para sub-patrones. 
 
u (PCRE_UTF8)
 
Este modificador pone en marcha funcionalidad adicional de PCRE que es incompatible con Perl. Las cadenas de patrones son tratadas como UTF-8. Este modificador está disponible a partir de PHP 4.1.0 o posterior en Unix y desde PHP 4.2.3 en win32. La validez UTF-8 del patrón es verificada desde PHP 4.3.5.

Curso con 50% de descuento de php en Udemy

sábado, 21 de diciembre de 2013

El DataGrid en Flex


Ejemplo de un DataGrid

<mx:DataGrid columns="No default." dataProvider="No default." sortableColumns="true|false" . . . />

Cargar datos a un DataGrid

Los datos se cargan a un DataGrid por medio de la propiedad dataProvider.

La mejor manera de cargar datos es por medio de un ArrayCollection.

Es necesario importar la clase:


mx.collections.ArrayCollection

Cargar con datos a un DataGrid

Ejemplo para poblar un DataGrid desde un modelo de datos:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/ 2006/mxml" xmlns="*"
layout="absolute" creationComplete="restaurants = new ArrayCollection(myDataModel.item)">

<mx:Model id="myDataModel">
<item>
<key>0</key>
<style>Thai</style>
<number>6</number>
</item>
<item>
<key>1</key>
<style>Indian</style>
<number>14</number>
</item>
</mx:Model>

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]

public var restaurants:ArrayCollection;

]]>

</mx:Script>
<mx:DataGrid dataProvider="{restaurants}"/>

</mx:Application>


Una columna es creada para cada propiedad

El orden de las columnas no es previsible

El nombre de las columnas por omisión es el nombre de la propiedad

Más información: http://www.pacoarce.com

viernes, 20 de diciembre de 2013

ActionScript 3.0: Pasar parámetros a una película en ActionScript 3.0

Autor: Francisco Arce
Correo: fj_arce@yahoo.com.mx
Fecha: 20110222
 
Si deseas pasar código a una película AS 3.0 necesitamos un objeto de la clase LoaderInfo, el cual proporciona información sobre un objeto visual (display objet) ya sea una película swf o un archivo de imagen.

Para obtener información de un objeto LoaderInfo existen dos maneras;
  • Por la propiedad loaderInfo de los objetos visuales
  • Por la propiedad contentLoaderInfo de un objeto Loader.
Si deseas extraer la información de estos objetos, necesitamos la propiedad parameters. Según el manual:

"Las dos fuentes de parámetros son: la cadena de consulta de la URL del archivo SWF principal y el valor del parámetro HTML FlashVars (éste sólo afecta al archivo SWF principal)."

Por HTML (flashVars) o llamando al archivo SWF desde la URL (método GET).
Se puede utilizar las siguientes instrucciones:

var parametros:Object = LoaderInfo(this.root.loaderInfo).parameters;

O leerlo directamente com:

var miParametro = LoaderInfo(this.root.loaderInfo).parameters.parametro;

También se puede aceptar:

var titulo = MovieClip(this.root).loaderInfo.parameters.titulo;

Observe que this.root es la película principal. Un buen tutorial de uso de flashVars es el siguiente:

http://blogs.adobe.com/pdehaan/2006/07/using_flashvars_with_actionscr.html
http://gotoandlearn.com/play.php?id=77

domingo, 15 de diciembre de 2013

Las instancias de los componentes en Coldfusion 10

Existen tres maneras de crear o llamar a un componente en Coldfusion 10:

• <cfinvoke> llama el metodo dentro de un componente
• <cfobject> crea una instancia de un componente
• createObject() Crea una sintancia de un componente

Caracteristicas de las instancias de los componentes

• Con una instancia se pueden llamar a varios metodos de componentese methods
• Podemos almacenar informacion en una instanciaa
• Podemos subir una instancia a la memoria cache
• Podemos crear diferentes instancias con diferentes datos del mismo componente

Crear una instancia con <cfobject>

• Use la etiqueta <cfobject> con las siguientes propiedades:
  • component: es la ruta del archivo del componente, como se utiliza en <cfinvoke>
  • name: el nombre que ser'a utilizado para llamar al componente en los programas
  • type: el tipo de objeto que sera instanciado (opcional)

• Ejemplo

<cfobject component="componentes.alumno" name="alumno" >

Uso de las instancias de un componente
Por medio de las instancias de un component de ColdFusion podemos llamar a los metodos y propiedades almacenadas en el mismo, por ejemplo:

<cfobject component="componentes.alumno" name="alumno" >
<cfset cali = alumno.calificacion >
<cfset promedio = alumno.promedio() >

Tambien podemos llamar a un metodo al momento de crearlo:


<cfset miAlumno= createObject("cfcAlumno", "components.alumno").init()>



Más información en: http://www.pacoarce.com


 

Conexión a una base de datos a Coldfusion 10

Una de las características de ColdFusion más utilizados y potentes es la conectividad de base de datos. Usando sólo una pocas etiquetas CFML, puede conectarse y manipular datos de una amplia variedad de bases de datos.

Revisión de las bases de datos relacionales

• Una base de datos relacional es un conjunto estructurado de datos relacionados
• Los datos se organizan en tablas con filas y columnas de información
• Cada fila de una tabla se le asigna un identificador único, que se refiere como una clave principal, que se utiliza para relacionar tablas

Entender controladores de base de datos relacionales

ColdFusion se comunica con la fuente de datos a través de una interfaz de base de datos llamada Java Database Connectivity (JDBC).

JDBC es una API estándar para acceder a la información de diferentes sistemas de bases de datos y formatos de almacenamiento
Una vez que se configura una conexión entre una base de datos y ColdFusion, utilice Query Language (SQL) consultas estructuradas para extraer datos de la base de datos
El controlador convierte el SQL a la lengua materna adecuada de la base de datos

La etiqueta <cfquery>

La creación de los resultados de conjunto de registros (recordset)  en una sentencia SQL SELECT envuelto dentro de la etiqueta de un CFML <cfquery> en la parte superior de la página que está abierta:


<cfquery ...>
SELECT id, nombre, apeliido
FROM alumnos
ORDER BY apellido
</ cfquery>

Agregar el atributo datasource  de origen de datos

El atributo datasource  identifica la fuente de datos para la etiqueta <cfquery>, que a utiliza los parámetros de conexión establecidos en el. Este parámetro es requerido para la etiqueta <cfquery>.


<cfquery datasource=“miBaseDatos”...>
SELECT id, nombre, apeliido
FROM alumnos
ORDER BY apellido
</ cfquery>

El resultado del query lo almacenaremos en una variable del atributo name. Por convención, es decir, si quiere seguir la regla, qué bueno, y si no, pues ni modo, iniciamos estas variables (en realidad objetos) con la letra “q”.

<cfquery datasource=“miBaseDados”. name=”qAlumnos”>
SELECT id, nombre, apeliido

FROM alumnos
ORDER BY apellido
</ cfquery>

A este tio de objeto lo conoceremos con “recordset”.

Una forma fácil de visualizar el resultado de un recordset es por medio de la etiqueta <cfdump>:

<cfdump var="#recordset#" />

Un recordset contiene, a parte de la información, el timpo de ejecución, el número de renglones etraidos, si el query a sido “cachado” (la nformación se encuentra en el cache del servidor), la sentencia SQL de donde provino la información.

Más información en http://www.pacoarce.com

lunes, 9 de diciembre de 2013

Alimentar diferentes listas en forma dinámica con Adobe AIR


Una aplicación muy frecuente para la explotación de información de una base de datos, es leer una tabla y armar diferentes listas o combo box para después seleccionar los datos. Una vez ye tenemos los datos leídos, por medí de un ciclo y de diferentes sentencias condicionales, generamos un arreglo para cada características, llenamos las listas y esperamos a que el usuario seleccione el criterio para consultar los datos de las tablas.

En la siguiente función, seleccionaremos los correos de los criterios seleccionados y los enviaremos al protocolo malito, para generar un correo electrónico con el agente de correo de la computadora.

private function cargaComponentes(){
var meses_array:Array = new Array("","Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");
contacto_array = new Array();
genero_array = new Array;
edad_array = new Array;
fecha_array = new Array;
//
var i,j,genero,edad,fecha;
//
for(i=0; i<datos_array.length; i++){
contacto_array.push({label:datos_array[i].nombres, data:datos_array[i].rfc});
//genero
for(j = 0; j<genero_array.length; j++){
if(genero_array[j].label==datos_array[i].genero){
break;
}
}
if(j==genero_array.length){
genero = (datos_array[i].genero=="M")?"Masculino":"Femenino";
genero_array.push({label:genero, data:datos_array[i].genero});
}
//Edad
for(j = 0; j<edad_array.length; j++){
if(edad_array[j].label==datos_array[i].edad){
break
}
}
if(j==edad_array.length){
edad_array.push({label:datos_array[i].edad, data:datos_array[i].edad});
}
//Fecha
fecha  = datos_array[i].diaNacimiento+" de ";
fecha += meses_array[Number(datos_array[i].mesNacimiento)]+" de ";
fecha += datos_array[i].anioNacimiento;
datos_array[i].fecha = fecha;
for(j = 0; j<fecha_array.length; j++){
if(fecha_array[j].label==fecha){
break
}
}
if(j==fecha_array.length){
fecha_array.push({label:fecha, data:fecha});
}
}
contacto_array.sort();
edad_array.sortOn("label", Array.NUMERIC);
fecha_array.sortOn("label");
//
contacto_array.unshift({label:"---Seleccione paciente---", data:"vacio"});
genero_array.unshift({label:"---Seleccione un género---", data:"vacio"});
edad_array.unshift({label:"---Seleccione por edad---", data:"vacio"});
fecha_array.unshift({label:"---Seleccione por fecha---", data:"vacio"});
//
var contacto_dp:DataProvider = new DataProvider(contacto_array);
var genero_dp:DataProvider = new DataProvider(genero_array);
var edad_dp:DataProvider = new DataProvider(edad_array);
var fecha_dp:DataProvider = new DataProvider(fecha_array);
//
contacto_cb.enabled = true;
todos_cb.enabled = true;
genero_cb.enabled = true;
edad_cb.enabled = true;
fecha_cb.enabled = true;
//
contacto_cb.dataProvider = contacto_dp;
genero_cb.dataProvider = genero_dp;
edad_cb.dataProvider = edad_dp;
fecha_cb.dataProvider = fecha_dp;
}

Más información en http://www.pacoarce.com

lunes, 2 de diciembre de 2013

Detectar las características de HTML5 y CSS3 con Modernizr

Modernizr es una biblioteca JavaScript de código abierto que facilita a los diseñadores web para desarrollar diferentes niveles de experiencias, sobre la base de las capacidades del navegador del visitante.
Esto permite a los diseñadores sacar el máximo provecho de todo en HTML5 y CSS3 que se implementa en algunos navegadores, sin sacrificar el control sobre la experiencia del usuario en otros navegadores.
Y sobre todo contestar la pregunta: ¿qué hacemos con IE 6-9?


<!doctype html>
<html class="no-js">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="js/modernizr.js"></script>
<style>
.reflejo{
font-size:5em;
font-family:Verdana, Geneva, sans-serif;
text-align:center;
-webkit-box-reflect:below -0em -webkit-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);
box-reflect:below -0em linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);
}
.no-cssreflections .reflejo{
color:red;
box-reflect:none;
text-shadow:10px 10px 10px black;
}
.no-js .reflejo{
color:green;
box-reflect:none;
text-shadow:10px 10px 10px black;
}

</style>
</head>

<body>
<p class="reflejo">Soy espejo y me reflejo</p>
</body>
</html>

martes, 26 de noviembre de 2013

Manejar la cámara de video con Adobe-AIR

Una tarea que podemos manejar con facilidad en Adobe-AIR y actionscript 3.0,  es abrir la cámara de video de la computadora (o la cámara conectada a la computador). Primero necesitamos importar las clases:

import flash.media.Microphone;
import flash.media.Camera;
import flash.media.Video;
import flash.display.Bitmap;
import flash.display.BitmapData;

Luego iniciar los objetos necesarios:

//Video
//
var mic:Microphone;
var cam:Camera;
var vid:Video;
var bmp:Bitmap;
//

Inicia los objetos:

mic = Microphone.getMicrophone();
cam = Camera.getCamera();
if(cam == null){
win.tomarFoto_btn.alpha = .5
win.tomarFoto_btn.enabled = false;
} else {
vid = new Video(150, 200);
vid.x = 0;
vid.y = 0;
vid.attachCamera(cam);
win.camara_mc.addChild(vid);
}

Y tendrás un recuadro con el video de tu cámara en el escenario.

lunes, 18 de noviembre de 2013

Validaciones de fechas con ActionScript 3.0

Como cualquier programador es sabido, las validaciones son de lo más engorroso pero es lo que nos permite dormir tranquilos más de 3 horas seguidas. Aqui dejo algunas funciones que nos servirán para validar fechas en ActionScript 3.0 y una rutina, sencilla pero muy util, para validar los correos electrónicos con expresiones regulares. Espero que sean de utilidad:

function validaFechaDD_MM_AAAA(fecha) {
      var datos = fecha.split("/");
      if(datos.length!=3) return false;
      return validaFecha(datos[0], datos[1], datos[2]);
  } 
  function validaCorreo(mail):Boolean{
      var reg:RegExp = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/
      return reg.test(mail);
  }

  function validaFecha(d, m, a){
      var hoy = new Date();
      var dd = Number(d);
      var mm = Number(m);
      var aa = Number(a);
      var diasMes = new Array();
      //No es numerico
      if(isNaN(dd)) return false;
      if(isNaN(mm)) return false;
      if(isNaN(aa)) return false;
      //
      if(a<1900) return false;
       if(a>hoy.getFullYear()) return false;
      //
     var febrero = (((aa % 4 == 0) && ( (!(aa % 100 == 0)) || (aa % 400 == 0))) ? 29 : 28 );
      //
      for (var i = 1; i <= 12; i++) {
          diasMes[i] = 31;
          if (i==4 || i==6 || i==9 || i==11) diasMes[i] = 30;
          if (i==2) diasMes[i] = febrero;
      }
      //
      if(dd>diasMes[mm]) return false;
      //
      return true;
 }
function calculaEdad() {
     dia = dia_txt.text;
      mes = mes_txt.text;
      anio = anio_txt.text;
      if(validaFecha(dia, mes, anio)){
          var nac = new Date(Number(anio), Number(mes), Number(dia));
          var hoy = new Date();
          var pasadoCumple = ((nac.getMonth() < hoy.getMonth()) || ((nac.getMonth() == hoy.getMonth()) && (nac.getDate ()  <= hoy.getDate () )))
          var edad = pasadoCumple?(hoy.getFullYear() - nac.getFullYear()):(hoy.getFullYear() - nac.getFullYear() - 1);
         edad_txt.text = String(edad);
     } else {
          edad_txt.text = "Error";
      }
  }

http://www.pacoarce.com

viernes, 17 de mayo de 2013

Comentarios en HTML


Una práctica muy importante en cualquier lenguaje de programación es el de comentar nuestro código, ya que al transcurrir el tiempo, ni nosotros mismos sabemos lo que hicimos (creame, pasa muy seguido).

Los comentarios no son tomados en cuenta con por los navegadores: unicamente sirven para los programadores. Sin embargo, los comentarios en HTML si los puede ver dentro del código. Para hacer comentarios necesitamos las llaves <!-- y -->

Las listas de definición


El uso de las listas de difinición están cayendo en desuso. El funcionamiento de las listas de definición es similar al de un diccionario, por un lado el término y por el otro la definición de ese término o palabra. La etiqueta <dl> crea la lista de definición y las etiquetas <dt> y <dd> definen respectivamente el término y la descripción de cada elemento de la lista.

<dl>
  <dt>Byte</dt>
  <dd>Conjunto de 8 bits con significado</dd>
</dl> 

La etiqueta p de párrafo



La etiqueta <p> se utiliza para representar un párrafo. La etiqueta p es soportada por todos los navegadores (gracias a Dios).


Los hipervínculos


Dentro de una página web, los hipervínculos son las palabras, párrafos o imágenes que al darles click, te llevarán a otro lugar, ya sea a otra página, o a una sección en específico dentro de la misma página; desempeñan una función muy útil, por ello saber cómo aprender a programar hipervínculos a la hora de crear un sitio web es muy importante. 

Otra de las características que tienen los hipervínculos es que al pasar el cursor sobre ellos, el ícono del cursor cambia y se convierte en una mano.

Las etiquetas de encabezado


La etiqueta de encabezado H1 y sus hermanas menores son una de las herramientas más potentes con las que contamos a nivel de SEO para decirle a los buscadores de qué va el contenido de nuestra página web. Sin embargo, y aunque su concepto es en origen sencillo, darles un uso adecuado no es algo conocido por todos.

Las etiquetas de encabezados han tenido una importancia vital en el posicionamiento en buscadores desde sus orígenes, y con pequeñas variaciones en el peso de su influencia se han ido manteniendo en el tiempo como algo que definitivamente hay que cuidar, desde la fase de maquetación del diseño web hasta la creación de contenidos para un portal en funcionamiento. Estas nociones básicas deben ser pues conocidas por diseñadores, programadores y personas encargadas de la redacción de texto para web.

 La etiqueta <strong>


Esta etiqueta se usa para reforzar el texto en html.

El caso es que prácticamente todos los navegadores la interpretan de la misma forma poniendo el texto que las engloba en negrita, ¿entonces cual uso?.
Hay muchos webmaster que se inclinan por la etiqueta <strong> porque afirman que es mejor para el posicionamiento ya que google las interpreta como palabras clave, otros nos comentan que además aportan semántica al contenido a través de CSS y por tanto mejor accesibilidad.

Anclas: navegar dentro del documento


Sirve para definir posiciones dentro de un documento y se puede usar como destino de hiperenlaces. Para crear un ancla (anchor) se procede de la siguiente manera:

<A NAME="nombre_etiqueta">Texto del elemento ancla</A>

Visualmente est elemento no tiene niun efecto, pero si lo tiene en forma interactiva con el usuario. Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:

<A HREF="#nombre_etiqueta">Texto del hiperenlace</A>

De esta manera accederemos a la posición donde hayamos puesto el ancla Por ejemplo al final de este documento hemos puesto la siguiente ancla:

<a name="final">Este es el final del documento!!</a>

Y para acceder a esa posición usamos el siguiente hipernlace:

<A HREF="#final">Vamos al final del documento</A>

La etiqueta img


La etiqueta <IMG> te servirá para situar imágenes en una página. Es una etiqueta "verdadera", pues no tiene etiqueta de cierre:

La etiqueta <IMG> requiere un origen de datos obligatorio dado por el atributo SRC=. Indica la imagen en cuestión:

<IMG SRC="imagen.gif">

Tan sólo el código anterior es necesario para añadir una imagen a tu página, mostrando la imagen situada en el mismo directorio del documento HTML.

Tablas


Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve escencial.
En las próximas líneas intentaremos cubrir todas las características de las tablas para estar listos para utilizarlas cuando se necesite.
 

Otras etiquetas


Dentro de HTML tendremos otras etiquetas, por ejemplo:

<br> Para un salto de linea
<hr> Dibuja una línea
<adress> una dirección física

Etcétera

La etiqueta div


La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.
El uso de la etiqueta div es sencillo. Observemos este ejemplo:
<div>
<h1>Índice</h1>
Página principal<br />
Material multimedia<br />
Autores<br />
</div>
Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de contenidos. Visualmente la etiqueta no provoca ningún cambio, pero en la estructura interna del documento hemos aplicado una división muy importante. La figura muestra el texto del ejemplo; no hay ninguna diferencia visible.

Estilos en cascada


Las hojas de estilo en cascada (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentos XML, incluyendo SVG y XUL.

La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>".

Colores en estilos en cascada


CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector
{color: red;} es la declaración

El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.

Manejo de fuentes con CSS


Los css nos da la flexibilidad de poder darle color, tamaño, grueso y otras propiedades que trataremos de explicarla las más importantes. Antes de la versión 5 de HTML, no se podía manejar más que las fuentes que el usuario tuviera instaladas en su computadora. Era por esto que utilizábamos al menos tres tipos de fuente por si una fallaba, el navegador buscaba la segunda, y asi, hasta encontrar una de las fuentes más básicas. Algunos de los conjuntos de fuente más comunes son:

Arial, Helvetica, sans-serif
“Times New Roman”, Times, serif
“Courier New”, Courier, monospace
Georgia, “Times New Roman”, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif


Si el nombre de la fuente contenia espacios, es necesario utilizar las comillas, por ejemplo "Times New Roman"

Modificar los hipervínculos con estilos en cascada


Cambiar el formato de los hipervínculos o "links" por medio de los estilos en cascada es fundamental en el desarrollo y diseño de páginas we. Podemos modificar los colores, el background o cambiar el clásico color azul, sin embargo, siempre es necesario que el usuario sepa cuál frase, palabra o imagen contiene un hipervínculo.

 Lugar donde se pueden escribir los estilos en cascada


La ubicación de nuestras reglas de estilo es muy importante, porque depende del órden las reglas se irán ejecutando. Podemos localizar nuestro código en ohas externas, propiamente conocidas como stylesheets, podemos escribir el código dentro de la etiqueta <style>, dentro de la página html o incluso dentro de la etiqueta, como un atributo de la misma, aunque esta última ubicación no se recomienda, porque se pierde toda la versatilidad que nos ofrecen los estilos en cascada.

La prioridad dependerá de la cercania de la regla al elemento HTML. De ahí su nombre de estilos en cascada.

Selectores, unidades en CSS


El manejo de selectores es una de las habilidades más importantes cuando se intenta utilizar los estilos en cascada en forma profesional. hasta este punto hemos utilizado las reglas de cascada que inician con un selector. Este puede ser el nombre de una etiqueta, por ejemplo, h1, de una clase, por ejemplo .rojo o de una división #encabezado.

Cuando utilizamos por selector un nombre de etiqueta, todas las etiquetas de esa clase srán modificadas. En cambio, los identificadores sólo podemos tener uno en todo el documennto. Las clases pueden aplicarse varias veces, pero hay que aplicarlas en forma manual.

Podemos aplicar a varios selectores las mismas reglas de estilo por medio de las comas, por ejemplo:

h1, h2, h3, h4{ color:white; }

Selectores compuestos


Muchas veces los selectores simples, como la etiqueta, la clase y los identificadores no son suficientes para realizar el diseño de nuestra página web, por lo que nos será importante hacer "excepciones". En un buen diseño web, las excepciones no deberán de ser la regla. Para ello necesitamos escribir los selectores principales a la izquierda y los particulares a la derecha, por ejemplo:

#menu a { color:red; }

Por lo general leeremos estos selectores de derecha a izquierda, es decir: "todas las etiquetas 'a' que se encuentren dentro de la división 'menu' su texto será de color rojo.

Valores y unidades en CSS


El manejo de unidades es fundamental dentro del diseño y desarrollo de nuestra página web. En HTML en general y en CSS en particular, tendremos dos tipos de unidades: las flexibles y las fijas. Siempre será mejor utilizar las primeras, por ejemplo el pixel (px) la em (que es la medida de la letra 'm' de la fuente base).

La medida em no tiene nada que ver con la etiqueta de HTML <em> que modifica los textos a itálicas. Por lo general esta medida es la adecuada para manejar los tamaños de los textos y sus atributos como el padding y el margen.

Validar nuestros CSS


Una parte importante, antes de lanzar nuestra página web al mundo, es validrla, es decir, verificar que todas sus etiquetas y estilos en cascada sean compatibles con los navegadores en uso. Para ello contamos con magníficos validadores. El más popular es el de la W3C. No se preocupe si encuentra errores o mensajes de advertencia, pues es muy dificil que una página que no sea tribial pueda pasar esta validación sin algún mensaje.

El modelo de caja

Los márgenes


El modelo de caja es uno de los conceptos más importantes al momento de formatear nuestra página, y puede resultar un verdadero dolor de cabeza si no poseemos los conocimientos adecuados para ello. Asi que resulta fundamental conocer bien los términos de margen, padding, border y área de contenido, para no pasar noches en vela porque nuestro modelo se "mueve", y culpar de ellos al HTML y a los CSS.

Otro problema es que algunos navegadores no "hablan" muy bien CSS y hacen las cosas algo diferentes, y en el caso de Internet Explorer, puede hacer las cosas muy diferentes, si de CSS se trata.

Los bordes


Entre el margen y el padding se extiende el borde o border. Este amigo puede ser neutral, si es que su ancho es igual a cero, o puede cambiar dependiend de su ubucación, También para él utilizaremos el nemónico TRBL (top, right, bottom y left), que nos recuerda cómo se toman los valores dentro de la sentencia correspondiente. Como veremos, es posible definir un ancho, un color y un estilo al borde de nuestra caja, es decir, tendremos doce posibles comando tomando los cuatro bordes con tres características (ancho, color y estilo).

La propiedad margin:auto


La propiedad auto nos permitirá centrar divisiones dentro de sus contenedores. Desaformtunadamente no contamos con una instrucción que centre enforma automática o que flote una división al centro. Con auto en el margen a izquierda y derecha, podemos hacer que una división flote dentro de su contenedor, pero necesitamos definir un ancho (width) para ello, ya sea en pixeles o porcentaje.

El color de fondo: background


Una propiedad fundamental para modificar el color de nuestra página web, asi como su diseño, será la propiedad background, la cual la tendrá cualquier etiqueta que posea el modelo de caja. Podremos cambiar el color o colocar una imagen que se repita o se adapte a su contenido.

El color de fondo del área se extiende hasta debajo de la línea del borde. Asi, si la línea del borde muestra espacios, por ejemplo, dashed, dotted o double el color de fondo del elemento se muestra a través de ellos.

Una pieza importantísima para el desarrollo de una composición o maquetado de una página web es comprender cómo se acomodan las cajas, es decir, su flujo natural, y cómo podemos cambiar éste. En este video iniciaremos por comprender cómo es el flujo "natural" de las cajas para después poder modificarlos.

Para realizar layouts más interesantes, necesitaremos que las divisiones comiencen a flotar. Para ello utilizaremos la propiedad float con la mayoría de sus parámetros.

En CSS casi siempre hay varias maneras de resolver un mismo problema y esto se aplica al diseño de las páginas o maquetación. Todas las posibles soluciones tienen ventajas y desventajas. Asi que mientras no exista una varita mágica que solucione todos nuestros problemas, revisaremos las diferentes formas de hacer un buen layout de una página web.

lunes, 25 de febrero de 2013

El widget tabs() con jQuery UI

 El widget tabs() nos servirá para convertir los párrafos en una sencilla zona de tabuladores. Bastará con definir una lista no oredenada y las divisiones con el contenido.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("#generaciones").tabs();
}
</script>
<title>Tabuladores</title>
<style>
#generaciones{
    width:800px;
}
</style>
</head>

<body>
<div id="generaciones">
<ul>
<li><a href="#primera">Primera generación</a></li>
<li><a href="#segunda">Segunda generación</a></li>
<li><a href="#tercera">Tercera generación</a></li>
</ul>
    <div id="primera">
    <p>En la mitología clásica, Urano es el dios primordial del cielo. En la mitología griega era personificado como hijo y esposo de Gea, la Madre Tierra. Ambos fueron ancestros de la mayoría de los dioses griegos, pero ningún culto dirigido directamente a Urano sobrevivió hasta la época clásica,1 y el dios no aparece entre los temas comunes de la cerámica griega antigua. Sin embargo, la Tierra, el Cielo y Estigia podían unirse en una solemne invocación en la épica homérica.</p>
    <p>La mayoría de los griegos consideraban que Urano era un dios primordial (protogenos), y no le asignaban padres. Bajo la influencia de los filósofos, Cicerón afirma en De natura deorum que era descendiente de los antiguos dioses Éter y Hemera, el Aire y el Día. Según los himnos órficos, Urano era el hijo de la diosa de la noche, Nix.</p>
    </div>
    <div id="segunda">
    <p>En la mitología griega, los Titanes —masculino— y Titánides —femenino— eran una raza de poderosos dioses que gobernaron durante la legendaria edad de oro.</p>
    <p>Los Titanes fueron doce desde su primera aparición literaria, en la Teogonía de Hesíodo; aunque en su Biblioteca mitológica, Apolodoro añade un decimotercero, Dione, desdoblamiento de la titánide Tea. Estaban relacionados con diversos conceptos primordiales, algunos de los cuales simplemente se extrapolaban de sus nombres: el océano y la fructífera tierra, el Sol y la Luna, la memoria y la ley natural. Los doce Titanes de la primera generación fueron liderados por el más joven, Crono, quien derrocó a su padre Urano (‘Cielo’) a instancias de su madre, Gea (‘Tierra’).</p>
    </div>
   
    <div id="tercera">
    <p>En la mitología griega, los dioses olímpicos son los principales dioses del panteón griego, que moraban en la cima del monte Olimpo, el más alto de Grecia. Hubo, en diferentes épocas, catorce dioses diferentes reconocidos como olímpicos, aunque nunca más de doce a la vez. De ahí que a veces se haga referencia a ellos como los doce olímpicos, también conocidos como Dodekatheon.</p>
    <p>Los doce olímpicos ganaron su supremacía en el mundo de los dioses después de que Zeus llevara a sus hermanos a la victoria en la guerra contra los Titanes.</p>    </div>
    </div>
</body>
</html>
 



domingo, 24 de febrero de 2013

El widget menu



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("#menu").menu();
}
</script>
<title>Menu</title>
<style>
#menu{
    width:250px;   
}

</style>
</head>

<body>
<ul id="menu">
<li><a href="#">Primera generación</a>
    <ul>
    <li><a href="#">Gea</a></li>
    <li><a href="#">Eros</a></li>
    <li><a href="#">Tártaro</a></li>
    <li><a href="#">Urano</a></li>
    <li><a href="#">Titanes</a></li>
    <li><a href="#">Cíclopes</a></li>
    <li><a href="#">Hecatónquiros</a></li>
    </ul>
</li>
<li><a href="#">Segunda generación</a>
    <ul>
    <li><a href="#">Crono</a></li>
    <li><a href="#">Rea</a></li>
    <li><a href="#">Titanes</a></li>
    </ul>
</li>
<li><a href="#">Tercera generación</a>
    <ul>
    <li><a href="#">Zeus</a></li>
    <li><a href="#">Hera</a></li>
    <li><a href="#">Poseidón</a></li>
    <li><a href="#">Deméter</a></li> 
    <li><a href="#">Hestia</a></li> 
    <li><a href="#">Hades</a></li>
    <li><a href="#">Ares</a></li> 
    <li><a href="#">Hermes</a></li> 
    <li><a href="#">Hefesto</a></li> 
    <li><a href="#">Atenea</a></li> 
    <li><a href="#">Apolo</a></li> 
    <li><a href="#">Artemisa</a></li>
    </ul>
</li>
</ul>
</body>
</html>

El widget progressbar()

El widget  progress bar nos peritirá seguir un proceso de carga, aunque generalmente necesitamos relacionarlo con alguna función Ajax.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    //$("#barra").progressbar({value:41});
    var b = $("#barra");
    var e = $("#etiqueta");
   
     b.progressbar({
        value: false,
        change: function() {
                e.text( b.progressbar( "value" ) + "%" );
                },
        complete: function() {
                e.text( "Completo!" );
                }
        });
       
     function progreso() {
        var val = b.progressbar( "value" ) || 0;
        b.progressbar( "value", val + 1 );
        if ( val < 99 ) {
            setTimeout( progreso, 100 );
        }
    }
   
    setTimeout( progreso, 3000 );
}
</script>
<title>Progress</title>
 <style>
#etiqueta {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
</head>

<body>
<div id="barra"><div id="etiqueta">Cargando...</div></div>
</body>
</html>

sábado, 23 de febrero de 2013

El widget Dialog de jQuery UI

El widget dialog() es bastante sencillo, pero poderooosooooo. Nos permitirá hacer ventanas de mensaje, sin que sean consideradas ventanas de diálogo o pop-ups. Con sus diferentes parámetros podemos dar opciones de confirmación y cancelación, asi como mostrar diferentes íconos. También podemos darle efectos de entrada y de salida.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    //$("#mensaje").dialog( {show: {effect: "blind",duration: 1000},hide: {effect: "explode",duration: 1000}});
    /*$("#mensaje").dialog( {modal: true,
    height:280,
    width:500,
    buttons:{Continue: function() {
                       $( this ).dialog( "close" );
                       },
             Cancel: function() {
                       $( this ).dialog( "close" );
                       }
    }
    }); */
    $("#mensaje").dialog( {modal: true,
    height:280,
    width:500,
    buttons:{Ok: function() {
                       $( this ).dialog( "close" );
                       }
    }
    });
}
</script>
<title>Base de UI</title>
<style>
.centra{
    font-weight:bold;
    text-align:center;
}
</style>
</head>

<body>
<div id="mensaje" title="Advertencia">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>La siguiente página contiene material real y explicito,
que podría afectar la sensibilidad
del espectador.</p><p class="centra">Se recomienda discreción.</p>
</div>

</body>
</html>

miércoles, 20 de febrero de 2013

La iteración rezisable en jQuery UI

Por media de esta iteración podemos cambiar el tamaño de una división, en tiempo de ejecución, arrastrando la esquina inferior izquierda.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("#arrastrame").resizable();
    $("#sueltame").droppable({drop:onSuelta});
}
function onSuelta(){
    $("#sueltame").css("background-color", "#F60");
    $("#sueltame").text("Afrodita es la diosa del amor");
}
</script>
<title>Draggable</title>
<style>
#arrastrame{
    background-image:url(imagenes/afrodita160x196.jpg);
    background-repeat:no-repeat;
    background-size:100%;
    width:160px;
    height:196px;
    text-align:center;   
   
}
#sueltame{
    width:400px;
    height:400px;
    border:solid 1px black;
    background-color:pink;
    text-align:center;
    position:absolute;
    left:250px;
    top:50px;   
}
</style>
</head>

<body>
<div id="sueltame">Diosa del amor</div>
<div id="arrastrame">Arrástrame</div>

</body>
</html>

martes, 19 de febrero de 2013

El método ajax()

Para tener completo control en el envío y recepción de datos, podemos utilizar el método ajax(), el cual es más completo, pero al tener tantos parámetros (32 parámetros opcionales, algunos de los cuales ya están desactualizados) se recomienda mejor utilizar métodos como load(), post() o get(). Aqui se da un ejemplo de cómo utilizar los principales parámetros:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#popular").click(function(){
    onLeePoema("0")
    });
    $("#clasico").click(function(){
    onLeePoema("1")
    });
    $("#romantico").click(function(){
    onLeePoema("2")
    });
}
function onLeePoema(tipo){
    $.ajax({
        async:true,
        type:"POST",
        dataType:"html",
        contentType:"application/x-www-form-urlencoded",
        url:"poemaPOST.php",
        data:"poema="+tipo,
        beforeSend: inicioEnvio,
        success: llegadaEnvio,
        error: errorEnvio
    });
}
function inicioEnvio(){
    $("div").text("Inicio carga...");
}
function llegadaEnvio(datos){
    $("div").html(datos);
}   
function errorEnvio(datos){
    $("div").text("No se pudo, lo siento");
}
</script>
</head>
<body>
<button id="popular">Poema popular</button>
<button id="clasico">Poema clásico</button>
<button id="romantico">Poema romántico</button>
<div></div>
</body>
</html>


Curso completo: https://www.udemy.com/jquery-y-mobile/
Ejemplo: http://pacoarce.com/jQuery/ajax.html

lunes, 18 de febrero de 2013

El método POST para enviar parámetros desde jQuery

El método pos enviía la información por medio de los bloques Multipurpose Internet Mail Extensions o MIME  (en español "extensiones multipropósito de correo de internet") y en jQuery nunca guarda la información en el caché del navegador.

El primer parámetro que ncesitamos es la URL, posteriormente se envían los parámetros como si ffueran un objeto hecho al vuelo (con llaves) y porteriormente, y de forma opcional, tenemos una función de callback que se ejecuta scuando se termina la carga de nuestro archivo.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>POST</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#popular").click(function(){ onLeePoema("0");});
    $("#clasico").click(function(){ onLeePoema("1");});
    $("#romantico").click(function(){ onLeePoema("2");});
}
function onLeePoema(tipo){
    $.post("poemaPOST.php",
        {
            poema:tipo
        },
        function(data, estatus){
        $("div").html(data);
    });
}
</script>
</head>
<body>
<button id="popular">Poema popular</button>
<button id="clasico">Poema clásico</button>
<button id="romantico">Poema romántico</button>
<div></div>
</body>
</html>

Los métodos GET y POST en jQuery

Con los métodos get y post podremos solicitar información a una página de internet que utiliza algun lenguaje intermedios en el servidor, como pueden ser PHP, Coldfusion o ASP.

  • GET - Solicita la información de una página determinada. Puede quedar la información en la memoria caché del navegador.
  • POST - Envía la información a ser procesada. Nunca se guarda en memoria caché la información.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GET : Lee un poema</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
  $("button").click(onCargaPoema);
}
function onCargaPoema(){
    $.get("poema.php",function(data,status){
      $("div").html(data);
    });
}
</script>
</head>
<body>
<button>Pulsa para trer un poema del servidor</button>
<div></div>
</body>
</html>


El archivo de poema.php es bastante sencillo:

<?php
$poema = rand(0, 2);
if($poema==0){
    print "<h2>POEMA POPULAR</H2>";
    print "<p>EN EL AGUA CLARA</p>";
    print "<p>QUE BROTA EN LA FUENTE,</p>";
    print "<p>UN LINDO PESCADO</p>";
    print "<p>SALE DE REPENTE.</p>";
    print "<p>LINDO PESCADITO,</p>";
    print "<p>NO QUIERES VENIR</p>";
    print "<p>A JUGAR CON MI ARO?</p>";
    print "<p>VAMOS AL JARD&Iacute;N.</p>";
    print "<p>MI MAM&Aacute; ME HA DICHO:</p>";
    print "<p>'NO SALGAS DE AQU&Iacute;,</p>";
    print "<p>PORQUE SI TE SALES</p>";
    print "<p>TE VAS A MORIR'.</p>";
    print "<h3>An&oacute;nimo</h3>    ";
} else if($poema==1){
    print "<h2>REDONDILLAS</h2>";
    print "<p>Hombres necios que acus&aacute;is</p>";
    print "<p>a la mujer, sin raz&oacute;n,</p>";
    print "<p>sin ver que sois la ocasi&oacute;n</p>";
    print "<p>de lo mismo que culp&aacute;is;</p>";
    print "<br>";
    print "<p>si con ansia sin igual</p>";
    print "<p>solicit&aacute;is su desd&eacute;n,</p>";
    print "<p>por qu&eacute; quer&eacute;is que obren bien</p>";
    print "<p>si las incit&aacute;is al mal?</p>";
    print "<h3>Sor Juana Ines de la Cruz</h3>";   
} else if($poema==2){
    print "<h2>NOCTURNO A ROSARIO</h2>";
    print "<p>Pues bien, yo necesito</p>";
    print "<p>decirte que te adoro,</p>";
    print "<p>decirte que te quiero</p>";
    print "<p>con todo el coraz&oacute;n;</p>";
    print "<p>que es mucho lo que sufro,</p>";
    print "<p>que es mucho lo que lloro,</p>";
    print "<p>que ya no puedo tanto,</p>";
    print "<p>y al grito que te imploro</p>";
    print "<p>te imploro y te hablo en nombre</p>";
    print "<p>de mi &uacute;ltima ilusi&oacute;n.</p>";
    print "<h3>MANUEL ACU&Ntilde;A";
}
?>


NOTA: AMBOS ARCHIVOS DEBEN ESTAR EN EL SERVIDOR. 

La función de callback en la carga de texto con load()

En la función load(), que nos sirve para cargar archivos externos, tendremos un segundo parámetro, que es una función quese ejecuta automáticamente cuando el proceso de carga termina. Estas funciones son mejor conocidas como "callback".

En esta función tendremos tres parámetros:

  • respuesta- contiene el resultado de la carga, si esta fue exitosa
  • estado -regresa una cadena con el estado de la carga: "success" o "error"
  • xhr - contiene el objeto XMLHttpRequest
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    $("#poema1").click(onPoema1);
    $("#poema2").click(onPoema2);
});

function onPoema1(){
    $("div").load("textos/poema1.txt h2", onCarga);
}
function onPoema2(){
    $("div").load("textos/poema2.txt #primera");
}
function onCarga(resultado, estado, xhr){
    if(estado=="success")
      alert("Carga de archivo exitosa!\n"+resultado);
    if(estado=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
}
</script>
</head>
<body>
<button id="poema1">Poema 1</button>
<button id="poema2">Poema 2</button>
<div></div>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/LoadCallback.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

domingo, 17 de febrero de 2013

El comando load de AJAX

El método load() es simple, pero poderoso. Nos permitirá leer una archivo en el servidor (en este caso de texto) y ponerlo en cualquier elemento de nuestra página.

Su sintaxis básica es:

$(selector).load(URL,data,callback);


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Caraga texto externo</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
  $("#poema1").click(function(){
    $("#div1").load("textos/poema1.txt");
  });
  $("#poema2").click(function(){
    $("#div1").load("textos/poema2.txt");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Pulse el botón para leer los poemas</h2></div>
<button id="poema1">Poema 1</button>
<button id="poema2">Poema 2</button>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/Load.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

AJAX y jQuery

AJAX es un conjunto de tecnologías tradicionales, como el JavaScript, el HTML y el XML, para crear aplicaciones asíncronas. Es el acrónimo de Asynchronous JavaScript And XML. Esta tecnología permite mandar y recibir información (entiéndase datos) desde el background del navegador por medio del objeto XMLHTTPRequest, el cual se encuntra implementado desde 2004 en todos los principales navegadores (incluso en Internet Explorer).

jQuery provee algunos métodos para aprovechar la funcionalidad AJAX

Con estos métodos se puede solicitar información en texto, HTML, XML o JSON al servidor remoto usando metódos POST y GET, y podrá desplegar esta información en cualquier elemento HTML.


Modificar las dimensiones de un elemento con width y height

Podemos cambiar las dimensiones de un elemento en web por medio de los métodos width y height, asi como cambiar dichos atributos por medio del métod attr. Estos métodos no tienen un efecto de animación.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Width Height</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#chica").click(onChica);
    $("#mediana").click(onMediana);
    $("#grande").click(onGrande);
}
function onChica(){
    $("#afro").width(400).height(251);
}
function onMediana(){
    $("#afro").width(800).height(502);
}
function onGrande(){
    $("#afro").width(1200).height(754);
}
</script>
</head>
<body>
<input type="button" id="chica" value="Chica"/>
<input type="button" id="mediana" value="Mediana"/>
<input type="button" id="grande" value="Grande"/>
<br>
<img src="imagenes/afrodita.jpg" id="afro"/>
<p></p>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/WidthHeight.html
urso completo: https://www.udemy.com/jquery-y-mobile/

sábado, 16 de febrero de 2013

Efectos en jQuery

Show Hide

Dentro de los efectos con los que contamos en jQuery, se encuentra el de mostrar y oculpar cualquier elementovisual del documento DOM. Podremos hacer en forma sencilla animaciones que serían imposibles con sólo HTML.

Toogle

El efecto de toggle nos permitirá ocultar y mostrar un elemento del documento DOM de manera muy sencilla, permitiéndonos  hacer efectos interesantes con muy poco código.

Fade-in Fade-out

También contamos con el efecto de desvanecimiento, conocidos como fade-in y fade-out. Como parámetro podemos indicarle la velocidad del efecto con parámetros "slow" y "fast", asi como en número de milisegundos.

slideUp y slideDown

Otro efecto que podremos realizar con casi nada de código, es del deslizamiento de cualquier elemento hacia arriba y hacia abajo. Al igual que los otros efectos, podremos controlar su velocidad con los parámetos "slow" y "fast", asi como manejar el tiempo en milisegundos.

animate

El efecto animate es uno de los más poderosos en jQuery, pode podemos tomar una o varias atributos de un elementos y animarlos.

Con el efecto animate pomdeos animar más de una propiedad. De hecho podemos animar casi cualquier propiedad, a excepción de la propiedad de color, donde necesitamos otra librería. Si deseamos animar alguna propiedad css con guión, por ejemlo padding-top, la tenemos que convertir a CamelCase, como paddingTop. 

El efecto animate lo podemos manejar con valores relativos, es decir, pequeños incrementos que se pueden sumar o restar cuando tenemos alguna propiedad numérica. Usaremos los operadores += para incrementar y -= para decrementar.

Por medio del método animate, podemos tener una pila de animaciones y jQuery las ejecutaría de una por una, con lo cual podemos hacer animaciones más elaboradas.

stop

El método stop(), en jQuery, se utiliza para detener una animación o efecto antes de que se termine.

El método stop () funciona para todas las funciones de efectos jQuery, incluyendo animaciones de deslizamiento, la decoloración ylas animaciones customizadas.
El parámetro opcional (StopAll) especifica si también la cola de animación debe ser detenida o no. El valor predeterminado es falso, lo que significa que sólo la animación activa se detendrá, permitiendo que las animaciones en cola para ser realizado posteriormente.

El parámetro opcional
goToEnd especifica si o no para completar la animación actual inmediatamente. El valor predeterminado es false.

Así que, por defecto, el método stop () mata a la animación actual que se realiza en el elemento seleccionado.




viernes, 15 de febrero de 2013

Modificar las dimensiones del modelo de caja con jQuery

El manejo de las dimensiones del modelo de caja en jQuery es muy claro, ya que cada una de las dimensiones tiene su propio método, simplificándonos la vida, al contrario de HTML, que parece un tema para iniciados.


Los métodos son los siguientes:

  • width(): el ancho del elemento sin padding, border ni margen.
  • height(): la altura del elemento sin padding, border ni margen.
  • innerWidth(): el ancho del elemento con el padding,pero sin el border ni margen.
  • innerHeight(): la altura del elemento con el padding,pero sin el border ni margen.
  • outerWidth(): el ancho del elemento con el padding y el borde, pero sin el margen.
  • outerHeight(): la altura del elemento con el padding y el borde, pero sin el margen.
  • outerWidth(true): el ancho del elemento con el padding, el borde y el margen.
  • outerHeight(true): la altura del elemento con el padding, el borde y el margen.

Alternar clases en un elemento con el método toggleClass()

Para poder alternar una clase en un elemento del documento DOM, es decir, que con un evento apliquemos la clase, pero que también podamos quitarla, utilizamos el método toggleClass().

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
}); 


En el siguiente ejemplo aplicamos y removemos cada clase con un botón correspondiente:

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alternar Clases</title>
<style>
.texto{
    text-align:center;
}
.rojo{
    color:red;
}
.autor{
    text-align:right;
    font-style:italic;
    color:black;
}
.caja{
    width:300px;
    background-color:#FF9;
    border:solid 2px black;
    height:200px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#cajaBtn").click(onCaja);
    $("#autorBtn").click(onAutor);
    $("#textoBtn").click(onTexto);
    $("#borrarBtn").click(onBorrar);
    $("#rojoBtn").click(onRojo);
}
function onCaja(){
    $("div").toggleClass("caja");
}
function onAutor(){
    $("#autor").toggleClass("autor");
}
function onTexto(){
    $("p").toggleClass("texto rojo");
}
function onRojo(){
    $("p").removeClass("rojo");
}
function onBorrar(){
    $("p").removeClass("texto rojo");
    $("div").removeClass("caja");
    $("#autor").removeClass("autor");
}
</script>
</head>
<body>
<div>
<p>En el agua clara</p>
<p>que brota en la fuente</p>
<p>un lindo pescado</p>
<p>sale de repente</p>
<p id="autor">Autor anónimo</p>
</div>
<input type="button" value="Estilo caja" id="cajaBtn"/>
<input type="button" value="Estilo texto" id="textoBtn"/>
<input type="button" value="Estilo autor" id="autorBtn"/>
<input type="button" value="Borrar estilo" id="borrarBtn"/>
<input type="button" value="Quitar rojo" id="rojoBtn"/>
</body>
</html>


Ejemplo:  http://pacoarce.com/jQuery/ToggleClass.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

Remover los estilos de un elemento con jQuery

Otro método que nos va a hacer de mucha utilidad es poder eliminar clases completas de un elemento del documento DOM, ya sea en tiempo de ejecución o en tiempo de autor. Para ello utilizamos el método removeClass().

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Borrar Clases</title>
<style>
.texto{
    text-align:center;
}
.rojo{
    color:red;
}
.autor{
    text-align:right;
    font-style:italic;
    color:black;
}
.caja{
    width:300px;
    background-color:#FF9;
    border:solid 2px black;
    height:200px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#cajaBtn").click(onCaja);
    $("#autorBtn").click(onAutor);
    $("#textoBtn").click(onTexto);
    $("#borrarBtn").click(onBorrar);
    $("#rojoBtn").click(onRojo);
}
function onCaja(){
    $("div").addClass("caja");
}
function onAutor(){
    $("#autor").addClass("autor");
}
function onTexto(){
    $("p").addClass("texto rojo");
}
function onRojo(){
    $("p").removeClass("rojo");
}
function onBorrar(){
    $("p").removeClass("texto rojo");
    $("div").removeClass("caja");
    $("#autor").removeClass("autor");
}
</script>
</head>
<body>
<div>
<p>En el agua clara</p>
<p>que brota en la fuente</p>
<p>un lindo pescado</p>
<p>sale de repente</p>
<p id="autor">Autor anónimo</p>
</div>
<input type="button" value="Estilo caja" id="cajaBtn"/>
<input type="button" value="Estilo texto" id="textoBtn"/>
<input type="button" value="Estilo autor" id="autorBtn"/>
<input type="button" value="Borrar estilo" id="borrarBtn"/>
<input type="button" value="Quitar rojo" id="rojoBtn"/>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/BorrarClases.html
Curso completo: https://www.udemy.com/jquery-y-mobile/