dLog :: Блог электронного обучения веб-разработке: html5

Показаны сообщения с ярлыком html5. Показать все сообщения

среда, 27 июня 2012 г.

Плакат "Веб-стандарты"

Вы можете скачать и посмотреть подробнее на Хабре - это наглядный, яркий материал.

понедельник, 25 июня 2012 г.

Web Standarts Days. Результаты

По результатам проведения конференции "Web Standards Days" можно выделить следующие выступления:

Жми сюда! (автор: Вадим Макеев)

Кнопка, ссылка, псевдоссылка? Как правильно выбрать, сверстать и не наделать глупостей.

Презентацию можно посмотреть по этой ссылке: http://pepelsbey.net/pres/push-it/?full#Cover

На грани возможного (автор: Антон Немцев)

3D и 2D-анимация и эмоции в веб c помощью CSS.
Презентацию можно посмотреть по этой ссылке: http://wsd.websaints.net/2012-spb/, а скачать - по этой ссылке: http://t.co/by45T9OV

На заметку

Для создания такого вида презентаций (http://pepelsbey.net/pres/push-it/#Cover), можно использовать следующий инструмент https://github.com/pepelsbey/shower#readme

воскресенье, 13 мая 2012 г.

HTML5: новый путь (продолжение).

В продолжение предыдущего поста о новом пути составления документов по стандарту HTML5 предлагаю немного "полевых исследований":

Исходный код

Apple Safari 5.2 (OS X 10.7.4)

Apple Safari (iOS 5.1)

Opera Next /12.0 beta (OS X 10.7.4)

Google Chrome 18 (OS X 10.7.4)

Microsoft Internet Explorer 8 (Windows Server 2003)

Microsoft Internet Explorer 9 (Windows 7 SP1)

Mozilla Firefox Aurora /14 alpha + Firebug (OS X 10.7.4)

Mozilla Firefox Aurora / 14 alpha + native inspector (OS X 10.7.4)

Снимки экранов выполнены в последних версиях всех распространенных браузеров (кроме Internet Explorer 10, ради которого нужно ставить Windows 8 Developer Preview 1) и можно заметить, что все современные браузеры корректно преобразуют сокращенный вариант HTML5 кода в well-formed XML и выстраивают классический DOM.

Проблемы отмечены только у IE8, но в нем поддержка HTML5 и не заявлялась разработчиком, а так же у Firebug в Firefox, но это скорее всего связано с тем, что используется Alpha версия браузера.

Ура... HTML5 уже здесь!

суббота, 12 мая 2012 г.

HTML5: новый путь

В течение нескольких лет на курсах "Веб-дизайн" и "ММТвО" мы брали за основу язык XHTML 1.0 в строгом варианте и приучались соблюдать требования стандарта языка.

Это означало, что базовым вариантом правильной страницы был вот такой код, являющийся well-formed XML и соответствующий DTD:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Пример страницы XHTML 1.0 Strict</title>
</head>
<body>
 <h1>Заголовок страницы</h1>
 <p>Абзац этой страницы<br /></p>
</body>
</html>

Как указывает К.О., код достаточно громоздкий.
К счастью, наступают более веселые времена. Как подсказывает нам Гугл, пришла пора обходиться легким кодом и экономить на буковках. Да, закрывать можно не все теги, да, некоторые даже можно целиком опустить.

<!DOCTYPE html>
  <title>Байты-деньги!</title>
  <p>Так-то

Если это пропустить через валидатор W3C (выбрав, естественно, HTML5), то мы получим православную зеленую полоску.

Отметим, что браузер автоматически создает в своей DOM-структуре недостающие элементы. И что кодировка по умолчанию - UTF-8. При валидации это незаметно. Однако, когда мы используем XML-документы для анализа и извлечения данных, на этот момент надо обращать внимание.

Открыть шаблонный документ в редакторе

понедельник, 25 апреля 2011 г.

Еще раз о Flash, HTML5 и портабле

Сначала несколько слов о портабельных браузерах (для Windows) и их взаимоотношениях с Flash. Загрузка свежих версий с portableapps.com показала, что в состав Chrome Portable входит флэш-плеер последней версии (\App\Chrome-bin\10.0.648.205\gcswf32.dll)
В состав Firefox Portable почему-то не входит; это странно, но можно взять эту библиотеку, переименовать ее в npswf32.dll и поместить в папку \Data\plugins
Это идеально работает для версии 3.6; а в версии 4 каким-то образом зависит от компьютера. На одних машинах все ок, на других Flash просто не отображается, но и не показывает предупреждение, что нужный плагин отсутствует. To be continued...

Теперь о Flash/HTML5.

1. Видео

В настоящий момент все современные версии браузеров поддерживают либо webm, либо H.264 (MPEG4). Первый формат - открытый, гугловский, второй проприетарный (неудивительно, что его поддерживают Internet Explorer и Safari). Старые версии - только через Flash Player, который, в свою очередь, поддерживает H.264. Отсюда вывод: видео следует конвертировать в Webm + H.264 и далее в зависимости от браузера либо выдавать код HTML5, либо делать flash-обертку.

Подробнее об этом здесь

2. Анимация

Анимация на основе CSS3 позволяет достигать примерно тех же эффектов, что и Flash. Но проигрывается, естественно, движком браузера (например, webkit) без всяких дополнительных плагинов.

У объекта указывается ссылка на анимацию вида -webkit-animation-name: AN-ani-0

В разделе стилей она описывается приблизительно так:

@-webkit-keyframes AN-ani-0 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
background-color: white;
border: 1px dashed red;
opacity:0;
}
...
}

Пока это не полностью кроссбраузерная технология, однако с помощью webkit-браузеров (Google Chrome и др.) уже сейчас можно просматривать примеры. Такие как этот:

dLog Blog is here

bit.ly/dlog1

Еще раз

Пример создан с помощью Sencha Animator.

Еще один проект по разработке CSS3-анимации: Animatable

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

понедельник, 14 марта 2011 г.

Веб-дизайн, ммтво | HTML5

HTML5 становится ближе!

Буквально на днях был выпущен релиз-кандидат Mozilla Firefox 4.
Разработчики и простые пользователи приглашаются к тестированию.
Скачать обычную версию можно тут: http://www.mozilla.com/firefox/RC/
Скачать портабельную версию тут: http://portableapps.com/apps/internet/firefox_portable/test

А по ссылке ниже можно еще раз восхититься возможностями новой спецификации: https://demos.mozilla.org/ru/

среда, 9 марта 2011 г.

ЭУМ и ЭОР на основе HTML5

Концепция построения ЭОР на основе технологии HTML 5

(отсюда)

См. также ФЦИОР

Установка OMS-плеера (Linux-версия + Windows-версия под WINE)

суббота, 29 января 2011 г.

HTML5. Поддержка разных возможностей. Инфографика

Довольно-таки показательная инфографика на тему поддержки разными браузерами возможностей HTML5. Примечательно, что в обзоре присутствуют Internet Explorer 7,8 и 9.

http://html5readiness.com/

понедельник, 17 января 2011 г.

ММТВО и Веб-дизайн. HTML5. GDD 2010. Москва

Особое внимание на примеры HTML5.

вторник, 26 октября 2010 г.

ММТВО и Веб-дизайн. HTML5 | Вставка видео. Часть 2

После того, как html5-видео будет успешно интегрировано в страницу. Можно приступать в выполнению данной лабораторной работы. В ней будет разбираться взаимодействие с элементами на странице с помощью JS и CSS. По следующим ниже ссылкам представлены варианты для браузеров Safari и Firefox.

http://nickjukov.com/html5/ff-1/
http://nickjukov.com/html5/ff-2/index.xhtml

http://nickjukov.com/html5/safari-1/
http://nickjukov.com/html5/safari-2/

Задание
Встройте в существующую html5 страничку (или создайте новую) элементы для управления созданием различных эффектов с видеороликом или с любыми графическими элементами.

Полезные ссылки, использованные для подготовки лабораторной работы.

среда, 13 октября 2010 г.

ММТВО и Веб-дизайн. Анонс

Темой следующих занятий по дисциплинам "Мультимедиа-технологии в образовании" и "Веб-дизайн" будет "HTML5. Нововведения. Особенности некоторых браузеров (Safari, Firefox)".

