dotMobi WordPress Mobile Pack : Wordpress pour mobiles

dotMobi WordPress Mobile Pack : Wordpress pour mobiles

Le Wordpress Mobile Pack est un plugin Wordpress permettant la portabilité de votre site web sur les appareils mobiles. Il a été conçu par James Pearce, Vice Président des technologies émergentes chez "dotMobi". Si le nom "dotMobi" ne vous dit rien, il s'agit d'un grand groupe industriel basé à  Dublin (leader mondial du développement et de la découverte de contenu mobile de qualité) qui gère les noms de domaines mobiles et qui est à  l'origine du célèbre ".mobi". Le groupe encourage l'innovation de l'industrie mobile en donnant aux fournisseurs de contenu les outils nécessaires pour s'assurer que le Web fonctionnera sur les téléphones avec rapidité, précision et pertinence.

Il existait déjà  des solutions permettant de rendre votre site web accessible sur les téléphones mobiles. Je pense notamment à  l'article "Veerle's blog goes mobile" publié sur le blog de Veerle Pieters.

La solution que propose James Pearce s'adresse uniquement aux utilisateurs de Wordpress et ses fonctionnalités semblent dépasser de loin tout ce existe aujourd'hui dans ce domaine...

Le Wordpress Mobile Pack offre :

• Une détection de la provenance de vos visiteurs et les oriente si besoin sur le thème adapté aux mobiles
• Une détection du type d'appareil mobile utilisé par vos visiteurs
• La possibilité de switcher d'un thème à  l'autre une fois sur le site
• Un thème "spécial mobiles" entièrement paramétrable et personnalisable
• Une fonction permettant d'adapter automatiquement votre contenu web pour un support mobile : suppression des médias, partition des grandes pages, adaptation de la taille des images, simplification automatique des css...
• Un panneau d'administration accessible depuis un téléphone
• Un widget lecteur de codes QR

Vous pourrez trouver ce plugin sur le site "Mobiforge", une communauté de développeurs spécialisés dans le domaine du mobile. Ce site s'adresse à  tous ceux qui s'intéressent au développement et au design d'applications mobiles. Vous pourrez y trouver de nombreux articles traitant de design, de développement et de tests en tous genres.

Le site propose également un forum, un blog ainsi qu'un ensemble d'outils pour le développement sur mobiles (Templates de sites, outils de création et de test, framework etc...). Vous l'aurez compris, si vous vous intéressez à ce domaine, Mobiforge est un site à  placer dans vos favoris.

Quelques liens pour finir :

> Wordpress-mobile-pack.1.0.8223

> La communauté Mobiforge

> L'article de James Pearce présentant son plugin

> Le même article traduit "approximativement" en Français (Google Traduction)

> Le site web dotMobi

Web design+ : les standards du web vus par Harry Roberts

Web design+ : les standards du web vus par Harry Roberts

Web Design+ est un récapitulatif de bonnes pratiques concernant la création web. Quel doctype choisir, comment améliorer l'accessibilité d'un site, quelles sont les bonnes habitudes lorsqu'on créé un formulaire, quel CSS-reset choisir, etc...

Ce petit manuel a été conçu par Harry Roberts, un développeur de 18 ans, exerçant son métier au Royaume-Uni. Malgré son jeune age, Harry possède déjà une bonne maitrise technique puisqu'il est spécialisé dans les CSS, les standards web, la sémantique XHTML et l'accessibilité.

Web Design+ s'adresse plutôt à ceux qui connaissent déjà le HTML et les CSS mais qui souhaitent parfaire leur technique en s'appropriant les bonnes pratiques. Lorsqu'on parle d'intégration web, même s'il existe différentes façons pour aborder un même problème, il y a néanmoins des solutions génériques, propres, respectueuses des standards. Ce sont ces solutions que vous trouverez dans ce guide.

Je sais qu'il existe de très nombreux documents présentant les standards du web. L'intérêt de celui-ci réside dans la clarté, la simplicité des explications, l'étendue des sujets traités et leur côté très pragmatique. C'est selon moi, un document qui peut s'avérer très utile en cas de doute sur un problème de construction de page web ou tout simplement pour en apprendre plus sur les standards, la sémantique ou sur l'accessibilité.

Web Design+ fait partie de CSS Wizardry, le site d'Harry Roberts sur lequel vous trouverez de nombreuses ressources parmi lesquelles son propre framework css "Typogridphy", une rubrique "Toybox" où vous trouverez de nombreux snippets (php, css, xhtml), "Clecktionary" un dictionnaire humoristique dédié aux natifs de la ville de Cleckheaton (UK).

Quelques liens pour finir :

> Web Design+

> CSS Wizardry

> Le portfolio d'Harry Roberts

Photoshop : centrage et points de force, 2 scripts bien utiles

Photoshop : centrage et points de force, 2 scripts bien utiles

Si vous travaillez sur Photoshop, je pense que vous utilisez les repères et les guides pour mieux construire vos images. Personnellement je cherche régulièrement le centre de mon document et très souvent les points de force de mon image. Je ne vous ferais pas l'affront de vous expliquer ce qu'est le centre d'une image mais une petite explication s'impose pour les points de force...

Si vous divisez une image en 3 dans le sens vertical et faites de même dans le sens horizontal vous obtiendrez des lignes qu'on appelle "lignes de force". Leur intersection forme 4 points appelés "points de force". Lorsque vous construisez une image il est important de placer les éléments principaux en fonction de ces points car notre œil est attiré en priorité sur ces derniers.

Vous n'êtes pas sans savoir que Photoshop possède un outil d'automatisation de tâches fort utile qu'on appelle "Script" ou "Actions" en Français.

Plutôt que de calculer à chaque fois le centre de votre image puis d'y placer vos repères ou pire, de sortir la calculatrice pour repérer où sont les tiers du document, il est intéressant d'utiliser les Scripts pour laissez Photoshop faire le travail à votre place. Pourquoi se compliquer la vie?

Aujourd'hui je vous propose donc 2 scripts qui placeront des repères au centre et aux tiers de votre image afin d'y repérer d'un coup d'œil les lignes et points de force.

Dans un premier temps il vous suffit de télécharger les scripts ICI. Ensuite, vous devez placer le fichier "Graphisme.atn" dans le dossier Actions (ou Scripts en Anglais) de Photoshop. Ce dossier se situe dans C:\ProgramFiles\Adobe\Photoshop\Presets\Actions.

Ensuite, dans Photoshop, vous affichez la fenêtre de Scripts (raccourci F9), en haut à droite de celle-ci, cliquez sur la petite flèche pour accéder au menu, choisissez "Charger des scripts..." et allez chercher le script que vous venez de télécharger.

Un nouvel ensemble "Graphisme" apparaît maintenant dans votre fenêtre. Ce dossier comprend un script "centre" et un script "points de force". Pour lancer l'une où l'autre des actions, placez-vous sur l'un des deux scripts et cliquez sur le bouton "Play" en bas de la fenêtre de scripts. (le bouton est symbolisé par un triangle). Et Voilà! Vos repères apparaissent sur votre image.

Quelques liens pour finir :

> Wikipédia : la composition d'une image

> Adobe Help center : Utilisation des scripts

Mobile Awsomeness : Inspiration web design mobile

Mobile Awsomeness : Inspiration web design mobile

Quoi ? Encore une enième galerie de sites web ? Oui mais cette fois-ci, Mobile awsomeness est un site traitant du design de sites pour mobiles. En plus du classique screenshot de présentation, pour chaque site, 4 pages sont présentées ce qui permet de se faire un bon aperçu de l'ensemble. Comme sur presque toutes les galeries, un système de vote permet de donner votre avis et le flux rss vous donne la possibilité de récupérer les mises à jour en temps réel.

La rubrique : "Mobile Web ressources" est, selon moi, la valeur ajoutée du site. Si le monde du design et du développement sur mobile vous intéresse, vous trouverez ici de nombreuses ressources : une liste de livres traitant du sujet, une partie "Guides Frameworks and platforms", une liste d'outils de validation, et des liens vers des émulateurs pour tester vos sites sur une interface appropriée. Enfin, une partie entière est réservée pour l'Iphone.

Un site plutôt intéressant pour tous ceux qui souhaitent découvrir les tendances en matière de design de sites réservés aux mobiles. Sans compter sur la qualité des ressources proposées dans la rubrique "Mobile web ressources". A voir donc !

Quelques liens pour finir :

> Mobile Awsomeness : le site

> Mobi Forge : une mine d'info concernant le développement de sites pour mobiles

Designers Toolbox : une adresse très utile...

Designers Toolbox : une adresse très utile...

C'est tout à fait par hasard que je suis tombé sur le site Designers Toolbox. Si vous ne connaissez pas l'endroit, voici le topo : ce site est une véritable boite à outils pour toute personne travaillant dans la création de sites web ou dans le domaine du print.

Designers Toolbox se décompose en trois rubriques principales auxquelles s'ajoute un espace personnel pour les utilisateurs souhaitant ouvrir un compte sur le site.

Dans la rubrique "Design Life" vous trouverez différents articles traitant du design en général, une sélection hebdomadaire de sites web intéressants etc...
La partie "Store" sur laquelle vous pourrez acheter de nombreuses ressources telles que des backgrounds format psd, des templates de documents divers et variés (contrats client, contrats de maintenance, devis pour travalleurs freelance etc...) ainsi que des ressources vectorielles. Autre chose intéressante, le site vous propose un outil pour créer votre portfolio. Je n'ai pas testé mais le service est gratuit les 15 premiers jours donc ça peut valoir le coup d'oeil...

Mais c'est sans doute la rubrique "Design Ressources" qui est la plus intéressante... Là c'est la caverne d'Ali Baba ! Vous pourrez y trouver de nombreuses ressources entièrement gratuites : Templates pour print (enveloppes de différentes tailles, dossiers, jaquettes de cd/dvd vierges, business cards etc...) et de nombreux outils pour vous aider dans la création de vos maquettes web.

Pour les Web designers, je vous conseille d'aller faire un tour sur le lien "Web Safe Area" où vous pourrez télécharger gratuitement des templates (format psd) de fenêtres de navigateurs (Safari,Firefox et IE) sur différentes résolutions. Dans le même esprit, via le lien "Web browser elements", le site met gratuitement à disposition les psd de tous les éléments pour vos formulaires (boutons radio, check-box, textarea, input-button, input-text, etc...) sur plusieurs navigateurs et en fonction des systèmes d'exploitation (XP, Vista, Mac). Ces ressources seront vraiment un gain de temps si vous créez des maquettes web donc n'hésitez pas à les télécharger, c'est gratuit !

Le site met également de nombreux outils à disposition : une liste des tailles standard des bandeaux web, les éléments graphiques de l'Iphone (Iphone GUI), un générateur de texte "lorem ipsum", une liste des principaux caractères spéciaux codés en html etc...

Vous l'aurez compris, Designers Toolbox est une adresse très utile, ne serait-ce que pour les nombreuses ressources et outils mis gratuitement à votre disposition.

Quelques liens pour finir :

> Designers Toolbox : le site

> Designers Toolbox : Web Browser elements

> Designers Toolbox : Web Safe Area

Template psd pour customiser Twitter

Template psd pour customiser Twitter

Est-il encore nécessaire d'introduire Twitter ? Le célèbre réseau social créé il y a bientôt 3 ans est devenu au fil du temps un "lieu" quasi incontournable pour exposer ses états d'âme du moment, partager ses découvertes ou simplement pour discuter par "Tweets" interposés.

Sur Twitter il est possible de customiser sa page en changeant l'image d'arrière plan, la couleur du texte et des liens etc... Pour ceux qui souhaitent décliner l'univers graphique de leur site web ou blog sur leur page Twitter, il peut-être intéressant de passer par une maquette Photoshop avant d'appliquer les changements directement en ligne. Il est toujours plus facile de passer par une maquette avant de modifier une page web. N'ayant pas trouvé de template psd représentant précisément l'interface de base de Twitter, j'ai décidé d'en créer un moi-même.

Ayant maintenant terminé ce travail, je mets à disposition ce fichier psd. Je me suis appuyé sur une résolution de 1407px x 1200px. J'ai recréé toutes les zones modifiables, texte et liens compris. Vous n'avez donc plus qu'à ajouter votre image de fond, et changer le modèle de couleurs grâce aux options de fusion des calques. Cliquez sur la jolie boite pour télécharger le psd !

Quelques liens pour finir :

> Twitter : le site

> Detruk sur Twitter

Si le "packaging" vous intéresse, rendez-vous sur l'espace deviantArt de "Digital Phenom"...

Photos gratuites et libres de droits : 17 sites

Photos gratuites et libres de droits : 17 sites

Il m'a semblé utile de regrouper dans un post une liste de sites proposant des images gratuites et libres de droits. Il est impossible de tous les énumérer tant ils sont nombreux sur le net. Cependant, j'en ai sélectionné 17 qui me semblent intéressants au niveau de la qualité des images qu'ils proposent, de la quantité mais également au niveau de la pertinence du tri qui en est fait.

Bajstock propose plus de 1800 images libres de droits classées par catégories. Chacune d'entre elles contient des albums présentant des photos de très bonne qualité. A noter que les anglophobes seront heureux puisque le site est en Français.

le lien : http://www.bajstock.com/main.htm

Crestock est à la base une banque d'images de très bonne qualité certe, mais payante. J'ai inclu ce site car il propose tous les jours une photographie ou une illustration gratuite. Il suffit de vous enregister (c'est gratuit) pour accéder à ce petit cadeau quotidien.

le lien : http://www.crestock.com/

DigitArt est un site qui propose des formations Maya, Photoshop et Première. Vous y trouverez également une banque d'images HD. A l'heure où j'écris ce post le site propose 240 images classées dans 40 catégories.

le lien : http://digitart.fr/banque-images.html

Dreamstime vous propose des images libres de droits en téléchargement gratuit à partir du moment où vous êtes enregistré. L'inscription est gratuite. Les images sont classées par catégories. L'ergonomie du site est assez moyenne à mon goût mais les images proposées sont de très bonne qualité.

le lien : http://www.dreamstime.com/

Free Photo Bank vous permet de télécharger des images sous licence Creative Commons. Pour toute utilisation, il faudra donc nommer l'auteur. Les images sont classées dans 15 catégories elles-mêmes composées de dossiers. Sur ce site vous pouvez voir les informations liées à la photo : type d'appareil, sensibilité, focale, vitesse etc...

le lien : http://www.freephotobank.org

Free Pixels a misé sur un tri assez poussé. Vous pouvez choisir parmi des catégories, faire une recherche libre, choisir dans une liste déroulante ou encore au sein d'un nuage de tags. Les images proposées sont de bonne qualité et vous n'avez pas besoin de vous inscrire pour les télécharger.

le lien : http://www.freepixels.com

Free Range Stock ne propose pas de catégories mais vous pouvez faire une recherche sur un ou plusieurs termes ou sur un nom de photo. Vous devez vous inscrire pour télécharger les photos.

le lien : http://www.freerangestock.com

Image After propose un vaste choix d'images et de textures gratuites à utiliser pour vos projets personnels ou professionels. Tout est classé par catégories. Ne pas se fier au design plutôt archaïque, ce site est un must.

le lien : http://www.imageafter.com

La Logothèque est la solution si vous cherchez des ressources vectorielles (logos ou autres). De nombreuses catégories sont proposées ainsi qu'un forum dans lequel on pourra vous aiguiller dans votre recherche...

le lien : http://www.lalogotheque.com/fr/logotheque.php

Lost & Taken propose des textures de toutes sortes. Un nuage de tags assez original permet de cibler votre recherche. Le site dispose également d'un store où vous pourrez trouver textures, ressources vectorielles et brushes pour 2€.

le lien : http://www.lostandtaken.com/

Mandolux est le site de "Mando Gomez". Il y propose ses photos dans différents formats. Il y a assez peu d'images mais la qualité est excelente... Pas de catégorie, que des archives classées par années. A la base, le téléchargement est gratuit mais vous pouvez faire un don via paypal.

le lien : http://www.mandolux.com/

Morgue File vous propose 7 catégories de photos elles-même décomposées en sous-rubriques. Là aussi, vous pouvez avoir accès aux données propres à l'image (nom de l'appareil, exposition, focale, vitesse etc...) lorsque celles-ci ont été renseignées. La qualité des photos est bonne.

le lien : http://www.morguefile.com/

Open Photo vous permet de télécharger gratuitement des photos de très bonne qualité, gratuitement. 20 rubriques de tri, pas besoin de s'inscrire pour télécharger les images.

le lien : http://www.openphoto.net/

Photogen propose de nombreuses catégories et une option de recherche avancée. Ici il vous faudra vous inscrire pour avoir le droit de télécharger les photos.

le lien : http://www.photogen.com/

StockVault est l'un des sites les plus complet dans le domaine de l'image libre de droits. De nombreuses catégories et sous-catégories de recherche. Des images d'une très bonne qualité et nul besoin de s'enregistrer pour télécharger. Bref, un site que je recommande vivement.

le lien : http://www.stockvault.net/

Stock XChange est, tout comme StockVault, une référence. Même si un enregistrement est nécessaire pour avoir accès aux images, la qualité et la quantité en valent la peine. Le site propose également une partie payante. Si l'envie vous dit d'acheter une photo, je vous conseille de vous ballader dans la partie gratuite car on y retrouve parfois les mêmes images...

le lien : http://www.sxc.hu/

Texture king sera la dernier site de cette liste. Comme son nom l'indique, le site vous propose de nombreuses textures, classées en catégories. Ici, tout est gratuit et libre de droits. La qualité est au rendez-vous donc si vous cherchez des textures, je vous conseille cette adresse!

le lien : http://www.textureking.com/

Mise à jour de cette liste suite aux commentaires...

Pixelio est un autre site que je ne connaissais pas. Mais comme j'écoute attentivement les remarques de mes lecteurs :) , alors je suis le commentaire de Bango qui fait référence à ce dernier site de téléchargement d'images. Attention, ici mieux vaut parler Allemand... Il faudra vous enregistrer pour pouvoir télécharger les visuels. Si comme moi vous ne comprenez pas tout de cette langue, Google traduction pourra très certainement vous aider...

le lien : http://www.pixelio.de/

J'ajoute également Photo Libre à la liste suite au commentaire de Ja Web Studio. Le site est Français, pas besoin de s'inscrire pour télécharger. Les photos sont de bonne qualité. 21 rubriques, plus de 7000 photos à télécharger gratuitement. Le site interdit cependant l'utilisation commerciale des images et il vous faudra mettre un lien renvoyant sur "Photo Libre".

le lien : http://www.photo-libre.fr/

Posteet : une mine de codes

Posteet : une mine de codes

Vous avez enfin trouvé le code css permettant d'importer des polices dans votre site et vous aimeriez bien pouvoir garder ces quelques lignes que vous réutiliserez surement...A l'inverse, vous cherchez comment cibler Firefox3 en css, calculer le temps d'exécution d'un code php, ou créer un fichier compressé tar.gz sur un serveur Unix ? Ça tombe plutôt bien car le site Posteet permet de stocker vos bouts de code sur le net et bien entendu de les mettre à disposition gratuitement.

Un moteur de recherche vous permet de faire votre choix parmi les nombreuses catégories. Le site propose des réponses à vos question sur de nombreux langages, plateformes et systèmes : HTML, CSS, Javascript, PHP, Linux, Shell, Bash, Apache, MySQL, SVN, etc etc...

Une inscription suffit pour uploader vos petites astuces et les proposer aux internautes. Mieux, si vous disposez d'un compte, vous pouvez ajouter un lien vers Posteet sur votre site pour permettre aux utilisateurs qui naviguent dessus de créer des posteets à partir du contenu de votre site directement sur leur compte posteet. Petit luxe supplémentaire, le site est proposé en Français (et en Anglais).

Quelques liens pour finir :

> Posteet : le site > Bout2code : un autre site

Gerard Ferrandez : la passion du dhtml

Gerard Ferrandez : la passion du dhtml

Ca fait longtemps que je voulais présenter les travaux de Gérard Ferrandez sur ce blog. Ce passionné de code a développé son art dans la maîtrise du "dhtml art" et il partage tout sur son site dhteumeuleu.com.

Vous pourrez voir de quoi il est capable, et ça en vaut la peine. Je suis assez impressionné par le nombre de ses projets, par sa technique mais également par sa créativité. Gérard Ferrandez a travaillé sur de nombreux projets : galerie 3D, 3D Parallax Scrolling, animation 3D, jeux de typo etc etc...

Si certains travaux vous intéressent, vous avez accès à toutes les sources. Le tout est sous contrat Creative Commons. Petit rappel : ce type de contrat vous autorise à reproduire, distribuer et communiquer ses créations au public. Vous pouvez également les modifier. Dans tous les cas vous devez citer le nom de l'auteur et vous ne pouvez pas utiliser le code pour un projet commercial.

Pour vous faire une idée plus précise du travail, voici plusieurs screenshots de quelques uns de ses projets. Toutefois, je vous invite vivement à aller faire un tour sur son site car le premier intérêt c'est surtout l'interactivité. Allez tester en live, c'est parfois assez intrigant...

Quelques liens pour finir :

> Dhteumeuleu : le site de Gérard Ferrandez

Quelques uns de ses projets

> Autumn2 : Gallerie 3D > Forgotten World : Galerie 3D > Parallax3 : 3D PArallax Scrolling > Mandatory Upgrade > Distance and Perception : Galerie > Tomorrow Again : conceptuel > I could not stop : Jeu

Cheat sheets pour webdesigner

Cheat sheets pour webdesigner

Ca date un peu mais c'est toujours utile...Je suis tombé sur Added Bytes, un blog qui propose des "Cheat sheets"...Autrement dit, des feuilles "mémo" traitant de sujets tels que : le HTML, les CSS, le Javascript mais aussi sur le language SQL ou encore les commandes SVN (pour ceux qui connaissent)...
Tout est entièrement gratuit, téléchargeable en version pdf ou en png et assez bien foutu même si réussir à caser, sur un format A4, la quasi-totalité des balises html ou des propriétés css engendre parfois une densité d'information à la limite du compréhensible...mais passons.

Ca peut toujours être utile d'avoir dans un coin ce genre de petit récap non ?!

Quelques liens pour ceux que ça intéressent...

- le blog AddedBytes
- le blog SIX Revision qui propose également 28 cheat sheets.

CV:vous recherchez l'inspiration?

CV:vous recherchez l'inspiration?

Si vous êtes en manque d'inspiration pour construire votre CV, vous pouvez aller faire un tour du côté de JobMob.

Ce site créé par Jacob Share, ancien project-manager d'Amazon, propose d'offrir un espace de rencontre entre recruteurs et chercheurs d'emploi. L'article sur lequel je vous renvoie vous présente plusieurs manières d'aborder la construction de votre CV au travers de 36 exemples concrets...Même si tous les CV de la liste ne sont pas forcément construits de façon très judicieuse (à mon humble avis), dans tous les cas, cela peut toujours constituer une petite base lorsqu'on est à court d'idée...

Photorack : des photos gratuites (si si)

Photorack : des photos gratuites (si si)

Etant souvent amené à chercher des photos sur le net dans le cadre de mon travail, et mon employeur n'ayant pas souhaité investir dans des banques d'images sur le web, j'ai donc longuement cherché avant de trouver un site proposant des images gratuites, et qui plus est, d'une qualité pas trop mauvaise contrairement à d'autre...

Le site Photorack vous propose des photos format 640x480px sur de nombreux thèmes : Lifestyle, Nature, Food and Cooking, Animals, Industrial and technology, Sports, Business, People, Cities ans countries, Backgrounds and textures, Miscellaneous, Wallpapers.
Les ressources étant gratuites, c'est évident que le rendu est en général moins bon que sur des banques d'images payantes mais honnêtement, vous pouvez trouver des photos utilisables sans problème.

Dernière remarque : si vous allez sur ce site, l'apparition récurrente d'une publicité très désagréable (prenant les 3/4 de l'écran) viendra sans doute perturber votre recherche d'images... Il faut croire que même la gratuité a un prix...