Archivo de la categoría: Programacion

Borrar clave primaria junto con indice en oracle

Hace un par de días experimente un problema borrando una clave primaria de una tabla. Mi objetivo era agregar una nueva columna a la tabla y re definir la clave primaria y el indice básico de la tabla.

El problema fue que al eliminar la clave primaria, el indice no se borraba en conjunto con ella como es común, sino que por el contrario solo se eliminaba la clave primaria y el indice atado a ella quedaba ahí. Ésto me producía un conflicto posterior en el script, pues al crear la clave primaria con el antiguo nombre, me arrojaba error puesto que el objeto con ese nombre “ya existía”. En efecto… Pues el indice aun estaba ahí.

Porque sucede?
Sucede cuando el indice de una clave primaria no es creado al mismo tiempo que ésta misma. Entonces, cuando se borra la clave primaria oracle asume que el indice no se debe tocar.

Como solucionarlo?
Fácil, solamente verifica después de borrar la clave primaria que el indice ha sido eliminado también. Podrías usar algo como lo siguiente:

begin
select ‘S’
into vExiste
from SYS.dba_objects
where OBJECT_TYPE = ‘INDEX’
and upper(OBJECT_NAME) = ‘NOMBRE_DEL_INDICE’;
exception
when others then
vExiste := ‘N’;
end;

if (vExiste = ‘S’) then
EXECUTE IMMEDIATE ‘DROP INDEX NOMBRE_DEL_INDICE’;
end if;

Fuente:
http://www.vertabelo.com/blog/technical-articles/why-does-oracle-sometimes-not-drop-an-index-associated-with-a-primary-key-or-unique-constraint

¿Que es Composer?

Composer es una de las herramientas fundamentales en php a la hora de instalar dependencias de proyectos en Linux para montar un ambiente de desarrollo fácil y de manera correcta, me he tomado la libertad de traducir la introducción oficial a Composer que nos aclarara dudas al respecto y nos demostrara como instalarlo en nuestra maquina.

composer

Introducción
Composer es una herramienta para administración de dependencias en PHP. Te permite declarar las librerías de las cuales tu proyecto depende o necesita y éste las instala en el proyecto por ti.

Composer no es un administrador de paquetes. Si el trata con “paquetes” o librerías, pero las gestiona en función de cada proyecto, instalándolas en un directorio dentro de tu proyecto. Por defecto nunca instalara algo global mente. En consecuencia, es un administrador de dependencias.

La idea no es nueva y Composer esta fuertemente inspirado por el NPM de node and el bundler de Ruby. Pero no ha existido tal herramienta para PHP.

Los problemas que Composer resuelve son estos:

a) Tu tienes un proyecto que depende de un numero de librerías.
b) Algunas de esas librerías de penden de otras librerías.
c) Tu declaras las cosas de las cuales dependes.
d) Composer busca las versiones de estos paquetes necesitas instalar, y las instala (las descarga en tu proyecto).

Declarando dependencias

Digamos que estas creando un proyecto, y necesitas una libreria que haga logging. Decides usar monolog, para agregarlo
a tu proyecto, todo lo que nesesitas hacer es crear un archivo “composer.json” que describa las dependencias del proyecto.

{
“require”: {
“monolog/monolog”: “1.2.*”
}
}

 

Estamos simplemente declarando que nuestro proyecto requiere algún paquete monolog/monolog, cualquier versiones que comience con 1.2

 

Requerimientos del Sistema

Composer requiere PHP 5.3.2+ para correr. Unas cuentas configuraciones php y compilar banderas también es requerido, pero el
instalador te informara de cualquier incompatibilidad.

Para instalar paquetes de fuentes en vez de simples archivos zip, nesesitaras git, svn o hg dependiendo de como el paquete este siendo
controlado por versiones.

Composer es multiplataforma se lucha para hacerlo correr igual de bien en Windows, Linux y OSX

 

Instalación en Linux
Descargando el ejecutable de composer

Localmente:
Para obtener composer, debemos hacer dos cosas. Lo primero es instalar composer (de nuevo, esto significa descargarlo en tu proyecto)

$ curl -sS https://getcomposer.org/installer | php

Puedes instalar composer a un directorio especifico usando la opcion “–install-dir” y proveyendo un directorio objetivo (éste puede ser un path relativo o absoluto)

$ curl -sS https://getcomposer.org/installer | php — –install-dir=bin

Globalmente:
Tu puedes poner este archivo en donde tu desees, si tu lo pones en tu PATH, puedes accederlo globalmente. En sistemas unix incluso tu puedes ejecutarlo e invocarlo sin php.

Puedes correr estos comandos para acceder fácilmente a composer desde cualquier parte de tu sistema

$ curl -sS https://getcomposer.org/installer | php
$ mv composer.phar /usr/local/bin/composer

Nota: Si lo de arriba falla debido a persmisos, corre la linea MV otra vez con sudo.

Después, solo corre “composer” en orden para correr Composer en lugar de “php composer.phar”

 

Fuente: Pagina Oficial

@gnzandrs

Tema WordPress con Skeleton

html5boilerplate

Sin duda alguna el uso de Html5 en la web ya no es una cosa de juegos, ni mucho menos un “lujo”, es algo esencial en una web que esta enfocada al web 2.0 y más aún si esta dirigida a darle al usuario una navegación cómoda.

Seguramente muchos utilizamos para tareas de blogging el CMS WordPress, por su seguridad, comodidad y por esas personas que están dedicadas día a día a hacerlo aun mejor. Claro que surge la necesidad en muchos de adaptarlo a los estándares HTML5 y mejor aun si es posible a una sólida estructura que un FrameWork Frontend nos puede brindar.

En este caso les dejare el código para mezclar la potencialidad de:

WordPress + Html5 + Skeleton
 

wordpresyskeleton

 

Siendo Skeleton el Framework Frontend Html5 que utilizaremos en este código. Antes quisiera dejar en claro que esto no es llegar poner imágenes y subir, sino que por el contrario esta enfocado a ser una herramienta “boilerplate” para el desarrollador. Como es lógico también necesitara de su mano para adaptarlo a las necesidades de cada uno 😉

Partamos explicando lo básico de un skin en wordpress y finalmente podrán ver el código con la implementación de Skeleton.

Estructura de archivos para un tema wordpress

Cuando creamos un tema WordPress debemos tener los siguientes archivos:

style.css : Corresponde a la hoja de estilos que estamos aplicando al tema.

header.php : El encabezado de nuestra plantilla.

index.php : Cuerpo principal de la plantilla.

single.php : Utilizado para leer un articulo en particular.

footer.php : Pie de pagina de la plantilla.

archive.php : Se lanza cuando realizamos una búsqueda por algún criterio de articulo o autor en la web, muestra pre visualizaciones de los post.

page.php : Similar a single.php.

sidebar.php : Barra lateral.

functions.php : Funciones necesarias para el tema y el correcto funcionamiento de éste.

Si deseas profundizar en estos temas, pueden hacerlo en la siguiente dirección que les recomiendo.

Como crear un tema para WordPress

Ahora que conocemos la estructura básica de un tema, solo faltaría integrar ésta arquitectura con la de Skeleton, lo que puedes descargar y observar acá:

Descargar
 

pd: Son bienvenidas las correcciones y/o mejoras que puedan irse agregando en el Repositorio GitHub.

Saludos.

Bordes Redondeados en Formularios con Internet Explorer

Como todo desarrollador debe haber experimentado en programación web tenemos un Nemesis bien definido, que lleva el nombre de Internet Explorer.. siendo que este villano a la hora de realizar efectos CSS simples que nos permiten un diseño de una mayor categoría nos presenta problemas de compatibilidad, aunque con las nuevas tecnologías y bondades que ofrece CSS3 y HTML5 se pueden realizar maravillas al vernos en la necesidad de utilizar una versión anterior a la de Internet Explorer como puede ser la 6 o 7 entramos en los conflictos para realizar este tipo de sutilezas como por ejemplo el famoso Borde Redondeado de los Input en un documento HTML lo que en CSS3 lo logramos en menos de dos palabras escritas..

Claro que buscamos formas siempre tendremos la mano de ayuda que nace de la creatividad de aquellos que se han encontrado en el mismo problema, lo que nos puede sacar de un apuro y muchas veces dar a volar nuestra imaginacion.

Entre las alternativas que tenemos para solucionar esto tenemos multiples como las siguientes:

Alternativa 1 – Utilizar una libreria JavaScript que nos permita emular el efecto de redondeado en versión inferiores.

Alternativa 2- Utilizar imágenes de fondo como redondeado.

Como siempre, debo decir que la opción que tomes debe ser especifica para el caso que tengas, osea la mas adecuada para la situación en que te encuentres.

Alternativa 1

Existen varias librerías javascript que nos permiten realizar este tipo de efectos en navegadores que no son compatibles con CSS3, pero el problema radica que algunas de estas librerías solo funcionan en algunos navegadores puntuales, vale decir tal vez en Internet Explorer 6, pero no 7 y 8. Me encontré con esta librería que es capaz de funcionar bajo IE 6,7 y 8 😉

CSS Pie permite:

border-radius
box-shadow
border-image
multiple background
linear-gradient

Para instalarlo, basta con bajarse el fichero PIE.htc, y ponerlo en alguna carpeta de nuestra web. Y para aplicar el estilo mediante CSS.

Alternativa 2

1. Primero empezaremos por definir el ancho de nuestro input, lo recomendable es que se realice por CSS pues de esta manera puedes tener un control mayor sobre el input y de manera mas global en caso de que desees aplicar lo mismo a otros input y así evitar la redundancia de código.

2. Necesitaremos de nuestro amigo photoshop (con licencia original OBVIO) o algún programa de edición de fotografía similar como gimp, una vez dentro creamos una imagen que se ajuste como fondo a las proporciones del ancho de nuestro input.. permiteme ilustrarte la idea.

Me comprendes mendez? de esta manera, daremos el efecto de que el input esta redondeado, pero solamente hemos añadido una imagen por detrás de este de el mismo color que el campo, que nos permite confundir al ojo y hacerle pensar que los bordes están redondeados.

Y el resto es historia, ahora solamente en css debemos asignarle esta imagen como imagen de fondo, y asignarle al input la clase que hemos desarrollado en css!

Y voilá! bordes redondeados en este navegador de mierda 😀

Niveles de un Programador.

¿Te ha sucedido que cuando escribes tu curriculum no determinar tu nivel de programación?

Pues bien, no eres el único, espero que estas lineas que han sido las definiciones mas me han agradado te sirva y te ayuden a poder determinarlo.

 

Nivel de Entrada:
Recién salido de la educación o de la calle; muestra habilidades de programación, pero carece de experiencia de lenguaje\negocio. Alguien que quiere gastar dinero y tiempo en entrenar/capacitarse. Muchos ingresos necesarios para esta persona.

Junior:
Posee alguna experiencia de negocio y sabe el lenguaje de programación, pero talves no en el arena en el que nos encontramos trabajando, Necesita mas experiencia y entrenamiento. Pueden trabajar en pequeños desarrollos por si mismos, pero necesitan supervision y guía.

Nivel Intermedio (Mid-Level):
Conoce la arena del negocio y tiene un buen conocimiento del lenguaje de desarrollo, puede trabajar en pequeños desarrollos sin supervision, largos desarrollos con guía y ser parte de un equipo para desarrollos extensos. Requiere revisiones de código y entrenamiento para obtener el próximo nivel.

Senior:
Alguien que conoce un amplio rango de la arena del negocio o es especialista en un area. Experto en el lenguaje. Puede trabajar en mas niveles de codigo sin supervision y requiere de una minima direccion. Puede guiar a grados menores, Interesado en fomentar el producto y las practicas así como “Hacer el Trabajo”. Usa la iniciativa.

Entonces tenemos dos grados superiores:

Líder de Equipo:
Para aquellos que quieran ramificar su actividad en la gestión y dejar atrás la cara con carbón.

Arquitecto:
Para aquellos que deseen mas libertad y control, pero todavía ser desarrolladores y\o envolverse con la dirección del producto a un nivel técnico.

Para progresar en los grados se requiere principalmente experiencia.

Entrada->Junior
Debe desarrollar pequeños paquetes para los estándares correctos. Debe ser capaz de demostrar algún conocimiento del área del negocio. Básicamente, ellos deben mostrar disposición a aprender y habilidad para aprender. Usualmente 1-2 Años.

Junior->Nivel Medio
Deben ser capaces de demostrar que ellos codificar deacuerdo a los estándares la mayoría del tiempo y pueden trabajar en largas piezas de un desarrollo. Deben mostrar buena habilidad en la arena del negocio (i.e. trabajando con clientes internos\externos). Usualmente 1-3 años, a veces por siempre.

Nivel-Medio->Senior
Este es el difícil – la persona debe mostrar dominio de el lenguaje, ser capaz de desarrollar proyectos largos, lidiar con clientes y empezar a guiar/dirigir a otros, En terminos simples, esta persona esta mostrando señaes de ser un guru, En nivel Senior es un estatus Élite.

Senior onwards
Esto tiende a ser un movimiento cooperativo de la persona y la empresa/negocio. Deben mostrar disposición a seguir adelante y hacer frente a nuevas áreas. Muchos no llegan a esto – son felices siendo un guru.

Nota: nunca mientas sobre tu nivel de experticie en un curriculum, pues créeme que lo pagaras caro, si te arrojan a los leones y no tienes las armas para defenderte, mejor se sincero y trata siempre de hacer las cosas lo mejor que puedas.

 

“La sabiduría no consiste en todo saber, sino en saber lo que se sabe y saber o que no se sabe.”
 

Fuente original AQUÍ www.zomeon.com

Plantillas Smarty

Las plantillas Smarty son un motor de templates para php, que básicamente lo que realiza es permitir que un Framework separare lo que corresponde a la capa de presentación a la capa de lógica de negocios, para alcanzar algo parecido a un modelo vista controlador aunque de una manera mas simple pero bastante decente desde mi punto de vista, aunque en aplicaciones que el nivel de complejidad es alto, no las recomendaria porque tienen algunas limitaciones en las cuales se hace mas fácil y recomendable utilizar un framework mas avanzado.

Al optar por las plantillas Smarty podemos obtener cosas muy interesantes sobre todo cuando realizamos trabajo en equipo con un diseñador, algunas de las cosas que podemos encontrar y lograr son:

  • Separar físicamente los archivos de lógica php con los archivos de interfaz en archivos de planillas con la extension TPL.
  • Obtenemos un un codigo mas legible y ordenado.
  • Nos permite una mayor escalabilidad.

 

Ademas para mayor flexibilidad las nuevas versiones de las plantillas smarty nos permite incorporar estructuras de control que nos van a facilitar mucho las cosas en algunos casos.

Como es costumbre en este blog… dejare un ejemplo basico de el uso de plantillas smartys y ademas de una pequeña WebGrafia de donde se puede obtener tutoriales mas detallados y avanzados.

Ejemplo:

Lo que se hará aquí es un típico mantenedor de personas en el que podamos realizar una inserción, listado y visualización de personas.. ademas se le agrega una fotografía la cual ira a ser almacenada en la base de datos MySql.

Lo que necesitamos:

– Servidor local que corra php (obvio!)
– Una base de datos Mysql
– Las ganas.. 😛

Veamos los ficheros y su descripción:
– configuracion.php : Un poco evidente.. pero es el archivo en donde se configuran las credenciales de acceso a la base de datos mysql.
– index.php: La pagina principal en donde se carga el menú de opciones, esto simplemente no tiene ninguna gran logica.
– buscar_persona.php: Esta pagina nos permite ingresar un patrón de búsqueda con respecto al nombre para buscar una persona que hayamos agregado.
– ingresar_persona.php: Aqui realizamos algunas comprobaciones y agregamos a una persona al sistema
– listado.php: Total de usuarios agregados al sistema y enlace a su detalle.
– persona.php: Detalle de una persona junto con un enlace a la fotografía que se almaceno en la base de datos para esta.
– ver_fotografia.php: El código que nos extrae la fotografía y muestra por pantalla.

El flujo que sigue el código seria el siguiente:
Se ejecuta el php que contiene la llamada a la plantilla (.tpl) ->Se ejecuta la plantilla tpl cargando la interfaz gráfica con la variables enviadas desde php -> Al presionar un boton (mediante form) llamamos a la pagina que referenciamos en el formulario, de ser la misma que llamo a la plantilla se ejecuta de nuevo realizando el mismo ciclo.

Resumidamente:
php -> tpl -> php -> tpl

Explicando:

index.php:
– este codigo lo que va a realizar es mostrar el menú de los componentes del sistema, así que solo cargaremos la plantilla mediante php en donde se encuentra el menu con los enlaces correspondientes. – como podemos ver en el codigo lo primero que se realiza es la importación de la libreria de Smarty la cual como se vera mas adelante se carga en todos los codigos en donde se utilicen las plantillas como es lógico, esto lo realizamos mediante la linea:

require(‘/libs/Smarty.class.php’);

Luego cargamos la plantilla “index.tpl” por medio de las siguiente cinco lineas de codigo:

$smarty = new Smarty;
$smarty->debugging = false;
$smarty->caching = false;
$smarty->cache_lifetime = 120;

$smarty->display(‘index.tpl’);

ingresar_persona.php
– en este bloque se realiza la insercion de los datos de la persona en donde incluimos rut, nombre, telefono y la foto que va a ir a la base de datos, en primer lugar tenemos la funcion “carga_imagen” que es la que nos permite codificar la imagen en base 64 para almacenarla en la base de datos, posteriormente tenemos las acciones secuenciales al pulsar el click en donde pasamos por una serie de restricciones para final mente permitir insertar el registro, y por ultimo cargamos la plantilla smarty. Secuencialmente hablando la pagina Php carga estas funciones pero no las ejecuta hasta el momento que en el tpl se produce el clic al botón y se cargue de nuevo el php.

buscar_persona.php
– buscar persona lo que realiza primero es llamar a la plantilla pasandole la variable “$tabla” sin nada, posterior al presionar el clic e ingresar algún texto de búsqueda realiza una consulta en la cual los resultados son trabajados mediante un bucle while a una estructura html que se almacena en la variable “$tabla”, de modo que esta ahora queda con codigo html que sera enviado nuevamente a la plantilla.

listado.php
– el listado hace básicamente lo mismo que buscar_persona.php con la diferencia que los trae inmediatamente sin esperar un clicc y ademas trae a todas las personas que existen en la tabla de la base de datos.

persona.php
– este código lo primero que hace es rescatar el parámetro enviado por get “$nombre = $_GET[‘nombre’];” para trae el detalle del la persona que le estemos pasando mediante el parámetro, la única diferencia con los otros es que esta consulta solo trae la información para una determinada persona y de esta forma mostrar sus detalles por pantalla mediante una tabla.

ver_fotografia.php
– finalmente tenemos a ver fotografia .php que se encarga solamente de traer la foto de la persona de una persona determinada mediante el parametro get, como vemos no carga ninguna plantilla puesto que este código solo descodifica la información que viene almacenada de la base de datos y la muestra por pantalla.


Descargar Ejemplo
 

Pagina Oficial de Smarty: www.smarty.net

@gnzandrs

Aplicacion 3 Capas ASP.NET

En esta oportunidad se construyo un prototipo de una aplicacion aspx en C#, que ilustra la forma en que se puede realizar un sistema web multicapa básico, con las denominadas capa de presentacion, negocio y acceso a datos:

DAL (Data Access Layer) : Es la capa que se comunica directamente con la capa de la Base de datos y realiza las consultas y obtiene las respuestas.
BLL (Business Logic Layer): Es la capa intermedia entre la capa de interfaz de usuario y la de peticiones a la base de datos, es en esta capa donde se aplican las reglas de negocio.
UI (User Interface): La capa de presentación para el usuario, generalmente es orientada al diseño, aquí podemos aplicar todo tipo de validaciones ya sean de aspx o javascript.

*No entrare en mucho detalle sobre estas capas pues existe bastante información en Internet, y posteriormente le dedicare un post entero a esta filosofía de programación.

La programación en capas es uno de los estándares de alto nivel utilizados para desarrollo de software, porque permite una mantenibilidad y legibilidad del código mucho mejor, ademas, en aplicación grandes el rendimiento de la aplicación es clave, sin considerar el lado de la mantención. Sin embargo en este ejemplo no se trabaja con un modelo multicapa al 100% pues no se trabajan con objetos definidos para un negocio en especifico, lo que correspondería al trabajo con entidades, pero es un modelo que puede ser utilizado incluso en aplicaciones complejas funcionando bien y de manera rapida (por lo que se lo consideraria especial para un tipo de programación extrema o XP), ademas permite la mantenibilidad del código y desaparacion básica de roles entre capa.



Instrucciones:
La magia de este código también radica en que para hacerlo funcionar solamente necesitas realizar tres cosas.
1. Escoger si lo vas a correr en sql server u oracle.
2. Ingresar a la base de datos y ejecutar el script pertinente para la creacion de la tabla ejemplo junto con la inserción de datos.
3. Abrir el proyecto (generado para vs2010) y editar el webconfig la siguiente linea : “” de manera que si lo deseamos correr en sql server lo configuramos con el parámetro “sqlserver” y de desearlo en oracle solo configuramos la palabra “oracle” 🙂

– Web.config


– Insert



Descargar Ejemplo

Envio texto entre Forms C#

En este humilde código lo desarrolle hace años cuando estaba recién manoseando C# con el pretendo ilustrar a un principiante como se manejan los textos entre las pantallas de los Form de una aplicación desarrollada con Visual Studio ademas de los mensajes de decisión, es un código muy simple y basico como se muestra en las pantallas espero les sirva de utilidad.


Descargar Ejemplo

Bloquear formulario mediante JavaScript

Si en algun momento deseamos bloquear las actividades que realiza un usuario sobre la pantalla por algún motivo, podríamos hacer algo mucho mas simple que utilizar un “loader”.

Para este ejemplo solamente se utilizara JavaScript aunque claro esta se puede desarrollar con Jquery, En el ejemplo se muestra un formulario muy simple que podria ser un registro usuario, el cual posee campos y un boton, que pueden ser los elementos del formulario que deseamos bloquear. Con el botón aceptar se bloqueara y con el enlace de mas abajo lo volvemos al estado original:

Este metodo trabaja sobre el siguiente mensaje contenido en un div:

<div id=”mensaje_mc” style=”display:none”;><font color=”red”>*Por favor espere mientras su archivo es borrado.</font></div>

Rapido, Simple, Barato.

 

 

¿Que es AJAX?

Tengo que reconocer que me costo bastante entender lo que era ajax. Para comenzar ajax es una tecnología, o mas bien un conjunto de lenguajes  no un lenguaje en sí que está compuesto principalmente por html, javascript, DOM y el objeto htttpRequest que vendria siendo un objeto DOM que el el nucleo de Ajax, siendo principalmente Javascript quien maneja la interacción entre estos.

Segun wikipedia:

Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML.

Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Document Object Model (DOM).

 

Otro punto que me gustaria dejar en claro sobretodo a un principiante es una pregunta que me surgió luego de leer un tutorial: ¿Para usar ajax es necesario mucha programacion?

La respuesta vendria siendo: Si y NO.

No: Pues la mayoria de los efectos que utilizamos en la web con ajax, estan programados o existen multiples lugares de donde se pueden descargar librerias con estos efectos y solo debemos realizar unas configuraciones en codigo para utilizarlos en nuestra web.

Si: En el caso deseásemos inventar o realizar un efecto nuevo o personalizado, obviamente deberemos meter manos, a una librería ya echa o bien empezar una desde cero.

Para la gran mayoría de personas que desea incluir efectos en la web que ya estan diseñados, existen ambientes de desarrollos sobre los cuales se puede trabajar, cabe mencionar que estos ambientes o librerías se encuentran programados o desarrollados con javascript, Estos ambientes nos proveen generalmente el “motor” o “núcleo” básico que le va a permitir a nuestros efectos u animaciones funcionar, ademas estos ambientes incluyen por su parte una serie herramientas que pueden ser gran utilidad siendo mas basicos pero no menos importantes.

Según yo, creo que cada persona debe aprender un grado de ajax que le sea comodo y cubra sus necesidades, pues.. ¿Tiene sentido aprender a contruir un computador desde las tarjetas electronicas hasta la programacion del sistema operativo si lo que deseamos finalmente es usar paint?

Entonces, para las personas que desean trabajarlo solamente para añadirle estilo a una web con efectos ya creados vamos a ver unos ejemplo y después dejare unas referencias muy útiles para una persona que desea conocer hasta las entrañas de ajax.

AJAX Básico

– Primero que todo yo voy a utilizar un servidor local para hacer pruebas que monte con xaamp, pero si lo deseáis lo puedes hacer tu hosting o espacio en la web.

– Segundo para utilizar el efecto vamos a utilizar la libreria jquery, tambien existe la mootools que tambien es buenisima. Una librería para quien esta medio perdido, como ya comente, vendria a ser un conjunto de objetos y funciones ya definidas que permiten el funcionamiento de efectos y la tecnología de ajax, pues el efecto que probaremos los utiliza para funcionar correctamente, en el fondo vendria siendo como un Framework.

Podemos descargar Jquery desde la pagina oficial que es AQUÍ

El efecto que probaremos sera thickbox que es un complemento que sirve para ver una imagen en un modal, se descarga desde AQUÍ

Primero que todo en una estructura de html, incluiremos la libreria de jquery. de la siguiente manera:

< script src="lib/jquery-1.7.2.js" type="text/javascript">< /script >

Ejemplo 1:

Vamos a probar uno de los efectos básico que la librería de Jquery trae incluido:

Explicando el código:

1. Lo primero que se realiza dentro del script es esperar que la jerarquia de objetos DOM se carge  (vale decir: botones, divs, textboxs, tags) para posteriormente realizar lo que deseamos por esa razon es la que siempre se debe incluir la siguiente estructura:

$(document).ready(function(){

// AQUI TODO LO QUE QUERAMOS HACER..

});

2. Luego le añadimo al enlace con el nombre “ocultar” el evento del clic, y dentro de esto le añadimos el comportamiento o accion que deseamos que realice al presionar clic:

$(“#ocultar”).click(function(event){

// AQUI EL COMPORTAMIENTO AL HACER CLIC

});

3. Posteriormente seleccionamos el elemento de la pagina con el nombre “capaefectos” y le aladimos la llamada el metodo “hide” y con el parametro “slow” para que sea de forma pausada:

$(“#capaefectos”).hide(“slow”);

 

Y tenemos el primer comportamiento definido, si miramos el código que sigue, es exactamente lo mismo pero para realizar el efecto inverso, osea para mostrar el contenedor o div que habremos ocultado.

Ejemplo 2:

Aquí vamos a probar a el efecto aviaslider del cual necesitaremos importar la librería nueva.

Explicando el código:

La estructura del html es la misma, como habíamos visto en el ejemplo anterior, se importa la librería de JQuery pero ademas la libreria de thickbox (thickbox.js) y la hoja de estilo de thickbox (thickbox.css):

< script type="text/javascript" src="lib/thickbox.js" >
< link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />

Posteriormente deberemos agregar el enlace que nos va a desplegar el efecto y la imagen, esto lo realizamos mediante una etiqueta < a > especificando la ruta o la imagen que nos va a mostrar al hacer clic href=”imagenes/animales.jpg” y ademas como propiedad especial que nos vincularía la etiqueta < a > con thickbox, debemos añadirle la clase css thickbox (class=”thickbox”):

< a href="imagenes/animales.jpg" title="Imagen" class="thickbox">CLIC < /a >

AJAX Avanzado.

Bien, como fue enunciado anteriormente 😛 puede resultar interesante o necesario sumerguirse en las extrañas de ajax, esto tal ves si necesitamos hacer una modificacion a una libreria determinada, agregar cosas sacarlas o si somos mas creativos y audaces crear nuestro propio efecto.

No pretendiendo reinventar la rueda, me ha resultado sumamente útil y placentero leer un tutorial tan completo como el siguiente, en el cual se explican conceptos básicos hasta técnicas mas avanzadas de como se realizan estos efectos y como manejar correctamente el DOM de la pagina para crear efectos prácticos y bellos.

Manual de AJAX www.rincondeajax.com

 

GoodLuck&Thanks.