miércoles, 2 de mayo de 2012

Cristalab

Cristalab

Cristalab

Paginación de resultados con jQuery, PHP y JSON

Posted: 01 May 2012 04:16 PM PDT

Este tutorial muestra el procedimiento para realizar la paginación de resultados con un estilo "Ver más" o "more", donde sólo se mostrarán los últimos artículos, y las noticias más antiguas se accederán solamente vía el botón de "ver más", cargándose mediante Jquery en la misma página.

Voy a usar HTML5 y CSS3 para la estructura del sitio en HTML, y un poco de CSS3 para darle los estilos, Javascript para conectar al servidor usando AJAX y manipular el DOM (estructura) del sitio (en realidad casi todo el código está basado en las funciones de la librería JQuery), y por último PHP y MySQL para buscar los "artículos" en la base de datos y devolverlos en formato JSON.

Elegí JSON ya que es natural para manejarlo con Javascript, y así quitamos la carga del servidor de tener que generar el HTML directamente y enviarlo.

Lo primero será presentarles el ejemplo funcionando.


Ahora los primeros códigos, la estructura html:

Código :

  <!DOCTYPE html>  <html lang="es">     <head>        <meta charset="UTF-8" />        <!-- Estilos del sitio. -->        <link rel="stylesheet" type="text/css" href="style.css">        <!-- Librerias .js de utilidad. Modernizr para activar (html5shiv)            las nuevas etiquetas de html5 en internet exploerer <= 8 -->        <script src="modernizr.js"></script>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>     </head>     <body>        <!-- "wp" es simplemente un div para centrar el contenido -->        <div id="wp">           <h1>Listado de los &uacute;ltimos art&iacute;culos del sitio</h1>               <!-- "articulos-wp" es el contenedor de los "articulos" que se iran agregando.               Vacio al principio -->           <section id="articulos-wp">           </section>             <!-- Link que se presiona para buscar mas resultados, y el gif de efecto "cargando" -->           <a href="#" id="ver_mas">Ver mas!</a>           <img src="loading.gif" id="loading-gif"/>        </div>     <!-- El codigo principal que nos permitira buscar mas articulos y mostrarlos -->     <script src="ver_mas_scripts.js"></script>          </body>  </html>


Por ahora no requiere mayor explicación. El CSS no hace falta comentarlo ya que no depende de floats, position u otro atributo que pueda afectar la funcionalidad de nuestro script.

¿Cómo funciona?



  1. La página hace una petición al servidor. Ya sea por un clic en "ver más" o porque está recién cargada y busca los artículos más recientes. El mismo script calcula a partir de qué artículo buscar contando los que ya se visualizan en la página.
  2. El servidor busca en la base de datos. Y devuelve los artículos en formato JSON, además de ciertos valores que pueden son útiles como el total de estos, y los restantes que no se han mostrado aún.
  3. A través de JQuery creamos las etiquetas con los datos que recibimos del server y los insertamos en la página.


La página hace una petición al servidor


La función que tiene este trabajo es:

Código :

  function masArticulos(){     /* Guardo en una variable (un objeto jquery), una referencia a la imagen de "cargando" y el botón para buscar mas artículos*/     var $loadingGif = $('#loading-gif');     var $verMas     = $('#ver_mas');       /* Determino el comienzo, a partir de que articulo debo buscar en el servidor. Lo hago seleccionando los <article> con clase "articulo". La propiedad length  es un numero y es lo que almacena la variable.*/     var comienzo = $('#articulos-wp .articulo').length;         // Asigno un comportamiento al .gif de loading cuando se disparen los eventos,     // ajaxStart y ajaxStop (empieza y termina la conexion)       $loadingGif.on('ajaxStart', function(){        /*this hace referencia al objeto al que le asignamos el evento. Si lo encerramos en $() lo "transformamos" en un objeto Jquery  y podemos usar sus métodos sobre este. */        $(this).show();        $verMas.hide();     });          //Cuando termina oculto la imagen.     $loadingGif.on('ajaxStop', function(){        $(this).hide();     });       //$.ajax() es el método que nos proporciona jquery     $.ajax({              url: 'mas_resultados.php',              type: 'get',              data: 'comienzo=' + comienzo,              dataType: "json",              success: function(data){                 agregar_articulos(data.articulos);                                   if( data.cantidad_restante > 0){                     $('#ver_mas').show();                  }              },              error: function(){                  console.log('Fallo conectando con el servidor')              }          });  }



Configuración del método $.ajax():

  • Url: Dirección a la que conectamos.
  • Type: puede ser GET/POST
  • data: Datos enviados al servidor, en formato de url ?clave = valor
  • dataType: tipo de dato devuelto por el servidor (html, json, etc)
  • success: Calback (o función anónima) que se ejecuta cuando termina el llamado sin errores.
  • Error: Calback que se ejecuta cuando termina el llamado con errores, porque la url no es válida, o el JSON no está bien formateado por ejemplo.


El callback del atributo success recibe un parámetro (data) y es el que contiene la información que nos envía el servidor. En nuestro caso primero se lo pasamos directamente a la función agregar_articulos() y por último accedemos a uno de sus valores llamado "cantidad_restante" que nos dice si existen artículos que no se mostraron. De ser así, volvemos a mostrar el botón "Ver Más".


El servidor busca en la base de datos


Código del archivo mas_resultados.php:

Código :

  <?php  //Versiones anteriores de php 5.2, o instalaciones sin la funcion json_encode()  require_once('json_encode.php');    //La variable comienzo que enviamos con el parámetro data de $.ajax()  $comienzo = $_GET['comienzo'];    //Mostramos uno mas en caso de que sea la primer peticion.  if( $comienzo == 0 ){     $limite = 3;     } else {     $limite = 2;  }    //Conexion a la base de datos  $db = new mysqli('localhost', 'root', '', 'paginacion_ver_mas');    //Consulta para saber el total de articulos  $rs_query = $db->query('SELECT COUNT(`titulo`) AS cantidad FROM `articulos`');    $cantidad_total = $rs_query->fetch_assoc();  /*  * Creo el array que se transformara en formato JSON  * Le asigno el valor cantdidad_total, los otros 2 se inicializan vacios  */  $data = array(        'cantidad_total' => (int) $cantidad_total['cantidad'],        'cantidad_restante' => NULL,        'articulos' => array()     );    //Esta consulta busca los articulos con 2 parametros:  //Comienzo, a partir de cual buscar, y la cantidad limite.  $format = 'SELECT * FROM `articulos` ORDER BY `fecha_agregado` DESC LIMIT %d, %d';    //sprintf cambia los comodines (%d) por los valores que le pasemos como parametros.  $sql = sprintf($format, $comienzo, $limite);    $rs_query = $db->query($sql);    //Recorro los resultados y los voy agregando a $data.  while( $articulo = $rs_query->fetch_assoc() ){     //$articulo es un array asociativo dentro del while.     $data['articulos'][] = $articulo;  }    //Calculo la cantidad de artículos aun sin mostrar  //$rs_query tiene el resultado de la última consulta.  $data['cantidad_restante'] = ($cantidad_total['cantidad'] - $rs_query->num_rows ) - $comienzo;    //Para que se vea el efecto "loading" si lo trabajan en local  sleep(1);    //Imprimo el resultado en formato de cadena JSON  print json_encode($data);


La función json_encode() requiere que la información que reciba como parámetro esté codificada como utf-8. Así que es recomendable configurar la base de datos para trabajar con esta codificación.


A través de JQuery creamos las etiquetas


Código :

  function agregar_articulos(lista_articulos)  {     //Contenedor de los articulos     var $contendor_principal = $('#articulos-wp');          //Descomentar para ver el formato en que llegan los datos     //console.log(lista_articulos)       //Recorro el objeto JSON     for( var i = 0; i < lista_articulos.length; i++ ){        //Creo los tags que contendran la info de cada articulo        var $articulo          = $('<article> </article>');        var $articuloHeader    = $('<header> </header>');        var $articuloTitulo    = $('<h1>');        var $articuloFecha     = $('<span>');        var $articuloContenido = $('<div>');          //addClass es un metodo jQuery, agrega una clase CSS al elemento        $articulo.addClass('articulo');          //Agrego el texto del título y la fecha.        $articuloTitulo.text( lista_articulos[i].titulo );        $articuloFecha.text( lista_articulos[i].fecha_agregado );            $articuloContenido.addClass('contenido');        $articuloContenido.text(lista_articulos[i].contenido);                /* Utilizo el metodo .append() para insertar los elementos o tags dentro de sus padres.*/          $articuloHeader.append($articuloTitulo);        $articuloHeader.append($articuloFecha);          $articulo.append($articuloHeader);        $articulo.append($articuloContenido);          ///Por ultimo agrego el articulo completo al contenedor de estos.        $contendor_principal.append($articulo);     }  }

En esta función recibe como parámetro una variable que contiene los artículos que nos envió el servidor. Itera sobre estos a través de un bucle for().

Lo primero es crear los tag que darán formato a mis artículos. Hacer $('tag'), es similar a document.createElement('tag') y ya nos queda una referencia a ese elemento en nuestra variable pero con los métodos de JQuery.

Para las etiquetas de HTML5 utilizo una sintaxis un poco distinta, ya que sino da errores en IE8.

Luego vamos armando todo, agregando los datos de cada artículo accediendo a éstos y eligiendo el atributo que queremos leer según haga falta.

Los atributos llevan el nombre de la tabla MySql, pero puede cambiarse creando un array temporal en el archivo PHP y poniéndole el nombre que queramos a las claves.

Una vez terminado se van agregando las distintas etiquetas en su lugar. A mí me parece cómoda y fácil de entender esta forma de hacerlo pero no aseguro que sea la mejor, es solo una forma.


Al final, los eventos


En JQuery se asignan manejadores de eventos a través de esta sintaxis:

Código :

  $(elemento).on('evento', callback(event){      //Lo que quieras que suceda  })

Código :

  $(document).on('ready', function(){     masArticulos();  });  $('#ver_mas').on('click', function(e){     e.preventDefault();     masArticulos();  });


De esta manera agregamos el código para que la función masArticulos() se ejecute al cargar la página y en cada click al botón "ver más".

Bueno, este fue mi primer aporte así que posiblemente tenga errores, de todos modos espero que se entienda y aún mejor les sea útil para sus sitios. :)

Archivos para descargar.

Enviar comentario

Introducción a HTML5 Web Messaging

Posted: 10 Apr 2012 01:40 AM PDT

HTML5 Web Messaging es una API de JavaScript que permite de una forma segura compartir información entre documentos en el mismo contexto de navegación, sin correr el riesgo de exponer el DOM a un sitio hostil. La especificación está centrada en relegar la comunicación de documentos directamente al navegador, logrando así una implementación hermosa y sin necesidad de intervención del servidor, reduciendo así su carga e incrementando la seguridad en el sitio (teóricamente).

En la Web actual es común el intercambio de información entre documentos pertenecientes o no al mismo dominio, no obstante es un problema no muy sencillo de solucionar. Un ejemplo común es cuando se tiene un anuncio publicitario contenido en un iframe alojado en un servidor externo, en el cual se necesita enviar valores relacionados con el contenido de la pagina principal, esto con la finalidad de mostrar un anuncio adecuado.

Para automatizar este proceso recurrimos a JavaScript, y lo más sencillo es que el iframe lea de alguna manera la etiqueta meta keywords de la página principal o que esta misma proporcione dicha información; sin embargo, el acceso al DOM desde cualquiera de las partes no está permitido por el navegador, esto debido principalmente a la política del mismo origen –una medida importante de seguridad presente en los navegadores modernos– que admite la comunicación sin restricciones de scripts en documentos del mismo sitio, no siendo así entre aquellos que son diferentes.


Ante esta problemática surgieron algunos mecanismos como Cross-Frame Messaging; una solución que carece de naturalidad, poco elegante y que requiere hacer malabares.

[nota:7e3558eab3] En los siguientes ejemplos se han utilizado dominios locales (revisar el apéndice) así como la ultima versión de Google Chrome. [/nota:7e3558eab3]

Cross-document messaging: enviando y recibiendo mensajes


El envío de un mensaje es relativamente sencillo, no hace falta más que utilizar el método postMessage de un objeto window referenciado, ya sea de la propiedad contentWindow de un iframe, el objeto devuelto de window.open, o un nombre/indice en window.frames.

Código :

window.postMessage( Mensaje, Origen );

El primer parámetro es el mensaje que va a ser enviado. Éste puede ser una cadena de texto, un objeto, un array, etc.

El segundo parámetro es el dominio de la ventana objetivo, es decir, la ventana que va a recibir el mensaje. Si no se desea especificar un origen en concreto puede utilizarse un asterisco como comodín, sin embargo esto no es nada recomendable ya que deja enormes agujeros de seguridad. Por otra parte si el origen es el mismo que el del emisor puede utilizarse simplemente una barra diagonal: "/" (lamentablemente Google Chrome no soporta este último).

También puede añadirse un tercer parámetro, el cual debe ser un objeto MessagePort, pero esto será tratado mas adelante.

Enviar un mensaje


http://emisor.com/emisor.html

Código :

  ...  <body>     <iframe src="http://receptor.com/receptor.html"></iframe>     <button>Enviar mensaje</button>       <script>        var iframe = document.querySelector("iframe");        var button = document.querySelector("button");          var enviarMensaje = function(){           iframe.contentWindow.postMessage("Hola, ¿como estas?", "http://receptor.com");        };                // Al dar click al botón se ejecutar el método enviarMensaje.        button.addEventListener("click", enviarMensaje, false);     </script>  </body>  ...

Al dar click al botón se enviará un mensaje con el contenido: "Hola, ¿como estas?", al iframe alojado en receptor.com; sin embargo nuestro ejemplo no está completo con sólo enviar el mensaje, también es necesario recibirlo, pero antes de continuar es importante conocer los atributos del evento message que será disparado en receptor.com cuando se reciba un mensaje.

Atributos del evento message


El evento message está compuesto por cinco atributos que sólo pueden ser leídos, que básicamente significa que es imposible alterar el valor de cualquiera de ellos.

  • evento.data: contiene la información del mensaje enviado por el emisor.
  • evento.origin: devuelve una cadena de texto conteniendo el origen del emisor. Ej. http://emisor.com
  • evento.lastEventId: una cadena con el identificador único del actual evento de message.
  • evento.source: es una referencia al objeto window de quien envía el mensaje.
  • evento.ports: un array conteniendo un objeto de MessagePort enviado junto al mensaje.

Recibir un mensaje


http://receptor.com/receptor.html

Código :

…    <body>      <div id="mensaje">Aún no he recibido nada. :(</div>      <script>        var mensaje = document.querySelector("#mensaje");                var recibirMensaje = function( evento ){            // Verificamos que efectivamente el origen sea de emisor.com          if (evento.origin == "http://emisor.com")            mensaje.innerHTML = evento.data;        };       // Cuando se reciba un evento message se ejecutara las función recibirMensaje.        window.addEventListener("message", recibirMensaje, false);      </script>    </body>  …

El funcionamiento del ejemplo anterior es simple: se comienza a escuchar al evento message; cuando un mensaje es detectado, se dispara el método recibirMensaje que simplemente verifica que el origen sea el esperado y después se coloca el texto recibido dentro del elemento #mensaje.

[nota:7e3558eab3] Si intentan mandar a la consola – console.log(evento) – la información del objeto evento, se darán cuenta que al final les aparece un error. Esto se debe a lo que mencioné al principio, el receptor sólo tiene acceso a la información que explícitamente es enviada, y al colocarlo en la consola está siempre y tratará de imprimir todo el árbol del DOM.[/nota:7e3558eab3]

Como pueden ver es igual de sencillo recibir un mensaje, pero deben tener siempre presente que se tiene que verificar que en efecto, el origen sea el esperado, incluso el tipo de dato que se espera: una cadena de texto, un número, un objeto, etc. Además de que es muy importante que se controle el número de mensajes que pueden ser recibidos por minuto, de lo contrario dejarían la puerta abierta a un posible ataque de denegación de servicio.

Ahora bien, por qué no extender el ejemplo haciendo que nuestro receptor sea capaz de ser emisor también, y viceversa:

http://emisor.com/emisor.html

Código :

...    <body>      <iframe src="http://receptor.com/receptor.html"></iframe>      <div id="mensaje">Esperando contestación...</div>            <button>Enviar mensaje</button>        <script>        var iframe  = document.querySelector("iframe");        var button  = document.querySelector("button");        var mensaje = document.querySelector("#mensaje");          var enviarMensaje = function(){          iframe.contentWindow.postMessage("¿Como te llamas?", "http://receptor.com");        };          var recibirMensaje = function( evento ){          if (evento.origin == "http://receptor.com")              // Retrasamos la publicación del mensaje solo para hacerla de emoción.            setTimeout(function(){              mensaje.innerHTML = "Receptor: " + evento.data;            }, 3000);          };          button.addEventListener("click", enviarMensaje, false);        window.addEventListener("message", recibirMensaje, false);      </script>    </body>  ...

http://receptor.com/receptor.html

Código :

…    <body>      <div id="mensaje">Aún no he recibido nada. :(</div>      <script>        var mensaje = document.querySelector("#mensaje");                var recibirMensaje = function( evento ){          if (evento.origin == "http://emisor.com"){            mensaje.innerHTML = "Emisor: " + evento.data;              // Aquí evento.source es una referencia al objeto window del emisor.            // evento.origin contiene el origen del emisor: "http://emisor.com"            evento.source.postMessage("iPad Pepito, por que solo iPad es «too mainstream».", evento.origin);          }          };          window.addEventListener("message", recibirMensaje, false);      </script>    </body>  ...

Ver ejemplo funcionando en el navegador




MessageChannel y MessagePort


Hasta ahora sólo hemos visto la primera mitad que compone la especificación de HTML5 web messaging; sin embargo esta también nos provee de un objeto llamado MessageChannel, el cual permite el funcionamiento de dos piezas de código independendientes (ej. corriendo en diferentes contextos de navegación) comunicarse directamente. Por ejemplo: tenemos dos iframes contenidos en un documento: por simple deducción concluimos que están en el contexto de navegación del documento principal; por otra parte, estos iframes entre sí no están en el mismo contexto; a pesar de que están juntos; uno no sabe de la existencia del otro.

Otro ejemplo: considera una situación en la cual una red social tiene incrustado un iframe de una libreta de direcciones, y otro iframe que contiene un juego en línea. El juego necesita las direcciones electrónicas de los amigos del usuario, para esto se necesita la información de la libreta de direcciones. Es aquí cuando MessageChannel hace su aparición para hacer este proceso posible, en este caso la red social actuaría como mediador en la comunicación entre ambos iframes.

[nota:7e3558eab3] Lamentablemente Firefox todavía no soporta MessageChannel.[/nota:7e3558eab3]

Componentes de MessageChannel


El objeto MessageChannel está compuesto por dos puertos (port1 y por2) que no son otra cosa sino objetos de MessagePort, y estos a su vez contienen tres métodos:


  • puerto.postMessage( mensaje ): envía mensajes a través del puerto en cuestión.
  • puerto.start(): comienza el envío de mensajes a través del puerto.
  • puerto.stop(): detiene el envío de mensajes a través del puerto.

MessagePort también contiene el evento onmessage, que puede ser utilizado en lugar de agregar un addEventListener.

Ejemplo


Con la finalidad de explicar mejor cómo trabajan MessageChannel y MessagePort, en este ejemplo nos basaremos en el escenario de la red social descrito anteriormente.

[nota:7e3558eab3] Por cuestiones de infraestructura se utilizara un mismo origen; sin embargo la estructura es básicamente la misma para orígenes externos.[/nota:7e3558eab3]

En primera instancia tenemos la página del juego. Lo primero que haremos es definir una función que se ejecutará cuando la estructura de nuestro documento esté completamente cargada. El objetivo primordial de esta función será el indicar a nuestro documento principal – la red social – que ya está listo para empezar a recibir correos. Para conseguir esto se crea un nuevo objeto MessageChannel, del cual su segundo puerto será enviado en un mensaje al documento principal. Después iniciamos nuestro primer puerto para procesar los mensajes que serán recibidos.

http://red-social.com/juego.html

Código :

…  <body>  <!-- En #correos serán añadidas las direcciones de correo electrónico que sean recibidas. -->  <ul id="correos"></ul>    <script>    var documentoCargado = function(){            // Definimos las variables que serán utilizadas.      var canal, correos, recibirMensaje;            // Seleccionamos lo que será nuestro contenedor de correos.      correos = document.querySelector("#correos");        // Creamos un objeto MessageChannel.      canal = new MessageChannel();        // Esta es nuestra función que será encargada de procesar los mensajes entrantes,       // en otras palabras, de publicar los correos que sean enviados desde la agenda.      recibirMensaje = function( evento ){        // creamos un nuevo elemento "li" y le añadimos el correo recibido.        var correo = document.createElement("li");        correo.innerText = evento.data;          // Depues agregamos este mismo "li" a nuestro contenedor de correos (ul#correos).        correos.appendChild( correo );      };              // Ahora que el documento esta cargado, le enviamos un mensaje con el puerto dos a la red social (el sitio que contiene este iframe)      // diciendo que ya estamos listos para recibir los correos.      window.parent.postMessage("¡Estoy listo!", "http://emisor.com", [canal.port2]);        // Por el puerto uno escuchamos la llegada de cualquier mensaje.      canal.port1.addEventListener("message", recibirMensaje, false);      // y abrimos el puerto.      canal.port1.start();    };      // Esperemos a que se cargue el DOM.     // * esta es la versión con JavaScript puro de $(document).ready() de jQuery.    window.addEventListener("DOMContentLoaded", documentoCargado, false);  </script>  </body>  …

La red social actuará como proxy: será quien enlace el juego con la agenda. Una vez que se reciba el mensaje de parte de la página del juego será enviado un mensaje a la agenda contiendo el puerto para comunicarse con el juego.

http://red-social.com/redsocial.html

Código :

  …  <body>   <iframe src="juego.html"></iframe>    <iframe src="agenda.html"></iframe>      <script>    var documentoCargado = function(){          // Seleccionamos nuestra agenda, la cual esta contenida en el segundo iframe      // de nuestro documento.      var agenda = window.frames[1];        // Función encarga de procesar el mensaje entrante.      var recibirMensaje = function( evento ){                // Le enviamos a la agenda un mensaje avisando que puede empezar        // a enviar información a la pagina del juego. Al mismo tiempo, le enviamos        // el puerto (port2) por el cual puede comunicarse directamente con la pagina del juego.              agenda.postMessage("Puede transmitir", "http://emisor.com", evento.ports)      };            // Escuchamos a cualquier evento message que pueda llegar.      window.addEventListener("message", recibirMensaje, false);    };      // Esperamos a que se cargue el documento.    window.addEventListener("DOMContentLoaded", documentoCargado, false);    </script>  </body>   ...

En la agenda tenemos un simple formulario con una entrada de texto, en el cual serán ingresadas las direcciones electrónicas.

http://red-social.com/agenda.html

Código :

…  <body>  <!-- Este es el formulario en donde se ingresarán las direcciones de correo electrónico que serán enviadas a la página del juego. -->  <form>    <input type="email" placeholder="Ingrese e-mail" required>    <button>Enviar</button>  </form>    <script>      var documentoCargado = function(){      var recibirMensaje = function( evento ){                // Localizamos nuestro formulario.        var formulario = document.forms[0];          var procesarFormulario = function( form ){                    // Detenemos el envio del formulario          form.preventDefault();            // Leemos el contenido de nuestra entrada de texto.          var correo = formulario.querySelector("input").value;                    // Enviamos el correo ingresado por el puerto recibido en el mensaje (port2) que fue enviado desde la red social.          evento.ports[0].postMessage( correo );        };                        // Cuando se envíe el formulario se ejecutara la función procesarFormulario.        formulario.addEventListener("submit", procesarFormulario, false);          };          // Escuchamos a cualquier evento message que pueda llegar.      window.addEventListener("message", recibirMensaje, false);    };        // Esperamos a que se cargue el documento.    window.addEventListener("DOMContentLoaded", documentoCargado, false);  </script>  </body>  ...

[nota:7e3558eab3] Por cuestiones de legibilidad y simpleza se omitieron todas las validaciones que deben hacerse; validar el origen, el tipo de datos, etc.[/nota:7e3558eab3]

Ver el ejemplo funcionando en el navegador.



Conclusión


Esta es una tecnología asombrosa que ayudará a hacer la vida mas fácil a muchos desarrolladores, no obstante habrá que esperar un tiempo más, ya que los navegadores principales solo han implementado parcialmente HTML5 web messaging.

Referencias



Apéndice


Para simular distintos dominios se agregan entradas al archivo hosts de los dominios deseados, por ejemplo: emisor.com, receptor.com y red-social.com. En Ubuntu y Mac este archivo se encuentra en "/etc/hosts" y "system32\drivers\etc\hosts" en Windows. Se echa a andar un servidor web, como Nginx (aunque vale con cualquier otro como Lighttpd, Cherokee o el tradicional Apache) con los dominios apuntando a una misma carpeta, sin otro motivo más que de comodidad, ya que se tienen los archivos juntos.

Archivo hosts

Código :

127.0.0.1 emisor.com  127.0.0.1 receptor.com  127.0.0.1 red-social.com

Configuración ejemplo de Nginx

Código :

  server {    listen   80;      # Tres dominios distintos apuntando a la misma carpeta.    server_name  emisor.com alias receptor.com red-social.com;     location / {      root   /home/jonasanx/public_html;      autoindex  on;     }  }


Escrito por Jonathan Javier { Twitter: @jonasanx } para Cristalab.com

Enviar comentario

Deformar bitmaps con el metodo drawTriangles de Actionscript 3

Posted: 07 Feb 2009 04:00 PM PST

El método drawTriangles() de Actionscript 3 es útil al crear figuras tridimensionales a partir de triángulos, para modificar la apariencia de un bitmap y en el mas sencillo de los casos dibujar una figura vectorizada. Lo que puede llevar a su uso incluso en el desarrollo de motores 3D vectoriales en Flash.
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)