Обновите веб локацију 2004. Фласх-а за 2018. годину
1999. године сам направио своју прву веб страницу користећи Веб Студио 1.0. Веб Студио је био графички кориснички интерфејс. Било је могуће створити ново почетне странице и превуците и испустите елементе у њега. Затим сам успоставио бесплатан домен и хостинг са ГеоЦитиес и воила! Имао сам веб страницу. Премотавајући унапред до 2004. године, желео сам да идем даље и тако сам, као и многи други, кренуо у изградњу веб странице бенда.
Од тада се много тога променило. У овом чланку идем на путовање меморијском траком и данас ћу поново створити исту локацију за веб.
Узми датотеке за овај водич.
Па, кренимо! Прво, обично сваки нови пројекат за мене започиње са мкд, а затим са г инит. За оне од вас који ме познајете, у неком тренутку сам вам вероватно споменуо тачке. Датотеке тачака су датотеке које једноставно почињу тачком (требало ми је изненађујуће дуго да заправо успоставим ту везу!) И могу се користити у бројне сврхе. Два од мојих омиљених тачака су .алиас и .фунцтионс. Дозволите ми да разрадим ...
У басх-у је могуће креирати нови директоријум помоћу команде мкдир, а након тога ћете морати да промените цд директоријума у директоријум који сте управо креирали. Користећи код који имам у .фунцтионс датотеци, сада је могуће покренути мкд. Ово не само да ће створити нови директоријум, већ ће се и променити у тај директоријум. У почетку ово може изгледати превише, али ја волим ове микро победе. Временом, поготово ако извршавате ове наредбе неколико пута дневно, оне ускоро додају много уштеде времена.
# Create a new directory and enter it function mkd() { mkdir -p '$@' && cd '$_'; }Следећа команда, ако сте упознати са гит-ом, је једноставно гит инит, што ће нам омогућити контролу верзије пројекта. Гит користим пуно, чак и за листе за куповину! Дакле, уместо да морам сваки пут откуцати гит, додавање алиаса г = 'гит' у .алиасес је за мене лепо, мало уштеде времена.
Ових дана постоји мноштво различитих оквира и технологија. За овај пројекат желим да поједноставим ствари. Користићу ХТМЛ, ЦСС и ако буде потребно, мало ЈаваСцрипт-а. Прво, креирајмо основну ХТМЛ ознаку. Али чекај! Застанимо и размислимо на тренутак.
Понекад програмери, укључујући и мене, могу бити веома узбуђени због пројекта и желе одмах да пукну и одмах крену према тастатури да напишу код. Међутим, сматрам да ово често није најбољи приступ. Волим да прво имам на уму пројекат. Чинећи ово и имајући много јаснију визију пројекта у целини, сматрам да то омогућава много боље доношење одлука. На пример, ако бих заронио право у код, могао бих наићи на проблем који бих онда морао да вратим и рефакторујем. Постоји неколико различитих исхода са овим приступом. Прво, може бити да морам у потпуности избрисати код и почети изнова; друго, ако наставим на овај начин, можда ћу завршити са „кодом шпагета“ што ће у будућности отежати ажурирање, отклањање грешака и резултирати губитком перформанси; треће, понекад то испадне у реду и на крају добијете бољи код, али бих рекао да су први и други исход далеко чешћи.
Овај пројекат је прилично мали; има неколико страница: Почетна, Вести, Концерти, Медији, Албуми, Везе и заједнички делови међу овим страницама: заглавље, навигација, садржај типографије, листе, слике, видео снимци. Приликом првобитне израде Фласх локације 2004. године, ствари су биле много једноставније у погледу тестирања. Сајт је направљен у Фласх-у, за Фласх на стоном рачунару са мишем и тастатуром. Данас је употреба интернета за мобилне уређаје и таблете чешћа него за стоним рачунаром, а овај тренд наставља да расте.
Да бих ово учинио бољим искуством за онога ко прегледа сајт, узећу неколико ствари у обзир на почетку пројекта и користићу мобилну стратегију. Да бих то урадио, и опет, пре писања било ког кода, извадићу старомодну добру оловку и папир. Прво, записујем мапу сајта; при томе постоје нека кључна подручја која мислим да могу да се побољшају. На пример, мој оригинални сајт састојао се од различитих страница за сваки албум бенда. У то време имали су три албума и тако су се лепо уклопили у навигацију. Сада им предстоји још много тога, а потенцијално и више, тако да већ у мислима размишљам о начинима како да сајт учиним још будућим доказом (старац, али добра ствар је Дан Цедерхолм Непробојни веб дизајн ).
Сада имам грубу идеју у глави мапе сајта и страница, следеће је да направим неке ниско-фи жичне оквире. Из претходног искуства у изградњи многих респонзивних веб локација, мобиле долази са занимљивим дизајнерским изазовима, наиме како да креирају навигацију, али и даље омогућавају људима да виде главни садржај веб локације. Упоредићу исход дизајна који смо сви заволели / мрзели: приступ хамбургеру. Међутим, додаћу мали преокрет. У оригиналном уметничком делу коришћене су птице, па ћу, уместо стандардне иконе менија за пљескавице, користити уметнине за птице које ће активирати мени и отворити и затворити крила као начин да покажем да ли је мени активан или не.
Ствари у мом уму сада почињу да се обликују, са идејом како ће људи моћи да се крећу по локацији. Сада ћу размислити како би саме странице могле изгледати. Почевши од почетне странице, прилично је једноставно, са садржајем типографије. Даље, вести - опет садржај типографије, потенцијално слике, а затим нека врста навигације за преглед старијих постова. Свирке - листа предстојећих свирки са везама за куповину карата. Када је реч о медијима, осврћући се на претходну страницу, имао сам „слике“ и „видео записе“ као два различита одељка, али овде мислим да има места за побољшање и да се консолидују као „медији“. Албуми, а, да, албуми - сада се ту исплати овакво нешто. Видите, страница Албуми има типографију и слику и биће јој потребна нека врста навигације за преглед старијих постова. Звучи познато? Звучи слично истој структури као и страница вести! Имајући овај преглед највишег нивоа, могу да погледам и размислим о стварима на више зрнастих компонената, неки би чак могли рећи атомски дизајн нивоа, ако сте упознати са радом Бреда Фроста.
Сад имам идеју како ће веб локација радити на мањим уређајима и елементима за вишекратну употребу, време је да поновимо поступак са већим уређајима. Како је веб локација прилично једноставна, а с обзиром на то да су жичани оквири већ створени за мобилне уређаје, видим да су већи уређаји прилично слични - осим што сада имамо мало додатне просторије, тако да можемо проширити подручја садржаја и такође укључити бочну навигацију.
Бочна навигација је део странице који ме од самог почетка највише радује. Инспиришући се оригиналним уметничким делима бенда, изградио сам навигацију као силуету дрвета са лишћем. Сваки лист је био дугме које је водило до друге странице веб локације. Такође, док бисте се помицали и удаљавали од листа, лист би оживљавао, падајући на земљу. Фласх је био сјајан у овоме; звало се твеенинг. Можете да поставите елемент на један кључни кадар у интерфејсу на временској оси, направите други кључни кадар даље по временској линији и додате путању за елемент који следи. Кренувши мало даље, мењајући путеве, трајање и брзину падајућег лишћа, завршио сам са нечим чиме сам био веома задовољан.
Али сада не користимо Фласх, па како то да радимо? Често скочим на ЦодеПен или ЈС Бин. За оне који нису свесни, ЦодеПен и ЈС Бин су мрежне услуге које вам омогућавају брзо кодирање и чување. Обично видим ЦодеПен као више дизајнерски вођен, а ЈС Бин више фокусиран на ЈаваСцрипт. За овај пројекат користићу ЦодеПен за креирање стабла за навигацију из неколико разлога. Прво желим да започнем са израдом главне верзије странице за мобилне уређаје, а уствари радећи ово, ако би ствари биле критичне, могао бих да завршим са мвп-ом. Иако постоје побољшања на веб локацији која би могла да се постигну додавањем лепе навигације и анимације листовима, продукција ће потрајати дуже. Предност рада у ЦодеПену за навигацију кроз стабло значи да је изолован од главне локације и базе кода. Ако ствари постану незгодне са довршавањем, могу да сачувам где се налазим, наставим са израдом главне странице, а затим се вратим на навигацију. Понекад откријем да моја подсвест може наставити да размишља о томе, одмичући се од проблема или чак спавајући на њему. Тада се, по повратку на проблем, појављује решење.
СВГ-ови! Волим СВГ-ове. Раније сам у Фласх-у извукао лиснато средство у Иллустратору. Невероватно је да сам и даље имао радни ЦД са оригиналним уметничким делом и успео сам да га отворим. Ових дана користим Скетцх и одлично је отворио датотеку. Сад имам имовину листа спремну за извоз као СВГ-ове. Зашто СВГ-ови? Пуно је разлога. Ако бисмо користили јпг или гиф на Ретина уређају, морали бисмо да доставимо и већу имовину, јер би у супротном изгледале замагљено. Такође, са СВГ-овима можемо користити ЦСС. Ово је сјајно и омогућава нам да једноставно променимо боју СВГ-а користећи мало ЦСС-а, уместо да морамо да креирамо другу слику. То значи да га је лакше одржавати, а као бонус је и ефикаснији. Ако нисте упознати са СВГ-овима, топло бих вам препоручио да их прочитате и невероватан рад мог доброг пријатеља, Сара Соуеидан .
Пошто су средства за дрво и лишће сада на месту, последња ствар коју треба додати је анимација. Постоји неколико приступа које бих могао предузети са овим. Један би био да останем веран оригиналном Фласх путу између мене. То би значило реплицирање путања и коришћење СВГ-а, а затим потенцијално даљи СВГ рад са путањама и аниматеМотион. Свиђа ми се ова идеја са носталгичне тачке гледишта, али ЦСС се много појавио током година, а сада имамо на располагању трансформацију и превођење, па би ово могао бити други приступ. Крећући ствари корак даље, могли бисмо чак додати и неки ЈаваСцрипт који би насумично одабрао падајуће лишће.
Обе опције звуче добро, али ја се њишем према рути коју више води ЦСС. Ево још једне предности коришћења ЦодеПена, могу брзо да испробам један приступ. Ако се испостави да је компликованије него што сам првобитно мислио или се не чини у реду, могу испробати други приступ са мало изгубљеног времена. Заправо се испоставило да је то одлична идеја! Још увек тражим могућности за ово - погледајте пројекат на ГитХуб-у за коначни резултат.
Са сада сређеном навигацијом кроз дрво, окренуо сам се првом приступу мобилном уређају, градећи навигацију. Ако сте упознати са Сасс-ом, више него вероватно сте наишли на променљиве. Али да ли сте знали да су променљиве сада доступне у ЦСС-у? Они имају прилично пристојна подршка за прегледаче у Цхроме, Едге, Сафари и Самсунг Интернет такође! Како се трудим да се придржавам основног ЦСС-а и избегнем потребу за додатним зависностима, ово је сјајна вест. Па како бисмо ово применили? На врху табеле стилова декларишем своје променљиве:
:root { --grey: #ccc; --red: #fb0f0c; --grid-size: 10px; }Сад кад су проглашени, могу да их позовем, па би на пример подешавање боје позадине тела изгледало овако:
body { background: var(--grey); }Правећи овај корак даље и помажући у поравнању мреже, празнини, вертикалном ритму, можда сте приметили да сам такође дефинисао променљиву величине мреже. Варијабле изузетно добро раде са цалц-ом и то изгледа отприлике овако:
// Standard variable being used, outputs 10px. padding-top: var(--grid-size); // Adding calc to multiply the variable unit by 2, outputs 20px. padding-bottom: calc(var(--grid-size) * 2);Када су стилови мобилне навигације завршени, позабавимо се функцијама за њихово скривање и приказивање. За дугме за пребацивање применићемо ознаку ознаке, а затим ћемо у навигацијску ознаку додати улаз:
Band Website
Home
Toggle Користећи следећи ЦСС, можемо приказати и сакрити навигациони мени; јер желимо етикету у заглављу, можемо да користимо ~ ака тилда или (У + 007Е), тако да то функционише, а да га први елемент одмах не наследи.
#mobileNav_toggle[type=checkbox] { display: none; } #mobileNav_toggle[type=checkbox]:checked ~ .mobileNav_list { display: block; }Када је мобилна навигација завршена, време је да се примене неке прилагодљив веб дизајн . Додајући главни садржај странице, а затим користећи Респонсиве Виев у Цхроме Девелопер Тоолс, моћи ћу да повећавам ширину оквира за приказ док не осетим да има довољно простора за адекватно држање навигације кроз дрво. На крају ово износи 600 пиксела, а за ово можемо користити упит за медије:
.treeNav { display: none; } @media screen and (min-width : 600px) { .treeNav { display: block; } }Скоро тамо! Коначно, да би навигација кроз дрво била поред главног подручја садржаја, искористићу Флекбок:
.container { display: flex; } .treeNav { display: none; min-width: 140px; }Сада навигација кроз дрво заузима 100% висине, а садржај ради исто и седи десно од ње. То значи да, без обзира на то колико дуго садржај постаје, никада неће тећи испод стабла. Ако желите да сазнате више о Флекбоку, препоручио бих да се пријавите флекбок.ио једним и јединим Вес Босом. Много тога може учинити!
То је све за шта тренутно имам времена, али још увек постоји пуно ствари које бисмо могли учинити да овај пројекат учинимо још бољим. Ако имате питања или вам се свидео чланак, поздравите на Твиттер-у или кроз мој сајт , или ми пошаљите захтев за повлачење на ГитХуб!
Овај чланак је првобитно објављен у броју 304 од нето , најпродаванији светски часопис за веб дизајнере и програмере. Купите издање 304 овде или претплатите се овде .
Повезани чланци:
