Software – eXelearning

Publicado el 10 septiembre, 2014 por Sergio

Introducción a Exelearning

eXeLearning

eXeLearning

Exelearning es básicamente un programa gratuito diseñado para crear actividades educativas, las cuales pueden ser publicadas en formato HTML sin la necesidad de  conocer código HTML o aplicaciones complicada para publicar en la WEB.

 

 

La internet tiene muchos beneficios, entre ellos está ser una herramienta educativa de la cual todos podemos aprender gracias a sus contenidos y crear conversaciones gracias a la interacción que este no brinda. Pero esta gran capacidad de aprendizaje no estaba siendo utilizado por la mayoría de profesores o docentes los cuales tienen los conocimientos pero no ha habilidad de construir sus propios sitios web, así que recurrirían a desarrolladores web para crear contenido online, así pues eXelerning fue creado para superar estas limitaciones:

  1. Los profesores o académicos tienen dificultades al adoptar nuevas tecnologías, sobre todo cuando los programas de diseño web tienen una curva de aprendizaje larga y no son intuitivos o enfocados al aprendizaje. eXelearning es intuitivo y de fácil uso lo cual permite a los profesores publicar sitios web llenos de paginas enfocadas a la enseñanza.
  2. Exelearning es una herramienta que brinda capacidades de publicación web que pueden ser fácilmente referenciadas o importadas por los Learning Management Systems(LMS).
  3. El programa ha sido creado para funcionar Offline, no requiere conexión a internet para crear el contenido o exportarlo.
  4. El entorno de la aplicación es WYSIWYG, el usuario solo observa los resultados finales de como se vería el sitio web si estuviera publicado.
Dreamweaver - Adobe

Dreamweaver – Adobe

A primera vista alguien que se dedica a crear páginas web o sabe código HTML pensaría en Dreamweaver como respuesta a sitios web educativos, pero al hacer esto no está pensando en los profesores los cuales consideran aprender ese software como algo molesto o consumidor de tiempo. La herramienta eXelearning ha identificado muchos de los elementos úsalos en la enseñanza y los presenta de una forma simple y de fácil uso, dentro del programa de las llama «iDevices», con los cuales se crean los contenidos estructurados de las páginas web que se usen para dar el curso. eXe también da asistencia en forma de «Tips de pedagogía» los cuales pueden ayudar al autor a realizar mejores decisiones sobre cuando  y como usar los iDevices para enseñar.

El programa eXe es muy flexible al momento de crear la estructura de los contenidos y se adapta a las necesidades del usuario, pueden ser fácilmente editados o actualizados luego de haber sido publicados, y hace uso de un editor de texto el cual permite la edición y formato del mismo.

Instalación

Este es un software gratuito que requiere instalación, en la página web www.exelearning.org podemos descargarlo en versiones para Windows, MAC y Linux. Inclusive si no queremos instalarlo en la PC este puede ser instalado en algún dispositivo portátil y ser ejecutado desde ahí si no se lo desea instalar en la PC o deseamos editar en otra PC que no sea la nuestra.

El proceso de instalación es sumamente fácil tanto en Windows como en MAC, en Windows solo debemos presionar «NEXT» hasta que se haya termina la instalación mientras que en MAC solo se debe arrastrar la aplicación a la carpeta de aplicaciones.

Layout

El Layout de eXelearning es el mismo independiente el OS en el que haya sido instalado, eso mantiene la consistencia en el programa para que si una persona ha usado la versión MAC no tenga problemas al usar el mismo software en otro OS.

Pantalla eXeLearning

Pantalla eXeLearning

Outline Pane

Outline Pane

 

Mas allá del menú que viene con 4 opciones: «File, Tools, Styles, Help» eXelearnig tiene 2 áreas de trabajo principales, a la izquierda veremos herramientas que los usuarios pueden usar para crear y organizar contenido a la derecha vemos la vista previa de los contenidos agregados y es donde se editan los contenidos. En la derecha vemos que esta «Outline Pane» donde podemos fijar la estructura del proyecto muy útil si creamos proyectos largos o complejos que estén separados en partes o temas.

iDevice

iDevice

Justo debajo de Outline Pane se encuentra el panel de «iDevice» (instructional device) es cual es una colección de elementos estructurales que ayudaran a describir que tipo de contenido tendrán las hojas del archivo, basta con dar un click y en el área derecha veremos aparecer cuadros de texto para agregar contenidos, aunque los elementos tienen nombres descriptivos le tomara un poco de practica al usuario saber las funciones de cada uno, pero es un tiempo mínimo comparado a otros programas de autoría web, es posible que no las use todas en cada curso creado, pero conocerlos todos ayuda a dar variedad al contenido del curso.

Exportar

Una vez que tenemos nuestro contenido en eXelearning completo lo guardamos y este se convierte en el archivo editable en el cual podemos hacer correcciones y cambios, pero si se desea subir el trabajo a la internet para que lo accedan los estudiantes debemos crear un archivo HTML, esa opción esta dentro de Archivo>Exportar, para el caso de crear páginas web seleccionamos esa opción y luego «Carpeta Auto contenida», con esto le estamos diciendo a eXelearning que deseamos una carpeta que contenga todos los archivos HTML creados a partir del proyecto, ninguna configuración extra es necesaria lo cual es bueno para el profesor que creó el curso pues no lo confunde con opciones que tal vez no pueda entender.

