DESARROLLO DE APLICACIONES DE

INTERNET I

2008

Elaborado por jjcm-evo - 1 -

MATERIA Desarrollo de aplicaciones para Internet I SIGLA SIS-100
CARRERA Ing. Informática y sistemas administrativos SEMESTRE PRIMERO
Ing. Electrónica y sistemas HORAS 80
Ing. Redes y telecomunicaciones HORAS TEÓRICAS 30
Ing. en Sistemas
PRERREQUISITO Admisión HORAS PRÁCTICAS 50
Competencia de la Materia
Desarrollar habilidades en el diseño, creación y publicación de Sitios Web con contenido estático.
OBJETIVOS GENERALES
• Estudiar y comprender conceptos teóricos y prácticos sobre Internet y sus servicios.
• Identificar los elementos del lenguaje de marcas HTML y extensiones (CSS) para la creación páginas
Web.
• Diseñar, crear, configurar plantillas para complementar el diseño de las paginas web
• Desarrollar los conocimientos teórico-prácticos relacionados con la creación de sitios web
• Familiarizarse con los fundamentos básicos del lenguaje JAVASCRIPT
CONTENIDO
TEMA-1 ARQUITECTURA DEL COMPUTADOR.
Que es un computador.
Arquitectura básica del computador.
Unidad Central de Procesamiento
Dispositivos de Entrada.
Dispositivos de Salida.
Sistema de Procesamiento de la información.
Evolución de la computación (1º a 5º generación).
TEMA-2 INTERNET.
Definición de Internet.
Evolución histórica de Internet.
Organismos que regulan Internet.
TCP/IP
Concepto de DNS.
Estructura de Internet.
TEMA-3 SERVICIOS OFRECIDOS POR INTERNET.
Definición de Servicio.
Servicios básicos
Uso remoto de ordenadores (TELNET)
Transferencia de Correo (e-mail).
Transferencia de ficheros (FTP)
Transferencia multimedia (WWW)
Transferencia de noticias en red (NEWS).
Listas de correos.
Grupos de discusión. (Foros).
Portal.
TEMA-4 WWW.
¿Qué es el WWW?
Url’s
Protocolo http
Conceptos de Hipertexto e hipermedia.
Servidores WWW. Ejemplos: Personal Web Server, Internet Information Server, Apache, etc.
Clientes WWW. Ejemplos: Mozilla, Netscape, Opera, Internet Explorer.
TEMA-5 Paginas Estáticas (HTML y Css)
HTML
El lenguaje HTML.
Partes de un documento HTML.
Concepto y tipos de DTD’s.
Introducción a la configuración de un sitio Web.
Primer pagina HTML sin formato.
Configuración básica de un servidor Web (Internet Information Server).
Creación de paginas estáticas (HTML)
Formateo de texto.
Multimedia.
Imágenes y gráficos.
Tablas.
Hipervínculos (Enlaces).
Formato especial del texto (direcciones, citas, listado, marquesina, párrafos).
Listas.
Formularios.
Frames o Marcos.

Elaborado por jjcm-evo - 2 -

 Css
Hojas de estilos.
Plantillas.
Publicar en Internet.

TEMA-6 Programacion Básica del lado del cliente

Que es JavaScript.
Sintaxis del lenguaje.
Validación de formularios.

BIBLIOGRAFÍA

• Programacion con ASP 3……….…………………………………………………………………………José Serrano Pérez.

• Guía del primer Año………………………………………………………………………………………………Cisco Systems.
• Redes de computadoras, Internet e interredes………………………………………………………….Douglas E. Commer.

Elaborado por jjcm-evo - 3 -

 MODELO DE PLANIFICACIÓN POR CLASES
Clase Día TEMA Tipo Clase
TEMA 1-ARQUITECTURA DEL COMPUTADOR
• ¿Que es un computador?
1 • Arquitectura básica del computador. Teórica
• Sistema de procesamiento de la Información.
• Evolución de la computación.
TEMA 2-INTERNET
• Definición de Internet.
Teórica
2 • Evolución histórica de Internet.
• Organismos que regulan el Internet.
• TCP/IP.
• Concepto de DNS.
3 Teórico
• Estructura de Internet.
TEMA 3-SERVICIOS OFRECIDOS POR INTERNET
4 • Definición de Servicio. Teórico
• Servicios Básicos.
TEMA 4-WWW
• ¿Qué es WWW?
Teórica
5 • Url’s
• Protocolo http.
• Conceptos de hipertexto e hipermedia.
• Servidores WWW. Teórico
6
• Clientes WWW. Practica
TEMA 5-Paginas estáticas (HTML y css)
• El lenguaje HTML Teórica
7
• Partes de un documento HTML. Práctica
• Concepto y tipos de DTD’s.
8 1 PARCIAL <Temas 1 y 5> 20 puntos
• Introducción a la configuración de un sitio Web (IIS). Teórica
9 • Primer página estática sin formato. Práctica
• Formato de texto. “LAB-01”
• Multimedia. Teórica
10 • Imágenes y gráficos. Práctica
“LAB-02”
• Tablas. Teórica
11 Práctica
“LAB-03”
• Hipervínculos. Teórica
12 • Formato especial de texto. Práctica
• Listas. “LAB-04”
• Formularios. Teórica
13 Práctica
“LAB-05”
• Frames o marcos. Teórica
14 Práctica
“LAB-06”
• Hojas de estilos. Teórica
15 Práctica
“LAB-07”
16 • Hojas de estilos. Practica Proyecto
17 • Creación y uso de hojas de estilos. Teórica

Elaborado por jjcm-evo - 4 -

 Práctica
“LAB-09”
TEMA 6-Programacion básica del lado del cliente
• Que es JavaScript. Teórica
18 Práctica
• Sintaxis del lenguaje.
“LAB-10”
• Validación de formularios.
REVISION PREVIA DE PROYECTOS Teórica
19 Práctica
“LAB-11”
DEFENSA DE PROYECTO FINAL <50 puntos> Teórica
20 Práctica
“LAB-12”

EVALUACIONES

Evaluación Temas a evaluar Puntos Fecha

Primer Parcial Se evaluaran los Tema 1, 2, 3 y 5. 20 Clase 8

Segundo Parcial Se evaluará el Tema 5 (hasta “Formularios”) 20 Clase 16

Examen Final Todo lo avanzado 30 Clase 20

Creación y publicación de un sitio Web en servidor

Proyecto Final 20 Clase 19
local.
Pruebas escritas, exposiciones, prácticos, participación
Actividades diarias 10 Todos los días.
en clase.

Elaborado por jjcm-evo - 5 -

 TEMA 1:
1: ARQUITECTURA DEL COMPUTADOR

OBJETIVOS

El alumno debe ser capaz de:

 Conocer el esquema básico del computador desde el punto de vista del procesamiento de la
información
 Valorar y diferenciar las funciones del hardware y el software del computador.

CONTENIDO

 ¿Que es un computador?
 Arquitectura básica del computador.
 Unidad Central de Procesamiento
 Dispositivos de Entrada.
 Dispositivos de Salida.
 Sistema de Procesamiento de la información.
 Evolución de la computación (1º a 5º generación).

RESUMEN

En el tema se plantea el mecanismo de procesamiento de la información (datos, programa, salida),

como sistema de información, considerándose fundamentalmente los tipos de datos numéricos (enteros
y reales), booleanos o lógicos y los de carácter – cadena.

Figura ilustrativa 1.1: Procesamiento de la información

Para poder entender el esquema de procesamiento es necesario estudiar los componentes de la

arquitectura básica del computador como son la unidad central de procesamiento, Dispositivos de
Entrada y salida.

Figura ilustrativa 1.2: arquitectura básica del computador

Elaborado por jjcm-evo - 6 -

 Los grandes adelantos en la computación se han logrado a través de las siguientes generaciones:
Generación Años Características
0 Hasta 1945 Sistemas mecánicos y electromecánicos
1 1945- 1955 Tubos al vació Tableros
2 1955-1965 Transistores y sistemas por lotes
3 1965-1980 Circuitos integrados y multiprogramación
4 Desde 1980 Computadoras personales

Figura ilustrativa 1.3: Evolución de la computación

TAREAS ASIGNADAS PARA EL TEMA

Exposición:

Para este tema se realizarán dos exposiciones por parte de los estudiantes (máximo grupo de tres
estudiantes):
a) Dispositivos de entrada y salida.
b) Evolución de la computación.

Preguntas de Autocontrol:

1) Verdadero o Falso
a. En la primer generación existen Sistemas operativos V F
b. El software el parte física o tangible del computador. V F
c. La tarjeta de red es un dispositivo solo de entrada. V F
d. Las computadoras portátiles son caras y robustas. V F
e. Los monitores son dispositivos de entrada y salida. V F
2) Complete
a. La ……………………… es el periférico que la computadora utiliza para presentar
información impresa en papel u otro medio.
b. El hardware representa la parte……………. del computador.
c. La ……………………………… es donde el computador guarda los datos que esta utilizando
en el momento presente y que además es volátil.
d. Las computadoras de uso domestico y de oficina responden al nombre de computadoras…
……………..
e. El componente de hardware mas importante del computador es la…………………….
3) Responda
a. Realice un breve resumen de los hechos más importantes de cada generación.
b. Explique brevemente el concepto de Dispositivo de Entrada y de Salida. Además realice un
cuadro donde identifique 4 dispositivos de entrada, 4 de salida y 4 de entrada y salida.

TEMA 2:
2: INTERNET

Elaborado por jjcm-evo - 7 -

OBJETIVOS

El alumno debe ser capaz de:

 Conocer los principales conceptos de Internet.

 Estudiar la evolución histórica de Internet y su estructura.

CONTENIDO

 Definición de Internet.
 Evolución histórica de Internet.
 Organismos que regulan Internet.
 TCP/IP
 Concepto de DNS.
 Estructura de Internet.

RESUMEN

En este tema se estudiaran los conceptos básicos que forman parte de Internet, desde su origen que
data del año 1957 con la primera red militar “ARPANET” hasta nuestros tiempos con la red de redes
“INTERNET”

Figura ilustrativa 2.1: Origen de Internet – ARPANET

Internet trata de una asociación de miles de redes conectadas entre sí. Todo ello da lugar a la “RED DE
REDES”, en la que un ordenador de una red puede intercambiar información con otro situado en una
red remota.
Para que los ordenadores puedan comunicarse entre sí es necesario que todos ellos envíen y reciban
la información de la misma manera. La descripción de los pasos a seguir se denomina “protocolo”. En
1974, se presentó el protocolo “Transmission Control Protocol / Internet Protocol” (TCP/IP). Este

Elaborado por jjcm-evo - 8 -

 protocolo proporcionaba un sistema independiente de intercambio de datos entre ordenadores y redes
locales de distinto origen, eso sí, conservando las ventajas relativas a la técnica de conmutación de
paquetes.

TAREAS ASIGNADAS PARA EL TEMA

Exposición:

La exposición de todo el tema será realizada por el docente.

Preguntas de Autocontrol:

1) Verdadero o Falso
a. DNS es un organismo que regula el Internet V F

b. TCP/IP es un protocolo de control de transmisión V F

c. ARPANET era una red militar. V F

d. Internet es un conjunto de Intranet’s V F

e. El IP es un número que se puede repetir en Internet. V F

2) Complete
a. Podemos definir a…………………… como una red de redes.
b. ……………. es un conjunto de maquinas que se comunican a través de algún medio.
c. Cada ordenador de Internet tiene su propia dirección………………………………
d. Las redes……………….. son redes de área local.
e. El…………………………..es el dispositivo que permite transmitir datos sobre la línea
telefónica.

3) Responda
a. Realice un breve resumen de los hechos más importantes la evolución histórica de Internet.
b. Indique y explique cada uno de los elementos indispensables para acceder a Internet.

Elaborado por jjcm-evo - 9 -

 TEMA 3:
3: SERVICIOS OFRECIDOS POR INTERNET

OBJETIVOS

El alumno debe ser capaz de:

 Estudiar los distintos servicios ofrecidos en Internet.

 Utilizar los servicios ofrecidos por Internet en la materia (buscadores, blogger, wiki’s).

CONTENIDO

 Definición de Servicio.
 Servicios básicos
 Uso remoto de ordenadores (TELNET)
 Transferencia de Correo (e-mail).
 Transferencia de ficheros (FTP)
 Transferencia multimedia (WWW)
 Transferencia de noticias en red (NEWS).
 Listas de correos.
 Grupos de discusión. (Foros).
 Portal.

RESUMEN

En este tema se estudiaran los distintos servicios ofrecidos en Internet como ser: Uso remoto de
ordenadores (TELNET), Transferencia de Correo (e-mail), Transferencia de ficheros (FTP),
Transferencia multimedia (WWW), Transferencia de noticias en red (NEWS), Listas de correos, Grupos
de discusión. (Foros) y Portal.

Sin duda uno de los servicios más importantes es el uso de correo electrónico, ya que gracias a él se
mandan mensajes a cualquier persona que disponga de una cuenta en Internet. Los mensajes abarcan
tanto texto como ficheros informáticos de cualquier característica, que se almacenan en el servidor de
correo hasta que el destinatario se conecta y los recoge. El correo electrónico es una forma rápida de y
barata de comunicarse con todo el mundo.

Otro servicio que sin duda es uno de los mas utilizados es la Transferencia de archivos por la red
mediante FTP ya que Internet contiene gigabytes de software y millones de archivos a los que se
accede fácilmente mediante un proceso llamado FTP o protocolo de transferencia de archivos, que te
permite conectar a un ordenador de acceso público y copiar archivos a tu disco duro.

Elaborado por jjcm-evo - 10 -

 Figura ilustrativa 3.1: Ventajas del uso de correo electrónico

Y no podemos dejar de hablar de Word Wide Web ya que las páginas de la WWW son el aspecto más
vistoso e innovador de Internet. Haciendo clic en palabras, imágenes e iconos, se pasa de un sitio a otro
de una forma rápida y sencilla.

TAREAS ASIGNADAS PARA EL TEMA

Exposición:

Para este tema se realizarán tres exposiciones por parte de los estudiantes (máximo grupo de tres
estudiantes):
c) Grupos de discusión.
d) Foros.
e) E-commerce

Preguntas de Autocontrol:

Responda

a. ¿Qué es un grupo de discusión?

b. Mencione al menos dos ejemplos de grupos de discusión que Ud. conozca.
c. Se dice que FTP por lo común es usado para distribuir software. ¿Cuál es su apreciación?
Justifique su respuesta.
d. El correo electrónico ofrece varias ventajas, Ud. cree que tiene algún(os) inconveniente(es),
si es así, menciónelos.
e. ¿Cual es la finalidad de las listas de correos?
f. Según su punto de vista cual de los servicios estudiados en este tema es el más importante
y cual es el más utilizado. Justifique su respuesta.

Elaborado por jjcm-evo - 11 -

 TEMA 4:
4: WWW

OBJETIVOS

El alumno debe ser capaz de:

 Comprender la importancia de la Word Wide Web.

 Diferenciar entre Servidor WWW y cliente WWW.

CONTENIDO

 ¿Que es WWW?
 Url’s
 Protocolo http
 Conceptos de hipertexto e hipermedia
 Servidores WWW
 Clientes WWW

RESUMEN

En este tema se estudiara el concepto e importancia de WWW, el cual representa una red de recursos
de información basado en tres mecanismos:
 Un esquema uniforme de nombres para localizar recursos en la Web (url’s).
 Protocolos (http).
 Hipertexto (HTML).
Los tres mecanismos anteriormente mencionados se los ve representados en la siguiente grafica para

la cual se asume que el usuario ha ingresado una url específica (Ej.: www.misitio.com/index.html)

Elaborado por jjcm-evo - 12 -

 Figura ilustrativa 3.1: Mecanismos en los que se basa WWW
Básicamente, un servidor web sirve contenido estático a un navegador, carga un archivo y lo sirve a
través de la red al navegador de un usuario. Este intercambio es mediado por el navegador y el servidor
que hablan el uno con el otro mediante HTTP. Se pueden utilizar varias tecnologías en el servidor para
aumentar su potencia más allá de su capacidad de entregar páginas HTML; éstas incluyen scripts CGI,
seguridad SSL y páginas activas del servidor (ASP).

En la siguiente tabla se muestra la lista de los servidores web mas utilizados:

Nombre del Servidor Sistema operativo

NetWare
OS/2
Apache Unix
Windows 95/98
Windows NT 4.0
Enterprise WebServer for NetWare NetWare
HP-UX
IRIX
Linux
Java Server OS/2
Solaris
Windows 95/98
Windows NT 4.0
Microsoft Internet Information Services Windows Server 2003
Red Hat Linux
Windows 2000
Windows 95/98
Sambar Server Windows ME
Windows NT 4.0
Windows Server 2003
Windows XP
Red Hat Linux
Solaris
Sun Java System Web Server
Windows 2000
Windows XP

Por el lado del cliente se necesitan de programas que permiten ver las páginas de la Malla Mundial o
WWW los cuales se llaman en inglés browsers. El verbo to browse viene de una antigua palabra
francesa que significa "brote de una planta", y su sentido inicial era "mordisquear, ramonear", que es lo
que hacen los herbívoros. De ahí pasó a significar "echar una ojeada" (por ejemplo, a las cosas de una
tienda) u "hojear" las páginas de un libro.

Elaborado por jjcm-evo - 13 -

 Los navegadores mas utilizados en la web son:

 Internet Explorer

 Mozilla Firefox

 Netscape Navigator (hasta la versión 4.xx)

 Opera

 Konqueror (KHTML)

 HotJava

TAREAS ASIGNADAS PARA EL TEMA

Exposición:

La exposición de todo el tema será realizada por el docente.

Preguntas de Autocontrol:

Responda

a. ¿Qué es WWW?
b. Menciones las partes que componen las Url’s.
c. En caso de no existir el protocolo http, se podría tener una red de recursos de información
como Internet.
d. Identifique las diferencias y similitudes entre hipertexto e hipermedia.
e. Explique la siguiente grafica:

Aplicaciones
Web
HTTP

Sockets
f. ¿Cuál es la finalidad del uso de cookies?

Elaborado por jjcm-evo - 14 -

 TEMA 5:
5: Paginas estáticas (HTML y css)

OBJETIVOS

El alumno debe ser capaz de:

 Diseñar y crear un sitio Web con contenido estático.

 Crear y utilizar hojas de estilos.
 Publicar un sitio Web mediante Internet Information Server.

CONTENIDO

 El lenguaje HTML.
 Partes de un documento HTML.
 Concepto y tipos de DTD’s.
 Primer pagina HTML sin formato.
 Configuración básica de un servidor Web (Internet Information Server).
 Formateo de texto.
 Multimedia.
 Imágenes y gráficos.
 Tablas.
 Hipervínculos (Enlaces).
 Formato especial del texto (direcciones, citas, listado, marquesina, párrafos).
 Listas.
 Formularios.
 Frames o Marcos.
 Hojas de estilos.
 Plantillas.

RESUMEN

En este tema se estudiará el lenguaje HTML construido sobre la base del hipertexto y de la marca el
que permite compartir información en Internet ya que no es propiedad de nadie, y que por su
popularidad fue empujado mas allá de su capacidad pasando a ser un lenguaje de formato y de
contenido.

Construido sobre la base del hipertexto ya que se centra en la descripción del aspecto final que tendrán
los documentos y sobra la base de la marca ya que es un lenguaje que no genera programas sino
documentos.

Elaborado por jjcm-evo - 15 -

Además se estudiarán las etiquetas más importantes que permitirán crear un sitio Web con contenido
estático para el proyecto final, tomando en cuenta las distintas especificaciones de los DTD’s y evitando
los malos hábitos en HTML tales como:
 Pensar en HTML como un lenguaje de formato.
 Diseñar para un navegador en particular.
 Dejar fuera elementos estructurales importantes.

Un documento escrito en HTML contendría básicamente las siguientes directivas:

<HTML> Indica el inicio del documento.

<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.

El documento se hallará situado en algún ordenador al que se pueda acceder a través de Internet. Para
indicar la situación del documento en Internet se utiliza la URL (Uniform Resource Locator). La URL es
el camino que ha de seguir nuestro visor a través de Internet para acceder a un determinado recurso,
bien sea una página Web, un fichero, un grupo de noticias, etc. Es decir, lo que el visor de páginas Web
hace es acceder a un fichero situado en un ordenador que está conectado a la red Internet. La
estructura de una URL para una página Web suele ser del tipo http://dominio/directorio/fichero. El
dominio indica el nombre del ordenador al que accedemos, el directorio es el nombre del directorio de
ese ordenador y fichero el nombre del fichero que contiene la página Web escrita en HTML. Por
ejemplo: http://ares.six.udc.es/cine/corunha2.html

Donde:
http:// es el indicador de pagina Web
ares.six.udc.es es el Dominio (nombre) del ordenador
/cine/ es el Directorio dentro del ordenador
corunha2.html es el Fichero que contiene la página Web

Otro concepto importante a estudiar dentro de este tema son las hojas de estilo, las cuales representan
un avance importante para los diseñadores de páginas web, al darles un mayor rango de posibilidades
para mejorar la apariencia de sus páginas. Aunque las intenciones han sido buenas -- mejorar la
presentación de las páginas web --, las técnicas para conseguirlo han tenido efectos secundarios
negativos.

Elaborado por jjcm-evo - 16 -

 Por ejemplo, la siguiente hoja de estilo CSS (almacenada en el fichero "especial.css") hace que el color
del texto de un párrafo sea verde ("green") y lo rodea de un borde rojo ("red") continuo ("solid"):
P.especial {
color : green;
border: solid red;
}

Los autores pueden vincular esta hoja de estilo a su documento fuente HTML con el elemento LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Un documento con una hoja de estilo externa<TITLE>
<LINK href="especial.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="especial">Este párrafo debería tener texto especial verde.
</BODY>
</HTML>

TAREAS ASIGNADAS PARA EL TEMA

Exposición:

La exposición de todo el tema será realizada por el docente.

Practica:

1. En un procesador de texto cualquiera teclear el siguiente código y guardar el archivo como

Practica1.html y visualizarlo con el navegador:
<HTML>
<HEAD>
<TITLE> Mi primera pagina Web </TITLE>
</HEAD>
<BODY>
Esta es mi primera pagina, es muy sencilla, pero como el
lenguaje HTML es fácil, pronto estaré en condiciones de hacer
cosas mas interesantes.
</BODY>
</HTML>

2. Con las etiquetas de control de texto estudiadas conseguir los efectos siguientes:

Elaborado por jjcm-evo - 17 -

 Agregar además a la pagina diferentes ejemplos de etiquetas de resaltado y guardar el archivo
como Practica2.html en formato texto y visualizarlo con el navegador.

3. En un procesador de texto cualquiera teclear el siguiente código

<HTML>
<HEAD>
<TITLE> Practicas de listas </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mis aficiones </H1>
</CENTER>
<HR>
Sin un orden particular, mis <B> aficiones </B> son las siguientes:
<UL>
<LI> El cine
<LI> El deporte
<UL>
<LI> Natación
<LI> Baloncesto
</UL>
<LI> La música
</UL>
La música que más me gusta es (en orden de preferencia):
<OL>
<LI> El rock
<LI> El jazz
<LI> La música clásica
</OL>
</BODY>
</HTML>

Completar la página con el resto de tipos de listas estudiadas y observar sus diferencias, guardar el
archivo como Practica3.html en formato texto y visualizarlo con el navegador.

Elaborado por jjcm-evo - 18 -

 TEMA 6:
6: Programación básica del lado del cliente

OBJETIVOS

El alumno debe ser capaz de:

 Conocer el lenguaje de script (documento) JavaScript.

 Utilizar el lenguaje de documento JavaScript para la validación de datos del formulario.

CONTENIDO

 ¿Que es JavaScript?
 Sintaxis del Lenguaje.
 Validación de formularios.

RESUMEN

En este tema se dará una visión básica del lenguaje JavaScript el cual no es un lenguaje de
programacion sino que más bien es un lenguaje script u orientado a documento que ha surgido con la
finalidad de extender las capacidades del lenguaje HTML para mejorar el funcionamiento de las páginas
Web. Algunas de las cosas que se pueden mejorar con JavaScript son: revisión de formularios, efecto
en la barra de estados, animaciones utilizando HTML dinámico, etc.

Además hay que considerar que Java y JavaScript son dos cosas distintas, principalmente porque Java
si es un lenguaje de programacion completo, lo único que comparten es la sintaxis.

Primeros pasos:
Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos
muestre el ya famoso mensaje "hola, mundo". Así podremos ver los elementos principales del lenguaje.
El siguiente código es una página Web completa con un botón que, al pulsarlo, muestra el mensaje.

Nombre pagina: “HolaMundo.html"

<HTML>
<HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    function HolaMundo() 
    {
      alert("¡Hola, mundo!");
    }
  </SCRIPT>
</HEAD>
<BODY>
<FORM>
  <INPUT TYPE="button" NAME="Boton" 
VALUE="Pulsame"
         onClick="HolaMundo()">

Elaborado por jjcm-evo - 19 -

Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraños que tiene la
página anterior:

<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>

Dentro de estos elementos será donde se puedan poner funciones en JavaScript. Puedes poner
cuantos quieras a lo largo del documento y en el lugar que más te guste. Se ha elegido la cabecera
para hacer más legible la parte HTML de la página. Si un navegador no acepta JavaScript no leerá lo
que hay entre medias de estos elementos. Así que si programamos algo que sólo funcione con la
versión 1.1 pondríamos LANGUAGE= "JavaScript1.1" para que los navegadores antiguos pasen
olímpicamente del código y no se hagan un lío.
function HolaMundo() {
alert("¡Hola, mundo!");
}

Esta es nuestra primera función en JavaScript. Aunque JavaScript esté orientado a objetos no es de
ningún modo tan estricto como Java, donde nada está fuera de un objeto. En el código de la función
vemos una llamada al método alert (que pertenece al objeto window) que es la que se encarga de
mostrar el mensaje en pantalla. Por un fallo del Netscape no se pueden poner las etiquetas HTML de
caracteres especiales en una función: no los reconoce. Así que pondremos directamente "¡"
arriesgándonos a que salga de otra manera en ordenadores con un juego de caracteres distinto al del
nuestro.

<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>

Dentro del elemento que usamos para mostrar un botón vemos una cosa nueva: onClick. Es un
controlador de evento. Cuando el usuario pulsa el botón, el evento click se dispara y ejecuta el código
que tenga entre comillas el controlador de evento onClick, en este caso la llamada a la función
HolaMundo(), que tendremos que haber definido con anterioridad. Existen muchos más eventos que
iremos descubriendo según avancemos en el tutorial. En el cuarto cápitulo hay un resumen de todos
ellos.

En realidad, podríamos haber escrito lo siguiente:

<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="alert('&iexcl;Hola,Mundo!')">
</FORM>

y nos habríamos ahorrado el tener que escribir la función y todo lo que le acompaña, además de
conseguir que nos reconozca el carácter especial ¡.

Elaborado por jjcm-evo - 20 -

TAREAS ASIGNADAS PARA EL TEMA

Exposición:

La exposición de todo el tema será realizada por el docente.

Preguntas de autocontrol

a. ¿Que es JavaScript?
b. Describa brevemente los beneficios que nos brinda JavaScript.
c. ¿JavaScript es un lenguaje programación? Justifique su respuesta.
d. El no programar JavaScript dentro de las páginas, impide su correcto funcionamiento.
e. Realice un script que permita preguntar al usuario la fecha de nacimiento y calcule su edad.
f. Realice un script que permita mostrar datos en la barra de estado. El mensaje debe de mostrar
su nombre completo.

Elaborado por jjcm-evo - 21 -

 PROYECTO FINAL

OBJETIVOS

El alumno debe ser capaz de:

 Crear un sitio web con contenido estático.

 Utilizar el generador de código HTML dreamweaver para la creación de paginas.
 Aplicar los conocimientos de creación de script.

ENUNCIADO

Para el proyecto final se deberá construir un sitio web con contenido estático para una empresa de nuestro
medio. El sitio debela estar comprendido por un mínimo de 15 páginas en las que se aplicarán todos los
conocimientos adquiridos durante la materia.

Lo que se pretende mostrar en el sitio es información corporativa de la empresa como ser:

 ¿Quienes Somos?
 Visión.
 Misión.
 Servicios.
 Contactos.
 Otros.

Además hay que tomar en cuenta que el sitio deberá ser publicado en un servidor Web (Internet Information
Server) y ser visualizado en un browser (Internet Explorer).

SOBRE EL PROYECTO

Fecha de Entrega: un día antes del examen final.

Cantidad de alumnos: máximo dos alumnos.
Ponderación: se evaluará: - Presentación (Creatividad, funcionalidad, completitud)
- Defensa individual.

Elaborado por jjcm-evo - 22 -