В свободное время я пишу ленточный движок для веб-сайтов, используя модные современные технологии. Эта статья — продолжение заметок (Tips & Tricks) про его создание.
Часть 1 находится здесь.
Как же дела у каретки за прошедший с момента публикации месяц? Новости читаю, дела идут, 200 источников, 150 тысяч записей в месяц, данные для анализа собираются. Трафик устойчиво низкий, по 80-100 человек в сутки (дубликат контента).
Мегапопулярные Фейсбук, ВК, Твиттер, Пинтерест — всё это так называемые «ленты». Лента — весьма удобный для человека способ предоставления информации, если её можно как-либо упорядочить. История циклична, всё повторяется — именно таким способом и выводили результаты расчётов первые компьютеры, только на рулоны бумаги, а не на мониторы 1920*1080*32.
Вычитал я в новостях, что туристический сезон начинается. «А ведь я тоже кое-где был — можно и поделиться» — пришла мысль, и сегодня мы будем затачивать ленту под развлекательный мини-бложек. Турлента — с гейшами и путешествиями под катом.
PHP
include("/config/config.php");
config.php: $dbhost = "localhost"; $dbname = "name" $dbuser = "login"; $dbpass = "password";
Знакомо? Конечно. Вот только в некоторых неблагоприятных случаях, которые не так уж и редки, в браузер может выдаться содержимое config.php самым что ни на есть plain текстом. На php.net рекомендуют всегда поступать следующим образом:
ob_start();
include("/config/config.php");
ob_end_clean();
Буферизация вывода гарантирует, что в случае ошибки интерпретатор не сдаст все явки на блюдечке первому попавшемуся пользователю.
Не забываем о meta-тэгах. Поисковые машины весьма активно их используют — используем и мы.
if (!empty($safesearch)) {
print "" .$safesearch. " - $threadn";
print "<meta name="title" content="$thread - " .$safesearch. "" />n";
print "<meta name="description" content="$sitename, " .$safesearch. "" />n";
print "<meta name="keywords" content="$sitename, " .implode(", ", explode(" ", $safesearch)). "" />n";
}
Теперь надо немного подкрутить поиск под новые нужды. К примеру, многие будут искать Голландию, но страна-то называется Нидерланды! Помимо этого, будут искать и голандию и даже галандию. Сделать какое-то подобие яндекса несложно — заполняем массив словарём слов для замены, проверяем вхождения in_array, выводим предложение о замене.
Каюсь, не удержался, после алгоритма добавил ещё одну строчку :)
if (mb_strpos($safesearch, 'дудасик', 0, 'UTF-8') !== false) $maybe = "Нидерланды";
Ну и ещё чуть-чуть php:
// else print "Такой страны не существует. Если же Вы новопроизведённый диктатор, пожалуйста, организуйте Министерство туризма. Ждём сообщений через форму на нашем сайте.";
Jquery
В первую очередь выражаю благодарность читательу ishamshur за Jquery плагины Socializer и рейтинга. Первый позволяет организовать скользящую панель с иконками для социальных сетей, второй, соответственно, отвечает за звёздный рейтинг. Плагины простые и удобные, установка очень подробно расписана автором, с примерами и демками.
Добавим ещё чуть-чуть красивости. Пока пользователь ждёт подгрузки следующего ajax блока, выведем ему прелоадер. Чуть модифицируем javascript из предыдущей статьи:
var shown = 30;
$(window).scroll(function() {
if ($(document).height() - $(window).height() <= $(window).scrollTop() + 1) {
if (shown > 270) return false;
// создаём прелоадер
$('#bigblock').append('<div class="ldr"><img src="/images/ajax-loader.gif"></div>');
$.post('/more.php',
{'shown':shown},
function(data) {
$('#bigblock').append(data);
// убиваем прелоадер
$('.ldr').remove();
});
shown = shown + 30;
}
});
Ещё пара строчек на яваскрипте — и у нас готов живой предпросмотр в интерфейсе добавления:
function TChange() {
var div = document.getElementById("preview");
div.innerHTML = document.myform.page.value;
}
<textarea required onKeyUp="TChange()" name="page">
HTML5
Пользователи охотно делятся весёлыми картинками в социальных сетях. Лично мне нравится код кнопки отправки радости друзьям от addthis.com — копируем код скрипта в шаблон, скрипт автоматически учитывает все страницы и ведёт нехилую статистику. У сервиса недавно обновился интерфейс, который бесплатно показывает аналитику. У сервиса есть и платные подписки, но нам это не нужно, для наших целей за глаза хватает и бесплатных возможностей. Для сбора внутренней статистики по сайту традиционно используем Google Analytics, из отечественных рейтингов будем использовать Liveinternet — его статистика впечатляет.
Чем мне нравится html5 — не надо больше извращаться с проверкой форм в html на клиентской стороне. Ставим атрибут required у input, textarea или любого другого элемента формы — и браузер всё проверит за нас. На серверной стороне, конечно же, проверка присланных данных необходима всегда.
Тэги audio и video — то, чего давно не хватало в стандарте, ведь каналы давно уже расширились — поддержки мультимедиа. К сожалению, мы живём не в идеальном мире. Во всех браузерах (IE, Safari, Chrome, Opera, FF) заиграл без проблем только формат ogg, честь и хвала Vorbis. А вот с форматами видео у меня так и не получилось добиться единения от браузеров, что воспроизводилось в одном браузере, упорно не желало проигрываться в другом. Со временем эту ситуацию обещают исправить, и наступит рай для мультимедийных сайтов. И, наверное, для копирастов тоже.
<audio controls autobuffer>
<source src="/audio/file.ogg" type="audio/ogg; codecs=vorbis" />
</audio>
Проверять html на соответствие стандартам следует, как всегда, с помощью валидатора w3c
http://validator.w3.org/
CSS3
Раз уж в моде скруглённые уголки, давайте их сделаем. Пока что приходится делать это так:
.container {
background-color: #f2f2f2;
margin: 0 auto;
width: 800px;
padding: 10px 10px 10px 10px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 5px;
-khtml-border-radius: 10px;
}
Использовать префиксы с минусом очень нехорошо, но это самый простой и универсальный способ.
Также стили отвечают за фоновую картинку, растянем её в модном нынче стиле и сделаем неподвижной:
body {
background: url('/images/background.jpg') fixed no-repeat 1px 1px;
background-size: cover;
color: white;
}
Сперва фон заливается цветом, потом подгружается картинка. Если с картинкой вдруг случится облом, фон, по крайней мере, останется одноцветным (вспоминаем про умолчальную однотонную заливку Твиттера).
Можно залить фон цветом или текстурой, на подходящий вкус и цвет. Текстуры размножаются не делением, а повторением:
body {
background: url('/images/texture.jpg') fixed repeat 1px 1px;
}
Проверить стили сайта на корректность можно здесь http://jigsaw.w3.org/css-validator/
Немного о mod_rewrite
Самое частое применение этого модуля — организация человеко-ориентированных ссылок, создаётся файл .htaccess, пишется что-то в следующем духе:
RewriteBase /
RewriteRule ^(.*)country/(.*)$ /?country=$2
Едет СЕО на СЕО и СЕО погоняет
Ссылки на валидаторы выше я упоминал неспроста. Если вы разрабатываете обычный сайт для людей, просто придерживайтесь рекомендаций и стандартов в процессе создания. Этим вы автоматически покроете 90% якобы рекомендаций для продвижения. Корректно заполняйте тэги, если на страничке статья про утюги — не нужно в заголовке писать про электролампочки (если, конечно, это не соответствует тематике сайта, из всех правил бывают исключения). Прописывайте alt и title у , rel и title у ссылок. Не создавайте мусорных страниц, битком забитых бессмыслицей. И конечно же, самое главное, это — текстовое наполнение сайта. Пишите. Пишите сами или нанимайте специальных людей. Создавайте новое. Пишите про то, в чём лучше всего разбираетесь. Не умеете писать — всё равно пишите. Опыт придёт со временем. Обновляйте сайт чаще — и поисковые роботы поселятся на вашем сайте (судя по логам). А следом за ними придут и люди, Ваши читатели.
Что получилось
P.S.
Пользуясь случаем, передаю НЛО спасибо за инвайт!
Инвайт — просто добавь статью! (с) из телевизора 90х
Автор: CaretFeed