Exportar eXeLearning

Exportar eXeLearning

Las opciones de exportación son muchas, pero entre ellas hare énfasis en «SCORM 1.2″(Sharable Content Object Reference Model), este es un LMS y como tal cumple con estándares de codificación y compatibilidad con otros LMS, básicamente al exportar nuestro trabajo como un paquete «SCORM 1.2» es porque deseamos que este mismo trabajo pueda ser abierto y editado en algún otro LMS que también cumpla estos estándares, agilitando el proceso de compartir conocimientos y reduciendo tiempos pues no hay que crear el documento desde cero si se usa otro LMS.

Recursos

Una vez aprendido lo básico de eXelearning y haber creado algunos cursos nos daremos cuenta que deseamos más elementos multimedia con el fin de hacer interesantes y dinámicas las clases. eXelearning soporta archivos multimedia como:

  1. shockwave flash
  2. Quicktime
  3. Windows Media Videos
  4. Real Media Audio
  5. Audio MP3
  6. Video FLV
  7. videos de Youtube

Es de esta forma como eXelearning se apoya en las tecnologías multimedia para enriquecer la manera en la que muestra contenidos al estudiante, no se detiene ahí ya que al ser proyecto open source uno tiene acceso al código y puede crear nuevos «iDevice» si tiene la habilidad suficiente.

GeoGebra - Logo

GeoGebra – Logo

Se han escrito artículos sobre la facilidades de enseñar física y matemática usando eXeLearning y GeoGebra es cual es un software de matemáticas y ciencias para enseñar y aprender, se crean los contenidos en eXeLearning pero los gráficos son creados en GeoGebra y luego son exportados como una Java Applet para ser colocada dentro de la pagina web que se exporta a los estudiantes.

Todas estas investigaciones y programas creados buscan motivar y hacer crecer el interés de los profesores a utilizar contenidos digitales en sus métodos de enseñanza. la DEC (Digital Educational Content) incluye toda la información necesaria para poder cumplir el objetivo de aprender un concepto o ganar una habilidad, pero esto no es algo que se logue de un día para otro, requiere estudiar el material que se desea enseñar, ver que lo que se quiere usar se acople a las computadores que usen los estudiantes y planear sus lecciones, su estrategia educacional siempre estará sujeta a cambios dependiendo del feedback de los estudiantes.

Bibliografía

  • http://scorm.com/scorm-explained/
  • http://exelearning.net/
  • http://exelearning.org/
  • http://wikieducator.org/Online_manual
  • http://www.iiisci.org/Journal/CV$/sci/pdfs/OL886GV.pdf
Publicado en Edcom, ESPOL, eXeLearning, LSM, software, Uncategorized, Web | Deja un comentario

El futuro de la WEB con CSS4

Publicado el 1 septiembre, 2013 por Sergio

La web sigue creciendo rápidamente, desde la salida de HTML5 al mercado todos los desarrolladores y muchas compañías se han dado cuenta que esto no puede quedarse atrás y se ha iniciado una carrera entre los navegadores web por estar a la vanguardia en cuanto a estas tecnologías.

Un ejemplo visual lo proporciona la pagina: http://html5readiness.com/ en la cual veremos claramente como cada navegador está en su propia carrera para soportar componentes nuevos como HTML5, CSS3 y JS.

 

Todos los diseñadores de sitios web tienen claro que desde CSS que se debía separar el contenido del texto, ya que de esta manera HTML es nuestro sitio web limpio y todos los estilos, efectos e imágenes serán proporcionadas por nuestra hoja de estilos CSS, dándonos la libertad de cambiar estilos a todo nuestro website editando un solo documento maestro y sin tener que poner el sitio en mantenimiento en ningún momento, y lo más importante con la seguridad de estar cambiando solo el aspecto visual de la pagina.

CSS3 está disponible desde el 2011 y muchos programadores han experimentado cosas nuevas con este código, está lleno de funciones interesantes, desde transiciones y efectos dinámicos hasta dibujos! hay programadores que han dibujado con CSS3!

Dibujo hecho con CSS3

W3C

Y no se detiene ahí ya que hay muchas páginas que se han dedicado a publicar ejemplos del potencial de CSS3 de manera gratuita, hay mucho código con ejemplos que se comparten de manera gratuita en la internet, dejando a el programador la libertad de tomarlo y experimentar con él, pero para todas las bondades que ofrece CSS3 esto sigue creciendo ya que la W3C ha estado trabajando paralelamente en la versión CSS4.

Salida CS4

Las especificaciones técnicas de CSS4 ya están escritas, muchas de estas ideas de lo que el W3C está esperando en el CSS4 Especificación de Selectores.
Las 2 ediciones más sonadas son «not» y «matches» ya antes en CSS3 estaba el selector :not() pero el selector ;matches() es lo nuevo.
Not
En las especificaciones de CS4 dice que
:not()
puede ser usado para ambos selectores y pseudo clases. no trabajara con
:after o :before
pero todo lo demás funcionara bien. Supongamos que deseas aplicar un estilo a todo excepto los links sería algo así:

*|*:not(:link):not(:visited) {
    /* Some CSS */
}

Muy útil en un proyecto largo ya que esto ciertamente cortara líneas de código los cual nos lleva a matches()
Agrego que *|* es un carácter regla general que significa «Aplicar a todo» y se aplicara a todos los elementos CSS.

Matches

matches() literalmente empareja cualquier pseudo clase, no puedes mezclar matches() y not(). Las especificaciones mencionan que esto:
:matches(:not( … ))
no es posible, lo cual tampoco tendría mucho sentido, aquí hay un ejemplo de cómo se aplica a todos los objetos que tengan estado :hover

*|*:matches(:hover) {
     /* Some CSS */
}

Variedad de Selectores directos

Habrán algunos nuevos selectores, pero tendrán varios usos.

Reference Combinators

Este es complejo, digamos que tenemos estas líneas de código:

<label for="name">Your Name</label>
<input id="name" type="text" />

El atributo for, por defincion deberia ser el mismo que la ID de ingreso, tiene que ver con elementos conectados. Esta pseudo class te permite apuntar elementos conectados. Si se desea apuntar el input cuando la etiqueta esta hover se podria escribir esto:

label:hover /for/ input {
    /* CSS goes here */
}

Apuntar Padres

en CSS la ultima cosa que escribes es generalmente lo que estas apuntando:

div a {
 }

Todos los que hemos trabajado con CSS sabemos que estamos seleccionando todas las anclas de divs. Con este selector podemos usar la misma sintaxis, pero apuntar al div, podra sonar inutil pero si tu quisieras hacer eso solo removerias el a y eso haria que busques el div de manera directa, en estas lineas podremos apuntar al padre de un hijo.

 

ul li:hover < ul { /* Trying to target parent. This doesn't work */
 }

Ahora con CSS4 se podra hacer asi:

ul! li:hover { 
}

Ahora el padre esta seleccionado cuando una li dentro está en estado hover. la oportunidad de agregar lo que CSS puede hacer es increíble y definitivamente uno de los mejores pensamientos para los elementos CSS. Notar que otras especificaciones mencionando apuntar a los padres como $E > F en vez de un signo de exclamación.

 

conclusiones personales y recomendaciones.

CSS4

Definitivamente los nuevos selectores ahorraran líneas de código a esos programadores web y les darán mas opciones al momento de crear nuevos sitios, pero esto no quiere decir que los esfuerzos de CSS3 hayan sido en vano, NO! tanto CSS3 como CSS4 son código CSS cuando la versión CSS4 salga al publico general este traerá nuevos SELECTORES que debemos aprender a usar, pero eso es todo! los nuevos selectores solo harán que escribir largas hojas de estilo sea un poco mas rápido y eficiente, los viejos selectores de CSS3 seguirán estando ahí y es por eso que los esfuerzos invertidos aprendiendo y haciendo que todos empiecen a guiarse por los estándar  no serán desperdiciados.

En general las especificaciones a los nuevos selectores se ve muy interesante, ayuda en los proyectos largos, pero esto deberá pasar por un proceso de adaptación ya que todos los navegadores deben actualizarse hace CSS4.

Otras especificaciones de CSS4 están en estos documentos:

todas ellas aun en desarrollo así que tendremos que esperar a que la W3C nos dé un borrador más completo. La W3C siempre está abierto a ideas y sugerencias, esta es una tecnología que seguirá moldeando el futuro de internet y será usada por millones de desarrolladores web todos los días.

Bibliografía

Conferencia CSS4

Selectores
http://www.inserthtml.com/2012/01/css4-selectors/#css4
Futuro
http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/

Publicado en Uncategorized | Etiquetado , | Deja un comentario

Diseño Fluido/liquido Dreamweaver 6

Publicado el 17 julio, 2013 por Sergio

Como diseñador web uno de los mayores desafíos es que todo website que realice debe adaptarse a diferentes dispositivos y tamaños de pantalla para mostrar el contenido.  Pero diseñar un mismo sitio más de 3 veces para que se adapte a cada tamaño de dispositivo es extremadamente cansado y consumen mucho tiempo, para hacer este trabajo fácil, me di cuenta de que lo mas lógico seria usar un diseño de «Grid Fluida» para el «layout» de mi website, muy parecido a las «grids» usadas en JQuery Mobile estas celdas me permiten, estas reaccionan a los cambios en el tamaño de la pantalla con el uso de porcentajes o «width».

Primeros Pasos

Es en Dreamweaver 6(parte del paquete adobe) que ahora se nos permite crear nuevos «Fluid grid layouts» lo cual hace que diseñar un sitio para múltiples pantallas sea un poco mas fácil para mi, así que paso a paso diré como se crea un Grid Layout, dentro de Archivo podemos seleccionar un Fluid Grid Layaout.

Pantalla Principal

Esta pantalla es una de las más importantes al momento de iniciar el proyecto, primero tenemos 2 características en cada pantalla, la primera es el numero de Columnas que se verán en cada uno de las 3 pantallas, y lo segundo más importante es que porcentaje de la pantalla deseamos usar, una vez que tenemos esto seleccionado Creamos el archivo, todos estos diseños fluidos hacen uso de HTML5 por defecto.

Una vez que creamos el archivo, nos damos cuenta de muchas cosas entre ellas:

  • Tendremos un DIV principal BASE el cual va a contener nuestro sitio web <div.gridContainer.clearfix>
  • También veremos de que tendremos 3 iconos que hacen referencia a los 3 diferentes tamaños de pantallas con los cuales trabajaremos.

3 dimensiones de nuestro website

Todo nuestro sitio web se trabajara a base de <DIV>, dentro de nuestro contenedor tenemos la libertad de crear los DIV que necesitemos, pero cada DIV creado te pide las opciones de «crear nueva fila» con esto se refiere a que si esta fila ocupara el máximo de la pantalla, en caso de no seleccionar esta opción, la fila creada se acomodara al espacio que tenga disponible.

Por default, cosas como «header» , «navigationbar», «footer» tendrán su propia fila y actúan como separadores de secciones, ya depende del programador crear filas y llenarlas con información.

mas divs para contenidos

Gráficamente cada fila nueva tendrá un borde rojo, mientras que cada fila que no queremos ocupe una fila completa la veremos con bordes amarillos, son estos DIV amarillos quienes se acomodaran al tamaño de la pantalla.

También algo que me di cuenta mientras trabaje con los DIVS es que todo <div> tag tiene flechas al lado derecho e izquierdo, pero cada flecha tiene una función única la función de la flecha derecha es reducir el ancho del bloque <div> mientras que la flecha derecha tiene la función de incremental el marco izquierdo entre la pantalla y el contenido, por lo general usaremos la flecha derecha para reducir el ancho de los bloques <div> y si nos damos cuenta si reducimos los bloques <div> lo suficiente estos se ubicaran uno al lado del otro, ocupando así una fila en vez de dos.

CSS

Aprendí de la práctica de que para agregar al momento de crear el sitio web fluido este me crea una hoja de estilos dentro de una carpeta en el directorio raíz, este archivo CSS no tiene estilos, pero contiene reglas muy importantes y media Query las cuales se aplican luego de determinar el tamaño de la pantalla del dispositivo que la carga. Así que si deseas agregar una hojas de estilos a tu website, es completamente recomendado, cargar OTRA hoja de estilos dentro de la carpeta CSS la cual contenga el estilo visual del website, nunca se edita el CSS inicial ya que contiene las reglas del diseño fluido y al manipularlas pueden afectar las funciones de nuestro sitio web! lo cual es algo que deseamos.

OTRAS PANTALLAS

Generalmente no importa porque diseño del website empiece, ya que una vez que terminemos de colocar el contenido del sitio web y lo ajustemos a una pantalla, debemos dar click en el sig dispositivo ya sea tableta o Smartphone y nuestro contenido original sigue ahí, solo queda editarlo un poco para que se ajuste como queramos. Ahora bien en este punto es donde se vuelven útiles las columnas de definimos a un principio, ya que las tomamos como referencia para saber con cuanto tamaño contamos para ubicar los <div>. Una vez que tuve los 3 tamaños configurados a mi gusto, es atravez de un preview que cargamos la pagina en nuestro navegador y al ir reduciendo el tamaño del navegador nuestros elementos se van acomodando de otra manera.

en el navegador luego de aplicar estilos css

Hay que tener cuidado con las imágenes que coloquemos dentro del website, ya que dependerá de lo que decidamos los tamaños pueden ser fijos o basados en porcentajes de ancho de la pantalla. no se recomienda para nada usar imágenes grandes ya que estas pueden dañar el diseño en pantallas de menor resolución.

tamaño escritorio

Experiencia

Hay que tomar muchas cosas en consideración cuando se empieza a diseñar en Fluid Grid Layaout, los layouts del ejemplo son fáciles y simples, pero no siempre será así, entre más elementos tenga un sitio web los layouts se volverán mas y mas complicados, ya que una vez que terminemos con la pantalla uno, tendremos que seguir con la pantalla 2 y la pantalla 3, pero la realidad es que recude tiempos de programación y también los tiempos de carga, ya que no carga un sitio diferente, sino el mismo sitio pero atravez de un CSS que acomodara los elementos acorde al tamaño de la pantalla y es una excelente forma de conocer los «fluid layouts» y «media querys», Adobe realmente se está tomando muy enserio la parte de crear sitios dinámicos y seguramente esta opción se irá puliendo con las versiones siguientes.

Conclusiones

Todo sitio web debe estar en la capacidad de adaptar su contenido al tamaño del dispositivo que esta acensado a los contenidos, facilitando la lectura y la navegación, todo diseñador web debe apuntar a este formato, y desde luego aprender a trabajar con las herramientas actuales para crear proyectos y dar soluciones, crear el sitio web es solo el primer paso ya que luego debe valerse de otras herramientas para hacerlo dinámico y interactivo, es realmente mucho los conceptos que se manejan y solo la practica da una visión solida de lo que estamos creando y de lo que aún falta por diseñar e implementar.

Publicado en ESPOL | Etiquetado , , , , , , | Deja un comentario

Biblioteca de JavaScript JQuery

Publicado el 3 julio, 2013 por Sergio

Es necesario tener nociones sobre el desarrollo de sitios web para entender a la perfección sobre que trata JQuery, empecemos por describir los componentes de un sitio web normal:

  • HTML
  • CSS
  • Javascript

Toda página web puede ser separada en 3 capas y cada una con un rol especifico y que se muestran a continuación:

HTML: Nuestro archivos HTML son los encargados de tener el contenido de la pagina que será leído e interpretado por nuestros navegadores, todos los navegadores soportan lenguaje HTML, así que nuestros contenidos podrán ser vistos en cualquier navegador.

CSS: Los archivos CSS no manipulan el contenido de nuestro sitio, su rol es dar estilos y para ello contienen el código con las instrucciones de cómo debe mostrarse todo el contenido que hemos escrito dentro del documento HTML, todos los navegadores actuales soportan CSS así que nunca nos preocuparemos porque nuestro diseño no se cargue en algún navegador web.

Javascript: La ultima capa de nuestro website y esta se encarga específicamente de los efectos y comportamientos de la pagina, pero esto tiene 2 desventajas enormes. La primera es que no todos los navegadores soportan o interpretan lenguaje Javascript y la segunda desventaja es que para lograr buenos efectos la programación era demasiado larga y complicada.

¿Qué es Javascript?


Es un lengua de programación implementado originalmente para navegadores web en el lado del cliente para que pudiera interactuar con el usuario, últimamente usado en el desarrollo de juegos y aplicaciones de escritorio. Su sintaxis fue influenciada del lenguaje C y usa nombres de lenguaje JAVA, pero no están relacionados entre ellos y cada uno es independiente. Su uso mas común fue escribir funciones que serian mostradas o incluidas en el documento HTML, entre esos usos:

  • Cargar o enviar nuevos datos al servidor vía AJAX sin tener que volver a cargar el website.
  • Animación de elementos dentro de la pagina
  • Contenido interactivo
  • Validar datos en los formularios web, confirmando que el dato era aceptable antes de ser enviado
  • Transmitir información sobre los hábitos de lectura y navegación del usuario, lo cual se hacía con el fin de web analíticas y seguimiento.

Javascript no necesitaba de un servidor que interpretara sus comandos e instrucciones, ya que corría dentro del navegador, respondiendo de una manera rápida a las acciones del usuario.

¿Que es JQuery?

 

Logo Jquery

 

Una vez que tenemos claro que es Javascript y de la gran cantidad de bondades que ofrece para los websites, es cuando empezamos a darnos cuenta que deseamos simplificar tantas líneas de código para lograr mejores efectos y más dinamismo a nuestros websites.

Jquery es una pequeña y rápida librería javascript. Cosas como  manipulación, manejo de eventos, animaciones y AJAX se vuelven mucho mas fáciles de usar y no solo eso, sino que también toma en cuenta el problema de la compatibilidad entre navegadores creando estándares que puedan ser leídos en la mayoría de navegadores, es la combinación entre versatilidad y extensibilidad, haciendo que más personas escriban javascript de una manera fácil y rápida.

Son todas estas características que hacen de JQuery una herramienta muy poderosa al momento de agregar efectos o comportamientos a nuestras páginas web, su compatibilidad es de las más altas que se puede tener, garantizando así que lo que programemos pueda ser visualizado sin problema alguno y usado por mega corporaciones como Google, Wikipedia, WordPress, Amazon, Twitter, entre otros.

Internet Explorer Chrome Firefox Safari Opera

jQuery 1.x

6+

Current − 1 version

Current − 1 version

Current − 1 version

Current − 1 version

jQuery 2.x

9+

Current − 1 version

Current − 1 version

Current − 1 version

Current − 1 version

Conclusión

JQuery está facilitando en todo el mundo el uso de Javascript a los desarrolladores web, reduciendo las instrucciones largas, en unas más pequeñas que pueden ser aprendidas y mejoradas, se pueden crear diferentes plug-ins y estos pueden luego ser mejorados o personalizados, hay una comunidad enorme de desarrolladores que siempre está respondiendo dudas de los usuarios y una nunca esta solo al momento de programar, es un lenguaje extremadamente popular que ha estandarizado la capa de comportamientos y  efectos para lograr websites dinámicos que puedan ser visto desde cualquier navegador.

Recomiendo antes de entrar a programar con JQery tener conocimientos de HTML y CSS, ya que son las 2 capas principales de nuestro website, JQuery solos les agregara mas dinamismo y funcionalidad a los que ya hemos creado. y revisar dentro de www.jquery.com la documentación  porque es muy importante entender la sintaxis y palabras reservadas del lenguaje junto con algunos demos y código de ejemplo. al momento de descargarnos la librería nos daremos cuenta de que se nos presenta 2 opciones:

  • Developer
  • Producction

Developer: al descargarnos la versión DEVELOPER estamos descargando la versión pesada de JQuery, es pesada debido a que dentro podremos ver el código de JQuery de una manera más extensa y detallada, entender cómo funciona JQuery e intentar programar o trastear con el código, con el fin de crear algo nuevo.

Production: es la versión ligera de la librería, esta no es fácil de entender y pesa menos, este se usa como librería del sitio web, ya que carga rápido y tiene todas las instrucciones, además de esto Jquery nos da la opción de no descargar la librería, sino simplemente con 1 línea de código llamarlo directamente de internet, ahorrándonos así unos Kb de información en el website o aplicación de móvil.

El lema de JQuery es: «Hacer mas escribiendo menos» lo cual es necesario en el mundo digital, internet esta por todas partes y las paginas estáticas son cosas del pasado, nuestros proyectos web deben tener elementos interactivos y efectos agradables al usuario, cosas que llamen la atención y eso es precisamente JQuery.

Bibliografia:

  • http://en.wikipedia.org/wiki/JavaScript
  • http://youtu.be/mwVuURFNX0E
  • http://youtu.be/VRnQOcVclS8
  • www.jquery.com
Publicado en ESPOL, Tecnologia | Etiquetado , , , , | Deja un comentario

JAVA – Banca Ecuatoriana

Publicado el 2 febrero, 2013 por Sergio

JAVA Y LA BANCA ECUATORIANA

La historia de java en la banca financiera es una historia que inicia en 1999 y desde el 2001 fue creciente, ya que las entidades financieras constantemente hacen uso de este lenguaje para conectar sus terminales , fue entonces que se dio paso a un nuevo estándar para el acceso a dispositivos, el J/XFS (J/eXtensions for Financial Services) el cual fue promocionado como una manera de facilitar la conectividad entre dispositivos.

Esta API conto con el apoyo de 6 de las empresas más representativas a nivel mundial en cuanto a dispositivos financieros:

  • De la Rue
  • Diebold
  • IBM
  • NCR
  • Sun Microsystems
  • Wicor Nixdorf

Empresas

fue junto a ellos que se crearon las primeras especificaciones sobre la arquitectura y el API del J/XFS a principo de 1999.

Con el fin de asegurar que el J/XFS se convirtiera en un estándar en la industria financiera, y evitar que el control recayera solamente en estas 6 empresas, se decidió transferir el control de las especificaciones al CEN(European Committee for Standarisation System) en Bruselas.

Se necesitaba un estándar de este tipo, ahora que tanto las grandes entidades financieras de este país como los pequeños bancos y cajas de ahorro están desarrollando su terminal financiero usando JAVA.

La clave de de J/XFS es que permite a los bancos desarrollar aplicaciones olvidándose del hardware, del modelo y de la marca del periférico. Lo cual se parece mucho al concepto «PLUG & PLAY» para cualquier tipo dispositivo financiero. Esto significa que el banco puede instalar por ejemplo:

  • cualquier impresora financiera sin modificar una sola línea de código en su aplicación.

Y no se limita solo a eso, sino que cualquier aplicación basada en J/XFS podrá obtener precios del hardware mas ventajosos, ya que la gama de modelos y marcas disponibles se amplia considerablemente.

Al usar J/XFS los clientes no están atados de pies y manos a una solución propietaria, donde se le exige una plataforma específica, en la cual pequeños cambios pueden suponer actualizaciones complejas en el software y desaparece la dependencia con el sistema operativo.

Son muchos los bancos y cajas que tienen en mente la instalación de sistemas operativos alternativos al Windows, llámese Linux. El desarrollo de estas aplicaciones JAVA les garantiza que estas podrán ser ejecutadas, sin cambio alguno tanto en OS/2 como en Linux, Windows o Solaris. Es así como JAVA confirma la ya sobrada y conocida frase «Escribe una vez, ejecuta donde sea».

Este Estándar tiene mayor cabida en el canal de las oficinas bancarias, también es en el entorno de cajeros automáticos donde tiene una vital importancia, pudiendo contar con una misma arquitectura para ambos canales. JAVA y J/XFS ha hecho posible que las aplicaciones de autoservicio sean mucho más completas que las actuales, ya que no se necesitan programadores expertos en cajeros y las maquinas serán un elemento mas de la oficina.

La pagina: www.jxfs.net contiene toda la documentacio necesaria para aquellos que deseen entender los protocolos para empezar a progamar.

 

Seguridad, JAVA y los Bancos

 

 Muchos Bancos hoy en dia tienen un sistema de internet Banking que obliga a los usuarios a usar applets escritos en JAVA, últimamente se ha descubierto una vulnerabilidades criticas en JAVA, las cuales se refieren a una versión particular de JAVA, la 7 antes del parche 11. El problema radica en que JAVA es muy simple. En JAVA se pueden hacer muchas cosas, entre ellas pequeños programas, que se ejecutan desde los navegadores de internet, conocidos como Applets. Estos programas pueden venir firmados digitalmente (lo que le permite saber al usuario quién los escribió). La versión de Java 7 previa al parche 11 (anterior a 7.11), contiene un error que permite a un applet tener la potestad de ejecutar programas con un nivel de privilegios alto (como si fuera un super usuario), y por ende un atacante podría ejecutar cosas en la computadora de la víctima. Para que eso pueda ocurrir, el usuario debe entrar en una página que tenga un applet malicioso hecho a propósito para atacar a la víctima y permitir que éste se ejecute.

Pero es erróneo pensar que basta con tener JAVA para poder atacar al usuario JAVA se puede configurar para que no ejecute nada sin permiso, y entonces puedo navegar sin problemas y cuando algún applet quiera ejecutarse es el usuario quien le da permiso o no, evitando asi un ataque a su computador.

A nivel de Ecuador no se ha tomado el problema tan a fondo, ya que la banca sigue operando de manera muy normal toda la banca tiene aplicaciones basadas en ORACLE y JAVA debido a la flexibilidad del código a ser interpretado en cualquier dispositivo, se lo usa tanto en la banca virtual atravez de los sitios web como atravez de applets las cuales son hechas con JAVA para que un usuario acceda a los datos de su cuenta de manera rápida y sencilla.

Publicado en ESPOL, java, Tecnologia | Deja un comentario

SWT – Standard Widget Toolkit

Publicado el 5 septiembre, 2012 por Sergio

SWT (siglas en inglés de Standard Widget Toolkit) es un conjunto de componentes para construir interfaces gráficas en Java, (widgets) desarrollados por el proyecto Eclipse. Recupera la idea original de la biblioteca AWT de utilizar componentes nativos, con lo que adopta un estilo más consistente en todas las plataformas, pero evita caer en las limitaciones de ésta.

