Государственное автономное профессиональное образовательное учреждение Свердловской области «Уральский радиотехнический колледж им А.С. Попова» Проект Создание web-сайта на HTML «Поварёнок» Выполнил: студент ИС-117 Рыжков В. А. Руководитель: Ионова. Е.Б г. Екатеринбург, 2023 г. Содержание: 3. Введение……………….; 4. Задачи………………….; 5-10. Теоретическая часть; 11-15. Практическая часть; 16. Заключение. 2 Введение Web-сайт — это одна или несколько логически связанных между собой веб-страниц. Результатом проекта будет web-сайт, на котором будут расположены рецепты лёгких в приготовлении блюд, а также возможность добавлять свои рецепты отправляя их мне или будущей модерации. Парочка рецептов на столько просты что после 1-2 готовок с родителями, ребенок лет 11-13 сможет самостоятельно приготовить эти блюда. Основная цель моего проекта создать сайт, с рецептами не только простыми, но и интересными, где каждый пользователь смог бы найти что-то вкусное для себя и поделиться своим уникальным рецептом того или иного блюда. Ведь как говорил шеф повар Огюст Гюсто из известного мультфильма «Рататуй»: «Готовить может каждый!» 3 Актуальность Не все сайты с рецептами позволяют выкладывать у себя на страницах рецепты пользователей, на моём же сайте у каждого пользователя будет возможность поделиться своим рецептом со всеми посетителями сайта, естественно все предложенные рецепты будут проходить отбор чтобы уменьшить все риски травм или отравлений из-за не сочетаемых продуктов или каких-либо недоступных кухонных принадлежностей. 4 Задачи: 1. Сделать сайт с понятным и простым интерфейсом, который будет понятен и лёгок в освоении для всех; 2. Добавить возможность отправлять рецепты пользователей сайта; 3. Отобрать людей на модерацию для присылаемых рецептов; 5 1. Теоретическая часть Сайт, или веб-сайт, также веб-узел, — одна или несколько логически связанных между собой веб-страниц; также место расположения контента сервера. Обычно сайт в Интернете представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователями как единое целое. Веб-сайты называются так, потому что доступ к ним происходит по протоколу HTTP. Веб-сайт как система электронных документов (файлов данных и кода) может принадлежать частному лицу или организации и быть доступным в компьютерной сети под общим доменным именем и IP-адресом или локально на одном компьютере. В статье журнала «Хозяйство и право» также было высказано мнение, что каждый сайт имеет своё название, которое при этом не следует путать с доменным именем. С точки зрения авторского права сайт является составным произведением, соответственно название сайта подлежит охране наряду с названиями всех прочих произведений. Все сайты в совокупности составляют Всемирную паутину, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое — базу данных и коммуникации планетарного масштаба. Для прямого доступа клиентов к сайтам на серверах был специально разработан протокол HTTP. Устройство сайта Страницы сайтов — это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователя (монитор, экран КПК, принтер или синтезатор речи). Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие 6 мультимедийные элементы. Отображение страницы можно изменить добавлением стилей на языке CSS, что позволяет централизовать в определённом файле все элементы форматирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями. Страницы сайтов могут быть простым статичным набором файлов или создаваться специальной компьютерной программой на сервере. Они могут быть либо сделаны на заказ для отдельного сайта, либо быть готовым продуктом, рассчитанным на некоторый класс сайтов. Некоторые из них могут обеспечить владельцу сайта возможность гибкой настройки структурирования и вывода информации на веб-сайте. Такие управляющие программы называются системами управления содержимым (CMS). Сайты могут содержать подразделы, ориентированные целиком на ту или иную аудиторию. В этом случае такие разделы называют версиями сайта. Аудитория может различаться по виду используемого оборудования, по используемому языку аудитории. К примеру, известны так называемые мобильные версии сайта, предназначенные для использованием смартфона. Сайты могут иметь работы с ними с языковые версии (русскоязычная, англоязычная и другие). Создание сайтов: 1.1. Разработка дизайна Веб-дизайнеры разрабатывают макеты веб-шаблонов страниц. Дизайнер определяет, каким образом конечный потребитель будет получать доступ к информации и услугам сайта — то есть, занимается непосредственно разработкой пользовательского интерфейса. В большинстве случаев страницы включают в себя графические элементы. Их подготовкой занимаются художники, иллюстраторы, фотографы, технические дизайнеры, шрифтовики, 7 и т. д. Готовые шаблоны показываются заказчику. В этот момент страницы ещё не могут содержать конечного наполнения (это в обязанности дизайнера не входит). Чтобы макеты выглядели более наглядно, в них помещается произвольное содержимое. На сленге дизайнеров такое содержимое называется рыбой. Если заказчик удовлетворён внешним видом шаблонов, то наступает следующая фаза разработки — вёрстка страниц сайта. 1.2. Вёрстка Верстальщик получает макеты шаблонов в виде простых изображений (например, в формате JPEG или PNG), либо разбитых по слоям (например, в PSD или AI). Его задача — получить из этих графических макетов гипертекстовые веб-страницы с подготовленными для интернета изображениями. Одним из сложных моментов в работе верстальщика является обеспечение совместимости со множеством браузеров — программами для просмотра веб-страниц (так называемая кроссбраузерность). Браузеры могут одни и те же элементы разметки или правила CSS интерпретировать посвоему, в результате чего некоторые пользователи могут увидеть содержимое не так, как задумывал дизайнер и ожидает увидеть заказчик. Когда верстальщик убедится, что большинство браузеров одинаково отображают готовые шаблоны, наступает следующая фаза разработки — веб- программирование. 1.3. Программирование К программистам поступают готовые шаблоны страниц и указания дизайнеров по работе и организации элементов сайта. Программист создаёт программную основу сайта, делая её с нуля, используя фреймворк или CMS. Выбор языка программирования в данном случае — вопрос непринципиальный. 8 После того, как сайт готов к эксплуатации, наступает следующая фаза — наполнение сайта информацией. Безопасность Существует множество сайтов, которые являются значимыми ресурсами. На этих ресурсах могут располагаться персональные данные пользователей (например, личная переписка, адреса, телефоны) или финансовая информация (например, банковские сайты). Взлом таких ресурсов может повлечь как прямые денежные убытки (например, злоумышленник может перечислить деньги с чужого счёта на свой собственный), так и косвенные, связанные с распространением конфиденциальной информации или просто злоумышленник может испортить содержимое сайта. Для многих сайтов важно обеспечить некоторый уровень безопасности. Требуемый уровень безопасности во многом зависит от располагающейся на сайте информации. Наиболее распространённые проявления взлома сайта: несанкционированное изменение злоумышленниками отображения сайта (см.: дефейсинг, хакеры); подделка сайта (дизайн и содержимое сайта может быть скопировано и у пользователя такого сайта могут украсть пароли); снижение числа пользователей сайта из-за воровства пользователей, перешедших на сайт с поисковой системы или мобильных устройств; появление ссылок на внешние ресурсы (чёрное seo); появление порно-баннеров и другой назойливой рекламы. 9 Вторичные последствия взлома сайта: блокировка сайта как «вредоносного» поисковыми системами Google и Яндекс; блокировка сайта браузерами Google Chrome, Opera, Яндекс. Браузер и другими; блокировка сайта антивирусами; блокировка сайта хостинг-провайдером, на котором он расположен; снижение позиций сайта в поисковой выдаче поисковых систем; снижение количества ежедневных посетителей сайта. Наиболее популярными мотивами взлома сайта являются: подорвать продажи или имидж конкурирующего сайта; получить выгоду: рассылать за деньги спам с сайта перенаправлять за деньги пользователей сайта на другие сайты и страницы приложения Google Play и AppStore; использовать сайт для DDoS-атак; использовать сайт для размещения на нём ссылок на внешние сайты; размещение вредоносного кода, заражающего компьютеры посетителей сайта; шантаж: воровство с целью возврата владельцу за деньги; реклама: размещение на сайте дефейсинга с целью рекламы хакерских услуг; политические мотивы: с целью показать позицию в отношении того или иного политического строя или организации. По данным, проведённого сервисом по защите сайтов SiteSecure, исследования безопасности коммерческих сайтов в России за 1 квартал 2015 года каждый 10-й сайт заражён или имеет высокий риск заражения и блокировки за вредоносность. 10 2. Практическая часть Главной задачей моего проекта было сделать сайт с рецептами приготовления еды, я решил так же добавить возможность пользователям присылать их собственные рецепты, которые естественно будут проходить какую-никакую модерацию. Серьёзной проблемой было начать саму работу т.к. до этого проекта у меня не было подобных задач, поэтому без помощи со стороны у меня не обошлось. Я хотел сделать красивый сайт с более-менее понятным и простым интерфейсом и хоть какой-то анимацией, именно из-за этого я обратился за помощью к другу, который помог мне с этим путём добавления “css” и “js” файлов в мою работу. Он написал несколько файлов для анимаций и скриптов на странице сайта. Далее были трудности с поиском «подходящих» картинок, в качестве главной картинки сайта я решил использовать обложку книги Гюсто из мультфильма «Рататуй». На странице сайта много повторяющегося текста и гиперссылки никуда кроме как на главную страницу не ведут, это было сделано специально. Набор функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. Скрипты, которые использовались при разработке сайта: jQuery Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Разработка jQuery ведётся командой добровольцев на пожертвования. 11 Возможности: Движок кросс-браузерных CSS-селекторов Sizzle[4], выделившийся в отдельный проект; Переход по дереву DOM, включая поддержку XPath как плагина; События; Визуальные эффекты; AJAX-дополнения; JavaScript-плагины. Bootstrap — это бесплатный, опенсорсный фреймворк CSS, который помогает в создании отзывчивых сайтов, ориентированных на мобильные приложения, предоставляя разработчикам богатую библиотеку. Эта библиотека содержит готовые функции JS и CSS, доступные для прямого использования. Для чего использовался и может быть использован в будущем: Ускоренное написание кода: сокращает время написания кода за счёт предопределения классов и функций. Дизайн под мобильные устройства: ориентирован на мобильные устройства, поэтому разработчикам не нужно о них отдельно беспокоиться. Кастомизируемость: в Bootstrap никакой код не навязывается. Разработчик может изменить любой класс и код любого элемента. Это можно сделать с помощью явной стилизации CSS либо функций JavaScript. Стандартизированные и общепринятые правила: bootstrap во всём мире признан стандартной библиотекой CSS для 12 кастомизации веб-страниц, что упрощает сотрудничество с другими участниками сообщества из разных точек планеты. Простота интеграции: этот фреймворк очень легко интегрируется путём добавления на страницу всего одной строки кода. Опенсорсность: ещё одно преимущество опенсорса в том, что при возникновении трудностей вам всегда кто-нибудь да поможет. Обширная документация: для человека, желающего начать использовать Bootstrap, предлагается огромный объём документации, включая официальную. Smoothscroll — это легкий, настраиваемый полифилл Vanilla JavaScript для плавной прокрутки с использованием свойства CSS scroll-behavior: smooth. Используйте этот полифилл для реализации функции плавной прокрутки в тех браузерах, которые не поддерживают её: MS Edge, Internet Explorer и Safari. Nivo Lightbox Плагин для создания лайтбокс галерей, в которых можно загружать фото, фреймы, флэш и видео, обладает адаптивными свойствами, подходит для Bootstrap. * В файле default.css подключены картинки функционала лайтбокса, для WordPress имеется специализированный плагин, который можно скачать бесплатно с сайта источника. Isotope — это изысканный плагин jQuery, используемый для создания волшебных макетов для веб-интерфейса. Он имеет различные функции для режимов макета, фильтрации, сортировки, совместимости и прогрессивного 13 улучшения. Isotope имеет универсальный движок с возможностью размещения нескольких режимов компоновки. WOW – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Animate.CSS – скрипт, который непосредственно отвечает за саму анимацию. Main Загрузка клиентской части приложения начинается с загрузки файла public/js/main.js. Файл public/js/main.js является точкой входа для библиотеки RequireJS public/js/requirejs/require.js. RequireJS – если не самый популярный, то один из самых популярных файловых/модульных загрузчиков. При создании крупных компонентных проектов без него (или его аналогов) не обойтись, т.к. он решает основные проблемы таких приложений: зависимости между модулями засорение глобальной области В файле public/js/main.js мы также создаем объект класса App public/js/app/app.js. В классе App создается объект локализации класса Land public/js/app/land.js и объект общих системных функций класса System public/js/app/system.js. А также создаются и регистрируются объекты с их параметрами на основе сервисных классов, заданных для текущей страницы сайта приложения. 14 jqBootstrapValidation Лёгкий js плагин валидатор ввода в поля форм для Bootstrap, имеет гибкие настройки для разных элементов ввода данных. * CDN Link files + Download Source file. Скриншот. Лёгкий js плагин валидатор ввода в поля форм для Bootstrap, имеет гибкие настройки для разных элементов ввода данных. 15 Заключение: На данный момент у меня готова только главная страница моего сайта, рецептов на ней пока нет, но они будут добавлены в будущем сразу после того, как будут найдены люди на модерацию. Во время разработки данного проекта, у меня было много трудностей, таких как: Разработка дизайна сайта (я советовался с дизайнерами нашего колледжа на этот счет); Поиск нужных нам картинок; Так же мы с другом долго не могли разобраться на счет того, как в целом будет выглядеть и работать сайт; Ну и самое главное мы не могли решить, что будем делать с этим проектом после его сдачи, ведь, по сути, пока что это просто шаблон сайта без какого-либо контента на нем. 16