Fundamentos de Programacion 2

AREA TECNOLOGÍA E INFORMÁTICATITULACION EN PROGRAMACION DE SOFTWARE

Sistema de Gestión de la Calidad

FUNDAMENTOS DE PROGRAMACIÓN 2 11/03/11

Guía de AprendizajeDuración: 2 horasModulo: FUNDAMENTOS DE PROGRAMACION 2.Tema: LECCIÓN 1, INTRODUCCIÓN REPASO UML

CONCEPTOS BÁSICOS




Duración: 2 horasModulo: FUNDAMENTOS DE PROGRAMACION 2.Tema: LECCIÓN 1, INTRODUCCIÓN DIAGRAMAS UMLDiagrama de clases

Diagrama de casos de uso

Diagrama de actividades

EjemplosPrograma calculadoraPrograma juego de videoPrograma tipos de triángulosPrograma circuito conmutable




Duración: 2 horasModulo: FUNDAMENTOS DE PROGRAMACION 2.Tema: LECCIÓN 2, LENGUAJE DE PROGRAMACION VISUAL C++ENTORNO DE TRABAJO Visual C++Abrimos la aplicación desde inicio/ todos los programas/Microsoft Visual Studio 6.0/Microsoft Visual C++ 6.0En el Menú FILE escogemos la opción NEW y nos aparece la siguiente ventana contextualEsta nos ofrece varias pestañas para permitirnos crear diferentes objetosComo no hemos instanciado (subido a la memoria) ningún proyecto, nos ofrece crear proyecto, la pestaña proyecto está activa sobre las otrasMuestra 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 librerías y programas dentro de un proyectoEn Proyect Name elegimos este nombre y en Location su ubicación en disco duro.Este repaso usaremos el proyecto llamado Repaso1 o Repaso2 según corresonda.

Si el proyecto es nuevo elegimos proyecto vacío Empty Project

Le damos en el botón Finish

Y en la información clic en OK




Ahora hay que crear el archivo del programa para esta primera práctica:En el Menú FILE escogemos la opción NEW y nos aparece la siguiente ventana contextualComo ya hemos instanciado un proyecto, nos ofrece crear archivos FILES, la pestaña files está activa sobre las otras

Para este proyecto de repaso, escribiremos código de lenguaje visual C++ para practicar la sintaxis de código de programación y aplicar los conocimientos de estructuras de datos y estructuras de control de flujo.Es por eso que elegimos C++ Source file es decir código fuente C++ o código nativo c++.

Le damos un nombre al archivo según 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 añadimos al proyecto que tenemos repaso2 y le colocamos el nombre (FILE NAME) holamundoEl archivo recibe la extensión .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 código de programación.




Duración: 2 horasModulo: FUNDAMENTOS DE PROGRAMACION 2.Tema: LECCIÓN 2, LENGUAJE DE PROGRAMACION VISUAL C++SINTAXIS LENGUAJE C++

En el lenguaje c++ tenemos varias alternativas para ingresar y/o mostrar datos, dependiendo de la librería que vamos a utilizar para desarrollar el programa, entre estas están: 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 estándar de C++. Ellas se incluyen en los archivos de cabecera iostream.h por lo que siempre que queramos utilizarlas deberemos introducir la línea de código #include <iostream.h>

cin, que toma caracteres de la entrada estándar (teclado);cout, pone caracteres en la salida estándar (pantalla);cerr y clog ponen mensajes de error en la salida estándar.

Estos objetos se utilizan mediante los operadores << y >>. El operador << se denomina operador de inserción; y apunta al objeto donde tiene que enviar la información. 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 extracción, lee información del flujo cin (a la izquierda del operador) y las almacena en las variables indicadas a la derecha). La sintaxis sería la siguiente: cin>>variable1>>...>>variablen;

Un ejemplo de código utilizando ambos objetos podría ser el siguiente:#include <iostream.h>main (){ int i; cout<<"Introduce un número"; cin>>i; ...}

Que mostraría por pantalla la frase "Introduce un número" y posteriormente almacenaría el valor introducido por teclado en la variable i.Para utilizar la función printf en nuestros programas debemos incluir la directiva:#include <stdio.h>

Si sólo queremos imprimir una cadena basta con escribir la siguiente línea de código.cout<< "Cadena" );Como resultado muestra en pantalla:Cadena




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 cómo 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 línea deberemos usar "\n". Es el indicador de retorno de carro. Lo que hace es saltar el cursor de escritura a la línea siguiente:

#include <stdio.h>void main(){cout<< "Primera\n" );cout<< "Segunda" );}

y tendremos:PrimeraSegunda

ScanfEl 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 número " );scanf( "%i", &num );cout<< "Has tecleado el número %i\n", num );}

Aquí hacemos Introduce un número _ /* La barra horizontal indica dónde esta el cursor */Esto es porque en el printf no hemos puesto al final el símbolo de salto de línea '\n'. Además hemos dejado un espacio al final de Introduce un número: para que así cuando tecleemos el número no salga pegado al mensaje. Si no hubiésemos dejado el espacio quedaría así al introducir el número 120: Introduce un número120




Veamos cómo 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. Después de la coma tenemos la variable donde almacenamos el dato, en este caso 'num'.

Fíjate que en el scanf la variable 'num' lleva delante el símbolo &, este es muy importante, sirve para indicar al compilador cual es la dirección (o posición en la memoria) de la variable.

Podemos preguntar por más de una variable a la vez en un sólo scanf, hay que poner un %i por cada variable:

#include <stdio.h>void main(){int a, b, c;cout<< "Introduce tres números: " );scanf( "%i %i %i", &a, &b, &c );cout<< "Has tecleado los números %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.También podemos pedir en un mismo scanf variables de distinto tipo:

#include <stdio.h>void main(){int a;float b;cout<< "Introduce dos números: " );scanf( "%i %f", &a, &b );

cout<< "Has tecleado los números %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.




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 opción

!Excecute programa.exe Ctrl + F5




// Programa hola cin cout#include <iostream.h>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 número");cin>>i", &r);cout<< pi*r*r;

return 0;}

Ejercicio programa superficie de un cilindro

//programa superficie cilindro#include<iostream.h>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?

#include <iostream.h>int main() {int x = 5;int y = 7;cout << "\n";cout << x + y << " " << x * y;cout << "\n";return 0;}

Tipos de datos

#include <iostream.h>int main () {// Sacamos el tamaÃ±o de cada tipocout << "El tamaÃ±o del int es:\t\t" << sizeof(int) << " bytes.\n";cout << "El tamaÃ±o del short es:\t" << sizeof(short) << " bytes.\n";cout << "El tamaÃ±o del long es:\t" << sizeof(long) << " bytes.\n";cout << "El tamaÃ±o del char es:\t\t" << sizeof(char) << " bytes.\n";cout << "El tamaÃ±o del float es:\t\t" << sizeof(float) << " bytes.\n";cout << "El tamaÃ±o del double es:\t" << sizeof(double) << " bytes.\n";// Sacamos por salida standar un mensajecout << "Termino el programa\n";return 0;}

Programa operadores

#include <iostream>int main () {// Sacamos por salida standar un mensajecout << "Vamos a probar los operadores\n";unsigned int test = 0;unsigned int a = 0, b = 0, c;// Sacamos el valor por pantalla de testcout << "Valor de test: " << test << endl;// Sacamos el valor por pantalla de test++cout << "Valor de test++: " << (test++) << endl;// Sacamos el valor por pantalla de ++testcout << "Valor de ++test: " << (++test) << endl;cout << "Valor de test actual: " << test << endl;// asignacion multiplec = b = a = test;a+=4;b*=3;c/=2;// Veamos el resto de valorescout << "Y los demas: " << c << " " << b << " " << a << endl;return 0;}




Programa potencias y raices#include <iostream.h>#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 () {cout << "Vamos a probar los operadores\n";unsigned int test = 0;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 sencillaif (!(a == b))cout << "a y b no son iguales" << endl;elsecout << "a y b son iguales" << endl;if ((a == b) || (b == c))cout << "A y B son iguales o B y C son iguales" << endl;elsecout << "ni A y B son iguales ni B y C son iguales" << endl;return 0;}

If anidados#include <iostream>int main () {cout << "Vamos a probar los operadores\n";unsigned int test = 0;int a = 23, b = 21, c = 34;cout << "Valores: " << c << " " << b << " " << a << endl;// Veamos una sentencia if-else sencillaif (a >= b)cout << "a mayor o igual que b" << endl;elsecout << "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;}




Ejemplo if tipos de traiangulos // programa triángulo#include <iostream.h>int main(){int a,b,c;cout<<"digite los tres lados ";cin>> a>>b>>c;if ((a==b)&&(b==c))cout<<"equilatero ";elseif((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#include <iostream.h>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 ";

elsecout<<"C es el mayor";

return 0;}

Programación modular funciones#include <iostream.h>// Funcion: llamadaint 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 asignamosint z = llamada(5,7);cout << "Resultado:" << z << endl;// Llamada desde el outputcout << "Resultado:" << llamada(6,7) << endl;cout << "Programa terminado \n" << endl;return 0;}




PREVIA ORDENAR 3 NUMEROS DE MENOR A MAYOR

//ordenar tres numeros de menor a mayor#include <iostream.h>

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;}




Duración: 2 horasModulo: FUNDAMENTOS DE PROGRAMACION 2.Tema: LECCIÓN 3, SINTAXIS DE PROGRAMACION VISUAL C++ESTRUCTURAS DE CONTROL DE FLUJO




Duración: 2 horasModulo: FUNDAMENTOS DE PROGRAMACION 2.Tema: LECCIÓN 3, SINTAXIS DE PROGRAMACION VISUAL C++EJEMPLOS ESTRUCTURAS DE CONTROL DE FLUJO

CONTAR DE 1 A 10 PROMEDIO DE DOS NUMEROS#include <iostream.h>int main(){ int counter = 0;

while (counter < 10) {

cout << counter<<”\n";counter++;

}return 0;}

IMPRIMIR N VECES UNA FRASE#include <iostream.h>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#include <iostream.h>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;}




Duración: 2 horasModulo: FUNDAMENTOS DE PROGRAMACION 2.Tema: LECCIÓN 3, SINTAXIS DE PROGRAMACION VISUAL C++EJERCICIOS ESTRUCTURAS DE CONTROL DE FLUJO

// CONTINUAL MIENTRAS NO SEA N#include<iostream.h>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#include<iostream.h>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 *#include<iostream.h>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#include<iostream.h>int main(){int contador(2), final;cout<<"Digite el término final \n";cin>>final;while ( contador <= final ){cout<< contador <<endl;contador +=2;}return 0;}

//MUESTRE LOS PRIMEROS N TERMINOS IMPARES#include<iostream.h>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#include<iostream.h>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;elsecont= desde;while ( cont < hasta){cout<< cont<<endl;cont+=2;}return 0;}

//programa imprime pares e impares#include<iostream.h>int main(){int contador, final;cout<<"Digite el término final \n";cin>>final;cout<<"PARES \n";contador=2;while ( contador <= final ){cout<< contador <<endl;contador +=2;}cout<<"IMPARES \n";contador=1;while ( contador <= final )




{cout<< contador <<endl;contador +=2;}

return 0;}




Duración: 2 horasModulo: FUNDAMENTOS DE PROGRAMACION 2.Tema: LECCIÓN 2, LENGUAJE DE PROGRAMACION VISUAL C++EJEMPLOS PROGRAMACION ESTRUCTURADA

ESTRUCTURA REPETITIVA WHILE PROGRAMA del programa que lee el código de un alumno hasta que se digite 0

ESTRUCTURA REPETITIVA FOR

PROGRAMA del programa que escribe la tabla de multiplicar del 9




Duración: 2 horasModulo: FUNDAMENTOS DE PROGRAMACION 2.Tema: LECCIÓN 2, LENGUAJE DE PROGRAMACION VISUAL C++EJERCICIOS PROGRAMACION ESTRUCTURADAA.- Un programa que ordena 3 números de menor a mayor#include <stdlib.h>#include <iostream.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;}




MI PRIMERA PÁGINA WEBVamos a crear nuestra primera página web, para ello, nos vamos aArchivo > Nuevo > Pagina básica > HTMLy damos a crear.

Automáticamente nuestro Dreamweaver, creará el código básico para nuestra página (encabezado y pie de página y cuerpo), primero le vamos a dar un titulo:

El título de nuestro documento aparecerá en la barra superior de nuestro navegador.

Lo siguiente que vamos a hacer, es configurar nuestra página, para ello nos vamos aModificar > Propiedades de la páginano vamos a explicar todos los parámetros, muchos de ellos los aprenderemos más adelante.




ASPECTO:Fuente de página: Aquí vamos a poner el tipo de fuente que queremos que tenga nuestra página.Tamaño: Tamaño de la fuenteColor del texto: Color del texto de nuestra páginaColor de fondo: El color del fondo :pImagen de fondo: Url de la dirección donde se encuentra nuestro fondo o patrón, aquí puedes también seleccionar una página interna.Repetir: Aquí vamos a decidir, si queremos que nuestra imagen de fondo, se repita, cuantas veces se debe repetir, etc..

VINCULOS:




Color de vínculo: El color de los vínculos de nuestra página web.Vínculos de sustitución: Modifica el color del vinculo, cuando pasamos el cursor sobre él.Vínculos visitados: Color de los vínculos que ya se han visitado.Vínculos activos: Color de los vínculos, que son pulsados por el usuarioAplicar > Aceptar

Ahora vamos a poner un encabezado o título a nuestra página web, para ello escribimos nuestro texto en la página en blanco de nuestra ventana de Dreamweaver.

El funcionamiento es muy similar al del Word que todos conocemos, elegimos el tipo de fuente, el tamaño y la alineación, escribimos el título y pulsamos intro para saltar de línea, y volvemos a configurar, ahora elegimos un tamaño menor de texto o otro tipo de letra, a los amantes del diseño gráfico deben saber, que las fuentes que nosotros utilicemos en nuestra página web, no las podrán 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 página web.Cuando ya hayamos escrito todo nuestro texto, será muy útil, comprobar que todo esté correcto y no tenga ninguna falta de ortografía, para ello, nos vamos a Texto > Ortografía 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 previsualización de nuestra página 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 página, o bien pulsamos F12 y se visualizará en el navegador que tengamos por defecto.




TALLER PRÁCTICO EVALUATIVO

ESTRUCTURA REPETITIVA WHILE

SE REQUIERE DISEÑAR EL PROYECTO Y ESCRIBIR EL CÓDIGO 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 … (código veces)

5, 6, 8, 11, 15, 20, 26, 33, 41, 50… (código veces)

2, 6, 6, 12, 10, 18, 14, 24, 18, … (código veces)

10, 9, 7, 4, 0, -5, -11, -18, -26, -35… (código veces)

1, -2, 3, -4, 5, -6, 7, -8, 9, -10… (código veces)

1, 2, 4, 8, 16, 32, 64, 128, 256… (código veces)

ESCRIBIR EL PROGRAMA QUE LEE 10 NÚMERO 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 NÚMERO DIGITADO DESDE TECLADO

ELABORAR EL PROGRAMA QUE LEA 7 NUMEROS DESDE EL TECLADO Y CALCULA LA MEDIA ARITMÉTICA (PROMEDIO) DE LOS NUMEROS IMPARES, Y EL PRODUCTO DE TODOS LOS NÚMEROS PARES

PROGRAMA QUE GENERA LOS 10 PRIMERO TÉRMINOS DE LA SERIE DE FIBONNACI: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34… (código veces)

DISEÑAR EL PROGRAMA QUE LEE DESDE EL TECLADO CUALQUIER NÚMERO “ENTERO POSITIVO” MENOR DE 1000 Y LUEGO CALCULA Y MUESTRA EN LA PANTALLA CUANTOS DÍGITOS TIENE.

QUE LEE UN NÚMERO DEL TECLADO E IMPRIME SI ES PRIMO O NO (ENTERO MAYOR QUE CERO, QUE TIENE SOLO DOS DIVISORES POSITIVOS)

PROGRAMA QUE LEE UN NÚMERO DEL TECLADO E IMPRIME SI ES CAPICÚA (LEIDO DÍGITO A DÍGITO DE DERECHA A IZQUIERDA A ES IGUAL)




EJEMPLOS PROCESOS REPETITIVOSSE REQUIERE DISEÑAR EL PROYECTO Y ESCRIBIR EL CÓDIGO 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#include<iostream.h>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… (código veces) #include<iostream.h>int main(){int cont(0); int termino, cod;termino=5;cout<<"digite su codigo";cin>>cod;while (cont <= cod){termino= termino + cont;cout<<termino<<endl;cont++;}return 0;}

//PROGRAMA QUE IMPRIME LA SERIE //10,9,7,4,0,-5,-11,-18,-26,-35(CÓDIGO VECES)#include<iostream.h>int main(){int cont(0); int termino, cod;termino=10;cout<<"digite su codigo";cin>>cod;while (cont <= cod){termino= termino - cont;cout<<termino<<endl;cont++;}return 0;}

//PROGRAMA QUE IMPRIME LA SERIE //1,2,4,8,16,32,64,128,256(CÓDIGO VECES)#include<iostream.h>int main(){int cont(0); int termino, cod;termino=1;cout<<"digite su codigo";cin>>cod;while (cont <= cod){cout<<termino<<endl;termino= termino * 2;cont++;}return 0;}




DEFINICIÓN DE LA ESTRUCTURA DEL SITIO

Creación del sitio

Se refiere al proceso de identificar la forma (apariencia) y la organización lógica que tendrá el Sitio Web que se está desarrollando. En este sentido es importante hacer una diferencia entre estructura y diseño.

Estructura: Se refiere a la forma que tendrá el Sitio Web en términos generales con sus secciones, funcionalidades y sistemas de navegación. No considera ni incluye elementos gráficos (logotipos, viñetas, etc.). Cuando hablamos de la estructura nos estamos refiriendo a cuál será la experiencia que tendrá un usuario cuando accede al sitio. De esta manera podremos determinar dónde estarán ubicados los servicios (buscador, sistemas de encuestas, áreas de contenidos).

Diseño: Se refiere a la solución gráfica que se creará para el sitio, en la cual aparecen colores, logotipos, viñetas, y otros elementos de diseño 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 práctica cuántas secciones tendrá el sitio en desarrollo y cuántos 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 irán incorporando.En este sentido se debe evitar a toda costa que el árbol de contenidos represente la estructura de la organización, 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 organización, primero deberán comprender cómo 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 institución, pero no basado en su estructura de funcionamiento, sino en su lógica de actividad.

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 generación 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 estén 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 páginas habrá enlaces a ellos.

