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

Категория: Технологии
Нажмите для полного просмотра!
JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №1JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №2JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №3JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №4JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №5JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №6JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №7JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №8JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №9JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №10JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №11JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №12JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №13JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №14JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №15JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №16JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №17JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion», слайд №18
Скачать
Вы можете ознакомиться и скачать JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion». Презентация содержит 18 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1


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

Слайд 2


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

Слайд 3


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

Слайд 4


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

Слайд 5


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

Слайд 6


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

Слайд 7


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

Слайд 8


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

Слайд 9


Результат С JavaScript
Описание слайда:
Результат С JavaScript

Слайд 10


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

Слайд 11


Отвыкаем от «плохого» Не нужно писать тонны CSS-кода (и HTML) в JS-скрипте: newElem.style.display = 'block'; newElem.style.borderBottom = '1px dashed'; newElem.style.color = '#ccc'; oldElem.style.display = 'none';
Описание слайда:
Отвыкаем от «плохого» Не нужно писать тонны 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';
Описание слайда:
Привыкаем к «хорошему» Большую часть щепетильной настройки внешнего вида можно вынести в CSS и поручить верстальщику: newElem.className = 'visible'; oldElem.className = 'hidden';

Слайд 13


Загрузи версталу по полной! Чтобы не выискивать все элементы, которые должны изменяться, при подготовке контента, переложи и эту задачу на верстальщика: document.body.className = 'javascript_enabled';
Описание слайда:
Загрузи версталу по полной! Чтобы не выискивать все элементы, которые должны изменяться, при подготовке контента, переложи и эту задачу на верстальщика: document.body.className = 'javascript_enabled';

Слайд 14


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

Слайд 15


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

Слайд 16


Изгоняем HTML из скрипта Выносим новый HTML-кусок в отдельный файл и получаем его с помощью Ajax Находим нужные элементы по: Идентификатору (id="headerPlace")‏ Имени класса (class="headerPlace")‏
Описание слайда:
Изгоняем HTML из скрипта Выносим новый HTML-кусок в отдельный файл и получаем его с помощью Ajax Находим нужные элементы по: Идентификатору (id="headerPlace")‏ Имени класса (class="headerPlace")‏

Слайд 17


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

Слайд 18


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

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию