VK.COM

Авторизацию проходим почти безболезненно (небольшой косячек справа), но сайт честно предупраждает, что лучше бы поменять коня:

На внутренних страницах в общем то работоспособность поддерживается, но совсем посредственно, для примера раздал с аудио:

ODNOKLASSNIKI.RU

В общем то всё хорошо, сайт работоспособен. Есть предупреждалка о старом браузере. В фотоальбомах есть косячек с иконками (должны быть в ряд и желтеть при наведении), наверное забыли проверить:

MAIL.RU

Почта у сервиса работает почти хорошо, только поиск «упал»:

В общем то логично, почта старая, аудитория такая же, полюбому нужно удовлетворить.

Свою социалку они видимо перестали проверять в ослике, наверное просто вычеркнули из головы ослика:

От резины кстати в ИЕ6 отказались.
Мне кажется всё же стоило подсказать юзеру, что это не случайная проблема с компьютером, а браузер устарел. Да, вверху есть тонкая полоска «Скачайте Интернет», но уверен, что ее замечают далеко не все, здесь как раз тот случай, когда нужно задолбать юзера рекламой своего браузера, как обычно они и издеваются над нормальными пользователями.

FACEBOOK.COM

Все хорошо и вылизано даже под ослика. Единственное отличие на в ленте – есть предупреждалка о недобраузере:

Единственный косяк, который нашел – в истории сообщений непрочитанное собщение показывает контрол со сдвигом:

YANDEX.RU

Главная отработала корректно, поддерживают.

На других сервисах такой банер, хотя работоспособность вполне нормальная:

TWITTER.COM

Четко дает понять, что проблема у меня и дает рекомендации:

GMAIL.COM

Перебрасывает на упрощенную html-версию шаблона и предлагает установить хром:

HH.RU (добавлено по просьбе vinny)

Брутальная уведомлялка у хедхантера перенаправляет одумавшегося юзера на …. блин, опять IE9:

А если юзер не одумался, то это его проблемы:

MICROSOFT.COM

Хотел потролить «создателя» объекта, но внешне в общем то он выглядит не плохо:

Про PNG24 молчу, но вот кнопки справа и аккордеон работают криво. Странно, почему они не предложили обновиться? Они ведь похоронили IE6.

ВЫВОД

Ёжики плакали, кололись, но упорно продолжали е**ть кактус. Так я могу охарактеризовать оставшихся на сегодняшний день 0,8% юзеров рунета, которые всё еще юзают IE6. Они полюбому знают о том, что у них проблемы, но либо по причине твердолобости (уверены, что их браузер все еще самый надежный и быстрый, таких еше много), либо по причине недостатка прав на компе не меняют браузер.

Кстати, вот прикольный комикс в тему, который я когда-то перевел для хабры: http://habrahabr.ru/post/83989/

P.S.: Ну что, опять конкурс?
В комментах покажите скриншот на оригинальную предупреждалку о недобраузере и получитите забавную флешку:

P.S.2: Забыл сроки обозначить. Давайте уж до конца месяца чтоли сделаем, 1 мая результаты и отправка флешки адресату.

P.S.3: Пост отредактирован после проверки тех же сайтов в другой виртуалке, первоначально были ошибки. Прошу прощения за недостоверные данные и спасибо за подсказки.

Готовим код

Иконки будем делать следующих размеров:
512х512 – большая иконка на всякий случай
256х256 – аналогично верхнему варианту, пусть будет
200х200 – иконка для Speed deal (например, для Оперы)
114х114 – она же touch-icon-iphone4.png, телефон 4 от фирмы, которая занимается яблоками, подхватит эту иконку
72х72 – apple-touch-icon-ipad.png – ну вы поняли, да?
64х64 – размер иконок на десктопе, вдруг пригодится )
57х57 – apple-touch-icon.png – первые модели айфонов, эти же иконки подхватывает андроид
48х48 – тот самый favicon, который обычно делают 16х16, рекомендуется перевести в формат .ico

Если кто-то не знает почему именно такие размеры, но очень хочет узнать:
iOS Developer Library
Dev.Opera
Favicon Generator – а этим инструментом я перевожу png в ico.

Режем иконки

Для начала вам придется подготовить увеличенную копию иконки, размер документа 512х512, этот же размер сразу будет сохранен в виде иконки после старта экшна. Я для примера взял произвольную букву t в квадратике.

Качаем action, загружаем его в фотошоп и запускаем. Наглядно каждый шаг показан в видео (лучше сразу в HD):

Прописываем иконки на странице

<head>
	<link rel="icon" href="./ico-200x200.png" type="image/png">
	<link rel="apple-touch-icon" href="./apple-touch-icon.png" type="image/png">
	<link rel="apple-touch-icon" sizes="72x72" href="./apple-touch-icon-ipad.png" type="image/png">
	<link rel="apple-touch-icon" sizes="114x114" href="./apple-touch-icon-iphone4.png" type="image/png">
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>

Вот в общем то и всё, надеюсь action поможет вам экономить 5 минут в каждом новом проекте.

Пожалуй продолжу своё начинание с безобидными конкурсами, уже разыгрывался плеер и стакан-череп. Через несколько дней у нас намечается пасха, поэтому победитель конкурса получит ЯЙЦО с таймером

Яйцо достанется тому, кто максимально восполнит пробелы в статье, уверен, что они есть. Итоги поведем 15 апреля. Успехов и скорости в верстке!

UPD: В очередной раз мои поздравления Alekkson, яйцо достается именно ему!

На всякий случай приложу ссылку на закачку файлика – download!
Если предложишь свои идеи – с радостью применю их в этом срипте.

P.S.: В прошлый раз я устроил мега-конкурс, в котором захотели принять участие тысячи человек, но приняли только несколько! Поэтому повторим ) У меня в запасниках есть еще те самые плееры, но мне, если честно, в лом идти на почту и отправлять посылку, проще сделать еще один заказ в Китае.

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

UPD: Сувенир закуплен и отправляется к Александру aka Alekkson!

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

Обычно «зарисовки» я сразу удаляю в корзину (буквально), но вот последний вчерашний фрагмент для одного технически-масштабного проекта решил сфоткать, чтобы показать как примерно это выглядит. Не буду описывать что там и к чему, для меня это все понятно, а вам особо то и не нужно. Кстати, здесь почти всё сразу нарисовалось, почти без исправлений, можно было верстать и без схемы )

Вот кстати неполный код того, что получилось:

Кому-то возможно покажется, что наименования классов избыточны, но таких блоков уже наверстано множество. К тому же пост не о стилистике написания кода )

Коллеги, а вы как-нибудь структурируете свое видение макета в коде прежде чем начать писать HTML? Поделитесь своими методами, может быть мой способ далеко не самый оптимальный…

P.S.: Кругом конкурсы, купоны, розыгрыши… Короче, конкурс. Кто первый отгадает, что за хрень нарисована на картинке (используется на популярном сайте), получит от меня MP3-player! Круто? Ну не очень на самом деле, т.к. стоит он 3,5 бакса, наушники говно, ПО отстой, и сделан конечно же в Китает. Кстати, звук в нормальные наушники выдают хороший и заряд держат часов 5. Просто у меня их штук 5 завалялось, взял по случаю в каком-то магазине на распродаже )

Все, кто меня знает лично, знают, что я в общем-то аполитичен. Не потому, что политика не интересна, а потому, что глубоко убежден, что у власти уже давно находится … кто-то, Путин лишь публичное лицо, выборы президента – это выборы нового лица для того-же кого-то, а дебаты и пропоганда по ящику – просто шоу для электората. Конечно хотелось бы, чтобы и выборы существующих кандидатов были честными, быть может наш проект (и ему подобные) подтолкнет организаторов выборов отказаться от явных фальсификаций.

Те, кто интересуется политикой, могут начать очередную песню по Госдеп, расшатывание лодки и т.д. Мне, если честно, паралельны подобные темы, я своими глазами вижу как рождается проект на голом интузиазме и на сколько он востребован. Никто из команды не получает за работу денег, напротив, затраты на расходы ложаться целиком на нас. В проекте используются материалы ассоциации «Голос» (так же как и материалы ЦИК), по ящику твердят, что Голос – проект Госдепа, я здесь не знаю правды, знаю только, что их материалы опираются на законодательство РФ, этого достаточно.

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

P.S.: На выборы пойду, с нашим приложением под Андроид. Голосовать буду, наверное, за Прохорова. Да, везде пишут, что он просто страховка для Путина. Моя логика проста: может он и путинец, а может и нет, остальные вообще никакие, сидят в политике по 20 лет и только языками лапочат. И да, победит Путин )

В итоге получилось это:

Demo

Наверное нет смысла описывать как и что делал, приводить листинги и т.д., кому станет интересно – заглянет в исходный код. Пришлось повозиться с анимацией, банально много кода вышло. Хотелось еще позаниматься с трансформациями, но их тут впихнуть некуда, в другом эксперименте попрактикуюсь ) Здесь же еще постараюсь уделить время для отрисовки всего экрана: курочки, травка, сам «герой» (кстати, из-за героя то я и переименовл игру из «Ну, погоди!» в «Микки Мауса», мыша будет попроще отрисовать в CSS3). Ну и, если азарт не пропадет, попрактикуюсь в JS и сделаю «играбельной» всю эту штуковину. Девайс накодил исключительно «для себя» с целью прокачаться в CSS3, промежуточным вариантом доволен

Наверное сразу возникает вопрос: нахрена я вообще винчестер запихнул в коробку?

У меня есть карман, который подключается по mini-usb, но то ли девай некачественный, то ли я сильно ёрзаю – короче отваливается постоянно, обидно когда это происходит в процессе работы. Когда я купил в ноут SSD, к нему прилагался кабель (тот что на картинке), вот я и решил его заюзать, теперь вообще не отваливается. Ну а коробка ни что иное, как антивандальная защита (кофе, дети).

А вот и карман, который теперь разве что для поездок:

Надо наверное док-станцию прикупить…

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

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

Я сомневался, что после доработок стола мне хватит места, но за неделю использования недостатка в пространстве я не ощутил. И теперь всё на своих местах!

Так почему же я всё-таки сделал выбор в пользу нового стандарта?

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

Второе – опять семантика. Но здесь уже речь идет о добавлении семантической разметки для структурирования данных в HTML-коде, или, если проще, о микроданных. Я не во всех проектах использую микроданные, т.к. это пока еще не осело в мозгу на том уровне как например CSS. Обычно я их добавляю при верстке магазинов и карточек людей и компаний. Почти всегда я делаю хлебные крошки именно с оглядкой на микроданные. Чаще всего я руководствуюсь документацияй Google.

Микроданные поддерживаются Google, Bing, Yahoo! и частично Яндексом. Не могу сказать о том, что сейчас это влияет на позиции в поисковой выдаче, т.к. исследований я не проводил, но уверен, что очень скоро будет влиять достаточно, чтобы не забывать о микроданных при верстке.

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

Четвертое – в режиме HTML5 некоторые свойства CSS работают более правильно. Еще говорят, что для JavaScript HTML5 тоже предпочтительнее, но я здесь доводов привести не могу, так как не обладаю глубокими знаниями JS )

Последнее – я считаю, что уже пора. Поддержка браузеров – 78% по рунету. Для оставшихся недобраузеров используем общепринятый костыль от Google, есть еще и другие костыли, но мне этого вполне достаточно.

Кстати, каждую неделю в понедельник я анализирую процент использования различных браузеров за прошедшую неделю, результат выкладываю коротко в Twitter и расширенно в Facebook. Было бы интересно писать еще более расширенно здесь или это уже лишнее?

P.S.: Поздравляю всех с тем, что вчера спецификация CSS 2.1 перешла в статус рекомендации, теперь им можно пользоваться (ну да, грешен, и до этого пользовался). Теперь все усилия Рабочей группы CSS будут сосредоточены только на CSS3.

Demo: Micro clearfix hack

Поддерживаются браузеры: Firefox 2+, Safari 2+, Chrome, Opera 9.27+, IE 6+, IE Mac.

Я не буду переводить полный текст статьи, выложу самое основное – код. В общем то он на столько логичен, что пояснения вряд ли кому-то потребуются

.cf {
    /* for IE 6/7 */
    *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
    /* non-JS fallback */
    *zoom: 1;
}
 
.cf:before,
.cf:after {
    content: "";
    display: table;
}
 
.cf:after {
    clear: both;
}

Если вдруг кто-то не понял, что здесь написано, попробую вкратце описать алгоритм:
1. С помощью CSS создаем невидимые блоки
2. Эти блоки используем как отбивку (как то сразу мне не нравилось захламлять отбивками HTML)
3. п.1 не работает в IE6 и IE7, потому для этих чудных браузеров используем свои фиксы.

banner

Логически этой ролью наделяется шапка сайта (header). В этом блоке традиционно располагается логотип и название сайта, могут быть включены поиск и основное название страницы. role=«banner» должен быть в единственном экземпляре на странице.

search

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

navigation

Набор навигационных элементов (как правило, ссылки) для навигации по документу или связанных с ним документов.

main

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

contentinfo

Обычно применяется к подвалу (footer). Так же данная роль может быть обозначена на странице лишь единожды.

complementary

Важная часть контента, но не основная. Обычно это различные информационные блоки (погода, краткий список новостей, мини-фотогалерея и т.д.). Чаще всего принадлежит к области страницы, называемой боковой колонкой (sidebar, leftbar, rightbar).

В упрощенном виде html-разметка может выглядеть так:

<header id="header" role="banner">
	<h1>Название блога</h1>
</header>
<nav id="nav" role="navigation">
	<ul>
		<li><a href="/">Главная</a></li>
		<li><a href="/news">Новости</a></li>
		<li><a href="/contacts">Контакты</a></li>
	</ul>
</nav>
<section id="content" role="main">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<p>Maecenas iaculis, elit at tempor imperdiet, purus orci sollicitudin ipsum, nec elementum justo diam non metus.</p>
</section>
<aside id="sidebar" role="complementary">
	<nav>
		<h3>Подменю</h3>
		<ul>
			<li><a href="#">Раз</a></li>
			<li><a href="#">Два</a></li>
			<li><a href="#">Три</a></li>
		</ul>
	</nav>
</aside>
<footer id="footer" role="contentinfo">
	<p>© 2011 Копирайт.</p>
</footer>

Конечно же есть и другие роли, если заинтересуетесь – курите спецификацию

Идем по порядку:

1. Делаем скриншот страницы – Alt+PrintScreen (скриним только активное окно):

2. В фотошопе создаем новый документ (фотошоп должен подхватить размеры скрина, просто соглашаемся):

3. Закрашиваем фон нужным цветом (для примера черным):

4. Вставляем скриншот – Ctrl+V:

5. Делаем трансформацию – Ctrl+T, после чего с вжатым Ctrl смещаем правые уголки:

6. Включаем режим маски – Q;

7. Градиентом формируем саму маску (градиент должен быть с «однобоким», показано на скриншоте):

8. Выходим из режима маски – Q;

9. У нас имеется выделение области, применим к нему фильтр Blur -> Gaussian Blur или друго фильтр из серии Blur (радиус добавляем по вкусу):

10. Обрезаем нужную область инструментом Crop:

11. Добавляем что-нибудь для красивости, например тень от ручки (на новом слое). Потом можно будет поиграться с прозрачностью для слоя:

11. Сохраняем то что получилось:

Конечный вариант слегка переделан, для размытия картинки вместо Gaussian Blur использован Shape Blur радиусом 5px и затем тот же Gaussian Blur с радиусом 3px, но это всё каждый определит для себя, кому что нравится…

Кому лень заморачиваться – прикладываю Acton.

P.S.: Можно наверное сделать лучше и качественнее, но, повторюсь, я не профи в этом деле

Форма с пропадающими LABEL при клике на INPUT[TYPE=TEXT]

<form class="search labeled">
<div class="field"><label for="idSearch">Введите запрос</label>
<input id="idSearch" type="text" /></div>
<div>
<input class="button" type="submit" value="ИСКАТЬ" /></div>
</form>

