1

INDICE

Contenido TEMA: INTRODUCCIÓN A LA COMPUTACIÓN. ........................................................................................ 4

COMPONENTES BÁSICOS DE LA COMPUTADORA Y SUS FUNCIONES. ................................................... 5

PERIFERICOS DE ENTRADA............................................................................................................... 5

PERIFERICOS DE SALIDA................................................................................................................... 7

EL CPU (Unidad Central de Procesamiento). ........................................................................................ 7

EJERCICIO 1: CAMBIAR LA CONFIGURACION DE LOS BOTONES DEL MOUSE. ...................................... 10

EJERCICIO 2: CAMBIAR EL FONDO DE ESCRITORIO. ............................................................................ 13

TEMA: CREACIÓN DE DIAGRAMAS DE FLUJO CON LA HERRAMIENTA DFD........................................... 18

BARRA DE MENÚ ........................................................................................................................... 22

BARRA DE BOTONES. ..................................................................................................................... 22

¿COMO CREAR DIAGRAMAS DE FLUJO?............................................................................................ 23

OPERADORES EN DFD ....................................................................................................................... 28

A. Operadores aritméticos:............................................................................................................ 28

B. Operadores racionales: ............................................................................................................. 28

1) Hacer un algoritmo que muestre la bienvenida al “blog programando” ......................................... 29

2) Hacer un algoritmo que permita ingresar un número y luego nos avise que el dato se ingreso

correctamente. ................................................................................................................................. 31

3) Hacer un algoritmo que pida 5 números y muestre la suma de todos ellos. ................................... 37

TEMA: LENGUAJE DE PROGRAMACIÓN C++. ........................................................................................ 52

Dev C++............................................................................................................................................. 52

Estructura de un programa en C++ .................................................................................................... 53

Tipos de datos y declaración de variables en C++ .............................................................................. 53

Comentarios en C++ .......................................................................................................................... 54

Instrucciones de Entrada /Salida (E/S) en C++.................................................................................... 54

Estructura básica de un programa en C++. ........................................................................................ 55

EJEMPLO 1: HOLA MUNDO................................................................................................................ 56

EJEMPLO 2: CAPTURAR DATOS DESDE EL TECLADO ........................................................................... 56

2

EJEMPLO 3: EJERCICIO DE APLICACIÓN .............................................................................................. 57

TEMA: INTRODUCCIÓN AL LENGUAJE DE PROGRAMACIÓN VISUAL BASIC 2010. ................................ 60

¿QUÉ PUEDO HACER CON VISUAL STUDIO? ....................................................................................... 60

¿Qué puedo desarrollar con Visual Basic? ......................................................................................... 61

BARRAS DE HERRAMIENTAS DE VISUAL BASIC ............................................................................... 62

Área de trabajo ............................................................................................................................. 65

MI PRIMER FORMULARIO EN VISUAL BASIC....................................................................................... 66

USO DE CONTROLES .......................................................................................................................... 67

CREACION DE UN FORMULARIO PARA ENCUESTA ............................................................................. 70

CAMBIAR EL COLOR DE FONDO AL FORMULARIO .............................................................................. 71

TEMA: INTRODUCCIÓN A HTML. .......................................................................................................... 75

Páginas Web ..................................................................................................................................... 75

Estructura del sitio web. .................................................................................................................... 76

Diferencia entre sitio web y página web. ........................................................................................... 77

HTML5 .............................................................................................................................................. 78

ESTRUCTURA BÁSICA HTML5 ......................................................................................................... 78

Ejemplo 1: Mi primera página en html5............................................................................................. 80

Ejemplo 2: Mi primer sitio Web ......................................................................................................... 83

Ejercicio 1: Vocales tildadas............................................................................................................... 92

Ejercicio 2 ......................................................................................................................................... 93

Estructura básica con HTML5 ............................................................................................................ 95

TEMA: LENGUAJE DE PROGRAMACIÓN JAVASCRIPT. ........................................................................... 98

¿Qué es JavaScript? ........................................................................................................................... 98

Estructura básica JavaScript .............................................................................................................. 99

La etiqueta <script> ....................................................................................................................... 99

Javascript en el <body></body> .................................................................................................... 99

Funciones y eventos de Javascript ............................................................................................... 100

JavaScript en el <head> o <body> ................................................................................................ 100

Funciones Javascript en el <head> ............................................................................................... 100

Funciones Javascript en el <body> ............................................................................................... 101

Comandos básicos Javascript........................................................................................................... 102

3

Escribiendo en un documento html ............................................................................................. 102

Reacción a los eventos ................................................................................................................ 102

Cambiando Contenido HTML ....................................................................................................... 102

Cambiar estilos html ................................................................................................................... 103

Mi primera aplicación con Javascript. .............................................................................................. 103

Mi segunda aplicación con JavaScript. ............................................................................................. 104

Ejemplo 3: Encender una lámpara. .............................................................................................. 107

4

Guía de laboratorio

1 Computadora

TEMA: INTRODUCCIÓN A LA COMPUTACIÓN.

Conocer los componentes principales de la computadora y sus respectivas funciones.

Esta máquina posee componentes los cuales realizan una

determinada función; es por eso que se dividen en grupos,

los cuales son: Dispositivos de entrada, dispositivos de salida

y la unidad encargada de procesar la información.

MODULO IV- COMPUTACIÓN

GUÍA 1

<<Título

de la

guía>>

OBJETIVO

MATERIALES

INTRODUCCIÓN TEÓRICA

¿Qué es la

computadora?

La computadora es una máquina que

acepta entradas de datos, los procesa,

luego almacena los resultados y

suministra una salida.

5

COMPONENTES BÁSICOS DE LA COMPUTADORA Y SUS FUNCIONES.

A continuación se detallaran algunos de sus componentes:

PERIFERICOS DE ENTRADA

Son los que permiten al usuario ingresar datos desde el exterior. Entre ellos podemos mencionar:

Mouse, teclado, escáner, micrófono, cámara, entre otros.

El mouse:

Es un dispositivo que se utiliza para señalar en la pantalla objetos u opciones a elegir, desplazándose

sobre una superficie según el movimiento del usuario.

Se utilizan dos botones del ratón, el principal y el secundario, botón izquierdo y derecho

respectivamente. Con el botón principal se realizan las operaciones más usuales como hacer clic y

arrastrar. Mientras que con el botón secundario normalmente aparece el menú contextual

dependiendo en el programa que se encuentre.

6

La mayoría de los mouse también incluyen una rueda de desplazamiento entre los botones que le ayuda

a desplazarse por los documentos y las páginas web de un modo más fácil. En algunos mouse, la rueda

de desplazamiento puede presionarse y actuar así como un tercer botón. Los mouse avanzados pueden

disponer de botones adicionales que sirven para realizar otras funciones.

Teclado:

Es el periférico de entrada principal, introduce texto escrito en la computadora. Pulsando las teclas se

introducen números, letras u otros caracteres, también se puede realizar ciertas funciones al combinar

varias de ellas.

Entre las partes del teclado podemos distinguir: las teclas especiales (ejemplo Shift, ctrl) y de función, el

teclado numérico, las teclas de navegación, las teclas de movimiento del cursor y las teclas

alfanuméricas.

Escáner:

Se emplea para digitalizar una imagen, convirtiéndolos en archivos

manejables en la computadora.

7

PERIFERICOS DE SALIDA.

Son aquellos que muestran al usuario el resultado de las operaciones realizadas por el PC. En este

grupo podemos mencionar: monitor, impresora, altavoces, entre otros.

Monitor:

Es el dispositivo en el que se muestran las imágenes generadas

por el adaptador de vídeo del ordenador o computadora. El

término monitor se refiere normalmente a la pantalla de vídeo y

su carcasa.

Impresora:

Periférico que traslada el texto o la imagen generada por

computadora a papel u otro medio, como transparencias o

diversos tipos de fibras

Ahora conoceremos la unidad encargada de procesar información.

EL CPU (Unidad Central de Procesamiento).

8

Es el componente en una computadora digital

que interpreta las instrucciones y procesa los

datos contenidos en los programas de la

computadora.

Algunos componentes del CPU son:

UAL o ALU

•La Unidad Aritmético Lógica:Es un circuito digital que calcula operaciones aritméticas (como adición, substracción, etc.) y operaciones lógicas (como

OR, NOT, XOR, etc.), entre dos números.

Unidades de Almacenamiento

•Estas unidades se encargan de guardar los datos que se producen durante el funcionamiento del procesador para un posterior uso, o simplemente para guardar determinados datos como, fotografías, documentos, etc.

9

Dichas unidades de almacenamiento se clasifican en:

Incluye la memoria de acceso aleatorio

(RAM), la cual se compone de uno o más

chips y se utiliza como memoria de trabajo

para programas y datos.

Es un tipo de memoria temporal que pierde

sus datos cuando se queda sin energía.

La memoria de solo lectura (ROM), la cual

está destinada a ser leída y no destructible, es

decir, que no se puede escribir sobre ella y

que conserva intacta la información

almacenada.

1. Unidades de almacenamiento

primario

2. Unidades de almacenamiento

secundario.

Entre ellos se encuentran:

Disco duro: el cual es el dispositivo

encargado de almacenar información de

forma permanente en una computadora.

Los discos compactos o CD: que son un

soporte digital óptico utilizado para

almacenar cualquier tipo de información

Los DVD o disco de video digital: los cuales

son un formato de almacenamiento óptico

que puede ser usado para guardar datos,

incluyendo películas con alta calidad de

vídeo y audio.

Los dispositivos de almacenamiento

extraíbles.

10

EJERCICIO 1: CAMBIAR LA CONFIGURACION DE LOS BOTONES DEL MOUSE. 1. Encienda su computadora.

2. Clic izquierdo en el botón inicio.

3. Seleccionar Panel de control y dar doble clic

Ilustración 1 Menú botón de inicio

EJEMPLOS GUÍADOS

11

4. Elegir la opción Hardware:

Ilustración 2: Panel de Control

5. Clic en el icono mouse

Ilustración 3: Hardware y Sonido

6. Seleccionar la opción Botón y activar la casilla “Zurdo”.

12

Ilustración 4: Propiedades Mouse

Después de realizar los pasos anteriores observara que la función de los botones del

mouse es contraria a la que tenía inicialmente, es decir ahora el botón derecho es el

botón primario.

13

EJERCICIO 2: CAMBIAR EL FONDO DE ESCRITORIO.

1. Clic derecho en el escritorio. Observara que se muestra un menú como el siguiente:

Ilustración 5: Escritorio

2. Seleccionar la opción personalizar y dar clic izquierdo. Se mostrara una pantalla

como la siguiente:

Ilustración 6: Personalización

3. Como en este caso se desea cambiar el fondo de escritorio seleccionamos la opción

fondo de escritorio. Aparecerá una pantalla como la siguiente:

14

Ilustración 7: Fondo de escritorio

En la cual se elige el fondo que se desea utilizar, si se desea poner una imagen determinada que

se encuentra en un archivo en específico se selecciona la opción examinar:

Ilustración 8: Fondo de escritorio, Examinar

La cual nos desplegara una pantalla donde buscaremos la carpeta o donde se encuentre la

imagen deseada.

15

Ilustración 9: Menú para buscar la carpeta "imágenes"

En este caso, la imagen que se desea utilizar se encuentra en la carpeta Imágenes, por lo que

seleccionamos dicha carpeta y damos clic en aceptar.

Observara que se muestran las imágenes que contiene la carpeta“imágenes”:

4. Seleccionamos una imagen y damos clic en guardar cambios.

Ilustración 10: Carpeta imágenes

16

Ilustración 11: Selección de la imagen deseada

Al regresar al escritorio observará que se encuentra como fondo la imagen que

usted selecciono.

Ilustración 12: Fondo de escritorio elegido

EJERCICIOS

17

Cambiar la configuración de los botones del mouse a la inicial basándose en los pasos

anteriores.

Cambiar el fondo de pantalla de su escritorio, con la imagen que usted desee.

1. Menciones algunos dispositivos de salida de una computadora.

_________________________________________________________________________________________________________

_________________________________________________________________________________________________________

____________________________________________________________________________________

2. Mencione al menos 4 componentes del CPU.

_________________________________________________________________________________________________________

_________________________________________________________________________________________________________

____________________________________________________________________________________

Resuelve la siguiente sopa de letras, entra al link:

http://juegosintarectivos.blogspot.com/2010/04/sopa-de-letras-partes-del-

computador.html

El computador y sus componentes. Recuperado el 10 de Enero del 2013 de

http://www.slideshare.net/ShirleyYanitMartinezMora/el-computador-y-sus-componentes

ACTIVIDADES COMPLEMENTARIAS

BIBLIOGRAFIA

18

TEMA: Creación de diagramas de flujo con la herramienta DFD.

¿Qué es Dfd?

Antes de conocer y utilizar el software DFD es necesario comprender en qué consiste un algoritmo,

esto debido a que DFD es un software que permite analizar y construir algoritmos.

Cualquier problema de computación puede resolverse ejecutando una serie de acciones en un

orden específico. Un procedimiento para resolver un problema en términos de las acciones a

ejecutar y el orden en el que se ejecutan las acciones, se conoce como algoritmo.

Entendiéndolo de una forma sencilla se pude aplicar al siguiente ejemplo:

MODULO IV- COMPUTACIÓN

GUÍA 2

<<Título

de la

guía>>

OBJETIVO

MATERIALES

INTRODUCCIÓN TEÓRICA

Comprender los elementos básicos de los diagramas de flujos.

Conocer y utilizar el software DFD para resolver algoritmos de programación.

1 Computadora.

Software DFD.

Guía de laboratorio

Es una secuencia de pasos lógicos y ordenados con

los cuales le damos solución a un problema

determinado.

ALGORITMO

19

Generalmente, ¿Qué haces al levantarte y alistarte para ir a estudiar? considerando el

procedimiento como un algoritmo tendrías que:

1. Levantarte.

2. Quitarte tu pijama.

3. Bañarte.

4. Vestirte.

5. Desayunar.

6. Alistar tu bolsón y verificar que no se te olvide nada de lo que necesitaras.

7. Transportarte a tu centro de estudio.

Esta rutina logra que llegues a tiempo a tu colegio o escuela, y estés lista para desarrollar todas las

actividades que necesites. Pero, supongamos que estas en semana de evaluaciones finales y te has

esforzado y desvelado toda la semana, ya es viernes tu último día y solo te falta la exposición del

proyecto final que trabajaste todo el año, al sonar la alarma haces lo siguiente:

1. Levantarte, pero unos 15 minutos después sonar la alarma.

2. Quitarte tu pijama.

3. Vestirte.

4. Bañarte.

5. Transportarte a tu centro de estudio.

¿Qué paso? Primero te vestiste antes de bañarte, algo ilógico, segundo no desayunaste y olvidaste

tu bolsón y tus cosas para la exposición, mal día. Esto nos dice que en un algoritmo se toma en

cuenta el orden de las acciones, así mismo que cada paso del proceso es importante y no debe ser

obviada para lograr obtener el resultado deseado.

Otros términos que es necesario conocer son los siguientes:

Tipos de Datos Real: Valores numéricos que van desde – hasta

20

Cadena de Caracteres: Secuencia de caracteres encerrada entre comillas simples. Ejemplo:

‘Diagramar es fácil’ , ‘París’ , ‘1955’ Lógico: La letra V ó F.

Constante: Una constante es un dato cuyo valor no puede cambiar durante la ejecución del

programa. Recibe un valor en el momento de la compilación (momento en el cual revisamos que el

algoritmo no tiene errores de sintaxis y se puede ejecutar) y este valor que se le dio permanece

inalterado durante todo el programa.

Ejemplo:área = 25base = 18

Esas son constantes por ejemplo, porque le asignamos nosotros un valor y ese valor no va a

cambiar en lo que dure la ejecución el programa.

Diagrama de flujo de datos: Es una representación gráfica para el conjunto de "flujo" de datos a

través de un sistema de información.

Ejemplo:

Proceso: Es la primera parte de un diagrama de flujo de datos, esta presenta una parte del sistema

que transforman Entrada – Proceso – Salida

Flujo: Se utiliza para describir el movimiento de la información de una parte del sistema a otra,

además se muestra la dirección del movimiento. Indicando si esta se estará moviendo hacia adentro

o hacia afuera del proceso.

Programación estructurada: es una técnica para escribir programas de computadoras. Según ella

se deben utilizar únicamente tres estructuras: secuencia, selección e iteración.

21

SOFTWARE

DFD:

Después de haber ingresado el algoritmo representado por el diagrama, podrá ejecutarlo, analizarlo y

depurarlo en un entorno interactivo diseñado para éste fin. La ventana principal de trabajo del Smart

DFD 1.0 está compuesta de la siguiente manera:

Ilustración 13: Ventana principal DFD

Diseñado para construir y analizar algoritmos. Se pueden crear diagramas de

flujo de datos para la representación de algoritmos de programación

estructurada a partir de las herramientas de edición que para éste propósito

suministra el programa.

La interfaz gráfica de Dfd, facilita en gran medida el trabajo con diagramas ya

que simula la representación estándar de diagramas de flujo en hojas de

papel.

22

BARRA DE MENÚ

Ilustración 14: Barra de menú de DFD

Aquí encontramos las siguientes opciones:

A. Archivo: Este menú se encarga del manejo del archivo que estemos trabajando.

B. Edición: Este menú es el encargado de manejar los comandos de Edición del diagrama.

C. Objeto: En este menú se establecen todos los comandos para la inserción de bloques en el

diagrama.

D. Ver: Este menú habilita los siguientes comandos.

E. Ejecución: Este menú activa la ejecución del diagrama.

F. Depuración: Controla las actividades de depuración del diagrama

G. Opciones: Controla las opciones de trabajar los ángulos en grados o en radianes.

H. Ayuda: Invoca el manual de ayuda del SmartDfd.

BARRA DE BOTONES.

Ilustración 15: Comandos y funciones.

23

Ilustración 16: Comandos y funciones

Para crear un diagrama de flujo en Dfd deben escogerse los tipos de bloques a utilizar pulsando

sobre el botón de los siguientes:

Ilustración 17: Tipos de bloques

¿COMO CREAR DIAGRAMAS DE FLUJO?

24

Equivalencia de la simbología estándar con la simbología DFD

Ilustración 18: Cuadro comparativo de los diagramas en DFD y los diagramas estándar.

Después de seleccionado el botón se desplaza el elemento hasta el lugar en el diagrama en el que se

desea insertar, para editar el objeto se debe pulsar doble clic con el botón del mouse.

25

A. Edición de un bloque de lectura: Al dar doble clic sobre este bloque aparece la siguiente ventana:

Ilustración 19: Ventana de edición para el bloque de lectura

Dentro de la casilla leer, se deben especificar las variables que van a ser leídas separadas por coma

(,) y pulsar el botón “Aceptar”.

B. Edición de un bloque de asignación: Al dar doble clic sobre este bloque aparece la siguiente

ventana:

Ilustración 20: Edición de un bloque de asignación.

En la casilla de la izquierda se coloca la variable que va a recibir la asignación y en la casilla de la

derecha, el valor, la variable o la operación que se va a asignar, y después se pulsa el botón

“Aceptar”. En este ejemplo se tiene una asignación A = 34 + B.

C. Edición de un bloque de salida: Al dar doble clic sobre este bloque aparece la siguiente

ventana:

26

Ilustración 21: Edición de un bloque de salida.

Dentro de la casilla mostrar, se deben especificar las variables que van a ser mostradas en pantalla

separadas por coma (,) y pulsar el botón “Aceptar”. Si desea mostrar mensajes de texto éstos deben

ser encerrados por comillas sencillas (‘).

D. Edición de una decisión: Al dar doble clic sobre este bloque aparece la siguiente ventana:

Ilustración 22: Edición de un bloque de decisión.

Dentro de la casilla Condición, se debe escribir la condición que se desea evaluar, indicar si la

condición verdadera va a ser la derecha o la izquierda y pulsar el botón “Aceptar”.

E. Edición de un ciclo mientras: Al dar doble clic sobre este bloque aparece la siguiente ventana:

27

Ilustración 23: Edición de un ciclo mientras

Dentro de la casilla Condición, se debe escribir la condición que se desea evaluar para realizar la

repetición y pulsar el botón “Aceptar”.

F. Edición de un ciclo para ( ): Al dar doble clic sobre este bloque aparece la siguiente ventana:

Ilustración 24: Edición de un ciclo para()

En la primera casilla (Cont) se debe indica la variable que asume como contador del ciclo, en la

segunda casilla (Vi) se escribe el valor inicial del contador; en la tercera casilla (Vf) se indica el

valor final del contador y en la última casilla (Increm ) se escribe constante del incremento del

contador; al finalizar se pulsa el botón “Aceptar”.

28

OPERADORES EN DFD

A. Operadores aritméticos:

B. Operadores racionales:

29

1) Hacer un algoritmo que muestre la bienvenida al “blog programando” Primero abrimos el programa DFD

Ilustración 25: Ventana principal de DFD

Luego damos clic al botón “salida“, en la barra de objetos que tenemos a disposición, como

vemos en la figura anterior (la que está resaltada con color verde).

Una vez hecho esto, ya está asignado el objeto “salida“, ahora solo queda colocarlo en el

lugar donde queremos que cumpla su función.

EJEMPLOS GUÍADOS

30

Luego colocamos el objeto “salida” en el desarrollo es decir entre el inicio y el fin del

diagrama de flujo, lo colocamos ahí con dar un clic. Para colocar el mensaje que queremos

mostrar, le damos doble clic al símbolo, así se abrirá una ventana con el formato que tiene

el símbolo (en éste caso, solo de escribir texto porque es para mostrar), al darle doble clic

se abrirá una ventana, en la cual se debe escribir el mensaje, así:

Ilustración 26: Resultado del bloque salida

Este objeto de salida puede mostrar datos para ello el texto a mostrar debe de llevar un formato

determinado el cual es que el texto que quiere mostrarse en pantalla debe ser escrito entre comillas

simples, ejemplo: ‘Eddy ‘

Una vez que hayamos colocado el mensaje, damos clic en aceptar para que se guarde y

luego hay que ejecutarlo. Para ejecutarlo solo debemos darle clic al botón de “PLAY” que se

encuentra en la barra de herramientas de DFD.

31

Al dar clic en el icono de Play,se observará la siguiente pantalla:

2) Hacer un algoritmo que permita ingresar un número y luego nos avise que

el dato se ingreso correctamente. 1. Abrir el programa DFD

- Luego mostramos al usuario de que trata el programa, para ello usaremos el botón de “salida“,

porque queremos mostrar un mensaje. Bien, mostraremos el mensaje siguiente: “Bienvenido,

ingrese un número por favor:”, cuando se ejecute el programa, lo primero que hará es mostrar

ese mensaje, así el usuario sabrá de que trata el programa. Entonces quedaría así:

32

Damos clic en “aceptar” para continuar, quedaría así:

- Continuamos ahora con el símbolo “asignación“, porque queremos asignar una variable, es decir

queremos decirle al programa que más adelante (cuando lo requiera el ejercicio), el usuario va a

ingresar un valor y pues ese valor lo almacenará en esa variable.

Quedando así:

- Una vez colocado el símbolo en el cuerpo del algoritmo procedemos a insertar la variable y a

asignarle un valor inicial. Dándole doble clic al símbolo de “asignación” le podremos asignar como

su nombre lo indica un máximo de tres variables por símbolo, así:

33

- Entonces ya le asignamos nuestra variable “numero“, en la cual se va a almacenar el dato que

ingrese el usuario que ejecute el programa.

NOTA: Cuando usemos el símbolo “asignación“, siempre a la variable que vayamos a declarar /

asignar, se le debe poner un “valor inicial“. En éste caso es cero, (en la mayoría de los casos es cero

(0), porque queremos que no valga nada esa variable, es decir que no tenga valor, y que el valor se

lo ponga el usuario que ejecute el programa).

Al darle clic en aceptar, quedaría así:

- Ahora damos clic en el botón “lectura“, porque queremos ingresar / pedir un dato al usuario.

Entonces nuestro diagrama se verá así:

34

- Bien, pues ahora le damos doble clic en el botón “lectura“, para abrirlo y así poder insertar las

variables que queremos pedir, en éste caso solo una: nuestra variable “número“, la cual la

declaramos arriba, así:

NOTA: cuando usemos el símbolo “lectura“, ahí debemos colocar la variable que se le va a pedir al

usuario (en éste caso la variable numero), debe estar escrita igual a como se la declaró.

- Ahora agregamos otro mensaje que diga “el dato se ingresó correctamente”, tal y como nos decía

el enunciado del ejercicio. Entonces ya sabemos que para mostrar debemos colocar el símbolo de

“salida” y que los mensajes van entre comillas simples:

35

-Ahora ejecutamos nuestro programa:

- Primero nos mostrara el mensaje de bienvenida

- Seguimos, y podemos observar que nos pide el dato (ahora es cuando debemos ingresar el valor

que va a tomar la variable “numero”).

36

- Continuamos y podemos ver que, como lo hicimos, el programa nos muestra que: “se ingresó el

dato correctamente”.

Y así concluye nuestro programa.

37

3) Hacer un algoritmo que pida 5 números y muestre la suma de todos ellos. - Abrimos DFD

- Mostramos el detalle del ejercicio

- Luego declaramos las variables (en éste caso los 5 números y un sexto número que va a ser el

resultado de sumar los cinco números ingresados)

38

- Ahora vamos a pedir los números uno por uno, con su respectivo mensaje y caja de texto para que

ingrese el dato el usuario.

39

40

41

42

43

- Bien, ahora que ya hemos pedido los cinco números, vamos a calcular la suma de los números

ingresados, para ello vamos a usar el símbolo “asignación”.

Pero, ¿Por qué usamos “asignación”?

Pues lo usamos porque a “n6“, le asignaremos el valor de la suma de los cinco números ingresados,

por ejemplo: si los números ingresados fueron: 1, 2, 3, 4, 5 entonces la suma seria 1+2+3+4+5 por

lo tanto la suma da: 15, entonces n6 = 15 (en el caso de que esos hayan sido los números

ingresados pero no sabemos que números va a ingresar el usuario), entonces quedamos así:

- Ya tenemos las variables ingresadas, la suma calculada, solo falta mostrar la suma por pantalla

como dice el ejercicio, y ésta vez el ejercicio no pide con ningún formato, así que podemos mostrar

el número directamente, así:

44

- Por ultimo para una mejor presentación del resultado se realizara de la siguiente manera:

- Lo que está en marcador rojo es lo que se utiliza como un separador de variables y constantes esto

se utiliza para separar las variables, también cabe recordar que las constantes van entre comillas

simples y las variables sin comillas simples.

45

4) Hacer un algoritmo que pida tres números, luego calcule cual es mayor entre el primero número y el segundo número. Si el primer número es mayor que el segundo se le restará el tercer número, si el segundo número es mayor que el primero, se le sumará el tercer número. Mostrar el número final, avisando al usuario si se le restó o se le sumó el tercer número. Bien, ¿qué nos pide? Nos pide tres números: Ver si el primero es mayor al segundo. Si es así se le restará el tercer número. Ver si el segundo es mayor al primero. Si es así se le sumará el tercer número.

Comencemos, abrimos DFD. Colocamos de que trata el algoritmo.

Ahora declaramos las variables que usaremos, en éste caso vamos a usar 3 variables pues son los números que debemos pedirle al usuario/a.

46

Luego vamos a pedir cada número con su mensaje de ingreso respectivo

47

Ahora viene la parte de hacer las operaciones, pero en este caso antes de realizar las operaciones tenemos que usar la decisión, ya que de eso depende el resultado.

48

Entonces usamos el símbolo de decisión y hacemos lo siguiente:

EXPLICACIÓN: Al colocar el símbolo de decisión y darle doble clic, se nos abre esa ventana que vemos en la imagen de arriba. Pues bien tiene un formato, que es el siguiente: * Condición: aquí pondremos la condición como su nombre lo indica, condición que queremos validar para ver si es verdadera o falsa y así seguir con el programa. En éste caso por ejemplo se ha dicho que si n1 es mayor que n2 entonces haremos algo. * Condición verdadera – derecha / izquierda: aquí colocamos para donde queremos que sea la condición verdadera, viene marcado por defecto a la derecha. Es decir que el SI va a estar a la derecha, si le damos clic en el botón “izquierda” pues el SIestará a la izquierda, el orden en el que se coloque el SIo el NO, no tiene relevancia en el resultado. Ahora que hemos validado si n1 es mayor a n2, queda hacer lo que nos dijo el enunciado del ejercicio si eso era correcto. Es decir si es correcto que n1 es mayor a n2, se le restara el valor que esté almacenado en n3. Así:

49

EXPLICACION: Hemos usado el símbolo de “asignación” porque le vamos a asignar a n1 un nuevo valor, porque se cumplió la validación, y como cumplió con ella dice que:”si n1 es mayor a n2 entonces se le restará n3 “. Eso es lo que hemos planteado ahí. Vemos que estamos siguiendo el camino de “verdadero” (A la derecha),estamos suponiendo que el usuario ya ingresó los dos números y que el primero que ingreso es mayor al segundo y por lo tanto le restamos el tercer número. Ahora, como estamos en el “camino de la verdad” (a la derecha – verdadero), ya le asignamos a n1 su nuevo valor (por haber sido mayor que n2, se le restó n3). Nos queda solo mostrar el resultado, así:

Así como “supusimos” el camino de la verdad, es decir que el primer número era mayor al segundo número. Ahora vamos a suponer que no es así, tomaremos el camino contrario que viene a ser el camino falso. Siendo NO, el camino falso y está dirigido a la izquierda, la operación es la misma. Solo con un cambio que ahora se va a sumar el númeroporque la condición no se cumple, la condición era de qué n1 sea mayor a n2. Y como vamos a suponer que no pasó eso, pues se le restará a n1 el valor que tenga n3. Así:

50

EXPLICACION: Como el símbolo de condición tiene dos lados: * Lado de la verdad, el derecho (por defecto). * Lado de la falsedad, el izquierdo (por defecto). Hace un momento hicimos la “programación” en el lado de suposición correcto, es decir que asumimos, que el usuario ingresó los tres números y que el primero era mayor que el segundo. Por eso hicimos lo que decía el enunciado, ósea que le restemos el valor del tercer número. Ahora que estamos en el lado de la falsedad, debemos “programar” lo que sucedería ahí, es decir que le sumaremos el valor de n3, ya que ahí se supone que no cumplió la condición. Si a la derecha significaba que n1 era mayor que n2, pues a la izquierda es lo contrario n2 es mayor a n1. Por lo tanto le sumamos el valor de n3. Solo queda mostrar el mensaje contrario al que mostramos en el camino de la verdad, es decir lo contrario. Ya que ahí le restamos el valor de n3, ahora diremos que se le sumó el valor de n3 porque n1 no fue mayor a n2, si no que n2 fue mayor a n1. Así:

51

1) Hacer un algoritmo que calcule el área de un círculo, pidiendo al usuario los datos que son

necesarios para calcularlo.

2) Hacer un algoritmo que analice si en dos números ingresados: cual es mayor, cual es menor,

o si son iguales.

1) Hacer un algoritmo que calcule si una cantidad ingresada es par o impar.

Cairo Battistutti, Osvaldo. Metodología de la programación, algoritmos y diagramas de

flujos.Marcombo, 2005.Tercera Edición.

ACTIVIDADES COMPLEMENTARIAS

EJERCICIOS

BIBLIOGRAFIA

52

Conocer el lenguaje de programación C++.

Conocer el entorno del compilador DevC++.

Utilizar el lenguaje C++ para la resolución de problemas cotidianos, propuestos en los

ejercicios y actividades utilizando el compilador DevC++.

TEMA: Lenguaje de programación C++.

Software Dev C++

Guía de laboratorio

1 Computadora.

Toda la teoría de algoritmos y diagramas de flujo se puede aplicar a la resolución

de problemas, utilizando casi cualquier lenguaje de programación. En nuestro

caso, utilizaremos el lenguaje C++.

Dev C++ Bloodshed Dev-C++ es un entorno de desarrollo integrado (IDE por sus siglas en inglés) para

programar en el lenguaje C/C++. Es decir, es un programa para hacer programas.

MODULO IV- COMPUTACIÓN

OBJETIVO

MATERIALES

INTRODUCCIÓN TEÓRICA

GUÍA 3

53

Estructura de un programa en C++ Todos los lenguajes de programación poseen una sintaxis que debe respetarse para que no se

produzcan errores en la ejecución. Así pues la estructura básica de un programa en C++ es la

siguiente:

a) Encabezado del programa (archivos de cabecera): //definir una cabecera

#include <nombre_de_cabecera.h>

b) Cuerpo del programa (función main):

int main()

{

Declaración de variables;

Sentencias;

return(0);

}

Tipos de datos y declaración de variables en C++ Un tipo de datos es un conjunto de valores de datos, junto con un conjunto de operaciones en

esos valores. C++ posee una gran variedad de datos, sin embargo nosotros utilizaremos los

siguientes:

Tipo de dato Características

int Lo utilizaremos para trabajar con números enteros float Lo usaremos para trabajar con números reales que tienen puntos decimales char Lo utilizaremos para trabajar con datos de caracteres (letra u otro símbolo) string Lo usaremos para trabajar con cadenas de caracteres (palabras o frases)

Para declarar una variable, la forma más básica es mediante el uso de la siguiente sintaxis:

54

Tipo de dato Nombre de la variable ;

Ejemplo:

int numero1;

float precio;

char opción;

C++ es un lenguajeen el cual las letras mayúsculas y minúsculas se tratan como caracteres diferentes. Si

usted declara una variable llamada variable1 y luego la intenta utilizarla como Variable1, VARIABLE1 o

algún otro arreglo, se producirá un error

Comentarios en C++ Los comentarios son líneas que utiliza el programador para explicar que hacen los programas o para documentación interna del programa, normalmente un programa tiene comentarios solo en las instrucciones que podrían dar lugar a dudas ya que un programa con demasiados comentarios innecesarios dificultan la lectura del programa, los comentarios son ignorados por el compilador. Todos los comentarios en C++ comienzan con // para los de una línea y /* */ para comentarios multilínea.

Instrucciones de Entrada /Salida (E/S) en C++ C++ tiene dos instrucciones principales para presentar y capturar datos las cuales son:

cout ocupa el operador de inserción <<

cin ocupa el operador de extracción >> La instrucción cout permite imprimir datos a la pantalla de la computadora, la sintaxis es la

siguiente:

Colocamos comillas dobles para imprimir texto en pantalla, como se presenta a continuación:

cout << “mensaje a desplegar”;

Para imprimir el valor de una variable declarada (en el ejemplo X es un variable)dentro del programa se utiliza la siguiente estructura: cout<<X;

El siguiente ejemplo imprime un mensaje en pantalla y el valor de la variable X: cout<< “El valor de X es: “ << X;

Nota: Se debe colocar siempre punto y como (;) al final de una sentencia cout.

La instrucción cin permite leer información desde el teclado, la sintaxis es la siguiente:

int var;//declaración de una variable entera, en este caso var

cin >> var;// Se espera desde teclado el valor de var

55

cout<<”El valor de var es:”<<var;// imprimimos el valor en pantalla.

Estructura básica de un programa en C++. Declaración de librerías Declaración de frase reservada de c++ Declaración del int main(){ Declaración de variables Uso de sentencias cout o cin Pausa del programa Fin del programa Cierre de main }

#include<iostream>

#include<conio.h>

using namespace std;

int main(){

int numero;

cout<<”Campamento Science Girl”;

cin>>numero;

getch();

return 0;

}

56

Abra el DevC++ y digite lo siguiente en el área de edición de código:

EJEMPLO 1: HOLA MUNDO

//declaración de librerias

#include<iostream>

#include<conio.h>

// frase reservada de c++

using namespace std;

// inicio de main

int main()

{

// inicio del programa

//imprimiendo una frase en pantalla usando cout.

cout<<"hola mundo\n";

//colocando una pausa en el programa

getch();

// fin del program

return 0;

}// cierre de main.

EJEMPLO 2: CAPTURAR DATOS DESDE EL TECLADO

#include <iostream>

#include <conio.h>

using namespace std;

int main()

{

char letra;

string nombre, apellidos, nombre_completo;

cout<<"Bienvenida a la programacion en C++"<<endl<<endl;

cout<<"Digita tu primer nombre: ";

cin>>nombre;

cout<<"\tSe ha ingresado: "<<nombre<<endl<<endl;

cout<<"Digita tus apellidos: ";

fflush(stdin);

getline(cin,apellidos);

cout<<"\tSe ha ingresado: "<<apellidos<<endl<<endl;

cout<<"Digita tu letra favorita: ";

cin>>letra;

cout<<"\tSe ha ingresado: "<<letra<<endl<<endl;

nombre_completo = nombre + " " + apellidos;

EJEMPLOS GUÍADOS

57

cout<<"Felicidades "<<nombre_completo<<". Pronto seras una

excelente programadora"<<endl;

getch();

return 0;

}

En este ejemplo, además de la entrada y salida de datos mediante las palabras reservadas cin y cout, se

muestra una operación sobre variables de tipo string denominada concatenación, la cual consiste es

unir las dos cadenas de texto.

EJEMPLO 3: EJERCICIO DE APLICACIÓN La dueña de una boutique compra productos para luego venderlos y obtener una ganancia del 30% por

cada unidad. Realizaremos un programa que le ayude a la dueña de la boutique a calcular el precio de

venta unitario de los productos.

#include <iostream>

#include <conio.h>

using namespace std;

int main(){

float precio_compra, precio_venta;

cout<<"Ingrese el precio unitario del producto: $";

cin>>precio_compra;

precio_venta = precio_compra * 1.3;

cout<<"\tEl precio de venta unitario es: $"<<precio_venta<<endl;

getch();

return 0;

}

58

EJERCICIO 1.

Realice un programa que muestre el poema “El Nido” de Alfredo Espino. El resultado debe ser parecido

a este:

EJERCICIO 2

Elabore el siguiente programa tal como se presenta, y ejecútelo, luego busque los errores que tiene para

que se compile correctamente.

//Programa para identificar algunos errores de sintaxis, en tiempo de compilación

#include <iostream>

#include <conio.h>

int main(){

int A, B, C;

cout << "Digite el valor de A: ";

cin >>a

cout << "Digite el valor de B: ";

cin >>b;

C = A+B;

cout << "La suma de A y B es:" << C;

getch();

return 0;

}

EJERCICIOS

59

EJERCICIO 1

Hacer un programa que ayude a determinar a qué altura en metros,

vuela un avión, conociendo la altura en pies y el factor de conversión:

1 pie es igual a 0.3048 metro.

Te puedes guiar del siguiente diagrama de flujo:

Harvey M. Deitel y Paul J. Deitel. Como programar en C++.México(2009):Pearson Educación.

Sexta Edición.

ACTIVIDADES COMPLEMENTARIAS

BIBLIOGRAFIA

Lee el valor de la

constante PIE

Lee el número de

pies al que vuela el

avión

Convierte el pie asu

equivalente en metros

numpie* PIE

Imprime el valor en

metros.

60

TEMA: INTRODUCCIÓN AL LENGUAJE DE PROGRAMACIÓN VISUAL BASIC

2010.

Conocer el entorno grafico del lenguaje de programación Visual Basic 2010.

Utilizar cada uno de los comandos del software para desarrollar formularios.

Guía de laboratorio.

Software Visual Basic 2010.

1 Computadora

Microsoft Visual Studio es un entorno de desarrollo integrado (IDE, por sus

siglas en inglés) para sistemas operativos Windows. Soporta varios lenguajes

de programación tales como Visual C++, Visual C#, Visual J#, y Visual

Basic.NET, al igual que entornos de desarrollo web como ASP.NET.

¿QUÉ PUEDO HACER CON VISUAL STUDIO? Visual Studio permite a los desarrolladores crear aplicaciones, sitios y aplicaciones web, así

como servicios web en cualquier entorno que soporte la plataforma .NET. Así se pueden

crear aplicaciones que se intercomuniquen entre estaciones de trabajo, páginas web y

dispositivos móviles.

MODULO IV- COMPUTACIÓN

GUÍA 4

<<Título

de la

guía>>

OBJETIVO

MATERIALES

INTRODUCCIÓN TEÓRICA

61

Ejemplos de formularios creados en Visual Basic:

•Es posible generar, de manera automática, conectividad entre controles y datos mediante la acción de arrastrar y colocar sobre formularios o informes.

Diseñador de entorno de datos

•Sirve para generar de manera automática formularios que administran registros de tablas o consultas pertenecientes a una base de datos, hoja de cálculo u objeto .

Asistente para formularios

•es factible incluir barra de herramientas personalizada, donde el usuario selecciona los botones que desea visualizar durante la ejecución.

Asistente para barras de herramientas

Se combinan instrucciones de Visual Basic con código HTML para controlar los eventos que se realizan con

frecuencia en una página web.

En las aplicaciones HTML

¿Qué puedo desarrollar con Visual Basic?

62

BARRAS DE HERRAMIENTAS DE VISUAL BASIC

Visual Basic posee sus propias barras de herramientas. A continuación se describen algunas.

Barra de Menú

Esta barra organiza todas las opciones que se pueden realizar en Visual Basic.

Ilustración 27 Barra de Menú

Barra Estándar.

Esta barra muestra las opciones más comunes que se utilizan en visual Basic, por ejemplo guardar un

proyecto, abrir un proyecto, deshacer, entre otras.

Ilustración 28 Barra Estándar

63

Cuadro de herramientas (controles).

Esta barra muestra los objetos o controles más comunes para crear el interfaz de usuario.

Explorador de Soluciones

Esta ventana muestra el proyecto que se encuentra abierto y nos da una lista de todos los formularios

que se encuentran agregados a dicho proyecto.

Dado que es muy común en aplicaciones Visual Basic compartir código o formularios

personalizados, Visual Basic organiza las aplicaciones en lo que denomina proyectos. Cada

proyecto puede tener varios formularios y, el código que activa los controles de un formulario es

archivado con el formulario en archivos separados.

Ilustración 29 Cuadro de herramientas

64

Ilustración 30 Explorador de proyectos

Ventana de propiedades

Esta muestra una lista de todas las propiedades o características de cada objeto seleccionado (clic en

cada objeto).

Ilustración 31 Tabla de propiedades

Formulario

Un formulario es una ventana de Windows la cual usaremos para interactuar con el usuario, ya

que en dicha ventana o formulario, estarán los controles y demás objetos gráficos que

mostraremos al usuario de nuestra aplicación. Los formularios también son llamados "formas" o

Forms en su nombre en inglés.

Nombre del objeto seleccionado y que

tipo de objeto es, respectivamente

Lista de propiedades que posee el

objeto seleccionado. Lo sombreado de

azul indica que esa propiedad se desea

modificar. (Clic en la propiedad a

modificar).

Breve descripción de la propiedad

seleccionada. (En este caso es Text)

Nombre del proyecto

Formulario(s) en el

proyecto Muestra el código

del proyecto

65

Un evento es cualquier acción que se realiza sobre un objeto, como por ejemplo hacer clic o

presionar una tecla; y codificar se refiere a establecer, a través de código de programación,

distintas tareas que se van a realizar en un evento en específico.

Cuando iniciamos un proyecto en Visual Basic .NET, el Diseñador de Windows Forms, se abre en la vista

Diseño, mostrando el formulario Form1 del proyecto.

Ilustración 32 Formulario

Área de trabajo

Cuadro de

Herramientas

Formulario

Ventana de

propiedades

Ilustración 33 Área de trabajo

66

MI PRIMER FORMULARIO EN VISUAL BASIC.

1. Ejecuta Visual Basic.

2. Clic en la viñeta de nuevo proyecto.

3. En este caso se hará un formulario es por eso que se escoge la función Windows Form.

Ilustración 34 Nuevo proyecto

4. Clic en OK.

5. Observara el área de trabajo.

6. Luego de un clic en el formulario (Form1).

7. Luego clic en Text (nombre) de la ventana de propiedades.

8. Borre lo que dice: Form1 y escriba : Inicio.

EJEMPLOS GUÍADOS

67

9. Luego Enter. Observará su proyecto de la siguiente manera:

10. Guarde su proyecto

USO DE CONTROLES 1. Continúe trabajando con el ejercicio anterior.

2. Del cuadro de herramientas seleccione el elemento Label dando un clic y arrástrelo hasta el

formulario.

3. Luego de clic en Text de la ventana de propiedades, borre lo que dice ahí: Label y escriba

Science Girl. Observará el formulario de la siguiente manera:

4. Ahora del cuadro de herramientas seleccione el elemento Botton dando un clic y arrástrelo

hasta el formulario. Cambie el nombre de la misma manera que el Label, vaya a la ventana

de propiedades, seleccione la propiedad Text y escriba Púlsame.

5. Hasta el momento su formulario se vera de la siguiente manera:

Nombre que

se asigno

Nombre que se le

asignó al elemento

Label

68

NOTA: Al ejecutar el programa no sucedería nada ya que no se ha codificado.

CODIFICACIÓN

Desde el área de trabajo, para que al hacer clic en púlsame salga un aviso debemos codificar

en el Botton1, que es donde el usuario realizara el evento (“hacer clic”).

Hacemos doble clic sobre el objeto (en el Botón Púlsame), y nos llevara a la parte de código

