Bootstrap 3 ha llegado

Ha llegado la nueva version de Bootstrap en forma de Release Candidate 1, se espera otra RC mas antes de la version final, de mientras podemos ya ir explorando las nuevas mejoras que contiene. 

Para los que no saben que es Bootstrap es un framework web frontend que se encarga del diseño y eltoque final de nuestro sitio o aplicacion web. Importando algunas librerias en los headers de nuestro sitio podemos implementar sin fin de estilos similar al usado por twitter y otras paginas, finalizando un trabajo mas profesional. 

BOOTSTRAP 3

La nueva estructura de archivos es reduciendose el numero de archivos, quedandonos solo con los dos archivos correspondientes al CSS y al Javascript de los que tenemos la version comprimida y sin comprimir. 

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
├── js/
│   ├── bootstrap.js
│   ├── bootstrap.min.js

Se maneja la compatibilidad con los siguientes navegadores por defecto:

• Chrome
• Safari
• Firefox
• IE
• Opera

En esta nueva version existen variedad de nuevos ejemplos y prototipos para comenzar y en su sitio web vemos las distintas plantillas básicas, esperemos ver como se mejora esto en la entrega final. 

Link

MVC 4 desarrollando una aplicacion web desde cero Parte I

ASP.NET MVC es un cambio radical para el desarrollo web usando la plataforma de Microsoft que destaca una arquitectura limpia, patrones de diseño y capacidad de pruebas, entre otras cosas.

ASP.NET MVC es un marco de desarrollo Web de Microsoft que combina la eficacia  y la pulcritud de la arquitectura Modelo-Vista-Controlador (MVC), las ideas más avanzados hasta la fecha y las técnicas de desarrollo ágil, y las mejores partes de la plataforma ASP.NET existente.

Es una alternativa completa a Formas tradicionales de Web ASP.NET. Bueno no ahondaremos mas que esta breve introducción ya que en linea hay mucha de información , así que vamos a lo practico.

Tu primera aplicacion MVC

Para desarrollar la aplicacion utilizaremos Microsoft Visual Studio Express 2012 para web, es gratis y nos permitira trabajar bien lo que necesitamos. lo podemos descargar desde aqui: 

Descarga el Visual Studio 2012 Express

La mejor forma de apreciar este marco de desarrollo es comenzarlo a usar asi que manos a la obra. Crearemos una aplicacion sencilla y poco a poco iremos agregando mas complejidad.

Preparando la Estacion de Trabajo (Workstation)

Lo unico necesario para desarrollar una aplicacion MVC4 es instalar el Visual Studio 2012 el cual contiene todo lo necesario para iniciar, en nuesto caso el Visual Studio Express 2012 for Web. Una vez que has instalado el Visual Studio, estas listo para iniciar. 

Creando un nuevo proyecto ASP.NET MVC

Iniciamos creando un nuevo proyecto MVC dentro de Visual Studio. Seleccionamos Archivo / Nuevo Proyecto y en el cuadro de dialogo que se despliega seleccionamos  dentro de la seccion "Visual C#" dentro del apartado "web" la opcion de  "Aplicacion web de ASP.NET MVC4".

De esta forma creamos el proyecto "MiPrimerAplicacion" y presionamos Aceptar. La siguiente ventana que se muestra nos da la opcion de escoger entre diferentes  tipos de plantillas para proyectos MVC.

Para nuestro caso utilizaremos un proyecto limpio seleccionamos "Vacio" el cual crea un proyecto con una estructura de carpetas básica, pero sin los archivos necesarios para crear nuestra apliacion MVC, estos archivos los iremos creando con forme avancemos.  Seleccionamos Aceptar. 

Una vez creado el proyecto veremos un determinado numero de archivos y carpetas dentro del Explorador de Soluciones. Esta es la estructura por default de un proyecto de MVC4. Si intentamos correr nuestra aplicacion vemos el siguiente error 404 Not Found Error. 

Creando nuestro primer Controlador

Dentro de la arquitectura MVC, las peticiones entrantes son manejadas por los controllers(Controladores). Los controladores son simples clases en C# (normalmente heredando de System.Web.Mvc.Controller). Cada metodo publico dentro de un controlador es conocido como action method (Metodos de Accion), los cuales significan que puedes invocarlos desde Web por medio de URL para permitirles alguna accion.  La convencion dentro de MVC es colocar los controllers en una carpeta llamada Controllers, la que se crea en automatico juntos con el proyecto. Agregamos un nuevo controlador como se ve en la imagen: 

Le ponemos el nombre de HomeController , esta es otra convencion dentro de MVC, la terminacion "Controller" del nombre de cada controlador creado, y asi la usaremos. Las opciones de scaffolding nos premite crear nuestro controlador usando algun template con funciones comunes, pero nosotros usaremos un controlador vacio por lo que dejamos seleccionado la opcion por defautl "vaciar controlador MVC" o "Empty MVC Controller" (esta medio raro como tradujeron esa opcion al español a mi parecer debia se Controlador Vacio MVC o algo asi). Vemos nuestro controlador HomeController creado dentro de nuestra carpeta Controllers.

Puedes ver que la clase llamada HomeController hereda de System.Web.Mvc.Controller.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MiPrimerAplicacion.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

    }
}



Una buena manera de iniciar con MVC es haciendo algunos cambios a la clase controlador. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MiPrimerAplicacion.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public string Index()
        {
            return "Hola Mundo";
        }

    }
}





Hemos cambiado el action method llamado Index el cual me regresara una cadena "Hola Mundo". Al correr de nuevo el proyecto y se mostrara el resultado en el explorador como sigue: 











Entendiendo las Rutas




Tanto para los modelos como para las vistas y los controladores (models, views y controllers), MVC usa el ASP.NET routing system, el cual decide el mapa particular de URLs para determinado controlador y accion. Cuando se crea el proyecto MVC, este agrega algunas rutas por default para iniciar. Puedes realizar peticiones a cualquiera de las siguientes URLs y ellas te llevaran al Index del HomeController: 


/
/Home
/Home/Index


Este es un buen ejemplo de los beneficios de las convenciones que MVC maneja. En este caso la convencion es tener un controlador llamado HomeController el cual nos servira de punto de inicio de nuestra aplicacion. La configuracion respecto al punto de inicio de nuestra aplicacion esta en el archivo Global.asax.cs.




Renderizando las Paginas Web 


En nuestro ejemplo la salida no fue HTML - solo fue una cadena "Hola Mundo". Para producir una respuesta HTML a una peticion del explorador , necesitamos crear una vista. 




Creando y Renderizando una Vista (View)

Modificaremos nuestro metodo de accion Index.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MiPrimerAplicacion.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ViewResult Index()
        {
            return View();
        }

    }
}

En este momento estamos regresando un objeto ViewResult de un metodo de accion, con esto indicamos a MVC que renderize una vista. Se crea llamando al metodo View sin parametros, indicandole al MVC renderizar una vista por default para la accion.

Si corremos la aplicacion en este punto, podremos ver que el Framework MVC trata de encontrar la vista por default a usar, como se muestra a continuacion:

Este mensaje de error es de bastante ayuda, pues se nos muestra no solo que MVC no encuentra la vista para el metodo de accion correspondiente, sino las rutas donde deberia de estar, en base a la convencion que toma en cuenta.

Para crear la vista detenemos la ejecucion de nuestro proyecto y damos click derecho sobre el metodo de accion Index y elegimos agregar vista.

En esta parte deseleccionamos Usar una pagina de diseño o maestra. No estamos usando layouts en este ejemplo. Mas adelante vemos como implementarlas. Damos click en aceptar y vemos que se agrega una vista llamada Index dentro de la carpeta de Views/Home/. En automatico se ha creado la carpeta Home dentro de Views.

El archivo Index.cshtml es creado, esta extension indica a C# que la vista es un archivo que se procesara con Razor. Las versiones anteriores de MVC  corrian sobre el motor de vistas de ASPX, por lo cual los archivos tenian la extension .aspx .

Hasta arriba del documento observamos la siguiente linea.

@{
    Layout = null;
}

Esta expresion es interpretada por el motor de vistas Razor. este es un ejemplo muy sencillo. Esto le indica a Razor que escoginos no usar una pagina maestra. Ignoraremos Razor por el momento. Y modificamos el codigo de la vista.

Corremos el proyecto y listo .

Ahora nuestro me metodo Index regresa un ViewResult, se le indico a MVC renderizar una vista y regresar HTML. No le dijimos al MVC que vista deberia usar, simplemente uso la convencion de nombres para encontrarlo automaticamente. Esta convencion indica que la vista tiene el mismo nombre del metodo de accion y esta contenido en una carpeta que lleva el nombre del controlador ( /Views/Home/Index.cshtml).

Podemos regresar otros reultados desde los metodos de accion mas alla de cadenas  y objetos ViewResult.  Por ejemplo al retornar un RedirectResult, le indicamos al explorador que nos redireccione a otra URL. Si regresamos un HttpUnauthorizedResult, forzamos al usuario a identificarse.  todos estos objetos son conocidos como action results, y ellos son derivados de la clase ActionResult. El systema de resultados de accion nos permite encapsular y reusar respuestas comunes en las acciones.

FOUNDATION Frameworks para desarrollo de interfaz web

Hace unos  meses aproximadamente he comenzado a usar un framework para el desarrollo de interfaces web, algo que nunca habia usado pero en el trabajo decidimos implementarlo, esto para acortar tiempor de desarrollo. Este  framework es el Foundation de Zurb.

Este ofrece  una serie de recursos web para acelerar el desarrollo de sitios web basados en estándares y buenas prácticas, aparte de un buen soporte a responsive design, es ligero y también flexible para modificar.

En resumen, Foundation es ligero y permite experimentar más gráficamente con los elementos web,permitiendote crear a parte sitios web a la medida que da mejor soporte a responsive design para ofrecer tu sitio web en versiones para computadoras, tablets o móviles.

Foundation es pieza clave para Zurb, una empresa genial de diseño web, que mantiene a su equipo enfocado en el framework, ofreciendo aportes al código diariamente y guiados por una serie de buenas practicas que hacen al framework muy innovador.

Reading Fingerprints Nitgen SDK y Griaule SDK

Me han asignado un proyecto de checado por huella dactilar y me he metido a trabajar con los dos SKDs pronto subire ejemplos de como usar estos SDKs y cual es para mi mas confiable. Para adelantar un poco Griaule permite el desarrollo de una interfaz donde una gran variedad de lectores pueden ser conectados y usados , incluyendo en Nitgen, por este motivo se lleva la ventaja este segundo.

Implementar FullCalendar en Aplicacion WEB ASP.NET

FullCalendar me permite implementar una agenda dentro del SitioWeb, lo necesito para registrar citas.Batelle para poder implementar FullCalendar en mi aplicacion web, y ps me costo un poco hallarle pero poco a poco voy haciendolo, el problema para mi fue como cargar los eventos desde la base de datos ya que añ agregarlos no presentaba ningun inconveniente, y la documentacion es muy general. Fullcalendar esta desarrollado en JQuery y me parecio una herramienta muy buena, y a la vista es agradable. [FullCalendar]

En la documentacion existente presenta el ejemplo de como implementar el control, aqui muestro una pequeña documentacion de como lo realice.

en el Head del Html de la pagina se hace referecia a los archivos:

por ejemplo:

Estos archivos estan en la pagina del creador y se descargan facilmente.

Seguido de esto tocara inicializar los valores que tendra nuestro calendario cuando la pagina cargue:

en la parte de events: se alimenta de un json que obtiene la informacion y horas de citas grabadas. El archivo obtenerEventos_sinNodo.ashx solo es el nombre de mi archivo y recibe un parámetro de entrada nada mas como ejemplo , este puede ser el id de la persona a la que se requiere checar su agenda.

En la parte del head es todo. Ahora en la parte del body simplemente :

archivo .ashx

en la parte del archivo que generará el json para llenar el calendario con las citas es como sigue:

y listo.

Obtener los Registros que no esten dentro de en otra tabla

" SELECT inscriptions.* FROM inscriptions
LEFT OUTER JOIN inspections
ON inspections.inscription_id = inscriptions.id
WHERE inspections.inscription_id IS NULL
AND inscriptions.created_at ... "

Ejecutar codigo en intervalos de tiempo, javascript

El codigo es como sigue:

function actualizaTabla()
{
clearTimeOut();

//Aqui va el código que se desea que se ejecute

setTimeOut('actualizaTabla()',5000); // en este caso es de 5 segundos el intervalo

}