absolvo Feb 22 2008 at 08:41

Смена оформления сайта в зависимости от времени суток.

1 min

12K

Website development*

+19

Comments 75

XXXVII Feb 22 2008 at 08:44

На входной странице нашего последнего проекта мы сделали такую опцию во флэше тоже=)

absolvo Feb 22 2008 at 08:49

Красиво =)
А какие промежутки времени? Вернее сколько их?

XXXVII Feb 22 2008 at 08:57

22-6 ночь
6-10 утро
10-19 день
19-21 вечер
Сделали так. Примерно совпадает такое деление с временами суток. В принципе, это все достаточно легко поправить при необходимости

absolvo Feb 22 2008 at 08:59

А ещё можно извратиться и замутить смену оформления по часам, с поправкой на время года. =)

XXXVII Feb 22 2008 at 09:00

Была еще идея синхронизации с солнечным календарем для нашего региона, но решили не делать этого))

absolvo Feb 22 2008 at 09:01

Хотя, в общем, ничего сложного. =)

UFO just landed and posted this here

XXXVII Feb 22 2008 at 21:49

Ну положение посетителя в данном случае неважно, т.к. данные предлагаются для курорта

xcopy Feb 23 2008 at 12:09

Не забываем про регион посетителя и время года.
Ведь, например, зимой не всегда с 10 до 19 день.

XXXVII Feb 25 2008 at 21:54

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

xcopy Feb 26 2008 at 05:10

Думаю Вы не очень понимаете ситуацию. Речь идет об автоматической смене стилей в зависимости от времени года. Хочу напомнить, что в году их 4, а не 2.

XXXVII Feb 26 2008 at 08:36

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

xcopy Feb 26 2008 at 10:22

> И скорее всего для летнего варианта страницы придется менять не только стиль, но и html-код.

Удачи Вам! Надеюсь Вам удастся осуществить все Вами задуманное. :))

IceWater Feb 22 2008 at 12:33

Супер! Очень красиво, одно нарекание. Когда жмёшь кнопку спуститься с горы - грузится видео. Когда жмёшь её второй раз после того, как посмотрел видео - оно грузится ещё раз. Зачем? Почему не сразу же повторяется ролик?

XXXVII Feb 22 2008 at 12:38

Хмм.. Посмотрим, что можно сделать. Спасибо=)

XXXVII Feb 22 2008 at 14:10

На самом деле видео берется из кэша, просто в Mozilla прогресс-бар медленно грузится - особенность браузера

UFO just landed and posted this here

XXXVII Feb 22 2008 at 23:49

Подумал, что кому-то может пригодиться просто

Denys Feb 23 2008 at 05:33

Я такое на php реализовал :)
Зачем? Почему?
Ответ прост:
Для ява-скрипта или флэша берётся время компа.
В моем случаи нужно было реализовать относительно часовой зоны, но так, если заходишь с Киева то на сайте ночь, а если с Лос-Анджелеса - день.

Да и плюсов получаем побольше:
1. 90-95% браузеров поддерживают Дж-Эс скрипты,
2. возможности для моб.-телефонов, которые не кушают Дж-Эс скрипты,
3. нет потребности совмещать скрпит с иными, если таковы используются,
4. уменьшение запросов на сервер и мирового трафика,
5. время суток на сайте всегда будет зависит только времени часового пояса.
:)

absolvo Feb 23 2008 at 05:36

JS юзается только по необходимости наличия локального времени.
С вашими задачами лучше справиться PHP - тут без сомнений.

XXXVII Feb 25 2008 at 21:57

У нас это реализовано через серверный javascript, тк в используемой версии xslt нет функций времени=)

Cake_Seller Feb 25 2008 at 02:28

Бомба! Нажал на кнопку "спустить с гор"... и мне аж туда на курорт захотелось! Дизайнер молодец - поработал на славу!!!

XXXVII Feb 25 2008 at 21:58

Спасибо, передам дизайнеру=)

leonard Mar 6 2008 at 16:37

Странные у вас вкусы...

Cake_Seller Mar 6 2008 at 16:41

Чего это странные?! Сделано довольно креативно! Идея классная, да и исполнение на уровне.

leonard Mar 6 2008 at 19:15

Дело ваше) Лично мне кажется что исполнение противно.

nekt Feb 22 2008 at 09:03

я бы наверное делал чтобы фон менялся в реальном режиме времени :) Чтоб зашел на сайт... сидишь... потом вдруг смотришь - опа. Уже луна. Пора спать.

Wonder Feb 22 2008 at 09:28

Так долго сидеть на сайте, не обновляя страниц, чтобы стало заметно изменение во времени суток?

nekt Feb 22 2008 at 11:06

А почему нет? Зашел, отвлекся, вернулся - цвета уже сменились :) Плюс зависит от сайта... на хабре к примеру многие сидят часами.

Wonder Feb 22 2008 at 11:31

Без перезагрузки страниц? ))

absolvo Feb 22 2008 at 11:32

Эх - тяжко это будет.

nekt Feb 22 2008 at 11:51

ну да. Если реализовать без перезагрузки... то оно и с перезагрузкой работать будет :)

tapin13 Feb 22 2008 at 23:53

для кого луна спать пора, а для кого и солнце спать пора :)
Я например сова.

nekt Feb 28 2008 at 15:31

Опа. Уже луна. Значит вставать пора :)

Vox Feb 22 2008 at 10:12

Эта штука, как и разные приветствия были популярны в 90е, потом они как то отмерли. А вот легендарную надпись "Under construction" заменила "Beta".

XXXVII Feb 22 2008 at 10:34

Видимо сейчас начинается nuWave)

Vox Feb 22 2008 at 10:56

nuWave

Это какая то неизвестная мне штука или опечатка "new wave"?

XXXVII Feb 22 2008 at 10:59

вариант написания new wave, да

Di_Mon Feb 22 2008 at 12:20

А если аудитория сайта по всему миру? Как можно подстроится под часовой пояс пользователя?

-1

iderins Feb 22 2008 at 12:31

JavaScript смотрит локальное время пользователя, на его машине.

shadeR Feb 22 2008 at 14:00

И это правильно будет!

b00taNik Feb 22 2008 at 12:42

getTime работает на стороне клиента, следовательно и время берет клиентское. Поэтому когда в России версия сайта будет утренняя, в америке будет показываться ее "вечерняя версия"

spelesto Feb 22 2008 at 14:07

Отличная информация!
Хоть тема и не нова, но замечательный пример!
Мое почтение

IgorTomych Feb 22 2008 at 16:33

кстати, большенство тем на google.com/ig тоже меняются от текущего времени :)

absolvo Feb 22 2008 at 16:36

Не знал, пошёл следить, спасибо :)

maokko Feb 22 2008 at 16:50

Ну, не самое новое решение. Примерно по тому же скрипту давненько функционирует сайт нашего интернет-агентства. В Photoshop отрисованно 3 версии сайта: день, вечер, ночь. И тот же скрипт меняет css файл с привязкой к одному из дизайнов.

absolvo Feb 22 2008 at 17:02

Не новинка ниразу:
"Подобное конечно не новинка"

prolis Feb 22 2008 at 16:52

А нет ли такого психологического момента, как привыкание? Иногда бывает что вот сменишь дизайн, кажется что стало вау, а старые пользователи первое время ворчат, что раньше было как-то лучше, привычнее.
А так по нескольку раз в день шокировать пользователей. Лучше тогда дать пользователю самому выбрать для себя одну из предустановленных тем.
P.S. Вариант с солнцем/луной тоже убогий.

absolvo Feb 22 2008 at 17:02

Можно ограничиться сменой не всего оформления, а, к примеру, логотипа или шапки.

prolis Feb 22 2008 at 17:18

Это всё полумеры. Цель - кастомизация сайта под предпочтения конкретного посетителя (CRM). От цвета ему не тепло, не холодно.
Ширше надо мыслить - контент менять как-то.

UFO just landed and posted this here

piloter Feb 22 2008 at 17:51

Неее, надо реальную сиутацию оторбажать. Т.е. требуется синхронизация с gismeteo.ru

Razvedcheg Feb 22 2008 at 18:03

угу, со всеми багами. отобрази осадки при -120 градусов ))

katremer Feb 22 2008 at 18:08

Я бы лучше посмотрел на что-нибудь неожиданное, например зимой - на лето, днем - на тихую ночь.

Ну хотя для офисного работника, который в последнее время солнце видит только на обеде, и так сойдет.

4g3n7 Feb 22 2008 at 20:51

Хы, прикольная идея!

scu Feb 22 2008 at 21:23

На одном из проектов (http://www.termico.ru) - день и ночь соответственно, но проект 2006 года :-)

krylatij Feb 22 2008 at 22:35

Извините конечно, но это элементарная задача для javascript программера.
И если честно, то такая задумка лично меня как пользователя раздражает

romel Feb 22 2008 at 23:01

Позвольте спросить. Почему?

krylatij Feb 22 2008 at 23:14

Если честно, то меня раздражает внимание ко мне со стороны сайта. Как то поздравления с днем рождения и новым годом. Вот такой я консервативный и пользуюсь сайтами как источником информации. Возможно я фрик, но тем не менее.

UFO just landed and posted this here

krylatij Feb 22 2008 at 23:11

я им не пользуюсь, извините. Поэтому не могу адекватно отреагировать

UFO just landed and posted this here

krylatij Feb 22 2008 at 23:54

:) я тоже не люблю холивары :))

Piplun Feb 23 2008 at 09:18

мож я чего не понимаю, но почему скобка, закрывающая функцию, стоит после той штуки, которая убирает JS от браузеров не видящих его?

document.write(css);
// End -->
}

Jenek Feb 23 2008 at 09:59

Реализация не самая удобная, хотя вариант document.write и пачкой css файлов весьма популярен, я не понимаю в чем смысл городить такое.

Делается так.
HTML



<body class="night">

Текст

</body>

CSS



.night { background: black; color: white; }

.day { background: white; color: black; }

JS (позволю себе скопировать часть от вас и особо не тестить, метод проверенный, а мелкие ошибки устранить не сложно)



function getClass()

{

  datetoday = new Date();

  timenow=datetoday.getTime();

  datetoday.setTime(timenow);

  thehour = datetoday.getHours();



  if (thehour > 20)

    document.body.className = "night";

  else

    document.body.className = "day";

}

если нужен реалтайм, вешаем getClass на таймер.

Ссылки по теме:
Переключатель стилей
Адаптивная разметка

Jenek Feb 23 2008 at 10:36

Посмотрел на сайт источник, весьма интересный сайтец, нет я понимаю, что никто не идеален и все иногда нарушают стандарты, но:
доктайп XHTML 1.0 Strict потом <SCRIPT LANGUAGE="JavaScript"><!-- а потом еще и document.write.

Что-то я злой сегодня, скорее всего автора к веб-разработке не имеет отношения и подправил готовую тему :), но согласитель хороший кирпич в огород адептов XHTML, именно благодаря таким сайтам HTML будет всегда, а браузерам нужно учиться переваривать код полный такой каши.

simpel Feb 24 2008 at 17:54

Прочитав статью стал листать комментарии в поисках вот именно такого :) еслиб не нашел - написал бы его сам.
Действительно, зачем делать пачку CSS-файлов, когда достаточно менять класс у body.

alexwolf Feb 24 2008 at 20:28

Пару лет назад я тоже хотел прикрутить такую штуку к одному сайту. Только я пошел немного дальше: еще одним из параметров должна была стать забортная погода :) Просуммировав все это безобразие и оценив плюсы и минусы отложил реализацию до лучших времен.

caIIIa Feb 26 2008 at 16:32

Хорошая идея, я тоже делаю нечто подобное, но у меня просто "день" и "ночь"

kievskii Mar 5 2009 at 15:10

а как вы эт сделали? а то у меня после 0 вкл. дневной режим

caIIIa Mar 5 2009 at 18:31

Не используйте для этого JS, попросите знакомого пхпшера написать вам скрипт, который слушает текущее серверное время и содержит в себе оба варианта CSS и выдает их либо выдает содержимое одного из двух файлов, делов-то… там полторы строчки.

kievskii Mar 5 2009 at 18:33

мне нужно время пользователя.

а то js использует, то да. немного грузит.

Но уже ситуацию разрулил. теперь двигаться в сторону быстродействия.

ekim Feb 26 2008 at 17:44

Мне нравится подобная идея на Яндекс.Погода (цвет фона меняется в зависимости от температуры)

kievskii Mar 5 2009 at 13:34

а не подскажите что у меня не так.

хочу что был с 20:00 и до 8:00 был один стиль. а с 8:00 до 20:00 второй. адреса прописал верное к ЦСС

но проблема в другом. то что с 20 до 00:00 стоит именно тот стиль который должен быть. а вот с 01:00 ставится тот который должен утром стоять.

вод код. что не так?

<script language=«Javascript»>

}
</script>
<script language=«javascript»>getCSS();</script>
<noscript>
</noscript>

kievskii Mar 5 2009 at 14:40

чет код не написало. может в личку сбросить?

Show the best of all time