Les outils pour animer votre site web

Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ [email protected] 1

Les outils en ligne pour animer son site

Pixrl Editor : traitement des images en ligne et gratuit Comme nous n'avons pas tous la possibilité d'avoir un logiciel de traitements des images, Pixlr propose un logiciel en ligne, gratuit. Vous pourrez facilement redimensionner vos images, les recadrer, éventuellement changer le contraste et la luminosité. Vous trouverez aussi Pixlr O-‐Ma8c pour ajouter des filtres tout fait à vos images. Voir sur le blog, notre didac22el : h5p://blog.voyelle.me/webtools/pixlr-‐editor-‐le-‐photoshop-‐en-‐ligne


Pixlr.com/editor

Redimensionner une image Lorsque vous arrivez sur l’Editor, un menu apparaît qui vous permet soit de créer une image, soit d’en récupérer une sur votre ordinateur, soit de travailler sur une image en ligne… Pour l’exemple , nous allons chercher une image sur l’ordinateur. Nous chargeons une image et nous allons pouvoir la modifier.


Pixlr.com/editor

Vous trouverez un menu en haut à gauche un menu qui rappelle celui de Photoshop. Dans le menu « image » vous trouverez toutes les op8ons liées à l’image, dont le redimensionnement. Vous trouverez aussi la possibilité de travailler avec des calques, de rajouter des filtres (flous, pixellisa8on, …). Dans les « réglages » vous pourrez modifier la luminosité, le contraste. Nous retrouvons aussi « éditer » avec la possibilité d’annuler une ac8on.

Redimensionner une image Pour redimensionner une image, vous cliquez sur le menu « image » puis sur « Taille de l’image ». S’ouvre alors une fenêtre où s’affichent les dimensions de votre image. Nous voyons dans cet exemple que l’image fait 4000 pixels de large. En gardant les propor8ons pour ne pas déformer l’image, nous allons modifier la largeur. Vous remarquez que la hauteur s’adapte à la largeur automa8quement lorsque « Conserver les propor8ons » est coché. Vous validez la modifica8ons en cliquant sur « OK ». Votre image est redimensionnée. Pour agrandir l’affichage de votre image modifiée, il vous suffit de cliquer sur le menu « visualiser » et de sélec8onner « Afficher tout ».


Pixlr.com/editor

Enregistrer une image Vous pouvez réaliser d’autres modifica8ons. Quand vous avez terminé, il vous suffit de cliquez sur la croix en haut à droite de l’image pour la fermer. Une fenêtre s’ouvrira pour que vous nommiez le fichier puis pour l’enregistrer sur votre ordinateur. Vous avez la possibilité d'enregistrer en JPG (à privilégier pour le web), PNG (pour le web, l'image sera peu compressée et gère la transparence, elle peut être assez lourde) , BMP (à éviter pour le web, sans perte de qualité), TIFF (format spécifique à l'édi8on) ou en PXD (format spécifique à Pixlr qui vous permet de garder les calques, de créer des templates types...).


Pixlr.com/editor

Les applica8ons Google sur Drive À par8r d'un compte GMAIL, vous avez accès à un certain nombres d'applica8ons en ligne qui tournent sur le Drive, le service de Cloud de Google. Le Cloud est un service qui vous permet de synchroniser des contenus entre plusieurs ordinateurs et un espace en ligne. Cela vous permet d'accèder à des contenus partout où vous aurez accès à internet.


Les applications Google

Les applica8ons Google vous permet d'accéder à un traitement de texte, à un tableur, un ou8l pour créer des présenta8ons (avec des slides comme sur powerpoint), à des ou8ls pour dessiner et à un ou8l de créa8on de formulaires en ligne assez puissant.



Installer Drive L'intérêt de Drive (comme aussi DropBox, iCloud, SkyDrive ou Wuala) est de pouvoir accéder partout où vous avez un accès web et à un ordinateur, à des données (fichiers essen8ellement). Pour installer Drive sur vos ordinateurs : htp://goo.gl/eotp7 Le plus de Drive par rapport à ses concurrents est que vous bénéficier non seulement du mail mais des applica8ons. La synchronisa2on de vos fichiers et dossier peut se faire sur la totalité de vos contenus ou sur une par8e seulement. Vous avez aussi la possibilité de partager des fichiers ou des dossiers à d'autres comptes (gmail) ou de les rendre public via une URL que vous pouvez alors diffuser. Les applica2ons (traitement de textes, tableur...) ne sont pas très éloignées des suites comme Open Office ou Microsow Office. Il n'y a pas toutes les op8ons mais ils sont facilement partageables.



Automa8ser des ac8ons (veilles, réseaux sociaux...) IFTTT est un ou8l assez simple d'u8lisa8on qui vous permet de créer des ac8ons automa8ques entre plusieurs services. Voir notre didac88el en ligne : htp://blog.voyelle.me/veille/xfruits-‐et-‐iwt-‐automa8sa8on


IFTTT

Channels – connecter IFTTT à vos services La première chose à faire est de metre en rela8on vos services avec IFTTT. Certains services sont par nature déjà en place comme les flux RSS, les emails. Vous pouvez ajouter plusieurs applica8ons : §  Delicious et Diigo (archivage de liens) §  Dropbox, Google Drive, Skydrive (Services de Cloud) §  Facebook (compte et page), Twiter, Instagram, LinkedIn, Foursquare, Flickr, Soundcloud,

Tumblr, Vimeo, Wordpress, Blogger, Youtube... (Réseaux sociaux et plus) §  Gmail, Google Agenda, Google Reader, Google Talk §  Evernote, Instapaper (Services de stockage d'ar8cles et plus) Certains services comme le SMS ne sont pas disponibles en France car liés à des volontés des fournisseurs d'abonnement téléphoniques.


IFTTT

Créer une tâche Vous cliquez sur Create pour lancer la créa8on d'une tâche qui va donc metre en route un processus automa8que. Vous voyez apparaître une simple ligne avec la première ac8on cachée sur le lien "this" sur lequel vous cliquer.


IFTTT

Créer une tâche Vous choisissez ensuite dans la liste le canal de source de contenu. Par exemple, je choisis le canal Feed qui va me permetre de récupérer les données d'un flux RSS. Puis je choisis "New feed item" pour récupérer les prochains contenus diffusé. Je colle l'url du Flux.


IFTTT

Créer une tâche Il vous reste maintenant à iden8fier l'applica8on qui doit recevoir l'informa8on en cliquant sur That. Vous choisissez l'applica8on dans la liste. Par exemple, je veux que chaque nouveau contenu du flux RSS aille directement sur ma page Facebook sous forme de lien et non de statut.


IFTTT

Créer une tâche Il ne vous reste plus qu'à enregistrer l'ac8on et à la décrire pour vous souvenir de ce qu'elle fait.


IFTTT

Héberger vos documents et en faciliter la lecture Slideshare, au-‐delà de son aspect réseau social, est un espace d'hébergement pour documents type PowerPoint, Word, PDF et même vidéo. Le double avantage de cete plateforme est que vous pourrez à la fois afficher vos documents sur votre site pour que l'internaute puisse les lire simplement et élargir leur diffusion hors de l'espace de votre site web.

Pour simplifier la démarche, je vous conseille de passer vos document au format PDF. Les personnes qui téléchargeront vos documents n’auront ainsi accès qu’au PDF et non au powerpoint ou document word, ils ne pourront pas les modifier (à moins de forcer le PDF), juste les imprimer.


SlideShare

Renseigner le document pour la diffusion Pendant le téléchargement et la conversion, vous avez un peu de temps pour renseigner les champs du 8tre, des tags (mots clés) et de la descrip8on. Si vous n’avez pas eu le temps de tout renseigner, vous avez toujours la possibilité de les modifier par la suite.


SlideShare

Afficher les documents sur un site Sur la page de votre document, vous trouverez en haut à droite du bloc le bouton « Intégrer ». Il ouvrira un module pour copier le code à insérer sur votre site. En cliquant sur « Customize… », vous accéderez à quelques op8ons supplémentaires pour choisir une taille du module plus ou moins grande. Pour les powerpoint ou PDF provenant de slides, vous aurez une op8on supplémentaire pour pouvoir commencer l’affichage sur une page précise. Il est possible de le faire sur les autres documents en rajoutant dans le contenu de l’iframe, sur l’atribut src, ?startSlide=(numéro de la page).


SlideShare

Intégrer le document Le code que vous copiez en cliquant sur « Copy » comprendra ce qui suit : <iframe src="htp://www.slideshare.net/slideshow/embed_code/13750497" width="479" height="511" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-‐width:1px 1px 0;margin-‐botom:5px" allowfullscreen> </iframe>

Lorsque vous voulez insérer ce code slideshare sur un site basé sur un CMS, le risque est que vous vous retrouviez avec le code affiché sur le site au lieu de voir les slides ! Pour éviter ce problème il faut passer en visualisa8on du code source. C’est un peu déstabilisant quand on ne connait pas le HTML mais ça vous garan8t un bon fonc8onnement. Ensuite il vous suffit de coller le code là où vous voulez qu’il apparaisse.


SlideShare

Les outils pour animer votre site web

Education

Transcript of Les outils pour animer votre site web