Desarrollo Web: 2012

Botón Me gusta - Virtuemart 2

Generamos el código para nuestro botón me gusta de la página https://www.addthis.com.
Buscamos el archivo default_showprices.php en components -> com_virtuemart -> views -> productdetails -> tmpl y agregamos las siguientes líneas:

Ahora para que facebook reconozca la imagen de los productos que deseamos mostrar, necesitamos agregar la ruta de la imagen al meta og:image. Entonces descargamos la extensión para Joomla Open Graph, realizamos su instalación y configuración por defecto.

Buscamos el archivo default.php en components -> com_virtuemart -> views -> productdetails -> tmpl y agregamos las siguientes líneas:

 
product->images[0]->file_url);
$og_desc = $this->product->product_s_desc;
$og_title = $this->product->product_name;


$doc = JFactory::getDocument();
$doc->setMetaData( 'og:type', $og_type );
$doc->setMetaData( 'og:url', $og_url );
$doc->setMetaData( 'og:image', $og_image );
$doc->setMetaData( 'og:description', $og_desc );
$doc->setMetaData( 'og:title', $og_title );
?>

Podemos realizar pruebas para verificar si muestra la imagen correcta de nuestro producto, introduciendo nuestra url en http://developers.facebook.com/tools/debug

Instalación Jenkins

Jenkins, originalmente llamado Hudson, es una herramienta de código abierto de integración continua escrito en Java.

Software requerido:

          Windows 7
          Apache Tomcat 5.5.20
          Jenkins.war 1.475

Descargamos la máquina virtual de java, en caso de no tenerla.
Descargamos el jenkins.war de su página oficial.

Desplegamos el war en nuestro tomcat.

Accedemos http://localhost:8080/jenkins/ para verificar la aplicación.

Activar Compresión Gzip Tomcat

Software requerido:

          Apache Tomcat 5.5.20
          Firebug 1.10.0
          Firefox 13.0

Editamos el archivo server.xml que se encuentra en C -> apache-tomcat -> conf y buscamos el tag Connector:

Agregamos las siguientes líneas en el tag Connector:

     
          compression="on"

          compressionMinSize="2048"

          noCompressionUserAgent="gozilla, traviata"

          compressableMimeType="text/html,text/xml,application/json,text/javascript"

Verificamos con el analizador de red del Firebug para Mozilla antes de aplicar la compresión.

Después de aplicar la compresión, el peso de la página se reduce a 88.3 KB y aparece el Content-Encoding gzip.

Ventana Modal Html JavaScript

Abrimos una ventana modal a través del showModalDialog y envíamos parametros de la ventana hijo a la ventana padre.

Ventana Padre: ventana1.html

   

  

<form id="frmVentana1" method="post" name="frmVentana1">

<table align="center" border="0" cellpadding="0" cellspacing="0">

   <tr>

      <td>

         <input onclick="abrirVentana()" type="button" value="abrir" />

      </td>

   </tr>

</table>

<table align="center" border="0" cellpadding="10" cellspacing="0">

   <tr> 

      <td>Parametro 1: </td>

      <td>

         <input name="txtParametro1" readonly="true" type="text" />

      </td>    

   </tr>

   <tr>

      <td>Parametro 2: </td> 

      <td>

         <input name="txtParametro2" readonly="true" type="text" />

      </td>

   </tr>

</table>

</form>

Ventana Hijo: ventana2.html

        
      
  
<form action="" id="frmVentana2" method="post" name="frmVentana2">

<table align="center" border="0" cellpadding="10" cellspacing="0">

   <tr> 

      <td>Parametro 1: </td>

      <td>

         <input name="txtParametro1" type="text" />

      </td>    

   </tr>

   <tr>

      <td>Parametro 2: </td> 

      <td>

         <input name="txtParametro2" type="text" />

      </td>

   </tr>

   <tr>

      <td colspan="2">

         <input onclick="enviar();" type="button" value="Enviar" />

      </td>

   </tr>

</table>

</form>

Submit Ventana Modal

function grabarModal(){
   var f = document.forms[0];
   window.name = "registroModal";
   f.target = "registroModal";
   f.action = "url";
   f.submit();
}

Instalar Plugin SVN Eclipse PDT

Abrimos nuestro Eclipse PDT, seleccionamos en el menú Help -> Install New Software, luego escribimos la URL "http://download.eclipse.org/releases/indigo" y seleccionamos la opción Collaboration - >Subversive SVN Team Provider.

Presionamos el botón Finish y reiniciamos el Eclipse PDT.

Al cargar el Eclipse PDT, nos pedirá instalar el conector, seleccionamos la opción SVN Kit 1.3.5.

Abrimos la perspectiva SVN Repository Exploring, seleccionamos New - > Repository Location e ingresamos la URL del repositorio.

Crear un Dominio WebLogic 10.3.3.0

Seleccionamos Oracle Weblogic -> Quickstart, desde el menú Inicio del Sistema Operativo. Luego la opción Getting started with WebLogic Server 10.3.3.

Seleccionamos la opción para crear una nueva configuración y presionamos el botón Next.

Dejamos las opciones por defecto y presionamos el botón Next.

Ingresamos el nombre del dominio, en este caso dejamos por defecto base_domain y presionamos el botón Next.

Ingresamos la clave para el nombre del usuario administrador "weblogic".

Seleccionamos Development y el JDK de nuestro dominio.

Seleccionamos Administration Server, de manera opcional para cambiar el puerto por defecto para ingresar a la consola de administración.

El puerto por defecto es el 7001, para este ejemplo he ingresado el 7004.

Verificamos el resumen de la configuración del dominio y presionamos el botón Next.

Esperamos mientras realiza la instalación y presionamos el botón Done.

Nos carga la consola y observamos el mensaje Server started in RUNNING mode, indicandonos que el servidor levanto correctamente.

Ingresamos el usuario y contraseña, para ingresar a la consola de administración desde la dirección "http://localhost:7004/console" .

Instalación Oracle WebLogic 10.3.3.0

Oracle WebLogic, es un servidor de aplicaciones Java EE desarrollado por BEA Systems posteriormente adquirida por Oracle Corporation. Es multiplataforma y puede utilizar Oracle, DB2, Microsoft SQL Server, y otras bases de datos que se ajusten al estándar JDBC.

Ejecutamos el instalador wls1033_oepe111150_win32.exe, seleccionamos el tipo de Middleware Home y creamos uno nuevo llamado bea10.

Presionamos el botón Next.

Seleccionamos el tipo de instalación Typical y presionamos el botón Next.

Seleccionamos el directorio para la instalación del producto.

Verificamos los componentes instalados y presionamos el botón Next.

Esperamos mientras realiza la instalación.

Instalación Zend Framework

Zend Framework (ZF) es un framework de código abierto para desarrollar aplicaciones Web con PHP 5. ZF ofrece un gran rendimiento y una robusta implementación MVC, una abstracción de base datos fácil de usar, y un componente de formularios que implementa la prestación de formularios HTML.

Descargamos Zend Framework.
Descomprimimos el paquete en el disco duro y copiamos la carpeta library en la raiz del servidor.

Editamos el php.ini, hacemos referencia a la carpeta library en el include_path y reiniciamos el servidor.

Abrimos la consola, nos situamos dentro de la carpeta bin y verificamos la versión instalada.

Configuración Zend Debugger Eclipse PDT

Es una extensión de PHP, que se instala en el servidor Web con el fin de realizar la depuración de nuestro proyecto.

Descargamos las fuentes de Zend Debugger., de acuerdo a nuestro sistema operativo.
Descomprimimos el archivo y escogemos la carpeta de acuerdo a la versión de PHP que tenemos instalada.

Copiamos el DLL en la carpeta de extensiones de PHP, en este caso tengo instalado el Appserv.

Copiamos el archivo dummy.php en la raíz del servidor.

Editamos el php.ini y agregamos las siguientes líneas:

          [Zend]
          zend_extension_ts=c:/AppServ/php5/ext/ZendDebugger.dll
          zend_debugger.allow_hosts=127.0.0.1
          zend_debugger.expose_remotely=always

Reiniciamos el servidor y verificamos en el phpInfo.php si levanto con éxito.

Ahora en nuestro Eclipse, seleccionamos en el menú, Debug Configurations -> PHP Web Application, seleccionamos la opción Zend Debugger y presionamos el botón Test Debugger para verificar si esta correcto.

Realizamos el debug de un archivo php.

Configuración proxy eclipse PDT

Seleccionamos en el menú Windows -> Preferences -> General -> Network Connections y la opción Manual, luego presionamos Edit para ingresar la entrada del proxy HTTP.