HTML5 хотя и является относительно новым языком, но уверенно набирает обороты. Главное, что HTML5  не только закрыл почти все «дыры» трещавшего по швам HTML4, но и теперь составляет неплохую конкуренцию для Flash. Убьет ли HTML5  Flash —  неизвестно, но ясно одно, что новый язык позволяет делать куда больше, в том числе внедрять видео на страницу. Что ж, как известно, Apple уже приняли радикальное решение отказаться от Flash на своих iOS-девайсах  в пользу HTML5. Так или иначе HTML5  -  новое слово в программировании, что дает веб-дизайнерам еще большую свободу творчества. Давайте посмотрим, какие онлайн-инструменты для веб-дизайнера может предложить нам HTML5. 

HTML5:  Справочная информация

Для тех из вас, кто только поверхностно знаком с HTML5  "на всякий пожарный", как говорится, еще раз напомним основные особенности HTML5:

• HTML5 является новый язык для представления контента в Интернете (на момент написания этой статьи HTML5 все еще находится на этапе бета-версии, запуск планируют на  конец 2012 года);
• HTML5 обладает новыми возможностями —   включать видео, аудио на сайт, добавлять шрифты, веб-графику  и анимацию на веб-страницы;
• HTML5  совместим  со всеми сайтами и браузерами,  поэтому не стоит беспокоится за старые сайты, созданные в HTML 4 или XHML1. Все будет работать :)
• JQuery уже постепенно начал «убивать» Flash, HTML5 закончит дело наверняка;

HTML5 онлайн инструменты и ресурсы 

Возможно вам уже известны некоторые онлайн-инструменты HTML 5. Во всяком случае сегодня мы познакомимся с парой новых и полезных сервисов для работы с  HTML 5.  10 онлайн-инструментов, представленных в подборке помогут вам помочь и упростить работу, а также предоставить новые возможности. Наслаждайтесь!

Online Sprite Box Tool

Сжатие изображения — это едва ли не последний писк моды в веб-дизайне в последние дни.  Инструмент Sprite Box позволяет увеличить скорость преобразования изображения и его загрузки.  Это приложение позволит обработать изображение, используя инструменты jQuery, CSS3 и HTML5.

_________________________________________________________________

Online 3D Sketch Tool

Это не обычный инструмент для создания эскиза.  В работе на этом сайте используются возможности  HTML Canvas для создания 3D-рисунков. Чтобы преобразить холст в формат 3D удерживайте пробел и перетащите изображение горизонтально при  помощи курсора. Вы также можете сделать рисунок вибрирующим и добавить пунктирные линии. Весьма неплохо  

_________________________________________________________________

Онлайн инструмент для тестирования шрифта

Для дизайнера  выбрать  достойный  подходящий шрифт иногда бывает сложнее всего.  Что же, теперь Вы можете использовать этот новый и удобный онлайн-инструмент для тестирования шрифта и мгновенно просматривать, как шрифт будет красоваться на вашей веб-странице.  При  этом не придется все  менять в HTML или CSS. Используйте возможности HTML5 и @font-face с помощью перетаскивания  font.ttf  файлов в верхнюю панель. Отформатированный шрифт сразу же появится в списке для быстрого просмотра.

_________________________________________________________________

Онлайн инструмент «Быстрый эскиз» 

Быстрый эскиз -уникальный  HTML5  онлайн-инструмент, который позволяет быстро создать неплохой набросок.  Я быстренько нарисовал следующее (см. изображения), но уверен, что талантливый веб-дизайнер найдет, как применить этот инструмент  с пользой. 

_________________________________________________________________

Онлайн инструмент — генератор шаблонов

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

_________________________________________________________________

Онлайн инструмент XRay

С онлайн инструментом XRay можно быстро просмотреть детали элементов  веб-страницы всего одним нажатием кнопки.  Просто перетащите закладку на этот  сайт в закладки, посещая веб-страницу, чтобы проанализировать элементы, просто закладку Xray и наведите на любой элемент на веб-странице. Этот инструмент  также может работать с HTML5 элементами и предоставить информацию о всей конструкции сайта.

_________________________________________________________________

Automatoon —  инструмент анимации

Automatoon используется только для  HTML5. Такая анимация будет хорошо  проигрываться на любых мобильных девайсах — iPhones, iPads, Android-устройствах, а также во всех популярных веб-браузерах. 

_________________________________________________________________

Online HTML5 Audio Maker Tool

Думаю, что с введением аудио  в HTML5, все больше и больше сайтов станут использовать силу звука в дизайне. Online HTML5 Audio Maker Tool — это новый инструмент, который может вам познакомиться с аудио-возможностями  HTML5.

_________________________________________________________________

Интернет SVG для инструмента Canvas HTML5

На этом сайте большинство пакетов векторной графики (Illustrator, Inkscape и т.д. ) можно экспортировать как SVG (Scalable Vector Graphics). С помощью этого инструмента вы можете конвертировать ваши SVG файлы в  HTML5 холст. 

_________________________________________________________________

Chrome Ajax Animator инструмент

HTML5 — настоящий кладезь для создания онлайн-анимации и хорошая альтернатива Flash. В настоящее время  вы можете использовать инструмент cross-platform/cross-format анимации, которые работают как онлайн, так и офлайн. Для работы с этим инструментом  достаточно только иметь установленный браузер Google Chrome. Начать работать с приложением вам поможет мини видео-урок.

Автор — Sam Deering  

Перевод — Дежурка 

Также читайте: 

• HTML5 простыми словами 
• 20 интересных сайтов на HTML5 
• 11 эффективных HTML5 видео-плееров

 



Комментарии