Разработка электронного мультимедийного издания
Разработка сайта начинается с создания макета в программе Adobe Photoshop. Макет может отличаться от конечного результата: он дает дизайнеру понять, как располагать элементы, какого стиля придерживаться и т.д.
Рис 2.1 Макет в программе Adobe Photoshop
По макету начинается создание новой страницы. Для этого в программе Brackets создаем новый документ, сразу сохраняем в формате .html, чтобы программа графически выделяла теги и атрибуты, предупреждала об ошибках, закрывала теги и т.д.
Brackets [11] — свободный текстовый редактор для веб-разработчиков. Brackets ориентирован на работу с HTML, CSS и JavaScript. Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность т.е. совместимость с операционными системами Mac, Windows и Linux. Brackets создан и развивается Adobe Systems под лицензией MIT License и поддерживается на GitHub.
На сегодняшний день сообществом создано множество расширений, добавляющих большинство необходимых инструментов для работы над кодом, таких как система контроля версий Git, просмотр HTML-кода в браузере в реальном времени (Live Preview), автоматическое форматирование кода.
Рис. 2.2 Проект, открытый в программе Brackets
Пишем основу страницы: теги <html>, <head>, <body>, указываем кодировку и подключаем файлы css и javascript.
В css файле подключаем шрифты, для каждого прописываем:
@font-face {
font-family: 'PFAgoraSansPro-Medium';
font-style: normal;
font-weight: normal;
src: local('PFAgoraSansPro-Medium'),
url('../fonts/ufonts.com_pfagorasanspro-medium.woff') format('woff');
}
Далее необходимо сделать каркас страницы. Для этого создаем div, которому в css задаем атрибут display: flex. Это превращает его в flex-контейнер. Внутри основного контейнера в строку располагаются три вспомогательных (условно назовем их правый, левый и центральный). Элементы в них располагаются в столбец.
В первом контейнере располагаем кнопку «Алфавитный указатель» создаем div с классом searcher, внутри которого будет размешаться надпись. Чтобы было понятно, что это кнопка, задаем отступы и границу. В js файле прописываем скрипт, который будет отображать нижележащий div с классом ghosty по щелчку, меняя его класс на ghosty.active. Для этого используем jQuery, чтобы быстро обратиться к нужному элементу.
$(document).ready(function () {
var $ghosty = $(".ghosty");
$(".searcher").click(function () {
$(".ghosty").toggleClass("active");
});
});
Класс ghosty имеет прозрачность (opacity) равную 0 и свойство translate равное 100%, т.е. размещен ниже, чем он должен быть. При активации эти свойство плавно возвращаются к значениям по умолчанию, и элемент «всплывает».
Внутри алфавитного указателя размещаем буквы-ссылки. Чтобы они указывали на правильный раздел указателя, добавляем в ссылки закладки — ссылка выглядит как «pointer.html#Б», т.е. ведет к закладке «Б» на странице pointer.html.
Добавляем анимацию при наведении — изменение цвета и жирности:
.ghosty a:hover {
font-weight: 700;
color:yellowgreen;
}
Аналогично оформляем кнопку в правой части страницы, настраиваем для нее отступы.
Flex-контейнер должен прилегать к нижнему краю страницы. Для этого задаем ему следующие свойства:
.container{
min-height: calc(100vh - 50px);
bottom: 0;
left: 0;
display: flex;
position: relative;
justify-content: space-between;
align-items: stretch;
}
Для того, чтобы создать интерактивные иллюстрации цветов, необходимо было сначала отобрать gif-анимации и видео с черным фоном. Чтобы изображения были на подложке, назначаем им z-index = 0.
Изображение одуванчика и розы с помощью программы Adobe Photoshop необходимо было обрезать и создать две его копии: незацикленную gif-анимацию и статичную gif. Замена одного файла на другой при наведении на соответствующую область экрана реализовано скриптом jquery.
jQuery ([dʒeɪ kwɪəri]) — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими [10].
var staticGifSuffix = "-static.gif";
var gifSuffix = ".gif";
$(document).ready(function () {
$(".img-animate").each(function () {
$(this).hover(
function () {
var originalSrc = $(this).attr("src");
$(this).attr("src", originalSrc.replace(staticGifSuffix, gifSuffix));
},
function () {
var originalSrc = $(this).attr("src");
$(this).attr("src", originalSrc.replace(gifSuffix, staticGifSuffix));
} ); }); });
Затем создается центральная надпись. В блоке с ней размещается аудиоплеер: для его создания нужен плагин, использующий Flash Player. Сначала на сайте в конструкторе собираем подходящий вариант (черный фон, минимум элементов управления), затем скачиваем и помещаем в папку сайта файл uppod-audio2.swf, а сгенерированные стили css и скрипт js вставляем в наш проект.
Рис. 2.3. Стилизация аудиоплеера
Меню создается в два этапа. Сначала рисуем анимированную кнопку: это span с элементами before и after, расположенными соответственно на 10 пикселей выше и ниже центрального элемента. Нажатие на элемент активирует скрипт, который меняет id кнопки и запускает горизонтальное меню.
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: white;
position: absolute;
display: block;
content: '';}
#nav-toggle span:before {
top: -10px;}
#nav-toggle span:after {
bottom: -10px;
}
Анимация иконки («раздвигание») реализуется через css
#nav-toggle.active span, #nav-toggle.active span:before, #nav-toggle.active span:after {transform: scale(1.5, 1);}
#nav-toggle.active span:before { transform: translateY(-10px);}
#nav-toggle.active span:after {transform: translateY(10px);}
Меню анимировано через свойство translateX, которое по умолчанию задано 100%, а для класса .nav__list—opened - 0. При наведении на каждый div цвет текста внутри меняется, а под ссылкой появляется элемент :before.
.nav__list {
position: fixed;
background-color: black;
right: 0;
top: 0;
z-index: 98;
width: 90%;
min-height: 30px;
transform: translateX(100%);
margin: 0;
padding: 0 20px;
padding-top: 10px;
list-style: none;
box-sizing: border-box;
transition: 0.7s;
}
.nav__list--opened {
transform: translateX(0);
}
.nav__item {
display: inline-block;
width: auto;
margin-bottom: 10px;
padding: 10px 20px;
font-size: 20px;
transition: all 0.7s ease-in-out;
}
Рис. 2.4. Главная страница сайта
Затем создаем типовые страницы энциклопедии. Их стили пропишем в pages.css. Снова используем flexbox, только на этот раз в нем будет два элемента.
<div class=container>
<div class=item1></div>
<div class=item2></div>
</div>
Левый div занимает 40% ширины, правый – 60%, для каждого настроены параментры отступов, поля, шрифт.
В левом элементе разместим интерактивную галерею fancybox: для этого нужно выбрать и скачать на сайте нужный вариант и подключить его:
<link href="jquery.fancybox.min.css" rel="stylesheet">
<script src="jquery.fancybox.min.js"></script>
Используя элементы этого плагина, создаем галерею: одно изображение будет крупным, остальные – иконками. При щелчке на них должна открываться «карусель».
<div class=gallery>
<a data-fancybox="gallery" href="img/авран1.jpg">
<img height=300px src="img авран1.jpg"></a> <br>
<a data-fancybox="gallery" href="img/авран.JPG">
<img height=40px src="img/авран"></a>
<a data-fancybox="gallery" href="img/авран2.jpg">
<img height=40px src="img/авран2.jpg"></a> </div>
Под галереей размещаем ссылки на систематический указатель, задаем им курсивное начертание и шрифт Cormorant Garamond. Чтобы ссылки вели на соответствующие места указателя, добавляем закладки, как на главной странице: href="classification.html#Цветковые".
В правый div вставляем текст статьи, ключевые слова выделяем ссылками.
Ниже размещаем навигацию (кнопки назад, вперед, к началу) в отдельном flexbox. По этому шаблону создаем 21 страницу.
Рис. 2.5. Типовая страница энциклопедии
Вернемся к главной странице: теперь, когда статьи собраны, можно написать скрипт перехода на случайную страницу. Она меняет на href ссылки «Случайная статья» на значение location.href, которое состоит из случайного числа от 1 до 21 и окончания «.html».
function GetIntRandom(min,max){
return Math.floor(Math.random() * (max-min+1))+min; }
document.getElementById('testbt').addEventListener('click',function(){
location.href = GetIntRandom(1,21)+'.html';
});
Переходим к алфавитному указателю, подключаем к странице файл со стилями статьи. Мы будем использовать стиль блока .item2. Вставляем в него нужные нам буквы и соответствующие ссылки, чтобы работали закладки, в первую ссылку под каждой буквой добавляем атрибут name, например, name="Б". Добавляем анимацию ссылок, как в навигации. Фоновой иллюстрации задаем высоту 100% и position: fixed, чтобы она всегда занимала левую часть экрана.
Рис. 2.6. Алфавитный указатель
Предметный указатель разрабатывается в два этапа. Сначала в тексте книги нужно найти ключевые слова, затем поместить их в документ. Под каждым ключевым словом – список ссылок на статьи, в которых эти ключевые слова есть.
В правой части экрана будут появляться подсказки с классом .opentext: при наведении на соответствующий подсказке текст прозрачность меняется с 0 до 100.
.opentext {
background: rgba(255,255,255, 0.7);
font-family: 'Cormorant Garamond', serif;
margin: 20px 0px;
font-size: 16px;
font-style: italic;
font-weight: 100;
opacity: 0;
display: block;
transition: 1s;
position: absolute;
left: 62%;
z-index: 1;
border-bottom: 1px solid grey;
}
h3:hover .opentext,
.open:hover .opentext {
opacity: 100;
}
Добавляем скрипт, который при нажатии на признак будет разворачивать список, меняя свойство display с none на block.
Рис. 2.7. Предметный указатель
Копируем стили для систематического указателя. В нем нужно описать внешний вид всех 6 уровней соподчиненности. Для каждого задаем свой стиль.
.lvl1 ul li ul li ul {
padding-left: 20px;
list-style-type: none;
}
.lvl1 ul li ul {
padding-left: 20px;
font-size: 15px;
}
.lvl1 ul li {
font-size: 20px;
margin: 5px 60px;
list-style-position: outside;
}
.lvl1 ul a {
font-style: italic;
font-family: 'Cormorant Garamond', serif;
}
Статьи «Об энциклопедии» и «Как определить растение создаются похожим образом – это просто текст с иллюстрациями.
Рис. 2.7. Раздел «Об энциклопедии»
Рис. 2.8. Раздел «Как определить растение»
Для страницы новостей используем скрипт, который не только будет открывать полный текст статьи по щелчку, но и менять текст кнопки с «показать» на «скрыть».
var base = {
findClass: function(str, node) {
if(document.getElementsByClassName) return (node || document).getElementsByClassName(str);
else {
var node = node || document, list = node.getElementsByTagName('*'), length = list.length, Class = str.split(/\s+/), classes = Class.length, array = [], i, j, key;
for(i = 0; i < length; i++) {
key = true;
for(j = 0; j < classes; j++) if(list[i].className.search('\\b' + Class[j] + '\\b') == -1) key = false;
if(key) array.push(list[i]);
}
return array;
}
},
bind: function(node, type, listener) {
if(node.addEventListener) node.addEventListener(type, listener, false);
},
init: [],
ready: function() {
if(!arguments.callee.done) {
arguments.callee.done = true;
if(this.timer) clearInterval(this.timer);
var i, length = this.init.length;
for(i = 0; i < length; i++) this.init[i]();
this.init = [];
}
},
check: function() {
var _this = this, listener = function() {
_this.ready();
};
if(document.addEventListener) document.addEventListener('DOMContentLoaded', listener, false);
if(/KHTML|WebKit/i.test(navigator.userAgent)) this.timer = setInterval(function() {
if(/loaded|complete/.test(document.readyState)) base.ready();
}, 10);
this.bind(window, 'load', listener);
}
};
var toggler = {
process: function() {
var i, list = base.findClass('toggler'), length = list.length;
for(i = 0; i < length; i++) base.bind(list[i], 'click', this.toggle);
list = base.findClass('content');
length = list.length;
for(i = 0; i < length; i++) list[i].style.display = 'none';
},
toggle: function() {
var content = base.findClass('content', this.parentNode)[0], e = arguments[0] || window.event;
if(content.style.display == 'block') {
content.style.display = 'none';
this.innerHTML = 'Подробнее';
}
else {
content.style.display = 'block';
this.innerHTML = 'Скрыть';
}
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
};
Видео вставляем с помощью тега <video> или <iframe> для вставки с Youtube.
Рис. 2.9. Раздел «Новости»
Чтобы перемещение по странице было проще, добавляем стрелку «наверх» (она будет на всех длинных страницах).
Css:
#toTop {
z-index: 80;
padding: 10px;
position: fixed;
bottom: 20px;
/* отступ кнопки от нижнего края страницы*/
right: 20px;
cursor: pointer;
display: none;
color: #333;
}
JavaScript:
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
} });
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
}); });
Наконец, финальный штрих: добавим иконку, которая будет отображаться рядом с названием вкладки в браузере.
<link rel="icon" type="image/png" href="favicon.ico">