MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you: By Andrew Bowers, Google Developer Programs


Its been about a year since I last blogged about a big Google developer event. During that time, we’ve seen a number of new technologies emerge which developers can use to build killer web applications. OpenSocial, Gears, and Android are a few that come to mind. But there is also a lot to learn if you really want to get the most out of these products.

That’s why I’m excited to announce Google I/O, a two day developer gathering on May 28th & 29th in San Francisco. The purpose of the event is to bring developers together to learn about products, tools, and techniques which are moving the web forward as a platform.

We've divided Google I/O into five topic areas: AJAX, APIs & Tools, Social, Geo, and Mobile. There's, of course, a focus on Google products, but the event won’t be limited to just Google APIs and developer tools. There is a lot of knowledge about web development in general at Google, and we’d like to share that expertise so that all applications on the web get better.

Over the two days, Google engineers and other leading software developers will share their knowledge in breakout sessions, hands-on Code Labs, and Q&A Fireside Chats.  Just a few of those speakers and what they'll be covering:

• David Glazer, Director of Engineering - OpenSocial
• Mark Lucovsky, Director of Engineering - AJAX APIs
  
• Brad Fitzpatrick, Software Engineer - Social Graph API
  
• Dion Almaer, Technical Program Manager and co-founder of AJAXian.com - AJAX
  
• John Panzer, Technical Manager - Shindig
  
• Guido Van Rossum, Software Engineer and creator of Python - Python and Google APIs
  
• Chris DiBona, Open Source Programs Manager - Open Source
• Bruce Johnson, co-creator of Google Web Toolkit - Google Web Toolkit
  

We're doing our best to make this a can't-miss event for web app developers. Visit the Google I/O website to learn more and register.  Space is limited, so be sure to make plans to attend now.

PS. If you are wondering whether we’re still having our global Google Developer Day series, the answer is a definite yes. We’ll be rolling out Developer Days to a number of countries outside the US. Look for an announcement of dates and locations soon.


2013, By: Seo Master

Seo Master present to you: As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the homepage as well. And I'm sure very few know that AdSense could disable your account in case you've put ad units inside the content of your contact or privacy policy pages. Therefore, hiding certain elements inside your blog pages is not only a matter of design, but it is also a requirement.

To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.

Step 1. Go to Blogger's Dashboard > Layout and name the HTML/Javascript gadgets that you have already added. Doing this, it will be easier for you to identify the widgets that you have in your Blogger's template. Give it a unique title so that it does not match with any of the titles of any other widgets already added.

Step 2. Next thing to do is to go to Template and click on Edit HTML



Step 3. Select the "Expand Widget Templates" checkbox.



Step 4. Find the widget's title in the HTML by using Ctrl+F and entering the widget's name in the search box.
Let's say that the title for one of my widgets is "Recent Posts". After searching for the widget's name, I will find a similar code in my template:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>  

This code represents the widget/gadget that I have added in the Page Elements location (Layout).

Step 5. After you've found your widget's code, add the following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger. For instance, in case you want:

To show the widget only in Homepage:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show Blogger widget only in post pages 

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show the widget in a specific page
 

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Note: Replace URL of the page with the address of the page in which you want the widget to appear

To hide a widget only in a particular page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To show widgets only in static pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To hide widgets in Static Pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To show widgets only in Archive Pages

 <b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

Step 6. After you have added the conditional tags, Save Template and view your blog.

That's it!2013, By: Seo Master

Seo Master present to you: By Steve Souders, Member of Technical Staff

I've been working on a follow-up book to High Performance Web Sites called Even Faster Web Sites. As I finish chapters, I talk about the findings at conferences and tech talks. The first three chapters are Split the Initial Payload, Load Scripts Without Blocking, and Don't Scatter Inline Scripts. You can hear about those best practices in my video from Google I/O.

This talk presents the next three chapters: Couple Asynchronous Scripts, Use Iframes Sparingly, and Flush the Document Early.

The adoption of JavaScript is growing, but the blocking behavior of external scripts is well known. That's why it's important to use one of the techniques to load scripts without blocking (see the Google I/O talk). But loading scripts asynchronously means that inlined code that uses symbols from the script must be coupled in some way. Without this coupling, undefined symbol errors occur when the inlined code is executed before the external script arrives.

There are five techniques for coupling asynchronous scripts: hardcoded callback, window onload, timer, script onload, and degrading script tags. All of the techniques work. Degrading scripts tags is the most elegant, but isn't well known. Script onload is the most versatile technique and is the one I recommend people use. In the talk, I then go into detail, including many code examples, on how to load scripts asynchronously and use these coupling techniques to speed up your web page.

Iframes have a negative impact on web pages. They are the most expensive DOM element to create. They block the parent's onload event (although there's a workaround to this problem in Safari and Chrome). Also, the main page can block resources in the iframe. It's important to understand these interactions if you use iframes in your page.

Flushing the document early allows the browser to start rendering the page and downloading resources in the page, even before the entire HTML document has arrived. But getting flushing to work can feel like trying to get the stars to align. You need to understand PHP's output_buffering, HTTP/1.1's chunked encoding, Apache's DeflateBufferSize, the impact of proxies, minimum HTML size requirements in Safari and Chrome, and the need for domain sharding to avoid having the HTML document block other downloads.

If your company wants a better user experience, increased revenues, and reduced operating costs, the key is to create even faster web sites. For more information on these best practices, watch the video below and read the slides.



Check out other talks in this tech speaker series:

• Doug Crockford: JavaScript: The Good Parts
• John Resig: Drop-in JavaScript Performance

2013, By: Seo Master