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


 

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

26801. Методы отделения корней уравнения 136.17 KB
  Чтобы отделить корень графически необходимо построить график функции fx на промежутке изменения x тогда абсцисса точки пересечения графика функции с осью ОХ есть корень уравнения. Этот метод можно получить из метода Ньютона заменив производную f'x отношением разности функции к разности аргумента в окрестности рассматриваемой точки f 'x fxh fx h. Подставляя это выражение в xk1 = xk fxk f 'xk получим xi1 = xi fxih fxihfxi 1 Геометрически это означает что приближенным значением корня считается точка...
26802. Четыре уровня модели TCP/IP стека 333.62 KB
  Уникальный 32битный IPадрес в InterNet. IPv6 адрес является уникальным 128битным идентификатором IPинтерфейса в Интернет иногда называют Internet2 адресного пространства IPv4 уже стало не хватать поэтому постепенно вводят новый стандарт. IANA The Internet Assigned Numbers Authority Управление назначением адресов в Internet организация осуществляющая контроль над распределением доменов первого уровня.ru internet index.
26803. Метод Эйлера решения задачи Коши для ОДУ 1-го порядка 260.5 KB
  Можно рассматривать и несколько иную классификацию ИП: сбор подготовка передача хранение накопление обработка представление информации. Поиск информации. Поиск или сбор информации первичный информационный процесс лежащий как правило в сфере некоторой практической или научной деятельности. Поиск информации это извлечение хранимой информации.
26804. Одномерная оптимизация 79 KB
  Система должна предусматривать режимы ведения системного каталога отражающего перечень областей знаний по которым имеются книги в библиотеке. Каждая книга хранящаяся в библиотеке характеризуется следующими параметрами: уникальный шифр; название; фамилии авторов могут отсутствовать; место издания город; издательство; год издания; количество страниц; стоимость книги; количество экземпляров книги в библиотеке. Книги могут иметь одинаковые названия но они различаются по своему уникальному шифру ISBN. Читатель не должен одновременно...
26805. Многомерные задачи оптимизации 142.5 KB
  Многие идеи хорошо иллюстрируются на двумерной задаче, но становятся и труднообъяснимыми, и малоэффективными при повышении размерности. Для двумерных задач понятны алгоритмы наискорейшего спуска и движения по градиенту
26806. Линейное программирование. Рассмотрим основные понятия, характеризующие строение и функционирование систем 101 KB
  Для организационных систем и ИС удобно в определении системы учитывать цели и планы внешние и внутренние ресурсы исполнителей непосредственно процесс помехи контроль управление и эффект. Интегративное свойство системы обеспечивает ее целостность качественно новое образование по сравнению с составляющими ее частями. Под элементом принято понимать простейшую неделимую часть системы. Это часть системы обладающая внутренней структурой.
26807. Методы отделения корней уравнения 81 KB
  Если уравнение y = fx получено из практических инженерных нужд а не является выдумкой ради того чтобы подловить студента то составитель уравнения наверное знает приблизительно в каком интервале [a b] лежит корень и имеет основания думать что корень в этом интервале один. В тот момент когда окажется fаifbi 0 можно считать что корень отделён. А если в какойто точке в процессе этих вычислений fx окажется равной нулю то это значит что вам повезло и вы уже наткнулись на корень Методы отделения корней уравнения. Во многих...
26808. Уточнение корней уравнения. Метод деления отрезка пополам, метод секущих 115 KB
  В общем случае типовые программные компоненты ИС включают: диалоговый вводвывод логику диалога прикладную логику обработки данных логику управления данными операции с файлами и или БД. развитие сетевых технологий и систем передачи данных; 4. Основными из этих принципов являются следующие: принцип абстрагирования заключается в выделении существенных аспектов системы и отвлечения от несущественных; принцип непротиворечивости заключается в обоснованности и согласованности элементов; принцип структурирования данных ...
26809. Уточнение корней уравнения. Методы касательных (Ньютона) 160.5 KB
  Для групповых и корпоративных ИС существенно повышаются требования к надежности функционирования и сохранности данных. Эти свойства обеспечиваются поддержкой целостности данных ссылок и транзакций в серверах БД. Классификация по сфере применения Системы обработки транзакций по оперативности обработки данных делятся на пакетные ИС и оперативные ИС. Системы поддержки принятия решений представляют собой тип ИС в которых с помощью довольно сложных запросов производится отбор и анализ данных в различных разрезах: временных географических и по др.