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

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

База аддонов
База аддонов
32% [6 Голосов]

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

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

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

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

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

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

Vova
Offline
· 14.11.2018 12:42
Zaxap, на основе Hetzner Cloud через их API: https://hetzner.a.
..loud/login

Polarfox
OfflineAdmin
· 11.11.2018 14:42
no comments

Vveb--ws
Offline
· 10.11.2018 15:24
зачем эти заморочки с безопасностью?

Rush
OfflineAdmin
· 08.11.2018 08:33
Безопасность обычно заключается в том чтобы предотвратить подмену этого айди на клиенте, привязать его к айпи, юзер агенту и прочей фигне

Rush
OfflineAdmin
· 08.11.2018 08:32
Сессию украсть или подменить нельзя, она хранится на сервере. Можно украсть кукисы. Айди сессии это всего лишь айди, он не может быть лучше или хуже чем другой айди)

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

Гости:
» 46.4.65.42 05:26:05
/Поиск
» [Ваш IP] 05:26:05
/Статьи
» Yandex [Bot] 05:25:57
/Поиск
» 110.36.218.62 05:24:58
» Google [Bot] 05:24:37
/Профиль

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


#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.038 секунд, используя 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 Голоса

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

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