Maestros del Web » Carlos Chávez García http://www.maestrosdelweb.com Un espacio para los entusiastas del web Mon, 06 Oct 2008 22:41:21 +0000 http://wordpress.org/?v=2.6.2 en Bienvenido sea Apollo http://www.maestrosdelweb.com/editorial/apollo/ http://www.maestrosdelweb.com/editorial/apollo/#comments Mon, 26 Mar 2007 07:00:14 +0000 Carlos Chávez García http://www.maestrosdelweb.com/editorial/apollo/ Adobe lanzo públicamente la versión Alpha hasta ahora denominada Adobe Apollo. En este artículo compartimos una introducción e instalación de aplicaciones Apollo.

logo_apollo.jpgApollo es un RunTime multiplataforma para desarrollar aplicaciones de escritorio utilizando lenguajes enfocados para web tales como Flex, Flash, HTML, CSS, Javascript. Dándole la oportunidad a todos los desarrolladores de aplicaciones web para desarrollar directamente en el escritorio del usuario.

Apollo al ser multiplataforma podrá ejecutar sus aplicaciones en diferentes sistemas operativos como: Windows, Mac OS y Linux, por el momento esta versión Alpha solo puede ser usada en Windows y Mac OS. Sin duda abre la brecha para que las aplicaciones de escritorio tradicionales cambien en su diseño y/o estructura, ya que permitirá traer todo el potencial de Flash/Flex directamente al escritorio.

Así mismo la facilidad de comunicación con lenguajes de servidor será muy grande, ya que Flash/Flex cuentan con diversos recursos para intercambiar información con el servidor para utilizar infinidad de lenguajes tales como Java, PHP, ASP etc. Ademas con la ventaja que existen gateways para el intercambio de información binaria entre el cliente y el servidor, como AMFPHP para nombrar uno.

Cómo instalar Apollo

Los archivos de instalación creados por Apollo tienen la extensión .air, que como hemos mencionado pueden ser instalados en Windows y Mac. El modo de instalación de las aplicaciones es muy familiar a cualquier otra. A continuación descargar el archivo e iniciar los pasos siguientes:

apollo_install_p1.jpg

Lanza la típica ventana en donde nos pregunta si queremos instalar la aplicación, si queremos agregar el icono en el escritorio y si deseamos que se incluya en el menú de inicio.

apollo_install_p2.jpg

Una vez terminada la instalación el mensaje de instalación completa salta a la vista.

apollo_install_p3.jpg

Con estos tres pasos sencillos tenemos instaladas las aplicaciones creadas con Apollo, Ahora veamos como desarrollar aplicaciones con el ya famoso HelloWorld.

Desarrollando con Apollo

Sin duda la mayor ventaja que ofrece Apollo es que utiliza plataformas y/o lenguajes para web, haciendo que cualquier persona con un dominio medio de estas plataformas/lenguajes pueda dar el salto al desarrollo de aplicaciones de escritorio.

La mejor manera de desarrollar aplicaciones para Apollo es utilizar Flex Builder 2.0.1 un entorno de desarrollo basado en eclipse. Las ventajas de Flex son bastantes, componentes robustos, total manipulación de la apariencia de la aplicación y componentes por medio de estilos CSS y por supuesto ActionScript 3.

Para desarrollar aplicaciones con apollo recomiendo hacerlos a través de Flex Builder para ello necesitaras descargar lo siguiente:

Las extensiones de Apollo para Flex contiene entre otras cosas 6 componentes nuevos: 4 para navegación del filesystem y 2 para integrar HTML dentro de nuestra aplicación. Apollo también cuenta con APIs para accesar a funciones y recursos de la máquina local.

  • WINDOW API
  • FlieSystem API
  • Connect/Disconnect API No disponible en la versión Alpha
  • Aplication Update Api

En el próximo artículo veremos estos componentes y APIs más a fondo.

Hello World Apollo

Veamos como es crear una pequeña aplicación en Apollo utilizando Flex Builder: una vez que tengamos lo necesario indicado anteriormente.

Abrimos Flex Builder y veremos una interfaz tripanel, en el panel izquierdo, panel de proyectos, haremos clic derecho y aparecerá un menú del cual escogeremos la opción “New”, del submenu siguiente escogeremos “Apollo Project”.

apollo_hellow_p1.jpg

Después de esto, aparecerá una ventana donde configuraremos las opciones de nuestro proyecto, veamos una por una.

La primer pantalla nos pide que seleccionemos si utilizaremos ColdFusion, Flex Data Services, o Webservices/XML para accesar a información externa. Por default aparece seleccionada Basic que es la utilizaremos. Damos click en “Next”.

apollo_hellow_p2.jpg

La siguiente pantalla nos pide que nombremos nuestro proyecto, en este caso HelloWorld.

apollo_hellow_p3.jpg

En esta pantalla nos pedirá que ingresemos Paths a clases externas, en este caso no utilizaremos ninguna, vamos a usar las que vienen por defecto, Clic en “Next”.

apollo_hellow_p4.jpg

Por último ingresaremos los detalles de nuestra aplicación.

apollo_hellow_p5.jpg

  • Id. El nombre de la aplicación.
  • Name: el nombre que aparecerá en el menú de inicio y en el icono de la aplicación una vez instalada.
  • Escription: qué es o qué hace la aplicación.
  • Copyrigth.

Y la opción más importante es: Window Mode, esta opción nos permite escoger si queremos usar las ventanas por defecto del sistema operativo, si queremos usar la presentación de ventana que ofrece apollo o si queremos que nuestra aplicación no tenga ventana contenedora, esta última nos puede servir para hacer los famosos Wigets.

En este caso vamos a usar la que provee Apollo que es la opción “Transparent”, al dar clic en Finish, se creará el proyecto del lado izquierdo el cual contendrá nuestro archivo MXML. El archivo XML que es donde están las propiedades de nuestra aplicación las cuales pueden ser editadas, y por último el folder bin que es donde se almacena todo lo creado.

En la parte derecha por defecto aparecerá abierto el archivo MXML el archivo principal de la aplicación y que será compilado el aspecto inicial es este:

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:ApolloApplication>

A su vez Flex Builder nos da la posibilidad de arrastrar los componentes que vayamos a utilizar en el modo de diseño, esta modalidad ira creando el código automáticamente en nuestro archivo.

apollo_hellow_p6.jpg

Así es como se ve el ambiente de desarrollo cuando estamos en la vista de Diseño (Design).

Como puede ver del lado izquierdo aparece un listado de los componentes que podemos usar en nuestra aplicación, para este ejemplo solo usaremos el componente Label, para ello tomamos el componente y lo arrastramos al escenario.

apollo_hellow_p7.jpg

Al momento de seleccionar el componente del lado derecho se mostrara el panel de propiedades en donde pondremos el texto, seleccionamos las característica del texto. De vuelta a la vista “Source” veremos que el código fue agregado, algo así:

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label text="Hello World!!!" horizontalCenter="0" verticalCenter="0" fontFamily="Georgia" fontSize="20" fontWeight="bold"/>
</mx:ApolloApplication>

Para ver el resultado de nuestra aplicación solo basta oprimir el botón para compilar.

apollo_hellow_p8.jpg

Y veremos el resultado final.

apollo_hellow_p9.jpg

Por último para distribuir nuestro archivo e instalar nuestra aplicación seleccionamos del menú principal la opción de “File” y luego Export. En la ventana que aparecerá seleccionamos “Deployable AIR File”.

apollo_hellow_p10.jpg

Una vez hecho esto solo nos falta seleccionar que proyecto queremos hacer instalable y escoger el lugar en donde se guardará nuestro archivo .air.

apollo_hellow_p11.jpg

Al dar click en “Finish” nuestro archivo será creado en el Path seleccionado y estar listo para su distribución. Con esto ya tenemos nuestra primera aplicación hecha en Apollo.

]]> http://www.maestrosdelweb.com/editorial/apollo/feed/ Introducción a XML http://www.maestrosdelweb.com/editorial/flashxml/ http://www.maestrosdelweb.com/editorial/flashxml/#comments Wed, 11 May 2005 00:00:00 +0000 Carlos Chávez García Pequeña introducción sobre que es XML y como empezar a trabajar con el.

Esto es solo una pequeña introducción al XML para poder entender como empezar a trabajar con dicho lenguaje.

Aquí hay información mucho más extensa www.w3schools.com/xml

Comenzamos…


Flash XML
XML

(eXtensible Markup Language ó Lenguaje extensible de marcas) es un conjunto de reglas que sirven para definir etiquetas semánticas para organizar un documento. Además el XML es un metalenguaje que te permite diseñar tu propio lenguaje de etiquetas. A diferencia del un lenguaje de etiquetas normal (HTML), XML te permite definir tu propio lenguaje..

Me lo podrías explicar en Español..? =P

Viéndolo desde un punto de vista simple y sin meternos en definiciones muy técnicas. XML nos ayuda a tener nuestra información estructurada jerárquicamente por medio de etiquetas ó Tags que nosotros mismos crearemos.

Ahora, para crear un documento XML no necesitas nada mas que un Procesador de texto simple, Ej.: Bloc de Notas y al terminar el documento solo tienes que salvarlo con la extensión xml.

Nota: Yo uso el Editplus2 =).

Estructura de un documento XML

Para crear un documento XML valido solo necesitas recordar 2 cosas.

