Universidad Ciudadana

Licenciatura en Informática Administrativa

Asignatura: PAGINAS WEB
Nombre del tutor: Ing. Diego Vázquez Hernández
Tema o Actividad: ACTIVIDAD 2
5to Tetramestre
Matrícula: 42130
Nombre del alumno: Fatima Naomi Leija García
Lugar y fecha: Guadalupe Nuevo León, 05 de enero del 2022
Objetivo:   El objetivo general del presente curso es el de conocer e identificar
las señales y sistemas y sus diferentes tipos de elementos y operaciones 
INTRODUCCION

Comenzaremos este cuestionario hablando acerca de dos temas de gran importancia dentro
del estándar HTLM5 en conjunto con su estructura y código, como ya se sabe es todo lo
referente a la definición de una página web, se detallará el tema 5 Video y audio, y tema 6
Formularios y API Forms.

Dentro del video y audio en una pagina web es de suma importancia ya que puede ofrecer
servicios deseados por los usuarios, en el momento oportuno. Existen formatos de archivos
para la Web con algoritmo de compresión complejos que mejoran en gran medida esta
cuestión, y de aquí algunos se detallaran, al poderlo insertar o mostrar directamente en base a
pasos, funciones o variables. De igual manera existen formatos, en donde también se
visualizarán etiquetas, que se deben seguir.

En el tema de formularios están enfocadas en el usuario, ya que se relacionan con interfaces

en como hacerlas mas intuitivas, practicas, naturales y atractivas. Permitiendo a los usuarios
insertar datos, tomar decisiones, comunicar información y cambiar el comportamiento de una
aplicación. La estructura de los formularios en HTML no ha cambiado solo se han agregado
nuevos elementos, tipos de campo (email, url, search, number, week, month, time, color, por
decir algunos) y atributos (múltiple, autofocus, entre otros) para expandirlos y proveer así
funciones ya implementadas en aplicaciones web.

Se sabe que los formularios HTML cuentan con su propia API para personalizar todos los
aspectos de procesamiento y validación. Solamente cuando se trata de aplicar mecanismos
complejos de validación (por ejemplo, combinando
campos o comprobando los resultados de un cálculo) deberemos recurrir a nuevos
recursos provistos por esta API.

PAGINAS WEB

NOTAS:

1. Subir su tarea en el formato proporcionado por el tutor, y con la nomenclatura

correspondiente para nombrar el archivo.     SPW_(TUS INICIALES)_SEM4

Ejemplo:  Javier Eduardo Lopez Cruz subiría un archivo llamado: SPW_JELC_SEM4

2. La ortografía es muy importante, por tal motivo, los trabajos con errores ortográficos serán
evaluados con calificación igual o inferior a 9, independientemente del resto de las
especificaciones.

DESARROLLO
Instrucciones : Investiga los temas contenidos en los capítulos 5 y 6, y formula 20 preguntas de
cada capítulo, dando respuesta a cada cuestionamiento en forma de texto. Asegúrate de
incluir los conceptos más relevantes del tema.

CAPITULO 5 VIDEO Y AUDIO

1. ¿Cuál es el elemento para insertar y reproducir un video en un documento HTML,

usado como apertura y cierre, con pocos parámetros para lograr su función?
video

2. Son contenedores de video y audio (como lo son theora y de audio Vorbis, o H.264 y
ACC para audio)
Formatos OGG y MP4

3. ¿Cuáles son los atributos del elemento video, declarando dimensiones para el
elemento o ventana del reproductor?
Width y height

4. ¿Cuáles son las funciones más importantes incluidas en la etiqueta video permitiendo
reproducir, pausar o saltar el video hacia un cuadro en específico?
 Autoplay. Cuando este atributo está presente, el navegador comenzará a
reproducir el video automáticamente tan pronto como pueda.
 Loop. Si este atributo es especificado, el navegador comenzará a reproducir el
video nuevamente cuando llega al final.
 Poster. Este atributo es utilizado para proveer una imagen que será mostrada
mientras esperamos que el video comience a ser reproducido.
 Preload. Este atributo puede recibir tres valores distintos: none, metadata o
auto. El primero indica que el video no debería ser cacheado, por lo general
con el propósito de minimizar tráfico innecesario.

5. En un reproductor de video se necesita un diseño, en el está el panel de control de

algunas funciones. ¿Cuáles son esas funciones?
Nav contiene div (reproducir) y una barra de progreso

6. Existen varias formas de programar un reproductor de video, pero se hablara de un

código en especifico para un reproductor de video
Código Javascript

7. ¿Para que son icnorporados los elementos en el procesamiento de video y audio

HTML5?
Con el objetivo de informar sobre la situación del medio (el progreso de la descarga,
si la reproducción del medio finalizó, o si la reproducción del medio es comenzada o
pausada, entre otras).

8. ¿Cuáles son los eventos más relevantes para construir dichas aplicaciones?
  Progress. Este evento es disparado periódicamente para informar acerca del
