HTML5 и работа с API браузера


Содержание

History API в HTML5. Введение

Прикладной интерфейс работы с историей браузера (History API) в HTML5 предоставляет разработчикам возможность изменять URL-адрес веб-сайта без полного обновления страницы. Это возможность особенно пригодится для частичной загрузки некоторых элементов страницы с помощью JavaScript, тогда, когда содержимое страницы существенно отличается и требует нового URL-адреса.

Вот пример. Предположим, что пользователь переходит с главной страницы сайта на страницу со справочной информацией. Для загрузки содержимого этой страницы используется Ajax. Затем этот пользователь переходит на страницу категории «Продукты», контент которой мы снова загружаем с помощью Ajax и заменяем новым содержимым старое. После всего этого наш пользователь решает поделиться URL-адресом. С прикладным интерфейсом браузера History API мы можем изменить URL-адрес страницы прямо во время её использования, при этом сама страница не перезагружается в том смысле, в каком мы привыкли понимать, так чтобы URL-адрес, который пользователь видит являлся бы релевантным и правильным.

Введение

Протестировать функциональность этого прикладного интерфейса проще простого – для этого необходимо зайти в инструменты разработчика и в консоли напечатать слово history. Если этот интерфейс поддерживается в вашем браузере, то вы увидите множество методов, связанных с объектом History:

Нас с вами в данный момент интересуют методы pushState и replaceState. Используя консоль разработчика, мы можем немного поэкспериментировать с этими методами и посмотреть, что происходит с URL-адресом, когда мы их вызываем. На данный момент все, что нам нужно это использовать последний параметр, остальные параметры мы рассмотрим позднее:

history.replaceState(null, null, ‘hello’);

Метод replaceState изменяет URL-адрес в адресной строке браузера на «/hello», несмотря на то, что, фактически обработчика для такого адреса на стороне сервера нет, при этом страница не перезагружается, и мы остаемся на той же странице. Но вот в чем заключается проблема здесь. После нажатия на кнопку «Назад» мы не вернемся на предшествовавший изменению адрес , а вернемся на предыдущую страницу. А вся история в том, что метод History API replaceState не ничего не добавляет в историю браузера, он просто заменяет текущий URL-адрес в адресной строке браузера. Чтобы решить эту проблему, нам нужно использовать метод pushState:

history.pushState(null, null, ‘hello’);

Теперь, если мы нажмем на кнопку «Назад«, мы увидим, что она работает так, как нам бы хотелось, поскольку pushState изменяет историю браузера, добавляя в него URL-адрес, который мы передаем. Интересно, конечно, но что произойдет, если мы притворимся, что текущий URL-адрес вовсе не myrusakov.ru, а другой сайт?

