Приложения (программный код)




Основная часть

Описание предметной области

Исследование предметной области:

· Разработка чатов – процесс создания чатов

· Разработкой чатов занимается разработчик веб-приложений.

· Благодаря комет-серверу, отсутствию рекламы и простому удобному интерфейсу общение в чате становиться очень комфортным

· Данное приложение позволяет общаться с собеседникакми без регистрации. относится к средствам обмена сообщениями по компьютерной сети в режиме реального времени.

Принципы разработки Web приложений

· Постоянная проверка корректной работы на разных браузерах.

Постановка задачи

· Задачей данной работы является разработка простого анонимного чата

Выбор средств реализации

· Основным средством разработки данного проекта является языки Js и Html, а также каскадная таблица стилей CSS.

· Созданo с помощью notepad++. приложения работают под операционными системами Windows, OS X, Windows Phone, Android, Apple iOS, Linux

· Есть возможность отправки и получения сообщений.

· Основные характеристики: занимает свободного пространства на жёстком диске без файла JPEG 12кб, а с файлом JPEG занимает 2,48 МБ

· В качестве целевой платформы разработки выбраны операционные системы семейства MS Windows (7/8.1/10)

· Основным языком программирования является Js

· Написание простых скриптов выполняется на Js

· В проекте используется Html, Css, Js.

Реализация

Разработка форм.

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

· Все данные вводятся на сайте

· Используется comet-server:

Реализация функционала программы.

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

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

· Предусмотрена возможность введения своего nickname или имени

· Сообщения выводятся в строку по левому краю таблицы и выглядит это таким образом:

· «Имя: Сообщение»

Вызываемые функции:

· function web_send_msg()- Отправляет сообщение в чат

· function strip(html)- Вырезает HTML теги

Схема взаимосвязи программных модулей:

Укрупненный алгоритм решения задачи:

 

Заключение

Результатом работы на УП является приложение «A-Chat».

Реализованы отправка и получение сообщений в чате, а также удобный минималистичный интерфейс

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

Эксплуатационные особенности – это простой и удобный интерфейс.

Данное приложение создано для возможности анонимно общаться с другими пользователями без регистраций

Список использованных источников

1. https://ruseller.com/jquery.php?id=124

2. https://ru.wikipedia.org/wiki/%D0%A7%D0%B0%D1%82

3. https://habrahabr.ru/company/comet-server/blog/273573/

4. https://habrahabr.ru/post/104945/

Глоссарий

· Комет-сервер - любая модель работы веб-приложения, при которой постоянное HTTP-соединение позволяет веб-серверу отправлять (push) данные браузеру без дополнительного запроса со стороны браузера.

· УП – Учёбная практика

· БД – База данных

 

Список аббревиатур

· HTML- HyperText Markup Language

· СSS- Cascading Style Sheets

· Js- javascript

Приложения (программный код)

A-Chat.html

<html>

<head>

<title>

A-chat

</title>

<link href="style.css" rel="stylesheet">

</head>

<body>

<table id='table0' class='T1'>

<caption id="A1" style="font-size:4vw" class='A1'>A-Chat</caption>

<tr><td id="D1" style="font-size:42px" class='D0'><a href="A-Chat-Anonim.html">Начать общенение</a></td></tr>

<tr><td id="D2" style="font-size:42px" class='D0'><a href="A-Chat-Info.html">О сайте A-Chat</a></td></tr>

</table>

</body>

</html>

 

A-Chat-Anonim.html

<html>

<head>

<title>A-Chat</title>

<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>

<script language="JavaScript" type="text/javascript" src="https://comet-server.ru/CometServerApi.js" ></script>

<link href="style.css" rel="stylesheet">

</head>

<body>

<table id="table1" class='T1'>

<tr>

<td width=50% id="D3" style="font-size:42px" class='D0'><a href="A-Chat.html">A-Chat</a></td>

<td width=50% id="D3" style="font-size:42px" class='D0'><a href="A-Chat-Info.html"О сайте A-Chat>О сайте A-Chat</a></td>

</tr>

</table>

</body>

<body>

<table id="table3">

<br>

<td><fieldset style="font-size:30px" class='f3'><div id="WebChatFormForm"></div></fieldset>

<tr><td id='N1'><input type="text" id="WebChatNameID" placeholder="Укажите ваше имя..." > <br>

<textarea id = "WebChatTextID" placeholder = "Отправьте сообщение в online чат..." ></textarea><br>

 

<input type="button" onclick="web_send_msg();" value="Отправить" ></td></tr>

<td><div id="answer_div" ></div>

</table>

 

<script>

// вырезает html теги

function strip(html)

{

var tmp = document.createElement("DIV");

tmp.innerHTML = html;

return tmp.textContent || tmp.innerText || "";

}

 

// Отправляет сообщение в чат

function web_send_msg()

{

// Получение значений из элементов ввода.

var text = $("#WebChatTextID").val(); // Получаем текст сообщения

var name = $("#WebChatNameID").val(); // Получаем имя пользователя

 

// Очистка поля с текстом сообщения

$("#WebChatTextID").val("");

 

// Добавление отправленного сообщения к списку сообщений.

$("#WebChatFormForm").append("<p><b>"+strip(name)+": </b>"+text+"</p>");

 

// Отправка сообщения в канал чата

CometServer().web_pipe_send("web_chat_pipe", {"text":text, "name":name});

}

 

 

// Функция выполнится после загрузки страницы

$(document).ready(function()

{

CometServer().start({dev_id:1}) // Подключаемся к комет серверу

 

// Подписываемся на канал в который и будут отправляться сообщения чата.

CometServer().subscription("web_chat_pipe", function(msg)

{

console.log(msg)

// Добавление полученного сообщения к списку сообщений.

$("#WebChatFormForm").append("<p><b>"+strip(msg.data.name)+": </b>"+msg.data.text+"</p>");

});

});

</script>

</body>

</html>

 

A-Chat-Info.html

<html>

<head>

<title>

О сайте A-Chat

</title>

<link href="style.css" rel="stylesheet">

</head>

<body>

<table id="table1" class='T1'>

<tr>

<td width=50% id="D3" style="font-size:42px" class='D0'><a href="A-Chat.html">A-Chat</a></td>

<td width=50% id="D2" style="font-size:42px" class='D0'><a href="A-Chat-Anonim.html">Анонимный чат</a></td>

</tr>

</table>

<table id="table2" class='T1'>

 

<tr><td><fieldset style="font-size:30px" class='f1'>

<legend style="font-size:42px" class='f11'>

О анонимном чате

</legend>

"Всё гениальное просто" и это про интерфейс нашего анонимного чата. Строгий минималистичный дизайн в совокупности с невероятным удобством использования

предоставляют вам возможность комфортно общаться с вашим собеседником в сети Internet.

Всё что нужно - это ввести ваше имя или nickname.

</fieldset></td></tr>

 

<tr><td><fieldset style="font-size:30px" class='f2'>

<legend style="font-size:42px" class='f22'>

Польза анонимности

</legend>

Весной 1906 г. в Нью-Йорке протестантского священника Гарри Уоррена разбудил звонок. «Умоляю о встрече, у меня безвыходная ситуация», — услышал он из телефонной трубки и ответил:

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

«Перед тем как уйти из жизни, звоните мне в любое время суток».<br>

У этого человека просто не было человека, которому он мог довериться и рассказать о своей проблеме и таких людей миллионы.<br>

Что было бы, если этот человек успел выговориться? Может быть он передумал и не покончил жизнь самоубийством?

Может быть простой диалог с человеком вернул ему надежду и спас его от самого себя?<br>

Психологи считают, что это облегчило бы ношу человека, а возможно и спасло ему жизнь.

</fieldset></td></tr>

 

<tr><td><fieldset style="font-size:30px" class='f1'>

<legend style="font-size:42px" class='f11'>

Создатель сайта

</legend>

Cоздатель: Зайцев Андрей, студент ХПК<br>

Ссылка на <a class='D0' href="https://t.me/Zaytsev_Andrew">Telegram:</a> <br>

Ссылка на <a class='D0' href="https://vk.com/zaytsev_web_com">VK.COM:</a>

</fieldset></td></tr>

 

</table>

</body>

</html>

 

Style.css

body

{color: white;

overflow: auto;

background-color: white;

font-family: calibri;

background-image: url(4.jpeg);

background-size: 100%;

background-repeat: no-repeat;

background-position: top center;}

 

#table0

{border: 1px solid white;

background-color: black;

opacity: 0.5;

margin: auto;

width: 50%;

text-align: center;

padding: 30px;

padding-left: 50px;}

 

#table1

{border: 1px solid white;

background-color: black;

opacity: 0.7;

margin: auto;

width: 100%;

text-align: center;

padding: 30px;}

 

#table2

{border: 1px solid white;

background-color: black;

opacity: 0.7;

margin: auto;

width: 70%;

text-align: center;

padding: 30px;}

 

#table3

{border: 1px solid white;

font-size: 25px;

background-color: black;

opacity: 0.7;

width: 70%;

margin: auto;

height: 40%;

}

 

 

#D1

{padding: 35px;}

#D2

{padding: 35px;}

#A1

{padding: 20px;}

#N1

{padding-top: 400px;

padding-bottom: 50px;

padding-left: 20px;}

 

.D0:hover

{text-decoration: underline;}

 

td a{text-decoration: none;

color: white;}

 

.f1

{text-align: left;}

.f11

{text-align: left;}

.f2

{text-align: left;}

.f22

{text-align: right;}

.f3

{position: fixed;

top: auto;

text-align: left;

width: 65%;

overflow: auto;

height: 20%;}

 

input

{color: White; /* цвет текста */

width: 299px;

font-size: 20px;

text-decoration: none; /* убирать подчёркивание у ссылок */

user-select: none; /* убирать выделение текста */

background: black; /* фон кнопки */

padding:.7em 1.5em; /* отступ от текста */

outline: none; /* убирать контур в Mozilla */}

 

textarea

{color: White; /* цвет текста */

font-size: 20px;

text-decoration: none; /* убирать подчёркивание у ссылок */

user-select: none; /* убирать выделение текста */

background: black; /* фон кнопки */

padding:.7em 1.5em; /* отступ от текста */

outline: none; /* убирать контур в Mozilla */

width: 65%;

height: 100px;}

 

 



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2018-01-08 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: