Universidad de San Carlos de Guatemala

Facultad de Ingeniera
Escuela de Ciencias y Sistemas
Organizacin de Lenguajes y Compiladores 2
Segundo Semestre 2010

Navegador Web 1.0

Introduccin
En la actualidad el internet ha tomado un gran auge en la vida de las personas,
cada vez ms personas son dependientes de este servicio tan innovador, dado que a
travs de l pueden encontrar entretenimiento, informacin de inters, productos,
negocio, etc.
El nico medio nativo de comunicacin entre la World Wide Web (servicio de
aplicacin de Internet) y el usuario final es a travs de un navegador web que es un
programa que permite visualizar la informacin que contiene una pgina web.
Con un navegador web, el usuario es capaz de hacer todas esas transacciones en
lnea con un solo clic y sin necesidad de saber mucho de computadoras adems la
informacin se transmite casi instantneamente.

El presente proyecto est orientado al desarrollo de una aplicacin de escritorio

que permita simular un navegador web el cual ser capaz de mostrar una o ms
pginas web a partir de archivos de entrada, que no son ms que archivos con cdigo
fuente.
A continuacin especificaremos cada uno de los lenguajes de programacin
que el navegador web debe reconocer, luego explicaremos acerca del manejo de
errores y por ltimo definiremos requerimientos de interfaz grfica.

Objetivos generales

Aplicar conocimientos del anlisis y diseo de sistemas para poder construir un

navegador Web.

Objetivos especficos
Generar gramticas capaces de reconocer lenguajes de alto nivel y que aplique
definiciones dirigidas por la sintaxis para la resolucin del problema planteado.

 Disear y construir un intrprete que permita reconocer archivos de entrada

creados en HTML, CSS y Java Script.
Utilizar herramientas de diseo y construccin de gramticas.
Representar grficamente las ideas que el desarrollador web plasm en un
cdigo fuente y mostrar el comportamiento de sus sitios de manera que un
usuario inexperto pueda interactuar con ellos sin complicacin.

Descripcin general
El proyecto consiste en una aplicacin de escritorio que sea capaz de explorar o
navegar sobre pginas web (Navegador Web). Como tal, la aplicacin muestra el
resultado del anlisis a partir de una serie de archivos (PNG, HTML, CSS y js).
El proyecto tiene las siguientes caractersticas:

El programa recibir como entrada archivos HTML (puede contener cdigo java script,
CSS y HTML).

Internamente poseer intrpretes que van a analizar esos archivos de entrada.

Cada etiqueta HTML, ser mapeada de alguna manera hacia controles de C# (no generar
archivo de salida, solo una visualizacin en una ventana en tiempo de ejecucin), que
sern mostrados en la ventana del navegador. Por ejemplo en el momento que
ingresamos un archivo HTML con un botn y dos cajas de texto, definidas con cdigo
HTML, se debe colocar el botn y las cajas de texto en la ventana del navegador como
controles de c#.

Percepcin del usuario al usar la aplicacin

En el momento que un usuario (inexperto) utilice la aplicacin debe ocurrir esta serie de
eventos:
1. El usuario ingresa una direccin de un sitio Web (Para efectos del proyecto sera una
direccin local de su disco duro).
2. Luego el navegador mostrar, en la barra de estado, que la pgina est cargando.
3. La pgina debe aparecer en la pantalla principal de la aplicacin, o sea en el navegador.
4. El usuario va a interactuar con la pgina web, que seguramente tendr un
comportamiento y lgica definida (en este caso podra ser que el usuario de clic en
algn link y este haga cargar otro sitio Web, por lo tanto se repite el proceso).
Los archivos de entrada estarn definidos en HTML, CSS y Java script.
HTML: Permite definir la estructura de las pginas.
CSS: Permite dar formato a los objetos HTML que contiene la pgina.
Java Script: Permite definir un comportamiento a los objetos HTML, entindase eventos,
operaciones aritmticas, etc.

A continuacin vamos a explicar a fondo como van a ser definidos los lenguajes dentro
del alcance del proyecto adems, a medida que vayamos explicando cada lenguaje, vamos a ir
construyendo un ejemplo para mostrar que roles tiene cada lenguaje en la construccin de la
pgina web.

Definicin de los lenguajes de programacin

