Решил внести в блог немного разнообразия :-)
Кроме инструкций, которые стараюсь писать максимально доступным и понятным языком (не упуская при этом полезные и интересные детали освещаемой темы :) ), буду освещать некоторые нюансы создания инструкций и работы над этим блогом (метку назову "кухня", а саму рубрику "Кухня, или взгляд за кулисы"). Также, кроме основной тематики блога, решил рассказывать об интересных вещах в сети интернет (понимая под вещами - интересные сайты, книги, идеи, творения интересных личностей, в общем, все все, что придет в голову и покажется мне интересным). Начнем повествование :)
Отображение видео с 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=Ваша ширина.
Где / - операция деления, Ваша ширина - любая выбранная вами ширина, которая не превышает допустимую ширину для записи в блоге.
Парочка коротких кухонных приемов:
Во втором видео, Jeff Bezos рассказывает о магазине www.zappos.com, один из создателей которого - Tony Hsieh, человек с сильной жизненной позицией, написавший книжку "Доставляя счастье". Эта книжка мне тоже понравилась, и некоторые идеи возьму себе на заметку, а вот что о ней говорит сам автор:
Как вы уже заметили, кроме описания способов взаимодействия с разными удобными программками, также проект Tigrik.org предусматривает краткие экскурсы на кухню по созданию инструкций с иллюстрациями, а также видеоинструкций. На данный момент уже успел поделиться некоторыми персональными фишками, почитать о которых вы можете в темах:
Оффлайн-версию этого похода на кухню Tigrik.org
качаем здесь:
Как проверить MD5 с помощью HashTab читаем здесь:
Работаем с программой HashTab!
Кроме инструкций, которые стараюсь писать максимально доступным и понятным языком (не упуская при этом полезные и интересные детали освещаемой темы :) ), буду освещать некоторые нюансы создания инструкций и работы над этим блогом (метку назову "кухня", а саму рубрику "Кухня, или взгляд за кулисы"). Также, кроме основной тематики блога, решил рассказывать об интересных вещах в сети интернет (понимая под вещами - интересные сайты, книги, идеи, творения интересных личностей, в общем, все все, что придет в голову и покажется мне интересным). Начнем повествование :)
Кухня, или взгляд за кулисы
Отображение видео с 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, написали ее ребята, которые ведут свое дело не шаблонно, плюют на устоявшиеся стереотипы, делают свое дело классно, не тратят свои деньги на рекламу, делают упор на качестве, эффективности и простоте, а не на размерах офисов и количестве сотрудников. В общем мысли предложенные в книге весьма здравые, всем рекомендую к прочтению :)
Первая книга - 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 предусматривает краткие экскурсы на кухню по созданию инструкций с иллюстрациями, а также видеоинструкций. На данный момент уже успел поделиться некоторыми персональными фишками, почитать о которых вы можете в темах:
- Первый поход на кухню (вы сейчас как раз здесь) - подгон ширины отображаемого в блоге видео под ширину блога, пару слов об оформлении иллюстрированных инструкций и выборе параметров видео для видеоинструкций, а также несколько интересных философских вещей, связанных с создателем 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 .
ОтветитьУдалитьДобавил ещё одну инструкцию на тему персональных фишек:
ОтветитьУдалитьСоздание коллажа из кадров видеоклипа в Windows
Клип, по мотивам которого создавал коллажи - просто загляденье!!! Всем рекомендую, бодро, весело, солнечно и очень ярко:
Флэшмоб по-русски (Новосибирск, 2012)