Accentsconagua
Dit is de belangrijkste inhoud
Dit is een korte alinea om te benadrukken waar de algemene inhoud naartoe zal gaan.
Share
Webdesign is een evoluerend beroep. Hoewel een scherp oog voor kleur, typografie en lay-out altijd belangrijk zal zijn, worden deze vaardigheden overtroefd door de noodzaak om de motivaties van gebruikers te begrijpen. Het is niet genoeg om een site te bouwen en te wachten tot het verkeer binnenkomt - sites moeten gebruikers helpen hun doelen te bereiken, met een minimum aan cognitieve frictie. Bootstrap kan webprofessionals helpen bij het definiëren van deze doelen en het creëren van een geweldige ervaring.
we maken geen pagina's, we maken films
Ik zeg graag dat we geen pagina's maken, we maken films. Gebruikers verwachten dat sites snel worden geladen, bieden aantrekkelijke inhoud en slimme interactiviteit. Net zoals films afhankelijk zijn van snelle bezuinigingen, verlichting en gemoedstoestand om gebruikers binnen te halen, vertrouwen websites op overgangen, interactiviteit en timing. Deze details raken vaak verloren tijdens de ontwerpfase - of erger, worden nooit verantwoord. Hoewel een overgang die 0,5 seconde duurt wanneer het 0,25 seconden zou duren, meestal geen applicatie zal doen zinken, het is dit detailniveau dat goed van groot scheidt.
Ik zal je laten zien hoe Bootstrap statische wireframes kan vervangen en deze details vroeger en met minder moeite naar voren kan brengen.
De eerste stap is het downloaden van de nieuwste stabiele Bootstrap en jQuery builds.
Hoewel jQuery wordt gehost door een aantal CDN's, geef ik er de voorkeur aan om alle bestanden lokaal op te nemen, zodat ik met of zonder webtoegang kan werken. Ga je gang en stel een directory-structuur in zoals hieronder, en kopieer de niet-geminaliseerde Bootstrap CSS, Bootstrap Responsive CSS en Javascript-bestanden. Pas de namen en locaties waar nodig aan, maar met deze structuur kunt u ook mijn HTML-sjabloon gebruiken in de volgende stap.
Het zou een goed moment zijn om een derde stylesheet te maken, die ik zal noemen user.css. Dit bestand zal worden gebruikt om Bootstrap-stijlen waar nodig te overschrijven.
Dit is de enige andere setup die vereist is om een interactief wireframe te bouwen. Maak een bestand in de hoofdmap van uw projectdirectory en geef het een naam index.html. Nadat u het bestand hebt gemaakt, kopieert u deze code en slaat u deze op.
Interactieve Bootstrap-wireframes Je lay-out gaat hier naartoe.
Open een webbrowser en sleep hierin het opgeslagen index.html-bestand. Als alle onderdelen correct zijn geladen, zou u iets moeten zien dat vergelijkbaar is met het onderstaande screenshot. Als u het waarschuwingsvenster niet ziet, opent u de console of Web Inspector en controleert u of een bestand niet kan worden geladen. Na het oplossen van problemen, verwijder of becommentarieer de waarschuwingsregel in de $ (Document) .ready functie onderaan de pagina en maak je klaar om Bootstrap-wireframes te maken.
Met alle benodigde bestanden kunnen we beginnen met het opruwen in de belangrijkste inhoudsblokken. De meeste sites (apps) bevatten een koptekst, primaire navigatie, hoofdinhoud goed, zijbalk en voettekst. Ik houd bewust de lay-out eenvoudig, om snel de kracht van Bootstrap's rastersysteem te illustreren.
De enige structurele opmaak op de pagina tot nu toe is onze div met klasse "container".
Notitie: Deze div is een verplicht blok voor Bootstrap; we zullen onze hele wireframe-applicatie erin bouwen.
Bootstrap vereist ook het nieuwe HTML-doctype en genereert de stijlregels met klassen in plaats van tagnamen. Deze beslissingen betekenen dat we een aantal nieuwe HTML5-elementen kunnen gebruiken: koptekst, navigatie, sectie, artikel, opzij en voettekst. Het is de moeite waard om te vermelden of u van plan bent om uw lay-out in Internet Explorer te testen. U moet Modernizr of de HTML5 Shim downloaden en opnemen. Moderne versies van Firefox, Chrome en Safari ondersteunen standaard de HTML5-standaard.
Bootstrap is gebouwd op een raster met 12 kolommen. Het maakt gebruik van twee klassen, rij en span om containers op blokniveau te maken. Door de rijklasse toe te passen op een container zoals een div of header, wordt deze automatisch uitgerekt over de volledige breedte van 940 px. Door containers met klassenbereik toe te voegenN (N als plaatsaanduiding voor het aantal kolommen), kunt u gemakkelijk inhoudputten, zijbalken en andere lay-outblokken maken zonder drijvers of andere eigenaardigheden te hoeven beheren.
Om snel aan de slag te gaan, ga ik een eenvoudige koptekst, navigatiebalk, hoofdbron, opzij en voettekst bouwen. Vervang "Uw lay-out gaat hier" met de volgende code.
Mijn geweldige app
Dit is de belangrijkste inhoud
Dit is een korte alinea om te benadrukken waar de algemene inhoud naartoe zal gaan.
Ik heb ook een paar basisregels toegevoegd aan user.css, om de inhoudsblokken gemakkelijker te identificeren. Als alles goed is gegaan, ziet u een aantal grijze blokken met zwarte beschrijvende tekst erin.
/ * Basic style-regel om te schetsen en elementen op ruimteblokniveau * / [class * = "span"] background: #eee; margin-bottom: 10px;
Vaste en vloeiende lay-outs bestaan al heel lang. Responsieve lay-outs zijn relatief nieuw en combineren de beste delen van beide. Het biedt ontwerpers tools om hun ontwerpen te optimaliseren voor verschillende apparaatgroottes (smartphones, tablets, narrow- en breedbeeldschermen) zonder daarvoor een aparte codebase te hoeven onderhouden. Pas het formaat van je browservenster aan om de responsieve stylesheet van Bootstrap in actie te zien en krijg een idee van het geweldige vermogen om één keer te schrijven en wireframes te testen in een aantal omgevingen.
Browsers maken gebruik van CSS-breekpunten om te beslissen hoe een pagina wordt weergegeven, op basis van minimale en maximale breedtemetingen. Breekpunten met betrekking tot de breedte van de browser beginnen altijd met @media (breedteargument) en zijn heel gemakkelijk te lezen. Ze kunnen ook een tweede argument in een andere reeks haakjes bevatten, wat een grote mate van flexibiliteit voor meerdere apparaten mogelijk maakt.
In het onderstaande codevoorbeeld heb ik verschillende regels gemaakt die achtergrondkleuren definiëren voor vier veelvoorkomende Bootstrap-responsieve breekpunten, enigszins aangepast om een vloeiende overgang van de ene kleur naar de volgende te tonen.
/ * Basis achtergrondkleuren voor responsieve breekpunten * / / * Maximale breedte 480 px landschapstelefoon en -down * / @media (max. Breedte: 480px) .container background: # f1ea81; .container: na content: "Maximale breedte 480 px landschapstelefoon en lager"; / * Minibreedte 481 px en max. Breedte 767 px landschapstelefoon naar staande tablet * / @media (min-breedte: 481px) en (max-breedte: 767px) .container background: # a7f7e5; .container: na content: "Minibreedte 481px en max. breedte 767px landscape-telefoon naar staande tablet"; / * Minibreedte 768 px en max. Breedte 979 px portrait-tablet naar landscape * / @media (min-breedte: 768 px) en (max-width: 979 px) . Container background: # c4deff; .container: na content: "Min-width 768px and max-width 979px, portrait tablet to landscape"; / * Min. Breedte 980 px breedbeeldscherm * / @media (min-breedte: 980px) en (max-width: 1199px) .container background: # fde3ff; .container: na content: "Min-width 980px, max-width 1199px, desktop-format"; / * Min-breedte 1200 px breedbeeldscherm * / @media (min-width: 1200px) .container background: # ffc4c4; .container: na content: "Min-width 1200px, breedbeeldformaat";
We hebben een volledig responsieve lay-out gebouwd, maar we missen nog steeds de goede dingen. De rest van deze zelfstudie laat u zien hoe u visuele interesse toevoegt door inhoud en interactiviteit.
Nu de steiger op zijn plaats zit, kunnen we beginnen met het toevoegen van inhoud. Ik blijf bewust deze opvattingen generiek-grijze vakken met minimale stijlen stimuleren bèta-gebruikers om zich volledig te concentreren op de interactie, en niet te opgehangen raken aan de visuele stijl.
De hero-eenheid is ontworpen om een call-to-call tot stand te brengen. Codedownloads, nieuwe applicaties of breaking news-items zijn goede kandidaten. Voor onze doeleinden zal ik het gebruiken om een belangrijke software-upgrade aan te kondigen. Vervang de bestaande h2 en p tags in de hoofdinhoud goed met de onderstaande code en vernieuw je browser om de held in actie te zien.
Versie 2.0 is hier!
Alle nieuwe functies, veel verbeteringen
Een meer perfect pakket voor jou’waarschijnlijk niet vinden
Ons team is het afgelopen jaar druk geweest en heeft de interne werking van onze applicatie volledig vernieuwd. Sneller laden van pagina's, betere zoekmogelijkheden en mobiele integratie.
Download nu
De hero-eenheid is een goed begin, maar mensen willen zien waar hun tijd en geld naartoe zullen gaan. Een afbeeldingengalerij is een krachtige follow-up en is een makkie om te implementeren. Afbeeldingen worden op dezelfde manier ingedeeld Spann raster dat lay-outblokken definieert en eenvoudig kan worden uitgebreid met koppen, tags, bijschriften of microdata. Voorlopig zullen we Placehold.it gebruiken om drie grijze vakken te genereren onder onze hero-eenheid.
Ik ben een groot voorstander van semantische opmaak, dus we zullen de HTML5 gebruiken figuur en figcaption tags voor verhoogde context. Zelfs als geen van uw gebruikers browst met een schermlezer of ander hulpmiddel, is beschrijvende markup een goede praktijk voor UX en front-end ontwikkeling.
Voeg een ongeordende lijst en enkele afbeeldingen in de hoofdinhoud toe, onder je heldelement, zoals zo:
Dit is een kort bijschrift.
Dit is een kort bijschrift.
Dit is een kort bijschrift.
Een andere verversing van de browser zou een vergelijkbare opmaak moeten opleveren, wanneer het breedbeeld wordt bekeken.
De hero-eenheid en afbeeldingen voegen veel visueel belang toe, maar benadrukken onze volgende uitdaging: de opsommingsteken-links staan voor een goed navigatie-element.
Bootstrap heeft verschillende ingebouwde navigatiestijlen, dus experimenten worden aangemoedigd. Ik ga hier de navigatie met tabbladen markeren. Onze eerste opdracht is om de basisnavigatielijst te vervangen:
Laten we vervolgens de grijze achtergrond verwijderen uit onze hoofd en nav elementen. Voeg de volgende vier regels toe aan het einde van uw user.css het dossier.
header [class * = "span"], nav [class * = "span"] background: #fff;
We moeten ook de belangrijkste inhoud goed updaten. Ik heb een klasse toegevoegd tab-inhoud naar de sectie element, en verpakt de held en afbeeldingen in een div met class = "tab-paneel actief" en id = "tab1". Ik heb er nog drie toegevoegd div onderstaande elementen, met ID's die overeenkomen met de navigatie-linktags. Deze drie blokken zijn stubs die later moeten worden ingevuld, maar zullen nuttig zijn om te testen. Werk het sectie markup en vernieuw de browser. Als alles goed gaat, zou je tussen de tabs moeten kunnen schakelen en de inhoud van de gedrukte inhoud kunnen bekijken.
Tabbladen zijn cool, maar ze zijn ook slechts een begin. Hoewel het internet snel gesegmenteerd en applicatie-achtig wordt, wordt het nog altijd aangedreven door links van de ene bron naar de andere. Links worden gebruikt om pagina's aan elkaar te haken, extra context te bieden en soms om secundaire functies onder te brengen. Tooltips en popovers zijn goede voorbeelden van secundaire functies; ze kunnen eenvoudig worden geïmplementeerd met aangepaste gegevensattributen.
Wat zijn data-attributen? Per John Resig, die schreef over deze apparaten, wist in 2008 alweer:
Eenvoudig gezegd, de specificatie voor aangepaste gegevensattributen stelt dat elk attribuut dat begint met "data-" zal worden behandeld als een opslaggebied voor privégegevens (privé in die zin dat de eindgebruiker het niet kan zien - het heeft geen invloed op de lay-out of presentatie).
Dit betekent dat we aangepaste gegevens aan onze koppelingstags kunnen toevoegen en dat Bootstrap de gegevens dienovereenkomstig verwerkt.
Stel dat onze fotogalerij bestaat uit technische informatie. De beschrijvingen kunnen terminologie bevatten die voor de gemiddelde gebruiker onduidelijk is. Activeer tooltips door de HTML van de afbeeldingsgalerij te vervangen, te beginnen met de ongeordende lijst en een jQuery toe te voegen $ (Document) .ready functie en Bootstrap's tooltip-functie naar de onderkant van de pagina.
Dit is een kort bijschrift. Het bevat een aantal technische taal zoals domeinspecifieke termen zoals HTML
Dit is een kort bijschrift. Het bevat een aantal technische taal zoals domeinspecifieke termen zoals CSS
Dit is een kort bijschrift. Het bevat een aantal technische taal zoals domeinspecifieke termen zoals JS
// Toevoegen net boven de afsluitende body-tag // Activeer de tooltips
Met de HTML en Javascript op zijn plek, vernieuwt u de browser en rolt u over de galerijkoppelingen om uw tooltips te onthullen.
We gaan nu delen met onze afbeeldingengalerij (althans op een wireframe-manier) met popovers. Popovers worden geactiveerd door data-attributen in uw markup op te nemen en een ander JavaScript-fragment.
Laten we eerst een deelknop toevoegen aan elk van onze afbeeldingsteksten. Voeg het codeblok toe net onder de afsluitende alinea-tag in elk figcaption.
tjilpen
tumblr
Flickr
"data-title =" Deel deze afbeelding "> Delen
Het lijkt misschien raar om elk item op zijn eigen regel te zetten, maar ik heb ondervonden dat Bootstrap vrij kieskeurig is over goed gevormde markup en het is gemakkelijker om één regel tegelijk fouten te herkennen. We moeten een paar regels JavaScript schrijven en de popovers zijn klaar.
// Voorkom standaard links acties en pagina springen var links = $ ('a'); links.on ('klik', functie (e) e.preventDefault ();); // Activeer de popovers var popovers = $ ('a.popover-link'); popovers.popover (); Deze keer hebben we een algemene koppelingsfunctie toegevoegd om te voorkomen dat ons scherm springt wanneer gebruikers op de Share-knop klikken. Zonder te ver in de details te graven, registreert elke actie op een webpagina een gebeurtenis, die we hier vastleggen als het functieargument 'e'. Door deze gebeurtenis te onderscheppen en te vervangen door ons aangepaste JavaScript, blijft de pagina waar hij moet en verschijnt onze popover zoals verwacht.
Oef. Modale vensters worden uiteindelijk een cakewalk. Bootstrap maakt modale vensters beschikbaar door een HTML-blok aan de bovenkant van uw container toe te voegen en een knop of koppeling met een href die overeenkomt met de modale venster-ID. Ten eerste de modale HTML.
Het enige andere wat je hoeft te doen is onze trigger toevoegen. Aangezien dit een applicatie is, hebben we gelijk als we aannemen dat er een inlogreeks zal zijn. Ik heb de hoofd om het spandoekgebied in te korten en voeg je onze inlogknop toe naast het zoekvak. Wijzig de volgende HTML en voeg de CSS toe aan het einde van uw user.css het dossier.
Mijn geweldige app
Log in
/ * Zoekvak * / header-invoer margin-top: 20px; breedte: 70%; zweven: links; / * Login-knop * / header a float: right; marge: 20px 0 0 20px;
Vernieuwen en klik op de knop Inloggen. Je moet worden beloond met een snelle animatie en het modale venster met voor en midden.
Dit interactieve draadframe komt mooi langs. We hebben navigatie die werkt, veel blokken voor het toevoegen van inhoud, interactiviteit en een responsieve lay-out. Wat we niet hebben, is een manier om naar dingen te zoeken, zelfs in de zin van gebruikerstesting. Nogmaals, Bootstrap heeft ons gedekt.
Gebruikers zijn gewend dat het zoekvak prominent wordt weergegeven in de rechterbovenhoek van bureaubladdisplays en net onder de kop op smallere schermen. We beginnen met het breken van de hoofd element in twee blokken, en een enkele invoer aan de kleinere toe te voegen:
Mijn geweldige app
We zullen ook enkele regels CSS toevoegen aan de user.css bestand, om het zoekvak van de bovenkant van de pagina te duwen.
/ * Zoekvak * / header-invoer margin-top: 20px; breedte: 90%;
We zullen ook een iets grotere hoeveelheid JavaScript schrijven om het typeahead goed te laten werken. Ik zal het tot een minimum beperken en uitleggen wat elk script aan het doen is.
Ik stel me voor dat sommigen van jullie denken: "Ik ben een web ontwerper, geen ontwikkelaar. Eerlijk punt, maar we moeten op zijn minst de JavaScript-wateren testen om de volledige kracht van Bootstrap te ontgrendelen. En trouwens: klanten zijn overweldigd wanneer een invoervak begint resultaten te retourneren van de eerste letter die ze typen.
Voeg het JavaScript-fragment hieronder toe aan uw bestaande scripttag en klik op Vernieuwen. Als het correct werkt, ziet u een vervolgkeuzemenu met voorgestelde resultaten nadat u een of meer letters in het zoekvak hebt getypt.
var search = $ ('input # search'); $ (zoek) .typeahead (bron: ['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'], items: 5); Oké, hier is wat de code aan het doen is. De var search = $ ('input # search') vertelt jQuery om een verwijzing naar het zoekvak in de benoemde variabele op te slaan zoeken. Vervolgens bellen of roepen we de jQuery-functie op onze zoekvariabele aan en noemen we ook de Bootstrap-methode voor typeaheads. Binnen het haakje met de typeahead ziet u een kronkelende beugel die open en dicht is . Deze haakjes worden gebruikt om een JavaScript-object te maken en wat informatie over ons zoekvak op te slaan.
Het eerste stuk informatie is het bron matrix. Op zijn eenvoudigst is een array een geordende lijst met dingen. Hier is het een lijst met gitaristen. Elke gitarist die aan de array is toegevoegd, is als resultaat beschikbaar in onze zoekinvoer. Het tweede deel van het object, items: 5 vertelt het zoekvak het maximumaantal resultaten dat moet worden weergegeven.
Dit zijn slechts twee van de verschillende beschikbare opties. Ik moedig je aan om de Bootstrap typeahead-documentatie te bekijken en met verschillende configuraties te experimenteren. Het laatste scherm voor deze stap zou er ongeveer zo uit moeten zien:
Bootstrap is een standaard geworden in mijn front-end workflow. Hiermee kan ik testen of iteraties relatief pijnloos zijn en verschillende benaderingen gelijktijdig proberen. Deze ontdekkingen helpen bij het nemen van definitieve ontwerpbeslissingen en helpen tijdrovende veranderingen tijdens de volledige ontwikkelingscyclus te voorkomen. Door wireframes te behandelen als een cruciaal onderdeel van de gebruikerservaring, ben ik in staat tools te ontwikkelen die natuurlijker aanvoelen en meer voldoening schenken.
Ik heb net het oppervlak van Bootstrap gekrast en wat mogelijk is met behulp van de onderdelenkit. Wireframes zijn een geweldige plek om de ins en outs te leren - ze zijn bedoeld als lo-fi, vroege testmodellen van alle toekomstige toepassingen. Klanten en collega's kunnen onze aannames testen en ons helpen om snel te verfijnen, met minimale tijdverlies.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
