Что такое веб морда
Веб-интерфейс роутера. Что это? Как войти?
Сегодня заметил, что практически во всех статьях я пишу о том, что необходимо зайти в настройки роутера, или открыть его параметры. Но сама страница с настройками роутера, в которую мы можем зайти через браузер, называется веб-интерфейс. У многих пользователей возникают вопросы связанные с этим. Что такое веб-интерфейс роутера, для чего он нужен, как его открыть и т. д.
На самом деле, все очень просто. Главное понимать, что настройки, панель управления, сайт с настройками, или личный кабинет роутера – это одно и то же и по-правильному называется веб-интерфейс. Грубо говоря, это набор страниц с настройками роутера, в которые мы можем получить доступ через браузер. Выглядит все это как обычный сайт. Только все эти страницы хранятся не в интернете, а в памяти самого роутера.
У каждого роутера есть свой адрес, по которому мы можем получить доступ к веб-интерфейсу. Все что необходимо, это просто подключится к маршрутизатору и в браузере перейти по определенному адресу. Где-то в 90% случаев, открыть веб-интерфейс маршрутизатора можно по IP-адресу 192.168.1.1 (см. как выполнить вход на 192.168.1.1), или 192.168.0.1 (подробнее о том как зайти на 192.168.0.1). Сейчас производители активно начали использовать хостнейм. Это адрес, который выглядит как адрес обычного сайта.
Предлагаю посмотреть, как выглядит веб-интерфейс маршрутизатора ASUS. Его главная страница, с которой мы получаем доступ к карте сети, самым необходимым настройкам и отдельным разделам с разными параметрами. Там можно сделать что угодно: настроить подключение к интернету, установить пароль на Wi-Fi, сменит имя сети, обновить прошивку, отключить или включить разные функции, выполнить перезагрузку устройства и т. д.
Разумеется, что сам веб-интерфейс не одинаковый на всех маршрутизаторах. Внешне он отличается в зависимости от производителя, и даже от версии прошивки. Сами производители дорабатывают настройки своих устройств. Делают интерфейс более простым и современным. Один из самых важных моментов – язык интерфейса. Многие компании делают сейчас мультиязычные веб-интерфейсы. Что очень удобно. Но есть роутеры, у которых настройки на одном языке. И это не всегда русский, или украинский.
Для примера мы подробно рассмотрим процесс входа в веб-интерфейс роутера TP-Link, D-Link и ASUS. А для ZyXEL, Tenda, Netis, Xiaomi, Huawei – оставлю ссылки на подробные инструкции в виде отдельных статей.
Открываем веб-интерфейс роутера TP-Link
На старых моделях маршрутизаторов от TP-Link в настройки можно было зайти по адресу 192.168.1.1. На новых – 192.168.0.1. Но на самих роутерах сейчас указывают адрес tplinkwifi.net (подробнее об этом можете почитать здесь). Просто переворачиваем устройство и смотрим, что там написано на наклейке.
В браузере (стандартный, Хром, Опера и т. д.) переходим по этому адресу и попадаем в веб-интерфейс с настройками. Конечно же устройство, с которого мы выполняем вход, должно быть подключено непосредственно к роутеру. И только к нему.
Пароль/логин – admin/admin. Это заводской, если вы не меняли.
После успешной авторизации появится сам веб-интерфейс.
У TP-Link есть уже новая версия, которая устанавливается на некоторые модели. Более современная и красивая. Выглядит так:
192.168.1.1 – веб-интерфейс маршрутизатора ASUS
У роутеров от компании ASUS все как-то проще. Адрес там всегда 192.168.1.1. Можно использовать еще router.asus.com. В моей практике другие варианты не встречались.
Подключаемся к роутеру и в веб-браузере переходим по адресу 192.168.1.1. Если все привольно сделали, то увидите окно с запросом имени пользователя и пароля. Заводские admin и admin.
Попадаем в веб-интерфейс нашего роутера ASUS. Новая его версия выглядит вот так (на моем RT-N18U) :
На более старых моделях была другая страница с настройками.
У меня такая была на ASUS RT13U. В обоих случая можно выбрать язык панели управления.
192.168.0.1 – веб-интерфейс D-Link
Но в настройки можно без проблем зайти по адресу 192.168.0.1. Заводские данные для авторизации: логин и пароль – admin/admin. Или логин admin, а поле пароль оставляем пустым. Если вы их меняли, то конечно же задаем свои.
Давайте зайдем в web-интерфейс D-Link Dir-615.
Ну и сама страничка:
У вас она может выглядеть совсем иначе. Все зависит от модели и установленной прошивки. Но хотя бы есть русский язык. Это уже хорошо.
Информация по роутерам других производителей
Я не вижу смысла демонстрировать процесс входа в веб-интерфейс на маршрутизаторах всех популярных производителей. Хотя бы по той причине, что я уже писал отдельные инструкции. Где все подробно показано. Шаг за шагом.
Как и обещал в начале статьи, даю ссылки:
Это еще не все. Смотрите раздел «Настройка роутера».
Друзья, все как обычно – свои сообщения и вопросы оставляйте в комментариях. Буду рад пообщаться с вами.
Все вебморды в одной. virtualhost и proxy_pass в nginx для дома.
В этой статье я хотел бы поделиться опытом, как организовать доступ к Web-интерфейсам различных домашних качалок через один единственный проброшеный наружу порт. Делать будем под винду (на Win32 порту nginx), но точно также можно сделать под unix.
Где это может понадобиться? Очень простой пример, состоящий из двух условий:
— У меня дома стоит СТРИМ, который блокирует входящий 80 порт
— У меня на работе открыты наружу только порты 443, 80, 5190.
— Как итог: я могу достучаться домой только к 2 сервисам, один из которых у меня SSH, и один остается свободным. Задача сводится к тому, чтобы завернуть все WEB-морды в один сайт, ибо замучался я с SSH-туннелингом. Универсального интерфейса, конечно же, не получится, так что их надо логически разделить.
Ничего революционного я не скажу, лишь подскажу, как это сделать. Весь рассказ основывается на следующих вещах, но при желании вы с легкостью подключите любой другой веб-интерфейс:
— У вас есть динамический реальный IP
— DynDNS
— nginx для Win32
— µTorrent
— µTorrent WebUI
— eMule
DynDNS — принцип, регистрация и настройка
Принцип работы DynDNS очень прост: программа на компьютере, маршрутизаторе или модеме периодически обращается к сервису DynDNS. Сервис смотрит IP, с которого произошло обращение, и привязывает зарегистрированную вами бесплатную DNS-запись к IP, с которого произошло обращение. Таким образом, адрес вида myname.dyndns.org всегда указывает именно на ваш внешний IP-адрес, даже если у вас он динамический.
Включаем, вводим свой логин, пароль, и уже зарегистрированное на сайте DynDNS.org DNS-имя, которое мы хотим задействовать, и вуаля, теперь вы можете обращаться к своему домашнему роутеру по DNS-имени, например, vpedalkin.dyndns.org.
Настроить WEB-интерфейсы всех программ, которые вам нужны, предлагаю самостоятельно, благо, инструкций по этой теме очень много.
WebUI uTorrent нам следует настраивать на альтернативном порту и настраивать фильтрацию по IP. Так как сервер nginx мы будем ставить на той же машине, на которой стоит uTorrent, то делаем фильтрацию по 127.0.0.1 (т.е. только с этой машины). Альтернативный порт мы используем для того, чтобы у нас Web-морда не торчала наружу в двух экземплярах — через nginx и через проброшенный до uTorrent порт.
Подсказка для тех, кто не настраивал uTorrent WebUI никогда: Нужно положить скачанный с сайта uTorrent файл webui.zip, не распаковывая, в папку профиля. Чтобы ее открыть, нажмите Win + R и введите %USERPROFILE% (с процентиками) и нажмите ОК.
Вебморду eMule настраивать легче легкого: прописываем порт, пароль и все.
Я использовал порт 8081 для uTorrent и 8082 для eMule.
Переходим к настройке nginx
К моему большому сожалению, nginx под Win32 официально нет, но есть его сторонняя сборка на cygwin. Из основных недостатков можно отметить то, что nginx win32 ставится только в C:\nginx и никуда его оттуда не денешь.
Итак, устанавливаем nginx, открываем C:\nginx\conf\nginx.conf. Я Предпочитаю использовать редактор AkelPad — он очень похож на блокнот, но хорошо дружит с кодировками и мелкими рюшечками.
В моем случае HTTP-сервер у меня висит на порту 5190, ибо 443 занимать было жалко, да и неудобно это было мне — настраивать секурный сервер, так как uRemote, которой я пользуюсь, не поддерживает HTTPS-соединений.
Полный пример моего конфига здесь.
В общем случае мы добавляем директивы Server, например так:
server <
listen 5190;
server_name emule.vpedalkin.xxxxdns.org;
access_log logs/emule.log main;
location / <
#Аккуратно тут поправьте URL при копировании
proxy_pass h ttp://127.0.0.1:8082/;
proxy_buffer_size 8k;
proxy_buffering off;
proxy_connect_timeout 3;
proxy_ignore_client_abort off;
>
>
Обращаю ваше мнимание: для разделения мы используем Virtual Hosts. Таким образом сервер, в зависимости от того, как к нему обращаются (как к utorrent.vpedalkin.dyndns.org или emule.vpedalkin.dyndns.org), выполняет транспорт к определенному серверу (до uTorrent или eMule соответственно).
Не забываем поправить в конфиге все listen на тот порт, который вы собираетесь открыть наружу для веб-сервера. Также замените все vpedalkin.xxxdns.org на свои собственные реквизиты, зарегистрированные в DynDNS. Обращаю внимание что emule.vpedslkin.dyndns.org не надо регистрировать дополнительно — благодаря той галочке, которую мы поставили в свойствах записи на сайте DynDNS.org в самом начале, все это само будет перебрасываться туда же, куда и сам vpedalkin.dyndns.org
Проброс
Результат
Был рад, если кому-то эта информация покажется интересной.
Искусственный интеллект лицом
веб морда для ваших поделок ( Пет проект )
Если ваши успехи в освоении data science и других наук дошли до стадии, когда вам есть что показать, то самое время глянуть на эту статью. Эта статья совсем не про искусственный интеллект и про искусственный интеллект далее в статье больше ни слова. Эта статья описывает один из способов получить из сети картинку, обработать её и отдать обратно. Как можно дешевле, надёжней, быстрей (это конечно фантастика) Можно и с AI, можно и без AI, главное то, что есть обработчик картинок и есть что показать человечеству!
Таких статей, как прикрутить web интерфейс к питону в десяток строк, полно, но дьявол то как всегда в мелочах. Если сделать вебморду в 10 строк, работать то оно конечно будет, но вам тогда нужен прямой IP и все боты мира будут в него стучать, отнимать ваше и время процессора. А если вдруг ушлый какой и пролезет! Не годится! Нужно защищать свой компьютер и, особенно, свой код, например нейронной выстраданной сети. Код, свой, ещё не опубликованный и незакопирайченый, здесь главная ценность.
Поэтому выносим морду в интернет, защищаем её и строим к ней туннель.
Покупаем/арендуем/берём_в_дар VDS, самый махонький. Я выбрал вариант KVM, чтобы спокойно и уверенно установить там FreeBSD. Их как-то в сети внешней работает много и все сетевые трюки на FreeBSD выглядят просто, достойно и элегантно. ( и всё это дело можно уместить в 512, а то и в 128 Мб памяти, что немаловажно по деньгам)
Вот тут первый вопрос — а где делать сервер и где клиент? Я выбрал вариант когда во внешнем мире на VDS у меня находится сервер VPN. Казалось бы должно быть наоборот, сервер внутри охраняемого периметра, а клиент вне и клиент подключается к серверу. Но, в моем случае, если потерять внешний сервер, если сервер будет скомпрометирован, то я потеряю всего лишь VDS и не потеряю доступ внутрь, к суперсекретному своему алгоритму и к машине, на которой он есть, в охраняемом периметре. Если же вне будет клиент, а сервер внутри, то при компрометации клиента или взломе его, утекут ключи и хакер получит доступ с серверу с секретным кодом. В варианте внешнего сервера нет никаких открытых и пробрасываемых портов, все наглухо закрыто для доступа извне, доступ только через VPN и только по одному порту для FastCGI.
Итак ставим на VSD с FreeBSD обычный web сервер lighttpd, обычный OpenVPN сервер и посредством FastCGI отправляем картинки через openvpn на свой рабочий компьютер для обработки.
Первый архитектурный вопрос прояснился и буду рад и готов получить замечания и предложения.
Ну и опять же конечно буду рад и готов получить замечания и предложения.
Можно скачать все конфиги и исходники с Github
и посмотреть реальную работу
FreeBSD и его конфиги
Ставим FreeBSD как обычно и немного модифицируем /etc/rc.conf
и первым делом настраиваем файрволл
пропускаем извне только ssh, http и vpn (1194 порт). Разрешаем доступ с tun0, это и есть туннель к нашему внутреннему серверу. Форвардинг нам не нужен совсем.
Создаём юзера под которым будет подключаться клиент и загружать картинки.
Заменяем доступ по ssh на беспарольный доступ по ключу, чтобы scp работал без пароля. Доступ нужен и с рабочего компьютера для настройки и с вычислителя для передачи картинок. Ну и что бы не было каркозябров в названиях файлов, русифицируем FreeBSD (https://unix1.jinr.ru/
Далее ставим lighttpd и openvpn любым привычным способом. Добавляем нашего юзера в группу www. Он должен иметь права на добавление картинок в папки lighttpd. Добавляем юзера под которым будет работать openvpn, лучше если это будет не root. По умолчанию конфиги lighttpd не соответствуют создаваемым во FreeBSD по умолчанию папкам. Правим /usr/local/etc/lighttpd/lighttpd.conf
Эта сложная конструкция в lighttpd.conf всего лишь проверяет URL и если что то не нравится, то отправляет на начальную страницу сайта.
Правим там же modules.conf
и раскомментируем там же строчку для вызова fastcgi
Теперь правим fastcgi.conf, дописываем
«192.168.0.66» это адрес внутреннего сервера за периметром. Именно на нем и будут производиться вычисления картинок. Этот адрес может и не принадлежать внутренней сети совсем и к этому серверу вы можете сделать доступ по другому, второму интерфейсу, а этот «192.168.0.66» закрыть для любого обращения, кроме как через VPN через tun0. Ну и порт 8888 выбран не совсем удачно, лучше выбрать другой, если использовать jupyter notebook. Но в данном случае все вычисления на С и порт можно взять любой больше 1024.
Создаём папки для хранения страницы сайта и картинок.
Напомню, что наш должен быть членом группы www и должен иметь права на запись в папку /usr/local/www/data/images и у группы www должны быть права доступа к этой папке.
Далее настраиваем OpenVPN, (вот тут подробней гораздо https://www.site-motor.ru/docs/freebsd/security_openvpn.html ), создаём папки для openvpn
теперь правим /usr/local/etc/openvpn/server.conf
Теперь создаём ключи и кладем в указанные папки и не забываем правильно установить права
Когда создаём ключи, то нужно обязательно указать правильно CN, оно должно совпадать с именем юзера и именем файла в папке /usr/local/etc/openvpn/ccd/
В файле /usr/local/etc/openvpn/ccd/ пишем настройки сети
Эта запись означает, что сеть 192.168.0.0 находится за VPN, туда нужно и можно через tun0 слать пакеты.
Теперь перегружаем FreeBSD и смотрим, что же мы там наделали, запустились ли lighttpd, openvpn? Открывается ли страница, можно ли выбрать файл? Можно и нужно проверить порты, всё таки сервер в прямом доступе кулхацкеров и ботов всего мира.
Настройка Ubuntu
Тут настраивать мало совсем и кратко.
Нужно создать специальную таблицу маршрутизации для VPN в файле /etc/iproute2/rt_tables
Эта новая таблица 200 vpn нужна для того, что бы ответ на пакеты пришедшие с vpn через tun0 отправлялись обратно также через tun0. Просто в любимом редакторе правим файл и добавляем строку.
Устанавливаем рутинно OpenVPN и создаём два файла в папке /etc/openvpn/client/
и в то же место кладем ключи. Напомню, что должен быть одинаковым везде, там на FreeBSD в трех местах и тут. Именно этот подключается к FreeBSD и именно у него права и возможность положить обработанную картинку на её место.
В той же папке лежит файл /etc/openvpn/client/special_vpn
Название произвольное, но смысл его в правильной настройке маршрутизации. OpenVPN адрес 10.0.1.1 присваивает серверу VPN в сети 10.0.1.0, что мы указали на FreeBSD в файле server.conf. Поскольку вычислитель картинок никуда больше ничего не отдает и не берет, то можно отправлять на адрес 10.0.1.1 и через VPN картинка дойдет до места.
Больше чем уверен, что в этих конфигах можно найти кучу усовершенствований, лишнего и неправильного. Уверен, что с помощью OpenVPN-AS можно сделать проще и быстрее и надёжней. И у меня эта конструкция не сразу заработала, хотя почти точно такая, но для просто VPN, работает рядом много лет.
И в файле /home/fun_house/funhouse.sh
Обработка
Теперь перейдем к описанию алгоритма работы внутреннего сервера.
Главная программа сервиса обработки внутреннего сервера запускает THREAD_COUNT потоков и ждет. Внешний сервер показал посетителю страницу, тот согласился, выбрал картинку и нажал «Отправить». Lighttpd, согласно своим конфигам, отправляет FastCGI запрос на адрес 192.168.0.66 который через OpenVPN будет доставлен на 8888 порт внутреннего сервера. Вся обработка происходит параллельно в запущенных потоках. Каждый поток ждет когда придет его очередь обрабатывать FastCGI запрос от внешнего сервера.
Как только будет открыто соединение со стороны внешнего сервера, программа принимает по частям в размере буфера данные, парсит эти данные, скачивает по необходимости файл со служебной информацией, сохраняет этот файл картинки или скачивает картинку с диска, далее картинку обрабатывает, сохраняет, отправляет на внешний сервер, формирует HTML страницу ответа и отправляет её на внешний сервер. После закрывает соединение, сохраняет журнал в файл журнала и данные в файл результатов.
И так в цикле постоянно.
Директория с программой должна содержать поддиректории data/marks, data/imges и log
Теперь собственно код и комментарии. Очень красиво и подробно про FastCGI в потоках изложено в статье habr.com/ru/post/154187/ и вся идея и почти весь код про fastcgi взят оттуда. Особое спасибо @janagan
Здесь по катом весь source код на почти 1000 строк одним файлом.Наверно это неправильно.
Можно скачать все конфиги и исходники с Github
Под катом громадный в 1000 строк исходник с комментариями. Комментарии наверняка можно и нужно дополнить.
Веб-интерфейс
Веб интерфейс – это среда взаимодействия пользователя и программы или приложения, запущенной на удаленном сервере. Чаще всего web interface применяется для работы с различными онлайн сервисами: начиная с электронной почти и заканчивая системами веб-аналитики. В некоторых случаях веб-интерфейс называется «Личным кабинетом» на каком-либо сайте, но не во все личные кабинеты – интерфейсы. Разберем понятие по частям. Приставка «веб» означает, что элемент работает удаленно от компьютера пользователя, на локальном или интернет-сервере. Взаимодействие с сервисом при этом происходит через «интерфейс» специальную графическую оболочку, состоящую из кнопок, окон, полей заполнения или любых других элементы. Разберем на примерах.
Веб-интерфейс электронной почты
Это самый распространенный случай применения web interface. Примерно 15-20 лет назад, электронная почта работала только через программу-клиент, которую пользователь устанавливал на свой компьютер. Со временем функции этих приложений перенесли в веб – теперь достаточно зайти на страницу сервиса электронной почти и зайти в свой кабинет. Веб-интерфейс электронной почты умеет все то же самое, что и программа-клиент: принимать, отправлять, обрабатывать, перенаправлять и сортировать письма. Сначала их стали использовать такие сервисы как Яндекс, Майл.ру и GMail, а затем их стали подключились и небольшие корпоративные серверы.
В веб-интерфейсе почты есть папки для разной почты: исходящей, входящей, удаленной и нежелательной. Для получения доступа к почтовому интерфейсу потребуется введение пароля, который был указан пользователем в момент регистрации почтового ящика.
WEB-интерфейс модема или роутера
Любое управляемое сетевое оборудование — это отдельный компьютер и обладает собственной операционной системой. Но она выполняет узко специализированные функции, и позволяет соединиться с сетью провайдера для подключения к интернету.
В самом начале в целях управления ею применялись: протокол и командная строка Telnet. Но в результате развития оборудования, чтобы пользователь мог осуществлять более простой процесс управления, на модеме или роутере был сделан отдельный сервер с полезной для потребителя командной web-оболочкой.
Здесь также присутствует и основное меню, из которого можно настроить устройство. В настоящий момент все современные сетевые устройства с наличием управляющей функции обладают собственным web-интерфейсом управления. В качестве хорошего примера выступают коммутаторы, видео-камеры, модемы, а также маршрутизаторы Zyxel, D-Link, TP-Link, Asus и др.
Веб-интерфейс хостинга
С ними обычно сталкиваются веб-мастера и пользователи, которые работают с сайтами: занимаются их созданием, продвижением, администрированием и др. Любой сайт в Интернете работает на конкретном www-сервере, который размещен на хостинге – специальной платформе, созданной под размещение сайтов. Эта платформа управляется с помощью веб-интерфейса, который называется “хостинг-панель”
Облачный веб-интерфейс
В последние 5-6 лет распространились облачные хранилища или просто «облака». После регистрации в сервисе пользователю бесплатно предоставляется место на удаленном жестком диске. Оно используется для хранения самой различной информации: документов, программ, фото, видео или музыкальных файлов. Она доступна из любой точки мира, где есть выход в Интернет. В том случае, когда бесплатно предоставляемого пространства становится недостаточно, то всегда можно докупить его дополнительный объем.
Облака становятся популярнее, потому что с ними удобно работать – нужные файлы доступны везде, где есть Wi-Fi, проводной интернет или покрытие мобильных сетей. В личном кабинете пользователя сервиса можно просматривать, создавать, удалять, копировать и редактировать файлы. Это и есть веб-интерфейс облака. В России чаще используются: Яндекс Диск, Google Drive, DropBox.
Веб-интерфейсы: развитие или наоборот?
Текстовый режим
На недостатках текстовых интерфейсов мы не будем останавливаться, они очевидны. Но в текстовом режиме была и неоспоримые преимущества:
Полный контроль над экраном. Весь экран без остатка был покрыт прикладным интерфейсом программы, не оставляя места для плюшек и излишеств, не было десятков запущенных программ, выскакивающих окошек коммуникаторов, браузера с открытыми соцсетями.
Высокое использование клавиатуры. Все знают, что в специализированных пакетах всегда нельзя было обойтись без знания комбинаций клавиш. Но с появлением мыши пользователи отучились от горячих клавиш и даже курсоров, а многие программисты, вслед за ними, отучились от реализации полноценного управления приложением с помощью клавиатуры.
Однозначность действий. Типично, что в каждый момент для текстового режима имеется очень ограниченное количество действий, что облегчает работу с программами, их разработку и тестирование. Различный функционал практически не пересекается и гораздо меньше проблем с тем, что что-то ломается при доработках.
Оконные интерфейсы
Веб-приложения
Но все ли так хорошо?
При отсутствии сети не можем работать, ну это еще как-то терпимо, сеть должна быть всегда, иначе нет групповой работы и коммуникации. Если что-то зависло во время ввода или сеть пропала — теряются введенные данные, отправить по сети нельзя, а локально сохранить негде (локальный сторидж и Web SQL пока не везде доступны). На всем печать идеологии REST, полное отсутствие состояния. Отсутствие средств Разные браузеры, а них особенности, требуется дополнительное тестирование и отладка. Верстку иногда делаем отдельно для IE (реже возникают версии для других браузеров), но это при очень хитрой разметке.
Тенденции развития веб-интерфейсов
Рассмотрим подробнее визуальные контролы и решения
Зона прокрутки — для сайтов типична прокрутка полноэкранная, когда весь контент с элементами управления прокручивается разом одним трекбаром справа (или слева для right-to-left). Однако, для веб-приложений это не удобно и гораздо более адекватным решением будет принцип «прикрепления панелей» (как это принято в оконных приложениях), например, инструменты находятся на панели, которая прикреплена к верхней границе окна браузера и растянута на всю ширину, а слева может размещаться панель с динамически подгружаемым деревом, приклеенная к левому краю окна, снизу — строка состояния, справа — панель с контекстными задачами, всю же центральную часть экрана занимает объект работы: документ, карта, таблица, изображение и т.д. Каждая зона имеет свою прокрутку. Конечно идеально, чтобы прокрутку имела только зона в центральной части, а все остальные панели были без прокрутки или прокрутка бы осуществлялась не в трекбаром и только по одной оси.
Сплитер. Для оконных приложений пользуется популярностью динамический разделитель между панелями, который можно перетягивать мышью. Для веб-интерфейсов его тоже реализовали, но пользуются им не часто, а уже в мобильных приложениях сплитер не применим вовсе. Есть несколько решений: «дискретный сплитер», имеющий несколько состояний и переключающийся между ними при нажатии на управляющий элемент. «Умный сплитер» — подстраивает размеры панели под разрешение и конетнт, а перетягивать мышью его нужно крайне редко. «Уплывающий сплитер» — при долгой неактивности скрывает панель, а при подведении мыши — возвращает, но с этим есть проблемы на тачскинах, курсора то мыши там нет.
Дерево — для полного счастью дерево должно удовлетворять почти тому же перечню, что и грид: подгружаться динамически, управляться мышью и с клавиатуры, редактироваться по месту и т.д.
Главное меню — забыть как страшный сон! Этот атавизм от оконных приложений в вебе не имеет права на жизнь.
Тулбар — вместо свалки кнопочек и комбо-боксов тулбары постепенно становятся адаптивными, контекстными, мы видим только те функции, которые можно применить в текущем состоянии приложения или к элементу, находящемуся в фокусе.
Комбобокс — cтандартный html-ный комбо-бокс ужасен и по дизайну, который нельзя полностью переопределить и по функционалу, который ограничен банаьным выпадающим списком строк. Нам нужен комбо-бокс с многими режимами, с инкрементным поиском, позволяющим выбирать из больших справочников, с возможногстью выбирать несколько значений, с группами, с картинками (и вообще с элементами с богатым html+css оформлением).
Заключение
Всю дорогу наша команда, для себя и не только, формирует набор контролов для веб-приложений, часть пишем, часть берем и причесываем, часть покупаем (это только если нет времени сделать), но постоянно расширяем набор используемых и проверенных. Эта статья лишь обзорная, если кому-то интересно, то мы можем в свободное время публиковать кратенько о своих наработках, например, вот недавно взялись за доработку jQuery UI нескольких кривых контролов и недостающих. Так же, будем благодарны за Ваше мнение по поводу изложенного подхода, ссылки на хорошие контролы, дэмки, скриншоты и приложения, которые, по Вашему мнению заслуживают внимания.
Добавлено: картинку для медитаций убрал, она Вам не нравится, я чувствую.
А иллюстрации попробую все же собрать в ближайшие дни.
Рис 1: Как некрасиво делать уезжающие тулбары на примере GMail 
Рис 2: Как красиво делать лэйаут, тулбары и прокрутку на примере GoogleDocs 
Рис 3: Несколько вариантов дефолтных комбобоксов 
Рис 4: Виртуальный скроллинг и пейджинг — кому что? 
Рис 5: Скроллинг внутри скроллинга — плохо 
Рис 6: А грид растянутый на всю доступную зону (так, чтобы прокрутка была одна) — хорошо 