Статия, в която ще разгледаме процеса на създаване на responsive timeline с помощта на Bootstrap 4 grid класове.

Какво е времева линия?

Хронологияе интерфейсен елемент, предназначен да показва списък с определени събития в хронологичен ред на уебсайт.

Например, с негова помощ можете да организирате представяне на историята на публикациите или потребителските действия на уебсайт (в личния си акаунт).

Какво е времева линия?Времевата линия е "времева линия", на която чрез контролни точкисе празнуват определени събития. Всяко събитие на този ред е обяснено с някакво съдържание.

Времевите линии могат да бъдат хоризонтални или вертикални.

Създаване на вертикална времева линия

Процесът на проектиране на вертикалната времева линия се състои от създаване на HTML и CSS структура.

HTML структура на вертикална времева линия:

...

...

Малко за структурата на HTML кода на времевата линия. Елемент с времева линия на клас е контейнер. Добавянето на точки на прекъсване се извършва чрез поставяне на елементи с класа за обвивка на времевата линия в този контейнер.

От своя страна, елемент с класа timeline-wrapper също е контейнер, но за елементи на timeline (timeline-item).

Елементът timeline (timeline-item) има проста структура и се състои от 5 span елемента. Всеки от тях се използва от елементи за маркиране на едно или част от съдържанието на контролна точка.

Следващата стъпка е Създаване на CSSкод за горния HTML (ефектът от всяко правило е обяснен с помощта на коментар).

