JS, or not JS, вот в чем вопрос презентация

Содержание

Проблемы, связанные с отсутствием версии без JS Недоступны важные функции сервиса Недоступна важная информация Возможности браузера используются неполностью (версия для печати, ссылка другу)‏ Сайт индексируется не полностью

Слайд 1JS, or not JS, вот в чем вопрос
Фитискин Александр
веб-технолог
студия «Dominion»

Слайд 2Проблемы, связанные с отсутствием версии без JS
Недоступны важные функции сервиса
Недоступна

важная информация
Возможности браузера используются
неполностью (версия для печати, ссылка другу)‏
Сайт индексируется не полностью

Слайд 3Причины отсутствия JS
JS отключен специально
Проблемы с сервером
Файл «недокачан» или случайно удален
JS-ошибка
Старый

браузер
Другие причины

Слайд 4Задача от менеджера
Нужно реализовать вкладки, которые будут переключаться:

Слайд 5Как это может работать без JS
Предлагаем менеджеру варианты:
Разбить контент на 2

страницы
Разместить все на одной странице в виде подзаголовков с якорями

Слайд 6Первый шаг
Реализуем статическую версию (без JS)‏

Слайд 7Второй шаг
Реализовываем скрипт, который «подготавливает» контент к реализации вкладок:
добавляем недостающие элементы
перегруппировываем

текущие
скрываем лишние

Слайд 8Третий шаг
Реализовываем скрипт, который переключает вкладки:
ищем активные элементы
добавляем обработчики событий

Слайд 9Результат
С JavaScript
Без JavaScript

Слайд 10Всегда нужно учитывать
У любого контента должен быть свой уникальный URL
У любого

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

Слайд 11Отвыкаем от «плохого»
Не нужно писать тонны CSS-кода (и HTML) в JS-скрипте:

newElem.style.display =

'block';
newElem.style.borderBottom = '1px dashed';
newElem.style.color = '#ccc';
oldElem.style.display = 'none';

Слайд 12Привыкаем к «хорошему»
Большую часть щепетильной настройки внешнего вида можно вынести в

CSS и поручить верстальщику:

newElem.className = 'visible';
oldElem.className = 'hidden';

Слайд 13Загрузи версталу по полной!
Чтобы не выискивать все элементы, которые
должны изменяться,

при подготовке контента,
переложи и эту задачу на верстальщика:

document.body.className = 'javascript_enabled';


Слайд 14Как быть с анимацией?
Анимация подразумевает постоянное изменение каких-либо CSS свойств, и

здесь все классами предусмотреть нельзя.

Войти с паролем

Слайд 15Решение — есть!
CSS может нам помочь, предоставив базовые параметры, к примеру:
начальное

положение
конечное положение
Получив эти параметры из CSS мы делаем JS более независимым

Слайд 16Изгоняем HTML из скрипта
Выносим новый HTML-кусок в отдельный файл
и получаем

его с помощью Ajax
Находим нужные элементы по:
Идентификатору (id="headerPlace")‏
Имени класса (class="headerPlace")‏

Слайд 17Результат
Прозрачный и понятный скрипт, минимально завязанный на верстку
Удобство редактирования HTML и

CSS
Работоспособность, как с JS так и без JS

Слайд 18Спасибо за внимание
Меня можно найти в интернетах:
alexfitiskin.ya.ru
alexfitiskin.moikrug.ru
twitter.com/afitiskin
frienfeed.com/afitiskin
alexfitiskin@gmail.com
afitiskin@dominion.ru

Похожие презентации

Аттестационная работа. Реализация работы техникума в области исследовательской и проектной деятельности 234
Новогодний брейн-ринг. 1 раунд 735
Актуальные технологии в историческом образовании. Современные требования к уроку истории 315
Тарас Григорович Шевченко 241
Мир после Первой мировой войны 249
Современные формы обучения 727

Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика