796

Разработка веб-сайта Департамента градостроительной политики города Москвы

Реферат

Информатика, кибернетика и программирование

Используемые программные средства для разработки. Общие технологические требования. Схема сайта и его информационное содержимое. Общий шаблон для страниц. Схема публичной части сайта. Администрирование и организация прав доступа

Русский

2013-01-06

287 KB

9 чел.

Разработка веб-сайта Департамента градостроительной политики города Москвы.

  1.  Используемые программные средства для разработки
  2.  Общие технологические требования
  3.  Схема сайта и его информационное содержимое
    1.  Общий шаблон для страниц
    2.  Схема публичной части сайта
    3.  Администрирование и организация прав доступа
  4.  Техническое размещение сайта, конфигурация сервера


Используемые программные средства для разработки

Для обработки HTML/PHP/JavaScript/CSS кода используется редактор Adobe Dreamweaver из пакета CS5. Данный редактор позволяет создавать, модифицировать HTML разметку как в режиме WYSIWYG (режим Design), так и в режиме прямой модификации кода (режим Source). Также редактор позволяет подключать CSS таблицы и редактировать их одновременно со связанными HTML страницами. Имеется встроенный FTP клиент для выгрузки готовых материалов сайта на сервер. Однако рекомендуется пользоваться специализированным программным обеспечением для доступа к ftp-узлам.

Создание баннеров, анимированных меню и прочего активного содержимого будет осуществляться в редакторе Adobe Flash CS5. Данный редактор обладает максимально возможным функционалом для соответствующей работы, оснащен шаблонами баннеров, меню и других объектов. Язык ActionScript позволит обрабатывать любые события и реализовывать сложные графически-программные конструкции на Flash.

Клип-арт, логотипы кнопок и прочие растровые графические элементы страницы создаются и редактируются в Adobe Photoshop CS5 / GIMP.

Для синхронизации и управления файлами на удаленном сервере, будет использоваться FileZilla – бесплатный FTP клиент. Он обладает большим функционалом и возможностью автоматизации процессов взаимодействия между клиентским компьютером и ftp-узлом.

Для редактирования и доступа к базе данных на сервере, используется веб-клиент PHPMySQL, либо бинарный клиент для WindowsMySQL Administrator. Данные средства позволяют производить вручную обновление удаление, создание таблиц и полей в них. Корректировку «битых» данных, выполнять резервное копирование и другие действия.

  1.  Общие технологические требования.

Разработка сайта ведется на компьютерах с ОС Windows c аппаратной конфигурацией соответствующей требованиям используемых программных средств.

Использование ftp-клиента и sql-клиента (описанных в предыдущем пункте) подразумевает наличие прав доступа к соответствующим серверам.

При разработке веб-сайта, необходимо вести отладку в наиболее популярных браузерах:        MS Internet Explorer, Mozilla Firefox, Opera, Apple Safari, Google Chrome. Задачей отладки является реализация максимально одинакового отображения разметки веб-сайта, а также корректное и стабильное выполнение скриптов и активного содержимого.

Страницы должны быть оптимизированы под разрешение 1024х768. Основанное разрешение сайта: 1280px по ширине.

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

