neverkas

Si hay algun link inapropiado y/o se considera spam pueden editarlo, ya que no son esas mis intenciones. Tutorial de Ember.js Hace bastante que no pasaba por aca, y me decidi en publicar algo que le sirva a la gente, quiero dejar mi granito de arena, para que otros también lo hagan, permitiendo que entre todos podamos enseñar y aprender. De esta manera a la hora de investigar o programar, nos resulte más sencillo hacerlo. Hoy voy a escribir sobre un framework javascript llamado "ember.js", este nos permite crear aplicaciones en tiempo real, sin necesidad de contratar un webhosting costoso, y hasta lo más increible es que lo podes utilizar en tu pc, sin tener que instalar ningun programa. Con solo un navegador web, y un editor de texto ya lo podes hacer... ¿Excelente, no? Las ventajas de utilizar este framework, es que corre bastante rápido al ser escrito en javascript, ya que corre del lado del frontend, esto quiere decir se ejecuta en el mismo navegador quien interpreta javascript, como vos a hablar en tu idioma. En este tutorial mencionaré algunas bibliotecas que podran utilizar en conjunto con esta tecnología web, facilitando el crear una aplicación mucho mas completa. Como última cosa antes de que empezemos, a mi me costó mucho aprender a utilizarla, ya que los tutoriales que uno encuentra aveces no estan del todo completos, o quizas no explican en detalle ciertas cosas que son fundamentales para entender que estamos haciendo, y que queremos lograr. Quiero destacar que esto es normal, ya que es una tecnología relativamente nueva, y existe documentación oficial, pero no siempre basta con sólo eso a la hora de llevarlo a la practica, no..? Recuerden que este tutorial esta escrito con la idea de que ya tengan un previo conocimiento de ember.js, con sólo leer un poco de la documentación oficial y extra oficial seguramente logren entenderlo. De todas maneras, lanzaré una tutorial un más básico, para aquellos que realmente quieren aprender, no desespereis!! Recursos Oficiales: Inspector de Ember en Chrome “Sólo sirve para la última versión” https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi/related Últimos archivos subidos de ember http://builds.emberjs.com.s3.amazonaws.com/ Charlas, Ejemplos http://emberwatch.com/ Conceptos http://www.emberist.com/ Foro: http://discuss.emberjs.com/latest/more Editor recomendado: Sublime Text - Editor muy liviano y completo escrito en python, carga en pocos segundos - Te permite programar de manera eficiente - Posee funcionalidades que optimizan el hecho de escribir código Link: http://www.sublimetext.com/ Bibliotecas recomendadas: jQuery.js - Es requerido y utilizado por muchas bibliotecas de javascript - Crear animaciones diversas de manera sencilla - Se intenta adaptar para todos los navegadores, evitando escribir codigo distinto para cada uno - Se esta integrando a la tecnologia mobile Link: http://jquery.com bootstrap.css - Permite desarrollar el diseño de una aplicación de manera rápida - Crear un estilo rápido a la aplicación sólo con clases - Genera una estructura web en pocos pasos Link: http://getbootstrap.com/ moment.js - Permite formatear una fecha - Convierte una fecha poco legible a una más entendible - Se puede utilizar para aplicaciones con timer Link: http://momentjs.com/ handlebars.js - Permite manejar el contenido de la aplicación desde un sistema de templates Link: http://handlebarsjs.com/ ember-data.js - Permite almacenar y manipular el contenido de la aplicación parsley.js - Permite validar distintos tipos de campos para un formulario - Podes validar solo agregando atributos al campo - No necesitas crear funciones con expresiones regulares Link: http://parsleyjs.org/ En los ejemplos que daremos a conocer utilizaremos las siguientes bibliotecas: jquery.js, handlebars.js, ember.js, ember-data.js Nota: Recomiendo agregarlas en ese orden para evitar conflictos a la hora de ejecutar la aplicación. 1. Como crear un Store 2. Como crear un Model 3. Como agregar datos a un Model 4. Como imprimir contenido en el template como atributo sin que diga <script> 5. Capturar el primer objeto sin usar forEach 6. Utilizar variables de la View en un Template 7. Utilizar funciones de la View en un template y retornen un valor con property 8. Utilizar propiedades computadas de un Object en un Template 9. Utilizar observes en una View 10. Separar contenido en varias Views y Templates 11. Bindear clases en un template 1. Como crear un Store // En este se guardaran los datos // Es como si fuera la Base de Datos, donde se guardan los registros // Guarda lo cargado en los Model App.Store = DS.Store.extend({ revision: 12, // este puede cambiar segun la version del ember-data }); 2. Como crear un Model // En el modelo definis el tipo de las variables a utilizar // Es como si definieras los campos de una base de datos App.ClientModel = DS.Model.extend({ name: DS.attr('string'), age: DS.attr(‘number’) }); 4. Como imprimir contenido en el template como atributo sin que diga <script> # En caso de ser un each <a href=”{{unbound this.link}}”>this.titulo</a> 5. Capturar el primer objeto sin usar forEach var productos= this.get('productos.firstObject'); var productoNuevo= App.get('productosConsultaController.content.firstObject'); Nota: Se suele utilizar para accceder a contenido que está dentro de un Object, evitando utilizar un forEach 6. Utilizar variables de la View en un Template // En el achivo de la view App.productoConsultaView = Em.View.extend({ templateName: 'productoConsulta', importadoArtesanal: false, // defino la variable como false didInsertElement: function(){ object = App.get('productoConsultaController.content.firstObject'); if(object.importado|| object.artesana) this.set('importadoArtesanal', true); // seteo la variable } }); // En el archivo del template {{#if view.importadoArtesanal}} Los elementos existen {{/if}} 7. Utilizar funciones de la View en un template y retornen un valor con property // En el caso de no hacerlo asi, hay que definir una variable al inicio de la view, y luego en el didInsertElement setearlo. (Me parece mas organizado hacerlo de esta manera, aunque la otra también es viable) // En el View puedeVerProducto: function(){ return (App.get('clienteController.content.permisos') != '' || App.get('clienteController.content.parte').length > 0); }.property('App.clienteController'), // En el template {{# if view.puedeVerProducto}} Un parte aqui {{else}} No puedes visualizar el producto {{/if}} 8. Utilizar propiedades computadas de un Object en un Template // En el archivo del Modelo App.Cliente = Em.Object.extend({ id: null, nombre: '', apellido: '', observaciones: '', observacionesLabel: function () { return this.get('observaciones').replace(/n/g, "<br/>"; }.property('observaciones'), }); // En el archivo del Controller var clientes = []; // Creo un object del tipo ember this.get('content').forEach(function (cliente) { clientes .addObject(App.Cliente.create(cliente)); }); this.set('content', clientes ); // En el archivo de la ClienteView App.ClienteView = Em.View.extend({ tagName: 'div', templateName: 'cliente', }); App.ClientesView = Ember.CollectionView.extend({ classNames : [], tagName: 'tbody', itemViewClass: App.ClienteView, }); // En el archivo del template {{view App.ClientesView contentBinding="App.clienteConsultaController.content"}} // En el template Invitados de la View InvitadosView <li>{{view.content.observacionesLabel}}</li> 9. Utilizar observes en una View 1) Agrego al final de la function como parametros los valores que se van a observar. (En este caso observamos cuando los campos del content cambian) (Se puede agregar varios campos a observar, mientras mas campos mas recursividad) 2) Dentro del function se llama a los campos que queremos 3) Podemos obtener o setear los valores de los campos 4) Podemos modificar otros campos en base a los campos observados con condicionales Nota: Estos campos se definen en el modelo a la hora de crear los objectos de ember Ejemplo App.actualizarClienteView = Ember.View.extend({ templateName: 'cliente-actualizar', tipoDeCliente: function(){ if(this.get('content.productos').length > 15) // Obtengo el valor siempre que cambie { this.set('content.clientePremium', true); } else { this.set('content.clientePremium', false); } }.observes('content.productos') // Agrego los campos que quiero observar }); 10. Utilizar observes en un campo con array de objects // En la View App.ProductosView = Ember.View.extend({ productos: [], didInsertElement: function () { this.set('productos', []); }, checkProductos: function(){ if(this.get('productos').length > 0) { this.set('faltanAgregarProductos', false); } else { this.set('faltanAgregarProductos', true); } }.observes('productos.@each'), }); Nota: Sino se coloca .@each en un campo contenga un array de objects, el observers no podrá observar los cambios del campo (cuando se agrega o borra elementos del mismo) 10. Separar contenido en varias Views y Templates 1) Chequeo con un condicional si tiene contenido 2) Hago un each por cada objeto, que tendra la view asignada, y el template que la view tenga asignado 3) A la vista le paso el atributo contentBinding con el contenido del each, y luego reutilizarlo en el otro template // 1° View App.peliculasView = Em.View.extend({ templateName: 'peliculas-listado', }); // 1° template <script type="text/x-handlebars" data-template-name="peliculas-listado"> {{# if App.peliculasController.content}} {{#each App.peliculasController.content}} {{view App.peliculasView contentBinding="this"}} {{/each}} {{/if}} </script> // 2° View App.peliculasItemView = Em.View.extend({ templateName: 'peliculas-item', }); // 2° Template <script type="text/x-handlebars" data-template-name="peliculas-item"> {{#each this.peliculas}} {{view App.clientesView contentBinding="this"}} {{/each}} </script> // 3° View App.clientesView = Em.View.extend({ templateName: 'cliente', premium: false, didInsertElement: function(){ if(this.get('content').premium== 1) this.set('premium', true); } }); // 3° Template <script type="text/x-handlebars" data-template-name="cliente"> {{#if view.falsificado}} <b> {{ this.cliente.premium}} </b> {{else}} <i> {{ this.cliente.premium}} </i> {{/if}} </script> 11. Bindear clases en un template En el archivo de la View App.ProductosView = Ember.View.extend({ producto: null, productoFaltaSeleccionar: false, guardar: function (){ if(this.get(‘producto’) == null) { this.set('productoFaltaSeleccionar', true); } else { this.set('productoFaltaSeleccionar', false); } } }); En el archivo del template <div {{bindAttr class="view.productoFaltaSeleccionar:productoSelectValidation:productoSelect"}} > <span>Titulo</span> </div> Nota 1: Campo > (if) si se cumple uso esta clase > (else) sino se cumple uso esta clase Nota 2: Si el valor del campo pasado es ‘true’ usa la primera clase, sino utiliza la tercera Todo el contenido es de mi autoria. Mi intención es compartir mi conocimiento con los demás, y que otros también se animen a hacerlo. Pido que si colocan lo mismo en otro sitio, den la fuente de donde lo sacaron, osea mi post xD.

