Создание прогрессивно улучшенных веб-сайтов с использованием пуленепробиваемых преобразований Backbone и CSS

  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 . Начнем с роутера:

var Router = Backbone.Router.extend ({initialize: function () {App.States.firstRun = true; $ ('a [class * = js-action]'). click (function (event) {event.preventDefault ( ); window.App.Routers.Main.navigate ($ (this) .attr ('href'), true);});}});

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

Backbone.history.start ({'pushState': true});

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

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

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

if (! $. support.transition) {$ .fn.transition = $ .fn.animate; }

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

SlideLeft: function () {var self = this; self. $ el.transition ({x: -this.dimensions.x,}, self.options.animationSpeed, (function () {App.States.side = true; self. $ el.css ({'transform': '', 'marginLeft': -self.dimensions.x});})); }

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

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

Похожие

CSS трюки и SEO
Так уж сложилось, что я стою с двух сторон переднего края и SEO-баррикады. Правда заключается в том, что первым не важно влияние CSS на SEO по сравнению со вторым. Давайте начнем с этого проблемного текстового отступа. Это свойство CSS было создано для форматирования текста. text-indent позволяет делать отступ в первой строке текста. По спецификации браузер должен отображать отступ как пустое поле. Значения, которые может принимать text-indent, являются конкретными значениями в пикселях,
Все для тебя, Eunji в Guk скачать
... мой парой каждого после того, как они исполнили песню «All For You» из Reply вместе !. Юнг Юн-дзи - южнокорейская певица, автор песен, актриса и актриса вокала. Она наиболее известна. В августе Юнг записал два промо-сингла "All For You" и "Our Love Like This" с партнером по фильму Reply Seo In-guk. 5 сентября Seo In Guk & Jeong Eun Ji (APINK) - Все для тебя (Ответить OST Part.1) [Easy- Lyrics | ENG]. Все для тебя болеет, так что ты че че чон хва до ом. 27
SEO каталоги сайтов на службе высоких должностей
... кое каталог seo? Какие веб-каталоги мы уже знаем , Короче говоря - это места, которые, как следует из названия, каталогизируют сайты, разделяя их на похожие категории . Таким образом, они «заказывают» интернет-ресурсы, собирают в группы адреса, например, о строительных компаниях, компьютерных магазинах, курсах компьютерной графики и других. Они позволяют
24 вещи, которые я делаю при запуске нового блога
142 комментария 7 минут Запуск нового блога очень сложен для некоторых, но очень интересен для других. Для меня это
Низкая стоимость SEO
... для выполнения работы SEO. Как и все в жизни, вы получаете то, за что платите, и SEO не является исключением. Есть также опасность, которую вы можете получить намного меньше, конечно. Как и в любой профессии, есть много хороших операторов и много плохих. Установить четкие цели бизнеса Начните с записи целей, которые вы хотите достичь. Какую бизнес-проблему вы пытаетесь решить? Вам нужно больше конверсий? Больше трафика? Более высокий рейтинг?
Создание обратных ссылок в будущем: советы по эффективному созданию обратных ссылок
Основы построения обратных ссылок: что такое обратная ссылка? Чтобы понять, что такое обратная ссылка и как работает построение обратной ссылки, важно уточнить вопрос «Что такое ссылка?». Ссылка или гиперссылка - это просто перекрестная ссылка в тексте, которая позволяет функционально перейти на другую страницу или другой документ. Эти перекрестные ссылки также могут быть использованы на вашем собственном сайте. Под обратной ссылкой понимается ссылка с одного веб-сайта
Анушкевичус: Есть вещи, на которые нельзя жалеть денег, среди них - продвижение всего украинского
Сегодня в Ивано-Франковске председатель ОО «Столичные инициативы» Игорь Добруцкий рассказал, почему даже в такое трудное для страны время нельзя жалеть денег на культуру и развитие украинских традиций и обычаев. По его словам, без нации - нету культуры. Поэтому «Столичные инициативы» приехали на Прикарпатье.
Seo для чайников - простые советы, чтобы начать с SEO
... как и любая другая хорошая маркетинговая кампания, вам нужно определить свои цели. То есть: Вы хотите, чтобы люди покупали некоторые продукты? Вы хотите, чтобы люди связались с вами для получения услуги? Вы хотите, чтобы они подписались на рассылку? Когда вы определяете свои цели, вы только тогда можете сосредоточить свои усилия! В конце концов, SEO - это длительный процесс, и хороший органический трафик может занять до 6 месяцев. Если вы ищете
Аутсорсинг SEO | Почему аутсорсинг вашей поисковой оптимизации | Создание собственного сайта
Есть несколько преимуществ, когда дело доходит до аутсорсинга вашего поисковая оптимизация
Помогает ли покупка Google AdWords ваш рейтинг?
... для своих клиентов уже много лет. Я управлял каждой комбинацией клиентов, которые делают или не делают AdWords в сочетании с SEO. Также были случаи, когда SEO-клиенты перестали работать в AdWords или начали работать в AdWords. Могу сказать, что никогда не видел ничего, что указывало бы на то, что AdWords влиял на рейтинг. Существует ряд авторитетных SEO-исследовательских фирм, которые изучают эту проблему, и каждая из них пришла к одному и тому же выводу: AdWords не влияет
Учебник по SEO для WordPress для музыкальных сайтов - AudioTheme
Поисковая оптимизация может означать несколько вещей. Есть целые сайты и компании, ориентированные на SEO. Возможно, вы получили предложения по оптимизации вашего сайта или, возможно, начали изучать, что вы можете сделать для себя. Тема может быть довольно пугающей для музыканта, но это не обязательно. В этом посте мы расскажем об основах WordPress SEO для музыкальных сайтов. Что это такое, что он может сделать для сайта вашей группы, и один из самых простых способов убедиться, что

Комментарии

Может ли мой сайт иметь более высокий рейтинг с использованием доменного имени, богатого ключевыми словами?
Может ли мой сайт иметь более высокий рейтинг с использованием доменного имени, богатого ключевыми словами? Конечно. Может ли мой сайт иметь лучший рейтинг без ключевого слова в доменном имени? Абсолютно. Я регулярно получаю такие вопросы (или предположения). Если ваша цель состоит в том, чтобы получить лучший рейтинг с новым доменным именем, богатым ключевыми словами, воспользуйтесь моим советом и пересмотрите его. Допустим, ваш веб-сайт просуществовал 6 месяцев
Какие меры все еще подходят для создания обратных ссылок?
Какие меры все еще подходят для создания обратных ссылок? В следующем списке показаны различные варианты, в том числе множество вариантов создания бесплатных обратных ссылок (не включая рабочую нагрузку): Классическая (онлайн) работа с прессой : в первую очередь для создания бренда, с побочным эффектом установки обратных ссылок Списки ресурсов : статьи, которые собирают ссылки на определенную тему, имеют большой потенциал для добавления
Почему я должен сделать мой контент читабельным и как он влияет на мой SEO?
Почему я должен сделать мой контент читабельным и как он влияет на мой SEO? Существует множество причин, по которым вы должны сделать свой контент читабельным. Даже если поисковые системы не учитывают удобочитаемость вашего контента в своем алгоритме ранжирования поиска. Это потому, что многие алгоритмы ранжирования в поисковых системах основаны на поведении человека на странице. А улучшая читабельность вашего контента, вы улучшаете их поведение на странице, например:
Опять же, все сводится к здравому смыслу; если топ-сайты используют его, почему не все?
Опять же, все сводится к здравому смыслу; если топ-сайты используют его, почему не все? Но у Interact Marketing есть десятки клиентов, которые работали с бывшими оптимизаторами, которые не подчеркивали использование HTTPS, особенно на сайтах, которые не совершают фактические транзакции покупки. Начиная с 2017 года, Interact Marketing делает использование HTTPS для всего сайта «сильной рекомендацией» для всех клиентов - и не только для целей SEO. Зачем? Ответ тройной.
Но что, если я покажу вам один из поисковых запросов сайтов моих конкурентов, который делает владельца сайта все богаче и богаче с каждым днем?
Но что, если я покажу вам один из поисковых запросов сайтов моих конкурентов, который делает владельца сайта все богаче и богаче с каждым днем? И научить вас, как вы тоже делаете то же самое, находя ключевые слова конкурентов за пять минут? Звучит хорошо, правда? Затем продолжайте читать, и вы узнаете, как я провел кампанию по анализу ключевых слов конкурентов в течение 5 минут. Последнее, что вы хотите сделать, это получить одну вещь из сегодняшнего
Тем не менее, в условиях такой насыщенной интернет-среды в наши дни вопрос все еще может встать у вас в голове: «Стоит ли SEO больше?
Тем не менее, в условиях такой насыщенной интернет-среды в наши дни вопрос все еще может встать у вас в голове: «Стоит ли SEO больше?» Ну да, это так! Никто не может утверждать ценность рейтинга в Google. Тем не менее, проблема в целом заключается в том, стоит ли платить за SEO в конце концов. Как и любой умный бизнес-профессионал, вам нужно взвесить ваши варианты. Мы надеемся, что после прочтения этой статьи вы почувствуете то же самое, что и мы: SEO является жизнеспособным
Вы проверили все свои ссылки, чтобы убедиться, что они работают правильно и не сломаны?
Вы проверили все свои ссылки, чтобы убедиться, что они работают правильно и не сломаны? Следующие инструменты помогут вам: Проверьте скорость вашего сайта Google рекомендует время загрузки страницы менее трех секунд и что время загрузки
Теперь это означает, что вы должны просто игнорировать все ссылки, которые nofollow?
Теперь это означает, что вы должны просто игнорировать все ссылки, которые nofollow? Конечно, нет. Многие ссылки nofollow, особенно на сайтах с большим трафиком и пиаром, могут обеспечить вам большой реферальный трафик . Например, URL вашего Pinterest в профиле вашего форума больше не является следующей ссылкой. Тем не менее, вы не думаете, что люди нажимают на это, чтобы попасть на ваш сайт? Да, они делают. Так что это ссылка nofollow, которую по-прежнему очень важно создавать
Теперь он говорит себе: «Почему все серферы указывают на свой сайт, используя этот якорь, в то время как сайт называется« обувная машина »?
Теперь он говорит себе: «Почему все серферы указывают на свой сайт, используя этот якорь, в то время как сайт называется« обувная машина »? Хорошо, 1 время от времени, но это слишком много. Бум, ты падаешь. ». Белая Шляпа на самом деле хороша. Вместо того, чтобы играть в кошки-мышки с Google, другой практикой («белая шляпа») является соблюдение инструкций Google, тщательная их оптимизация. Это длиннее, кропотливее, но особенно безопаснее: использование запрещенных методов
Почему все путаница?
Почему все путаница? Поскольку поисковые системы постоянно обновляют свои алгоритмы, чтобы приносить пользу пользователям, стратегии SEO всегда меняются, чтобы лучше соответствовать новым стандартам. Вам нужно агентство, которое может не отставать. Это означает, что стратегии, которые работали вчера, могут быть устаревшими или даже вредными сегодня. Вот почему крайне важно,
Хотите кампанию «все включено», которая использует специально разработанные игры для максимальной социальной активности?
Хотите кампанию «все включено», которая использует специально разработанные игры для максимальной социальной активности? Мы тоже можем это сделать. Мы гордимся тем, что знаем ваш бизнес как можно лучше, чтобы мы могли предложить вам действительно инновационные и действенные рекомендации. Поисковая оптимизация. Забудьте о планах и пакетах с x-числом ключевых слов. Мы ориентируемся на правильные ключевые слова для того, что вы пытаетесь достичь без потерь. Ваш бизнес тратит

