HTML *

Заранее хочу предупредить, что тут вы не найдёте каких-либо исследований на тему развития веба и html в частности. Тут не будет ни оценки важности CSS3 ни семантики тегов html4 — html5. Это просто крик в пустоту о том, каким инструментом я, как верстальщик, хотел бы пользоваться.
Если интересно, прошу пожаловать под кат.

Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target. Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1.

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

Один из этих экспериментов связан с квотой на максимальный размер кэша.

Две недели назад я писал о генерации и подаче манифеста приложения, используя ASP.NET MVC. Здесь используется тот же код, но с добавлением в кэш сотен PDF-файлов по 7 МБ.

public ActionResult Manifest()
{     
    var cacheResources = new List<string>();
    var n = 300; // Play with this number

    for (var i = 0; i < n; i++)
        cacheResources.Add("Content/" + Url.Content("book.pdf?" + i));

    var manifestResult = new ManifestResult("1")
    {
        NetworkResources = new string[] { "*" },
        CacheResources = cacheResources
    };

    return manifestResult;
}

HTML документ загруженный в browser есть дерево DOM элементов и набор CSS правил. Каждое CSS правило это пара — селектор (selector) и список свойств (list of properties).

Мы мало задумываемся над тем, а собственно чего стоит нарисовать HTML документ c вычислительной точки зрения? Знания про то что думатель — думает, а неонка у нея унутре ярко светит сквозь opacity:0.5 элементы бывает явно не достаточно.

Собственно про это и есть данные статьи — про вычислительную сложность (computational complexity) отображения HTML и CSS. Хочу отметить что я использую свой собственный опыт имплементации HTML/CSS rendering engines (HTMLayout и Sciter), но вычислительные проблемы в данной области универсальны — определяются самой природой HTML и CSS спецификаций.

Все кто профессионально работают с CSS знают что означенный инструмент достаточно беден на предмет layout management. Например в современном CSS (2.1 и 3) технически невозможно воспрозвести все возможности HTML таблиц.

В Java/AWT/Swing например с самого начала были заложены всяко разны Layout Managers. В CSS такого в чистом виде нет. Непорядок.

Собственно это и явилось причиной нашего предложения в W3C CSS WG.

Под катом находится сравнительно небольшая подборка СSS3 и СSS3+JQuery меню. Некоторые из них уже могли встретится пользователям на просторах Интернета, некоторые-нет. Весь обзор представлен в виде скриншотов и демо-ссылок, а также ссылок на закачку сырцов, там, где это возможно.

Добрый день Уважаемые!

В этом посте я хочу поделиться своими личными наблюдениями и выводами в области применения html5 & css3.

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



Несколько дней назад в свет была выпущена книга под названием "Decoding HTML5", в которой, как вы уже могли догадаться речь идёт о нововведениях, которые появились с приходом HTML5. Не сказал бы, что книга была очень интересна мне, т.к. об этих новых рюшечках нововведениях не писал только ленивый, но всё-таки повторить и закрепить материал было полезным делом. Тем более, что книга написана небезызвестным Джефри, а это значит, что читать её будет легко и приятно. Но хватит расхваливать автора, а перейдём к краткому содержанию книги:

В HTML 5 были введены такие атрибуты тегов, как data-*.
Про них вы наверняка слышали или видели в разных проектах.
Например, их используют такие модные товарищи, как Twitter Bootstrap и jQuery Mobile.

Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в js.

Например, для сохранения уникального номера блока часто пишут так:

<div class="items">
  <div class="item1">...</div>
  <div class="item3">...</div>
  <div class="item6">...</div>
  <div class="item1">...</div>
  ...
</div>

А если нам нужно добавить еще один класс для каждого элемента? Или модификатор для отдельных? Да, конечно, можно обрезать регуляркой или другим костыликом на ваш вкус.

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

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

И вот нам на помощь спешат Чип и Дейл атрибуты data-*.

Довольно качественная эмуляция игры на HTML + CSS + JavaScript, для рисования используются именно html блоки, а не canvas.

Представьте, что на дворе сейчас 1982 год и вы играете в аркаду. Это было любимое времяпрепровождение у подростков того времени. Ваша задача — уничтожить все, что можно :) Для управления используйте стрелки, для стрельбы — shift или ctrl, для мин — пробел. Цель игры — уничтожить базу, при этом не попасться противникам и не убиться об стенки.

Игра Survivor изначально была написана для Atari 2600 в 1982 году и была портирована на Commodore 64 годом позднее. Данную браузерную версию написал Скотт Шиллер в дань уважения к Commodore 64 и для очередной демонстрации как HTML + CSS + JavaScript могут быть использованы для эмуляции игр и компьютеров, на которых работали более 30 лет назад.

Оператор сотовой связи Telefónica совместно с Mozilla разработали концепт смартфона нового поколения, который они назвали Open Web Device. Это устройство полностью совместимо с HTML5, а все приложения — телефонная книга, SMS, контакты, настройки телефона — сделаны на Javascript и работают через интерфейс и стек Boot2Gecko.

Доброго всем времени суток! Буквально сегодня при использовании Web Workers столкнулся с проблемой в функции importScripts(), которая заключается в том, что Opera(использую версию 11.61) по каким-то своим внутренним причинам при повторном создании объекта Worker отказывается исполнять внутри него функцию importScripts()(проблема возникает только в опере, остальные браузеры ведут себя адекватно).

Добрый вторник, хабр.

По нужде написал fallback скрипт для поддержки атрибута form в старых браузерах.

Атрибут form связывает элементы или группу элементов <fieldset> с формой по её идентификатору. Такая связь необходима в случае, когда элемент не располагается внутри формы. Таким образом, можно отправлять данные на сервер и работать с формой, как если бы элементы находились внутри формы.

Просто подключите jquery и этот скрипт:
github.com/Ti-webdev/js-attr-form/blob/master/html5-attr-form-fallback.js

flotr2 — это библиотека с открытым кодом для построения HTML5 графиков и диаграмм. Flotr2 — так как стала ответвлением от Flotr, но уже без привязки к Prototype JS и с множеством усовершенствований.

Доброго времени суток! Давно хотел побаловаться с html5 canvas. Когда стал вопрос, что же сделать этакое не слишком трудоемкое и не слишком убогое, решил сделать заменитель иконки ожидания (gif рисунка).

В общем вот что у меня получилось: http://receipt.of.by/html5_canvas/html5_canvas.html. Всем смотрящим просьба смотреть не менее 5 секунд — будет сюрприз.

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

О том, что вы читаете

Вот оно и свершилось — перед вами продолжение советов начинающим верстальщикам. Если вы не читали первую часть, то можете сделать это прямо сейчас.
В данной части вы ознакомитесь ещё с 11 советами (именно столько в моей второй заметке их находится).
Сперва мы пройдём нововведения в визуализации, а затем пофилосовствуем на тему семантики.

Ещё немного лирики

После выхода первой части я получил огромное количество feedback'a. Если честно, я не ожидал такого желания изучить что-то новое. Да-да, быдлокодеры там тоже есть. Но сейчас не об этом…
Также, как вы можете заметить, что количество человек, добавивших мой топик в избранное достигло миллиона, достаточно велико, что не может не свидетельствовать об огромном интересе к HTML5. Итак, поехали.

Новый справочный сайт HTML5Please может сильно помочь при разработке кросс-браузерных сайтов на HTML5.

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

HTML5Please идёт дальше. Кроме информации c caniuse.com, он ещё даёт практические рекомендации, каким образом лучше реализовать каждую фичу HTML и CSS. Просто вписываете в поисковую строку любую функцию — и сразу видите рекомендацию, можно её использовать или нет в данный момент, а если можно, то с какими условиями.

Если функция поддерживается не во всех браузерах, то сразу же приведены ссылки на соответствующие полифилы (polyfills), кросс-браузерные фрагменты кода обычно на github, которые добавляют недостающий функционал в старые браузеры (см. список полифилов). Если для функции нужен фоллбэк (откат на другую функцию или другой формат для совместимости), то вкратце описывается, как это сделать и в каких условиях это необходимо.

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

Mac OS X Lion воссоздали на HTML5 и CSS3 (если быть честным воссоздали совсем не всю ОС). Чудо доступно по ссылке: www.alessioatzeni.com/mac-osx-lion-css3

Достался мне проект по адаптации флеш-курса электронного обучения под iPad.
Хотел поделиться некоторыми моментами.

Медиа
Проект должен был позволять играть видео/аудио файлы, причем без лишний движений со стороны пользователя.
Видео на iPad можно проиграть только путем нажатия пользователем на что-нибудь, т.е. автоматически проиграть медиа файл, например, при загрузке страницы не получится, или получится, но далеко не во всех версиях iOS.
Так что первый раз проиграть видео/аудио приходится по клику пользователя. Дальше, если тому же тегу менять атрибут src, отлавливая событие onended, проигрывание можно делать автоматически.