Cristalab |
- Protocolos dinámicos Rip en Redes
- Paginación de resultados con jQuery, PHP y JSON
- Cartel publicitario 3D en Illustrator
| Protocolos dinámicos Rip en Redes Posted: 31 May 2012 03:02 AM PDT En los anteriores videotutoriales de Redes hicimos uso del comando Debug, revisando cambios internos en los dispositivos. Ahora comprobaremos cómo también ofrece funcionalidades sobre la información transferida por los protocolos dinámicos, como Rip, permitiéndonos comprobar su funcionamiento y detectar posibles errores. Para ello usaremos Packet Tracert, implementando la depuración en un dispositivo y testeando los procesos que lleva a cabo y los datos usados, repasando los elementos mostrados y ver cómo afectan al proceso de enrutamiento por los dispositivos que participan en el intercambio Rip. Saludos.
|
| 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 últimos artí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?
La página hace una petición al servidorLa 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():
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 datosCó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 etiquetasCó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 eventosEn 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.
|
| Cartel publicitario 3D en Illustrator Posted: 19 Apr 2012 04:45 AM PDT Si en alguna ocasión, hemos intentado con las herramientas 3D de Illustrator, crear extrusiones de grosor variable de varios elementos, nos habrán surgido problemas, debidos a la unificación del proceso de la perspectiva, por lo que aprenderemos a separarlos y expandirlos correctamnete, ajustando la creación y obteniendo diferentes grosores y profundidades con una perfecta asignacion del punto de fuga. Saludos.
|
| You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No hay comentarios:
Publicar un comentario