Простое создание красивых CSS3 презентаций с JaCSS



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

    Скучно!

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


    История


    Для начала я попробовал такую штуку, как Preziвот что у меня вышло). Да, необычно. Но меня жутко удивило сложность и практическая невозможность кастомизации — нет своих тем, шрифтов, анимацией… разве что видео добавлять. Но концепция очень заинтересовала, хотя и смутила «круговерть» переходов — аж голова кружится когда пускаешь презентацию на большом проекторе. Хотя тогда мое выступление, судя по отзывам, неплохо прошло.

    В этом году меня снова пригласили выступить (на этот раз на JEEConf) и передо мною снова встал вопрос о том, каким образом я буду показывать то, о чем я буду рассказывать (почти стих). И снова захотелось необычного :)

    Сначала решил сделать что-то вроде Prezi, но на GWT и воспользоваться всей силой HTML. Но в процессе разработки как-то потихоньку выплыла другая идея: а почему бы не использовать CSS3-Transitions для анимации и CSS3-2D-Transforms для поворотов? Ведь тогда можно с минимальными усилиями сделать красивые переходы между «слайдами».

    Дальше больше: я вспомнил что CSS это каскадные стили. То есть если у нас есть одно определение, и потом другое, которое частично или полностью заменяет некоторые параметры первого, то броузер должен будет отрендерить по второму определению.

    То есть если есть два определения
    .class1 {
       left: 100px;
    }
    .class2 {
       left: 200px;
    }
    

    И какому-то элементу будет установлено два класса (class=«class1 class2») то в результате броузер должен будет позиционировать элемент с свойством left равному 200px. Данное свойство знакомо любому, кто только начал изучать CSS.

    И если у элемента был класс class1 и потом мы ему присвоим class2 то left изменится со 100 на 200. Изменится. То есть если у элемента к тому же был «включен» css3 transition, то броузер должен будет плавно передвинуть элемент с 100px до 200px. А это именно то что нам и нужно!

    Первый блин


    Для того, чтоб «обкатать» идею я написал небольшой кусок кода на jQuery, который все что делал — это добавлял класс при переходе на следующий «слайд» и удалял его когда нужно было вернутся на предыдущий.

    Весь контент, который появлялся и исчезал я поместил в контейнер с определенным id («cont») что позволило меняя класс(ы) этого контейнера менять стили контентов.

    В итоге код установки слайда выглядел как:
    	if (stage>current_stage) {
    	   for (current_stage++;current_stage<=stage;current_stage++) {
    		$("#cont").addClass("s"+current_stage);
    	   }
    	   current_stage--;	
    	} else if (stage<current_stage) {
    	   for (;current_stage>stage;current_stage--) {
    		$("#cont").removeClass("s"+current_stage);
    	   }
    	}
    

    После этого я сосредоточился в основном на контенте.

    В результате на JEEConf'е я выступил вот с такой презентацией: CQRS+GAE+GWT

    Этап 2: JACSS


    После доклада, которое, кстати, было довольно интересно проводить, захотелось как-то упорядочить эту, так сказать, технологию для того, чтоб следующий доклад легче было бы готовить.

    Во-первых я решил что jQuery в моем случае не нужен — ведь есть classList.

    Во-вторых надо было сделать минимальную конфигурацию — сколько слайдов, где контролы находятся и т.д. Для этого я вынес эти параметры в отдельный объект для конфигурации и воспользовался querySelectorAll

    В итоге и вышел вот такой вот проект: JaCSS (как помесь слов Javascript и CSS).

    Внутри кода нет ровным счетом ничего сложного. После добавления jacss делает следующее:

    1. Экспортирует две функции: jacss.next(), javss.prev() — переключение «слайдов»
    2. Вешает обработчик клавиш стелочек и пробела на окно (которые переключают «слайды»)
    3. Вешает обработчик изменения «хеша» урл (для корректной обработки навигации «назад»/«вперед» броузера)
    4. Смотрит хеш урл, и если там что-то есть пытается перейти на слайд, указанный в хеше урл

    При переключении слайдов происходит:
    1. Добавление-удаление классов вида «sN», где N — номер слайда. Таким образом если текущий слайд был пятый то при навигации на 7-ой произойдет добавление классов s6, s7. А при навигации на 2, будет попытка удалить классы s5, s4
    2. будет установлен хеш урл равным новому «текущему» слайду


    Самое интересное, что дальше я расскажу предлагаемый мною вариант использования этой «библиотеки». На самом деле структура HTML и CSS файлов может кардинально отличатся от моей. Более того, я бы даже попросил хорошим веб-дизайнеров подумать и предложить более удобные варианты центрирования и позиционирования контентов. Мои же примеры можно считать как proof of concept, на основе которых уже можно сделать «нормальные» решения.

    В общем, предлагаю мой вариант:

    Как создать свою презентацию с JACSS



    Презентация делится (не четко, см. ниже) на две части: «контенты» (текст, картинки), и «поведение» (набор определений css). По этому создадим два файла: simple.html и simple.css

    С кодом html хабрапарсер как-то тяжко справляется, по этому прошу вот сюда: github.com/olostan/jacss/tree/master/examples/simple

    В html мы подключаем jacss-овские js/css. Потом конфигурируем его (максимальное количество «слайдов») и задаем собственно текст:
    <span id='texample'>Example</span>

    Cразу скажу, что если использовать мой jacss.common.css (что не обязательно), то айдишники блоков с контентом должны начинаться с буквы «t».

    В CSS-ке же сначала мы задаем начальное положение контента. При использовании моего набора стилей, каждый контент изначально спрятан (opacity: 0, visibility: hidden), кроме того левый верхний угол позиционирован примерно по центру. Итого чтоб расположить изначально по центру наш текст надо:
    #texample {
    	color: blue;
    	font-size: 50px;
    	left: -80px;
    	top: -35px;	
    }

    Потом идут описания стиля (цвета, видимости, положения) контента для каждого «слайда»:
    .s1 > #texample {
    	opacity: 1;
    	visibility: visible;
    }
    .s2 > #texample {
    	left: -400px;
    	top: 200px;
    }
    .s3 > #texample {
    	top: -200px;
    	color: red;
    }
    .....

    Записываем мы только изменения относительно предыдущего «слайда».

    Результат можно посмотреть вот тут (или взять с гитхаба).

    Более сложный пример (с градиентами, тенями, RGBA-фоном и т.д.) так же можно посмотреть.

    Пару слов про разделение между html и css: важно понимать, что в css находится наше поведение. То есть записаны изменения. Что же делать, если нужно менять картинку/текст при смене кадра? Если для картинки просто — можно ее пустить на background, то с текстом сложнее. Я нашел такое решение: использовать псевдо-селекторы :before, :after и «content» — см. изменение «Вася» на «Коля» тут.

    Что дальше?



    А дальше все в Ваших руках: форкайте на здоровье! Ведь реально пока готова только концепция, к которой можно еще столько всего прикрутить:
    • Поддержку браузеров (я в основном смотрел на Chrome/FF4). Не вижу причин почему не должно так же работать на Opera, IE9
    • Поддержка мобильных устройств (жесты). Я проверил на своем iPad — в основном работает, надо только «заточить» CSS и добавить обработчики на жесты
    • Попробовать прикрутить LESS (http://lesscss.org/) c node.js как без-энд
    • Более красивую навигационную панель (может с авто-хайдом), или разные «скины» для нее

    Я постепенно буду стараться двигаться по этому чеклисту, но и приветствую любую помощь в виде pull request'ов :) А так же предложения, советы и замечания.

    Спасибо и до встречи на красивых и увлекательных докладах!



    Linklist:
    Моя первая презентация
    JaCSS на GitHub
    Простейшая демка на jacss
    Чуть более сложная демка на jacss
    Реклама

    Комментарии 35

      +4
      На защите диплома за такие «не скучные, не креативные и не стандартные» презентации… накажут
        +3
        Да, действительно если я не ошибаюсь, то когда я защищал диплом, мне выдали набор ГОСТов, которые должна выполнять сама дипломная работа. Так же одно из требований (хотя не думаю, что это ГОСТ) — наличие 2-5 слайдов, напечатанных на специальной плёнке, которые потом надо было сдать вместе и дипломной работой.

        Конечно при таком подходе ничего нестандартного просто нельзя сделать.

        Но в целом, если доклад хорошо наполнен информацией, то почему бы не помочь зрителю небольшими эффектами?

        Ведь в HTML Вы можете создать вполне стандартный layout «хедера-футера» и внутри стандартным <OL%gt;/%lt;%gt; перечислить пункты. И использовать CSS3 просто для красивых переходов между слайдами.

        В результате получите 1 в 1 «обычную» презентацию, только вместо Keynote/PowerPoint создавать можно в любимом Eclipse/Dreamweaver/TextMate/vim :)

        Кстати, еще мелкий плюс забыл уточнить — а ведь такие «доклады» отлично индексируются поисковиками :)
          0
          Конечно при таком подходе ничего нестандартного просто нельзя сделать.

          Как правило госты 78-86 годов и про стиль/оформление там ничего не зафиксировано. А презенташка просто для защиты, на плёнке можно статичные сдать…
          0
          «не скучные, креативные и не стандартные» ??
          На защите диплома есть требования и жесткие рамки. В пределах этих требований — пожалуйста, креативьте.
          У нас, насколько я помню, нормально проходили такие презентации, главное, чтоб по теме и не сильно навязчиво!
            0
            Я не рисковал и не буду, по моему лучше уже по стандарту, сухо и по делу. Если преподу 60+ лет, лучше не шутить.
              +2
              Если препода смутит плавный переход между слайдами — то вам торба в любом случае!
              Хотя, это мне легко говорить, когда эти страсти уже позади =)
                –1
                Ну на бакалавра и у меня позади, на магистра еще нет. Плавные переходы может быть и можно, надо будет почитать правила.
                  +1
                  Тоже сейчас защищаюсь… Для поднятия настроения => comixme.net/comixes/1278.jpg

                  Касательно диплома лучше не шутить, у нас хоть и преподы адекватные и between 20 and 60, но каждый со своими червяками в голове — просто было два дня назад наоборот, когда один из них сказал: «А сделали бы визуальное сопровождение — Ваш рассказ был бы намного лучше».
                    +1
                    А никто не знает, что делать когда диплом написан, в пятницу его сдавать, а нет маааленького штриха — росписи руководителя ибо он в Брюсселе на конференции?

                    P.S. Никто потом не хочет представить свой диплом общественности?
                      0
                      Худо дело если руководителя нет…

                      «Никто потом не хочет представить свой диплом общественности?»
                      Будет. Пишу на тему распознавания образов алгоритм, планируется два топика в Алгоритмы и в Распознавание образов и запил проекта на Git
                        0
                        Че-то я со своим «Разработка контакт-центра для предприятий малого бизнеса на базе программной АТС Астериск» аж застеснялся…
                        +1
                        У нас с этим просто было, отзыв подписал препод хороший, диплом подписал декан (просто пришли к нему со словами «руководитель в отпуске — подпишите»).
                        Это на бакалавра, правда.
                    0
                    У меня в презентации были плавные переходы, легкая анимация и элементы инфографики. Перечень данных, которые могут считаться персональными и должны защищаться, сделал в виде облака тегов. Сказали, что презентация очень клевая.
                    Только на защите запал пробел в древней универской клавиатуре и… >_< в общем пришлось назад слайды пролистывать.)
                      0
                      Ну. Эт не фарт просто. У меня тоже «аппаратура» подвела — ре работала переключалка слайдов (пульт).
                      В итоге слайды переключала девочка, по командам:
                      1) Следующий
                      2) Нет, еще следующий
                      3) Ну куда — перемотак назад…
                  +1
                  Когда я сдавал, у нас powerpoint был вершиной креативной мысли. А препод по информатике был бородатый ПалАндреич, то в свитере, то пиджаке с обвисшими рукавами… И ему было очень параллельны стандарты, как впрочем и креативность. Оценивал знания.
                    0
                    Сейчас в критериях оценки, которые присылают из Министерства, есть пунктик про дополнительные баллы за использование инновационных технологий. За инновационные технологии у нас засчитывали PowerPoint, MS Project, BPwin (разработка которого еще лет 5 назад прекратилась). Вот такие инновации.
                  0
                  Ну не скажите… Все зависит от вуза. У нас были жесткие требования к оформлению пояснительной записки, однако на презентациях, наоборот, рекомендовали делать что-то яркое и оживленное, иначе комиссия просто засыпает. Поэтому у меня всё, что только можно, появлялось постепенно и с эффектом fade-in, некоторые штуки двигались, и смотрелось это все объективно лучше унылого Times New Roman черным по белому.
                  –2
                  Все это замечательно, но я бы рекомендовал под кнопки в onclick='jacss.next();' добавлять еще return false; дабы не захламлять историю браузера. Мелочь, но ведь раздражает.
                    0
                    Возможно это стоит сделать опционально так, как сохранение истории «листания слайдов» была одна из фичей, которую я хотел достичь. Чтоб можно было потом с помощью броузерных кнопок «назад/вперед» вернуться.

                    Но, действительно, это засоряет историю и надо дать возможность это отключить. Хотя не потеряется ли после этого возможность навигации на конкретный слайд по хештегу?
                      –1
                      Есть ведь кнопки Prev и Next, думаю не стоит их дублировать. Но это лично мое субъективное мнение, возможно кому то удобней иначе.
                        0
                        Вот по этому я и думаю это сделать опцией.

                        Кнопки prev/next переходят строго на предидущий/следующий слайд (т.е -/+1 к текущему номеру). А кнопка броузера «назад» может перейти как на следующий (текущий+1) так и на предыдущий (текущий-1) слайд в зависимости от того, какой номер был до текущего перед навигацией.

                        То есть кнопки броузера это как бы undo/redo, а кнопки next/prev — непосредственно смена номера «слайда» в нужную сторону.
                          –1
                          Тоже верно, но я думаю в таком случае лучше всего сделать небольшую постраничную навигацию, будет на порядок удобней.
                    0
                    Отличная идея! Давно интересовался, как такие презентации делаются. Если появится удобный сервис, то я буду постоянным пользователем.

                    P.S. название которое вы дали сразу напомнило слово jackass :)
                      +1
                      Довольно сложно таскать для презентации с собой саму презентацию и браузер к ней.
                      Подобные штуки, по-моему, проще вообще уж на каком-нибудь SDL делать.
                      Сам презентации всегда делал в MS/Open Office. Креативность, она не эффектами достигается. Можно нарисовать все слайды на бумаге, взять фотоаппарат, добавить в кадр немного объёмных примеров, сфотографировать и листать.
                        +1
                        А на кафедре где я защищал диплом было как раз требование делать презентацию на html, причём с одним адским условием, презентация должна проходить валидацию w3c. Внизу должны были быть 2 иконки, о валидации html и css. Другие кафедры были без подобных требований, таким образом на защите дипломов то браузер открывали то powerpoint файлы.
                          0
                          Спасибо большое, отличная статья. *Ушёл допиливать*
                            0
                            Проще написать презу в иллюстраторе, каталисте или флеше, а потом конвертировать в html5 с помощью wallaby
                              0
                              гм… возможно Вам проше, но так, как я в основном работаю с HTML/CSS/JS мне легче добавить класс с «left: -200px» чем искать где добавить новый «кадр», сдвигать нужный объект и т.д.

                              Тем более у меня нет ни иллюстратора, ни каталиста ни флеша. Зато есть Eclipse/VisualStudio :)

                              Как говорится — каждому свое.

                              Кстати, а зачем тогда конвертировать в HTML5? Можно же прямо во флеше показать, разве нет? Я просто немного далек от флеш-разработки, вот и интересуюсь.
                                0
                                >> Как говорится — каждому свое.
                                Когда все запомнят, что это надпись на вратах Ада у Данте, а затем на воротах концлагеря Бухенвальд. А первоначально (у Цицерона) означает беспристрастность ПРАВОСУДИЯ! Здесь уместнее «На вкус и цвет», чем эта цитата.
                                К.О. негодуе!
                              –2
                              Я извиняюсь, но разместить кнопку «Следующий» слева, а «Предыдущий» справа, да ещё и при наличии бегунка — такое мог сделать только полный идиот. В демке вся должно быть просто и лаконично, а вот такие ляпы ставят крест на всей работе. Потому что если есть такие ошибки в логике, то что же ждет дальше…
                                +2
                                Разместите в Вашей демке наоборот :) Ведь кнопки находятся в html-файле, который каждый свой для каждой демке. Их совсем можно убрать. Реально когда я проводил презентацию, я пользовался только клавиатурными клавишами «вперед» и «назад» (с мобилки через bluetooth), и панелька совсем не нужна была.

                                Цель моей работы была именно концепция подобных презентаций, по этому UI я даже не включал в основной код JaCSS, а только в демонстрациях.

                                А что будет дальше в основном зависит от фидбеков и пулл-реквестов. По поводу панельки в моем чек-листе выделен отдельный пункт (последний в списке).

                                Хотя Ваше «полный идиот» звучит совсем не уместно (читать выше про UI), но замечание про порядок кнопок учту.

                                ПС. Если интересно почему именно в таком порядке идут контролы то расскажу: когда я делал, я делал очень постепенно. И кнопочка «Next» была первой, которую я добавил. Потом реализовал функционал этой кнопки. И только потом добавил кнопку «Prev». Потом индикатор текущего кадра и ползунок. Вот в порядке добавления оно и осталось, а не злому умыслу «полного идиота».
                                +9
                                Людям из Майкрософта, придумавшим дать людям возможность делать анимации в слайдах в Power Point, нужно оторвать руки за то, что сейчас все считают про хорошая презентация — это когда на слайдах вывалена куча графического мусора, который при этом передвигается и мешает понимать суть.

                                Откройте Adobe Fireworks, сделайте там шесть статических, аккуратно сверстанных картинок на белом фоне. Когда будете рассказывать свой доклад, просто откройте папку с этими картинками и откройте их в режиме полноэкранного просмотра. Получится отличная презентация. Гораздо лучше той, что показана у вас в примерах.

                                А про креатифф и нестандартный лейаут лучше забудьте, помилуйте тех, для кого эта презентация предназначена.
                                  +2
                                  Не знаю, я на презентациях, на которых один слайд висит минут пять с пачкой буллет-поинтов просто засыпаю :)

                                  Если анимация мешает понимать суть — убирайте ее. Она должна помогать понимать. Иллюстрировать то, что Вы говорите.

                                  Да, это сложно. Мне Prezi и не понравился тем, что очень сложно сделать простую легкую анимацию.

                                  Фактически мною описанный способ — это просто возможность без особых сложностей сделать любую под Ваш стиль презентацию на html. Хотите 3 слайда с буллет поинтами — создаете страничку, убираете анимацию из css и все — выходит классическая презентация, только в html. Как плюс — легко индексируется, мало занимает, и не надо никаких прог для просмотра и редактирования.

                                  В общем jacss не навязывает никакой анимации/крадиентов/шрифтов/теней.

                                  А мне нравится вот так и, пока, судя по отзывам, тем, кому рассказывал — тоже :)

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                              Самое читаемое