Commentaires pour HTML Zen Garden http://www.htmlzengarden.com The beauty in HTML code Thu, 02 Feb 2012 15:18:21 +0000 hourly 1 http://wordpress.org/?v=3.2.1 Commentaires sur First-letter et lettrine par Anonyme http://www.htmlzengarden.com/2010/04/first-letter_et_lettrine/#comment-10731 Anonyme Thu, 02 Feb 2012 15:18:21 +0000 http://www.htmlzengarden.com/?p=816#comment-10731 <p>Ou je peux trouver des modèles de lettrine ?? Pouvez-vous me donner des sites.</p> <p>merci d'avance.</p> Ou je peux trouver des modèles de lettrine ?? Pouvez-vous me donner des sites.

merci d’avance.

]]> Commentaires sur Ancres et déplacement progressif de l’ascenseur par D http://www.htmlzengarden.com/2009/10/ancres_et_deplacement_progressif_de_l_ascenseur/#comment-10457 D Mon, 30 Jan 2012 19:17:06 +0000 http://www.htmlzengarden.com/?p=652#comment-10457 <p>Merci beaucoup, j'ai finalement réussi mais cette fonction permet elle un déplacement en diagonale ?</p> Merci beaucoup, j’ai finalement réussi mais cette fonction permet elle un déplacement en diagonale ?

]]> Commentaires sur Ancres et déplacement progressif de l’ascenseur par fonds d'écran http://www.htmlzengarden.com/2009/10/ancres_et_deplacement_progressif_de_l_ascenseur/#comment-10431 fonds d'écran Mon, 30 Jan 2012 14:15:24 +0000 http://www.htmlzengarden.com/?p=652#comment-10431 <p>Bonjour, cela revient donc à bien maîtrise Jquery et toutes ses options ... voire même à aller un peu plus loin dans le "look", comme ici: <a href="http://blog.unesourisetmoi.info/" rel="nofollow">référencement efficace</a> avec la fonction ' return to top' qui apparait lors d'un scroll ... dont voici le code qui m'a servi pour le créer: <code><script type="text/javascript"> $(function () { var scroll_timer; var displayed = false; var $message = $('#message a'); var $window = $(window); var top = $(document.body).children(0).position().top; $window.scroll(function () { window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () { if($window.scrollTop() <= top) { displayed = false; $message.fadeOut(500); } else if(displayed == false) { displayed = true; $message.stop(true, true).show().click(function () { $message.fadeOut(500); }); } }, 100); }); }); </script> essayez vous verrez ;) @mitiés</code></p> Bonjour, cela revient donc à bien maîtrise Jquery et toutes ses options … voire même à aller un peu plus loin dans le « look », comme ici: référencement efficace avec la fonction ’ return to top’ qui apparait lors d’un scroll … dont voici le code qui m’a servi pour le créer: <script type="text/javascript"> $(function () { var scroll_timer; var displayed = false; var $message = $('#message a'); var $window = $(window); var top = $(document.body).children(0).position().top; $window.scroll(function () { window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () { if($window.scrollTop() <= top) { displayed = false; $message.fadeOut(500); } else if(displayed == false) { displayed = true; $message.stop(true, true).show().click(function () { $message.fadeOut(500); }); } }, 100); }); }); </script> essayez vous verrez ;) @mitiés

]]> Commentaires sur Ancres et déplacement progressif de l’ascenseur par D http://www.htmlzengarden.com/2009/10/ancres_et_deplacement_progressif_de_l_ascenseur/#comment-10430 D Mon, 30 Jan 2012 13:36:30 +0000 http://www.htmlzengarden.com/?p=652#comment-10430 <p>Bonjour,</p> <p>Cette fonction m'intéresse beaucoup mais, ne maîtrisant pas parfaitement la création web je me permets de demander si quelqu'un aurait l'amabilité de m'expliquer brièvement comment l'insérer dans le code html d'une page. Faut-il télécharger un fichier .js ?</p> <p>Merci</p> Bonjour,

Cette fonction m’intéresse beaucoup mais, ne maîtrisant pas parfaitement la création web je me permets de demander si quelqu’un aurait l’amabilité de m’expliquer brièvement comment l’insérer dans le code html d’une page. Faut-il télécharger un fichier .js ?

Merci

]]> Commentaires sur Ancres et déplacement progressif de l’ascenseur par Olivier C http://www.htmlzengarden.com/2009/10/ancres_et_deplacement_progressif_de_l_ascenseur/#comment-9852 Olivier C Wed, 18 Jan 2012 13:38:16 +0000 http://www.htmlzengarden.com/?p=652#comment-9852 <p>Je cherchais cet effet jQuery pour la prochaine mise à jour de mon design. Et votre solution fonctionne sans problème. Merci à vous.</p> Je cherchais cet effet jQuery pour la prochaine mise à jour de mon design. Et votre solution fonctionne sans problème. Merci à vous.

]]> Commentaires sur Motifs CSS3 avancés, est-ce le futur ? par Mehdi http://www.htmlzengarden.com/2011/11/motifs-css3-avances-est-ce-le-futur/#comment-9103 Mehdi Tue, 22 Nov 2011 00:46:45 +0000 http://www.htmlzengarden.com/?p=989#comment-9103 <p>@Vincent, oui je comprends bien l'idée. C'est également ma démarche, qui se base sur mes connaissances seulement ;)</p> <p>@Jeremie, oui data permet aussi de le faire, mais moins pratique à utiliser je trouve. Les seuls cas où je trouve efficace l'intégration d'images / css arrivent lorsqu'il y a des images ou motifs complexes ou irréguliers (même si des stars du CSS ont réussi à <a href="http://graphicpeel.com/cssiosicons" rel="nofollow">designer les icones iPhone seulement en CSS (à voir avec chrome)</a> ).</p> <p>Par contre, je n'hésite pas à les faire sous PShop quand j'ai des <strong>contraintes de compatibilité</strong>. En effet, le CSS3 n'est malheureusement pas exploité par tous les navigateurs (<a href="http://www.findmebyip.com/litmus" rel="nofollow">cf. tableau général</a> (IE : toujours à la traîne ), donc pour des questions d'ergonomie fonctionnelle, le CSS ne suffit pas. Je crois qu'il y a beaucoup moins de soucis pour les portables et tablettes.</p> <p>Il est vrai comme tu dis que cela dépend de qui va reprendre le taf, mais il est assez facile de progresser avec le CSS comparé à d'autres technos, quand on voit les sources dispos sur le net, la possibilité d'attraper le CSS de jolis sites en regardant le codesource de la page, et des outils qui te pré-mâchent le travail (<a href="http://www.colorzilla.com/gradient-editor/" rel="nofollow">par exemple pour les dégradés</a>)...</p> @Vincent, oui je comprends bien l’idée. C’est également ma démarche, qui se base sur mes connaissances seulement ;)

@Jeremie, oui data permet aussi de le faire, mais moins pratique à utiliser je trouve. Les seuls cas où je trouve efficace l’intégration d’images / css arrivent lorsqu’il y a des images ou motifs complexes ou irréguliers (même si des stars du CSS ont réussi à designer les icones iPhone seulement en CSS (à voir avec chrome) ).

Par contre, je n’hésite pas à les faire sous PShop quand j’ai des contraintes de compatibilité. En effet, le CSS3 n’est malheureusement pas exploité par tous les navigateurs (cf. tableau général (IE : toujours à la traîne ), donc pour des questions d’ergonomie fonctionnelle, le CSS ne suffit pas. Je crois qu’il y a beaucoup moins de soucis pour les portables et tablettes.

Il est vrai comme tu dis que cela dépend de qui va reprendre le taf, mais il est assez facile de progresser avec le CSS comparé à d’autres technos, quand on voit les sources dispos sur le net, la possibilité d’attraper le CSS de jolis sites en regardant le codesource de la page, et des outils qui te pré-mâchent le travail (par exemple pour les dégradés)…

]]> Commentaires sur Motifs CSS3 avancés, est-ce le futur ? par Jeremie http://www.htmlzengarden.com/2011/11/motifs-css3-avances-est-ce-le-futur/#comment-9100 Jeremie Mon, 21 Nov 2011 22:12:39 +0000 http://www.htmlzengarden.com/?p=989#comment-9100 <p>A noter que si le sujet c'est d'économiser des requêtes HTTP, l'usage du protocole data: est très efficace pour ça. De même, même s'il est vraie que CSS3 permet en général d'économiser des octets par rapport à l'usage d'image, il faut faire attention aux raccourcis hâtif et il faudra bien vérifier au cas par cas car dans certains cas, des images très bien optimisées peuvent être plus économes (Ok, je concède que peu de gens savent vraiment bien optimiser leurs images)</p> <p>En suite, affirmer qu'il est plus facile de maintenir des dégradés CSS3 à la main plutôt que d'ouvrir un outil d'édition d'image, ça reste à prouver. En fait, comme le dit Mehdi, ça dépend beaucoup de qui assure la maintenance. En général, les designer sont plus à l'aise avec Photoshop ou Illustrator. Et même pour les intégrateurs, la syntaxe des dégradés CSS est très loin d'être simple à lire et à maitriser (ça fait sans doute partie des syntaxes les plus difficiles de CSS... Les Animations CSS ne sont pas loin du compte non-plus).</p> A noter que si le sujet c’est d’économiser des requêtes HTTP, l’usage du protocole data: est très efficace pour ça. De même, même s’il est vraie que CSS3 permet en général d’économiser des octets par rapport à l’usage d’image, il faut faire attention aux raccourcis hâtif et il faudra bien vérifier au cas par cas car dans certains cas, des images très bien optimisées peuvent être plus économes (Ok, je concède que peu de gens savent vraiment bien optimiser leurs images)

En suite, affirmer qu’il est plus facile de maintenir des dégradés CSS3 à la main plutôt que d’ouvrir un outil d’édition d’image, ça reste à prouver. En fait, comme le dit Mehdi, ça dépend beaucoup de qui assure la maintenance. En général, les designer sont plus à l’aise avec Photoshop ou Illustrator. Et même pour les intégrateurs, la syntaxe des dégradés CSS est très loin d’être simple à lire et à maitriser (ça fait sans doute partie des syntaxes les plus difficiles de CSS… Les Animations CSS ne sont pas loin du compte non-plus).

]]> Commentaires sur Motifs CSS3 avancés, est-ce le futur ? par Vincent http://www.htmlzengarden.com/2011/11/motifs-css3-avances-est-ce-le-futur/#comment-9099 Vincent Mon, 21 Nov 2011 20:57:03 +0000 http://www.htmlzengarden.com/?p=989#comment-9099 <p>Hello Mehdi,</p> <p>Note que je ne veut freiner en rien à l’adoption des techniques CSS3. Je pose simplement une question sur leurs bonnes utilisations ; avec ici un exemple précis, très/trop avancé.</p> <p>Quand je lis le commentaire de Jérémie, je me dis que les techniques qui nous sont offertes sont nombreuses : autant choisir la meilleure en fonction de l’usage.</p> Hello Mehdi,

Note que je ne veut freiner en rien à l’adoption des techniques CSS3. Je pose simplement une question sur leurs bonnes utilisations ; avec ici un exemple précis, très/trop avancé.

Quand je lis le commentaire de Jérémie, je me dis que les techniques qui nous sont offertes sont nombreuses : autant choisir la meilleure en fonction de l’usage.

]]> Commentaires sur Motifs CSS3 avancés, est-ce le futur ? par Mehdi http://www.htmlzengarden.com/2011/11/motifs-css3-avances-est-ce-le-futur/#comment-9097 Mehdi Mon, 21 Nov 2011 19:52:55 +0000 http://www.htmlzengarden.com/?p=989#comment-9097 <p>Le CSS est de plus en plus riche en possibilités, toujours simple et bien pensé à la conception je trouve.</p> <p><strong>Côté performance</strong>, j'enrichis de plus en plus mes réalisations avec des clauses CSS (CSS3 si possible) et je ressens pas de ralentissements notoires sur le chargement des pages. Quand la connexion est lente, un petit laps de temps est remarquable, mais il reste très court. De plus, utiliser le CSS pour remplacer les nombreuses (petites ou grandes) images permet d'économiser de la bande passante et les requêtes HTTP.</p> <p><strong>Côté maintenance et évolution</strong>, on peut avoir le besoin de décliner des chartes de couleurs en fonction du module, de l'environnement dans lequel on est. Pour ce faire, on était obligé de retrouver les fichiers PSD originaux, lancer PShop et enfin décliner les variantes. Si le gabarit est un peu trop grand, rebelote... Avec le CSS, il suffit de retoucher le code. Il est même possible d'utiliser des frameworks CSS (tels que SCSS ou Less framework) pour coder les clauses dynamiquement et/ou intelligement.</p> <p>Si un intégrateur ou développeur reprend un site, le coût de maintenance est largement plus bas dans le cas d'un site codé en CSS qu'en images incrusté. Aussi CSS3 permet aujourd'hui de produire des effets (réflexions, transformation) bien sympathiques qu'il est plus long de faire avec un soft. Couplé avec du JS jQuery, les possibilités deviennent très grandes...</p> <p>Quelques rendus CSS3 : <a href="http://mashable.com/2010/06/04/awesome-css3-techniques/" rel="nofollow">http://mashable.com/2010/06/04/awesome-css3-techniques/</a></p> <p>Pour ma part, je suis déjà convaincu ;)</p> Le CSS est de plus en plus riche en possibilités, toujours simple et bien pensé à la conception je trouve.

Côté performance, j’enrichis de plus en plus mes réalisations avec des clauses CSS (CSS3 si possible) et je ressens pas de ralentissements notoires sur le chargement des pages. Quand la connexion est lente, un petit laps de temps est remarquable, mais il reste très court. De plus, utiliser le CSS pour remplacer les nombreuses (petites ou grandes) images permet d’économiser de la bande passante et les requêtes HTTP.

Côté maintenance et évolution, on peut avoir le besoin de décliner des chartes de couleurs en fonction du module, de l’environnement dans lequel on est. Pour ce faire, on était obligé de retrouver les fichiers PSD originaux, lancer PShop et enfin décliner les variantes. Si le gabarit est un peu trop grand, rebelote… Avec le CSS, il suffit de retoucher le code. Il est même possible d’utiliser des frameworks CSS (tels que SCSS ou Less framework) pour coder les clauses dynamiquement et/ou intelligement.

Si un intégrateur ou développeur reprend un site, le coût de maintenance est largement plus bas dans le cas d’un site codé en CSS qu’en images incrusté. Aussi CSS3 permet aujourd’hui de produire des effets (réflexions, transformation) bien sympathiques qu’il est plus long de faire avec un soft. Couplé avec du JS jQuery, les possibilités deviennent très grandes…

Quelques rendus CSS3 : http://mashable.com/2010/06/04/awesome-css3-techniques/

Pour ma part, je suis déjà convaincu ;)

]]> Commentaires sur Motifs CSS3 avancés, est-ce le futur ? par Jeremie http://www.htmlzengarden.com/2011/11/motifs-css3-avances-est-ce-le-futur/#comment-9081 Jeremie Sun, 20 Nov 2011 22:44:32 +0000 http://www.htmlzengarden.com/?p=989#comment-9081 <p>Salut,</p> <p>Bon, ben, c'est pas pour faire mon relou, hein, mais il existe un outil encore mieux que ça pour faire des motifs, et ça s’appelle SVG.</p> <ul> <li><a href="https://developer.mozilla.org/en/SVG/Element/pattern" rel="nofollow">https://developer.mozilla.org/en/SVG/Element/pattern</a></li> <li><a href="http://svg-wow.org/blog/category/pattern/" rel="nofollow">http://svg-wow.org/blog/category/pattern/</a></li> <li><a href="http://commons.wikimedia.org/wiki/Category:SVG_patterns" rel="nofollow">http://commons.wikimedia.org/wiki/Category:SVG_patterns</a></li> </ul> <p>Je ne rentre pas dans les détails, mais en gros : plus performant, plus riche, plus souple, plus complet et plus facile à produire avec des outils d'authoring (Illustrator, Inkscape) qui ont largement fait leurs preuves.</p> <p>Après, pour mixer CSS et SVG : background-image: url(mon-motif.svg) et roulez jeunesse (notez que tous les navigateurs, sans aucune exception, qui supportent CSS3 (background multiple, CSS gradients, etc.) supportent également SVG).</p> <p>Voili, voilou ;)</p> Salut,

Bon, ben, c’est pas pour faire mon relou, hein, mais il existe un outil encore mieux que ça pour faire des motifs, et ça s’appelle SVG.

Je ne rentre pas dans les détails, mais en gros : plus performant, plus riche, plus souple, plus complet et plus facile à produire avec des outils d’authoring (Illustrator, Inkscape) qui ont largement fait leurs preuves.

Après, pour mixer CSS et SVG : background-image: url(mon-motif.svg) et roulez jeunesse (notez que tous les navigateurs, sans aucune exception, qui supportent CSS3 (background multiple, CSS gradients, etc.) supportent également SVG).

Voili, voilou ;)

]]>