Презентация на тему Вёрстка для iPhone

Презентация на тему Вёрстка для iPhone, предмет презентации: Образование. Этот материал содержит 42 слайдов. Красочные слайды и илюстрации помогут Вам заинтересовать свою аудиторию. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций ThePresentation.ru в закладки!

Слайды и текст этой презентации

Слайд 1
Текст слайда:

Вёрстка для iPhone

16 декабря, 2008, Москва


Слайд 2
Текст слайда:

Продано более 10 000 000



Слайд 3
Текст слайда:

За следующие 12 месяцев еще 40 000 000



Слайд 4
Текст слайда:

За следующие 12 месяцев еще 40 000 000

85% владельцев ходили в интернет


Слайд 5
Текст слайда:

И всё равно нельзя верстать только для iPhone



Слайд 6

Слайд 7
Текст слайда:


Don’t Build for Just One Device
Flickr


Слайд 8
Текст слайда:

Мобильные платформы

Nokia (Symbian) – WebKit
iPhone – WebKit
Android – WebKit

Не так важен сам iPhone как будущее.


Слайд 9
Текст слайда:

Чем отличается от других?

Почти полноценный браузер


Слайд 10
Текст слайда:

Чем отличается от других?

Почти полноценный браузер
Два режима (portrait+landscape)


Слайд 11
Текст слайда:

Чем отличается от других?

Почти полноценный браузер
Два режима (portrait+landscape)
Пальцы очень разные
(хоккеисты и балерины)


Слайд 12
Текст слайда:

Чем отличается от других?

Почти полноценный браузер
Два режима (portrait+landscape)
Пальцы очень разные
Нос


Слайд 13
Текст слайда:

Расписание поездов? Одну минуту, посмотрю на сайте.


Слайд 14
Текст слайда:

ОГРАНИЧЕНИЯ



Слайд 15
Текст слайда:

Почти Safari, кроме...

Размер приложения не более 10Мб
Кеш для файлов не более 25Кб
Таймаут всего, что исполняется более 5 секунд
Клик неточный, мышки нет
Нет работы с файлами
Flash


Слайд 16
Текст слайда:

Размер экрана


Слайд 17
Текст слайда:

СЛАДКОЕ



Слайд 18
Текст слайда:

Хорошее

Нет Internet Explorer
Нет Internet Explorer и Nokia 1100!!!
AJAX отлично работает
В CSS возможно почти все что известно
Canvas



Слайд 19
Текст слайда:

CSS3 и анимация

.divSlide {       
-webkit-animation-name: "slide-me-to-the-right";       
-webkit-animation-duration: 1s;
}
@-webkit-keyframes "slide-me-to-the-right" {        from { left: 0px; }       
to { left: 100px; }
}


Слайд 20
Текст слайда:

Шрифты (Helvetica!)


Слайд 21
Текст слайда:

РАЗНЫЕ САЙТЫ ДЛЯ IPHONE



Слайд 22
Текст слайда:

Не работают


Слайд 23
Текст слайда:

Хотя бы открываются


Слайд 24
Текст слайда:

Оптимизированы


Слайд 25
Текст слайда:

Копируют интерфейс (iUI)


Слайд 26
Текст слайда:

imoviemash.com (iUI)


Слайд 27
Текст слайда:

По какому пути идти?





Слайд 28
Текст слайда:

По какому пути идти? По правильному!





Слайд 29
Текст слайда:

По какому пути идти?

Вариант оптимизированного сайта
Запоминающийся дизайн
Не ограничены интерфейсом
Красиво


Слайд 30
Текст слайда:

ОПТИМИЗАЦИЯ САЙТА ДЛЯ IPHONE



Слайд 31
Текст слайда:

Как узнать iPhone? Handheld?

CSS для iPhone:
…/>
CSS для всех остальных:

Слайд 32
Текст слайда:

Размер экрана


Слайд 33
Текст слайда:

60px!: window.scrollTo(0,1)


Слайд 34
Текст слайда:

Различать ориентацию

JS:
currentWidth = window.innerWidth;
var orient = currentWidth == 320 ? "profile" : "landscape";
document.body.setAttribute("orient", orient);


CSS:
body[orient="profile"] {}
body[orient="landscape”] {}


Слайд 35
Текст слайда:


landscape

profile


Слайд 36
Текст слайда:

Трафик

Уменьшение HTTP-запросов
Меньше картинок
Gzip
Кеширование (файлы менее 25Кб)
Аякс (грузить части сайта)
Base64
Избегать фреймворков


Слайд 37
Текст слайда:

Оптимизация изображения

Запретить пользователю увеличивать сайт:


Одинаковый размер шрифта при поворотах:


Слайд 38
Текст слайда:

Юзабилити

Ссылки – кнопки. Большая кликабельная область.
Рекомендуемый шрифт Helvetica
Легкие странички


Слайд 39
Текст слайда:

Полезные мелочи

Звонок по клику: Call Me
По умолчанию в эти поля вводятся числа:
Тултипы


Слайд 40
Текст слайда:

Тестировать

iPhoney (дизайн)
ySlow (производительность)
Обычные инструменты веб-разработки
iPhone


Слайд 41
Текст слайда:

Ссылки

Официальная документация: http://developer.apple.com/webapps/
Хороший «хакерский» ресурс http://www.iphonewebdev.com/
Фреймворк с интерфейсом под iPhone:
http://code.google.com/p/iui/
Статья на alistapart:
http://www.alistapart.com/articles/putyourcontentinmypocket


Слайд 42
Текст слайда:

СПАСИБО!

Юрий Артюх,
сайт: http://cssing.org.ua
почта: akella.a@gmail.com


Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика