6avr/120

Entreprise, prenez moi en alternance !

Cette fois je ne vais pas vous parler de Blender, de LESS ou d'autres découvertes que j'aurais pu faire. Non comme vous avez lu le titre il s'agit de ma recherche pour une entreprise en Alternance.

Récemment je me suis inscrit chez IP Formation pour suivre leur formation de "Développeur web certifié Zend PHP et MySQL". Cette formation a pour but de former des développeur PHP/MySQL en validant à la fin du parcours par une certification Zend PHP, ainsi qu'une certification MySQL.

Zend Certified Engineer
Ces deux certifications permettent de confirmer le bon niveau du développeur les possédant.

Lors de mes recherches d'un travail de développeur et/ou intégrateur je me suis retrouvé face à des entreprises qui cherchent pour la plupart des gens compétent ayant déjà des compétences que l'on pourrait demander à un senior. Pourtant ces offres sont parfois même des offres de stage!
Bref je suis une personne qui apprend assez vite, et je suis motivé lorsqu'il s'agit de réaliser un projet réel. J'aime chercher des solutions qui répondent aux besoin du projet. C'est peut être ma partie préférée. Ainsi que l'adaptation de ces solutions.

Je ne suis pas pour réinventer la roue à chaque projet, je regarde donc les différents CMS pour tel ou tel type de projet. Je m'intéresse fortement à wordpress que je trouve assez polyvalent. Bien entendu prendre un CMS nous bloque dans sa logique, et on on n'est pas aussi libre que si on faisait nous même le site. Comme je n'aime pas réinventer la roue mais que parfois j'aime avoir le contrôle sur ce que je fait, j'ai commencé à regarder du côté des framework php. J'ai donc essayé CodeIgniter ainsi que FuelPHP.

                          

Bien entendu quand je n'ai pas de projet sous la main je continu à faire ma veille technologique, c'est grâce à celle-ci que j'ai découvert LESS dont j'ai fait deux sujets de mon blog : LESS, le js qui réinvente la façon de faire de la css ! et Utilisation de LESSphp et intégration dans wordpress.

logo LESS
Je regarde aussi en ce moment comment utiliser SASS et COMPASS en php.

J'en reviens maintenant au coeur du sujet : je cherche une entreprise pour de l'alternance.
J'ai toujours voulu apprendre d'avantage, chaque jour, mais je suis une personne qui préfère les choses concrètes. Du coup l'alternance est ce qui répond le mieux à mes attentes. L'alternance dans cette formation se fait ainsi : 1 semaine en cours et 3 semaines en entreprise. On est donc majoritairement en entreprise, ce qui permet de travailler sur des projets, et c'est bien sur ce que je préfère. A côté on a des cours permettant de déboucher sur une certification Zend, ce qui montre bien la qualité de la formation.

J'ai déjà de très bonne compétences en HTML/CSS que je peux mettre directement en application pour de l'intégration. J'ai de bonnes bases en PHP/MySQL qui me permettent de modifier des plugins ou de faire des petits sites dynamique. Bien entendu le but de l'alternance est de rapidement augmenter ces compétences afin de maitriser PHP/MySQL 😉

Je suis plus que motivé, je suis très curieux avec une très bonne capacité d'apprentissage (ça va très bien ensemble je vous assure ;)).

N'hésitez surtout pas à me contacter si vous souhaitez plus d'informations me concernant : baptistecaquot@gmail.com ou directement par téléphone au 06 77 96 16 38. Vous pouvez aussi très bien commenter cet article.

16mar/126

[archlinux] installer blender 2.62 et activer le rendu GPU pour cycles

Cette fois-ci je vais vous montrer comment installer blender (bon ok ça c'est simple), mais surtout comment utiliser le nouveau moteur de rendu apparu avec la version 2.61 : Cycles.
Ce moteur de rendu est assez impressionant, il est tojours en développement actif (notamment pour subvenir aux besoins du prochain open movie de la fondation blender : Mango ) mais si il est bien inclus dans la version stable de Blender c'est bien qu'il est assez stable pour être utilisé! Je n'ai d'ailleurs pas eu de problèmes en faisant mes test ;).

Donc commençons par installer Blender :

yaourt -S blender

Ce que j'aime beaucoup avec Archlinux, c'est que les dépôts sont mis à jour rapidement, on se retrouve donc bien avec la dernière version de blender :).

splash screen blender 2.62

splash screen blender 2.62

On ne va pas se mentir, l'accélération GPU n'est disponible pour le moment que pour les cartes Nvidia car c'est basé sur CUDA. Mais l'espoir est là pour les possesseurs de carte AMD, les progrès pour l'utilisation d'OpenCL avancent pour pouvoir utiliser n'importe quelque carte.
Mais comme je suis un heureux possesseur d'une carte Nvida, et que je recommande cette marque, nous allons pouvoir utiliser CUDA, pour cela nous devons juste installer le toolkit :

yaourt -S cuda-toolkit

Voila c'est tout ce qu'il faut pour utiliser le GPU, mais si c'était aussi simple je n'aurais pas fait un article. Parce que si vous ouvrez votre blender maintenant et que vous tentez de chercher l'option pour passer du CPU au GPU vous ne la trouverez pas!

Pour cela il faut dire à blender d'utiliser CUDA, nous allons donc ouvrir la page de préférence : "ctrl + alt + u". Vous cliquez sur l'onglet System, en bas à gauche vous devriez voir "Compute Device:" avec plusieurs choix. Il faut juste cliquer sur CUDA et nous aurons ainsi le choix entre CPU et GPU avec Cycles.
blender user preferences

Tant que nous avons cette fenêtre ouverte nous allons en profiter pour aller dans l'onglet "Interface" et cliquer sur "Rotate Around Selection", comme son nom l'indique lorsque l'on tournera dans l'espace, cela se fera maintenant autour de l'objet. Cette manière de faire me parait logique, si pour vous cela ne l'est pas vous n'êtes bien entendu pas obligé de cliquer dessus ^^.
rotate around selection

Vous pouvez sauvegarder votre configuration, mais attention en faisant cela vous sauvegardez toutes les modifications que vous avez faites dans blender ! Je vous conseil donc de le faire seulement avec un nouveau fichier blender, afin de garder notre cube ainsi que notre lampe de base comme ils sont.

Maintenant nous allons simple dire à blender d'utiliser cycles plutôt que le moteur de base (qui est très bon aussi 😉 ).
Il faut pour se faire cliquer dans la barre du haut sur Blender Render, cela nous donne un menu déroulant et choisir Cycles Render.
Cycles Render

Ensuite dans le menu principal (à droite) il faut se rendre sur l'onglet Render (l'icone de l'appareil photo) et dans device nous pouvons choisir GPU Compute afin d'utiliser la carte graphique pour les calculs de rendu.
render gpu

Bien sur après avoir fait ces changement vous pouvez à nouveau enregistrer ces préférences : "ctrl + alt + u" et save changes.

Une chose que j’apprécie avec ce moteur de rendu c'est de pouvoir l'utiliser pour prévisualiser le rendu final mais cela en temps réel. Vous pouvez en effet dans une fenêtre de vue 3D avoir une prévisualisation continue de vos modifications, pour cela il suffit de mettre Rendered dans le viewport shading.
rendered shading
J'ai fait un petit test afin de voir la différence de temps de rendu entre GPU et CPU. Bien entendu c'est un test basique, j'ai juste changé le sample de rendu à 254, c'est un peu inutile vu qu'à partir d'environ 35 samples le rendu était déjà proche du résultat final. Mais je voulais tester sur quelque chose de plus long pour avoir un comparatif plus fiable. Il faudrait se pencher un peu plus sur les réglages pour avoir quelque chose de correct, mais bon ça reste un test de rapidité alors on s'en fou un peu ^^.
Voici le résultat avec le rendu GPU (vraiment très peu de différence entre rendu CPU et GPU, quelques pixels) :


Cliquez sur l'image pour avoir la taille réelle du rendu ;).

Dans cette image nous pouvons voir Suzanne, la tête de singe de Blender, qui est un peu l'équivalent emblématique de la teapot de 3dsmax. Suzanne s'est vue attribuée un matériaux mixe entre diffuse et emission, afin d'essayé un objet lumineux. Il y a aussi trois boules avec différents matériaux : glossy, diffuse et glass (de gauche à droite). Comme lumière, à part Suzanne, il y a un "sun".

Le temps de rendu avec le CPU est de : 12 minutes et 14 secondes.
Le temps de rendu avec le GPU est de : 3 minutes, 7 secondes et 49 centièmes.
Le temps de rendu est donc près de 4 fois plus rapide avec le GPU !

9mar/121

[astuce] garder en mémoire votre ftp avec nautilus

Pour les utilisateurs de linux, et plus particulièrement ceux utilisant Gnome, je vais vous donner une petite astuce pour vous connecter à votre ftp via nautilus, mais surtout je vais vous montrer comment garder cela en mémoire sans devoir à chaque montage remettre vos identifiants.

En effet je pense que la plupart savent déjà comment se connecter à son ftp par nautilus, mais peut être que comme moi, vous vous êtes dit "j'en ai marre de mettre à chaque fois mon identifiant, mot de passe etc...".
Jusqu’à aujourd'hui  je ne m'était pas réellement penché dessus, tout simplement car je pensais que l'on devait forcément passer par un script.

Aujourd'hui je me suis dit "aller on va mettre les mains dans le camboui et faire ce script". J'ai donc fait quelque recherches et je suis finalement tombé sur une solution beaucoup plus simple, qui peut paraître évidente maintenant que je la connais, mais qui apparemment ne l'était pas assez pour que je la trouve tout seul. Il se peut que plusieurs personnes soient dans mon cas, c'est pourquoi j'écris cet article, afin que ce cette astuce puisse servir d'autres personnes.

Mais au cas où vous ne sachiez pas comment monter votre serveur ftp via nautilus je vais vous montrer comment faire. Ceci a l'avantage de monter votre ftp comme si c'était un simple disque dur, c'est donc très pratique pour manipuler les fichiers de votre serveur, utiliser n'importe quel éditeur de texte qui n'a pas forcément de plugin ftp intégré (coucou sublime text 2). Cette fonctionnalité me manque d'ailleurs terriblement sur windows, j'ai essayé de trouver des logiciels de remplacement, mais je n'ai pas du tout ressenti la même transparence qu'a cette solution.

Bref, on ouvre nautilus, on clic sur ficher, "Se connecter à un serveur..." et cela nous ouvre une fenêtre de configuration.

configuration nautilus ftp

 