history.pushState(null, null, ‘https://yandex.ru/’);

Данная строчка кода вызовет исключение «SecurityError: The operation is insecure». (Ошибка безопасности. Операция небезопасна’). Это происходит потому, что URL-адрес должен иметь тот же источник (same origin), что и текущий, иначе мы можем получить серьезные проблемы с безопасностью. Эта опасность связана с тем, что у взломщиков появится возможность обмануть людей, заставляя их думать, что они находятся на совершенного другом веб-сайте.

Возвращаясь к другим параметрам, которые могут быть переданы в метод pushState, мы можем суммировать их следующим образом:

history.pushState([data], [title], [url]);

  1. Первым параметром являются данные, которые нам понадобятся, если состояние веб-страницы изменится, например, каждый раз, когда кто-то нажимает кнопку «Назад» или «вперед» в браузере. Обратите внимание, что в некоторых браузерах объем передаваемых данных ограничен.
  2. Второй параметр, строка заголовка элемента истории.
  3. URL-адрес, который мы хотим отобразить в адресной строке.

На этом все! А в следующих статьях мы продолжим обсуждать History API.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    HTML5 History API: смена URL без перезагрузки страницы

    Введение

    History API представляет собой одно из интересных новшеств HTML 5. Благодаря ему появляется возможность навигации по истории одного таба браузера без перезагрузки страницы, при этом браузер корректно отрабатывает функции «назад» и «вперед».

    Это дает замечательные возможности при использовании History API совместно с Ajax. Теперь нет необходимости использовать традиционную конструкцию #!, можно просто заменить URL целиком. Благодаря этому мы получаем следующие преимущества:

      ­
    • в URL теперь отображается реальный адрес страницы, пользователи могут спокойно копировать ссылку на страницу из адресной строки браузера и распространять ее; ­
    • отказ от конструкции #! при использовании Ajax позволяет не беспокоиться о потерянных для индексации поисковыми системами ссылках; ­
    • ссылки просто становятся чище и красивее.

    В этой статье мы кратко рассмотрим HTML5 History API и создадим простой пример с использованием плагина History.js для популярного Javascript ­фреймворка jQuery. В качестве примера реализуем постраничную Ajax­навигацию на странице листинга продуктов Magento.

    Обзор HTML5 History API

    За работу с историей отвечает объект History. Мы можем получить этот объект для текущего таба через read­only ссылку window.history.

    Основные методы и свойства объекта History:

    Возвращает текущий объект истории. С помощью этого объекта можно получить данные, которые передаются методами pushState и replaceState путем доступа к свойствам этого объекта.

    Свойство lenght показывает количество записей в истории.

    Переход к определенной позиции в истории, в качестве аргумента передается смещение относительно текущий позиции. Этот метод существовал до появления HTML5.

    Переход к предыдущему элементу в истории, идентично вызову go(- ­1).

    Переход к следующему элементу в истории, идентичный вызову go(1).

    Методы window.history.back() и window.history.forward() также существовали до HTML5.

    window.history.pushState(data, title [, url])

    Добавляет новый элемент в историю. Метод принимает три параметра:

    1. Данные состояния истории. Эти данные можно получить затем в обработчике события popstate. Если дополнительные данные не требуются можно передавать null;
    2. Заголовок страницы, который отобразится в окне браузер, так же можно передавать null;
    3. URL, который должен отображаться в адресной строке.

    Если текущий URL был http://yoursite.com/path/to/page.html, то он будет заменен на http://yoursite.com/path/to/myurl.html, как если бы мы перешли по ссылке обычным способом.

    URL, передаваемый третьим параметром, может быть как относительным так и абсолютными, но использование Ajax накладывает ограничение на использование только текущего домена.

    window.history.replaceState(data, title [, url])

    Этот метод очень похож на pushState и имеет те же параметры. Отличие заключается в том, что данный метод не добавляет новую запись, а изменяет текущую запись в истории.

    Это событие срабатывает при переход от одного элемента истории к другому. При этом history.pushState() и history.replaceState() не приводят к вызову этого события. Только нажатие кнопок вперед/назад в браузере, либо вызов history.back() или аналогичной функции в Javascript.

    History Api и jQuery

    Существует интересный плагин History.js, который предоставляет единый интерфейс для всех популярных браузеров для работы с историей просмотра. Он базируется на HTML5 History API и содержит практически те же самые методы, что и объект window.history. Используя данный плагин, можно не беспокоиться о работе скрипта в старых браузерах. Если браузер не имеет поддержки History API, то для его эмуляции будет использован # (якорь URL).

    Для обращения к функциям плагина используется объект History. Например, вызов функции History.pushState(data,title,url) практически аналогичен вызову history.pushState. Детально ознакомиться с Api плагина можно на его сайте. Однако, есть 2 момента, на которые стоит обратить внимание:

    1. Плагин использует собственное событие «statechange» вместо стандартного «popstate» для определения момента перехода по истории;
    2. Методы History.pushState и History.replaceState приводят к вызову события «statechange», тогда как аналогичные методы объекта window.history нет.

    Для демонстрации работы плагина добавим Ajax с динамической сменой URL к стандартной постраничной навигации продуктов Magento.

    Скачать плагин можно по этой ссылке https://github.com/browserstate/history.js/ . Нам потребуется только один файл jquery.history.js из папки scripts/bundled/html4+html5 (минимизированная версия с поддержкой HTML4). Подключаем файл плагина и библиотеку jQuery, если она еще не подключена. В версии Magento 1.9.0.1, которую я использовал для этого примера, jQuery подключен по умолчанию, поэтому мне достаточно подключить только файл плагина.

    Копируем jquery.history.js в папку /skin/frontend/ / /js/lib/. В моем случае это папка skin/frontend/rwd/default/js/lib/. В файле разметки page.xml текущей темы в в самый конец блока «head» добавляем:

    Кроме этого, нам потребуется отдельный файл для инициализации плагина и написания собственного кода обработчиков событий. Создадим файл main.js и так же поместим его в папку текущего скина по адресу skin/frontend/ / /js/.

    Подключаем файл main.js:

    В файл main.js добавляем следующий код:

    Мы использовали именно такой синтаксис для избежания конфликтов с библиотекой Prototype, которую Magento использует по умолчанию.

    Мы добавили обработчик события «click» на ссылки постраничной навигации и отменили стандартное поведение ссылок с помощью метода e.preventDefault. Затем мы используем History.pushState для добавления нового элемента в историю и в фоновом режиме загружаем новую страницу с помощью функции loadPage.

    Этот код загружает страницу по указанному URL с помощью Ajax и помещает в элемент $categoryProducts содержимое блока с классом ‘.category-products’.

    Рассмотрим подробнее вызов метода History.pushState.

    Первым параметром передаем null, так как нам не требуется передавать дополнительные параметры в объект State. Вторым параметром передаем текущий заголовок документа, поскольку при переходе на следующую страницу нам не нужно менять заголовок. И третьим параметром передаем новый URL — ссылка, на которую нажал пользователь.

    Для проверки работы этого примера нужно зайти в любую категорию с товарами, где количество товаров достаточно для появления постраничной навигации, и перейти на любую другую страницу. После этого URL в адресной строке заменяется на новый, как если бы мы перешли по этому URL, и после небольшой паузы подгружаются товары с новой страницы.

    Цукерберг рекомендует:  Программирование - visual code

    Наш пример справляется со своей задачей, однако при нажатии кнопки «назад» в браузере ничего не происходит. Для обработки события перехода истории нам требуется назначить обработчик на событие «statechange».

    Поскольку событие «statechange» срабатывает всякий раз, когда происходит переход по истории, нам больше не требуется вызывать функцию loadPage после History.pushState.


    После внесения необходимых правок, наш код выглядит следующим образом:

    Теперь при нажатии в браузере кнопок вперед/назад срабатывает событие «statechange» и содержимое страницы корректно обновляется. Для наглядного отображения процесса загрузки немного изменим функцию loadPage, добавив изменение прозрачности блока с продуктами на время загрузки контента.

    На этом наш простой пример завершен. Как видите, использование History API не представляет особых сложностей. Вы легко можете использовать красивые URL в Ваших Ajax-приложениях, не боясь проблем с поисковиками, а использованный в примере плагин позволит избежать проблем в старых браузерах.

    Захват изображения с камеры в браузере с помощью getUserMedia (с зеркальным отображением)

    Друзья! Близятся те времена, когда почти все, для чего нужен был флеш в браузере, можно будет делать и без него. Не знаю как у вас, а у меня это вызывает кучу положительных эмоций. Одним из шагов на пути вытеснения flash становится реализация в браузерах getUserMedia (Stream) javascript API. На данный момент Stream API для видеопотока реализовано в последних десктопных версиях Chrome и Opera. Firefox на подходе. Аудиопоток “coming soon”. Даже не знаю, ждать ли чего-то от IE .. по идее, он скорее умрет (..а он умрет), чем начнет догонять всех остальных.

    Подробнее о поддержке в браузерах можно посмотреть тут – /caniuse.com/stream

    Давайте взглянем на пример, а потом посмотрим, как это работает:

    Давайте разберемся, как это работает.

    Для начала нам понадобятся такие элементы, как:

    1. video , в котором мы будем воспроизводить поточное видео с камеры пользователя
    2. canvas , в который мы будем помещать кадры для сохранения
    3. кнопка для захвата изображения
    4. подсказка для юзера, который не понял, что вообще от него хотят.

    Далее нам нужно спросить у пользователя разрешения использовать его видеопоток.

    Как видно, в случае удачи в callback вернется объект stream, на основе которого можно получить url видеопотока. Сделать это можно с помощью window.URL.createObjectURL(stream) , которая может быть вам знакома, если вы когда-либо использовали js file API.

    • передаем этот url объекту video
    • при нажатии на кнопку захватываем текущий кадр video в canvas
    • забираем data:url получившегося изображения из canvas
    • и все, готово! Можно делать с ним все, что угодно: отправить на сервер, отфильтровать, передать другу через сокет и тп. Подробнее про base64 и data:url формат можно почитать тут.

    Давайте рассмотрим код примера в начале статьи для наглядности

    Конечно, лучше и красивее создать все элементы (canvas, video, ..) динамически, но для наглядности и понимания давайте изначально расположим их статически на странице:

    Зеркальное отображение при съемке

    В примере выше мы делали захват изображений с зеркальным отображением по горизонтали. Зачем, спросите вы. Иногда можно встретить такие задачи. Это особенно актуально, когда вам нужно точно спозиционировать свое изображение по отношению к фрейму или окружающим предметам. Например, поместить свое лицо в заданную область для сканирования, совместить с предустановленной маской и т.п. В этом случае для пользователя будет удобнее, если изображение, получаемое с камеры, отображается на мониторе зеркально (по горизонтали).

    Как мы этого достигли:

    Во-первых, мы сделали css transform для video

    Во-вторых, повернули изображение на canvas таким же образом

    Если вам не нужно зеркальное отображение, просто удалите эту часть js и css

    Удачи! Жду вопросов и поправок в комментариях.

    28 comments on “ Захват изображения с камеры в браузере с помощью getUserMedia (с зеркальным отображением) ”

    как раз вчера клиент просил такую фичу и я думал, что придется оборачивать приложение в phonegap для снабжения его большей свободой :( – А тут очень кстати твой пост! Супер!

    Будьте осторожны с поддержкой браузеров, эта штука пока очень сырая :(
    http://caniuse.com/stream

    Добрый день, подскажите как отправить base64dataUrl на сервер?

    Мы сейчас на проекте обсуждаем альтернативы нативному iOS приложению, которое нам
    пока не удалось сделать достаточно стабильным. Т.к. есть разработчики которые
    делают веб-приложение, то рассматриваем альтернативы типа phonegap или appcelerator.

    Но ни у кого нет опыта работы с ними. Есть понимание, что простые вещи там можно
    сделать, а вот запись видео/фото/аудио, отправка на сервер да так, чтобы это
    работало стабильно… мы не знаем.

    Может есть опыт и знание этих платформ и можете подсказать, возможно ли там такое
    реализовать?

    Так получилось, что последнее время мы делаем мини приложения для http://urturn.com у которого есть phonegap based ios app. Мы используем нативную objective C часть для захвата с камеры, а в webview (web часть) только для интерфейсов и всей пост обработки (canvas, svg, разные стикеры, эффекты и тп). Сразу хочу сказать, работать в ios uiwebview с phonegap – это кошмар. Очень много ограничений, нужно следить за памятью, дебажить очень сложно + сотни непонятных багов сходных по уровню магии с ie6. Если Вы хотите сделать приложеие с хорошим быстрым юзер-интерфейсом, обработкой видео или аудио или даже просто фото и все это для IOS.. лучше сделать его нативым (( Я думаю что apple еще долго будет искуственно тормозить развитие web-based приложений, и это связано в основном с политикой компании. Что касается android, firefoxOS, blackberryOS, TizenOS.. то через несколько лет, все перейдут (если уже не перешли) к web-based приложениям. Но это уже совсем другая история :)

    ковыряюсь с программаой.
    на ноуте все работает, на смартфоне – нет.
    как разрешить на смартфоне использование камеры? у меня самсунг GT-S6810 с андроидом 4.1.2
    как браузеры стоят хром и мозила 5.0
    эта страничка открвается, но нету диалога(или скорее я не могу его найти) о том, что есть запрос на использование камеры.
    подскажите, где почитать
    спасибо заранее

    К сожалению, ничего пока не получится. На данный момент (08.2013) ни один мобильный браузер толком не поддерживает getUserMedia API.
    Подробнее тут http://caniuse.com/#search=getusermedia

    chrome для андроид теперь поддерживает getUserMedia (03.2014)

    Немного не по теме, но близко. Нужен захват “видео” из окна браузера. Пользователь работает с корпоративным сайтом и для саппорта очень бы помогло увидеть то, что видит пользователь. Может быть подскажите в какую сторону копать и возможно ли вообще такое?

    посмотрите скриншаринг с использованием webRTC (но это пока очень на ранней стадии, только в хроме с включеным флагом)http://stackoverflow.com/questions/17542384/accomplish-screen-sharing-using-webrtc

    Другое решение – написать расширение для браузера. Там точно можно делать скриншоты и отправлять их куда вам надо ;)

    Пробую скопировать код, всё отрабатывает, но при отправке на сервер и base64_decode получаю чёрную картинку… Что может быть не так?

    перед отправкой на сервер, попробуйте вставить base64 url в img.

    и посмотрите, как это выглядит, дейсвительно ли вы отправляете не черную картинку. Если все ок, ищите проблемы по пути передачи или декодирования. Конкретнее, к сожалению, ничего не посоветую.

    var base64dataUrl = canvas.toDataURL(‘image/png’);

    если подставлять параметры то получается ошибка https://pp.vk.me/c623927/v623927444/1eae4/Dvb4PN_cGlc.jpg просто исправте на

    var base64dataUrl = canvas.toDataURL();

    Замечательно! Как раз искал варианты для вызова камеры со смартфона из HTML+JS

    Подскажите, пожалуйста! При сохранении переданного изображения BASE64 на сервере сохраняется неверный формат, который не отображается. Клиент:

    Спасибо за статью. Тестировал Вашу программу на firefox и хроме под android – всё работает. Скажите подалуйста, как получить управление фокусировкой и другими настройками камеры?

    сапасибо за статью. с видео все получилось и в мобильных браузерах работает.
    а как можно сделать что бы аудио записывалось. ну там, например 5с после нажатия кнопки. как мне потом этот stream в файл аудио запихнуть. может подскажите?
    ну или с видео: что бы не просто скриншот брался, а тоже скажем 5с видео сохранялось в файл.

    Отличная штука. Осталось решить, как лучше “убить” видеозахват, когда он более не нужен на странице.

    А это очень просто:
    Повесить обработчик на кнопку или куда-то ещё, и прописать:

    Подскажите, как получить доступ к основной камере мобильного телефона? по умолчанию включается фронтальная камера

    И второй вопрос, можно ли разрешить использование камеры по умолчанию, а не спрашивать каждый раз пользователя об этом?

    C начала 2020 г. ваша демка перестала работать в Chrome, в Mozille работает, в чем может быть проблема?

    As of Chrome 47, the getUserMedia API cannot be called from insecure origins.
    Открывайте ссылку по https в Chrome.

    Спасибо за подробное описание. Надеюсь этой темой Вы занимаетесь и за прошедшие годы стали ассом. Чтобы смотреть себя в браузере много где теперь написано. Но никак не найду как можно между двумя и более людьми видеопоказ устроить. Типа один показывает, а несколько смотрят. На флэше с RED5 сделал, но скоро обещают что его не будет. Хочется на новом HTML5, а никак. Может поможете или направите в полезное место? Нашел только тех кто через свой сервер делает. А хочется независимо сделать на своем.

    Работа с HTML5 Geolocation API

    Давайте поговорим о HTML5 Geolocation API, которое используется для получения географического положения пользователя. С помощью API геолокации, пользователь может поделиться с доверительным веб-приложением своим местоположением.

    Ключевой момент в конфиденциальности передаваемой информации. Браузеры не могут получать информацию о местоположении пользователя без согласия самого пользователя. Иными словами, пользователь должен дать согласие на передачу своего местоположения или отказаться от передачи данных. Диалог с пользователем обычно ведется через информационную панель в верхней части окна браузера.

    Сразу стоит отметить, что Геолокацию поддерживаю все современные браузеры и даже IE. Общая картина выгладит так: IE9+, FireFox 3.5+, Safari 5.0+, Chrome 5.0+, Opera 10.6+, iPhone 3.0+, Android 2.0+.

    Проверка поддержки Geolocation API браузером

    Работать с геолокацией нужно через объект navigator.geolocation, который содержит всего 3 метода.

    navigator.geolocation.getCurrentPosition() — Определяет текущее местоположение пользователя.
    navigator.geolocation.watchPosition() – Всякий раз определяет текущее местоположение пользователя, как только оно изменяется. Устройство пользователя само определяет оптимальный интервал опроса.
    navigator.geolocation.clearWatch() – Останавливает слежение за пользователем инициированное методом watchPosition.

    Методы getCurrentPosition и watchPosition похожи, за исключением того, что метод watchPosition пытается следить за сменой положения пользователя и его работа напоминает функцию setInterval, только без указания времени интервала опроса, за это отвечает само устройство пользователя. Метод watchPosition возвращает идентификатор, который нужен методу clearWatch для остановки слежения.

    Далее все примеры будут основаны на методе getCurrentPosition.

    success – callback функция, которая будет вызвана при успешном определении геопозиции пользователя.
    error — callback функция, которая будет вызвана при ошибке или отмене определения геопозиции пользователем.
    options – необязательный параметр, который должен быть объектом с дополнительными опциями.

    Объект options может содержать некоторые свойства:

    enableHighAccuracy – точность определения позиции (true/false) большая точность, меньшая точность. Для задействования средств определения геопозиции с большой точностью, устройство пользователя должно быть оборудовано этими средствами. Например, в мобильных устройствах, этим средством может выступать GPS. В противном случае, никакого эффекта от переключения этого параметра не произойдет.
    timeout — количество миллисекунд, которое веб-приложение будет ожидать для получения положения пользователя. Таймер не начнет отсчет, пока пользователь не даст разрешение на вычисление его положение.
    maximumAge — количество миллисекунд, пока данные хранятся в кэше. То есть не требуется постоянно заново определять геопозицию пользователя, а можно быстро взять старые данные.

    Цукерберг рекомендует:  Macbook - Совет при заказе макбука

    Функция обратного вызова success принимает объект Position, который содержит данные о геопозиции пользователя.

    Position.coords.latitude — широта в виде числа;
    Position. coords.longitude — долгота в виде числа;
    Position.coords.accuracy — точность позиции;
    Position.coords.altitude — высота в метрах над средним уровнем моря;
    Position.coords.altitudeAccuracy — точность положения высоты;
    Position.coords.heading — градусы по часовой стрелке от севера;
    Position.coords.speed — скорость в метрах в секунду;
    Position.timestamp — время отклика.

    Функция обратного вызова error принимает объект PositionError, который содержит код ошибки и текстовое сообщение.

    PositionError.code – код ошибки, который является цифровым значением:

    1 соответствует константе PERMISSION_DENIED – пользователь отказался сообщать своё метоположение;
    2 соответствует константе POSITION_UNAVAILABLE – сеть не работает, нет связи со спутниками;
    3 соответствует константе TIMEOUT – работа завершилась по таймауту, определение геопозиции занимает слишком много времени.

    PositionError.message – сообщение, которое не предназначено для пользователя, а больше подходит для логов.


    И так. А немного кода.

    Вот и все. Благодаря этому простому функционалу данные о геопозиции пользователя можно использовать для многих целей. Например больше не нужно хранить огромную базу интервалов IP адресов по странам и городам, да и которую ещё нужно постоянно обновлять.

    Десктопное HTML-приложение без браузера?

    Неоднократно встречал (виндовые) приложения, которые на самом деле представляют из набор HTML-станиц со стилями и JavaScript’ом. Из последнего — установщик Яндекс.Диска (можно посмотреть код по правой кнопке) и установщик ПО PrintBook’а (выдал предупреждение о замедляющих работу скриптах). При этом работают они в обычных небраузерных окнах без адресной строки, меню и тому подобного.

    Подскажите, пожалуйста, как этого можно добиться, в какую сторону копать? Уверен, что это очень просто.

    В идеале нужно получить HTML-приложение:

    — кросплатформенное либо легко портируемое;

    — похожее на десктопное, работающее в собственном небраузерном окне;

    — работающее на поставляемом вместе с ним браузерном движке, чтобы спокойно использовать CSS3 и HTML5 API);

    — не слишком легко копируемое и распространяемое.

    Поясню, для чего это нужно. Имеется HTML-версия ветеринарного обучающего курса, работающая с компа/диска/флэшки на LitePXP (открывается в ChromePortable, использует PHP). Это неудобно и несолидно. Хотелось бы сделать так, чтобы приложение выглядело как обычный обучающий диск и его легко можно было бы портировать на Mac и *nix, а также трансформировать в HTML5-приложение для мобильных устройств. В новой версии остается только HTML5, JavaScript и CSS3. Основа кроссплатформенная, наверняка существуют способы запуска ее в разных средах. Видел что-то подобное в Qt, но, может быть, есть какие-то готовые обертки или утилиты? Как спроектировать приложение, чтобы оно было максимально совместимо с мобильными устройствами и с десктопом? Что можно почитать по теме?

    Разбираемся с HTML5 History API

    В этом посте я рассмотрю очень интересную на мой взгляд вещь — HTML5 History API. Данная технология позволяет разработчикам производить манипуляции с адресом сайта без перезагрузки страницы. Такая возможность становиться очень полезной для загрузки каких-либо частей страницы с помощью JavaScript, таким образом, что бы содержание менялось и вместе с ним генерировался новый адрес страницы.

    Начинаем работу с HTML5 History API

    Для того что бы начать работу с API достаточно ввести в консоли разработчика Google Chrome (F12) – window.history . Если Ваш браузер поддерживает API, то Вы увидите древовидный список с внутренними уже добавленными методами объекта для управления историей браузера.

    Сейчас рассмотрим два очень интересных метода – pushState и replaceState . В консоли можно с ними всячески побаловаться и посмотреть, что каждая из них делает с адресом страницы. Но по их названию я думаю, что Вы уже догадались для чего эти методы нужны и что они делают. Далее в статье я расскажу про первые параметры этих методов, но сейчас давайте вставим в replaceState последний параметр «HelloWorld» и посмотрим что получиться:

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

    После этого щелкаем по кнопке назад в браузере и возвращаемся обратно на ту страницу с которой был вызван pushState . Таким образом pushState влияет на историю браузера и передает туда страницы. Теперь можно попробовать вместо HelloWorld вписать адрес другого сайта.

    Как только мы попытаемся выполнить эту строчку кода, консоль сразу же заругается и не даст нам выполнить код. Все дело в том, что адреса можно менять только в пределах текущего сайта. Такой запрет сделали специально, ведь в противном случае любой человек мог бы подменивать адрес сайта и обманывать пользователей делая замену настоящего сайта фейком.

    Теперь давайте опять вернемся и рассмотрим первые два параметра, которые передаются в pushState .

    1. Первый параметр хранит в себе данные всех нажатий на кнопки вперед и назад в браузере. Кстати в Firefox эти данные ограниченны 640 килобайтами;
    2. Второй параметр является заголовком и передается в виде строки;
    3. Третий параметр — новый адрес на который нужно перейти.

    Небольшое отступление для общего развития

    Самым важным в History API является его работа без перезагрузки страницы. Раньше, что бы изменить адрес страницы нужно было пользоваться window.location , но в результате страница все же обновлялась. Решением этой проблемы стало использование хэш навигации. Например в атрибуте href прописывалось #page и адрес страницы изменялся без перезагрузки страницы.

    В результате появился уже устаревший метод hashbang, который обновляет адрес страницы без перезагрузки страницы. Но этот метод подвергался критике т.к hashbang не содержал никаких данных на странице и более того например Яндекс индексировал такие хэш страницы. Кстати, изначально Twitter пользовался методом hashbang до 2012 года. Позже Twitter описал новый способ навигации, который как раз основывался на применении History API в слегка измененном виде. Здесь Вы как раз можете подробнее почитать об этом.

    Также для работы с History API существует очень хороший плагин – pjax. Именно этот плагин я использовал в большинстве своих последних проектов и он показался мне очень простым и многофункциональным.

    На этом все. Надеюсь мой пост был Вам полезен. На все ваши вопросы с удовольствием отвечу в комментариях.

    Рисуем фальшивый браузер: использование HTML5 Fullscreen API для фишинга

    Содержание статьи

    В ЧЕМ ИДЕЯ

    Фишинговая атака позволяет завладеть конфиденциальными данными жертвы, заманив ее на сайт, контролируемый атакующим. Обычно делается копия сайта банка, социальной сети, известной компании и регистрируется URL, похожий на настоящий. Например, micr0soft.com.

    Слабое место фишинга именно неправильный URL. Пользователь всегда может посмотреть на адресную строку браузера и убедиться, что там указан неверный адрес и отсутствует защищенное соединение с зеленым значком HTTPS. Идея фишинга через HTML5 Fullscreen API заключается в том, что злоумышленник переключает браузер пользователя в полноэкранный режим и заменяет реальный интерфейс браузера предзагруженной картинкой с изображением интерфейса браузера. При этом в «адресной строке» можно указать любое называние сайта и нарисовать значок защищенного соединения — это ведь не настоящая адресная строка, а просто картинка с текстовым полем.

    Идея не нова. Аналогичные фишинговые атаки осуществлялись десять лет назад в браузере Internet Explorer, но не через полноэкранный режим, а через полноэкранные всплывающие окна путем вызова функции window.createPopup() в DHTML, но суть та же. Уязвимость была исправлена в 2004 году с выходом Windows XP Service Pack 2 (www.kb.cert.org/vuls/id/490708).

    ТЕОРЕТИЧЕСКАЯ БАЗА

    Спецификации HTML5 Fullscreen API позволяют инициировать переход браузера в полноэкранный режим. Это делается простым кодом на веб-странице:

    Главное ограничение, которое накладывают API на веб-разработчика, — полноэкранный режим вызывается только в результате действия пользователя: нажатия клавиши на клавиатуре или кнопки мыши. Так что сайт не может просто загрузиться в полноэкранном режиме с самого начала. Поэтому вызов полноэкранного режима по щелчку мыши выглядит примерно так:

    На практике требуется обращение к функциям mozRequestFullScreen() и webkitRequestFullScreen(). Поскольку спецификации HTML5 Fullscreen API еще не утверждены, эти функции в браузерах на движках Mozilla и WebKit снабжены соответствующими префиксами.

    КАК ПРОИСХОДИТ АТАКА

    Атака начинается с того, что пользователю на веб-странице показывают ссылку такого вида:

    URL выглядит нормально. Если навести курсор на эту ссылку, то в статусной строке браузера отразится адрес настоящего сайта www.bankofamerica.com. Но при нажатии происходит вызов события event.preventDefault(), которое предотвращает стандартное поведение браузера, а вместо этого использует нажатие пользователя по ссылке как триггер для вызова полноэкранного режима (см. выше) и загружает в браузер пользователя другой сайт.

    Фишинговая страница распознает браузер и ОС жертвы и подсовывает ему соответствующее изображение. В верхней части страницы отрисовывается интерфейс браузера c указанием URL настоящего сайта и со значком защищенного соединения. Средства HTML5 позволяют даже использовать эту картинку как настоящую адресную строку, реагировать на наведение курсора мыши, вводить адрес, нажимать кнопки и так далее.

    Студент из Стэнфордского университета, независимый исследователь в области информационной безопасности и веб-дизайнер Феросс Абухадижи (Feross Aboukhadijeh) создал демонстрацию с поддельным сайтом Bank of America: feross.org/html5-fullscreen-api-attack. Автор отрисовал интерфейсы браузеров Chrome, Firefox и Safari. Код демки:github.com/feross/fullscreen-api-attack.

    Фишинговый сайт Bank of America в полноэкранном режиме

    Хакер #167. Подарки для гика

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

    5 библиотек с API для работы с HTML5 Audio

    Сегодня мы хотели бы сделать небольшой обзор различных библиотек, которые используют HTML5 Audio API, а также более известный HTML5 Audio Element с более простым API.

    Мы хотели бы показать вам некоторые из этих библиотек, для того чтобы вы могли ими воспользоваться в случае, если решите создать игру или приложение, которое включает в себя работу со звуком.

    Некоторые демо, которые включают в себя какую-то из этих библиотек, довольно неплохие, и код для каждой из них прост и легок в работе.

    1. Webaudiox.js

    Webaudiox.js – это не совсем библиотека, а набор помощников в работе с Web Audio API. Он абсолютно независим и будет работать на любом браузере, который поддерживает Web Audio API.

    Документация состоит из простого примера кода в форме газетного материала:

    Как уже было сказано, для того, чтобы файл с помощниками webaudiox.js работал, он должен быть включенным. Для того, чтобы понять, как это работает, посмотрите analyser2canvas Helper. Этот помощник использует преимущества AnalyserNode Interface для того, чтобы делать визуализацию воспроизводимого звука в режиме реального времени.

    Цукерберг рекомендует:  GeekWeek - Дэвид Аллен расскажет о продуктивности и GTD

    У webaudiox.js GitHub repo есть много различных примеров, которые можно попробовать в действии. Но, конечно, ваш браузер должен поддерживать Web Audio API. Этот набор помощников не является полизаполнением, поэтому браузер с более поздней поддержкой не будет лучшей идеей, если только вы не хотите объединить его с другим скриптом, библиотекой или ресурсом.

    По нашему мнению, webaudiox.js – отличный выбор для работы с HTML5 играми.

    2. Howler.js

    Howler.js рекламируется просто как «библиотека аудио JavaScript для современной сети», которая возвращается к Web Audio API и отходит от аудио HTML5.

    У этой библиотеки достаточно обширные возможности, вот некоторые из них:

    • поддержка различных форматов файлов для более широкой поддержки браузера.
    • кеширование свойств Web Audio API и HTML5 audio
    • одновременное мультитрековое воспроизведение
    • общий и потрековый mute/unmute, а также регулировка громкости
    • формирование цепочки метода
    • 3KB gzip без зависимостей

    Описание на официальном сайте включает в себя некоторое количество demo, показывающие возможности программы, поэтому советуем ват туда заглянуть.

    Обратите внимание на пример так называемого «спрайтового звука», где вы найдете местонахождение разных звуков в одном звуковом файле.

    API имеет красивый, чистый вид и создает такое впечатление, что работать с ним не составит особого труда. Поскольку используется новый Web Audio API, поддержка браузера соответствующая.

    Авторы библиотек описывают это как «отлично подходящая для игр», но она также хороша для любого другого веб-приложения.

    3. Pedalboard.js

    Как и предыдущие библиотеки, Pedalboard.js использует Web Audio API, но на этот раз он используется для создания звуковых эффектов на аудио источниках, базируется на звуковых эффектах гитары.

    Проще говоря, вы можете создать свою рабочую панель и управлять гитарными звуками. Ярким примером является Pedals.io «эффект гитары в облаке»:

    Синтаксис для API ориентирован на объект, поэтому он достаточно чист и прост в использовании. Вот пример:

    Этот код построен на объекте «stage», содержащим «board», который, в свою очередь, содержит «pedals», с помощью чего создаются желаемые эффекты.

    Следует признать, что эта библиотека не обязательно будет самой полезной для создания игр и других приложений, но при креативном подходе можно придумать интересный материал. Эта библиотека работает в любом браузере, поддерживающем Web Audio API.

    Если вам понравится эта библиотека, вы можете посмотреть, как работает Band.js, «композитор» API, поддерживающий ритмы, большое количество инструментов, секции воспроизведений и сложные музыкальные размеры.

    4. Wad

    Wad предназначен для Web Audio DAW (Digital Audio Workstation) и описывается как «jQuery для ваших ушей». Эта библиотека упрощает работу с аудио, используя Web Audio API.


    Вот пример кода, где написан трек пианино, с использованием «квадратной» волны:

    Повторимся, что это достаточно чистый API с большим количеством возможностей. Вы можете протестировать вышенаписанный код с некоторыми другими примерами (барабан, флейта) на демо странице.

    Есть такие особенности как установка стереопозиции, 3D установка, фильтры, реверберация, вход микрофона и способность включать эффекты из внешних библиотек.

    Но есть один недостаток в этой библиотеке: она не работает в Firefox, и в описании авторы это упоминают.

    5. Fifer

    Fifer – это «микро лаборатория» для HTML5 Audio API, которая работает с лайт версией Flash на более старых браузерах.

    Код включает в себя простые и образующие цепь методы для работы с играми и другими приложениями.

    Некоторые особенности API:

    • Предварительная загрузка и регистрация файлов.
    • Файлы игр с дополнительной цепью и отзывом конца.
    • Выключение или уменьшение звука отдельных файлов или всех файлов одновременно.

    Эта библиотека довольно простая, она могла бы быть хорошим инструментом в работе над большими проектами. Большой плюс – она перейдет на Flash, если Web Audio API будет недоступен.

    И обратите внимание, что этот API основан на HTML5 audio, а не на Web Audio API, так что есть поддержка IE9 для HTML5, IE8 и ранней версии Flash.

    У repo есть простой пример, который вы можете просмотреть здесь. Ничего особенного, просто ударный звук в формате MP3 с отступлением к SWF.

    Ресурсы Web Audio API

    Все библиотеки, которые мы с вами разобрали, позволяют вам пользоваться возможностями Web Audio API без необходимости копаться слишком глубоко, чтобы достать хороший звук, обеспечивающий хороший, чистый API.

    Если вы хотите изучить API и создавать свои собственные произведения, советуем вам заглянуть в книгу Бориса Смус (Boris Smus) Web Audio API от O’Reilly, которая доступна он-лайн с версией для печати.

    Также, есть введение в Web Audio на HTML5 Rocks и документ на тему MDN.

    Поддержка браузера

    Если библиотека, которую вы выбрали, использует HTML5 Audio, то она поддерживается на всех браузерах, включая IE9+. Но если библиотека использует Web Audio API, то она будет работать не на всех браузерах.

    Нет поддержки некоторых мобильных браузеров, а Safari требует разрешение от продавца. Плохая новость – ни одна версия IE не поддерживает Web Audio API, даже IE11. Это нерешенный вопрос команды IE, который, мы надеемся, скоро будет решен.

    HTML5 Rocks

    Переводы

    Введение

    Наконец появилась возможность взаимодействия с локальными файлами с помощью HTML5. Для этого служит спецификация API файлов. В частности, API файлов можно использовать для создания уменьшенных изображений при передаче соответствующих картинок на сервер или для того, чтобы приложение могло сохранить ссылку на файл, если пользователя нет в сети. Кроме того, с помощью кода на стороне клиента можно проверить, отвечает ли тип MIME загружаемого файла его расширению, или установить ограничения по размеру.

    В спецификации указаны некоторые интерфейсы для доступа к файлам в локальной файловой системе.

    1. File – отдельный файл. Такая информация, как название, размер файла, тип MIME и ссылка на обработчик, доступна только для чтения.
    2. FileList – последовательность объектов File в виде массива, позволяющая, например, реализовать функцию или перетаскивание папки с файлами с рабочего стола.
    3. Blob – позволяет разделить файл на фрагменты заданной величины.

    В сочетании с описанными выше структурами данных интерфейс FileReader можно использовать для асинхронного чтения файла с помощью знакомых функций обработки событий в JavaScript. Это позволяет отслеживать процесс чтения, обнаруживать ошибки и определять, что загрузка завершена. API во многом напоминают модель событий XMLHttpRequest .

    Примечание. На момент составления этого руководства API, необходимые для работы с локальными файлами, поддерживались в браузерах Chrome 6.0 и Firefox 3.6. Начиная с версии Firefox 3.6.3 метод File.slice() не поддерживается.

    Выбор файлов

    Сначала проверьте, поддерживает ли ваш браузер API файлов.

    Разумеется, если для работы приложения требуются лишь некоторые из этих API, скорректируйте фрагмент кода соответствующим образом.

    Выбор файлов с помощью формы ввода данных

    Самый простой способ загрузки файлов – использование стандартного элемента . JavaScript возвращает список выбранных объектов File в виде объекта FileList . Вот пример использования атрибута multiple для выбора сразу нескольких файлов:

    Пример: выбор файлов с помощью формы ввода данных. Попробуйте сами!

    Выбор файлов с помощью перетаскивания

    Еще одним способом загрузки файлов является их перетаскивание с рабочего стола в браузер. Чтобы включить поддержку перетаскивания, достаточно внести небольшие изменения в код из предыдущего примера.

    Пример: выбор файлов с помощью перетаскивания. Попробуйте сами!

    Примечание. Некоторые браузеры обрабатывают элементы как целевые области для перетаскивания файлов. Попробуйте перетащить файлы в поле ввода в предыдущем примере.

    Чтение файлов

    А теперь самое интересное.

    Получив ссылку на объект File , создайте экземпляр объекта FileReader , который сохранит его содержание в память. Как только завершается загрузка, на стороне пользователя вызывается событие onload . Его атрибут result можно использовать для доступа к данным в файле.

    Существует четыре метода асинхронного чтения файлов с помощью объекта FileReader .

    • FileReader.readAsBinaryString(Blob|File) – свойство result содержит данные о файле или его фрагменте в виде строки бинарного кода. Каждый байт представлен целым числом от 0 до 255.
    • FileReader.readAsText(Blob|File, opt_encoding) – свойство result содержит данные о файле или его фрагменте в виде текстовой строки. По умолчанию используется кодировка UTF-8. Чтобы задать другой формат, используйте необязательный параметр кодировки opt_encoding.
    • FileReader.readAsDataURL(Blob|File) – свойство result содержит данные о файле или его фрагменте в виде схемы data:URL.
    • FileReader.readAsArrayBuffer(Blob|File) – свойство result содержит данные о файле или его фрагменте в виде объекта ArrayBuffer.

    Если для объекта FileReader вызывается один из этих методов, то ход его обработки можно отслеживать с помощью атрибутов onloadstart , onprogress , onload , onabort , onerror и onloadend .

    В примере ниже из выделенных пользователем файлов выбираются картинки, вызывается функция reader.readAsDataURL() и выводится уменьшенное изображение путем установки для атрибута src значения, представляющего URL данных.

    Пример: чтение файлов. Попробуйте сами!

    Перетащите сюда папку с картинками.

    Разделение файла на фрагменты

    В некоторых случаях считывание всего файла в память не является оптимальным вариантом. Предположим, вы решили создать инструмент для асинхронной загрузки файлов. Чтобы увеличить ее скорость, можно разделить файл на фрагменты одинаковой величины, которые будут считываться и отправляться по отдельности. На сервере фрагменты будут снова объединяться в нужном порядке.

    Интерфейс File поддерживает метод slice для разбиения файла на фрагменты. Первым аргументом этого метода является начальный байт файла, вторым – его последний байт, а третьим – необязательная строка с описанием типа содержания. Семантика этого метода недавно была изменена, и теперь необходимо использовать префикс браузера:

    Ниже представлен код для считывания фрагментов файла. Обратите внимание на то, что вместо события onload в нем используется событие onloadend , а также проверяется условие evt.target.readyState .

    Пример: разделение файла на фрагменты. Попробуйте сами!

    Контроль хода чтения

    Одним из преимуществ асинхронной обработки событий является возможность отслеживать ход чтения: это особенно удобно при работе с большими файлами, для контроля ошибок и для определения момента завершения чтения.

    Ход чтения можно отслеживать с помощью событий onloadstart и onprogress .

    Ниже приведен код, отображающий строку хода чтения. Чтобы оценить его в действии, загрузите файл, имеющий большой размер или находящийся на удаленном диске.

    Пример: отслеживание хода чтения. Попробуйте сами!

    Совет. Чтобы сделать контроль хода чтения еще более наглядным, загрузите файл, имеющий большой размер или находящийся на удаленном диске.

    HTML5

    Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

    API JavaScript HTML5

    Использование API JavaScript в HTML5

    API — Application Programming Interface (интерфейс программирования приложений).

    В первые за всю история языка HTML, в спецификацию была добавлена документация по API JavaScript, она объясняет, как язык программирования JavaScript, должен взаимодействовать с элементами веб-страницы.

    Какие API существуют в HTML5?

    API Canvas , описывает как создаются векторные объекты и как ими можно манипулировать через JavaScript.

    API UndoManager (менеджер отмены) , описывает как браузер должен отслеживать изменения в документе.

    API Манифеста кэширования , описывает как создавать оффлайновые приложения.

    API Drag and Drop , описывает как перетаскивать элементы страницы.

    API Audio , описывет как управлять аудиопроигрывателем, через JavaScript.

    Рабочая (но не окончательная) спецификация HTML5 на английском языке уже вышла, но на русский еще не переведена, так что более подробной информации по API JavaScript в HTML5, ждите ближе к осени или летом если найду нормальные книги на русском раскрывающие данную тематику.

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих