Наталия Макишвили Вёрстка для мобильных телефонов



Pdf просмотр
Дата16.02.2017
Размер60 Kb.
Просмотров299
Скачиваний0

Яндекс.Субботник, Москва, 31 января 2009 года
Верстальщик
Наталия Макишвили
Вёрстка для мобильных
телефонов
1

Верстать для мобильных не сложно
2 2

Верстать для мобильных не сложно, но непривычно.
3 3

4 4

Верстка для маленьких экранов
изменяет наработанные подходы к
вёрстке:
устройств очень много
и они очень разные
5 5

6 6

План доклада
Деление сервисов на телефонные и смартфонные версии
Мобильные браузеры
Особенности верстки для телефонов
7 7

Делим устройства на группы
— телефоны,
— смартфоны.
8 8

Делим версии сервисов
— телефонная,
— смартфонная.
9 9

10 10

Браузеры смартфонов
— широкий экран и удобная навигация,
— поддержка JavaScript,
— хорошая поддержка css,
— улучшенная поддержка графики.
11 11

Браузеры телефонов
— ограничения размеров страниц,
— ограниченная поддержка css.
12 12

2 версии мобильных Яндекс-сервисов
http://m.yandex.ru
− для смартфонов http://m.ya.ru
− для телефонов
13 13

Опыт
— особенности из спецификации и документации,
— особенности, не описанные, но обнаруженные.
14 14

Смартфонные браузеры
- Nokia Browser (WebKit)
- IE Mobile
- Safari
- Opera Mobile
15 15

Телефонные браузеры
— Nokia Browser (Mobile Browser)
— OpenWave
— NetFront
— Opera Mini
16 16

Особенности верстки под
мобильные телефоны
17 17

Информация о браузере в телефоне
18
- поддержка WAP 2.0
- наличие XHTML-браузера
18

Браузер мобильного телефона
должен поддерживать
- XHTM Mobile Profile
- WAP CSS 2.0 19 19

Как мы верстаем?
20 20

Как мы верстаем?
21
Мы верстаем по стандартам.
21

XHTML Mobile Profile
WAPFORUM
//DTD
XHTML Mobile 1.0
//EN"
"
http://www.wapforum.org/DTD/xhtml-mobile10.dtd
">
22 22

XHTML Mobile Profile
— оптимизирован для мобильных устройств
— рекомендован для разработки мобильных сервисов W3C
— разработан на основе XHTML DTD
— правила разметки XHTML DTD
23 23


"
http://www.wapforum.org/DTD/xhtml-mobile10.dtd
24 24


