IF-II-S1

UNIVERSIDAD ANDINA DEL CUSCO FACULTAD DE INGENIERA

CARRERA PROFESIONAL DE INGENIERA DE SISTEMAS INGENIERA DE LA INFORMACIN II

Ing. Ramiro Mora Jimnez

UNIDAD I: PROGRAMACIN WEB EN EL ENTORNO CLIENTE

Introduccin a los lenguajes Web

Vemos una introduccin al medio donde se encajan los lenguajes que vamos a tratar:

La web encuadra dentro de Internet, no es ms que un servicio de los muchos que presta la Red, entre

los que podemos encontrar

Correo electrnico

IRC o chat

FTP

El propio web

1. Qu es un sitio web? Un sitio web (en ingls website o web site) es un sitio (localizacin) en la World Wide Web que contiene

documentos (pginas web) organizados jerrquicamente. Cada documento contiene texto y/o grficos

que aparecen como informacin digital en la pantalla de un ordenador.

Cada sitio web tiene una pgina de inicio (en ingls Home Page), que es el primer documento que ve el

usuario cuando entra en el sitio web poniendo el nombre del dominio de ese sitio web en un navegador.

A veces se utiliza errneamente el trmino pgina web para referirse a sitio web. Una pgina web es

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

web es un conjunto de archivos llamados pginas web.

2. Qu es una pgina web? Segun la wikipedia "Una pgina web, tambin conocida como pgina de Internet, es un documento

adaptado para la Web y que normalmente forma parte de un sitio web. Su principal caracterstica son

los hiperenlaces a otras pginas, siendo esto el fundamento de la Web."

Dentro de una pgina web, como documento que es, podemos encontrar diferentes tipos de

contenidos: textos, imgenes, enlaces, plugins, etc.

Una de las divisiones que podemos realizar entre todos los tipos de pginas Web existentes podra ser

entre estticas y dinmicas.

Qu es una pgina web estticas? Una Web esttica es aquella pgina enfocada principalmente a mostrar una informacin permanente,

donde el navegante se limita a obtener dicha informacin, sin poder interactuar con la pgina web

visitada.

Qu es una pgina web dinmica?

Una web dinmica es aquella que contiene aplicaciones dentro de la propia web, otorgando mayor

interactividad con el navegante. Ejemplos de aplicaciones dinmicas son encuestas y votaciones, foros

de soporte, libros de visita, envo de e-mails inteligentes, reserva de productos, pedidos on-line,

atencin al cliente personalizada ....




Es importante no confundir multimedia e interactividad, con pginas dinmicas. Una pgina web

esttica puede ser multimedia (contener varios tipos de medios vdeo, sonido, imgenes...) e interactiva

a travs de enlaces e hipervnculos, sin ser dinmica por ella. En las pginas dinmicas, el contenido

suelen generarse en el momento de visualizarse, pudiendo variar por tanto este, mientras que en las

estticas el contenido suele estar predeterminado.

El funcionamiento de un Sitio Web dinmico es

un poco ms complejo, las personas envan una

peticin al servidor, este enva la solicitud a una

pgina que procesa el cdigo de programacin

creando el archivo de texto que corresponde a la

pagina web, sucesivamente esta es enviada a la

computadora del visitante que puede

visualizarla.

En este caso SI se utilizan bases de datos y se

requiere programacin Web. El lenguaje

utilizado puede ser alguno de los siguientes:

PHP, ASP, ASP.NET o Java.

3. Extensiones de pginas Web Como hemos mencionado las pginas web son

documentos y, como tales, suelen tener una

extensin que nos da una idea sobre del tipo de contenido que posee ese documento. Las extensiones

ms habituales de las pginas web con las que nos podemos encontrar a la hora de navegar son:

.html, y .htm: Suele ser la extensin estndar para pginas web estticas, formadas por contenido html.

.asp (Active server pages): Son pginas dinmicas que se generan en el momento de ser visitadas. Estn escritas en un lenguaje de programacn similar al Visual Basic de Microsoft.

.jsp (Java server pages): Son pginas dinmicas al igual que las anteriores pero que estan escritas con el lenguaje de programacin Java de Sun.

.php (Personal Home Page): Son pginas dinmicas escritas con un lenguaje de propsito general para ser incrustado junto al codigo HTML, que no tiene nada que ver con java o visualbasic.

Si bien todos los documentos con las extensiones anteriores son pginas web, nicamente los .html

o.html son pginas web estticas, y por tanto las nicas que podremos ver directamente con el

navegador. Las pginas .asp, .jsp o .php, para poder visualizarse debern estar contenidas en un servidor

web.

4.- Lenguajes del lado de cliente y del lado de servidor En la programacin de una aplicacin web, es importante conocer la diferencia entre la programacin

del lado del cliente y la programacin del lado del servidor. La programacin del lado del cliente se

ejecuta en la mquina del cliente, creando algunas ventajas y desventajas. A pesar de las ventajas del

lado del cliente, en el servidor de programacin es ms seguro y es el preferido por la mayora de los

programadores.




5.-Lenguajes web de cliente 5.1.- HTML Una pgina web la vemos en nuestro navegador, o cliente web, y parece una sola entidad, pero no es

as, est compuesta por multitud de diferentes ficheros, como son las imgenes, los posibles vdeos y lo

ms importante: el cdigo fuente.

El cdigo de las pginas est escrito en un lenguaje llamado HTML, que indica bsicamente donde

colocar cada texto, cada imagen o cada video y la forma que tendrn estos al ser colocados en la pgina.

El lenguaje consta de etiquetas que tienen esta forma o . Cada etiqueta significa una cosa, por

ejemplo significa que se escriba en negrita (bold) o significa un prrafo, es un enlace, etc.

Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese

punto no debe de afectar la etiqueta. Por ejemplo se utiliza para indicar que se deje de escribir en

negrita. As que el HTML no es ms que una serie de etiquetas que se utilizan para definir la forma o

estilo que queremos aplicar a nuestro documento. Esto est en negrita.

5.2.- Partes de un documento HTML Un documento HTML ha de estar delimitado por la etiqueta y . Dentro de este

documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por y donde colocaremos etiquetas de ndole informativo

como por ejemplo el titulo de nuestra pgina.

El cuerpo, flanqueado por las etiquetas y , que ser donde colocaremos nuestro texto e

imgenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado es un documento con la siguiente estructura:

Etiquetas y contenidos del encabezado

Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo,

palabras clave,...

Etiquetas y contenidos del cuerpo

Parte del documento que ser mostrada por el navegador: Texto e imgenes

5.2.- CSS (Hojas de estilo en cascada) CSS es un lenguaje de estilo que define la presentacin de los documentos HTML. Por ejemplo, CSS

abarca cuestiones relativas a fuentes, colores, mrgenes, lneas, altura, anchura, imgenes de fondo,

posicionamiento avanzado y muchos otros temas.

Es posible usar HTML, o incluso abusar del mismo, para aadir formato a los sitios web. Sin embargo,

CSS ofrece ms opciones y es ms preciso y sofisticado.




HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido previamente

estructurado.

5.3- Javascript (Lenguaje de programacin del lado del cliente) Javascript es un lenguaje de programacin utilizado para crear programas encargados de realizar

acciones dentro del mbito de una pgina web.

Se trata de un lenguaje de programacin del lado del cliente, porque es el navegador el que soporta la

carga de procesamiento. Gracias a su compatibilidad con la mayora de los navegadores modernos, es el

lenguaje de programacin del lado del cliente ms utilizado.

Con Javascript podemos crear efectos especiales en las pginas y definir interactividades con el usuario.

El navegador del cliente es el encargado de interpretar las instrucciones Javascript y ejecutarlas para

realizar estos efectos e interactividades, de modo que el mayor recurso, y tal vez el nico, con que

cuenta este lenguaje es el propio navegador.

Entre las acciones tpicas que se pueden realizar en Javascript tenemos dos vertientes.

Por un lado los efectos especiales sobre pginas web, para crear contenidos dinmicos y elementos de

la pgina que tengan movimiento, cambien de color o cualquier otro dinamismo. Por el otro, javascript

nos permite ejecutar instrucciones como respuesta a las acciones del usuario, con lo que podemos crear

pginas interactivas con programas como calculadoras, agendas, o tablas de clculo.

Practica Laboratorio 1

1. Pagina bsica

En un procesador de texto cualquiera copiar el siguiente cdigo

Guardar el archivo como Practica1.html en formato texto y visualizarlo con el navegador.




2. Listas

En un procesador de texto cualquiera copiar el siguiente cdigo:


3. Tablas






4. Formularios

En un procesador de texto cualquiera copiar el siguiente cdigo.

Salvar el archivo como Practica4.html y visualizarlo con el navegador.




Practica Laboratorio 2 5. Imgenes, hipervnculos y diseo




6. Tablas con CSS

Abra el archivo Practica3.html (Tabla sencilla) y agregue el cdigo mostrado

dentro de la etiqueta , agregue las lneas seleccionadas de azul y el cdigo: class=table y

class=even como se muestra a continuacin y grabe el archivo como Practica3-1.html y visualizarlo

con el navegador.




7. Formularios con CSS

Abra el archivo Practica4.html (Formulario) y agregue el cdigo mostrado

dentro de la etiqueta , en los campos del formulario agregue el cdigo: class=input-text como

se muestra a continuacin y grabe el archivo como Practica4-1.html y visualizarlo con el navegador.




8. Javascript


Crear una carpeta de trabajo java y grabar dentro de esta carpeta el archivo como Practica5.html, de

la direccin indicada bajar los archivos: estilo.css - java.js y la carpeta imgenes dentro de la carpeta

java, visualizar con el navegador.

Documents

IF-II-S1