Fundamentos de Programacion 2

AREA TECNOLOGA E INFORMTICA
TITULACION EN PROGRAMACION DE SOFTWARE
Sistema de
Gestin de la
Calidad
FUNDAMENTOS DE PROGRAMACIN 2
11/03/11
Gua de Aprendizaje
Duracin: 2 horas
Modulo:
FUNDAMENTOS DE PROGRAMACION 2.
Tema:
LECCIN 1, INTRODUCCIN
REPASO UML
CONCEPTOS BSICOS

Sistema de
Gestin de la
Calidad
11/03/11
Duracin: 2 horas
Modulo:
Tema:
LECCIN 1, INTRODUCCIN
DIAGRAMAS UML
Diagrama de clases
Diagrama de casos de uso
Diagrama de actividades
Ejemplos
Programa
Programa
Programa
Programa
calculadora
juego de video
tipos de tringulos
circuito conmutable

Sistema de
Gestin de la
Calidad
11/03/11
Duracin: 2 horas
Modulo:
Tema:
LECCIN 2, LENGUAJE DE PROGRAMACION VISUAL C++
ENTORNO DE TRABAJO Visual C++
Abrimos la aplicacin desde inicio/ todos los programas/Microsoft Visual Studio 6.0/Microsoft Visual C++
6.0
En el Men FILE escogemos la opcin NEW y nos aparece la siguiente ventana contextual
Esta nos ofrece varias pestaas para permitirnos crear diferentes objetos
Como no hemos instanciado (subido a la memoria) ningn proyecto, nos ofrece crear proyecto, la pestaa
proyecto est activa sobre las otras
Muestra 15 diferentes opciones de proyectos que se pueden realizar con visual c++
Nosotros necesitamos es este repaso crear y usar proyectos de tipo Win32 Console Application
Esto nos crea una carpeta y un archivo que asocia todas las libreras y programas dentro de un proyecto
En Proyect Name elegimos este nombre y en Location su ubicacin en disco duro.
Este repaso usaremos el proyecto llamado Repaso1 o Repaso2 segn corresonda.
Si el proyecto es nuevo elegimos proyecto vaco
Empty Project
Le damos en el botn Finish
Y en la informacin clic en OK

Sistema de
Gestin de la
Calidad
11/03/11
Ahora hay que crear el archivo del programa para esta primera prctica:
En el Men FILE escogemos la opcin NEW y nos aparece la siguiente ventana contextual
Como ya hemos instanciado un proyecto, nos ofrece crear archivos FILES, la pestaa files est activa
sobre las otras
Para este proyecto de repaso, escribiremos cdigo de lenguaje visual C++ para practicar la sintaxis de
cdigo de programacin y aplicar los conocimientos de estructuras de datos y estructuras de control de
flujo.
Es por eso que elegimos C++ Source file es decir cdigo fuente C++ o cdigo nativo c++.
Le damos un nombre al archivo segn sea el programa que vamos a escribir y ejecutar.
Nuestro primer ejemplo es el programa Holamundo que consiste en mostrar en pantalla el mensaje con el
saludo
Add to Project aadimos al proyecto que tenemos repaso2 y le colocamos el nombre (FILE NAME)
holamundo
El archivo recibe la extensin .cpp que significa c plus plus o sea c++. Quedar holamundo.cpp
Aparece el C++ Source file holamundo.cpp a la izquierda en el file view y una ventana blanca a la
derecha lista para que la llenes de cdigo de programacin.

Sistema de
Gestin de la
Calidad
11/03/11

Sistema de
Gestin de la
Calidad
11/03/11
Duracin: 2 horas
Modulo:
Tema:
SINTAXIS LENGUAJE C++
En el lenguaje c++ tenemos varias alternativas para ingresar y/o mostrar datos, dependiendo de
la librera que vamos a utilizar para desarrollar el programa, entre estas estn: iostream.h y
stdio.h.
< iostream.h>
Las operaciones de entrada y salida no forman parte del conjunto de sentencias de C++, sino
que pertenecen al conjunto de funciones y clases de la biblioteca estndar de C++. Ellas se
incluyen en los archivos de cabecera iostream.h por lo que siempre que queramos utilizarlas
deberemos introducir la lnea de cdigo #include <iostream.h>
cin, que toma caracteres de la entrada estndar (teclado);
cout, pone caracteres en la salida estndar (pantalla);
cerr y clog ponen mensajes de error en la salida estndar.
Estos objetos se utilizan mediante los operadores << y >>. El operador << se denomina
operador de insercin; y apunta al objeto donde tiene que enviar la informacin. Por lo tanto la
sintaxis de cout ser:
cout<<variable1<<variable2<<...<<variablen;
No olvidemos que las cadenas de texto son variables y se ponen entre " " (comillas dobles).
Por su parte >> se denomina operador de extraccin, lee informacin del flujo cin (a la izquierda
del operador) y las almacena en las variables indicadas a la derecha).
La sintaxis sera la siguiente:
cin>>variable1>>...>>variablen;
Un ejemplo de cdigo utilizando ambos objetos podra ser el siguiente:
#include <iostream.h>
main ()
{
int i;
cout<<"Introduce un nmero";
cin>>i;
...
}
Que mostrara por pantalla la frase "Introduce un nmero" y posteriormente almacenara el
valor introducido por teclado en la variable i.
Para utilizar la funcin printf en nuestros programas debemos incluir la directiva:
#include <stdio.h>
Si slo queremos imprimir una cadena basta con escribir la siguiente lnea de cdigo.
cout<< "Cadena" );
Como resultado muestra en pantalla:
Cadena

Sistema de
Gestin de la
Calidad
11/03/11
Lo que pongamos entre las comillas es lo que vamos a sacar por pantalla.
Si volvemos a usar otro printf, por ejemplo:
#include <stdio.h>
void main()
{
cout<< "Primera" );
cout<< "Segunda" );
}
Obtendremos:
PrimeraSegunda
Este ejemplo nos muestra cmo funciona printf. Para escribir en la pantalla se usa un cursor que
no vemos. Cuando escribimos algo el cursor va al final del texto. Cuando el texto llega al final de
la fila, lo siguiente que pongamos ir a la fila siguiente. Si lo que queremos es sacar cada una en
una lnea deberemos usar "\n". Es el indicador de retorno de carro. Lo que hace es saltar el
cursor de escritura a la lnea siguiente:
#include <stdio.h>
void main()
{
cout<< "Primera\n" );
cout<< "Segunda" );
}
y tendremos:
Primera
Segunda
Scanf
El uso de scanf es muy similar al de printf con una diferencia, nos da la posibilidad de que el
usuario introduzca datos en vez de mostrarlos. No nos permite mostrar texto en la pantalla, por
eso si queremos mostrar un mensaje usamos un printf delante. Un ejemplo:
#include <stdio.h>
void main()
{
int num;
cout<< "Introduce un nmero " );
scanf( "%i", &num );
cout<< "Has tecleado el nmero %i\n", num );
}
Aqu hacemos
Introduce un nmero _ /* La barra horizontal indica dnde esta el cursor */
Esto es porque en el printf no hemos puesto al final el smbolo de salto de lnea '\n'. Adems
hemos dejado un espacio al final de Introduce un nmero: para que as cuando tecleemos el
nmero no salga pegado al mensaje. Si no hubisemos dejado el espacio quedara as al
introducir el nmero 120:
Introduce un nmero120

Sistema de
Gestin de la
Calidad
11/03/11
Veamos cmo funciona el scanf. Lo primero nos fijamos que hay una cadena entre comillas.
Esta es similar a la de printf, nos sirve para indicarle al compilador qu tipo de datos estamos
pidiendo.
Como en este caso es un integer usamos %i.
Despus de la coma tenemos la variable donde almacenamos el dato, en este caso 'num'.
Fjate que en el scanf la variable 'num' lleva delante el smbolo &, este es muy importante, sirve
para indicar al compilador cual es la direccin (o posicin en la memoria) de la variable.
Podemos preguntar por ms de una variable a la vez en un slo scanf, hay que poner un %i por
cada variable:
#include <stdio.h>
void main()
{
int a, b, c;
cout<< "Introduce tres nmeros: " );
scanf( "%i %i %i", &a, &b, &c );
cout<< "Has tecleado los nmeros %i %i %i\n", a, b, c );
}
De esta forma cuando el usuario ejecuta el programa debe introducir los tres datos separados
por un espacio.
Tambin podemos pedir en un mismo scanf variables de distinto tipo:
#include <stdio.h>
void main()
{
int a;
float b;
cout<< "Introduce dos nmeros: " );
scanf( "%i %f", &a, &b );
cout<< "Has tecleado los nmeros %i %f\n", a, b );
}
A cada modificador (%i, %f) le debe corresponder una variable de su mismo tipo. Es decir, al
poner un %i el compilador espera que su variable correspondiente sea de tipo int. Si ponemos %f
espera una variable tipo float.

Sistema de
Gestin de la
Calidad
11/03/11
Compile el programa
En el men build elija compile. El le muestra el nombre del archivo cpp que tiene instanciado
Cuando el programa le indique que tiene 0 Errores proceda a ejecutarlo desde el men build
en la opcin
!Excecute
programa.exe Ctrl + F5

Sistema de
Gestin de la
Calidad
11/03/11
// Programa hola cin cout

int main()
{
int a;
const int b =0;
cin>> a;
cout<< "Hola mundo" <<a <<b;
return 0;
}
Ejemplo programa rea del circulo
//programa area del circulo
#include<iostream.h>
#include<stdio.h>
int main()
{
const double pi=3.1415;
int r;
cout<<"digite un nmero");
cin>>i", &r);
cout<< pi*r*r;
return 0;
}
Ejercicio programa superficie de un cilindro
//programa superficie cilindro
int main()
{
const double pi=3.1415;
double r,h,s;
cout << "digite el radio";
cin>> r;
cout << "digite la altura";
cin>> h;
s= pi*r*r*2*h ;
cout<< s;
return 0;
}
Que hace el siguiente programa?

