Construcción y Diseño de Páginas Web 2023
50 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

¿Cuál de los siguientes elementos HTML5 se utiliza específicamente para insertar contenido de audio en una página web?

  • figure
  • video
  • audio (correct)
  • img

¿Cuál es la utilidad principal del elemento picture en HTML5?

  • Definir diferentes fuentes de imágenes basadas en criterios como el ancho de pantalla. (correct)
  • Insertar videos dentro de la página.
  • Insertar una sola imagen en la página web.
  • Mostrar una descripción de una imagen.

¿Qué propiedad CSS se utiliza para controlar cómo se repite una imagen de fondo?

  • background-clip
  • background-repeat (correct)
  • background-size
  • background-position

¿Qué propiedad CSS se utiliza para especificar el punto de origen de una imagen de fondo?

<p>background-origin (D)</p> Signup and view all the answers

Además de la propiedad srcset ¿qué elemento de HTML junto con el elemento img permite la selección de diferentes imágenes basadas en la densidad de píxeles o el tamaño de la ventana?

<p>source (A)</p> Signup and view all the answers

¿Qué propiedad CSS se utiliza para ajustar el tamaño de la imagen de fondo dentro de un elemento contenedor?

<p>background-size (A)</p> Signup and view all the answers

¿Cuál es la principal función de la propiedad object-position en CSS?

<p>Ajustar la posición de una imagen dentro de su contenedor. (A)</p> Signup and view all the answers

¿Qué elemento HTML5 se utiliza para proporcionar una descripción o pie de foto a una imagen o figura?

<p>figcaption (D)</p> Signup and view all the answers

¿Cuál de las siguientes NO es una forma de eliminar elementos de un array en JavaScript?

<p>Usando el método <code>slice()</code> para crear un nuevo array sin ciertos elementos (C)</p> Signup and view all the answers

¿Qué objeto en JavaScript proporciona información sobre la pantalla del usuario?

<p>El objeto <code>screen</code> (C)</p> Signup and view all the answers

En el contexto de objetos JavaScript, ¿qué se utiliza para definir un método?

<p>Una propiedad que contiene una función (C)</p> Signup and view all the answers

¿Cuál de las siguientes describe mejor la sintaxis de un objeto JSON?

<p>Una secuencia de pares clave-valor envueltos en llaves. (C)</p> Signup and view all the answers

Respecto a la manipulación de JSON en JavaScript, ¿qué función NO es típicamente usada para modificar un JSON directamente?

<p>Asignación de una cadena JSON directamente a la propiedad de un objeto (A)</p> Signup and view all the answers

¿Cuál de los siguientes objetos o interfaces en JavaScript se usa para interactuar con el historial de navegación del usuario?

<p>El objeto <code>History</code> (A)</p> Signup and view all the answers

¿Qué representa el objeto this dentro de un método de un objeto en JavaScript?

<p>El objeto que instancia el método (C)</p> Signup and view all the answers

¿Cuál es el propósito principal de los métodos get y set en JavaScript?

<p>Establecer y recuperar valores de propiedades privadas, ofreciendo mayor control y lógica. (A)</p> Signup and view all the answers

¿Cuál de estos objetos o interfaces NO forma parte del modelo de objetos del navegador (BOM)?

<p>La interfaz <code>HTMLElement</code> (D)</p> Signup and view all the answers

¿Qué concepto describe la capacidad de un objeto en JavaScript de heredar propiedades y métodos de otro objeto?

<p>Herencia (A)</p> Signup and view all the answers

¿Qué protocolo se encarga de establecer la conexión entre el cliente y el servidor?

<p>TCP (A)</p> Signup and view all the answers

¿Cuál es la función principal del DNS?

<p>Traducir nombres de dominio a direcciones IP. (C)</p> Signup and view all the answers

¿Qué protocolo define las reglas de sintaxis y semántica para la comunicación entre un navegador y un servidor web?

<p>HTTP (C)</p> Signup and view all the answers

¿Cuál es la principal mejora que ofrece HTTPS sobre HTTP?

<p>Comunicación cifrada mediante SSL/TLS. (D)</p> Signup and view all the answers

¿Qué protocolos se utilizan para crear una capa encriptada entre HTTP y TCP/IP en una conexión HTTPS?

<p>SSL/TLS (B)</p> Signup and view all the answers

Según la información proporcionada, ¿cómo se representa una dirección IP comúnmente?

<p>Por cuatro códigos de 8 bits. (D)</p> Signup and view all the answers

¿Qué papel juega el navegador en el proceso de petición web descrito?

<p>Establece la conexión con el servidor usando HTTP o HTTPS. (C)</p> Signup and view all the answers

¿Cuál es la función principal de la pestaña NETWORK en la consola del navegador?

<p>Recupera la información de las conexiones entre el cliente y el servidor. (A)</p> Signup and view all the answers

¿Cuál es la función principal de una cabecera de página web?

<p>Proporcionar datos de configuración y metadatos del documento. (A)</p> Signup and view all the answers

¿Qué tipo de información NO se incluye normalmente en el cuerpo de una página web?

<p>Datos sobre el autor del documento. (B)</p> Signup and view all the answers

¿Qué son los 'metadatos' en el contexto de una página web?

<p>Datos acerca de los datos, que describen el documento. (A)</p> Signup and view all the answers

¿Cuál es un ejemplo de metadato que se puede encontrar en la cabecera de una página web?

<p>Las palabras clave para indexar el sitio en buscadores. (B)</p> Signup and view all the answers

¿Qué tipo de información NO es típica en un pie de página de un sitio web?

<p>Contenido principal del sitio, como artículos destacados. (D)</p> Signup and view all the answers

¿Cuál es el propósito principal de los estándares W3C?

<p>Establecer recomendaciones para mejorar el rendimiento y la funcionalidad de los sitios web. (C)</p> Signup and view all the answers

¿Cuál de las siguientes opciones es un ejemplo de información que se encuentra en la cabecera, pero no en el cuerpo de una página web?

<p>El título del documento para presentación visual. (A)</p> Signup and view all the answers

Según el texto, ¿qué función cumple el cuerpo de una página web?

<p>Aloja el contenido que el usuario percibe. (C)</p> Signup and view all the answers

¿Cuál es el propósito principal de la cláusula PRECONNECT?

<p>Resolver el DNS y realizar la preconexión con protocolos TCP y TLS para recursos externos. (C)</p> Signup and view all the answers

¿Qué desventaja principal tiene el uso excesivo de la cláusula PRECONNECT?

<p>Puede causar una pérdida sustancial de rendimiento global. (C)</p> Signup and view all the answers

¿Cuál es la función de la cláusula PRERENDER?

<p>Indicar al navegador que renderice un recurso en segundo plano. (C)</p> Signup and view all the answers

¿Qué limitación importante tiene la cláusula PRERENDER a febrero de 2023?

<p>No está totalmente soportada por Firefox ni Safari. (A)</p> Signup and view all the answers

¿Qué atributo del elemento link se utiliza para especificar el idioma del documento?

<p>HREFLANG (C)</p> Signup and view all the answers

¿Qué atributo del elemento link se utiliza para definir el dispositivo o medio para el que está optimizado el documento?

<p>MEDIA (C)</p> Signup and view all the answers

¿Cuál es la definición de metadatos?

<p>Datos acerca de los datos. (B)</p> Signup and view all the answers

¿Qué papel juega el elemento META en un documento HTML?

<p>Especifica información sobre los datos del documento actual. (A)</p> Signup and view all the answers

¿Cuál es el enfoque principal de la disciplina 'Mobile First'?

<p>Priorizar el diseño para dispositivos móviles y luego adaptarlo a otros. (D)</p> Signup and view all the answers

¿Cuál es el objetivo principal de la seguridad web?

