Archive

Archive for the ‘JavaScript’ Category

Animaciones 3D con Three JS y Oracle JET

En el día de hoy me gustaría enseñaros la librería JavaScript ThreeJS.

¿Qué es ThreeJS?

Three.js permite la creación de animaciones 3D aceleradas por GPU utilizando el lenguaje JavaScript, como parte de un sitio web, sin depender de herramientas adicionales. Esto es posible gracias a la llegada de WebGL.

Las bibliotecas de alto nivel como Three.js o GLGE, SceneJS, PhiloGL (o una serie de otras bibliotecas) hacen posible la creación, y posterior muestra en el navegador, de complejas animaciones en 3D sin el esfuerzo de tener que realizar una aplicación independiente o un plugin.

Véase: https://en.wikipedia.org/wiki/Three.js

El objetivo

El objetivo de este post es desarrollar una aplicación capaz de generar una matriz, y que además, la aplicación pueda moverse por ella después de haber utilizado el giroscopio del dispositivo.

El desarrollo

Antes de empezar debemos identificar o crear el contenedor donde se creará el canvas en el que se visualizará nuestra animación 3D. En este caso utilizaremos el div “pageContent”, este div lo hemos creado en el index.html donde se visualizarán los distintos módulos de la aplicación; por defecto viene creado en el template “navdrawer”.

var container = document.getElementById( ‘pageContent’ );

El siguiente paso será crear la cámara. Este objeto pretende imitar la forma en que el ojo humano ve. Es el modo de proyección más común utilizado para la representación de una escena 3D.

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);

Para la representación de la cámara necesitamos 4 parámetros:

fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.

Leer más…

Categorías:JavaScript Etiquetas: , , ,

Oracle JET y la realidad aumentada

Hoy me gustaría enseñaros como una aplicación híbrida realizada con Oracle JET (Framework JS) puede ser tan potente como deseemos sin tener que realizar un desarrollo nativo. Y, además, para apoyar esta demostración me serviré de la realidad aumentada.

jetOracle JET está dirigido a desarrolladores JavaScript que trabajan en aplicaciones en el lado del cliente, y es una colección de librerías JavaScript de código abierto que junto a las librerias propias de Oracle permiten crear aplicaciones que se consumen e interactúan simple y eficientemente con otros productos Oracle.

Más información en este otro post introductorio a Oracle JET.

1
La realidad aumentada consiste en combinar el mundo real con el virtual mediante un proceso informático, enriqueciendo la experiencia visual y mejorando la calidad de comunicación.
Gracias a esta tecnología se puede añadir información visual a la realidad y crear todo tipo de experiencias interactivas.

 

El Desarrollo:

Hemos elegido JET como Framework de desarrollo de aplicaciones de movilidad por su agilidad a la hora de desarrollar y por la facilidad al acoplar plugins cordova.

Para el desarrollo de la realidad aumentada nos basaremos en un plugin cordova, mediante el cual podremos comunicarnos con lenguaje JavaScript y de esta forma explotar las apis del dispositivo.

Paso a paso:

Gracias a Yeoman podemos agilizar el desarrollo de aplicaciones JET, ya que nos genera un esqueleto básico de la aplicación.

Para ello ejecutaremos el comando:

yo oraclejet:hybrid <<NombreDelProyecto>> –platforms=<<ANDROID,IOS…>>

yo oraclejet:hybrid augmentedReality –platforms=Android

Leer más…

Categorías:JavaScript Etiquetas: , ,

Introducción a Oracle JET (Oracle JavaScript Extension Toolkit)

El pasado viernes fue un día cargado de nuevas releases de productos (ver post acerca de la nueva versión de Oracle ADF) y como no podía ser menos, vamos a ver Oracle JavaScript Extension Toolkit, más conocido como Oracle JET, el nuevo Framework JavaScript que ha liberado Oracle.

 

jet

 

Oracle JET está dirigido a desarrolladores JavaScript que trabajan en aplicaciones en el lado del cliente, y es una colección de librerias JavaScript de código abierto que junto a unas librerias propias de Oracle hacen que crear aplicaciones que se consumen e interactúan con otros productos Oracle sea muy simple y eficiente.

 

Oracle JET es un framework para desarrollar aplicaciones basado en una serie de librerías Open Source:

 

1

 

  • JQuery

Es una libreria JavaScript que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM y manejar eventos entre otras características.

  • JQuery UI

Es una librería de componentes construidos utilizando JQuery, nos proviene de diferentes Widgets y nos permite fácilmente interactuar con los componentes (redimensionar, arrastras y soltar, etc) y añadir transiciones y efectos.

  • Knockout

Es una librería JavaScript que permite crear interfaces de usuario responsive utilizando el patrón Model-View-ViewModel (MVVM).

  • RequireJS

Es una librería JavaScript que nos permite separar en módulos los componentes de nuestra aplicación y resolver las dependencias de estos mismos.

  • Hammer

Es una librería que añade el soporte de gestos táctiles en tablets o móviles y de eventos del ratón en aplicaciones web.

 

Oracle JET tiene una arquitectura MVVM (Model-View-ViewModel).

En una arquitectura MVVM, el modelo representa los datos de la aplicación, la View es la presentación de los datos y el ViewModel expone datos del modelo a la vista y mantiene el estado de la aplicación.

2

El Oracle JET Common Model y la Collection API implementan la capa de modelo. Esta API incluye los siguientes objetos JavaScript:

  • oj.Model: Representa un solo registro de datos de un servicio de datos como puede ser un servicio RESTful.
  • oj.Collection: Representa un conjunto de registros de datos y es una lista de objetos oj.model del mismo tipo.
  • oj.Events: Ofrece métodos para manejar eventos.
  • oj.KnockoutUtils: Contiene metodos para mapear atributos de un objeto oj.Model o un objeto oj.Collection con los objetos Knokout para que puedan ser utilizados por los modelos de los objetos.

 

Para implementar la capa View, OracleJET ofrece una colección de componentes encapsulados como widgets de JQuery UI, desde unos simples botones hasta componentes de visualización avanzados como gráficas.

Por último, Knockout.js implementa la capa ViewModel y ofrece la asociación de datos bidireccional entre las capas Model y View.

 

Aparte, Oracle JET entre otras muchas, características como éstas:

  • Un framework de validación que ofrece validación a nivel de componente y conversión de datos.
  • Una cache en la capa Model para optimizar el rendimiento de la paginación.
  • Conexión a orígenes de datos a través de servicios web como por ejemplo REST o WebSocket.
  • Autorización a través de OAuth 2.0 para modelos de datos obtenidos a través de servicios REST.

Leer más…

Integración del calendario JS Calendar2 v1.8 en una aplicación web

julio 22, 2010 1 comentario

Después del post que publiqué sobre cómo integrar el editor HTML CKEditor, he considerado interesante publicar este nuevo post tratando la integración de otra aplicación Javascript muy potente y usable: el calendario JSCalendar2.

Al igual que el CKEditor, estoy seguro que muchos de vosotros también conoceréis el JSCal y lo habréis integrado alguna vez en una aplicación web.

A continuación veréis los pasos para realizar una integración básica del calendario:

1. Lo primero es descargarse el zip de la web oficial: http://www.dynarch.com/projects/calendar/download/1.8/JSCal2-1.8.zip

2. Luego descomprimimos la carpeta JSCal2-1.8 directamente en la raíz de nuestro servidor web y le cambiamos el nombre a JSCal2.

3. Seguidamente creamos un HTML con las siguientes líneas de código:

Categorías:JavaScript Etiquetas: ,

Integrar el editor HTML CKEditor en tu desarrollo web

junio 10, 2010 2 comentarios

¿Habéis tenido alguna vez la necesidad de integrar un editor HTML estándar en un desarrollo web?

En este post comentaremos la posibilidad de integrar el grandísimo y novedoso CKEditor que algunos de vosotros ya conocéis. Este editor es un componente open source que genera HTML 1.1 estándar desarrollado por CKSource.

A continuación os detallo como integrar el CKEditor paso a paso:

  1. Descargar el zip de la última versión desde la web oficial.
    http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.2.1/ckeditor_3.2.1.zip
  2. Una vez descargado lo descomprimís de manera que todos los archivos queden en la carpeta ckeditor o como la queráis llamar directamente en la raíz de vuestro servidor web
  3. Luego hay que añadir dentro del head de la web la llamada al js.
    <script type=”text/javascript” src=”/ckeditor_3.2.1/ckeditor.js”>
    </script>
  4. Después hay varios métodos para cargar el editor, el más común para aplicaciones sin AJAX sería reemplazando un text area.
    <textarea cols=”80″ id=”editor1″ name=”editor1″ rows=”10″>
    </textarea>
    <script type=”text/javascript”>
    CKEDITOR.replace (“editor1”);
    </script>

Y ya lo tendríamos integrado!!!! Fácil ¿no?. Os dejo un pantallazo del resultado de la integración del editor.

También aprovecho para decir que el zip del CKEditor también incluye otros ejemplos y métodos, así como varios skins visuales y funciones para la integración del plugin en aplicaciones AJAX. Además, en la web del editor encontraréis la documentación y ayuda sobre todas las clases, funciones, triggers, métodos y propiedades del plugin.

Categorías:JavaScript Etiquetas: ,