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 ....
UNIVERSIDAD ANDINA DEL CUSCO FACULTAD DE INGENIERA
CARRERA PROFESIONAL DE INGENIERA DE SISTEMAS INGENIERA DE LA INFORMACIN II
Ing. Ramiro Mora Jimnez
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.
UNIVERSIDAD ANDINA DEL CUSCO FACULTAD DE INGENIERA
CARRERA PROFESIONAL DE INGENIERA DE SISTEMAS INGENIERA DE LA INFORMACIN II
Ing. Ramiro Mora Jimnez
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.
UNIVERSIDAD ANDINA DEL CUSCO FACULTAD DE INGENIERA
CARRERA PROFESIONAL DE INGENIERA DE SISTEMAS INGENIERA DE LA INFORMACIN II
Ing. Ramiro Mora Jimnez
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.
UNIVERSIDAD ANDINA DEL CUSCO FACULTAD DE INGENIERA
CARRERA PROFESIONAL DE INGENIERA DE SISTEMAS INGENIERA DE LA INFORMACIN II
Ing. Ramiro Mora Jimnez
2. Listas
En un procesador de texto cualquiera copiar el siguiente cdigo:
Guardar el archivo como Practica2.html en formato texto y visualizarlo con el navegador.
3. Tablas
En un procesador de texto cualquiera copiar el siguiente cdigo:
Guardar el archivo como Practica3.html en formato texto y visualizarlo con el navegador.
UNIVERSIDAD ANDINA DEL CUSCO FACULTAD DE INGENIERA
CARRERA PROFESIONAL DE INGENIERA DE SISTEMAS INGENIERA DE LA INFORMACIN II
Ing. Ramiro Mora Jimnez
4. Formularios
En un procesador de texto cualquiera copiar el siguiente cdigo.
Salvar el archivo como Practica4.html y visualizarlo con el navegador.
UNIVERSIDAD ANDINA DEL CUSCO FACULTAD DE INGENIERA
CARRERA PROFESIONAL DE INGENIERA DE SISTEMAS INGENIERA DE LA INFORMACIN II
Ing. Ramiro Mora Jimnez
Practica Laboratorio 2 5. Imgenes, hipervnculos y diseo
UNIVERSIDAD ANDINA DEL CUSCO FACULTAD DE INGENIERA
CARRERA PROFESIONAL DE INGENIERA DE SISTEMAS INGENIERA DE LA INFORMACIN II
Ing. Ramiro Mora Jimnez
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.
UNIVERSIDAD ANDINA DEL CUSCO FACULTAD DE INGENIERA
CARRERA PROFESIONAL DE INGENIERA DE SISTEMAS INGENIERA DE LA INFORMACIN II
Ing. Ramiro Mora Jimnez
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.
UNIVERSIDAD ANDINA DEL CUSCO FACULTAD DE INGENIERA
CARRERA PROFESIONAL DE INGENIERA DE SISTEMAS INGENIERA DE LA INFORMACIN II
Ing. Ramiro Mora Jimnez
8. Javascript
En un procesador de texto cualquiera copiar el siguiente cdigo:
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.
Top Related