Sistema de
Gestin de la
Calidad
11/03/11
int main()
{
int x = 5;
int y = 7;
cout << "\n";
cout << x + y << " " << x * y;
cout << "\n";
return 0;
}
Tipos de datos
int main () {
// Sacamos el tamao de cada tipo
cout << "El tamao del int es:\t\t" << sizeof(int) << " bytes.\n";
cout << "El tamao del short es:\t" << sizeof(short) << " bytes.\n";
cout << "El tamao del long es:\t" << sizeof(long) << " bytes.\n";
cout << "El tamao del char es:\t\t" << sizeof(char) << " bytes.\n";
cout << "El tamao del float es:\t\t" << sizeof(float) << " bytes.\n";
cout << "El tamao del double es:\t" << sizeof(double) << " bytes.\n";
// Sacamos por salida standar un mensaje
cout << "Termino el programa\n";
return 0;
}
Programa operadores
#include <iostream>
int main () {
// Sacamos por salida standar un mensaje
cout << "Vamos a probar los operadores\n";
unsigned int test = 0;
unsigned int a = 0, b = 0, c;
// Sacamos el valor por pantalla de test
cout << "Valor de test: " << test << endl;
// Sacamos el valor por pantalla de test++
cout << "Valor de test++: " << (test++) << endl;
// Sacamos el valor por pantalla de ++test
cout << "Valor de ++test: " << (++test) << endl;
cout << "Valor de test actual: " << test << endl;
// asignacion multiple
c = b = a = test;
a+=4;
b*=3;
c/=2;
// Veamos el resto de valores
cout << "Y los demas: " << c << " " << b << " " << a << endl;
return 0;
}
Programa potencias y raices


Sistema de
Gestin de la
Calidad
11/03/11
#include <math.h>
int main( )
{
double x;
cout<< "\n Digite un numero entero positivo (1, 2, 3. . .): ";
cin>> x;
cout<<"\n x = "<< x;
cout<<"\n El cuadrado de x es = "<< x * x;
cout<<"\n La raiz cuadrada de x es = "<< sqrt(x)<<"\n";
return 0;
}
Prueba de and y or
#include <iostream>
int main () {
int a = 23, b = 21, c = 34;
cout << "Valores: " << c << " " << b << " " << a << endl;
cout << "Dame valores. \na=";
cin >> a;
cout << "b=";
cin >> b;
cout << "c=";
cin >> c;
cout << "Y ahora son estos: c=" << c << " b=" << b << " a=" << a << endl;
// Veamos una sentencia if-else sencilla
if (!(a == b))
cout << "a y b no son iguales" << endl;
else
cout << "a y b son iguales" << endl;
if ((a == b) || (b == c))
cout << "A y B son iguales o B y C son iguales" << endl;
else
cout << "ni A y B son iguales ni B y C son iguales" << endl;
return 0;
}
If anidados
#include <iostream>
int main () {
int a = 23, b = 21, c = 34;
cout << "Valores: " << c << " " << b << " " << a << endl;
// Veamos una sentencia if-else sencilla
if (a >= b)
cout << "a mayor o igual que b" << endl;
else
cout << "a menor que b" << endl;
if (a >= b) {
cout << "a mayor o igual que b" << endl;
if (a == 23) {
cout << "a igual que 23" << endl;
cout << "terminamos." << endl;
}
} else {
cout << "a menor que b" << endl;
}
return 0;}

Sistema de
Gestin de la
Calidad
11/03/11
Ejemplo if tipos de traiangulos // programa tringulo

int main()
{int a,b,c;
cout<<"digite los tres lados ";
cin>> a>>b>>c;
if ((a==b)&&(b==c))
cout<<"equilatero ";
else
if((a==b)||(b==c)||(c==a))
cout<<"isoceles ";
if((a!=b)&&(b!=c)&&(c!=a))
cout<<"escaleno ";
return 0;}
El mayor de 3 numeros // programa mayor
int main()
{int a,b,c;
cout<<"digite un numero A\n ";
cin>> a;
cout<<"digite un numero B\n ";
cin>>b;
cout<<"digite un numero C\n ";
cin>>c;
if ((a>b)&&(a>c))
cout<<"A es el mayor ";
else
if((b>a)&&(b>c))
cout<<"B es el mayor ";
else
cout<<"C es el mayor";
return 0;}
Programacin modular funciones
#include <iostream.h>// Funcion: llamada
int llamada (int x, int y) {
cout << "Estamos en la funcion!!" << endl;
return (x+y);}
int main() {
cout << "Vamos a llamar a la funcion.." << endl;
// Llamamos a una funcion y asignamos
int z = llamada(5,7);
cout << "Resultado:" << z << endl;
// Llamada desde el output
cout << "Resultado:" << llamada(6,7) << endl;
cout << "Programa terminado \n" << endl;
return 0;}

Sistema de
Gestin de la
Calidad
11/03/11
PREVIA ORDENAR 3 NUMEROS DE MENOR A MAYOR

//ordenar tres numeros de menor a mayor
int main()
{
int a,b,c, swap;
cout<<"digite A,B,C, \n";
cin>>a;
cin>>b;
cin>>c;
if (a>c)
{
swap=a;
a=c;
c=swap;
}
if (a>b)
{
swap=a;
a=b;
b=swap;
}
cout<<a<<"\n";
cout<<b<<"\n";
cout<<c<<"\n";
return 0;
}

Sistema de
Gestin de la
Calidad
11/03/11
Duracin: 2 horas
Modulo:
Tema:
LECCIN 3, SINTAXIS DE PROGRAMACION VISUAL C++
ESTRUCTURAS DE CONTROL DE FLUJO

Sistema de
Gestin de la
Calidad
11/03/11
Duracin: 2 horas
Modulo:
Tema:
EJEMPLOS ESTRUCTURAS DE CONTROL DE FLUJO
CONTAR DE 1 A 10
int main()
{ int counter = 0;
while (counter < 10)
{
cout << counter<<\n";
counter++;
}
return 0;}
PROMEDIO DE DOS NUMEROS
IMPRIMIR N VECES UNA FRASE

int main()
{ int counter = 0;
int numTimes = 0;
cout << "Cuantas veces quiere Hola?";
cin >> numTimes;
cout << "\n";
while (counter < numTimes)
{
cout << "Hola!\n";
counter++;
}
cout << "\n";
return 0;}
LA TABLA DE MULTIPLICAR DE N
int main()
{ int contador = 0;
int Tabla = 0;
cout << "Cual tabla quiere mostrar? ";
cout << "\n";
cin >> Tabla;
while (contador < 10)
{
cout << Tabla<<" x "<<contador<<" = "<<Tabla * contador ;
cout << "\n";
contador++;
}
return 0;}
Duracin: 2
Modulo:
Tema:
EJERCICIOS
FLUJO

Sistema de
Gestin de la
Calidad
11/03/11
horas
ESTRUCTURAS DE CONTROL DE
// CONTINUAL MIENTRAS NO SEA N

int main()
{int cont(0);
char sn ('n');
while ((sn !='s') && (sn !='S'))
{
cout<< cont++;
cout<<" Desea salir S/N"<<endl ;
cin>> sn;
}
return 0;}
// CONTINUAR MIENTRAS SI
int main()
{int cont(0);
char sn ('S');
while ((sn =='s') || (sn =='S'))
{
cout<< cont++;
cout<<" Desea CONTINUAR S/N"<<endl ;
cin>> sn;
}
return 0;}
// EJECUTAR MIENTRAS *
int main()
{int cont(0);
char sn;
cout<<" Digita * para entrar"<<endl ;
cin>> sn;
while ((sn =='*'))
{
cout<< cont++;
cout<<" Digita * para continuar"<<endl ;
cin>> sn;
}
return 0;}
//PROGRAMA PARES HASTA
int main()
{int contador(2), final;
cout<<"Digite el trmino final \n";
cin>>final;
while ( contador <= final )
{
cout<< contador <<endl;
contador +=2;
}
return 0;}
//MUESTRE LOS PRIMEROS N TERMINOS IMPARES

int main()
{int impar(1), n, cont(1);
cout<< "Digite el numero de terminos ";
cin>> n;
cout<<endl;
while( cont++ <= n)
{
cout<< impar << endl;
impar +=2;
}
return 0;
}
// PARES DESDE HASTA
int main()
{int desde, hasta, cont(1);
cout<<"digite el valor incial ";
cin>>desde;
cout<<endl;
cout<<"digite el valor final ";
cin>>hasta;
cout<<endl;
if (desde%2)
cont= desde +1;
else
cont= desde;
while ( cont < hasta)
{
cout<< cont<<endl;
cont+=2;
}
return 0;}
//programa imprime pares e impares

int main()
{int contador, final;
cout<<"Digite el trmino final \n";
cin>>final;
cout<<"PARES \n";
contador=2;
{cout<< contador <<endl;
contador +=2;}
cout<<"IMPARES \n";
contador=1;
{cout<< contador <<endl;
contador +=2;}
return 0;}

Sistema de
Gestin de la
Calidad
11/03/11

Sistema de
Gestin de la
Calidad
11/03/11
Duracin: 2 horas
Modulo:
Tema:
EJEMPLOS PROGRAMACION ESTRUCTURADA
ESTRUCTURA REPETITIVA WHILE
PROGRAMA del programa que lee el cdigo de un alumno
hasta que se digite 0
ESTRUCTURA REPETITIVA FOR

PROGRAMA del programa que
escribe la tabla de multiplicar del 9
Duracin: 2
Modulo:
Tema:
EJERCICIOS

Sistema de
Gestin de la
Calidad
11/03/11
horas
PROGRAMACION ESTRUCTURADA
A.- Un programa que ordena 3 nmeros de menor a mayor

#include <stdlib.h>
int main()
{ int A, B, C;
cout<<"\n\nIngrese A: ";
cin>>A;
cout<<"\nIngrese B: ";
cin>>B;
cout<<"\nIngrese C: ";
cin>>C;
if(A>B)
{
if(B>C)
{
cout<<"C, B, A\n";
}
else
{
if(A>C)
{
cout<<" B, C, A \n";
}
else
{
cout<<" B, A, C\n";
}
}
}
else
{
if(B>C)
{
if(A>C)
{
cout<<"C, A, B\n";
}
else
{
cout<<"A, C, B\n";
}
}
else
{
cout<<"A, B, C\n";
}
}
return 0;
}

Sistema de
Gestin de la
Calidad
11/03/11
MI PRIMERA PGINA WEB

Vamos a crear nuestra primera pgina web, para ello, nos vamos a
Archivo > Nuevo > Pagina bsica > HTML
y damos a crear.
Automticamente nuestro Dreamweaver, crear el cdigo bsico para nuestra pgina (encabezado y
pie de pgina y cuerpo), primero le vamos a dar un titulo:
El ttulo de nuestro documento aparecer en la barra superior de nuestro navegador.

Lo siguiente que vamos a hacer, es configurar nuestra pgina, para ello nos vamos a
Modificar > Propiedades de la pgina
no vamos a explicar todos los parmetros, muchos de ellos los aprenderemos ms adelante.

Sistema de
Gestin de la
Calidad
11/03/11
ASPECTO:
Fuente de pgina: Aqu vamos a poner el tipo de fuente que queremos que tenga nuestra pgina.
Tamao: Tamao de la fuente
Color del texto: Color del texto de nuestra pgina
Color de fondo: El color del fondo :p
Imagen de fondo: Url de la direccin donde se encuentra nuestro fondo o patrn, aqu puedes
tambin seleccionar una pgina interna.
Repetir: Aqu vamos a decidir, si queremos que nuestra imagen de fondo, se repita, cuantas veces se
debe repetir, etc..
VINCULOS:

Sistema de
Gestin de la
Calidad
11/03/11
Color de vnculo: El color de los vnculos de nuestra pgina web.

Vnculos de sustitucin: Modifica el color del vinculo, cuando pasamos el cursor sobre l.
Vnculos visitados: Color de los vnculos que ya se han visitado.
Vnculos activos: Color de los vnculos, que son pulsados por el usuario
Aplicar > Aceptar
Ahora vamos a poner un encabezado o ttulo a nuestra pgina web, para ello escribimos nuestro
texto en la pgina en blanco de nuestra ventana de Dreamweaver.
El funcionamiento es muy similar al del Word que todos conocemos, elegimos el tipo de fuente, el
tamao y la alineacin, escribimos el ttulo y pulsamos intro para saltar de lnea, y volvemos a
configurar, ahora elegimos un tamao menor de texto o otro tipo de letra, a los amantes del diseo
grfico deben saber, que las fuentes que nosotros utilicemos en nuestra pgina web, no las podrn
ver a no ser que las tengan instaladas en su pc, por lo que no es recomendable usar tipos de letras
"raros" es mucho mejor limitarse a las que vienen por defecto, ya que as no har efectos raros en los
navegadores de aquellas personas que no las tienen instaladas. Ahora escribimos el texto de nuestra
pgina web.
Cuando ya hayamos escrito todo nuestro texto, ser muy til, comprobar que todo est correcto y no
tenga ninguna falta de ortografa, para ello, nos vamos a Texto > Ortografa y desde ah corregimos
las posibles errores que pudiera contener nuestro texto.
Ahora solo queda guardarla en tu disco duro, para ello nos vamos a Archivo > Guardar como y
buscamos la carpeta de nuestro Sitio para guardarlo, echo esto, vamos ha hacer una previsualizacin
de nuestra pgina para ver que tal se ve en nuestro navegador, para ello vamos a Archivo > Vista
previa en el navegador y seleccionamos el navegador en el que queremos visualizar nuestra pgina,
o bien pulsamos F12 y se visualizar en el navegador que tengamos por defecto.

Sistema de
Gestin de la
Calidad
11/03/11
TALLER PRCTICO EVALUATIVO

ESTRUCTURA REPETITIVA WHILE
SE REQUIERE DISEAR EL PROYECTO Y ESCRIBIR EL CDIGO EN LENGUAJE C++
CORRESPONDIENTE AL EL PROGRAMA QUE CALCULE Y MUESTRE
EN LA PANTALLA LA
SIGUIENTE SERIE:
1/10, 2/9, 3/8, 4/7, 5/6, 6/5, 7/4, 8/3, 9/2, 10/1 (cdigo veces)
5, 6, 8, 11, 15, 20, 26, 33, 41, 50 (cdigo veces)
2, 6, 6, 12, 10, 18, 14, 24, 18, (cdigo veces)
10, 9, 7, 4, 0, -5, -11, -18, -26, -35 (cdigo veces)
1, -2, 3, -4, 5, -6, 7, -8, 9, -10 (cdigo veces)
1, 2, 4, 8, 16, 32, 64, 128, 256 (cdigo veces)
ESCRIBIR EL PROGRAMA QUE LEE 10 NMERO DISTINTOS DESDE EL TECLADO Y ME INDICA CUAL
FUE EL MAYOR VALOR DIGITADO
PROGRAMA QUE CALCULE Y MUESTRE EN LA PANTALLA EL VALOR DEL FACTORIAL DE UN
NMERO DIGITADO DESDE TECLADO
ELABORAR EL PROGRAMA QUE LEA 7 NUMEROS DESDE EL TECLADO Y CALCULA LA MEDIA
ARITMTICA (PROMEDIO) DE LOS NUMEROS IMPARES, Y EL PRODUCTO DE TODOS LOS NMEROS
PARES
PROGRAMA QUE GENERA LOS 10 PRIMERO TRMINOS DE LA SERIE DE FIBONNACI: 0, 1, 1, 2, 3, 5,
8, 13, 21, 34 (cdigo veces)
DISEAR EL PROGRAMA QUE LEE DESDE EL TECLADO CUALQUIER NMERO ENTERO POSITIVO
MENOR DE 1000 Y LUEGO CALCULA Y MUESTRA EN LA PANTALLA CUANTOS DGITOS TIENE.
QUE LEE UN NMERO DEL TECLADO E IMPRIME SI ES PRIMO O NO (ENTERO MAYOR QUE CERO,
QUE TIENE SOLO DOS DIVISORES POSITIVOS)
PROGRAMA QUE LEE UN NMERO DEL TECLADO E IMPRIME SI ES CAPICA (LEIDO DGITO A
DGITO DE DERECHA A IZQUIERDA A ES IGUAL)

Sistema de
Gestin de la
Calidad
11/03/11
EJEMPLOS PROCESOS REPETITIVOS

SE REQUIERE DISEAR EL PROYECTO Y ESCRIBIR EL CDIGO EN LENGUAJE C++
CORRESPONDIENTE AL EL PROGRAMA QUE CALCULE Y MUESTRE
EN LA PANTALLA LA
SIGUIENTE SERIE:
//PROGRAMA QUE IMPRIME LA SERIE
// 0,1,3,6,10,15,21,28,36
int main()
{
int cont(0);
int termino;
termino=0;
while (cont <=10)
{
termino= termino + cont;
cout<<termino<<endl;
cont++;
}
return 0;
}
//PROGRAMA QUE IMPRIME

//LA SERIE 5,6,8,11,15 (cdigo veces)
int main()
{
int cont(0);
int termino, cod;
termino=5;
cout<<"digite su codigo";
cin>>cod;
while (cont <= cod)
{
termino= termino + cont;
cont++;
}
return 0;
}
//PROGRAMA QUE IMPRIME LA SERIE

//10,9,7,4,0,-5,-11,-18,-26,-35(CDIGO
VECES)
int main()
{
int cont(0);
int termino, cod;
termino=10;
cin>>cod;
while (cont <= cod)
{
termino= termino - cont;
cont++;
}
return 0;
}
//PROGRAMA QUE IMPRIME LA
SERIE //1,2,4,8,16,32,64,128,256(CDIGO
VECES)
int main()
{
int cont(0);
int termino, cod;
termino=1;
cin>>cod;
while (cont <= cod)
{
termino= termino * 2;
cont++;
}
return 0;
}

Sistema de
Gestin de la
Calidad
11/03/11
DEFINICIN DE LA ESTRUCTURA DEL SITIO

Creacin del sitio
Se refiere al proceso de identificar la forma (apariencia) y la organizacin lgica que tendr el Sitio Web
que se est desarrollando. En este sentido es importante hacer una diferencia entre estructura y diseo.
Estructura: Se refiere a la forma que tendr el Sitio Web en trminos generales con sus
secciones, funcionalidades y sistemas de navegacin. No considera ni incluye elementos grficos
(logotipos, vietas, etc.). Cuando hablamos de la estructura nos estamos refiriendo a cul ser la
experiencia que tendr un usuario cuando accede al sitio. De esta manera podremos
determinar dnde estarn ubicados los servicios (buscador, sistemas de encuestas, reas de
contenidos).
Diseo: Se refiere a la solucin grfica que se crear para el sitio, en la cual aparecen
colores, logotipos, vietas, y otros elementos de diseo que permiten identificar visualmente al
sitio.
Mapas Permanentes del Sitio
Se refiere al proceso de crear un rbol de contenido en el que se muestre de manera prctica cuntas
secciones tendr el sitio en desarrollo y cuntos niveles habr dentro de cada uno.
Cuando se usa la idea de crear un rbol, se refiere exactamente a generar un diagrama que cuente con un
tronco, ramas y hojas, para mostrar las zonas principales, secundarias y contenidos finales que se irn
incorporando.
En este sentido se debe evitar a toda costa que el rbol de contenidos represente la estructura de la
organizacin, dado que sta es conocida y comprendida internamente, pero constituye una barrera de
entrada para usuarios externos.
Si ellos llegan a buscar en una estructura de contenidos basada en la forma en que funciona la
organizacin, primero debern comprender cmo funciona la entidad para luego encontrar lo que les
interesa.
En este sentido se sugiere el uso de dos tipos de
rboles:
Figura 1: rbol Organizacional: agrupa los
contenidos de la manera como se organiza la
institucin, pero no basado en su estructura de
funcionamiento, sino en su lgica de actividad.

