Google Julio Verne
Posteado el 09. Feb, 2011 por creativo in Google
Esto es lo que aprenderemos a realizar en este tutorial.
PASO 1
Creamos una carpeta nueva llamada Google dentro de la cual vamos a crear una carpeta llamada imágenes donde vamos a colocar las imágenes que vamos a utilizar en nuestro tutorial.
PASO 2
Abrimos Adobe Dreamweaver y Creamos un nuevo documento HTML en blanco.
PASO 3
Debajo de la etiqueta <title>Google - Julio Verne</title> vamos a copiar el siguiente código html4strict.
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<script>window.google={kEI:"2qVRTbqzH47cyQWNgf3yCA",kEXPI:"17259,28224,28324,28386,28471,28641",kCSI:{e:"17259,28224,28324,28386,28471,28641",ei:"2qVRTbqzH47cyQWNgf3yCA",expi:"17259,28224,28324,28386,28471,28641"},ml:function(){},pageState:"#",kHL:"es",time:function(){return(new Date).getTime()},log:function(c,d,
b){var a=new Image,e=google,g=e.lc,f=e.li;a.onerror=(a.onload=(a.onabort=function(){delete g[f]}));g[f]=a;b=b||"/gen_204?atyp=i&ct="+c+"&cad="+d+"&zx="+google.time();a.src=b;e.li=f+1},lc:[],li:0,j:{en:1,l:function(){google.fl=true},e:function(){google.fl=true},b:location.hash&&location.hash!="#",bv:5,pl:[],mc:0,sc:0.5,u:""},Toolbelt:{}};(function(){var c=google.j;window.onpopstate=function(){c.psc=1};for(var d=0,b;b=["ad","bc","p","pa","ac","pc","pah","ph","sa","slp","spf","xx","zc","zz"][d++];)(function(a){c[a]=function(){c.pl.push([a,arguments])}})(b)})();
if(!window.chrome)window.chrome={};window.chrome.sv=1.00;
window.google.sn="webhp";var i=window.google.timers={};window.google.startTick=function(a,b){i[a]={t:{start:(new Date).getTime()},bfr:!(!b)}};window.google.tick=function(a,b,c){if(!i[a])google.startTick(a);i[a].t[b]=c||(new Date).getTime()};google.startTick("load",true);try{window.google.pt=window.gtbExternal&&window.gtbExternal.pageT();
}catch(v){}
window.google.jsrt_kill=1;
</script>
<script>var _gjwl=location;function _gjuc(){var b=_gjwl.href.indexOf("#");if(b>=0){var a=_gjwl.href.substring(b+1);if(/(^|&)q=/.test(a)&&a.indexOf("#")==-1&&!/(^|&)cad=h($|&)/.test(a)){_gjwl.replace("/search?"+a.replace(/(^|&)fp=[^&]*/g,"")+"&cad=h");return 1}}return 0}function _gjp(){!(window._gjwl.hash&&window._gjuc())&&setTimeout(_gjp,500)};
google.y={};google.x=function(e,g){google.y[e.id]=[e,g];return false};if(!window.google)window.google={};window.google.crm={};window.google.cri=0;window.clk=function(e,f,g,k,l,b,m){if(document.images){var a=encodeURIComponent||escape,c=new Image,h=window.google.cri++;window.google.crm[h]=c;c.onerror=(c.onload=(c.onabort=function(){delete window.google.crm[h]}));if(b&&b.substring(0,6)!="&sig2=")b="&sig2="+b;c.src=["/url?sa=T","","&cd=",a(l),google.j&&google.j.pf?"&sqi=2":"","&ved=",a(m),e?"&url="+
a(e.replace(/#.*/,"")).replace(/\+/g,"%2B"):"","&ei=","2qVRTbqzH47cyQWNgf3yCA",b].join("")}return true};
window.gbar={qs:function(){},tg:function(e){var o={id:'gbar'};for(i in e)o[i]=e[i];google.x(o,function(){gbar.tg(o)})}};</script>
PASO 4
Ahora presionamos el comando Ctrl + S y Guardamos nuestro HTML dentro de la carpeta Google con el nombre google.html.
PASO 5
Vamos al menú File - Nwe y creamos un nuevo documento CSS
PASO 6
Dentro del documento copiamos el siguiente código CSS
body{margin:0;overflow-y:scroll}
#gog{padding:3px 8px 0}
.gac_m td{line-height:17px}
form{margin-bottom:20px}
body,td,a,p,.h{font-family:arial,sans-serif}
.h{color:#36c;font-size:20px}.q{color:#00c}
.ts td{padding:0}.ts{border-collapse:collapse}
em{font-weight:bold;font-style:normal}
.lst{height:25px;width:496px}
.ds{display:inline-block;display:-moz-inline-box}
span.ds{border-bottom:solid 1px #e7e7e7;border-right:solid 1px #e7e7e7;margin:3px 0 4px;margin-left:4px}
input{font-family:inherit}
a.gb1,a.gb2,a.gb3,a.gb4{color:#11c !important}
#gog{background:#fff}
#gbar,#guser{font-size:13px;padding-top:1px !important}
#gbar{float:left;height:22px}
#guser{padding-bottom:7px !important;text-align:right}
.gbh,.gbd{border-top:1px solid #c9d7f1;font-size:1px}
.gbh{height:0;position:absolute;top:24px;width:100%}
#gbs,.gbm{background:#fff;left:0;position:absolute;text-align:left;visibility:hidden;z-index:1000}
.gbm{border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;z-index:1001}
.gb1{margin-right:.5em}.gb1,.gb3{zoom:1}.gb2{display:block;padding:.2em .5em}
.gb2,.gb3{text-decoration:none;border-bottom:none}
a.gb1,a.gb2,a.gb3,a.gb4{color:#00c !important}
a.gb2:hover{background:#36c;color:#fff !important}
body{background:#fff;color:black}
input{-moz-box-sizing:content-box}a{color:#11c;text-decoration:none}
a:hover,a:active{text-decoration:underline}.fl a{color:#4272db}
a:visited{color:#551a8b}a.gb1,a.gb4{text-decoration:underline}
a.gb3:hover{text-decoration:none}
#ghead a.gb2:hover{color:#fff!important}
.sblc{padding-top:5px}
.sblc a{display:block;margin:2px 0;margin-left:13px;font-size:11px;}
.lsbb{background:#eee;border:solid 1px;border-color:#ccc #999 #999 #ccc;height:30px;display:block}
.ftl,#fll a{display:inline-block;margin:0 12px}
.lsb{background:url(/images/nav_logo29.png) bottom;border:none;color:#000;cursor:pointer;height:30px;margin:0;outline:0;font:15px arial,sans-serif;vertical-align:top}
.lsb:active{background:#ccc}
.lst:focus{outline:none}
#addlang a{padding:0 3px}
.gac_v div{display:none}
.gac_v .gac_v2,.gac_bt{display:block!important}
body,html{font-size:small}h1,ol,ul,li{margin:0;padding:0}
.nojsb{display:none}.nojsv{visibility:hidden}
#body,#footer{display:block}</style><style>
#po-bar{margin-bottom:4px;padding-top:1px;white-space:nowrap;z-index:98}
#po-bar a,#po-bar a:visited{color:#4273db}
#po-bar .flt{cursor:pointer;padding-bottom:0;text-decoration:none}
#po-status{float:left}
#po-box{background:#fff;border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;left:0;margin-top:.1em;position:absolute;z-index:101}
#po-box a{display:block;padding:.2em .31em;text-decoration:none}
#po-box a:hover{background:#558be3;color:#fff!important;text-decoration: none!important}
#po-sc-lm a{display:inline;white-space:nowrap;padding:0}
.po-lm{color:#aaa}
a.po-selected{color:#000!important;font-weight:bold}
a.po-unselected{color:#4273db!important}
.po-selected .mark{display:inline}
.po-unselected .mark{visibility:hidden}
.gbd{border-top:1px solid #c9d7f1;font-size:1px}
.gb2{padding:.2em .5em}
#ss-box{background:#fff;border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;left:0;margin-top:.1em;position:absolute;visibility:hidden;z-index:101}
#ss-box a{display:block;padding:.2em .31em;text-decoration:none}
#ss-box a:hover{background:#558be3;color:#fff!important}
a.ss-selected{color:#000!important;font-weight:bold}
a.ss-unselected{color:#4273db!important}
.ss-selected .mark{display:inline}
.ss-unselected .mark{visibility:hidden}
#ss-barframe{background:#fff;left:0;position:absolute;visibility:hidden;z-index:100}
#logo{color:#fff;display:block;height:56px;margin:7px 0 0 -3px;overflow:hidden;position:relative;width:160px}
#logo img{border:0;left:-0px;position:absolute;top:-145px}
input{-moz-box-sizing:content-box}
.lst-b,.lst{
height:0px;
padding:2px 0
}
.tia input{border-right:none;padding-right:0px}
.lst-b{border-right:none}
.lst{
-moz-box-sizing:content-box;
background:#fff;
float:left;
padding-left:6px;
padding-right:10px;
vertical-align:top;
width:0
}
.lst-td{background:#fff;border-bottom:1px solid #999}
.lst-td-xbtn{border-top:1px solid #ccc;padding-right:16px}
.ds{border-right:1px solid #e7e7e7;position:relative;height:32px;z-index:100}
.lsbb{background:#eee;border:1px solid #999;border-top-color:#ccc;border-left-color:#ccc;height:30px}
.lsb{font:15px arial,sans-serif;background-position:bottom;border:none;color:#000;cursor:pointer;height:30px;margin:0;vertical-align:top}
.lsb:active{background:#ccc}
.lst:focus{outline:none}
.lsd{font-size:11px;position:absolute;top:3px;left:16px}
.gl{white-space:nowrap}
.tsf-p,.ctr-p > center{padding-left:182px;padding-right:254px}
#tsf,.ctr-p{margin:0 auto;max-width:1181px;min-width:817px}
.fade #center_col,.fade #rhs,.fade #leftnav{filter:alpha(opacity=33.3);opacity:0.333}
#misspell{background:transparent;color:#fff;position:absolute;z-index:2}
.misspelled{background:url('/images/experiments/wavy-underline.png') 50% 100% repeat-x;color:#fff;display:inline-block;line-height:1.05em;padding:0 0 3px 0}
form{display:inline}
input[name="q"]{
background:transparent;
position:relative
}
#grey{background:#fff;border-color:transparent;color:silver;overflow:hidden;position:absolute;z-index:1}
#xbtn{color:#a1b9ed;cursor:pointer;display:none;font:28px Arial,sans-serif;height:20px;line-height:28px;margin:4px -8px 4px 0;padding:0;top:2px;width:14px;z-index:4}
#xbtn:hover,.flt,.flt u,a.fl{color:#4272db;text-decoration:none}
.flt:hover,.flt:hover u,a.fl:hover{text-decoration:underline}
.lst{border-width:0 0 0 1px}#sfopt a:hover{text-decoration:none}
#sfopt a.flt:hover{text-decoration:underline}
#pocs{background:#fff1a8;color:#000;font-size:10pt;margin:0;padding:6px 7px}
#pocs.sft{background:#fff;color:#777}
#pocs a{color:#11c}
#pocs.sft a{color:#4373db}
#pocs > div{margin:0;padding:0}
#knavm{color:#4273db;display:inline;font:11px arial,sans-serif!important;left:-13px;position:absolute;top:2px;z-index:2}
#pnprev
#knavm{bottom:1px;top:auto}
#pnnext #knavm{bottom:1px;left:40px;top:auto}
a.noline{outline:0}
.gac_od{background:white;margin:0;z-index:100;border-top:0;border-left:0;border-right:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;margin-top:1px;padding:0!important;position:relative}
.gac_id{background:white;margin:0;z-index:100;border-top:1px solid #a2bff0;border-left:1px solid #a2bff0;border-right:1px solid #558be3;border-bottom:1px solid #558be3;position:relative}
.gac_m{background:white;margin:0;z-index:100;border:0;cursor:default;width:100%;font-size:17px;line-height:117%;padding:0;position:relative}
.gac_q{width:1px;font-size:17px;visibility:hidden;white-space:nowrap}
.gac_su{position:absolute}
#gac_pp{color:#a1b9ed;text-decoration:none;cursor:pointer;font:22px Arial,sans-serif;height:20px;line-height:22px;margin:0 2px 0 0;padding:4px 0 0 0;top:4px;width:8px}
#gac_pp:hover{color:#4272db;text-decoration:none}
#gac_lm{color:#4272db;text-decoration:none}
#gac_lm:hover{color:#4272db;text-decoration:underline}
.gac_m td{line-height:22px}
.gac_n{padding-top:1px;padding-bottom:1px}
.gac_b td.gac_c{background:#d5e2ff}
.gac_b{background:#d5e2ff}
.gac_k{display:none}
.gac_b td.gac_k{display:block}
.gac_a td.gac_f{background:#fff8dd}
.gac_t{width:100%;text-align:left;font-size:17px}
.gac_za{position:absolute;bottom:0;right:0;text-align:right;font-size:12px;padding-right:5px}
.gac_bt{width:719px;text-align:center;padding:8px 0 7px;position:relative}
.gac_sb{font-size:15px;height:28px;margin:0.2em}
.gac_z{white-space:nowrap;color:#c00}
.gac_s{height:3px;font-size:1px}
.gac_c{white-space:nowrap;overflow:hidden;width:100%;text-align:left;padding-left:7px;padding-right:3px}
.gac_p{white-space:nowrap;padding:3px;line-height:112%;vertical-align:top}.gac_e{text-align:right;padding:0 3px 0 8px;white-space:nowrap}
.gac_d{font-size:13px}
.gac_h{color:green}
.gac_j{display:block}
.gac_l{line-height:18px}
.gac_x{display:block;line-height:16px}
.gac_i{color:#666}
.gac_w img{width:40px;height:40px}
.gac_w{width:1px}
.gac_r{color:red}
.gac_v{padding-bottom:5px}
PASO 7
Presionamos el comando Ctrl + S para guardar nuestro documento dentro de la carpeta css con el nombre estilo.css.
PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas <body></body> copiamos el siguiente código html4strict.
<textarea id="csi" style="display: none;">1</textarea>
<iframe name="wgjf" style="display: none;" src="" onload="google.j.l()" onerror="google.j.e()"></iframe><textarea id="wgjc" style="display: none;"></textarea>
<textarea id="wwcache" style="display: none;"></textarea><textarea id="csi" style="display: none;"></textarea><textarea id="hcache" style="display: none;">
</textarea>
<div id="searchform">
<form action="/search" id="tsf" method="GET" name="f" onSubmit="return q.value!=''" role="search" style="display: block; margin: 0pt auto; background: none repeat scroll 0% 0% transparent;">
<input name="sclient" value="psy" type="hidden"><span id="tophf"><input name="hl" value="es" type="hidden">
<input name="site" value="" type="hidden"><input name="source" value="hp" type="hidden"></span>
<div class="tsf-p" style="position: relative;">
<div style="padding-bottom: 2px; padding-right: 8px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%">
<tbody>
<div id="bsb">
</div>
</form>
<div id="lga" style="height: 171px; padding-top: 10px;"></div>
<style>
#hplogo{height:190px;margin-top:-5px;overflow:hidden;position:relative;width:714px;}
#hplogo, #hplogo *{-webkit-user-select:none;-moz-user-select:none;user-select:none;}
#hplogo.drag-active #verne-drag,#hplogo.drag-active #verne-drag *{cursor:move !important;cursor:none !important;}
#verne-chrome{height:190px;left:0;position:absolute;top:0;width:714px;z-index:400;}
#verne-chrome-img{width:714px;height:229px;}
#verne-layers{height:230px;left:0;top:-20px;overflow:hidden;position:absolute;width:714px;}
#verne-layers img{opacity:0;}
#verne-layer-0,#verne-layer-1,#verne-layer-2,#verne-layer-3{height:1388px;left:1px;position:absolute;top:1px;margin-top:20px;width:714px;}
#verne-layer-0{z-index:300;}
#verne-layer-1{z-index:200;}
#verne-layer-2{z-index:100;}
#verne-layer-3{z-index:50;background:white;}
#verne-lever{background:url(imagenes/verne-hp.png) no-repeat 0 -190px;height:39px;left:639px;position:absolute;top:49px;width:39px;z-index:500;transition:transform .1s linear, top .1s linear, left .1s linear;-moz-transition:-moz-transform .1s linear, top .1s linear, left .1s linear;-webkit-transition:-webkit-transform .1s linear, top .1s linear, left .1s linear;-o-transition:-o-transform .1s linear, top .1s linear, left .1s linear;}
#verne-drag{background:url(imagenes/verne-hp.png) no-repeat 1000px 1000px;cursor:pointer;height:150px;left:565px;position:absolute;top:15px;width:150px;z-index:700;}
#verne-dials-click{background:url(imagenes/verne-hp.png) no-repeat 1000px 1000px;height:190px;left:0;position:absolute;top:0px;width:100px;z-index:700;-webkit-tap-highlight-color:transparent;}
#verne-click{background:url(imagenes/verne-hp.png) no-repeat 1000px 1000px;cursor:pointer;height:190px;left:100px;position:absolute;top:0px;width:465px;z-index:700;}
#verne-dial-depth-big,#verne-dial-depth-small,#verne-dial-position{position:absolute;width:7px;transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transition:transform .2s linear;-moz-transition:-moz-transform .2s linear;-webkit-transition:-webkit-transform .2s linear;-o-transition:-webkit-transform .2s linear;}
#verne-dial-depth-big{background:url(imagenes/verne-hp.png) no-repeat -351px -199px;height:15px;left:48px;top:62px;z-index:600;transform-origin:3px 12px;-moz-transform-origin:3px 12px;-webkit-transform-origin:3px 12px;-o-transform-origin:3px 12px;}
#verne-dial-depth-small{background:url(imagenes/verne-hp.png) no-repeat -351px -215px;height:15px;left:48px;top:62px;z-index:620;transform-origin:3px 12px;-moz-transform-origin:3px 12px;-webkit-transform-origin:3px 12px;-o-transform-origin:3px 12px;}
#verne-dial-position{background:url(imagenes/verne-hp.png) no-repeat -351px -190px;height:8px;left:59px;top:110px;z-index:600;transform-origin:4px 8px;-moz-transform-origin:4px 8px;-webkit-transform-origin:4px 8px;-o-transform-origin:4px 8px;}
#verne-border{border:1px solid white;cursor:pointer;height:188px;left:0;position:absolute;top:0;width:712px;z-index:650;}</style><noscript><style>
#verne-chrome{background:url(imagenes/verne-hp.jpg) no-repeat;left:100px;}
#verne-lever,#verne-dial-depth-big,#verne-dial-depth-small,#verne-dial-position,#verne-dial-position{display:none;}
</style>
</noscript>
<div style="" id="hplogo" onselectstart="return false;">
<div id="verne-dials-click"></div><div id="verne-drag"></div><div style="-moz-transform: translate(0px, 13px); background-position: -312px -190px;" id="verne-lever"></div><div id="verne-chrome"><img src="imagenes/verne-hp.png" id="verne-chrome-img"></div>
<div style="-moz-transform: rotate(0deg);" id="verne-layers"><div style="-moz-transform: translate(-28px, -223.9px);" id="verne-layer-0"><img style="opacity: 1;" id="verne-layer0-img" src="imagenes/verne-hp-1.png"></div>
<div style="-moz-transform: translate(-28px, -209.262px);" id="verne-layer-1"><img style="opacity: 1;" id="verne-layer1-img" src="imagenes/verne-hp-2.png"></div><div style="-moz-transform: translate(-28px, -194.336px);" id="verne-layer-2"><img style="opacity: 1;" id="verne-layer2-img" src="imagenes/verne-hp-3.png"></div><div style="-moz-transform: translate(-28px, -166.45px); background: none repeat scroll 0% 0% rgb(185, 229, 231);" id="verne-layer-3"><img style="opacity: 1;" id="verne-layer3-img" src="imagenes/verne-hp-4.png"></div></div><div style="-moz-transform: rotate(895.6deg);" id="verne-dial-depth-big"></div><div style="-moz-transform: rotate(55.975deg);" id="verne-dial-depth-small"></div><div style="-moz-transform: rotate(3deg);" id="verne-dial-position"></div><div id="verne-border"></div></div>
<script>(function(){var d=true,g=false,h=window,i=google,j=document,k="push",l="getElementById",m="targetTouches",n="getTime",o="setTimeout",p="style";try{if(!i.doodle)i.doodle={};if(!i.doodle.a)i.doodle.a=[];var q=navigator.userAgent.indexOf("MSIE")!=-1,aa=["webkitTransform","MozTransform","OTransform","transform"],ba=["webkitTransition","MozTransition","OTransition","transition"],ca={37:3,38:1,39:4,40:2},da=["imagenes/verne-hp.png","imagenes/verne-hp-1.png","imagenes/verne-hp-2.png","logos/2011/verne-hp-3.png","imagenes/verne-hp-4.png"],ea=[1,0.8726,0.7427,0.5],fa=1E4/66,ga=1/3,ha=2/3,r=0,s=0,t=0,ia=0,u=93,v=0,w=0,x=119,A=0,B=0,E=g,ja,ka=g,la=0,ma=0,na=0,oa=0,pa=d,qa=0,F=g,G=0,H=0,ra=g,sa,I=g,J=g,ta=0,ua=g,va,K=0,L=0,M=10,N=0,O=0,wa=0,P="",xa="",ya=g,Q=g,za=g,R,Aa,S,Ba,Ca,Da,T,Ea,U=0.2,V=function(a,b,c){if(!i.doodle.d)i.doodle.d=[];i.doodle.d[k](arguments);a.addEventListener?a.addEventListener(b,c,g):a.attachEvent("on"+b,c)};eval("google.doodle.mod = function(a,n){return a"+"%%".charAt(0)+"n;}");var Fa=function(a){if(a)a.stopPropagation&&a.stopPropagation();else h.event.cancelBubble=d},Ga=function(a,b){!b()&&a< 200&&h[o](function(){Ga(a+1,b)},a)},Ha=function(a){a=a||h.event;return[(a.clientX||a[m]&&a[m][0].clientX||0)+(j.body.scrollLeft||j.documentElement.scrollLeft),(a.clientY||a[m]&&a[m][0].clientY||0)+(j.body.scrollTop||j.documentElement.scrollTop)]},Ja=function(a){(a=a||h.event)&&!a.toElement&&Ia(a)},Ma=function(a,b){I=d;W();var c=Ea=j[l]("verne-drag"),e=0;do e+=c.offsetLeft;while(c=c.offsetParent);na=e;c=Ea;e=0;do e+=c.offsetTop;while(c=c.offsetParent);oa=e;e=Ha(a);c=e[0]-na;e=e[1]-oa;if(c>=40&&c<= 114&&e>=25&&e<= 119){R.className="drag-active";E=d;ja=(new Date)[n]();if(c>=92&&c<= 112&&e>=37&&e<= 57){la=c-60-17;ma=e-45-27}else ma=la=0;Ka(a);La("m");b&&a.preventDefault()}},Ia=function(){U=(new Date)[n]()-ja>500?0.1:0.01;X(0);R.className="";E=g},Ka=function(a){Z();if(E&&pa){pa=g;h[o](function(){pa=d},25);W();var b=Ha(a);a=b[0]-na-la;b=b[1]-oa-ma;var c=0,e=0,f=0,y=0,z=0,Y=0,C=0,D=0;if(a< 60){c=3;e=1;f=-a}else if(a>94){c=4;e=1;f=a}else if(b< 45){z=y=1;Y=-b}else if(b>99){y=2;z=1;Y=b}else{a=(a-60-17)/34;b=(b-45-27)/54;if(b>-0.2&&b< 0.2)if(a< 0){c=3;e=-a*2}else{c=4;e=a*2}if(a>-0.2&&a< 0.2)if(b< 0){y=1;z=-b*2}else{y=2;z=b*2}}if(c!=0&&y!=0)if(Y>f){C=y;D=z}else if(Y< f){C=c;D=e}else if(Math.abs(z)>Math.abs(e)){C=y;D=z}else{C=c;D=e}else if(c!=0){C=c;D=e}else{C=y;D=z}X(C,D)}},Na=function(a){if(i.log){i.log("verne",a);ra=d}},La=function(a){if(!ra)if(H){h.clearTimeout(H);H=0;Na(a)}else H=h[o](Oa,250)},Oa=function(){H=0;if(ka)Na("k");else E&&Na("m")},Pa=function(a){Z();I=d;W();var b=ca[a.keyCode];if(b){X(b,1);La("k");ka=d}Fa(a)},Qa=function(a){Z();if(ca[a.keyCode]){U=0.2;X(0);ka=g}Fa(a)},Ra=function(){Z()},W=function(){M=10;L=K=0},Sa=function(a){var b=h.orientation;if(b!=wa){wa=b;W()}var c=a.accelerationIncludingGravity;if(c)switch(b){case 90:var e=-c.y,f=c.z;break;case -90:e=c.y;f=c.z;break;case 180:e=-c.x;f=c.z;break;default:e=c.x;f=c.z}b=a.gamma||a.x*57||e*2;a=a.beta||a.y*57||f*2;if(M){K+=b;L+=a;M--;if(M==0){K/=10;L/=10}}else{N=b-K;O=a-L;f=a=0;if(N>5){f=(N-5)/10;a=4}else if(N< -5){f=(-N-5)/10;a=3}if(Math.abs(O)>Math.abs(N))if(O>5){f=(O-5)/10;a=2}else if(O< -5){f=(-O-5)/10;a=1}if(f>1)f=1;if(f>0){Z();I=d;X(a,f)}}},Ta=function(){I=d;t+=3},X=function(a,b){if(b){if(b>1)b=1}else b=0;if(a==0)ia=0;else{r=a;ia=s=b}$()},$=function(){var a=r,b=s;if(a==0){a=3;b=0}var c=0,e=0,f=0;switch(a){case 3:if(b>0.5)f=117;else if(t>0){a=i.doodle.mod(t,1);if(a< 0.25||a>=0.5&&a< 0.75)f=39;else if(a>=0.25&&a< 0.5)f=78}c=-15*b;break;case 4:if(b>0.5)f=156;c=12*b;break;case 1:if(b>ha)f=195;else if(b>ga)f=234;e=-23*b;break;case 2:if(b>ha)f=273;else if(b>ga)f=312;e=26*b}if(Q)T[p][P]="translate("+c+"px, "+e+"px)";else{T[p].left=c+639+"px";T[p].top=e+49+"px"}T[p].backgroundPosition=-f+"px -190px"},Ua=function(){for(var a=-(u+-65),b=0;b< 4;b++){var c=-((x-109)*ea[b]+109);if(Q)S[b][p][P]=ya?"translate3d("+a+"px, "+c+"px, 0)":"translate("+a+"px, "+c+"px)";else{S[b][p].left=a+"px";S[b][p].top=c+"px"}}if(Q){Aa[p][P]="rotate("+-v*5+"deg)";Ba[p][P]="rotate("+x*4+"deg)";Ca[p][P]="rotate("+x*4/16+"deg)";Da[p][P]="rotate("+(u-90)+"deg)"}},Wa=function(){if(ua){J&&!I&&X(2,0.5);var a=r!=0,b=g,c=g;if(r==3)w=-2*s;else if(r==4)w=2*s;else{w=0;b=d}if(r==2)B=4*s;else if(r==1)B=-5*s;else{c=d;if(x<= 106)B=0.2;else if(x>=129){c=g;B=-0.2}else if(x>=112)B=-0.2}if(u< 0)u=0;else if(u>186)u=186;else if(u< 5&&w< 0||u>181&&w>0){w=0;a=g}if(x< 104)B=4;else if(x>1218)x=1218;else if(x>1218-40.5*A&&B>0){B=0;a=g}if(B>A){A+=a?0.2:0.05;if(A>B)A=B}else if(B< A){A-=a?0.2:0.05;if(A< B)A=B}if(w>v){v+=0.05;if(v>w)v=w}else if(w< v){v-=0.05;if(v< w)v=w}if(w==0&&v>=-0.05&&v<= 0.05)v=0;u+=v;x+=A;Ua();if(t>0){t-=0.1;$()}if(s>ia){s-=U;$()}if(s<= U){s=r=0;$()}if(b&&c){G++;G>fa&&Va()}else G=0}},Ya=function(){va=(new Date)[n]();if(j[l]("verne-chrome-img"))Xa();else{var a=j.createElement("img");V(a,"load",Xa);a.id="verne-chrome-img";a.src=da[0];j[l]("verne-chrome").appendChild(a)}},Xa=function(){S[3][p].background="#b9e5e7";for(var a=0;a< 4;a++){var b="verne-layer"+a+"-img";if(!j[l](b)){ta++;var c=j.createElement("img");V(c,"load",Za);c.src=da[a+1];c.id=b;S[a].appendChild(c)}}$a()},Za=function(){ta--;$a()},$a=function(){if(ta==0){for(var a=(new Date)[n]()-va>50,b=0;b< 4;b++){var c=j[l]("verne-layer"+b+"-img");if(!c)return;if(a&&za)c[p][xa]="opacity 1s ease-out";c[p].opacity=1}ua=d;h[o](ab,3E3);h[o](bb,6E3)}},cb=function(){for(var a=0,b;b=aa[a++];)if(typeof R[p][b]!="undefined"){Q=d;P=b;R[p][b]="translate3d(0, 0, 0)";ya=R[p][b]!="";break}for(a=0;b=ba[a++];)if(typeof R[p][b]!="undefined"){za=d;xa=b;break}},db=function(){if(za)for(var a=0;a< 4;a++)j[l]("verne-layer-"+a)[p][xa]="-webkit-transform .2s linear, top .2s linear"},Z=function(){if(!F){F=d;qa=h.setInterval(Wa,66);G=0}},Va=function(){if(F){F=g;h.clearInterval(qa)}},ab=function(){I||(t+=3)},bb=function(){if(!I){J=d;sa=h[o](eb,9E3)}},eb=function(){if(J&&!I){J=g;h.clearTimeout(sa);X(0)}},fb=function(){var a=j.forms.f||j.forms.gs||j.forms.tsf;if(a){V(a.q,"keydown",Pa);V(a.q,"keyup",Qa)}V(j,"keydown",Pa);V(j,"keyup",Qa);V(j,"mousedown",function(b){Ma(b,g)});V(j,"mousemove",Ka);V(j,"mouseup",Ia);q&&V(j.body,"mouseout",Ja);V(j,"touchstart",function(b){Ma(b,d)});V(j,"touchmove",Ka);V(j,"touchend",Ia);V(j,q?"focusin":"focus",Ra);V(h,"deviceorientation",Sa);V(h,"MozOrientation",Sa);V(h,"devicemotion",Sa);V(j[l]("verne-dials-click"),"click",Ta);for(i.doodle.c=g;a=i.doodle.a.shift();)a()},gb=function(){if(i.doodle.c)i.doodle.a[k](gb);else{for(var a;a=i.doodle.d.pop();){var b=a[0],c=a[1];a=a[2];b.removeEventListener?b.removeEventListener(c,a,g):b.detachEvent("on"+c,a)}Va();eb()}},hb=function(){if(i.dstr){if(!i.doodle.e){i.doodle.e=d;i.dstr[k](gb)}return d}return g},ib=function(){h[o](function(){Ga(100,hb)},0);if(!/#.*q=[^&]/.test(h.location.href))if(i.doodle.c)i.doodle.a[k](ib);else{i.doodle.c=d;R=j[l]("hplogo");Aa=j[l]("verne-layers");S=[j[l]("verne-layer-0"),j[l]("verne-layer-1"),j[l]("verne-layer-2"),j[l]("verne-layer-3")];Ba=j[l]("verne-dial-depth-big");Ca=j[l]("verne-dial-depth-small");Da=j[l]("verne-dial-position");T=j[l]("verne-lever");Ea=j[l]("verne-drag");Ya();h[o](fb,0);cb();X(0);Ua();h[o](db,0);h[o](Z,0);if(q)try{j.execCommand("BackgroundImageCache",g,d)}catch(a){}}};ib()}catch(jb){i.ml(jb,g,{cause:"DOODLE"})};})();</script>
<table border="0" cellpadding="0" cellspacing="0" width="0%"><tbody><tr><td id="lst-xbtn" class="lst-td lst-td-xbtn" style="border-top: 1px solid #ffffff" width="100%"><div style="position: relative;">
<div style="position: absolute; top: -900px; left: -9000px; max-width: 0px; overflow: hidden; width: auto;" class="lst"></div><input name="q" type="text" class="lst" title="Buscar" size="0" maxlength="1" autocomplete="off">
<span id="tsf-oq" style="display: none;"></span></div> </td><td class="lst-td lst-td-xbtn"><a href="#" id="xbtn" style="text-decoration: none; padding: 0pt 5px; display: none;" tabindex="-1" title="Borrar búsqueda">×</a></td></tr></tbody></table>
PASO 9
Ahora presionamos la tecla F12 y listo ya tenemos nuestro tutorial terminado.
Descarga el editable de Doogle Google Julio Verne
Leandra Kovacs
11. Feb, 2011
I gotta bookmark this site it seems handy handy
tuto
11. Feb, 2011
thanks a lot Leandra you r very welcome
Toya Gornick
12. Feb, 2011
Perfectly indited articles , thanks for entropy.
Daniel peres
12. Feb, 2011
Hola muy buena tu pagina. Puedes suministrarme el código para expandir y contraer, donde dice “Code Block” o como se hace? da_gp1234@yahoo.es Gracias
Cecille Santacroce
18. Mar, 2011
Excellent site. Lots of useful info here. I’m sending it to several friends ans also sharing in delicious. And certainly, thanks for your sweat!