Dev & Design

New-Apps-are-Rocking-the-Wix-App-MarketWix est une solution qui souhaite vous simplifier la création de votre site internet (j’en parlais récemment).

 

 

Wix a récemment sorti un certains nombres de nouveautés. Vous trouverez ci dessous les grandes lignes.
Je précise que je ne suis pas “fan” de ce type d’approche. Toutefois pour des besoins moins spécifiques cette solution est une très bonne alternative. 

Wix dévoile un nouvel éditeur

L’objectif des de simplifier l’expérience tout en proposant des fonctionnalités les plus populaires sur le web aujourd’hui !

Vidéo plein écran et Parallax

A commencer par la vidéo plein écran qui s’est invitée sur bons nombre d’autres sites  pour attirer l’attention du visiteur sur une vidéo qui vient se lancer dès que vous scrollez à son niveau .

Sans oublier l’effet parallax qui va permettre d’ajouter de la profondeur et du dynamisme à la page.

Mais le nouveau Wix permet aussi de découper la page sous la forme de bandes pleine largeur qui permettent de scinder celle-ci en sections (avec souvent cet objectif d’avoir toutes les informations sur une seule page) et la fonctionnalité connexe d’ancres qui permettra de naviguer rapidement dans ces longues pages (avec les sections représentées sous la forme de points sur le bord de l’écran).

Wix Music

Wix vient de sortie une offre à destination des “musiciens”.
La solution en question, c’est Wix Music, cet éditeur vous permet choisir parmi de nombreux templates dédiés, puis d’y ajouter, si vous voulez, votre touche pour créer un univers à votre image. Là encore aucune connaissance technique n’est nécessaire, il vous suffit d’ajouter les éléments où vous voulez, il est donc possible d’ajouter des galeries, des effets comme du parallaxe, des vidéos en fond d’écran, etc…
Mais là où la solution est vraiment innovante, c’est dans les services et fonctionnalités associés comme par exemple le lecteur intégré, qui est totalement indépendant des autres plateformes.

Wix music est à destination des Musiciens. C’est pourquoi ils vont pouvoir vendre les morceaux de leurs choix, au prix et aux conditions de votre choix. Wix ne perçoit  aucune commission sur les ventes que vous réalisez.

Concernant la distribution. Wix Music propulse vos morceaux et albums dans plus de 120 boutiques en ligne et autres services de streaming à travers la planète. Les géants du marché comme Deezer, iTunes, Spotify, Apple Music et Google Play sont disponibles.

Vous avez également la possibilité de vendre vos propres objets, et d’autres fonctionnalités spécifiques …

Vous l’aurez compris, Wix Music s’attaque au marché de la musique.
Reste à voir si le public est réceptif.

Wix wix-logoest une plateforme de création de sites web. Leur objectif ; vous rendre autonome pour la création de votre site mais dans quel mesure ?

 

Alors Wix c’est qui ?

La société a été fondée en octobre 2006 par à Tel Aviv en Israel. Aujourd’hui Wix compte plus de 60 millions d’utilisateurs, plus de 800 employés et de nombreux bureaux à travers le monde. En novembre 2013 Wix fait son entrée en bourse.

Wix comment ça marche ?

Le processus de création est le suivant :

  1. Je créé un compte
  2. je choisi un template graphique
  3. Je configure mon site ; rubrique, couleurs, texte, images, …
  4. Je l’agrémente des fonctionnalités au travers des applications que propose le « Wix App Market ».

L’outil de création de sites se veut simple en mode « Drag and Drop ». L’interface est conviviale et la prise en main est simple. Les templates proposés sont relativement bien réalisés et adaptés pour le mobile. Jugez par vous-même.

Outre les sites Vitrines, Wix propose également son propre système pour la création d’une boutique en ligne.

Concernant le suivi de votre trafic de votre site, celui-ci est disponible au travers de l’intégration de Google Analytics. Cependant vous ne pourrez pas en profiter de cette option en version gratuite. Il vous faudra obligatoirement souscrire à l’une de leur offre payante.

Les avantages

  • Personnalisation du design
  • Création facile et rapide en mode drag & drop
  • Aucunes connaissances informatiques nécessaires

Les inconvénients

  • Publicités intrusives en version gratuite
  • Langage de développement propriétaire, par conséquent le développement de fonctionnalités dédiées est impossible

Et ça coute combien ?

Wix offre une solution gratuite pour créer votre site. La version gratuite intègre des bandeaux publicitaires. Pour les retirer il vous faudra adhérer à l’un des forfaits payant. L’offre payante démarre à partir de 4€/mois. A noter qu’à ce tarif vous disposerez toujours des publicités et il vous faudra prendre l’offre supérieure pour les voir retirées.
Wix propose une multitude de service payant  sous forme d’abonnement en fonction de vos besoins.

En conclusion

Etant moi-même au quotidien en charge de création de sites, je vous avoue qu’en première approche je ne suis pas fan de ce type d’offre. Car comme on dit on n’est jamais mieux servis que par soit même J

Cependant, si vous souhaitez créer un site rapidement sans avoir besoin de fonctionnalités spécifiques et de façon autonome sans connaissances informatiques, Wix réalisera un très bon travail.

 

Pour finir, une vidéo publicitaire présentant le service Wix

brackets-editor-logoLa société Adobe (qu’on ne présente plus ) lance Brackets, un éditeur de texte Open Source pour les Web Designers. Dont l’objectif est de vous faire gagner du temps lorsque vous coder.

À destination des développeurs de sites web, il propose un aperçu en direct et un passage rapide entre les différentes vues. Le logiciel supporte les plug-ins pour ajouter des fonctions bien pratiques comme par exemple l’utilisation de Git pour le versionnage.

Brackets souhaite également faciliter la transition d’un document de travail PSD vers un document avec mise en page CSS avec la gestion des couleurs ou des polices via l’outil “Extract for Brackets”.

Cette première version est très prometteuse, mais le chemin sera encore long vers l’éditeur de texte parfait. Notamment lorsque l’on sait que la concurrence des éditeurs est rude.

Pour ma part, après quelques minutes de prise en main je trouve l’outil simple et plutôt bien fait.

 Brackets 1.0

Source: TheNExtWeb

brackets1

De nos jours, lorsque l’on désire créer un site ou un projet web, il est primordial “d’héberger” ses données. Il s’agit là de l’un des rôles de l’hébergeur. Toutefois, celui-ci possède divers autres avantages et fonctions non-négligeables : il fournit la bande passante, c’est-à-dire une connexion internet dont le débit est variable (en fonction de l’offre souscrite) afin que votre site soit accessible au public. Il fournit ensuite de la puissance CPU. Pour les néophytes, il s’agit de la puissance processeur, indispensable pour que le site s’affiche à l’écran. Il assure également un service 7j/7, 24h/24 pour que votre projet soit en permanence disponible, de jour comme de nuit, pour éviter la plupart des pannes techniques et conserver toutes vos données en cas de pépin. Enfin, l’hébergeur vous propose d’autres fonctions telles que les sauvegardes en cas de piratage, des outils qui vous faciliterons la mise en œuvre de votre site web ainsi que des anti-spam toujours très pratiques. Bref, vous l’aurez compris : si vous désirez créer un site internet, vous ne pourrez pas le faire sans faire appel à un hébergeur au préalable.

Il existe généralement 2 offres, l’hébergement mutualisé et l’hébergement dédié. L’offre mutualisé se caractérise par le fait que plusieurs sites se trouvent sur un même serveur, par conséquent, les ressources du serveur sont partagés. L’hébergement dédié vous permet de prendre possession d’un serveur ou seul vos sites et applications s’y trouveront. Cette offre concerne généralement les sites qui à fort trafic avec des besoins spécifiques.

A titre d’exemple, chez 1and1 vous trouverez des solutions d’hébergement en fonction de votre projet et de votre budget.

L’industrie de l’hébergement web

L’histoire de l’hébergement web remonte aux années 80 et n’a eu de cesse de se développer jusqu’à aujourd’hui. Le LISTSERV apparaît en 1981, il s’agit du premier serveur de liste qui servait à l’échange de mails. Selon le blog iweb.com, il aurait également « généré les premiers spams, guerres de listes et trolls ». Le premier serveur web, le NeXTCube, apparaît dans les années 90 (avec 2GB de disque !). Les premiers serveurs en format Blade sont apparus dans les années 2000, il s’agissait du RLX Blade. Grâce au Web 2.0, qui a entièrement révolutionné le monde d’internet les années suivantes, l’hébergement web est devenu une véritable nécessité. De nos jours, on parle désormais de « Cloud », un nuage virtuel qui prend toujours plus d’ampleur sur la toile et qui permet le stockage de toutes vos données de manière plus économique et très sécurisée. De la matière au virtuel, on n’arrête pas le progrès.

 

Article sponsorisé.

Hier, Google a lancé un nouveau service appelé Google Tag Manager (GTM).


KESAKO ?

Cet outil va permettre d’améliorer la relation entre les développeurs et les web marketeurs en simplifiant la gestion de la pose des tags sur votre site.
En effet, intégrer un code Google Analytics, des codes de conversions Adwords, des tags d’affiliation ou de retargeting , …  est une demande récurrente de la part des webmarketeurs :)
Actuellement ces tags sont intégrés via votre back office ou via l’aide de votre développeur.

A présent via cet outil, vous n’intégrez qu’un seul tag (celui de GTM) et après tous les autres tags sont directement gérés depuis l’interface en fonction de critères précis (sur toutes ou uniquement sur certaines pages, lors d’une action, etc). Les tags Google Analytics, Google Adwords et DoubleClick sont intégrés nativement, mais vous pouvez facilement intégrer des tags HTML standard pour des campagnes d’affiliation par exemple.

Après un premier test rapide, sachez que la prise en main est très facile et l’interface est très bien pensée.
Normal c’est un produit Google :)

En tout cas j’en connais qui vont être heureux d’utiliser cet outil.

Source: http://www.google.com/tagmanager/

Démo de présentation de l’outil.

Photoshop tout bon designer connait. L’inspiration et la créativité c’est autre chose. Pour vous donner quelques idées et un bon départ, voici une liste de tutoriels (en anglais) pour créer des menus de navigation et de recherche.

Enjoy.

Menu avec de jolies effets navigation1.jpg

Menu avec images et navigation intégré recherche4.jpg

Recherche façon twitter recherche3.jpg

Recherche moderne navigation6.png

Navigation par onglet recherche1.png

Navigation avec effet brillant navigation3.jpg

Navigation inspiré de chez Volkswagen navigation2.jpg

SifrLa méthode ne date pas d’y hier, mais je pense bon de la rappeler. La typo sur un site web est un aspect très important. Cependant pour des limitations vous êtes réduit à utiliser des typos du style arial, times, hervana, … Dès lors que vous souhaitez mettre en place une typo atypique il faut soir passé par une image ou l’inclure dans un flash. L’image n’est pas un problème en soit mais engendre des contraintes de temps du à la création de celui ci. Reste la solution du flash; mais dans ce cas les robots (Google, Yahoo, MSN, …) ne saurons pas reconnaitre le contenu et cela impactera votre référencement.

C’est alors qu’une méthode élégante est apparue: Sifr (Scalable Inman Flash Replacement). Cela vous permet de mettre en oeuvre tout type de typo, à la volée, en transformant votre texte en flash tout en restant “compatible” et “compris” par nos amis les robots.

Cette méthode utilise conjointement du JavaScript et du flash. Si vous aussi, vous souhaitez mettre en place cette technique, je vous conseille d’aller sur le wiki de sifr, qui explique très bien la méthode.

Jusqu’à présent je n’avais pas trop parlé technique. Aspect de ce blog que je souhaite développer à présent.

Aujourd’hui je vais vous montrer une technique que je trouve très efficace et très utile: Empêcher les robots spammeurs de vous prendre votre bande passante et de vous faire ralentir votre site et accessoirement de polluer vos commentaires (je dis accessoirement car il existe par exemple les captcha qui vous permettent d’y remédier). Le concept est très simple et m’a particulièrement séduit.

Si vous ne savez pas ce qu’est un robot d’indexation, plus communément appelé “web crawler”, je vous invite à lire la définition sur wikipédia.

Les basics:

  1. Les robots suivent les liens
  2. Les “bons” robots obéissent au robot.txt
  3. Un “mauvais robot” va suivre un lien qui a été banni par le robot.txt

Vous voyez ou je veux en venir ???

Voila la stratégie à mettre en place:

  1. Attraper le robot et
  2. l’empêcher d’accéder au site.

Oui mais comment faire ?

Etape 1: Crée un lien caché

Créer un lien caché vers une page du type monsite.com/avoid.php. Pour une meilleure efficacité inséré ce lien sur toutes les pages de votre site. Je recommande de cacher ce lien en css, car il sera compris facilement par les robots: Exemple:

<a href=”/avoid.php” style=”display:none;”>je vous ai eu</a>

Etape 2: Editer votre robot.txt

Pour ceux qui ne savent pas ce qu’est un robot.txt, faite un tour ici. Nous allons à présent interdire aux robots l’accès à cette page:

User-agent: * Disallow: /avoid.php

Etape 3: Enregistrez l’IP du robot qui accède à votre page

Notre piège est presque prêt. Sur la page avoid.php nous voulons sauvegarder les informations du robot qui accède à cette page.

voila le schéma de notre base de données:

CREATE TABLE `bad_robot` ( `ip` varchar(50) NOT NULL default ”, `useragent` varchar(200) default NULL, `date_ajout` datetime default NULL, `isDisallow` tinyint(4) NOT NULL default ‘0’, PRIMARY KEY (`ip`) )

L’IP du robot est la clé primaire de notre base. Je sauvegarde également le useragent qui me permettra d’avoir un peu plus d’informations sur le robot. La date d’ajout me permet d’avoir un historique et optionnellement un champs “isDisallow” qui m’indique si oui ou non on va interdire le robot. Ce dernier champs n’est pas obligatoire mais vivement conseillé. En effet il est préférable de faire une petite page d’administration qui vous permettra d’autoriser ou non l’accès au site. Il arrive que certains “bon” robot analyse quand même la page ou qu’un internaute y accède (cela voudrait dire qu’il est allé triffouiller dans le code :( pas bien). Libre à vous de faire comme moi.

Une fois la table crée il faut écrire le code (PHP en ce qui me concerne) qui va enregistrer ce robot dans la base. J’utilise la bibliothèque pear, très utiles pour vos développements PHP (mais cela n’est bien sur pas obligatoire).

< ?php require_once(”DB.php”); $db = DB::connect(”mysql://user:pass@localhost/database”); if (PEAR::isError($db)) die(”Could not connect to database”); $db->query(”insert into badrobots set ip=?, useragent=?, datetime=!”, array($_SERVER[’REMOTE_ADDR’], $_SERVER[’HTTP_USER_AGENT’], “now()”)); echo “Vous vous êtes fait avoir !!!! ”; ?>

Etape 4: Bannir les robots

La dernière étape va permettre d’empêcher les robots, qui ont été enregistré, à accéder au site. On peut l’interdire de différente manières:

  1. Interdire le robot en php
  2. Interdire le robot avec le mod_access de l’htaccess (Allow from.. Deny from..)
  3. Interdire le robot avec des règles de firewall

Je ne vais que parler de l’option 1 dans ce tutorial. L’option 2 vous oblige à éditer les règles manuellement. Et l’option 3 demande des configurations un peu plus poussés. Bien que l’option 1 soit moins performante (accès à la base) elle est toutefois très efficace et très simple à mettre en place.

< ?php // Connection à la db if ($db->getOne(”select count(1) from badrobots where ip=? and isDisallow = 1”, Array($_SERVER[’REMOTE_ADDR’]))) die(“Vous ne pouvez pas accèder à ce site, merci de contacter l’administrateur”); ?>

Voila votre piège est pret à fonctionner. Tout commentaire est bon à prendre. J’attends vos feedbacks et vos suggestions …

En effet Microsoft propose la version 8 d’Internet explorer en téléchargement.

De nombreux bugs CSS sont encore présent. Mais si vous souhaiter le tester rendez vous ici.

SOCIAL

504FansLike
239FollowersFollow