Créer une Icône Material Design Android avec Inkscape

Bonjour à tous,

Pour ce nouvel article, je vous propose mon premier vrai tuto sur la création d'une icône Android avec le logiciel de dessin vectoriel libre et gratuit Inkscape.

Icône Material Design Android

Logos Kevin Aguilar

Sachez avant toute chose que ce tutoriel est né car il n'est pas aisé de créer une icône de lancement d'application Android qui respecte les conventions du Material Design de Google.

Ces différentes conventions sont définies sur la page officielle que je vous conseille de lire pour plus de détails.

Les résolutions

La création d'un logo Android est meilleure avec un logiciel de dessin vectoriel car le logo aura besoin d'être exporté sous 6 résolutions différentes pour être géré par les différentes tailles d'écrans. Et le dessin vectoriel, comparé au dessin matriciel permet de créer des images avec la résolution voulue sans perte de qualité. Il est donc plus simple de créer le logo sous un logiciel de dessin vectoriel dans un premier temps (ici j'ai choisi Inkscape car libre) quitte à utiliser un logiciel de retouche matriciel dans un second temps.

Voici le récapitulatif des résolutions (qui correspond à une arrête du carré) à adopter pour chaque format du logo android :

ldpi : mdpi * 0.75 = 36dp
mdpi : 48dp
hdpi : mdpi * 1.5 = 72dp
xhdpi : mdpi * 2 = 96dp
xxhdpi : mdpi * 3 = 144dp
xxxhdpi : mdpi * 4 = 192dp

A noter qu'ici je parle de dp pour Density-independent Pixels qui est une unité basée sur la densité physique des pixels sur un écran. Pour plus d'informations sur les unités utilisées pour parler des pixels avec Android, je vous laisse le soin de regarder sur ce billet StackOverflow.

Inkscape

Pour faciliter la création du logo, j'ai créé un pattern qui reprend les différentes guidelines de Google que vous pouvez télécharger ICI.
La résolution indiquée dans Inkscape est de 192px qui est un multiple de 48, ce qui est parfait car nous donne une grille précise. Les 192px ne sont pas vraiment importants car lors de la création, seules les proportions importes mais cette résolution maximale s'adapte à une grille magnétique très utile pour y placer des points et des nœuds.

Grille Android Icône Pattern Inkscape

Style

Le style du logo est extrêmement important. En effet, afin de garder une cohérence entre tous les produits Material Design, il est judicieux de suivre quelques règles simples :

• Le logo est vu comme une feuille de papier sur lequel d'autres feuilles sont apposées (J'avais tenté de faire de la perspective dans un de mes logos lors d'un live, je peux vous assurer que le résultat n'est pas terrible)
• Le logo est généralement imbriqué dans un carré de 152dp de côté, un rectangle de 128dp/176dp de côté avec des coins arrondis de 12dp ou un cercle de 176dp de diamètre (Il existe des alternatives mais celles-ci sont les plus connues)
• Les côtés sont d'1px d'épaisseur, quelque soit la résolution (voir le post de Jahir)
• Les formes simples suffisent, les ombres donneront la profondeur au dessin, il ne faut pas trop surcharger le logo

Ombres

Les ombres sont normalisées sur des logos Android, il faut avoir en tête que la source de lumière est en haut à gauche de notre logo et que les éléments placés au dessus du fond auront une ombre portée de 45°.
Cependant des ombres portées sont également définis à partir d'une lumière diffuse afin de mettre en visibilité les différentes feuilles.
Il existe des teintes à appliquer sur les côtés de nos éléments.

Voici le récapitulatif des ombres à appliquer :

Ombre diffuse

Opacité: 20%
X Décalage: 0dp
Y Décalage: 4dp
Flou: 4dp
Couleur : Référer au tableau des couleurs

Teintes de côtés

Teinte haute
Hauteur : 1px
Opacité : 20%
Couleur : Blanc (#ffffff)
Teinte basse
Hauteur : 1px
Opacité : 20%
Couleur : Référer au tableau des couleurs

Couche de finition

Il existe une couche de finition qui permet de faire un léger effet sur notre logo. Les caractéristiques de ce calques sont les suivantes :

Type: Radial
Angle: 45º
Couleur: Blanc (#FFFFFF)
Midpoint Location: 33%
Slider 1
Opacité: 10%
Localité: 0%
Slider 2
Opacité: 0%
Localité: 100%

Tableau des couleurs

Le tableau des couleurs Google est bien réalisé, mais pour moi il manque le code hexa de ces couleurs... 
Pour palier à ce problème il suffit d'installer un sélecteur de couleur pour votre navigateur, par exemple : http://www.colorzilla.com/

Color Picker

Export

Une fois votre logo créé, il suffit de l'exporter dans les différentes résolutions au format .png,
Pour se faire:

1. Aller dans File > Export PNG image...
2. Dans la section Export Area, sélectionner Page 
3. Et dans Image Size modifier la hauteur et la largeur avec Width et Height pour avoir 48
4. Cliquer ensuite sur Export As... pour sélectionner le fichier de destination qui doit être dans le chemin .../mipmap-mdpi/ic_launcher.png
5. Cliquer sur le bouton Export pour exporter le fichier.

Réitérer les étapes 3 à 5 en changeant la résolution en s'inspirant des données précédentes et en modifiant le chemin associé.

L'arborescence finale doit être :

/mipmap-ldpi/ic_launcher.png
/mipmap-mdpi/ic_launcher.png
/mipmap-hdpi/ic_launcher.png/mipmap-xhdpi/ic_launcher.png
/mipmap-xxhdpi/ic_launcher.png
/mipmap-xxxhdpi/ic_launcher.png
Si vous trouvez les étapes 3 à 5 fastidieuses, vous pouvez utiliser des scripts qui vont tout exporter pour vous! :)

Retouches (optionnel)

Une fois les différentes images créées, on peut les modifier avec un logiciel de retouche d'images matricielles pour effacer les soucis liés aux algorithmes d'export et notamment les effets de flous. Pour ça je vous conseille surtout de bien regarder les images ldpi et hdpi qui ne sont pas des multiples unitaires de notre résolution de base. Évidemment en tant que bon linuxien, je ne peux que vous conseiller l'utilisation de Gimp! ;)

C'est tout pour ce tuto, si vous avez des questions n'hésitez pas à les poser en commentaires.
Et si vous ne vous sentez pas l'âme d'un artiste, je peux aussi réaliser des logos sur demande!

Emission vidéo sur le Développeur Logiciel

Hello tout le monde,

J'avais pour idée depuis un moment de mettre en ligne des vidéos de vulgarisation sur différents sujets liés au numérique, à l'entreprise, au graphisme et tous les sujets qui me tiennent à cœur en lien avec la construction autour du numérique et du virtuel.

C'est chose faite avec cette première "émission Youtube" sur le thème du développeur logiciel.

Je compte en faire d'autres sur :

• Le Graphiste
• Les Langages de Programmation
• Le Génie Logiciel
• Les Startups
• Les Statuts Juridiques
• Les Systèmes d'Exploitation
• Les Compilateurs
• Les IDE
• Les Logiciels
• Le Logiciel Libre
• Les Applications Web
• Les Applications Mobiles
• Les Applications Embarquées
• Les Applications Desktop
• Les Applications Vidéoludiques 
• Les Méthodes de Gestion de Projets

(Peut être pas dans cet ordre)
Qu'en pensez-vous ?

Android Date-Time Picker

Pour ce nouvel article, parlons Library!

Déjà qu'est-ce qu'une Library, c'est un ensemble de routines sous forme de modules qui pourront être réutilisées pour créer une application, aussi appelé une bibliothèque de développement.

Android DateTime Picker est une bibliothèque Android permettant la sélection d'un objet Date depuis un même DalogFragment (Un DialogFragment est une boite de dialogue pouvant être affiché au sein de votre application Android.)

Le projet étant libre et sous licence Apache 2, il peut être réutilisé pour tous vos types de projets, même commerciaux.

Si vous voulez y ajouter des fonctionnalités, vous pouvez me laisser un commentaire ou une issue sur Github à l'adresse :

https://github.com/Kunzisoft/Android-SwitchDateTimePicker

Et bien sûr, si le projet vous plaît, une étoile ou un don peut être appréciable! ;)

Technologies de développement pour la création d'application mobile

Ce nouvel article fait le lien avec la vidéo que j'ai réalisé sur les technologies de développement que l'on peut utiliser pour réaliser son application mobile.

Pour les développements natifs :

Android avec le Java (ou le C++)
https://developer.android.com/studio/index.html

IOS avec l'Objective-C et le Swift
https://developer.apple.com/xcode/

Windows avec plusieurs technologies dont le C#
https://developer.microsoft.com/ 

Avantages

• Les programmes sont optimisés pour chaque plateforme
• Les documentations sont très complètes
• Il y a une grande communauté

Inconvénients

• Les applications ne sont pas mutli-plateformes
• Il faut apprendre plusieurs langages de programmation

 

Pour les développements multi-plateformes sur une base web : 

Web avec HTML, CSS, Javascript  
http://ionicframework.com/
https://jquerymobile.com/

Package des technologies web
http://phonegap.com/
https://cordova.apache.org/

Avantages

• Les applications sont mutli-plateformes
• Les programmes sont rapides à développer et à déployer
• Utilise les langages de programmation utilisés en web

Inconvénients

• Les programmes ne sont pas optimisés
• L'ergonomie n'est pas liée à l'appareil

Pour les développements semi-natifs et multi-plateformes procurant du code optimisé:

C#
https://www.xamarin.com/

Javascript, XML
https://facebook.github.io/react-native/

Avantages

• Le meilleur du natif pour l'optimisation et multi-plateformes
• Un seul langage de programmation à connaître

Inconvénients

• Les technologies sont encore jeunes
• Xamarin n'est utilisable que sur Windows
• La communauté se développe mais résoudre un problème très spécifique est plus compliqué

Voilà pour ce petit récapitulatif, sachez qu'il existe aussi des outils pour créer gratuitement une application, certains sites vous proposent des générateurs automatiques ou créateurs qui vous promettent de réaliser l'application de vos rêves sans programmation. Mais je ne suis pas du tout favorable à ce genres de choses car ces sites fournissent des outils souvent très peu modulables, non réellement gratuits ou très peu performants. Ils ne permettent souvent que l'accès à un compte facebook ou twitter, un flux RSS, ce que l'on fait déjà avec d'autres outils.

Le chemin viable pour réaliser gratuitement son application, surtout si elle est complexe, est de la réaliser soit même ou/et de la rendre communautaire. En effet, si l'idée est bonne, la communauté contribuera à l'élaboration du programme et son déploiement, l'application sera en plus maintenue et possédera un réseau de distribution.

Si vous désirez réaliser votre application, vous pouvez contacter Kunzisoft, nous aurons plaisir à vous répondre et vous proposer des solutions en accord avec vos contraintes. :)

Live avec OBS sur LiveCoding et Twitch

Nouvel article en rapport avec les vidéos.

Après avoir réalisé mes premières vidéos Youtube sur des exercices de la BattleDev, je me suis posé la question de savoir s'il y avait des sites pour des lives de coding comme pour le jeu avec twitch.

Et bien sachez que oui ça existe, LiveEdu.tv  ! Et il est parfaitement adapté à un petit logiciel open source et multiplateforme, disponible sur Linux, Mac et Windows, j'ai nommé : OBS ! :)

Open Broadcaster Software (OBS) est un logiciel extrêmement complet qui permet de créer des scènes et capturer des vidéos avec plusieurs périphériques vidéos, sons et images.
Il est possible de créer des scènes qui combinent plusieurs éléments, comme une webcam, un fond d'écran, de capturer le contenu d'une fenêtre de bureau ou encore une piste audio et de mixer tout ça en temps réel.

OBS permet de diffuser facilement les contenus sur des sites de streaming mais aussi de réaliser des vidéos pour les sauvegarder. Je dois avouer être sous le charme, il est extrêmement bien réalisé et permet même de mettre des filtres, couper des images à la volée ou faire des transitions entre plusieurs scènes que l'on aura créé.

Si vous voulez diffuser du contenu, de n'importe quel type, vous n'avez plus d'excuse. :) Je vais d'ailleurs utiliser LiveEdu un maximum afin que vous puissiez voir l'évolution des différents projets en temps réel!

RDV sur ce lien pour nous suivre!

Note : si vous souhaitez diffuser sur LiveEdu.tv,  le bitrate est limité à 2300, si vous n'indiquez pas la limitation vous serez déconnecté du serveur en plein live. Suivez donc bien le tutoriel présent à https://www.liveedu.tv/obs-guide-linux/

Pour installer OBS sur Linux (Ubuntu en 16.04)

Suivant votre distribution, les procédures peuvent différer, n'hésitez pas à demander conseil pour votre système. Ajout convertisseur vidéo ffmpeg

sudo apt-get install ffmpeg

Installation d'OBS à partir d'un dépôt tiers

sudo add-apt-repository ppa:obsproject/obs-studio

sudo apt-get update && sudo apt-get install obs-studio

Plugin obs-qtwebkit (https://github.com/bazukas/obs-qtwebkit)

Ce plugin est utile pour faire des intégrations de page web 

sudo apt-get install build-essential pkg-config qtbase5-dev libqt5webkit5-dev

wget https://github.com/bazukas/obs-qtwebkit/archive/master.zip

unzip master.zip

cd obs-qtwebkit-master

make

make install

rm -r .wget-hsts obs-qtwebkit-master master.zip

Ensuite redémarrage de OBS et dans sources il y a maintenant QtWebkit Browser! ;)

BattleDev

Dans ce nouvel article je vais vous parler de la BattleDev du blog du modérateur.

Il y a quelques jours, j'ai découvert un petit test d'évaluation sur l'algorithmie. Ce test est initialement prévu afin d'évaluer des développeurs pour des recrutements mais il est également possible d'y participer pour le fun (ce qui est le cas pour moi).

Je trouve le test intéressant dans le sens où il permet de se remémorer des algorithmes déjà vus pendant les études mais à présent oubliés.
Le test se déroule avec le partenariat de plusieurs entreprises du numérique et de région job où l'on doit résoudre 5 exercices pendant une durée de 2 heures. Il y a généralement deux tests par an, au mois de mars et au mois de novembre.

J'essaierai de faire tous les exercices, un peu comme un fil rouge. Vous aurez la possibilité de poser des questions et d'augmenter vos compétences (ainsi que les miennes) sur la programmation algorithmique.

Afin de vous expliquer le concept et le formatage des tests fournis par IsoGrad, j'ai réalisé une petite vidéo explicative sur le 1er exercice (et les suivants) de la session de mars 2016. Vous trouverez tous les exercices sur le site d'IsoGrad à l'adresse http://www.isograd.com/FR/solutionconcours.php

Les autres exercices sont accessibles sur Youtube
Mes corrections sont sur Github.

Les vidéos ne reflètent pas le temps que l'on doit mettre pour résoudre un exercice car le but est d'expliquer les démarches pour résoudre les problèmes. Mais il peut-être utile pour ceux d'entre vous désirant participer aux concours. N'hésitez pas à me donner vos impressions et à poser vos questions :)

La traduction normalisée avec Gettext

Pour cet article, je vais vous parler de l'internationalisation de contenu et plus précisément de la traduction liée au domaine du numérique et plus précisément d'un standard qui existe depuis 1995 : Gettext

Le principe est de fournir des fichiers de traduction pour chaque langue que l'on veut distribuer dans son programme et par extension son site web.

Dans le schéma ci-dessus, le foo.c correspond au fichier source de notre programme chargé des traductions (ici en C). Évidemment, dans un autre langage, le fichier sera différent : en php par exemple on peut assigner une classe Translation contenue dans Translation.php chargée de faire un appel aux traductions.

Le fichier .POT est un template contenant le texte avec la langue d'origine à traduire et permet de créer les différents fichiers .PO, le nom du fichier .POT n'a pas vraiment d'importance.
Les fichiers .PO contiennent la traduction de chaque texte dans la langue voulue, chaque fichier est par convention nommé avec le diminutif de la langue après traduction ou avec le diminutif de la langue et du pays concerné. (fr.po, fr_FR.po)
Dans l'exemple ci-dessus, il est fort probable que la langue originelle soit l'anglais et que les traductions découlent de celle-ci. Mais il est tout à fait possible de partir d'une autre langue d'origine.

La modification des fichiers .POT et .PO peuvent se faire aussi bien avec un éditeur de texte standard qu'avec un logiciel en ligne de commande ou graphique. Tout dépend de vos besoins, si vous souhaiter modifier ces fichiers manuellement vous pouvez regarder une des documentations qui en décrit l'architecture :
https://fr.opensuse.org/Equipe_de_traduction/Les_fichiers_PO_et_POT
Si vous préférez utiliser un logiciel avec interface graphique quelques logiciels gratuits existent :
https://userbase.kde.org/Lokalize
http://www.omegat.org/fr/omegat.html
https://poedit.net/
https://poeditor.com/ (gratuit pour utilisation avec moins de 1000 strings ou pour projets OpenSource)

Les fichiers .MO sont les fichiers binaires qui correspondent aux traductions, ils sont utilisés par le programme pour récupérer les chaînes à remplacer, ils n'ont pas forcément le nom de la langue car définissent plutôt un contexte.

Voilà pour la description générale du concept de Gettext mais ça ne nous indique pas vraiment comment récupérer les traductions pour les inclure dans notre programme. Pour ça, il faut passer par une bibliothèque qui sera liée à votre projet. Il en existe énormément pour chaque langage de programmation, je vous laisse le soin de chercher mais si vous ne trouvez pas, vous pouvez toujours en faire la demande en commentaire.

Tuto Gettext PHP avec Composer

Je vais vous expliquer comment utiliser une de ce bibliothèques très facile à implémenter en PHP.

Prérequis :

1. Un serveur PHP (tuto XAMPP bientôt disponible)
2. Composer

(Tuto vidéo bientôt disponible)

De base, je travaille avec Composer qui permet de récupérer des librairies très facilement, j'admets donc qu'il est déjà lié à votre projet.
Pour récupérer la librairie Gettext la plus connue, il suffit de faire dans le terminal :

$ composer require gettext/gettext 

La librairie permet de générer les fichiers .MO dont on aura besoin par la suite mais propose une alternative plutôt intéressante, la création d'un fichier .PHP qui contiendra les traductions sous forme d'objets. Cette seconde solution peut-être utilisée pour se passer de la bibliothèque si par exemple nous ne voulons pas l'inclure sur un environnement de production.

Page à traduire

Le fichier .PHP contenant le code HTML devra contenir les chaînes de caractères à traduire sous un format spécifique. Par exemple, pour une chaîne de caractères à traduire, j'utilise la notation :

<h1><?= __("Texte à traduire"); ?></h1>

à la place de :

<h1>Texte à traduire</h1>

La méthode __() est un raccourci pour la méthode gettext()

 

Génération des .POT et .PO

La génération des .POT et .PO se fait par l'utilisation d'un logiciel tiers ou de l'éditeur de texte. Vous pouvez partir de votre page à traduire en faisant un import. Cela permet de récupérer automatiquement les textes à traduire, il ne reste plus qu'à faire la traduction de chaque chaîne de caractères.

Génération des .MO

Les MO peuvent être générés avec les logiciels tiers mais je conseille de le faire avec la librairie en passant par la méthode :
use Gettext\Translations;
//import from a .po file:
$translations = Translations::fromPoFile('locales/fr.po');
//and export to a .mo file
$translations->toMoFile('Locale/fr/LC_MESSAGES/messages.mo');
Ceci permet de garder l'arborescence obligatoire pour les fichiers .MO.
En effet ils doivent être placés dans Locale/{langue}/LC_MESSAGES/

Remplacement du texte

Le remplacement du texte dans la page à traduire se fait avec le contexte et le domaine de la langue. En début de fichier :
<?php
use Gettext\GettextTranslator;
//Create the translator instance
$->setLanguage('gl');
$t->loadDomain('messages', 'Locale');
?>  
 Nous pouvons imaginer une liste déroulante qui change la valeur du langage de la page à la volée ou un détecteur de langue liée au navigateur.
Vous trouverez les sources (bientôt) d'un petit projet de traduction.

Liens utiles :

http://tassedecafe.org/fr/internationaliser-site-web-php-gettext-2878
https://github.com/oscarotero/Gettext