Навигация по бесплатным сетам иконок

    Вместе с борьбой за качество и количество иконок в бесплатных сетах (снимаю шляпу перед gasyoun и Yusuke Kamiyamane) навигация по ним становится все более невыносимой. Особенно в ситуации, когда несколько проектов уже на стадии отладки и в каждом используется свой сет. Начинаешь путать названия для типовых иконок, а поиск нужной иконки в огромных PNG-картах занимает львиную долю времени.

    Для того, чтобы сделать этот процесс проще и удобнее, я написал небольшое рельсовое приложение, которое умеет эти иконки сортировать и фильтровать.

    Тэги

    Довольно долго пользуясь Fugue Icons, я так и не привык, что для ссылки «Редактировать» надо искать pencil.png, а не edit.png. Чтобы решить заодно и эту проблему, к каждой иконке привязаны теги (добавить тег можно при клике на иконку). Итоговый поиск производится как по имени файла, так и по всем тегам.

    В онлайне

    Пощупать это чудо можно здесь: http://iconpicker.deviantech.ru/. Nginx настроен на попытки заставить браузер закэшировать файлы в .png, поэтому единожды дождавшись полной прогрузки сета, работать можно довольно комфортно.

    Исходники

    Изначально приложение писалось под локальную работу. И дабы избежать хабраэффекта, всех, кому нужно активно отбирать иконки милости просим на Github. В репозиторий вместе с кодами включены четыре сета: Fugue Icons, Fat Cow, FamFamFam и Led. Добавить свои сеты, зная рельсы, можно пошурудив миграцию create_collections.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 64

      +1
      Поставил в закладки рядом с iconfinder.
        +1
        Не сочтите за рекламу, но совсем недавно выложил fugue icons на хостинг, ибо не всегда удобно закачивать с диска или заливать по отдельности. Буду рад, если кому-нибудь понадобится

        Fugue Icons Store
        Например, можно делать так:
        <img src="http://fugue-icons-store.chekalskiy.ru/blue-document-pdf-text.png" />
          +3
          Это вы смело :). Может лучше на гуглокод?
        0
        Очень нужный проект, я об этом мечтал :)
          0
          Надеюсь сеты будут добавляться. В закладки однозначно!
            0
            Честно говоря, не планировал… Но раз пошла такая пьянка, почему нет. Если есть идеи какие добавить, pm пожалуйста. Я знаю еще 2 хороших, которые использую время от времени. Добавлю на днях.
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            Прошу прощения?
            • НЛО прилетело и опубликовало эту надпись здесь
            0
            Чертовски круто. Тоже добавил в закладки, здорово если получится развивать! Спасибо!
              –1
              А будет ли возможность добавлять свои иконки?(* если сайт начнет развиваться *)
                0
                Свои иконки или сеты? Это ведь не хостинг для иконок, это просто браузер готовых сетов. Если у вас есть свои наборы, скидывайте, с удовольствием добавлю.
                +1
                а можно вас попросить сделать картинки либо строкам в таблице, либо по 4 в одной td. А то браузер начинает грузить столбцами, а не строками.
                Это, конечно, не must-have, но было бы приятней
                  0
                  Они специально по колонкам разбиты. Но сгруппировать по 4 идея неплохая. С другой стороны, существенно тяжелее страницы получатся. Попробую поиграть с этим, спасибо за идею.
                    0
                    Сделал. Действительно куда приятнее.
                    –2
                    добавьте черный список для тегов

                    habreffect.ru/fc7/4e4ceaace/icons.png
                      0
                      Не вижу в этом особого смысла. Тэги ведь не выводятся толком нигде. Может у кого действительно такие ассоциации с этой иконкой. Для иконки будильника с восклицательным знаком аналогия не самая плохая :)
                      0
                      Забыли отмену при случайном нажатии на иконку (форму с «добавить тег» невозможно убрать, кроме неявного добавления пустого тега — а ведь достаточно реакции на клик по затененному фону).
                        0
                        А можно скриншот? Это стандартый JQuery-UI диалог. У меня в нем есть кнопка «закрыть».
                          0
                          А, точно, там есть крестик. Жаль, нет отмены именно на фоне — куда удобнее, чем заниматься пиксельхантингом.
                        0
                        А можно добавить к сетам famfamfam'овские?
                          –1
                          Добавил.
                          0
                          не хватает какого-то стандартного языка описания/разметки таких сетов иконок, и простеньких библиотек для поддержки
                            0
                            Совсем не понял о чем вы, к сожалению.
                              +1
                              Например, создатель такого сета описывает его в XML как набор иконок столько-на-столько, каждой иконке назначает название и состояние (для кнопок). Для использования указываешь название иконки, а с состояниями уже библиотека разбирается. И какой-нибудь простенький просмотрщик/библиотекарь. Тут главное, чтобы стандарт был.
                            0
                            Я правильно понимаю, что акцент делается на локальную работу? Потому как создавать ещё один поисковик по иконкам бессмысленно.
                              0
                              Это вообще не поисковик. Это просто удобный способ работать с готовыми сетами.
                                0
                                А зачем это тогда? Чем Вам IconFinder, который ищет и по названию и по тегам, не угодил? И айконсетов там гораздо больше, выпущенных под разными лицензиями.
                                  0
                                  Вы пишете приложение. Обычно для того, чтобы обеспечить визуальную согласованность используется один и тот же сет. В нем три тысячи иконок. Для очередного раздела, для очередного действия надо подобрать иконку. И вот тут начинается самое веселое: поиск по трем тысячам файлов. Это – чтобы удобнее подбирать конкретную иконку для конкретного места из конкретного сета.
                                    0
                                    Если мне надо найти иконку в большом сете, я иду в айконфайндер, забиваю теги и в качестве модификатора указываю сет, то есть запрос выглядит следующим образом:

                                        pencil iconset:fatcow

                                    Естественно, нужен доступ к интернетам, но если честно, я не помню когда в последний раз он у меня пропадал, и срочно нужно было что-то найти.
                                      0
                                      Да, это действительно так. Но все-таки иконфайндер – это в первую очередь поисковик. Именно для навигации им пользоваться не очень удобно. Кроме того, там иконсеты только самые основные (тех же Led и FamFamFam нет). А сюда можно добавить что угодно, я же специально выложил исходник.
                              0
                              Вы бы сделали регистронезависимый поиск, а то «Инфо» находит, а «инфо» — нет.
                                0
                                Поправил, спасибо.
                                –5
                                ололо, тратата, труйнаны?
                                  –4
                                  ладно, хабровчане оказались не очень догадливыми. Откройте исходный код страницы автора статьи.
                                    –7
                                    третье пояснение. для дебилов. у автора в проекте стоят метатеги ололо, тратата, трайнаны
                                      +1
                                      ну и что? я там частенько приветы маме и папе передаю
                                  0
                                  щикаааарно!
                                  большое спасибо!
                                    0
                                    вы — гений!
                                      +1
                                      Не в тему, но эх, почему все иконки всегда под CC. А Public Domain, или MIT, или еще под какой-нибудь приятной лицензией почти и нет ничего (разве что tango.freedesktop.org/Tango_Icon_Library + thenounproject.com/ ). Т.е. это право автора — выкладывать свою работу под любой лицензией, и за то, что под CC выкладывают — им тоже спасибо большое, но все равно жалко, что так.
                                        0
                                        Вижу многие добавляют в закладки (в том числе и я). По-сему было бы неплохо добавить favicon.ico к ресурсу. Будет еще удобнее в закладках находить. Хоть самую простую, но запоминающуюся.
                                          0
                                          Поставил. Такая подойдет?
                                            0
                                            Вполне. Спасибо.
                                          0
                                          Можете мне на мыло кинуть исходник, пожалуйста? Интересно изучить.
                                          0
                                          Очень очень круто. Понравился выбор числа колонок. Это редкий пример удачной кастомизации интерфейса.
                                          Только пара инерфейсных моментов, которые сделали бы ваш сервис просто идеальным:
                                          — Если ввёл слово в поиске, при переключении сета оно пропадает. Т.е. часто такой сценарий: я хочу увидеть, как выглядит «new» в разных сетах. Но при переключении сета приходится по новой вбивать new.
                                          — Если бы фильтрация проходила динамически, а не по кнопке «найти», было бы очень удобно. Как поиск гугла.

                                          Улучшения то грошёвые, а опыт взаимодействия улучшат значительно.

                                            0
                                            Первый пункт я сделал, а второй просто моментально добьет сервер. Я хотел это сделать, это действительно легко. Но в последний момент отказался, все-таки у меня ресурсов гугла нет :). В ближайшее время наверное сделаю для «локальных инсталляций» с вомзожностью включить через конфиг.
                                              0
                                              Спасибо, стало лучше. Может фильтровать не каждое нажатие символа, а только после двух-трёх букв? Впринципе можно ещё создать словарь и смотреть на клиенте, попадает ли введённое слово в словарь, и фильтровать только в этом случае. Я уверен, слова запросов иконок весьма ограничены. (underscore.js в помощь, ну вы в курсе наверное).
                                              Хотя второе возможно введёт путаницу во взаимодействие, если словарь плохой. Если словарь будет хороший, то нет.
                                                0
                                                Ну и ещё более низкоуровневое решение. Фильтровать только тогда, когда перерыв между нажатием клавиш длится более секунды. Это самый верный вариант, видимо. Т.е. очевидно, что если человек перестал нажимать на клавиши — он ожидает результата (переносит руку с клавы на мышь, двигает мышью, кликает по поиску; не все энтер нажимают). Да, ещё можно фильтровать тогда, когда сдвинулась мышь. Это точно значит, что ввод прекращён.
                                                  0
                                                  Можно ещё предложение? Небольшое улучшение: сделайте, чтобы по умолчанию выбирался первый сет автоматически. Сэкономит лишнее действие.
                                                –1
                                                Вот, видел похожий сервис. Здесь, вроде, после регистрации можно самому иконки добавлять.
                                                  0
                                                  И исходники тоже имеются
                                                    0
                                                    Warning: proc_open() has been disabled for security reasons in /var/www/hiasm/websvn/include/command.php on line 166
                                                  0
                                                  Честно признаюсь — никогда ничего не писал на ruby/rails

                                                  Что я имею сказать — при простом запуске rackup config.ru – все работает отлично, на порту 9292 поднимается сервер.

                                                  При попытке запуска с параметром -D (режим daemonize) – приложение освобождает терминал, но не стартует. Странно.

                                                  Третьей была попытка установки сервера passenger (кажется так это пишется), как модуля к Апачу (у меня MacOS 10.6) — приложение было распознано, но запускаться не захотело — выдало какую-то ошибку про неналичие в БД нужной таблицы (при том, что если запускать, как в пункте 1 — все нормально).

                                                  Итого — может быть я что-то делаю неправильно, но, честно — напишите хоть минимальную инструкцию по деплою в полевых условиях, пожалуйста. А то, честно сказать, запускать каждый раз терминал, чтобы запустить приложение, а потом лезть в браузер — как-то не очень, честно. Спасибо.
                                                    +1
                                                    cd $dir; rails s -d
                                                  0
                                                  А можно добавить немецкие иконки, пожалуйста?
                                                    0
                                                    Это не немецкие, а русские (петербургские) на немецком сайте :) Наших рук дело, поэтому знаем.
                                                      0
                                                      Я обощил названия наборов иконок, названных в честь немецких городов.

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

                                                  Самое читаемое