Etude

• Questions-réponses avec le chef de projet sur la faisabilité de nouveaux éléments.
• Questions-réponses avec le directeur artistique sur la faisabilité de certains blocks.
• Réception officielle du projet.
• Phase d’étude de l’intégration : Dimensions, Couleurs, Polices, Objets CSS utilisables, à styliser, & nouveaux objets.
• Ecriture du bilan de l’étude, avec stockage dans un dossier public, Redmine, ou sur le bureau selon le projet.

Intégration

• Création des fichiers de base, à partir d’un pillage en règle de CSSNormalize et de quelques snippets.
• Intégration du header.
• Intégration du footer.
• Création d’une liste d’objets CSS récurrents sur le site : Boutons, formulaires, tableaux, etc.
• “Torture” du fichier Objets : Textes trop longs, Images trop larges, HTML inséré là où il ne devrait pas, etc.
• Intégration bloc par bloc.
• A la fin de chacune de ces étapes, et pour chaque “bloc” intégré, je suis cette checklist :
  • Café
  • Calages par rapport à la DA. (Pas de pixel perfect, mais un design propre)
  • Débug FFx – IE 7–8–9
  • Ajout de liens entre les templates afin de pouvoir y naviguer avant le début du développement.
  • Rangement du CSS avec CSSLisible
  • Rangement du HTML avec HTMLLisible
  • Conversion des pictos PNG (–200octets) en base64 avec IMG2data:uri
  • Commit / Pull / Push sur Git

Finalisation

• Livraison de l’inté.
• Suivi avec le développeur.
• Contre-pillage du projet : les nouveaux objets intéressants, les corrections et autres améliorations sont versés dans CSSNormalize.
• Grosse sieste. (Cette étape tient plus du rêve.)

Notes

• La phase d’étude oscille entre une heure et une journée.
• J’appelle « Block » une zone du contenu avec une utilité distincte : un formulaire, un widget, etc …
• Je regroupe souvent plusieurs petits blocks pour la checklist de fin de block, afin de grouper un peu.
• La checklist de fin de block prend habituellement entre 2 et 15 minutes.
• CSSLisible & HTMLLisible sont utilisés au travers de leur API dans TextExpander.

Oui, cet article fait une belle pub pour Darklg Labs. So what ? ; )

Votre méthodologie diffère beaucoup de la mienne ?

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Ma méthodologie d’intégration web
Partager cet article sur Twitter

Ce script permet des échanges simples : plusieurs questions commençant par une chaine de caractères spécifique, déclenchant une réponse sélectionnée au hasard parmi quelques unes.

J’ai également tenté de mettre en place des points de conversations, permettant ainsi plus de dynamique. Atteindre ces points, par un échange forcé par le bot ou non, peut permettre de débloquer d’autres parties de la conversation.

Evidemment, du gros gros work in progress : )

• Forkez le sur Github
• Testez ScumbagBot

Le comportement de ce bot n’a évidemment pas été calqué sur le mien. Forcément.

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : ScumbagBot – Bot en Javascript.
Partager cet article sur Twitter

Sur IE 7 & IE 8

Une opacité de .99 semble déclencher le lissage de la police.

filter: alpha(opacity=99);

Un background non transparent défini sur le bloc ou son parent marche parfois également.

background:#fff;

Sur Webkit (Google Chrome, Safari, …)

webkit-text-stroke ajoute une bordure interne (couleur/taille à adapter) et permet de « récupérer » certaines polices fines.

-webkit-text-stroke: 0.5px #fff;

Une très légère rotation peut éventuellement activer ClearType.

-webkit-transform: rotate(-0.0000000001deg);

Sur les anciennes version de Chrome, une ombre presque invisible déclenchait Cleartype. Ne fonctionne plus sur les dernières versions.

text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);

Jouer avec webkit-font-smoothing peut aussi donner un résultat.

-webkit-font-smoothing: (subpixel-antialiased|antialiased|none);

Changer l’ordre dans le font-face m’a donné de belles surprises, sous Windows & OSX

@font-face {
    font-family: 'MaFont';
    src: url('MaFont.eot');
    src: url('MaFont.eot?#iefix') format('embedded-opentype'),
         url('MaFont.svg#MaFont') format('svg'),
         url('MaFont.woff') format('woff'),
         url('MaFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

L’opacité à 999‰ peut également ramener un rendu correct … même sous OSX.

opacity:0.999;

Sur les autres navigateurs … dont Firefox

• Important : Si vous utilisez le Font-Face Generator de Font Squirrel, assurez vous (mode expert) que « Apply Hinting » est bien coché. Si vous n’êtes pas sûr, renvoyez le fichier original !
• Assurez-vous que le font-weight déclaré en CSS correspond au font-weight de la police chargée.
• Parfois, les navigateurs préfèreront une taille de police à une autre. 12px ou 16px peuvent, par exemple, donner de meilleurs résultats que 13px ou 17px.
• Jouer avec text-shadow peut aider légèrement sur Firefox.
• Si rien ne marche, votre typo n’est probablement pas adaptée à un usage web. Il est difficile d’imiter certains réglages de Photoshop, comme « Police Nette » et autres.

Et vous, vous avez d’autres pistes ?

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Font-face avec Anti-Aliasing sur Mac OSX & Windows.
Partager cet article sur Twitter

<h3 class="irh3">Mon texte alternatif</h3>

.irh3 {
	display : inline-block;
	width : 100px;
	height : 30px;
	overflow : hidden;
	text-align : left;
	text-indent : -9999px;
	white-space : nowrap;
	background : transparent url(http://lorempixel.com/100/50/) no-repeat top left;
}

Exemple :

Mon texte alternatif

Explications :

• On commence par définir un type inline-block sur l’élément. Le display:block fonctionne aussi, mais j’ai plus souvent besoin du display:inline-block;.
• On lui donne la taille de l’image interne, qu’on dispose en background.
• Le text-indent va décaler le texte loin sur la gauche (ce dont on s’assure avec le text-align:left;), le white-space:nowrap; s’assurant qu’il soit sans retour à la ligne.
• Le overflow:hidden évite que le texte soit éventuellement visible sur la gauche, s’il est trop long.

Je suis conscient que cette technique est assez lourde, mais elle a l’avantage de ne jamais m’avoir lâché : )

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Remplacement de texte par une image en CSS
Partager cet article sur Twitter

La technique la plus connue en CSS2, malgré sa limite à deux bordures, était :

.monbloc {
border:2px solid blue;
outline:2px solid red;
}

Heureusement, CSS3, avec son box-shadow, apporte une solution toute simple pour augmenter le nombre de bordures : Appliquer des ombres multiples, avec une diffusion de 0px et une épaisseur choisie.

.monbloc {
-webkit-box-shadow:  0 0 0 2px red, 0 0 0 4px blue, 0 0 0 6px green;
-moz-box-shadow:  0 0 0 2px red, 0 0 0 4px blue, 0 0 0 6px green;
box-shadow:  0 0 0 2px red, 0 0 0 4px blue, 0 0 0 6px green;
}

La taille de chaque ombre est égale à celle de la bordure voulue, plus celle de l’ombre précédente.

Attention, deux inconvénients à cette technique :

• elle n’est compatible qu’à partir d’IE9 (Donc à destination de 70% du public, selon CAN I USE)
• Les ombres ne sont pas gérées dans le box-sizing de l’élément

Vous connaissez une meilleure technique (sans image?)

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : [Snippet] Bordures multiples en CSS3
Partager cet article sur Twitter

L’apparence de ce dernier ne change pas beaucoup, étant donné que j’ai toujours aussi peu de compétences en design, mais c’est sous le capot que beaucoup de changements se sont produits.

Principaux changements

• Les fichiers du thème sont versionnés sur Git. Pratique pour le déploiement, pour les backups, et pour garder une trace de son évolution.
• Les commentaires n’ont plus de nofollow. Je vais probablement regretter la vague de spams, mais tant mieux pour les commentateurs.
• Le thème est en responsive web design. Donc enfin un vrai thème mobile
• Beaucoup moins de plugins derrière. Donc plus de WP-Page Navi, WP-Similar, et donc de meilleures performances.
• Le code derrière est plus solide, et mieux rangé.

Le changement le plus significatif pour moi est le départ sur une nouvelle base propre, qui me permettra tôt ou tard de publier le code de ce thème, et d’y apporter des modifications intéressantes !

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Darklg Blog fait peau neuve
Partager cet article sur Twitter

Logiciels pour l’intégrateur

• TextExpander (34.95$)
  Gérer des snippets dans n’importe quel logiciel.
• TextMate (44.85€)
  Editeur de code léger et puissant, bourré d’astuces.
• Google Chrome (Gratuit)
  Un navigateur rapide et efficace, doublé d’un inspecteur de code.
• MAMP (Gratuit)
  Apache, MySQL, PHP. Mise à jour "complexe".
• Git (Gratuit)
  Un logiciel de gestion de versions. Indispensable.
• Github (Gratuit)
  Une interface agréable pour Git
• VirtualBox (Gratuit)
  Gestion de machines virtuelles pour le débug (<3 IE)
• ImageOptim (Gratuit)
  Optimiser le poids des images.
• Adobe Photoshop (Cher)
  Difficile de se passer de cet éditeur avancé pour découper des maquettes.
• SpriteRight (3.99€)
  Gérer et concevoir vos sprites CSS.
• Gradient Pro (3.99€)
  Gérer et concevoir vos dégradés avancés CSS.
• Widget HTML Entities (Gratuit)
  Un widget simple pour retrouver des entités HTML.

Autres logiciels

• Sequel Pro (Gratuit)
  LE logiciel pour gérer vos bases de données.
• Reeder (7,99€)
  Un des meilleurs lecteurs RSS de bureau, synchronisé avec Google Reader.
• Fluid (Gratuit/4.99$)
  Transforme un site web en application de bureau.
• Sparrow (7,99€)
  Un logiciel efficace pour votre boîte Gmail (et autres).

Et vous, quels sont vos logiciels préférés pour l’intégration ou le développement front sur Mac ?

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Logiciels utilisés pour l’intégration HTML/CSS sous Mac OS X
Partager cet article sur Twitter

• Crontab : Exécuter des tâches automatiquement, sans déranger les visiteurs avec des faux crons. Magique.
• Gestion de la performance : Installer APC ? Adapter sa configuration de serveur pour servir principalement des fichiers statiques avec NGINX.
• De nouveaux langages : Vous voulez faire du Ruby on Rails ? Installez-le sur votre serveur ! Vous désirez utiliser les nouveautés de la dernière version de PHP ?.
• Des sous-domaines/Sites « illimités » : Vous n’avez que des petits sites statiques, et le fait de devoir repayer pour un autre hébergement vous embête ?
• Pas de restrictions farfelues : Limites de trafic mensuel, de nombres de bases de données, d’utilisateurs FTP …
• Un proxy : Un serveur dédié peut tout à fait servir de relais pour passer outre certaines restrictions de DNS ou autres.
• Votre Cloud : Pas confiance en Dropbox, Apple ou Google pour conserver vos données ? Installez un serveur mail, un accès FTP, un serveur CalDav, rsync !
• La formation : Mettre les mains dans le cambouis, et les yeux dans la ligne de commande vous apprendront beaucoup sur les coulisses du web.

Un serveur, c’est forcément plus compliqué qu’un hébergement tout fait, mais les avantages sont non négligeables … Et le prix n’est plus vraiment un souci avec les offres Kimsufi ou Dédibox !

Pour ceux qui sont convaincus, jetez un oeil au tutoriel d’Alsacréations sur les bases de la gestion de serveur dédié, tout simple, rapide à mettre en place, une merveille pour démarrer.

Vous avez des idées pour allonger cette liste ? : )

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Pourquoi un serveur dédié ?
Partager cet article sur Twitter

Accélerer Aperçu / Preview

Il suffit de désactiver la restauration des fenêtres : quittez Aperçu avec CMD+Alt(option)+Q, puis tapez ceci dans un terminal et validez. Source
defaults write com.apple.Preview NSQuitAlwaysKeepsWindows -bool false
(Ou comme me le souligne ShadowKris : « Préférences Système > Général et décocher « Restaurer les fenêtres à la fermeture[…] » plutôt que de geeker au terminal  »

Accélerer Photoshop

Une traduction partielle de l’excellent PhotoshOptimize. Ces conseils valent pour un intégrateur, qui n’a normalement pas à modifier de PSD (mais qui doit le détruire minutieusement), et je ne garantis aucun résultat, forcément. Mais chez moi, OS X Lion et Photoshop s’entendent mieux :’)

Réduire les niveaux de cache
Dans Photoshop → Préférences → Performances.
Choisissez ’1′ comme valeur pour le nombre de Niveaux de cache.

Réduire le nombre d’états dans l’historique
Dans Photoshop → Préférences → Performances.
Choisissez un petit nombre d’états d’Historique (5 pour moi)

Désactivez la prévisualisation des polices
Dans Photoshop → Préférences → Texte.
Décochez la taille d’aperçu de la police

Désactivez la prévisualisation des images
Dans Photoshop → Préférences → Gestion des fichiers.
Sélectionnez « Ne jamais enregistrer » les Aperçus d’image.

Désactivez l’export du presse-papier
Dans Photoshop → Préférences → Général.
Décochez « exporter le presse-papier »

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : [Tips] Accélerer Photoshop et Aperçu sous Mac OS X Lion
Partager cet article sur Twitter

Ces sites ont un défaut qui m’a été rappelé l’autre jour, quand PlaceKitten est tombé hors ligne, et que mes intégrations ont été déshabillées d’un coup. Aucun moyen de monétiser (Bannieres sur le site, bof, insertion de marques dans les images, bof), donc une durée de vie limitée en cas de succès soudain et d’absence de sponsors.

J’ai donc mis en place un petit script permettant d’installer votre propre service de placeholders sur votre serveur/machine, afin d’éviter les soucis liés à l’utilisation d’un service externe, tels que le ralentissement de vos sites locaux, le manque de fiabilité, etc.

Ce Script doit être dézippé/cloné sur votre serveur/hébergement utilisant Apache & PHP, avec mod_rewrite et GD activés. Plus qu’à le lancer, glisser des images en JPG dans le sous-dossier images/ et c’est parti !

PlaceHugger est un script en PHP, disponible sur GitHub

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Obtenez vos images PlaceHolders avec PlaceHugger !
Partager cet article sur Twitter