css 4 design » jQuery http://css4design.com Le blog de l'intégrateur web Thu, 26 Jan 2012 19:13:29 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur http://css4design.com/le-petit-journal-du-web-les-fruits-de-la-veille-ont-garde-leur-fraicheur http://css4design.com/le-petit-journal-du-web-les-fruits-de-la-veille-ont-garde-leur-fraicheur#comments Tue, 17 Jan 2012 19:42:53 +0000 Bruno Bichet http://www.css4design.com/?p=2724

La périodicité du blog est devenue irrégulomadaire à tendance bimensuelle… Malgré tout, je tiens à partager avec vous les fruits de la veille. Dans le panier : des trucs sympas et pratiques pour WordPress ; un plugin pour splitter du contenu avec jQuery ; des formulaires HTML plus efficaces ; une astuce toute simple pour connaitre personnellement vos visiteurs via Google Analytics, quelques liens pour compresser et organiser vos CSS et tout un tas d’autres choses dont l’énumération serait longue et fastidieuse.

Liens WordPress

WordPress Theme Generator

WP Generator Blog est assez bluffant : votre thème pour WordPress est plié en quelques clics, sans connaissance préalable en HTML, JS, PHP ou même CSS ! Changez les couleurs, le nombre de colonnes, etc. L’outil produit des thèmes compatibles à partir de WordPress 2.1 jusqu’à la version 2.7 au moins, et embarque le framework Yahoo! UI.

Affichez votre nombre de followers Twitter sur votre blog

Il n’y a pas que le compteur Google Feedburner pour gonfler notre égo virtuel. Le nombre de followers que l’on peut avoir sur son compte Twitter peut à lui seul vous gonfler un égo capable d’atteindre la blogosphère stratosphère ^__^ Le code fourni par wpRecipes est composée d’une partie à copier dans le fichier functions.php de votre blog et d’une autre partie à placer là où vous désirez afficher l’information.

Random « Read More »

Ces deux bouts de code dégottés sur wpguy affichent un lien « lire la suite » aléatoire pour chacun de vos articles. Le premier est à placer avant The Loop : 

 
<?php 
    $more_strings = array( 
        "Read More...", 
        "Keep on Reading...", 
        "Wait! There's more...", 
        "Read the rest of the article..."
    );
?> 
<?php 
    the_content($more_strings[rand(0,count($more_strings))]); 
?>

Liens intégration web

Organisation, compression, vos CSS vont adorer !

  • cleancss — Cet outil en version française très complet propose quatre niveaux de compression et permet de personnaliser les paramètres en précisant un gabarit de formatage pour votre feuille de style, dont voici un exemple de compression maximale,
  • Styleneat — Trie (ou pas) les sélecteurs ou les déclarations dans l’ordre alphabétique. Affiche les déclarations sur plusieurs lignes. Possibilité de coller la feuille de style, de saisir l’URL de la CSS ou enfin de l’uploader depuis votre poste de travail. Via roget.biz,
  • dustmeselectors — Extension pour Firefox qui traque les sélecteurs CSS inutilisés dans votre page web,
  • Em Calculator — Pratique pour obtenir des valeurs en em pour les éléments de votre document HTML à partir d’une taille exprimée en px,
  • Construct Your CSS — Construct est un éditeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya. Il montre que l’on peut mettre à la disposition des intégrateurs web une boite à outil, ainsi qu’un éditeur visuel pour faire des CSS et du HTML sémantique,
  • pagecolumn — Générateur de maquette en plusieurs colonnes avec CSS 2.0 en utilisant les %, les px ou les em. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets,
  • drawter — Déjà évoqué sur ce blog : drawter, dessiné, c’est gagné,
  • CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières qu vont avec) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !

Encore un effort !

Formulaires HTML efficaces en 10 étapes

Consultez l’excellent article de bbxdesign sur les 10 bonnes pratiques pour réaliser un formulaire basé sur la conférence de Luke Wrobleski de Yahoo! dont voici le sommaire :

  1. Aller droit au but,
  2. Alignement des labels,
  3. Aide et astuces,
  4. Validation,
  5. Actions primaires et secondaires,
  6. Actions en cours,
  7. Erreurs,
  8. Input inutiles,
  9. Organisation du formulaire,
  10. Engagement graduel.

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

  • JotForm — Création de formulaires en ligne,
  • webjackalope — 12 exemples de formulaires d’inscription pour «feignasse».

Splittez votre contenu en plusieurs parties redimensionnables avec jQuery Splitter

C’est sur Dator Blog que j’ai déniché jQuery Splitter tout droit sorti de chez Dave Methvin. Ce plugin permet d’afficher une séparation entre deux contenus de la forme :

<div id="MySplitter"> 
    <div> Left content goes here </div> 
    <div> Right content goes here </div> 
</div>

L’appel de la fonction étant réduit au strict minimum :

$().ready(function(){ 
    $("#MySplitter").splitter(); 
});

La splitbar peut être déplacée très facilement de manière accessible en cliquant-glissant, avec une accessKey ou encore via la touche tab.

Autres ressources Javascript

20 mémos utiles pour tout webdesigner

Une bonne palanquée de Cheat Sheet (à vos souhaits) pour ne plus oublier les raccourcis Photoshop, les propriétés des CSS, les éléments HTML, etc. Mention spéciale pour :

Miscellannées

Google Analytics — Identifiez les lecteurs en provenance de Netvibes

Généralement, les informations aggrégées par les outils de mesure d’audience ne permettent pas de connaitre le nom (ou le pseudo) des visiteurs ! Google Analytics vous permet en seulement trois clics d’en savoir plus :

  1. Cliquez sur Traffic Sources (Sources de trafic),
  2. Puis sur Referring Site (Sites Référents),
  3. Rendez-vous dans la liste des sites et cliquez sur Netvibes,
  4. Enjoy ;)

Bref, je suis sûrement le dernier à avoir cliqué sur Netvibes pour afficher les visiteurs concernés, mais si je suis l’avant-dernier, je me dis que ça servira au moins à une personne ;)

T’es qui, toi, déjà ?

Ping.eu ou tout ce que vous avez toujours voulu savoir sur une adresse IP ou un nom de domaine sans jamais avoir osé le demander : Ping, Traceroute, DNS lookup, WHOIS, Port check, Reverse lookup, Proxy checker, Mail relaying, Bandwidth meter, Network calculator, Network mask calculator, Country by IP, Unit converter  !

Stay tuned and mind the gap!

PS : n’oubliez pas la grosse grosse liste de 1000 ressources pour webdesiger et développeurs web !

Articles sur le même sujet

flattr this!

]]> http://css4design.com/le-petit-journal-du-web-les-fruits-de-la-veille-ont-garde-leur-fraicheur/feed 3 Le petit journal du web — WordPress, développement web, etc. http://css4design.com/le-petit-journal-du-web-novembre-2011 http://css4design.com/le-petit-journal-du-web-novembre-2011#comments Sun, 11 Dec 2011 11:46:10 +0000 Bruno Bichet http://css4design.com/?p=11094

Dans ce petit journal du web, je vous propose quelques liens qui ont retenu mon attention ces dernières semaines. Du côté de WordPress : optimisation de la base de données, des images, du cache, du nombre de requêtes dans les templates ; quelques diapositives issues du dernier WordCamp ; des explications sur le succès de WordPress face à ses concurrents ; un retour d’expérience sur la vente de thèmes WordPress ; et des fonctions utiles pour votre fichier functions.php. Du côté du développement web et du webdesign : une documentation interactive complète sur les API’s des langages du web (CSS, HTML, JavaScript, DOM & jQuery) ; un blog de qualité sur le développement web ; un tutoriel sur jQuery et un autre sur les fondamentaux de JavaScript ; et 18 outils gratuits pour faire des maquettes d’interface graphique. Et bien d’autres liens à garder sous la molette !

WordPress

  • Optimiser la base de données – Avec le temps, les performances de WordPress baissent à causes des modifications qui affectent la base de données. Pour retrouver un WordPress frais comme un gardon, sortez les gants et préparez-vous à faire le ménage.
  • Performances dans WordPress — Des conseils pour optimiser les images, l’inclusion des fichiers Javascript et CSS, la gestion du cache, le nombre de requêtes dans les templates, les appels aux API externes et le fichier .htaccess.
  • Vendre des thèmes WordPress — Présentation de Francis Chouquet à l’occasion de WordCamp Paris sur son retour d’expérience concernant la vente de thèmes WordPress à travers le site Peaxl.com.
  • Site de presse avec WordPress ? — Retours d’expériences de Lagazette.fr, un «gros» site qui tourne sous WordPress.
  • Hegemony of WordPress – Si Drupal et Joomla! n’ont (presque) rien à envier à WordPress, comment expliquer l’hégémonie de WordPress lorsqu’il s’agit du choix d’un CMS ?
  • 10 Must Have Hacks For WordPress – Voici 10 fonctions à copier-coller dans votre fichier functions.php pour obtenir : des boucles personnalisées, une liste de billets en relation avec d’autres en fonction des tags qu’ils partagent, afficher les billets populaires dans la sidebar, afficher des publicités dans le flux RSS, ajouter un fil d’Ariane pour guider vos visiteurs, afficher une sidebar selon l’article affiché, etc.
  • Créer un thème de A à Z — Ce tutoriel écrit par @bbx est destiné aux graphistes et aux intégrateurs qui débutent dans WordPress. Néanmoins, une connaissance du HTML et des CSS est requise. Si vous le souhaitez, allez lire [son] autre tutoriel : CSS l’Art et la Science.

Développement web

C’est cadeau (ou pas)

Cerise sur la praline, voici les deux cadeaux numériques que je me suis offert dernièrement en guise de pré-cadeaux de Nowel :
  • SMACSS (Scalable and Modular Architecture for CSS) — Guide en ligne (gratuit) ou aux formats PDF, ePub et mobi (pour $15, soit 11.58 petits euros) de Jonathan Snook pour apprendre comment structurer ses CSS pour allier souplesse et maintenance à mesure que vos projets et vos équipes grandissent. Via t37.net.
  • Design Professionalism – Le guide du designer pour reprendre le contrôle de votre métier. Qu’est-ce que le métier de webdesigner ? Comment s’y forme-t-on ? Que peut-on attendre de ce métier parfois fascinant et souvent ingrat ? Andy Rutledge répond à toutes nos interrogations existentielles.

C’est fini !

Pour avoir des nouvelles régulières de mes dernières trouvailles réticulaires, je vous invite à visiter mes liens sur Diigo ou Delicious en fonction de vos habitudes (les deux sites sont pratiquement nourris au même grain en même temps). N’hésitez pas à partager vos liens préférés dans les commentaires.

Articles sur le même sujet

flattr this!

]]> http://css4design.com/le-petit-journal-du-web-novembre-2011/feed 3 390 ressources Javascript & jQuery http://css4design.com/liens-javascript-jquery http://css4design.com/liens-javascript-jquery#comments Mon, 28 Nov 2011 18:42:41 +0000 Bruno Bichet http://css4design.com/?p=11119

Cette liste de liens pour le développeur web front-end et l’intégrateur HTML & CSS est issue de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows, et, last but not least, vous pourrez accéder à une dernière liste composée d’une bonne centaine de bibliothèques Javascript (Polyfills) pour émuler HTML5 dans les navigateurs qui en prennent pas les nouvelles API’s en charge. A quelques exceptions près, les  liens pointent directement sur les sources d’origine.

217 ressources commentées

Autant vous prévenir tout de suite : cette liste n’est pas classée par catégorie, et ce, pour trois raisons simples : 1) vous pouvez rechercher les articles sur js4design.com où ils sont classés par catégorie et par tag, 2) vous pouvez utiliser l’équivalent-clavier Ctrl + F pour chercher un thème précis sur cette page, et 3)  je crois très fort en la sérendipité :-)

  1. jQuip – Initiative lancée par Demis Bellot pour rendre jQuery modulable : 90% des fonctions les plus utilisées de jQuery pourraient se caser dans 13% de la taille actuelle du framework !
  2. Popcorn.js – Framework Javascript créé par Mozilla pour faciliter la création de vidéos interactives. Utilise les ressources visuelles, audios et vidéos disponibles sur les réseaux sociaux.
  3. Blueberry – Plugin jQuery expérimental et open source pour faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design).
  4. Elastislide – Carousel jQuery réactif (Responsive Web design) pour que l’utilisateur profite au mieux des caractéristiques de son écran.
  5. Decoding jQuery – Immersion (en anglais) dans le code source de jQuery avec des explications sur les fonctions extend(), isWindow(), parseXML(), globalEval() et toArray().
  6. Codecademy – Apprendre les bases de la programmation Javascript de manière interactive et pro-active !
  7. FlexSlider – Ce Slider permet de faire défiler du contenu avec le marquage HTML de votre choix, le tout utilisable au clavier.
  8. jQuery Timelinr – Créer un effet de ligne temporelle verticale ou horizontale avec d’un côté, des dates et de l’autre, des événements.
  9. spin.js – Afficher une icône de chargement de page animée (loader) sans utiliser d’image, grâce à CSS3.
  10. jQuery reversing –  Quelques astuces jQuery pour inverser l’ordre des éléments d’une liste UL ou OL dont le très concis snippet : ul = $('ul'); ul.children().each(function(i,li){ul.prepend(li)})
  11. Require.js – Ce «loader» Javascript léger (5 kb gzipé), avec gestion de cache, accélère le chargement de vos pages lorsque vous utilisez de nombreux scripts.
  12. Gmap3 – Plugin jQuery créé par Jean-Baptiste Demonte pour créer des cartes Google avec les fonctions avancées de la version 3 de l’API de Google Maps.
  13. nanotabs — Version allégée du plugin jQuery idTabs. Script autonome (sans jQuery ou autre framework Javascript) pour faire des menus à onglets à partir de simples listes.
  14. JbhSlider – Diaporama en jQuery gérant les évènements rapprochés (pas d’effets indésirables quand vos visiteurs cliqueront dix fois de suite sur le lien «suivant» du Slider).
  15. Agile Carousel – Faites défiler automatiquement ou manuellement du texte et des images. Le format de données JSON permettra à votre Slideshow de dialoguer avec les informations issues de votre CMS préféré.
  16. Apprise – Dialoguer avec les utilisateurs autrement qu’à travers les boites modales alert() ou confirm() générées par le navigateur.
  17. jQuery Simple Tooltip — Afficher des infobulles au survol d’un lien. Peut afficher le contenu d’une balise référencée par son identifiant.
  18. jQuery Tagging Tools – Gérer les tags à la manière de Facebook, avec une petite croix pour supprimer les tags que l’on vient de saisir.
  19. jQuery-Placeholder – Utiliser l’attribut de formulaire «placeholder» dans les navigateurs ne prenant pas en charge HTML5.
  20. jQuery SuperBox – Lightbox jQuery pour afficher des images, du contenu chargé en Ajax ou un fragment de la page via une ancre interne.
  21. yepnope.js – Chargement conditionnel de scripts pour vos « Polyfills » pour charger un script de manière asynchrone selon qu’une fonctionnalité est disponible ou non dans le navigateur.
  22. Full background image slider – Afficher un diaporama sur toute toute la fenêtre du navigateur (ou le container que vous voulez).
  23. Minify – Script PHP5 pour combiner et minifier les fichiers CSS ou Javascript.
  24. Treesaver – Framework Javascript pour faciliter la création de maquettes de sites web de type magazine qui s’adaptent automatiquement à une large variété de périphérique de sortie.
  25. Coda Slider Effect – Tutoriel pour réaliser un système de navigation par onglets accessible avec effet de Slide, en mixant plusieurs plugins tels que scrollTo, localScrolletserialScroll.
  26. jQuery File Upload – Uploader des fichiers multiples en affichant une barre de progression pendant le téléchargement ainsi qu’une miniature si votre fichier est une image.
  27. jQuery radioSwitch – Transformer des boutons radio HTML en superbes Sliders d’un coup de magie CSS3 et Javascript.
  28. jNotify – Afficher une boite de dialogue pour informer l’utilisateur du bon ou du mauvais déroulement des opérations.
  29. jQuery Apple Effect – Afficher progressivement le contenu d’une page Web autour d’une zone affichée par défaut, pour la mettre en valeur.
  30. jMenu – Système de menu horizontal en jQuery etjQuery UI qui autorise un nombre illimité de sous-menus.
  31. Affichage des mots de passe à la demande – Afficher ou masque le mot de passe saisi dans un champs `input` de type password uniquement en cas de besoin, à l’aide d’une case à cocher.
  32. qTip – Plugin jQuery pour créer des infobulles en affichant tout types de contenus : attribut title ou attribut personnalisé tooltip, ou une image.
  33. markItUp! – Moteur de balisage léger qui transforme un textarea en éditeur HTML, Textile, Wiki, Markdown, BBcode ou votre propre système de balisage.
  34. Slides – Slideshow Javascript développé avec jQuery pour afficher vos images sous forme de diaporama.
  35. Lightbox CSS avec tabindex et pseudo-classe :focus – Lightbox full CSS en remplaçant l’événement click par la pseudo-classe :focus et la propriététabindex pour permettre aux images d’avoir le «focus».
  36. Lettering.js – Plugin jQuery pour contrôler précisément le découpage des textes afin d’afficher les caractères ou les mots qui les composent comme bon vous semble.
  37. Simple Tabs w/ CSS & jQuery – Tutoriel expliquant de manière concise les différentes étapes pour réaliser un système de menu à onglets.
  38. SimpleTabs – Javascript autonome pour mettre facilement en place un système de navigation à base d’onglets (tabs).
  39. CSS3-MediaQueries-JS – Bibliothèque Javascript qui permet d’utiliser les Medias Queries dans IE 5+, Firefox 1+ et Safari 2.
  40. Marquee jQuery – Permet de faire défiler le contenu d’une liste vers le haut, le bas, la droite, la gauche grâce à des options bien pratiques.
  41. Hyphenator – Script Javascript pour la gestion des césures sur tout ou partie de votre site Web, à réserver aux articles pour des questions de performances.
  42. jQuery Cycle — Ce diaporama / Slideshow propose 6 effets de transition avec pas moins de 50 paramètres.
  43. Galerie d’image avec jQuery – Ce tutoriel permet d’obtenir le résultat le plus simple possible visuellement tout en tenant compte l’accessibilité dans une démarche non intrusive.
  44. JQuery Slide Effect – Tutoriel concis mais complet pour réaliser un effet d’animation de texte (slide) sur une image pour faire apparaitre des informations complémentaires (titre, description, lien, etc.).
  45. Easy Slider – Diaporama horizontal ou vertical avec navigation numérique qui propose un défilement doux lorsque l’on saute une ou plusieurs diapos.
  46. innerShiv — Le contenu HTML5 généré par innerHTML fonctionne enfin dans IE.
  47. CSS Text Wrapper – Habiller vos textes HTML avec n’importe quelle forme non-rectangulaire : courbe, zig-zag ou ce que vous voulez !
  48. jCarousel – Contrôler le déplacement horizontal ou vertical d’une liste d’éléments avec ce Plugin jQuery.
  49. Content Switcher – Ce Slider avec menu de navigation a la particularité de fonctionner parfaitement en l’absence de Javascript et de permettre l’utilisation du bouton retour du navigateur.
  50. EverCookie — API Javascript qui permet de créer un cookie résistant à tous les mauvais traitements grâce à une solution impliquant une dizaine de mécanismes différents : HTTP Cookies, Flash Cookies, Silverlight Isolated Storage , RGB values, Web History, HTTP ETags, Web cache, window.name, Internet Explorer userData Storage, HTML5 Session Storage, HTML5 Local Storage, HTML5 Global Storage, HTML5 Database Storage via SQLite !
  51. bxCarousel – Carousel en jQuery qui boucle sur lui-même et qui fonctionne avec tout type d’éléments HTML contenus dans une liste.
  52. TinyFader — Slideshow poids-plume avec effet de fading. C’est la version autonome deTinySlideren (TinyFader n’a pas besoin d’un framework Javascript).
  53. Jquery Looped Slider – Diaporama jQuery qui boucle sans accroc lorsque le script atteint la dernière «diapo» de votre Slider.
  54. Easy List Splitter – Plugin jQuery qui affiche des listes HTML ordonnées (OL) ou non-ordonnées (UL) en colonnes.
  55. Nivo Slider – Diaporama qui offre 9 transitions de très bonne facture pour ajouter un peu de peps à nos Sliders images.
  56. AviaSlider – Diaporama en jQuery de 8 kb dont l’originalité est de proposer huit belles transitions entre les images.
  57. Stop (Mis)Using Return False – Toutes les subtilités relatives à la gestion des événements dans jQuery.
  58. Advanced Columns using the :nth-child(N) – Du rythme pour vos colonnes avec le pseudo sélecteur CSS :nth-child() et jQuery.
  59. Jquery selected text sharer – Plugin jQuery astucieux qui affiche une div contenant une liste de liens avec les favicons associées une fois que l’utilisateur a sélectionné une portion de texte.
  60. ChangeClass — Fonction Javascript pour changer de classe CSS à la volée.
  61. CLEditor – Editeur HTML WYSIWYG de 10 ko à ajouter facilement à votre site Internet, compatible avec tous les navigateurs (IE6 inclus).
  62. Sudo Slider – Plugin jQuery de 10 ko pour mettre en place un diaporama manuel (Slider) ou automatique (Slideshow) avec tout type de contenus (images, textes, vidéo en Flash, formulaire avec validation, etc.).
  63. Enterprise jQuery — Passez du côté client ! Améliorer vos connaissances sur jQuery, qu’il s’agisse de bouts de codes prêts à l’emploi ou des bonnes pratiques de développement.
  64. jQuery.eventManager — Améliorer la gestion d’événements avec jQuery.
  65. Video JS — Player vidéo basé sur Javascript qui utilise la balise video de HTML5 lorsque le navigateur est compatible. Un fallback vers Flash est prévu pour les navigateurs ne prenant pas en charge HTML5.
  66. 30 bouts de codes jQuery – en prêt-à-porter taillés dans les meilleurs tissus. Dans les rayons, vous trouverez de quoi habiller les longues soirées d’été.
  67. Transformer un plugin jQuery en extension WordPress – Tutoriel permettant d’utiliser les extensions WordPress pour insérer n’importe quel plugin jQuery dans le panneau des extensions WordPress.
  68. Étendre la zone cliquable d’un lien à l’élément parent avec jQuery –Quelques lignes de code Jquery pour étendre la zone cliquable d’un lien à un élément parent, généralement un <div>.
  69. jQuery Hotkeys Plugin – Ajouter ou supprimer des équivalents-clavier dans votre page Web. Gère la plupart des événements en une ligne de code.
  70. Columnizer — Créer des colonnes avec jQuery. Nombreuses options, dont notamment la possibilité de spécifier une largeur de colonne ou un nombre fixe de colonnes.
  71. jQuery Fundamentals — Manuel de survie pour jQuery. Synthétise les éléments de syntaxe de jQuery sur une page web. Sommaire précis et structuré avec un index des exemples utilisés.
  72. Retina Display — Tutoriel pour refaire chez vous l’effet loupe «Retina Display» proposé par Apple sur la version 4 de l’iPhone.
  73. jqDock — Transformez une suite d’images en Dock Menu (set d’images qui s’agrandissent au passage de la souris) à la manière du dock de MacOS X.
  74. Fancy Sliding Form — Affichez vos formulaires sous forme de Slideshow en autant de parties qu’ils contiennent de fieldset.
  75. clueTip — Afficher des bulles d’aide complexes sur n’importe quel élément au survol de la souris (ou sur un clic, en option).
  76. Smokescreen — Convertir des animations Flash simples en HTML5 et Javascript.
  77. Lightbox_me — Lightbox jQuery d’un poids de 1 Kb pour afficher n’importe quel élément avec un effet Lightbox sobre et efficace.
  78. jQuery-JSON — Convertir des données au format JSON via quatre nouvelles fonctions à l’object jQuery $ pour faciliter l’utilisation du format JSON.
  79. SliderNav – Plugin jQuery qui permet de créer un carnet d’adresse défilant de type iPhone.
  80. Sliding Panel Photo Wall Gallery — Mur d’image et Lightbox avec jQuery.
  81. Griddy-Overlay – Afficher une grille par-dessus votre page web avec jQuery.
  82. Scriptsrc — 10 Frameworks Javascript à emporter.
  83. UI.Layout – Créer des interfaces utilisateurs avec jQuery.
  84. WebProjectHelper — Générateur de structure MySQL et de classes PHP.
  85. jQuery Form Plugin — Mettez de l’Ajax dans vos formulaires HTML.
  86. Burst Engine — Un peu de Flash et d’After Effects dans Canvas.
  87. Colorbox — une « lightbox » légère et extensible en jQuery.
  88. jQuery BBQ — Utiliser les boutons Précédent et Suivant du navigateur malgré Ajax.
  89. Preload CSS/JavaScript without execution – Pré-chargement des CSS et du Javascript sans exécution.
  90. Table des matières avec jQuery – Bout de code pour afficher une liste ordonnée sous la forme d’une table des matières comme celles que l’on trouve dans les livres imprimés.
  91. Bloc de login à la Twitter avec jQuery – Tutoriel pour faire un bloc de login dynamique sur la page d’accueil de Twitter.
  92. jQuery.fn.sort — Trier des éléments avec jQuery.
  93. Popeye 2.0 – Lightbox qui affiche une galerie d’images à partir d’une liste non-ordonnée dans le flux de votre texte.
  94. FAT-FREE — Framework PHP léger et modulaire.
  95. jQuery HTML Table Toolbox — 36 façons de «dresser la table» avec jQuery.
  96. Add Events jQuery — Ajouter «cursor: pointer» sur tous les événements «click».
  97. Créer une arborescence de fichier avec jQuery – Série de 8 tutoriels sur la création d’une arborescence de fichier à l’aide de jQuery.
  98. simpleCart (js) – Script de moins de 20 ko pour mettre en place un caddie e-commerce en quelques minutes.
  99. Modernizr — Détection des fonctionnalités CSS3 et HTML5.
  100. 20 méthodes jQuery à connaitre – Bien belle liste de 20 fonctions jQuery peu connues, à connaitre !
  101. IE7.js – Transformez une citrouille à base de IE5.5/6 en carrosse IE7 ou IE8 : ce n’est pas de la magie, c’est de la technologie !
  102. Webform to wizard – Plugin jQuery qui découpe les formulaires longs et ennuyeux en «assistant» en suivant les contours des balises HTML fieldset.
  103. DLink — Afficher le type de cible des liens avec Javascript.
  104. Splash — un diaporama en pur Javascript.
  105. Optimiser le chargement des AdSense – Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery.
  106. Custom jQuery Selectors – Créez des sélecteurs personnalisés avec jQuery.
  107. TipTip — Infobulles « funky » pour afficher l’attribut HTML «title».
  108. Clickoutside Event — Détectez les clics en dehors d’un élément.
  109. Comment, jQuery va tuer Flash ? – Question surprenante, mais force est de constater que Javascript a fait du chemin depuis window.open() !
  110. jQuery Tutorials for Designers – 13 Tutoriels jQuery pour Webdesigners.
  111. Starter — Générateur de plugins jQuery.
  112. Effets lightbox sans framework — L’ouverture de nouvelles fenêtrespopup a progressivement laisser la place aux effets lightbox. Voici plusieurs solutions simples à base de HTML, CSS.
  113. Content Switcher — Bel exemple de mise en place d’un système permettant de passer d’un contenu à un autre via un menu en utilisant les concepts de l’amélioration progressive et du Javascript non intrusif.
  114. jQuery SimpleTree Drag&Drop – Construisez des arborescences à la mode de Windows.
  115. jQuery Splitter Plugin — Divisez votre page en plusieurs parties redimensionnables.
  116. Slick Page Transition — Effet de transition (fading) entre les pages d’un site.
  117. DataTables — Pagination et tri des données pour vos tableaux HTML.
  118. jSocial – Affichez très rapidement la liste des réseaux sociaux où vous êtes présent.
  119. jQuery Color Animation – Support du RGBa pour « jQuery Color Animations».
  120. jQuery vs Mootools – Choisir jQuery ou Mootools en connaissance de cause.
  121. 6 bouts de code pratiques pour manipuler les éléments select et input avec jQuery.
  122. Plupload – Gestionnaire de « téléversement » (upload) multiple en jQuery.
  123. Parallax – Technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur.
  124. Uniform – Ajouter du look and feel aux rugueuses cases à cocher, aux boutons radio anémiques, sans oublier les spartiates. boutons Parcourir… des sobres formulaires HTML.
  125. flot — Créez des graphiques avec jQuery.
  126. jQuery Source Viewer – Naviguer à l’intérieur du code source de jQuery.
  127. jQAPI — Documentation alternative pour jQuery 1.4.1.
  128. How to Easily Create a JavaScript Framework – Créez votre framework Javascript en 4 parties.
  129. css-template-layout – Implémentation jQuery du module CSS3 Template Layout.
  130. jqTransform — Stylez vos formulaires avec jQuery et CSS.
  131. Google Fade – Script disponible pour Mootools et jQuery pour reproduire chez vous l’effet introduit récemment par Google sur sa page. d’accueil : certains éléments de navigation apparaissent suite au mouvement de la souris sur la page ou lorsqu’on quitte le champs de recherche.
  132. Thumbnail Zoom — Effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris.
  133. Disable On Submit – Plugin jQuery qui désactive le bouton Submitune fois que le formulaire a été envoyé une première fois.
  134. Adding Keyboard Navigation – Tutoriel sur la mise en place d’un diaporama avec utilisation du clavier (flèche droite et flèche gauche) pour passer à l’image suivante ou précédente.
  135. Comment System with jQuery, Ajax and PHP – L’excellent Srinivas Tamada de9Lessons nous apprend comment mettre en place un système de commentaires Ajax avec jQuery et PHP.
  136. DOMAssistant – Bibliothèque Javascript « petit mais costaud » qui pourrait facilement remplacer jQuery pour une partie des utilisateurs.
  137. Dynamic tabs using jQuery – Ccréer un menu à onglets pour ajouter ou supprimer des onglets de manière dynamique.
  138. Sexy.js – Améliorer l’interface Ajax de jQuery.
  139. jQuery Cross Domain Ajax Guide – Guide de l’Ajax sur plusieurs domaines.
  140. Page Peel Corner — Effet de page cornée avec jQuery.
  141. A.P.E (Ajax Push Engine) — Le web en temps réel avec Ajax Push Engine.
  142. Simple Image Viewer — Galerie d’image minimaliste.
  143. jquery-compat-1.3 — Profitez de jQuery 1.4 en restant compatible avec jQuery 1.3.
  144. jsfiddle – Propose un environnement pour tester et partager du code Javascript.
  145. jQuery 1.4 API Cheat Sheet – Regroupe sur une page toutes les méthodes et fonctions de jQuery jusqu’à la version 1.4.
  146. jARIA jQuery Plugin – Permet d’ajouter une couche ARIA dans votre site web sous forme de méthodes.
  147. jQuery Quick Guide – Un guide pour avoir les fonctionnalités de jQuery sous la souris.
  148. Animation avec quatre images et jQuery – Tutoriel pour réaliser une publicité ou une accroche sans passer par Flash.
  149. jQuery Masonsy – Réorganise les blocs de votre page page pour réduire les espaces vides entre les éléments.
  150. 40 bouts de code – facilitez vos développements en Javascript ou jQuery.
  151. jQueryList — Plus de 255 plugins pour jQuery disponibles sur une seule page et classés par thèmes.
  152. Link Building Pro — Ajoute automatiquement un lien vers la source, au cas où le copieur-colleur oublierait de citer l’original.
  153. CSS3 animations and their jQuery equivalents – 6 effets introduits dans CSS3 et le code Javascript pour obtenir le même résultat en jQuery.
  154. jTruncate – Plugin pour jQuery qui coupe un texte au bout d’un certain nombre de mots et qui ajoute un texte comme « Lire la suite » pour accéder à… la suite !
  155. Hightcharts – Bibliothèque Javascript spécialisée dans la création de diagrammes, graphiques et autres camemberts pour illustrer vos données brutes.
  156. jQuery Before/After – Plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo.
  157. jQSlickWrap – Plugin jQuery qui permet d’habiller une image de forme irrégulière avec le texte autour.
  158. TinySlider – Diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS.
  159. Mootools Forge – Une forge pour les plugins Mootools.
  160. Système de notation par étoiles accessible – Samuel Le Morvan propose un tutoriel complet sur la question.
  161. Menu déroulant Suckerfish – Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6.
  162. Smart Columns with CSS & jQuery – Des colonnes fixes et ajustées en largeur avec CSS et jQuery.
  163. Get viewport size with javascript – Connaitre la taille du « viewport » en Javascript.
  164. Ceebox – Lightbox qui afficher n’importe quel contenu dans une fenêtre modale ou non. Idéale pour les vidéos hébergées sur Google Video, Dailymotion ou Youtube.
  165. Text Resizing width jQuery — Laissez les utilisateur modifier la taille du texte sur votre site web.
  166. Planet jQuery – Un planet pour jQuery.
  167. The Ultimate GetElementsByClassName – Sélectionner les éléments par leur classe avec getElementsByClassName.
  168. Image jQuery – Quelques lignes de jQuery pour appliquer un léger effet de zoom sur une image.
  169. maxWidthFixForIE6.js – Emuler la propriété max-width pour IE6.
  170. iepngfix — Composant HTC qui gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6.
  171. SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevrepropose de faciliter l’utilisation d’Ajax.
  172. jTextTranslate – Traduction de votre site en 87 langues par Google.
  173. cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3.
  174. balance_columns – Équilibrer des colonnes avec Javascript.
  175. DOMTab – Menu à onglets simple et efficace.
  176. FlashReplace – Insérer du Flash proprement.
  177. DOMAssistant – Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse.
  178. Styled and accessible tooltips – Infobulles stylées et accessibles avec jQuery.
  179. jQuery-XML — Afficher un flux RSS avec jQuery et Ajax.
  180. dLite — une librairie Javascript « petit mais costaud ».
  181. Pikachoose – Plugin jQuery idéal pour afficher des galeries d’images en toute légèreté.
  182. jQuery Context Menu – Menus contextuels (clic droit) personnalisable à 100% avec les CSS.
  183. 22 menus déroulants passés au crible – Tyssen Design passe en revue les principauxdropdown menu.
  184. Changement de design «on the fly» avec jQuery – Tutoriel clair et didactique pour permuter deux maquettes d’un simple clic.
  185. Simple jQuery Text Resizer – Laissez vos visiteurs choisiront la taille qui leur convient (uncookie gardera leur préférence en mémoire).
  186. Des cookies à la mode de jQuery – Ecrire, lire et effacer vos cookies pour 4,15 kb.
  187. Ajax Upload — Upload multiple de fichiers sans recharger la page avec n’importe quel élément (images, liens, etc.).
  188. ul2finder — un explorateur à l’image du Finder de MacOS X.
  189. jQuery Image Cropper — recadrer et uploader des images.
  190. jQuery UI Selectmenu — des menus « select » personnalisés à la sauce ARIA.
  191. Le code CSS et Javascript au milieu du HTML c’est pas bien ! – Traduction de l’articleWhy Inline CSS And JavaScript Code Is Such A Bad Thing de Robert Nyman.
  192. PHP.JS — transposer des fonctions PHP en Javascript.
  193. jsbin — tester votre code Javascript et partagez vos bugs – Outil en ligne créé par Remy Sharp pour tester du code Javascript et le partager
  194. Un «slider» à la manière du Playback de Google Wave – tutoriel pour afficher un historique progressif à la manière de la fonction Playback de Google Wave.
  195. Un diaporama avec AnythingSlider jQuery Plugin – Chaque diapo peut être réalisé à l’aide du composé HTML de votre choix (texte, images, etc.).
  196. Google Closure — les mauvaises pratiques Javascript en action ? – Google Closure a été développé par des spécialiste de Java… ça craint.
  197. Sélecteur de date (Date-Picker) non-intrusif – Sélecteur de date avec mini calendrier.
  198. FireFinder — interagir avec la page web – Interagir avec les éléments de la page via les sélecteurs CSS ou les expressions XPath.
  199. Choisir sa bibliothèque JS avec Javascript Framework Matrix – Tableau comparatif des principaux frameworks Javascript.
  200. Jquery Pagination System – Pagination côté client avec jQuery.
  201. jQuery Flash Plugin – Inspiré par SWFObject, UFO et sIFR, jQuery Flash Plugin a été complètement réécrit avec jQuery pour éviter les redondances.
  202. jQuery UI Multiselect – Améliore l’apparence et l’ergonomie de la balise HTMLselect.
  203. jQuery Tools – Incorporer Flash, gamme étendue d’overlay, tooltips à foison, tabs, etc.
  204. Tipsy — des bulles d’aide façon Facebook avec jQuery – Bulles d’aide façon bande dessinée comme celles que l’on trouve sur Facebook ouTwitter.
  205. Faire un Carrousel avec jQuery – Tutoriel très didactique pour réaliser un carrousel avec HTML, CSS et jQuery.
  206. Lazy loader : chargement des images à la volée – Chargez vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur.
  207. jQuery Magnifier Loupe – Zoom sur images avec l’attribut longdesc.
  208. News déroulantes avec jQuery – Un joli bandeau de news à l’aide de liste de définition, d’une pincée de CSS et d’une bonne rasade de jQuery.
  209. Cufón : des polices de caractère pour tous – Implémenter font-face dans le plus grand nombre de navigateurs.
  210. jQuery — renverser l’ordre d’une liste ordonnée – les premiers seront les derniers et vice-versa. Merci à pioupiouM pour la correction du script.
  211. jqModal : des fenêtres modales minimalistes – Couteau suisse des Lightbox en tout genre pour afficher des alertes, des notifications, des boites de dialogues, etc.
  212. Afficher vos flux XML avec jParse – Parsing de flux XML (RSS, Atom) via Ajax pour l’afficher en HTML.
  213. Javascript Framework Matrix – Tableau comparatif des principaux frameworks Javascript.
  214. Augmenter la taille du texte avec jQuery – Modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant.
  215. Effets jQuery accessibles WAI-RIA – Lightbox, validation de formulaires et menus à onglets accessibles prêts à l’emploi.
  216. eCSStender – Sélecteurs CSS avancés compatibles IE6.
  217. jCarousel Lite – Galerie d’images en jQuery.

Pour trouver l’article correspondant sur Javascript & Webdesign, il suffit de saisir l’ancre du lien dans le champs de recherche. Cette liste sera mise à jour régulièrement, n’hésitez pas à revenir !

73 tutoriels : Slideshow, Sliders & Diaporama

Voici une liste condensée de tutoriels ou scripts jQuery commentés pour apprendre à faire défiler vos contenus textes et/ou image sous forme de Slideshow, de Sliders ou de diaporamas :

  1. Create an Image Rotator with Description (CSS/jQuery) — Démo
  2. Sliding Boxes and Captions with jQuery — Démo
  3. Animate Panning Slideshow with jQuery — Démo
  4. Create Beautiful jQuery Slider Tutorial — Démo
  5. Create a Fancy Image Gallery with JQuery
  6. jQuery Infinite Carousel
  7. Coda Slider Effect
  8. Create Featured Content Slider Using jQuery UI
  9. Making a Content Slider with jQuery UI
  10. Creating a Slick Auto-Playing Featured Content Slider
  11. Start/Stop Slider
  12. ImageSwitch
  13. Create Content Slider using jFlow, A Minimalist jQuery Plugin
  14. jQuery Looped Slider Tutorial
  15. Build a Content Slider with jQuery
  16. CSS and jQuery-Crating an Image Slider
  17. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
  18. Making a Mosaic Slideshow With jQuery & CSS
  19. Making A Slick Content Slider
  20. Galleria
  21. Easy Slider
  22. Galleriffic
  23. AD Gallery
  24. Sliding Boxes and Captions
  25. jQuery Virtual Tour
  26. jQuery MB Gallery
  27. AnythingSlider
  28. GalleryView
  29. jCarousel – jCarousel — un Carousel jQuery très complet
  30. Easiest Tooltip and Image Preview
  31. ThickBox
  32. SpaceGallery
  33. s3Slider
  34. Simple Controls Gallery
  35. Pikachoose – Pikachoose : le bon choix pour afficher vos images
  36. jQuery Popeye – jQuery Popeye 2.0 — Une Lightbox inline
  37. Supersized
  38. imgBox
  39. Pirobox
  40. jQZoom
  41. jQuery Superbox
  42. jQuery Infinite Carousel
  43. Simple jQuery Image Slide Show with Semi-Transparent Caption
  44. Moving Boxes
  45. LightBox
  46. SliderGallery
  47. FeaturedContent
  48. InnerFade
  49. jQuery Morphing Gallery
  50. A Simple jQuery Slideshow
  51. Create a Slick and Accessible Slideshow Using jQuery
  52. Building a jQuery Image Scroller
  53. Sliding Boxes and Captions with jQuery
  54. Creating an Image Slider
  55. Create Beautiful jQuery slider tutorial
  56. Simple JQuery Image Slide Show with Semi-Transparent Caption
  57. Create a Simple Image Slide Show using jQuery
  58. Slide and hide section with jquery
  59. Making a Slideshow with jQuery
  60. jQuery – Creating a Slideshow
  61. Simple jQuery slideshows
  62. Creating a Slick Auto-Playing Featured Content Slider
  63. How to add Slideshow to jQuery lightbox plugin
  64. jQuery Slideshow Explained
  65. Supersized jQuery Plugin
  66. The Easiest jQuery Plugin For Sliding Images and Content
  67. GalleryView: A jQuery Content Gallery Plugin
  68. Image Flow
  69. S3Slider jQuery plugin
  70. EOGallery
  71. Smooth Div Scroll
  72. jQuery virtual tour
  73. Supersized – Full Screen Background/Slideshow jQuery Plugin

100+ Polyfills et Fallbacks pour HTML5

L’article 100+ Polyfills et Fallbacks pour HTML5 présente une collection de plus de 100 bibliothèques Javascript pour implémenter les fonctionnalités HTML5 dans les navigateurs qui ne les proposent pas nativement. Cette liste étant mise à jour régulièrement, elle ne figure pas sur cette page. Elle est accessible directement à l’adresse HTML5-Cross-Browser-Polyfills.

Voilà, c’est fini !

J’espère que cette longue liste n’aura pas été trop indigeste et qu’elle vous sera aussi utile qu’à moi. N’hésitez pas à me signaler si votre script préféré manque à l’appel ou si le lien vers le script de vos rêves mène à une impasse.

 

Articles sur le même sujet

flattr this!

]]> http://css4design.com/liens-javascript-jquery/feed 21 Maqetta — Editeur HTML5 / Javascript en ligne ou à emporter http://css4design.com/maqetta-editeur-html5-javascript http://css4design.com/maqetta-editeur-html5-javascript#comments Wed, 20 Apr 2011 13:11:01 +0000 Bruno Bichet http://css4design.com/?p=9876

Maqetta est un éditeur HTML5 open source lancé par IBM sous l’égide de la fondation Dojo. Cet éditeur existe en deux parfums : une version en ligne en mode Saas et un logiciel de 42,7 Mo à télécharger sur son poste de travail. La version en ligne est déjà très intéressante : l’ajout des contrôles jQuery UI s’effectue par glissé-déposé et l’interface est suffisamment WYSIWYG pour voir les Menus à onglets (Tabs) ou les Menus en accordéons (Accordions) fonctionner pour de vrai. On peut passer à volonté du mode «Design» au code «Source» ou avoir les deux à l’écran, horizontalement ou verticalement.

Maqetta : une interface complète pour cet éditeur HTML5 / Javascript en ligne très prometteur (existe en version de bureau).

Interface de Maqetta en mode Saas. Cliquez pour agrandir l'image.

Maqetta en 5 mn chrono

  • Les balises disponibles en glissé-déposé sont : `div`, `span`, `table`, `a`, `label`, `h1`, `h2`, `h3`, `iframe`, `img`. On est loin de la richesse sémantique de HTML5 :-(
  • Les fichiers s’ajoutent les uns à côté des autres dans des onglets :-)
  • Maquetta permet de gérer toute l’aborescence de votre projet web. Un projet de test est mis à votre disposition pour découvrir les possibilité de l’éditeur qui propose par ailleurs un tutoriel (en anglais) :-)
  • Un module HTML Rich Text permet de saisir du texte formaté, une sorte de WYSIWYG dans le WYSIWYG qui peut s’avérer très pratique pour saisir rapidement du texte à l’intérieur des balises `div` ou `p`, etc. :-)
  • Outre jQuery, Maqetta inclut les bibliothèques Dojo et YUI. :-)
  • L’interface propose de nombreuses palettes : Widgets, Fichiers, Propriétés, Etats, Outline. :-)
  • Interface parfois un peu longue à la détente et semble mettre le CPU sur les rotules :-(

Mes deux cents

Je garde l’installation de la version bureau pour plus tard. Cette version de Maqetta en ligne est déjà pas mal du tout et mérite qu’on y ouvre un compte. N’hésitez pas à me dire ce que vous en pensez et à partager les découvertes que vous avez faites !

 

Articles sur le même sujet

flattr this!

]]> http://css4design.com/maqetta-editeur-html5-javascript/feed 1 HTML5 Boilerplate 1.0 est dans la place http://css4design.com/html5-boilerplate-1-0-est-dans-la-place http://css4design.com/html5-boilerplate-1-0-est-dans-la-place#comments Wed, 23 Mar 2011 14:56:23 +0000 Bruno Bichet http://css4design.com/?p=9433

Une hirondelle ne fait pas le printemps parait-il, mais la sortie de HTML5 Boilerplate en version finale 1.0 pourrait bien redonner le sourire et réchauffer le cœur des intégrateurs HTML & CSS et des développeurs web à l’affut des bonnes pratiques. HTML5 Boilerplate est un concentré des meilleurs techniques du moment : classes CSS conditionnelles pour IE6, IE7 et IE8 ; Javascript (jQuery) ; configuration de différents serveurs (.htaccess, web.config, nginx.conf) ; prise en compte des mobiles (Handheld) ; HTML5 et CSS3 (Modernizr ou html5shiv) ; Google Analytics. Grosse cerise sur le gâteau, tout est optionnel et configurable via à un générateur en ligne.

HTML5 Boilerplate ne vous oblige à rien : configurez comme vous voulez !

Personnalisez votre HTML5 Boilerplate et faites-vous plaisir !

Parmi les fonctionnalités proposées, nous trouvons :

  • Compatibilité inter-navigateurs,
  • Prêt pour le HTML5.
  • Mise en cache optimale et règles de compression pour les meilleures performances possibles
  • Script de configuration.
  • Optimisations pour les navigateurs mobiles.
  • Perfectionnement progressif et dégradation gracieuse.
  • Classes spécifiques à IE pour une gestion optimale des différences entres les navigateurs.
  • Classes `.no-js` et `.js` très pratiques pour styler selon les capacités des navigateurs
  • Tests unitaires.
  • Console.log pour les navigateurs qui n’en possèdent pas.
  • Une feuille de style optimale pour l’impression aux performances optimisées.
  • Balisage et squelette CSS adaptable pour iOS, Android et Opera Mobile.
  • IE6 pngfix pré-intégré.
  • Classes `.clearfix`, `.visuallyhidden` pour styler proprement et de manière accessible.
  • Fichier .htaccess qui permet une autorisation propre des fonctionnalités HTML5 et un chargement plus rapide des pages.
  • jQuery hébergé sur un CDN ou récupéré en local au cas où.
  • Vous pensez qu’il y en a trop ? Boilerplate est un ami de la touche DELETE. :)

Pour la route

 

Articles sur le même sujet

flattr this!

]]> http://css4design.com/html5-boilerplate-1-0-est-dans-la-place/feed 11 Mise en page typographique avec CSS3 et Lettering.js http://css4design.com/mise-en-page-typographique-css3-lettering-js http://css4design.com/mise-en-page-typographique-css3-lettering-js#comments Thu, 17 Mar 2011 07:01:20 +0000 Bruno Bichet http://css4design.com/?p=9373

Ce tutoriel écrit par Nikola Lazarevic montre comment mettre en forme un texte de type «article» à l’aide de CSS3 et de Lettering.js. L’auteur nous prend par la main et détaille chaque étape : reset.css, styles de base, typographie avec Font-face, mise en forme des paragraphes. Le tout saupoudré d’une pincée de box-shadow et d’une segmentation des mots composant les titres à l’aide de Javascript pour débrider notre créativité en jouant sur les mots.

Les progrès réalisés par les CSS3 et leur prise en charge grandissante par les navigateurs permettent des mises en pages créatives.

Mise en page avec CSS3 et Lettering.js. Cliquez pour voir la démo

→ Petit bémol cependant concernant les problèmes d’accessibilité d’un script comme Lettering.js soulevés dans les commentaires qui ont suivi la publication de Lettering.js — La typographie dit «merci» à jQuery !

→ Bien entendu, personne ne vous demande la lune et vous pouvez également choisir les couleurs qui vous conviennent le mieux ;-)

Articles sur le même sujet

flattr this!

]]> http://css4design.com/mise-en-page-typographique-css3-lettering-js/feed 3 IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples http://css4design.com/fonction-javascript-contre-bug-classes-multiples-internet-explorer-6 http://css4design.com/fonction-javascript-contre-bug-classes-multiples-internet-explorer-6#comments Tue, 08 Feb 2011 13:49:14 +0000 Bruno Bichet http://css4design.com/?p=9110

Parmi les nombreux bugs qui affectent Internet Explorer 6, le bug des classes multiples apparait lorsqu’on utilise au moins deux classes CSS simultanément. Par exemple .classe1.classe2 pour adresser des propriétés CSS aux éléments possédant à la fois .classe1 et .classe2, ce qui est très pratique. Malheureusement, IE6 ne tient compte que de la dernière classe, soit .classe2, en l’occurrence. Une pratique répandue consiste simplement à se passer des classes multiples, ce que je fais depuis des années.

Malgré des débuts prometteurs, en 10 ans de bons et loyaux services sévices, Internet Explorer 6 ne s’est pas fait que des amis… [Illustration ci-contre par Mike Rohde]

«Die IE6, DIE!» Par Mike Rohde (rohdesign.com). Sous Licence CC.

Toutefois, il se trouve que dans le cadre d’un projet utilisant WordPress, j’avais besoin de styler différemment les images selon qu’elles possèdent une légende  ou pas, qu’elles soient alignées à droite, à gauche, au centre, pas du tout (à la folie, passionnément, etc.) et selon leur taille. Ce qui donne un nombre de combinaisons suffisamment important pour justifier l’utilisation des classes multiples, y compris dans IE6. En effet, dans mon cas, l’alignement des images fait partie intégrante du design qui doit (Must vs. Should) passer aussi dans IE6. Et non, en l’occurrence, le script kickie6.js n’est pas envisageable :-D

Dans l’idéal, il faudrait une fonction Javascript  pour détecter les classes multiples passées en paramètres afin d’obtenir en retour la concaténation des deux classes séparée par un tiret (ex. .classe1-classe2. N’étant pas développeur Javascript, j’ai fais appel aux bonnes volontés présentes sur Twitter. Quelques heures plus tard, plusieurs propositions surgirent.

Petit mais costaud, c’est jQuery

Quand on joue sur le web, jQuery est souvent de la partie. Il devient assez rare de faire l’économie d’un framework Javascript, quel qu’il soit. Voici deux méthodes pour ajouter une classe CSS afin de pallier les insuffisances d’Internet Explorer 6 en matière de gestion des classes multiples.

  1. La solution fournie par Florian (@_Florian_R) a le mérite de la simplicité et de l’efficacité. Il suffit de passer les classes multiples à la fonction `jQuery()` et d’ajouter la classe de son choix avec la méthode `addClass()`. Seul petit bémol, cette méthode oblige à parcourir tout le document à la recherche des deux classes. 
    $(document).ready(function() {
    $(".classe1.classe2").addClass("classe1-classe2");
});
  2. Allons plus loin avec Stéphane Rouillé (@stfr) – Web Developper, PHP and jQuery addict. Sa fonction permet,  au choix,  de remplacer les deux classes précédemment utilisées par une nouvelle classe (replace : true;) ou de les garder (replace : false;). Il est possible de spécifier le noeud DOM pour éviter de parcourir l’ensemble du document afin de ne pas gréver inutilement les performances déjà limitées de notre très cher (coûteux) IE6 ! 
    /*
*   Merge multiple CSS classes in one.
*   Just use : $('body').multipleClassCombiner();  in order to apply this filter on all multiple classes elements
*   Take care : $('h1').multipleClassCombiner() will apply this filter on <h1>'s childrens. But you can easily modify it.
*   Default delimiter : "-"
*   Have Fun !
*   @author Stéphane Rouillé (Twitter: @stfr)
*   @date 2011-02-08
*   Free to use, distribute, modify, etc etc...
*/
(function($) {
    $.fn.multipleClassCombiner=function(params){
        var options={
            delimiter:'-',
            replace : true
        };
        $.extend(options,params);
        var multipleClassElements=$(this).find("*[class*=' ']");    /* Oh god ! */
        multipleClassElements.each(function(){
            var classes=$(this).attr('class').trim().split(' ');
            if(options.replace){
                $(this).attr('class',classes.join(options.delimiter));
            }else{
                $(this).attr('class',$(this).attr('class')+' '+classes.join(options.delimiter));
            }
        });
    }
})(jQuery);

Regarde Maman, sans jQuery !

jQuery est souvent une bonne idée, mais de nombreux projets de sites internet ne nécessitent pas de framework. Mettre en place jQuery juste pour gérer les classes multiples dans IE6 n’est pas très raisonnable :  les utilisateurs de ce navigateur obsolète utilisent déjà des configurations assez modestes… Inutile, donc, de charger la mule ;)

C’est Edouard Cunibil (@DuaelFr) – Développeur web freelance certifié PHP — qui nous offre une fonction en pur Javascript. Pour utiliser patchMultipleClass(), il suffit de passer les classes multiples en paramètres, en ajoutant, le cas échéant, le noeud DOM impliqué dans la recherche. Par défaut, la fonction parcours tout le DOM à partir de body, mais rien ne vous empêche de limiter les dégâts à #content, par exemple. 

function patchMultipleClass(classNames, parent)
{
    var children, current, classes, found, subfound, splitClassNames, joinClassNames;
    var i, j, k;
    splitClassNames = classNames.substr(1).split('.');
    joinClassNames  = splitClassNames.join('-');
    if (!parent) { parent = document.getElementsByTagName('body')[0]; }
    children = parent.children;
    for (i = 0 ; i < children.length ; ++i) {
        current = children[i];
        classes = current.className.split(' ');
        found   = true;
        for (j = 0 ; j < splitClassNames.length ; ++j) {
            subfound = false;
            for (k = 0 ; k < classes.length ; ++k) {
                if (classes[k] == splitClassNames[j]) {
                    subfound = true;
                    break;
                }
            }
            if (!subfound) {
                found = false;
                break;
            }
        }
        if (found) {
            if (current.className.indexOf(joinClassNames) == -1) {
                current.className += ' ' + joinClassNames;
            }
        }
        patchMultipleClass(classNames, current);
    }
}
if (window.attachEvent) {
   window.attachEvent("onload", function() {
       var parentElt = document.getElementById('content');
       patchMultipleClass('.wp-caption.alignright', parentElt);
       patchMultipleClass('.wp-caption.alignleft', parentElt);
       patchMultipleClass('.wp-caption.alignnone', parentElt);
       patchMultipleClass('.wp-caption.aligncenter', parentElt);
   });
}

Cibler uniquement IE6

Pour réserver ce traitement Javascript aux seuls navigateurs ne prenant pas en charge les classes multiples (IE5 — IE6), j’utilise les commentaires conditionnels : 

<!--[if lte IE 6]>
    <script src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/functions-ie6.js""></script>
<![endif]-->

Voilà, c’est fini !

J’espère que ces quelques précisions sur ces quelques fonctions Javascript permettant de gérer les classes multiples dans Internet Explorer 6 vous permettront de vous amuser. Je tiens une nouvelle fois à remercier Florian (@_Florian_R), Stéphane Rouillé (@stfr) et Edouard Cunibil (@DuaelFr) pour avoir planché nuitamment sur ce problème :-)

N’hésitez pas à partager vos découvertes sur ce sujet, elles seront les bienvenues.

Merci également à tous ceux qui ont répondu d’une manière ou d’une autre à l’appel : @mgeoffray, @Remzz, @Tchesssss, @JeuneVeteran, @phenxdesign, @burninghat, @jcbrebion, @Darklg, @LDZintegratore, @naholyr, @piouPiouM, @cafenoirdesign, @rickdog, @studiohypehope.

Retrouvez-moi sur Twitter avec @br1o !

Articles sur le même sujet

flattr this!

]]> http://css4design.com/fonction-javascript-contre-bug-classes-multiples-internet-explorer-6/feed 22 23 listes pour Webdesigners http://css4design.com/listes-pour-webdesigners http://css4design.com/listes-pour-webdesigners#comments Tue, 02 Nov 2010 18:43:55 +0000 Bruno Bichet http://css4design.com/?p=7847

Quoi de mieux (ou de pire) qu’une liste de liens résultant d’une veille technique et stratégique triée sur le volet ? Une liste de listes de liens, pardi ! Voici donc devant vos yeux ébahis, plus de 20 listes thématiques dans le domaine du Webdesign, de l’intégration Web (HTML, CSS et Javascript) et de WordPress.

  1. 390 ressources Javascript & jQuery – Cette liste reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows.
  2. 100+ Polyfills et Fallbacks pour HTML5 – Guide tout-en-un des solutions de repli pour HTML5. Liste garantie entièrement non-alphabétique et sans grumeau pour utiliser les dernières technnologies à la mode, même dans Internet Explorer !
  3. Le petit journal permanent de CSS3 — 100+ ressources pour commencer à comprendre et utiliser CSS3 dès aujourd’hui sans douleur grâce à des générateurs en ligne pour créer vos coins arrondis, vos ombres portées, vos dégradés, etc. Vous trouverez des expérimentations pour utiliser tout le potentiel de CSS3 sans utiliser Javascript.
  4. Le petit journal permanent de HTML5 — Des sites web consacrés à HTML5, des tutoriels, des trucs et des astuces, sans oublier les liens vers les ressources officielles !
  5. Le petit journal permanent de la TypOgrApHiE — plus de 60 ressources commentées et actualisés dans le domaine de la typographie : liens généralistes en français et en anglais, outils et techniques pour le Web, conseils tutoriels et astuces, trouver des polices de caractères, bibliographie.
  6. 15 « Photoshop-like » en ligne testés et commentés — Liste d’outils passés au crible avec un résumé, les «plus», les «moins» et un «verdict» pour que vous fassiez le bon choix pour l’édition de vos images en ligne.
  7. 14 outils en ligne pour créer des palettes de couleur — Choisir une bonne palette de couleur est une décision importante qui impacte la réussite d’un site internet. Jetez un oeil sur ces outils en ligne pour faire des ensembles de couleurs harmonieux.
  8. 30+ frameworks CSS — Mettez une grille dans votre design — Votre framework CSS préféré se trouve peut-être parmi cette sélection de ressources commentées de frameworks CSS et de générateurs de grilles de mise en page fixes ou fluides.
  9. 30+ éditeurs HTML — Sélection de plus de 30 éditeurs HTML plus ou moins WYSIWYG.
  10. 139 Ressources Javascript et jQuery — Liste de liens pour le développeur web front-end issue de la veille documentée que j’effectue sur Javascript & Webdesign.
  11. 5 CMS rapides et légers pour votre blog et votre site vitrine — CMS : à côté des poids lourds du secteur comme WordPress, SPIP, Joomla!, Drupal ou Typo3, des solutions légères n’attendent que vous !
  12. 7 outils en ligne pour l’intégration HTML & CSS — Réduisez le temps passé à l’intégration Web : éditeurs visuels, générateurs de colonnes, conversion des pixels en unité relative em, etc.
  13. 21 fonctions Javascript pour l’intégrateur web — Parce qu’il est parfois nécessaire de se passer des frameworks Javascript, il est toujours bon d’avoir quelques fonctions standalone sous la souris pour se faciliter l’intégration cross-browser !
  14. Liens utiles pour l’intégrateur HTML / CSS et le développeur web — Concevoir des emails, dénicher des feuilles de style pour vos tableaux, ajouter des menus déroulants intelligents  ou encore faire le point sur les templates tags WordPress.
  15. 11 ressources pour mieux bloguer en français — Ressources sur la grammaire, la conjugaison et l’orthographe.
  16. 13 outils pour l’intégrateur web — Des liens utiles en toutes circonstances !
  17. 10 bons liens WordPress — Trucs et d’astuces pour améliorer votre blog ou votre site web avec WordPress.
  18. 10 liens pour faire plaisir à votre intégrateur web — Générateur de miniatures pour WordPress, valider votre site, gérer votre base de données, des plugins jQuery.
  19. 23+ ressources pour webdesigner — Nouveaux blogs à découvrir, techniques utiles pour l’intégrateur HTML et CSS, astuces WordPress, outils de mesure d’audience.
  20. 100+ comptes Twitter pour webdesigner — Comptes Twitter anglo-saxon : Webdesign, WordPress, Standards du Web, Javascript & jQuery, Photoshop & Illustrator, HTML & CSS, PHP, architecture de l’information.
  21. 200+ garçons à suivre sur Twitter — Développeurs Web, intégrateurs HTML & CSS, spécialistes jQuery, poètes sur WordPress, graphistes, blogueurs amateurs ou professionnels.
  22. Top 100+ des filles à suivre sur Twitter — Webdesigneuses, graphistes, spécialistes en SEO ou e-marketing, rédactrices freelance ou pour des grands journaux, blogueuses amatrices, étudiantes en communication.
  23. 1000 ressources pour le développement web et WordPress — Last but not least, voici la grosse grosse liste qui en a encore sous la botte : gardez le maximum de ressources à portée de souris sur jQuery, WordPress, le Webdesign, etc.

Vous en voulez encore ? Voici la liste des listes qui rassemble des liens vers des pages qui consistent en une liste ou qui comportent une liste.

Articles sur le même sujet

flattr this!

]]> http://css4design.com/listes-pour-webdesigners/feed 12 Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek http://css4design.com/le-petit-journal-du-web-7 http://css4design.com/le-petit-journal-du-web-7#comments Tue, 12 Oct 2010 07:54:54 +0000 Bruno Bichet http://css4design.com/?p=7255

Vous l’attendiez, il est là, c’est le petit journal du web ! A la Une cette semaine : des ressources pour exploiter au mieux les propriétés CSS3, un dossier sur l’ARIA-nisation et la HTML5-nisation de WordPress, le point sur display: inline-block, un tutoriel conséquent sur Javascript, le bilinguisme et l’optimisation des performances dans WordPress (et tout un tas d’astuces très pratiques). Vous aurez aussi un modèle de cahier des charges et des informations pour partir du bon pied avec vos projets de sites Web. Deux nouvelles rubriques font timidement leur apparition dans cette revue de presse : La vie quotidienne du geek et Nostalgeek.

Breaking News!

Charité bien ordonnée commence par soi-même : voici la liste des billets que j’ai mis à jour dernièrement : 28 frameworks CSS et Le petit journal permanent de HTML5.

WordPress

Une actualité littéraire débordante avec la parution de deux livres sur notre CMS préféré.

Sites Web avec WordPress 3.0 — Cet ouvrage «100% pratique» paru aux Editions DUNOD est destiné à ceux qui souhaitent découvrir et maîtriser WordPress 3.0 sans perdre de temps. Il a été écrit par Simon Kern (Brin d’web et Alsacréations), concepteur et designer graphique & multimédia pour des des projets web et print. Il est également formateur sur Flash et WordPress. L’objectif principal du livre est de vous permettre de maitriser la création d’un thème WordPress 3.0 grâce à un concentré de pratiques saines et efficaces. Le livre est accompagné d’un CD-ROM et la table des matière et un aperçu du livre sont disponibles sur DivaBook.

WordPress 3 —  Cette seconde édition entièrement révisée couvre les nouveautés de la version 3. Les débutants pourront construire un blog et les lecteurs expérimentés approfondiront leurs connaissances techniques : conception de thèmes et d’extensions, mise en place d’un réseau de sites avec la fonctionnalité multisites intégrée. WordPress 3 est écrit par Xavier Borderie, Francis Chouquet et Amaury Balmer — Salut les gars o/

WordPressez, il en restera toujours quelques chose !

HTML(5), CSS(3), jQuery (Javascript)

Métiers du Web

  • Modèle de cahier des charges de site web — Envie de lancer un appel d’offre, mais vous ne savez pas par quoi commencer ? Damien Ravé nous offre un modèle de CDC au format .doc (qui s’ouvrira parfaitement avec OpenOffice.org) à compléter selon vos besoins. Rendez-vous à l’adressse cahier-des-charges-web.lepotlatch.org pour avoir la dernière version. Bref, de quoi éviter le cahier «décharge» ^__^
  • La vie des intégrateurs, chapitre IV : Les specs ? Quels specs ? — Eric le Bihan nous parle avec humour du processus et des différents intervenants impliqués dans la création d’un site web : «réunion de kick-off et identification des ressources», «conception et wireframes», «création graphique et mise en couleur», «validation du client», «laissez les intégrateurs faire leur travail…», «on va débugger tout ça maintenant». Lecture complémentaire : Bien démarrer son projet avec le kick-off meeting.
  • Bilan d’une recherche d’emploi — Sylvain Fix fait le bilan d’une recherche d’emploi qui lui a permis de prendre le temps d’étudier le marché de l’emploi dans le secteur du développement web : le secteur de l’informatique est en crise, le critère de la localisation géographique, que nous disent les entretiens d’embauche, les rémunérations.

Vie quotidienne du geek

  • Flux RSS — Vous ne le savez peut-être pas, mais Google abandonne le support du tracking des changements survenus sur un site web. Grosso modo, Google Reader proposerait la création d’un flux RSS pour les sites qui en étaient dépourvus. Parmi les alternatives, Google himself nous propose d’utiliser page2rss.
  • Photoshop CS3, Retouche photo — En attendant un retour un peu plus touffu, je vous conseille la lecture de ce livre sur les techniques des professionnels pour retoucher vos photos numériques de la perception de la lumière et des couleurs par l’oeil humain à la l’optimisation pour la diffusion à l’écran (Web) ou pour l’impression. Téléchargez gratuitement Les fichiers PDF optimisés pour le web (21 Mo) ou les fichiers PDF pour l’imprimeur (120 Mo) disponibles également par chapitres.
  • 25 tutoriels Photoshop et Illustrator — Belle liste de tutoriels pour les plus graphistes d’entre vous avec des thèmes allant de la création d’une fille-oiseau (assez improbable mais les techniques mises en oeuvre valent le détour) à des effets de flammes de très bonne facture.
  • Goo.gl a maintenant son site et des statistiques — Le service de réduction d’urls de Google lancé fin 2009 et utilisé en interne par Google dans FeedBurner, Maps ou Picasa devient accessible au public pour en faire le raccourcisseur le plus stable, le plus sécurisé et le plus rapide du web. Cerise sur le gâteau, Goo.gl propose des statistiques à la manière de bit.ly.
  • YOU CANNOT COPYRIGHT A TWEET – La loi américaine sur le droit d’auteur ne semble pas protéger les tweets qui n’entrent pas dans son champs d’application. Que dit la loi française ?

NostalGeek (pour la route)

Déjà fini ?

Oui, jusqu’à la prochaine édition. En attendant, n’hésitez pas à me retrouver sur mon compte Twitter @br1o les bons tuyaux et de vous abonner au flux RSS du blog de l’intégrateur. Merci de votre attention.

Articles sur le même sujet

flattr this!

]]> http://css4design.com/le-petit-journal-du-web-7/feed 11 Refaire l’interface du nouveau Twitter avec CSS et jQuery http://css4design.com/nouveau-twitter-css-jquery http://css4design.com/nouveau-twitter-css-jquery#comments Mon, 11 Oct 2010 09:41:42 +0000 Bruno Bichet http://css4design.com/?p=7268

New Twitter Design with CSS and JQuery –Tout le monde ou presque a pu voir la nouvelle interface utilisateur de Twitter. Elle fait un usage intensif de Javascript et si l’utilisation du nombre d’or dans la maquette initiale ne brille pas par sa présence, le reste de l’interface est très fluide et bien pensée.

Pour nous aider à y voir plus clair sur le développement d’une interface similaire (nul doute que ne nouveau Twitter fera des émules) le prolifique et talentueux Srinivas Tamada de 9lessons nous propose rien de moins qu’un tutoriel pour refaire la même chose à la maison.

Chaque étape du tutoriel est illustrée par un visuel explicite et le code CSS ou jQuery associé.

Cliquez sur l'image pour voir l'animation. © Srinivas Tamada, 9LESSONS.

Voir la démonstration.

Articles sur le même sujet

flattr this!

]]> http://css4design.com/nouveau-twitter-css-jquery/feed 1