</b><br>— говорящий, но короткий<br>25 25<br></div> <STYLE type="text/css"> </STYLE> <div id="page26-div" > <br><b>Отображение title в OpenWave</b><br>26 26<br></div> <STYLE type="text/css"> </STYLE> <div id="page27-div" > <br><b><head> </b><br><b><link> </b>or<b> <style>?</b><br>или<br>27 27<br></div> <STYLE type="text/css"> </STYLE> <div id="page28-div" > <br><b><head> </b><br><b><link></b><br>Плюс:<br>— стили закешируются<br>Минус:<br>— не все браузеры поддерживают внешние листы стилей,<br>28 28<br></div> <STYLE type="text/css"> </STYLE> <div id="page29-div" > <br><b><head> </b><br><b><style></b><br>Плюс:<br>— нет <a href="/mobilenoe-obuchenie-problemi-i-perspektivi.html">проблемы с устройствами</a>, не понимающими внешние стили<br>— стили загружаются с html одним http-запросом<br>Минус:<br>— нет кеширования<br>29 29<br></div> <STYLE type="text/css"> </STYLE> <div id="page30-div" > <br><b><span id='Проблема_дочерних_селекторов_Стили_применятсяСтили_НЕ_применятся30_30_Проблема_дочерних_селекторов'><a href="/referat-po-ekonomicheskoj-geografii-velikobritaniya-izmenenie.html">Проблема дочерних селекторов</a></span></b><br>Стили применятся<br>Стили НЕ применятся<br>30 30<br></div> <STYLE type="text/css"> </STYLE> <div id="page31-div" > <br><b>Проблема дочерних селекторов</b><br>Мы используем или<br>31 31<br></div> <STYLE type="text/css"> </STYLE> <div id="page32-div" > <br><b><span id='Глобальные_стили_32_32_Шрифты'>Глобальные стили</span></b><br>32 32<br></div> <STYLE type="text/css"> </STYLE> <div id="page33-div" > <br><b>Шрифты</b><br>font-size:<br>— em<br>— small, medium, large ...<br>— %<br>Я использую:<br>33 33<br></div> <STYLE type="text/css"> </STYLE> <div id="page34-div" > <br><b><span id='Шрифты_(Samsung_E250)_34_34_Глобальные_стили'>Шрифты (Samsung E250)</span></b><br>34 34<br></div> <STYLE type="text/css"> </STYLE> <div id="page35-div" > <br><b>Глобальные стили</b><br>35 35<br></div> <STYLE type="text/css"> </STYLE> <div id="page36-div" > <br><b>Правила для стилей</b><br>— Ластик используем только для тех элементов, которые используются в <a href="/1-teoreticheskaya-chaste-1-obshie-svedeniya-o-lokalenih-setyah.html">данном проекте</a>,<br>— На странице использовать только необходимые стили,<br>— Сборка стилей.<br>36 36<br></div> <STYLE type="text/css"> </STYLE> <div id="page37-div" > <br><b><body> </b><br>ДА<br>НЕТ<br>37 37<br></div> <STYLE type="text/css"> </STYLE> <div id="page38-div" > <br><b>Принципы вёрстки</b><br>— резиновая раскладка,<br>— семантика документа,<br>— валидность.<br>38 38<br></div> <STYLE type="text/css"> </STYLE> <div id="page39-div" > <br>— float<br>— overflow<br>— position<br>Не использовать<br>39 39<br></div> <STYLE type="text/css"> </STYLE> <div id="page40-div" > <br><b>Таблицы</b><br>Правила:<br>— не использовать таблицы для раскладки,<br>— не использовать вложенные таблицы,<br>— использовать альтернативные способы оформления информации<br>40 40<br></div> <STYLE type="text/css"> </STYLE> <div id="page41-div" > <br><b><span id='Проблемы_отображения_bold_,_:_font-style:_bold41_41_Проблемы_отображения_italic'><a href="/programma-torquelite-sozdana-dlya-polucheniya-i-otobrajeniya-d.html">Проблемы отображения bold</a></span></b><br><b>, <b>: font-style: bold<br>41 41<br></div> <STYLE type="text/css"> </STYLE> <div id="page42-div" > <br><b>Проблемы отображения italic</b><br><i>, <em>: font-style: italic - русский текст<br>42 42<br></div> <STYLE type="text/css"> </STYLE> <div id="page43-div" > <br><b><span id='Ссылки_Пример_accesskey:Результат:45_45_Ссылки'>Ссылки</span></b><br>— цвета активным и посещенным ссылкам задавать можно и нужно,<br>— не все браузеры применяют изменения цветов ссылок,<br>— не следует использовать фон для ссылок черного, синего или красного цветов.<br>43 43<br></div> <STYLE type="text/css"> </STYLE> <div id="page44-div" > <br><b>Ссылки</b><br>accesskey:<br>— для удобства навигации (быстрого перехода по ссылкам),<br>— необходимо информировать пользователя о <a href="/instrukciya-po-ustanovke-trast-onlajn-biznes-instrukciya-po-us.html">наличии ключей</a>.<br>Не поддерживается некоторыми Nokia.<br>44 44<br></div> <STYLE type="text/css"> </STYLE> <div id="page45-div" > <br><b>Ссылки</b><br>Пример accesskey:<br>Результат:<br>45 45<br></div> <STYLE type="text/css"> </STYLE> <div id="page46-div" > <br><b>Ссылки</b><br>Якоря:<br>Не поддерживается Nokia, Openwave.<br>46 46<br></div> <STYLE type="text/css"> </STYLE> <div id="page47-div" > <br><b><span id='Списки__Сброс_дефолтных_стилей:Ряд_браузеров_не_применяет.47_47_Списки'>Списки</span></b><br><ul> <br>Сброс дефолтных стилей:<br>Ряд браузеров не применяет.<br>47 47<br></div> <STYLE type="text/css"> </STYLE> <div id="page48-div" > <br><b>Списки</b><br><ul> <br>Сброс дефолтных стилей: решение.<br>48 48<br></div> <STYLE type="text/css"> </STYLE> <div id="page49-div" > <br><b><span id='Заголовки_Браузеры_поддерживают_своеобразно.Отображение_по-умолчанию:49_49_Заголовки'>Заголовки</span></b><br>Браузеры поддерживают своеобразно.<br>Отображение по-умолчанию:<br>49 49<br></div> <STYLE type="text/css"> </STYLE> <div id="page50-div" > <br><b>Заголовки</b><br>Стили:<br>50 50<br></div> <STYLE type="text/css"> </STYLE> <div id="page51-div" > <br><b>Заголовки</b><br>Стили: Изменение шрифта не применяется в браузере OpenWave<br>Отображение по-умолчанию,<br>или<br>51 51<br></div> <STYLE type="text/css"> </STYLE> <div id="page52-div" > <br><b><span id='Изображения_Используемые_форматы_изображений:—_jpg,—_gif,—_png-8.53_53_Изображения'>Изображения</span></b><br>Правила:<br>— графику оптимизируем по размеру и весу,<br>— реальные размеры изображений указываем в атрибутах,<br>— указываем alt.<br>52 52<br></div> <STYLE type="text/css"> </STYLE> <div id="page53-div" > <br><b>Изображения</b><br>Используемые форматы изображений:<br>— jpg,<br>— gif,<br>— png-8.<br>53 53<br></div> <STYLE type="text/css"> </STYLE> <div id="page54-div" > <br><b>Изображения</b><br>png-8: На мобильных телефонах Fly:<br>— не отображается вообще,<br>— отображается, но на черном фоне. <br>54 54<br></div> <STYLE type="text/css"> </STYLE> <div id="page55-div" > <br><b><span id='Фоновое_изображение_55_55_Фоновое_изображение'>Фоновое изображение</span></b><br>55 55<br></div> <STYLE type="text/css"> </STYLE> <div id="page56-div" > <br><b>Фоновое изображение</b><br>Особенности:<br>— не применяется сокращенная запись css свойств,<br>— не применяется позиционирование фона в % в <a href="/telefon-7-495-249-9011-mnogokanalenij.html">сокращенной форме</a>,<br>— не отображаются фоновые изображения.<br>56 56<br></div> <STYLE type="text/css"> </STYLE> <div id="page57-div" > <br><b>Фоновое изображение</b><br>Правила:<br>— использовать полную запись css-свойств,<br>— не нести в фоновом изображении смысловых нагрузок.<br>57 57<br></div> <STYLE type="text/css"> </STYLE> <div id="page58-div" > <br><b><span id='Вес_страницы_—_не_более_10кБ_кода,—_не_более_20кБ_кода_со_стилями_и_картинками._58_58_Полезные_ссылки'>Вес страницы</span></b><br>— не более 10кБ кода,<br>— не более 20кБ кода со стилями и картинками. <br>58 58<br></div> <STYLE type="text/css"> </STYLE> <div id="page59-div" > <br><b>Полезные ссылки</b><br>http://www.w3.org/TR/mobile-bp/<br> − Mobile Web Best Practices 1.0 http://www.w3.org/TR/css-mobile/<br> − CSS Mobile Profile 2.0<br>http://www.openmobilealliance.org/<br> − Open Mobile Alliance http://www.mobiforge.com/<br> − mobiForge - mobile development community http://www.forum.nokia.com/main/resources/getting_started/xhtml_content.html<br> −<br>Nokia Content Development recomendations http://developer.sonyericsson.com/site/global/home/p_home.jsp<br> −<br>Sony Ericsson Mobile Developer Support http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/choosing.htm<br> −<br>Openwave Developer Network<br>59 59<br></div> <STYLE type="text/css"> </STYLE> <div id="page60-div" > <br><b><span id='Наталия_Макишвили_Верстальщик_natamaki@yandex-team.ru60'>Наталия Макишвили</span></b><br>Верстальщик natamaki@yandex-team.ru<br>60<br></div> </em></i></body></head></link></head></link></head>
Каталог: company -> experience -> subbotnik
company -> Троянское приложение для Android обходит проверки Google Bouncer
company -> Лекция №2 по дисциплине «Операционные системы и оболочки» Тема №2 Операционные оболочки и среды для студентов специальности 230400. 62 Информационные системы и технологии
company -> Национальный Инновационный Центр
company -> Лекция Теоретические основы географических и земельно- информационных систем План: Основные понятия
company -> Учебно-методический комплекс по дисциплине «Информационные компьютерные сети»
subbotnik -> Рекламная Сеть Яндекса Как на ней заработать? Антон Попов Алматы, 16 октября 2009
experience -> Андрей Колпаков Аккаунт Менеджер


Поделитесь с Вашими друзьями:


База данных защищена авторским правом ©nethash.ru 2019
обратиться к администрации

войти | регистрация
    Главная страница


загрузить материал