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

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

Инструменты для работы с html5

1 июня 2013 | Опубликовано в Веб-дизайн | 2 Комментариев »

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

 

Adobe Edge Animate 

Новая программа для создания графики, анимации и интерактивного контента для веб-сайтов с использованием HTML, JavaScript и CSS.

 

 

Moqups – HTML5 App For Creating Wireframes

Moqups —  удобный онлайн-редактор для создания макетов, прототипов, ui концепций.  

Moqups – HTML5 App For Creating Wireframes

Sprite Box

Поможет достаточно быстро прописать css классы и id для готовых спрайтов. 

Patternizer

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

Liveweave – HTML5, CSS3 & JavaScript Playground

HTML5, CSS3 и конечно, JavaScript — площадка для веб-разработчиков и дизайнеров. Это веб-сайт, предназначенный для кодеров, программистов и разработчиков для тестирования и написания кодов в режиме онлайн. 

HTML KickStart

Набор HTML5, JQuery (JavaScript) файлов и CSS, шаблонов и элементов сможет стать для вас хорошим стартом и помочь сэкономить достаточно много времени. 

HTML KickStart

Adobe Edge Reflow CC

Инструмент для создания адаптивных макетов.

Adobe Typekit

Typekit — это достаточно быстрый метод интеграции шрифтов в веб­сайты.  Библиотека шрифтов Typekit, доступная с помощью подписки, дает дизайнерам и разработчикам возможность применять различные шрифты и делать веб­страницы более разнообразными.

Adobe PhoneGap Build 

Данный сервис позволяет разработчикам использовать HTML, CSS и JavaScript для создания кроссплатформенных приложений, которые работают на iOS, Android и других мобильных платформах.

The HTML5 Test

С помощью ресурса можно протестировать ваш браузер и узнать, на сколько хорошо он поддерживает

 

On/Off Flipswitch HTML5/CSS3 Generator

Онлайн-инструмент для создания переключателей с дополнительными переходами.

Online 3D Sketch Tool

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

Online 3D Sketch Tool

Online SVG to HTML5 Canvas Tool

Это конвертор SVG в  HTML5 Canvas JavaScript. 

Online SVG to HTML5 Canvas Tool

CanvasLoader Creator

Это бесплатный онлайн-инструмент, с помощью которого вы можете создавать прелоадеры.  Ресурс использует библиотеку  использует библиотеку  CanvasLoader UI Library. 

 

CanvasLoader Creator

Stitches

Изображения можно «перетаскивать» в специальную зону. Код генератора доступен в форме плагина jQuery, что открывает возможности по использованию функционала в своих приложениях.

Stitches

CreateM

Среда для редактирования для CMS, основанных на javascript

CreateM

LimeJS

HTML5 фреймворк  для написания игр, работающих на современных сенсорных экранов и десктопных браузерах.

LimeJS

Font Dragr

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

Font Dragr

MRI

Это ресурс позволит проверить, какие из селекторов будут работать не правильно.

MRI

Initializr

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

Initializr

Rendera

Набираете код в левом окне и видите результат в правой части экрана.

Rendera

Webdirections

Еще одна площадка для генерации css. Простые эффекты могут быть доступны всего в несколько кликов.

Webdirections

 

Автор: Akkas 

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

Смотрите также:




Комментарии