понедельник, 1 августа 2011 г.

Заметки на полях

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



Кухня, или взгляд за кулисы

Отображение видео с Youtube по всей ширине блога.
Хотел поделиться инфой о том, как настроить отображение видео с youtube, используя всю доступную ширину вашего блога. Добавив нужное вам видео с youtube (кнопка Вставить видеоролик -) с Youtube -) ввести в поле поиска название ролика, или прямую ссылку на него, кликнуть на нужный ролик из списка и нажать на кнопку Выбрать), вам нужно будет переключиться на режим просмотра исходного кода вашего сообщения и изменить параметры, отвечающие за ширину и высоту видео для только что добавленного ролика.


Да, забыл отметить, что рекомендации эти касаются работы с блогами на blogspot.com, с блогами на wordpress я не экспериментировал, но примерные идеи, которые предлагаю здесь, могут сослужить пользу и там :)
После добавления видео с youtube, вам нужно перейти в режим исходного кода сообщения (Для перехода в режим кода, нажмите кнопку Изменить HTML, которая находится прямо над панелью визуального редактора. Для возвращения в режим предпросмотра, в котором, при редактировании новой записи, отображается форматирование текста, вставленные изображения и видео, нужно будет нажать кнопку Создать, которая тоже находится над панелью визуального редактора). Нажав кнопку Изменить HTML, вам нужно изменить параметры только что добавленного видеоролика с youtube:


Параметры, которые нужно менять, я обвел рамочками (изначальные цифры там были другие, выше я привел код видеоролика, вставленного в блог, из моей инструкции Как блокировать надоедливые баннеры в FireFox, Opera и Google Chrome). Для того, чтобы во вставленном вами в блог ролике с Youtube сверху и снизу не было черных полос (таких, какие вы можете наблюдать при просмотре широкоформатного видео на неширокоформатном мониторе), нужно указывать значения параметров height и width, которые я отметил (высота и ширина), выбирая их с учетом пропорции изначальных размеров видео (отношение длины к ширине изначального видео, и уменьшенного, которое вы вставите себе в блог, должны совпадать). Узнать отношение сторон видео с youtube можно, используя программу FastStone Capture, которую описывал здесь (кнопка здесь кликабельная :) , чтобы понять, как это сделать, достаточно почитать немного инфы вначале инструкции и посмотреть на вторую картинку), выделяете область, соответствующую видео (не затрагивая темные полосы сверху и снизу или слева и справа) и смотрите на разрешение:


Далее, подбирать разрешение вставленного видео вы будете, опираясь на ширину, доступную в поле записи блога. Ширину блога вы также можете подсмотреть, используя программу FastStone Capture. Дальше на примере этого видео, покажу, как посчитать значения width и height, которые вам нужно будет вставить, в height (высоте) нужно будет учесть поправку на нижнюю панель управления проигрывателя youtube , которая 25 пикселов (height=высота согласно пропорции+25).

Таким образом, по пропорции для моего случая: 480/360=Ваша ширина/Высота согласно пропорции; Высота=Ваша ширина*360/480
(тут Ваша ширина - ширина, которую вы выбрали для видео, значок / означает поделить).

В моем случае для ширины подходит 700 пикселов (идеально помещается в записи моего блога и не вылазит за рамки), таким образом, Высота=700*0.75=525, учитывая поправку: height=525+25=550, width соответствует ширине: width=700

Таким образом, если записать в общем виде, параметры width и height для видео с произвольным разрешением:

height=(Высота исходного видео/Ширина исходного видео)*Ваша ширина +25
width=Ваша ширина.
Где / - операция деления, Ваша ширина - любая выбранная вами ширина, которая не превышает допустимую ширину для записи в блоге.

Парочка коротких кухонных приемов:
  • Стрелочки в инструкциях, по возможности, не должны пересекаться.
  • Видео для видеоинструкций лучше делать в разрешении 1024*768 - размер файла терпимый, а также смотреть инструкцию можно как на широкоформатном, так и на неширокоформатном мониторе.
Интересные вещи в сети интернет

Читал пару любопытных книг на тему развития своего дела, оригинальные фишки предложенные авторами весьма интересные :)
Первая книга - Rework, написали ее ребята, которые ведут свое дело не шаблонно, плюют на устоявшиеся стереотипы, делают свое дело классно, не тратят свои деньги на рекламу, делают упор на качестве, эффективности и простоте, а не на размерах офисов и количестве сотрудников. В общем мысли предложенные в книге весьма здравые, всем рекомендую к прочтению :)
найти книгу можно в гугле.
Сайт создателей книги: http://37signals.com/
А еще у них любопытный и интересный блог, в котором они охотно делятся своими находками и интересными идеями с пользователями своих программных продуктов:

Смотрел там список руководства на их сайте, и нашел знакомую фамилию - Jeff Bezos - талантливый и очень сообразительный человек, основавший громадный интернет магазин www.amazon.com , пару видео с его участием выложу ниже (с параметрами width=700, height=550 :) ), также хотел отметить участие в проекте 37signals программиста, написавшего очень важный в мире интернета opensource продукт Ruby on Rails - David Heinemeier Hansson.

Видео с участием Jeff Bezos:


Во втором видео, Jeff Bezos рассказывает о магазине www.zappos.com, один из создателей которого - Tony Hsieh, человек с сильной жизненной позицией, написавший книжку "Доставляя счастье". Эта книжка мне тоже понравилась, и некоторые идеи возьму себе на заметку, а вот что о ней говорит сам автор:


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

Оффлайн-версию этого похода на кухню Tigrik.org 
качаем здесь:

Как проверить MD5 с помощью HashTab читаем здесь:
Работаем с программой HashTab!

2 комментария:

  1. Добавил ссылки на скачивание оффлайн версии этого набора фишек. Также подбросил ссылок на другие темы, связанные с созданием инструкций в рамках проекта Tigrik.org .

    ОтветитьУдалить
  2. Добавил ещё одну инструкцию на тему персональных фишек:
    Создание коллажа из кадров видеоклипа в Windows

    Клип, по мотивам которого создавал коллажи - просто загляденье!!! Всем рекомендую, бодро, весело, солнечно и очень ярко:
    Флэшмоб по-русски (Новосибирск, 2012)

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