ITCOD-DISK by Yuriy Vdovytchenko

Aleksej пишет: "Сеня, про зайцев - это неактуально"

Даааа..... И вообще.... Зайцы тоже уже неактуально!!!! )))
Шашлык - актуально!

Попробовал вообще без сложностей обойтись.
Сообразил - что "выскакивающий из шкафа скелет" - это на самом деле полноценная страница. И я просто сунул в неё адекватный бэкграунд.
И у меня в браузерах получилось вполне симпатично и просто. Примеры на демках авто и малой ювелирке.
itcod.com/demo/АвтоКаталог%20-%20Лада/
itcod.com/demo/Витрина%20-%20Ювелирная%20малая/

itcod пишет: И у меня в браузерах получилось вполне симпатично и просто.

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

Aleksej пишет:

itcod пишет: И у меня в браузерах получилось вполне симпатично и просто.

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

ахааааа..... а вот это уже нюанс... ajax-генерация и масштабирование кейса с картинками идёт на глазах у пользователя....
ты прав! симпатичнее если до момента окончательного масштабирования опрозрачить этот блок... надо сообразить как....
нужно перехватывать момент когда картинки в определённых <img> загружены.... чтото типа кэллбэк на загрузки картинок...
переварю спасибо Лёш!

Неделя прошла удачно.
1. Сделал и протестил два варианта иконизации папок/каталогов/разделов.
Первый вариант - это если есть папка, то достаточно кинуть рядом одноименную картинку формата jpg gif png, и к ней при визуализации автоматом привяжется вход в каталог. Я бы сказал, что это вариант для очень ленивых. У него есть один недостаток - невозможно поставить какие захочется подписи под картинкой, а так же невозможно поставить иконку в нужное место в последовательности иконок.
Для этого был придуман второй продвинутый вариант. Для любой картинки создается стандартный файлик описания товара, подписываем иконку как нам нравится, и в поле характеристик товара пишем протенькую строку: uri|http://google.com/ Так же можно использовать и относительные пути.
В живую это выглядит вот так: itcod.com/demo/

2. Спасибо Джанет. Заставила подрихтовать интерфейс и обнаружить скрытые возможности которые изначально казались "скелетами в шкафу".
Так у витрин и магазинов появились бэкграунды. И imho разделы сразу приобрели более симпатичный вид.

3. Спасибо Алексею. Его тоже не вдохновляла генерация интерфейса на глазах у пользователя. В результате был восстановлен режим full-ajax для подгрузки фоток построково и вынесено управление ajax-лоадером в отдельное поле в файле настроек .js. Полностью скрыть построение интерфейса от пользователя при первом считывании раздела - пока не удалось. Нужно спокойно поразмышлять как это сделать опрятнее.

Беседа о гифках зайцах и шашлыках привёл к тому, что теперь в качестве ajax-лоадера при подгрузке картинок можно использовать всё что захочется - и старые и новые технологии. Лениво протестил напихав gif-лоадеров в демки. Возится с jquery-плагинами или css пока лениво

ps: а ещё я стены прошпатлевал и покрасил

"Альтернативная история Земли" - очень красиво. Но, может быть, какой-то эффект перехода между слайдами? будет еще красивее.

Jannet пишет: "Альтернативная история Земли" - очень красиво. Но, может быть, какой-то эффект перехода между слайдами? будет еще красивее.

Джанет добрый день!
Даааа.... Это внедрил в виджет шаблонизацию размещения главных инфо-блоков. В результате получил множество вариантов дизайна, один из которых опробовал как раз на "альтернативной истории земли"
itcod.com/demo/Альтернативная%20история%20мира/
Согласен. эфФект какой-нить непрожорливый применю! спасибо!
Хотя лично меня бесит стандартный убогий скроллер.... очень бесит))
Рою плагины jquery в поиске простого надёжного кроссбраузерного кроссплатформенного ))))))))

[quote="Jannet" post=8147может быть, какой-то эффект перехода между слайдами? будет еще красивее.[/quote]
Добавил настраиваемое опрозрачивание с проявлением. Вродебы простенько и симпатичненько вышло. Джанет ещё раз спс.
Эффект хорошо виден на той же альтернативной истории.
Что самое прикольное этот эффект дал время для ajax-загрузки больших изображений....
может конечно не успеть на тормозных каналах при маленьком fadein/fadeout...
так что прелоад больших картинок оставлю в очереди развития.

ps: Странно. почемуто у меня не работает корректно fadeTo в jquery....нет duration... без анимации почемуто

не работает корректно jquery.fadeTo в опере....без анимации почему-то
Пришлось крутится с fadeIn/fadeOut для div'ов которые оказались 100%-кроссбраузерными.

Проекту стукнул 1 год с момента написания первой програмки.
И я решил подвести маленький итог зафиксировав статейкой, что же получилось

ITCOD Cloud Market.
Разработка облачных сайтов и магазинов.
17.05.2016

ПРЕДИСЛОВИЕ

Идея создавать облачные сайты и магазины не нова. Уже много лет существует облачный сервис Amazon S3 + AWS. Он позволяет публиковать статичные и динамичные front-end сайты. Существуют сервисы аренды виртуальных машин в облачных(кластерных) ресурсах. Существуют хостеры, предлагающие хранить статичный контент в облаках - и тоже рекламируют, это решение как "облачные сайты".

Все решения хороши! для различных целей. Жаль, что кроме решения Amazon AWS, все какие мне известны, откровенно лукавят.
В решениях есть облачная составляющая - но она не делает сайт облачным. Или не делает его на 99% облачным, как хотелось. И в результате - решения получаются или слишком дорогие, или чересчур сложные для людей не знакомых с парой языков, sql и линукс.
Возникает ощущение, что авторы многих продуктов выдают своё "желаемое" за действительное.
А слово "облачный" в названии, это маркетинг, уже давно существующих технологий кластеры, VPS/VDS и аналогичных.

В первой половине 2015 году прочитав статью про lua & webdav возникло желание - создать наконец эти пресловутые облачные сайты.

• Настоящие!
• Без маркетинговых натяжек!
• Без ограничений накладываемых старыми технологиями!
• Избавиться от недостатков решений на SQL и PHP!
П

олучить новые пути развития такой классной идеи от Amazon.
И если потребуется, то спроектировать и разработать новое, не пытаясь притянуть "за уши" старые решения к новым задачам и реалиям.
А далее вы узнаете, что из этого вышло, и как это было сделано.

МОИ ХОТЕЛКИ

1. Сайт должен размещаться в облачном WEBDAV файловом хранилище,
2. База данных сайта должна быть NoSQL и доступна прозрачно без API,
3. Данные должны быть доступны без импортов/экспортов,
4. Сайт должен взаимодействовать с пользователем и АСУ на равных,
5. Сайт должен быть защищён от атак на PHP и SQL,
6. Управление сайтом как файловым хранилищем,
7. Автоматическая визуализация содержимого разделов для пользователей.
8. Сайт и файловое хранилище в облачном хранилище это одно и тоже.
9. Множественное управление разделами сайта различными группами пользователей и различными АСУ.

ПРЕДНАЗНАЧЕНИЕ ПРОДУКТА

1. Упростить технологию создания FrontEnd сайтов и проектов, методом исключения и замены устаревающих компонент,
2. Сайт должен разворачиваться и работать без дополнительного ПО (CGI, NodeJS, etc...),
3. Для программирования сайта достаточно HTML+CSS+JS, и не требуется знаний PHP SQL и серверного ПО,
4. Снизить на порядок стоимость внедрения, владения и развития,
5. Упростить управление сайтом пользователем до тривиальных файловых операций,
6. Задействовать шаблонизацию блоков при построении лендинг-страниц.

ИНГРАДИЕНТЫ

За основу были взяты:

1. Архитектура SOA.
2. Качественный http-демон NGINX с модулями WEBDAV и LUA.
3. Creative Common формат NoSQL ODB ITCod.
4. Идеология Front-End виджетов на JS.
5. Native JS, библиотечки и jQuery c плагинами.

ВЫКИДЫВАЕМ ЗА НЕНАДОБНОСТЬЮ

1. SQL - и радуемся, что не требуется городить огород.
2. PHP - и счастливы, что ресурсов стало кушать меньше.
3. CGI - и балдеем в безопасности, нечего делать программам пользователя в памяти сервера!.

ПРОЦЕСС

В течении одного года (05.2015-05.2016) написал 10 сервисов на языке LUA, которые прозрачно интегрируются в NGINX и обеспечивают основные базовые процессы визуализации и взаимодействия облачных сайтов с пользователями (авторизация, регистрация, визуализация, обмен сообщениями и т.д.). Сформированы простейшие html-формы взаимодействия с пользователями. Спроектирован и создан front-end на JS для автоматической визуализации содержимого разделов облака. Каждый элемент проекта описан и имеет документацию к применению. Исходные коды открыты. Все базовые элементы опубликованы как Open Source под лицензиями MIT, BSD3, GPL, CC.
itcod.com/max/projects/itcod-disk/

РЕЗУЛЬТАТ

В результате появился продукт (и сервис) ITCOD Cloud Market, который продолжил идею Amazon AWS, и добавил к ней современные разработки и решения.

КОМПОНЕНТЫ

1. ITCOD Cloud Storage - Многопользовательский сетевой WEBDAV диск c расширеными функциями управления доступами и агрегатора webdav-ресурсов.
2. ITCOD Web Storage - Встроенная блочная визуализация облачного контента.
3. ITCOD Interactive Widget Interface - Автоматическая визуализация облачного контента в зависимости от содержимого.

ПОСМОТРЕТЬ

Как это выглядит, вы можете увидеть на облачном сайте: itcod.com/
Демо-модели авто-визуализации IWI: itcod.com/demo/
Подробно о проекте, процессы инсталляции, внедрения и исходные коды, описаны в документации разработчика: itcod.com/max/projects/itcod-disk/DOC/


БАЗОВЫЕ ОТЛИЧИЯ ОТ ТРАДИЦИОННЫХ РЕШЕНИЙ

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

При этом, в отличии от традиционных CMS, отсутствует необходимость в устаревших технологиях импорта/экспорта.
Наиболее перспективным применением, по моему мнению, являются онлайн системы электронной торговли.
Использование 1С в качестве backEnd - это первое, что приходит в голову.
Файловый доступ с любых устройств по webdav к NoSQL базам данных: обеспечивает простоту создания и управления облачными реурсами. А так же упрощение процедур бэкапа и восстановления.
Архитектура SOA позволяет постепенно расширять собственные и использовать платные и бесплатные сторонние сервисы.
NoSQL снимает ограничения на размеры БД, а объектная модель снимает табличные ограничения.
Запрет запуска пользовательских скриптов на сервере позволяет исключить множество различных типов хакерских атак на сайт.
Полное разделение хранения данных и визуализации - расширяет направления развития FrontEnd.

В результате получилась система обладающая свойствами:

1. сайта (портала),
2. облачного многопользовательского хранилища,
3. агрегатора webdav хранилищ,
4. хостинга,
5. сервисной системы.

И это, по моему мнению, только начало развития.

ПЕРСПЕКТИВЫ РАЗВИТИЯ

В перспективе разработка клиентов управления контентом с различных устройств и web. Создание модуля онлайн магазинов для 1С. Развитие визуализации содержимого ресурсов на основе шаблонов страниц. Создание различных онлайн-конструкторов. Применение и развитие чистых FrontEnd решений на JS, позволяет создавать продукты и интерфейсы корпоративного уровня по низким ценам. Возможности мульти-лендинга, одновременное применение и одно-страничных и многостраничных технологий и фреймворков в одном проекте. И многое другое...

Идей развития много. И коммерческих и опенсорс.
Автор проекта всегда рад новым партнёрам и друзьям.

СПАСИБО
Жителям питерского форума мастерпро.WS - за интерес, поддержку и предложения к улучшению.

ITCOD Development team.
2016 max(c)itcod.com

И маленькое дополнение.
Сегодня меня спросили как настроить визуализацию в виде простой лендинг-страницы с картинками-слайдами сверху вниз во весь экран.
Оказалось достаточно просто. Ставим в настройках одну картинку в ряд и выключаем линки. кидаем картинки, а они сами ресайзятся в размер страницы и ставятся по порядку друг за другом с ajaх подгрузкой.
Вот работающие примеры лендинг-слайдов:
Презентация ITCOD Cloud Market
Презентация ITCOD Cloud Storage
Вся настройка заняла 2 минуты
На вордпрессе я бы это делал явно подольше....