Accentsconagua
Dette er hovedinnholdet godt
Dette er et kort avsnitt for å markere hvor det generelle innholdet vil gå.
Share
Webdesign er et utviklende yrke. Mens et godt øye for farge, typografi og layout alltid vil være viktig, blir disse ferdighetene trumpet av et behov for å forstå brukerens motivasjoner. Det er ikke nok å bygge et nettsted og vente på at trafikken skal rulle inn. Nettstedene må hjelpe brukerne med å oppnå sine mål, med minst kognitiv friksjon. Bootstrap kan hjelpe webprofessorer til å definere disse målene, og skape en killer opplevelse også.
Vi lager ikke sider, vi lager filmer
Jeg liker å si at vi ikke lager sider, vi lager filmer. Brukere forventer at nettsteder lastes raskt, gir engasjerende innhold og smart interaktivitet. Akkurat som filmer er avhengige av hurtige kutt, belysning og stemning for å trekke brukere inn, er nettsteder avhengig av overganger, interaktivitet og timing. Disse detaljene går ofte tapt i designfasen - eller verre, blir aldri tatt i betraktning. Mens en overgang som tar 0,5 sekunder når det skal ta 0,25 sekunder, vil vanligvis ikke synke et program, det er dette detaljnivået som skiller seg godt fra bra.
Jeg vil vise deg hvordan Bootstrap kan erstatte statiske wireframes og bringe disse detaljene til forkant tidligere og med mindre innsats.
Det første trinnet er å laste ned de nyeste stabile Bootstrap- og jQuery-byggene.
Selv om jQuery er vert for en rekke CDN, foretrekker jeg å inkludere alle filer lokalt, slik at jeg kan jobbe med eller uten nettilgang. Gå videre og sett opp en katalogstruktur som den nedenfor, og kopier uautorisert Bootstrap CSS, Bootstrap Responsive CSS og Javascript-filer. Tweak navn og steder etter behov, men ved hjelp av denne strukturen kan du også utnytte HTML-malen i neste trinn.
Nå vil det være en god tid å lage et tredje stilark, som jeg vil ringe user.css. Denne filen brukes til å overstyre Bootstrap-stiler etter behov.
Dette er det eneste andre oppsettet som kreves for å begynne å bygge en interaktiv wireframe. Opprett en fil i prosjektkatalogen, og navnet på den index.html. Etter at du har opprettet filen, kopier denne koden og lagre.
Interactive Bootstrap Wireframes Din oppsett vil gå her.
Åpne en nettleser og dra den lagrede index.html-filen inn i den. Hvis alle inkluderingene er riktig lastet, bør du se noe som ligner skjermbildet nedenfor. Hvis du ikke ser varselboksen, åpner du Console eller Web Inspector og ser om en fil ikke har lastet inn. Etter feilsøking, fjern eller kommentere varsellinjen i $ (Document) .ready Fungerer nederst på siden og gjør deg klar til å bygge Bootstrap wireframes.
Med alle nødvendige filer på plass, kan vi begynne å grove i hovedinnholdsblokkene. De fleste nettsteder (apper) vil inneholde en topptekst, primærnavigering, hovedinnhold, sidebar og bunntekst. Jeg holder bevisst på å holde oppsettet enkelt, for å raskt illustrere kraften til Bootstraps rutenett.
Den eneste strukturelle markeringen på siden så langt er vår div med klassen "container".
Merk: Denne div er en nødvendig inneholdende blokk for Bootstrap; Vi vil bygge hele vår wireframe applikasjon inne i den.
Bootstrap krever også den nye HTML-doktypen, og genererer stilregler med klasser, i stedet for tagnavn. Disse beslutningene betyr at vi kan bruke noen nye HTML5-elementer: header, navigasjon, seksjon, artikkel, til side og bunntekst. Det er verdt å nevne hvis du planlegger å teste oppsettet ditt i Internet Explorer, du må laste ned og inkludere enten Modernizr eller HTML5 Shim. Moderne versjoner av Firefox, Chrome og Safari støtter standard HTML5-standarden.
Bootstrap er bygd på en 12 kolonne rutenett. Den bruker to klasser, rad og span å skape blokkeringsbeholdere. Ved å bruke radklassen til en beholder som en div eller header, strekker den automatisk over hele 940px bredden. Ved å legge til beholdere med klassespenningN (N å være plassholder for antall kolonner), kan du enkelt lage innholdsbrønner, sidebars og andre layoutblokker uten å måtte administrere flyter eller andre quirks.
For å komme raskt opp, skal jeg bygge en grunnleggende overskrift, navigeringslinje, hovedbrønn, side og bunntekst. Erstatt "Din oppsett vil gå her" med følgende kode.
My Awesome App
Dette er hovedinnholdet godt
Dette er et kort avsnitt for å markere hvor det generelle innholdet vil gå.
Jeg har også lagt til noen grunnleggende regler til user.css, for å gjøre innholdsblobene enklere å identifisere. Hvis alt har gått bra, bør du se en rekke grå blokker med svart beskrivende tekst inni.
/ * Grunnleggende stilregel for å skissere og mellomromblokknivåelementer * / [class * = "span"] bakgrunn: #eee; margin-bunn: 10px;
Faste og flytende oppsett har eksistert i lang tid. Responsive layouter er relativt nye, og kombinerer de beste delene av begge. Det gir designere verktøy for å optimalisere designene sine for flere enhetsstørrelser (smarttelefoner, tabletter, smale og widescreen-skjermer) uten å beholdes en egen kodebase for hver. Endre størrelsen på nettleservinduet for å se Bootstraps responsive stilark i bruk, og få en følelse av den fantastiske muligheten til å skrive en gang og test wireframes i en rekke miljøer.
Nettlesere bruker CSS-brytepunkter for å bestemme hvordan man lager en side, basert på minimum og maksimal breddemåling. Brytpunkter i forhold til nettleservidd begynner alltid med @media (bredde argument) og er veldig lett å lese. De kan også inneholde et andre argument i et annet sett med parentes, noe som gir stor fleksibilitet for flere enheter.
I kodesammenstillingen nedenfor har jeg laget flere regler som definerer bakgrunnsfarger for fire vanlige Bootstrap-responsive bruddpunkter, endret litt for å vise en jevn overgang fra en farge til den neste.
/ * Grunnleggende bakgrunnsfarger for responsive bruddpunkter * / / * Maksimal bredde 480px landskapstelefon og ned * / @media (maksimal bredde: 480px) .container bakgrunn: # f1ea81; .container: etter innhold: "Maksimal bredde 480px landskapstelefon og ned"; / * Min bredde 481px og maksimal bredde 767px landskapstelefon til portretttabell * / @media (min bredde: 481px) og (maks bredde: 767px) .container bakgrunn: # a7f7e5; .container: etter innhold: "Minst bredde 481px og maksimal bredde 767px landskapstelefon til stående tabletter"; / * Min bredde 768px og maksimal bredde 979px portretttablet til liggende * / @media (min bredde: 768px) og (maks bredde: 979px) .container bakgrunn: # c4deff; .container: etter innhold: "Min bredde 768px og maksimal bredde 979px, stående tablett til landskap"; / * Min bredde 980px widescreen display * / @media (min bredde: 980px) og (maks bredde: 1199px) .container bakgrunn: # fde3ff; .container: etter innhold: "Min bredde 980px, maks bredde 1199px, desktop format"; / * Min bredde 1200px widescreen display * / @media (min bredde: 1200px) .container bakgrunn: # ffc4c4; .container: etter innhold: "Min bredde 1200px, widescreen format";
Vi har bygget et fullt responsivt oppsett, men vi mangler fortsatt de gode greiene. Resten av denne opplæringen vil vise deg hvordan du legger til visuell interesse gjennom innhold og interaktivitet.
Nå som stillaset er på plass, kan vi begynne å legge til innhold. Jeg bevidst holder disse visningene generisk-grå bokser med minimal stiler oppfordrer beta-brukere til å fokusere rett på samspillet, og ikke bli for hengt opp på den visuelle stilen.
Hero-enheten er utformet for å skape en front-and-center call-to-action. Kode nedlastinger, nye applikasjoner eller bryte nyhetsartikler er gode kandidater. For vårt formål vil jeg bruke den til å kunngjøre en stor programvareoppgradering. Erstatt eksisterende h2 og p Merker i hovedinnholdet godt med koden under og oppdater nettleseren for å se helten i aksjon.
Versjon 2.0 er her!
Alle nye funksjoner, mange forbedringer
En mer perfekt pakke deg’er ikke sannsynlig å finne
Vårt team har vært opptatt i det siste året, og har fullstendig gjentatt den indre driften av søknaden vår. Faster sidebelastninger, bedre søk og mobilintegrasjon.
Last ned nå
Heltenheten er en god start, men folk vil se hvor tid og penger skal gå. Et bildegalleri er en sterk oppfølging, og er et snap å implementere. Bilder legges ut med det samme Spann rutenett som definerer layoutblokker, og kan enkelt utvides til å inkludere overskrifter, koder, bildetekster eller mikrodata. For nå vil vi bruke Placehold.it for å generere tre grå bokser under vår heltenhet.
Jeg er stor troende på semantisk oppslag, så vi skal bruke HTML5 figur og figcaption koder for økt kontekst. Selv om ingen av brukerne surfer med en skjermleser eller annen hjelpemiddel, er beskrivende markering en god praksis for UX og front-end-utvikling.
Legg til en uordnet liste og noen bilder i hovedinnholdet, vel under din heltelement slik:
Dette er en kort bildetekst.
Dette er en kort bildetekst.
Dette er en kort bildetekst.
En annen nettleseroppdatering skal gi en layout som ligner dette, når den vises på widescreen.
Heltenheten og bildene gir mye visuell interesse, men fremhever vår neste utfordring: Kulepunktslinkene står inn for et skikkelig navigasjonselement.
Bootstrap har flere innebygde navigasjonsstiler, slik at eksperimenter oppfordres. Jeg skal markere fanebladnavigasjonen her. Vår første rekkefølge er å erstatte den grunnleggende navigasjonslisten:
Deretter la vi fjerne den grå bakgrunnen fra vår Overskrift og nav elementer. Legg til følgende fire linjer til slutten av din user.css fil.
header [class * = "span"], nav [class * = "span"] bakgrunn: #fff;
Vi må også oppdatere hovedinnholdet godt. Jeg har lagt til en klasse av tab-innhold til seksjon element, og innpakket helten og bildene i en div med class = "tab-panel aktiv" og id = "tab1". Jeg la til tre ekstra div elementene nedenfor, med ID som matcher navigeringslinketikettene. Disse tre blokkene er stubber som skal fylles ut senere, men vil være nyttige for testing. Oppdater seksjon merk opp og oppdater nettleseren. Hvis alt går rett, bør du kunne bytte gjennom fanene og vise stubben i innholdet.
Fanene er kule, men de er også bare en start. Selv om Internett raskt blir segmentert og applikasjonsaktig, er det fortsatt drevet av lenker fra en ressurs til en annen. Lenker brukes til å hekte sider sammen, gi ytterligere kontekst, og noen ganger, til å legge til sekundære funksjoner. Verktøytips og popovers er gode eksempler på sekundær funksjon; de er lett implementert med egendefinerte dataattributter.
Hva er data-attributter? Per John Resig, som skrev om disse enhetene, klarte seg tilbake i 2008:
Helt enkelt angir spesifikasjonen for egendefinerte dataattributter at ethvert attributt som starter med "data" vil bli behandlet som et lagringsområde for private data (privat i den forstand at sluttbrukeren ikke kan se det - det påvirker ikke layoutet eller presentasjon).
Dette betyr at vi kan legge til egendefinerte data i våre linketiketter, og Bootstrap vil håndtere det tilsvarende.
Anta at vårt bildegalleri består av teknisk informasjon. Beskrivelsene kan inneholde terminologi som er uklart for den gjennomsnittlige brukeren. Aktiver verktøytips ved å erstatte bildegalleriet HTML, start med den uordnede listen, og legg til en jQuery $ (Document) .ready funksjon og Bootstraps verktøytipsfunksjon nederst på siden.
Dette er en kort bildetekst. Den inneholder noen tekniske språk som domenespesifikke begreper som HTML
Dette er en kort bildetekst. Den inneholder noen tekniske språk som domenespesifikke begreper som CSS
Dette er en kort bildetekst. Den inneholder noen tekniske språk som domenespesifikke begreper som JS
// Legg litt over den avsluttende kroppstegnet // Aktiver verktøylinjene
Med HTML og Javascript på plass, oppdaterer du nettleseren og ruller over gallerikoblingene for å vise verktøytipsene dine.
Vi kommer nå til å legge til deling i vårt bildegalleri (i det minste på en wireframe-y-måte) med popovers. Popovers aktiveres ved å inkludere dataattributter i oppslaget ditt, og en annen utdrag av JavaScript.
Først legger vi til en delingsknapp for hver av våre bildetekster. Legg til kodeblokken like under det siste avsnittet i hver figcaption.
tumblr
Flickr
"data-title =" Del dette bildet "> Del
Det kan virke rart å sette hvert element på egen linje, men jeg har funnet at Bootstrap er ganske kresen om velformet markup, og det er lettere å se feil på en linje om gangen. Vi må skrive noen få linjer med JavaScript og popovers vil være klare.
// Forhindre standardkoblinger handlinger og side jumping var lenker = $ ('a'); links.on ('klikk', funksjon (e) e.preventDefault ();); // Aktiver popovers var popovers = $ ('a.popover-link'); popovers.popover (); Denne gangen har vi lagt til en generell koblingsfunksjon for å forhindre at skjermen hopper når brukere klikker på knappen Share. Uten å dype for langt inn i detaljer, registrerer hver handling på en nettside en hendelse, som vi fanger her som funksjonsargumentet 'e'. Ved å fange denne hendelsen, og erstatte den med vår egendefinerte JavaScript, forblir siden der den skal, og vår popover vises som forventet.
Puh. Når alt kommer til alt, vil modale vinduer bli en cakewalk. Bootstrap gjør modale vinduer tilgjengelige ved å legge til en blokk med HTML til toppen av containeren din, og en knapp eller lenke med en href som samsvarer med det modale vinduet ID. Først, den modale HTML.
Den eneste andre tingen å gjøre er å legge til utløseren vår. Siden dette er et program, ville vi være riktige å anta at det vil være en innloggingssekvens. Jeg har endret Overskrift for å forkorte bannerområdet, og legg til vår innloggingsknapp ved siden av søkefeltet. Endre følgende HTML, og legg til CSS til slutten av din user.css fil.
My Awesome App
Logg Inn
/ * Søkeboks * / headerinngang margin-top: 20px; bredde: 70%; flyte: venstre; / * Logg inn knapp * / header a float: right; margin: 20px 0 0 20px;
Oppdater og klikk på Logg inn-knappen. Du bør belønnes med en rask animasjon, og det modale vinduet presenterer front og senter.
Denne interaktive wireframe kommer godt sammen. Vi har en navigasjon som fungerer, mange blokker for å legge til innhold, interaktivitet og en responsiv layout. Det vi ikke har, er en måte å søke etter ting, selv i en test av brukerens mening. Igjen har Bootstrap oss dekket.
Brukere er vant til at søkefeltet fremtredende vises øverst til høyre på skrivebordet, og rett under overskriften på smalere skjermer. Vi vil begynne med å bryte Overskrift element i to blokker, og legg til et enkelt inngang til mindre:
My Awesome App
Vi vil også legge til noen få linjer med CSS til user.css fil, for å trykke søkefeltet øverst på siden.
/ * Søkeboks * / headerinngang margin-top: 20px; bredde: 90%;
Vi vil også skrive en litt større mengde JavaScript for å gjøre typefunksjonen riktig. Jeg vil holde det til et minimum, og forklare hva hvert skript gjør.
Jeg forestiller meg at noen av dere tenker "Jeg er en web designer, ikke en utvikler. Fair point, men vi må i hvert fall teste JavaScript-farvannene for å låse opp Bootstraps full effekt. Og dessuten: Klienter er wowed når en inngangs boks begynner å returnere resultater fra første bokstav de skriver.
Legg til JavaScript-kode nedenfor til din eksisterende skriptetikett, og klikk Oppdater. Hvis det fungerer riktig, bør du se en rullegardinmeny med foreslåtte resultater etter at du har skrevet en eller flere bokstaver i søkeboksen.
var search = $ ('input # search'); $ (søk) .typeahead ("kilde: ['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'], elementer: 5); Ok, her er hva koden gjør. De var search = $ ('input # search') forteller jQuery å lagre en referanse til søkeboksen i den navngitte variabelen Søke. Deretter kaller vi, eller påkaller, jQuery-funksjonen på vår søkevariabel, og kaller også Bootstrap typeahead-metoden. Innenfor typehodet parentesen vil du legge merke til en åpnings- og lukkeklemme . Disse parentesene brukes til å lage et JavaScript-objekt, og lagre litt informasjon om søkefeltet.
Den første informasjonen er kilde array. På sitt enkleste er en rekke en bestilt liste over ting. Her er det en liste over gitaristene. Hver gitarist som er lagt til i gruppen, vil være tilgjengelig som et resultat av vår søkeinngang. Den andre delen av objektet, elementer: 5 forteller søkeboksen det maksimale antall resultater som skal vises.
Disse er bare to av flere alternativer. Jeg oppfordrer deg til å se på Bootstrap-type dokumentasjon og eksperimentere med forskjellige konfigurasjoner. Den endelige skjermen for dette trinnet skal se ut som dette:
Bootstrap har blitt en stift i min front-end arbeidsflyt. Det tillater meg å teste når iterasjoner er relativt smertefri, og prøv flere forskjellige tilnærminger samtidig. Disse funnene hjelper til med å veilede endelige designbeslutninger, og bidra til å unngå tidkrevende endringer i hele utviklingssyklusen. Ved å behandle wireframes som en kritisk del av brukeropplevelsen, kan jeg bygge verktøy som føles mer naturlig og mer tilfredsstillende.
Jeg har nettopp riper overflaten på Bootstrap, og det er mulig å bruke sitt sett av deler. Wireframes er et flott sted å begynne å lære ins og outs-de er ment å være lo-fi, tidlige testmodeller av fulle applikasjoner som kommer. Klienter og kollegaer kan teste våre forutsetninger, og hjelpe oss med å forfine raskt, med minimal tid tapt.
Jeg håper du likte denne opplæringen, takk for å lese!