DEFINICIÓN DE LOS SISTEMAS DE NAVEGACIÓN

En la generación de dichos sistemas se debe atender a dos elementos que serán muy importantes:

Textual: Se refiere a que la navegación se hará a través de elementos concretos, tales como menús, guías, 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 función para la que fueron designados y no dejar lugar a dudas sobre su función ni sobre la acción que desarrollarán al ser usados.

Es decir, un botón debe parecer tal y no sólo 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 botón necesita ser explicado, es mejor desecharlo y buscar otra solución.

Contextual: Es todo lo referido a cómo se presenta la información, utilizando para ellos elementos basados en texto, gráficos o bien de entorno. Los elementos relevantes en este caso, serán todos aquellos que permiten mostrar la navegación en la pantalla. Entre ellos, la gráfica utilizada, la redacción 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.

Características de los Sistemas de Navegación

Al generar el sistema de navegación, se deben tener en cuenta las siguientes características:

Consistente: El sistema debe ser similar en todo el sitio, en lo referido a su ubicación y disposición en las páginas. Esto se aplica también a aquellas instituciones que pueden tener más de un Sitio Web.

Uniforme: El sistema debe utilizar similares términos con el fin de que el usuario que lo vea en las páginas, confíe 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 guía permanente en el área en que se encuentre del sitio. Se debe tener en cuenta que los buscadores de Internet tienen la capacidad de indexar e incluir en sus bases de datos, cualquier página del sitio, aún las más internas.

Por ello, es de suma importancia que todas las páginas del sitio cuenten con el sistema de navegación, de esta manera, si un usuario accede al sitio por una página interior (que estaba indexada en un buscador), siempre contará con las herramientas adecuadas para ir a la portada o realizar cualquier otra acción que le interese.




Recorrido visualExisten estudios que han demostrado que la vista del usuario de Internet promedio suele desplazarse por las páginas en "zigzag", comenzando en la esquina superior izquierda y moviéndose hacia la esquina inferior derecha.

El área que corresponde a la mitad superior de la página es un sitio especialmente estratégico para colocar información.

ESTRUCTURACIÓN DE UN SITIO WEB

Elementos estándar

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 página de inicio del sitio web. Un vínculo a la página de inicio, que siempre se encuentra en cada página del sitio. En todas las páginas pueden hallarse elementos de navegación que permitan a los usuarios saber en qué parte del sitio web se encuentran y volver fácilmente a la sección principal.

Elementos de navegación

Son herramientas que ayudan al visitante a saber dónde se encuentra dentro del sitio web, a volver y a desplazarse entre las secciones. Existen varios métodos para configurar los elementos de navegación: Rastro de migas de pan (breadcrums) Navegación por pestañas Mapa del sitio

http://es.kioskea.net/contents/web/navigation.php3#carte

http://es.kioskea.net/contents/web/navigation.php3#onglets

http://es.kioskea.net/contents/web/navigation.php3#ariane




Rastro de migas de pan (breadcrumbs)

Un rastro de migas de pan es una herramienta de navegación constituida por una serie de vínculos jerárquicos. Un rastro de migas de pan representa la ruta de navegación y permite a los usuarios: Saber en qué parte del sitio web se encuentran, Regresar a las secciones principales fácilmente.

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

Página de inicio > Webmastering > Navegación.

Un rastro de migas de pan incluye los siguientes elementos: Vínculos separados por el carácter ">" que simboliza la idea de jerarquía. El último vínculo aparece en negrita y no puede hacerse clic sobre él. Este vínculo representa la página en la que el visitante se encuentra. El término "rastro de migas de pan" refiere al cuento de los hermanos Grimm, "Hansel y Gretel", que narra la historia de dos niños que se pierden en un bosque y que van dejando caer pedacitos de pan detrás de ellos para poder encontrar el camino de regreso. La traducción del término francés equivalente sería "la cuerda de Ariadna", que refiere a la mitología 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.

Navegación por pestañasLas pestañas son herramientas de navegación muy útiles que ayudan a los visitantes a distinguir las secciones de un sitio web y a moverse de una sección a otra. También pueden usarse códigos de colores como una manera de reforzar las diferencias entre las secciones.

Mapa del sitioEl mapa del sitio proporciona a los usuarios de Internet una vista global del sitio web. Además, un cartel de "usted está aquí" puede ayudar a los usuarios a saber dónde se encuentran dentro del sitio web.

Flechas de navegaciónLas flechas de navegación (siguiente, anterior, regresar al capítulo, regresar a la página de inicio) son herramientas de navegación intuitivas para el usuario.

http://es.kioskea.net/contents/web/

http://www.commentcamarche.net/




ESTRUCTURA DE UNA PÁGINA WEB

Cuando ingrese el dominio establecido para el Sitio Web en el navegador, verá una página con una estructura básica similar a la siguiente.

1. Título del Sitio Web: Es el título principal del Sitio Web, editable en la “Información básica”. Opcionalmente puede mostrarse aquí una imagen cargada como logotipo.2. Vínculos cabecera: Son vínculos de acceso a las páginas del Sitio Web, que van marcadas como vínculo de cabecera, en el sector “Mapa del Sitio”.3. Buscador (opcional): Es la vista en cabecera del formulario de búsqueda, activado en el sector “Recurso Buscador”.4. Botonera principal: Son vínculos de acceso a las páginas del Sitio Web, que van marcadas como de acceso predeterminado en el sector “Mapa del Sitio” , y además son del primer nivel jerárquico de dicho mapa.5. Rastro: Son vínculos anidados, que conforman el camino jerárquico de la página abierta. Existen algunos diseños que no incorporan este parte de su estructura. 6. Botonera secundaria: Son vínculos de acceso a las páginas del Sitio Web, contenidas en la página de primer nivel activa. 7. Título de página: Es el título de la página abierta, principalmente si se usan frames.8. Subtítulo de página: Es el subtítulo de la página abierta, generalmente si se usan capas.9. Contenido de página: Es el contenido de la página abierta, es el cuerpo de la página con la información a mostrar.10. Vínculos de pie: Son vínculos de acceso a las páginas del Sitio Web, que han marcadas como vínculo de pie, generalmente se incluyen aquí el Copyright, la declaración de privacidad, etc.




