Accentsconagua
Este es el contenido principal también.
Este es un párrafo corto para resaltar dónde irá el contenido general.
Share
El diseño web es una profesión en evolución. Si bien siempre será importante tener buen ojo para el color, la tipografía y el diseño, estas habilidades están siendo superadas por la necesidad de comprender las motivaciones del usuario. No es suficiente construir un sitio y esperar a que el tráfico se enrolle. Los sitios deben ayudar a los usuarios a lograr sus objetivos, con un mínimo de fricción cognitiva. Bootstrap puede ayudar a los profesionales de la web a definir estos objetivos y también a crear una experiencia increíble..
No estamos haciendo páginas, estamos haciendo películas.
Me gusta decir que no estamos haciendo páginas, estamos haciendo películas. Los usuarios esperan que los sitios se carguen rápidamente, proporcionen contenido atractivo e interactividad inteligente. Al igual que las películas dependen de los cortes rápidos, la iluminación y el estado de ánimo para atraer a los usuarios, los sitios web dependen de las transiciones, la interactividad y el tiempo. Estos detalles a menudo se pierden durante la fase de diseño o, lo que es peor, nunca se tienen en cuenta. Si bien una transición que toma 0.5 segundos cuando debería durar 0.25 segundos generalmente no hundirá una aplicación, es este nivel de detalle lo que separa de bueno a excelente.
Le mostraré cómo Bootstrap puede reemplazar los wireframes estáticos y llevar estos detalles a la vanguardia antes y con menos esfuerzo..
El primer paso es descargar las últimas versiones estables de Bootstrap y jQuery..
Aunque jQuery está alojado en varios CDN, prefiero incluir todos los archivos localmente para que pueda trabajar con o sin acceso a la web. Continúe y configure una estructura de directorios como la que se muestra a continuación, y copie los archivos Bootstrap CSS, Bootstrap Responsive CSS y Javascript no minificados. Modifique los nombres y las ubicaciones según sea necesario, pero usar esta estructura significa que también puede aprovechar mi plantilla HTML en el siguiente paso.
Ahora sería un buen momento para crear una tercera hoja de estilo, a la que llamaré usuario.css. Este archivo se utilizará para anular los estilos de Bootstrap según sea necesario.
Esta es la única otra configuración necesaria para comenzar a construir un alámbrico interactivo. Cree un archivo en la raíz del directorio de su proyecto y asígnele un nombre index.html. Después de haber creado el archivo, copie este código y guarde.
Marcos de malla interactivos Tu diseño irá aquí.
Abra un navegador web y arrastre el archivo index.html guardado en él. Si todos los incluidos están correctamente cargados, deberías ver algo similar a la captura de pantalla a continuación. Si no ve el cuadro de alerta, abra la Consola o el Inspector web y vea si no se ha podido cargar un archivo. Después de solucionar problemas, elimine o comente la línea de alerta en el $ (documento) .ready Funciona en la parte inferior de la página y prepárate para construir wireframes Bootstrap.
Con todos los archivos necesarios en su lugar, podemos comenzar el desbaste en los principales bloques de contenido. La mayoría de los sitios (aplicaciones) contendrán un encabezado, navegación principal, pozo de contenido principal, barra lateral y pie de página. Mantengo deliberadamente el diseño simple, para ilustrar rápidamente el poder del sistema de rejilla de Bootstrap.
El único marcado estructural en la página hasta ahora es nuestro div con clase "contenedor".
Nota: Este div es un bloque de contención requerido para Bootstrap; Construiremos toda nuestra aplicación de alambre dentro de ella..
Bootstrap también requiere el nuevo tipo de documento HTML y genera sus reglas de estilo con clases, en lugar de nombres de etiquetas. Estas decisiones significan que podemos usar algunos nuevos elementos HTML5: encabezado, navegación, sección, artículo, aparte y pie de página. Vale la pena mencionar si planea probar su diseño en Internet Explorer, deberá descargar e incluir Modernizr o HTML5 Shim. Las versiones modernas de Firefox, Chrome y Safari admiten de forma nativa el estándar HTML5.
Bootstrap está construido sobre una cuadrícula de 12 columnas. Utiliza dos clases, fila y lapso para crear contenedores a nivel de bloque. Al aplicar la clase de fila a un contenedor como un div o encabezado, se extiende automáticamente a través de todo el ancho de 940px. Mediante la adición de contenedores con clase abarcannorte (norte siendo un marcador de posición para la cantidad de columnas), puede crear fácilmente pozos de contenido, barras laterales y otros bloques de diseño sin tener que administrar flotantes u otras peculiaridades.
Para comenzar a trabajar rápidamente, construiré un encabezado básico, una barra de navegación, un pozo principal, un lado y un pie de página. Reemplace "Su diseño irá aquí" con el siguiente código.
Mi aplicación impresionante
Este es el contenido principal también.
Este es un párrafo corto para resaltar dónde irá el contenido general.
También agregué algunas reglas básicas a usuario.css, Para que los bloques de contenido sean más fáciles de identificar. Si todo ha ido bien, debería ver una serie de bloques grises con texto negro descriptivo dentro.
/ * Regla de estilo básica para delinear y espaciar elementos a nivel de bloque * / [class * = "span"] background: #eee; margen inferior: 10px;
Diseños fijos y fluidos han existido durante mucho tiempo. Los diseños receptivos son relativamente nuevos y combinan las mejores partes de ambos. Brinda a los diseñadores herramientas para optimizar sus diseños para múltiples tamaños de dispositivos (teléfonos inteligentes, tabletas, pantallas estrechas y de pantalla ancha) sin tener que mantener una base de código separada para cada uno. Cambie el tamaño de la ventana del navegador para ver la hoja de estilos receptiva de Bootstrap en acción, y sienta la asombrosa capacidad de escribir una vez y probar los esquemas de conexión en varios entornos..
Los navegadores utilizan los puntos de interrupción de CSS para decidir cómo representar una página, en función de las medidas de ancho mínimo y máximo. Los puntos de quiebre en relación con el ancho del navegador siempre comienzan con @media (argumento ancho) y son muy fáciles de leer. También pueden contener un segundo argumento en otro conjunto de paréntesis, lo que permite una gran flexibilidad para múltiples dispositivos.
En el ejemplo de código que aparece a continuación, he creado varias reglas que definen los colores de fondo para cuatro puntos de ruptura receptivos comunes de Bootstrap, modificados ligeramente para mostrar una transición suave de un color a otro.
/ * Colores de fondo básicos para puntos de ruptura receptivos * / / * Teléfono horizontal de ancho máximo de 480 px y vertical * / @media (ancho máximo: 480 px) .container background: # f1ea81; .container: after content: "Teléfono horizontal de ancho máximo de 480px y hacia abajo"; / * Mínimo ancho 481px y máximo ancho 767px horizontal para tableta vertical * / @media (mínimo ancho: 481 px) y (ancho máximo: 767 píxeles) .container background: # a7f7e5; .contenedor: después de contenido: "481px de ancho mínimo y 767px de paisaje horizontal de ancho máximo y tableta vertical"; / * Tableta vertical de ancho mínimo de 768 píxeles y 979 píxeles de ancho a horizontal * / @media (ancho mínimo: 768 píxeles) y (ancho máximo: 979 píxeles) .container background: # c4deff; .container: after content: "Min-width 768px y max-width 979px, vertical tablet a horizontal"; / * Pantalla panorámica de ancho mínimo de 980 píxeles * / @media (ancho mínimo: 980 píxeles) y (ancho máximo: 1199 píxeles) .container background: # fde3ff; .container: after content: "Min-width 980px, max-width 1199px, desktop format"; / * Pantalla ancha de ancho de pantalla de 1200px * / @media (min-width: 1200px) .container background: # ffc4c4; .container: after content: "Anchura mínima 1200px, formato de pantalla ancha";
Hemos creado un diseño totalmente sensible, pero aún nos faltan las cosas buenas. El resto de este tutorial le mostrará cómo agregar interés visual a través del contenido y la interactividad..
Ahora que el andamiaje está en su lugar, podemos comenzar a agregar contenido. Estoy manteniendo deliberadamente estas vistas. Las cajas grises genéricas con estilos mínimos alientan a los usuarios beta a enfocarse de lleno en la interacción y no quedar demasiado obsesionados con el estilo visual..
La Unidad del Héroe está diseñada para crear una llamada a la acción frontal y central. Las descargas de códigos, las nuevas aplicaciones o las noticias de última hora son buenos candidatos. Para nuestros propósitos, lo usaré para anunciar una importante actualización de software. Reemplace el existente h2 y pag Etiquetas en el contenido principal, así como el código de abajo y actualiza tu navegador para ver al héroe en acción.
La versión 2.0 está aquí!
Todas las nuevas características, muchas mejoras.
Un paquete más perfecto para ti.’no es probable que encuentre
Nuestro equipo ha estado ocupado el año pasado, renovando completamente el funcionamiento interno de nuestra aplicación. Carga de páginas más rápida, mejor búsqueda e integración móvil.
Descargar ahora
La unidad de héroe es un buen comienzo, pero la gente quiere ver a dónde irán su tiempo y su dinero. Una galería de imágenes es un seguimiento sólido y es fácil de implementar. Las imágenes se disponen utilizando la misma. spanN cuadrícula que define bloques de diseño y se puede ampliar fácilmente para incluir titulares, etiquetas, títulos o microdatos. Por ahora, usaremos Placehold.it para generar tres cajas grises debajo de nuestra unidad de héroe.
Soy un gran creyente en el marcado semántico, así que usaremos HTML5 figura y figcaption Etiquetas para mayor contexto. Incluso si ninguno de sus usuarios está navegando con un lector de pantalla u otro dispositivo de asistencia, el marcado descriptivo es la mejor práctica para UX y desarrollo de aplicaciones para usuario.
Agregue una lista desordenada y algunas imágenes dentro del contenido principal, debajo de su elemento héroe, así:
Este es un título corto.
Este es un título corto.
Este es un título corto.
Otra actualización del navegador debería producir un diseño similar a este, cuando se ve en pantalla panorámica.
La unidad de héroe y las imágenes agregan un gran interés visual, pero resaltan nuestro próximo desafío: los enlaces de punto de bala para un elemento de navegación adecuado.
Bootstrap tiene varios estilos de navegación incorporados, por lo que se recomienda la experimentación. Voy a resaltar la navegación tabulada aquí. Nuestro primer objetivo es reemplazar la lista de navegación básica:
A continuación, vamos a quitar el fondo gris de nuestra encabezamiento y nav elementos. Agrega las siguientes cuatro líneas al final de tu usuario.css expediente.
header [class * = "span"], nav [class * = "span"] background: #fff;
También necesitamos actualizar bien el contenido principal. He añadido una clase de contenido de la pestaña al sección Elemento, y envolvió al héroe y las imágenes en un div con class = "tab-pane active" y id = "tab1". Agregué tres adicionales div Los elementos a continuación, con ID coinciden con las etiquetas de enlace de navegación. Estos tres bloques son talones que deben completarse más adelante, pero serán útiles para la prueba. Actualizar el sección Marca y actualiza el navegador. Si todo va bien, debería poder alternar entre las pestañas y ver el contenido del contenido.
Las pestañas son geniales, pero también son solo un comienzo. Si bien Internet se está segmentando rápidamente y se parece a una aplicación, aún está impulsado por enlaces de un recurso a otro. Los enlaces se utilizan para enlazar páginas, proporcionar un contexto adicional y, a veces, para alojar funciones secundarias. La información sobre herramientas y los elementos emergentes son buenos ejemplos de funciones secundarias; Se implementan fácilmente con atributos de datos personalizados..
¿Qué son los atributos de datos? Por John Resig, quien escribió sobre estos dispositivos en 2008:
Simplemente, la especificación para los atributos de datos personalizados establece que cualquier atributo que comience con "datos-" se tratará como un área de almacenamiento para datos privados (privado en el sentido de que el usuario final no puede verlo, no afecta al diseño). o presentación).
Esto significa que podemos agregar datos personalizados a nuestras etiquetas de enlace, y Bootstrap lo manejará en consecuencia.
Supongamos que nuestra galería de imágenes está formada por información técnica. Las descripciones pueden incluir terminología que no está clara para el usuario promedio. Active la información sobre herramientas reemplazando el HTML de la galería de imágenes, comenzando con la lista desordenada y agregando un jQuery $ (documento) .ready La función y la información sobre herramientas de Bootstrap en la parte inferior de la página..
Este es un título corto. Contiene algunos lenguajes técnicos como términos específicos de dominio como HTML
Este es un título corto. Contiene algunos lenguajes técnicos como términos específicos de dominio como CSS
Este es un título corto. Contiene algunos lenguajes técnicos como términos específicos de dominio como JS
// Agregar justo encima de la etiqueta del cuerpo de cierre // Activar la información sobre herramientas
Con el HTML y Javascript en su lugar, actualice el navegador y pase los enlaces de la galería para revelar sus sugerencias..
Ahora vamos a agregar el uso compartido a nuestra galería de imágenes (al menos en una estructura alámbrica) con ventanas emergentes. Los popovers se activan al incluir atributos de datos en su marca, y otro fragmento de JavaScript.
Primero, agreguemos un botón de compartir a cada una de nuestras leyendas de imagen. Agregue el bloque de código justo debajo de la etiqueta de párrafo de cierre en cada figcaption.
Gorjeo
Tumblr
Flickr
"data-title =" Comparte esta imagen "> Comparte
Puede parecer extraño poner cada elemento en su propia línea, pero he descubierto que Bootstrap es bastante delicado con respecto al marcado bien formado, y es más fácil detectar errores una línea a la vez. Necesitamos escribir algunas líneas de JavaScript y las ventanas emergentes estarán listas.
// Prevenir acciones de enlaces predeterminados y salto de página var enlaces = $ ('a'); links.on ('clic', función (e) e.preventDefault ();); // Activar los popovers var popovers = $ ('a.popover-link'); popovers.popover (); Esta vez, hemos agregado una función general de enlaces para evitar que nuestra pantalla salte cuando los usuarios hagan clic en el botón Compartir. Sin profundizar demasiado en los detalles, cada acción en una página web registra un evento, que estamos capturando aquí como el argumento de función 'e'. Al interceptar este evento y reemplazarlo con nuestro JavaScript personalizado, la página se queda donde debería y nuestra ventana emergente aparece como se espera.
Uf. Después de todo eso, las ventanas modales se convertirán en un juego de niños. Bootstrap hace que las ventanas modales estén disponibles agregando un bloque de HTML a la parte superior de su contenedor, y un botón o enlace con un href que coincida con el ID de la ventana modal. Primero, el HTML modal..
Lo único que hay que hacer es añadir nuestro disparador. Como se trata de una aplicación, tendríamos razón al suponer que habrá una secuencia de inicio de sesión. He modificado el encabezamiento para acortar el área de banner, y agregue nuestro botón Iniciar sesión junto al cuadro de búsqueda. Cambie el siguiente HTML y agregue el CSS al final de su usuario.css expediente.
Mi aplicación impresionante
Iniciar sesión
/ * Cuadro de búsqueda * / entrada de cabecera margin-top: 20px; ancho: 70%; flotador izquierdo; / * Botón de inicio de sesión * / header a float: right; margen: 20px 0 0 20px;
Actualiza y haz clic en el botón Iniciar sesión. Debería ser recompensado con una animación rápida y la ventana modal que presenta el centro y la fachada..
Este wireframe interactivo está saliendo muy bien. Tenemos una navegación que funciona, muchos bloques para agregar contenido, interactividad y un diseño receptivo. Lo que no tenemos es una forma de buscar cosas, incluso en un sentido de prueba del usuario. Una vez más, Bootstrap nos tiene cubiertos..
Los usuarios están acostumbrados a que el cuadro de búsqueda se muestre de manera prominente en la esquina superior derecha de las pantallas de escritorio, y justo debajo del título en las pantallas más estrechas. Comenzaremos por romper la encabezamiento elemento en dos bloques, y añadiendo una sola entrada a la más pequeña:
Mi aplicación impresionante
También añadiremos algunas líneas de CSS a la usuario.css archivo, para empujar el cuadro de búsqueda fuera de la parte superior de la página.
/ * Cuadro de búsqueda * / entrada de cabecera margin-top: 20px; ancho: 90%;
También escribiremos una cantidad ligeramente mayor de JavaScript para hacer que la tipografía funcione correctamente. Lo mantendré al mínimo y explicaré lo que hace cada script..
Me imagino que algunos de ustedes están pensando "Soy una web. diseñador, No es un desarrollador. Punto justo, pero al menos tenemos que probar las aguas de JavaScript para desbloquear todo el poder de Bootstrap. Y además: los clientes se sorprenden cuando un cuadro de entrada comienza a devolver resultados desde la primera letra que escriben.
Agregue el siguiente fragmento de código JavaScript a su etiqueta de secuencia de comandos existente y presione Actualizar. Si funciona correctamente, debería ver un menú desplegable con resultados sugeridos después de haber escrito una o más letras en el cuadro de búsqueda.
búsqueda var = $ ('entrada # búsqueda'); $ (search) .typeahead (source: ['Dave Mustaine', 'Tom Morello', 'Jim Root', 'Kirk Hammett', 'Joe Perry', 'Jimi Hendrix', 'Eric Clapton', 'Billy Duffy' , 'Johnny Hickman', 'Eddie Van Halen', 'Dimebag Darrell', 'Noel Gallagher'], artículos: 5); Bien, esto es lo que hace el código. los búsqueda var = $ ('entrada # búsqueda') le dice a jQuery que almacene una referencia al cuadro de búsqueda en la variable nombrada buscar. Luego llamamos, o invocamos, la función jQuery en nuestra variable de búsqueda, y también llamamos el método de tipografía de Bootstrap. Dentro del paréntesis de typeahead, notará que se abre y se cierra un corchete ondulado. . Estos corchetes se utilizan para crear un objeto JavaScript y almacenan cierta información sobre nuestro cuadro de búsqueda.
La primera pieza de información es la fuente formación. En su forma más simple, una matriz es una lista ordenada de cosas. Aquí hay una lista de guitarristas. Cada guitarrista agregado a la matriz estará disponible como resultado en nuestra entrada de búsqueda. La segunda parte del objeto., artículos: 5 le dice al cuadro de búsqueda el número máximo de resultados para mostrar.
Estas son solo dos de las varias opciones disponibles. Le animo a que mire la documentación de arranque de Bootstrap y experimente con diferentes configuraciones. La pantalla final para este paso debe verse similar a esto:
Bootstrap se ha convertido en un elemento básico en mi flujo de trabajo de front-end. Me permite probar cuando las iteraciones son relativamente indoloras y probar varios enfoques diferentes al mismo tiempo. Estos descubrimientos ayudan a guiar las decisiones finales de diseño y ayudan a evitar cambios que consumen mucho tiempo durante todo el ciclo de desarrollo. Al tratar los wireframes como una parte crítica de la experiencia del usuario, puedo construir herramientas que se sienten más naturales y más gratificantes.
Acabo de rayar la superficie de Bootstrap, y lo que es posible utilizando su kit de piezas. Los wireframes son un excelente lugar para comenzar a aprender los entresijos, ya que están destinados a ser modelos de prueba temprana de aplicaciones completas. Los clientes y colegas pueden probar nuestras suposiciones y ayudarnos a refinar rápidamente, con un tiempo mínimo perdido.
Espero que te haya gustado este tutorial, gracias por leerlo.!
