Test de Concrete 5

Parmi les CMS (Content Management System), ou architectures de sites les plus utilisées, concrete 5 fait partie des petites mais intéressantes étoiles montantes du web. C’est un CMS open source, avec une licence du MIT. Sa grande force, qui est partagée par des plate-formes de sites « gratuits » comme Wix, est de proposer un moteur d’édition et de construction dynamique, en java. En d’autres termes, un particulier qui désire modifier ses contenus et son site en temps réel, peut « jouer » directement avec les éléments, sans une seule ligne de code ou connaissance dans ce domaine. Le CMS serait le 4ème en termes de popularité d’après prweb (http://www.prweb.com), comblant un vide entre wordpress et drupal, et la société PortlandLabs qui est derrière, assurant un support de qualité et une cohérence d’ensemble malgré la licence open source.

Spécificités

En termes plus techniques, ce CMS fonctionne sur le principe « Modèle-vue-contrôleur » (Model–view–controller) un Wysiwig (What you see is what you get) bonifié. Le CMS avec un language orienté objet notamment dispose d’un cache de serveur intégré, d’une API de développeur, d’un système de suivi de version et de l’optimisation de son moteur de recherche.

Prévoyez un ordi réactif et un bon débit

Le côté négatif de ce mode de fonctionnement à priori assez intuitif est sa relative lourdeur, puisque via le protocole http et l’accès au serveur en temps réel, il faut une bonne connexion et un ordinateur qui ne soit pas surchargé de tâches. Tout son mode de fonctionnement tourne autour de la possibilité de gérer des blocs, certains affichant par exemple le titre, le menu, un flux d’article, une galerie… C’est particulièrement vrai sur les templates de type « commercial » pour lesquels le storytelling impose un scroll avec de nombreux éléments superposés. Il est très facile de déplacer n’importe quel élément en simple glisser-déposer. Moins d’éléments à cocher, cachés dans des sous-menus de paramétrage donc, plus facile et intuitif à gérer au moins en théorie.

Le point fort: Design très intuitif

Chaque bloc dispose de propriétés propres et peut être édité entièrement (editeur de textes intégré), dupliqué, supprimé, importé… Ainsi quelle que soit la complexité des blocs en question (formulaires, galeries, vidéo, etc.) n’importe lequel peut être déplacé en direct sur le site. Reste toutefois une validation à faire via le cache pour afficher aux internautes ces modifications.

Ce système de cache puissant est intrinsèque au fonctionnement du CMS. C’est aussi, pour qui n’en à pas l’habitude, une vraie plaie, car les éléments modifiés n’apparaissent que forcés au prix de contorsions avec les paramétrages. Frustrant.

Pour avoir une idée claire de ce CMS j’ai choisi de l’installer sur un nom de domaine qui en fera frémir plus d’un (et d’une !), spider-encyclopedia.com. Un choix personnel lié a une arachnophobie traitée en tentant de la muer en centre d’intérêt et de l’intêrét de… dominer le web.

L’occasion en tout cas d’apparaître sur la toile avec un site spécialisé dans un domaine ou les extrêmes s’affrontent, vieux sites scientifiques complets mais peu attractifs et sites en one-shots d’étude de collégiens truffés de gifs animés et abandonnés. Bref, quelques raisons concrêtes d’utiliser concrete 5 (allons-y pour les jeux de mots).

Concrete 5 en bref

Concrete 5 existe depuis 2010 et à quelques atouts dans sa manche, outre la taille de sa communauté (282 000 membres, 723 194 sites), le nombre des add-ons (beaucoup de payants également), son côté responsive de base (avec contrôle très bien pensé sur différents types de smartphones !), ses systèmes de droits et permissions et ses options SEO intégrées. Concrete 5 met aussi en avant le fait que son CMS a été choisi en 2016 par l’US Army pour son programme MWR (Unified Web Presence) (msg: Si un troufion de base peut gérer ça…) – bref, un CMS en béton armé à prise rapide :).

Parmi les autres points forts:

  • De nombreux templates, gratuits, utiles, responsives, variés et …récents.
  • Son installation rapide (attention toutefois a bien vérifier sa version de php!)
  • Bonne sécurité du fait de sa relative rareté (0.2 % des CMS installés en 2015)

Maintenant, ce CMS possède une ergonomie particulière, avec quelques points faibles. Outre les lourdeurs du cache, le test suprême est de pouvoir rapidement créér une page de contenu ou un post. A ce titre, c’est peut-être un peu moins intuitif que wordpress qui propose un « + » dans sa barre de navigation permanente ET son menu latéral.

Sur Concrete 5, il existe deux icônes à droite, un icône de « fichiers » et une icône de « réglages ». Si la séparation des fonctions est logique, il faut activer cet icône pour afficher le menu latéral proposant la création et la gestion de contenus. Ensuite vient la séparation entre page et post, gestion d’images et autres selon les addons.

Notez qu’à ce stade le site est « brut de template » avec des contenus et un menu préinstallés. Pour éditer une page existante il faut se lever de bonne heure accéder au sitemap, cliquer-droit, ce qui ouvre le menu contextuel et « visiter la page » ce qui permettra de l’éditer (symbole « crayon » dans le menu de tête). Cela permettra ensuite d’éditer le bloc (autre menu contextuel). Les icônes sont bien choisis et rationnels en général.

Pour créér une page il faut passer par le symbole d’engrenage (réglages) puis « composer », ce qui ouvre à droite la partie édition permettant de remplir le titre, les champs SEO, de catégoriser et de taper son texte, ajouter des éléments.


Ajouter des éléments (symbole +) est assez intuitif. On glisse-dépose le bloc à l’endroit que l’on souhaite en édition visuelle, ce qui en code, ajoute un bloc de type div ou assimilé. La fonction ajouter html permet de place des éléments plus complexes. Le bloc « feature » permet d’ajouter à peu près tout élément spécial de mise en page (icône avec texte, lien…).
Pour sauver la page il faut en repasser par « édition » (crayon), on peut en profiter pour ajouter un commentaire en cas de travail collboratif.

Mon avis

En matière d’intuitivité, Concrete 5 écrase totalement des CMS comme Drupal ou Joomla, il se révèle même plus facile à appréhender que WordPress sur certains aspects, quoique la création et l’édition de pages soit fastidieuse. Le distinguo entre page et article n’est pas non plus évident à priori. Toute « page » est en article par défaut, puisque les commentaires sont activés. Le fait de pouvoir naviguer/éditer à la volée tout contenu avec le point de vue du visiteur est un beau tour de force. WordPress est sans doute plus « chargé » mais fait l’impasse sur les menus contextuels, en tout cas avec l’ampleur d’un Concrete5.

Donc au final Concrete5 se place comme le CMS parfait pour des débutants, plus facile d’usage et avec une courbe d’apprentissage encore plus réduite que WordPress, mais moins de fonctionnalités lorsqu’on va un peu plus dans les détails. Il faut créér un site complexe pour réellement se rendre compte de ses possibilités. J’attendrai donc une commande de ce type pour donner un avis plus éclairé sur cet aspect. Concrete 5 est en toute cas parfait pour disposer d’un site présentable et personnalisé en moins d’une heure.

Gros point noir cependant:

Concrete5 n’existe pas en Français !

POUR LE TESTER
Rendez vous sur http://spiders-encyclopedia.com/index.php/login
Identifiant: test
Mot de passe: motdepasse
adresse mail (bidon): any@mail.com

Un nouveau Portfolio

Pour bien distinguer les activités d’illustration des autres activités (graphisme web, webdesign…), un nouveau portfolio a été créé: illustrashop.com
Le site est responsive (adapté aux mobiles) entièrement en html5 et a été designé spécialement comme une galerie interactive, qui peut évoluer par la suite en intégrant d’autres thématiques. Restera à minifier le CSS et a supprimer les styles non utilisés pour optimiser sa performance.

Parmi les activités non listées, les infographies font partie du lot.
Par exemple pour le compte de ww1-planes.com, le site du centenaire des avions de la grande guerre, une infographie dédiée a été produite, visible sur cette page.

ww1 planes statistics
ww1 planes statistics

Vectoriel contre Pixel

C’est une question souvent évoquée en design graphique, avant de se lancer dans une création. Quelle « technologie » choisir ?

Définition et comparaison, pixels contre vectoriel

En réalité il y a de nombreuses façons d’arriver à la version « pixel » qui est simplement la version numérisée d’un design ou d’une illustration qui peut être réalisée sur Gimp/Photoshop ou même dessinée, peinte, scannée et le cas échéant retouchée, ou encore créée en 3D et rendue. Par « pixel » on entendra donc tout ce qui est numérisé point par point, avec la résolution qui suit: 72 dpi (standard web) ou 300 dpi (impression).

En clair, cela signifie qu’une illustration va « peser » le nombre de ses pixels, chargés d’informations RVB (web, synthèse rouge-vert-bleu, soustractive) ou CMJN (print, synthèse additive, Cyan-magenta-jaune-noir). Cela peut donc aller de quelques kilo-octets à quelques megas.

La « souplesse » d’une illustration numérisée étant proche de zéro comparé à la technologie vectorielle, mieux vaut scanner à haute résolution, donc print (300 dpi) et décliner ensuite. Les formats web sont .jpg; .gif, .png, les formats print sont .tiff, .bmp (des plus utilisés).

Le vectoriel (Ex. créé via Illustrator d’Adobe) se base sur un système de calcul tout a fait différent: On prends les coordonnées de points qui définissent la forme, et les informations de couleur (y compris dégradés, effets, etc). La « forme » qui peut être composite (autres calques vectoriels en transparence), va donc pouvoir être déformée à loisir. Si on procède de la même manière avec une image pixellisée, on va juste obtenir du flou (création de pixels lors de l’agrandissement par le logiciel).

Une illustration vectorielle se décline en formats .ai .eps (natifs) et sur le web, .svg.

Lequel utiliser, pixels ou vectoriel ?

Selon la nature du projet, on peut utiliser l’un ou l’autre, voir les deux combinés, ou se servir de leurs forces respectives. Le fait est à l’usage que, en prenant les logiciels les plus utilisés dans ce domaine, photoshop (pixel) et illustrator (vectoriel), chacun présente des avantages et des lacunes.

La force de photoshop, c’est de pouvoir permettre des effets complexes, notamment de textures, éventuellement sans utiliser les filtres. Marier des textures de métal entre elles par exemple, est impossible ou difficile à faire sur illustrator, à moins de préparer à l’avance et d’importer tous ses calques, ce qui ne présente guère d’avantages car la texture est pixellisée, et donc cadre mal avec les redimensionnements du vectoriel. Le rendu phtoréaliste, c’est ce qui fait la force du pixel.

La force d’illustrator, c’est la souplesse et la légèreté de la technologie vectorielle, qui se prête bien à l’illustration « plate ». Le web 2.0 et le Flat Design ont en effet banni les imagettes ou icônes .gif du web, les ombrages, effets de reliefs, textures, etc. Le flat design permet en outre une meilleure lisibilité une fois réduit à l’échelle d’une icône de navigateur. Pour s’en convaincre il suffit de voir les sites les plus récents. A part les photos HD (souvent de généreux backgrounds), les icônes vectoriels, monocouleurs, règnent en maître. Le fait est que les sites récents se doivent d’être responsives, donc auto-adaptables. Les images peuvent poser des problèmes de réduction, alors que les icônes vectoriels, voire les fontes, sont bien plus souples et facile à utiliser et passent sans problème d’un écran desktop à une tablette et un smartphone. Petit détail qui à son importance, les images vectorielles pèsent beaucoup moins lourd, c’est mieux pour épargner des Go sur le disque dur et pour travailler au quotidien en multi-tâches, en en partage.

Ce n’est donc par pour rien que les icônes sont créés en vectoriels, et logiquement les logos aussi. Chacun ensuite à ses habitudes mais il n’est pas rare de rencontrer des professionnels de la PAO qui travaillent entièrement sur illustrator, pour des cartes de visites, leurs plaquettes et flyers… La gestion des polices de caractères est également plus riche et aisée sur ce logiciel.

Donc au final, concrètement, que choisir ?

-S’il s’agit d’un logo ou d’icônes, voir d’illustrations assez simples et que, soit vous êtes à l’aise avec une souris pour dessiner, ou vous disposez d’une tablette à dessin connectée, alors le vectoriel s’impose naturellement.

-Si en revanche on est sur des visuels plus complexes, avec des effets, de la profondeur, un mix d’images ou une photocomposition qui joue sur les transparences et les opacités, photoshop (les « pixels ») vient plus facilement à bout de la tâche imposée.

Quelques exemples très simples:

Des exemples d’illustrations vectorielles à 100%. En bas, à gauche, le temple est réalisé en 3D et le modèle filaire est exporté. Le « père noel » est une illustration dessinée, scannée, puis importée et refaite point par point sous illustrator. A droite le logo de l’association chaudron graphique, en 2007. Noter la propreté des dégradé, un concentrique utilisé pour la marmite, les pieds, les bulles, l’anse et l’intérieur. Les bords de la forme sont matérialisés par un contour noir comme les dessins BD.

 

Bon exemple ci-dessus, d’illustration (la première) pour le site tank-encyclopedia.com, qui en totalise des centaines. Après un premier exemple sous illustrator, toutes ont été réalisées sous photoshop. La raison est assez simple: En amont, les textures métal. En aval, le travail complexe sur les ombres, puis les effets: Rouille, fatigue, boue. Tout est réalisable en vectoriel, mais bien plus complexe a réaliser.

Autre exemple, entièrement réalisé sur photoshop. En fond, deux planètes réalisées en 3D importé, le « skin » étant une peinture scannée… Les effets de lumière seraient réalisables en vectoriel, mais sur une plus long échelle de temps.

Autre exemple, pour navistory. Le dessin a été réalisé sur illustrator, importé sous photoshop, pour l’application des textures (bois, peaux, toile…), ombrages, personnages « peints » numériquement.

Et vous, comment utilisez vous ces technologies au quotidien ?

Faites-moi part de vos expériences…

Save

Save

Save

Save

3 Changements de Google que vous devez connaître

Au cours du dernier trimestre, il y a eu trois changements importants lancés par Google qui fournissent à la fois des opportunités et ont des implications graves pour les propriétaires de sites Web. Cet article couvre les trois modifications apportées par Google et fournit un aperçu rapide des implications concrêtes.

Source: 3 Changements de Google que vous devez connaître

Save

Save

Les 20 meilleures sources d’inspiration de Web Design

Les créatifs, peu importe le milieu dans lequel ils se spécialisent, ont besoin d’inspiration. Elle joue un rôle vital dans le processus créatif. L’inspiration peut provenir d’une expérience, d’un objet ou d’une personne, cela n’a pas d’importance.

Source: Les 20 meilleures sources d’inspiration de Web Design

Save

3,900 Pages du journal personnel de Paul Klee’s en ligne

Toutes les techniques du Bauhaus utilisées et enseignées par Klee sont maintenant dans le domaine public. Une grande source d’inspiration pour les designers …

Paul Klee a mené une vie artistique qui a traversé les 19èmes et 20èmes siècles, mais il a gardé sa sensibilité esthétique et travaillé pour les futurs artistes. De ce fait, une grande partie de l’œuvre de peintre suisse-allemand associée au Bauhaus, définit, à sa manière la plus distinctive, sa propre catégorie d’abstraction, et exhale encore aujourd’hui une vitalité étonnante, une source d’inspiration pur les designers graphiques.

En savoir plus: http://www.openculture.com/2016/03/3900-pages-of-paul-klees-personal-notebooks-are-now-online.html

 

Storytelling: Mars by Nat Geo

Le site Web est dédié à la nouvelle série National Geographic Mars, et a été conçu par DotControl Digital Agency. Un grand exemple de storytelling avec beaucoup de fonctionnalités, les derniers effets javascript génériques et une navigation intuitive, et qui prouve aussi que la musique est toujours un atout précieux lorsqu’elle n’est pas là pour distraire et remplir l’espace, mais plutôt pour créer une atmosphère de fond cohérente.

Source: National Geographic – Mars

Justify text in WordPress

WordPress is the most used blog/CMS on the planet and if you are reading these lines i’m with the text editor, precisely. As you probably using it too,  so once you met this problem:

How to have the text justified ?

I’m not a hardcore perfectionist but when it comes to simple things like this, i am just used to the idea that a justified text, heavenly-positioned on each side is just more arguably aesthetic, at least on a webdesign point of view. Bottom line.

An the problem is, on basic WordPress (no plugin other than your basic, built-in TinyMce editor) you just have three text-alignment options: Left, Right and Center. That’s it. Center is ok for titles, relatively small images, left is the « by default » posture for any text, at least in the western world which makes the most of web contents, and right, well, is almost never used.

So why the hell text-justify is not mandatory right with the other options ?

That’s a question to ask to TinyMce. But here it is: On your basic, fresh, recent WordPress install your toolbar is quite « light »:

  • Paragraph style
  • Strong
  • Italic
  • Bullet list
  • Numbered list
  • blockquote
  • The famous alignment buttons
  • Link
  • Unlink
  • More tags
  • Toggle toolbar

Toggle Toolbar ? Wait, that could be it ?

Well, not. If you indeed unfold this hidden second line, you’ll have quite a disillusion: Strike, horizontal line, text color, paste, clear, special character, indent, undo and help shortcuts icons. That’s it.

Ah, perhaps i should find it in the help shortcuts. Well, …err, nay.

So, no justify at all in WordPress basic editor ? Wait, that IS quite an issue, there should be a solution.

So I googled for it. And tried the TinyMCE Advanced plugin, supposed to enhance the whole thing, and which even displayed in its image the justify text button next to the striken icon. Installed it and… Still no justify icon.

So i ventured into the settings, and bingo ! I had all the needed icons underhand. I made my own toolbar, hit save and was ready to go.

So here my tip for the week, i strongly recommend this neat little plugin !

(And as you can see this text is justified).

See also: https://en.forums.wordpress.com/topic/how-to-justify-texts

Have a great day !

David

Prisma launches a social feed to see if style can transfer into a platform

Prisma, the app that popularized style transfer to apply art-esque filters to photos and videos after launching this summer, is finally attempting to turn itself into more than just a cool tool. In a big update being released today for its iOS and Android apps it’s adding it’s own social stream with a focus on location-based sharing.

Late last month the startup told TechCrunch it had a social feature in the works, after having its access to the Facebook Live API cut off, shuttering a livestreaming broadcast feature it had launched via Facebook’s platform. Now Prisma is hoping to build its own walled garden.

Source: Prisma launches a social feed to see if style can transfer into a platform | TechCrunch

7 Web Development Trends For 2017 And Beyond

As all developers are aware, web development is a dynamic business where standing still is the last thing to do. Every day newer improvements are being introduced to put a website together and make it a super cool one. As 2016 draws to a close, let’s take a look at the emerging web development trends that a good website development company India should focus on in 2017.

These 7 trends have already picked pace across the world, and you should be clued in too.

1. Open cart for E-Commerce Web Sites

E-commerce has redefined the way we shop and design changes are constantly being introduced to make the shopping experience better for customers. It has been predicted that Open Cart will take over the traditional platforms such as Magento. Open Cart makes a deadly cocktail of easy usage and powerful eCommerce functionality and has rolled it into an affordable package…

Read more : 7 Web Development Trends For 2017 And Beyond