Разработка электронного сайта для фирмы

На сегодняшний день трудно представить себе какую-нибудь организацию, фирму или компанию без своего сайта. Новые недавно открывшиеся организации, в первую очередь заказывают сайт для своей фирмы, чтобы привлечь, таким образом, больше клиентов. Ведь на данный момент большинство потенциальных клиентов можно заинтересовать через World Wide Web (Всемирная паутина), попросту в Интернет. Сайт — набор из нескольких десятков, сотен и даже тысяч веб-страниц, связанных между собой единой темой, общим оформлением и ссылками. Сайт является самым востребованным в это время и на его разработку уходит достаточно много времени, особенно трудно это дается тем, кто только начал изучение языков Web-программирования.

Сайт — самый современный и эффективный канал коммуникации с потенциальным потребителем. Возможности интернет-сайта позволяют в полной мере использовать все способы донесения информационного сообщения до пользователя.

Цель курсового проекта является разработке сайта фирмы «РемСпецСтрой». В связи с этим главная задача состоит в разработке электронного сайта для данной фирмы.

· Разработка дизайна и архитектуры проекта

· Создание технологической основы

· Наполнение контенто

· Тестирование готового решения

· Запуск проекта После завершения всех процедур и работ по тестированию сайта проект будет готов к открытию для посетителей.

1. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ РАЗРАБОТКИ САЙТА

1.1 Программные средства, использованные при разработке сайта

Сайт фирмы «РемСпецСтрой» разрабатывался в среде NotePad++. Также использовалась стили CSS, JavaScript, Js, swf, xml для создания пользовательского интерфейса сайта фирмы, язык JavaScript, язык гипертекстовой разметки HTML и Adobe Photoshop CS6, так же присутствуют музыкальные файлы mp3, wav. На всем сайте имеются ссылки на каждую страницу, на которых представлена информация о фирме, и ее услугах.

Разработка структуры сайта, его реализация и создание элементов дизайна. Наиболее употребляемые теги языка HTML. Листинг HTML-кода., создаётся в любом текстовом редакторе, в «блокноте» (MS NotePAD++ в составе Windows).

Создание тематического Web-сайта с использованием гипертекстового языка разметки HTML, каскадных листов стилей CSS и языка программирования Java Script. Описание используемых тегов при его создании. Особенности разработки навигации и интерфейса сайта. HTML-код, можно конвертировать из многих программ, (например, Microsoft Word). После конвертации одна страница текста может превратиться в огромный HTML-файл размером более 100кб. HTML-документ, можно создавать с помощью визуальных пакетов таких, например, как Microsoft FrontPage.

Редакторы сами вырабатывают html-код документа, в то время как разработчик лишь выбирает нужные ему опции из меню. Разработчик сайта должен использовать разумное сочетание всех методов создания HTML-документов. При использовании этих методов следует учесть следующее: создание различных эффектов в простом текстовом редакторе — громоздкая и сложная задача; документ, подготовленный с помощью какой-либо программы, проще конвертировать, чем создавать заново; текстовые редакторы можно использовать для очистки от «мусора» HTML-документов, созданных с помощью специализированных программ; при создании эффектов с помощью специальных программ (например, Microsoft FrontPage) следует предусмотреть поддержку этих эффектов на web-сервере.

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

1.2 Параметры аппаратных средств для демонстрации ПП

Для оптимальной работы и быстрого отображения страниц сайта на компьютере должно быть следующее:

Основным средством работы с ресурсами Internet сегодня стали программы, позволяющие читать страницы Web. Как их называть? Самая популярная программа доступа к ресурсам Internet, Netscape Navigator, позволяет обращаться не только к WWW, но и к FTP-архивам, базам данных Gopher и WAIS, и новостям Usenet. Термин «browser» ограничивает восприятие возможностей только просмотром информации, но многие программы позволяют не просто просматривать страницы WWW, но и заказывать файлы, отправлять почту, участвовать в дискуссиях Usenet, а HotJava и Navigator могут интерпретировать программный код. Слово «client» также вводит в заблуждение. Кроме интерфейсных функций Web-клиент выполняет поисковые операции, индексирование ресурсов, тестирование серверов и целый ряд других специализированных действий. Слово «viewer» тем более некорректно использовать — оно закреплено за классом программ для просмотра файлов специальных форматов: GIF, JPEG или MPEG.

Установленные приложения: internet, FireFox, Opera, Avant, Safari, Maxthon, Flock, Netscape Navigator, Konqueror, Galeon, Epiphany, Kazehakase, Charon, Arachne, K-Meleon и т. д.;

Иногда веб-сайты выглядят непредсказуемо: изображения скрыты, меню появляются не там, где нужно, а текст беспорядочно перемешивается. Это может вызываться проблемой совместимости сайта с Internet Explorer.

