Pull to refresh
18
Karma
0
Rating
Маров Николай @kolyuchii

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

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

Reading time 2 min
Views 29K
Website development *
Ниже пойдёт речь о методе поиска по выпадающему списку (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 всё, что не совпадает со строкой поиска, будем скрывать, оставляя в списке только нужные результаты.
Читать дальше →
Total votes 46: ↑30 and ↓16 +14
Comments 28

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

Reading time 4 min
Views 2K
Network standards *
Примерно месяц назад на форуме Московской Службы Спасения (далее МСС) появилось сообщение, о том что работа информационного центра МСС заканчивается 1 декабря 2011 года.

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

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

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

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

О закрытии МСС на радио «Сити-FM».
Читать дальше →
Total votes 66: ↑52 and ↓14 +38
Comments 39

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

Reading time 7 min
Views 8.4K
CSS *
Появлению этой методики способствовала воистину монстрообразная вёрстка элементов страницы на нашем проекте. Подумать только, для отображения одной кнопки требовалось до семи тегов на один элемент.

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



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. Попытка создать такую кнопку на серверной стороне вызывала негодование у коллег «пехапистов».

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

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

Reading time 2 min
Views 2K
Lumber room
Довольно давно вынашиваю идею о создании для каждого сайта отдельной страницы, на которой будут указанны параметры всего сайта, информация о его разработчиках и платформе разработки.

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

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

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

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

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


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

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

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

Reading time 1 min
Views 472
Lumber room
Недавно обнаружил необычный поисковик с 3D интерфейсом от Google.

image

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

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

Ссылка на SEARCH-CUBE
Total votes 20: ↑16 and ↓4 +12
Comments 15

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

Reading time 2 min
Views 1.4K
Lumber room
Я люблю дизайнеров, которые рисуют «невозможные» сайты. Это не даёт закиснуть, заставляет искать новые решения вёрстки. Одним из таких решений стало применение «резинового неповторяющегося фона».
Решение основано на взаимосвязи вертикальной и горизонтальной координаты у изображения. Говоря иными словами, если у картинки указать только высоту, то ширина изменится согласно исходным пропорциям.
Суть идеи в том, что небольшое по размеру (и по объёму) фоновое изображение вставляется не через таблицу стилей в 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" />

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

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity