В этом году поднявшись на 4-ый этаж заметил, что план помещений в Крокус-Экспо меняется как угодно. На потолке есть полозья куда вставляются стенки как будет угодно организаторам.
Основной зал теперь открытый, при регистрации выдали красно-синие очки для просмотра трехмерного видео. На бейдже не оказалось расписание, а только бар-код для того, что бы его найти.
Пост получился очень длинным, поэтому можно прочитать заголовки и остановится на заинтересовавших разделах.
Далее об Android, html5 и ускорении
На вступительной секции презентовали сайт developers.google.com/go/stories
Рассмотрели проникновение интернета и мобильных устройств в нашу жизнь начиная с 1990 года. Сейчас ежедневно активируется более 500 тысяч андроид устройств. В мире более более 4 миллиардов телефонов, из них 150 миллионов работает на андроиде, которые производят 39 компаний.
В феврале 2010 года активировалось 60 тысяч устройств ежедневно, в январе 2011 года – 300 тысяч, а в декабре 2011 года ожидается 550 тысяч активаций ежедневно.
За 20 месяцев работы андроид маркет было более 1 миллиарда установок приложений, к июлю 2011 года это число достигло 6 миллиардов и продолжает расти. На текущий момент в андроид маркете содержится 250 тысяч приложений.
Объемы и темпы роста поражают. Это хорошо, но из-за этого сильно растут требования для мобильных приложений, они должны быть все более удобными, быстрыми, красивыми и менее требовательны к ресурсам.
Выступали разработчики самого популярного платного на андроид маркете приложения: игры Cut the Rope. Здорово, что самая популярная игра разработана в России.
Одна из задач решаемая сейчас это соединить мобильный и веб мир во едино. Пользователь не должен чувствовать разницу при смене платформы. Любой веб-сайт (веб приложение) должно иметь свое представление в мобильной среде.
На данный момент 67% пользователей используют браузере с поддержкой HTML5, а что особенно радует: в России это число возросло до 84%. Значит можно активно использовать современные возможности HTML5.
Продемонстрировали на что способен WebGl. С помощью этих технологий можно реализовывать очень красивую графику в вебе при помощи canvas и javascript. Продемонстрировали приложений с бассейном с водой, в котором находился шар, очень красиво выглядят волны, тени, вращения бассейна. И все это в вебе без использование видео и флеша. Рендеринг в реальном времени с использование графического процессора. Так же была демонстрация css-анимации (Flux slider), посмотрели 2D игру астероиды, как реализовано распознавание речи в google Translate (html5 тег — x-webkit-speech ).
Очень понравилась новая встроенная возможность в Chrome умеющая форматировать javascript код из минифицированного в удобочитаемый. Называется эта кнопочка Pretty Print в инструментах для разработчиков, выглядит в виде фигурных скобочек.
Так же упомянули о Web Audio Api, формате видео WebM (/>) позволяющий просматривать видео в 3D.
После этого перешлю к Google+. Самое главное – круги. Отлично, конечно, когда все родственники ей пользуются, тогда можно очень здорово организовывать общение, особенно если все живут в разных местах, или находятся в поездках. Очень удобно организовывать видео встречи с использование мобильных устройств и обычных компьютеров.
Google+ исполнилось 90 дней и в ней реализовано более 100 новых фишек. Уже активно используется Google+ Platform: Google+ хостит у себя iframe, в который можно вставлять свои приложения, предоставляет API: developers.google.com/+
Конечно не обошли стороной кнопку +1, которая используется в поиске, в рекламе, на сайтах. Очень интересно видеть на странице результатов поиска, кто из твоих знакомых порекомендовал найденный сайт
developer.android.com
Упомянутые фишки новой версии:
Система обладает очень хорошей совместимостью с предыдущими версиями и она построена таким образом, что бы разработка была максимально удобна как для планшетов, так и для мобильных устройств.
Например, если в мобильном приложении используется несколько экранов между которыми надо осуществлять переходы, то для планшета можно изменить компоновку этих экранов и они будут расположены рядом. В итоге отличие только в xml описывающем представление.
Теперь в приложениях можно осуществлять покупку дополнений, таким образом отпала необходимость возвращаться в маркет. Многие зарубежные операторы поддерживают оплату приложений непосредственно с мобильного счета, удобно, что не надо привязывать кредитную карточку к маркету. Конечно, в России эта возможность если и появится, то не скоро.
Еще некоторые плюшки:
Очень интересная и мощная технология, которую уже надо активно использовать в своих приложениях.
Кому, когда и зачем может понадобится offline доступ?
Что и как кешировать описывается в манифесте:
CACHE:
указанные url будут кешироваться всегда
FALLBACK:
если не доступна онлайн-версия, то брать из кеша
NETWORK:
всегда брать из онлайна, если здесь стоит *, то все, что не вошло в предыдущие правила всегда берется из онлайна
Подробно: appcachefacts.info
В webStore можно хранить не структурированные данные, для чего сейчас используются cookie. Как раз для повышения производительности рекомендуется отказаться от cookie в пользу webStore. Структурированные данные используя IndexedDB и бинарные файлы.
Для хранения данных в пределах текущей сессии, пока пользователь не закрыл браузер используется sessionStorage. Для хранения данных между сессиями – localStorage, имеет методы: setItem(), getItem(),removeItem(), clear(). Для преобразования в строку и хранения json данных удобно использовать функцию JSON.stringify()
Для хранения структурированных данных используется IndexedDB, которая поддерживает транзакции. Но пока эта БД поддерживается только в Chrome и Firefox
Хранение бинарных файлов происходит в файловой системе: windows.requestFileSystem()
Надо помнить, что при использовании хранилища на стороне клиента возникает необходимость синхронизировать данные не только с сервером, но и между открытыми окнами (SharedWorker).
В хроме для просмотра текущего состояние хранилища можно использовать адреса:
chrome://appcache-internals
chrome://blob-internals
chrome://quota-internals
Узнать о поддержке этих технологий различными браузерами можно на сайте caniuse.com и mobilehtml5.org
Поэкспериментировать с манифестами можно здесь: appmator.appspot.com
Пример приложения использующего эти технологии: springpadit.com
Библиотеки для работы с локальными хранилищами:
Очень интересный доклад и презентация, рекомендую ее посмотреть всем, открывать в Chrome. Переписывать презентацию смысла нет, но если кратко, то в ней идет речь о новых возможностях:
Для анимации теперь есть requestAnimationFrame, вместо setTimeout. Основные отличия:
Page Visibility API: теперь мы знаем когда страница просматривается, а когда пользователь переключился на другую вкладку. Это позволяет, например, приостановить видео пока страница не активна. Пример: www.samdutton.com/pageVisibility
Prerendering: можно сказать браузеру какую страницу не только загрузить заранее, но и отрендерить. Таким образом при переходе на prerendering страницу она отобразится моментально! Демонстрация: prerender-test.appspot.com
Navigator.onLine: теперь можно знать есть ли в данный момент соединения с интернетом. использую специальное свойство navigator.onLine и воспользоваться событиями online и offline, на которые можно повесить свои обработчики. Пример есть в презентации.
Web Intents: для уменьшения путаницы в существующих сервисах. Работает следующим образом: сервис регистрируется как обработчик определенных типов событий, приложение сообщает о намерении выполнить действие, пользователь выбирает из зарегистрированных сервисов какой он хочет для этого использовать. Пример: examples.webintents.org/intents/pick/index.html
Camera & microphone access: теперь есть доступ к видео камере и микрофону компьютера.
Fullscreen content: любой элемент можно отобразить в полноэкранном режиме: bleedinghtml5.appspot.com/demos/fullscreen.html
WebRTC: использование видео и аудио в реальном времени в браузере без помощи сторонних плагинов и флеша. Все функции по подавлению эхо, шумоподавлению, регулировки усиления браузер берет на себя. Это открывает очень много возможностей: видео конференции, аудио звонки непосредственно на сайте, построение социальных сетей нового уровня, создание онлайн презентаций, онлайн обучение и многое другое без использования дополнительных плагинов. Подробней: www.webrtc.org
Web Audio API: теперь это не просто тег для проигрывания музыки, но и анализ аудио в реально времени, низкоуровневые манипуляция, различные аудио-эффекты.
Но плохая! Многое из этого еще в экспериментальном режиме, возможно доступно только в Chrome. О статусе этих разработок: chromestatus.com.
Хорошая новость! Для работы html5 в отсталых браузерах можно использовать chrome frame.
Прибыль от сайта пропорциональна его скорости. Чем медленнее сайт, тем меньше людей на нем задержаться. Скорость = Доход.
У google есть замечательный инструмент которые анализирует сайт, оценивать его скорость и дает рекомендации для его ускорения: pagespeed.googlelabs.com
Рекомендации включают в себя: добавление заголовком для кеширование статики на стороне клиента, создание css спрайтов, объединение и включение сжатия css и javascript, отложить анализ javascript и многое другое.
Для сложных проектов все эти действия, скорее всего, лучше и надежней выполнять вручную, тем более если используются nginx, apache и может быть дополнительные фронтенд сервера, которые могут дополнительно кешировать статику.
А для автоматизации процесса оптимизации сайта google выпустил модуль для apache mod_pagespeed, которые выполняет многие из упомянутых рекомендации. Так же он может ставить статическом картинкам время кеширования год, но в случае его изменения в более ранний срок добавлять хеш к названию картинок, чем самым вызовет их обновление. Таким образом одновременно ставится большое время кеширования, но и следится за обновлениями.
По-мимо модуля для апача сейчас тестируется online решение: code.google.com/speed/pss. Гугл предоставляет фронтенд сервер через который пользователи обращаются к вашему сайту, в итоге весь трафик ходит через гугл, а он производит оптимизации, кеширует статику и помогает более быстрой доставке контента, т.к. его сервера находятся по всему миру.
Так же для тестирования есть очень удобный сервис www.webpagetest.org, он позволяет тестировать скорость сайта с точки зрения пользователя из разных точек мира используя разные браузеры. Причем сервис тестирует не только первичную загрузку, но и повторные с учетом предварительно закешированных данных.
На этом пока все. Изучайте, ускоряете, творите. Спасибо всем кто дочитал до конца.
Буду рад любым комментариям и вопросам.
Основной зал теперь открытый, при регистрации выдали красно-синие очки для просмотра трехмерного видео. На бейдже не оказалось расписание, а только бар-код для того, что бы его найти.
Пост получился очень длинным, поэтому можно прочитать заголовки и остановится на заинтересовавших разделах.
Далее об Android, html5 и ускорении
Открытие конференции
На вступительной секции презентовали сайт developers.google.com/go/stories
Рассмотрели проникновение интернета и мобильных устройств в нашу жизнь начиная с 1990 года. Сейчас ежедневно активируется более 500 тысяч андроид устройств. В мире более более 4 миллиардов телефонов, из них 150 миллионов работает на андроиде, которые производят 39 компаний.
В феврале 2010 года активировалось 60 тысяч устройств ежедневно, в январе 2011 года – 300 тысяч, а в декабре 2011 года ожидается 550 тысяч активаций ежедневно.
За 20 месяцев работы андроид маркет было более 1 миллиарда установок приложений, к июлю 2011 года это число достигло 6 миллиардов и продолжает расти. На текущий момент в андроид маркете содержится 250 тысяч приложений.
Объемы и темпы роста поражают. Это хорошо, но из-за этого сильно растут требования для мобильных приложений, они должны быть все более удобными, быстрыми, красивыми и менее требовательны к ресурсам.
Выступали разработчики самого популярного платного на андроид маркете приложения: игры Cut the Rope. Здорово, что самая популярная игра разработана в России.
Одна из задач решаемая сейчас это соединить мобильный и веб мир во едино. Пользователь не должен чувствовать разницу при смене платформы. Любой веб-сайт (веб приложение) должно иметь свое представление в мобильной среде.
На данный момент 67% пользователей используют браузере с поддержкой HTML5, а что особенно радует: в России это число возросло до 84%. Значит можно активно использовать современные возможности HTML5.
Продемонстрировали на что способен WebGl. С помощью этих технологий можно реализовывать очень красивую графику в вебе при помощи canvas и javascript. Продемонстрировали приложений с бассейном с водой, в котором находился шар, очень красиво выглядят волны, тени, вращения бассейна. И все это в вебе без использование видео и флеша. Рендеринг в реальном времени с использование графического процессора. Так же была демонстрация css-анимации (Flux slider), посмотрели 2D игру астероиды, как реализовано распознавание речи в google Translate (html5 тег — x-webkit-speech ).
Очень понравилась новая встроенная возможность в Chrome умеющая форматировать javascript код из минифицированного в удобочитаемый. Называется эта кнопочка Pretty Print в инструментах для разработчиков, выглядит в виде фигурных скобочек.
Так же упомянули о Web Audio Api, формате видео WebM (/>) позволяющий просматривать видео в 3D.
После этого перешлю к Google+. Самое главное – круги. Отлично, конечно, когда все родственники ей пользуются, тогда можно очень здорово организовывать общение, особенно если все живут в разных местах, или находятся в поездках. Очень удобно организовывать видео встречи с использование мобильных устройств и обычных компьютеров.
Google+ исполнилось 90 дней и в ней реализовано более 100 новых фишек. Уже активно используется Google+ Platform: Google+ хостит у себя iframe, в который можно вставлять свои приложения, предоставляет API: developers.google.com/+
Конечно не обошли стороной кнопку +1, которая используется в поиске, в рекламе, на сайтах. Очень интересно видеть на странице результатов поиска, кто из твоих знакомых порекомендовал найденный сайт
Что нового и важного в Android
developer.android.com
Упомянутые фишки новой версии:
- съемка видео в 3D, ведущий снимал зал и в 3D очках можно было смотреть на экране результат
- эта система хорошо работает как на различных планшетах, так и на мобильных телефонах
- возможность одновременного скроллинга нескольких областей
- Action Bar будет на планшетах и на мобильных телефонах
Система обладает очень хорошей совместимостью с предыдущими версиями и она построена таким образом, что бы разработка была максимально удобна как для планшетов, так и для мобильных устройств.
Например, если в мобильном приложении используется несколько экранов между которыми надо осуществлять переходы, то для планшета можно изменить компоновку этих экранов и они будут расположены рядом. В итоге отличие только в xml описывающем представление.
Теперь в приложениях можно осуществлять покупку дополнений, таким образом отпала необходимость возвращаться в маркет. Многие зарубежные операторы поддерживают оплату приложений непосредственно с мобильного счета, удобно, что не надо привязывать кредитную карточку к маркету. Конечно, в России эта возможность если и появится, то не скоро.
Еще некоторые плюшки:
- Возможность включать аппаратное ускорение приложений: <application android:hardwareAccelerate=«true»>, но, пока, не всегда эта опция может привести к желаемому эффекту, так что надо тестировать в конкретных приложениях.
- Разделение представления в зависимости от размеров устройств. При этом элементы можно делать зависимыми от разрешение экрана, что бы кнопочки не получались очень мелкими при очень высоком разрешение и маленьком размере экрана
- USB host
- Open Accessory API
- API совместимо для телефонов и планшетов
Offline HTML 5
Очень интересная и мощная технология, которую уже надо активно использовать в своих приложениях.
Кому, когда и зачем может понадобится offline доступ?
- в самолете, в путешествии, в пустыне, под водой )
- если плохое соединение: едете в туннеле, в метро
- лучшая производительность
- для создание клиентских приложений
Что и как кешировать описывается в манифесте:
CACHE:
указанные url будут кешироваться всегда
FALLBACK:
если не доступна онлайн-версия, то брать из кеша
NETWORK:
всегда брать из онлайна, если здесь стоит *, то все, что не вошло в предыдущие правила всегда берется из онлайна
Подробно: appcachefacts.info
- Для разработки и тестирования пользовательского кеша будет удобно:
- отключить http кеширование
- в манифесте указывать номер версии, что бы при изменении одной циферки все данные взялись новые. Причем обновление данных произойдет только при повторной загрузке. То есть при первой загрузки обновится манифест, а при второй обновятся данные
- вести лог, в хроме некоторые события логируются
В webStore можно хранить не структурированные данные, для чего сейчас используются cookie. Как раз для повышения производительности рекомендуется отказаться от cookie в пользу webStore. Структурированные данные используя IndexedDB и бинарные файлы.
Для хранения данных в пределах текущей сессии, пока пользователь не закрыл браузер используется sessionStorage. Для хранения данных между сессиями – localStorage, имеет методы: setItem(), getItem(),removeItem(), clear(). Для преобразования в строку и хранения json данных удобно использовать функцию JSON.stringify()
Для хранения структурированных данных используется IndexedDB, которая поддерживает транзакции. Но пока эта БД поддерживается только в Chrome и Firefox
Хранение бинарных файлов происходит в файловой системе: windows.requestFileSystem()
Надо помнить, что при использовании хранилища на стороне клиента возникает необходимость синхронизировать данные не только с сервером, но и между открытыми окнами (SharedWorker).
В хроме для просмотра текущего состояние хранилища можно использовать адреса:
chrome://appcache-internals
chrome://blob-internals
chrome://quota-internals
Узнать о поддержке этих технологий различными браузерами можно на сайте caniuse.com и mobilehtml5.org
Поэкспериментировать с манифестами можно здесь: appmator.appspot.com
Пример приложения использующего эти технологии: springpadit.com
Библиотеки для работы с локальными хранилищами:
- storage polyfill
- sessionstorage
- lawnchair
HTML5 впереди планеты всей
Очень интересный доклад и презентация, рекомендую ее посмотреть всем, открывать в Chrome. Переписывать презентацию смысла нет, но если кратко, то в ней идет речь о новых возможностях:
Для анимации теперь есть requestAnimationFrame, вместо setTimeout. Основные отличия:
- анимация воспроизводится только, если она в данный момент видна, таким образом не расходуются лишние ресурсы,
- скорость воспроизведения 60 кадров в секунду, как и частота большинства мониторов, опять же нет лишней работы по генерации кадров, которые все равно не успеют отобразиться.
Page Visibility API: теперь мы знаем когда страница просматривается, а когда пользователь переключился на другую вкладку. Это позволяет, например, приостановить видео пока страница не активна. Пример: www.samdutton.com/pageVisibility
Prerendering: можно сказать браузеру какую страницу не только загрузить заранее, но и отрендерить. Таким образом при переходе на prerendering страницу она отобразится моментально! Демонстрация: prerender-test.appspot.com
Navigator.onLine: теперь можно знать есть ли в данный момент соединения с интернетом. использую специальное свойство navigator.onLine и воспользоваться событиями online и offline, на которые можно повесить свои обработчики. Пример есть в презентации.
Web Intents: для уменьшения путаницы в существующих сервисах. Работает следующим образом: сервис регистрируется как обработчик определенных типов событий, приложение сообщает о намерении выполнить действие, пользователь выбирает из зарегистрированных сервисов какой он хочет для этого использовать. Пример: examples.webintents.org/intents/pick/index.html
Camera & microphone access: теперь есть доступ к видео камере и микрофону компьютера.
Fullscreen content: любой элемент можно отобразить в полноэкранном режиме: bleedinghtml5.appspot.com/demos/fullscreen.html
WebRTC: использование видео и аудио в реальном времени в браузере без помощи сторонних плагинов и флеша. Все функции по подавлению эхо, шумоподавлению, регулировки усиления браузер берет на себя. Это открывает очень много возможностей: видео конференции, аудио звонки непосредственно на сайте, построение социальных сетей нового уровня, создание онлайн презентаций, онлайн обучение и многое другое без использования дополнительных плагинов. Подробней: www.webrtc.org
Web Audio API: теперь это не просто тег для проигрывания музыки, но и анализ аудио в реально времени, низкоуровневые манипуляция, различные аудио-эффекты.
Но плохая! Многое из этого еще в экспериментальном режиме, возможно доступно только в Chrome. О статусе этих разработок: chromestatus.com.
Хорошая новость! Для работы html5 в отсталых браузерах можно использовать chrome frame.
Делаем свой сайт быстрей
Прибыль от сайта пропорциональна его скорости. Чем медленнее сайт, тем меньше людей на нем задержаться. Скорость = Доход.
У google есть замечательный инструмент которые анализирует сайт, оценивать его скорость и дает рекомендации для его ускорения: pagespeed.googlelabs.com
Рекомендации включают в себя: добавление заголовком для кеширование статики на стороне клиента, создание css спрайтов, объединение и включение сжатия css и javascript, отложить анализ javascript и многое другое.
Для сложных проектов все эти действия, скорее всего, лучше и надежней выполнять вручную, тем более если используются nginx, apache и может быть дополнительные фронтенд сервера, которые могут дополнительно кешировать статику.
А для автоматизации процесса оптимизации сайта google выпустил модуль для apache mod_pagespeed, которые выполняет многие из упомянутых рекомендации. Так же он может ставить статическом картинкам время кеширования год, но в случае его изменения в более ранний срок добавлять хеш к названию картинок, чем самым вызовет их обновление. Таким образом одновременно ставится большое время кеширования, но и следится за обновлениями.
По-мимо модуля для апача сейчас тестируется online решение: code.google.com/speed/pss. Гугл предоставляет фронтенд сервер через который пользователи обращаются к вашему сайту, в итоге весь трафик ходит через гугл, а он производит оптимизации, кеширует статику и помогает более быстрой доставке контента, т.к. его сервера находятся по всему миру.
Так же для тестирования есть очень удобный сервис www.webpagetest.org, он позволяет тестировать скорость сайта с точки зрения пользователя из разных точек мира используя разные браузеры. Причем сервис тестирует не только первичную загрузку, но и повторные с учетом предварительно закешированных данных.
На этом пока все. Изучайте, ускоряете, творите. Спасибо всем кто дочитал до конца.
Буду рад любым комментариям и вопросам.