domingo, 9 de junio de 2013

Empezando con mvc 3 en visual studio

Bueno hoy les comentare como empesar en esto de MVC 3 de visual estudio, modelo vista controlador es un patrón de diseño de software que a existido desde hace mucho antes que Microsoft lo incorporara en su entorno de desarrollo visual estudio.
ASP.Net incorpora esta herramienta para el desarrollo de proyectos  mas escalares y mantenibles, y al parecer sera la manera recomendada para los desarrollos bajo la arquitectura ASP.Net.
La intención de esta entrada no es informarlos de todo lo que incluye esta herramienta (MVC 3), sino mas bien esta dirigido para el que no conoce como empesar a utilizar esta tecnología.

1-Si estas utilizando Visual Estudio 2010,debes bajarte el complemento para poder utilizar MVC 3 , les recomiendo que sigan los pasos que se indican en este post.Si ya lo tienes instalado como es el caso de los que usan visual studio 2012 dirijansen a :
archivo->nuevo proyecto->aplicacion web de ASP.NET MVC 3

2-En esta oportunidad seleccionamos aplicacion para Internet, junto con el motor de vistas Razor que esta pensado para el desarrollo de aplicaciones web con MVC 3.
No seleccionamos la casilla de prueba unitaria,ya que es nuestra primera aplicacion y no es necesario en esta oportunidad.
la diferencia entre los tipos de proyectos radica en su contenido, el vacio esta sin vista ni controladores,los otros dos radica en el tipo de valuación (formulario-windows).leanse la descripción de cada uno.


3-Con esto se nos crear un proyecto con unos formularios ya listos para usar,incluso podremos loguearnos, en total nos muestra una pagina de ejemplo para que tengamos una idea de que va esto del MVC 3.
Bueno la idea de todo esto, no es dar una cátedra de esto, sino que solo mostrar de manera rápida como crear un proyecto del tipo MVC 3 y ver de manera rápida como empesar con esto.
Los controladores están agrupados en una carpeta llamada controller, cada controlador manera las redirecciones de las vistas.
Cada controlador representa una carpeta de la carpeta vistas (views) y cada método de un controlador se relaciona con una vista.
De esta manera la vista (carpeta) Acount tiene un controlador llamado Acountcontroller (con el nombre se relacionan) y las vistas de la carpeta Acount se relaciona con los métodos de AcountController.

Esto es solo un pincelado de MVC , espero poder subir mas contenido relacionado al tema.

sábado, 8 de junio de 2013

empezando con JQuery y JQuery UI

De seguro has escuchado en mas de una oportunidad lo genial que es JQuery y lo magnifico que quedan los efectos que se logran con el ,desde selectores de fechas hasta la explocion de un  Div.
Sin duda el aprender a implementar Jquery con toda su potencialidad te ayudara a construir sitios mas dinamicos y competitivos.
Por ello les mostrare de manera rapida y practica como implementar Jquery y sus funcionalidades.De antemano les digo que tratare de ser lo mas consiso y practico posible, la idea es poder usar jquery con exito lo antes posible.

1-lo primero es descargar e instalar  JQuery , ¿pensaras que es un setup o algo parecido?, pues no, Jquery es una libreria de javaScript,por lo que no es mas que un archivo de texto con funiones de javaScript NADA MAS.
En esta oportunidad lo descargaremos de la pagina JQueryUI, JQuery UI es otra libreria que se complementa a al JQuery para dar "efectos especiales" a tu desarrollo.Al descargar tendremos un archivo que incluye al JQuery (normal, indispensable para usar cualquier libreria que utilize JQuery) y JQuery UI que es una libreria para dar efectos interesantes a nuestra interfaz grafica.
Carpeta cuando se descarga Jquery UI



2-ahora que ya hemos descargado la carpeta con los codigos necesarios (js's,css's,etc...) nos disponemos a implementar Jquery con toda la potencialidad que nos da el JQuery UI,¿como lo hacemos?, pues nada mas facil que llamando estos archivos desde nuestro HTML y ya esta !!!

<head>
  <script type="text/javascript" 
  src="jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js">
  /*incluimos a JQuery,indispensable para trabajar 
  con cualquer libreria basa da en JQuery,como lo es JQuery UI*/
  </script>
  
  <script type="text/javascript" 
  src="jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js">
  /*incluimos a JQuery UI,libreria que agrega efectos a nuestra interfaz grafica 
  usando como base a JQuery*/
  </script>
  
  <LINK href='jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.css' 
  type=text/css rel=stylesheet>
  <!--Todos los efectos necesitan de CSS,en esta ocacion utilizamos el 
  css del estilo smoothness (grises),existen muchos mas velos en la pagina de JQuery UI-->
</head> 
3-Ahora solo hace falta usar JQuery, ¿como se hace esto?, solo hace falta inicializarlo  en el momento cuando se carga el documento HTML, bueno en realidad solo basta con
aprenderse esto:
<script>
 /*Aqui inicializamos a JQuery*/
  $(document).ready(function(){//en el evento ready(hayas cargado el DOM) 
   //todo lo que este aqui       de document, ejecuta todo lo que este dentro de '{....})' 
   //se ejecutara al momento 
   //de cargar e documento       
    alert("hola que pasa !!!");//esta linia si quieres la quitas xD
  }) 
 </script>
bueno esto lo debes poner el el body , ya que es una funcion javascript

4-Bueno ahora que ya sabes como inicializar JQuery junto con JQuery UI, hagamos algo mas imprecionante
como por ejemplo cun selector de fecha, el famoso 'datepicker',esto lo hacemos gracas a JQuery UI y sus hermosas funciones, solo debemos crear un :
<input type='text' name='miCalendario' id='calendario'/> 
y lo enlazamos con su atributo ' id ' de esta manera:
        <script>
 /*Aqui inicializamos a JQuery*/
  $(document).ready(function(){
   alert("hola que pasa !!!");
   $( "#calendario" ).datepicker();
  })
 </script>


De esta manera cuando ejecutemos nuestro HTML tendremos un hermoso selector de fecha,mejor llamado datepicker conclusion:
  1. Descargar Jquery Y JQuey UI desde JQueryUI
  2. Enlazar los archivos descargados a nuestro archivo HTML
  3. Inicializar Jquery con $(document).ready(function(){....})
ejecutar funciones de JQuery UI enlazandolos con el id del input HTML