Разработка виртуального музея истории развития компьютерной техники

Содержание
Введение..................................................................................................................
1 Что такое современный веб-сайт? ........................................................................ 11
1.1 HyperText Markup Language – HTML ........................................................... 11
1.2 HTML 5............................................................................................................. 12
1.3 Cascading Style Sheets – CSS ......................................................................... 15
1.4 CSS 3................................................................................................................. 16
1.5 jаvascript ........................................................................................................... 17
1.6 PHP и ООП....................................................................................................... 19
1.7 РНР 5.5.............................................................................................................. 22
1.8 Основные этапы разработки современных веб-сайтов ............................... 24
1.8.1 Проектирование ..................................................................................... 24
1.8.2 Разработка дизайна сайта ...................................................................... 29
1.8.3 Верстка .................................................................................................... 32
1.8.4 Программирование сайта ...................................................................... 34
1.8.5 Наполнение сайта................................................................................... 36
1.8.6 Тестирование .......................................................................................... 36
1.8.7 Размещение сайта в интернете ............................................................. 36
1.8.8 Раскрутка и поддержка .......................................................................... 37
2 Разработка виртуального музея истории развития компьютерной
техники ...................................................................................................................... 38
2.1 Постановка задачи........................................................................................... 38
2.2 Используемые аппаратные и программные средства
при разработке ....................................................................................................... 38
2.3 Алгоритм работы системы ............................................................................. 39
2.4 Выбор среды разработки ................................................................................ 39
2.5 Обоснование выбора СУБД ........................................................................... 42
2.6 Разработка базы данных ................................................................................. 43
2.7 Программирование сайта и системы управления контентом..................... 46
2.8 Логическая структура проекта....................................................................... 46
2.9 Контрольный пример ...................................................................................... 51
3 Экономическое обоснование проекта .................................................................. 57
3.1 Описание работы ............................................................................................. 57
3.2 Трудовые ресурсы, используемые в работе ................................................. 57
3.3 Оборудование, используемое в работе ......................................................... 58
3.4 Программное обеспечение, используемое в работе .................................... 58
3.5 Сроки реализации проекта ............................................................................. 59
3.6 Расчет стоимости по разработке.................................................................... 60
3.6.1 Расчет затрат на оплату труда .............................................................. 60
3.6.2 Расчет затрат по социальному налогу.................................................. 64
3.6.3 Расчет амортизационных отчислений.................................................. 64
3.6.4 Расчет затрат на электроэнергию ......................................................... 65
3.6.5 Расчет накладных и прочих расходов.................................................. 67
3.6.6 Расчет стоимости по всем статьям затрат и
определение структуры затрат....................................................................... 67
3.7 Цена интеллектуального труда ...................................................................... 68
4 Безопасность жизнедеятельности......................................................................... 71
4.1 Характеристика помещения и факторы, действующие
на разработчика в процессе труда. Рабочее место............................................ 71
4.1.1 Правильная поза при работе с ПК ........................................................ 71
4.1.2 Состав рабочего места разработчика ................................................... 72
4.1.3 Эргономические требования к рабочему месту.................................. 72
4.1.4 Расположение рабочего места в помещении ...................................... 73
4.1.5 Требования к микроклимату в рабочей зоне
помещений. Категория работы ...................................................................... 74
4.2 Освещение рабочего места............................................................................. 75
4.2.1 Определение системы освещения ........................................................ 76
4.2.2 Расчет искусственного освещения ....................................................... 76
Заключение ................................................................................................................ 81
Список используемой литературы .......................................................................... 82
Приложение А .................................................

1.1 HyperText Markup Language – HTML

Каждый раз, открывая браузер, вы попадаете на веб–сайт, который может
состоять из одной или множества веб–страниц с различной информацией.
Основной технологией создания таких веб–страниц является язык HTML.
HyperText Markup Language – «язык гипертекстовой разметки» – иными
словами он отвечает за расположение в документе текстов, рисунков, таблиц
предназначенных для отображения в сети Интернет. Заставить его посчитать,
сколько будет дважды два невозможно, в нем нет логических функций, зато
красиво и главное легко опубликовать информацию о том, что дважды два
будет четыре – это запросто. Читается этот язык при помощи знакомых
программ, именуемых браузерами (обозревателями), которые "знают" все теги
и команды языка HTML, и обрабатывая их выводит на монитор компьютера
документы в том виде, в котором хочет представить их веб–мастер –
разработчик документа.
Документ HTML разделяется на две основные части: заголовок – head и
тело – body. Заголовок содержит такие сведения о документе, как его название
и методико-техническую информацию, описывающую содержимое. В теге body
находится само содержимое документа (то, что выводится в окне обозревателя).
Каждый тег состоит из имени, за которым может следовать список
необязательных атрибутов, все они находятся внутри угловых скобок < >.
Содержимое скобок никогда не выводится в окне браузера. Имя тега, как
правило, представляет собой аббревиатуру его функции, что облегчает его
запоминание. Атрибуты являются свойствами, которые расширяют или
уточняют функцию тега. Как правило, имя и атрибуты внутри тега не
чувствительны к регистру [2].
Контейнеры. Большинство тегов являются контейнерами. Это означает,
что у них имеется открывающий и закрывающий теги. Текст, находящийся
между тегами,будет выполнять содержащиеся в них инструкции.
Закрывающий тег имеет то же имя, что и начальный, но перед ним стоит знак
слэш (/). Конечный тег никогда не содержит атрибутов.
В некоторых случаях конечный тег не обязателен, и обозреватель
определяет конец тега из контекста. Чаще всего опускают конечный тег
(абзац). Браузеры раньше поддерживали этот тег без соответствующего
завершения, поэтому многие разработчики привыкли использовать краткую
форму.
Автономные теги. Некоторые теги не имеет завершающих тегов, потому
что они используются для размещения отдельных (автономных) элементов на
странице. Одним из них является тег изображения , он просто помещает
графику в поток страницы. Другие автономные теги – это разрыв строки (),
горизонтальная линия () и теги, содержащие информацию о документе и не
влияющие на содержимое, выводимое на экран, такие как и .
Атрибуты.
Атрибуты добавляются в тег для расширения или
модификации его действий. К одному тегу можно добавить несколько
атрибутов. Если атрибуты тега следуют после имени тега, они разделяются
одним или несколькими пробелами.
Порядок следования не важен.
Большинство атрибутов имеют значения, которые следуют за знаком равенства
(=), находящимся после имени атрибута. Длина значений ограничена 1024
символами. Значения могут быть чувствительны к регистру. Иногда значения
должны находиться в кавычках (двойных или одинарных). Правила записи
значения следующие:
– если значение представляет собой одно слово или число и состоит
только из букв (a –z), цифр (0–9) и специальных символов (точка или
дефис), то можно поместить его после знака равенства без кавычек;
– если значение содержит несколько слов, разделенных запятыми или
пробелами, или содержит специальные символы, отличные от точки или
дефиса, тогда его необходимо поместить в кавычки. Например, URL требуют
кавычек, потому что они содержат символы "://". Также кавычки необходимы
при задании значений цветов с использованием формата "#rrggbb" [2].
В теги HTML могут помещаться другие HTML–теги для осуществления
воздействия нескольких тегов на один элемент. Это называется вложением, и,
чтобы правильно его осуществить, начальный и конечный теги вложенного тега
должны обязательно находиться между начальным и конечным тегами
внешнего тега.
Часто встречающейся ошибкой является перекрытие тегов. Хотя часть
браузеров отображают содержимое, отмеченное таким образом, многие не
разрешают нарушать правило, поэтому важно размешать теги правильно.
В проекте все страницы построены при помощи тегов HTML и PHP.

1.2 HTML5

Первым делом следует отметить тот факт, что HTML4 был полностью
закончен в конце 90–х годов, а работа над HTML5 началась относительно
недавно – где–то в 2005–м. Разработчики новой версии HTML основное
внимание сконцентрировали на вопросе совместимости новинки со всеми
популярными на сегодняшний день типами обозревателей – как следствие,
никаких революционных перемен в плане демонстрации веб–страниц не
произошло, но, зато, потенциальные способности отображения контента были
расширены.
К примеру, в HTML5 можно наблюдать определенное количество новых
элементов – появились section, nav, header, article и footer. Напомним, что ранее
существовал только один элемент – div. Стандартный img, теперь дополнен
тэгами audio и video. Один из самых важных атрибутов id дополнен tabindex и
repeat. Помимо этого полностью упраздняются давно вышедшие из моды
элементы типа font, center и т.п.
Поскольку главный упор сделан именно на бесконфликтность новой
версии языка с движками старых браузеров, то предусмотрена возможность
полного игнорирования такими обозревателями правил отображения заданных
в HTML5, что ни в коем случае не сказывается на качестве визуализации
загруженного контента.
Как известно, старая версия полностью опиралась на элемент div. Иными
словами, все, что было связанно с сайдбарами, навигационными панелями,
менюшками, разделами и т.п. подчинялось именно этому элементу. В HTML5
появились альтернативные варианты, что, вне всякого сомнения, сделало
структуру веб–страницы более наглядной и функциональной:
• header (не путаем с head) – можно задавать не только заголовок
страницы, но и подзаголовки;
• nav – элемент предназначен исключительно для ссылок навигации, что
в высшей степени удобно при создании внутри страничной навигации по сайту,
а так же и для межстраничных переходов;
• section – данный элемент интерпретируется как секция общего
пользования. Допустим, его можно использовать тогда, когда требуется в
заранее определенном блоке текста задать специальный заголовок или
параграф;
• article – посредством этого элемента можно задать независимые зоны
текстового наполнения страницы. К примеру, выделение важных публикаций
из архива, трансляция текущих новостей, последние сообщения на форуме и
т.д. и т.п. Помимо этого, элемент article можно использовать и в обычном
режиме – т.е. определять им весь контент страницы;
• footer – самый нижний элемент страницы или же "завершающий блок
секции". Представляется в виде колонтитула. Там могут размещаться
информационные сообщения касательно выше опубликованного контента
(например, копирайт) и т.п. вещи.
Теперь несколько слов про новшества, которые касаются элементов
блокового уровня. Таких новшеств несколько:
• aside – этот контейнер можно использовать для материалов, которые
считаются вспомогательными. К примеру, цитаты, сноски отделенные от
основного повествования, колонки с пояснительным текстом и т.п.;
• dialog – контейнер, позволяющий красиво оформить диалог;
• figure – контейнер, позволяющий описать любое графическое
изображение с текстовой подписью [2].
В принципе, уже давно ожидалось, что элементы управления
мультимедийным контентом рано или поздно появятся – и вот, на сегодняшний
день, мы уже имеем video и audio. Основная задача этого новшества – более
тесная интеграция мультимедийного контента с основной частью веб–
страницы. Другой момент – посредством этих элементов отпадает потребность
в использовании сторонних продуктов (плагинов) для просмотра и прослушивания мультимедийного контента.
Касательно интерактива, HTML5 тоже не остался в долгу – тут тоже
появились новые элементы. Вот некоторые из них:
• details – посредством этого элемента можно паковать необязательную
информацию;
• datagrid – используется для демонстрации данных таблицы. От
стандартных таблиц отличается тем, что посетитель страницы может
самостоятельно управлять отображением информации, т.е. убирать таблицу,
перемещать колонки и т.п;
• menu, command – элементы, которые непосредственно относятся к
визуальному представлению всех менюшек имеющихся на сайте.
Еще одно новшество – это элементы отвечающие за уровень текста. К
примеру, в новой версии можно задавать такие параметры, как, скажем,
прогресс какого–либо процесса (progress), динамическое отображение времени
(time), дат и т.п.
HTML5 вводит множество API, которые должны помочь в создании Web
приложений. Они могут использоваться вместе с новыми элементами:
• 2D drawing API, который может использоваться с новым элементом
canvas;
• API для проигрывания видео и аудио, который может использоваться с
новыми элементами video и audio;
• выделенная область памяти (Persistentstorage) с поддержкой данных в
виде ключ / значение и SQL данных;
• API, который допускает автономную работу web приложений;
• API, который позволяет web приложений регистрировать себя для
определенных протоколов или типов MIME;
• editing API в сочетании с новым глобальным атрибутом content editable;
• drag&drop API в сочетании с атрибутом draggable;
• network API;
• API, который выстраивает историю посещения, чтобы предотвратить
нарушение функционирования back кнопки (Этот API имеет необходимые
ограничения безопасности);
• cross–document messaging (Передача сообщений между документами);
• события сервера (Server–sentevents) в сочетании с новым элементом
event–source [2].
HTML5 – пока еще незаконченная спецификация. Содержание HTML5,
также как и содержание этого документа («HTML5 differences from HTML4»),
напрямую зависящего от HTML5, всё ещё обсуждается в Рабочей группе HTML и WHATWG.
Нерешенные проблемы включают в себя (список не исчерпывающий):
• семантическое определение некоторых элементов ранее предназначенных лишь для оформления;
• сведения о доступности, возможностях замены и сопровождения
альтернативным содержимым медиа данных, таких как атрибуты alt и summary.

1.3 Cascading Style Sheets – CSS

Cascading Style Sheets – каскадные таблицы стилей – это свод стилевых
описаний, тех или иных HTML тегов, который может быть применён как к
отдельному тегу – элементу, так и одновременно ко всем идентичным
элементам на всех страницах сайта. CSS по сути своего рода дополнение к
HTML, которое значительно расширяет его возможности.
До появления CSS оформление веб–страниц осуществлялос
исключительно средствами HTML, непосредственно внутри содержимого
документа. Однако с появлением CSS стало возможным принципиальное
разделение содержания и представления документа. За счёт этого нововведения
стало возможным лёгкое применение единого стиля оформления для массы
схожих документов, а также быстрое изменение этого оформления.
Принятие Консорциумом W3C в декабре 1996 года в качестве стандарта
CSS первого уровня был огромным шагом вперед, поскольку позволял отделить
содержание веб–страницы (текст, изображение и т.д.) от ее форматирования
(макет и характеристики текста, например, информация о шрифтах). После
этого язык HTML снова стал функционально–ориентированным (а не
ориентированным на форму), что однако
не мешало пользователем контролировать вид страницы [3].
В мае 1998 года был принят стандарт CSS2, позволяющий разработчикам
осуществлять контроль над веб–страницами на более высоком уровне. Этот
стандарт основан на CSS первого уровня и включал новые функции, в
частности, возможность точно располагать элементы и объекты веб–страницы,
а также звуковые таблицы стилей, позволяющие специальному программному обеспечению
считывать содержимое веб–страницы (что полезно для слабовидящих пользователей).
Существуют три способа применения стилей в документе HTML:
• написать стилевое описание непосредственно в самом элементе. Такой
способ неплох, но только в том случае если таковой элемент единственный в
HTML документе который требует отдельного стилевого описания;
• написать стилевое описание для всех идентичных элементов HTML
документа. Такой способ применяется в случае, если стиль страницы сильно
отличается от общего дизайна сайта;
• вынести стилевое описание элементов HTML в отдельный файл CSS.
Этот способ помогает управлять дизайном всего сайта целиком, каждой
страницей сайта на которой есть ссылка на файл стилей. На данный момент
этот способ является самым эффективным использованием таблицы каскадных
стилей [3].
В настоящее время современный подход к созданию сайтов
подразумевает активное использование CSS для управления видом частей веб–
страниц и их верстки. Довольно известная блочная верстка или верстка с
помощью слоев привлекает все больше поклонников, а это предполагает знание
свойств CSS и их разумное применение на сайте.
–новейший стандарт веб–разработок,довольно сильно
расширяющий функциональные возможности языков веб–программирования и
помогающий реализовать оригинальные визуальные эффекты для ваших
интернет–проектов. С помощью CSS3 действительно создавать красивые
эффекты, как полупрозрачные фоны, необычные
градиенты и тени;
использовать оригинальные шрифты, обычно не использовавщихся в сети
Интернет;внедрять на сайтах анимацию без использования Flash,
предоставлять пользователям возможность унифицировать дизайн сайта без
применения jаvascript.
Стандарт CSS3 до сих пор меняется и развивается – так же как
обозреватели, которые в конечном итоге будут его поддерживать, и веб–
дизайнеры, которым предстоит понять, как наилучшим образом применять
новые спецификации для достижения своих целей [3].
CSS3 – расширение CSS 2.1 – добавляет мощную функциональность к
существующим возможностям. Однако CSS3 не является теперь единой
спецификацией. Вместо этого теперь мы имеем дело с несколькими модулями.
Каждый модуль – это отдельная спецификация для некоторого поднабора
возможностей CSS, например селекторов, текста или фонов. Каждый модуль
разрабатывается собственной командой авторов в соответствии с собственным
расписанием. Преимущество такого подхода в том, что для обновления всей
спецификации CSS3 не приходится дожидаться, пока будет закончена работа
над каким–то маленьким кусочком, модуль, включающий этот кусочек, может
немного подождать, но все остальное обновляется вовремя.
Разумеется, CSS3 во многом повторяет CSS 2.1. Однако по сравнению с
предыдущей версией большое количество возможностей было добавлено или
пересмотрено. Приведенный далее список изменений далеко не полон – их
слишком много, чтобы перечислять каждое мелкое нововведение. Представлен
обзор самых хорошо поддерживаемых, популярных и полезных различий
между версиями CSS 2.1 и 3.
Визуальные эффекты, не зависящие от изображений. В CSS3 вы найдете
множество новых свойств, позволяющих создавать визуальные эффекты,
которые раньше требовали обязательного использования изображений (и
иногда написания сценариев):скругленные углы,падающиетени,
полупрозрачные фоны, градиенты и изображения в качестве рамок полей. Часть
этих новых свойств принадлежит модулю Background sand Borders (Фон и
границы), другие вы найдете в модулях Colors (Цвета) и Image Values (Значения
изображения) [3].
Трансформации полей. Еще одна категория визуальных эффектов,
ставших возможными с появлением CSS3, связана с манипулированием
позицией и формой поля в двумерном и трехмерном пространствах – это
поворот,масштабирование,скрещивание.
Такие эффекты называются трансформациями и описаны в модулях 2D Transforms (2D Преобразование) и
3D Transforms (3D Преобразование).....