1. Все дело в идее
2. Подумаешь?
3. Мой подход к пуленепробиваемой магистрали для сайтов
4. Основы построения
5. Приправить вещи
6. Прогрессивные Переходы

Когда вы заканчиваете проект, у вас, как правило, гораздо более глубокое понимание проблем, связанных с проектом, чем в начале. Возможно, вы бы даже подошли к некоторым вещам совершенно по-другому. Вот почему вы должны проверить, нашли ли другие лучшие решения для проблем, с которыми вы столкнулись, независимо от того, можете ли вы что-то изменить в коде или нет.

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

Это довольно технический пост об уроках разработки моего блога с использованием HTML5 pushState, Backbone.js и CSS-преобразований. Цель состоит в том, чтобы постепенно улучшить взаимодействие с пользователем, не нанося вреда SEO и не испортив пользовательский опыт в старых браузерах.

Все дело в идее

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

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

Подумаешь?

Многие веб-сайты, использующие Backbone, имеют центральные страницы, которые управляют поведением всего веб-интерфейса. У вас может быть что-то вроде www.backbone-site.com/#/showPicture . Затем вы окажетесь на индексе, к которому подключен Маршрутизатор, который в конечном итоге вызывает метод showPicture.

Теперь в чем здесь проблема? Хотя это может работать для приложения, в котором вы инициализируете свои вещи в определенном файле, это поведение неэффективно для веб-сайтов (является ли хорошей идеей использовать магистраль для нормального веб-сайта, обсуждение ). Зачем? Потому что вы попадете на индекс сайтов, который основан на запуске метода Javascript для фактического отображения чего-либо (вы можете найти решение, чтобы избежать первоначальной выборки Вот , Но даже с этим, все еще намного лучше иметь ваши данные в DOM).

Мое решение должно решить эту проблему и сделать следующее:

• Полностью работайте без JS и постепенно улучшайте работу , если доступны JS и pushState
• Загружайте содержимое сразу, чтобы поисковые системы могли получить к ним доступ
• Разрешить пользователям загружать контент напрямую, не отображая анимацию при загрузке
• Записать данные инициализации в голову для создания экземпляров моделей

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

Мой подход к пуленепробиваемой магистрали для сайтов

Дэн Седерхольм придумал термин пуленепробиваемый веб-дизайн , Среди прочего он хотел иметь формы, которые работают с AJAX, но возвращаются к нативному поведению HTML, если Javascript или объект XMLhttpRequest недоступны. Я хотел включить эту концепцию в свой блог.

Основы построения

Мы все знаем, как противный JS может участвовать в больших проектах. Несмотря на то, что это был небольшой проект, Backbone проделал невероятную работу благодаря своим универсальным возможностям, и я искренне считаю, что это одна из лучших вещей, которая случится с миром Javascript. В то время как моя первая версия основана на классической процедуре Backbone - то есть загрузка моделей в коллекцию при их создании и последующем рендеринге данных с помощью мощного движка шаблонов подчеркивания, - решение, которое теперь работает на сервере, намного проще. Я не буду вдаваться в подробности о том, как работает Backbone (если вы ищете это, проверьте Книга Адди Османи или учебники Джеффри Уэй на tutsplus .). Я начал разрабатывать два представления, даже не думая о бэкенде:

• Просмотр сообщений в блоге
• Просмотр статьи

Затем я включил их в мою тему WordPress. Все работало так, как вы ожидаете. Обычный блог с несколькими просматриваемыми статьями. Пока ничего особенного.

Приправить вещи

Пришло время добавить немного магии на этот сайт. Теперь мы рассмотрим те несколько строк кода, которые отвечают за пуленепробиваемую магистраль , кросс-браузерные преобразования CSS и pushState в HTML5 . Начнем с роутера:

Строка 4 является интересной частью здесь. Мы предотвратим поведение привязки по умолчанию (перезагрузка страницы) для всех элементов с префиксом js-action в соответствии с JEM-нотация БЭМа и позвольте маршрутизатору обработать запрос. Затем мы сможем легко нацелить все якорные элементы, которые добавляют функциональность Javascript к приложению. После этого мы легко настраиваем HTML5 pushState, который не позволяет браузеру помещать хештег в URL:

Если сейчас щелкнуть URL-адрес с префиксом js , маршрутизатор вступит во владение и загрузит соответствующую статью. Если Javascript каким-то образом не загрузится, пользователи даже не заметят, и поисковые системы тоже не будут беспокоиться . Отличительной особенностью этого факта является то, что если вы перенаправляетесь с внешнего сайта на статью на этом сайте, вы сразу же увидите эту статью, в то время как меню асинхронно загружается в фоновом режиме. Вы можете попробовать это Вот ,

Прогрессивные Переходы

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

То, что здесь происходит, довольно гладко. JQuery тесты для поддержки перехода. Если он доступен, он заменит библиотеку анимации по умолчанию и заменит ее на транзит полностью совместимая с браузером библиотека эффектов трансформации css, построенная на jQuery. Имейте в виду, однако, чтобы всегда анимировать значения x и y. Переходные поля никогда не дадут вам такой плавной анимации . Однако есть некоторые браузеры, которые не очень хорошо поддерживают x и y. Вы можете решить эту проблему, указав дескриптор afterFinish, который меняет значения translate3d на значения marginLeft после завершения перехода. Это даст вам еще больше преимуществ. Фиксированная позиция снова будет работать как положено (после использования translate3d она будет работать по-другому). Я не хочу сейчас углубляться, но следующий код довольно легко объясняет эту концепцию (строка 8-11):

Вот и все. Есть много вещей, которые я до сих пор совершенствую здесь и там, и, конечно, есть еще несколько сложностей, но приведенный выше код в основном объясняет эту концепцию. Это действительно решение, которое плавно ухудшается, если JS или ключевые функции UX недоступны.

Спасибо за чтение, надеюсь, это было как-то понятно. Отзывы приветствуются @twitter ,

Похожие

Комментарии