Деревья (в том числе, сетевые)

_1_

Сомнительный тип

Всего сообщений: 346
Зарегистрирован: 14 окт. 2014 г., 09:11
Рейтинг пользователя: 17
Штрафных баллов: 1

0

12 мая 2015 г. в 07:11. Редактировалось 7 раз, последний — 12 мая 2015 г. в 08:56#21

4X_Pro :

_1_ написал(а):

• самим папкам (в которых хранятся закладки) нельзя назначить ссылки

Зачем такое вообще может быть нужно?

Конкретный пример: отобразить структуру форума — из папок должна быть ссылка на раздел или тему. Да и узел, ссылающийся на конкретный пост, вовсе не обязан быть листиком дерева: внутри поста могут быть якори и идентификаторы DOM-объектов, на которые тоже можно ссылаться из отдельных узлов древовидной структуры.

_1_

Сомнительный тип

Всего сообщений: 346
Зарегистрирован: 14 окт. 2014 г., 09:11
Рейтинг пользователя: 17
Штрафных баллов: 1

0

12 мая 2015 г. в 08:36. Редактировалось 1 раз, последний — 12 мая 2015 г. в 08:42#22

4X_Pro :

_1_ написал(а):

• из закладки нельзя ссылаться на другой узел (в том числе, на папку)

Зачем такое вообще может быть нужно?

На рисунке приставками-плюсиками показаны метки, а суффиксами – внутренние ссылки (на другой узел). Для сетевых деревьев ссылки между узлами – очень частый случай.

Для сложных иерархий часто встаёт вопрос, похожий на дилемму от Ильи Ермакова. И сетевые деревья позволяют дать красивый ответ…

Часто возникает потребность ссылаться не на всё чужое дерево, а на его конкретные узлы (по одной ссылке можно отметить, или последовательно развернуть сразу несколько узлов). Такие ссылки как бы состоят из нескольких частей:

• ссылка на страницу (где опубликовано дерево)

• ссылка на само это дерево (один из DOM-объектов на странице)

• внутренняя ссылка на конкретный TreeView-узел (который должен быть отмечен или получить фокусировку)

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

_1_

Сомнительный тип

Всего сообщений: 346
Зарегистрирован: 14 окт. 2014 г., 09:11
Рейтинг пользователя: 17
Штрафных баллов: 1

0

12 мая 2015 г. в 09:31. Редактировалось 7 раз, последний — 7 августа 2021 г. в 16:16#23

4X_Pro :

_1_, по поводу меток: у меня несколько другие соображения: вместо одной уникальной метки (плюс еще средства для группирования сообщений по этим меткам) использовать обычные теги. Собственно говоря, библиотека для работы с ними в дистрибутиве уже есть, но изначально я планировал делать возможность ставить теги на темы, а не на отдельные сообщения, но технически разницы никакой нет, можно и на сообщения. В этом случае можно сообщению будет вешать несколько тегов, скажем, один уникальный, чтобы ссылаться только на это сообщение, остальные — теги групп, к которым это сообщение будет относиться.
Причем, в этом случае оно будет без привязки к конкретной теме по URL (т.е. адрес будет вида /tags/имя_тега.htm или /tags/имя_тега/). Единственный недостаток этого решения — это кириллица в URL.

Насколько вижу, Вы опять стремитесь наступить на те же грабли, которые много лет назад заставили Вас отказаться от универсальной структуры форума: нет никакой разницы между информационными объектами: раздел, подраздел, тема, пост, именованный кусок поста. Теперь, эти универсальные конструкции можно строить поверх форума: достаточно ввести таблицу 'коротких ссылок', и предоставить пользователю возможность её редактировать. Записи в этой таблице могут быть персонифицированными, групповыми, общими. То есть, это вопрос назначения прав доступа.

Ничего проще и наглядней древовидных структур придумать невозможно. «Лучше гор могут быть только горы…»

Через имена узлов естественным образом появятся имена постов: краткое обозначение сути сообщения.

Теги – это источник ошибок нарушения целостности данных…
Допустим, тема принадлежит форумному подразделу. В этом случае подраздел как бы является "папкой" для хранения нашей темы. Теперь назначим ей один или несколько тегов. В структуре данных это похоже на то, будто мы создали ярлыки нашей темы, и "бросили" их в соответствующие папки-теги. Если тему вообще удалить (или изменить до неузнаваемости), то она перестанет соответствовать тегам (но по-прежнему останется в них "лежать" ) - вот такие возможны ошибки.

_1_

Сомнительный тип

Всего сообщений: 346
Зарегистрирован: 14 окт. 2014 г., 09:11
Рейтинг пользователя: 17
Штрафных баллов: 1

0

12 мая 2015 г. в 10:48. Редактировалось 1 раз, последний — 12 мая 2015 г. в 10:59#24

<-- intbpro.ru/plans/treeView/post-246.htm от 4X_Pro :

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

В броузерах закладки хранятся в реляционном формате, и это правильно. А html-формат для закладок нужен для того, чтобы их красиво (и понятно) показать. Такую страничку можно выложить на сайт, опубликовать на форуме (и т.п.).

Но сегодняшний способ html-экспорта не выполняет задачу красивого представления: странички закладок получаются безобразными. Вот я и предлагаю: сделать html-экспорт в виде древовидных структур (с возможностью сворачивания узлов, раскрашивания, смены иконок, …), и к этим файлам в архиве цеплять csv-аппендикс = (точную копию данных из реляционной базы). В результате, убиваем сразу всех зайцев, которые там бегают…

Вообще, многопоточные файлы – это перспективное направление, не только для броузеров: становится обычным делом один и тот же файл открывать в любых специальных приложениях. Например, закладки или какую-то их часть можно открыть в профессиональном векторном редакторе, или мышкой перетащить в MS Word.

_1_

Сомнительный тип

Всего сообщений: 346
Зарегистрирован: 14 окт. 2014 г., 09:11
Рейтинг пользователя: 17
Штрафных баллов: 1

0

19 мая 2015 г. в 14:38. Редактировалось 29 раз, последний — 21 мая 2015 г. в 08:21#25

Асинхронное ускорение работы с любыми интернет-интерфейсами

    Для интернет-пользователей есть огромный класс задач, имеющих бессмысленно-повторяющийся трафик. А реальных данных в тех задачах – "с гулькин нос" ))      Например, это работа на форумах, и вообще: любое взаимодействие с интернет-базами данных.    Сюда же относятся платёжно-оценочные сервисы: Если вы часто с ними работаете (или планируете этим заняться в будущем), то, для комфортной работы обратите внимание на этот пост.

    Суть метода: частичное перенаправление интернет-трафика. Вместо того, чтобы в стопятидесятый раз грузить из Интернета рисунки, стили и прочие ‘интерфейсные’ файлы, компьютер пользователя сразу сохраняет их в специальном кэше, и каждый раз достаёт оттуда. В Интернет идут лишь запросы о получении ДАННЫХ. Данные, обычно, передаются либо в .html, .php, .asp,.xml, .txt, .csv-файлах, либо – в заголовках особых IP-пакетов ...
    Специальный кэш – это отдельная локальная папка, соответствующая конкретному интернет-серверу. Для каждого сервера – своя папка.

    Чтобы воспользоваться этим методом асинхронного серфинга, нужно знать JavaScript, хотя бы на примитивном уровне.

--

Итак,

Комбинируя несколько бесплатных программ, я придумал, как организовать специфический вид вежливой асинхронной загрузки: экономия трафика доходит до 1000 крат! И даже тяжёлые интернет-странички начинают "летать" как в невесомости.

Первоначально, задача о такой загрузке стояла для Dynatree-деревьев: раньше при медленном интернет-соединении для загрузки всего такого дерева требовалось несколько минут. Теперь оно грузится за 4 -:- 8 секунд: просто скомбинировал У данного пользователя нет прав размещать ссылки! и У данного пользователя нет прав размещать ссылки!. Для перенаправления всех не_смысловых (перманентных) файлов страницы возможны несколько способов, два из которых уже опробовал:

всякие галочки в настроечных формах прокси-сервера Fiddler,
гибкие скриптовые вариации: в файле …\Fiddler2\Scripts\CustomRules.js . Среди этих скриптовых методов:

1) Повторяя структуру серверных папок:

    static function OnBeforeRequest(oSession: Session) {


     // <сервер>.ru/2/   - это корень DinaTree
        if (oSession.hostname == '<сервер>.ru') {
            if (oSession.uriContains(".html")){UI.actRemoveAllSessions();

            }else{
                                    // oSession.hostname="subdomain.test1.ru";
                oSession.url = oSession.url.Replace(oSession.hostname+"/2/","subdomain.test1.ru"+"/1/");
                oSession["ui-color"]="#99aa44";
                                    // oSession["ui-bold"]="true";
             }
       }
    }

Почему-то прокси Fiddler назвали "отладочным"… ?

На самом деле, он (в связке с локальным сервером) имеет замечательные практические применения:

· ускоряет работу на форумах,
· не тормозит чтение и модификацию сложных интерактивных объектов (например, деревьев),
· ... и вообще, минимизирует любой пользовательский трафик, который имеет микроскопическую изменяемую информацию, и уйму вспомогательных «оформительских» или скриптовых файлов.

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

Что осталось доделать:

Файлы, отсутствующие в локальном кэше, должны подгружаться туда автоматически. Тогда, чтобы обновить некоторые из них, достаточно будет просто удалить их из кэша.
Придумать Ajax-методы подгрузки частей страницы (чтобы ещё в несколько раз уменьшить паразитный трафик, и, в перспективе, сразу грузить csv-файлы, сгенерированные из баз данных (ведь именно для взаимодействия с внешними БД заточена эта технология асинхронной загрузки).
Значимые файлы и Ajax-блоки определять по заголовкам запросов, тип: (*.html/txt).
Стандартизировать спецификацию асинхронной загрузки (или найти готовую))
Захват дерева из текстового фрагмента или из спойлера. Это актуально для старых форумов, не имеющих встроенной поддержки TreeView-структур.
Создать специальное всплывающее окошко для управления отображением связанных меток или страниц: дерево будет “плавать” над страницей форума.
Обкатать и специфицировать синтаксис перенаправления. Это просто вопрос длительного практического пользования. Например, чтобы таким же способом привыкнуть к технологии сетевых деревьев, мне понадобилось четыре года. Но здесь этот период будет короче: планирую контекстно разместить ссылки на этот форум, и, за счёт массового применения, к тестированию и разработке подключатся лучшие спецы (+ огромная масса простых пользователей). Даже странно, что до сих пор такой локальной подгрузкой никто всерьёз не занимался: есть лишь примитивные описания, что-то вроде: (У данного пользователя нет прав размещать ссылки!),(У данного пользователя нет прав размещать ссылки!)

Достигнув шустрой загрузки деревьев, я, конечно, не успокоился, и стал пробовать эту технологию для ускорения других задач. Первым делом, на примере загрузки ‘тяжёлой’ первой странички этой темы, настроил подкачку не изменяемых файлов из единой папки:

2) Подгрузка из единого кэширующего каталога:
(все файлы в одной папке: "subdomain.test1.ru/3/")

    static function OnBeforeRequest(oSession: Session) {

        function Path(tx_path: String) /* - путь без имени файла*/
                {return(tx_path.substring(0, tx_path.lastIndexOf('/')+1))}

        function RightSimbl(tx: String) /* - последний символ в строке */
                {return(tx[tx.length-1])}


        if (oSession.hostname == 'intbpro.ru') {
            if ((RightSimbl(oSession.PathAndQuery) == '/')||(oSession.uriContains(".htm"))) {
                UI.actRemoveAllSessions();

            }else{
                oSession.url = oSession.url.Replace(oSession.hostname+Path(oSession.PathAndQuery), "subdomain.test1.ru/3/");

                // FiddlerObject.alert(oSession.PathAndQuery);
                oSession["ui-color"]="#99aa44";
             }

        }else{oSession["ui-color"] = "#77ff99";}

    }


Результат эксперимента вдохновляет: полная загрузка (включая рисунки, стили и jQuery) = ~5сек (то есть, практически, мгновенно). Для сравнения: эта же страничка, предварительно скопированная на винчестер ПК, грузится из локальной папки за 2 секунды.

_1_

Сомнительный тип

Всего сообщений: 346
Зарегистрирован: 14 окт. 2014 г., 09:11
Рейтинг пользователя: 17
Штрафных баллов: 1

0

20 мая 2015 г. в 23:04. Редактировалось 11 раз, последний — 21 мая 2015 г. в 11:00#26

Ну, вы даёте. Как напишете что про "передовые технологии", так хоть стой, хоть падай.

У данного пользователя нет прав размещать ссылки!

Эх, вспоминаю времена диалапа и платного трафика...
У данного пользователя нет прав размещать ссылки!

Для раздачи файлов иногда пользовался вот этим:
У данного пользователя нет прав размещать ссылки!

_1_

Сомнительный тип

Всего сообщений: 346
Зарегистрирован: 14 окт. 2014 г., 09:11
Рейтинг пользователя: 17
Штрафных баллов: 1

0

18 июля 2015 г. в 21:40. Редактировалось 6 раз, последний — 14 февраля 2023 г. в 19:30#27

Mindmap как средство навигации по сайту

4xpro.ru/ideas/mindmap/

27 января 2015 от 4X_Pro

Сайтостроительство, Идеи и размышления

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

Но все эти противоречия можно устранить, если использовать для навигации mindmap (иногда их еще называют "ассоциативными картами" ). Mindmap — это изображение, показывающее между собой связь различных понятий, используемая для облегчения изучения и запоминания чего-либо нового. Как правило, в центре его располагается ключевое понятие (тема сайта), от которого расходятся связи к более частным (разделам сайта), а от них к еще более частным (подразделам или конкретным статьям). Каждое понятие можно обозначить как просто словом, так и добавить к нему небольшую картинку для большей наглядности. Нарисовать такой mindmap можно сначала от руки еще на самом начальном этапе проектирования сайта. Это, помимо всего прочего, поможет лучше продумать его структуру.

Техническую реализацию этой идеи я вижу так: изначально в правом верхнем углу сайта находится уменьшенная картинка mindmap, причем она выводится с position: fixed, то есть даже при прокрутке сайта вниз остается на экране на том же самом месте и доступна в любой момент. По щелчку мыши по ней разворачивается полная версия mindmap, содержащая кликабельные области, щелчок по которым приводит к переходу в соответствующий раздел. (Области могут быть произвольной формы, это легко реализуется с помощью тегов map и area.)

Из недостатков такой идеи можно выделить три:

немного увеличивается объем работы над сайтом, а также возникает необходимость использовать специальные программы для генерации тегов area;
при добавлении новых разделов mindmap придется дорисовывать, поэтому такое решение подходит, в основном, сайтам, структура которых особо не меняется;
неудобство для пользователей, заходящих с мобильных устройств с низким разрешением (но таковых можно отслеживать с помощью JavaScript и показывать им уменьшенную и упрощенную версию картинки).

Но с другой стороны, хорошо продуманный и красочный mindmap не только покажет пользователю все что есть на сайте, но и станет одним из самых запоминающихся элементов, выделяющих его среди прочих, своего рода лицом сайта. Но помните: mindmap — это расширение традиционной навигации, но не полная ее замена, и не следует полностью отказываться от таких элементов как указатель текущего местоположения ("хлебные крошки" ) или главное меню.

— Увы, готового примера нет. Я, как обычно, придумал идею и забил на ее реализацию (отчасти из-за того, что рисовать сам не умею).

