Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Autor:
Comunidad IT - Asociacin Civil de Formacin e Insercin Laboral en Tecnologas de la Informacin
Contenido
Captulo 2. Aplicaciones en la nube y cmo comenzar a programar ...3
Captulo 3. La interfaz de usuario ....... 37
Captulo 4. Inteligencia en la interfaz de usuario ..82
Captulo 5. El Servidor Web ....136
Captulo 6. El lenguaje C# .......158
Captulo 7. El Servidor Web. Conceptos Avanzados ....189
Captulo 8. Dnde y cmo se guardan los datos 211
Captulo 9. Conectando los datos con la aplicacin .242
Nota: Los captulos 1, 10, 11 y 12 son tericos, por lo que no hay tutorial incluido.
Aplicaciones en la nube y
cmo comenzar a programar
preparacin del ambiente de desarrollo
consideraciones iniciales
verificar primero
esto incluye
Barras de
navegacin
adicionales en el
browser
Y extensiones
innecesarias
esto incluye
Widgets y
aplicaciones
corriendo en
segundo plano
considera
si compartes la computadora
con otras personas
Intenta crear y
utilizar un perfil de
usuario diferente
exclusivamente
para programar y
mantenlo aislado
comencemos
Descarga la ultima
versin disponible
que exista del
browser de
internet
Debes asegurarte
que tu aplicacin
funciona para
todo tipo de
cliente
denominaciones
diferencias
Utiliza siempre el
sitio oficial para
descargar.
Las versiones
Express no tienen
costo
al momento de iniciar
Visual Studio
soporta diferentes
lenguajes.
Asegrate de
elegir Visual C# Web Aplicacin
Web ASP.NET
en la configuracin inicial
Puedes utilizar la
plantilla Single Page
para entender la
estructura.
En este ejemplo
utilizaremos la
plantilla MVC
Encontrars el
Explorador de
Soluciones,
desde aqu,
podras cada uno
de los archivos de
tu proyecto
Abre y edita
index.cshtml
en el documento index.cshtml
Y escribe lo
siguiente.
Ten cuidado con
los smbolos,
forman parte del
lenguaje HTML
Luego de unos
segundos (lo que
tarde en compilar),
se abrir tu
aplicacin en un
browser de
internet
Felicitaciones!
explora un poco ms
Para editar y
probar los nuevos
cambios, siempre
debes detener la
aplicacin
ten en cuenta
La interfaz de usuario
objetivo
comencemos
Crea un nuevo
proyecto de tipo
Visual C# Aplicacin web
ASP.NET y utiliza la
plantilla simple
MVC
en el explorador de soluciones
agrega una nueva vista (archivo cshtml), en la carpeta custom, recin creada
El CONTROLADOR, es el intermediario
entre lo que pide el usuario y lo que
deseamos mostrarle.
Un CONTROLADOR podra decidir
mostrar un pgina u otra, por ejemplo
/Custom/Principal.cshtml o bien
/Custom/Principal_Version_Ingles.chtml
Los archivos
Controladores
estn ubicados en
la carpeta
CONTROLLER.
En este caso
existen 3
Ten mucho
cuidado de
agregar la porcin
de cdigo
sealada, con sus
smbolos
especiales
observa lo siguiente
que significa?
probemos la pagina
Ve al men
depurar y elige
INICIAR
DEPURACION o
presiona F5
Escribe (a mano)
en la barra de
direcciones, el
punto de entrada
/Home/Principal y
presiona enter
El CONTROLADOR
recibe la orden y deriva
a la VISTA que
indicaste en
return
View("/Views/Custom/principal.cshtml");
ejercita el concepto
Detn la aplicacin.
Crea una nueva vista en la carpeta
CUSTOM y nombrala Secundaria
Edita el archivo HomeController.chtml
ejercita el concepto
Por
return View("/Views/Custom/secundaria.cshtml");
ejercita el concepto
continua ejercitando
El cdigo HTML se
edita en los
archivos de tipo
cstml, o sea, los
ubicados en la
carpeta VIEWS
edita principal.chtml
Agrega un ttulo
<h1>
Un prrafo <p> y
un elemento link
<a href..>
continua ejercitando
El estilo se define
en el lenguaje CSS.
El archivo por
defecto se
encuentra en la
carpeta CONTENT
y se llama Site.css
Colocando un id al
elemento HTML
Colocando una
CLASE al elemento
html
Coloca el estilo
segn el ID
usando el prefijo #
Coloca el estilo
segn la CLASE
usando el prefijo .
Ejecuta la
aplicacin y
visualiza los
cambios en el
estilo
Puedes crear tu
propia hoja de
estilo, para esto,
sobre la carpeta
CONTENT, click
derecho, agregar
nuevo elemento
potencia tu aplicacin
En Visual Studio
2013, tu aplicacin
trae incorporado
BOOTSTRAP, que
es una librera de
estilos
predefinidos
Coloca en el
buscador
Twitter Bootstrap
v3.0
Documentation
Empieza por
components
contina ejercitando
Inteligencia en la
interfaz de usuario
objetivo
conceptos previos
Javascript es el lenguaje de
programacin que te permite agregar
funciones complejas al HTML.
Si te resulta dificultoso comprender
que tipo de funciones, observa en la
pgina de Bootstrap la seccin
JAVASCRIPT.
Carousel
Collapse
Tab
Modal
DropDown
componentes predefinidos
esto significa
Que podremos
utilizar cualquiera de
las caractersticas de
estos controles, sin
agregar nada.
Porque ya vienen
incluidos
Incorporaremos funciones
JAVASCRIPT progresivamente
Para esto, comencemos con un nuevo
proyecto
primero
Crea un nuevo
proyecto de tipo
Visual C# Aplicacin web
ASP.NET y utiliza la
plantilla simple
MVC
Ubica el archivo
_Layout.cshtml ubicado
en Views / Shared.
Edtalo y mueve la
seccin inferior hacia
arriba como indica la
imagen a continuacin
As debera quedarte
el header.
Asegrate que estas
lneas son las que
estaban escritas en la
parte inferior y que
las has borrado de
abajo
agrega una nueva vista (archivo cshtml), en la carpeta custom, recin creada
probemos la pagina
Ve al men
depurar y elige
INICIAR
DEPURACION o
presiona F5
Escribe (a mano)
en la barra de
direcciones, el
punto de entrada
/Home/Principal y
presiona enter
Un alerta, en el
centro de la
pantalla, con el
mensaje que
habas escrito
Incorpora un botn,
para esto utilizamos
el ejemplo HTML de
botn de Bootstrap
Si no recuerdas la
forma, ve a la
pgina, seccin
Componentes
Asigna un id al
elemento button
HTML
Escribe en Javascript/
Jquery que al hacer
click, llame a la
funcin
probemos la pagina
Inicia depuracin.
Esta vez la caja de
alerta solo debera
mostrarse cuando
hagas click en el
botn de la pgina
probemos la pagina
El alerta slo
aparece cuando
haces click
continuemos ejercitando
Detengamos la
aplicacin.
Editemos
principal.chtml
Modifiquemos la
palabra click por otros
eventos
es fcil
Detengamos la
aplicacin.
Editemos
principal.chtml
Modifiquemos la
palabra click por otros
eventos
sigue explorando
componentes ms complejos
Diseemos un Carousel.
El Carousel es el componente tpico
para mostrar una serie de imgenes.
Para esto necesitamos que elijas 4 o 5
fotografas o imgenes que tengas en
tu computadora. Haremos un
Carousel de imagenes con ellas
En el explorador de
soluciones, crea la
carpeta img dentro de
Content.
Elige una o varias
fotos de tu compu y
arrstralas hasta la
carpeta
En el Controlador
HomeController.cs
Agrega el punto de
entrada para la vista
prueba1.
Recuerda que para
probar la ruta ser
/Home/Prueba1
Inicia depuracin.
Si todo est bien,
debera mostrar
tus imgenes.
Recuerda que el
punto de entrada
es Home/Prueba1
contina explorando
Dirgete a la documentacin de la
pgina y modifica lo que
corresponda
validadores
Adicionalmente el template de
proyectos Web de Visual Studio 2013,
trae incorporada la libera
http://jqueryvalidation.org
Estos permiten verificar que los datos
de un formulario cumplan
determinadas condiciones y lance un
alerta en caso de error
En este formulario, si
no ingresas algun
dato, lanza un
mensaje de error al
usuario.
Todo esto con
Javascript
ejercitemos
Edita el archivo
_layout.cshtml, para
agregar a la seccin
HEAD, la libera de
validadores
En el Controlador
HomeController.cs
Agrega el punto de
entrada para la vista
idntico a prueba1
pero para prueba2
En este caso el punto
de entrada ser
/Home/Prueba2
Ingresamos los
campos indicados en
la imagen
Usando la
documentacin de la
pgina
http://jqueryvalidatio
n.org/documentation
Agregamos el
validador required y el
llamado a la funcin
ejecutamos la prueba
Inicia depuracin.
Recuerda que el
punto de entrada
es Home/Prueba2
continua ejercitando
El Servidor Web
objetivo
conceptos previos
comencemos
Crea un nuevo
proyecto de tipo
Visual C# Aplicacin web
ASP.NET y utiliza la
plantilla simple
MVC
continua con
Edita el formulario
llamado
contacto.cshtml y
escribe en la
seccin action lo
siguiente
continua con
Debera quedar
algo parecido a
esto
ejecuta la aplicacin
Prueba el circuito.
Inicia desde
/Forma/Contacto
Y verifica como
funciona cuando
haces click en
Enviar
continua ejercitando
Otro ejercicio
Otro ejercicio
Otro ejercicio
sigue explorando
sigue explorando
El lenguaje C#
objetivo
Profundizaremos en el lenguaje C#
Identificaremos los componentes y
efectuaremos las primeras
codificaciones
conceptos previos
algunas consideraciones
Los bloques de
cdigo se encierran
entre { }
En este ejemplo
tenemos la clase
pblica (public class)
HomeController de
tipo Controller
El controlador posee
mtodos (lo que para
el controlador son los
puntos de entrada)
Los mtodos tienen
diferentes tipos, en
este caso son de tipo
ActionResult
Evaluaremos parmetros y
tomaremos decisiones
Es posible agregar
valores al punto de
entrada ( o a
cualquier funcin de
c#), estos valores se
llaman parmetros
Recibimos un valor
y en funcin de ese
valor mostramos una
u otra pgina
probemos la pagina
Ve al men
depurar y elige
INICIAR
DEPURACION o
presiona F5
El primer
parmetro va
separado por ?
Los siguientes
parmetros
siempre separados
por &
Intercambia en
donde dice
idioma, entre el
valor ingles y
espaol, el
resultado sern
distintas pginas
ejercita
ejercita
ejercita
Enva a la bolsa de
datos un titulo y un
subtitulo.
Escrbelo en el
controlador como
indica la imagen
Edita la pgina y
modifica el titulo
contenido en h2 y
reemplazalo por la
forma
@ViewBag.<nombre>
ejecuta la aplicacin
Deberas obtener
como resultado
que la pgina
muestra en su
titulo lo que le
hayas indicado en
el controlador
sigue explorando
El Servidor Web
Conceptos Avanzados
Uso del Framework Microsoft .NET
objetivo
comencemos
Crea un nuevo
proyecto de tipo
Visual C# Aplicacin web
ASP.NET y utiliza la
plantilla simple
MVC
continua con
Edita el formulario
llamado
contacto.cshtml y
escribe en la
seccin action lo
siguiente
continua con
ejecuta la aplicacin
Prueba el circuito.
Inicia desde
/Forma/Contacto
Y verifica como
funciona cuando
haces click en
Enviar
continua ejercitando
Otro ejercicio
Otro ejercicio
sigue explorando
sigue explorando
sigue explorando
sigue explorando
Dnde y cmo
se guardan los datos
Creacin de tablas y consultas
objetivo
conceptos previos
conceptos previos
conceptos previos
conceptos previos
comencemos
Abre un proyecto
existente o crea
uno nuevo
Selecciona el
men ver,
explorador de
objetos de SQL
Server.
Expande el rbol
conceptos previos
Click derecho,
agrega una nueva
base de datos.
Colcale un
nombre, por
ejemplo
proyecto
En el explorador de
objetos de SQL, ubica la
base proyectos, carpeta
tablas, aparece nuestra
tabla recin creada.
Si no llegara a aparecer,
intenta con la opcin
Actualizar
En el formulario Ver
Datos, ingresa datos de
prueba
SELECT * FROM
CONTACTOS
Luego presionamos la
tecla ejecutar
continua ejercitando
continua ejercitando
continua ejercitando
objetivo
comencemos
Abra un proyecto
existente, sino,
cree uno nuevo
del tipo Visual C#
- Aplicacin web
ASP.NET y utiliza la
plantilla simple
MVC
Los parmetros bsicos para interactuar con una base de datos son
1)
2)
3)
4)
5)
6)
Crear la conexin
Crear la sentencia
Asociar la sentencia a la conexin
Ejecutar la sentencia
Leer el resultado de la sentencia
Cerrar la conexin
1. Crear la conexin
Haga click en el
explorador de
Objectos de SQL.
Elija la Base de
Datos. Click
derecho,
propiedades
Es un texto largo,
algo parecido a esto
Data
Source=(localdb)\Projects;Initia
l Catalog=proyecto;Integrated
Security=True;Connect
Timeout=30;Encrypt=False;Trus
tServerCertificate=False
2. Crear la sentencia
sentence.Connection = connection;
4. Ejecutar la sentencia
6. Cerrar la conexin
connection.Close();
continue ejercitando
continue ejercitando