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ágina de Carmen Rodríguez</title>
</head>
<body background="images/imagen00.jpg">
<center>
<header>
<h1>Página personal de <br>
Carmen Rodríguez M.</h1>
</header>
<br><img SRC="images/imagen01.jpg" >
<p>Aquí encontras:<br>
<a href="gallery.html">Galerí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í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ágina de Carmen
Rodríguez</title>
</head>
<body background="images/imagen00.jpg">
<center>
<header>
<h1>Galerí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ágina de Carmen Rodríguez</title>
</head>
<body background="images/imagen00.jpg">
<center>
<header>
<h1>Sobre mi</h1>
</header>
<p>
La fotografía es mi vida<br>
Aprendí a usar la cámara cuando tenía 5 años<br>
no he parado desde entonces.<br>
Estudie Licenciatura en Fotografía Digital en la
Universidad<br>
Soy fotografa independiente<br>
</p>
<p>
<br>"La fotografí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:
á:á é:é í:í
ó:ó ú:ú
Á:Á É:É Í:Í
Ó:Ó Ú:Ú
ü:ü Ü:Ü ñ:ñ
Ñ:Ñ
¿: ¿ ¡:¡
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:[email protected]">Envíe un mensaje a nadie en
HTML.net</a>
Donde [email protected] 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ágina de Carmen Rodrí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í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ágina Web</h1>
<p id="demo">Un pá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ágina Web </h1>
102
<p id="demo">Un pá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á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á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á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
Top Related