СОДЕРЖАНИЕ
ВВЕДЕНИЕ ....................................................................................................... 4
1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ ........................................................................ 6
1.1. Актуальность темы ................................................................................... 6
1.2. Выбор и описание программных средств. .............................................. 7
1.3. Детальная концепция web-сайта ............................................................. 11
2. ПРАКТИЧЕСКАЯ ЧАСТЬ ........................................................................ 12
2.1. Верстка сайта ............................................................................................12
2.2. Технические и программные требования при разработке .................. 14
ЗАКЛЮЧЕНИЕ .............................................................................................. 15
СПИСОК ЛИТЕРАТУРЫ............................................................................... 16
ПРИЛОЖЕНИЕ .............................................................................................. 17
3
ВВЕДЕНИЕ
Сейчас интернет-технологии являются самой быстро развивающейся
областью информатики. Большинство пользователей ПК имеют доступ к
ресурсам сети Интернет. Он задумывался как средство общения и передачи
информации. В наши дни Интернет представляет собой хранилище огромного
объема информации по любой тематике. Большая часть этой информации
находится в свободном доступе и хранится в виде web-страниц, которые и
образуют web-сайты, следовательно, чтобы добавить свои данные в Сеть,
необходимо иметь представление о способах создания и обслуживания HTMLдокументов.
Путешествуя
по интернету,
можно найти много очень хорошо
выполненных сайтов, которые быстро загружаются, привлекательны на вид,
имеют четко разграниченную по разделам информацию и удобные функции
навигации.
Если вы задерживаетесь на каком-либо сайте на длительное время и даже
не осознаете этого, то, по всей видимости, такой сайт очень хорошо продуман.
Вернитесь обратно и попробуйте осмыслить полную картину. Можете ли вы
увидеть структуру, организацию? Легко ли воспринимается информация?
Понимание движения информационных потоков — это первый шаг в создании
функционального, удобного в работе сайта. Если вы поймете, как работает эта
концепция, и примените ее при создании собственного сайта, то вы уже тем
самым опередите большинство других разработчиков.
Цель моей работы состоит в том, чтобы самостоятельно спроектировать и
реализовать Web-сайт на тему «Процессоры Intel и их характеристики.
История развития. Выбор логической структуры процессора».
Задачи:
1. Ознакомиться с современными Интернет-технологиями и, по
возможности, использовать их в своей разработке;
4
2. Изучить основные понятия и программный инструментарий,
применяемый для разработки и создания Web-сайтов;
3. Выявить и учесть методы и способы представления на Webстраницах различных видов информации (текстов и изображений);
4. Ознакомиться с основными правилами и рекомендациями по
разработке и созданию Web-сайтов и неукоснительно следовать им
в своей практике;
5. Определиться со структурой Web-страниц;
6. Представить
пошаговую
5
стратегию
разработки
web-сайта.
ТЕОРЕТИЧЕСКАЯ ЧАСТЬ
1.1. Актуальность темы
Разработка сайта и управление им на сегодняшний день для большинства
организаций становится насущной необходимостью. На сегодня сайт выступает
как средство коммуникации привлечения целевой аудитории.
Интернет в наши дни – это целая индустрия, быстро проникающая во все
области человеческой деятельности. Огромное количество компаний во всем
мире видят в Интернет большой коммерческий потенциал и возможность
перевода своего бизнеса на качественно новый уровень. Благодаря постоянному
совершенствованию технологий, скорость доступа растет, а цена становится всё
более приемлемой. Интернет находит своё применение во многих сферах, не
обходит стороной и деятельность коммерческих фирм.
Реклама в печатных изданиях неспособна в полной мере осветить
деятельность организации, информация в рекламных буклетах и брошюрах
быстро теряет актуальность. В этом ключе разработка сайта открывает мир
новых возможностей и способов достижения бизнес-целей посредством
невероятно обширного арсенала рекламных средств и стратегий. Разработать
сайт означает показать свою современность и актуальность. Разработать сайт
для организации значит «быть на уровне», быть конкурентоспособным, ведь в
любом деле применение инновационных технологий влияет на образ и оценку
организации. Именно поэтому, разработка сайта сегодня является довольно
актуальной и востребованной услугой.
6
1.2. Выбор и описание программных средств и среды разработки
сайта
Для разработки сайта были выбраны следующие программные средства:
язык разметки гипертекста HTML и CSS;
язык программирования PHP
СMS 1C-Bitrix
JavaScript.
Adobe Photoshop
HTML (от англ. Hyper Text Markup Language - «язык гипертекстовой
разметки») - стандартный язык разметки документов во Всемирной паутине.
Большинство web-страниц содержат описание разметки на языке HTML (или
XHTML). Язык HTML интерпретируется браузерами и отображается в виде
документа в удобной для человека форме.
Язык HTML является приложением SGML (стандартного обобщённого
языка разметки) и соответствует международному стандарту ISO8879.
Во всемирной паутине HTML-страницы, как правило, передаются
браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста
или с использованием сжатия.
Текстовые документы, содержащие разметку на языке HTML (такие
документы традиционно имеют расширение.html или.htm), обрабатываются
специальными
приложениями,
которые
отображают
документ
в
его
форматированном виде. Такие приложения, называемые «браузерами» или
«интернет - обозревателями», обычно предоставляют пользователю удобный
интерфейс для запроса web - страниц, их просмотра (и вывода на иные внешние
7
устройства) и, при необходимости, отправки введённых пользователем данных
на сервер. Наиболее популярными на сегодняшний день браузерами являются
Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari.
CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) –
формальный язык описания внешнего вида документа, написанного с
использованием языка разметки.
Преимущественно используется как средство описания, оформления
внешнего вида web-страниц, написанных с помощью языков разметки HTML и
XHTML, но может также применяться к любым XML - документам, например,
к SVG или XUL.
CSS используется создателями web-страниц для задания цветов, шрифтов,
расположения отдельных блоков и других аспектов представления внешнего
вида этих web-страниц. Основной целью разработки CSS являлось разделение
описания логической структуры web-страницы от описания внешнего вида этой
web-страницы. Такое разделение может увеличить доступность документа,
предоставить
большую
гибкость
и
возможность
управления
его
представлением, а также уменьшить сложность и повторяемость в структурном
содержимом. Кроме того, CSS позволяет представлять один и тот же документ
в различных стилях.
PHP
–
скриптовый
язык
программирования
общего
назначения,
интенсивно применяемый для разработки web-приложений. В настоящее время
поддерживается подавляющим большинством хостинг - провайдеров и является
одним из лидеров среди языков программирования, применяющихся для
создания динамических web - сайтов.
PHP: Hypertext Preprocessor (изначально Personal Home Page Tools,
«Инструменты для создания персональных веб-страниц») — один из
лидирующих языков современной веб-разработки. Его отцом считается датский
программист Расмус Лердорф, который в 1994 году создал набор скриптов на
Perl — ту самую «персональную домашнюю страницу», которая легла в основу
PHP.
8
Со временем к работе над ним подключились разработчики со всего мира.
PHP — один из старейших языков в рамках open source-проекта. Сейчас его
поддерживает и разрабатывает группа энтузиастов во главе с компанией Zend
Technologies. Ей руководят Зеев Сураски и Энди Гутманс: в 1997 году они
создали третью версию PHP и активно развивают язык по сегодняшний день.
–
JavaScript
программирования.
прототипно–ориентированный
Является
диалектом
языка
сценарный
ECMAScript.
язык
Обычно
используется как встраиваемый язык для программного доступа к объектам
приложений. Наиболее широкое применение находит в браузерах как язык
сценариев для придания интерактивности web - страницам. Основные
архитектурные
черты:
динамическая
типизация,
слабая
типизация,
автоматическое управление памятью, прототипное программирование, функции
как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель
сделать язык похожим на Java, но при этом лёгким для использования
непрограммистами. Языком JavaScript не владеет какая-либо компания или
организация, что отличает его от ряда языков программирования, используемых
в web-разработке.
«1С-Битрикс: Управление сайтами» — самая популярная коммерческая
CMS в Рунете, которая подходит для реализации проектов разного типа: от
лэндингов и персональных сайтов до соц.сетей, маркетплейсов и b2b-платформ.
Высокая распространённость движка имеет целый ряд причин, среди которых
не последнее место занимает максимальная адаптированность под реалии
русскоязычного
сегмента
интернета.
Это
проявляется
в
предложении
собственных услуг и интеграции с другими сервисами — например,
платёжными системами.
CMS представляет собой модульную систему, на которой в зависимости
от редакции можно запускать проекты разного уровня сложности: от
примитивных
одностраничников
до
масштабных
федерального масштаба с международным потенциалом.
9
онлайн-платформ
Движок
состоит
из
основного
модуля,
которые
обеспечивает
функционирование системы, и дополнительных приложений, добавляющих
различные возможности. Яркий пример — инструменты для создания интернетмагазина. Их нет в младших редакциях, но при покупке лицензии «Малый
бизнес» и выше к движку прикрепляется модуль для организации продаж,
который содержит всё необходимое: каталог, корзину, CRM систему, интернеткассы, валюты и т.д.
Adobe
Photoshop
разрабатываемый
основном работает
и
—
многофункциональный графический
распространяемый
с
растровыми
компанией
Adobe
изображениями,
редактор,
Systems.
однако
В
имеет
некоторые векторные инструменты. Продукт является лидером рынка в области
коммерческих
средств
редактирования растровых
изображений и
наиболее
известной программой разработчика. В создании сайтов выполняет роль
конструктора макетов, то есть внешнего вида сайта.
10
1.3. Детальная концепция web-сайта
Дизайн или же макет web-сайта включает в себя: цветовое оформление,
элементы навигации по сайту, текстовую информацию, описание услуг,
предлагаемых организацией.
Внешний вид сайта играет немаловажную роль в создании самого сайта, а
именно он должен соответствовать следующим требованиям:
•
дизайн
сайта
должен соответствовать выбранной
тематике;
•
навигация по сайту должна быть удобной для пользователя;
•
главные материалы, предложения и категории услуг должны
быть расположены на первом плане, чтобы заинтересовать посетителя;
В верхней части страницы помещается название сайта, отражающее его
тему.
Изображение в окне браузера состоит из трех основных элементов:
•
название сайта
•
главное информационное меню справа страницы;
•
главная страница
Название сайта находится на каждой странице и не изменяется в
зависимости от местонахождения на сайте.
Меню предназначается для навигации по сайту, в нем отображаются
ссылки на все страницы сайта.
Основное
содержание
страницы
меняется
в
зависимости
от
местонахождения пользователя.
Главная страница. Эта страница отображается при первом входе на сайт,
ее оформление и содержание дает пользователю первое представление о сайте
11
ПРАКТИЧЕСКАЯ ЧАСТЬ
2.1. Верстка сайта
Самое главное для сайта – разработать удобный, понятный и красивый
интерфейс. Интерфейс- это то, что видит пользователь в браузере: рамки,
изображения, видео, ссылки, надписи и т.д. В целях привлечения большего
числа клиентов и лучшего визуального восприятия сайта, необходимо создать
интерфейс максимально привлекательным и в то же время максимально
простым, чтобы комфортно пользоваться сайтом могли даже неопытные
пользователи.
Также
соответствующим
необходимо
наполнить
сайт
информацией
контентом для того, чтобы сделать сайт
и
наиболее
информативным и привлекательным.
Начнём создание сайта с главной страницы. Главная страница – страница,
на которую попадает пользователь, как только входит на сайт (см. рис.2.1).
На ней представляется популярные блюда, выбранные администраторами
сайта для продвижения.
12
Рис.2.1
Следующий раздел страницы – «Продукт дня» (см. рис. 2.2 и
рис.2.3).
Подобные разделы ввиду своей краткости позволяют
удержать
внимание
пользователя,
а
наполненность
полезной/практической информацией оставляет хорошие эмоции
и создаёт у пользователя ассоциацию этих эмоций с сайтом, что
побуждает на повторное посещение.
Рис. 2.2.
13
Рис. 2.3.
Код некоторых страниц представлен в Приложении.
2.2 Технические и программные требования при разработке
В
процессе
создания
web-сайта,
в
рамках
курсовой
работы
использовались следующие технические средства.
Технические средства:
•
процессор Intel(R) Core(TM) i7-6200U CPU @ 2.30GHz
2.40 GHz
•
оперативная память 4,00 ГБ DDR4;
•
видео карта GeForce 1060 6ГБ GDDR5;
•
жёсткий диск на 456ГБ;
Программные средства:
•
Windows 10 (64 Бит);
•
VMWare Workstation 16 Player
14
ЗАКЛЮЧЕНИЕ
За время выполнения курсовой работы были изучены принципы
разработки web-сайта, язык программирования PHP, были разобраны основные
принципы работы с Bitrix API и Bitrix Framework; изучена программа Adobe
Photoshop в рамках создания макетов.
На основе полученных знаний был спроектирован и разработан
собственный сайт с кулинарными рецептами, включающий в себя главную
страницу, страницу с информацией о магазине, каталог рецептов с разделением
на категории «Завтраки», «Обеды», «Ужины», «Закуски» и страницу с
контактными данными.
15
СПИСОК ЛИТЕРАТУРЫ
1. Фримен, Э. Изучаем HTML, XHTML и CSS / Эдуард Фримен. - СПб.:
Питер, 2012. 656 с.
2. Джамса К. Эффективный самоучитель по креативному Web-дизайну /
Крис Джамса, Конрад Кинг, Энди Андерсон. - ДиаСофтЮП, 2005 г. - 672с.
3. Чиртик, А. Популярный самоучитель HTML / Александр Чиртик. СПб.: Питер,2013. 56 с.
4. Дронов В. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор
Webмастера/
Владимир
Александрович
Дронов,
Прохоренок. - СПб.: БХВ-Петербург 2010. 912 с.
16
Николай
Анатольевич
ПРИЛОЖЕНИЕ
Часть кода на HTML страницы «Главная»
<!DOCTYPE
html>
<html xml:lang="ru" lang="ru" class="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, width=device-width">
<meta name="HandheldFriendly" content="true" >
<meta name="MobileOptimized" content="width">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Reciption</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<style type="text/css">
:root {
--primary: #f74c3c !important;
--primary-darken-1: hsl(5.13, 92%, 58%);
--primary-darken-2: hsl(5.13, 92%, 55%);
--primary-darken-3: hsl(5.13, 92%, 50%);
--primary-lighten-1: hsl(5.13, 92%, 70%);
--primary-opacity-0: rgba(247, 76, 60, 0);
--primary-opacity-0_05: rgba(247, 76, 60, 0.05);
--primary-opacity-0_1: rgba(247, 76, 60, 0.1);
--primary-opacity-0_15: rgba(247, 76, 60, 0.15);
--primary-opacity-0_2: rgba(247, 76, 60, 0.2);
--primary-opacity-0_25: rgba(247, 76, 60, 0.25);
--primary-opacity-0_3: rgba(247, 76, 60, 0.3);
--primary-opacity-0_35: rgba(247, 76, 60, 0.35);
--primary-opacity-0_4: rgba(247, 76, 60, 0.4);
--primary-opacity-0_45: rgba(247, 76, 60, 0.45);
17
--primary-opacity-0_5: rgba(247, 76, 60, 0.5);
--primary-opacity-0_55: rgba(247, 76, 60, 0.55);
--primary-opacity-0_6: rgba(247, 76, 60, 0.6);
--primary-opacity-0_65: rgba(247, 76, 60, 0.65);
--primary-opacity-0_7: rgba(247, 76, 60, 0.7);
--primary-opacity-0_75: rgba(247, 76, 60, 0.75);
--primary-opacity-0_8: rgba(247, 76, 60, 0.8);
--primary-opacity-0_85: rgba(247, 76, 60, 0.85);
--primary-opacity-0_9: rgba(247, 76, 60, 0.9);
--primary-opacity-0_95: rgba(247, 76, 60, 0.95);
--theme-color-main: #1a2e39;
--theme-color-secondary: #1a2e39;
--theme-color-title: #1a2e39;
--theme-color-strict-inverse: #ffffff;
}
</style>
<style type="text/css">
:root {
--theme-color-b24button: var(--primary);
}
18
