Coding for iPhone
-
Upload
yuriy-artyukh -
Category
Technology
-
view
2.261 -
download
0
description
Transcript of Coding for iPhone
![Page 1: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/1.jpg)
Вёрстка для iPhone
16 декабря, 2008, Москва
![Page 2: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/2.jpg)
Продано более 10 000 000
![Page 3: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/3.jpg)
За следующие 12 месяцевеще 40 000 000
![Page 4: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/4.jpg)
За следующие 12 месяцевеще 40 000 000
85% владельцев ходили в интернет
![Page 5: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/5.jpg)
И всё равно нельзя верстать только для iPhone
![Page 6: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/6.jpg)
![Page 7: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/7.jpg)
Don’t Build for Just One DeviceFlickr
![Page 8: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/8.jpg)
Мобильные платформы
• Nokia (Symbian) – WebKit• iPhone – WebKit• Android – WebKit
Не так важен сам iPhone как будущее.
![Page 9: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/9.jpg)
Чем отличается от других?
• Почти полноценный браузер
![Page 10: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/10.jpg)
Чем отличается от других?
• Почти полноценный браузер
• Два режима (portrait+landscape)
![Page 11: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/11.jpg)
Чем отличается от других?
• Почти полноценный браузер
• Два режима (portrait+landscape)
• Пальцы очень разные (хоккеисты и балерины)
![Page 12: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/12.jpg)
Чем отличается от других?
• Почти полноценный браузер
• Два режима (portrait+landscape)
• Пальцы очень разные• Нос
![Page 13: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/13.jpg)
Расписание поездов?Одну минуту, посмотрю на сайте.
![Page 14: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/14.jpg)
ОГРАНИЧЕНИЯ
![Page 15: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/15.jpg)
Почти Safari, кроме...
• Размер приложения не более 10Мб• Кеш для файлов не более 25Кб• Таймаут всего, что исполняется более 5
секунд• Клик неточный, мышки нет• Нет работы с файлами• Flash
![Page 16: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/16.jpg)
Размер экрана
![Page 17: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/17.jpg)
СЛАДКОЕ
![Page 18: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/18.jpg)
Хорошее
• Нет Internet Explorer• Нет Internet Explorer и Nokia 1100!!!• AJAX отлично работает• В CSS возможно почти все что известно• Canvas
![Page 19: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/19.jpg)
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; }
}
![Page 20: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/20.jpg)
Шрифты (Helvetica!)
![Page 21: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/21.jpg)
РАЗНЫЕ САЙТЫ ДЛЯ IPHONE
![Page 22: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/22.jpg)
Не работают
![Page 23: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/23.jpg)
Хотя бы открываются
![Page 24: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/24.jpg)
Оптимизированы
![Page 25: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/25.jpg)
Копируют интерфейс (iUI)
![Page 26: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/26.jpg)
imoviemash.com (iUI)
![Page 27: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/27.jpg)
По какому пути идти?
![Page 28: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/28.jpg)
По какому пути идти?
По правильному!
![Page 29: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/29.jpg)
По какому пути идти?• Вариант оптимизированного сайта
• Запоминающийся дизайн• Не ограничены интерфейсом• Красиво
![Page 30: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/30.jpg)
ОПТИМИЗАЦИЯ САЙТА ДЛЯ IPHONE
![Page 31: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/31.jpg)
• CSS для iPhone:<link media="only screen and (max-device-width: 480px)"
…/>
• CSS для всех остальных:<link media="screen and (min-device-width: 481px)”
…/>
• JS:if (navigator.userAgent.indexOf('iPhone') != -1)
![Page 32: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/32.jpg)
Размер экрана
![Page 33: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/33.jpg)
60px!: window.scrollTo(0,1)
![Page 34: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/34.jpg)
Различать ориентацию
• JS:currentWidth = window.innerWidth; var orient = currentWidth == 320 ? "profile" : "landscape";document.body.setAttribute("orient", orient);
• CSS:body[orient="profile"] {}
body[orient="landscape”] {}
![Page 35: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/35.jpg)
landscape
profile
![Page 36: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/36.jpg)
Трафик
• Уменьшение HTTP-запросов• Меньше картинок• Gzip• Кеширование (файлы менее 25Кб)• Аякс (грузить части сайта)• Base64• Избегать фреймворков
![Page 37: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/37.jpg)
Оптимизация изображения
• Запретить пользователю увеличивать сайт:
• Одинаковый размер шрифта при поворотах:
![Page 38: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/38.jpg)
Юзабилити
• Ссылки – кнопки. Большая кликабельная область.
• Рекомендуемый шрифт Helvetica• Легкие странички
![Page 39: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/39.jpg)
Полезные мелочи
• Звонок по клику: <a href="tel:555-1212">Call Me</a>• По умолчанию в эти поля вводятся числа:
<input name="phone_whatever"
<input name="zip"
• Тултипы
![Page 40: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/40.jpg)
Тестировать
• iPhoney (дизайн)• ySlow (производительность)• Обычные инструменты веб-разработки• iPhone
![Page 41: Coding for iPhone](https://reader033.fdocuments.us/reader033/viewer/2022051514/5481e35fb4af9f636a8b457c/html5/thumbnails/41.jpg)
Ссылки
• Официальная документация: http://developer.apple.com/webapps/
• Хороший «хакерский» ресурс http://www.iphonewebdev.com/
• Фреймворк с интерфейсом под iPhone:http://code.google.com/p/iui/
• Статья на alistapart:http://www.alistapart.com/articles/putyourcontentinmypocket