Технологии для создания веб-сайтов и конструкторы

ЛЮБЛИНСКИЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ

Факультет Электротехники и Информатики

Направление Информатика

 

 

ДИПЛОМНАЯ РАБОТА МАГИСТРА

 

Analiza porównawcza framework’ów do tworzenia stron internetowych

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

Analysis in comparison of frameworks for creation a web sites

 

Научный руководитель: Автор:

Доктор инж. E. Милош (Dr. inż Elzbieta Miłosz) Ништук Вячеслав (Viacheslav Nishtuk)

 

 

 

 

Люблин 2016

 

Цель работы:

Сравнительный анализ с использованием в данное время популярных фреймворков, таких как AngularJS, ReactJS и MeteorJS. Особенности и преимущество над другими фрейморками и создание «Todo» приложений.

Содержание

Введение

1. Методы и средства для создания веб-сайтов

1.1 Технологии для создания веб-сайтов и конструкторы

1.2 Процесс создания сайта

1.2.1 Планирование

1.2.2 Дизайн

1.2.3 Разработка

1.3 Средства для создания веб-сайтов, фреймворки

2. Характеристика выбранных фреймворков

2.1 Фреймворк AngularJS

2.1.1 Основные понятия AngularJS

2.1.2 Область видимости

2.1.3 Связывание данных

2.1.4 Внедрение зависимостей

2.1.5 Построение приложения в AngularJS

2.2 Фреймворк MeteorJS

2.2.1 Основные понятия MeteorJS

2.2.2 Реактивность

2.2.3 Декларативный подход

2.2.4 Отслеживание зависимостей в Meteor: вычисления.

2.2.5 Построение приложения в MeteorJS

3. Цель исследований, проблемы и гипотезы

3.1 Цель исследований, постановка научного эксперимента

3.2 Метод исследования

3.3 Проект веб-сайта для эксперимента

4. Реализация и итоги исследования

4.1 Описание реализации исследований

4.2 Сравнительный анализ фреймворков

4.3 Верификация гипотезы исследований

Заключение

Литература

Список рисунков

Список таблиц

 

Введение

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

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

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

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

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

В этом месте надо указать цель научной работы и ее содержание по разделам

 

 

Методы и средства для создания веб-сайтов

Технологии для создания веб-сайтов и конструкторы

 

Методы для создания сайтов можно условно разделить на две основные группы. Первая группа методов для создания веб-сайтов — это методы ручного написания сайтов на одном или нескольких языках веб-программирования. При этом работа может осуществляться как в простых (текстовых), так и визуальных редакторах с использованием технологий HTML и CSS. Последние позволяют создавать сайты в режиме WYSIWYG - «Что Вижу То и Получаю».

В случае статического сайта вполне достаточным для ручного написания будет использование «связки» HTML и CSS, с воможным включением JavaScript. В этом случае JavaScript поможет создать динамику нашему сайту. Что касается данных, динамического контента, нам не обойтись без серверной части (back-end), таких технологий как PHP, ASP.NET, NodeJS, JAVA и т. д.

При использовании «ручных» методов создания сайта дизайн сайта (графическое оформление — front-end) также создается вручную. Для этих целей применяются любые графические редакторы по желанию, например Adobe Photoshop, Adobe Illustrator и т. д. После чего начинается стадия вёрстки, но об этом не сейчас.

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

Конструкторы сайтов — это, как правило, онлайн-системы, позволяющие из готового типового набора модулей и компонентов «собрать» сайт и сразу же разместить его в web. Одни из наиболее популярных конструкторов сайтов- это системы ucoz, sites.google. Это все что касается онлайн-систем, также есть платформы как Joomla CMS, Wordpress CMS.

CMS - информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым) [?](ссылка на литературу).

Основные функции CMS [?]:

· предоставление инструментов для создания содержимого, организация совместной работы над содержимым;

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

· публикация содержимого,

· представление информации в виде, удобном для навигации, поиска.

В системе управления содержимым могут находиться самые различные данные: документы, фильмы, фотографии, номера телефонов, научные данные и так далее. На данный момент, Joomla и Wordpress есть самые популярные платформы для создания сайтов любого типа сайта, от сайт-визитки к интернет магазину. Кроме того метод создания сайтов с использованием CMS — одни из самый популярных на сегодняшний день. CMS, выражаясь условно, предоставляет собой некую готовую визуальную и программную оболочку, которую пользователь может заполнить необходимым контентом, а также по своему желанию изменить и настроить. К всему этому что было сказано о CMS, можно додать что, человек, не владеющий знаниями программирования может создать функциональное приложение, другими словами — сайт.

Автоматизированные методы создания сайтов предусматривают разделение структуры сайта на «дизайн» и «контент». В этом случае легко можно изменять контект, не затрагивая дизайна сайта или его программного кода. При ручном содании сайта разделения структуры сайта на две отдельные «ветви» - дизайн и содержимое — не происходит.

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

Методы ручного создания сайтов довольно сложны, ведь они требуют значительных познаний в области веб-программирования или дизайна сайтов. Однако они обладают неоспоримым преимуществом. Создавая сайт вручную, всегда можно получить именно то, что хочешь. «Ручные» методы создания сайтов многие «акулы» веб-программирования предпочитают именно поэтому.

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

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

Современные Интернет технологии позволяют создавать в сети:

· веб-сервера;

· сайты, порталы, блоги;

· форумы;

· чаты и ICQ подобное;

· видеоконференции, вебсеминары, телеконференции;

· wiki-энциклопедии и т. д.

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

Беспроводная связь WiFi и WiMAX, также, увеличивают число пользователей Интернет. Теперь уже не нужно быть «привязаным» к технологии проводной связи для выхода в net. стандартизировать форматирование здесь и дальше

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

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

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

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

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

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

Интернет технологии делятся на два типа [?]:

1. Физические элементы;

2. Логически составляющие.

Физические элементы это выше находящийся иерархия интернета, нас только интересует только «Логические составляющие». Лонические составляющие позволяют создать практически любой Интернет ресурс в сети, которые были описанные ранее (веб-сайт, веб-приложение, веб-портал).

Веб технологии части Frond-end [?]:

· Языки разметки (HTML, XML);

· Каскадные таблицы стилей (CSS, SCSS, SASS, LESS);

· Скриптовой язык (JavaScript);

Что касается Back-end — то это PHP, JAVA, NodeJS, ASP.NET. Каждый из них имеет свои нюансы, свои преимущества и недостатки.

 

Язык программирования PHP.

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

В области веб-программирования, в частности серверной части, PHP — один из популярных сценарных языков (наряду с JSP, Perl и языками, используемыми в ASP.NET). Популярность в области построения веб-сайтов определяется наличием большого набора встроенных средств для разработки веб-приложений. Основные из них [?]:

· автоматическое извлечение POST и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;

· взаимодействие с большим количеством различных систем управления базами данных (MySQL, MySQLi, SQLite, PostgreSQL, Oracle (OCI8), Oracle, Microsoft SQL Server, Sybase, ODBC, mSQL, IBM DB2, Cloudscape и Apache Derby, Informix, Ovrimos SQL, Lotus Notes, DB++, DBM, dBase, DBX, FrontBase, FilePro, Ingres II, SESAM, Firebird / InterBase, Paradox File Access, MaxDB, Интерфейс PDO);

· автоматизированная отправка HTTP-заголовков;

· работа с HTTP-авторизацией;

· работа с cookies и сессиями;

· работа с локальными и удалёнными файлами, сокетами;

· обработка файлов, загружаемых на сервер;

· работа с XForms.

В настоящее время PHP используется сотнями тысяч разработчиков. Согласно рейтингу корпорации TIOBE, базирующемся на данных поисковых систем, в мае 2016 года PHP находился на 6 месте среди языков программирования.

 

Язык программирования JAVA

Строго типизированный объектно-ориентированный язык программирования, разработанный компанией Sun Microsystems (в последующем приобретённой компанией Oracle). Приложения Java обычно транслируются в специальный байт-код, поэтому они могут работать на любой компьютерной архитектуре, с помощью виртуальной Java-машины. Достоинством подобного способа выполнения программ является полная независимость байт-кода от операционной системы и оборудования, что позволяет выполнять Java-приложения на любом устройстве, для которого существует соответствующая виртуальная машина. Другой важной особенностью технологии Java является гибкая система безопасности, в рамках которой исполнение программы полностью контролируется виртуальной машиной. Любые операции, которые превышают установленные полномочия программы (например, попытка несанкционированного доступа к данным или соединения с другим компьютером), вызывают немедленное прерывание. Часто к недостаткам концепции виртуальной машины относят снижение производительности. Ряд усовершенствований несколько увеличил скорость выполнения программ на Java [?]:

· применение технологии трансляции байт-кода в машинный код непосредственно во время работы программы (JIT-технология) с возможностью сохранения версий класса в машинном коде,

· широкое использование платформенно-ориентированного кода (native-код) в стандартных библиотеках,

· аппаратные средства, обеспечивающие ускоренную обработку байт-кода (например, технология Jazelle, поддерживаемая некоторыми процессорами фирмы ARM).

 

Программная платформа NodeJS

Программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения. Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-вывода через свой API (написанный на C++), подключать другие внешние библиотеки, написанные на разных языках, обеспечивая вызовы к ним из JavaScript-кода. Node.js применяется преимущественно на сервере, выполняя роль веб-сервера, но есть возможность разрабатывать на Node.js и десктопные оконные приложения (при помощи NW.js, AppJS или Electron для Linux, Windows и Mac OS) и даже программировать микроконтроллеры (например, tessel и espruino). В основе Node.js лежит событийно-ориентированное и асинхронное (или реактивное) программирование с неблокирующим вводом/выводом [?].

 

Технология ASP.NET

Технология создания веб-приложений и веб-сервисов от компании Майкрософт. Она является составной частью платформы Microsoft .NET и развитием более старой технологии Microsoft ASP. На данный момент последней версией этой технологии является ASP.NET 5. ASP.NET внешне во многом сохраняет схожесть с более старой технологией ASP, что позволяет разработчикам относительно легко перейти на ASP.NET. В то же время внутреннее устройство ASP.NET существенно отличается от ASP, поскольку она основана на платформе .NET и, следовательно, использует все новые возможности, предоставляемые этой платформой [?].

 

1.2 Процесс создания сайта

1.2.1 Планирование

Данный этап можно разделить на несколько подэтапов, создание идеи, разработка структуры проекта и проработка макета проекта.

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

Разработка структуры проекта. Когда мы определились с темой проекта, подобрали необходимый материал, следующим этапом будет разработка структуры проекта. Структура проекта подразумевает под собой разделы сайта, в соответствии с которыми будет формироваться навигационное меню и строиться дизайн проекта. На данном этапе можно классифицировать материал по темам и разделам.

Проработка макета проекта. После того, как мы определились со структурой проекта можно составить макет проекта (схематично).

Для отрисовки наброска можно использовать бумагу и ручку, Photoshop, любой другой редактор графики (раньше часто использовали Adobe Fireworks). Важно отметить, что данный этап – это не отрисовка готового дизайн-макета, а всего лишь схематичный набросок, выполненный для понимания того, как на сайте будут располагаться основные информационные блоки, графика и прочие элементы дизайна.

Рис.1.1. Название
источник: [?] или собственная разработка

Каждый рисунок должен имееть номер, название, источник и ссылку в тексте на него

Основные элементы страницы

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