Разработка веб-приложения отложенного постинга в социальные сети

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Дипломная работа

Разработка веб-приложения отложенного постинга в социальные сети

Пушников Д.А.

ОГЛАВЛЕНИЕ

Введение

1. Постановка задачи ВКР

2. Аналитический обзор предметной области

3. Аналитический обзор аналогов

4. Определение инструментов разработки

5. Разработка структуры приложения

6. Разработка обобщенного алгоритма

7. Разработка блок-схем отдельных процедур

8. Разработка пользователького интерфейса

9. Разработка программного обеспечения

10. Тестирование

11. Разработка методических указаний

Заключение

Список используемых источников

Приложение

ВВЕДЕНИЕ

Выполняемая выпускная квалификационная работа представляет собой проектирование веб-приложения для отложенной публикации постов в социальную сеть ВКонтакте.

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

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

1. ПОСТАНОВКА ЗАДАЧИ ВКР

Для достижения поставленной цели необходимо выполнить следующие задачи:

аналитический обзор предметной области;

аналитический обзор аналогов;

определение инструментов разработки;

разработка структуры веб-приложения;

разработка обобщенного алгоритма;

разработка блок-схем алгоритмов отдельных процедур;

разработка пользовательского интерфейса;

разработка программного обеспечения;

тестирование;

разработка методических указаний.

Требования к веб-приложению:

создание отложенного поста;

добавление текста;

выбор изображения;

установка даты и времени;

сохранение публикации на сервере;

редактирование существующего поста;

удаление существующего поста;

публикация в социальную сеть ВКонтакте.

Таким образом, при определении целей и требований к выпускной квалификационной работе можно начинать проектирование.

2. АНАЛИТИЧЕСКИЙ ОБЗОР ПРЕДМЕТНОЙ ОБЛАСТИ

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

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

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

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

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

Отложенный постинг - это публикация контента в автоматическом режиме в социальных сетях в строго определенное время. Он владеет большинством преимуществ, к ним относятся:

способность создания плана очередности и времени появления новостей на долгий период;

освобождение себя от недостатка идей, а читателей от малого количества новостей - пока намеченный контент публикуется согласно графику, вы получите возможность написать и выложить новый;

возможность быстрого создания поста с персонального компьютера или ноутбука;

Сервисы отложенного постинга подойдут вам, если:

У вас уже есть контент: например, вы пишите блог и публикуете статьи на сторонних ресурсах; размещение в соцсетях вы используете, чтобы охватить больше аудитории.

В соцсетях вы занимаетесь торговлей: ваши посты авторские, брендированные и содержат лого или ссылку на сайт.

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

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

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

3. АНАЛИТИЧЕСКИЙ ОБЗОР АНАЛОГОВ

При поиске аналогов было найдено несколько интернет-ресурсов для отложенного размещения. Среди них: Buffer, Hootsuite, Parasite, SocialKit, Instapromo.

Buffer

Комфортный сервис как для автоматического или отложенного размещения, так и для кросс-постинга (размещения контента одновременно в различных интернет ресурсах).

Возможность публикации в: Facebook, Twitter, Google+, LinkedIn, Instagram и (за дополнительную плату) на Pinterest

Цена: условно бесплатная

"Эконом": вы можете единовременно планировать до десяти публикаций и размещать их с пяти профилей совершенно бесплатно.

"Продвинутый": за десять долларов в месяц, число публикаций увеличится до одной сотни, а профилей - до одного десятка. В том числе вы увидите календарь публикации и возможность отложенной разноски для Pinterest.

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

Рисунок 1 - Стартовая страница сайта «Buffer»

Hootsuite

Система управления SMM-кампаниями Hootsuite даст вам возможность размещать контент в автоматическом режиме одновременно на нескольких сайтах.

Возможность публикации в: Facebook, Twitter, Google+, LinkedIn и (за отдельную плату) YouTube, Instagram, ВКонтакте

Цена: условно бесплатная

"Новичок": позволяет размещать публикации с трех аккаунтов, даст доступ к графику публикации и основным аналитическим данным.

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

"Супер-ПРО или бизнесмен": неограниченный пакет полезных функций, которые не имеют стоимости (информация не предоставлена на официальном сайте).

Рисунок 2 - Стартовая страница сайта «Hootsuite»

Parasite

Облачный сервис для отложенного постинга в Instagram с удобным и не сложным интерфейсом и достаточно большим количеством функций.

Возможность опубликовать в Instagram.

Стоимость: варьируется от тарифа.

В зависимости от тарифного плана Parasite дает возможность подключить от трех до тридцати аккаунтов Instagram, а весь спектр функционала сервиса предоставлен даже по самой низкой ставке.

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

Также сервис предоставляет возможность просматривать ленту и собственную галерею, добавлять и удалять комментарии, лайки и модерировать аккаунты.

Parasite анализирует статистику по подключенным профилям и позволяет ее увидеть в качестве визуальных графиков.

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

Рисунок 3 - Стартовая страница сайта «Parsite»

SocialKit

Сервис SocialKit успешно реализует мультифункциональный модуль отложенного размещения медиафайлов (изображений и видеозаписей) с возможностью их заблаговременной обработки разными фильтрами.

Может отправить: Instagram

Стоимость: определенная стоимость в сутки

Прежде всего, стоит обратить внимание на то, что модуль SocialKit реализован в двух версиях: Demo и Pro. Demo версия программы бесплатна для некоммерческого использования и содержит ряд функциональных ограничений. Бесплатная версия доступна для скачивания в вашем аккаунте сразу после регистрации. Вторая версия сборки (SocialKit Pro) является платной версией программы. Стоимость варьируется от двадцати трех до сорока трех рублей в сутки - все зависит от срока, за который оплачивается лицензия. Чем дольше срок, тем ниже стоимость каждого дня.

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

В описании к медиафайоам SocialKit дает право использовать весь спектр функций Instagram: добавлять эмоджи, отмечать других пользователей, добавлять хэштеги.

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

Рисунок 4 - Стартовая страница сайта «SocialKit»

Instapromo

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

Рисунок 5 - Стартовая страница сайта «Instapromo»

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

4. ОПРЕДЕЛЕНИЕ ИНСТРУМЕНТОВ РАЗРАБОТКИ

Операционная система: Linux 3.10.0

Операционная система Linux невероятно любима и распространена среди IT-специалистов. И для них это не удивительно. Профессионалы знают и видят большое количество оснований, чтобы отдать предпочтение именно этой ОС.

Данная система является приемником и можно сказать ребенком ОС семейства UNIX, которые в свое время были разработаны умно, взвешено и немногословно [1]. UNIX а в последствии Linux неизменно создавали не в какой то одной корпорации, а в различных научных институтах, центрах,делясь первоначальными проектами, мыслями и передавая друг другу наработанный опыт. Большую помощь в этом деле оказала всемирная сеть. Она дала возможность подключиться к созданию системы каждому желающему пользователю интернета, а не только научным сотрудникам.Таким образом Linux в итоге получилась не неделимой системой, а состоящей из компонентов. То есть различные компоненты разработаны и записаны различными людьми независимо друг от друга в различное время. В этом основное отличие от классических платных ОС, которые по структуре очень напоминают всемирно известный "непотопляемый" корабль.

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

В этом состоит результативность. Ведь различные программы применяют одинаковые типовые системные средства для типовых операций, а не осуществляют их сами. Это польза при создании программ для Linux [2].

И как следствие - защищенность, так как в самой структуре ОС предположено ограничение доступа.

Еще одна огромная ценность Linux -это то что он не знает понятия "вирус". Таким образом нет необходимости затрачивать финансовые, людские и системные потенциалы на вспомогательные противовирусные программы.

Linux имеет как минимум два ключевых приоритета перед всяким перевоплощениями операционной системы Windows. Они сопряжены с концепцией его популяризации:

Все компоненты системы имеют возможность беспрепятственного распространения;

Первоначальный текст всех компонентов абсолютно прозрачен.

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

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

Таким образом компаниям нет необходимости покупать права на программное обеспечение на каждое рабочее место. И все затраты де-факто ограничиваются затратами на сопровождение.

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

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

Linux и системообразующие утилиты к нему уже достаточное количество лет применяются сотнями тысяч профессионалов.

Также в Linux пользователь имеет возможность видеть все внутренности. Он обладает прозрачностью. Все компоненты системы и их взаимосвязь между собой скрупулезно и широко запротоколированы и доходчивы для понимания.

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

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

Можно сказать что в Linux свой девиз: "У нас заведено обнаруживать и устранять неисправности, а не устанавливать ОС заново"

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

Он имеет возможность смотреться как Windows, как MacOS, или как что-то совершенно своеобразное все реально изменить. И все ступени интерфейса свободны и несложны для преобразования.

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

Apache 2.2.29

Apache HTTP-сервер -- свободный веб-сервер. Apache это кроссплатформенное ПО [3]. Оно поддерживает такие ОС как Linux, BSD, Mac OS, Microsoft Windows, Novell NetWare, BeOS. Ведущим и главными преимуществами Apache принято считать надёжную, а также гибкую конфигурацию. Это ПО с открытым исходным кодом, данный веб-сервер обеспечивает работу около сорока шести процентов всех мировых сайтов.

Можно выделить следующие достоинства и качества данного программного обеспечения:

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

Настраиваемое. Модульная структура имеет ресурс настройки в случае необходимости создания конфигурации сервера к пожеланиям потребителя.

Удобство и комфортабельность администрирования. Файлы конфигурации в таком программном обеспечении используют ASCII. Это позволяет сделать их довольно простыми для администрирования, потому что позволяет исправлять файлы при помощи любого текстового редактора.

Расширяемое. Благодаря open source структуре и API, данное серверное приложение прогрессирует очень быстро благодаря работе, проведенной с ним разработчиками всех стран. Вследствие такого расширения любой разработчик имеет возможность воссоздать пользовательский модуль и дать возможность его использовать другими создателям через сообщество разработчиков Apache.

Эффективное: Это малообъемное, скоростное и, как следствие, использующее действительно минимальное количество системных ресурсов.

Независимость от операционной системы. Им возможно воспользоваться на самых разнообразных ОС, например, таких как UNIX, Windows 9 x / NT, MacOS и множестве других.

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

MySQL 5.6.43

База данных MySQL -- одна из самых часто используемых и признанных во всем мире с открытым кодом [4]. Вследствие своей протестированной производительности, надежности и легкости использования база данных MySQL которая чаще всего используется для веб-приложений на таких сайтах как Facebook, Twitter, YouTube [7]. Также ее неоднократно предпочитают в виде встроенной базы данных, которая распространяется как поставщиками ПО, так и товаропроизводителями.

Из достоинств хочется отменить такие как:

Быстродействие. По причине внутреннего механизма многопоточности MySQL действует достаточно оперативно.

Безопасность. Достаточно большая степень защищенности гарантируется при помощи базы данных mysql, формирующейся при установке пакета и имеющей 5 таблиц. Благодаря этим таблицам есть возможность отобразить, какой пользователь из какого домена с какой таблицей имеет возможность заниматься, а также какие действия он может осуществлять. Пароли, содержащиеся в базе данных, возможно закодировать через встроенную в MySQL функцию password.

Лицензия. Некоторое время назад лицензирование MySQL было платным, а теперь для не торговых целей осуществляется бесплатно [8].

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

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

Ресурсы. Вы вполне сможете обходиться обычным (не супермощным) компьютером.

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

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

PHP 7.2.3

PHP - общеизвестный язык программирования общего назначения с открытым исходным кодом [5]. PHP преднамеренно изобретен для веб-разработок и код PHP имеет возможность внедрения сразу в HTML.

Из преимуществ можно выделить следующее:

Традиционность. Язык РНР будет привычен специалистам, осуществляющих работу в самых разнообразных направлениях деятельности. Большинство строения языка взяты из Си, Perl [6]. Код РНР действительно схож с тем, который виден в характерных программах на С или Pascal. Поэтому изначальное знакомство с РНР становится намного проще. PHP -- совмещает лучшие свойства Perl и Си. Он намеренно ориентирован на деятельность во всемирной сети. Этот язык с многофункциональным и понятным синтаксисом. Восхищает то, что хотя PHP еще очень молодой язык, он заслужил хорошую репутацию в сообществе web-программистов, и теперь этот язык почти самый желаемый для разрабатывания web-приложений

Простота. Сценарий РНР имеет возможность состоять как из десяти тысяч строк так и из единственной строки [7]. Это меняется в зависимости от индивидуальности вашего задания. Отпадает надобность подгружать библиотеки и задавать особенные параметры для компилирования. РНР элементарно начинает исполнять код после первой экранирующей последовательности. Если у кода правильный синтаксис, он осуществляется именно так, как того желает специалист. Это язык, который может быть внедрен прямо в html-код страниц, которые, далее будут точно и правильно обрабатываться PHP-интерпретатором. Мы можем воспользоваться PHP для создания CGI-сценариев и освободиться от большинства малоудобных операторов вывода текста.Также мы имеем возможность воспользоваться PHP для создания HTML документов, освободившись от изобилия вызовов внешних сценариев.Огромное разнообразие функций PHP дадут нам шанс избежать написания больших строк кода пользовательских функций на C или Pascal.

Эффективность. Это чрезвычайно весомая причина при программировании для многоабонентских сред, к которым также относится и web. Огромное превосходство PHP содержится в его «движке». «Движок» PHP не является ни компилятором, ни интерпретатором. Он является передающим интерпретатором. Такое строение «движка» PHP дает нам привилегию производить обработку сценариев с огромной скоростью. Согласно исследованиям, большая часть PHP-сценариев обрабатываются гораздо быстрее подобных им программ, написанных на Perl. Но, что бы ни предпринимали специалисты PHP, откомпилированные исполняемые файлы будут работать намного шустрее. И все таки продуктивность PHP очень хороша для написания весьма глубоких web-приложений.

Защищенность. РНР предлагает специалистам надежные средства безопасности, которые можно символично разделить на два вида: средства системного уровня и средства уровня приложения [8].

Гибкость. Так как РНР служит встраиваемым языком, он имеет бесподобную гибкость, что соответствует требованиям разработчика. Хотя РНР обычно советуют использовать вместе с HTML, он также отлично внедряется и в JavaScript, WML, XML и другие языки. Также отлично структурированные приложения РНР свободно расширяются по мере необходимости. Также не замечено зависимости от браузеров, так как перед отправкой потребителю сценарии РНР полностью компилируются на стороне сервера. На самом деле сценарии РНР имеют возможность передаваться любымустройствам имеющим браузер, включая мобильные телефоны, электронные записные книжки, пейджеры и смартфоны и традиционные персональные компьютеры. Специалисты, занимающиеся вспомогательными утилитами, могут запускать РНР в режиме командной строки. Так как РНР не содержит кода, ориентированного на конкретный web-сервер, пользователи свободны в выборе сервера. Apache, Microsoft IIS, Netscape Enterprise Server, Stronghold и Zeus -- РНР хорошо работает на всех перечисленных серверах. Так как эти серверы работают на различных платформах, РНР в целом является платформенно-независимым языком и существует на таких платформах, как UNIX, Solaris, FreeBSD и Windows 95/98/NT/2000/XP/2003. Также средства РНР позволяют специалисту осуществлять работу с внешними компонентами, такими как Enterprise Java Beans или СОМ-объекты Win32. В результате таких новых возможностей РНР занимает заслуженное почетное место среди современных технологий и увеличивает масштаб проектов до нужных границ

Бесплатное распространение. Политика открытости исходного кода, и экспансия первоначальных текстов программ в народ, проявило бесспорно полезное воздействие на многие проекты, в первую очередь -- Linux, хотя и успех проекта Apache сильно обосновал позиции приверженцев Open Source. Описанное выше также относится и к истории возникновения РНР, поскольку поддержка пользователей со всего мира оказалась чрезвычайно важной причиной в развитии проекта РНР. Принятие стратегии Open Source и безвозмездное распространение исходных текстов РНР сделало драгоценный подарок пользователям, которые к тому же, стали как бы «массовой группой поддержки», и в большинстве известных веб-форумах есть решения даже на очень трудные задачи.

HTML 5

Язык HTML 5 известен своей широкомасштабной областью применения. Дополнительные преимущества дают возможность создать код документа на порядок чище, чем это было первоначально [5]. Также сама конституция документа превращается в более простую и доступную. Контейнер div отныне целиком замещается семантическими элементами.

Также, мультимедийные преимущества приведут в изумление всякого интернет-пользователя. Отныне пользователю для осуществления каких-либо манипуляций не понадобится бесчисленное количество добавочных программ. Вы можете слушать аудио записи напрямую в браузере или заниматься с видео изображениями без установки всевозможных излишних программ. Например, Adobe Flash станет лишь популярным приложением, в подключении которого язык HTML 5 абсолютно не нуждается

Кроме того, введение данных в HTML 5 оказывается намного легче и привлекательнее. Дело в том, что все материалы проходят проверку еще до момента их публикации [6]. В предыдущей версии такой возможности не было (тогда анализ производился только по окончании размещения данных). Вместе с тем коренным образом изменилась оболочка интернет-ресурса. Изображение и текст становятся неделимыми. Теперь даже профессиональные проектировщики-художники по достоинству оценят новейшие возможности языка HTML 5.

Они смогут вволю поэкспериментировать, разработать изящную визуализацию, которая подчас не доступна всевозможным глянцевым изданиям. Ну и конечно же нельзя не обратить внимание на модификации в области графического дизайна и мультипликации. Новая Функция Canvas, которая появилась в HTML 5, дает возможность разрабатывать новейшие игры и пользовательские интерфейсы совершенно на новой ступени [7]. Также есть возможность размещать не объемные игры и анимации напрямую внутри самого браузера. В прежней вариации для этого было необходимо устанавливать разнообразные вспомогательные программы [8].

CSS 3

CSS -- каскадные таблицы стилей. Они употребляются для иллюстрирования дизайна веб-страницы, который написан языком разметки. CSS стили применяются для разработки дизайна веб-страниц и наиболее часто применяются для форматов HTML и XHTML, но также имеют возможность применения и с файлами в формате XML [8]. CSS стили располагаются в индивидуальном файле, имеющим формат «имя.css». Это делает осуществимым употреблять одинаковые стили по отношению к различным страницам. Отличительная особенность - легкость пользования. CSS поможет легко и просто видоизменить образ нужного веб-сервиса, потому что все стили пишутся в одном.css файле (порой подобных файлов может быть несколько), которые возможно еще раз употребить для некоторого количества страниц единовременно. Скажем, Вы хотите поменять величину или окраску заголовков на всех страницах, тогда человеку не нужно будет заходить на отдельную страничку индивидуально, находить код и исправлять его. Теперь нужно лишь включить в таблицу запись: h1{font-size:12pt;...}, и эта характеристика станет функционировать для всех страниц к коим подключена CSS.

Еще одна очень важная особенность - это немалое сокращение величины сайта. Мы отделяем контент (HTML код) от зрительного декорирования (CSS) и это дает нам возможность значительно сократить объем HTML-страницы [9]. Не забывайте о том, что после загрузки веб-сервиса, браузер кэширует CSS-файл и в дальнейшем стили станут применимы для всех прочих страниц, следовательно человеку не будет нужно загружать их заново.

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

И еще одна особенность-безтабличная архитектура макета. До появления CSS веб-специалисты применяли табличный способ верстки, потому что так была возможность просто обозначить элемент на странице сайта. Но этот способ тормозил отображение страниц, код был достаточно объемным и имел ошибки. С пришествием в мир CSS стало возможным верстать дивами (div) и вставлять всякий элемент там, где вы пожелаете [10].

JavaScript

JavaScript -это язык программирования, он является прототипно-ориентированным. Данный язык отображает язык ECMAScript, коим прообразом он первоначально и был [8]. Первоначальный вариант родился на свет ещё в одна тысяча девятьсот девяносто пятом году и с того времени регулярно изменялся к лучшему, и в итоге приобрел теперяшний образ.

