Верстка HTML/XHTML


<h2>Картинки</h2>
<p>Все картинки сохраняются с логическим префиксом, сокращённом на английском тексте, на конце имеют размеры:
<br />
    например, <br />
<span class="wrong">    <i>неверно</i><i>:</i> bf1.gif </span><br />
<span class="right"><i>    верно:</i> bottom_footer_400x10.png</span> </p>

<p>Приоритет расширений – png/jpg/gif.</p>
<p>
Все помнят, что GIF эффективно сжимает только горизонтальные одноцветные области? Про это ограничение теперь можно забыть:</p>
<p>Вторым важным преимуществом является фильтрация строк (scanline filtering, или delta filters), благодаря которой PNG-упаковщик может получить гораздо более удобные данные для сжатия.</p>
<p><b>GIF</b> – понимается любыми браузерами, не имеет альфаканала, но сжимается лучше, чем jpg, если картинка имеет менее 300-400 цветов, простые изображения можно сохранять в этом формате</p>
<p><b>JPG</b> – баннеры, рисунки – используются в основном для размещения контента на страницах</p>
<p><b>PNG</b> – основно рабочий вариант, у фильтра есть возможность scale, т.е. допускается использовать растягивание картинки по всей высоте или длине, если это фоновый градиент.</p>
<h3>Стандарты</h3>
<p>Вёрстка начинает строиться со стандарта <a href="https://ru.stackoverflow.com/questions/94653/%D0%A7%D1%82%D0%BE-%D0%BB%D1%83%D1%87%D1%88%D0%B5-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C-xhtml-%D0%B8%D0%BB%D0%B8-html5" target="_blank">XHtml Strict 1.1</a>, таблицы используются только для контента и для областей, которые имеют смысловую нагрузку “таблица”, дабы не переделывать работу дважды – убедитесь у того, кто выше вас по иерархии, что вёрстка основных логических блоков закончена и получите одобрение на вставку таблиц</p>
<p>Принцип построения макета – разбиение на основные логические блоки, приоритет оптимизации макета под браузеры Chrome->FF->Opera->IE, действуем по принципу от простого к сложному. При сдаче вёрстки заказчику приоритет отображения имеет немного другую последовательность.</p>

<h2>Комментарии</h2>
<p>Любой логический блок требует выделения комментариями, используйте полные смысловые выражения для выделения блока, закрывающий тег отличается только наличием “/” .</p>
<p>Пример: </p>

<div class="code-block">
    <xmp>неверно:
<!-- block1 -->
<div></div>     
верно:         
<!-- Left Menu Data Container -->
<div></div>
<!--/ Left Menu Data Container --></xmp>
</div>


<p>Если блок содержит уже 2 логических единицы информации, то обязательно наличие комментариев к каждому блоку.</p>
<h2>Чеклист</h2>
<h3>Общие требования</h3>
<ul class="list-unstyled">
    <li>Chrome, FF, Opera, Safari, IE (версии не старше 3лет)</li>
    <li>валидность w3c</li>
    <li>отсутсвие inline подстановок</li>
    <li>адаптивность (ключевые точки 1170, 990, 768, 540, 320)</li>
    <li>комментарии блоков вида <!-- name --> <!--/ name -->, аналогично в css, js</li>
    <li>спрайты</li>
    <li>все что можно сделать без Javascript, делать без него.</li>
    <li>jquery (если вам требуется)</li>
    <li>@font-face шрифты</li>
    <li>комментирование кода (не менее 10% от объёма должен составлять текст комментариев) (удобства интеграции)</li>
    <li>строгое выравнивание (автовыравнивание отступов)</li>
    <li>локаничная инкапсуляция блоков для интеграции (программист не должен собирать будущий фильтр из 2х и более кусков, разделенным, например постраничной навигацией)</li>
    <li>SSI(или альтернатива) для соблюдения принципа DRY, блоки не должны повторяться copy-paste</li>
    <li>контроль версий git (аккаунт выдаётся)</li>
    <li>использование абсолютных путей относительно корня</li>
    <li>максимальное кол-во строк (css, js) 500</li>
</ul>

<h3>Расположение файлов</h3>
<ul class="list-unstyled">
    <li>html файлы должны лежать в одной папке /_html/,в файле index.html перечислены все доступные страницы то же самое касается css, images или js, у каждого своя папка у меня это папки /js/, /css/</li>
    <li>если вы готовите шаблон для компонента, у Битрикс есть стандарт расположения файлов \local\components\[namespace]\[component.name]\templates\[template.name]\</li>
    <li>style.css</li>
    <li>script.js</li>
    <li>которые будут подключены автоматически т.о. если кому-то потребуется поправить вёрстку, у него будет только 2 варианта где искать код - папка шаблона или базовая папка /css/</li>
</ul>