1. Карту не обязательно рисовать от руки. Существуют специальные компоновочные программы, позволяющие перемещать векторные образы по экрану.
Среди подобных программ можно рассматривать не только построители maind-карт, но и конструкторы блок-схем. А также, сюда можно отнести всевозможные построители иерархических структур (в которые можно включить не только текст, но и рисунки).

-

2. Интеллект-карта не обязательно должна быть строго-иерархичной. Если требуется замкнуть различные ветки, это можно делать гиперссылками.

3. В любой области знаний даже один человек может применять сразу несколько карт. К одной и той же крупице знаний можно добираться разными способами.

4. Навигация, построенная при помощи таких карт, не всем и не всегда будет понятна: ведь структуры знаний во многом индивидуальны!
То есть, вместо того, чтобы предоставлять людям готовые карты, правильным было бы поощрять людей к самостоятельным структурирующим действиям: работая с сайтом, каждый посетитель вынужден будет строить (или подстраивать) собственные карты!

5. Используя такие индивидуальные ‘системы вспоминания’ люди сколняются к многоходовым комбинациям доступа. То есть, в сайтовской навигационной системе общепринято: кликнув по пункту, сразу переместиться к нужной странице (или фрагменту). А в индивидуальных ‘вспоминательных’ картах люди предпочитают добираться к целевой информации в несколько кликов (~до десяти шагов).

4X_Pro

Основатель проекта

Всего сообщений: 401
Зарегистрирован: 22 сент. 2014 г., 18:56
Откуда: Москва, Перово
Рейтинг пользователя: 15

1

9 августа 2015 г. в 15:46#28

По поводу древовидности: попробуйте, кстати, CMS Drupal или MODX, там вроде можно сделать что-то подобное.

Критикуя — предлагай, предлагая — обосновывай!
4xpro.ru — мой личный сайт-мультиблог на Intellect Board.

_1_

Сомнительный тип

Всего сообщений: 346
Зарегистрирован: 14 окт. 2014 г., 09:11
Рейтинг пользователя: 17
Штрафных баллов: 1

0

29 июля 2016 г. в 04:08. Редактировалось 6 раз, последний — 1 августа 2016 г. в 11:21#29

или в board-кодах:

├── _
└── &
├── |
│ └── 12
│ ├── -10
│ └── 13
│ └── 14
├── _
│ └── 3
│ └── -10
├── o
│ └── |
│ └── +5
│ ├── +8
│ │ ├── 5+
│ │ └── 9
│ ├── +4
│ │ └── 7
│ │ ├── 4+
│ │ └── -10
│ └── 2
│ ├── 5+
│ └── 8+
└── 6
└── 11
└── -10

Прикрепленные файлы:

/DinaTree.png (1459 байтов)
/ActiveX TreeView v.6.png (1141 байт)
/Схема связей.png (8933 байта)
/Принцип построения интервальных деревьев.png (17 Кб)
/html-TreeView .png (6967 байтов)

_1_

Сомнительный тип

Всего сообщений: 346
Зарегистрирован: 14 окт. 2014 г., 09:11
Рейтинг пользователя: 17
Штрафных баллов: 1

0

29 июля 2016 г. в 14:00. Редактировалось 2 раза, последний — 29 июля 2016 г. в 14:22#30

Объект1	Объект2
5 7 5 2 8 4 2 5 8 7 3 11 12 6 12 13	2 3 4 4 5 5 7 8 8 9 10 10 10 10 11 13 14

Обычный шрифт

Моноширинный шрифт или [pre]└── [pre]

├── _
└── &
    ├── |
    │   └── 12
    │       ├── -10
    │       └── 13
    │           └── 14
    ├── _
    │   └── 3
    │       └── -10
    ├── o
    │   └── |
    │       └── +5
    │           ├── +8
    │           │   ├── 5+
    │           │   └── 9
    │           ├── +4
    │           │   └── 7
    │           │       ├── 4+
    │           │       └── -10
    │           └── 2
    │               ├── 5+
    │               └── 8+
    └── 6
        └── 11
            └── -10

Ваше общее мнение о применении деревьев
Перспективно	1
Не понятно	0
Альтернативное мнение (в сообщении)	0