Prototype Introduccion

Prototype Capitulo 02 – Introduccion a Prototype

Prototype es una libreria Javascript que esta Orientada a Objetos,
fue escrita por Sam Stephenson. Este bien pensado y excrito trozo de codigo
es compatible con los estandares web, muy enriquesida para la creacion de paginas web interactivas
lo que caracterizan a las Web 2.0.

Si han echado un vistazo al framework Ruby On Rails, se daran cuenta que ya lo tiene incorporado
la razon es sencilla, Prototype esta influenciado directamente
bajo las exigencias de Ruby On Rails.

Prototype soporta multiples navegadores como :
– Mozilla Firefox 1.5+
– Internet Explorer 6.0+ (en extincion)
– Apple Safari 1.0+
– Opera 9+

En esta introduccion ya vamos entrando un poco en la practica, porque yo se que la teoria
a veces aburre un poco, pero siempre es buena para solucionar inquietudes y poder entender
con que fin estamos haciendo algo.

Funciones de Utilidad

Usando la Funcion $()

Una funcion de mucha utilidad y que siempre vas a usar es la Funcion $()
esta funcion es un atajo si se podria decir para el frecuentemente utilizado



document.getElementById('id')

esto es una funcion DOM(Document Object Model) mas adelante explicare que es esto.
Pero el $() va mas halla de la funcion DOM. El Objeto devuelto por este tendra un incremento
de metodos extra para simplificar muchas tareas,como por ejemplo saber su tamaño, mostrar y ocultar el elemento
desplazarlo, etc.

Por otra parte usted podra acceder a los metodos del Objeto de acuerdo al tipo de Elemento que es:

– Element.Methods
– Form.Methods
– Form.Element.Methods

Voy a escribir un ejemplo de los metodos mas usados por mi:

Etiquetas :



<etiqueta id="id">
Contenido...
</etiqueta>

$('id').innerHTML
//-$gt; Contenido...

$('id').hide()
//Oculta el contenido de la etiqueta

//tambien lo puedes hacer en la forma
//multiple, con mas etiquetas

$('id1', 'id2', 'id3').invoke('hide');

//tambien puedes hacer mas optimo el codigo
//al llamar a varios metodos en una sola linea

$('id').update('Cambiando Contenido')
.addClassName('clase')
.show();

//Primero Actualizamos el Contenido del Div.
//Agregamos una clase CSS.
//Lo Mostramos

Formulario



$('frm').serialize()
//hace la serializacion de Elementos del formulario
//para pasarlo como parametros

Elementos de Formulario



$('TextBox').value
//return texto

$('TextBox').focus()
// se enfoca en el elemento del formulario

Ajax : Introducción y Ejemplos

Prototype Capitulo 01 – Introducción a Ajax

Hola a todos, estoy realizando un primer curso en mi blog, y creí que seria un buen tema la del framework prototype (Javascript, Ajax).
En esta intro les escribiré sobre una introducción a Ajax.
página web

Ajax ¿Para que sirve?

Ajax en una propuesta para paginas web que quieran mejorar su interfaz y su usabilidad.
Ocultando interacciones que el usuario final realiza con el servidor (consultas a BD, inserts, updates, etc) para solamente
mostrar las actualizaciones en una parte especifica de la pagina y así agilizar la pagina web ( no esperar largas demoras al actualizarse una pagina ).

Ajax y las Aplicaciones de Escritorio

Si bien una aplicación de escritorio es mucho mas veloz que una en web por su rápida respuesta.
Ajax le da la solución a las aplicaciones Web, ya que con esto agilizaran su respuesta y tendrán las mismas ventajas que tienen las aplicaciones Windows, podrán hacer las mismas acciones y eventos , con una interfaz mucho mas amigable.

Significado

Ajax es simplemente Javascript y XML asincronos (Asynchronous Javascript And XML)

Es solamente otra moda pasajera?

Si bien Microsoft, Google, Amazon, Yahoo, entre otros están totalmente en desacuerdo, pienso que tienen que saber usar Ajax en una aplicación Web.

Ejemplo:

En un proyecto de Tienda virtual el frontend no debería tener mucho de Ajax ya que sus usuarios mas comunes no tendrían por que saber de configuracion de su browser , esto implica la habilitacion del Javascript y si soporta Ajax, Un Ejemplo de aprovechamiento del Ajax seria en el backend de la Tienda Virtual ya que sus Empleados de actualizacion de productos y Pedidos, ya que su lugar de operaciones sera un ambiente apropiado y podrá estar previamente configurado para ejecutar Aplicaciones con Ajax.
En Resumen no deben usar Ajas para impresionar a sus usuarios finales con efectos maravillosos, validaciones con alertas muy llamativas y cosas así.

Google Maps, un Ejemplo claro

Es un muy buen ejemplo de carga de gráficos asincronamente (lo que se dice detrás de la pantalla)
en esta aplicación las imágenes se cargan en un principio y al arrastrar se cargan las del fondo,
es por eso que nos da la impresión de ser un mapa

Como se hace ?

Para simplificar Ajax lo veremos de esta forma

-Solicitud y Respuesta

Esto es una forma en que interactúa el navegador con el servidor, cuando el usuario esta viendo
la pagina web, el navegador utiliza el conocido XMLHttpRequest (XHR), esto hace que diferentes áreas
de la pagina web carguen de manera asíncrona, permitiendo navegar tranquilamente al usuario mientras carga
la pagina completamente (Las partes que se están cargando tienen Callbacks, lo que permite dar
avisos de estados de carga de la pagina)

Como empezar

Primero:

como has echo para implementar Ajax en tus sitios web (si lo has echo)?

si les gusta reinventar la rueda pues están sin resolver el problema o creen que seria un mejor trabajo,
la mayoría de desarrolladores utilizan librerías ya escritas con un buen performance en producción
La elección se basa en el Lenguaje de programación usado del lado del Servidor
Los mas populares son:

DWR(Java), Prototype (PHP),Ajax.net (.NET), entre otros.

Estas librerías hacen que la implementación de Ajax sea muy divertida al momento de programar, también
tienen un buen soporte así como actualizaciones permanentes, estas herramientas nos hacen la vida mas fácil al momento de desarrollar los proyectos.

Espero que les aya gustado esta pequeña introducción pero buena en contenido.
Los capítulos saldrán una vez por semana, el próximo tratara sobre una introducción al framework prototype.