1.- Declarar el tipo de documento, 

<?xml version='1.0'?>

Esto, creo yo, no necesita explicación. Aunque cabe mencionar que al declarar un documento XML también puedes declarar el tipo de codificación que ocuparas, esto se hace por medio de un atributo. 

<?xml version='1.0' encoding='UTF-8'?>

Mas info sobre codificaciones

2.- Aunque podemos crear nuestras propias etiquetas en el XML estas deben de llevar un orden jerárquico

<?xml version='1.0' encoding='UTF-8'?>
    <Ligue>
        <Galan>Hola! bailamos</Galan>
	<Chava>ashhhhhh!!</Chava>

    </Ligue>

Si te das cuenta los nodos Galan y Chava son hijos del Nodo Ligue, para crear un nodo nuevo solo tienes que escribir

<nombredelnodo>

para indicar el inicio y

</nombredelnodo>

para indicar su fin.

Es algo simple no?.

Dichos nodos, a su vez pueden contener cualquier cantidad de atributos, dichos atributos son fuente de información, que en lo particular me gusta trabajar con ellos. veamos un ejemplo de tributos…

<?xml version='1.0' encoding='UTF-8'?>
    <Ligue>

        <Galan nombre='Juan' edad='20'>Hola! bailamos</Galan>
        <Chava nombre='Maria' edad='19'>ashhhhhh!!</Chava>
    </Ligue>

umm interesante…. A mí, repito, se me hace más fácil trabajar con atributos, siempre y cuando la información contenida no sea extensa….

Al momento de trabajar con información extensa y/o caracteres propios del lenguaje:

<, > , ‘, "

puede haber errores.

Por ejemplo si queremos mostrar código mediante XML qué pasa?.. 

<?xml version='1.0'?>
    <source>
        for(var a=0; a<10; a++){
           trace("Hola Mundo!!")
        }
    </source>

Esto nos marcara un error de sintaxis ya que en código utilizamos un

<

Pero este pequeño inconveniente lo podemos arreglar usando CDATA.

Lo que CDATA hace es: Simplemente toma todo el texto que esta contenido dentro del tag y lo muestra tal cual. Evitando problemas de sintaxis..

Ejemplo:

<?xml version='1.0'?>
    <source>
    <![CDATA[
        for(var a=0; a<10; a++){
           trace("Hola Mundo!!")
        }
    ]]>
    </source>

Y listo Problema resuelto.. =)

Con esto ya podemos empezar a trabajar con archivos XML.

La ídea es trabajar con datos extraídos de un XML en Flash en un próximo artículo.

Bajar Fuentes

]]> http://www.maestrosdelweb.com/editorial/flashxml/feed/ Manejando formularios con Flash y PHP http://www.maestrosdelweb.com/editorial/fflashphpform/ http://www.maestrosdelweb.com/editorial/fflashphpform/#comments Tue, 09 Mar 2004 00:00:00 +0000 Carlos Chávez García Este tutorial nos ayudará a realizar un formulario a través de flash que se enviará por correo utilizando el soporte de PHP y la función de mail del servidor.

Para
este formulario, necesitaremos un servidor con soporte PHP y la función
mail activada. ¿Como sabemos si tenenos dicha función?, simple.

Crea un nuevo archivo PHP ("send.php") y pones el siguiente código.

Código: 

<?php
mail("tuCorreo@tuServidor.com", "Probando Ando =)", "Hola Hola!!");
?>

Súbelo a tu servidor y pruébalo www.tuServidor.com/send.php,
Si todo esta bien te saldrá una pagina en Blanco en el navegador y
a tu casilla llegara dicho correo.

Formulario PHP Flash

Bien,
Una vez comprobado esto seguimos.

Primero trabajaremos el Fla:

Creamos
una nueva película, sobre el escenario creamos 4 campos de texto de
entrada InputText y les damos nombre de instancia, y creamos 2 botones "enviar_btn" y "borrar_btn"

Crearemos
2 funciones una para enviar las variables a PHP y otra función para
borrar los datos del formulario.

Función enviar:

Código: 

enviar = function () {
    if (email_txt.text.length && nombre_txt.length && titulo_txt.length && mensaje_txt.length) {
        if (email_txt.text.indexOf("@") != -1 && email_txt.text.indexOf(".") != -1) {
            form_lv = new LoadVars();
            form_lv.nombre = nombre_txt.text;
            form_lv.mail = email_txt.text;
            form_lv.mensaje = mensaje_txt.text;
            form_lv.titulo = titulo_txt.text;
            form_lv.sendAndLoad("http://www.tmeister.net/send.php", form_lv, "POST");
            mensaje_txt.text = "Enviando Mensaje..";
            nombre_txt.text = "";
            email_txt.text = "";
            titulo_txt.text = "";
            form_lv.onLoad = function() {
                if (this.estatus == "ok") {
                    mensaje_txt.text = "Tu mensaje fue enviado...";
                    nombre_txt.text = "";
                    email_txt.text = "";
                    titulo_txt.text = "";
                } else {
                    mensaje_txt.text = "Problemas con el servidornIntentalo de Nuevo";
                }
            };
        } else {
            email_txt.text = "Correo Invalido";
        }
    } else {
        email_txt.text = "Dato Necesario";
        nombre_txt.text = "Dato Necesario";
        titulo_txt.text = "Dato Necesario";
        mensaje_txt.text = "Dato Necesario";
    }
};

Código: 

if (email_txt.text.length && nombre_txt.length && titulo_txt.length && mensaje_txt.length)

Con esto comprobamos que al presionar el boton todos los campos de texto no
estén vacíos, si esta condición no se cumple en los campos
aparecerá el texto "Dato Necesario";

Código:

if (email_txt.text.indexOf("@") != -1 && email_txt.text.indexOf(".") != -1) {

Esta comprobación revisa que el mail introducido tenga la @ y
un punto .;

Si ambas condiciones son ciertas creamos una instancia de la clase LoadVars
y asignamos variables para enviar a PHP

Código:

form_lv_lv = new LoadVars();
form_lv.nombre = nombre_txt.text;
form_lv.mail = email_txt.text;
form_lv.mensaje = mensaje_txt.text;
form_lv.titulo = titulo_txt.text;
form_lv.sendAndLoad("send.php", form_lv, "POST");
    mensaje_txt.text = "Enviando Mensaje..";
}

Una vez ejecutado el Script PHP y si todo salio bien, este, regresara una variable
llamada status que tomaremos con el evento onLoad

Código:

form_lv.onLoad = function() {
                if (this.estatus == "ok") {
                    mensaje_txt.text = "Tu mensaje fue enviado. nGracias.... =)";
                    nombre_txt.text = " ";
                    email_txt.text = " ";
                    titulo_txt.text = " ";
                } else {
                    mensaje_txt.text = "Problemas con el servidornIntentalo de Nuevo";
                }
            };

Función borrar:

Con esta función solo borraremos los datos que tengan los campos de texto.

Código: 

borrar = function () {
    nombre_txt.text = " ";
    email_txt.text = " ";
    mensaje_txt.text = " ";
    titulo_txt.text = " ";
};

Esto no necesita mucha explicación =P

Por ultimo asignamos dichas funciones a los eventos de los botones

Código:

  enviar_btn.onRelease = enviar;
  borrar_btn.onRelease = borrar;

Y esto es todo en Flash.. Seguimos con el PHP..

Código:

<?php
            if(isset($_POST["nombre"]) && isset($_POST["titulo"]) isset($_POST["email"])
            isset($_POST["mensaje"]) ){
            $fecha = date("d-M-y H:i");
            $mymail = "tuCorreo@tuServidor.com";
            $subject = "Desde el Sitio.. =)";
            $contenido = $nombre." Escribio :\n";
            $contenido .= $mensaje."\n\n";
            $contenido .= "el mensaje se escribio el ".$fecha;
            $header = "From:".$mail."\nReply-To:".$mail."\n";
            $header .= "X-Mailer:PHP/".phpversion()."\n";
            $header .= "Mime-Version: 1.0\n";
            $header .= "Content-Type: text/plain";
            mail($mymail, $subject, utf8_decode($contenido) ,$header);
            echo "&estatus=ok&";
            }
            ?>

La función isset verifica que una variable exista, en este caso verificamos
que las cuatro variables existan antes de enviar el mail.

Los parámetros de la función mail de PHP son:

  • Para: Correo destino. En este caso $mymail
  • Titulo: Titulo del Correo. En este caso $subject
  • Mensaje: Cuerpo del correo. En este caso $contenido
  • Headers o cabeceras: Son las cabeceras del correo, donde se especifica
    el tipo de contenido (texto plano, texto HTML), entre muchas otras opciones
    que no mencionare.

Una vez enviado el mail el PHP regresa la variable status que Flash interpretara…
Si dicha variable existe es que todo funcióno… =)

NOTA: Para enviar un correo en formato HTML solo necesitas
escribir el cuerpo del mensaje con dicho formato (HTML) y en los headers especificarlo,
esto se hace cambiando Content-Type: text/plain por Content-Type:
text/html

Para más información sobre la función mail href="http://mx.php.net/manual/es/function.mail.php">Click Aqui

href="/editorial/util/flashphpform.zip">Bajar Zip

]]> http://www.maestrosdelweb.com/editorial/fflashphpform/feed/