On n'oublie pas de changer le type de serveur et mettre "FTP (avec identification)"  et on remplis les informations demandées. On coche "Se souvenir de ce mot de passe" si on ne veut pas devoir retaper son mot de passe à chaque connexion (jusque la c'est logique ^^).
On clic sur Se connecter une fois fait, cela nous ouvre une nouvelle fenêtre nautilus avec notre ftp ouvert (à l'endroit désiré si on a changé le dossier lors de la configuration). A noter que ce ftp est affiché dans la partie Réseau.

Maintenant nous allons voir comment garder ce ftp dans nos raccourci nautilus, afin d'avoir juste à cliquer sur ce raccourci pour monter à nouveau notre ftp sans avoir à re rentrer toutes nos infos (c'est le but de cet article 😉 ).
Pour cela il suffit de faire un clic droit  sur le ftp et de mettre "Ajouter un signet". Et oui c'est aussi simple que cela!

 

nautilus Ajouter un signet

Vous aurez donc un raccourci dans votre panneau latéral que vous pourrez renommer en faisant un clic droit dessus. Le mien s'appelle maintenant EuroWH puisque je suis chez eux (pub inside ^^).

Tout cela était vraiment simple, mais on n'y pense pas forcément, d'ou l'intérêt d'en faire un petit article :)

ps : bien entendu pour le transfert de fichier, autre que ponctuel, je vous conseil de prendre un "vrai" client ftp 😉

3mar/124

Utilisation de LESSphp et intégration dans wordpress

MaJ : Changement de méthode pour insérer le thème.

Comme je vous l'avait promis je vais faire des articles plus régulièrement (enfin plus souvent, ça ne sera pas forcément régulier ^^).

Je vais donc cette fois-ci vous montrer comment intégré LESS du côté serveur, pour ne plus être dépendant du côté client (avec le javascript) mais aussi pour ne pas alourdir plus que nécessaire le site.

Pour cela nous allons utiliser LESSphp qui permet de compiler LESS via php (logique vu son nom). Sinon il reste bien sur la possibilité d'utiliser node.js mais cela n'est pas disponible sur les serveurs mutualisé (à ma connaissance), le php par contre est utilisable (quasi) partout.

Il y a plusieurs méthodes proposé par ce compilateur, mais on va s'intéressé ici à la compilation automatique de tous nos fichier LESS dans un seul fichier css avec un système de cache.

Ceci n'est pas la méthode proposé dans la doc de LESSphp, du moins ce n'est pas le même code. Pourquoi? Tout simplement car j'ai essayé avec wordpress et je n'ai pas réussi à faire fonctionner cette fonctionnalité avec le code proposé dans la doc. Du coup j'ai cherché une autre méthode, et celle-ci me parait d'ailleurs plus efficace.

Ce code je l'ai donc pris ici : http://net.tutsplus.com/tutorials/php/how-to-squeeze-the-most-out-of-less/

N'hésitez pas à aller sur cette page, ce n'est pas uniquement en rapport avec LESSphp mais cela parle de LESS en général avec une sorte de mini-tuto.

Nous allons voir comment intégré tout cela à wordpress, bien entendu la technique étant la même pour n'importe quel site internet vous n'aurez pas de mal à adapter cela à vos besoin.

Mon thème wordpress se présente comme cela :

dossier thème wordpress

Comme vous pouvez le voir j'ai un dossier lessphp où il y a les fichiers que vous téléchargerez ici : http://leafo.net/lessphp/#download

Ensuite j'ai un dossier stylesheets où je mets tous mes fichiers concernant less ou css. Le fichier styles.php est celui qui va nous permettre de compiler les fichiers .less en .css.

Bien entendu toute cette arborescence n'est pas obligatoire, vous vous arrangez comme vous voulez, mais j'aime bien quand c'est propre.

Maintenant nous allons voir le contenu de ce fichier styles.php :

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler");
else ob_start(); 

$files = array(
    'config.less',
    'app.less',
    'global.less',
    'typography.less',
    'grid.less',
    'ui.less',
    'forms.less',
    'orbit.less',
    'reveal.less',
    'mobile.less'

); 

$time = mktime(0,0,0,21,5,1980);
$cache = 'cache.css';  

foreach($files as $file) {
    $fileTime = filemtime($file);  

    if($fileTime > $time) {
        $time = $fileTime;
    }
}  

if(file_exists($cache)) {
    $cacheTime = filemtime($cache);
    if($cacheTime < $time) {
        $time = $cacheTime;
        $recache = true;
    } else {
        $recache = false;
    }
} else {
    $recache = true;
}  

if(!$recache && isset($_SERVER['If-Modified-Since']) && strtotime($_SERVER['If-Modified-Since']) >= $time){
    header("HTTP/1.0 304 Not Modified");
} else {
    header('Content-type: text/css');
    header('Last-Modified: ' . gmdate("D, d M Y H:i:s",$time) . " GMT");  

    if($recache) {
        require '../lessphp/lessc.inc.php';
        $lc = new lessc();  

        $css = '';  

        foreach($files as $file){
            $css .= file_get_contents($file);
        }  

        $css = $lc->parse($css);
        file_put_contents($cache, $css);
        echo $css;
    } else {
        readfile($cache);
    }
}
?>

Alors qu'avons nous là? La toute première partie permet de zipper le fichier css qui sera fait.

Ensuite nous avons la partie dont vous devrez vous souciez : la déclaration des fichiers à compiler. Cela passe par un array, rien de plus simple.

Ensuite pour chaque fichier on vérifie qu'il n'a pas été modifié depuis la dernière mise en cache, si cela a été modifié on lance donc la compilation.

if($recache) {
        require '../lessphp/lessc.inc.php';
        $lc = new lessc();

C'est ici dans le require (ligne 49 dans mon fichier) que nous allons spécifier le chemin vers la librairie LESSphp : lessc.inc.php. Dans mon exemple c'est dans le dossier lessphp d'ou le chemin '../lessphp/less.inc.php'.

Maintenant que nous avons fait tout cela nous allons pouvoir dire à notre header.php d'aller exécuter ce styles.php. Pour cela rien de plus simple, à la place où vous auriez mis votre lien vers votre style.css vous mettez cela :

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/stylesheets/styles.php">

Cela aura pour but d'aller activer le fichier styles.php qui se trouve dans mon dossier stylesheets (d'ou le chemin). En faisant cela j'ai découvert qu'il était possible de spécifier un fichier php comme feuille de style, je ne savais pas que cela était possible ^^.

MaJ : autre manière d'intégrer styles.php

Nous allons voir une autre manière plus élégante d'indiquer le chemin de styles.php. Cette façon de faire je l'ai trouvé ici : http://www.geekpress.fr/wordpress/astuce/modifier-dossier-css-principal-theme-wordpress-159/
Il s'agit ni plus ni moins de faire un filtre à la fonction bloginfo(‘stylesheet_url’) pour qu'elle renvoie directement sur styles.php.
Pour ce faire nous allons ouvrir functions.php et ajouter cette fonction :

function stylesheet_uri_filter($stylesheet_uri, $stylesheet_dir_uri) {
	return $stylesheet_dir_uri.'/stylesheets/styles.php';
}
add_filter('stylesheet_uri', 'stylesheet_uri_filter', 10, 2);

Bien sur vous devez adapter cela à la configuration de votre chemin.

Nous devons ensuite ajouter le lien vers notre styles.php, la manière est donc simplifiée grâce à ce bout de code que nous venons de mettre.
A rajouter dans header.php, la où vous mettriez votre lien vers votre css :

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">

MaJ : garder un fichier style.css à la racine de votre thème

Encore une chose que j'ai découvert par la suite de cet article, "One does not simply delete style.css" : il ne faut surtout pas supprimer de style.css à la racine de votre thème. Ce fichier sert à la déclaration de votre thème avec les différentes infos (auteur, url etc...) et apparemment on ne peut pas déplacer ce fichier ni le renommer...

Fin des MaJ 😉

Et voila nous avons finis, vous pouvez donc dès à présent utiliser ce compileur php pour vos projets.

Au niveau des avantages il y a bien sur de faire cela côté serveur plutôt que client. Il y a aussi le fait de pouvoir organiser ses fichiers sans se soucier du nombre vu que LESSphp vous les compilera en un seul. Cela permet de mieux pouvoir s'organiser et ne pas avoir une seule feuille de 3k lignes ^^.

Au niveau des inconvénients je vois surtout le fait d'utiliser des ressources serveur. Mais cela est moindre du fait de la mise en cache si rien n'est changé.

Si vous ne voulez pas de fichier less sur votre serveur de production vous pouvez utiliser la ligne de commande pour utiliser LESSphp comme compilateur, et ensuite récupérer le fichier css produit. Cela perd l'intérêt de LESSphp et si c'est vraiment ce que vous souhaitez je vous conseil plutôt de prendre un compilateur de votre distribution (cherchez lessc) ou tout simplement des applications qui permettent de compiler une fois le fichier sauvegarder. C'est le cas de la très connue less.app pour mac, sinon il y a simpLESS pour toutes plateforme : http://wearekiss.com/simpless

Vous vous en doutez surement, moi j'ai fait le choix de garder LESSphp pour mes projets. Cela ne fait que quelques jours que je l'utilise, j'espère qu'il n'y aura pas de problèmes de compilations, sinon je me rabattrais sur la solution js pour le dev et ensuite un compilateur pour la prod. (pour le moment aucuns problèmes)

29fév/122

Utiliser github avec Archlinux et sublime text 2 [noob]

Cela fait très longtemps que je n'ai pas écrit d'articles, j'ai décidé de m'y remettre un peu.
Pour cela je vais vous faire part de mes découvertes et avancées dans mon workflow, et en ce moment je m'intéresse un peu plus à git et surtout github. Voyant beaucoup de projets intéressant sur cette plateforme je me suis dit qu'il fallait que je test.
Depuis un petit moment je test des framework css pour faire du responsive webdesign. Je suis tombé sur Foundation et j'ai trouvé un thème wordpress basé dessus ainsi que sur boilerplate : https://github.com/drewsymo/Foundation.
Comme vous pouvez le remarquer ce thème est hébergé sur github, ce qui tombe bien. Je vous ai parlé de LESS dans un autre article, et j'aimerais donner une bonne touche de LESS à ce thème.

Mais dans cet article il sera question de comment utilisé github de façon basique (j'apprends moi même). Cet article va me servir aussi de mémo personnel, c'est pourquoi j'aborde github avec Archlinux.

La doc utilisée principalement : http://help.github.com/linux-set-up-git/
Je vais adapté cette doc pour Archlinux au niveau de l'installation principalement, le reste étant pareil suivant les distributions.

Nous commençons donc par installer git et sa dépendance pour utiliser git-gui (vous n'êtes pas obliger de l'installer comme nous n'allons pas l'utiliser).
Je vous invite fortement à utiliser yaourt, qui est un outil qui rajoute des fonctionnalités à pacman : http://archlinux.fr/yaourt.
Bien sur si vous ne souaitez pas installer yaourt remplacez toutes les commandes yaourt par pacman, n'oubliez pas de passer en root dans ce cas pour installer des programmes ;).

yaourt -S git tk

Ensuite nous vérifier que nous n'avons pas de clés ssh, et ensuite en créer pour utiliser github.

cd ~/.ssh

si vous avez comme message
bash: cd: /home/baptarch/.ssh: Aucun fichier ou dossier de ce type
Cela veut dire que vous n'avez pas de clés.
Si vous en avez déjà, soit vous savez ce que vous faites et dans ce cas je me demande pourquoi vous êtes venu sur cet article, soit vous faites ce que la doc vous demande, c'est à dire faire un backup des clés existentes. je suppose que vous savez déjà faire si vous êtes sur archlinux (juste déplacer les fichiers dans un dossier de backup ^^)

Maintenant nous devons créer des clés ssh pour pouvoir se connecter ensuite à github. (ces clés peuvent servir pour autre choses bien sur, mais là il est question de les utiliser pour github 😉 )

bien entendu nous devons avoir un programme pour créer ces clés :

yaourt -S openssh

La création de clés se fait comme suit : (n'oubliez pas de changer d'adresse mail, celle-ci étant la mienne ^^)

ssh-keygen -t rsa -C "baptistecaquot@gmail.com"

Appuyez sur entrée lorsque l'on vous demande où mettre la clé, elle sera ainsi créée dans /home/votre_nom/.ssh/id_rsa il y aura aussi un id_rsa.pub de créé.
Ensuite vous avez une passphrase à rentrer, c'est comme un mot de passe mais en phrase ^^'. N'hésitez pas à utiliser des espaces, cela fonctionne. Bien entendu je vous encourage à mettre une phrase que vous pourrez vous rappelez facilement, et ne vous inquiétez pas avec linux on a un petit programme qui garde tout ça en tête : ssh-agent.

Maintenant que nous avons notre clé nous allons pouvoir l'indiquer à github pour qu'il puisse nous reconnaître.
Dans l'account settings de github, il faut aller dans SSH Keys, cliquer sur "add new ssh key".
Ouvrez votre clé id_rsa.pub avec gedit (ou autre, le principe est de copier la clé).
Collez la clé dans key (dans titre mettez ce que vous voulez, personnellement j'ai mis baptiste archlinux, ayant déjà une clé que j'utilise pour windows, je veux les distinguer)

Nous allons maintenant tester l'accès à github et voir si nous avons bien fait les étapes précédentes.

ssh -T git@github.com

A ce moment vous aurez "The authenticity of host 'github.com (207.97.227.239)' can't be established." cela veut juste dire qu'il ne connait pas github, dites yes et github sera ainsi dans les hôtes connus.
Votre passphrase vous sera demandez, et si tout se passe bien vous aurez le droit à un "Hi baptwit! You've successfully authenticated, but GitHub does not provide shell access." (avec bien sur le nom de votre compte à la place de baptwit).

Bon maintenant si vous avez fait comme moi pendant la rédaction de cet article, que vous vous êtes dit "je vais changer de passphrase" ou autre et que vous décidez alors de supprimer votre dossier .ssh afin de recommencer et que vous avez déjà fait vos clés, fait le test github, vous aurez surement ce message : "Agent admitted failure to sign using the key. Permission denied (publickey)."
Dans ce cas une fois que vous aurez changer la clé (ida_rsa.pub) dans github il vous suffit de faire ssh-add et tout reviendra dans l'ordre :) (on vous redemande la passphrase bien entendu)

Bon maintenant nous allons configurer git (bien entendu en changeant les infos, à moins que vous ne vouliez vous faire passer pour moi!) :

git config --global user.name "Baptiste Caquot"
git config --global user.email "baptistecaquot@gmail.com"

Ensuite configurez le token github (pour pouvoir utiliser des outils qui n'utilisent pas ssh pour se connecter à github, pour la suite cela ne sera pas très utile, mais au cas où vous souaitiez changer la façon dont vous utilisez github cela peut devenir utile, et comme ce n'est que deux petite ligne qui ne coûte rien, autant le faire de suite !) (pareil, changez l'user)

git config --global github.user baptwit
git config --global github.token votretoken

Bon maintenant nous allons passer aux choses sérieuses!

Commençons la création d'un "repository" ou "repo", un répertoire qui nous permettra d'acceuillir notre projet.
Ici rien de spécial concernant archlinux, tout ce que je vais écrire viens de http://help.github.com/create-a-repo/ et je vais juste résumer ici. N'hésitez pas à aller sur la doc si je ne suis pas assez compréhensible ^^.

Tout d'abord on fait un nouveau repo sur github ("new repositery" sur la page de votre profil).
On remplis les infos demandées, pour ma part je vais juste mettre test-blog.
Cela nous amène sur une page qui résume ce que l'on doit faire.
Vous pouvez passer puisque le but de cet article est de vous montrer comment faire.

Nous devons créer un dossier sur notre ordinateur pour accueillir le projet. Vous pouvez le faire où vous voulez, pour ma part j'ai décidé que je mettrais tous mes repo de github dans un dossier github. Dans ce dossier j'ai donc fait un dossier test-blog.
Avec la ligne de commande il faut vous placez dans votre dossier nouvellement créé.

cd chemin/de/votre/dossier

Une fois dans ce dossier, nous allons initialiser notre git afin de dire "ce dossier test-blog est un repo". Pour cela :

git init

ce qui nous donne :

Initialized empty Git repository in /home/baptarch/github/test-blog/.git/

Cela nous créé un dossier caché le .git qui contiendra toutes les infos git en rapport avec notre dossier test-blog.
Maintenant nous allons dire que ce dossier est lier à celui sur github :
git remote add origin git@github.com:baptwit/test-blog.git
(en changeant bien sur baptwit par votre username et test-blog par le nom de votre projet).

Nous allons maintenant créer un fichier README tout simple. Ce fichier sera affiché sur la page de votre projet en accueil (en dessous de la liste des fichiers). Vous pouvez faire une mise en page pour que github n'affiche pas du simple texte, les markups utilisés par github : https://github.com/github/markup
Vous créez comme vous souhaitez votre fichier README, la doc met un simple :

touch README

Ouvrez votre fichier et mettez y un peu de texte, si vous voulez continuer avec la ligne de commande :

nano README

Maintenant nous allons dire à git que le fichier README doit être pris en compte pour notre projet :

git add README

ensuite :

git commit README -m 'premier commit'

Cela dit que le fichier README a été modifié (bon ok c'est la 1ère fois qu'il est ajouté, mais ce sera la même commande plus tard) et permet d'associer ce commit un message explicatif (la c'est premier commit)
On envoie tout ça à l'origine, qui est le repo sur github.

git push origin master

premier commit

Mon 1er commit


Maintenant vous pouvez commencer à utiliser github, les commandes sont répertoriées ici http://help.github.com/git-cheat-sheets/ et bien entendu je vous invite à chercher de la doc la dessus, mais avec le peu de commande que l'on a vu on peut déjà s'occuper de son repo fraichement créé.

Si comme moi vous avez déjà un repo sur github, que vous l'aviez créé sur windows (ou ailleurs) et que vous comptez l'utiliser il va falloir le récupérer.
Pour cela rien de plus simple :

git clone git@github.com:baptwit/LESS-functions.git

Bien entendu vous changer l'username ainsi que le nom de votre projet 😉
Cette commande vous fera un nouveau dossier contenant tout votre projet, vous pourrez ensuite l'utiliser comme si vous veniez de le créer.

Pour faire un fork d'un projet, lorsque vous êtes sur la page d'un projet que vous souaitez forker, cliquez juste sur fork, cela mettra ce projet dans votre compte, vous pourrez ensuite faire un git clone pour l'avoir sur votre ordinateur.

Je vais vous montrer comment j'ai choisi de travailler avec git.
Beaucoup s'intéressent en ce moment à sublime text 2 et je fait partis de ces personnes.

Pour l'installer sur archlinux, rien de plus simple (merci à AUR) il suffit de faire :

yaourt -S sublime-text-dev

Cette fois yaourt est indispensable puisqu'il récupère sur AUR, ce que ne permet pas pacman, ou alors il faudra le faire manuellement.

Une fois sublime text 2 installé on va lui ajouter un système d'installation de plugin, pour se faire on utilise la doc ici.
Dans cette doc on nous demande d'ouvrir le terminal en faisant "ctrl + `", avec un clavier français pour le faire il faut appuyer sur ctrl + alt gr + la touche 7.
Dans ce terminal on recopie cette commande :

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Si cela ne fonctionne pas peut être que la méthode à changée et je vous invite à aller sur la documentation.

On redémarre sublime text 2, on appuie sur "ctrl + maj + p" et cela nous ouvre une boite de recherche de fonctions de sublime text 2, on cherche (en écrivant) la ligne package control : package install, on appuie sur entrée et on installe le plugin git qui aura pour but d'installer ce plugin.

Une fois que ceci est installé on à accès à git directement dans sublime text 2, on utilise la commande en ouvrant la recherche de fonctions (ctrl + maj + p) et on tape git + le nom de la commande git.

Plus d'infos concernant ce plugin peuvent se trouver sur le wiki du plugin : https://github.com/kemayo/sublime-text-2-git/wiki

Je m'en vais continuer à apprendre encore plus sur git et github, et je vais aussi continuer à "LESSisé" le thème wordpress dont je vous ai parlé. Je ferais un petit article une fois que j'aurais finis avec ça.

Si vous voyez des inexactitude dans cet article (je commence seulement à essayer github, il y a donc peut être) n'hésitez pas à m'en faire part dans les commentaires.

2mai/111

LESS, le js qui réinvente la façon de faire de la css !

logo LESS

Hier j'ai découvert, à ma grande satisfaction l'existence de LESS, une nouvelle façon de faire de la css.

Pour ma part quand je pense à la css, je pense à quelque chose de très répétitif parfois, qui est dû au manque d'automatisation de certaines tâches. C'est la qu'intervient LESS. Avec on peut faire de la css dynamiquement, avec des variables et des fonctions.

Avant de voir tout cela je vais vous montrer comment intégrer tout ça sur votre site internet.

Tout d'abord il y a l'intégration coté serveur grâce à node.js, si cela vous intéresse je vous laisse aller sur le site pour voir comment faire : LESS server-side usage.

Ici je vais vous montrer comment l'intégrer coté client, grâce a less.js. Vous devez faire un lien vers votre fichier dont l'extension sera .less et non .css ainsi qu'un lien vers less.js:

<link rel="stylesheet/less" type="text/css" href="styles.less">

<script src="less.js" type="text/javascript"></script>

Il ne faut pas oublier que lorsque vous télécharger le js il ressemble à less-1.0.41.min.js, alors soit vous changer son nom en less.js soit vous changer le lien (personnellement j'ai changé le lien, comme ça je connais quelle version de less.js j'utilise).

Une autre manière de faire est de compiler soit même le code, j'ai trouvé ca pour os X : http://incident57.com/less/, un plugin pour coda (toujours os X) http://incident57.com/coda/index2.php. Bon je n'utilise pas os X, mais sur archlinux il m'a suffit de faire un ptit "yaourt less css" et trouver un compilateur, il en existe peut être ailleurs aussi, je vous laisse chercher au cas où la solution javascript ne vous plait pas.

Maintenant que cela est fait on peut passer au fun et commencer à voir ce que LESS apporte.

Et comme son nom l'indique on a besoin de moins de ligne de code et donc de moins de temps pour faire ce que l'on souhaite. La première chose qui me permet de dire ça c'est la possibilité d'utiliser des variables, et comme un exemple est plus parlant que du blabla :

@vert: #BAC99F;
@ombre-marron: #8A8966;
@jaune-orange: #F2B530;
.pixel {
	font-family: "MunroRegular", Calibri, "Helvetica Neue", Arial, sans-serif;	
	font-weight: bold;
	text-shadow: 1px 1px 0 #000000, 2px 2px 0 @ombre-marron, 3px 3px 0 @ombre-marron, 4px 4px 0 @ombre-marron, 5px 5px 0 @ombre-marron;
	color: @vert;
}

Ce qui nous donne en css normale :

.pixel {
	font-family: "MunroRegular", Calibri, "Helvetica Neue", Arial, sans-serif;	
	font-weight: bold;
	text-shadow: 1px 1px 0 #000000, 2px 2px 0 #8A8966, 3px 3px 0 #8A8966, 4px 4px 0 #8A8966, 5px 5px 0 #8A8966;
	color: #BAC99F;
}

En mettant de bon noms de variables on peut ainsi rendre le code plus compréhensible (à moins que vous ne compreniez l'hexadécimal...).

Mais si il n'y avait que cette fonctionnalité cela n'aurait peut être pas valu le coup de s'y intéresser. Laissez-moi vous montrer une des fonctionnalité qui m'a fait penser à "je le veux!".
Comme d'habitude mieux vaut un exemple, pour cela je vais reprendre mon bout de code, et suivez bien car cette fois je vais vous montrer deux fonctionnalités !

.logo a,
nav a{	
	.pixel;
	font-size: 1.5em;	

	&amp;:hover{
		text-decoration:none;
		color: @jaune-orange;
	}
}

Et oui on peut réutiliser les propriétés d'une classe dans une autre ! On peut aussi ajouter un pseudo-élément, ce qui nous permet d'éviter de devoir doubler les propriétés (une sans le hover, une avec le hover).

Enfin j'aimerais vous parler de la fonctionnalité qui m'a le plus enthousiasmé : la possibilité d'imbriquer ! Cette fois je vais prendre un exemple du site officiel :

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

Ce qui donne en css :

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

Personnellement je trouve cette façon de faire bien plus intuitive et qui respecte plus facilement la hiérarchie de votre page.

Maintenant que vous avez un petit aperçu, je pense qu'il est temps d'aller tester tout ça, c'est par ici que ça se passe : http://lesscss.org/, et vous trouverez d'autres fonctionnalités telle qu'assombrir une couleur, la désaturer

Le seul reproche que je peux lui faire, c'est que si on fait une erreur dans son code ça casse quasiment tout, m'enfin c'est pas plus mal ça permet de repérer directement si on a fait une erreur.

ps : vous pouvez importer de cette manière : @import "lib.less"; (voir importer un .css), malheureusement je ne sais pas pourquoi je n'ai pas réussis à le faire avec une url externe... mais bon il suffit de le faire dans une css normale et voila.

18avr/110

Blender 2.57, première version stable de la branche 2.5x

MàJ: La version 2.57a est sortie aujourd'hui (22/04), cette version est la pour corriger quelques bug présent dans la 2.57, le lien de  téléchargement n'a pas changé.

Cela faisait longtemps que je n'aavais pas écrit d'articles sur mon blog, quoi de mieux pour reprendre que de vous présenter la nouvelle version de mon logiciel préféré de modélisation 3D : Blender.

Le 13 avril, la première version stable de la branche 2.5x de Blender est sortie.

Cette version est la plus grosse évolution (à ma connaissance) que Blender ai jamais connue.
Pour se rendre compte il faut savoir que cette branche (la 2.5) a commencé en 2007, pendant que les dernières version de la branche 2.4x continuaient encore d'être développée.
Cette version fut crée afin de faire un nouveau départ. Il s'agit là de refaire quasiment tout le code de Blender, de repenser l'UI (user interface).
En gros nous avons le droit à un tout nouveau Blender qui ne ressemble que peu à l'ancien.

splash screen de blender 2.57

splash screen de blender 2.57

interface par défaut au lancement

blender 2.49b, l'ancienne version

blender 2.49b, l'ancienne version

outliner + menu principal

outliner + menu principal

La plus grosse différence que l'on voit avec cette nouvelle interface est la prise en compte du nouveau standard concernant les résolutions d'écrans qui sont quasiment tous passé au 16/10eme ou 16/9eme.

Avec un écran plus large, on voit que la disposition du menu principal est devenue verticale et non plus horizontale.

Le outliner est aussi ajouté de base au dessus du menu, afin de retrouver plus vite les objets qui sont dans la scène.

On notera aussi un object tool qui se trouve sur la gauche de chaque vue 3d, et que l'on peut faire apparaître et disparaître en appuyant sur la touche T.

Maintenant que le plus flagrant est passé je vais vous faire une petite liste des nouveautés qui me paraissent les plus intéréssantes. Pour une liste plus complète vous pouvez aller sur ce lien : http://www.blender.org/development/release-logs/blender-257/

Tout d'abord comme je vous l'ai dit il y a l'interface qui a été revue entièrement, d'un aspect plus sombre mais aussi plus professionnelle (à mon avis).

Une des possibilités de la nouvelles interface est aussi de proposer plusieurs fenêtres pour gérer blender, un peu à la façcon de gimp. Cela s'avère très utile lorsque l'on a deux écrans, je l'utilise en général pour avoir une vue de la caméra sur mon écran de droite.

Pour faire une nouvelle fenêtre il suffit de cloner une des vue, pour cela il suffit simplement d'aller en haut a droite de la vue, de cliquer sur la hachure tout en appuyant sur la touche maj.

exemple de plusieurs fenêtres

exemple de plusieurs fenêtres

Le sculpt mod a été revue et est désormais capable d'afficher beaucoup de faces sans ramer, on peut dire qu'il se rapproche de la qualité de Zbrush à ce niveau la.

image sculpt blender

exemple de sculpt (45 millions de polygones)

Désormais "tout" est animable avec les f-curve, et il y a maintenant des modifiers pour ces courbes, tandis qu'avant cela était réservé aux objets.

L'une des grandes innovation est le simulateur de fumée, qui n'existait pas auparavant. On peut aussi faire le rapprochement avec le rendu des volumes possible (pour les nuages par exemple)

Comme la vidéo le montre on peut colorer cette fumée comme on veut.

Le bump mapping est aussi amélioré.

bump mappgin

Enfin une nouveauté qui ravira beaucoup ceux qui veulent utilisé un autre moteur de rendu que celui interne (qui lui aussi a eux beaucoup de modifications). Il est désormais possible pour les développeurs d'intégrer leur exportateur dans blender, afin que lorsque l'on choisit ce moteur externe, l'interface de blender ne propose que les matériaux correspondant au moteur, ainsi que les spécificités du rendu. on peut notamment voir que Luxrender propose déjà des versions pour blender 2.5, mais cela reste encore difficile à installer.

Bien sur de nombreux autres moteur de rendu devraient proposer rapidement des exportateurs intégrés à blender du fait de la sortie d'une version stable.

Blender 2.57 est la première version stable de la branche 2.5x, mais il est déjà prévu de faire une version 2.58 d'ici un mois ou deux, mais le développement n'est pas finis !

En effet il y a encore plein de projets en cours qui ne peuvent pas encore être intégré, mais ces projets vont faire partie de la branche 2.6x, et parmis ces projets notons le plus attendu d'entre eux : Bmesh, il permet à blender d'utiliser des faces à plus de 4 points : les N-gon. Bmesh est une refonte en profondeur de la façon de modéliser et apportera son lot de nouveautés car beaucoup de projets dépendent de lui.

Il y aussi l'unlimited clay qui permet de faire du sculpt comme sur de l'argil mais avec un matériau illimité (d'ou le nom) ! Une petite vidéo pour vous montrer les possibilités (par contre l'auteur a un gout musical spécial...) :

Malheureusement pour ce projet il risque de prendre plus de temps car le développeur a été engagé par 3D coat, mais le développeur a dit qu'il ne laissait pas pour autant tomber le développement...

ps : pour retrouver une fonction qui était présente dans les betas mais plus dans la stable, il suffit d'aller dans file/user preference, ensuite d'aller dans l'onglet input et de cocher le continuous grab. La fonction peut être explicite pour certain, mais je vous laisse découvrir ce que cela fait!

il y a aussi pas mal de chose qui ne sont pas présentes par défaut, mais on peut les retrouver facilement dans l'onglet add-ons de ces préférences. une fois que vous avez tout configurer il vous reste plus qu'a fermer la fenêtre et d'enregistrer vos préférences en faisant ctrl+ U (attention cela sauvegarde toute vos préférences, dont la scène et vos viewport, faites donc cette manipulation avec un blender fraichement lancé !)

pps : voila cette présentation de blender 2.57 est finie, mais il se peut que je modifie l'article afin de compléter les nouveautés de cette version dont j'aurai pu oublier (cela fait plusieurs années que je n'utilise plus que cette version, je ne me rappelle donc plus de tout ce qui est nouveau ou tout ce qui était déjà la avant 😉 )

Pour le téléchargement cela se passe par ici : http://www.blender.org/download/get-blender/

Remplis sous: Blender Aucun commentaire
10déc/100

Très beau court métrage de la part de supinfocom de Arles : Mett Buck (oui c'est bien de la 3D)

Remplis sous: Twitter Aucun commentaire
10déc/100

très bon article sur HTML5 RT @picodix HTML5 et l'avenir du web: Tour d'horizon sur ce futur nouveau standard >> http://bit.ly/4FnbAi

Remplis sous: Twitter Aucun commentaire
23nov/100

Message test afin de configurer le css spécial pour mes tweet sur mon blog, petit bonus cette vidéo : http://bit.ly/aEPmZQ

Remplis sous: Twitter Aucun commentaire