Comments 70
Верстка изменится также как изменился дизайн компьютерных игр: как изменился Warcraft 1 -> WOW.
PS: мне нравились крупные пиксели, в каждом из них был свой смысл. А сейчас его разорвали на сотник мелких пикселей и он исчез, как вода исчезает в песке.
Вероятно, будет виртуальное разрешение для картинок. Т.е. вместе с width и height будет ppi или типа того. Не для обычных картинок (из браузер и сам растянет) и не для иконок (они таки перейдут в вектор), а для пиксельных фонов и подобного.
Вот-вот тоже не понял автора топика, когда он обозначил проблему, которой вроде как и нет — учитывая: «Media Queries».
Согласен. Не вижу проблемы.
Последние 5-6 заказов были с обязательной поддержкой ipad/iphone (адаптивной версткой).
Media queries решают задачу без каких-либо особых проблем.
В добавок для iOS на помощь приходит viewport.
Последние 5-6 заказов были с обязательной поддержкой ipad/iphone (адаптивной версткой).
Media queries решают задачу без каких-либо особых проблем.
В добавок для iOS на помощь приходит viewport.
Насчёт картинок — можно в вейвлет форматах хранить (тот же JPEG2000) — в зависимости от разрешения браузеры могли бы досчитывать с сервера только необходимую для данного разрешения часть.
Хм… не подскажите как это должно выглядеть в коде? в теге img что указывать?:)
Можно даже с обычными JPG или PNG. Идея в том, что на стороне сервера автоматически генерируются размеры именно под текущее устройство (или берутся из кеша) — адаптивные изображения.
Эй, неужели никто не заметил орфографическую ошибку в названии топика?
разлечимыми
Вектор на самом деле тоже не панацея.
Вот здесь интересная статейка (на буржуйском). Там наглядная картинка с иконкой принтера в векторе и растре.
Вот здесь интересная статейка (на буржуйском). Там наглядная картинка с иконкой принтера в векторе и растре.
Картинка «ниочем», такой же принтер как и в пнг можно нарисовать в векторе, просто задать ширину линий в пикселях немасштабируемой
Хороший пример, который наглядно иллюстрирует одну из проблем с вектором. Если бы тупой ресайз работал, то куча дизайнеров иконок остались бы без работы :)
<sarcasm>
Скоро Apple скажет, как нам жить с этим.
</sarcasm>
Скоро Apple скажет, как нам жить с этим.
</sarcasm>
Меня тут конечно сейчас закидают…
Но я бы первым пунктом поставил отмену отсрочки от армии для аспирантов. Для и для студентов ВУЗов тоже бы не помешало…
Но я бы первым пунктом поставил отмену отсрочки от армии для аспирантов. Для и для студентов ВУЗов тоже бы не помешало…
Главный недостаток: отсутствие поддержки у IE ниже 9 версии.Слушайте, ну VML же, если очень нужен вектор. Кроме того, IE поддерживает отображение разных там WMF и прочих векторных форматов Винды.
Я считаю, что проблема исчезнет сама собой с исчезновением старых экранов. То есть переход на экраны высокой четкости будет единоразовым и как только мы упремся в некий фактический предел различимости точек, все более-менее устоится и мы продолжим жить как и прежде, и использовать те же самые приемы, только уже в «HD».
Но проблема переходного периода налицо, тут не поспоришь.
Но проблема переходного периода налицо, тут не поспоришь.
пиксель картинки и пиксель устройства вовсе не обязаны совпадать
Вот оно. Не так уж велика проблема, оказывается. Действительно же, размер картинок указать в единицах измерения длины — см/мм (к примеру), а масштабы — в тех же еm/%, что и так практикуется. Я уже не говорю о Media Query, которые упоминались выше.
Единственное, что на мой взгляд могло бы быть затруднительным, это правильная интерпретация количества пикселей в миллиметре конкретного девайса.
Главный недостаток: отсутствие поддержки у IE ниже 9 версии. Но, этот недостаток уходит, мы же говорим о будущем.
Ну да,
НУ вообще говоря, я например вчера зашел посмотреть в магазин как работает New ipad. Получил интересную картину:
Т.е. прикидывается он все же разрешением 1024х768. Так что если производители девайсов научаться делать разрешение экранов стандартным, а количество точек на экране увеличивать, то проблем не будет.
Т.е. прикидывается он все же разрешением 1024х768. Так что если производители девайсов научаться делать разрешение экранов стандартным, а количество точек на экране увеличивать, то проблем не будет.
Потому что он поинтами оперирует, а в его поинте — 2 пикселя. Но вам это знать ни к чему :)
Как эту проблему решает Apple можно посмотреть на их же сайте www.apple.com/ipad/ — там все картинки нового айпада в двух вариантах, для каждого значения плотности.
Как эту проблему решает Apple можно посмотреть на их же сайте www.apple.com/ipad/ — там все картинки нового айпада в двух вариантах, для каждого значения плотности.
Ну скорее в поинте 4 пикселя… А что там надо на сайте увидеть? Вы имеете ввиду, что разные картинки отдаются если разными девайсами заходишь?
1) Поинт — мера длины всё-таки.
2) Да, разные картинки.
2) Да, разные картинки.
Поинт таки или мера площади или zero-dimensional.
Точка не может иметь длину. Она или имеет длину и ширину, либо ни того, ни другого.
Точка не может иметь длину. Она или имеет длину и ширину, либо ни того, ни другого.
Но ширину экрана вы-таки в пикселях или поинтах измеряете.
Следите за руками:
— когда мы обсуждаем точку как меру какой-то размерности — мы говорим, сколько этих самых точек влезает в заданный объект (1280 — ширина экрана, 5Мпикселей размер снимка, пиксели везде пиксели — квадратных пикселей нет!)
— когда мы обсуждаем размер точки — она уже определённо обладает площадью (ибо она нам и важна). Хочется, чтобы не забывали, что точка далеко не всегда квадратная ;)
— когда мы обсуждаем точку как меру какой-то размерности — мы говорим, сколько этих самых точек влезает в заданный объект (1280 — ширина экрана, 5Мпикселей размер снимка, пиксели везде пиксели — квадратных пикселей нет!)
— когда мы обсуждаем размер точки — она уже определённо обладает площадью (ибо она нам и важна). Хочется, чтобы не забывали, что точка далеко не всегда квадратная ;)
то есть 1px в CSS это на самом деле 2px реальных на iPad?
Правильно. Скорей всего разрешение в пикселях будет, как это ни странно, отражать физическую величину экрана, или даже визуальные размеры области видимости экрана при смотрении на него с предусмотренного расстояния. Пиксель будет логической единицей (подобно em) относительно этих размеров.
P.S. Насчет растровых картинок: где-то на хабре видел сравнение алгоритмов перевода растра в вектор (на примере Марио вроде). Довольно интересные результаты получаются.
P.S. Насчет растровых картинок: где-то на хабре видел сравнение алгоритмов перевода растра в вектор (на примере Марио вроде). Довольно интересные результаты получаются.
Недостаток: лишние картинки, лишние css файлы, удлиненная по времени верстка. Ну, и вносить изменения тоже в четыре раза дольше.
Можно хранить в репозитории картинки в максимальном разрешении, а при деплоее на сервер скриптом автоматически делать версии в разных разрешениях. Так делают для игр на iPad/iPhone/android, все работает.
Мне ещё вот это вспомнилось.
www.artlebedev.ru/kovodstvo/sections/71/
Помню, раньше, когда были ещё ЭЛТ-мониторы, выбирал на них не самое высокое разрешение (которое, к тому же, отображалось с мерцающими 60 Гц, а другие были хотя бы с 85), а какое-нибудь ближе к среднему. Чёткость отрисовки точек была одинаковая, только размер точки разный. И причина этому была совершенно простая — мне нравилось, чтобы иконки не уменьшались до крохотных, а были различимыми. И мелкий текст (особенно на картинках). И прочее.
В общем, я считаю, Лебедев тут пишет совершенно правильную вещь — ну не должно увеличение разрешение приводить к тому, что на экран начинает напихиваться больше элементов, больше текста, область карты большего размера и так далее — если, конечно, физический размер экрана не увеличивается. То есть в идеале нужно добиться того, чтобы большее разрешение создавало более чёткую картинку, а не картинку с более мелкими элементами (теми же самыми, которые раньше были комфортного размера).
Или взять, например, игру Battle for Wesnoth. Увеличение разрешения приводит к тому, что персонажи становятся еле различимыми — нормально играть на 1920x1080, например, по-моему невозможно. Причём у неё есть zoom, и это было бы неплохое решение, если бы не алгоритм, по которому он работает. От такого режима в такой игре ожидаешь, что пиксельная графика (карта, персонажи) будут отображаться крупными чёткими точками (а текст может быть и не пиксельным — наоборот приятно когда он более чёткий). А на деле этот режим работает со сглаживанием, и получается ужасная размытая картинка (о подобном размытии, правда, в случае с печатью, там тоже писали).
www.artlebedev.ru/kovodstvo/sections/71/
Помню, раньше, когда были ещё ЭЛТ-мониторы, выбирал на них не самое высокое разрешение (которое, к тому же, отображалось с мерцающими 60 Гц, а другие были хотя бы с 85), а какое-нибудь ближе к среднему. Чёткость отрисовки точек была одинаковая, только размер точки разный. И причина этому была совершенно простая — мне нравилось, чтобы иконки не уменьшались до крохотных, а были различимыми. И мелкий текст (особенно на картинках). И прочее.
В общем, я считаю, Лебедев тут пишет совершенно правильную вещь — ну не должно увеличение разрешение приводить к тому, что на экран начинает напихиваться больше элементов, больше текста, область карты большего размера и так далее — если, конечно, физический размер экрана не увеличивается. То есть в идеале нужно добиться того, чтобы большее разрешение создавало более чёткую картинку, а не картинку с более мелкими элементами (теми же самыми, которые раньше были комфортного размера).
Или взять, например, игру Battle for Wesnoth. Увеличение разрешения приводит к тому, что персонажи становятся еле различимыми — нормально играть на 1920x1080, например, по-моему невозможно. Причём у неё есть zoom, и это было бы неплохое решение, если бы не алгоритм, по которому он работает. От такого режима в такой игре ожидаешь, что пиксельная графика (карта, персонажи) будут отображаться крупными чёткими точками (а текст может быть и не пиксельным — наоборот приятно когда он более чёткий). А на деле этот режим работает со сглаживанием, и получается ужасная размытая картинка (о подобном размытии, правда, в случае с печатью, там тоже писали).
А что делать с теплыми ламповыми фактурами в бекграунде? Их тоже переводить в вектор? А если оставлять в растре, то на разных экранах масштаб вактуры будет разным."
А зачем в вектор? В CSS3, кажется, уже придумали инструментарий для создания любого бекграунда. Смысл в топике был бы, если бы технологии оставались такими же как и лет 10 назад, но, к счастью, они не стоят на месте. Все движется и все меняется, верстка в том числе и даже в лучшую сторону, как по мне. В конце концов у нас уже есть canvas, в котором можно отрендерить даже 3д, осталось только ставить костыли для очень старых браузеров и ждать их ухода в мир иной.
Все просто. Сейчас все масштабируется без проблем, кроме картинок. Как только все перейдут на высокие разрешения мониторов, например 2560x1600 для 15 дюймов, то и картинки все будут загружать с фотоаппарата в исходном размере, а не делая кроп 800×600. И все будет хорошо. Единственный минус — возрастет нагрузка на каналы связи. Простейший сайт начнет весить не 500 кбайт, а 5 метров. Провайдеры поднимут скорость инета новыми технологиями и все будет хорошо.
Пиксельарт? Да никаких проблем! Рисуем разноцветными квадратиками. А редактор потом нам их склеит в двумерные меши и позволит ещё текстурку наложить. Красота :)
Топикстартер, эти проблемы уже решили.
1) Media Queries
2) «Пиксель» сейчас уже не пиксель вовсе: css-live.ru/articles/novye-i-starye-edinicy-izmereniya-kratkij-obzor/
Использование разных файлов под конкретное разрешение, 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 выше порога человеческого зрения — и тогда все наши нынешние проблемы с пикселями отпадут сами собой.
Ну вот. А те, у кого экран не 300дпи — будет довольствоваться размытым ресайзом, также как и те, кто сейчас сидит на ЭЛТ мониторе с 1024х768.
В общем, нужно лишь немного подождать, чтобы все мониторы и девайсы приобрели dpi/ppi выше порога человеческого зрения — и тогда все наши нынешние проблемы с пикселями отпадут сами собой.
Я думаю растровая картинка будет изначально избыточной по весу и явас цссом будут подгонять ее под экран девайса, пропускная скорость у провайдеров уже позволяет многое, лишь бы отдача у хостера соответствовала, сам же интерфейс сайтов было бы здорово делать векторным это и быстро и красиво и масштабируемо.
На самом деле с помощью JS можно определить все требуемые размеры: экран, вьюпорт и т.д. Выше уже давали ссылку на презентацию, где это перечислено (в конце): quirksmode.org/presentations/Spring2012/viewports_sf.pdf
Мы говорим о будущем. Так что всё гораздо проще. Памяти со временем будет всё больше. Фотоаппараты всё круче. А интернет и браузеры всё быстрее. А посему вполне можно будет выкладывать на сайт фотки размерами… Ну где-то там ~5000x5000. Это про растр. А про вектор — он и в африке вектор.
P.S. Вы поверили бы 10 лет назад, что некий Яндекс.Диск даёт бесплатно 10 Гб? это не реклама
P.S. Вы поверили бы 10 лет назад, что некий Яндекс.Диск даёт бесплатно 10 Гб? это не реклама
Sign up to leave a comment.
Как мы будем верстать, когда экраны станут многопиксельными, а пиксели еле различимыми