Programa de Formación Jóvenes Programadores

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

1

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


2

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


3

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.


4

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).


5

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. Click en RUN para correr el programa

5. Click en RUN nuevamente

6. Esperan unos segundos y debería 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 través de Dreamspark:

https://www.dreamspark.com/Student/Default.aspx

https://www.dreamspark.com/Student/Default.aspx


6

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


7

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.


8

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:

<!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 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


9

@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;

}


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;


padding:3px;

}

table.data td

{


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.


11

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 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 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.


12

En el archivo index.cshtml pondremos el siguiente código:

@{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 aplicación

funcionando. Podemos clickear en Inicio o Nosotros para ver nuestras dos pantallas.


13

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.

http://www.microsoft.com/en-us/download/details.aspx?id=17876


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 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 System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.Entity; namespace MvcDemo.Models


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 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


16

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 <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 pestaña de su proyecto llamada “Productos”, la misma

funcionará correctamente y mostrará los datos de su base. Felicitaciones!!!!!!


17

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 <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 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

http://www.asp.net/ajax/cdn#Using_jQuery_from_the_CDN_21

http://www.jssor.com/download-jssor-slider-from-github.html


18

jssor.utils.js

jssor.slider.js

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

<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 galería (asumamos que en el Index o Inicio), incluiremos

el siguiente código 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 código HTML a continuación del script, en el mismo archivo

Index.cshtml:


19





<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;

height: 300px; ">



<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>



<style>

/* jssor slider arrow navigator skin 03 css */

/*

.jssora03l (normal)

.jssora03r (normal)

.jssora03l:hover (normal mouseover)

.jssora03r:hover (normal mouseover)

.jssora03ldn (mousedown)

.jssora03rdn (mousedown)


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>



<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>



<a style="display: none" href="http://www.jssor.com">javascript</a>


21

</div>



Nota: vemos en el código 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 sería transferir estos estilos al archivo Site.css, donde se almacenan todos los estilos del sitio.


22

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.

http://getbootstrap.com/

http://jquery.com/

http://jqueryui.com/

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/

Programa de Formación Jóvenes Programadores

Documents