background preloader

HTML5 : 20 Conseils et astuces pour coder proprement ses pages

HTML5 : 20 Conseils et astuces pour coder proprement ses pages
Voici une liste de 20 astuces pour coder vos pages proprement en HTML5. Tous ces conseils, mis bout à bout, vous serviront à améliorer votre référencement, respecter certaines normes W3C ou encore optimiser la compatibilité. Efforcez-vous de suivre le plus rigoureusement ces règles en fonction de votre projet. 1. Le Doctype à subit un rajeunissement avec l’arrivé du HTML5. 2. Vous avez déjà du l’entendre, mais pensez toujours à bien fermer vos balises. 3. Il existe de nombreuses raisons pour qu’une page soit accessible à différentes adresses à la fois. 4. Bien qu’il existe d’autres solutions plus complète, vous pouvez néanmoins régler certain aspect du cache du navigateurs de vos visiteurs. Suivant votre cas, il peut être préférable de définir le cache. En revanche si, par exemple, votre site à accès régulièrement à des bases de données qui le maintiennent à jour le cache ne dois pas fonctionner. 5. 6. Le respect de la sémantique est primordiale pour un bon référencement naturel. 7. 8. Related:  HTML5 & CSS3Webmastering

10 CSS3 Properties you Need to be Familiar with We've already covered the thirty CSS selectors that we should all memorize; but what about the new CSS3 properties? Though most of them still require a vendor-specific prefix, you can still use them in your projects today. In fact, it's encouraged! The key is to first determine whether or not you're okay with a slightly different presentation from browser to browser. Are you okay with, say, IE displaying 90 degree corners, rather than slick rounded ones? View Demo Easily the most popular CSS3 property in the bunch, border-radius was sort of the flagship CSS3 property. The irony is that we're all perfectly fine with the idea of providing an alternate viewing experience for mobile browsers. Please note that both Safari 5 and IE9 implement the official `border-radius` syntax. Some readers may not be aware that we can also create circles with this property. View Demo View Demo Next, we have the ubiquitous box-shadow, which allows you to immediately apply depth to your elements. View Demo

The History of CSS Resets When artists begin a new painting, they don’t immediately reach for the cadmium red and the phthalo blue. They first prime the canvas . Why? Many web designers prefer to use a CSS "reset" to "prime" the browser canvas and ensure that their design displays as uniformly as possible across the various browsers and systems their site visitors may use. This is Part 1 of a three-part series of articles on the topic of CSS resets. What Is CSS Reset? When you use a CSS "reset," you’re actually overriding the basic stylesheet each individual browser uses to style a web page. The problem is that every browser’s stylesheet has subtle but fundamental differences. Some of the most common elements that are styled differently among different browsers are hyperlinks ( <a> ), images ( <img> ), headings ( <h1>through <h6>), and the margins and padding given to various elements. So which browser is right, Firefox or IE? It might be useful to peruse this chart showing the various browser defaults. The Yahoo!

HTML5 Un article de Wikipédia, l'encyclopédie libre. HTML5 (HyperText Markup Language 5) est la dernière révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version est en développement en 2013. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Dans le langage courant, HTML5 désigne souvent un ensemble de technologies Web (HTML5, CSS3 et JavaScript) permettant notamment le développement d'applications (cf. Contexte historique[modifier | modifier le code] Changements par rapport à HTML 4.X et XHTML 1.X[modifier | modifier le code] Spécifications[modifier | modifier le code] Les spécifications sont publiées par le W3C Voir aussi : html5-profile <?

HTML5 se dévoile - Alsacréations Le brouillon officiel (working draft) de HTML5 a été publié officiellement le 23 avril 2009 et depuis de nombreuses avancées ont été accomplies, les navigateurs supportant toujours plus de fonctionnalités et de nouveautés. La nouvelle génération du langage de balisage HTML remplacera à long terme HTML 4, XHTML 1.x et XHTML 2 qui a été abandonné. Profitons de cette occasion pour faire un tour d'horizon de cette nouvelle version de HTML. Consultez également toutes nos autres ressources HTML5 Qu'est-ce que c'est HTML5 ? Comme son nom l'indique, HTML 5 est le successeur de HTML 4. Le W3C c'est quoi déjà ? Le World Wide Web Consortium, abrégé W3C, est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Quelles sont les nouveautés ? <aside> Welcome! Les balises principales Doctype Le doctype est simplifié : Section Article Aside Nav

10 sites de photos gratuites libres de droit - Lady bird red Comme je vous l'ai expliqué dans mes astuces pour un joli blog, le choix de vos photos et de vos images est très important pour votre blog. Il faut les mettre en valeur dans votre design pour qu'elles s'imposent et attirent le regard de vos lecteurs. Mais il faut aussi bien choisir ses photos. Quand on n'est pas un photographe professionnel, et qu'on a simplement besoin d'une photo pour illustrer un article, alors on peut se tourner vers les photos gratuites sur internet (Google par exemple). Pour éviter ce problème, voici 10 sites qui proposent des photos gratuites ET libres de droit ! Unsplash Un des premiers sites que j'ai découvert. Visiter le site Death to stock photo Un de mes préférés, Death to stock photo propose de recevoir tous les mois un pack de photos haute résolution directement dans notre boîte e-mail. Visiter le site Magdeleine Ici on ne reçoit pas les photos par e-mail, toutes les photos sont sur le site internet. Visiter le site Pexels Visiter le site Cliché Mignon Jay Mantri

Slideshow en CSS3 - Alsacréations Beaucoup de Webdesigners en rêvent : utiliser les CSS plutôt que le JavaScript ou le Flash pour animer leur page web. Ce rêve devient petit à petit concret avec les nouvelles implémentations des modules CSS en cours de travail (Working Draft), notamment CSS3 Animations. Celui-ci équipé des keyframes devient fort intéressant pour un contrôle avancé des animations. Nous verrons donc comment utiliser cette nouveauté, mais aussi comment combiner intelligemment la pseudo-classe target pour réaliser un slideshow. Présentation et compatibilité Cette partie du tutoriel va légèrement reprendre le contenu d'une publication d'Antoine Cailliau, Tutoriel sur les Transitions CSS3, que je vous conseille de lire au préalable. Ce tutoriel repose sur les spécifications du W3C concernant la pseudo-classe target du module "Selectors Level 3 (:target)" passée il y a peu en W3C Recommandation et sur le module "CSS Animations Module Level 3" actuellement en Working Draft. La pseudo-classe target Voir l'exemple

A Comprehensive Guide to CSS Resets This guide examines the infinite-like variety of CSS resets created by web developers and designers across the world. While almost all of these CSS resets are generally provided free for public use (many through Creative Commons licensing), it is incumbent upon you to check the terms of use before putting them to use in your projects. This guide follows Part 1, where the history of CSS resets was discussed; you’re advised to read that before this one to get the most out of this guide. This is Part 2 of a three-part series of articles on the topic of CSS resets. In putting together this guide, the 2007 collection of resets by Jeff Starr — who, as an aside, has contributed articles on Six Revisions — was used as a jumping-off point. "Hard" Reset As discussed in Part 1 of this series, the original version of the "hard" reset was by web designer Andrew Krespanis: It wasn’t long before folks added border: 0; and outline: 0; to the list of properties, giving us: Poor Man’s Reset Siolon Reset

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. Before we get started, consider using one of our HTML5 Templates or CSS Themes for your next project—that is, if you need a quick and professional solution. Otherwise, it's time to dig into these techniques. HTML 5 is the next major version of HTML. Before we begin marking up the page we should get the overall structure straight: In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. It still looks like HTML markup, but there are a few things to note: In HTML 5, there is only one doctype. Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. "What?! That's all!

2020 : Les métiers de la communication et du marketing dans dix ans du mois d'Août propose un dossier complet et très intéressant sur la France de 2020. Au programme, analyses et prédictions économiques, supputations sur les maladies que nous auront vaincu d'ici là, zoom sur la mutation des services publics (ça honnêtement ça fait rêver ! La Poste, la SNCF et la Police bardés de High Tech et tournés vers l'efficacité : de la Science-fiction !), les inventions qui bouleverseront notre quotidien et beaucoup d'autres aspects de la vie future sont abordés, avec pas mal de précision et d'optimisme. Une partie de ce dossier concerne les métiers qui auront la cote dans dix ans, et j'imagine que ça va intéresser certains d'entre vous... Pour vous mettre l'eau à la bouche, la partie communication / marketing commence ainsi : "Les pros du marketing Internet devraient trouver des emplois à la pelle". "Encore embryonnaire, ce drôle de métier va connaître un développement spectaculaire. NETERGONOME"Tous les sites d'e-commerce en France vont devoir en embaucher"

Créer et Ajouter un Favicon - Lady bird red Un Favicon c'est quoi ? C'est cette petite image que l'on retrouve à gauche du nom d'une page web comme ceux-ci : Dans ce tutoriel je vais vous expliquer comment en créer un, et comment l'intégrer à votre Blog sous Blogger :) Introduction Un Favicon est une image en .ico généralement de taille 16 pixels par 16 pixels. Avec Blogger cette image peut être un .png ou un .jpg, et elle peut être plus grande que 16 pixels par 16 pixels. Vous pouvez créer une image sous Photoshop ou Gimp, mais elle doit respecter les consignes suivantes : Image carréeDe taille inférieur à 100 ko. Créer un Favicon Pixlr est un éditeur de photos et d'images gratuit en ligne ! Tout d'abord allez sur le site Pixlr Editor online, et créez un nouveau document en cliquant sur Créer une nouvelle image : Donnez un nom à votre image (par exemple Favicon), et définissez en Largeur 50 pixels, et en Hauteur 50 pixels également. Voici donc votre image pour l'instant : Elle est vide. Créons la forme ronde. Puis cliquez sur l'image.

Related: