МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РЕСПУБЛИКИ КАЗАХСТАН
УПРАВЛЕНИЕ ОБРАЗОВАНИЯ ГОРОДА АЛМАТЫ
ИННОВАЦИОННЫЙ ТЕХНИЧЕСКИЙ КОЛЛЕДЖ ГОРОДА АЛМАТЫ
КУРСОВАЯ РАБОТА
на тему: Разработка сайта-визитки мессенджера для компаний
Дисциплина: Web-программирование и Интернет технологии
Специальность: 1304000 – «Вычислительная техника и программное обеспечение»
Квалификация: 1304053 – «Техник по защите информации»
Выполнил(а): Ильяш Рустам Тимурович
(Ф.И.О. обучающегося)
Группа: ТЗИ-20Р
Проверил (а): Аханкызы А.
Дата защиты «17» марта 2023 г.
Оценка ____________
|
АЛМАТЫ 2023
Содержание
ВВЕДЕНИЕ 3
1 ОСНОВНАЯ ЧАСТЬ 4
1.1 Web-программирование 4
1.2 Основы HTML 6
1.3 CSS 10
1.4 JavaScript 10
2. СПЕЦИАЛЬНАЯ ЧАСТЬ 12
2.1 Постановка задачи 12
2.2 Описание 12
2.3 Архитектура проекта 16
24
24
ЗАКЛЮЧЕНИЕ 25
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ 26
ВВЕДЕНИЕ
В данной курсовой работе будет затронута тема «Разработка сайта для магазина одежды». Она представляет собой небольшой сайт, который имеет всего несколько веб-страниц, содержит четкую и последовательную информацию о магазине одежды.
Сайт создается для того, чтобы представлять определенную продукцию в интернете.
При создании данного проекта действительно качественного и привлекательного сайта были просмотрены аналогичные отрасли сайты и сделаны выводы по тому, что необходимо сайту. Таким образом сайт был облегчен от ненужной и навязчивой информации. Для того чтобы пользователю было легче и приятнее взаимодействовать с сайтом.
Основываясь на всем сказанном, можно сделать вывод, что при создании сайта основной задачей было предоставить аудитории магазина нужную информацию, обеспечить полным взаимодействием с поддержкой и возможностью приобрести товар через интернет.
Благодаря этому проекту можно основать базу для развития последующих своих работ. Их можно будет уже расширять и доводить до идеала. Делать масштаб и качество более продвинутым. Выбрав интернет-магазин первым своим проектом я ничуть не жалею и даже считаю важным шагом в моем последующем развитии в освоении интернет-пространства.
1 ОСНОВНАЯ ЧАСТЬ
1.1 Web-программирование
Веб-программисты рассматривают веб-страницы, приложения и сайты, используют языки программирования, такие как HTML, CSS, JavaScript, PHP, Python, Ruby и многие другие. Эти языки позволяют создавать страницы, которые могут быть получены с доступом к Интернету. Веб-программирование также включает в себя работу с базами данных, серверами, возможностью управления контентом и множеством других технологий, необходимых для создания веб-приложений.
Веб-программирование - это процесс создания и поддержки веб-приложений, которые работают в Интернете. Веб-программисты используют различные технологии, языки программирования и инструменты для создания веб-сайтов, интернет-магазинов, социальных сетей, приложений для обмена сообщениями, онлайн-форумов и других веб-приложений.
Существует множество технологий и языков программирования для веб-разработки, таких как HTML, CSS, JavaScript, PHP, Python, Ruby, SQL и многие другие. Каждый язык программирования имеет свои особенности и включает стороны и отношения в зависимости от безопасности к проекту.
Веб-программирование также включает работу с базами данных, создание серверной и клиентской частей приложений, разработку алгоритмов и логики работы сайта, а также тестирование и оптимизацию производительности веб-приложений. Веб-программирование постоянно развивается и развивается, отслеживая изменения требований к рынку и технологическим новинкам. Хороший веб-программист должен быть к постоянному обучению и совершенствованию своих навыков, чтобы оставаться эффективным на рынке веб-разработки.
Веб-программисты используют множество различных инструментов для разработки сайтов. Несмотря на то что существуют десятки языков программирования, которые могут быть использованы для написания скриптов, все они делятся на 2 типа. Одни из них работают на стороне сервера, т.е. непосредственно на самом сайте. Другие же находятся на стороне клиента, на компьютере самого пользователя, который просматривает сайт.
Трудно представить работу, например, форума, без скриптов. В данном случае они помогают в сборе и хранении информации – приеме и сохранении отправленных сообщений. Скрипты, работающие на клиентской стороне, дают возможность реагировать на действия пользователя и изменять вид и содержание страницы, которая уже была загружена в память компьютера без ее повторного сохранения. Чаще всего для реализации определенной задачи используются оба типа скриптов.
Языки Си и Паскаль были уже достаточно популярными и развитыми языками программирования на момент появления интернета. Но нужны были все новые функции, потому что программирование в интернете имело свою специфику. Было необходимо упростить работу с типичными данными и элементами веб-страниц, а так же ограничить функциональность средств программирования для злоумышленников. Они не должны были иметь возможность нанести какой-либо вред серверам или пользовательским компьютерам с помощью написания или изменения скриптов. Именно поэтому начали появляться все новые и более современный языки и средства веб-программирования. Рассмотрим некоторые из них.
Javascript – язык, появившийся в начале 90х. Фирма-разработчик Netscape в то время была одной из самых популярных благодаря своему браузеру Netscape Navigator. Он был самым широко используемым для просмотра сайтов. Не стоит путать языки javascript и java. Несмотря на то, что основа у них одна, это совершенно разные языки программирования. Скрипты, написанные на javascript, работают на стороне клиентского персонального компьютера, точнее говоря в самом браузере, с помощью которого открыта веб-страница. Они не требуют никаких дополнительных программ или плагинов и могут быть добавлены в html-код страницы, после чего будут выполняться в любом браузере. Javascript практически не имеет конкурентов в своей области, простой и удобный язык, который позволяет реагировать на пользовательские действия и управлять содержимым веб-страницы. Именно с него рекомендуется начинать свое обучение веб-разработчику.
Java – язык, специально созданный для работы и интернете и компьютерных сетях. Данный язык позволяет создавать приложения как для стороны сервера, так и для клиента. Но Java уже не позволяет просто вставить html-код на страницу, как в случае с javascript. Для использования и управления такими приложениями используется специальная виртуальная машина Java. Кроме этого, язык java позволяет создавать java-апплеты – небольшие самостоятельные приложения, которые могут быть вызваны в html-коде. Их выполнение также будет обеспечено браузером.
Работоспособность скриптов, написанных на языке javascript, можно легко проверить, открыв html-файл в браузере. Но серверные скрипты могут работать исключительно на стороне сервера. Сервером может быть как персональных компьютер в сети, на котором расположены веб-страницы, так и специализированная программа, которая обеспечивает все необходимые функции. Нет необходимости загружать скрипт на языке php для проверки его работоспособности на удаленный сервер. Вы можете использовать один и тот же компьютер в качестве клиента и сервера, установив на него программу-сервер, которая поддерживает php. Сервер Apache на сегодняшний день является самым популярным, SSI – программа, входящая в пакет Windows, Denver – сравнительно небольшой пакет, который обеспечивает поддержку популярных языков программирования и всех серверных функций.
Что выбрать? Изучение веб-программирования и создание сайта по своим представлениям или использование конструктора?
В случае, если у вас недостаточно времени для изучения языков программирования, или все функции, которые вы бы хотели видеть на своем сайте, присутствуют в настройках конструктора, то выбор очевиден. Но все же вы можете столкнуться с немалым количеством минусов. Сложность настройки под конкретные требования, емкость кода, замедляющая работу сайта, проблемы с безопасностью – все это может затруднить создание и работу с сайтом. Поэтому изучение основ программирования и их применение станет лучшим решением для тех, кто хочет начать создавать свои собственные сайты и проекты.
1.2 Основы HTML
HTML (язык гипертекстовой разметки) — это язык разметки для создания веб-страниц и других веб-содержимого. HTML используется для определения структур, содержания и положений элементов на веб-страницах. Он состоит из тегов и атрибутов, определяющих, какой контент отображается на странице и как он отображается.
Вот основные некоторые элементы, которые вы найдете в HTML:
Теги: HTML использует различные теги для определения элементов на странице.
Например, используется для определения абзаца текста.
Атрибуты: Атрибуты используются для определения дополнительных характеристик элементов. Например, Изображениеполучается изображение с звука "image.jpg" и альтернативным текстом "Изображение".
Ссылки: HTML использует ссылки для связывания других страниц, веб-адресов или файлов с запросами. Например, страница, Пример создания гиперссылки по адресу http://www.example.com.
Списки: HTML поддерживает несколько видов списков, таких как маркированные, нумерованные и определения списков. Например, Список элементов определяется маркированный список. Формы:
Формы используются для сбора информации от пользователей, таких как имена, адреса электронной почты и т.д. Д. Например, ... получить форму страницы, которая отправляет данные на submit.php методом POST.
Эти элементы - лишь некоторые из самых базовых элементов, которые выявляются в HTML. По мере того, как вы продолжаете изучать язык, вы узнаете о других элементах, таких как таблицы, CSS и JavaScript, которые затрагивают вашу веб-страницу, а также более взаимодействуют и влияют на приложения.
HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
Моя кошка очень раздражена
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
Моя кошка очень раздражена
Главными частями нашего элемента являются:
1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
3. Контент (Content): Это контент элемента, который в данном случае является просто текстом.
4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.
Элементы также могут иметь атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:
1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
2. Имя атрибута, за которым следует знак равенства.
3. Значение атрибута, заключённое с двух сторон в кавычки.
Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово "очень" в элемент , который указывает, что слово должно быть сильно акцентированно.
Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент
, затем элемент , потом мы должны закрыть сначала элемент , затем
.
Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать.
Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент ![]() , который уже имеется в нашем HTML.
Он содержит два атрибута, но не имеет закрывающего тега , и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.
Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html.
Здесь мы имеем:
1. — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
2. — элемент . Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент. — элемент . Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
3. . В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
4. — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
5. — элемент . Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.
<br />Давайте снова обратим наше внимание на элемент изображения:
<br />
<br />Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.
<br />Мы также включили атрибут alt (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:
<br />1. У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
<br />2. Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:
<br />Альтернативный текст - это "пояснительный текст". Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст "My test image" ("Моё тестовое изображение") не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth" ("Логотип Firefox: огненный Лис вокруг Земли").
<br />Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h2> (en-US)–<h6> (en-US), хотя обычно вы будете использовать не более 3-4.
<br />Как было сказано раньше, элемент
<br />предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента.
<br />Добавьте свой образец текста в один или несколько абзацев, расположенных прямо под элементом <img>.
<br />Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:
<br />1. Ненумерованные списки - это списки, где порядок пунктов не имеет значения, как в списке покупок. <a href="/peni-bojinsha-oritindi-bailau-sratari.html">Они оборачиваются в элемент </a><ul>.
<br />2. Нумерованные списки - это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <ol>.
<br />Каждый пункт внутри списков располагается внутри элемента <li> (list item, элемент списка). Например, если мы хотим включить часть следующего фрагмента абзаца в список.
<br />Ссылки очень важны — это то, что делает Интернет Интернетом.
<br />Чтобы добавить ссылку, нам нужно использовать простой элемент — <a> — a это сокращение от "anchor" ("якорь"). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:
<br />1. Выберите некоторый текст. Мы выбрали текст "Манифест Mozilla".
<br />2. Оберните текст в элемент <a>.
<br />3. Задайте элементу <a> атрибут href.
<br />Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку.
<br />Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.
<br />href сначала может выглядеть довольно непонятым выбором для имени атрибута. href образуется как hypertext reference ("гипертекстовая ссылка").
<br />
<p> 1.3 CSS
<br />CSS (каскадные таблицы стилей) — это стиль, который используется для оформления и стилизации веб-страниц. CSS позволяет управлять внешним видом элементов HTML, таких как цвет, шрифт, размер, расположение, отступы, рамка, фоны и т.д.</p>
<br />Разделение CSS на две основные части: селекторы и свойства. Селекторы позволяют выбирать элементы HTML, которые необходимо стилизовать, определять свойства, как будут выглядеть эти элементы.
<br />Пример использования CSS:
<br />HTML-код:
<br />```html Добро пожаловать на мою первую веб-страницу
<br />Это текст, который будет найден на странице. Он будет располагаться в нескольких строках и выглядеть довольно просто. Мы будем использовать CSS, чтобы сделать его более красивым и удобочитаемым.
<br />```
<br />Мы использовали стиль тега, чтобы определить стили для нашей страницы. Внутри стиля тега мы наблюдаем три селектора (тело, h1, p) и назначаем для каждого из них определенный набор свойств.
<br />Селектор body отвечает за весь контент на странице, а селекторы h1 и p отвечают соответственно за заголовок и параграф на странице.
<br />С помощью свойств мы изменяем размер и начертание шрифта, цвет фона, отступы и выравнивание текста. После определения стиля мы можем использовать любой из запрещенных селекторов в HTML-коде для применения в определенных стилях.
<br />Кроме того, CSS поддерживает просмотр контента, означает, что, если два правила CSS охватывают, то предпочтительно применяет правило, которое более конкретно использует элемент, например, если мы хотим выбрать стиль только для одного элемента на странице Кроме того.
<br />
<p> 1.4 JavaScript</p>
<br />JavaScript — это язык программирования, используемый в основном для создания интерактивных интерфейсных веб-приложений. Первоначально он был разработан в середине 1990-х Бренданом Эйхом из Netscape Communications.
<br />JavaScript — это широко <a href="/praktika-2-javascript.html">используемый язык сценариев</a>, что означает, что он позволяет создавать динамический контент, взаимодействующий с пользователями. Он выполняется на стороне клиента (т. е. в веб-браузере пользователя) и может использоваться для широкого круга задач, таких как проверка формы, интерактивные карты и анимация.
<br />Важно отметить, что JavaScript не связан с Java, несмотря на схожее название, и это не то же самое, что jQuery, который является библиотекой JavaScript. Хотя он в основном используется в Интернете, JavaScript также можно использовать вне браузера для разработки на стороне сервера с использованием Node.js.
<br />Некоторые популярные фреймворки и библиотеки, созданные с помощью JavaScript, включают React, Angular, Vue.js и jQuery. JavaScript также позволяет создавать веб-приложения, такие как Google Docs, которые в значительной степени зависят от сценариев на стороне клиента.
<br />С развитием веб-технологий JavaScript стал жизненно важным языком, который разработчики должны изучать для создания динамических и интерактивных веб-приложений.
<br />API - это готовые наборы блоков кода, которые позволяют разработчику реализовывать программы, которые в противном случае было бы трудно или невозможно реализовать. Они делают то же самое для программирования, что готовые комплекты мебели делают для домашнего строительства - гораздо проще брать готовые панели и скручивать их вместе, чтобы сделать книжную полку, чем самому разрабатывать дизайн, ходить в поисках правильной древесины, вырезать все панели необходимого размера и формы, найти подходящие винты, а затем собрать их вместе, чтобы сделать книжную полку.
<br />Они обычно делятся на две категории.
<br />API-интерфейсы браузера встроены в ваш веб-браузер и могут отображать данные из окружающего компьютерного окружения или делать полезные сложные вещи. Например:
<br />1. API-интерфейс DOM (Document Object Model) позволяет вам манипулировать HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т. д.. Каждый раз, когда вы видите всплывающее окно на странице или какое-то новое содержимое, Как мы видели выше в нашем простом демо), например, это DOM в действии.
<br />2. API геолокации извлекает географическую информацию. Так Google Maps может найти ваше местоположение и нанести его на карту.
<br />3. API Canvas и WebGL позволяют создавать анимированные 2D и 3D-графики. Люди делают некоторые удивительные вещи, используя эти веб-технологии - см. Chrome Experiments и webglsamples.
<br />4. Аудио и видео API, такие как HTMLMediaElement и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, такие как проигрывание аудио и <a href="/saba-tairibi-bejne-jazu-v2.html">видео прямо на веб-странице</a>, или захватывать видео с веб-камеры и отображать его на Чужой компьютер (попробуйте наш простой демонстрационный снимок, чтобы понять идею).
<br />JavaScript (JS) — это интерпретируемый язык программирования, который используется для создания полнотекстовых веб-страниц и приложений. Он был разработан компанией Netscape в 1995 году и стал широко привлекательным в мире веб-разработок.
<br />Одной из сильных сторон JS является его возможность использования без необходимости установки дополнительного программного обеспечения. Он может быть встроен в HTML-код веб-страницы и может взаимодействовать с приложениями на страницах, управлять анимацией, формами, проверять данные и т.д.
<br />JS имеет множество фреймворков и библиотек, которые объединяются под термином «экосистема JavaScript». Некоторые из наиболее популярных фреймворков и библиотек включают в себя React, Angular, Vue.js, Node.js, Express.js и другие.
<br />Некоторые из особенностей JS включают в себя:
<br />- Типичная типизация
<br />- Объектная ориентация
<br />- Функциональное программирование
<br />- Асинхронное программирование JS является из самых популярных языков в современном мире и его использование расширяется с учетом веб-технологий.
<br />
<p> 2. СПЕЦИАЛЬНАЯ ЧАСТЬ</p>
<br />
<p> 2.1 Постановка задачи</p>
<br />Необходимые технические специалисты для разработки:
<br />1. Front-end разработчик - 1
<br />2. Верстальщик - 1
<br />3. Back-end - 1
<br />4. UI/UX дизайнер -1
<br />5. Копирайтер - 1
<br />Перед тем, как приступить к созданию продукта, как в данном моменте - это сайт для магазина одежды, необходимо задуматься над целевой аудиторией, дизайном и других пожеланиях заказчика.
<br />В моем случае сайт создается по заданному мною стилю.
<br />На основе описанного технического задания (далее ТЗ), делается прототип, после происходит процесс создания самого дизайна сайта на основе уже созданного прототипа. Для создания дизайна сайта, необходимо подбирать необходимые блоки и компоненты, которые смогут ответить сами на себя.
<br />Также не забывая о том, что у компании есть собственные корпоративный стиль. Навигация по самому сайту выглядит удобной, что позволяет простому пользователю найти нужную информацию о приложении.
<br />
<p> 2.2 Описание</p>
<br />Сам сайт представляет из себя 4 блока считая шапку. Начало берет header(шапка). Он вмещает в себе:
<br />-логотип;
<br />-каталог;
<br />-отзывы;
<br />-оплату и доставку;
<br />-сертификаты;
<br />-контакты;
<br />-поисковик;
<br />-избранное;
<br />
<br />Рисунок 2.2.1 Header
<br />
<p>Затем переходя ко 2-му блоку можем лицезреть задний фон с продукцией, информацией о событиях и кнопку ведущую на ознакомление с ними. Также в правом нижнем углу есть 3 кнопки ведущие на соц.сети магазина.</p>
<br />
<br />Рисунок 2.2.2 второй блок сайта
<br />
<p>Третий блок представляет из себя скрольную ленту с товаром магазина.</p>
<br />
<br />Рисунок 2.2.3 третий блок сайта
<br />
<br />
<br />
<br />Рисунок 2.2.4 Третий блок сайта измененный
<br />Четвертый блок содержит в себе информацию о сертификатах и кнопку для оформления.
<br />
<br />Рисунок 2.2.5 четвертый блок сайта
<br />
<p>Таблица 2.2 – Время и цена выполнения проекта</p>
<br /><center> <table width="600" cellpadding="7" cellspacing="0"> <col width="82"> <col width="142"> <col width="172"> <col width="146"> <tr valign="top"> <td width="82" height="59" bgcolor="#deeaf6">
<br />№
<br /></td> <td width="142" bgcolor="#deeaf6">
<br />Задание
<br /></td> <td width="172" bgcolor="#deeaf6">
<br />Затраченное время
<br /></td> <td width="146" bgcolor="#deeaf6">
<br />Цена
<br /></td> </tr> <tr valign="top"> <td width="82" height="52" bgcolor="#deeaf6">
<br />1
<br /></td> <td width="142" bgcolor="#deeaf6">
<br />Дизайн
<br /></td> <td width="172" bgcolor="#deeaf6">
<br />2 часа
<br /></td> <td width="146" bgcolor="#deeaf6">
<br />60$
<br /></td> </tr> <tr valign="top"> <td width="82" height="46" bgcolor="#deeaf6">
<br />2
<br /></td> <td width="142" bgcolor="#deeaf6">
<br />Вёрстка
<br /></td> <td width="172" bgcolor="#deeaf6">
<br />7 часа
<br /></td> <td width="146" bgcolor="#deeaf6">
<br />42$
<br /></td> </tr> <tr valign="top"> <td width="82" height="42" bgcolor="#deeaf6">
<br />3
<br /></td> <td width="142" bgcolor="#deeaf6">
<br />Логика клиента
<br /></td> <td width="172" bgcolor="#deeaf6">
<br />1 час
<br /></td> <td width="146" bgcolor="#deeaf6">
<br />6$
<br /></td> </tr> <tr valign="top"> <td width="82" height="50" bgcolor="#deeaf6">
<br />4
<br /></td> <td width="142" bgcolor="#deeaf6">
<br />Back-end
<br /></td> <td width="172" bgcolor="#deeaf6">
<br />2 часа
<br /></td> <td width="146" bgcolor="#deeaf6">
<br />10$
<br /></td> </tr> </table> </center>
<br />
<p>Итоговый вид дизайна выглядит следующим образом:</p>
<br />
<br />Рисунок 2.2.6 Итоговый дизайн сайта
<br />
<p> 2.3 Архитектура проекта</p>
<br />
<br />Рисунок 2.3.1 – Часть кода Html
<br />
<br />
<br />Рисунок 2.3.2 – Часть кода Html
<br />
<br />
<br />Рисунок 2.3.3 – Часть кода Html
<br />
<br />
<br />Рисунок 2.3.4 – Часть кода Html
<br />
<br />
<br />Рисунок 2.3.5 – <a href="/css-izmeti-css-tarihi-css-negizi-4-css-tegi-ts.html">Часть кода CSS
</a><br />
<br />Рисунок 2.3.6 – Часть кода CSS
<br />
<br />Рисунок 2.3.7 – Часть кода CSS
<br />
<br />
<br />Рисунок 2.3.8 – Часть кода CSS
<br />
<br />Рисунок 2.3.9 – Часть кода CSS
<br />
<br />
<br />Рисунок 2.3.10 – Часть кода CSS
<br />
<br />Рисунок 2.3.11 – Часть кода CSS
<br />
<br />
<br />Рисунок 2.3.12 – Часть кода CSS
<br />
<br />Рисунок 2.3.13 – Часть кода CSS
<br />
<br />
<br />Рисунок 2.3.14 – Часть кода CSS
<br />
<br />Рисунок 2.3.15 – Часть кода CSS
<br />
<br />Рисунок 2.3.16 – Часть кода CSS
<br />
<p> ЗАКЛЮЧЕНИЕ</p>
<br />Данная работа была предназначена для создания проекта сайта-визитки. Во время создания сайта-визитки было обращено внимание на:
<br />1. Хороший дизайн. Текст является читабельным, а глаза посетителя не устают от ярких цветов и картинок. Сайт был создан в фирменном стиле компании, избегая сочетания более, чем 3 цветов и множества шрифтов.
<br />2. Логично структурированное наполнение. Посетитель интуитивно понимает и быстро находит нужную информацию. Структурированные тексты, выделенные заголовки, а контактная информация расположена в порядке приоритетности.
<br />3. Коммуникация с посетителем. Обратная связь работает без ошибок.
<br />4. Скорость загрузки. Вес и количество изображений, анимированный дизайн, вес сайта и хостинг – это все влияет на скорость. Скорость около 2 секунд.
<br />5. Продвижение сайта. Так как на сайте-визитки мало текстов, SEO продвижение слегка затрудняется, но возможно, как минимум по брендовым запросам компании. Было уделено особое внимание составлению семантического ядра и перелинковке на сайте.
<br />Была поставлена и достигнута цель работы, состоявшая в разработке прототипа, дизайна сайта. У данного проекта имеется несколько преимуществ:
<br />1. Лаконичная, но емкая презентация компании и продукта.
<br />2. В случае необходимости можно масштабировать до полного корпоративного сайта.
<br />3. Привлечение клиентов в интернете, а не только оффлайн.
<br />4. Оптимальная стоимость создания.
<br />5. Быстрые сроки разработки.
<br />6. Простота в обслуживании.
<br />Мой проект сайт-визитка является отличным решением для многих бизнесов и частных лиц, которым необходимо разместить информацию о себе в интернете и привлечь новых клиентов. Моя работа была грамотно создана, продумана, оптимизирована, является надежным ресурсом приносит успех не хуже, чем полноценный корпоративный сайт.
<br />Таким образом цель работы достигнута, а поставленные задачи выполнены в этой курсовой работы.
<p>СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ</p>
<br />1. Электронный ресурс: [https://professorweb.ru/my/html/html5/level1/web_info.php];
<br />2. Электронный ресурс: [https://nadip.ru/veb-programmirovanie-chto-eto-takoe-i-s-chem-ego-edyat/];
<br />3.Электронный ресурс:[https://developer.mozilla.org /ru/docs/Learn/JavaScript/ First_ steps/What_is_JavaScript];
<br />4.Электронный ресурс: [https://developer.mozilla.org/ru/docs /Learn /CSS/First_steps/What_is_CSS];
<br />5. Электронный ресурс: [https://developer.mozilla.org/ru/docs/Learn /JavaScript/ First_steps/Arrays];
<br />6. Электронный ресурс: [https://developer.mozilla.org/ru/docs /Learn/JavaScript/ First_steps];
<br />7.Электронный ресурс: [https://developer.mozilla.org/ru/docs /Learn/ JavaScript/ First_steps/Math];
<br />8.Электронный ресурс: [https://developer.mozilla.org/ru/docs/Learn /JavaScript /First_steps/Useful_string_methods];
<br />9. Прохоренок Н. А. python 3 и pyQt. Разработка приложений. – БХВ-Петербург, 2012.
<br />10. Рамальо Л. Python. К вершинам мастерства. – Litres, 2019.
<br />Наоми С. Python. Экспресс-курс. 3-е изд. – " Издательский дом"" Питер""", 2018.
<br />11. Любанович Б. Простой Python. Современный стиль программирования. – " Издательский дом"" Питер""", 2016.
<br />
<br />
<br /> </a></a></a></h6>
Достарыңызбен бөлісу: |
