Timofeev Oleg Vitalievich Тимофеев Олег Витальевич (timotv) wrote,
Timofeev Oleg Vitalievich Тимофеев Олег Витальевич
timotv

Дизайн в ЖЖ. Вводная. Адаптивный дизайн

Оригинал взят у 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
Иногда короткие фрагменты можно не сохранять, а просто править, но тогда подсветка работать не будет, так как редактор не определяет принадлежности кода к какому либо формату и работает как с простым текстовым файлом.
Чем он примечателен? Тем что тихо сидит в трэе, не грузит процессор и все незакрытые сохраненные файлы, при перезапуске системы открывает как и было раньше. Остальные его достоинства нам здесь ненужны.

Notepad++
Нужен какой нибудь онлайн генератор градиентов и 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. Гарантии массовой поддержки нет никакой, ввиду занятости. Поэтому лучше научиться думать индивидуально.



На этом подготовка закончена. Можно приступать к раскуриванию трубки и начинать креативить.

Tags: ! полезности для ЖЖ
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments