Posts Tagged: javascript

Diseño / Futuro / Html / Internet / Jackfiallos / javascript / Ocio / Web — No Comments
17
abr 12

SVG una tecnología en extinción

No Gravatar
SVG Logo

SVG Logo

Hace algunas meses atrás parte de algunas de las características que pensaba desarrollar en Celestic .. y que aún se encuentran pendientes, era crear una especie de pizarra que permitiera a multiples usuarios escribir o hacer anotaciones en tiempo real.. para ese entonces pensaba en solamente 2 opciones, canvas o svg.. incluso escribí algunas pruebas de diferentes librerías y al final estuve muy certa de utilizar RaphaelJS, eso sobre cualquier librería para canvas.

En ese momento, html5 no estaba muy difundido y las librerías de canvas estaban muy verdes para utilizar alguna, al final Celestic se detuvo un poco y decidí centrar el desarrollo en otro tipo de características.. Han pasado 3 años desde que tuve en mente si utilizar svn sobre canvas.. y hoy estoy a punto de cambiar de idea.

Las tecnologías cambian de la noche a la mañana, un día una nueva herramienta de desarrollo esta en la cima y otro día simplemente cae .. y lo peor es que nosotros nos preparamos tanto tiempo para aprenderlas .. que un día nos deja de servir y tenemos que empezar desde cero con algo totalmente nuevo.

La web cambia rápido .. ahora parece que flash ya no es una tecnología en la que valga la pena invertir.. hemos de aceptar que tuvo su gran momento, años de desarrollo y grandes comunidades dedicándose a perfeccionar los métodos de codificación.. para que al final no quede en nada.. “nada es eterno”.

Entonces creo que con SVG esta ocurriendo una situación similar.. los equipos de escritorio tienen soporte para SVG, los equipos móviles no lo tienen y si lo tienen es con especificaciones diferentes.. el SVG es una tecnología en extinción, los navegadores se estan especializando en pintar (render) canvas de manera muy rápida.. igualmente algunos browsers preparan su javascript para utilizar aceleración por hardware, lo que hace de canvas la nueva tecnología ideal para dibujar sobre la web.

Compartir y Disfrutar

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon
ajax / Futuro / Internet / Ocio / REST / software / tecnologia / Tendencias / Web — No Comments
10
abr 12

Habilidades a desarrollar en el 2012

No Gravatar
Developer skills

Developer skills

HTML5

El nuevo estándar en para desarrollo de sitios y aplicaciones web.. cargado de características que ayudan a mejorar la navegación y la experiencia de usuario tanto en componentes como en atractivo visual. La mayoría de los navegadores ya soportan html5 inclusive los navegadores para dispositivos móviles se puede decir que casi están al mismo nivel de los navegadores de escritorio.

Aplicaciones Móviles

Creo que esta moda aun no hay muchos desarrolladores adoptándola aunque si es muy importante por la cantidad de dispositivos móviles que se adquieren día a día.. Se puede empezar escribiéndo aplicaciones nativas con los SDK de iOS o Android ..  también se pueden desarrollar con frameworks que portan la aplicación a multiples plataformas.. o más sencillo que los demás escribir aplicaciones web que se adaptan al formato de los móviles.

Servicios Web basados en REST

A pesar de que REST no tiene un estándar y se continúa escribiendo una definición.. muchos servicios alrededor de la web utilizan este método para transportar información.. su sencillez y la falta de tipos de datos pueden ser un punto a tomar en consideración antes de elegirlo. Su implementación conlleva conocer los diversos tipos de peticiones y su consumo es tan simple que con pocas líneas se puede solicitar información a un servidor basado en REST.

Bases de Datos NoSQL

Se puso de moda a partir de que las redes sociales necesitaron manipular grandes volúmenes de información en tiempos muy cortos.. es importante considerar que NoSQL sería casi imposible utilizarlo para realizar consultas complejas, pero entre sus ventajas está la velocidad de respuesta ante millones de peticiones simultáneamente. Su uso implica aprender nuevos métodos para realizar búsquedas y está fuertemente ligado a la denotación JSON para su estructura y almacén de información.

JavaScript

Es el lenguaje para la web interpretado del lado del cliente por excelencia.. hace mucho tiempo parecía no valer la pena aprenderlo.. pero con la llegada de librerías como jQuery, Prototype o Mootools su desarrollo fue muy importante.. PhoneGap o Titanium que son frameworks o librerías para desarrollar aplicaciones móviles utilizan este tipo de lenguajes. Html5 está muy relacionado con javascript, inclusive se desarrolló Node.js que es un framework orientado a eventos para el motor javascript v8 de google.

