Le blog de nebuloz

Amis graphistes et amis designers, voilà un sujet casse tête et qui prend énormément de temps dans les phases de tests et de validation. En effet, rien n’est plus contraignant que de tester sur les différents navigateurs et intégrant les différences d’os. Impossible de tester toutes les possibilité.

Je viens de trouver un outil qu’il est nécessaire de placer dans les favoris. Ce site browsershots.org va vous permettre de tester toutes ces possibiltés.

“Browsershots réalise des captures d’écran du design de votre site dans différents navigateurs. C’est un service en ligne open-source et gratuit créé par Johann C. Rocholl. Quand vous soumettez votre adresse internet, elle est ajoutée à la file d’attente. Un certain nombre d’ordinateurs ouvriront votre site internet dans leur navigateur. Ils feront donc des captures d’écran et les enverront sur ce serveur central.”

Après avoir soumis votre site, un compte rendu est fourni. Attention aux surprises…

Dans le monde de la création de site internet, la compétition est dure et acharnée. On peut cependant parler de l’agence du bleu en ligne. Cette petite agence propose à tous les professionnels un PACK permettant d’obtenir un site internet en 48heures

Comment ça marche?

Vous avez bien entendu CMS. L’agence du bleu en lign a mis en place un CMS de son crue qui prend en compte toutes les spécificités des différents métiers des professionnels. Via une interface d’administration, il est possible de maitriser totalement la gestion de son site internet. Le nombre de page est illimité, le texte est saisi via un rich text editor (ce dernier peut gérer les images sur le serveur).

Et les mairies?

Une des autres spécificités de l’agence du bleu en ligne, c’est qu’elle propose une offre destinée aux mairies. Ainsi, les communes peuvent possèder un véritable portail d’informations permettant d’informer en temps réel les concitoyens. Cette création de site pour les mairies offre toute les fonctionnalités d’un site pour les mairies.

On a aimé

Personnellement j’ai aimé la qualité des designs, le graphisme très propre du site. L’interface de saisie est simple t conviviale. Je regrette que le mode blog ne soit pas intégré.

http://www.csszengarden.com/ C’est pour moi la référence dans le monde du CSS. En visitant ce site, on comprend rapidement la puissance du CSS. Le principe est très simple. Sur la base d’une seule page html, des designers proposent l’habillage. On en prend plein les yeux

http://www.cssbeauty.com/

http://cssvault.com/

http://www.stylegala.com/

http://www.webcreme.com/

http://kuler.adobe.com/ un site pour les tonalités de couleurs. Vous voulez avoir des palettes de couleurs web2.0, c’est ici qu’il faut vous rendre.

Voilà pour les meilleurs, ceux sur lesquels je me rends régulièrement. Vous pouvez également jeter un oeil sur :

• http://cssgalaxy.com/
• http://cssremix.com/
• http://www.csstux.com/
• http://www.cssbloom.com/, une galerie sous forme de blog
• http://www.cssclip.com/
• http://www.csscollection.com/

Essayez de taper “templates gratuits” ou “free tremplate” dans google, et vous allez voir qu’il n’est vraiment pas très facile de trouver des sites proposant des templates gratuits de qualités.

Personnellement il m’a bien fallut plusieurs jours pour sortir cette liste de 10 sites. En la matière, on peut facilement distinguer les annuaires de templates, qui vont vous aider à rechercher des templates selon une série de critères (le nombre de colonnes, les couleurs dominates etc..), et les sites des webdesigners de la toile. Ces annuaires et ces webdesigners sont très intimement liés, car les uns ne peuvent pas être connus sans les autres, et réciproquement.

Les annuaires de templates gratuits

• http://www.oswd.org/
• http://www.freewebsitetemplates.com/
•  http://www.templateworld.com/free_templates.html de très beaux et très pros templates
•  http://www.freecsstemplates.org

Enfin dans le domaine des sites annuaires, il est important de citer le site officiel des templates de wordpress : 

• http://themes.wordpress.net/

Les sites des webdesigners

Ces designers font parti, à mon sens, des designers les plus prolifiques de la toile. Ils font partie des ceux qui produisent indéniablement de la qualité !

• http://www.sixshootermedia.com/free-templates/
• http://www.studio7designs.com/open_source_templates.cfm
• http://templates.arcsin.se/category/website-templates/
• http://www.elated.com/pagekits/ des templates artistiques
• http://www.freephotoshoptemplates.com/templatesbox/index.htm

Tout le monde le sait, mais pour créer un site internet digne de ce nom (web2.0 de préférence), l’utilisation de photoshop est indispensable. Si vous ne passer pas par cette étape (elle permet en effet de positionner les éléments, de créer un snapshot général qu’il sera facile de présenter au client) il va falloir vous y mettre, à moins que vous ne soyez rester au papier au sciseau et au crayon de papier.

En tout état de cause, je suis tombé sur un style layer pour photoshop regroupant une bibliothèque très fournie de style très WEB2.0.

Le téléchargement se fait sur le site de deziner folio.

En effet, il n’y a pas que bloc note pour la gestion de projets web en PHP. Est-il utile de préciser que la réussite d’un projet tient avant tout dans l’organisation de l’équipe et des produits utilisés.

Personnellement, j’ai un petit faible et je conseille eclipse. Tout simplement car ce produit est un réel investissement en ce sens qu’il est prévu pour du multi langage. De plus, un module eclipse permet l’intégration de nouveaux plugin. Enfin, l’option de travail collaboratif avec l’intégration de SVN ou CVS est indispensable dans la gestion de projets où interviennent plus de deux personnes.

Dojo est l’API de référence dans le monde AJAX. Cette API est une très bonne entrée en matière pour mettre de l’AJAX dans son site.

Tout d’abord, une fois téléchargée et installée (attention il vous faudra un serveur pour lancer les démos), cette API trouve toute sa puissance à travers une démo très conviviale qui permet d’immédiatement se rendre compte de sa puissance. Ces démos ont également le méritent de bien nous faire comprendre comment l’API fonctionne.

DOJO regroupe de nombreuses fonctionnalités :

• l’aide à la validation des formulaires,
• la mise en page,
• la gestion des menus par onglets
• etc…

Mais Dojo c’est également quelques petites cerises sur le gateau avec notamment :

• le menu fisheye (j’adore!),
• les graphiques,
• l’intégration google map

Dojo toolkit se place donc dans les API indispensables pour la gestion des sites web2.0

Prototype window est un projet open source permettant d’intégrer une gestion de fenètres dans une page HTML. Ce projet s’appuie sur les librairies prototype et scriptaculous.

Vous possédez un site dans lequel l’internaute ouvre des popup, des fenètres, saisit des informations à travers des formulaires? Alors cette API est faite pour vous.

Prototype window est une API très tendance qui vous permet de donner à vos popups, et messages utilisateurs un nouveau souffle.

En temp de développement, cette api demande très peu d’investissement. Comptez une à deux heures pour lire la documentation, appréhender les principes et intégrer à votre code. Le point très positif est donc la facilité d’intégration et sa touche très web2.0. L’API fournit également plusieurs styles de fenètres et plusieurs types d’ouvertures (fondu et arrière plan grisé, ouverture traditionnelle …) De plus, la documentation fournie avec l’API se suffit à elle-même en offrant une large variété d’exemples (c’est surtout ce point qui est appréciable).

En un mot comme en cent, cette API nous a particulièrement séduite avec sa documentation complète et sa facilité d’intégration

De nombreux sites internet utilise l’API youtube. Comment l’utiliser? Comment placer des viséo et rechercher dans cette base de données? L’api de youtube offre une série de lien (url) retournant des fichiers XML. Elle permet de récupérer les vidéos enregistrées sur le site, rechercher des vidéos selon des mots clés donnés, obtenir le détail d’une vidéo. Nous allons, dans les lignes qui vont suivre, vous donner toutes les informations pratiques nécessaires, afin d’intégrer simplement l’API à votre site. Sam Napolitano, a développé une petite api permettant d’effectuer des requètes sur le serveur de youtube, et d’en extracter les vidéos. 1) Les outils a) Rendez vous sur le site de youtube développeur afin d’obtenir un identifiant développeur. b) Télecharger la classe class.youtube. 2) Les méthodes Cette classe est constituée de 2 méthodes de recherche:

• - yt_tag($dev_id, $tag, $howmany,$page), qui permet de rechercher des vidéos correspondants aux mots clés passés en paramètres. Les paramètres de cette méthode sont $dev_id l’identifiant développeur, $tag les tags à rechercher, $howmany le nombre de lignes par page, $page la page de démarrage de la recherche
• - yt_user($dev_id, $user, $howmany), qui permet de rechercher les vidéos postées par un utilisateur. $dev_id l’identifiant développeur, $user le nom de l’utilisateur, $homany le nombre de résultats

Ces deux méthodes font appel au serveur youtube qui recherche dans sa base. Les résultats sont affichés par chacunes des méthodes par l’intermédiaire de la méthode yt_results. Pour formatter la liste de résultats, vous devrez donc modifier cette méthode. Il suffit de modifier l’avant dernière ligne de la méthode yt_results. 3) RECHERCHEZ DES VIDEOS YOUTUBE Dans votre page php, incluez la classe

require_once('class.youtube.php');

A l’endroit où vous souhaitez afficher les résultats placer le code :

$yt = new youTube;
 $yt->yt_tag("votre ID", "tag1", 10, 1);

4) AFFICHEZ UNE VIDEO Là encore rien de plus simple. Il suffit de placer dans votre page le code (remplacer ID_VIDEO par l’identifiant de la vidéo

<object width=”425″ height=”350″><param name=”movie” value=”http://www.youtube.com/v/ID_VIDEO“></param><param name=”wmode” value=”transparent”></param><embed src=”http://www.youtube.com/v/ID_VIDEO” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”350″></embed></object>

5) TRAITEZ LES ELEMENTS DE LA VIDEO Les champs de la video peuvent être obtenu dans la méthode yt_results. Il est ainsi possible de gérer l’url de la video (url), la description de la vidéo (description), la vignette de la video (thumbnail_url) et l’id de la vidéo. Une fois récupérés, ces champs peuvent être stockés dans votre base de données.