Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
Descargar como docx, pdf o txt
Está en la página 1/ 6
ENTREGABLE 1
ALUMNO: PORFIRIO LYNDON LOPEZ CALSIN
DOCENTE: ELMER ABRAHAM MONTESINOS
CARRERA: ING. SOFTWARE CON IA
2024 1. INFORMACIÓN GENERAL
Apellidos y Nombres: LOPEZ CALSIN PORFIRIO LYNDON ID: 00219972
Dirección Zonal/CFP: AREQUIPA / PUNO – JULIACA
Carrera: INGENIERÍA DEL SOFTWARE CON IA Semestre: II
Curso/ Mód. Formativo FUNDAMENTOS DE PROGRAMACION WEB.
Tema del Trabajo:
DISEÑO DEL SITIO WEB DE "ECOMARKET"
2. PLANIFICACIÓN DEL TRABAJO
N° ACTIVIDADES/ ENTREGABLES CRONOGRAMA/ FECHA DE ENTREGA
1 Investigación del tema 5/11 2 Organización 5/11 3 Definición de problema 5/11 4 Revisión de requisitos 5/11 5 Entrega final 27/10
3. PREGUNTAS
1. ¿Qué es una Media Query y cómo se estructura en CSS?
Una Media Query es una regla en CSS que aplica estilos específicos según el tamaño de la pantalla o el dispositivo. Se estructura con `@media` seguido de una condición (por ejemplo, `(max-width: 768px)`) y el bloque de estilos que debe aplicarse cuando la condición se cumple.
2. ¿Para qué sirve la propiedad `float` en CSS y en qué
situaciones puede ser útil para un diseño adaptable? La propiedad `float` permite alinear elementos a la izquierda o derecha dentro de su contenedor, haciendo que otros elementos fluyan a su alrededor. Es útil en diseños adaptables para crear estructuras de columnas, pero puede necesitar ajustes con Media Queries para reorganizar los elementos en pantallas pequeñas.
3. ¿Cuál es la función del contenedor `<aside>` en el diseño de
una página web? El contenedor `<aside>` se usa para contenido adicional o complementario, como barras laterales, que está relacionado con el contenido principal de la página pero no es esencial para el entendimiento general.
4. ¿Por qué es importante definir el ancho de los elementos en
porcentaje en lugar de píxeles en un diseño adaptable? Definir el ancho en porcentajes permite que los elementos se ajusten proporcionalmente al tamaño de la pantalla, lo cual es esencial en un diseño adaptable para que el contenido se vea correctamente en diferentes dispositivos.
5. ¿Qué beneficios ofrece el uso de `max-width` combinado con un
diseño basado en porcentaje? Usar `max-width` en un diseño basado en porcentajes permite que los elementos se expandan hasta un tamaño máximo, evitando que se estiren demasiado en pantallas grandes y manteniendo una presentación equilibrada y fácil de leer.
6. ¿Qué es el evento `click` en JavaScript y cómo se utiliza para
controlar elementos de la interfaz? El evento `click` en JavaScript detecta cuando el usuario hace clic en un elemento. Se usa para activar funciones que controlan la interfaz, como mostrar u ocultar menús, cambiar contenido o activar animaciones.
7. Explica cómo se usa `display: none` y en qué contexto es útil en
el diseño web adaptable. `display: none` oculta un elemento completamente de la página, sin ocupar espacio. Es útil en el diseño adaptable para ocultar elementos en pantallas pequeñas o reorganizar el contenido según el tamaño de la pantalla.
8. ¿Cuál es la diferencia entre `position: static` y `position:
absolute` en CSS? `position: static` es la posición predeterminada en CSS y no permite mover el elemento de su flujo normal. `position: absolute` permite posicionar el elemento en cualquier parte de la página, basándose en su contenedor más cercano con `position` distinto de `static`.
9. ¿Cómo se puede reorganizar un diseño de dos columnas en una
sola columna usando CSS? Para reorganizar dos columnas en una sola, se pueden usar Media Queries para ajustar el `width` de las columnas al 100% y eliminar cualquier `float` o ajuste de flexbox, permitiendo que las columnas se apilen una encima de la otra.
10. ¿Qué importancia tiene la propiedad `padding` en la creación
de diseños responsivos? La propiedad `padding` crea espacio dentro de un elemento, lo cual mejora la legibilidad y el aspecto visual en diferentes tamaños de pantalla. En diseños responsivos, `padding` ayuda a que los elementos mantengan un margen cómodo sin afectar el tamaño total de la página.
Nº ENTREGABLE 1 Realizar el diseño del sitio web de "EcoMarket" aplicando principios de frontend para mejorar la experiencia del usuario (UX) y la interfaz de usuario (UI). Hay que considerar que dicho sitio web debe tener una página principal dinámica, páginas de productos detalladas y un flujo de 1 usuario optimizado que guíe a los clientes desde la búsqueda inicial hasta la compra final.
Utilizar hojas de estilo en cascada (CSS) y
frameworks CSS, específicamente Bootstrap, para desarrollar un sitio web responsivo y estilísticamente coherente
Nº ENTREGABLE 2
Desarrollar funcionalidades interactivas
avanzadas mediante el uso de JavaScript para mejorar la usabilidad y la experiencia del usuario en el sitio web de "EcoMarket". 2
Crear un formulario de contacto eficiente y fácil
de usar que permita a los clientes de "EcoMarket" comunicarse de manera rápida y sencilla con el equipo de atención al cliente. Desarrollo del Entregable N°1- DIBUJO / ESQUEMA / DIAGRAMA (Adicionar páginas que sean necesarias)
