Pull to refresh

Comments 70

Верстка изменится также как изменился дизайн компьютерных игр: как изменился Warcraft 1 -> WOW.
PS: мне нравились крупные пиксели, в каждом из них был свой смысл. А сейчас его разорвали на сотник мелких пикселей и он исчез, как вода исчезает в песке.
Это же просто хокку, на тему топика:

Мне нравились крупные пиксели
В каждом из них был свой смысл
А сейчас его разорвали
На сотни мелких осколков
И он исчезает, как вода на песке
У Вас такой талант пропадает :)!
Это танка и неправильный, к тому же
Вероятно, будет виртуальное разрешение для картинок. Т.е. вместе с width и height будет ppi или типа того. Не для обычных картинок (из браузер и сам растянет) и не для иконок (они таки перейдут в вектор), а для пиксельных фонов и подобного.
UFO just landed and posted this here
Вот-вот тоже не понял автора топика, когда он обозначил проблему, которой вроде как и нет — учитывая: «Media Queries».
Согласен. Не вижу проблемы.
Последние 5-6 заказов были с обязательной поддержкой ipad/iphone (адаптивной версткой).
Media queries решают задачу без каких-либо особых проблем.
В добавок для iOS на помощь приходит viewport.
Насчёт картинок — можно в вейвлет форматах хранить (тот же JPEG2000) — в зависимости от разрешения браузеры могли бы досчитывать с сервера только необходимую для данного разрешения часть.
Хм… не подскажите как это должно выглядеть в коде? в теге img что указывать?:)
Покопался совсем немного в этих технологиях — jpeg2000 не все браузеры даже открывают. Кроме того, загрузка «необходимой для разрешения части» — тоже как-то не сложилось в практике.

В общем, имхо, кроме media queries ничего пока нет)
Можно даже с обычными JPG или PNG. Идея в том, что на стороне сервера автоматически генерируются размеры именно под текущее устройство (или берутся из кеша) — адаптивные изображения.
Эй, неужели никто не заметил орфографическую ошибку в названии топика? разлечимыми
Ошибка? А кто будет лечить пиксели?
Вектор на самом деле тоже не панацея.

Вот здесь интересная статейка (на буржуйском). Там наглядная картинка с иконкой принтера в векторе и растре.
Картинка «ниочем», такой же принтер как и в пнг можно нарисовать в векторе, просто задать ширину линий в пикселях немасштабируемой
Можно попдробнее? Вы знаете, как у svg картинки задать ширину линий в пикселях?
Хм, а вот про реализацию я не подумал, прошу прощения. Просто мне показалась такая возможность довольно таки очевидной…
для векторной графики особо не очевидное решение. да и сам svg крайне незамысловат в своих возмоностях. я это понял, когда переводил векторную картинку из adobe illustrator в svg. пришлось отказаться от многих плюшек и пойти более тернистым путём
Хороший пример, который наглядно иллюстрирует одну из проблем с вектором. Если бы тупой ресайз работал, то куча дизайнеров иконок остались бы без работы :)
Меня тут конечно сейчас закидают…

Но я бы первым пунктом поставил отмену отсрочки от армии для аспирантов. Для и для студентов ВУЗов тоже бы не помешало…
Ой…
Дико извиняюсь — попутал вкладки
дайте ссылочку, похоливорим ;)
Шикарно! Сначала, когда прочитал комментарий, решил, что нас почтил вниманием Владимир Вольфович.
Прошу прощения, но разве Жириновский и ЛДПР выступают не за отмену призыва в мирное время? Ведь в каменте выше идет речь об отмене отсрочки для студентов.
Главный недостаток: отсутствие поддержки у IE ниже 9 версии.
Слушайте, ну VML же, если очень нужен вектор. Кроме того, IE поддерживает отображение разных там WMF и прочих векторных форматов Винды.
Я считаю, что проблема исчезнет сама собой с исчезновением старых экранов. То есть переход на экраны высокой четкости будет единоразовым и как только мы упремся в некий фактический предел различимости точек, все более-менее устоится и мы продолжим жить как и прежде, и использовать те же самые приемы, только уже в «HD».

Но проблема переходного периода налицо, тут не поспоришь.
UFO just landed and posted this here
пиксель картинки и пиксель устройства вовсе не обязаны совпадать

Вот оно. Не так уж велика проблема, оказывается. Действительно же, размер картинок указать в единицах измерения длины — см/мм (к примеру), а масштабы — в тех же еm/%, что и так практикуется. Я уже не говорю о Media Query, которые упоминались выше.
Единственное, что на мой взгляд могло бы быть затруднительным, это правильная интерпретация количества пикселей в миллиметре конкретного девайса.
Главный недостаток: отсутствие поддержки у IE ниже 9 версии. Но, этот недостаток уходит, мы же говорим о будущем.

Ну да, офисный планктонпользователи IE 6 сейчас начнут стадомрезко переходить на IE 9 и выше
Вы случаем не из Китая пишите?
НУ вообще говоря, я например вчера зашел посмотреть в магазин как работает New ipad. Получил интересную картину:


Т.е. прикидывается он все же разрешением 1024х768. Так что если производители девайсов научаться делать разрешение экранов стандартным, а количество точек на экране увеличивать, то проблем не будет.
Потому что он поинтами оперирует, а в его поинте — 2 пикселя. Но вам это знать ни к чему :)
Как эту проблему решает Apple можно посмотреть на их же сайте www.apple.com/ipad/ — там все картинки нового айпада в двух вариантах, для каждого значения плотности.
Ну скорее в поинте 4 пикселя… А что там надо на сайте увидеть? Вы имеете ввиду, что разные картинки отдаются если разными девайсами заходишь?
1) Поинт — мера длины всё-таки.
2) Да, разные картинки.
Поинт таки или мера площади или zero-dimensional.
Точка не может иметь длину. Она или имеет длину и ширину, либо ни того, ни другого.
Но ширину экрана вы-таки в пикселях или поинтах измеряете.
Следите за руками:
— когда мы обсуждаем точку как меру какой-то размерности — мы говорим, сколько этих самых точек влезает в заданный объект (1280 — ширина экрана, 5Мпикселей размер снимка, пиксели везде пиксели — квадратных пикселей нет!)
— когда мы обсуждаем размер точки — она уже определённо обладает площадью (ибо она нам и важна). Хочется, чтобы не забывали, что точка далеко не всегда квадратная ;)
UFO just landed and posted this here
то есть 1px в CSS это на самом деле 2px реальных на iPad?
Ну и зачем они это сделали?
Чтоб владельцы миллионов сайтов не кинулись переписывать свои творения.

Ну и чтоб текст на экране был четче.
UFO just landed and posted this here
UFO just landed and posted this here
Идеально и практически исчерпывающе тему раскрыл PPK вот в этой презентации

Спасибо! Прямо в точку. Ее бы вынести в топик…
Правильно. Скорей всего разрешение в пикселях будет, как это ни странно, отражать физическую величину экрана, или даже визуальные размеры области видимости экрана при смотрении на него с предусмотренного расстояния. Пиксель будет логической единицей (подобно em) относительно этих размеров.

P.S. Насчет растровых картинок: где-то на хабре видел сравнение алгоритмов перевода растра в вектор (на примере Марио вроде). Довольно интересные результаты получаются.
Недостаток: лишние картинки, лишние css файлы, удлиненная по времени верстка. Ну, и вносить изменения тоже в четыре раза дольше.


Можно хранить в репозитории картинки в максимальном разрешении, а при деплоее на сервер скриптом автоматически делать версии в разных разрешениях. Так делают для игр на iPad/iPhone/android, все работает.
не панацея, ведь остаётся проблема низкого качества при ресайзе. непопадание в пиксель, замыленые края и тп.
Для ретиы картинки ровно в два раза больше, так что проблема с непопаданием в пиксель должна уйти.
Мне ещё вот это вспомнилось.

www.artlebedev.ru/kovodstvo/sections/71/

Помню, раньше, когда были ещё ЭЛТ-мониторы, выбирал на них не самое высокое разрешение (которое, к тому же, отображалось с мерцающими 60 Гц, а другие были хотя бы с 85), а какое-нибудь ближе к среднему. Чёткость отрисовки точек была одинаковая, только размер точки разный. И причина этому была совершенно простая — мне нравилось, чтобы иконки не уменьшались до крохотных, а были различимыми. И мелкий текст (особенно на картинках). И прочее.

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

Или взять, например, игру Battle for Wesnoth. Увеличение разрешения приводит к тому, что персонажи становятся еле различимыми — нормально играть на 1920x1080, например, по-моему невозможно. Причём у неё есть zoom, и это было бы неплохое решение, если бы не алгоритм, по которому он работает. От такого режима в такой игре ожидаешь, что пиксельная графика (карта, персонажи) будут отображаться крупными чёткими точками (а текст может быть и не пиксельным — наоборот приятно когда он более чёткий). А на деле этот режим работает со сглаживанием, и получается ужасная размытая картинка (о подобном размытии, правда, в случае с печатью, там тоже писали).
Кстати, примечательно, что первая ссылка — лето 2001. Это напоминает историю с ipv6.
А что делать с теплыми ламповыми фактурами в бекграунде? Их тоже переводить в вектор? А если оставлять в растре, то на разных экранах масштаб вактуры будет разным."

А зачем в вектор? В CSS3, кажется, уже придумали инструментарий для создания любого бекграунда. Смысл в топике был бы, если бы технологии оставались такими же как и лет 10 назад, но, к счастью, они не стоят на месте. Все движется и все меняется, верстка в том числе и даже в лучшую сторону, как по мне. В конце концов у нас уже есть canvas, в котором можно отрендерить даже 3д, осталось только ставить костыли для очень старых браузеров и ждать их ухода в мир иной.
Все просто. Сейчас все масштабируется без проблем, кроме картинок. Как только все перейдут на высокие разрешения мониторов, например 2560x1600 для 15 дюймов, то и картинки все будут загружать с фотоаппарата в исходном размере, а не делая кроп 800×600. И все будет хорошо. Единственный минус — возрастет нагрузка на каналы связи. Простейший сайт начнет весить не 500 кбайт, а 5 метров. Провайдеры поднимут скорость инета новыми технологиями и все будет хорошо.
Пиксельарт? Да никаких проблем! Рисуем разноцветными квадратиками. А редактор потом нам их склеит в двумерные меши и позволит ещё текстурку наложить. Красота :)
Топикстартер, эти проблемы уже решили.

Использование разных файлов под конкретное разрешение, JS определяет размер экрана, предлагает определенный файл CSS, который в свою очередь подгружает нужные картинки.


1) Media Queries
2) «Пиксель» сейчас уже не пиксель вовсе: css-live.ru/articles/novye-i-starye-edinicy-izmereniya-kratkij-obzor/
Мне тоже кажется, что в будущем все картинки будут высокого разрешения (dpi/ppi), сайты будут того же размера, что и сейчас, но более четкие на высокопиксельных экранах. Исчезнет проблема попадания в пиксели, т.к. это будет уже неактуально (выше про ЭЛТ писали — ведь там не было никакой пиксельной резкости вообще). И все будут счастливы и довольны. Пиксели исчезнут как класс, или как точки на бумажной печати (при печати в 600дпи ведь никто не подгоняет векторные макеты чтобы они попиксельно попадали в 600дпи?)

Ну вот. А те, у кого экран не 300дпи — будет довольствоваться размытым ресайзом, также как и те, кто сейчас сидит на ЭЛТ мониторе с 1024х768.

В общем, нужно лишь немного подождать, чтобы все мониторы и девайсы приобрели dpi/ppi выше порога человеческого зрения — и тогда все наши нынешние проблемы с пикселями отпадут сами собой.
Я думаю растровая картинка будет изначально избыточной по весу и явас цссом будут подгонять ее под экран девайса, пропускная скорость у провайдеров уже позволяет многое, лишь бы отдача у хостера соответствовала, сам же интерфейс сайтов было бы здорово делать векторным это и быстро и красиво и масштабируемо.
UFO just landed and posted this here
На самом деле с помощью JS можно определить все требуемые размеры: экран, вьюпорт и т.д. Выше уже давали ссылку на презентацию, где это перечислено (в конце): quirksmode.org/presentations/Spring2012/viewports_sf.pdf
UFO just landed and posted this here
UFO just landed and posted this here
Мы говорим о будущем. Так что всё гораздо проще. Памяти со временем будет всё больше. Фотоаппараты всё круче. А интернет и браузеры всё быстрее. А посему вполне можно будет выкладывать на сайт фотки размерами… Ну где-то там ~5000x5000. Это про растр. А про вектор — он и в африке вектор.

P.S. Вы поверили бы 10 лет назад, что некий Яндекс.Диск даёт бесплатно 10 Гб? это не реклама
Only those users with full accounts are able to leave comments. Log in, please.

Articles