Создание моего сайта Noscript-совместимым - PullRequest
Новая
       4

Создание моего сайта Noscript-совместимым

1 голос
/ 08 февраля 2011

Я почти закончил создание сайта с именными табличками для себя с нуля, как для обучения, так и для официального размещения своего присутствия в Интернете. Я сделал круто выглядящий (по крайней мере, мне так кажется) сайт с вкладками, который использует AJAX и привязку навигации для переключения между вкладками. Я также собрал скрипт изменения стиля, который использует куки для запоминания вашего выбора стиля.

Теперь вопрос на шестьдесят четыре тысячи долларов: как сделать этот сайт удобным для людей, которые решили отключить JavaScript? В настоящее время пользователь без сценариев может видеть раздел «Обо мне» и ничего более. Я также поставил наверху баннер, направляющий их на мою страницу «noscript», которой на данный момент не существует. Является ли лучший вариант страницей с надписью, которая показывает все содержимое сразу? Есть ли метод CSS, чтобы избежать JavaScript для переключения вкладок? Или есть какой-то способ показать все содержимое главной страницы пользователям без использования сценариев, но при этом для других есть версия с расширенными возможностями сценариев?

Мой сайт находится по адресу scolbyme.webs.com . Я ценю любые идеи, которые вы, ребята, придумали!

P.S. Бонусные баллы для человека, который может назвать цвет фона.

Ответы [ 3 ]

4 голосов
/ 08 февраля 2011

Если вы беспокоитесь о людях, у которых отключены скрипты, вы использовали неправильную процедуру проектирования;Вы должны были создать сайт, который будет работать без сценариев, и позже добавить улучшения ajax / script.

Изменить его сейчас будет довольно сложно, но, возможно, вы можете сделать все вкладки обычными ссылками и сделать что-то вродешаблон, который покажет правильный макет и прочитает конкретное содержимое выбранной вкладки.

1 голос
/ 08 февраля 2011

1 - замените вашу навигацию следующим образом: 

<noscript>
    <nav>
        <div id="twitternav"><a href="?r=twitter">Twitter</a></div>
        <div id="tumblrnav"><a href="?r=tumblr">Tumblr</a></div>
        <div id="flickrnav"><a href="?r=flickr">Flickr</a></div>
        <div id="facebooknav"><a href="?r=facebook">Facebook</a></div>
        <div id="devnav"><a href="?r=dev">Dev</a></div>
        <div class="active" id="aboutnav"><a href="?r=about">About Me</a></div>
    </nav>
</noscript>
<div id="nav_with_script"></div>

Когда устройство является мобильным телефоном или не поддерживает javascript, noscript показывает альтернативное меню, ваши ссылки будут? R = twitter и НЕ #twitter,Последний div - это контейнер для меню с javascript.Вы заполняете это нажатием этого тега внутреннего заголовка кода: 

<script type="text/javascript">
document.getElementById('nav_with_script').innerHTML = '<nav><div id="twitternav"><a href="#twitter">Twitter</a></div><div id="tumblrnav"><a href="#tumblr">Tumblr</a></div><div id="flickrnav"><a href="#flickr">Flickr</a></div><div id="facebooknav"><a href="#facebook">Facebook</a></div><div id="devnav"><a href="#dev">Dev</a></div><div class="active" id="aboutnav"><a href="#about">About Me</a></div></nav>';
</script>

, если устройство не имеет поддержки javascript, noscript будет показан и не будет выполнен.если устройство поддерживает javascript, внутреннее меню show_with_script div меню show.

2 - измените свою страницу на работу с отображением содержимого в соответствии с $ _GET ['r']

Примерно так: 

<div id="twitter"<?php if($_GET['r'] == 'twitter') { echo ' class="active"'}?>></div>
<div id="thumblr"<?php if($_GET['r'] == 'thumblr') { echo ' class="active"'}?>></div>
...

И это доступно в старых устройствах.Это исправительное решение, с момента создания проекта создаются хорошие ненавязчивые коды.

1 голос
/ 08 февраля 2011

Я бы согласился с jeroen, вы хотите сначала создать сайт нормально (без ajax), а затем добавить слой js.

Если вы создаете каждую вкладку как отдельную страницу и помещаете содержимое страницы в div с определенным идентификатором, вы можете довольно легко выполнить вызов ajax с jquery, который может захватывать содержимое со страницы и только захватывать внутри div, который содержит контент, а затем поместите его на свою главную страницу. так, тот же эффект, но сайт будет работать полностью без сценария.

...