Vytvorte responzívny drôtový model HTML

Od počiatkov 3D počítačového modelovania používali modelári pohľad typu „wireframe“ na zobrazenie objektu v troch dimenziách s minimálnymi nákladmi na počítačový procesor. Rané videohry ako Battlezone a Búrka ukázal 3D objekty ako drôtové rámy, pretože skoré domáce počítače neboli dosť výkonné na to, aby plne vykreslili 3D objekty (a skoré jednofarebné displeje ich nedokázali zobraziť, aj keby mohli).

Po rokoch začali softvéroví dizajnéri a vývojári odkazovať na svoje skice toho, čo plánovali postaviť, aj ako drôtové modely. Snažili sa dosiahnuť to isté, čím boli 3D modelári: ukázať nápady lacným spôsobom. Chceli poskytnúť dizajnérom a vývojárom viacrozmerné pochopenie toho, čo navrhujú. Keď sa web presunul z dokumentov vo formáte RTF do rozhraní navrhnutých ako softvér, začali tiež návrhári webu (aj keď niektorí v priemysle pochybujú, či je čas na priekopové drôtené rámy ).



Roky som svoju základnú filozofiu drôtového rámovania popisoval pomocou dvoch prívlastkov: lacná a škaredá. Drátové modely by mali byť niečo, čo môžete rýchlo vyrobiť, a mali by ste byť schopní radikálne meniť obsah, komponenty, prioritu a usporiadanie s malými nákladmi. Drôtové rámy by tiež mali byť čo najviac zbavené štýlu. Posledná vec, na ktorú sa majú klienti pri kontrole drôtových modelov zameriavať, je farebná paleta, textúry, typografia a obrázky. Ak sa to deje, vaše drôtové rámy nie sú dosť škaredé, alebo aspoň nie dosť slabé. Drôtové modely nie sú určené na testovanie štýlu; sú určené na testovanie vášho modelu obsahu, architektúry, hierarchie a tokov. Zvážte niečo podobné štýlové dlaždice namiesto toho, ak chcete so svojím klientom otestovať alebo vytvoriť vizuálny alebo štýlový jazyk.

Pretože boli zamýšľané ako lacný nástroj na testovanie nápadov, drôtové modely boli po celé roky iba ceruzkovými náčrtmi na papieri s rýchlo vykreslenými škatuľami a škúlenými čiarami. Niektorí z nás nakoniec zistili, že ich môžeme ešte zrýchliť vďaka schopnostiam kopírovania a vkladania, ktoré si počítače dovolia, a tak sme začali používať nástroje ako OmniGraffle alebo Adobe Fireworks aby sa veci ešte viac urýchlili. Drôtené rámy napriek tomu zostali sivé políčka a skopírované a nalepené kúsky textu umiestnené na pevnom plátne. Boli to nepresné náčrty toho, čo bude webová stránka.

obal na notebook 15 palcový MacBook Pro

Pre veľké obrazovky musíte určiť samostatnú šírku mriežky



Pre veľké obrazovky musíte určiť samostatnú šírku mriežky

Pretože interakcie s webovými stránkami boli s príchodom Web 2.0 a technológií ako Ajax, ako aj s pokrokom v HTML a CSS čoraz zložitejšie, tieto náčrty webových stránok často spôsobovali nedostatok jasnosti alebo dokonca určitý stupeň nejasností.

Poznámky k záchrane! Výroba komentovaných náčrtov našich webových stránok mala veľký zmysel, pokiaľ sa samotné webové stránky zobrazovali v jednej veľkosti na pevnom plátne.

  • Stiahnite si podporné súbory pre tento návod

Odvazny novy svet

Teraz sme vstúpili do odvážneho nového sveta, v ktorom naše webové stránky žijú na neprebernom množstve zariadení s rôznymi veľkosťami obrazovky, rozlíšením a vzormi interakcie. Fixné plátno je minulosťou. Aké teda bolo naše riešenie? Väčšinou si vyberieme dve až tri veľkosti obrazovky (ktoré sa zvyčajne mapujú na pôvodné dve zariadenia so systémom iOS od spoločnosti Apple a jednu náhodnú veľkosť plochy) a postup opakujeme pre každú z nich. Načrtnite všetko, všetko anotujte, zisk!



Za predpokladu, že sa trochu naučíme z akejkoľvek veľkosti, od ktorej začneme, by sme to niekedy mali zvládnuť za menej ako trojnásobok času, aký majú naše staré drôtové modely iba pre stolné počítače, však? Nesprávne. Podľa mojich skúseností s týmto prístupom pribúdajú anotácie a zmätok. Začneme tiež tráviť čas vytváraním dokumentov, ktoré sa snažia pochopiť všetky veľkosti obrazoviek, a prezentáciou týchto náčrtov našej webovej stránky v rôznych veľkostiach spôsobom, ktorý je pre klientov ľahko pochopiteľný a stráviteľný.

Bez nastavenej šírky dedí veľká obrazovka malú šírku mriežky

Bez nastavenej šírky dedí veľká obrazovka malú šírku mriežky

Okrem skutočnosti, že sme minimálne zdvojnásobili časovú investíciu do drôtových rámcov, sme pravdepodobne ignorovali aj niekoľko kľúčových rozhodnutí, ktoré budú v určitom okamihu musieť byť urobené. Občas sa dokonca natrieme do kúta, z ktorého je veľmi ťažké vyvinúť cestu von pomocou HTML a CSS. Ak sú naše dva koncové body široké 320px a široké 1400px, existuje medzi nimi 1 080 rôznych možných šírok, pri ktorých by sa mohol rozbiť rôzny obsah, komponenty alebo dokonca typy interakcie. To je koniec koncov odkiaľ dostávame pojem „bod zlomu“. Týmto spôsobom sa spájajú drôtové rámy za ďalšie náklady, aj keď si myslíme, že naše drôtové rámy s tromi šírkami môžeme získať rýchlejšie ako iné metódy.

Zadajte responzívny drôtový model HTML

Mnoho dizajnérov sa z rôznych dôvodov bálo alebo nebolo ochotných urobiť krok k výrobe responzívnych drôtových rámcov HTML. Nasleduje krátky zoznam niektorých najbežnejších vecí, ktoré som o tomto počul od dizajnérov, a niekoľko myšlienok ku každému. Jedná sa o veľmi platné otázky a oprávnené obavy, takže na každú odpoviem individuálne. Možno vás nebudem môcť presvedčiť, aby ste vyskúšali niečo nové, ale dúfam, že dokážem vyvrátiť niekoľko mylných predstáv o tom, čo mám na mysli, keď poviem, že jedným z mojich nových výstupov v mojom procese návrhu sú responzívne drôtové rámy HTML.

  1. „So svojou súpravou nástrojov už roky vyrábam statické drôtové modely a rýchlo som sa do toho zbláznil, nechcem sa vzdať tejto rýchlostnej výhody.“ Produkcia drôtových rámcov HTML môže skutočne pridať vášmu procesu čas od okamihu, keď začnete s drôtovými rámcami, až do okamihu, keď budete mať súhlas klienta. Môže to však dobre znížiť ďalšiu komunikáciu a prácu po schválení vašich drôtových rámov, pretože statické drôtové rámy často nechávajú veľa kameňov na kameni. Keď navyše začnete s drátovým rámcovaním pre neustále sa zvyšujúci počet veľkostí obrazoviek a typov interakcií, pravdepodobne zistíte, že budete potrebovať buď viac drôtových rámov, alebo ďalšie poznámky, ktoré sa vám môžu rýchlo vymknúť spod kontroly. Maximálna rýchlosť nie je jediným cieľom v drôtových rámoch.
  2. „Nemyslím na HTML a CSS. Na vytvorenie nápadov na rozloženie a dizajn potrebujem nástroj na plátne. “ Toto je jedna z najbežnejších mylných predstáv o tom, čo mnoho ľudí označuje ako „návrh v prehliadači“. Aj keď sa mojím klientským produktom stali responzívne drôtové rámy HTML, stále načrtávam súčasť svojho procesu a myslím si, že by ste to mali často robiť.
  3. „Poznám HTML a CSS, ale nie som žiadny frontendový vývojár. Nemám čas bojovať s mediálnymi dopytmi a vytvárať responzívne obrazovky. “ Dobrou správou je, že nemusíte byť Ethan Marcotte, aby ste začali vytvárať responzívne drôtové rámy HTML. Existuje množstvo rámcov, ktoré poskytujú praktický a opakovane použiteľný kód, takže môžete začať zostavovať komponenty a rozloženia, ktoré vyhovujú vašim nápadom a náčrtom.

Malé aj veľké budú sústredené na stred, pokiaľ nepoužívajú triedu bez sústredenia

Malé aj veľké budú sústredené na stred, pokiaľ nepoužívajú triedu bez sústredenia

Vstúpte do rámca

Teraz, za predpokladu, že som vás presvedčil, aby ste si pri ďalšom projekte namočili prsty vo vodách drôtového formovania HTML, poďme sa baviť o rámcoch. Rámec všeobecne ponúka vstavaný mriežkový systém, základné štýly a vopred vyrobené, opakovane použiteľné komponenty (navigácia, prezentácie atď.). Ponúkajú tiež komunitu užitočných ľudí kvôli ich rozšírenému použitiu, dokumentácii a boli vopred otestovaní v rôznych prehľadávačoch. Existuje niekoľko rámcov, z ktorých každý má svoje klady a zápory. Tu je zoznam iba niekoľkých:

Vybral som si Foundation, aby som vám poskytol rýchly návod na vytvorenie responzívneho drôtového modelu HTML, pretože je populárny, je najskôr mobilný, je voliteľne sémantický (čo znamená, že sa môžete týkať svojich sémantických priradení založených na triedach pomocou Sass), má veľa vopred pripravených šablón a komponentov a vyvíja sa aktívne. V zásade je to jeden z najjednoduchších rámcov, pomocou ktorého môžete obísť svoju hlavu a ktorý by sa tiež dal použiť na premenu vašich drôtových modelov na konečný produkt.

Trieda size-offset-x vám umožňuje zvoliť počet stĺpcov mriežky, ktoré sa majú odsadiť

Trieda size-offset-x vám umožňuje zvoliť počet stĺpcov mriežky, ktoré sa majú odsadiť

Začíname s Foundation

Ak chcete vytvoriť svoj prvý drôtový model pomocou aplikácie Foundation, môžete jednoducho prejsť na stránku http://foundation.zurb.com a kliknúť na odkaz na stiahnutie. Dostanete sa na stránku, ktorá poskytuje množstvo možností na prispôsobenie vášho balíka, ale pre účely tohto príkladu iba klikneme na Stiahnite si Foundation CSS odkaz a ideme. Ďalšie užitočné odkazy sú Stránka dokumentácie nadácie a stránka so šablónami pre pripravené vzorky môžete znova použiť vo svojich drôtových modeloch.

Po stiahnutí súboru ZIP ho rozbaľte do ľubovoľného priečinka v systéme, do ktorého chcete uložiť drôtové rámce, a potom priečinok znova pošlite do podoby zmysluplného, ​​napríklad acme-project . Po otvorení priečinka by ste mali vidieť a help.html spis, an index.html pilník, a ľudia.txt pilník, a robots.txt súbor a priečinky pre CSS, obrázky a JavaScript. Otvor index.html súbor a použite ho ako svoj východiskový bod. Môžete jednoducho odstrániť všetok vzorový obsah v rámci značiek tela. Získate tak svoju základnú štruktúru stránky, ktorú potrebujete. Dôležité veci, ktoré je potrebné si uvedomiť, ak si vyrábate svoj vlastný .html súbory sú uvedené nižšie:

  • Pridajte znak normalizovať.css do tvojej hlavy:
  • Pridajte znak nadácia.css do tvojej hlavy:
  • Pridať modernizr.js do tvojej hlavy:
  • Pridajte jQuery a rôzne základné skripty na koniec tela dokumentu (pozrite ukážku index.html súbor pre tieto).

Systém mriežky Foundation

Prvá a pravdepodobne najdôležitejšia vec, ktorú by ste chceli pochopiť, aby ste mohli začať používať Foundation, je jej mriežkový systém. Jedná sa o mriežku s 12 stĺpcami, je úplne vnoriteľná a plynulá a môžete pracovať naozaj rýchlo, ak priradíte šírku mriežky jednoduchým pridaním triedy k položke (napríklad class = 'small-12 large-8 columns' ).

Pomocou tlačidiel push-x a pull-x môžete zmeniť poradie prezentácie mriežky

Pomocou tlačidiel push-x a pull-x môžete zmeniť poradie prezentácie mriežky

Pri použití mriežky na priradenie šírky k prvku môžete priradiť šírku pre malú aj veľkú obrazovku (dva predvolené „body prerušenia“ zabudované do nadácie). x je počet pridelených stĺpcov mriežky. Napríklad na malej obrazovke stĺpce small-x alebo na veľkej obrazovke, stĺpce large-x . Novú inštanciu mriežky môžete vytvoriť pomocou riadok triedy na obalovom prvku. V príklade nižšie teda máme prvok, ktorý by mal na malých obrazovkách pokrývať celú šírku a na veľkých obrazovkách iba polovicu šírky.

...

Odkaz na ikonu ponuky umožňuje používateľovi klepnutím odhaliť ponuku na malých obrazovkách

Odkaz na ikonu ponuky umožňuje používateľovi klepnutím odhaliť ponuku na malých obrazovkách

V našom príklade drôtového modelu, ktorý sme načrtli vyššie, máme legálnu textovú oblasť, ktorá sa na malých obrazovkách rozprestiera na celú šírku, ale na veľkých obrazovkách iba polovicu. Toto by sa dosiahlo takto:

