How to become an author
Search
Write a publication
Pull to refresh

Comments 70

Верстка изменится также как изменился дизайн компьютерных игр: как изменился Warcraft 1 -> WOW.
Total votes 11: ↑5 and ↓6-1
PS: мне нравились крупные пиксели, в каждом из них был свой смысл. А сейчас его разорвали на сотник мелких пикселей и он исчез, как вода исчезает в песке.
Total votes 46: ↑45 and ↓1+44
Это же просто хокку, на тему топика:

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

В общем, имхо, кроме media queries ничего пока нет)
This comment wasn’t rated yet0
Можно даже с обычными JPG или PNG. Идея в том, что на стороне сервера автоматически генерируются размеры именно под текущее устройство (или берутся из кеша) — адаптивные изображения.
This comment wasn’t rated yet0
Эй, неужели никто не заметил орфографическую ошибку в названии топика? разлечимыми
Total votes 15: ↑10 and ↓5+5
Ошибка? А кто будет лечить пиксели?
Total votes 4: ↑3 and ↓1+2
Вектор на самом деле тоже не панацея.

Вот здесь интересная статейка (на буржуйском). Там наглядная картинка с иконкой принтера в векторе и растре.
Total votes 4: ↑4 and ↓0+4
Картинка «ниочем», такой же принтер как и в пнг можно нарисовать в векторе, просто задать ширину линий в пикселях немасштабируемой
Total votes 3: ↑2 and ↓1+1
Можно попдробнее? Вы знаете, как у svg картинки задать ширину линий в пикселях?
Total votes 1: ↑1 and ↓0+1
Хм, а вот про реализацию я не подумал, прошу прощения. Просто мне показалась такая возможность довольно таки очевидной…
Total votes 1: ↑1 and ↓0+1
для векторной графики особо не очевидное решение. да и сам svg крайне незамысловат в своих возмоностях. я это понял, когда переводил векторную картинку из adobe illustrator в svg. пришлось отказаться от многих плюшек и пойти более тернистым путём
Total votes 1: ↑1 and ↓0+1
Хороший пример, который наглядно иллюстрирует одну из проблем с вектором. Если бы тупой ресайз работал, то куча дизайнеров иконок остались бы без работы :)
Total votes 2: ↑2 and ↓0+2
<sarcasm>
Скоро Apple скажет, как нам жить с этим.
</sarcasm>
Total votes 12: ↑12 and ↓0+12
Меня тут конечно сейчас закидают…

Но я бы первым пунктом поставил отмену отсрочки от армии для аспирантов. Для и для студентов ВУЗов тоже бы не помешало…
Total votes 53: ↑46 and ↓7+39
Ой…
Дико извиняюсь — попутал вкладки
Total votes 22: ↑21 and ↓1+20
дайте ссылочку, похоливорим ;)
Total votes 9: ↑9 and ↓0+9
Шикарно! Сначала, когда прочитал комментарий, решил, что нас почтил вниманием Владимир Вольфович.
Total votes 11: ↑11 and ↓0+11
Прошу прощения, но разве Жириновский и ЛДПР выступают не за отмену призыва в мирное время? Ведь в каменте выше идет речь об отмене отсрочки для студентов.
Total votes 2: ↑2 and ↓0+2
Главный недостаток: отсутствие поддержки у IE ниже 9 версии.
Слушайте, ну VML же, если очень нужен вектор. Кроме того, IE поддерживает отображение разных там WMF и прочих векторных форматов Винды.
Total votes 1: ↑1 and ↓0+1
Я считаю, что проблема исчезнет сама собой с исчезновением старых экранов. То есть переход на экраны высокой четкости будет единоразовым и как только мы упремся в некий фактический предел различимости точек, все более-менее устоится и мы продолжим жить как и прежде, и использовать те же самые приемы, только уже в «HD».

Но проблема переходного периода налицо, тут не поспоришь.
Total votes 3: ↑2 and ↓1+1
UFO just landed and posted this here
пиксель картинки и пиксель устройства вовсе не обязаны совпадать

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

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


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

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

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

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


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

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

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

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

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

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

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


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

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

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

P.S. Вы поверили бы 10 лет назад, что некий Яндекс.Диск даёт бесплатно 10 Гб? это не реклама
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time
Change theme settings

Your account

Sections

Information

Services

Support
© 2006–2024, Habr