Category: it

Category was added automatically. Read all entries about "it".

Ищу хостинг

hosting[1]

Нужен виртуальный VDS под новостники и магазины. CentOS, англо/русскоязычный саппорт, настройка по ТЗ, партнёрка, мониторинг.

Старт: 2×2550, 4Гб ОЗУ, 500 Гб места. С прибавкой по мере надобности, по прозрачной тарифтной линейке.

Договор.

В жопу целовать не надо, но поводы для многолетнего сотрудничества видеть необходимо.

VDS / VPS в Москве

Я блядь ни хуя не понимаю — за каким хуем надо давать круглосуточный телефон, если всё равно ночью ни один блядь сотрудник не может ответить и на половину вопросов? Ну какой ещё можно выдумать способ добровольного угандошивания бизнесочка, чем этот?

Особенно, когда дело касается хостинга. Ведь ясно же: потенциальный клиентик спецом ночью прозванивать будет, чтобы наперёд узнать — как себя поведёт конторка в случае обычных технических затыков. Нет же: как будто спецом свой саппорт подговаривают молчать или отговариваться «звоните в будние дни».

Ладно, понеслась.

VDS / VPS* в Москве


Хостинг Ссыла Бесплатный конфиг SQL по требованию Бесплатный перенос сайта Бесплатный бэкап Круглосуточный саппорт по телефону Бесплатно предустановленное серверное п/о, вместе с панелью управления Заключение договора в Москве Указание в договоре процедуры расставания и рекламного пиздобольства Анлим трафик (бггг...) Нормирование простоя за какой-либо период Каменты
Логол http://www.logol.ru/ нет да нет да да да нет да нет Умоляют звонить в будни и уточнять всё у менеджеров.
Бегет http://beget.ru/ да да да да да да да да да Только аренда серверов, либо вирт. Вменяемые люди.
Фёрст ВДС http://firstvds.ru/ Клоуны и барыги: звонок менеджеру платный, ночью не отвечают.
Атлекс http://www.atlex.ru/ Нереальные ламерюги, клоуны и барыги: всё за бабки, что такое «простой» так и не врубились, договор жёстко по оферте.
Ахост http://ahost.eu/ Запредельные клоуны: телефон с кодом «498», но не могут уточнить — платный он или нет для звонящего; договора с физиками «на текущий момент не заключаются».
Фаст ВПС http://fastvps.ru/ Ламерюги: в субботу ночью только автоответчик.
Хостлайн http://hostline.ru/ нет нет да да нет да нет нет нет Чел ответил только на скайп, но всё равно ни хера сказать толком не смог. Ну то есть вообще. «Не знаю, не помню, при мне не было»... Бабки возвращают за некие десять дней и т.д.
Ай Эйч Си http://www.ihc.ru/ Хули врубать автоответчик «дождитель ответа» и не брать трубу по десять минут?
Инфобокс Клауд http://infoboxcloud.ru/ нет нет нет да нет нет нет да нет Барыги и ламерюги: трубу берут через раз, час работы 950 р, договор заключать только в Питере, договор жоозке, нормирование простоя «на усмотрение руководителя», ну и т.п.
Рег Ру https://www.reg.ru/ «Получить консультацию вы можете в рабочие дни, с девяти до восемнадцати»... бгггг
Рувэб http://ruweb.net/ «В настоящий момент абонент недоступен, а его почтовый ящик переполнен». Херасе. Такого бреда и не слышал никогда.
Селектэл http://selectel.ru/ нет нет нет да нет нет да да нет Администрирования серверов нет, даже за бабки. Возврата денег по дням нет, только за месяц. Школота.
Радиусхост http://www.radiushost.ru/ нет да да да да да нет да нет Запредельное хамло, на вопросы отвечают только по тикетам, банальные неполадки типа подвисалова PHP MyAdmin не могут исправить по двое суток, не отвечают на мыло.
Тру ВДС http://www.truevds.ru/ нет нет нет да да да да нет да Стрёмная фраза «мы не гарантируем нелимитированный трафик для сайтов, связанных с музыкой и фильмамми». То есть, сунул видеоролик к описанию товара в магазинчике — всё. Ну и вообще — барыги.
ВПС Вилле http://vpsville.ru/ Автоответчик и молчание.
Оверсан http://www.oversun.ru/ да нет нет да да да да да нет Есть стрёмные моменты, в числе которых неспособность сотрудника ответить по ценам. Отсылает к менеджерам. Но в целом, всё довольно прозрачно. Лишь бы и в договоре так же было, а то чел настаивает на тексте с сайта, как будто под меня договор составлять не будут.
Руцентр http://www.nic.ru/ нет нет да да да да нет нет нет Стрёмная контора, которую имеет смысл держать только про запас, чтобы перекантоваться между переездами. Часто валятся сервера, никаких отхождений от жётских установок. Но свои настройки довольно гибкие. Ставил у них без проблем, и Вордпресс, и Оупенкарт.


Камент например

Из сотни хостеров, в качестве потенциальных партнёров, навыбирал только рейтинговых. Похуй, что накрученных. Всех всё равно не прозвонишь, заебёшься. Да и выбирал с учётом опыта, отзывов на форумках, слухов и т.д. Так что, набор более-менее актуален. Народ на них ведётся, а я он и есть.

Изначально были отсеены буржуинские хостинги и всякие прочие, с доменными зонами типа «ua» или «lv». Как нищеброды без ответственности. Такой хостинг я бы взял лишь при наличии своего сына в его  руководстве. Что не исключено в реальной перспективе, только не здесь и не сейчас.

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

Особенно выбешивали и выпиливались вывешивающие московский номер телефона в качестве контактного, при расположении своих жоп в пердях Необъятной. Эти вообще порешать ничего никогда не смогут, кроме вопросов приёма бабла на свои счета. Каюсь: позвонил таким пару раз. Внезапно не ответили.

Вообще, в Москве с хостигом полная пизда. Где-то он есть, но из-за инертности работы правоохранителей по долбоёбам в этой области, хостингом тут занимается всякая хуета, только вчера накопившая на серверок с i7 и сумевшая въебать на него линя с апачем. Через месячишко после сборки, умник выкатывает свой шаблонный сайтик с тарифами своего мега-хостинга, со своей мобилочкой в качестве «контактных координат». И начинает впаривать вирты, вешая по 200 рыл клиентов на один сервак. Сайты валятся, ддосятся, дрочатся по-всякому, в итоге зарубаясь фильтрами яндексов и гуглов. Их, иногда встречающееся, предупреждение «Вы пытаетесь перейти на сайт, способный убить вашу веру во всё электронное» — это как раз про это.

Причины всеразличных пиписничеств со стороны монстров типа Мастерхоста или Руцентра — песня отдельная.  Иногда забавная, иногда смешная до истерик. Особенно когда в попадалове твои сайтики. Растёт уровень алкоголизации и онанизма, падает уровень веры во всё, даже в деньги. Спасают котики, но не всем разрешают завести. Невыносимо трудно жить.

Пока верстался

Мониторил хостинг-провов и заприметил у одного зачётный сайт. Вёрстка, функционал, всё на месте. Сайт делала, ранее мне неведомая, студия «Сибирикс». Бля это охуенно. Делают мега-зачётно. Просто порадовали, делюсь.

__
* VDS / VPS — два названия одного из вариантов размещения своего сайтика в интернетах. Тот случай, когда жабуля всё ещё поддавливает при мыслях о приобретении собственного хъюлетовского сервака на ксеонах и подключении его в путёвом дата-центре на толстый канал. Но ВДС/ВПС — это уже не начальный вариант «виртуальный хостинг». Хоть сам и является виртуальным сервером, но на нём делаешь что хочешь. Короче: чуть больше прав, но ещё не твоё.

Если кто по OpenCart рубится или свой интернет-магазин запланировал

Переводил тут для людей, мануал по установке готового дизайна (темы) на движок одного из распространённых интернет-магазинов. Покрутив демо-режим, понял: надо делиться.

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

Заодно, выкатываю конспект собственного опыта по убеждению прытких, но экономных бизнесов, в необходимости потратиться на кое-какие вещи, о существовании которых они прежде даже не того. Причём, убеждать приходилось не в необходимости самих трат, а в возможности объявляемых прайсов, для большинства неожиданно дешёвых.Collapse )

WordPress 3.0: форма комментирования

На основе статьи Отто «WordPress 3.0 Theme Tip: The Comment Form».

Было дело — поставил как-то на третий Вордпресс прикольную темку «min», выполненную в соответствии с моим любимым экстраминималом. Суперминималом. Минимал в себе прям. Да в таком, что автор решил — ну их на хуй, комментарии эти, минимал, так уж минимал. Вот реально: не было в теме комментирования. Пришлось вырубать их из стандартной «twentyeleven», поставляемой вместе с дистрибом, помогло. Заодно много узнал о новшествах третьей версии любимого CMS, в части упрощения работы с формами и деревом комментирования.

 

Что имеем в виду

Вот здоровый кусок кода, извлечённый мной из файла «comments.php» текущей темы. И цель у него одна — отобразить форму для написания комментария:

<?php if ('open' == $post->comment_status) : ?>
<div id="respond">
	<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>
		<div class="cancel-comment-reply">
			<small><?php cancel_comment_reply_link(); ?></small>
		</div>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
	<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>

<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>
	<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>

<?php else : ?>

	<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
	<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
	<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
	<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
	<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
	<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
	<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
	</p>
