10 HTML5 онлайн инструментов в помощь веб-дизайнеру → HTML5
11:24:55
10 HTML5 онлайн инструментов в помощь веб-дизайнеру
16 августа 2012 | Опубликовано в Веб-дизайн | 8 Комментариев »
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.
_________________________________________________________________
Это не обычный инструмент для создания
эскиза. В работе на этом сайте используются возможности HTML Canvas
для создания 3D-рисунков. Чтобы преобразить холст в формат 3D
удерживайте пробел и перетащите изображение горизонтально при помощи
курсора. Вы также можете сделать рисунок вибрирующим и добавить
пунктирные линии. Весьма неплохо 
_________________________________________________________________
Онлайн инструмент для тестирования шрифта
Для дизайнера выбрать достойный подходящий шрифт иногда бывает сложнее всего. Что же, теперь Вы можете использовать этот новый и удобный онлайн-инструмент для тестирования шрифта и мгновенно просматривать, как шрифт будет красоваться на вашей веб-странице. При этом не придется все менять в HTML или CSS. Используйте возможности HTML5 и @font-face с помощью перетаскивания font.ttf файлов в верхнюю панель. Отформатированный шрифт сразу же появится в списке для быстрого просмотра.
_________________________________________________________________
Онлайн инструмент «Быстрый эскиз»
Быстрый эскиз -уникальный HTML5 онлайн-инструмент, который позволяет быстро создать неплохой набросок. Я быстренько нарисовал следующее (см. изображения), но уверен, что талантливый веб-дизайнер найдет, как применить этот инструмент с пользой.
_________________________________________________________________
Онлайн инструмент — генератор шаблонов
Этот онлайн инструмент может быть очень полезным для для веб-дизайнеров, когда дело доходит до создания страниц сайта. Этот онлайн инструмент использует потенциал HTML холст, чтобы предоставить вам шаблон с искомым сочетанием цвета прозрачности и размеров буквально за пару секунд.
_________________________________________________________________
С онлайн инструментом XRay можно быстро просмотреть детали элементов веб-страницы всего одним нажатием кнопки. Просто перетащите закладку на этот сайт в закладки, посещая веб-страницу, чтобы проанализировать элементы, просто закладку Xray и наведите на любой элемент на веб-странице. Этот инструмент также может работать с HTML5 элементами и предоставить информацию о всей конструкции сайта.
_________________________________________________________________
Automatoon — инструмент анимации
Automatoon используется только для HTML5. Такая анимация будет хорошо проигрываться на любых мобильных девайсах — iPhones, iPads, Android-устройствах, а также во всех популярных веб-браузерах.
_________________________________________________________________
Думаю, что с введением аудио в 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
Перевод — Дежурка
