7 Методов, которые помогут сделать любую WEB страничку лучше

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

Поехали...

  • Если используете AJAX в случаях, когда потеря данных дорого может обойтись  – обязательно пропишите в основном файле оповещение, которое будет уведомлять пользователя о том, что данные возможно, потеряны.
    Данный скрипт будет отрабатывать, если статус страницы – не 200. То есть такая реакция будет на любые 50х ошибки
$(document).ajaxError(function(event, request, settings) {
  Alert('Ошибкаприобращенииксерверу' +request.status + ' ' + request.statusText+'. Ваши данные не сохранились. Обновите страницу, чтобы увидеть актуальные данные');
});
  • Если Вы цените красоту форм – для всех Textarea– используйте стиль resize. Firefox – по умолчанию позволяет менять размеры всех textarea. Стиль resize: vertical позволяет установить возможность менять размер только по вертикали, или вовсе запретить. Не позволяйте пользователю ломать всю верстку страницы
  • Дайте пользователю возможность использовать голосовой ввод. Один лишь параметр –webkit-textspeethв поле ввода inputдля всех пользователей Chrome показывает базовый микрофончик с возможностью голосового ввода. С одной стороны – баловство, с другой стороны – выглядит престижно
  • Помогите пользователю не отправить данные, если на компьютере нет подключения к интернету. Да. Браузеры умеют отслеживать подключен ли компьютер к интернету или нет. Скрипт поможет лишь не дать пользователю отправить (и возможно потерять) введенные данные. Речь идет, прежде всего, о больших формах.
var state='online';
addEventListener('online',function(){state='online';},false);
addEventListener('offline',function(){state='offline';},false);
function form_validate(form){
  if (state=='offline'){
  if (!confirm('Браузер не подключен к интернету. Уверены, что хотите продолжить?'))returnfalse;
  }
…
}
  • Чтобы вывести отдельную страничку для печати – не нужно создавать новый шаблон, в котором будет выделена основная часть и поддерживать его каким-либо образом. С этой функцией хорошо справляется CSS и медиа запросы типа @mediaprint {}. К примеру – если какой-то блок не должен попадать в область печати – можно присвоить ему класс «noprint». А в настройках CSS – дописать @mediaprint { .noprint{ dispay: none; } }. Аналогично – можно сделать стили для отображения новых элементов.
  • Не давайте пользователю отправить форму дважды. В вебе довольно распространенное явление, когда пользователь нажал на кнопку отправки данных, данные отправились, но страница еще не отобразилась, а пользователь уже еще раз нажал на ту же кнопку. Получается – двойная порция данных. Отсюда появляются – двойные комментарии к постам. Варианта решения – 2. Добавлять в форму скрытое поле с идентификатором данных и отлавливать отправку формы с этими данными, либо при помощи Javascript – делать кнопку отправки после клика – недоступной/скрытой. Если на странице – также присутствует функция валидации – желательно по таймеру – секунд 10 – вернуть кнопку назад.
  • Не давайте пользователю случайно уйти со страницы, если данные в форму он уже начал вводить. Бывало ли у вас такое… большая форма, большое текстовое поле. И тут вы хотите заполнить оставшееся мелкое поле – жмете по привычке клик мышкой и backspace←, чтобы стереть ее текущее значение. Промахиваетесь мышью, попадаете по форме вместо поля… значок вкладки браузера начинает вертеться и открывает вам предыдущую страницу в истории браузера… и то, что данные были какие-то введены – его не интересует. Пытаетесь вернуться обратно в надежде, что данные таки сохранились, ан нет. Вводите все заново. И браузер даже не напомнит вам только что введенные данные. Здесь помочь могут только яваскрипты.
    Вешаем на каждое поле формы – событие, которое будет опрашивать пользователя о том, что данные редактировать он начал. На страницу вешаем событие, если ранее была установлена переменная в редактирование – спросить пользователя перед закрытием – что форму он не отправил, хочет ли он продолжить. Конечно, на кнопку отправки формы вешаем переменную обратно.
    Для вызова исключений вроде открытия в дополнительном окне новых данных – заводим новую переменную
    Все это может быть описано, как
var endsubmit=false;
var notlink=false;
var fc=false; // formchange
window.onbeforeunload = function () {
               if (notlink)return;
               if (fc)return 'У Вас есть не сохраненные данные. Вы уверены, что хотите покинуть форму?';
};
$('a[href^="javascript:"]').click(function(){
               notlink=true;
})
$('input:not(.nc,.nc *),select:not(.nc,.nc *),textarea:not(.nc,.nc *)').change(function(){
               fc=true;
})
$('input:submit').click(function(){
               endsubmit=true;
               notlink=true;
})
$(document).click(function(){
               if (endsubmit)return;
               setTimeout('notlink=false;',1);
})

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

Пользуйтесь во благо пользователя.

Больше материалов выкладываю на своем Дзен канале

  • Автор: kosmom
  • Рейтинг: 0
  • Просмотров: 1140
  • Комментариев: 0
  • Создан: 11.06.2013 16:22

Комментарии (0)

Ваши предложения и пожелания пишите на pro@kosmom.ru

Теги

ajax axios backup bootstrap core framework eloquent excel home project html ios javascript keep-alive kpi laravel legacy mvp orm php rip scroll solid timestamp undefined vue vuetify watch безопасность биометрический паспорт ваша любаша для путешествий загран на 10 лет загран паспорт загранпаспорт нового образца зимние книги как заполнить анкеты кеширование книги на новый год логирование мцф недвижимость новогодние книги образец заполнения антеты паспорт для путешествий паспорт нового поколения печать продукт проектирование прокси разработка ремонт ремонт в апартаментах ремонт нежилого помещения самокат сдача сколько стоил ремонт апартаментов спорт стандарты таблица финансы хостинг цена ремонта что почитать зимой юзабилити

Случайный пост

24.01.2014 19:03
Open-Filemanager