Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
41 слайд
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
5.27 MB
Просмотров:
76
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![JavaScript и доступность](/documents/49615190235b44069127bab71467ae6f/img0.jpg)
Содержание слайда: JavaScript и доступность веб-сайтов
Владимир Агафонкин
№2 слайд![](/documents/49615190235b44069127bab71467ae6f/img1.jpg)
№3 слайд![](/documents/49615190235b44069127bab71467ae6f/img2.jpg)
№4 слайд![представьте себе](/documents/49615190235b44069127bab71467ae6f/img3.jpg)
Содержание слайда: представьте себе
среднестатического пользователя Интернет
№5 слайд![](/documents/49615190235b44069127bab71467ae6f/img4.jpg)
№6 слайд![а что, если ты не](/documents/49615190235b44069127bab71467ae6f/img5.jpg)
Содержание слайда: а что, если ты не среднестатический пользователь?
№7 слайд![](/documents/49615190235b44069127bab71467ae6f/img6.jpg)
№8 слайд![браузер, в котором не](/documents/49615190235b44069127bab71467ae6f/img7.jpg)
Содержание слайда: браузер, в котором не поддерживается или отключён JavaScript
браузер, в котором не поддерживается или отключён JavaScript
ограниченные или нестандартные устройства ввода/вывода
ограничение трафика или пропускной способности канала
№9 слайд![](/documents/49615190235b44069127bab71467ae6f/img8.jpg)
№10 слайд![зрительной функции зрительной](/documents/49615190235b44069127bab71467ae6f/img9.jpg)
Содержание слайда: зрительной функции
зрительной функции
(слепота, плохое зрение, дальтонизм)
двигательных функций
(в частности движения рук)
когнитивные ограничения
(нарушения функций памяти, внимания)
множество других
№11 слайд![как такие люди вообще](/documents/49615190235b44069127bab71467ae6f/img10.jpg)
Содержание слайда: как такие люди вообще пользуются Web?
№12 слайд![](/documents/49615190235b44069127bab71467ae6f/img11.jpg)
№13 слайд![](/documents/49615190235b44069127bab71467ae6f/img12.jpg)
№14 слайд![семантическая вёрстка](/documents/49615190235b44069127bab71467ae6f/img13.jpg)
Содержание слайда: семантическая вёрстка
семантическая вёрстка
(привет, Вадим :)
правильное использование JavaScript
№15 слайд![навигация навигация чаще](/documents/49615190235b44069127bab71467ae6f/img14.jpg)
Содержание слайда: навигация
навигация
(чаще всего строгая зависимость от мыши)
скрытый контент
оповещение пользователя о динамических изменениях на странице
нестандартное поведение браузера
(например, Ajax и кнопки вперёд/назад)
№16 слайд![предоставить не требующую](/documents/49615190235b44069127bab71467ae6f/img15.jpg)
Содержание слайда: предоставить не требующую JavaScript альтернативу всего содержимого и функциональности
предоставить не требующую JavaScript альтернативу всего содержимого и функциональности
сделать саму JavaScript-функциональность максимально доступной
№17 слайд![доступный JavaScript](/documents/49615190235b44069127bab71467ae6f/img16.jpg)
Содержание слайда: доступный JavaScript
№18 слайд![в качестве элементов,](/documents/49615190235b44069127bab71467ae6f/img17.jpg)
Содержание слайда: в качестве элементов, принимающих важные действия от пользователя, используйте только элементы, которые могут принимать фокус
a, input, button, textarea, select
div.onclick
№19 слайд![события в JavaScript](/documents/49615190235b44069127bab71467ae6f/img18.jpg)
Содержание слайда: события в JavaScript
устройство-зависимые
onclick
ondoubleclick
onmouseover
onmouseout
onmousedown
onmouseup
onkeypress
onkeyup
onkeydown
№20 слайд![используйте по возможности](/documents/49615190235b44069127bab71467ae6f/img19.jpg)
Содержание слайда: используйте по возможности только независимые от устройств события
onclick*, onfocus, onblur, onchange, onselect
№21 слайд![при необходимости](/documents/49615190235b44069127bab71467ae6f/img20.jpg)
Содержание слайда: при необходимости использовать устройство-зависимые события, применяйте сразу группы аналогичных событий, например:
onmouseover + onfocus
onmouseout + onblur
onmouseup + onkeyup
№22 слайд![убедитесь, что на сайте можно](/documents/49615190235b44069127bab71467ae6f/img21.jpg)
Содержание слайда: убедитесь, что на сайте можно попасть куда угодно и сделать что угодно с помощью одной только клавиатуры
№23 слайд![обрабатывайте location.hash](/documents/49615190235b44069127bab71467ae6f/img22.jpg)
Содержание слайда: обрабатывайте location.hash
(чтобы работали ссылки на любой контент)
website.com/blabla#tab1
website.com/blabla#tab2
website.com/gallery#photo1
website.com/gallery#photo2
№24 слайд![используйте JS-библиотеки для](/documents/49615190235b44069127bab71467ae6f/img23.jpg)
Содержание слайда: используйте JS-библиотеки для реализации Ajax history
- Really Simple History
- jQuery history plugin
- Mootools HistoryManager
- YUI Browser History Manager
- Dojo dojo.back
№25 слайд![избегайте использования](/documents/49615190235b44069127bab71467ae6f/img24.jpg)
Содержание слайда: избегайте использования всплывающих окон
<a href=“…” onclick=“window.open(this.href) …
№26 слайд![избегайте использования](/documents/49615190235b44069127bab71467ae6f/img25.jpg)
Содержание слайда: избегайте использования CSS-only решений для динамической функциональности
(например, dropdown menus)
они обычно работают только с мышью
№27 слайд![как сделать сайт с кучей](/documents/49615190235b44069127bab71467ae6f/img26.jpg)
Содержание слайда: как сделать сайт с кучей JavaScript-кода работающим без него?
№28 слайд![graceful degradation graceful](/documents/49615190235b44069127bab71467ae6f/img27.jpg)
Содержание слайда: graceful degradation
graceful degradation
progressive enhancement
№29 слайд![](/documents/49615190235b44069127bab71467ae6f/img28.jpg)
№30 слайд![](/documents/49615190235b44069127bab71467ae6f/img29.jpg)
№31 слайд![unobtrusive Javascript](/documents/49615190235b44069127bab71467ae6f/img30.jpg)
Содержание слайда: unobtrusive Javascript
unobtrusive Javascript
(ненавязчивый JavaScript)
№32 слайд![поместить весь JS во внешние](/documents/49615190235b44069127bab71467ae6f/img31.jpg)
Содержание слайда: поместить весь JS во внешние файлы
поместить весь JS во внешние файлы
привязывать функциональность к событиям DOM-элементов
№33 слайд![](/documents/49615190235b44069127bab71467ae6f/img32.jpg)
№34 слайд![](/documents/49615190235b44069127bab71467ae6f/img33.jpg)
№35 слайд![напоследок](/documents/49615190235b44069127bab71467ae6f/img34.jpg)
Содержание слайда: напоследок
№36 слайд![люди бывают разные](/documents/49615190235b44069127bab71467ae6f/img35.jpg)
Содержание слайда: люди бывают разные
№37 слайд![](/documents/49615190235b44069127bab71467ae6f/img36.jpg)
№38 слайд![](/documents/49615190235b44069127bab71467ae6f/img37.jpg)
№39 слайд![](/documents/49615190235b44069127bab71467ae6f/img38.jpg)
№40 слайд![дайте каждому шанс](/documents/49615190235b44069127bab71467ae6f/img39.jpg)
Содержание слайда: дайте каждому шанс воспользоваться вашим сайтом
№41 слайд![](/documents/49615190235b44069127bab71467ae6f/img40.jpg)