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

Голосование
Что вас интересует на нашем сайте больше всего?

База аддонов
База аддонов
21% [3 Голосов]

Форум, поиск ответов
Форум, поиск ответов
21% [3 Голосов]

Общение
Общение
36% [5 Голосов]

Новости
Новости
0% [0 Голосов]

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

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

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

Vveb--ws
Offline
· 22.02.2018 21:08
насиженый 7.0 -7.1. а 7.2 - не признаю из-за $this->

Polarfox
OfflineAdmin
· 22.02.2018 14:00
9 еще даже не вышел, о чем вообще речь?

ovas
Offline
· 21.02.2018 13:40
Прорыв будет, если Вы мастодонты-профи чуть-чуть свою задницу оторвёте от насиженного движка 7.02. az А насчёт молодецкого задора, у кого есть на сайте ссылка на http://rusfusion.r
u
?

Rush
OnlineAdmin
· 21.02.2018 08:54
Просто жизнь в 2009 не остановилась, так-то 2018 уже, ларавел, симфони и т.д. Кому он нужен)

Vveb--ws
Offline
· 20.02.2018 18:38
шо то люди какие то вялые на форуме. уже нет задора молодецкого (переписывать вдижок не рвутся) как в 2009г был...

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

Гости:
» [Ваш IP] 14:53:06
/Статьи
» 46.229.168.70 14:53:05
/Архив миничата
» 46.229.168.76 14:52:59
/Поиск
» 69.162.124.235 14:52:39
» 80.242.100.146 14:52:33
/Логин
» 217.69.133.3 14:52:31
» 188.123.59.177 14:52:18
/Логин
» 54.36.148.182 14:52:10
/Поиск
» 46.229.168.72 14:52:05
/Поиск
» 54.36.148.58 14:51:53
/Поиск
3 - не показано

» Всего пользователей: 1,338
» Новый пользователь: Makkirus
В базе имеется
аддонов: 952
тем: 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:


#1 | Tempter 09.06.2013 03:38
Avatar
Отсутствует
Пользователь
Активный
С 30.09.2012 05:01
Переделки небольшие: находим
echo "\n";
echo "\n";
и меняем на
echo "\n";
echo "\n";


Видимо следует поправить статью....
#2 | jikaka 09.06.2013 06:45
Avatar
Отсутствует
Супер Администратор
Активный
С 26.07.2010 12:10
Alipapa, поправил твою статью, сделал в виде оригинала, т.к. при добавлении весь твой код тина съела, и уже непонятно было, что было прописано
мысли | фото
#3 | Alipapa 09.06.2013 10:34
Avatar
Отсутствует
Пользователь
Активный
С 02.11.2010 13:13
Ну да, это копия статьи с моего блога, а не то, что я присылал. Ну попробую сюда вставить что-то из того, что я хотел. Все сделанное выше - это семантическая разметка. Она нужна, чтобы показать структуру сайта поисковым машинам и различным приложениям, для лучшей его видимости и обработки. А вот пример, касающийся верстки:
Хорошие возможности дает HTML-5 для дизайнеров. Покажу на примере оформления форм ввода. Например, в файле search.php есть поле - раскрывающийся список, дающий возможность выбрать количество символов в результатах поиска. Он предлагает 4 фиксированных значения от 50 до 200 символов и отображается с помощью следующего кода:

GeSHi: PHP
  1. echo "<td class='tbl1'><select id='chars' name='chars' class='textbox'".($_GET['stype']!="all"?(in_array("chars", $form_elements[$_GET['stype']]['disabled'])?" disabled='disabled'":""):"").">\n";
  2. echo "<option value='50'".($_GET['chars']==50?" selected='selected'":"").">50</option>\n";
  3. echo "<option value='100'".($_GET['chars']==100?" selected='selected'":"").">100</option>\n";
  4. echo "<option value='150'".($_GET['chars']==150?" selected='selected'":"").">150</option>\n";
  5. echo "<option value='200'".($_GET['chars']==200?" selected='selected'":"").">200</option>\n";
  6. echo "</select> ".$locale['461']."</td>\n";
Добавлено за 0.051 секунд, используя GeSHi 1.0.8.10

А теперь мы можем заменить его на ползунок, позволяющий плавно выбрать любое значение в данном диапазоне:
GeSHi: PHP
  1. echo "<td class='tbl1'><input type='range' id='chars' name='chars' min='50' max='200' border='1'>\n";
  2. echo $locale['461']."</td>\n";
Добавлено за 0.031 секунд, используя GeSHi 1.0.8.10
Или же на поле с кнопочками «плюс—минус», заменив type='range' на type='number'.
Сейчас корректно с этими типами полей работают Хром, Опера, ИЕ с 10-й версии, а FF будет поддерживать в скором будущем (type='range' уже в 23-й версии). Также их поддерживают последние версии Opera Mobile и Chrome for Android. В старых браузерах такие поля выводятся как обычные текстовые, так что применять их уже можно.
То, чего я коснулся в данной статье, лишь небольшая часть того, что дает новый стандарт. На самом деле там множество новых тегов и атрибутов - для аудио и видео, поля с контролем ввода, поддержка SVG и Math и много еще чего, что нам еще предстоит осваивать и внедрять.
#4 | Alipapa 09.06.2013 10:40
Avatar
Отсутствует
Пользователь
Активный
С 02.11.2010 13:13
Во как. Комментом намого удобней получилось ab Сделать окошко поширше для ввода комментов, и на фиг тот submit - только разве что заголовок чтобы послать ag
#5 | jikaka 10.06.2013 06:54
Avatar
Отсутствует
Супер Администратор
Активный
С 26.07.2010 12:10
лучше бы второй частью написалab
мысли | фото
#6 | Rush 10.06.2013 08:46
Avatar
На сайте
Администратор
Активный
С 31.08.2010 14:41
только внедрять это рановато. хтмл5 настолько сырой, что даже валидатор хтмл5 на в3ц сайте ругается на этот хтмл5. и ели гуглы еще идут в ногу со временем, то всякие яндексы, рамблерв и прочая шлаебень - далеко не факт
AnnetLab | @annetlab | GitHub Addons repo | AL Shop - open source e-shop for PHP-Fusion | PHPtoday.ru
www.cwer.ru/files/u215323/skach0ibtq6.gif
#7 | Alipapa 10.06.2013 15:53
Avatar
Отсутствует
Пользователь
Активный
С 02.11.2010 13:13
Да, конечно, пока только эксперименты
#8 | Zaxap 10.06.2013 22:09
Avatar
Отсутствует
Пользователь
Активный
С 05.09.2012 10:32
jikaka, а мне понравилось, как тина съела...
Интересно зато было, с примерамиad
Зло не дремлет, а я добрый...
#9 | jikaka 11.06.2013 05:54
Avatar
Отсутствует
Супер Администратор
Активный
С 26.07.2010 12:10
Zaxap, согласенag
Rush, но согласись, что весьма интересно для развития
мысли | фото
#10 | Zaxap 11.06.2013 22:56
Avatar
Отсутствует
Пользователь
Активный
С 05.09.2012 10:32
Захожу: О! Какая познавательная статья! Все интерактивно показано... Были бы все статьи такие))
А оказался обычный недобаг с тиной =_=
Зло не дремлет, а я добрый...
Добавить комментарий
Пожалуйста, залогиньтесь для добавления комментария.
Рейтинги
5 (Отлично!) - 2 Голоса

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

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