Сервис генерации водяных знаков

Домашнее задание №3

Школа веб-разработки Loftschool

http://watermark.yarkevich.ru/

Что получилось

Самый лучший в настоящее время сервис генерации водяных знаков. Его отличетельной особенностями являются:

• Умопомрачительный дизайн
• Невероятная скорость работы
• Богатейший функционал
• Удобный интерфейс
• Стабильность

К этому можно добавить стопроцентную конфиденциальность - загружаемые и выгружаемые изображения не хранятся на нашем сервере и никуда не отправляются

Сервис позволяет накладывать два изображения произвольного формата с сохранение, либо изменением прозрачности

Над проектом работали:

• Сергей 'senja006' Яркевич - Тимлид, PHP, JavaScript
• Алексей 'freewayspb' Чырва - Верстка, JavaScript, PHP
• Данил 'danratnikov' Ратников - JavaScript

Реализованный функционал:

• Загрузка исходных изображений произвольного формата
• Два режима работы с изображениями:


• Работа с одиночным водяным знаком
• Режим "Замостить" - повторение водяного знака по всему исходному изображению
• Изменение прозрачности в обоих режимах работы
• Изменение позиции одиночного водяного знака двумя методами:


• Метод drag'n'drop
• Нажатие соответствующих элементов интерфейса
• Изменение отступов между водяными знаками в режиме "Замостить"
• Возможность смены языка интерфейса Русский - English
• Возможность поделится ссылкой в социальных сетях Facebook, Twitter, ВКонтакте
• Печать готового изображения на отдельном листе

Использованые инструменты:

• Редактор кода Sublime Text 2
• Графический редактор Adobe Photoshop CC 2014
• Система контроля версий GitHub.com
• HTML препроцессор Jade
• CSS препроцессор Less
• Потоковый сборщик проекта Gulp и его плагины:
• gulp-jade
• gulp-less
• gulp-uglify
• gulp-minify-css
• gulp-notify
• gulp-concat
• gulp-connect
• gulp-imagemin
• gulp-rename
• gulp-clean
• gulp-autoprefixer
• Веб-сервер Apache 2.2
• Серверные скрипты написаны на PHP 5.4

Установка

Для установки проекта требуется: node.js, Node Package Menager(npm), Веб-сервер Apache 2.2 и модуль PHP 5.4

• Клонировать репозиторий
  
  git clone https://github.com/senja006/watermark-generator.git


• Перейти в директорию /watermark-generator

cd watermark-generator


• Выполнить установку необходимых npm-пакетов
  
  npm install
  


• Собрать проект
  
  gulp build
  


• Запустить веб сервер в директории /app
  

Разработка

При разработке использовался потоковый сборщик проектов Gulp. Все рабочие файлы находятся в директории /_dev. проект собирается в директории /app. При помощи команды gulp build выполняются: компиляция jade и less файлов их минификация и конкатенация в файлы /app/js/index.html и /app/css/style.min.css минификация javascript модулей и плагинов JQuery, а также их конкатенация в отдельные файлы app/js/main.min.js и /app/js/plugins.min.js. Оптимизация изображений производится плагином gulp-imagemin c дальнейшим копированием в директорию /app/img. Шрифты копируются в папку /app/fonts. Все серверные скрипты находятся в директории /_dev/

Непосредственно для изменения кода необходимо выполнить:gulp, без параметров, при этом запустятся задачи по-умолчанию. Задача 'watch' будет следить за любым изменением в директории /_dev/ и производить неоходимые изменения в /app

Сторонние библиотеки

• JQuery
• JQueryFileUploader
• JQuery UI Draggable
• JQuery UI Slider
• JQuery Cookie

Отдельное спасибо Вове wowua Сабанцеву за предоставленный стартовый шаблон.