<p>Prevenir ataques de usuarios malintencionados y software dañino. (B)</p> Signup and view all the answers

¿Qué busca la semántica web según las recomendaciones de la W3C?

<p>Hacer que los datos sean más comprensibles y legibles. (C)</p> Signup and view all the answers

¿A qué se refiere el concepto de 'usabilidad web'?

<p>A la facilidad con que los usuarios interactúan con páginas y aplicaciones. (C)</p> Signup and view all the answers

¿Cuál es la función principal de un entorno de desarrollo integrado (IDE)?

<p>Ofrecer una solución completa para el desarrollo de software. (B)</p> Signup and view all the answers

¿Qué tipo de herramientas suelen incluir los IDEs?

<p>Editores de código, validadores, compiladores y depuradores. (A)</p> Signup and view all the answers

¿Cuál de los siguientes es un IDE popular que soporta múltiples arquitecturas como PHP, Angular, React, JavaScript, HTML y CSS?

<p>Visual Studio Code (A)</p> Signup and view all the answers

¿Por qué es importante que un diseño web sea 'usable'?

<p>Para que los usuarios puedan realizar fácilmente sus tareas. (B)</p> Signup and view all the answers

Flashcards

Mobile First

Disciplina que prioriza el diseño para dispositivos móviles antes que para ordenadores. Se adapta posteriormente para otros escenarios.

Seguridad Web

Protección de la información en páginas web y aplicaciones contra ataques de usuarios maliciosos y software dañino.

Semántica Web

Estándares que hacen la información más legible para las máquinas, facilitando la comprensión y el procesamiento de datos.

Usabilidad Web

Facilidad de uso de sitios web y aplicaciones, enfocándose en la experiencia del usuario.

Signup and view all the flashcards

Entorno de Programación (IDE)

Software o aplicación que proporciona herramientas para desarrollar software de manera integral.

Signup and view all the flashcards

Visual Studio Code

Editor de código fuente popular para diversas arquitecturas como PHP, Angular, React, JavaScript, HTML y CSS.

Signup and view all the flashcards

Depuración

Proceso de encontrar y corregir errores en el código fuente.

Signup and view all the flashcards

Linter

Herramienta que analiza el código fuente para identificar errores potenciales o problemas de estilo.

Signup and view all the flashcards

Cabecera

Parte superior de la página web que contiene información sobre el documento y su configuración.

Signup and view all the flashcards

Metadatos

Información que describe el contenido de un documento, como autor, título, fecha de creación y palabras clave.

Signup and view all the flashcards

Cuerpo del documento

Parte central de la página web que contiene el contenido principal, como textos, imágenes, vídeos y otros elementos.

Signup and view all the flashcards

Pie de página

Parte inferior de la página web que suele proporcionar información adicional, como derechos de autor, enlaces de interés y redes sociales.

Signup and view all the flashcards

Estándares W3C

Conjunto de recomendaciones internacionales para mejorar el rendimiento y la funcionalidad de las páginas web.

Signup and view all the flashcards

W3C (World Wide Web Consortium)

Organización internacional que define los estándares para la World Wide Web.

Signup and view all the flashcards

Metadatos de una página web

Información que describe el contenido de una página web, como palabras clave, descripción y autor.

Signup and view all the flashcards

Enlaces de interés

Conjunto de enlaces o conexiones que ayudan a navegar por el sitio web.

Signup and view all the flashcards

PRECONNECT

La cláusula PRECONNECT le indica al navegador que resuelva el DNS y establezca una conexión anticipada con los protocolos TCP y TLS. Esto puede mejorar el rendimiento al cargar recursos externos como fuentes de Google Fonts o scripts de un CDN.

Signup and view all the flashcards

PRERENDER

La cláusula PRERENDER le indica al navegador que renderice un recurso en segundo plano. Esto puede ser útil cuando se sabe que el usuario interactuará con ese recurso en el futuro. Este proceso puede aumentar el rendimiento, pero también es intensivo en recursos.

Signup and view all the flashcards

Elemento META

El elemento META especifica información sobre los datos dentro de un documento HTML. Puede incluir detalles sobre la apariencia, la optimización para dispositivos (escritorio, móvil) o información utilizada por los navegadores.

Signup and view all the flashcards

Atributo HREFLANG

El atributo HREFLANG especifica el idioma del contenido. Se utiliza para optimizar la experiencia del usuario, presentando el contenido en el idioma adecuado para el usuario.

Signup and view all the flashcards

Atributo MEDIA

El atributo MEDIA especifica el medio para el que está optimizado el contenido. Se utiliza para adaptar el contenido a diferentes dispositivos, como pantallas (ordenadores, teléfonos, tablets) o medios impresos.

Signup and view all the flashcards

Protocolo TCP

El protocolo TCP (Transmission Control Protocol) se encarga de establecer y mantener conexiones entre dispositivos en una red. Permite asegurar la entrega ordenada y fiable de los datos, gestionando la segmentación y reensamblaje de paquetes.

Signup and view all the flashcards

Protocolo IP

El protocolo IP (Internet Protocol) es responsable de direccionar los paquetes de datos a través de la red. Define las direcciones IP únicas para cada dispositivo y establece rutas para alcanzar el destino final.

Signup and view all the flashcards

Dirección IP

Un identificador único que se utiliza para identificar un dispositivo en una red. Generalmente está compuesto por cuatro grupos de 8 bits. Ejemplo: 192.168.1.1.

Signup and view all the flashcards

DNS (Sistema de Nombres de Dominio)

Un sistema que traduce los nombres de dominio (como google.com) a direcciones IP (como 216.58.211.35). Permite a los usuarios acceder a los sitios web mediante nombres fáciles de recordar.

Signup and view all the flashcards

Protocolo HTTP

Protocolo de comunicación que se utiliza para intercambiar información entre navegadores web (Clientes) y servidores web. Define las reglas para establecer una conexión y las instrucciones para el envío y recepción de la información.

Signup and view all the flashcards

Protocolo HTTPS

Versión segura del protocolo HTTP. Utiliza métodos de cifrado (SSL/TLS) para proteger la información que se transmite entre el navegador y el servidor web.

Signup and view all the flashcards

Objetos en JavaScript

Un objeto en JavaScript es una colección de propiedades y métodos que representan un elemento o concepto específico.

Signup and view all the flashcards

Propiedades de un objeto

Las propiedades de un objeto son atributos que almacenan información o datos.

Signup and view all the flashcards

Navegador Web

Un programa que se utiliza para acceder a la web. En términos de comunicación se lo conoce como Cliente.

Signup and view all the flashcards

Servidor Web

Una computadora que almacena y sirve información en la web. En términos de comunicación se lo conoce como Servidor.

Signup and view all the flashcards

Métodos de un objeto

Los métodos de un objeto son funciones especiales que realizan alguna acción o operan con los datos del objeto.

Signup and view all the flashcards

Arrays en JavaScript

Un array es una colección ordenada de elementos del mismo tipo.

Signup and view all the flashcards

Creación de arrays

Para crear un array, se utiliza la sintaxis let nombreDelArray = [elemento1, elemento2, ...];.

Signup and view all the flashcards

Acceso a elementos de un array

Se puede acceder a los elementos de un array a través de su índice, que comienza desde 0.

Signup and view all the flashcards

Inserción de elementos en un array

Para agregar elementos a un array se puede utilizar el método push(), que los añade al final del array.

Signup and view all the flashcards

Eliminación de elementos de un array

Para eliminar elementos de un array existe el método splice(), que recibe como argumentos el índice donde se eliminará y la cantidad de elementos que se eliminarán.

Signup and view all the flashcards

JSON en JavaScript

JSON (JavaScript Object Notation) es un formato de intercambio de datos basado en texto que es ligero y de fácil lectura.

Signup and view all the flashcards

Sintaxis de JSON

Los datos en JSON se representan utilizando una estructura de clave-valor, donde las claves son strings y los valores pueden ser strings, números, booleanos, arrays u otros objetos JSON.

Signup and view all the flashcards

Elemento audio en HTML5

El elemento audio se utiliza para insertar archivos de audio en una página web. Permite al usuario reproducir, pausar y controlar la reproducción de audio.

Signup and view all the flashcards

Elementos figure y figcaption

El elemento figure se utiliza para agrupar contenido relacionado, como una imagen y su descripción. El elemento figcaption se utiliza para proporcionar una leyenda o descripción del contenido dentro del figure.

Signup and view all the flashcards

Elemento img

El elemento img se utiliza para insertar imágenes en una página web. Se especifica la ruta o URL de la imagen y se pueden añadir atributos para controlar su tamaño, alineación y otras propiedades.

Signup and view all the flashcards

Elemento picture

El elemento picture se utiliza para proporcionar diferentes versiones de una imagen según el dispositivo o las capacidades del navegador del usuario. Se puede incluir una imagen principal y otras versiones para diferentes tamaños de pantalla, resoluciones o tipos de archivos.

Signup and view all the flashcards

Elemento source

El elemento source se utiliza dentro de picture o video para especificar diferentes fuentes de contenido, por ejemplo, imágenes en diferentes tamaños o videos en diferentes resoluciones. Se puede utilizar para proporcionar una imagen o video adecuado para cada dispositivo.

Signup and view all the flashcards

Elemento video en HTML5

El elemento video se utiliza para insertar videos en una página web. Se especifica la ruta o URL del video y se pueden añadir atributos para controlar la reproducción, tamaño, y otras propiedades.

Signup and view all the flashcards

Propiedad background-image en CSS

La propiedad background-image se utiliza en CSS para aplicar una imagen como fondo de un elemento. Se puede especificar la ruta o URL de la imagen y se pueden utilizar palabras clave para especificar cómo se repite la imagen en el fondo.

Signup and view all the flashcards

Propiedad object-position en CSS

La propiedad object-position en CSS controla la posición dentro del elemento de un objeto que se muestra mediante la etiqueta object o img. Se utiliza para ajustar la posición de la imagen o el objeto dentro del contenedor.

Signup and view all the flashcards

Study Notes

Introduction to Web Pages Construction and Design with HTML, CSS, and JavaScript

  • This book covers the construction and design of web pages using HTML, CSS, and JavaScript.
  • The 2023 edition provides updated information on web development.
  • There is additional material available for download from the publisher's website.

Author and Publisher Information

  • The author is Pablo E. Fernández Casado.
  • The publisher is Ediciones de la U (Colombia) and Editorial Ra-Ma (Spain).
  • The book is part of the Sistemas e informática (Systems and Computer Science) area.
  • The book has a total of 314 pages.
  • The book has an ISBN and an e-ISBN for the printed and electronic versions.

Table of Contents Overview

  • The book is divided into chapters covering various aspects of web development.
  • Early chapters cover fundamental concepts like programming environments, web history, and web functionality.
  • Later chapters delve into HTML5, CSS3, and JavaScript in detail.
  • Topics include semantic elements of HTML, styling with CSS, and using JavaScript for dynamic web interactions and functionalities.
  • Chapters also include practical exercises and projects to reinforce learning.
  • There are chapters on images, multimedia elements and forms.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

Construcción y diseño de Páginas Web con HTML, CSS y JavaScript PDF 2023

Description

Este cuestionario explora la construcción y diseño de páginas web utilizando HTML, CSS y JavaScript según el libro de Pablo E. Fernández Casado. Los temas cubiertos incluyen conceptos fundamentales, HTML5, CSS3 y JavaScript en detalle, actualizado en la edición 2023. Es perfecto para quienes deseen profundizar en el desarrollo web.

More Like This

Use Quizgecko on...
Browser
Open
Browser
Browser