Les nouvelles de l'atelier

Rebecca Murphey développe des applications Javascript, elle vie en Caroline du nord et milite pour que les femmes soient mieux reconnue dans la communauté des développeurs.

Elle est aussi l'un des auteur du Jquery Cookbook paru chez l'éditeur O'Reilly.s

Elle vient de mettre en ligne un E-book intitulé jQuery Fundamentals (qu'on pourrait traduire par, les principes de Jquery).

C'est très bien fait, trés didactique pour celles et ceux qui souhaite mieux comprendre cet bibliothèque de développement

Le E-book (au format HTML) est distribué sous licence Creative Commons BY-SA.

Le seul petit inconvénient qu'y trouverons certains esprits chagrins est  que le livre est intégralement en anglais.

Mais la licence CC permet au contributeurs de bonne volonté de traduire cet excellent bouquin

• Jquery fundamentals est consultable ici : http://jqfundamentals.com/book/index.html
• La dernière version du livre les exemples et démos sont consultables et téléchargeable sur Github 

Ça faisait un petit (long) moment que je n'avais pas ouvert la boîte à outils de l'atelier.
d'un autre coté il y a maintenant sur ce site une page revue de web ou je mets des liens vers de nombreuses ressources (c'est mon coté curator) tu peux t'abonner au flux rss ici.

Ce qui fait que je vais faire un peu plus court avec deux infos que j'ai trouvé intéressantes et que je me propose de partager avec vous:

La première concerne Facebook et plus particulièrement les pages fans, elle devrait intéresser mes copains et copines qui font dans le community management :

Le 11 mars prochain Facebook modifiera l'ensemble des pages fans. ce qui signifie entre autre qu'a cette date le langage FBML qui permettait de créer par exemple une page d'accueil personnalisé, (comme par exemple l'onglet bienvenue du glossaire du social)  ne sera plus pris en charge.

Une alternative pour continuer a créer de pages originale, sera de les remplacer par des application Facebook personnalisée. N'ayez pas peur le nom fait peur mais c'est trés simple Kriisiis propose sur son blog un petit tutorial super bien fait qui vous permettra de faire la transition en 5 minutes : c'est ici

La deuxième info concerne Google document viewer
qui prend maintenant en charge 12 nouvelles extension de documents (en plus de powerpoints et pdf)

• Microsoft Excel (.XLS et .XLSX)
• Microsoft PowerPoint 2007 / 2010 (.PPTX)
• Apple Pages (.PAGES)
• Adobe Illustrator (.AI)
• Adobe Photoshop (.SDB)
• Autodesk AutoCad (.DXF)
• Scalable Vector Graphics (.SVG)
• PostScript (.EPS, .PS)
• TrueType (.TTF)
• XML Paper Specification (.XPS)

L'avantage de cet outil et qu'il permet à des utilisateurs de votre site d'accéder à l'ensemble des documents dans ces format sans avoir a installer de logiciel extérieur (c'est donc l'occasion de faciliter simplement l'accessibilité de votre site). Cette news me permet de vous renvoyer à l'article
Créer une visionneuse de fichiers PDF avec Jquery qui expliquait comment intégrer facilement une visionneuse de documents sur votre site en utilisant cet outil.

Voilà c'était une petite remise en route en douceur de la boîte à outils, n'hésitez pas a commenter pour m'inciter a être plus productif ...

AddThis est un site internet qui vous propose d'ajouter à votre site un ensemble de fonctions qui permet à vos visiteur de partager facilement votre site sur les réseaux sociaux.

Pour ajouter le code Adthis sur votre site il suffit simplement de vous rendre sur la page d'accueil du site

• de choisir le modèle de votre bouton
• de choisir si vous voulez accéder à des statistiques sur le partage
• et de valider la création du code du bouton

Notez au passage que si vous utilisez un plateforme de blog comme wordpress, blogspot, typepad, tumblr ou que vous souhaitiez insérer le bouton de partage dans un E-mail ou dans un projet flahs, il existe plus d'option d'intégration, disponible sur cette page : http://www.addthis.com/web-button-select.

Une fois validé la création du bouton, vous devriez obtenir un code ressemblant à ceci :

1. <!-- AddThis Button BEGIN -->
2. <a href="http://www.addthis.com/bookmark.php"
3. class="addthis_button"><img
4. src="http://s7.addthis.com/static/btn/v2/lg-share-zh.gif"
5. width="125" height="16" border="0" alt="Share" /></a>
6. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d6147fc5b637c3d"></script>
7. <!-- AddThis Button END -->

que vous n'avez plus qu'à coller sur votre site la ou vous voulez voir apparaitre un bouton de partage.

Aller un peu plus loin

Par défaut, Addthis détecte la langue de l'utilisateur et adapte le contenu de son menu à cette langue, suposons cependant que vous souhaitiez par défaut render votre bouton de partage francophonne, il vous suffit de modifier le code de la manière suivante

1. <!-- AddThis Button BEGIN -->
2. <a href="http://www.addthis.com/bookmark.php"
3. class="addthis_button"><img
4. src="http://s7.addthis.com/static/btn/v2/lg-share-fr.gif"
5. width="125" height="16" border="0" alt="Share" /></a>
6. <script type="text/javascript">
7. var addthis_config = {
8. ui_language: "fr"
9. }
10. </script>
11. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d6147fc5b637c3d"></script>
12. <!-- AddThis Button END -->

La liste de tous les codes de langues est ici : https://www.addthis.com/help/languages

Par defaut, sur la plus part des site de partage (facebook, twitter,...) Adtthis affichera le titre de la page, et l'url de la page de la page d'ou le bouton est utilisé. On peut cependant modifier ces infos, (si par exemple vous souhaitez ramener les utilisateurs sur la page d'accueil de votre site. On peut pour cela utiliser 3 paramètresaddthis:url (l'adresse de la page à cibler). addthis:title (le titre qu'on souhaite proposer). addthis:description (un des cription optionelle.). Imaginons que nous voulions modifier le bouton pour qu'il propose un lien vers la page d’accueil de ce blog

1. <a href="http://www.addthis.com/bookmark.php"
2. class="addthis_button"
3. addthis:url="http://blog.passeurs-de-savoirs.fr/"
4. addthis:title="L'atelier des passeurs de savoir"
5. addthis:description="Un blog qu'il est bien !">
6. <img src="http://s7.addthis.com/static/btn/v2/lg-share-fr.gif" width="125" height="16" border="0" alt="Partager" />
7. </a>
8. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d6147fc5b637c3d"></script>

la doc sur cette foncion est là https://www.addthis.com/help/url-and-title

Supposons que vous souhaitiez proposer uniquement le partage sur twitter facebook ou viadeo la liste de tous les service est icihttp://www.addthis.com/services/list

1. <a href="http://www.addthis.com/bookmark.php"
2. class="addthis_button_facebook"></a>
3. <a href="http://www.addthis.com/bookmark.php"
4. class="addthis_button_twitter"></a>
5. <a href="http://www.addthis.com/bookmark.php" class="addthis_button_viadeo"></a>
6. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d6147fc5b637c3d"></script>

supposons enfin que vous ayez un design spécifique à votre site et que vous voulliez utiliser vos propres boutons, modifier le code comme ici

1. <a href="http://www.addthis.com/bookmark.php" class="addthis_button_facebook"><img src="url_du_bouton_facebbok personalisé" />
2. </a>
4. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d6147fc5b637c3d"></script>

vous pouvez par exemple trouvez de très chouette boutons et icones ici : http://icones.pro/

Pour en savoir plus sur les fonctions personnalisables du bouton addthis vous pouvez consulter la doc d'addthis disponible ici http://www.addthis.com/help

...parfois !

Toute personne qui crée des sites webs, ou qui développe des applications le sait :

• Il faut toujours commenter son code,
• Il faut toujours donner des noms de fonctions compréhensibles.

Pour que celles et ceux qui un jour devront y mettre les mains pour le mettre à jour ne soient pas complétement largués.

Certains développeurs et intégrateurs font d'énormes efforts pour faciliter la compréhension de leur site, comme le prouve cette exemple de frameset  trouvé il y a quelques semaines par Laurent Gloaguen

Ou  pour expliciter ce à quoi sert une fonction comme c'est le cas pour cette magnifique fonction d'orientation :  vers les pubs inclue dans le code du player Wat.tv judicieusement nommée  PiegeAcouillon() découverte ce matin dans les news d'Infos du Net

j'aime bien