Eduardo Espinoza Tarea3

Imagen corporativa Eduardo Andrés Espinoza Muñoz Programación HTML II Instituto IACC 13 de Agosto del 2018

INSTRUCCIONES:  Recuerde que usted pertenece al departamento de informática de una

compañía de análisis de mercado denominada Merana, y las últimas dos semanas fue asignado a un nuevo proyecto donde requerían realizar una encuesta online para indagar respecto de la calidad del servicio recibido por los usuarios del Metro. Ya se diseñó e implementó el formulario que será utilizado, y se realizó la esquematización de la  página web mediante el uso de CSS. Esta semana le fue asignada la personalización de los detalles finos del formulario para que se adapte a la imagen corporativa, la cual es fundamentalmente azul y verde. En tal sentido, se deberá hacer la personalización de los diferentes elementos presentes en las  páginas web (la página del formulario y la respuesta de confirmación generada con PHP) para que se adapten a dichos colores, manteniendo una presentación agradable y uniforme. Se deberá considerar la utilización de los selectores y atributos que serán necesarios para alterar la  presentación, tanto del texto como de los elementos interactivos (como , , etc.). Además, se deberá hacer uso de unidades de medida relativas, tanto para el texto como para el resto de los elementos, a fin de ofrecer una presentación receptiva (es decir, q ue se altere dependiendo del tamaño de la ventana).

Desarrollo

Usando CSS Media Queries podemos definir como se vera nuestra web en los diferentes dispositivos modificando el Estilo CSS en los distintos Tamaños Media Queries. Sintácticamente, las características de los medios de comunicación se parecen a las propiedades CSS: tienen nombres y aceptan ciertos valores. Hay, sin embargo, varias diferencias importantes entre las propiedades y características de los medios de comunicación: 

Las propiedades son usadas en declaraciones para dar información sobre la forma de  presentar un documento. Para las características de los medios se utilizan expresiones  para describir los requisitos del dispositivo de salida.



La mayoría de las características de los medios aceptan el opcional ‘ min- ‘o’ max- ‘. Prefijos para expresar “mayor o igual que” y “menor o igual que” en las limitaciones.



Las propiedades requieren siempre un valor para formar una declaración. Las características de los medios, por otro lado, también se puede utilizar sin un valor. Las funciones de medios que llevan el prefijo min / max no se puede utilizar sin un valor. Sería una consulta (Media Queries) incorrecta.



Las propiedades pueden aceptar valores más complejos, por ejemplo, los cálculos que involucran a otros valores. Los medios de comunicación (Media features) solo aceptan valores individuales: una palabra clave, un número o un número con un identificador de la unidad. Las únicas excepciones de funciones de medios (Media features) son el ‘aspect-ratio’ y ‘device-aspect-ratio’

width

El valor es de longitud (length) y se aplica a tipos de medios visuales y táctiles. Acepta los  prefijos min / max. Con ‘width’ media feature (función de medios) especificamos el ancho de la zona de visualización dirigido del dispositivo de salida.

height

El valor es de longitud (length) y se aplica a tipos de medios visuales y táctiles. Acepta los  prefijos min / max. Con ‘height’ media feature (función de medios) especificamos el alto de la zona de visualización dirigido del dispositivo de salida.

Código

*{ margin: 0;  padding: 0; }  body{ font-family: 'Times New Roman', sans-serif; margin: 0;  padding: 0;  background: #3E77F5;

} #bodega{ width: 80%; margin: 0 auto;  background: #3E77F5;  padding: 20px; } #bodega #form{ margin: auto;  position: relative; width: 880px; height: 768px;  padding-left: 30px;  padding-right: 30px;  padding-top: 20px;  background-color: #269906;  border-radius: 40px; font-family: Times New Roman; }

select{  border-radius: 8px;  border-color: #9EF3F5; font-family: Times New Roman; } input[name="rut"], input[name="edad"]{  border-radius: 8px;  border-color: #9EF3F5; font-family: Times New Roman; } textarea{ width: 860px; height: 105px; font-family: Times New Roman; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal;

  border-radius: 8px; } fieldset{  border-radius: 20px;  padding-left: 10px;  padding-right: 10px;  padding-top: 0px; } @media only screen and (min-width: 701px) and (max-width: 980px){ #bodega{ width:60%; margin: 0 auto; } } @media only screen and (min-width: 400px) and (max-width: 700px){ #bodega{ width:80%; margin: 0 auto; } } @media only screen and (min-width: 701px) and (max-width: 980px){ #bodega #form{

 

width:60%; margin: 0 auto; }

} @media only screen and (min-width: 400px) and (max-width: 700px){ #bodega #form{ width:80%; margin: 0 auto; } } @media only screen and (min-width: 701px) and (max-width: 980px){ textarea{ width:60%; margin: 0 auto; } } @media only screen and (min-width: 400px) and (max-width: 700px){ textarea{ width:80%; margin: 0 auto; } } @media only screen and (min-width: 701px) and (max-width: 980px){ fieldset{

 

width:60%; margin: 0 auto; }

} @media only screen and (min-width: 400px) and (max-width: 700px){ fieldset{ width:80%; margin: 0 auto; } }

Código probado pantalla extendida en el navegador

Código probado pantalla reducida en el navegador

Código probado en navegador Safari de Iphone SE

Bibliografía

IACC (2015). Hojas de estilo CSS II. Programación HTML II. Semana 5.

×

Report "Eduardo Espinoza Tarea3"

Your name