Как стать автором
Обновить
18
0
Маров Николай @kolyuchii

Пользователь

Отправить сообщение

Просмотр DOM-событий в Firefox Developer Tools

Время на прочтение1 мин
Количество просмотров15K
image

Совсем скоро вместе с обновлением ночной версии Firefox появится возможность легко и просто смотреть все DOM-события на странице.
Читать дальше →
Всего голосов 35: ↑34 и ↓1+33
Комментарии5

Кроссбраузерный поиск в select list

Время на прочтение2 мин
Количество просмотров32K
Ниже пойдёт речь о методе поиска по выпадающему списку (select).

Для этого требуется поле ввода текста и собственно сам выпадающий список:
<input class="type-search" type="text" />
<select size="10" id="list">
    <option value="val">Text</option>
    ...
    <option value="val*n">Text</option>
</select>

Чтобы результат поиска был нагляднее для пользователя, стоит задать тегу select атрибут size со значением 10.

Добавим к этому немного css:
input, select {
    width: 300px;
    margin: 10px auto;
    display: block;
}

При вводе данных в поле input всё, что не совпадает со строкой поиска, будем скрывать, оставляя в списке только нужные результаты.
Читать дальше →
Всего голосов 46: ↑30 и ↓16+14
Комментарии28

Московская Служба Спасения до совершеннолетия не дотянет?

Время на прочтение4 мин
Количество просмотров2.1K
Примерно месяц назад на форуме Московской Службы Спасения (далее МСС) появилось сообщение, о том что работа информационного центра МСС заканчивается 1 декабря 2011 года.

Это значит, что прекращают свою работу канал МТС 112, телефон МГТС 937-99-11, каналы 0911, а так же, вероятно, «9» и «19» радиоканалы.

Надо отметить, что в истории МСС это не первый случай, когда её работникам выдают уведомление об увольнении. Подобный случай был в марте 2009 года. Однако тогда службе повезло.

На этот раз, по мнению сотрудников, ситуация куда более критичная.

Что такое МСС можно узнать на официальном сайте службы.

О закрытии МСС на радио «Сити-FM».
Читать дальше →
Всего голосов 66: ↑52 и ↓14+38
Комментарии39

Метод html-верстки кнопок с применением псевдоэлементов

Время на прочтение7 мин
Количество просмотров8.9K
Появлению этой методики способствовала воистину монстрообразная вёрстка элементов страницы на нашем проекте. Подумать только, для отображения одной кнопки требовалось до семи тегов на один элемент.

Выглядело это примерно так:



html
<div class="large_button"><br>  <span class="buttons submit_v2-button clickable"><br>    <i class="left left2"></i><br>    <i class="body"><br>      <b>В архив</b><br>      <i class="end"><br>        <i></i><br>      </i><br>    </i><br>  </span><br></div>

Видно, что запутаться в таком коде проще простого, тем паче, что вариантов кнопок на проекте накопилось не менее 30. Попытка создать такую кнопку на серверной стороне вызывала негодование у коллег «пехапистов».

Поэтому моей негласной задачей стало максимальное упрощение кода.
Читать дальше →
Всего голосов 74: ↑50 и ↓24+26
Комментарии93

Паспорт сайта

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

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

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

  • 1.Название сайта.
  • 2.URL сайта.
  • 3.Краткая аннотация сайта.
  • 4.Месторасположение и контактная информация о хостинге сайта.
  • 5. Дата разработки сайта.
  • 6.Владелец сайта.
  • 7.Контактная информация о владельце сайта.
  • 8.Владелец домена (URL).
  • 9.Контактная информация о владельце домена.
  • 10.Разработчик сайта.
  • 11.Контактная информация о разработчике сайта.
  • 12.Минимальные требования к аппаратному и программному обеспечению:
    • Разрешение мониторов, под которые оптимизирован сайт.
    • Оптимальное разрешение монитора для просмотра сайта.
    • Минимальное количество цветов монитора, на котором может быть просмотрен сайт.
    • Основной браузер, которым будет просматриваться сайт, и его минимальная версия.
    • Среднее время загрузки страниц сайта при заданной скорости соединения с Интернет.
    • Время загрузки головной (домашней) страницы сайта.
  • 13. Объем сайта, Мб.
  • 14.Число html страниц сайта.
  • 15.Количество файлов сайта.
  • 16.Количество гиперссылок сайта:
    • Количество внутренних гиперссылок.
    • Количество внешних гиперссылок.
    • Количество картинок сайта.
  • 18.Глубина сайта.
  • 19.Имеется ли возможность просмотра сайта автономно, без подключения к Интернет.
  • 20.Требуется ли специальное программное обеспечение, необходимое для обеспечения штатной работоспособности сайта.

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

  • 10.Разработчики сайта.
    • дизайнер
    • верстальщик
    • программист
    • технический директор


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

Принципиальное отличие предложенного метода от ставшего привычным «копипаста» в том, что информация предоставляется пользователю в неком стандартизованном виде и сразу т.е. не надо как раньше открывать окно почтовой программы для связи с автором ведь большинство информации уже отображено на экране.
Всего голосов 16: ↑11 и ↓5+6
Комментарии23

SEARCH-CUBE: 3D визуализация поиска от Google

Время на прочтение1 мин
Количество просмотров620
Недавно обнаружил необычный поисковик с 3D интерфейсом от Google.

image

На сторонах куба умещается 9 поисковых страниц Google, включая графику и видео. Переворот куба на одну грань осуществляется нажатием соответствующей «стрелки» на клавиатуре. Комбинация Shift+Left Mouse осуществляет плавный поворот куба в любом направлении.

Для работы с сервисом необходим включенный JS и FlashPlayer не ниже девятой версии.

Ссылка на SEARCH-CUBE
Всего голосов 20: ↑16 и ↓4+12
Комментарии15

Эти тянущиеся изображения.

Время на прочтение2 мин
Количество просмотров1.6K
Я люблю дизайнеров, которые рисуют «невозможные» сайты. Это не даёт закиснуть, заставляет искать новые решения вёрстки. Одним из таких решений стало применение «резинового неповторяющегося фона».
Решение основано на взаимосвязи вертикальной и горизонтальной координаты у изображения. Говоря иными словами, если у картинки указать только высоту, то ширина изменится согласно исходным пропорциям.
Суть идеи в том, что небольшое по размеру (и по объёму) фоновое изображение вставляется не через таблицу стилей в body, а непосредственно через тег img на странице сайта.

HTML:
<img src="url" class="body-img" alt="" title="" />

CSS:
.body-img{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
}


Наглядная реализация метода: http://marow.ru/site/sadik/40/

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

Минус же в том, что этот способ не соответствует соображениям семантичности и разделения структуры от содержания.
Также утрачивается возможность указать значения margin и padding у тега body. Иначе картинка будет растягиваться не на весь экран.

О главном.

В ie6 при наведении на фон, созданный таким способом, появляется окно ImageToolbar, которое портит всё впечатление от содеянного. Благо, что сие решается довольно безболезненно. Достаточно установить в «голову» сайта мета-тег, который запрещает появление ImageToolbar на всей площади страницы:

<meta http-equiv="imagetoolbar" content="no" />

Кроме применения в качестве фонового изображения эффект зависимости высоты и ширины можно применить при необходимости создания блока высота которого будет меняться в зависимости от его ширины (например при масштабировании страницы). Достаточно просто поместить внутрь этого блока прозрачное изображение с заданными пропорциями.
Пример.
Всего голосов 21: ↑14 и ↓7+7
Комментарии7

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Дата рождения
Зарегистрирован
Активность