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

Веб-мастеру / Ресурсы / Сервисы вебмастеру

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

Построитель сайтов

  1. tumult.com/hype/ - Hype 3.0 - Конструктор HTML5 анимаций для сайта, инфографики и презентаций.
Английский язык

надежный сайт
адрес: Польша, Варшава

JSFiddle

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

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



Английский язык

надежный сайт

email: draeton@gmail.com
адрес: США, Лаи

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, то есть обработка процесса происходит в браузере, интернет не требуется. Важно, чтобы была загружена страница.



CSS Sprites Generator

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



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



Английский язык

Используется: WordPress.

email: support@cloud-press.net

Ресурс для создания сайтов на WordPress. Знания веб-программирования не требуется, настраиваемый стиль, 80 шаблонов.


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


Английский язык

Используется: WordPress.
международные

HTML to WordPress

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

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

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


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


Английский язык
международные

Codepen

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

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




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



Grav

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



Webydo 2.0

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


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


Английский язык
международные

Carrd

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



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



Tilda Publishing

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


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


Английский язык
международные

Wall Clock in Pure CSS3

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