Малинников.ru » интернет-приложения

Кошерный HTML(5)

Павел Малинников — Sat, 24 Apr 2010 08:49:09 +0000

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

Я считаю, что лучший вариант — это нативная разработка, но есть много вопросов по распространению приложения внутри компании и его обновления. У Эппла есть понятие in-house приложений для предприятий или вариант «вечного тестирования» по ad-hoc схеме, но, чтобы подать заявку на Team-development, нужен ряд сведений о компании, типа DUNS-номера и т.п, который нужно еще как-то получить. Кроме того, даже по ad-hoc схеме возможны неожиданные нюансы.

Это все реально, наверное, но бюрократию пока решил оставить на десерт, а пока посмотрел варианты безфлешовой разработки вебовских RIA.

Очень интересный фрейморк Cappuccino. Люди понимают, что для серьёзных разработок без полноценного ООП не обойтись, используют надстройку над JS — ObjectiveJ. В результате HTML+JS.

Интересно визуально и с техничесой точки зрения. К сожалению, на десктопе под виндовс приложение с несколькими гридами и диалогами потребляет больше проц. времени, чем аналогичное флексовое. Пользователь оценивает степень интерактивности словами «зачётно тормозит».

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

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

Есть еще SproutCore, на айфоне выглядит примерно так:

Одним словом, производительность и качество связки HTML+JS для RIA на айфон/айпад требует значительного улучшения. Буду рад ошибаться, может быть, есть другие фреймворки, получше. Иначе придётся писать на чистом js, без фреймворков вообще, борясь за производительность.

В будущем все улучшится, неверное. Но точка зрения, представляющая флеш, как основной источник «тормозов» в вебе, а HTML+JS в качестве спасителя Зорро на белом коне, чересчур оптимистична.

Форматы файлов Microsoft Office

Павел Малинников — Tue, 26 May 2009 22:01:28 +0000

Оказывается, уже почти год опубликованы форматы doc, xls, ppt.

А я только сегодня узнал об этом из статьи Joel’а Spolsky. В ней он рассказывает, почему они такие сложные и что по этому поводу можно придумать.

Прямо скажем, ничего хитрого он там не придумал — предлагает не заморачиваться с бинарником, а взять да и купить Windows 2003 сервер, поставить туда лицензионный офис и когда кто-то зааплоадит doc-файл на ваш вебсервис с намерением сделать из него pdf, запускать Word да и через COM-автоматизацию всё это в нём делать. Ну писать для Екселя файлы в CSV или в формате Lotus 1-2-3, а для Ворда — в rtf или в html.

Wiki-эффекты

Павел Малинников — Thu, 26 Feb 2009 21:31:51 +0000

Я как-то писал на тему, как сделать википедию из любой страницы сайта. Сайт ПриватБанка пользуется именно этой технологией довольно широко. Так вот, сегодня на главной странице логина (где вводится код подтверждения из смс) wiki-блок был доступен для публичного редактирования.

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

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

Wiki-пики

Павел Малинников — Mon, 02 Feb 2009 22:17:17 +0000

Как сделать википедию из любой страницы сайта: http://edwik.com/

Web 2.0-решение на тему совместной правки содержания страницы и управления версиями содержимого. Автор вставляет простенький блок скрипта, например:

1
2
3
4
5
6
7
8

<script type="text/javascript">

script>

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

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

Реальные проекты

Павел Малинников — Mon, 19 Jan 2009 00:44:31 +0000

Оцениваю трудоёмкость Flex-производства продуктов, которые делал на работе при помощи Аякс подходов.

На выходных сделал динамическую подгрузку данных во флексовое дерево.

Приблизительно такими могли бы быть системы качества (только для коллег), можно посмотреть, как это всё работает.

Остальным придётся подождать, когда выложу дерево с тестовыми, не рабочими данными.

Очаги цивилизации

Павел Малинников — Mon, 05 Jan 2009 22:00:04 +0000

Есть просто фантастический сервис http://maps.google.com, это все знают. Не все знают, что в его составе есть режим «Просмотр улиц», в котором можно видеть панорамное изображение улиц и перекрёстков, передвигаясь по ним при помощи трёхмерных указателей (тоже всё на флеше, кстати, сделано).

Понятно, что какие-то молодцы изъездили все улицы, все сфотографировали, сопоставили с географическими координатами, адресами и теперь — красота, все можно посмотреть.

Тут неизбежен такой вопрос. Его задавали все, кому я этот просмотр улиц показывал: «Почему улицы городов оцифрованы не везде?» У нас, в общем, почему ничего не видно, на улицах-то? А?

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

Защищено: Флеш — не только для игр

Павел Малинников — Sun, 04 Jan 2009 21:21:58 +0000

Идеи носятся в воздухе

Павел Малинников — Fri, 26 Dec 2008 21:56:56 +0000

Только что выражал свои восторги относительно Adobe Flex, как на тебе — студия Лебедева анонсирует «вершину сайтостроительства» (цитата) — Техснабэкспорт, полностью выполненный во флеше. Причём особых премудростей там не демонстрируется: всё просто (и наверняка дорого, как всегда), для Техснабэкспорта в самый раз, молодцы.

Видно, наступает такая тема: Flex.

P.S. Наступила.

Adobe Flex

Павел Малинников — Fri, 26 Dec 2008 11:53:45 +0000

Выходные прошли в знакомстве с технологией флеш. Такого восторга я не испытывал со времен, когда первый раз увидел изнутри OpenGL.

Это очень, товарищи! Жалею теперь, что откладывал это знакомство, думал, успеется. Надо было давно это заюзать. Перед вами будущее распределённых корпоративных приложений, а для всяких eBay, Nasdaq и прочих монстров — уже настоящее.

Так, впечатлений много — подробнее напишу позже. Вот какой этюдик для пробы набросал, посмотрев за ночь курс Flex in a week. Получение данных в XML, отображение в гриде, анимация при переходе от одного viewstate к другому.

Исходники:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   layout="absolute" fontSize="14" fontFamily="Arial" 

    borderColor="#000000" themeColor="#547FD6" color="#000000" backgroundGradientAlphas="[1.0, 1.0]" 

    backgroundGradientColors="[#FFFFFF, #FFFFFF]" width="100%" height="100%" initialize="init()" currentState="Base">

    <mx:states>

        <mx:State name="Base"/>

        <mx:State name="DocView">

            <mx:RemoveChild target="{panel}"/>

            <mx:SetProperty target="{panel}" name="y" value="60"/>

        mx:State>

    mx:states>    

    <mx:transitions>    

        <mx:Transition fromState="*" toState="DocView">

            <mx:Sequence>

                <mx:Parallel>

                    <mx:Dissolve target="{panel}" alphaFrom="1" alphaTo="0" targetArea="{tArea}"/>  

                    <mx:Move target="{panel}"/>

                mx:Parallel>

                <mx:RemoveChildAction target="{panel}" />

            mx:Sequence>

        mx:Transition>        

        <mx:Transition fromState="DocView" toState="*">

            <mx:Sequence>

                <mx:Parallel>

                    <mx:Dissolve target="{panel}" alphaFrom="0" alphaTo="1" targetArea="{tArea}"/>  

                    <mx:Move target="{panel}"/>

                mx:Parallel>

                <mx:RemoveChildAction target="{panel}" />

            mx:Sequence>

        mx:Transition>        

    mx:transitions>

    <mx:Script>

        [CDATA[

            import mx.collections.ArrayCollection;

            import mx.rpc.events.ResultEvent;

            import mx.graphics.*;

            [Bindable]

            private var docData:ArrayCollection;            

            [Bindable]

            public var tArea:RoundedRectangle;  

            private function resultHandler(event:ResultEvent): void

            {

                docData = event.result.packet.data.r;

            }

            private function init(): void

            {

                myDataSrc.send()

            }   

            private function toggleGrid(): void

            {

                tArea = new RoundedRectangle(-1,-1, panel.width+2, panel.height+10, 5);

                if (this.currentState != "DocView")

                {

                    this.currentState = "DocView";

                    toggleButton.label = "Показать таблицу";

                }

                else

                {

                    this.currentState="";

                    toggleButton.label = "Скрыть таблицу";

                }

            }       

        ]]>

    mx:Script>

    <mx:HTTPService id="myDataSrc" 

        url="utfdata.xml"

        result="resultHandler(event)"/>

    <mx:Panel id="panel"

            top="20" bottom="244" left="250" right="141"

            autoLayout="true"

            borderStyle="inset"

            title="Основные документы">

        <mx:DataGrid id="mainGrid" width="100%" height="100%"

            dataProvider="{docData}"

            change="toggleGrid()">

            <mx:columns>

                <mx:DataGridColumn

                    dataField="NUM_DOC"

                    headerText="№ документа"/>

                <mx:DataGridColumn

                    dataField="UPD_DATE"

                    headerText="Обновлено"/>

                <mx:DataGridColumn

                    dataField="FILE_NAME"

                    headerText="Имя файла"/>                    

            mx:columns>           

        mx:DataGrid>  

    mx:Panel>

    <mx:Button id="toggleButton"

        click="toggleGrid()"

        x="26" y="20" label="Скрыть таблицу"/>

mx:Application>