Платформа онлайн веб-програмиирования

JSFiddle

Платформа онлайн веб-программирования. Окно разбито на 4 части: HTML код, CSS, javascript и на последнем видим результат.
Пример

Подключаемые JavaScript библиотеки, MooTools и JQuery и DoJo.
Отладка под мобильный.

CSS Sprite Generator

Сервис от Projectfondue, генератор CSS спрайтов.

Как это работает

1. Собираем требуемые картинки в папку (ну так лично мне удобнее).
2. Жмем на сайте синенький пункт меню CLEAR, чтобы убрать существующие там иконки для примера.
3. Настраиваем:
   • Вы задаете расстояние между картинок, и до края. Они предложили сразу 50, но это много. Ноль не прошел, потом мы выставили 1, что вполне достаточно.
   • Можно задать цвет фона или сделать прозрачным.
   • Имена переменным будут присвоены по именам картинок в архиве. В форме вы можете добавить ко всем именам префикс или суффикс, ну или оставить поле пустым.
   • Можно сделать картинку компактной, вертикальной или горизонтальной.
   • Картинку можно встроить конвертируя в Base64 в CSS файл.
4. Перетаскиваем файлы из нашей папки в это поле.
5. Как только ваши иконки стали четкими, а не бледными и мерцающими, как вначале, спрайт готов.
6. Жмем зеленую кнопку Download, а затем появившиеся зеленые кнопки Spritesheet и Stylesheet.
7. Полученный текст корректируем под наш сайт.

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

Офлайн

Возникла необходимость сделать 3 спрайта более 100 иконок каждый, но пропал интернет, успел создать только 1 спрайт.
Успел закинуть картинки на 2-й и сразу интернета не стало.
Тем не менее, 2-й спрайт был создан. Результат я благополучно скачал.
Решил попробовать 3-й, самый большой. Ведь страница уже открыта и перезагрузка не требуется, он тоже был создан штатно, то бишь как так и надо.

Вывод, станица не требует перезагрузки, значит используется Javascript, то есть обработка процесса происходит в браузере, интернет не требуется. Важно, чтобы была загружена страница.

HTML to WordPress

Переводит классический HTML на платформу движка WordPress.

Как это работает

1. Создаем сайт в HTML (если его еще нет),
2. сжимаем сайт в .ZIP архив,
3. перетаскиваем поле на сайт или загружаем через кнопку,
4. через 15 секунд сайт готов.

Полностью автоматизировано.

На английском языке

Pivot

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

Tilda Publishing

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

На английском языке

Codepen

Онлайн платформа редактирования и хранения кода (снипетов) в HTML, CSS и JavaScript с просмотром в браузере.

4 окна, редактируем и видим результат в режиме реального времени.

Сетевые инструменты.

Grav

Альтернативная система управления сайтом. Визуальное редактирование.

CSS Sprites Generator

Перетаскиваем в поле картинки или выбираем нажав кнопку Choose files.
В результате получаем картинку спрайта в .PNG и CSS код, который очевидно стоит самому допилить, потому что вы получите для каждой картинки отдельно полный код.

Carrd

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

Перетаскиваем в поле картинки или выбираем нажав кнопку Выбрать.
Ждем пока они неспешно подгрузятся.
Тут мы ждем еще добавить или удалить ненужные.
Затем жмем создать и скачиваем архив: папка с нашими картинками (непонятно зачем), спрайт в .PNG и CSS код, который очевидно стоит самому допилить, потому что вы получите для каждой картинки отдельно полный код.

Wall Clock in Pure CSS3

Часы с циферблатом на JavaScript.

Webydo 2.0

Сервис для создания сайтов, умения веб-программирования не требуется. Можно подбирать элементы и перетаскивать на странице.

На английском языке