Вчера я написал свой первый пост на Хабрахабр. Он, в какой-то мере, оказался заверщающим (для меня) в проекте с астронавтом. Дальше будут исправления багов и мелких недочетов, но принципиальных изменений в ближайшем будущем скорее всего не будет. С понедельника будет новый проект, поэтому сейчас я хотел бы упомянуть еще пару штрихов в плане сайта с астронавтом.
Пункт 1. Определение языка.
JavaScript-ом можно определить язык, который выбран у пользователя в браузере или в системе:
var language = ( navigator.language || navigator.systemLanguage || navigator.userLanguage ).substr(0,2).toLowerCase(); if ( h !== "ru" ) h = "en";
На сайте с астронавтом от этого зависит язык, на котором вылетают описания событий. Проверить другой язык можно, например, выбрав в Chrome другой язык отображения:
Всего на сайте два языка - английский и русский. Если у пользователя выбран любой другой язык, то будет отображаться английский.
Пункт 2. Распределение нагрузки.
Напуганные таким понятием как хабраэффект, мы решили подстараховаться и минимизировать нагрузку на сервер. Скажу наперед, что этого можно было не делать, наш сервер бы справился. Сам сайт не содержит каких-либо серверных скриптов, так что минимизация заключалась в оптимизации файлов на сервере. Но из всех файлов сайта заметно выделялся только спрайт с астронавтом и положением его рук и ног. Было решено продублировать его на несколько серверов, а через js случайно выбирать с какого сервера брать. К слову, уже к моменту оптимизации спрайт и так подгружался через js.
function getRandomInt(min, max){ return Math.floor( Math.random * ( max - min + 1 ) + min ); } var srcss = ["server1/img.png","server2/img.png","server3/img.png"]; var img_i = getRandmonInt( 0, srcs.length - 1 ); var img = new Image(); img.onload = function(){ // подставляем нашу картинку куда надо }; img.onerror = function(){ srcs.splice( img_i, 1 ); if ( srcs.length > 0 ) { img_i = getRandmonInt( 0, srcs.length - 1 ); img.src = srcs[img_i]; } else { alert("Sorry, our server over capacity"); } }; img.src = srcs[img_i];
Все просто: при ошибке загрузки указываем новый адрес и пытаемя загрузить уже с него.
Пукнт 3. Определение мобильных устройств.
CSS3 transition выглядели на экранах смартфонов ужасно, поэтому было приянято решение скрыть их и выводить сразу ссылку на приложение в AppStore. Не знаю как все остальные определяют мобильные устройства, но я нашел вот такой метод. Опять же через JavaScript.
var Apple={}; Apple.UA = navigator.userAgent; Apple.Device = false; Apple.Types=["iPhone","iPod","iPad"]; for( var n = 0; n < Apple.Types.length; n++ ){ var r = Apple.Types[n]; Apple[r] = !!Apple.UA.match(new RegExp(r,"i")); Apple.Device = Apple.Device || Apple[r] }
Все просто - ищем в строке UserAgent упоминая о iOS устройстве. Аналогично для Android и Windows Phone устройств.
Все эти моменты не попадали под тему статьи на хабре, поэтому приютились здесь. На этом все. До новых проектов!
Комментариев нет:
Отправить комментарий