Дизайн в ЖЖ. Вводная. Адаптивный дизайн
Оригинал взят у el_murid в Дизайн в ЖЖ. Вводная. Адаптивный дизайн
Для тех, кому иногда становится скучно и не лень поковыряться в собственных настройках журнала, когда стандартный шаблон журнала надоел хуже горькой редьки и хочется его как-то разнообразить, могут попробовать себя в роли дизайнера. Иногда маленькие личные победы приводят к удовлетворительным результатам и приносят свои маленькие радости, как бы впоследствии они не выглядели криво и наивно.
Совершенно случайно зайдя в ЖЖ, я также совершенно случайно наткнулся на блог Анатолия, когда ему исполнилась только-только от роду неделя. Через некоторое время я создал себе аккаунт в ЖЖ и решил посмотреть, что это за зверь и с чем его едят. Пересмотрев все опции и настройки на бесплатном аккаунте, мне стало скучно. Единственное что заинтересовало - то что у ЖЖ есть возможность дополнительного оформления, где собственно можно весь дизайн переиначить под себя. Написав письмо Анатолию и получив ответ, мы решили, что лучше избавиться от кислотного дизайна и попробовать создать что-то свое. Какое-то время поэкспериментировав с ЖЖ, стало понятно что нужно отказаться от излишеств его полосатости и кричащего цвета, так как формат журнала предполагает скорее формат новостного агенства, нежели личный блог, о том о сем. Через некоторое время мы избавились от ненужных элементов и постарались сконцентрировать внимание читателя исключительно на содержании. К сожалению, Java Script в ЖЖ не поддерживается и пришлось выворачиваться посредством CSS.
В основном тема будет касаться бесплатных аккаунтов. Различие платного и бесплатного аккаунта только в том, что в платном можно создавать собственные слои и применять их к дизайну дополнительно. Ну и остальные фишки, которые к теме не относятся. Это не особо актуально для большинства и поэтому будем рассматривать вопросы, доступные для всех.
Рекомендую обязательно ознакомиться для начала с этими русскоязычными ресурсами: yoksel и journals_covers. Там достаточно хорошо и подробно разжевана эта тема, материала которой может хватить многим, ну а я, чтобы не повторяться, попробую рассмотреть другие вопросы и возможности, применимые в Веб и адаптированые к ЖЖ.
Макет ЖЖ будет рассматриваться на основе темы Smooth Sailing. С остальными характеристиками и возможностями макетов можно ознакомиться по этой ссылке http://journals-covers.livejournal.com/57944.html#cutid1
Парочка советов
Если у вас есть определенное количество читателей, которые могут нервно отнестись к вашему перформансу, можно создать себе в ЖЖ второй аккаунт для черновой работы и затем результат понемногу переносить к себе. Либо завершить всю работу там и затем применить к основному аккаунту.
Вариант с Tumblr. Подписываетесь на аккаунт. Создаете свою пустую страницу с тестовым постом. Выбираете дизайн себе по душе и зайдя на страницу кода, бессовестно копируете CSS, применяя фрагменты кода к своим объектам.
Так же, любой (почти) понравившийся вам стиль объекта в сети, можно исследовать с помощью инспектора и скопировать его код для дальнейшей корректировки.
Что нужно для начала?
Для начала нужно научиться идентифицировать объекты классов в ЖЖ и описывать их свойства. Для этого я использую инспектор объектов DragonFly, встроенный в Opera, либо Firebug, который можно установить в виде add-on для FireFox и Firebug Lite для Chrome. Для того чтобы установить в Chrome, идем по ссылке https://getfirebug.com/releases/lite/chrome/. Для Firefox http://getfirebug.com/swarms/Firefox-11.0/
Далее, правой кнопкой мыши над нужной областью, вызываем меню и выбираем - Inspect element, Inspect with Firebug Lite. Каждому по вкусу. Смотря кто чем пользуется. Инспектор объектов в Opera для меня более предпочтителен, так как он более развит и интерактивен в отличии от Firebug, но не суть. Сейчас Firebug обновился, но как говорится - дело вкуса. В принципе приходится пользоваться всеми, чтобы быть в курсе обновлений. Здесь я буду пользоваться инспектором Opera - DragonFly. В остальных, в принципе все идентично.
Текстовый редактор NotePad ++ для редактирования HTML и CSS разметки, незаменимый помощник програмистов.
При сохранении фрагментов кода в нужном формате, подсвечивается синтаксис и в больших фрагментах оного легче отделять нужные елементы. HTML код сохраняем как файл .html, CSS код сохраняем как файл .css
Иногда короткие фрагменты можно не сохранять, а просто править, но тогда подсветка работать не будет, так как редактор не определяет принадлежности кода к какому либо формату и работает как с простым текстовым файлом.
Чем он примечателен? Тем что тихо сидит в трэе, не грузит процессор и все незакрытые сохраненные файлы, при перезапуске системы открывает как и было раньше. Остальные его достоинства нам здесь ненужны.
Нужен какой нибудь онлайн генератор градиентов и color picker. В сети их полно. Выбираем по вкусу. Можно пользоваться несколькими. Я использую ColorZilla. Встраивается в Chrome и Firefox как add-on. Можно не встраивать внутрь браузера как расширение и попросту пользоваться онлайн версией. Или что нибудь попроще для начала. Что то вроде CSS3 PIE. В ColorZilla приходится стирать фрагменты кода, которые в ЖЖ работать не будут и будут заваливать весь стиль журнала в версию по умолчанию.
Для облегчения жизни, хорошо бы иметь какой нибудь WYSIWYG HTML редактор. Но можно обойтись и без него. Тем кому это интересно, найдет сам. Я лично пользуюсь DreamWeaver.
Хороший интерактивный справочник по CSS http://www.w3schools.com/cssref/default.asp
P.S. Я сначала хотел закрыть комментарии к постам по этой теме, но, подумав, изменил мнение, так как, совершенно нечаянно можно самому наделать ошибок в коде и затем, без обратной связи, люди будут биться головой о стену и недоумевать - почему что-то не получается? Время от времени посты будут мониториться. Так же можно сбрасывать вопросы на почту elmurid.press@gmail.com. Гарантии массовой поддержки нет никакой, ввиду занятости. Поэтому лучше научиться думать индивидуально.
На этом подготовка закончена. Можно приступать к раскуриванию трубки и начинать креативить.
Для тех, кому иногда становится скучно и не лень поковыряться в собственных настройках журнала, когда стандартный шаблон журнала надоел хуже горькой редьки и хочется его как-то разнообразить, могут попробовать себя в роли дизайнера. Иногда маленькие личные победы приводят к удовлетворительным результатам и приносят свои маленькие радости, как бы впоследствии они не выглядели криво и наивно.
Совершенно случайно зайдя в ЖЖ, я также совершенно случайно наткнулся на блог Анатолия, когда ему исполнилась только-только от роду неделя. Через некоторое время я создал себе аккаунт в ЖЖ и решил посмотреть, что это за зверь и с чем его едят. Пересмотрев все опции и настройки на бесплатном аккаунте, мне стало скучно. Единственное что заинтересовало - то что у ЖЖ есть возможность дополнительного оформления, где собственно можно весь дизайн переиначить под себя. Написав письмо Анатолию и получив ответ, мы решили, что лучше избавиться от кислотного дизайна и попробовать создать что-то свое. Какое-то время поэкспериментировав с ЖЖ, стало понятно что нужно отказаться от излишеств его полосатости и кричащего цвета, так как формат журнала предполагает скорее формат новостного агенства, нежели личный блог, о том о сем. Через некоторое время мы избавились от ненужных элементов и постарались сконцентрировать внимание читателя исключительно на содержании. К сожалению, Java Script в ЖЖ не поддерживается и пришлось выворачиваться посредством CSS.
В основном тема будет касаться бесплатных аккаунтов. Различие платного и бесплатного аккаунта только в том, что в платном можно создавать собственные слои и применять их к дизайну дополнительно. Ну и остальные фишки, которые к теме не относятся. Это не особо актуально для большинства и поэтому будем рассматривать вопросы, доступные для всех.
Рекомендую обязательно ознакомиться для начала с этими русскоязычными ресурсами: yoksel и journals_covers. Там достаточно хорошо и подробно разжевана эта тема, материала которой может хватить многим, ну а я, чтобы не повторяться, попробую рассмотреть другие вопросы и возможности, применимые в Веб и адаптированые к ЖЖ.
Макет ЖЖ будет рассматриваться на основе темы Smooth Sailing. С остальными характеристиками и возможностями макетов можно ознакомиться по этой ссылке http://journals-covers.livejournal.com/57944.html#cutid1
Парочка советов
Если у вас есть определенное количество читателей, которые могут нервно отнестись к вашему перформансу, можно создать себе в ЖЖ второй аккаунт для черновой работы и затем результат понемногу переносить к себе. Либо завершить всю работу там и затем применить к основному аккаунту.
Вариант с Tumblr. Подписываетесь на аккаунт. Создаете свою пустую страницу с тестовым постом. Выбираете дизайн себе по душе и зайдя на страницу кода, бессовестно копируете CSS, применяя фрагменты кода к своим объектам.
Так же, любой (почти) понравившийся вам стиль объекта в сети, можно исследовать с помощью инспектора и скопировать его код для дальнейшей корректировки.
Что нужно для начала?
Для начала нужно научиться идентифицировать объекты классов в ЖЖ и описывать их свойства. Для этого я использую инспектор объектов DragonFly, встроенный в Opera, либо Firebug, который можно установить в виде add-on для FireFox и Firebug Lite для Chrome. Для того чтобы установить в Chrome, идем по ссылке https://getfirebug.com/releases/lite/chrome/. Для Firefox http://getfirebug.com/swarms/Firefox-11.0/
Далее, правой кнопкой мыши над нужной областью, вызываем меню и выбираем - Inspect element, Inspect with Firebug Lite. Каждому по вкусу. Смотря кто чем пользуется. Инспектор объектов в Opera для меня более предпочтителен, так как он более развит и интерактивен в отличии от Firebug, но не суть. Сейчас Firebug обновился, но как говорится - дело вкуса. В принципе приходится пользоваться всеми, чтобы быть в курсе обновлений. Здесь я буду пользоваться инспектором Opera - DragonFly. В остальных, в принципе все идентично.
Текстовый редактор NotePad ++ для редактирования HTML и CSS разметки, незаменимый помощник програмистов.
При сохранении фрагментов кода в нужном формате, подсвечивается синтаксис и в больших фрагментах оного легче отделять нужные елементы. HTML код сохраняем как файл .html, CSS код сохраняем как файл .css
Иногда короткие фрагменты можно не сохранять, а просто править, но тогда подсветка работать не будет, так как редактор не определяет принадлежности кода к какому либо формату и работает как с простым текстовым файлом.
Чем он примечателен? Тем что тихо сидит в трэе, не грузит процессор и все незакрытые сохраненные файлы, при перезапуске системы открывает как и было раньше. Остальные его достоинства нам здесь ненужны.
Нужен какой нибудь онлайн генератор градиентов и color picker. В сети их полно. Выбираем по вкусу. Можно пользоваться несколькими. Я использую ColorZilla. Встраивается в Chrome и Firefox как add-on. Можно не встраивать внутрь браузера как расширение и попросту пользоваться онлайн версией. Или что нибудь попроще для начала. Что то вроде CSS3 PIE. В ColorZilla приходится стирать фрагменты кода, которые в ЖЖ работать не будут и будут заваливать весь стиль журнала в версию по умолчанию.
Для облегчения жизни, хорошо бы иметь какой нибудь WYSIWYG HTML редактор. Но можно обойтись и без него. Тем кому это интересно, найдет сам. Я лично пользуюсь DreamWeaver.
Хороший интерактивный справочник по CSS http://www.w3schools.com/cssref/default.asp
P.S. Я сначала хотел закрыть комментарии к постам по этой теме, но, подумав, изменил мнение, так как, совершенно нечаянно можно самому наделать ошибок в коде и затем, без обратной связи, люди будут биться головой о стену и недоумевать - почему что-то не получается? Время от времени посты будут мониториться. Так же можно сбрасывать вопросы на почту elmurid.press@gmail.com. Гарантии массовой поддержки нет никакой, ввиду занятости. Поэтому лучше научиться думать индивидуально.
На этом подготовка закончена. Можно приступать к раскуриванию трубки и начинать креативить.