Tutorial_Aprendiendo a Programar
-
Upload
christian-basantes -
Category
Documents
-
view
236 -
download
1
Transcript of Tutorial_Aprendiendo a Programar
-
8/10/2019 Tutorial_Aprendiendo a Programar
1/262
Autor:Comunidad IT - Asociacin Civil de Formacin e Insercin Laboral en Tecnologa
Aprendiendo a ProgramarTutorial del Curso
-
8/10/2019 Tutorial_Aprendiendo a Programar
2/262
Captulo 2. Aplicaciones en la nube y cmo comenzar a progCaptulo 3. La interfaz de usuario .....Captulo 4. Inteligencia en la interfaz de usuario ..Captulo 5. El Servidor Web .Captulo 6. El lenguaje C# .....
Captulo 7. El Servidor Web. Conceptos Avanzados ..Captulo 8. Dnde y cmo se guardan los datos Captulo 9. Conectando los datos con la aplicacin
Contenido
Nota: Los captulos 1, 10, 11 y 12 son tericos, por lo que no hay tutorial incluido.
-
8/10/2019 Tutorial_Aprendiendo a Programar
3/262
Aplicaciones en la nube ycmo comenzar a programarpreparacin del ambiente de desarrollo
Aprendiendo a programar. Capitulo 2. Tutorial
-
8/10/2019 Tutorial_Aprendiendo a Programar
4/262
Para que puedas utilizar tucomputadora para disearaplicaciones debes tener especiacuidado de los programasque tengas instalados
consideraciones iniciales
-
8/10/2019 Tutorial_Aprendiendo a Programar
5/262
Tu computadora debe estar librevirus, spyware y software inneceDebes desinstalar toda barra, wio programas que no sea esenciatu computadora
verificar primero
-
8/10/2019 Tutorial_Aprendiendo a Programar
6/262
Barras denavegacinadicionales ebrowserY extensionesinnecesarias
esto incluye
-
8/10/2019 Tutorial_Aprendiendo a Programar
7/262
Widgets yaplicacionescorriendo ensegundo plan
esto incluye
-
8/10/2019 Tutorial_Aprendiendo a Programar
8/262
Cuidar el software que se instalacomputadora.Si algo falla, es dficil detectar si trata de un error en algo queestamos programando ogenerado por un programasecundario
considera
-
8/10/2019 Tutorial_Aprendiendo a Programar
9/262
Intenta crear utilizar un peusuario difereexclusivamenpara programmantenlo aisl
si compartes la compucon otras personas
-
8/10/2019 Tutorial_Aprendiendo a Programar
10/262
Aunque sea uobviedad antinstalar, asegque tu SistemOperativo estactualizado
comencemos
-
8/10/2019 Tutorial_Aprendiendo a Programar
11/262
Descarga la uversin dispoque exista debrowser deinternet
ltima versin delnavegador de internet
-
8/10/2019 Tutorial_Aprendiendo a Programar
12/262
Debes asegurque tu aplicafunciona paratodo tipo de
cliente
no slo de Microsoft, los fabricantes
-
8/10/2019 Tutorial_Aprendiendo a Programar
13/262
El entorno de desarrollo se llamaMicrosoft Visual Studio
Existen versiones Profesionales,
Empresariales y Express
denominaciones
-
8/10/2019 Tutorial_Aprendiendo a Programar
14/262
Si bien las versiones ProfesionaleEmpresariales traen algunascaractersticas adicionales, con laversiones Express alcanzan (y so
para comenzar a programar
diferencias
-
8/10/2019 Tutorial_Aprendiendo a Programar
15/262
Utiliza siemprsitio oficial padescargar.Las versiones
Express no tiecosto
no descargues los prode cualquier sitio
-
8/10/2019 Tutorial_Aprendiendo a Programar
16/262
Para este cursprecisas insta
Visual Studio
Express EditioWeb
no es necesario instala
-
8/10/2019 Tutorial_Aprendiendo a Programar
17/262
Puedes instalar las versiones 2012010 si tu computadora tiene unSistema Operativo de hace unosTambin sirven para comenzar.
De todos modos recuerda, preciuna conexin permanente a Inte
si tu PC tiene algunos aos
-
8/10/2019 Tutorial_Aprendiendo a Programar
18/262
Intenta descargar la versinImagen ISO, es como una copia DVD.Luego quema un DVD con la im
o bien utiliza Virtual CD-ROM (slo tienes, descrgalo) para abrir imagen ISO y ejecutar el instalad
si tu conexin a internet no es muy rpida
-
8/10/2019 Tutorial_Aprendiendo a Programar
19/262
Iniciar sesin con un usuario dedesarrollo.Esto es para acceder a los servicadicionales en la nube para
desarrolladores.Puede que sea tu cuenta habituahotmail/live u otra de productos
Finalizada la instalacin, la primera vez te solicitar
-
8/10/2019 Tutorial_Aprendiendo a Programar
20/262
Te solicitar conectarte a AZURE(opcional), puedes hacerlo en otmomento.AZURE te permitir acceder a
servicios para tu aplicacin, alguson gratuitos, otros pagos.
al momento de iniciar
-
8/10/2019 Tutorial_Aprendiendo a Programar
21/262
-
8/10/2019 Tutorial_Aprendiendo a Programar
22/262
Haz completado la instalacin coxito.
Hagamos la primera prueba
si visualizaste la pantalla anterior
-
8/10/2019 Tutorial_Aprendiendo a Programar
23/262
Visual Studiosoporta diferlenguajes.Asegrate de
elegir Visual CWeb AplicaWeb ASP.NET
inicia un nuevo proyec
-
8/10/2019 Tutorial_Aprendiendo a Programar
24/262
Puedes utilizaplantilla Singlpara entendeestructura.
En este ejemputilizaremos lplantilla MVC
en la configuracin ini
-
8/10/2019 Tutorial_Aprendiendo a Programar
25/262
-
8/10/2019 Tutorial_Aprendiendo a Programar
26/262
Encontrars eExplorador dSoluciones,desde aqu,
podras cada ude los archivotu proyecto
en la parte lateral de t
-
8/10/2019 Tutorial_Aprendiendo a Programar
27/262
Abre y editaindex.cshtml
desde el explorador d
-
8/10/2019 Tutorial_Aprendiendo a Programar
28/262
Y escribe losiguiente.Ten cuidado clos smbolos,
forman partelenguaje HTM
en el documento inde
-
8/10/2019 Tutorial_Aprendiendo a Programar
29/262
Luego de unosegundos (lo tarde en comse abrir tu
aplicacin enbrowser deinternet
presiona el botn Inic( el smbolo PLAY o pr
-
8/10/2019 Tutorial_Aprendiendo a Programar
30/262
-
8/10/2019 Tutorial_Aprendiendo a Programar
31/262
Acabas de escribir tus primeras lde cdigo y lograste que tu primaplicacin mostrara el resultado deseabas.
Felicitaciones!
-
8/10/2019 Tutorial_Aprendiendo a Programar
32/262
Escribiste una porcin de cdigolenguaje HTML, el cual tiene unasimbologa en particular.Aplicaste los cambios en la
aplicacin, la cual se compila y tpermite ver el resultado.
entendiendo un poco lo que hicimos
-
8/10/2019 Tutorial_Aprendiendo a Programar
33/262
Puedes editar todos los archivosde extensin cshtml del proyectoescribir trozos de cdigo HTML.Comienza explorando en el busc
web con las claves basic htmlelements
explora un poco ms
-
8/10/2019 Tutorial_Aprendiendo a Programar
34/262
Para editar yprobar los nucambios, siemdebes detene
aplicacin
debes detener la aplic
-
8/10/2019 Tutorial_Aprendiendo a Programar
35/262
En Visual Studio, los archivos dehtml se denominan cshtml (ya qpueden hacer cosas adicionales)Lo que encuentres para html,
funciona para los cshtml
ten en cuenta
-
8/10/2019 Tutorial_Aprendiendo a Programar
36/262
Esta primera prueba sirvi para vla correcta instalacin del entorndesarrollo. Considera que tu aplslo es visible en tu computado
Luego podrs instalarla en un seWEB para acceder a ella desde cparte del mundo
tu entorno est listo para desarrollar en un ambiente local
-
8/10/2019 Tutorial_Aprendiendo a Programar
37/262
La interfaz de usuarioCrear y editar HTML, uso de herramientas del desarro
Aprendiendo a programar. Captulo 3. Tutorial
-
8/10/2019 Tutorial_Aprendiendo a Programar
38/262
Crearemos una Aplicacin Web cero, modificaremos las interfaceusuario en HTML, su estilo en CSidentificaremos como se invocan
diferentes pantallas de nuestraaplicacin
objetivo
-
8/10/2019 Tutorial_Aprendiendo a Programar
39/262
Crea un nuevproyecto de tVisual C# -Aplicacin we
ASP.NET y utiplantilla simpMVC
comencemos
-
8/10/2019 Tutorial_Aprendiendo a Programar
40/262
Recuerda que en programacin,cuando creas un nuevo archivo sdeben evitar los nombres quecontengan espacios, acentos,
nmeros o smbolos.Reemplaza los espacios con el gbajo _ o bien omtelos.
vamos a crear una nueva pgina y agregarla al proyecto
-
8/10/2019 Tutorial_Aprendiendo a Programar
41/262
Las pantallas HTML siempren la carpeta Las carpetas s
para ordenar archivos.
en el explorador de so
-
8/10/2019 Tutorial_Aprendiendo a Programar
42/262
Posicinate sobre Views, clickderecho.Agregar Nueva CarpetaColoca el nombre Custom
crea una nueva carpeta sobre VIEWS
-
8/10/2019 Tutorial_Aprendiendo a Programar
43/262
-
8/10/2019 Tutorial_Aprendiendo a Programar
44/262
Posicinate sobre Custom , clickderecho.Agregar Nueva VistaColoca el nombre Principal
agrega una nueva vista (archivo cshtml), en la carpeta custom, re
-
8/10/2019 Tutorial_Aprendiendo a Programar
45/262
Elige la planti(empty)
al momento de crear lte preguntar si quiereuna plantilla
-
8/10/2019 Tutorial_Aprendiendo a Programar
46/262
Tu vista est lpara ser edita
este debera ser tu res
d i d b d l i i i
-
8/10/2019 Tutorial_Aprendiendo a Programar
47/262
El modelo de desarrollo MVC tieun comportamiento que necesitentender para poder continuarVeamos cuales son
antes de continuar, debemos entender algunos principios
l ll ( i ) l l d d i d l i
-
8/10/2019 Tutorial_Aprendiendo a Programar
48/262
Para poder ver una pantalla denuestra aplicacin, el usuario dehacer algo, ya sea un click en uno bien escribir la ruta completa e
barra de direcciones del navegadweb.
las pantallas (vistas) son el resultado de una accin del usuario
li it t ll l b d l hi
-
8/10/2019 Tutorial_Aprendiendo a Programar
49/262
En la barra de direcciones, nuncaescribimos el nombre del archivopara poder acceder (en este caso
/Custom/Principal.cshtml)
Sino que accedemos en formaINDIRECTA, a travs de los archivllamados CONTROLLERS
nunca se solicita una pantalla por el nombre del archivo
id l i f i di t
-
8/10/2019 Tutorial_Aprendiendo a Programar
50/262
El CONTROLADOR, es el intermeentre lo que pide el usuario y lo deseamos mostrarle.Un CONTROLADOR podra decid
mostrar un pgina u otra, por eje/Custom/Principal.cshtml o bien/Custom/Principal_Version_Ingle
para que se pide la pagina en forma indirecta
porqu se pide en forma indirecta una pgina?
-
8/10/2019 Tutorial_Aprendiendo a Programar
51/262
El CONTROLADOR permite tomadecisiones en nuestra aplicacinbase a esas decisiones, mostrar otro resultado
porqu se pide en forma indirecta una pgina?
para el usuario de nuestra aplicacin esto es INVISIBLE
-
8/10/2019 Tutorial_Aprendiendo a Programar
52/262
Cuando solicitemos la pgina, lopor el punto de entrada que defen el CONTROLADOR.Este punto de entrada puede ten
nombre DISTINTO a la pgina.El usuario no sabe que si le mospantalla A o B, solo sabe que ingruta que le provee el CONTROLA
para el usuario de nuestra aplicacin esto es INVISIBLE
identificando los contr
-
8/10/2019 Tutorial_Aprendiendo a Programar
53/262
Los archivosControladoreestn ubicadola carpeta
CONTROLLEREn este casoexisten 3
identificando los contr
abre y edita HomeCon
-
8/10/2019 Tutorial_Aprendiendo a Programar
54/262
El lenguaje quescrito es C#.Veremos msen el siguient
capitulo.Necesitamos punto de accnuestra vista
abre y edita HomeCon
agrega el punto de en
-
8/10/2019 Tutorial_Aprendiendo a Programar
55/262
Ten muchocuidado deagregar la pode cdigo
sealada, consmbolosespeciales
agrega el punto de enel CONTROLADOR
observa lo siguiente
-
8/10/2019 Tutorial_Aprendiendo a Programar
56/262
El punto de entrada le indica laubicacin del archivo, en nuestrocaso la carpeta CUSTOM y la vistprincipal.cshtml
return View("/Views/Custom/principal.cshtml");
observa lo siguiente
que significa?
-
8/10/2019 Tutorial_Aprendiendo a Programar
57/262
Que nuestra vista, ahora es acce
a travs del browser de internet travs del punto de entrada/Home/PrincipalHome, es el nombre del controlaHomeController.csPrincipal es el nombre de la funcpublic ActionResult Principal()
que significa?
probemos la pagina
-
8/10/2019 Tutorial_Aprendiendo a Programar
58/262
Ve al mendepurar y eligINICIARDEPURACION
presiona F5
probemos la pagina
una vez que haya inici
-
8/10/2019 Tutorial_Aprendiendo a Programar
59/262
Escribe (a maen la barra dedirecciones, epunto de ent
/Home/Principresiona ente
una vez que haya inici
el controlador tomar
-
8/10/2019 Tutorial_Aprendiendo a Programar
60/262
El CONTROLArecibe la ordea la VISTA quindicaste en
returnView("/Views/Custom/p
el controlador tomar
haz creado un nuevo punto de entrada para tu vista
-
8/10/2019 Tutorial_Aprendiendo a Programar
61/262
De ahora en ms puedes editar
vista principal.cshtml, tu punto dentrada ya existe y siempre ser mismo.
Asimismo, puedes editar el puntentrada y por el mismo camino/Home/Principal decidir presentotra pgina
p p
ejercita el concepto
-
8/10/2019 Tutorial_Aprendiendo a Programar
62/262
Detn la aplicacin.Crea una nueva vista en la carpeCUSTOM y nombrala SecundariaEdita el archivo HomeController.
j p
ejercita el concepto
-
8/10/2019 Tutorial_Aprendiendo a Programar
63/262
Modifica el punto de entradareemplaza
return View("/Views/Custom/principal.cshtml");
Porreturn View("/Views/Custom/secundaria.cshtml");
j p
ejercita el concepto
-
8/10/2019 Tutorial_Aprendiendo a Programar
64/262
Inicia nuevamente la aplicacin (coloca en el browser la direccin
/Home/Principal
Si todo es correcto, habrs visto que EL MISMO PUN
ENTRADA ahora devolvi (RENDERIZ) la vista Secun
continua ejercitando
-
8/10/2019 Tutorial_Aprendiendo a Programar
65/262
Crea una nueva carpeta llamada
PRUEBAS.Crea una vista con el nombrePRUEBA1.Agrega en HomeController.cs un
punto de entrada para la nueva El punto de entrada debe tener nombre distinto a los existentes.
hemos comprendido como se llaman las pantallas (VISTAS) a tra
-
8/10/2019 Tutorial_Aprendiendo a Programar
66/262
Es ms, recuerdas que cuandoiniciamos el proyecto elegimos lplantilla MVC ?, esto significaM = Modelo
V = VistasC = Controladores
Controladores (CONTROLLERS)
Continuemos con HTM
-
8/10/2019 Tutorial_Aprendiendo a Programar
67/262
El cdigo HTMedita en losarchivos de ticstml, o sea, l
ubicados en lcarpeta VIEW
prueba los elementos HTML
-
8/10/2019 Tutorial_Aprendiendo a Programar
68/262
En el curso, mencionamos los
diferentes componentes HTMLPrueba cada uno de ellos en lasdiferentes pginas.Para que ser ms ordenado, utili
diferentes vistas para que puedaprobar los componentes porseparado
edita principal.chtml
-
8/10/2019 Tutorial_Aprendiendo a Programar
69/262
Agrega un tt
Un prrafo