[Compi2]proyecto1 1 sem_2018v9.0

Universidad de San Carlos de Guatemala
Facultad de Ingeniería
Escuela de Ingeniería en Ciencias y Sistemas
Organización de lenguajes y compiladores 2
Primer Semestre 2018
Catedráticos: Ing. Bayron López, Ing. Edgar Sabán
Tutores académicos: Juan Ruiz, José Cano, Henry Taracena y Daniel Alvarez.
USAC-WEB
Primer proyecto de laboratorio
Tabla de contenido
1 Descripción ......................................................................................................... 4
2 Objetivos ............................................................................................................. 5
2.1 Objetivo General ........................................................................................... 5
2.2 Objetivos Específicos.................................................................................... 5
3 USAC-WEB......................................................................................................... 5
3.1 Componentes................................................................................................ 5
3.2 Opciones....................................................................................................... 7
4 Ejemplo de página web....................................................................................... 9
4.1 Pasos de interpretación del ejemplo ........................................................... 10
4.1.1 Paso 1 .................................................................................................. 10
4.1.2 Paso 2 .................................................................................................. 11
4.1.3 Paso 3 .................................................................................................. 12
4.1.4 Paso 4 .................................................................................................. 13
4.1.5 Paso 5 .................................................................................................. 16
4.1.6 Paso 6 .................................................................................................. 17
5 Lenguajes ......................................................................................................... 18
5.1 CHTML........................................................................................................ 18
5.2 CJS ............................................................................................................. 28
5.2.1 Comentarios ......................................................................................... 28
5.2.2 Variables............................................................................................... 28
5.2.3 Asignación de valores........................................................................... 29
5.2.4 Tipos de datos...................................................................................... 29
5.2.5 Operadores........................................................................................... 30

5.2.6 Condiciones.......................................................................................... 31
5.2.7 Expresiones relacionales...................................................................... 31
5.2.8 Expresiones lógicas.............................................................................. 31
5.2.9 Precedencia de operadores y Asociatividad......................................... 32
5.2.10 Vectores............................................................................................ 32
5.2.11 Acceso a los elementos del vector.................................................... 33
5.2.12 Tamaño del Vector............................................................................ 33
5.2.13 Convertir a cadena............................................................................ 34
5.2.14 Si....................................................................................................... 34
5.2.15 Selecciona......................................................................................... 35
5.2.16 Ciclo Para.......................................................................................... 36
5.2.17 Ciclo Mientras.................................................................................... 36
5.2.18 Detener ............................................................................................. 37
5.2.19 Imprimir ............................................................................................. 37
5.2.20 Funciones.......................................................................................... 37
5.2.21 Retornar ............................................................................................ 38
5.2.22 Mensaje............................................................................................. 39
5.2.23 Eventos ............................................................................................. 39
5.2.24 Documento........................................................................................ 40
5.2.25 Obtener ............................................................................................. 40
5.2.26 SetElemento...................................................................................... 41
5.2.27 Observador ....................................................................................... 41
5.3 CCSS .......................................................................................................... 42
5.3.1 Comentarios de línea ........................................................................... 42
5.3.2 Comentarios múltiples línea ................................................................. 42
5.3.3 Case Insensitive ................................................................................... 43
5.3.4 Tipo de Datos ....................................................................................... 43
5.3.5 Operaciones Aritméticas....................................................................... 43
5.3.6 Cadenas ............................................................................................... 44
5.3.7 Elementos............................................................................................. 44
5.3.8 Editado de elementos........................................................................... 48
6 Requisitos Mínimos........................................................................................... 51
7 Entregables y Restricciones.............................................................................. 53
7.1 Entregables................................................................................................. 53
7.2 Restricciones............................................................................................... 53

Índice de imágenes
Imagen 1: Sugerencia de historial de páginas cargadas en el navegador. ................ 6
Imagen 2: Sugerencia de navegador web.................................................................. 6
Imagen 3: Sugerencia de opción ver código CHTML................................................. 7
Imagen 4: Sugerencia de opción ver código CJS. ..................................................... 7
Imagen 5: Sugerencia de opción ver código CCSS. .................................................. 8
Imagen 6: Sugerencia de opción consola salida........................................................ 8
Imagen 7: Sugerencia de opción consola de errores. ................................................ 9
Imagen 8: Ejemplo de página web. .......................................................................... 10
Imagen 9: Sugerencia de panel_1. .......................................................................... 12
Imagen 10: Sugerencia de panel_2.......................................................................... 13
Imagen 13: ejemplo index con CJS.......................................................................... 18
Índice de Tablas
Tabla 1: Elementos de etiqueta cuerpo.................................................................... 20
Tabla 2: Elementos de etiqueta cjs. ......................................................................... 20
Tabla 3: Elementos de etiqueta ccss........................................................................ 20
Tabla 4: elementos de etiqueta imagen. .................................................................. 22
Tabla 5: elementos de la etiqueta botón. ................................................................. 23
Tabla 6: elementos de la etiqueta enlace................................................................. 23
Tabla 7: elementos de la etiqueta caja de opciones. ............................................... 25
Tabla 8: elementos de la etiqueta opción................................................................. 26
Tabla 9: elementos generales.................................................................................. 27
Tabla 10: tipo de datos............................................................................................. 29
Tabla 11: operadores de lenguaje CJS.................................................................... 30
Tabla 12: Tabla de operaciones posibles según los operadores ............................. 30
Tabla 13: expresiones relacionales.......................................................................... 31
Tabla 14: operadores lógicos del lenguaje CJS. ...................................................... 32
Tabla 15: Tabla de precedencia de operadores y asociatividad .............................. 32
Tabla 16: operadores permitidos en CCSS.............................................................. 43
Tabla 17: precedencia de operaciones en CCSS. ................................................... 44
Tabla 18: valores de elemento alineado................................................................... 44
Tabla 19: valores del elemento formato. .................................................................. 45
Tabla 20: resumen de los elementos CHTML validos en CCSS. ............................. 50

1 Descripción
Para el primer proyecto del laboratorio deberán desarrollar un navegador web, capaz
de interpretar variaciones de los lenguajes HTML, JavaScript y CSS. De esta manera
poder desplegar páginas web.
Este navegador web tendrá el nombre de USAC-WEB que tendrá los componentes y
opciones descritas en el punto 3. Este navegador deberá ser desarrollado e
implementado en Java.
Los lenguajes por implementar serán los siguientes:
1. Compiladores-HTML (CHTML): variación del lenguaje HTML. Este lenguaje
definirá el contenido de la página web que será mostrada por el navegador.
2. Compiladores-JavaScript (CJS): variación del lenguaje JavaScript. Este
lenguaje permitirá agregar dinamismo y funcionalidades a la página web. CJS
permitirá realizar acciones con base en eventos.
3. Compiladores-CSS (CCSS): variación del lenguaje CSS. Este lenguaje definirá
estilos para la página web. Se basará en la definición de reglas que se
aplicarán al archivo CHTML.
El navegador web deberá interpretar los lenguajes anteriores, empezando por el
CHTML, donde mostrará la salida gráfica correspondiente, la salida deberá ser la
página web elaborada con las herramientas GUI de java.
El proceso de la interpretación deberá ser el siguiente:
• Interpretar el archivo CHTML, que tendrá como salida la representación gráfica
de los elementos que estén declarados en el archivo CHTML. Este archivo
mandará a llamar al intérprete de CJS y CCSS en el orden en el que se
encuentren en el archivo CHTML.
• Al interpretar el archivo CCSS se deberá aplicar cada una de las reglas
definidas en este lenguaje en los elementos gráficos del archivo CHTML.
• Al interpretar el archivo CJS se deberán ejecutar todas las instrucciones que
se encuentren en el archivo CJS y que no dependan de ningún evento. Las
instrucciones que dependan de un evento para ser ejecutadas permanecerán
en espera hasta que le evento las accione.

2 Objetivos
2.1 Objetivo General
Aplicar los conocimientos del curso de Organización de Lenguajes y Compiladores 2
en el desarrollo de una aplicación.
2.2 Objetivos Específicos
• Utilizar herramientas para la generación de analizadores léxicos y sintácticos.
• Implementar una solución de software que cumpla las funciones de un
explorador web.
• Implementar un conjunto de lenguajes que interactúen entre sí, generando una
salida tipo web.
• Aplicar los conocimientos de compiladores a la implementación del software.
• Aplicar análisis semántico a los diferentes lenguajes a implementar.
• Implementar un lenguaje de tipado dinámico y débil.
3 USAC-WEB
USAC-WEB será un navegador web que interpretará los lenguajes CHTML, CJS y
CCSS y mostrará el resultado en forma de página web. Este navegador debe ser
desarrollado como una aplicación de escritorio de Java.
3.1 Componentes
Los componentes que deberá tener USAC-WEB se encuentran listados a
continuación:
1. Ruta: es un espacio en donde se podrá ingresar la ruta física del archivo
CHTML que se interpretará.
2. Botón ir atrás: cargará la página anterior. Si no se ha cargado una página
anteriormente el botón deberá estar deshabilitado.
3. Botón ir adelante: si se usó el botón de ir atrás, con este botón se puede
mostrar la página que se cargó posteriormente. Si no se usó el botón de ir atrás
este botón debe estar deshabilitado.
4. Botón de Cargar Página: Buscará e interpretará el archivo CHTML que tenga
ingresado en la ruta del navegador.
5. Pestañas: el navegador deberá manejar varias pestañas con diferentes
páginas web. Cada pestaña mostrará el título de la página web. En caso no se
tenga configurado el titulo se quedará vacío.
6. Área de página de web: mostrará el resultado de la interpretación de los
lenguajes.
7. Barra de favoritas: barra de accesos directos en donde aparecerán las páginas
web que hayan sido marcadas como favoritas. Al final de la barra deberá
aparecer el botón que permitirá agregar la página actual como favorita.

8. Historial: botón que mostrará el historial de páginas web que han sido
consultadas en orden de fecha, al seleccionar una página del historial deberá
cargarla siempre que el archivo siga existiendo en la ruta que se consultó. En
la imagen 1 se puede apreciar un ejemplo de cómo debe visualizarse el
historial.
9. Opciones: botón que desplegará las opciones del sistema.
Imagen 1: Sugerencia de historial de páginas cargadas en el navegador.
En la imagen 2 se puede visualizar un ejemplo del navegador con sus componentes.
Cada componente está señalado con el número correspondiente al listado anterior.
Imagen 2: Sugerencia de navegador web.

3.2 Opciones
Las opciones que deberá tener USAC-WEB se encuentran listadas a continuación:
1. Ver código CHTML: opción que permitirá ver el código fuente del lenguaje
CHTML de la página web. En la imagen 3 se muestra un ejemplo de esta
opción.
Imagen 3: Sugerencia de opción ver código CHTML.
2. Ver código CJS: opción que permitirá ver el código fuente del lenguaje CJS de
la página web. Se deberán mostrar todos los archivos CJS que haya
interpretado el navegador para esa página web. En la imagen 4 se muestra un
ejemplo de esta opción.
Imagen 4: Sugerencia de opción ver código CJS.

3. Ver código CCSS: opción que permitirá ver el código fuente del lenguaje CCSS
de la página web. Se deberán mostrar todos los archivos CCSS que haya
interpretado el navegador para esa página web. En la imagen 5 se muestra un
ejemplo de esta opción.
Imagen 5: Sugerencia de opción ver código CCSS.
4. Consola Salida: opción que permitirá mostrar la consola de salida del
navegador. La consola de salida mostrará las cadenas de texto que se manden
a imprimir desde el lenguaje CJS. Además de la cadena de texto, se deberá
mostrar el archivo, número de línea y columna donde se mandó a imprimir. En
la imagen 6 se muestra un ejemplo de esta opción.
Imagen 6: Sugerencia de opción consola salida.

5. Consola de Errores: opción que mostrará los errores que hayan surgido al
momento de la interpretación del código de alto nivel de cualquier tipo (léxico,
sintáctico, semántico). Se deberá mostrar el número de línea, columna, tipo y
la descripción del error. En la imagen 7 se muestra un ejemplo de esta opción.
Imagen 7: Sugerencia de opción consola de errores.
4 Ejemplo de página web
En el siguiente ejemplo se implementará el código que genera una página web que
recibirá la información (nombre, nota de proyecto 1, nota de proyecto 2 y un
comentario) de un estudiante. Con base en la información ingresada, se desean
implementar las siguientes funcionalidades:
• Calcular promedio de notas
• Suma de notas
• Resta de notas
• Multiplicación de notas
• Obtener residuo de la división dentro de 7 de la nota del proyecto 1
• Obtener residuo de la división dentro de 11 de la nota del proyecto 2
En la página web se deberá elegir una funcionalidad a realizar y se desplegará el
resultado, junto con los datos del estudiante, en otra sección de la misma página web.
De igual manera, la página web deberá mostrar tres botones que tienen como
funcionalidad el redireccionar a otras páginas web y mostrará el texto “Calificación
Compiladores 2 Proyecto 2” debajo de los botones.
La página se visualizará de la manera en que se muestra en la imagen 8.

Imagen 8: Ejemplo de página web.
4.1 Pasos de interpretación del ejemplo
A continuación, se describen los pasos a seguir para el desarrollo del ejemplo.
4.1.1 Paso 1
Se creará el encabezado de la página web. Dentro del encabezado se llamará al
archivo CCSS, en donde se definirán los estilos, y al archivo CJS, que implementará
las funcionalidades. Esto se implementará de la siguiente forma.
<//- Inicio CHTML -//>
<CHTML>
<//- Contenido encabezado -//>
<ENCABEZADO>
<//- Estilo de la intefaz grafica de la página web -//>
<CCSS ruta="C:proyecto1archivo_entrada_estilo.ccss";><FIN-CCSS>
<CJS ruta="C:proyecto1archivo_entrada_estilo.cjs";><FIN-CJS>
<TITULO>PAGINA 1<FIN-TITULO>
<FIN-ENCABEZADO>
Dentro de la etiqueta encabezado, la primera instrucción por ejecutar será la llamada
al archivo CCSS en donde se definirá el estilo de la página. En este momento se
cargarán a memoria todas las reglas de estilos que este contenga.

Seguidamente, se llamará al archivo CJS. En este momento se cargarán y ejecutarán
todas las instrucciones y solo quedarán en espera aquellas que dependan de un
evento específico.
Por último, se ejecutará la instrucción que colocará el título a la pestaña del
navegador.
4.1.2 Paso 2
Se empezará a crear las etiquetas en el cuerpo de la página web. Lo primero que se
creará serán los botones, que por orden se pondrán dentro de un panel. Se
implementará un estilo que aplique para los botones, para esto se creará un elemento
grupo para los tres botones y un conjunto de reglas en CCSS que aplicará para dicho
grupo. Esto se implementará de la siguiente forma.
<CUERPO>
<//- al ingresar los elementos deberá de iniciar desde la parte inicial de la página -//>
<//- área de botones para rediccionar -//>
<PANEL id = panel_1; grupo= panel_redireccion; ancho = 716; alto = 50;>
<BOTON grupo = boton_redireccion; alto = 35; ancho = 120; ruta= "C:proyecto1informacion.chtml">Informacion<FIN-
BOTON>
<BOTON grupo = boton_redireccion; alto = 35; ancho = 160; ruta= "C:proyecto1tabla.chtml">Tabla Estudiante<FIN-
BOTON>
<BOTON grupo = boton_redireccion; alto = 35; ancho = 100; ruta= "C:proyecto1index.chtml"> Principal <FIN-BOTON>
<FIN-PANEL>
<SALTO-FIN>
Para este código se aplicarán las siguientes reglas en CCSS.
// estos estilos deberán estar dentro de grupos de estilo identificados por ID
id (panel_redireccion);
alineadO := derecha;
FondoElemento = "yelow";
borde := [3, "blue", true];
formulario_inicial [
/*
estilos agregar para el primer panel
que contiene botones para rediccionar
*/
//inicio - panel 1
id (panel_redireccion);
FondoElemento = "yelow";
//fin - panel 1
// inicio grupo de botones de rediccrecion
grUpO (boton_redireccion);
alineadO := centrado;

formaTO := Capital-T;
Letra := "Courier New";
TamTex := 12;
//fin grupo de botones de redireccion
El código anterior se creará un panel, con id “panel_1”, que pertenece al grupo
“panel_redireccion” con un ancho de 716 y altura 50. Dentro de este panel se crearán
tres botones, todos pertenecientes al grupo “botón_redireccion”, cada botón realizará
una redirección a la página informacion.chtml, tabla.chtml e index.chtml
respectivamente.
Al agregar los estilos del CCSS, alineará los elementos del CHTML a la derecha,
cambiará el color de fondo del elemento, en este caso será de color amarrillo, el borde
del panel deberá de tener un delineado de colora azul y las esquinas con una pequeña
curva.
Se deberá buscar todos los elementos que pertenezcan al ID especificado del grupo
y aplicar los cambios solicitados, de los botones. En el texto de los botones deberá
de contener un alineado a la centrado, el formato del texto tendrá la primera letra de
las palabras en mayúscula, cambiará el tipo de letra, al tipo especificado, de igual
manera se le dará un tamaño de texto.
El resultado de esta interpretación debería visualizarse como en la imagen 9.
Imagen 9: Sugerencia de panel_1.
4.1.3 Paso 3
Se creará un panel tenga el texto “Calificación Compiladores 2 Proyecto 2”. Esto se
implementará de la siguiente forma.
<PANEL id = panel_2; grupo=titulo; ancho = 716; alto = 50;>
<//- esta linea contiene salto de linea en el texto -//>
<TEXTO id=titulo_doc; grupo= titulo;>Calificacion Compiladores 2
Proyecto 2<FIN-TEXTO>
<FIN-PANEL>
<//- Se agregaron tres saltos de linea -//>
<SALTO-FIN>
<SALTO-FIN>
<SALTO-FIN>

//inicio del panel 2
id (panel_2);
alineadO := centrado;
FondoElemento = "green";
//fin del panel 2
//inicio del titulo doc
id (titulo_doc);
LetrA := "Times New Roman";
TamTex := 18.3;
forMAto := negrilla, Capital-t;
//fin - titulo doc
El código anterior creará un panel, con id “panel_2”, que pertenece al grupo “titulo”
con un ancho de 716 y altura 50. Dentro de este panel se creará un texto con id
“titulo_doc”, que pertenece al grupo “titulo”. Esta etiqueta mostrará el texto
“Calificación Compiladores 2 Proyecto 2”.
Con el estilo aplicado al panel con id "panel_2", tendrá todos los elementos alineados
al centro, este panel tendrá un borde de grosor 5, con las esquinas con una pequeña
curva y de color azul, el panel deberá de ser color verde.
También se tiene definido un estilo que será aplicado al elemento que contenga id
"titulo_doc". El tipo de letra deberá ser "times new roman" con tamaño en el texto de
18 y el texto deberá de tener formato en negrilla y letra capita en todas las palabras
que contenga el texo.
4.1.4 Paso 4
Se crearán las etiquetas necesarias para recibir la información del estudiante, estas
etiquetas estarán agrupadas en un panel. Estas etiquetas serán la fuente de datos
para la funcionalidad de la página. Se creará un botón que ejecute la funcionalidad
por medio de un método de CJS. Esto se implementará de la siguiente forma.
<PANEL id = panel_3; grupo=titulo; ancho = 716; alto = 320;>
<PANEL id = panel_4; alto =320; ancho=400; grupo=formulario_1;>
<TEXTO alto= 30; ancho =210; id=titulo_fomulario; grupo=formulario_1;>Formulario de Notas:<FIN-TEXTO>
<SALTO-FIN>

<SALTO-FIN>
<SALTO-FIN>
<TEXTO alto= 16; ancho =90; grupo=formulario_1;>Nota Proyecto 1: <FIN-TEXTO>
<SPINNER ancho = 50; alto =25; id=nota_1; id=nota_1; grupo=formulario_2;> <FIN-SPINNER>
<//- ingreso de espacios en blanco para las separaciones entre etiquetas -//>
<TEXTO> <FIN-TEXTO>
<TEXTO alto= 16; ancho =90; grupo=formulario_1;>Nota Proyecto 2: <FIN-TEXTO>
<SPINNER ancho = 50; alto =25; id=nota_2; id=nota_2; grupo=formulario_2;> <FIN-SPINNER>
<//- se agregó dos salto de linea entre elementos -//>
<SALTO-FIN>
<SALTO-FIN>
<TEXTO alto= 16; ancho =105; grupo=formulario_1;>Nombre Estudiante:<FIN-TEXTO>
<CAJA_TEXTO alto= 20; ancho =200; id=nombre; grupo=formulario_2;>Nombre<FIN-CAJA_TEXTO>
<SALTO-FIN>
<TEXTO alto= 16; ancho =65; grupo=formulario_1;>Comentario:<FIN-TEXTO>
<TEXTO_A alto=95; ancho=200 id=comentario; grupo=formulario_2;><FIN-TEXTO_A>
<SALTO-FIN>
<CAJA id=caja_1; grupo=formulario_2;>
<OPCION valor= "promedio"; >Promedio<FIN-OPCION>
<OPCION valor= "suma"; >Suma<FIN-OPCION>
<OPCION valor= "resta"; >Resta<FIN-OPCION>
<OPCION valor= "multiplicar"; >Multiplicacion<FIN-OPCION>
<OPCION valor= 7; >Modulo P1 % 7<FIN-OPCION>
<OPCION valor= 11; >Modulo P2 % 11<FIN-OPCION>
<FIN-CAJA>
<BOTON click=operacion_datos(); alto= 30; ancho =210; id=boto_cal; grupo=formulario_2;> Calcular <FIN-BOTON>
<FIN-PANEL>
<TEXTO> <FIN-TEXTO>
// inicio - panel 3
id (panel_3);
FondoElemento = "black";
//fin panel 3
//inicio - panel 4
id (panel_4);
alineadO := izquierda;
FondoElemento = "cian";
borde := [5, "blue", false];
//fin panel 4
//inicio titulo_formulario
ID (titulo_fomulario);
LetrA := "Centaur";
TamTex := 24;

forMAto := negrilla, Capital-t, cursiva;
ColorTEx := "blue";
//fin titulo_formulario
//inicio formulario 1
grupo (formulario_1);
LetrA := "Centaur";
TamTex := 14;
forMAto := Capital-t, cursiva;
ColorTEx := "blue";
//fin formulario 1
//inicio formulario 2
grupo (formulario_2);
LetrA := "Courier New";
TamTex := 12;
//fin formulario 2
El código anterior creará un panel, con id “panel_3”, que pertenece al grupo “titulo”
con un ancho de 716 y altura 320. Dentro de este panel se creará el primer panel
interno, con id “panel_4”, que dentro de él se mostrará un texto que dirá “Formulario
de notas”, un texto que dirá “Notas proyecto 1:”, un spinner con id ”nota_1” y grupo
“formulario_2”, un texto que dirá “Nombre estudiante:”, una caja de texto con id
“nombre” y grupo “formulario_2” , una caja que contendrá 6 opciones a desplegar y
un botón que ejecutará el método CJS llamado operacion_datos.
El código anterior del CCSS, aplicará al panel, con id "panel_4", fondo celeste claro,
deberá de agregar un borde de grosor 5 y de color azul, este borde sus esquinas
deberán ser cuadradas. Aplicará un estilo a todos los elementos que contendrá el
panel con id "panel_4", donde el elemento con id "titulo_fomulario", deberá tener el
tipo de letra "Centaur", letra cursiva y de tamaño 24. A los elementos que pertenezcan
al grupo con id "formulario_1", aplicará el formato al texto con tipo de letra "Centaur",
tamaño de letra 14, color azul y cursiva.
Imagen 11: Sugerencia de panel_4

4.1.5 Paso 5
Se crearán las etiquetas que mostrarán el resultado de la funcionalidad, estas
etiquetas estarán agrupadas en un panel específico. Al ejecutar la funcionalidad de la
página se deberán modificar los valores de estas etiquetas. Esto se implementará de
la siguiente forma.
<PANEL id = panel_5; alto =320; ancho=380;>
<TEXTO grupo = salida_texto_1;>Opcion Seleccionada:<FIN-TEXTO>
<TEXTO alto = 15; ancho=55; grupo = salida_texto_2; id= r_opcion;>--------<FIN-TEXTO>
<SALTO-FIN>
<TEXTO grupo = salida_texto_1;>Nombre del Estudiante<FIN-TEXTO>
<TEXTO alto = 15; ancho=55; grupo = salida_texto_2; id= r_nombre; >--------<FIN-TEXTO>
<SALTO-FIN>
<TEXTO grupo = salida_texto_1;>Resultado: <FIN-TEXTO>
<TEXTO alto = 15; ancho=55; grupo = salida_texto_2; id= r_resultado; >--------<FIN-TEXTO>
<SALTO-FIN>
<TEXTO grupo = salida_texto_1;>Comentario Realizado<FIN-TEXTO>
<TEXTO alto = 120; ancho=200; grupo = salida_texto_2; id= r_comentario; >--------<FIN-TEXTO>
<SALTO-FIN>
<TEXTO grupo = salida_texto_1;>Nota P1:<FIN-TEXTO>
<TEXTO alto = 15; ancho=55; grupo = salida_texto_2; id= r_nota_1; >--------<FIN-TEXTO>
<SALTO-FIN>
<TEXTO grupo = salida_texto_1;>Nota P2:<FIN-TEXTO>
<TEXTO alto = 15; ancho=55; grupo = salida_texto_2; id= r_nota_2; >--------<FIN-TEXTO>
<SALTO-FIN>
<IMAGEN alto = 90; ancho = 200; id=imagen_1;><FIN-IMAGEN>
<FIN-PANEL>
<FIN-PANEL>
<FIN-CUERPO>
<FIN-CHTML>
//inicio - panel 5 interno
ID (panel_5);
FondoElemento = "cian";
borde := [5, "blue", false];
//fin panel 5 interno
//inicio grupo salida texto 1
grupo (salida_texto_1);
LetrA := "Arial";
TamTex := 14;
forMAto := negrilla;
ColorTEx := "blue";
//fin grupo salida texto 1
//inicio grupo salida texto 2

grupo (salida_texto_2);
LetrA := "Courier New";
TamTex := 12;
ColorTEx := "purple";
//fin grupo salida texto 2
]
El código anterior creará un panel, con id “panel_4”, que dentro de él se crearán 12
textos seguidos de una imagen con id “imagen_1”.
Aplicando los estilos a los elementos del CHTML y de último, se cierran las etiquetas
de los paneles, cuerpo y CHTML.
4.1.6 Paso 6
El código CJS que se cargó a memoria en el paso 1 es el siguiente.
//este ejemplo debe modificar la etiqueta cuerpo para ponerle color de fondo rosado
//También muestra un cuadro de dialogo con el contenido
Documento.Observador("Listo", cambiar_color());
funcion cambiar_color(){
DimV Cuerpo : Documento.Obtener("Cuerpo");
Cuerpo.setAtributo("FondoElemento","Pink");
Mensaje("Se cambio el color a Rosado ");
}
Este archivo modificará la página web de tal forma que tendrá la salida
correspondiente a la imagen 13.

Imagen 13: ejemplo index con CJS
5 Lenguajes
USAC-WEB podrá interpretar 3 lenguajes. El lenguaje base será CHTML ya que será
el que USAC-WEB llamará directamente y este se encargará de llamar a los otros
lenguajes.
5.1 CHTML
Lenguaje que define el contenido de la página web. Al interpretar el lenguaje se
deberá mostrar los componentes de la página en el área de la página web. Las
instrucciones deben venir dentro de los símbolos ‘<’ y ’>’. Estas instrucciones tendrán
el nombre de etiquetas.
Cada etiqueta tiene un conjunto específico de elementos opcionales para configurar
las etiquetas.
El lenguaje CHTML contiene una etiqueta especial, esta etiqueta es utilizada para
poder agregar comentarios, en cualquier parte del documento CHTML. Todo
contenido del comentario deberá de venir dentro de los símbolos '<//-' y '-//>'.
Ejemplo
<//- Este es un comentario -//>
<//- Este es otro comentario

Solo que contiene
Saltos de línea-//>
El lenguaje CHTML es un lenguaje de etiquetado, en otras palabras, su sintaxis es
basada en etiquetas. Esto quiere decir que, para agregar componentes a la página
web, se deberán usar las etiquetas que se describen a continuación.
Etiqueta CHTML
Etiqueta raíz, marcará el inicio del lenguaje CHTML. Esta etiqueta no tiene elementos.
Ejemplo
<CHTML>
...
<//- contenido dentro de la etiqueta CHTML -//>
...
<FIN-CHTML>
Etiqueta Encabezado
Etiqueta en la cual se podrá definir información de la página web. Esta etiqueta deberá
venir dentro de una etiqueta <CHTML>.
Ejemplo
<ENCABEZADO>
...
<//- Contenido encabezado -//>
...
<FIN-ENCABEZADO>
<ENCABEZADO>
<//- archivo que será utilizado en la página -//>
<CJS ruta = “C:/fichero/fichero_1.cjs”;> <FIN-CJS>
<//- archivo con contenido ccss para agregarle estilos a los elementos de la página -//>
<CCSS ruta = “C:/fichero/estilo_2.ccss”;> <FIN-CCSS>
<FIN-ENCABEZADO>
Etiqueta Cuerpo
Etiqueta en la cual se podrá agregar el contenido que se mostrará dentro del área de
la página web. Esta etiqueta deberá venir dentro de una etiqueta <CHTML>. Los
elementos de esta etiqueta están definidos en la tabla 1.

