Plusieurs nouveaux tutoriels sont en ligne depuis quelques instants. Il sont le travail d'une collaboration avec Olivier Patry qui a eu la gentillesse de faire partager ses articles sur le site d'Alsa.
Alsacréations accueille donc un nouveau rédacteur (ça en fait deux au total !) et cinq nouveaux tutoriels tout frais :
- Un roll over en CSS avec une seule image
- Ouvrir des liens externes dans dans une nouvelle fenêtre
- Galerie photo avec JavaScript
- Réalisation d'un design complet (XHTML / CSS) en 5 étapes
- Faire un Style switcher (changement d'habillage) en PHP
Have fun !
Commentaires
Le tuto "galerie photo avec Javascript" me rappelle ce qui a été fait
ici : www.stunicholls.myby.co.u...
ici: www.stunicholls.myby.co.u...
et ici: www.alistapart.com/articl...
Le premier n'est pas nouveau si ? en tout cas il y en avait un semblable si mes souvenirs sont bons.
@RNB, pour les 2 premiers, non, le principe est à base de Full CSS. Le JavaScript est ici utilisé.
Pour la version sur ala, oui, c'est assez similaire en effet ;)
Excellent le Style switcher, meilleur que le mien (que je conserve toutefois :)
Bravo pour ce site, référence dans le domaine de la conception web.
"Ouvrir des liens externes dans dans une nouvelle fenêtre"
Il serait intéressant de proposer également une technique pour désactiver le comportement d'ouverture de nouvelle fenêtre. Une petite case à cocher par exemple, histoire que les visiteurs puissent choisir de ne pas ouvrir le lien dans une nouvelle fenêtre, chose qui est justement impossible normalement...
Il me semble que je précise que ce genre de chose est possible à faire dans le tuto nan ?
Tu me met dans le doute, je vais le relire :D
Ahh bah nan ! Pourtant c'est tout l'interet de ce type de méthode ^^
Si tu veux t'en charger, ça sera avec plaisir, j'ai pas trop le temps pour le faire personelement.
Sinon, pour revenir sur le tuto de la galerie photo, en fait, la version d'ala conserve une partie de javascript dans la source HTML, et c'est assez moyen ça :/. Toujours extraire le JavaScript de la source (idem avec les éléments de mise en forme ;))
A force de vous donner tout ce mal, vous allez finir par nous rendre flemmards... Encore merci pour tous les services que vous rendez!
@Olivier: " pour les 2 premiers, non, le principe est à base de Full CSS. Le JavaScript est ici utilisé."
Oui, je voulais juste signaler qu'on pouvait obtenir un résultat similaire avec CSS uniquement.
J'utilise le script de Ala sur mon site depuis qqs mois déjà. Je voulais en faire une trad française, mais le tien est là maintenant :-)
cool,
j'aime beaucoup la galerie photo que j'ai utilise pour quelqu'un qui voulait un petit album photo!
j'ai juste une question, serait-il possible d'ajouter des boutons pour passer a la photo suivante/precedente?
seighin > euh, ça serait à réfléchir !
Il y a un truc à l'étude par 20cent en ce moment sur le forum qui semble prometteur et qui implémente ce genre de fonctionnalité.
Pour suivre "l'affaire" :
forum.alsacreations.com/t...
@RNB, comme quoi, c'est bien que les tutos arrivent sur alsa, parceque ça fait un bout de temps qu'il existe chez moi le tuto :D
www.elmoustikoblog.net/tu...
Ahh oui j'oubliais, la version CSS implique de regrouper toutes les images dans la même page, et là avec beaucoup d'images, ça peut être un peu problématique à charger contrairement à d'autres solutions.
Le même "problème" se pose avec la version en cours de 20cent présenté plus haut.
Super simple est d'une efficacité redoutable la gallerie d'image. En quelques mins, il était installé et fonctionne à merveille. Merci encore de nous aider si bien ;)
Il manque une chose importante au style switcher : le fait que lorsqu'on active un theme, celui-ci n'apparaisse plus, ou apparaisse différemment, dans la liste des styles. En effet, je trouve extremement horripilant d'arriver sur un site, de voir une liste de themes, d'en essayer un, ouais pas mal, un autre, bof, un autre, nul, un autre, affreux, mince c'était lequel déjà celui qui était bien ..
:)
Euh, j'ai pas capté ce que tu disais Ozh :/
Si tu as un truc à proposer (niveau code), n'hésite pas ;)
Je crois qu'Ozh parlait de modifier l'apparence dans le select du nom de la skin utilisée, soit en la faisant disparaitre de la liste soit en modifiant son apparence.
Concernant l'article sur "Faire un Style switcher", il y a également celui-ci que Elentar vient d'écrire : www.elentar.net/?2005/04/...
Personnellement, sans vouloir te vexer, je trouve que celui de Elentar est mieux (ou plutôt <plus complet>) surtout parce qu'il prend en compte le style switcher intégré au navigateur. Ce que tu ne fais pas dans ton tutorial.
Concernant le "ouvrir les liens externes dans de nouvelles fenêtres", je trouve que tu aurais dû plus poussé le fait que ce n'est pas conseillé. Car maintenant, je suis presque sûr que plein de sites vont utiliser cette méthode (même si elle est bonne, la meilleure méthode est de laisse le choix complet à l'utilisateur et donc de ne rien faire).
Mais bon bref, jolis tutoriels :)
Sympa d'incorporé les tutos d'olivier dans ce site. J'utilise déjà le script du style switcher depuis quelque temps et c'est le bonheur.
Un problème néanmoins : on ne peut pas imprimer correctement les pages à cause du <pre></pre> pour les codes.
pour les galeries photos ben moi j'ai réussi à en faire une full css sans avoir à mettre toutes les photos sur la page :-)
C'est une trés bonne idée d'incorporer les tutos d'Olivier à Alsacreations. Ce sont des ressources de qualité qui méritent d'être mise en avant.
J'emettrais juste 2 reserves.
1- Le script d'ouverture de liens externes, si, dans la forme, est un bon exemple de syntaxe et d'implementation de javascript, dans le fond est un mauvais exemple de contournement de la norme/doctype. Dans sa forme actuelle je pense qu'il n'a pas sa place sur un site aussi populaire qu'Alsa (on a déjà vu les ravages causé par l'emploi du terme pseudo frames pour définir les includes PHP...), et devrait être modifié pour montrer un exemple d'utilisation "légitime" de JS.
2- Le tuto sur les rollovers en images fait doublon avec celui de Raphaël. Il aurait été bienvenue de voir d'autres amélioration sur la mise en place de ce principe. Un exemple (tiré d'un de mes tutos) utiliser des valeurs en pourcentage (25%, 50%...) ou à l'aide de mot-clés (left, right, top, bottom) afin de produire du code à la fois réutilisable et plus facilement à maintenir.
à part ces 2 petites remarques, trés bonne initiative de votre part. Et merci encore de partager ces ressources avec la communauté.
C'est qui Olivier Patry?
^^ Welcome!
Interessantes les remarques et je les partages dans l'ensemble ;)
Concernant certaines au niveau du manque d'info, ou du fait que ça ne soit pas poussé à fond, c'est pour 2 raisons principales :
- ne pas rentrer trop dans le détail et présentée l'idée générale et laisser réfléchir le lecteur sur les possibilité d'implémentation et d'amélioration histoire qu'il ne reste pas passif avec un code tout prêt, même s'il fonctionne tout de même.
- un manque de temps à l'époque pour faire mieux/différent/... donc des remarques tout à fait justifiées ;)
Concernant le style switcher, en effet, un truc interessant serait de mettre les styles alertnatifs pour les navigateurs qui connaissent et de n'implémenter la version PHP que pour les navigateurs qui ne le font pas. Ou bien les 2 en utilisant les informations déjà contenue dans la source dans les <link />. A réfléchir, mais personellement je ne m'y attaquerais pas. Toute aide/collaboration sur mes tutos est acceptée et serait un plus ;)
Concernant l'ouverture des liens dans une nouvelle fenêtre, oui en effet, c'est pas top, la rédaction de ce tuto date du ""booom"" de la technique maintenant très peu recommandée présentée entre autre sur OpenWeb à l'époque (peut être plus maintenant, je n'en sais rien), mais il n'y avait aucun séparation entre structure et fonctionnalités, c'est à dire entre HTML et JavaScript ce que j'avais fait.
Il faudrait peut-être modifier l'usage de la technique pour par exemple l'ouverture de photos en fenêtre séparée parceque c'est pas si mal parfois ou quelque chose dans ce gout là...
Encore une fois, je ne m'en occuperai pas, j'ai d'autre priorités. Les tutoriels sont extremement importants pour ceux qui ne connaissent pas les techniques et il est important de les diversifier, cependant c'est extremement long à faire, rien qu'au niveau de la rédaction. Alors ne parlons pas de l'implémentation de la technique qui pour arriver à un degré de qualité suffisant pour être présenter dans un tuto est vraiment très important je trouve. Désolé donc de ne pas poursuivre (pour l'instant), mais c'est vraiment trop prenant.
Bonjour,
Des tutos intéressants à découvrir et du travail, beaucoup de travail pour en comprendre le fonctionnement. Pour ma part je garde les trois derniers, le tout dernier va m'aider à approfondir mon apprentissage de php.
Donc Merci :-)
En tout cas merci !
Encore une série de tuto à la hauteur de Alsa, des astuces qui ont le mérite de ne même pas avoir laissé pensé qu'elles étaient possible ^^...
Au passage "Ouvrir des liens externes dans dans une nouvelle fenêtre", y'a pas un 'dans' en trop :) ?
Erreur 404 sur tous les tutos :(