Должна выполняться проверка HTML кода в стандарте DTD XHTML 1.0 Strict и проходить валидацию с помощью инструмента (http://validator.w3.org/)

  1.  Схема сайта и его информационное содержимое
    1.  Общий шаблон для страниц

Все страницы веб сайта должны выполняются в едином стиле. За основу должен быть взять стиль макета. Внутренние страницы разрабатываются самостоятельно, по необходимости. Кодировка страниц: Windows-1251.

Все страницы веб сайта содержат следующие общие элементы:

  •  Логотип и название сайта
    •  выполняется в Adobe Photoshop.
  •  Главное меню
    •  графика (клип-арт) в Adobe Photoshop; после чего элементы переносятся в библиотеку проекта Adobe Flash для формирования связанного меню с эффектами анимации, установленной заказчиком.
  •  Поиск по сайту
    •  В данном случае, можно воспользоваться сторонними поисковыми системами, предоставляющими услугу по поиску на конкретном сайте (по заранее проиндексированным страницам), либо реализовать PHP скрипт поиска по базе данных самостоятельно.
  •  Нижнее меню
    •  Нижнее меню является копией основного, выполненное в текстовом оформлении. Используется посетителями для удобства навигации на больших страницах. Реализуется обычным HTML кодом.

  •  Строка с правами использования веб сайта
    •  Так как на всех страницах данная информация идентична, помещается в шаблон. Реализуется обычным HTML кодом.

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

Разрабатываемый макет:

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

Конкретные замечания по дизайну общего макета и главной страницы сайта:

  •  Главная страница веб сайта должна полностью воспроизводить представленный заказчиком дизайн.
  •  Главное меню следует реализовать с  эффектом визуального подсвечивания при наведении курсора.
  •  В блоке новостей при наведении на заголовок новости следует изменять картинку в левой части новостного блока.
  •  При нажатии на изображении в виджете видео, должно осуществляется его проигрывание, во всплывающем окне.
  •  При нажатии на стрелки слайдера – слайды должны перемещаться в сторону, соответствующую выбранному направлению.
  •  При нажатии на кнопку «Голосовать», голос пользователя должен быть учтен, а после выведены ответы на данное голосование с использованием технологии AJAX, без перезагрузки страницы.

Рис. 1. Главная страница сайта

В данном случае, следует использовать макет, написанный на PHP, совмещающий в себе шапку страницы (Header), низ страницы (Footer) и ее основную часть. Следует учесть, что содержимое может изменяться администратором сайта. Данный подход максимально упростит создание страниц и позволит добиться автоматизации создания разделов, путем редактирования в панели администратора.

Для следующих шагов по созданию сайта, необходимо спроектировать и установить структуру базы данных сайта с учетом всех ситуаций и возможностей использования. Установленная база данных должна быть приведена к 3й правильной форме, иметь возможность расширения, без затрагивания и порчи остальных таблиц в ней. SQL редактор, выбранный нами, позволяет выполнить данные приготовления и проводить обновления данных БД.

  1.  Схема публичной части сайта

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

Главная страница

  •  О ДЕПАРТАМЕНТЕ
    •  Общие сведения
    •  Полномочия и функции
    •  Структура
      •  Биографии
    •  Руководство
    •  Справочная информация
    •  Телефонный справочник Департамента
    •  Кадровая и социальная политика
      •  Трехстороннее соглашение
      •  Сведения о государственной службе
        •  Перечень вакантных должностей
        •  Порядок поступления на государственную службу
        •  Квалификационные требования
        •  Сведения о доходах госслужащих департамента
      •  Формы и бланки
      •  Служба содействия занятости работников строительной отрасли
      •  Награждения. Поощрения
  •  ПРОГРАММЫ И ПРОЕКТЫ
    •  Программа действий на 2011 год
    •  Государственная программа "Градостроительная политика"
      •  Жилищное строительство в Москве
      •  Энергосберегающее домостроение
      •  Строительство детских садов и школ
      •  Строительство лечебных учреждений
      •  Развитие транспортной инфраструктуры
      •  Строительство ФОКов и спортсооружений
      •  Гостиницы в Москве
      •  Новое кольцо Москвы
      •  Комплексное освоение подземного пространства
      •  Реконструкция столичных деревень
      •  Развитие территорий ВЛЭП
      •  Безопасность объектов
      •  Развитие промышленности стройматериалов
      •  Развитие земельной реформы
      •  Конкурс: Лучший реализованный проект года
        •  Материалы конкурса-2011
        •  Материалы конкурса-2010
        •  Материалы конкурса-2009
    •  Государственная программа "Жилище"
      •  Федеральные программы
        •  Федеральная целевая программа "Жилище"
        •  Приоритетный национальный проект
      •  Региональное сотрудничество
      •  Жилье для военнослужащих
      •  Реконструкция жилых кварталов, снос некомфортного жилья
    •  Реализация Генерального плана
    •  Административная реформа
      •  Нормативные правовые акты в сфере административной реформы
      •  Цели и задачи административной реформы в сфере градостроительной деятельности
      •  Государственные услуги в сфере градостроительной деятельности
      •  Рабочая группа по оптимизации административных процедур в градостроительной деятельности
    •  Корпоративное управление
      •  Государственные учреждения
      •  ОАО с долей города
  •  ДОКУМЕНТЫ
    •  Нормативные документы
      •  Проекты нормативных правовых актов Мэра Москвы, Правительства Москвы и заключения к ним по результатам независимой антикоррупционной экспертизы
      •  Распоряжения об утверждении проектной документации по городскому заказу
    •  Проекты нормативных правовых актов Мэра Москвы, Правительства Москвы и заключения к ним по результатам независимой антикоррупционной экспертизы
    •  Распоряжения об утверждении проектной документации по городскому заказу
  •  ПРЕСС-СЛУЖБА
    •  Новости
    •  Видео новости
    •  Пресса
    •  Пресс-релизы
  •  Стенограммы
    •  Обеспечение доступности информации
    •  Наиболее популярные материалы (TOP 10)
  •  ЗАИМОДЕЙСТВИЕ С СРО
    •  Национальные объединения и саморегулируемые организации
    •  Справочник организаций по видам работ
  •  ОБРАТНАЯ СВЯЗЬ
    •  Горячая линия
    •  Обращения в Департамент
    •  Ваше мнение
    •  Ответы на вопросы
  •  МЕРОПРИЯТИЯ

  1.  Администрирование и организация прав доступа

Чтобы попасть в административную часть веб-сайта, необходимо пройти механизм авторизации. Авторизация проходит путем указания логина и пароля. В случае если логин и пароль указаны правильно, пользователь попадает в административную часть системы, с теми правами, которыми обладает группа в которую включен его логин.

Процесс авторизации реализуется с помощью PHP формы на соответствующей странице. Связка работает по следующей схеме:

Пользователь входит на страницу авторизации  

Вводит логин и пароль в форму  

PHP скрипт ищет в соответствующей таблице базы данных пользователя с указанным именем  

Сверка пароля  

Начало авторизованной сессии в браузере

При вводе данных в форму авторизации, следует учитывать возможность взлома и проверять на введенные данные.

По умолчанию все пользователи административной части системы делятся на следующие группы:

  •  Root  - обладают всеми возможными полномочиями. Данная учетная запись является встроенной, для первого входа с правами администратора, «руками» прописанная в базе данных. В дальнейшем процессе администрирования, её реквизиты могут меняться.
  •  Administrator – обладают всеми полномочиями, кроме просмотра журнала событий. В панели администрирования предусмотрено изменение его реквизитов. Администратор не может менять пароль от root-пользователя, в свою очередь root-пользователь может управлять правами доступа администраторской записи.
  •  Пользователи групп - обладают только теми полномочиями, которыми наделена их группа. Права для группы устанавливает администратор.

Форма создания группы состоит из следующих полей:

  •  Название группы – текстовое поле
  •  Модули –  элемент списков с множественным выбором

Внутри каждого модуля можно определить права группы на него. Возможные права:

  •  Добавление записей
  •  Публикация/отмена публикации записей
  •  Редактирование записей
  •  Удаление записей

Рис. 2. Форма создания группы

 

Администратор сайта имеет возможность добавлять новых администраторов либо участников групп в систему. Форма добавления нового пользователя состоит из полей:

  •  Логин – текстовое поле
  •  Пароль – поле для ввода пароля
  •  Группа – выпадающий список из доступных групп пользователя.
  •  Имя администратора – текстовое поле

Раздел управления содержимым сайта реализуется путем генерирования дерева списка страниц.

Рис. 3. Пример дерева разделов веб сайта

Форма создания элементов меню состоит из следующих полей:

  •  Адресное имя – текстовое поле. Формат допустимых данных: [A-Z] [a-z] [0-9] [_-.] Служит для обозначения страницы в адресной строке (URL). Должно иметь проверку на уникальность в рамках одного уровня.
  •  Название элемента – текстовое поле. Фактическое название страницы. Должно выводиться в заголовке окна браузера при переходе на данную страницу.
  •  Родительский элемент – выпадающий список из элементов дерева, с возможностью прикрепить добавляемый элемент в качестве дочернего к любому из существующих.
  •  Признак отображения в главном меню – элементы, отмеченные этим признаком, должны автоматически выводиться во внутреннем меню сайта.
  •  Признак публикации – пункты меню, отмеченные этим признаком доступны для просмотра
  •  Поле для Meta-keywords – поле, для ввода ключевых слов, по которым поисковики будут индексировать данную страницу
  •  Поле для Meta-description- поле для ввода описания страницы, по которому поисковики будут индексировать данную страницу

Для редактирования данных страниц, используется заранее подготовленный скрипт. Он позволяет редактировать страницы в режиме онлайн-администрирования, в WYSIWYG редакторе, аналогично Adobe Dreamweaver. Таким образом, администраторам не обязательно иметь на своем персональном компьютере установленное специализированное  программное обеспечение.

В соответствии с исходным шаблоном, механизм редактирования и создания страниц администратором в режиме онлайн, содержит:

  •  Заголовок блока – текстовое поле.
  •  Содержание страницы – поле с WYSIWYG редактором. Содержит в себе полный текст страницы с возможностью добавки изображений и файлов для скачивания.
  •  Родительская страница – выпадающий список из страниц, по умолчанию выбрана текущая страница. Обеспечивает возможность перенести блок на другую страницу.

Ниже описаны возможности онлайн WYSIWYG редактора.

Рис. 4. Онлайн редактор

  •  Два режима редактирования страницы Профессиональный, при котором выводится html код, и WYSIWYG, при котором пользователь видит визуально, как будет выглядеть гипертекст и графические элементы (рисунки) на странице веб сайта.
  •  Разворот поля на весь экран
  •  Режим отображения блоков – особый режим редактирования, показывающий визуально каким образом содержание разделено на параграфы.
  •  Функции управления буфером (копировать, вырезать, вставить)
  •  Вставка из MSWord – кнопка для автоматической вставки информации из буфера обмена, с автоматической очисткой несовместимого форматирования MS Word.
  •  Форматирование: очистка форматирования
  •  Форматирование: выбор типа элемента (Заголовок 1 – Заголовок N, обычный текст, адрес)
  •  Форматирование: выбор стиля элемента, формируется автоматически из css классов
  •  Форматирование: полужирный – выделенный текст выводится как полужирный
  •  Форматирование: курсив – выделенный текст выводится курсивом
  •  Форматирование: подчеркнутый – выделенный текст выводится как подчеркнутый
  •  Форматирование: зачеркнутый – выделенный текст выводится как зачеркнутый
  •  Подстрочный и надстрочный индексы – выделенный текст выводится в качестве индекстов
  •  Нумерованный список – выделенные параграфы становится нумерованным списком
  •  Маркированный список – выделенные параграфы становится маркированным списком
  •  Отступ – выделенный параграф приобретает отступ
  •  Выравнивание: по левому краю – выделенный текст становится выровненным по левому краю
  •  Выравнивание: по центру – выделенный текст становится выровненным по центру
  •  Выравнивание: по правому краю – выделенный текст становится выровненным по правому краю
  •  Выравнивание: по центру – выделенный текст становится выровненным по центру
  •  Вставка гиперссылки – появляется диалоговое окно, в котором требуется указать URL для гиперссылки. После этого, выделенный текст становится гиперссылкой на указанный URL.
  •  Вставка изображения – появляется диалоговое окно с возможностями:
  •  Выбрать изображение из списка уже закачанных на сервер
  •  Указать URL изображения
  •  Закачать изображение на сервер с последующей автоматической вставкой.
  •  Вставленное изображение выводится так, как будет выглядеть на странице.
  •  Вставка таблицы – диалоговое окно для создания новой таблицы.
  •  Вставка символа – диалоговое окно, с возможностью выбрать символ для вставки.

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

Во время правки, сохранения и создания страниц, время и имя учетной записи с дополнительной технической информацией, передаются в специальную таблицу. Она доступна только root-администраторам.

 

Рис. 5. Журнал изменений

  1.  Техническое размещение сайта, конфигурация сервера

Веб сайт должен стабильно работать на сервере, обладающем следующей конфигурацией:

  •  Операционная система: *nix
  •  Веб сервер: Apache2
  •  PHP 5.2 и выше
  •  MySQL 5.1 и выше
  •  FTP Сервер для доступа и управления файлами вручную


 

А также другие работы, которые могут Вас заинтересовать

47707. ИССЛЕДОВАНИЕ ОСВЕЩЕННОСТИ РАБОЧИХ МЕСТ 498.5 KB
  С освещенностью связаны следующие вредные и опасные факторы: ее чрезмерная или недостаточная величина пульсация светового потока несоответствие спектрального состава света условиям работы и искажение цветопередачи объектов неравномерность освещения рабочего места чрезмерная или недостаточная контрастность рассматриваемого объекта с фоном ослепление прямым попаданием в глаза возможность появления стробоскопического эффекта. ЦЕЛЬ РАБОТЫ Изучить методы измерения и принципы нормирования естественного и искусственного освещения промышленных...
47708. ОЦЕНКА ЗАПЫЛЕННОСТИ И ЗАГАЗОВАННОСТИ ВОЗДУХА РАБОЧЕЙ ЗОНЫ 751.5 KB
  ОЦЕНКА ЗАПЫЛЕННОСТИ И ЗАГАЗОВАННОСТИ ВОЗДУХА РАБОЧЕЙ ЗОНЫ Методические указания к лабораторной работе № 2 Кострома КГТУ 2011 УДК 658. Оценка запыленности и загазованности воздуха рабочей зоны : методические указания к лабораторной работе №2 Т. Загрязнение воздуха химическими веществами оказывает вредное воздействие на здоровье работоспособность и производительность работающего В лабораторной работе используются приборы и устройства питающиеся от сети напряжением 220 В: стенд с пылевой камерой для создания пылевой...
47710. Антикоррупционная экспертиза нормативных правовых актов 55.52 KB
  Целью настоящей работы является изучения теоретических основ антикоррупционной экспертизы нормативно - правовых актов, анализ ее особенностей, рассмотрение сущности и принципов проведения данной экспертизы, а также обозначение практических проблем, связанных с ее реализацией в Российской Федерации
47711. МЕТОДИЧЕСКИЕ УКАЗАНИЯ. ИНЖЕНЕРНАЯ ГРАФИКА ПОВЕРХНОСТИ И РАЗВЕРТКИ 621.5 KB
  Методические указания содержат теоретический материал по теме Поверхности и развертки задачи для решения на практических занятиях и для самостоятельного решения. ПОВЕРХНОСТИ 1. Каркас поверхности Технические объекты любой формы можно разделить на различные геометрические тела границами которых являются поверхности.
47712. МЕТОДИЧЕСКОЕ ПОСОБИЕ. КОМПЬЮТЕРНОЕ МОДЕЛИРОВАНИЕ СИСТЕМ 130.5 KB
  Кроме того при выборе тематики учитываются особенности машинной реализации систем при допустимых затратах машинных ресурсов на реализацию моделей машинного времени и оперативной памяти для их выполнения при возможности организации интерактивного режима что особенно важно для активного усвоения теоретического материала дисциплины и интенсивного приобретения практических навыков моделирования на современных ЭВМ. Система обработки информации содержит мультиплексный канал и три ЭВМ. Затем они поступают на обработку в ту ЭВМ где имеется...
47713. Методичні вказівки. Правове регулювання інтелектуальної власності 269 KB
  Рецензенти: Азімов Чінгізхан Нуфатович Членкореспондент Академії правових наук України академік Академії Інженерних наук України Лауреат державної премії України професор доктор юридичних наук професор кафедри цивільного права Національної юридичної академії України імені Ярослава Мудрого; Кройтор Володимир Андрійович начальник кафедри цивільноправових дисциплін Університету внутрішніх справ доцент кандидат юридичних наук. Накопичений нормативний масив перебуває в стадії його оптимізації в...
47714. Соціологія як наука про суспільство 522.46 KB
  Вивчення нової реальності що раптово відкрилася для сприйняття і яка складається з множини станів груп та обєднань людей з різними життєвими звичками способами відчувати й інтерпретувати довколишній світ з різними можливостями впливати на перебіг подій але з порівняно стійкими звязками між собою і певною мірою взаєморозуміння стало призначенням соціології. Найбільша заслуга соціології у тому що вона здатна діагностувати і лікувати соціальні хвороби виконувати прогностичні та прикладні функції як на рівні макросоціальних процесів і...
47715. Методические указания. Системное программное обеспечение 56.5 KB
  В результате выполнения работы студенты должны ознакомиться с: принципами эффективной организации взаимодействия между пользователем и аппаратными средствами ЭВМ с применением сервисных программных средств типа операционных сред и оболочек; составом и назначением системных функций библиотечных функций и команд файловой подсистемы операционной системы Linux. Программашаблон реализует простое перемещение по каталогам файловой системы с отображением содержимого каталогов в двух панелях экрана. Студентам предлагается ознакомиться с...