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


 

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

75495. Определение компьютерного вируса, типы антивирусных программ 30 KB
  Определение компьютерного вируса типы антивирусных программ Компьютерный вирус – программа которая может включать в другие программы свою иногда модифицированную копию способную к дальнейшему размножению и выполнению вредных воздействий. ЖЦ компьютерного вируса: Создание вируса Функционирование вируса Прекращение его существования Функционирование вируса Латентная фаза фаза выживания Инкубационная фаза фаза размножения Проявление вируса проявление диструктивных действий Некоторые вирусы не имеют 1 и 2 фазы например черви....
75497. Ввод начальных остатков в ИС «1С: Предприятие» 21 KB
  Для ввода остатков в плане счетов конфигурации предусмотрен специальный вспомогательный счет 00. Он используется для корреспонденции с дебетом или кредитом того счета, по которому необходимо ввести остаток.
75498. Документация в БУ ИС 1С 22.5 KB
  Для автоматизации процесса используются следующие виды первичных стандартных документов по учету: документы движения материальных ценностей приходный ордер приемный акт накладная акт на списание требование лимитная карта...
75499. Принципы программирования дополнительных задач в ИС 1С 23 KB
  Наследование есть свойство объектов порождать своих потомков. Полиморфизм это свойство родственных объектов т. объектов имеющих одного общего родителя решать схожие по смыслу проблемы разными способами. Это и называется полиморфизмом объектов.
75500. Типы данных, используемые при программировании в ИС 1С 30.5 KB
  Типы данных используемые при программировании в ИС 1С В системе поддерживаются базовые и агрегатные типы данных. Агрегатные типы данных – это специализированные типы данных предназначенные для работы с объектами 1С: Предприятия. Агрегатными типами данных называются следующие типы данных: Константа – средство работы с постоянными или условно постоянными значениями. Справочник – средство для ведения списков однородных элементов данных.
75501. Управляющие оператора, используемые для при программировании в 1С 25 KB
  Для управления логикой выполнения программы используются логические выражения и управляющие операторы. Логическое выражение записывается с помощью символов сравнения
75502. Индивидуальный пользовательский интерфейс (1С) 107 KB
  Индивидуальный пользовательский интерфейс 1С Индивидуальный пользовательский интерфейс включает расширенное меню и панели инструментов настроенные на работу только с той информацией доступ к которой разрешен набором прав пользователя. Внешний вид списка пользовательских интерфейсов зависит от положения переключателей Список Таблица в меню Действия главного меню Конфигуратора. Для создания нового пользовательского интерфейса необходимо выбрать пункт Новый в меню Действия главного меню конфигуратора рис. не содержит меню и...