Questions and Answers
¿Qué sucede con los párrafos en la regla de Media Query '@media (max-width: 600px)' si la pantalla es menor o igual a 600 píxeles?
Se mostrarán como elementos en bloque con fondo negro y letra roja.
¿Cuál es el significado del tipo de medio 'print' en un Media Query?
Documentos de medios impresos o pantallas de previsualización de impresión.
¿Qué sucede con los párrafos en la regla '@media screen'?
Tendrán fondo de color azul con letra blanca si se muestra en una pantalla.
¿Cuál es el propósito principal de los Media Query?
Signup and view all the answers
¿Cuál es el efecto del Media Query '@media (max-width: 600px)' en el diseño si la pantalla es mayor a 600 píxeles?
Signup and view all the answers
¿Qué diferencia existe entre el tipo de medio 'screen' y 'all' en Media Queries?
Signup and view all the answers
¿En qué consiste la estrategia 'Desktop First' para el diseño web?
Signup and view all the answers
¿Por qué es importante considerar los 'Puntos de Control' en el diseño de una página web?
Signup and view all the answers
¿Qué efecto tiene el Media Query '@media print' en un documento web?
Signup and view all the answers
Study Notes
Diseño de Páginas Web
- Hay muchos tipos de dispositivos con diferentes tamaños de pantalla, lo que hace difícil crear un punto de control exacto para cada dispositivo.
Estrategias de Diseño
- Hay dos estrategias principales de diseño: Mobile first y Desktop first.
- Mobile first: se enfoca en dispositivos móviles y luego se adapta a otros dispositivos.
- Desktop first: se enfoca en dispositivos de escritorio y luego se adapta a otros dispositivos.
Mobile First
- Se utiliza cuando el público objetivo es en su mayoría usuario de dispositivo móvil.
- Ejemplos: sitios para comprar boletos, pedir cita en restaurantes, etc.
- Este enfoque hace que el desarrollo en escritorio sea muy sencillo, ya que se reduce a tener un diseño de móvil en escritorio y luego agregar nuevas secciones o partes para completar el diseño en resoluciones grandes.
Desktop First
- Se utiliza cuando el público objetivo es en su mayoría usuario de computadoras.
- Ejemplos: aplicación de contabilidad.
- Lo primero que se diseña es la versión de escritorio, y luego se van descargando detalles o recolocando información hasta tener la versión para dispositivos móviles.
Diseño Adaptable
- Hace que una página se vea bien en cualquier tamaño de dispositivo.
- Utiliza HTML y CSS.
- viewport es el área visible de una página web, que varía según el dispositivo.
Anchos y Altos, Mínimos y Máximos
- Podemos configurar el ancho y alto de la página por medio de porcentajes.
- Utilizamos las propiedades max-width, max-height, min-width y min-height para establecer límites para el contenido y asegurarnos que se vea bien en todos los dispositivos.
- Ejemplo: elemento { width : 50%; max-width : 700px; min-width : 350px; }
Media Query
- Regla o conjunto de reglas que se introducen en una hoja de estilo CSS para definir propiedades específicas para distintos tipos de medios.
- Podemos especificar el ancho y alto de un contenido para que se adapte a una pantalla de escritorio o de celular.
- Ejemplo: @media (max-width: 600px) { p{ display: block; background-color: black; color: red; } }
Tipos de Medios
- Existen distintos tipos de medios en los que podemos mostrar las páginas web.
- Ejemplos: Pantallas, Medios impresos, All.
- Tipo de medio: Significado
- screen: Monitores o pantallas de ordenador.
- print: Documentos de medios impresos o pantallas de previsualización de impresión.
- all: Todos los dispositivos o medios.
Puntos de Control
- Se refiere al tamaño de pantalla en el que cambiará el diseño de nuestra página.
- Ejemplo: @media screen { p{ background-color: blue; color: white; } }
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