<?php do_action('comment_form', $post->ID); ?>
</form>

<?php endif; // If registration required and not logged in ?>
</div>
<?php endif; // if you delete this the sky will fall on your head ?>

Жуть, да? И это всё беспорядок в «if/else». Они обрабатывают кучу случаев: когда пользователя залогинен или нет, комментарии открыты или закрыты, нужна ли регистрация и так далее. Эта путаница приводит к трудностям при модификации и стилизации через CSS.

Поэтому я заменил весь код этой строкой:

<?php comment_form(); ?>

Посимпатичнее, да?

Функция «comment_form» является новшеством версии «3.0». Если в общем, то она стандартизирует формы комментариев. Что делает её привлекательной для разрабов плагинов. Теперь изменить форму комментирования легче благодаря захватам (hooks). Отто, например, уже изменил свои плагины «Simple Facebook Connect» и «Simple Twitter Connect». И если вы используете их в своей теме, то вам менять ничего не понадобится.

 

Настройка

Все блогеры любят настраивать. И «comments form» этому не препятствует. Однако можно немного запутаться.

Внутри функции «comments_form» находятся кое-какие полезные нам захваты-крючки (те самые hooks). Они-то и позволят поднастроить систему комментирования.

 

Первый захват — «comment_form_default_fields». Он позволяет изменять параметры трёх основных полей: «author», «email» и «website». Это фильтр и поэтому мы можем влиять на то, что через него пройдёт. Поля сохраняются в массив, который содержит html. Это на выходе. Выглядит так:

array(
	'author' => '<p class="comment-form-author">...',
	'email'  => '<p class="comment-form-email">...',
	'url'    => '<p class="comment-form-url">...'
);

Для простоты я сократил код. Он нам говорит о том, что можно изменить поля:

function my_fields($fields) {
$fields['new'] = '<p>Some new input field here</p>';
return $fields;
}
add_filter('comment_form_default_fields','my_fields');

Это позволяет нам добавить новое поле ввода, измененить уже существующие и так далее.

Но поля — не единственное из пригодного для модификаций. Так же, существует и фильтр «comment_form_defaults». Он получает массу того, что можно назвать окружением формы комментариев. Значения по умолчанию выглядят следующим образом:

$defaults = array(
	'fields'               => apply_filters( 'comment_form_default_fields', $fields ),
	'comment_field'        => '<p class="comment-form-comment">...',
	'must_log_in'          => '<p class="must-log-in">...',
	'logged_in_as'         => '<p class="logged-in-as">...',
	'comment_notes_before' => '<p class="comment-notes">...',
	'comment_notes_after'  => '<dl class="form-allowed-tags">...',
	'id_form'              => 'commentform',
	'id_submit'            => 'submit',
	'title_reply'          => __( 'Leave a Reply' ),
	'title_reply_to'       => __( 'Leave a Reply to %s' ),
	'cancel_reply_link'    => __( 'Cancel reply' ),
	'label_submit'         => __( 'Post Comment' ),
);

Здесь разные куски html, из которых состоит форма комментирования. Их значения можно менять по вкусу.

Но фильтры — это не единственный способ изменения. Функция «comment_form» может взять массив параметров в качестве первого параметра и они изменят форму. Так, если нам хочется баловства типа смены фразы «Leave a Reply», то можно сделать так:

<?php comment_form(array('title_reply'=>'Leave a Reply, Stupid')); ?>

Мы рассмотрели простой способ изменений без фильтров. Но есть и сложные операции, где фильтры станут очень полезными.

 

Расширение функционала

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

  • comment_form_before
  • comment_form_must_log_in_after
  • comment_form_top
  • comment_form_logged_in_after
  • comment_notes_before
  • comment_form_before_fields
  • comment_form_field_{$name} (фильтр в каждом поле, где {$name} — ключевое имя поля в массиве)
  • comment_form_after_fields
  • comment_form_field_comment (фильтр в настройках по умолчанию «comment_field», который содержит поле «textarea» для комментария)
  • comment_form (захват действия после «textarea», главным образом для обратной совместимости)
  • comment_form_after
  • comment_form_comments_closed

CSS и прочие возможности

Не забудем про стиль. У каждой части формы комментариев есть классы и идентификаторы. Взгляните на результирующий код HTML: там можно найти их все. Кроме того, не забыта и семантика, проставлены тэги «label», тэги для совместимости со стандартами ARIA и так далее. К тому же, текст доступен для перевода системой «core translation».

Так что у авторов тем есть масса причин начать пользоваться этим вместо громоздких форм. Ваши пользователи и авторы плагинов будут вам благодарны. И в самом деле — пришло время сделать WordPress заботящимся более о дизайне, нежели о своей конструкции.

ABSOLUTE vs RELATIVE на пальцах

Вся правда о разнице между абсолютным и относительным позиционированием в каскадных таблицах стилей, какой бы она не оказалась.

(Источник в Дизайнерской хибаре)


Я, как и автор статьи, много до чего добрался в CSS методом тыка, а ещё больше упустил. В особенности времени. И если бы сразу разобрался с принципами таких штук, как позиционирование и обтекание (positioning, float), то простые задачи действительно оказались бы простыми с самого начала. Для этого часто не хватает мест, где бы нам на пальцах объясняли коллизии и аномалии тех языков программирования, которым нас внезапно не обучают с детства. Ну не понятны они нам на интуитивном уровне, чо уж. Да и хэлпы не всегда прочитываются.

Если у вас та же история, то это ваше чтение на вечер.

Одним из откровений, посетивших меня по прочтении, стало понимание работы позиционирования, в особенности — разница между абсолютным и относительным (absolute, relative). Если дочитаете до конца, то будете точно знать — когда и как работает каждое. Здесь всё изложено на примерах списков и картинок.

Пять значений позиционирования

В CSS мы имеем список из пяти значений позиционирования div-ных блочных элементов:

  1. Static — статическое.
  2. Relative — относительное.
  3. Inherit — унаследованное.
  4. Fixed — фиксированное.
  5. Absolute — абсолютное.

Немного расчитстим дорогу, убрав inherit, просто потому, что это свойство позиционирования в дополнительном разборе не нуждается. Оно говорит элементу наследовать свойства родительского и всё. А в старых версиях Интернет Эксплорера и вовосе не поддерживается.

По умолчанию же, позиционирование выставляется в static. Любой элемент со статическим позиционированием будет там, где его ждут, будучи целиком и полностью зависимымм от структуры HTML.

Теперь fixed. Это такой якорь. Будучи оснащёнными этим значением, элементы останутся там, куда мы их поместим и не сдвинутся с места даже при прокрутке. Это часто используется для фиксации боковых панелей навигации, что конечно ужас для контента.

Так что, с тремя значениями позиционирования мы разобрались и можем считать их понятными. Просто потому, что их функционал не имеет, ни повторений, ни вариаций. Остаются интересности — absolute и relative. Взглянем на них по отдельности, а потом на то, как они могут быть использованы вместе. А ещё на то, какие интересные результаты это может дать.

Абсолютное позиционирование

Абсолютное позиционирование позволяет выдернуть объект из обычного потока документа и сунуть его в конкретную точку на странице. Создадим простой список — unordered list.

  • РАЗ
  • ДВА
  • ТРИ
  • ЧЕТЫРЕ
  • ПЯТЬ

Как мы знаем, его пункты уже в значении static, автоматом. Это значит то, что они текут себе в потоке других элементов документа там, куда помещены согласно его html-структуре. Теперь посмотрим — что случится, если одному из пунктов списка назначить absolute с нулевыми координатами.

>ul li:nth-child(4){
      position:absolute;
      left:0; top:0;}

Как видим, он выкидывается из общего потока и размещается в верхнем левом углу окна браузера. Заметим, что абсолютно позиционированному элементу всё равно — есть ли на том месте какой-нибудь другой или нет. Он всё равно будет помещёно согласно координатам.

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

Например, поместим тот самый четвёртный пункт списка с отступом в двадцать пикселей слева и двадцать сверху.

ul li:nth-child(4){
      position:absolute;
      left:20px; top:20px;}

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

ul li:nth-child(4){
      position:absolute;
      left:60px; top:80px;}

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

Относительное позиционирование

Относительное позиционирование работает так же, как и абсолютное — заданием объекту его положения координатами сверху, справа, снизу и слева. Разница лишь в отправной точке: в положении точки нулевых координат. Для абсолютного позиционирования ею был край экрана браузера. А для относительного?

Посмортим:

ul li:nth-child(4){
      position:relative;
      left:0px; top:0px;}

  • РАЗ
  • ДВА
  • ТРИ
  • ЧЕТЫРЕ
  • ПЯТЬ

Как так? Четвёртый пункт остался на своём месте в потоке элементов. Всё потому, что отправной точкой для его координат теперь служит не край окна браузера, а предшествующий ему эелемент в потоке. Он же — его родительский.

Теперь, если мы изменим положение нашего подопытного на двадцать пикселей, то наглядно оценим результат таких взаимоотношений.

ul li:nth-child(4){
      position:relative;
      left:20px; top:20px;}

Этот экстрим бывает полезен в реальных ситуациях. Например, когда мы не хотим выкидывать элемент, а желаем поиграться с его наложением на другие. При этом заметим: относительное позиционирование не заботится о нижних элементах так же, как и абсолютное. Но зато здесь они уже не занимают место выбывшего.

Собираем всё вместе

Теперь, когда мы усвоили базовые правила поведения HTML-элементов с абсолютным и относительным позиционированием через CSS, создадим полноценный и наглядный пример работы всего этого дела.

HTML

Начнём, создав HTML-блок класса «photo» и сразу сунем в него картинку 200×200 пикселей.

<div class="photo">
    <img src="http://domen.ru/photocartochka.jpeg" />
</div>

Теперь пора перейти к правке нашей CSS.

Базовая CSS

Сначала сменим фон на тёмный. Потом добавим фотке базовые стили: сделаем ей рамку и навешаем теней.

body { background: #69C; }

.photo {
border: 5px solid white;
height: 200px; width: 200px;
margin: 50px auto;

/*сложные, но клёвые тени*/
-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

Ух ты:

Ну, в общем — вот наша картинка. Ничего особенного, но полигон создан.

Привешиваем полоску скотча

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

Во-первых, для создания нашей плёнки, мы используем псевдо-элемент «до» — «:before». Его CSS-настройки скажут быть скотчу высотой в двадцать и длиной в сто пикселей. Да ещё с белым фоном, которому назначена непрозрачность в пятьдесят процентов, плёнка же. Ну и тенюшка, куда без неё.

.photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Да, тут плёнка так ничего не приклеит, кроме себя самой...

Очевидно то, что у нас проблемы с позиционированием псевдо-элемента. Попробуем исправить положение при помощи относительного позиционирования.

.photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

position:relative;
top:0px; left:0px;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Здорово. Какой эффект...

Как видим, проблему мы не решили. Ну, раз относительное позиционирование не сработало, то пойдём в противоположном направлении и попробуем абсолютное.

.photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

position:absolute;
top:0px; left:0px;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

А вот это уже ближе к теме.

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

Ну что ж, мы попробовали, и relative, и absolute для позиционирования. Но, ни то, ни другое, в качестве решения нас пока не устраивает.

Что дальше? А например то, что рассказ об абсолютном позиционировании элементов не полон. Видите ли, верхний левый угол экрана — это не всегда нулевая точка координат для абсолютно позиционированного элемента. Вместо этого, наш «абсолютный» псевдо-элемент сориентируется по первому нестатичному предку. В данном случае — по фотке.

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

.photo {
border: 5px solid white;
height: 200px;
width: 200px;
margin: 50px auto;
position:relative;

-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}


.photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
position:absolute;
top: 0px; left: 0px;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Итак, псевдо-эелемент с абсолютным позиционированием, выбрал точкой отсчёта своих координат верхний левый угол первого из нестатичных предков. А именно — угол фотки, как раз соответствующий этому описанию. Так что скотч будет всегда приклеен к этому углу, даже если изменится размер окна бразузера.

Теперь, когда мы нашли отправную точку, можно сдвинуть скотч к нужному нам месту, настроив левое и верхнее значение. Обратите внимание на отрицательное значение для верхней точки. Взглянув на результат, вы поймёте — зачем. Левое же значение задано так, чтобы отцентрировать ленту по горизонтали. Некто «Мгновенный калькулятор» наглядно покажет — как это рассчитывается.

.photo:before {
content: "";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
position:absolute;
top: -15px; left: 50px;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

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

А ещё загляните на «Тинкербин». По сути — это такой полезный генератор кодов различных эффектов.

Заключение

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

Первое — это то, что относительное позиционирование позволяет нстроиться относительно конкретной отправной точки. Второе — то, что настроиться можно и относительно первого нестатичного предка, а не только края окна браузера, как это происходит при значении «position: none». И наконец: ни относительное, ни абсолютное позиционирование объекта не влияет на статические и фиксированные оъекты, его окружающие. Вспомним из начала статьи: абсолютно отпозиционированные элементы удаляются из потока, а относительные занимают чужие позиции.

Примечания

  • Несвежие мобилы и таблетки плохо воспринимают параметр позиционирования «fixed». Вернее не воспринимают. Меню, которому он назначен, катаются по экрану вместе с контентом так, как если бы они были «static». С появлением iOS 5+ всё нормализовалось, но не раньше.
  • То, как всё здесь написанное воспринял, например, седьмой Internet Explorer — даже обсуждать не охота. Ещё меньше было желания думать о том, как хачить под него CSS. Поэтому для упыря я нашлёпал скринов всей красоты и закодил их в HTML конструкциями, типа:

    <!--[if IE]>
    Сюда тупо скрин для Эксплорера.
    <![endif]-->

    <![if !IE]>
    А сюда полноценный код для нормальных браузеров.
    <![endif]>


    Так что, если не лень накидать своих решений чисто по CSS, то каменты к вашим услугам. Спасём мир.

Ускорение Adobe CS при помощи Open GL. И видеокарты, работающие с Open GL в Aдобе.

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

Кстати, исчерпывающий материал по общему ускорению Фотошопа, методом закалки жабы через приобретение нового железа, дан Станиславом Васильевым ещё два года назад в статье «Ускорение Adobe Photoshop CS5: какие железки на что влияют». Материал актуален на сегодня, и останется таковым надолго.

Рекомендуя его к непременному прочтению перед покупкой компа «для графики», предлагаю нам всем мнение по возможностям адобовских продуктов именно с точки зрения отношения к ним железа. И наоборот. Без углубления в теорию, как мы любим: популярное объяснение, не выходя за пределы одного документа, — зачем нужен новый Адоб и что даст смена одной железки на другую.

В конце сытный перечень видеокарт, на которых ускорение через Open GL в Adobe CS работает как надо.

 

По материалам Adobe.com

 

 

 

Ускорение Adobe CS при помощи Open GL. И видеокарты, работающие с Open GL в Aдобе.

 

 

Как и на каких осях пашет Open GL

Ясный факт: Фотошоп CS5 и CS4 использует чип видеоадаптера (графический процессор или GPU), а центральный проц компа (CPU) нужен для ускорения некоторых функций. Когда конкретно Фотошоп использует GPU? Вот когда:

  • При поддержке OpenGL — старого проверенного стандарта, ускоряющего видеообработку при работе с большими или сложными изображениями, в том числе 3D.
  • Если имеем, по крайней мере, 256 МБ оперативной памяти.
  • Если имеем драйвер, который поддерживает OpenGL 2.0 и Shader Model 3.0, использующий GPU для рендеринга эффектов.


Если система отвечает этим требованиям, то Фотошоп автоматом выставит предпочтительные режимы отрисовки через OpenGL в операционках Mac OS, Windows, Vista и Windows 7. В 32-битной Windows XP можно включить опцию вручную, но если видеокарта его поддерживает.

Примечание: Ускорение GPU с поддержкой OpenGL может работать и на 64-битной Windows XP, но официально Фотошоп там их не поддерживает.

 



Ось



Поддержка и ограничения GPU

Mac OS PPC

Компы Power PC Macintosh не поддерживаются в CS5.

CS4 поддерживает OpenGL на маковских Power PC, если в нём установлена поддерживаемая карта. Следует убедиться в том, что «Enable OpenGL Drawing» активен в настройках Фотошопа.

CS4 не поддерживает функции «Advanced Drawing» в компах Power PC, даже если установлена подходящая видеокарта.

Mac OS Intel

Поддерживается, но «Advanced mode» недоступен в Mac OS X 10.5.x.

Windows XP 32 bit

Поддерживается, но «Enable OpenGL Drawing» по умолчанию не выбран.

Windows Vista, Windows 7 32 и 64 bit

Поддерживается.

Windows XP 64 bit

CS5 и CS4 вполне работают на 64-битной Windows XP, но Адоб это не поддерживает.

 

 

Что есть в CS4 и CS5 благодаря Open GL

 

Фичи GPU, добавленные в CS5.

  • Плавный зум или «Scrubby Zoom». Подробнее читайте в хэлпе по «Zoom continuously».
  • Постоянная палитра быстрого доступа к выбору цвета пипеткой.
  • Цветовой круг.
  • Динамическая смена размера и жёсткости кистей.
  • Предпросмотр типа щетины кистей.
  • Трёхсекционная разметка обрезки изображений, как в Лайтруме. В простонародье «по золотому сечению».
  • «Repoussé» — 3D выдавливание.
  • 3D Наложения. включая базовую плоскость, направляющие источников света, а так же рамки сеток и материалов mesh and materials.
    Ну-да. ну-да, Макс уже в панике...

 

Фичи CS4 CS5, касающиеся CPU.

  • Расширение зума: сглаживание на любом уровне.
  • Анимированный переход между шагами зума.
  • Плавное перемещение изображения инструментом «Рука».
  • Поворот холста.
  • Просмотр изображений в не квадратных пикселях.
  • Пиксельная сетка. Появляется при увеличении свыше пятисот процентов.
  • Движок Adobe Color «ACE» для использования палитр различными приложениями. Конвертирование цветов производится быстрее за счёт передачи обработки центральным видеопроцессору.
  • Предпросмотр кисти. Для активации выберите Edit > Preferences > Cursors > Brush Preview color. Теперь, с изменением параметров кисти, интерактивно отобразится результат.
  • Оси 3D.
  • Свет 3D.
  • Ускорение 3D.

 

Настройки GPU и OpenGL в CS5

  • Edit > Preferences. Убедитесь в том, что в панели «Performance», в настройках GPU, выбран «Enable OpenGL Drawing». Нажмите «Advanced Settings» и сделайте выбор:
    • Mode > Basic. Обеспечивает основные возможности OpenGL при экономии памяти.
    • Mode > Normal. Ест побольше памяти, но добавит жизни соответствию цветов, тонировке и смешиванию.
    • Mode > Advanced. Открывает доступ ко всем новым возможностям OpenGL.

    Примечания:
  • Режим «Advanced» требует Mac OS 10.6.x и не доступен в Mac OS X 10.5.x.
  • Vertical Sync уменьшает разрыв по синхронизации кадров, как и дисплей.
  • Anti-Alias Guides And Paths позволяет GPU сглаживать края направляющих и путей.


  • В панели «3D» определяются опции интерактивного рендеринга:
    • OpenGL. Включает аппаратное ускорение при работе с 3D-объектами.
    • Ray Tracer. Снижает производительность, но позволяет видеть тени, преломления и отражения у 3D-объектов.
      (де жа вю ёпта...)

 

Настройки GPU и OpenGL в CS4

  • Edit > Preferences > Панель «Performance» > Активировать «Enable OpenGL Drawing» в настройках GPU. Нажать «Advanced Settings» и настроить:
    • Vertical Sync. Так же, как и у дисплея, сокращает разрыв по синхронизации частоты кадров.
    • 3D Interaction Acceleration. Увеличивает скорость отзыва на клик при работе с 3D-формами. Если проблемы со скоростью более невыносимы и выражаются в затуплении картинки после отпускания кнопки, то выключите эту опцию.
    • Force Bilinear Interpolation. Опция просит GPU активировать высокоточное моделирование и сглаживание при использовании видеокарты, изначально не поддерживающей эти функции.

  • Опции Advanced Drawing и Debugging:
    • Use For Image Display. Удваивает использование оперативки при отрисовке больших картинок и 3D-моделей. Доступно для карт с пятьсот двенадцатью мегабайтами на борту и больше.
    • Compositing > None. Не отрисовывать изображения по шахматной доске. Уберёт сетку при большом зуме.
    • Compositing > Linear. Принцип линейного смешивания для оптимизации гаммы по принципу шахматной доски.
    • Compositing > Gamma Corrected. Использование правильного подхода коррекции по принципу шахматной доски.
    • Color Matching. Поможет при появлении артефактов.

 

 

Чего можно ожидать от Open GL на разных осях

 

Windows XP

Могут возникать сложности с перерисовкой при активном «Enable OpenGL Drawing» в CS5 или CS4. Особенно с тянущимися картинками, например с выделением перед вставкой.
Решение. Обновите драйвер видеокарты. Если не помогло, то работайте в оконном режиме Фотошопа. Ещё можно попробовать покрутить картинку, а потом нажать Эскейп для возврата в исходную позицию. Либо уменьшить картинку и восстановить таким же способом.

Фотошоп перерисовывает картинку чёрными квадратами или плиткой.
Причина: Нехватка оперативки на видеокарте. Windows XP не может виртуализировать RAM карты и использует то, что есть, заменяя необработанные участки чёрными квадратами.
Решение. В CS5 выберите режим «Basic» в диалоге «Advanced Settings» настроек OpenGL. При работе в CS4, следует отключить любые другие программы, занимающие GPU, либо позакрывать неиспользуемые окна в Фотошопе.

Менюшки начинают мерцать после выбора, если открыта панель «Layers».
Решение. Либо забейте, либо выключите «Enable OpenGL Drawing».

Картинки мерцают при их перетаскивании.
Решение. Выключите «Enable OpenGL Drawing».

 

Windows Vista и Windows 7 64 bit

При запуске CS4, возникает ошибка «Driver components mis-match. Exit is the only option».
Детали. Проверьте системную информацию о вашей видеокарте. Если имя карты включает в себя «Microsoft Corporation - WDDM», то вы используете драйвер не производителя карты, а Майкрософтовский.
Решение. Установите свежий драйвер от производителя видеокарты.

 

Mac OS

В CS5, рамка выделения (бегущие муравьи) пропадает при использовании плавного зума (Scrubby Zoom).
Решение. Отмените выбор Скраби Зума в панели Зума.

Производительность GPU низка в CS5, установленным на MacBook Pro с двумя GPU и активной опцией «Better Energy Savings» в «System Preferences».
Решение. В «System Preferences», в панели «Energy Saver», выберите «Optimization > Better Performance».

При максимальном зуме в CS5, пиксельная сетка и направляющие слегка сбиты относительно значений линейки.
Детали. Проблема возникает на европейских языковых версиях Mac OS и Photoshop.
Решение. Отключайте «Enable OpenGL Drawing» на протяжении работы с сетками и направляющими.

При открытии файлов толще 500 мегабайт, появляется ошибка «Could not complete the Open command because there is not enough memory (RAM)». Причём ошибка может возникать при любом статусе «Enable OpenGL Drawing» — on или off.
Решение. В меню «Window» отмените выбор «Application Frame». Либо откройте окно меньше изображения.

 

 

Результаты тестов видеокарт

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

Примечание два: Фотошопу похуй карты ATI CrossFire и SLI.

 

Видеокарты

Nvidia GeForce
Серии 7000, 8000, 9000, 100, 200, 400.

Nvidia Quadro FX
Серии x500, x700, x800, FX370, FX380, FX580, и карты Quadro CX. Здесь, вместо «x», следует подставлять индексные номера изо всей линейки данной серии. Например: «x500» включает карты серий 4500, 3500, и 1500.

Nvidia Quadro
600, 2000, 6000, 4000 (Mac).

ATI Radeon 
Серии 2000, 3000, 4000, 5000, 6000. Примечание: Карты серии «ATI X 1000» не тестировались.

ATI FireGL
FireGL (Карты семейства R600 GPU серий x6xx): V3600, V5600, V7600, V7700, V8600, V8650.
FirePro (Карты семейства R700 GPU серий x7xx): V3700, V3750, V5700, V7750, V8700, V8750.

ATI FirePro
FirePro (Карты семейства R800 GPU серий x8xx): V3800, V3850, V4900, V5800, V7800, V8800, V9800.

Intel
Intel чипсета GMA 4-х серий.
Intel семейства HD Graphics.
Intel HD Graphics P3000.

Macintosh
MacBook Air Intel GMA X3100

 

Известные проблемы

ATI Radeon HD 3200
При открытии нового изображения в 64-bit Windows 7, включается OpenGL Drawing.
Решение. Установите Advanced Settings настроек OpenGL в Basic. ATI Radeon HD3200 поддерживает только этот режим, но не Normal и не Advanced.

ATI FireGL 3350.
Фотошоп валится, когда установлен Microsoft display driver в 64-bit Windows 7. Происходит это при включении или выключении OpenGL Drawing.
Решение. На момент теста, у ATI не было драйвера этой карты для Windows 7 64 bit. Если уже появился, то установите его. Иначе не трогайте OpenGL Drawing.

Серии ATI 1000, 2000, и 3000.
Пунктирное обозначение прямоугольного выделения (бегущие муравьи) в Windows Vista 32 bit пиздит на пиксель.
Решение. Загрузите и установите ключик рееста «TweakSelectionsOnOldATI_ON». А ключ «TweakSelectionsOnOldATI_OFF» вернёт всё обратно, если что. Примечание: Если побалуетесь с ключом на картах серий ATI 4000 или 5000, то можете получить эту проблему и на них. Для решения запустите тот же «TweakSelectionsOnOldATI_OFF». 

Nvidia GeForce 7300GT.
Базовые настройки — это всё, что доступно в Mac OS 10.6.x.
Решение. Так и задумано.
А ещё недоступна активация OpenGL Drawing в Mac OS X старее 10.5.7.
Решение. Так и задумано.
А ещё очень тормозит редактирование текста в больших файлах.
Решение. В диалоге «Advanced Settings» настроек OpenGL, вернитесь к настройкам Basic, либо отключите Enable OpenGL Drawing в Фотошопе.
А ещё тормозит плавный зум, «Scrubby Zoom».
Решение. Забейте, либо отключите Enable OpenGL Drawing, если вы работаете в Mac OS X 10.5.x. Если же в Mac OS X 10.6.x, то выберите настройки Basic в диалоге «Advanced Settings» настроек OpenGL.

Nvidia GeFroce GT 120.
Вываливается ошибка при попытке выделения в Mac OS.
Решение. Отсоедините кабель от видеокарты. Если это происходит свободно, то является причиной ошибки в Фотошопе.

Nvidia GeForce GT 120 и GeForce 8800.
При выборе «Anti-Alias» в диалоге «Advanced Settings» OpenGL'a для направляющих и путей, никакой антиалиасинг не работает. Что в настройках Advanced, что в Normal. Ось — Mac OS.
Решение. Переключитесь в Basic.

Слегка рабочее, апачее. SSI: наиболее полное руководство, с примерами.

Для тех, кто пробует потрогать вэбдизайн в части сайтостроительства, рекомендую обратить внимание на язык директив сервера Апач — на Server Side Includes, «Включения со стороны сервера».

Апач — это народный сервер, на нём крутится абсолютное большинство сайтов в мире. А SSI, являясь его модулем, помогает автоматизировать существенную часть работы по созданию и обновлению интернет-ресурсов. Штука старая и проверенная. И незаменимая в случаях невозможности поставить себе полноценное двигло типа Drupal, Joomla или Wordpress. Например на бесплатных хостингах или если тупо неохота учить PHP.

Collapse )