В большинстве случаев этот язык применяется в создании приложений и браузерах для повышения их взаимодействия с пользователем и подвижности [9].

Стержневой индивидуальностью такого языка отмечается то, что на него оказали влияние другие языки программирования (такие как Python, Java и др.) для придания наибольшего удобства JavaScript и доступности в восприятии его обычными интернет пользователями, не имеющих профессиональных навыков и углубленных познаний [11]. JavaScript - юридически оформленный торговый знак компании Oracle.

Основополагающими конкурентоспособными привилегиями языка программирования JavaScript, несомненно можно назвать следующее:

наивысшая понятность для обычного интернет пользователя;

поддержка самыми известными браузерами априори;

высочайшее быстродействие выполнения JavaScript;

подключение скриптов к HTML коду web-страницы напрямую и выполнение непосредственно при загрузке;

возможность запуска приложения не только в браузере, но и на сервере.

После выбора инструментов разработки у нас появляются плюсы. Отсюда мы имеем представление с помощью чего будет производиться создание будущего проекта. Появляется представление о структуре веб-приложения.

5. РАЗРАБОТКА СТРУКТУРЫ ПРИЛОЖЕНИЯ

Рисунок 6 - Графическая схема взаимодействия компонентов

Веб-приложение складывается из тройки базовых сегментов.

Первый сегмент называется клиентский. Он представляет собой графический внешний облик. Это является тем, что мы видим на страничке. Графический внешний вид выводится в браузере. Человек имеет взаимосвязь с веб-приложением непосредственно через браузер, переходя по ссылкам.

Пользовательский интерфейс будет разработан с помощью HTML, CSS и JavaScript.

Вторая часть веб-приложения называется серверной. Она представляет собой либо программу, либо скрипт на сервере. Она производит обработку запросов клиента (а сказать правильнее, запросы браузера). В основном серверный компонент веб-приложения пишется на PHP. Человек продвигается по ссылке, а браузер каждый раз направляет запрос к серверу. Сервер делает обработку такого запроса, вызывая определенный PHP-скрипт, а он в свою очередь организовывает веб-страницу, которая описана языком HTML, и затем направляет пользователю по интернету. Браузер моментально показывает выданный итог в образе следующей по очереди веб-странички.

Серверная часть будет состоять из Linux, Apache и PHP.

Третья составляющая это База данных. Ее коротко называют БД, или СУБД, что означает система управления базами данных. Это программное обеспечение на сервере, которое выполняет сохранение данных и может обеспечить их выдачу в определенный момент времени. Если это, например, форум или блог, то лежащие в Базе данных данные - это посты, комментарии, новости, и тому подобное. БД размещается на сервере. Серверный компонент веб-приложения (иначе, PHP скрипт) делает запрос к базе данных, для извлечения данных, требующихся для выстраивания странички, затребованной клиентом.

База данных будет воссоздана на MySQL.

Благодаря разработке структуры создается общее представление веб-приложения, его алгоритмов и примерный функционал.

6. РАЗРАБОТКА ОБОБЩЕННОГО АЛГОРИТМА

Рисунок 7 - Обобщенный алгоритм веб-приложения

Алгоритм работы состоит в следующем. При загрузке страницы появляется форма заполнения будущего поста, кнопка отправления заполненной формы и список постов в виде таблицы, которые были созданы. В форме пользователь может ввести следующие данные:

текст будущего поста;

выбор изображения;

установка даты и времени.

После ввода все этих форм и нажатия на кнопку отправить, публикация сохраняется на сервере и дожидается установленного пользователем времени для отправления на сайт ВКонтакте.

Если по какой-то причине публикацию не надо отправлять, то ее можно удалить. Так же при ошибке в создании поста есть возможность его редактировать.

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

7. РАЗРАБОТКА БЛОК-СХЕМ ОТДЕЛЬНЫХ ПРОЦЕДУР

Наиболее значимые процедуры происходят в двух файлах. Это «index.php» и «cronpost.php».

Index.php

Блок-схема из-за большого размера представления в приложении 1 и приложении 2.

Скрипт на сервере предоставляет интерфейс для ввода данных от пользователя, то есть сообщение, время, аутентификационные данные. Данный скрипт заносит данные в базу данных MySQL и предоставляет возможность редактирования сохраненных сообщений.

Cronpost.php



Рисунок 8 - Начало блок-схемы процедуры cronpost.php

Рисунок 9 - Продолжение блок-схемы процедуры cronpost.php

Скрипт контроля времени отправки сообщений. Запускается Cron (Command Run ON) -- системой для автоматического запуска программ и скриптов на сервере в определённое время. Проверяет таблицу с сообщениями в СУБД. Если находит сообщение, которое близко к времени отправки, формирует запрос на сервер ВКонтакта, и используя API функции ВКонтакт - отправляет сообщение на стену. Добавляя фотографию, если она есть и создавая отложенную в точности до указанного времени запись.

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

