Посмотрите на веб окна
 

В свободное время состряпал страничку и разместил на Blogger в виде десктопа. Я видел тут, что кое-кто подобные вещи уже делал. Теперь посмотрите на мой вариант: http://webokna.blogspot.com/ . Особенно интересует работоспособность в различных версиях браузеров. Буду признателен если отпишитесь, хотя бы по версиям. По поводу целесообразности такой верстки спорить не хочу. У каждого свои вкусы и взгляды. В конечном итоге хотелось бы собрать такой себе набор полезных инструментов и сервисов в одном месте и именно с такой навигацией. Если есть предложения пишите.

Окна тормозят, реализация говно. Вот, посмотри: cs-console.ru. Часто просто перестают таскаться.

оригинально однако. Грузится конечно долго. И перетаскиваются окна медленно.
В Opera 10.10 при загрузке ошибки. Часики также не появились. При активации иконок тоже ошибки.
В Chrome 3.0. нормально даже как-то меньше тормозит.
IE 6.0. - ОК, но правое меню не успевает за мышкой.
Firefox 3.5.7 - OK

Где же оригинально?! Сейчас не могу привесть ссылку, но есть вещи и по-серьёзнее...

Без говна в комментах воспитание не позволяет обойтись? Или это жизненная потребность кого-то обосрать?

Спасибо за ответ. Без использования bloggera должно грузиться быстрее. Javascript ядра меньше 40кб. В опере 10.10 смотрел, так там ошибки конкретно движка окон не заметил. Там выплывают ошибки движка самого bloggera внутри фреймов окон. То же самое и при активации иконок. Ошибки идут из фрейма в котором лежит страница bloggera. Если внутри окна будет лежать страница без ошибок то и не выплывет. По перетаскиванию будет время сделаю. Считаю, что это не очень критично сейчас. Не представляю себе юзера зацикленного именно на бесконечных перетаскиваниях.

Это моё личное мнение. Такие комменты я оставляю не часто. Продукт у тебя недостаточно оттестен...

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

Спасибо. За правый как раз может, а за левый нет. Просто в логике ограничение стоит на левый ноль и верхний ноль системы координат. На подсознательном уровне включил не особо задумываясь. В принципе математику можно переделать, если это очень важно. Интересно, что подразумевается под словом тормозит. Я вижу только то, что окно может догонять мышь. У меня комп быстрый, может я чего-то еще не замечаю?

Всё собрал: и Apple и Windows. Своих идей нет?

Да и Gnome и KDE тоже можно собрать. На то уже есть некоторая возможность создавать свои темы (правда хотелось бы сделать потом ее еще гибче).

загрузка, либо выскакивает сразу (шанс ~10%), либо можно ждать вечно. Окно явно не успевает за мышью даже в Chrome.

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

Оказалось, что в IE6 тормоза были по причине использования expression в CSS для поддержки PNG прозрачности. Вынес эту функцию из expression прямо на страницу, стало значительно быстрее в IE6. Окна теперь и влево могут уходить (это математика). Логика drag&drop реализована, в принципе, по классической схеме, во многих местах встречающихся в примерах на этом сайте (я проcмотрел их уже много, суть одна, по onmousedown запоминаем элемент дальше действуем). Я открывал сайт в IE6 на довольно слабой машине 700MHz 128Мб Озу, для которого сам ИКСПИ тяжеловат, и при этом вообще-то тормозов не заметил. Вопрос "сколько элементов в нем потрачено что бы его построить?" я, честно говоря, недопонимаю. Может речь идет о элементах окна? Да их конечно больше, чем в примерах с простыми див и одной двумя кнопками, и без IFRAME, и с возможностью делать ресайз только за нижний правый угол. Рендеринг на таких простых окнах возможно работал бы быстрее. К тому же, все равно, на всех этих примерах тоже присутствует эффект догонялок за мышью.

это окд окна

<div align="center" id="Desktop1_W_Win0" style="border: 0px solid rgb(255, 0, 0); overflow: visible; z-index: 602; position: absolute; left: 455px; top: 94px; width: 800px; height: 576px; visibility: visible;" class="shadow">
  <table cellspacing="0" cellpadding="0" border="0" style="height: 100%; width: 100%;"><tbody style="width: 100%;">
    <tr>
      <td style="width: 100%; height: 2px;" colspan="3">
        <table cellspacing="0" cellpadding="0" border="0" style="border: 0px none ; width: 100%; height: 100%;">
          <tbody>
            <tr>
              <td style="width: 8px;">
                <img width="8" vspace="0" hspace="0" height="2" border="0" src="http://rss2banner.com/desktop/imgv/t11.gif" style="display: block; cursor: nw-resize;" id="Desktop1_W_Win0_borderLT1">
              </td>
              <td width="100%" style="background-color: rgb(153, 153, 153);">
                <img vspace="0" hspace="0" height="2" border="0" src="http://rss2banner.com/desktop/imgv/t1.jpg" style="width: 100%; display: block; cursor: n-resize;" id="Desktop1_W_Win0_borderT1">
               </td>
               <td width="8">
                 <img width="8" vspace="0" hspace="0" height="2" border="0" src="http://rss2banner.com/desktop/imgv/t21.gif" style="display: block; cursor: ne-resize;" id="Desktop1_W_Win0_borderRT1">
               </td>
             </tr>
           </tbody>
         </table>
       </td>
     </tr>
     <tr>
       <td colspan="3" style="height: 28px;">
         <table cellspacing="0" cellpadding="0" border="0" style="border: 0px none ; width: 100%; height: 28px;">
           <tbody>
             <tr>
               <td>
                 <img width="8" vspace="0" hspace="0" height="28" border="0" src="http://rss2banner.com/desktop/imgv/t12.gif" style="display: block; cursor: nw-resize;" id="Desktop1_W_Win0_borderLT2">
               </td>
               <td style="width: 100%; height: 28px; background-image: url(http://rss2banner.com/desktop/imgv/ahead.jpg); background-color: rgb(204, 204, 204);" id="Desktop1_W_Win0_cellhead">
                 <div style="position: relative; left: 0px; top: 1px; width: 100%; height: 100%; cursor: pointer;" id="Desktop1_W_Win0_header">
                   <table cellspacing="0" cellpadding="0" border="0" style="width: 100%; height: 100%;">
                     <tbody>
                       <tr>
                         <td width="16">
                           <div style="position: relative; left: 0px; top: 0px; width: 20px; height: 20px;">
                             <img width="16" vspace="0" hspace="0" height="16" border="0" src="http://rss2banner.com/desktop/imgv/logos.gif" style="display: block; cursor: pointer;">
                           </div>
                         </td>
                         <td width="100%"> <!-- [B]Это только начало заголовка[/B] -->
                           <div style="overflow: hidden; position: relative; left: 0px; top: 0px; width: 100%; height: 20px; font-weight: bold; text-align: left;">Получите свои "Веб Окна"!</div>
                         </td>
                         <td nowrap="" style="vertical-align: top;">
                           <div style="position: relative; left: 0px; top: 0px; width: 100%;">
                             <img vspace="0" hspace="0" border="0" src="http://rss2banner.com/desktop/imgv/min.gif" class="btn_min" title="Minimize" style="cursor: pointer;" id="Desktop1_W_Win0_btnMin">
                             <img vspace="0" hspace="0" border="0" src="http://rss2banner.com/desktop/imgv/max.gif" class="btn_max" title="Maximize" style="cursor: pointer;" id="Desktop1_W_Win0_btnMax">
                             <img vspace="0" hspace="0" border="0" src="http://rss2banner.com/desktop/imgv/close.gif" class="btn_close" title="Close" style="cursor: pointer;">
                           </div>
                         </td>
                       </tr>
                     </tbody>
                   </table>
                 </div>
               </td>
               <td>
                 <img width="8" vspace="0" hspace="0" height="28" border="0" src="http://rss2banner.com/desktop/imgv/t22.gif" style="display: block; cursor: ne-resize;" id="Desktop1_W_Win0_borderRT2">
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td id="Desktop1_W_Win0_contentcellL" style="height: 100%; width: 4px; background-color: rgb(153, 153, 153);">
          <img width="4" vspace="0" hspace="0" border="0" src="http://rss2banner.com/desktop/imgv/t13.gif" style="height: 100%; cursor: w-resize;" id="Desktop1_W_Win0_borderL1">
        </td>
        <td style="height: 100%; width: 100%; background-color: rgb(204, 204, 204);" class="windowcell" id="Desktop1_W_Win0_contentcell"> <!-- [B]тут контент как я понял[/B] -->
           <iframe frameborder="0" style="height: 100%; width: 100%; background-color: rgb(255, 255, 255); visibility: visible;" src="http://webokno.blogspot.com/2009/12/proposal.html" marginwidth="0" marginheight="0" id="Desktop1_W_Win0_content">
           </iframe>
         </td>
         <td id="Desktop1_W_Win0_contentcellR" style="height: 100%; width: 4px; background-color: rgb(153, 153, 153);">
           <img width="4" vspace="0" hspace="0" border="0" src="http://rss2banner.com/desktop/imgv/t23.gif" style="height: 100%; cursor: w-resize;" id="Desktop1_W_Win0_borderR1">
         </td>
       </tr>
       <tr>
         <td style="height: 3px; width: 4px; background-color: rgb(153, 153, 153);">
           <img width="4" vspace="0" hspace="0" height="3" border="0" src="http://rss2banner.com/desktop/imgv/t13.gif" style="display: block; cursor: w-resize;" id="Desktop1_W_Win0_borderL2">
         </td>
         <td style="height: 3px; width: 100%; background-color: rgb(204, 204, 204); background-image: url(http://rss2banner.com/desktop/imgv/t33.gif);">
         </td>
         <td style="height: 3px; width: 4px; background-color: rgb(153, 153, 153);">
           <img width="4" vspace="0" hspace="0" height="3" border="0" src="http://rss2banner.com/desktop/imgv/t23.gif" style="display: block; cursor: w-resize;" id="Desktop1_W_Win0_borderR2">
         </td>
       </tr>
       <tr>
         <td style="height: 24px; width: 4px; background-color: rgb(153, 153, 153);">
           <img width="4" vspace="0" hspace="0" border="0" src="http://rss2banner.com/desktop/imgv/t13.gif" style="height: 100%; display: block; cursor: w-resize;" id="Desktop1_W_Win0_borderL3">
         </td>
         <td style="height: 24px; width: 100%; background-color: rgb(204, 204, 204);">
           <table cellspacing="0" cellpadding="0" border="0" style="border: 1px solid rgb(51, 51, 51); width: 100%; background-image: url(http://rss2banner.com/desktop/imgv/foot.jpg);" id="Desktop1_W_Win0_tf">
             <tbody>
               <tr>
                 <td style="width: 100%; height: 20px;"> <!-- [B]cтатусная строка[/B] -->
                   <div style="overflow: hidden; position: relative; left: 0px; top: 1px; width: 100%; height: 20px; text-align: left;">&nbsp;Получите свои "Веб Окна"!</div>
                 </td>
                 <td nowrap="" align="right"></td>
                 <td>
                   <img vspace="0" hspace="0" border="0" src="http://rss2banner.com/desktop/imgv/ang.jpg" style="display: block; cursor: nw-resize;" id="Desktop1_W_Win0_borderRB2">
                 </td>
               </tr>
             </tbody>
           </table>
         </td>
         <td style="height: 24px; width: 4px; background-color: rgb(153, 153, 153);">
           <img width="4" vspace="0" hspace="0" border="0" src="http://rss2banner.com/desktop/imgv/t23.gif" style="height: 100%; display: block; cursor: w-resize;" id="Desktop1_W_Win0_borderR3">
         </td>
       </tr>
       <tr>
         <td style="height: 4px; width: 4px; background-color: rgb(153, 153, 153);">
           <img width="4" vspace="0" hspace="0" height="4" border="0" src="http://rss2banner.com/desktop/imgv/t15.gif" style="display: block; cursor: ne-resize;" id="Desktop1_W_Win0_borderLB1">
         </td>
         <td style="height: 4px; width: 100%; background-color: rgb(153, 153, 153);">
           <img vspace="0" hspace="0" height="4" border="0" src="http://rss2banner.com/desktop/imgv/t14.gif" style="width: 100%; display: block; cursor: n-resize;" id="Desktop1_W_Win0_borderB1">
         </td>
         <td style="height: 4px; width: 4px; background-color: rgb(153, 153, 153);">
           <img width="4" vspace="0" hspace="0" height="4" border="0" src="http://rss2banner.com/desktop/imgv/t16.gif" style="display: block; cursor: nw-resize;" id="Desktop1_W_Win0_borderRB1">
          </td>
        </tr>
      </tbody>
    </table>
</div>

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

П.С. А вам от этого не страшно?

многа букоф:blink:

отформатировал код. теперь разборчиво видно что в коде более 50ти элементов...

Тут скорей не количество влияет, а сами элементы: рендеринг таблицы намного медленнее.

посмотрите точно также в FireBuge на код иконки

<div align="center" id="Desktop1_I_Icon0" style="z-index: 210; position: absolute; left: 10px; top: 50px; width: 70px; height: 70px; text-align: center;" class="IconCSS">
 <img hspace="0" height="48" width="48" vspace="0" border="0" src="http://rss2banner.com/desktop/img/kwrite.png" title="Блог" style="cursor: pointer;">
 <br>
 <a href="javascript:CreateWindow(Desk,800,DeskH(450),'Блог','http://webokno.blogspot.com/',0);" target="_self" title="Блог" style="color: rgb(255, 255, 255); font-family: arial,helvetica,sans-serif; font-size: 10pt; font-weight: normal; text-decoration: none;">Блог</a>
</div>

Тут тоже много так называемых элементов ? (внутри div-a одна картинка и одна ссылка) .
Тем не меннее эффект догонялок присутствует. закройте все окна (они удаляются их DOMa) и попробуйте потаскать иконки.
Поэтому на дивах может и быстрее было бы, но это отнюдь не факт. К тому же, такую верстку на див тоже сложновато написать.
cколько там должно быть элементов. По таблицам отчего мне должно быть страшно? их верстка формируются автоматически. Вы можете дать ссылку на информацию, что таблицы рендерятся значительно медленнее?

И br. С учётом того, что в разумном случае достаточно двух элементов, а в маньячном можно обойтись одним, да, много.

считаете блох? это не поможет, даже если там будет без br. эффект будет тот же.

У вас в одной иконке 4 элемента. Её можно сделать одним элементом, но лучше двумя, это будет более расширяемо. Т.е. количество элементов можно уменьшить минимум в 2 раза, и это на обычной иконке. С остальными элементами дело обстоит, полагаю, ещё хуже.

Я посмотрел на ваши пасьянсы. Там карта это один элемент. Вы считаете что так было бы быстрее. Тем не менее ваши карты точно также догоняют мышку, не замечали? Можете объяснить этот эффект?

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

Построй Вы все на одном элементе все равно будут догонялки. Просто чем меньше элементов тем быстрее эти догонляки будут.

Да можно сделать меньше, я это понимаю. Может быть догонялки были бы немножко быстрее. Засунуть фон в див например, но тогда возможно станет меньше гибкости, особенно если допустить, что каждая иконка может иметь свой собственный стиль. Для окон, конечно, хотелось бы иметь тоже дивную верстку. Сложновато ее реализовать, особенно если я хочу реализовать ресайз за каждую строну и каждый угол, плюс кнопки с подсветками, двойной клик по шапке и т.д. (это в любом случае повлечет за собой создание дополнительного количества элементов ибо на одном двух такую функциональность не реализуешь). В ядре движка есть методы отвечающие за построение верстки иконки или окна, т.е. именно реализацию верстки можно изменить не затрагивая остальной код. Кроме того, я хотел сделать вызов функций для создания иконок и окон с их настройками как можно проще для конечного пользователя. Думаю, что именно при такой постановке задачи существенно быстрее движок работать не станет (хотя на быстром компьютере итак все неплохо). Я почему-то уверен, что критика по скорости будет присутствовать с вашей стороны в любом случае.

Построил иконку на двух элементах:

<div align="center" id="Desktop1_I_Icon3" style="z-index: 210; position: absolute; left: 10px; top: 350px; width: 70px; height: 70px; text-align: center; cursor: pointer; background-position: center top; background-image: url(http://rss2banner.com/desktop/img/rss_news.png); background-repeat: no-repeat;" class="IconCSS" title="Подпишитесь на новости">
 <a href="javascript:CreateWindow(Desk,800,DeskH(450),'Подпишитесь на новости','http://webokno.blogspot.com/2009/12/subscribe.html',0);" target="_self" title="Подпишитесь на новости" style="color: rgb(255, 255, 255); font-family: arial,helvetica,sans-serif; font-size: 10pt; font-weight: normal; text-decoration: none; position: relative; top: 53px;">Подписка</a>
</div>

визуально лучше не стало, помоему даже хуже.

Кстати, очень влияет на производительность наличие фоновой картинки на странице. Там можно выбрать вариант "Без картинки" в выпадающем списке.

Естественно что тормозит - там же сплошные эвалы. У меня данная траница убила ФФ3 :)

Нука нука, где эвалы? Там вижу парочку, но не для перемещения.

Не с того начали.

Все неменяющиеся стили в CSS, тем более что имеется класс IconCSS.

Вы все элементы каждый раз по id ищете? Зачем, если вы их сами же и генерите? Храните просто ссылку в нужном классе. Хотя, судя по след. цитате, классов там нет (код я не смотрел).

События вешаются методами addEventListener/attachEvent. Забудьте про псевдопротокол javascript, тем более в таких приложениях. Здесь вообще ссылка не нужна.

Большое количество ID сильно тормозит рендеринг - проверенно. Кроме getElementById больше не знаешь методов?

подскажи

Ты серьезно?!:blink:
Начни отсюда.

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

Вы сами это советовали. Уменьшить количество элементов.
За остальное спасибо, будем менять.

у меня есть ссылки на элементы. ты мне не помог ничем.

Ты и не сказал, что тебе надо. DOM-методы я тебе дал.

Харе флудить:D Вы меня от чтения отвлекаете:D

Поиск элементов в DOM

1. Поиск по id
2. Поиск по тагу
3. Получить всех потомков
4. Поиск по name: getElementsByName
5. Другие способы

что в этом разделе нового? что полезного оттуда можно взять?

А давайте вообще все методы тут напишем.
Откуда мы знаем что для вас тут нового.

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