Оглавление:

Веб-дизайн и поисковая оптимизация

Вебдизайн с jQuery — это очень просто!

• Фотогалерея jQuery — просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
Zoomy — лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery

Кнопка возврата в начало страницы

В предыдущей статье был рассмотрен способ плавного перемещения (скроллинга) по ссылкам на странице сайта. Частный вариант такого скроллинга — кнопка возврата в начало страницы.

Обычно кнопку возврата в начало страницы размещают в правом нижнем углу экрана и делают фиксированной, чтобы в любой момент можно было вернуться назад. Для этого достаточно задать положение кнопки следующими правилами CSS :
position:fixed; /*Расположение кнопки на странице: внизу справа с отступами 10рх*/
top:auto;
bottom:10px;
left:auto;
right:10px;

Для особо ленивых товарищей удобно вместо картинки кнопки использовать символы Юникода, оформив их с помощью правил CSS. О том, как выбрать подходящий символ-значок, рассказано в статье «Символы Юникода — полезные значки для сайта». Например, используя значок с кодом , можно получить следующую кнопку:

Оформление кнопки сделано с помощью следующих правил CSS:
border-radius:5px;
background-color:#ddd;
padding:8px 20px;
font-size:24px;
color:#333;
text-align:center;

Описанный способ имеет один недостаток: кнопка возврата наверх выводится постоянно. Чтобы она появлялась только при движении вниз по странице, можно использовать немного измененный скрипт — плагин jQuery liScrollToTop.

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

Установка плагина liScrollToTop

Как обычно, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, конечно же, scrolltotop. Затем скачиваем архив и распаковываем его в созданную папку. Мы получим в ней два скрипта jquery-1.8.3.min.js, jquery.liScrollToTop.js и таблицу стилей liScrollToTop.css.

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

Картинку кнопки возврата размещаем в любом месте страницы (удобнее в конце) в теге DIV:

www.seomark.ru

Кнопка НАЗАД для сайта в Adobe Muse

Кнопка НАЗАД. Как сделать в Adobe Muse?

В этом видеоуроке мы рассмотрим 3 варианта как сделать кнопку НАЗАД для перемещения по сайту на предыдущие страницы в обратном порядке. Кнопка НАЗАД также необходима когда с нескольких страниц сайта (A1, A2…An) ссылки ведут на одну и ту же страницу (B), а с этой страницы (B) необходимо вернуться на предыдущую страницу (An) сайта, с которой Вы попали на страницу (B).

Смотрите новый видеоурок:

Код кнопки «вернуться назад» для размещения на сайте:

Картинка со ссылкой:

Кнопка Назад. Для чего нужна?

В этом видеоуроке мы сделаем кнопку возврата назад на предыдущие страницы сайта в программе Adobe Muse. Эта кнопка будет возвращать по тому же пути, по которому мы ходили на сайте.

Кнопка Назад. Проект для урока.

Для того чтобы сделать этот урок, я приготовил небольшой проект, точнее его небольшим называть нельзя, здесь он состоит из главной страницы, страниц верхнего уровня, страниц первого уровня и также для страницы «page-2» есть еще несколько дочерних страниц. И для разнообразия я создал два шаблона. Первый шаблон применил к трем первым страницам. А второй шаблон применил ко всем остальным.

Давайте начнем. Кнопку Назад — мы будем делать в «Шаблоне С», чтобы она сразу появилась на тех страницах, к которым применен данный шаблон. Я захожу в редактирование данного шаблона, и именно сюда мы будем вставлять нашу кнопку «Назад».

Кнопка Назад. 3 способа.

Кнопку «Назад» мы сможем вставить тремя способами. У меня есть специальный файл, который я уже заготовил в блокноте. И есть три способа, три кода, используя которые, у нас получится вставить такую кнопку на сайте.

Кнопка Назад. Способ№1 — простой текст.

Первый вариант – это просто текст. Кнопка будет у нас в виде текста. Я копирую данный код:

И вставляю его в шаблон. Выглядит это вот так. У нас просто текст и он выделен белым цветом. Я размещу его вот здесь. Для того чтобы понять, как это все работает, мы нажимаем клавиши ctrl+alt+E для того, чтобы просмотреть весь сайт со всеми его страницами в браузере. Вот так выглядит главная страница сайта. Мы можем серфить по меню, выбирать страницы. Здесь у нас есть выпадающие меню. И, например, с главной страницы мы сразу перешли на страницу «page-3». И здесь у нас есть кнопочка «Назад».

Эта кнопка активная, но при наведении курсора мыши на нее, не появляется рука с пальцем. Мы можем спокойно нажать на эту кнопку, и нас перебросит назад на главную страницу. Точно также мы можем нажать на страницу «page-3», потом перейти на страницу «page-4» и нажать кнопку «Назад», она нас перебросит на страницу «page-3», и если мы еще раз нажмем на кнопку «Назад», то она нас переносит на главную страницу. Вот таким образом работает кнопка «Назад».

Но данную кнопку сложно назвать кнопкой, поскольку она представляет собой только вот такую надпись, выделенную белым цветом. Если мы захотим отредактировать ее в Muse, мы сможем изменить только размер текста, например, я поставлю здесь «36», чтобы вам было лучше видно. Цвет текста мы, по-моему, менять не можем. Сейчас я попробую поставить красный. Я выбрал красный цвет, но это никак не повлияло на нашу надпись, так что цвет мы менять не можем. Мы можем поменять размер. Попробуем сделать жирным и выставить по центру. Все, что мы можем сделать, так это такое редактирование. Если мы хотим сделать заливку данному блоку, например, сделать оранжевым цветом, то наш текст все равно будет выделяться белым, и, в принципе, выглядит не очень красиво.

Кнопка Назад. Способ№2 — Текст-ссылка.

Дальше давайте посмотрим, какой есть второй способ. Второй способ уже представляет – текст-ссылку:

Сейчас мы его скопируем. Я нажимаю ctrl+C и перехожу в программу, и нажимаю ctrl+V для того, чтобы вставить на сайт. Он у нас выглядит вот такой ссылкой. Ссылка у нас синяя. Сейчас она не очень хороша видна. Давайте сделаем тоже 36-ой шрифт, чтобы укрупнить и увидеть поближе. Вот это у нас просто синяя ссылка. Если мы сейчас нажмем ctrl+alt+E, то увидим, что при просмотре она выглядит вот такой обычной синей ссылкой. Давайте еще перейдем пару раз, чтобы увидеть, нажимаем раз, два, возвращаемся. Вид у данной ссылки обычный, как у обычной ссылки.

К ней мы можем применять в программе Adobe Muse стили ссылок. Находятся стили ссылки в разделе «Гиперссылки», выбираем «Редактировать стили ссылки». У меня уже есть заготовленный вариант. Сейчас у меня уже есть заготовленный вариант. Вы видите, что к ней применен стиль. В стандартном состоянии и при наведении курсора мыши цвет синий и при активном состоянии – красный. Вы видели это при просмотре. Второй стиль я создал просто все черные состояния. Этот стиль мы можем применить к данной кнопке. Например, я выберу и применю к данной кнопке этот специальный стиль. И вы увидите, что наша надпись стала черной.

Здесь мы также можем сделать заливку, например, я сделаю тем же оранжевым цветом. Здесь уже можно редактировать текст. Поставим его по середине, выделим жирным. И, в принципе, этот вариант уже более похож на кнопку. Здесь уже нет такого белого выделения, и уже, в принципе, вариант уже вполне подходящий. При просмотре (ctrl+alt+E ) давайте перейдем на страницу «page-3», на страницу «page-4» и еще раз пощелкаем. Эта кнопка работает точно также, как и первая, только имеет больше возможностей для редактирования дизайна.

Кнопка Назад. Способ№3 — кнопка — картинка.

И третий вариант как мы можем разместить кнопку – это кнопка у нас будет картинкой. Я копирую данный код:

Перехожу в Muse, нажимаю «Вставить». И этот третий вариант у нас – картинка. Для того, чтобы у нас тут появилась картинка какая-нибудь, нам необходимо скачать из интернета какой-нибудь файлик картинки либо создать его самостоятельно. Картинку мы добавляем через функцию программы «Файл», выбираем «Добавить файлы для передачи». Я уже скачал пару картинок из интернета. Мы можем выбрать какую-нибудь. Давайте выберем вот эту с кнопкой «Назад». Теперь если мы посмотрим в разделе «Ресурсы», то у нас добавилась кнопка «back2.png» — «Передать». Этот файл у нас для передачи.

Все файлы для передачи хранятся в папке «assets» при экспорте сайта. Поэтому мы должны зайти в редактирование html-кода данной кнопки. Нажимаю правой кнопкой мыши и выбираю «Редактировать html». И вот здесь, где «img scr» прописать имя нашей кнопки и путь к ней. Кнопку у меня называется «back2» и папка называется «assets». Именно такую папку создает Muse при экспорте сайта. Здесь необходимо поставить вот такую косую черту «/». И можем заменить альтернативное называние кнопки. Напишем «Назад». Получается:

Все, нажимаем «ОК». В самом Muse мы не увидим никаких изменений. Все изменения мы увидим только при просмотре сайта в браузере. Давайте нажмем снова ctrl+alt+E для просмотра сайта в браузере и попробуем посерфить по нашим страницам.

Кнопка Назад. Просмотр результата.

Перейдем на страницу, например, «page 2-1», теперь перейдем на страницу «page-2», теперь перейдем на страницу «page 3», далее на страницу «page-4». И теперь, если мы будем нажимать на кнопку назад, мы будем возвращаться последовательно в обратном порядке к главной странице сайта. Нажимаем «Назад», перемещаемся на страницу «page-3», на страницу «page-2». И здесь у нас уже нет кнопки. Если бы мы ее разместили в шаблоне, который применен к странице «page-2», то у нас бы здесь тоже была кнопка «Назад». Поскольку у нас ее нет, нам приходится перемещаться к главной странице, только нажав на кнопку «Главная» в меню. Давайте перейдем, например, на страницу «page 2-2-2», потом перейдем на страницу «page 2-2-1», потом на страницы «page-3 » и «page-4». И теперь в обратном порядке: страница «page-3», страница «page 2-2-1», страница «page 2-2-2» и на главную.

Конечно, вы можете не размещать данную кнопку у себя на сайте, а использовать обычные стрелки в браузере. Но если вы хотите, чтобы такая кнопка была у вас на сайте, то можете ее сделать вот такими способами. Коды кнопки я размещу у себя на сайте urokimuse.ru. И ссылка на статью будет под этим видео. На этом все. С вами был Дмитрий Шаповалов. Ставьте лайк к данному видео, подписывайтесь на канал, пишите комментарии внизу, а прощаюсь с вами до следующих видеоуроков.

Автор видеоуроков и курсов
Дмитрий Шаповалов

urokimuse.ru

Как кнопка «Назад» способна уничтожить юзабилити сайта?

Многие исследования юзабилити показывают, что пользователи (как новички, так и опытные), часто используют кнопку «вернуться назад» в браузере. К сожалению, разработчики интерфейсов и маркетологи редко задумываются, какие последствия это может иметь для юзабилити — учитывая современные модели веб-дизайна, которые используют приложения, анимацию, видео и прочее. Часто техническая структура таких макетов некорректно реагирует на функцию «вернуться назад», чем разрывает ментальный шаблон пользователей и ухудшает их опыт.

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

Из этой статьи вы узнаете:

  • что ожидают пользователи от кнопки «вернуться назад»;
  • каковы 5 самых распространенных ошибок;
  • простое решение этих проблем.

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

Ожидания пользователей

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

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

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

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

1. Наложения и лайтбоксы

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

2. Фильтры и сортировка

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

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

3. Форма регистрации/оплаты

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

Подобный подход может принести проблемы, простой пример — человек хочет вернуться на шаг назад в заполнении формы, чтобы отредактировать введенную информацию. Нажатие кнопки «назад» возвращает его в корзину, и удаляет все (!) введенные данные. Раздражение и уход с сайта — закономерный эффект.

4. Использование AJAX

Технология AJAX может не оправдать ожидания пользователей: технически каждая страница AJAX находится под тем же URL, однако создается впечатление, что открываются новые страницы.

В контексте электронной коммерции у пользователей есть четкое восприятие того, что страница 3 и страница 4 — отдельные, и с четвертой к третьей можно перейти с помощью кнопки «назад».

Пользователи не готовы отказаться от кнопки «назад»

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

Особенно полюбилась кнопка «вернуться назад» пользователям мобильных приложений и сайтов. Как показало исследование мобильных версий сайтов, большинство пользователей использовало эту функцию на всех предложенных ресурсах. Причем использование кнопки не ограничивается откатом одной страницы — некоторые испытуемые нажимали ее до 15 (!) раз подряд.

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

Решение

Хорошая новость: HTML5 может предложить относительно простое решение проблемы, и называется оно HTML5 History API. Конкретнее — функция history.pushState() позволяет изменять URL без перезагрузки страницы. Соответственно сайт будет вести себя адекватно ожиданиям пользователя, нажавшего кнопку «вернуться назад».

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

Будьте разумны

Постарайтесь не переусердствовать с использованием history.pushState(). Эта сила должна быть применена разумно. Не стоит задавать отдельный URL для каждого слайда из фотогалереи и прочих мелких деталей. Иначе пользователь не почувствует разницу: по-прежнему, при нажатии «назад» ему потребуется пройти сквозь десятки незначительных изменений.

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

lpgenerator.ru

Кнопка возврата в начало страницы!

Привет друзья! Как Ваше настроение? На связи с Вами Лобанов Кирилл.

Давайте сегодня поговорим об одной очень интересной вещице, которая делает удобнее блог для пользователей. Это скрипт, который вступает в свою работу, когда пользователь читая статью проматывает страницу ниже середины. Называется по английски этот скрипт Scroll To Top, ну а по русски говоря Возврат в начало страницы. Данный скрипт универсальный и подходит для любой CMS, но мы будем рассматривать на примере моей любимой MaxSite CMS!

Шаг №1 — Подготовка

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

Следующий шаг, открываем папку с шаблоном сайта на MaxSite CMS — путь примерно получится такой

/application/maxsite/templates/ПАПКА ШАБЛОНА/stock — вот именно в этой папке stock и будем производить все манипуляции!

Теперь пожалуйста будьте внимательны, чтобы у Вас все получилось с первого раза.

В папке stock создаем еще одну папочку, с названием scroll-to-top

После этого в папке scroll-to-top создаем папку с названием images в этой папке будет храниться стрелочка, которая будет указывать Вверх.

Ну что ж, думаю с подготовительными работами завершили Осталось самое главное — это скопировать код, для стрелочки и положить картинку стрелки в папку images.

Давайте приступим к этому этапу.

Шаг №2 — Пишем код

Сейчас нужно открыть редактор кода Notepad++, либо любой другой удобный для Вас редактор, кроме «Блокнот».

Создаем в редакторе новый файл и называем его scroll-to-top.php — обратите внимание, чтобы Ваше название, было точь в точь таким же! Лучше всего скопируйте его отсюда! И сохраните этот файл в папку scroll-to-top

В результате у Вас на хостинге должен быть примерно такой путь до файла:

Дальше будем писать код в открытом файле scroll-to-top.php

В самом начале файла прописываем вот такую конструкцию:

Далее пишем HTML-код для стрелки, чтобы MaxSite CMS понимал, где ее нужно расположить.

На следующей строке в файле scroll-to-top.php прописываем вот такую конструкцию:

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

Прописываем вот этот код:

После этого нужно сохранить файл.

Шаг №3 — Украшаем

Теперь совершаем самый последний шаг, это нужно найти картинку стрелки вверх размером 32×32 и обязательно PNG.

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

Теперь сохраняете выбранную стрелку с именем scroll-to-top17.png себе на компьютер.

Дальше загружаете на хостинг по адресу

На всякий случай прикладываю исходные файлы, скачать их можно здесь!

Оставляйте Ваши комментарии и нажимайте кнопки соц.сетей!

master-css.com

Кнопка возврата назад

Доброго времени суток. ?

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

Осуществить такую кнопку можно двумя способами. Которые по сути одинаковые, просто используют разные html-элементы. Пример таких кнопок, можете посмотреть ниже:

Первая кнопка использует элемент input type=»button» — это обычная кнопка. Можете настроить ее стилями присвоив класс и превратите в соответствующий элемент Вашего сайта, подходящий по стилю. далее задаем ему событие onclick в котором маленький скрипт — history.back();, который укажет браузеру посетителя, вернутся на один шаг назад, то есть на предыдущую ссылку, от куда был совершен переход. Готовый код выглядит следующим образом:

Вторая кнопка сделана с помощью обычной ссылки, которой зададим путь — href=»#» . Ссылке тоже задаем событие onclick и тот же самый скрипт, но с небольшим дополнениемhistory.back();return false;.Как видите, добавили — return false. Данный код означает, что перехода к href=»#» не будет. Готовый код будет таким:

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

На этом все, спасибо за внимание. ?

Если Вам был полезным мой труд, можете поддержать сайт 🙂

gnatkovsky.com.ua

Это интересно:

  • Css правила jail CS:S Jail @ Правила игры на сервере Основные понятия сервера CS:S Jail: С правилами игр на сервере вы можете ознакомиться в данной теме — t=33501 Замереть — запрещается передвигаться, прыгать и садиться. ( Разрешено: крутить […]
  • Приказы минздрав рк Законодательство Приказ МЗ РК № 1 от 3 января 2018 года Приказ Министра здравоохранения Республики Казахстан № 1 от 3 января 2018 года Зарегистрирован в Министерстве юстиции Республики Казахстан 17 января 2018 года № 16238 О […]
  • Полис осаго в твери О филиале Тверской филиал РЕСО-Гарантия открыт в апреле 1998 года. Директор филиала Андрей Сергеевич Козлов возглавляет филиал с 2010 года. Сегодня в нашем коллективе – 83 штатных сотрудника и 327 страховых агентов. Для удобства […]
  • Правило верстки сайта Верстка сайта - шпаргалка для начинающих Верстка сайта представляет собой описание программным кодом визуальной части веб-сайта. Независимо от того, какой браузер использует пользователь, сайт должен выглядеть и работать корректно […]
  • Косвенные налоги регрессивные РЕГРЕССИВНЫЙ НАЛОГ Экономика. Толковый словарь. — М.: "ИНФРА-М", Издательство "Весь Мир". Дж. Блэк. Общая редакция: д.э.н. Осадчая И.М. . 2000 . Экономический словарь . 2000 . Смотреть что такое "РЕГРЕССИВНЫЙ НАЛОГ" в других […]
  • Долевая собственность на детей Соглашение об определении долей по материнскому капиталу В соответствии с п. 4 ст. 10 Закона № 256-ФЗ «О дополнительных мерах государственной поддержки семей, имеющих детей» (далее — Закон № 256-ФЗ) родители обязаны выделить доли […]