[Tips] Inicio de Escritorio y Botón de Inicio en Windows 8 RTM

Hola, este es un tip para todos los que no tenemos interfaces touch y que tenemos Windows 8 RTM y que tenemos nostalgia por el botón inicio. StarDock , empresa con experiencia en personalizaciones de Windows, nos trae un pequeño software beta que nos va a permitir tener el botón inicio con las opciones a las cuales ya estábamos acostumbrados, además permite bootear directamente en el escritorio clásico y muchas cosas más.

image

Visita la página, solo tienes que ingresar tu correo y te llega al mail en link de descarga:

http://www.stardock.com/products/start8/

image

también se puede personalizar:

image

Eso!, por lo menos, para mí es de gran utilidad.

@chalalo

Material Charla de ASP.NET Web API y MongoDB

Hola, acá les dejo los documentos y demos sobre ASP.NET API y MongoDB.

 
Los ejemplos que vimos en la charla disponibles para la descarga:

También el articulo que les nombré, sobre MongoDB vs SQL Server, muy interesante para revisar, de la mano de dos maestros:
http://geeks.ms/blogs/palvarez/archive/2011/11/17/hot-inserciones-masivas-en-mongodb-vs-sql-server.aspx

Saludos!
@Chalalo

[Tutorial] Comenzado con MVVM y Knockout.js – Parte 2: Propiedades Observables e Iteraciones.

Hola, vamos a continuar con el aprendizaje sobre MVVVM, si es primera vez que estas viendo este blog, te recomiendo ver primero el articulo introductorio de esta serie.

Hoy vamos a seguir revisando esta nueva forma de construir aplicaciones Web, revisaremos más posibilidades.

Si recordamos, ya teníamos creado nuevo viewmodel, ahora vamos revisar como crear propiedades observables, además de como crear colecciones y bindearlas a nuestro DOM.

Como seguimos del ejemplo anterior, quiero mostrar una captura de como va a quedar finalmente esta parte del ejemplo, luego seguiremos con más características.

image

Primero que nada, vamos a unir tal cual el ejemplo anterior , los campos input a los atributos del ViewModel. Para esto , hacemos “observable” todas los atributos del ViewModel.
Luego vamos a crear una propiedad que concatene el atributo nombre y el atributo apellido en una sola “nombreCompleto”, la cual también será de tipo “dependentObservable”, y que como puedes ver , pasa a ser una propiedad del PersonaViewModel.

Por ultimo tendremos una teléfonos, que va a ser un array también observable, más adelante veremos como agregar y eliminar objetos de la colección. Esta colección de teléfonos, es una función que hace de clase y tiene su propiedad numero también observable.

 <script type="text/javascript">

      function telefono(numero) {
             return {
                numero: ko.observable(numero)
             };
      }
 
     var PersonaViewModel = {
         nombre: ko.observable("Juan Pablo"),
         apellidos: ko.observable("Pérez Nuñez"),
         edad: ko.observable(1),
         telefonos: ko.observableArray([new telefono(234234),new telefono(565345)])
     };
 
     PersonaViewModel.nombreCompleto = ko.dependentObservable(function() {
           return this.nombre() + " " + this.apellidos();
     }, PersonaViewModel)
     ko.applyBindings(PersonaViewModel);
</script>      

Veamos ahora el HTML necesario para dar soporte a este ModelView.

  <ul>
      <li>El nombre es <span  data-bind="text:nombre"></span></li>
      <li>El apellido es <span  data-bind="text:apellidos"></span></li>
      <li>El edad es <span  data-bind="text:edad"></span></li>
  </ul> 
     <label for="tx_nombre">Nombre:</label>
     <input type="text" id="tx_nombre" data-bind="value:nombre" >
 
     <label for="tx_apellidos">Apellidos:</label>
     <input type="text" id="tx_apellidos" data-bind="value:apellidos" >
 
     <label for="tx_edad">Edad:</label>
     <input id="tx_edad" type="number"  data-bind="value:edad">
 
     <p>
        Nombre Completo :<span data-bind="text:nombreCompleto"></span>
     </p>
     <h4>Telefonos</h4>
     <ul data-bind="foreach: telefonos">
           <li><span data-bind="text: numero"></span></li>
     </ul>

Podemos ver que el binding se ha hecho en los input del formulario (le agregué un css con display:block para que en el despliegue se viera el input bajo el label). Como ya sabemos si cambiamos el campo en los textos vamos a ver de forma inmediata el cambio en el MV y también en el span del nombreCompleto. El Foreach de Knockout.js cambia desde las versión 2.0 y simplifica bastante las cosas, com ves, solo se indica el data-binding, la acción “foreach” y la colección, luego dentro, se hace el binding sobre el elemento a iterar y listo!

El Siguiente Gif Animado indica el funcionamiento:

mvvm2

Obviamente utilicé WebMatrix 2 (RC) para este ejemplo, excelente herramienta, si hasta tiene autocompletación de código para Knockout.js

image

Espero que te sirva el ejemplo y continuamos con más prontamente Sonrisa

Saludos!

@chalalo

[Tutorial] Comenzado con MVVM y Knockout.js

Hola que tal? Desde hace un tiempo ya tenía ganas de escribir sobre MVVM, no soy para nada un experto, simplemente quiero compartir mi proceso de aprendizaje.

Existen excelente artículos excelente sobre MVVM, espero que los puedas ver:

http://geeks.ms/blogs/etomas/archive/2012/07/31/y-el-combate-se-decidi-243-por-ko-i.aspx

¿Cómo funciona MVVM?

La idea es simple y buena, tener un modelo exclusivo para la capa de presentación, quizás sin quererlo ya habías hecho en algún momento algo parecido. El viewModel es “ModeloVista” que se adapta a las necesidades de la capa de presentación, muchas veces, existe un ViewModel específico para cada vista. Por otro lado vamos a tener el modelo que nos provee desde alguna fuente, los datos necesarios para “alimentar” nuestro viewModel.

 

Un elemento importante en este modelo es el binding, que permite unir uni o bidireccionalmente ciertos atributos y/o métodos del viewmodel a elementos del DOM, de esta manera, y utilizando el patrón observador, podemos tener sincronizado la vista con el viewModel con un mínimo esfuerzo.

image

¿Donde entra Knockout.js en todo esto?

Knockout.js es una biblioteca javascript, que nos ayuda a implementar este modelo MVVM. Dentro de las características especiales, tal cual indica en su página, nos permite:

  • Realizar Binding Declarativos
  • Resfresco automático de los elementos del UI, como decía, cuando se actualiza el modelovista, nuestra UI se actualiza automáticamente
  • Tracking de Dependencias, detecta los cambios realizados en la vista o en el modelo y es capaz de propagarlos .
  • Plantillas, permite  generar rapidamente plantillas en función de los datos del modelovista.

Además, tal como indica la página es totalmente libre, open source, totalmente construido sobre javascript, funciona con cualquier framework adicional, es bastante liviano, solo 40k minimizado, no tiene dependencias , soporte para IE6+, Firefox 2+.Chrome, Opera y Safari (versión móvil y de escritorio) y totalmente documentada.

Veamos nuestro primer ejemplo, siguiendo la documentación en: http://knockoutjs.com/documentation/observables.html#mvvm_and_view_models

Para el ejemplo voy a utilizar WebMatrix, para mi uno de los mejores editores de código grátis disponible, entonces voy a descargar la biblioteca y manos a la obra

Código del Ejemplo
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/knockout-2.1.0.js"></script>
    </head>
    <body>
        <h1>Ejemplo MVVM</h1> 
        <ul>
            <li>El nombre es <span  data-bind="text:nombre"></span></li>
            <li>El apellido es <span  data-bind="text:apellidos"></span></li>
            <li>El edad es <span  data-bind="text:edad"></span></li>
        </ul> 
          <script type="text/javascript">
            var PersonaViewModel = {
                nombre: "Juan Pablo
                apellidos: "Pérez Nuñez",
                edad: 1
                };
            ko.applyBindings(PersonaViewModel);
        </script>      
    </body>
</html>

Revisemos un poco el código antes de continuar, puedes ver que construimos un objeto javascript que tiene 3 atributos, estos atributos se van a bindear a los elementos span que tienen el tag  data-bind , el cual, si bien no es nativo de html5, es compatible con él.

Luego, y para realizar el binding, debemos invocar el metodo applyBindings de la biblioteca, pasandole como argumento nuestro ViewModel.

Algo muy bueno es que al momento de escribir nuestro código javascript con WebMatrix podemos ver que nos sugiere que propiedades enlazar:

image

Y listo!, el resultado es:

image

Como puedes ver se ha hecho el render en tags span con el atributo data-bind, ahora veamos un ejemplo con binding bidireccional, para eso vamos a incluir un input text, de manera que al escribir y/o cambiar la edad sobre este elemento, se modifique de manera inmediata el ViewModel.

Para esto tenemos que hacer la propiedad del ViewModel observable, esto lo logramos modificando la propiedad edad y agregando en input type con el data-bind:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
             <script type="text/javascript" src="js/knockout-2.1.0.js"></script>
      
    </head>
    <body>
        <h1>Ejemplo MVVM</h1> 
        <ul>
            <li>El nombre es <span  data-bind="text:nombre"></span></li>
            <li>El apellido es <span  data-bind="text:apellidos"></span></li>
            <li>El edad es <span  data-bind="text:edad"></span></li>
        </ul> 
        <input  data-bind="value:edad" type="number">
           
        <script type="text/javascript">
            var PersonaViewModel = {
                nombre: "Juan Pablo",
                apellidos: "Pérez Nuñez",
                edad: ko.observable(1)
                };
            ko.applyBindings(PersonaViewModel);
        </script>      
    </body>
</html>

image

Y todo funcionando tal cual queremos, cada vez que aumentas o disminuyes la edad, automáticamente se está actualizando al información del viewModel.

Bueno, ese ha sido nuestra pequeña introducción, voy a ir agregando nuevos tutoriales, que forman parte de mi proceso de aprendizaje Smile

Nos vemos en otro artículo!,

Saludos,

@chalalo

Conferencia MSDN -Desarrollo Avanzado en ASP.NET: MVC4 y Web Forms+ MongoDB

image

Hola colegas!, los quiero invitar al siguiente evento que se va a desarrollar en las oficinas de Microsoft Chile, evento en el que tengo la misión de ser el orador Smile, acá estan los datos:

En esta sesión revisaremos técnicas y patrones para la creación de sitios Web dinámicos en ASP.NET, utilizando los modelos de WebForms y el nuevo framework MVC 4 en la construcción de aplicaciones que adoptan las mejores prácticas de la industria. Adicionalmente, mostraremos de que forma podemos incluir almacenamiento NoSQL -como MongoDB para dar aun más agilidad y responsividad a nuestras aplicaciones. Finalizaremos la sesión discutiendo como podríamos aprovechar la escalabilidad de las plataformas Cloud Computing en este tipo de arquitecturas.

Lugar: Microsoft Chile – Sala Farellones y Colorado
Mariano Sanchez Fontecilla 310 Piso 6
Las Condes Santiago Región Metropolitana Chile

Fecha: 30 de agosto de 2012
Horario: 18:30 a 21:30 hrs.
Orador: Gonzalo Pérez C.

Registrate acá:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032522380&Culture=es-CL&community=0

Agéndalo!
https://msevents.microsoft.com/cui/AddToOulook.aspx?EventID=1032522380&culture=es-CL

INFORMACIÓN IMPORTANTE:

  • Si es primera vez que asistes a un evento en las oficinas de Microsoft se te solicitará el Carnet de Identidad al ingresar al edificio.
  • Microsoft se reserva el derecho de utilizar los espacios disponibles en la sala, una vez comenzado el evento.
  • Este evento no incluye el pago de estacionamiento.

Nos vemos allá!
Saludos,
@chalalo

Tips- jQueryUI no intrusivo en ASP.NET

Hola, ya que la tendencia está por el lado de Javascript no intrusivo, vamos a revisar como utilizar jQueryUI con esta misma técnica. Primero que nada debemos descargar jQueryUI y la correspondiente liberría que nos permitirá esta funcionalidad. Luego la librería específica para trabajar con jQuery no intrusivo.

Vamos a desarrollar un pequeño ejemplo con visual studio 2010.Primero que nada, vamos a constuir un website:

image

Luego escribimos en el Package Manager Console:

Install-Package jquery.ui.combined:

PM> Install-Package jquery.ui.combined

Intentando resolver la dependencia ‘jQuery (≥ 1.4.4)’.

‘jQuery 1.4.4’ se instaló correctamente.

‘jQuery.UI.Combined 1.8.22’ se instaló correctamente.

‘jQuery 1.4.4’ se agregó correctamente a WebSite1.

‘jQuery.UI.Combined 1.8.22’ se agregó correctamente a WebSite1.

 

Luego instalamos el Package que realizará la magia:

Install-Package unobtrusive.jquery.ui

PM> Install-Package unobtrusive.jquery.ui

Intentando resolver la dependencia ‘jquery (≥ 1.6.1)’.

‘jQuery 1.6.4’ se instaló correctamente.

‘unobtrusive.jquery.ui 0.2’ se instaló correctamente.

‘jQuery 1.4.4’ se quitó correctamente de WebSite1.

‘jQuery 1.6.4’ se agregó correctamente a WebSite1.

‘unobtrusive.jquery.ui 0.2’ se agregó correctamente a WebSite1.

‘jQuery 1.4.4’ se desinstaló correctamente.

Como puedes ver , la dependencia que resuelve de jquery es 1.6.1, que se agrega al proyecto, así que luego la podemos eliminar.

image

 

Ahora veamos el código, y es que acá esta lo entretenido, ya que generalemente lo que hacíamos para agregar funcionalidad a un control existente con jqueryui hacíamos, por ejemplo:

 

<link href="Content/themes/base/jquery-ui.css" rel="stylesheet"
    
 type="text/css"
/>

<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="Scripts/jquery-ui-1.8.22.min.js"
       
 type="text/javascript"></script
>

 

 <script type="text/javascript">

 

     $(function () {

         $("#<%= fecha.ClientID %>").datepicker({});

     });

</script>

En donde del campo al que le vamos a asignar el datapicker es un Textbox:

<asp:TextBox ID="fecha" runat="server"></asp:TextBox>

 

image

Ahora con la librería de no-intrusivo, podemos definir tag compatibles con HTML5 que van a indicar cual es el comportamiento que debería tener un control. Para esto vamos a incluir también la librería que descargamos hace unos momentos.

<script src="Scripts/jquery-ui.onobtrusive.min.js" type="text/javascript"></script>

Y ahora agregamos los atributos a cada control para indicarcale cual va será su comportamiento, al mismo estilo de jQueryMobile.

Voy a agregar tambien un Slider para que veamos que hay bastantes posiblidades a la hora de personalizar un control.

<h2>Slider</h2>

<div>

   Current value: <span id="slider-value">47</span>

   <div data-ui-fn="slider" data-ui-slider-animate="true"
        data-ui-slider-value
="47"

        data-ui-slider-slide="function (event, ui) { $(‘#slider-value’).text(ui.value); }">

   </div>

</div>

  <p>

    <asp:TextBox data-ui-fn="datepicker" 
         data-ui-datepicker-show-button-panel
="true"

         ID="fecha" runat="server"></asp:TextBox>

   </p>

El resultado es el siguiente:

image

Como puedes apreciar, no hay código Javascript involucrado (solo para el evento slide). Es interesante el enfoque en donde vamos separando aún más las responsabilidades de los componentes de nuestra aplicación.

Saludos!
@chalalo.