Инструменты для обработки контента

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

Коды элементов

Выравнивание текста

<p class="l">текст, выровненный по левому краю</p>
<p class="r">текст, выровненный по правому краю</p>
<p class="c">центрированный текст</p>
<p class="j">текст растянутый по формату</p>

Изображение слева от текста без увеличения

<img src="/image.jpg" alt="Изображение" itemprop="image" class="fl pic" />

Изображение справа от текста с увеличением по клику и Schema разметкой

<a href="/full_size_image.jpg" itemprop="image" itemscope itemtype="http://schema.org/ImageObject" class="ulightbox" rel="gallery_name">
<img src="/image.jpg" alt="Изображение" itemprop="url" class="fr" />
<meta itemprop="width" content="400" /><meta itemprop="height" content="600" />
</a>

Изображение с пояснением

<figure>
<img src="/image.jpg" alt="Изображение" />
<figcaption>Описание под изображением. &copy; Художник</figcaption>
</figure>

Изображение с пояснением и Schema разметкой

<figure itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<img src="/image.jpg" alt="Изображение" itemprop="url" />
<meta itemprop="width" content="400" /><meta itemprop="height" content="600" />
<figcaption>Описание под изображением. &copy; Художник</figcaption>
</figure>

Шаблоны страниц

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

Мобильная страница с меню

<html>
<head>
<meta charset="utf-8" />
<title>Заголовок страницы — Тёмное око</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="keywords" content="Das Schwarze Auge, The Dark Eye, Тёмное око" />
<meta name="description" content="Описание страницы до 225 символов." />
<meta name="robots" content="all" />
<link rel="canonical" href="https://aventuria.ru/section/page.html" />
<link type="text/css" rel="stylesheet" href="/_st/pda.css" />
</head>
<body>
<header><img src="/images/logo.gif" alt="Das Schwarze Auge" /></header>
<nav role="navigation"><h5 onclick="showhide('menu');">МЕНЮ</h5><script type="text/javascript" src="/images/menu.js"></script></nav>
<main role="main">
<!-- начало контента -->
...
<!-- конец контента -->
</main>
</body>
</html>

Галерея без лайтбокса

<html lang="ru">
<head>
<meta charset="utf-8">
<title>Название галереи — Тёмное око</title>
<link type="application/rss+xml" rel="alternate" title="RSS" href="/photo/rss/" />
<link rel="canonical" href="https://aventuria.ru/data/gallery.html" />
<meta name="keywords" content="Das Schwarze Auge, The Dark Eye, Тёмное око" />
<meta name="description" content="Описание галереи меньше 255 символов." />
<meta name="robots" content="all" />
<base href="https://aventuria.ru/" target="_blank" />
<link href="/_st/my.css" rel="stylesheet" type="text/css" />
</head>
<body class="photo">
<header><img src="/images/logo.gif" alt="Das Schwarze Auge Logo" /></header>
<main style="background:url('/.s/t/896/6.gif') repeat-y right;">
<p style="background:url('/.s/t/896/3.gif') repeat-x; height:8px; margin:0; border:0;"><img src="/.s/t/896/2.gif" alt="" class="fl"><img src="/.s/t/896/4.gif" alt="" class="fr"></p>
<div id="main" class="p0-20" style="border:0.01px solid transparent;" itemscope itemtype="http://schema.org/ImageGallery">
<p class="eBar"><a href="/">Главная</a> &raquo; <a href="/photo/">Галерея</a> &raquo; <a href="/photo/screenshots/1">Скриншоты</a> &raquo; Название галереи</p>
<!-- gallery -->
<div itemscope itemtype="http://schema.org/ImageGallery" class="gallery c" id="gallery">
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" target="_blank">
            <img src="small-image.jpg" itemprop="thumbnail" alt="описание" />
        </a>
    </figure>
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" target="_blank">
            <img src="small-image.jpg" itemprop="thumbnail" alt="описание" />
        </a>
    </figure>
    ...
</div>
<!-- /gallery -->
</div>
<p style="background:url('/.s/t/896/8.gif') repeat-x bottom; height:8px; margin:0; border:0;"><img src="/.s/t/896/7.gif" alt="" class="fl"><img src="/.s/t/896/9.gif" alt="" class="fr"></p>
</main>
</body>
</html>

Галерея с несколькими страницами с лайтбоксом

<html lang="ru">
<head>
<meta charset="utf-8">
<title>Название галереи — Тёмное око</title>
<link type="application/rss+xml" rel="alternate" title="RSS" href="/photo/rss/" />
<link rel="canonical" href="https://aventuria.ru/data/gallery.html" />
<meta name="keywords" content="Das Schwarze Auge, The Dark Eye, Тёмное око" />
<meta name="description" content="Описание галереи меньше 255 символов." />
<meta name="robots" content="all" />
<base href="https://aventuria.ru/" target="_blank" />
<link href="/_st/my.css" rel="stylesheet" type="text/css" />
<link href="/.s/src/ulightbox/ulightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/.s/src/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/.s/src/ulightbox/ulightbox.js"></script>
</head>
<body class="photo">
<header><img src="/images/logo.gif" alt="Das Schwarze Auge Logo" /></header>
<main style="background:url('/.s/t/896/6.gif') repeat-y right;">
<p style="background:url('/.s/t/896/3.gif') repeat-x; height:8px; margin:0; border:0;"><img src="/.s/t/896/2.gif" alt="" class="fl"><img src="/.s/t/896/4.gif" alt="" class="fr"></p>
<div id="main" class="p0-20" style="border:0.01px solid transparent;" itemscope itemtype="http://schema.org/ImageGallery">
<p class="eBar"><a href="/">Главная</a> &raquo; <a href="/photo/">Галерея</a> &raquo; <a href="/photo/screenshots/1">Скриншоты</a> &raquo; Название галереи</p>
<!-- gallery page 1 -->
<div itemscope itemtype="http://schema.org/ImageGallery" class="gallery c" id="gallery1">
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" class="ulightbox" rel="gallery1">
            <img src="small-image.jpg" itemprop="thumbnail" alt="описание" />
        </a>
        <meta itemprop="width" content="300">
        <meta itemprop="height" content="600">
        <figcaption itemprop="caption description">
            Длинное описание изображения
            <span itemprop="copyrightHolder">&copy; Художник</span>
        </figcaption>
    </figure>
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" class="ulightbox" rel="gallery1">
            <img src="small-image.jpg" itemprop="thumbnail" alt="описание" />
        </a>
        <figcaption itemprop="caption description">Длинное описание изображения</figcaption>
    </figure>
    ...
</div>
<!-- /gallery page 1 -->
<!-- gallery page 2 -->
<div itemscope itemtype="http://schema.org/ImageGallery" class="gallery c" id="gallery2" style="display:none;">
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" class="ulightbox" rel="gallery2">
            <img src="small-image.jpg" itemprop="thumbnail" alt="описание" />
        </a>
        <meta itemprop="width" content="300">
        <meta itemprop="height" content="600">
        <figcaption itemprop="caption description">
            Длинное описание изображения
            <span itemprop="copyrightHolder">&copy; Художник</span>
        </figcaption>
    </figure>
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" class="ulightbox" rel="gallery2">
            <img src="small-image.jpg" itemprop="thumbnail" alt="описание" />
        </a>
        <figcaption itemprop="caption description">Длинное описание изображения</figcaption>
    </figure>
    ...
</div>
<!-- /gallery page 2 -->
<!-- gallery page 3 -->
<div itemscope itemtype="http://schema.org/ImageGallery" class="gallery c" id="gallery3" style="display:none;">
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" class="ulightbox" rel="gallery3">
            <img src="small-image.jpg" itemprop="thumbnail" alt="описание" />
        </a>
        <meta itemprop="width" content="300">
        <meta itemprop="height" content="600">
        <figcaption itemprop="caption description">
            Длинное описание изображения
            <span itemprop="copyrightHolder">&copy; Художник</span>
        </figcaption>
    </figure>
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" class="ulightbox" rel="gallery3">
            <img src="small-image.jpg" itemprop="thumbnail" alt="описание" />
        </a>
        <figcaption itemprop="caption description">Длинное описание изображения</figcaption>
    </figure>
    ...
</div>
<!-- /gallery page 3 -->
<p class="catPages1 ptr">
	<u class="swchItem s1 active" onclick="page(1);">1</u>
	<u class="swchItem s2" onclick="page(2);">2</u>
	<u class="swchItem s3" onclick="page(3);">3</u>
</p>
</div>
<p style="background:url('/.s/t/896/8.gif') repeat-x bottom; height:8px; margin:0; border:0;"><img src="/.s/t/896/7.gif" alt="" class="fl"><img src="/.s/t/896/9.gif" alt="" class="fr"></p>
</main>
<script>
function page(x){
$('.swchItem').removeClass('active');
$('.swchItem.s' + x).addClass('active');
$('.gallery').hide('slow');
$('#gallery' + x).show('slow');
}
</script>
</body>
</html>

Где хранить файлы?

Заброшенный сайт №1, Заброшенный сайт №2

Максимальный размер файла: 15 МБ

Допустимые форматы: все, кроме PHP

Доступ: логин - DSA пароль - DasSchwarzeAuge

Особенности: нельзя удалять, можно только добавлять.

ЯПлакал

Максимальный размер файла: 50 МБ

Допустимые форматы: JPG, PNG, GIF, TIFF, PSD, MP3, WMA, SWF, FLV, WMV, 3GP, MP4, ASF, MOV, AVI, MPG

Особенности: сервис генерирует audio/video/flash плееры, коды которых удобно вставлять на сайты. Файлы не удаляются и не модерируются, если публикуются скрыто.

uNet

Максимальный размер файла: неограничен

Ограничение хранилища: 10 ГБ

Допустимые форматы: стандартные текстовые и медиа-форматы

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

Google Drive

Максимальный размер файла: неограничен

Ограничение хранилища: 15 ГБ (увеличение за плату)

Допустимые форматы: любые

Особенности: файлы не скачиваются по прямым ссылкам, а сперва просматриваются в превью режиме.

Облако Mail.ru

Максимальный размер файла: 2 ГБ

Ограничение хранилища: 25 ГБ (увеличение за плату)

Допустимые форматы: любые

Особенности: файлы не скачиваются по прямым ссылкам, а сперва просматриваются в превью режиме.

Изображения

Список хостингов изображений

Яндекс.Фотки, YapFiles, PostImage, ITmages

В список вошли только те хостинги, где изображения хранятся бессрочно.

Аудио

Список аудиохостигов

Заброшенный сайт №1 и Заброшенный сайт №2 (подходят для вставки в плеер), YapFiles (cвой плеер).

Простой flash плеер для одного файла

<embed src="/player/mediaplayer.swf" type="application/x-shockwave-flash" flashvars="file=http://website.com/file.mp3" width="100" height="30" />

Двухкнопочный flash-плеер для одного файла

<script src="/media/?auto=1;small=1;color=475b33;loop=1;textoff=1;t=audio;f=http://website.com/file.mp3" type="text/javascript"></script>

Простой плеер с прогресс-баром

<script src="/media/?auto=1;small=0;color=475b33;loop=0;textoff=0;t=audio;f=http://website.com/file.mp3" type="text/javascript"></script>

Плеер uppod для одного файла

<object type="application/x-shockwave-flash" data="/player/uppod.swf" width="600" height="450"><param name="bgcolor" value="#111409" /><param name="allowScriptAccess" value="always" /><param name="movie" value="/player/uppod.swf" /><param name="flashvars" value="st=/player/uppod.txt&file=http://website.com/file.mp3" /></object>

Плеер uppod для плейлиста

<object type="application/x-shockwave-flash" data="/player/uppod.swf" width="300" height="276"><param name="bgcolor" value="#111409" /><param name="allowScriptAccess" value="always" /><param name="movie" value="/player/uppod.swf" /><param name="flashvars" value="st=/player/uppod.txt&pl=http://website.com/file.mp3" /></object>