80 likes | 281 Views
Webpages at different level of details. What’s the idea?. To be used in combination the main UI presented last month. The idea is to grow from the snippet to the main full html page smoothly so that user can see more of the snippet from google in context. How it is done.
E N D
What’s the idea? • To be used in combination the main UI presented last month. • The idea is to grow from the snippet to the main full html page smoothly so that user can see more of the snippet from google in context.
How it is done. • Manipulating the dom-tree. • The assumption is that the more deeply nested dom elements are less likely to be important • Based on detail level 0-N, render the page differently, detail level0 containing the least amount of detail.
More details Suppose we have this xml tree. <div> <p>Nesting level1 <p>Nesting level2 <p>Nesting level3 </p> </p> </p> </div>
After processing <div class = “detail1 detail2 detail3 detail4”> <p class = “detail2 detail3 detail4”>Nesting level1 <p class = “detail3 detail4”>Nesting level2 <p class = “detail4”>Nesting level3 </p> </p> </p> </div>
Toggling the classes on and off • Once we have all the dom elements tagged thusly, we can easily decide which ones we want to show.
Heuristics and notes • For the tags {b,i,a,p}, if their text length exceeds a predefined amount. They will be displayed regardless of the detail. • Originally it was intended to have a fixed amount of detail level for example a total of 5 detail level. • Does not work well because content is not evenly distributed at all dom levels.