Heber Uziel Gonzalez Rosales

DSM-501 11/01/2022
INTERFAZ GRAFICA DEL AVION
1-. Crear una copia del archivo Avion2.html, por ejemplo Avionc.html y guardar la carpeta en
Avión.

2-. Abrir el archivo Avionc.html y eliminar todo el código javascript que está dentro de las
etiquetas: <script text=”text/javascript”></script>
Heber Uziel Gonzalez Rosales
DSM-501 11/01/2022

3-. Hecho el paso 2, ejecutar la página Avionc.html con la sintaxis apropiada:

Localhost:8020/avión/Avionc.html

4-. Escribe la etiqueta para definir los estilos en una página web
<style type="text/css">
5-. Llenar la siguiente tabla, indicando la función de cada etiqueta.
ETIQUETA FUNCION

div Una etiqueta div es una etiqueta que define las

divisiones lógicas existentes en el contenido de
una página web. Puede utilizar etiquetas
div para centrar bloques de contenido, crear
efectos de columna y crear diferentes áreas de
color, entre otras posibilidades.
fieldset La etiqueta FIELDSET sirve para agrupar los
elementos. Se utiliza con su
respectiva etiqueta de cierre y lo que hace es
crear un recuadro que rodea a los elementos de
formulario colocados dentro de ella.
Simplemente creará un cuadrado que agrupará
los dos elementos del formulario incluidos
dentro del FIELDSET
span Sirve para aplicar estilo al texto o agrupar
elementos en línea. Sus etiquetas son: <span>
y </span> (ambas obligatorias). Está definido
como: Elemento especial, y por lo tanto en
Heber Uziel Gonzalez Rosales
DSM-501 11/01/2022
línea. Puede contener: Texto, y/o Elementos en
línea
legend El elemento <legend> (leyenda) crea un título
para un grupos los campos ( <fieldset> ) de un
formulario. Sus etiquetas son: <legend> y
</legend> (ambas obligatorias). Está definido
como: Debe contener: cero o más elementos en
linea.

6-. Sintaxis para definir estilos en css.

sintaxis del estilo sintaxis de estilo para agregar el estilo en
etiqueta de HTML
div { } <div>

#información <div id=”información”>

.asiento <div id=”a1” class=”asiento”>1</div>

7-. Llenar la siguiente tabla indicando la función de cada atributo css

ABRIBUTO FUNCION
Magin:0px auto centrará el div horizontalmente.

Magin 0px 0px Parte superior izquierda

Position absolute o estará dentro del flujo normal de la página y

tomará como referencia la ventana del
navegador o el elemento posicionado
border-style que establece el estilo de línea para los
cuatro lados del borde de un elemento.
border-color  un atajo para definir el color de los cuatro
bordes de un elemento
background-color que define el color de fondo de un elemento,
puede ser el valor de un color o la palabra
transition-property se usa para definir los nombres de las
propiedades CSS en las que el efecto de la
transición debe aplicarse.
transition-duration establece el tiempo que debe tardar una
animación de transición en completarse.
Heber Uziel Gonzalez Rosales
DSM-501 11/01/2022

8-. Experimentar con la página modificando, por ejemplo, el valor de los atributos

9-. Agregar 2 asientos a cada clase

11.ver el siguiente video que habla del tema márgenes
Margin :
Es la propiedad que nos permite generar espacio entre elementos es un shorthand que controla
los 4 lados posible a lo que dar margen y estos son algunos ejemplos.
Margin-Top: Margen superior
Magin-Ringht: Margen derecho
Margin bottom: Margen inferior
Margin-Left: Izquierdo

Utilizando el margin auto es para que ajuste automáticamente a la alineación que se le indica y
Heber Uziel Gonzalez Rosales
DSM-501 11/01/2022
12.-Escribe la estructura básica de la página del avión.

13.- En la página hay un arreglo de divs, ubicar su índice.

El asiento 1 correponde al div numero 4 y el asiento numero 10 es el div numero 13

14.- Menciona otros arreglos que están en la página del avión.

Imput , span, button

15.- Cuando dos elementos radio se llaman igual, menciona dos características que se generan en estos.
Una característica importa es que solo se puede seleccionar uno a la ves , tomando en cuenta que solo
se toma una y se desmarca en el otro. Y los dos arreglos se van a indexan

16.-Cuando se ejecuta la página Avion2.html, ¿Cuál es la instrucción que inicia con la ejecución del
código javascript?
Addevent
Function addEvent

17.-Con los conocimientos básicos que ya tienen de javascript agrega el mensaje ”Se ejecuto código
javascript” cuando cargue la página Avionc.html y contesta la siguiente pregunta ¿ qué se ejecuto
primero las instrucciones dentro del body o el código javascript.

alert("mensaje");
function msj(){------- }
Heber Uziel Gonzalez Rosales
DSM-501 11/01/2022

Nota: Antes de iniciar con la explicación del código del avión, realizaremos un ejercicio previo que
consiste en sumar dos números enteros utilizando un objeto Ajax.

18.-Ver el video suma 1 y después suma 2, es muy importante comprender lo que se explica, si es
necesario pregunta a tu profesor. Captura el código y prueba la aplicación.

19. Realizar el siguiente ejercicio: Modificar el programa de suma para que ahora se puedan sumar cuatro
números.
Vista html
Heber Uziel Gonzalez Rosales
DSM-501 11/01/2022
Heber Uziel Gonzalez Rosales
DSM-501 11/01/2022

Vista del PHP

Resultado en LocalHost
Heber Uziel Gonzalez Rosales
DSM-501 11/01/2022
Heber Uziel Gonzalez Rosales
DSM-501 11/01/2022

20.-Repaso de arreglos

Antes de continuar con la aplicación del sistema de reservaciones, es conveniente dar

un repaso al tema de arreglos ya que se utilizan en la aplicación. 
Actividad : Ver el video, curso de javascript desde 0 y realizar un resumen de este en el
cuaderno.
Link del video: https://www.youtube.com/watch?
v=hTeFMke6F6Q&ab_channel=pildorasinformaticas
Evidencia: Tomar foto al resumen y subirlo a Classroom en la tarea correspondiente.

21.- Ejercicios
A) Utilizando un ciclo for y la propiedad length de un arreglo, imprimir los valores que
contiene el siguiente array: var n=[1,2,3,4,5,6,7,8,9,10].

B) Al arreglo del inciso A, sumarle uno a cada posición del arreglo y posteriormente
imprimir los nuevos valores.

c)Realizar una aplicación en javascript que dé solución al problema 3.11.

Características del código:
**Agregar el evento a los botones registrar voto y calcular porcentajes cuando cargue la
página.

**Usar un arreglo de contadores para guardar el total de votos para cada candidato.
**Para obtener el total de votos recorrer el arreglo e ir sumando sus valores, se puede
utilizar un acumulador.
Heber Uziel Gonzalez Rosales
DSM-501 11/01/2022

B) Al arreglo del inciso A, sumarle uno a cada posición del arreglo y posteriormente
imprimir los nuevos valores.

Interfaz grafica de usuario:

Heber Uziel Gonzalez Rosales
DSM-501 11/01/2022