Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

10 HTML5 онлайн инструментов в помощь веб-дизайнеру

16 августа 2012 | Опубликовано в Веб-дизайн | 11 Комментариев »

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 удерживайте пробел и перетащите изображение горизонтально при  помощи курсора. Вы также можете сделать рисунок вибрирующим и добавить пунктирные линии. Весьма неплохо  ;)

HTML5 эскиз

_________________________________________________________________

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

Для дизайнера  выбрать  достойный  подходящий шрифт иногда бывает сложнее всего.  Что же, теперь Вы можете использовать этот новый и удобный онлайн-инструмент для тестирования шрифта и мгновенно просматривать, как шрифт будет красоваться на вашей веб-странице.  При  этом не придется все  менять в 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  

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

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

 




Комментарии

  1. Елена
    Thumb up Thumb down +2

    =) Время онлайн-приложений настало!

    «Интернет SVG для инструмента Canvas HTML5»- а docs.google.com?

    Ответить

  2. Илья
    Thumb up Thumb down -1

    >Так или иначе HTML5  -  новое слово в программирование

    Поправте ;)

    Ответить

  3. Илья
    Thumb up Thumb down +1

    ... и сам опечатался, печаль

    Ответить

  4. Moor
    Thumb up Thumb down -3

    Комментарий скрыт из-за рейтинга

    Ответить

    Елена Ответ:

    Thumb up Thumb down 0

    Если не дружите с английским, то не найдете. Ну или платные «волшебные» курсы. Может быть стоит изучить html? А там и необходимость в видео отпадет =) Сам по себе HTML проще азбуки. А вот сопутсвующие языки чуть сложнее.

    Ответить

  5. asg
    Thumb up Thumb down +1

    Мммм....не получилось вставить код, попробую на картинке показать

    html5_scheme.jpg

    Ответить

    asg Ответ:

    Thumb up Thumb down +2

    Друзья, постмодерация — это замечательно. Вот только смысл моего сообщения как-то потерялся...

    P.S.

    1) У меня одного не работает уведомление по электропочте о новых сообщения в статье?

    2) Смайлы тож не работают, отображаются просто текстом, не картинкой.

    3) И последний вопрос — как установить свою аватарку?))

    Ответить

  6. ve
    Thumb up Thumb down -3

    Комментарий скрыт из-за рейтинга

    Ответить

  7. Сергей
    Thumb up Thumb down 0

    flash-animator.org воть

    Ответить

    Дмитрий Ответ:

    Thumb up Thumb down 0

    Ну, и что это за херня? Одна гифка на сайте и все.

    Ответить

    Сергей Ответ:

    Thumb up Thumb down 0

    landing.flash-animator.org если и этот сайт не отображает, то вам надо браузер менять

    Ответить

Оставить ответ


семь − 4 =

Вставить изображение