Share
Este tutorial le enseñará cómo crear una página web receptiva con botones que toman diferentes estados dependiendo de la interacción del usuario. Este tipo de interacción es especialmente útil en enlaces como "comprar" o "eliminar" en los que es aconsejable confirmar que el usuario realmente desea realizar una acción específica.
Esta interacción es una con la que muchos están familiarizados; Puedes ver un efecto similar en la tienda de aplicaciones de Apple al comprar aplicaciones.
La página que creamos en este tutorial también funcionará en dispositivos móviles, ya que es un diseño sensible.
Crearemos una página de muestra basada en la red Tuts +, esta página contendrá botones de confirmación de comentarios. Aunque el ejemplo utiliza los botones de confirmación "unirse ahora", posiblemente podría utilizar este estilo de interacción en cualquier lugar donde necesite que un usuario confirme la acción que está a punto de realizar..
El buen diseño de la interfaz de usuario brinda a los usuarios una sensación de poder comprensible que les ayuda a sentirse constantemente en control.
Un aspecto importante de la interacción de la computadora humana es transmitir al usuario un sentido de control. Cuando los usuarios tienen el control se sienten cómodos. Cuando no están en control se sienten frustrados. Pero cuando lo piensas, los humanos son siempre en control. Las computadoras nunca hacen nada sin que usted las instruya primero.
Aquí es donde la importancia de un buen software y el diseño de la interfaz de usuario entra en escena. El buen diseño de la interfaz de usuario brinda a los usuarios una sensación de poder comprensible que les ayuda a sentirse constantemente en control. Nunca preguntarán "espera, ¿por qué sucedió eso?" o "espera, ¿cómo llegué aquí?"
Puede transmitir una sensación de control al usuario comunicándoles información con cada interacción. Ayúdalos a entender la causa y el efecto en el sistema. Para usar un ejemplo básico, si guarda algo, el sistema le dará un mensaje positivo que dice "sus configuraciones se han guardado". Por lo tanto, los usuarios nunca cuestionarán "Me pregunto si eso fue guardado?"
La interacción que crearemos en este tutorial ayuda a darle al usuario una sensación de control. Al cambiar el estado del botón y hacer que el usuario confirme su decisión de compra, nos aseguramos de que el usuario nunca haga nada involuntariamente. Esto es especialmente útil cuando le pide a los usuarios que se separen de su dinero ganado con esfuerzo; Lo último que alguien quiere es pagar accidentalmente algo.!
La belleza de esta interacción es que, en lugar de recibir un mensaje emergente que dice "¿estás seguro de que quieres comprar?", Se notifica a los usuarios a través del cambio de estado del botón que están a punto de hacer algo importante. Si no quieren hacerlo, simplemente pueden continuar navegando por el sitio; mientras que un aviso de alerta requeriría explícitamente que el usuario tome una decisión de sí / no.
Asegúrate de tomar las dependencias del archivo de imagen para este tutorial. Póngalos en una carpeta llamada "imágenes". Todos sus otros archivos (HTML, CSS, JavaScript) irán al directorio principal. Al final del tutorial, su estructura de archivos se verá así:
Comencemos creando un HTML básico que definirá nuestra estructura de página..
Confirmación de estilos de botones de retroalimentación
Así que aquí tenemos nuestra estructura básica de páginas HTML5. Incluimos nuestro DOCTYPE, el título de nuestra página y una elemento con un ID de #envase
Ahora, vamos a agregar los enlaces a las dependencias del marcado..
Primero agregaremos un enlace a nuestra hoja de estilos CSS (que pronto crearemos). Esto va en el elemento.
A continuación, incluiremos un enlace a la versión alojada de Google de jQuery, así como un enlace a "script.js" que contendrá el código javascript que crearemos más adelante. Vamos a poner esto justo antes del cierre etiqueta.
Porque vamos a utilizar elementos HTML5 como y tendremos que agregar el shiv HTML5 para que nuestro marcado funcione en IE8. Incluya esto en su encabezado:
Diseñaremos esta página para que sea receptiva y flexible hasta el móvil. Para garantizar que los navegadores móviles representen nuestra página correctamente, tendremos que configurar la propiedad de la vista meta. Para obtener más información sobre esto, consulte el artículo de Ian Yates en la etiqueta meta de la ventana gráfica. De lo contrario, simplemente agregue este fragmento de código en su elemento.
Empecemos agregando un encabezado de página a nuestro documento..
La mejor manera de aprender habilidades creativas y técnicas como diseño, desarrollo y más!
Nuestro encabezado (en diferentes tamaños) es bastante básico y se ve así:
Ahora vamos a crear una lista desordenada bajo nuestro elemento. Usaremos esto para envolver nuestros artículos listados en.
Como puede ver, le dimos a nuestra lista no ordenada una clase de 'lista' que usaremos para identificar sus estilos con CSS.
Como puedes ver, dentro de cada Dentro de Dentro de Vamos a dar nuestro botón (el Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua. Esto es lo que tenemos hasta ahora: Ahora que tenemos la estructura básica para cada Puede continuar y copiar / pegar el código del elemento de la lista para cada sitio de Tuts +. Esto es lo que tenemos ahora: Ahora que hemos completado todo nuestro marcado, comencemos a diseñar la página. Comenzaremos estableciendo algunos reinicios básicos: Ahora vamos a diseñar el principal Aquí establecemos el color de fondo y algunos valores predeterminados para nuestra tipografía, como el tamaño de letra, el color y la altura de la línea.. Queremos que nuestra página sea flexible hasta el móvil. Por lo tanto, los dos componentes clave que usaremos para lograr esto son los porcentajes y los Al mirar nuestro HTML, verás Aquí configuramos el ancho de nuestro contenedor para que sea el 100% de la ventana gráfica del navegador. Nuestros márgenes centran el contenido en la página. Tambien agregamos Como puede ver, en tamaños más grandes, nuestro contenedor tiene un espacio adicional en los lados con un fondo claro. Pero en tamaños más pequeños, ese espacio adicional desaparece y solo tenemos un fondo blanco para nuestro contenido. No olvidemos que nuestras imágenes sean receptivas: Ahora vamos a diseñar nuestro principal Nuestro elemento de encabezado y su contenido ahora están bien centrados y dimensionados. Ahora vamos a comenzar a diseñar nuestros artículos de la lista y sus hermanos. Primero, vamos a crear algunos estilos estructurales básicos: Si recuerdas correctamente, dentro de cada elemento de la lista tenemos dos elementos principales: 'icono' e 'información'. El ícono de la figura será flotado a la izquierda y se le dará un pequeño ancho. El div 'info' se hará flotar a la derecha y se le dará la mayor parte del ancho principal. Como puedes ver, utilizamos el Después de nuestras adiciones estructurales de CSS, ahora tenemos algo que se parece a esto: Como puede ver, esto necesita ser limpiado un poco. Primero, porque estamos flotando nuestros elementos 'información' e 'ícono', debemos agregar un claro a cada uno de los elementos de la lista. También añadiremos un poco de estilo a cada elemento de la lista.. Por último, vamos a diseñar la información dentro de cada elemento de la lista: Ahora tenemos algo que está empezando a parecer bastante sólido.. Ahora vamos a aplicar un poco de estilo a nuestros botones. Los haremos visualmente prominentes: Que hicimos aqui? Todo se ve bastante bien. Lo que queremos hacer ahora es agregar estilos para una clase que se aplicará a los botones cuando se haga clic en ellos. Para este tutorial, agregaremos el texto "unirse ahora" al texto del botón existente cuando se haga clic en el botón. Esencialmente, el usuario tiene que tomar la decisión de "unirse" dos veces. Para lograr esto, vamos a utilizar algunos estilos CSS, incluida la pseudo clase CSS3 Vamos a crear una clase llamada 'clic' a la que podemos agregar nuestros estilos de botón 'clic' (para fines de desarrollo, puede agregar manualmente una clase de "clic" a cualquier Como puede ver, adjuntamos la clase 'clic' a la clase 'button'. De esa manera, los estilos que declaramos para 'hacer clic' solo aparecerán en los elementos que también tienen una clase de botón. En cuanto al estilo, simplemente cambiamos su color y bordes. También te habrás dado cuenta de que agregamos una sombra de cuadro al botón cuando se hace clic. Esto agregará un estilo de botón con sangría que ayuda a reforzar al usuario que se hizo clic en el botón. Cuando el usuario hace clic en el botón de precio, lo que queremos hacer es que el botón se expanda y anteponga el texto "unirse ahora". Para ello, utilizaremos la pseudo clase CSS3. Ahora tenemos algo como esto: Como puede ver, en el tamaño del móvil nuestro botón "unirse ahora" está empezando a estar un poco apretado. Si nuestro texto de encabezado es realmente largo, nuestro botón se ejecutará en nuestro encabezado. Por lo tanto, aprovecharemos el poder de las consultas de medios para llevar nuestro botón de acción al siguiente nivel cuando estamos en tamaños de pantalla más pequeños.. Vamos a crear una consulta de medios para mover nuestro botón: Ahora nuestro botón bajará debajo del encabezado en tamaños de pantalla más pequeños! Vayamos a nuestro archivo "script.js" y escribamos algunos javascript que cambiarán nuestros estilos de botón cuando se haga clic en ellos.. Primero, configuremos nuestro script para jQuery Nuestro guión es en realidad bastante simple. Todo lo que tenemos que hacer es cambiar la clase de "clic" cada vez que se hace clic en un botón. Así que vamos a configurar una función: Ahora, lo que queremos hacer es verificar y ver si el botón en el que se hizo clic ya tiene una clase de "clic" (tal vez se hizo clic anteriormente). Si no tiene la clase 'clic', la agregaremos y evitaremos Si el botón en el que se hizo clic ya tiene una clase de "clic", el Si un usuario hace clic en el botón de precio, obtendrá un estado de botón modificado. ¿Qué pasa si quieren cerrar el botón y hacer clic fuera del botón? Vamos a registrar ese clic y eliminar la clase de "clic". Esta es una línea simple de jQuery: Queremos agregar un poco más de interactividad haciendo que la transición entre los estados de los botones 'clic' y normales sea más suave. Solo usaremos una transición CSS3 y la aplicaremos a la clase de botón 'unirse': Ahora tienes un botón de confirmación de confirmación agradable. Ayudará a los usuarios a confirmar su elección para tomar una decisión importante con su página web / aplicación. Siéntase libre de jugar con este concepto, hacerlo mejor y aprender más!, Tenemos dos elementos principales; una elemento. El icono
La informacion
elemento) elemento) elemento) elemento) una clase de "join" para el estilo CSS más adelante.
Activetuts+
$ 15.99 Código final para cada
elemento
Activetuts+
$ 15.99 
Paso 6: Duplicar y modificar cada uno
Elemento Elemento, todo lo que tenemos que hacer es duplicarlo para cada entrada Tuts +. Tenemos que cambiar lo siguiente para cada elemento de la lista:
texto enlazar
Paso 7: CSS básico
/ * restablecimiento rápido * / cuerpo, h1, h2, p, ul, li margen: 0; relleno: 0; ul list-style-type: none;
cuerpo elemento. cuerpo fondo: #eee; fuente: 16px / 1.4em Helvetica, Arial, sans-serif; color: # 333;
Paso 7: Volverse receptivo (líquido)
anchura máxima regla. Es el contenedor principal para el contenido de nuestra página. Usaremos los valores porcentuales para el ancho y agregaremos algunos estilos básicos para separarlos visualmente del fondo de la página.. #contenedor ancho: 100%; margen: 0 auto 40px; ancho máximo: 600px; fondo: #fff; radio del borde: 0 0 3px 3px; borde: 1px sólido # d0d0d0; borde superior: 0; cuadro de sombra: 0 1px 0px #fff;
ancho máximo: 600px porque no queremos que nuestros elementos de la lista sean más grandes que eso.
img ancho máximo: 100%;
Paso 8: Estilos de encabezado
El elemento y el contenido en su interior.. encabezado text-align: center; relleno: 30px 20px; cabecera h1 margen inferior: 20px; header p color: # 413c38; tamaño de letra: 1.2em; altura de la línea: 1.4em;
Paso 9: Estilos de elementos de la lista estructural
.icono, .info box-sizing: border-box; .icon float: left; ancho: 15%; text-align: right; relleno-izquierda: 3%; .info ancho: 85%; flotador izquierdo; relleno: 0 5%;
tamaño de caja: caja de borde; gobernar en estos dos divs. Esto nos permite tener un ancho total agregado de hasta el 100% y aún así poder agregar relleno sin sobrepasar el ancho total del 100% (para obtener más información acerca de esta propiedad, lea Fomentar los elementos de formularios sensibles para jugar a Niza).
Paso 10: Lista de estilos de elementos
.list li padding: 20px 0; borde superior: 1px sólido #eee; desbordamiento: auto; Limpia los dos; .list li: hover background: # f7f7f7;
.info h2 margen inferior: 10px; tamaño de letra: 1.75em; línea-altura: 1em; pantalla: bloque en línea; .info p font-size: 14px; color: # 777;
Paso 11: Estilos de botones
a texto-decoración: ninguno; color: #fff; .join background: # 57a9eb; / * Navegadores antiguos * / fondo: -moz-lineal-gradiente (arriba, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * FF3.6 + * / background: -webkit-gradient (linear, left top, left inferior, color-stop (0%, rgba (87,169,235,1)), color-stop (100%, rgba (53,156,234,1) ))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Chrome10 +, Safari5.1 + * / background: -o-gradiente lineal (arriba, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (top, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * IE10 + * / background: gradiente lineal (arriba, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 57a9eb", endColorstr = "# 359cea", GradientType = 0); / * IE6-9 * / border: 1px solid # 326fa9; color de borde superior: # 3e80b1; color de borde inferior: # 1e549d; color: #fff; font-weight: negrita; transformación de texto: mayúsculas; text-shadow: 0 -1px 0 # 1e3c5e; tamaño de fuente: 11px; radio del borde: 5px; box-shadow: 0 1px 0 #bbb, 0 1px 0 # 9cccf3 inset; espacio en blanco: nowrap; -webkit-transición: toda la facilidad de .25s; -moz-transición: toda la facilidad de .25s; transición: toda la facilidad de .25s; flotar derecho; pantalla: bloque en línea; relleno: 1px 1em 0; / * hacer que el centro aparezca desde el punto culminante de 1px * / line-height: 2.25em;
Paso 11: Estilos de botones alternativos
::despuésEstilos de clase pulsada
$ 15.99). .join.clicked background: # 24a501; / * Navegadores antiguos * / fondo: -moz-lineal-gradiente (arriba, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * FF3.6 + * / background: -webkit-gradient (linear, left top, left inferior, color-stop (0%, rgba (30,183,0,1)), color-stop (100%, rgba (36,165 , 1,1))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * Chrome10 +, Safari5.1 + * / background: -o-gradiente lineal (arriba, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (top, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * IE10 + * / background: gradiente lineal (arriba, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 1eb700", endColorstr = "# 24a501", GradientType = 0); / * IE6-9 * / border: 1px sólido # 1e8701; color de borde inferior: # 176701; borde superior de color: # 24a501; box-shadow: 0 1px 0 #bbb, 0 1px 0 # acc63d inset; relleno: 1px 2em 0; cursor: puntero; .join.clicked: active box-shadow: 0 0 8px # 777 inset;
::después estilos de clase::después para insertar el texto que queramos. .join.clicked :: before content: 'Join Now';
Paso 12: Consultas de medios
Pantalla @media y (ancho máximo: 450 px) .info h2 pantalla: bloque; .join float: none; margen inferior: 20px;
Paso 13: Interacción de botones con jQuery
$ (document) .ready (function () // code here);
Paso 14: Alternar Clases
$ ('. join'). on ('click', function () // code here); href atributo del enlace de ser seguido. // si no tiene una clase de clic, // agregue uno e impida que se siga el enlace si (! ($ (this) .hasClass ('clicked'))) // Elimine cualquier clase 'clicked' si hay algún $ ('. clicado'). removeClass ('clic'); // Agregue la clase 'clicked' al botón que hizo clic en $ (this) .addClass ('clicked'); // evita que se siga el enlace return false; href El valor será seguido por el navegador. Esto funciona bien porque si un usuario encuentra esta página y tiene javascript deshabilitado, simplemente no podrá confirmar su decisión de "unirse ahora". Más bien, el enlace simplemente se seguirá sin ningún comentario de confirmación.
Paso 15: Eliminando la Clase Clicked
// si el clic se produce fuera del botón .buy, elimine su clase $ ('body'). on ('click', function () $ ('. clicked'). removeClass ('clicked'););
Paso 16: Añadiendo una transición
-webkit-transición: toda la facilidad de .25s; -moz-transición: toda la facilidad de .25s; -ms-transición: toda la facilidad de .25s; -o-transición: toda la facilidad de .25s; transición: toda la facilidad de .25s;
Eso es!
Accentsconagua