Lenguaje HTML
Vamos a dividir en dos partes la definicin del lenguaje HTML. La primera parte solo definir
algunas etiquetas bsicas y la segunda definir objetos grficos de HTML.
Recuerde que este leguaje define la estructura de la pgina que debe ser mostrada en la
ventana principal del navegador web. En el ejemplo, que se explicar al final de la definicin
de este lenguaje, se asumir que an no tiene estilo ni comportamiento solo HTML puro.
La idea que se persigue es mostrar el rol que tiene el lenguaje HTML dentro de la construccin
de una pgina y facilitar la comprensin de este enunciado.

Etiqueta

Propiedades y ejemplos

Permite insertar vnculos

Href: Permite crear un link a una pgina web o a alguna accin
JavaScript
Ejemplo:
<a href=PaginaPrincipal.html>este es un link</a>
<a hfref=javascript:accin()> este es un link </a>
Resultado:
Este es un link

Permite escribir texto en negrita

Ejemplo:
<b>texto en negrita</b>
Resultado:
Texto en negrita

br

Fuerza al quiebre de una lnea

Muestra el texto en itlica

Ejemplo:
<i>texto en negrita</i>
Resultado:
Texto en Itlica

table

Permite crear una tabla para organizar los objetos de la pgina web.
Propiedades:
Border: Permite definirle un grosor de borde a las celdas de la tabla.
Id: Un identificador que en algn momento puede ser usado para distinguir el
objeto de los dems.
Name: Un nombre que en algn momento podra ser usado para agrupar un
conjunto de objetos con el mismo nombre
Width: Permite definir que tanto ocupar en la ventana la tabla, se definir en
porcentaje.
Ejemplo:
<table id=tabla1 name=tabla width=50%>

</table>
Especifica una fila en una table. Es requerido que este dentro de un etiqueta
Table
Propiedades:
Id: Un identificador que en algn momento puede ser usado para distinguir el
objeto de los dems.
Name: Un nombre que en algn momento podra ser usado para agrupar un
conjunto de objetos con el mismo nombre
Ejemplos:
<tr id=fila1 name=fil> </tr>
Especifica un dato en una tabla. Es requerido que este dentro de un etiqueta
tr
Propiedades:
Id: Un identificador que en algn momento puede ser usado para distinguir el
objeto de los dems.

tr

td

Name: Un nombre que en algn momento podra ser usado para agrupar un
conjunto de objetos con el mismo nombre.
align
Define la alineacin del contenido de una celda. Puede ser uno de los siguientes
valores (insensibles a maysculas/minsculas):

left: El contenido es alineado a la izquierda. Este es el valor

predeterminado para celdas comunes.
center: El contenido es centrado. Este es el valor predeterminado para
celdas de encabezado.
right: El contenido es alineado a la izquierda.

valign
Especifica la alineacin vertical del contenido de una celda. Funciona
exactamente como el atributo "align" pero para el espacio vertical. Los valores
posibles son:

top: El contenido es alineado arriba.

middle: La informacin es centrada verticalmente. Este es el valor
predeterminado.
bottom: El contenido es alineado abajo.

Colspan
Especifica el nmero de de filas que una celda ocupar. Su valor debe ser
numrico.
Ejemplo:
<td aling=left id=fila2></td>
<td aling=left id=fila2 colspan=4 name=dato1></td>

center

Title
head
body
div

Permitir centrar cualquier objeto que se encuentre encerrado entre este

etiqueta.
Ejemplo:
<center> </center>
Permitir poner un ttulo a la pgina web que se est trabajando
Define un encabezado de una pgina web
Define el cuerpo de la pgina web
Es un container donde se pueden agrupar varios objetos. En este caso lo
utilizaremos para darle un estilo CSS comn a una serie de objetos
<div id=identificador name=nombre>contenido</div>

A continuacin se detallar como hacer algunos objetos de interfaz grfica con el

lenguaje HTML.
Control
Botn

cdigo
Existen dos tipos de botones:
Submit: Este botn hace un request al servidor de
aplicacin.
Deber llevar la siguiente estructura:
<input type=submit id=iden name=nombre
value=aceptar/ >
Button: Este botn no hace request al servidor sino
que enva un evento.
<input type=button id=iden name=nombre
value=aceptar/ >

Eventos
onClick()

