Ни для кого не секрет, что печатные книги уходят в прошлое. Им на смену приходит новое поколение устройств (а вместе с ними и программ), которые позволяют не только прочитать материал, подобно книге, но и разнообразить чтение интерактивными вставками. Это может быть как и некий динамически изменяющийся материал (лента твиттера и т.п.), так и некое интерактивное содержание (анимация работы конденсатора и т.п.)
Компания Apple выпустило приложение IBOOK Author, которое позволяет делать интерактивные книги для приложения IBOOKS устройств IPAD. Сегодня я предлагаю познакомиться с тем, как же создавать HTML-виджеты для данного приложения на примере виджета твиттера.
Для создания виджетов существует множество программ, стоимость которых варьируется от 0 (Dashcode) до 60 (Tumult Hype).
Создавать же свой виджет мы будем «вручную», без использования специализированных программ.
Теперь предлагаю перейти от слов к делу.Читать полностью »
Рубрика «html» - 133
Пишем HTML-виджет для приложения IBOOK Author
2013-02-28 в 20:14, admin, рубрики: apple, html, javascript, JSONP, метки: apple, javascript, JSONPПример — часы на СSS3 без изображений и JavaScript
2013-02-28 в 0:45, admin, рубрики: css, css3, CSS3 animation, css3 transform, html, Веб-разработка, демонстрация, метки: css3, CSS3 animation, css3 transform, демонстрация 
Это статья о том, как был сделан демонстрационный пример Wall Clock in Pure CSS3. Изначально, я предполагал написать данную статью в виде пошагового учебного пособия, но в процессе я понял, что такой пример мало для этого подходит. Потому я решил остановиться только на деталях, которые, на мой взгляд, наиболее интересны, а реализацию остального можно посмотреть и в коде.
Для начала собственно сам пример — на codepen.io или на cssdesk.сom
Вышел Emmet v1.0
2013-02-24 в 20:07, admin, рубрики: css, emmet, html, zen coding, Веб-разработка, метки: css, emmet, html, zen codingРад сообщить, что после более полугода разработки в свет вышел Emmet (бывший Zen Coding) v1.0.
Emmet — это инструмент для ускорения работы с HTML и CSS. В основе проекта лежит механизм динамических аббревиатур, которые разбираются «на лету» и из которых генерируется готовый фрагмент кода. Для написания аббревиатур используется синтаксис, похожий на CSS-селекторы, но с некоторыми дополнениями, специфическими для создания кода. Например, вот такая аббревиатура:
section>h2+ul.nav>li.nav-item$*5>aпростым нажатием клавиши превращается в:
<section>
<h2></h2>
<ul class="nav">
<li class="nav-item1"><a href=""></a></li>
<li class="nav-item2"><a href=""></a></li>
<li class="nav-item3"><a href=""></a></li>
<li class="nav-item4"><a href=""></a></li>
<li class="nav-item5"><a href=""></a></li>
</ul>
</section>
Дайджест интересных новостей и материалов из мира айти за последнюю неделю №45 (16 — 21 февраля 2013)
2013-02-22 в 21:57, admin, рубрики: chrome, css, css3, HTC One, html, html5, jquery, JS, tizen, webkit, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №45 (16 — 21 февраля 2013)")
Несколько интересных приёмов на CSS3
2013-02-21 в 8:10, admin, рубрики: css, css3, html, html5, Веб-разработкаСпецификации CSS3 позволяют фронтэнд-разработчикам создавать сложные визуальные эффекты, чтобы сделать сайты красивее. Я собрал более 10 новых приёмов CSS3, подходящих для того, чтобы украсить ваш сайт и придать ему более профессиональный вид.
CSS функция Calc()
Calc() позволяет выполнять расчеты по определению размеров и формы объектов. Она может быть использована в любом месте!
/* basic calc */
.simpleBlock {
width: calc(100% - 100px);
}
/* calc in calc */
.complexBlock {
width: calc(100% - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}
Моя демократия заканчивается у кончика твоего носа: совместное редактирование в облаке
2013-02-19 в 8:07, admin, рубрики: canvas, html, html5, online editor, Блог компании TeamLab, управление документами, управление проектами, метки: Canvas, html5, online editor, управление документами, управление проектамиОчередной этап Формулы-1. Напряженная гонка на запредельных скоростях. Пит-стоп, замена резины. Слаженная команда механиков за считанные секунды меняет колеса и болид продолжает гонку. Один профессионал — одна задача. А теперь представьте, что все колеса меняет один механик, или у каждого колеса мнется в растерянности целая команда, все мешают друг другу и дают бесконечные советы. Гонка безвозвратно проиграна.
Итак, представим, что гонкой в нашем случае является коллективное редактирование одного объекта — документа (простого или многостраничного, с рисунками, таблицами и прочими атрибутами). Как правило, предметом совместного редактирования являются объемные документы, требующие внимания всех подразделений организации: годовые отчеты, бизнес-планы, проекты бюджета, положения и соглашения, стратегии развития и управления рисками, методики и т.д. Выбор надежного и профессионального инструмента совместного редактирования — важный момент при работе с корпоративной документацией.
Кроссбраузерная кастомизация системного скроллбара
2013-02-19 в 5:57, admin, рубрики: html, javascript, Блог компании ДубльГИС (2ГИС), метки: 2ГИС, javascript 
Проблема размещения непрерывного контента произвольного объёма в экран, или окно, фиксированных размеров, существует несколько десятков лет. Примерно столько же существует и лучшее решение этой проблемы: элемент графического интерфейса — скроллбар.
Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС-онлайн.
Читать полностью »
Фреймы моего фрейма — мои фреймы
2013-02-18 в 2:38, admin, рубрики: html, Веб-разработка, информационная безопасностьВассал моего вассала мой вассал. Смутно помню что значит вассал но звучит круто, поэтому и перевожу свою статейку о неправильной работе с фреймами во всех браузерах. (читать в оригинале чтобы получить больше лулзов от borat-english)
Суть такова, когда вы вставляете фрейм чужого сайта в свой сайт вы имеете доступ к внутренним фреймам этого фрейма. Реклама, крос доменные рисиверы, «Like» кнопки и прочее. А также к фреймом этих фреймов. Любая глубина.
Читать полностью »
Дайджест интересных новостей и материалов из мира айти за последнюю неделю №44 (9 — 15 февраля 2013)
2013-02-15 в 19:49, admin, рубрики: css, css3, harlem shake, html, html5, jquery, JS, opera, WebGL, webkit, Блог компании Zfort Group, браузеры, веб-аналитика, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: css, css3, harlem shake, html, html5, jquery, opera, WebGL, webkit, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №44 (9 — 15 февраля 2013)")