À quoi servent les balises META Les balises META c’est utile quand c’est utile; et quand c’est pas utile… eh bien c’est inutile. Vous l’aurez compris: ça dépend. Mais pour ne pas vous laisser avec cette simple vérité — et jolie tautologie —, nous vous proposons un petit point sur les balises META. Sommaire C’est quoi une balise META? Les balises META servent à placer des métadonnées (metadata) dans une page HTML. À qui sont destinées ces informations? aux navigateurs web aux moteurs de recherche; plus largement, à tous les outils d’indexation, c’est-à-dire tous les outils qui analysent vos pages pour y identifier diverses informations. Anatomie d’une balise META Lorsque l’on parle de «balises META», on parle en réalité de l’élément meta en HTML (voir ce que dit la spécification HTML 4.01 pour cet élément et la spécification HTML5). Lorsqu’on parle d’une balise META, on pense en général à un élément meta qui utiliserait des attributs et valeurs précises. La grande question: est-ce que c’est vraiment utile? En HTML 5 :
How SVG Line Animation Works I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. I have very little to add, except my brain just kinda figured it out, so I thought I would explain it one more time the way it clicked for me. 1. 2. 3. We could do that from Illustrator, but we can also do it programatically. That gives us dashes of 20px in length. 4. 5. Watch as we animate the offset of those long strokes: That was a simple as: 6. Nothing really to see, it looks just like the complete shape if it wasn't dashed at all. 7. It will look like the shape isn't there at all. 8. If doing it with CSS, you'll want the animation to have animation-fill-mode of forwards so the final state remains how the animation ends. Tada! Live Example So why all the JavaScript? You can get that length in JavaScript like: Share On
Backbone.js 8 outils à connaitre absolument si vous êtes webdesigners - Retrouvez ici les derniers outils (script jQuery, framework CSS...) publiés spécialement dédiés aux webdesigners professionnels. Les journées des webdesigners sont parfois trop courtes pour réaliser tous les projets à réaliser, surtout quand vous travaillez en tant que freelance. Pour gagner du temps il est primordial de connaitre toutes les astuces pour optimiser vos plannings. L’une de ces astuces que j’utilise quotidiennement c’est d’user des différents outils que le web proposent (et proposent souvent gratuitement). Pour vous aider je vous propose 8 outils nouvellement publiés. Entre script jQuery, plugins wordpress ou outils CSS préparez-vous à gagner du temps ! Effet 3D sur texte en CSS Voici un article pour réaliser un superbe effet d’animation 3D sur un simple texte, et tout cela simplement en CSS ! Garder un bloc toujours visible Avec ces différents scripts jQuery vous pourrez créer des blocs qui restent visible à l’écran mais qui se positionnent sur certains points précis. stickUp
Templates email gratuits Templates email gratuits Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 7 966 fois. Petite ressource du week-end trouvée durant la semaine par un collègue de travail (ouais moi je bossais, ce sont mes collègues qui ne sont pas sérieux :p) : des templates HTML/CSS/PSD pour vos emailing.Il y a de très jolies graphismes de toutes les sortes avec des intégrations optimisées pour la majorité des plateformes mail. Découvrez donc ces templates ainsi que leur créateur sur le site de CampaignMonitor.com. De nombreux styles à télécharger parmi une centaine de template : Et… voilà c’est tout. Enjoy ! Liens utiles : - CampaignMonitor.com - MailChimp.com À propos de Geoffrey Intégrateur et designer web, fondateur de Creative Juiz, il a trouvé marrant et juste de partager ses recherches, astuces et ressources sur les sujets comme CSS, HTML, JavaScript, PHP, WordPress, etc. grâce aux articles que vous trouverez sur ce blog. Laisser un commentaire
5 alternatives à Notepad++ pour Mac Notepad++ est sans aucun doute le meilleur éditeur de code source pour Windows. Le problème, c’est qu’il n’existe pas pour Mac ! Débarqué récemment sur Moutain Lion, il m’a fallu quelques temps pour retrouver mes bonnes vieilles habitudes. J’ai donc fouiné le Web afin de vous dégoter 5 alternatives à Notepad++ pour Mac… 1. Certainement l’une des meilleures solutions gratuites, TextWrangler se démarque avec quelques options comme : une interface agréable qui vous permet de travailler en plein écran, une organisation des fichiers en cours d’édition dans une barre latérale, des couleurs différentes en fonction des balises. 2. Logiciel gratuit qui propose une interface simple grâce à une navigation par onglets et plus de 60 langages de programmation. 3. gedit 4. Cet éditeur de texte complet est disponible dans les environnements de bureau Windows, Linux, et Mac OSX. 5. Cet éditeur de texte complet et intuitif est idéal pour l’édition de sites Web, de scripts et de codes de programmation.
Bonnes pratiques pour les déclarations @font-face Petit rappel historique À l’origine, les déclarations CSS @font-face faisaient partie de la norme CSS 2.0 et étaient supportées aussi bien par Internet Explorer 6 que par Netscape 4. Nous étions alors à la fin des années 90 et la guerre entre ces deux navigateurs faisait rage. Malheureusement, les constructeurs ainsi que les fondeurs ne parvinrent pas à se mettre d’accord à l’époque sur un format de fonte et le haut débit n’étant pas encore généralisé, cette technologie ne fut que peu ou pas utilisée. Avec CSS 3, c’est le grand retour en force des fontes web à travers le module CSS Fonts qui redéfinit la méthode d’insertion des fontes personnalisées dans les navigateurs. Déclaration simplifiée Une déclaration simple ressemble à ça : La propriété font-family permet de définir le nom de la fonte tel qu’il sera utilisé par la suite dans les déclarations de style. Gestion des formats de fonte Notez la présence de l’ancre nommée sur l’url de la police SVG. Le cas Internet Explorer Conclusion
Les transitions en CSS3 – Mouseover et Mouseout sans JavaScript Manière un peu originale d’aborder les transitions, j’ai lu un article en anglais il n’y a pas longtemps qui proposait d’étudier les transitions sur l’événement hover en CSS. Par défaut, la transition sur cet événement comme on a l’habitude de l’utiliser nous propose des effets équivalents au «mouseover» comme au «mouseout». Nous allons voir assez simplement comment diviser en deux les effets de transitions pour proposer un effet au survol différent de l’effet de transition au moment où la souris quitte l’élément. Les propriétés CSS 3 demandent un préfixe pour les navigateurs (-moz-, -webkit-, etc.) que je n’ai pas précisé ici. Rappel sur transition en CSS 3 Pour créer une transition en CSS 3, vous aurez besoin de plusieurs informations, dont : l’effet recherché (et sa correspondance en propriété CSS), la durée et éventuellement le scénario. Je ne vais pas refaire un article complet sur les détails de ces propriétés, il y en a un très bien fait sur Alsacréations.com par Antoine Cailliau.
Ecommerce Software & Ecommerce Platform Solutions | Magento Warby Parker Eye wear, innovation, strong results, strong brand, great story Harpers Bazaar Fashion industry, recognizable brand, scalability, and flexibility Gant International brand, fashion, performance, global expansion, strong results