Приветствуется любая активность на занятии. Можно подготовить что-то самостоятельно.

вторник, 12 октября 2010 г.

ММТВО и Веб-дизайн. HTML5 | Вставка видео

Задание: выбрать, конвертировать видео и вставить на страницу, используя стандарт HTML5. Протестировать корректное воспроизведение в различных браузерах.

Для того, чтобы вставить видео на страницу по стандарту HTML5 необходимо использовать следующую структуру:

<video autoplay="autoplay" loop="loop" controls="controls"

autobuffer="autobuffer">

<source src="*.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
 <source src="*.ogv" type='video/ogg; codecs="theora, vorbis"' />
 <source src="*.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

Для конвертирования видео рекомендуется использовать программу Miro Converter (есть реализация для Windows и MacOS X). Можно также использовать программу Hamster Free Video Converter.

Также необходимо создать в той папке, где будет лежать страница с кодом файл .htaccess и добавить туда следующие строки:

AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm

Полезные ссылки по этой теме:

http://nickjukov.com/html5/ (мой пример реализации);
http://www.apple.com/html5/showcase/video/ (реализация вставки html5 video в браузере Safari) (открывать в Safari);
страница для разработчиков http://developer.apple.com/safaridemos/ (Safari);
отличный сайт с кучей ссылок о html5 video http://www.html5video.org/demos/;
спецификация по стандарту http://www.w3.org/TR/html5/video.html#video;
еще один отличный сайт про вставку видео на страницу.

Приветствуются желающие добавить любые дополнительные функции (наложение маски, добавление перспективы и т.д.) к вставленному видео.

Данная лабораторная работа не последняя в серии занятий, посвященных HTML5.

To be continued...

Ссылки

среда, 27 июня 2012 г.

Плакат "Веб-стандарты"

понедельник, 25 июня 2012 г.

Web Standarts Days. Результаты

Жми сюда! (автор: Вадим Макеев)

На грани возможного (автор: Антон Немцев)

На заметку

воскресенье, 13 мая 2012 г.

HTML5: новый путь (продолжение).

суббота, 12 мая 2012 г.

HTML5: новый путь

понедельник, 25 апреля 2011 г.

Еще раз о Flash, HTML5 и портабле

понедельник, 14 марта 2011 г.

Веб-дизайн, ммтво | HTML5

среда, 9 марта 2011 г.

ЭУМ и ЭОР на основе HTML5

суббота, 29 января 2011 г.

HTML5. Поддержка разных возможностей. Инфографика

понедельник, 17 января 2011 г.

ММТВО и Веб-дизайн. HTML5. GDD 2010. Москва

вторник, 26 октября 2010 г.

ММТВО и Веб-дизайн. HTML5 | Вставка видео. Часть 2

среда, 13 октября 2010 г.

ММТВО и Веб-дизайн. Анонс

вторник, 12 октября 2010 г.

ММТВО и Веб-дизайн. HTML5 | Вставка видео

Ony this moment

Архив блога

Official jQuery Blog

Ссылки

среда, 27 июня 2012 г.

понедельник, 25 июня 2012 г.

Жми сюда! (автор: Вадим Макеев)

На грани возможного (автор: Антон Немцев)

На заметку

воскресенье, 13 мая 2012 г.

суббота, 12 мая 2012 г.

понедельник, 25 апреля 2011 г.

понедельник, 14 марта 2011 г.

среда, 9 марта 2011 г.

суббота, 29 января 2011 г.

понедельник, 17 января 2011 г.

вторник, 26 октября 2010 г.

среда, 13 октября 2010 г.

вторник, 12 октября 2010 г.

Ony this moment

Архив блога

Official jQuery Blog

среда, 27 июня 2012 г.

понедельник, 25 июня 2012 г.

воскресенье, 13 мая 2012 г.

суббота, 12 мая 2012 г.

понедельник, 25 апреля 2011 г.

понедельник, 14 марта 2011 г.

среда, 9 марта 2011 г.

суббота, 29 января 2011 г.

понедельник, 17 января 2011 г.

вторник, 26 октября 2010 г.

среда, 13 октября 2010 г.

вторник, 12 октября 2010 г.