На вскидку это реклама авито, озон, сландо…

Вот захотелось сделать подборку таких видео.

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

Если не имели дело и понятия не имеете что это такое, попробую объяснить.

Это, как уже говорил, набор CSS стилей и плагинов для jQuery. Так же там есть спрайты для создания иконок.

Вы создаёте свою html страничку и подключаете к ней стили от Bootstrap – файл bootstrap.css(или bootstrap.min.css в сжатом виде), файл bootstrap-responsive.css(или bootstrap-responsive.min.css) и javascript файл от Bootstrap – файл bootstrap.js(или то же самое в сжатом виде bootstrap.min.js). Так же для некоторых видов разметки(выпадающие списки, модальные окна) надо будет подключить плагины для jQuery и собственно сам jQuery последней версии.

Все эти файлы, а так же .less файлы, спрайты, плагины для jQuery, примеры и документацию вы можете скачать здесь. Там можно скачать всё или выбрать только нужное. Правда когда скачал всё одним архивом не нашёл там css файла. Но его можно скомпилировать из .less файлов(об этом позже).

Так вот, страница создана, необходимые файлы подключены. Остаётся только в тело документа вставлять блоки, списки(и прочее) и применять к ним заранее определённые стили, указывать у них определённые атрибуты типа data-*.

Расставляя таким образом разметку получаем стилизованный кроссбраузерный веб-интерфейс – списки, формы, меню, выпадающие меню, «карусели» и многое другое. Всё можно посмотреть у них на сайте. Собственно интерфейс самого ихнего сайта сделан на основе ихнего CSS фреймворка.

Помимо кросс-браузерности важно отметить, что вёрстка будет подстраиваться под разные экраны разных устройств. Для этого то и подключается дополнительно файл bootstrap-responsive.css. В нём содержаться стили для разных разрешений экранов. Например для смартфона элементы будут меньше, главное меню вместо множества ссылок сложится в одну кнопку, которую при необходимости можно нажать для доступа к пунктам меню.

Конечно кто то скажет, что это однообразно и на все сайты с разными спецификами не сделаешь одинаковые интерфейсы. Конечно! Но можно же править CSS стили. Кастомизировать. Можно использовать только части стилей, например для построения каркаса страницы.

Даже без переделок созданная вёрстка пригодна для многого:

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

Что можно сделать с помощью Bootstrap, что он умеет:

• разметить каркас страницы, верх, низ, сколько колонок, какой ширины будут, после в эти блоки размещаем другие компоненты интерфейса
• стили для основных элементов страницы (ul, p, blockquote, small, abbr и прочее) уже прописаны
• есть стили для оформления таблиц
• есть стили для позиционирования элементов формы, стили для этих элементов, для кнопок заранее прописаны.
• есть возможность делать кнопки с выпадающим списком
• прописаны стили для каждой из иконок
• можно делать группировку кнопок
• навигация с табами
• модальные окна
• тултипы
• блоки с разного рода сообщениями
• «аккордионы»
• «карусели»
• ввод с подсказками

впрочем можно ещё долго перечислять что можно сделать.

Чуть не забыл написать про less. Это препроцессор для стилей. Можно создавать файлы стилей с расширением .less. Как обычно писать css правила. Но при этом можно дополнять переменными, применять операторы, группировать и многократно вставлять сгруппированные части css правил в нужные части других правил. Так же там, в less, есть ещё множество вкусностей, упрощающих жизнь. Далее созданный файл прогоняем через препроцессор и на выходе получаем css файл со вставленными в нужных местах значениями переменных, подсчитанными с помощью операторов значениями и прочее.

Можно подключать к странице less файл и файл less.js(скачать с вышеуказанного сайта), который будет на лету создавать css правила из less файла. Можно заранее скомпилировать css файлы из less файлов и после уже подключать к странице именно css файлы.

Пока изучал данный css framework, делал всё на одной странице. Пожалуй выложу её тут для просмотра. Или можно скачать одним архивом.

Когда писал статью, хотел вставить какую нибудь ассоциативную картинку, но не нашёл. Разве что можно ассоциировать иконку с Bootstrap, которая подозрительно похожа на иконку социальной сети «ВКонтакте»

Оказывается это не проблема Netbeans. Это проблема look and feel – отображения. По умолчанию в java для конкретной операционной системы есть набор отображений интерфейса пользователя.

Так вот, решение заключается в смене look and feel – отображения интерфейса. Для этого запускаем редактор с параметром –laf javax.swing.plaf.metal.MetalLookAndFeel. То есть указываем конкретное отображение MetalLookAndFeel.

Можно прописать это я свойстве ярлыка «Объект»

"C:\Program Files\NetBeans 7.0.1\bin\netbeans.exe" --laf javax.swing.plaf.metal.MetalLookAndFeel

Вуаля. Нетбинс запускается с новым оформлением и уже без этого глюка.

Правда оформление не очень Можно так же поэкспериментировать с другими отображениями.

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

Мне например понадобились профили:

1. для обыденной работы в интернете – социальные сети, авторизация на нужных сайтах, нужные закладки, своя история посещения;
2. для работы – это авторизация, запоминание авторизации на конкретных сайтах. Авторизация других аккаунтов в соц сетях и прочее.
3. для мамы Ссылка на одноклассники в закладках на самом видном месте и авторизация с запоминанием на этом же сайте

Применение может быть разным.

Так что же именно хранится в профилях:

• Закладки и история просмотров
• Пароли
• Особые настройки сайтов
• Поисковые машины
• Личный словарь
• Автозаполнение полей
• Куки/Cookies
• Настройки сертификатов безопасности
• Управление типами файлов
• Стили пользователя

Так же для каждого профиля можно установить своё оформление и дополнения, установленные в Firefox в текущем профиле так же будут доступны только в данном профиле.

Как управлять профилями Firefox?

Для этого надо запустить Firefox с параметром. Можно сделать так, Пуск -> Выполнить и далее ввести(перед этим надо будет закрыть все открытые окна Firefox, иначе выполнение следующей команды приведёт просто к запуску браузера, а не менеджера профилей)

firefox.exe -ProfileManager

Если программа не найдена, то или у вас не установлен Firefox, или надо указать полный путь, например у меня в Windows XP он находился тут, вводим следующее

"C:\Program Files\Mozilla Firefox\firefox.exe" -ProfileManager

Далее жмём Ок и видим окно, где можно управлять профилями.

Далее думаю не стоит описывать и приводить ненужные скриншоты, как добавлять новый профиль Firefox, переименовывать или удалять профили.

Хочу только отметить, что чекбоксы в окне действуют на текущий запуск браузера. Работать автономно – означает, что браузер будет работать автономно (с)КЭП.

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

Где хранится профиль? У меня в Windows XP файлы хранятся здесь. Один профиль – одна папка, к примеру zwv9xv8q.lampdevru.

C:\Documents and Settings\username\Application Data\Mozilla\Firefox\Profiles

Так же можно открыть папку профиля, сделав следющее: выбираем пункт меню Справка -> Информация для решения проблем или в новой вкладке в адресной строке пишем about:support, загружается страница, видим следующее

Как запустить Firefox c нужным профилем?

Для этого исполняемый файл надо запустить с параметром -p имяпрофиля. К примеру можно создать ярлык и в свойстве «Объект» прописать следующее

"C:\Program Files\Mozilla Firefox\firefox.exe" -p lampdevru

Здесь lampdevru – имя профиля. Пример ниже

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

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

UPD

кстати, вот полезная ссылочка с опциями запуска Firefox

1. Подготовим стиль для ссылки

.link-not-link,
.link-not-link:hover {
	cursor: text; /* вид курсора обычный, как при тексте */
	text-decoration: none; /* убираем подчёркивание */
	color: #000; /* ставим такой же цвет, как у остального текста */
	outline: none; /* убираем выделение пунктирной рамкой при
                               активности, по крайней мере в  FF */
}

2. Далее присваиваем данный стиль ссылке

какой то текст <a href="http://address" class="link-not-link">link</a> какой то текст

Всё. Теперь ссылка должна выглядеть так же как и текст. Одно будет выдавать – при наведении будет отображаться адрес ссылки. Так же при клике будет переходить по адресу.

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

какой то текст <a href="yandex.ru" onclick="return false;" class="link-not-link">link</a>
 какой то текст

То есть добавляем обработку события onclick.

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

Срок работы пробной версии продукта истек. Через две недели этот сайт полностью прекратит свою работу. Вы можете купить полнофункциональную версию продукта на сайте www.1c-bitrix.ru.

Это не очень красиво и особенно это нервирует заказчиков: «…Как это, сайт скоро перестанет работать?! АААА!…» и тд и тп

Далее речь пойдёт о том, как скрыть данную надпись.

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

И так, способы скрыть надпись

1. Ну первое – купить ключ! ) No comments

2. Подредактировать файл битрикса.

Наверное после обновления файл затрётся и его опять надо будет править. Но ведь нам же всего на некоторое время надо скрыть это.

От корня сайта открываем и правим файл /bitrix/modules/main/include/prolog_after.php

В нём нужно закомментировать блок условия

if(defined("DEMO") && DEMO=="Y")
{
  //
}

как то так

/*
if(defined("DEMO") && DEMO=="Y")
{
  //
}
*/

Вместо «//» там код. Я специально не стал приводить целиком код здесь, так как не читал условия использования Битрикса и не знаю, могу ли я выкладывать код. В любом случае кто занят этой проблемой наверное сообразит, что именно надо закомментить. Блин, да и особенно нечего этот код показывать, не такой он и красивый, этот код

3. Способ с Javascript

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

<font class="tablebodytext"><font color="#FF0000">
Срок работы пробной версии продукта истек.
Через две недели этот сайт полностью прекратит свою работу.
Вы можете купить полнофункциональную версию продукта на сайте <a href="http://www.1c-bitrix.ru/?r1=bsm7trial&amp;r2=expiried">www.1c-bitrix.ru</a>.
</font></font>

Короче, изпользуя jQuery, встраиваем следующие строки в скрипт js, который подключается во всех шаблонах. Или же если его нет, создаём и подключаем к странице. В нём пишем:

$(document).ready(function(){

	$('.tablebodytext').hide();
});

Тут всё понятно. При загрузке страницы блок с классом tablebodytext скрывается. Правда в этом варианте есть два минуса:

1. иногда видно этот текст, когда страница ещё не подгрузилась полностью
2. код всё так и остаётся в странице и вопрос с рендерингом, описанным выше, в этом случае открыт

4. CSS

Пока писал предыдущий пункт, подумал, блин, а почему через CSS не прописать, чтобы скрывался этот блок. Ну вот как то так:

.tablebodytext {
    display: none;
}

Ну вот вроде бы и всё, способы кончились. У вас есть что добавить?
Надо отметить и это ВАЖНО!!! Если мы скроем это сообщение, то это означает, что мы всего навсего скрыли запись. Через 2 недели сайт всё равно перестанет работать.
PS ЗЫ
Всё пробовал в Битриксе версии 11.0.3

На мой взгляд вариант №2 самое то, если пока что нет ключа.

<a href="mailto:myemail@mail.ru">email</a>

Но можно использовать и дополнительные опции.Полный формат ссылки такой

mailto:[ mail address ] [?] [subject=subject] [&cc=mail address] [&bcc=mail address] [&body=message body]

Думаю тут всё ясно.
mail address – e-mail адрес
subject – тема сообщения
cc – email, на который отсылать копию письма
bcc – скрытый email адрес, на который отсылается письмо
body – сообщение, текст письма

То есть ссылка может иметь следующий вид:

<a href="mailto:mail@mail.ru?subject=mail subject&cc=copymail2@mail.ru&bcc=blind_carbon_copy@mail.ru&body=message">ссылка на email</a>

При клике по данной ссылке откроется ваш почтовый менеджер, где поля «кому», «тема», «сообщение» будут автоматически заполнены.

При подстановке кириллических символов в тело письма и в тему возникли проблемы с кодировками. У меня MS Outlook Express 6.

Для решения проблемы использовал php функцию urlencode. Правда в почтовом клиенте Outlook так и остались вместо пробелов плюсы. Ну что ж, можно использовать str_replace

Получилось как то так

<a href="mailto:mail@mail.ru?subject=mail subject&cc=copymail2@mail.ru&bcc=blind_carbon_copy@mail.ru&body=<?=str_replace('+', ' ', urlencode('какое то сообщение'))?>">ссылка на email</a>

Что делать если этот метод был многократно применён и анимация выполняется и выполняется. И её надо остановить.

Нужно очистить очередь анимации этого элемента следующим образом:

$('#el').queue("fx", []);

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
	<title>Останавливаем анимацию animate jQuery</title>

	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
	type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {
	for (var i = 0; i < 50; i++) {
		$('#bl1').animate(
			{top: 50, left: 50,
			width: 500, height: 400},
			1000
		);

		$('#bl1').animate(
			{top: 50, left: 10,
			width: 20, height: 490},
			1000
		);

		$('#bl1').animate(
			{top: 55, left: 23,
			width: 345, height: 123},
			1000
		);
	}

	$('#stop-link').bind('click', function () {
		$('#bl1').queue("fx", []);
		return false;
	});

});

</script>

<style type="text/css">
#bl1 {
	position: absolute;
	background: maroon;
	width: 300px;
	height: 300px;
	left: 40%;
	top: 40%;

}
</style>

</head>
<body>

		<a href="#" id="stop-link">остановить анимацию</a>

		<br /><br />
		<div id="bl1">
		</div>

</body>
</html>

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

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

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

В главном меню Яндекс-метрика появился пункт «Вебвизор».

Чтобы webvisor начал работать, то надо будет поменять код счётчика от Яндекс-метрика.

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

Данный сервис не является собственной разработкой Яндекса на корню. Веб визор был куплен, после внедрён в Я.метрику и был доступен только тем, у кого был определённый бюджет в яндекс директе(не менее 6 000 рублей в месяц).

Теперь он доступен всем бесплатно. Радуемся и пользуемся. И говорит Яше спасибо за новогодний подарок.

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

При долгом чтении текстов развивается так «синдром компьютерного зрения» – временная близорукость, покраснение белков, жжение в глазах, снижение чувствительности зрения и другие сиптомы. Verdana благодаря своему начертанию, отсутствию засечек в сочетании с увеличенным межстрочным расстоянием и размером от 10 до 12 пунктов позволяет снизить нагрузку на глаза.

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

Так что если на сайте присутствуют большие тексты, то лучше для этого использовать шрифт Verdana. Ну или какой нибудь шрифт без засечек и размером побольше – это чисто моё мнение. При этом для меню, заголовков и прочего можно использовать и другие шрифты. При этом во всём должна быть мера. 10 разнообразных шрифтов на сайте – сумасшествие. Думаю 1-2-3 самое то.