aprenda como:"criar um blog para introdução jQuery e cookies "
Autor: edilene bds | Publicado: 2012-01-04T13:38:00-08:00



"Crear un intro para el blog con jQuery y cookies"





Cuando publiqué la entrada sobre&nbsp;crear un intro para el blog, una de las primeras inquietudes que se tenían era cómo hacer para que el Intro sólo se mostrara una vez pues podría resultar molesto regresar al inicio y ver siempre la pantalla de bienvenida.
En esta entrada vamos a ver&nbsp;cómo crear un intro para el blog con jQuery, el cual hará que cuando éste desaparezca tenga un efecto de desvanecimiento.Podrá elegirse si se muestra siempre o cada ciertos días, ya que usa cookies, y tiene un temporizador, el cual permite que si en determinado tiempo el lector no hizo click en el botón de Entrar entonces el Intro podrá quitarse automáticamente.
El script es una creación de&nbsp;Meerkat&nbsp;y la instalación no es nada complicada.Puedes ver un demo en&nbsp;este blog de pruebas, si no haces click en el botón entonces el Intro se quitará por sí solo en 15 segundos.
Para poner este Intro en tu blog, entra en la&nbsp;Edición HTML&nbsp;de la plantilla, y pega después de&lt;head&gt;&nbsp;el siguiente script:&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/&gt;
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
// Intro para el blog
eval(function(p,a,c,k,e,d){e=function(c){return(c&lt;a?'':e(parseInt(c/a)))+((c=c%a)&gt;35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('4.1Y.1k({8:5(1E){9 1r={v:\'g\',E:m,k:\'1n\',y:\'w%\',h:\'1u\',U:\'.U\',13:\'#1P-u\',1s:T,18:\'g\',R:m,P:\'Z\',x:\'Z\',K:\'1J\',Q:0,1a:\'.1a\',f:0,1I:5(){},l:m};9 3=4.1k(1r,1E);7(4.1U.1S){3.P=3.P;3.x=3.x}p{3.P=\'Z\';3.x=\'Z\'}7(3.R===m){3.R=3.18}3.f=3.f*1c;7(3.l!=m){3.l=3.l*1c}5 I(F,1D,1d){7(1d){9 12=1M 1N();12.1O(12.1Q()+(1d*24*1w*1w*1c));9 10="; 10="+12.1L()}p{9 10=""}q.1m=F+"="+1D+10+"; 1R=/"}5 1v(F){9 19=F+"=";9 1b=q.1m.1K(\';\');1X(9 i=0;i&lt;1b.S;i++){9 c=1b[i];1W(c.1V(0)===\' \')c=c.1q(1,c.S);7(c.1T(19)===0)t c.1q(19.S,c.S)}t m}5 1o(F){I(F,"",-1)}4(3.1a).D(5(){1o(\'8\')});t e.23(5(){9 16=4(e);7(1v(\'8\')!="X"){3.1I.2l(e);5 O(11,H){9 j=4(\'#8-d\');7(H==="B"){7(3.h==="1e"||3.h==="1f"){9 14=\'y\'}p{9 14=\'k\'}}p{9 14="E"}9 A={};A[14]=11;7(11==="u"){7(H!=="g"){7(3.f&gt;0){4(j).a().f(3.f).W(A,3.K,3.P)}p{4(j).a().W(A,3.K,3.P)}}p 7((H==="g")&amp;&amp;(3.f&gt;0)){4(j).a().f(3.f).u(0)}p{4(j).u()}4(16).u(0)}7(11==="a"){7(H!=="g"){7(3.l!==m){4(j).f(3.l).W(A,3.K,3.x,5(){4(e).o();7(3.1s===2k){I(\'8\',\'X\',3.Q)}})}4(3.U).D(5(){4(j).1t().W(A,3.K,3.x,5(){4(e).o()});t T});4(3.13).D(5(){4(j).1t().W(A,3.K,3.x,5(){4(e).o()});I(\'8\',\'X\',3.Q);t T})}p 7((H==="g")&amp;&amp;(3.l!==m)){4(j).f(3.l).a(0).N(5(){4(e).o()})}p{4(3.U).D(5(){4(j).a().N(5(){4(e).o()});t T});4(3.13).D(5(){4(j).a().N(5(){4(e).o()});I(\'8\',\'X\',3.Q);t T})}}}4(\'1y, n\').b({\'2h\':\'0\',\'k\':\'w%\'});4(16).d(\'&lt;s 15="8-d"&gt;&lt;s 15="8-r"&gt;&lt;/s&gt;&lt;/s&gt;\');4(\'#8-d\').b({\'h\':\'2i\',\'z-17\':\'2n\',\'y\':3.y,\'k\':3.k}).b(3.h,"0");4(\'#8-r\').b({\'v\':3.v,\'k\':3.k});7(3.h==="1e"||3.h==="1f"){4(\'#8-d\').b("1i",0)}7(3.E!=m){4("#8-d").2o(\'&lt;s 2s="E-1j"&gt;&lt;/s&gt;\');4(\'#8-r\').b({\'v\':\'2q\',\'z-17\':\'2\',\'h\':\'2t\'});4(".E-1j").b({\'h\':\'1g\',\'1i\':\'0\',\'k\':\'w%\',\'y\':\'w%\',\'v\':3.v,"E":3.E})}7(4.1l.2g&amp;&amp;4.1l.2f&lt;=6){4(\'#8-d\').b({\'h\':\'1g\',\'1u\':\'-26\',\'z-17\':\'0\'});7(4(\'#V-Y-r\').S==0){4(\'n\').22().20(5(17){t 4(e).1Z(\'15\')!=\'8-d\'}).21(\'&lt;s 15="V-Y-r"&gt;&lt;/s&gt;\');4(\'1y, n\').b({\'k\':\'w%\',\'y\':\'w%\',\'1z\':\'28\'});4(\'#V-Y-r\').b({\'1z\':\'1n\',\'y\':\'w%\',\'k\':\'w%\',\'h\':\'1g\'});9 C=q.n.G.2d+" ";C+=q.n.G.2e+" ";C+=q.n.G.2c+" ";C+=q.n.G.2b+" ";C+=q.n.G.29+" ";C+=q.n.G.2a;4("n").b({\'v\':\'g\'});4("#V-Y-r").b({\'v\':C})}9 1h=q.2r(\'V-Y-r\');7((1h.27&lt;1h.25)&amp;&amp;(3.h!=\'1e\')){4(\'#8-d\').b({\'1f\':\'2p\'})}}1H(3.18){M"B":O("u","B");J;M"L":O("u","L");J;M"g":O("u","g");J;1x:1B(\'1C 18 1p 1A 1G "B", "L", 1F "g"\')}1H(3.R){M"B":O("a","B");J;M"L":O("a","L");J;M"g":7(3.l!=m){4(\'#8-d\').f(3.l).a(0).N(5(){4(e).o()})}4(3.U).D(5(){4(\'#8-d\').a().N(5(){4(e).o()})});4(3.13).D(5(){4(\'#8-d\').a().N(5(){4(e).o()});I(\'8\',\'X\',3.Q)});J;1x:1B(\'1C R 1p 1A 1G "B", "L", 1F "g"\')}}p{4(16).a()}})},o:5(){4(\'#8-d\').2j(4(\'#8-r\').2m().a())}});',62,154,'|||settings|jQuery|function||if|meerkat|var|hide|css||wrap|this|delay|none|position||meerkatWrap|height|timer|null|body|destroyMeerkat|else|document|container|div|return|show|background|100|easingOut|width||animationProperty|slide|bgProperties|click|opacity|name|currentStyle|fadeOrSlide|createCookie|break|animationSpeed|fade|case|queue|animateMeerkat|easingIn|cookieExpires|animationOut|length|false|close|ie6|animate|dontshow|content|swing|expires|showOrHide|date|dontShowAgain|animationType|id|element|index|animationIn|nameEQ|removeCookie|ca|1000|days|left|right|absolute|ie6ContentContainer|top|layer|extend|browser|cookie|auto|eraseCookie|option|substring|defaults|dontShowAgainAuto|stop|bottom|readCookie|60|default|html|overflow|only|alert|The|value|options|or|accepts|switch|onMeerkatShow|normal|split|toGMTString|new|Date|setTime|dont|getTime|path|def|indexOf|easing|charAt|while|for|fn|attr|filter|wrapAll|children|each||scrollHeight|1px|clientHeight|hidden|backgroundPositionX|backgroundPositionY|backgroundAttachment|backgroundRepeat|backgroundColor|backgroundImage|version|msie|margin|fixed|replaceWith|true|call|contents|10000|prepend|17px|transparent|getElementById|class|relative'.split('|'),0,{})) //]]&gt;
&lt;/script&gt;

&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
jQuery.noConflict();
jQuery(function(){
jQuery('.meerkat').meerkat({
height: '100%',
width: '100%',
position: 'left',
dontShowAgain: '#enter',
close: '#close',
animationIn: 'none',
animationOut: 'fade',
animationSpeed: 500,
background: '#000 ',
timer: 15,
dontShowAgainAuto: false,
cookieExpires: 2,
removeCookie: '.reset'
});
});
//]]&gt;
&lt;/script&gt;
Luego antes de&nbsp;&lt;/body&gt;&nbsp;pega este código:
&lt;div class='meerkat'&gt;
&lt;div id='splash-content'&gt;
&lt;!-- Inicio del contenido que se mostrará en el intro --&gt;
&lt;img id='enter' src='URL de la imagen de bienvenida'/&gt;

&lt;!-- Fin del contenido que se mostrará en el intro --&gt;
&lt;/div&gt;
&lt;div id='close'&gt; Entrar &lt;/div&gt;
&lt;/div&gt;Este último código es el Intro en sí, ahí es donde podremos agregar una imagen de bienvenida, algún texto, etc. Todo lo que quieras que se vea en el intro deberá ir en el área marcada en color rojo.Si quieres que en lugar de un texto el botón de entrar sea una imagen sólo cambia ese texto (el de Entrar) por el código de una imagen:&lt;img src="URL de la imagen" /&gt;
Por último agrega antes de&nbsp;]]&gt;&lt;/b:skin&gt;&nbsp;estos estilos:
#enter{margin-top:150px;}&nbsp;/* Distancia de los elementos del Intro desde arriba */
#close{
cursor:pointer;
font-size:17px;&nbsp;/* Tamaño del texto ENTRAR */
color:#FFF;&nbsp;/* Color del texto ENTRAR */
}Esos son estilos muy básicos, pero pueden agregarse muchos más, ya dependerá de qué tipo de diseño quieras para tu pantalla de presentación.

En el primer código que hemos añadido veremos estos comandos:
background: '#000 ',
timer: 15,
dontShowAgainAuto: false,
cookieExpires: 2,background&nbsp;es el color de fondo del Intro, es decir, de toda la pantalla, y también puedes añadir una imagen de fondo, si así fuera quedaría así:
background: '#000 url(URL de la imagen)',

timer&nbsp;es el tiempo en segundos que durará el intro en caso de que el usuario no dé click para entrar.dontShowAgainAuto&nbsp;indica si el intro se mostrará siempre o no,&nbsp;false&nbsp;indica que siempre se mostrará, cámbialo a&nbsp;true&nbsp;si quieres sólo se muestre una vez cada cierto tiempo.cookieExpires&nbsp;indican los días que tardará el intro en volver a mostrarse en caso de que lo hayas cambiado por&nbsp;true.
Como puedes ver el script tiene muchas opciones y me parece que es mucho más completo y atractivo que el que habíamos visto primeramente.El intro se mostrará en cualquier página del blog, pero si quisieras que sólo se muestre en la portada entonces deberás encerrar el código que va antes de&nbsp;&lt;/body&gt;&nbsp;en una&nbsp;condicional&nbsp;para que sólo se muestre en la portada del blog.
Consideraciones finales:
El script ya está modificado para que sea compatible con Scriptaculous.
Si activas la opción de que no se vea en cierto tiempo entonces tampoco tú lo verás hasta que haya transcurrido el tiempo que configuraste. Para verlo antes de ese tiempo deberás borrar las cookies de tu navegador.
No se recomienda poner videos o música en el Intro, pues éstos se ejecutarían aun después de quitarse el Intro.
Si tuvieras en el blog un video o un archivo en flash&nbsp;deberás aplicarle una transparencia&nbsp;para que no se sobreponga en el Intro.
Recuerda que se verá en todas las páginas del blog, así que si quieres que sea visible sólo en la portada deberás encerrar el código en una condicional como se ha señalado.








fonte:
ciudadblogger



traduzido: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;



...'' o post sobre&nbsp;a criação de uma introdução para o blog&nbsp;,&nbsp;
uma das primeiras preocupações que tivemos foi como&nbsp;
fazer a Intro mostram apenas uma vez que poderia ser&nbsp;
chato voltar ao topo e sempre ver a tela de boas-vindas."





"Neste post vamos ver&nbsp;como criar uma introdução para o&nbsp;
blog jQuery&nbsp;, que vai fazer quando desaparece a ter um&nbsp;
efeito de fade."
Você sempre pode escolher se deseja exibir ou a cada poucos dias, uma vez que utiliza cookies, e tem um timer, que permite certo tempo, se o leitor clicar no botão Enter em seguida, o Enter pode ser removido automaticamente.
O roteiro é uma criação de&nbsp;Meerkat&nbsp;e instalação não é complicada.
Você pode ver uma demonstração&nbsp;de teste neste blog&nbsp;, se você clicar no botão, em seguida, a tecla Enter só será removida em 15 segundos.
Intro Para colocar isto em seu blog, vá até a&nbsp;edição HTML&nbsp;
do template, e cole após&nbsp;&lt;head&gt;&nbsp;o seguinte script:
'text / javascript "type = /&gt; src =' http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js '&lt;script
&lt;script type='text/javascript'&gt;
//&lt;![ CDATA [
Intro / / para
d [e]}]; e = function () {return '\ \ w +'}, c = 1} while (c -) {if (k [c]) {p = p.replace (new RegExp ( "\ \ b '+ e (c) +' \ \ b ',' g '), k [c])} return}} p ('4 0,1 Y.1k ({08:05 (1E) {9&nbsp;I (F, 1D, 1D) {7 (1d) {9 12 = 1M 1N (), 12.1O (12.1Q () + (1d * 24 * 1w * 1w * 1c)), 9 10 = "10 = "12,1 L ()} p {9 10 =" "} 1D +"="+ q.1m F = 10 +" 1R = / "} 5 1v (F) = F {19 set +"="; 9 q.1m.1K 1b = (\ ', \'), 1X (9 i = 0; i &lt;1b.S i + +) {9 c = 1 b [i]; 1W (c.1V (0) === \ '\') c = c.1q (1, CS), 7 (c.1T (19) === 0) t c.1q (19.S, cS)}} tm 01 de maio (F) {I (F ,"",- 1)} 4 (3.1a) D (5 () {1o (\ '8 \ t')}); E.23 (5 () {9 16 = 4 (e).; 7 (1v (\ '8 \')!=" X ") {3.1I.2l (e) 5 O (11, H) {9 j = 4 (\ '# 8-d \'), 7 ( === H "B") {7 (3.h === "1e" | | 3.h === "1f") {9 14 = \ 'e \'} p {9 14 = \ 'k \ '}} p {9 14 = "E"} 9&nbsp;T}), 4 (3,13). D (5 () {4 (j) 0,1 t (). W (A, 3 k, 3.x, 5 () {4 (e). O ()}) , I (\ '8 \ ', \' X \ ', 3.q), t T})} p 7 ((H === "g ")&amp;&amp;( 3.l! == m)) {4 (j). f (3, l). A (0). N (5 () {4 (e). ()})} ou p {4 (3.U). D (5 () {4 ( j). a (). N (5 () {4 (e). ()}); t ou T}), 4 (3,13). D (5 () {4 (j). um N (). (5 () {4 (e). ()}); ou I (\ '8 \ ', \' X \ ', 3.q), t T })}}} 4 (\ '1 y, n \ ') b (. {\ '2 h \', \ '0 \ ', \' k \ ': \' w% \ '}.); 4 (16) d (\' &lt;s 15 = "8-d "&gt; &lt;s&nbsp;4 (e) 0,1 Z (\ '15 \ ')! = \ '8-D \'}) 21 (\ '&lt;S 15="VYr"&gt; &lt;/ s&gt; \'), 4 (\ '1 e ,&nbsp;C = qnG2d + ""; C + = qnG2e + ""; C + = qnG2c + ""; C + = qnG2b + ""; C + = qnG29 + ""; C + = qnG2a, 4 ("n") B ({\ 'v \'.: \ 'g \'}), 4 ("# VYR") b ({\ 'v \':. C})} 9&nbsp;1p 18 1G 1A "B", "L", 1FR 1p 1G 1A "B", "L", 1F&nbsp;//]]&gt;
&lt;/ script&gt;&nbsp;&lt;script&nbsp;'100% ',&nbsp;width:% '100 ',&nbsp;posição: 'left',&nbsp;dontShowAgain: '# Enter'fechar '# close',&nbsp;animationIn: 'none',&nbsp;animationOut: 'desaparecer',&nbsp;animationSpeed: 500background: '# 000',&nbsp;timer: 15,&nbsp;dontShowAgainAuto: false,&nbsp;cookieExpires: 2,removeCookie:. 'reset'&nbsp;});&nbsp;})&nbsp;//]]&gt;&nbsp;&lt;/ script&gt;























Então, antes de&nbsp;&lt;/ body&gt;&nbsp;cole este código:
&lt;div class='meerkat'&gt;
&lt;div id='splash-content'&gt;&nbsp;&lt;! - Início do conteúdo a ser exibido na intro -&gt;&nbsp;&lt;img id = 'enter' src = '&nbsp;URL da imagem de boas-vindas&nbsp;"/&gt;&nbsp;&lt;! ​​- Fim do conteúdo a ser exibido na intro -&gt;&nbsp;&lt;/ div&gt;&nbsp;&lt;div id='close'&gt; Log &lt;/ div&gt;&nbsp;&lt;/ div&gt;





O último é o código Intro em si, que é onde podemos adicionar uma imagem de boas-vindas, algum texto, e assim por diante.&nbsp;Tudo o que você quer ser visto na introdução deve ir na área marcada em vermelho.Se você quer que ao invés de um botão de entrada de texto é uma imagem só muda o texto (o Log) pelo código de uma imagem:&lt;Img src = "&nbsp;URL da imagem&nbsp;"/&gt;
Finalmente adicionado antes&nbsp;]]&gt;&lt;/ b: skin&gt;&nbsp;desses estilos:
# Enter {margin-top: 150px;}&nbsp;/ * Distância elementos Intro de cima * /
# fecha {
cursor: pointer;
font-size: 17px;&nbsp;/ * ENTER * Tamanho do texto /
color: # FFF;&nbsp;/ * Digite a cor do texto * /
}Estes são estilos muito básica, mas podem ser adicionados muitos mais, e vai depender de que tipo de desenho que você quer para o seu ecrã.&nbsp;No primeiro código que adicionamos vai ver estes comandos:

background: '# 000',
timer: 15,
dontShowAgainAuto: false,
cookieExpires: 2,de fundo&nbsp;é a cor de fundo do Retorno, ou seja, a tela inteira, e você também pode adicionar uma imagem de fundo, se o fez ficar assim:&nbsp;

background: '# 000 url (&nbsp;URL da imagem&nbsp;) ",

temporizador&nbsp;é o tempo em segundos que vai durar a introdução deve dar ao usuário não clique para entrar.dontShowAgainAuto&nbsp;indica se a introdução sempre será exibido ou não,&nbsp;falso&nbsp;diz que sempre será exibido, alterá-lo para&nbsp;verdade&nbsp;se você quiser exibir uma única vez em quando.cookieExpires&nbsp;indicar os dias que leva para a introdução de voltar a aparecer, se você mudou paraverdadeiro&nbsp;.
Como você pode ver o script tem muitas opções e eu acho que é muito mais completo e atraente do que tínhamos visto antes.A introdução será exibido em qualquer página do blog, mas se você deseja exibir somente na capa, então você deve colocar o código que vem antes de&nbsp;&lt;/ body&gt;&nbsp;em uma&nbsp;condicional&nbsp;para ser exibido apenas na capa do blog.Considerações finais:
O script já está modificado para ser compatível com Scriptaculous.
Se você ativar a opção de não olhar para um determinado período de tempo, então você vai vê-lo ou até após o tempo definido.&nbsp;Para vê-lo antes, então você deve apagar os cookies do seu navegador.
Não é recomendado colocar vídeos ou música na intro, como esses seria aplicado mesmo após a remoção da Intro.
Se você estivesse em um blog de ​​vídeo ou um arquivo flash&nbsp;necessidade de aplicar uma transparência&nbsp;a ela não mais na Intro.
Lembre-se de ser visto em todas as páginas do blog, então se você quer ser visível apenas na capa deve incluir o código em uma condicional como observado.









fonte:
ciudadblogger