Je tiež potrebné poznamenať, že keďže mriežka Foundation je najskôr mobilná, je potrebné priradiť iba malú šírku mriežky. Ak priradíte iba malú šírku, veľká obrazovka jednoducho zachová alebo zdedí malé priradenie. V príklade nižšie by mal prvok šírku ôsmich stĺpcov na malej aj veľkej veľkosti obrazovky.

...

Pomocou jednoduchých tried môžete tiež robiť veci, ako je napríklad odsadenie, centrovanie a tlačenie alebo ťahanie, aby ste vytvorili dizajn proti zoradeniu zdrojov. V nasledujúcom príklade by prvok na malých obrazovkách preklenul celú šírku, ale na veľkých obrazovkách by to bolo 10 stĺpcov, urobte to však pre stĺpce 2-11.

V nasledujúcom príklade by prvok preklenul prvých deväť z 12 stĺpcov na malých obrazovkách. Na veľkých obrazovkách by sa rozprestieral na šírke deviatich stĺpcov, ale bol by vycentrovaný.

...

V nasledujúcom príklade by prvý prvok preklenul posledné dva z 12 stĺpcov, zatiaľ čo druhý prvok by preklenul prvých 10 z 12 stĺpcov.

2 10, last

Nastavuje sa navigácia

Foundation má niekoľko vopred pripravených rôznych navigačných vzorov, ktoré môžete použiť vo svojich drôtových modeloch. Náš drôtový model zobrazuje v hornej časti obrazovky navigačnú ponuku, ktorá obsahuje názov webu, a na malých obrazovkách zobrazuje jednoduchý odkaz na ponuku. Našťastie existuje vopred pripravená navigačná súčasť, ktorá sa zhoduje s týmto popisom v aplikácii Foundation. Ďalej uvádzame príklad, ako to dosiahnuť. Na vrch tela pridáme nasledovné.

Poďme si rozobrať, ako sme dosiahli štýl navigácie, ktorý sme mali na mysli.

  1. Vytvor niesu prvok a pridať triedu horná lišta k tomu.
  2. Vytvorte the prvok s triedou oblasť titulu obsahovať názov našej stránky a prepínač ponuky na malej obrazovke.
  3. Pridajte názov našej stránky ako h1 v rámci prvého na prvok v našom oblasť titulu ul a pridať triedu názov k tomu.
  4. Pridaj ďalší na s názvom triedy prepínací horný panel aby obsahoval prepínač ponuky pre malé obrazovky.
  5. Pridajte triedu ikona ponuky do toggle-topbar li aby odkaz na ponuku na malých obrazovkách zobrazoval ikonu ponuky.
  6. Vytvor oddiel prvok s triedou horná priečka obsahovať skutočné menu the .
  7. V rámci horná priečka Vytvor the s triedou buď správny alebo vľavo (v závislosti od preferovaného nastavenia ponuky). Toto the bude obsahovať naše položky zoznamu s odkazmi na ponuky.

Celá ponuka v hornej časti veľkých obrazoviek má názov stránky vľavo



Celá ponuka v hornej časti veľkých obrazoviek má názov stránky vľavo

Vytvára sa naša bloková mriežka

Náš skeletový náčrt potom zobrazuje mriežku portfóliových položiek, ktorá je na malých obrazovkách široká dve položky a na veľkých tri položky. Nadácia umožňuje veľmi jednoduché vytváranie blokových mriežok tým, že poskytuje predpečené small-block-grid-x a large-block-grid-x triedy, ktorú je možné použiť na ľubovoľnom prvku ul. Na vytvorenie nášho zoznamu blokových mriežok položiek portfólia použijeme nasledujúce označenie.

Všimnete si, že sme najskôr definovali a riadok wrapper a potom kontajner nastavený na rozpätie všetkých 12 stĺpcov. Robíme to tak, aby sa mriežka blokov nepretiahla až k okraju obrazovky, ale aby sa zachovala rovnaká výplň a max-šírka ako zvyšok našich položiek definovaných v našej mriežke.

Veľké obrazovky zobrazujú tri položky na riadok; menšie obrazovky ukazujú dve



Veľké obrazovky zobrazujú tri položky na riadok; menšie obrazovky ukazujú dve

Dúfam, že sa cítite splnomocnený vyskúšať HTML wireframing. Je to úžasné obdobie byť webdizajnérom. Máme k dispozícii veľa nástrojov, vďaka ktorým sú veci, ktoré robíme, elegantnejšie efektívne a ľahšie pochopiteľné.

Slová: Jared ponchot

Tento článok sa pôvodne objavil v sieťový časopis vydanie 246.



referenčné obrázky ľudského tela pre 3D modelovanie