Installer facilement un site en local avec Bitnami

Après vous avoir présenté plusieurs outils pour le développement tels que Viewport Resizer, PadeSpeed Insights ou Wave pour l'accessibilité, nous vous présentons aujourd'hui la plateforme Bitnami, un app store proposant près de 75 CMS, CRM et logiciels open source prêt à être installés en quelques clics sur votre ordinateur, parmi lesquels on retrouve Wordpress, Magento, Mantis, Apache Solr, Liferay, Drupal, Roundcube ou encore Joomla.

Bitnami propose des bundles prête à l'installation comprenant l'application web que vous souhaitez tester en local, ainsi que les composantes nécessaires à son bon fonctionnement (serveur, base de données, etc.). Plus besoin donc d'installer et de configurer un outil de déploiement tel que Wamp ou Xamp, car tout est inclus avec l'application. Pratique, donc, pour comparer deux solutions, tester le fonctionnement ou les possibilités d'un CMS, pour un plugin, la compatibilité de certains éléments, etc. A noter également, dans la plupart des cas, les applications sont disponible sous Windows, Mac OS X et Linux.

Pour télécharger l'une des applications proposées par Bitnami, il suffit de créer un compte sur la plateforme. L'installation en local est très rapide et ne demande qu'une configuration limitée (attention par contre lorsque vous installez plusieurs applications, ou si vous faites tourner un serveur local en même temps, pensez à arrêter Apache pour éviter les conflits). Il est également possible de configurer l'envoi de mails via votre adresse Gmail lors de l'installation pour vos procédures de test.

En plus de l'installation en local sur votre ordinateur, les applications peuvent également être installées sur une machine virtuelle ou en ligne, sur votre serveur ou sur le cloud, en version publique ou privée (il existe même une offre de test gratuite la première année).

Enfin, si le logiciel que vous aimeriez tester n'est pas encore disponible sur la plateforme, sachez que grâce au Bitnami Contest, les utilisateurs peuvent voter toutes les deux semaines pour leur application préférée. Celle qui aura remportée le plus de vote sera ajoutée à la librairie. Il ne vous reste plus qu'à choisir le logiciel que vous souhaitez tester !

5 extensions Chrome pour les métiers du web

Après vous avoir présenté plusieurs extensions Chrome destinées à vous simplifier la vie ou à vous proposer de nouvelles fonctionnalités telles que Modbot pour optimiser votre expérience de navigation, Viewport Resizer pour tester la responsivité des sites internet ou encore Last Pass pour sauvegarder tous vos mots de passe, le Collectif Digitives vous propose aujourd'hui une nouvelle sélection d'extensions pour Chrome qui devraient plus particulièrement faciliter le travail des professionnels du web.

Webdesign : Whatfont

L'extension Whatfont vous permet d'identifier immédiatement la police employée sur un site internet. Il suffit simplement d'activer l'extension en cliquant sur l'icône, puis de survoler le texte à analyser avec son curseur. En cliquant sur le texte, Whatfont vous fournit alors en plus du nom de la police, sa taille, sa couleur, la hauteur de ligne, ainsi qu'un aperçu de la fonte. Et si vous êtes vraiment séduit par cette police, vous aurez même la possibilité de le clamer au monde entier en le twittant automatiquement depuis l'extension.

Le - : l'icône de Whatfont est entièrement noire, elle est donc difficile à voir sur un thème chrome de couleur sombre.

Installer l'extension Whatfont pour Chrome

Veille et curation : Session Manager

Session manager va devenir l'outil préféré de tous ceux qui aiment accumuler les onglets dans leur navigateur. Pour éviter de les perdre malencontreusement lors d'un plantage de chrome par exemple, vous pourrez désormais les enregistrer grâce à Session Manager. L'extension vous permet de sauvegarder des listes d'onglet, de les nommer et de les rouvrir au besoin. L'avantage par rapport à un simple ajout dans les favoris de votre navigateur, est que d'une part vous pouvez enregistrer tous vos onglets en une seule fois, sans avoir à les bookmarker un par un, mais, de surcroît, l'extension garde en mémoire le nombre de fenêtre ouvertes au moment de l'enregistrement. Ce qui signifie que si vous avez enregistré plusieurs séries d'onglets ouvertes dans des fenêtres différentes, Session Manager les rouvrira exactement de la même manière.

Le - : l'impossibilité de pouvoir visualiser les sites bookmarkés dans chaque session (sans les ouvrir), ou de les éditer pour modifier la liste des pages web enregistrées.

Installer l'extension Session Manager pour Chrome

Développement : PageSpeed Insights

Lors des dernières phases de développement d'un site web, il est important de vérifier la vitesse de chargement des pages. C'est un élément primordial non seulement pour la réussite et l'ergonomie d'un site (un site lent au chargement entraîne un manque de confort pour l'utilisateur), mais aussi pour son référencement. En effet Google prend en compte la rapidité de chargement des pages dans son algorithme, et pénalise les sites trop lourds. Cette extension vous permet donc de mesurer le temps de chargement depuis le panneau "Outils de développement" proposé par Chrome. En plus de vous fournir une note sur 100 indiquant la rapidité de votre site, il vous propose également une liste de suggestions vous permettant d'améliorer cette rapidité de chargement, par niveau de priorité. Des indications très détaillées qui vous donneront la marche à suivre pour optimiser votre site internet.

Installer l'extension PageSpeed Insights pour Chrome

Communication : Gmail Checker

S'il vous arrive souvent de jongler avec plusieurs comptes Google pour les adresses e-mails, Gmail Checker devrait vous simplifier la vie. Plus besoin de vous logger sur deux navigateurs différents ou d'ouvrir vos comptes google en multicompte, cette extension vous permettra d'obtenir directement dans votre barre de tache les notifications d'e-mails de toutes vos boites gmail (les comptes sont vérifiées toutes les minutes par défaut). Vous n'aurez ensuite plus qu'à cliquer pour ouvrir votre compte gmail afin de lire vos nouveaux messages. Un gain de temps pour vous éviter de jongler entre vos onglets ou vos navigateurs pour vérifier si vous avez de nouveaux e-mails !

Le - : Il serait pratique de pouvoir visualiser l'expéditeur et le sujet du mail directement à partir de l'extension au lieu d'avoir à ouvrir sa boite mail, afin de juger de l'importance du message.

Installer l'extension Gmail Checker pour Chrome

Community Management : Facebook for Chrome

Grâce à cette extension, plus besoin de maintenir votre compte facebook ouvert pour recevoir vos notifications ou même pour interagir avec les autres utilisateurs. L'extension affiche automatiquement les notifications, et, lorsque vous cliquez sur l'icône, vous avez accès à votre fil d'actualité, votre profil, vos images et la liste des notifications. Vous pouvez également postez des statuts directement depuis l'extension. Il est même possible de l'ouvrir l'extension dans une pop-up. Et pour ceux qui auraient simplement besoin de recevoir leurs notifications et les nouveaux messages, l'extension Facebook Notifications devraient convenir parfaitement.

Le - : La gestion des pages facebook n'est pas possible depuis cette extension, et la boîte de réception des messages ne fonctionne pas bien.

Installer l'extension Facebook for Chrome

20 outils pour aider les jeunes développeurs à créer leur site internet

Il n'est pas toujours facile quand on débute dans la création de sites internet de trouver les outils et les services qui nous permettent de gagner du temps et de travailler plus efficacement. Nous avons sélectionné 20 utilitaires pour aider les jeunes professionnels du web.

Poser les bases de son projet :

• Choisir son CMS :

Il est aujourd'hui de plus en plus fréquent d'avoir recours à un CMS pour créer son site internet. Plus pratique et mieux conçu, c'est souvent une solution de premier plan pour créer un site solide et esthétique. Il existe une multitude de CMS, le choix du logiciel idéal pour votre projet n'est donc pas des plus aisé. Pour vous venir en aide, vous pouvez notamment vous référer à cette infographie sur les trois principaux CMS opensource ou consulter le livre blanc des 200 questions pour choisir un CMS.

• Créer sa charte graphique :

Nous vous avons déjà présenté l'outil Kuler, proposé par Adobe. C'est l'un des meilleurs utilitaires pour vous aider dans la création de la charte graphique de votre site. Grâce à lui vous pourrez créer des harmonies graphiques élégantes à partir de votre logo ou d'une photo, ou bien puiser l'inspiration auprès des membres de la communauté.

Créer une maquette :

• Composer une grille :

Un site donne toujours une impression plus professionnelle quand son design est structuré sous forme de grille. Pour vous aider à créer la grille qui correspond le mieux aux besoins de votre site, Modular Grid est l'outil qu'il vous faut. Il vous suffit d'indiquer quelques paramètres de votre grille (largeur du site, nombre de colonnes, largeur de la gouttière, etc.) pour que ce site génère pour vous un modèle correspondant parfaitement à vos attentes. Il ne vous reste plus qu'à le télécharger dans le format de votre choix. Une extension est également disponible pour créer votre grille directement dans Photoshop.

• Prévoir ses espaces publicitaires 

Quand on souhaite monnayer son site internet, il est primordial de prendre en compte la taille et l'emplacement des encarts publicitaires dès les premières étapes de la conception de son site, afin de s'éviter toute mauvaise surprise. En effet, les publicités sur le web répondent à des normes strictes. Pour connaître les formats standards des encarts, vous pouvez consulter l'aide de Google pour les formats de publicités Adsense, ou encore les recommandations de l'IAB sur les formats publicitaires classiques.

• Choisir ses icônes 

Si vous n'êtes pas un pro du webdesign, la création d'icônes personnalisées pour votre site risque de poser problème. Heureusement, il existe de nombreux sites qui proposent des packs d’icônes gratuits, tels que la PNG Factory, ou encore le site Icon Finder, une véritable mine d'or. Attention cependant à bien choisir le type de licence correspondant à votre projet.

• Trouver la police qui correspond à votre projet :

La recherche de la typographie idéale est une quête de longue haleine. Pour vous aider dans vos recherches, il existe de nombreux sites proposant des polices gratuites. Parmi ceux-ci, Dafont et son catalogue de plus de 12 000 typos s'impose comme l'une des références en la matière. Vérifiez bien là aussi quelles sont les conditions d'utilisation de votre police.

Développer son site :

• Coder :

Plus convivial que le simple bloc-note, l'utilitaire Notepad ++, grâce à ses nombreuses options de coloration syntaxique, d'indentation ou de recherche vous permettra de créer ou de modifier votre code plus facilement.

• Créer ses feuilles de style :

Primer CSS se charge de générer automatiquement votre css à partir du code HTML que vous lui avez indiqué. Vous récupérez ainsi un squelette vide avec vos classes et vos attributs, et il ne vous restera plus qu'à les décrire.

• Débuter en HTML5 :

Grâce à cet aide-mémoire des tags HTML5, le nouveau et très prometteur standard du web n'aura plus de secrets pour vous. L'infographie propose également un très utile récapitulatif de l'état de compatibilité des navigateurs avec le HTML 5.

• Innover grâce à la CSS3 :

Envie d'ajouter un dégradé, des bordures arrondies ou encore cette jolie police que vous avez trouvé sur Dafont à votre site ? Exit les images, grâce à la CSS 3 vous gagnez en accessibilité et en référencement et le CSS3 Generator vous permettra de créer le code correspondant à vos envies.

• Préparer ses emplacements textuels :

Pour ne pas perdre de temps dans le développement de votre site en attendant d'avoir les textes définitifs de vos pages, vous pouvez utiliser du texte de remplissage tel que le fameux lorem ispum ou, pour une utilisation plus avancée, le html ipsum qui vous fournira tout le code nécessaire au type de texte qu'il vous faut.

• Utiliser des images de remplissages :

Si vos photos ou vos illustrations ne sont pas encore prêtes mais que vous souhaitez tout de même préparer vos pages, pourquoi ne pas faire appel au service Placehold.it ? Il vous suffit de choisir la taille de votre image, sa couleur ou encore un texte d'accompagnement, et de récupérer le code généré pour le placer sur votre site.

• Générer ses mentions légales :

Étape peu attrayante mais pourtant indispensable dans la création d'un site internet, vos mentions légales peuvent être facilement générées grâce aux modèles fournis par le site de la CNIL. Juste quelques cases à cocher et il ne vous restera plus qu'à les personnaliser.

Tester et débugger :

• Tester la compatibilité sur les navigateurs...

Le service Adobe Browser Lab vous aidera à tester la compatibilité de votre site avec tout type de navigateurs, des plus anciens aux plus récents. Le meilleur moyen de vérifier comment votre site sera perçu par les internautes. Attention, ce service deviendra payant à compter du mois d'avril 2012.

• … et sur les terminaux mobiles :

De plus en plus d'internautes consultent aujourd'hui le web depuis leur téléphone portable, leur tablette et bientôt par le biais de leur télévision connectée. Pour leur éviter une expérience désagréable en arrivant sur le vôtre, et risquer de perdre des visiteurs définitivement, testez le rendu de votre site sur les différents types de terminaux mobiles grâce aux services emulateur mobile pour les smartphones, ou screenfly pour tous les types de terminaux mobiles.

• Tester l'accessibilité :

Il est primordial de vérifier si votre site sera bien accessible à tous types de visiteurs. Heureusement, il existe un outil très efficace et simple d'utilisation : la plateforme Wave. Grâce à elle, vous pourrez tester et facilement visualiser les éléments de votre site qui n'auraient pas été optimisés pour l'accessibilité web. Il ne vous restera plus qu'à apporter les correctifs nécessaires pour faire de votre site un modèle d'accessibilité.

• Valider son site :

Pour garantir la qualité et l'accessibilité de votre site, il est nécessaire de vérifier qu'il est bien en adéquation avec les spécifications des standards du web édictés par le W3C. Le W3C Markup Validation Service vous permettra de valider à la fois votre code HTML, mais aussi vos feuilles de style grâce au W3C CSS Validation Service.

• Débugger en ligne :

Une fois votre site en ligne, le plus simple pour traquer les bugs ou essayer quelques modifications est de recourir à l'extension Firebug pour Firefox. Grâce à ses fonctionnalités avancées, vous pourrez facilement faire vos tests avant de les appliquer à votre site.

• Tester le temps de chargement des pages :

La vitesse de chargement d'un site tient une place des plus importantes dans son référencement par les moteurs de recherche. Un site trop lent pourra être pénalisé, même si son code et son contenu ont été optimisés pour le référencement. Pour vous éviter ce genre d'impair, tester le temps de chargement de vos pages grâce à des outils en ligne tels que Yottaa. Cet utilitaire aux fonctionnalités avancées calculera le score de votre site et vous permettra même de simuler son temps de chargement pour plusieurs zones géographiques.

• Votre site internet et Google :

Pour voir votre site comme Google le voit, vous assurer qu'il ne présente aucun obstacle majeur pour être correctement référencé et tester votre sitemap avant de la soumettre aux moteurs de recherche, vous pouvez utiliser les Google Webmaster Tools qui vous aideront à en savoir plus sur l'indexation de votre site.

Vous voilà désormais armés pour développer votre premier site internet. Et pour les créateurs les plus aguerris, n'hésitez pas à partager vos astuces dans les commentaires.

Stéphanie M.

Du développement à l'utilisation, tout ce qu'il faut savoir sur les Spotify Apps

Le 30 novembre 2011 a marqué une nouvelle ère pour le leader du streaming musical avec le lancement de Spotify Apps. Depuis lors, les utilisateurs de Spotify ont pu tester une quinzaine d'applications aux concepts des plus variés. Que vous soyez développeur ou utilisateur, le collectif Digitives vous offre une visite guidée de cette nouvelle fonctionnalité.

Soucieux de vouloir faire oublier la polémique engendrée par ses nouvelles conditions d'utilisation signant la fin du tout gratuit illimité, le géant suédois a su rebondir en proposant à la communauté de développeurs de participer à une nouvelle expérience d'écoute.

Pourquoi développer une application Spotify ?

Avec plus de 10 millions d'utilisateurs actifs et une présence dans douze pays, Spotify a tous les atouts pour attirer les développeurs les plus inventifs. Outre la visibilité mondiale offerte par la plateforme, le catalogue de ressources, riche de 15 millions de titres, est mis à disposition avec en prime la garantie d'une écoute intégrale des morceaux. Un véritable terrain de jeu pour tout développeur qui pourra exploiter l'ensemble des œuvres musicales proposées en toute légalité.

Comment créer sa propre Spotify app ?

A l'instar de l'Appstore, le processus de développement est soumis à des règles strictes et la distribution de  l'application n'est possible qu'après accord préalable de Spotify. Ceci explique le nombre réduit d'applications actuellement disponibles, ne concernant pour le moment que les partenaires officiels (Pitchfork, The Guardian, Rolling Stone etc.).

Spotify encourage néanmoins tout utilisateur passionné de musique à se livrer à l'expérimentation en lui proposant des ressources d'aide au développement sous forme de documentation, de kits et de tutoriels. La plateforme utilise également les langages de programmation communément utilisés pour le développement d'applications (Javascript, HTML et CSS) et met à disposition un kit de ressources d’éléments de design afin de garantir une cohérence au sein de son interface native.

Outre la documentation fournie, les développeurs bénéficient aussi du soutien de la communauté avec la création d'un topic dédié à Spotify Apps sous la forme de questions/réponses.

Comment soumettre son application ?

Avant de se lancer dans toute création d'application, la plateforme requiert l'obtention d'un compte Spotify Developer. L'inscription est rapide (identifiant spotify et email), l'activation, encore manuelle, peut elle prendre 1 à 3 jours. Pour espérer voir son application diffusée, un formulaire doit être soumis renseignant les informations la concernant (concept de l'app, régions géographiques ciblées etc.).

Comment Spotify a intégré ses apps ?

Après avoir installé la version 8.1, à l'ouverture du logiciel Spotify, l'utilisateur peut constater l'arrivée de cette nouvelle fonctionnalité dans la barre d'outils se situant à gauche : "APPLIS".

Il est désormais possible de faire une recherche d'applications directement via le menu. S'offrent à l'utilisateur plusieurs choix : un simple preview qui permet de se faire une idée de l'app en question ou alors l'installation au sein de l'interface spotify via le bouton "add application to sidebar". L'installation n'est qu'anecdotique, pas d'achat requis ni de temps d'attente, en un clic l'app s'ajoute au menu.

Quelques exemples de Spotify apps :

We are Hunted

Cette application propose de naviguer entre les différents tops musicaux. Les statistiques sont générées par les utilisateurs de réseaux sociaux, les blogueurs ou autres twittos. Le site s'enquiert de glaner ici et là les derniers morceaux en vogue à travers une interface attractive. L'application puise dans la base de données de Spotify pour proposer une écoute intégrale. We are Hunted permet un filtrage par genre, idéal pour faire de nouvelles découvertes. Un moyen fiable pour être en phase avec ce qui se fait de mieux en ce moment. 

 Last.fm 

Le site de scrobbling qu'on ne présente plus s'est offert le luxe d'apparaître parmi les Spotify Apps. Les utilisateurs de last.fm seront forcément séduits puisque l'app présente des fonctionnalités qui enrichissent l'expérience d'écoute et de scrobbling. Les non-subscribers seront les plus ravis car l'écoute sur last.fm n'est possible qu'en preview.. Grâce à l'application last.fm sur Spotify, les utilisateurs peuvent désormais écouter les recommandations, les titres et albums récemment écoutés, ou encore leurs coups de coeurs, basés sur les statistiques du compte.

D'autres applications valent également le détour tels que Songkick qui permet de se tenir au courant des concerts prévus dans votre coin grâce à un scan de votre bibliothèque Spotify et Soundrop qui propose d'écouter de la musique à plusieurs en créant des salons par genre.

Justine P.