de Visual Basic, en donde codificaremos lo que se quiere que haga.

6. De doble clic en el botón púlsame. Se mostrara una pantalla de la siguiente manera:

Ilustración 35 Código

7. Ahora digite en la parte del código lo siguiente:

MsgBox(“¡Bienvenidas a Visual Basic!”, vbInformation, “Science Girl”)

La parte en donde codificaremos lo

que deseamos hacer en el evento

mismo.

Es el objeto, que

en este caso es el

botón (Button,

que se llama

“Button1”)

69

Observaras el código de la siguiente manera:

8. Ahora ejecuta nuevamente el programa.

9. Observara que se muestra una ventana de la siguiente forma:

10. De clic en púlsame.

11. Y observará que se muestra una ventana emergente de la siguiente:

12. Para salir clic en aceptar y luego cierre la ventana de inicio.

70

CREACION DE UN FORMULARIO PARA ENCUESTA

1. Abra visual Basic.

2. Clic en la viñeta nuevo proyecto.

3. Seleccione la opción WindowsForm de la misma manera que lo hizo en el ejercicio

anterior.

4. Observara el área de trabajo.

5. Luego de un clic en el formulario (Form1).

6. Luego clic en Text (nombre) de la ventana de propiedades.

7. Borre lo que dice: Form1 y escriba: Encuesta.

8. Luego Enter.

9. Ahora seleccione el elemento Label y arrástrelo hasta el formulario.

10. Luego de clic en Text de la ventana de propiedades, borre lo que dice ahí: Label y

escriba Nombre.

11. Seleccione nuevamente el elemento Label y arrástrelo hasta el formulario.

12. Cambie el nombre y escriba: Apellido.

13. Agregue nuevamente un Label con el nombre: Teléfono.

14. Ahora agregue el elemento Texbox del cuadro de herramientas y arrástrelo hasta el

formulario, su formulario hasta el momento se vera de la siguiente manera:

15. Ahora agregue un TexBox posicionándolo a la par de Apellido, de igual forma para

Teléfono.

Label

agregados

TexBox agregado

71

Su formulario habrá quedado de la siguiente manera.

CAMBIAR EL COLOR DE FONDO AL FORMULARIO 1. Utilizando el formulario del ejercicio anterior, vamos a cambiar el color de fondo del

componente que en este caso es el formulario.

2. Damos clic al formulario para seleccionarlo.

3. Nos vamos a la ventana de propiedades y seleccione la propiedad BackColor:

Que es la propiedad que nos ayudara a cambiarle el color al formulario.

4. Ahora da clic en la pestaña y selecciona el color que más te guste:

72

En este caso se seleccionó un color cualquiera quedando el formulario de la siguiente forma:

73

1. Modifique el ejercicio 2 del formulario para encuesta, de manera que se vea de la siguiente

manera:

2. Hacer un formulario que tenga el siguiente diseño.

1. Realice un formulario que se utilice para guardar los datos de un alumno.

2. Elabore un proyecto donde se pueda mostrar un mensaje en una ventana emergente que

diga: Feliz Dia . (Puede basarse en el primer ejercicio guiado)

3. Opcional: Realice un programa que lea dos números y que indique cual es el mayor de ellos.

ACTIVIDADES COMPLEMENTARIAS

EJERCICIOS

El nuevo

elemento a

utilizar en este

caso es el

NumericUpDown

.

74

Thierry Groussard. Recursos informáticos Visual Basic 2010. Edición Española BELINCHON.

Primeros pasos en Visual Basic:”Mi primer programa”. Recuperado el 14 de enero del 2013 de

http://www.bloginformatico.com/primeros-pasos-en-visual-basic-mi-primer-programa.php

BIBLIOGRAFIA

75

TEMA: INTRODUCCIÓN A HTML.

Identificar las partes básicas de una página web.

Que las estudiantes puedan crear por si solas la pagina web de sus proyectos.

Conocer cómo funcionan y utilizan las plantillas para crear páginas web.

1 Computadora con Notepad ++.

Navegador Web (preferiblemente Mozilla Firefox).

Guía de laboratorio.

Páginas Web

Una página Web es la unidad básica del World Wide Web.

MODULO IV- COMPUTACIÓN

OBJETIVO

INTRODUCCIÓN TEÓRICA

Una página Web tiene la característica peculiar de que el

texto se combina con imágenes para hacer que el

documento sea dinámico y permita que se puedan

ejecutar diferentes acciones, una tras otra, a través de la

selección de texto remarcado o de las imágenes, acción

que nos puede conducir a otra sección dentro del

documento, abrir otra página Web, iniciar un mensaje de

correo electrónico o transportarnos a otro Sitio Web

totalmente distinto a través de sus hipervínculos.

GUÍA 5

MATERIALES

76

Estructura del sitio web.

El lenguaje que se utiliza para crear sitios o páginas

web es HTML, que significa HyperText Markup

Language, algo así como el Lenguaje de Marcas de

HyperTexto.

Es muy importante estructurar muy bien el sitio Web para lograr una serie de páginas con servicios

accesibles y de fácil navegación.

Navegares un término utilizado para denotar la acción de

desplazarse a través de documentos o páginas Web en

internet, que acuñó debido al nombre de los programas

que permiten el acceso a los sitios Web; Browsers

(hojeadores de páginas Web o navegadores).

En general, la estructura de un sitio Web se presenta como se ve en el siguiente esquema, porque

debe existir una página principal denominada Home (Casa), también puede ser llamada Indexque

conecta mediante hipervínculos con las otras páginas, que incluso podrían no ser de menor

jerarquía que la principal.

Sitio Web

Se denomina a aquel lugar remoto donde se ofrecen una

serie de Páginas Web con información basada en

hipertexto, generalmente ubicado en un Servidor de

World Wide Web, obviamente en una computadora

conectada por algún medio a la gran red Internet.

77

También se da el caso de Sitios Web que constan únicamente de la página principal.

Diferencia entre sitio web y página web.

A veces se utiliza erróneamente el término página web para referirse a sitio web. Una página web

es parte de un sitio web y es un único archivo con un nombre de archivo asignado, mientras que un

sitio web es un conjunto de archivos llamados páginas web.

Luego de conocer algunos términos importante comenzaremos a definir el lenguaje que

utilizaremos para desarrollar nuestras páginas web.

HTML (HyperText Markup Language) es un lenguaje muy sencillo

que permite describir hipertexto, es decir, texto presentado de forma

estructurada y agradable, con enlaces (hyperlinks) que conducen a

otros documentos o fuentes de información relacionadas, y con

inserciones multimedia (gráficos, sonido...)

La descripción se basa en especificar en el texto la estructura lógica del contenido(títulos, párrafos de

texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar

(especificar los lugares del documento donde se debe poner cursiva, negrita, o un

gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se

realice por un programa especializado (como Internet Explorer, Mozilla Firefox,

Google Chrome, Opera, entre otros).

Página principal o

home

Página A Página B Página C

78

HTML5

HTML5 es la nueva versión del lenguaje de marcado que se usa para

estructurar páginas web, gracias a él con características nuevas y

modificaciones que se ha mejorado significativamente este estándar.

ESTRUCTURA BÁSICA HTML5

Cualquier página web se distingue por estar escrita en lenguaje HTML y se compone de dos partes

básicas denominadas cabeza y cuerpo de la página;

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="utf-8"/>

<meta name="description" content="html5 science girl" />

<title>Mi primera web en html5</title>

</head>

<body>

<!--aqui se despliega todo el contenido-->

</body>

</html>

Observe que el código HTML5 consta de elementos de apertura <> y de cierre, a los cuales les antecede

una diagonal </>.

Una página siempre abre con <!DOCTYPE html>, además debe llevar las etiquetas <html> y </html>.

<html lang="es">

...

</html>

Si te fijas veras que tiene un atributo que eslang,ósea lenguaje aquí definimos en que lenguaje va a ir

nuestro documento web, lo puedes en “en” si tu web va a hacer en el idioma Inglés o “es” si esta en

Español, ya dependerá de tu proyecto, en este caso hace referencia a una web construida en español.

La cabeza es la parte entre <head> y </head> (esta parte es de información, por lo que nunca se

presenta en la pantalla del navegador). Los elementos del <head> deben incluir el título del documento,

y pueden incluir scripts, estilos, entre otros.

Cabeza

Cuerpo

79

La etiqueta <title> que es la que provee el título a la página, esta es muy importante incluirla a los

documentos creados, ya que la asociamos a una identidad por medio de su título.

<title>Aqui va el título del documento actual</title>

Por lo último, el cuerpo se inserta entre <body> y </body> y es la parte que se ve en la pantalla del

navegador.

Ilustración 36: Ejemplo de partes de la página web

El title se muestra en el borde de la

ventana del navegador

Dentro del navegador se muestra el

body

80

Ejemplo 1: Mi primera página en html5

1. Abrir el Notepad++

2. Digitar el siguiente código

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="utf-8"/>

<meta name="description" content="curso html5" />

<title>Mi primera pagina en HTML</title>

</head>

<body>

<header><h1>Mi primera pagina en HTML5<h1></header>

<p>

"Cuando todos los dias resultan iguales es porque el hombre<br>

ha dejado de percibir las cosas buenas que surgen en su vida<br>

cada vez que el sol cruza el cielo"<br>--Paulo Coelho

</p>

</body>

</html>

3. Guarde el documento, para ello vaya al menú archivo y luego seleccione la opción guardar, y se

abrirá una ventana como esta:

Ilustración 37: Pasó 3

EJEMPLOS GUÍADOS

Nombre del

documento

ejemplo1

Cambie el tipo de

documento a Hyper Text

Markup Language file

81

4. De clic sobre el menú Ejecutary luego sobre Launch in Firefox

Ilustración 38: Paso 4

De esta manera podremos ver nuestra página web en Mozilla Firefox

Ilustración 39: Resultado paso 4

5. Estando en Mozilla Firefox, clic derecho sobre el área del body de la página web, luego

seleccione la opción Ver código fuente de la página.

82

Ilustración 40: Pasó 5

¿Cuál fue el resultado?__________________________________________________________________ _______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

6. Ahora, de nuevo en la ventana de Mozilla Firefox, de clic derecho sobre el área del body de la

página web, luego seleccione la opción Inspeccionarelemento.

¿Qué se puede hacer desde esta opción?____________________________________________________ _____________________________________________________________________________________

83

__________________________________________________________________________________________________________________________________________________________________________

7. Complete la siguiente información: Etiquetas Uso

<header></header>

<h1></h1>

<p></p>

<br>

Las etiquetas <head></head> y <header></header> no tienen la misma función

8. Realice el ejercicio 1: Vocales tildadas

Ejemplo 2: Mi primer sitio Web

Carmen Rodríguez es una fotógrafa que necesita un sitio web. La estructura del Website de Carmen es la siguiente:

Primero se mostrara como se debe escribir cada formato que le daremos a la página, y más adelante

se observara como cambia la página web al utilizar cada etiqueta.

index.html

Página Principal o

Home

Galeria Sobre mi

84

<!DOCTYPE html>

<html lang="es">

<head>

<title>P&aacute;gina de Carmen Rodr&iacute;guez</title>

</head>

<body background="images/imagen00.jpg">

<center>

<header>

<h1>P&aacute;gina personal de &nbsp;<br>

Carmen Rodr&iacute;guez M.</h1>

</header>

<br><img SRC="images/imagen01.jpg" >

<p>Aqu&iacute; encontras:<br>

<a href="gallery.html">Galer&iacute;a de Fotos</a><br>

<a href="about.html">Información sobre mi</a>

</p>

</center>

</body>

</html>

Enlace a página externa

<a href="url">Link text</a>

<a href = " galery.html "> Galer&iacute;a de Fotos</a>

La etiqueta <a> define un hipervínculo.

Un hipervínculo (o link) es una palabra, grupo de palabras o imagen a la cual haces clic y te traslada

hacia otro documento.

Cuando mueves el cursor sobre un hipervínculo, este se transforma en una pequeña mano.

El atributo más importante de la etiqueta <a> es el atributo href, el cual indica el url de destino.

Cambiar fondo de página

<body background="direccion de imagen">

<body bgcolor = “red”>

Sintaxis

Ejemplo

Poner una imagen de fondo

Establecer un color de fondo

85

Agregar una imagen

<img src="url" >

Centrar el texto <center>Lo que coloque acá se centrara en el navagedor </center>

gallery.html

<!DOCTYPE html>

<html lang="es">

<head>

<title>P&aacute;gina de Carmen

Rodr&iacute;guez</title>

</head>

<body background="images/imagen00.jpg">

<center>

<header>

<h1>Galer&iacute;a de fotos</h1>

</header>

<img SRC="images/imagen02.jpg" height=243 width=316>

<img SRC="images/imagen03.jpg" height=243 width=316>

<img SRC="images/imagen04.jpg" height=243 width=316>

<img SRC="images/imagen05.jpg" height=243 width=316>

<img SRC="images/imagen06.jpg" height=243 width=316>

<img SRC="images/imagen07.jpg" height=243 width=316>

<img SRC="images/imagen08.jpg" height=243 width=316>

<img SRC="images/imagen09.jpg" height=243 width=316>

</center>

</body>

</html>

Ponerle un tamaño predeterminado a una imagen <img src=" images/imagen02.jpg " height=243 width=316>

Donde:

Height: Altura de la imagen

Width: Ancho de la imagen

url es la dirección de la imagen

86

Ilustración 41: Galerìa de fotos

about.html

<!DOCTYPE html>

<html lang="es">

<head>

<title>P&aacute;gina de Carmen Rodr&iacute;guez</title>

</head>

<body background="images/imagen00.jpg">

<center>

<header>

<h1>Sobre mi</h1>

</header>

<p>

La fotograf&iacute;a es mi vida<br>

Aprend&iacute; a usar la c&aacute;mara cuando ten&iacute;a 5 años<br>

no he parado desde entonces.<br>

Estudie Licenciatura en Fotograf&iacute;a Digital en la

Universidad<br>

Soy fotografa independiente<br>

</p>

<p>

<br>"La fotograf&iacute;a no es solo mi forma de vida, es mi

pasion"<br><img SRC="images/imagen10.jpg" height=251 width=324>

</center>

</body>

</html>

87

Paso a paso la pagina web se ira viendo de la siguiente manera: Cambiar fondo de página:

Sin fondo personalizado <body></body>

Ilustración 42: Pagina web sin fondo personalizado

88

Con un color de fondo <body bgcolor="gray"></body>

Ilustración 43: Pagina web con fondo personalizado

89

Con una imagen de fondo (si la imagen es más pequeña que el navegador, esta se repetirá) <body background="images/imagen00.jpg">

Ilustración 44: Pagina web con una imagen de fondo

Centrar elementos en el navegador

90

Ilustración 45: Pagina web sin centrar elementos

<body>

…

</body>

Ilustración 46: Pagina web con elementos centrados <body> <center> … <center> </body>

Responde las siguientes preguntas: ¿Cuantos párrafos se han creado en el documento?___________________________________________ ¿Cuál es el ancho de la imagen que se muestra en la página?____________________________________ ¿Cuál es el alto de la imagen que se muestra en la página?______________________________________ ¿Qué etiqueta <> permite que los elementos de la página permanezcan centrados?_________________

91

Ilustración 47: ejemplo de una página web

92

Ejercicio 1: Vocales tildadas Durante toda esta guía hemos hecho una pequeña trampa a la hora de explicar las directivas y poner

ejemplos, para facilitar la comprensión de las ideas fundamentales sobre HTML. Dicha trampa ha

consistido en ocultar ciertas exigencias de HTML respecto al uso de caracteres especiales, denominación

que, para nuestra desgracia como hispanohablantes, incluye a las vocales acentuadas y a la letra eñe.

Las entidades necesarias en nuestro idioma son:

á:&aacute; é:&eacute; í:&iacute;

ó:&oacute; ú:&uacute;

Á:&Aacute; É:&Eacute; Í:&Iacute;

Ó:&Oacute; Ú:&Uacute;

ü:&uuml; Ü:&Uuml; ñ:&ntilde;

Ñ:&Ntilde;

¿: &#191; ¡:&#161;

Como puede verse, las vocales acentuadas se identifican añadiendo el sufijo acute a la vocal sin

acentuar (puesto que se trata de un acento agudo). Para la u con diéresis y la eñe se usan uml tras una u

y tilde detrás una ene, respectivamente. La equivalencia de los signos de abrir interrogación y

exclamación es algo más oscura: a falta de una denominación más evidente, tenemos que usar el valor

numérico de dichos caracteres en el código estándar latin1 (ISO-8859-1). Esto se puede hacer con

cualquier otro carácter del código latin1, que es el código de caracteres básico en HTML, escribiendo

&#numero;.

Añadir las tildes a las palabras que lo necesiten del ejemplo Guiado No 1: Mi primera página en HTML5

EJERCICIOS

93

Ejercicio 2

Carmen Rodríguez desea agregar otra página web a su website donde se muestre su información de

contacto. De tal manera que el sitio web de Carmen quedará estructurado de la siguiente manera:

La página de contacto debe contener por lo menos la siguiente información:

Dirección de Carmen

Teléfono fijo

Teléfono celular

Correo electrónico

Para agregar el correo electrónico utilice la etiqueta <a></a> de la siguiente manera:

<a href="mailto:nobody@html.net">Envíe un mensaje a nadie en

HTML.net</a>

Donde nobody@html.net es la dirección de correo

Agregar una imagen a la página de contacto

Debes crear un hipervínculo en la página de inicio para dirigir al visitante a la página de contacto:

Página Principal o

Home

Galeria Sobre mi Contacto

94

Puedes trabajar sobre la siguiente plantilla:

<!DOCTYPE html>

<html lang="es">

<head>

<title>P&aacute;gina de Carmen Rodr&iacute;guez</title>

</head>

<body background="images/imagen00.jpg">

<center>

<header>

<h1></h1>

</header>

<p>

</p>

</center>

</body>

</html>

Acá debe aparecer

el hipervínculo

95

Estructura básica con HTML5 Este es un ejemplo de cómo estructurar una página web con HTML5

Traslada la letra de la izquierda al paréntesis de la de derecha según el uso de cada etiqueta

a) <body></body>

b) <header></header>

c) <article></article>

d) <aside></aside>

e) <footer></footer>

( ) Viene a ser “la barra lateral” de toda la vida. Digamos que, por norma general, este bloque incluirá la zona de navegación del sitio web, las categorías, opciones o como queramos llamarlo. ( ) Contiene un artículo que debe tener sentido por sí mismo y debería ser posible distribuirlo de forma independiente del resto del sitio. ( ) Es un agrupador de elemento al final de otro. Puede usarse para pie de página del sitio o pie de bloque de contenido. ( ) Es un contenedor que agrupa elementos introductorios o un conjunto de información referente a lo que a continuación se pondrá. ( ) Es el mayor contenedor de información de todos.

ACTIVIDADES COMPLEMENTARIAS

96

Este es otro ejemplo de cómo estructurar una página web con HTML5

Averigua que función tienen las siguientes etiquetas:

Etiqueta Uso

<nav></nav>

<section></section>

Realice su propio website con al menos la siguiente estructura:

Nota:

Incluir por lo menos una imagen en el website y cambiar el fondo de las paginas (puede

seleccionar un color de fondo o imagen) .

Página Principal o

Home

Sobre mi Contacto

EJERCICIO ADICIONAL

97

HTML5 en W3School, recuperado el 18 de enero de 2013 de

http://www.w3schools.com/html/default.asp

BIBLIOGRAFIA

98

Conocer que es el lenguaje JavaScript.

Realizar aplicaciones JavaScript html.

TEMA: Lenguaje de programación JavaScript.

1 computadora con Notepad++

Navegador web (preferiblemente Mozilla Firefox)

Guía de laboratorio.

¿Qué es JavaScript?

Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece,

animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al

usuario.

Para empezar, podemos ver páginas como la página de

http://www.seat.es, llena de efectos interesantes sobre JavaScript,

que llegan a asemejarse a la tecnología Flash.

También se pueden ver más ejemplos de estos dentro de cualquier

página un poco compleja, si nos pasamos por un sitio que tenga una

JavaScript es un lenguaje de programación que se utiliza principalmente

para crear páginas web dinámicas.

MODULO IV- COMPUTACIÓN

OBJETIVO

MATERIALES

INTRODUCCIÓN TEÓRICA

GUÍA 6

99

calculadora o un convertidor de divisas, veremos que en muchos casos se han realizado con

JavaScript.

Sin embargo, en realidad es mucho más habitual encontrar JavaScript para realizar efectos simples

sobre páginas web, o no tan simples, como pueden ser rollovers (que cambie una imagen al pasar

el ratón por encima), navegadores desplegables, apertura de ventanas secundarias, etc.

Estructura básica JavaScript Los scripts en HTML deben ser insertados entre las etiquetas <script> y </script>.

Los scripts se pueden incluir en la sección del <body> y en el <head> de la página HTML.

La etiqueta <script>

Como ya mencionamos, para insertar JavaScript en una página HTLM, usaremos la etiqueta

<script>. Las etiquetas <script> y </script> indican que el inicio y el fin del código JavaScript.

Ejemplo 1:

<script>

alert("Mi primer JavaScript");

</script>

Javascript en el <body></body>

En este ejemplo, Javascript escribe texto en el <body> mientras la página se carga.

<!DOCTYPE html>

<html>

<body>

.

.

<script>

document.write("<h1>Este es el t&iacute;tulo</h1>");

document.write("<p>This is a paragraph</p>");

</script>

.

.

</body>

</html>

100

Ilustración 48: Resultado en el body.

Funciones y eventos de Javascript

Las sentencias de JavaScript en el ejemplo anterior, se ejecuta mientras se carga la página.

Más a menudo, queremos ejecutar código cuando se produce un evento, como cuando el usuario

hace clic en un botón.

Si ponemos el código JavaScript dentro de una función, podemos llamar a esa función cuando se

produce un evento.

JavaScript en el <head> o <body>

Puedes poner un número ilimitado de secuencias de comandos en un documento HTML.Los

scripts pueden estar en el <body> o en la sección head del HTML, y / o en los dos.

Es una práctica común poner funciones en la sección <head>, o en la parte inferior de la página.

Así que están todos en un solo lugar y no interfieren con el contenido de la página.

Funciones Javascript en el <head>

En este ejemplo, una función de JavaScript se coloca en la sección <head> de una página HTML.La

función se llama cuando se hace clic en un botón.

<!DOCTYPE html>

<html>

<head>

<script>

function miFuncion()

{

document.getElementById("demo").innerHTML="Mi primera funcion

Javascript";

}

</script>

</head>

<body>

101

<h1>Mi p&aacute;gina Web</h1>

<p id="demo">Un p&aacute;rrafo</p>

<button type="button" onclick="miFuncion()">Haz clic</button>

</body>

</html>

Ilustración 49: Resultado 1.

Ilustración 50: Resultado 2.

Funciones Javascript en el <body>

Este ejemplo es parecido al anterior con la diferencia de que el código JavaScript se encuentra en

la sección <body> de la página HTML.

<!DOCTYPE html>

<html>

<body>

<h1>Mi p&aacute;gina Web </h1>

102

<p id="demo">Un p&aacute;rrafo </p>

<button type="button" onclick="miFuncion ()">Haz clic</button>

<script>

function miFuncion ()

{

document.getElementById("demo").innerHTML="Mi primera funcion Javascript ";

}

</script>

</body>

</html>

Comandos básicos Javascript

Escribiendo en un documento html

Ejemplo:

document.write("<h1>Este es un encabezado</h1>");

document.write("<p>Este es un p&aacute;rrafo</p>");

NOTA:

Sólo se puede utilizar document.write en la salida HTML. Si lo usa después que el documento se

haya cargado, todo el documento se sobrescribirá.

Reacción a los eventos

Ejemplo:

<button type="button" onclick="alert('Bienvenido!')">Clic aqui</button>

NOTA:

La función alert() no se utiliza mucho en Javascript, pero a menudo es muy útil para probar el

código. El evento onclick() es solo uno de los muchos eventos de HTML

Cambiando Contenido HTML

Usar Javascript para manipular el contenido de los elementos HTML es una funcionalidad muy

poderosa. (Ver ejemplo guiado No 2).

Ejemplo

x=document.getElementById("demo") //Encuentra el elemento

x.innerHTML="Hello JavaScript"; //Cambia el elemento

NOTA:

Es frecuente encontrar document.getElementById ("algún id"). Esto se define en el DOM HTML.

El DOM (Document Object Model) es el estándar W3C oficial para acceder a los elementos HTML.

103

Cambiar estilos html

Javascript se puede utilizar para cambiar el estilo de los elementos html

Ejemplo

x=document.getElementById("demo") //Encuentra el elemento

x.style.color="#ff0000"; //Cambia el estilo

Mi primera aplicación con Javascript.

<!DOCTYPE html>

<html>

<head>

<script>

alert("Hola desde Javascript");

</script>

</head>

<body>

<h1>Mi primer JavaScript</h1>

<p>Este es el body de la p&aacute;gina</p>

</body>

</html>

EJEMPLOS GUÍADOS

104

Ilustración 51: Resultado ejemplo1

Ilustración 52: Resultado 2 al dar clic en acepta

Mi segunda aplicación con JavaScript.

<!DOCTYPE html>

<html>

<head>

<script>

function mostrarHora()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

105

</head>

<body>

<h1>Mi segundo Javascript</h1>

<p id="demo">Este es el body de la p&aacute;gina</p>

<button type="button" onclick="mostrarHora()">Mostar hora</button>

</body>

</html>

Ilustración 53: Primer resultado ejercicio 2.

Ilustración 54: Función de mostrar la hora.

106

Ejercicio 1

Escriba un script que muestre una ventana en el navegador que diga: “Bienvenido a la página”.

Ejercicio 2

Escriba un script en en el cual se haga funcionar un botón parecido al ejemplo guiado No 2. El

botón debe decir “Presióname”.

Ilustración 55: Antes de presionar el boton.

Tras presionar el botón se debe mostrar en el navegador el mensaje

Ilustración 56:Resultado luego de presionar el boton

EJERCICIOS

107

Ejemplo 3: Encender una lámpara.

En este ejemplo se muestra como cambiar el origen de una imagen html (propiedad src) para

simular el encendido y apagado de una lámpara

<html>

<body>

<script>

function cambiarImagen()

{

element=document.getElementById('miimagen')

if (element.src.match("bulbon"))

{

element.src="pic_bulboff.gif";

}

else

{

element.src="pic_bulbon.gif";

}

}

</script>

<img id="miimagen" onclick="cambiarImagen()"

src="pic_bulboff.gif" width="100" height="180">

<p>Clic sobre el foco para encenderlo o apagarlo</p>

108

</body>

</html>

Ilustración 57: Antes de dar clic en el foco.

Ilustración 58: A dar clic.

109

Investigue al menos 3 sitios web que utilicen JavaScript.

JavaScript Tutorial. Recuperado el 21 de enero de 2013 de

http://www.w3schools.com/js/default.asp

Tutorial de Javascript.Recuperado el 21 de enero de 2013 de

http://www.wikilearning.com/tutorial/completo_tutorial_de_javascript-antes_de_empezar/4466-

4

ACTIVIDADES COMPLEMENTARIAS

BIBLIOGRAFIA