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 Сервер для доступа и управления файлами вручную


 

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

20692. Сплайн-інтерполяція. Інтерполяційні поліноми Лагранжа 221.07 KB
  Мета роботи: познайомитися з методами інтерполяції складних функцій реалізувати заданий за варіантом метод інтерполяції у середовищі МatLAB. Завдання до виконання роботи: Доповнити систему МatLAB файлом що реалізує заданий метод інтерполяції відповідно до варіанту.
20693. ЗАДАЧИ И ОСНОВЫ ОРГАНИЗАЦИИ ЕДИНОЙ ГОСУДАРСТВЕННОЙ СИСТЕМЫ ПРЕДУПРЕЖДЕНИЯ И ЛИКВИДАЦИИ ЧРЕЗВЫЧАЙНЫХ СИТУАЦИЙ (РСЧС) 363.5 KB
  В производственной сфере главная ответственность за предупреждение аварий и катастроф, осуществление мер по их ликвидации, по защите персонала объектов и населения жилых зданий, находящихся в опасной зоне, возлагалась на руководителей предприятий, отраслевые министерства и ведомства.
20694. Единая Европа: источники, образование, перспективы 136.5 KB
  ЕС является ключевым политическим и экономическим партнером России на Западе даже в условиях санкций. Особенно активно развиваются торгово-экономические связи. ЕС и Россия должны быть направлены на дальнейшее развитие конструктивного сотрудничества. В связи с этим понимание истоков, идей создания ЕС и его развитие является актуальным.
20695. ФОРМЫ УЧАСТИЯ ПРОКУРОРА В ГРАЖДАНСКОМ СУДОПРОИЗВОДСТВЕ В РК И ЗАРУБЕЖНЫХ СТРАНАХ 186 KB
  Дискуссия по поводу ограничения или, наоборот, усиления роли прокурора как в суде, так и в общем надзоре, не являются на сегодняшний день чем-то новым в истории прокуратуры, для которой характерен непрекращающийся поиск оптимальных форм осуществления полномочий.
20696. Розв’язання систем нелінійних рівнянь. Метод Ньютона 18.5 KB
  0001; J = [diffy1'x1' diffy1'x2' diffy1'x3' ; diffy2'x1' diffy2'x2' diffy2'x3' ; diffy3'x1' diffy3'x2' diffy3'x3' ]; p=[2;2;2]; x1=p1; x2=p2; x3=p3; dp=[inf;inf;inf]; while maxabsdp1:3 eps dp=[0;0;0]; Fk=[0;0;0]; Jk=evalJ; for i=1:3 Fki=evalFi:; end dp=invJkFk; p=pdp; x1=p1; x2=p2; x3=p3; end p 2.
20697. Криптографічна система RSA 54.28 KB
  5 зашифруємо повідомлення Створемо ключ Зашифруємо файл Відповідно до завдання лабораторної роботи проведемо розрахунки Повідомлення CRDHQS RSA p=5 q=7 N=57=35 p1q1=24 D=5 edmodp1q1=1 e5mod24=1 E=5 Ключ24 e =5 3^5 mod 35=33 18^5 mod 35=23 4^5 mod 35=9 8^5 mod 35=8 17^5 mod 35=12 19^5 mod 35=24 Зашифроване повідомлення 33 23 9 8 12 24 Розшифруєм повідомлення використовуючи ключ d=5 33 33^5 mod 35=3 23^5 mod 35=18 9^5 mod 35=4 8^5 mod 35=8 12^5 mod 35=17 24^5 mod 35=19 Висновки:...
20698. Розподіл ключів, протокол Діфф-Хеллмана 57.93 KB
  При роботі алгоритму кожна сторона: генерує випадкове натуральне число a закритий ключ спільно з віддаленою стороною встановлює відкриті параметри p і g зазвичай значення p і g генеруються на одній стороні і передаються іншій де p є випадковим простим числом g є первісних коренем по модулю p обчислює відкритий ключ A використовуючи перетворення над закритим ключем A = ga mod p обмінюється відкритими ключами з видаленою стороною обчислює загальний секретний ключ K використовуючи відкритий ключ видаленої сторони B і свій закритий ключ a...
20699. Еліптичні криві в криптографії 168.01 KB
  1КІ08 Морозов Артем Еліптична крива над полем K це множина точок проективної площини над K що задовольняють рівнянню разом з точкою на нескінченності. Отже кількість точок на кривій парна 1 точку дає по дві точки можуть давати інші елементи поля і треба не забути про точку на нескінченності. Додавання точок виконується наступним чином: 1 Нейтральний елемент групи: для будьякої точки . 3 Якщо то сумою точок та є 4 Якщо то 5 Якщо то .
20700. Генерування випадкових чисел 89.26 KB
  1КІ08 Морозов Артем Мета роботи: Усвідомити важливість проблеми генерування випадкових чисел під час вирішення задач захисту інформації ознайомитися з деякими способами генерування псевдовипадкових чисел усвідомити сильні і слабкі сторони алгоритмічних методів генерування випадкових чисел. Генератор випадкових чисел англ. Широко використовуються комп'ютерні системи для генерації випадкових чисел але часто вони малоефективні.