Está en la página 1de 11

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 <input>, <select>, 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, que 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

<!—se crea archivo css en el cual se realizarán los cambios solicitados, se resetean los estilos por

defectos de los navegadores, dándole valor 0 a margin y padding -->

*{

margin: 0;

padding: 0;

<!—se indica que el tipo de fuente sea Times New Roman y de color #3E77F5, color

corporativo-->

body{

font-family: 'Times New Roman', sans-serif;

margin: 0;

padding: 0;

background: #3E77F5;
}

<!—se llama el contenedor bodega que contiene un witdth de 80% y un margin de 0, de color

#3E77F5, color corporativo y un padding de 20px->

#bodega{

width: 80%;

margin: 0 auto;

background: #3E77F5;

padding: 20px;

<!—se llama el contenedor bodega y se le indica todas las características que sean necesarias->

#bodega

<!—se llama el contenedor anidado form con las características que sean necesarias->

#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;

<!—el imput se le indica el tipo de botón, fuente color y pixeles->

input[name="rut"], input[name="edad"]{

border-radius: 8px;

border-color: #9EF3F5;

font-family: Times New Roman;

<!—textarea se le indica el tipo de botón, fuente y pixeles->

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;

<!—comenzamos a usar media queries, indicando los estilos css que debe cargar al contenedor

dependiendo del ancho mínimo y máximos de los pixeles ->

@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.