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

Голосование
Как часто вы посещаете данный сайт?

1 раз в день
1 раз в день
17% [1 Голос]

1 раз в неделю
1 раз в неделю
33% [2 Голосов]

1 раз в месяц
1 раз в месяц
17% [1 Голос]

Очень редко
Очень редко
17% [1 Голос]

Первый раз зашёл
Первый раз зашёл
17% [1 Голос]

Голосов: 6
Вы должны авторизироваться, чтобы голосовать.
Начат: 26.07.2022 08:08

Архив опросов
Случайная тема
Миничат
Только пользователи могут отправлять сообщения.

jikaka
OfflineAdmin
· 22.05.2024 13:46
af

Redfield
Offline
· 19.05.2024 18:41
Товарищи. после регистрации не приходит уведомление на е-маил. у вас на сайте как отправка сделана?

Redfield
Offline
· 17.05.2024 17:22
Добро пожаловать https://rusfusion...po
st_30862

Redfield
Offline
· 12.05.2024 19:24
Доступна первая часть мода для любой вложенности Подразделов в Новостях тут: https://rusfusion...po
st_30861

Redfield
Offline
· 08.05.2024 12:51
напомню что с помощью этого плагина вы можете реально оживить свои сайты. например для этого создать разделы тематические например по разработке сайтов. настроить плагин и SMILE MAGIC работает

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

Гости:
» [Ваш IP] 18:18:25
/Статьи
» 47.128.62.97 18:18:11
/Поиск
» 47.128.42.94 18:17:46
/Поиск
» 69.162.124.230 18:17:45
» 17.241.227.251 18:16:59
/Профиль
» 47.128.51.151 18:16:52
/Поиск

» Всего пользователей: 1,690
» Новый пользователь: testtest
В базе имеется
аддонов: 951
тем: 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 перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
#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.023 секунд, используя 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.003 секунд, используя 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 - это как первая любовь, которая не забывается...
#18 | Vveb--ws 11.06.2017 10:25
Avatar
Отсутствует
Пользователь
Активный
С 25.11.2010 14:16
всё это конечно дуристика.
в новых браузерах пользы никакой.
а старые браузеры может не поймут.

тем более что я учил html 4.0 в середине 2000-х и переучиваться смысла не вижу.

PHP-Fusion 7 Bogatyr - бесплатная мультиязычная CMS для блога, форума, фотогалереи

vk.com/phpfusion
Создаю интернет-магазины и блоги, лендинги, форумы. Telegram: t.me/Vova_Kazakov
Добавить комментарий
Пожалуйста, залогиньтесь для добавления комментария.
Рейтинги
5 (Отлично!) - 2 Голоса

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

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