Sistema de
Gestin de la
Calidad
11/03/11
Figura 2: rbol Funcional, agrupa los contenidos de acuerdo a las tareas que se puedan realizar dentro del
sitio.
Dado lo anterior, las recomendaciones para la generacin de este rbol son las siguientes:
Secciones: Se debe intentar que sean las menos
posibles, con el fin de concentrar las acciones del
usuario en pocas reas; cada una de las reas a
integrar requerir de mantenimiento posterior.
Niveles: Se debe intentar que el usuario est
siempre a menos de tres clics del contenido que
busca.
Contenidos relacionados:
Se debe considerar que habr funcionalidades que
estn presentes en todo el sitio. Entre ellas se
incluyen elementos como Buscador, Preguntas Frecuentes y Formularios de Contacto. Se recomienda que
este tipo de elementos quede fuera del rbol y floten sobre ste, con el fin de indicar que desde todas las
pginas habr enlaces a ellos.
DEFINICIN DE LOS SISTEMAS DE NAVEGACIN
En la generacin de dichos sistemas se debe atender a dos elementos que sern muy importantes:
Textual: Se refiere a que la navegacin se har a travs de elementos concretos, tales como mens,
guas, botones y otros elementos que deben ser claramente distinguibles dentro de la interfaz. Para
generarlos se debe conseguir que cada uno de ellos represente claramente la funcin para la que fueron
designados y no dejar lugar a dudas sobre su funcin ni sobre la accin que desarrollarn al ser usados.
Es decir, un botn debe parecer tal y no slo un parche de color sobre la pantalla. Adicionalmente, es muy
importante que las palabras escogidas para indicar acciones, sean claras y precisas. En este sentido, si un
botn necesita ser explicado, es mejor desecharlo y buscar otra solucin.
Contextual: Es todo lo referido a cmo se presenta la informacin, utilizando para ellos elementos
basados en texto, grficos o bien de entorno. Los elementos relevantes en este caso, sern todos aquellos
que permiten mostrar la navegacin en la pantalla. Entre ellos, la grfica utilizada, la redaccin de los
textos que se muestran e incluso el nombre del dominio (URL) que permitir que el usuario sienta que est
en el lugar indicado.
Caractersticas de los Sistemas de Navegacin
Al generar el sistema de navegacin, se deben tener en cuenta las siguientes caractersticas:
Consistente: El sistema debe ser similar en todo el sitio, en lo referido a su ubicacin y disposicin en las
pginas. Esto se aplica tambin a aquellas instituciones que pueden tener ms de un Sitio Web.
Uniforme: El sistema debe utilizar similares trminos con el fin de que el usuario que lo vea en las
pginas, confe en que sus opciones llevan siempre hacia los mismos lugares dentro del sitio.
Visible: El sistema debe distinguirse claramente dentro del sitio, con el fin de que el usuario cuente con
l, como si se tratara de una gua permanente en el rea en que se encuentre del sitio.

Sistema de
Gestin de la
Calidad
11/03/11
Se debe tener en cuenta que los buscadores de Internet tienen la capacidad de indexar e incluir en sus
bases de datos, cualquier pgina del sitio, an las ms internas.
Por ello, es de suma importancia que todas las pginas del sitio cuenten con el sistema de navegacin, de
esta manera, si un usuario accede al sitio por una pgina interior (que estaba indexada en un buscador),
siempre contar con las herramientas adecuadas para ir a la portada o realizar cualquier otra accin que le
interese.
Recorrido visual
Existen estudios que han demostrado que la vista del usuario de Internet promedio suele
desplazarse por las pginas en "zigzag", comenzando en la esquina superior izquierda y
movindose hacia la esquina inferior derecha.
El rea que corresponde a la mitad superior de la pgina es un sitio especialmente estratgico
para colocar informacin.
ESTRUCTURACIN DE UN SITIO WEB

Elementos estndar
Algunos elementos se encuentran en casi todos los sitios web:
El logotipo del sitio web, ubicado en la esquina superior izquierda. Al hacer clic en este logotipo el
visitante es dirigido directamente a la pgina de inicio del sitio web.
Un vnculo a la pgina de inicio, que siempre se encuentra en cada pgina del sitio.
En todas las pginas pueden hallarse elementos de navegacin que permitan a los usuarios saber
en qu parte del sitio web se encuentran y volver fcilmente a la seccin principal.
Elementos de navegacin

Sistema de
Gestin de la
Calidad
11/03/11
Son herramientas que ayudan al visitante a saber dnde se encuentra dentro del sitio web, a
volver y a desplazarse entre las secciones. Existen varios mtodos para configurar los elementos
de navegacin:
Rastro de migas de pan (breadcrums)

Navegacin por pestaas
Mapa del sitio
Rastro de migas de pan (breadcrumbs)

Un rastro de migas de pan es una herramienta de navegacin constituida por una serie de
vnculos jerrquicos. Un rastro de migas de pan representa la ruta de navegacin y permite a los
usuarios:
Saber en qu parte del sitio web se encuentran,

Regresar a las secciones principales fcilmente.
Un rastro de migas de pan se presenta en el siguiente orden:

Pgina de inicio > Webmastering > Navegacin.
Un rastro de migas de pan incluye los siguientes elementos:
Vnculos separados por el carcter ">" que simboliza la idea de jerarqua.
El ltimo vnculo aparece en negrita y no puede hacerse clic sobre l. Este vnculo representa la
pgina en la que el visitante se encuentra.
El trmino "rastro de migas de pan" refiere al cuento de los hermanos Grimm, "Hansel y Gretel",
que narra la historia de dos nios que se pierden en un bosque y que van dejando caer pedacitos
de pan detrs de ellos para poder encontrar el camino de regreso.
La traduccin del trmino francs equivalente sera "la cuerda de Ariadna", que refiere a la
mitologa griega. En el mito, Ariadna entrega a su amor, Teseo, un cordel antes de que se
aventure en el laberinto para matar al Minotauro. Al desenrollar y luego volver a enrollar el
cordel, Teseo logra salir del laberinto.
Navegacin por pestaas
Las pestaas son herramientas de navegacin muy tiles que ayudan a los visitantes a
distinguir las secciones de un sitio web y a moverse de una seccin a otra. Tambin pueden
usarse cdigos de colores como una manera de reforzar las diferencias entre las secciones.
Mapa del sitio

El mapa del sitio proporciona a los usuarios de Internet una vista global del sitio web. Adems,
un cartel de "usted est aqu" puede ayudar a los usuarios a saber dnde se encuentran dentro
del sitio web.
Flechas de navegacin
Las flechas de navegacin (siguiente, anterior, regresar al captulo, regresar a la pgina de
inicio) son herramientas de navegacin intuitivas para el usuario.

Sistema de
Gestin de la
Calidad
11/03/11
ESTRUCTURA DE UNA PGINA WEB

Cuando ingrese el dominio establecido para el Sitio Web en el navegador, ver una pgina con una
estructura bsica similar a la siguiente.
1.
Ttulo del Sitio Web: Es el ttulo principal del Sitio Web, editable en la Informacin bsica.
Opcionalmente puede mostrarse aqu una imagen cargada como logotipo.
2.
Vnculos cabecera: Son vnculos de acceso a las pginas del Sitio Web, que van marcadas como
vnculo de cabecera, en el sector Mapa del Sitio.
3.
Buscador (opcional): Es la vista en cabecera del formulario de bsqueda, activado en el sector
Recurso Buscador.
4.
Botonera principal: Son vnculos de acceso a las pginas del Sitio Web, que van marcadas como
de acceso predeterminado en el sector Mapa del Sitio , y adems son del primer nivel jerrquico de
dicho mapa.
5.
Rastro: Son vnculos anidados, que conforman el camino jerrquico de la pgina abierta. Existen
algunos diseos que no incorporan este parte de su estructura.
6.
Botonera secundaria: Son vnculos de acceso a las pginas del Sitio Web, contenidas en la pgina
de primer nivel activa.
7.
Ttulo de pgina: Es el ttulo de la pgina abierta, principalmente si se usan frames.
8.
Subttulo de pgina: Es el subttulo de la pgina abierta, generalmente si se usan capas.
9.
Contenido de pgina: Es el contenido de la pgina abierta, es el cuerpo de la pgina con la
informacin a mostrar.
10.
Vnculos de pie: Son vnculos de acceso a las pginas del Sitio Web, que han marcadas como
vnculo de pie, generalmente se incluyen aqu el Copyright, la declaracin de privacidad, etc.

Sistema de
Gestin de la
Calidad
11/03/11
//PROGRAMA QUE LLE 10 NUMEROS E INDICA EL MAYOR Y EL MENOR

int main()
{int numero, mayor(0), menor(1000), cont(1);
while (cont <= 10)
{
cout<< "Digite un nmero "<<endl;
cin>>numero;
if (numero > mayor )
{mayor=numero;}
if (numero < menor )
{menor=numero;}
cont++;
}
cout<<"El mayor es "<<mayor<<endl;
cout<<"El menor es "<<menor<<endl;
return 0;}
//PROGRAMA QUE LEA 7 NUMEROS DESDE EL TECLADO Y CALCULA LA MEDIA ARITMTICA

int main()
{
int suma(0), cont(0), numero ;
float promedio;
while (cont < 3)
{
cout<< "Digite un nmero "<<endl;
cin>>numero;
suma += numero;
cont ++;
}
promedio=suma/cont;
cout<< "El promedio es "<<promedio<<endl;
return 0;
}

