Перейти к основному содержимому

Сайт микрорайона «Спутник», Уфа (2014 год)

Андрей Аксёнов

Доработка сайта микрорайона «Спутник». Доработка шаблона страницы по предоставленному (рисованному) дизайну. Изменение общего шаблона страниц и их элементов. Создание шаблонов для элементов содержимого (FCE) и самих элементов. Установка фотогалереи и функционала всплывающих окон (lightbox) на сайте. Работа 2014 года.

Домашняя страница сайта sputnikufa.ru. Доработка страницы по рисованным шаблонам.
Разработка внутренней страницы сайта "Как купить квартиру".
Разработка фотогалереи на сайте. Галерея в виде ленты со всплывающими при щелчке окнами - лайтбоксами.
Типовое всплывающее окно, lightbox, с увеличенным изображением.
Разработка страниц раздела сайта «Планировки и цены» с характеристикой квартиры.
Разработка раздела сайта «Планировки и цены» с характеристикой квартиры.
Раздел сайта «Планировки и цены»: лайтбокс, увеличенный план квартиры.
Раздел сайта «Планировки и цены»: технологии строительства.

Заказчик: 

Веб студия «АНВЭБ»

Исходные данные

Доработка существующего сайта на TYPO3. Сайт работает на TYPO3 4.5, шаблон сделан на templavoila. TS шаблоны с настройками находятся в файлах.

Заказчик предоставил отрисованные макеты  (файлы PSD, послойно) нового дизайна шаблонов страниц и компонентов страниц.

Задача

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

Ход работы

Задача выполнялась поэтапно, по мере поступления рисунков от дизайнера. В процессе выполнения рисунки были адаптированы для использования в макете, а также изменения коснулись файла стилей CSS. Все это было с успехом использовано при создании трех кнопок-ссылок на внутренние разделы, выведенные на всех основных страницах сайта. Страница "Как купить квартиру" создавалась через адаптацию макета TYPO3, создавались рисунки и производилась настройка CSS.

Не возникло проблем и с кнопкой "Контакты", дополняющей главное меню, но выделяющейся на основном фоне. Дополнительный пункт был добавлен через TypoScrypt шаблон страницы в TYPO3 и адаптаций CSS.

Фотогалерея для сайта

Для фотогалереи было установлено и адаптировано под шаблон сайта типовое расширение TYPO3 jpCarousel, которое отлично подошло для решения задачи. Для всплывающих окон с содержимым - lightbox, также было использовано типовое решение - расширение TYPO3 fancybox. Все выбранные расширения используют уже ставшую стандартом JS библиотеку jQuery.

Удобство для редакторов сайта: типовые шаблоны для содержимого

Непосредственно для TYPO3 были разработаны пара шаблонов страниц («Технологии строительства» и «Внутренняя отделка») и четыре шаблона для элементов содержимого FCE (элементы списка квартир и элементы подробного описания квартир для каждого из двух новых разделов), а также размечены в модуле templavoila. Таким образом редакторы сайта получили возможность заполнения разделов однотипными элементами.

Нетиповые для TYPO3 элементы

Кроме того, на страницах с подробным описанием квартир заказчик пожелал сделать нестандартное меню в виде карусели. Его решено было делать на все том же коде уже используемого ранее расширения jpCarousel, хотя и дополненным и подстроенным. Тем самым уменьшалось количество "дополнительного" кода, подгружаемого на страницы.

С кнопок «Технология строительства» и «Внутренняя отделка» должны открываться всплывающие окна с характеристиками применяемых при строительстве данных квартир технологий и отделки, соответственно. Здесь нужно предусмотреть и удобство правки содержимого этих самых характеристик для редакторов сайта. Это с успехом было решено путем использования для выводимых характеристик специальных страниц и связи их с полями формы настроек элементов подробного описания страниц.

Итог: все элементы разделов просто создаются и редактируются, а на страницах сайта выводятся в едином стиле.

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