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


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.


3/262

Aplicaciones en la nube ycmo comenzar a programarpreparacin del ambiente de desarrollo

Aprendiendo a programar. Capitulo 2. Tutorial


4/262

Para que puedas utilizar tucomputadora para disearaplicaciones debes tener especiacuidado de los programasque tengas instalados

consideraciones iniciales


5/262

Tu computadora debe estar librevirus, spyware y software inneceDebes desinstalar toda barra, wio programas que no sea esenciatu computadora

verificar primero


6/262

Barras denavegacinadicionales ebrowserY extensionesinnecesarias

esto incluye


7/262

Widgets yaplicacionescorriendo ensegundo plan

esto incluye


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


9/262

Intenta crear utilizar un peusuario difereexclusivamenpara programmantenlo aisl

si compartes la compucon otras personas


10/262

Aunque sea uobviedad antinstalar, asegque tu SistemOperativo estactualizado

comencemos


11/262

Descarga la uversin dispoque exista debrowser deinternet

ltima versin delnavegador de internet


12/262

Debes asegurque tu aplicafunciona paratodo tipo de

cliente

no slo de Microsoft, los fabricantes


13/262

El entorno de desarrollo se llamaMicrosoft Visual Studio

Existen versiones Profesionales,

Empresariales y Express

denominaciones


14/262

Si bien las versiones ProfesionaleEmpresariales traen algunascaractersticas adicionales, con laversiones Express alcanzan (y so

para comenzar a programar

diferencias


15/262

Utiliza siemprsitio oficial padescargar.Las versiones

Express no tiecosto

no descargues los prode cualquier sitio


16/262

Para este cursprecisas insta

Visual Studio

Express EditioWeb

no es necesario instala


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


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


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


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


21/262


22/262

Haz completado la instalacin coxito.

Hagamos la primera prueba

si visualizaste la pantalla anterior


23/262

Visual Studiosoporta diferlenguajes.Asegrate de

elegir Visual CWeb AplicaWeb ASP.NET

inicia un nuevo proyec


24/262

Puedes utilizaplantilla Singlpara entendeestructura.

En este ejemputilizaremos lplantilla MVC

en la configuracin ini


25/262


26/262

Encontrars eExplorador dSoluciones,desde aqu,

podras cada ude los archivotu proyecto

en la parte lateral de t


27/262

Abre y editaindex.cshtml

desde el explorador d


28/262

Y escribe losiguiente.Ten cuidado clos smbolos,

forman partelenguaje HTM

en el documento inde


29/262

Luego de unosegundos (lo tarde en comse abrir tu

aplicacin enbrowser deinternet

presiona el botn Inic( el smbolo PLAY o pr


30/262


31/262

Acabas de escribir tus primeras lde cdigo y lograste que tu primaplicacin mostrara el resultado deseabas.

Felicitaciones!


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


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


34/262

Para editar yprobar los nucambios, siemdebes detene

aplicacin

debes detener la aplic


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


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


37/262

La interfaz de usuarioCrear y editar HTML, uso de herramientas del desarro

Aprendiendo a programar. Captulo 3. Tutorial


38/262

Crearemos una Aplicacin Web cero, modificaremos las interfaceusuario en HTML, su estilo en CSidentificaremos como se invocan

diferentes pantallas de nuestraaplicacin

objetivo


39/262

Crea un nuevproyecto de tVisual C# -Aplicacin we

ASP.NET y utiplantilla simpMVC

comencemos


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


41/262

Las pantallas HTML siempren la carpeta Las carpetas s

para ordenar archivos.

en el explorador de so


42/262

Posicinate sobre Views, clickderecho.Agregar Nueva CarpetaColoca el nombre Custom

crea una nueva carpeta sobre VIEWS


43/262


44/262

Posicinate sobre Custom , clickderecho.Agregar Nueva VistaColoca el nombre Principal

agrega una nueva vista (archivo cshtml), en la carpeta custom, re


45/262

Elige la planti(empty)

al momento de crear lte preguntar si quiereuna plantilla


46/262

Tu vista est lpara ser edita

este debera ser tu res

d i d b d l i i i


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


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


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


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?


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


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


53/262

Los archivosControladoreestn ubicadola carpeta

CONTROLLEREn este casoexisten 3

identificando los contr

abre y edita HomeCon


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


55/262

Ten muchocuidado deagregar la pode cdigo

sealada, consmbolosespeciales

agrega el punto de enel CONTROLADOR

observa lo siguiente


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?


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


58/262

Ve al mendepurar y eligINICIARDEPURACION

presiona F5

probemos la pagina

una vez que haya inici


59/262

Escribe (a maen la barra dedirecciones, epunto de ent

/Home/Principresiona ente

una vez que haya inici

el controlador tomar


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


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


62/262

Detn la aplicacin.Crea una nueva vista en la carpeCUSTOM y nombrala SecundariaEdita el archivo HomeController.

j p



63/262

Modifica el punto de entradareemplaza

return View("/Views/Custom/principal.cshtml");

Porreturn View("/Views/Custom/secundaria.cshtml");

j p



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


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


66/262

Es ms, recuerdas que cuandoiniciamos el proyecto elegimos lplantilla MVC ?, esto significaM = Modelo

V = VistasC = Controladores

Controladores (CONTROLLERS)

Continuemos con HTM


67/262

El cdigo HTMedita en losarchivos de ticstml, o sea, l

ubicados en lcarpeta VIEW

prueba los elementos HTML


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


69/262

Agrega un tt

Un prrafo

Documents

Tutorial_Aprendiendo a Programar