Содержание
Жанры
- Альтернативная история, попаданцы (937)
- Без рубрики (20)
- Биографии и мемуары (90)
- Боевая фантастика (851)
- Боевик (66)
- Боевое фэнтези (110)
- Воспитание детей (14)
- Героическая фантастика (129)
- Героическое фэнтези (90)
- Городское фэнтези (115)
- Деловая литература (13)
- Детективная фантастика (57)
- Детективное фэнтези (25)
- Детективы (132)
- Детская литература (10)
- Детская проза (10)
- Документальная литература (21)
- Драматургия (31)
- Зарубежная деловая литература (53)
- Зарубежная классика (38)
- Зарубежная классическая проза (18)
- Зарубежная образовательная литература (12)
- Зарубежная прикладная литература (26)
- Зарубежная психология (54)
- Зарубежная публицистика (14)
- Зарубежная фантастика (56)
- Зарубежные детективы (118)
- Зарубежные любовные романы (71)
- Здоровое и правильное питание (14)
- Здоровье (35)
- Иронические детективы (57)
- Иронический детектив, дамский детективный роман (105)
- Историческая литература (25)
- Историческая проза (50)
- Историческая фантастика (46)
- Исторические детективы (27)
- Исторические любовные романы (44)
- Исторические приключения (32)
- Исторический детектив (64)
- История (55)
- Карьера, кадры (14)
- Киберпанк (34)
- Классическая проза (102)
- Классический детектив (32)
- Книги про волшебников (36)
- Контркультура (19)
- Короткие любовные романы (17)
- Космическая фантастика (147)
- Криминальный детектив (14)
- Крутой детектив (17)
- Легкая проза (23)
- Литература 20 века (17)
- ЛитРПГ (110)
- Личная эффективность (29)
- Любовное фэнтези (171)
- Любовное фэнтези, любовно-фантастические романы (295)
- Мистика (11)
- Морские приключения (10)
- Научная фантастика (165)
- Научно-популярная литература (21)
- Остросюжетные любовные романы (67)
- Полицейские детективы (13)
- Полицейский детектив (62)
- Попаданцы (93)
- Постапокалипсис (25)
- Поэзия (10)
- Приключения (13)
- Приключения для детей и подростков (11)
- Проза о войне (22)
- Психология и психотерапия (53)
- Публицистика (23)
- Русская классическая проза (66)
- Самиздат, сетевая литература (81)
- Саморазвитие / личностный рост (15)
- Самосовершенствование (17)
- Семейные отношения, секс (16)
- Сказки народов мира (19)
- Советская классическая проза (26)
- Современная зарубежная литература (127)
- Современная русская и зарубежная проза (308)
- Современная русская литература (85)
- Современные детективы (82)
- Современные любовные романы (165)
- Социальная фантастика (46)
- Социально-психологическая фантастика (35)
- Триллер (77)
- Триллеры (93)
- Ужасы (58)
- Фантастика (17)
- Фантастика для детей (23)
- Фэнтези (667)
- Шпионский детектив (13)
- Эзотерика, эзотерическая литература (12)
- Эротическая литература (37)
- Юмористическая проза (25)
- Юмористическая фантастика (97)
ZoomTimeline : CSS Timeline Pack
July 19, 2016 | CSS2 / CSS3.0, HTML5, Premium
Looking for a company timeline ? A shipping log ? Shipping history ? Personal History ? A cool timeline slider ? This plugin has it all. No matter the needs for a timeline, the six modes included cover all the timeline needs.Awesome for – company timeline, time line, history, company history, shipping history, parcel track display, timeline slider.
- HTML5 technology – zoomtimeline uses the latest html5 tehniques ( like Histroy API ) to deliver a never seen before experience to your clients
- fully responsive – looks great from mobile to HD
- five modes – full skins to fit every brand
- CSS3 technology – this player uses cutting-edge css3
- SCSS Powered – easy for developers to modify
- Retina-ready – graphics have double resolution for smooth retina viewing
- easy install – purchase, download the zip, read the docs
- iPhone / iPad optimized – this gallery has been optimized for Apple touch devices
Как пользоваться?
После перехода на сайт необходимо нажать на кнопку Make a Timeline , далее – Get Spreadsheet Template и скачать электронную таблицу с примером. Названия существующих столбцов удалять или переименовывать нельзя, вам нужно только подставить свои данные.
Кратко опишем существующие столбцы в таблице. Начнем с одного из последних столбцов Type (тип) . Если мы выберем значение Title (заголовок), то нам не нужно строго прописывать время начала и окончания события. Тогда как Era (эра) строго требует заполнения первых восьми столбцов. Другими словами, от Типа (Type) будет зависеть вид и назначение таймлайна. Значение «Title» или «Era» выбирается один раз для всего проекта.
Последний столбец – Background – фоновый цвет в шестизначным формате . Нам не обязательно знать это формат для каждого цвета или оттенка. Достаточно набрать в браузере поисковый запрос «Таблица цветов» и открыть первый же источник с обозначением кода любого цвета.
После окончания работы над таймлайном необходимо выбрать команду «Файл» – «Опубликовать в интернете» в таблице Google. Скопируем появившуюся ссылку и вернемся на сайт Timeline JS . Выберем пункт 3 – «Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you’ve published the spreadsheet.)» – т.е. вставим ссылку на таймлайн в данную область.
File Formats
JSON is the native data format for TimelineJS.
Remember, JSON is picky. A misplaced comma or quotation mark can prevent the timeline from loading properly.
Here is the full model:
Timeline can use a variation of JSONP to allow you to easily load data across different domains.
To allow this to happen, the file must end with the extension
Here is the full model:
If you don’t want to mess with JSON, fire up Google Docs and build your timeline in a spreadsheet. It’s as simple as dropping a date, text, and links into the appropriate columns in TimelineJS’s template.
There are only a couple things you need to know in order to create a timeline using Google Docs:
- Make the spreadsheet public: Google Docs are automatically set to private but the spreadsheet must be public.
- Publish to the Web Under the File menu, select “Publish to the Web.”
Support for Storify is still in its early stages. It works though. Just paste a link to the storify story as the source.
How To Create a Timeline
Step 1) Add HTML:
<div class=»timeline»> <div class=»container left»> <div class=»content»> <h2>2017</h2> <p>Lorem ipsum..</p> </div> </div> <div class=»container right»> <div class=»content»> <h2>2016</h2> <p>Lorem ipsum..</p> </div> </div></div>
Step 2) Add CSS:
* { box-sizing: border-box;}/* Set a background color */ body { background-color: #474e5d; font-family: Helvetica, sans-serif;}/* The actual timeline (the vertical ruler) */.timeline { position: relative; max-width: 1200px; margin: 0 auto;}/* The actual timeline (the vertical ruler) */.timeline::after { content: »; position: absolute; width: 6px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px; }/* Container around content */ .container { padding: 10px 40px; position: relative; background-color: inherit; width: 50%;}/* The circles on the timeline */.container::after { content: »; position: absolute; width: 25px; height: 25px; right: -17px; background-color: white; border: 4px solid #FF9F55; top: 15px; border-radius: 50%; z-index: 1;}/* Place the container to the left */.left { left: 0; }/* Place the container to the right */.right { left: 50%; }/* Add arrows to the left container (pointing right) */.left::before { content: » «; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white;}/* Add arrows to the right container (pointing left) */ .right::before { content: » «; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}/* Fix the circle for containers on the right side */.right::after { left: -16px;}/* The actual content */.content { padding: 20px 30px; background-color: white; position: relative; border-radius: 6px;}/* Media queries — Responsive timeline on screens less than 600px wide */@media screen and (max-width: 600px) {/* Place the timelime to the left */ .timeline::after { left: 31px; }/* Full-width containers */ .container { width: 100%; padding-left: 70px; padding-right: 25px; }/* Make sure that all arrows are pointing leftwards */ .container::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; }/* Make sure all circles are at the same spot */ .left::after, .right::after { left: 15px; }/* Make all right containers behave like the left ones */ .right { left: 0%; } }
OfficeTimeline
OfficeTimeline was designed to create timelines for business communications. It offers two options: an online tool and an offline PowerPoint add-in. The web tool is more advanced: it has more templates and export options, and the interface is much more user friendly.
Pros
- You can download timelines as PPT, XLS or PDF, or send them via email.
- Free version without watermarks or ads.
- Has offline and online tools — pick whichever suits your workstyle.
- Online tool has 39 templates to choose from.
- Both tools allow you to add corporate branding.
Cons
- Free offline version only has 3 templates, you have to upgrade to use the full library.
- Can’t share timelines with a URL, only email sharing is available.
- Timeline templates are good for executive summaries, but not for complex projects.
- Online and offline tools have to be purchased separately.
Visme
Visme is an online multipurpose tool for creating timelines, presentations, and graphics. Timelines made with Visme come out clean and unique, and you can make really good ones even with the free version. If you want more templates and storage and privacy control options, there are 9 plans, including special offers for business owners and education centers.
Pros
- You can create timelines in HTML5 and share them with a URL.
- You can embed timelines on your website.
- Free version without watermarks or ads.
- A vast library of templates, styles, shapes, and graphs.
- Each template offers a unique design that makes your template look fresh and professional.
Cons
- Free version is limited to 5 projects.
- Rather costly compared to other solutions. The cheapest plan is 14$ a month in a yearly plan.
Methods
The Timeline supports the following methods.
Method | Return Type | Description |
---|---|---|
clear() | none |
Clear the Timeline. An object can be passed specifying which sections to clear: items, groups, and/or options. By Default, items, groups and options are cleared, i.e. . Example usage: timeline.clear(); // clear items, groups, and options timeline.clear({options: true}); // clear options only |
destroy() | none | Destroy the Timeline. The timeline is removed from memory. all DOM elements and event listeners are cleaned up. |
fit() | none | Adjust the visible window such that it fits all items. See also function . Available options: |
focus(id | ids ) | none | Adjust the visible window such that the selected item (or multiple items) are centered on screen. See also function . Available options: |
getCurrentTime() | Date | Get the current time. Only applicable when option is true. |
getCustomTime() | Date | Retrieve the custom time. Only applicable when the option is true. |
getSelection() | Number[] | Get an array with the ids of the currently selected items. |
getVisibleItems() | Number[] | Get an array with the ids of the currently visible items. |
getWindow() | Object | Get the current visible window. Returns an object with properties and . |
moveTo(time ) | none | Move the window such that given time is centered on screen. Parameter can be a , , or . Available options: |
on(event, callback) | none | Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: , , . The callback function is invoked as , where is an object containing event specific properties. See section . |
off(event, callback) | none | Remove an event listener created before via function . See section . |
redraw() | none | Force a redraw of the Timeline. Can be useful to manually redraw when option autoResize=false. |
setCurrentTime(time) | none | Set a current time. This can be used for example to ensure that a client’s time is synchronized with a shared server time. can be a Date object, numeric timestamp, or ISO date string. Only applicable when option is true. |
setCustomTime(time) | none | Adjust the custom time bar. Only applicable when the option is true. can be a Date object, numeric timestamp, or ISO date string. |
setGroups(groups) | none | Set a data set with groups for the Timeline. can be an Array with Objects, a DataSet, or a DataView. For each of the groups, the items of the timeline are filtered on the property , which must correspond with the id of the group. |
setItems(items) | none | Set a data set with items for the Timeline. can be an Array with Objects, a DataSet, or a DataView. |
setOptions(options) | none | Set or update options. It is possible to change any option of the timeline at any time. You can for example switch orientation on the fly. |
setSelection(id | ids ) | none | Select one or multiple items by their id. The currently selected items will be unselected. To unselect all selected items, call `setSelection([])`. Available options:
|
setWindow(start, end ) | none | Set the current visible window. The parameters and can be a , , or . If the parameter value of or is null, the parameter will be left unchanged. Available options: |
Templates
Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an items data as argument, and outputs formatted HTML:
var options = { template: function (item) { var html = ... // generate HTML markup for this item return html; } };
Using a template engine
handlebars
<script id="item-template" type="text/x-handlebars-template"> <h1>{{header}}</h1> <p>{{description}}</p> </script>
var source = document.getElementById('item-template').innerHTML; var template = Handlebars.compile(source);
var options = { template: template };
Multiple templates
var templates = { template1: Handlebars.compile(...), template2: Handlebars.compile(...), template2: Handlebars.compile(...), ... }; var options = { template: function (item) { var template = templates; // choose the right template return template(item); // execute the template } };
Планируйте проекты с помощью шаблонов таймлайнов спринтов
Использование шаблона с визуализацией — это эффективный способ планирования бизнес-целей. Он позволяет четко обозначить все цели, кратко сформулировать этапы их достижения и использовать визуальные элементы для выделения определенных моментов.
Можно также взять за основу для таймлайна этапы проекта и указать количество дней, отведенных на их выполнение. Посмотрите, как это сделано в следующем шаблоне таймлайна строительства дома:
Вы можете пойти дальше и составить план-график на весь предстоящий год. Спланируйте важнейшие этапы по месяцам:
В этом шаблоне таймлайна используется тот же подход, только месяцы и текст обозначены разными цветами:
Предлагаем также прочесть статью с более чем 15 шаблонами таймлайнов проектов, посвященную планированию бизнес-целей. А еще вы можете просмотреть наши шаблоны диаграмм Гантта, чтобы получить дополнительные идеи по визуализации проектов.
TimeRime
В TimeRime можно не просто работать преподавателям и ученикам, но даже создать закрытую школьную сеть (пакет Edu School обойдется школе в 150 евро в год). Мало того, TimeRime прекрасно взаимодействует с интерактивными досками SMART Board. Сервисом уже пользуется университет Портсмута (Великобритания), Лёвенский католический университет (Бельгия) и один из крупнейших голландских колледжей ROC Midden.
Бесплатный аккаунт TimeRime разрешает создавать неограниченное число таймлайнов по 100 событий. Правда, результат выглядит несколько старомодно и не разворачивается во весь экран, да и скорость работы оставляет желать лучшего.
Data Format
The timeline can be provided with two types of data:
- containing a set of items to be displayed in time.
- containing a set of groups used to group items together.
Items
The Timeline uses regular Arrays and Objects as data format. Data items can contain the properties , (optional), , (optional), and (optional).
A table is constructed as:
var items = [ { start: new Date(2010, 7, 15), end: new Date(2010, 8, 2), // end is optional content: 'Trajectory A' // Optional: fields 'id', 'type', 'group', 'className' } // more items... ]);
The item properties are defined as:
Name | Type | Required | Description |
---|---|---|---|
className | String | no | This field is optional. A className can be used to give items
an individual css style. For example, when an item has className
‘red’, one can define a css style like:
.vis.timeline .red { color: white; background-color: red; border-color: darkred; }More details on how to style items can be found in the section . |
content | String | yes | The contents of the item. This can be plain text or html code. |
end | Date | no | The end date of the item. The end date is optional, and can be left . If end date is provided, the item is displayed as a range. If not, the item is displayed as a box. |
group | any type | no | This field is optional. When the group column is provided, all items with the same group are placed on one line. A vertical axis is displayed showing the groups. Grouping items can be useful for example when showing availability of multiple people, rooms, or other resources next to each other. |
id | String | Number | no | An id for the item. Using an id is not required but highly recommended. An id is needed when dynamically adding, updating, and removing items in a DataSet. |
start | Date | yes | The start date of the item, for example . |
title | String | none | Add a title for the item, displayed when holding the mouse on the item. The title can only contain plain text. |
type | String | ‘box’ | The type of the item. Can be ‘box’ (default), ‘point’, ‘range’, or ‘background’. Types ‘box’ and ‘point’ need a start date, the types ‘range’ and ‘background’ needs both a start and end date. |
Groups
Like the items, groups are regular JavaScript Arrays and Objects. Using groups, items can be grouped together. Items are filtered per group, and displayed as
Group items can contain the properties , , and (optional).
Groups can be applied to a timeline using the method . A table with groups can be created like:
var groups = [ { id: 1, content: 'Group 1' // Optional: a field 'className' } // more groups... ]);
Groups can have the following properties:
Name | Type | Required | Description |
---|---|---|---|
className | String | no | This field is optional. A className can be used to give groups an individual css style. For example, when a group has className ‘red’, one can define a css style . More details on how to style groups can be found in the section . |
content | String | yes | The contents of the group. This can be plain text or html code. |
id | String | Number | yes | An id for the group. The group will display all items having a property which matches the of the group. |
title | String | none | A title for the group, displayed when holding the mouse the groups label. The title can only contain plain text. |
Add it to your site
<divid="timeline-embed"><div><scripttype="text/javascript">var timeline_config ={ width'100%', height'600', source'path_to_json/or_link_to_googlespreadsheet', embed_id'timeline-embed', start_at_endfalse, start_at_slide'4', start_zoom_adjust'3', hash_bookmarktrue, font'Bevan-PotanoSans', debugtrue, lang'fr', maptype'watercolor', css'path_to_css/timeline.css', js'path_to_js/timeline-min.js'}</script><scripttype="text/javascript"src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
You could also initialize a new timeline using the method after has been loaded
createStoryJS({ type'timeline', width'800', height'600', source'path_to_json/or_link_to_googlespreadsheet', embed_id'my-timeline'});
Here’s a simple example:
<head><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><scripttype="text/javascript"src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script><script>$(document).ready(function(){createStoryJS({ type'timeline', width'800', height'600', source'path_to_json/or_link_to_googlespreadsheet', embed_id'my-timeline'});});</script></head><body><divid="my-timeline"><div></body>
If you like, you may load TimelineJS from the KnightLab’s CDN. The examples above demonstrate how to do this using , which is the simplest way to set up a Timeline of your own.
If for some reason you need more fine-grained control over your timeline, load the javascript and CSS files separately. We recommend that you load them from our CDN.
<linkrel="stylesheet"type="text/css"href="http://cdn.knightlab.com/libs/timeline/latest/css/timeline.css"><scripttype="text/javascript"src="http://cdn.knightlab.com/libs/timeline/latest/js/timeline.js"><script><scripttype="text/javascript"src="http://cdn.knightlab.com/libs/timeline/latest/js/timeline-min.js"><script>
If you need to use the files on an HTTPS server, you can change the beginning of the url from to
Example
The following code shows how to create a Timeline and provide it with data. More examples can be found in the examples directory.
<!DOCTYPE HTML> <html> <head> <title>Timeline | Basic demo</title> <style type="text/css"> body, html { font-family: sans-serif; } </style> <script src="../../dist/vis.js"></script> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="visualization"></div> <script type="text/javascript"> // DOM element where the Timeline will be attached var container = document.getElementById('visualization'); // Create a DataSet (allows two way data-binding) var items = new vis.DataSet(); // Configuration for the Timeline var options = {}; // Create a Timeline var timeline = new vis.Timeline(container, items, options); </script> </body> </html>
Timeline
2017
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
<div class=»timeline»> <div class=»container left»> <div class=»content»> <h2>2017</h2> <p>Lorem ipsum..</p> </div> </div> <div class=»container right»> <div class=»content»> <h2>2016</h2> <p>Lorem ipsum..</p> </div> </div></div>
Step 2) Add CSS:
* { box-sizing: border-box;}/* Set a background color */ body { background-color: #474e5d; font-family: Helvetica, sans-serif;}/* The actual timeline (the vertical ruler) */.timeline { position: relative; max-width: 1200px; margin: 0 auto;}/* The actual timeline (the vertical ruler) */.timeline::after { content: »; position: absolute; width: 6px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px; }/* Container around content */ .container { padding: 10px 40px; position: relative; background-color: inherit; width: 50%;}/* The circles on the timeline */.container::after { content: »; position: absolute; width: 25px; height: 25px; right: -17px; background-color: white; border: 4px solid #FF9F55; top: 15px; border-radius: 50%; z-index: 1;}/* Place the container to the left */.left { left: 0; }/* Place the container to the right */.right { left: 50%; }/* Add arrows to the left container (pointing right) */.left::before { content: » «; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white;}/* Add arrows to the right container (pointing left) */ .right::before { content: » «; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}/* Fix the circle for containers on the right side */.right::after { left: -16px;}/* The actual content */.content { padding: 20px 30px; background-color: white; position: relative; border-radius: 6px;}/* Media queries — Responsive timeline on screens less than 600px wide */@media screen and (max-width: 600px) {/* Place the timelime to the left */ .timeline::after { left: 31px; }/* Full-width containers */ .container { width: 100%; padding-left: 70px; padding-right: 25px; }/* Make sure that all arrows are pointing leftwards */ .container::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; }/* Make sure all circles are at the same spot */ .left::after, .right::after { left: 15px; }/* Make all right containers behave like the left ones */ .right { left: 0%; } }
С этим читают