Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Tutorial Curso Programacion Aprendiendo A Programar
Tutorial Curso Programacion Aprendiendo A Programar
Autor
Comunidad IT - Asociacin Civil de Formacin e Insercin Laboral en Tecnologas de la Informacin
Index
Contenido
Tema .................................................................................................................................................... 1
Autor ................................................................................................................................................... 1
Index .................................................................................................................................................... 2
Observaciones metodolgicas ............................................................................................................ 3
Del pblico....................................................................................................................................... 3
Desarrollo ............................................................................................................................................ 4
Tutorial de Programacin Adjunto .................................................................................................. 4
Seccin 1. Instalando las herramientas que necesito ..................................................................... 4
Seccin 2: Creando mi proyecto MVC ............................................................................................. 6
Seccin 3: Agregando mi base de datos........................................................................................ 13
Hasta ac venimos brbaro. Pero cmo uso los datos de la base? .......................................... 14
Seccion 4: Mejorando mi pgina ................................................................................................... 17
Seccin Cierre: Cmo sigo? ......................................................................................................... 22
Observaciones metodolgicas
Del pblico
La educacin primaria (educacin bsica) prepara al alumno en las competencias
bsicas de alfabetizacin en el mbito de la lectura, escritura y clculo bsico.
Los conocimientos aritmticos y de ciencias duras se adquieren principalmente por
memorizacin y solo en los dos ltimos aos de la educacin bsica se aplican mecanismos
de razonamiento bsico.
La habilidad para llegar al razonamiento mediante conclusiones lgicas, comienza
en esta etapa madurativa y se aplica en la currcula de la educacin media, razn por la cual,
si bien puede usarse como mecanismo para obtener resultados, este an se encuentra en
etapas iniciales de uso por el alumno.
La adquisicin de conocimientos puede abordarse desde la curiosidad sobre el
funcionamiento de las cosas, habilidad desarrollada en etapas tempranas aunque sin que
estos descubrimientos sean abordados desde una experimentacin infantil.
La edad madurativa requiere la utilizacin de un lenguaje fresco, accesible y de
proximidad, pero evitando en todo momento la infantilizacin del lenguaje.
Desarrollo
Tutorial de Programacin Adjunto
Ya sabemos el QUE, ahora queremos saber el COMO
En los diversos captulos que ests cursando, estars observando diversidad de conceptos y
herramientas que son necesarios para el desarrollo de cualquier programa. En particular, nos
hemos ido enfocando en lo que es el desarrollo web.
Ahora que has ido entendiendo algunos de los conceptos, necesitamos ponerlos en prctica para
comenzar a construir nuestro primer proyecto, y para ello queremos que leas muy detenidamente
este documento y vayas ejecutando lo que te contamos. De esa manera, cuando llegues al final,
habrs programado tu primer sitio web, que esperamos sea el comienzo de muchos proyectos que
hagas.
En cuanto al sistema operativo instalado, las herramientas que utilizaremos requieren alguna de
las siguientes versiones
Una vez corroborados los prerrequisitos, continuaremos a instalar las aplicaciones necesarias.
Lo que haremos es descargar, instalar y lanzar el MS Web Platform Installer (Web PI 5.0, que es un
1,4 MB de descarga).
1. Inicien sesin en su mquina Windows como usuario con privilegios de administrador.
2. Inicien Internet Explorer (otros navegadores funcionan tambin).
4.
5.
6.
7.
Si son estudiantes, pueden acceder al Visual Studio completo gratuito a travs de Dreamspark:
https://www.dreamspark.com/Student/Default.aspx
Clickeen en OK
Como ven en la ventana de la derecha, al crear un proyecto MVC, Visual Studio automticamente
nos cre las carpetas Models o Modelos (dependiendo del idioma), Controllers o Controladores,
Views o Vistas.
En la carpeta App_Data van a encontrar distinta informacin relacionada a la aplicacin, como ser
conexiones a bases de datos, que veremos luego en otro captulo.
En el cdigo que escribimos lo que est en rojo y empieza con el smbolo @ nos permite modificar
que es lo que se mostrar en la pantalla:
@Url.Content(): Aqu se mostrarn links a recursos o archivos que vamos a estar usando
@Html.ActionLink(): Aqu se mostrarn links a otras pantallas
@ViewBag.Title: Aqu se mostrarn los ttulos de las pantallas
Si queremos continuar modificando los estilos, podemos utilizar todo lo que aprendimos en el
captulo III de nuestro curso, jugando con las clases y selectores para convertir nuestro sitio en
algo atractivo para los usuarios.
10
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.Mvc;
namespace MvcDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{return View();}
public ActionResult About()
{return View();}
}
}
En la carpeta Views, dijimos que tendramos las interfaces a mostrar, y las mismas podrn tener
distintas extensiones: HTML, ASP, ASPX, CSHTML, etc.
En Views tendremos una subcarpeta por cada uno de los controladores que definamos. De esa
manera un controlador puede mostrar cualquiera de las pantallas definidas en su subcarpeta
correspondiente. Por ejemplo, al tener el controlador HomeController, tendremos la carpeta
Home donde guardaremos la pgina inicial de nuestra aplicacin, llamada index.cshtml y la pgina
about.cshtml.
11
Y en el about.cshtml pondremos:
@{ViewBag.Title = "Nosotros";}
<h1>Nosotros</h1>
<p>Somos los mejores en nuestro rubro. Compren!</p>
Luego, en Visual Studio, presionamos F5 para ver en el navegador nuestra primera aplicacin
funcionando. Podemos clickear en Inicio o Nosotros para ver nuestras dos pantallas.
12
* Si SQL Server Compact no es una opcin, es porque no la instalaron. Pueden hacerlo desde el
siguiente link: http://www.microsoft.com/en-us/download/details.aspx?id=17876
Visual Studio Web Developer va a crear una base de datos automticamente en la carpeta
App_Data.
Como ya hemos visto el lenguaje SQL en el captulo 8 de nuestro curso, directamente haremos
doble click en el archivo Productos.sdf de App_Data lo cual abrir una ventana del Explorador de
Base de Datos o Database Explorer. Luego, para crear una nueva tabla, haremos click derecho en
la carpeta Tablas o Tables y luego Create Table o Crear Tabla.
All crearemos las siguiente columnas:
Para lograr que la columna ID sea clave primaria, clickeen en el nombre de la columna y
selecciones Primary Key o Clave Primaria. Tambin en la venta de propiedades de la columna, en la
propiedad Identity o Identidad, seleccionen True.
13
1, Windows, Microsoft
2, i5 Processor, Intel
3, Lumia 1020, Nokia
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Data.Entity;
namespace MvcDemo.Models
14
class ProductsDB
int ID { get; set; }
string Nombre { get; set; }
string Fabricante { get; set; }
}
public class ProductsDBContext : DbContext
{
public DbSet<ProductsDB> Products { get; set; }
}
}
Pueden observar que hemos llamado la clase del modelo "ProductsDB". Previamente, nombramos
la tabla de la base como "ProductsDBs" (que termina en s). Puede parecer extrao, pero esta es la
convencin de nombres que tienen que utilizar para hacer que el modelo se conecte a la tabla de
la base de datos.
Luego debemos agregar un control para la conexin a la base de datos que se puede crear con
estos sencillos pasos:
Create.cshtml
Delete.cshtml
Details.cshtml
15
Edit.cshtml
Index.cshtml
16
Con esto lo que estarn haciendo es consumir las libreras desde servidores pblicos de Microsoft
para no tener que instalarlas en sus proyectos. En este link pueden encontrar todas las versiones
disponibles y los temas de diseo que se pueden implementar:
http://www.asp.net/ajax/cdn#Using_jQuery_from_the_CDN_21
Una vez incluidos estos scripts, podemos trabajar con libreras pblicas de jQuery como es Jssor
Slider que me permite de una manera muy sencilla incluir una galera de imgenes en mi sitio.
Para ellos simplemente descargamos la misma desde:
http://www.jssor.com/download-jssor-slider-from-github.html
YP una vez que descomprimimos los contenidos, veremos carpetas con demos y ejemplos. En
particular, uno muy sencillo es el slider-with-arrow-navigator.source.html. Al abrirlo con visual
Studio veremos un ejemplo de cmo implementarlo fcilmente.
Debemos asegurarnos de tener en nuestro _Layout.cshtml las libreras de jQuery y luego incluir en
la carpeta Scripts los archivos:
jssor.core.js
17
jssor.utils.js
jssor.slider.js
Luego, en la vista que queramos incluir la galera (asumamos que en el Index o Inicio), incluiremos
el siguiente cdigo Javascript para implementar el slider:
<script>
jQuery(document).ready(function ($) {
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either,
default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is
greater than 1, or parking position is not 0)
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2,
$AutoCenter: 0,
Vertical, 3 Both, default value is 0
$Steps: 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
</script>
18
(normal)
.jssora03r
(normal)
.jssora03l:hover
(normal mouseover)
.jssora03r:hover
(normal mouseover)
.jssora03ldn
(mousedown)
.jssora03rdn
(mousedown)
19
20
21
http://www.jssor.com/
http://amazingslider.com/
http://wowslider.com/
http://bxslider.com/
http://fancybox.net/
http://lokeshdhakar.com/projects/lightbox2/
http://www.jacklmoore.com/colorbox/
22