/* CSS */ /* Добавяне на подложка към елемент с класа на времевата скала */ .timeline ( padding-top: 1rem; padding-bottom: 1rem; position: relative; ) /* Създаване вертикална линия използване на псевдо-елементи */ .timeline::before ( съдържание: ""; позиция: абсолютна; ширина: .125rem; височина: 100%; цвят на фона: #dee2e6; ляво: 2rem; горе: 0; ) /* добавяне долна подложка и ляво поле за елементи с класа timeline-wrapper */ .timeline-wrapper ( margin-bottom: 1rem; padding-left: 4rem; ) /* премахване на долната подложка от последния element.timeline-wrapper */ .timeline-wrapper: last-child ( margin-bottom: 0; ) /* стилове за елементите на timeline */ .timeline-item ( position: relative; background-color: #118c4e; color: #fff; padding: .825rem; border-radius: .25rem;) /* добавяне на контролни точки към вертикалната линия */ .timeline-item::before (content: absolute; width: .75rem; background-color: #118c4e; border-radius : .4rem; отгоре: 50%; позиция: абсолютна; височина: 0; 5rem;

Когато ширината на прозореца за изглед е по-малка от 576 пиксела, времевата линия превключва към мобилен изглед. В този режим съдържанието на събитието винаги се поставя отдясно на времевата линия.

експерт:в района информационни технологиии образователно видео

Какво е времева линия?

Timeline е инструмент за създаване на учебни материали в хронологичен ред.

Хронологията може да се превърне в увлекателна история, която ще разнообрази урока ви. А използването на такива услуги като работа по проекти допринася за развитието на познавателния интерес на учениците, критичното мислене, способността за анализ, класифициране на учебен материал и др.

Времевата линия в образованието може да бъде полезна в следните случаи:

1. Учебният материал е историята на определено явление, факт, събитие.
2. Необходимо е да се демонстрира технологията на процеса.
3. Необходимо е да се онагледи връзката между определени елементи от учебния материал.
4. Визуализирайте представянето на учебен материал.
5. Организиране на работа по проекти за учениците.

Услуги за създаване на времева линия

Сроковете могат да бъдат вградени в дизайнерите на електронни учебници (например iSpring Kinetics (Visuals) „Timeline“) или могат да бъдат независими онлайн услуги (сайтове). Нека да разгледаме редица подобни безплатни сайтове за създаване на времева линия.

Хронология JS

Хронология JS– универсална услуга, подходяща за решаване на различни образователни задачи.

Пример за времева линия в Timeline JS

Особености:

1. Въз основа на работа с документи на Google Drive; с други думи, трябва да имате Google акаунтза създаване на времева линия.
2. Финалната хроника е с големи размери и съвременен дизайн.
3. Сервизни опори голям броймедийни формати.
4. Може да се използва за сътрудничество.
5. Напълно безплатно.

недостатъци:

2. Няма визуален редактор.

Как се използва?

След като посетите сайта, трябва да кликнете върху бутона Направете времева линия, по-нататък – Вземете шаблон за електронна таблицаи изтеглете електронна таблица с пример. Имената на съществуващите колони не могат да бъдат изтрити или преименувани, трябва само да замените вашите данни.

Фигура 1.

Нека опишем накратко съществуващите колони в таблицата. Да започнем с една от последните колони Тип. Ако изберем стойността Title, тогава не е необходимо да указваме стриктно началния и крайния час на събитието. Докато Era (ера) стриктно изисква попълване на първите осем колони. С други думи, типът и целта на времевата линия ще зависят от типа. Значение на „Заглавие“ или „Ера“ избран веднъжза целия проект.

Фигура 2.
Фигура 3.

Последна колона - Фон – фонов цвят V шестцифрен формат. Не е необходимо да знаем този формат за всеки цвят или нюанс. Просто въведете в браузъра си заявка за търсене„Цветова таблица“ и отворете първия източник, посочващ кода на всеки цвят.

Фигура 4.

След като приключите работата по времевата линия, трябва да изберете команда "файл"– „Публикуване онлайн“ в електронна таблица на Google. Нека копираме връзката, която се появява, и се върнем към уебсайта на Timeline JS. Изберете елемент 3 – „Копирайте/поставете URL адрес на електронна таблица в полето по-долу, за да генерирате вашата времева линия. (Уверете се, че сте публикували електронната таблица.)” – т.е. вмъкнете връзка към времевата линия в тази област.

Фигура 5.

https://youtu.be/P7EgqakdzNA

Сутори

Sutori е интерактивна времева линия, създадена специално за образование.

Дизайн на времевата линия в Sutori

Особености:

1. Освен текст и изображения са налични интерактивни елементи: тестове (2 вида), форум.
2. Можете да вмъкнете голямо количество текст (повече от 1 страница).
3. Събитията могат да бъдат групирани в малки групи.
4. Подпомага съвместни проекти.
5. Има безплатен план.

недостатъци:

1. Няма поддръжка за руски език.
2. В безплатния план можете да създадете само 2 групи.
3. Учителят не вижда резултатите от теста.

Как да работим?

След регистрация и оторизация ще бъдете помолени да създадете група или история (създайте история), т.е. времева линия. Историята може да има собствен банер – картинка в горната част на страницата с размери 1536 x 400 пиксела. За да добавите банер, щракнете върху бутона „Добавяне на банер“ и плъзнете изображението в съответното поле от вашия компютър или поставете връзка към изображението от интернет.

Фигура 6.

След това посочваме заглавието на времевата линия (Вмъкнете заглавие) и кратко описание(бяло кратко описание...). За да добавите елементи от времевата линия, щракнете върху бутона с голям плюс. Следните елементи ще бъдат достъпни за нас:

Фигура 7.

Видео и аудио, подобно на изображения, могат да бъдат изтеглени от компютър или поставени във връзка към съответен елемент в Интернет.

Заглавие(буквално - "заглавие") в този случай ще ви позволи да комбинирате образователни елементи според всеки критерий.

Например хронологията „Големите битки на Великата отечествена война“ може да съдържа две заглавия:
1. „Битките от първата половина на войната“ с елементи като „Битката при Москва“, „Битката при Севастопол“, „Обсадата на Ленинград“ и др.;
2. „Битките от втората половина на войната“ с елементи като „Сталинград“, „Курска дуга“, „Освобождението на Варшава“ и др.

Както писахме по-горе, форумът в тази времева линия може да се използва само в рамките на група, създадена на Suotri, което не е много удобно. Но можете да създадете тест за всички. Разполагаме с два вида тестови задачи. Първата от тях е задача с избор на един верен отговор (Multiple choice).

Фигура 8.

Втората е задача за установяване на правилното съвпадение (Matching quiz).

Фигура 9.

Тестовете се използват за самотест– учителите не могат да видят резултатите от тестовете на учениците.

https://youtu.be/P7EgqakdzNA

Timetoast

Timetoast е класическа времева линия с възможност за избор на платен или безплатен акаунт.

Дизайн на времевата линия в Timetoast

Особености:

1. Има безплатен план.
2. Събитията могат да се комбинират по период от време.
3. Има два вида хроникално представяне.

недостатъци:

1. Няма поддръжка за руски език.
2. В безплатния план няма начин да получите код за вграждане.
3. Безплатният план съдържа реклама.

Как да работим?

След като се регистрирате и авторизирате в този сайт, щракнете върху бутона „Добавяне на времева линия +“за да добавите вашата хроника. На следващата страница запишете заглавието (Заглавие), в статуса (Статус на публикуване) посочете стойността „Публичен” - публичен достъп (Чернова - чернова - не е налице в безплатен акаунт), изберете категория (Категория) и качете снимка (Снимка), като щракнете върху бутона за качване. Накрая щракнете върху Създаване на времева линия.

Логиката на работа в тази хроника изисква първо да се създаде период от време (timespan), в рамките на който ще има няколко събития (събития). Например „Династия Рюрик“ е период от време, „Рюрик“, „Игор“, „Святослав“ са събития.

За да създадете период от време, щракнете върху бутона за добавяне на период от време. Запишете заглавието, описанието и посочете началната и крайната дата на събитието (Начални данни, Крайни данни). Накрая кликнете върху бутона „Създаване на период от време“. Полето Описание е ограничено до 500 знака, което ще ви позволи да добавите относително голямо количество информация.

Фигура 10.

За да добавите събитие, щракнете върху съответния бутон (Добавяне на събитие)и попълнете посочените полета: заглавие, описание, дата, качване на изображение (снимка – качване). Накрая кликнете върху бутона „Създаване на събитие“.

Фигура 11.

След като създадете времевата линия, щракнете върху бутона повече– Вижте тази времева линия, за да видите вашата времева линия.

Фигура 12.

В режим на гледане имаме две налични опции – класическа хоризонтална (времева линия) и вертикална (списък). За да получите връзка към тази хроника, щракнете върху бутона в долната част на страницата на създадения проект и копирайте получената хипервръзка.

Фигура 13.

Повече подробности във видеото:

https://youtu.be/P7EgqakdzNA

Tline

Tline – времева линия под формата на цветна лента.

Цветни линии от Tline

Особености:

1. The Chronicle е джаджа в духа на Education 2.0.
2. Въз основа на публикуване на хипервръзки с всякакво съдържание.
3. Безплатно.
4. Има възможност за вмъкване на анкета.
5. Услугата е удобна за създаване на колекции от връзки към образователни материали под формата на ефективен блок, публикуване на уебинари, предстоящи събития и др.

недостатъци:

1. Няма поддръжка за руски език.
2. Това е по-скоро колекция от връзки, отколкото пълноценна времева линия.
3. Размерът на публикуваните събития е относително малък.

Как да работим?

Фигура 14.

Логото и изображението могат да бъдат изтеглени от вашия компютър или копирани от интернет връзка. По-долу са още няколко полета:

• Показване на бутони за превъртане – показване на бутони за превъртане
• Reverse Sort Date – обратно сортиране на събития
• Скриване на датата на статиите – скриване на датите в публикациите
• Скриване на времето на статиите – скриване на времето в публикациите
• Кредит – автор
• Основен цвят – цвят на фона

Фигура 15.

Ако изберем първия вариант, тогава трябва да попълним няколко полета и да качим (от интернет или от компютър) изображение.

Фигура 16.

Ако изберем опцията „Качване на изображение от компютър“ в предишната стъпка, тогава ще трябва също да допълним събитието с редица информация:

Фигура 17.

• Презентация на урока

Идеята на екипа на Timeline JS. Позволява ви да създавате емисии за събития, свързани с карти Google Maps. От гледна точка на функционалност и простота, това е отвъд похвала. Въпреки че услугата традиционно се разглежда като инструмент за създаване интерактивни карти, можете да го използвате, за да правите плакати или да представяте биография на герой.

Моята лична любов в света на услугите за създаване на времева линия. Сроковете се оказват обемни и обемни, защото можете да използвате снимки, видеоклипове, аудио и да шиете връзки.

Тук можете да превключите режима от 2D на 3D, когато четецът се движи по хронологията дълбоко в екрана, конфигурирайте външен видцялата лента и отделни времеви точки. Всички изкушения са налични в безплатна версияс едно ограничение - можете да създадете само една времева линия и не можете да получите код за вграждане за вграждане в уебсайт или блог. Ако нямате достатъчно пари за платен план, можете да регистрирате неограничен брой имейли - дори не се нуждаете от потвърждение

Времевата линия в услугата Sutori не е подобна на обичайните хоризонтални времеви линии. Тук нанизвате вертикална ос, по която четецът се движи отгоре надолу, различни видовесъдържание. Това може да бъде текст, снимка, видео или аудио с описание, както и интересни факти, анкети, тестове или дискусии. Времевите интервали могат да се настройват и зависят от това къде по вертикалната ос натиснете бутона плюс. Инструментът ви позволява да разказвате различни медийни истории, но визуално проектът ще изглежда като базиран на хронология.

Услугата позволява на студентите да създават до три графика безплатно, но никой не изисква книга с оценки при регистрация. Интерфейсът е стилизиран като приемник от старата школа, който може да се превърне в характеристика на материала. Значимостта на събитията се задава от потребителя и се показва в скала с размер на шрифта. Читателят кликва върху времевата точка, която го интересува, и научава повече. Илюстрациите са показани в паралелен мащаб в горната част, което е необичайно. Не можете да добавите видео или аудио фрагмент. Резултатът се вгражда в уебсайт или блог с помощта на код за вграждане.

Услугата практически не се използва в RuNet.

Услугата създава времеви графики въз основа на текст. Не можете да добавяте снимки или друга мултимедия към събития.

Услугата е подобна на StoryMap JS: тя също изгражда времеви линии във връзка с геотагове, което ви позволява да маркирате не само датата и часа на дадено събитие, но и мястото, където се е случило. Резултатът е хронологично представяне.

Завършената история може да бъде вградена в уебсайт или блог с помощта на код за вграждане с автоматично пускане (потребителят ще се движи от точка до точка на интервали от 15 секунди). Има възможност за запазване на данни като CSV таблица, която съдържа само текстови данни за местоположение, час и описания на събития; във формат KML (позволява ви да изтеглите презентацията за преглед в Google Maps или друга картографска услуга) или в PDF. Услугата е лесна за научаване, безплатна е и добре руснализирана.

Времевата линия ви позволява да организирате управлението на обекти във времето, а също така визуално показва реда, в който обектите следват един друг.

Има пряка връзка между обектите във времевата линия и обектите в редактора на сцени. Така например, когато даден обект е избран във времевата линия, обектът е избран в редактора; когато даден обект е изтрит от времевата линия, той се изтрива от редактора и обратно. По същество това е един и същ обект, но показан в пространството в редактора на сцени и във времето във времевата линия.

С помощта на времевата линия можете да промените началния час на появата на обект на сцената, както и продължителността му. С помощта на курсора можете да посочите текущо времев редактора и цялата сцена ще бъде преначертана в съответствие с текущото време. Текущото време на редактора се показва в лентата на състоянието, както и началното и крайното време на диапазона на работната зона също се показват там.

Можете да управлявате обекти с помощта на менюто, което се извиква с щракване с десния бутон на мишката. Можете да изтриете обект, да го копирате в клипборда, да изрежете или поставите обект от клипборда. Можете също така да промените реда на обектите, като изберете съответния елемент в менюто. Елементите „Преместване на курсора в началото/край“ ви позволяват да промените текущото време и да го зададете равно на времето, когато обектът се появява или времето, когато е скрит. Елементът от менюто „Свойства“ показва прозорец със свойства на обекта.

Когато изберете обект във времевата линия, се появява допълнителен раздел с името на този обект. Щраквайки върху него, ще преминете към редактиране на този обект и ще можете да добавяте други обекти или ефекти към него. В този случай времевата линия вече ще показва съдържанието на текущия обект за редактиране. За да се върнете към редактиране на сцена, трябва да изберете раздела с името на сцената (винаги е първият). Можете също да превключите в режим на редактиране на обект, като щракнете двукратно върху името на обекта във времевата линия.

Струва си да се отбележи, че когато редактирате сцена или спрайт, редът на обектите във времевата линия е обърнат, т.е. Първият обект във времевата линия се показва последен в редактора (над всички останали). В същото време редът на ефектите е директен и показва в какъв ред се прилагат филтрите към обекта.

Когато щракнете двукратно върху един от блоковете във времевата линия, работната зона се избира в съответствие с времето и продължителността на нейното появяване. Можете също да зададете работната област чрез съответната лента с инструменти (вижте по-долу) или като щракнете върху линийката за време във времевата линия и задържите натиснат бутона, изберете желания диапазон и след това го пуснете. Друг начин за контролиране на работно пространство е директно манипулиране на неговите указатели. Като плъзнете началния или крайния показалец на работната зона, можете да промените позицията му във времето.

Лента с инструменти " Инструменти за мащабиране”

Тази лента с инструменти ви позволява да промените времевата скала във времевата линия. Съдържа следните елементи: увеличаване, намаляване, минимално увеличение, плъзгач за плавно увеличение. Можете също така да зададете мащаба, за да пасне на работната зона. За да направите това, изберете диапазон от времевата линия и щракнете върху съответния бутон в лентата с инструменти.

Лента с инструменти " Инструменти за управление”

Съдържа следните елементи: превключване на режима на показване на време/кадър, преместване на курсора съответно в началото на избрания обект, в предишната секунда, в предишния кадър, в следващия кадър, в следващата секунда и в края на избрания обект . Тук можете да зададете началото и края на работната зона, както и да подравните началото или края й с позицията на курсора.

Лента с инструменти " Управление на блокове”

Тази лента с инструменти се използва за управление на блокове (обекти) във времевата линия и ви позволява да подравнявате блокове във времето с курсора, като подравняването е възможно по времето, когато обектите са започнали да се появяват и времето, когато са изчезнали. Тук можете да подравните избраните блокове един с друг, така че един блок да следва незабавно другия или с определено отместване. Това може да се използва, когато трябва да създадете сцена, в която един обект замества друг последователно или за определен период от време.