Перебудова флеш-пам'ятник 2004 року на 2018 рік

У 1999 році я побудував свій перший веб-сайт, використовуючи Web Studio 1.0. Web Studio - графічний користувальницький інтерфейс. Можна було створити новий Цільова сторінка і перетягніть елементи в ньому. Потім я створив безкоштовний домен і хостинг з Geocities і Voila! У мене був веб-сайт. Швидко вперед до 2004 року, я хотів піти далі і тому, як і багато інших, я виклав, щоб побудувати веб-сайт групи.

• Підтвердили 12 загальних запитань JavaScript

Багато чого змінилося. У цій статті я збираюся взяти на себе поїздку вниз пам'ять та відтворити той самий сайт для Інтернету сьогодні.

Отримайте файли Для цього підручника.

Отже, почнемо! По-перше, загалом кожен новий проект для мене починається з MKD, а потім GAL EAL. Для тих з вас, хто мене знає, у якийсь момент я, напевно, згадував вам Dotfiles. Dotfiles - це файли, які просто починаються з крапки (це взяло мені напрочуд довгий час, щоб фактично зробити це з'єднання!), І вони можуть бути використані для ряду цілей. Два з моїх улюблених dotfiles є .aliasas і .функції. Дозвольте мені розробити ...

У Баш, можна створити новий каталог за допомогою команди MKDIR, після чого ви повинні змінити компакт-диск до каталогу, який ви тільки що створили. Використовуючи код, у мене у моїх файлах. Застойки, тепер можна запустити MKD. Це не тільки створить новий каталог, але також змінився у цьому каталозі. Це може здатися спочатку переповнення, але я люблю ці мікро-перемоги. З часом, особливо якщо запустити ці команди кілька разів на день, вони скоро додадуть до багатьох збережених часів.

 # Створіть новий каталог і введіть його
Функція MKD () {
    mkdir -p "$ @" & amp; & amp; CD "$ _";
} 

Наступна команда, якщо ви знайомі з GIT, це просто git init, який дозволить нам керувати проектом. Я використовую git багато, навіть для списків покупок! Тому, а не маючи напустити git щоразу, додавши псевдонім g = "git" до. Паліаз знову є приємним, невеликим заставкою для мене.

У ці дні є безліч різних рамок та технологій. Для цього проекту я хочу тримати речі просто. Я збираюся використовувати HTML, CSS, і якщо потрібно посипати JavaScript. По-перше, давайте створимо основну розмітку HTML. Але почекайте! Давайте зупинимося і думати на хвилину.

Іноді розробники, які самі входили, можуть бути супер-схвильовані про проект і негайно вимагати розтріскування і йти прямо для клавіатури, щоб написати код. Однак я вважаю, що це часто не найкращий підхід. Я люблю огляд першого огляду. Робіть це і маючи набагато чітке бачення проекту в цілому, я вважаю, що це дозволяє набагато краще прийняття рішень. Наприклад, якщо я пішов прямо в код, я міг би зіткнутися з проблемою, яку я повинен був повернутися назад і рефактор. Є кілька різних результатів з цим підходом. По-перше, це може бути, що я повинен видалити код цілком і знову знову; По-друге, якщо продовжуючи в цій моді, я можу потрапити з "Спагетті", що робить його важким у майбутньому, щоб оновити, налагоджувати та призвести до втрати ефективності; По-третє, іноді вона працює добре, і ви в кінцевому підсумку з кращим кодом, але я, як правило, кажуть, що перша і друга наслідки набагато частіше.

Цей проект досить малий; Він має кілька сторінок: додому, новини, концерти, медіа, альбоми, посилання та загальні частини серед цих сторінок: заголовок, навігація, типографічний вміст, списки, зображення, відео. Коли спочатку побудував флеш-сайт у 2004 році, все було набагато простіше з точки зору тестування. Сайт був побудований у Flash, для спалаху на настільному комп'ютері за допомогою миші та клавіатури. У ці дні, мобільний та планшетний інтернет-ресурс частіше, ніж на настільному комп'ютері, і ця тенденція продовжує зростати.

Для того, щоб зробити це кращий досвід для того, хто переглядає сайт, я збираюся взяти кілька речей на початку проекту та скористатися мобільною першою стратегією. Для того, щоб зробити це, і знову, перш ніж писати будь-який код, я збираюся вийти з хорошого старомодного ручка та паперу. По-перше, я пишу карта сайту; При цьому є деякі ключові області, я думаю, можна покращити. Наприклад, мій оригінальний сайт складався з різних сторінок для кожного з альбомів групи. У той час у них були три альбоми, і так підходять красиво в навігації. Тепер вони мають набагато більше і потенційно, щоб прийти, тому вже в моєму розумі, я думаю про те, як зробити сайт більш майбутнім доказом (oldie, але goodie - це dan cederholm's Куленепробивний веб-дизайн ).

Тепер у мене є груба ідея в моїй голові Sitemap та сторінок, наступне, щоб створити деякі бездротові каркас. З попереднього досвіду побудови багатьох чутливих сайтів, мобільний телефон поставляється з цікавими проблемами дизайну, а саме як створити навігацію, але все одно дозволяють людям переглядати основний вміст сайту. Я збираюся йти разом з результатами дизайну, який ми всі виросли, щоб любити / ненависть: на підхід меню Burger. Однак я збираюся додати трохи повороту. Оригінальні твори мистецтва використовували птахи, тому, а не стандартний значок меню Burger, я збираюся використовувати пташине мистецтво, яке буде активувати меню та відкрийте та закрийте крила як спосіб, щоб вказати, чи є меню активне чи ні.

Речі, на мій погляд, зараз починають форму, з уявленням про те, як люди зможуть орієнтуватися по сайту. Я зараз буду думати про те, як самі фотографії можуть виглядати. Починаючи з домашньої сторінки, це досить просто, з вмістом типографіки. Далі, новини - знову зміст типографіки, потенційно зображення, а потім деяка навігація, щоб переглянути старі посади. GIGS - список майбутніх концертів з посиланнями на придбання квитків. Для засобів масової інформації, оглядаючись на попередньому сайті, у мене були "зображення" та "відео", як два різних розділи, але тут я думаю, що є місце для поліпшення та консолідації як "медіа". Альбоми, Ах, Так Альбоми - Тепер це де це роблячи таку річ виплачується. Ви бачите, сторінка альбомів має типографіку та зображення, і вам потрібна якась навігація, щоб переглянути старі посади. Звук знайомий? Звучить дуже схоже на таку ж структуру, як і сторінку новин! Маючи цей верхній рівень огляду, я можу подивитися і подумати про те, що на більш гранульованому, компоненті, деякі могли навіть сказати атомний дизайн Рівень, якщо ви знайомі з роботою Бредського морозу.

Тепер я маю уявлення про те, як сайт буде працювати на менших пристроях та багаторазових елементах, настав час повторити процес з великими пристроями. Оскільки сайт досить простий, і з Wireframes, який вже створений для мобільних пристроїв, я бачу, що більші пристрої є досить схожими - крім цього у нас є додаткова кімната, тому ми можемо розширити зони вмісту, а також включати сторону навігації.

Сторона навігація - це трохи сайту, який з зсуву я найбільше збуджуюсь. Приймаючи натхнення з оригінальної ілюстрації групи, я побудував навігацію як силует дерева з листям. Кожен лист був кнопкою, яка пов'язана з іншою сторінкою сайту. Також, як ви прокручули і захопили від листа, лист би анімація, падаючи на землю. Спалах був великий у цьому; Це було названо Tweening. Ви можете встановити елемент за одним ключем у інтерфейсі на часовій шкалі, створіть іншу клавіатуру далі вздовж часової шкали та додати шлях до елемента, який потрібно виконати. Вживаючи речі трохи далі, змінюючи шляхи, тривалість і швидкість падаючого листя, я закінчився з тим, що я був дуже задоволений.

Але тепер ми не використовуємо Flash, так як ми це робимо? Нерідко я стрибаю до кодечка або JS bin. Для тих з вас, хто не знає, Codepen та JS Bin - це онлайн-послуги, які дозволяють швидко кодувати та заощаджувати. Я, як правило, бачу кодечка як більш конструкторський світлодіод, а JS Bin Більше JavaScript зосереджена. Для цього проекту я буду використовувати Codepen для створення навігації на дереві з кількох причин. По-перше, я хочу почати створити головну мобільну версію сайту, і насправді, роблячи це, якщо речі були критичними, я міг би закінчитися МВП. Незважаючи на те, що на сайті є вдосконалення, які могли б зробити, додавши приємну навігацію та анімацію, це займе більше часу. Перевага роботи в Codepen для навігації дерева означає, що він виділяється з основного сайту та кодової бази. Якщо речі отримують складні з завершенням, я можу заощадити, де я перебуваю, продовжуюсь з головним об'єктом будівництва, а потім повернутися до навігації. Іноді я вважаю, що під час виїзду від проблеми, або навіть спати на ньому, мій підсвідомість може продовжувати думати про це. Потім повернувшись до проблеми, рішення представляє себе.

SVGS! Я люблю svgs. Раніше в Flash, я витягнув аркуш листя в Illustrator. Дивно, що я все ще мав робочий компакт-диск з оригінальними творами мистецтва і зміг його відкрити. У ці дні я використовую ескіз, і це зробило велику роботу з відкриття файлу. Тепер у мене є активи листя, які готові бути експортом як SVGS. Чому svgs? Є багато причин. Якщо ми повинні використовувати JPG, або GIF на пристрої сітківки, ми також повинні забезпечити більші активи, інакше вони будуть виглядати розмитим. Також, з SVGS, ми можемо використовувати CSS. Це чудово і дозволяє нам просто змінювати колір SVG, використовуючи трохи CSS, а не створювати іншу активність зображення. Це означає, що це легше підтримувати, і як бонус, це також більш виконавець. Якщо ви не знайомі з SVGS, я дуже рекомендую читати на них і неймовірну роботу від мого хорошого друга, Сара Суєїд .

З деревами та листяними активами зараз на місці, остання річ, яку потрібно додати, - це анімація. Є кілька підходів, я міг би взяти з цим. Можна було б бути вірним оригінальному шляху спалаху tween я зробив. Це означатиме повторення шляхів та використання SVG, а потім потенційно подальшого використання SVG з шляхами та анімацією. Мені дуже подобається ця ідея з ностальгічної точки зору, але CSS приїхав багато протягом багатьох років, і ми зараз перетворюємось і перекладу в нашому розпорядженні, тому це може бути ще одним підходом. Беручи речі на крок далі, ми могли б навіть додати деякий JavaScript, який буде рандозуватися з падаючими листям.

Обидва варіанти звучать добре, але я коливаюся до більшої кількості маршруту CSS. Ось ще одна перевага використання Codepen, я можу швидко піти і спробувати один підхід. Якщо виявляється, що це складніше, ніж я спочатку думав, або це не відчуває себе правильно, я можу спробувати інший підхід з невеликим часом витрачається. Насправді це виявилося чудовою ідеєю! Я все ще шукаю варіанти для цього - будь ласка, зверніться до проекту на GitHub для кінцевого результату.

Завдяки навігації Tree Sorted, я повернувся до мобільного першого підходу, створивши навігацію. Якщо ви знайомі з SASS, ви, швидше за все, зустрічаються змінні. Але чи знаєте ви змінні тепер доступні в CSS? Вони мають Досить пристойна підтримка браузера У Chrome, Edge, Safari та Samsung Інтернет також! Як я намагаюся зберегти основні CSS і уникнути потреби в будь-яких додаткових залежності, це чудові новини. Отже, як би ми це реалізували? У верхній частині листа стилю я заявляю мої змінні:

: корінь {
  --гри: #CCC;
  - # FB0F0C;
  - Розмір: 10px;
} 

Тепер, коли вони заявляють, я можу їх зателефонувати, тому, наприклад, встановлення кольору фону тіла буде виглядати так:

 Тіло {
  фон: var (- сірий);
} 

Приймаючи цей крок далі і допомагати з вирівнюванням сітки, білий простір, вертикальний ритм, ви, можливо, помітили, що я також визначив змінну розміру сітки. Змінні працюють надзвичайно добре з калькуляцією, і це виглядає трохи щось подібне:

 // Стандартна змінна, що використовується, виводить 10px.
Верхня передача: VAR (- Grid-size);

// Додавання кал, щоб помножити змінну одиницю на 2, виходи 20px.
Підкладка-дна: Calc (Var (- Grid-size) * 2); 

Завдяки стилям мобільного навігації, давайте вирішимо функціональність, щоб приховати та показувати його. Для переключення кнопки ми застосуємо тег етикетки, а потім у навігації Nav ми додамо вхід:

& lt; заголовок класу = "заголовок" & gt;
  & lt; h1 class = "header_title" & gt; веб-сайт групи & lt; / h1 & gt;
  & lt; h2 class = "header_currentpage" & gt; home & lt; / h2 & gt;
  & lt; label for = "mobilenav_toggle" class = "mobilenav_toggle" & gt, toggle & lt; / label & gt;
& lt; / заголовок & gt;

& lt; nav class = "mobilenav" & gt;
  & lt; вхідний тип = "прапорця" id = "mobilenav_toggle" роль = "кнопка" & gt;
  & lt; ul class = "mobilenav_list" & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; клас = "mobilenav_listitemlink" href = "#" & gt; home & lt; / a & gt; & lt; / li & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; клас = "mobilenav_listitemlink" href = "#" & gt; про & lt; / a & gt; & lt; / li & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; клас = "mobilenav_listitemlink" href = "#" & gt; portfolio & lt; / a & gt; & lt; / li & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; клас = "mobilenav_listitemlink" href = "#" & gt; новини & lt; / a & gt; & lt; / li & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; клас = "mobilenav_listitemlink" href = "#" & gt, зв'язатися & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt; 

Використовуючи наступні CSS, ми можемо показати та приховати навігаційне меню; Оскільки ми хочемо, щоб етикетка в заголовку, ми можемо використовувати ~ aka tilde або (U + 007E), тому він працює, не відразу ж успіху першим елементом.

 #mobilenav_toggle [type = прапорець] {
  Дисплей: Ні;
}

#mobilenav_toggle [type = прапорець]: перевірено ~ .mobilenav_list {
  Дисплей: блок;
} 

Завдяки завершенню мобільного навігації, настав час реалізувати деякі Реактивний веб-дизайн . Додавання в основний вміст для сайту, потім використовуючи чуйний вигляд у інструментах розробника Chrome, я можу збільшити ширину ViewPort, поки я не відчуваю, що є достатньо місця, щоб адекватно тримати навігацію. Це закінчується в 600px, і для цього ми можемо використовувати медіа-запит:

 .Treenav {
  Дисплей: Ні;
}

Екран @media і (Min-ширина: 600px) {
  .Treenav {
    Дисплей: блок;
  }
} 

Майже там! Нарешті, для навігації дерева сидіти поруч з основною зоною контенту, я збираюся використовувати FLEXBOX:

 .container {
  Дисплей: Flex;
}

.Treenav {
  Дисплей: Ні;
  хв. Ширина: 140px;
} 

Тепер дерев'яна навігація займає 100% висоти, з вмістом робить те ж саме і сидить праворуч від нього. Це означає, що незалежно від того, як довго зміст стає, він ніколи не буде протікати під навігацією дерева. Якщо ви хочете дізнатися більше про FLEXBOX, я рекомендую перевірити flexbox.io до одного і тільки wes bos. Там багато це може зробити!

Це все, що у мене є час на даний момент, але все ще є безліч речей, які ми могли зробити, щоб зробити цей проект ще кращим. Якщо у вас є які-небудь питання, або сподобалася стаття, скажіть привіт на Twitter або через мій сайт або надішліть мені запит на Github!

Ця стаття була опублікована у випуску 304 сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Купити випуск 304 тут або Підписатися тут .

Пов'язані статті:

• 5 порад для Super-Fast CSS
• Анімація SVG з JavaScript
• Розуміння властивості відображення CSS