L’équipe en charge de YUI (Yahoo! User Interface) a rendu disponible YUI 3.0 béta 1. Cette nouvelle mouture intègre des améliorations de performances et des améliorations structurelles ainsi qu’une série de nouveaux composants : DataSource, ImageLoader, History et StyleSheet.
DataSource : Un module d’abstraction de données fournissant une interface standard, quelle que soit l’origine des données (locales, XHR, XSS, ...) et leur format (JSON, XML, CSV, ...)
ImageLoader : Préchargement d’images
History : Permet la prise de contrôle des boutons “Précédent” et “Suivant” du navigateur lorsque vous construisez des applications sur une page unique et que vous gérez les différentes actions en Ajax.
StyleSheet : Module permettant de créer et de modifier des règles CSS à la volée.
Hunch est un service web qui vous aide à prendre toute sortes de décisions. Dois-je changer de travail ? À quel endroit devrais-je programmer mes prochaines vacances ? Quel téléphone portable devrais-je choisir ? Hunch vous pose toute une série de questions pour vous aider à trouver la réponse qui vous convient le mieux.
Tout comme d’autres services web tels que YouTube, ou Yahoo Answers, Hunch dispose à présent d’une API (Application Programming Interface). Elle permet aux développeurs d’intégrer des fonctionnalités de Hunch sur un site Internet, une application mobile ou une application web de bureau.
Cette API est gratuite pour une utilisation non commerciale, il suffit de créer sa clé API (API Key) et de faire un lien vers Hunch pour avoir le droit de l’utiliser.
Dans ces temps, où les lightbox (diaporamas interactifs) prennent de plus en plus d’ampleur, planetozh.com vous propose un excellent comparatif des scripts de type lightbox sous forme de tableau dynamique.
La page propose aussi de filtrer les informations du tableau. Vous avez ainsi le choix entre plusieurs librairies :
Vous pouvez aussi sélectionner différents critères comme par exemple la possibilité de grouper des images en albums, ou d’afficher du contenu via Ajax.
À Two December, nous développons nous aussi notre propre système de lightbox. Vous pouvez la voir en action sur la page d’accueil de Motion Reels. Nous partagerons bientôt ce script avec vous, avec un tutorial, mais nous devons encore l’optimiser.
Vous avez maintenant le nécessaire pour trouver le script le plus adapté à vos besoins.
Infographiste / Webmaster de métier, je souhaite avant-tout partager mon expérience dans le monde du web et continuer à apprendre d’avantage, tel est le gage de qualité.
Douglas Bowman est un designer talentueux, connu dans le monde de l’Internet et du Web Design. Il a travaillé pour Capgemini, Blogger, Google, et vous avez certainement déjà vu l’un de ses travaux : Visual Design Lead chez Google, il était en charge de design d’applications comme Gmail, Google Calendar, etc…
Mais la tendance de Google à donner une plus grande liberté d’expression et de création à ses ingénieurs plutôt qu’à ses designers a poussé Douglas Bowman à rendre les clés et quitter les bureaux de la firme.
Une semaine après son départ Douglas Bowman écourte ses congés pour rejoindre Twitter en tant que directeur créatif d’une petite équipe de designers.
Douglas Bowman au sujet de Google :
When a company is filled with engineers, it turns to engineering to solve problems. Reduce each decision to a simple logic problem. Remove all subjectivity and just look at the data. Data in your favor? Ok, launch it.
Je vous invite aussi à jeter un oeil au site Internet de Douglas Bowman : stopdesign.com
Espresso est un éditeur de code sur Mac, qui supporte HTML, CSS, XML, JavaScript and PHP et permet de publier ses fichier à l’aide de FTP, SFTP, FTP/SSL ou Amazon S3.
Développée par MacRabbit, l’application peut aussi intégrer des langages supplémentaires à l’aide de plugin particuliers (Sugars) mais aussi d’autres thèmes de couleurs pour votre texte.
L’application est aussi doté de fonctionnalité diverses et variées autour de l’édition de code, de l’organisation de fichiers, de la prévisualisation et de la publication :
Édition de code : Utilisez des snippets (bouts de code) standards ou définissez vos propres snippets. Auto-complétion des différents langages supportés, vérificateur orthographique, visualisation graphique de l’arborescence du code
Organisation de fichiers : Workspace vous propose une nouveau mode de travail qui combine les tabulations que tout le monde connaît, organisés dans une barre verticale. Ceci s’avère très pratique lorsque vous travaillez sur beaucoup de fichier en même temps.
Prévisualisation en direct : L’application intègre la même fonctionnalité de prévisualisation en direct que CSSEdit.
Publication et transfert de fichiers : Espresso vous propose une nouvelle représentation graphique des fichiers que vous êtes sur le point de mettre en ligne ou de supprimer. Pratique pour rester “synchronisé” avec votre serveur tout en évitant les erreurs.
Vous pouvez tester Espresso pendant 15 jours, l’application coûte ensuite 59,95 €. Si vous possédez déjà une version de CSSEdit, une réduction de 10 € est appliquée.
Akismet est un plugin qui identifie et bloque les commentaires et trackbacks considérés comme spam sur un blog. Il s’intègre dans la plupart des systèmes de blogs tels que wordpress ou expression engine.
Cette solution est gratuite pour une utilisation personnelle, et si vous faites plus de 500 $ de bénéfice avec votre blog, Akismet vous propose une API Key commerciale.
En utilisant Akismet, vous enrichissez la base de données de spam communautaire et améliorez le service.
Nous avons récemment mis en place cette solution sur l’ensemble des sites du réseau Two December : Motion Reels, Devenir Auto Entrepreneur, Web Creative pour nous aider à la modération de commentaires spam.
C’est le défit que c’est lancé AppsAmuck il y a quelques mois afin de faciliter l’apprentissage du développement pour iPhone aux personnes novices et confirmées.
Chaque jour, le défit monte d’un cran et réutilise les connaissances déjà acquises pour finalement faire un grand tour d’horizon des possibilités offertes par le développement et l’utilisation de fonctions telles que la géolocalisation ou l’appareil photo.
Vous aurez pour chacune de vos journées d’apprentissage un tutorial clair et détaillé, accompagné des codes sources de l’application. En moins de 31 jours, vous aurez toutes les armes nécessaires pour innover, impressionner, et même peut-être vivre de l’ébullition applicative autour du développement mobile pour iPhone.
Un design pattern, ou patron de conception est destiné à résoudre les problèmes récurrents d’un développeur. Ces patrons peuvent aussi s’appliquer pour des problèmes liés au Web.
Les patterns font ainsi une entrée discrète sur le Web mais pourraient rapidement modifier nos habitudes en matière de développement de sites ou services web.
Un site, Welie.com, regroupe déjà une multitude de web patterns, liés à des problèmes récurrents pour le Web :
Navigation
Interactions basiques
Recherche
Affichage des données
Personnalisation
Shopping
Faire des choix
Permettre la saisie de données
Divers
Sur ce site, le problème que l’on tente de résoudre est clairement expliqué (ex : The user needs to find an item in the main navigation), et la solution qui s’offre à vous est illustrée de captures d’écran et de liens vers des démonstrations.
Des conseils utiles vous permettent aussi de savoir dans quelles situations utiliser ce genres d’effets.
Et vous, pensez-vous que les patterns vont changer nos méthodes de développement ?
Le froid fait sont grand retour et si vous n’avez pas encore habillé vos pages de tenue hivernale, il n’est pas trop tard. Découvrez Snowstorm, effet javascript qui permet d’ajouter en quelques copier/coller de la neige à vos pages.
Snowstom est un effet de neige qui tombe, en Javascript, que vous pouvez facilement intégrer à vos pages. L’utilisation du script est complètement gratuite.
Le script a été pensé pour être facile d’utilisation. Il n’y a qu’un fichier javascript qui fournit l’effet neige. Les seuls autres fichiers sont des images de flocons de neige utilisés par Snowstorm. L’effet fonctionne sur la plupart des navigateurs (IE 5+, Safari, Firefox)
Personnalisation
Vous pouvez ajuster la vitesse de la neige, la quantité de neige, le vent. Vous pouvez aussi modifier les interactions de la neige avec les mouvements de la souris.
BgPatterns est un service web qui permet de créer des fonds avec des motifs et des textures prédéfinis, vous pouvez régler la taille, l’opacité ainsi que l’orientation et les couleurs.
Vous pouvez découvrir en temps réel le résultat de la combinaison que vous aurez sélectionné et par la suite télécharger le résultat sur votre ordinateur au format jpeg.
BgPatterns est un service web qui permet de créer des fonds avec des motifs et des textures prédéfinis, vous pouvez régler la taille, l’opacité ainsi que l’orientation et les couleurs.
Vous pouvez découvrir en temps réel le résultat de la combinaison que vous aurez sélectionné et par la suite télécharger le résultat sur votre ordinateur au format jpeg.
Capture d’écran
Vous avez la possibilité de vous enregistrer sur le site pour sauvegarder vos créations préférées mais aussi découvrir les textures créées par les autres utilisateurs et voter pour vos favorites pour qu’elles soient élues “textures du jour ” ou ” la meilleur de tous les temps “.
Vous pourrez également créer votre Home page avec la texture de votre choix.
Malgré un nombre de textures et de motifs de base assez limité les possibilités sont multiples et permettent une personnalisation suffisante pour pouvoir réutiliser ses textures sur son site internet sans que l’on ne la retrouve de partout.
Je suis graphiste print et webdesigner, j’exerce ma passion de Grenoble à Montpellier et ces derniers temps je m’interesse au développement web et au motion design.
Les outils de validation vous permettent de vous assurer que la structure du code que vous avez écrit est valide.
Ces validateurs vous permettent aussi de détecter les zones de votre code qui comporte des erreurs. Le validateur du W3C vous explique chacune des erreurs et vous propose la solution adéquate.
La validation de votre code vous assure aussi une visibilité optimale sur les moteurs de recherche. Si votre code est correctement structuré, les crawlers et spiders n’auront pas de problèmes pour indexer votre contenu.
Le W3C a mis en place plusieurs outils de validation :
Notons aussi l’existence d’un outil Canadien bien pratique qui permet de valider plusieurs pages, et même tout un site en un click. Parfait pour peaufiner son site :
Typetester est un site qui vous permet de comparer facilement 3 différents types de polices. Il propose des listes de polices selon les systèmes dans lesquelles elles sont installées par défaut (polices par défaut pour mac, windows, window vista).
Le site permet aussi d’exporter les résultats de vos recherches et expérimentations sous forme de CSS, et en fait le compagnon idéal en matière de typographie web.
La notion de framework CSS est toutefois plus récente mais offre des avantages similaires qui visent à simplifier la vie des web designers pour la mise en page de sites Internet. Cette liste vous permettra de faire votre choix dans les diverses solutions qui s’offrent à vous.
Un framework CSS se compose principalement de plusieurs de feuilles de styles qui servent de base dans l’intégration d’une page web. Elles ont généralement pour but de :
D’initialiser des propriétés CSS par défaut dans tous les navigateurs. En effet, l’une des plus grande difficultés dans un travail de mise en page vient du fait que les navigateurs définissent des propriété de texte, de marge, de police, (...) différentes et le framework CSS va faire en sorte que toutes les propriétés soient identiques sur tous les navigateurs.
Ils permettent aussi un positionnement des éléments par grille (grid layout). Ceci est très pratiques pour facilement mettre en page des modèles complexes composé de plusieurs colonnes. Vous n’aurez plus à vous soucier des flottements qui ne s’arrêtent plus de flotter et des colonnes qui bizarrement parfois ne flottent pas.
Ils peuvent aussi selon les cas prendre en charge l’apparence des formulaires, des tableaux et des styles destinés à l’impression.
Avantages et inconvénients
Le gros désavantage vient du fait que les frameworks vous obligeront à utiliser des classes qui seront déjà définies (cela ne vous empêche pas bien entendu d’utiliser vos propres classes), et vous aurez parfois besoin d’utiliser plusieurs div alors qu’une seule aurait pu suffire. Même si, au final cela ne change pas grand chose pour l’utilisateur final, la valeur sémantique d’un document s’en voit affectée . Si la sémantique est votre priorité, vous pouvez opter pour un simple reset des styles.
L’utilisation de frameworks CSS se traduit toutefois par un gain de temps énorme, surtout si vous êtes habitué à utiliser des grilles pour designer vos sites, et si vous avez à mettre en page un site de type magazine (des colonnes, des colonnes, et encore des colonnes).
Ici, chez Web Designer Things, nous utilisons Blueprint.
9 Frameworks CSS pour vous simplifier la vie
Blueprint
YAML
Boilerplate
Yahoo! UI Library: Grids CSS
Elements CSS Framework
WYMstyles CSS Framework
Schema Web Design Framework by David Golding Design
L’arrivée de l’iPhone dans le marché du mobile a complètement révolutionné notre manière de naviguer sur Internet lors de voyages ou de déplacement. Il est rapidement devenu la quatrième plateforme la plus utilisée pour surfer sur la toile, juste après Windows, Mac et Linux, laissant derrière lui d’autres systèmes comme Symbian OS, SunOS ou Playstation.
Les utilisateurs d’iPhone et iPod Touch représentent ainsi un marché considérable que vous ne saurez que mieux toucher en développant des sites adaptés pour un affichage mobile.
Rappelez-vous ce à quoi ressemblait le web mobile en 2006 : des services WAP mal référencés et pour la plupart incompris ou inutilisés par le grand public, des coûts de navigation exhorbitants, et des navigateurs mobile incapables de comprendre la moindre instruction de mise en forme CSS, exception faites de certains Smartphones professionels.
Avec l’iPhone, Apple a su faire tomber ces barrières, notamment grâce à Safari mobile. Celui-ci est capable d’afficher et de rendre utilisable les sites optimisés pour un grand écran d’ordinateur sur un petit écran, et avec la technologie multitouch, le duo est parfait.
Alors, pourquoi se casser la tête à créer des sites pour l’iPhone alors que celui-ci peut déjà parfaitement afficher des sites optimisés pour de grands écrans ? Tout est question d’optimisation.
Un site optimisé pour un affichage mobile offrira une expérience utilisateur beaucoup plus agréable et enrichissante car les internautes n’auront pas à se soucier de zoomer pour distinguer telle ou telle zone d’un site. Dans le meilleur des cas, ils pourront même avoir l’impression d’utiliser une application plutôt qu’un site Web.
Applications iPhone vs. Application Web iPhone : Et les vraies applications dans tout ça ?
L’utilisation du SDK d’Apple permet de tirer davantage parti des performances du téléphone et de faire des choses que nous ne serons jamais capables de faire sur un site Web. Certes. Mais cela vous oblige à apprendre un nouveau langage, à faire valider votre application par Apple qui a tous les droits de la refuser, et ne rend votre travail accessible que par l’intermédiaire d’un système : l’AppStore.
Tenons-nous en à ce que nous savons faire de mieux des sites Internet. Safari Mobile interprète HTML, Javascript et CSS, et certaines fonctions vous permettent même de détecter de manière dynamique l’orientation de l’iPhone. Autant dire que nous avons là sufisamment d’outils pour développer des choses merveilleuses.
Google en est l’exemple parfait : Gmail, Google Calendar, Google Reader et plusieurs autres services ont été optimisés pour l’iPhone. Non pas sous forme d’applications se basant sur le SDK mais sous forme de sites Internet dynamiques optimisés pour Safari Mobile.
Comment développer un site optimisé pour l’iPhone ?
Nous vous proposons ci-dessous une liste de liens qui vous permettront de débuter dans le développement de sites Internet destinés à l’iPhone. Des tutoriaux étape par étape, des framework permettant de rapidement mettre en place des sites ressemblant à des applications natives, des éléments graphiques, etc… Vous avez là toutes les ressources nécessaires pour commencer.
N’hésitez pas à nous faire part d’autres ressources que vous auriez découvert ou à nous donner le lien de sites pour iPhone que vous avez développé !
Un autre simulateur, cette fois sous forme de site Internet pour tester votre travail sur l’iPhone. À utiliser avec Safari de préférence. http://www.testiphone.com/
iUI
Librairie permettant de reproduire l’interface utilisateur d’applications iPhone avec du simple HTML. Permet de détecter l’orientation de l’iPhone. Offre une expérience utilisateur “iPhone-like”. Vous trouverez ci-dessous un tutorial pour iUI http://code.google.com/p/iui/
Différents exemples destinés à l’iPhone desquels vous pouvez vous inspirer. Testez avec votre iPhone pour vous faire une vraie idée. http://groupaware.mobi/iphone/index.html
Les galeries Web sont des sources inépuisables d’inspiration. Elles permettent aux web designers de prendre la température sur les dernières tendances graphiques, de découvrir des ensembles de couleurs sympas ou des mises en page originales.
Ces galeries, qui proposent la plupart du temps l’inscription gratuite d’un site, sont aussi des outils de communication efficaces lors du lancement d’un nouveau site.
Les visiteurs de ces galeries, souvent inscrits par flux RSS peuvent rapidement apprendre l’existence de votre site. Cela dépend des galeries et du nombre de galeries sur lesquelles vous vous afficherez, mais dans mon cas, l’inscription de mon portfolio benjamindavid.cc dans quelques d’entre elles me ramène chaque mois quelques milliers de visites.
Référencement
Même si les secrets sur le fonctionnement des moteurs principaux moteurs de recherche sont des informations bien gardées, une chose reste sûre, des liens entrants vers votre site ne peuvent qu’être bénéfiques, en particulier si vous lancez un nouveau site. Toutes les inscriptions que vous ferez seront autant de points d’entrée vers votre site que des moteurs comme Google sauront reconnaître et apprécier.
Les sites qui viennent tout juste de se créer mettent plusieurs jours, même parfois plusieurs semaines avant d’apparaître dans les résultats des moteurs. Les différentes expériences que j’ai pu avoir ont montré que l’inscription d’un site dans des galeries à forte audience (ex: bestwebgallery.com) tendaient à accélérer ce processus.
Il existe différents types de galeries : Sites CSS, Sites Flash, Sites conformes W3C, Print, ... Bref tout le monde peut y trouver son compte. Vous en trouverez quelques-unes ci-dessous. N’hésitez pas à nous faire part des galeries Web que vous connaissez dans les commentaires !
Animez les images de votre site avec cette collection de galeries, diaporamas et autres lightboxes pour le framework javascript Mootools. Photos de famille, de vacances, ou travaux créatifs, ces scripts vous permettront de présenter vos images de différentes manières. Chacun de ces scripts permettent d’afficher des images sans avoir à recharger la totalité de la page, et ne nécessitent pas l’utilisation de Flash. Dur pur XHTML, CSS, Javascript !
Expression Engine est un système de publication qui sait se plier à la plupart de vos besoins en matière de web. Il permet la mise en place rapide de sites dynamiques, ou de blogs, et les divers “Add-On” ou modules vous permettront d’intégrer de nouvelles fonctionnalités au système (e-commerce, galeries, ...).
La sortie d’Expression Engine 2 a été annoncée pour la fin de l’été. Les développeurs d’Ellis Lab l’ont complètement réécrit afin de baser ce nouveau système sur Code Igniter. Code Igniter est le framework PHP développé par Ellis Lab et distribué gratuitement sur codeigniter.com. Expression Engine 2 rejoint ainsi la communauté de Code Igniter, déjà très active et florissante.
L’interface a été complètement redissinée, le module de gestion de fichiers a été totalement réécrit, mais Ellis Lab est resté très discret sur les nouvelles fonctionnalités de cette nouvelle version. Certaines rumeurs parlent d’un module très complet d’e-commerce qui pourrait faire son apparition, toujours est-il que la fin de l’été approche, et nous devrions avoir réponse à toutes nos questions.
Expression Engine 2 pourrait tout d’abord être lancée en version “béta”, permettant ainsi aux développeurs de modules de mettre à jour leurs scripts pour les rendre compatible avec le nouveau système.
Mootools, célèbre Framework Javascript/Ajax est sorti aujourd’hui après 1 an et demi de développement. Le nouveau Framework a complètement été réécrit, notamment le coeur (Core) du système, ainsi que de nouveaux plugins qui l’accompagnent. La version “1.2” ne signifie donc pas simple révision mineure car c’est une version toute nouvelle dont nous avons à faire là.
Ceci signifie aussi que les scripts que vous avez déjà écrit pour une version antérieure de Mootools ne seront peut-être pas compatibles. Toutefois, le téléchargement de Mootools 1.2 peut s’accompagner d’un kit de compatibilité qui permet de rendre fonctionnels vos anciens scripts.
Les habituelles démonstrations de scripts Mootools ont été mises à jour pour votre plus grand plaisir. N’hésitez pas à y jeter un oeil pour découvrir les nouveautés de cette nouvelle version tant attendue.