Comprender el diseño web y la experiencia del usuario

Hola. En este capítulo, buscaremos en el diseño web desde la perspectiva de experiencia de usuario y elementos de diseño. Los elementos de la interfaz de usuario se agruparán en cuatro categorías. Controles de entrada. Estos permiten a los usuarios ingresar información en el sistema. Componentes de navegación, estos permiten a los usuarios para moverse por su aplicación o sitio web. Los componentes informativos permitirán al desarrollador para compartir cualquier información que sea pertinente con los usuarios. Los contenedores le permiten mantener juntos el contenido relacionado. Comenzaremos analizando algunos de los controles de entrada más comunes que todos los diseñadores y desarrolladores deben conocer. El primero de ellos son los botones. Estas son las formas más comunes de entrada del usuario que a menudo se muestran como formas con una etiqueta en ellos. Esto permite a los usuarios realizar acciones, como guardar o enviar. Entonces tenemos casillas de verificación, que permite a los usuarios hacer selecciones basadas sobre las opciones disponibles. Los menús desplegables permiten a los usuarios hacer selecciones de una lista de artículos. Campos de entrada, un lugar donde los usuarios ingresan el texto o el contenido, como archivos adjuntos en el sistema. Y también tenemos botones de radio. Son elementos circulares que permiten a los usuarios para seleccionar entre las opciones. Y finalmente, tenemos controles deslizantes se utiliza para permitir al usuario seleccionar un valor de un rango de valores. Como podemos ver aquí, tenemos una página simple abierta en Notepad++ con algunos ejemplos de solo algunos de los controles de entrada que son posibles. Primero, tenemos la entrada de texto, y esto es solo una entrada de texto para el nombre y el apellido. Estamos usando el tipo de entrada de texto. Si tenemos el DNI primer nombre o fname. Y luego el nombre es fname. ¿Todo bien? Y luego tenemos una etiqueta para el apellido y luego tenemos una entrada para el apellido. Y luego tenemos también un tipo de entrada de envío, cual es mi boton El siguiente control que tenemos en esta página es el botón de radio. Tenemos un párrafo simple. que indica cuál es tu lenguaje de programación favorito. Tenemos un tipo de entrada de radio. Identificación, HTML. Nombre, idioma favorito y valor, HTML. Tenemos otra etiqueta para HTML. Y tenemos otro botón de opción de entrada para CSS. Y otro botón de opción de entrada para JavaScript. Entonces, cuando ejecutemos esto, veremos cómo se ve. El siguiente control que hemos llamado aquí es una casilla de verificación con una pregunta que medio de transporte tienes? Un párrafo sencillo. Pero el tipo que se usa esta vez es la casilla de verificación y tenemos tres valores para la casilla de verificación. Tenemos el vehículo uno, que es que tengo una bicicleta. Tengo vehículo dos, tengo carro. Y el vehículo tres, tengo un bote. Y puedes ver la sintaxis con él. Luego tenemos la lista desplegable, que es la etiqueta para los coches. Elegir un coche es la etiqueta y luego las opciones, usamos la etiqueta de opción. Tenemos un Volvo, Saab, Fiat y Audi. Y luego el control final que tenemos es un control deslizante. Mi tipo de entrada es un rango. Los puntos de identificación y el nombre son puntos. El valor mínimo es cero, el valor máximo es 10. Así que ahora habremos ejecutado esto y ver cómo se ve realmente. Nuevamente, esta es solo una página simple. donde tenemos el campo de entrada para el nombre, un campo de entrada para el apellido, y luego tenemos el botón Enviar. Porque no hay código detrás de ese botón de enviar, en realidad no hace nada. Y luego tenemos los botones de radio. ¿Cuál es tu lenguaje de programación favorito? Y luego podemos ver que podemos elegir cualquiera de los botones. Y luego tenemos la casilla de verificación. ¿Cuál es su modo de transporte? ¿Tengo una bicicleta, tengo un coche, tengo un barco? Y puedo elegir cualquiera de estas casillas de verificación o todos ellos. Y luego tenemos nuestro menú desplegable, elige tu coche. Volvo, Saab, Fiat. Y luego tenemos nuestro control deslizante. Valor mínimo de cero, valor máximo de 10. Gracias por unirte. En la próxima lección, veremos los componentes de navegación para el diseño.