8 РАЗРАБОТКА ПОЛЬЗОВАТЕЛЬКОГО ИНТЕРФЕЙСА

Интерфейс -- общая граница между двумя функциональными объектами, требования к которой определяются стандартом; совокупность средств, методов и правил взаимодействия (управления, контроля и т. д.) между элементами системы

При создании веб-приложения изначально был создан простой и не привлекательный интерфейс. Он служил лишь для проверки функциональности приложения. Изначальный вид представлен на рисунке.

Рисунок 10 - Изначальный вид интерфейса

После предварительного тестирования сервиса было решено перейти к визуальному оформлению страницы. Для этого использовался HTML, CSS и JS.

В первую очередь была изменена HTML часть добавления контента для будущей публикации.

Рисунок 11 - Вид после изменения HTML части

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

Рисунок 12 - Базовые стили формы

После добавления стилей, одной из самых некрасивых форм оставалась форма для добавления изображения.

Рисунок 13 - Первоначальный вид формы добавления изображения после добавления CSS-стилей

С помощью класса «.inputfile» мы скрываем форму input типа file, а класс «.inputfile + label» стилизует «label», который связан с только что скрытым «input».

Рисунок 14 - Код стилей для класса «.inputfile» и блока «label»

А далее благодаря скрипту на JavaScript мы сделали контроллер, который выводит в форме имя выбранного изображения.



Рисунок 15 - Код «script.js»

В итоге у нас получилась красивая форма для добавления картинки или фотографии.

Рисунок 16 - До выбора изображения

Рисунок 17 - После выбора изображения

Так же была оформлена кнопка отправки поста

Рисунок 18 - Код стиля для кнопки «Отправить»

Таким образом, появилась симпатичная кнопка для отправления отложенной публикации.

Рисунок 19 - Окончательный вид кнопки «Отправить»

Предпоследним этапом было оформление таблицы для имеющихся постов.

Рисунок 20 - Код стилей для таблицы

Как следствие, мы достигли приятной глазу таблицы.

Рисунок 21 - Окончательный вид таблицы

В конце был добавлен фон. И так, у нас вышел совершенно неузнаваемый от изначального вида пользовательский интерфейс.

Рисунок 22 - Окончательный вид пользовательского интерфейса в целом

Также были добавлены медиазапросы и откорректированы стили для отображения на моем телефоне.

Рисунок 23 - Медиазапрос под разрешение iPhone SE

Так же в script.js был прописан код, для корректного ввода даты и времени.

Рисунок 24 - JavaScript-код для корректного ввода даты и времени

Таким образом, отображение с телефона стало лучше и удобнее.

Рисунок 25 - Интерфейс на iPhone SE

Полные тексты кодов style.css и scrypt.js можно посмотреть в приложениях с 3 по 12 и приложении 13 соответственно.

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

9. РАЗРАБОТКА ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ

Index.php

Вначале происходит подключение к базе данных.

Рисунок 26 - подключение к БД

После проводиться проверка ассоциативного массива переменных, переданных скрипту через параметры URL на присутствие значения deletepost, и выполняется запрос на удаление поста из базы данных.

Рисунок 27 - Проверка и запрос

Далее проводиться проверка ассоциативного массива переменных, переданных скрипту через параметры URL на присутствие значения textmessage, проверка полученных переменных на вредоносный контент и загрузка файлов.

Рисунок 28 - Проверка данных и сохранение в базу данных

Следующим шагом является проверка ассоциативного массива переменных, переданных скрипту через параметры URL на присутствие значения editpost. Если пост редактируется, то обновляем, если нет - вставляем новую запись.

Рисунок 29 - Редактирование или создание нового поста

После выводим начало интерфейса для ввода информации от пользователя. Совершаем проверку ассоциативного массива переменных, переданных через параметры URL на присутствие значения editpost. Делаем выборку из базы данных информации по указанному в переменной editpostid посту.

веб приложение отложенный постинг

Рисунок 30 - Вывод начала интерфейса, проверка и выборка

Следующим этап происходит вывод формы ввода данных поста, учитывая полученную информацию, полученную при наличии переменной editpostid.

Рисунок 31 - Вывод формы ввода

Далее проводим выборку из базы данных информации обо всех постах, имеющихся в базе данных, и выводим в таблицу.



Рисунок 32 - Выборка и вывод в таблицу

В конце выводится окончание HTML-страницы и закрытие работы с базой данных.

Рисунок 33 - Вывод окончания HTML-страницы и закрытие БД

Полный текст кода index.php можно посмотреть в приложении 5.

Cronpost.php

Сначала происходит объявление пременных, где $token - наш токен, полученный из запроса в ВКонтакте, а $owner_id - мой ID страницы в ВКонтакте

Рисунок 34 - Объявление переменных

Далее происходит запрос в базу данных на наличие в ближайшем временном периоде неотправленных сообщений.

Рисунок 35 - Запрос в БД

Следующим действием является получение разрешения на загрузку картинки в ВКонтакте, получение ссылки загрузки.

Рисунок 36 - Получение разрешения и ссылки

После загружаем изображение.

Рисунок 37 - Загрузка изображения

Дальше получаем данные для сохранения изображения.

Рисунок 38 - Получение данных для сохранения изображения

Сохраняем фото на сервер ВКонтакте.

Рисунок 39 - Сохранение фото на сервер ВКонтакте

В конце сохраняется информация об отправке и закрывается подключение к базе данных.

Рисунок 40 - Сохранение информации об отправке и закрытие подключения к БД

Полный текст кода cronpost.php можно посмотреть в приложении 6.

Разработав программное обеспечение, мы умеем полноценное веб-приложение. Далее стоит провести тестирование на функционирование и отсутствие ошибок.

10. ТЕСТИРОВАНИЕ

Тестирование №1. Создание и публикация отложенного поста с изображением формата JPG

Вводим текст, выбираем изображение JPG формата, устанавливаем дату и время.

Рисунок 41 - Тест первый, ввод данных, изображения формата JPG

Рисунок 42 - Опубликованный пост

Итог: пост был выложен в заданное время с текстом и изображением

Тестирование №2. Создание и публикация отложенного поста с изображением формата PNG

Вводим текст, выбираем изображение PNG формата, устанавливаем дату и время.

Рисунок 43 - Тест второй, ввод данных, изображения формата PNG



Рисунок 44 - Опубликованный пост

Итог: пост был выложен в заданное время с текстом и изображением

Тестирование №3. Редактирование созданного поста.

Выбираем один из уже созданных постов, редактируем текст и сохраняем.

Рисунок 45 - Выбор созданного поста

Рисунок 46 - Открытие созданного поста

Рисунок 47 - Добавление дополнительного текста

Рисунок 48 - Сохраненный пост после редактирования

Рисунок 49 - Опубликованный пост с редактированием

Итог: пост был отредактирован и опубликован.

Тестирование №4. Удаление поста.

Выбираем один из уже созданных постов и удаляем.

Рисунок 50 - Создания поста для последующего удаления

Рисунок 51 - Нажатие на кнопку удаления поста

Рисунок 52 - Отсутствие поста после удаления

Итог: пост был удален.

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

11. РАЗРАБОТКА МЕТОДИЧЕСКИХ УКАЗАНИЙ

Запуск программы

Откройте любой бразуер (Chrome, Opera, Safari, Edge и др.) и в строке браузера введите vkupload.agts29.ru и нажмите Enter

Рисунок 53 - Адрес веб-приложения в строке браузера

Авторизация

Для доступа к сайту введите логин «admin» и пароль «123123»

Рисунок 54 - Авторизация на сайте

Создание отложенного поста

Введите текст будущего поста, выберите изображение, установите дату и время будущей публикации и нажмите «Отправить»



Рисунок 55 - Ввод текста, выбор изображения, установка даты и времени и нажатие кнопки «Отправить»

Редактирование поста

Чтобы отредактировать публикацию, выберите ее в таблице «Имеющиеся посты» и нажмите на текст поста.

Рисунок 56 - Выбор существующего поста

Далее измените текст, изображение и/или дату и время публикации и нажмите «Отправить».



Рисунок 57 - Изменения текста, изображения и времени публикации

Удаление поста

Чтобы удалить публикацию, выберите ее в таблице «Имеющиеся посты» и нажмите на иконку мусорного бака.

Рисунок 58 - Удаление поста

Таким образом, любому новому пользователю будет не сложно, а главное - быстро разобраться с данным приложением.

ЗАКЛЮЧЕНИЕ

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

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

Для созданной программы также были составлены методические указания.

Разработанное программное обеспечение отвечает всем предъявленным требованиям, оно позволит улучшить ведение профиля в социальной сети в ВКонтакте.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Лав, Р. Linux. Системное программирование / Роберт Лав. -- Ньютон: O'Reilly Media, 2013. -- 446с.

2. Лав, Р. Ядро Linux. Описание процесса разработки / Роберт Лав. -- Москва: Вильямс, 2013. -- 496с.

3. Марк, А. Администрирование Apache / Арнольд Марк, Миллер Клинт, Алмейда Джефф -- Москва: Лори, 2012. -- 418с.

4. MySQL по максимуму / Шварц Бэрон, Ткаченко Вадим, Зайцев Петр. -- Санкт-Петербург: Питер, 2018. -- 864с.

5. Симдянов, И.В. PHP 7 / Симдянов Игорь Вячеславович, Котеров Дмитрий Владимирович. -- Санкт-Петербург: КУДИЦ-Пресс, 2018. -- 595с.

6. Хадсон, П. PHP. Справочник / Пол Хадсон. -- Санкт-Петербург: БХВ-Петербург, 2006. -- 448с.

7. Веллинг, Л. Разработка веб-приложений с помощью PHP и MySQL / Люк Веллинг, Лаура Томсон. -- Москва: Вильямс, 2016. -- 848с.

8. Робин, Н. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Никсон Робин. -- Санкт-Петербург: Питер, 2017. -- 768с.

9. Роббинс, Д.Н. HTML5, CSS3 и JavaScript. Исчерпывающее руководство / Дженнифер Нидерст Роббинс. -- Москва: Эксмо, 2014. -- 516с.

10. Фельке-Моррис, Т. Большая книга веб-дизайна / Терри Фельке-Моррис. -- Москва: Litres, 2017. -- 595с.

11. Дуглас, К. JavaScript. Сильные стороны / Крокфорд Дуглас. -- Санкт-Петербург: Питер, 2013. -- 179с.

ПРИЛОЖЕНИЕ 1

Блок-схема index.php

ПРИЛОЖЕНИЕ 2

Листинг style.css

?@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic);

@media only screen

and (min-device-width: 320px)

and (max-device-width: 568px) {

body{

background-color:green;

background: url(img/bg.jpg);

background-attachment: fixed;

font-family: 'Open Sans', sans-serif;

padding-top:10px;

}

p{

color:rgba(0,0,0,.7);

width:100%;

margin: 100px auto;

font-weight:300;

text-align:center;

}

a{

text-decoration:none;

color:#0079f2;

}

.container{

max-width: 32em;

margin: 0 auto;

padding: 0.6em;

}

/* Стили полей ввода */

.textbox{

height:50px;

width:100%;

border-radius:3px;

border:rgba(0,0,0,.3) 2px solid;

box-sizing:border-box;

font-family: 'Open Sans', sans-serif;

font-size:18px;

padding:10px;

margin-bottom:30px;

}

.inputfile {

width: 0.1px;

height: 0.1px;

opacity: 0;

overflow: hidden;

position: absolute;

z-index: -1;

}

.inputfile + label {

height:40px;

width:100%;

border-radius:3px;

border:rgba(0,0,0,.3) 2px solid;

box-sizing:border-box;

font-family: 'Open Sans', sans-serif;

font-size:12px;

padding:5px;

margin-bottom:5px;

}

.inputfile + label {

display: inline-block;

}

.inputfile + label {

cursor: pointer; /* "hand" cursor */

}

.message:focus,

.textbox:focus{

outline:none;

border:rgba(24,149,215,1) 2px solid;

color:rgba(24,149,215,1);

}

/* Стили текстового поля */

.message{

background: rgba(255, 255, 255, 0.4);

width:100%;

height: 120px;

border:rgba(0,0,0,.3) 2px solid;

box-sizing:border-box;

-moz-border-radius: 3px;

font-size:18px;

font-family: 'Open Sans', sans-serif;

-webkit-border-radius: 3px;

border-radius: 3px;

display:block;

padding:10px;

overflow:hidden;

}

/* Базовые стили кнопки */

.button{

height:50px;

width:100%;

border-radius:3px;

border:rgba(0,0,0,.3) 0px solid;

box-sizing:border-box;

padding:10px;

background:#90c843;

color:#FFF;

font-family: 'Open Sans', sans-serif;

font-weight:400;

font-size: 16pt;

transition:background.4s;

cursor:pointer;

}

/* Изменение фона кнопки при наведении */

.button:hover{

background:#80b438;

}

th {

max-width: 25em;

font-weight: normal;

font-size: 7px;

color: white;

padding: 10px 12px;

background: rgba(44, 204, 76,.8);

}

td {

font-size: 0.07em;

max-width: 1em;

color: #0079f2;

border-top: 1px solid white;

padding: 1px 3px;

background: rgba(44, 204, 76,.4);

transition:.3s;

}

tr:hover td {

background: rgba(44, 204, 76,.2);

}

h4 {

display: block;

margin-block-start: 0.5em;

margin-block-end: 0.5em;

margin-inline-start: 0px;

margin-inline-end: 0px;

font-weight: bold;

}

}

@media (min-width: 1024px) {

body{

background-color:green;

background: url(img/bg.jpg);

background-attachment: fixed;

font-family: 'Open Sans', sans-serif;

padding-top:10px;

}

p{

color:rgba(0,0,0,.7);

width:100%;

margin: 100px auto;

font-weight:300;

text-align:center;

}

a{

text-decoration:none;

color:#0079f2;

}

.container{

max-width: 32em;

margin: 0 auto;

padding: 0.6em;

}

/* Базовые стили формы */

form{

margin:0 auto;

max-width:35%;

box-sizing:border-box;

padding:20px;

border-radius:5px;

background:RGBA(255,255,255,1);

-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0,.45);

box-shadow: 0px 0px 15px 0px rgba(0, 0, 0,.45);

}

/* Стили полей ввода */

.textbox{

height:50px;

width:100%;

border-radius:3px;

border:rgba(0,0,0,.3) 2px solid;

box-sizing:border-box;

font-family: 'Open Sans', sans-serif;

font-size:18px;

padding:10px;

margin-bottom:30px;

}

.inputfile {

width: 0.1px;

height: 0.1px;

opacity: 0;

overflow: hidden;

position: absolute;

z-index: -1;

}

.inputfile + label {

height:50px;

width:100%;

border-radius:3px;

border:rgba(0,0,0,.3) 2px solid;

box-sizing:border-box;

font-family: 'Open Sans', sans-serif;

font-size:18px;

padding:10px;

margin-bottom:5px;