Diferencia entre revisiones de «Prototype»
(→‎DOJO Toolkit)
 
(No se muestran 6 ediciones intermedias de 3 usuarios)
Línea 1: Línea 1:
−
{{Aplicación|nombre=Prototype|logo=prototype_js.png|descripcion=Prototype. Framework JavaScript|creador='''Sam Stephenson'''|sitio_web=[http://www.prototype.org/ www.prototype.org]}}
+
{{Otros usos|este=Prototype|Prototype (desambiguación)}}{{Ficha Software
−
'''Prototype''' es un [[framework]] escrito en [[JavaScript]] que se orienta al desarrollo sencillo y dinámico de aplicaciones [[web]]. Es una herramienta que implementa las técnicas [[AJAX]] y su potencial es aprovechado al máximo cuando se desarrolla con [[Ruby On Rails]].
+
|nombre=Prototype
 +
|familia=Framework JavaScripts
 +
|imagen=prototype_js.png
 +
|tamaño=
 +
|descripción=[[Framework]] [[JavaScript]] para el desarrollo [[Web]]
 +
|imagen2=
 +
|tamaño2=
 +
|descripción2=
 +
|creador=Sam Stephenson
 +
|desarrollador=
 +
|diseñador=
 +
|modelo de desarrollo=
 +
|lanzamiento inicial=
 +
|versiones=
 +
|última versión estable=1.6. 1 [[septiembre]] [[2009]]
 +
|género=
 +
|sistemas operativos=
 +
|idioma=
 +
|licencia=
 +
|premios=
 +
|web=http://www.prototypejs.org/
 +
}}
 +
'''Prototype'''. [[Framework]] escrito en [[JavaScript]] que se orienta al desarrollo sencillo y dinámico de aplicaciones [[Web]]. Es una herramienta que implementa las técnicas [[AJAX]] y su potencial es aprovechado al máximo cuando se desarrolla con [[Ruby On Rails]].  
  
−
==Introducción==
+
Con la Web 2.0 las técnicas de desarrollo de páginas web necesitaban dar un gran salto. Con esto en mente nació la técnica [[AJAX]], que gracias a Prototype permite el desarrollo ágil y sencillo de [[Páginas Web]], esto en relación al desarrollador, y provee al cliente una manera más rápida de acceder al servicio que solicita. Prototype es un Framework basado en JavasScript orientado a proporcionar al desarrollador de técnicas AJAX listas para ser usadas.
  
−
Con la [[Web 2.0]] las técnicas de desarrollo de páginas web necesitaban dar un gran salto. Con esto en mente nació la técnica [[AJAX]], que gracias a Prototype permite el desarrollo ágil y sencillo de [[páginas Web]], esto en relación al desarrollador, y provee al cliente una manera más rápida de acceder al servicio que solicita. Prototype es un Framework basado en JavasScript orientado a proporcionar al desarrollador de técnicas AJAX listas para ser usadas.
+
== Técnica AJAX ==
  
−
==Técnica AJAX==
+
Antes de comenzar a desarrollar Prototype, es necesario presentar el concepto AJAX, debido a que Prototype emplea AJAX.
  
−
Antes de comenzar a desarrollar Prototype, es necesario presentar el concepto AJAX, debido a que Prototype emplea AJAX.
+
AJAX proviene de '''A'''shyncronous '''J'''avaScript '''A'''nd '''X'''ML. En pocas palabras AJAX es una técnica de desarrollo Web que incorpora varias tecnologías, como son el JavaScript y [[XM]]L, consiguiendo de esta manera una forma de navegar rápida, ágil y dinámica.  
  
−
AJAX proviene de '''A'''shyncronous '''J'''avaScript '''A'''nd '''X'''ML. En pocas palabras AJAX es una técnica de desarrollo Web que incorpora varias tecnologías, como son el JavaScript y [[XM]]L, consiguiendo de esta manera una forma de navegar rápida, ágil y dinámica.
+
== AJAX funciona de la siguiente manera ==
  
−
==AJAX funciona de la siguiente manera==
+
Evento
  
−
evento
+
#Se crea y configura un objeto [[XMLHttpRequest]]
 +
#El objeto XMLHttpRequest realiza una llamada al servidor
 +
#La petición se procesa en el servidor
 +
#El servidor retorna un documento XML que contienen el resultado
 +
#El objeto XMLHttpRequest llama a la función ''callback()'' y procesa el resultado
 +
#Se actualiza el [[DOM]] ('''D'''ocument '''O'''bject '''M'''odel)de la página asociado con la petición con el resultado devuelto
  
−
# Se crea y configura un objeto [[XMLHttpRequest]]
+
=== Las características de XMLHttpRequest son ===
−
# El objeto XMLHttpRequest realiza una llamada al servidor
 
−
# La petición se procesa en el servidor
 
−
# El servidor retorna un documento XML que contienen el resultado
 
−
# El objeto XMLHttpRequest llama a la función ''callback()'' y procesa el resultado
 
−
# Se actualiza el [[DOM]] ('''D'''ocument '''O'''bject '''M'''odel)de la página asociado con la petición con el resultado devuelto
 
  
−
===Las características de XMLHttpRequest son===
+
*Comunicación [[GET]]/[[POST]]
 +
*Documentos pueden ser texto plano/xml
 +
*Trabaja en segundo plano
 +
*Número limitado de peticiones
 +
*Permite especificar un manejador para el control de cambios de estado
 +
*Manejador notifica el estado de la petición:
  
−
* Comunicación [[GET]]/[[POST]]
+
- Inicializada<br>- Iniciada<br>- En proceso de retornar la información<br>- Operación completada
−
* Documentos pueden ser texto plano/xml
 
−
* Trabaja en segundo plano
 
−
* Número limitado de peticiones
 
−
* Permite especificar un manejador para el control de cambios de estado
 
−
* Manejador notifica el estado de la petición:
 
−
-Inicializada
 
−
-Iniciada
 
−
-En proceso de retornar la información
 
−
-Operación completada
 
  
−
===El tipo de respuesta puede ser===
+
=== El tipo de respuesta puede ser ===
  
−
* Documento XML
+
*Documento XML  
−
* Texto
+
*Texto  
−
* Procesado en el cliente
+
*Procesado en el cliente  
−
* Mostrado directamente
+
*Mostrado directamente  
−
* JavaScript
+
*JavaScript  
−
* Evaluado en JavaScript mediante ‘eval()’
+
*Evaluado en JavaScript mediante ‘eval()’  
−
* [[JSON]], «JavaScript ObjectNotation»:
+
*[[JSON]], «JavaScript ObjectNotation»:  
−
* Formato ligero para el intercambio de datos
+
*Formato ligero para el intercambio de datos  
−
* Subconjunto de la notación literal de objetos de Javascript que no requiere el uso de Javascript
+
*Subconjunto de la notación literal de objetos de Javascript que no requiere el uso de Javascript
  
−
===Propiedades de [[XMLHttpRequest]]===
+
=== Propiedades de XMLHttpRequest ===
  
−
* [[onreadystatechange]]: El manejador del evento llamado en cada cambio de estado del objeto
+
*[[Onreadystatechange]]: El manejador del evento llamado en cada cambio de estado del objeto  
−
* [[readyState]]: Indica el estado del objeto o la petición
+
*[[ReadyState]]: Indica el estado del objeto o la petición  
−
* 0 = sin inicializar
+
*0 = sin inicializar  
−
* 1 = cargando
+
*1 = cargando  
−
* 2 = fin de la carga
+
*2 = fin de la carga  
−
* 3 = actualizando la información recibida
+
*3 = actualizando la información recibida  
−
* 4 = Operación completada
+
*4 = Operación completada  
−
* status: Estado [[HTTP]] devuelto por el servidor
+
*status: Estado [[HTTP]] devuelto por el servidor  
−
* Error 404 si la página no se encuentra
+
*Error 404 si la página no se encuentra  
−
* Error 200 si todo ha ido bien.
+
*Error 200 si todo ha ido bien.
  
−
===Las ventajas de AJAX son===
+
=== Las ventajas de AJAX son ===
  
−
* Mayor interactividad
+
*Mayor interactividad  
−
* Recuperación asíncrona de datos, reduciendo el tiempo de espera del usuario
+
*Recuperación asíncrona de datos, reduciendo el tiempo de espera del usuario  
−
* Facilidad de manejo del usuario
+
*Facilidad de manejo del usuario  
−
* El usuario tiene un mayor conocimiento de las aplicaciones de escritorio
+
*El usuario tiene un mayor conocimiento de las aplicaciones de escritorio  
−
* Se reduce el tamaño de la información intercambiada
+
*Se reduce el tamaño de la información intercambiada  
−
* Portabilidad entre plataformas
+
*Portabilidad entre plataformas  
−
* No requieren instalación de complementos, [[applets]] de [[Java]], ni ningún otro elemento
+
*No requieren instalación de complementos, [[Applets]] de [[Java]], ni ningún otro elemento  
−
* Código público
+
*Código público
  
−
===Las desventajas de AJAX son:===
+
=== Las desventajas de AJAX son: ===
  
−
* Usabilidad: Comportamiento del usuario ante la navegación
+
*Usabilidad: Comportamiento del usuario ante la navegación  
−
* Botón de volver atrás del navegador
+
*Botón de volver atrás del navegador  
−
* Empleo de [[iframes]] ocultos para almacenar el historial
+
*Empleo de [[Iframes]] ocultos para almacenar el historial  
−
* Empleo de fragmento identificador del [[URL]] (‘#’) y recuperación mediante JavaScript
+
*Empleo de fragmento identificador del [[URL]] (‘#’) y recuperación mediante JavaScript  
−
* Problema al agregar marcadores/favoritos en un momento determinado de la aplicación
+
*Problema al agregar marcadores/favoritos en un momento determinado de la aplicación  
−
* Problemas al imprimir páginas renderizadas dinámicamente
+
*Problemas al imprimir páginas renderizadas dinámicamente  
−
* Tiempos de respuesta entre la petición del usuario y la respuesta del servidor
+
*Tiempos de respuesta entre la petición del usuario y la respuesta del servidor  
−
* Empleo de feedback visual para indicar el estado de la petición al usuario
+
*Empleo de feedback visual para indicar el estado de la petición al usuario  
−
* Requiere que los usuarios tengan el JavaScript activado en el navegador
+
*Requiere que los usuarios tengan el JavaScript activado en el navegador  
−
* En el caso de [[Internet Explorer 6]] y anteriores, que necesita tener activado el [[ActiveX]]
+
*En el caso de [[Internet Explorer 6]] y anteriores, que necesita tener activado el [[ActiveX]]  
−
* En [[Internet Explorer 7]], se implementa como JavaScript nativo
+
*En [[Internet Explorer 7]], se implementa como JavaScript nativo  
−
* Como en [[DHTML]], debe comprobarse la compatibilidad entre navegadores y plataformas
+
*Como en [[DHTML]], debe comprobarse la compatibilidad entre navegadores y plataformas
  
−
==Prototype==
+
== Prototype ==
  
−
Prototype es un [[framework]] desarrollado en [[JavaScript]] por '''Sam Stephenson''' para el desarrollo sencillo y dinámico de páginas Web. Prototype nos simplifica gran parte del trabajo cuando se pretende desarrollar páginas altamente interactivas.
+
Prototype es un [[Framework]] desarrollado en [[JavaScript]] por '''Sam Stephenson''' para el desarrollo sencillo y dinámico de páginas Web. Prototype nos simplifica gran parte del trabajo cuando se pretende desarrollar páginas altamente interactivas.  
  
−
==Instalación==
+
== Instalación ==
  
−
Para comenzar a trabajar con Prototype es necesario obtener el framework, para ello deben dirigirse al sitio [http://www.prototypejs.org/ http://www.prototypejs.org/] y descargar '''prototype.js''' y para usarlo deben hacer lo siguiente:
+
Para comenzar a trabajar con Prototype es necesario obtener el framework, para ello deben dirigirse al sitio [http://www.prototypejs.org/ http://www.prototypejs.org/] y descargar '''prototype.js''' y para usarlo deben hacer lo siguiente:  
  
−
* Enlazar en la página con la etiqueta <script>:
+
*Enlazar en la página con la etiqueta &lt;script&gt;:
  
−
<script type="text/JavaScript" src="path/to/prototype.js"></script>
+
&lt;script type="text/JavaScript" src="path/to/prototype.js"&gt;&lt;/script&gt;
  
−
==Alternativas que emplean AJAX==
+
== Alternativas que emplean AJAX ==
  
−
'''DOJO Toolkit''' [http://dojotoolkit.org/ http://dojotoolkit.org/]
+
=== DOJO Toolkit ===
  
−
* Biblioteca JavaScript de código abierto
+
[http://dojotoolkit.org/ Sitio Oficial]  
−
* Proporciona un API para el control y manipulación de historial
 
−
* Proporciona en el lado del cliente para la manipulación de [[URL]] y marcadores/ favoritos
 
−
* [[Widgets]]
 
−
* Ordenar tablas
 
−
* Validación de formularios
 
−
* Menús y barras de menús
 
−
* [[Google]] y [[Yahoo]]! Maps
 
  
−
'''XAJAX''' [http://www.xajaxproject.org/ http://www.xajaxproject.org/]
+
*Biblioteca JavaScript de código abierto
 +
*Proporciona un API para el control y manipulación de historial
 +
*Proporciona en el lado del cliente para la manipulación de [[URL]] y marcadores/ favoritos
 +
*[[Widgets]]
 +
*Ordenar tablas
 +
*Validación de formularios
 +
*Menús y barras de menús
 +
*[[Google]] y [[Yahoo!|Yahoo]]! Maps
  
−
* Es una biblioteca [[PHP]] de código abierto
+
=== XAJAX ===
−
* Abundante documentación
 
−
* Fácil de utilizar:
 
−
* No requiere gran conocimiento de JavaScript
 
−
* Sencillo de emplear:
 
−
* Incluir biblioteca en página PHP
 
−
* Instanciar el objeto ‘xajax’
 
−
* Implementación de nuevas funciones en PHP
 
  
−
'''XOAD''' [http://www.xoad.org/ http://www.xoad.org/]
+
[http://www.xajaxproject.org/ Sitio Oficial]  
  
−
* Biblioteca orientada a objetos basada en PHP
+
*Es una biblioteca [[PHP]] de código abierto
−
* Documentación de las clases y tutoriales sencillos
+
*Abundante documentación
−
* Emplea [[JSON]] y objetos [[PHP]] para la comunicación
+
*Fácil de utilizar:
−
* Soporta eventos del lado del cliente y del servidor
+
*No requiere gran conocimiento de JavaScript
 +
*Sencillo de emplear:
 +
*Incluir biblioteca en página PHP  
 +
*Instanciar el objeto ‘xajax’
 +
*Implementación de nuevas funciones en PHP
  
−
==Enlaces externos==
+
=== XOAD ===
  
−
* [http://www.prototypejs.org/ http://www.prototypejs.org/]
+
[http://www.xoad.org/ Sitio Oficial]  
−
* [http://prototype.conio.net http://prototype.conio.net]
 
−
* [http://script.aculo.us http://script.aculo.us]
 
−
* [http://www.ajaxian.com http://www.ajaxian.com]
 
−
* [http://www.json.org http://www.json.org]
 
−
* [http://ajaxload.info http://ajaxload.info]
 
−
* [http://www.ajaxhispano.com/ http://www.ajaxhispano.com/]
 
  
−
[[Category:Ciencias_informáticas]]
+
*Biblioteca orientada a objetos basada en PHP
 +
*Documentación de las clases y tutoriales sencillos
 +
*Emplea [[JSON]] y objetos [[PHP]] para la comunicación
 +
*Soporta eventos del lado del cliente y del servidor
 +
 
 +
== Véase también ==
 +
 
 +
*[[Django]] Framework para Desarrollo Web.
 +
*[[Dojo]] Framework JavaScript.
 +
*[[Mootools]] Framework JavaScript.
 +
*[[JQuery]] Framework JavaScript
 +
 
 +
== Enlaces externos ==
 +
 
 +
*[http://www.prototypejs.org/ Prototypejs]
 +
*[http://prototype.conio.net Prototype]
 +
*[http://script.aculo.us Script]
 +
*[http://www.ajaxian.com Ajaxian]
 +
*[http://www.json.org Json]
 +
*[http://ajaxload.info Ajaxload]
 +
*[http://www.ajaxhispano.com/ Ajaxhispano]
 +
 
 +
[[Category:Programación]] [[Category:Desarrollo_web]]

última versión al 07:43 17 may 2012

Este artículo trata sobre Prototype. Para otros usos de este término, véase Prototype (desambiguación).
Prototype
Información sobre la plantilla
Parte de la familia Framework JavaScripts
Prototype js.png
Framework JavaScript para el desarrollo Web
CreadorSam Stephenson
Última versión estable1.6. 1 septiembre 2009
Sitio web
http://www.prototypejs.org/

Prototype. Framework escrito en JavaScript que se orienta al desarrollo sencillo y dinámico de aplicaciones Web. Es una herramienta que implementa las técnicas AJAX y su potencial es aprovechado al máximo cuando se desarrolla con Ruby On Rails.

Con la Web 2.0 las técnicas de desarrollo de páginas web necesitaban dar un gran salto. Con esto en mente nació la técnica AJAX, que gracias a Prototype permite el desarrollo ágil y sencillo de Páginas Web, esto en relación al desarrollador, y provee al cliente una manera más rápida de acceder al servicio que solicita. Prototype es un Framework basado en JavasScript orientado a proporcionar al desarrollador de técnicas AJAX listas para ser usadas.

Técnica AJAX

Antes de comenzar a desarrollar Prototype, es necesario presentar el concepto AJAX, debido a que Prototype emplea AJAX.

AJAX proviene de Ashyncronous JavaScript And XML. En pocas palabras AJAX es una técnica de desarrollo Web que incorpora varias tecnologías, como son el JavaScript y XML, consiguiendo de esta manera una forma de navegar rápida, ágil y dinámica.

AJAX funciona de la siguiente manera

Evento

  1. Se crea y configura un objeto XMLHttpRequest
  2. El objeto XMLHttpRequest realiza una llamada al servidor
  3. La petición se procesa en el servidor
  4. El servidor retorna un documento XML que contienen el resultado
  5. El objeto XMLHttpRequest llama a la función callback() y procesa el resultado
  6. Se actualiza el DOM (Document Object Model)de la página asociado con la petición con el resultado devuelto

Las características de XMLHttpRequest son

  • Comunicación GET/POST
  • Documentos pueden ser texto plano/xml
  • Trabaja en segundo plano
  • Número limitado de peticiones
  • Permite especificar un manejador para el control de cambios de estado
  • Manejador notifica el estado de la petición:

- Inicializada
- Iniciada
- En proceso de retornar la información
- Operación completada

El tipo de respuesta puede ser

  • Documento XML
  • Texto
  • Procesado en el cliente
  • Mostrado directamente
  • JavaScript
  • Evaluado en JavaScript mediante ‘eval()’
  • JSON, «JavaScript ObjectNotation»:
  • Formato ligero para el intercambio de datos
  • Subconjunto de la notación literal de objetos de Javascript que no requiere el uso de Javascript

Propiedades de XMLHttpRequest

  • Onreadystatechange: El manejador del evento llamado en cada cambio de estado del objeto
  • ReadyState: Indica el estado del objeto o la petición
  • 0 = sin inicializar
  • 1 = cargando
  • 2 = fin de la carga
  • 3 = actualizando la información recibida
  • 4 = Operación completada
  • status: Estado HTTP devuelto por el servidor
  • Error 404 si la página no se encuentra
  • Error 200 si todo ha ido bien.

Las ventajas de AJAX son

  • Mayor interactividad
  • Recuperación asíncrona de datos, reduciendo el tiempo de espera del usuario
  • Facilidad de manejo del usuario
  • El usuario tiene un mayor conocimiento de las aplicaciones de escritorio
  • Se reduce el tamaño de la información intercambiada
  • Portabilidad entre plataformas
  • No requieren instalación de complementos, Applets de Java, ni ningún otro elemento
  • Código público

Las desventajas de AJAX son:

  • Usabilidad: Comportamiento del usuario ante la navegación
  • Botón de volver atrás del navegador
  • Empleo de Iframes ocultos para almacenar el historial
  • Empleo de fragmento identificador del URL (‘#’) y recuperación mediante JavaScript
  • Problema al agregar marcadores/favoritos en un momento determinado de la aplicación
  • Problemas al imprimir páginas renderizadas dinámicamente
  • Tiempos de respuesta entre la petición del usuario y la respuesta del servidor
  • Empleo de feedback visual para indicar el estado de la petición al usuario
  • Requiere que los usuarios tengan el JavaScript activado en el navegador
  • En el caso de Internet Explorer 6 y anteriores, que necesita tener activado el ActiveX
  • En Internet Explorer 7, se implementa como JavaScript nativo
  • Como en DHTML, debe comprobarse la compatibilidad entre navegadores y plataformas

Prototype

Prototype es un Framework desarrollado en JavaScript por Sam Stephenson para el desarrollo sencillo y dinámico de páginas Web. Prototype nos simplifica gran parte del trabajo cuando se pretende desarrollar páginas altamente interactivas.

Instalación

Para comenzar a trabajar con Prototype es necesario obtener el framework, para ello deben dirigirse al sitio http://www.prototypejs.org/ y descargar prototype.js y para usarlo deben hacer lo siguiente:

  • Enlazar en la página con la etiqueta <script>:

<script type="text/JavaScript" src="path/to/prototype.js"></script>

Alternativas que emplean AJAX

DOJO Toolkit

Sitio Oficial

  • Biblioteca JavaScript de código abierto
  • Proporciona un API para el control y manipulación de historial
  • Proporciona en el lado del cliente para la manipulación de URL y marcadores/ favoritos
  • Widgets
  • Ordenar tablas
  • Validación de formularios
  • Menús y barras de menús
  • Google y Yahoo! Maps

XAJAX

Sitio Oficial

  • Es una biblioteca PHP de código abierto
  • Abundante documentación
  • Fácil de utilizar:
  • No requiere gran conocimiento de JavaScript
  • Sencillo de emplear:
  • Incluir biblioteca en página PHP
  • Instanciar el objeto ‘xajax’
  • Implementación de nuevas funciones en PHP

XOAD

Sitio Oficial

  • Biblioteca orientada a objetos basada en PHP
  • Documentación de las clases y tutoriales sencillos
  • Emplea JSON y objetos PHP para la comunicación
  • Soporta eventos del lado del cliente y del servidor

Véase también

  • Django Framework para Desarrollo Web.
  • Dojo Framework JavaScript.
  • Mootools Framework JavaScript.
  • JQuery Framework JavaScript

Enlaces externos

Obtenido de «https://www.ecured.cu/index.php?title=Prototype&oldid=1515742»