Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Tutorial Curso Programacion Aprendiendo A Programar PDF
Tutorial Curso Programacion Aprendiendo A Programar PDF
Autor
Comunidad IT - Asociacin Civil de Formacin e Insercin Laboral en Tecnologas de la Informacin
1
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
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
2
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
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.
3
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
Desarrollo
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.
Pero previo a seguir los pasos de instalacin, deberamos corroborar que la computadora que
tenemos soportar la instalacin de estos programas. Los requerimientos mnimos que pediremos
sern:
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).
4
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
3. Ir a http://www.microsoft.com/web/downloads/platform.aspx y, a continuacin, hagan
clic en el botn Descarga gratuita o Free download si est en ingls.
Si son estudiantes, pueden acceder al Visual Studio completo gratuito a travs de Dreamspark:
https://www.dreamspark.com/Student/Default.aspx
5
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
Cuando abran el Visual Studio, si ya tienen el Visual Web Developer incluido, seleccionen Nuevo
Proyecto.
6
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
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.
7
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
En la carpeta Content es donde guardarn todo lo referido a diseo, imgenes y otros recursos
que puedan necesitar para su sistema. Automticamente Visual Studio Web Developer les va a
agregar un archivo Site.css donde podrn definir parte del diseo de su sitio.
En la carpeta scripts guardaremos toda la programacin en lenguaje Javascript que sea necesaria
para nuestro sistema (recuerden, que siempre se usa ms de un lenguaje para programar, aunque
haya uno principal)
Para empezar a crear nuestra primera aplicacin web (vamos a hacer un sitio para nuestra
empresa), lo que vamos a hacer inicialmente es darle un poco de diseo a nuestro sistema. Para
ello en la carpeta Shared, dentro de Views o Vistas vamos a editar el archivo _Layout.cshtml, que
representa la diagramacin de nuestras interfaces. Cambiemos el contenido del archivo por el
siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet"
type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
<ul id="menu">
<li>@Html.ActionLink("Inicio", "Index", "Home")</li>
<li>@Html.ActionLink("Productos", "Index", "Products")</li>
<li>@Html.ActionLink("Nosotros", "About", "Home")</li>
</ul>
<section id="main">
@RenderBody()
</section>
</body>
</html>
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
8
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
@RenderBody(): Esta instruccin mostrar el contenido de la pantalla que necesitemos
Luego le daremos un diseo a nuestra aplicacin modificando el archivo Site.css que se encuentra
en la carpeta Content. Reemplacemos su contenido con lo siguiente:
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}
a
{
color: #034af3;
}
/* Estilos del Menu ------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
9
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Estilos del Formulario ------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Estilos de los Datos ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}
table.data td
{
border:1px solid #c3c3c3;
padding:3px;
}
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
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
Tambin van a poder observar en la carpeta Shared (dentro de la carpeta Views) un archivo de
nombre _ViewStart que contiene lo siguiente:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
Este cdigo es automticamente agregado a todas las vistas (o pantallas) que ustedes creen en el
proyecto. Si borrasen este archivo, deberan agregar esa lnea de cdigo a todas las vistas que
ustedes creen.
Luego, en nuestra carpeta Controllers veremos que tenemos dos archivos: HomeController.cs
(para las pginas Home y About) y AccountControllers.cs (para las pantallas de Login).
En una aplicacin web comn, uno directamente le pide al servidor un archivo, como por ejemplo
index.html, o index.asp. En una aplicacin MVC, lo que se hace cuando pido por la pantalla Inicio,
o Nosotros, es llamar a un programa que se encuentra en mis Controladores que mostrarn una
pantalla de acuerdo a la direccin web que le estoy pasando.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{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
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
En el archivo index.cshtml pondremos el siguiente cdigo:
@{ViewBag.Title = "Inicio";}
<h1>Bienvenidos a Mi Empresa</h1>
Y en el about.cshtml pondremos:
@{ViewBag.Title = "Nosotros";}
<h1>Nosotros</h1>
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
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
Uno de los motivos por lo que nos encanta Visual Studio Web Developer, es que incluye un motor
de base de datos gratuito llamado SQL Server Compact. Con ella podemos crear una base de datos
muy simple para nuestro sitio web siguiendo estos pasos:
* 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.
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
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
Luego pueden utilizar Visual Studio Web Developer para agregar datos. Para ello hacen doble click
en Products.sdf, click derecho en ProductsDBs y seleccionen Show Table Data, o Mostrar Datos.
Ah pueden agregar:
1, Windows, Microsoft
2, i5 Processor, Intel
3, Lumia 1020, Nokia
Podemos observar que cuando creamos el proyecto, apareci en la carpeta Models el archivo
AccountModels.cs que contiene todo lo referido a lgica de seguridad, que no estamos utilizando.
Sin embargo, nosotros en particular lo que necesitamos es la lgica para conectarnos a nuestra
base de datos y manejar sus contenidos.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
namespace MvcDemo.Models
14
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
{
public class ProductsDB
{
public int ID { get; set; }
public string Nombre { get; set; }
public 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
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
Edit.cshtml
Index.cshtml
<add name="ProductsDBContext"
connectionString="Data Source=|DataDirectory|\Products.sdf"
providerName="System.Data.SqlServerCe.4.0"/>
16
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
Ya tengo mi primera aplicacin MVC en lenguaje .NET, conectado a una base de datos. Qu ms
puedo pedir? Ya s programar, porque a partir de aqu esto es solo utilizar lo visto en el curso y
agregarle complejidad a mi modelo, a mis controladores y a mis vistas, pero siempre combinando
las cosas que vimos hasta el momento.
Una manera es incluir en nuestro proyecto las libreras jQuery y jQueryUI ya mencionadas en el
curso. Para ello, en nuestro archivo _Layout.cshtml, en el tag <head>, podemos incluir estos dos
scripts:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-
ui.js"></script>
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
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
jssor.utils.js
jssor.slider.js
<script src="@Url.Content("~/Scripts/jssor.core.js")"></script>
<script src="@Url.Content("~/Scripts/jssor.utils.js")"></script>
<script src="@Url.Content("~/Scripts/jssor.slider.js")"></script>
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 = {
};
});
</script>
18
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px;
height: 300px;
overflow: hidden;">
</div>
<style>
/*
.jssora03l (normal)
.jssora03r (normal)
.jssora03ldn (mousedown)
.jssora03rdn (mousedown)
19
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
*/
position: absolute;
cursor: pointer;
display: block;
overflow:hidden;
</style>
<span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left:
8px;">
</span>
<span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right:
8px">
</span>
20
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
</div>
Nota: vemos en el cdigo HTML que incluimos varios estilos y algunos particularmente dentro de
un tag <style>. As es como figura en los ejemplos descargados de Jssor Slider. Lo correcto en este
caso sera transferir estos estilos al archivo Site.css, donde se almacenan todos los estilos del sitio.
21
Programa de Formacin Jvenes Programadores
Currculo Adaptado a Edad Escolar Tutorial de Programacin
Existen infinidad de mejoras que podemos realizarle a nuestro proyecto. Desde la utilizacin de
entornos responsive o adaptativos a distintas resoluciones como Bootstrap
(http://getbootstrap.com/) hasta implementacin de diversas animaciones a travs de jQuery
(http://jquery.com/) y jQuery UI (http://jqueryui.com/).
Existen diversidad de elementos ya desarrollados y gratuitos para continuar haciendo que nuestra
pgina web sea cada vez ms rica. Algunos de ellos son:
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