You are on page 1of 40

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=javascript&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
(go.daum.net)

Server

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

Finish

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