Programa de Formación Jóvenes Programadores

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación

Programa de Formación Jóvenes Programadores Currículo adaptado para edad escolar desde 12 años. Orientación al contexto tecnológico de Latinoamérica. Material de apoyo para gabinetes tecnológicos

Autor Comunidad IT - Asociación Civil de Formación e Inserción Laboral en Tecnologías de la Información

1

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación

Index Contenido Tema .................................................................................................................................................... 1 Autor ................................................................................................................................................... 1 Index .................................................................................................................................................... 2 Observaciones metodológicas ............................................................................................................ 3 Del público....................................................................................................................................... 3 Desarrollo ............................................................................................................................................ 4 Tutorial de Programación Adjunto .................................................................................................. 4 Sección 1. Instalando las herramientas que necesito ..................................................................... 4 Sección 2: Creando mi proyecto MVC ............................................................................................. 6 Sección 3: Agregando mi base de datos........................................................................................ 13 Hasta acá venimos bárbaro. Pero cómo uso los datos de la base? .......................................... 14 Seccion 4: Mejorando mi página ................................................................................................... 17 Sección Cierre: ¿Cómo sigo? ......................................................................................................... 22

2

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación

Observaciones metodológicas Del público La educación primaria (educación básica) prepara al alumno en las competencias básicas de alfabetización en el ámbito de la lectura, escritura y cálculo básico. Los conocimientos aritméticos y de ciencias duras se adquieren principalmente por memorización y solo en los dos últimos años de la educación básica se aplican mecanismos de razonamiento básico. La habilidad para llegar al razonamiento mediante conclusiones lógicas, comienza en esta etapa madurativa y se aplica en la currícula de la educación media, razón por la cual, si bien puede usarse como mecanismo para obtener resultados, este aún se encuentra en etapas iniciales de uso por el alumno. La adquisición 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 experimentación infantil. La edad madurativa requiere la utilización de un lenguaje fresco, accesible y de proximidad, pero evitando en todo momento la infantilización del lenguaje.

3

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación

Desarrollo Tutorial de Programación Adjunto Ya sabemos el QUE, ahora queremos saber el COMO En los diversos capítulos que estás cursando, estarás 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 práctica 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, habrás programado tu primer sitio web, que esperamos sea el comienzo de muchos proyectos que hagas.

Sección 1. Instalando las herramientas que necesito Para comenzar a programar, primero debemos instalar lo que se denomina entorno de desarrollo, que en nuestro caso particular en el que haremos una página web, está compuesto por 3 elementos principales: el servidor web (Internet Information Server), el servidor de base de datos (SQL Server Compact) y el entorno de desarrollo intergado o IDE (Visual Studio). Pero previo a seguir los pasos de instalación, deberíamos corroborar que la computadora que tenemos soportará la instalación de estos programas. Los requerimientos mínimos que pediremos serán:   

Memoria RAM: 2Gb. Lo ideal sería contar con 4Gb o más CPU: se recomienda tener un procesador más o menos actual, desde 2GHz en adelante Disco duro: dependerá de lo que queramos almacenar, pero siempre es importante tener una buena cantidad de espacio libre, al menos 10Gb

En cuanto al sistema operativo instalado, las herramientas que utilizaremos requieren alguna de las siguientes versiones  

Windows 8.1, Windows 8, Windows 7 SP1 Windows Server 2012 R2, Windows Server 2012, Windows Server 2008 R2 SP1

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 sesión en su máquina Windows como usuario con privilegios de administrador. 2. Inicien Internet Explorer (otros navegadores funcionan también).

4

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación 3. Ir a http://www.microsoft.com/web/downloads/platform.aspx y, a continuación, hagan clic en el botón Descarga gratuita o Free download si está en inglés.

4. 5. 6. 7.

Click en RUN para correr el programa Click en RUN nuevamente Esperan unos segundos y debería arrancar el Web PI 5.0 Seleccionen las herramientas a instalar: a. Internet Information Server b. .NET Framework v4.0 c. SQL Server Express 2008 d. Visual Web Developer Express. O lo pueden descargar desde http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx

Si son estudiantes, pueden acceder al Visual Studio completo gratuito a través de Dreamspark: https://www.dreamspark.com/Student/Default.aspx

5

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación

Sección 2: Creando mi proyecto MVC Para crear nuestra primera aplicación web, usaremos la herramienta llamada Visual Web Developer que en realidad ya viene dentro del programa Visual Studio. Esta herramienta nos permite ya tener muchas cosas solucionadas en nuestro sistema y nos da también algunas funcionalidades para armar nuestro programa de manera más visual y sencilla. Cuando abran el Visual Studio, si ya tienen el Visual Web Developer incluido, seleccionen Nuevo Proyecto.

Se abrirá la ventana que les mostramos. Allí tienen que:  Abrir las plantillas de Visual C#  Seleccionen la plantilla Aplicacion Web ASP.NET MVC 3  Pongan como Nombre del Proyecto MvcDemo  Pongan la dirección de los archivos en el lugar que prefieran. Por ejemplo c:\Demo

6

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación 

Clickeen en OK

Cuando se abra la siguiente ventana de Nuevo Proyecto:    

Seleccionen la plantilla de Aplicación para Internet Seleccionen el Motor Razor Seleccionen HTML5 Markup Clickeen en OK

Visual Studio abrirá una ventana como la siguiente:

Como ven en la ventana de la derecha, al crear un proyecto MVC, Visual Studio automáticamente 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 información relacionada a la aplicación, como ser conexiones a bases de datos, que veremos luego en otro capítulo.

7

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación En la carpeta Content es donde guardarán todo lo referido a diseño, imágenes y otros recursos que puedan necesitar para su sistema. Automáticamente Visual Studio Web Developer les va a agregar un archivo Site.css donde podrán definir parte del diseño de su sitio. En la carpeta scripts guardaremos toda la programación en lenguaje Javascript que sea necesaria para nuestro sistema (recuerden, que siempre se usa más de un lenguaje para programar, aunque haya uno principal) Para empezar a crear nuestra primera aplicación web (vamos a hacer un sitio para nuestra empresa), lo que vamos a hacer inicialmente es darle un poco de diseño a nuestro sistema. Para ello en la carpeta Shared, dentro de Views o Vistas vamos a editar el archivo _Layout.cshtml, que representa la diagramación de nuestras interfaces. Cambiemos el contenido del archivo por el siguiente: @ViewBag.Title @Html.ActionLink("Inicio", "Index", "Home") @Html.ActionLink("Productos", "Index", "Products") @Html.ActionLink("Nosotros", "About", "Home") @RenderBody()

En el código que escribimos lo que está en rojo y empieza con el símbolo @ nos permite modificar que es lo que se mostrará en la pantalla: @Url.Content(): Aquí se mostrarán links a recursos o archivos que vamos a estar usando @Html.ActionLink(): Aquí se mostrarán links a otras pantallas @ViewBag.Title: Aquí se mostrarán los títulos de las pantallas

8

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación @RenderBody(): Esta instrucción mostrará el contenido de la pantalla que necesitemos Luego le daremos un diseño a nuestra aplicación 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 Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación 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 capítulo III de nuestro curso, jugando con las clases y selectores para convertir nuestro sitio en algo atractivo para los usuarios.

10

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación También 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 código es automáticamente agregado a todas las vistas (o pantallas) que ustedes creen en el proyecto. Si borrasen este archivo, deberían agregar esa línea de código a todas las vistas que ustedes creen. Luego, en nuestra carpeta Controllers veremos que tenemos dos archivos: HomeController.cs (para las páginas Home y About) y AccountControllers.cs (para las pantallas de Login). En una aplicación web común, uno directamente le pide al servidor un archivo, como por ejemplo index.html, o index.asp. En una aplicación 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 mostrarán una pantalla de acuerdo a la dirección web que le estoy pasando. Entonces abrimos el HomeController.cs y reemplazamos el código con lo siguiente: using using using using using

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 tendríamos las interfaces a mostrar, y las mismas podrán 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 página inicial de nuestra aplicación, llamada index.cshtml y la página about.cshtml.

11

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación En el archivo index.cshtml pondremos el siguiente código: @{ViewBag.Title = "Inicio";} Bienvenidos a Mi Empresa Aquí encontrarán muchos productos interesantes

Y en el about.cshtml pondremos: @{ViewBag.Title = "Nosotros";} Nosotros Somos los mejores en nuestro rubro. Compren!

Luego, en Visual Studio, presionamos F5 para ver en el navegador nuestra primera aplicación funcionando. Podemos clickear en Inicio o Nosotros para ver nuestras dos pantallas.

12

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación

Sección 3: Agregando mi base de datos 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:     

Hagan clic derecho en la carpeta App_Data en la ventana del Explorador de soluciones Seleccione Add o Agregar, y luego New Item o Nuevo elemento Seleccione SQL Server Compact Local Database * Nombre de la base de datos Productos.sdf. Hagan clic en el botón Agregar o Add

* Si SQL Server Compact no es una opción, 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 automáticamente en la carpeta App_Data. Como ya hemos visto el lenguaje SQL en el capítulo 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:   

ID: int (Clave primaria), no permite nulos Nombre: nvarchar (100), no permite nulos Fabricante: nvarchar (100), no permite nulos

Para lograr que la columna ID sea clave primaria, clickeen en el nombre de la columna y selecciones Primary Key o Clave Primaria. También en la venta de propiedades de la columna, en la propiedad Identity o Identidad, seleccionen True.

13

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación

Cuando terminan de crear la tabla, la guardan con el nombre ProductsDBs. 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

Recuerden que la columna ID no deben ingresarla, sino que se creará sola e irá autoincrementando.

Hasta acá venimos bárbaro. Pero cómo uso los datos de la base? En el curso hemos hablado de lo que se llama Modelo en el patrón MVC. El mismo contiene toda la lógica de aplicación (lógica de negocio, la lógica de validación, y la lógica de acceso a datos). Podemos observar que cuando creamos el proyecto, apareció en la carpeta Models el archivo AccountModels.cs que contiene todo lo referido a lógica de seguridad, que no estamos utilizando. Sin embargo, nosotros en particular lo que necesitamos es la lógica para conectarnos a nuestra base de datos y manejar sus contenidos. Para ello, en el Explorador de soluciones, hagan click en la carpeta Modelos o Models y seleccionen Agregar o Add y Clase o Class. Nombren el nuevo archivo como ProductsDB.cs, y hagan clic en Agregar o Add. Editen ahora el contenido de la clase: using using using using using

System; System.Collections.Generic; System.Linq; System.Web; System.Data.Entity;

namespace MvcDemo.Models

14

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación { public { public public public

class ProductsDB int ID { get; set; } string Nombre { get; set; } string Fabricante { get; set; }

} public class ProductsDBContext : DbContext { public DbSet 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 extraño, pero esta es la convención 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 conexión a la base de datos que se puede crear con estos sencillos pasos:    

   

Re-Compilen su proyecto: Seleccione Depurar o Debug y, a continuación, Compilar o Build MvcDemo en el menú. En el Explorador de soluciones, hagan click derecho en la carpeta Controllers, y seleccionen Agregar o Add y Controlador o Controller Pongan como nombre del controlador ProductsController Seleccionen la plantilla o template: Controller with read/write actions and views, using Entity Framework (Controlador con acciones de lectura/escritura y vistas, utilizando Entity Framework) Seleccione clase del modelo: ProductsDB (MvcDemo.Models) Seleccione la clase de contexto de datos: ProductsDBContext (MvcDemo.Models) Seleccione vistas Razor (CSHTML) Haga clic en Agregar o Add

Visual Studio creará entonces los siguientes archivos:  

ProductsController.cs en la carpeta Controllers o Controles Una carpeta Products en la carpeta Views o Vistas

Dentro de la carpeta Products en Views, se agregarán automáticamente los siguientes archivos:   

Create.cshtml Delete.cshtml Details.cshtml

15

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación  

Edit.cshtml Index.cshtml

Y finalmente, para poder conectarme a mi base de datos, en el archivo Web.config de mi proyecto, observarán un elemento llamado . Allí deben agregar:

Ahora, finalmente, cuando clickeen en la pestaña de su proyecto llamada “Productos”, la misma funcionará correctamente y mostrará los datos de su base. Felicitaciones!!!!!!

16

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación

Seccion 4: Mejorando mi página Ya tengo mi primera aplicación MVC en lenguaje .NET, conectado a una base de datos. ¿Qué más 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. Entonces, ¿qué me falta? Más allá de jugar un poco con las funcionalidades, no está de más mejorar aspectos de diseño que hagan nuestra página atractiva. O incluso aprender de las mejores prácticas en lo referido a usabilidad para que los usuarios disfruten navegando nuestro sitio. Y parte de eso no solo tiene que ver con formas y tamaños o colores de los elementos de nuestra página, sino también con explotar al máximo tecnologías como Javascript para reorganizar mi información o presentarla de una forma más amigable. Una manera es incluir en nuestro proyecto las librerías jQuery y jQueryUI ya mencionadas en el curso. Para ello, en nuestro archivo _Layout.cshtml, en el tag , podemos incluir estos dos scripts:

Con esto lo que estarán haciendo es consumir las librerías desde servidores públicos de Microsoft para no tener que instalarlas en sus proyectos. En este link pueden encontrar todas las versiones disponibles y los temas de diseño que se pueden implementar: http://www.asp.net/ajax/cdn#Using_jQuery_from_the_CDN_21 Una vez incluidos estos scripts, podemos trabajar con librerías públicas de jQuery como es Jssor Slider que me permite de una manera muy sencilla incluir una galería de imágenes 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 cómo implementarlo fácilmente. Debemos asegurarnos de tener en nuestro _Layout.cshtml las librerías de jQuery y luego incluir en la carpeta Scripts los archivos: 

jssor.core.js

17

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación  

jssor.utils.js jssor.slider.js

Y que se encuentren correctamente linkeadas en _Layout.cshtml con las siguientes líneas:

Luego, en la vista que queramos incluir la galería (asumamos que en el Index o Inicio), incluiremos el siguiente código Javascript para implementar el slider: 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: {

//[Optional] Options to specify and enable arrow navigator or not

$Class: $JssorArrowNavigator$, $ChanceToShow: 2, $AutoCenter: 0, Vertical, 3 Both, default value is 0 $Steps: 1

//[Requried] Class to create arrow navigator instance //[Required] 0 Never, 1 Mouse Over, 2 Always //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2

//[Optional] Steps to go for each navigation request, default value is 1

} }; var jssor_slider1 = new $JssorSlider$("slider1_container", options); });

Y finalmente, el siguiente código HTML a continuación del script, en el mismo archivo Index.cshtml:

18

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación /* jssor slider arrow navigator skin 03 css */ /* .jssora03l

(normal)

.jssora03r

(normal)

.jssora03l:hover

(normal mouseover)

.jssora03r:hover

(normal mouseover)

.jssora03ldn

(mousedown)

.jssora03rdn

(mousedown)

19

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación */ .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn { position: absolute; cursor: pointer; display: block; background: url(../img/a03.png) no-repeat; overflow:hidden; } .jssora03l { background-position: -3px -33px; } .jssora03r { background-position: -63px -33px; } .jssora03l:hover { background-position: -123px -33px; } .jssora03r:hover { background-position: -183px -33px; } .jssora03ldn { background-position: -243px -33px; } .jssora03rdn { background-position: -303px -33px; } javascript

20

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación Nota: vemos en el código HTML que incluimos varios estilos y algunos particularmente dentro de un tag . Así es como figura en los ejemplos descargados de Jssor Slider. Lo correcto en este caso sería transferir estos estilos al archivo Site.css, donde se almacenan todos los estilos del sitio.

21

Programa de Formación Jóvenes Programadores Currículo Adaptado a Edad Escolar – Tutorial de Programación

Sección Cierre: Cómo sigo? Existen infinidad de mejoras que podemos realizarle a nuestro proyecto. Desde la utilización de entornos “responsive” o adaptativos a distintas resoluciones como Bootstrap (http://getbootstrap.com/) hasta implementación de diversas animaciones a través de jQuery (http://jquery.com/) y jQuery UI (http://jqueryui.com/). Existen diversidad de elementos ya desarrollados y gratuitos para continuar haciendo que nuestra página web sea cada vez más 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/

Asimismo, deberemos continuar agregando inteligencia de negocio o nuevas funcionalidades a nuestro sitio, modificando no solo nuestro código en Visual Studio sino también en nuestra base de datos para brindar soporte de información y convertir nuestra aplicación en una herramienta potente y rica para los usuarios.

22