Ciclo I­2016 . SEMANA 2 1­5 Marzo.2016 Guìa Ex­aula

Universidad de El Salvador Facultad de Ingeniería y Arquitectura Escuela de Ingeniería de Sistemas Informáticos Introducción a la Informática

Fecha: 1o. de Marzo de 2016

Guía No. 2ex de Laboratorio (Práctica autodirigida) Componentes del IDE ­ Tareas/Operaciones básicas con VS2015.

*Esta guía la debe realizar el estudiante por su cuenta y de manera ex­aula

Introducción Esta guía consta de tres partes. La primera parte se hace un reconocimiento de los componentes del IDE y se describe algunas de las áreas más importante del IDE; la segunda parte se le indica los tipos de ventana y cómo operar, ocultar/mostrar y navegar por las ventanas del entorno; mientras que en la tercera parte se indica la manera de ocultar/mostrar otros componentes específicamente las barras de herramientas, todas son tareas básicas a realizar con el IDE y son operaciones comunes/frecuentes que tendrá que realizar durante el curso. Objetivo General:

Conocer, Ubicar, restablecer/mostrar/ocultar y navegar por los principales componentes/ventanas del IDE VS2015, con una solución/proyecto abierto; como preparación y fase introductoria a la codificación de aplicaciones.

Objetivos Específicos:

Conocer y Comprender la función de los principales componentes de Visual Studio. Aprender tareas/operaciones básicas/comunes de uso de los componentes del IDE. Adquirir capacidad para ubicar (encontrar) componentes/ventanas y barras de herramientas

del IDE Visual Studio con un proyecto abierto. Familiarizar al estudiante y adquirir confianza en el Uso del IDE, a fin de dispersar el “temor” o “miedo” a lo desconocido.

Equipo, Materiales y Herramientas

Computadora Personal con Windows 7 / 8 / 8.1 y Conexión a Internet. Navegador de Internet (Chrome, Firefox, Opera, Internet Explorer u Otro similar).

Material de Lectura Obligatorio(Se auto­evaluará en Aula Virtual, antes de asistir a su grupo de laboratorio, del 5 al 11 de Marzo 2016)

Lectura 1. Guía No.1ex. Descarga, Instalación y Primeros Pasos con el IDE(solo la Parte IV) Lectura 2. Guia No.2ex Componentes_del_IDE_tareas­operaciones_basicas (Toda la guía)

1

Parte I. Reconocimiento de Componentes (Visual Studio 2015 Community) 1. En botón Inicio busque Visual Studio, Ejecute el programa, espere unos instantes para que cargue completamente. 2. Visualizará la pantalla inicial del entorno de Visual Studio Como se muestra a continuación

3. Como ya habíamos estudiado en la guía anterior, las partes visibles en la imágen anterior son:

Barra de menús, la barra de herramientas, la página principal (por cierto el área donde se muestra la

página principal es conocida también como área principal ó área de trabajo ó área de edición, pues es

en esa área, donde se codifican/editan los programas y otros tipos de archivos) al centro ocupando el

mayor espacio. También hablamos sobre el explorador de soluciones que se encuentra a la derecha.

Observe que está “vacío”, esto se debe a que no se ha abierto ninguna solución por el momento.

Pues bien lo que haremos es un repaso y también estudiar partes que no se mencionaron.

4. Observe la siguiente figura (página siguiente) donde se señalan las partes anteriormente

estudiadas y otras que no se mencionan antes pero que se incluyen hoy.

2

5. Primero revisemos en la parte superior. En la parte superior tenemos 2 iconos y una caja de

busqueda. El primer icono (bandera sobre amarillo) nos permite visualizar notificaciones de interés

sobre el producto,desde microsoft, el segundo (carita feliz) nos permite escribir comentarios y dar

nuestras opiniones a Microsoft, a la vez que las envía a Microsoft y luego la más importante la caja

de búsqueda o INICIO RÁPIDO (por el parecido con botón Inicio de windows).

6. Esta caja (inicio rápido) nos da información muy útil, principalmente cuando estamos Comenzando en el uso del IDE, POR EJEMPLO: ingrese en la caja el término restablecer: como se ve en la figura siguiente:

