tag:blogger.com,1999:blog-78059992224020533112024-03-13T02:19:22.319-07:00Aprendiendo C# .NETLuis Laurenthttp://www.blogger.com/profile/16498952014216126000noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-7805999222402053311.post-44899469826004718042012-10-28T19:49:00.001-07:002012-10-28T19:51:14.165-07:00Mi primer aplicación ASP.NET MVC 3. 1ra Parte<h3>
¿Qué es MVC?<br />
</h3>
<div>
<br /></div>
<div style="text-align: justify;">
MVC <span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19.200000762939453px;">acrónimo de </span>Modelo Vista Controlador mejor conocido en ingles como <i><a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller" target="_blank">Model View Controller</a></i>, aunque hoy en día la definición de este varía entre distintos autores y/o tecnologías sobre la que se implemente, es decir mientras para algunos es un patrón de diseño o un tipo de arquitectura de software o incluso hasta un <i>framework</i>, para Microsoft en lo particular <a href="http://www.asp.net/">ASP.NET</a> es un todo en uno, ya que cuenta con un <i>framework </i>para desarrollar aplicaciones Web eficaces, altamente testables y fáciles de mantener, todo esto sacando provecho del patrón de diseño MVC.<br />
<br /></div>
<div style="text-align: justify;">
De igual manera se le conoce como una arquitectura, siendo que separa nuestras aplicaciones en tres componentes principales, tales como un Modelo de datos, las Vista y los Controladores.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1pKGxFtu7Z4u2P_q01JwN7y_flSaQU6xK-pymsBUUw4KgPbcFqW_ayOoLPseYleZxcI0PxptlxiD9m9mKcrwFOcukLXj3a57EF/MVC-Diagram.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="252" src="https://lauvow.bay.livefilestore.com/y1pKGxFtu7Z4u2P_q01JwN7y_flSaQU6xK-pymsBUUw4KgPbcFqW_ayOoLPseYleZxcI0PxptlxiD9m9mKcrwFOcukLXj3a57EF/MVC-Diagram.gif" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: x-small;">a) - Diagrama MVC</span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="font-size: x-small;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: justify;">
En el diagrama a) se muestra de manera general el funcionamiento de este patrón, empezando por el controlador quien se encarga de recibir las peticiones al servidor web, además de interactuar con el modelo para realizar las transacciones y/o actualizaciones, una vez terminados los cambios o la extracción de datos solicitados al controlador, este mismo empuja hacia la vista el modelo de datos resultante de la petición inicial, logrando así la actualización de la interfaz de usuario (UI). </div>
<br />
Una vez ya habiendo explicado un poco lo que es MVC, continuaré con un tutorial paso a paso y desde cero para crear nuestra primer aplicación <a href="http://msdn.microsoft.com/en-us/library/dd381412(VS.98).aspx" target="_blank">ASP.NET MVC 3</a>.<br />
<br />
<h3>
Tutorial paso a paso</h3>
<div>
<br /></div>
1.- El primer paso a seguir es la instalación del software necesario para llevar a cabo esta practica, pero para eso asumo que ya se tiene instalado <a href="http://www.microsoft.com/visualstudio/esn/downloads" target="_blank"><i>Visual Studio 2010</i></a> por lo cual pasaré directamente a instalar el <a href="http://www.microsoft.com/web/gallery/install.aspx?command=getinstallerredirect&appid=MVC3" target="_blank">instalador de plataforma Web</a> la cual es una herramienta gratuita de Microsoft que sirve para la descarga e instalación de software necesario para crear aplicaciones, desde <i>frameworks</i>, librerías, etc.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1piZ-8RbR2yTpra1xXhSi-8t3FhHPlwGa3bjbgEKDK1fqKz0tIbAzzzRQfbtTlQyglOQg-rckXiEd4Lj-_G0sQkCmYUmF7eOob/step1.png?psid=1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="153" src="https://lauvow.bay.livefilestore.com/y1piZ-8RbR2yTpra1xXhSi-8t3FhHPlwGa3bjbgEKDK1fqKz0tIbAzzzRQfbtTlQyglOQg-rckXiEd4Lj-_G0sQkCmYUmF7eOob/step1.png?psid=1" width="400" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: justify;">
2.- Un vez instalado se lanza una ventana del <i>Web Platform Installer</i> que marcará la librería de ASP.NET MVC 3 como articulo a instalar, aceptamos los términos y condiciones de uso y esperamos algunos minutos a que concluya su instalación, al finalizar cerramos el asistente. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1pDBROBLNZ6cemmCu0oa1yacxnjgXuojzQOP9ZXo3B1n48C3ZOok4Q9cyMidlWBDICPbdElpLxye7O4gGr1KQHIzI4j2nSfthe/step2.png?psid=1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://lauvow.bay.livefilestore.com/y1pDBROBLNZ6cemmCu0oa1yacxnjgXuojzQOP9ZXo3B1n48C3ZOok4Q9cyMidlWBDICPbdElpLxye7O4gGr1KQHIzI4j2nSfthe/step2.png?psid=1" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1p29MVZOYZ-IhSXVcB7NjDfYVj-N2XU4JcG5WuK3KN1FQXKEFCtr9-X9rg_nk69hRi2-7-ouHHh2dyE7C4u9Te0rimOyFohX-w/step2b.png?psid=1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="273" src="https://lauvow.bay.livefilestore.com/y1p29MVZOYZ-IhSXVcB7NjDfYVj-N2XU4JcG5WuK3KN1FQXKEFCtr9-X9rg_nk69hRi2-7-ouHHh2dyE7C4u9Te0rimOyFohX-w/step2b.png?psid=1" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1pMU87jxzUx0GluOIct1mz1y9a-FLx7PEVLQNu6PD0UoyHspBt6VmkBCQnxTmH8yPlp16_bGHLwni_cVfXy16aVcgCyw2awAmf/step2c.png?psid=1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="273" src="https://lauvow.bay.livefilestore.com/y1pMU87jxzUx0GluOIct1mz1y9a-FLx7PEVLQNu6PD0UoyHspBt6VmkBCQnxTmH8yPlp16_bGHLwni_cVfXy16aVcgCyw2awAmf/step2c.png?psid=1" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
3.- Ahora pasamos a abrir una instancia de <i>Visual Studio 2010</i> y creamos un proyecto siguiendo "<i>File->New->Project...</i>", en la siguiente ventana en el panel de la izquierda vamos a las plantillas instaladas "<i>Visual C#->Web</i>", en el panel central seleccionamos "<i>ASP.NET MVC 3 Web Application</i>", enseguida nombramos el proyecto Mvc3Application, también dejamos marcada la opción de "<i>Create directory for solution</i>" y finalmente hacemos clic en OK<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1pfm5IyP_SF1AbchAlzsiODFXAeBStzLTXKRA51OUyE731B2beexjE38wKkDUOBvHPyEi9bQ7cnrvbQtCRHBkMTYlChAl4egdw/step3.png?psid=1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="230" src="https://lauvow.bay.livefilestore.com/y1pfm5IyP_SF1AbchAlzsiODFXAeBStzLTXKRA51OUyE731B2beexjE38wKkDUOBvHPyEi9bQ7cnrvbQtCRHBkMTYlChAl4egdw/step3.png?psid=1" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1pGv0BE7rmBOKT-B3tZurdKsTOy-LuXNy7BPlTtLf84nXjfjof3-Qv3VpwJvWgGSXxWWVcE1ZtSUenu-LFEUE8_9bKSLCN1OJT/step3b.png?psid=1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="252" src="https://lauvow.bay.livefilestore.com/y1pGv0BE7rmBOKT-B3tZurdKsTOy-LuXNy7BPlTtLf84nXjfjof3-Qv3VpwJvWgGSXxWWVcE1ZtSUenu-LFEUE8_9bKSLCN1OJT/step3b.png?psid=1" width="400" /></a></div>
<br />
4.- Enseguida se lanza una nueva caja de dialogo "<i>New ASP.NET MVC 3 Project</i>" donde seleccionamos las opciones "<i>Internet Application</i>" para platilla de proyecto y en al lista desplegable dejamos como motor de vistas "Razor", y seguimos con clic en OK<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1pPUcGyluQQLIgjXn5hXCP4hX6GCChakTKFK7c7ltFTwn1h019lKo5XJDNT6zaK1AwkO9KrU2joU8hia6zokEu-yX-Cq2anwxw/step3c.png?psid=1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://lauvow.bay.livefilestore.com/y1pPUcGyluQQLIgjXn5hXCP4hX6GCChakTKFK7c7ltFTwn1h019lKo5XJDNT6zaK1AwkO9KrU2joU8hia6zokEu-yX-Cq2anwxw/step3c.png?psid=1" width="400" /></a></div>
<br />
5.- Una vez creado nuestro proyecto en el panel de la derecha o mejor dicho explorador de soluciones se encuentran todos los elementos que conforman nuestra aplicación, entre ellos los principales Modelo, Vistas y Controladores, ademas de carpetas para contenidos como recursos y scripts.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1plZ0QGjjxAI_J6kB6ZnPdwIIEeDugrQXu_fo50Ew8WOawFX3wqd8tPwFZCDYIVnP67Xp9YBwT1ay2qRjM6ufEH6PuNgffCpYo/step4.png?psid=1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://lauvow.bay.livefilestore.com/y1plZ0QGjjxAI_J6kB6ZnPdwIIEeDugrQXu_fo50Ew8WOawFX3wqd8tPwFZCDYIVnP67Xp9YBwT1ay2qRjM6ufEH6PuNgffCpYo/step4.png?psid=1" width="269" /></a></div>
<br />
6.- En el panel central encontramos el área de codificación en la cual modificaremos el archivo <i>HomeController.cs</i>, de no encontrarse abierto abrir con doble clic sobre el archivo en el explorador de soluciones, ya abierto modificamos el valor de la variable <i>ViewBag.Message</i> a "Hola Mundo!".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1pqhMa2v1Wpyp7Vlhw158pYFhg8CmZw6HNYIfoaAE7qtKtQwpKmTrl0lEqS8IyVkmlGf6HkU21B8aylUwcogTQSoIR2Vht7PTY/step4b.png?psid=1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="309" src="https://lauvow.bay.livefilestore.com/y1pqhMa2v1Wpyp7Vlhw158pYFhg8CmZw6HNYIfoaAE7qtKtQwpKmTrl0lEqS8IyVkmlGf6HkU21B8aylUwcogTQSoIR2Vht7PTY/step4b.png?psid=1" width="320" /></a></div>
<br />
7.- Finalmente ejecutamos nuestra aplicación, para eso vamos a la opción "<i>Debug->Start Debugging</i>" en nuestro menú principal o simplemente mediante el atajo con la tecla F5, lo cual nos mostrará una ventana como la siguiente.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1pl5Pf5eXJA2XJfXo-2fD9-N04vsPXsXd6nEHP6e91ej35NKY5mAc20lmf3Zsz3Ee55i8t-ucpU1jtWHtJnmgfCDdGs1ysCxWl/step7.png?psid=1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="203" src="https://lauvow.bay.livefilestore.com/y1pl5Pf5eXJA2XJfXo-2fD9-N04vsPXsXd6nEHP6e91ej35NKY5mAc20lmf3Zsz3Ee55i8t-ucpU1jtWHtJnmgfCDdGs1ysCxWl/step7.png?psid=1" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lauvow.bay.livefilestore.com/y1pYM_onMaRYTTdhGwuw-wl3dtnvV7QJq_9MJCNk_MRNAxc0VH0EkHGhAqYTET_Sm4u9Pc9DFOWIfhexw-F1pNA3XENbmoORKPB/step7b.png?psid=1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="281" src="https://lauvow.bay.livefilestore.com/y1pYM_onMaRYTTdhGwuw-wl3dtnvV7QJq_9MJCNk_MRNAxc0VH0EkHGhAqYTET_Sm4u9Pc9DFOWIfhexw-F1pNA3XENbmoORKPB/step7b.png?psid=1" width="400" /></a></div>
<br />
Bueno como habrán notado es muy sencillo crear aplicaciones MVC, pero realmente esta aplicación aun no hace uso de todos sus componentes, ya que hasta el momento el controlador solo esta enviando una variable con un mensaje hacia la vista, la cual se encarga de desplegarlo en nuestra interfaz, por lo tanto no se hace uso alguno del modelo.<br />
<br />
En nuestra siguiente parte del post agregaremos mas funcionalidad a la aplicación haciendo uso del modelo, lo cual nos ayudará a comprender de manera más clara la relación entre estos tres componentes principales.<br />
<br /></div>
Luis Laurenthttp://www.blogger.com/profile/16498952014216126000noreply@blogger.com3tag:blogger.com,1999:blog-7805999222402053311.post-63310581585946831632012-10-15T14:52:00.000-07:002012-10-20T16:55:01.693-07:00¿Qué es .Net?<div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Como quizá muchos de ustedes ya sabrán se habla de .Net <span id="goog_750657320"></span><span id="goog_750657321"></span>cuando nos referimos a la plataforma de desarrollo de Microsoft, tal es el desconocimiento de esta que frecuentemente se tiende confundir con algún lenguaje de programación, ambiente de desarrollo, o incluso un sistema operativo.<br />
<br />
Por lo contrario .Net es una plataforma que nos brinda las herramientas, componentes y mecanismos para construir aplicaciones <i><a href="http://es.wikipedia.org/wiki/Front-end_y_back-end" target="_blank">Front-End</a></i> y <i><a href="http://es.wikipedia.org/wiki/Front-end_y_back-end" target="_blank">Back-End</a></i> de manera rápida, (en comparación a otras tecnologías) segura, robusta, y facil de integrar. Algunos de los componentes principales de dicha plataforma son:</div><ul style="text-align: justify;"><li>Un set de bibliotecas con una gran cantidad de componentes listos para ser utilizados por nuestras aplicaciones.</li>
<li>Un entorno de ejecución (<a href="http://msdn.microsoft.com/es-es/library/8bs2ecf4.aspx" target="_blank">CLR</a>) cuya función es ejecutar las aplicaciones .Net e interactuar con el sistema operativo para la administración de servicios y recursos. (El homónimo de la JVM para aquellos que han programado JAVA).</li>
<li>Un ambiente de desarrollo (<i><a href="http://msdn.microsoft.com/es-es/library/dd831853.aspx" target="_blank">Visual Studio</a></i>) y herramientas que simplifican el proceso de desarrollo .</li>
<li>Un conjunto de lenguajes de alto nivel (<i><a href="http://msdn.microsoft.com/en-us/library/kx37x362.aspx" target="_blank">Visual C#</a></i>, <i><a href="http://msdn.microsoft.com/en-us/library/2x7h1hfk.aspx" target="_blank">Visual Basic</a></i>, <i><a href="http://msdn.microsoft.com/en-us/library/60k1461a.aspx" target="_blank">Visual C++</a></i>) y sus respectivos compiladores.</li>
<li>Documentación y guias de arquitectura. </li>
</ul><ul style="text-align: justify;"></ul><div style="text-align: justify;">Además .Net es una plataforma basada en el paradigma orientado a objetos (<a href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" target="_blank">OOP</a>) bajo los lenguajes de programación antes mencionados, lo cual nos facilita la implementación de lenguajes de modelado como <a href="http://es.wikipedia.org/wiki/Lenguaje_Unificado_de_Modelado" target="_blank">UML </a>o algún otro. También es necesario decir que se conoce como una plataforma de ejecución intermedia debido a que las aplicaciones no se ejecutan directamente sobre el sistema operativo si no que los lenguajes .Net al ser compilados generan código intermedio (llamado <a href="http://es.wikipedia.org/wiki/Common_Intermediate_Language" target="_blank">CIL</a> o <a href="http://es.wikipedia.org/wiki/Common_Intermediate_Language" target="_blank">MSIL</a>) cuya finalidad es ejecutarse sobre el entorno de ejecución (CLR).<br />
<br />
En el siguiente diagrama se muestra los componentes que conforman la plataforma de ejecución intermedia.<br />
<br />
<img alt="Componentes de punto NET" height="300" src="http://lauvow.bay.livefilestore.com/y1puQROcO1qlH-Q6qfnnA6bUVJNqce_HIdpQm059SC_8JpTGpaP3rnrLArPs4Ihv4l-eM7NcUItu-Lqu0sDj3PDaUmMZ0TmUz98/net.png?psid=1" width="585" /><br />
<br />
<div style="text-align: center;"> <span style="font-size: x-small;">Diagrama de plataforma de ejecución intermedia</span>.</div><br />
Bueno, a mi parecer esto es una explicación bastante breve de lo que es .Net, ya que entrar más a detalle en lo que es cada componente y su interacción entre ellos tomaría mucho mas que un solo post, más adelante sobre la marcha iremos viendo mas a fondo cada uno de estos, y pues espero haberles ayudado a esclarecer el tema.<br />
<br />
Hasta luego a todos!<br />
<br />
</div>Luis Laurenthttp://www.blogger.com/profile/16498952014216126000noreply@blogger.com1tag:blogger.com,1999:blog-7805999222402053311.post-28718572492247690722012-10-13T15:28:00.002-07:002012-10-13T15:28:43.285-07:00Hola Mundo!<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXUlKZIweOCt7dzvpDg7Xn6tf5O9mDviZ54n-Tg-tCs_JmrspRL26yMKiObe1DecNSZxOLbutImiJ7btrbbbSAtAp1KdeD7a6neG7s3Dp-WtMTWCkowd7FTPR-prVQEqDDYgDgFpfKzo/s1600/.net+logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Smiley face" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXUlKZIweOCt7dzvpDg7Xn6tf5O9mDviZ54n-Tg-tCs_JmrspRL26yMKiObe1DecNSZxOLbutImiJ7btrbbbSAtAp1KdeD7a6neG7s3Dp-WtMTWCkowd7FTPR-prVQEqDDYgDgFpfKzo/s1600/.net+logo.jpg" /></a></div>
<br />
<div style="text-align: justify;">
<br />
<br />
He aquí mi primer entrada en el mundo de los bloggers, y aprovechando la ocasión me gustaría presentarme ante ustedes como un joven entusiasta en el ámbito de tecnologías de la información y desarrollo de software.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Actualmente me desempeño como desarrollador de software trabajando con la plataforma .NET por lo cual he decidido crear este espacio para a través del mismo compartir mis experiencias y aprendizaje con toda la comunidad de desarrolladores aquí en la Web. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Además como ya han de saber hoy en día existe un sin fin de sitios con información acerca de esta plataforma, pero al ser sincero yo tratare de enfocarme un poco mas en <a href="http://www.asp.net/" target="_blank">ASP.NET</a> y si de ser posible otros temas también, por que no. De igual manera espero que el material que vaya subiendo sea menos enredoso que otros sitios y mas fácil de masticar.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sin mas por el momento me despido gente, y claro si alguno de ustedes le interesa tratar o contribuir algún tema en particular no duden en contactar me, hasta pronto y estén al pendiente del primer post con contenido<br />
<br />
Saludos.<br />
<br />
Luis Laurent<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXUlKZIweOCt7dzvpDg7Xn6tf5O9mDviZ54n-Tg-tCs_JmrspRL26yMKiObe1DecNSZxOLbutImiJ7btrbbbSAtAp1KdeD7a6neG7s3Dp-WtMTWCkowd7FTPR-prVQEqDDYgDgFpfKzo/s1600/.net+logo.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br />
</a></div>
Luis Laurenthttp://www.blogger.com/profile/16498952014216126000noreply@blogger.com0Bulevar Reforma, Ensenada, BC, México31.859577 -116.60642830.997375 -117.8698555 32.721779000000005 -115.34300049999999