progreso de la descarga del medio. La información estará disponible a través
del atributo buffered, como veremos más adelante.
 Canplaythrough. Este evento es disparado cuando el medio completo puede
ser reproducido sin interrupción. El estado es establecido considerando la
actual tasa de descarga y asumiendo que seguirá siendo la misma durante el
resto del proceso.
 Ended. Es disparado cuando el reproductor llega al final del medio.
 Pause. Es disparado cuando el reproductor es pausado.
 Play. Es disparado cuando el medio comienza a ser reproducido.
 Error. Este evento es disparado cuando ocurre un error.

9. ¿Cuál es la primera función del reproductor de video?

Iniciar es la función que iniciaría la ejecución de la aplicación tan pronto como el
documento sea completamente cargado.

10. ¿Cuáles son las variables globales necesarias para configurar el reproductor?
 Selector getElementById : para crear una referencia a cada uno de los
elementos del reproductor para poder acceder a ellos en el resto del código
más adelante.
 Variable maximo : para conocer siempre el máximo tamaño posible para la
barra de progreso (600 pixeles).

11. ¿Qué función se ejecutara de acuerdo a la situación actual de dos métodos específicos
de API (play y pause)?
La función presionar

12. ¿Cuáles son los métodos mas relevantes en los métodos para la creación del
reproductor?
 Play() Este método comienza a reproducir el medio desde el inicio, a menos
que el medio haya sido pausado previamente.
 Pause()Este método pausa la reproducción.
 Load()Este método carga el archivo del medio. Es útil en aplicaciones
dinámicas para cargar el medio anticipadamente.
 CanPlayType(formato) Con este método podemos saber si el formato del
archivo es soportado por el navegador o no.

13. ¿Qué detecta la situación del medio comprobando el valor de las propiedades paused
y ended?
Código en operacion

14. ¿Cuáles son los contenedores más comunes?

 OGG codificador de video Theora y audio Vorbis.
 MP4 codificador de video H.264 y audio AAC.
 FLV codificador de video VP6 y audio MP3. También soporta H.264 y AAC.
 WEBM codificador de video VP8 y audio Vorbis.
15. ¿Cuáles son los navegadores que podemos utilizar?
 Firefox codificador de video Theora y audio Vorbis.
 Google Chrome codificador de video Theora y audio Vorbis. También soporta
codificador de video H.264 y audio AAC.
 Opera codificador de video Theora y audio Vorbis.
 Safari codificador de video H.264 y audio AAC.
 Internet Explorer codificador de video H.264 y audio AAC.

16. ¿Cuál es elemento que comparte casi las mismas características del elemento Video, y
creando así un archivo con mejor forma?
Audio

17. ¿Cuáles son los atributos mas destacados del elemento Audio?
 Src. especifica la URL del archivo a ser reproducido.
 Controls. activa la interface que cada navegador provee por defecto para
controlar la reproducción del audio.
 Autoplay. Cuando este atributo está presente, el audio comenzará a
reproducirse automáticamente tan pronto como sea posible.
 Lopp. Es especificado, el navegador reproducirá el audio una y otra vez de
forma automática.
 Preload. Puede tomar tres valores diferentes: none, metadata o auto.

18. ¿Cómo se incorporará la API para medios desarrollados tanto en video como en audio?
Solo se reemplazará el elemento video por el de audio en la plantilla y se obtendrá
instantáneamente.

19. HTML5 provee dos nuevos elementos HTML para procesar medios y una API específica
para acceder a la librería de medios.
Video y audio

20. Incorpora todos los elementos necesarios para aprovechar estas herramientas y
utilizarlas en nuestras aplicaciones web.
HTML5
CAPITULO 6 FORMULARIOS Y API FORMS

1. Se tiene la misma estructura pero en HTML se agregaron nuevos elementos tipos de

campo y atributos para expandirlos tanto como sea necesario y proveer así las
funciones actualmente implementadas en aplicaciones web.
Los formularios en HTML

2. ¿Cuáles son los nuevos atributos mas destacados del elemento form?
 Autocomplete. Puede tomar dos valores: on y off. El valor por defecto es on.
Cuando es configurado como off los elementos input pertenecientes a ese
formulario tendrán la función de autocompletar desactivada, sin mostrar
entradas previas como posibles valores.
 Novalidate. Una de las características de formularios en HTML5 es la
capacidad propia de validación. Los formularios son automáticamente
validados. Para evitar este comportamiento, podemos usar el atributo
novalidate.

3. ¿Cuál es el elemento mas importante de un formulario?

<Input> se puede cambiar sus características gracias al atributo type, determinando
que clase de entrada es esperada desde el usuario.

4. Representa un texto general no algo especifico, por lo tanto de tenia que controlar la
entrada con código JavaScript para estar seguros de que el texto ingresado
correspondiera a un email valido.
Tipo text

5. Es una indicación para los navegadores, al detectar un campo asi, los navegadores
cambiarían el diseño del elemento para darle al usuario un indicio de su propósito (sin
controlar la entrada).
Tipo search busqueda

6. Es el tipo de campo para números telefónicos, no requiere ninguna sintaxis en

particular, es solo la indicación para el navegador en caso de que necesite hacer
ajustes de acuerdo al dispositivo en el que la aplicación es ejecutada.
Tipo tel

7. Es el tipo solo valido cuando recibe una entrada numérica, conteniendo algunos
tributos como min, max y step.
Tipo number

8. Es el tipo de campo que hace que el navegador construya una nueva clase de control
que antes no existía. Permitiendo al usuario seleccionar un valor a partir de una serie
de valores o rango.
Tipo range

9. Es el tipo de campo que genera una nueva clase de control, ya que ofrece una mejor
forma de ingresar una fecha.
Tipo date
10. Es el tipo de campo que ofrece algo similar a date, pero solo para seleccionar una
semana completa.
Tipo week

11. Es el tipo de campo que selecciona solo los meses, pero tiene la sintaxis de año-mes
Tipo month

12. Es el tipo de campo que solo toma el formato de horas y minutos pero su
comportamiento depende de cada navegador en este momento. Tiene la sintaxis
hora:minutos:segundos.
Tipo time

13. Es el tipo de campo que se ingresa la fecha y hora completa, incluyendo la zona
horaria.
Tipo datetime

14. Es el tipo de campo igual al Tipo datetime solo que sin la zona horaria.
Tipo datetime-local

15. Es el tipo de campo pero que existe para la interface que predefinida similar para
seleccionar colores.
Tipo color

16. ¿Cuáles son los atributos más útiles e incorporados por HTML5?
 Atributo placeholder. Representa una sugerencia corta, una palabra o frase
provista para ayudar al usuario a ingresar la información correcta.
 Atributo required. la entrada será válida sólo si se cumplen las dos
condiciones: que el campo no esté vacío y que el valor ingresado esté de
acuerdo con los requisitos del tipo de campo.
 Atributo multiple. Puede ser usado en algunos tipos de campo (por ejemplo,
email o file) para permitir el ingreso de entradas múltiples en el mismo campo.
 Atributo autofocus. Enfocará la página web sobre el elemento seleccionado,
pero considerando la situación actual. No moverá el foco cuando ya haya sido
establecido por el usuario sobre otro elemento.
 Atributo pattern. Validación. Permite crear nuestro propio tipo de campo para
controlar esta clase de valores no ordinarios.
 Atributo form. Nos permite declarar elementos para un formulario fuera del
ámbito de las etiquetas, asi como etiquetas de apertura y cierre luego declarar
cada elemento del formulario entre ellas.

17. ¿Cuáles son los elementos para formularios más destacados?

 Elemento datalist. Es específico de formularios usado para construir una lista
de ítems que luego, con la ayuda del atributo list, será usada como sugerencia
en un campo del formulario.
  Elemento progress. Utiliza dos atributos para configurar su estado y límites. El
atributo value indica qué parte de la tarea ya ha sido procesada, y max declara
el valor a alcanzar para que la tarea se considere finalizada.
 Elemento meter. Usado para mostrar una escala, pero no de progreso, tiene la
intención de representar una medida.
 Elemento output. Este ayuda a mostrar los resultados del procesamiento de
valores provistos por un formulario.

18. Los navegadores que soportan HTML5 muestran un mensaje de error cuando el
usuario intenta enviar un formulario que contiene un campo inválido. ¿Qué método se
utiliza para especificar un error personalizado que mostrará un mensaje cuando el
formulario es enviado cuando un mensaje vacío es declarado, el error es anulado?
SetCustomValidity

19. ¿Cuál es nombre del evento, que al enviar el formulario, se ve disparado por el
elemento que produce el error?
El evento invalid

20. Son sólo validados cuando el botón “ingresar” es presionado. Para hacer más práctico
nuestro sistema personalizado de validación, tenemos que aprovechar los atributos
provistos por el objeto ValidityState.
Validación en tiempo real
CONCLUSION

Para finalizar en este cuestionario se destaco mas acerca de las paginas web, en especifico
aquellas de las cuales se este estructurado el código HTML, partiendo de ahí lo demás son
contenido asi como etiquetas y sin duda del tema principal al agregar video y audio
De igual manera lo Formularios y API Forms, son una gran herramienta que nos ayudan en la
organización del contenido, tanto para recolectar información proporcionada por los visitantes
del sitio, la cual es luego enviada nuevamente al servidor. Siendo importate que sea
acompañado de un código del lado servidor al que denominaremos agente procesador. Un
contenedor para controles.
También una herramienta de mucha utilidad son los controles de texto que proveen los
medios necesarios para recolectar información textual, como nombres, direcciones, frases,
mensajes, contraseñas, etc. En las secciones siguientes analizaremos dos de los controles de
texto más básicos y utilizados.

BIBLIOGRAFIA
PAGINASWEB.LIBRO.pdf