Tabla 1: Elementos de etiqueta cuerpo.
Elemento Descripción
fondo Permitirá configurar un color de fondo
Ejemplo
<CUERPO>
…
<//- Contenido del cuerpo -//>
…
<FIN-CUERPO>
Etiqueta CJS
Etiqueta que servirá para llamar un archivo CJS. Esta etiqueta deberá venir dentro de
una etiqueta <ENCABEZADO>. Los elementos de esta etiqueta están definidos en la
tabla 2.
Tabla 2: Elementos de etiqueta cjs.
Ruta Permitirá colocar la ruta del archivo cjs.
Ejemplo
<CJS ruta = ”””Ruta del archivo *.cjs”;> <FIN-CJS>
<CJS ruta = ”C:/fichero/fichero_1.cjs”;> <FIN-CJS>
<CJS ruta = “C:/fichero/fichero_2.cjs”;> <FIN-CJS>
Etiqueta CCSS
Etiqueta se utilizará para llamar un archivo CCSS. Esta etiqueta deberá venir dentro
de una etiqueta <ENCABEZADO>. Los elementos de esta etiqueta están definidos en
la tabla 3.
Tabla 3: Elementos de etiqueta ccss.
Ruta Permitirá colocar la ruta del archivo cjs.
Ejemplo
<CCSS ruta = “Ruta del archivo*.ccss”;> <FIN-CCSS>

Etiqueta Título
Etiqueta que servirá para definir el título de la página web. Este título se deberá
mostrar en la pestaña de la página web. Esta etiqueta deberá venir dentro de una
etiqueta <ENCABEZADO>.
Ejemplo
<TITULO> <//- Titulo de la página web -//> <FIN-TITULO>
<TITULO> USAC- WEB <FIN-TITULO>
Etiqueta Panel
Etiqueta que mostrará un área específica de trabajo en donde se podrán definir más
componentes. Esta etiqueta deberá venir dentro de una etiqueta <CUERPO>.
Esta etiqueta tiene la misma funcionalidad que la etiqueta <CUERPO>, es decir esta
etiqueta podrá contener más etiquetas dentro.
Ejemplo
<PANEL> <//- Contenido del panel o área del panel -//> <FIN-PANEL>
<PANEL>
<TEXTO> Esta es una etiqueta<FIN-TEXTO>
<CAJA_TEXTO> Contenido en la caja de texto <FIN-CAJA_TEXTO>
<PANEL>
<FIN-PANEL>
<FIN-PANEL>
Etiqueta Área de Texto
Etiqueta que mostrará texto en el área de la página web. Esta etiqueta aceptará que
el texto contenga saltos de línea, la etiqueta permitirá mostrar textos extensos, de
igual manera textos cortos. Esta etiqueta deberá venir dentro de una etiqueta tipo
<CUERPO>.
Ejemplo
<TEXTO> <//- Texto a mostrar -//> <FIN-TEXTO>
<TEXTO> Esta es

una
Etiqueta
<FIN-TEXTO>
<TEXTO> Entrada: Esta es
una etiqueta
que permite
saltos
<FIN-TEXTO>
Etiqueta Imagen
Etiqueta que mostrará una imagen en el área de la página web. Esta etiqueta deberá
venir dentro de una etiqueta <CUERPO>. En la etiqueta deberá de colocarse la
dirección donde se encuentre la imagen, al cargar la imagen se deberá de validar que
acepte cualquier formato para imágenes.
Esta etiqueta, al momento de no encontrar una imagen en la ruta dada, deberá de
mostrar una imagen con un mensaje de error o advertencia. Los elementos de esta
etiqueta están definidos en la tabla 4.
Tabla 4: elementos de etiqueta imagen.
Click Se podrá definir la llamada a una función del lenguaje CJS, con
la que se podrá realizar una acción.
Ruta Permitirá colocar la ruta del archivo CHTML, con el que
funcionará como enlace para redirigir a otra página.
Ejemplo
<IMAGEN> <//- Imagen a mostrar -//> <FIN-IMAGEN>
<IMAGEN> c://proyecto1/imagen.png <FIN-IMAGEN>
<IMAGEN ruta="c://fichero/hoja.chtml"> c://proy1/foto.jpg <FIN-IMAGEN>
<IMAGEN click=metodo()> c://proyecto1/clase.gif <FIN-IMAGEN>
Etiqueta Botón
Etiqueta que mostrará un botón en el área de la página web. Esta etiqueta deberá
venir dentro de una etiqueta <CUERPO>. Los elementos de esta etiqueta están
definidos en la tabla 5.

Tabla 5: elementos de la etiqueta botón.
Click Se podrá definir la llamada a una función del lenguaje CJS, con
Ruta Permitirá colocar la ruta del archivo CHTML, con el que
funcionará como enlace para redirigir a otra página.
Ejemplo
<BOTON> <//- Contenido del botón -//> <FIN-BOTON>
<BOTON> Enviar <FIN-BOTON>
<BOTON click=salida_consola();> Este es un botón <FIN-BOTON>
<BOTON ruta="c://pro_1/index.chtml";> Principal <FIN-BOTON>
Etiqueta Enlace
Etiqueta que mostrará un texto que realizará una redirección a otra página web en
caso sea seleccionado. Mostrará el texto que se desee de color azul y subrayado
como valor predeterminado. Esta etiqueta deberá venir dentro de una etiqueta
<CUERPO>. Los elementos de esta etiqueta se mostrarán en la tabla 6.
Tabla 6: elementos de la etiqueta enlace.
Ruta Permitirá colocar la ruta del enlace.
Ejemplo
<ENLACE ruta="ruta/ruta";> <//- Texto a mostrar en la etiqueta -//>
<FIN-ENLACE>
<ENLACE ruta="c://ruta/ruta.chtml";> Página Ruta <FIN-ENLACE>
Etiqueta Tabla
Etiqueta que mostrará el contenido de una tabla. Esta etiqueta deberá venir dentro de
una etiqueta <CUERPO>.
Ejemplo
<TABLA> <//- Contenido de la tabla -//> <FIN-TABLA>

Etiqueta Fila
Etiqueta que contendrá el contenido de las filas de la tabla. Esta etiqueta deberá de
venir dentro de la etiqueta <TABLA>.
Ejemplo
<FIL_T> <//- Contenido de las filas de la tabla -//> <FIN-FIL_T>
Etiqueta Celda Encabezado
Etiqueta que mostrará el contenido de la celda con el texto resaltado. Esta etiqueta
deberá de venir dentro de la etiqueta <FIL_T>.
Ejemplo
<CB> <//- Contenido del encabezado de una tabla -//> <FIN-CB>
Etiqueta Celda
Etiqueta que mostrará el contenido de la celda. Esta etiqueta mostrará el texto que se
desea visualizar por cada celda de la tabla. Esta etiqueta deberá de venir dentro de
la etiqueta <FIL_T>
Ejemplo
<CT> <//- Contenido o texto que llevará la celda -//> <FIN-CT>
Ejemplo de una Tabla
<TABLA>
<FIL_T>
<CB>Nombre<FIN-CB>
<CB_T>Apellido<FIN-CB>
<CB_T>Edad<FIN-CB>
<FIN-FIL_T>
<FIL_T>
<CT>Mack<FIN-CT>
<CT>Hill<FIN-CT>
<CT>15<FIN-CT>
<FIN-FIL_T>
<FIL_T>
<CT>Stark<FIN-CT>
<CT>Iron<FIN-CT>
<CT>50<FIN-CT>
<FIN-FIL_T>
<FIN-TABLA>

Etiqueta Caja área de texto
Etiqueta que mostrará el elemento de una caja de texto en la página web. Esta
etiqueta deberá de venir dentro de la etiqueta <CUERPO>.
Esta etiqueta deberá permitir que el texto contenga saltos de línea. La etiqueta caja
área de texto permitirá que el usuario final, pueda modificar la información dentro de
ella.
Ejemplo
<TEXTO_A> <//- Contenido de la caja de Texto -//> <FIN-TEXTO_A>
<TEXTO_A> Nombre <FIN-TEXTO_A>
Etiqueta Caja de Texto
Etiqueta que mostrará un área de ingreso de texto. Esta etiqueta deberá venir dentro
de una etiqueta <CUERPO>.
Esta etiqueta no aceptará saltos de línea, si la etiqueta detecta algún salto de línea
esta misma deberá de sustituir por un espacio en blanco. La etiqueta caja de texto
permitirá que el usuario final, pueda modificar la información dentro de ella.
Ejemplo
<CAJA_TEXTO> <//- Contenido de la caja de Texto -//> <FIN-CAJA_TEXTO>
<CAJA_TEXTO> <FIN-CAJA_TEXTO>
Etiqueta Caja de Opciones
Esta etiqueta mostrará una caja con varias opciones para que el usuario final pueda
elegir. Esta etiqueta podrá tener la funcionalidad de click, es decir al momento que el
usuario final seleccione una opción esta realizará una acción. Esta etiqueta deberá
de venir dentro de la etiqueta <CAJA>. Los elementos de esta etiqueta están definidos
en la tabla 7.
Tabla 7: elementos de la etiqueta caja de opciones.
click Se podrá definir la llamada a una función del lenguaje CJ, con

Ejemplo
<CAJA> <//- Opciones para agregar -//> <FIN-CAJA>
<CAJA click=metodo(); > <//- Opciones para agregar -//> <FIN-CAJA>
Etiqueta Opción
Etiqueta que mostrará el contenido para visualizar en una caja de texto. Esta etiqueta
deberá de venir dentro de la etiqueta <CAJA>. Dentro de la etiqueta deberá de venir
el valor que tomará la ser seleccionada una etiqueta, si en todo caso no tiene un valor
predefinido seleccionará el contenido de la opción como su valor. Los elementos de
esta etiqueta se mostrarán en la tabla 8.
Tabla 8: elementos de la etiqueta opción.
valor Valor que tomará la opción al ser seleccionada.
Ejemplo
<OPCION > <//- Contenido -//> <FIN-OPCION>
<OPCION valor="1";>Uno<FIN-OPCION>
Ejemplo de una Caja de Opciones
<CAJA>
<OPCION valor="2";>Dos<FIN-OPCION>
<OPCION valor="3";>Tres<FIN-OPCION>
<OPCION valor="4";>4<FIN-OPCION>
<FIN-CAJA>
Etiqueta Contador
Etiqueta que mostrará una caja con la funcionalidad de una caja de texto con la
diferencia que solo aceptará valores de números enteros. Su valor por defecto o inicial
será 0, en todo caso no es especificado o el valor dado no es válido.
Esta etiqueta deberá venir dentro de la etiqueta <CUERPO>.
Ejemplo
<SPINNER> 15 <FIN-SPINNER>
<SPINNER> 0<FIN-SPINNER>

<SPINNER> <FIN-SPINNER>
Etiqueta Salto
Etiqueta salto, esta etiqueta tendrá la funcionalidad de un salto de línea en los
elementos del lenguaje CHTML. Esta etiqueta deberá de venir dentro de la etiqueta
<CUERPO>.
Ejemplo
<SALTO-FIN>
<CAJA>
<OPCION valor="2";>Dos<FIN-OPCION>
<FIN-CAJA>
<SALTO-FIN>
Todas las etiquetas descritas anteriormente tendrán los elementos que aparecen en
la tabla 9.
Sintaxis
<< elemento = valor ; >>
Ejemplo
Grupo = grupo_1; Alto = 15; ancho = 50;
Tabla 9: elementos generales
Id Permitirá colocar un texto que identifique la etiqueta.
Grupo Permitirá definir una clase o un grupo, este grupo servirá para
la aplicación de estilos con CCSS.
Alto Permitirá colocar un valor numérico para asignar el alto de un
elemento del CHTML.
Ancho Permitirá colocar un valor numérico para asignar el ancho de un
elemento del CHTML.
Alineado Permitirá colocar forma o formato a los elementos del CHTML,
los valores válidos para poder asignar serán izquierda, derecha,
centrado.
ccss Permitirá llamar a un grupo de estilo que esta identificados por
un ID.

5.2 CJS
El lenguaje CJS será el encargado de realizar gran parte de la lógica y manejo de
datos que la página web deberá de realizar, este podrá tomar propiedades de los
elementos CHTML. Este lenguaje se encontrará en archivos con extensión “.cjs” y
deberán ser importados desde el lenguaje CHTML.
5.2.1 Comentarios
En el lenguaje CJS, permitirá agregar comentarios los cuales podrán ser simples o
multilínea. Esto con la finalidad que el programador pueda dejar información respecto
al código que está generando.
Comentario Simple: este utilizará el carácter ‘, para dar inicio a un comentario.
Ejemplo
‘Comentario simple
DimV NOMBRE: “Henry”;
Nombre: “Julia”;
Comentario multilínea: el comentario doble iniciará con ‘/ y terminará con /’.
Ejemplo
‘/ Se agregó un comentario
de
tres líneas/’
5.2.2 Variables
Las variables serán contenedores en los se podrán almacenar valores. Primero se
deberá declarar la variable con la palabra reservada DimV, seguida del nombre que
le quiera dar.
Sintaxis
DimV Nombre_de_Variable;
Ejemplo
DimV mi_variable;

5.2.3 Asignación de valores
Las variables podrán tomar cualquier tipo de valor, por lo que no es necesario
especificar un tipo de valor en específico. Los tipos de valores admitidos se
encuentran detallados en la tabla 10. El signo para la asignación de variables será el
“:”.
Sintaxis
DimV Nombre_de_Variable: valor;
Nombre_de_Variable: valor;
Ejemplo
5.2.4 Tipos de datos
La declaración de tipos de variables será implícita en el lenguaje CJS, este tomará el
tipo dependiendo del valor asignado a esta variable, los tipos de variable soportados
serán los descritos en la tabla 10.
Tabla 10: tipo de datos
Tipo Descripción Formato
Texto Las variables que se le asigne los valores
de tipos texto, deberán ir entre comillas
dobles “ “.
Dimv mivariable : “Hola
mundo”;
Booleano Son valores de verdadero y falos, las
palabras reservadas para estos serán
‘True’ y ‘False
Dimv mivariable : ‘True’;
Numérico Estas son los valores numéricos que puede
tomar las variables, pueden ser tanto
enteros como decimales.
Dimv mivariable : 100;
Dimv mivariable : 90.90;
Date Estas deberán ir dentro de ‘ ‘ para realizar
la asignación de una fecha. Estos se
ingresarán con el formato dd/mm/yyyy.
Donde dd denota el día, mm denota el mes
y yyyy denota el año.
Dimv miFecha :
‘01/01/2000’;
DateTime Estas deberán ir dentro de ‘ ‘ para realizar
la asignación de una fecha. Estos se
ingresarán con el formato dd/mm/yyyy.
Donde dd denota el día, mm denota el mes
y yyyy denota el año. El formato de tiempo
llevará como hh:mm:ss en donde hh denota
horas la cual será en formato de 24 horas,
mm denota minutos y ss denota segundo.
Dimv miFecha :
‘31/12/1999 23:59:59 ’

5.2.5 Operadores
Las operaciones que soportará el lenguaje CJS, se encuentran en la tabla 11.
Tabla 11: operadores de lenguaje CJS.
Operador Nombre Función Ejemplo
+ Suma Operación aritmética que consiste en
sumar varias cantidades en una sola.
5+5+10+6+5
10.5+10.5
95+0.5+1.5
- Resta Operación aritmética que consiste en
restar o quitar cantidades y obtener la
diferencia
100-0.5-95
50-1.5-5
* Multiplicación Operación aritmética que consiste en
multiplicar es decir sumar las
cantidades las veces indicadas a otro
número.
10*15*10
30*0.5*2
/ División Operación aritmética que devolver el
resultado de una división.
10/2
200/5
^ Potencia Operación aritmética de potencia,
toma la primera expresión como base
y la segunda como exponente.
a : b^2;
% Modulo Operación aritmética que devolver el
residuo de una división.
a : b%2;
++ Adición Suma 1 a la expresión. a++;
-- Sustracción Resta 1 a la expresión. (b+2)--
Los operadores aritméticos deberán de cumplir con las reglas de operatoria que se
encuentran en la tabla 12.
Tabla 12: Tabla de operaciones posibles según los operadores
Suma(+) Booleano Numérico Texto Date/Datetime
Booleano OR Sumar Concatenar Error
Numérico Sumar Sumar Concatenar Error
Texto Concatenar Concatenar Concatenar Error
Date/Datetime Error Error Concatenar Error
Resta(-) Booleano Numérico Texto Date/Datetime
Booleano Error Restar Error Error
Numérico Restar Restar Error Error
Texto Error Error Error Error
Date/Datetime Error Error Error Error
Multiplicación(*) Booleano Numérico Texto Date/Datetime
Booleano AND Multiplicar Error Error
Numérico Multiplicar Multiplicar Error Error
División (/) Booleano Numérico Texto Date/Datetime

Booleano Error Dividir Error Error
Numérico Dividir Dividir Error Error
Potencia(^) Booleano Numérico Texto Date/Datetime
Booleano Error Elevar Error Error
Numérico Elevar Elevar Error Error
5.2.6 Condiciones
Las condiciones son operaciones que servirán para poder determinar la veracidad o
falsedad de la misma. Para ello se hace uso de operaciones aritméticas, relacionales
y lógicas.
5.2.7 Expresiones relacionales
Las operaciones relacionales servirán para comparar dos expresiones, el sistema
deberá de manejar las operaciones de igualdad, diferente, menor, mayor, menor o
igual y mayor o igual. En la tabla 13 se describe el uso de las expresiones relacionales.
Tabla 13: expresiones relacionales.
Nombre Símbolo Descripción
Igual == Esta operación comprobará si dos expresiones
tienen el mismo valor, de ser así retorna 1
(verdadero) de lo contrario retorna 0(falso).
Diferente != Esta operación comprobará si dos expresiones
tienen distinto valor, de ser así retorna 1
(verdadero) de lo contrario retorna 0(falso).
Menor que < Esta operación comprobará si la primera expresión
es menor a la segunda expresión, de ser así retorna
1 (verdadero) de lo contrario retorna 0(falso).
Mayor que > Esta operación comprobará si la primera expresión
es mayor a la segunda expresión, de ser así retorna
1 (verdadero) de lo contrario retorna 0(falso).
Menor o igual <= Esta operación comprobará si la primera expresión
es menor o igual a la segunda expresión, de ser así
retorna 1 (verdadero) de lo contrario retorna
0(falso).
Mayor o igual >= Esta operación comprobará si la primera expresión
es mayor o igual a la segunda expresión, de ser así
retorna 1 (verdadero) de lo contrario retorna
0(falso).
5.2.8 Expresiones lógicas
Estas expresiones utilizarán los conectores lógicos para unir dos condiciones. Sus
operandos tienen que ser de tipo booleano, de lo contrario se deberá reportar error.

El resultado de la operación será de tipo booleano. En la tabla 14 se describen los
operadores lógicos a implementar.
Tabla 14: operadores lógicos del lenguaje CJS.
Nombre Símbolo Descripción
AND && Este operador comprobará que tanto la primera
expresión como la segunda expresión tengan valor
verdadero. Si esto se cumple retorna 1 (verdadero)
de lo contrario retorna 0(falso).
OR || Este operador comprobará que la primera
expresión o la segunda expresión tenga valor
verdadero. Si esto se cumple retorna 1 (verdadero)
de lo contrario retorna 0(falso).
NOT ! Este operador negará el valor de la expresión con
la que viene acompañada.
5.2.9 Precedencia de operadores y Asociatividad
En la tabla 15 que se presenta a continuación se define la precedencia y asociatividad
de cada uno de los operadores definidos anteriormente, ordenados de menor a mayor
precedencia. Los paréntesis son los únicos símbolos de agrupación a utilizar.
Tabla 15: Tabla de precedencia de operadores y asociatividad
Símbolo Precedencia Asociatividad
+ 1 Izquierda
* / 2 Izquierda
^ 3 Derecha
== != < > <= >= 4 No aplica
|| 5 Izquierda
&& 6 Izquierda
! 7 Izquierda
() 8 No aplica
5.2.10 Vectores
Los vectores serán contenedores de una dimensión. Estos podrán contener cualquier
elemento de forma mixta, esto quiere decir que no serán exclusivamente de un tipo
de dato. Las listas se definirán al momento de darle valor a la variable que se desea
utilizar, el tamaño de este dependerá de la cantidad de elementos que se introducirán
en este, una vez definida la cantidad de elementos esta no podrá cambiar, haciendo
que el vector sea estático.
Sintaxis
DimV Nombre_de_Vector : {elemento1[,elemento2, ….. , elementoN] };
DimV Nombre_de_Vector{Tamanio_vector};

Ejemplo
Dimv miVector : { 14 ,240 , 350 };
Dimv nombres : {“Hola”, “Mundo” , ”Otra” , “Vez” };
DimV nuevoVector : { “Hola” , “Mundo” , 1 , 2 , 3 };
DimV vectorStatico{3};
vectorEstatico : { “Hola” , “Otra vez” , 250};
DimV miNumero: 4;
DimV vector_miNumero{miNumero};
vectorEstatico : { 51 , 200 , 40 , 56};
5.2.11 Acceso a los elementos del vector
Para acceder a uno de los valores del vector, se deberá indicar el nombre del vector
y el índice al que se accederá, la colección de elementos del vector se iniciará por el
índice 0.
Sintaxis
Nombre_de_vector{ Indice };
Ejemplo
DimV valorVector;
Dimv miVector : { 14 ,240 , 350 };
‘Modificación del vector en la primera posición
miVector{0} : 100;
‘Obtener valor del vector
valorVector : miVector{0};
miVector{2} : valorVector + miVector{1};
5.2.12 Tamaño del Vector
El tamaño del vector estará determinado por la cantidad de elementos que sean
ingresados en este, el tamaño del vector podrá ser accedido por la propiedad conteo.
Sintaxis
Nombre_de_vector.Conteo;

Ejemplo
DimV tamanioVector;
Dimv miVector : { 14 ,240 , 350 };
‘Obtener el tamanio de la lista
‘El tamanio de la lista es 3
tamanioVector : miVector.Conteo;
5.2.13 Convertir a cadena
Un vector será una colección de datos, estos datos podrán convertirse a una cadena
de texto por medio del método aTexto, el cual tomará la totalidad de elementos y
devolverá una cadena donde los elementos se encuentren en formato Json.
Sintaxis
Nombre_de_vector.aTexto();
Ejemplo
DimV miCadena;
DimV miVector : { “hola” , 1 , 2 , 3 , “prueba” };
MiCadena : miLista.aTexto(); ‘ { hola,1,2,3,prueba }
5.2.14 Si
Esta instrucción deberá iniciar con la palabra reservada “Si”, seguida de una condición
encerrada entre paréntesis. Cuenta con un cuerpo que consiste en un conjunto de
sentencias encerradas entre llaves ( {} ), que se ejecutarán si la condición tiene un
valor verdadero. De manera opcional se puede incluir un conjunto de sentencias que
se ejecutarán en caso de que la condición sea falsa, este cuerpo de instrucciones
viene seguido de la palabra reservada “SINO”, este cuerpo de instrucciones también
debe ir encerrado entre llaves ( {} ).
Sintaxis
Si( <Condición> ){
< Instrucciones >
}
Sino {
< Instrucciones >
}

Ejemplo
Si( a < 10 ){
b : 23;
}Sino{
b : 46;
}
5.2.15 Selecciona
Esta sentencia de control evaluará una expresión y comparará su resultado con cada
uno de los valores definidos en los casos del cuerpo de la sentencia. Cada caso
cuenta con un valor y un cuerpo de instrucciones.
La sentencia de control iniciará con la palabra reservada “Selecciona”, seguido de
una expresión encerrada entre paréntesis. Cuenta con una lista de casos, cada caso
iniciará con la palabra reservada “Caso” seguida del valor puntual del caso, dos
puntos ( : ), y un cuerpo de sentencias. Opcionalmente, se puede agregar un caso
que se ejecute por defecto si ninguno de los casos cumple con la expresión inicial con
la palabra reservada “Defecto” seguida por dos puntos ( : ) y un cuerpo de sentencias.
El comportamiento de esta sentencia de control preguntará cuál es el caso que
cumple con la expresión inicial, y de ahí en adelante ejecuta todas las sentencias de
los casos, sin incluir las instrucciones asociadas al bloque “Defecto”, hasta encontrar
la palabra reservada “Detener”. Si no se cumple con ninguna de las condiciones se
debe ejecutar el bloque de instrucciones asociadas al bloque “Defecto”.
Sintaxis
Selecciona ( < Expresión > ){
Caso < Valor_1 > :
< Instrucciones >
Caso < Valor_2 > :
< Instrucciones >
Caso < Valor_N >:
< Instrucciones >
Defecto :
< Instrucciones >
}
Ejemplo
Selecciona ( a * 15 ){
Caso 10 :
< Instrucciones >
Caso 15 :
< Instrucciones >
Defecto :

< Instrucciones >
}
5.2.16 Ciclo Para
Este ciclo iniciará con la palabra reservada “Para”, consta de una declaración inicial
de una variable con valor numérico, seguida de punto y coma; una condición para
mantener el ciclo en ejecución seguida de punto y coma; un incremento (++) o
decremento (--), que al final de cada iteración afectará directamente el valor de la
variable declarada al inicio de este ciclo; y un cuerpo de instrucciones a ejecutar
siempre y cuando la condición se cumpla. Se evaluará la condición, si es verdadera
ejecutará el cuerpo y cambiará el valor de la variable inicial, si es falsa saldrá del ciclo.
Sintaxis
Para( ID : < Expresión > ; < Condición >; < Operador > ){
< Instrucciones >
}
Ejemplo
Para( a : 10; a > 0; --){
b : 23;
}
5.2.17 Ciclo Mientras
Este ciclo iniciará con la palabra reservada “Mientras”, seguida de una condición
encerrada entre paréntesis. Cuenta con un cuerpo que consiste en un conjunto de
sentencias encerradas entre llaves ( {} ) que se ejecutará toda vez la condición sea
verdadera.
Sintaxis
Mientras( <Condición> ){
< Instrucciones >
}
Ejemplo
Mientras( a < 10 ){
a : a + 1;
}

5.2.18 Detener
Esta sentencia se aplicará siempre y cuando se encuentre dentro del cuerpo de un
ciclo Para o Mientras, o dentro del cuerpo de un caso de una sentencia Selecciona.
Al ser encontrada la ejecución deberá ser detenida y regresar a un nivel superior de
la sentencia o ciclo que ha sido detenido.
Sintaxis
Detener;
Ejemplo
Mientras( a < 10 ){
a : a + 1;
Detener;
}
5.2.19 Imprimir
Esta instrucción permitirá mostrar un texto en la consola de salida. Esta instrucción
solamente recibirá como parámetro una expresión que dará como resultado un texto.
Sintaxis
Imprimir(Expresión);
Ejemplo
Imprimir("Hola mundo!");
5.2.20 Funciones
Las funciones ejecutarán una serie de pasos. Toda función deberá ser identificada
con un nombre único. Seguido del ID de la función se deberán ir paréntesis los cuales
pueden o no contener parámetros, los parámetros de una función, estarán dados por
una lista de valores los cuales van separados por coma. El cuerpo de las funciones
empezarán con el carácter “{“ y finalizar con “}”.Las funciones serán capaces de
devolver un valor de retorno las mismas el cual no es necesario especificar al
momento de declarar la función.
Sintaxis
funcion nombre_funcion([Parámetro1, Parámetro2 , … , ParámetroN]){
<Instrucciones>
}

Ejemplo
funcion prueba(){
Imprimir(“Hola mundo”);
}
funcion valor_mayor( x , y){
si(x > y){
Imprimir(x);
}sino{
Imprimir(y);
}
}
Las funciones podrán tener el mismo identificador, pero tener diferente número de
parámetros, al momento de realizar la llamada, la cantidad de parámetros que serán
recibidos determinará la función que se estará utilizando.
Ejemplo
funcion prueba(x){
Imprimir(“El valor es” + x);
}
funcion prueba( x , y){
si(x > y){
Imprimir(“Variable1 es mayor que Variable2”);
}sino{
Imprimir(“Variable2 es mayor que Variable1”);
}
}
‘Llamada a funciones
Dimv v1 , v2;
v1: 10;
v2: 11;
prueba(v1); ‘El valor es 10
prueba(v2); ‘El valor es 11
prueba(v1,v2); ‘Variable2 es mayor que Variable1
5.2.21 Retornar
La palabra reservada retornar se podrá colocar dentro de una función, esta indicará
que la función está retornando un valor, cada vez que una función llegue a una
sección donde se contenga la palabra reservada retornar la ejecución de la misma
terminará y será posible capturar el valor devuelto por esta.

Sintaxis
funcion nombre_funcion(){
Retornar Valor_de_retorno;
}
Ejemplo
funcion numeroMayor(x,y){
si(x > y){
Retornar x;
}sino{
Retornar y;
}
}
‘Captura de valor
Dimv v1 , v2 , mayor;
v1: 10;
v2: 11;
mayor: numeroMayor(v1,v2);
5.2.22 Mensaje
La sentencia mensaje desplegará un cuadro de texto emergente con información que
se deseará mostrar al usuario, este cuadro de texto bloqueará todas las acciones
sobre la página hasta que el usuario cierre el mismo.
Sintaxis
Mensaje(Expresión);
Ejemplo
Mensaje(“Hola mundo”);
Dimv X : 10;
Mensaje(X);
5.2.23 Eventos
Los eventos son acciones que se dispararán al momento que determinará la acción
se esté realizando o se haya concluido. Los eventos están enfocado a diferentes
acciones de los elementos CHTML. Cuando un elemento CHTML llegará a activar un
evento estos pueden realizar determinadas acciones en CJS.

Los Eventos que existirán en CJS son los siguientes:
• Listo: este elemento se disparará cuando se haya cargado el elemento
CHTML en la página web, si el elemento tiene contenidos más elementos
CHTML se activará al terminar de cargar todos estos elementos.
• Modificado: se disparará al modificar el contenido del elemento, ya sea por
CCSS o por CJS.
• Cliqueado: se disparará al hacer clic sobre un elemento CHTML.
5.2.24 Documento
La sentencia documento hace referencia al documento de CHTML, en donde se
encontrará ejecutándose el archivo CJS, este será necesario cuando se requiera
trabajar sobres lo elementos contenidos en esta. Esta sentencia por sí sola no
realizará ninguna acción, se utilizará para obtener o editar los elementos CHTML o
para realizar acciones con base a sus eventos.
Ejemplo
Documento.Observador(“listo”, mi_funcion());
Documento.Obtener(“id_titulo”);
5.2.25 Obtener
Esta función de la sentencia documento permitirá acceder a los elementos que se
encuentran dentro del archivo CHTML, y se estarán ejecutando en el explorador. Para
poder acceder a los elementos será necesario llamar por el identificador el elemento
en CHTML que se desea acceder.
Sintaxis
Documento.Obtener(ID_ELEMENTO);
Ejemplo
Documento.Obtener(“mi_boton”);
Los elementos que se obtendrán por medio de la función obtener, podrán ser
guardados en variables para trabajar con estos, de igual forma será posible acceder
a las propiedades y eventos de dicho elemento seleccionado.
Ejemplo
Dimv mi_boton : Documento.Obtener(“mi_boton”);
Mi_boton.setElemento(“ruta”, ”C:/…”);

5.2.26 SetElemento
La función SetElemento será la encargada de poder modificar los diferentes
elementos de las etiquetas CHTML desde código CJS. Para utilizar dicha función
deberá ser necesario haber obtenido previamente el elemento a modificar. Esta
función especial de CJS recibirá como parámetro el nombre del elemento que será
modificado y el nuevo valor a asignarle. Si el nombre del elemento a ser modificado
no existe, se deberá desplegar un mensaje de error en consola.
Sintaxis
Elemento.setElemento(“Nombre_elemento”,Expresión);
Ejemplo
Mi_boton.setElemento(“ruta”, ”C:/…”);
Documento.Obtener(“mi_imagen”). setElemento (“ruta”,”~/rutanueva”)
5.2.27 Observador
Los observadores serán utilizados para detectar cuando a un elemento se le disparen
cierto evento. En otras palabras, cuando se crea un observador a un elemento este
observador estará monitoreando al elemento en busca de detectar cuando el evento
indicado sea disparado, y en ese momento mandará a ejecutar la función asignada.
Se le podrá asignar un observador a documento o a cualquier elemento recuperado
por la función obtener.
Sintaxis
Elemento.Observador(‘evento’, funcion(){
<Instrucciones>
});
Ejemplo
Documento.Observador(“listo”, funcion(){
Imprimir(“Documento listo”);
})
funcion mi_funcion(){
imprimir(“Estas dentro de mi_funcion”);
}
Mi_boton.Observador(“clic”, mi_funcion());

5.3 CCSS
Lenguaje que definirá el estilo o formas que tendrá los elemento para la página web.
Este lenguaje describirá cómo deben de mostrarse los elementos del CHTML.
Son reglas que se deberán aplicar a los elementos que se le agregarán dichas
instrucciones.
Cada definición del lenguaje CCSS se deberá hacer de la siguiente manera:
ID [
/*
Contenido del código ccss
*/
]
Dónde:
ID: deberá ser el nombre que definirá al bloque de código de CCSS.
“[”: Inicio del contenido del bloque.
“]”: Fin del contenido del bloque.
Cada estilo del lenguaje CCSS se debe definir de la siguiente manera:
Estilo := <<valor que se asignará al elemento>>;
El lenguaje CCSS podrá soportar comentarios de línea y múltiples líneas dentro del
bloque, esto ayudará para que se pueda identificar en el lenguaje para que se usa
cada función o estilo dentro de ella. Estos comentarios serán definidos de la siguiente
manera:
5.3.1 Comentarios de línea
Los comentarios de línea se podrán iniciar por medio de diagonales dobles y
finalizadas por un salto de línea.
Ejemplo
//Comentario de una línea
//Este es un ejemplo de un comentario.
5.3.2 Comentarios múltiples línea
Los comentarios de múltiples líneas se podrán iniciar por medio de una diagonal y
seguido de un asterisco y finalizados de por un asterisco y seguido de una diagonal.

Ejemplo
/*
Comentario de
Múltiples Líneas
*/
5.3.3 Case Insensitive
El lenguaje CCSS es case insensitive, es decir que el lenguaje no diferenciará entre
mayúsculas y minúsculas, un ejemplo sería “Alineado” y “aliNEado” en ambos casos
las reconocerá de la misma manera.
5.3.4 Tipo de Datos
Existen tres tipos de datos que se podrán manipular en este lenguaje los cuales son:
• Numéricas: números enteros o decimales
• Cadenas: un conjunto de caracteres.
• Booleanos: valores que sirve como condiciones para cambiar un valor pueden
ser verdadero o falso.
5.3.5 Operaciones Aritméticas
Representa todos los números enteros o decimales con las que se podrán hacer
alguna operación y obtener su valor puntual.
Los operadores que son permitidos en CCSS se encuentran descritos en la tabla 16.
Tabla 16: operadores permitidos en CCSS.
Operador Nombre Función Ejemplo
+ Suma Operación aritmética que consistirá
en sumar varias cantidades en una
sola.
5+5+10+6+5
10.5+10.5
95+0.5+1.5
- Resta Operación aritmética que consistirá
en restar o quitar cantidades y
obtener la diferencia
100-0.5-95
50-1.5-5
* Multiplicación Operación aritmética que consistirá
en multiplicar es decir sumar las
cantidades las veces indicadas a
otro número.
10*15*10
30*0.5*2
/ División Operación aritmética que devolverá
el residuo de una división.
10/2
200/5
Las operaciones deberán de seguir su precedencia con base en la tabla 17.

Tabla 17: precedencia de operaciones en CCSS.
Precedencia Operador
Mayor /, *
Menor +, -
5.3.6 Cadenas
Las cadenas son un conjunto de caracteres que estarán dentro de comillas dobles.
Este lenguaje permitirá hacer concatenación de cadenas por lo que se deberá poder
realizar concatenaciones con el símbolo "+".
Ejemplo
"Hola " + " " + "Mundo"
"Universidad " + " " + "de " + "San Calos"
5.3.7 Elementos
El lenguaje CCSS tendrá los siguientes elementos.
Alineado
Estilo con el cual se podrá asignar maneras en la que deberá de alinease los
elementos del CHTML.
Los valores posibles que podrá tener este elemento esta descrito en la tabla 18.
Tabla 18: valores de elemento alineado.
Valor Descripción
Izquierda Todos los elementos del CHTML deberán de posicionarse a la
izquierda de la página.
Derecha Todos los elementos del CHTML deberán de posicionarse a la
derecha de la página.
Centrado Todos los elementos del CHTML deberán de posicionarse al
centro de la página.
Justificado Todos los elementos del CHTML deberán de abarcar todo el
ancho de la página.
Texto
Estilo con el cual deberá asignar el valor del estilo al elemento del CHTML que hizo
la llamada.
El valor de este estilo deberá de aceptar cadena o valores numéricos.
Ejemplo
Texto := "cambio a este texto al llamar el ccss";

TEXTO := "hola proyecto" + " compiladores " + "2";
Formato
Estilo que deberá de asignar a los elementos o valores que contienen los elemento
un formato. Si se desea agregar más de un formato al texto deberán ser agregadas
separadas por una coma ",".
Los valores posibles que podrá tener el elemento formato están descritos en la tabla
19.
Tabla 19: valores del elemento formato.
Valor Descripción Ejemplo
Negrilla Asignará a los elementos del CHTML un
formato con negrilla.
Hola mundo
Cursiva Asignará a los elementos del CHTML un
formato cursivo al texto.
Hola Mundo
Mayúscula Asignará al texto que tenga el elemento del
CHTML todo en mayúscula.
SOY
MAYUSCULA
Minúscula Asignará al texto que tenga el elemento del
CHTML todo en minúscula.
soy minúscula
Capital-T Asignará al texto que tenga el elemento del
CHTML a todas las letras después de un
espacio o salto de línea a la primera letra de
la palabra en mayúscula.
Hola Letra
Capital
Ejemplo
Formato := mayuscula, NEGRILLA, capital-t;
Formato := MINUSCULA;
FORMATO := cursiva;
Letra
Estilo que deberá de asignar al texto de los elemento o valores un tipo de fuente.
Los valores se deberán de asignar dentro de comillas dobles (“fuente”) o comillas
simples (‘fuente’).
Ejemplo
Letra := "Arial";

Nota: Se colocaron valores de ejemplo, se asignarán valores válidos para las fuentes
de java, al momento de ingresar un valor no valido asignará una fuente predefinida.
TamTex
Estilo que deberá de asignar al texto de los elementos o valores del CHTML el tamaño
asignado. Este estilo aceptará valores numéricos entero o con decimales, al haber un
valor con decimales deberá de hacer una aproximación.
Los valores válidos para este estilo deberán de ser mayor o igual a 5 (>= 5).
Ejemplo
Tamtex := 16;
Tamtex := 15.5;
Tamtex := 13.0068;
FondoElemento
Estilo que deberá de asignar al elemento del CHTML un fondo del color asignado o
dado.
Los valores válidos para asignar pueden ser un valor del código de colores o nombre
del color dado en inglés, dentro de comillas dobles.
Ejemplo
Fondoelemento := "gray";
Fondoelemento := "green";
Fondoelemento := "#6365ff ";
Fondoelemento := "#ffff ";
AutoRedimension
Estilo que asignará al elemento del CHTML la función de redimensionarse de manera
automática al momento de maximizar o des-maximizar la ventana de la página. Se
deberá especificar si la redimensión del elemento es para el área vertical u horizontal.
La asignación será de la siguiente manera:
Sintaxis
AutoRedimension := [valor, área];

Ejemplo
AutoRedimension := [false, Horizontal];
AutoRedimension := [true, VERTICAL];
Visible
Estilo que asignará si es visible un elemento o no del CHTML.
Los valores válidos para este estilo pueden ser verdadero o falso.
Ejemplo
Visible := true;
Visible := false;
Visible := TRUE;
Borde
Estilo que asignará un borde con un color asignado a un elemento del CHTML.
Los valores válidos para asignar deberán ser el tamaño del grosor del borde, el color
del borde y si se desea que las esquinas sean con curva este valor deberá ser
verdadero o falso, el color para asignar al borde deberá estar dentro de comillas
dobles y podrá ser un valor del código de colores o el nombre del color en inglés.
Sintaxis
Borde := [tamaño, color, curva];
Ejemplo
BORDE := [15, "black", true];
BORDE := [20, "#ffff", false];
BORDE := [30, "blue", false];

Opaque
Estilo que asignará una opacidad o transparencia hacia un elemento de CHTML.
Los valores validos que aceptará este estilo deberán ser valores booleanos (true ó
false).
Ejemplo
Opaque := true;
OpaQUe := faLSe;
ColorText
Estilo que asignará un color al texto que contenga un elemento del CHTML.
Los valores válidos para asignar pueden ser un valor del código de colores o nombre
del color dado en inglés, dentro de comillas dobles.
Ejemplo
Colortext := "black";
colortext := "#A04343"
5.3.8 Editado de elementos
CCSS contiene una funcionalidad el cual es detectar a un id o un grupo en específico
del lenguaje CHTML, para buscar a un identificador en específico se deberá declarar
"ID" seguido de paréntesis "( )", dentro de los paréntesis se especificará el id que se
desea aplicarle CCSS, la funcionalidad de detectar a un grupo de elementos en
específico en el lenguaje CHTML, se deberá declarar "GRUPO", seguido de
paréntesis "( )", dentro de los paréntesis se especificará el identificador del grupo que
se desea aplicar el CCSS.
Ejemplo
//detectar a un grupo en especifico
GRUPO (grupo_areas_1);
Grupo (grupo_1);
GrUpo (grupo_accion_2);
//detectar un identificador en especifico
ID (identificador_1);

Funcionamiento
En la sintaxis el lenguaje detectará que se desea aplicar estilos CCSS a los grupos
creados en CHTML o identificadores datos ahí mismo, se le aplicarán todas las
funcionalidades que se agregaron debajo de esta misma solicitud hasta donde se
encuentre otra solicitud para otro grupo o hasta donde contenga el corchete cerrado.
Ejemplo de Aplicación:
Titular_ccss [
//Inicio Grupo_areas_1
Tamtex := 15.5;
Tamelemento := [150, 75];
Fondoelemento := "green";
SelectTextColor:= "blue";
ColorSelect := "black";
IdElemento := area15;
//Fin Grupo_areas_1
//Inicio Grupo_areas_2
Tamtex := 13;
//Fin Grupo_areas_2
//Inicio identificador_1
Letra := "Arial";
Tamtex := 12;
]
//Fin identificador_1
caja_de_texto [
Formato := NEGRILLA;
Letra := "Arial";
Tamtex := 18;
IdElemento := caja25;
]

En las tablas 20 se podrá ver los estilos que son aplicables y válidos para las etiquetas
del lenguaje CHTML.
Tabla 20: resumen de los elementos CHTML validos en CCSS.
Estilo
Etiqueta
Alineado Text
o
Format
o
Letra TamText TamElemento FondoElemento
CHTML X X X X X X X
Encabezado X X X X X X X
Cuerpo X X X X X X X
CJS X X X X X X X
CCSS X X X X X X X
Titulo X O O O O X X
Panel O X X X X O O
Área de
Texto
O O O O O O O
Imagen O X X X X O X
Botón O O O O O O O
Enlace O O O O O O O
Tabla O O O O O O O
Fila X O X O O X O
Celda
Encabezado
X O O O O X O
Celda X O O O O X O
Caja área de
texto
O O O O O O O
Caja de texto O O O O O O O
Caja de
opciones
O O O O O O X
Opción O O O O X X O
Contador O X X X X O X
Salto X X X X X X X
Estilo
Etiqueta
Visible Borde Opaque ColorText ID GRUPO
CHTML X X X X X X
Encabezado X X X X X X
Cuerpo X X X X X X
CJS X X X X X X
CCSS X X X X X X
Titulo X X X O X X
Panel X O O X O O
Área de
Texto
O O O O O O
Imagen O X X X O O
Botón O O O O O O
Enlace O O O O O O
Tabla O O O O O O
Fila X X X X X X
Celda
Encabezado
X X X O X X
Celda X X X O X X
Caja área de
texto
O O O O O O
Caja de texto O O O O O O
Caja de
opciones
O O O O O O
Opción X X O X O O

Contador O X O X O O
Salto X X X X X X
Estilo
Etiqueta
AutoRedimension
CHTML X
Encabezado X
Cuerpo X
CJS X
CCSS X
Titulo O
Panel O
Área de
Texto
O
Imagen O
Botón O
Enlace O
Tabla O
Fila O
Celda
Encabezado
O
Celda O
Caja área de
texto
O
Caja de texto O
Caja de
opciones
O
Opción O
Contador O
Salto X
6 Requisitos Mínimos
Para que la entrega y calificación del primer proyecto sea efectiva, la solución
entregada deberá contener los siguientes requisitos mínimos:
• Ruta.
• Botón de Cargar Página.
• Pestañas.
• Área de página de web.
• Opciones.
o Consola Salida.
o Consola de Errores.
• Lenguaje CHTML
o Comentarios
o Etiqueta CHTML
o Etiqueta Encabezado
o Etiqueta Cuerpo

o Etiqueta CJS
o Etiqueta CCSS
o Etiqueta Titulo
o Etiqueta Panel
o Etiqueta Área de Texto
o Etiqueta Imagen
o Etiqueta Botón
o Etiqueta Enlace
o Etiqueta Caja Área de Texto
o Etiqueta Caja de Texto
o Etiqueta Caja de Opciones
o Etiqueta Opción
o Etiqueta Salto
o Todos los Elementos del Lenguaje CHTML (id, grupo, valor, alto, ancho,
etc.)
• Lenguaje CJS
o Declaración de variables
o Instancia de variables
o Declaración y uso de arreglos
o Si
o Mientras
o Funciones
o Retorna
o Sentencia Documento
o Obtener
o Utilización de eventos
• Lenguaje CCSS
o Comentarios Múltiples líneas
o Comentarios de Línea
o Case Insensitive
o Operaciones aritméticas Básicas
o Alineado
o Texto
o Formato
o ColorText
o Letra
o TamTex
o TamElemento
o FondoElemento
o Grupo
o ID

7 Entregables y Restricciones
7.1 Entregables
• Código fuente
• Aplicación Funcional
• Gramáticas (CHTML, CJ, CCSS)
• Manual Técnico
• Manual de Usuario
Deberán entregarse todos los archivos necesarios para la ejecución de la aplicación,
así como el código fuente, la gramática y la documentación. La calificación del
proyecto se realizará con los archivos entregados en la fecha establecida. El
estudiante es completa y únicamente responsable de verificar el contenido de los
entregables. La forma de entrega será virtual, los detalles de la entrega se informarán
días antes de la fecha de entrega. Se proporcionarán archivos de entrada al momento
de calificación.
7.2 Restricciones
• El navegador deberá ser desarrollado utilizando el lenguaje Java.
• Los intérpretes deben ser desarrollados con JFlex y Cup.
• Copias de proyectos tendrán automáticamente nota de 0 puntos y se reportará
a los involucrados a la Escuela de Ingeniería en Ciencias y Sistemas
• No se recibirán proyectos después de la fecha de entrega.
• La calificación se realizará sobre archivos ejecutables.
Fecha de entrega: viernes 9 de marzo de 2018 hasta las 11:59 p.m.
El día de la entrega se publicarán los links donde deberán subir su proyecto.

[Compi2]proyecto1 1 sem_2018v9.0

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a [Compi2]proyecto1 1 sem_2018v9.0

Similar a [Compi2]proyecto1 1 sem_2018v9.0 (20)

Último

Último (20)

[Compi2]proyecto1 1 sem_2018v9.0