Front-end против Back-end разработки
Министерство образования и науки Российской Федерации
Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования
«Сибирский государственный индустриальный университет»
Кафедра прикладных информационных технологий и программирования
ОТЧЕТ ПО УЧЕБНОЙ ПРАКТИКЕ
Выполнил:
студент гр. ЗИП-16
20.06.2018 ______ Федяев И.Н.
(подпись)
Руководитель практики от университета:
ст. преподаватель Гусев М.М.
_____ ___________ ______
(оценка) (дата) (подпись)
Новокузнецк 2018 г.
Оглавление
Введение. 4
Понятие «сайта». 6
Элементы сайтостроения. 8
Этапы создания сайта. 10
Топология сайта (модули) 12
Способы разработки web-страниц. 15
Создание прототипов программ, веб-сайтов, презентаций. 15
Клиентская часть. 16
Инструменты фронт-енд разработчика. 17
Добавление звуковых и музыкальных фрагментов к Web – странице. 19
Визуализация. 19
Визуальные редакторы.. 21
Текстовые редакторы.. 22
Back-end. 23
Фреймворки, используемые при разработке Web-сайтов. 24
Front end. 24
Back end. 27
Популярные конструкторы сайтов. 29
Заключение. 31
Список литературы.. 33
Введение
Общество прогрессирует, поэтому прогрессируют и его запросы. Современному человеку необходимо постоянно получать информацию. Но, т.к. информация порой слишком разнообразна, то приходится часть из нее отсеивать и собирать только «нужную» информацию. Телевидение и радио давно не могут эту проблему решить. И тогда на помощь нам может прийти интернет, т.к. в нем можно сортировать информацию. С его помощью можно относительно быстро найти практически любую нужную нам информацию.
|
|
|
Веб-сайт - это фактически основа известного нам интернета. Поэтому вопрос о средствах разработки Web - сайтов является одним из наиболее важным.
Главное назначение сайта заключается в том, чтобы поведать пользователям о данном предмете поиска пользователя. В Интернете существуют разные способы информирования, но, как правило, все они, сводятся к одному – к web-сайту.
Web-сайт является совокупностью электронных документов, объединенных одним адресом. С ростом технологий web-сайты становятся не просто совокупностью документов, но и представлением ряда технологий, которые используются как для привлечения внимания, так и для добавления различных функций, позволяющих делать пребывание пользователя на сайте не только увлекательным, но и удобным.
Создания web-сайтов актуально и повлекло за собой создание ряда специальных систем, позволяющих не только создавать сайты в достаточно короткие сроки, но еще и управлять содержимым этого сайта с использованием специальной панели. Системы управления контентом – это программное обеспечение, позволяющее публиковать и изменять информацию на сайте самостоятельно, без привлечения разработчиков.
|
|
|
Для большинства рекламодателей область повышенного интереса представляют собой пользователи сети. Ни печатная продукция, ни радио или телевидение не могут подать информацию в таком удобном, презентабельном и убеждающем виде, как это сделает web-сайт. Исчерпывающая информация, прайс-листы, каталог товаров, возможность осуществлять всевозможные заказы, рубрика "ответ-вопрос", размещенные на сайте, избавляют от необходимости разъяснять одни и те же вопросы по телефону, позволит освободить рабочее время сотрудников фирмы для эффективного решения насущных задач. Именно поэтому создание web-сайта для организаций продиктовано современной необходимостью.
Предмет исследования: web-технологии.
Объект:веб-сайт.
Цель работы:провести обзор средств разработки web-сайтов.
Для достижения поставленной цели необходимо решить ряд задач:
1. Обосновать во введение актуальность темы
2. Дать определение объекту (сайту)
3. Выделить структурные элементы, отдельные компоненты из общего процесса разработки сайтов, т.е. необходимые «кирпичики», используя которые разработчик строит свой сайт.
|
|
|
4. Раскидать поэтапно порядок разработки сайта
5. Выделить модульные части сайта (клиентская и серверная части разработки)
6. Провести сравнительный анализ модулей
7. Провести обзор средств презентации проекта сайта
8. Провести обзор фреймворков
9. Провести обзор конструкторов сайтов
Понятие «сайта»
Сайт, или веб-сайт (от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети»), — совокупность логически связанных между собой веб-страниц; также место расположения контента сервера. Обычно сайт в Интернете представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователем как единое целое. Веб-сайты называются так, потому что доступ к ним происходит по протоколу HTTP[1].
Несколько веб-страниц, объединённых общей темой и дизайном, а также связанных между собой ссылками, образуют веб-сайт. При этом образующие веб-сайт страницы могут находиться на одном или нескольких веб-серверах, которые могут располагаться в одном дата-центре или удалённо друг от друга, зачастую в разных странах.
Страницы сайтов — это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователя (монитор, экран КПК, принтер или синтезатор речи). Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображение страницы можно изменить добавлением стилей на языке CSS, что позволяет централизовать в определённом файле все элементы форматирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями.
|
|
|
Страницы сайтов могут быть простым статичным набором файлов или создаваться специальной компьютерной программой на сервере. Они могут быть либо сделаны на заказ для отдельного сайта, либо быть готовым продуктом, рассчитанным на некоторый класс сайтов. Некоторые из них могут обеспечить владельцу сайта возможность гибкой настройки структурирования и вывода информации на веб-сайте. Такие управляющие программы называются системами управления содержимым (CMS).
Все сайты в совокупности составляют Всемирную паутину, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое — базу данных и коммуникации планетарного масштаба. Для прямого доступа клиентов к сайтам на серверах был специально разработан протокол HTTP.
Определённый класс сайтов иначе называют интернет-представительством человека или организации. Как комментарий к ссылке может быть страничка-визитка на полнофункциональном сайте (портале). Когда говорят «своя страничка в Интернете», то подразумевают целый сайт или личную страницу в составе чужого сайта (портал). Кроме сайтов (порталов), в сети Интернет также доступны WAP-сайты для мобильных телефонов.
Изначально сайты представляли собой совокупность статичных документов, например — сайт-визитка. По мере развития коммуникаций, количество внутренних и внешних ссылок увеличивалось. Сайт стал выполнять не только роль справки, аннотации, но и функционального офиса, новостного или медийного центра. В настоящее время большинству из них свойственна динамичность и интерактивность. Для таких случаев специалисты используют термин веб-приложение — готовый программный комплекс для решения задач сайта. Веб-приложение входит в состав сайта, но веб-приложение без данных сайтом является только технически. Оболочку (форму, шаблон) нужно наполнить и активизировать.
В большинстве случаев в Интернете одному сайту соответствует одно доменное имя. Именно по доменным именам сайты идентифицируются в глобальной сети. Возможны иные варианты: один сайт на нескольких доменах или несколько сайтов под одним доменом. Обычно несколько доменов используют крупные сайты (веб-порталы), чтобы логически отделить разные виды предоставляемых услуг (mail.google.com, news.google.com, maps.google.com). Нередки и случаи выделения отдельных доменов для разных стран или языков. Например, google.ru и google.fr логически являются сайтом Google на разных языках, но технически это разные сайты. Объединение нескольких сайтов под одним доменом характерно для бесплатных хостингов. Иногда для идентификации сайтов в адресе после указания хоста стоит тильда и имя сайта: example.com/~my-site-name/ (ср. с /home), а чаще всего используется домен третьего уровня: my-site-name.example.com.
Аппаратные серверы для хранения сайтов называются веб-серверами. Сама услуга хранения называется хостингом. Раньше каждый сайт хранился на своём собственном сервере, но с ростом Интернета, технологическим улучшением серверов на одном компьютере стало возможно размещение множества сайтов (виртуальный хостинг). Сейчас серверы для хранения только одного сайта называются выделенными (англ. dedicated).
Один и тот же сайт может быть доступен по разным адресам и храниться на разных серверах. Копия оригинального сайта в таком случае называется зеркалом.
Элементы сайтостроения
К вопросу о строении сайта можно подойти с разных сторон: с технической точки зрения (профессиональной) и визуальной (пользовательской). В классическом виде любой сайт технически состоит из нескольких компонентов
· дизайн;
· верстка;
· программный код;
· серверная часть;
· клиентская часть;
· контент;
· система управления содержимым или CMS;
· доменное имя;
· хостинг.
1. Дизайн сайта отвечает за визуальное представление и организацию информации, способствует взаимодействию ресурса с его посетителями. Отвечающим за создание дизайна специалистом обычно является веб-дизайнер. Именно он должен спроектировать логическую структуру всех страниц сайта, разработать способы подачи материала и проработать внешнее оформление ресурса.
Для каждой страницы дизайн разрабатывается отдельно в зависимости от ее функций. Например, у сайта интернет-магазина есть страница, где представлен товар, а также страница с пользовательской корзиной. Естественно, что эти директории по логике своего оформления должны быть разными. Цель размещения корзины - способствовать быстрому и удобному совершению покупок, а страницы, представляющей товар, - ознакомление со свойствами продукта, сравнение его с другими товарами.
2. Верстка представляет собой процесс написания особого кода для браузеров. У такого файла расширение html, и отображается он только в браузерах. Нужно следить, чтобы сверстанный макет одинаково выглядел во всех браузерах, будь то Opera, MozillaFirefox, GoogleChrome или InternetExplorer. Дополнительно можно узнать о таком термине, как «валидность верстки» в специальной статье о ней.
3. Программирование составляет примерно 50-70% работы над сайтом. Программная часть ресурса – довольно обширное понятие. Программирование отвечает за то, чтобы многочисленные страницы сайта отображались с одинаковым дизайном, но разным содержимым. Также программный код ответственен за визуальные эффекты и многое другое. Благодаря ему сайт становится «живым» и динамичным.
4. Веб-сервер – это компьютер с установленным на нем программным обеспечением, которое предназначено для того, чтобы отвечать на запросы веб-клиента круглосуточно в режиме реального времени. Под веб-клиентом подразумевается браузер, который отправляет серверу запрос на определенную страницу, и если она доступна, то пользователь может увидеть ее. Чтобы пользователь увидел нужную ему страницу, его браузер должен получить от сервера соответствующий html-код. После чего код и все визуальные элементы распознаются и предстают перед пользователем в виде готовой понятной любому страницы.
5. Клиентская часть представляет собой код, загружаемый вместе с кодом html. Это может быть CSS, JavaScript, ActionScript.
6. Контент сайта, то есть все содержимое сайта. Сюда входят тексты, картинки, видео, flash и прочие файлы. Контент часто путают с элементами дизайна, но это совершенно разные вещи. Оформление сайта отвечает на вопрос «как разместить», а контент отвечает на вопрос «что разместить». Что касается текстового наполнения, то именно оно наполняет любой веб-ресурс смыслом, благодаря которому пользователи могут найти сам сайт в поисковых системах. Интересный контент – это ключ к увеличению посещаемости, читаемости и коммерческих показателей, таких как звонки, продажи или подписки на e-mail рассылки.
7. CMS тоже можно отнести к одному из элементов сайта. Система управления содержимым позволяет управлять всеми элементами ресурса через административную часть. Использование CMS не обязательно, однако оно необходимо всем, кто хочет самостоятельно контролировать и редактировать содержимое сайта. Существует целый ряд разнообразных CMS, отличающихся друг от друга удобством пользования, набором свойств и принципами работы.
8. Доменное имя и хостинг. Доменное имя – это уникальный адрес сайта в Сети (например, www.site.by). А хостинг – это услуга, которая предоставляется специальными компаниями, хранящими на своих серверах все необходимые для работы сайта данные. Без этих компонентов строение было бы неполным, а сам сайт - недоступен для пользователей и посетителей. Хостинг предполагает выделение свободного места на сервере для размещения и хранения какого-либо сайта. Чтобы владелец был уверен в том, что его сайт всегда виден пользователям Интернета, он обязательно должен обзавестись уникальным доменным именем, а также надежным хостингом. Чтобы выбрать правильный хостинг, предлагаем Вам прочитать нашу статью с более подробными рекомендациями.
Этапы создания сайта
Создание качественного веб-сайта длительный и трудоемкий процесс. Данный раздел позволит понять, как поэтапно создать сайт. Так же позволит понять, какое место в иерархии разработки сайта занимает каждый компонент, рассмотренный в предыдущем разделе.
I. Определение целей разработки сайта, проведение исследований
На данном шаге очень важно понять, зачем и для кого разрабатывается web-сайт. Без верно поставленных целей и задач невозможно создать необходимый сайт или возможно, но, даже в процессе создания сайта, придет осознание, что получается не то, что ожидалось. Необходимо плотно поработать с заказчиком (или подумать, если заказчик — вы), чтобы понять что именно клиент ждет от его будущего сайта. Также не мало важно проведение исследований конкурентов вашей тематики и составление схемы: какой функционал они предоставляют пользователям, какой дизайн и структуру они имеют.
II. Разработка технического задания (ТЗ)
ТЗ может составлять, как правило, как заказчик, так и исполнитель. Но обсуждается и согласовывается техническое задание, безусловно, обеими сторонами, т.к. какие-то вещи знать не может заказчик, а какие-то исполнитель. Составление правильного ТЗ просто необходимый шаг в этапах создания сайта, если что-то упустить в задании, например, дополнительный модуль, то исполнитель может отказаться от доработки (в рамках данной задачи).
Что должно включать в себя ТЗ:
o Обозначить целевых клиентов сайта, а также общую миссию;
o Структуру в виде схемы, состоящей из основных разделов, подразделов и примерного количества страниц;
o Пожелания к модулям (их великое множество: обратная связь, мы вам перезвоним, вопрос-ответ, фильтры и тому подобное);
o Описание дизайна (общее оформление — можно на примерах других сайтов, основные цвета, логотип, местонахождение различных блоков)
o Какие технологии использовать (Вид CMS, библиотеки скриптов, будет ли мобильная версия и проч.);
o Порядок предоставления, обработки или создания графической и текстовой информации;
o Технические требования к сайту.
III. Создание дизайн-макета сайта
В процессе разработки сайта, при создании дизайна необходимо данный пункт разделить на несколько подэтапов создания
o Предоставление оговоренного количества различных по концепции макетов главной страницы.
o Доработка и согласование выбранного варианта концепции.
o Создание макетов внутренних страниц (категории, товара/услуги, контактов, если планировалась мобильная версия, то каждый макет должен быть переделан и под мобильную версию)
o Доработка и согласование каждой из типовых страниц
На макете может отсутствовать наполнение: как текстовая информация, так и фотографии, которые должен предоставить заказчик в процессе работ по созданию сайта — его временно можно заполнить демо текстом и картинками. Но все элементы дизайна должны быть прорисованы.
IV. Верстка, программирование и внедрение в CMS
На данном шаге происходят чисто техническая работа, качество которой зависит от профессиональных навыков верстальщика и программиста
o Универсальность вёрстки на CMS — возможность без лишних сложностей внедрять дополнительные модули.
o «Красивый» код — Простое правило: чем код будет меньше и грамотнее, тем сайт загрузится быстрее.
o Валидность (корректность) — Верное использование функционала CMS при внедрении дизайна/структуры/модулей — позволит без труда разобраться с системой стороннему специалисту.
o Кроссбраузерная верстка (Cross-browser) — адекватное отображение сайта во всевозможных браузерах (IE, Chrome, Firefox, Opera и т.д.)
В результате данных нескольких этапов работ получится полностью рабочий сайт, но без какого-либо наполнения.
V. Наполнение сайта
Без текста и фотографий сайт имеет достаточно условную ценность. Заказчик предоставляет информацию и заполняет сайт текстом и картинками либо это делает исполнитель (в зависимости от договоренностей). Как правило, если это делает заказчик, ему предоставляется инструкция по работе с CMS.
Все материалы лучше всего отдать на написание профессиональному копирайтеру, т.к. этот текст будут читать клиенты и он ляжет основой на репутацию заказчика в интернете.
VI. Запуск сайта в интернете
Исполнитель переносит проект на хостинг, заказчик предоставляет или покупает вместе с исполнителем доменное имя (адрес сайта) и сайт успешно стартует в сети. Если в ТЗ были оговорены какие-либо предварительные работы по СЕО, например, добавления сайта в вебмастера Яндекс и Google, создание HTML карты сайта, установка метрики и аналитики, то исполнитель их проводит.
VII. Тестирование сайта
Выбирается несколько человек, например, знакомые или подчиненные заказчика и проверяют работу сайта с различных устройств: работу модулей, правильные ли ссылки стоят на страницах, все ли картинки грузятся и прочее. Данный этап длится, как правило, от недели до месяца.
VIII. Развитие и продвижение сайта
Здесь все зависит от заказчика, если заказчик хочет, чтобы его сайт приносил ему продажи, новых клиентов, то над ним необходимо направить процесс развития в нескольких видах:
o Создавать новые материалы, акции, новости
o Заниматься продвижением ресурса
o Спрашивать посетителей, все ли их устраивает, везде ли удобно
o Давать различные виды рекламы.
Вот, наверное, и все, что можно сказать про поэтапное создание сайтов по порядку.
Топология сайта (модули)
Сайт логически разделен на две большие части - техническую часть (Back-end) и пользовательская (front-end).Или иначе – серверную и клиентскую. Рассмотрим каждую из них более подробно.
Back-end
Серверная часть представляет собой файлы, которые содержат в себе исходный код, написанный на различных языках программирования. Этот код обрабатывает данные, полученные от пользователя, проверяет эти данные, и, в зависимости от результатов, может выполнять различные действия. Серверная часть также отвечает за генерацию страниц или различных их участков.
Помимо прочего серверной частью является база данных, которая хранит в себе информацию и настройки. Серверные файлы тоже отвечают за работу с базой данных, они добавляют информацию в сайт, удаляют ее, редактируют, а также, что более важно, - выводят необходимую информацию в соответствии полученному запросу.
Подытожив, можно сказать, что серверная часть хранит информацию, управляет ей и сайтом, а так же генерирует клиентскую часть сайта в соответствии с различными условиями. Серверную часть мы не видим, мы видим только результаты ее работы.
Существует несколько популярных языков программирования, которые используются для реализации серверной части, - это PHP, Python, Ruby и даже С. Каждый имеет свои возможности и свои недостатки, стоит лишь отметить, что PHP имеет самое большое распространение и поддержку.
Front-end
Вторая неотъемлемая часть каждого сайта - это его клиентская часть. Клиентская часть сайта - это все что мы видим, все, что двигается у нас на экране и все, на что можно нажать.
Клиентскую часть обеспечивают две обязательные составляющие и одна не обязательная.
HTML
Первая обязательная составляющая - это язык разметки веб-страниц HTML.Многие серьезно ошибаются, называя HTML языком программирования. Это именно язык разметки в прямом смысле этого слова.
Он задает расположение элементов страниц, а так же связь страниц между собой посредством ссылок. Он позволяет создавать блоки, таблицы, маркированные и нумерованные списки, заголовки и параграфы. Но, умея расставлять объекты, HTML не умеет делать их «красивыми».
CSS
Для того чтобы страница стала «красивой» используются каскадные таблицы стилей CSS. И это тоже не язык программирования. Это набор правил, которые указывает параметры того или иного элемента HTML-разметки. Такие как размер, цвет, позиция, тени, фоны и так далее.
Таким образом, внешний вид страницы формируется за счет взаимодействия HTML и CSS.
А что там с анимацией?
Третья не обязательная составляющая веб-страницы - JavaScript. И вот это уже полноценный язык программирования.
Все анимационные моменты, выпадающие и сплывающие пункты меню и окошки, проверка форм, «слайдеры» и т. д., - все это делается с помощью языка программирования JavaScript.
Конечно, технологии развиваются и, что-то из этого уже стало возможностью HTML и CSS, но в этом моменте и возникает самая главная трудность при создании сайтов.
Front-end разработка связана с дизайном и интерфейсом сайта. Инженеры, занимающиеся этой частью сайта, называются front-end разработчиками. Этих специалистов также называют веб-дизайнерами.
Front-end против Back-end разработки
Языки программирования
· Front-end разработчик должен быть знаком с такими языками как HTML, CSS и Javascript.
· Back-end разработчик должен владеть RubyonRails, MySQL, MongoDB, PostgreSQL, Ruby, Python и .NET.
Среда разработки
· Front-end разработчики работают через пользовательский интерфейс для разработки внешнего вида сайта, изучают привычки пользователей и изменение дизайна с помощью тестирования.
· Back-end разработчики работают с архитектурой кода, разрабатывают приложения, которые поддерживают пользовательский интерфейс, а также обеспечивают поддержку, безопасность и управление контентом.
Автономное обслуживание
· Front-end разработка не может осуществляться самостоятельно, за исключением создания дизайна сайта, который может продаваться в виде шаблонов.
· Back-end разработка может осуществляться самостоятельно в качестве независимого сервиса.
Цель
· Цель front-end команды состоит в слежении за тем что сайт доступен для всех пользователей, и реагирует на все представления - для мобильных и настольных компьютеров.
· Back-end команда нужна, чтобы создавать приложения для внешнего интерфейса и поддерживать его. Кроме того, они заботятся о том, чтобы сайт открывался и все функции правильно работали.
Back-end - выполняется на стороне сервера, в то время как front-end работает на стороне клиента. Такая структура значительно ускоряет процесс создания сайта, а также облегчает его обслуживание. Вывод, front-end и back-end разработки являются необходимыми, чтобы создать полноценный функционирующий сайт.
Дата добавления: 2018-08-06; просмотров: 669; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!