Tartalom
- A kóddal történő tervezés előnyei
- Először az adatok
- Mobil jóság ingyen
- Közös nyelv megtalálása
- Tanuljon gyorsabban
- Gyors iteráció
- Gyorsabb idő az indításra
- Miért a HTML5?
- A mágikus adat- attribútum
- CSS3 - ez az új Photoshop
- Sass + Iránytű: varázslatosan finom
- jQuery: ó, igen
- Keretek
- Végső gondolatok
Ez a cikk először a .net magazin 235. számában jelent meg - ez a világ legkeresettebb webes tervezői és fejlesztői magazinja.
Soha nem voltam nagy rajongója annak, hogy a kelleténél több munkát végezzek. Hajlamos vagyok a módszereket és az eszközöket azok alapján értékelni, hogy hatékonyabbá tudnak-e tenni engem vagy a csapatom. Milyen gyorsan jutnak el hozzánk egy működő termékhez? Mennyire hatékonyak a kommunikációban? Elmaradnak az utunktól?
Az évek során módosítottam a tervezési folyamatomat és az eszközeimet. Úgy képzelem, ezt továbbra is folytatom. Ez a természete a technológia és az internet tervezésének. Ez az ipar folyamatosan fejlődik; folyamatunknak és eszközeinknek is fejlődniük kell.
A HTML5 és a CSS3 megkönnyíti a tervezési folyamat nagyobb áttérését az áramlási irányban - távol a Photoshop-tól, és inkább az élő, lélegző tervezés felé. Az olyan eszközök, mint az Foundation, a Bootstrap és a jQuery, könnyebben megközelíthetők a tervezési folyamatban, a kódolás során.
A kóddal történő tervezés előnyei
Először is nem támogatom a Photoshop vagy bármely más látványterv szerkesztő eldobását a munkafolyamatból. Ehelyett azokra az előnyökre összpontosítok, amelyek előbb-utóbb a design kódba történő átültetésével járnak.
Először az adatok
Ami mindig is tetszett a HTML-ben történő tervezésnél, az az, hogy ösztönzi a gondolkodást az adatok elsődleges perspektívájából. Ezzel szemben az olyan rajzprogramokkal, mint az Illustrator, az OmniGraffle vagy a Balsamiq, egy mezővel indul, és kitölti az adatokkal.
A HTML-ben megalkotja a DOM-ot (dokumentumobjektum-modellt), hasonlóan a tartalomjegyzék elkészítéséhez. Visszatérés a valódi információtervhez, értelmes hierarchiákkal. A HTML5 új lépéssel tovább lép új szemantikai elemek hozzáadásával: cikk, szakasz, fejléc, félre, lábléc és így tovább. Ez az adat-első megközelítés remekül keveredik a mobil első, adaptív tervekkel.
Mobil jóság ingyen
Ha ezt olvassa, valószínűleg mobilra tervez. És nagy eséllyel meg kell terveznie egy-két űrlapot. A HTML5 használatával szerencséd van. A HTML5 előtt a beviteli típusok nagyrészt szöveg- vagy jelszómezők voltak. A HTML5 számos további bemeneti típust vezetett be, többek között:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Ami igazán fantasztikus ezekben a további, egyedi beviteli típusokban, az az, hogy az iOS és az Android mobil böngészői felismerik őket, és automatikusan kicserélik a kontextus szempontjából tudatos billentyűzetet - nincs szükség speciális jQuery bővítményekre vagy feltörésekre. Ja, és ha a böngészője nem tudja, mi az input type = "email"> , akkor alapértelmezés szerint csak szövegbevitel.
Közös nyelv megtalálása
"Félelmetes, hogy tervezőink és fejlesztőink hogyan tudnak ugyanazon a nyelven dolgozni" - John Drago, az Inflection alkalmazásfejlesztője.
Nézze meg, hogy ez jól hangzik-e. Konferencia teremben vagyok, fél tucat szerveroldali alkalmazás fejlesztővel, akik Ruby, Python, Java vagy .NET kódolással képesek köröket kódolni körülöttem. Én vagyok az egyetlen tervező. Néhány javaslatomat eleinte elutasították, mivel azok végrehajtása túl bonyolult. Odamegyek a táblához, és elkezdek HTML-t és CSS-t írni a táblára, hogy miként lehetne megvalósítani a tervet. Hirtelen megváltozik a beszélgetés hangja, és az egyik fejlesztő vonakodva mondja: "Nos, igen - ha így csináljuk, akkor működhet."
A tervezési folyamat több részének kódba helyezése javította a fejlesztőkkel folytatott beszélgetéseket. Hozzáadódik a tisztelet szintje, ha tudod, hogyan kell a terveket kóddal elkészíteni. Nem kell szakértőnek lenned, hogy kivívd ezt a tiszteletet. Míg a HTML és CSS képességeim sziklaszilárdak, a JavaScript képességeim a legjobb esetben is közepesek. És nem szégyellem ezt bevallani. A frontend vagy szerveroldali fejlesztőkkel való együttműködés során mégis óriási előny, hogy közös nyelven beszélhetünk, vagy félúton találkozhatunk.
Tanuljon gyorsabban
Míg a drótvázak és a vizuális kompozitok segíthetnek a tervezésben, ezek a statikus tárgyak elméleti jellegűek. Hányszor próbáltad megmagyarázni valakinek egy interakciót, csak azért, hogy válaszoljon: "Azt hiszem, látnom kell." Minél hamarabb eljut egy prototípusig, amivel az emberek kölcsönhatásba léphetnek, annál hamarabb megtapasztalhatja a tervezést és megnézheti, hogy működnek-e az ötletek.
Gyors iteráció
Mikor volt utoljára a gyártásba szállított végleges terv, amely pontosan megfelelt a Photoshop comp-jának? Szinte soha. A digitális terméktervezésnél a változás folyamatosan történik. Ezenkívül a változtatások, például a címsorok méretének növelése 22ptől 24pt-ig pár tucat képernyőn, órákig is eltarthatnak a Photoshopban. Az intelligens objektumok valamilyen szintű objektum-orientált kialakítást nyújtanak a Photoshopban. Sajnos az általam ismert vizuális tervezők többsége nem használja ki eléggé az intelligens tárgyakat. A CSS-szel, mivel ez a tervezés szisztematikusabb megközelítését ösztönzi, a tipográfiai változtatások órák helyett perceket vesznek igénybe.
Mi a helyzet az összes gomb lineáris gradiensének megváltoztatásával? Vagy akkora, mint egy határ? Mit szólnál ahhoz, ha a négyzetes sarkokról 2 képpontos lekerekítettekre váltanál? A Photoshop alkalmazásban ez órákig is eltarthat, és még mindig kódolnia kell. A kódos tervezés képessége segít elkerülni a visszatérést a Photoshopba a vizuális tervezés ismétléséhez. Ha ezeket a változásokat a CSS3 és a Sass használatával (melyeket a cikk későbbiekben ismertetem) a kódba helyezi át, akkor azok valós időben valósulhatnak meg, és csak néhány percet vehetnek igénybe.
Gyorsabb idő az indításra
Az évek során, amikor a tervezési munkafolyamatomat nagyobb mértékben átvezettem a kódokba, valódi javulást tapasztaltam - körülbelül 20-30% -kal csökkentem a piacra jutás idejét. Minél többet csinálom ezt, annál kevesebb időt töltenek az erőfeszítések másolásával. Kevesebb ciklust töltök azzal, hogy belépek a Photoshopba vagy a Tűzijátékba, majd kódban megismételem a munkát.
Egy bizonyos ponton a tervezésnek össze kell kapcsolódnia valamilyen háttérprogrammal, legyen az CMS, Rails alkalmazás vagy valami más. Mivel tervezőmunkám nagy része kódban van, az integráció előbb-utóbb megtörténik. Pár évvel ezelőtt az egyik ügyfelem, a PointRoll öt nap alatt vált prototípustól gyártásig.
Miért a HTML5?
A HTML5 könnyebb, mint a HTML korábbi verziói. Vegyük például a dokumentumtípus deklarációt. A HTML korábbi verzióiban a DOCTYPE valahogy így nézett ki:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
És hat különböző változat létezett. Szerencsére a HTML5 DOCTYPE így néz ki:
! DOCTYPE HTML>
Komolyan. Ez az. Megdöbbentően egyszerű.
Normál HTML oldal létrehozásakor számos közös elem létezik, például fejléc, fő tartalmi terület, oldalsáv és lábléc. Biztos vagyok benne, hogy látott már ilyet:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" oldalsáv "> / div> / div> div id =" lábléc "> / div>
Semmi szokatlan ott. De miután tartalommal van feltöltve, ez a sablon div levessé válik. Ezzel szemben a HTML5 új szemantikai elemeivel sokkal egyszerűbb és könnyebben beolvasható képet kap, például:
header> nav> / nav> / header> cikk> félre> / félre> / cikk> lábléc> / lábléc>
Nézd. Valami, aminek van értelme.
A mágikus adat- attribútum
A HTML5 egy újabb fantasztikus horoggal rendelkezik, amely lehetővé teszi a saját szemantikai jelentésének kidolgozását: a adat-. Korábban, ha valami értelmes dolgot szeretett volna rendelni egy DOM elemhez, akkor csak azonosítókra, osztályokra és szerepekre korlátozódott.
Sajnos az azonosítónak egyedinek kell lennie. Az osztályok univerzálisak (yippee!), De használatuk gyorsan rendetlenséggé válhat. A szerepek egy kihasználatlan eszköz, amely jelentős jelentést jelent az ARIA számára. A közelmúltban az adatokat használom egy eseménykövető elemző platformra, amelyet az Inflectionnél fejlesztünk.Nagy rajongói vagyunk a tervek tesztelésének. Ha olyan alkalmazásokon vagy oldalakon dolgozunk, amelyek nagy interaktivitással rendelkeznek, szeretnénk részletesebb betekintést nyújtani az oldalon belüli ügyfelek elkötelezettségébe.
Írd be a adat-. Segítségével hozzárendelhet, továbbadhat és bekapcsolódhat egy „meghatározhatja a sajátját” jelentésmodellbe. Tehát például ezt megteheti:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Csatolhatunk egy hallgatót JavaScript-sel az oldalhoz, és bármikor nyomon követhetjük ezt a tevékenységet, amikor az ügyfél lebeg, vagy rákattint erre a gombra. Ahelyett, hogy csak azt tudnánk nyomon követni, hogy valaki regisztrált az OAuth-on keresztül a Twitteren, láthatjuk, hogy a Facebook, majd a Twitter, majd a LinkedIn felett lebegtek, majd végül úgy döntöttek, hogy a Twittert választják az OAuth-modelljükhöz.
Képzelje el, hogy kiterjeszti ezt egy olyan webhelyre, mint a Pinterest, vagy az új Myspace-kialakítás, ahol az ügyfelek csempéket húznak, hogy az érdeklődés alapján átrendezzék őket. Vagy esetleg elrejti azokat a csempéket, amelyek nem érdeklik őket adat- attribútum lehetővé teszi további szemantikai jelentésréteg hozzáadását vagy hozzárendelését a definiálható dolgokhoz. Az Ajaxra erősen támaszkodó webhelyek és alkalmazások számára ez korlátlan lehetőségeket nyit meg.
CSS3 - ez az új Photoshop
A CSS3 egy teljesen új szintű megjelenést hozott létre, amelyhez háttérképek, szeletek és a hírhedt „tolóajtó” technika kellett. Szerencsére ez mind a múlté.
Vessünk egy pillantást arra, hogy készítsünk egy képzeletbeli gombot, amely lineáris színátmenettel, lekerekített sarkokkal, olyan szöveges árnyékkal rendelkezik, amely szép betűs sajtóhatást kölcsönöz neki, és fénylik az egérrel. Ezeknek a technikáknak a megtanulása hosszú utat fog megtenni. Mindegyikük külön-külön, vagy különféle kombinációkban felhasználható a weben manapság aktuális vizuális forróság szinte bármelyikének kihasználására.
Először tegyünk néhány beállítást az alapértelmezetten gomb> és input type = "beküldés"> elemek. Feltéve, hogy az egyik szabványos CSS-visszaállítást használja, csak egy kis méretezési és légzési helyiséget adunk hozzá.
/ * Gombok gombjai, akiknek megvan a gombja. ========================================= * * / gomb, írja be [type = "submit"] {magasság: 2.7em; párnázás: .4em .7em; vonal-magasság: 1,9; }
Profi tipp: A beküldött gombok és bemenetek bonyolultak lehetnek az átformáláshoz. Megállapítottam, hogy a vonal magasságát 1,6-os vagy annál nagyobb értékre állítva elkerülheted azt a feltörést, hogy extra gomb> címke.
Most 'kijavítottuk' a gomb kérdésünket, létrehozhatunk egy .btn osztály adjon nekünk egy szép tiszta gombot lekerekített sarkokkal, lineáris színátmenettel, körvonallal és magasnyomású megjelenéssel.
.btn {display: inline-block; szegély: 1 képpont szilárd # d4d4cc; -moz-határ-sugár: 4px; -webkit-border-radius: 4px; határ-sugár: 4px; párnázás: .4em .7em; háttér: # edeff2; háttér: -webkit-gradiens (lineáris, 0% 0%, 0% 100%, kezdve (#fefefe), color-stop (0,55, # edeff2), ((# e4e6e9)); háttér: -moz-lineáris-gradiens (középső felső, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0, 2em 0; -webkit-box-shadow: rgba (160 172 187, .7) 0 0, 2em 0; box-shadow: rgba (160,172,187, .7) 0 0, 2em 0; szín: # 6c7786; betűméret: 1.1em; text-shadow: #fefefe 1px 0 1px; vonal-magasság: 1.375em; kurzor: mutató; }
Ezután egy szép lebegő hatás, finom ragyogással a box-shadow módszer:
.btn: lebeg, .btn: fókusz {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; háttér: # e6e9eb; háttér: -webkit-gradiens (lineáris, 0% 0%, 0% 100%, kezdve (# f7f7f7), color-stop (0.55, # f6f6f7) és (# e6e9eb) között; háttér: -moz-lineargradient (középső felső, # f7f7f7, # f6f6f7 55%, # e6e9eb); szín: # 45484b; szöveg-árnyék: rgb (255,255,255) 1px 1px 0; border-color: # c9c9c0; }
Most nem vagyok nagy rajongója a lineáris gradiens kód megírásának. Hosszú és zavaros. Amint láthatja, csak a verzióját vettem fel -moz, -webkit, és a standard modell. Ha be akarja venni az -o és -ms verziókat, meg kell dupláznia a kódot.
Két másik lehetőség van. Az egyik egy CSS3 generátor; számos elérhető az interneten, köztük a ColorZilla is. De ha egy kicsit fel akarja fokozni a játékát, fontolja meg a Sassba merülést: az Iránytűvel kombinálva ez egy istenveret.
Sass + Iránytű: varázslatosan finom
Megállhat a CSS4 egyszarvú kiadás reményében. Itt van és Sass + Compass néven. A Sass a Szintaktikusan fantasztikus stíluslapok rövidítése: a CSS3 összes hagyományos előnyét a változók, keverők, bővítők és egyéb finomságok örömeivel örökölheti.
Nemrégiben átalakítottam egy 5000 soros CSS fájlt, amelynek több mint 30 változata volt ugyanazon a kék árnyalaton. A Sass-szal minden változatot ezzel a kóddal helyettesítettem:
szín: $ kék;
Meghatározásával $ kék az én _változók.scss fájlt, létrehozhatok egy alapértelmezett színt, amelyre minden CSS vagy SCSS fájl hivatkozhat. Bárki használhat CSS-t $ kék és nem kell aggódnia a szemcsepp használatával, a hexakód, vagy az RGB, RGBA vagy HSL szín megtalálásával.
Emlékszel arra a lineáris gradiens kódra? Ahelyett, hogy több kódsort írna, mit szólna ehhez:
@include háttér (lineáris gradiens (# b1cfdc, # 7a9cac));
Hagyja, hogy a Sass és az Iránytű elvégezze a súlyos emelést, és hozza létre a megfelelő szintaxist az Ön számára: kész. Tegyük fel, hogy egy szín sötétebb vagy világosabb változatát szeretné. Mozgathatja a szemcseppet a Photoshop alkalmazásban, vagy csak használhatja a Világosítás / sötétítés parancsokat a Sassban:
@include háttér (lineáris színátmenet (sötétebb ($ litegray, 2%), sötétebb ($ törtfehér, 5%)));
Ez egy lineáris gradienst hoz létre, 2% -kal sötétítve $ lite-szürke és 5% sötétedett piszkosfehér. Voil! Nem is kellenek a HEX vagy RGB kódok.
jQuery: ó, igen
Be kell vallanom egy vallomást. A JavaScript megfélemlített. Aztán megtaláltam a jQuery-t. Nem állítom, hogy JavaScript-guru lennék, de nagyon bízom benne, hogy szinte bármilyen átállást vagy funkciót képesek leszokni a jQuery használatához.
Vegyük például egy másodlagos telefonszám megjelenítésének lehetőségét a képernyőn az Új szám hozzáadása linkre kattintva. A jQuery használatával egyszerűen ezt írja:
// - Progresszív felfedés - // $ (’. Új szám’). Kattintson (function () {$ (’. Alt-szám’). FadeIn (’gyors’);});
Valami fejlettebbet keres? Valószínűleg van hozzá plug-in. Az alapvető viselkedésmódok egyszerűek, és a bonyolultak a jQuery segítségével elérhetők.
Keretek
A két legerősebb keret ma a Foundation és a Bootstrap. Mielőtt elutasítaná a CSS keretrendszereket, hadd kérdezzek valamit. Használja a jQuery-t? Ruby on Rails? Django? Minden keret.
Csakúgy, mint a jQuery és az RoR, az Alapítvány és a Bootstrap is abból született, hogy felismertük, hogy szép számmal vannak olyan dolgok, amelyeket újra és újra végzünk (például alaphelyzetbe állítás, tipográfia, rácsok, űrlapok, gombok, navigáció és listák). Az Foundation és a Bootstrap egyaránt segítséget nyújt az adaptív kialakításhoz a segítő osztályok használatával. Mindkettő jól dokumentált és közúti tesztelt, ezért magabiztosan használhatja őket.
Az egyik legfontosabb különbség a kettő között: A Bootstrap a CSESS előfeldolgozás LESS rendszerén, míg az Foundation a Sasson alapul. Inkább a Sass helyett a LESS, a további képességei miatt, de mind a Sass, mind a LESS darabokra szaggatja a hagyományos CSS-t.
Egy utolsó gondolat a keretekről. Azok számára, akik nem akarják megörökíteni valaki más kereteinek felesleges duzzanatait, fontolják meg a meglévők leszedését és a csupasz csíkig való leválasztását, vagy a cseresznye szedését néhány közül, hogy a sajátjukat tekerjék. Akárhogy is, igazából nincs ok minden alkalommal a semmiből indulni.
Végső gondolatok
Nagyobb irányítást akarsz a terved végeredménye felett? További folyamatok áthelyezése a kód felé. A HTML5 végül ad némi értelmet a DOM-nak. Jó razzia értelmetlen DOCTYPEs a divitis. A CSS3 az új Photoshop: lineáris gradiensek, borderradius és box-shadows FTW! Olyan eszközökkel, mint a Bootstrap, az Foundation, a Sass és a jQuery, a tervezésnek a kód felé történő áthelyezése soha nem volt ilyen egyszerű.
Fedezze fel a HTML5 55 csodálatos példáját a Creative Bloq oldalon.
