Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
42 слайда
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
7.56 MB
Просмотров:
38
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![Вёрстка для iPhone декабря, ,](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img0.jpg)
Содержание слайда: Вёрстка для iPhone
16 декабря, 2008, Москва
№2 слайд![Продано более](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img1.jpg)
Содержание слайда: Продано более 10 000 000
№3 слайд![За следующие месяцев еще](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img2.jpg)
Содержание слайда: За следующие 12 месяцев
еще 40 000 000
№4 слайд![За следующие месяцев еще](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img3.jpg)
Содержание слайда: За следующие 12 месяцев
еще 40 000 000
85% владельцев ходили в интернет
№5 слайд![И всё равно нельзя верстать](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img4.jpg)
Содержание слайда: И всё равно нельзя верстать только для iPhone
№6 слайд![](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img5.jpg)
№7 слайд![Don t Build for Just One](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img6.jpg)
Содержание слайда: Don’t Build for Just One Device
Flickr
№8 слайд![Мобильные платформы Nokia](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img7.jpg)
Содержание слайда: Мобильные платформы
Nokia (Symbian) – WebKit
iPhone – WebKit
Android – WebKit
Не так важен сам iPhone как будущее.
№9 слайд![Чем отличается от других?](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img8.jpg)
Содержание слайда: Чем отличается от других?
Почти полноценный браузер
№10 слайд![Чем отличается от других?](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img9.jpg)
Содержание слайда: Чем отличается от других?
Почти полноценный браузер
Два режима (portrait+landscape)
№11 слайд![Чем отличается от других?](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img10.jpg)
Содержание слайда: Чем отличается от других?
Почти полноценный браузер
Два режима (portrait+landscape)
Пальцы очень разные
(хоккеисты и балерины)
№12 слайд![Чем отличается от других?](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img11.jpg)
Содержание слайда: Чем отличается от других?
Почти полноценный браузер
Два режима (portrait+landscape)
Пальцы очень разные
Нос
№13 слайд![Расписание поездов? Одну](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img12.jpg)
Содержание слайда: Расписание поездов?
Одну минуту, посмотрю на сайте.
№14 слайд![ОГРАНИЧЕНИЯ](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img13.jpg)
Содержание слайда: ОГРАНИЧЕНИЯ
№15 слайд![Почти Safari, кроме... Размер](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img14.jpg)
Содержание слайда: Почти Safari, кроме...
Размер приложения не более 10Мб
Кеш для файлов не более 25Кб
Таймаут всего, что исполняется более 5 секунд
Клик неточный, мышки нет
Нет работы с файлами
Flash
№16 слайд![Размер экрана](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img15.jpg)
Содержание слайда: Размер экрана
№17 слайд![СЛАДКОЕ](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img16.jpg)
Содержание слайда: СЛАДКОЕ
№18 слайд![Хорошее Нет Internet Explorer](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img17.jpg)
Содержание слайда: Хорошее
Нет Internet Explorer
Нет Internet Explorer и Nokia 1100!!!
AJAX отлично работает
В CSS возможно почти все что известно
Canvas
№19 слайд![CSS и анимация .divSlide](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img18.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; }
}
№20 слайд![Шрифты Helvetica!](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img19.jpg)
Содержание слайда: Шрифты (Helvetica!)
№21 слайд![РАЗНЫЕ САЙТЫ ДЛЯ IPHONE](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img20.jpg)
Содержание слайда: РАЗНЫЕ САЙТЫ ДЛЯ IPHONE
№22 слайд![Не работают](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img21.jpg)
Содержание слайда: Не работают
№23 слайд![Хотя бы открываются](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img22.jpg)
Содержание слайда: Хотя бы открываются
№24 слайд![Оптимизированы](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img23.jpg)
Содержание слайда: Оптимизированы
№25 слайд![Копируют интерфейс iUI](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img24.jpg)
Содержание слайда: Копируют интерфейс (iUI)
№26 слайд![imoviemash.com iUI](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img25.jpg)
Содержание слайда: imoviemash.com (iUI)
№27 слайд![По какому пути идти?](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img26.jpg)
Содержание слайда: По какому пути идти?
№28 слайд![По какому пути идти? По](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img27.jpg)
Содержание слайда: По какому пути идти?
По правильному!
№29 слайд![По какому пути идти? Вариант](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img28.jpg)
Содержание слайда: По какому пути идти?
Вариант оптимизированного сайта
Запоминающийся дизайн
Не ограничены интерфейсом
Красиво
№30 слайд![ОПТИМИЗАЦИЯ САЙТА ДЛЯ IPHONE](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img29.jpg)
Содержание слайда: ОПТИМИЗАЦИЯ САЙТА ДЛЯ IPHONE
№31 слайд![CSS для iPhone CSS для iPhone](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img30.jpg)
Содержание слайда: CSS для iPhone:
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)
№32 слайд![Размер экрана](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img31.jpg)
Содержание слайда: Размер экрана
№33 слайд![px! window.scrollTo ,](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img32.jpg)
Содержание слайда: 60px!: window.scrollTo(0,1)
№34 слайд![Различать ориентацию JS](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img33.jpg)
Содержание слайда: Различать ориентацию
JS:
currentWidth = window.innerWidth;
var orient = currentWidth == 320 ? "profile" : "landscape";
document.body.setAttribute("orient", orient);
CSS:
body[orient="profile"] {}
body[orient="landscape”] {}
№35 слайд![](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img34.jpg)
№36 слайд![Трафик Уменьшение](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img35.jpg)
Содержание слайда: Трафик
Уменьшение HTTP-запросов
Меньше картинок
Gzip
Кеширование (файлы менее 25Кб)
Аякс (грузить части сайта)
Base64
Избегать фреймворков
№37 слайд![Оптимизация изображения](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img36.jpg)
Содержание слайда: Оптимизация изображения
Запретить пользователю увеличивать сайт:
Одинаковый размер шрифта при поворотах:
№38 слайд![Юзабилити Ссылки кнопки.](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img37.jpg)
Содержание слайда: Юзабилити
Ссылки – кнопки. Большая кликабельная область.
Рекомендуемый шрифт Helvetica
Легкие странички
№39 слайд![Полезные мелочи Звонок по](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img38.jpg)
Содержание слайда: Полезные мелочи
Звонок по клику: <a href="tel:555-1212">Call Me</a>
По умолчанию в эти поля вводятся числа:
<input name="phone_whatever"
<input name="zip"
Тултипы
№40 слайд![Тестировать iPhoney дизайн](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img39.jpg)
Содержание слайда: Тестировать
iPhoney (дизайн)
ySlow (производительность)
Обычные инструменты веб-разработки
iPhone
№41 слайд![Ссылки Официальная](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img40.jpg)
Содержание слайда: Ссылки
Официальная документация: http://developer.apple.com/webapps/
Хороший «хакерский» ресурс http://www.iphonewebdev.com/
Фреймворк с интерфейсом под iPhone:
http://code.google.com/p/iui/
Статья на alistapart:
http://www.alistapart.com/articles/putyourcontentinmypocket
№42 слайд![СПАСИБО! Юрий Артюх, сайт](/documents/5472b5e1dc4e9abc3999d0231d6c7728/img41.jpg)
Содержание слайда: СПАСИБО!
Юрий Артюх,
сайт: http://cssing.org.ua
почта: akella.a@gmail.com