Checkbox

<input type=checkbox id=iden name=nombre>

Valor
</input>
Si en caso esta chequeado agreagar la palabra selected
<input type=checkbox id=iden name=nombre
selected>
Valor
</input>
Para que los radioButton puedan ser agrupados, es
necesario asignarles el mismo nombre. En caso que
este seleccionado alguno, aplica lo mismo que los
CheckBox.
<input type=Radio id=iden name=nombre>
Valor
</input>
<select id=identificador>
<option id=id1 name=name value=valor>
Opcion1
</option>
<option id=id2 name=name value=valor>
Opcion2
</option>
<option id=id3 name=name value=valor>
Opcion3
</option>
</select>
<input type=Text id=iden name=nombre
value=aceptar size=10/ >

Onchange()

radioButton

comboBox

TextBox

TextArea

<textarea id=area rows="2" cols="200">

Este es un texto que pertenece al TextArea
</textarea>

Onchange()

Onchange()

Comentarios <!-Esto es un comentario

<B>Al ser un <i>comentario</i></B> no aparecer nada en
la pgina
<p>Ni las etiquetas HTML tendrn valor</p>
-->

Cada uno de los atributos de las etiquetas que se han detallado, son opcionales por lo
tanto no necesariamente todos los atributos deben estar presentes o venir en orden
(si en caso algn atributo falta, se le debe dar un valor por defecto pero todos los
atributos deben estar presentes lgicamente, entindase en su estructura interna que
definan), adems todas las etiquetas pueden ser anidadas, es decir dentro de las
etiquetas puede ir cualquier cantidad de etiquetas de cualquier tipo.
A continuacin se mostrar un ejemplo con un archivo de entrada donde solo hay
cdigo HTML:
<html>
<head>
<title>Ejemplo de compiladores 2</title>
<head>
<body>
<b>BIENVENIDOS</b>
<table id="tabla1" border="1">
<tr>
<td>uno</td><td>dos</td><td>tres</td><td>cuatro</td>
</tr>
<tr>
<td colspan="2">uno y dos</td>
<td colspan="2"> tres y cuatro </td>
</tr>
<tr>
<td align="right">Nombre</td>
<td colspan="3">
<input type="text" id="txtIden" name="caja" value="" size="5"/>
</td>
</tr>
</table>

<br>
sexo
<select "slcIden">
<option id="opiden1" value="1">Masculino</option>
<option id="opiden1" value="1">femenino</option>
</select>
<br>
cometarios:
<br>
<TextArea id="txtArea" rows="10" cols="30">
Escriba aca su comentario
</TextArea>
<br>
<br>
<input type="button" id="btnAceptar" value="ACEPTAR"/>
</body>
</html>

La salida debe ser la siguiente:

Figura 2.0
Note que con este lenguaje solo definimos que debe llevar la pgina.
A continuacin continuaremos definiendo el lenguaje CSS.

Lenguaje CSS
Para poder posicionar, redimensionar, colorear, dar borde y estilos de letra a nuestras
pginas web, utilizaremos hojas de estilo en cascada (CSS). Es un lenguaje usado para
definir la presentacin de un documento estructurado escrito en HTM.
La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un
documento de su presentacin.
El navegador solo modifica las propiedades grficas de cada objeto mapeado a
controles de C#.
A continuacin definiremos que partes del cdigo CSS sern soportados por el
navegador.
Atributo
Backgroundimage
backgroundcolor

height

width

border

font

position

Descripcin
Permitir agregar una imagen.
Ejemplo de uso:
background-image:url('paper.gif');
Permitir agregar un color de fondo.
Ejemplo de uso:
background-color:yellow;
background-color:#00ff00;
background-color:rgb(255,0,255);
Permite definir una altura a cierto objeto. Puede ser definido en
pixeles.
Ejemplo de uso
height:100px;
Permite definir una anchura a cierto objeto. Puede ser definido
en pixeles.
Ejemplo de uso
width:100px;
Permite hacer un borde a algn objeto.
Ejemplo de uso:
border:5px solid red;
Permite definir un estilo de letra para un texto determinado.
Ejemplos de uso:
font:italic bold 12px Georgia,serif;
font:15px arial,sans-serif;
Permite determinar que tipo de posicin tiene el objeto.
Puede ser de dos formas:
1. Relative, o sea si este objeto esta dentro de otro, la
posicin que se le determine al objeto ser con respecto a
su container.
2. Absolute, el objeto se posicionara sin contemplar su
container.
Ejemplo de uso:

top

left

color

text-align

vertical-align

Comentario

position:absolute;
position:relative;
Permite posicionar un objeto en un determinado lugar. Top
solamente toma en cuenta el eje vertical y toma como referencia
la parte superior del mismo.
Ejemplo de uso:
top:5px;
Permite posicionar un objeto en un determinado lugar. left
solamente toma en cuenta el eje horizontal y toma como
referencia la parte izquierdo del mismo.
Ejemplo de uso:
left:5px;
Setea un color a un texto determinado.
Ejemplos de uso:
color:red;
color:#00ff00;
color:rgb(0,0,255);
Permite determinar cmo se puede alinear un texto.
text-align:center
text-align:left
text-align:right
Permite alinear un texto verticalmente.
vertical-align:text-top
vertical-align:text-middle
vertical-align:text-bottom

/*este es un comentario
De varias
lneas*/

Para poder crear un estilo para uno o ms objetos se llevar la siguiente sintaxis:
#objeto {
background-color:#00ff00;
width:100px;
height:100px;

Hay dos formas de implementarlo:

Hoja de estilo interna:

Dentro de una pgina web, se pueden ingresar etiquetas de tipo <style

rel="stylesheet" > </style> los cuales deben ir en el encabezado de la pagina.
<html>
<head>
<style>
#objeto {
background-color:#00ff00;
width:100px;
height:100px;

}
</style>

</html>

Hoja de estilo externa

Se pueden definir archivos aparte con extensin CSS y luego importarlo a la pgina
web por medio de las etiquetas <link href="estilo.css" rel="stylesheet"
type="text/css" />
Ejemplo:
Tomando como base el ejemplo anterior, vamos a agregar cdigo CSS para mostrar el
efecto que tiene sobre las pginas web, por lo tanto ahora nuestro cdigo contiene
HTML y CSS. Vamos a resaltar con un color las partes que se le agregaron al HTML.
Para el archivo estilo.css
#inicio{
text-align:center;
color:red;
font:50px arial,sans-serif
}
#tabla{
text-align:left;
color:blue;
left:500px;
top:500px;
font:20px arial,sans-serif
}
#inferior{
text-align:center;
color:red;
font:bold 15px arial,sans-serif
}

Para el archivo de nuestro ejemplo HTML le hicimos algunos ajustes:

<html>
<head>
<title>Ejemplo de compiladores 2</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<style rel="stylesheet" >
#todo{
background-color:yellow;
}
</style>
<head>
<body>
<div id="todo" name="todo">
<div id="inicio" name="inicio">BIENVENIDOS</div>
<div id="tabla" name="tabla">
<center>
<table id="tabla1" border="1" name="tabla1">
<tr>
<td>uno</td><td>dos</td><td>tres</td><td>cuatro</td>
</tr>
<tr>
<td colspan="2">uno y dos</td>
<td colspan="2"> tres y cuatro </td>
</tr>
<tr>
<td align="right">Nombre</td>
<td colspan="3">
<input type="text" id="txtIden" name="caja" value=""
size="5"/>
</td>
</tr>
</table>
</center>
<br>
</div>
<div id="inferior" name="inferior">
sexo
<select "slcIden">
<option id="opiden1" value="1">Masculino</option>
<option id="opiden1" value="1">femenino</option>
</select>
<br>
cometarios:
<br>
<TextArea id="txtArea" rows="10" cols="30">
Escriba aca su comentario
</TextArea>
<br>

<br>
<input type="button" id="btnAceptar" value="ACEPTAR"/>
</div>
</div>
</body>
</html>

La imagen resultante ser como sigue:

Figura 3.0
Ntese que para cada bloque de cdigo CSS hay una etiqueta <div> que le corresponde
y coincide en nombre. Esta ser la forma como se debe hacer que se relacione CSS con
HTML.
Adems en el ejemplo se muestra un archivo por separado y tambin cdigo CSS
dentro del mismo HTML.
Como puede observar en la figura 3.0, ahora la pgina tiene un formato definido. Los
objetos fueron posicionados y se le ha dado un estilo de letra a los textos adems se
definieron algunos colores.
A continuacin vamos a definir el lenguaje Java Script:

Lenguaje Java Script

Es un lenguaje que funciona del lado del cliente que permite programar cierta lgica a
nuestras pginas web. Este cdigo es estimulado por medio de algn evento con los controles
HTML.
El cdigo HTML debe ir como sigue:
<script lenguaje=JavaScript>

</script>
O bien podran usarse archivos por aparte con cdigo java script. Estos archivos debern tener
extensin js. Luego se usarn la siguiente etiqueta para poder incluirlas al documento.
<script language="javascript" src="javascript.js"></script>
Deben manejar una tabla de smbolos para cada variable y objeto HTML definido. La razn de
incluir objetos HTML (todo tipo de etiqueta y sus respectivos atributos) es que es necesario
aplicar acciones sobre esos objetos.
Forma de implementacin
1. Cuando se haya analizado todo el archivo de entrada (archivo .html) y sus referencias
(archivos .js), van a ir copiando el cdigo fuente de java Script en archivos temporales,
se aconseja que hagan un archivo por funcin para facilitar el anlisis (no deben
traducir nada), tambin se debe construir de una vez la tabla de smbolos.
2. Van a crear una gramtica exclusivamente para Java Script. Esta adems de reconocer
Java Script debe tener acciones semnticas correspondientes a cada instruccin
(operaciones aritmticas, sentencias de control, declaracin de variables) de manera
que se puedan ejecutar.
3. Cuando su navegador quiere realizar alguna funcin Java Script (podra ser en
cualquier momento y en repetidas ocasiones), este buscar el archivo donde
almacenaron las funciones y luego buscar la que se ha mandado a llamar. Esta
funcin est guardada como cdigo fuente, por lo tanto se debe invocar el analizador
de Java Script el cual se encargar de ejecutar lo que est definido en esa funcin y por
supuesto va a usar la tabla de smbolos, que ya esta creada, para acceder a las
variables.

Descripcin general del lenguaje:

Sentencia
Declaracin de variables

Declaracin de arrays
Definicin de funciones

Descripcin
var variable1, variable2, variable3
variableN;
var variable1=valor;
Las variables manejarn un mbito desde
donde son alcanzables. La declaracin de
variables locales y globales es exactamente
igual.
Var variable=new Array(tamao)
Function nombre(parmetros){

}
Donde los parmetros son opcionales y no
deben llevar tipo, solamente los nombres de
las variables.

Sentencia If

if(condicin){

}
Si en caso solo viene una operacin dentro
del if se puede escribir de esta manera:
if(condicin)
operacin

Sentencia If-else

if(condicion1){
}
else if (condicion2){
}
else if(condicion3){
}
.
else{
}
switch(id){
case valor1:
.
break;
case valor2:
.
break;
case valor3:

break;
.
.
.
default:

Sentencia switch

Return

Permite salir de una funcin y devolver algn

valor

Todas las sentencias mencionadas pueden ser anidadas entre s (es posible declarar
variables dentro de cualquier sentencia y su mbito es restringido a dicha sentencia) y
deben ser ejecutadas por la aplicacin en tiempo real.
Operadores
Tipos de operadores
Asignacin
Ternario
Or
And
Relacionales
Comparacin
Adicin
Multiplicacin
Unarios
Postfijos
Prefijos
Ejemplos de una expresin

Smbolo
= += -= *= /= %=
Var1=condicin?valor1:valor2
||
&&
<
=<
=>
>
==
!=
+
*
/
%
!
+
variable++
variable---variable
++variable
N=(y-x*(19%t))>10 && x==34
N=x>3||x<1?56:98;
Que es equivalente a decir:
If(x>3||x<1){
N=56;
}
else{
N=98;
}

Literales

Tipos de Literales
Cadenas
Enteros
Booleanos
flotante
Especiales

Ejemplo
Hola mundo
1, 5, 6, 78
true, false
14.6, 7.4, 98.15
atributo1, texto1
Este tipo de literales ser usada para
referirse a objetos HTML o bien para links

Operaciones especiales

Operacin
toString()
subString(inicio, fin)
alert(variable)
getElementsByName

Caracterstica
Convierte un numero en cadena
Parte una cadena de caracteres
Muestra un mensaje con un cuadro de texto
Permite obtener un elemento HTML a partir de su nombre.
Recuerde que todos esos objetos como tales poseen una serie
de atributos, tales como value, id, name, width, etc, los cuales
podran cambiar por ejemplo:
Var x=document.getElemntByName(caja);
x.value=nuevo texto;
En ese momento la caja de texto obtendr nuevo valor lo cual
permite manipular fcilmente a un control HTML.

getElementById
open

Permite obtener un elemento HTML a partir de su Id

Aplican lo mismo que la funcin anterior
Abre una ventana nueva HTML
window.open(URL,nombre_de_la_ventana,forma_de_la_ventana)
URL: Representa el URL que deseamos abrir en la ventana
secundaria.
nombre_de_la_ventana: Es el nombre que se le asigna a esta
ventana para dirigir enlaces con el atributo target del HTML
forma_de_la_ventana: Se indica el aspecto que va a tener la
ventana secundaria. Por ejemplo se puede definir su altura,
anchura, si tiene barras de desplazamiento, etc.
Ejemplo:
window.open("c:\users\mensaje.html" , "ventana1" ,
"width=120,height=300,scrollbars=NO")

close

Cierra la ventana actual HTML

Close()
redirect
Redireccin a una pagina nueva HTML
parseInt
Permite convertir cadenas en enteros
Parse Float
Permite convertir cadenas en Flotantes
Comentarios
/*este es un comentario de varias
lneas*/
//este es un comentario de una sola lnea
Para las funciones especiales hay que validar que los parmetros que se le ingresen
son correctos de otra manera se deber marcar un error. Los cuales sern explicados
ms adelante.
Para acceder a los objetos definidos en HTML ya se mostraron dos funciones
especiales. Haremos un poco de nfasis en cuanto al acceso y modificacin de los
atributos de objetos HTML:

Acceso de atributos HTML

Var <alguna variable> = document.getElementById(<Id del objeto>).<atributo>;

Para este caso se est dando el valor del atributo de cierto objeto HTML, diferenciando
su Id, a alguna variable definida.
Var <alguna variable> = document.getElementsByName(<nombre>).<atributo>;
Para este caso se est dando el valor del atributo de cierto objeto HTML, tomando su
Nombre como base, a alguna variable definida (Tomar en cuenta que si varios objetos
HTML se llaman igual, es posible agruparlos en un array y accederlos por medio de
posiciones).
Modificacin de atributos HTML

document.getElementById(<Id del objeto>).<atributo>=valor;

Ejemplo:
Vamos a tomar de referencia el ejemplo que hemos venido armando a medida que se
va explicando el enunciado. Ahora vamos a agregar una funcionalidad a la pgina web.
Ac es donde entra en accin el lenguaje Java Script. Vamos a hacer que se tome el
texto del textArea y se muestre en un cuadro de dilogo al darle clic al botn:
<html>
<head>
<title>Ejemplo de compiladores 2</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<style rel="stylesheet" >
#todo{
background-color:yellow;
}
</style>

<script languaje="JavaScript">
function MostrarTexto(){
var texto=document.getElementById("txtArea").value
alert(texto);
}
</script>
<head>
<body>
<div id="todo" name="todo">
<div id="inicio" name="inicio">BIENVENIDOS</div>
<div id="tabla" name="tabla">

<center>
<table id="tabla1" border="1" name="tabla1">
<tr>
<td>uno</td><td>dos</td><td>tres</td><td>cuatro</td>
</tr>
<tr>
<td colspan="2">uno y dos</td>
<td colspan="2"> tres y cuatro </td>
</tr>
<tr>
<td align="right">Nombre</td>
<td colspan="3">
<input type="text" id="txtIden" name="caja"
value="" size="5"/>
</td>
</tr>
</table>
</center>
<br>
</div>

<div id="inferior" name="inferior">

sexo
<select "slcIden">
<option id="opiden1" value="1">Masculino</option>
<option id="opiden1" value="1">femenino</option>
</select>
<br>
cometarios:
<br>
<TextArea id="txtArea" name="txtArea" rows="10" cols="30">
Escriba aca su comentario
</TextArea>
<br>
<br>
<input type="button" id="btnAceptar" value="ACEPTAR"
onclick="MostrarTexto();"/>
</div>
</div>
</body>
</html>