Sistema de
Gestin de la
Calidad
11/03/11
TALLER DE PROGRAMACIN
Diseo de un sitio web esttico en HTML empleando las herramientas bsicas de Dreamweaver
Elabore un sitio web titulado EL COCINERITO WEB en el que se haga uso de colores textos e
imgenes que hagan de su pgina el sitio un catlogo de la oferta gastronmica de un
restaurante.
PROCEDIMIENTO
1 Escoja en qu lugar de su computador creara el sitio Web (para el taller en:
C:\wamp\www\cocinerito).
2 Cree las carpetas necesarias en el lugar escogido (imgenes, htmldocs, mmedios, downloads).
3. Coloque los archivos necesarios en las carpetas correspondientes (segn el tipo seleccione
imgenes y sonidos tiles).
4 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
5 Haz clic sobre el ICONO Sitio de DreamWeaver.
6 Digita el nombre del sitio y SIGUIENTE> hasta finalizar en COMPLETADO.
7 En Nombre del sitio escribe Cocinerito.
8 En Carpeta www busca la carpeta cocinerito y seleccinala. Puedes hacerlo a travs del botn
con forma de carpeta.
9 Comience a editar la pgina principal de su sitio.
10 Incorpore o edite elementos en la pgina Web ; fondo, Cabezote, men (texto, enlaces,
imgenes, tablas, etc.).
6. Guarde el archivo a menudo.
7. Pruebe la pgina en el navegador Web (F12).
8. Repita pasos del 4 al 7 para crear otra pgina de su sitio.
9 Edite todos los elementos que desee de su pgina.
10 Aada enlaces a: otra pgina de su sitio Web, una pgina externa, a un documento PDF,
Word, Excel
11 Inserte una imagen (encontrada en la carpeta imgenes)
***Intente colocar datos verdaderos en su pgina y luego se la sustenta al docente.

Sistema de
Gestin de la
Calidad
11/03/11
TALLER DE PROGRAMACIN
Diseo de un sitio web esttico en HTML empleando las herramientas bsicas de Dreamweaver.
Elabore un sitio web titulado SIMULANOMBRE, donde nombre es depende de quin lo realiza (su
nombre)
El proyecto debe ser un sitio web (hosteado) en la carpeta WWW de la carpeta wamp, con una
pgina de bienvenida llamada index.html.
La pgina de bienvenida debe indicar el nombre del proyecto (simulador prueba SABER ICFES).
Adems debe informar acerca de sus creadores en una pgina quienes somos.
El contenido del proyecto se debe mostrar con un diseo agradable que le permita al usuario
elegir las diferentes opciones que ofrece el simulador.
Estas opciones deben mostrarse simultneamente y con una imagen que la represente (icono)
preferiblemente.
Cada opcin debe llevar al usuario hasta la pgina que le ofrece ese contenido permitindole
regresar al men de las opciones si cambia de opinin.
Al ingresar a una opcin encontrar un men correspondiente a ese contenido o tema
(contextual) y botones de navegacin adelante y atrs para desplazarse dentro de los captulos o
niveles de ese tema.
Las opciones o temas son las siguientes:
CONTENIDOS DE MATEMTICAS
CONTENIDOS DE INGLS
CONTENIDOS DE FISICA
CONTENIDOS DE QUIMICA
CONTENIDOS DE LENGUA CASTELLANA
Cada captulo contendr una introduccin o repaso y una pregunta interactiva que evale
conceptos especficos de esa rea del conocimiento, Evaluacin que se retomar en clases
posteriores.
Las evaluaciones interactivas pueden emplear cualquiera de las herramientas que ofrece tanto
HTML, como JavaScript y se desarrollarn en clase, sin quitar la posibilidad de permitir al
estudiante investigar e incluir cualquier otra alternativa que desee.
EL MAPA DE NAVEGACIN SE PROPONE DE LA SIGUIENTE MANERA:

Sistema de
Gestin de la
Calidad
11/03/11
Index.html
Quienes Somos
Fsica
Introduccin
Prueba
Qumica
Introduccin
Prueba
Matemticas
Introduccin
Prueba
Ingls
Introduccin
Prueba
Espaol
Introduccin
Prueba

Sistema de
Gestin de la
Calidad
11/03/11
USO DE MARCOS EN DISEO DE PGINAS WEB

EJERCICIO
Elaborar la pgina web EL COCINERITO WEB
puedes ver en la imagen, aparece una lnea que
en un sitio creado con tu nombre Hosteado en divide el documento en dos.
la carpeta www del servidor wamp
Esta pgina se dividir en Dos Marcos;
Ahora nos pregunta los NAME, nombres que les
Buscaremos en la galera CREAR A PARTIR DE
vamos a poner a nuestros marcos
MUESTRAS
Mainframe=contenido y Leftframe=Men
la opcin Conjuntos de marcos
En el cuadro de dilogo NUEVO DOCUMENTO
En este caso NECESITAMOS (3) tres documentos
empleamos la lista de conjuntos de marcos y
HTML:
(estos los debes crear mediante la
elegimos Izquierdo Fijo
opcin guardar marco)
La pgina principal es la pgina de marcos y
El de la izquierda (el que va dentro del marco de
debera llamarse index.html
la izquierda), Men
En el marco de la izquierda se colocar una
El de la derecha (el que va dentro del marco de
tabla de 4 celdas.
la derecha), principal
La celda superior dir MEN y las otras 3 celdas
tendrn botones flash
El conjunto de marcos, que debera ser
Estos botones se agregan empleando el men index.htm (se guarda haciendo clic en la rayita
insertar MEDIA Botn flash
de divisin guardar conjunto de marcos)
Los tres 3 botones FLASH tendrn como texto
El de la derecha es el documento que tenamos
Desayunos, Almuerzos y Cenas
inicialmente, que est en el marco conocido
Cada botn FLASH llamar una pgina html
como MainFrame.
NUEVA
Para seleccionar el documento que contiene el
que tendrs que crear en color y con un letrero grupo de marcos hay que pulsar sobre la lnea
grande.
que separa los marcos.
Esas pginas se abrirn en una nueva ventana
al hacer clic en el botn correspondiente
empleando destino _blank
La pgina de los botones FLASH debera
guardarse como men.htm
La pgina del mantel con el letrero del
COCINERITO WEB debera llamarse
principal.htm
Y la pgina de desayunos DESAYUNOS.HTM, la
de almuerzos ALMUERZOS.HTM, la de cenas
CENAS.HTM
PROCEDIMIENTO
Abra DREAMWEAVER y cree un sitio con su
nombre
Y una pgina nueva eligiendo CREAR NUEVO HTML
En el marco de la izquierda se encuentra la

pgina MENU.HTML
Este debe contener una tabla de 4 filas por una
columna y en la primera fila se le escribe el
letrero MENU y las otras tres filas se emplean
para insertar sendos botones FLASH del tipo
SLIDER que es de color rojo y animado.
En el marco derecho escribimos EL COCINERITO

WEB en mayscula
En propiedades lo colocamos color VERDE y
tamao muy grande centrado, negrita y
cursiva.
En la pgina inserta una tabla de 4x4 buscando
el men INSERTAR-TABLA filas4 columnas 4
Ancho de tabla 100 Porcentaje GROSOR DEL
BORDE 0
clic en aceptar
Para crear los marcos en DREAMWEAVER,
Seleccionamos la tabla haciendo clic en el borde
ubicamos el men Insertar, HTML, Marcos.
(el puntero del ratn muestra la tablita) y
Vamos a emplear el marco a la Izquierda.
propiedades An 100% Al 90%
Pulsamos Izquierda se crear un nuevo marco Cambia el color a las celdas una blanca y una
a la izquierda del documento actual.Como
roja como un mantel haciendo clic en la celda y
abajo en las propiedades FND rojo

Sistema de
Gestin de la
Calidad
11/03/11
Estos botones tienen como texto DESAYUNOS, ALMUERZOS Y CENAS y tienen como vnculo las
pginas DESAYUNOS. HTML ALMUERZOS.HTML Y CENAS.HTML en un destino _blank que me los
abrir en una ventana nueva.
Estas pginas destinos se pueden crear dando clic derecho en el men ARCHIVO-NUEVO PGINA BSICA -HTML
Le aplicas un color de fondo diferente a cada pgina haciendo clic en el botn PROPIEDADES DE
PGINA del PANEL DE PROPIEDADES en la parte inferior en la opcin COLOR DE FONDO.
GUARDAR LOS MARCOS
Todos los documentos que contienen marcos tienen que tener una pgina en cada uno de ellos.
Estas pginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya
veremos ms adelante.
Es necesario guardar la pgina que contiene el grupo de marcos, as como cada una de las
pginas que estn incluidas en sus marcos.
No es conveniente guardar la primera vez los marcos con la opcin Guardar todo, ya que
podemos equivocarnos al dar los nombres a los nuevos documentos.
Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente.
Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos
antes de pulsar sobre Guardar marco.

Sistema de
Gestin de la
Calidad
11/03/11
Ejercicio 1
Determinar el cdigo HTML necesario para crear la tabla que se muestra en la siguiente imagen:
FACTURA EN LINEA
<table>
<tr>
<th scope="col">Nombre producto</th>
<th scope="col">Precio unitario</th>
<th scope="col">Unidades</th>
<th scope="col">Subtotal</th>
</tr>
<tr>
<td>Reproductor MP3 (80 GB)</td>
<td>192.02</td>
<td>1</td>
<td>192.02</td>
</tr>
<tr>
<td>Fundas de colores</td>
<td>2.50</td>
<td>5</td>
<td>12.50</td>
</tr>
<tr>
<td>Reproductor de radio & control
remoto</td>
<td>12.99</td>
<td>1</td>
<td>12.99</td>
</tr>
<tr>
<th scope="row">TOTAL</th>
<td>-</td>
<td>7</td>
<td><strong>207.51</strong></td>
</tr>
</table>

Sistema de
Gestin de la
Calidad
11/03/11
Ejercicio 2
Determinar el cdigo HTML necesario para crear la tabla que se muestra en la siguiente imagen.
CATALOGO DE PRODUCTOS TIENDA ONLINE
Utilizar las celdas de cabecera donde sea necesario y aadir todos los atributos posibles.
Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas para
formar una columna ancha o une varias filas para formar una fila ms alta que las dems. Para
fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.

