MiniDaum

An aesthetic within 20px, now and there

1
MiniDaum?

2
MiniDaum?

3
MiniDaum

• Ubiquitous in Daum
• Gateway to other services
• Toolbar for Login/Logout etc.
4
’08 Renewal

5
Agenda

• Consideration
• Implementation
• Feedback
• Adoption

6
Jailbreak

7
Types
• Script type

• Frame type

• Outsource type

8
Consideration

• Usability
• Performance
• Variety of Environment
• Maintenance
• Previous Bugs

9
Consideration
• Usability
✓ Too many code exposed
- <div id="DAUMCOMMON_MINI">
<div id="DAUMCOMMON_MINIDAUM">
<!-- miniDaumArea-->
</div>
</div>

- <div id="miniDaumTemp" style="display:none">

<script language="javascript" type="text/javascript" src="http://
go.daum.net/bin/minidaum2006.cgi?category=miznet&amp;tag=java-
script&amp;Search=N"></script>
</div>

10
Consideration
• Usability
✓ Too many code exposed (cont.)
- <script type="text/javascript">
if (typeof(document.getElementById("DAUMCOMMON
_MINIDAUM")) == "object")
document.getElementById("DAUMCOMMON_MINIDAUM")
.innerHTML =
document.getElementById("miniDaumTemp").innerHTML;
</script>

- #DAUMCOMMON_MINI { background-color:#f3f3f3; height:20px; }

#DAUMCOMMON_MINIDAUM { width:947px; margin-left:32px; }
#MINIwrap ul { padding-top:1px;}

11
Consideration
• Performance
✓ Run independently
✓ Rendering bottle-neck
- document.write(‘<div id="miniDaumTemps" style="display:none">’);
if (miniDaum_varLogInStatus == "logon") {
document.write('<li class="x">Logout</li>');
}
document.write('</div>’);

12
Consideration
• Namespace
✓ Probability of naming crash
- var DNSHOP_URL = “...”;

- function setDaumHome() {...}

- function showToolBar() {...}

✓ Object Encapsulation
✓ Common UI prefix convention

13
Consideration
• Previous Bugs
✓ Flash referrer
✓ Unnecessary HTTP Request

14
Ready?

15
Go.

16
Implementation
• Structure
Server
(go.daum.net)

Client
(service pages) Finish
minidaum.cgi minidaum.js minidaum.css

miniDaum_varNickName='redleaf';
miniDaum_varLogInStatus='logon';
document.write('<script type="text/javascript" src="http://go.daum.net/js/minidaum2008.js”></script>’);
document.write('<link type="text/css" ... href="http://go.daum.net/css/minidaum2008.css" ... />’);

17
Implementation
• Markup
✓ Semantic
- <ul id="DaumUI__list">
<li><a href="#" title="...">Daum</a></li>
<li><a href="#" title="...">메일</a></li>
<li><a href="#" title="...">카페</a></li>
<li><a href="#" title="...">블로그</a></li>
<li><a href="#" title="...">뉴스</a></li>
</ul>

18
Implementation
• Markup
✓ Less code
- <div id="DaumUI__list">
<a href="#" title="...">Daum</a>
<a href="#" title="...">메일</a>
<a href="#" title="...">카페</a>
<a href="#" title="...">블로그</a>
<a href="#" title="...">뉴스</a>
</div>

19
Implementation
• Rendering
✓ Write HTML just once
✓ String concatenation
- this.generateSource = function() {
html.push('<fieldset id="DaumUI__wrap" class="DaumUI__base">');
html.push('<div id="DaumUI__main">');
this.userStatusHtml();
this.mainServiceListHtml();
this.moreServiceListHtml();
html.push('</div></fieldset>');
}

- document.getElementById("DaumUI__minidaum").innerHTML = html.join(‘’);

20
Implementation
• Rendering
✓ Late rendering
✓ Add to current onload handlers
- window.onload.add(__MiniDaumObj.generate);

21
Implementation
• Previous bugs
✓ Flash referrer bug
- this.opts.loginUrl = this.func.verifyUrl(this.opts.loginUrl);

- verifyUrl: function(url) {
if (/\w+.swf/.test(url)) return window.location.href;
else return url;
}

✓ Unnecessary HTTP Request

- append HTML source to DOM just once

22
Implementation
• Sample
✓ HTML
- <div id="DaumUI__minidaum">
<script type="text/javascript" src="http://go.daum.net/bin/
minidaum.cgi" charset="euc-kr"></script>
</div>

✓ CSS
- #DaumUI__minidaum {width: 978px; height: 20px; margin: 0 auto;}

23
Test

24
Feedback
• Rendering
✓ Dependent on page contents loading
✓ Separate <script> from <div>
✓ Direct rendering

25
Feedback
• Rendering
✓ Changed sample
- <div id="DaumUI__minidaum"></div>

- <script type="text/javascript" src="http://go.daum.net/bin/

minidaum.cgi" charset="euc-kr"></script>

- try {
var __MiniDaumObj = new __MiniDaum2008(__MiniDaumOpts);
__MiniDaumObj.generate();
} catch (e) { }

26
Feedback
• Compatibility
✓ Array.push() not supported in IE 5.0
✓ Case 1
- Array.prototype.push = function() {...}

- s.push(“...”)

✓ Case 2
- s[s.length] = “...”

✓ Total source length: Case 1 > Case 2

27
Feedback
• Compatibility
✓ CSS insertion
✓ When append to <head>
- el = document.createElement(“link”);
...
document.getElementsByTagName(“head”)[0].appendChild(el);

✓ Write directly in document body

- this.addStyleSheets = function() {
document.write('<link type="text/css" rel="stylesheet" ... />');
}

28
Feedback
• Compatibility
✓ Broken “More” layout
✓ Different DOCTYPE
✓ Wrong box-model in quirks mode (IE)
✓ Separate “width” from “padding”
- #DaumUI__more {width: 220px;}
#DaumUI__more div {padding: 7px 0px 6px 6px;}

29
Feedback
• Compatibility
✓ <select> and z-index in IE
- http://support.microsoft.com/kb/177378

✓ Using iframe shield

- <div id="DaumUI__more" class="DaumUI__close">
<div><a href="#">미즈넷</a><a href="#">영화</a>...</div>
</div><iframe id="nilFrame" ... width="0" height="0" ... ></iframe>

- #DaumUI__more iframe {position: absolute; z-index: -1;}

30
Feedback
• Compatibility
✓ Independent on protocol (HTTPS)
✓ Using mod_proxy on server
- ... background: url("/minidaum-img/common/minidaum.gif") ...

31
Feedback
• Performance
✓ Image request - 6 times
✓ Use CSS sprite
- background: url("http://icon.daum-img.net/minidaum/common/
minidaum.gif") no-repeat 0 -48px;

✓ Image server cache - 1 month

32
Feedback
• Log analysis
✓ Analyze on user actions, interests
✓ About 10% of whole codes
✓ Example
- http://www.daum.net/?nil_profile=minidaum&nil_src=mail

- function getService() {...} etc.

33
Adoption

34
Adoption
• Communicate directly
• Simple but detail guideline
• Manage just one source
• Provide sample to partners
• Tracking the regacy

35
Mission Complete.
Feb. 1, 2008

36
Conclusion

37
Conclusion
• Analysis for many cases
• Successful results on design, performance,
maintenance
• Analyze on user interests
• Increase user satisfaction for Daum

38
Q &A

39
Thanks ;-)

40