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

Сайт микрорайона «Спутник», Уфа (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, хотя и дополненным и подстроенным. Тем самым уменьшалось количество "дополнительного" кода, подгружаемого на страницы.

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

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

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

Заказать!