Sistema de
Gestin de la
Calidad
11/03/11
La siguiente imagen muestra una tabla compleja que ha fusionado dos columnas simples para
formar una columna ms ancha:
Para obtener una tabla como la de la imagen anterior, se debe utilizar el siguiente cdigo:
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
La primera fila de la tabla est formada slo por una columna, mientras que la segunda fila est
formada por dos columnas. En principio, podra pensarse en utilizar el siguiente
cdigo HTML para definir la tabla:
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
Sin embargo, si se utiliza el cdigo anterior, el navegador visualiza de forma incorrecta la tabla,
ya que las tablas en HTML deben disponer de una estructura regular. En otras palabras, todas las
filas de una tabla HTML deben tener el mismo nmero de columnas. Por lo tanto, si se quieren
mostrar menos columnas en una fila, se fusionan mediante el atributo colspan, que indica el
nmero de columnas simples que va a ocupar una determinada celda.
En el ejemplo anterior, la celda de la primera fila debe ocupar el espacio de dos columnas
simples, por lo que el cdigo HTML debe ser <td colspan="2">A</td>.

Sistema de
Gestin de la
Calidad
11/03/11
De forma equivalente, si se quiere disear una tabla HTML que fusiona filas como la de la
siguiente imagen:
El cdigo HTML que se debe utilizar para obtener la tabla de la imagen anterior es:
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
De forma anloga a la fusin de columnas del ejemplo anterior, la fusin de filas debe indicarse
de forma especial. Como las tablas HTML tienen que ser regulares, todas las columnas deben
tener el mismo nmero de filas. As, si en el ejemplo anterior se utilizara el siguiente cdigo:
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
La tabla anterior no se visualizara correctamente. Como la segunda columna de la tabla ocupa
el espacio de las dos filas, el cdigo HTML debe indicar claramente que esa celda va a ocupar
dos filas, de manera que todas las columnas de la tabla cuenten con el mismo nmero de filas.
Utilizando los atributos rowspan y colspan, es posible disear tablas tan complejas como las
que se muestran en los siguientes ejemplos.

Sistema de
Gestin de la
Calidad
11/03/11
Ejemplo de fusin de mltiples columnas:
El cdigo HTML necesario para fusionar las columnas de la tabla anterior se muestra a
continuacin:
<table>
<tr>
<td colspan="3">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td colspan="2">D</td>
<td>E</td>
</tr>
<tr>
<td colspan="4">F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
</table>

Sistema de
Gestin de la
Calidad
11/03/11
Ejemplo de fusin de mltiples filas:
El cdigo HTML necesario para fusionar las filas de la tabla anterior se muestra a continuacin:
<table>
<tr>
<td>A</td>
<td>B</td>
<td rowspan="3">C</td>
<td>D</td>
</tr>
<tr>
<td rowspan="2">E</td>
<td>F</td>
<td rowspan="3">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
</tr>
</table>

Sistema de
Gestin de la
Calidad
11/03/11

Sistema de
Gestin de la
Calidad
11/03/11
Formularios.
Son muy utilizados para realizar bsquedas o bien para introducir datos. Los datos que el
usuario introduce en estos campos son enviados al servidor del administrador o bien a
un programa que se encarga de procesarlo automticamente.
Usando HTML podemos nicamente enviar el formulario a un correo electrnico.
Si queremos procesar el formulario mediante un programa la cosa puede resultar un
poco ms compleja ya que tendremos que emplear otros lenguajes ms sofisticados.
Formularios bsicos.

Sistema de
Gestin de la
Calidad
11/03/11
La mayora de formularios utilizan slo los atributos action y method.

El atributo action indica la URL de la aplicacin del servidor que se encarga de procesar
los datos introducidos por los usuarios. Esta aplicacin tambin se encarga de generar la
respuesta que muestra el navegador.
El atributo method establece la forma en la que se envan los datos del formulario al
servidor. Este atributo hace referencia al mtodo HTTP, por lo que no es algo propio de
HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma,
casi todos los formularios incluyen el atributo method="get" o el atributo
method="post".
Elementos de los formularios.
Los elementos de formulario como botones y cuadros de texto tambin se
denominan "campos de formulario" y "controles de formulario".
A continuacin se muestran ejemplos para utilizar los controles que se pueden crear con
la etiqueta

Sistema de
Gestin de la
Calidad
11/03/11
Cuadro te texto.
Se trata del elemento ms utilizado en los formularios. En el caso ms sencillo se
muestra un cuadro vacio en el cual el usuario puede escribir cualquier texto.
Y el cdigo necesario para este cuadro es:

En este cdigo solo mostraremos solo lo que nos interesa que es la parte del formulario.
Para los cuadros de texto, su valor es text. El atributo name es el ms importante en los
campos del formulario. De hecho, si un campo no incluye el atributo name, sus datos no
se envan al servidor.
El valor que se indica en el atributo name es el nombre que utiliza la aplicacin del
servidor para obtener el valor de este campo de formulario.
El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si se crea
un formulario para insertar datos, los cuadros de texto deberan estar vacos. Por lo
tanto, o no se aade el atributo value o se incluye con un valor vaco value="".
Si por el contrario se crea un formulario para modificar datos, lo lgico es que se
muestren inicialmente los datos guardados en el sistema. En este caso, el atributo value
incluir el valor que se desea mostrar:
Cuadro de contrasea
La nica diferencia entre este control y el cuadro de texto normal es que el texto que el
usuario escribe en un cuadro de contrasea no se ve en la pantalla. En su lugar,
los navegadores ocultan el texto utilizando asteriscos o crculos, por lo que es ideal para
escribir contraseas y otros datos sensibles.
Y el cdigo necesario seria:
Checkbox
Los checkbox o "casillas de verificacin" son controles de formulario que permiten al
usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se

Sistema de
Gestin de la
Calidad
11/03/11
muestran varios checkbox juntos, cada uno de ellos es completamente independiente

del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias
opciones relacionadas pero no excluyentes.
Y para este ejemplo el cdigo es:
El valor del atributo type para estos controles de formulario es checkbox. Como
se muestra en el ejemplo anterior, el texto que se encuentra al lado de
cada checkbox no se puede establecer mediante ningn atributo, por lo que es necesario
aadirlo manualmente fuera del control del formulario.
El valor del atributo value, junto con el valor del atributo name, es la informacin que
llega alservidor cuando el usuario enva el formulario.
Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo
checked. Si el valor del atributo es checked, el checkbox se muestra seleccionado. En
cualquier otro caso, el checkbox permanece sin seleccionar. Aunque resulta redundante
que el nombre y el valor del atributo sean idnticos, es obligatorio indicarlo de esta
forma porque los atributos en XHTML no pueden tener valores vacos:
Radiobutton
Los controles de tipo radiobutton son similares a los controles de tipo checkbox, solo con
la diferencia de que este en este tipo de control solo se puede elegir una sola opcin de
varias, as cuando seleccionas una opcin la otra de deselecciona automticamente.
El cdigo necesario para el ejemplo es:
El valor del atributo type para estos controles de formulario es radio. El atributo name se
emplea para indicar los radiobutton que estn relacionados. Por lo tanto, cuando
varios radiobutton tienen el mismo valor en su atributo name, el navegador sabe que
estn relacionados y puede deseleccionar una opcin del grupo de radiobutton cuando
se seleccione otra opcin.

Sistema de
Gestin de la
Calidad
11/03/11
Botn de envo de formulario

La mayora de los formularios cuentan con un botn para enva los datos introducidos
por el usuario:
El valor del atributo type para este control de formulario es submit. El navegador se
encarga de enviar automticamente los datos cuando el usuario pincha sobre este tipo
de botn. El valor del atributo value es el texto que muestra el botn. Si no se establece
el atributo value, el navegador muestra el texto predefinido Enviar consulta.
Botn de reseteo del formulario
El valor del atributo type para este control de formulario es reset. Cuando el usuario
pulsa este botn, el navegador borra toda la informacin introducida y muestra el
formulario en su estado original. Ficheros adjuntos.

Fichero adjunto
El valor del atributo type para este control de formulario es file. El navegador se encarga
de mostrar un cuadro de texto donde aparece el nombre delarchivo seleccionado y un
botn que permite navegar por los directorios y archivos del ordenador del usuario.
Campos ocultos
Los campos ocultos se emplean para aadir informacin oculta en el formulario:

Sistema de
Gestin de la
Calidad
11/03/11
El valor del atributo type para este control de formulario es hidden. Los campos ocultos
no se muestran por pantalla, de forma que el usuario desconoce que el formulario los
incluye.
Normalmente los campos ocultos se utilizan para incluir informacin que necesita el
servidor pero que no es necesario o no es posible que la establezca el usuario.

Sistema de
Gestin de la
Calidad
11/03/11

Sistema de
Gestin de la
Calidad
11/03/11
CREAR EL FORMULARIO
Para crear un formulario en Dreamweaver, tenemos que insertarlo desde [Insertar >
Formulario > Formulario], o bin, hacerlo desde la barra de herramientas rpida que incluye
el editor:
Y veremos las siguientes opciones para crear diferentes tipos de campos. Con ellas, creamos un
Formulario, los campos de texto, y al final un botn de envo.
Tendremos algo como lo siguiente:
Identificar los componentes del formulario

Tendremos que darle una identidad a cada componente del formulario, para ello haremos clic
sobre el campo y en el apartado Propiedades le pondremos el nombre y otras configuraciones si
son necesarias.

Sistema de
Gestin de la
Calidad
11/03/11
Validando el formulario
Para validar es necesario contar con la ventana Inspector de etiquetas. Si no la tenemos
visible a la derecha, tendremos que agregarla yendo a [Ventana > Inspector de etiquetas].
Luego, dentro del formulario, seleccionamos el botn Enviar, vamos a la ventana Inspector de
etiquetas, y dentro de la solapa Comportamientos daremos clic sobre el signo +. All
elegimosValidar formulario.
Especificaremos en cada uno de los componentes del formulario lo qu es aceptado dentro del
mismo:
Valor
Obligatorio: con esta opcin el campo debe tener un valor, no puede quedar vaco.
Aceptar
Cualquier cosa: acepta todos los caracteres.
Direccin de correo electrnico: slo direccin de email, el script chequea que el email sea
escrito correctamente.
Nmero: slo nmeros.
Nmero del... al...: slo nmeros entre un inicio y un fin, ideal para fechas.
Dando clic en Aceptar ya tendremos el formulario validado.

Sistema de
Gestin de la
Calidad
11/03/11
ELABORAR UNA GALERA DE FOTOS EMPLEANDO EL COMPORTAMIENTO DE JAVASCRIPT

INTERCAMBIAR IMAGEN

Sistema de
Gestin de la
Calidad
11/03/11
CREACION Y VALIDACION DE FORMULARIOS CON DREAMWEAVER

1. Crea un NUEVO sitio de Dreamweaver llamado NOMBRE. Sin tecnologa servidor y en la particin
D del disco duro.
2. Crea un NUEVO archivo HTM, una pgina en blanco para disear el formulario desde cero.
3. Emplea las indicaciones de diseo que se muestran en la MAQUETACIN.
4. Busca en la barra de men y elige INSERTAR formulario. Asegrate de insertar los objetos dentro de
l.
5. En el mismo men INSERTAR busca TABLA y define el nmero de filas y columnas que prefieras para
tu tabla.
6. En el submen FORMULARIO encontrars los objetos necesarios para crear los campos de tu
formulario.
7. Insertando una a una y en orden elabora el formulario para que quede exactamente igual al
mostrado. Recuerda que las claves deben ser tipo contrasea y los botones deben tener value.
Registrar

Sistema de
Gestin de la
Calidad
11/03/11
JAVASCRIPT
JavaScript no es un lenguaje de programacin propiamente dicho. Es un lenguaje script u orientado a documento, como
pueden ser los lenguajes de macros que tienen muchos procesadores de texto. Nunca podrs hacer un programa con
JavaScript, tan slo podrs mejorar tu pgina Web con algunas cosas sencillas (revisin de formularios, efectos en la
barra de estado, etc...) y no tan sencillas (animaciones usando HTML dinmico, por ejemplo)
JavaScript y Java son dos cosas distintas. Principalmente porque Java s que es un lenguaje de programacin
completo. Lo nico que comparten es la misma sintaxis.
JavaScript es un lenguaje que se integra directamente en pginas HTML. Tiene como caractersticas principales las
siguientes:
Es interpretado (que no compilado) por el cliente.
Est basado en objetos. No es, como Java, un lenguaje de programacin orientada a objetos (OOP). JavaScript no
emplea clases ni herencia, tpicas de la OOP.
Su cdigo se integra en las pginas HTML, incluido en las propias pginas.
No es necesario declarar los tipos de variables que van a utilizarse (loose typing).
Las referencias a objetos se comprueban en tiempo de ejecucin, por lo tanto no se compila.
No puede escribir automticamente al disco duro.
La ventaja que presenta JavaScript sobre el HTML es que permite crear pginas ms dinmicas, lo que las hace ms
atractivas para el usuario. Ni que decir tiene que para utilizar y dominar el JavaScript es prerrequisito indispensable saber
HTML.
CMO INCLUIR JAVASCRIPT EN PGINAS DE HTML?
Existen tres formas principales:
1. La forma general es la que sigue:
<SCRIPT LANGUAGE="JavaScriptConVersin">
Sentencias de JavaScript ....
</SCRIPT>
Si slo se escribe LANGUAGE="JavaScript", la propia versin del Netscape Navigator escoge la versin de JavaScript
por defecto. Por ello, es conveniente incluir la versin deseada. Dentro de estas tags SCRIPT es donde se escribe en
JavaScript. Pueden ponerse cuantos se quieran a lo largo del documento y en cualquier lugar. Ahora bien, se recomienda
poner las funciones en el HEAD del documento. De este modo, una funcin est definida desde el principio del
documento, lo que asegura su existencia a la hora de ejecutarse en algn punto de la pgina. Esto evitar muchos
errores.
2. Si lo que se quiere es incluir un archivo de JavaScript en lugar de insertar las lneas de programa en la pgina HTML:
<SCRIPT SRC="Archivo. js ">
...
</SCRIPT>
Conviene tener en cuenta los navegadores que no soportan JavaScript. Un navegador que no acepta JavaScript no leer
lo que hay entre las tags SCRIPT.
LAS COMILLAS Y LOS APSTROFOS NO PUEDEN USARSE INDISTINTAMENTE.
Siempre, hay que emplear comillas (comillas dobles).
Pero si un comando que requiere comillas est incluido dentro de otro, las comillas se emplean en el comando exterior
(el comando incluyente), el comando incluido deber emplear apstrofos (comilla sencilla).
Ejemplo:
La funcin alert requiere comillas: alert("texto")
El evento OnClick tambin: OnClick="cdigo en JavaScript"
Si queremos abrir una ventana alert haciendo clic en un link, se escribir de la siguiente forma: OnClick="alert('texto')"

Sistema de
Gestin de la
Calidad
11/03/11
VALIDACION DE FORMULARIOS EN DREAMWEAVER PROGRAMANDO EN JAVASCRIPT

COMPRUEBA QUE EL VALOR INGRESADO EN DOS CAMPOS NO SEA EL MISMO
Creamos un sitio nuevo llamado TALLER con un archivo en HTM llamado index.htm
Insertamos un formulario al que le cambiaremos en NAME a
ejemplo.
Insertaremos dos campos de texto uno para el usuario y otro para
la Clave.
Al campo de texto del USUARIO le pondremos campo1
Al campo de texto de la CLAVE le pondremos campo2
Agregamos tambin un botn y le colocaremos de accin
NINGUNO
Escribimos el siguiente cdigo JAVASCRIPT en la cabecera HEAD de la pgina web, antes de
</head>
<script language="javascript">
function validar(form)
{
if(form.campo1.value == form.campo2.value)
{
alert("La contrasea no puede ser igual al nombre de usuario");
form.campo2.value = "";
form.campo2.focus();
return true;
}
}
</script>
Ahora hacemos clic en el botn y le asociamos + un comportamiento desde la ventana de
etiquetas
Elegimos el comportamiento Llamar JavaScript y le escribimos el nombre de la funcin y el
nombre del formulario como parmetro
validar(ejemplo) y probamos con F12
Variables
En Javascript, deben comenzar por una letra o un subrayado (_), pudiendo haber adems dgitos entre los
dems caracteres. No es necesario declarar una variable, pero cuando se hace es por medio de la palabra
reservada var. Una variable, cuando no es declarada, tiene siempre mbito global, mientras que en caso
contrario ser de mbito global si est definida fuera de una funcin, y local si est definida dentro:
var x;
// Accesible fuera y dentro de pruebas
y = 2;
function pruebas() {
var z;
// Accesible slo dentro de pruebas
w = 1;
}
Se pueden declarar varias variables en una misma sentencia separndolos por comas:
var x, y, z;
El tipo de datos de la variable ser aquel que tenga el valor que asignemos a la misma, a no ser que le
asignemos un objeto por medio del operador new. Por ejemplo, si escribimos
b = 200;
Es de esperar que la variable b tenga tipo numrico.

Sistema de
Gestin de la
Calidad
11/03/11
JavaScript dispone de los operadores aritmticos clsicos y algn que otro ms:
Descripcin
Smbolo Expresin de ejemplo Resultado del ejemplo
Multiplicacin
2*4
Divisin
5/2
2.5
Resto de una divisin entera %
5%2
Suma
2+2
Resta
7-2
Incremento
++
++2
Decremento
--
--2
Menos unario
-(2+4)
-6
Los operadores de incremento y decremento merecen una explicacin auxiliar. Se pueden colocar tanto antes
como despus de la expresin que deseemos modificar pero slo devuelven el valor modificado si estn
delante. Me explico.
a = 1;
b = ++a;
En este primer caso, a valdr 2 y b 2 tambin. Sin embargo:
a = 1;
b = a++;
Ahora, a sigue valiendo 2, pero b es ahora 1. Es decir, estos operadores modifican siempre a su operando,
pero si se colocan detrs del mismo se ejecutan despus de todas las dems operaciones.
Operadores de comparacin
Descripcin
Smbolo Expresin de ejemplo Resultado del ejemplo
Igualdad
==
2 == '2'
Verdadero
Desigualdad
!=
2 != 2
Falso
Igualdad estricta
===
2 === '2'
Falso
Desigualdad estricta !==
2 !== 2
Falso
Menor que
<
2<2
Falso
Mayor que
>
3>2
Verdadero
Menor o igual que
<=
2 <= 2
Verdadero
Mayor o igual que

>=
1 >= 2
Falso
La igualdad y desigualdad estricta son iguales a las normales pero hacen una comprobacin estricta de tipo.
Operadores lgicos
Descripcin Smbolo Expresin de ejemplo Resultado del ejemplo
Negacin
!(2 = 2)
Falso
&&
(2 = 2) && (2 >= 0)
Verdadero
||
(2 = 2) || (2 <> 2)
Verdadero
Operadores de asignacin
Normalmente los lenguajes tienen un nico operador de asignacin, que en JavaScript es el smbolo =. Pero
en este lenguaje, dicho operador se puede combinar con operadores aritmticos y lgicos
Operador Significado Operador Significado
x += y
x=x+y
x -= y
x=x-y
x /= y
x=x/y
x *= y
x=x*y
x%y
x=x%y

Sistema de
Gestin de la
Calidad
11/03/11
CREACION Y VALIDACION DE FORMULARIOS CON DREAMWEAVER

VALIDACION DEL FORMULARIO DE REGISTRO DE USUARIO
1. Inicia el programa macromedia

Dreamweaver
2. Crea un NUEVO archivo HTM, una pgina en blanco para disear el formulario desde cero
segn las indicaciones de diseo que se muestran en la gua.
3. Busca en la barra de men y elige INSERTAR formulario. Asegrate de insertar los objetos
dentro de l.
4. En el mismo men INSERTAR busca TABLA y define el nmero de filas y columnas que
prefieras para tu tabla.
5. En el submen FORMULARIO encontrars los objetos necesarios para crear los campos de tu
formulario.
6. Ahora insertando una a una y en orden elabora el siguiente formulario para que quede
exactamente igual al mostrado a continuacin. Recuerda que las claves deben ser tipo
contrasea y los botones deben tener value.
REGISTRO USUARIO NUEVO

NOMBRE
CLAVE
CONFIRMAR CLAVE
SEXO
FECHA NACIMIENTO
DIGITE LAS LETRAS
ENVIAR
REFRESCAR

Sistema de
Gestin de la
Calidad
11/03/11
COMPORTAMIENTOS CON JAVASCRIPT

VALIDAR CAJA DE CHEQUEO CHECKBOX
Ingresa a DREAMWEAVER y desde el administrador de sitios selecciona el sitio de tu nombre.
Si no lo encuentras Crea un sitio con tu nombre sin tecnologa servidor y lo almacenas en la
particin D de tu equipo.
En el sitio de tu nombre (la carpeta de tu sitio) hosteado en la particin D del pc, crea un archivo
nuevo de HTML .
Grbalo con el nombre de checkbox.html dentro de la carpeta /paginas/ de tu sitio.
En Dreamweaver emplea el modo diseador para editar tu archivo checkbox.html.
Inserta un FORMULARIO y colcale por nombre pregunta.
Dentro del formulario Agrega un texto que indique NO CERRAR SESION
Ahora inserta un objeto de formulario del tipo CASILLA DE VERIFICACIN
Escribe en la etiqueta la leyenda Mantener sesion iniciada
en posicin tras el elemento de formulario.
Al objeto insertado le cambiars su nombre
checkbox por rta.
Dejndolo desactivado al inicio.
Ahora inserta un BOTN sin etiqueta
en la parte inferior del formulario.
El formulario lucir as:
Haz clic en el botn para cambiarle propiedades.
Colcale de accin NINGUNO
Y de etiqueta value escribe EJECUTAR
Ahora con el botn seleccionado:
Agrgale un COMPORTAMIENTO desde el inspector de Etiquetas
Vamos a usar el comportamiento de javascript (internet explorer)
Llamar Javascript
Este te muestra una ventana para escribir el cdigo javascript,
o para invocar el archivo externo o la funcin local que quieres ejecutar.
Nuestra funcin se llama validar pero queremos que emplee como datos los campos del
formulario
El formulario le colocamos por nombre pregunta entonces al invocar la funcin mandamos
como parmetros el formulario escribiendo la instruccin as: validar(pregunta)
Ahora hacemos clic en VISTA PREVIA/DEPURAR EN EXPLORADOR (F12) para verlo ejecutar en
el internet EXPLORER
<script>
{
if(form.rta.checked)
{
alert("Acaso esta loco?");
}
return true;
}
</script>
Puedes crear varias cajas de chequeo y ellas deben permitir seleccionar una dos tres ninguna,
pues cada una es independiente de la otra.

Sistema de
Gestin de la
Calidad
11/03/11
COMPORTAMIENTOS CON JAVASCRIPT

VALIDAR BOTON DE OPCION RADIOBUTTON O
La diferencia es que en este objeto de formulario debemos crear un conjunto de botones que
trabajen en grupo para asegurar un comportamiento mutuamente exclusivo, es decir uno solo
puede estar CHECKED seleccionado.
Ingresa a DREAMWEAVER y desde el administrador de sitios selecciona el sitio de tu nombre.
Si no lo encuentras Crea un sitio con tu nombre sin tecnologa servidor y lo almacenas en la
particin D de tu equipo.
En el sitio de tu nombre (la carpeta de tu sitio) hosteado en la particin D del pc, crea un archivo
nuevo de HTML .
En Dreamweaver emplea el modo diseador para editar tu archivo radiobutton.html.
Inserta un FORMULARIO y colcale por nombre pregunta1.
Dentro del formulario Agrega un texto que indique 1-INDIQUE EL SEXO DE RICKY MARTIN:
Ahora inserta un objeto de formulario del tipo BOTON DE OPCIN
Escribe en la etiqueta la leyenda MASCULINO
Al objeto insertado le cambiars su nombre
radiobutton por P1.
Ahora inserta OTRO objeto de formulario
del tipo BOTON DE OPCIN
Escribe en la etiqueta la leyenda FEMENINO
Al objeto le cambiars el nombre radiobutton
por P1. (EL MISMO NOMBRE DEL PRIMERO)
Ahora inserta un BOTN sin etiqueta
Haz clic en el botn para cambiarle propiedades.
Colcale de accin NINGUNO
Y de etiqueta value escribe EJECUTAR
Ahora con el botn seleccionado:
Agrgale un COMPORTAMIENTO desde el inspector de Etiquetas
Vamos a usar el comportamiento de javascript (internet explorer)
Llamar Javascript
Nuestra funcin se llama validar pero queremos que emplee como datos los campos del
formulario
El formulario le colocamos por nombre pregunta1 entonces al invocar la funcin mandamos
como parmetros el formulario escribiendo la instruccin as: validar(pregunta1)
Ahora hacemos clic en VISTA PREVIA/DEPURAR EN EXPLORADOR (F12) para verlo ejecutar en
el internet EXPLORER
{
if(form.p1[0].checked)
{
alert("ud eligio "+form.p1[0].value);
}
else
{
alert("ud eligio "+form.p1[1].value);
}
return true;
}

Sistema de
Gestin de la
Calidad
11/03/11
</script>

Sistema de
Gestin de la
Calidad
11/03/11
PROGRAMACION HTML
EMPLEA EL TALLER ANTERIOR COMPRUEBA QUE EL VALOR INGRESADO EN DOS CAMPOS
NO SEA EL MISMO Creamos un sitio nuevo llamado TALLER

con un archivo en HTM
Ahora agrega otro campo de texto del tipo contrasea
(password)
Para confirmar la clave
Escribe una funcin en javascript que permita validar el
formulario e indique con una alerta que
"Las contraseas no coinciden" si los valores son diferentes
(distintos)
O una alerta que diga "Datos validos" si quedaron ambas claves iguales
<html><head>
{ if (form.clave.value!=form.confirmar.value)
{ alert("Las contraseas no coinciden");}
Else {alert("Datos validos");}
return true;}
</script></head><body>
<form name="pregunta" >
USUARIO<br>
<input type="text" name="usuario">
<br>CLAVE<br>
<input type="password" name="clave">
<br>CONFIRMAR CLAVE<br>
<input type="password" name="confirmar">
<br>
<input type="button" value="Aceptar" onClick="javascript : validar(pregunta)" >
</form></body></html>
******************
<form action=" " method="post"
enctype="text/plain">
Nombre <input type="text"
name="nombre" >
Email <input type="text" name="email"
value="@">
Poblacin <input type="text"
name="poblacion" >
Sexo
<input type="radio" name="sexo"
value="Varon" checked> Hombre
<input type="radio" name="sexo"
value="Hembra"> Mujer
Frecuencia de los viajes

<select name="utilizacion">
<option value="1">Varias veces al dia
<option value="2">Una vez al dia
<option value="3">Varias veces a la
semana
<option value="4">varias veces al mes
</select>
Comentario personal
<textarea cols="30" rows="7"
name="comentarios"></textarea>
<input type="checkbox"
name="recibir_info" checked>

Sistema de
Gestin de la
Calidad
11/03/11
Deseo recibir notificacin de las novedades <input type="Reset" value="Borrar todo">

en lnea.
</form>
<input type="submit" value="Enviar
formulario">
PHP

Sistema de
Gestin de la
Calidad
11/03/11

Fundamentos de Programacion 2

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Fundamentos de Programacion 2

Загружено:

Авторское право:

Доступные форматы

AREA TECNOLOGA E INFORMTICA

TITULACION EN PROGRAMACION DE SOFTWARE

AREA TECNOLOGA E INFORMTICA

Diagrama de casos de uso

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

// Programa hola cin cout

AREA TECNOLOGA E INFORMTICA

Programa potencias y raices

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

Ejemplo if tipos de traiangulos // programa tringulo

AREA TECNOLOGA E INFORMTICA

PREVIA ORDENAR 3 NUMEROS DE MENOR A MAYOR

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

PROMEDIO DE DOS NUMEROS

IMPRIMIR N VECES UNA FRASE

AREA TECNOLOGA E INFORMTICA

// CONTINUAL MIENTRAS NO SEA N

//PROGRAMA PARES HASTA

//MUESTRE LOS PRIMEROS N TERMINOS IMPARES

// PARES DESDE HASTA

//programa imprime pares e impares

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

ESTRUCTURA REPETITIVA FOR

AREA TECNOLOGA E INFORMTICA

A.- Un programa que ordena 3 nmeros de menor a mayor

AREA TECNOLOGA E INFORMTICA

MI PRIMERA PGINA WEB

El ttulo de nuestro documento aparecer en la barra superior de nuestro navegador.

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

Color de vnculo: El color de los vnculos de nuestra pgina web.

AREA TECNOLOGA E INFORMTICA

TALLER PRCTICO EVALUATIVO

AREA TECNOLOGA E INFORMTICA

EJEMPLOS PROCESOS REPETITIVOS

//PROGRAMA QUE IMPRIME

//PROGRAMA QUE IMPRIME LA SERIE

AREA TECNOLOGA E INFORMTICA

DEFINICIN DE LA ESTRUCTURA DEL SITIO

AREA TECNOLOGA E INFORMTICA

AREA TECNOLOGA E INFORMTICA

ESTRUCTURACIN DE UN SITIO WEB

AREA TECNOLOGA E INFORMTICA

Rastro de migas de pan (breadcrums)

Rastro de migas de pan (breadcrumbs)

Saber en qu parte del sitio web se encuentran,

Un rastro de migas de pan se presenta en el siguiente orden:

Vnculos separados por el carcter ">" que simboliza la idea de jerarqua.

Mapa del sitio

AREA TECNOLOGA E INFORMTICA

ESTRUCTURA DE UNA PGINA WEB

AREA TECNOLOGA E INFORMTICA

//PROGRAMA QUE LLE 10 NUMEROS E INDICA EL MAYOR Y EL MENOR

//PROGRAMA QUE LEA 7 NUMEROS DESDE EL TECLADO Y CALCULA LA MEDIA ARITMTICA