С развитием CSS3, возможности верстки растут экспоненциально. Всё больше функционала можно реализовать на «чистом» CSS. В этом посте показан процесс разработки интерактивного циклического слайдера без единой строчки JavaScript. Автоматическая ротация, выбор любого слайда с плавным переходом – на «чистом» CSS. Ссылка на демо есть в конце статьи.
Плагин 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 понемногу становится международным, а на проекты краудфандить уже хочется, на помощь приходят наши клоны. Наличие их подтолкнуло меня побороть первую мою лень «Попробовать краудфандинг» и я взялся придумывать презентацию для своего небольшого проекта. Надеюсь, небольшое описание процесса создания поможет сомневающимся решиться на сбор средств для своего проекта.
«Самый популярный фронтенд шаблон», — именно такая фраза красуется на официальном сайте. Тем не менее, приведу отрывок описания из предыдущей версии.
HTML5 Boilerplate — это HTML/CSS/JS шаблон для всех маньяков, пишущих быстрые, неглючные и ориентированные на будущее сайты.
После более чем двух лет разработки, мы собрали лучшие хаки для кросс-браузерной совместимости, настройки производительности и даже таких вещей, как кросс-домменых Ajax запросов и Flash. А наш пример .htaccess для Apache поможет настроить правила кеширования, сжатия (gzip!) и подготовит ваш сайт к работе с HTML5 видео и @font-face.
Boilerplate — это не фреймворк. Мы также не навязываем какой-либо конкретный тип разработки. Это просто набор штуковин, помогающий быстро и безболезненно начать делать ваш сайт.
«Война… Война никогда не меняется». Думаю, многим знакома эта фраза. Каждый пользователь ПК хоть раз запускал компьютерную игру. Много компьютерного железа пострадало в баталиях от горячей руки геймера, потерявшего последнюю «жизнь». Иногда появляется мысль: а не поискать ли «читы» и не накрутить ли себе жизней или ресурсов?.. Так начинается путь читера.
В этой статье я на двух примерах покажу, как с помощью подручных средств можно нечестно играть в игры на HTML5.
Читать полностью »
Просим любить и жаловать: Джон Линдквист (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 и т.п.).
Читать полностью »
Добрый день, уважаемые посетители Хабра.
Хочу поделиться с вами своим небольшим скриптиком, который можно использовать с помощью методики Bookmarklet на практически любом сайте. Итак…
Как уже видно из заголовка, это игра «пятнашки». Особенностью данной игры является то, что она использует текущее видимое изображение страницы. При разработке была использована библиотека html2canvas Николаса фон Херцена (Niklas von Hertzen), который позволяет делать скриншот в браузере на стороне пользователя, а результат размещать в canvas. Именно это изображение (или его часть) и будет источником для игрового поля «пятнашек».
Подавляющее большинство сайтов создано с использованием сеточных макетов. Они могут не использовать их в явном виде, но если на сайте присутствует блок с основным контентом, расположенный справа, и боковой блок (сайдбар), расположенный слева, то это и есть простейшая сетка.
Если требуется реализовать более сложные сетки, то люди прибегают к помощи фреймворков. Они считают, что сетки это сверх сложная вещь, которую лучше доверить настоящим знатокам CSS. Уверенность в этом укрепляется тем фактом, что большинство сеточных фреймворков, с которыми они имеют дело, являются очень сложными.
В этой статье я расскажу вам, как я верстаю сеточный макет. Это не так уж и сложно. И даже сделать резиновые сетки не составит большого труда.
Читать полностью »
