Попробуем сделать расширение для загрузки картинок в HabrAjax, начав от дизайна и юзабилити.
Идея расширения: Все, кто что-то пишет на Х., рано или поздно публикуют картинки. Совсем недавно админ-ия своими действиями подтвердила, что считает habrastorage.org полноценным картинок для абсолютно любых публикаций. Кратко — теперь все без исключения картинки кешируются на habrastorage.org. Это значит, что даже картинки-приколы в комментариях рекомендуется публиковать через этот сервис, иначе всё равно они там будут.
Настало время полноценно использовать «сторадж». Для этого не хватает одного — удобного интерфейса. Конечно, можно открыть его в новом окне, грузить файлы кнопками через флеш, копировать руками теги в статью или комментарии. (И испытывать неудобство от закрывания этой страницы, потому что в ней нет даже запоминания последних загруженных файлов.) Но зачем, если браузеры давно умеют делать это в одно перетаскивание?
Предлагается сделать красивый и удобный интерфейс для закидывания файлов «на сторадж». В буквальном смысле, так, как сейчас делается на Гитхабе, но с местными особенностями и удобствами. Пусть упоминание о нём будет скромно ютиться в сайдбаре, и там же будет всё нужное для работы с закачанными картинками — список последних превью, информация, кнопки повторной публикации, удаления и переноса в избранное.
Наработки идей
Предлагается иметь в дополнение к стандартному механизму работы со стораджем, ещё 2. Стандартный требует флеша, нажатия на кнопки, копирования ссылок, сохранения их «на бумажке» или перезаливки изображений для получения потерянных ссылок.
Первый дополнительный способ:
- Пользователь, умеющий писать статьи или комментарии, тащит файл картинки на поле ввода. Курсор там уже стоит на месте, где нужно вставить тег картинки;
- Бросает файл, и изображение открывается в фоне поя ввода по центру. Над полем ввода появляется вопрос: «Опубликовать картинку (название файла, размеры, вес) на habrastorage.org и вставить тег?» и кнопки действий. Посмотреть картинку подробнее, чтобы убедиться в её правильности и качестве, продолжить или отменить. (Будет ещё несколько вариантов.)
- Нажимает «Продолжить» — картинка публикуется на строадже, возникает в сайдбаре в виде маленького превью (на случай повторного использования или просмотра вариантов до публикации), но главное — отображается в поле ввода в виде тега. (Для формата тега тоже есть много опций, подробности ниже.)
Всё, картинка закинута, почти как на Гитхабе, с той лишь разницей, что лишний предпросмотр не помешает. Способ предпросмотра описан здесь: Показ масштабируемых изображений, уже реализован.
Второй дополнительный способ:
- Как упоминалось, в сайдбаре есть короткое примечание, что можно закидывать файлы. К примеру,
От HabrAjax: Закидывайте файлы картинок в поля ввода комментариев и статей, чтобы опубликовать их на habrastorage.org (тег картинки с адресом появится под курсором).
Поэтому можно закидывать не только в поля ввода, а прямо в этот блок для отложенной публикации. Если поле ввода есть — ссылка опубликуется, если нет — будет готова для публикации позже;
- Пользователь закидывает файл в блок в сайдбаре;
- В сайдбаре возникает превью в списке «последние»;
- При наведении на картинку превью (92 на 92) открывается информация о файле и кнопки для превью и публикации.
- Пользователь установил настройки публикации тега — ставить ли по центру или справа, показать превью и ссылку или полную картинку, поставить ли свою ссылку под картинкой. Клик — и тег появился в нужном поле ввода (комментарий, статья, вопрос, письмо).
Дополнительная фича:
Кроме хранения списка последних и избранных файлов, сервису не зватает ресайза картинок. Не проблем, потому что есть другие онлайновые сервисы, типа www.photosize.com/. Как вариант, перед предпросмотром мы сможем ресайзить картинку.
Тем, кто заинтересовался
Чтобы увидеть сервис в вашем красивом дизайне и продуманном интерфейсе, вы можете предложить мне вариант дизайна. Моя сторона ответственности — выбрать дизайн, понравившийся большинству (или пару) и изобразить в виде юзерскрипта (Хром, Firefox, Opera) или расширения Хрома. Описанные функции и другие, предложенные читателями, будут работать в виде отдельного скрипта или в составе расширения HabrAjax.
От HabrAjax: вы можете сохранить много картинок (на habrastorage.org) для статей и комментариев сайта. Затащите их в этот блок для отложенной публикации или прямо на поле ввода комментария, статьи, вопроса, ответа — после предпросмотра и вашего подтверждения ссылка появится на месте курсора. В этом блоке показаны картинки для повторного использования (не обязательно свои):
последние (NN)
избранные (N)
удалённые (NN)
Размер картинок не меняется, если они не более 1920х1080.
Когда закинули картинку:
Выберите вариант публикации.
1. Просто вставить тег с картинкой (размер ****, но на странице будет ужиматься по ширине);
2-3. Картинку с превью от стораджа (2 варианта, какие есть);
4-6. Рисунок или превью (2 варианта) на ссылке, а по ссылке — сторонняя страница или изображение (не сторадж, внесите своё);
7. Подготовьте превью на сервисе-ресайзере, а затем — варианты 1-6 от стораджа.
(Предпросмотр) (ОК) (Отмена)
Процесс работы с картинками (варианты).
1. Закинуть картинку со своего компьютера в поле ввода или на блок в сайдбаре. Далее получим:
1.1 Видим превью картинки на фоне поля ввода (мешают буквы, да и оно может не поместиться в поле).
1.2 Если забрасывали в сайдбар, под блоком видим вопрос («Опубликовать картинку (название файла, размеры, вес) на habrastorage.org?») и 3 заметные кнопки: (Предпросмотр) (Опубликовать) (Ресайз до ширины: [___], высоты: [___]) (Отмена)
1.3 Если забрасывали в поле ввода, вопрос формулируется: «Опубликовать картинку (название файла, размеры, вес) на habrastorage.org и вставить тег?» и имеется больше кнопок: (Предпросмотр) (В полный размер) (в виде превью 92х92 без масштабирования со ссылкой) (превью ХХхХХ с масштабированием и ссылкой) (со своей ссылкой: [_____]) (Ресайз до ширины: [___], высоты: [___]) (Отмена)
1.3 Меняем высоту поля ввода, чтобы лучше рассмотреть превью в поле ввода или жмём «Предпросмотр», чтобы увидеть превью средствами встроенного скрипта (с перетаскиванием, ресайзом и подсказками размеров и масштаба).
1.4 К действию приведёт выбор «Опубликовать» или «Превью». Если не был выбран «Ресайз», картинка опубликуется, а её превью будет видно в списке последних загруженных (последние сверху); если выбран — ресайз произойдёт на стороннем сервисе, а результат будет показан в виде превью с кнопками под ним: (Опубликовать на habrastorage.org) (Отмена). Можно изменять параметры ресайза (размер), выбирая отпимальное качество и детализацию.
1.5 Если заполнено поле ссылки, опубликуется изображение и будет представлено в виде пары вложенных тегов — А и IMG.
2. Навести мышь на одно из превью в сайдбаре. Увидим варианты действий под картинкой и информацию о картинке:
* (Предпросмотр)
* ХХХхХХХ (пикс.)
* ХХХХХ (байт)
* [удалить из списка]
* [в избранное]
* (Вставить тег IMG В полный размер)
* (Вставить тег превью 92х92 без масштабирования со ссылкой)
* (Вставить превью ХХхХХ с масштабированием и ссылкой)
* [слева / по центру / справа] — выбирать по Shift / Ctrl+Shift /Ctrl в момент вставки, для статей/вопросов
* (со своей ссылкой: [_____])
* (Ресайз до ширины: [___], высоты: [___]) — да, можем ещё раз ресайзить опубликованное на сторадже изображение, а результат будет предложено ещё раз опубликовать.
Список действий, кроме последнего, приведёт к вставке тега или пары тегов в поле ввода, на место курсора, без дополнительных внешних действий на серверах. Если поля ввода нет, результат будет показан в поле ввода для копирования (под блоком (?)).
3. Наконец, публикацию в статьях можно делать с горизонтальным форматированием, для чего предусмотрены 3 радиокнопки.
Теперь нужно, чтобы дизайнеры или юзабилисты действительно этим заинтересовались. Учитывая, что на Хабре картинки публикуют тысячи человек, шансы для этого есть.
Автор: spmbt
