Media Queries.

Walter Fernando Reyes Peña

PROGRAMACIÓN HTML II

Instituto IACC

06-10-2019
 INTRODUCCIÓN

OBJETIVOS DEL CONTROL:

Utilizar media queries para alterar la presentación de una página web en base a las
características del dispositivo usado (PC, móvil, celular).

INSTRUCCIONES:
Recuerde que usted pertenece al departamento de informática de una compañía
de análisis de mercado denominada Merana, y en las últimas semanas ha estado
trabajando en el desarrollo de un nuevo proyecto donde se requie rerealizar 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 la semana pasada

se realizó la esquematización la página web mediante el uso de CSS. Esta
semana le fue asignada una nueva tarea, que consiste en la optimización del
diseño de la presentación de la página web mediante el uso atributos de CSS y
consultas de medio (media queries) para alterar la presentación de la página web de
manera que esta se adapte a varios tipos de dispositivos.

En tal sentido, se requiere que haga el diseño y la implementación delos media

queries que sean necesarios de tal forma que se garantice que la presentación
delas páginas web (la página del formulario y la respuesta de confirmación
generada con PHP)sea agradable a la vista y se haga un óptimo uso del espacio
disponible, lo cual puede implicar utilizar esquemas con múltiples columnas cuando
exista bastante espacio disponible (como en el caso delos PC) y esquemas de
columna sencillos cuando el espacio disponible sea limitado (como en el caso de
los celulares).
Es posible que exista la necesidad de realizar adaptaciones al código CSS ya creado,
de manera que este se adapte por defecto a algunas de las situaciones antes
descritas (se recomienda utilizar un diseño simplificado para celulares) y luego
agregar los media queries que sean necesarios para que la presentación se adapte a
otras situaciones. El documento resultante que tendrá que generar como entrega de la
actividad de la semana 5,deberá ser primeramente un documento en el que se
detallen las consideraciones de diseño utilizadas para la definición del
esquematizado básico y de qué manera los distintos media queries deben afectar
la presentación de la página web. Además,se deberá incluir el código CSS con las
modificaciones que sean necesarias sobre el resultado del control de la semana
4(considerando las anotaciones y revisiones realizadas por el docente), junto con
los media queries requeridos.
 DESARROLLO

Códigos se adjuntan:

Se adjunta conforme a lo requerido

Archivo “misestilos.css”.
@charset "utf-8";
/* CSS Document */

/* Si el tamaño de la pantalla es igual a 640px o mayor, setea el tamaño de la

fuente en 80px */
@media only screen and (min-width: 640px) {
body {
font-size: 15px;
}
}

/* Si el tamaño de la pantalla es igual a 540px o menor, setea el tamaño de la

fuente 30px */
@media only screen and (max-width: 540px) {
body {
font-size: 10px;
}
}

/* Se define color de la sección(HEAD), color de la fuente y estilo de fuente */

#cabecera {
background-color:#000;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}

.logo {
text-align: center;
font-size: 3em;
}

.logo span {
color: #B70E21;
}

body {
background: #000;
color: #fff;
line-height: 1.6;
font-family: 'Quicksand', sans-serif;
 padding: 0 1.5em;
}

/* Se define color de la sección(FORM), color de la fuente y estilo de fuente */

#encuesta {
font-family:Verdana, Geneva, sans-serif;
background-color: #161616;}

#texto_encuesta {
color:#B70E21;}

input[type='radio']:checked + label {
color: #B70E21; }

input[type='checkbox']:checked + label {
color: #B70E21; }

input:focus {
border: 2px solid #B70E21;
background:#D8DD7B;}

textarea:focus {
border: 2px solid #B70E21;
background:#D8DD7B;}

input {
color:#B70E21;}

textarea {
color:#B70E21;}

/* Se define color de la sección(FOOTER), color de la fuente y estilo de fuente */

#pie{background-color:#666}

#texto_pie {
font-size: 11px;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;}

/*
Se define color de la sección(Informe), color de la fuente y estilo de fuente.
Informe en PHP que muestra el resultado de los ingresos.
*/
#cab_tabla {
background-color:#09F;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#FFF;
font-weight:bold;}

#dat_tabla {
background:#CFF;
 font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#00F;}
Figura 0, código CSS de la aplicación desarrollada.

Se adjunta código de formulario con las modificaciones para usarlo con inclusión de
código CSS.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<link rel="stylesheet" href="_css/misestilos.css"/>
<style type="text/css">
body,td,th {
font-family: Quicksand, sans-serif;
}
</style>
<title>ENCUESTA MERANA SPA.</title>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<header id="cabecera">
<h1 class="logo">Merana <span>Corp</span></h1>
</header>
<section id="encuesta">
<meta name='viewport' content='width=device-width'>
<form action="formulario.php" method="post" lang="es" enctype="multipart/form-data"
>
<fieldset>
<legend>E N C U E S T A</legend>
<table align="center" width="70%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="29%" id="texto_encuesta">R.U.T.(R)</td>
<td width="1%">:</td>
<td width="70%">
<input name="RUT" type="text" title="Ingrese RUT según formato."
placeholder="12.345.678-K" size="25" id="_rut" maxlength="12" pattern="[0-9]{2}.[0-
9]{3}.[0-9]{3}-[0-9kK]" accesskey="R"/>
</td>
</tr>
<tr>
<td id="texto_encuesta">Edad</td>
<td>:</td>
<td>
<input name="EDAD" title="Ingrese edad según rango." placeholder="10-120"
type="number" size="5"/>
 </td>
</tr>
<tr>
<td id="texto_encuesta">Género</td>
<td>:</td>
<td>
<input name="GENERO" type="radio" value="Hombre" id="g_h"/>
<label>Hombre.</label>
<input name="GENERO" type="radio" value="Mujer" id="g_m"/>
<label>Mujer.</label>
</td>
</tr>
<tr>
<td id="texto_encuesta">Frecuencia con la que usa el servicio</td>
<td>:</td>
<td>
<input name="Frecuencia_Uso" type="radio" value="Nunca" id="FUS_n" title="Lo usa
Nunca."/>
<label>Nunca.</label>
<input name="Frecuencia_Uso" type="radio" value="poca frecuencia" id="FUS_p"
title="Lo usa co Poca Frecuencia."/>
<label>Con poca frecuencia.</label>
<input name="Frecuencia_Uso" type="radio" value="Regularmente" id="FUS_r"
title="Lo usa Regularmente."/>
<label>Regularmente.</label>
<input name="Frecuencia_Uso" type="radio" value="Todo el tiempo" id="FUS_t"
title="Lo usa Todo el Tiempo."/>
<label>Todo el tiempo.</label>
</td>
</tr>
<tr>
<td id="texto_encuesta">Horario en el que usa el servicio regularmente</td>
<td>:</td>
<td>
<input name="Horario_Uso" type="radio" value="Horario punta" id="FUS_n"
title="Lo usa en Horario Punta."/>
<label>Horario punta.</label>
<input name="Horario_Uso" type="radio" value="Horario Medio" id="FUS_p" title="Lo
usa en Horario Medio."/>
<label>Horario medio.</label>
<input name="Horario_Uso" type="radio" value="Horario Valle" id="FUS_r" title="Lo
usa en Horario Valle."/>
<label>Horario valle.</label>
</td>
</tr>
<tr>
<td id="texto_encuesta">Lineas de Metro que normalmente utiliza</td>
 <td>:</td>
<td>
<input type="checkbox" name="LINEA_1" value="1" id="LINEAS_1"title="Usa
Línea 1">
<label>Línea 1.</label>
<input type="checkbox" name="LINEA_2" value="1" id="LINEAS_2" title="Usa Línea 2">
<label>Línea 2.</label>
<input type="checkbox" name="LINEA_4" value="1" id="LINEAS_4" title="Usa Línea 4">
<label>Línea 4.</label>
<input type="checkbox" name="LINEA_4A" value="1" id="LINEAS_4a" title="Usa Línea
4a">
<label>Línea 4A.</label>
<input type="checkbox" name="LINEA_5" value="1" id="LINEAS_5" title="Usa Línea 5">
<label>Línea 5.</label>
</td>
</tr>
<tr>
<td id="texto_encuesta">Calidad general del servicio</td>
<td>:</td>
<td>
<input name="Calidad_Servicio" type="radio" value="Malo" id="CGS_m"
title="El servicio es Malo."/>
<label>Malo.</label>
<input name="Calidad_Servicio" type="radio" value="Deficiente" id="CGS_d"
title="El servicio es Deficiente."/>
<label>Deficiente.</label>
<input name="Calidad_Servicio" type="radio" value="Regular" id="CGS_r"title="El
servicio es Regular."/>
<label>Regular.</label>
<input name="Calidad_Servicio" type="radio" value="Bueno" id="CGS_b" title="El
servicio es Bueno."/>
<label>Bueno.</label>
<input name="Calidad_Servicio" type="radio" value="Excelente" id="CGS_e" title="El
servicio es Excelente."/>
<label>Excelente.</label>
</td>
</tr>
<tr>
<td id="texto_encuesta">Observaciones Personales</td>
<td>:</td>
<td>
<textarea name="OBSERVACIONES" title="Acá puede ingresar otras
Observaciones." placeholder="Igrese aquí si tiene alguna observación que
comentarnos."cols="50" rows="3"></textarea>
</td>
</tr>
<tr>
 <td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="hidden" name="fecha_hora" id="_fecha_hora" value="">
<script type="text/javascript">
var hoy = new Date();
var fecha= hoy.getFullYear() + '-' + (hoy.getMonth()+1) + '-' +
hoy.getDate();
var hora = hoy.getHours() + ':' + hoy.getMinutes() + ':' +
hoy.getSeconds();
var fecha_y_hora = fecha + ' ' + hora;
document.getElementById('_fecha_hora').value =fecha_y_hora;
</script>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="_enviar" id="_enviar" value="ENVIAR" /></td>
</tr>
</table>
</fieldset>
</form>
</section>
<footer id="pie">
<p align="center" id="texto_pie">Tarea Semana 5 CSS</p>
</footer>
</body>
</html>
Imagen 1, Código de formulario con inclusión de CSS.
Resultado.

Figura 2, Resultado de formulario HTML + CSS pantalla laptop.

Figura 2, Resultado de formulario HTML + CSS resolución celular.

 REFERENCIAS BIBLIOGRÁFICAS

 MANUAL DE CONTENIDO_HTML_II IACC SEMANA 1, 2, 3 y 4.-

 El gran libro de HTML5, CSS3 y JavaScript Libro de Juan Diego Gauchat.