Bing in the Classroom - Publisher Deployment Guide...

Bing in the classroom

Publisher Deployment Guide – v 3.0

November 2013Microsoft Confidential. © 2013 Microsoft Corporation. All rights reserved. These materials are confidential to and maintained as a trade secret by Microsoft Corporation. Information in these materials is restricted to Microsoft authorized recipients only. Any use, distribution or public discussion of, and any feedback to, these materials is subject to the terms of the attached license. By providing any feedback on these materials to Microsoft, you agree to the terms of that license.


ContentsIntroduction...................................................................................................................................................................... 3Design #1 –........................................................................................................................................................................4Design #2.........................................................................................................................................................................10Design #3.........................................................................................................................................................................15Code/ Assets...................................................................................................................................................................23

Microsoft Confidential


Introduction

This Document explains on how to consume different flavors of Bing Search Box in any Existing Web Application.


Design #1 –

SCREENSHOT –

The Following <div> tag should be Embedded on where the Search Box is shown in your Website:

<div class="sw_sform sbox_nubrand" id="sbox"> <div class="hp_sw_logo hpcLogoWhite"> Bing </div> <div class="search_controls"> <form class="sw_box" id="sb_form" onsubmit="return si_T('&ID=FD,6.1');" action="/search"> <div class="sw_bd"> <div class="sw_b"> <input name="q" title="Enter your search term" class="sw_qbox" id="sb_form_q" type="search" maxlength="1000" autocomplete="off" value="" /><span class="sw_dvdr"></span>

<input name="go" tabindex="0" title="Search" class="sw_qbtn sw_sb" id="sb_form_go" type="submit" value="" onclick="SubmitFrm()"/><span style="font-family: Arial,Sans-Serif; font-size: 16px; display: none;"></span><input tabindex="-1" class="sw_qbox sa_ghostbox" id="sa_ghostbox" type="search" autocomplete="off" /> <div tabindex="-1" class="sa_ghostbg" style="height: 35px;"> </div> </div> </div> </form> </div></div>

The Following Styles must be added either to your Style sheet or top of your web page:

<head><style>.hp_sw_logo{

text-indent: -20em;margin-top: 0px;margin-right: 12px;margin-bottom: 0px;margin-left: 0px;float: left;

}.sw_sform{

left: 8%;top: 20%;


width: 800px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;position: absolute;z-index: 5;

}.sw_b .sw_qbtn{

width: 27px;height: 27px;overflow: hidden;font-size: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: -14px;margin-left: 0px;cursor: pointer;

}.sb_form_align{

left: 132px;top: 2.7em;position: absolute;

}.beta{

left: 0px;top: 40px;color: #fff;position: absolute;

}.sw_bd{

font-size: medium;float: left;position: relative;z-index: 1;

}.sw_b{

padding-top: 0.19em;padding-right: 3px;padding-bottom: 1.06em;padding-left: 0px;border-top-color: #e5e5e5;border-right-color: #e5e5e5;border-bottom-color: #e5e5e5;border-left-color: #e5e5e5;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;float: left;background-image: none;background-attachment: scroll;background-repeat: repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;



background-clip: border-box;background-color: rgb(255, 255, 255);

}.sw_b input{

width: 375px;height: 1.25em;line-height: 1.25em;padding-top: 0.25em;padding-right: 5px;padding-bottom: 0.31em;padding-left: 9px;font-size: 100%;margin-top: 0px;margin-right: 0px;margin-bottom: -1em;margin-left: 0px;border-top-color: currentColor;border-right-color: currentColor;border-bottom-color: currentColor;border-left-color: currentColor;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;float: left;outline-width: medium;outline-style: none;outline-color: invert;

}#sw_as{

clear: both;font-size: small;display: none;position: relative;

}.hpcBkP, .hpcLogoWhite, .hpcNext, .hpcCopyInfo, .hpcPlay, .hpcPause, .hpcPrevious, .hpcFull, .hpcSmall, .sw_qbtn, .hpcExpand, .hpcClose, .hpcDown, .pref, .img_uparrow, .img_rwds_sml, .img_downarrow, .hpcCaroNavRight, .hpcCaroNavLeft{

overflow: hidden;background-image: url("http://www.bing.com/s/a/hpc8.png");background-attachment: scroll;background-repeat: no-repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: transparent;

}.hpcLogoWhite{

width: 125px;height: 45px;background-position-x: -1px;background-position-y: -1px;

}.sbox_nubrand#sbox .hpcLogoWhite{

width: 132px;height: 52px;



background-image: url("http://www.bing.com/s/a/hpc12.png");background-attachment: scroll;background-repeat: no-repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: transparent;

}.sbox_nubrand#sbox .hp_sw_logo{

margin-top: -7px;margin-right: 21px;margin-bottom: 0px;margin-left: 0px;

}.sbox_nubrand#sbox .beta{

left: 54px;top: 45px;width: 55px;height: 18px;overflow: hidden;

}.sbox_nubrand#sbox .beta a{

color: #bbb !important;font-family: "Segoe UI","Segoe","Tahoma","Verdana","Arial","sans-serif";font-size: 12px;

}.sbox_nubrand#sbox .sb_form_align{

left: 150px;}.sw_qbtn{


}.sa_as{

left: 0px;top: -1px;border-top-color: #ccc;border-right-color: #ccc;border-bottom-color: #ccc;border-left-color: #ccc;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;display: none;position: absolute;background-image: none;background-attachment: scroll;background-repeat: repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;



background-origin: padding-box;background-clip: border-box;background-color: rgb(255, 255, 255);

}.sa_as ul{

list-style-type: none;list-style-position: outside;list-style-image: none;

}.sa_drw{

padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;background-image: none;background-attachment: scroll;background-repeat: repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: rgb(255, 255, 255);

}.sa_om{

height: 1.6em;line-height: 1.6em;padding-top: 0.16em;padding-right: 0px;padding-bottom: 0.2em;padding-left: 0px;font-size: 90%;border-top-color: #ccc;border-top-width: 1px;border-top-style: solid;background-image: none;background-attachment: scroll;background-repeat: repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: rgb(245, 245, 245);

}.sa_om a{

color: #36b;}.sa_om li{

margin-left: 1.3em;float: left;

}.sa_om ul{

padding-top: 0px;padding-right: 0px;padding-bottom: 0px;



padding-left: 0px;margin-top: 0px;margin-right: 0.5em;margin-bottom: 0px;margin-left: 0.5em;float: right;

}.sa_ghostbox{

left: 1px;top: 4px;position: absolute;z-index: -1;

}.sa_ghostbg{

left: 0px;top: 0px;width: 100%;position: absolute;z-index: -2;background-image: none;background-attachment: scroll;background-repeat: repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: rgb(255, 255, 255);

}#hp_container .sw_sform{

z-index: 8;}

</style></head>

The Following JavaScript Function needs to be placed at the appropriate location in your web page:

<script type="text/javascript"> function SubmitFrm(){

var Searchtxt = document.getElementById("sb_form_q").value; window.location.href = "http://www.bing.com/search?q=" + escape(Searchtxt) + "&pc=U216&form=U216HP";

return false; }</script>

An Example HTML Page is placed at the end for your reference.


Design #2

SCREENSHOT –




<div class="websearch2">



<form class="skipOOB" id="srchfrm" action="/search"><div class="search cf">

<span class="bo"><span class="bi"><label class="hide" for="q">

Search:</label><input name="q" class="text imghint" id="flavour2_q" accesskey="S" style="color:

rgb(51,51,51);position: relative; background-color: rgb(255, 255, 255);" type="search" size="69"maxlength="250" autocomplete="off" />

<input tabindex="-1" class="text imghint sa_ghostbox" id="flavour2_sa_ghostbox" style="left: 224px;

top: 66px; z-index: -1;" type="search" autocomplete="off" /><input title="Search" class="image" style="width: 181px; height: 28px;" type="image"

alt="Search" src=".\BING_websearch.jpg"value="Search" id="flavour2_go" onclick="SubmitFrm()"/>

<input name="form" type="hidden" value="MSNH14" /><span style="font-family: arial,sans-serif; font-size: 15px; display: none;"></span><div tabindex="-1" class="sa_ghostbg" style="height: 35px;">

</div>

</span></span></div></form>

</div>


<head> <style>

a.more, div.br *, .cotb *, .coss * { font-family: arial,sans-serif; } input, select, textarea { line-height: normal; font-size: 15px; } .cf::after, ul.cf li::after, .ro::after


{ height: 0px; clear: both; display: block; visibility: hidden; content: "."; } .headerbar_us .websearch2 .opt, .headerbar_us .websearch2 span { color: #666; } #head .headerbar_us { margin-top: 0px; } html { display: block !important; } body.expht { background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent; } .expht #head .ro .ce { position: relative; z-index: 51; } .headerbar_us { height: auto; min-height: 118px; } div.headerbar_us a, div.headerbar_us a:link, div.headerbar_us a:visited, div.headerbar_us a:hover, div.headerbar_us a:active, div.headerbar_us label, div.headerbar_us span, div.headerbar_us a:hover span, div.headerbar_us .br2 .welcome { color: #666; } .headerbar_us div.br1, .headerbar_us div.br5, .headerbar_us div.br6 { float: left; } .headerbar_us .br6 { height: 7.58em; } #head .headerbar_us .hsb { padding-left: 0.17em; } .co6b1 .br { float: left; } .ro { clear: left; } .ro .ce {



width: 5.83em; margin-right: 0.5em; margin-left: 0.5em; float: left; min-width: 70px; } .websearch2 h2, .websearch2 label.hide { display: none; } .websearch2 form { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .websearch2 input.image { text-align: right; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; border-top-color: currentColor; border-right-color: currentColor; border-bottom-color: currentColor; border-left-color: currentColor; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: left; display: block; cursor: pointer; } .websearch2 input.text, .websearch2 select.dd { width: 429px; text-align: left; color: #333; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 7px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-color: currentColor; border-right-color: currentColor; border-bottom-color: currentColor; border-left-color: currentColor; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none;



border-left-style: none; float: left; display: block; outline-width: medium; outline-style: none; outline-color: invert; } .websearch2 a, .websearch2 a:link, .websearch2 a:visited, .websearch2 a:hover, .websearch2 a:active, .websearch2 label, .websearch2 span, .websearch2 a:hover span { color: #fff; } .websearch2 span.bi { padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 5px; border-top-color: #2e6ba5; border-right-color: #2e6ba5; border-bottom-color: #2e6ba5; border-left-color: #2e6ba5; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; float: left; display: block; background-color: rgb(255, 255, 255); } .websearch2 span.bo { clear: both; border-top-color: #c7d9e9; border-right-color: #c7d9e9; border-bottom-color: #c7d9e9; border-left-color: #c7d9e9; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; float: left; display: block; } .sa_ghostbox { left: 1px; top: 4px; position: absolute; z-index: -1; } .sa_ghostbg { left: 0px; top: 0px; width: 100%; position: absolute; z-index: -2; background-image: none; background-attachment: scroll;



background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: rgb(255, 255, 255); } </style></head>

The Following Javascript Function needs to be placed at the appropriate location in your web page :


var Searchtxt = document.getElementById("flavour2_q").value; window.location.href = "http://www.bing.com/search?q=" + escape(Searchtxt) + "&pc=U216&form=U216HP";

return false; } </script>



Design #3

SCREENSHOT –




<div class="sw_sform" id="sbox"><div class="search_controls"> <form class="sw_box" id="sb_form" action="/search"> <div class="sw_bd"> <div class="sw_b"> <input name="q" title="Enter your search term" class="hint" id="sb_form_q" type="search" maxlength="1000" autocomplete="off" value="Search in Bing"

onfocus="if (this.className=='hint') { this.className = 'sw_qbox'; this.value = '';}" onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search in Bing';}"

/> <span class="sw_dvdr"></span> <input name="go" tabindex="0" title="Search" class="sw_qbtn sw_sb" id="sb_form_go" type="submit" value=""

onclick="SubmitFrm()"/> <span style="font-family: Arial,Sans-Serif; font-size: 16px; display: none;"></span><input tabindex="-1" class="sw_qbox

sa_ghostbox" id="sa_ghostbox" type="search" autocomplete="off" /> <div tabindex="-1" class="sa_ghostbg" style="height: 35px;"> </div> </div> </div> </form> </div></div>


<head> <script type="text/javascript"> function SubmitFrm(){

var Searchtxt = document.getElementById("sb_form_q").value;var clsName = document.getElementById("sb_form_q").className;if(clsName != "sw_qbox"){Searchtxt = "";}


height: 100%;margin-top: auto;margin-right: auto;margin-bottom: auto;margin-left: auto;position: relative;min-height: 562px;max-height: 768px;min-width: 1000px;max-width: 1366px;

}table, td{

padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;border-top-color: currentColor;border-right-color: currentColor;border-bottom-color: currentColor;border-left-color: currentColor;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-spacing: 0;

}.hp_sw_logo{

text-indent: -20em;margin-top: 0px;margin-right: 12px;margin-bottom: 0px;margin-left: 0px;float: left;

}.sw_sform{

left: 8%;top: 20%;width: 800px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;position: absolute;z-index: 5;

}.sw_b .sw_qbtn{

width: 27px;height: 27px;overflow: hidden;font-size: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: -14px;margin-left: 0px;cursor: pointer;

}.sb_form_align{

left: 132px;top: 2.7em;



position: absolute;}.beta{

left: 0px;top: 40px;color: #fff;position: absolute;

}.sw_bd{

font-size: medium;float: left;position: relative;z-index: 1;

}.sw_b{

padding-top: 0.19em;padding-right: 3px;padding-bottom: 1.06em;padding-left: 0px;border-top-color: #e5e5e5;border-right-color: #e5e5e5;border-bottom-color: #e5e5e5;border-left-color: #e5e5e5;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;float: left;background-image: none;background-attachment: scroll;background-repeat: repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: rgb(255, 255, 255);

}.sw_b input{

width: 375px;height: 1.25em;line-height: 1.25em;padding-top: 0.25em;padding-right: 5px;padding-bottom: 0.31em;padding-left: 9px;font-size: 100%;margin-top: 0px;margin-right: 0px;margin-bottom: -1em;margin-left: 0px;border-top-color: currentColor;border-right-color: currentColor;border-bottom-color: currentColor;border-left-color: currentColor;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;border-top-style: none;



border-right-style: none;border-bottom-style: none;border-left-style: none;float: left;outline-width: medium;outline-style: none;outline-color: invert;

}#sw_as{

clear: both;font-size: small;display: none;position: relative;

}.hpcBkP, .hpcLogoWhite, .hpcNext, .hpcCopyInfo, .hpcPlay, .hpcPause, .hpcPrevious, .hpcFull, .hpcSmall, .sw_qbtn, .hpcExpand, .hpcClose, .hpcDown, .pref, .img_uparrow, .img_rwds_sml, .img_downarrow, .hpcCaroNavRight, .hpcCaroNavLeft{

overflow: hidden;background-image: url("http://www.bing.com/s/a/hpc8.png");background-attachment: scroll;background-repeat: no-repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: transparent;

}.hpcLogoWhite{


}.sw_qbtn{


}.sa_as{

left: 0px;top: -1px;border-top-color: #ccc;border-right-color: #ccc;border-bottom-color: #ccc;border-left-color: #ccc;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;display: none;position: absolute;background-image: none;background-attachment: scroll;background-repeat: repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;



background-clip: border-box;background-color: rgb(255, 255, 255);

}.sa_as ul{

list-style-type: none;list-style-position: outside;list-style-image: none;

}.sa_drw{

padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;background-image: none;background-attachment: scroll;background-repeat: repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: rgb(255, 255, 255);

}.sa_om{

height: 1.6em;line-height: 1.6em;padding-top: 0.16em;padding-right: 0px;padding-bottom: 0.2em;padding-left: 0px;font-size: 90%;border-top-color: #ccc;border-top-width: 1px;border-top-style: solid;background-image: none;background-attachment: scroll;background-repeat: repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: rgb(245, 245, 245);

}.sa_om a{

color: #36b;}.sa_om li{

margin-left: 1.3em;float: left;

}.sa_om ul{

padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;margin-top: 0px;margin-right: 0.5em;



margin-bottom: 0px;margin-left: 0.5em;float: right;

}.sa_ghostbox{

left: 1px;top: 4px;position: absolute;z-index: -1;

}.sa_ghostbg{

left: 0px;top: 0px;width: 100%;position: absolute;z-index: -2;background-image: none;background-attachment: scroll;background-repeat: repeat;background-position-x: 0%;background-position-y: 0%;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: rgb(255, 255, 255);

}#hp_container .sw_sform{

z-index: 8;}.hint{

font-style: italic;color: grey;font-size: 90%;

}</style></head>

The Following Javascript Function needs to be placed at the appropriate location in your web page :


var Searchtxt = document.getElementById("sb_form_q").value;var clsName = document.getElementById("sb_form_q").className;if(clsName != "sw_qbox"){Searchtxt = "";}window.location.href = "http://www.bing.com/search?q=" + escape(Searchtxt) +

"&pc=U216&form=U216HP";return false;

}

function hideLoading(){

var Searchtxt = document.getElementById("sb_form_q").value;var clsName = document.getElementById("sb_form_q").className;



if(Searchtxt != "Search in Bing" ){

document.getElementById("sb_form_q").className = "sw_qbox";}

}</script>

The <Body> tag needs to include this below code inside its property tag :

<body onload="javascript:hideLoading();">




Code/ Assets


Bing in the Classroom - Publisher Deployment Guide...

Documents

Transcript of Bing in the Classroom - Publisher Deployment Guide...