Рубрика «html5» - 66

в 2:43, , рубрики: html, html5, Веб-разработка, старые браузеры, метки: , ,

image
Авторы Modernizr решили собрать в одном большом, гигантском справочнике все прослойки, fallback-и и polyfill-ы, которые помогут обеспечить функциональность html5 в тех браузерах, где он не поддерживается

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

Как определить, поддерживает ли браузер ту или иную функцию? Modernizr! Как написать свой polyfill? Есть мануал (на английском) Пишем polyfill-ы на JS для кросс-браузерности

Справочник доступен в виде страницы на Github.
Читать полностью »

в 19:09, , рубрики: html, html5, html5 file api, javascript, svg, векторная графика, метки: , , ,

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

Раньше создавать такие карты было удобно в Adobe ImageReady, но начиная с версии CS3 эта программа больше не поставляется с Фотошопом. На сегодняшний день подобный функционал есть в Adobe Fireworks, но устанавливать эту программу только из-за редактора карт (для работы мне нужен только Фотошоп) — не очень хорошая идея. Существуют и онлайн-редакторы, которые написаны, в основном, с использованием canvas. В них отсутствует возможность редактировать созданные области на карте. Если ошиблись — придется все переделывать. Да и создавать эти области не слишком удобно. Еще одно неудобство заключается в том, что картинку приходится загружать на сервер. В общем, надо писать что-то свое.

Итак, задача:
— написать на javascript редактор, который позволит создавать карты изображений — загружаем картинку, рисуем области, получаем html-код. Если ошиблись — должна быть возможность отредактировать карту. Редактор должен работать в оффлайн-режиме. Обеспечить поддержку только современных браузеров, в том числе Internet Explorer 9.

Summer html image map creator
Читать полностью »

в 16:01, , рубрики: html, html5, Веб-разработка, Программирование, метки: , ,

Доброго времени суток!

Все мы достаточно наслышаны об HTML5 и его возможностях. Например, элементы audio и video, которые у всех на слуху. Но несмотря на это, существует парочка тегов, о которых знают далеко не все, и о которых не знал я до недавнего времени. Итак, вот чем я хочу с вами поделиться.
Читать полностью »

в 10:35, , рубрики: data mining, html, html5, javascript, визуализация, метки: , ,

Интерактивная HTML5 визуализация по мотивам «Lost»

Поклонник одного из лучших телепроектов последних десяти лет «Затерянные» («Lost») программист Сантьяго Ортиз (Santiago Ortiz) создал прекрасный пример интерактивной визуализации взаимоотношений между главными и второстепенными героями шоу при помощи HTML5.

Сериал создавался силами более 30 сценаристов, которые должны были прорабатывать характеры и взаимоотношения главных героев, создавая при этом реалистичную атмосферу с точки зрения перемещения героев во времени, следить за непротиворечивостью событий, и при этом давать намёки на всевозможные загадки (например, почему Кейт видела в джунглях тёмную лошадь); при этом wiki-проект по мотивам шоу содержит более 7000 статей.
Читать полностью »

в 18:58, , рубрики: html, html5, internet explorer, javascript, Веб-разработка, метки: , ,

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

А вот и методы решения проблемы:

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

Читать полностью »

в 14:46, , рубрики: animation, canvas, game development, html5, javascript, метки: , , ,

Эффектная анимация разрушения (Pixel Dust) В процессе развития нашей игры на HTML5, мы столкнулись с дилеммой: рисовать для каждого элемента эффект разрушения или попробовать сделать это программно на JavaScript (canvas). Если с первым способом всё понятно (проверенно работает, но много работы художнику), то со вторым у нас были сомнения относительно скорости рендера, ведь это 60FPS x 64 x 4 байта ~ 1 МБ/сек. на один элемент, а если их 40 на одном экране?

Читать полностью »

в 8:00, , рубрики: Google Chrome, html, html5, Блог компании Intel, сенсоры, метки: ,

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

в 10:53, , рубрики: DIY, diy или сделай сам, html5, svg, WebGL, Веб-разработка, планировщик помещений, метки: , , , ,

Сервис для создания планировок помещений и интерьеров

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

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

Читать полностью »

в 12:32, , рубрики: canvas, html, html5, javascript, web workers, метки: , , ,

Основная идея

Много кто в процессе изучения Web Workers сталкивался с проблемой работы с canvas-ом. В основном это происходит из-за того, что в web worker нельзя передать элементы DOM. Решением может быть использование getImageData(). Внимание! Статья не рассчитана для новичков. Для изучения данного материала рекомендую ознакомиться с основами canvas и webworker.

Я попытаюсь продемонстрировать вам работу с getImageData() на примере создания асинхронно работающего сложного фильтра размывания изображений — blur. Для этого нам понадобится 2 файла: index.html и filter_worker.js
Читать полностью »

в 0:41, , рубрики: canvas, css, html, html5, ipad, javascript, Веб-разработка, метки: , , , ,

Хочу поделиться с вами моим последним проектом.

Примерно год назад я скачал приложение Aelios Weather на iPad.
Оно задело мне глаз своей простотой и необычным интерфейсом.

И вот что получилось:
image

Смотреть тут

Как всегда, мне было интересно, насколько продвинут HTML5, и можно ли создать что-нибудь такое же.

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

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

Читать полностью »

1...1020...656667...70...76
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js