Метка «html5» - 20

Зачем я сделал ещё один велосипед?

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

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

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

Contre Jour — популярная российская игра, с прекрасной графикой, отличным дизайном и замечательной музыкой была портирована в веб на базе современных стандартов с поддержкой HTML5 и тач-функций. Игра завоевала несколько наград после выхода в свет на iPad.

Смотрите ролик с анонсом:

Игра была портирована в веб благодаря инициативе команды Internet Explorer и прекрасно работает на планшетах с Windows 8 и IE10.

Попробуйте игру на ContreJour.ie/

Contre Jour — популярная украинская игра, с прекрасной графикой, отличным дизайном и замечательной музыкой была портирована в веб на базе современных стандартов с поддержкой HTML5 и тач-функций. Игра завоевала несколько наград после выхода в свет на iPad.

Смотрите ролик с анонсом:

Игра была портирована в веб благодаря инициативе команды Internet Explorer и прекрасно работает на планшетах с Windows 8 и IE10.

Попробуйте игру на ContreJour.ie/

Новый сезон начался, почти все вернулись из отпуска и включились в работу. Самое время рассказать, какие обновления ждут TeamLab в версии для SaaS 7.0, которая уже доступна в режиме beta. Мы называем новую версию перезагрузкой не просто ради красного словца, а потому что реализовали значительные изменения в интерфейсе, сделав его более унифицированным для всех модулей, добавили новые инструменты, а также оптимизировали и дополнили целый ряд уже существующего функционала. Теперь по порядку.

TeamLab — перезагрузкаЧитать полностью »

Мы стремимся к тому, чтобы все части Яндекс.Почты одинаково хорошо работали у всех пользователей. Сегодня мы расскажем вам о том, как и зачем полностью переписали блок добавления аттачей. В этой статье — про отказ от флеша, поддержку возможностей современных браузеров и, как результат, увеличение скорости и надёжности загрузки файлов.

Проблема

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

С первыми всё было просто: пользователи с установленным флешом прикрепляли файлы к письму через флеш-загрузчик. Он позволял загрузить сразу несколько файлов, определял их размер и контролировал процесс загрузки.

А вот с пользователями без флеша (8-10% от дневной аудитории) было сложнее. Мы предлагали им загружать файлы через обычную форму с <input type="file"/>. Файлы из неё отправлялись через iframe вместе с содержимым самого письма, и это занимало много времени. Нажав кнопку «Отправить», пользователь долго ждал, пока загрузятся файлы.
Читать полностью »

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js