Вопрос по HTML

← →
antonn © (2006-03-28 16:18) [0]

Знаю, тут есть люди продвинутые в области HTML-программирования. Поэтому возник вопрос - можно ли в текст странички вставить "текст" картинки? Т.е. как в *.dfm файле дельфи, текстом. Таблицей картинка получается, но размер странички растет очень сильно.

← →
Jeer © (2006-03-28 16:23) [1]

Можно.
Art ASCII

← →
McSimm © (2006-03-28 16:26) [2]

Ждите <Canvas></Canvas>, тогда будет можно многое вытворять.
Некоторые браузеры уже поддерживают кажется

← →
McSimm © (2006-03-28 16:29) [3]

Любопытно, почему такая необходимость не использовать естественых способов размещения картинки?

← →
kaif © (2006-03-28 16:29) [4]

Вопрос не совсем понятен. Сформулируй иначе.
"Таблицей картинка получается" - это как?
И почему бы вообще картинку не встроить в страничку именно как картинку?

← →
antonn © (2006-03-28 16:36) [5]

McSimm © (28.03.06 16:29) [3]
Любопытно, почему такая необходимость не использовать естественых способов размещения картинки?
мне нужно картинку одну (72*72) запихнуть в страничку (в ед. экземпляре), без внешних файлов и тд. Сначала хотел mht сделать, но сомневаюсь - все ли браузеры его нормально поддерживают и не будет ли проблем в его создании (я в блокноте пишу, ни один редактор не понравился).

kaif © (28.03.06 16:29) [4]
"Таблицей картинка получается" - это как?
это я создаю таблицу с ячейками 1*1 пиксел и светом фона как у соотвествующего пикселя картинки:)
вот, генератор набросал:
function GetHTMLColor(cl: TColor): string; var rgbColor: TColorRef; begin rgbColor := ColorToRGB(cl); Result := Format("%.2x%.2x%.2x", [GetRValue(rgbColor), GetGValue(rgbColor), GetBValue(rgbColor)]); end; procedure GrafHTML(BT:TBitmap; St:Tstrings); var i,ii:integer; s:String; begin St.Clear; St.Add("<TABLE cellSpacing=0 cellPadding=0><TBODY>"); for i:=0 to bt.Height-1 do begin // St.Add("<TR>"); s:="<TR>"; for ii:=0 to bt.Width-1 do begin s:=s+"<TD height=1 width=1 style="BACKGROUND-COLOR: #"+GetHTMLColor(bt.Canvas.Pixels[ii,i])+";"></TD>"; end; s:=s+"</TR>"; St.Add(s); end; St.Add("</TBODY></TABLE>"); end; procedure TForm1.Button1Click(Sender: TObject); begin GrafHTML(image1.Picture.Bitmap, memo1.Lines); end;

← →
Gero © (2006-03-28 16:41) [6]

Нормальными способами нельзя.

← →
DiamondShark © (2006-03-28 16:47) [7]

> "Таблицей картинка получается" - это как?

Таблица с закрашенными ячейками, размером пиксельХпиксель, или несколько пикселей.
Наверное, как-то так :)

← →
Jeer © (2006-03-28 16:48) [8]

Gero © (28.03.06 16:41) [6]

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

← →
kaif © (2006-03-28 16:51) [9]

мне нужно картинку одну (72*72) запихнуть в страничку

Это пари заключил или как?
Смысл этого в чем???

Если во что бы то ни стало нужно поизвращаться, то можешь попробовать на худой конец нарисовать при помощи языка VML. Internet Explorer поддерживает.

http://wdh.suncloud.ru/vml01.htm

Если, конечно, пари не требует, чтобы это во всех браузерах работало.

← →
antonn © (2006-03-28 17:00) [10]

kaif © (28.03.06 16:51) [9]
нет, это не пари, так хочет моя дизайнерская душа:) Для себя делаю (точнее файл справки для программы. В html - потому что нужно свое оформление и простота создания), нужен логотип.
естесственно, должна быть поддержка всех браузеров. Из-за этого я перешел на "табличный" дизайн (вдруг графика отключена), не использую яву (вдруг отключена). Фаерфокс *.mht не открыл, т.е. открыл в окне IE...

← →
Sandman25 © (2006-03-28 17:02) [11]

antonn © (28.03.06 17:00) [10]

Если графика отключена, это значит, что пользователь не хочет видеть никаких картинок. Даже в таблицах.

← →
LexxX © (2006-03-28 17:06) [12]

antonn © (28.03.06 17:00) [10]
"табличный" дизайн (вдруг графика отключена), не использую яву (вдруг отключена)

А если браузер не стоит?!?!?! Как быть?
Стоит об этом задуматься...

← →
antonn © (2006-03-28 17:06) [13]

Sandman25 © (28.03.06 17:02) [11]
не всегда нехочет, иногда просто экономия трафика (а страничка идет в комплекте с прогой, она локально запускается)

← →
antonn © (2006-03-28 17:06) [14]

LexxX © (28.03.06 17:06) [12]
А если браузер не стоит?!?!?! Как быть?
Стоит об этом задуматься...
хм... а так бывает? ну, что IE нет на компьютере?

← →
Jeer © (2006-03-28 17:06) [15]

Sandman25 © (28.03.06 17:02) [11]

Не факт.
Как минимум - пользователь не хочет тратить трафик на картинки.
Таблица-картинка 72х72 займет копейки.

← →
LexxX © (2006-03-28 17:09) [16]

LexxX © (28.03.06 17:06) [12]
antonn © (28.03.06 17:00) [10]
"табличный" дизайн (вдруг графика отключена), не использую яву (вдруг отключена)

А если браузер не стоит?!?!?! Как быть?
Стоит об этом задуматься...

Забыл смайлик добавить :))

← →
Jeer © (2006-03-28 17:09) [17]

LexxX © (28.03.06 17:06) [12]
Ну да - чистый ДОС:)

← →
McSimm © (2006-03-28 17:18) [18]

> хм... а так бывает? ну, что IE нет на компьютере?

бывает. у меня в данный момент IE нет и быть никак не может :)

← →
antonn © (2006-03-28 17:20) [19]

Jeer © (28.03.06 17:06) [15]
Таблица-картинка 72х72 займет копейки.
ну больше, чем сама картинка (особенно из под генератора из [5]:))

← →
McSimm © (2006-03-28 17:28) [20]

> В html - потому что нужно свое оформление и простота создания),
> нужен логотип.

.chm .pdf
программы просмотра существуют для разных ОС и достаточно распространены

← →
Jeer © (2006-03-28 17:30) [21]

antonn © (28.03.06 17:20) [19]

Я о "твоем" заявленном размере 72х72

← →
antonn © (2006-03-28 17:54) [22]

McSimm © (28.03.06 17:28) [20]
программы просмотра существуют для разных ОС и достаточно распространены
но не так, как WWW-браузеры. Проще только txt, но там оформления нет:)
CHM - думал, но не додумал:) Тот "компилятор", что есть у меня создает справку, при открытии которой слева висит панель поиска (которая совсем не нужна, а убрать не понял как).
PDF - отказался сразу, не у всех есть просмотрщик.

Jeer © (28.03.06 17:30) [21]
я про то, что таблица-картинка весит куда больше, чем "просто" картинка (в bmp 15.2Кб, в "таблице" 316Кб).

а вообще страничка открывается локально (нет, ну можно и с сайта, но идет в комплекте с прогой), поэтому на размер опираться не стоит. Меня волнует то, не "умрет" ли браузер, создавая табличку 72*72? в ИЕ она заметно медленно заполняется (314*215 - уже не запоняется примерно с середины, наверно ресурсов не хватает)

← →
Jeer © (2006-03-28 18:07) [23]

> в "таблице" 316Кб

Это лишнее что-то

← →
kaif © (2006-03-28 18:11) [24]

2 antonn © (28.03.06 17:54) [22]
Что-то ты много насчитал (316Кб)
Мне кажется, что раза в два меньше.
Ты как ячейку раскрашиваешь?
<td bgcolor="#FF0000"></td>
Здесь 27 символов. Умножим 27*72*72...
(я тэги <table>, <tr> не считаю)
Еще если логотип состоит из сплошных цветовых плоскостей,
можно сэкономить какие-то участки, используя colspan, rowspan, не знаю...
Хотя работать это все будет с тормозами.
Я бы не заморачивался и сделал картинку.
В конце концов в Help-е логотип - не главное.

← →
kaif © (2006-03-28 18:17) [25]

Еще подумай о том, что юзер может посмотреть твой HTML-текст и это может быть не в пользу имиджа как логотипа так и автора. Хотя бы потому что так никто не делает. Зачем тебе это нужно? Явно не нужно. Так что если нет красивого решения этой проблемы (а таблица - явно некрасивое решение), то уж лучше юзать классику. Ну и пусть отключает картинки, если хочет - это его право. Может у него глаза болят от картинок. В Help-то он не за этим полезет. Если вообще полезет... :)

← →
antonn © (2006-03-28 18:19) [26]

kaif © (28.03.06 18:11) [24]
<td bgcolor="#FF0000"></td>
хы-хы, ну вот и мое знание хтмл вылазит:)
<TD height=1 width=1 style="BACKGROUND-COLOR: #000000;"></TD>
и так для каждой:)

а как задать у ячеек размер единожды для всех?

Еще если логотип состоит из сплошных цветовых плоскостей,
http://deskclock.narod.ru/_images/logo_main.GIF
замучаюсь выбирать...

← →
antonn © (2006-03-28 18:20) [27]

kaif © (28.03.06 18:17) [25]
Зачем тебе это нужно? Явно не нужно.
Это стиль, это нужно, все дело в деталях. Не люблю абы как...
И это нужно:)

← →
kaif © (2006-03-28 18:21) [28]

Можешь Help вообще без логотипа сделать.
Кто сказал, что в Help-е обязателен логотип?
А логотип засандаль в About или в заставку к проге.
К тому же возможно Help кто-то захочет распечатать.
В этом случае чем меньше картинок, тем лучше.
По мне, по крайней мере.

← →
antonn © (2006-03-28 18:24) [29]

kaif © (28.03.06 18:21) [28]
Кто сказал, что в Help-е обязателен логотип?
ну я хочу и все тут:)
если ничего не получится, значит не будет.

А логотип засандаль в About или в заставку к проге.
нет там Эбаут, там немножко инструкций и понтов:)
заставку к проге тоже в картинке? :)

← →
kaif © (2006-03-28 18:28) [30]

Каскадные стили помогут сократить надпись. Проще написать
<td class="a"></td>
а стиль описать в одном месте, в начале текста.
Если, конечно, все браузеры поддерживают стили...
Надеюсь, что это так. Хотя если это не так, то твой код тоже может не заработать.
Кстати, в стилях можно оговорить и ширину линий (чтобы их не было).

← →
TUser © (2006-03-28 18:30) [31]

Во всех браузерах не выйдет. Мой называется notepad.exe.

← →
kaif © (2006-03-28 18:32) [32]

TUser © (28.03.06 18:30) [31]
Хороший браузер. Особенно в NT

← →
Jeer © (2006-03-28 18:35) [33]

TUser © (28.03.06 18:30) [31]

Просто плохой "браузер":))

← →
antonn © (2006-03-28 18:38) [34]

TUser © (28.03.06 18:30) [31]
Во всех браузерах не выйдет. Мой называется notepad.exe.
это не браузер, это текстовый редактор (если не переименованный браузер:)). Браузер позволяет по строке адреса отобразить страницу и оперировать гиперссылками.
но блокном мне очень нравится как средство разработки хтмл-страниц:)

← →
Gero © (2006-03-28 19:01) [35]

> но блокном мне очень нравится как средство разработки хтмл-
> страниц

Это временно.

← →
antonn © (2006-03-28 19:02) [36]

Gero © (28.03.06 19:01) [35]
не сомневаюсь.

← →
Gero © (2006-03-28 19:09) [37]

> antonn ©

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

← →
antonn © (2006-03-28 19:19) [38]

Gero © (28.03.06 19:09) [37]
ну зачем так спешить с ответом?..
про размер - я знаю что больше (даже гораздо больше), в [22] я написал, что просто таки огромные размеры выходят...
а про трафик - страница открывается локально, т.е. с винчестера, из каталога программы, www-браузером, установленным по-умолчанию.

← →
Gero © (2006-03-28 19:30) [39]

> antonn © (28.03.06 19:19)

А, сорри, возможно был невнимателен.
В таком случае лучше использовать не таблицу, а просто текст.

← →
kaif © (2006-03-28 19:31) [40]

Хочешь красивое, хотя и бессмысленное решение?
Напиши программу, которая обойдет все пикселы твоей картинки и сгенерирует по ней текст оптимальной таблицы с колспанами и роуспанами.
Если тебе делать нечего, конечно. :)

Веб-дизайнеры такой понт оценили бы.
Если же хороший алгоритм найдешь, можешь где-нибудь выложить для любителей поиздеваться над браузерами.
Типа "Генератор HTML-таблиц для имитации изображений с ограниченной цветовой палитрой. Freeware. Категория HTML::Перверзии в HTML"
:)

← →
nt (2006-03-28 19:46) [41]

надо бороть в себе немотивированное стремление запихать всё в один файл.
вернее, его причины.

← →
Gero © (2006-03-28 19:47) [42]

> [40] kaif © (28.03.06 19:31)

Причем не только таблиц, а и текста, если нужно.

← →
antonn © (2006-03-28 19:50) [43]

kaif © (28.03.06 19:31) [40]
Хочешь красивое, хотя и бессмысленное решение?
ну почему бессмысленное? будет то, как должно быть:) (на сайте проги логотип есть, такой же и в хелпе хочу сделать. Написали, чтобы с программой шел хелп, приближенный к сайту, а то не все могут себе позволить в инет выйти).

> Если тебе делать нечего, конечно. :)

ну вот, а я только идеей загорелся:)
но, вообще, попробую...

← →
Gero © (2006-03-28 19:53) [44]

Хелпы вобще в chm лучше делать, он для этого и предназначен. И использовать его удобнее, и проблемы с логотипами отпадают.

Но если хочется поиграться, то это, конечно, другое дело.

← →
antonn © (2006-03-29 06:24) [45]

Gero © (28.03.06 19:53) [44]
CHM удобнее когда страничка не одна, и нужна навигация с поиском.

так-с, немного оптимизировал "отрисовку". Посмотрите пож, особенно хочу узнать, как на опере показывает:
http://deskclock.narod.ru/xlam/Help_pre.htm (104Kb)
http://deskclock.narod.ru/xlam/Help_pre.rar (10Kb)

← →
alles © (2006-03-29 10:56) [46]

если не использовать внешний файл то можно так
1. замудрить програмку которая читает цвет каждого пикселя из картинки и пишет его код в файл, допустим.
2. Создать таблицу в ХТМЛ где каждый row будет равен 1-му пикселю с кодом цветом из файла который сосдали выше.

Я делал, ради Эксперимента, получялось но ЭТО Я НИКОГДА НЕ БУДУ ИСПОЛЬЗОВАТЬ В РЕАЛЕ, слишком гемор!!

← →
alles © (2006-03-29 10:56) [47]

если не использовать внешний файл то можно так
1. замудрить програмку которая читает цвет каждого пикселя из картинки и пишет его код в файл, допустим.
2. Создать таблицу в ХТМЛ где каждый td будет равен 1-му пикселю с кодом цветом из файла который сосдали выше.

Я делал, ради Эксперимента, получялось но ЭТО Я НИКОГДА НЕ БУДУ ИСПОЛЬЗОВАТЬ В РЕАЛЕ, слишком гемор!!

← →
alles © (2006-03-29 10:58) [48]

2-ой пост по коректнее. сорри

← →
antonn © (2006-03-29 11:03) [49]

alles © (29.03.06 10:56) [47]
если не использовать внешний файл то можно так

> из файла который сосдали выше.

нестыковка. да и вообще, я об этом писал еще в 5ом посте, а в [45] уже результат такой программы...

← →
alles © (2006-03-29 11:12) [50]

2 antonn © (29.03.06 11:03) [49]
извини не читал все ветку. А на счет нестыковки, я использую этот файл для временного хранения значений а потом просто их переписывую в ХТМЛ файлике.

Таблицы какие-то, прочий бред. Читайте w3.org и пребудет с вами сила.
http://wal.pp.ru/1.html

Всё работает!
Вот тот код:

<object type="image/gif" data="data:image/gif;base64,R0lGODdhSABIAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwMDcwKbK8EAgAGAgAIAgA KAgAMAg AOAgAABAACBAAEBAAGBAAIBAAKBAAMBAAOBAAABgACBgAEBgAGBgAIBgAKBgAMBgAOBgAACAACCA AECAAGCAAICAAKCAAMCAAOCAAACgACCgAECgAGCgAICgAKCgAMCgAOCgAADAACDAAEDAAGDAAIDA AKDAAMDAAODAAADgACDgAEDgAGDgAIDgAKDgAMDgAODgAAAAQCAAQEAAQGAAQIAAQKAAQMAAQOAA QAAgQCAgQEAgQGAgQIAgQKAgQMAgQOAgQABAQCBAQEBAQGBAQIBAQKBAQMBAQOBAQABgQCBgQEBg QGBgQIBgQKBgQMBgQOBgQACAQCCAQECAQGCAQICAQKCAQMCAQOCAQACgQCCgQECgQGCgQICgQKCg QMCgQOCgQADAQCDAQEDAQGDAQIDAQKDAQMDAQODAQADgQCDgQEDgQGDgQIDgQKDgQMDgQODgQAAA gCAAgEAAgGAAgIAAgKAAgMAAgOAAgAAggCAggEAggGAggIAggKAggMAggOAggABAgCBAgEBAgGBA gIBAgKBAgMBAgOBAgABggCBggEBggGBggIBggKBggMBggOBggACAgCCAgECAgGCAgICAgKCAgMCA gOCAgACggCCggECggGCggICggKCggMCggOCggADAgCDAgEDAgGDAgIDAgKDAgMDAgODAgADggCDg gEDggGDggIDggKDggMDggODggAAAwCAAwEAAwGAAwIAAwKAAwMAAwOAAwAAgwCAgwEAgwGAgwIAg wKAgwMAgwOAgwABAwCBAwEBAwGBAwIBAwKBAwMBAwOBAwABgwCBgwEBgwGBgwIBgwKBgwMBgwOBg wACAwCCAwECAwGCAwICAwKCAwMCAwOCAwACgwCCgwECgwGCgwICgwKCgwMCgwOCgwADAwCDAwEDA wGDAwIDAwKDAwP/78KCgpICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAAAAAAALAAAAABIAEgA AAj/AP8JHEiwoMGDCBMqXMiwocOHECNKnEiRIYCBFwtmrMixIYCLH0MK/PhPJMGNHTuGXAmSJcmT JWOmrCiS5MaXK0fiRDnTocucLDHiLMmzp8+fLXWO1Bg0ocmiE3/qBEmU6M2Q/QD0Q+jSaM2nQ61u 7JeVrNatWwVmldrz5UKqF8nK/WcWLV25WpsalSi3b927d/Ouzbk3ot/DWz+uxYsSauGDcslJ7ieZ ZF+sZm3q3UvuX2eC5MhKDj25NOKziVtuppjx82iBoSmPnj2asmfKg8+K7UqTtmTPAHwLfx1cdvDY u3lL/Og7+PHRWoU/J4eVdPHkbB8yH17ZN+Xpv7vP/5ZNHSlh7du5h5xMvnTn9+6hVzYfkTl42i5r i57t2fP40M7Np5xP4jVHXXmKqUYXdf4dGF9zqx0lHYJfoZZVVRfBR9qG/FHF2nDmaUUXalVNBaB8 tPU0m2ZdKXZhWTXFlBd3/c10nFBiLWVXbkjtN9xjSokYF12BkTViY1gteN9nhbmoGJFG+nUWSIMt tuRvRqUV1193IQajYJllRVx4PRlJ5V9zRTmll1L+WCZaFrJp4ZpsulkRWn11WRabeOFJp18HNsgk RWnpyWefYB5qlm8c7cgnYIiNaGifMKY4KF+HBVbSoVO6eFiCC8JXo2Fp+TVplHyu9Olc/L02EZ5d Cv8Wk6KMYWbhXRxWxtepi83K61wuUXpZe1iSmiewMkE5bK0s1ckoRJniNRVBeH6KYYKICTeqQ5FO 5dhpOaHqpbbcmjrXbsmONGxT1fZF40ORaonuS4iu1m5k5Db0KHaqSrmTbub6mGK53fLb72VgxnkY d5citK/BiS6bppfAaduwQYd6+5OcNgWGWVrSwUuxxsE+GuambgnKH8GnQeypvwqbdeRx06W8EJub 8sjiaWZKuxNsK9p8s5dxmidxpKjlF+HQ7far7pdEC+uySdDS6ujBVjK2mM4tYloXorAWmTTUCId4 HqmC5SVi1FLuCePUVEfl6a1qARbznmqbLXR92HpXCqWyCGedmt57H9WsiAOFHWZua8Ed93JIQaam lU1VGJRjfC99kN7eCuVhSgNa1DFYVgGpceZufS6j6RjK3TFMmLNOU7qy12777bjnrvvuvPfu++/A HxQQADs= "> </object>

В Опере 8.

А ведь верно, вертелось что-то в памяти - не вспомнил:(

IE не поддерживает.

Однако интересно... а только как этот GIF записан? В кодировке что ли какой-то другой?

base64

Yegorchic © (29.03.06 15:54) [59]
Это MIME ещё называется?
это в mht еще хранится...
но факт, в ИЕ страница выше показывает пустоту (в фаерфоксе гиф)

Может просто в настройках что-то в ИЕ отключено? А то все показывают, а ИЕ нет...

такой gif можно даже в адресной строке задать, кажется. только небольшой

Yegorchic © (29.03.06 15:46) [57]
В кодировке что ли какой-то другой?
Jeer © (29.03.06 15:48) [58]
base64

Формат "до виндовой" почты.

> [62] McSimm © (29.03.06 16:03)
Можно, протокол data:, но, как выяснилось "один из самых популярных" отказывается поддерживать :( .

А, ну я так и думал. На панели Indy Misc есть компонент IdEncoder(Decoder)MIME и на нём написано 64 :)

2 antonn © (29.03.06 06:24) [45]
А что... Неплохо.
Можно еще сократить размер.
Я добавил width="72" в тэг table
и убрал все width=1 в ячейках.
Продолжает работать.
От height=1 избавиться вероятно тоже можно, запихав всю таблицу в ячейку размером 72x72 - пробовать не стал.

kaif © (29.03.06 18:09) [67]
Я добавил width="72" в тэг table
и убрал все width=1 в ячейках.
это из-за фаерфокса, вот надо ему, чтобы на не объединенных ячейках размер указывался, и все, хоть тресни...
можно еще с масштабированием делать:)
а флаги и тп вообще "легкими" получаются:)

kaif © (29.03.06 19:05) [69]
а если там весь ряд "объединен"?
или даже чать его, все равно нужно следить, чтобы ниже клетки имели размеры

у меня даже проблема была, потерял пол-дня, думал в коде косяк. Вот битмап (0 - белый цвет, 1 сиреневый):
0000 0110 0011 0010

код со всеми учетами был (размеры пикселей*20, для наглядности):
<TABLE cellSpacing=0 cellPadding=0><TBODY> <TR><TD height=20 width=80 bgcolor="#FF00FF" colSpan=4></TD></TR> <TR><TD height=20 width=20 bgcolor="#FF00FF"></TD><TD height=20 width=40 bgcolor="#FFFFFF" colSpan=2></TD><TD height=20 width=20 bgcolor="#FF00FF"></TD></TR> <TR><TD height=20 width=40 bgcolor="#FF00FF" colSpan=2></TD><TD height=20 width=40 bgcolor="#FFFFFF" colSpan=2></TD></TR> <TR><TD height=20 width=40 bgcolor="#FF00FF" colSpan=2></TD><TD height=20 width=20 bgcolor="#FFFFFF"></TD><TD height=20 width=20 bgcolor="#FF00FF"></TD></TR> </TBODY></TABLE>
в ИЕ наблюдалась неправильная ширина второго столбца (точнее из-за него все расколбасило). В фаерфоксе второго столбца вообще небыло:) Вот примерно из-за таких косяков и не могу сократить число width и height. В опере не тестил - не имею:)

ЗЫ Кстати, а как все таки нарисовать этот битмап? не дает мне покоя...

Вопрос по HTML Найти похожие ветки