?

Log in

No account? Create an account
Эль Мюрид
Дизайн в ЖЖ. Вводная. Адаптивный дизайн 
1-янв-2012 12:01 am


Для тех, кому иногда становится скучно и не лень поковыряться в собственных настройках журнала, когда стандартный шаблон журнала надоел хуже горькой редьки и хочется его как-то разнообразить, могут попробовать себя в роли дизайнера. Иногда маленькие личные победы приводят к удовлетворительным результатам и приносят свои маленькие радости, как бы впоследствии они не выглядели криво и наивно.


Совершенно случайно зайдя в ЖЖ, я также совершенно случайно наткнулся на  блог Анатолия, когда ему исполнилась только-только от роду неделя. Через некоторое время я создал себе аккаунт в ЖЖ и решил посмотреть, что это за зверь и с чем его едят. Пересмотрев все опции и настройки на бесплатном аккаунте, мне стало скучно. Единственное что заинтересовало - то что у ЖЖ есть возможность дополнительного оформления, где собственно можно весь дизайн переиначить под себя. Написав письмо Анатолию и получив ответ, мы решили, что лучше избавиться от кислотного дизайна и попробовать создать что-то свое. Какое-то время поэкспериментировав с ЖЖ, стало понятно что нужно отказаться от излишеств его полосатости и кричащего цвета, так как формат журнала предполагает скорее формат новостного агенства, нежели личный блог, о том о сем. Через некоторое время мы избавились от ненужных  элементов и постарались сконцентрировать внимание читателя исключительно на  содержании. К сожалению, 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. Гарантии массовой поддержки нет никакой, ввиду занятости. Поэтому лучше научиться думать индивидуально.



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

Часть II - Инспектор объектов. Делаем баннер 
Часть III - Анимированое меню
Comments 
27-май-2012 05:04 pm
CSS
мне кажется более наглядным http://htmlbook.ru/css/margin (для примера наглядности)
и не все английским свободно владеют
27-май-2012 08:46 pm
Не вопрос. Каждый ищет свое. Я не в России живу. Посему мои ассоциации несколько иные. Здесь просто будем разбирать объекты для не умудренных опытом. Как то - для простых блоггеров. Надеюсь понятно? По нику лень пройтись и понять о чем речь?
28-май-2012 05:48 am
По нику не ходил в прошлый раз, но о чем речь внимательно прочитал, и кое-что понимаю в этой сфере.
28-май-2012 09:18 am
Отлично что понимаете. Здесь собственно идея в объяснении простым людям основных принципов, на отдельно взятом макете. Естественно можно найти кучу примеров, поэтому я дал ссылки. Не все понимают эту лабуду, да и запутаться можно. Поэтому объясняю просто на пальцах, в примерах, для тех кому это нужно.
2-июн-2012 07:44 am
Мсье ,я преклоняюсь перед вашим искусством выражать технические мысли. И хоть мне дизайн как бы и не нужен, но читать все равно буду ) .
2-июн-2012 08:35 am
Неожиданно конечно. :)) Тут, как бы, делается для разнообразия - штопъ народ не скучал и информация не была однообразной. А вдруг захотите какую нить кракозябру себе завести? Может и пригодится :)
28-май-2012 04:17 pm
Сходил по ссылке. Достаточно любопытно, но не интерактивно. Там все поставлено на коммерческую основу. Покупать бы точно не стал. Но как ресурс - вполне. Если у кого проблемы с английским на техническом уровне - развожу руками.
(Удалённый комментарий)
27-май-2012 08:39 pm
.какойто-класс Далее не понял вопроса
id в HTML, в CSS #блаблабла. Что конкретно? Не можете вызвать обращения к объекту из HTML ? Или хотите реализовать из внутреннего контейнера поста?

Что и где запрещено ???
Здесь работает.
(Удалённый комментарий)
27-май-2012 09:11 pm
Внутри поста обрезано. Допускается только в других местах. В ЖЖ хелп еще никто не отменял. Читайте о чем написано. Зайдите по адресу http://tastytheme.livejournal.com и поймите наконец, о чем идет речь. Я еще не успел ничего объяснить, но сыпятся претензии. Еще раз объясняю. Вот пример - вот ответ. Что применимо к ЖЖ. Конкретный пример и буду рассматривать. У вас есть свой сайт где нибудь кроме ЖЖ?
(Удалённый комментарий)
28-май-2012 08:55 am
Мне ваш сайт не нужен, просто хотел спросить, вы только с ЖЖ работаете или с отдельным сайтом на каком то моторе.

Html код вы можете свободно использовать в дополнительных окнах сайдбара.
Посмотрите на этом сайте. Здесь именно так и реализовано. Можно делать закладки и другие объекты, заявленные в коде CSS. Я постепенно буду рассматривать все вопросы, дойдем и до сайдбара. Можно вывернуться так. Делаете сайд бар максимально широким настолько, насколько вам это нужно и можете творить в этих окнах. Но тут уж зависит от специфики вашего сайта.
27-май-2012 09:03 pm
Давайте, лучше подумайте своей головой. Вот вам задача. Если задаешь к sidebar общие параметры класса, то как разделить идентификаторы объекта, чтобы к ним применять уникальные параметры? Они у вас на виду.
31-май-2012 03:09 am
ссылочка полезная, спасибо!
26-июн-2012 07:40 pm
Надо же! Я и надежду уже потерял увидеть в ЖЖ настоящего дизайнера. Все прочие, кого уже знаю, — самоделкины. Ваш блог — похоже, единственный с настоящим дизайном. Ну, мой, правда, тоже чего-то стоит. Правда я его только начал делать.

Нашёл Вас поиском по вопросу CSS3 в ЖЖ. Интересует, почему у меня колонки свойством column-count не выводятся. Не поддерживается CSS3? Но закругления углов и тени? Или это уже и во второй версии поддерживалось?

Надумал добавить к блогу ещё один, откуда убрать боковую колонку, всю навигацию... Попасть на конкретный материал можно только из основного блога по ссылке «Читать дальше...». Зачем это нужно? Большие статьи хотелось бы видеть во всю ширину страницы, с разноформатными, не как в основном журнале, картинками с компоновкой, как в журнале, колонками...

Я даже переход на другой аккаунт спрятал. Мой ник в испанской транслитерации — matriosquin. Сделал matriosquim (по-испански, конечный m читается как n). Так что уход со страницы заметят лишь самые внимательные.

Вот, задачка такая с этими самоорганизующимися колонками. Возможно это разрешить?

И уж заодно, если я перенесу журнал на свой хостинг, то смогу сделать и подвал с любой вёрсткой и наполнением? Вроде, так, но я хотел бы знать это заранее, прежде чем связываться с этим делом.

Макс

Edited at 2012-06-26 19:42 (UTC)
3-ноя-2012 07:32 pm
Классно.
Очень интересно.
И вид вашего ЖЖ классный.
14-июл-2013 12:08 pm - RSS-кнопочку
А вот если бы RSS-кнопочку слелали бы если бы, вот было бы счастье RSS-читателям...
RSS-читалка посещает сайт чаще даже, чем живой человек в поисках обновлений, т.е. на посещаемости наличие RSS-кнопки сказалось бы положительно.
19-янв-2014 06:31 pm
А что, тексты 2010го года не сохранились?
Пичалька...
19-янв-2014 06:35 pm
Все сохранилось. Сбоку в сайдбаре есть баннеры со ссылками на архивы журнала.
19-янв-2014 06:41 pm
О, спасибо! А то тут всплыла старая беседа, где я давал ссылку на ваше...
19-янв-2014 06:43 pm
Блин. Нажал на баннер "старый журнал", а мне в ответ
" Уважаемый абонент!

Данный ресурс заблокирован"

и прочая хрень (((
19-янв-2014 06:52 pm
Странно. Вот только нажал и зашел
19-янв-2014 06:59 pm
Через анонимайзер зашел нормально. Нашел-таки нужный текст 2010го года.

А со своего питерского айпи все равно ресурс заблокирован... Мож это мой ИнтерЗет так выпендривается? (((

19-янв-2014 07:04 pm
У меня Ростелеком. Тоже глючный, но вроде заходит.
24-янв-2014 11:25 pm
Подскажите, есть ли шанс человеку, который понятия не имеет что такое CSS, разобраться в данной теме и сделать то, что вы советуете, или без неких, обязательных, навыков я не справлюсь?
This page was loaded ноя 21 2019, 11:39 pm GMT.