Las pruebas unitarias

Este tipo de pruebas garantizan el funcionamiento correcto tanto desde el punto de vista estructural como funcional.. es parte de la difícil tarea de los arquitectos de software y a diferencia de las pruebas funcionales que se acostumbran llevar a cabo por los testers, en una temprana etapa de desarrollo de una aplicación, este tipo de pruebas permiten detectar errores en la lógica a desarrollar. La mayoría de frameworks en diferentes lenguajes ya incluyen sus propias implementaciones para realizar pruebas unitarias, no estaría mal aprender a utilizar un par de ellas.

UX/UI

Siempre este término ha estado relacionado con los diseñadores y hay diseñadores que creen que pueden crear interfaces atractivas, simples e intuitivas para los usuarios .. pero creo que ahí esta el error.. parte de desarrollar aplicaciones implica conocer cual es la mejor forma de utilizar los componentes o en que lugares sería mejor utilizarlos para los usuarios.. El uso de equipos móviles han logrado que muchos desarrolladores empiecen a dar pequeños saltos hacia este interesante mundo..

Compartir y Disfrutar

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon
3D / Internet / javascript / Paradigmas / software / tecnologia / Tendencias / virtual / Web — No Comments
30
mar 12

La Web Tridimensional : WebGL

No Gravatar

WebGL Es una especificación estándar en desarrollo que permite mostrar gráficos tridimensionales acelerados por hardware en navegadores web sin necesidad de instalar software adicional al navegador (plug-ins).

En realidad es una API para javascript que permite usar OpengGL incorporado en los navegadores.[1]

WebGL utiliza un elemento de HTML5 llamado Canvas el cual permite mostrar gráficos 2D e imágenes de una manera dinámica, canvas consiste de una región dibujable definida en código HTML con los atributos de altura y espesor, el código javascript permite acceder a esa región a través de un conjunto completo de funciones de dibujo 2D, esto es lo que permite generar los gráficos dinámicamente. [2]

Esta especificación es gestionada por el consorcio de tecnología Kronos Group.

http://www.khronos.org/webgl/

Para comenzar hay unos muy buenos tutoriales para aprender a usar WebGL [3], que son referencia obligada para entender como funciona esta tecnología.

Para acelerar las cosas existe una biblioteca 3D en javascript llamada three.js, la biblioteca provee <canvas>, <svg> y render WebGL.[4] creada por mrdoob : https://github.com/mrdoob

demos

Demos de mrdoob

En esta biblioteca se incluyen funcionalidades para manejo de camaras (ortografica y perspectiva), funciones para manejar la geometria, el color, vertices, splines, matrices, luces, materiales, objetos (esqueletos, modelos, modelos animados, particulas, etc), renders (canvas, dom, svg, webgl), escenas, texturas y muchas otras mas : http://mrdoob.github.com/three.js/docs/48/#Camera

Y este es un ejemplo de un trabajo muy bueno usando esta tecnología Web3D.

http://www.ro.me/

Una cuestión interesante sobre WebGL es que es un estandar que ha sido adoptado para integrarlo en las nuevas versiones de los navegadores web de Google (chrome) y Mozilla (firefox) incluso de Apple (safari) pero no así en internet explorer de Microsoft pues menciona cuestiones de seguridad para no hacerlo. Por el momento WebGL sigue avanzado.

Nota:

“Los gráficos vectoriales escalables (svg) es una especificación para describir gráficos vectoriales bidimensionales estáticos o anímados en formato xml.” [5] 

Referencias:

[1]http://en.wikipedia.org/wiki/Canvas_element

[2]http://en.wikipedia.org/wiki/WebGL

[3]http://learningwebgl.com/blog/?page_id=1217

[4]https://github.com/mrdoob/three.js/

[5]http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

[6]http://es.wikipedia.org/wiki/Khronos_Group

Imagen y demos:

http://mrdoob.github.com/three.js/

http://mrdoob.com/

http://alteredqualia.com/

Compartir y Disfrutar

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon
ajax / Html / Internet / Jackfiallos / javascript / jquery / MVC / Proyectos / Pruebas de Software / software / tecnologia / Tendencias / Web — No Comments
28
feb 12

jQuery Mobile lo bueno y lo malo

No Gravatar
JQuery Mobile

JQuery Mobile

Desde mi blog la semana pasada hacía una reseña sobre 3 diferentes alternativas para desarrollar aplicaciones web para teléfonos móviles (iPhone, Android, Blackberry, Windows Phone, etc) .. al final decidí quedarme con jQuery Mobile por la sencillez y rápida curva de aprendizaje.. además que estaba trabajando en un prototipo de proyecto que no debía tomarme más de 3 días desarrollarlo. En fin, el propósito de este artículo es mostrarles de que manera funciona esta librería.. las carencias que encontré y las virtudes que pueden ayudar a escribir aplicaciones móviles en casi cuestión de horas.

Como funciona

Las aplicaciones web básicamente trabajan 2 capas que son el procesamiento de datos, algo que siempre ocurre del lado del servidor y la presentación de la información que es lo que el servidor regresa a los navegadores en un formato de meta etiquetas (html) .. pues bueno, jQuery Mobile agrega una capa extra que sería como una especie de manejador de eventos que se encarga de escuchar todas las pulsaciones que hacemos sobre los enlaces y botones de formularios para luego solicitar al servidor su proceso vía ajax .. La verdad es que la lógica de como funciona es muy simple porque todo ocurre mediante callbacks.. Si llegan a ver algunos ejemplos de como son estas aplicaciones desarrolladas con jQuery Mobile verán transiciones de entrada y salida entre las páginas y pues esto es el resultado de esas peticiones administradas vía ajax.. Y como todo lo que se hace con javascript, jQuery Mobile se puede parametrizar para que tenga el comportamiento que deseamos.

La tecnología que emplea

Es importante mencionar que esta librería y así he decidido llamarlo porque no creo que llegue al nivel de framework.. su uso esta basado totalmente en HTML5 .. ese nuevo estandar de desarrollo web que se está poniendo de moda.. y CSS3 que vienen a ser como el estilista del HTML5.. entonces si defino a jQuery Mobile diría que es una combinación de mucho HTML5 que utiliza inteligentemente metadatos en las etiquetas, canvas para dibujar algunos botones y CSS3 para administrar la capa visual (esquinas redondeadas, gradientes lineares, sombras y más)…

Una buena recomendación

Si estan interesados en empezar a desarrollar aplicaciones móbiles nativas, creo que antes deberían de entrarse un poco en el uso de este tipo de herramientas para desarrollar la visión del diseño de como son las aplicaciones móbiles, ya que la naturaleza de este tipo de aplicaciones requiere de otro tipo de destrezas relacionadas más que todo con usabilidad que al final es la parte visual y lo que más interesa a los usuarios. Con esto no estoy tratando de decir que las aplicaciones móbiles web son mejores que las nativas.. claro que no!! sería imposible hacer la comparación, pero en el caso de que se necesita escribir una aplicación en tiempo record que sea multiplataforma.. lo más obvio sería utilizar jQuery Mobile o cualquier otra herramienta para este propósito y bueno, eso sin mencionar que el costo monetario es mucho muy inferior.

Lo que hay que tener en cuenta

Es bueno recordar que las aplicaciones móbiles no deben ser complejar, el contenido debe invitar a los usuarios a navegar y al mismo tiempo a constuir un mapa de enlaces en la mente para que sepan como utilizarla casi inmediatamente. Eso significa que no se deben de pensar en interfaces complejas o en componentes que puedan confundir a quienes la usen. Jquery Mobile tiene como elementos básicos los componentes de formularios (input, select, checkbox, radio y button).. otros elementos serían las listas, barra de navegación y es todo.. igual que con jQuery hay desarrolladores externos que estan escribiendo plugins como por ej. datepickers o uploaders que son necesarios y no estan incluidos en la librería.

Utilizarlo con moderación

Creo que antes de decidir su uso o no.. deberían de tomar uno de los ejemplos de la página de ayuda y ver si es compatible con los dispostivos en los que pensarían utilizarlo.. por. ej. yo utilizo un Android 2.3 donde las imágenes y animaciones no son tan fluídas.. lo he probado en un iPhone 3GS y lo ví un poco torpe con las animaciones.. con el iPhone 4 se vé de maravilla al igual que con una tablet android con 3.0 y tampoco tuvo problemas..

—

Al final la aplicación que escribí es un ligero CRM con un enfoque hacia seguimiento de ventas.. si!! tarde 3 días en el desarrollo, aun es una versión beta y fue rápido hacerlo porque tras el código estuvo una arquitectura MVC.. si me animo quizás suba el código a github y luego al laboratorio de Qbit para que aprendan un poco sobre jQuery Mobile.

Y para finalizar el resultado final en un teléfono LG Optimus Black.. nada mal eh..!!

Mobile CRM

Mobile CRM

Compartir y Disfrutar

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon
c# / Jackfiallos / Java / javascript / php / Qbit / Ruby / tecnologia / vb — No Comments
24
ene 12

Remover elementos repetidos de un array php ruby java c# vb javascript

No Gravatar
Array remove duplicates items

Array remove duplicates items

Siguiendo la línea de publicar un post técnico y uno intelectual.. esta vez ha llegado el momento del post téncico.. lo que por mi actividad es muy fácil de escribirlo.. Esta entrada esta basada en la experiencia que tengo sobre algunos lenguajes y algo que es muy común de hacer y que muchos programadores escriben a su manera, unos porque no conocen el método y otros porque les gusta tener el control del código.

Este ejemplo se basa en eliminar los elementos duplicados de un arreglo, por ejemplo: (‘a’, ‘b’, ‘c’, ‘b’, ‘c’, ‘d’)

Php

$arreglo = array('a', 'b', 'c', 'b', 'c', 'd');
$filtro = array_unique($arreglo);

Ruby

arreglo = ['a', 'b', 'c', 'b', 'c', 'd']
filtro = arreglo.uniq

Java

Object[] arreglo = {'a', 'b', 'c', 'b', 'c', 'd'};
Set<Object> unst = new HashSet<Object>(Arrays.asList(arreglo));
Object[] filtro = unst.toArray();

C#

string[] arreglo = {'a', 'b', 'c', 'b', 'c', 'd'};
string[] filtro = arreglo.Distinct().ToArray();

Javascript

Array.prototype.unique = function() {
    var el = this.concat().sort();
    for (var i = 1; i < el.length; ) {
        if (el[i-1] === el[i])
            el.splice(i,1);
        else
            i++;
    }
    return el;
}
var filtro = ['a', 'b', 'c', 'b', 'c', 'd'].unique();

MaxScript

arreglo = #('a', 'b', 'c', 'b', 'c', 'd')
for i in arreglo.count to 1 by -1 do
(
    id = findItem arreglo arreglo[i]
    if (id != i) do deleteItem arreglo i
)

Seguramente hay muchas otras maneras de eliminar los elementos duplicados en los arreglos.. para lenguajes como maxscript, javascript o java.. pero al final se trata de lograr desarrollar la funcionalidad deseada.

El maestro de El Castor decia.. “No importa como lo hagas.. lo que importa es que funcione”..

Compartir y Disfrutar

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon
Internet / mootools / Proyectos / Qbit — No Comments
21
nov 08

Generacion de Eyetracking y Heatmap

No Gravatar

Inspirado en articulos de Jackob Nielsen en los que habla sobre Eyetracking que solamente se trata sobre los patrones de lectura que tienen los usuarios al visitar un sitio web.. es que he decidido iniciar una pequeña o al menos así pensé en su momento.. entonces una muy pequeña aplicación en la que pudiera obtener ese tipo de información a partir de las coordenadas de movimiento del mouse.. No se porque pero se me ocurrió que el mouse es nuestro acceso al medio digital por llamarlo así.. y normalmente en un porcentaje muy alto.. lo que leemos lo seguimos con el mouse.. talvez para no perdernos.. he de suponer que ha algunos les ha pasado que cuando llegan a un sitio y les cambian el mouse por algun tipo de muñequito o simplemente nos ocultan el mouse.. nos ponemos un poco desesperados.. y es que no muchas personas saben navegar si no es con el mouse..

La diferencia de lo que ya se ha hecho y lo que planteo hacer es que Eyetracking segun he leido se basa en algoritmos que toman las etiquetas de html y las procesan dandoles prioridades y valores segun estadisticas anteriormente tomadas de estudios de usabilidad. Lo que hare es un poco diferente.. ya que pretendo capturar los movimientos del mouse y registrarlos en un archivo.. que luego sería procesado por una script del lado del servidor que al final nos crearía una imagen llamada heatmap y que desvelaria las areas sencibles de nuestra web..

Quizás suene técnico y algo difícil de entender.. pero inicié con la idea ayer.. y hoy por la tarde ya he terminado con la aplicación del lado del cliente.. No se si sea buena idea.. pero he decidido hacerlo un plugin dependiente de Mootools..

Aparte de toda esta palabrería, el desarrollo de esta aplicación es motivada por la necesidad de conocer que es lo que más le importa a nuestros visitantes y que es lo que más les llama la atención.. todo esto solamente incluyendo el script en nuestro sitio web y listo.. Zeru por su parte me estara ayudando con la generación de la imagen.. el sabrá como hacerlo.. en eso no me incluyo..

Más adelante empezaré a dar más detalles al respecto..

, , , , ,

Compartir y Disfrutar

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon

Qbit Mexhico Blog is using WP-Gravatar