А в прошлой части, как вы помните, мы долго рассказывали о разработке подвала, и даже внедрили в него рассылку из Twitter’а. Сегодня же мы собираемся закончить работу над нашим подвалом, сделав его адаптивным, и подключив jQuery, чтобы рассылка из Twitter’а, наконец, заработала.
Предыдущие части данного руководства вы можете найти по ссылкам:
* Разработка адаптивного веб-сайта: фоновые изображения
* Разработка адаптивного веб-сайта – часть 2: навигация и контент
* Разработка адаптивного веб-сайта – часть 3: слайдер работ на главной странице
* Разработка адаптивного веб-сайта – часть 4: завершаем разработку слайдера на главной странице
* Разработка адаптивного веб-сайта – часть 5: подвал
Если ваши наработки внезапно съел ваш пёс, то не беда, вы можете скачать исходники здесь.
Сегодня мы начнем работу с рассылки последних твитов, и разделим этот этап на три части. Сначала нам нужно запросить твиты, и реализовать это таким образом, чтобы у нас была возможность с легкостью менять аккаунты-источники, настраивать количество отображенных твитов, а также внешний вид элемента, который будет отображать их. Для того чтобы сделать это, мы применим AJAX, с помощью которого мы будем посылать запрос в АПИ Twitter’а в JSON-формате, а затем обрабатывать их. Наш код выглядит следующим образом.
JQTWEET = {
user: 'TheScottStanton',
numTweets: 1,
appendTo: '.twitter',
loadTweets: function() {
$.ajax({
url: 'http://api.twitter.com/1/statuses/user_timeline.json/',
type: 'GET',
dataType: 'jsonp',
data: {
screen_name: JQTWEET.user,
include_rts: true,
count: JQTWEET.numTweets,
include_entities: true
},
success: function(data, textStatus, xhr) {
var html = '<div class="tweet">TWEET_TEXT<div class="time">AGO</div>';
for (var i = 0; i < data.length; i++) {
$(JQTWEET.appendTo).append(
html.replace('TWEET_TEXT', JQTWEET.ify.clean(data[i].text))
.replace(/USER/g, data[i].user.screen_name)
.replace('AGO', JQTWEET.timeAgo(data[i].created_at))
.replace(/ID/g, data[i].id_str)
);
}
}
});
},
Далее нам нужно будет создать динамичный калькулятор, который сможет подсчитывать, сколько времени прошло с момента публикации твита. Начнем с того, что зафиксируем время, в которое он был опубликован (для чего нам потребуется сделать исключение для IE, так как этот браузер не поддерживает нестандартные даты в Ruby). После этого мы создадим серию заявлений if для того, чтобы отображение нашего времени было корректным и представляло собой нечто вроде «секунду назад», «около часа назад» и т.д.
timeAgo: function(dateString) {
var rightNow = new Date();
var then = new Date(dateString);
if ($.browser.msie) {
then = Date.parse(dateString.replace(/( +)/, ' UTC$1'));
}
var diff = rightNow - then;
var second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24,
week = day * 7;
if (isNaN(diff) || diff < 0) {
return "";
}
if (diff < second * 2) {
return "that just happened";
}
if (diff < minute) {
return Math.floor(diff / second) + " seconds ago";
}
if (diff < minute * 2) {
return "about 1 minute ago";
}
if (diff < hour) {
return Math.floor(diff / minute) + " minutes ago";
}
if (diff < hour * 2) {
return "about 1 hour ago";
}
if (diff < day) {
return Math.floor(diff / hour) + " hours ago";
}
if (diff > day && diff < day * 2) {
return "yesterday";
}
if (diff < day * 365) {
return Math.floor(diff / day) + " days ago";
}
else {
return "back in the dark ages";
}
},
И наконец, нам нужно преобразовать ссылки, называемые модным словечком «хэштэги» в обычные ссылки старого образца, чтоб любой читатель мог кликнуть по ней, и перейти на источник.
ify: {
link: function(tweet) {
return tweet.replace(/b(((https*://)|www.)[^"']+?)(([!?,.)]+)?(s|$))/g, function(link, m1, m2, m3, m4) {
var http = m2.match(/w/) ? 'http://' : '';
return '<a class="twtr-hyperlink" target="_blank" href="' + http + m1 + '">' + ((m1.length > 25) ? m1.substr(0, 24) + '...' : m1) + '</a>' + m4;
});
},
at: function(tweet) {
return tweet.replace(/B[@@]([a-zA-Z0-9_]{1,20})/g, function(m, username) {
return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>';
});
},
list: function(tweet) {
return tweet.replace(/B[@@]([a-zA-Z0-9_]{1,20}/w+)/g, function(m, userlist) {
return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/' + userlist + '">@' + userlist + '</a>';
});
},
hash: function(tweet) {
return tweet.replace(/(^|s+)#(w+)/gi, function(m, before, hash) {
return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>';
});
},
clean: function(tweet) {
return this.hash(this.at(this.list(this.link(tweet))));
}
} // ify
};
$(document).ready(function () {
JQTWEET.loadTweets();
});
И на этом все! Сохраняйте документ в папку js. Мы назвали наш файл twitter.js. А затем закройте его.
Теперь давайте откроем файл index.php, чтобы включить туда ссылку на соответствующий скрипт и «оживить» нашу рассылку из Twitter’а. Наш скрипт мы разместили сразу после ссылки на файл каскадных таблиц стилей.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/twitter.js"></script>
Теперь мы вроде бы закончили всю работу, связанную с главной страницей. Теперь закрывайте этот файл, и давайте закончим работу над файлом main.css, а точнее, сделаем наш подвал более адаптивным.
Открывайте файл main.css и прокрутите его до первого media query для планшетных устройств при горизонтальной ориентации. Нашу мини-навигацию мы собираемся изменить на вертикальный список, и задать нашему классу .footerLeft значение ширины в процентном соотношении таким образом, чтобы наше меню могло изменяться в размере. Здесь нам также необходимо задействовать класс .stackIcons. Таким образом мы оформили наши элементы, и сделали их адаптивными. Далее нам обязательно нужно будет скопировать данный отрывок кода под следующим media query для планшетных устройств в портретной ориентации. Это код, который мы используем для media queries, как в случае с портретной ориентацией, так и при альбомной.
.footerLeft {
width:32.5%;
}
.footerLeft ul li{
width:65%;
text-align:right;
float:left;
}
.stackIcons {
position:relative;
top:-100px;
float:right;
width:5%;
padding:0 10%;
}
Теперь, когда мы закончили разработку касательно планшетных устройств, можно приступать к части с мобильными телефонами. Так как на мобильных устройствах все становится еще более узким, здесь мы сделаем так, что три секции нашего подвала выстроятся в вертикальном порядке друг за другом, что означает, что наш подвал станет высоким, а не широким. Также учтите, что здесь мы избавляемся от правой границы, и вместо нее применяем нижнюю границу, чтобы секции отделялись друг от друга. Кроме этого здесь также можно отметить простенькую стилизацию, центрирования текста и иконок социальных сетей.
footer {
height:70%;
}
.footerLeft {
width:100%;
border-right:none;
border-bottom:1px solid #fff;
padding-bottom:50px;
}
.footerLeft ul li {
display:block;
text-align:center;
}
.stackIcons {
width:150px;
position:relative;
margin:0 auto;
}
.twitter {
width:90%;
border-right:none;
border-bottom:1px solid #fff;
padding:0 5%;
}
.contact {
width:100%;
border-right:none;
border-bottom:1px solid #fff;
text-align:center;
}
На этом мы заканчиваем разработку подвала. Теперь у вас есть полностью готовая адаптивная главная страница сайта! В следующем уроке мы займемся разработкой внутренних страниц, так что не забывайте проверять обновления на нашем сайте!
* Скачать исходный код примера, разработанного в ходе руководства.