Целью данного задания явлется восстановление (или приобретение) навыков оформления информации с помощью HTML-документов. А также обучение использованию компонент, предоставляемых CSS-фреймворком Zurb Foundation.

Учебники HTML

Для тех, кто не знаком с HTML, настоятельно рекомендуется прочесть учебник данного языка разметки. Для тех, кто знаком с HTML, настоятельно рекомендуется просмотреть учебники для восстановления знаний.

Задача

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

Сайт должен состоять из следующих страниц:

  • Главная страница. На ней должен отображаться список статей (блог-постов), размещённых на сайте. На вашем сайте должна находится как минимум одна статья, можно больше.
  • Визитная карточка. Краткая информация о себе. Информация может включать список различных достижений (научных работ (публикаций), приложений, выступлений на конференциях, награды и т.п.). Этот список содержит ваши личные достижения. Можно указывать любые, но в разумных пределах.
  • Статья, посвящённая разработке первой лаборатоной работы. Размер статьи - не менее 400 слов.

Все страницы должны содержать шапку, в которой должны быть ссылки на основные разделы сайта (главная страница, визитная карточка).

На главной странице должен выводиться список аннотаций статей. Аннотация включает в себя название, описание и ссылку на страницу с полным содержанием. При нажатии на ссылку должна открываться страница с полным содержимым статьи. В вашем случае будет всего лишь одна аннотация, ведущая на нужную страницу.

Пример блога: http://ru-linux.livejournal.com/

Предлагаемый подход к решению задачи

  • Создайте каталог site.
  • Скачайте с сайта Zurb Foundation полный стартовый набор разработчика.
  • Распакуйте содержимое архива в каталог site с помощью команды unzip foundation.zip -d ~/site, где
    • foundation.zip путь к скачанному файлу;
    • ~/site путь к созданному на первом шаге каталогу.
  • Установите джем bundler, инициализируйте его конфигурационный файл.
  • Установите с помощью Bundler джемы adsf и adsf-live. Его не надо устанавливать под данной ОС. Однако в результате опция --live-reload сервера adsf, используемая в следующем пункте, перестаёт работать.
  • Запустите в корне каталога site приложение adsf: adsf --live-reload.
  • В веб-браузере откройте ссылку http://localhost:3000. Если вы всё сделали верно, то вы должны увидеть содержимое страницы index.html.
  • Переименуйте файл index.html в foundation-intex.html.
  • Создайте файл index.html, в котором реализуйте:
    • Навигационное меню, включающее ссылки на текущую страниц и страницу с описанием достижений, построенную на основе Top Bar.
    • Центральное содержимое страницы, построенное на основании XY Grid.
    • Центральная колонка должна содержать в себе элементы типа Card. У вас должен быть 1 элемент, ссылающися на страницу со статьёй и её кратким описанием.
    • В мета-информации в качестве названия укажите «Личный блок Автора». Вместо слова «Автора» напишите своё имя и фамилию.
    • Удостоверьтесь, что страница отображается корректно, открыв её в браузере.
  • Скопируйте файл index.html в файл cv.html. Данный файл должен содержать сводку ваших достижений.
    • Замените содержимое центральной колонки с карточками, описывающими ваши достижения.
    • В качестве названия страницы укажите «Список достижений».
    • Удостоверьтесь, что вы можете спокойно переходить между главной страницей и страницей достижений.
  • Скопируйте файл index.html в файл lab-one.html. Данный файл должен содержать вашу статью.
    • Замените содержимое центральной колонки отформатированным и структурированным содержимым статьи. Для структурирования статьи используйте теги h1, h2, h3, p.
    • В качестве названия страницы укажите «Создание простого приложения на Ruby».
    • Удостоверьтесь, что можете корректно переходить между всеми страницами вашего сайта.