Онбординг в мобильных приложениях: что можно и нельзя | AppTractor

У нас также есть некоторые приложения, которые все еще активно развиваются и используются явно , где пользовательский интерфейс выглядит почти как в Windows 3. Они ужасные, серые, неуклюжие, и наш единственный настоящий дизайнер всегда пытается получить разрешение довести его до нынешнего центра, но самый большой клиент активно отказывается от этого.

Они говорят, что все в порядке, люди знают, как им пользоваться, и это работает даже на самых старых компьютерах. Я считаю, что WPF обладает удивительным потенциалом в качестве инструмента для создания пользовательских интерфейсов более творческих и более подходящих для фактических данных, которые отображаются, НО Просто простой способ использования WPF не заставит больших пользовательских интерфейсов появиться из ниоткуда.

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

Кроме того, вы можете использовать текстовые поля и использовать переопределение Enter as Tab, чтобы легко и быстро перемещаться по ним. Эта часть причины для запроса вопроса - с помощью таких новых инструментов, как WPF, которые предоставляют новые, более сложные и в то же время более простые для пользователя интерфейсы, которые нам, возможно, потребуется адаптировать к новым способам делать вещи.

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

Если что-то зависло во время ввода или сеть пропала — теряются введенные данные, отправить по сети нельзя, а локально сохранить негде локальный сторидж и Web SQL пока не везде доступны. На всем печать идеологии REST, полное отсутствие состояния. Отсутствие средств Разные браузеры, а них особенности, требуется дополнительное тестирование и отладка. Верстку иногда делаем отдельно для IE реже возникают версии для других браузеров , но это при очень хитрой разметке. Что унаследовано от оконных интерфейсов?

Отвлекающие факторы добавились в большом количестве. Принципы ООП унаследованы, но их же нужно переосмыслить для веба. Переосмыслили ООП и паттерны лишь единицы, другие взяли бездумно. А специфика веба в том, что серверные приложения живут доли секунды, при этом они стейтлесс и пользовательский интерфейс при рефреше страниц не сохраняет ни свое состояние значения в формах, переменные, объекты. Тенденции развития веб-интерфейсов С учетом всех проблем и новых возможностей, сформировался мейнстрим, активно поддерживаемой всей передовой частью сети, а именно: Минимализм и простота — и сайты и приложения становятся сложнее внутри и проще снаружи, этому нас учит все передовые игроки и больше всего — Гугл, мы стараемся.

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

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

Полноэкранный лэйаут — не во всем вебе, а именно в веб-приложениях, есть тенденция к максимальному заполнению экрана с перераспределением размеров и границ между элементами интерфейса в зависимости от разрешения. Упрощенный мобильны интерфейс — с распространением мобильных устройств, снабженных нормальными браузерами, появилась необходимость отдельно разрабатывать интерфейсы для малых разрешений и с поддержкой тачскрина. Поддержка стандартов — входит в моду решать задачи с применением новых возможностей и спецификаций но с фэлбэком к старым технологиям, например звук и видео уже хочется проигрывать через html5, но флэш нас страхует, или при отсутствии Local Storage мы храним состояние на сервере, просто будет больше запросов, визуализация так же упрощается при показе в старом браузере, но приложение продолжает работать, а выглядит проще.

Рассмотрим подробнее визуальные контролы и решения Зона прокрутки — для сайтов типична прокрутка полноэкранная, когда весь контент с элементами управления прокручивается разом одним трекбаром справа или слева для right-to-left.

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

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

Гриды — таблицы и более сложные композитные гриды. С ними есть ряд проблем: Очень плохо смотрится, если таблица имеет отдельный от всей страницы скроллинг, то есть, получается, что у нас скролинг в скролинге. Это актуально и для textarea. Дублирование кнопок действия для каждой строки грида — это общая проблема всех веб-интерфейсов старого поколения — в глазах рябит. Уезжают кнопки с действиями: Получается, что мы прокрутили грид на середину и хотим что-то сделать со строками в середине, а для доступа к тулбару нужно крутить экран вниз или вверх как это и в редакторе статей Хабра.

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

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

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

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

Этот атавизм от оконных приложений в вебе не имеет права на жизнь. Тулбар — вместо свалки кнопочек и комбо-боксов тулбары постепенно становятся адаптивными, контекстными, мы видим только те функции, которые можно применить в текущем состоянии приложения или к элементу, находящемуся в фокусе.

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

Эта статья лишь обзорная, если кому-то интересно, то мы можем в свободное время публиковать кратенько о своих наработках, например, вот недавно взялись за доработку jQuery UI нескольких кривых контролов и недостающих.

Так же, будем благодарны за Ваше мнение по поводу изложенного подхода, ссылки на хорошие контролы, дэмки, скриншоты и приложения, которые, по Вашему мнению заслуживают внимания. А иллюстрации попробую все же собрать в ближайшие дни. Как некрасиво делать уезжающие тулбары на примере GMail Рис 2: Как красиво делать лэйаут, тулбары и прокрутку на примере GoogleDocs Рис 3: Несколько вариантов дефолтных комбобоксов Рис 4: Виртуальный скроллинг и пейджинг — кому что?

Скроллинг внутри скроллинга — плохо Рис 6: А грид растянутый на всю доступную зону так, чтобы прокрутка была одна — хорошо. Ой, у вас баннер убежал!

Leningrad Media Москва Возможна удаленная работа. Castor Digital Санкт-Петербург Возможна удаленная работа. Проектировщик интерфейсов Junior Level. Все вакансии Разместить вакансию. Сори, первые несколько минут статья опубликовалась в несколько порванном формате, без части абзацев, из-за форматирования.

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

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

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

При использовании фильтров в разы сокращается расход времени на то чтобы убедиться в отсутствии в таблице какой-либо информации. Вы человек и вам так удобнее: Дайте догадаюсь — наверное вам лень отрывать руки от клавиатуры, чтобы кликать сортировку и скроллить мышью на скроллбаре? Фильтры можно подсказывать, а не набирать руками, я давал ссылку с примером, который мне понравился Alibaba. Сортировка — согласен, она тут очень даже причем. Может быть реальный случай, когда в выборке из записей одним кликом по заголовку с целью сортировки мы сразу получаем несколько интересующих нас записей в зоне видимости записей.

Но пейджинг то тут не особо нужен. Лишь бы софт не подтормаживал. Я тоже как-то анализировал логи своего софта, в котором достаточно много работы с большими справочниками. Так вот фильтрами пользуются очень редко. Делать пэйджинг в табличноориентированном софте — значит профакапить часть рынка конкуррентам с более привычным интерфейсом вообще пэйджинг был придуман для экономии ресурсов веб-серверов, но никак не для повышения юзабилити.

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

По виртуальному скролу пример: В общем, REST — это не наш путь, для пользовательских интерфейсов и приложений баз данных состояние нужно как воздух А когда состояние интерфейса хранится локально, а данные для отображения в нём на сервере, стэйтлесс? Ну, максимум, Not Modified? Мне кажется, HTML рано или поздно отомрет для интерактивных приложений: Постоянно что-то разъезжается, слетает выравнивание и маржины, тормозит на ие7, 8 и айпаде. Тестирование нетривиально и требует виртуальных машин, чтобы держать разные версии браузеров.

Предсказуемость обеспечивает только flex, sl и java. На них и нужно ориентироваться. При этом имеется зоопарк броузеров, каждая версия со своим мнением по рендерингу и, извините, весьма небыстрый js. Имеем то, что имеем: Имеем то, что веб-приложения доступны с оговорками на любых, в том числе экзотических платформах, лишь бы был подходящий браузер: Тогда как на первый план должна выходить общая проблема, которую решает бизнес-приложение.

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

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

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

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

Дизайнеры приложений часто забывают, что у людей есть ограничения по скорости и вниманию. Тестирование приложения в офисе с хорошим Wi-Fi и концентрацией не похоже на условия реального мира. Мобильные сервисы не только соревнуются с другими функциями смартфона, но и с отвлекающими факторами из оффлайн-мира.

Например, простой интерфейс Voxer предоставляет смартфону новые функции при помощи простой кнопки для разговоров внутри приложения. Оно обладает ограниченными функциями, но концентрируется на одной ключевой задаче — отправке коротких аудиосообщений. У пользователей должна быть возможность быстро заходить в сервис и быстро выходить из него. Приложение должно быть посредником в простой функции, а не в богатом опыте, и разработчикам стоит сокращать количество шагов и вариантов, типичных для перегруженных и редко используемых продуктов.

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

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

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

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

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

Истории успеха завтрашнего дня будут связаны не со сложными приложениями, которые будут пытаться решить все запросы и проблемы пользователей. Вместо этого успех придет к разработчикам, которые будут создавать умные и простые решения. Тепловая карта с помощью цвета показывает, какими областями пользуются больше всего. Однажды в Programmer Humor сделали тепловую карту клавиатуры разработчика…. Мы с вниманием и пониманием пишем на заказ статьи про разработку и технологии:. Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Длинные предварительные туториалы и пошаговые руководства Часто первое, что видят пользователи при запуске приложения, это обучающие экраны, листающиеся свайпами. С таким длинным свайп обучением есть несколько проблем: Обучение создает барьер между новыми пользователями и приложением. Люди хотят начать работать с ним в момент запуска, а вместо этого их заставляют листать семь или восемь экранов. Таким образом, многие пропустят обучение, так как они не хотят учиться, они хотят использовать приложение.

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

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

Мощные пустые состояния Вы должны рассмотреть пустые страницы как часть единого онбординга для новых клиентов, потому что они, на самом деле, могут обеспечить активное взаимодействие с пользователем. Заключение Прежде, чем приняться за разработку своего онбординга, остановитесь и задумайтесь о том, какой должен быть опыт пользователя. Для связи с нами вы можете использовать info apptractor.

UX Вовлечение пользователей Дизайн для разработчиков статья. You must be logged in to post a comment Login Leave a Reply Отменить ответ Для отправки комментария вам необходимо авторизоваться. Во время вебинара обсудили следующие вопросы: Как увеличить долгосрочное удержание и как будут отличаться методы для разных жанров и типов игр?

Мобильные бизнес-приложение — это в первую очередь пользовательский интерфейс для взаимодействия с внешним сервисом. При разработке технической документации на проект это стоит обязательно учитывать, так как интерфейс нагляден и на его основе проще проводить разделение проекта на разделы. Да и сама модель предметной области очень хорошо описывается интерфейсом — в ней необходимо учитывать в основном те данные (и их производные), которые вводятся пользователем, отображаются на экране и управляют его поведением. Бизнес-сценарии также напрямую завязаны на поведение пользовательского интерфейса. Контекст интерфейса в пользовательском приложении существуют достаточно долго, чтобы развернуть объектную модель, машину состояний, служебные структуры данных для ускорения процессов (кеш, индексы или ассоциативные массивы, деревья и т.д.). Это же справедливо и на счет сервера, если приложение клиент-серверное.  >>Если в выборке для бизнес-приложения более записей с цифрами и подробностями, то человек не сможет их вычитать все равно. Много раз слышал это мнение, тем не менее уверился в обратном. Типовой кейс таков: огромная таблица, хоть на записей. Дизайн интерфейсов мобильных приложений не предоставляет широкое поле для маневров. В условиях ограниченного пространства и низкой концентрации внимания UI-дизайн должен быть предельно функциональным и буквально работать со скоростью мысли. Идеальный вариант, когда интерфейс представляется достаточно простым для новых пользователей. В этой статье будут описаны проверенные способы работы с интерфейсами. 1. Правила интерактивного дизайна применимы всегда. Тот факт, что экран мобильного устройства небольшой, еще не означает, что по отношению к нему нельзя применить правила интерактивного дизайна.

«Совершенный Ajax» – новый подход к построению настоящих клиент-серверных web-приложений / Хабр

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

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

Значит, основное предназначение веб-приложений состоит в функциональном обеспечении решения задач пользователей по установленным правилами работы компаний. Применение веб-приложений подразумевает более тесное взаимодействие с ресурсом и знание системы пользователем. Пользователи не просто случайно "натыкаются" на приложения, к которым больше уже не возвращаются после одного сеанса работы. Они применяют их в качестве средств решения важных задач в их повседневной деятельности.

Наконец, они не могут взять и запросто отказаться от использования одних приложений, перейдя на другие, более удобные, как в случае с веб-сайтами. Различные виды веб-приложений Бизнес-приложения бывают разными, - от сервисов выписки накладных для фрилансеров до систем управления контентом, виртуальных делопроизводителей, банковских и финансовых систем.

Приложения можно разделить на открытые и закрытые. Открытые системы - онлайн-приложения, легко доступные любому владельцу аккаунта. Пользователи запускают такие приложения прямо в сети, а аккаунт заводят бесплатно или за определённую сумму. Закрытые системы или производственные приложения , как правило, недоступны посторонним пользователям, не работающим на компанию-владельца данной системы, и могут считаться "оффлайн"-приложениями несмотря на то, что функциональность многих их них - через сервисы или специализированные интерфейсы - позволяет применять их и деловым партнёрам фирмы.

Такие системы обычно устанавливаются локально во внутренней сети компании и доступны только её сотрудникам. Не знаю, кому принадлежит авторство термина "weblication" "вебложение" , но он мне очень нравится, поскольку, в целом, отражает суть веб-приложения, как такового. Однако, это не значит, что веб-приложение представляет собой гибрид веб-сайта и приложения. Прежде всего, выясните состав вашей пользовательской аудитории Вы, наверное, тысячу раз это слышали, и не случайно.

Удачным пользовательский интерфейс получается тогда, когда он разрабатывается для людей и решения их задач. Это ключевое условие, и очень многие разработчики не справляются с созданием практичных ресурсов. Как сказал Стив Круг Steve Krug , "Разработчиков тянет всё усложнять; им же в радость вникать в суть дела".

Смешивание бизнес-логики и пользовательского интерфейса; Сложно реализовать несколько пользовательских интерфейсов; Сторонни программы не могут обращаться к серверу если не написан специальный api ; Большая часть нагрузки по обработке интерфейса ложится на сервер. Впрочем, мы знаем в истории пример подобной архитектуры. В годы были распространены мейнфреймы. Мейнфрейм — такой огромный железный сундук сервер , к которому подключались рабочие станции клиенты.

Причем, рабочая станция представляла собой просто монитор с клавиатурой. И любые действия клиента на рабочей станции обрабатывалось на сервере, порой даже такие как обработка нажатия на клавишу и обрисовка экрана [2]. Ну, мы знаем, насколько популярны мейнфреймы сегодня… Конечно, в современных web-приложениях часть интерфейсной логики реализуется на клиенте с помощью JavaScript. Часть данных загружается с помощью Ajax и визуализируется именно на клиенте. Но, тем не менее, многие действия связанные с пользовательским интерфейсом, по-прежнему, выполняются на сервере.

Использование Ajax сейчас во многом даже усугубляет ситуацию, так как приводит к разбрасыванию реализации интерфейса между серверным и клиентским кодом. Реализует только бизнес-логику приложения и не генерирует ни строчки HTML-кода; Взаимодействует с клиентом посредством web-служб: Взаимодействует с web-сервером посредством объектно-ориентированной библиотеки-обертки над web службами; Используется исключительно семантическая верстка.

Элементы управления вкладки, меню, деревья описываются высокоуровневыми HTML-конструкциями. Библиотека контролов придает HTML-конструкциям внешний вид и функциональность соответствующего элемента управления, просто навешивая нужные стили и обработчики событий, не меняя при этом HTML-код элемента. Любой сторонний разработчик может реализовать свою версию пользовательского интерфейса, причем не только на HTML, но и на Flash, Windows, Mac и т.

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

Архитектура сервера СУБД — хранит данные. Прототипное объектно-ориентированное ядро бизнес-логики — реализует объект- ную модель и функциональность приложения. ORM — связывает базу данных с прототипным ядром бизнес логики. Web-сервер — открывает функции программы для внешнего мира посредством web-служб. СУБД Все данные хранятся в обычной реляционной базе данных. Это делает базу данных независимой от той или иной СУБД. Связь базы данных с объектным ядром бизнес-логики приложения осуществляется через прототипно-ориентированную ORM.

Объектное ядро бизнес-логики Вся объектная модель приложения и его бизнес-логика заключена в прототипно-ориентированном ядре. Ядро написано на серверном JavaScript, на базе платформы Mozilla Rhino.

Несмотря на недооцененность многими разработчиками, JavaScript — удивительно мощный, гибкий и красивый язык, превосходящий в ряде случаев по гибкости и функциональным возможностям таких монстров, как Java или C. И мы используем по максимуму его возможности, такие как прототипно-ориентированное ООП, объекты-как-хеши, функциональное программирование, замыкания и т.

Также, прототипно-ориентированная парадигма JavaScript позволяет гораздо более гибко работать с базой данных через ORM. Вообще, серверный JavaScript на основе Mozilla Rhino — это отдельная большая тема, и я постараюсь написать ряд статей по этому вопросу. Она позволяет не просто связывать две модели, но и строить объектные запросы любой сложности. Использование ORM для прототипно-ориентированных языков — это мега круто! Поэтому, применение прототипного похода решает ряд проблем, присущих современным класс-ориентированным ORM см.

Прототипная парадигма ORM позволяет удивительно гибко работать с данными. Ведь, в отличие от классового подхода, где структура объекта жестко задана; при прототипном подходе объект может иметь произвольный набор полей, а также объединять внутри себя и наследовать любые другие объекты. К сожалению, за такую гибкость приходится платить производительностью.

Но мы работаем над этим. Прототипно-ориентированная ORM — также отдельная большая тема, и я постараюсь посвятить ей ряд статей. Web-сервер Web-сервер выполняет только одну-единственную задачу — связывает ядро бизнес-логики с внешним миром посредством web-служб.

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

Например, при наличии соответствующих прав, через web-службы можно осуществить объектный запрос неограниченной сложности и получить произвольную выборку объектов. Клиент Наше приложение может иметь сколько угодно интерфейсных реализаций, разработанных любыми производителями. Здесь я опишу его структуру. Архитектура клиента Интерфейсное ядро — объектно-ориентированная библиотека, реализующая всю клиентскую логику и управляющая интерфейсом клиента.

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

Интерфейсное ядро Интерфейсное ядро — объектно-ориентированная JavaScript-библиотека, управляющая всем клиентским web-интерфейсом: Реализует интерфейсную логику приложения. Взаимодействует с объектной моделью приложения на web-сервере через библиотеку-обертку. Взаимодействует с элементами управления контролами посредством библиотеки контролов. Осуществляет встраивание клиентского интерфейса нашего программы в web-интерфейсы других приложений.

Это дает неограниченные возможности для создания мэшапов. В отличие от обычных мэшап-приложений, таких как GMaps, YouTube и т. Например, благодаря этому, на стороннем сайте можно не только разместить модуль прохождения тестирования, но и модуль редактирования тестов, а также управления правами пользователей. Стили не только позволяют задавать оформление программы, но и полностью контролируют расположение и свойства интерфейсных элементов.

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

Однако, работать с web-службами напрямую неудобно: Поэтому, гораздо удобнее работать через объектно-ориентированную библиотеку-обертку над web-службами. Библиотека обертка позволяет прозрачно работать с серверной объектной моделью приложения. Вместо низкоуровневой работы с web-службами, мы прозрачно работаем с объектной моделью приложения посредством библиотеки-обертки Sintez. Для того, чтобы свою версию интерфейса мог реализовать любой сторонний производитель на любой платформе, мы выпускаем библиотеки-обертки не только для web-интерфейса на JavaScript, но и для других распространенных технологий: Net, Java, Delphi, Flash и др.

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

Для этого, программа на сервере должна исследовать собственную объектную модель, и на ее основе сгенерировать код библиотеки-обертки для основных языков программирования. Пока мы пишем библиотеки-обертки вручную, но, думаю, скоро доберемся и до автоматической генерации. Использование семантической верстки является высокоуровневым программированием; а несемантическая мешанина тегов — низкоуровневым. Элементы управления деревья, меню, вкладки и т.

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

При этом HTML-код элемента не меняется, а на него просто навешивая нужные стили и обработчики событий. Для превращения HTML-конструкции в элемент управления, надо просто вызвать соответствующий JS-объект библиотеки контролов.

Работа с контролом происходит через вызов методов объекта. Дерево описывается не мешаниной тегов, а единой высокоуровневой HTML-кострукцией: Работа с деревом происходит через вызовы методов объекта. Это очень напоминает нынешнюю робкую попытку передать часть интерфейсной логики web-приложения на клиент с помощью Ajax. Ой, у вас баннер убежал!

Все вакансии Разместить вакансию. В принципе, подобные идеи о полном отказе от генерации HTML-кода на сервере в неявном виде витали в воздухе уже давно. Возможно, я прото один из первых сформулировал ее.

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

Лично мне такой подход не нравится, нечего заставлять мой комп выполнять двойную работу — сперва генерировать код, а потом еще и отображать и с ним работать…. Я имел в виду четкое разделение по обязанностям. Кеширование помогает снизить траффик между сервером и клиентом, зачем вообще что-то кешировать в интерфейсе при таком подходе? А как же другая логика, зачем каждый раз генерить сам интерфейс-то? Он же не меняется, а меняются только данные. В вашем случае, при каждом обращении к страницам сайта, этот блок меню будет заного генериться и генериться.

Но зачем такое нужно? Зачем тратить ресурсы на бессмысленную операцию — генерим то, что не меняется. При генерациии на сервере, можно было интерфейс сгенерить единожды, а потом отдавать тока из кеша.

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

Идея, описанная в статье мне, в общем, понравилась. Присоединюсь к этому вопросу — не понятна преследуемая цель. На чем и как реализован сервер — уже становится не важно. А модификации всегда идут легко, если система хорошо спроектирована.

Кстати вполне возможно, что все эти параметры разом: Смотря как вы делали веб-приложения раньше, и какова будет реализация данного подхода. Ну вот делал я приложения на основе, к примеру, GWT.

Это плюс любого ajax приложения вообще, с самого начала раскрутки ajax в инете графики были известны. Плюс подхода — стандартизация, из клиента мы может обращаться к веб-сервису, для примера. Если у вас не новостной проект и вы не отдаете статику [Разработка: Тут все очень субьективно.

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

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

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

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

RIA приложение это не блог или сайт строительной компании. Конечно тут могут быть разные варианты, но, к примеру, кому из разработчиков gmailа приходила в голову мысль о его проблемах с SEO? Непонятно почему сформировать и выплюнуть html-страничку медленнее чем дать компактный ответ в JSON.

Одного порядка должны быть величины, по-моему. При правильной организации приложения кучи инклуда и дерганье кучи кода не должно произойти. Мало того что пришел больший объем информации, так еще эти все элементы браузер должен создать в памяти, а у каждого свой стилевой класс с кучей аттрибутов. Неверно я сформулировал, да. Парсинг HTML на стороне сервера не очень много времени должен занять.

Трафика больше, да, но критично ли это? Если ни хотите мучится с шаблонизатором и HTML, то xsl вам в руки вперед, зачем так все усложнять? Извиняюсь, не внимательно прочитал топик, для веб-приложений действительно интересный подход. Совсем не понял, зачем все это надо в реальности? Может быть, в силу того, что я тут не все понял, я не понимаю зачем все это надо: Идея витает уже очень давно… и первым вы ее сформулировали разве что на Хабре. Гдето годика полтора назад я начинал реализацию похожего по идеологии продукта.

К сожалению, по левым причинам разработку закрыли. Знаете, порадовало сразу, что блог проходит валидацию. Только после этого прочел всю статью. Уж больно она большая: Если бы не прошел валидацию блог, врядли читал всю.

НЛО прилетело и опубликовало эту надпись здесь. Так ведь валидацию данных и проверку доступа на сервере никто не собирается менять, разве нет? Так что реализация не поменяется….

Бизнес-логика не смешивается с пользовательским интерфейсом А что, в Вашем случае на стороне клиента они не смешиваются? На стороне клиента реализуется интерфейсная логика.

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

Статья про Hivext чуточку опередила: Но, еще раз повторю, идеи отказа от генерации HTML-кода на сервере в неявном виде витали в воздухе уже давно.

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

Мне сейчас это кажется более удобным для этих задач. Тем более у Вас вся логика происходит все равно на Вашем сервере. Если бы нужно было некоторое время программе работать оффлайн, то тут Ваша архитектура могла бы выиграть. Это выглядит просто легче в реализации для такой простой задачи. Возможно, что я не врубился в какие-то тонкости.

Интересная статья, правда как-то трудно переосмыслить что весь пользовательский интерфейс генерируется на клиенте. То есть понадобится ли для этого какая-то настройка клиента? Весь клиентский web-интерфейс представляет собой простой набор HTML-страниц. При новом подходе, web-страница сама загружает нужные данные через Ajax, и с помощью JS управляет собственным интерфейсом.

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

Интересно но данные о том как должна выглядеть страница, начальный шаблон страница HTML берутся с того же сервера. Скорее всего для полного понятия чего к кому нужно дождаться следующую публикацию, очень жду.

HTML может придти откуда угодно. Но все равно — для каждой странице существует свое дерево тегов. Если мы хотим вставить небольшой компонент сайта на другой сайт — сделать машап, то нам придется запрашивать с сервера дерево этого маленького компонента. Вот и опять все сводится к тому, что у нас на сервере лежит куча шаблонов под разные компоненты. Да, в них нет стилей.

Но сейчас не пойму насколько это плюс. Если мы запрашиваем компонент с сервера, то скорее всего уже давно известно, что этот компонент будет в итоге списком, а не деревом. Так почему бы сразу не передать команду, что это список, а не выполнять код по инициализации этого списка. Но сама идея интересная…. Ajax-машина хороша для административной зоны сайта, но для страниц где важна поисковая оптимизация это вряд ли подойдет — поисковые роботы не любят javascript.

Для сайтов, Вы совершенно правы, следует использовать традиционный подход. Дай роботу то что он хочет, а сам делай то, что хочешь ты. То есть как сохранять отдельно? Делать копии всех страниц в традиционном виде? Или я не понял чего-то? Только не говорите, что это нерациональное использование места на хостинге.

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

Я убиваться об стену делая нечто, что прокатит и тому и другому, сцуко очень рациональное использование! Это подойдет для простого сайта типа kgdtour. Генерирует все простой алгоритм автоматически, размер кода при этом особо не увеличивается. Знаете, подходы могут быть разные, мне так просто удобнее и нет смысла об этом спорить.

Приведите поисковый запрос по которому находится внутренняя страница сайта. Яваскрипт и его последствия ставится в последнуюю очередь. И обычно без яваскрипта все работает также хорошо как и с ним. Ни для чего больше js не подходит на обычном сайте. Для веб-приложений емейл клиенты, админки ЦМС и т. SEO важно и совсем не нужено, у клиента все крутится быстро и красиво и без лишних затрат. И поняли, что надо использовать специально созданные для этого технологии Flex. Хотя речь в статье идет не о способах реализации, а о архитектуре.

Оно говорит о верном или неверном использовании, скажем, паттернов или приемов по развызыванию компонентов. Мысль о независимости и переносимости бизнес-логики верная.

Но вот между моделью бизнес-логикой и интерфейсами существует как минимум односторонняя связь модель не знает об интерфейсе, о конкретной реализации, но конкретная реализация знает о модели и привязана к ней.

пользовательских интерфейсов, чтобы сделать управление бизнес процессами привычным и Подробнее мобильных Приложениях ELMA >>. 8 апр. г. - Роль открытых интерфейсов в последние годы растет API, начиная с х годов, позволяли разрабатывать приложения для. 22 апр. г. - Бизнес-приложения являются одним из самых массовых типов программного обеспечения; многие из людей проводят бОльшую часть.

Найдено :

Случайные запросы