January 1st, 2012

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



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

Часть II - Инспектор объектов. Делаем баннер 
Часть III - Анимированое меню
El Murid

Весело, весело встретим Новый год...

Наблюдатели ЛАГ в Хомсе
Новогодние праздники сирийская оппозиция отмечала как водится, с карандашом, блокнотом и видеокамерой в руках. С видеокамерой, правда, периодически случаются проколы - в блоге Анхар Кочневой anhar есть такая интересная запись про то, как снимают Голливуд на сирийских улицах. Собственно, ничего нового - такие же приёмчики использовали и в Ливии, и в Тунисе, и в Египте. Глядишь, и у нас римейк скоро снимут - уж тем более, у нас-то маститых режиссеров, мастеров культуры и вообще неполживых противников кровавого режима поболе будет. Collapse )
El Murid

Весело, весело встретим Новый год…

Наблюдатели ЛАГ в Хомсе

Ново­годние празд­ники сирий­ская оппо­зиция отме­чала как водится, с каран­дашом, блок­нотом и видео­ка­мерой в руках. С видео­ка­мерой, правда, пери­о­ди­чески слу­ча­ются про­колы — в блоге Анхар Коч­невой anhar есть такая инте­ресная запись про то, как сни­мают Гол­ливуд на сирий­ских улицах. Соб­ственно, ничего нового — такие же при­ём­чики исполь­зо­вали и в Ливии, и в Тунисе, и в Египте. Гля­дишь, и у нас римейк скоро снимут — уж тем более, у нас-то маститых режис­серов, мастеров куль­туры и вообще непол­живых про­тив­ников кро­ва­вого режима поболе будет. Collapse )

Запись опубликована . You can comment here or there.

El Murid

Откровения аналитиков СтратФора

Ресурс "Война и Мир" перевел в конце декабря крайне интересный материал Скотта Стюарта из STRATFOR "Сирия: Оценка иностранной интервенции". Тут интересно вообще всё.

Во-первых, интересен источник. СтратФор - это элита западных частных военных компаний. Это частная разведка, аналитический центр и центр стратегических исследований - не чета тем грантососам с громкими названиями у нас в Москве, в которых присутствуют слова "стратегия" или "исследования". Это весьма серьёзная контора, основанная в 96 году американским политологом Фридманом, который такой же политолог, как я - морской тюлень. СтратФор называют теневым ЦРУ и прибегают к его услугам тогда, когда уже ну совсем невместно использовать госструктуры.

Скотт Стюарт - тоже весьма примечательная личность. Он - специалист по Ближнему Востоку. Отметился рядом весьма интересных материалов и про нашу страну, в частности, анализом ситуации на Кавказе и возможных перспективах её развития.Collapse )
El Murid

Откро­вения ана­ли­тиков СтратФора

Ресурс “Война и Мир” перевел в конце декабря крайне инте­ресный мате­риал Скотта Стю­арта из STRATFORСирия: Оценка ино­странной интер­венции”. Тут инте­ресно вообще всё.

Во-первых, инте­ресен источник. СтратФор — это элита западных частных военных ком­паний. Это частная раз­ведка, ана­ли­ти­че­ский центр и центр стра­те­ги­че­ских иссле­до­ваний — не чета тем гран­то­сосам с гром­кими назва­ниями у нас в Москве, в которых при­сут­ствуют слова “стра­тегия” или “иссле­до­вания”. Это весьма серьёзная кон­тора, осно­ванная в 96 году аме­ри­кан­ским поли­то­логом Фрид­маном, который такой же поли­толог, как я — мор­ской тюлень. СтратФор назы­вают теневым ЦРУ и при­бе­гают к его услугам тогда, когда уже ну совсем невместно исполь­зо­вать госструктуры.

Скотт Стюарт — тоже весьма при­ме­ча­тельная лич­ность. Он — спе­ци­а­лист по Ближ­нему Востоку. Отме­тился рядом весьма инте­ресных мате­ри­алов и про нашу страну, в част­ности, ана­лизом ситу­ации на Кав­казе и воз­можных пер­спек­тивах её развития.Collapse )

Запись опубликована . You can comment here or there.

El Murid

Инспектор объектов. Делаем баннер

Часть I - Дизайн в ЖЖ. Вводная. Адаптивный дизайн 
Часть III - Анимированое меню

Еще раз повторюсь. Смысл постов в том, что не все дизайнеры. Люди зачастую пользуются ужасным дизайном просто потому, что у них нет выбора. Собственно для того и создана возможность применения своего уникального дизайна к теме. Да и для разработчиков нет смысла особо стараться. Главное что написан функционал. Каждый имеет возможность все переделать для себя. Вскрытие особых секретов не подразумевается. Камрады дизайнеры могут спокойно проходить мимо.

Теперь будем выпрямлять вот эту кракозябру.



Рассмотрим тему, созданную для всеобщего пользования. Рабочий пример http://tastytheme.livejournal.com/



В ходе ковыряния в Опере, да и чтобы особо не заморачиваться, я ее назвал Dragonfly  и создал ей логотип. :))) Далее совершенно отвлеченно порыбачил в сети на предмет графики. Вот что нарыбачил.

     

Фотошоп для меня обычное дело, поэтому я немного покреативил и создал баннер и логотип. Листочки какао остались у меня от прошлого дизайна http://six.strings4guitar.com/ Там все заброшено из за ненужности. Функционал темы устарел и под новой версией Вордпресс перестал работать. Я их просто адаптировал к новой идее.





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

Начнем с рассмотрения основных объектов макета. Подготавливаем себе открытое окно, для помещения туда CSS
кода. Заходим в своем аккоунте в раздел меню - Журнал ->Стиль журнала. Справа вверху -> Настройте свой стиль. Слева выбираем вкладку Custom CSS.  Справа выбираем опцию - Use layout's stylesheet(s) - в значение - YES.







В пустом окне Custom Stylesheet собираемся немного пошаманить. Открываем дополнительную вкладку с адресом своего журнала для мониторинга результата. Я открываю в Opera. 

Основная схема макета (Делаем баннер)

Наводим курсор мыши на заголовок и правой кнопкой вызываем меню. Выбираем - Inspect element. Загружается инспектор объектов и мы видим такую картину. Сверху помеченный нами объект. По левой стороне содержимое кода страницы. Справа CSS код объекта.

Collapse )
El Murid

Анимированое меню

Далее рассмотрим область верхнего меню темы и слегка его анимируем. Анимацию я вставлю в этот блог, что бы далеко не надо было ходить. В разных браузерах его поведение будет разным. В Chrome и FireFox оно движется, в Opera только подсвечивается шрифт. Остальные не проверял. Оригинал http://tastytheme.livejournal.com



Наводим мышь на свободную область меню, в стороне от активного текста меню и определяем название класса к которому принадлежит меню. В данном случае - .header-menu. Так как меню относится к обыкновенному строчному элементу, то высота его определяется высотой строки - line-height.


Collapse )
El Murid

Основной макет. Подложка


Рабочий пример http://tastytheme.livejournal.com/

Основной фон  

Фон макета заливаем однородной текстурой. Указываем параметр  fixed, дающий при прокрутке плывущий еффект верхних слоев поста и боковой панели. Кому не нравиться - убираем параметр. Указываем цвет заливки под текстурой, для варианта просмотра страницы в браузере, при отключенной графике. Указываем основной шрифт и его размер для макета.

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
background: url(http://pics.livejournal.com/tastytheme/pic/00030c9f) fixed #8f9595;
}

Верхняя часть. Заголовок.

Состоит из двух классов объектов .bodyheaderblock и .body-title

Здесь создаем некое подобие маркизы. В фотошопе делаем графический елемент в виде зубца, для заливки по горизонтали с прозрачным фоном.  Так как цвет заливки нам не нужен, делаем фон прозрачным. Устанавливаем размер верхней границы в значение 0, иначе у нас останется ненужная верхняя полоска и делаем на всякий случай прозрачной. Делаем отступы, также равными 0. Заливаем по горизонтали repeat-x готовым элементом зубца, с координатами  0% 0% выровненными по верхней границе класса. Получаем ровную заливку, плотно прилегающую к полосе меню.


.bodyheaderblock {
border-top: 0px solid transparent;
background-color: transparent;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background: url("http://pics.livejournal.com/tastytheme/pic/0003q4hz") 0% 0% repeat-x;
}

.body-title

Теперь мне нужно сместить заголовок на 130 пикселей  вправо с такими параметрами позиционирования - padding: 18px 0px 6px 130px;  и перед ним прилепить иконку.   Далее параметрами координат позиционирую иконку к шрифту - background-position: 100px 19px; Делаю шрифт вдавленным в фон - color: #666666; и -text-shadow: 1px 1px #D6D6D6; 

.body-title {
background: transparent;
background-image: url("http://pics.livejournal.com/tastytheme/pic/0003b976") ;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: 100px 19px;
font-family: ;
font-size: 12px;
font-weight: normal;
color: #666666;
text-shadow: 1px 1px #D6D6D6;
text-align: left;
padding: 18px 0px 6px 130px;
}

.bodyblock

Теперь мне нужно установить границы макета слева и справа. Я даю им отступ от края монитора в 100 пикселей.
Сверху 10, снизу 20 пикселей padding: 10px 100px 20px 100px; Сверху отделяю тонкой серой линией - border-top: 1px solid #dddddd; Снизу заливаю по горизонтали вторую часть маркизы, вторым изображением зубца, перевернутым в фотошопе на 180 градусов.   background: url("http://pics.livejournal.com/tastytheme/pic/0003p8kx") 0% 100% repeat-x; Таким образом подготовлена подложка под область поста и боковой панели.

Мне не нравится когда шрифт в посте разливается от края до края, делая таким образом пост трудно читаемым. Во вторых пропадает эффект подложки и пространства. Вид становится более плоским. Поэтому даем объектам отступы по краям, тем более что их можно использовать дополнительно.

.bodyblock {
border-top: 1px solid #dddddd;
border-bottom: 0px solid #dddddd;
padding: 10px 100px 20px 100px;
background-color: transparent;
margin: 0px 0px 0px 0px;
background: url("http://pics.livejournal.com/tastytheme/pic/0003p8kx") 0% 100% repeat-x;
}

Нижняя часть. Подвал.

.pagefooterblock

Аналогично баннеру делаю изображение для подвала и на этом заканчиваю подготовку общего фона.

.pagefooterblock {
text-align: center;
padding-top: 6px;
padding-bottom: 0px;
background-color: #323232;
font-family: ;
font-size: 12px;
color: #777;
margin-top: 0px;
border-top: 0px solid #dddddd;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("http://pics.livejournal.com/tastytheme/pic/0003eryk");
height: 120px;
}



Далее будем разбираться с областью поста.

El Murid

Область поста

Часть IV - Основной макет. Подложка

Рабочий макет http://tastytheme.livejournal.com

Основной фон  

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


Collapse )

El Murid

Спецоперация

По прошествию месяца после парламентских выборов, после разгребания весьма впечатляющей кучи обычной грязи, брехни, вбросов и реальных фактов, можно приблизительно оценить проведенную в декабре спецоперацию. А то, что выборы были прикрытием проведения спецоперации, у меня лично сомнений уже не вызывает.

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

Напомню предысторию событий. Узловые моменты. 2010 год закончился очередной мутной и ниочём речью Медведева перед Федеральным собранием. Однако в этой тягомотной многословной белиберде было одно зерно, которое резко взбодрило элиту. Ликвидация госкорпораций. В принципе, госкорпорации - это вотчина клики, обсевшей Путина, и иначе как атаку на эту клику, воспринимать решение было решительно невозможно. Второй чувствительный удар по этой группировке был нанесен уже в 2011 году, когда Медведев потребовал устранения с хлебных и синекурных постов уже в госкорпорациях госчиновников высшего уровня. Опять же - адресат просматривался вполне явственно. Также стоит вспомнить знаковую поездку вице-президента Байдена в марте, очень странную пресс-конференцию Медведева в мае, которая оттягивалась недели три - после чего была проведена в совершенно идиотской манере и с полностью провальным содержанием.Collapse )