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

Нажмите для полного просмотра!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion». Доклад-сообщение содержит 18 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

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

Слайд 2

Описание слайда:

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

Слайд 3

Описание слайда:

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

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

Результат С 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