Метка «html5» - 22

BigVideo.js: фоновое видео на весь экран

Плагин BigVideo.js для jQuery добавляет на страницу видео в качестве фонового изображения через HTML5 Fullscreen API. Видео автоматически растягивается на любой размер экрана. Для работы нужно предварительно загрузить библиотеки jQuery, jQuery UI и jQuery imagesloaded. Запуск:

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});

В качестве хостинга своих видеороликов удобно использовать Vimeo Pro, он даёт прямую ссылку на mp4-файл и отгружает контент на скорости более 10 Мбит/с.
Читать полностью »

Наверное, вы уже слышали о таких вещах как CSS3 Pie, Selectivizr, HTML5 Boilerplate, CSS3 Media queries и т.п. Речь пойдет о том, как использовать все эти инструменты вместе: дело в том, что неоднократно были замечены конфликты между ними. Ну, а если вы не совсем понимаете, зачем вам HTML 5 и CSS 3, тогда не стану навязывать эти технологии; просто скажу, что они позволяют сократить время верстки (хотя, это не единственный плюс).
Читать полностью »

Сегодня издатель и разработчик компьютерных игр Atari выложил специально адаптированные для веб-браузеров игры Atari Arcade. Среди тайтлов есть Asteroids, Centipede, Combat, Lunar Lander, Missile Command, Yars Revenge, Pong и Super Breakout, а другие будут добавлены позже. Техническим партнёром выступила Microsoft, что, естественно, привело к тому, что наилучшие впечатления от игры можно получить на Internet Explorer 10 под Windows 8 с тачевым управлением.
Пользователи других браузеров будут видеть рекламу. Pong на Chrome 22 под Windows 7 работал сносно, хотя потом повис, и вкладка упала. Игры тут.
Разработчикам за js-либами и сэмплами прямиком Читать полностью »

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

Как я поборол лень с помощью краудфандинговой площадки
Читать полностью »

image

Экономьте время. Создайте с уверенностью.

«Самый популярный фронтенд шаблон», — именно такая фраза красуется на официальном сайте. Тем не менее, приведу отрывок описания из предыдущей версии.

HTML5 Boilerplate — это HTML/CSS/JS шаблон для всех маньяков, пишущих быстрые, неглючные и ориентированные на будущее сайты.

После более чем двух лет разработки, мы собрали лучшие хаки для кросс-браузерной совместимости, настройки производительности и даже таких вещей, как кросс-домменых Ajax запросов и Flash. А наш пример .htaccess для Apache поможет настроить правила кеширования, сжатия (gzip!) и подготовит ваш сайт к работе с HTML5 видео и @font-face.

Boilerplate — это не фреймворк. Мы также не навязываем какой-либо конкретный тип разработки. Это просто набор штуковин, помогающий быстро и безболезненно начать делать ваш сайт.

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

HTML5 игры и GodMode: все просто!«Война… Война никогда не меняется». Думаю, многим знакома эта фраза. Каждый пользователь ПК хоть раз запускал компьютерную игру. Много компьютерного железа пострадало в баталиях от горячей руки геймера, потерявшего последнюю «жизнь». Иногда появляется мысль: а не поискать ли «читы» и не накрутить ли себе жизней или ресурсов?.. Так начинается путь читера.

В этой статье я на двух примерах покажу, как с помощью подручных средств можно нечестно играть в игры на HTML5.
Читать полностью »

John LindquistПросим любить и жаловать: Джон Линдквист (John Lindquist), новый член команды технологических евангелистов JetBrains. В начале августа Джон дал нам подробное интервью, русскую версию которого мы и хотим представить аудитории Хабра. Но довольно предисловий — читайте и знакомьтесь!

1. Здравствуйте, Джон! Мы рады приветствовать Вас в JetBrains. Спасибо, что нашли время поговорить с нами. Вы довольно известная личность — например, в мире Flash, но не могли бы Вы рассказать немного о себе для тех, кто еще Вас не знает?

Конечно. Сначала о своем профессиональном пути: я занялся программированием еще в школе, писал игры на калькуляторе TI-85 вместо того, чтобы заниматься математикой (если не считать hypercard, это было еще раньше). Позже я увлекся написанием собственного программного обеспечения для ведения блогов с домашнего сервера (ASP), а затем перешел к выполнению разовых проектов еще во время учебы в колледже, примерно в 2000 году (php, java). Следующие пару лет разрабатывал внутреннее приложение для Университета штата Юта, предназначенное для отправки/ преобразования для просмотра документов в формате pdf (php, pdf и т.п.). Затем устроился на работу в компанию Schematic и работал с такими клиентами, как Disney, Dell, Target и другими (flash, html). В последнее время работал консультантом в компании Roundarch с такими клиентами, как Bloomberg, HBO, ВВС США (HTML/JS, flex, flash и т.п.).
Читать полностью »

Превращаем Хабр в «пятнашки» с помощью Canvas

Добрый день, уважаемые посетители Хабра.

Хочу поделиться с вами своим небольшим скриптиком, который можно использовать с помощью методики Bookmarklet на практически любом сайте. Итак…

Что это?

Как уже видно из заголовка, это игра «пятнашки». Особенностью данной игры является то, что она использует текущее видимое изображение страницы. При разработке была использована библиотека html2canvas Николаса фон Херцена (Niklas von Hertzen), который позволяет делать скриншот в браузере на стороне пользователя, а результат размещать в canvas. Именно это изображение (или его часть) и будет источником для игрового поля «пятнашек».

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

Здравствуйте.
Мне бы хотелось рассказать про мой «Bart Chalkboard Generator».image
Я уверен, что большинство из вас знают сериал «The Simpsons», и вы помните что почти в каждой новой заставке Барт писал на школьной доске что-то новое, типа: «They are laughing at me, not with me». А в интернете часто всплывает картинка с текстом: «I will use google before asking bump questions». И вот однажды я подумал, почему бы не создать простой генератор подобных картинок, да ещё и на Html5, что бы попрактиковаться?
Читать полностью »

Приветствую господа.

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

Сбербанк расширяет взаимодействие с пользователями на основе краудсорсинга, теперь в виде конкурса с призами!

    К сути: на днях Сбербанк поднял сайт специально под конкурс мобильных приложений для ОС iOS, Android, а также написанных на HTML5. Конкурс приурочили к Олимпиаде в Сочи 2014, но проходить он будет в этом, 2012 году.

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


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