background preloader

À quoi servent les balises META

À 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. On y parlera de tapage de tête contre les murs, du meilleur moyen pour conserver sa santé, et de subtilités qui vont bien. 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). La grande question: est-ce que c’est vraiment utile? E​n HTML 5 :

How to create a parallax scrolling website using Skrollr.js | Tutorial Today’s parallax website tutorial is a detailed explanation of the Parallax Scrolling Effect using Skrollr.js published a few weeks ago. You will learn how to create a simple parallax scrolling website using Skrollr.js plugin. If you haven’t seen the demo already, go and check it out. View Demo Download Files Introduction To develop a parallax scrolling website can be a bit scary especially if you do it for the first time, but as you know the practice makes perfect. Please note, that this tutorial is suitable for a more advanced developers and attached files are the final files. 1. As a first step we need to include Skrollr.js preferably before the closing body tag. Initiate the Skrollr inside of the _main.js file. Now lets have a look at the markup and Skrollr settings of the individual slides. 2. Section height – 100% of the viewport, resized on page load Background animationThe background image of .bcg is animating from the initial position (data-center) 50% 0px to 50% -100px. 3. 4. 5.

Microformats Backbone.js nofollow nofollow is a value that can be assigned to the rel attribute of an HTML a element to instruct some search engines that a hyperlink should not influence the link target's ranking in the search engine's index. It is intended to reduce the effectiveness of certain types of internet advertising because their search algorithm depends heavily on the number of links to a website when determining which websites should be listed in what order in their search results for any given term. Concept and specification[edit] The specification for nofollow is copyrighted 2005–07 by the authors and subject to a royalty free patent policy, e.g. per the W3C Patent Policy 20040205,[3] and IETF RFC 3667 & RFC 3668. Example[edit] <a href=" rel="nofollow">Link text</a> Introduction and support[edit] Interpretation by the individual search engines[edit] Use by weblog software[edit] Use on other websites[edit] Repurpose[edit] Paid links[edit] Control internal PageRank flow[edit] Criticism[edit]

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. 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. Framework Metro UI CSS Salatore Font Combiner stickUp Animated SVG Icons CSS Modal Box

Métadonnées et Dublin Core Les métadonnées du Dublin Core permettent de donner des informations à propos de pages Web. Dans cet article, nous voyons la forme de ces descriptions, ainsi que la façon de les intégrer dans des pages (X)HTML. Introduction Depuis toujours, les bibliothécaires ont rédigé des notices, ou des index, pour décrire les documents disponibles. Ces données à propos de données s'appliquent particulièrement bien aux pages Web. Avec ces métadonnées, le travail des moteurs d'indexation et de recherche est grandement facilité car ils peuvent extraire automatiquement de nombreuses informations sur le document, ainsi que reconstituer les relations qui existent entre documents (par exemple, on peut savoir qu'une page est la cinquième d'un ensemble cohérent de quinze pages chaînées les unes aux autres). Cependant, il est nécessaire que tous les acteurs (publicateurs, éditeurs de logiciels clients, etc.) partagent une définition et une nomenclature communes des métadonnées. Principes Propriétés scheme <!

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 ! 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. 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 L’éditeur de texte officiel de l’environnement GNOME qui supporte aussi les caractères Unicode, la surbrillance pour divers langages de programmation, un outil de recherche et de remplacement, la création automatique de fichiers de sauvegarde. 4. 5. Et vous, quelle alternative à Notepad++ utilisez-vous sur Mac ?

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. Polygon used it to great effect on a custom designed article and wrote about it. Codrops has some neat examples. 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. Tada! Live Example So why all the JavaScript? Most of the examples you see of SVG line animations use JavaScript. Share On

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. En conséquence, lors de l’écriture de la norme CSS 2.1, cette fonctionnalité fut purement et simplement supprimé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. Les alternatives

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 Beau menu déroulant jquery - Sliding Menu jquery Dans ce tutoriel Html & Css, nous allons vous montrer comment créer un très beau menu déroulant. Nous allons bien évidemment utiliser les nouveau attributs des langages HTML & CSS qui enjolivent toujours plus nos sites web. Voir la démo Télécharger le fichier zip 1 ère étape : créer le menu en html <div id="content"><ul><li><a href="#">Amis <span>340</span></a><ul><li><a href="#">Famille<span>14</span></a></li><li><a href="#">Ecole<span>6</span></a></li><li><a href="#">Travail<span>2</span></a></li></ul></li><li><a href="#">Videos <span>147</span></a><ul><li><a href="#">Sport<span>14</span></a></li><li><a href="#">Musique<span>6</span></a></li><li><a href="#">Cuisine<span>2</span></a></li></ul></li> Etc... 2ème étape : le style CSS Ces quelques lignes demandent un léger éclaircissement. Le sprite image pour les icônes 3ème étape : du jquery pour dynamiser La bibliothèque directement prise à la source pour bénéficier de la rapidité des serveurs.

Related: