Integracion Google

Integración Google

2011-10-10T23:55:00.000-07:00

Bienvenido a Integración Google

Ultimo avance: empezar a adecuarnos a utilizar ExtJs-4.0, actualizado al 01/07/2011...

Integracion Google
nuestra propuesta de ingreso al mundo del desarrollo web y de la tecnología Google...

Nuestro Objetivo:

Lograr formar una comunidad de desarrolladores que compartan códigos cortos y sencillos, que funcionen, y que estén lo suficientemente explicados para que los podamos probar, y así aprender las diversas técnicas de desarrollo web vigentes.. y aunque tenemos una especial predisposición respecto al mundo Google y al mundo opensource en general...no haremos exclusiones, todo aporte es bienvenido, por cuanto el mundo del desarrollo Web es realmente muy amplio.

Avances a la fecha:

Importante: Por favor Seleccione en el recuadro superior derecho, correspondiente al Traductor de Google, el Idioma más adecuado para Usted..!

Empezando sin conocimientos previos.
(actualizado al 15/09/2011

Herramientas para desarrollo Web.
(actualizado al 01/03/2011)

ExtJs, un framework bastante potente.
(actualizado al 15/09/2011)

Un avance de Integracion a Google, revisando algo de la documentación de Google.

Integracion a Google (1ra. parte), Adaptando "stores" a Visualizaciones Google y de Google Maps, sobre un modelo de Menu TreePanel que utiliza la API de Autenticacion de Google Contacts para acceder a nuestras aplicaciones,desarrollado utilizando el framework ExtJs.
(actualizado al 15/09/2011)

Integracion a Google (2da. parte), Utilizando Google SpreadSheets (hojas de calculo de Google Docs) como fuente de datos sobre el modelo anterior descrito, que utiliza la API de Autenticacion de Google Contacts para acceder a nuestras aplicaciones,desarrollado utilizando ExtJs.
(actualizado al 20/09/2011)

Integracion a Google App Engine, Una primera Integracion a Google App Engine utilizando la libreria estandard Webapp de Phyton y el SDK de Appengine versión 1.5.2 vigente a la fecha (que ahora requiere la identificación de la codificación utf-8, o la que utilicemos), y que nos permite "lanzar" las aplicaciones integradas a Google que hemos venido desarrollando con el framework ExtJS en los codelabs anteriores...
(actualizado al 12/07/2011)

Localizacion e Internacionalización de nuestro Blog, una manera sencilla y rápida de Internacionalizar nuestros blogs, paginas web u otros desarrollos recurriendo a la Tecnología Google.
(actualizado al 01/03/2011)

Hablemos sobre Facebook, comentarios respecto a Facebook, y desarrollo de algunas técnicas aplicados por nosotros para mejorar la participación de nuestros seguidores y empezar a programar algo en ese formato, que podríamos utilizar en nuestros desarrollos y proyectos (incluye referencia técnica).
(actualizado al 01/03/2011)

Hablemos sobre Twitter, comentarios respecto a twitter, el mas importante servicio de microblogging de la actualidad. Incluimos referencia técnica, y un código ejemplo referido a Twitter Anywhere, una técnica implementada por Twitter que sigue los estandares HTML y javascript que permite utilizar a Twitter en nuestras aplicaciones y desarrollos para mantener un mejor contacto con nuestros seguidores.
(actualizado al 01/03/2011)

Web2.0: Los negocios y las redes sociales, un poco de teoría que debemos considerar para utilizar las redes sociales en los desarrollos y aplicativos de nuestros negocios y/o instituciones..
(actualizado al 01/02/2011)

Los Gadgets de Google, que son y como ir aprendiendo a desarrollar nuestros propios gadgets utilizando el GGE (Google Gadget Editor) y sus herramientas... (Se adjunta ejemplo de 02 gadgets que muestran visualizaciones de una hoja de calculo de Google Docs, que podríamos pegar en nuestro escritorio usando Google Desktop, en nuestra pagina iGoogle, o en cualquier pagina web).
(actualizado al 23/07/2010)

Usando el Back-End PHP-MySQL (iniciándonos), codelab desarrollado tomando como referencia un tutorial de la pagina Oficial ExtJs, desarrollado con ExtJs-3.x y cuyo código hemos mejorado, y que nos presenta un CRUD -opciones básicas de Crear, Modificar, Borrar, Buscar e Imprimir-, sobre una tabla de una base de datos MySQL y considerando componentes dinámicos (la que migraremos a ExtJs-4.x)..
(actualizado al 01/03/2011)

Usando el Back-End PHP-MySQL (Temas de Acceso y Seguridad), empezando a diseñar nuestros sistemas tomando en consideración pantallas de acceso (Wizards) y opciones de seguridad, sobre tablas de una base de datos MySQL.(tomando como referencia el modelo CRUD del codelab anterior)
(actualizado al 10/03/2011)

Integracion Google (3ra Parte)), nuestro modelo de pantalla de acceso y Menu TreePanel desarrollado con el framework ExtJS, que nos permite seleccionar visualizaciones Google,de Google Maps y del mismo ExtJS que hemos venido desarrollando en nuestros codelabs anteriores (referentes a Integracion Google 1ra y 2da parte), pero ahora utilizando el Back-End PHP+MySQL, y comparando cada caso con las visualizaciones que desarrollamos utilizando spreadsheets de Google Docs como datasource; codelab inprescindible para completar nuestros conocimientos y empezar nuestros desarrollos bajo dicho entorno.
(actualizado al 25/04/2011)

Usando el Back-End Java+MySQL: El proyecto sdsimple, nuestros apuntes para empezar a iniciarnos con el Back-End Java+MySQL y poder empezar a experimentar con el proyecto sdsimple de Pedro Peña García (España).
(actualizado al 20/09/2011)

Importante..!

Estimado lector.. si lee esta nota es porque ha revisado esta pagina... y lo primero, es indicarles que este Blog estado desarrollado en idioma español... por lo que para poder entendernos es necesario que seleccione su lengua nativa, o el idioma de su preferencia, en nuestro Google Traductor.
Entendemos que puede haber limitaciones en la traducción automatica, pero para nosotros, programadores y desarrolladores web, lo más importante son los códigos: ..un buen ejemplo es mejor que mil palabras...

Bienvenidos y buen dia..!

Using the Back-End Java+MySQL: Instalando sdsimple..

2011-10-02T10:51:00.000-07:00

Recuerde que..

Este blog esta desarrollado en idioma español pero utilizando Google Traductor puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a Integracion Google.

...y ahora veremos como instalar el sistema sdsimple en nuestro servidor local Tomcat utilizando Netbeans para facilitarnos el trabajo, y finalmente tener al proyecto en un entorno "profesional" de desarrollo ,listo para que lo empecemos a revisar ..y empezar a planificar y realizar nuestras propias modificaciones.... .por supuesto, que si han revisado nuestra entrada anterior ya deben tener una idea de como realizar todo el proceso, pero en esa oportunidad "cargamos" un proyecto que no estaba ligado al mundo Java (nuestros codelabs Integración Google 1ra y 2da parte), pero en esta oportunidad si vamos a utilizar códigos java y la base de datos MySQL que debemos haber instalado en los inicios de este proyecto Integración Google junto con Appserv (ó el entorno HTTP Apache, PHP y MySQL que hayamos elegido, como WAMP, XAMP, etc), así que ahora solo quedan algunas cosas propias de dicho entorno que debemos considerar antes de proceder con la instalación.

el caso es que el entorno de desarrollo Tomcat-Java-Netbeans no viene anexado a una base de datos en particular, así que podemos conectar a cualquier base de datos ya sea "local" o "remota" , es decir, disponible en nuestro equipo, en nuestra intranet o en la "nube" (además que desde el comienzo se menciono que el entorno de desarrollo AppServ no era sino la unión de tres grandes "sistemas" que nos facilitaba el proceso de configuración y enlace entre ellos, el servidor HTTP Apache, la base de datos mySQL y el lenguaje de programación PHP; pues ahora vamos a comunicarnos y mostrar a la base de datos MySQL sin utilizar HTTP Apache ni PHP ...usando ahora Apache Tomcat y Java a través del entorno de desarrollo de Netbeans.

Sino no tenemos instalado Appserv podemos proceder a instalar unicamente MySQL (si es posible), pero si no queremos trabajar directamente en el editor de comandos de MySQL, y trabajar con un entorno "grafico" para el manejo de la base de datos como PHPmyAdmin, pues necesitaremos tambien instalarlo por separado (tambien es posible), pero si queremos facilitarnos las cosas ..y probar todos nuestros codelabs anteriores, mejor procédase a la instalación de Appserv (u otro similar), cuyos conceptos describimos en nuestro post empezando desde cero....

/. Continua..

Saludos
@Mlaynes

Opina en nuestro foro §FB..!

Using the Back-End Java+MySQL: El proyecto sdsimple

2011-09-22T12:29:00.000-07:00

Recuerde que..

...y bueno amigos, llego el turno de hablar del Back-End Java(JSP)+MySQL, pero continuando con nuestra modalidad de presentación de Codelabs, vamos ahora a poner la valla bien alta presentando en esta oportunidad al proyecto sdsimple.

Que es el proyecto sdsimple? es una aplicación administrativa desarrollado bajo la modalidad "Todo a la Web" bastante compacta y completa para facilitar la administración y gestión de PYMES que se distribuye bajo los términos de la Licencia Pública General GNU (tal como está publicada por la Free Software Foundation; ya sea la versión 3 de la licencia, o (según su elección) cualquier otra versión posterior). Este programa se distribuye con la esperanza de que sea útil, pero SIN NINGUNA GARANTÍA; incluso sin las garantías de COMERCIALIZACIÓN o USABILIDAD O UTILIDAD PARA USOS PARTICULARES... las anotaciones son las textuales indicadas por Pedro Peña García (desarrollador del proyecto), a quien de esta humilde comunidad presentamos nuestros respetos... Sdsimple se presenta como un sistema de facturación on-line y como la "gestión eficaz de tu negocio", y en este caso vamos a precisar los alcances del proyecto sdsimple para que sepamos que tenemos entre manos:

No solo es facturación, abarca compras, ventas, cobranzas, pagos y gestión de caja y bancos; que considero un modelo muy interesante y apropiado para empresas de servicios, o empresas que "legalmente" conforme a la legislación de cada país, por el monto de sus ventas y/o activos, no son obligadas a mantener control de Stocks ni activos (basicamente lo que conocemos como PYMES). Sdsimple no hace control de stocks -el costo de los stocks y de ventas se tendría que calcular por diferencia de inventario, como es usual y legalmente establecido para este tipo de negocios- pero si registra los impuestos basicos involucrados en el proceso (IVA y retenciones), por supuesto todo esto depende de cada país y puede ser suficiente, pero por poner un ejemplo, en Argentina parece existen mas impuestos y/o retenciones que considerar respecto al caso peruano, de acuerdo a solicitudes de amigos de esta comunidad que han llegado a instalar el proyecto y ponerlo en funcionamiento de acuerdo a sus necesidades.
El proyecto en sí tiene soporte multiempresa, pero nos da opción a un único código de acceso a cada una de ellas, asimismo solo considera un único correlativo para la facturación y otro para las compras, vale decir, tal como esta diseñado solo soporta un único punto de venta y de registro; es decir, esta realmente diseñado para ser usado directamente por los administradores del negocio.
No presenta un modulo de contabilidad pero por supuesto que conociendo al detalle el modo de funcionamiento del sistema, y las bases de datos que la componen (las que son intuitivamente identificables), pues podría fácilmente enlazar a una aplicación contable..
Esta desarrollado utilizando como Back-End Java(JSP) + MySQL, y por el front utiliza ExtJs-2.2, una versión bastante estable y totalmente compatible con la ultima version ExtJs-3.4 de su tipo distribuido por sencha.com

Nota: Pueden revisar mas detalles del proyecto sdsimple en los enlaces indicados al final de esta pagina (Anuncios IGCodelab, lado izquierdo)

Consideradas y planteadas las "limitaciones", pasaremos a hablar de sus "virtudes" por cuando sdsimple es un verdadero proyecto cloud-computing que "facilmente" podriamos adaptar para una gestión completa de un negocio o empresa PYME, por supuesto que haciendo las correcciones y/o adiciones que se requieran, pero principalmente considera que sdsimple nos facilita considerablemente todas las cosas que hay que tener presentes en un proyecto "completo" usando el Back-End Java + MySQL, y eso es importante para nosotros...

Anótese con lo anterior que trabajar con Java no es lo mismo que trabajar con PHP que es un lenguaje de programación interpretado, diseñado originalmente y principalmente para la creación de páginas web dinámicas. PHP se usa principalmente para la interpretación del lado del servidor (server-side scripting) y por supuesto, para las conexiones con una diversidad bases de datos.. pero PHP se adapta muy bien con el servidor HTTP Apache -de uso casi generalizado- y viene ahora completamente integrado con él, como podrá fácilmente comprobar al revisar los miles de servicios hosting website y webservers que se promocionan por la red (y actualmente a costos bastante acequibles que incluso pueden ser menores US$5.00 mensuales, y en muchos casos Unlimited storage, unmetered transfer, and of course.. Unlimited domains.) ..pero el mundo Java no solo va asociado al mundo Web, con él pueden hacerse desde simples hasta complejos sistemas de escritorio, y con una perfomance comparable a la del lenguaje C, y por supuesto que con ella podemos desarrollar de todo: aplicaciones de escritorio, proyectos WEB, para moviles, y realmente para todo lo que se pueda conectar y/o asociar a una computadora... es un lenguaje muy potente, y su curva de aprendizaje no es tan sencilla, pero si usted estimado amigo lector ya ha llegado hasta etapa de nuestros codelabs (y se ha tomado la molestia de instalarlos, ejecutarlos y llegado a comprender), pues ya habra notado y convencido que mucho de lo que es desarrollo Web es como manejar una serie de multiples "paquetes" en diversos lenguajes y bajo determinados formatos y convenciones, que ya varios de ellos ya están desarrollados y listos para su uso... un ejemplo básico para nuestro caso es el manejo del formato JSON, que como han podido comprobar, las librerías que utilizamos para PHP ya estan hechas y solo las utilizamos -o cuando utilizamos widgets, iframes, etc.-... pues lo mismo sucede con el mundo Java... y lo mismo tambien con el mundo Python asociado a Google AppEngine.. conociendo y manejando los "paquetes" o modelos importantes que manejan cada de los entornos de desarrollo indicados, pues ya podemos por ejemplo conectarnos a cualquier base de datos.. y mostrarlos, como es nuestro caso, en cualquier pagina Web, y utilizando el framework ExtJs con que hemos venido trabajando en nuestros codelabs.y proyectos personales. claro que con otros framework tambien se puede llegar a lo mismo, pero la facilidad que pueda uilizar un mismo framework para todos los ambientes que menciono (back-end PHP+MySQL, Java+MySQL, Python+GAE (Google AppEngine), e incluso el "modernísimo" node-js/V8, que es Javascript pero para manejo por el lado del servidor, pues eso aún solo lo he comprobado con ExtJs.. aunando a lo anterior la posibilidad de integrarnos también a desarrollos para móviles vía el SDK de Sencha Touch...

Pero mejor no nos desviemos del tema... estamos ahora frente al Back-End Java+MySQL, y su manejo no es por supuesto igual al de los servidores HTTP Apache que hemos venido utilizando.. para utilizar Java para aplicaciones Web tenemos que instalar un servidor de aplicaciones, y como todo en el mundo de desarrollo Web existen varias opciones para ello, pero la más difundida y utilizada es el servidor Tomcat que es un servidor Web con soporte a objetos servlets y JSP, y que ha sido desarrollado por supuesto en Java e incluye el compilador Jasper, que compila JSPs convirtiéndolas en servlets... vale decir, hablar de Tomcat es hablar de un contenedor de servlets denominado catalina.

1er paso:
Instalar Nuestro Servidor Tomcat
(Nota : recomendamos lea primero completamente los dos primeros pasos y luego recien proceda a realizar las instalaciones que correspondan)

lo primero que debemos de tener en cuenta es que un servidor Apache Tomcat o jakarta Tomcat (como tambien suelen llamarlo), no es lo mismo que nuestro servidor HTTP Apache que hemos venido trabajando.. Tomcat es tambien un servidor Web y al instalarlo al igual que tenemos una carpeta "www", con Tomcat tendremos una carpeta "ROOT" contenido dentro de otra denominada "webapps" donde podremos poner nuestros archivos con extensión "jsp", los que serán interpretados y lanzados a nuestro navegador de preferencia (o por defecto).. pero para nosotros desarrolladores como ya debemos tener instalado un servidor HTTP Apache en el puerto 80, pues la instalación de Apache Tomcat la tendremos que hacer sobre otro puerto para evitar conflictos (uno recomendable puede ser 8080, 8090, etc. o realmente el que queramos pero que no sea utilizada por alguna otra opción o servicio web, proxy, etc; incluyendo por supuesto los puertos que utilizaremos con nuestro launcher de Google AppEngine (GAE).

Instalar Tomcat es realmente como instalar Apache con Appserv u otro similar (Wamp, Xamp, etc); pero es imprescindible indicar que primero debe haberse instalado el JDK de Java, para ello puede resultar conveniente revisar primero esta tabla requerimientos de JDK dependiendo de nuestra version Tomcat: http://tomcat.apache.org/whichversion.html, como siempre podemos trabajar con las ultimas versiones las que como podeis ver ya son bastante estables: Otra cosa que debemos de tener en cuenta es que al instalar, Tomcat a diferencia de HTTP Apache, el servicio no se carga en automático, excepto lo hayamos configurado expresamente para ello, por eso, concluída la instalación del servidor el primer paso imprescindible seleccionar en "Todos los programas", la opción Apache Tomcat, configurar Tomcat, y arrancar el servidor; y configurarlo en "automatico" si deseamos que siempre se cargue al inciar nuestro sistema operativo...

y bueno, el proyecto sdsimple me funciona sin mayores problemas utilizando la version 6.x de Tomcat, y el JDK version 1.5 de Java, pero pueden probar versiones superiores y no debería haber problemas... ahora para instalar Tomcat sobre window puede tener algunas cosas (como tambien las tiene sobre Linux y Unix, pues varias cosas se tienen que ingresar comandos de consola, especialmente para dar atrbutos a nuestras carpetas y desempaquetar los archivos tar requeridos),..pero realmente trabajar sobre Linux tiene sus ventajas respecto a la perfomance de nuestro servidor Web, realmente es más rapido, lo que es conveniente si lo vamos a utilizar en un ambiente de producción por supuesto; pero si vamos a hacer nuestras pruebas, y siendo a este nivel indiferente que trabajemos sobre Linux o Windows, entonces les paso un enlace de como hacer la instalación sobre Window7, que como es característico Microsoft siempre pone algunas restricciones de "seguridad" que debemos de tomar en cuenta.

http://profesor.antonio.com.mx/?p=129

Solo basta reiterar que no utilicemos para la instalación el puerto 80 que probablemente la estemos utilizando para nuestro servidor HTTP Apache, ni tampoco del 20 al 25 /FTP y otros), ni 1433 no 3306 (de SqlServer y MySQL respectivamente); podemos utilizar puertos mayores a 8000 por poner un ejemplo, ó de 5 digitos que tambien puede hacerse, tamién pueden utilizar un scaner de puertos on-line si tienen dudas que algunos puertos puedan estan siendo utilizados, es decir, si tienen varias cosas instaladas en su equipo que requieran conexiones a puertos... asimismo, es conveniente tener presente que tanto el JDK como nuestro Tomcat esten instalados sobre una carpeta raiz de alguna de nuestras unidades de disco, pues hay varias cosas del mundo Java que pueden configurarse directamente sobre archivos especificos (server.xml, context.xml, user.xml, etc por ejemplo), y es necesario que estos se encuentren fácilmente identificables y accesibles...

Cabe tambien indicarles que un servidor Tomcat es en varios aspectos mucho mas flexible que un servidor HTTP Apache, en el sentido por ejemplo que no necesariamente un "proyecto" deba estar grabado en la carpeta ROOT (equivalente a nuestra carpeta "www" que hemos venido trabajando); e inclusive es factible configurar a Tomcat para que directamente llamando a http://localhost/myproject por ejemplo (y este sea un proyecto JSP-Java, este corra automáticamente sin indicar el puerto de escucha al que ha sido direccionado nuestro servidor Tomcat... esto por supuesto es muy util y necesario si nuestro servidor Web es un servidor de producción, pero como no es nuestro caso no ahondaremos sobre las diferentes opciones de configuración que puede brindarnos un servidor Tomcat, que realmente son interesantes pero basta por el momento que sepamos que aún trabajando con un servidor HTTP Apache y un servidor Tomcat en forma simultanea, es posible que dentro de un ambiente intranet tengan acceso a nuestra aplicación ingresando directamente la IP de nuestro servidor y el nombre de nuestra aplicación: por ejemplo 192.1681.100/myproject; (o tambien el nombre de nuestro dominio interno configurado); y en el caso de un ambiente internet, indicando nuestro dominio y la aplicación, como por ejemplo: www.mydominio.com/myproject; no importando en ningun caso las indicaciones respecto al puerto que utilicemos y donde se encuentre grabada la carpeta que contiene a nuestro proyecto.

2do. paso:
Instalar Netbeans y trabajar con Apache Tomcat.

Cabe mencionar tambien que cuando instale por primera vez Netbeans (que es un IDE bastante eficiente para realizar nuestros desarrollos sean estos Java, PHP, Phyton, C++ o Groovy, etc.), este solo incluía un servidor de aplicaciones llamado Glassfish (similar al Tomcat), y que luego había que indicarle que trabajase también con Tomcat; pero observo como una agradable sorpresa que ahora Netbeans 7 incluye como servidores tanto a Glassfish 3.x como Tomcat 7.0.x; y que incluso es posible instalar todo el paquete (Netbeans, los servidores Glassfish y Tomcat y el JDK de Java en un unico paquete, como cuando instalamos Appserv o Xamp -pero con el adicional de tener un IDE completamente integrado y listo para su uso en nuestros proyectos... estas son ventajas del desarrollo opensource y de la vigencia y actividad de esta plataforma que podemos disfrutar ahora.. como siempre, mi única recomendación al respecto es que hagamos toda la instalación en una carpeta directamente en la raíz de una de las unidades de disco de nuestro ordenador (para facilitar la identificación y ubicación de los componentes del servidor).

Download Netbeans : http://netbeans.org/downloads/
(elegir la opcion JavaEE ó All, o sigamos este enlace para descargar el JDK de Java junto con el IDE NetBeans en un solo paquete.

pero antes la aclaración a una pregunta importate... Porque utilizar un IDE como Netbeans, Eclipse u otro asociado al mundo Java? ..y porque Netbeans en particular? ...no pretendo dar una explicación de las ventajas de trabajar con un IDE en paticular porque eso creo que depende bastante de la pericia y experiencia del programador con uno u otro entorno de desarrollo... pero trabajar en Java con un IDE especializado es particularmente util porque nos facilita herramientas para la manipulación, modificación, mejora y/o adición de nuevas opciones a nuestros proyectos (especialmente si son proyectos "grandes")... y la idea con el proyecto sdsimple es que dispongamos de él para que lo adaptemos y mejoremos de acuerdo a nuestras necesidades... pues planteado así, Netbeans nos permite "cargar" directamente las "fuentes" liberadas de sdsimple a un "proyecto Netbeans", y luego utilizando las pantallas de edición de sus componentes nos facilitará su revisión, depuración y adecuación; pero sobre todo, para ejecutar el proyecto (y lanzarlo a nuestro navegador de preferencia), sencillamente debemos seleccionar nuestro proyecto e indicar la opción Run y listo.. si todo esta correcto el proyecto se lanzara a nuestro navegador... y si nuestro servidor fuera de producción internamente el IDE hace las configuraciones necesarias y nuestro proyecto podrá ser accesible directamente desde el navegador de preferencia de los "usuarios" que accesen a nuestro proyecto , ya sea a nivel intranet o internet... y eso si es para tomar en cuenta..

3er. paso:
Hablemos sobre Java y como trabaja...

Como ya les indique anteriormente, el mundo Java tiene una curva de aprendizaje algo mas compleja que HTML, Javascript, PHP, etc. (y bastante similar a Phyton, esto por supuesto si queremos llegar a dominar todas sus posibilidades), pero no perdamos animos por ello, solo miremos a este entorno de desarrollo como uno de los "paquete" asociados al mundo de Desarrollo Web que podemos incluso integrar a nuestros proyectos, y poco a poco, y con la experiencia que ya debemos haber desarrollado al haber investigado y hacer uso de HTML, CSS, Javascript, PHP, las API de Google, de Facebook, de Twitter, etc.. pues mas pronto que tarde se despejarán todas nuestras dudas e incomprensiones.. debiendo tener presente primordialmente que, como en el caso de PHP, para tener acceso a los comandos e instrucciones de dicho lenguaje utilizabamos las etiquetas del tipo : "<?php -my-codePHP- ?>", pues ahora con Java, en nuestros archivos JSP, para hacer referencia a nuestros codigos y variables utilizamos la etiqueta <% --my-codeJava-- %> ..y con eso creo ya estamos listos para empezar nuestras investigaciones respecto a este entorno "profesional" de desarrollo.

Nuestro Hello World en Java?

<html>
<body>
<h1><% out.println("Hola mundo"); %></h1>
<p>This is my first test</p>
</body>
</html>

..observan mucha diferencia a nuestro Hello World de nuestro servidor HTTP Apache? ..pues realmente no (excepto que hemos colocado nuestra "Hola Mundo" dentro de las etiquetas <% %> que indica que lo contenido es un código Java, y el servidor así lo interpreta, ejecuta y mostrará en nuestro navegador) .. solo basta grabar este código en un archivo tipo texto con el nombre prueba.jsp, y ejecutarlo en nuestro servidor Tomcat, una vez lo tengamos instalado y puesto en servicio por supuesto, digitando en la barra de direcciones de nuestro navegador de preferencia : http://localhost:8090/prueba.jsp, (nótese que indicamos el puerto con que hemos configurado a nuestro Tomcat al realizar nuestra instalación; y tambien por supuesto, debe resultarnos claro que ya todo lo que manejamos con HTML, CSS, e incluso con Javascript, también lo podremos usar en el mundo Java.. algo similar es con el "mundo Phyton",..y también con el mundo "Microsoft" (que plantea el uso de otro tipo de servidores -el IIS- y otro lenguaje por el back-end -ASP.Net en este caso- y que detallo por cuanto hemos tomado conocimiento del lanzamiento de WebMatrix 2.0 beta, un entorno de desarrollo que junta diversas herramientas opensource y de Microsoft para hacer desarrollos Web que involucra las herramientas mencionadas, y otras todas integradas con HTML, CSS, Javascript e incluso PHP, lo que le permite el manejo e instalación de varios proyectos sociales tambien opensource muy conocidos como Wordpress, Drupal, Joomla, etc.. incluye su propio editor y "lanzador" de aplicaciones (de una manera similar al "launcher" de Appengine), así que tenemos otro entorno de desarrollo por revisar...

Volviendo a nuestro tema, vale destacar que por supuesto esto es solo el principio, pero con este sencillo ejercicio "Hola Mundo" creo que podemos llegar a tener una idea real de como funciona Java en nuestros desarrollos Web, el resto es hacer nuestras pruebas e investigaciones personales, y para ello les presento este link de un curso bastante completo e interesante de Java EE hecho por Abraham Otero, del portal Javahispano.org; el cual además de mostrarnos todo lo básico de desarrollo Web (como es el manejo de HTML y CSS), pues nos detalla todos los secretos de Java de manera bastante práctica, y no dudo que comprensible para todos los interesados... de hecho, no solo detalla los "secretos" de Java sino que nos explica y muestra porque resulta recomendable trabajar con el IDE Netbeans para facilitar nuestros desarrollos en esta plataforma -y las que soporte Netbeans-, utiliza videos bastante apropiados, y esta en español... tal vez el único "inconveniente" es que los videos estan colgados en Parleys.com (que es una plataforma e-learning free asociada a Adobe), pero para optimizar el uso de esta plataforma basta con que instalemos "Parleys Desktop" (que instala un SDK y baja los videos a nuestro ordenador, y agiliza la presentación y calidad de ejecución de los mismos), para ello revise el "Home" de la pantalla de Parleys cuando accedamos a los enlaces de video indicados; lo que le permitirá también revisar con mas detalle y dar una mirada a otros videos y cursos de Javahispano.org, y tambien de otros expositores disponibles en esta plataforma

Curso Basico de JavaEE : http://www.javahispano.org/articulos/JavaEE.pdf

4to. paso
Instalar el proyecto sdsimple en nuestro servidor local...

A este punto creo que el post ha resultado mas grande de lo que imaginaba para detallar como empezar a Instalar el proyecto sdsimple en nuestro propio servidor local, por ello creo que mejor vale indicar los puntos de Java y Netbeans que debemos tener presente para facilitar la comprensión del modelo planteado por el proyecto sdsimple.. y por supuesto, el detalle de la instalación la propocionaremos en nuestro siguiente post...

...empecemos con armar nuestro primer proyecto Web con Netbeans... es realmente sencillo...

si ya hemos instalado nuestro servidor Tomcat y Netbeans con cualquiera de las formas antes indicadas, solo basta que elijamos la opción File, New Project y en la pantalla de indicación de proyectos nuevos verifiquemos que esten seleccionados Java Web y Web Application, y luego elijamos Next (hay unos ejemplos alli que podremos revisar también); luego la pantalla nos solicitará el nombre y la ubicación de nuestro proyecto (por defecto una carpeta de Mis Documentos en Windows), podemos indicarle un nombre apropiado como "myHello" así como cualquier carpeta, lo más adecuado a nuestros intereses... el resto de opciones de esta pantalla las podemos dejar como están...

Luego pasamos a la configuración de nuestro servidor, y allí indicamos que utilizaremos Tomcat (si hubiésemos instalado Glassfish aparecerá esa opción por defecto); la versión de JavaEE indicada la dejamos por defecto, y podemos cambiar el Context Path a uno adecuado ("myHello" en este caso para referirnos al nombre de nuestro proyecto), teniendo presente que ese nombre es que corresponde al que utilizaremos como dirección en nuestros navegadores.. y con toda esta información nuestro proyecto "vacío" será creado.. Netbeans creará nuestro proyecto con todas las carpetas MVC requeridas para un proyecto Java Web, y asimismo observaremos al archivo index.jsp creado por defecto que solo tiene en HTML el mensaje "Hello World"...

Revisemos con detalle alguna de las carpetas creadas por el Netbeans, especalmente los archivos contenidos en WEB-INF (web.xml), y META-INF (context.xml); que han sido creadas con lo indicado al "armar" nuestro proyecto y que vamos a tener que utilizar y manipular cuando carguemos al proyecto sdsimple... y listo.. seleccionemos nuestro proyecto, botón derecho del mouse e indiquemos Run.. Netbeans procederá a construir y lanzar nuestro proyecto a nuestro navegador de preferencia y allí debe aparecer nuestro Hello World...

Instalando nuestros proyectos Integracion Google 1ra y 2da parte en Netbeans:

Aun cuando nuestros proyectos Integración Google 1ra. y 2da. parte son desarrollados exclusivamente con HTML y Javascript (recuerde que ExtJs es un framework de Javascript), puede cargarse estos trabajos como proyectos del Netbeans pero acondicionando su presentación para que respete la distribución de archivos convencional de un proyecto "Java Web"... y las condiciones son faciles de implementar, y se resumen en este caso en crear una carpeta "web" que contenga todo nuestro proyecto ( no se estamos utilizando ningún código Java que efectúe alguna operación por el lado del servidor), y asimismo que dentro de esta carpeta pondremos nuestra versión "liviana" del framework (carpeta Ext-3.4.0 en este caso); y además 02 carpetas denominadas META-INF y WEB-INF, quienes alojarán a los archivos "context.xml" y "web.xml" respectivamente (y en donde se indicará el nombre de nuestro "context-path" y archivo de arranque del proyecto, que en este caso es index.html)...

Material de Apoyo :

IntGoogle-01.rar, que nos muestra Visualizaciones Google sobre ExtJs (la versión Ext-3.4.0 en este caso) correpondiente a dicho codelab, ahora adecuados a un formato "Java Web" para poder cargarlos como un proyecto de Netbeans. Puede revisar nuestra entrada Integracion Google 1ra parte para mayores detalles.

IntGoogle-02.rar, que nos muestra Visualizaciones Google y ExtJs de nuestro documento "Spreadsheet Productos": correspondiente a dicho codelab (adjuntamos también nuestro modelo de hoja de calculo en formato xls para que puedan realizar pruebas con un documento propio, cargando este archivo a Google Docs)... Puede revisar nuestro codelab Integracion Google 2da. parte para mayores detalles.

Pasos para realizar el Codelab..

Descargados estos proyectos en la carpeta de proyectos de Netbeans (en Mis Documentos en caso de Windows, u en otra crapeta que creamos conveniente), hay que cargar estos proyectos a Netbeans; para ello, debemos seleccionar la opción File, New Project; y en ella debemos seleccionar Java Web y Web Application with Existing Sources; luego al seleccionar Next, se nos indicará que ingresemos la carpeta que contiene nuestro proyecto (Int-Google01 por ejemplo), y al seleccionarla, Netbeans nos pondrá como nombre de nuestro proyecto y su ubicación las de nuestra fuente que estemos cargando, pero que podemos cambiar si estimamos necesario (no en este caso); luego indicando Next nuevamente, Netbeans nos pedirá los datos de configuración del proyecto, el servidor a utilizar (Tomcat en este caso), la versión de JavaEE (que dejaremos la indicaba pues no estamos utilizando Java en este caso); y nuestro "Context-Path", que tendrá el nombre del proyecto que estemos cargando...y al indicar Next nuevamente, ahora Netbeans nos solicitará la configuración de nuestro "codigo fuente", vale decir, la ubicación de nuestra carpeta web que debe aparecer ya predeterminada (sino debemos ubicarla y seleccionarla), la ruta de nuestra carpeta WEB-INF, que tambien debería aparecer ya predeterminada, sino habra que realizar el mismo proceso indicado.. y listo; en este caso, al ser nuestro proyecto exclusivamente un proyecto "web" (y que no contiene nada de código Java), no es necesario indicar librerías complementarias ni otros datos, luego entonces al indicar "finish", Netbeans creará nuestro proyecto con una estructura similar al de nuestro primer proyecto... luego solo basta seleccionar al proyecto, hacer click derecho con el mouse y seleccionar Run, y Netbeans construirá y lanzará nuestro proyecto a nuestro navegador de preferencia... Debemos hacer lo mismo con nuestro proyecto Int-Google02, y con esto veremos corriendo nuestros ejercicios (si han seguido todos los pasos de nuestro proyecto), hasta en 03 plataformas distintas: sobre un servidor HTTP Apache, sobre AppEngine, y ahora sobre un servidor Apache Tomcat; y con lo que podemos sacar como una clara conclusión que dentro del mundo Web no hay problemas de compatibilidad si trabajamos con sus elementos básicos: refiriéndonos a HTML, CSS y Javascript, y de manera simultanea, ahora ya tenemos mas claro como cargar proyectos a Netbeans con "códigos existentes".. que es el caso del proyecto sdsimple...

Nota Importante: No realizamos lo mismo con nuestro proyecto Integración Google 3ra. parte, que describe un modelo CRUD de una tabla utilizando como Back-End PHP y la base de datos MySQL. En este caso no existe ningún problema respecto a trabajar y manejar la base de datos MySQL - y cualquier otra, como PostgresSQL, SQL Server, Oracle, Acces, etc.- el problema esta por el lado del lenguaje que utilizamos para "comunicarnos" con ella, que en este caso es PHP; pues Tomcat no viene configurado para trabajar con PHP por defecto, es un servidor de servlets y compilador JSP, pero vale mencionar que si es posible hacer que Tomcat reconozca PHP, pero hay que configurar al servidor para que lo haga ( y eso escapa los alcances de este codelab ), pero es bueno tenerlo en cuenta si se nos presenta el caso de proyectos que involucren códigos java, y soluciones y códigos PHP... pues ya debimos habernos dado cuenta que en el mundo Web todo se puede configurar, interconectar y utilizar de alguna u otra manera..

Asimismo cabe destacar que, usualmente los proyectos Java Web se inician con un archivo "index.jsp" (y que por supuesto, probablemente debe y puede contener códigos y variables java; pero en este caso, como hemos indicado, no estamos tocando nada de ese entorno por el lado del back-end, y en el caso de nuestro codelab Integracion Google 2da. parte, pues nuestro "back-end" es una hoja de cálculo de Google Docs que es externa a nuestro entorno de Desarrollo, y nos estamos conectando a ella de manera independiente utilizando únicamente código javascript (el API Ajax Javascript de Google para ser mas exactos, cuya biblioteca resumen de aplicaciones podemos consultar en el llamado Google Palyground); y es así como también podemos trabajar en nuestros proyectos personales... conectando nuestros aplicativos a bases de datos externas grabadas en la nube (internet), sean propias o de terceros que nos proporcionen un API de conexión y enlace, o también conectandonos a otros equipos en forma remota, para lo que debemos tener nuestro correspondiente usuario y password de acceso con los derechos necesarios, utilizando internet por supuesto...

Saludos
@Mlaynes

Opina en nuestro foro §FB..!

Integracion a Google (3ra parte)

2011-04-24T11:21:00.000-07:00

Recuerde que..

...y continuando con el entorno del Back-End PHP+MySQL pasamos a mostrar nuestro modelo de visualizaciones Google y ExtJs mostrado en nuestros codelabs Integracion Google 1ra y 2da parte, pero utilizando una base de datos llamada IGCodelab creada sobre MySQL (cuyo archivo IGCodelab.sql si proporcionamos en esta oportunidad para facilitar el desarrollo del ejercicio), y en la que la respectiva Tabla de Usuarios tiene registrados nuestro username y password de acceso al Modulo (puede probar con prueba y prueba, o passer y passer), entonces, y solo así, podremos acceder a las opciones de nuestro TreePanel que muestra ls diversas opciones de visualizacion utilizando las API de Google y de ExtJS que henos preparado, y creo suficientes para observar el potencial de ExtJS integrado a Google para el desarrollo de aplicaciones reales, y que incluye el manejo de Wizard cuyo modelo básico fue desarrollado en un tutorial del Quizzpot.

Con que contamos en estos momentos?

Si siguieron el desarrollo de nuestros codelabs desde el inicio, y por supuesto los anteriores respecto al Back-End PHP-MySQL, ya deben tener instalado en sus ordenadores un servidor de pruebas Apache con PHP+MySQL, y PHPMyAdmin (para administrar nuestras bases de datos), por lo que solo basta que verifiquen que tengan completo acceso a MySQL a través de PHPMyAdmin, accediendo a la misma y poder observar las tablas de la base de datos Tutorial creada en el ejercicio anterioir... y bueno, ahora nuevamente ya estamos listos para empezar nuestro codelab.

Audiencia

Se recomienda que, para entender este codelab, tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML, Javascript ...y algo de PHP (que si no dominamos o desconocemos, pues no debería preocuparnos tanto puesto que en este modelo solo se utilizan instrucciones fáciles de comprender y su sintaxis es bastante sencilla, además que si nuestro interes va por el empleo de este Back-End, debe ser un buen motivo para empezar a explorar este lenguaje).

Asimismo se recomienda haber leído y probado: Integracion a Google (1ra parte) e Integración a Google (2da parte), especialmente para comprender las herramientas utilizadas para integrar de las API de Google a ExtJs (y viceversa), que en este caso no se emplean pero se hacen referencia.

Material de Apoyo

Descomprimir el material de apoyo en una carpeta de www de nuestro servidor local AppServ u otro compatible Apache-PHP-MySQL, y se creara la carpeta "Int-Google03" que contiene los archivos correspondientes al presente codelab (si no entiende este paso favor consulte "empezando desde cero').

Pasos para ejecutar el Codelab...

Para ejecutar el tutorial debemos primero debe realizar lo siguiente:

Crear la base de datos IGCodelab. Esta base de datos contiene las tablas drivers, productos y usuarios que son las necesarias para ejecutar el codelab (utilice el archivo igcodelab.sql que incluimos en el material de apoyo).
Creada nuestra base de datos, puede observar que la tabla usuarios tiene registrado los usuarios prueba y passer con la que podremos acceder al Modulo.
Con nuestro explorador debemos ingresar a la carpeta "Int-Google03" creada en la carpeta www del Appserv, y alli "editar" el archivo "drivers.php". Este archivo en sus primeras lineas tiene en su inicio las intrucciones de conexion a nuestra base de datos:

// Database connection information
$host = "localhost"; // Host name
$user = "root"; // User default for MySQL access
$pwd = "..yourPassword.."; // put your PHPMyAdmin Password
$db = "igcodelab"; // Our Database of exercise

$user

$pwd

$db

"igcodelab"

$host

localhost

www.mydominio.com

..y ahora nuevamente ya estamos listo para ejecutar nuestro ejercicio...!

Ahora, si con nuestro navegador ingresamos a "localhost", y luego al ingresar a la carpeta a carpeta "Int-Google03" siguiendo la ruta donde hayamos descargado el material de apoyo (pero que debe dentro de la carpeta www de AppServ); pues al ingresar esta carpeta que contiene a nuestro archivo index.html, deberá aparecer una pantalla como la que se muestra a continuación:

Esto nos indica que nuestra descarga y copia ha sido correcta, y ya estamos listos para revisar el material de apoyo descargado y descubrir como hemos desarrollado nuestro codelab de Integracion Google empleando Wizards y Visualizaciones desarrollados con la API de Google y ExtJs.

Nota.- si no aparece la primera pagina mostrada es probable que no hayamos descargado nuestra version completa o "liviana"de ExtJs en la carpeta "www", como mostramos en "el potencial de ExtJs"; o tal vez, estemos usando una versión de ExtJs diferente de la indicada en nuestro archivo HTML (..ahora estamos usando la versión ext-3.3.1 vigente al 01/03/2011). Observe la ruta rerlativa a www que utilizamos para acceder dichos archivos "../../extjs/extjs-3.1.1" en este caso (que indica 2 carpetas sobre nuestra descarga del tutorial). Efectúe los cambios de la ruta necesarios en el archivo index.html del tutorial y pruebe nuevamente hasta que aparezca la pantalla indicada.

La segunda imagen nos muestra nuestro modelo de Pantalla de Acceso o Login, la cual en su parte inicial, al seleccionar el drivers de nuestra conexion, al mismo tiempo verifica la conexion a nuestra base de datos (si no aparece la opcion MySQL es porque aún cuando nuestra configuración de ExtJs es correcta, nuestra conexion a nuestra base de datos MySQL no lo es, y debemos revisar los parametros indicados de nuestro archivo drivers.php.

Asimismo, si no nos aparece nada, o al ingresar nuestros datos de acceso no se activa nuestro treePanel, o si la consola de nuestro browser nos muestra mensajes de problemas de conexion a la base de datos o conexion a MySQL, pues debemos revisar con mas detalle nuestra configuración y observar si los datos indicados han sido correctamente ingresados...

../ Continua

Saludos
@Mlaynes

Opina en nuestro foro §FB..!

Using the Back-End PHP+MySQL ( Wizard & Safety themes )

2011-03-10T11:52:00.000-08:00

Recuerde que..

...y continuando con el entorno del Back-End PHP+MySQL pasamos a mostrar el mismo modelo de la entrada anterior que nos muestra un mantenimiento basico de Tablas (Altas, Bajas, Modificación, Consulta e Impresion); pero en este caso mostrando previamente una pantalla de acceso o Wizard, mediante el cual, de habernos registrado previamente en una respectiva Tabla de Usuarios (en donde debe estar registrados nuestro username y su respactivo password de acceso al Modulo), entonces, y solo así, podremos acceder a nuestro GridEditor que nos muestra una lista de Presidentes de U.S.A y los partidos a los que pertenecen...

El hecho de utilizar Wizards o Pantallas de Acceso a nuestros modulos o sistemas, va asociado de manera ineludible a temas de seguridad por lo que debemos empezar a tomar en cuenta las siguientes consideraciones:

No debe permitirse el "acceso directo" a nuestras paginas, en este caso a nuestro modelo "grideditor" de presidentes, vale decir que si alguien obtuviese la direccion URL de nuestro GridEditor (como debe ser con cualquier otra pagina de nuestros sistemas), estos no deben poder acceder a ellas, sino que deberán ser redirigidos a la Pantalla de Acceso de nuestro modulo o sistema, y acceder a nuestras opciones solo si hubiesen sido debidamente registrados.

Debe asimismo tomarse en cuenta acciones de Auditoria de Datos, es decir, que deberíamos a empezar a registrar en una Tabla de diseño adecuado, todas las operaciones que estan efectuando nuestros usuarios (Alta, Baja, Modificacion, Consulta, y su fecha y hora de operación), y así poder hacer un seguimiento de ellas (este tema no forma parte del presente "codelab" pero lo mencionamos para su consideración)

Debe tambien tomarse en cuenta una Validacion de Datos pensando en el funcionamiento del sistema (no solo en las condiciones estáticas de las mismas); es decir por ejemplo, si en nuestro ejercicio se quisiera eliminar un partido poltico (que trabaja en este caso como una Tabla de Datos), primero se debe verificar si no esta siendo utilizada en la tabla de Presidentes (que para los efectos expuestos trabaja en este caso como si se tratase de una Tabla de Transacciones); de no hacerlo así y se procediera a borrar un partido que esta siendo utilizado.. sencillamente los presidentes que pertenecen a dicho partido "desaparecerían" de nuestra Vista (por la condicion Where del Query), y eso seria erróneo. pues la data seguiría grabada en nuestra base de datos pero no se mostraría (la codificación del presente codelab tampoco contempla lo indicado, pero también reiteramos que debe tenerse en cuenta.

y finalmente, debe tomarse en cuenta temas de seguridad de la WEB y evitar la acción de virus y hackers... PHP nos presenta varias opciones y temas de seguridad que debemos empezar a revisar y considerar para nuestros proyectos, y para lo cual detallaremos algunas referencias tecnicas que esperamos que con su aporte se puedan mejorar aún mas, por cuanto, en lo que respecta a estos temas en particular, los diversos software de desarrollo permanentemente presentan mejoras en sus formas y opciones... y en lo que respecta a este "codelab", hemos considerado un Modelo Básico pero bastante practico, el cual esperamos mejorar aun mas para cuando presentemos nuestro modelo de Integracion a Google utilizando el manejo de las API de visualizaciones.

Con que contamos en estos momentos?

Si siguieron el desarrollo de nuestros codelabs desde el inicio, y por supuesto el anterior respecto al Back-End PHP-MySQL, ya deben tener instalado en sus ordenadores un servidor de pruebas Apache con PHP+MySQL, y PHPMyAdmin (para administrar nuestras bases de datos), por lo que solo basta que verifiquen que tengan completo acceso a MySQL a través de PHPMyAdmin, accediendo a la misma y poder observar las tablas de la base de datos Tutorial creada en el ejercicio anterioir... y bueno, ahora nuevamente ya estamos listos para empezar nuestro codelab.

Audiencia

Se recomienda que, para entender este codelab, tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML, Javascript ...y algo de PHP (que si no dominamos o desconocemos, pues no debería preocuparnos tanto puesto que en este modelo solo se utilizan instrucciones fáciles de comprender y su sintaxis es bastante sencilla, además que si nuestro interes va por el empleo de este Back-End, debe ser un buen motivo para empezar a explorar este lenguaje).

Asimismo se recomienda haber leído y probado: Integracion a Google (1ra parte) e Integración a Google (2da parte), especialmente para comprender las herramientas utilizadas para integrar de las API de Google a ExtJs (y viceversa), que en este caso no se emplean pero se hacen referencia.

Material de Apoyo

Descomprimir el material de apoyo en una carpeta de www de nuestro servidor local AppServ u otro compatible Apache-PHP-MySQL, y se creara la carpeta "Wizard-sample" que contiene los archivos correspondientes al presente codelab (si no entiende este paso favor consulte "empezando desde cero').

Pasos para ejecutar el Codelab...

Para ejecutar el tutorial debemos primero debe realizar lo siguiente:

Crear en nuestra base de datos TUTORIAL la tabla usuarios. Esta base de datos fue creada en el ejercicio anterior (importada de pdts_usa.sql), y en esta oportunidad no les proporcionamos un archivo para su creación con el objeto que sean creadas directamente utilizando nuestro PHPMyAdmin o DBManager. Los requisitos de nuestra tabla de usuarios es que tenga definido como mínimo los siguientes campos: ID : Int(10), primary_key, auto_increment y unique; el campo usuario: varchar(15), y el campo password: varchar(15); adicionalmente podemos crear otros campos de diferentes tipo como Apellidos completos -o separado Paterno, Materno- Nombre completo, e-mail, telefono fijo, móvil, id_skype, direccion, o cualquier forma de contactar con nuestros usuarios, etc.. siempre dependiendo de los requerimientos de diseño de nuestro modulo o sistema ( los tres primeros campos deben tener exactamente ese nombre -respetando minusculas y mayusculas para mejor identificacion- caso contrario, debemos cambiar la respectiva codificación en nuestro archivo index.php que controla el acceso a nuestro ejercicio).
Creada nuestra tabla usuarios, pues ahora debemos registrar 2 o mas usuarios para hacer nuestras pruebas; puede ser uno llamado prueba con nombre prueba y password prueba (para hacer mas facil nuestro ingreso de datos), o como sea de nuestro agrado.
Con nuestro explorador debemos ingresar a la carpeta "Wizard-sample" creada en la carpeta www del Appserv, y alli "editar" el archivo "index.php". Este archivo en sus primeras lineas tiene en su inicio las intrucciones de conexion a nuestra base de datos:

// Database connection information
$host = "localhost"; // Host name
$user = "root"; // User default for MySQL access
$pwd = "..yourPassword.."; // put your PHPMyAdmin Password
$db = "tutorial"; // Our Database of exercise

$user

$pwd

$db

"tutorial"

$host

localhost

www.mydominio.com

..y ahora nuevamente ya estamos listo para ejecutar nuestro ejercicio...!

Ahora, si con nuestro navegador ingresamos a "localhost", y luego al ingresar a la carpeta a carpeta "Wizard-sample" siguiendo la ruta donde hayamos descargado el material de apoyo (pero que debe dentro de la carpeta www de AppServ); pues al ingresar esta carpeta que contiene a nuestro archivo index.html, deberá aparecer una pantalla como la que se muestra a continuación:

Esto nos indica que nuestra descarga y copia ha sido correcta, y ya estamos listos para revisar el material de apoyo descargado y descubrir como hemos desarrollado nuestro Wizards de conexion a nuestra aplicacion descrita en el post anterior, correspondiente a un Modelo Basico de mantenimiento de Tablas con opciones de Alta, Baja, Modificacion, Consulta, Impresion, Busquedas, etc, bajo un formato clasico.

Nota.- si no aparece la primera pagina mostrada es probable que no hayamos descargado nuestra version completa o "liviana"de ExtJs en la carpeta "www", como mostramos en "el potencial de ExtJs"; o tal vez, estemos usando una versión de ExtJs diferente de la indicada en nuestro archivo HTML (..ahora estamos usando la versión ext-3.3.1 vigente al 01/03/2011). Observe la ruta rerlativa a www que utilizamos para acceder dichos archivos "../../extjs/extjs-3.1.1" en este caso (que indica 2 carpetas sobre nuestra descarga del tutorial). Efectúe los cambios de la ruta necesarios en el archivo index.html del tutorial y pruebe nuevamente hasta que aparezca nuestra pantalla de acceso.

La segunda imagen nos muestra nuestro modelo de mantenimiento de una tabla desarrollado en el post anterior, si hacemos click sobre dicha imagen nos remitirá a la pagina indicada en la web oficial de ExtJs para la demostracion, pero en nuestro aplicativo, en el toolbar le hemos agregado un boton adicional para salir del Modulo (y que nos redirigirá a nuestra pantalla inicial de acceso); asimismo vale indicar que nuestras pruebas las debemos realizar sobre nuestro servidor local ( htpp://localhost ), pues en este caso se trata de una version mejorada como indicamos.

Asimismo, si al ingresar nuestros datos definidos en la tabla usuarios no aparece nuestra pantalla de mantenimiento del ejercicio anterior, y nuestro browser nos muestra mensajes de problemas de conexion a la base de datos o conexion a MySQL, pues debemos revisar con mas detalle si nuestra tabla usuarios ha sido correctamente creada y definida, y si los datos de acceso registrados en ella son a su vez tambien correctamente ingresados...

Detalle del Modulo.

Al revisar los archivos desempaquetados de nuestro Material de Apoyo encontraremos los siguientes archivos:

Readme.txt, donde encontraremos informacion respecto a este tutorial y los foros que nos sirvieron de apoyo y referencia para desarrollar este ejercicio.
pdts_usa.sql, archivo tipo texto en formato de lenguaje SQL con que se crearon las tablas presidents y parties de nuestra base de datos tutorial (la ponemos de referencia, pues como indicamos antes, nuetra tabla de usuarios requerida para este ejercicio deberá ser creada directamente con PHPMyAdmin o DBManager de nuestro servidor MySQL).
database.php, archivo de tipo texto en formato de lenguaje PHP con el cual actua del lado del servidor para interactuar con nuestra base de datos, en ella hemos comentado las partes que corresponden a la carga de datos de acceso a nuestra base de datos, así como las funciones correspondiente a cada caso como es la actualizacion, creación, borrado, busqueda e impresion de nuestra data; las formas de este codigo puede ser facilmente comprendido y ajustado anuestros desarrollos propios.
Se presenta asimismo las funciones getlist() y getparties() que son las ejecutan nuestras consultas de las tablas MySQL, habiendose comentado las adiciones efectuadas por el caso de efectuar "Conteo de Paginas" y "Busquedas rapidas".
Se presenta asimismo a las funciones JEncode y codeDate, la primera para llamar a las funciones standard de codificacion del formato Json, y la segunda para el tratamiento de los campos tipo fecha al formato mm/dd/yyyy empleado en el GridEditor de presidentes de nuestro ejercicio..
JSON.php, archivo de tipo texto en formato PHP que es una libreria clasica de PHP para el manejo del formato JSON con el que se trabaja las base de datos y tablas de MySQL (y que siempre debemos utilizar en nuestros proyectos que trabajemos con MySQL)
Index.php, archivo de tipo texto en formato PHP, HTML y Javascript debidamente etiquetados por cada grupo de codificación. Este archivo es de ejecución automatica y en ella se define nuestra pantalla de acceso al Modulo, y la correspondiente consulta a nuestra tabla de usuarios respecto a que si los datos ingresados (nombre y password), son correctos y corresponden a los registrados en nuestra tabla usuarios, lo que permitira el acceso a nuestro GridEditor de presidentes.

Las instrucciones de contacto vía mail y redireccionamiento a nuestra Fan Page Facebook son detallados en nuestro post referido a técnicas de Localización e Internacionalizacion. (y próximamente a este codelab le agregaremos también la técnica de traduccion automatiza del API Language de Google, conforme al lenguaje de nuestro navegador, para completar el manejo del referido tema).
Grid-PHP-MySQL.php, en formato PHP y HTML en donde la parte PHP del mismo realiza el control de acceso a nuestra aplicación (para evitar los "accesos" directos sin haber utilizado el Wizard), y asimismo, la parte HTML indica las directivas de inicio de nuestro ejercicio para la importacion de las librerias de ExtJS y las de nuestro ejercicio.
presidentslist.html, archivo en formato HTML que nos muestra una Tabla, la cual se genera al ejecutar la opcion impresion de nuestro ejercicio: luego en las instrucciones de nuestro archivo database.php podrá observar la técnica de como se manda a imprimir dicho documento.
mainscript.js, archivo en formato ExtJs debidamente empaquetado utilizando namespace, que nos muestra las funciones e instrucciones ExtJs que permiten el funcionamiento de las opciones de Actualizacion, Creacion, Modificacion, Consulta, Impresion y Busqueda, entre otras opciones, de nuestra aplicacion de mantenimiento (no varia del codelab anterior).
searchfield.js, archivo en formato ExtJs que exclusivamente contiene las funciones que nos muestran el recuadro de Busqueda Rapida de nuestro codelab anterioir (no varía).
style.css, archivo en formato CSS que permite la llamada a las imagenes que utilizaremos en los botones de acceso a las opciones de nuestro ejercicio mostradas en la barra superior de nuestra ventana (toolbar) de nuestra aplicacion de mantenimiento (no varía del codelab anterior).
carpetas icons e images, la primera contiene el icons mostrado en la pestaña de nuestro navegador; y el segundo, las imagenes jpg personales utilizadas en el ejercicio y los dos estilos de celdas que hemos presentado en este caso para mejorar la presentación de las celdas del Grid. No varía del codelab anterior.

APUNTES TECNICOS

Si ya han probado con exito nuestro pantalla de acceso a nuestro modelo básico de mantenimiento de Tablas, al revisar los archivos del ejercicio debe tenerse presente lo siguiente :

Si revisan el codigo de Index.php observarán que como herramienta de "control" de nuestros accesos utilizamos las "cookies", en la cual grabamos la informacion necesaria para verificar que nuestro usuario ha utilizado el Wizard de acceso de nuestro ejercicio; reiteramos que este se trata de un modelo basico y que en este caso solo pregunta si nuestra cookie del nombre esta vacia, y por supuesto que nuestra logica de verificacion puede y debe ser mejorado (como adicionando la verificacion de nuestro usuario y password de acceso, o verificando y poniendo un limite al tiempo trascurrido desde nuestra ultima operacion para evitar que las cookies grabadas en nuestros ordenadores y no borradas al salir cerrando nuestro navegador pues sean mal utilizadas, entre otros posibles casos).
Si hemos salido correctamente de nuestro modelo de mantenimiento, y digitasemos en la barra de direcciones nuestro navegador la direccion exacta de nuestro modelo http://localhost/tutorial/Wizard-samples/Grid-PHP-MySQL.php para nuestro caso, nos remitirá a nuestra pantalla de acceso (porque las cookies estan vacias), de ingresar al modulo es porque las cookies no han sido borradas al salir directamente al cerrar el browser.
Nuestro modelo nos muestra que podemos utilzar todas las cookies que querramos y asimismo, que nuestros passwords, como cualquier otro dato, pueden ser encriptados y desencriptados con el objeto que terceros no "vean" y utilicen indebidamente nuestros datos utilizando para ello las instrucciones:
$pwd = base64_encode($pwd); // en index.php
$my_pwd = base64_decode($pwd); // en database.php
Resulta interesante asimismo, observar con la opcion "Inspeccionar Elemento" del navegador Google Chrome (opcion del boton derecho del mouse sobre nuestra pantalla del browser), y con el Firebug de Mozila Firefox (que debe ser instalado como un plug-in de dicho navegador, y es el utilizado en los videos tutoriales del Quizzpot), pues que los recursos de nuestras paginas web (la pantalla de acceso y la de nuestra pantalla de mantenimiento para este codelab) no nuestran los codigos PHP en la parte "cliente" de nuestros navegadores (revise opcion recursos de nuestra pagina web al Inspeccionar elemento con Google Chrome o Firebug de Firefox, cuando esten cargadas), y con esto nos estamos asegurando que los datos de informacion de acceso a nuestro servidor HTTP no se muestran a los usuarios (refiriendonos a los que hemos escritos al inicio de index.php), pero sería mas interesante que efectuesemos nuevas pruebas con capturadores de paginas web (con herramientas como HTTrack, WebRipper o el mismo Dreamweaver, entre otros), para que observemos que archivos y que informacion pueden bajar y utilizar terceros no autorizados por nosotros.
Con la misma herramienta podemos revisar las cookies de nuestro modelo y verificar que nuestras contraseñas se encuentran encriptadas y no disponibles para terceros, quedando pendiente revisar diversas tecnicas de encriptacion disponibles para dicha función, así como otras opciones del propio PHP.(como el uso de sesiones, que son como las cookies pero por el lado del servidor y totalmente invisibles a los usuarios o clientes).
Cabe resaltar asimismo que este modelo de codificacion no es muy recomendada por no mantener el criterio de separar nuestras validaciones (archivos PHP) de nuestros form (HTML y Javascript), o seguir un modelo de desarrollo MVC (Models, Views, Controlers), que en desarrollos grandes nos facilitarían bastante el desarrollo por componentes trabajando en equipo, mejorando así la comprensión y mantenimiento de los mismos; pero este modelo que presentamos es muy practico y nos permite comprender espero facilmente toda la logica planteada con muy pocos archivos, y por eso nuestra elección para utilizarlo en este codelab.
Ponemos a su consideración las siguientes direcciones:

1. Pagina del foro de www.cristalab.com que sirvió de base para este modelo, entrada antigua pero que aun mantiene vigencia y que en sus comentarios muestra enlaces a temas de seguridad muy importantes (agradecimiento a azelito, usuario de dicho foro).
2. Pagina de Blogdephp.com que nos muestra un login a MySQL empleando empleando el modelo MVC, y que utiliza el framework codeigniter para PHP (que es bastante utilizado comercialmente), y cuya presentacion en el foro de Cristalab.fue motivo de comentarios apasionados pero interesantes que finalmente nos pueden ayudar a mejorar nuestros codigos.
3. ..y no olvidemos revisar las opciones de manejo de las cookies y de las sesiones en PHP, que sin dudar son interesantes para mejorar la seguridad de nuestras desarrollos y proyectos.

Espero que estos dos últimos codelab de introduccion al manejo del entorno del Back-End PHP-MySQL sea suficiente para completar y entender su forma básica de funcionamiento, y nos animemos a hacer nuestras propias investigaciones y pruebas sobre este entorno de uso tan difundido.. especialmente ahora que los servicios de Hosting PHP+MySQL externos se muestran tan accesibles a nivel de costos (..desde US$20.00 anuales), e ilimitados respecto a los tamaños, velocidad y nivel de transferencia de datos que nos proporcionan, vale decir, que nos permitirían llevar todos nuestros requerimientos de base de datos y aplicativos a la web (cloud computing)

Saludos
@Mlaynes

Opina en nuestro foro §FB..!

Using the Back-End PHP+MySQL ( Getting Started )

2011-03-08T21:55:00.000-08:00

Recuerde que..

y bueno amigos, ya estamos en el momento en que debemos empezar a experimentar con el Back-End PHP-MySQL (que viene integrado y listo para utilizar con AppServ u otras herramientas similares que tenga integrado un servidor Apache con PHP y la Base de Datos MySQL).

Recordemos que al instalar AppServ, e ingresar con nuestro navegador a http://localhost, nuestro navegador nos muestra una pantalla de Bienvenida que entre otros enlaces, nos permite ingresar a PHPMyAdmin, y al enlace de Configuracion de nuestro servicio PHP instalado en nuestro servidor de pruebas (todo ya viene integrado al servidor Apache), ..y ahora es el momento de empezar a comprenderlos y utilizarlos.. para lo cual debemos tener en cuenta lo indicado a continuacion:

Para ingresar a PHPMyAdmin usualmente el usuario de ingreso es "root", y la clave de acceso corresponde a la clave que utilizamos al instalar AppServ (si no pusimos clave alguna, nuestra clave de acceso sera una cadena vacia). Alli debemos a experimentar para crear nuestras propias bases de datos y tablas, y a practicar nuestro lenguaje SQL.
Si no recuerda su clave de phpMyAdmin (que realmente es de MySQL), puede utilizar las opciones Reset MySQL Root Password y MySQL Command Line Client, ambas en la opcion Appserv de Menu Inicio (Windows); la primera es para registrar un nuevo password para MySQL, y la segunda para verificar rápidamente si la clave es correcta (realmente me resulta mas conveniente trabajar MySQL con phpMyAdmin o DBManager, y no directamente desde la linea de comandos, esto especialmente si trabajamos con otros servidores de aplicaciones como Tomcat o GlassFish)
La configuracion por defecto de PHP de los servidores locales AppServ y otros, es que los archivos "index" con extension "php" y "html" sean de ejecucion automatica; pero esto a veces no es así, y cuando trabajamos con servidores o hosting externos (como con www.x10hosting.com por ejemplo), donde a veces solo los archivos index.php son de ejecucion automatica, pero esto no debe incomodarnos, por cuanto esa opcion es configurable (a traves del enlace de configuracion de PHP, que es bastante complejo pero con ayuda de algunos tutoriales puestos en la web -y que algunos indicamos en nuestro post empezando desde cero- pues, ya podemos ir cambiando algunas cosas, pero si no podemos asi, pues tampoco nos preocupemos, puesto que PHP esta integrado a los lenguajes scripting instalados en nuestro servidor, y a HTML por supuesto; entonces, basta que renombremos nuestro archivo index.html por index.php ..y listo.. esto ocurre por cuanto el compilador PHP reconocerá las etiquetas html y aun siendo un archivo "php", sencillamente ejecutara html ...interesante no?
...y ahora empezaremos a manejar hasta 03 lenguajes en forma simultanea y interrelacionada: HTML, PHP y Javascript (ExtJs es una libreria Javascript). PHP nos permitira trabajar del lado del servidor (principalmente a conectarnos y trabajar con nuestras bases de datos, aunque todo lo podriamos hacer con PHP si quisieramos); y luego con HTML y Javascript -y con la importante ayuda de ExtJs- nos manejaremos nuestras pantallas y presentaciones de nuestro navegador, en la que interactuaran nuestros usuarios..
Este manejo de lenguajes que ahora se ha convertido en lo basico en lo que corresponde al mundo de desarrollo Web, esta siendo revolucionado con el ingreso de Javascript al lado del servidor (con node.js y el motor de desarrollo V8, cuyo perfomance y versatibilidad son realmente sorprendentes.. asi que anímense y continuen con la investigacion y desarrollo de estos lenguajes que serán muy importantes en el futuro.

Con que contamos en estos momentos?

Si siguieron el desarrollo de los codelabs desde el inicio, ya deben tener instalado su servidor de pruebas Apache+PHP+MySQL, y PHPMyAdmin (para administrar nuestras bases de datos), por lo que solo basta que verifiquen que tengan completo acceso a MySQL a través de PHPMyAdmin -pruebe con crear alguna base de datos de prueba y algunas tablas para que verifiquen su funcionamiento, asi como hacer algunas consultas SQL de prueba.. si ese es el caso, ya estamos listos para empezar nuestro codelab.

Audiencia

Se recomienda que, para entender este codelab, tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML, Javascript; o en su defecto, haber seguido el curso de ExtJs que nos ofrece Crysfel Villa de México en su pagina del Quizzpot.

Asimismo se recomienda haber leído y probado: Integracion a Google (1ra parte) e Integración a Google (2da parte), especialmente para comprender las herramientas utilizadas para integrar de las API de Google a ExtJs (y viceversa), que en este caso no se emplean pero si se hacen referencia en este tutorial.

Material de Apoyo

Descomprimir este material de apoyo en la carpeta www de nuestro servidor local AppServ u otro compatible Apache-PHP-MySQL, y se creara la carpeta "Grid-PHP-MySQL" (si no entiende este paso favor consulte "empezando desde cero').

Pasos para ejecutar el Codelab...

Para ejecutar el tutorial debemos primero realizar lo siguiente:

Crear nuestra base de Datos: utilizando PHPMyAdmin debemos crear la base de datos "tutorial" (asi es el nombre que le hemos dado en nuestro ejercicio, si utiliza otro nombre debera recordarlo y registrarlo en nuestro archivo php que nos comunica a nuestra base de datos.
Para crear la base de datos se debe ingresar a MySQL con PHPMyAdmin, y en su primera pantalla seleccionar la opcion correspondiente, digitar el nombre de nuestra base de datos, y elegir el boton "Crear"..y listo, ..nuestra base de datos será creada y su nombre aparecerá en la lista situada al lado izquierdo. ...luego debemos ingresar a nuestra base de datos creada y seleccionar la lengueta "Importar", alli hay una opcion para seleccionar nuestro archivo bajo formato sql, la cual debemos buscar en la carpeta "Grid-PHP-MySQL" desempaquetada de www, el nombre de nuestro archivo es "pdts_usa.sql" y corresponde a una tabla con la relacion de presidentes de los Estados Unidos de Norteamerica (tabla presidents), y de partidos politicos (tabla parties), con la realizaremos opciones alta, baja, modificacion, consulta e impresion...
Con nuestro explorador debemos ingresar a la carpeta "Grid-PHP-MySQL" creada en la carpeta www del Appserv, y alli "editar" el archivo "database.php". Este archivo en sus primeras lineas tiene en su inicio las intrucciones de conexion a nuestra base de datos:

// This will connect us to our database...
mysql_connect("localhost", "root", "myPassword") or
die("Could not connect: " . mysql_error());
mysql_select_db("tutorial");

En ella debemos modificar los parametros root (si nuestro usuario de ingreso no es root sino otro personalizado, y poner nuestro Password de conexion a MySQL (el que utilizamos en PHPMyAdmin), asimismo poner en la clausula mysql_select_db el nombre nuestra base de datos, si no corresponde a "tutorial" como se indica. Si nuestra prueba la realizamos directamente en un servidor externo como www.x10hosting.com con dominio propio, entonces en lugar de localhost debemos colocar nuestra direccion web correspondiente: www.mydominio.com

..y ya estamos listo para ejecuatr nuestro ejercicio...!

Ahora, si con nuestro navegador ingresamos a "localhost", y luego al ingresar a la carpeta a carpeta "Grid-PHP-MySQL" ( o donde quiera hayamos descargado el material de apoyo, pero que debe dentro de la carpeta www de AppServ); pues al ingresar esta carpeta que contiene a nuestro archivo index.html, deberá aparecer una pantalla como la que se muestra a continuación:

Esto nos indica que nuestra descarga y copia ha sido correcta, y ya estamos listos para revisar el material de apoyo descargado y descubrir como hemos efectuado nuestro conexion a MySQL utilizando PHP, HTML y Javascript para trabajar con ella funciones basicas de mantenimiento de Tablas como Ingreso, Modificacion, Eliminación, Consulta, Impresion, Busquedas, etc, bajo un formato clasico.

Nota.- si no aparece la pagina mostrada es probable que no hayamos descargado nuestra version completa o "liviana"de ExtJs en la carpeta "www", como mostramos en "el potencial de ExtJs"; o tal vez, estemos usando una versión de ExtJs diferente de la indicada en nuestro archivo HTML (..ahora estamos usando la versión ext-3.3.1 vigente al 01/03/2011). Observe la ruta rerlativa a www que utilizamos para acceder dichos archivos "../../extjs/extjs-3.1.1" en este caso (que indica 2 carpetas sobre nuestra descarga del tutorial). Efectúe los cambios de la ruta necesarios en el archivo index.html del tutorial y pruebe nuevamente hasta que aparezca la ventana con nuestro Grid como indica la figura (haga click y lo dirigirá a la pantalla de prueba del tutorial de ExtJs), aunque le reiteramos que debemos hacer nuestras pruebas sobre nuestro servidor local ( htpp://localhost ), pues en este caso se trata de una version mejorada...

Detalle del Modulo.

1. Al revisar los archivos desempaquetados de nuestro Material de Apoyo encontraremos los siguientes archivos:

Readme.txt, donde encontraremos informacion respecto a este tutorial en la pagina web oficial de ExtJs, por cuanto este ejercicio ha sido bajado y adaptado de allí; teniendo como principal mejora que ahora estamos trabajando con "stores" tanto para la base de datos de presidentes, como con la de partidos (vale decir que si corregimos en la Base de Datos el nombre de un partido esto debe verse reflejado en los "combobox" utilizados, no ocurria asi en el tutorial original donde el store de partidos es un dataarray "local" y estatico; asimismo se ha corregido algunos errores para que el ejercicio trabaje bien en todas sus opciones (en especial en el grabado del nombre del partido de cada presidente, donde el combobox del Grideditor no trabajaba bien por un error simple: en el tutorial original: se indicaba como PartyValue del combobox a PartryID en vez de PartyName, pero si revisa la logica de la funcion updatePresident() de database.php, observará que para encontrar un registro se utiliza el nombre del partidoy no su codigo o ID..).. pero en general este tutorial ExtJs esta muy bien explicado, por lo que para consultas detalladas de todo el desarrollo del mismo paso a paso, pues puede tambien seguir y revisar el enlace indicado.
pdts_usa.sql, archivo tipo texto en formato de lenguaje SQL con el, una vez creada nuestra base de datos tutorial, se crearan las tablas presidents y parties, y la data correspondiente para iniciar el ejercicio.
database.php, archivo de tipo texto en formato de lenguaje PHP con el cual actua del lado del servidor para interactuar con nuestra base de datos, en ella hemos comentado las partes que corresponden a cada caso: modo de Conexion inicial y funciones de actualizacion, creación, borrado, busqueda e impresion de nuestra data; las formas de este codigo pueden ser facilmente comprendido y ajustado anuestros desarrollos propios.
Se presenta asimismo las funciones getlist() y getparties() que son las ejecutan nuestras consultas de las tablas MySQL, habiendose comentado las adiciones efectuadas por el caso de efectuar "Conteo de Paginas" y "Busquedas rapidas".
Se presenta asimismo a las funciones JEncode y codeDate, la primera para llamar a las funciones standard de codificacion del formato Json, y la segunda para el tratamiento de los campos tipo fecha.
JSON.php, archivo de tipo texto en formato PHP que es una libreria clasica de PHP para el manejo del formato JSON con el que se trabaja las base de datos y tablas de MySQL (y que siempre debemos utilizar en nuestros proyectos que trabajemos con MySQL)
Index.html, archivo de tipo texto en formato HTML de ejecucion automatica donde se encuentran las directivas de inicio de nuestro ejercicio para la importacion de las librerias de ExtJS y las de nuestro ejercicio.
presidentslist.html, archivo en formato HTML que nos muestra una Tabla, la cual se genera al ejecutar la opcion impresion de nuestro ejercicio: luego en las instrucciones PHP correspondientes podrá observar como se manda a imprimir dicho documento.
mainscript.js, archivo en formato ExtJs debidamente empaquetado utilizando namespace, que nos muestra las funciones e instrucciones ExtJs que permiten el funcionamiento de las opciones de Actualizacion, Creacion, Modificacion, Consulta, Impresion y Busqueda, entre otras opciones, de nuestro tutorial.
searchfield.js, archivo en formato ExtJs que exclusivamente contiene las funciones que nos muestran el recuadro de Busqueda Rapida del ejercicio.
style.css, archivo en formato CSS que permite la llamada a las imagenes que utilizaremos en los botones de acceso a las opciones de nuestro ejercicio mostradas en la barra superior de nuestra ventana (toolbar).
carpetas icons e images, la primera contiene el icons mostrado en la pestaña de nuestro navegador; y el segundo, las imagenes jpg personales utilizadas en el ejercicio y los dos estilos de celdas que hemos presentado en este caso para mejorar la presentación de las celdas del Grid...

APUNTES TECNICOS

Si ya han probado todas las opciones de nuestro modelo de mantenimiento de Tablas, al revisar el Codigo debe tenerse presente los siguientes puntos:

Si revisan el codigo de mainscript.js notarán que, la codificación del form de busqueda, en el combobox de partidos, mantiene una estructura estatica y de carga "local" a partir de un simplestore que carga un array con los ID y nombre de los partidos. Vale como ejercicio que recodifiquen dicho combobox con el store de partidos ya creado (al modo de como se ha efectuado en el combobox del grideditor de presidentes), para que el ejemplo sea mas real, es decir, que si efectua una modificacion de algun dato de la Tabla de Partidos (como cambiar el nombre), entonces "dinamicamente" los cambios se vean reflejados al cargar los combobox.
En el grideditor de presidentes podrán observar que algunas columnas pueden estar definidas pero no mostrarse mediante las clausulas hidden:false o hidden:true, como es el caso del IDparty. Y Este es un apunte que debemos tener muy en cuenta especialmente al trabajar tablas cuya ID a veces no queremos mostrar en nuestra pantalla, como si quisieramos que no se muestre el ID de los presidentes en nuestro ejemplo; en estos casos, casi como norma, resulta imprescindible definir como primera columna de nuestros Grids el ID de nuestras tablas, por cuanto si observan con detalle la codificacion de Actualizacion de Datos en database.php, la logica de ubicación de nuestros registros se basa en un "Where" que utiliza al ID para especificar el registro...
Cabe resaltar asimismo, que los ID de nuestras tablas en nuestra base de datos (MySQL en este caso), son por defecto definidas con tipo de datos INT, modalidad "auto_increment" y del tipo "primaryKey"; es decir, que corresponden a los campos con los usualmente efectuaremos "relaciones" con otras tablas (como es nuestro caso de la Tabla Partidos con la de Presidentes).

Espero que este Codelab de introduccion al entorno del Back-End Apache, PHP, MySQL sea suficiente para entender el esquema de su funcionamiento, y nos animemos a efectuar nuestras propias pruebas, y en el como siempre, les entregamos modelos de codificación, librerias y herramientas muy utiles para el desarrollo de casos reales; en lo que corresponde a nosotros, nos comprometemos a la brevedad a desarrollar otro ejercicio que contenga un Wizard para el control de acceso a nuestras aplicaciones, y siguiendo la línea de los ejercicios anteriores nos Integremo a Google, empleando por el momento visualizaciones (pero que bien podriamos utilizar otras API como Google Language que utilizamos en todas las paginas de este Blog); pero al respecto cabe indicar que el proceso indicado de utilizar visualizaciones Google esta practicamente solucionado, por cuantro al ya tener nuestra "data" cargadas en "stores" entonces, ya es posible utilizar nuestras extensiones ya desarrolladas en nuestros post Integracion a Google 1ra y 2da parte".>

Saludos
@Mlaynes

Opina en nuestro foro §FB..!

Google Gadgets

2010-05-31T23:06:00.000-07:00

Recuerde que..

En términos generales, Los gadgets de Google son objetos o aplicaciones en miniatura desarrollados para ofrecer contenidos dinámicos que pueden ser ubicados en cualquier lugar de cualquier página web. Los Gadgets pueden ser muy útiles para su uso en el trabajo (como lista de tareas, conversor de monedas, calendario), en la escuela (calculadora, Wikipedia, herramientas de traducción), o simplemente pasar el tiempo (noticias, blogs, juegos).

El término gadget (o widget), también se ha dado a una nueva categoría de mini aplicaciones, diseñadas para proveer de información o mejorar una aplicación o servicios de un ordenador o computadora, o bien cualquier tipo de interacción a través de Internet, por ejemplo una extensión de alguna aplicación de negocios, que nos provea información en tiempo real del estatus del negocio u organización.

Un ejemplo de gadgets en una computadora serían los gadgets del Dashboard de Apple sobre Mac OS X Leopard, o los de la barra lateral de Windows, que viene incluida en el nuevo sistema operativo de Microsoft: Windows 7 y Microsoft: Windows Vista; y por supuesto, los Gadgets de Google, que pueden ser instalados en iGoogle, Google Desktop o en cualquier pagina Web que desarrollemos.
(fuente: Wikipedia)

Los Gadgets de Google son en especifico aplicaciones desarrolladas en XML, HTML y JavaScript, en donde un archivo XML es el contenedor de la aplicación (y en el se describe datos estructurados que tanto los programadores y las computadoras podrán leer y ejecutar), y que soporta instrucciones HTML para dar formato al espacio de la pagina web utilizado por el gadget, y como ya conocemos en el estandard opensource, también permite que nuestro código HTML soporte Javascript, que es un lenguaje de comandos que utilizamos para añadir comportamientos dinámicos a nuestras paginas y desarrollos web.

En resumen entonces, desarrollar Gadgets es muy similar a desarrollar paginas web, y de hecho debe resultar mas sencillo, pues en este caso se trata de objetos o aplicaciones especificas que luego ubicaremos adecuadamente en nuestras paginas web... pero en el cual debemos poner especial cuidado en las sintaxis y opciones que nos proporciona el contenedor XML, el cual también podrá interactuar con nuestros códigos HTML y Javascript.

Como una practica de aprender a utilizar y desarrollar los gadgets de Google, recomedamos seguir paso por paso los avances del Tutorial de Seoish, el cual presenta las siguientes ventajas:

Nos alecciona para trabajar con iGoogle, y nos explica paso por paso como ir preparando la pagina inclusive para desarrollar y probar en ella misma nuestros Gadgets utilizando nuestra cuenta Google (y ya hemos reiterado que, con dicha cuenta podemos utilizar los múltiples servicios que Google nos brinda, como GMail, YouTube, Google Docs, App Engine, Albumnes de Picasa, Blogger, Google Maps, Google Earth, etc. entre los que podemos haber usado siguiendo los casos propuestos por nuestros códigos hasta la fecha).
Tambien nos explica al detalle como usar el Google Gadget Editor (GGE), e inclusive nos indica algunas peculiaridades del editor que debemos superar (lean con detalle los comentarios, asi como el manejo del caché de Google).
Asimismo, nos explica las partes del código Gadget (XML), y como se utilizan con un caso practico (Hello World e il Tiger).
Detalla como utilizar los tipos de contenidos actuales de XML para Gadgets: HTML y URL (ejemplo Big Brother 9 - Live Cams), y a ver a los Gadgets como mini-webs, así como a ver a todas las aplicaciones web como Gadgets.

Y continuando con nuestra secuencia de casos para utilizar Google Spreadsheets como fuente de datos, les alcanzo el código de un Gadgets para "consultar" utilizando visualizaciones Google, en un formato mas adecuado para los tamaño de algunos Gadgets (pero que debemos ajustar para casos específicos dependiendo como los presentemos en iGoogle o en nuestras webs)
):

IG_Productos.xml, que nos muestra una Visualización tipo Tabla de nuestro documento "Spreadsheet Productos": los productos y su fecha de venta.

IG_Clientes.xml, que nos muestra Visualizaciones tipo Tabla y PieChart de nuestro documento "Spreadsheet Productos": nuestros clientes, monto de venta, cantidad de productos vendidos y monto cobrado...

Web 2.0: Los negocios y las redes sociales.

2010-05-15T16:08:00.000-07:00

Recuerde que..

En este post vamos a comentar un poco sobre el concepto de Web2.0, y que representa el uso de las redes sociales para los negocios...

El termino Web 2.0 (vigente desde el año 2003) está comúnmente asociado con un fenómeno social, basado en la interacción que se logra a partir de diferentes aplicaciones web, que facilitan el compartir información, la interoperatividad, el diseño centrado en el usuario y la colaboración a través de Internet. Ejemplos de la Web 2.0 son las comunidades web, los servicios web, las aplicaciones Web, los servicios de red social, los servicios de alojamiento de videos, las wikis, blogs, mashups y folcsonomías. Un sitio Web 2.0 permite a sus usuarios interactuar con otros usuarios o cambiar contenido del sitio web, en contraste a sitios web no-interactivos donde los usuarios se limitan a la visualización pasiva de información que se les proporciona.
(fuente: wikipedia)

Bajo estos conceptos, una aplicación nativa del concepto de Web2.0 aplicada a los negocios serían las campañas de mercadeo y publicidad, pero se debe considerar que también se le puede utilizar con bastante acierto dentro del campo motivacional, de instrucción y capacitación, y de seguimiento de "casos", tanto en forma "pública" (toda la red), como a nivel "intranet" dentro de los empleados y colaboradores de una organización o empresa, entre otras aplicaciones.

Ya centrándonos en lo que respecta los negocios, el principal empleo del concepto Web2.0 se orienta principalmente, como ya hemos indicado, en el campo de la publicidad y mercadeo, pero resulta conveniente considerar los siguientes aspectos:

primero, debe tenerse en cuenta el uso combinado en forma armoniosa de elementos tipo Blog (como Blogger, WordExpress o Ning por ejemplo), con Facebook y Twitter, así como de otras redes sociales que puedan estar vigentes en nuestro medio local como Yahoo, Sonico, Netlog, etc.; pues juntos van a constituir nuestra forma de penetración social de nuestro mercado, el cual ha de transformarse en nuestro "mercado social". Cada uno de estos elementos que utilizemos tiene un objeto distinto: así podemos utilizar Blogger para contactar directamente y profundizar una idea de negocio con nuestros clientes, Facebook para difundir nuestras ideas de una manera sumamente atractiva y sugestiva, y Twitter para "perifonearlas" y causar el efecto "virulencia"; y prácticamente creo que con esas herramientas, todas gratuitas en lo que concierne a su uso estandard, pues existen servicios de pago como son los Avisos de Facebook o Google Adwords; y éstas son más que suficientes para iniciar verdaderas campañas de mercadeo tanto para pequeñas y medianos negocios, pues considérese que las grandes compañías ya las están empleando... y revisando algunas experiencias al respecto, podemos observar que el "elegante" y muy vigente formato de Facebook, la facilidad de difusión de mensajes a través de Twitter y los contactos personales que podamos desarrollar a través de nuestros Blogs, bien podría hacer prácticamente innecesario el desarrollo de paginas web propias (excepto que por temas de seguridad se llegue al e-commerce o manejo de información que requiera discreción como manejo de pagos, claves de acceso, información técnica de productos y servicios, etc).

segundo, debe tenerse presente que si consideramos utilizar un mercadeo social, pues este debe ser monitoreado de forma permanente manteniendo un adecuado nivel de comunicación y respuesta con nuestros usuarios, seguidores y clientes, pues si lo dejamos para "cuando tengamos tiempo", los usuarios y seguidores de nuestro servicio web van a notarlo y dejar de seguirlos. Interesante la idea del empleado de mostrador que muchas veces dispone de mucho tiempo no productivo para nuestros negocios.. a quienes podríamos recurrir previa capacitación de los objetivos de nuestro negocio, y de "modales sociales", pues debe mantenerse un estilo de comunicación y respuesta que pueda identificarnos; asimismo, debe tenerse presente los conceptos de Asistencia Virtual y tele-trabajo, mediante el cual podemos recurrir a servicios de terceros que podrían asesorarnos y ayudarnos a definir el perfil social de nuestro negocio, diseñar las formas de interconexión de las redes sociales que utilizaremos, y además, dedicarse a revisar y responder las múltiples entradas y comentarios de nuestros usuarios, clientes y seguidores, e informar directamente a los encargados de la dirección del negocio respecto a los resultados tangibles de nuestra red de mercadeo social.

tercero, reiterar que si nuestra empresa o negocio va a utilizar bondades de los servicios Web2.0 resulta necesario definir y establecer un formato conveniente para cada caso, pensando inclusive hasta en la posibilidad de empleo de múltiples idiomas, pagos "on line", y entregas directas a domicilio... dependiendo de nuestros productos y/o servicios ofertados, aunque estos signifique cambiar nuestros canales vigentes de comercialización

Otro plano es el control y manejo administrativo, Internet ya prácticamente nos ha demostrado que es bastante estable y que soporta sin mayor problema millones y millones de datos y de usuarios, y con niveles bastante aceptables de seguridad (dependiendo de los navegadores, herramientas y modo de desarrollo que utilicemos), pero su empleo a nivel administrativo contable, prácticamente es bastante escaso ,y su empleo es aún mayoritariamente a nivel de mercadeo, y por eso termino esta entrada indicando que necesariamente va a existir Web3.0, y es cuando no solo las aplicaciones sociales de las organizaciones, empresas y personas estén en la red.. sino cuando inclusive los aplicativos de organización, gestión y control administrativo también lo estén, aunque esto ya tiene un nombre: "Cloud Computing" (el enlace indicado está escrito en español pero tiene enlaces y conceptos interesantes, por lo que recomendamos su lectura usando su traductor para otros idiomas)

Pueden revisar tambien nuestros post:

* Hablemos de Facebook
* Hablemos de Twitter

En las proximas entradas vamos a comentar mas respecto a estos conceptos que estan muy asociados al mundo Google en general por cuanto, hacia ese concepto de desarrollo web de manejo total es hacia donde estamos apuntamdo...

Saludos
@Mlaynes

Let's talk about Twitter

2010-05-15T11:25:00.000-07:00

Recuerde que..

MUY BUENAS NOTICIAS... (nuestra experiencia con Twitter - 29/05/2010)

El equipo de Twitter, despues de meditar nuestros descargos remitidos durante casi 02 semanas, decidió levantar la suspensión de nuestra cuenta Twitter en Inglés que nos había impuesto, lo que habla muy bien de dicha red social, por cuanto, atendió nuestros argumentos, (el cual principalmente se centró en indicarles que nuestro proyecto trata de integrar a la comunidad GTUG mundial para formar una biblioteca de codigos, y que por tanto, resulta imprescindible tratar de comunicarnos con toda dicha comunidad, y por supuesto no somos spam..!); y bueno, Twitter trata de mantener un manejable rango de relación y control de los seguidores de su red que debemos destacar... y esto, unido a su pronunciamiento Twitter loves open source, (el cual compartimos en esta humilde comunidad), y el lanzamiento de @anywhere, y con el reconocimiento que Twitter es la principal red de microblogging vigente en el momento, pues en verdad nos alegra contar ahora con todas nuestras cuentas Twitter completamente operativas, en español, inglés y portugués... por lo que les detallamos a continuación nuestros tips respecto a nuestros avances al jugar con el API que Twitter nos proporciona...

REFERENCIA TECNICA (18/07/2010)

Como siempre, les indicamos las paginas oficiales de Twitter para que las revisemos continuamente y estemos atentos a los cambios y mejoras que nos brindan los servicios de esta red social (y que realmente nos conviene revisar para mantener al día y sin problemas nuestras aplicaciones).

Extras de Twitter, que nos proporciona diversos widgets y botones para emplear en nuestras paginas web, y en la que resaltamos el widget de perfil, que nos muestra en cualquier un listado de los tweets de la cuenta Twitter que indiquemos; pero debemos destacar que dependiendo de cada caso, bien podriamos utilizar los otros widgets tanto para nuestros sitios web como para Facebook, que Twitter nos proporciona... (solo basta ingresar los datos que nos indican y luego probar y observar el resultado, y al terminar y guardar el código, se nos proporciona el mismo para pegarlo en nuestros documentos HTML)

TWITTER ANYWHERE

A diferencias de los Extras, con Anywhere, Twitter busca que interactuemos directamente con nuestra cuenta Twitter en nuestras paginas web, sin ingresar directamente a Twitter, logrando así facilitar el uso de nuestras cuentas, incrementar el trafico de las mismas y su difusión.

Para ello, el APIde Twitter requiere como primer paso que registremos nuestra aplicación (debemos tener presente que si tenemos varias cuentas twitter siempre estemos conectados con la misma para que nuestros desarrollos se muestren agrupados, o que las asignemos a la cuenta Twitter de su respectiva aplicación, el caso es que para poder acceder a los datos de nuestra aplicación luego de creadas -especialmente a nuestro API Key, Consumer Key, Consumer Secret u otros datos que necesitemos-, basta con que ingresemos a la cuenta Twitter con la que accedimos al registrar nuestra aplicación e ingresar a nuestra cuenta de desarrollor utilizando la opción "Siqn", y luego ingresemos a los datos de nuestra aplicación usando la pestaña "Your Apps")

NOTA : Al registrar nuestra aplicación es importante que indiquemos en "Registered Callback URL" la dirección exacta de nuestra pagina web a partir de la cual se va a tener acceso a Anywhere, y asimismo, que indiquemos el "Default Acces Type" (read only o write & read, dependiendo si deseamos que solo se tenga acceso de lectura o se pueda escribir en la cuenta twitter que acceda a la aplicación... nosotros elegimos write&read)

Registrada nuestra aplicación, podemos utilizar en la pagina web que desarrollemos las diversas aplicaciones Anywhere que nos presenta la API, y entre las que destacamos las "Hovercards" (que a diferencia de las linkifyUsers, no solo nos direccionan a nuestras paginas Twitter, sino que nos permite mostrar el logo e información básica, y opción a seguirlas, y en un formato bastante apropiado, con solo pasar sobre el link el mouse), las "Twitter Box", que nos permiten escribir en el muro de la cuenta Twitter de nuestros usuarios, y "User login & SignUp", para controlar el acceso y salida de la cuenta Twitter de nuestro usuario.

Detallamos a continuación el codigo de nuestra aplicación Anywhere que hemos detallado en nuestra pagina "Ayudenos a difundir nuestra comunidad", la cual considera en forma conjunta la aplicación de las figuras de Anywhere que les hemos recomendado, y en la que debemos destacar los siguientes aspectos:

Utilizamos Anywhere sobre una misma pagina HTML, por lo que las instrucciones de conexion las colocamos en el mismo documento (a diferencia de utilizar el HEAD recomendado en la documentación de Twitter Anywhere), lo que es muy util cuando consideremos el desarrollo de widgets, gadgets o paginas independientes que utilizen Anywhere.
Utilizamos la conexion a la librería "jsapi" de Google para tener acceso al framework JQuery que ésta nos proporciona (necesario para hacer uso de los comandos JQuery que utilizamos)
y bueno, se requiere tener conocimientos basicos de JavaScript y JQuery, por lo que aprovecho la oportunidad para indicarles la direccion de un tutorial javascript para consultas rapidas; y en lo que respecta a JQuery, les indico una pagina de introducción bastante util.

Detalle de nuestro codigo :


<script charset='utf-8' src='http://platform.twitter.com/anywhere.js? id=nQjC8OfVtcUWjVjKW1ATlw&v=1' type='text/javascript'></script>
<script type="text/javascript">
twttr.anywhere(function (T) {
//T("##main-content").linkifyUsers();
T("#main-content").hovercards();
})
</script>

<div id="main-content">
..and now, with Twitter @Anywhere you can connect directly with us: @IGCodelab_en
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">(Put the mouse on the links)</span></span></div>

<script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">
</script>
<script type="text/javascript">
google.load("jquery", "1");
twttr.anywhere(function (T) {
var currentUser,
screenName,
profileImage,
profileImageTag;

T("#tbox").tweetBox({
height: 100,
width: 400,
label: 'Post on your Twitter Wall...',
defaultContent: "I like Integracion Google. Check out our fan page into http://tinyurl.com/35ac3on\nhelp us to disseminate our project..!"
});
T("#withus").tweetBox({
height: 100,
width: 400,
label: 'Tell us your thoughts ....',
defaultContent: "@IGCodelab_en ..."
});

function isConectado() {
$("#twitter-connect-placeholder").show();
$("#tbox").show();
$("#withus").show();
};
function noConectado() {
$("#twitter-connect-placeholder").hide();
$("#tbox").hide();
$("#withus").hide();
};
function myAvatar() {
document.getElementById('twitter-connect-placeholder').innerHTML="";
if (T.isConnected()) {
currentUser = T.currentUser;
screenName = currentUser.data('screen_name');
profileImage = currentUser.data('profile_image_url');
profileImageTag = "<img src='" + profileImage + "' style='cursor: hand; cursor: pointer; display: block; float: left; margin: 0px 10px 5px 0px; text-align: left;'/>";
$('#twitter-connect-placeholder').append('<p>' + profileImageTag + '<b>' + screenName + '</b> esta conectado..!</p>');
$("#twitter-connect-placeholder").append('<p><button id="signout" type="button">Sign out</button><p>');
$("#twitter-connect-placeholder").bind("click", function () {
twttr.anywhere.signOut();
});
};
};

if (T.isConnected()) {
myAvatar();
isConectado();
} else {
noConectado();
};

T("#connect").connectButton( {
authComplete: function(user) {
// alert("It's Connected");
myAvatar();
isConectado();
},
signOut: function() {
// alert("It's not Connected");
noConectado();
}
});
});
</script>
<span id="connect"></span>
<span id="twitter-connect-placeholder"></span>
<div id="tbox">
</div>
<div id="withus">
</div>

(Tenga cuidado con las instrucciones de inicio y fin de parrafo en html ( <p> y </p> ), pues el editor de Blogger usualmente corta la linea despues del primer <p> cuando editamos nuestras paginas, y eso debe corregirse antes de grabarlas, sino nuestras pruebas y desarrollos no funcionaran).

Con dicho código, y si accedemos a nuestra cuenta Twitter, se mostraría los Tweet Box en nuestra pagina como lo indicamos a continuación (si utiliza su propia pagina web, recuerde que debe ingresar el ID de su propia API KEY en el inicio del código):

Les indicamos asimismo, la pagina de la documentación general de la API (disponible en la pagina del desarrollador), en la cual, además de Twitter Anywhere, podremos revisar todas las opciones de desarrollo que nos presenta Twitter; así como la documentación de Twitter para Negocios, cuya lectura tambien nos debe interesar y debemos tener presente.

@Mlaynes

Hablemos sobre Twitter..

Let's talk about Facebook...

2010-05-07T20:31:00.000-07:00

Recuerde que..

Al estar haciendo las modificaciones a nuestro Blog, para adicionarles servicios sociales y propiciar la difusión de nuestra comunidad utilizando Facebook, twitter, Google Buzz, etc.; y leyendo diversos comentarios al respecto, realmente nos resultan muy impresionantes las cifras asociadas a Facebook: a inicios del 2010, mas de 400 millones de usuarios y mas de US$300 millones anuales de ingresos, y las cifras siguen en aumento... al mes de Julio 2010 reportan mas de 500 millones de usuarios...en Marzo del 2011 ya son 600 millones, y a Julio del 2011 se habla ya de 750 millones de usuarios y alrededor de US$ 2,000 millones de dolares de ingresos ..y por supuesto, nuestras felicitaciones a Facebook, es innegable que brilla con luz propia y lo convierte en un servicio con vigencia para bastante tiempo.. pero no todo lo referido a Facebook brilla... y también encontré por ahí este post, y se los presento para su consideración:

10 razones para no estar en Facebook

Los términos del servicio de Facebook solamente benefician a Facebook.
El CEO de Facebook (Mark Zuckerberg) tiene un historial documentado de comportamiento no ético.
Facebook ha declarado la guerra contra la privacidad.
Facebook constantemente está cambiando cual información se comparte y cual no sin tu consentimiento.
Facebook no tiene buenas intenciones (..uy!)
Toda tu información se comparte a través de las aplicaciones
Facebook tiene muchos problemas técnicos (..uuy!)
Es muy difícil eliminar tu cuenta de Facebook
Facebook no soporta una Web abierta de verdad
Facebook apesta (...que fuerte esto, no??)

y bueno, ...aunque no son necesarias las exageraciones, de todo esto algo hay de cierto, (pueden revisar informacion general, y sobre las políticas, criticas e impactos referidos a Facebook en wikipedia, la cual es un poco mas escueta pero también incisiva en su versión en español, siendo igual en las paginas para otros idiomas)

Facebook es una herramienta muy poderosa e importante, pero los últimos cambios efectuados durante el 2010 y 2011, solo confirman la continuación del estándar "Facebook" (y aun cuando ahora recurren a conceptos mas "opensource", como el uso de SDK y manejo de iframes), sus entornos de programación se basan principalmente en codigos propios FBML, FBJS, XFBML y una API -el SDK de Javascript- que a veces hace conflictos con nuestras propias funciones y aplicaciones (por lo que debemos probarlas bien al utilizarlas en nuestras websites); y el estandar de Facebook. realmente solo son aplicaciones símiles pero diferenciadas de HTML y Javascript; y por supuesto, ahora con la desactivacion de la aplicación Static FBML ahora se requiere que todas nuestras paginas web en donde las utilicemos el SDK de Javascript de Facebook deban ser previamente "registradas" en Facebook Developers... y bueno, estas maneras no son propios de desarrollos abiertos sino 'propietarios' (tipo Microsoft para ser mas exactos), y aunque las principales criticas a Facebook van referidas a sus políticas de Privacidad y manejo de su ahora apetecible y gigantesca base de datos de "gustos" de sus usuarios, a nivel técnico, Facebook se muestra bastante errático y cambiante respecto a sus estándares de desarrollo, los que como ahora, puede continuar cambiando cuando así lo estimen.. aunque en estos ultimos 02 años realmente han habido ya muchos cambios.. así que debemos empezar a ponernos al día....

En resumen, como se indica, parece que Facebook solo piensa en Facebook, pero como consecuencia de su innegable éxito, y por los parámetros propios del negocio publicitario, es muy difícil que se convierta en un servicio por el que los usuarios tengamos que pagar..(así lo anuncian.!); aparte que su entorno para instituciones y empresas (las llamadas "fan pages"), es ahora realmente bastante sólido y eficiente, y deben ser considerados muy seriamente para su empleo en toda campaña publicitaria y de difusión a nivel local y/o global (por supuesto, siempre tomando nuestras respectivas precauciones respecto a temas de seguridad empresarial, institucional o personal principalmente en lo que respecta al manejo de información sensible o confidencial).

Considérese entonces que los comentarios presentados no deben significar que mantengamos una posición anti-Facebook, y reiteramos que e trata de una opción social muy eficiente y un innegable medio de mercadeo y difusión en plena vigencia y expansión... así que no dudemos en utilizar ese potencial para comunicar nuestros propios conceptos personales, empresariales o institucionales.. y así pensamos que debe hacerse... y por ello ahora también tenemos nuestra propia pagina Facebook, bajo el formato "fan page", que como hemos indicado, Facebook ha mejorado notablemente (y que creo, es uno de las grandes "olvidos" del recién lanzado Google+), y que ahora nos permite una captación ilimitada de seguidores, y hace que la interacción entre las entidades y sus seguidores sea mas fácil para opinar, sugerir, hacer difusión y seguimiento de enlaces, publicación y etiquetado de fotos con comentarios personales o institucionales, etc.), y que por supuesto, también incluye modificaciones en su entorno de programación para desarrolladores, temas que tocaremos a continuación...

REFERENCIAS TECNICAS

Para averiguar como agregar botones, enlaces y otros servicios sociales Facebook a nuestras paginas Web, existen múltiples foros y blogs dedicados al tema, pero manteniendo nuestro estilo de contribuir al estudio y la investigación, le pasamos los links "oficiales" de Facebook al respecto, y que en este caso toman particular relevancia, por cuanto, como indicamos en el principio de este post, FaceBook ha modificado bastante los parametros para desarrolladores desde mediados del año 2010 (..este 2011 ha continuado y en el futuro se espera mas modificaciones). Así que nos conviene revisar periódicamente los siguientes enlaces:

Facebook Developers, imprescindible revisar el segmento "Add Facebook to my site".
Crear una Pagina, para crear paginas FaceBook ("fan page"), para negocios, instituciones, de la comunidad, etc.,
de FaceBook a Twitter, para vincular nuestras paginas Facebook a Twitter, haciendo que lo publicado por los administradores de nuestra pagina en el Muro se repliquen en Twitter...
Insignias de Facebooks, una colección completa de widgets de insignias, botones y otros servicios sociales de Facebook, que podemos pegar en nuestras paginas Web personales e institucionales, siendo esta una manera directa y fácil para empezar a utilizarlos.
Pagina de Desarrollador Facebook, la cual en el nuevo concepto de desarrollo de aplicaciones cobra bastante importancia por cuanto en ella podremos registrar nuestras paginas Web en donde querramos correr las insignias y servicios "enriquecidos" de Facebooks utilizando iframes y el SDK< de Javascript, entre otros entornos los que podemos empezar a revisar en el siguiente link, y probar su funcionamiento en su sección "Tools".
Javascript Test Console, que en su link "examples" podemos seleccionar diversos ejercicios y ejemplos sencillos de aplicaciones del SDK Javascript de Facebook que podemos poner en nuestras websites o aplicaciones iFrames de nuestras fan pages.
Ya no existe Directorio de Aplicaciones, para acceder a las aplicaciones existentes basta con utilizar la opción Buscar digitando su nombre, o acceder a ellas a través de las invitaciones de nuestras amistades directamente desde las entradas de nuestro Muro.

Todas estos links, y otros que conviene revisar, están disponibles desde nuestra propia cuenta personal Facebook, allí observe y revise las opciones del pie de página. opción Desarrolladores.

Prepárate para tu página "optimizada" Facebook.

A partir del 23 de agosto del 2010, y continuando los cambios durante el presente año, Facebook simplificará sus páginas "para que sea más fácil navegar por ellas", confirmándose los siguientes cambios:

El menú de usuarios en la parte superior de nuestras entradas es ahora de manejo exclusivo para aplicaciones de Facebook, ya no se puede poner aplicaciones propias o de terceros en las pestañas o "tabs" de la parte superior del Perfil de usuarios (ahora las "pestañas" de nuestras aplicaciones o terceros se ubican en la lista de aplicaciones de la pantalla de Inicio, en la barra izquierda, y en algunos casos, si tenemos varias aplicaciones instaladas, hay que expandir la vista para que aparezcan.. es decir..nuestras pestañas pueden estar ahora bastante escondidas ..y no muy accesibles para nuestros seguidores sino tenemos en cuenta la capacidad de espacio otorgado, es por ello que ahora el desarrollo de aplicaciones bajo Facebook utiliza mas el concepto de Aplicaciones por invitación sobre publicaciones en nuestro Muro como ocurre con los Juegos u otros...
El espacio otorgado para la presentación de nuestros desarrollos se reducen ahora a 520 píxeles. Lo que debemos tener en cuenta al realizar nuestros desarrollos y realizar los ajustes necesarios en caso de anexar iframes, imagenes o cajas (las que debemos dimensionar al espacio disponible) ...
Se ha efectuado mejoras para el formato personal y "fan pages". Ahora es bastante mas atractiva la interacción como el etiquetado de fotos pues estas se mostrarán en una barra en la parte superior de nuestra pagina personal o institucional; y para el caso de paginas personales, se ha mejorado bastante los datos de perfil profesional y de trabajo (los que también se muestran en la parte superior de nuestra pagina; y en el caso de las "fan pages", ahora podemos mostrarnos como indica nuestro nick, e incluso hacer comentarios como "representantes" de nuestra pagina (y con la imagen de perfil que registremos), como si se tratase de un usuario "normal", aunque esto aun no se habilita completamente para los foros, donde las publicaciones de los "administradores" son etiquetados como de la "pagina", y no se pueda hacer comentarios en foros de terceros como "representantes".
Pero uno de los cambios principales para los desarrolladores es que a partir de Marzo 2011 Facebook ha desactivado las pestañas y aplicaciones FBML estático (que es una de las formas principales en que se adicionaban "pestañas" a nuestras paginas), por lo que ahora para crear "tabs" y aplicaciones para nuestras fans page de Facebook, debemos recurrir a los iFrames y al SDK de Javascript... (a la fecha sigue habiendo soporte a las aplicaciones FBML existentes pero con una funcionalidad reducida... pueda que algunos desarrollos FBML no funcionen correctamente..).
Pueden revisar en nuestro foro mas información al respecto:
- http://tinyurl.com/3vyqwvp (en español)
- http://tinyurl.com/3nrafbs (in English)

Algo imortante que debemos tomar a consideración respecto a este último punto descrito es al trabajar con iframes "propias" o de "terceros" en nuestras paginas facebook significa que ahora para "programar" las presentaciones de dichas páginas debemos utilizar lo convencional en desarrollo Web, vale decir, basicamente HTML, CSS y Javascript; pero dependiendo de la fuente de nuestra iframes, de ser propia por ejemplo, podremos utilizar herramientas propias de nuestro entorno de desarrollo como el empleo de back-end tipo PHP+MySQL u otros JSP, Java y MySQL, etc, con lo que nuestras "paginas" podrian convertirse en aplicaciones full dinámicas... vale decir, al fin Facebook se apertura a todas las opciones de desarrollo Web, aunque debemos de tomar muy en cuenta las "politicas de desarrollo" que nos plantea:

Actually, there is one exception: Facebook policy is that you ARE NOT ALLOWED have autoplaying media in a tab. So no autoplaying videos, songs, etc. in the tab.

Asi podremos observar que algunas funciones "autoplay" son incluso bloqueadas, por lo que debemos probar con detalle todos los desarrollos que realicemos para paginas Facebook.

En resumen... Facebook ha mejorado bastante su presentación y perfil de "usuario" personal y de negocios con herramientas que son muy utiles para la gestión y mercadeo de nuestros proyectos personales, empresariales o institucionales .. todo es muy interesante.. pero el diseño general de la pagina es como siempre inamovible.. al estilo de Facebook..

Agregando Facebooks a nuestras paginas Web

Este es una forma de agregar plug-ins de Facebook a nuestras paginas, y las hemos utilizado para mantener una mejor interaccion con nuestros usuarios, y para que tambien nos puedan ayudar a difundir nuestra comunidad.

Como lo hicimos?

La imagen nos muestra como hemos efectuamos un enlace para que nuestros seguidores puedan efectuar comentarios en sus propios Muros personales, así como tambien muestra una caja con las entradas de nuestra Fan page, la que aparece en nuestro Blog. Detallamos a continuación el código utilizado para que sirva de referencia:

<script>
function fbs_click() {
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),' sharer', 'toolbar=0, status=0, width=626, height=436');
return false;
};
</script>

<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fmlaynessanchez.blogspot.com" onclick="return fbs_click()" target="_blank" title="Coment about us on Facebook..!">
<img src="http://4.bp.blogspot.com/_Myy7SL10ikw/S_X14ZtzaVI/AAAAAAAAAMY/Pu-Pwb6dHis/s1600/FbSobreNosotros.JPG" style="cursor: hand; cursor: pointer; display: block; float: left; height: 150px; margin: 0px 10px 5px 0px; text-align: left; width: 120px;" /><span class="Apple-style-span" style="font-size: large;">Comments about us..!</span></a>
<p>
Your support is very important to disseminate our project and bring together our users, fans GTUG, web developers and freelancers who are already using, or would like to use, the technology than Google puts at our disposal ...
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">(click on the link or in the left image)</span></span></p>
<p>
..</p>

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?id=120321264650448&width=430&height=650&connections=10&stream=true&header=true" style="border: none; height: 650px; overflow: hidden; width: 430px;"></iframe>

Asimismo, al final de esta entrada podran observar un Plug-in para comentarios que ha sido desarrollado utilizando la técnica SDK de Javascript que ahora proporciona Facebook...

Este plug-in de Comentarios de Facebook permite al usuario hacer incluso "comentarios de los comentarios" en cualquier página web. Los comentarios pueden ser referidos a una página, artículo, foto o cualquier contenido que indiquemos; y los comentarios que se hagan en páginas externas ahora también pueden aparecer en tu perfil de Facebook (si así lo desea el "comentarista", pues tiene la opción de activar o desactivar el posteo a su Muro)

Como lo hicimos?

Detallamos también a continuación nuestro codigo para que les sirva de referencia:

La primera parte, correspondiente a la definición FB.init, inicializa el SDK de Javascript vinculado a nuestra pagina Web, debiendo utilizar como appId el numero obtenido al registrar la URL y la pagina específica donde se va a mostrar nuestra caja de comentarios; operación que debemos realizar la Pagina del Desarrollador Facebook indicada.

Pueden tener mayor explicación del proceso revisando el siguiente link:

http://www.faceblog.es/desarrollo-aplicaciones-para-facebook/fbjs/fbjs-como-instanciar-el-sdk/

La segunda parte corresponde al codigo XFBML que crea el plug-in de comentarios, el cual podemos generar de: http://developers.facebook.com/docs/reference/plugins/comments/

Realmente el código es bastante corto, y hay mas cosas que pueden ser consideradas, como "localizar" los mensajes a nuestro idioma ( por defecto la indicación en_US muestra el formato "Like" en vez de "Me gusta", para lo que tenemos que utilizar es_LA), pero una opción que voy a empezar a revisar con detenimiento es respecto a las traducciones que por ejemplo se encuentra disponible en el widgets de comentarios del servicio Open Social de Google, con esto esta herramienta sería aún mas interesante... lo indicado son solo algunas de las opciones que ahora son posibles de considerar utilizando los enriquecidos "plug-ins" de Facebook.

Para los que por urgencia requieran continuar trabajando con FBML, conviene revisen el siguiente link:

http://www.cuentamelared.com/alternativas-static-fbml/

..y para empezar a revisar em manejo de iFrames conviene revisar este enlace:

http://www.cuentamelared.com/como-crear-pestana-con-iframe/

Hablar de Facebook es hablar de difusión y mercadeo, por eso los invito a continuar con mayor detenimiento las nuevas herramientas y funcionalidades proporcionadas por Facebook, y también revisar nuestra entrada referente a conceptos de Web2.0: los negocios y las redes sociales.

Saludos.
@Mlaynes

Hablemos sobre Facebook..

Adonde queremos llegar...

2010-04-22T06:32:00.000-07:00

Recuerde que..

Para las personas que han revisado nuestro Blog y les interese los temas propuestos, debe saber tambien cuales son nuestras inquietudes y expectativas respecto al desarrollo web y el mundo Google...

Queremos llegar a ser un Developer Codelab Group, por cuanto, aunque pertenezco a GTUG-Peru (Grupo de Usuarios de la Tecnología Google), y allí nos dedicamos a la investigación y aprendizaje de las herramientas y API de Google, muchas veces no contamos con una biblioteca de casos prácticos que "funcionen", que sean lo suficientemente explicados y que no sean excesivamente extensos, para que nos sirvan como modelos o tips de desarrollos propios.. aparte que el mundo Google y del desarrollo Web es realmente demasiado grande, y las agendas de los GTUG pues están basicamente orientadas a lo que es el mundo Google en general, que por cierto es sumamente importante, pero que tal vez no coincida con nuestras agendas e intereses, ..o a veces se pierde algo del entusiasmo en el grupo y no se avanza como se quisiera, o se nos presentan tantas cosas que avanzamos por todos lados pero no profundizamos mucho..

por ello nace este Blog, para que aparte del grupo que pertenezcamos o de nuestro interés personal, profesional o de trabajo, pues se forme una biblioteca de casos prácticos que podamos probar, y a los que se tenga acceso el código y que se nos explique algo del mismo.. para que aprendamos y los utilicemos en nuestros propios desarrollos web..

IMPORTANTE:

La idea es que revisen de vez en cuando los temas planteados pues ingresaremos comentarios o información en cada tema cuando sea necesario, mejoras del código, en fin... formar nuestra biblioteca de códigos.

Si hacen click en la imagen de Google, o en la pestaña Codelab del menu de nuestro blog, serán dirigidos a la pagina Google Developer Codelab, que como verán, tiene unos ejemplos prácticos de introducción (y esos casos son los que a veces se llevan en los GTUG), pero considero que tomando en cuenta el enorme aporte de Google al desarrollo Web, esto aún esta iniciándose... (hay otros Tutoriales diseminados en las diversas paginas de Google Code que son muy importantes: como es el caso de Google AppEngine y Google GWT, entre otros)

Mucho me gustaría que se difunda el interés por participar en este tipo de proyectos.. por lo que si tienen algún código que deseen compartirlo será bienvenido, indiquemos un link de donde bajarlo (a través de Google Docs, de sus blogs o paginas personales por ejemplo), o envíelos a nuestros mails (imagen Contact Us de nuestro blog), ..y nosotros nos comprometemos a revisarlos, probarlos, mejorarlos si es posible, ..y por supuesto... publicarlos en este Blog, ahora si la comunicación y afinidad con nosotros se hace mas fluída, no duden que podrán participar en la administración y publicación de temas y entradas.. y tambien por supuesto que el dominio de este Blog será cambiado a otro más alusivo a este anhelo: Integracón Google Developer Codelab, IGCodelab, ...ya veremos...

Mucho nos gustaría hacer crecer rapidamente este proyecto pero las cosas siempre tienen su tiempo y su costo para organizarse, y formar una organización "sin fines de lucro" no debe significar que se trabaje a pérdida.. ..y bueno, como era de esperar, ya formamos parte del mundo de la publicidad que propicia Google a través de Adsense e Infolinks para ver si logramos financiarnos algo, vamos a ver como va así (y esperamos que tomen en especial consideración los anuncios y links que les presentamos en nuestro blog, para contribuir de alguna manera en su mantenimiento...)

un "Developer Codelab Group" requiere un espacio, una infraestructura, uso de tiempo y servicios para la preparación de los eventos, contactar y ayudar en la preparacion de los expositores, etc., ya se nos ocurrirá algo pero comparto la idea de hacer un Developer Codelab presencial (para los que sean de la localidad) y otro on line con su respectiva biblioteca de Codigos (para los interesados), ..y esos códigos tambien deben ser publicados en el Blog... ya veremos.. descontando nuestro interés y entusiasmo ... no depende solo de nosotros ...también depende de todos ustedes...

Mientras tanto, los temas que propongamos van a seguir procurar el siguiente camino:

Ingresar al mundo Google y Web por el tema de las visualizaciones (mostrar datos en la mayor cantidad de opciones web que sean posible).
Interactuando con bases de datos (que comprende las clásicas opciones de mantenimiento de ingreso, modificación, consulta (visualizaciones), e impresión en la mayor cantidad de opciones web posibles)
Ingresar al mundo de los dispositivos móviles y su integración al mundo Web y Google en particular...
Desarrollo en el MundoWeb en general.

Nota Agregada: Considerando el interes del uso de las redes sociales en el mundo de los negocios, también tocaremos respecto a ese punto, como programar para esos entornos, ...y como integrarlos a nuestros proyectos, aparte que Google nos proporciona varias herramientas Opensocial que incluso ya estamos empleando en el desarrollo de nuestro Blog..

...Bienvenidos a Integracion Google..!

Y no olviden el comentario que les puse en el post anterior respecto a que por lo menos debemos revisar y contar con las siguientes herramientas Google:

* Nuestra cuenta Google (imprescindible)
* Nuestra página personal iGoogle (para probar nuestros gadgets)
* Nuestro servicio Google Docs, para subir lo que queramos (imágenes, spreadsheets, documentos, presentaciones, archivos zip, etc.), para trabajarlos o compartirlos con quien queramos...
* Nuestro Blog (..porque no?), allí también podemos probar nuestros gadgets, y al desarrollarlos nos permite actualizar nuestros conocimientos de HTML/Javascript/CSS y todos los frameworks complementarios que querramos (jQuery, Prototype, etc)
* También sería interesante descargar Google Desktop, que también nos permite utilizar gadgets y probar los nuestros...

Asimismo, los animo nuevamente a revisar y releer cada cierto tiempo nuestras entradas por cuanto serán actualizadas segun haya novedades para cada caso propuesto.

Saludos

@Mlaynes

Localización e Internacionalización de nuestro Blog y Paginas Web

2010-04-19T20:26:00.001-07:00

Recuerde que..

Preparándonos para poder atender consultas de amigos extranjeros, especialmente de algunos de habla inglesa que conocemos, y con quienes compartimos la idea de preparar estas practicas tipo "Developer Codelabs", hemos recurrido nuevamente a la Tecnología Google para tratar de internacionalizar nuestro Blog...

Google Traductor

Google Traductor es una herramienta interesante para evitarnos una traducción pagina por pagina de nuestros desarrollos, aún no lo hemos probado integrado a ExtJs, pero consideramos que no debe haber ningún inconveniente, por cuanto, si han revisado el Code Playground de Google, ya deben haber identificado, y tal vez probado, algunas opciones de Traducción utilizando el API language que nos ofrece Google.

Aunque en esta oportunidad henos utilizado el elemento "translate" de Google Web Elements, mediante el cual, insertado un código HTML, Google nos permite que nuestros usuarios seleccionen el idioma que les sea más familiar para leer nuestras paginas web.. más aún, dependiendo del idioma predeterminado de nuestro navegador y del idioma en que esté hecha las páginas web, Google podría hacer una traducción automática (solo se cambia un parámetro "style"; pero como no me convenció su desempeño, he preferido mantener la web en su fuente original (el español), y que Uds. amigos, seleccionen el idioma que más les convenga... además es importante que se conozca que nuestra lengua materna es el español.

Nos conviene utilizar esta herramienta por cuanto, en primer lugar, mejoraremos nuestra redacción, por cuanto mientras mejor escribamos mejor será la traducción; en segundo lugar, porque si no nos convence la traducción podremos remitir nuestras propias trducciones las que son utilizadas por Google para que vaya mejorando su herramienta de traducción automatica, y en tercer lugar, porque en nuestro proceso de aprendizaje de diversos idiomas, Google nos ofrece la opción de escuchar su pronunciación (disponible para inglés, español, portugues, frances, coreano, chino, entre otras y Google va adicionando poco a poco más idiomas, y aunque los parrafos aún deben ser cortos, son lo suficiente para que esta herramienta nos sea sumamente útil... interesante no?

Como lo hicimos?

Este Blog es Blogger (que es de Google también), y al seleccionar la opción acceder/personalizar/diseño añadimos un Gadget HTML/Javascript (que nos permite ingresar directamente nuestros propios codigos para lo que queramos...).

Y alli ingresamos el siguiente código:

<id="google_translate_element" style="display:block">
</div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: "es"}, "google_translate_element");
};
</script>
<p>Source: Español (Spanish)</p>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

El código es tan corto que realmente hay poco por explicar...
tal vez indicar que es indispensable indicar el idioma original de nuestra pagina ("pageLanguage"); y que si indicamos style="display:none", el manual indica que la traducción sería automática respecto al idioma predeterminado de nuestro navegador.. pero he encontrado foros con dudas y mejoras del código porque esa opción no parece funcionar muy bien... bueno, pero tambien podemos hacer que aparezcan solo algunos idiomas.. como siempre, hay para investigar y probar..

Que es esto ?

Go to OpenstreetMaps

Go to OpenstreetMaps

Es una aplicacion opensource para poder usar mapas y trabajar geolocalizacion sin interferencias ni restricciones de ningun tipo (incluidas las de Google Adsense).
Para utilizar esta herramienta solo basta ir a la pagina web del proyecto, seleccionar el area a mostrar y elegir la opcion "exportar" (a HTML), el cual nos genera un codigo HTML de un iframe que podemos pegar en nuestra web, y lo que es bastante importante, hasta en nuestras "fan pages" de Facebook (y por eso le hacemos referencia)

Puedes revisar el siguiente link;

http://www.facebook.com/pages/Integration-ourselves-to-Google/120321264650448?sk=app_249347133607

direccionando nuestros "links"..

y para concluir el proceso, hemos abierto varias fans page en facebook, como el caso de nuestra pagina en ingles, así que los seguidores con idioma de navegador diferente del español, sus accesos a facebook serán dirigidos a dicha página (incluido su foro); los seguidores en español son dirigidos a la pagina facebook en español por supuesto..

Como hicimos esto?

Pues similar al caso anterior, agregamos otro gadget HTML/Javascript a nuestro Blog e insertamos el siguiente código:

..el Boton "Translatethis"

Considerando una mejora utilizar una traducción empleando medios visuales, tambien hemos probado la herramienta TranslateThis Button, desarrollada empleando Ajax y el API language de Google, es free, permite varias opciones de configuración (lea la documentación al respecto), y funciona bien para muchos casos; con el siguiente código:

<span class="notranslate">
<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div></span>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis({
  fromLang : 'es', // Native language of your site
  busyText: 'Preparing the translation...',
  GA : true, // Google Analytics tracking
//cookie: 'tt-lang', // Name of the cookie, 0 = disable
  ddLangs : [ // Languages in the dropdown
        'es',
        'en',
        'pt-PT',
        'fr',
        'it',
        'ru',
        'ar',
        'zh-CN',
        'ja',
        'ko'
   ],
  noBtn: false, //whether to disable the button styling
  btnImg : 'http://x.translateth.is/tt-btn1.png',
  btnWidth : 148,
  btnHeight : 18,
});
</script>

..el idioma de nuestro navegador

En nuestros enlaces a Facebook, ahora en 3 idiomas: español, inglés y portugues; hemos hecho variaciones para absolver unas incompatibilidades del Internet Explorer que no reconoce el idioma del navegador empleando la propiedad language del objeto navigator.(sino navigator.browserLanguage), y asimismo que no reconoce directamente a las funciones javascript en las referencias (para lo que hemos utilizado el método "void"), y el código indicado tiene las siguientes variaciones:

--> Para indicar el idioma del navegador hemos utilizado los condiciones de IE y las propiedades navigator.language y navigator.browserLanguage indicadas:

<script>
wlang=navigator.language;
//document.write('Navegador: '+wlang);
</script>


--> ...y para las referencias de las imagenes que nos dirigen a cada pagina Facebook, utilizamos el metodo void, como se indica:

<a href="javascript:void(rut_facebook());">myPicture</a>

..nuestra opcion "Contact us"

Para contartarse con nosotros vía correo GMail, utilizamos el siguiente codigo:

..el API language de Google

En lo que respecta a las traducciones de la "alerta" de uso del recuadro de Google Traductor (para seguidores de distintos idiomas), hemos utilizado la API de Google Language y la libreria JQuery (con lo podriamos dar diversos efectos a dicha alerta), utilizando el siguiendo codigo:

<div id="talerta">
</div>
<div id="talerta1">
</div>
<div id="alerta">

<span class="Apple-style-span" style="color: green; font-size: large;"><b>Recuerde que..</b></span></div>
<div id="alerta1">
Este blog esta desarrollado en idioma español pero utilizando <b><span class="notranslate"> Google Traductor </span></b>puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a <span class="notranslate">Integracion Google.</span></div>

y en cualquier otra parte de nuestra pagina html:

<script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">
</script>
<script>
wlang=navigator.language;
//document.write('Navegador: '+wlang);
</script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("language", "1");
var wlanguage = wlang;
wlanguage = wlang.substr(0,2);
document.write('Navegador: '+wlanguage );
var cadlanguage = ',en,pt,it,fr,de,nl,sv,ja,ru,ko,th,es';
var ltarget = 'en';
var npos = cadlanguage. lastIndexOf(wlanguage);
if (npos>0) {
wlanguage = cadlanguage.substr(npos,2);
} else {
wlanguage = ltarget;
};
function enespanol() {
jQuery("#alerta").hide();
$("#alerta1").hide();
};
function initialize() {
var texto = document.getElementById("alerta").innerHTML;
google.language.translate(texto, 'es', wlanguage, function(result) {
var translated = document.getElementById("talerta");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
var texto1 = document.getElementById("alerta1").innerHTML;
google.language.translate(texto1, 'es', wlanguage, function(result) {
var translated = document.getElementById("talerta1");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
enespanol();
};
if (wlanguage != 'es') {
google.setOnLoadCallback(initialize);
} else {
google.setOnLoadCallback(enespanol);
}
</script>ranslate">Integracion Google.</span></div>

Nota: Este codigo utiliza una API Key de Google, la cual debemos personalizar para nuestras propias paginas web, al igual como hicimos con la API de Google de Maps en nuestros post de Integraciuon Google 1ra y 2da parte (en este caso nos referimos a la API Key de Google, la cual nos permite emplear las diversas API de Google, entre ellas Google Language y de Librerias (frameworks), esta ultima que nos permite tener acceso a JQuery, Dojo, Prototype, entre otros frameworks)

Saludos
@Mlaynes

Opina sobre las herramientas y API de Google..!

Integracion a Google AppEngine

2010-04-15T09:47:00.000-07:00

Recuerde que..

Y bueno amigos, a lo que finalmente queríamos llegar.. y que fue motivo de una consulta en el foro de Quizzpot que ha tenido muchas visitas pero pocas ayudas técnicas: la integración de nuestras aplicaciones a Google App Engine, utilizando ExtJs o cualquier otro framework,..

Los que han revisado este Blog desde el principio han de recordar que les propuse la vista de un vídeo de Google sobre App Engine en la que se nos presenta las atractivas ventajas de utilizar Google App Engine para nuestros desarrollos web:

www.youtube.com/watch?v=9Ocjqxhh3RQ

En su parte inicial, este vídeo nos explica claramente la importancia y ventajas de utilizar Google App Engine en nuestros proyectos.. pero siguiendo el desarrollo del video, vemos después que el ejemplo que nos presentan no nos resultó suficiente para entusiasmarnos (no se plantea claramente los resultados buscados con el ejercicio que desarrollan y se pierde algo de la visión de las ventajas innegables de AppEngine); por lo que aprovechando en efectuar nuestras propias pruebas, les presentamos en esta entrada algunos tips para poder iniciarnos en Google App Engine, y que por supuesto, que incluya todo lo que hemos avanzado en nuestro proceso de Integración a Google utilizando el framework ExtJs mostrados en las entradas anteriores.

Nota agregada:

Conviene también que después revisen con mayor detenimiento nuestro enlace a "Google Codelabs" (último botón derecho del menú superior de esta página), allí se detalla con mayor detalle el ejemplo que presentan en el vídeo y lo profundizan más mostrándonos la utilización de algunas de las principales librerías de Phyton (incluida su almacenamiento de datos); asimismo, también pueden probar AppEngine sobre Java, para los que desarrollen en dicha plataforma)

A este respecto resulta conveniente revisar la siguiente documentación:

code.google.com/intl/es/appengine/docs/whatisgoogleappengine.html
code.google.com/intl/es/appengine/docs/python/overview.html
code.google.com/intl/es/appengine/docs/python/runtime.html"

Instalando Google App Engine

Instalar Google App Engine nos permite instalar una infraestructura de pruebas similar a instalar nuestro servidor HTPP local, pero sin utilizar la combinación Apache+PHP+ MySQL que hemos venido utilizando con Appserv, y que por supuesto representa una nueva alternativa a considerar así como tambien tenemos la combinación Apache Tomcat (servidor de aplicaciones)+Java+MySQL -puede ser con cualquier otra base de datos como MS-SQL Server, PostGreSQL, Oracle, Access, etc.- Todas estas combinaciones entre otras, nos permiten crear, probar, publicar y mantener nuestros proyectos Web.

En este caso, vamos a utilizar el Kit de Desarrollo de software (SDK) de Google App Engine para Python: GoogleAppEngine_1.5.2.msi para plataforma Windows (de 16.5Mb, vigente al 20/Julio/2011; pero también puede utilizar la versiones correspondiente para equipos con Mac o Linux instalado), la que podemos descargar de la siguiente dirección:

code.google.com/intl/es/appengine/downloads.html

Antes de iniciar la instalacion del SDK de Google AppEngine, debemos asegurarnos que tengamos Phyton 2.5.x instalado en nuestro ordenador, para lo cual el mismo instalador nos indicara de donde bajar primero e instalar dicha version de Phyton (version 2.5.5.7 de 24Mb, vigente al 01/03/2011). Finalmente toda version completa de AppEngine ocupara unos 150Mb, incluido los instaladores del SDK y Phyton...

La ventaja del Kit SDK para Python es que simultáneamente instala un "launcher" (lanzador de aplicaciones de GoogleAppEngine), el cual nos facilita las pruebas de nuestros desarrollos:

Audiencia

Se recomienda que, para entender este codelab, tengamos suficientes conocimientos de ExtJs y herramientas básicas desarrollo Web (HTML, CSS, Javascript; o en su defecto, haber seguido el curso de ExtJs que nos ofrece Crysfel Villa de México en su pagina del Quizzpot.

Asimismo se recomienda haber leído y probado nuestras entradas: Integracion a Google (1ra parte) e Integración a Google (2da parte), especialmente para comprender las herramientas utilizadas para integrar de las API de Google a ExtJs (y viceversa), que se emplean en este tutorial.

Material de Apoyo

Descargar el material de apoyo desde Google Docs, que es donde tenemos cargado el archivo appengine.rar (elegir pestaña "File"), y en la raíz de nuestro disco de trabajo o donde estimemos conveniente se creara la carpeta "appengine", dentro de la cual tendremos las siguientes carpetas:

carpeta prueba, contiene un ejemplo sencillo que nos muestra una visualizacion de una Hoja de Calculo de Google Docs (un grafico líneal en este caso), y que su codigo lo hemos tomado del Code Playground de Google, pero bajo App Engine.

carpeta prueba01, que nos muestra un ejemplo de visualizacion de nuestra "tabla de productos" de Google Docs utilizada en nuestra entrada Integración a Google (2da.parte), y a los que he agregado un manejo básico de eventos que nos proporciona el API de Visualizaciones Google entre la Tabla y el PieChart mostrados, que son interesantes para poderlas revisar con mas detalle.

Nota agregada: Después de algunas pruebas realizadas por miembros de nuestro grupo, parece que para que funcionen estos ejercicios debe previamente haber accedido a cualquier servicio con nuestra cuenta personal de Google:. La tabla Spreadsheet Productos que utilizamos en este ejercicio está compartida en Google Docs para que "todos la vean sin acceder", pero parece que para Google, "sin acceder" significa que la tabla no aparezca en nuestra lista personal de documentos de Google Docs, pero que necesariamente se tiene que haber ingresado primero con nuestra cuenta a algún servicio de Google como GMail por ejemplo, o con la opción "acceder" de la barra del menú de www.google.com), sino el ejercicio propuesto posiblemente no trabaja bien y arroje un mensaje de error de acceso al Query.

Estos ejercicios deben funcionar aún cuando con nuestra cuenta Google nunca hayamos utilizado Google Docs, por cuanto, las cuentas de Google, no son solo nuestra puerta de ingreso a GMail sino a una larga lista de servicios de Google que nos debe resultar interesante considerar para nuestro uso cotidiano: Google Calendar, Blogger, Picassa, Google Sites, CheckOut (tipo pay-pal), Google Maps, Google Talk, y por supuesto Google App Engine, entre otros)

carpeta intGoogle1, que nos muestra lo mismo que nuestro post Integración a Google (1ra.parte), pero corriendo sobre AppEngine (nuestro archivo 01.GVisualizaton-sample.html se encuentra "insertado" dentro de IntGoogle1.py (de Phyton), y el resto de archivos js y de Extjs se encuentran grabados en la carpeta "static" de IntGoogle1.

carpeta intGoogle2, que nos muestra lo mismo que nuestro post Integración a Google (2da.parte), pero corriendo sobre AppEngine (nuestro archivo 02.GVisualizaton-sample.html se encuentra "insertado" dentro de IntGoogle2.py (de Phyton), y el resto de archivos js y de Extjs se encuentran grabados en la carpeta "static" de IntGoogle2.

Pasos para ejecutar el codelab

Para ejecutar los ejemplos mostrados solo basta ejecutar el launcher de Google App Engine (hay un icono en el desktop luego de instalación), y seleccionar la opción "File/Add Existing Aplication.." del menú, dicha opción nos muestra una ventana en la cual el boton "Browse" nos permite seleccionar la carpeta appengine que contiene nuestro proyecto (prueba, prueba01, IntGoogle1 y IntGoogle2 en este caso), elijamos cada una de nuestras carpetas y seleccionar el botón "Add", se cargaran nuestras aplicaciones al "launcher"; luego seleccionemos nuestro proyecto y elijamos el botón "Run", que direccionará nuestra aplicación a un puerto específico, y activará al botón "Browse", el cual al ser seleccionado ejecutará nuestro navegador web predeterminado, y ejecutará nuestra aplicación (este proceso es sencillísimo y no creo que tengan inconvenientes para hacerlos).

APUNTES TECNICOS:

Al revisar con más detalle los archivos de cada carpeta notarán lo siguiente:

nuestras imágenes, iconos y otros archivos "externos" utilizados en cada ejercicio, están grabadas en la carpeta static (hay que revisar un poco de la documentación al respecto, pero vale indicar que la razon principal de este procedimiento es que a diferencia de nuestras aplicaciones probadas en un servidor Apache, con Google AppEngine no todos los archivos de nuestra carpeta del proyecto se cargan en la web, y de nuestra estructura de directorios, solo algunas carpetas se ejecutan exclusivamente por el lado del servidor.
por el motivo indicado, grabamos también los archivos de ExtJs en la carpeta "static", y que en este caso corresponden a la version ext-3.1.0; realmente tuvimos algunos problemas al utilizar versiones a partir de etx-3.2.x, e inclusive con la versión vigente de ExtJs-3.3.1 a la fecha (no cargaba la "datatable" requeridas para las visualizaciones Google desde los "stores") ..pero este "bug" producto a una revisión de una de las clases de ExtJs ya ha sido corregido, por lo que pueden revisar el post respectivo a Integracion Google 1ra y 2da que corresponden a estos mismos ejercicios que estamos probando sobre AppEngine, pero funcionando sobre un servidor Apache estándar, en dicho caso, ambos ejercicios IntGoogle1 e IntGoogle2, ya han sido modificados a la versión extjs-3.1.1. vigente al 01/03/2011, así que esperamos que como haciendo sus pruebas personales deberían poder actualizar estos ejercicios para utilizar una versión actualizada de Extjs (la disponible en estos momentos), y verificar su funcionamiento.
al cargar nuestras aplicaciones con el boton "Run", a la vez que se activa el botón "Browse" (que lanzará automáticamente nuestro browser preferido y nos permitirá observar los resultados de nuestra aplicación). Vale también revisar los botones "Logs" y "SDK Console", el primero nos indica si todo esta correcto (y nos indica incluso los errores de compilación phyton de haberlos); el SDK Console nos servirá luego, especialmente cuando utilizemos la biblioteca de almacenamiento de datos de Google AppEngine y otras librerías incorporadas de la biblioteca estandard de Phyton.
Para lanzar a la web nuestra aplicación, solo basta utilizar el botón "Deploy", y si no tenemos un dominio propio, Google nos proporcionará un dominio provisional, pero nuestra aplicación bien podría ahí mismo subirse a la web (solo se necesita haber registrado nuestra cuenta Google en App Engine, para lo que se necesita registrar nuestro código de confirmación recepcionado via sms utilizando un telefono celular de la empresa Claro, para el caso de Perú (para otros países debemos consultar la lista de compañías de comunicaciones correspondiente); pero actuemos con mesura, pues Google nos permite hasta 10 subidas "gratuitas", y tal vez no nos convenga desaprovecharlas por el momento.
Al igual como hemos cargado la versión 3.1.1 "liviana" de ExtJs, podríamos hacer lo mismo si se desea utilizar cualquier cualquier otro framework JavaScript, pero téngase presente que Google tiene ya disponibles versiones de frameworks como JQuery, Prototype, Dojo, entre otros. Aunque también debemos resaltar que ahora tambien resulta importante practicar y utilizar Javascript puro.. opción que debemos tener en cuenta, ahora que poco a poco se va a imponer el manejo de este lenguaje por el lado del servidor, debido a la versatibilidad y perfomance mostradas de Node.js y el motor de desarrollo V8, los que inclusive han sido utilizados en el desarrollo del navegador Google Chrome.
Cabe resaltar asimismo que para efectuar el "Deploy" con el launcher AppEngine, de ser el caso, nuestro Logs nos indicará que debemos tener instalado y operativo "openssl", correspondiente a las herramientas que permiten a nuestros proyectos AppEngine implementar SSL (Secure Socket Layer), TLS (Transport Layer Security) así como otros protocolos relacionados con la seguridad. Para ello puede seguir los pasos indicados aqui, o a mejor parecer, nos conviene instalar completamente GnuWin32, que además de darnos acceso a comandos Linux, y entre otros paquetes, nos implementa openssl 0.9.8r vigente a la fecha (esto sobre windows; en otras plataformas como Linux o Mac debe verificarse si openssl ya se encuentra instalado, caso contrario debe implementarse el paquete openssl correspondiente).
Para nuestras pruebas personales debemos indicar también que, el nombre de nuestras aplicaciones que pongamos en el archivo app.yaml debe seguir el estandar "camel casing", por lo que dicho nombre debe empezar en minusculas...
y bueno, estas son opciones de Google AppEngine que corresponden únicamente al manejo del framework webapp proporcionado por la biblioteca estandard de Phyton, pero debemos tener en cuenta que uno de los recursos mas interesantes de Google AppEngine es su almacenamiento de datos (y que corresponden al concepto Big Table descrito en el video indicado al comienzo del post), punto muy importante que esperamos desarrollar pronto..

Saludos...

@Mlaynes

Opina sobre Google AppEngine en nuestro foro..!

Integracion a Google (2da parte)

2010-04-04T14:10:00.000-07:00

Recuerde que..

Esta es la segunda parte de nuestro proyecto de Integración de Google al entorno de desarrollo del framework ExtJs, tal como habíamos prometido realizar, y cuyo objetivo es unir las ventajas que nos ofrece ExtJs, y el innegable aporte de Google al desarrollo del mundo Web, y en esta oportunidad vamos a centrar nuestra atención en el uso de Google Spreadsheets como fuente de datos (datasource), y ello, porque es una forma bastante rápida para familiarizarnos con el empleo de las herramientas de desarrollo que nos brindan tanto ExtJs como Google para el desarrollo de aplicaciones "sencillas" que fácilmente bien podríamos hacer para pequeños negocios y otras aplicaciones varias...

En este caso, he considerado para este codelab el uso de una Hoja de Calculo con una única tabla, y que se diseñó para que personas ligadas al negocio de la Cosmética pueda controlar su negocio de Venta de productos de belleza, con la "ventaja" que todo el "ingreso y actualización de datos" los pudiera realizar directamente sobre la Hoja de Calculo usando Google Docs, pero que le permite consultar sus stocks de productos para venta, y los recordar los saldos por cobrar de sus clientes desde cualquier lugar con acceso a Internet (incluido su teléfono celular), y bueno, creo que ya pueden imaginar que esta simple herramienta les resultó bastante importante..

Audiencia

Se recomienda que, para entender este tutorial, tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML, Javascript, y manejo básico del back-end PHP-MySQL, instalado sobre un servidor HTTP Apache, o haber seguido los capitulos iniciales del curso de ExtJs que nos ofrece Crysfel Villa de México en su pagina del Quizzpot.

Asimismo se recomienda haber leido y probado: Integracion a Google (1ra parte), especialmente para comprender todo el proceso de integracion de las herramientas Google a ExtJs (y viceversa), que se emplean en este tutorial.

Material de Apoyo

Descomprimir este material de apoyo sobra la carpeta www de nuestro Servidor Web Local (seguir los pasos de la 1ra. parte de este tutorial de Integración a Google), sobre-escriba todos los archivos que así lo indiquen (ha habido algunas adiciones, modificaciones y mejoras que he tenido que realizar sobre algunas funciones y extensiones para adaptarlos a version 3.1.1 de ExtJs, la cyal es completamente compatible con la version ExtJs-3.4, ultima de su tipo antes del lanzamiento de ExtJs4), o si desea, descomprimalos en una nueva carpeta con un nombre apropiado.

(si no entiende este paso favor consulte "empezando desde cero').

Si con nuestro navegador ingresamos a "http://localhost", y luego a la carpeta "Int-Google02" ( o donde hayamos descargado el material de apoyo), y ejecutamos el archivo "02.GVisualization-sample.html", debe aparecer una pantalla como la que se muestra a continuación:

Esto nos indica que nuestra descarga y copia ha sido correcta así tambien es correcta el ruteo para la importación de las librerías de ExtJs, y ya estamos listos para revisar el material de apoyo instalado.. y descubrir como hemos Integrado ExtJs con las SpreadSheets de Google (hojas de calculo).

Nota.- si no aparece la pagina es probable que no hayamos descargado a ExtJs en la carpeta "www", como mostramos en "el potencial de ExtJs"; o tal vez, estemos usando una versión de ExtJs diferente de la indicada en nuestro archivo HTML (..ahora estamos usando la versión ext-3.3.1, pero si estamos trabajando con otra versión debemos cambiar los nombres y la ruta de la carpeta que lo contiene si fuera necesario). Asimismo, observe que ahora tambien utilizamos la libreria "Groupsummary.js" de ExtJs (en la ruta ../extjs/extjs-3.x.x/examples/ux, que asi corresponde en los archivos de la versión completa ExtJs que hayamos bajado.. si esta utilizando una version "liviana" como se indica en el Curso ExtJs de Quizzpot, cerciorese de copiar este archivo en la ruta indicada.. u otra cualquiera conveniente que nos rutee adonde este se encuentre dicho archivo).

Observe asimismo que, como se indica en el Curso ExtJs, resulta conveniente copiar solo los archivos de ExtJs que necesitemos y evitar, cuando carguemos nuestros ejercicios, pruebas o desarrollos en un servidor web real (como x10hosting.com u otros de los muchos que se ofertan en internet, como indicamos en el post anterior), pues así lograremos que nuestros proyectos solo "pesen" lo justo.. quitando los "examples" propios del framework así como los "themes" o lenguajes "locale" que no emplearemos.

Detalle del Modulo.

1. Para poder utilizar el modulo,como ya se indicó en la primera parte, debe tenerse una cuenta activa en Google,.

2. Al revisar los archivos desempaquetados de nuestro material de ayuda encontraremos los siguientes archivos:

02.GVisualization-sample.html, que contiene las instrucciones HTML para llamar a la biblioteca ExtJs y las API de Google, entre otras llamadas y configuraciones.
MenuGVisualization_02.js, que contiene las instrucciones Javascript en ExtJs que visualizan el Menú y Árbol de opciones de nuestro ejemplo, así como el código que nos permite el acceso a las opciones del Modulo, por medio de la API Contacts de Google.
SpreadSheet-ExtJs.js , que contiene las instrucciones Javascript en ExtJs, que nos permiten visualizar , en esta oportunidad, una tabla u hoja de Calculo de Google (creada a través de Google Docs), pero utilizando Visualizaciones Google y de ExtJs, que representan para nosotros, nuestro segundo nivel de Integración al mundo Google.
GVisualizationPanel.js, que contiene las instrucciones Javascript en ExtJs que construyen las "extensiones" que nos permiten utilizar Visualizaciones Google sobre ExtJs, y en este caso, funciones ExtJs que nos permiten "migrar" la data de la tabla Google a objetos "store" que puedan ser manipulados desde ExtJs.
GroupSummary.js, que como hemos indicado debe estar contenida en las carpetas de "extjs-3.31" y la necesitamos para importar la libreria ExtJs GroupSummary en el archivo "02.GVisualization-sample.htm", (podemos revisar su contenido en cualquier editor de textos como Notepad++)

3. En el archivo "02.GVisualization-sample.html", se encuentra comentadas casi todas las líneas explicando paso por paso que realizan.

4. ( New! ) Hemos añadido en esta oportunidad el archivo Spreadsheet productos.xls en formato Excel estandard, para los que deseen efectuar sus pruebas sobre una hoja de calculo propia, pues simplemente ingresen a Google Docs y carguen este archivo, por supuesto que adaptado al formato de Google Docs; luego solo basta copiar en la variable "dataSourceUrl" que corresponda la dirección web de nuestra hoja de claculo de Google Docs (la que se indica en la barra de direcciones de nuestro navegador cuando ingresemos a nuestro documento cargado a Google Docs)

Este archivo no forma parte del "proyecto" así que solo debe ser considerado como referencia.. asimismo debemos tener en cuenta que a Google Docs se puede cargar diversos formatos de hojas de calculo los que automáticamente traducirá al formato de Google Docs, como CSV, Openoffice, etc.

5. En el archivo "SpreadSheet-ExtJs.js", se encuentran detalladas cada una de las funciones llamadas desde "MenuGVisualization_02.js", que muestran el código de cada Visualización mostrada, y entre las que tenemos:

Integracion.Google.SpreadSheetExtJs, que muestra un "grid" completo de nuestra Tabla Google, y para lo cual utilizamos la extensión "Ext.ux.EVisualizationPanel", detallada en nuestro archivo GVisualizationPanel.js, y que a diferencia de la extensión "Ext.ux.GVisualizationPanel" que empleamos para adaptar nuestro "store" creado a partir de un "data array", y crear nuestra visualización Google; pues, como en este caso vamos a mostrar data Google sobre una visualización Google, no es necesario adaptar la data, y nuestra extensión nos permite mostrar la visualizacion sobre el panel ExtJs, y si indicamos un dataQuery, realizar la operación SQL que querramos...

En este caso, hemos utilizado como Query: 'select * where A is not null', esto porque, muchas veces, al final de nuestras hojas de calculo podemos poner resúmenes, cálculos especiales, anotaciones, etc... y para que estos no aparezcan en nuestra visualización, pues sencillamente ignoramos dichas lineas (por supuesto que en este caso, implica que no pongamos nada en la columna A de nuestra tabla si se trata de comentarios o resúmenes)

Integracion.Google.SpreadSheet_01, que muestra un Query un poco mas complejo tal como: 'select G ,sum(J), sum(L)+sum(N)+sum(P), count(A) where A is not null and K <> 0 group by G ', al que le hemos agregado otras propiedades como "order by", "label" y "format", siendo interesante notar que posteriormente nosotros vamos a utilizar esos "labels" o etiquetas de nuestro Query, como nombre o "id" de nuestras "Grids ExtJs".

Integracion.Google.SpreadSheet_02, que muestra el mismo Query anterior pero en un formato PieChart de los campos "comprador" y "monto" (que corresponde al monto que nuestro cliente ha comprado a la fecha).

Integracion.Google.SpreadSheet_03, que muestra el mismo Query anterior pero en un formato panel que contiene un Table y un PieChart de los campos "comprador", "monto", "cobrado" y "cantidad" (que corresponde a lo que nuestros clientes han comprado a la fecha).

Nótese asimismo que he implementado eventos sobre el PieChart y el Table, y al hacer click sobre algún componente del Pie o de la Table se ve reflejada la operación en ambas gráficas.

Hasta aqui, estamos utilizando la extensión "Ext.ux.EVisualizationPanel" de forma similar a como utilizamos "Ext.ux.GVisualizationPanel" en la 1ra parte de este tutorial para mostrar Visualizaciones Google sobre ExtJs (pero con data de un "store array"), y por supuesto, que podemos utilizar esta extensión para utilizar cualquiera de las visualizaciones Google que mostramos en la Galeria de Visualizaciones Google, pero utilizando como datasource a las hojas de Calculo de Google.

Resulta también conveniente a este respecto, revisar los siguientes enlaces:

http://code.google.com/intl/es-ES/apis/visualization/documentation/reference.html

http://code.google.com/intl/es-ES/apis/visualization/documentation/querylanguage.html

http://code.google.com/intl/es-ES/apis/visualization/documentation/examples.html

Integracion.Google.SpreadSheet_04, que utiliza el mismo Query anterior pero en este caso nuestro formato panel contiene graficas ExtJs de los campos "comprador", "monto" y "cobrado", y para ello empleamos una nueva extension que hemos llamado "Integracion.Google.GoogleStorePanel", y cuya principal función va a ser adaptar los datos de la tabla Google al formato "store" de ExtJs, y colocarlas en los paneles correspondientes.

Como mostramos, ExtJs tambien tiene opciones interesantes en sus gráficas o visualizaciones que podriamos utilizar, y una de ellas es la capacidad de poder agrupar filas y columnas en sus "grids", por ello vamos a mostrar "paso a paso" como poder utilizar una agrupacion de filas en las visualizaciones que siguen a continuación.

Integracion.Google.SpreadSheet_05, en esta visualizacion vamos a mostrar como deberíamos "crear" nuestros querys para poder agruparlos, por ello, si en este caso, quisieramos agrupar los productos comprados por cada uno de nuestros clientes, y mostrar el detalle de lo vendido, lo pagado, y el saldo correspondiente (por cada producto y del total del cliente), pues nuestro campo de agrupamiento seria el "comprador", y nuestro Query seria el siguiente:

select B, G, I, J, L+N+P where A is not null and K <> 0

order by G

label B "Producto", G "Comprador", I "FVenta", J "Monto", L+N+P "Cobrado"

En este caso detallo las etiquetas, por cuanto esos nombres los vamos a utilizar como campos (fields), de nuestro "store" a crear.

Estoy mostrando nuestro dataquery en una visualización Google tipo Table utilizando la extensión "Ext.ux.EVisualizationPanel".

Integracion.Google.SpreadSheet_06, ahora mostramos el mismo dataquery pero sobre un Grid ExtJs, utilizando la extensión "Integracion.Google.GoogleStoreGrid", que va a realizar la adaptación de la data Google al formato "store" mediante la función "Ext.ux.GoogleStoreAdapter", que utiliza la función "EditorGridPanel" de ExtJs (utilizo esa función aunque en este caso no editamos los valores, pero he dejado algunas lineas comentadas para que puedan probar que es posible editar los grids ExtJs)

Nótese que nuestro adaptador "Ext.ux.GoogleStoreAdapter", crea un campo "id", al estilo del formato Json, y que utilizamos como numero o identificador de registro; y asimismo que, nuestro adaptador devuelve el "store" completo de nuestra data requerida (campos y datos incluidos); esto no es lo único requerido para realizar "data grouping", pero si en la gran mayoría de sus visualizaciones y gráficas.

Integracion.Google.SpreadSheet_07, ahora si preparamos nuestro Query para poder realizar nuestro agrupamiento, y modificamos nuestro adaptador, al que hemos llamado "Ext.ux.GoogleStoreAdapterComplete", por cuanto, no solo crea el "store", sino el "reader" y la "data" (que son componentes que crean al store), y los muestra disponibles para poder utilizarlos en la función "Ext.data.GroupingStore" de nuestra extensión"Integracion.Google.GoogleStoreGrouping" que crea nuestra StoreGrouping Visualization

Cabe anotar como un adicional que nuestro adaptador aparte del campo "id" que representa nuestro numero de registro, tambien ha adicionado un campo "resumen" (igual para todos los registros), esto es para poder tener la capacidad de "agrupar" toda la data en un solo bloque y poder mostrar un campo de sumarizacion resumen total tal como indicamos a continuación:

Integracion.Google.SpreadSheet_08

Bueno amigos, hasta aquí nuestra 2da parte de Integración a Google, y hay bastante para probar hasta lo avanzado, pero creo imprescindible que realicen sus pruebas empleando sus propias tablas, por lo que resulta importante que empiecen a revisar Google Docs y inicien sus propias aplicaciones, ejemplos hay demasiados...

Por mencionar solo una, todos los negocios pequeños o personales (micro-empresas), la mayoría están afiliados a sistemas simplificados de declaración y recaudación fiscal, (régimen RUS de la SUNAT aquí en Lima-Peru), y solo requieren para sus declaraciones contables contar con un registro de ventas, que fácilmente se podría desarrollar en hojas de calculo de Google Docs, y que complementado con un registro de Compras y Gastos fácilmente podrían llevar el manejo administrativo contable de un pequeño negocio, "on line" colgado sobre Internet y literalmente "indestructible", y con posibilidades de consulta remota desde cualquier lugar de la ciudad, del país y del mundo... con lo que se tendría una poderosa herramienta de control para los miles de "emprendedores" que han hecho negocios pero que actualmente tienen bastantes problemas de administración y control..

Personalmente, en mi experiencia con PYMES realmente he observado muchos negocios que emplean hojas de calculo para sus procesos de administración y control, y asimismo tambien en varios casos les he planteado solución a varios tipos de negocios de este tipo (boutiques, salones spa, tiendas o bodegas, etc.), utilizando exclusivamente spreadsheets de Google Docs en donde solo se requiere una computadora con acceso a Internet (y que fácilmente tambien se pueden complementar a soluciones Web2.0 para mercadeo y publicidad de nuestros productos/servicios, y para la fidelización de clientes), ..claro que para nosotros desarrolladores tal vez estas sean soluciones simples, pero realmente pueden llegar a ser bastante económicas y efectivas.

En lo que respecta a nuestro proyecto Integracion Google, en próximos codelabs vamos a plantear el mismo ejercicio pero sobre otras plataformas...y entre las que me parecen muy interesantes para utilizar tenemos el Back-End PHP+MySQL (muy popular para utilizar con servicios de Hosting externos y se utilizan para instalar "paquetes" como Wordpress, Elgg, phpBB, Drupal y otros servicios sociales bastante difundidos, y que bien podriamos integrar a nuestros desarrollos); tambien tenemos a la combinación JSP(Java)+MySQL, que es bastante empleado para desarrollos "complejos" y profesionales; y el datastore de Google AppEngine, que involucra el manejo del concepto Big Table. Para todos los casos planteados, tenemos como principal requisito que, primero debe desarrollarse un modelo básico de mantenimiento o gestión de base de datos (altas, bajas, modificación, consulta, impresión, etc), por cuanto, a diferencia de partir de una tabla de Google Docs, en dichas plataformas debe "programarse" el registro y manejo de nuestra data, el cual debe realizarse a través de base de datos, y nuestra información no debe ser ingresada directamente a las tablas, sino a través de formularios y/o grids editables o la combinación de ambos, los que bien pueden ser diseñados con ExtJs.

Saludos

Opina en nuestro foro §FB..!

Integracion a Google (1ra parte)

2010-03-16T05:00:00.000-07:00

Recuerde que..

Esta es la primera parte de nuestro proyecto de Integración de Google al entorno de desarrollo del framework ExtJs, tal como habíamos prometido realizar, y cuyo objetivo es unir las ventajas que nos ofrece ExtJs, y el innegable aporte de Google al desarrollo del mundo Web, y así poco a poco, llegar a proponer proyectos de alcance profesional.

Audiencia

Se recomienda que, para entender este 'codelab', tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML, Javascript, y manejo básico del back-end PHP-MySQL, instalado sobre un servidor HTTP Apache; o en su defecto, haber seguido los capitulos inicales del curso de ExtJs que nos ofrece Crysfel Villa de México en su pagina del Quizzpot, o al menos haber revisado nuestra entrada "empezando desde cero".

Material de apoyo

Descomprimir este material de apoyo en la carpeta "www" de nuestro servidor local AppServ u otro compatible Apache-PHP-MySQL, y se creara la carpeta "Ynt-Google01" (si no entiende este paso favor consulte "empezando desde cero').

Ahora, si con nuestro navegador ingresamos a "http://localhost", y luego a la carpeta "Int-Google01" ( o donde hayamos descargado el material de apoyo), y ejecutamos el archivo "01.GVisualization-sample.html", debe aparecer una pantalla como la que se muestra a continuación:

Esto nos indica que nuestra descarga y copia ha sido correcta (y que las rutas de indicadas para la importación de las librerías de ExtJs tambien lo son), y ya estamos listos para revisar el material de apoyo instalado en nuestro codelab.. y descubrir como hemos empezado a Integrar ExtJs con Google.

Nota1.- si no aparece la pagina es probable que no hayamos descargado a ExtJs en la carpeta "www", como mostramos en "el potencial de ExtJs"; o tal vez, estemos usando una versión de ExtJs diferente de la indicada en nuestro archivo HTML (...ahora como podrá observar estamos usando la versión extjs-3.3.1, pero esta version en completamente compatible con la última versión ExtJs-3.4 que es la recomendamos debe utilizar). No olvide verificar las rutas relativas a "www" de nuestra carpeta AppServ sean correctas a las indicadas en las directivas de nuestro script 01.GVisualization-sample.html

Nota2.- si va a realizar directamente sus pruebas sobre un servicio de Hosting Apache-PHP-MySQL externo -como www.x10hosting.com u otro- Cerciórese primero de registrar correctamente su dominio; y asimismo de Registrar su propia API Key de Google Maps (si sigue el enlace indicado observará que para acceder a una API Key de Google Maps deberá indicar la dirección web de la website donde será empleada, por supuesto que Ud. podrá registrar varias website o dominios si es necesario); caso contrario Google al acceder a su pagina le mostrará respectivos mensajes de error y no le permitira el acceso a su aplicación; pero en caso de servidores locales Google permite el uso de cualquier API Key registrado con su cuenta Google o cualquiera de las API "públicas" que se utilizan en el Google Playground, como es el caso que se envía en el material de apoyo)

Nota3.- Obsérvese que la API de Google Contacs se encuentran definidas en http://www.google.com/jsapi, y no requiere de un registro personalizado como en el caso de Google Maps (lo mismo ocurre con la API Ajax de Google -para usar Javascript y sus framework como JQuery, Dojo, Prototype, etc- , así como Google language, Google Search, Blogger, entre otros (herramientas que utilizamos para el desarrollo de este Blog), y para lo cual se necesita registrar un API Key personalizado asociado al dominio donde se colgara nuestra aplicación, y para obtener estas API Keys solo es necesario como requisito tener una cuenta Google (refiriéndonos básicamente a una cuenta gmail)

Detalle del Modulo.

1. Para poder revisar el funcionamiento del modulo, necesitamos en primer lugar, tener una cuenta activa en Google, si no tenemos una, pues sigamos las indicaciones de la pantalla de acceso de Google Accounts, luego de haber seleccionado la opción "login", y así poder tener acceso a las opciones del módulo, y observar su funcionamiento.

Si desea revisar algo de teoría respecto a Autenticación de Cuentas Google ya les había sugerido revisar el siguiente link que emplea Javascript para dicho propósito:

http://code.google.com/intl/es-ES/apis/gdata/docs/js-authsub.html

2. Al revisar con mayor detalle los archivos desempaquetados de nuestro material de apoyo encontraremos los siguientes archivos:

01.GVisualization-sample.html, que contiene las instrucciones HTML para llamar a la biblioteca ExtJs y las API de Google, entre otras llamadas y configuraciones.
MenuGVisualization_01.js, que contiene las instrucciones Javascript en ExtJs que visualizan el Menú y Árbol de opciones de nuestro ejemplo, así como el código que nos permite el acceso a las opciones del Modulo, por medio de la API Contacts de Google.
GoogleCharts.js , que contiene las instrucciones Javascript en ExtJs, que nos permiten visualizar, en esta primera parte del proyecto, data asignada en simples "array", pero utilizando las Visualizaciones Google, que representará para nosotros, nuestro primer nivel de Integración al mundo Google.
GVisualizationPanel.js, que contiene las instrucciones Javascript en ExtJs que construyen las "extensiones" que nos permiten utilizar Visualizaciones Google sobre ExtJs
GVisualizationMaps.js, que contiene las instrucciones Javascript en ExtJs que construyen la "extensión" que nos permiten utilizar Google Maps sobre ExtJs
carpeta icons, que contiene archivos gráficos GIF, PNG que utilizamos en este ejemplo.

En nuestro archivo HTML resulta curiosa la instrucción mediante el cual, cargamos sin mayor propósito un archivo gráfico (en este caso "icons/mypic.gif", aunque pudo ser cualquier otro), y esto es porque uno de los requisitos para la autenticación de una cuenta, es brindar a Google un objeto que pertenezca al entorno del servidor que esta solicitando el servicio de acceso, para identificar su ubicación y detectar si la ruta del mismo se encuentre registrada, caso contrario emitirá un mensaje de seguridad al respecto, pero nos permitirá continuar; pero de eliminarse esta línea, Google sencillamente emitirá un mensaje de error y abortará el proceso.

3. Cabe resaltar que en este proyecto estamos utilizando métodos de desarrollo que emplearíamos en proyectos reales como es el uso de "namespace", compartiendo las aplicaciones en diferentes archivos js (imagínense si todos nuestro código lo escribamos en un único archivo js. sería inmanejable), así como mostramos el uso de extensiones, funciones "xtype", manejo de "regiones" y viewports, entre otros puntos cuyo detalle podemos revisar en diversos capitulos del Curso ExtJs de Quizzpot..

4. En el archivo "01.GVisualization-sample.html", se encuentra comentadas casi todas las líneas explicando paso por paso que realizan, especialmente las empleadas para la importación de las librerías del framework ExtJs, y las correspondientes a las API de Google.

5. En el archivo "GoogleCharts.js", se encuentran detalladas cada una de las funciones llamadas desde "MenuGVisualization_01.js", que muestran el código de cada Visualización Google empleada, y entre ellas tenemos:

Integracion.Google.GoogleTable, que muestra un simple "grid" elaborado sobre el store propuesto por un array de datos, debiendo indicar que todas las opciones vigentes para la Visualización Table de Google, se encuentran detalladas en :

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/table.html

Integracion.Google.lineChartLink, que muestra un simple "LineChart" elaborado sobre otro store, y cuyas opciones vigentes de configuración, metodos, eventos, etc. se encuentran detallados en:

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/linechart.html

Integracion.Google.pieChartLink, que muestra un "PieChart", y cuyas opciones vigentes se encuentran detalladas en:

http://code.google.com/apis/visualization/documentation/gallery/piechart.html

Integracion.Google.gaugesLink, que muestra ejemplo de uso de Gauges, y cuyas opciones vigentes se encuentran detalladas en:

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/gauge.html

Integracion.Google.intensityMapLink, que muestra un ejemplo de uso de Mapas mundiales con "carga de data"... y cuyas opciones de configuración y detalle vigentes, se encuentran detalladas en:

http://code.google.com/apis/visualization/documentation/gallery/intensitymap.html

Integracion.Google.orgChartLink, que muestra un ejemplo de "Organizational Chart" cargado sobre la misma data que se uso en la primera visualización Table, y dividiendo el sector en 02 regiones, y con el adicional de mostrarnos una introducción del manejo de eventos (nótese que al seleccionar un nombre de organigrama se selecciona también su correspondiente en la Tabla, y viceversa). Todas las opciones de configuración y detalle de esta visualización se encuentran detalladas en:

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/orgchart.html

Integracion.Google.myGoogleMaps, que nos muestra un ejemplo de uso del API de Google Maps, y que al ser tratada como una visualización, nos muestra una manera práctica de su implementación, en comparación de la documentación del API de Google Maps, la que podemos revisar en:

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/map.html

Cabe reiterar asimismo, que para poder utilizar Google Maps hay que utilizar una API Maps Key, y que preferentemente deba ser propia (para que Google nos registre, mida la cantidad de uso de nuestras aplicaciones y "nos vaya reconociendo")... la API key que estamos utilizando en este codelab corresponde a una API Key "pública" tomada de los ejercicios del Code Playground la que debe funcionar sin ningun problema en nuestros servidores locales.

Estas son solo alguna de las opciones de Visualización Google que les estamos presentando, pero en realidad Google tiene varias opciones que vale la pena revisar en:

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery.html

6. Por supuesto que ExtJs tiene sus propias visualizaciones, y algunas son muy interesantes y potentes, como es el caso de las opciones de Grouping y Filter de Tablas (que mostraremos posteriormente), pero es interesante mostrar que podemos Integrar opciones Google dentro de ExtJs sin mayores contratiempos, y ello lo efectuamos a través de las "extensiones" detalladas en:

GVisualizationPanel.js, para las Visualizaciones Google en general (compatible para utilizar con cualquier visualizacion detallada en la galería indicada), y cuyas generalidades de implementación, sin considerar ExtJs, podemos empezar a revisar en: http://code.google.com/intl/es-ES/apis/visualization/documentation/index.html

GVisualizationMaps.js, para la Visualizacion de Google Maps en particular, por cuanto esta es una implementación del API de Google Maps, cuyas generalidades podemos empezar a revisar en: http://code.google.com/intl/es-ES/apis/maps/

Esta es la primera parte del proceso de Integración Google al entorno de ExtJs, y su objetivo es mostrar que dentro del entorno Google es posible utilizar nuestras cuentas (direcciones de gmail en este caso), como nombre de usuario - con su respectivo password - para poder tener acceso a nuestro Modulo desarrollado, tal como lo hacemos con nuestros programas y sistemas de escritorio (y que es algo que debemos tomar muy en cuenta cuando se trabaja por ejemplo con Google Apps, que es actualmente una opción que esta empezando a ser muy utilizada por empresas y organizaciones de todo tipo); asimismo, este ejercicio permite mostrarnos un modelo simplificado de un Menu Tree-panel bastante utilizado en desarrollos web.

En el próximo post detallaremos como Integrarnos con Google utilizando hojas de calculo o Spreadsheets de Google Docs como fuentes de datos, con un caso practico que nos permita empezar con el manejo de "datasources" y bases de datos mas comerciales como MySQL principalmente, teniendo presente que como hemos indicado, los servicios de correo y de Google Docs son elementos muy integrados a Google Apps, así como también lo son Google Calendar, Google Maps y otros cuyas API de acceso y conexión podemos revisar en el Code Playground); y por ello, nuestro interés de empezar nuestro proceso de Integracion con Google siguiendo esta senda... Como siempre, no duden postear cualquier novedad, duda o consulta en nuestros foros de Facebook.

Opina en nuestro foro §FB..!

Google busca bronca

2010-03-13T11:27:00.000-08:00

Recuerde que..

Un comentario respecto al articulo "Google busca bronca" de Sergio LLerena publicado en la revista Somos de hoy (ElComercio, Lima PE)...

Aunque el articulo hace más referencia respecto a lo que son los navegadores (los que son nuestra puerta de entrada a Internet), pues tanto Google como Microsoft no solo desarrollan navegadores, pues como algo se menciona, también estamos hablando de sistemas operativos (Windows 7 vs Chrome OS), suites (MS-Office vs Google Docs), redes sociales (Windows Live vs Google Buzz), lenguajes de programación (VB, .Net, ASP vs Go, Phylon, Android, y todo el mundo de desarrollo opensource: como HTML, Java, PHP, Javascript, etc. de los que Google es un verdadero promotor), y muchos otros productos .. pues es importantísimo resaltar que mientras Microsoft es software "propietario", por lo que hay que pagar para poder utilizarla; pues Google Inc. es una marca registrada cuyos productos informáticos en su mayoría operan bajo licenciamiento opensource o de código abierto, es decir, por lo que "no tenemos que pagar para poder utilizarla", y como ya es una realidad, resulta estupendo ver como dicho software, es tanto o mejor que por los que teníamos que pagar.

Y bueno, bajo estos conceptos, esto no solo es una pelea.. sino una verdadera guerra por la supervivencia; Google, como indica el articulo, no solo es un producto post-Internet, sino que, como Facebook, Twitter, Netlog, etc. y miles de proyectos (en la destaca por brillo propio el proyecto GNU/Linux y sus múltiples distribuciones), todos ellos son hijos de la "era opensource" (que poco o nada utilizan de la tecnología microsoft), y no les interesa y no les resulta necesario cobrar a sus "usuarios", por el contrario, los invita a participar en sus desarrollos y pruebas, y por supuesto que tienen ingresos. Google es también un gigante multimillonario, pero su negocio no es vender software, sino publicidad, aunque ahora le entra a todo lo que es tecnología, incluido las comunicaciones (telefonía celular), la energía, y un largo etc..

El mundo de la informática ha cambiado y va a seguir cambiando nuestras formas de ver el mundo y "hacer negocios", pero creo que ya es hora que se empiece a tomar en serio al mundo del software libre, que se mueve muy bien dentro del ambiente universitario (ya se merece su artículo!!), en donde quienes participamos de este enfoque, nos preocupa más investigar, desarrollar, promover y mejorar aplicativos que sean "útiles" para su uso comercial, social, gubernamental ó lúdico, sin pensar si nos alcanza la billetera para adquirir las herramientas para poder crearlas.

Un avance de Integración a Google

2010-03-13T01:00:00.000-08:00

Recuerde que..

Habiendo revisado con mas detalle lo correspondiente al mundo Google, observo que para facilitar su aprendizaje e integración al mundo Web, podría ser conveniente seguir los siguientes pasos:

1.- Aprender ahora si a utilizar las API Ajax de Google
Las API AJAX de Google nos permiten crear sitios web completos y dinámicos utilizando únicamente Javascript y HTML. Pudiéndose insertar mapas, graficos o un cuadro de búsqueda dinámico en tu sitio web, o descargar feeds con tan solo unas líneas de JavaScript:

para revisar la parte teórica:
http://code.google.com/intl/es-ES/apis/ajax/
para revisar la parte práctica
http://code.google.com/apis/ajax/playground/

Para que hagamos nuestras pruebas, solo basta con copiar los archivos html que nos presenta el Code Playground de Google, y grabarlos con nombres apropiados en una carpeta que podríamos llamar "Apicode" dentro de "www" de nuestro servidor local ("htpp://localhost"), y ejecutarlos con nuestro navegador, como hacemos con los ejemplos del curso ExtJs de Quizzpot.

El Code Playground de Google es también bastante interesante por cuanto, tiene entre sus opciones la posibilidad de cambiar el código y hacer nuestras pruebas desde el mismo entorno del Playground, y no presenta mayores dificultades en su comprensión y manejo; no ocurre lo mismo con el entorno de desarrollo de Gadgets de Google GGE (de Google Gadget Editor), el cual si es un poco problemático para usar, y que espero que cuando veamos las API de Gadgets de Google, pues ojala haya mejorado algo, bueno.. sino hay tambien algunos tips para tratar de no tener mayores problemas.

2.- De las API de Visualizacion de Google en particular resulta interesante observar que se puede integrar estas visualizaciones (Herramientas de Google Charts) a diferentes fuentes de datos, lo que podemos revisar con mas detalle en:

http://code.google.com/intl/es-ES/apis/visualization/documentation/toolsgallery.html

como tal vez nos resulte un poco complicado entender todas las opciones de fuente de datos disponibles para investigar, les sugiero seleccionar como Filter Tool Type: "Datasouce"; y se nos presentara como opciones a Google Spreadsheet, a vis-table (que es una implementación de PHP sobre MySQL, y la implementación sobre Oracle PL/SQL). Esas tres son suficientes para empezar a investigar... si aún son algo complicadas, mejor siga con el paso siguiente, ya retomaremos estos casos cuando desarrollemos ejemplos avanzados... mientras tanto, vale saber que Google presenta opciones de conexión a cualquier base de datos.

3.- Despues de revisar toda lo indicado en el punto anterior, resulta necesario probar algunos ejemplos para ver como implementar una fuente de datos, por lo que considero conveniente empezar con Google Spreadsheet como fuente de datos, asi que revisemos con detalle los siguientes ejemplos del Code Playground:

http://code.google.com/apis/ajax/playground/?type=visualization#data_source_request

http://code.google.com/apis/ajax/playground/?type=visualization#using_the_query_language,

http://code.google.com/apis/ajax/playground/?type=visualization#more_query_options, aunque esta ultima opción utiliza formatos predeterminados de Google.

El empleo de las Hojas de Calculo Google resulta bastante interesante por cuanto, en primer lugar, son ejemplos sencillos y fáciles de probar, y también fácilmente podemos crear nuestras propias tablas, empleando Google Docs, y utilizarlas en nuestras pruebas (y así podremos realmente observar la funcionalidad de utilizar Google Spreadsheet como fuente de datos); y en segundo lugar, porque para un pequeño negocio, facilmente se puede llevar su manejo administrativo empleándolas en lugar de base de datos como MySQL, SQLite, PostgreSQL, Oracle o SQLServer; cuya integración para su uso son algo más complejos, y facilmente ya podríamos iniciarnos en el manejo de aplicaciones prácticas y comerciales sencillas, que bien ya podríamos implementar.

4.- Ya en este punto resulta necesario empezar con una revisión de las API de Cuentas de Google por lo es bueno ir leyendo:

http://code.google.com/intl/es-ES/apis/accounts/

Esto con el objeto de aprender a utilizar hojas de calculo "privadas" que solo deben ser revisadas por las personas a quienes se les quiera dar acceso (compartir tablas con atributos de modificación o solo lectura dentro de los entorno de Google Docs ó Google Apps), resultando con ello nuestras aplicaciones mas interesantes. Téngase presente que a este nivel, ya nos es necesario crear una Cuenta Google propia (utilizando nuestra cuenta hotmail u otra que utilicemos), pero les recomiendo crear mejor una cuenta nueva GMail, diferente a las que tengamos, y anexar nuestras otras cuentas a esta cuenta GMail.

En particular, debemos prestar bastante atención en revisar lo correspondiente al Protocolo de Uso de AuthSub en la Biblioteca de datos de Google de JavaScript de cliente, en el siguiente link:

http://code.google.com/intl/es-ES/apis/gdata/docs/js-authsub.html

Bueno, a estas alturas ya nos debe resultar mas sencillo comprender todo el manejo del entorno de Google en lo que respecta a sus herramientas e integracion a aplicaciones Web... las que iremos profundizando poco a poco en los siguientes posts, donde les voy a presentar un ejemplo, completo y sencillo que ya tengo casi terminado, de como integrar todas estas herramientas de Google dentro de una aplicación desarrollada con ExtJS, que incluya autenticacion de cuenta Google (para acceder al modulo), empleo de visualizaciones Google dentro de paneles ExtJS, empleo de Spreadsheets, uso indistinto de Grids Google y Grids ExtJS, utilizando por el momento a Google Spreadsheet como fuente de datos.

Pero no se preocupen si por ahora solo estamos utilizando las hojas de calculo de Google para empezar a integrarnos a Google; también vamos a presentar más adelante, un ejemplo detallado y sencillo de conexión utilizando como back-end PHP-MySQL, y para lo cual utilizaremos la base de datos que hemos instalado en nuestro Servidor Local de Pruebas, con Appserv (vea el post "empezando desde cero")

Como siempre no duden en postear cualquier inconveniente o interés que tengan...

Opina sobre las herramientas y API de Google

El potencial de ExtJS

2010-03-12T09:45:00.001-08:00

Recuerde que..

Si Ud. amigo lector ha revisado los post anteriores y han empezado con el Curso de EXtJS que nos brinda Crysfel Villa en su web del Quizzpot, pues entonces creo que resulta necesario que puedan observar porque realmente me interesó ExtJS y me parece importante...

A estas alturas, ya deben haber instalado su servidor Apache+MySQL +PHP+PHPMyAdmin y debe estar en funcionamiento, por lo que al ingresar "http://localhost" en la barra de direcciones de su navegador les debe aparecer lo siguiente:

Dicha imagen nos indica que nuestro servidor local esta funcionando sin mayores contratiempos.. y aparece porque en la carpeta "www" de c:/Appserv (o la carpeta que hayamos elegido para la instalación de nuestro servidor), están los archivos index.php y phpinfo.php; resulta necesario aclarar, si aún no es de su conocimiento, que los archivos "index" (sean php, html, entre otros), son de ejecución automática cuando se ingrese a las carpetas que los contienen, porque así puede ser configurado por defecto (el standard es index.php), lo que podemos comprobar empezando a examinar la información que nos presenta el link "PHP Information" de la pagina mostrada en la figura...

Si no desea que aparezca esta pagina al ingresar a nuestro servidor local ("localhost"), pues sencillamente ingrese con su explorador a la carpeta en "www" y renombre index.php por Server.php por ejemplo... con ello lograra que cuando ingrese a localhost aparezca directamente el directorio del servidor (como aparecen en el Curso ExtJS de Quizzpot).

No le recomiendo eliminar esos archivos, por cuanto nos van a ser útiles cuando queramos trabajar con la base de datos MySQL mediante PHPMyAdmin, y cuando queramos ver o revisar la configuración de nuestro servidor Apache, la base de datos o de PHP ( mediante PHPInfo.php), ...pero ténganse en cuenta, que para ingresar a los servicios del servidor, debe ahora hacer click en el ahora archivo Server.php (o abrirlo en otra pestaña).

Si ya han seguido y probado los primeros capítulos del Curso de ExtJS ( que si funciona..!! ), y siguiendo las recomendaciones de Crysfel, deben haber bajado la ultima versión de ExtJS de su pagina oficial, aun que debe reiterarles que la ultima versión compatible 100% con la versión ExtJs utilizada en el curso de Crysfel es la versión ExtJs-3.4, y es en la que debemos copiar, en la carpeta "Ext-3.4" de "Curso", los archivos básicos de ExtJs indicados en el curso (si queremos que los ejemplos funcionen tal como están, especialmente para los puntos de manejo de forms y grids... los capítulos iniciales y de manejo básico del framework funcionan tal como están en ExtJs3 y ExtJs4, aunque esta ultima versión sugiere una Implementacion MVC más apropiada para desarrollos complejos, y una forma de llamada de componentes orientada a agilizar la carga de los mismos, y bueno.. mi recomendación al respecto es que hayan renombrado esa carpeta con la versión de ExtJs que hayan bajado... que debe ser la versión Extjs-3.4 si deseamos trabajar, como hemos indicado, con esta ultima version de ExtJs 3.x, y sencillamente a la hora de importar la biblioteca de ExtJs en nuestras aplicaciones o ejemplos, reemplacemos la ruta de ExtJs-2.2 que indican en el tutorial de Crysfel, y pongamos el nombre de la carpeta que corresponda a la versión de ExtJs-3.x que estemos utilizando...

Asimismo, también les recomiendo crear en la carpeta "www" de nuestro servidor Appserv, una carpeta que podriamos llamar GoogleCode, y en donde podriamos guardar nuestros propios archivos HTML que podamos copiar del Code Playground de Google y probar en nuestro propio servidor las varias herramientas y API de Google que cebemos procurar integrar a nuestros productos Web, y a nuestros desarrollos ExtJs en particular..

Pero hoy les propongo hacer algo más interesante... cuando hayamos bajado nuestra versión de ExtJs (la versión ExtJs-4.0.2a vigente al 01/07/2011), probablemente la hemos hecho en una carpeta cualquiera.. y de allí hayamos copiado los archivos como nos indicó Crysfel en la carpeta "Curso"... pues, mejor copiemos toda la carpeta que contiene todo nuestro ExtJs que hemos bajado también en "www", siempre revisando la web oficial de ExtJS para asegurarnos que estemos trabajando con la ultima versión vigente de ExtJs-4.x

Ingresemos ahora a nuestro navegador y en la barra de direcciones coloquemos los links:

localhost/Ext-4.0.2a (o la versión que hayamos bajado), y revisemos allí su opción "View the Examples", equivalente a la ruta: localhost/Ext-4.0.2a/examples

Si no tenemos algun contratiempo debemos observar la web de ejemplos de ExtJS correspondiente a la versión que estemos utilizando... si es la última versión debe coincidir con la que muestra ExtJS en su pagina oficial:

http://www.extjs.com/deploy/dev/examples/

Si observamos la barra de direcciones de nuestro navegador de nuestra primera carga, nos daremos cuenta que hacemos referencia a archivos grabados en nuestro disco (si amigo lector, toda la web oficial de ExtJs ha sido programada íntegramente en ExtJs, y la parte correspondiente a los ejemplos, la tenemos ahora grabada en nuestro disco); y sabiendo cuales son esos archivos, sencillamente los podremos copiar, modificar y utilizar durante nuestro proceso de aprendizaje... y de paso, observar las equivalencias y diferencias entre el código ExtJs-3.x del tutorial del Quizzpot, con el código de la versión ExtJs-4.x, y así poder actualizarnos y realmente observar todo el potencial de éste framework, y que lo hace sumamente útil para desarrollar aplicaciones administrativas de "apariencia" similar a los que nos presentan cualquiera de los lenguajes de desarrollo convencionales, con el uso de ventanas, menús, grillas, formularios, etc... pero integrado completamente a la web.. y a bases de datos... asimismo, ExtJs abarca y hace posible el desarrollo de opciones que observamos en las mejores paginas web.

Algo similar ocurre si en lugar de utilizar ExtJs-4.0 empleamos la ultima versión de ExtJs-3.4 disponible, y cuya link hemos indicado, y observar la documentación y los ejemplos que nos muestran bajo el codigo de la version ExtJs-3.x, y que son equivalentes a los utilizados en el Tutorial de Crysfel, pero cabe dar una revision a las caracteristricas y mejoras de ExtJs-4.0, y empezar tambien nuestras pruebas bajo esta versión.. que nos presenta varias ventajas que para nosotros desarrolladores Web debemos empezar a revisar, pues nos permite un mejor manejo interno de los componentes del framework, y por supuesto, una increible mejora de nuestro potencial de programación.

NOTA IMPORTANTE: Si deseamos empezar a trabajar con ExtJs4 y empezar a utilizar esta versión con los ejercicios propuestos por el Curso ExtJs de Quizzpot, debemos tener presente que para crear nuestra versión "liviana" de ExtJs4 debemos copiar dentro de una carpeta ExtJs-4 el archivo ext-all.js y la carpeta resources de nuestra fuente descargada de ExtJs4. Asimismo, para la importación de las librerías de ExtJs4 solo es necesario importar a ext-all.js mediante en siguiente script que va dentro del Head de nuestra aplicación:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Ext.Panel</title>
    <!-- Importar los estilos -->
    <link rel="stylesheet" type="text/css" href="../js/Ext/resources/css/ext-all.css" />

    <!-- Importar el ext-all-dev.js -->
    <script type="text/javascript" src="../js/Ext/ext-all-dev.js"></script>

    <script type="text/javascript" >
        Ext.onReady(function(){
            alert("ExtJs4 esta instalado correctamente!");
        });
    </script>
</head>
<body>
	<div id="center">
        <h1>Bienvenido ExtJs4...</h1>
        </div>
</body>
</html>

(en la versión ExtJs4 ya no existe ni es necesario importar el "adapter")

ExtJs es un framework de Javascript realmente potente.. y por eso mi interés de integrarlo con el mundo Google, el cual también es bastante importante... además, si han revisado los primeros links que les presente respecto a Google, deben notar que ExtCore esta completamente integrado a Google a través de sus API de Biblioteca AJAX; por ello los invito a bajar ExtCore y grabarlo también en "www", y observe los ejemplos que nos presenta... ExtCore no ocupa mucho espacio de disco y presenta algunos ejemplos interesantes que podemos probar y unir a nuestros proyectos...

El Potencial de ExtJS

Google como hemos indicado utiliza tambien una version liviana de ExtJS como ExtCore, pero el potencial de este framework radica en que partiendo de las formas de esta librería Javascript se ha desarrollado Sencha Touch, que es una variación de ExtJs especializada para desarrollos web en entornos Apple, iOS y Android, (para móviles: telefonos celulares, Tablets, Pockets, etc.); y lo que es una principal novedad, ExtJs4 integra el manejo de ExtJs con Sencha Touch. Asimismo en este framework tenemos Ext-GWT, como un framework especializado hacia el entorno Java y desarrollos web usando Google Web Toolkit (Java software development framework); y cabe resaltar que con Node.js y el motor V8 es el inicio para emplear Javascript desde el lado de Servidor (como un back-end con capacidades asincronas de alto rendimiento), así que como podrá observarse, aún se espera mucho en el desarrollo de este framework.

En los siguientes post, les mostraré como empezar a integrar ExtJs a Google, por lo que si están siguiendo el Curso de Crysfel, lo animo a continuar... pues como indique, creo que ese curso es uno de los más completos que hemos encontrado (y bastante practico en lo que respecta a la teoría de manejo de clases asociados a la programación orientada a objetos POO), esto por la forma que esta planteado, y aunque no siempre hay ayudas visuales, pues no se preocupen, si tienen dudas o no funciona algo... posteen en el mismo curso, el foro de Quizzpot, o por nuestros enlaces facebook si lo desean...

Opina sobre el framework ExtJs

Herramientas para desarrollo Web

2010-03-11T07:56:00.000-08:00

Recuerde que..

Paso a detallar algunas herramientas necesarias para empezar con nuestros desarrollos Web...a este nivel básicamente solo requerimos de un buen editor de textos para escribir nuestro código, y navegadores Web que nos permitan "explorar" o ver el contenido de una pagina web...

Como editor podemos utilizar Notepad++, el cual además de ser bastante ligero, se encuentra habilitado para reconocer la sintaxis de HTML, JavaScript, PHP, etc..., además de permitirnos controlar el formato de texto de nuestros códigos, pues debe tenerse bien en claro que el formato de texto estandard empleados en todos los elementos de una aplicación Web ya sean archivos HTML, JS (Javascript), PHP, datos de nuestras bases de datos, etc.. es el formato UTF-8 (como lo es el formato ANSI para las aplicaciones Windows), por ello, siempre es bueno cerciorarnos que nuestros códigos siempre sean escritos en ese formato.. y para lo que solo basta revisar la opción "formato" del menú de opciones de Notepad++

Puede revisar: http://notepad-plus.sourceforge.net/es/site.htm

Como navegadores, y siempre optando por opciones opensource, recomendamos Mozila Firefox y Google Chrome: en lo que respecta a Firefox resulta imprescindible instalar el plug-in de Firebug, Firebug es una extensión de Firefox creada y diseñada especialmente para desarrolladores y programadores web. Es un paquete de utilidades con el que se puede analizar (revisar velocidad de carga, estructura DOM), editar, monitorizar y depurar el código fuente, CSS, HTML y JavaScript de una página web de manera instantánea y online.

En lo que respecta a Google Chrome, solo basta presionar sobre la pagina web que queramos el botón derecho del mouse y elegir la opción "inspeccionar objeto", y de allí seleccionar las opciones "console" y "resources" (para revisar mensajes de error o los remitidos por nuestra codificación, así como para ver todos los recursos empleados en una pagina Web).

Para seleccionar estos navegadores, y otros que nos pudieran resultar necesarios, los invito a revisar la pagina de Google Pack, la que nos muestra software utilitarios que deben ser imprescindibles en nuestro computador bajo Windows... son free y Opensource, como casi todo lo promocionado o auspiciado por Google... así que les conviene dar un vistazo en :

http://pack.google.com/intl/es/pack_installer.html?hl=es

Asimismo, les envío el link de una discusión del foro del Quizzpot, respecto a las herramientas empleadas por desarrolladores de ExtJS, para que veamos que herramientas estan empleando otras personas que tienen el mismo interes que nosotros por el desarrollo Web:

http://foro.quizzpot.com/discussion/comment/1423/#Comment_1423

Nota agregada (23/05/2010):

Resulta conveniente que al hacer las pruebas de nuestros desarrollos observemos su funcionamiento utilizando varios navegadores, nosotros realizamos nuestras pruebas utilizando Google Chrome y Mozila Firefox, pero nos han reportado de varios inconvenientes al visualizar nuestro Blog con Internet Explorer; por lo que hemos realizado algunos cambios y esperemos haber superado cualquier inconveniente; ...y resulta que el mundo Web es así, por lo que resulta conveniente considerar sus diversas opciones.
(comentaremos estos puntos en nuestro post "Localización e Internacionalización de nuestro proyecto", pero de reportarse inconvenientes no olviden de indicarlos en nuestros foros..!)

Opina en nuestros foros..!

-->