http://gigalit.info - Мои контакты
 

Выношу на рассмотрение профессоров свой проект «Мои контакты» http://gigalit.info
Он полностью построен по ajax-технологии. Это не похоже на обычный веб-сайт, т.к. это веб-приложение. Своей задачей я ставил создать прежде всего полноценную таблицу, похожую на MS Excel. Необходимо было сделать то, что не позволяет стандартный html-тег <table>. Смело могу утверждать, что из конкурентов в этом вопросе нашел пока только три продукта от компаний Google, Microsoft и малоизвестной TeamLab (http://www.teamlab.com).

Также хочу заострить внимание на двух концептуально важных моментах.

1. В электронных таблицах MS Excel нельзя создать прямо в таблице папки. Некое подобие папок можно делать, создавая разные (новые) листы. Но в листе нельзя создать другой лист, а в нём ещё другой и т.д. На gigalit.info можно прямо в таблице создавать вложенные папки, в них подпапки и т.д.

2. В фаловом менеджере Windows («Проводник») можно создавать папки с различным уровнем вложенности. Но если вы скопируете файл из одной папки в другую, а потом отредактируете первый файл, то второй изменится? –Нет. На gigalit.info есть функция дублирования записей, что не есть копирование. Одна и та же запись может быть размещена в разных папках (в разных базах данных) и изменение содержимого в одной папке приводит к автоматическому изменению в других папках.
Таким образом осуществилась моя мечта – как бы фунциональное объединение электронных таблиц и файлового менеджера, чего мне всегда не хватало в Windows.

Цель проекта – учёт контактов с людьми и взаимоотношений с ними. В некотором роде это персональная электронная web-книжка. Это как бы часть CRM. Это хранение номеров телефонов своих друзей, родственников, клиентов и т.д. Потеря (кража, поломка) мобильного телефона приводила в уныние многих людей (меня в частности), т.к. невозвратимая потеря контактов стоит иногда нескольких месяцев восстановления.

В системе всё ещё есть некоторые «косметические» глюки, но в целом вроде бы работает стабильно. Прошу вас сказать своё мнение, рад буду услышать все замечания.

P.S. На всякий случай сообщу, что регистрация доступна только украинцам. Это никакая не рассовая дискриминация, не шовинизм, расизм и т.п. Просто так сложилось исторически… :)

Почему? Считаешь такой вариант подачи наилучшим?

хе-хе

Понятие "наилучший" несколько относительное. На все случаи жизни всем не угодишь. Но моё мнение основывается на мнении нескольких сотен сотрудников, которых мне приходилось автоматизировать. Поэтому моё мнение не совсем моё, а скорее коллективное.
Если говорить конкретно о моём мнении, то сейчас сделаю вопиющее заявление. Я считаю, что html-тег <table> - это тупиковое направление в развитии веба!

Все веб-программисты так или иначе использовали <table><tr><td> в верстке дизайна, либо при отображении структуризированных данных (товары, люди, предметы…). Да, бесспорно в начале развития html это было круто. Особенно возможность центрирования по вертикали ;) Но как только начинаешь работать с более-менее серьёзными базами данных, то кажется, что веб-браузер для этого совсем не приспособлен. Точнее, html. Ещё точнее <table>.

Попробуйте, например, загрузить 3-5 тысяч записей, как поведет себя браузер? Или попробуйте выделить в таблице прямоуголную область? Именно прямоугольную размером, например, 3х4 ячейки, а не от левого края таблицы до правого.
Вы часто видели на сайтах таблицы с возможностью их редактирования? Предположим да. А часто ли вам приходилось вводить/редактировать данные в них? Практически на всех сайтах одна и таже «классика»: в каждой строчке таблицы есть надпись «редактировать», «удалить», «проиграть» и т.п. что есть уже явно избыточная информация. Что происходит далее при нажатии на «редактировать»? -Вызывается карточка ввода с двумя, или двумя сотнями полями… причём она модальная. Вы или вводите, или не вводите, сохраняете, или отменяете. Пока вы это не сделаете – в свою таблицу не попадёте!

Даже в ajax-системах на открытие/закрытие карточки уходит некоторое время, которое за рабочий день выливается в солидную потерю времени. Я уже молчу про «мигание» туда-сюда этих карточек при каждом новом вводе/редактировании. В результате после 30-го вызова карточки начинаешь сам дёргаться. А как же всем хотелось бы вводить ну прямо в ячеечку таблицы! Ну, короче, как в «эксэле».

Следующее заявление. Долой все модальные окна и обязательные поля к заполнению! Все эти вещи придумали программисты для облегчения своей жизни, а не жизни пользователя! Вы скажете, как же можно без модальных и без обязательных…? Ведь тем самым контролируется безошибочный ввод данных, целостность базы данных и т.д. и т.п. Поверьте – можно. И пользователь будет вам благодарен.

Учитывая это я сделал http://gigalit.info Причём обратите внимание, там в нижней части экрана всё же есть карточка ввода для отдельных многострочных полей.
Надеюсь, я ответил на Ваш вопрос, хотя мне не совсем было ясно, какой свой альтернативный «вариант подачи» имели ввиду Вы.

Этот пост какая-то шутка?

-нет. а если не секрет, что так рассмешило?

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

Вы несколько утрируете.
Мне вспомнилась фраза
Чего вам так тэг table не угодил?

da_ff, зато аргументированно утрирует)

Ну и в плане вёрстки, кстати... От него же отказываются в последнее время почти все.

Если и утрирую, то самую малость. А Вы мне можете аргументированно возразить, если у Вас есть время, конечно.
И что Вам более НЕ понравилось? Первое, или второе?

Надеюсь, Вы не будете оспаривать, что HTML5 как таковой, скоро задавит HTML4- и в конечном итоге все перейдут на использование canvas? И произойдёт это достаточно быстро, не смотря на то, что официальная дата "открытия" HTML5 обозначена как 2020 год. По-моему это естественное эволюционное движение.

Лично я прежде чем написать сюда этот текст провел не один час в наблюдении за действиями пользователей, сидящих у компьютеров. В качестве смешного/грустного примера приведу типичный случай: когда пользователь вводит в поле своё имя и не вводит обязательное поле email, а затем в ответ получает красное сообщение "Вы должны ввести то-то...!" - знаете как он реагирует? "Сам дурак!" - отвечает пользователь.
Кто-то при этом одушевляет программу... и не терпит, чтобы она учила его как жить, а кто-то видит за программой (или веб-скриптом) некоего живого программиста...

trikadin,
Какой смысл отказываться от тэга table, назначение которого представлять табличные данные ввиде таблицы для представления табличных данных?
То же самое касается модальных окон, это средство представления пользовательского интерфейса, которое предполагает определеннные паттерны поведения пользователя, другое дело, что его суют не к месту.
А сценарий регистрации/авторизации без обязательных полей?
- Здравствуй, гость! Мы тебя зарегистрировали, правда ты не указал логин, но мы его сгенерировали сами, да и пароль ты тоже не указал, но ничего, его мы тоже сгенерировали автоматически. Почту ты тоже не дал свою, поэтому мы их никуда не выслали, но будь уверен, пользователя мы для тебя создали, можешь воспользоваться формой авторизации для входа!

Маэстро,
При чем тут вообще это? Как это связано с тэгом table?
А канва к чему упомянута? Вы собрались всю страницу на ней отрисовывать?

А что, я случайно это предложил? Вот незадача...

По-моему, я лишь заметил, что смысл в словах Маэстро определённо есть.

Если человек хочет зарегистрироваться, он всё это введёт.

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

trikadin,
А что, я случайно сказал, что это предложили вы? Вот незадача...

Если поля не обязательны для заполнения, то может сложиться ситуация, что их незаполнят, не?

спасибо за оценку. к сожалению, сегодня мне уже сообщили, что на АйПаде это не работает. Точнее работает, но т.к. там "специфическая мышка" (или её как бы нет), то многие действия недоступны. Так что есть новый фронт работ... после парсинга слова "iPad" в Mozilla/5.0 (iPad; U; CPU OS 4_3_5 like Mac OS X; en) AppleWebKit/533.17.9 (KHTML, like Gecko)...

В общем-то описанный сервис построен на движке DocFlow, запускаемом отсюда: http://gigalit.info/docflow
И движок этот - универсальный механизм для построения корпоративных баз данных с многотысячными таблицами. Это и учёт клиентов, и контрагентов, и товаров/услуг, а в идеале CRM и веб-бухгалтерия. К сожалению, пока открыть его для общего доступа я не могу.

Еще после двойного клика в клетку появляется инпут, в нем не получается установить курсор кликом, это в хроме 15.

в самом первом своём сообщении я написал, что тэг table хоть и предназначен для отображения табличных данных, но это как бы "для чайников" (прошу никого не обижаться). Для работы с большими базами данных, для работы с таблицей всего в 1000 строк, у которой 100 столбцов Вы его использовать не сможете. А если сможете, то пользователь этой таблицы будет вспоминать Вас до конца жизни...

Ребята, я обязуюсь больше не приводить вот таких крайних примеров. Прошу и вас тоже. Потому как это "вырожденная ситуация" и, как всегда найдётся исключение из общего правила. Я только хотел подчеркнуть, что бывают карточки, в которых море обязательных полей, без заполнения которых дальше не сдвинешься с места!
Приведу ещё примеры по результатам недавнего тестирования одной CRM:
1. при заполнении карточки отправки письма скрипт неумолимо требовал заполнения поля "Тема письма" и ни в какую не пускал дальше! - а не хочу я писать тему письма! я не прав?

2. При заполнении анкеты на иностранном сайте от меня требовали обязательно ввести какой-то ZIP-код! А не знаю я шо это такое! и знать не хочу.

3. При заполнении таблицы моих контактов (ну, например, сотрудников) скрипт требовал обязательного заполнения И имени И фамилии человека. А не знаю/не помню я имён или фамилий их всех! У меня около 5000 контактов. Дай бог хоть визуально их помнить!

а теперь скажите по этим трём примерам - разработчик скриптов был прав?

да, спасибо, я знаю про это. это то, что я назвал в начале "косметическими глюками". это в плане доработок.
лично меня больше раздражает "синяя рамка" в Опере. кстати, этот вопрос уже обсуждался на форуме - ответа нет. но я кажется уже нашёл способ устранения. но об этом позже.

Если это предложил не я, почему вы спрашиваете (у меня), какой смысл от чего-то там отказываться?) Автор мнения вон ответил уже...

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

И как это понимать?

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

Это был вопрос адресованный в пустоту скорее, чем адресованный кому-либо.

Маэстро,
какая синяя рамка?

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

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

Понимать это надо следующим образом. Мне приходится автоматизировать корпоративные предприятия. И всё это сейчас перебирается в веб. Для примера скажу, что в таблице автомобильных перевозок 70 полей, а в таблице контейнерных перевозок 128 полей (это не я придумал, это бюрократия в стране такая). И по несколько десятков тысяч записей в них. И доступ к этим таблицам должен быть отовсюду, где есть интернет.

Так и проверка не будет на это ругаться, в чем же проблема?

Маэстро,
Вы полагаете это достаточным аргументом для ввода запрета на использования тэга table?

-вот эта:
http://javascript.ru/forum/css-html-...ego-fokus.html

Я полагаю это не запретом, а невозможностью использования тега table. Запретить Вам никто не сможет. Только как я уже сказал, пользователи будут "вспоминать" Вас дооолго. Точнее, они не захотят этим пользоваться, если конечно у них есть альтернатива.

Маэстро,
Можно табиндекс задать не диву, а инпуту, который встанет перед этим дивом (его абсолютно спозиционировать и убрать за границу экрана). И уже при переходах реагировать на события focus blur этого инпута.

Маэстро,
Почему вы использование таблицы сводите к этому частному случаю?

-да тут наши мысли совпали :)

А смысл тогда в ней?)

trikadin,
Чтобы плохой человек не засрал нам базу левыми значениями.

Я рад что пошла дискуссия, но всё же позволю себе ограничить зону разговора. Почему-то все "прицепились" к третьему пункту - обязательным полям ввода. Хотя я хотел привлечь внимание специалистов к первому.
Об обязательных полях скажу только последнее. С моей стороны речь идёт не о регистрации на сайте/в базе/в системе с вводом логина и пароля. Тут спору нет. Речь идет о повседневной рутинной работе с таблицами и карточками ввода в которых я рекомендую отказаться от модальности и обязательных полей.

А обсудить я просил бы вас механизм, заменяющий <table>. Скорее это даже то, что называется Grid. Или теперь уже WebGrid.
Скажу честно, в начале проекта я тоже использовал <table><tr><td> ... Но потом увидел, что в броузере при приличной нагрузке это всё умирает.
Поэтому я обратился к нашим "веб-учителям". Кратко приведу результаты:
1. Гугл. Его документы http://docs.google.com
Их таблица по-умолчанию показывает 100 строк и её расширение производится квантованно по 20 строк по нажатию спец. кнопки.

2. Майкрософт. Их типа Microsoft Office Online. http://live.com
Их таблица хотя и позволяет скроллировать вниз типа до бесконечности, но в их же родном IE это торрмозит ужасно! (в Google Chrome работает побыстрее)

3. TeamLab. http://www.teamlab.com
Их таблица при скроллировании вниз вываливает на экран транспарант "загрузка", затеняет серым всё остальное и блокирует работу программы на несколько секунд, пока грузятся абсолютно ПУСТЫЕ строки. И это при каждом перемещении к следующей пачке пустых строк.
Да, забыл сказать, что в IE они просто сразу отказались работать.

Когда я посмотрел внутренности этих продуктов, то понял, что эти наши учителя, гиганты мысли наступили на те же грабли, что и я. Все они использовали teg <table>.
После этого я пошел по другому пути.
Однажды вспомнил слова Хопперфильда. Несколько переиначивая их на свой лад произнесу: Я не создаю на экране таблицу. Я создаю иллюзию таблицы!
Результат предоставляю на Ваш суд.

Простите, а вот здесь я даже не знаю что Вам ответить... потому что частный случай... гм... Но всё же попытаюсь.
По-моему это всё равно что считать MS Excel частным случаем. Но лично я знаю массу людей, которые ведут совсем нечастный учет в электронных таблицах Эксель. И теперь хотят это в вэбе. И сплошь и рядом и всё больше и больше. По крайней мере так в Киеве.
А что Вы называете НЕ частным (а общим) случаем? Использование <table> для вёрстки картинок фотоальбома? Или отображения списка товаров из 30 позиций?

Я не предлагал "своих" вариантов, но могу попробовать. Твой интерфейс, как ни странно, напоминает десктопный, а если точнее - MS Exel. Я понимаю, что это сделано намеренно, но Web != Desktop, что отражается и в интерфейсах в частности. Это что касается визуального восприятия. Что касается функционального, то для вашей задачи больше подошел бы не-табличный вариант. Если бы ты писал свой phpMyAdmin, я бы тебе огромное спасибо за это сказал, но контакты - немного не тот случай.
Например, я указал Home page, профиль в соц. сети и телефон в каком-либо контакте. При просмотре мне было бы удобнее кликом перейти на указанные урлы, позвонить на телефон со skype, посмотреть адрес на карте. Так же мне было бы намного удобнее открыть контакты одного человека на отдельной странице или popup-е, что бы другие не мешали.
Список всех контактов неплохо было бы представить... гм... списком.

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

Так я не говорю про проверку на какие-нибудь sql-инъекции или просто левые фигни.

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

Классная вещь полезная и дизайн легкий и удобный.
Сколько времени на такой проеке ушло???

Маэстро, я тут знаете что подумал? У вашего примера есть одна сокрушительная проблема - он абсолютно не поддерживает кнопки. Стрелки, табуляция, home/end... Не работает. :(

Бухгалтера негодуют.

И это... Я хочу увидеть таблицу на тысячу строк - вашу версию... Вы меня заинтриговали.

кто Вам сказал? а может давайте смотреть не в прошлое, а всё же в будущее? как расшифровывается html Вы знаете. ключевое слово "текст". когда это изобрели не предполагалось, что даже картинки будут отображаться! а вы думаете что стандартизаторы думали о многотысячных таблицах? -сомневаюсь. я ещё помню, когда скорость канала была 1200 бод. в свою очередь приведу такой аргумент: компания Гугл разработала свою веб-ОС. по сути это есть не что иное как один интернет-браузер. и он же десктоп. и вся большая часть этой операционки грузится по требованию пользователя из инета частями. и это внедряется по всей планете в нетбуках...

да, phpMyAdmin - это одна из причин, которая побудила меня к разработке. а ещё возьмём для примера (ткнём) в пять первых попавшихся инет-магазинов. что видим? порционный список товаров на базе <table>, причем в каждой товарной ячейке обязательное наличие кнопки "в корзину"/купить/заказать/оплатить/просмотреть/увеличить/ответить и т.д. и т.п. -это юзабельно? и это лучше десктопа, когда для каждой записи существует только одна кнопка, а операцию она производит только с той записью на которой стоит курсор. ну и соответственно, чтобы посмотреть ещё порцию товара надо нажать ещё кнопочку - перегрузится вся страница сайта и т.д....

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

вот именно. пересматривать интерфейс. про убиение тега я ничего не говорил. я говорил про его НЕиспользование (для целей, обсуждаемых в этой теме). в конце концов, всегда будут начинающие программисты, которые начнут с alert('Hello World') и с тега table. тут не спорю.