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

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

База аддонов
База аддонов
29% [5 Голосов]

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

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

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

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

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

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

Polarfox
OfflineAdmin
· 08.08.2018 10:02
видимо людям не скучно

Vveb--ws
Offline
· 06.08.2018 20:29
скучно когда на форуме ничего нового не создают.

Polarfox
OfflineAdmin
· 05.08.2018 10:17
проблемы жкт это к медикам, если остались еще толковые.

Vveb--ws
Offline
· 03.08.2018 21:31
тошнит

Polarfox
OfflineAdmin
· 03.08.2018 16:50
и что в нем плохого?

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

Гости:
» [Ваш IP] 20:15:42
/Статьи
» Yandex [Bot] 20:15:40
/Поиск
» Yandex [Bot] 20:15:37
/Поиск
» 89.142.109.2 20:14:00

» Всего пользователей: 1,362
» Новый пользователь: Openair
В базе имеется
аддонов: 950
тем: 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.035 секунд, используя 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.027 секунд, используя 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 Голоса

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

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