La caja de búsqueda puede dar cero, uno o más resultados, en este caso da dos. El primero es el que nos interesa, para el caso, Tome nota que para restablecer ventanas debe ir a Menús, opción Ventana y luego opción Restablecer diseños de ventana.

3

7. Ahora vamos a hacer un ejercicio. En el menú Ventana seleccione o de click a la opción cerrar todos los documentos, luego siempre en menú Ventana seleccione ocultar todo automáticamente. Su ventana se verá similar a la siguiente figura.

8. Pero; cómo restablecemos la apariencia que tenía la ventana? pues lo primero a hacer es utilizar la secuencia de menú que obtuvimos en la caja de búsqueda, Vaya al menú Ventana y luego seleccione Restablecer diseños de ventana. Obtendrá algo similar a la figura siguiente:

*Vuelve a tener la distribución/apariencia original de las ventanas.

4

9. Aún así, La apariencia de la ventana no es la misma falta la página principal, qué podemos hacer? bueno, utilicemos la caja de búsqueda (inicio rápido), escriba en la caja de búsqueda: página principal y vemos los resultados que aparecen:

10. Nos está indicando, que debemos ir al menú Ver, y luego a la opción Página Principal, Hágalo Ud. mismo (vea la siguiente figura).

11. La Ventana de Visual Studio nos queda como sigue:

En conclusión, hemos conseguido volver a la apariencia inicial que tenía el IDE.

5

Moraleja: Mientras aprende a usar el IDE, puede auxiliarse de la caja de búsqueda del IDE, la cual siempre le ofrecerá alguna información útil acerca de lo que necesita. APERTURA Y CIERRE DE UN PROYECTO (el cierre se hará al final de la guía)

**En esta ocasión no se va a codificar, ni ejecutar ningún programa sólo se aprenderá: abrir y cerrar un proyecto (solución). PERO es importante que se prepare para la primera práctica llevando los conocimientos básicos sobre los componentes del IDE, así como la apertura y cierre de un proyecto. A continuación aprenderemos a crear un nuevo proyecto, cerrar todas las ventanas del proyecto, sin cerrar el proyecto y volver a restablecer las ventanas. Para ello siga los pasos:

1. En Visual Studio en el menú Archivo de click a Nuevo y a continuación seleccione la opción Proyecto...

2. En el cuadro de diálogo que aparece seleccione Instalado (a la izquierda y debajo de Reciente), después seleccione plantillas, a continuación Visual C# y finalmente la opción (en la franja central) Aplicación de Consola, se le debe poner un nombre al proyecto, el IDE los nombra automáticamente por lo que dejaremos ese nombre ConsoleApplication1, Observe que también se puede indicar la ruta donde guardar los archivos y el nombre de la solución (automáticamente se toma como nombre de la solución el mismo nombre del proyecto ConsoleApplication1, pero puede ser distinto, por el momento déjelo así, no modifique ninguno) para finalizar con la creación, de click en el botón aceptar

*Siempre seleccione (chequee) la opción de Crear directorio para la solución.

6

3. Después de unos instantes Visual Studio, termina de preparar el proyecto, por lo que visualizará una pantalla similar a la figura que sigue:

En la figura de arriba, puede apreciar los siguientes elementos: El editor de código, que ocupa la parte central aproximadamente (donde se ve el texto del programa). También Observe que el Explorador de Soluciones está mostrando información, mientras que antes estaba vacío (no mostraba nada); Así como también se puede apreciar que bajo el Explorador de Soluciones se despliega una nueva ventana que es la ventana Propiedades. En la última figura mostrada, es importante recalcar los siguientes puntos: En la parte superior del Editor se muestran tres “cajas”, la de más a la izquierda representa el nombre del proyecto (en una solución pueden existir 1 o más proyectos y dentro de este 1 o más namespaces), la caja que le sigue al centro representa la clase dentro de la cual está el programa (en este caso la clase es Program), al extremo derecho en la última caja se muestra, el nombre del método que se está trabajando y que se visualiza en pantalla que es el método Main. Estas cajas son listas desplegables por lo que cambiando el valor de dichas listas el programador se puede desplazar entre proyectos, clases y métodos simultáneamente, solo cambiando dichos valores. Justo debajo de las mencionadas cajas o listas desplegables está el editor, donde se muestra el código del programa, el cual explicaré rápida y brevemente: Las líneas donde aparece la palabra using sirven para “invocar” las bibliotecas de clases específicas a utilizar en el programa (cabe mencionar que la mayoría de dichas bibliotecas de clases, no las vamos a utilizar, pero la invocación está ahí, porque se generó el programa a partir de una

7

plantilla/modelo automáticamente, pero la única que vamos a usar es System, al menos los primeros meses). Como se dijo antes, en esta ocasión no vamos a programar, así que para finalizar, diré que las siguientes líneas en el programa sirven para lo siguiente:

La línea del namespace, sirve para “declarar” un espacio de nombres dentro del cual guardar nuestras clases en este caso la clase Program,

Luego sigue la línea de la clase, la cual sirve para guardar nuestro método Main (en C# todos los métodos sin excepción, deben estar dentro de una clase) es por ello que la clase Program alberga/contiene al método Main.

Finalmente el método main contiene al grupo de instrucciones que se deben ejecutar para que el algoritmo funcione.

Tanto el namespace, la clase y el Main delimitan su espacio por medio de un par de llaves 4. Ya hemos creado un nuevo proyecto y explicado a grandes rasgos su contenido. Ahora toca ejercitar parte de lo aprendido, por lo que se pide que realice los siguientes pasos: 5. En el menú Ventana de click sobre la opción cerrar todos los documentos. 6. Después, siempre en el menú Ventana de click en la opción ocultar todo automáticamente. La ventana quedará similar a la figura siguiente:

Para terminar con el ejercicio vamos a restablecer la apariencia igual como estaba justo después de crear el proyecto, siguiendo los próximos pasos.

8

6. En el menú ventana seleccione la opción restablecer diseños de ventana, responda que sí, luego de esto para completar la misión debemos de mostrar la pagina principal y el código del programa. 7. Lo que debe hacer es usar en el menú Ver para ambos casos; pero en primer lugar va usar la opción página principal y en el segundo caso va usar la opción Código de tal forma que obtendrá nuevamente la apariencia original restablecida, como se muestra en la figura siguiente:

Deje el proyecto tal cual se observa en la figura, en este momento, NO LO CIERRE pues continuaremos a partir de aquí en la parte II.

9

Parte II. Ventanas, tipos, operaciones y navegación dentro del IDE Existen 2 tipos de ventana en Visual Studio, a saber, que son: ventana de documento y ventana de herramientas, sin importar el tipo todas las ventanas pueden realizar las siguientes 5 operaciones:

1. Flotar 2. Acoplar 3. Acoplar en pestañas 4. Ocultar 5. Ocultar Automáticamente 6. En el caso especial de las pestañas, estas se pueden hacer grupos verticales u horizontales

OJO para cualquiera de los casos anteriores basta con dar click derecho en la parte superior

de la ventana para que aparezca el menú contextual con dichas opciones. 1. Flotar, o hacer flotante permite principalmente la libertad de mover la ventana al sitio exacto que desee el programador, incluso se puede maximizar una ventana flotante para que ocupe todo el espacio de la pantalla (se pierde de vista la ventana de Visual Studio) como ejercicio convierte en flotante las ventanas codigo (program.cs) y la ventana explorador de soluciones, obtendrá algo similar a la siguiente figura (observe que las ventanas flotantes están fuera de Visual Studio) de click en el botón maximizar de cada una de ellas y vea lo que ocurre, luego restablezca las ventanas.

10

2 Acoplar. Acopla (acomoda) por lo general a los extremos de la ventana principal o donde haya espacio. Como ejercicio debe acoplar el explorador de soluciones (que está flotante); de click derecho sobre explorador de soluciones, y en el menú seleccione Acoplar; obtendrá algo similar a lo siguiente

3. Acoplar en pestañas como organización de fichas. permite organizar al estilo navegador las ventanas, como ejercicio de click derecho sobre la ventana propiedades y seleccione Acoplar en pestañas o como organización de fichas, obtendrá algo similar a lo siguiente:

La ventana propiedades, es ahora una pestaña.

11

4. Ocultar. Permite ocultar (no se muestra) una ventana, siempre accesible mediante menú contextual de la ventana. Ejercicio: de click sobre explorador de soluciones y Oculte la ventana. Desaparecerá del entorno. Luego para volver a mostrarla vaya al menú Ver y seleccione Explorador de soluciones o simplemente en su lugar pruede el método abreviado de teclado Ctrl+W, S

5. Ocultar Automáticamente. Es muy útil, pues permite mostrar una ventana mientras se usa, y una vez salimos de la ventana, esta se oculta automáticamente. Como ejercicio, de click en el margen izquierdo, como se indica en la figura de la izquierda, aparecerá el cuadro de herramientas, que se muestra→ a la derecha, luego de click sobre cualquier otra ventana y verá que se oculta automáticamente el cuadro de herramientas. Esta operación funciona solo con las ventanas acopladas y no funciona con las ventanas acopladas en pestañas. Para hacer que esto suceda a una ventana, solo tiene que dar click derecho y seleccionar Ocultar automáticamente.

NOTA: Si desea tener suficiente espacio para trabajar puede usar en el Menú Ventana, la opción

ocultar todo automáticamente, para que le quede todo el espacio libre. Cuando desee puede

restablecer diseño de ventanas desde el mismo menú Ventana.

12

Lo anterior se ilustra en la figura siguiente, donde el editor de código, está ocupando todo el espacio de la ventana mientras que el resto de ventanas están ocultas en los márgenes derecho e izquierdo de la ventana principal de Visual Studio.

Importante: Además de las operaciones que se han descrito anteriormente, también puede usar el

click y arrastre para agrupar las ventanas, desacoplarse y flotar las ventanas es cosa que

experimente un poco con su Visual Studio.

13

NAVEGACIÓN DENTRO DE VISUAL STUDIO. Para navegar dentro de visual studio debe de usar las teclas Shift + Alt + F7, con lo que se le mostrará, dependiendo de la versión de Visual Studio la lista de ventanas abiertas, pudiendo seleccionar la que Ud. necesita Usar. También puede emplear las flechas de cursor para moverse entre el conjunto de ventanas. Observe que dicho conjunto está organizado en VS2015 en dos columnas una para ventana de herramientas y la otra para documentos.

Con esto finalizamos la sección de ventanas.. Parte III. Mostrar ocultar componentes del IDE Es muy importante que durante sus prácticas tenga tanto el conocimiento como la habilidad para

ubicar, ocultar y mostrar elementos/componentes del IDE; de lo contrario se traducirá en pérdida de

tiempo valioso tanto de práctica como de evaluación (las evaluaciones serán en el horario de

prácticas), por lo que es SU responsabilidad aprender la técnica necesaria para desplazarse por el

IDE, con la mayor confianza, sabiendo en dónde está y como llegar a lo que quiere o como obtener lo

que quiere, en otras palabras, Ud. debe poder, entre otras cosas:

1. Mostrar una ventana/barra de herramientas que esté oculta.

2. Ocultar ventanas/barras de herramientas que estén ocupando espacio innecesariamente o

que le dificulten su trabajo, o para tener más espacio de trabajo por ejemplo durante la edición

de código.

3. Ocultar / cerrar todas las ventanas y documentos; así como mostrar/abrir

ventanas/documentos y además Restablecer diseño de ventanas.

14

Dentro de los elementos que podemos ocultar/mostrar están las ventanas (que como sabemos pueden ser de herramientas o documento) y las barras de herramientas. Tal como ya experimentó en la parte II, paso 4 (ocultar mostrar explorador de soluciones), de forma similar cuenta con el Menú Ver para Mostrar las ventanas y barras de herramientas del IDE. Las ventanas disponibles para mostrar están dentro del Menú ver, como son por ejemplo Código, Explorador de soluciones, etc. Todo lo que debe hacer es ir al menú Ver y seleccionar la ventana que desea mostrar, observe la siguiente figura.

Como ejercicio utilice el menú ver para mostrar la Caja de herramientas (toolbox), el Explorador de

servidores y la ventana lista de errores; luego experimente por su cuenta con otras ventanas. Ahora

pasemos a las barras de herramientas.

15

También cuenta con otras ventanas, las cuales están agrupadas y accesibles desde el menú ver opción otras ventanas, observe la figura siguiente:

Como ejercicio abra la ventana explorador web desde la opción otras ventanas del menú ver. Y a continuación verá la ventana de navegador “interno” de visual studio, siiiii, puede navegar desde visual studio. En la barra de direcciones ingrese: https://msdn.microsoft.com/es­es/library/kx37x362.aspx esto cargará la página msdn oficial de C#, téngala como fuente de consulta. En la parte superior derecha encontrará la caja de búsqueda, donde puede digitar los términos a buscar.

16

Pasemos ahora a tratar las barras de herramientas. Las barras de herramientas se pueden mostrar/ocultar de dos formas:

1. Haciendo click derecho sobre cualquier barra de herramientas, luego le aparece la lista de barras de herramientas. Todo lo que debe de hacer es seleccionar la barra de herramientas que desee mostrar u ocultar, las que tengan un cheque son las que se muestran, el resto están ocultas.

2. Desde el menú Ver, la opción Barras de herramientas le mostrará la lista de barras de herramientas para que Ud. seleccione cual mostrar/ocultar, de la misma forma que el numeral anterior si tiene un cheque es visible, de lo contrario no lo es. Observe la figura siguiente.

IMPORTANTE: Las barras de herramientas además de que pueden mostrarse/ocultarse, también

pueden activarse/desactivarse (esto automáticamente). Las barras de herramientas están ubicadas

dentro de una sola opción, pero siempre dentro de menú ver.

Aunque Ud. muestre una barra de herramientas si el contexto actual no corresponde, la barra de

herramientas se mostrará desactivada automáticamente, esto significa que ninguno de los botones de

la barra de herramientas puede ser usado, por no estar en su contexto, por lo cual verá que la barra y

todos sus botones están en color gris y se encuentran inhabilitados para su uso.

Por ejemplo si la barra de herramientas Editor de Texto es visible, pero el cursor o mouse no se

encuentra dentro de una ventana de documento en modo edición, dicha barra se mostrará

desactivada.

17

Ejercicio muestre la barra de herramientas editor de texto, luego ubíquese en la ventana página principal, como se muestra en la siguiente figura, sucede que pagina principal es una ventana de documento, pero no se puede editar (es de solo lectura) por lo que la barra de herramientas editor de texto se ve en gris y deshabilitada, como señala la figura.

Ejercicio. Ahora vaya a la ventana código (recuerde que tenemos abierto el proyecto). Si no la ve no se preocupe, use el menú Ver, opción Codigo. posicione el mouse dentro de la ventana código y observe lo que sucede, como se muestra en la figura, se han activado los botones de la barra de herramientas editor de texto. Moraleja: las barras de herramientas aunque estén visibles se activan/desactivan automáticamente dependiendo del contexto (en el que esté el cursor o mouse)

18

PARA FINALIZAR REFORZAREMOS SOBRE EL USO DE INICIO RÁPIDO.

INICIO RÁPIDO SE USA PARA Obtener información rápida sobre Visual Studio, como pueden ser secuencias de Menú, para realizar determinadas tareas, incluso INICIO RÁPIDO de VS, puede abrir por Ud. las secuencias de menú que resultan de la búsqueda. Con el consiguiente ahorro en tiempo de acceso y eficiencia en el aprendizaje.

Ejercicio: algo frecuente que tendrá que hacer mientras programa es poder visualizar los números de línea en la ventana código, pues vamos a utilizar inicio rápido para que nos ayude a hacerlo. Digite en la caja de búsqueda el término número, antes que finalice la palabra observará que aparece una lista de sugerencias, ver figura ­­>

Ubique y de click a la que dice Editor de texto ­ todos los lenguajes ­ General (activar o desactivar números de línea), con un solo click Ud. podrá configurar números de línea, en lugar de usar toda la secuencia: Menú Herramientas, luego Opciones luego Editor de texto y luego todos los lenguajes y finalmente General, para que aparezca el mismo cuadro de diálogo que aparece con un solo click, que es el siguiente:

De click en Números de línea, para activar y click en Aceptar para guardar cambios.

Solo queda Cerrar el proyecto, Desde Menú Archivo seleccione Cerrar solución, cuando se le pregunte si desea guardar cambios, Seleccione No. A continuación cierre Visual Studio. Con esto damos por finalizada la segunda sesión Ex­aula, Buena Suerte!!! en la Auto­Evaluación

19