Заметки на полях (понедельник, 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 - размер файла терпимый, а также смотреть инструкцию можно как на широкоформатном, так и на неширокоформатном мониторе.

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





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

• Первый поход на кухню (Вы сейчас как раз здесь) -  подгон ширины отображаемого в блоге видео под ширину блога, пару слов об оформлении иллюстрированных инструкций и выборе параметров видео для видеоинструкций, а также несколько интересных философских вещей, связанных с создателем Amazon.com - Джеффом Бэзосом, командой 37 signals и политикой доставки счастья от Тони Шея:
  Заметки на полях. 
• Второй поход на кухню -  фишка по удобной записи видео с части экрана, удобный способ отслеживать комментарии в своём блоге с помощью читалки RSS, пару слов о многопоточной подаче информации, а также ссылка на один необычный сайт с приятной и мелодичной музыкой:
  3 фишки и один интересный сайт.
• Третий поход на кухню -  отличная фишка по горизонтальной и вертикальной склейке фотографий, которая в самый раз подходит для создания коллажей, а также помогает решать некоторые другие задачи:
  XnView - удобная программа для создания коллажей и панорамной склейки фотографий.
• Четвёртый поход на кухню -  цветовое решение в стиле RGB - простое решение как залог успеха, понятность и наглядность видеоинструкций при правильном выборе формы и цвета для отображения левого и правого клика мышки, а также благодарность разработчикам PDF XChange Viewer за шикарный подарок:
  Благодарности, пару слов о погоде и краткое описание фишки "Светофор".
• Пятый поход на кухню -  о муках выбора нового стиля для блога, использование фишки "фломастер", а также пару слов об аккуратной склейке блока видеороликов в одну видеоинструкцию:
  Новый стиль для блога и некоторые технические нюансы.

 

 

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

• PDF с картинками и активными ссылками:
  https://www.dropbox.com/s/2304naqb1fpsqr9/Tigrik.org_kuhnya1.pdf
  Прямая ссылка
  Размер: 409 Кб
  MD5: 45E32AC707281429C101C624D657825A
• HTML-версия в архиве:
  https://www.dropbox.com/s/96znqua6knceujf/Tigrik.org%20-%20Kuhnya1.rar
  Прямая ссылка
  Размер: 165 Кб
  MD5: F10FAB5007DB96111D5E2B2366ECE443

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

Источник - Блог полезных и интересных инструкций Tigrik.org