A5 HTML5 Animator Crea tus animaciones de manera facíl con A5 HTML5 animator. Una poderosa aplicación que te permitirá crear animaciones, sin recurrir a flash. Tiene un diseño similar a los productos de adobe como el flash, para aquellos que ya lo hayan usado anteriormente. Desventajas de usar FLASH: -Consume muchos recursos -Instalar un plugin o aplicación para visualizar -No todas las plataformas permiten flash (algunos moviles) -Ya esta casi en desuso -No ayuda en nada con SEO Ventajas de usar HTML5: -Compatibilidad con los ultimos navegadores -Llamará mas la atención a tus clientes -Consume menos recursos -Animaciones como si fuera Flash -No instalar ningun plugin ni aplicación para visualizar lo hecho (solo el navegador) Ventajas de la aplicacion: -Linea de tiempo con animación de fotogramas. -Todos los efectos de HTML5 y CSS3 (Reflejos, sombras, bordes, rotacion en 3d, etc..) -Permite escribir y personalizar la animación integrando tu propio código JavaScript Sitio Oficial: A5 HTML5 Animator Agradecer no cuesta nada..!

Para aquellos que apenas empiezan con la programación, o para aquellos ya experimentados, aveces al leer un tutorial o manual se leen ciertas cosas que uno no entiende.. Bueno acá les dejo un par de cosas que les será de utilidad.. La documentación es escrita por mí, con mis palabras y documentación variada.. Si alguien publica esta documentación, se pide que coloque la fuente. Glosario - Palabras Técnicas Expresión Es una combinación de valores, variables y operadores. También una variable, y un valor se lo considera una expresión Sentencia condicional Sentencia que controla el flujo de ejecución del programa Recursividad El proceso de volver a llamar a la función que se esta ejecutando, dentro de la misma Bloque Un grupo de sentencias en el mismo sangrado (indentado) Anidamiento Una estructura del codigo dentro de otro Ej. Una sentencia condicional dentro de otra sentencia condicional # un if dentro de if Argumento Valor que se le pasa a una función que se llama Algoritmo Un proceso que permite resolver problemas Portabilidad Un lenguaje que se puede ejecutar en cualquier ordenador (lenguajes de Alto nivel) Depuración El proceso de hallazgo y eliminación de los 3 tipos de errores de programación Sintaxis La estructura de un programa Excepción Otro nombre para un error en ejecucion Error Semántico Un error en un programa que hace que ejecute algo no deseado Semántica El significado o propósito de un programa Concatenar Unir cadenas Palabras Reservadas Son las palabras que usa el compilador del lenguage utilizado Recursividad El proceso de volver a llamar a la función que se esta ejecutando, dentro de la misma Crear una función, y dentro de la misma llamarse a si mismo Se puede crear un bucle con una función, sin for ni while Ej. Un bucle que imprime en la consola de firefox (Este es en Javascript # Firebug ) function bucle(num){ if(num > 0){ console.log(num) bucle(num-1) } } bucle(5); # Imprime un bucle del 1 al 5 Nota: Imprime el numero - 1 hasta que el mismo sea mayor que 0, cuando llega a 0 ya no imprime, por eso el bucle. Lenguajes de Bajo nivel / Alto nivel Programacion de Bajo nivel Se los llama lenguaje de máquina, o lenguaje ensamblador Es el lenguaje que interactúa con la máquina Es un lenguaje que le resulta fácil ejecutar a la máquina Su sintaxis es más compleja que los demás para el humano Trabajan mucho más rápido, porque la máquina entiende este lenguaje Se pueden ejecutar en un solo tipo de ordenador Programacion de Alto Nivel Su sintaxis es más entendible y reducida Trabaja sobre la programación de Bajo nivel, aunque no se ve a simple vista Trabaja un poco mas lento, porque la maquina lo tiene que traducir Se puede ejecutar en cualquier tipo de ordenador (portabilidad) Criptografia Resguarda información cifrando el contenido contra personas ajenas Se compone por Encriptar & Hashear Por mas que se se encripte o hashee, la información puede ser vulnerable, usando algoritmos matemáticos. Dependiendo de la complejidad del algoritmo, y de la velocidad del CPU para realizar los calculos) Encriptar Permite releer la información encriptada Un sistema de cifrado de información que se puede recuperar Ej. Se puede encriptar un mensaje, para que otra persona lo pueda descifrar y entender. (Si se hiciera con hash, la otra persona no lo podría entender, porque no tiene vuelta atrás) Hashear (más difícil de descifrar) Cifra la información sin vuelta atrás Una vez cifrado no se puede releer su contenido Solo se puede comparar la información cifrada con la nueva a cifrar Ej. Hashear una clave secreta, si un extraño la encuentra, no sabrá cómo descifrarla, porque no tiene vuelta atrás. Unit Test (Prueba Unitaria) Refactorización de código Reestructurar el código interno sin modificar su funcionamiento Optimizar, reducir las lineas de código Permite tener un código legible, y facilitará mejorarlo Se lo conoce también como limpiar de codigo Refactorización trivial Es cambiar el nombre de las variables, a uno más lógico y entendible en base a lo que se usará. Ej. Cambiar la variable t por tiempo

