Восстановите Flash на 2004 год на 2018 год

В 1999 году я построил свой первый веб-сайт, используя веб-студию 1.0. Веб-студия была графическим пользовательским интерфейсом. Можно было создать новый Страница посадки и перетащите элементы в него. Затем я создал бесплатный домен и хостинг с Geocities и Voila! У меня был сайт. Быстро вперед до 2004 года, я хотел пойти дальше и так, как и многие другие, я отправился, чтобы построить веб-сайт группы.

• 12 Общих ответов на JavaScript ответили

Много изменилось с тех пор. В этой статье я собираюсь отправиться в путешествие по переулке памяти и воссоздать тот же сайт для Интернета сегодня.

Получить файлы Для этого учебника.

Итак, начнем! Во-первых, вообще каждый новый проект для меня начинается с MKD, а затем G init. Для тех из вас, кто знает меня, в какой-то момент, я, наверное, упомянул вас до dotFiles. DotFiles - это файлы, которые просто начнутся с точки (потребовалось у меня удивительно много времени, чтобы на самом деле сделать это соединение!) И их можно использовать для ряда целей. Два из моих любимых дотфилов являются. Ализас и. Функции. Позвольте мне уточнить ...

В Bash можно создать новый каталог, используя команду mkdir, затем после этого вам придется изменить компакт-диск в каталог, который вы только что создали. Используя код у меня в файле. Функции теперь можно запустить MKD. Это не только создаст новый каталог, но также также изменился в этот каталог. Сначала это может показаться излишним, но я люблю этих микробеденьев. Со временем, особенно если вы запускаете эти команды несколько раз в день, они вскоре поднимают много сохраненного времени.

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

Следующая команда, если вы знакомы с GIT, просто Git init, что позволит нам версию контролировать проект. Я много использую Git, даже для списков покупок! Так что вместо того, чтобы каждый раз набрать Git каждый раз, добавив псевдоним g = "git" в. Ализа снова - это хорошая, маленькая экономия времени для меня.

В наши дни есть множество различных рамх и технологий. Для этого проекта я хочу держать вещи простыми. Я собираюсь использовать HTML, CSS и если требуется посыпать JavaScript. Во-первых, давайте создадим базовую HTML Markup. Но ждать! Давайте остановимся и подумать на минуту.

Иногда застройщики, я включал, может быть супер-взволнован проектом и хочет немедленно взломать и идти прямо на клавиатуру для записи кода. Тем не менее, я нахожу это часто не лучший подход. Я люблю сначала помнить обзор проекта. Делая это и имея гораздо более четкое видение проекта в целом, я обнаружил, что это позволяет намного лучшее принятие решений. Например, если я прявился прямо в код, я мог бы столкнуться с проблемой, которую я тогда должен вернуться и рефакторировать. Есть несколько разных результатов с этим подходом. Во-первых, может быть, что я должен полностью удалить код целиком и начать снова; Во-вторых, если продолжение в этой моде, я могу в конечном итоге с «кодом Spagetti», что делает его трудным в будущем обновлять, отладки и привести к потере производительности; В-третьих, иногда он работает хорошо, и вы в конечном итоге с лучшим кодом, но я склонен сказать, что первые и вторые результаты гораздо более распространены.

Этот проект довольно маленький; У него есть несколько страниц: Home, News, Gigs, СМИ, Альбомы, Ссылки и Общие части среди этих страниц: Заголовок, навигация, содержание типографии, списки, изображения, видео. При первоначальном уровне создание флеш-сайта в 2004 году все было намного проще с точки зрения тестирования. Сайт был построен в Flash, для вспышки на настольном компьютере с помощью мыши и клавиатуры. В наши дни используемое использование мобильных и планшетов чаще встречается чаще, чем на настольном компьютере, и эта тенденция продолжается подняться.

Чтобы сделать это лучшим опытом для того, кто называет сайт, я собираюсь принять во внимание несколько вещей в начале проекта и использовать мобильную первую стратегию. Для этого, и снова, прежде чем писать любой код, я собираюсь получить хорошую старомодную ручку и бумагу. Во-первых, я пишу карту сайта; При этом есть некоторые ключевые области, которые я думаю, может быть улучшен. Например, мой оригинальный сайт состоял из разных страниц для каждого из альбомов группы. В то время у них было три альбома и хорошо вписывается в навигацию. Теперь у них есть намного больше и потенциально больше, чтобы прийти, так что уже в моих мыслях я думаю о том, какие способы сделать сайт больше будущего доказательства (Олди, но Дуби Дэн Сидрхольм Пуленепробиваемый веб-дизайн ).

Теперь у меня есть грубая идея в моей голове карты сайта и страницы, в следующий раз состоит в том, чтобы создать несколько низких кадров. Из предыдущего опыта здания много адаптивных сайтов, мобильный телефон поставляется с интересными вызовами дизайна, а именно как создать навигацию, но все равно позволит людям просматривать основное содержание сайта. Я собираюсь пойти вместе с результатом дизайна, который мы все выращивали в любви / ненависти: подход меню Burger. Тем не менее, я собираюсь добавить немного поворота. Оригинальные произведения искусства использовали птиц, поэтому, а не значок стандартного меню Burger, я собираюсь использовать Artwork Bird Work, которые будут активировать меню и открывать и закрывать свои крылья как способ указать, активен ли меню или нет.

Вещи в моих мыслях теперь начинают делать форму, с идеей того, как люди смогут перемещаться по сайту. Теперь я собираюсь подумать о том, как сами могут выглядеть сами страницы. Начиная с домашней страницы, это довольно просто, с содержанием типографии. Далее новости - снова оформление содержимого, потенциально изображения, а затем какая-то навигация для просмотра старых сообщений. Gigs - список предстоящих концертов со ссылками на покупку билетов. Для СМИ, оглядываясь назад на предыдущем сайте, у меня были «изображения» и «видео», как два разных раздела, но здесь я думаю, что есть комната для улучшения и консолидации как «СМИ». Альбомы, ах, да альбомы - сейчас это где делать такую ​​вещь, окупается. Вы видите, страница альбомов позволила типографии и изображение, и вам понадобится какая-то навигация для просмотра старых сообщений. Звучит знакомо? Звучит много как такая же структура, как страница новостей! Наличие обзора этого верхнего уровня, я могу посмотреть, и думать, что все в более гранулированном, компонент, некоторые даже могли бы сказать атомный дизайн Уровень, если вы знакомы с работой Брэда Фроста.

Теперь у меня есть представление о том, как сайт собирается работать над меньшими устройствами и элементами многоразового использования, пришло время повторить процесс с большими устройствами. Поскольку сайт довольно прост, а с каркасами, уже созданными для мобильных устройств, я вижу, что более крупные устройства, которые являются довольно похожими - кроме сейчас, у нас есть дополнительная комната, поэтому мы можем расширить зоны контента, а также включить боковую навигацию.

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

Но теперь мы не используем Flash, так как мы это делаем? Нередко я прыгаю в кодепен или JS bin. Для тех из вас, кто не знает, Codepen и JS Bin - это онлайн-сервисы, которые позволяют вам быстро код и сохранить. Я склонен видеть кодепен как больше дизайна светодиодов, а JS Bin больше фокусировки JavaScript. Для этого проекта я буду использовать CodePen, чтобы создать навигацию по дереву по нескольким причинам. Во-первых, я хочу начать создавать основную мобильную версию сайта, и на самом деле, делая это, если бы дела было критично, я мог в конечном итоге с MVP. Хотя на сайте есть улучшения, которые могут быть сделаны, добавив приятную листовую навигацию и анимацию, это займет больше времени для производства. Преимущество работы в кодепене для дерева навигации означает, что он изолирован с основного сайта и кодовой базы. Если все будет сложно завершить его, я могу сэкономить, где я нахожусь, продолжаю на основе основного строительства сайта, а затем вернуться к навигации. Иногда я обнаруживаю, что уходит от проблемы, или даже спать на нем, моя подсознание может продолжать думать об этом. Затем вернусь к проблеме, решение представляет себя.

SVGS! Я люблю SVGS. Ранее во вспышке я вытянул активов листьев в Illustrator. Удивительно у меня все еще был работающий компакт-диск с оригинальными произведениями искусства и смог открыть его. В наши дни я использую эскиз, и это сделала отличную работу по открытию файла. У меня теперь есть листовые активы, которые все готовы к экспорту как SVG. Почему SVGS? Есть много причин. Если бы мы использовали JPG или GIF на устройстве сетчатки, мы также должны были поставлять большие активы, в противном случае они будут выглядеть размытым. Также с SVGS мы можем использовать CSS. Это отлично и позволяет нам просто изменить цвет SVG, используя немного CSS, а не для создания другого актива изображения. Это означает, что легче поддерживать, и как бонус, это также более исполнительный. Если вы не знакомы с SVGS, я бы настоятельно рекомендую читать на них и невероятную работу от моего хорошего друга, Сара Суаидан Отказ

С деревом и листовыми активами сейчас на месте, последняя вещь для добавления - это анимация. Есть несколько подходов, которые я мог бы взять с этим. Было бы, чтобы оставаться верным оригинальной траектории Flash Tween, который я сделал. Это означало бы репликацию путей и используя SVG, а затем потенциально дальнейшую работу SVG работать с путями и анимативом. Мне очень нравится эта идея с ностальгической точки зрения, но CSS наступил на протяжении многих лет, и теперь мы преобразовываем и переводимую в наше распоряжение, поэтому это может быть еще один подход. Делайте вещи еще дальше, мы могли бы даже добавить какой-нибудь JavaScript, который раннизирует падающие листья.

Оба варианта звучат хорошо, но я покажусь к большему маршруту CSS-LED. Вот еще одно преимущество использования кодепена, я могу быстро пойти и попробовать один подход. Если получается, что это сложнее, чем у меня изначально думал, или он не чувствует себя правильно, я могу попробовать другой подход с небольшим количеством потраченным впустую. На самом деле это оказалось отличной идеей! Я все еще смотрю на такие варианты - пожалуйста, обратитесь к проекту на GitHub для окончательного результата.

С навигацией дерева сейчас сортируется, я вернулся к мобильному подходу, наращивая навигацию. Если вы знакомы с SASS, вы более чем столкнулись с переменными. Но знаете ли вы переменные теперь доступны в CSS? У них есть Довольно достойная поддержка браузера В Chrome, Edge, Safari и Samsung Internet! Поскольку я пытаюсь сохранить основные CSS и избежать необходимости любых дополнительных зависимостей, это отличные новости. Так как же мы это осуществили? В верхней части стиля я объявляю мои переменные:

: root {
  - зеленый: #CCC;
  : # FB0F0C;
  - Грид-размер: 10px;
} 

Теперь, когда они объявляются, я могу назвать их, поэтому, например, установка цвета фона цвета будет выглядеть так:

 Тело {
  Фон: var (- серый);
} 

Принимая этот шаг вперед и поможет с выравниванием сетки, белого пространства, вертикального ритма, вы, возможно, заметили, что я также определил переменную размера сетки. Переменные работают очень хорошо с Calc, и это выглядит немного подобное:

 // Стандартная переменная используется, выводит 10px.
PADDING-TOP: VAR (- Размер сетки);

// Добавление CALC для умножения переменной единицы на 2, выводит 20px.
Пальки-дно: Calc (Var (- Размер сетки) * 2); 

С помощью стилей мобильной навигации завершены, давайте решим функциональность для сокрытия и показывать ее. Для кнопки Trggle мы применяем тег метки, затем в Tag Nav Mitc, мы добавим вход:

& lt; класс заголовка = "заголовок" и gt;
  & lt; h1 class = "header_title" & gt; сайт группы & lt; / h1 & gt;
  & lt; h2 class = "header_currendpage" & GT; HOME & LT; / H2 & GT;
  & lt; этикетка для = "mobilenav_toggle" Class = "mobilenav_toggle" и GT; TOGGLE & LT; / MALK & GT;
& lt; / header & gt;

& lt; nav class = "MobileNav" & gt;
  & lt; тип ввода = "флажок" id = "MOBILENAV_TOGGLE" ROTE = "Кнопка" & gt;
  & lt; ul class = "MOBILENAV_LIST" & GT;
    & lt; li class = "mobilenav_listitem" & lt; класс = "mobilenav_listitemlink" href = "#" & gt; home & lit; / a & gt;
    & lit; li class = "MOBILENAV_LISTITEM" & GT; & lt; a class = "mobilenav_listitemlink" href = "#" & gt; aT; / li & gt;
    & lt; li class = "mobilenav_listitem" & lt; class = "mobilenav_listiteMlink" href = "#" & gt; портфолио & lit; / a & gt; & lt; / li & gt;
    & lt; li class = "mobilenav_listitem" & lt; a class = "mobilenav_listiteMlink" href = "#" & gt; News & lit; / a & gt;
    & lit; li class = "MOBILENAV_LISTITEM" & GT; a; a class = "mobilenav_listiteMlink" href = "#" & gt; контакт & lt; / a & gt;
  & lt; / ul & gt;
& lt; / nav & gt; 

Используя следующие CSS, мы можем показать и скрыть меню навигации; Поскольку мы хотим, чтобы этикетка в заголовке мы можем использовать ~ aka Tilde или (U + 007E), поэтому он работает, пока не будучи сразу преуспеть на первом элементе.

 #mobileNav_toggle [type = checkbox] {
  Дисплей: нет;
}

#mobileNav_toggle [type = checkbox]: проверено ~ .mobilenav_list {
  Дисплей: блок;
} 

С мобильной навигацией завершен, пришло время реализовать некоторые Отзывчивый веб-дизайн Отказ Добавление в основной контент для сайта, а затем с использованием отзывчивого представления в инструментах разработчиков Chrome Image I в состоянии увеличить ширину ViewStor, пока я не буду чувствовать себя достаточно места, чтобы адекватно удерживать навигацию дерева. Это заканчивается на уровне 600 пикселей, и для этого мы можем использовать медиа-запрос:

 .treeenav {
  Дисплей: нет;
}

@media экран и (мин ширина: 600px) {
  .treenav {
    Дисплей: блок;
  }
} 

Почти готово! Наконец, для навигации на дереве сидеть рядом с основной зоной контента, я собираюсь использовать Flexbox:

. Container {
  Дисплей: flex;
}

.treenav {
  Дисплей: нет;
  Мин-ширина: 140px;
} 

Теперь навигация дерева занимает высоту на 100%, причем контент делает то же самое и сидеть справа от него. Это означает, что независимо от того, сколько времени становится содержание, он никогда не будет течь под навигацией дерева. Если вы хотите узнать больше о Flexbox, я бы порекомендовал проверить flexbox.io. по одному и только WES BOS. Там много может сделать!

Это все, что у меня есть время на данный момент, но есть еще много вещей, которые мы могли бы сделать, чтобы сделать этот проект еще лучше. Если у вас есть какие-либо вопросы, или понравилась статья, пожалуйста, скажите привет в Твиттере или через мой сайт или пришлите мне запрос на голосе на GitHub!

Эта статья была первоначально опубликована в вопросе 304 сеть Самый продаваемый журнал мира для веб-дизайнеров и разработчиков. Купить проблему 304 здесь или же Подписаться здесь Отказ

Статьи по Теме:

• 5 советов для супер-быстрых CSS
• Animate SVG с JavaScript
• Понимание свойства отображения CSS