Подумаешь?
Теперь в чем здесь проблема?
Зачем?
Кое каталог seo?
Какую бизнес-проблему вы пытаетесь решить?
Вам нужно больше конверсий?
Больше трафика?
Более высокий рейтинг?
Чтобы понять, что такое обратная ссылка и как работает построение обратной ссылки, важно уточнить вопрос «Что такое ссылка?
То есть: Вы хотите, чтобы люди покупали некоторые продукты?

Авторизация

Реклама

Реклама

Архив сайта

    Как путешествовать и зарабатывать деньги
    Согласились бы вы путешествовать в свое удовольствие по разным городам и странам и при этом зарабатывать? Наверняка многие ответят утвердительно. Если вы хотите начать зарабатывать, путешествуя, велкам!

    Сонник: путешествие, к чему снится путешествие — полное толкование снов
    Во время сна мы путешествуем по закоулкам своего подсознания. Нам снятся самые разные сны — цветные и черно-белые. Иной раз подумаешь, что приснившееся сновидение могло прийти только к алкоголику или

    10 Доступных способов путешествовать по миру бесплатно
    10 Доступных способов путешествовать по миру бесплатно Путешествия! Как много в этом слове! Путешествия — это мечта! И все это действительно так. Хотя наверняка сейчас найдется немало скептиков, которые

    10 способов путешествовать по миру бесплатно
    Пуууутешествия! Как много в этом слове! Радость новых впечатлений, яркость неизведанных эмоций и огромный восторг, который даже взрослых и серьезных людей способен превратить в искренних, радующихся свободе

    По миру без виз
    В мае завершился очередной сумасшедший проект профессионального путешественника и писателя Валерия Шанина: кругосветное путешествие, в ходе которого туристам ни разу не пришлось заходить в иностранные

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

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

    5 сомнительных способов перемещаться во времени
    Эммет Браун утверждал, что достаточно разогнаться на "Делориане" , чтобы попасть и в прошлое, и в будущее. Хотя многие имеют дерзость не согласиться со светочем и предлагают свои теории. Впрочем, они

    Как путешествовать и зарабатывать деньги, или Творческий бизнес в дороге
    Наверняка многие ответят утвердительно. Но вот незадача: нет ни средств, ни возможности, ни даже идеи, как это можно воплотить в жизнь. Но отчаиваться рано: с последним пунктом поможет разобраться Дарья

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


Облако тегов