Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 4)

Для работы с базами данных принято решение использовать СУБД MySQL 5.6. MySQL отличатся хорошей скоростью работы, надежностью, гибкостью. Поддержка сервера MySQL автоматически включается в поставку PHP.

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

Таким образом, для разработки Web-приложения стоматологической клиники ООО «Семейная стоматология» принято решение использовать Adobe Illustrator СС 2015, Microsoft Visio 2013, Brackets 1.6, HTML5, CSS3, JavaScript, PHP 5.3, MySQL 5.6, SMM.

3 Проектирование Web-приложения

3.1 Разработка дизайна Web-приложения

Дизайн Web-приложения выполнен в фирменной цветовой гамме предприятия (рисунок 1.2). В качестве фона выбран белый цвет. Для текста использовано семейство шрифтов sans-serif – рубленные шрифты (шрифты без засечек). Для контактной информации, кнопок входа, регистрации и выхода верхней части страниц Web-приложения выбран темно-синий шрифт размером 13 пт. При наведении на кнопки входа, регистрации и выхода текст имеет подчёркнутое начертание. Для основного меню выбран голубой шрифт размерами 20 пт. При наведении цвет текста основного меню меняется на синий. Для подменю выбран голубой шрифт размером 18 пт. При наведении цвет текста подменю меняется на белый, а фон – с белого на голубой. Для заголовков страниц Web-приложения выбран темно-синий шрифт Impact размером 36 пт, так как данный шрифт использован в логотипе предприятия. Для меню и контактной информации нижней части страниц Web-приложения выбран темно-синий шрифт размером 14 пт. При наведении на меню текст имеет подчёркнутое начертание.

Для основной части главной страницы, раздела «Партнеры», а также подразделов «Терапевтическая стоматология», «Протезирование зубов», «Хирургическая стоматология», «Имплантация зубов» использован черный шрифт размером 18 пт и с выравниванием по ширине страницы. Все изображения главной страницы и раздела «Партнеры» в формате jpg. Размеры изображений не превышают 1000 пикселей. Макет главной страницы Web-приложения представлен на рисунке 3.1.

Рисунок 3.1 – Макет главной страницы

Для основной части раздела «Врачи» использован черный шрифт с полужирным начертанием и размером 14 пт для ФИО врача, а для должности – чёрный шрифт с курсивным начертанием и размером 12 пт. Все изображения раздела «Врачи» в формате jpg. Размеры изображений не превышают 1000 пикселей. Макет раздела «Врачи» представлен на рисунке 3.2.

Рисунок 3.2 – Макет страницы «Врачи»

Основная часть подраздела «Прайс» представлена в виде таблиц, у которых внешние границы отсутствуют, а внутренние – серого цвета. Для названия раздела услуг использован темно-синий шрифт с полужирным начертанием и размером 13 пт, а для наименования услуг и цен – чёрный шрифт размером 12 пт. Макет подраздела «Прайс» представлен на рисунке 3.3.

Рисунок 3.3 – Макет страницы «Стоимость услуг»

Окна регистрации, авторизации и записи на приём имеют одно стилевое оформление, которое представлено на рисунке 3.4. Для названия окон использован белый шрифт размером 22 пт. Для наименования полей форм использован черный шрифт размером 16 пт. Кнопки «Войти», «Зарегистрироваться», «Отправить» и «Очистить» имеют голубой фон и белый шрифт размером 16 пт.

Рисунок 3.4 – Макет окна «Запись на прием»

Основная часть подразделов «Моя запись», «Запись на сегодня», «Запись на завтра», «Запись на неделю», «Запись на месяц», «Запись за все время» представлена в виде таблиц. Шапки таблиц, строки редактирования и удаления окрашены в голубой цвет, а остальные строки таблиц – в светло-голубой цвет. Для кнопок «Редактировать» и «Удалить» использован белый шрифт размером 12 пт, для всего остального текста использован белый шрифт размером 13 пт. Макет раздела «Запись пациентов» представлен на рисунке 3.5.

Рисунок 3.5 – Макет раздела «Запись пациентов»

Основная часть разделов «Медицинская карточка» и подраздела «Добавить врача» соответствует стилевому оформлению «Запись на приём», а стилевое оформление подраздела «Редактировать информацию о врачах», соответствует рисунку 3.5.

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

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

Для разработки клиентской части Web-приложения использованы технологии HTML5, CSS3, JavaScript. Главными тегами HTML5 при разработки структуры страниц являются:

– header;

• nav;

• main;

• article;

• section;

• aside;

• menu;

• footer.

Применение данных тегов представлено на рисунке 3.6.

Рисунок 3.6 – Применение тегов HTML5

При разработке меню использован язык HTML5 и CSS3. Сначала с использованием HTML5 разработан маркированный список меню. Часть списка меню представлена в листинге 3.1.

Листинг 3.1 – Меню страниц Web-приложения

<ul id="nav">

<li><a>О клинике</a>

<ul>

<li><a href="index.php#about-us" class="submenu3">О нас</a></li>

<li><a href="index.php#license" class="submenu3">Лицензия</a></li>

</ul>

</li>

<li><a href="doctors.php">Врачи</a></li>

<li><a>Услуги</a>

<ul>

<li> <a href="therapeutic-dentistry.php" class="submenu3"> Терапевтическая стоматология</a></li>

<li> <a href="prosthetic-dentistry.php" class="submenu3"> Протезирование зубов</a></li>

<li> <a href="surgical-dentistry.php" class="submenu3"> Хирургическая стоматология</a></li>

<li> <a href="dental-implants.php" class="submenu3"> Имплантация зубов</a></li>

</ul>

</li>

</ul>

С помощью CSS3 оформлено меню согласно макету представленному на рисунке 3.1. В листинге 3.2 представлена часть CSS-стиля, которая применена для выпадающего списка меню.

Листинг 3.2 – CSS-стиль для меню

#nav ul

{

position:absolute;

left:-9999px; /* Скрываем за экраном, когда не нужно*/

}

#nav ul li

{

float:none;

}

#nav ul a

{

white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */

display:block;

}

#nav li:hover ul

{

left:0; /* Выводим выпадающий пункт при наведении курсора*/

z-index: 10000;

}

При разработке галереи использованы HTML5, CSS3 и JavaScript. С помощью HTML5 вставлены необходимые изображения для галереи (листинг 3.3).

Листинг 3.3 – Вставка изображений

<section id="dg-container" class="dg-container">

<div class="dg-wrapper">

<a><img src="img/стоматология1.jpg" alt="стоматология"></a>

<a><img src="img/стоматология2.jpg" alt="стоматология"></a>

<a><img src="img/стоматология5.jpg" alt="стоматология"></a>

<a><img src="img/стоматология6.jpg" alt="стоматология"></a>

<a><img src="img/стоматология3.jpg" alt="стоматология"></a>

<a><img src="img/стоматология4.jpg" alt="стоматология"></a>

</div>

<div class="dq-w-nav">

<nav>

<span class="dg-prev"></span>

<span class="dg-next"></span>

</nav>

</div>

</section>

В CSS-стилях настроены размеры изображений. С помощью JavaScript реализована функция переключения изображений по нажатию стрелок [8].

При разработке всплывающих окон регистрации, авторизации и записи на приём использованы HTML5, CSS3 и JavaScript. С помощью HTML5 и CCS3 разработана форма всплывающих окон (листинг 3.4).

Листинг 3.4 – Форма регистрации

<div id="registrblock" class="registrblock">

<a class="close2" href="javascript:void(0)" id="closeRegistr" onclick ="closeRegistr()"></a>

<form action="registratsiya.php" method="post">

<div class="title2">Регистрация</div>

<h6 class="regist"> Фамилия:

<br><input type="text" class="regi" name="surname" required>

<br>Имя:

<br><input type="text" class="regi" name="name" required>

<br>Отчество:

<br><input type="text" class="regi" name="patronymic" required>

<br>Email:

<br><input type="email" name="email" class="regi" required>

<br>Логин:

<br><input type="text" class="regi" name="login" placeholder="Не менее 6 символов" required>

<br>Пароль:

<br><input type="password" class="regi" name="password" id="password" placeholder="Не менее 6 символов" required>

<br>Повтор пароля:

<br><input type="password" class="regi" name="password1" id="password1" placeholder="Не менее 6 символов" required> </h6>

<input type="submit" class="submit2" value= "Зарегистрироваться" >

</form>

</div>

С помощью JavaScript реализованы функции открытия и закрытия всплывающих окон (листинг 3.5).

Листинг 3.5 – Реализация открытия и закрытия всплывающих окон

function registrWindow()

{

Характеристики

Список файлов ВКР