No permita que una actualización de Windows le estropee el día Las actualizaciones de Windows suenan como una idea excelente: cada vez que Microsoft tiene un parche u otra mejora para su imperfecto sistema operativo, su computadora se lo comunica e incluso lo instala por usted. Sin embargo, las inquietudes suscitadas en cuanto a la privacidad al permitirse que Windows hiciera llamadas telefónicas regulares y discretas a Microsoft estallaron en escándalo cuando se descubrió que en las actualizaciones se incluía Windows Genuine Advantage, una herramienta contra la piratería que muchos de los que la recibieron consideran como un programa de espionaje (vea http://www.pcwla.com/buscar/06127801para más detalles). Pero adquirir un perro guardián indeseable no es el único riesgo que implican las actualizaciones de Windows. No tengo espacio aquí para cubrir todos los contratiempos que podrían causar los numerosos parches y complementos que Microsoft ha emitido para su SO. Estas sugerencias le pondrán en control de las actualizaciones y le ayudarán a salir airoso si experimenta problemas con un parche. Inutilice las instalaciones automáticas La mejor manera de resolver un problema al actualizar Windows es impedir que suceda en primer lugar. Si le preocupa que pueda contaminarse su sistema con Windows Genuine Advantage o con cualquier otra actualización cuestionable, dígale a Windows que no instale nada automáticamente: abra primero el Panel de control y en la vista por Categorías de XP pulse Centro de seguridad y luego Actualizaciones automáticas. Si tiene una versión de Windows anterior a XP –o si utiliza la vista Clásica de XP– haga doble clic sobre el icono de Actualizaciones automáticas o selecciónelo en el menú del Panel de control. Escoja la opción llamada Notificarme pero no descargar ni instalarlas automáticamente. De esa manera, cuando se entere de las actualizaciones que Windows quiere instalar, podrá ver de qué se tratan y leer las opiniones que circulan por la Internet antes de decidir si el riesgo vale la pena. También puede asegurar que su sistema no se reinicie por sí solo si usted no está presente y que, por ejemplo, bloquee el inicio de su copia de seguridad automatizada. Actualice las aplicaciones de Microsoft Si encuentra útil el Windows Update, tal vez le guste un sistema similar para mantener al día Office y otros productos de Microsoft. En caso positivo, abra Internet Explorer y navegue hasta update.microsoft.com. Si ve un titular que dice “Get Microsoft Update today!”, pulse el botón Go; de lo contrario, pulse el vínculo Express que aparece justamente debajo del título Windows Update. Siga las instrucciones para instalar el software necesario. Microsoft Update emplea las mismas configuraciones automáticas de Windows Update. Arregle las actualizaciones rotas A veces Windows Update le dice que aplique correcciones parciales, pero las cosas salen mal. Otras veces usted instala exitosamente una actualización pero, cuando regresa, Windows le informa que necesita instalar la misma actualización. Para estas situaciones haga lo siguiente: Encuentre al culpable: Para identificar la actualización que no funciona, visite el sitio Windows Update o Microsoft Update. Puede llegar allí seleccionando Inicio•Todos los programas•Windows Update (o Microsoft Update) o Inicio•Windows Update (o Microsoft Update). En el sitio, pulse Revisar su historial de actualizaciones, a la izquierda. El navegador le mostrará una marca verde junto a las actualizaciones que ha instalado exitosamente y una x roja para indicar las que no tiene. Las actualizaciones problemáticas probablemente aparecerán muchas veces en esta lista. Elimine el rojo: Para poder determinar lo que pasó con las actualizaciones marcadas con un icono rojo hay que informarse bien. Pulse la X roja en el navegador para ver más sugerencias. Anote el nombre o el código del error ocurrido durante la instalación y entonces abra Internet Explorer para visitar el sitio Microsoft Windows Update Troubleshooter en http://www.pcwla.com/buscar/06127901 (al igual que pasa con Windows Update, probablemente tendrá que usar IE, no Firefox ni otro navegador). Oprima <Ctrl>-F para encontrar el error en esta página. Pulse el vínculo para enterarse de los detalles. Si no encuentra el error, visite support.microsoft.com. Escriba el código del error en el cuadro Search Support (KB) y oprima <Intro>. Para otras estrategias relacionadas con las actualizaciones, visite http://www.pcwla.com/buscar/06127902, o busque en groups.google.com para ver lo que otros usuarios han hecho para resolver el problema. Revise y limpie: A veces una actualización muestra un icono verde en su historial de actualización pero todavía le pide repetidamente que lo instale. Primero, visite http://www.pcwla.com/buscar/06127903 para bajar e instalar la herramienta Malicious Software Removal Tool de Microsoft. El programa se actualiza mensualmente así que, aunque lo haya usado antes, es posible que necesite una nueva versión. Baje y abra el archivo, y siga las instrucciones que aparecen en la pantalla. Si después de usar esta herramienta no desaparecen las repetidas solicitudes de actualización, revise su sistema para buscar programas de espionaje y virus. Vaya a http://www.pcwla.com/buscar/06127904 para bajar nuestras herramientas de seguridad favoritas. Pruebe con el Modo seguro: Si las revisiones del sistema no ponen fin a los tediosos recordatorios de actualización, desinstale la actualización quisquillosa y vuélvala a instalar, pero esta vez desde el Modo seguro. Regrese al sitio de Windows Update o Microsoft Update y anote los seis de números que siguen a las letras “KB” en el nombre de la actualización en su historial de instalación. Entonces escoja Inicio•Ejecutar, escriba appwiz.cpl y oprima <Intro> para abrir Agregar o quitar programas. Si es necesario seleccione ‘Nombre’ en la lista de 'Ordenar por'. Asegure que esté marcada la opción Mostrar actualizaciones. Seleccione la actualización que concuerde con el número KB y pulse el botón Quitar, a la derecha. Siga las indicaciones restantes para eliminar la actualización. A continuación, diríjase a http://www.microsoft.com/downloads y en el cuadro de búsqueda para All downloads, escriba el número KB de la actualización problemática. Bájela a su escritorio de Windows, pero no la instale. En lugar de esto, reinicie su PC y mientras arranca (pero antes de que Windows se cargue), oprima <F8> para mostrar el menú de Opciones avanzadas. Use las teclas de flechas para seleccionar el Modo seguro (si fuera necesario) y oprima <Intro>. Instale la actualización haciendo doble clic sobre el archivo en su escritorio y vuelva a iniciar su PC. Como explicamos en estos recursos, los problemas frecuentemente se deben a una actualización particular. Por ejemplo, la actualización de seguridad 819696 de Windows instala DirectX 9.0b (un componente de Windows que mejora su capacidad para multimedios). Pero en algunos casos, Windows Update puede pedirle continuamente que instale esta actualización aunque DirectX 9.0b ya está instalado. Si es así, Microsoft recomienda que reinstale DirectX usando la versión que encontrará en find.pcworld.com/54954. -Scott Dunn Fuente: http://www.pcwla.com/pcwla2.nsf/consejo/36EB7DFEB0F2BDA08525723700613CFD

Decidí hacer un vídeo reflexivo, para quienes quieran escucharlo y compartirlo. Fue grabado una sola vez, sin edición, la música de fondo es con los parlantes, la calidad no es la mejor, espero que les agrade. Soy el autor de la letra, se darán cuenta al final de la misma, el desenlace solo tómenlo con humor.. Link: http://www.youtube.com/watch?v=Muj15HutiN0