You are on page 1of 22

Programa de Formacin Jvenes Programadores

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:

<!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
@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&iacute; encontrar&aacute;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.

You might also like