Your SlideShare is downloading. ×
0
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Coding for iPhone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Coding for iPhone

1,670

Published on

My presentation at clienttech, Moscow, 15-16 Dec, 2008. http://cienttech.ru

My presentation at clienttech, Moscow, 15-16 Dec, 2008. http://cienttech.ru

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,670
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.
    • CSS для iPhone:
    • <link media=&quot;only screen and (max-device-width: 480px)&quot;
    • … />
    • CSS для всех остальных:
    • <link media=&quot;screen and (min-device-width: 481px)”
    • … />
    • JS:
    • if (navigator.userAgent.indexOf('iPhone') != -1)
  • 32. Размер экрана
  • 33. 60px!: window.scrollTo(0,1)
  • 34. Различать ориентацию
    • JS:
    • currentWidth = window . innerWidth ;
    • var orient = currentWidth == 320 ? &quot;profile&quot; : &quot;landscape&quot; ;
    • document . body . setAttribute ( &quot;orient&quot; , orient);
    • CSS:
    • body[orient=&quot;profile&quot;] {}
    • body[orient=&quot;landscape”] {}
  • 35. landscape profile
  • 36. Трафик
    • Уменьшение HTTP- запросов
    • Меньше картинок
    • Gzip
    • Кеширование (файлы менее 25Кб)
    • Аякс (грузить части сайта)
    • Base64
    • Избегать фреймворков
  • 37. Оптимизация изображения
    • Запретить пользователю увеличивать сайт:
    • Одинаковый размер шрифта при поворотах:
  • 38. Юзабилити
    • Ссылки – кнопки. Большая кликабельная область.
    • Рекомендуемый шрифт Helvetica
    • Легкие странички
  • 39. Полезные мелочи
    • Звонок по клику: <a href=&quot;tel:555-1212&quot;>Call Me</a>
    • По умолчанию в эти поля вводятся числа:
    • <input name=&quot;phone_whatever&quot;
    • <input name=&quot;zip&quot;
    • Тултипы
  • 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
    • почта: [email_address]

×