Я искал, как я мог бы оказать положительное влияние, поделившись знаниями. Думаю, я нашел первый шаг к этому: создание открытого онлайн-курса. Чтобы выполнить этот проект, мне нужна собственная платформа, чтобы иметь возможность распространять их бесплатно. В этой серии блогов мы шаг за шагом увидим разработку статического блога.

В этой статье я опишу, к чему стремлюсь в качестве конечного продукта.

Нам нужен статический блог, а это значит, что бэкэнд не требуется, все хранится и отображается в браузере. Мы будем использовать фреймворк javascript под названием VueJS. Это очень легкий фреймворк, к которому добавлено множество различных компонентов. Он очень модульный и в то же время легкий. Мне очень нравится программировать с этим фреймворком.

С точки зрения пользовательского опыта, мы будем очень простыми. Мы будем генерировать наш блог динамически. Что это означает? Позвольте мне объяснить вам на примере.

Допустим, я хочу создать блог для публикации контента об одном из моих любимых языков программирования — JavaScript. Идея в том, что я хотел бы иметь объект json для описания моих данных; Например

Чтобы быть самым ясным в моем объяснении, вот структура блога, которая должна быть создана этим конфигурационным файлом. Вот разные каркасы:

Первый каркас — это тот, который описывает целевую страницу блога, а также любую целевую страницу категории. Фактически, на целевой странице будет презентационное видео всего блога. В каждой категории будет видео-презентация обучающей серии, над которой мы будем работать. Если у категории есть вложенные категории, маленькие квадратики с надписью heading внутри представляют различные категории или серию видео.

Второй каркас представляет собой пользовательский интерфейс серии руководств. Это будет очень хороший плейлист в таком пользовательском интерфейсе, как Udacity:

Вайрфреймы — это хороший способ передать дизайн интерфейса, а также четко изложить его на бумаге, что позволит избежать изменения дизайна 10 раз и в конечном итоге получить бессмысленное лоскутное одеяло из разных дизайнов.

Увидимся в следующем посте, где мы можем начать играть с VueJS 2 ;).