Как сделать презентацию на движке Shower: быстрый старт, шаблон, элементы и устройство темы

Подписаться 40 тыс.

Просмотров 5 тыс.

50% 1

00:00 Интро
01:13 Что такое Shower
02:55 Shower CLI
04:22 Устройство шаблона
05:03 Запуск сервера
06:17 Где всё примеры
10:00 Корневые параметры
11:58 Устройство темы
14:04 Компонент спотлайт
16:58 Тема Material
18:14 Две мысли
19:19 Аутро
Нравится? Становитесь патронами / pepelsbey
Стартовый шаблон shwr.me/
Тема Ribbon shwr.me/shower/themes/ribbon/
Тема Material shwr.me/shower/themes/material/
Код на Гитхабе github.com/shower/
* * *
Камера: Blackmagic Pocket Cinema 4K
Объектив: Panasonic 12-35 мм, f/2,8
Микрофон: Audio-Technica BP40
Свет: Aputure Light Storm 120d II + Light Dome
Софт: DaVinci Resolve, iZotope RX

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 75

@pepelsbey 3 года назад

@aleksandralekseev8797 3 года назад

"А покажи нам!":) Нам интересно:)

@Priboy313 3 года назад

Очень прикольная штука. Пожалуй, сделаю на ней диплом. Давай подробности!

@username7148 3 года назад

Огромное спасибо!) Впервые узнал о Shower, обязательно попробую для создания докладов и буду ждать следующего выпуска об этом движке)

@MrVigesha 3 года назад

Огонь! нужно еще!

@lenaryan 3 года назад

Прикольно, не знала про утилиту)) про клондайк с примерами тоже...) полезное видео, спасибо))

@nickml5138 3 года назад

Очень интересно, спасибо) Понравилось то, как выставляется соотношение сторон слайда)

@maximzabara 3 года назад

Вадим, спасибо за труд, Shower неоднократно применял в своих докладах! Крутой и мощный движок презентаций!

@FielDyTr 3 года назад

Первый раз, когда увидел Shower, "ужас здесь все нужно прописывать руками через html". Сейчас "Пожалуйста не заставляйте меня страдать в PowerPoint"

@eduardgorte8241 3 года назад

Жиза

@PhilippeRigovanov 3 года назад

Спасибо за ролик и конечно за сам софт - очень полезная штука! Если буду еще работать преподом информатики, то мне нужно будет еще много презентаций создавать, так что буду очень рад продолжить знакомство с Shower в новых видео.

@sergiivelykodnyi 3 года назад

+ 1 к "А покажи нам!" :)

@user-hv9fd8sh1h 3 года назад

Название гениальное. С одной стороны вроде как душ - читается как шАвер. Но при этом вроде презентации, значит от слова show - шОу.

@pepelsbey 3 года назад

Спасибо :3

@kaze9308 3 года назад

круто! жду подробностей

@dmitrykhorkin 3 года назад

Клевая тулза!)

@user-yn2sb5lz1r 3 года назад

Спасибо, Вадим! Очень полезно, давно ломаю голову, чем заменить корпоративные шаблоны в PowerPoint. Покажи нам видео про темы, и мы начнём делать новые.

@AbraKadabra000 3 года назад

круто, с праздником! Делал шовером пару докладов внутри фирмы где работал, в году эдак 2к16

@trapma 3 года назад

Очень интересно! Если возможно, хотелось бы увидеть как делать анимации и переходы по триггерам)

@realovich 3 года назад

Спасибо! Ну это ж тизер :) Ждем полного фильма ;) Интересно, можно ли с помощью кастомных свойств менять шаг сетки, отступы по краям и т.д.?

@pepelsbey 3 года назад

Настолько гибко всё не настраивается, но вы можете написать свою тему :) Вот набор встроенных свойств github.com/shower/ribbon/blob/master/styles/shower/shower.css

@Talpirion 3 года назад

Круто

@Andreykch 3 года назад

Отлично, буду знать про классный инструмент. А то как раз недавно нужно было составить презентацию и что-то в Power Point это оказалось очень больно. А тут понятный код, а не этот ваш визавиг))) Ну и было бы интересно увидеть разбор тем и вообще внутренней кухни

@Klamul 3 года назад

Круто, а расскажи про устройство тем подробнее?)

@jag_k 3 года назад

Вадим, спасибо огромное за Shower! Ждём продолжения серий) P.S.: Очень хочу помочь самому проекту, и не так давно сделал для него поддержку touch устройств. Ещё есть идея для плагинов, которые можно было бы ставить через CLI (например: управление spotlight с помощью мышки)

@pepelsbey 3 года назад

Вам спасибо за тач :) Его давно не хватало - пока тестирую, но будем мёржить. Идея управлять спотлайтом - отличная.

@catexis1 3 года назад

Классный проект! Подробности нужны, особенно - есть ли экспорт в PDF. В своё время осваивал Latex Beamer для похожей цели, тоже очень мощный инструмент.

@pepelsbey 3 года назад

Есть экспорт :) В CLI или через печать в любом браузере на основе Chrome

@SmArtemTV 3 года назад

Клева! Спасибо! А что по по подсветки синтаксиса в снипетах? И по скольку это index.html то получается можно вставлять или webComponent. Есть ли стили чтобы они красиво вписывались в слайды?

@pepelsbey 3 года назад

Встроенной подсветки нет, мне это кажется не настолько важным. Но если кто-то принесёт хорошее решение - я буду не против. Ну и можно прямо на слайды встраивать всё, что угодно - если вы про это. Готовых примитивов для этого нет, то в том и прелесть - вы можете написать свои!

@SmArtemTV 3 года назад

@@pepelsbey я скорее про наличие готового класса object который бы красиво в сеточку вписал. Но очевидно можно и самому такой класс сделать.

@Alexander-fp4fs 3 года назад

плиз, объясни какие единицы измерения все таки использовать при верстке страничек??

@remontunasdotru 3 года назад

Я бы с удовольствием посмотрел как движок устроен под капотом.

@user-nh1ku5xs5z 3 года назад

Просто интересно, в чем преимущество над power point? И чтобы запустить на другом компе нужно экспортировать в пдф?

@pepelsbey 3 года назад

Преимущество над PowerPoint в том, что слайды работают прямо в браузере, то есть вам не нужен платный софт, чтобы их создавать и показывать. Чтобы запустить на другом компе, нужно открыть там файл index.html - всё прекрасно работает как есть. Можно также создать ещё более простую версию слайдов, если выполнить shower prepare. Сервер нужен только для удобного создания. Но и экспорт в PDF тоже есть, покажу в будущих видео.

@vitalii7672 3 года назад

@@pepelsbey а в чем преимущество на латехом? где презентации делются довольно легко

@pepelsbey 3 года назад

Преимущество над латехом в том, что я знаю веб-технологии и не знаю латех. И конечно всё, что я перечислил выше: в любом браузере, в любом текстовом редакторе.

@danielkhachaturian 3 года назад

Вадим, в одном из видео Вы демонстрировали в файле package.json значение private - приватный пакет, где не надо писать ни название, ни версию и т.д. Не могли бы Вы поделиться, как создать такой проект (с помощью npm init? нужного флага для создания приватного я не нашёл)

@pepelsbey 3 года назад

Я не пользуюсь npm init, я просто руками пишу private: true в файле и дальше уже во время установки npm дописывает зависимости сам.

@danielkhachaturian 3 года назад

@@pepelsbey понял, спасибо, думал что есть команда на эту тему

@antonnesterenko9854 3 года назад

да, очень интересно, а можешь показать с моушен на слайдах. анимировании ...

@igoriugin1253 3 года назад

Привет, а покажи нам!)

@86yao 3 года назад

А покажи нам))

@user-bo2jz1pc7p 3 года назад

Единственный вопрос, почему не бэм?) Чтоб было всем максимально быстро понимать код? Классов в целом почти нету

@pepelsbey 3 года назад

БЭМ не очень удобно писать руками. У движка другие задачи, это не типичный интерфейс для команды, это слайды для одного человека и удобство работы важнее всех тех целей, которые решает БЭМ. На самом деле, я жду более широкой браузерной поддержки веб-компонентов, чтобы сильно поменять то, как работают слайды.

@slavkapiyavka 2 года назад

Ха, кажется в 19 году я видел ribbon презентации в html academy :)

@FoldyH3ro 3 года назад

Привет Вадим. Стало интересно, где у тебя сейчас основная работа?

@pepelsbey 3 года назад

Основной сейчас нет: то здесь, то там. Делаю сообщество «Веб-стандарты» и разное другое.

@FoldyH3ro 3 года назад

@@pepelsbey А с Оперой как, закончил?

@pepelsbey 3 года назад

Ещё в 2016 году medium.com/p/5497b816c28f

@GarifullinMichael 3 года назад

движок крутой когда-то использовал, но на днях надо было опять по новой презентацию сделать. И вот reveal c подсветкой построчной кода и фулл бэкграундом видео как то зашел чуть попроще используя маркдоун

@pepelsbey 3 года назад

Проблема с маркдауном в том, что это уже не теги и на них не повесить классы и модификаторы. Плюс это клиентская шаблонизация и сложность сильно повышается. Shower и Reveal.js - оба движки для презентаций, только с разным подходом к задаче. Выбирайте, какой вам нравится больше.

@TsA1ex 3 года назад

А самое главное. Как же писать на слайде код? Красивый, интерактивный, с подсветкой синтаксиса

@remontunasdotru 3 года назад

Попробовал на работе сделать небольшую презентацию. Использовал shower. Все понравилось, кроме работы с картинками. Они вставлялись как-то странно. Как будто немного зуммированными. Для их позиционирования пробовал применять классы - cover, place. В документации мне немного не хватило примеров слайдов с картинками. Я наверно чего-то не понял...

@pepelsbey 3 года назад

Начиная с 36 слайда там есть все вариации, но я понимаю, что там не хватает более подобного описания shwr.me/shower/themes/ribbon/#36

@remontunasdotru 3 года назад

@@pepelsbey Спасибо, разобрался

@2rookawa 3 года назад

Открытие возможности делать оверлей через box-shadow (как у спотлайта) внезапно перевесило все остальные открытия из этого видео (=

@kaze9308 3 года назад

на windows при создании презентации с помощью shower-cli зависает после ввода shower create slides : - (

@pepelsbey 3 года назад

Если не сложно, распишите подробнее в ишью github.com/shower/cli/issues

@user-rl9ou2bh6p 3 года назад

7:50 идея для контрибьюта - сделать в cli команду, которая открывает страничку с примером, чтобы не копировать путь вручную. 11:58 ВЕРТИКАЛЬНЫЙ РИТМ верните мой 2010й Ещё идея для контрибьюта: сделать размер шрифта кастомизируемым. И чтобы все остальные элементы пропорционально уменьшались. @pepelsbey, думаю если завести такие ишью на гитхабе с help: wanted, кто-нибудь когда-нибудь может это сделать :)

@pepelsbey 3 года назад

Лучший способ что-то добавить в Shower: завести ишью и обсудить задачу. Если ей место в движке - сделать пулреквест.

@r2r4ik 3 года назад

Видос шикардос! Мочний интрумент!!! Думаю Ви знаете как писать Addons к бравзерам так как били евангелистом в Опере. Можете и ето росказать и показать? Спасибо!!!

@pepelsbey 3 года назад

У меня не очень большой опыт создания расширений, так что мне пока нечего рассказать. Но если будет повод сделать какое-нибудь расширение - обязательно расскажу!

@r2r4ik 3 года назад

@@pepelsbey Спасибо за ответ! Мне очень не хватает в Mozilla addons Room Booksmarks tools потому пожнял ету тему! Удачи Вам, успехов и крепкого здоровя!!!

@user-hz7ib6pi3f 3 года назад

Не удаётся создать новый проект через cli. Вернее, удалось ровно один раз. После этого выполнение shower create не приводит ни каким видимым результатам (кроме загрузки ЦП и памяти). Удалял пакет, переустанавливал - никакого результата. Попробовал на другом компе - тоже не работает. Но ведь один (первый) раз как-то получилось... Мистика какая-то!

@pepelsbey 3 года назад

Вы не могли бы подобнее рассказать о своём опыте в ишью на Гитхабе? github.com/shower/cli/issues/56

@user-hz7ib6pi3f 3 года назад

@@pepelsbey написал коммент к ишью.

@sergeymelashych2065 3 года назад

Очень здорово, спасибо! Выглядит как добротный инструмент. Было бы интересно посмотреть сравнение с таким проектом как revealjs.com/ который используется для тех же целей и вроде как имеет изрядный запас различных возможностей

@pepelsbey 3 года назад

Мне будет сложно сравнить Shower с Reveal.js - это два разных взгляда на то, как нужно делать презентации. Мне нравится мой, иначе бы я пользовался другим :)

@11r3start11 3 года назад

покажи нам риббон пожалуйста)

@user-wz3hx3lu2t 3 года назад

А в чем смысл? Чем google presentation плох?

@pepelsbey 3 года назад

Я вот тоже не понимаю, зачем нужны груши, если уже есть нормальные яблоки! А если серьёзно, то это совсем другой инструмент для другой публики и, прежде всего, для меня самого. Мне нравится верстать, слайды в том числе :)