Seguidores

Pesquisar

Mostrando postagens com marcador blogger. Mostrar todas as postagens
Mostrando postagens com marcador blogger. Mostrar todas as postagens

..."coisas que você deve saber quando usar jQuery em seu blog"

,



6 cosas que tienes que saber cuando usas jQuery en tu blog


jQuery
Tal vez  lo uses en tu blog, ya sea por que lo agregaste al seguir un tutorial, o por que ya lo tenías en la plantilla que descargaste de algún sitio, pero, al escuchar hablar de este por primera vez, pensaste: -¿qué es jQuery?, ¿para qué sirve?-, entonces, primero empecemos por entender de manera sencilla que es jQuery.

jQuery es una librería de JavaScript maravillosa que permite la creación de animaciones, efectos, entre otras cosas muy cool, que pueden hacer que tu página o blog, sea más interactiva y dinámica, incluso divertida.

No es necesario ser todo un experto en JavaScript para usarlo, de hecho, parte de la misión de jQuery es "escribir menos y hacer más", en otras palabras jQuery está pensado en hacer más simple usar JavaScript, ya que es posible ahorrarse mucho trabajo, para conseguir efectos y animaciones espectaculares.

Pensando en que es muy común su uso,  hoy veremos algunas cosas que deberías tener en cuenta a la hora de usarlo:


1. Asegurate de usar la versión más actualizada de jQuery. Así como los navegadores se actualizan, jQuery lo hace con el fin de solucionar algunos bugs (errores) buscando siempre maximizar su rendimiento, a menos que el creador de algún efecto o animación que lo use indique lo contrario, y que definitivamente deberían ser razones de peso.

2. Solo necesitas agregar jQuery una sola vez en tu blog, independientemente de que uses distintos efectos o animaciones, usando esta librería. Puede ser que siguiendo varios tutoriales, lo hayas agregado 2 más veces, eso puede hacer más lento tu blog, y causar otros problemas.


3. Utiliza la versión de jQuery especificando la versión exacta, no la que facilita el sistema de versiones de Google con el fin de recibir automáticamente la versión más actualizada, por ejemplo:

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

...en estos momentos (a la fecha de hoy) se obtendría esto:

http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

Esto contribuye a un corto periodo de almacenamiento en la  caché, eso quiere decir, que la copia del archivo se va a guarda por muy corto tiempo en la memoria caché, entonces si alguien regresa a nuestro sitio, se tiene que volver a cargar jQuery.

Paul Irish quien forma parte del equipo de jQuery, hizo una investigación sobre el tiempo que dura guardado en la caché al usarlo de ese modo.

4. Asegurate de que lo hayas agregado en la seccion del <head>, es decir en algún lugar antes de </head>, eso es lo que recomiendan los desarrolles de esta librería


5. Verifica que uses el nivel de compresión de producción, es decir las versiones minimizada o comprimida "minified", que es la siguiente (desde la librería CDN de Google)...
http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
...ya que el enlace anterior, no es lo mismo que esto:


http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js


Esa es la versión recomendada por jQuery  ya que junto con la de paquete, son las mejores versiones para el despliegue de producción, es decir, para usarlas para crear cualquier efecto o animación en la web. Abre los archivos y echa un vistazo a ellos, copiando los enlaces en la barra de navegación de tu navegador y verás la diferencia, la primera es más compacta (minified), por lo tanto es más ligera.


6. Verifica que uses el protocolo (HTTP), no HTTPS como lo usan las páginas que cuentan con la certificación llamada SSL, como por ejemplo PayPal, Twitter, Facebook (estos últimos permiten ambas).


Entonces sería:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
No:

https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

Esto supone problemas para ser guardados en la caché. Por otro lado, también en la referencia anterior, puedes leer sobre la recomendación que hacen de usar una URL relativa, es decir, sin ningún protocolo (HTTP o HTTPS) al usar jQuery desde la libreria CDN de Google.

¿Sabes alguna recomendación que pueda ayudar a tener un mejor rendimiento de jQuery en nuestro sitio?, no dudes en compartirlo ;).

Conclusiones
Es posible usar esta maravillosa librería sin preocuparnos mucho por el peso de nuestro blog, si seguimos ciertas pautas al usarlo, y contribuir a un mejor almacenamiento en la caché, y beneficiarnos todos.


fonte e créditos:
compartidisimo.



traduzido:                                                    





..."6  (seis)coisas que você deve saber quando usar jQuery em seu blog"

jQuery
Talvez você usá-lo em seu blog, seja adicionando-o a seguir um tutorial, ou você já tinha no modelo que você baixou a partir de  qualquer  local, mas, ao ouvir sobre isso pela primeira vez, o pensamento, - o que ? é jQuery, o que é isso? -, entonces , vamos começar a entender como simples é  jQuery. 
jQuery  é uma biblioteca JavaScript maravilhosa  permite a criação de animações, efeitos, entre outras coisas legais que podem fazer para seu site ou blog mais interativo e dinâmico, mesmo divertido

Não é necessário ser um expert em JavaScript para uso, de fato, parte da missão da jQuery é "escrever menos e fazer mais" jQuery é em outras palavras pensamento para torná-lo mais simples de usar JavaScript, como você pode economizar muito trabalho para alcançar efeitos espetaculares e animações. 
Pensar é muito comum em uso hoje vai ver algumas coisas que você deve ter em mente ao usá-lo:

 1 . Certifique-se de utilizar a última versão do jQuery. 
Como navegadores são atualizados, jQuery faz para corrigir alguns bugs (erros) estão sempre à procura de maximizar seu desempenho, a menos que o criador de um efeito ou animação que você usá-lo de outra forma, e, definitivamente, deve ser motivo peso.

 2 . Você só precisa adicionar jQuery  uma vez em seu blog ,
 se eles usam diferentes efeitos e animações, utilizando esta 

biblioteca.  

Pode ser que após vários tutoriais, eu adicionei 
mais 2 vezes, pode atrasar o seu blog, e causar outros 
problemas .










3 . Use a versão jQuery, especificando a versão exata, não que facilita  as atualizações do sistema para o Google  para receber automaticamente a versão mais recente, por exemplo:

http://ajax.googleapis.com/ajax/libs/jquery/ / jquery.min.js



... No momento (até à data) vai  ficar  assim:

http://ajax.googleapis.com/ajax/libs/jquery/ 1.6.4 / jquery.min.js



Isso faz com que por um curto período de armazenamento no   cache,  o que significa que a cópia será mantida por um tempo curto na cache, então se alguém vem para o nosso site, você tem que recarregar jQuery.

Paul irlandês que faz parte da equipe jQuery fez uma  pesquisa  sobre a duração armazenados no cache de usá-lo dessa maneira 

4 . Certifique-se de que você adicionou na seção de <head>, ou seja, em algum lugar antes 

</ head>, que é o que recomendam o desenvolvimento desta biblioteca .  


5 . Verifique se você usar o nível de compressão de produção são minimizados ou comprimido versões " minified " , que é a seguinte  (a partir do Google CDN biblioteca) ...
http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery. min . js
... Desde o link acima não é o mesmo que isto: 


http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js 


Essa é a  versão  recomendada pelo jQuery  desde juntamente com o pacote são as melhores versões para a implantação de produção, ou seja, para usá-los para criar  qualquer efeito ou animação na web.  Abra os arquivos e vê-los, copiando os links na barra de navegação do seu navegador e veja a diferença, a primeira é mais compacto (minified), pois é mais leve. 


6 . Verifique se você usar o protocolo (HTTP), não use HTTPS como as páginas que têm a  certificação chamado SSL , como o PayPal, Twitter, Facebook (estes últimos  permitem ambos). 



Seria então:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
"Não: https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js Isto envolve  problemas a serem armazenados em cache . Por outro lado, também na referência acima, você pode ler sobre a recomendação de fazer para utilizar uma URL relativa, ou seja, sem qualquer protocolo (HTTP ou HTTPS) usando a biblioteca jQuery do CDN do Google. Sabe quaisquer recomendações que possam ? ajudar a obter um melhor retorno jQuery em nosso site, por favor partilhe-lo;)."

Conclusões Você pode usar essa biblioteca maravilhosa sem se preocupar muito sobre o peso do nosso blog, se algumas orientações para uso, e contribuir para um melhor armazenamento no cache, e todos os benefícios.




http://estaaquii.blogspot.com

Top 10 Membros - Amigo Google Gadget Conecte

,
fonte e créditos deste presente post:
blog.xmlgadgets


Excelente dica,  que , pesquisando encontrei:



Top 10 Members – Google Friend Connect gadget





Add ‘Top 10 Members’ to Blogger Recent Visitors |Members Count
Update on Top 10 Members gadget
This Top Ten Members gadget for Blogger, displays the top 10 Google friend connect members of your site, according to the number of times they visit your site.
The gadget code is available here.
How to add this gadget to a Blogger powered blog/site?
Click here to Add “Top 10 Members” gadget to your blogger blog.
Otherwise,

1. Goto the Layout page of your blog.
2. Click “Add gadget”
3. Click “Add your own”
4. Give the gadget url as http://xmlgadgets.com/ig/top10.xml and save.

How to add this gadget for non-Blogger sites?
1. Login to Google Friend connect, and select the site you want to add the gadget to.
2. Click on “Social Gadgets”
3. Click “All Gadgets” tab.
4. Locate “Top 10 Members” gadget, and click, “Get this gadget”

5. Click “Generate Code” under “Create the HTML code”
6. Copy the code, add it to your site, Start using “Top 10 Members” gadget !!!
I had taken Eiji’s Footprint gadget as a base, and modified it for my requirement.
Please provide your valuable feedback/suggestion by commenting, which will be useful for improving the gadget.
See the Gadget in action: BSE Stock watch
Also Read
GFC Members gadget that directly links to Member’s sites
Recent readers gadget for Google Friend Connect / Blogger sites
Recent readers gadget by Gene
Friend connect – Member details and Site Community gadget




traduzido:                                                     


Top 10 Membros 

- Amigo Google Gadget Conecte





Adicione 'Top 10 dos membros para Blogger |Visitantes Recentes Contagem membros
Atualização sobre dispositivo Top 10 Membros


Este gadget Dez membros superiores para Blogger, exibe o top 10 do Google Friend Connect membros do seu site, de acordo com o número de vezes que eles visitam seu site.
O código gadget é disponível aqui .:


<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Top 10 Members" scrolling="true" description="Lists top 10 members of your site, accoring to the number of times a member visits your site" author="Karthik" author_email="manikarthik84@gmail.com" directory_title="Top 10 Members" thumbnail="http://xmlgadgets.com/ig/img/top10.png"
screenshot="http://xmlgadgets.com/ig/img/top10_.png"
>
  
<Require feature="opensocial-0.8" />
  
<Require feature="views" />
  
<Require feature="dynamic-height" />
  
<Require feature="friendconnect" />
  
<Require feature="minimessage" />
  
<Optional feature="skins" />
 
</ModulePrefs>
     
<UserPref name="imagewidth"display_name="Thumbnail Size"
         
default_value="25" datatype="enum" >
        
<EnumValue value="20" display_value="20 Smallest" />
        
<EnumValue value="25" display_value="25 Smaller" />
        
<EnumValue value="30" display_value="30 Small" />
        
<EnumValue value="35" display_value="35 Small Medium" />
        
<EnumValue value="40" display_value="40 Medium" />

    
</UserPref>
     
 
<Content type="html" view="default">
  <![CDATA[
 
<style>
    ul 
{ list-style:none; margin:0px; padding:0px; }
    li 
{ background-color: #EFF7FF; margin:3px 0px; padding:0px; width:200px; height:56px; float:left; }
    img 
{ border: 0px; }
    li img 
{ margin:0px auto; padding:2px;border:solid 1px #aaaaaa; width: 50px; height: 50px; }
    li span
.note { font-size:0.8em; }
    li p 
{ margin:0; }
    textarea 
{ display:inline; width:136px;height:35px; margin:0; float:left; }
    input 
{ display:block; clear:left; }
  
</style>
  
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  
<script type="text/javascript">
      
var fp = {
        viewer
:null,
        myVisits
:[],
        config
:{          maxDisplay: 10,          messageDisappear: 3        },
        init
:function()
                
{
          
var viewParams =gadgets.views.getParams();
          
if (viewParams.maxDisplay != undefined)
                  
{
            
var max =parseInt(viewParams.maxDisplay);
            
if (max >= 3 && max <= 20) {
              fp
.config.maxDisplay = max;
            
}
          
}
          $
('body').css('background-color',gadgets.skins.getProperty('CONTENT_BG_COLOR'));
          $
('body').css('color',gadgets.skins.getProperty('CONTENT_TEXT_COLOR'));
                  $
('body').css('font-face',gadgets.skins.getProperty('FONT_FAMILY'));
          $
('#header').css('color',gadgets.skins.getProperty('CONTENT_HEADLINE_COLOR'));
                  $
('#header').css('background-color',gadgets.skins.getProperty('ENDCAP_BG_COLOR'));
                  $
('#footer').css('background-color',gadgets.skins.getProperty('ENDCAP_BG_COLOR'));
          $
('#footer').css('color',gadgets.skins.getProperty('ENDCAP_TEXT_COLOR'));
       
          
var req = opensocial.newDataRequest();
          
var params = {};
         
params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS]= [opensocial.Person.Field.PROFILE_URL];
          req
.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER,params), 'viewer');
          
var idspec =opensocial.newIdSpec({'userId':opensocial.IdSpec.PersonId.OWNER,
                                             
'groupId':opensocial.IdSpec.GroupId.FRIENDS});
          req
.add(req.newFetchPersonAppDataRequest(idspec,'myVisit'), 'myVisit');
          req
.send(function(response)
                  
{
            
if (!response.get('viewer').hadError())
                        
{
              fp
.viewer =response.get('viewer').getData();
            
}
            
if (response.get('myVisit').hadError())
                        
{
              fp
.myVisits = [];
            
}
                        
else
                        
{
              
var myVisits =response.get('myVisit').getData();
              
var exist = false;
              $
.each(myVisits, function(myVisit)
                          
{
                
var json =gadgets.util.unescapeString(this.myVisit);
                
var foot = gadgets.json.parse(json);
                fp
.myVisits.unshift(foot);
              
});
                                fp
.myVisits.sort(function(a, b) {
                
return b.myVisit1 - a.myVisit1;
              
});
              fp
.showmyVisits();
            
}
          
});
        
},
        showmyVisits
:function() {
          $
('#myVisits').empty();
          
var html = '';
                   
var vhtml = '';
                   
var noOfMembs = 10;
                   
var linkColor =gadgets.skins.getProperty('CONTENT_LINK_COLOR');
                   
var textColor =gadgets.skins.getProperty('CONTENT_TEXT_COLOR');
                   
var fontFamily =gadgets.skins.getProperty('FONT_FAMILY');
                   
var prefs = new _IG_Prefs();
                   
var imgw =prefs.getInt("imagewidth");
                   
var memName;
                   fontFamily 
= 'Tahoma';
          
for (var i in fp.myVisits)
                  
{
           
// if (i == fp.config.maxDisplay) break;
            
var foot = fp.myVisits[i];          
                  
if (fp.viewer == null)
                  
{}
                  
else
                  
{
                   
if(fp.viewer.getField(opensocial.Person.Field.PROFILE_URL)== foot.profile)
                   
{
                        putViewerlink
(foot.myVisit1);
                      
}
               
}
                 
if (< noOfMembs)
                 
{
                    
//if (foot.name.length < 16)
                    
//   memName = foot.name;
                        
//else
                        
//   memName = foot.name.substr(0,15) + '<br>' + foot.name.substr(15,foot.name.length - 15);
                        memName 
= foot.name;
                         
                    html 
+= '<tr><td valign=top><img src = "' + foot.thumbnail + '" width=' + imgw + ' height=' + imgw + '></td>';
                        html 
+= '<td valign=top><a href="' + foot.profile + '" target="_top" >';
                        html 
+= '<span  style="font-size:13px;color:' + linkColor +';font-family:' +fontFamily +';"><b>' + memName + '</b></a></span></td><td valign=top><span  style="font-size:12px;font-family:' + fontFamily +';">'+foot.myVisit1 +' visits</span>';
                        html 
+=  '</td></tr>';
                 
}    
                        
//html += '<img src="' + foot.thumbnail + '" width=36 height=36>';
                        
//html += '<a href="' + foot.profile + '">' + foot.name + '</a><br>';
                        
//html += '<a href="' + foot.myVisit1 + '">Link</a>';

          
};
          
if (fp.viewer == null)
                  
{
           
// var mmsg = new gadgets.MiniMessage();
            
// mmsg.createDismissibleMessage('Please Sign in for your visit to be counted');
                    vhtml 
= '<span style="font-size:11px;color:' + textColor +';font-family:' +fontFamily +';">Please Sign in for your visit to be counted</span>';
                        $
('#viewerDiv').html(vhtml);
          
}
                  
else
                   
{
                                
var visits =document.getElementById('hiddenlink').value;
                                
var v1 =parseInt(visits);
                                
//v1 = v1 + 1;
                        
//vhtml = '<span style="font-size:12px;">Welcome ' + fp.viewer.getDisplayName() + '</span><br>';
                vhtml 
= '<a href="'+fp.viewer.getField(opensocial.Person.Field.PROFILE_URL);
                                vhtml 
+= '" target="_top"><span style="font-size:13px;color:' +linkColor +';font-family:' + fontFamily +';"><b>You</b></span></a> <span style="font-size:13px;color:' + textColor +';font-family:' +fontFamily +';">(' + v1 + ' Visits before)</span><hr>' ;      
                                $
('#viewerDiv').html(vhtml);
                                saveLink
();
                             
                  
}
                  html 
= '<table>' + html +'</table>';
                  html 
+= '<br>';
               
          $
('#myVisits').html(html);
          $
('#myVisits li').css('background-color',gadgets.skins.getProperty('ALTERNATE_BG_COLOR'));
          gadgets
.window.adjustHeight();
        
}

      
};
       
          
function putViewerlink(link1)
        
{
        document
.getElementById('hiddenlink').value= link1;
        
}
          
function saveLink()
        
{
                
var visits =document.getElementById('hiddenlink').value;
                
var v1 = parseInt(visits);
                v1 
= v1 + 1;
     
                        
var foot = {
                                                        
'id':         fp.viewer.getId(),
                            
'name':       fp.viewer.getDisplayName(),
                            
'thumbnail': fp.viewer.getField(opensocial.Person.Field.THUMBNAIL_URL),
                            
'profile':    fp.viewer.getField(opensocial.Person.Field.PROFILE_URL),
                            
'myVisit1':  v1
                                                        
};
                                                     
         
var  myVisit1 =gadgets.json.stringify(foot);
          
var req = opensocial.newDataRequest();
          req
.add(req.newUpdatePersonAppDataRequest(opensocial.IdSpec.PersonId.VIEWER,'myVisit', myVisit1));
          req
.send();
        
}
 
</script>
  
<script type="text/javascript">
    gadgets
.util.registerOnLoadHandler(fp.init);
  
</script>
  
<div id="header" class="header"><span style="font-size:13px;"><b>Top 10 Members</b></span></div>
   
<div id="viewerDiv"></div>
  
<div id="myVisits"></div>
  
<div id="footer">
  
<a href="http://blog.xmlgadgets.com/google-friend-connect/top-10-members-google-friend-connect-gadget/?utm_source=top10&utm_medium=GFC&utm_campaign=Gadget"target="_blank"><span style="font-size:11px;">Get This!</span></a>
  
</div>
  
<input type=hidden id=hiddenlink value="0">
<script type="text/javascript">
var gaJsHost = (("https:" ==document.location.protocol) ? "https://ssl." :"http://www.");
document
.write(unescape("%3Cscript src='" + gaJsHost+ "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-4747275-3");
pageTracker
._trackPageview();
pageTracker
._trackEvent('Top10', 'Viewed');
} catch(err) {}</script>

 ]]>
 
</Content>
</Module>





Como adicionar este gadget para um Blogger do site alimentado blog /?




Clique aqui para adicionar "Top 10 Membros" gadget para seu blog blogger.




Caso contrário,



1. Vá para a página de layout do seu blog.
2. Clique em "Adicionar gadget"
3. Clique em "Adicionar o seu próprio"
4. Dar a url gadget como http://xmlgadgets.com/ig/top10.xml e salvar.





Como adicionar este gadget para não-Blogger sites?


1. Acesso ao Google Friend Connect , e selecione o site que você deseja adicionar o gadget.


2. Clique em "Gadgets Social"

3. Clique em "Todos os Gadgets" tab.


4. Localize "Top 10 Membros" gadget e clique em "Get esse gadget"







comentado

 

estaaquii Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger Templates