Showing posts with label js. Show all posts
Showing posts with label js. Show all posts

Tuesday, July 23, 2013

Backbone y Coffescript.


Hoy en día, ya existe un pequeño compilador para windows, todo comienza con instalar node.

0 - instalar node desde acá: http://nodejs.org/ ya existe msi para win, y para linux cualquier gestor de paquetes lo tiene.

1 - luego npm install cofffee-script

2 - Para compilar, coffee -c DirectorioConArchivosCoffee y los reemplazara la opción -o creará una nueva carpeta con los archivos compilados.

$ coffee -c backbone

3 - Luego para las plantillas, usé grunt.js, siguiendo un tutoríal que reseñé acá:

En cuanto al código de coffee-script y backbone,
soy nueva en el uso de ambos, por lo que lo reseño acá errores que me ocurrian:

TypeError: iterator is not a function 
Esto se generaba durante el uso del método each
de la librería underscore.js aplicandolo a collecciones,
revisar el orden y sintaxis del método each, y que exista la función.

Typeerror: this.model is not a constructor
Revisar en la definición del modelo, que el nombre
referido en la declaración de la collección coincida con
el nombre del modelo, en mi caso fue un misstyping,
también puede ser que el modelo no exista.

This template is not a function 
Esto ocurre cuando olvidé hacer el import mediante
 script src="./js/assets/backbone/car_form.js"
 type="text/javascript"  /script

del template, usualmente es un archivo js, backbone utiliza por defecto
underscore y cuando realiza:
CarFormView.prototype.template = 
JST["backbone/templates/car/car_form"];

y no consigue el archivo car_form.js, falla.

TypeError View is not a constructor
De igual forma que el anterior falta declarar el archivo.js en el html, con el
tag script, o la vista no se encuentra definida, no se ha realizado la declaración
de la vista.

Apuntes Sobre Estructura.

  1. Cada vista puede tener pequeñas vistas que la componen, así como las matrioskas.
  2. Cada view solo puede manejar eventos, añadir secciones a su ámbito definido.


  1. El Router = Controlador, varios tutoriales los mencionan haciendo referencia a lo mismo.
  2. El Modelo consta de:  initialize, defaults, methods.
  3. La Vista consta de: initialize, render, events, functions.
  4. el , objeto creado en el browser, todas las vistas poseen este
    objeto, por defectoo es un elemento div vacío. Cualquier evento monitoreado
    por la vista debe estar en este elemento.
  5. Collecciones, se podría ver como un arreglo de modelos,
    suelen usarse con un mismo  modelo.
  6. ¿Donde comenzar? 
    Añadiendo los Modelos, router, Templates y Vistas.
    Sin olvidar que: por cada edición revisar si se realiza el
    import de los scripts necesarios.
  7. Próximos pasos: Backbone y Amd..
Fotografía compartida con licencia Creative Commons:
acá está el dueñ@ http://www.flickr.com/photos/kiki-follettosa/2225844941/

Sunday, July 21, 2013

Testing code pretty Print.


this["JST"] = this["JST"] || {};
enlace con los diferentes estilos:
Estilos que admite
Soporta los siguientes lenguajes: prettify code

PD: imagen aleatoria de que al menos un repositorio ordenado y limpio tengo :)
cortesia de oh my zsh, recomendado. oh-my-zsh

Sunday, May 26, 2013

D3 js una alternativa, para hacer visualizaciones con Javascript.



En este caso realicé un treemap de las aplicaciones de cliente para twitter que usaron las personas para hacer tweets en el flisol 2012 y que tuvieran en su "location" alguna información o palabra de estados de venezuela, o venezuela en sus distintas formas y además que mostrara el tamaño del cuadro con respecto a la cantidad de followers que tiene el usuario:

El ejemplo del treemap fue tomado de acá: http://bl.ocks.org/mbostock/4063582

Y Quiero hacer estas modificaciones: http://www.billdwhite.com/wordpress/2012/12/16/d3-treemap-with-title-headers/

pero será para otro post y en otro tiempo:

El enlace del resultado está acá: Flisol 2012 App de Twitter

El código es Js y html, con un wget de esto les funcionará.

La data formateada la realicé con varios scripts.

0 Obtener la data de los usuarios de acuerdo a los Ids. los Ids los pueden conseguir acá:

Github J3nnn1 Ids Twitter 

1 Pasar de CSV a Json al fomato que recibe el layout de treemap.

importante:
Ayuda a corregir si un json está mal formado! :)

http://jsonformatter.curiousconcept.com/#jsonformatter