En la Teórica vimos:
Los formularios html nos ayudan a aumentar la interactividad de nuestra web/app y nos permiten recibir información de los usuarios de nuestra web/app. Los formularios html están compuestos por campos de texto y botones.
Los formularios son un tag más de html y debe ir indicado mediante la etiqueta <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas, serán partes del formulario.
La etiqueta <form> tiene una serie de atributos básicos:
– “action” indica el tipo de acción que va a realizar el formulario. Si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la siguiente manera: <form action=»mailto:direcciondelcorreo@correo.com»></form>, o que me redireccione a otro archivo html <form action=»principal.html«><fotm>
-“method” . Mediante este atributo le indicamos al formulario la forma en la que el formulario será enviado. Existen dos valores posibles: get y post.
El valor get es el valor por defecto. Si no concretamos el method, la información se enviará a través de este medio.
“get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &.
El valor post indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición.
El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web, que reciban datos del usuario. La forma en que <input> funciona varía considerablemente dependiendo del valor de su atributo type, estos son algunos:
submit: Botón que envía el formulario.password: Control de línea simple cuyo valor permanece oculto.text: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor introducido.number: Control para introducir un número de punto flotante.date: Control para introducir una fecha (año, mes y día, sin tiempo).checkbox: Casilla de selección. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Permite seleccionar más de uno.radio: Botón radio. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.datalist: permite elegir de un listado.
Otros atributos del input:
"name":El nombre del control."placeholder": especifica una breve sugerencia que describe el valor esperado de un campo de entrada (por ejemplo, un valor de muestra o una breve descripción del formato esperado)."required":este atributo indica que el usuario debe rellenar el control con un valor antes de poder enviar el formulario. Campo obligatorio.
Otros elemtos del html para formulario:
<label></label>La etiqueta <label> define una etiqueta para un elemento <input>. Elemento del formulario que se encuentra en relación al campo a rellenar.<textarea></texarea>La etiqueta define un control de entrada de múltiples líneas de texto.
- Otro ejemplo de formulario: ejemplos_formularioszip>>
RESPONSIVE | MOBILE FIRST
- etiqueta meta viewport para controlar la composición en los navegadores móviles:
<meta name="viewport" content="width=device-width, user-scalable=no">
El viewport del navegador es el área de la ventana en donde el contenido web está visible. Generalmente no es del mismo tamaño que la página renderizada, en donde se brindan barras de desplazamiento para que el usuario pueda acceder a todo el contenido.
Dispositivos con pantallas angostas (p.e. móviles) muestran la página en una ventana virtual o viewport, que es usualmente más ancho que la pantalla y la comprimen de manera que pueda verse completa. El usuario podrá recorrerla y hacer zoom para ver diferentes áreas de la página. Por ejemplo, si una pantalla móvil tiene un ancho 640px, las páginas pueden ser procesadas con un viewport de 980px, y después comprimidas para que entren en 640px.
Esto se hace porque muchas páginas no están optimizadas para dispositivos móviles y se quiebran (o, al menos, se ven mal) cuando son procesadas a un ancho de viewport pequeño. El viewport virtual es una forma de resolver el problema de sitios no optimizados para móviles, logrando que se vean mejor.
La propiedad width controla el tamaño del viewport. Puede definirse con un número en pixeles como width=600 o con un valor especial device-width que es el equivalente al ancho de la pantalla en píxeles CSS en una escala de 100%. (Existen valores correspondientes de height y device-height, los cuales pueden ser útiles para páginas con elementos que cambian tamaño o posición basadas en la altura del viewport (height).
La propiedad initial-scale controla el nivel de zoom cuando la página se carga por primera vez. Las propiedades maximum-scale, minimum-scale, y user-scalable controlan la forma en cómo se permite a los usuarios aumentar o disminiuir el zoom en la página. Si user-scalable se establece en ‘0’ o ‘no’, esto evitará que los usuarios hagan zoom.
MOBILE FIRST
«Mobile First» es un concepto simple: diseñar pensando en los móviles primero. En el cual debemos comenzar siempre centrándonos en los dispositivos con pantallas más pequeñas y generalmente con menor ancho de banda disponible para la navegación.
En un móvil no cabe toda la información y no tiene sentido que un usuario deba hacer un scroll casi infinito hasta encontrar aquello que resulta de importancia.
En Mobile First el diseño irá de menos a más; acomodando los elementos de diseño e información de tal manera que el layout (esquema de distribución) se adapte a las necesidades de cada anchura de pantalla.
RESPONSIVE WEB – DISEÑO ADAPTABLE
El uso de dispositivos móviles para navegar en la web está creciendo constantemente, y estos deben estar optimizados para se visualizados en sus diferentes resoluciones de pantalla. A menudo, la mayoría de los dispositivos están restringidos por el tamaño de visualización y requieren de un enfoque diferente del modo en que se muestra la disposición del contenido en la pantalla.
Existe una cantidad de diferentes tamaños de pantallas en los teléfonos, tablets, escritorios, consolas de juegos, TV , etc. Estas están siempre cambiando, de modo que es importante que el sitio web se pueda adaptar a cualquiera de sus tamaños , hoy o en el futuro.
Diseño web adaptable, originalmente definido por Ethan Marcotte en A List Apart, responde a las necesidades de los usuarios y los dispositivos que estén usando. Los cambios de diseño según el tamaño y las capacidades del dispositivo. Por ejemplo, en un teléfono los usuarios deberían ver el contenido que se muestra en una única columna; una tablet puede mostrar el mismo contenido en dos columnas.
Toda web tiene que estar maquetada siguiendo los principios del responsive design.
Un diseño adaptable se basa en cambiar la apariencia de la web (tanto el contenido como su distribución) en función del dispositivo desde el cual se accede.
No se debe confundir con tener una versión de la página para cada dispositivo, sino que con la misma maquetación HTML y con el mismo código CSS asociado, el diseño varía en función del dispositivo. Y es aquí donde entran las media queries. El concepto no es 100% nuevo de CSS3, sino que tiene su punto de partida en los Media Types.
¿Qué es un media type?
Los media types permiten indicar una serie de estilos que se aplicarán según el tipo de medio.
Los media types más típicos son:
- all: para todo (valor por defecto).
- print: en la vista previa de impresión y a la hora de imprimir.
- screen: para las pantallas de ordenador.
- tv: para televisores.
¿Qué es un media Query?
Las media queries son propias de CSS3 y vienen a extender a los media, utilizando un media type con una serie de expresiones relacionadas con las características del dispositivo desde el cual se accede a la web. Las media queries dan como resultado verdadero o falso. Si el resultado es verdadero, se leen las reglas CSS de su interior, si es falso no. Las media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí.
Ejemplo :
body{ background: #fff;}
@media(min-width:60rem){
section{flex-direction: row;}
article{ width: 33%;}
body{ background: yellow;}
}
Esta media query significa:
Cuando el ancho de pantalla tenga un ancho a partir de 60rem (960px) se lee el código encerrado dentro de las llaves que abren y cierran la media query. Hará que si el fondo es blanco, a partir del tamaño de pantalla de 60rem, se modifica su fondo en amarillo, la sección hará que sus elementos flexibles se muestren uno a continuación del otro, horizontalmente, a lo largo posicionándose en fila y que los artículos tengan un ancho del 33%.
| Links útiles |