.search .field{position:relative;}
	.search .field label{position:absolute; top:4px; left:11px; width:170px; font-size:12px; font-style:italic; color:#6C6E71; cursor:text;}
	.search .field input{width:150px; border:0; font-size:12px; background:none; outline:none;}

$('form.labeled input[type=text]').focus(function () {
	$(this).siblings('label').fadeOut(100);
});
$('form.labeled input[type=text]').blur(function () {
	 !$(this).val() && $(this).siblings('label').fadeIn(100);
});

Флотим пользовательские картинки в контенте

$("img[align='left']").attr("align", "").addClass("fleft");
$("img[align='right']").attr("align", "").addClass("fright");

.fleft{float:left; margin:3px 15px 0 0;}
.fright{float:right; margin:3px 0 0 15px;}

Анимация на примере изменения ширины страницы

<div id="wrapper">
<div id="header">
		<a class="logo" href="/">Lorem ipsum</a></div>
</div>

#wrapper{position:relative; width:1000px; margin:0 auto;}
#header{height:40px;}
.reSize{position:absolute; right:30px; font-size:18px; cursor:pointer;}

$('#header').prepend('
<div class="reSize">«»</div>
');
$(".reSize").toggle(function(){
	$("#wrapper").animate({
		width: "1200px"
	}, 500 );
	$(".reSize").html('»«');
}, function () {
	$("#wrapper").animate({
		width: "1000px"
	}, 500 );
	$(".reSize").html('«»');
});

Выполнение скрипта при ресайзе страницы

resizeWindow();
$(window).bind('resize', function() { 
	resizeWindow();
}); 
function resizeWindow(){
	$("#main").css('width', $("body").width() - 352);
}

Открываем страницы в новой вкладке правильно

$("a[rel=external]).attr('target', '_blank');

Кроме главного логотипа так же есть логотипы сопутствующих технологий:

Подробнее Вы сможете ознакомиться на странице логотипов.

Там же можно сгенерировать для своего проекта кнопочку, которая как бы намекает на качество сайта (ниже полный набор):

Обсуждение на хабре

Опрос для верстальщиков на хабре

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

Настройка виртуальной машины

Скачиваем установщик VirtualBox, устанавливаем и запускаем.

Первое что нужно сделать, это создать новую машину, делаем это нажав кнопку «Создать». Получаем окно, как на скриншоте ниже:

Обзываем нашу новую машину:

Выделяем память, можно оставить по умолчанию. Я не жадный и дал своей виртуальной XP гиг оперативки (из 4х имеющихся):

Оставляем как есть:

Расположение можете оставить по умолчанию, я же указал удобную для меня папочку.
Я бы не рекомендовал уменьшать размер жесткого диска, т.к. если Вы его заполните до конца, увеличить будет уже очень проблематично. Я оставил 10 гигабайт, на жестком диске с установленной операионкой размер виртуальной машины занял меньше 2Гб.

Мы создали виртуальную машину, теперь пора поднастроить её. Нажимаем «Свойства» и видим много чего настраиваемого. Нам нужно совсем чуть-чуть.

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

Видео в пункте Дисплей я нежалеючи накрутил по максимуму (не обязательно):

В пункте Носители потребуется больше внимания. Для начала правым кликом мыши на пустом пространстве списка носителей вызываем контекстное меню и выбираем Добавить Floppy контроллер:

Добавляем виртуальный привод гибких дисков (он нам потребуется позднее):

Теперь нам нужно прикрепить в виртуальной машине (пусть дальше будет ВМ) установщик Windows XP. У Вас должен быть установочный диск или образ установочного диска, я для эксперимента скачал образ с торрента (через 30 дней обязательно удалю). Делаем как на скриншоте и выбираем привод хоста. У меня «Е» – это физический CD-привод, «F» – виртуальный, созданный программой UltraISO (есть тестовый период, для нашей задачи подойдет). Вы можете нарезать реальный диск либо использовать виртуальный если знаете как. Не забудьте после установки винды извлечь установочный диск.

Нам потребуется общая папка для работы с банковскими файлами:

Обязательно поставьте галочку Авто-подключение:

Всё, закончили с настройками ВМ, сохраняем, нажимая OK. Первый этап успешно завершен, переходим к следующему.

Установка Windows XP на виртуальную машину

Запускаем нашу ВМ и идём пить кофе/чай/пиво минут на 5. Установщик поработает самостоятельно до момента, показанного на скриншоте:

Быстренько форматируем раздел:

И идем продолжать распивать всякие там напитки еще минут на 20-25. По возвращению нас встретит такой экран:

Итак, мы завершили второй этап, пора переходить к настройке операционки.

Настройка Windows XP на виртуальной машине

Важное отступление. Чтобы перевести курсор мыши с гостевой операционной системы на основную жмём правый Ctrl.

Для начала проверим, есть ли на нашей свежей XP интернет:

У меня интернет заработал сразу, если у Вас возникнут сложности – поэксперементируйте с настройками ВМ (Свойства -> Сеть).

Устанавливаем дополнения гостевой ОС:

Жмем Next, Ok, Install – короче устанавливаем эту ерунду. По завершению нас попрося перезагрузиться, соглашаемся, НО предварительно извлечем установочный диск из CD-привода.

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

Я себе еще решил поставить антивирус для верности, Avast.

Напоследок убедимся, что общая папка подключилась успешно:

Всё, винда настроена, остался последний этап:

Установка клиент-банка на виртуальную машину

Это та самая часть, из-за которой я потерял много времени, пока не проникся сутью процесса.

Заходим в нашу общую папку и устанавливаем csp-win32-kc2-rus (по крайней мере в моём банке такую выдали). В инструкции было указано, что в процесс нужно будет поставить галочку в пункте про биологический датчик.

После установки нас снова попросят перезагрузиться. Повинуемся.

Теперь вспоминаем, что мы в начале делали виртуальный дисковод. Пришло время вставить в него виртуальную дискету. Сначала дискету нужно сделать, для этого качаем WinImage , устанавливаем и запускаем его. Жмем на пиктограмму чистого листа (создаем новую дискету) и выбираем 1.44. Сюда же копируем файлы ключей, выданные в банке:

Сохраняем образ дискеты, обязательно в .ima (в нем работает гарантированно).

Переходим к окну виртуальной машины и выбираем сохранённый образ дискеты:

Закончили с дискетой, переходим ко входу в клиент-банк.

Так как я обслуживаюсь в ГазЭнергоБанке, то в дальнейшем будем эксплуатировать их сайт.

При первом заходе на сайт браузер покажет кучу предупреждений и просьб, везде отвечаем положительно:

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

Если всё сделано правильно, то на появившейся странице Вы увидите себя. Пока не жмем далее:

На страничке есть тщательно замаскированная ссылочка «здесь», она то нам и нужна. Тыц.

Видим страничку с путями к носителям ЭЦП (выдают в банке, поройтесь в папочках, у меня был путь Ерошенков\7843-ключи\CRYPTO\PUBLIC\00000000\). Я просто перепрописал их на папку на жестком диске (зеленые пятна – это не пятна на Вашем мониторе, не трите, это я цыферки закрасил):

Оставлять пути по умолчанию или менять на свои – Ваше дело. Жмем ОК или ОТМЕНА и снова оказываемся в предыдущем окне. Жмем далее, получаем еще кучку вопросов от браузера и везде отвечаем утвердительно:

А теперь момент истины – если всё сделали верно, то увидим нечто похожее на:

Ура, мы их победили!!! Нас ржавыми вилами не заколешь!!!

Рекомендации по дальнейшей работе с виртуальной Windows XP

Если планируете провести много времени в клиент-банке, но можно открыть окно FullScreen:

Вернуться просто – внизу при наведении мыши выплывает панель.

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

Теперь настоятельно рекомендую сделать снимок текущего состояния виртуальной машины, чтобы потом, в случае поломки, можно было быстро вернуться к рабочей версии (меня уже спасало):

Эпилог

Вот так благодаря непродуманному софту можно получить длительный секс

Всех с наступающими Новогодними праздниками!!!

P.S.: если вдруг данный пост прочитали разработчики клиент-банка ДБО BS-Client – ничего личного, я в корявости данного софта виню не исполнителей, а руководителей, которые таким образом наладили процесс. И, если вдруг не встречалось такое, … короче ссылочка.

Работа верстальщика предполагает постоянное взаимодействие с заказчиком, дизайнером, программистоом, иногда сеошником. Сверстав очередную страницу необходимо показать ее всем этим людям чтобы они одобрили или же сделали свои замечания. Раньше я по старинке выкладывал проекты на свой сервер и раздавал ссылочки всем, кому надо. Теперь я делаю проще: создаю папку в разделе Public, верстаю прямо там или выкладываю туда готовую верстку (в последнее время обычно первый вариант) и даю клиенту ссылку типа http://dl.dropbox.com/u/2930651/pro-price/html/index.html, а он уже сам раздает ее кому посчитает нужным. По завершению проекта я удаляю работу из публичной папки в свой архив.

Плюсы такого способа ведения проекта:

• Клиенту всегда доступна последняя версия
• Нет заморочек с выкладыванием проекта на сервер или отсылкой новой версии на email.
• Очень удобно при работе на нескольких компьютерах (у меня например ноут и десктоп)

Минусы:

• Клиенту всегда доступна последняя версия (не всегда хочется показывать промежуточные этапы)
• Размер расшаренных папок по умолчанию в бесплатно версии ограничен 2-мя гигами (есть способ увеличить в 4 раза, об этом ниже), поэтому PSD я иногда храню в другом месте.

Кроме того – с Dropbox можно вести командную работу. Для этого создаем и расшариваем папку проекта и рассылаем инвайты всем членам команды – всё, дальше работаем вместе

Описание работы с Dropbox

Для начала Dropbox нужно скачать (есть как под Windows, так и под Ubuntu и MacOS) и установить себе на машину. Дальнейшее описание будет под Windows.

После установки в трее появляется значек:

На жестком диске появляется папочка My Dropbox, с подразделами Public и Photos.

Здесь же вы можете создавать новый подраздел и расшарить его:

Далее пред вами предстанет страничка отправки инвайтов:

Отправляете инвайты и у всех членов команды появится такая же папка, содержимое которой будет синхронизироваться сразу же при изменении или добавлении файла (берем в расчет скорость интернет канала). Конечно же, у всех должен быть установлен Dropbox.

Чтобы показать файл публично, помещаем его в Public и делимся ссылкой с кем угодно и каким угодно способом:

Увеличиваем лимит до 8 гигабайт

У Dropbox есть партнерская программа, по которой можно приглашать людей и получать увеличение квоты на 250 мегабайт за каждого приглашенного. Например, если вы сейчас перейдете по ссылке http://www.dropbox.com/referrals/NTI5MzA2NTE5 и зарегистрируетесь – мне будет счастье в виде дополнительных 250Mb
Кстати, регистрация по ссылке выше не только мне счастье принесет, но и вам, т.к. вместо 2Гб вам дадут 2,25Гб!

Послесловие

Вообще Dropbox – хорошая штука! Практически у всех моих друзей и знакомых коллег он установлен.

Рекомендую этот инструмент как незаменимого помочника во взаимодействии как людей, так и компьютеров!

UPD: Увы, но правила дропбокса изменились и теперь он не открывает файлы .html

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

Примеры:

Alt+C bb TAB — border-bottom:1px solid #FFF*;
Alt+C p TAB — position:relative*; top:0; left:0;
Alt+C fw TAB — font-weight:900*;
Alt+C tb TAB — text-decorarion:underline*;
Alt+C bg TAB — background:#FFF url(../images/bg.png) repeat-x 0 0;
* — зачеркнутым показаны символы, которые будут выделены для изменения

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

Всего на данный момент написано 18 комбинаций, скорее всего добавится еще что-то, предлагайте варианты.
На скорую руку соорудил простенький cheat sheet:

Итак, если вы считаете, что такие макросы будут полезны в повседневной работе — качайте org-netbeans-modules-editor-settings-custommacros.xml.
Этот файлик нужно закинуть в c:\Users\habrauser\.netbeans\6.9\config\Editors\Macros\ (если у вас уже есть свои макросы — будте осторожны при копировании, перезатрете).

Еще в NetBeans существует такая классная штука, как шаблоны кода, которая превосходит по удобству макросы, в PHP они работают замечательно, в CSS мне не удалось ими овладеть

Буду благодарен за полезные советы и дополнения к вышенаписанному. По мере поступления идей (своих или чужих) макрос будет обновляться.