Currculo Adaptado a Edad Escolar Tutorial de Programacin
1
Programa de Formacin Jvenes Programadores Currculo adaptado para edad escolar desde 12 aos. Orientacin al contexto tecnolgico de Latinoamrica. Material de apoyo para gabinetes tecnolgicos Autor Comunidad IT - Asociacin Civil de Formacin e Insercin Laboral en Tecnologas de la Informacin
Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 2 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
Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 3
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.
Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 4 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.
Seccin 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 pgina 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 instalacin, deberamos corroborar que la computadora que tenemos soportar la instalacin de estos programas. Los requerimientos mnimos que pediremos sern: Memoria RAM: 2Gb. Lo ideal sera contar con 4Gb o ms CPU: se recomienda tener un procesador ms 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 sesin en su mquina Windows como usuario con privilegios de administrador. 2. Inicien Internet Explorer (otros navegadores funcionan tambin). Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 5 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.
4. Click en RUN para correr el programa 5. Click en RUN nuevamente 6. Esperan unos segundos y debera arrancar el Web PI 5.0 7. 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 travs de Dreamspark: https://www.dreamspark.com/Student/Default.aspx Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 6 Seccin 2: Creando mi proyecto MVC Para crear nuestra primera aplicacin 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 tambin algunas funcionalidades para armar nuestro programa de manera ms 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 direccin de los archivos en el lugar que prefieran. Por ejemplo c:\Demo Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 7 Clickeen en OK Cuando se abra la siguiente ventana de Nuevo Proyecto: Seleccionen la plantilla de Aplicacin 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 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.
Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 8 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:
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 Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 9 @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; } Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 10 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.
Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 11 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.
Entonces abrimos el HomeController.cs y reemplazamos el cdigo con lo siguiente:
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();}
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.
Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 12 En el archivo index.cshtml pondremos el siguiente cdigo:
@{ViewBag.Title = "Inicio";}
<h1>Bienvenidos a Mi Empresa</h1>
<p>Aquí encontrarán muchos productos interesantes</p>
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.
Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 13
Seccin 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 botn Agregar o Add * 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: 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. Tambin en la venta de propiedades de la columna, en la propiedad Identity o Identidad, seleccionen True.
Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 14
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 brbaro. Pero cmo uso los datos de la base? En el curso hemos hablado de lo que se llama Modelo en el patrn MVC. El mismo contiene toda la lgica de aplicacin (lgica de negocio, la lgica de validacin, y la lgica 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 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. 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 System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.Entity;
namespace MvcDemo.Models Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 15 { 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: Re-Compilen su proyecto: Seleccione Depurar o Debug y, a continuacin, 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 agregarn automticamente los siguientes archivos: Create.cshtml Delete.cshtml Details.cshtml Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 16 Edit.cshtml Index.cshtml Y finalmente, para poder conectarme a mi base de datos, en el archivo Web.config de mi proyecto, observarn un elemento llamado <connectionStrings>. All deben agregar: <add name="ProductsDBContext" connectionString="Data Source=|DataDirectory|\Products.sdf" providerName="System.Data.SqlServerCe.4.0"/>
Ahora, finalmente, cuando clickeen en la pestaa de su proyecto llamada Productos, la misma funcionar correctamente y mostrar los datos de su base. Felicitaciones!!!!!!
Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 17 Seccion 4: Mejorando mi pgina
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. Entonces, qu me falta? Ms all de jugar un poco con las funcionalidades, no est de ms mejorar aspectos de diseo que hagan nuestra pgina atractiva. O incluso aprender de las mejores prcticas 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 tamaos o colores de los elementos de nuestra pgina, sino tambin con explotar al mximo tecnologas como Javascript para reorganizar mi informacin o presentarla de una forma ms amigable. 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 Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 18 jssor.utils.js jssor.slider.js Y que se encuentren correctamente linkeadas en _Layout.cshtml con las siguientes lneas: <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 = { $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$, //[Requried] Class to create arrow navigator instance $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: 0, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1 } }; var jssor_slider1 = new $JssorSlider$("slider1_container", options); }); </script>
Y finalmente, el siguiente cdigo HTML a continuacin del script, en el mismo archivo Index.cshtml:
Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 19 <!-- 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; height: 300px; "> <!-- Slides Container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;"> <div><img u="image" src="../Content/img/photography/002.jpg" /></div> <div><img u="image" src="../Content/img/photography/003.jpg" /></div> <div><img u="image" src="../Content/img/photography/004.jpg" /></div> <div><img u="image" src="../Content/img/photography/005.jpg" /></div> <div><img u="image" src="../Content/img/photography/006.jpg" /></div> <div><img u="image" src="../Content/img/photography/007.jpg" /></div> <div><img u="image" src="../Content/img/photography/008.jpg" /></div> </div> <!-- Arrow Navigator Skin Begin --> <style> /* jssor slider arrow navigator skin 03 css */ /* .jssora03l (normal) .jssora03r (normal) .jssora03l:hover (normal mouseover) .jssora03r:hover (normal mouseover) .jssora03ldn (mousedown) .jssora03rdn (mousedown) Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 20 */ .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; } </style> <!-- Arrow Left --> <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;"> </span> <!-- Arrow Right --> <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px"> </span> <!-- Arrow Navigator Skin End --> <a style="display: none" href="http://www.jssor.com">javascript</a> Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 21 </div> <!-- Jssor Slider End --> 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.
Programa de Formacin Jvenes Programadores Currculo Adaptado a Edad Escolar Tutorial de Programacin 22 Seccin Cierre: Cmo sigo?
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/
Asimismo, deberemos continuar agregando inteligencia de negocio o nuevas funcionalidades a nuestro sitio, modificando no solo nuestro cdigo en Visual Studio sino tambin en nuestra base de datos para brindar soporte de informacin y convertir nuestra aplicacin en una herramienta potente y rica para los usuarios.