—»     —»   Разработка адаптивного веб-сайта – часть 6: подвал – продолжение
  Раздел: Руководства   Комментариев: 1  

Разработка адаптивного веб-сайта – часть 6: подвал – продолжение



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

А в прошлой части, как вы помните, мы долго рассказывали о разработке подвала, и даже внедрили в него рассылку из Twitter’а. Сегодня же мы собираемся закончить работу над нашим подвалом, сделав его адаптивным, и подключив jQuery, чтобы рассылка из Twitter’а, наконец, заработала.

Разработка адаптивного веб-сайта – часть 6: подвал – продолжение

Предыдущие части данного руководства вы можете найти по ссылкам:

* Разработка адаптивного веб-сайта: фоновые изображения
* Разработка адаптивного веб-сайта – часть 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;
}

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

* Скачать исходный код примера, разработанного в ходе руководства.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн, Footer
Опубликовал Design FactoRy   Прочитано (раз): 4421   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 1 июля 2012 @ 21:59
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Хорошая статья, познавательно.


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930