четверг, 22 марта 2012 г.

Новый стиль для блога и некоторые технические нюансы

Доброго времени суток всем, читающим блог Tigrik.org.

Недавно изменил дизайн сайта на более светлый вариант, и лично мне новая обложка весьма и весьма нравится :)


Долго и мучительно обдумывал, какие же цвета выбрать для текста, ссылок ещё не посещённых и уже посещённых. И потом осенило )) Почему бы не выбрать те же цвета, которые использую в видеоинструкциях: зелёный - для кликов левой кнопкой мышки, красный - для клика правой кнопкой мышки и синий - который использую, чтобы прямоугольными рамками отмечать важные элементы программ. Думаю, получилось весьма и весьма неплохо, смотрится однозначно свежее того что было :) О смене дизайна подумывал и раньше, но окончательно меня в этом убедил читатель в своём комментарии к инструкции по программе PDF XChange Viewer.

Хотел объяснить тем, кто читает мой блог через rss-ленты о причинах обновления всех постов (которые таким образом поднялись вверх по ленте). Выбор такого цветового решения пришёл не сразу, долго думал и экспериментировал на тестовом блоге, и в итоге мне понравились именно эти цвета. Цвета понравились, но для ссылок зелёный показался мне не очень убедительным и решил попробовать сначала выделять слово жирным и только после этого вставлять ссылку. Результат такого эксперимента мне понравился, смотрится довольно неплохо. Для новых инструкций это я конечно бы учёл, но как быть с теми инструкциями, что уже есть ? :) Вот и пришлось мне обновлять каждую запись, делая слова под ссылками жирными (Не выделял жирным только ссылки, которые выглядят в тексте как ссылки. Для примера: Блог Tigrik.org , прочувствуйте разницу).

Ещё один моментик появился, из-за которого мне придётся снова редактировать часть инструкций :) До этого описывал программу для записи видео с экрана и создания скриншотов Jing. В рамках этой инструкции также был описан сервис от TechSmith - ScreenCast.com, который я также использовал для хранения gif-слайдшоу (которые входят во многие мои инструкции). Так вот, в бесплатном аккаунте там дают хранилище местом до 2 Гб (для картинок gif хватает с головой, лично у меня занято сейчас всего около 5 Мб), хранилища то хватает, но там также есть ограничение на траффик, до 2 Гб в месяц (если выше, нужно брать премиум, стоит около 10 долларов в месяц, на данном этапе проекта пока рановато). Мне доступного траффика в бесплатной версии на этот месяц не хватит, не помещаюсь уже :) . Сервис у TechSmith конечно отличный, и кроме хранения картинок gif там ещё куча полезностей, связанных с возможностью хранения видео и аудиофайлов, подписки по rss на определённую папку, разграничения доступа и много другого. Но мне на данном этапе нужно только хранилище для анимации в формате gif, если только для этой цели 10 уе в месяц дороговато. Нашёл другое решение, которое с большой вероятностью буду использовать - премиум аккаунт на Жабе (она же Imageshack.us - хранилище картинок с многолетней историей, отличающееся надёжностью). В варианте Premium Basic, месяц услуги стоит 2$ (услуга покупается на 3 месяца, потом продлевать, или же сразу брать Premium Pro минимум на полгода).

Это всё я писал к тому, что с большой вероятностью, где то через неделю-две мне нужно будет перезалить все элементы инструкций в gif на Жабу (в свежекупленный премиум), после чего нужно будет заменить ссылки на эти анимации у себя в инструкциях. Заодно кроме обновления изображений думаю тут же поставить внизу инструкций ссылки на другие инструкции из моего блога, близкие обсуждаемой тематике (для примера по скриншотам у меня уже описано 3 программы: FastStone Capture, Jing и KSnapshot, и ещё две программы этого направления хочу описать в ближайшее время).

По краткому обзору причин обновления постов (и дизайна блога :) ) у меня всё. Ниже добавлю ещё пару слов о создании инструкций и использовании фломастеров в этом нелёгком деле.



Решил поделиться одной фишкой, которую придумал, когда сочинял инструкцию по Cool Reader. Покупал себе около месяца назад фломастеры, для учёта личностного прогресса по нескольким параметрам, отмечая этот рост (и спады, волнообразно всё :) ) в трёхбалльной системе (красный, жёлтый, зелёный). У меня своеобразный календарь, раскрашенный разными цветами, висит в комнате :) . Но сейчас не об этом, недавно пришла мысля о том, как ещё можно использовать фломастеры. Так вот, читая текст с листочка при озвучивании инструкций, у меня до этого было такое что приходилось перезаписывать очень много раз из-за того что где то лишняя пауза, где-то торможу, где-то наоборот тараторю (Кстати, не знаю кому как, но лично мне удобнее озвучивать с рукописного текста, написанного моей рукой. Распечатки не так эмоционально получается, а когда пишешь, то в слова как бы вложена частичка души). Так вот, недавно придумал поставить эксперимент, который весьма удался - в дополнения к запятым и тире решил выделять некоторые важные вещи ещё и фломастерами. Что и как выделять, каким правилам и закономерностям следовать тут каждый решает сам, но сама фишка использования фломастеров при подготовке речей для инструкций мне понравилась :)

Вот как выглядело использование этой фишки при моём озвучивании инструкции по программе Cool Reader:


Кстати, тем, кто не против читать с распечаток набранного текста, как вариант, могу предложить перегонять документ в формат pdf (Можно через скриншот страницы программой FastStone Capture, только в качестве файла, в который сохранять выбирать pdf, можно также экспортировать doc в pdf какой-то другой программой). Так вот, имея на руках текст для зачитывания перед аудиторией в формате документа pdf, Вы можете, предварительно наведя в нём лоск и добавив нужные графические элементы, выделив самое важное, добавив рамочки и подчёркивания в самых подходящих местах программой PDF XChange Viewer, сделать этот документ максимально информативным.

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

То, что хотел описать, примерно описал :) Надеюсь было понятно и интересно.
До новых встреч на кухне Tigrik.org

8 комментариев:

  1. Дополнение лично для меня в качестве ремайндера.
    До этого писал что гугл редиски и видео на полный экран не открывается в блоггере, сейчас разобрался в сути проблемы. Для того чтобы была возможность открывать на полный экран видео в блоге, в коде нужно добавлять параметр allowfullscreen="" , примерный вид для кода видео должен быть примерно такой:
    [iframe allowfullscreen="" frameborder="0" height="549" src="http://www.youtube.com/embed/mGb-ppZDE8c" width="700"][/iframe]

    Вместо квадратных скобок только угловые надо.

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

    ОтветитьУдалить
  2. Работаю над инструкцией по Snagit и немножко затягивается, потому что программа-комбайн ))) (всмысле многое умеет).

    Видео отснял уже больше 14 минут, может в 15 уложусь а может и немного больше будет :)

    Так вот, о фишке. Я за короткие , но чёткие и понятные видеоинструкции, но тут другой случай, возможностей очень много. То или цельное обзорное и длинное видео или разбивать. Для пробы пока цельное делаю, а тут ещё фишка одна пришла, что делать при таких раскладах.

    Если видео получается длинное, можно выкладывать видео целиком + добавлять кликабельные ссылки на этот ролик на ютубе с перемоткой (он сейчас такое умеет!), для примера видеоинструкция по Cool Reader начиная с 60 секунды: http://www.youtube.com/watch?v=mGb-ppZDE8c&feature=youtu.be&t=60s

    Мыслей и задач много, постараюсь эту фишку не забыть описать подробнее в следующих экскурсиях на кухню Tigrik.org

    ОтветитьУдалить
  3. Коды по видео, которые добавлял в блог раньше, однозначно надо будет вставить в новой редакции, так как со старым кодом не только в полный экран не раскрывается, а кроме этого также не отображается кнопка Share в правом верхнем углу, а я только за то чтобы делится :)

    ОтветитьУдалить
  4. Нашёл интересную инфу на ютубе о том, как можно вставлять активные ссылки в видео. Рекламные ссылки, встроенные в видео мне претят, но вот вставить содержание видео с кликабельными ссылками (которые перебрасывают вас к нужной секунде видео) это уже интересно.
    Может ещё кого инфа заинтересует:
    Создание и изменение аннотаций
    Подробные советы по использованию аннотаций

    ОтветитьУдалить
  5. Пока не всё в этой фишке нравится, надо будет покрутить, подумать. Но недостатки уже углядел в ней :)

    ОтветитьУдалить
  6. Нашёл немного инфы про HTML5-плееры, которая может потом и пригодится:
    Сравнение видеоплееров на HTML5
    LeanbackPlayer

    ОтветитьУдалить
  7. Разобрался с быстрой конвертацией MP4 в WebM в отличном качестве, потом покажу в одном из экскурсов на кухню.

    Буду делать оффлайн-версии для всех уже созданных инструкций ( 1) pdf с картинками и ссылками; 2) отдельно видео, залитое на mediafire; 3) html со ссылками, картинками и встроенным видео в формате HTML5 - читается последними версиями браузеров FireFox, Opera и Google Chrome).

    Появился кандидат на коммерческое сотрудничество, правда не исключено что из-за очень больших задержек с моей стороны сделаю от души, но бесплатно (продукт и сервис стоящий у них, мне самому очень понравилось, однозначно достоин всестороннего освещения :))) ! ).

    Оставайтесь с нами в эфире :-)

    ОтветитьУдалить
  8. Устал от того что постоянно отвлекают :) Особенно это имеет место быть по выходным, хоть бери и работай ночь на пролёт :)

    Основную задачу пока опять придётся отложить, наверное займусь ей ночью, если снова не усну :)

    Кстати, классный сервис по изучению английского языка - LinguaLeo , кто ещё не видел рекоммендую хотя бы ознакомится: http://lingualeo.ru/

    Потихоньку обновляю старые инструкции добавляя оффлайн-версии в html и pdf, пока вроде дошёл до инструкции по Jing (постепенно всё обновлю). Выкладывание инфы на других ресурсах строго приветствуется ))))

    ОтветитьУдалить