Академический Документы
Профессиональный Документы
Культура Документы
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
Barras de
navegacin
adicionales en el
browser
Y extensiones
innecesarias
esto incluye
Widgets y
aplicaciones
corriendo en
segundo plano
considera
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
no slo de Microsoft, de todos
los fabricantes
Debes asegurarte
que tu aplicacin
funciona para
todo tipo de
cliente
denominaciones
Utiliza siempre el
sitio oficial para
descargar.
Las versiones
Express no tienen
costo
no es necesario instalar todo
Visual Studio
Express Edition
Web
si tu PC tiene algunos aos
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
en la parte lateral de tu proyecto
Encontrars el
Explorador de
Soluciones,
desde aqu,
podras cada uno
de los archivos de
tu proyecto
desde el explorador de soluciones
Abre y edita
index.cshtml
en el documento index.cshtml
Y escribe lo
siguiente.
Ten cuidado con
los smbolos,
forman parte del
lenguaje HTML
presiona el botn Iniciar
( el smbolo PLAY o presiona F5 )
Luego de unos
segundos (lo que
tarde en compilar),
se abrir tu
aplicacin en un
browser de
internet
Felicitaciones!
Para editar y
probar los nuevos
cambios, siempre
debes detener la
aplicacin
ten en cuenta
Crea un nuevo
proyecto de tipo
Visual C# -
Aplicacin web
ASP.NET y utiliza la
plantilla simple
MVC
vamos a crear una nueva pgina y agregarla al proyecto
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
porqu se pide en forma indirecta una pgina?
Los archivos
Controladores
estn ubicados en
la carpeta
CONTROLLER.
En este caso
existen 3
abre y edita HomeController.cs
Ten mucho
cuidado de
agregar la porcin
de cdigo
sealada, con sus
smbolos
especiales
observa lo siguiente
return View("/Views/Custom/principal.cshtml");
que significa?
Ve al men
depurar y elige
INICIAR
DEPURACION o
presiona F5
una vez que haya iniciado
Escribe (a mano)
en la barra de
direcciones, el
punto de entrada
/Home/Principal y
presiona enter
el controlador tomar el CONTROL
El CONTROLADOR
recibe la orden y deriva
a la VISTA que
indicaste en
return
View("/Views/Custom/principal.cshtml");
haz creado un nuevo punto de entrada para tu vista
Detn la aplicacin.
Crea una nueva vista en la carpeta
CUSTOM y nombrala Secundaria
Edita el archivo HomeController.chtml
ejercita el concepto
El cdigo HTML se
edita en los
archivos de tipo
cstml, o sea, los
ubicados en la
carpeta VIEWS
prueba los elementos HTML
Agrega un ttulo
<h1>
Un prrafo <p> y
un elemento link
<a href..>
a esta altura deberas haber logrado
El estilo se define
en el lenguaje CSS.
El archivo por
defecto se
encuentra en la
carpeta CONTENT
y se llama Site.css
Recuerda el concepto que para
editar un estilo tienes dos formas
Colocando un id al
elemento HTML
Colocando una
CLASE al elemento
html
luego, debes abrir el archivo de estilo
Site.css
Coloca el estilo
segn el ID
usando el prefijo #
Coloca el estilo
segn la CLASE
usando el prefijo .
presiona la tecla Ejecutar
( o presiona F5 )
Ejecuta la
aplicacin y
visualiza los
cambios en el
estilo
quieres tu propia hoja de estilo?
Puedes crear tu
propia hoja de
estilo, para esto,
sobre la carpeta
CONTENT, click
derecho, agregar
nuevo elemento
prueba diferentes estilos y formas para los elementos HTML
En Visual Studio
2013, tu aplicacin
trae incorporado
BOOTSTRAP, que
es una librera de
estilos
predefinidos
Busca la documentacin en la web
Coloca en el
buscador
Twitter Bootstrap
v3.0
Documentation
Empieza por
components
Bootstrap es muy simple de
implementar
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.
observa especialmente los
siguientes controles de Bootstrap
Carousel
Collapse
Tab
Modal
DropDown
componentes predefinidos
Que podremos
utilizar cualquiera de
las caractersticas de
estos controles, sin
agregar nada.
Porque ya vienen
incluidos
comencemos con la ejercitacin
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
antes de continuar precisamos un pequeo ajuste
Ubica el archivo
_Layout.cshtml ubicado
en Views / Shared.
Edtalo y mueve la
seccin inferior hacia
arriba como indica la
imagen a continuacin
traslada las lineas de Jquery y
bootstrap
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
tu aplicacin ya est lista para usar Jquery
function decirHola(){
alert("Hola, esto es con Javascript")
}
decirHola();
</script>
probemos la pagina
Ve al men
depurar y elige
INICIAR
DEPURACION o
presiona F5
una vez que haya iniciado
Escribe (a mano)
en la barra de
direcciones, el
punto de entrada
/Home/Principal y
presiona enter
este debera ser tu resultado
Un alerta, en el
centro de la
pantalla, con el
mensaje que
habas escrito
bindear (ligar-enlazar) un evento javascript a un elemento HTML
Incorpora un botn,
para esto utilizamos
el ejemplo HTML de
botn de Bootstrap
Si no recuerdas la
forma, ve a la
pgina, seccin
Componentes
asocia el evento click a la funcin
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
evala otros eventos
Detengamos la
aplicacin.
Editemos
principal.chtml
Modifiquemos la
palabra click por otros
eventos
sigue explorando
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
Incorpora las imgenes al proyecto
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
Crea una vista adicional para probar
En el Controlador
HomeController.cs
Agrega el punto de
entrada para la vista
prueba1.
Recuerda que para
probar la ruta ser
/Home/Prueba1
consulta la documentacin del Carousel
http://getbootstrap.com/javascript/
#carousel
debera quedar algo as
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
un ejemplo de como funcionan?
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
Crea una vista adicional para probar
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
creamos un formulario dentro
de prueba2
Ingresamos los
campos indicados en
la imagen
agregamos los validadores
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
Crea un nuevo
proyecto de tipo
Visual C# -
Aplicacin web
ASP.NET y utiliza la
plantilla simple
MVC
crea los siguientes secciones
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
si lo probaste con xito, notars una pequea falla
Profundizaremos en el lenguaje C#
Identificaremos los componentes y
efectuaremos las primeras
codificaciones
conceptos previos
Los bloques de
cdigo se encierran
entre { }
En este ejemplo
tenemos la clase
pblica (public class)
HomeController de
tipo Controller
Entendiendo las partes
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
tambin puedes devolver otras cosas
Evaluaremos parmetros y
tomaremos decisiones
Los puntos de entrada tambin
pueden recibir parmetros
Es posible agregar
valores al punto de
entrada ( o a
cualquier funcin de
c#), estos valores se
llaman parmetros
utilizando la instruccin IF (SI) para tomar una decisin
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
una vez que haya iniciado la pgina
/Home/Prueba1?idioma=ingles&colo
r=rojo
presta atencin a los detalles
El primer
parmetro va
separado por ?
Los siguientes
parmetros
siempre separados
por &
modifica los parmetros y
el resultado vara
Intercambia en
donde dice
idioma, entre el
valor ingles y
espaol, el
resultado sern
distintas pginas
ejercita
Enva a la bolsa de
datos un titulo y un
subtitulo.
Escrbelo en el
controlador como
indica la imagen
edita la vista principal.chtml
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
para que sirve enviar los datos desde controlador?
if (idioma == "ingles") {
ViewBag.untitulo = "Welcome";
} else {
ViewBag.untitulo = "Bienvenido";
}
agrega parmetros al punto de entrada
Crea un nuevo
proyecto de tipo
Visual C# -
Aplicacin web
ASP.NET y utiliza la
plantilla simple
MVC
crea los siguientes secciones
Edita el formulario
llamado
contacto.cshtml y
escribe en la
seccin action lo
siguiente
continua con
Prueba el circuito.
Inicia desde
/Forma/Contacto
Y verifica como
funciona cuando
haces click en
Enviar
continua ejercitando
Abre un proyecto
existente o crea
uno nuevo
ubica el explorador de objetos
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
hemos creado la base de datos
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
ingresando datos de prueba
En el formulario Ver
Datos, ingresa datos de
prueba
nuestra tabla est lista para efectuarle consultas
SELECT * FROM
CONTACTOS
Luego presionamos la
tecla ejecutar
la primer consulta arroja un resultado
Abra un proyecto
existente, sino,
cree uno nuevo
del tipo Visual C#
- Aplicacin web
ASP.NET y utiliza la
plantilla simple
MVC
Crear o usar una base creada
1) Crear la conexin
2) Crear la sentencia
3) Asociar la sentencia a la conexin
4) Ejecutar la sentencia
5) Leer el resultado de la sentencia
6) Cerrar la conexin
1. Crear la conexin
Haga click en el
explorador de
Objectos de SQL.
Elija la Base de
Datos. Click
derecho,
propiedades
Copie la cadena de conexin
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;
connection.Close();