Иногда для устранения проблемы нужно добавить сайт в список просмотра в режиме совместимости, так же должна присутствовать поддержка в браузере JavaScript, Adobe Flash Player, разрешение экрана должна быть не меньше минимального разрешения 320Ч240 pixels; и не больше максимального разрешения 7680Ч4800 pixels.

1.3 Архитектура программного обеспечения

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

Сайт представляет собой многопользовательскую архитектуру, это значит, что одновременно этим сайтом могут пользоваться неограниченное число пользователей.

Разработка сайта в приложении NotePat++. Программные средства и технологии, используемые при разработке сайта. Основная структура сайта и размещение исходных файлов. Создание графических страниц, элементов и рисунков.

В разработке сайта были применены стандартные парные теги:

,,. При создании блочной верстки использовался парный тег. Макет сайта вначале был разработан на бумажном носителе информации, после чего он реализовывался с помощью каскадной таблицы стилей (CSS). Для создания анимированного меню был создан документ с расширением .css, в котором был прописан стиль, эффекты и цвет вкладок при наведении. После этот документ был подключен ко всем страницам сайта. На фоне меню подключена картинка, которая предварительно была отредактирована и сохранена специально для Web-страниц в графическом редакторе Adobe Photoshop CS6, и GIMP, NotePat++.

Photoshop использовался для создания самих макетов; его преимущество перед другими программами состоит в наличии инструментов стилей, позволяющих быстро изменять оформление множества графических элементов без необходимости перерисовывать их с нуля.

GIMP использовался для корректировки макетов и иллюстраций на низкопроизводительной системе и их «нарезки» на отдельные элементы.

1.4 Выбор подхода к разработке программного продукта

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

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

Структурный подход (structured approach) к разработке систем получил широкое распространение (и был признан стандартом де-факто) в 1980;х годах. Этот подход основан на двух методах: диаграммах потоков данных (data flow diagrams DFD) для моделирования процессов и диаграммах сущность-связь (entity relationship diagrams ERD) для моделирования данных.

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

Сочетание DFD и ERD диаграмм дает относительно полные модели анализа, которые фиксируют все функции и данные системы на требуемом уровне абстракции не-зависимо от особенностей аппаратного и программного обеспечения. Затем модель анализа преобразуется в проектную модель, которая обычно выражается в понятиях реляционных баз данных. После этого следует этап реализации.

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

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

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

Этот подход предполагает разработку «с чистого листа» и не поддерживает повторное использование уже существующих компонент.

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

1.5 Технология, язык и среда программирования

Notepad++ - это замена «Блокноту», поддерживающий несколько языков. Работает в среде MS Windows под лицензией GPL License. Основан на мощном компоненте редактирования Scintilla. Notepad++ написана на C++ и использует чистый Win32 API и STL, который обеспечивает высокую скорость работы и небольшой размер программы.

Notepad++ - свободный текстовый редактор с открытым исходным кодом для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Поддерживает открытие более 100 форматов. Базируется на компоненте Scintilla, написан на C++ с использованием STL, а также Windows API и распространяется под лицензией GNU General Public License. Базовая функциональность программы может быть расширена как за счёт плагинов, так и сторонних модулей, таких как компиляторы и препроцессоры.

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

Все изменения в коде мгновенно отображаются в соответствующем окне браузера. Можно в реальном времени подстраивать размеры, цвет и компоновку элементов. Среда стала доступна для ОС Linux, появилась поддержка Node. js, реализовано интеллектуальное авто дополнение кода для HTML, CSS, JavaScript, сообщество создало более сотни полезных плагинов, плюс в разработке находится продвинутая система для упрощения создания макетов с отзывчивым дизайном, которая уже успела произвести все ожидания для тех, кто её видел.

Главная же особенность Notepad++ - поддержка плагинов, которые способствуют расширению базового функционала редактора. В программу интегрируются дополнительные плагины, позволяющие настроить проверку орфографии, автоматическое сохранение документов, симметричное и асимметричное шифрование текста, HEX-редактор, FTP-менеджер.

HTML-язык гипертекстовой разметки, стандартный язык разметки документов во Всемирной паутине. Большинство Web-страниц содержат описание разметки на языке HTML. Язык интерпретируется браузерами и отображается в виде документа в удобной для человека форме. Язык является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.

Язык XML является более строгим вариантом HTML, он следует всем ограничениям XML и, фактически, его можно воспринимать как приложение языка XML к области разметки гипертекста. Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста.

HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. С помощью HTML можно легко создать

относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Изначально язык был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения. В идеале, текст с разметкой HTML должен был быть без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью.

Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег

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

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах, как язык сценариев для придания интерактивности веб-страницам. На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами.

Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкамфункции как объекты первого класса, объекты как списки, анонимные функции, замыкания — что придаёт языку дополнительную гибкость.

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

. Контейнеров