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.

Bing in the classroomPage 2

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>

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:

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 –

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()"/>

</div>

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

</div>

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 = "";}

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>

<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><style>html{

overflow: auto;}a, body{

font-family: Arial,Sans-Serif;font-size: small;text-decoration: none;

}html, body, #hp_table, #hp_cellCenter{

width: 100%;height: 100%;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;margin-top: 0px;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;border-collapse: collapse;background-color: rgb(21, 81, 21);

}#hp_cellCenter{

overflow: hidden;vertical-align: middle;

}#hp_container{

width: 100%;

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 :

Code/ Assets

Bing in the Classroom - Publisher Deployment Guide...

Documents

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

Bex Leseprobe

Excel Bex Pharma

Sid & Bex Wedding

The BIC Picturebiconsortium.eu/sites/biconsortium.eu/files/The-BIC-picture_Q1-2017.pdfthe bic picture newsletter for bic members – march 2016 table of contents bic latest news 3

BEx Monitor

Bex Analizer

Date Prepared: August, 2014 Name: Peter Bex Postdoctoral ... › cos › wp-content › uploads › 2014 › 08 › Peter-Bex-CV.pdfName: Peter Bex Office Address: Department of Psychology,

Bikeexchange Ltd (BEX)

BEx Broacasting

BEx 7.0 Configuration

BEX Switches

BEX GROUP EXECUTIVE SEARCH

Advanced Training BEx

Bing In The Classroom - April 2015.docxhostme.blob.core.windows.net/images/bex/bic/docs/Bing in... · Web viewSystem requirements All computers and users that need defaults to be

Bex Mobile En

BEx Analyzer Instructions

BEX Relays

Bex Workshop

BEX Precal checks

BEX Analyser.pptx