Дизайн страницы обсуждения и просмотра папиров / Свободный диспут / Wallpapers[ru]
Чат

Авторизация

Напомнить пароль
Регистрация

Обои для рабочего стола без подписи

Свободный диспутДизайн страницы обсуждения и просмотра папиров

Тут выкладываем драфты по функционалу

Здесь обсуждаем интерфейс просмотра папиров, комментирования работ, сохранение папиров юзером на свой жесткий диск и т.д.
Вверх

Комментарии (85)

rss | свернуть / развернуть
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.
собственно, вот так бы хотелось видеть окно для просмотра картинок:

gallery img window

кнопка «лупы» — это загрузка полноразмерного изображения. Также можно нажать дабл-клик на работе, это равносильно
кнопка Ч/Б — смена фона
стрелки для листать. Если достигается крайняя работа, одна из стрелок становится задизейбленной (визуально — полупрозрачной например)
ESC — для дублирования креста вверху.

надо еще добавить надпись «дабл клик загружает полный раззмер» или как-то так.
свернуть ветку
Мне так не хочется этот крест делать, он залезает на изображение.
быть может получиться вынести управление за рамку и четко внедрить его
свернуть ветку
Изображение без подписи
я сделал подписи к каждой из кнопок
свернуть ветку
в реальности они могут быть лишь всплывающей подсказкой при наведении после 2сек
свернуть ветку
Женя, выкладывай сюда все свои драфты — основная страница и т.п.
свернуть ветку
отлично, более чем :)
только что-то не открывается фулсайз картинки... не мог прочитать что написано
свернуть ветку
До меня туго доходит. Без этого экрана я никогда бы не догадался о расшифровке «D» и «F».
P.S. Кстати, была такая дизайнерская книжка под названием: «Не заставляйте меня думать!»
свернуть ветку
к тому же "Download" — это "Скачать", а на деле не качаешь, а смотришь.
Как вариант маркер "100%" вместо "D".
свернуть ветку
Мне вполне понравился тот макет, который ты присылал вчера днём, можно, допустим, сделать такую же кнопочку как у тебя «esc» справа, только на ней ещё нарисовать крестик, чтобы было понятно, что это — закрытие, стрелки также справа внизу, а вот переключение фона и подсказку о перетаскивании — всё лучше наверх, потому что они будут всегда, а стрелки будут не всегда (на страницах обсуждения работ стрелок нет), это может вызвать некоторую дисгармонию, если какие-то из функциональных клавиш или подсказок будут внизу. :\:|:/
свернуть ветку
Чтобы не быть голословным показываю упомянутый макет:

Макет от IESYS'а

Голосуйте за тот или за это комментарий. :)
А вообще, мне безумно нравятся «клавишные» кнопочки, которые есть сейчас, кнопку смена фона и переноски явно надо перерисовать, я создавал их в попыхах, чтобы хоть что-то было. :)
свернуть ветку
Дим, Женя нарисовал реально круче... давай наверное как он — потому что смотрится в самом деле здоровско. Ибо клавиши в виде кнопок, различные по стилю другие кнопки — смотрится не очень.
Вопрос — как увеличить то, что загрузил Женя? или то, что загрузил я...
Вот твое — увеличивается!
свернуть ветку
Вы заливали картинку «оригиналом», то есть она заливается как есть и уменьшается до 500 пикселей, если больше — для обычных картинок по тексту хорошо подходит, а я загрузил «превью», то есть делается маленькая кликабельная картинка.
свернуть ветку
я немного не понял про какую версию ты говоришь? то что с корабликом это я рисовал вчера.
если с твоей зефиркой то сегодня делал,
вот чтобы посмотреть ту без увеличения только с другой картинкой.
Изображение без подписи

я в принципе и за кораблик и за этот
свернуть ветку
я за ту, где PZC ))
свернуть ветку
рамки для Димы, чтобы расстояние видно было
свернуть ветку
Может «D» заменить на красивую иконку, оформленную в виде увеличительной лупы? Изменение освещения в виде иконки солнышка или лампочки. При наведении мышкой они бы желтеньким подсвечивались. Не делайте эти иконки от клавиатуры, вполне достаточно стрелочек и подсказки к ним.

Посмотрите оформление www.flickr.com
свернуть ветку
на Фотосайте под картинкой есть вполне понятный значок Изображение без подписи

