Также, мультимедийные преимущества приведут в изумление всякого интернет-пользователя. Отныне пользователю для осуществления каких-либо манипуляций не понадобится бесчисленное количество добавочных программ. Вы можете слушать аудио записи напрямую в браузере или заниматься с видео изображениями без установки всевозможных излишних программ. Например, 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, проверка полученных переменных на вредоносный контент и загрузка файлов.