Переделываем сайт uCoz для работы на HTML5 - Форум веб маcтера uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 10.12.2016
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]




Русские шрифты



Страница 1 из 11
Модератор форума: IZOTOP 
Форум веб маcтера uCoz » Использование html на сайте uCoz » Применение HTML5 на сайте uCoz » Переделываем сайт uCoz для работы на HTML5 (Как переделать сайт юКоз на HTML5)
Переделываем сайт uCoz для работы на HTML5
IZOTOP Дата: Пятница, 14.09.2012, 00:46 | Сообщение # 1
Группа: Администратор
Сообщений: 55
Статус: Offline
Хочу поделиться с Вами соображениями по поводу перехода сайта системы uCoz на работу с применением типа документа HTML5

Code
<!DOCTYPE html>


Сразу хочу заметить,просто добавив его в начало страницы вы не поступите правильно!!!
Наоборот,подобный поступок может в дальнейшем сыграть с Вашим сайтом злую шутку.
Дело в том что пока новый DOCTYPE играет относительную роль для браузера и интерпретируется сопоставимо переходному типу документа с поддержкой новых тегов.Но это временное явление и в один прекрасный момент браузеры ( не все сразу конечно ) перестанут отражать работу устаревших тегов,а так-же перестанут быть актуальными и атрибуты тегов которые не входят в тип HTML5.
Вёрстка шаблонов системы юКоз в основном построена на применении таблиц,а сами таблицы набраны с применением атрибутов устаревших в новом типе документа.
Вот пример

Code
<table border="0" cellpadding="0" cellspacing="2" width="100%">


И это уже не говоря о том что новые теги в шаблонах совсем не применяются,а это играет основную роль в работе страницы с типом документа построенного на HTML5.
Могу предложить вариант перестроения уже существующих страниц сайта,для этого потребуется внести изменения на всех имеющихся страницах модулей и прикреплённых к ним видах материалов.

Вариант перестроения сайта uCoz


1.Начнём с верхней части сайта которая будет играть роль раздела
.У всех сайтов сайтов разный набор верхней части,Вам потребуется выделить в тегах основную информацию,в любом случае в неё должно входить название сайта.
Вот пример

Code
<header>
<div id="city" >
<h1>Название сайта</h1>
</div>
</header>


При этом нельзя разрывать структуры блочных элементов тега <div>,все открытые теги <div> внутри тегов
должны быть закрыты.Может быть так что открывающий тег <div> находится в верхней части,а закрывается только в нижней.
Вот пример

Code

<div id="content" >
<header>
<div id="city" >
<h1>Название сайта</h1>
</div>
</header>


Форма поиска,любые ссылки и скрипты не должны входить в раздел <header>!!!
Ссылки на дополнительные стили CSS и библиотеки JS должны находиться ниже этого раздела.

2.Теперь переходим к нижней части сайта.
Нижняя часть сайта uCoz соответствует разделу HTML5 для которой применяется тег <footer>,все скрипты и ссылки на дополнительные стили должны находиться выше этого раздела.
Вот пример

Code

<link rel="stylesheet" href="http://delaisait.ucoz.ru/css/spolier.css" type="text/css" media="screen">
<script type="text/javascript">
$(document).ready(function(){
$("div.spoiler div.name span").toggle(function(){
$(this).parent("div.name").parent("div.spoiler").children("div.text").show();
$(this).parent("div.name").parent("div.spoiler").css("backgroundPosition", " -15px 0");
},function(){
$(this).parent("div.name").parent("div.spoiler").children("div.text").hide();
$(this).parent("div.name").parent("div.spoiler").css("backgroundPosition", " 0 -15px");
});
});
</script>
<footer>
<div id="footer">
<div id="copyright">
<!-- <copy> -->Copyright (c) $YEAR$<!-- </copy> --> | $POWERED_BY$
</div>
</div>
</footer>


Если открытый в верхней части тег <div> закрывается в нижней части сайта,тогда это должно выглядеть следующим образом.
Вот пример

Code
<footer>
<div id="footer">
<div id="copyright">
<!-- <copy> -->Copyright (c) $YEAR$<!-- </copy> --> | $POWERED_BY$
</div>
</div>
</footer>
</div>


3.Далее у Вас идут контейнеры,1 или 2 в зависимости от дизайна.
Блок с меню помещаем между тегами <nav>.Блоки на ссылки своего сайта так же помещаем в этот тег.
Вот пример

Code

<!-- <block1> -->
<nav>
<div class="block">
    <!--<s5184>-->Меню сайта<!--</s>-->
    <div class="blockcontent">
    <!-- <bc> -->
    $SMENU_1$
    <!-- </bc> -->
    </div>
    <div class="blockbottom"></div>
    </div>
</nav>
<!-- </block1> -->


Блоки с информацией Вашего сайта помещаем в тег <section> и <aside>.
Вот пример

Code
<!-- <block2> -->
<section>
<aside>
<div class="block">
    <!--<s5185>-->Новое на сайте<!--</s>-->
    <div class="blockcontent">
    <!-- <bc> -->
<nav>
<ul>
<li><a href="#">Пункт №1</a></li>
<li><a href="#">Пункт №2</a></li>
<li><a href="#">Пункт №3</a></li>
</ul>
</nav>
<!-- </bc> -->
    </div>
    <div class="blockbottom"></div>
    </div>
</aside>
</section>
<!-- </block2> -->


К блокам со ссылками других сайтов добавляем тег <article>.
Вот пример

Code
<!-- <block3> -->
<section>
<aside>
<article>
<div class="block">
    <!--<s5186>-->Друзья сайта<!--</s>-->
    <div class="blockcontent">
    <!-- <bc> -->
<nav>
<ul>
<li><a href="#">Пункт №1</a></li>
<li><a href="#">Пункт №2</a></li>
<li><a href="#">Пункт №3</a></li>
</ul>
</nav>
<!-- </bc> -->
    </div>
    <div class="blockbottom"></div>
    </div>
</article>
</aside>
</section>
<!-- </block3> -->


4.Теперь переходим к страницам модулей.У всех сайтов вёрстка страниц разная,я укажу только отдельно взятые элементы требующие исправления или добавления.
Начну с таблиц которых обычно применяется в достатке.В HTML5 тег <table> поддерживает только один атрибут border со значениями 0 или 1.Таблицу такого вида.
Вот пример

Code
<table border="0" cellpadding="0" cellspacing="0" width="100%">


Заменяем на такую.
Вот пример

Code
<table border="0" style="width:100%;">


К таблице где атрибутам выставлено значение отличимое от 0 добавляем свойство border-spacing,оно имеет свойства аналогичные устаревшим атрибутам.Если таблица с параметрами атрибутов.
Вот пример

Code
<table border="0" cellpadding="2" cellspacing="4" width="100%">


Заменяем её на актуальный вариант.
Вот пример

Code
<table border="0" style="width:100%;border-spacing:4px;">


Если в таблицах применяются атрибуты для тега <td>,смотрите в справочнике сайта соответствие их атрибутов,которых немного поубавилось в HTML5.

Имеющиеся условные операторы контента страницы.
Вот пример

Code
$MESSAGE$
и
$BODY$


Помещаем в тег <section>.
Вот пример

Code
<section>
$MESSAGE$
</section>

<section>
$BODY$
</section>


Если в роли контента выступают материалы с других сайтов ( например модуль каталог сайтов ),тогда добавляем тег <article>.
Вот пример

Code

<section>
<article>
$MESSAGE$
</article>
</section>


Для модуля фотоальбом добавляем на главной странице,разделе и категории модуля тег <figure>.
Вот пример

Code

<section>
<figure>
$MESSAGE$
</figure>
</section>


На странице комментариев модуля фотоальбом добавляем тег <figure> одному условному оператору.

Code

<figure>
$PHOTO$
</figure>


Результат изменений


Дамы и господа!
Не смотря на Ваш уровень знаний и владение мастерством набора на клавиатуре предупреждаю!!!
Перевод сайта на работу с типом документа HTML5 не может быть осуществлён сразу ( по быстрому ).Это очень кропотливая работа,её нужно выполнять осторожно,делая перед заменой копии имеющихся страниц.
Не забывайте так же что сами материалы Вашего сайта могут содержать устаревшие теги и атрибуты,их могут иметь информеры и другие элементы.Перед началом изменений оцените масштаб предстоящей работы и сопоставьте с целесообразностью её выполнения.Сайту не обязательно работать с новым типом документа,там где материалов огромное количество не стоит даже думать об этом.Но в любом случае новый сайт,без материалов может быть настроен с минимальной потерей времени на эту процедуру.В остальном расчитывайте только на свои возможности...
Все имеющиеся вопросы и предложения прошу излагать в этой теме.
 
s6ah][Taraz Дата: Воскресенье, 27.01.2013, 00:02 | Сообщение # 2
Группа: Вебмастер
Сообщений: 1
Статус: Offline
Уважаемый Веб мастер! У вас мало Разделов в форуме за счет Ucoza Хотелось Больше Уроков.) У меня проблема Не в Шаблоне это со всем Другая тема сейчас я расскажу просто я низнаю кому Обратится(( так вот- Подскажите пожалуйста как мне Добавить мрз файл в "каталог файлов и комментарии к нему" Я согласен Добавить Легко но на плеере не Воспроизводится какким кодом нужно добавить что бы играла на этом плеере сылка на сайт http://music-8region.my1.ru/load/14_skit_s_sehmom_mp3/1-1-0-1 

А Это сылка официальная моего Шаблона там вот все работает А уменя Не Хрена http://musicprime.ru/load....0-10615
Заранее Блогадарю! v
 
IZOTOP Дата: Четверг, 31.01.2013, 23:42 | Сообщение # 3
Группа: Администратор
Сообщений: 55
Статус: Offline
s6ah][Taraz, я в принципе понял в чём проблема,вот попробуй вместо своего вставить вот этот код плеера,разницы не будет какого типа файл,если добавишь аудио будет играть музыка,её же можно будет скачать,если видео,только ютуба или .flv тогда будет видео пахать

Код
<object type="application/x-shockwave-flash" data="http://delaisait.ucoz.ru/script/audio/uppod/uppod.swf" width="400" height="200"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="http://delaisait.ucoz.ru/script/audio/uppod/uppod.swf" /><param name="flashvars" value="comment=$ENTRY_TITLE$&amp;st=http://delaisait.ucoz.ru/script/audio/uppod/st/vb400X200.txt&amp;file=$RFILE_URL$" /></object>

Вот в плеере играет музыка



А вот показывает видео








Эта тема не относится к HTML5 но проблема она и в африке проблема smile
 
Пенжина Дата: Четверг, 03.03.2016, 11:53 | Сообщение # 4
Группа: Вебмастер
Сообщений: 1
Статус: Offline
Здравствуйте. Прекрасный сайт!
Хочу изменить вид стандартного меню, нашел на вашем сайте код для вставки.
Вопрос: куда этот код вставить, чтобы изменился вид меню?
Спасибо smile
 
bootstraptema_ Дата: Вторник, 26.04.2016, 12:55 | Сообщение # 5
Группа: Администратор
Сообщений: 2
Статус: Offline
Цитата Пенжина ()
Вопрос: куда этот код вставить, чтобы изменился вид меню?


Здравствуйте!
1.Вам нужно написать ссылку на страницу где будет меню.
2.Вам нужно указать ссылку на страницу с материалом меню которое нужно установить.
 
Форум веб маcтера uCoz » Использование html на сайте uCoz » Применение HTML5 на сайте uCoz » Переделываем сайт uCoz для работы на HTML5 (Как переделать сайт юКоз на HTML5)
Страница 1 из 11
Поиск:



Русские шрифты