а на Яндекс-фотках предпочитают писать словами: «Показать в другом размере» -> [разные варианты], «Оригинал (B×H)»
свернуть ветку
Готова кажись, твоя галерея, зацени :)
свернуть ветку
Думаю, лучше разместить кнопки влево и вправо по бокам, чтобы если одна или обе исчезает — небыло потери дизайна, а делать их дизейблами... тоже можно, но это лишний код и они будут показаны, хотя и не активны(
свернуть ветку
Скажите, а нельзя отключить эффекты плавного перехода?
Может стоит включить соответствующий пункт в локальные настройки?

У-у-у-у-у-у-у-у-у-у-у-у-у-вау! Папир (почти) открылся.
У-у-у-у-у-у-у-у-у-у-у-у-у-вау! Меняется цвет фона. У-у-у-у-у-у-у-у-у-у-у-у-у-вау! Вот уже и сменился.
У-у-у-у-у-у-у-у-у-у-у-у-у-вау! Окошко закрывается.... Лепота! ;)

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

Да и просмотр папиров выполнен в стиле ненависных мною всплывающих баннеров.

Кстати, как кинуть другу ссылку на папир?

Всё это напоминает информационный канал «РОССИЯ 24». Обратите внимание, насколько он передизайнен.
Там всё не простое, а «красивое»:
— в левом нижнем углу располагаются часики; начиная с какого-то момента разделитель часов и минут (ЧЧ:ММ) стал не статичным, а мерцающим — ну а как же?! надо же было как-то отразить отсчет секунд?
— внизу экрана отображается информер; опять же, в какой-то прекрасный день у дизайнера зачесались руки и смена надписей в информере стала с проявкой (как на нынешнем W3) — происходит прокрутка надписи, новая надпись слегка вспыхивает, а потом наконец становится читабельной; а как же без этого?!
— если в финансовых новостях показывают какой-то график, то теперь он обязательно в отдельном окошечке, которое непрерывно покачивается и извивается в перспективе — это кромешный ***ец! (простите!) У дизайнеров напрочь сбилась фокусировка: вместо стремления улучшения восприятия они перебросились на наложение интерфейсных эффектов;
Бац! И в кратчайший срок информационный канал «РОССИЯ 24» превратился в очередную блевотную флеш-презентацию, осталось ещё добавить анимированных баннеров и получится Мейл.ру во всей красе.

Ребята, остановитесь!

По-моему, самое сложное — это сделать просто.
свернуть ветку
С одной стороны согласен «вжжжжиииик» окон 100% надоест завсегдатаям. Но будет нравится «гостям-посовикам», я уверен ) Тем не менее, идея про поциональность этих наворотов поддерживаю.
В целом, Игорь, понимаю о чем ты — на данный момент Дима будет вести работу только над функционалом. (голосование, рейтинг и т.п). Закончит — займемся «лицом».
свернуть ветку
Вот и вариант: сделать эффекты отключаемыми через личные настройки. Тогда и гости будут рады, и ветераны умиротворены.
свернуть ветку
Большинство новых сайтов, помойка.
На W3 была прикручена уже готовая галерея (баннерная).
свернуть ветку
случайно запостил), в принципе можно все вернуть как изначально было в макете, маленькое превью, название, а открытие уже на новой странице как на W2 было.старый макет

Либо делать как на 500px.com/photo/172196
свернуть ветку
Я переименовал тему данного топика.
Т.к. идет оттачивание деталей, то нужны узкие темы. Как видите, данное обсуждение оказалось довольно развернутым (это хорошо).
Поэтому здесь обсуждаем только одну функцию — просмотр папиров. А, к примеру, для драфтов главной страницы создадим новый топик.

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

свернуть ветку
Пара вопросов:
1) как дать ссылку на папир?
2) как открыть папир в отдельном окне, чтобы можно было на него посматривать и писать к работе камент?
свернуть ветку
+3) ведутся ли счетчики просмотра папиров?
свернуть ветку
да ведутся) всегда были
свернуть ветку
+4) как на W3 смотреть работу и одновременно её комментировать?

Вот неплохой пример: www.photosight.ru/photos/4318010/
Вот ещё: fotki.yandex.ru/contest/104/users/fome1972/view/398655/?page=0

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

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

Безобидно можно убрать плавное затухание, пусть будет четко как «вконтакте»)
свернуть ветку
Может если подвинуть папир немного вправо, описание влево или как на Render.ru наверх в открывающийся блок, а комментарий поставить прямо под папиром, то все будет видно и понятно, и ссылка будет на «родном месте».
свернуть ветку
папир немного вправо, описание влево
Папир влево, описание вправо
свернуть ветку
Фотосайт слегка перегружен. А про Яндекс не сказал бы. Вот что здесь — fotki.yandex.ru/contest/104/users/fome1972/view/398655/?page=0 — лишнего?
свернуть ветку
По-моему сейчас всё идеально. Сделать ещё, чтобы можно было давать сссылку на раскрытую галерею с конкретной работой, тогда её и посмотреть можно будет и обсудить. Что-нить с анкорами помучу.
свернуть ветку
Сделано, при открытии работы добавляется анкор, если потом открыть ссылку с анкором — запустится нужная работа на странице, пример: www.wallpapers.ru/#img7e8295
свернуть ветку
Функция на заметку: акцентирование внимания на фрагменте работы

На Фотосайте есть прекрасная функция — кадрирование. Обратите внимание на значок Изображение без подписипод любой фоткой. Эта кнопочка позволяет выбрать на фотографии прямоугольный фрагмент произвольного размера.

Если авторизоваться на Фотосайте, то выделенный фрагмент можно вставить в комментарий. Таким образом при обсуждении работы можно обратить внимание публики на какой-то фрагмент в работе (или предложить лучший вариант кадрирования).
свернуть ветку
мне кажется это для ленивых фотографов )) настоящий дизайнер или художник сам скажет, куда смотреть автору, который свою работу знает наизусть. Кадрирование — то же самое, тут проще сказать «я бы сделал квадратом», чем кому-то что-то показывать и обрезать. ИМХО. Кстати, наш новый сайт позволяет в топик загружать картинки, так что если кому будет что сказать — велкам, нарисовал и выложил.
свернуть ветку
Дело не в кадрировании, а в том, что когда пишешь комментарий к работе можно выделить на ней фрагмент и включить ссылку в комментарий — мол, вот тут (ссылка на кадрирование) не очень получилось, а вот эта деталь (+ссылка на кадирование) замечательная. То что я предлагаю — это визуальная указка.
свернуть ветку
Когда напрограммирую самостоятельный выбор превью пользователем — реализовать эту функцию будет непроблема по аналогии, но это всё дело пятое-десятое.
свернуть ветку
Что мне не нравится в смотрелке папиров:
1) дополнительные кнопочки в нижней панельке очень мелкие, в них мышкой фиг попадешь;
2) назначение этих кнопочек трудно понять;
3) многие их просто не заметят;
4) невозможно понять, какого размера оригинальная работа — См. www.spds.ru/info/examples/help-form.html — Там при увеличении справа в нижнем углу написано человеческим языком: «Реальный размер: 939x697», при этом размер — это ссылка. Всё понятно.
5) всплывающая картинка занимает не весь экран -> есть поля, на которых можно было бы написать имя автора, название работы, год создания, но этого нет. По-моему, каждая работа должны быть подписана. Нельзя отрывать работу от автора. Название также имеет огромное значение для восприятия.
6) как же дать другу ссылку на папир? всё всплывает и уплывает. Но где же адрес папира? Вот — лови! ?!

А в остальном, прекрасная маркиза, всё хорошо, всё хорошо!
свернуть ветку
1. Если увеличим в 1,3 раза норм?
2. Я готов поискать другие кнопочки
3. Дело времени
4. При изменении иконок будет яснее, (ссылка не открылась)
5. С этим согласен, мб, выводить название не на работе, а сверху или же как было раньше на серой плашечке исчезающей?
6. Мб добавим кнопку с пояснением «скопировать ссылку для друга»?

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

«Архитектор более не проектирует здание — он проектирует жизнь социума средствами этого здания. Раз он проектирует жизнь, он находится с ней в каких-то других отношениях, чем те, чью жизнь он проектирует. И то, что они живут в соответствии с его проектом, является доказательством, что его воля истинна...» (Г. Ревзин «Очерки по философии архитектурной формы»)

Как бы это пафосно не звучало, сейчас мы все в роли архитектора, проектируем этот сайт.
свернуть ветку
Только ты, друг, пожалуйста, не обижайся, что я постоянно ворчу. Вы все тут молодцы! Сайт получается очень хороший.
Просто всё, что я успеваю — это по-дружески покритиковать, чтобы в итоге получилось ещё лучше.
Если мои комментарии выглядят как-то негативно, то поверьте: я желаю только добра и очень вам всем признателен за вашу работу!
Я очень-очень рад, что сайт попал в хорошие руки!
свернуть ветку
Изображение без подписи по п. 4 4) невозможно понять, какого размера оригинальная работа — См. www.spds.ru/info/examples/help-form.html — Там при увеличении справа в нижнем углу написано человеческим языком: «Реальный размер: 939x697», при этом размер — это ссылка. Всё понятно.
Прилагаю скриншот (как вариант)
свернуть ветку
Ещё один вариант средней превьюхи со ссылкой на большую картинку: eu.blizzard.com/diablo3/media/screenshots.xml#167
Здесь в центре стоит ссылка с человеческим определением: «Загрузить в высоком разрешении».

* Кстати, одной из альтернатив значку "D" может быть широко известный логотип "HD".
свернуть ветку
по п. 1:
— «дополнительные кнопочки в нижней панельке очень мелкие, в них мышкой фиг попадешь;»
— Re (IESYS): «1. Если увеличим в 1,3 раза норм?»


Насколько увеличить? — На самом деле, мне трудно ответить. Дело в том, что восприятие и крупность объектов сильно зависит от монитора (в широком смысле этого слова).

Например, у моего рабочего ноутбука повышенное разрешение экрана — 1680x1050 (при размере 15.4";), и на нем все элементы интерфейса смотрится мелковато. В то же время на основном мониторе 20" с разрешением 1600x1200 визуально размер кнопочек вполне хорош. На прочих мониторах результат будет также различным в зависимости от плотности точек на экране.

Прихожу к субъективному выводу: меня больше напрягает не визуальный размер кнопки, сколько размер кликабельной зоны.

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

* По этой причине на W2 я делал ссылки у листалки страниц не такие: 1 2 3 4 5 6 7 8 9 10 11 ..., а такие: 01 02 03 04 05 06 07 08 09 10 11 ... Здесь область для клика вдвое больше, а экономия места сомнительная.

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

* Недавно наткнулся на статейку на смежную тему: «Максимизация области для нажатия на cсылках».
Заметка с исходниками: ruseller.com/lessons.php?rub=2&id=856
Наглядный пример: ruseller.com/lessons/les856/demo/demo_856.htm
свернуть ветку
6) Все адреса всегда в адресной строке :)
свернуть ветку
в адресной строке — ссылка на топик — на обсуждение работы. В одном топике может быть залито несколько картинок.
Да, если разобраться, то можно отыскать ссылочку "#" (что-то типа www.wallpapers.ru/drafty-dlya-funkcionala-razlichnyh-chastey-sayta/#comment458) и бросить ей в друга. Это хорошая функция, но она для знатоков.

А надо что-то ещё и для «блондинок» типа меня. Вот всплывает окно, мне картинка нравится, а я не знаю, как сбросить ссылку на то, что я вижу, в e-mail или в Skype, или в ICQ, или ЖЖ.
свернуть ветку
Поддерживаю ZANZIBAR'а!
А архитекторам совет: в погоне за лаконичностью не потеряйте функциональность.
свернуть ветку
Кнопка на Ajax

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

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

Когда тема горяча и ты принимаешь в ней активное обсуждение, все не так сложно и можно еще ориентироваться. Но стоит тебе отстать на пару дней, а то недель и все. Разобраться во всем этом общении становится очень сложно.

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

Когда кто-то отвечает на сообщение, то его background будет такого же цвета. Так можно легко по цвету отследить кто, кому отвечал.

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

Или так:

ALEXANDERN
Привет, Романа! Как твои дела?

ROMANA @ ALEXANDERN
Все хорошо!
свернуть ветку
Привет, ALEXANDERN!!!
Надеюсь, что у тебя тоже дела идут нормально :)
свернуть ветку
В дополнение к Вашим пожеланиям: на W2 (плюс на недоделанной мною версии W2+) была предусмотрена такая фишка:

Фильтры сообщений:
1) «показывать только новые сообщения»;
2) «показывать только мои сообщения»;
3) «показывать только адресованные мне сообщения».

Аналогично для тем (топиков):
1) «показывать только обновленные (и новые) топики»;
2) «показывать только мои топики»
3) «показывать только топики с моими сообщениями».

Эти нехитрые включалки/отключалки помогали мгновенно сориентироваться в обновлениях и переписках.

* В техническом плане на W3, наверно, можно было бы организовать подобные фильтры и подсветки меседжей динамически — без перезагрузки страниц с сообщениями.
свернуть ветку
Ещё про фильтры: программируя нереализованную версию W2+, я стремился сделать так, чтобы время последнего просмотра дискуссий по каждому топику сохранялась на сервере, чтобы юзер мог пересаживаться с рабочего компа на домашний, и наоборот, а фильтры при этом работали корректно, словно работаешь на одном компе.
свернуть ветку
Мне тоже не хватает возможности вставить имя (ник) человека, к которому обращаешься.

На W2 ник вставлялся в поле ввода сообщения в виде специального кода разметки (включающего ник и номер сообщения внутри топика).
* Вставка ника в поле ввода производилась кликом по нику в заголовке камента.

После публикации сообщения ник+номер_поста становился ссылкой — кликнул, перелетел на в соответствующее место внутри топика.

Кроме того, я программировал W2+, где можно было включать / отключать фильтр: «Показывать только те сообщения, которые адресованы мне».
Этот фильтр работал как раз по кодам разметки с никами-обращениями.
свернуть ветку
Важный момент просмотра папиров — это сохранение юзером понравившихся картинок на своём компе!

На W2 была реализована такая штука: все закачиваемые на сервер авторские работы сохранялись на сервер с «говорящими именами».

Например:

