Забыли пароль?
Запросите новый здесь.

Голосование
Тип Вашего интернет-проекта?

Новостной ресурс
Новостной ресурс
0% [0 Голосов]

Тематический/информационный ресурс
Тематический/информационный ресурс
18% [2 Голосов]

Социальная сеть/блог
Социальная сеть/блог
9% [1 Голос]

Корпоративный портал
Корпоративный портал
0% [0 Голосов]

Интернет-магазин
Интернет-магазин
0% [0 Голосов]

Промосайт
Промосайт
9% [1 Голос]

У меня несколько сайтов
У меня несколько сайтов
36% [4 Голосов]

У меня вообще нет сайта
У меня вообще нет сайта
0% [0 Голосов]

Другое
Другое
27% [3 Голосов]

Голосов: 11
Вы должны авторизироваться, чтобы голосовать.
Начат: 22.09.2016 06:03

Архив опросов
Случайная тема
Друзья проекта
Unlogic W0rst Lab
All Fusion :: Плагины, моды, темы оформления для 6 и 7 версий PHP-Fusion
Система Smart для PHP-Fusion
Создание сайтов artcell
Миничат
Только пользователи могут отправлять сообщения.

jikaka
OfflineAdmin
· 26.04.2017 15:53
ab

Warhangel
OfflineAdmin
· 25.04.2017 23:30
ммм вообще надо организовать раздел проверенных сервисов

Warhangel
OfflineAdmin
· 25.04.2017 23:27
так вроде в разделе рекламы ag

Alex
Offline
· 25.04.2017 18:23
Костя дай права удалять темы и банить ботов. подчищать буду то что насрут

jikaka
OfflineAdmin
· 20.04.2017 06:24
Polarfox, шляпа там

Архив миничата
Сейчас на сайте
» Гостей: 7

Гости:
» [Ваш IP] 12:57:12
/Статьи
» 216.244.66.240 12:57:05
/Поиск
» 46.229.168.67 12:56:59
/Архив миничата
» 69.162.124.235 12:56:52
» 46.229.168.66 12:56:52
/Архив миничата
» 164.132.161.81 12:56:49
/Поиск
» 217.182.132.4 12:56:16
/Поиск

» Всего пользователей: 1,281
» Новый пользователь: baklan
В базе имеется
аддонов: 949
тем: 137
Иерархия статей
Php-Fusion-7 + HTML-5

PHP-Fusion до 6-й версии выдавал страницы в стандарте HTML-4, 7-я версия выдает XHTML-1.0, восьмая (если таковая будет) - возможно, что будет на HTML-5. Но когда она будет и будет ли - неизвестно, а новый стандарт хочется пощупать сейчас.

Итак, начинаем переделывать наш PHP-Fusion 7.02 под HTML-5. А начинаем с папки /themes/templates/ с файлов header.php, admin_header.php и admin_header_mce.php. Хотя для начала можно ограничиться одним header.php, так как последние два используются только в админке. Переделки небольшие: находим

echo "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>\n";
echo "<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='".$locale['xml_lang']."' lang='".$locale['xml_lang']."'>\n";

и меняем на

echo "<!DOCTYPE html>\n";
echo "<html>\n";

Больше в этих файлах менять ничего не надо. В принципе, после этого уже ваш сайт формально будет на HTML 5. Теперь приступим к использованию его возможностей. Отредактируем тему. Покажу на примере темы "Stylo". Что и зачем я там менял, я уже писал в своей статье HTML-5 и PHP-Fusion: первые шаги у себя на блоге, здесь еще раз повторюсь. Перейдем в папку с темой и откроем файл theme.php. Начнем с функции render_page. Находим:

echo "<div class='main-header'>\n".showbanners()."</div>\n";
echo "<div class='sub-header clearfix floatfix'>".showsublinks("","")."</div>\n";

и делаем так:

echo "<header>\n".showbanners()."</header>\n";
echo "<nav><div class='clearfix floatfix'>".showsublinks("","")."</div></nav>\n";

Заодно в файле styles.css находим .main-header { и меняем на header {, а также все .sub-header меняем на nav.
Сначала я сделал без <div class='clearfix floatfix'>.Но проверка в браузерах показала, что Хром и Файрфокс справились прекрасно, а вот Интернет эксплорер (9-й) не справился с тэгом <nav> - верхнее горизонтальное меню он вывел сбоку и верстка расползлась. Поэтому пришлось добавить 'clearfix floatfix', в результате все стало на место во всех браузерах.

Заголовок отработали, теперь футер. Просто заключаем его в теги <footer></footer>. Стили трогать пока не будем, этот тэг (как, впрочем, и все предыдущие мною добавленные) относится к семантической разметке, его главная задача - показать поисковым машинам, к какой части сайта относится контент. Да и стилей там несколько: sub-footer-top, sub-footer clearfix, main-footer clearfix - в общем, с этим тоже будем разбираться, но позже.

Продолжим семантическую разметку: обозначим панели и основной контент. Находим:

if (LEFT) { echo "<div id='side-left'>".LEFT."</div>\n"; }
if (RIGHT) { echo "<div id='side-right'>".RIGHT."</div>\n"; }
echo "<div id='side-center' class='".$main_style."'>";
echo "<div class='upper'>".U_CENTER."</div>\n";
echo "<div class='content'>".CONTENT."</div>\n";
echo "<div class='lower'>".L_CENTER."</div>\n";

И меняем на:

if (LEFT) { echo "<aside><div id='side-left'>".LEFT."</div></aside>\n"; }
if (RIGHT) { echo "<aside><div id='side-right'>".RIGHT."</div></aside>\n"; }
echo "<div id='side-center' class='".$main_style."'>";
echo "<aside><div class='upper'>".U_CENTER."</div></aside>\n";
echo "<article><div class='content'>".CONTENT."</div></article>\n";
echo "<aside><div class='lower'>".L_CENTER."</div></aside>\n";

Ну вот, первый шаг сделан. Конечно, это только минимум, пока даже никаких видимых изменений на страницах нет. Также не ясно пока, зачем это я сделал вообще. Но поверьте, HTML-5, CSS-3, микроразметка - это все нужно, и это все у нас впереди. Буду осваивать и делиться своим опытом в следующих своих записях. Так что следите, скоро будет продолжение.


Поделиться этой статьей
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:


#11 | jikaka 12.06.2013 06:31
Avatar
Отсутствует
Супер Администратор
Активный
С 26.07.2010 12:10
познавательная, что нифига ничего непонятно было
мысли | фото
#12 | Zaxap 16.06.2013 09:56
Avatar
Отсутствует
Пользователь
Активный
С 05.09.2012 10:32
Да понятно...пример устройства футера, как можно делать ползунок...))
Зло не дремлет, а я добрый...
#13 | hopyres 27.09.2013 09:42
No Avatar
Отсутствует
Пользователь
Активный
С 03.05.2013 04:44
Ждем восьмёрку и усе на этом.ds
#14 | ChubICE 17.11.2013 18:17
Avatar
Отсутствует
Пользователь
Активный
С 05.09.2012 14:50
Alipapa,
Познаватаельно, спасибо!
7.02.07
#15 | Polarfox 03.02.2014 09:51
Avatar
Отсутствует
Администратор
Активный
С 20.08.2010 14:03
Самое интересное работает везде, браузеры новые гламурки поддерживают и в старых стандартах, хотя это конечно не то.

Под новые темы отлично бы так делать.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
#16 | Pisatel 30.08.2014 15:10
Avatar
Отсутствует
Пользователь
Активный
С 08.02.2013 05:51
В общем, перевел я один сайт на html5. Что хотелось бы добавить к статье. Файл header.php у меня начинается так
GeSHi: PHP
  1. echo "<!DOCTYPE html>
  2. <html xml:lang='".$locale['xml_lang']."' lang='".$locale['xml_lang']."'>
  3. <head>
  4. <title>".$settings['sitename']."</title>
  5. <meta charset='".$locale['charset']."' />";
Добавлено за 0.032 секунд, используя GeSHi 1.0.8.10

То есть, язык мы задаем теперь вот так. Далее. Желательно в файл styles.css добавить следующее
GeSHi: CSS
  1. address, article, aside, cite, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. font-size: 100%;
  6. font: inherit;
  7. vertical-align: baseline;
  8. }
  9. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  10. display: block;
  11. }
Добавлено за 0.004 секунд, используя GeSHi 1.0.8.10

Это "обнулит" стили по умолчанию у новых тегов и мы сможем ими спокойно пользоваться, не боясь косяков.
Далее. Рекомендую, чтобы в теле тега <article> шел какой-либо текст, заключенный в <h1-6>, тогда валидатор не будет ругаться.
Переполз на WP, но PF - это как первая любовь, которая не забывается...
#17 | Pisatel 08.09.2014 09:15
Avatar
Отсутствует
Пользователь
Активный
С 08.02.2013 05:51
Ну и еще: придется переписать примерно 30-40% разметки, иначе нет смысла переходить на html5.
Переполз на WP, но PF - это как первая любовь, которая не забывается...
Добавить комментарий
Пожалуйста, залогиньтесь для добавления комментария.
Рейтинги
5 (Отлично!) - 2 Голоса

Рейтинг доступен только для пользователей.

Пожалуйста, авторизуйтесьили зарегистрируйтесь для голосования.