PDA

Показать полную графическую версию : "быстрая" верстка


Страниц : [1] 2

Vlad Drakula
27-04-2006, 12:35
тема посвещена созданию "быстрой" верстки...

термин "быстрая" подразумевает быструю загрузку и парсинг страницы!

по своей работе я постоянно сталкиваюсь с проблемой оптимизации
верстки!

мой опыт показал что что даже если вылизать все, но при этом будет
кривая верстка все равно страницы будут открываться медленно!

и не важно насколько быстр сервер...

при создании сложной верстки запрещается использовать таблицы! это
связано с багом в ие: парсинг и отображение таблиц в ие работает очень
медленно!

если есть возможность разделить интерфейсы и верстку для IE и всех
остальных... то это желательно сделать... из-за особенностей
эксплорера!

в шаблонах для эксплорера нужно использовать так можно больше фильтров
в место картинок... иначе страница будет медленно отображаться!

кстати вот (http://webstroymast.narod.ru/filt_alpha.html) не плохой сайт со списком и примерами фильтров IE.

dmitryst
27-04-2006, 15:33
Vlad Drakula То есть что, делать 2-3 варианта страницы? А сколько потом возни с переделыванием... неее, я делаю одну верстку, по возможности, универсальную, а фишечки можно через Java реализовать, ИМХО

Vlad Drakula
27-04-2006, 16:01
dmitryst
а фишечки можно через Java реализовать
1) не через Java а через JavaScript
2) для каждого броузера нужно будет писать свой JS...

То есть что, делать 2-3 варианта страницы?
не страниц а два шаблона... лично у меня вообще нету понятие страница как таковое... если вы используете страницы то вам проше...

по возможности, универсальную
я хотел... но дизайнера нельзя ограничивать... по этому посто того как появилась полупрогзрачность и тени началось и разделение...

многих эти проблеммы вообще не каснутся... веть не все верстают AJAX клиентов... в большенстве случаем можно обойтись и универсальной версткой, но к сожалению не во всех :(

Vlad Drakula
28-04-2006, 01:15
ссылка на хороший ресурс с полезными ссылками по теме векторной графики в HTML
http://xmlhack.ru/texts/06/ajax-html-canvas-ruby/ajax-html-canvas-ruby.html

Vlad Drakula
05-05-2006, 20:40
еще одно замечание:
изменение Z-INDEX не приводит к перезагрузки изображений и фильтров, что позволяет сильно оптимизировать работу елементов которые должны динамически изменять свой внещний вид при действиях пользователя, например изменять отображаемую картинку.

Vlad Drakula
23-05-2006, 10:42
DIV vs TABLE. Мифы сторонников тега TABLE
Миф 1. Поддержка таблиц идентична во всех популярных браузерах.

С первого взгляда может показаться, что это действительно так. И действительно, спецификация таблиц в стандарте HTML 4 достаточно удачна, и практически во всех современных браузерах она, в общем, реализована относительно одинаково. Действительно, табличная разметка надежна и предсказуема.

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

То есть, табличная верстка не спасает от необходимости уделять довольно большое количество времени на поддержку различными типами и версиями браузеров.

Миф 2. Табличная верстка проще, занимает меньше времени, и поэтому дешевле.

Трудно не согласиться с этим. Что может быть проще, чем объявить таблицу, задать ширину колонок, и знай себе наполняй ячейки данными. Этому легко можно научить даже школьника младших классов.

Но опять-таки, это только для общих простых случаев. А что делать, если нужны вложенные таблицы? А если многократно вложенные? А если ячейки должны быть закругленными, иметь разноцветные бордюры и фон, закрывающий лишь часть ячейки таблицы? Тут уже, если пользоваться табличной версткой, придется генерировать значительное количество HTML кода, а именно, открывающих и закрывающих вложенных тегов, таких как, например <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>, <TR> и <TD>.

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

Кстати, чтобы овладеть версткой с помощью CSS стилей, нужно ненамного больше знаний. Тем более что достаточно в этом разобраться только один раз, а потом копировать полученное первый раз шаблонное решение из проекта в проект.

Миф 3. Отрисовка таблиц браузером происходит быстрее, чем DIV со стилями.

Возможно это и так насчет отрисовки (хотя не факт). Но для интерактивной системы, которой является браузер, вряд ли имеют значения микросекунды. То есть, можно сказать, что это неважно для современных компьютеров.

Но у таблиц есть не очень приятная особенность. Пока таблица не загрузится полностью, ее содержимое не отображается. Это происходит потому, что браузеру необходимо вычислить высоту и ширину ячеек таблиц, что часто невозможно сделать, не зная содержимого. Даже стиль table-layout: fixed не всегда помогает ускорять загрузку.

То есть, тут уже влияет не скорость отрисовки, а скорость загрузки, которая потенциально может иногда быть очень низкой. Это уже серьезно. Иными словами, таблицы не подходят для вывода контента с большим объемом информации, так как пользователи на низкоскоростных соединениях будут ждать загрузки неприемлемо долго.

Миф 4. Использование стилей не дает выигрыша по трафику.

Расчет очень прост. Если взять некую среднестатистическую гипотетическую HTML страницу, сверстанную с помощью таблиц, и взять такую же страницу, сверстанную с помощью каскадных таблиц стилей, можно заметить, что объем в байтах первого варианта не сильно отличается от второго, если ко второму прибавить размер таблицы стилей.

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

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

Поэтому на среднестатистическом сайте выигрыш по трафику обычно получается довольно значительный именно при использовании каскадных таблиц стилей, которые пришли на смену табличной верстке.


Миф 5. Таблицы не влияют на индексирование сайтов поисковиками.

Все-таки влияют, причем отрицательным образом. Происходит это из-за более низкого отношения выводимого текстового контента к количеству тегов разметки, информация получается более раздробленной, парсеру поискового робота труднее раскопать полезную информацию в дебрях вложенных табличных тегов, особенно если туда вкралась ошибка.

Например, специалисты по SEO скажут, что допустим портал на базе PHPNuke раскручивать несколько сложнее, чем на Xaraya. Именно по этой причине.

Теперь обобщим.

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

Автор лично для себя пришел к выводу, что универсальной стратегии для верстальщика нет, и нужно каждый раз выбирать свою методику решения для каждого проекта, в зависимости от изначальных требования заказчика. Если таких требований у заказчика на момент старта проекта нет, то нужно исполнителю самому сформулировать эти требования, и дать заказчику «на подпись», иначе потенциально возможен риск – бесплатная переделка кода, точнее не бесплатная, а за счет исполнителя.

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

Если с версиями браузеров порядок, и требования заказчика позволяют использовать каскадные таблицы стилей для верстки HTML страниц, то автор склоняется к тому, чтобы использовать именно это решение со стилями. Это идеологически более правильно, плюс дань прогрессу который движется именно этим путем. Хотя, если нужно сделать нечто примитивное, плюс жадный заказчик экономит на верстке, то автор все-таки вспоминает про таблицы...

Выводы.

На самом деле не все так просто, в данной статье не описаны недостатки верстки с использованием таблиц стилей, об этом будет другая статья. Но недостатки использования табличной верстки заставляют задуматься.

Совет автора – если вы не использовали в своей работе технологию TABLELESS (верстка без использования HTML таблиц, только с помощью каскадных таблиц стилей), то попробуйте, хотя, возможно и придется потратить несколько часов на поиск материалов и хороших примеров. В любом случае, этот опыт будет давать пищу для размышлений при старте каждого нового проекта, и поможет выбирать более правильные решения.

взято здесь: http://www.west3co.com/articles/data/ic_articles/2/

еще одна интересная статья: http://www.west3co.com/articles/data/ic_articles/1/

benya
23-05-2006, 12:38
Интересно, а как можно без таблицы отрисовать нечто что-то с ячейками? К примеру бестабличная таблица с ценами ;)

Vlad Drakula
23-05-2006, 13:28
benya
а вот можно... иногда сложно иногда не очень... но можно... конечно полностью всю функциональность таблиц не повторить... но большую часть можно...

если очень интересно могу описать как можно верстать подобные вещи... главное пример конкретный придумай...

benya
23-05-2006, 13:38
Vlad Drakula,
Простой (для таблицы) пример "таблица с ценами":

<table width="100%" border="0" cellpadding="2" cellspacing="1" style="BACKGROUND-COLOR: #cccccc">
<tbody>
<tr bgcolor="#eeeeee">
<td rowspan="2" nowrap="nowrap"><b>Заезды</b></td>
<td rowspan="2" nowrap="nowrap"><b>Даты заездов</b></td>
<td colspan="2" nowrap="nowrap"><b>Стоимость в грн.</b></td>
</tr>
<tr bgcolor="#eeeeee">
<td nowrap="nowrap"><b>1 день</b></td>
<td nowrap="nowrap"><b>20 дней</b></td>
</tr>
<tr bgcolor="#fefefe">
<td>1</td>
<td>05.06 – 24.06</td>
<td>110</td>
<td>2200</td>
</tr>
<tr bgcolor="#fefefe">
<td>2</td>
<td>25.06 – 14.07</td>
<td>117,5</td>
<td>2350</td>
</tr>
<tr bgcolor="#fefefe">
<td>3</td>
<td>15.07 – 03.08</td>
<td>117,5</td>
<td>2350</td>
</tr>
<tr bgcolor="#fefefe">
<td>4</td>
<td>04.08 – 23.08</td>
<td>117,5</td>
<td>2350</td>
</tr></tbody></table>

Vlad Drakula
23-05-2006, 13:57
benya
постепенно...
для начала самое простое...
строка с танными...

было:



<tr bgcolor="#fefefe">
<td>3</td>
<td>15.07 – 03.08</td>
<td>117,5</td>
<td>2350</td>
</tr>



стало:


<div style="width:100%;position:relative;height:20px;background-color: #fefefe">
<div style="position:absolute;left:0px:top:0px;width:25%;">3</div>
<div style="position:absolute;left:25%top:0px;width:25%;">15.07 – 03.08</div>
<div style="position:absolute;right:25%top:0px;width:25%;">117,5</div>
<div style="position:absolute;right:0pxtop:0px;width:25%;">2350</div>
</div>

benya
23-05-2006, 14:03
Vlad Drakula,
Ну и оно все сбилось в одну большую кучу. Что X/Y попиксельно выставлять? А как рамку поставить?

Vlad Drakula
23-05-2006, 14:13
benya
скажу честно, то что я написал, не проверял, писал по памяти, вроде должно работать...

Что X/Y попиксельно выставлять?
иногда приходится... я иногда по 20-30 CSS классов для этого пишу...

А как рамку поставить?
а все сразу хочешь... верстка дивами это зачастую очень сложное занятие... иногда на верстку одного елемента уходит полдня... а если что то сложное верстать то может уйти и неделя... но для меня зачастую просто нету альтернатив... так что приходится...

benya
23-05-2006, 14:43
Vlad Drakula,
Наверное много платят ;)) Можно так и пол года ковыряться. ;) Да ну, по мойму дурная затея...может для простого дизайна и годится.

Vlad Drakula
23-05-2006, 14:51
benya
как разтаки... сложный дизайн на таблицах не сделаещь(действительно сложный)... иначе IE просто повиснет...

benya
23-05-2006, 15:12
Vlad Drakula,

сложный дизайн на таблицах не сделаещь(действительно сложный).

От того что дивы плавают, а ячейки таблицы нет?


иначе IE просто повиснет...

Это уже другой вопрос. Кстати, часто замечаю что иногда эксплорер замораживается. Особенно если быстро обновить страницу. Приходится его закрывать и открывать новое окно. Не от того ли?

Vlad Drakula
23-05-2006, 15:41
benya
Это уже другой вопрос. Кстати, часто замечаю что иногда эксплорер замораживается. Особенно если быстро обновить страницу. Приходится его закрывать и открывать новое окно. Не от того ли?
вполне возможно, я уже создавал тему с примером HTML который заставляет эксплорер сильно задуматься...

От того что дивы плавают, а ячейки таблицы нет?
от того что IE не переваривает таблицы с большой вложенностью...

benya
23-05-2006, 16:17
Vlad Drakula,
Ну ок сделали мы так... Что будет если в один из элементов (внутренних ячеек) добавить:


<br><br><br><br>end

По сути дивка растянется вниз. А родительская дивка останется на месте. А если она еще и с рамкой то все оказывается и поплыло. Как бороться?

Vlad Drakula
23-05-2006, 16:31
benya

или

если возможна такая ситуация, то одну из ячеек можно сделать без обсолютного позиционирования, тогда будет растягиваться вся строка...

или

использовать "overflow:hidden;" чтобы скрывать не влезающий текст.

benya
23-05-2006, 18:07
Vlad Drakula,
Ты вообще какой-то код неправильный дал.
Вот что у меня получилось:

<style type="text/css">
<!--
.DivMain {
background-color: #FFFFFF;
width:100%;
border: #CCCCCC 1px solid;
}
.DivLeft {
float:left;
width:25%;
background-color: #EEEEEE;
}
-->
</style>

<div class="DivMain" style="width:100%">
<div class="DivLeft">Привет1</div>
<div class="DivLeft">Привет2</div>
<div class="DivLeft">Привет3</div>
<div class="DivLeft">Привет4</div>
</div>

Ячейки идут одна за другой. Как теперь добавить новую строку с новыми ячейками, и так же добавить бордюр по их краям, но что бы он не пересекался?

Vlad Drakula
23-05-2006, 18:40
benya
мой код был расчитан на баги IE с рачетом относительныз размеров...

так должны появиться несколько строк:


<div class="DivMain" style="width:100%">
<div class="DivLeft">Привет1</div>
<div class="DivLeft">Привет2</div>
<div class="DivLeft">Привет3</div>
<div class="DivLeft">Привет4</div>
</div>
<div class="DivMain" style="width:100%">
<div class="DivLeft">Привет1</div>
<div class="DivLeft">Привет2</div>
<div class="DivLeft">Привет3</div>
<div class="DivLeft">Привет4</div>
</div>
<div class="DivMain" style="width:100%">
<div class="DivLeft">Привет1</div>
<div class="DivLeft">Привет2</div>
<div class="DivLeft">Привет3</div>
<div class="DivLeft">Привет4</div>
</div>



PS
кстати на форуме есть тег [ HTML ]




© OSzone.net 2001-2012