//PROGRAMA QUE LLE 10 NUMEROS E INDICA EL MAYOR Y EL MENOR#include <iostream.h>int main(){int numero, mayor(0), menor(1000), cont(1);while (cont <= 10){cout<< "Digite un número "<<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 ARITMÉTICA #include <iostream.h>

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




TALLER DE PROGRAMACIÓNDiseño de un sitio web estático en HTML empleando las herramientas básicas de Dreamweaver

Elabore un sitio web titulado EL COCINERITO WEB en el que se haga uso de colores textos e imágenes que hagan de su página el sitio un catálogo de la oferta gastronómica de un restaurante.

PROCEDIMIENTO1 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 (imágenes, htmldocs, mmedios, downloads).3. Coloque los archivos necesarios en las carpetas correspondientes (según el tipo seleccione imágenes 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 selecciónala. Puedes hacerlo a través del botón con forma de carpeta.9 Comience a editar la página principal de su sitio. 10 Incorpore o edite elementos en la página Web ; fondo, Cabezote, menú (texto, enlaces, imágenes, tablas, etc.).6. Guarde el archivo a menudo.7. Pruebe la página en el navegador Web (F12).8. Repita pasos del 4 al 7 para crear otra página de su sitio.9 Edite todos los elementos que desee de su página.10 Añada enlaces a: otra página de su sitio Web, una página externa, a un documento PDF, Word, Excel 11 Inserte una imagen (encontrada en la carpeta imágenes)***Intente colocar datos verdaderos en su página y luego se la sustenta al docente.




TALLER DE PROGRAMACIÓNDiseño de un sitio web estático en HTML empleando las herramientas básicas de Dreamweaver.Elabore un sitio web titulado SIMULANOMBRE, donde nombre es depende de quién lo realiza (su nombre)El proyecto debe ser un sitio web (hosteado) en la carpeta WWW de la carpeta wamp, con una página de bienvenida llamada index.html.La página de bienvenida debe indicar el nombre del proyecto (simulador prueba SABER ICFES).Además debe informar acerca de sus creadores en una página quienes somos.El contenido del proyecto se debe mostrar con un diseño agradable que le permita al usuario elegir las diferentes opciones que ofrece el simulador.

Estas opciones deben mostrarse simultáneamente y con una imagen que la represente (icono) preferiblemente.Cada opción debe llevar al usuario hasta la página que le ofrece ese contenido permitiéndole regresar al menú de las opciones si cambia de opinión.

Al ingresar a una opción encontrará un menú correspondiente a ese contenido o tema (contextual) y botones de navegación adelante y atrás para desplazarse dentro de los capítulos o niveles de ese tema.Las opciones o temas son las siguientes:

CONTENIDOS DE MATEMÁTICAS CONTENIDOS DE INGLÉS CONTENIDOS DE FISICA CONTENIDOS DE QUIMICA CONTENIDOS DE LENGUA CASTELLANA

Cada capítulo contendrá una introducción o repaso y una pregunta interactiva que evalúe conceptos específicos de esa área del conocimiento, Evaluación que se retomará en clases posteriores.

Las evaluaciones interactivas pueden emplear cualquiera de las herramientas que ofrece tanto HTML, como JavaScript y se desarrollarán en clase, sin quitar la posibilidad de permitir al estudiante investigar e incluir cualquier otra alternativa que desee.

EL MAPA DE NAVEGACIÓN SE PROPONE DE LA SIGUIENTE MANERA:

Index.html

Física Química Matemáticas Inglés Español

Quienes Somos

Introducción

Prueba

Introducción

Prueba

Introducción

Prueba

Introducción

Prueba

Introducción

Prueba




USO DE MARCOS EN DISEÑO DE PÁGINAS WEBEJERCICIOElaborar la página web EL COCINERITO WEB en un sitio creado con tu nombre Hosteado en la carpeta www del servidor wampEsta página se dividirá en Dos Marcos; Buscaremos en la galería CREAR A PARTIR DE MUESTRAS la opción Conjuntos de marcosEn el cuadro de diálogo NUEVO DOCUMENTO empleamos la lista de conjuntos de marcos y elegimos Izquierdo FijoLa página principal es la página de marcos y debería llamarse “index.html”En el marco de la izquierda se colocará una tabla de 4 celdas. La celda superior dirá MENÚ y las otras 3 celdas tendrán botones flash Estos botones se agregan empleando el menú insertar MEDIA Botón flashLos tres 3 botones FLASH tendrán como texto Desayunos, Almuerzos y Cenas Cada botón FLASH llamará una página html NUEVA que tendrás que crear en color y con un letrero grande.

Esas páginas se abrirán en una nueva ventana al hacer clic en el botón correspondiente empleando destino _blankLa página de los botones FLASH debería guardarse como menú.htm La página del mantel con el letrero del COCINERITO WEB debería llamarse principal.htmY la página de desayunos DESAYUNOS.HTM, la de almuerzos ALMUERZOS.HTM, la de cenas CENAS.HTM

PROCEDIMIENTOAbra DREAMWEAVER y cree un sitio con su nombreY una página nueva eligiendo CREAR NUEVO - HTML

Para crear los marcos en DREAMWEAVER, ubicamos el menú Insertar, HTML, Marcos. Vamos a emplear el marco a la Izquierda. Pulsamos Izquierda se creará un nuevo marco a la izquierda del documento actual.Como puedes ver en la imagen, aparece una línea que divide el documento en dos.

Ahora nos pregunta los NAME, nombres que les vamos a poner a nuestros marcos Mainframe=contenido y Leftframe=Menú

En este caso NECESITAMOS (3) tres documentos HTML: (estos los debes crear mediante la opción guardar marco)El de la izquierda (el que va dentro del marco de la izquierda), MenúEl de la derecha (el que va dentro del marco de la derecha), principal

El conjunto de marcos, que debería ser index.htm (se guarda haciendo clic en la rayita de división guardar conjunto de marcos)El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como MainFrame.Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos.

En el marco de la izquierda se encuentra la página MENU.HTMLEste 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 mayúscula En propiedades lo colocamos color VERDE y tamaño “muy grande” centrado, negrita y cursiva.En la página inserta una tabla de 4x4 buscando el menú INSERTAR-TABLA filas4 columnas 4 Ancho de tabla 100 Porcentaje GROSOR DEL BORDE 0 clic en aceptarSeleccionamos la tabla haciendo clic en el borde (el puntero del ratón muestra la tablita) y propiedades An 100% Al 90%Cambia el color a las celdas una blanca y una roja como un mantel haciendo clic en la celda y abajo en las propiedades FND rojo

Estos botones tienen como texto DESAYUNOS, ALMUERZOS Y CENAS y tienen como vínculo las páginas DESAYUNOS. HTML ALMUERZOS.HTML Y CENAS.HTML en un destino _blank que me los abrirá en una ventana nueva.Estas páginas destinos se pueden crear dando clic derecho en el menú ARCHIVO-NUEVO - PÁGINA BÁSICA -HTMLLe aplicas un color de fondo diferente a cada página haciendo clic en el botón PROPIEDADES DE PÁGINA del PANEL DE PROPIEDADES en la parte inferior en la opción COLOR DE FONDO.




GUARDAR LOS MARCOSTodos los documentos que contienen marcos tienen que tener una página en cada uno de ellos. Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya veremos más adelante.Es necesario guardar la página que contiene el grupo de marcos, así como cada una de las páginas que están incluidas en sus marcos.No es conveniente guardar la primera vez los marcos con la opción 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.




Ejercicio 1Determinar el código 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>




Ejercicio 2Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen. CATALOGO DE PRODUCTOS TIENDA ONLINEUtilizar las celdas de cabecera donde sea necesario y añadir 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 más alta que las demás. Para fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.




La siguiente imagen muestra una tabla compleja que ha fusionado dos columnas simples para formar una columna más ancha:

Para obtener una tabla como la de la imagen anterior, se debe utilizar el siguiente código:<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 sólo por una columna, mientras que la segunda fila está formada por dos columnas. En principio, podría pensarse en utilizar el siguiente código 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 código 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 número de columnas. Por lo tanto, si se quieren mostrar menos columnas en una fila, se fusionan mediante el atributo colspan, que indica el número 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 código HTML debe ser <td colspan="2">A</td>.




De forma equivalente, si se quiere diseñar una tabla HTML que fusiona filas como la de la siguiente imagen:

El código 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 análoga a la fusión de columnas del ejemplo anterior, la fusión de filas debe indicarse de forma especial. Como las tablas HTML tienen que ser regulares, todas las columnas deben tener el mismo número de filas. Así, si en el ejemplo anterior se utilizara el siguiente código:<table><tr> <td>A</td> <td>B</td></tr> <tr> <td>C</td></tr></table>La tabla anterior no se visualizaría correctamente. Como la segunda columna de la tabla ocupa el espacio de las dos filas, el código 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 número de filas.Utilizando los atributos rowspan y colspan, es posible diseñar tablas tan complejas como las que se muestran en los siguientes ejemplos.




Ejemplo de fusión de múltiples columnas:

El código HTML necesario para fusionar las columnas de la tabla anterior se muestra a continuación:<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>




Ejemplo de fusión de múltiples filas:

El código HTML necesario para fusionar las filas de la tabla anterior se muestra a continuación:<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>




Formularios.Son muy utilizados para realizar búsquedas 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 automáticamente.Usando HTML podemos únicamente enviar el formulario a un correo electrónico. Si queremos procesar el formulario mediante un programa la cosa puede resultar un poco más compleja ya que tendremos que emplear otros lenguajes más sofisticados.

Formularios básicos.

http://www.monografias.com/trabajos10/habi/habi.shtml




La mayoría de formularios utilizan sólo los atributos action y method. El atributo action indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador.

El atributo method establece la forma en la que se envían los datos del formulario al servidor. Este atributo hace referencia al método 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 también se denominan "campos de formulario" y "controles de formulario".

A continuación se muestran ejemplos para utilizar los controles que se pueden crear con la etiqueta

http://www.monografias.com/trabajos14/nuevmicro/nuevmicro.shtml

http://www.monografias.com/trabajos11/metods/metods.shtml




Cuadro te texto.Se trata del elemento más utilizado en los formularios. En el caso más sencillo se muestra un cuadro vacio en el cual el usuario puede escribir cualquier texto.

Y el código necesario para este cuadro es:En este código 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 más importante en los campos del formulario. De hecho, si un campo no incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicación 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 deberían estar vacíos. Por lo tanto, o no se añade el atributo value o se incluye con un valor vacío value="". Si por el contrario se crea un formulario para modificar datos, lo lógico 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 contraseñaLa única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles.

Y el código necesario seria:

CheckboxLos checkbox o "casillas de verificación" son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se 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.

http://www.monografias.com/trabajos12/eticaplic/eticaplic.shtml

http://www.monografias.com/trabajos15/introduccion-informatica/introduccion-informatica.shtml#navegad

http://www.monografias.com/trabajos14/control/control.shtml




Y para este ejemplo el código 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 ningún atributo, por lo que es necesario añadirlo manualmente fuera del control del formulario.

El valor del atributo value, junto con el valor del atributo name, es la información que llega alservidor cuando el usuario envía 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 idénticos, es obligatorio indicarlo de esta forma porque los atributos en XHTML no pueden tener valores vacíos:

RadiobuttonLos 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 opción de varias, así cuando seleccionas una opción la otra de deselecciona automáticamente.

El código 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 están relacionados. Por lo tanto, cuando varios radiobutton tienen el mismo valor en su atributo name, el navegador sabe que están relacionados y puede deseleccionar una opción del grupo de radiobutton cuando se seleccione otra opción.

http://www.monografias.com/trabajos14/dinamica-grupos/dinamica-grupos.shtml

http://www.monografias.com/trabajos13/radio/radio.shtml


http://www.monografias.com/trabajos7/sisinf/sisinf.shtml

http://www.monografias.com/trabajos11/tebas/tebas.shtml





Botón de envío de formularioLa mayoría de los formularios cuentan con un botón para envía los datos introducidos por el usuario:

El valor del atributo type para este control de formulario es submit. El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si no se establece el atributo value, el navegador muestra el texto predefinido Enviar consulta.Botón de reseteo del formulario

El valor del atributo type para este control de formulario es reset. Cuando el usuario pulsa este botón, el navegador borra toda la información introducida y muestra el formulario en su estado original. Ficheros adjuntos.

El código necesario para el ejemplo es: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 botón que permite navegar por los directorios y archivos del ordenador del usuario. Campos ocultosLos campos ocultos se emplean para añadir información oculta en el formulario:

El código necesario para el ejemplo es:

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 información que necesita el servidor pero que no es necesario o no es posible que la establezca el usuario.

http://www.monografias.com/trabajos7/arch/arch.shtml

http://www.monografias.com/trabajos10/disfo/disfo.shtml




CREAR EL FORMULARIO

Para crear un formulario en Dreamweaver, tenemos que insertarlo desde [Insertar > Formulario > Formulario], o bién, hacerlo desde la barra de herramientas rápida 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 botón de envío.

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.




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 botón 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:

ValorObligatorio: con esta opción el campo debe tener un valor, no puede quedar vacío.

AceptarCualquier cosa: acepta todos los caracteres.Dirección de correo electrónico: sólo dirección de email, el script chequea que el email sea escrito correctamente.Número: sólo números.Número del... al...: sólo números entre un inicio y un fin, ideal para fechas.

Dando clic en Aceptar ya tendremos el formulario validado.

ELABORAR UNA GALERÍA DE FOTOS EMPLEANDO EL COMPORTAMIENTO DE JAVASCRIPT INTERCAMBIAR IMAGEN




CREACION Y VALIDACION DE FORMULARIOS CON DREAMWEAVER1. Crea un NUEVO sitio de Dreamweaver llamado NOMBRE. Sin tecnología servidor y en la partición D del disco duro.2. Crea un NUEVO archivo HTM, una página en blanco para diseñar el formulario desde cero.3. Emplea las indicaciones de diseño que se muestran en la MAQUETACIÓN. 4. Busca en la barra de menú y elige INSERTAR formulario. Asegúrate de insertar los objetos dentro de él.5. En el mismo menú INSERTAR busca TABLA y define el número de filas y columnas que prefieras para tu tabla.6. En el submenú FORMULARIO encontrarás 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 contraseña y los botones deben tener value.

Registrar




JAVASCRIPT

JavaScript no es un lenguaje de programación propiamente dicho. Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de macros que tienen muchos procesadores de texto. Nunca podrás hacer un programa con JavaScript, tan sólo podrás mejorar tu página Web con algunas cosas sencillas (revisión de formularios, efectos en la barra de estado, etc...) y no tan sencillas (animaciones usando HTML dinámico, por ejemplo)• JavaScript y Java son dos cosas distintas. Principalmente porque Java sí que es un lenguaje de programación completo. Lo único que comparten es la misma sintaxis.JavaScript es un lenguaje que se integra directamente en páginas HTML. Tiene como características principales las siguientes:• Es interpretado (que no compilado) por el cliente.• Está basado en objetos. No es, como Java, un lenguaje de programación orientada a objetos (OOP). JavaScript no emplea clases ni herencia, típicas de la OOP.• Su código se integra en las páginas HTML, incluido en las propias páginas.• No es necesario declarar los tipos de variables que van a utilizarse (loose typing).• Las referencias a objetos se comprueban en tiempo de ejecución, por lo tanto no se compila.• No puede escribir automáticamente al disco duro.La ventaja que presenta JavaScript sobre el HTML es que permite crear páginas más dinámicas, lo que las hace más atractivas para el usuario. Ni que decir tiene que para utilizar y dominar el JavaScript es prerrequisito indispensable saber HTML.

¿CÓMO INCLUIR JAVASCRIPT EN PÁGINAS DE HTML?Existen tres formas principales:1. La forma general es la que sigue:<SCRIPT LANGUAGE="JavaScriptConVersión"> Sentencias de JavaScript .... </SCRIPT>Si sólo se escribe LANGUAGE="JavaScript", la propia versión del Netscape Navigator escoge la versión de JavaScript por defecto. Por ello, es conveniente incluir la versión 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 función está definida desde el principio del documento, lo que asegura su existencia a la hora de ejecutarse en algún punto de la página. Esto evitará muchos errores.2. Si lo que se quiere es incluir un archivo de JavaScript en lugar de insertar las líneas de programa en la página 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 APÓSTROFOS 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 apóstrofos (comilla sencilla). Ejemplo: La función alert requiere comillas: alert("texto") El evento OnClick también: OnClick="código en JavaScript" Si queremos abrir una ventana alert haciendo clic en un link, se escribirá de la siguiente forma: OnClick="alert('texto')"




VALIDACION DE FORMULARIOS EN DREAMWEAVER PROGRAMANDO EN JAVASCRIPT

COMPRUEBA QUE EL VALOR INGRESADO EN DOS CAMPOS NO SEA EL MISMOCreamos 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 campo1Al campo de texto de la CLAVE le pondremos campo2Agregamos también un botón y le colocaremos de acción NINGUNO

Escribimos el siguiente código JAVASCRIPT en la cabecera HEAD de la página web, antes de </head> <script language="javascript">function validar(form){ if(form.campo1.value == form.campo2.value) { alert("La contraseña no puede ser igual al nombre de usuario"); form.campo2.value = "";

form.campo2.focus(); return true;

}}</script>

Ahora hacemos clic en el botón y le asociamos + un comportamiento desde la ventana de etiquetasElegimos el comportamiento Llamar JavaScript y le escribimos el nombre de la función y el nombre del formulario como parámetro validar(ejemplo) y probamos con F12

VariablesEn Javascript, deben comenzar por una letra o un subrayado (_), pudiendo haber además dígitos entre los demás 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 función, y local si está definida dentro:var x; // Accesible fuera y dentro de pruebasy = 2; // Accesible fuera y dentro de pruebasfunction pruebas() { var z; // Accesible sólo dentro de pruebas w = 1; // Accesible fuera y dentro de pruebas}Se pueden declarar varias variables en una misma sentencia separándolos 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 escribimosb = 200;Es de esperar que la variable b tenga tipo numérico.




JavaScript dispone de los operadores aritméticos clásicos y algún que otro más:

Descripción Símbolo Expresión de ejemplo Resultado del ejemplo

Multiplicación * 2*4 8

División / 5/2 2.5

Resto de una división entera % 5 % 2 1

Suma + 2+2 4

Resta - 7-2 5

Incremento ++ ++2 3

Decremento -- --2 1

Menos unario - -(2+4) -6

Los operadores de incremento y decremento merecen una explicación auxiliar. Se pueden colocar tanto antes como después de la expresión que deseemos modificar pero sólo devuelven el valor modificado si están delante. Me explico.a = 1; b = ++a;En este primer caso, a valdrá 2 y b 2 también. 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 detrás del mismo se ejecutan después de todas las demás operaciones.Operadores de comparación


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 comprobación estricta de tipo. Operadores lógicos


Negación ! !(2 = 2) Falso

Y && (2 = 2) && (2 >= 0) Verdadero

Ó || (2 = 2) || (2 <> 2) Verdadero

Operadores de asignaciónNormalmente los lenguajes tienen un único operador de asignación, que en JavaScript es el símbolo =. Pero en este lenguaje, dicho operador se puede combinar con operadores aritméticos y lógicos

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




CREACION Y VALIDACION DE FORMULARIOS CON DREAMWEAVER

VALIDACION DEL FORMULARIO DE REGISTRO DE USUARIO

1. Inicia el programa macromedia Dreamweaver2. Crea un NUEVO archivo HTM, una página en blanco para diseñar el formulario desde cero según las indicaciones de

diseño que se muestran en la guía.3. Busca en la barra de menú y elige INSERTAR formulario. Asegúrate de insertar los objetos dentro de él.4. En el mismo menú INSERTAR busca TABLA y define el número de filas y columnas que prefieras para tu tabla.5. En el submenú FORMULARIO encontrarás 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 continuación. Recuerda que las claves deben ser tipo contraseña y los botones deben tener value.

REGISTRO USUARIO NUEVO

NOMBRE

CLAVE

CONFIRMAR CLAVE

SEXO M F

FECHA NACIMIENTO

DIGITE LAS LETRAS

ENVIAR REFRESCAR




COMPORTAMIENTOS CON JAVASCRIPTVALIDAR 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 tecnología servidor y lo almacenas en la partición D de tu equipo.En el sitio de tu nombre (la carpeta de tu sitio) hosteado en la partición D del pc, crea un archivo nuevo de HTML .Grábalo con el nombre de checkbox.html dentro de la carpeta /paginas/ de tu sitio.En Dreamweaver emplea el modo diseñador para editar tu archivo checkbox.html.Inserta un FORMULARIO y colócale por nombre pregunta.Dentro del formulario Agrega un texto que indique “NO CERRAR SESION”Ahora inserta un objeto de formulario del tipo “CASILLA DE VERIFICACIÓN”Escribe en la etiqueta la leyenda “Mantener sesion iniciada” en posición tras el elemento de formulario.Al objeto insertado le cambiarás su nombre checkbox por rta. Dejándolo desactivado al inicio.Ahora inserta un BOTÓN sin etiqueta en la parte inferior del formulario.El formulario lucirá así:Haz clic en el botón para cambiarle propiedades.Colócale de acción “NINGUNO” Y de etiqueta value escribe EJECUTARAhora con el botón seleccionado:Agrégale un COMPORTAMIENTO desde el inspector de EtiquetasVamos a usar el comportamiento de javascript (internet explorer)Llamar Javascript Este te muestra una ventana para escribir el código javascript, o para invocar el archivo externo o la función local que quieres ejecutar.Nuestra función se llama validar pero queremos que emplee como datos los campos del formulario El formulario le colocamos por nombre pregunta entonces al invocar la función mandamos como parámetros el formulario escribiendo la instrucción así: validar(pregunta)Ahora hacemos clic en VISTA PREVIA/DEPURAR EN EXPLORADOR (F12) para verlo ejecutar en el internet EXPLORER<script>

function validar(form){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.




COMPORTAMIENTOS CON JAVASCRIPTVALIDAR BOTON DE OPCION RADIOBUTTON OLa 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 tecnología servidor y lo almacenas en la partición D de tu equipo.En el sitio de tu nombre (la carpeta de tu sitio) hosteado en la partición D del pc, crea un archivo nuevo de HTML .En Dreamweaver emplea el modo diseñador para editar tu archivo radiobutton.html.Inserta un FORMULARIO y colócale 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 OPCIÓN”Escribe en la etiqueta la leyenda “MASCULINO” Al objeto insertado le cambiarás su nombre radiobutton por P1. Ahora inserta OTRO objeto de formulario del tipo “BOTON DE OPCIÓN”Escribe en la etiqueta la leyenda “FEMENINO” Al objeto le cambiarás el nombre radiobutton por P1. (EL MISMO NOMBRE DEL PRIMERO)Ahora inserta un BOTÓN sin etiqueta Haz clic en el botón para cambiarle propiedades.Colócale de acción “NINGUNO” Y de etiqueta value escribe EJECUTARAhora con el botón seleccionado:Agrégale un COMPORTAMIENTO desde el inspector de EtiquetasVamos a usar el comportamiento de javascript (internet explorer)Llamar Javascript Nuestra función se llama validar pero queremos que emplee como datos los campos del formulario El formulario le colocamos por nombre pregunta1 entonces al invocar la función mandamos como parámetros el formulario escribiendo la instrucción así: validar(pregunta1)Ahora hacemos clic en VISTA PREVIA/DEPURAR EN EXPLORADOR (F12) para verlo ejecutar en el internet EXPLORER<script language="javascript">

function validar(form){

if(form.p1[0].checked){alert("ud eligio "+form.p1[0].value);}

else{alert("ud eligio "+form.p1[1].value);}

return true;}

</script>




PROGRAMACION HTMLEMPLEA 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 contraseña (password)Para confirmar la claveEscribe una función en javascript que permita validar el formulario e indique con una alerta que "Las contraseñas no coinciden" si los valores son diferentes (distintos)O una alerta que diga "Datos validos" si quedaron ambas claves iguales

<html><head><script language="javascript">function validar(form){ if (form.clave.value!=form.confirmar.value){ alert("Las contraseñas 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="@"> Población <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> Deseo recibir notificación de las novedades en línea. <input type="submit" value="Enviar formulario"> <input type="Reset" value="Borrar todo"> </form>




PHP

Fundamentos de Programacion 2

Documents

Transcript of Fundamentos de Programacion 2