Notar que lo que esta resaltado en verde es el evento que se especific en el apartado
de HTML. Y lo que se encuentra en amarillo es una funcin java script que contiene
cierta lgica para poder mostrar esa alerta.
Nota: No confundir el lenguaje Java Script con el lenguaje Java, aunque su sintaxis sea
parecida son dos lenguajes totalmente diferentes. Java Script es para definir acciones
en pginas web y Java es un lenguaje de programacin orientado a objetos.

Figura 5.0
Este debera ser el resultado. Como se muestra en la figura 5.0, ya la pgina
tiene un comportamiento definido, esto permite que el usuario pueda interactuar con
la pgina web.

Manejo de errores
En general debe mostrarse un reporte de que error se encontr, en que archivo, la lnea y la
posicin.
Ejemplo:
Tipo de error
Lxico
Sintctico
Semntico

Localizacin
Salida.html, lnea 2, posicin 34
Lgica.js, lnea 34, posicin 10
Lgica.js, lnea 20, posicin 13

Descripcin
No se pudo reconocer el smbolo $
Falta un operador para la expresin
No se declaro la variable x

Adems del reporte que se debe detallar se deben tomar las siguientes consideraciones a la
hora de algn error en los siguientes lenguajes:

HTML
Recuperarse del error y terminar de construir la pgina web. En el peor de los casos no aplicar
la o las etiquetas con el error.

CSS
No aplicar cambios en los controles HTML.

Java Script
No aplicar operaciones debido a que la lgica est defectuosa.

A continuacin definiremos los requerimientos de interfaz grfica:

Interfaz grfica
Debe contener lo que se detalla a continuacin:
1. Una la barra de direcciones donde se pueden ingresar las direcciones de las
pginas web.
2. Pestaas de pginas abiertas. Tomar en cuenta que es posible que algunas no
se han terminado de cargar por lo tanto deben usarse hilos para que carguen
simultneamente.
3. Botones donde se ir controlando la navegacin de cada pgina, se deben crear
los siguientes:
Atrs, significa que se volver a la pgina que se encontraba
anteriormente, recordar que si bien se le haya hecho cambios al cdigo
fuente, esta no debe haberlos percibidos debido a que se est viendo
una pgina que ya fue cargada.
Adelante, Significa que se regresar a una pgina de la cual uno
presion el botn atrs anteriormente.
Actualizar, Debe volver a cargar la pgina desde el cdigo fuente.
Home, El programa tendr una pgina default que ser cargada a la
hora de seleccionar esta opcin
Detener, Abortar la carga a la pgina sin embargo eso no significa que
la pgina ya no deba mostrarse. Lo que ocurre internamente es que ya
no se sigue ejecutando el cdigo fuente, por lo tanto solo se mostrar lo
que ya se ha cargado.
4. Una barra de direcciones donde se vea el estado de la pgina (cargando,
cancelada, con errores, etc.).
5. Se debe guardar un historial de las pginas visitadas, de esta manera podr
tenerse un histrico de los mismos.
6. Una carpeta de archivos temporales.

Barra de direcciones

Pestaas de pginas abiertas

rea donde se muestra la pgina

Botones para navegar entre las

pginas (atrs, adelante,
actualizar, detener y home)

Barra de estado que muestre el

status de la carga de las pginas

Figura 6.0
En la figura 6.0 se muestra una propuesta de interfaz grfica, desarrollada por Mozilla.
El diseo de la interfaz queda a criterio del estudiante y ser tomado en cuenta la
creatividad y el ingenio que presente.

Lenguajes y herramientas a utilizar

El lenguaje de programacin ser C# 2008 de .Net

La herramienta de generacin de compiladores ser goldParser

Datos importantes
La calificacin del proyecto es personal y deber realizarse el da acordado para su respectiva
entrega y calificacin.
La aplicacin de conocimientos correspondientes a cursos de semestres anteriores o el actual,
es indispensable para realizar una parte o la totalidad de la prctica o los proyectos. Si existe
alguna duda al respecto, se pueden dirigir a los auxiliares a quienes les pueden preguntar
acerca de sus dudas.
Copias en cualquiera de las actividades tericas o prcticas tendrn una nota de cero puntos y
sern reportados al catedrtico titular de su seccin y a la Escuela de Ciencias y Sistemas para
su respectiva sancin.
Se deben de utilizar los lenguajes y herramientas indicados, de caso contrario se tendr cero
de nota.
Copias de gramticas y cdigo, totales o parciales tienen cero
catedrtico de su seccin y a la Escuela de Ciencias y Sistemas.
Cdigo bajado de internet tiene cero.
Gramtica bajada de internet tiene cero.

