Curso de Inteligencia Artificial en el Browser con JavaScript

 

Entrenamiento - Desarrollo de Aplicaciones Comerciales con Python (DACP 2025)

Desarrollo de Aplicaciones Comerciales con Python (DACP 2025)

Contenido del Programa:

Módulo 1: Fundamentos de Programación en Python con Aplicaciones de Consola

- El Lenguaje Python

- Estructuras de Datos

- Usando las Librerias Estandar

- Manejo de Archivos y Directorios

- Persistencia de Datos (Serialización)

- Compresión de Datos y Archivos

- Cifrado de Datos y Archivos

- Servicios Genéricos del Sistema Operativo

- Programación Asincrona, Paralelismo y Concurrencia (APC)

- Protocolos y Comunicación en Internet: HTTP, SMTP

- Acceso a Bases de Datos SQL Server con PyOdbc

Módulo 2: Desarrollo de Aplicaciones Windows en Python con PyQT

- Introducción a PyQT

- Trabajando con Diálogos en PyQT

- Usando Controles Basados en Items (Item Widgets)

- Usando Controles Basados en Modelos (Model Widgets)

- Personalizando el Control QTableView

- Mantenimiento de Datos usando QTableView

- Reportes e Impresiones en PyQT usando QPainter y QtPrintSupport

- Gráficos de Datos en PyQT usando PIL, QPainter y Matplotlib

- Aplicacion completa con Login y Menu Principal dinamico

- Programación Asincrona con QThread

Módulo 3: Desarrollo de Aplicaciones Web en Python con Django

- Introducción al Desarrollo Web: BackEnd (Django) y FrontEnd (HTML+JavaScript)

- Creando Aplicaciones de Consultas: Conectadas y Desconectadas

- Creando una Librería de JavaScript con Controles Básicos: Grid, TextList

- Creando una Librería de JavaScript con Controles Avanzados: TreeView, Grid+

- Mantenimiento (CRUD) de una Tabla con Imagen en Popups (SPA)

- Exportación de Datos a Texto, Excel, Word y PDF

- Creando Gráficos de Datos: Canvas y SVG

- Sistema con Login, TreeView, iFrame con Código Genérico

- Carrito de Compras con Login, Imágenes y Seguridad

- Trabajar con Archivos Grandes usando Bloques

- Trabajar con Miles de Registros: Consultar y Grabar

Módulo 4: Integracion de Aplicaciones usando Servicios Web y Web Sockets

- Introducción a los Servicios Web

- Servicios Web de Consulta de Datos

- Servicios de Mantenimiento de Datos (CRUD)

- Servicio de Manejo de Archivos por Bloques

- Creando un Servidor WebSocket en Python

- Creando un Cliente WebSocket en PyQT con QtWebSockets

- Creando un Cliente Web en JavaScript con WebSocket

- Manejo de Documentos en Tiempo Real

- Registro de Asistencia de Empleados en Tiempo Real

- Registro de Incidentes en Tiempo Real con Mapas

Datos del Programa:

Duración: 8 meses

Requisitos: Conocimientos de Programación y Bases de Datos

Modalidad: Online Virtual

Costo Mensual: 300 soles (USD 80 para extranjeros)

Horario: Martes y Jueves de 7:00 pm a 11:00 pm

Inicio: Martes 7 de Enero del 2025

Registro en el Programa:

Los interesados deberán enviar un mail a Luis.duenash@gmail.com:

Asunto: DACP 2025

Nombre Completo: XXXXXXXXXXXXX

Documento de Identidad: XXXXXX

Lugar de Procedencia: Ciudad/Pais

Ha llevado Cursos antes con Lduenas: Si/No

Si es nuevo como se entero: Blog/LinkedIn/Facebook/UnAlumno

El Libro del Día: JavaScript Creativity

El Libro del Día: 2016-04-06

Titulo: JavaScript Creativity
Autor: Shane Hudson
Editorial: Apress
Nro Paginas: 171

Capítulos:
Chapter 1: Introduction
Chapter 2: Canvas and Animation Basics
Chapter 3: Audio and Video Basics
Chapter 4: Beginning 3D
Chapter 5: Creating Music in the Browser
Chapter 6: The Music Player
Chapter 7: Real-time Collaboration with Node.js
Chapter 8: Video-to-Video Using WebRTC
Chapter 9: Motion Detection
Chapter 10: Interacting with the Browser Using Gestures
Chapter 11: Appendix

Descarga:
JavaScript_Creativity

Entrenamiento - Taller ASP.NET MVC & JavaScript Domingos

Ultimo Mes del Taller de ASP.NET MVC & JavaScript Domingos

Por el presente post quiero agradecer a todos los asistentes al Taller de los Domingos, esperando que se haya cubierto sus expectativas y a la vez informarles que iniciamos el último mes este Domingo 13 de Marzo.

Los temas a tratar serán los siguientes:
- Gráficos interactivos con SVG
- Programación Distribuida con Servicios WCF (alojados en IIS y en su propio Host)
- Programación Distribuida con Servicios Web API: HttpClient (C#) y XHR (JavaScript)
- Programación en Tiempo Real con WebSockets
- Programación en Tiempo Real con WebRTC, etc.

Como siempre los Demos serán originales y 100% aplicables a su trabajo.

Los que no pudieron asistir, les dejo el Lnk de mi canal de YouTube que tiene videos de cursos de ASP.NET MVC & JavaScript:

Canal de Luis Dueñas

Si les gusta los videos, nada les cuesta un Like.

Nos vemos este Domingo.

El Libro del Día: React Native for iOS Development

El Libro del Día: 2016-02-04

Titulo: React Native for iOS Development
Autor: Akshat Paul, Abhishek Nalwaya
Editorial: Apress
Nro Paginas: 179

Capítulos:
Chapter 1: Learning the Basics: A Whistle-Stop Tour of React
Chapter 2: The Simplest Program: Hello World with React Native
Chapter 3: Canvas, Brush, and Paint: Working with the User Interface
Chapter 4: Flux: Solving Problems Differently
Chapter 5: Device Capabilities
Chapter 6: Communicating with Servers
Chapter 7: React Native Supplements

Descarga:
React_Native_for_iOS_Development

Entrenamiento - Vacantes Taller ASP.NET MVC & JavaScript Domingos

Vacantes Taller ASP.NET MVC & JavaScript Domingos

A los interesados en participar en el Taller de ASP.NET MVC & JavaScript, les comunico que pueden incorporarse para el inicio del tercer mes (Domingo 7 de Febrero de 8:00 am a 2:00 pm)

Los temas que ya se trataron fueron:
- Primer mes: Programando en el servidor web con C# (Creación de Librerías Genéricas y Serializadores)
- Segundo mes: Programando con JavaScript en el Cliente (Listar, Filtrar, Ordenar, Paginar, Exportar)

Los temas a tratar en este mes serán:
- Tercer mes: Mantenimiento, Cabecera Detalle, Reportes, Gráficos, Canvas, SVG, WebWorkers

La inversión del curso es de 200 soles y se paga en efectivo el primer día de clases y para participar hay que enviar un mail de confirmación a Luis.duenash@gmail.com indicando su nombre completo y se le enviará la dirección donde se realiza el curso que es en el cono norte.

Hay muchos que están en duda y quieren participar pero se les complica el horario o dicen que esta muy lejos, por lo cual esperan otra oportunidad. Solo les recuerdo que ya no habrá mas oportunidades porque ya no pienso seguir dictando talleres y las librerías de código y los ejemplos solo se las comparto a los alumnos de los talleres.

Los que han sido mis ex-alumnos y no se han enterado, ya no existe ISILTECH y la única forma de llevar un curso conmigo es participando en los Talleres de los Domingos. Finalmente, los temas que se ven son diferentes a los que dictaba hace mas de un año, todo es de lado del cliente (super veloz), es decir, mas del 80% de código es JavaScript y solo un 20% es .NET (C#).

El Libro del Día: HTML5 Game Development by Example

El Libro del Día: 2015-08-13

Titulo: HTML5 Game Development by Example
Autor: Makzan
Editorial: Packt
Nro Paginas: 354

Capítulos:
Chapter 1: Introducing HTML5 Games
Chapter 2: Getting Started with DOM-based Game Development
Chapter 3: Building a Card-matching Game in CSS3
Chapter 4: Building the Untangle Game with Canvas and the Drawing API
Chapter 5: Building a Canvas Game's Masterclass
Chapter 6: Adding Sound Effects to Your Games
Chapter 7: Saving the Game's Progress
Chapter 8: Building a Multiplayer Draw-and-Guess Game with WebSockets
Chapter 9: Building a Physics Car Game with Box2D and Canvas
Chapter 10: Deploying HTML5 Games

Descarga:
HTML5_Game_Development_by_Example

El Libro del Día: Pro HTML5 with Visual Studio 2015

El Libro del Día: 2015-07-15

Titulo: Pro HTML5 with Visual Studio 2015
Autor: Mark J. Collins
Editorial: Apress
Nro Paginas: 435

Capítulos:
Part I: What is HTML5
Chapter 1: Before You Begin
Part II: Using the New HTML5 Features
Chapter 2: ASP.NET Web Forms
Chapter 3: MVC Web Applications
Chapter 4: Cascading Style Sheets
Chapter 5: Scripting Enhancements
Chapter 6: Mobile Web Applications
Part III: Digging Deeper
Chapter 7: Supporting Older Browsers
Chapter 8: Audio and Video
Chapter 9: Scalable Vector Graphics
Chapter 10: Canvas
Part IV: Advanced Features
Chapter 11: Indexed DB
Chapter 12: Geolocation and Mapping
Chapter 13: WebSockets
Chapter 14: Drag and Drop
Part V: Appendixes
Appendix A: Sample Content for Chapter 4
Appendix B: Completed Style for Chapter 4
Appendix C: Final Code for Chapter 14

Descarga:
Pro_HTML5_with_Visual_Studio_2015

El Libro del Día: Beginning HTML5 Media (2nd Edition)

El Libro del Día: 2015-07-14

Titulo: Beginning HTML5 Media (2nd Edition)
Autor: Silvia Pfeiffer, Tom Green
Editorial: Apress
Nro Paginas: 295

Capítulos:
Chapter 1: Encoding Video
Chapter 2: Using and Manipulating HTML5 Video and Audio Elements
Chapter 3: The JavaScript API
Chapter 4: Accessibility, Internationalization, and Navigation
Chapter 5: HTML5 Video and Canvas
Chapter 6: Manipulating Audio Through the Web Audio API

Descarga:
Beginning_HTML5_Media

El Libro del Día: Advanced Game Design with HTML5 and JavaScript

El Libro del Día: 2015-07-06

Titulo: Advanced Game Design with HTML5 and JavaScript
Autor: Rex van der Spuy
Editorial: Apress
Nro Paginas: 540

Capítulos:
Chapter 1: Level Up
Chapter 2: The Canvas Drawing API
Chapter 3: Working with Game Assets
Chapter 4: Making Sprites and a Scene Graph
Chapter 5: Making Things Move
Chapter 6: Interactivity
Chapter 7: Collision Detection
Chapter 8: Juice It Up
Chapter 9: Sound with the Web Audio API
Chapter 10: Tweening
Chapter 11: Make Your Own Game Engine
Appendix A: Vectors for Movement and Collision Detection

Descarga:
Advanced_Game_Design_with_HTML5_and_JavaScript

El Libro del Día: HTML5, JavaScript, and jQuery

El Libro del Día: 2015-06-25

Titulo: HTML5, JavaScript, and jQuery. 24 Hour Trainer
Autor: Dane Cameron
Editorial: Wrox
Nro Paginas: 411

Capítulos:
PART I: HTML AND CSS
LESSON 1: INTRODUCTION TO HTML5
LESSON 2: BASIC HTML
LESSON 3: LISTS AND TABLES
LESSON 4: INTRODUCTION TO CSS
LESSON 5: STRUCTURING PAGES WITH CSS
LESSON 6: HTML FORMS
LESSON 7: SEMANTIC TAGS
LESSON 8: HTML5 VALIDATION
LESSON 9: DRAG AND DROP
LESSON 10: DYNAMIC ELEMENTS
PART II: DYNAMIC HTML5 WEB APPLICATIONS WITH JAVASCRIPT AND JQUERY
LESSON 11: JAVASCRIPT 95
LESSON 12: DEBUGGING
LESSON 13: FUNCTIONS
LESSON 14: OBJECTS
LESSON 15: JSON
LESSON 16: DOCUMENT OBJECT MODEL
LESSON 17: JQUERY SELECTION
LESSON 18: JQUERY TRAVERSAL AND MANIPULATION
LESSON 19: JQUERY EVENTS
LESSON 20: DATA ATTRIBUTES AND TEMPLATES
LESSON 21: JQUERY PLUGINS
PART III: HTML5 MULTIMEDIA
LESSON 22: HTML5 AUDIO
LESSON 23: HTML5 VIDEO
LESSON 24: CANVAS: PART I
LESSON 25: CANVAS: PART II
LESSON 26: CSS3: PART I
LESSON 27: CSS3: PART II
LESSON 28: CSS3 MEDIA QUERIES
PART IV: HTML5 APIS
LESSON 29: WEB SERVERS
LESSON 30: WEB STORAGE
LESSON 31: INDEXEDDB
LESSON 32: APPLICATION CACHE
LESSON 33: WEB WORKERS
LESSON 34: FILES
LESSON 35: AJAX
LESSON 36: PROMISES
PART V: MOBILE
LESSON 37: RESPONSIVE WEB DESIGN
LESSON 38: LOCATION API
LESSON 39: JQUERY MOBILE: PART I
LESSON 40: JQUERY MOBILE: PART II

Descarga:
HTML5_JavaScript_and_jQuery_24_Hour_Trainer

El Libro del Día: Eloquent JavaScript

El Libro del Día: 2015-03-12

Titulo: Eloquent JavaScript (Second Edition)
Autor: Marijn Haverbeke
Editorial: No Starch Press
Nro Paginas: 478

Capítulos:
PART I: LANGUAGE
Chapter 1: Values, Types, and Operators
Chapter 2: Program Structure
Chapter 3: Functions
Chapter 4: Data Structures: Objects and Arrays
Chapter 5: Higher-Order Functions
Chapter 6: The Secret Life of Objects
Chapter 7: Project: Electronic Life
Chapter 8: Bugs and Error Handling
Chapter 9: Regular Expressions
Chapter 10: Modules
Chapter 11: Project: A Programming Language
PART II: BROWSER
Chapter 12: JavaScript and the Browser
Chapter 13: The Document Object Model
Chapter 14: Handling Events
Chapter 15: Project: A Platform Game
Chapter 16: Drawing on Canvas
Chapter 17: HTTP
Chapter 18: Forms and Form Fields
Chapter 19: Project: A Paint Program
PART III: BEYOND
Chapter 20: Node.js
Chapter 21: Project: Skill-Sharing Website
Chapter 22: JavaScript and Performance
Exercise Hints

Descarga:
Eloquent_JavaScript

El Demo del Día: Graficar Datos en el Cliente en ASP.NET MVC con JSON, Canvas y JavaScript

Graficar Datos en el Cliente en ASP.NET MVC con JSON, Canvas y JavaScript

Después de un par de semanas sin publicar un demo, les presento un post muy interesante de como trabajar en forma desconectada en el cliente para realizar consultas y gráficos de datos en ASP.NET MVC para lo cual usaremos jQuery, JSON, Canvas y JavaScript.

Requerimiento

Se desea crear una aplicación web que permita consultar los productos por categoría y mostrar los datos mas gráficos de diferentes tipos: Barras, Columnas, Lineas y Pie, pero el requisito es que sea desconectada tanto del Servidor de Datos como del Servidor Web, es decir, el filtro para la consulta y el gráfico se hará en el cliente.

Solución

- Crear una aplicación en ASP.NET MVC con un método de acción que se conecte a la BD una sola vez y devuelva un objeto con 2 listas: categorías y productos.
- Devolver una vista al cliente con la lista de categorías y la lista de tipos de gráficos.
- Ni bien carga la vista en el cliente hacer una llamada asíncrona usando $.ajax de jQuery para llamar a un método de acción que devuelva la lista de productos en formato JSON.
- Cuando el usuario seleccione una Categoría o seleccione un Tipo de Gráfico se llamará a una función JavaScript que filtrará los datos por la categoría seleccionada y los presentará en una tabla además lo dibujará en un Canvas.

Crear el Procedimiento Almacenado en la Base de Datos de SQL Server

Para el ejemplo usaremos la Base de Datos Northwind de SQL Server, en la cual crearemos el siguiente Procedimiento almacenado:

Create Procedure [dbo].[uspCategoriesProductsListar]
As
Select CategoryID,CategoryName From Categories
Select ProductID,ProductName,SupplierID,CategoryID,UnitPrice,UnitsInStock From Products

Crear la Librería de Clases Entidades del Negocio

Crear la librería de clases llamada: "Northwind.Librerias.EntidadesNegocio" y agregar la clase "beCategoria.cs":

namespace Northwind.Librerias.EntidadesNegocio
{
    public class beCategoria
    {
        public int IdCategoria { get; set; }
        public string Nombre { get; set; }
    }
}

Agregar otra clase a la librería llamada "beProducto.cs":

namespace Northwind.Librerias.EntidadesNegocio
{
    public class beProducto
    {
        public int IdProducto { get; set; }
        public string Nombre { get; set; }
        public int IdProveedor { get; set; }
        public int IdCategoria { get; set; }
        public decimal PrecioUnitario { get; set; }
        public short Stock { get; set; }
    }
}

Finalmente, agregar una clase llamada "beCategoriaProducto.cs" que agrupe las 2 listas:

using System;

using System.Collections.Generic;

namespace Northwind.Librerias.EntidadesNegocio

{

    public class beCategoriaProducto

    {

        public List<beCategoria> ListaCategoria { get; set; }

        public List<beProducto> ListaProducto { get; set; }

    }

}

Grabar y compilar la Librería de Entidades del Negocio.

Crear la Librería de Acceso a Datos

Crear la librería de clases llamada: "Northwind.Librerias.AccesoDatos", referenciar a la librería de clases de entidades creada anteriormente y agregar la clase "daCategoriaProducto.cs" y escribir el siguiente código:

using System;
using System.Collections.Generic; //List
using System.Data; //CommandType, CommandBehavior
using System.Data.SqlClient; //SqlConnection, SqlCommand, SqlDataReader
using Northwind.Librerias.EntidadesNegocio; //beCategoriaProducto, beCategoria, beProducto

namespace Northwind.Librerias.AccesoDatos
{
    public class daCategoriaProducto
    {
        public beCategoriaProducto obtenerListas(SqlConnection con)
        {
            beCategoriaProducto obeCategoriaProducto = new beCategoriaProducto();
            List<beCategoria> lbeCategoria = null;
            List<beProducto> lbeProducto = null;

            SqlCommand cmd = new SqlCommand("uspCategoriesProductsListar", con);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlDataReader drd = cmd.ExecuteReader();
            if (drd != null)
            {
                lbeCategoria = new List<beCategoria>();
                beCategoria obeCategoria;
                int posIdCat = drd.GetOrdinal("CategoryID");
                int posNomCat = drd.GetOrdinal("CategoryName");
                while (drd.Read())
                {
                    obeCategoria = new beCategoria();
                    obeCategoria.IdCategoria = drd.GetInt32(posIdCat);
                    obeCategoria.Nombre = drd.GetString(posNomCat);
                    lbeCategoria.Add(obeCategoria);
                }
                obeCategoriaProducto.ListaCategoria = lbeCategoria;
                if (drd.NextResult())
                {
                    lbeProducto = new List<beProducto>();
                    int posIdProducto = drd.GetOrdinal("ProductID");
                    int posNombre = drd.GetOrdinal("ProductName");
                    int posIdProveedor = drd.GetOrdinal("SupplierID");
                    int posIdCategoria = drd.GetOrdinal("CategoryID");
                    int posPrecioUnitario = drd.GetOrdinal("UnitPrice");
                    int posStock = drd.GetOrdinal("UnitsInStock");
                    beProducto obeProducto;
                    while (drd.Read())
                    {
                        obeProducto = new beProducto();
                        obeProducto.IdProducto = drd.GetInt32(posIdProducto);
                        obeProducto.Nombre = drd.GetString(posNombre);
                        obeProducto.IdProveedor = drd.GetInt32(posIdProveedor);
                        obeProducto.IdCategoria = drd.GetInt32(posIdCategoria);
                        obeProducto.PrecioUnitario = drd.GetDecimal(posPrecioUnitario);
                        obeProducto.Stock = drd.GetInt16(posStock);
                        lbeProducto.Add(obeProducto);
                    }
                    obeCategoriaProducto.ListaProducto = lbeProducto;
                }
                drd.Close();
            }
            return (obeCategoriaProducto);
        }
    }
}

Grabar y compilar la librería de acceso a datos creada.

Crear la Librería de Reglas del Negocio

Crear la librería de clases llamada: "Northwind.Librerias.ReglasNegocio", referenciar a la librería de clases de entidades y también a la de acceso a datos, luego agregar la clase "brCategoriaProducto.cs" y escribir el siguiente código:

using System;
using System.Configuration; //ConfigurationManager
using System.Data.SqlClient; //SqlConnection
using System.Collections.Generic; //List
using Northwind.Librerias.EntidadesNegocio; //beCategoriaProducto
using Northwind.Librerias.AccesoDatos; //daCategoriaProducto

namespace Northwind.Librerias.ReglasNegocio
{
    public class brCategoriaProducto:brGeneral
    {
        public beCategoriaProducto obtenerListas()
        {
            beCategoriaProducto obeCategoriaProducto = null;
            string CadenaConexion = ConfigurationManager.ConnectionStrings["conNW"]
                                                     .ConnectionString;
            using (SqlConnection con = new SqlConnection(CadenaConexion))
            {
                try
                {
                    con.Open();
                    daCategoriaProducto odaCategoriaProducto = new daCategoriaProducto();
                    obeCategoriaProducto = odaCategoriaProducto.obtenerListas(con);
                }
                catch (SqlException ex)
                {
                    //grabarLog(ex);
                }
                catch (Exception ex)
                {
                    //grabarLog(ex);
                }
            } //con.Close(); con.Dispose();
            return (obeCategoriaProducto);
        }
    }
}

Nota: También es necesario hacer una referencia a la librería "System.Configuration" para leer la cadena de conexión definida en la aplicación.

Grabar la librería de reglas de negocio creada y compilarla.

Crear una Aplicación Web de ASP.NET MVC4 en C#

Seleccionar un nuevo proyecto de tipo: "Aplicación web de ASP.NET MVC4" y escribir como nombre "Canvas_GraficosDatos", luego seleccionar la opción "Vacio" y como motor de vista "Razor" y "Aceptar".

Crear un Controlador para el Producto

Clic derecho a la carpeta Controllers y seleccionar "Agregar" y luego "Controlador", llamarle al archivo "ProductoController.cs" y en opciones de plantillas dejarlo en plantilla vacía (Vaciar Controlador MVC). Luego escribir el siguiente código:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Northwind.LibBusEntities;
using Northwind.LibBusRules;

namespace HT03_Canvas_GraficosDatos.Controllers
{
    public class ProductoController : Controller
    {
        public ActionResult Lista()
        {
            List<string> tipoGrafico = new List<string>();
            tipoGrafico.Add("Barras");
            tipoGrafico.Add("Columnas");
            tipoGrafico.Add("Lineas");
            tipoGrafico.Add("Pie");
            ViewBag.Tipo = tipoGrafico;
            brCategoriaProducto obrCategoriaProducto = new brCategoriaProducto();
            beCategoriaProducto obeCategoriaProducto = obrCategoriaProducto.Listar();
            Session["Productos"] = obeCategoriaProducto.ListaProducto;
            return View(obeCategoriaProducto.ListaCategoria);
        }

        public JsonResult Filtro()
        {
            JsonResult rpta;
            List<beProducto> lbeProducto = (List<beProducto>)Session["Productos"];
            rpta = Json(lbeProducto, JsonRequestBehavior.AllowGet);
            return (rpta);
        }
    }
}

Crear una Hoja de Estilos para la Vista

Primero crear una carpeta llamada "Content", luego clic derecho "Agregar" y luego "Hoja de estilos" y como nombre llamarle "ACME.css" y escribir el siguiente código:

body {
    background-color:lightgray;
}
.Titulo {
    background-color:black;
    color:white;
    font-size:x-large;
    text-transform:uppercase;
}
.Subtitulo {
    background-color:white;
    color:black;
    font-size:large;
    text-transform:capitalize;
    font-weight:bold;
}
.AnchoTotal {
    width:100%;
}
.FilaCabecera {
    background-color:gray;
    color:white;
}
.FilaDatos {
    background-color:white;
    color:black;
}
.Cuadro {
    background-color:white;
    border-style:double;
}

Crear la Vista Productos para mostrar los datos

Ir al controlador y ubicarse sobre el método "Lista" (acción), clic derecho y seleccionar "Agregar vista", seleccionar el check "Crear una vista fuertemente tipada" y escribir el siguiente código:

@using Northwind.LibBusEntities
@model List<beCategoria>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista</title>
    <link href="~/Content/Styles/ACME.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/Rutinas.js"></script>
</head>
<body>
    <div>
        <table class="AnchoTotal">
            <tr class="Titulo">
                <td colspan="2">
                   Graficar Datos en el Cliente en ASP.NET MVC con JSON, Canvas y JavaScript
                </td>
            </tr>
            <tr class="Subtitulo">
                <td colspan="2">Gráfico de Precios de Productos x Categoria</td>
            </tr>
            <tr>
                <td style="width:40%">
                    Selecciona una Categoria: @Html.DropDownList("idCategoria",
                    new SelectList(Model,"Codigo","Nombre"))
                </td>
                <td style="width:60%">
                    Selecciona el Tipo de Grafico: @Html.DropDownList("tipo",
                    new SelectList(ViewBag.Tipo))
                </td>
            </tr>
            <tr>
                <td style="vertical-align:top">
                    <table class="AnchoTotal">
                        <thead>
                            <tr class="FilaCabecera">
                                <td style="width:80%">Nombre del Producto</td>
                                <td style="width:20%">Stock</td>
                            </tr>
                        </thead>
                        <tbody id="tbProducto">
                        </tbody>
                    </table>
                </td>
                <td>
                    <canvas id="canvas" width="600" height="400" class="Cuadro"/>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Crear el archivo JavaScript con el código cliente

Antes que nada crear una carpeta llamada "Scripts" y arrastrar del explorador de Windows el archivo de jQuery: "jquery-1.7.1.min.js", luego agregar un archivo de JavaScript llamado "Rutinas.js" y escribir el siguiente código:

$(document).ready(function () {

    var rpta;

    var cboCategoria = document.getElementById("idCategoria");    

    cboCategoria.onchange = function () { crearTablaGrafico(); }

    var cboTipo = document.getElementById("tipo");

    cboTipo.onchange = function () { crearTablaGrafico(); }

    $.ajax({

        type: "post",

        url: "/Producto/Filtro",

        contentType: "application/json;charset=utf-8",

        dataType: "json",

        success: exito,

        error: error

    });

    function crearTablaGrafico() {

        var idCategoria = cboCategoria.value * 1;

        var tbProducto = document.getElementById("tbProducto");

        var tipo = cboTipo.value;

        var contenido = "";

        var canvas = document.getElementById("canvas");

        var contexto = canvas.getContext("2d");

        if (contexto != null) graficar(rpta);

        function graficar(rpta) {

            //Crear Degradado

            var deg = contexto.createLinearGradient(0, 0, canvas.width, canvas.height);

            deg.addColorStop(1, "aqua");

            deg.addColorStop(0.1, "blue");

            //Dibujar Rectangulo Degradado

            contexto.fillStyle = deg;

            contexto.fillRect(0, 0, canvas.width, canvas.height);

            //Variables para los calculos

            var x = 10;

            var y = 20;

            var valor = 0;

            var escala = 0;

            var maximo = 0;

            var total = 0;

            if (tipo != "Pie") {

                maximo = calcularMaximo(idCategoria);

                if (tipo == "Barras") escala = Math.abs((canvas.width - 180) / maximo);

                else {

                    escala = Math.abs((canvas.height - 120) / maximo);

                    x = 50;

                }

            }

            else total = calcularTotal(idCategoria);

            var centroX = Math.floor(canvas.width / 2);

            var centroY = Math.floor(canvas.height / 2);

            var radio = Math.floor(canvas.width / 4);

            var anguloInicio = 0;

            var arco = 0;

            var anguloFin = 0;

            //Dibujar el grafico de acuerdo al tipo

            for (i = 0; i < rpta.length; i++) {

                if (rpta[i].IdCategoria == idCategoria) {

                    contenido += "<tr class='FilaDatos'><td>" + rpta[i].Nombre + "</td>" +

                        "<td class='Derecha'>" + rpta[i].PrecioUnitario + "</td></tr>";

                    switch(tipo)

                    {

                        case "Barras":

                            x = 10;

                            contexto.fillStyle = "white";

                            contexto.font = "10px arial";

                            contexto.fillText(rpta[i].Nombre, x, y);

                            x = 150;

                            valor = rpta[i].PrecioUnitario * escala;

                            contexto.fillStyle = "yellow";

                            contexto.fillRect(x, y - 10, valor, 10);

                            contexto.fillStyle = "white";

                            contexto.fillText(rpta[i].PrecioUnitario, x + valor + 5, y);

                            y = y + 20;

                            break;

                        case "Columnas":

                            contexto.save();

                            contexto.translate(x, canvas.height - 10);

                            contexto.rotate(-(Math.PI / 3));

                            contexto.fillStyle = "white";

                            contexto.fillText(rpta[i].Nombre, 0, 0);

                            contexto.restore();

                            contexto.fillStyle = "yellow";

                            valor = (canvas.height - 100 - (rpta[i].PrecioUnitario*escala));

                            contexto.fillRect(x, valor, 10, rpta[i].PrecioUnitario * escala);

                            contexto.fillStyle = "white";

                            contexto.fillText(rpta[i].PrecioUnitario, x, valor - 10);

                            x += 40;

                            break;

                        case "Lineas":

                            contexto.save();

                            contexto.translate(x, canvas.height - 10);

                            contexto.rotate(-(Math.PI / 3));

                            contexto.fillStyle = "white";

                            contexto.fillText(rpta[i].Nombre, 0, 0);

                            contexto.restore();                            

                            contexto.strokeStyle = "yellow";

                            contexto.lineWidth = 3;

                            if (x== 50) {

                                contexto.beginPath();

                                valor = Math.floor(canvas.height - 100 - (rpta[i].PrecioUnitario) * escala);

                                contexto.moveTo(x, valor);

                            }

                            valor = Math.floor(canvas.height - 100 - (rpta[i].PrecioUnitario * escala));

                            contexto.lineTo(x, valor);

                            contexto.stroke();                

                            contexto.fillStyle = "white";

                            contexto.fillText(rpta[i].PrecioUnitario, x, valor - 10);

                            x += 40;

                            break;

                        case "Pie":

                            arco=(rpta[i].PrecioUnitario * 2 * Math.PI) / total;

                            anguloFin = anguloInicio + arco;

                            contexto.save();

                            contexto.beginPath();

                            contexto.moveTo(centroX, centroY);                            

                            contexto.arc(centroX, centroY, radio, anguloInicio, anguloFin, false);

                            contexto.fillStyle = '#' + Math.floor(Math.random() * 16777215).toString(16);

                            contexto.fill();

                            contexto.closePath();

                            contexto.restore();                            

                            contexto.save();

                            contexto.translate(centroX, centroY);

                            contexto.rotate(anguloInicio);

                            x = Math.floor(canvas.width * 0.15) - 10;

                            y = Math.floor(canvas.height * 0.05);

                            contexto.fillStyle = "white";

                            contexto.fillText(rpta[i].PrecioUnitario, x, y);

                            contexto.restore();

                            anguloInicio = anguloFin;

                            break;

                    }

                }

                tbProducto.innerHTML = contenido;

            }

        }

    }

    function calcularTotal(idCategoria) {

        var total = 0;

        for (i = 0; i < rpta.length; i++) {

            if (rpta[i].IdCategoria == idCategoria) {

                total += rpta[i].PrecioUnitario;

            }

        }

        return total;

    }

    function calcularMaximo(idCategoria) {

        var max = 0;

        for (i = 0; i < rpta.length; i++) {

            if (rpta[i].IdCategoria == idCategoria) {

                if (rpta[i].PrecioUnitario>max) max = rpta[i].PrecioUnitario;

            }

        }

        return max;

    }

    function exito(data) {

        rpta = data;

        crearTablaGrafico();

    }

    function error(data) {

        alert(data.status + " - " + data.statusText);

    }

});

Nota: La función asociada al $(document).ready se ejecuta ni bien carga la pagina y se llama en forma asíncrona al método de acción "Filtro" que devuelve un JSON con la lista de productos y por JavaScript se crea el filtro, se muestra la tabla y el gráfico de acuerdo a la categoría seleccionada y al tipo de gráfico.

Modificar el archivo web.config para incluir la cadena de conexión

<configuration>
  <connectionStrings>
    <add name="conNW" providerName="SQLServer"
         connectionString="uid=UsuarioNW;pwd=123456;
         data source=DSOFT\Sqlexpress;database=Northwind"/>
  </connectionStrings>
  .....
</configuration>

Configurar el inicio y ejecutar la aplicación web

Para probar la aplicación web debemos configurar el inicio para lo cual nos vamos a la carpeta "App_Start" y abrimos el archivo "RouteConfig.cs" cambiando el nombre del controlador y la acción tal como sigue: controller = "Producto", action = "Lista".

Ejecución y Pruebas de la Aplicación Web ASP.NET MVC

Finalmente, grabar y pulsar F5 para ejecutar la aplicación, mostrándose el resultado similar a la siguiente figura:

Por defecto se muestra la categoría "Bebidas" y en el tipo de gráfico "Barras", cambiar el tipo de gráfico a "Columnas" y se verá la siguiente figura:

Probar ahora con el gráfico de "Lineas" y se mostrará algo similar a la siguiente figura:

Finalmente, cambiar el tipo de gráfico a "Pie" y se verá lo siguiente:

Comentario Final

En este post hemos visto como trabajar en forma desconectada, y también hemos aprendido a crear grillas (tablas) y gráficos (canvas) sin usar controles, sino mediante código JavaScript.

Además hemos hecho llamada asíncrona mediante Ajax de jQuery y retornado los datos como un arreglo en notación JavaScript (JSON).

Esta forma de trabajo (desconectada) es muy útil en aplicaciones móviles donde la conexión al servidor web es limitada, por lo cual una sola vez se trae los datos y todo se maneja en el cliente (Browser).

Este demo es uno de los tantos que se realiza en el programa Web Developer. Espero les sirva.

Descarga
DemoDia_GraficoDatosCliente

El Libro del Día: HTML5 Cookbook

El Libro del Día: 2015-02-13

Titulo: HTML5 Cookbook
Autor: Christopher Schmitt, Kyle Simpson
Editorial: O'Reilly
Nro Paginas: 284

Capítulos:
1. Fundamental Syntax and Semantics
2. Progressive Markup and Techniques
3. Forms
4. Native Audio
5. Native Video
6. Microdata and Custom Data
7. Accessibility
8. Geolocation
9. <canvas>
10. Advanced HTML5 JavaScript
Appendix: HTML5 Resources

Descarga:
HTML5_Cookbook

El Libro del Día: Pro JavaScript Development

El Libro del Día: 2015-01-20

Titulo: Pro JavaScript Development
Autor: Den Odell
Editorial: Apress
Nro Paginas: 454

Capítulos:
Chapter 1: Object-Oriented JavaScript
Chapter 2: Documenting JavaScript
Chapter 3: Writing High-Quality JavaScript
Chapter 4: Boosting JavaScript Performance
Chapter 5: Design Patterns: Creational
Chapter 6: Design Patterns: Structural
Chapter 7: Design Patterns: Behavioral
Chapter 8: Design Patterns: Architectural
Chapter 9: Managing Code File Dependencies
Chapter 10: Mobile JavaScript Development
Chapter 11: Building Games with Canvas API
Chapter 12: Using WebRTC for Video Chat
Chapter 13: Using Client-Side Templates
Chapter 14: The Node.js Application Platform
Chapter 15: Build Tools and Automation
Chapter 16: Browser Developer Tools

Descarga:
Pro_JavaScript_Development

El Libro del Día: WebGL Game Development

El Libro del Día: 2015-01-02

Titulo: WebGL Game Development
Autor: Sumeet Arora
Editorial: Packt
Nro Paginas: 418

Capítulos:
Chapter 1: Getting Started with WebGL Game Development
Chapter 2: Colors and Shading Languages
Chapter 3: Loading the Game Scene
Chapter 4: Applying Textures
Chapter 5: Camera and User Interaction
Chapter 6: Applying Textures and Simple Animations to Our Scene
Chapter 7: Physics and Terrains
Chapter 8: Skinning and Animations
Chapter 9: Ray Casting and Filters
Chapter 10: 2D Canvas and Multiplayer Games

Descarga:
WebGL_Game_Development

El Libro del Día: Programming 3D Applications with HTML5 and WebGL

El Libro del Día: 2014-12-29

Titulo: Programming 3D Applications with HTML5 and WebGL
Autor: Tony Parisi
Editorial: O'Reilly
Nro Paginas: 403

Capítulos:
Part I. Foundations
1. Introduction
2. WebGL: Real-Time 3D Rendering
3. Three.js - A JavaScript 3D Engine
4. Graphics and Rendering in Three.js
5. 3D Animation
6. CSS3: Advanced Page Effects
7. Canvas: Universal 2D Drawing
Part II. Application Development Techniques
8. The 3D Content Pipeline
9. 3D Engines and Frameworks
10. Developing a Simple 3D Application
11. Developing a 3D Environment
12. Developing Mobile 3D Applications
A. Resources

Descarga:
Programming_3D_Applications_HTML5_WebGL

El Libro del Día: HTML5 Canvas Cookbook

El Libro del Día: 2014-12-25

Titulo: HTML5 Canvas Cookbook
Autor: Eric Rowell
Editorial: Packt
Nro Paginas: 348

Capítulos:
Chapter 1: Getting Started with Paths and Text
Chapter 2: Shape Drawing and Composites
Chapter 3: Working with Images and Videos
Chapter 4: Mastering Transformations
Chapter 5: Bringing the Canvas to Life with Animation
Chapter 6: Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions
Chapter 7: Creating Graphs and Charts
Chapter 8: Saving the World with Game Development
Chapter 9: Introducing WebGL
Appendix A: Detecting Canvas Support
Appendix B: Canvas Security
Appendix C: Additional Topics

Descarga:
HTML5_Canvas_Cookbook

El Libro del Día: HTML5 Canvas (2nd Edition)

El Libro del Día: 2014-12-24

Titulo: HTML5 Canvas (2nd Edition)
Autor: Steve Fulton, Jeff Fulton
Editorial: O'Reilly
Nro Paginas: 749

Capítulos:
1. Introduction to HTML5 Canvas
2. Drawing on the Canvas
3. The HTML5 Canvas Text API
4. Images on the Canvas
5. Math, Physics, and Animation
6. Mixing HTML5 Video and Canvas
7. Working with Audio
8. Canvas Games: Part I
9. Canvas Games: Part II
A. Full Code Listings

Descarga:
HTML5_Canvas

El Libro del Día: The Definitive Guide to HTML5

El Libro del Día: 2014-12-23

Titulo: The Definitive Guide to HTML5
Autor: Adam Freeman
Editorial: Apress
Nro Paginas: 1053

Capítulos:
Part I: Getting Started
Chapter 1: Putting HTML5 in Context
Chapter 2: Getting Ready
Chapter 3: Getting Started with HTML
Chapter 4: Getting Started with CSS
Chapter 5: Getting Started with JavaScript
Part II: The HTML Elements
Chapter 6: HTML Elements in Context
Chapter 7: Creating HTML Documents
Chapter 8: Marking Up Text
Chapter 9: Grouping Content
Chapter 10: Creating Sections
Chapter 11: Table Elements
Chapter 12: Working with Forms
Chapter 13: Customizing the Input Element
Chapter 14: Other Form Elements and Input Validation
Chapter 15: Embedding Content
Part III: Cascading Style Sheets
Chapter 16: CSS in Context
Chapter 17: Using the CSS Selectors—Part I
Chapter 18: Using the CSS Selectors—Part II
Chapter 19: Using Borders and Backgrounds
Chapter 20: Working with the Box Model
Chapter 21: Creating Layouts
Chapter 22: Styling Text
Chapter 23: Transitions, Animations, and Transforms
Chapter 24: Other CSS Properties and Features
Part IV: Working with the DOM
Chapter 25: The DOM in Context
Chapter 26: Working with the Document Object
Chapter 27: Working with the Window Object
Chapter 28: Working with DOM Elements
Chapter 29: Styling DOM Elements
Chapter 30: Working with Events
Chapter 31: Using the Element-Specific Objects
Part V: Advanced Features
Chapter 32: Using Ajax – Part I
Chapter 33: Using Ajax—Part II
Chapter 34: Working with Multimedia
Chapter 35: Using the Canvas Element – Part I
Chapter 36: Using the Canvas Element – Part II
Chapter 37: Using Drag & Drop
Chapter 38: Using Geolocation
Chapter 39: Using Web Storage
Chapter 40: Creating Offline Web Applications

Descarga:
The_Definitive_Guide_To_HTML5