Dynamic web-components and web environment behavior analysis
Download
Report
Transcript Dynamic web-components and web environment behavior analysis
Dynamic web-components and web
environment behavior analysis
St. Petersburg State University
Math and Mechanics faculty
Software Engineering Dept.
Suvorov V
Web-content
Server -Side
PHP
ASP
Flash Media
CMS, Frameworks
CSS
MySQL
XML
AJAX
Client-side
HTML
JavaScript
Containers
What is common for users
Use browser for the web. A webpage should
look the same in all browsers. That means that
even if code looks different the output is the same.
Click mouse, use controls, type text, follow the
links. That means user friendly interface
Have some goal in surfing That means we can try to
construct a mathematical model and estimates
Interact with other users in the provided
enviroment. And there are some rules, strategies and
restrictions
We have some problems in component
analysis
www.ya.ru (user friendly)
HTML source (user unfriendly)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><meta http-equiv=Content-Type content="text/html;charset=windows1251"><title>Яндекс</title><link rel="shortcut icon"href="http://img.yandex.net/i/favicon.ico"><base target=_top><style type="text/css">*{fontsize:100.01%;margin:0}body{font:0.8em Arial,sans-serif;background:#fff url(http://www.tnscounter.ru/V13a****yandex_ru/ru/CP1251/tmsec=yandex_ya/0)}body,a{color:#999}a:hover,div a,div i{color:#000}div a{color:#000;textdecoration:none}div a span,div a i{text-decoration:underline;font-style:normal}a:hover{color:#f00 !important}table{width:100%;height:100%}table
table{width:60%;max-width:1000px;min-width:300px;margin:auto}table table td{padding:0.25em}#text{width:100%}#text *{width:100%}div{padding:2em
0 2em 20px;width:400px}p{padding:5em 2.2em 13px}body,ul,li{padding:0;list-style:none}span{white-space:nowrap}#head{float:left;width:100%}#head
li{font:85% Verdana,sans-serif;padding:5px 10px 7px 0}#head a{color:#000}#head .s{float:left;padding-left:10px}#head .s
a{float:left;color:#ee7b00}#head .s i{position:absolute;width:16px;height:16px;margin-left:-19px;background:url(http://img.yandex.net/i/switch-yaru.png)
no-repeat}#mail{float:right}#head .user,#head .user *{text-decoration:underline}#head .user *{color:#f00}#head .exit{color:#E03A3A}</style><!--[if
IE]><style>table
table{width:expression(document.body.clientWidth>1600?'1000px':document.body.clientWidth<500?'300px':'60%')}div{width:250px}#head .s
i{cursor:hand}</style><![endif]--><style type="text/css" media=handheld>body{padding:0.5em}tr,td{display:block}table,table
table,td,div,p{padding:0;height:auto;width:100%;min-width:0;text-align:center}#text *{width:180px}input{margin:0.5em 0}</style><script
type="text/javascript">
var ieHomeCheck={URL:"http://ya.ru/",linkId:"sethome",clids:[41124],_checkClids:function(){var B=1;document.body.style.behavior="url(#default#homepage)";if(document.body.isHomePage("http://ya.ru/")||document.body.isHomePage(this.URL)){retur
n 0}for(var A=0;A<this.clids.length;A++){if(document.body.isHomePage(this.URL+"?clid="+this.clids[A])){return this.clids[A]}}return
B},_hide:function(){document.getElementById(this.linkId).style.display="none"},_cH:function(D,C){var A=function(E,G,F){return
location.protocol+"//clck.yandex.ru/"+F+"/dtype="+E+"/pid=132/cid=2039/path="+G+"/rnd="+((new
Date()).getTime()+Math.round(Math.random()*100))+"/*"+C};var
B=document.createElement("script");B.src=A("stred",D,"jclck");document.documentElement.getElementsByTagName("head")[0].appendChild(B)},action
:function(){this.URL=location.protocol+"//"+location.hostname+"/";var
A=this._checkClids();if(A>0){this._hide();this._cH("nextdistrib.homepage."+A,this.URL)}else{if(A==0){this._hide();this._cH("nextdistrib.homepage",this.U
RL)}}}};function c(a,p,c){new Image().src=location.protocol+'//clck.yandex.ru/click/dtype=stred/pid='+p+'/cid='+c+'/rnd='+((new
Date()).getTime()+Math.round(Math.random()*100))+'/*'+(a.href?a.href:"")}function
setHome(a,url){try{a.style.behavior='url(#default#homepage)';a.setHomePage(url);return false}catch(e){}}</script><table cellspacing=0
cellpadding=0><tr><td valign=top colspan=2 height=1><ul id=head><li class=s><a id="sethome"
href="http://help.yandex.ru/common/?id=928787"onclick="c(this,17,1755);return
setHome(this,'http://ya.ru/?clid='+(location.href.match(/clid=(\d+)/)?location.href.match(/clid=(\d+)/)[1]:'41124'))">Сделать стартовой</a><li id=mail><a
href="http://mail.yandex.ru"onclick="c(this,17,1080)">Войти в почту</a></ul><!--[if IE]><script
type="text/javascript">ieHomeCheck.action();</script><![endif]--><tr><td align=center colspan=2><form action="http://yandex.ru/yandsearch"
onsubmit='var
clid=location.href.match(/clid=(\d+)/);location.href=this.action+"?rpt=rad&text="+encodeURIComponent(this.text.value)+(clid?"&"+clid[0]:"");return
false'><table><tr><td><a href="http://www.yandex.ru"onclick="c(this,17,1081)"><img src="http://ya.ru/logo.png"width=100 height=44 border=0
alt="Яндекс"></a><td id=text><input name=text size=50 maxlength=300><td><input name=rpt type=hidden value=rad><input type=submit
onclick="c(this,17,1082)"value="Найти"></tr></table></form><tr valign=bottom><td width="50%"height=1><p align=right><span>© 1997—2009</span>
«<a href="http://www.yandex.ru"onclick="c(this,17,1083)">Яндекс</a>»<td width="50%"><p>Дизайн — <a
href="http://www.artlebedev.ru"onclick="c(this,17,1084)">Студия Артемия Лебедева</a></table><script
type="text/javascript">if(self.parent.frames.length!=0)self.parent.location=document.location;else{var
t=document.forms[0].text;try{t.type='search'}catch(e){};t.focus()}document.body.appendChild(s=document.createElement('script'));setTimeout('s.src="htt
p://clck.yandex.ru/redir/dtype=stred/pid=17/cid=1729/*http://export.yandex.ru/morda/mail.xml?host=yandex.ru"',9)</script>
Dealing with complexity
Separate
static and
dynamic
content
Dynamic
Filter
banners,
counters
and trash
Useful
Determine
active and
passive
components
LINKS
ANALYSE BEHAVIOUR
And use usual
methods (traffic
and text
analysis)
Dealing with complexity
3 types of dynamics
Text (Most of components are of that type – can filter
numbers)
Style (Life strip, progress bar. Get style parameters i.e
length, width, thickness)
Picture (Enumerate pictures and operate with
numbered set and finite states)
Recognition tools such as Finereader DLLs
are useful
Behavior. We play games
Consider activity as a game
Buildings (they give us resources and reflect our
state)
Resources (we spend and gain them)
Rules (dependency functions)
External influence ( other players actions)
Goals
Have nearly all useful properties of the component
accessible and automate our actions also in a nice way –
just specify rules of the game
A game as a general model for a site
Decision block
Compute the gain and
max it G(R)
A
The Game
Resources
R(t+1)=F(R(t),B,E)
Visible external
influence
E(R,R’)
R, E
A-user actions
B-buildings
R-resources
T-time
G-gain
R’-other players’ resources
E-external influence
Analyze Behavior
Component parameters=Resources (use
simpliest possible parameter)
Measurable states=Buildings (in games buildings
are buildings)
Perform actions in a natural way – as a user
does. Keyboard and mouse control. Determine
components and regions by clicking, typing and
analyzing results(traffic).
Monte-Carlo method – try everything and see
what happens
Analyze Behavior
Do nothing for some time and see what
changes. Compute gain and make decision: if
nothing changes or gain decreases –do some
action, if gain increases do nothing for some
time.
Do some action. Compute gain. Wait. Compute
change in time and make decision: if nothing
changes or gain decreases –do some action, if
gain increases do nothing for some time.
Main features
Separate static and dynamic content
Use only natural user environment – that means
HTTP protocol
Have some feedback mechanism
In dynamic content distinguish resources and
action controls
Provide some mathematical models for
modeling function F
Determine parameters of the model in a test
series.
Useful implementations
Online games (Travian – browser strategy)
Learnt simple building strategies. Used maximized
resources function.
Online broadcasts (Smotri.com, Kroxa.net)
Separated dynamic content – created a summary
website with interesting broadcasts only (determined by
peers and section)
PHP CURL MYSQL C# WinAPI