y sern reportados al

Entregables
1. Gramticas de cada uno de los lenguajes explicados en este enunciado.
2. Navegador Web funcional.
3. Diagrama de clases, secuencias, componentes y casos de uso.
4. Manual de usuario.

Fecha de entrega:
10 de septiembre del 2010 No hay prrroga. Se entrega todo en un solo disco compacto y es
presencial la entrega. El lugar y hora ser acordado con su auxiliar.

Fases a entregar
Las fases sern enviadas por medio de correo electrnico. No se recibirn fases fuera de esas
fechas.
Fecha de entrega
5 de agosto

12 de agosto
22 de agosto
29 de agosto
10 de septiembre

Descripcin
Entrega de las gramticas de los lenguajes y
los diagramas de clases, secuencias,
componentes y casos de uso.
Acciones semnticas de los lenguajes
Interfaz grfica completa, incluye el
reconocimiento de cdigo HTML y CSS
Generacin de tablas de smbolos para HTML
y Java Script
Entrega del proyecto completo (presencial)

Para tener derecho a entrega y calificacin de proyecto, los alumnos debern cumplir con la
entrega de las fases del proyecto indicadas en este documento. Quien no las entregue no tiene
derecho de calificacin del proyecto.

Ejemplo complementario:
<html>
<head>
<title>Calculadora</title>
<script languaje="JavaScript">
var op1;
var op2;
var status=1;
var operador;
function IngresarNum(numero){
var cajaTexto=document.getElementById("txtTexto").value;
document.getElementById("txtTexto").value=cajaTexto+numero.toString();
};
function almacenar(op){

op1=parseInt(document.getElementById("txtTexto").value,10);
document.getElementById("txtTexto").value='';
operador=op;
};
function operar(){
op2=parseInt(document.getElementById("txtTexto").value,10);
document.getElementById("txtTexto").value='';
var resultado=0;
if(operador==1){
resultado=op1+op2;
}
else if(operador==2){
resultado=op1-op2;
}
op1=op2=0;
document.getElementById("txtTexto").value=resultado.toString();
};
</script>
<style rel="stylesheet" >
#todo{
background-color:Blue;
position:relative;
left:300px;
top:200px;
width:400px;
}
</style>
</head>
<body>
<div id="todo" name="todo">

<table id="calcu" name="clac" width="50%" align="center" border="1">

<tr>
<td colspan="4" ><input type="text" id="txtTexto"
size="100px" name="texto"/></td>
</tr>
<tr>
<td><input type="button" id="btn1" value="1"
onclick="IngresarNum(1);"/></td>
<td><input type="button" id="btn2" value="2"
onclick="IngresarNum(2);"/></td>
<td><input type="button" id="btn3" value="3"
onclick="IngresarNum(3);"/></td>
</tr>
<tr>
<td><input type="button" id="btn4" value="4"
onclick="IngresarNum(4);"/></td>
<td><input type="button" id="btn5" value="5"
onclick="IngresarNum(5);"/></td>
<td><input type="button" id="btn6" value="6"
onclick="IngresarNum(6);"/></td>
</tr>
<tr>
<td><input type="button" id="btn7" value="7"
onclick="IngresarNum(7);"/></td>
<td><input type="button" id="btn8" value="8"
onclick="IngresarNum(8);"/></td>
<td><input type="button" id="btn9" value="9"
onclick="IngresarNum(9);"/></td>
</tr>
<tr>
<td><input type="button" id="btn0" value="0"
onclick="IngresarNum(0);"/></td>
<td><input type="button" id="btnmas" value="+"
onclick="almacenar(1)"/></td>
<td><input type="button" id="btnmenos" value="-"
onclick="almacenar(2)"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnigual" value="="
colspan="2" onclick="operar()"/></td>
</tr>
</table>
</div>
</body>
</html>

Salida respectiva en nuestra aplicacin: