Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 73
Спасибо, читал с интересом =)
Забыли ещё браузеры TeaShark, NetFront, Jb5.
Почерпнуто из статей на mobile-review (ссылки вставлять не могу, но вот):
www.mobile-review.com/soft/2008/web-surfing2.shtml
www.mobile-review.com/soft/2008/web-surfing.shtml
Почерпнуто из статей на mobile-review (ссылки вставлять не могу, но вот):
www.mobile-review.com/soft/2008/web-surfing2.shtml
www.mobile-review.com/soft/2008/web-surfing.shtml
Из броузеров есть еще Netfront и Openwave.
Кстати, вот еще хороший мануал на английском:
mobiforge.com/designing/blog/web-developers-guide-released
mobiforge.com/designing/blog/web-developers-guide-released
Кстати, я думал, что опера мини — самый популярный браузер, пока не увидел вот эту статистику:
www.admob.com/s/solutions/metrics
У нее всего 7%. Зато у дико ужасного Openwave целых 29%. Такой вот сакс.
www.admob.com/s/solutions/metrics
У нее всего 7%. Зато у дико ужасного Openwave целых 29%. Такой вот сакс.
о, а у меня оказывается тоже Опенвеа, а я то ломал голову что это за заставка постоянно возникает…
думаю здесь ситуация как с IE, я, например, даже не знал что у меня какой-то браузер стоит))
думаю здесь ситуация как с IE, я, например, даже не знал что у меня какой-то браузер стоит))
Броузер Openwave поставляется автоматичесски на многих телефонах(сименс например) и далеко не все юзеры знают что можно использовать альтернативу.
WML еще используется, несмотря на то, что современные телефоны уже вовсю показывают XHTML.
Есть еще масса старых телефонов, которые могут быть потенциальными посетителями сайтов. Если на компьютере легко поменять один браузер на другой, то в старых моделях это сделать зачастую невозможно.
Поэтому, если разработчик не хочет потерять клиентуру, он сначала обязан делать на WML, а потом уже — на XHTML. В частности, это критично для контент-провайдеров, потому что каждый посетитель — потенциальный заказчик мобильного контента, который, как мы знаем, недешев.
Есть еще масса старых телефонов, которые могут быть потенциальными посетителями сайтов. Если на компьютере легко поменять один браузер на другой, то в старых моделях это сделать зачастую невозможно.
Поэтому, если разработчик не хочет потерять клиентуру, он сначала обязан делать на WML, а потом уже — на XHTML. В частности, это критично для контент-провайдеров, потому что каждый посетитель — потенциальный заказчик мобильного контента, который, как мы знаем, недешев.
не могли бы вы пояснить, на чем основываются следующие утверждения?
DOCTYPE XHTML Mobile 1.0… предпочтительнее использовать
padding и margin нужно прописывать отдельно
С сокращенными записями могу сказать, что это увеличивает размер файла стилей, но точно предотвращает непонимание старыми браузерами некоторых свойств.
А с доктайпом… Ничего не могу Вам сказать. Если такой DTD существует и им пользуются такие «гиганты» как гугл и яндекс, то нужно использовать его. :)
А с доктайпом… Ничего не могу Вам сказать. Если такой DTD существует и им пользуются такие «гиганты» как гугл и яндекс, то нужно использовать его. :)
каким образом сокращенная запись может увеличить объем css? есть ли какие-то данные о недопониманиях между браузерами и сокращенной записью?
Вы не так поняли. Я имел в виду, что увеличивается объем css без применения сокращенных записей. Данных нет, но на всякий случай лучше перестраховаться.
доктайп можно можно вообще не указывать, и делать на обычном html'e… и все нормально будет отображатся на всех телефонах
Opera Mini какой-то не очень старой версии переводит все таблички в строки. Т.е. была табличка в 5 ячеек шириной и одну строку высотой, получили 5 строчек текста. Или с этим можно что-то сделать?
И еще вопрос. Как в Opera Mini обстоят дела с AJAX'ом? Где-то слышал, что весь JS у оперы обрабатывается на оперном сервере и клиенту возвращается только результат. Это так?
И еще вопрос. Как в Opera Mini обстоят дела с AJAX'ом? Где-то слышал, что весь JS у оперы обрабатывается на оперном сервере и клиенту возвращается только результат. Это так?
с AJAX'ом дела у нее никак не обстоят, так как вы написали так и происходит…
нет, все-таки как-то обстоят.
Opera Mobile с таблицами поступает так же, когда включена подгонка под ширину экрана.
Так и есть. При этом, это все работает правильно. Т.е., если есть кнопка, загрузающая что-то аяксом, нажав ее, получаем перезагрузку страницы с ожидаемым результатом. :-)
Изврат, если честно. А это все корректно работает? Например, что-нибудь вроде GMail (я говорю про объем JS-кода и толщину клиента) будет нормально работать? Или не рассчитывать на это?
GMail — пример плохой. У них я видел минимум три интерфейса, два из которых (мобильный и «основной HTML») подходят без проблем для использования на мобильных устройствах.
Тогда такие условия:
1. Отправляем форму динамическим iframe'ом (jquery.form.js, наприме)
2. Подгружаем массив данных и из них формируем HTML-формы.
3. Имеем несколько глобальных JS-объектов на странице, состояние которых меняется при измерении выбранных пунктов выпадающих списков или текстовых данных (ткнули в выпадающем списке на элемент, сработал onchange в select'е, записали значение).
4. Проверяем введенное содержимое в текстовые поля. Т.е. на onblur срабатывает вызов функции validateInteger(this), например. Которая проверяет правильность значения и в случае чего правит это значение.
Справится?
1. Отправляем форму динамическим iframe'ом (jquery.form.js, наприме)
2. Подгружаем массив данных и из них формируем HTML-формы.
3. Имеем несколько глобальных JS-объектов на странице, состояние которых меняется при измерении выбранных пунктов выпадающих списков или текстовых данных (ткнули в выпадающем списке на элемент, сработал onchange в select'е, записали значение).
4. Проверяем введенное содержимое в текстовые поля. Т.е. на onblur срабатывает вызов функции validateInteger(this), например. Которая проверяет правильность значения и в случае чего правит это значение.
Справится?
Извините, но я точно не смогу вам ответить — Opera Mini не пользовался вообще.
То, что она обрабатывает хорошие ajax-запросы, я вполне верю. Но с js в общем я думаю там проблемы. Потому-то и кричат (и я полностью согласен с вопиющими) о необходимости использовать unobtrusive javascript!
То, что она обрабатывает хорошие ajax-запросы, я вполне верю. Но с js в общем я думаю там проблемы. Потому-то и кричат (и я полностью согласен с вопиющими) о необходимости использовать unobtrusive javascript!
Вы дайте сцылко, где такое есть, я проверю. :-)
Я вам сейчас отвечаю с Opera mini.
Ajax работает, но не на 100%. Например чтоб проголосовать за новость надо жать 2 раза на стрелочку. При каждом ajax-запросе идет полная перепрорисовка страницы.
Ajax работает, но не на 100%. Например чтоб проголосовать за новость надо жать 2 раза на стрелочку. При каждом ajax-запросе идет полная перепрорисовка страницы.
к сожалению не всегда работает…
openwave так же делает
думаю это справедливо для всех старых телефонов. Ну или по крайней мере логично
думаю это справедливо для всех старых телефонов. Ну или по крайней мере логично
это пока есдинственная реально полезная статья по верстке для мобильных устройств в рунете (искал совсем недавно, в основном пишут «воду», причем умудряются делать это кратко).
автору спасибо за материал и плюс в карму.
автору спасибо за материал и плюс в карму.
А можно указать, откуда взята информация про подключение css, сокращенные записи, фон, списки и плавающие элементы?
Так же в тестировании вы упустили тот момент, что фактически все мобильные браузеры имеют несколько режимов отображения — как минимум «под ширину экрана» и «как большие» ;) И тестировать стоит в обоих режимах.
Пользовался Opera Mobile, NetFront, IE и Nokia Browser. Плавающие элементы они например в режиме «по ширине экрана» просто кладут в «стакан», без проблем. Таблицы себя в этом режиме действительно плохо ведут — все ячейки в строке склеиваются в plain text. А все остальные «проблемные пункты», описанные в статье, браузеры великолепно кушают.
К сожалению, не пользовался Opera Mini, потому могу быть не прав местами…
Так же в тестировании вы упустили тот момент, что фактически все мобильные браузеры имеют несколько режимов отображения — как минимум «под ширину экрана» и «как большие» ;) И тестировать стоит в обоих режимах.
Пользовался Opera Mobile, NetFront, IE и Nokia Browser. Плавающие элементы они например в режиме «по ширине экрана» просто кладут в «стакан», без проблем. Таблицы себя в этом режиме действительно плохо ведут — все ячейки в строке склеиваются в plain text. А все остальные «проблемные пункты», описанные в статье, браузеры великолепно кушают.
К сожалению, не пользовался Opera Mini, потому могу быть не прав местами…
А можно указать, откуда взята информация про подключение css, сокращенные записи, фон, списки и плавающие элементы?
Из личного опыта, видимо. Я за последние два года не сталкивался ни с одним телефоном, который бы некорректно воспринимал внешние css стили(кстати, рекомендую делать именно отдельным файлом, т.к. стиль кладется в кэш и больше не запрашивается телефоном. Экономим от килобайта и выше на каждой странице) и сокращенные записи. Плавающие элементы вообще не вижу смысла использовать для мобильной верстки, пока большинство телефонов не обзаведутся стандартными браузерами ака OSS на нокиях
Андрюх, а я считаю что стили лучше писать в теле страниц, иначе на несовсем современных мобилках сначало загружается страница без разметки, потом подгружается стить и применяется, и это происходит при каждом обращении к станице.
А если стить в теле, то он применяется сразу.
К современным мобилам это не актуально.
А если стить в теле, то он применяется сразу.
К современным мобилам это не актуально.
Например, телефоны стандарта i-mode вообще CSS только внутри тегов (в параметре style) поддерживают, что указано в официальном мануале по аймод.
Просто при написании статьи я ориентировался скорее на более старые браузеры, потому что таких пока большинство. Не у всех есть деньги на мобильный телефон с каким-нибудь симбианом, не говоря уже об айфоне с его сафари на WebKit'е.
P.S. За режимы отображения спасибо, забыл указать. Заболел я сегодня, голова слабо работала весь день. ;)
P.S. За режимы отображения спасибо, забыл указать. Заболел я сегодня, голова слабо работала весь день. ;)
На совсем старых браузерах стили могут иметь значение разве что в небольшом смысловом выделении — тут лучше положиться на семантику, а стили указывать как обычно. Размер страницы и геморрой уменьшится. Заголовки и ударения будут видны и так, а то, что не подгрузится пунктирное подчеркивание или красный цвет, мало где будет критично. Учитывая к тому же совсем небольшое разрешение…
Плавающие элементы — ну тут в принципе правильно указали, что для mobile версий они вообще смысла не имеют.
А про списки, уж простите меня, я просто не верю =)
Плавающие элементы — ну тут в принципе правильно указали, что для mobile версий они вообще смысла не имеют.
А про списки, уж простите меня, я просто не верю =)
Вообще я не читал пост (как и unnamed777 не по наслышке знаю что и как), но хочу выделить несколько принципиальных отличий от web:
1)Забудьте про JavaScript (Или Проверяйте на возможность использования)
2)Забудьте(на год-два) про куки (или...^)
3)Забудьте про позиционирвоание блоков: в wap есть только один метод: все блоки друг под другом. Некоторые браузеры некорректно работают с margin, например все opera mini до 4й ветки
4)Делайте две версии (wml+xhtml). Если решили делать чисто xhtml, то всё таки выдавайте пользователю, чей брауз его не поддерживает wml-страницу с ошибкой
5)Юзайте utf-8, не используйте BOM и не злоупотребляйте таблицей символов utf-8 (копирайты и тд можно, но например сердечки всякие и тд половина телов не покажет, или покажет квадратиком/вопросиком)
6)Страница должна быть маленькой по «размеру» — до 6 килобайт — оптимально.
7)Выносите CSS файлы в отдельные файлы (даже мой старенький sie-a65 понимает...)
8)Используйте ТОЛЬКО css 1
И в плюс ко всему: проверяйте возможности браузера и используйте их! Многие браузеры поддерживают и js и css 2.0 и куки, НО далеко не все.
1)Забудьте про JavaScript (Или Проверяйте на возможность использования)
2)Забудьте(на год-два) про куки (или...^)
3)Забудьте про позиционирвоание блоков: в wap есть только один метод: все блоки друг под другом. Некоторые браузеры некорректно работают с margin, например все opera mini до 4й ветки
4)Делайте две версии (wml+xhtml). Если решили делать чисто xhtml, то всё таки выдавайте пользователю, чей брауз его не поддерживает wml-страницу с ошибкой
5)Юзайте utf-8, не используйте BOM и не злоупотребляйте таблицей символов utf-8 (копирайты и тд можно, но например сердечки всякие и тд половина телов не покажет, или покажет квадратиком/вопросиком)
6)Страница должна быть маленькой по «размеру» — до 6 килобайт — оптимально.
7)Выносите CSS файлы в отдельные файлы (даже мой старенький sie-a65 понимает...)
8)Используйте ТОЛЬКО css 1
И в плюс ко всему: проверяйте возможности браузера и используйте их! Многие браузеры поддерживают и js и css 2.0 и куки, НО далеко не все.
бесполезная статья
новичкам она только нанесет вред советами, типа «WML устарел» и «для отладки пользуйтесь оперой мини».
ну а остальные ничего, кроме недочетов тут не увидят.
во-первых, xhtml поддерживается уже давно довольно старыми телефонами, но настолько плохо, что даже если браузер и поддерживает цветной режим, то пользователю лучше видеть WML
во-вторых, опера для отладки ну никак не годится. да, может в самой опере сайт и будет выглядеть более-менее, это не значит, что он будет также выглядеть в стандартном браузере (в подтверждение можно отнести хотя бы то, что на некоторых моторолах жирный русский текст виден не будет, я не говорю уже про косяки, связанные непосредственно с версткой). кстати как ни странно, обратное утверждение тоже работает — если сайт через стандартный браузер выглядит неплохо, то опера может испортить его до неузнаваемости.
в общем написано все очень поверхностно и нюансов тут много больше, чем может показаться на первый взгляд.
новичкам она только нанесет вред советами, типа «WML устарел» и «для отладки пользуйтесь оперой мини».
ну а остальные ничего, кроме недочетов тут не увидят.
во-первых, xhtml поддерживается уже давно довольно старыми телефонами, но настолько плохо, что даже если браузер и поддерживает цветной режим, то пользователю лучше видеть WML
во-вторых, опера для отладки ну никак не годится. да, может в самой опере сайт и будет выглядеть более-менее, это не значит, что он будет также выглядеть в стандартном браузере (в подтверждение можно отнести хотя бы то, что на некоторых моторолах жирный русский текст виден не будет, я не говорю уже про косяки, связанные непосредственно с версткой). кстати как ни странно, обратное утверждение тоже работает — если сайт через стандартный браузер выглядит неплохо, то опера может испортить его до неузнаваемости.
в общем написано все очень поверхностно и нюансов тут много больше, чем может показаться на первый взгляд.
Чё-то маловато способов хоть как-то спозиционировать блоки — фактически прямой поток и абсолютное?
и про абсолютное тоже стоит забыть, если нужна несколько-колоночная вёрстка, то в руки таблицы (а при работе с ними тоже много аспектов есть и проблем с ними не мало)… к сожалению такова реальность.
Если же ориентирвоаться на новые версии браузеров, то стоит забыть про все предрассудки… но опять же(как сказано где-то выше) тут аналогия с IE — новое, не значит популярное…
Если же ориентирвоаться на новые версии браузеров, то стоит забыть про все предрассудки… но опять же(как сказано где-то выше) тут аналогия с IE — новое, не значит популярное…
А зачем оно вам при небольших экранах? ;)
А если у меня какой-то коммуникатор Asus или Eten, да ещё и с разрешением 640х480?
У меня 800х480, не будем мериться ;)
Вы же не только для себя верстаете. А если вам неважны старые браузеры, то эти обсуждения вообще вам должны быть неинтересны )
Вы же не только для себя верстаете. А если вам неважны старые браузеры, то эти обсуждения вообще вам должны быть неинтересны )
Это да, но я чуть о другом.
Если вкладывать в сайт деньги, то человек ждёт окупаемости ресурса, которая наступит вероятно не сразу. Поэтому ИМХО сайт должен создаваться на перспективу, чтобы ближайшие пару лет его не нудно было переписывать под корень, потому что стандарты мобильных устройств резко изменились.
Как быть? Диагональ экрана у телефонов постоянно растет, вон Nvidia анонсировала устройство на базе браузера от Opera, iPhone тоже имеет не маленькую диагональ, Google Android, возможно, тоже выстрелить. Ориентироваться на устройства с экраном 176х220 уже несколько неактуально.
Выходом может быть создание, например, 2х версий сайта с маленькими и большими экранами.
Если вкладывать в сайт деньги, то человек ждёт окупаемости ресурса, которая наступит вероятно не сразу. Поэтому ИМХО сайт должен создаваться на перспективу, чтобы ближайшие пару лет его не нудно было переписывать под корень, потому что стандарты мобильных устройств резко изменились.
Как быть? Диагональ экрана у телефонов постоянно растет, вон Nvidia анонсировала устройство на базе браузера от Opera, iPhone тоже имеет не маленькую диагональ, Google Android, возможно, тоже выстрелить. Ориентироваться на устройства с экраном 176х220 уже несколько неактуально.
Выходом может быть создание, например, 2х версий сайта с маленькими и большими экранами.
Ну я выше уже выразил своё мнение по этому поводу. Верстайте как хотите, но учитывайте, что работать может не всё.
«ни в коем случае не следует применять таблицы для верстки страниц»
«использовать изображения в качестве фонов»
«лучше указывать аргументы свойства font-size в значениях small, medium, или large»
«старайтесь не использовать такие свойства, как float, clear, overflow, clip»
чувак сдурел чтоли? а верстать как?
черт с ними, с таблицами, а как без float'ов и без списков? как без фонов решить дизайнерские фантазии? как шрифты указывать, если их 10 размеров на странице?
Без float'ов и без div'ов можно очень замечательно верстать: www.tjkdesign.com/articles/css-layout/no_div_no_float_no_clear_no_hack_no_joke.asp
И зачем 10 размеров шрифтов на странице?
И зачем 10 размеров шрифтов на странице?
статья по вашей ссылке чушь. зачем извращатса?
и посчитайте колличество шрифтов на главной хабра.
и посчитайте колличество шрифтов на главной хабра.
Замечу, что это статья про вёрстку для МОБИЛЬНЫХ устройств. Как следствие дорогой трафик (а вдруг пользователь ещё и не знает про точку доступа internet?), единственный шрифт (везде разный) и отсутствие поддержки множества функций стандартной спецификации реальными телефонами.
шрифтов не больше 5 ;) но дело не в этом, просто все чушь и все кругом идиоты.
пример интересный, но с конкретным перегибом.
из одной крайности в другие:
использовать списки для структурной разметки — это перебор
чтобы там не говорил автор, есть спецификация в которой всё чётко сказано:
«Элементы DIV и SPAN в сочетании с атрибутами id и class предоставляют общий механизм для добавления структуры к документу. Эти элементы определяют содержимое как инлайн (SPAN) или уровня блока (DIV), но не навязывают других идиом представления содержимого.»
pyramidin.narod.ru/html401/global.html#h-7.5.4
«Упорядоченный список, созданный с использованием элемента OL, должен содержать информацию, как этот порядок может быть установлен, как в рецепте:
Mix dry ingredients thoroughly.
Pour in wet ingredients.
Mix for 10 minutes.
Bake for one hour at 300 degrees.»
pyramidin.narod.ru/html401/lists.html#h-10.2
отричательные margin для позиционирования в IE… ну не для этого margin придумали.
что float не для позиционирования (но иногда без него никак), что margin…
будет display: table поддерживатся всеми браузерами, тогда можно будет…
впрочем это оффтопик, хоть и интересный)
из одной крайности в другие:
использовать списки для структурной разметки — это перебор
The markup of this document is DIVless. Its structure relies entirely on OLs (Ordered Lists).
Why? Because in my opinion lists create a meaningful relationship between the different sections of a document.
чтобы там не говорил автор, есть спецификация в которой всё чётко сказано:
«Элементы DIV и SPAN в сочетании с атрибутами id и class предоставляют общий механизм для добавления структуры к документу. Эти элементы определяют содержимое как инлайн (SPAN) или уровня блока (DIV), но не навязывают других идиом представления содержимого.»
pyramidin.narod.ru/html401/global.html#h-7.5.4
«Упорядоченный список, созданный с использованием элемента OL, должен содержать информацию, как этот порядок может быть установлен, как в рецепте:
Mix dry ingredients thoroughly.
Pour in wet ingredients.
Mix for 10 minutes.
Bake for one hour at 300 degrees.»
pyramidin.narod.ru/html401/lists.html#h-10.2
отричательные margin для позиционирования в IE… ну не для этого margin придумали.
что float не для позиционирования (но иногда без него никак), что margin…
будет display: table поддерживатся всеми браузерами, тогда можно будет…
впрочем это оффтопик, хоть и интересный)
какие дизайнерские фантазии на экране 176х220 пикселей?
человек, который заходит на сайт с мобилы хочет увидеть информацию.
вполне возможно, что он вообще отключил загрузку картинок, ведь GPRS-траффик — дорогой!
человек, который заходит на сайт с мобилы хочет увидеть информацию.
вполне возможно, что он вообще отключил загрузку картинок, ведь GPRS-траффик — дорогой!
Вот, кому интересно отличные туториалы на все темы, касательно WAP. Сам по ним многое узнавал в своё время(ггы).
www.developershome.com/wap/ (смотрим меню слева). Если желаете-могу сделать перевод интересующих глав.
www.developershome.com/wap/ (смотрим меню слева). Если желаете-могу сделать перевод интересующих глав.
Ребята как можно запретить использование javascript для мобильного устройства?
до 600px в ширину например?
в javasctipt ноль. интересно
до 600px в ширину например?
в javasctipt ноль. интересно
Спасибо, сейчас как раз пригодилась статья =)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Верстка для мобильных устройств