Пробы функционала-TimelineJS3
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

View only
 
ABCDEFGHIJKLMNOPQRS
1
YearMonthDayTimeEnd YearEnd MonthEnd DayEnd TimeDisplay DateHeadlineTextMediaMedia CreditMedia CaptionMedia ThumbnailTypeGroupBackground
2
0Демонстрация возможностей сервиса TimeLineJStitlehttps://cdn.pixabay.com/photo/2017/03/20/19/45/time-2160154_960_720.jpg
3
2001Слайд без медиаРаботая над содержанием курсов, посвящённых интерактивному и мультимедийному контенту, мне пришлось на практике опробовать сотни различных онлайн-инструментов. И если некоторые из них представляли собой только демонстрацию эффекта визуализации или интерактивности, то другие, отобранные для курсов, могли бы стать действительно полезными в умелых руках. В конце концов, и среди этих полезных инструментов я выделил небольшое количество «жемчужин» — сервисов, хоть и более сложных в изучении, но позволяющих создавать профессиональный интерактивный контент уровня ведущих СМИ или корпоративных порталов. Их подробному изучению и будет посвящён настоящий курс.
4
2003Обычное изображениеВ качестве источника медиа размещаем URL на файл с расширением jpg, jpeg, gif или pnghttp://img.lenagold.ru/ch/chas/pes/peschas006.png
5
2005Первый год третьего тысячелетияОтображение временного периода над заголовкомВ качестве "неформального" времени можно использовать любую текстовую строку. Здесь: "Первый год третьего тысячелетия"http://img.lenagold.ru/ch/chas/pes/peschas006.png
6
20072008Диапазон времениИспользуем не точную дату, а диапазон: 2007-2008 гг

В качестве источника медиа размещаем URL на файл с расширением jpg, jpeg, gif или png
http://img.lenagold.ru/ch/chas/pes/peschas006.png
7
2009Цвет фонаВ качестве цвета фона события используем серый (#333333).

В качестве источника медиа размещаем URL на файл с расширением jpg, jpeg, gif или png
http://img.lenagold.ru/ch/chas/pes/peschas006.png#333333
8
2011Фоновое изображениеВ качестве фона события используем фоновое изображение, указав его URL.

В качестве источника медиа размещаем URL на файл с расширением jpg, jpeg, gif или png
http://img.lenagold.ru/ch/chas/pes/peschas006.pnghttp://goodoboi.ru/images/foto/original/20130714130949770.jpg
9
2015
Статья из ВикипедииПример использования в качестве события статьи из Википедии. В качестве источника медиа используется простая ссылка на статью.https://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D0%BB%D0%B0%D0%BA%D0%BE_%D1%82%D0%B5%D0%B3%D0%BE%D0%B2
10
2017ТвитПример использования Твита в качестве события. В качестве источника медиа используется простая ссылка на Твит.https://twitter.com/pkallinikov/status/640890250588495873
11
2019Иконка в таймлайнеВ качестве иконки используем URL на собственное изображение.
В качестве источника медиа размещаем URL на файл с расширением jpg, jpeg, gif или png
http://img.lenagold.ru/ch/chas/pes/peschas006.pnghttp://contentium.ru/PREUK-2019/timeline-icon.gif
12
2021Изображение с Google+В качестве источника медиа можно использовать ссылку на изображение из социальной сети Google+https://lh5.googleusercontent.com/-z18lS4I4TNM/VRsN1pxL6FI/AAAAAAAAUjM/Zmpa8WpdUZk/w719-h695-no/769177_a-u-vas-vsya-spina-belaya.jpg
13
2023Изображение с Google+В качестве источника медиа можно использовать ссылку на изображение из социальной сети Google+https://lh3.googleusercontent.com/proxy/C8QRXjstaLw1RQcrXJH_DO6MXy_NE1qV8n6YxWUsiSVT8vrO6moGqaJl8pqYy3yi6DCxUSi5eVMDWxB6BaVBJ2UH9J58sMAK8kO7gWFyqUhuVE2-teIvf6JsAjIPzrrXXKI8pcO6BlO8j4284Eo=w506-h336
14
2025Название и источник изображенияК картинке, используемой в качестве источника медиа для события можно приписать название и источник. Они располагаются под картинкой.http://img.lenagold.ru/ch/chas/pes/peschas006.pngИз личного архива Иванова И.И.Аллегорическое изображение оси времени
15
2027Видео с облачных видеосервисов (YouTube)В качестве источника медиа для события можно использовать ссылку на видеоролик соблачных сервисов Vimeo, DailyMotion, Vine, или YouTube. https://youtu.be/lZH8wzCP7LU
16
2029Видео с облачных видеосервисов (Vimeo)В качестве источника медиа для события можно использовать ссылку на видеоролик соблачных сервисов Vimeo, DailyMotion, Vine, или YouTube. https://vimeo.com/10089801
17
2031Картинка с сервиса FlickrВ качестве источника медиа можно использовать ссылку на изображение в Flickrhttp://www.flickr.com/photos/zachwise/6687123779/in/photostream
18
2033Страничка с сервиса InstagramВ качестве источника медиа можно использовать ссылку на страницу в Instagramhttps://www.instagram.com/p/BFTEHklTPkI/
19
2035Изображение с сервиса ImgurВ качестве источника медиа можно использовать ссылку на изображение в Imgurhttp://i.imgur.com/KV509Sw.png
20
2037Изображение с сервиса ImgurВ качестве источника медиа можно использовать ссылку на изображение в Imgur. Анимированный gif тоже работает.http://i.imgur.com/TEUSy21.gif
21
2039Звук с облачного сервиса SoundCloudВ качестве источника медиа можно использовать ссылку на звуковой файл в сервисе SoundCloudhttps://soundcloud.com/glaskina/sets/jlghkqtxq8gl
22
2041Карта с GoogleMapsВ качестве источника медиа можно использовать ссылку на карту из GoogleMapshttps://www.google.com/maps/place/%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0,+%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8F/@55.749792,37.6324949,10z/data=!3m1!4b1!4m2!3m1!1s0x46b54afc73d4b0c9:0x3d44d6cc5757cf4c
23
2043"История" из сервиса StorifyВ качестве источника медиа можно использовать ссылку на "Историю" из сервиса StoriFyhttps://storify.com/kallinikov/story
24
2045Использование тэга iframe В качестве источника медиа можно использовать вставку с любого сайта при помощи тэга iframe<iframe width="600" height="441" src="//www.thinglink.com/card/635237297624711170" type="text/html" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no"></iframe>
25
2047Использование тега blockquotВ качестве источника медиа используем HTML-код, заключенный в теги blockquot.../blockquote.

В примере - изображение с ссылкой на поясняющий текст и всплывающей подсказкой.
<blockquote><div align="center"><a href="https://goo.gl/W3yTf2" target="_blank" title="Перейти к описанию"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Daylightsavings.svg/800px-Daylightsavings.svg.png" height="500"></a></div></blockquote>
26
2049Использование сервиса Embed.ly В качестве источника медиа можно использовать код на любой сайт, созданный в сервисе Embed.ly<blockquote class="embedly-card" data-card-key="9b90bc8a85e04687949558df55f77222" data-card-type="article-full"><h4><a href="https://lenta.ru/">Лента.Ру</a></h4><p>Новости, статьи, фотографии, видео. Семь дней в неделю, 24 часа в сутки.</p></blockquote>
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
27
2051Использование сервиса StoryMapВ качестве источника медиа можно использовать проект сервиса StoryMapJS, используя в качестве кода код для вставки этого сервиса. Используются тэги iframe.<iframe src="https://s3.amazonaws.com/uploads.knightlab.com/storymapjs/49a802780d7083c2dff3c830f23ffcbf/iavlenie-khrista-narodu/index.html" frameborder="0" width="100%" height="600px"></iframe>
28
29
30
31
32
Loading...