Облако галерей

    Если уже кто-то придумал до меня — обидно. Мысль пришла вчера, пишу сегодня.

    Облаком тэгов (категорий) уже никого не удивишь. Принцип вывода так же известен всем: задается два значения размера шрифта — наибольший (пусть будет 40px) и, соответственно, наименьший (пусть 10). Это пределы, внутри которых берется значения для размера выводимой категории в зависимости от различных условий: количества просмотров, записей и т.д.

    Но это, что касается новостных лент, блогов и других ресурсов, где основным контентом является текст. А как быть с фотогалереями?

    Теперь вспомним одну из возможностей html — задание размеров изображения в процентах от его фактического размера. Делается это элементарно: вместо исходных параметров, ставим значения от 1 до 100 %.
    Многие галереи поддерживают создание одинаковых превью для альбомов: например, из фотографии вырезается квадратный участок и сжимается до размеров 100 на 100 px.

    Теперь все вместе. Пусть у нас задано два значения — 25% и 100%. 25% — значение размера стороны превью от исходного размера (для примера брали 100px) при наименьшем количестве посещений (или размещенных фотографий),
    а 100% — соответственно, при наибольшем.

    Получаем своеобразное «облако галерей» =)

    UPD: примерно так.

    Поделиться публикацией

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

      +3
      Помоему только Опера делает ресайз картинок, размеры которых задаются в HTML, более-менее симпатично. IE и FF дают довольно грубое изображение для не кратных размеров. И маленькие изображения превратятся в кашу.

      Кстати - уменьшенные изображения при наведении курсора хорош обы "увеличивать", чтобы пользователь мог посмотреть что там.
        0
        Можно задать шаг, например в 5% =)
        Увеличение тоже сделать можно. На подобие adme.ru
          0
          на сколько это типичная и простая мысль для информационного дизайна. но по большому счету из-за особенностей сейчашнего веба (в т. ч. штмл-верстки), это никому не нужно (было бы нужно - этого было бы полно).

          Впрочем, части новостных сайтов бывают похожи на такие облака: http://www.drive.ru/
            0
            На "драйве" - не "облако", а мозаика. Я предлагаю несколько иное.
          0
          MSIE кстати двумя способами масштабирует; качественно и некачественно, соответственно. По-умолчанию вроде некачественно и быстро масштабирует. А изменить поведение можно при помощи спец аттрибута в <img> тэге.
        +1
        А смысл? Категория одна у многих постов, а такая картинка у одного пользователя. Может пригодится для рейтинга конечно, но тогда логичней, на мой вгляд, расположить картинки в строку. Получится лесенка.
          0
          Ведь на галерее может быть категория с множеством альбомов пользователей. Например, "природа". Оттуда может браться случайная картинка, делаться превью и выводиться, скажем, на первую страницу вместе с другими.
            0
            Понимаете ли в чем дело. Идея прекрасная. Вот только есть одно но. При отображении «облака галерей» у вас просто появится еще одна галерея, которая имеет слишком маленький «информационный груз». Если в случае категорий при прочтении названия категории у человека формируется абстрактный образ (например Google — «О, новости о компании Google!»), то в случае появления случайно картинки, у человека не может возникнуть такого образа. Все потому, что одно и та же картинка может относится к разным категориям. И что же делать, если выведется одна и та же картинка (та которая выбирается случайно, по вашим словам) несколько раз, в качестве представителя разных галерей?
              0
              Вы правы. Добавлять подписи - тоже не выход: получится "стандартное облако" с картинками. До конца все не продумал, к сожалению.
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            Все попробовать сделать стоит =) А вдруг удачно выйдет? Жаль, что я не программист. Придется просить кого-нибудь помочь. За основу возьму Wrodpress с плагином галереи и облака.

            Спасибо, что оценил идею =)
              0
              Воронежский предлагал ее давным давно.
              Идея получила развитие в каком-то информационном источникеи получила авардс.
              Если я правильно понял идею и ее реализацию.
                0
                А можно ссылку и описание? Может, я все же смогу внести что-либо новое =)
                  0
                  Там про другое (в середине страницы, поиск по словам "еще прошлой осенью придумал"). А идея нормальная, но чтобы сделать красиво - нужно сложный алгоритм запрограммить. Облако наверное будет неплохо смотреться для навигации внутри категорий.
                    0
                    Ну это то я читал. Давно еще =) Там суть в составлении своеобразной "мозаики дня". Да, у меня несколько другое.
                –1
                Я это полгода назад придумал :)
                  0
                  А можно посмотреть в работе?
                +1
                Мне кажется, будет очень громоздко, имеет смысл только когда облако - основной элемент на странице. А вообще пробуйте, интересно будет взглянуть :)
                  0
                  Можно сделать просто отдельную страницу, как здесь же, на Хабре. Либо разместить облако в шапке страницы на всю ширину, как Вы и сказали, сделав основным элементом =) (Пусть займет весь "первый экран", в который я не верю =))
                  0
                  Будет некрасиво, сейчас в примере не красиво. Если будете пробовать, то советую сделать размер картинок от 10х10px до 100%. В идеале картинки должны быть отцентрованы относительно друг друга и по вертикали и по горизонтали, ну хотя бы valign="middle". Ну и конечно они должны увеличиваться в самбнейл при наведении.
                    0
                    Мне кажется, действительно будет накладно менять размер картинки. Тогда уж просто сортировку по популярности.
                      0
                      В смысле, накладно? Фактический размер всех превьюшек будет на самом деле одинаков. До нужного размера в процентах подгонять их будет уже браузер.
                      0
                      Текстовое облако, кроме размера шрифта, еще имеет сортировку по алфавиту - и тем оно и удобно.

                      Тут никакой сортировки по алфавиту быть не может, а потому картинки можно просто отсортировать по популярности.
                        0
                        Можно отсортировать по названию раздела и вывести его под изображением мелким шрифтом =)

                        Я понимаю, что не продумал много нюансов. Обязательно доработаю =)
                          0
                          Вот и пришли к текстовому облаку из названий разделов :)

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

                          Ну и выводить их нужно в таблице с одинаковой шириной и высотой ячейки и выравниванием по центру по горизонтали и вертикали, иначе смотреться будет лажово.
                            0
                            По поводу выравнивания по центру - я тоже так подумал =) Пример выше я накидал за пару минут для общей иллюстрации идеи =)
                        0
                        И еще одна мысль. На самой маленькой превьюшке изображение будет очень плохо видно и пользователь может нажать просто ради интереса, чтобы узнать что там изображено.
                        И тем самым попортится вся статистика, если таких будет много :)
                          0
                          а расположить можно по такому принципу:
                            0
                            очень красиво, но ИМХО не удобно, т.к.вряд ли можно это хорошо автоматизировать, а чтобы в ручную все выстраивать, надо делать это каждый день, а то и по несколько раз... А теперь представь, что этих галерей не 5, и не 10, а хотя бы 100... понимаешь о чем я?

                            Но, спорить не буду, очень красиво и привлекательно;)
                              0
                              где-то на фишапе, чтоли, такая штука есть и вполне себе работает.
                                0
                                Я для того и написал, чтобы выяснить, первый я или нет =) Конечно, уже все придумано до нас. Но ведь можно взять уже готовое и добавить немного своего, подать по-другому =)

                                Буду благодарен за ссылочку.
                                  0
                                  с наскоку не получилось найти
                                    –1
                                    Станислав, чтобы увидеть первые этапы реализации идеи с облаком галереи зайдите, пожалуйста, по ссылке: http://vinny.fishup.ru/albums/p/gid/5801…
                                    Это просмотр альбома на фото-сервисе Фишап в режиме "Фишапный".
                                      0
                                      Вы это к тому, что предложил Arguz? Я задумывал это иначе.
                                      А где зависимость размера от факторов: количества посещений, публикаций?

                                      Просмотрите внимательно все комментарии. Подобные ссылки и примеры есть. Но это отличается от предложенного мной. Похоже визуально, но идея иная абсолютно.
                                0
                                Боюсь, что так не пойдет. Теряется сама идея "облака". Да и технически это будет довольно сложно.
                                  0
                                  Похожая штука сделана на last.fm
                                  Image Hosted by ImageShack.us
                                  Правда это уже не облако _галерей_, а мм.. мб облако иконок?
                                    0
                                    Именно этот пример и хотел привести, но я не уверен что тут размер зависит от популярности.
                                      0
                                      Да, опять мозаика =) "Похожая штука" просто похожа на предложенное Arguz`ом выполнение облака.
                                  +1
                                  Можно сделать и по другому, если цель отсортировать картинки по популярности, то можно менять не размер картинок, а их расположение. То есть, если учесть, что самое просматриваемое место на странице это левый верхний угол, то более популярная картинка должна стоять ближе к нему. (При таком способе можно учитывать общее количество картинок и строить из них различные фигуры, на пример пирамиды и т.п. тогда более популярная картинка должна быть выше или на более "главном" месте по логике.)
                                  А также можно соединить оба принципа (расположение и размер) и получить новый "вид" не облако, а комета. :) как вам мои идеи?
                                    0
                                    Идея именно в облаке, в зависимости размера от факторов. Простое перемещение позиций - как раз обыденность =) Насчет "кометы", "пирамиды" - можно попробовать
                                    0
                                    Если я все правильно понял, ты вы, автор, кое что напутали (а в итоге - путаница во всем обсуждении).

                                    Разберитесь: облако тегов было создано с целью придать тексту графическое распознавание. Ранее это было решено цифрами (e.g. "Google - 148") , но тогда все превращалось в неудобоваримый блок-расческу. Поэтому кому-то пришла идея делать это размером (я ещё тогда подумал о варианте с цветом+размером, типа горячее-холодное. Ср. Горячая новость!).
                                    Вы же в свою очередь пытаетесь навесить на графическое изображение ещё одно графическое распознавание. Это только всё усложнит. Пока не могу придумать, что лучше пойдет - текст или символ, но в любом случае это должна быть противоположность "изображению". Как варианты:
                                    - рядом с тумбнейлом увеличивающиеся\уменьшающиеся цыфры (в стиле облака), но тумбнейлы стоят все равно в колонку.
                                    - расположение тубнейлов как в стакане - то, что выше - популярнее. Можно баловаться и вносить эстетику - картинки в виде пузырьков газа в воде поднимаются вверх, и тут сработает также уменьшение размера к низу. Только вопрос, как сделать это динамичным? На ум приходит флэш, но я не программист и тут некомпетентен.
                                    - расположение тумбов на строке шкалы (или как это правильней называется?). Тогда ещё можно внести временное определение. Например, располагающиеся по оси X картинки, до оси Y менее популярные за прошедшее время, после - недавно появившиеся (скажем, запостеные), а популярные концентрируются вокруг самой оси Y вверх. Получается такой Царь Горы.

                                    эмм... вот.
                                      0
                                      "- рядом с тумбнейлом увеличивающиеся\уменьшающиеся цыфры (в стиле облака), но тумбнейлы стоят все равно в колонку.
                                      - расположение тубнейлов как в стакане - то, что выше - популярнее. Можно баловаться и вносить эстетику - картинки в виде пузырьков газа в воде поднимаются вверх, и тут сработает также уменьшение размера к низу. Только вопрос, как сделать это динамичным? На ум приходит флэш, но я не программист и тут некомпетентен.
                                      - расположение тумбов на строке шкалы (или как это правильней называется?). Тогда ещё можно внести временное определение. Например, располагающиеся по оси X картинки, до оси Y менее популярные за прошедшее время, после - недавно появившиеся (скажем, запостеные), а популярные концентрируются вокруг самой оси Y вверх. Получается такой Царь Горы."


                                      А вы уверены, что я все усложняю? =)
                                        0
                                        а может и я. Голова последние дни немного кругом идет...
                                        Спасибо, что заметили - мне сейчас сторонней оценки не хватает, ага.
                                        8(
                                      0
                                      В общем, будем считать - идея принята. Знакомый программист обещал помочь с написанием небольшой галереи и скрипта для построения облака. Как только будет готово, выложу новый пост.
                                        0
                                        Вот о чем я говорил: http://www.wk.com/#/works/
                                        Неудобно воспринимать картинки при наличии плашек других цветов. А ещё к этому примешиваются плюсики. Нужно время на адаптацию. Но облака же созданы для "как раз наоборот".
                                          0
                                          Опять "мозаика" - просто поле из одинаковых по размеру картинок. Никакой зависимости параметров от заданных факторов. И на облако не похоже. Просто прямоугольное цветастое поле =)
                                          0
                                          Боюсь Вы опаздали, недавно где-то проскочила новость о том, что Apple запатентовала идею иконок с варьирующимся размером в зависимости от их важности для пользователя.
                                            0
                                            Насколько я понял из обрывков новостей, эта идея относится к интерфейсу ПО, а не web-проектов.

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

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

                                            Пробная галерея и скрипт (php) облака скоро будут готовы.
                                            Посмотрим, как отреагирует Яблоко =)

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

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