Компьютерная документация и статьи о Windows. Оптимизация Windows.

Поиск

  Здравствуйте  [ Новый пользователь ] Главная  .  Статьи по темам  .  Скачать документацию  .  Личный кабинет  .  Добавить статью  .  Toп 10  .  Карта сайта  

  Навигация

    Главная
    Темы новостей
    Топ 10
    Архив новостей
    Рассылка новостей
    Каталог файлов
    Карта сайта
    Каталог ссылок
    Добавить статью
   Личный кабинет
    Пользователи
    Поиск
    Написать нам
    Тест скорости
    Конструктор
    Интересные книги
    Форум
    Это интересно
    RSS канал


  Наши темы
Windows 7
Windows Vista
Windows XP
Настройка Windows
Реестр Windows
Восстановление системы
MS-DOS
BIOS
Интернет
Microsoft Office
Сетевые настройки
Обработка видео
Вебмастеру
Разное о Windows
Обзор софта

  Рекомендуем

INAttack.RU :: Архив документации для хакера

СЕТЕВАЯ ПЕРЕГРУЗКА

Бесплатный каталог драйверов и
прошивок


  Подписка на рассылку
Ваш E-mail:

Тип подписки:

Формат подписки:


Реклама в интернет:::Все Кулички

12 способов улучшить юзабилити сайта при помощи JavaScript и AJAX

Разместил 29/05/2008 от Vivaldis

Вебмастеру

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



1. Edit In Place

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

Edit in place в Pligg

Для управления содержимым сайта крайне полезное изобретение. Например, я регулярно переписываю заголовки, после публикации заметок. А иногда хочется тег дописать. В большинстве CMS для этого нужно загрузить две страницы, что зачастую делать лень. Edit in place — как раз для таких случаев.

Исправлять ошибки в текстах тоже удобно. Хотя я видел варианты edit in place только с input type="text", но для textarea можно что-то придумать.

Google раньше использовал edit in place на «домашних страницах». В админке Pligg эта фишка тоже используется.

2. Автосохранение

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

Автосохранение в ЖЖ

В жж эта функциональность реализована. Для редактора TinyMCE есть плагин.

3. Редакторы с поддержкой визуального форматирования (WYSIWYG)

Иногда уместны языки быстрой разметки (Markdown, Textile), иногда — чистый HTML, иногда никакого форматирования вообще не требуется. На форумах популярны редакторы, помогающие вставлять bb-code.

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

Визуальный редактор на livejournal.com

4. LightBox, ThickBox

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

Thickbox

Теоретически это удобно, потому что не открываются новые окна и не грузятся новые страницы. Но я пока не привык, сайты с LightBox´ом вызывают у меня ощущение дискомфорта.

5. Всплывающие HTML-окна

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

ISPManager

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

6. Отправка данных посредствам AJAX

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

Отправлять «серьезные формы» мне пока непривычно — от серьезного действия ждешь какого-то значительного эффекта. Разработчикам AJAX-приложений не очень удается убедить меня, что форма действительно отправилась, и что данные не ушли в никуда.

7. JavaScript drag´n´drop

Манипуляция объектами в окне браузера по средствам перетаскивания. Удобно растаскивать блоки по странице сайта при настройке движка, сортировать пункты меню, менять порядок вывода продукции в каталоге.

Удивительно, что в CMS до сих пор слабо поддерживается drag´n´drop.

8. Поля с автодополнением (autocomplete)

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

Autocomplete

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

9. Resizable textarea

Часто разработчики не думают о размере текстовых полей. Писать что-то объемное в форумном окошке не удобно. Поэтому наряду с очевидным ходом, увеличить высоту textarea по умолчанию, появляются решения, основанные на JavaScript.

В форумном движке Vanilla над полем для ввода сообщений есть переключатель «Большое окошко / маленькое». Иногда высота textarea увеличивается в зависимости от объема ввода постепенно. Это пример адаптивного поведения. В Drupal внизу textarea есть уголок, за который можно потянуть и увеличить размер поля до нужного значения.

Textarea resize

10. Изменение параметров отображения страницы

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

Размер шрифта на сайте

11. Скриншот при наведении курсора на ссылку

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

Snap.com

12. JavaScript tabs

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

* * *

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

В Drupal сейчас есть предпосылки для заметного усовершенствования админки. Например, есть набор модулей JS Tools, в котором есть и autocomplete, и js tabs, и edit in place, и ajax submit.

Источник: www.dserg.com


|
 
  Логин
Логин

Пароль

Не зарегистрировались? Вы можете сделать это, нажав здесь. Когда Вы зарегистрируетесь, Вы получите полный доступ ко всем разделам сайта.

  Связанные ссылки
· Больше про Вебмастеру
· Новость от Vivaldis


Самая читаемая статья: Вебмастеру:
Коды ошибки http веб-сервера


  Рейтинг статьи
Средняя оценка: 0
Ответов: 0

Пожалуйста, проголосуйте за эту статью:

Отлично
Очень хорошо
Хорошо
Нормально
Плохо



  опции

 Напечатать текущую страницу  Напечатать текущую страницу

 Отправить статью другу  Отправить статью другу


Яндекс цитирования Rambler's Top100 Рассылка 'Собрание документации по Windows , программное обеспечение' Content.Mail.Ru Maillist.ru: Компьютерная документация по настройке Windows
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
The Russian localization - project Rus-PhpNuke.com
Открытие страницы: 0.187 секунды и 20 запросов к базе данных