2007-11-01

Несколько слов об особенностях HTMLayout

По мотивам http://guicci.ru/2007/10/28/htmlayout-web-20-prishel-na-desktop/

Дисклаймер.
Мне не доводилось работать с библиотеками UI отличными от HTMLayout, поэтому не возьмусь сравнивать HTMLayout и например QT. Есть небольшой опыт веб-разработки, поэтому кратко расскажу чем отличается HTMLayout от IE (и IWebBrowser2).

Прежде всего - верстка. HTMLayout это HTML движок с человеческим лицом (и это лицо улыбается разработчику :) )

Небольшое отступление.
Когда впервые столкнулся с задачей разработки сайта меня поразило насколько сложно сделать корректный сайт с несколькими вертикальными колонками контента - веб-разработчики пишут по этому поводу статьи (разные для обсуждения деталей двух/трехколоночной верстки), активно обсуждают, устраивают холивары на тему "верстка table vs div" и т.д. Поначалу, я воспринимал эти статьи как какой-то нелепый розыгрыш, но вскоре выяснилось, что это тяжкая реальность :). Для человека знакомого с HTMLayout подобные вопросы звучат дико. Поясню на примере:

Пример 1. Требуется сделать двухколоночную страничку. Левая колонка имеет фиксированную ширину (допустим 100px), правая - резиновая.
Код:
<html>
<head>
<style>
div { border: 1px solid black; margin: 5px; }
body { flow: horizontal; }
#left { width: 100px; height: 100%%; }
#center { width: 100%%; height: 100%%; }
</style>
</head>
<body>
<div #left >
<div #center >
</body>
</html>
Здесь используется два расширения html: style attribute flow и единица измерения %%.
flow: horizontal говорит, что мы будем укладывать потомков body не вертикально, а горизонтально. %% - определяют размер элемента в процентах от свободного места на страничке. С помощью записи width: 100%%; height: 100%%; мы отдаем элементу #center все свободное место не занятое фиксированной колонкой.
Скриншот прилагается.
http://htmlayoutlab.com/tmp/columns.example1.png

Пример 2. Требуется модифицировать предыдущий пример добавив справа еще одну фиксированную колонку.
#left { width: 100px; height: 100%%; }
#center { width: 100%%; height: 100%%; }
#right { width: 200px; height: 100%%; }
Колонка готова.
http://htmlayoutlab.com/tmp/columns.example2.png

Пример 3. Теперь мы захотели модифицировать предыдущий пример так, чтобы в центре было две резиновых колонки. Потребуется добавить одну строчку в css, одну (еще один div) в html:
#left { width: 100px; height: 100%%; }
#center1 { width: 50%%; height: 100%%; }
#center2 { width: 50%%; height: 100%%; }
#right { width: 200px; height: 100%%; }
http://htmlayoutlab.com/tmp/columns.example3.png

Детальное описание атрибута flow: http://www.terrainformatica.com/htmlayout/flow.whtm
Отдельный бонус - значения h-flow, v-flow, но о них позже.
Описание %% http://www.terrainformatica.com/htmlayout/fspu.whtm

Другая проблема верстки - создание "сложных" элементов на страничке. Например описание линка на http://www.dzone.com/links/ - каждый линк имеет пиктограмму (уменьшенный скриншот), описание, автора, кнопку для голосования, теги. Обычно, создание/переделка подобного (или более сложного) лэйаута - это борьба с таблицами или непослушными дивами. HTMLayout для сохранения значительной части нервных клеток разработчика имеет еще одно значение атрибута flow: table.
Если у Вас есть несколько минут, рекомендую глянуть
HTMLayout SDK http://www.terrainformatica.com/htmlayout/HTMLayoutSDK.zip имеет несколько готовых примеров использования flow: table.
bin\browse.exe - стандартный браузер для просмотра тестовых примеров
html_samples\flows\grid*.htm - примеры flows
Там же можно найти примеры использования h-flow, v-flow
http://htmlayoutlab.com/tmp/flow.grid.png
http://htmlayoutlab.com/tmp/flow.grid2.png

Далее.
Каждый веб-дизайнер сталкивался с ситуацией, когда на нескольких страницах присутствуют одинаковые фрагменты кода (например меню). Оставаясь только в рамках html, мы не можем вынести дублирующийся код в отдельный файл. HTMLayout для решения такой задачи имеет тег <include>, его использование тривиально
<include src="menu.htm"> <em>Ooops! menu.htm is unavailable!</em> </include>
Дополнительный бонус - в коде приложения мы можем перехватывать загрузку файлов и изменять стандартное поведение - грузить menu.htm не с диска, а например, из ресурсов приложения, или архива, БД, генерировать файл на лету - HTMLayout не накладывает на пользователя никаких ограничений.

Далее, я тезисно перечислю другие вкусные особенности (то что помню сейчас) (описывать их подробно, сейчас просто нет времени).
  • Поддержка "обычного" внешнего вида стандартных контролов. Например, background-image: url(theme:button-normal); Естественно, контролы можно стилизовать с помощью css
  • Существует совершенно замечательная возможность определять собственные теги (для этого требуется добавить одну строчку в код Вашего приложения) и атрибуты css.
  • Легкая разработка собственных behaviors. Это тема для отдельного и большого разговора :)
  • Высокая скорость работы, малый размер библиотеки.
  • Высокое качество и дружелюбность саппорта - обнаруживаемые баги обычно фиксятся в течении нескольких дней после обнаружения http://www.terrainformatica.com/htmlayout/logfile.whtm (да, баги к сожалению присутствуют - библиотека активно развивается.)
  • Все это удовольствие можно использовать совершенно бесплатно http://www.terrainformatica.com/htmlayout/prices.whtm :)
  • Наличие мобильной версии (http://www.terrainformatica.com/htmlayout/HTMLayoutMobileSDK.zip)

Если какие-то моменты заинтересуют более подробно, я буду рад ответить на вопросы :)
Форумы посвященные HTMLayout
Официальный http://www.terrainformatica.com/forums/
Неофициальный русскоязычный форум на рсдн http://www.rsdn.ru/forum/group/htmlayout.aspx


Примеры использованные в посте и скриншоты http://htmlayoutlab.com/tmp/flows.zip

2007-10-31

Toshiba Satellite A11

Пару дней назад впервые столкнулся с ремонтом ноутбука. Общие впечатления.
  1. S.M.A.R.T. действительно работает (по крайней мере в нашем случае) - за несколько часов до выхода винта из строя было выдано предупреждение.
  2. WinXP имеет готовые средства для работы со S.M.A.R.T. И это здорово.
  3. Разобрать незнакомый ноутбук несколько сложнее, чем простой комп, но вполне по силам. Найти информацию относящуюся к модели A11 (сделанной для внутрияпонского рынка) не получилось, однако оказалось вполне достаточно инструкции по разбору A10/A15. Найти в рунете сайт посвященный ремонту тошибовских ноутов не удалось.
  4. A11 оказался весьма продуманной штукой - чтобы произвести базовый ремонт: очистить процессор-кулер от пыли (хотя за год эксплуатации ее практически не накопилось!) / добавить память / изъять модем / поменять винт достаточно открутить два-три винта. Еще одно наблюдение - ни один винт не закручивается "до предела", но при этом ни одна деталь никогда не болтается - все сделано очень солидно.
  5. Самой сложной задачей оказалось найти новый IDE винчестер для ноута. Вопрос решился поездкой на Савеловский рынок - в первой же палатке был взят тошибовский 60-гб винт (вместо 40). Цена вопроса - 1700р.

2007-10-22

CSS Sandbox

http://aurelio.net/css-sandbox/
Nice CSS sandbox. Split page, click the properties on the bottom to see their effect on the top.
Отличная идея - на одной страничке удалось сделать доступными для теста сразу кучу возможностей CSS. Наглядно и максимально просто. Именно такой штуки мне не хватало, когда начинал разбираться с CSS.
todo собрать на днях аналогичный пример для HTMLayout.

2007-10-13

Дерево

Вкратце о текущей работе - HTMLayout Spy проект для отладки приложений сделанных на HTMLayout .

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

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


Самым сложным оказался апдейт дерева. Путаница с индексами, одновременным созданием-удалением детей оказалась настоящим кошмаром. Еще один момент - пожалуй, это первый behavior разработанный с возможностью сделать его обобщенным. Думаю, после мелких доделок (небольшие переработки, создание примеров) выложу его в лаборатории.

2007-10-08

WordPress и (программный) код

Без дополнительных телодвижений, вместе сочетаются довольно хреново. А если говорить откровенно, просто так написать заметку содержащую, скажем html-код, без поллитры не получится.
Нагугленные линки для изучения вопроса (собственный поиск wordpress.org по словосочетанию "publish code" дает очень странные результаты)
  • http://codex.wordpress.org/Writing_Code_in_Your_Posts - после беглого просмотра складывается впечатление, что функциональность в самом WordPress очень бедная. По всей видимости, придется навешивать плагины.
Со следующими линками придется поразбираться вечером.

Ссылочка

http://www.boostcookbook.com/
Совсем молодой сайт. Думаю название делает ненужными комментарии.
todo Посмотреть, что там будет через месяц.

2007-10-05

WordPress. Текущие задачки

Что было сделано по ходу работы.
  • Теперь WordPress доступен из корня сайта. Операция оказалась хорошо документированной, поэтому процесс занял несколько минут
За время доводки сайта напильником, с http://themes.wordpress.net/ куда-то девались наиболее удачные темы. Например, ссылка на Stardust уже ведет на 404 :(

Последнее не очень приятно, т.к. хочется видеть работающими favicon и search. Да и спасибо разработчику темы сказать :)

Аналитика (тьфу*3) прикрутилась без проблем.


Скелет №2. WordPress глотает все пользовательские теги p, div вообще не обращая на них никакого внимания. Свинство.
Это просто песня лебединая. Если задать теги br (хоть десять штук) WordPress нормально отобразит их. Однако если начать редактировать пост, то их уже не будет и при следующем показе текст снова окажется смещенным.
Если в режиме Visual поместить несколько переводов каретки, то они не окажут никакого влияния при рендеринге. Понятно, что html их игнорирует, но совершенно непонятно почему WordPress не вставляет в код заглушки.
(Зачем это вообще нужно. Есть картинка, справа от нее располагается список. Как только картинка заканчивается, пункты списка прыгают пикселов на 40 влево. Получается очень некрасиво)

Upd Теперь понятно почему (здесь)

Use HTML
You don't have to use HTML when writing your posts. WordPress will automatically add it to your site, but if you do want control over different elements like boxes, headings, and other additional containers or elements, use HTML.
Интересно, почему они после этого не пишут, как делать таблицы :\
Upd2 Решение нашлось здесь.

in case anyone's interested, this problem has been solved on my side (thanks to the french WP support) by upgrading tinymce, and commenting out the following line of code in plugins/wordpress/editor_plugin.js
(around line 240)

// Remove anonymous, empty paragraphs.
// quentin: no don't, this prevents multiple line breaks
// content = content.replace(new RegExp('(\\s| )*', 'mg'), '');


Ну нафиг такие пляски с кодом. Сделал разрыв с помощью таблицы. Тег table WordPress жрать отказался :)