La idea de esto es poder acceder y modificar los atributos de una etiqueta padre desde una etiqueta hijo siendo esta última un archivo aparte en html, php o cualquier otro, haciendo todo esto con JQuery.

Para comenzar, en un archivo inicio.php, escribimos el siguiente código:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Trasitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Documento HTML</title>
<script type=”text/javascript” src=”jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”funciones.js“></script>
</head>
<body>
<div id=”contenido“>
Texto en contenido padre (inicio.html).
<div id =”dinamico“>
Aca se carga el contenido del archivo externo (dinamico.html).
</div>
</div>
</body>
</html>

Aquí se puede ver que el div “dinamico” es hijo del div “contenido”. A su vez, el div “dinamico” recibirá su contenido desde un archivo dinamico.html.

Le decimos a inicio.html que cargue el contenido de dinamico.html en el div “dinamico” desde el archivo funciones.js. 

El archivo funciones.js contiene el siguiente código:

$(‘document’).ready(function(){
$(‘#contenido’).css(‘background-color’, ‘red’);
$(‘#contenido’).css(‘height’, ‘400’);
$(‘#contenido’).css(‘width’, ‘400’);
$(‘#dinamico’).css(‘background-color’, ‘yellow’);
$(‘#dinamico’).css(‘height’, ‘200’);
$(‘#dinamico’).css(‘width’, ‘350’);
$(‘#dinamico’).load(‘dinamico.html’);
});

La linea importante aquí es la  referente al método load:

Es acá donde se hace la carga del archivo dinamico.html en el div de id=”dinamico” del archivo inicio.html.

Por otro lado, el el archivo dinamico.html, contiene el siguiente código (que puede ser el que quieras):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Trasitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Documento HTML</title>
<script type=”text/javascript” src=”jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”funcionesDinamico.js“></script>
</head>
<body>
Texto en contenido hijo (dinamico.html).<br>
<input type=”button” value=”Cambiar color de padre” id=”cambiarColor”/>
</body>
</html>

En este archivo podemos escribir el código que queramos, pero la idea es poder disparar algún evento desde aquí que pueda acceder y modificar atributos del archivo padre inicio.html. Esto último ĺo podemos hacer con un botón, que al apretarlo, disparará el evento click de jQuery (u onClick en javascript). A este comportamiento lo especificamos en el archivo funcionesDinamico.js.

El contenido de funcionesDinamico.js es:

$(‘document’).ready(function(){
$(‘#cambiarColor‘).click(function(){
window.parent.$(‘#contenido’).css(‘background-color’, ‘green’);
})
});

Aquí dice que cuando el botón con id=”cambiarColor”, dispare el evento click, en la página padre (mediante window.parent), se cambien los estilos css del padre.

Esto abre muchas posibilidades, como la de poder recargar un segundo archivo externo (otroArchivo.html) en el div “contenido” del archivo padre, utilidad que me ha resultado muy útil en varias oportunidades.


 

Los mitos acerca del éxito del desarrollo de aplicaciones

Crédito foto: App-Promo

Acá les dejo el link al artículo completo.


En el post anterior, al trabajar con CI, vimos como referenciar imágenes, estilos, archivos js y cualquier otro archivo externo. Vimos que si tengo mi sitio de prueba en mi servidor local, al subirlo a un servidor remoto, la labor de referenciar dichos archivos podría significar un importante tiempo si lo hacemos manualmente. Aquí pueden ayudarnos los Helpers. Los Helpers son métodos disponibles en todo el framework CI. Es decir, puedo usar estos métodos tanto en  las vistas como en los controladores y/o los modelos. Vemos cómo implementarlos.

Siempre suponiendo que nuestro sitio está en http://localhost/misitio, en el directorio raiz encontramos entre otros los siguientes archivos y carpetas:

  1. [imagenes]
  2. [estilos]
  3. [js]
  4. [application]
  5.                [models]
  6.                [views]
  7.                                  vista.php
  8.                [controlers]
  9.                                  miControlador.php
  10.                [helpers]
  11.                                  rutas_helper.php
  12. [system]
  13. index.php

Hemos creado los archivos miControlador.php, vista.php y en la carpeta [helpers], el archivo rutas_helper.php. En este último escribimos el siguiente código:

            rutas_helper.php

  1. <?php
  2. function server_root(){
  3.       $server_root = ‘http://localhost/misitio/&#8217;;   // valor en servidor local.
  4.       //$site_root = ‘http://www.servidorremoto.com.ar/&#8217;;   // valor en servidor remoto.
  5.       return $server_root;
  6. }
  7. ?>

Aquí vemos que este método devuelve el valor de la variable $server_root, que según este comentada o no la línea 3 o la línea 4, será la ruta que se considerará. La idea de todo esto es la de usar este método en una vista por ejemplo.

            vista.html

  1. <html>
  2. <head>…</head>
  3. <body>
  4. <table width=”500″ border=”0″ cellpadding=”0″ cellspacing=”0″>
  5.    <tr>
  6.          <td background=”<?=server_root()?>imagenes/imgo04.jpg”></td>
  7.    </tr>
  8. </table>
  9. </body>
  10. </html>

En la línea 7 vemos que se ha usado el método server_root(). Ahora bien, al subir esta vista a nuestro servidor remoto (y las otras muchas vistas que seguro vamos a tener), con sólo comentar o descomentar las líneas 3 y 4 del archivo rutas_helper.php, nos ahorramos el trabajo de hacerlo manualmente en todas y cada una de las vistas con que cuente nuestro sitio.

Ahora sólo falta tener en cuenta un detalle importante para que la vista pueda “leer” el helper: Las vistas se llaman desde un controlador, por lo tanto debemos decirle al controlador en cuestión que “cargue” el helper rutas_helper.php para que pueda ser “leído” desde sus vistas relacionadas. Lo hacemos así:

            miControlador.php

  1. <?php
  2. class MiControlador extends CI_Controller {  
  3.         public function __construct() {
  4.                          parent::__construct();
  5.                         $this->load->helper(‘rutas’);  // aquí se carga el helper al instanciar la clase.
  6.         }
  7.         public function miMetodo() {
  8.                          …
  9.                          $this->load->view(‘vista.php’);  //aquí se llama la vista con el helper ya soportado.
  10.         }
  11. }
  12. ?>

En la línea 7 vemos que al instanciar la clase, se carga el helper desde el constructor. Es decir, cuando tipiemos http://www.servidorremoto.com.ar/micontrolador/mimetodo, estaremos instanciando la clase MiControlador. En este momento se cargará el helper, luego la clase llamará al método miMetodo() y éste último, a la vista vista.php con los métodos del helper habilitados.


Al instalar CI en nuestro servidor, unos de los primeros problemas con el que podemos encontrarnos es el tratamiento de imágenes, estilos, archivos js y otros archivos externos.

A este momento, CI está por la versión 2.0.1 y se puede descargar desde http://codeigniter.com/download.php . Suponiendo que nuestro sitio está en http://localhost/misitio, en el directorio raiz del mismo, podemos ver los siguientes archivos y directorios.

  1. [user_guide]
  2. [system]
  3. [application]
  4. [models]
  5. [controllers]
  6. [views]
  7.                    archivo1.html
  8.                    archivo2.html
  9.                    archivo3.html
  10.                    archivo.php
  11. index.php
  12. license.txt

Básicamente, si colocamos los archivos de imágenes, estilos, js o fla en la carpeta [views] junto con los archivos html o php, NO VAMOS A PODER VER LAS IMAGENES ni tampoco los textos con los estilos aplicados ni nada que haga referencia a archivos externos. Para poder verlos habrá que colocar las carpetas con dichos archivos en el directorio raiz del sitio:

  1. [imagenes]
  2. [estilos]
  3. [js]
  4. [fla]
  5. [user_guide]
  6. [system]
  7. [application]
  8. [models]
  9. [controllers]
  10. [views]
  11.                    archivo1.html
  12.                    archivo2.html
  13.                    archivo3.html
  14.                    archivo.php
  15. index.php
  16. license.txt

Luego, desde los archivos html o php que estan en las vistas, tenemos que hacer referencia a los archivos que se encuentran en las carpetas en cuestión. Hacemos eso de la siguiente manera:

Para las imágenes  <img src=”http://localhost/misitio/imagenes/imagen.jpg&#8221; width=”35″ height=”35″>

Para los estilos  <link href=”http://localhost/misitio/estilos/estilos.css&#8221; rel=”stylesheet” type=”text/css”>

Para los js  <script language=”javascript” type=”text/javascript” src=”http://localhost/misitio/js/metodos.js”></script&gt;

Y eso es todo, ahora sí podremos ver las imágenes, los textos con los estilos aplicados y cualquier otra referencia a archivos externos.

Ahora bien, todos estos archivos y carpetas entán en nuestro servidor local. Al subirlo al servidor remoto, las referencias cambiarán, ya no será http://localhost/misitio, sino http://www.misitio.com. Con unas pocas imágenes y uno o dos archivos de estilos o js, no habrá ningún problema en cambiar esas referencias manualmente. ¿Pero qué pasa cuando tenemos cientos de imágenes? ¿Qué pasa cuando tenemos diez o mas archivos de estilos o js o fla? Obviamente cambiar las referencias manualmente, archivo por archivo, será todo un tedio. Es ahí cuando los helpers pueden ayudarnos para hacer estos cambios en un único archivo. Pero eso lo veremos mas adelante.

Saludos.



Hola a todos, tanto tiempo. esta vez he vuelto por algo que aunque simple, no lo quiero dejar pasar: algunos problemas con el puerto 80 donde escucha Apache.

En mi caso, uso como servidor local, al paquete XAMPP, un servidor web bastante completo. ademàs es un servidor de correo, de FTP y varias otras cosas mas.

Un problema que a veces se me presentò es que en el panel de XAMPP, Apache funcionaba por unos momentos y luego dejaba de funcionar. Buscando por la red encontrè que el problema se debe a que tenemos algunas otras aplicaciones que tambièn estàn escuchando el puerto 80 y genera conflicto. La soluciòn pasa por cambiar el puerto 80 por otro, en nuestro caso, por el puerto 8080.

Como es apache el que està escuchando el puerto 80, tenemos que ir a la carpeta donde tenemos instalado nuestro xampp y editamos un archivo conf que està en  nuestra_unidad_de_disco>xampp>apache>conf>htpd.conf y abrimos el acrchivo conf.  Allì buscamos el port 80 y sòlo tenemos que cambiarlo por port 8080. Eso es todo, simple. Obviamente debemos reiniciar nuestra màquina y listo. Al momento de utilizar nuestro navegador, no olvimos que ahora nuestro servidor local serà http://localhost:8080

Hasta la pròxima, espero que les sea ùtil.


Includes en PHP

31Jul10

Esta es una traducción parcial y sintética de un post de SITEPOINT y se refiere a las opciones que nos da PHP para el tratamiento de los includes, una sentencia muy conocida en muschos lenguajes.

Existen cuatro formas de incluir un script dentro de otro en PHP, ellos son:

  • include
  • require
  • include_once
  • require_once

include y require son casi idénticos, la única diferencia entre ellos es lo que sucede cuando intentamos cargar un archivo que no está disponible (porque no existe o porque el servidor no tiene permiso para leerlo). Con include, se muestra un aviso de error y el script continúa ejecutándose. Con require, se muestra un aviso de error y se detiene el script.

Un ejemplo de lo anterior sería usar un include para cargar un script de conección a una base de datos. Si sucede algún error en la conección, el script debería poder continuar para mostrar una opción de comunicar lo sucedido al administrador del sitio.

include_once y require_once funcionan igual que el include y el require respectivamente que ya vimos — pero con la diferencia de que si el archivo que pretendemos cargar ya ha sido incluído (usando cualquiera de las cuatro sentencias que estamos viendo), la sentencia será ignorada. Esto es útil para tareas que deseamos que se ejecutan una sóla vez, como puede ser la conección a una base de datos ya mencionada.


scripts jsp

30Jun10

Mejor no demorar mucho, acá va un pequeño ejemplo de una página jsp:

<%–
Document   : verdatos
Created on : 19/06/2010, 15:40:01
Author     : Administrador
–%>
<%!
String mensaje1 = “Bienvenidos “;
String mensaje2 = “a mi web”;
String mensaje = “”;
%>

<%
mensaje = mensaje1 + mensaje2;
%>

<%@page contentType=”text/html” pageEncoding=”UTF-8″%>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Formulario de ingreso de datos</title>
</head>
<body>
<form action=”validacion.jsp” method=”get” id=”formulario”>
<%= mensaje %><br>
Ingresa nombre y apellido<br>
nombre:<input type=”text” name=”nombre” /><br>
apellido:<input type=”text” name=”apellido” /><br>
<input type=”submit” name=”Submit” value=”Aceptar” />
</form>
</body>
</html>

Marcado en negritas, podemos ver un comentario,  la declaración de 3 variables,  un pequeño código java, una propiedad de página, y una impresión en pantalla del valor de una variable.