Разработка web-сайта агенства по продаже недвижимости

Размещено на http://www.allbest.ru

Содержание

Введение	9
1 Обзор современных технологий и принципов для создания web-сайтов	10
1.1 Современные технологии, используемые для создания web-сайтов	10
2 Этапы создания web-сайта	13
2.1 Создается модель или прототип web-сайта.	13
3 Программное обеспечение, необходимое для создания web-сайта	17
3.1Утилиты	17
3.2Текстовые редакторы	18
3.3 Графические редакторы	18
4. Проектированиеweb-сайта по продажа недвижимости	19
4.1 Разработка прототипа web-сайта по продажа недвижимости	19
4.2 Создание дизайна web-сайта по продажа недвижимости	22
4.3 Верстка web-сайта по продажа недвижимости	23
5 Охрана труда	29
5.1 Общие требования техники безопасности при работе за ПК	30
5.2 Требования техники безопасности перед началом работы за ПК	30
5.3 Требования техники безопасности во время работы за ПК	32
5.4 Требования техники безопасности по окончанию работы за ПК	33
5.5 Требования техники пожарной безопасности	33
Приложение А	35
7 Заключение	53
8 Список используемой литературы	54



Введение

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

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

Целью работы является разработка web-сайта на тему «Продажа Недвижимости», который должен предоставлять всю необходимую информацию клиентам о самой компании и предоставляемых услугах, а также иметь доску объявлений о недвижимости и возможность получить дополнительный канал для маркетинга и рекламы.

Для достижения цели необходимо будет решить следующие задачи:

- Сделать обзор современных методов разработки web-сайтов;

- Выбрать методы разработки web-сайта;

- Создать дизайн web-сайта;

- Осуществлить верстку web-сайта.



1. Обзор современных технологий и принципов для создания web-сайтов

1.1 Современные технологии, используемые для создания web-сайтов

Web-сайт - это набор документов и файлов, которые лежат на каком-то сервере (компьютере) и объединены одним доменным именем.

Доменное имя, это название web-сайта, которое используется для его поиска в сети. Например, «mail.ru» является доменным именем, которое объединяет странички, лежащие на сервере.

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

Браузер посылает определенный запрос, являющийся доменным именем web-сайта, сервер его принимает и отправляет обратно некие документы. Это работает как сетевое копирование файлов, только по протоколу http. Все документы web-сайта, которые мы видим в браузере написаны на языке HTML. HTML (HyperTextMarkupLanguage) это язык, являющийся стандартом для разработки документов, которые будут отображаться в интернет-браузерах. Ключевой смысл языка HTML, в разметке текста, для чего используется специальные команды, называемые теги, графические они отображаются в угловых скобках. HTML документы хороши тем, что для их просмотра подходит практически любой браузер. Документ, написанный на языке HTML, будет правильно отображаться на различных устройствах, имеющих различное разрешение экрана и операционную систему. Практически все документы содержат в себе стандартные элементы, такие, как титульная надпись, заголовки или списки. С помощью тэгов HTML можно обозначать данные элементы, обеспечивая интернет-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Браузер - это окно, через которое мы просматриваем интернет web-сайты. То есть все странички должны быть написаны на языке HTML.

Создать документы, написанные на HTML, которые станут основой вашего web-сайта, можно несколькими способами.

Основным способом ялвяется текстовый набор HTML кода в редакторе. Это достаточно трудоемкий процесс, который подразумевает глубокое знание принципов построения документо в HTML, умение работать с каскадными таблицами стилей CSS, а также как минимум с javaScript.

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

Также есть возможность создавать web-сайты с помощью специальных редакторов, которые объединяются под общим названием WYSIWYG - «WhatYouSeeIsWhatYouGet», который можно перевести как «что ты видишь, то и получишь». Создание web-сайтов в этих программах напоминает работу в графических и текстовых редакторах, но на выходе мы получим не изображение, а документ на языке HTML. Этот метод позволяет достаточно быстро получить документ с достаточно сложным оформлением.

Рассмотрим достоинства и недостатки этих методов. По началу кажется, что достоинтсва CMS или редакторов WYSIWYG неоспоримы, но это далеко не так, web-сайты написанные вручную, хоть и требуют большего времени на создание, но зато получаются качетсвенней.Обозначим преимущества web-сайтов написанных вручную:Созданный таким образом web-сайт гораздо сложнее взломать, так как нет Mysql базы данных и отсуствует файл конфигруации, а именно с помощью этих файлов в первую очередь хакеры пытаются взломать web-сайт.Web-сайты, написанные на HTML если сравнивать их с CSM системами отображаются гораздо быстрее. Так получается потому что сами файлы получаются намного компактнее и не надо делать запросы в Mysql базу данных.

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

Web-сайт занимает меньше места, что позволяет экономить на трафиках хостинга.

HTML web-сайт не будет содержать продублированных страничек, чтоположительно отображается на результатх поиска

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

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

CSS довольно просто использовать в HTML документах. Его можно подключить как внешний CSS файл к документу. Для этого достаточно прописать тэг </linkrel =”stylesheet”=”путь/до/файла.css”> в теге <head>.

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

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

CSS селектор - это конструкция, с которой начинается каждый блок объявлений, и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например смортите на рисунке 1.1:

Рисунок 1.1 CSS селектор

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет - серый. Соответственно, если на странице есть несколько тегов с классом my-class, все эти элементы получат одинаковое оформление - серный фон цвета#999.



2. Этапы создания web-сайта

2.1 Создание модели или прототипа web-сайта

На этом этапе примерно набрасывается внешний вид web-сайта и общая структура web-сайта, определяется какие элементы в каком порядке он будет содержать. Для этого могут быть использованы различные программы и онлайн сервисы, но также можно просто отобразить на листе бумаги.

Создание дизайна web-сайта

Как правило, макет, отражающий дизайн web-сайта, рисуется в графических редакторах, таких как AdobePhotoshop или Gimp или AdobeExperience. Это является одним из главных этапов создания web-сайта. Именно на этом этапе окончательно формируется внешний вид web-сайта, добавляется вся графика, уточняется и прорисовываются все детали

Верстка страниц в HTML

Макет web-сайта, нарисованный в графическом редакторе, разбивается на отдельные графические элементы и описываются на языке HTML, так же при верстке могут быть использованы такие технологии, как CSS и javascript, если необходима некая динамичная подгрузка или анимация.

Разрабатывается программная часть или используется движок

Веб-сайт размещается на хостинге.

Подготовленные HTML странички копируются на сервер, им присваивается определенное доменное имя и получают публичный доступ.

Дизайн web-сайта.

Первое, на что обращает внимание человек, когда заходит на какой-либо web-сайт, это его дизайн. Именно от того, насколько удачно сделан дизайн web-сайта зависит захочет ли пользователь просматривать страницу дальше или закроет ее. Поэтому очень важно при проектировании web-сайта хорошо понимать на какую аудиторию он рассчитан, какие потребности возникают у пользователей. Всеми этими вопросами занимается Ux/Ui.

UX или User Experience - дисциплина, изучающая опыт взаимодействия пользователя с продуктом, восприятие и реакцию, возникающию в результате использования.

UI - это User Interface - то как выглядит интерфейс, и то какие физические характеристики приобретает. Определяет какого цвета будет ваше “изделие”, удобно ли будет человеку попадать пальцем в кнопочки, читабельным ли будет текст и тому подобное.

UX - это понятие, которое применимо не только в web-сайте, но и других областях. Опыт взаимодействия - это когда специалист на заводе управляет сложной техникой посредством нажатия пары кнопок, при чем кнопка отключения значительно крупнее. UX - это когда вы срезаете путь до дома тропинкой хотя есть красивый и чистый тротуар; это когда вы ставите стаканчик с кофе в специальное углубление на панели в салоне вашего авто; это когда педаль тормоза шире педали газа. Все это пользовательский опыт взаимодействия. Примеров может быть масса, но суть одна: UX - это способ достижения цели пользователя максимально комфортным способом. И при создании хорошего дизайна необходимо учитывать это. UX - это область, в которую входит как расследование и проектирование, так и визуализация и вёрстка. В результате работы над UX мы должны получить рабочий прототип. Так как речь идет о web-сайте, таким прототипом является HTML вёрстка.

UX в web-дизайне - это фундамент, на котором строится дизайн web-сайта или приложения. Это проектирование интерфейса с учётом потребностей людей, для которых вы создаёте дизайн web-сайта. Кто конечный пользователь, какие цели человек преследует, используя ваш интерфейс, как помочь ему максимально быстро и комфортно получить результат? Вот основные задачи которые решает UX.

Многие web-дизайнеры путают web-дизайн и визуальный дизайн. Кто-то до сих пор считает, что процесс создания дизайна web-сайта - это в первую очередь, создание картинок, иконок, совершенно забывая о фундаменте, о исследовании людей для которых все это рисуется.

Главная задача дизайнера - максимально повысить уровень удовлетворенности конечного пользователя от взаимодействия с продуктом. Под продуктом мы будем понимать любой объект взаимодействия с пользователем, будь то реальный продукт, услуга, web-приложение или web-сайт.

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

RithtWay - исследование. Исследование это самый первый дизайнер при работе над всем проектом. Необходимо четко выявить группу пользователей, максимально выяснить аудиторию, подходящую информацию о интерфейсе, потребность в этой трансляции. Конечно, о получении только на своем личном опыте и своих ощущениях довольно сложно прийти к объективно правильному решению в интерфейсе, не беспристрастим по обнаружению результата вашего творчества, и ваш личный опыт относительно обнаружения продукта может быть весьма ограниченным. Тем не менее, если вы хорошо изучили продукт, для которого реализуется разработка веб-сайта, то можно сделать какие-то захваты, принять решение Самый минимальный, который мы просто обязаны сделать это научиться использовать опыт бизнеса, накидать портрет среднего пользователя продукта. Этот пункт говорит о том, что проектирование UX очень тесно связано с бизнесом.

В начале своего исследования необходимо пообщаться с вашим бизнес-заказчиком. Он является специалистом в своем продукте и у него есть опыт работы с клиентами, он знает свою аудиторию. Необходимо записать все ключевые моменты для тщательного анализа. Также нужно изучить опыт аналогичных продуктов

Wireframing, каркасное моделирование

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

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

Приходится вносить поправки и согласовывать с клиентом. Нужно проработать все страницы веб-сайта или приложен только

после того, как каркас всего веб-сайта готов, перейти к следующему шагу. U1, визуализация после того, как основательно проработан UX, создано несколько каркасов и выбраны наиболее важные варианты, которые могут начаться внезапно. Предварительный просмотр этой прорисовки каркасов, создание единого стиля, оформление. Другими словами, мы работаем над пользовательским интерфейсом. Для решения всех задач используются AdobePhotoshop, приложение Sketch, Inkscape+Gimp или другие инструменты. Для работы с векторной графикой будем использовать Inkscape для создания иконок и внешнего закрытия графика, для работы с растровой графикой - лучшее решение, в AdobePhotoshop.

В веб-дизайне есть правила хорошего тона. Разрабатывая дизайн веб-сайта, веб-дизайнер придерживается определенных негласных правил при оформлении Межстрочный интервал, отступы, шрифты, размеры элементов - это все поддается измерению и есть откровенно плохие реализации. Поэтому можно установить свод правил, придерживаясь которых нельзя сделать пазу всуализацию вашего дизайна. Перечислим некоторые правила:

Не использовать слишком большие заголовки;

Не использовать шрифт меньше 12px;

Не делать слишком маленький или слишком большой межстрочный интервал;

Не растягивать буквы инструментом “Transform”, шрифт должен быть естественно пропорциональным;

Не использовать больше 3 шрифтов на странице;

Не использовать слишком маленький контраст, не печатать светло-серым по белому или тёмно-серым по чёрному;

Использовать интервал между символами с осторожностью если знаете, что делаете и выбранный шрифт позволяет сделать текст “воздушным” наиболее элегантно;

Не делать слишком маленьких отступов между абзацами, заголовками и элементами;

Не использовать верхний регистр букв без необходимости;

Не использовать для основных текстовых блоков слишком сложный декоративный шрифт, это должен быть простой и легко читаемый шрифт какого-либо семейства Sans или Serif;

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

Если иерархия web-сайта содержит более 3-х уровней, не забывайте о так называемых хлебных крошках. Это пункты в меню, которые подскажут пользователю на каком уровне он находится.

Графика, иконки, фотографии

Не масштабировать графику непропорционально;

Не применять режимы наложения слога, отличные от обычных (Нормальный);

Стараться не применять фильтры на изображения, которые должны иметь несколько сборок (обычно и при назначении, например). Все изменяется только за счет наложения нового слоя. Всё должно быть легко построено в HTML на верстке;

Не масштабировать фото до конвертации в умный объект;

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

Если иконки рисуются в Photoshop, не растрируйте их в уменьшенных размерах. Оригинальные смарт-объекты с канками должны быть в достаточной мере учтены для качественной трассиропи;

Цвет;

Не исполинать чистый цвет;

Не использовать более 2-х акцентных цветов на странице и не более двух темно-серых цветов для текста. В идеале - только 1 акцентный цвет и 1 темно-серый для текста;

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



3. Программное обеспечение, необходимое для создания web-сайта

3.1 Утилиты

Рассмотрим программное обеспечение, которое понадобиться при разработке web-сайта.

Для того чтобы автоматизировать процесс web разработки понадобиться такая утилита как gulp.

Gulp - это инструмент, который помогает автоматизировать рутинные задачи web-разработки. Gulp предназначен для решения таких задач, как:

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

Использование различных JavaScript, CSS и HTML препроцессоров (CoffeScript, Less, Sass, Stylus, Jade и т.д);

Минификация CSS и JS кода, а также оптимизация отдельных файлов проекта в один;

Автоматическое создание вендорных префиксов (приставок к названию CSS свойства, которые добавляют производители браузеров для нестандартных свойств) для CSS.

Управление файлами и папками в рамках проекта - создание, удаление, переименование;

Запуск и контроль выполнения внешних команд операционной системы;

Работа с изображениями - сжатие, создание спрайтов, рессайз (png, jpg, svg и др.);

Деплой (отправка на внешний сервер) проекта по FTP, SFTP, Git и т.д.

Подключение и использование в проекте безгранично большого количества Node.js и Gulp утилит, программ и плагинов.

Создание различных карт проекта и автоматизация другого ручного труда.

Можно с уверенностью сказать, что Gulp и множество утилит, написанных для него, подходят для решения практически любой задачи при разработке проекта любой сложности от небольшого веб-сайта до крупного проекта.

Любой проект, использующий Gulp имеет в корне файл gulpfile.js. который содержит набор инструкций по управлению проектом. Сразу хочется сказать, что написание инструкций для Gulp не является программированием, хотя пишутся на языке JavaScript. Для установки galp необходимо установить node.js

Node.js программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода- вывода через свой AР! (написанный на C++), подключать другие neme библиотеки, написанные на разных языках, обеспечивая вызовы к ним из JavaScript-кода Nodeis применяется преимущественно на сервере, выполняя роль web-сервера.

При создании дизайна веб-сайтов в AdobePhotoshop не обойтись без использования какой-либо системы сеток. Можно создать сетку самостоятельно, используя направляющие, либо воспользоваться уже готовым, проверенным решением готовой сеткой Bootstrap в формате PSD. Не смотря на то, что размеры Bootstrap сетки несколько стандартизируют й вариант успешно используют в своей работе огромное количество веб-дизайнеров по всему миру. Кроме того, такая стандартизация позволяет максималью быстро выполнять HTML верстку созданного макета, что приводит к ускорению работы над проектом в усло разработки веб-сайтов на потоке или создание шаблонов.

Браузеры, такие как Opera, Googlechrome, MozillaFirefox для тестирования правильного отображения web-сайта в различных средах.



3.2 Текстовые редакторы

Эти программы будут нужны для написания и редактирования текстовых документов, коими и являются HTML документы. Здесь подойдет даже самый простой редактор «Блокнот», но для удобства лучше воспользоваться специальными программами, которые предназначены для написания HTML кода. Такие программы подсвечивают теги, помогают находить ошибки в коде и лучше структурировать код. Также в них есть множество полезных функций, позволяющих ускорить процесс написания кола. Примерами таких программ являются Notepad++ AptanaStudio, sublimetext. Для наших целей отлично подойдет Sublimetext, так как у него приятный интерфейс, очень гибкая настройка и присутствует функция множественного выделения, которая очень ускоряет процесс верстки.

3.3 Графические редакторы

При создании прототипа и макета веб-сайта можно воспользоваться графическими редакторами, это программы, позволяющие работать с графикой (создавать и изменять различные изображения). Также текстовые редакторы, они бывают простыми и сложными. К простым п первую очередь относят WindowsPaint. К сложным графическим редакторам, которые работают с растровой графикой относится AdobePhotoshopitGimp Для векторной графики используется Inscape, AdobeIllustrCorelDraw. Также можно использовать онлайн-сервис wireframeсe для создания прототипа веб-сайта. В нем можно набросать структуру веб-сайта, обозначить расположение ключевых элементов, их размеры, примерные цвета.



4. Проектирование web-сайта по продажа недвижимости

4.1 Разработка прототипа web-сайта

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

Для начала определимся с общей структурой web-сайта. Это нужно, чтобы изначально понять, каким будет объем будующегоweb-сайта, какие технологии будут использовать и какие функции будет включать в себя web-сайт. Существует несколько основных структур web-сайтов:

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

Рисунок 4.1 Линейная структура web-сайта.

Разновидностью выше рассмотренной структуры web-сайта является линейная структура ресурса с отвлений от нее. Пользователь перемещается с одной страницы на другую в строго определенном порядке. Однако при необходимости он всегда сможет перейти на другую ветвь и без усилий вернуться назад.

Главным достоинством линейной структуры с ответвлениями является относительно несложная возможность web-мастерам создать ее на основе обычной линейной структуры. По мере раскрутки web-сайта в этом довольно часто возникает потребность. Контент сильно разрастается и возникает вопрос улучшения навигации Поэтому важен такой процесс, как нарисовать структуру web-сайта.

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

Чаще всего такую структуру применяют для регистрации посетителей web-сайта. В таком случае все пользователи начинают работу со стартовой страницы. Но потом происходит разделение - частным лицам предлагается одна форма для заполнения информации, а представители коммерчиских структур заполняют другую форму.

Древовидная структура web-сайта.

Главное достоинство такой структуры - универсальность. Она прекрасно подойдет для любого вида ресурса: и для домашней web-странички, и web-сайта-визитки, и корпоративного web-сайта, каталога или портала, структура web-сайта интернет магазина. Также возможен мгновенный доступ к какому угодно разделу или странице ресурса. Модель древовидной структуры предоставлен на рисунке 4.2.

Рисунок 4.2 Древовидная структура web-сайта.

Решетчитая структура

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

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

Использование решетчатой структуры легко может запутать не только пользователя, когда он будет искать информацию, но и самого web-мастера во время размещения контента;

Решетчатую структуру лучше не применять для больших web-сайтов, так как на них размещается очень много гиперссылок;

Легче будет воспринимать такой ресурс, если вы представите пример структуры web-сайта в виде схемы на рисунке 4.3.

Рисунок 4.3 Решетчатая структура web-сайта

Смешанная структура (паутина).

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

Также структуру web-сайта можно разработать самостоятельно или использовать программу для создания структуры web-сайта. (см. рисунок4.4).

Рисунок 4.4 Структура сети.

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

Структура навигации по web-сайту.

Виды навигации можно выделить из двух критериев функционального и визуального

По своим функциям система навигации делится на следующие виды:

*Языковая - навигация, отвечающая за языковой интерфейс и отображениеконтента на выбранном пользователем языке.

Основная - это наиболее важные разделы веб-сайта, как правило меню.

Глобальная - это те ссылки, которые должны быть видны с любой страницывеб-сайта, например, ссылка на главную.

Рекламная - ссылки для привлечения посетителей на рекламные страницывеб-сайта с расположением товаров и услуг.

Тематическая- навигация по страницам веб-сайта одной определенной

тематики (рубрики).

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

С точки зрения оптимизации - это грамотная перелинковка веб-сайта.

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

* Географическая- используется на веб-сайтах, где имеются разделы,

посвященные разным странам.

По визуальному оформлению выделяют следующие виды навигации:

Текстовая - совпадает с определением текстовой в функциональном плане.

Это, пожалуй, самый древний вид навигации.

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

* HTML-формы - помогают в экономии места с помощью выпадающих илиоткрывающихся элементов.

* В Java и Флэш-технологии - с помощью них можно организовать определенную реакцию на действия при наведении курсора, нажатии кнопок мыши или клавиатуры.

4.2 Создание дизайна web-сайта

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

Отрисовка производилась в программе AdobePhotoshop, так как эта программа позволяет быстро и качественно выполнить её. В дизайне используем мягкие цвета. В качестве акцентного цвета используем цвет, взятый из логотипа компании. Дизайн первого экрана представлен на рисунке 4.5.

Рисунок 4.5 Дизайн первого экрана web-сайта

После создания макета web-сайта в Photoshop можно приступать к работе к созданию web-сайта в HTML.



4.3 Верстка web-сайта по продаже недвижимости

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

Также должна содержаться страничка index.html, которая будет являться главной страницей web-сайта.

Перед началом верстки необходимо запустить gulp, который создаст web-сервер на компьютере и позволит в режиме реального времени следить за состоянием верстки.

Для начала мы устанавливаем в файле index.html всю необходимую информацию, подключаем стили, указываем титульную надпись web-страницы, также указываем путь до каскадной таблицы стилей. Все это делается в теге <head> на рисунке 4.6.

Рисунок 4.6 Служебная информация web-страницы

web сайт недвижимость

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

Далее ориентируясь на макет начинаем создавать блоки с нужным содержанием внутри тега <body> и в файле main.saass описывать свойства объектов.

Все отдельные элементы web-сайта удобно заключать в теги <div> и <span>.

Тег <div> и тег <span> не имеют свойств по умолчанию для внешнего отображения, они представляют собой так называемые контейнеры, поэтому к ним можно применять всевозможные CSS-стили, чтобы элементы внтури этих тегов приняли желаемый вид.

Тег <div> изначально был предназначен для деления web-страницы на логические фрагменты, такие как нижний колонтитул, боковое меню и т.п. Но с появлением новой семантической разметки web-страниц с помощью HTML5, необходимость в таком повсеместном использовании тега отпала.

В настоящее время тег <div> используется для группирования блочных элементов. Тег также позволяет объединять любой набор таких элементов, как заголовок, несколько абзацев, список в единственном блоке, который потом можно позиционировать на web-странице, создавая сложную схему разметки.

Тег <div> следует применять только в случае, если для выделения области не подходит никакой другой элемент страницы.

Тег <span> применяется для выделения внутренних (inline) элементов, таких как отдельные слова и фразы, находящихся в пределах абзаца текста или заголовка.

Далее мы подключаем базу данных MongoDB для запуска локального сервера.(см. рисунок4.7).

Рисунок 4.7Подключение базы данных MongoDB

Также необходимо подключить контроллеры для управления backend, которые будут использоваться для передачи информации в базу данных и изменения информации и поддержки web-сайта, при помощи контроллера MVC.

Model, View, Controller (MVC) -- шаблон (паттерн) программирования, разделяющий архитектуру приложения на три модуля: модель (Model), представление (View), контроллер (Controller). Он позволяет изменять каждый компонент независимо друг от друга для простой разработки и поддержки веб-приложений.(см. рисунок4.8).

Рисунок 4.8 Подключение контроллеров

Создаем регистрацию при помощи контроллера authController.js. Данный контроллер работает через regbody. Regbody - объект который имеет тело (body) и содержит в себе почту (mail) и пароль (password), контроллер принимает только модель которую мы задали, в данной модели находится username (имя пользователя), email (почта пользователя), password (пароль пользователя), profileimg (картинка пользователя)(см. рисунок4.9).

Рисунок 4.9Подключение контроллера authController.js

Пароль хешируется при помощи солей (bcrypt.hash) и проходит через token для безопасности (token обновляется каждые 8 дней), и для быстродействия backend. Token необходим для автоматической авторизации через cookieданные которые сохраняются в браузере(см. рисунок4.10-4.11).

Рисунок 4.10- Модель regbody

Рисунок 4.11Табличка для регистрации.

Минимальное количество символов для пароля 8 символов. После регистрации информация о пользователе переходит в базу данных MongoDB которую мы раннее подключили. Изображения пользователя находится в созданной папке public/images (подключенной к базе данных MongoDB)(см. рисунок4.12-4.16).

Рисунок 4.12 Регистрация в базе данных MongoDB

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

Рисунок 4.13- Модель Property.js

Рисунок 4.14Таблица подачи объявления.

Созданное объявление попадает в базу данных MongoBD в раздел real_estate.properties.

Рисунок 4.15 Раздел properties

сайта необходимо будет открыть порты, либо установить сайт на хостинг, и при помощи команд: cdbackend -->npm i; cdclient ->npm i; cdclient ->npmstart; cdbackend ->npmrunstart

Рисунок 4.16Запуск backend и frontend



5. Охрана труда

5.1 Общие требования техники безопасности при работе за ПК

Общие требования безопасности и охраны труда при работе на ПК (персональном компьютере) включают следующие аспекты, которые могут быть рассмотрены в дипломной работе:

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

Регулярные паузы в работе, чтобы предотвратить перенапряжение глаз и мышц.

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

Безопасное использование компьютера:

- Использование стабильного и безопасного электропитания для предотвращения повреждения оборудования и возможности возникновения пожара.

- Регулярная очистка компьютера от пыли и грязи для предотвращения перегрева и сохранения нормальной работы.

- Защита от вредоносного программного обеспечения с помощью антивирусных программ и обновлений безопасности.

- Безопасность данных: резервное копирование данных для предотвращения их потери в случае сбоя системы или атаки вредоносного программного обеспечения.

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

Обучение и информирование: предоставление сотрудникам обучения по правилам безопасности и охране труда при работе на ПК.

Предоставление информации о правильных рабочих практиках и регулярное напоминание о них.

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

5.2 Требования техники безопасности перед началом работы за ПК

Перед началом работы за компьютером важно соблюдать определенные требования техники безопасности, чтобы обеспечить безопасность себя, своих данных и сохранность оборудования. Вот некоторые из них:

Обновленное программное обеспечение: убедитесь, что операционная система и все установленные программы на компьютере обновлены до последних версий, включая антивирусное программное обеспечение и брандмауэры [3].

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

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

Файрвол: убедитесь, что включен и настроен файрвол на вашем компьютере, чтобы контролировать входящий и исходящий сетевой трафик.

Безопасное подключение к сети: Используйте безопасные сети Wi-Fi, особенно при работе с конфиденциальной информацией или производственными данными. Избегайте подключения к публичным и ненадежным Wi-Fi сетям.

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

Физическая безопасность: Обращайте внимание на физическую безопасность своего компьютера. Убедитесь, что он установлен на стабильной поверхности, не подверженной вибрации. Избегайте попадания жидкости на компьютер или клавиатуру.

Неизвестные ссылки и вложения: Будьте осторожны при открытии внешних ссылок или вложений в электронных письмах или мессенджерах. Не открывайте подозрительные файлы или ссылки, которые могут содержать вредоносные программы.

Безопасный выход из системы: всегда выполняйте безопасный выход из системы после завершения работы. Закройте все активные программы и соединения, прежде чем выключить компьютер.

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

Помните, что эти требования не являются исчерпывающим списком, но представляют основные меры, которые следует принимать для обеспечения безопасности при работе за компьютером.

5.3 Требования техники безопасности во время работы за ПК

Во время работы за компьютером существует несколько требований техники безопасности, которые следует соблюдать. Вот некоторые из них:

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

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

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

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

Защита Wi-Fi: если вы используете беспроводное подключение к Интернету (Wi-Fi), убедитесь, что ваша сеть защищена паролем и использует шифрование WPA2 или WPA3. Измените стандартные учетные данные (логин и пароль) для доступа к настройкам маршрутизатора Wi-Fi.

Аутентификация в два этапа:Включите аутентификацию в два этапа (2FA) для всех своих онлайн-учетных записей, где это возможно. Это добавит дополнительный уровень защиты, требуя второй фактор (например, одноразовый код, полученный по SMS или с помощью приложения аутентификации) для входа.

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

Осторожность при скачивании и открытии файлов: Будьте осторожны при скачивании и открытии файлов из незнакомых и ненадежных источников. Проверяйте загружаемые файлы антивирусом перед их открытием.

Ограниченные права пользователя: Используйте ограниченные права пользователя вместо административных прав. Это поможет предотвратить несанкционированные изменения в системе со стороны злоумышленников.

Осведомленность о социальной инженерии: Будьте бдительны по отношению к попыткам социальной инженерии, когда кто-то пытается получить доступ к вашей информации, выдавая себя за другое лицо или организацию. Будьте осмотрительны и не предоставляйте свои личные данные или пароли незнакомым или подозрительным лицам.

5.4 Требования техники безопасности по окончанию работы за ПК

После окончания работы за компьютером также важно соблюдать определенные требования техники безопасности. Вот некоторые из них:

Закрытие сеанса пользователя: Выйдите из своей учетной записи или аккаунта, когда заканчиваете работу на компьютере. Закройте все открытые программы и сессии, чтобы предотвратить несанкционированный доступ к вашим данным.

Блокировка экрана:если вы покидаете рабочее место, блокируйте экран компьютера, чтобы предотвратить несанкционированный доступ к вашим данным. Используйте пароль или комбинацию клавиш для разблокировки экрана при возвращении.



5.5 Требования техники пожарной безопасности при работе за пк

Требования к технике пожарной безопасности при работе за компьютером (ПК) имеют важное значение для обеспечения безопасности рабочего места и предотвращения возникновения пожара. Вот некоторые основные требования, которые следует соблюдать:

Проверка и обслуживание электрооборудования: регулярно проверяйте состояние розеток, удлинителей, кабелей питания и других электрических устройств. Убедитесь, что они в хорошем состоянии без повреждений. Заменяйте старые и поврежденные кабели или устройства немедленно.

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

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

Пожаротушители: разместите огнетушитель на видном и доступном месте рядом с рабочим местом. Убедитесь, что он находится в исправном состоянии и регулярно проходит проверку.

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

Правильное использование удлинителей: если вы используете удлинители, убедитесь, что они соответствуют требованиям безопасности и обладают защитой от перегрузки и короткого замыкания.

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

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



ПриложениеА

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta name="theme-color" content="#000000" />

<meta name="description" content="Web site created using create-react-app" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link

href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;0,900;1,500;1,700&display=swap"

rel="stylesheet">

<title>React App</title>

</head>

<body>

<noscript>You need to enable JavaScript to run this app.</noscript>

<div id="root"></div>

</body>

</html>

Manifest.json

{

"short_name": "React App",

"name": "Create React App Sample",

"icons": [

{

"src": "favicon.ico",

"sizes": "64x64 32x32 24x24 16x16",

"type": "image/x-icon"

},

{

"src": "logo192.png",

"type": "image/png",

"sizes": "192x192"

},

{

"src": "logo512.png",

"type": "image/png",

"sizes": "512x512"

}

],

"start_url": ".",

"display": "standalone",

"theme_color": "#000000",

"background_color": "#ffffff"

}

AuthController.js

const authController = require('express').Router()

const User = require('../models/User')

const bcrypt = require('bcrypt')

const jwt = require("jsonwebtoken")

authController.post('/register', async (req, res) => {

try {

const isExisting = await User.findOne({ email: req.body.email })

if (isExisting) {

throw new Error("Email is already taken by another user")

}

const hashedPassword = await bcrypt.hash(req.body.password, 10)

const newUser = await User.create({ ...req.body, password: hashedPassword })

const { password, ...others } = newUser._doc

const token = jwt.sign({ id: newUser._id }, "secret322", { expiresIn: '8d' })

return res.status(201).json({ others, token })

} catch (error) {

return res.status(500).json(error.message)

}

})

authController.post("/login", async (req, res) => {

try {

const user = await User.findOne({ email: req.body.email })

if (!user) {

throw new Error('Wrong credentials. Try again!')

}

const comparePass = await bcrypt.compare(req.body.password, user.password)

if (!comparePass) {

throw new Error('Wrong credentials. Try again!')

}

const { password, ...others } = user._doc

const token = jwt.sign({ id: user._id }, "secret322", { expiresIn: '8d' })

return res.status(200).json({ others, token })

} catch (error) {

return res.status(500).json(error.message)

}

})

module.exports = authController

CommentController.js

const verifyToken = require('../middlewares/verifyToken')

const Comment = require('../models/Comment')

const commentController = require('express').Router()

// get all comments from post

commentController.get('/:listingId', async (req, res) => {

try {

const comments = await Comment

.find({ listing: req.params.listingId })

.populate("author", '-password')

return res.status(200).json(comments)

} catch (error) {

return res.status(500).json(error.message)

}

})

// create a comment

commentController.post('/', verifyToken, async (req, res) => {

try {

const createdComment = await (await Comment.create({ ...req.body, author: req.user.id }))

.populate('author', '-password')

return res.status(201).json(createdComment)

} catch (error) {

return res.status(500).json(error.message)

}

})

// delete a comment

commentController.delete('/:commentId', verifyToken, async (req, res) => {

try {

const comment = await Comment.findById(req.params.commentId)

if (comment.author.toString() === req.user.id) {

await Comment.findByIdAndDelete(req.params.commentId)

return res.status(200).json({ msg: "Comment has been successfully deleted" })

} else {

return res.status(403).json({ msg: "You can delete only your own comments" })

}

} catch (error) {

return res.status(500).json(error.message)

}

})

module.exports = commentController

PropertyController.js

const verifyToken = require('../middlewares/verifyToken')

const Property = require('../models/Property')

const User = require('../models/User')

const propertyController = require('express').Router()

// get all

propertyController.get('/getAll', async (req, res) => {

try {

const properties = await Property.find({}).populate("currentOwner", '-password')

console.log(properties)

return res.status(200).json(properties)

} catch (error) {

console.error(error)

}

})

// get featured

propertyController.get('/find/featured', async (req, res) => {

try {

const featuredProperties = await Property.find({ featured: true }).populate("currentOwner", '-password')

return res.status(200).json(featuredProperties)

} catch (error) {

return res.status(500).json(error)

}

})

// get all from type

propertyController.get('/find', async (req, res) => {

const type = req.query

let properties = []

try {

if (type) {

properties = await Property.find(type).populate("owner", '-password')

} else {

properties = await Property.find({})

}

return res.status(200).json(properties)

} catch (error) {

return res.status(500).json(error)

}

})

// TODO FETCH TYPE OF PROPERTIES. EX: {BEACH: 34, MOUNTAIN: 23}

propertyController.get('/find/types', async (req, res) => {

try {

const beachType = await Property.countDocuments({ type: 'beach' })

const mountainType = await Property.countDocuments({ type: 'mountain' })

const villageType = await Property.countDocuments({ type: 'village' })

return res.status(200).json({ beach: beachType, mountain: mountainType, village: villageType })

...