20110301_edwardkellis_wallpapers_ru_dubstep_wave_1280x1024_(144282)WP.jpg
20110301_spllinkart_wallpapers_ru_moya_pervaya_rabota_v_takom_zhanre_hip-ho_1280x1024_(144283)WP.jpg
20110302_kirillch_wallpapers_ru_stremitsya_k_beskonechnosti_1280x800_(144313)WP.jpg
20110302_uzhazz_wallpapers_ru_the_end_1600x1200_(144321)WP.jpg
20110304_enjoyyourlife_wallpapers_ru_ishodnik_dlya_study_in_green_1280x800_(144329)IMG.jpg
20110305_fer0m0n_wallpapers_ru_way_1440x900_(144336)WP.jpg
20110306_advil_wallpapers_ru_lend2_1680x1050_(144354)WP.jpg
20110306_amplifier404_wallpapers_ru_gl227s_1920x1200_(144355)WP.jpg
20110306_madness_wallpapers_ru_sestry_1920x1200_(144350)WP.jpg
20110307_ascha_wallpapers_ru_blackberry_goth_1600x1200_(144362)WP.jpg
20110308_himebaka_wallpapers_ru_936_945_960_966_974_1280x1024_(144375)WP.jpg
20110308_spllinkart_wallpapers_ru_spllink_hip-hop_1280x1024_(144378)WP.jpg
20110309_uzhazz_wallpapers_ru_veter_1600x1200_(144391)WP.jpg
20110311_gogojlb_wallpapers_ru_poslednyaya_metel_1600x1200_(144433)WP.jpg
20110311_krasnyechirvyazhki_wallpapers_ru_artefakt_1280x800_(144427)WP.jpg
20110312_enjoyyourlife_wallpapers_ru_lilac_1920x1200_(144446)WP.jpg
20110313_krasnyechirvyazhki_wallpapers_ru_artefakt-2_1280x1024_(144451)WP.jpg
20110314_bliss_wallpapers_ru_glazyuki_1024x768_(144456)WP.jpg
20110314_uzhazz_wallpapers_ru_vesna_1600x1200_(144457)WP.jpg
20110315_chokki_wallpapers_ru_tsitrusovyj_monstr_1280x800_(144468)WP.jpg
20110315_gtochka_wallpapers_ru_pryamo_na_glazah_belaya_koshka_na_belom_stul_1280x1024_(144469)WP.jpg
20110315_pal_wallpapers_ru_kalendar_mart_2011_1280x1024_(144460)WP.jpg
20110315_ser_wallpapers_ru_designers_are_meant_to_be_loved_1920x1200_(144459)WP.jpg
20110317_blackbird_wallpapers_ru_sleep_sugar_1280x1024_(144498)WP.jpg
20110317_fer0m0n_wallpapers_ru_light_in_mirrors_1440x900_(144486)WP.jpg
20110317_pal_wallpapers_ru_nechto_1280x1024_(144497)WP.jpg
20110319_alexandern_wallpapers_ru_wind_of_hopes_and_mirrors_of_time_1280x800_(144527)WP.jpg
20110319_enjoyyourlife_wallpapers_ru_holmsy_1920x1200_(144526)WP.jpg
20110321_krasnyechirvyazhki_wallpapers_ru_artefakt-3_800x1280_(144547)WP.jpg
20110324_genz_wallpapers_ru_nicholas_1024x768_(144561)WP.jpg
20110326_enjoyyourlife_wallpapers_ru_samyj-samyj_luchshij_vatson_1920x1200_(144578)WP.jpg
20110326_gtochka_wallpapers_ru_pryamo_na_glazah_seraya_koshka_na_belom_stul_1280x1024_(144596)WP.jpg
20110327_amplifier404_wallpapers_ru_ethanol_1920x1200_(144621)WP.jpg
20110327_mikka_wallpapers_ru_kamen_1680x1050_(144613)WP.jpg
20110329_virus672_wallpapers_ru_pryamo_na_kotah_zheltye_glaza_na_belom_stul_1280x1024_(144656)WP.jpg
20110330_acid_wallpapers_ru_pryamo_na_stule_g-tochka_1280x1024_(144668)WP.jpg
20110330_virus672_wallpapers_ru_kot_s_koshkoj_pryamo_na_belom_stule_glaza_n_1280x1024_(144667)WP.jpg
20110331_blackbird_wallpapers_ru_kalendar_2011_-_aprel_1280x1024_(144684)WP.jpg
20110331_zeban_wallpapers_ru_nashi_detskie_mechty_1024x768_(144685)WP.jpg


Для кого? — Для загонистых коллекционеров и просто для любителей прекрасного.

Для чего? — Для пассивного упорядочивания коллекции папиров. А также для пассивной рекламы сайта при расползании файлов по компам, сайтам, дискам...


В имени файла содержится всё необходимое для идентификации:
1) дата публикации работы (задом наперёд, чтобы папиры сортировались в папке юзера в хронологическом порядке);
2) ник автора (это святое! ник автора надо прописывать обязательно — это ключ к поиску других произведений автора заинтересовавшей работы);
3) адрес нашего сайта (чтобы сразу чётко было видно, откуда взял картинку, а не смутное: «в интернете нашел»);
4) название работы (важно для восприятия);
5) размер картинки (в pix);
6) ID публикации (номер топика, точнее: комментария — по нему можно быстро найти работу в форуме);
7) тип картинки — «WP» означает: «папир» (подразумевалось, что в будущем появятся неформатные работы с каким-то другим идентификатором).

В результате юзер может тупо сохранять папиры на своей ЭВМ, не заботясь о какой-либо классификации, а потом зайти в папку-свалку картинок и наравне с фиг знает чем, увидеть стройные, элегантные файлы W2 с бейджиками на груди. А коллекционеры — опытные пользователи ПК могут производить поиск по имен файлов, выбирая работы определенных авторов и просматривать их в той очередности, как они были созданы.

Для сравнения — фрагмент списка файлов с мусорными, ни о чем не говорящими именами:
0_5a25c_2a553a31_orig.jpg
13.jpg
25_146206684229888313229-1.jpg
69735d467a33.jpg
819669.gif
1525530.jpg
1796618.jpg
4120576_large.jpg
4126083_large.jpeg
4203043_large.jpeg
4205186_large.jpeg
4226620_large.jpg
4227545_large.jpg
4234251_large.jpg
4235615_large.jpeg
4279865_large.jpg
4280712.jpg
5560125.jpg
6134428.jpg
... и таких — миллион в одной папке.
свернуть ветку
Программный код функции, которая формирует имена файлов (язык: Perl):
# Формируем "говорящее" имя файла, вкл. ник автора, название работы, дату публикации, габариты, ID, рубрику

sub get_img_filename {

   # Параметры вызова:
   #  yyyymmdd       -- дата публикации
   #  user_id        -- ID автора (унифицированный ник)
   #  img_title      -- наименование работы
   #  img_name	     -- оригинальное имя закачанного файла (на компьютере пользователя)
   #  img_w, img_h   -- габариты исходной картинки (pix)
   #  id             -- ID картинки (номер записи в БД)
   #  msg_type       -- NB! Временно: = 1 для "просто картинок"
   #  section        -- NB! На будущее: ID рубрики
   
   my %args = (
      @_
   );

   # Имя файла и расширение:
   my ($img_filename, $img_filename_ext) = $args{img_name} =~ /(.+)\.([^\.]+)$/;
   $img_filename_ext = lc($img_filename_ext);

   # Тип картинки (рубрика в форуме):
   my $section = ($args{msg_type} == 1) ? 'IMG' : 'WP'; # NB! В будущем использовать "sid" (section ID)

   # Название работы:
   my $title = $args{img_title} || $img_filename;
   $title =~ s/$args{img_w}([xх]$args{img_h})?//;                             # удалить гарабит картинки из названия
   $title = translate_img_name($title);

   # Составные части имени файла:
   my $f_base  = "$args{yyyymmdd}_$args{user_id}_wallpapers_ru_$title";       # дата_ник_wallpapers[ru]_название
   my $f_info  = "_$args{img_w}x$args{img_h}";                                # габариты картинки
   my $f_extra = "_($args{id})${section}.$img_filename_ext";                  # (id)_рубрика_расширение

   # Если длина имени превышает длину поля в БД, то порезать его базовую часть (id обеспечивает уникальность имени):
   if ( length("${f_base}${f_info}${f_extra}" ) > 100 ) {
      $f_base = substr($f_base, 0, 100 - length("${f_info}${f_extra}" ) );
      $f_base =~ s/_+$//g;
   }

   my $filename = "${f_base}${f_info}${f_extra}";

   # На выходе получаем имя файла, состоящее
   #    только из строчных англ. букв, цифр и знаков подчеркивания,
   #    и только с одной точкой, отделяющей имя файла от расширения
   
   return ($filename, $img_filename_ext);

}


# Транслитерация и корректировка названия работы для формирования имени файла

sub translate_img_name {

   my $str = shift;
   
   # Переводим в нижний регистр:
   ($str = lc($str)) =~ tr/АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЬЫЪЭЮЯ/абвгдеёжзийклмнопрстуфхцчшщьыъэюя/;
   
   # Транслитерация (рус -> lat)
   $str =~ tr/абвгдезийклмнопрстуфхыэ/abvgdezijklmnoprstufhye/;
   
   for ($str) {
      s/[ьъ]//g;           # мягкий и твердый знаки заменить не на что :(
      s/ё/yo/g;
      s/ж/zh/g;
      s/ц/ts/g;
      s/ч/ch/g;
      s/ш/sh/g;
      s/щ/sch/g;
      s/ю/yu/g;
      s/я/ya/g;
      tr/a-z0-9_\-/_/cs;   # замена всех символов, кроме перечисленных
      tr/\-_//s;           # сжать повторяющиеся символы
      s/^_+//g;            # отбросить ведущие знаки подчеркивания
      s/_+$//g;            # отбросить замыкающие знаки подчеркивания
   }
   
   return $str;

}


свернуть ветку
Некоторые технические нюансы:

1. Опытным путем пришли к тому, что имя файла не должно содержать точки (распространенная проблема несовместимости) — некоторые браузеры глючили и сохраняли файлы некорректно.

2. Русские буквы транслируются в латиницу (по собственным правилам).

3. Все левые символы (включая пробелы) заменяются на знак подчеркивания.

3+. Иногда авторы включат в наименование работы её габарит (наверно, когда выпускают несколько версий папиров). Задача скрипта: удалить из базовой_части будущего имени файла габарит картинки, т.к. он у нас прописывается обязательно, но ближе к концу имени файла:
$title =~ s/$args{img_w}([xх]$args{img_h})?//; # удалить гарабит картинки из названия

4. Чтобы имя файла не было безразмерной длины, я ввел лимит: максимум 100 символов (без учета расширения файла).
При этом всегда сохраняется «нос» имени файла (дата + ник + wallpapers_ru) и «хвост» имени файла (габарит картинки, ID публикации и тип картинки), а окончание средней части — название работы подвергается (при необходимости) обрезанию.
Короче говоря: «Если длина имени превышает длину поля в БД, то порезать его базовую часть».
* Анализ длины производится уже после транслитерации и сжатия дублирующихся символов.

5. Повторюсь: На выходе получаем имя файла, состоящее только из строчных англ. букв, цифр и знаков подчеркивания, и только с одной точкой, отделяющей имя файла от расширения.
свернуть ветку
Про идентификаторы типа работы (рубрики) в конце имени файла:
Если работа авторская, то тип картинки = «WP»,
если просто картинка для примера, то тип картинки = «IMG»,
если фото, то можно присобачить: «P»,
если дизайн, то — «D»,
если скан рукопашного скетча или фото рукописной работы, то можно: «SCAN»
и т.д., и т.п.
свернуть ветку
Вот. На сегодня всё. Завтра отвечу IESYS-у — www.wallpapers.ru/drafty-dlya-funkcionala-razlichnyh-chastey-sayta/#comment456
свернуть ветку
Изображение без подписи

А можно ли как-то добавить сердечко в виде смайлика в комментарий? На мой взгляд, выло бы здорово если бы такая кнопочка присутствовала и могла добавить значек «сердечка» в комментарий. Видите ли, иногда слов не хватает, чтобы выразить любовь автору за его произведение, а иногда слова — это слишком много.

PS
Можно еще добавить обычные смайлики в виде кнопочки с раскрывающимся списком имеющихся смайлов. Кто-то может выбрать понравившийся из списка глядя на картинку, а кто-то может пользоваться привычными :{}P/ прописными символами.
свернуть ветку
Мне не очень понравились иконки под картинкой в просмотре, пока подсказка не выплывет, не поймешь что эта иконка обозначает, предлагаю подумать еще над иконками используйте более простые образы: вместо плюсика для перетаскивания руку с растопыренными пальцами, для приближения лупу, даже стрелки сейчас невнятные
свернуть ветку
Изображение без подписи В копилку идей — Дизайн страницы просмотра и обсуждения авторских работ сайта Illustrators.ru:
1. Слева от работы отображается крупный аватар или фото автора, его имя и краткая информация об авторе:
— давно ли зарегистрирован на сайте;
— статистика: рейтинг и какие-то комментарии;
— откуда автор (город);
— ссылка на сайт автора;
— «О себе».
2. Сама иллюстрация отображается очень крупно и целиком (классно! смотри и комментируй — пожалуйста!), а у нас — фрагментарно (здесь это плохо! опять надо что-то нажимать, чтобы увидеть картинку целиком) и слишком миниатюрно (если говорить не о фрагменте).
3. Под иллюстрацией идет доп. информация, включая «Стиль: Книжная графика», «Техника: Акварель», «Тип: Иллюстрация» (мне это кажется очень важным для заказчков, которые ищут иллюстратора под определенную задачу), а также теги.
4. Далее — ещё интереснее: графическая горизонтальная лента с превьюшками других работ автора (мне очень понравилось!)
5. Ниже — реклама (имеет смысл, если страницу просматривает большое число зрителей);
6. Далее — комментарии типа нашего W3.
свернуть ветку
Нечто подобное мы можем увидеть на cghub.com/images/view/56092/ и today.deviantart.com/dds/?day=2011-09-02#/d470ho7 — крупная полноценная работа (не фрагмент) и ниже — камменты.
свернуть ветку
Подборка альтернативных иконок для кнопочек панельки инструментов просмотра папира во всё окно браузера:

1. Просмотр картинки в натуральную величину (в смысле: «просмотр картинки»): 1:1, 100%.

2. Просмотр картинки в натуральную величину (в смысле: «увеличь ещё», «дай крупный план»): zoom с Фотосайта, zoom

3. Скачать* оригинал картинки (в смысле: «скачать», «сохранить себе на комп»): download, download, download, save
* Если «Скачать», то надо чтобы картинка не открывалась в браузере, а появлялся диалог «Сохранить как...» (см. ссылку «Download» на странице cghub.com/images/view/56092/)

4. Переместить окно: Move из AutoCAD-а, стандартный курсор Переместить из Windows XP, pan.
* В данном случае мне больше нравится рука, означающая перетаскивание (стрелки в четыре стороны также ассоциируются с «Вписать в окно»).

5. Обсудить папир: комментарии на Illustrators.ru, блоги на Google, обсуждения на Яндексе

6. Смена фона просмотра: ... картину не нашел, но представляю её себе так: квадратик, перечеркнутый по диагонали, одна часть залита белым, другая — черным.
Хотя Инь-Янь или проекция знака Бэтмена на луну тоже вполне бы подошли ;): Инь-Янь, черный Бэтмен на фоне белой луны
свернуть ветку
согласен, просто переделать под Женин минимализм: главное коррелировать под устоявшиеся «виды» — 100%, лупа, дискетка, рука, стрелочки и тп.
свернуть ветку
да, надо переделать, если руки дойдут сделаю
свернуть ветку
Странно, что в интерфейсе просмотра папиров (всплывающее окно с большой картинкой) не используется клик по большой картинке.
Обычно в большинстве подобных интерфейсов такое действие означает «Закрыть окно и вернуться назад» и это очень удобно (намного удобнее, чем целиться в крестик в правом верхнем углу). Мне кажется, что крестик лучше размесить как последнюю кнопку в нижней панельке инструментов.
свернуть ветку
Кстати, закрытие ещё делается кликом по затемнённому заднему фону, а даблклик на картинке открывает её полный размер в новом окне.
свернуть ветку
Хорошие находки! А если добавить инфу о горячих клавишах в alt кнопок, то многим это будет полезно
свернуть ветку
мне кажется что по клику по «большой картинке» нужно чтоб выполнялось скачивание, а по внешнему затемненному фону закрытие окна как сейчас
свернуть ветку
а еще печалит в этом просмотрщике что нет названия работы и автора, без остальной информации можно и обойтись, но уж эту надо написать обязательно
свернуть ветку
Лучше, чтобы по клику по «большой картинке» производилось самое частое действие.
Рискну предположить, что сценарий у большинства будет такой: посмотрел, закрыл — следующую... — следующую... — NNN-ую сохранил.

Мои претенденты на клик по «большой картинке»: 1) закрыть!; 2) дальше!; 3) хочу большую!

P.S. Фигово, что переход к следующей или предыдущей происходит с жуткой задержкой на спецэффекты. Это ужасно.
свернуть ветку
Думаю, второй вариант, всем привычен из-за вконтахта. Спецэффекты на самом деле происходят одновременно с загрузкой картинки с сервера, так что на деле время просмотра не сильно уменьшается.
свернуть ветку
Дело не в милисекундах, а бессмысленных в данном случае сворачиваний / разворачиваний. Это же 100%-ный цифровой шум. Как вы это не осознаёте?
свернуть ветку
закрыть точно отпадает (опять таки, по аналогии с теми же «контактами» — закрытие по нажатию справа вне зоны картинки, клик на картинке — «дальше», клик слева — «предыдущая»). Я изначально попросил Диму что бы кликая по картинке мы имели фулзсайз. А сейчас... не знаю. На кого ориентироваться? На гостей, которым в самом деле интересно было бы просто листать папиры, или же на «местных» кто по клику на картинке получал бы фулсайз?
свернуть ветку
Местные не так часто как гости используют полный размер, т.к. они тут и так все знают. Так что имеет смысл ориентироваться на гостей
свернуть ветку
Если кликнуть по картинке два раза, то она откроется в новом окне. Вот она скачивание. И, кстати говоря, в просмоторщике картинка загружена уже в своем собственном разрешении, так что нет особого смысла открывать ее в новом окне. Можно просто скачать как есть
свернуть ветку
иногда хочется увеличить, чтоб рассмотреть качество прорисовки и насладиться деталями. Но соглашусь с тем что листание при нажатии на картинку самый удобный вариант
свернуть ветку
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.

Виджет для комментариев от «ВКонтакте»