La biblioteca Swing, por otro lado, está codificada enteramente en Java y frecuentemente se le acusa de no brindar una experiencia idéntica a la de una aplicación nativa. Sin embargo, el precio a pagar por esa mejora es la dependencia (a nivel de aspecto visual y no de interfaz de programación) de la aplicación resultante del sistema operativo sobre el cual se ejecuta. La interfaz del workbench de eclipse también depende de una capa intermedia de interfaz gráfica de usuario (GUI) llamada JFace que simplifica la construcción de aplicaciones basadas en SWT.

Una aplicación simple usando SWT y ejecutándose en un entorno GTK+

Una aplicación simple usando SWT y ejecutándose en un entorno GTK+

 


BlackBerry Soporta Java

Smartphone - BlackBerry

Smartphone - BlackBerry

BlackBerry es una línea de teléfonos inteligentes (mejor conocidos como smartphones en inglés) desarrollada por la compañía canadiense Research In Motion (RIM) que integra el servicio de correo electrónico móvil; aunque incluye las aplicaciones típicas de un smartphone: libreta de direcciones, calendario, listas de tareas, bloc de notas etc., así como capacidades de teléfono en los modelos más nuevos.

Los BlackBerry usan el sistema operativo BlackBerry OS y pueden acceder a Internet llegando incluso a reemplazar a un computador personal, en Norteamérica, Iberoamérica y en la mayoría de los países europeos. En el mundo, un 11% de los smartphones vendidos y un 2,9% de los dispositivos móviles en general son BlackBerry, lo que convierte a RIM en el cuarto proveedor de OS/Smartphone y en el sexto fabricante de terminales.

Desde el 22 de septiembre del 2011 se presento la versión Oficial del BlackBerry Java SDK 7.0, el cual soporta el nuevo Sistema Operativo 7.0

Con la cual se pudo dar  soporte para las siguientes APIs / Herramientas:

  • OpenGL ES 2.0, tomando ventaja del nuevo chip de gráficos, te permitirá crear juegos en excelente contenido gráfico.
  • Windows Manager API, también tomando ventaja del nuevo chip de gráficos y el incremento en el poder del dispositivo, te permite sobreponer el OpenGL o cualquier otro componente de la Interfaz sobre cualquier cosa que quieras, incluyendo cámara y video.
  • APIs de Brújula, aprovechando el sensor magnetómetro, te permitirá determinar la orientación del dispositivo y la dirección. Cuando es combinado con el Windows Manager API, permite la creación de aplicaciones AR (Augmented Reality).
  • APIs de NFC (Near Field Communication), Con la ayuda del nuevo radio NFC, permitirá leer y emular etiquetas virtuales y crear soluciones de pago y comercio móvil.
  • APIs de captura de video y grabación de video HD, gracias a la cámara mejorada, esto permitirá a tu aplicación proveer al usuario de las mismas ventajas multimedia que obtiene con aplicaciones del sistema.
  • API de Envío a Menú, permitir a las aplicaciones compartir contenidos con los contactos de la misma forma que lo hacen las aplicaciones del sistema agregando la opción de Enviar al menú de sus aplicaciones.
  • API de búsqueda unificada actualizada, hacer integraciones con esta característica del dispositivo es mas fácil que antes permitiendo mas control de palabras claves indexadas.
  • API de BlackBerry® Maps actualizada, simplificando como los datos son superpuestos en la aplicacion BlackBerry® Maps. Emparejando eso con el soporte de Geofencing y la habilidad de superponer figuras complejas y polígonos, teniendo así la as completa integración para BlackBerry® Maps hasta la fecha.
  • API de Opciones ha evolucionado para parecerse mas al menú de opciones del BlackBerry® 6, permitiendo a las aplicaciones de terceros agregar sus propias entradas en la pantalla de opciones incluyendo icono y un texto descriptivo.
  • API de Multimedia ha agregado soporte para control de buffer en la reproducción y la definición del bitrate en la grabación de video.
  • API de código de barras fue actualizada para ofrecer soporte a ZXing 1.6 y permitir definiciones de codificaciones personalizadas.

 

BlackBerry Java SDK 7.0

El smartphone BlackBerry se crea en su totalidad desde el principio como un dispositivo basado en Java, con todas las aplicaciones y API integradas escritas en Java. BlackBerry Java SDK incluye API de Java® ME y API específicas de BlackBerry. Las API de BlackBerry le proporcionan acceso a funciones avanzadas de la interfaz de usuario, además de una fantástica integración con las aplicaciones existentes, la capacidad de crear bases de datos con SQLite® y utilizar las funciones de cifrado para proteger el contenido, la funcionalidad de integración de características basadas en ubicación (por ejemplo, mapas y la función de geoubicación), etc.

BlackBerry® Java® SDK se divide en doce categorías. Cada categoría consta de API que ofrecen un tipo independiente de funcionalidad, por ejemplo, la creación de una interfaz de usuario, redes, almacenamiento de datos y seguridad. Muchas de las categorías incluyen tanto API de Java ME como específicas de BlackBerry.

Desarrolladores

Ahora todos aquellos desarrolladores pueden con la ayuda del BlackBerry Java SDK 7.0 ir creando código nuevo para el desarrollo de nuevas API, las cuales pueden poner a la venta en “BlackBerry Market” y tener reembolso del tiempo invertido en la API, hay comunidades enteras en internet dedicadas a la programación para dispositivos móviles y BlacBerrys por lo cual la información fluye y uno puede aprender practicando y haciendo preguntas, es un mercado explotable ya que la programación para dispositivos móviles esta en gran auge.

 

Publicado en Uncategorized | Deja un comentario

QR code y RA software

Publicado el 13 julio, 2012 por Sergio

QR CODE

Códigos QR es la abreviación para Códigos de Respuesta Rápida, es un código bidimensional, diseñado por TOYOTA y en la actualidad es muy usado  debido a su capacidad de almacenamiento en comparación a los códigos de barra estándar, el código consiste en puntos negros organizados en patrones cuadrados en un fondo blanco, la información almacenada se puede estandarizar en 4 modos de datos «numérico, alfanumérico, byte/binario y kan ji» y atravez de extensiones soportadas, virtualmente cualquier tipo de dato.

codigo QR

La tecnología Java también ha sido empleada para poder leer estos cogidos, como ejemplo tenemos a ZXing («Zebra Crossing») Un programa Open-Source, procesador de imágenes barra multi-formato 1D/2D. Fue creado con el objetivo de utilizar la cámara integrada en los teléfonos para escanear y decodificar los códigos en este dispositivo, sin necesidad de comunicarse a un servidor. Pero este programa puede ser utilizado para en codear y decodificar códigos de barra en PC de escritorio y servidores, actualmente soporta estos formatos:

  • UPC-A and UPC-E
  • EAN-8 and EAN-13
  • Code 39
  • Code 93
  • Code 128
  • ITF
  • Codabar
  • RSS-14 (all variants)
  • QR Code
  • Data Matrix
  • Aztec (‘beta’ quality)
  • PDF 417 (‘alpha’ quality)

En la actualidad también hay QR-CODE API para Java, el cual es una librería Open Source que nos da la API barcode (incluye QR code) para Java, con una lista enorme de formatos soportados: UPC-A, UPC-E, EAN-8, EAN-13, Code 39, Code 93, Code 128, QR Code, ITF, Codabar, RSS-14, Data Matrix.

Con la API somos libres de desarrollar aplicaciones que funcionen leyendo información de los QR codes o convertir información en un QR code y enviarla.

Realidad Aumentada

La Realidad Aumentada  es una tecnología que esta arrasando con la forma de ver nuestro mundo. Esta combina el mundo real con el mundo virtual por medio de una webcam -a que no te imaginabas que tu web cam serviría para algo mas que Messenger o Skype-, de esta forma se enriquece la experiencia visual y se mejora la técnica de aprendizaje.

Libro Realidad Aumentada

Necesitamos:

  • Monitor del computador (o alguna pantalla que lo reemplace): instrumento en donde se verá reflejada la suma de lo real y lo virtual, elementos que conforman la Realidad Aumentada.
  • Cámara Web: dispositivo que toma la información del mundo real y la transmite al software de Realidad Aumentada.
  • Software: programa que toma los datos reales y los transforma en Realidad Aumentada. En esta sección se utiliza cualquier software de modelado 3D (yo utilizo el 3DsMax), además, hago uso de las librerías de FLARToolKit, aunque debemos saber que existen variaciones para Java, C++, Processing y otros lenguajes. De ese modo, FLARToolKit son para mí las librerías más fáciles de usar y para modificarlas, uso Flex o Flash y así editar los archivos de ActionScript.
  • Marcadores: los marcadores básicamente son hojas de papel con símbolos que el software interpreta de manera que al ser reconocido por la webcam realiza una respuesta específica (mostrar una imagen 3D, hacerle cambios de movimiento al objeto 3D que ya este creado con un marcador, mostrar un video, etc.).Como ves la realidad aumentada no es una tecnología que requiera ser un experto, de hecho con algunos conocimientos de programación y de diseño se pueden hacer grandes cosas.

Ejemplos Basicos RA

Actualmente existen proyectos de AR par JAVA, como el «Proyect Marble» de Realidad Aumentada en JAVA con JMF, JAVA3D, NYArToolKit y Trident.

BIBLIOGRAFIA:

http://www.pushing-pixels.org/2009/07/02/project-marble-augmented-reality-in-java-with-jmf-java3d-nyartoolkit-and-trident.html

http://nyatla.jp/nyartoolkit/wp/

http://blog.aumentality.com/tutoriales/%C2%BFcomo-empezar-desde-0-con-realidad-aumentada/

Publicado en Uncategorized | Deja un comentario

Autor

Publicado el 23 junio, 2011 por Sergio

Mi nombre es Sergio Adrian Tohaquiza Intrigo, pertenezco a la carrera de Licenciatura en paginas Web y aplicaciones multimedia, Universidad ESPOL, materia Herramientas de Colaboracion Digital, paralelo 210.

correo: p21tohaquizas@gmail.com

gracias por su atencion prestada

Publicado en ESPOL | Etiquetado , , | Deja un comentario

Formulario

Publicado el 23 junio, 2011 por Sergio

Formulario Rapido para aquellos que deseen llenarlo y responder preguntas

Publicado en Encuestas, FEP, Pokémon | Etiquetado , , | Deja un comentario

Batalla Final – Costa 2011

Publicado el 22 junio, 2011 por Sergio

Gracias a los competidores por subir el video de la Batalla Final de Pokemon!

Publicado en FEP, Pokémon | Etiquetado , , , , , | Deja un comentario