background preloader

Art du blog

Facebook Twitter

Administrer outils 2.0 Agenda, Blog...Wiki. Learn WordPress.com. 22 requêtes MySQL indispensables pour WordPress. WordPress stocke les données (articles, pages, catégories, etc.) dans une base de données MySQL. Il est donc utile de connaître certaines requêtes pour intervenir rapidement et de façon massive.

A ne pas mettre entre toutes les mains toutefois ! Peur de vous faire pirater ou de perdre tous vos contenus ? N'attendez plus : confiez-moi vos opérations de maintenance pour un site WordPress sécurisé et performant. N.B : cet article regroupe 22 23 requêtes MySQL pour le CMS WordPress. Mise à jour du 24/05/2014 : les requêtes 5 et 6 ont été corrigées grâce à Julien Maury et son insistance sur presque un an pour me bouger à prendre le temps de vérifier. Avertissements Utilisation de phpMyAdmin Pour exécuter les requêtes listées ici vous devez être capable de vous connecter à phpMyAdmin, un outil généralement accessible depuis l’administration de votre hébergeur (via cPanel ou Plesk par exemple). Si vous n’avez jamais utilisé phpMyAdmin, faites très attention ! Préfixe de la base wp_ Merci à lui ! HTML - Index, Liste des tags balises et des evenements.

Index des éléments HTML. FAQ (X)HTML/CSS - Club d'entraide des développeurs francophones. FAQ (X)HTMLConsultez toutes les FAQ Nombre d'auteurs : 23, nombre de questions : 53, dernière mise à jour : 9 juillet 2013 Cette faq a été réalisée pour répondre aux questions d'ordre général que vous vous posez sur le html et le xhtml. Cette faq ne garantit en aucun cas que les informations qu'elle propose sont correctes ; les auteurs font le maximum, mais l'erreur est humaine. Si vous trouvez une erreur, ou si vous souhaitez devenir redacteur, contactez-nous ! Bonne lecture. FAQ lues 4171 fois. Version PDF Version hors-ligne Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance.

CSS - S. Les feuilles de styles : syntaxe de base. Feuilles de styles : attributs de polices. Feuilles de styles : couleur et fond. Feuilles de styles : texte. Feuilles de styles : marges et remplissage. Feuilles de styles : bordures. Feuilles de styles : placement d'objets. New pearl. Feuilles de styles : tableaux. Articles sur la conception web - Alsacréations. Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5), balises, structure des pages web et validation W3C Feuilles de style CSS (Cascading Style Sheet) Accessibilité Accessibilité des sites internet, bonnes pratiques, ergonomie, utilisabilité Javascript Langage de script pour le web dynamique exécuté par le navigateur Astucejavascript Les raccourcis de propriétés (property shorthand) en JavaScript Niveau confirméArticlejavascript Navigation Timing API Niveau confirméArticlejavascript Les Web Workers en action Niveau expertArticlejavascript Deno, le futur de Node ?

Développement Langages et technologies du web tels que PHP, MySQL, Ajax Responsive web design Tout pour smartphones et tablettes Design Design et graphisme pour le web Vue & Nuxt Vue.js et Nuxt Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général. Display, vous connaissez ? - Alsacréations. La propriété CSS Display est un puissant outil souvent mal connu et dont les possibilités réelles sont rarement utilisées.

Il faut avouer que Internet Explorer y est pour quelque chose... espérons qu'il se mette à la page, vu les horizons ouvertes par cette propriété. Sources et documentation : La propriété Display admet 18 valeurs : inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none et inherit.

Officiellement, Internet Explorer 6 reconnaît 7 valeurs pour Display : block, none, inline, inline-block, list-item, table-header-group et table-footer-group. Cette restriction est comblée dans les versions de IE à partir de IE8. A noter que IE accepte une valeur qui n'est pas dans les standards CSS2 mais uniquement dans un CSS 2.1 à l'état de draft, 'inline-block' Block et Inline block Induit un élément à générer une boîte de bloc principale inline. Guide de survie du positionnement CSS - Alsacréations. Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances encore trop bancales.

Comment s'y retrouver dans le machin tentaculaire qu'est le positionnement CSS? C'est un sujet à la fois complet (tant mieux) et complexe (ouille). Pour bien l'appréhender, il faut prendre en compte: les possibilités de CSS 2.1 pour l'affichage et le positionnement des éléments (et à l'avenir de CSS 3); celles qui sont implémentées dans les navigateurs (et donc pas les autres, sauf pour préparer l'avenir); les contraintes de mise en page et d'adaptation aux contenus (le contenu, ça va ça vient… et ça vous surprend toujours d'une manière ou d'une autre); les contraintes du média screen (on ne fait pas tout et n'importe quoi avec les hauteurs et largeurs, le centrage, etc.); les bugs éventuels des navigateurs (ou de certains navigateurs).

Comment s'y retrouver? Comment éviter que mes éléments flottants (float) dépassent de l. Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS float (aussi appelés flottants, ou en anglais floats) sortent du flux de leur conteneur. Autrement dit, les flottants «dépassent». C'est ainsi qu'on se retrouve avec des conteneurs qui font zéro pixel de hauteur, des colonnes qui passent à travers un pied de page, et autres résultats peu souhaitables.

Par exemple, avec ce code HTML et CSS les «colonnes» flottantes dépasseront de leur conteneur: <div id="conteneur"><div class="colonne">AAA</div><div class="colonne">BBB</div><div class="colonne">CCC</div></div> Comment bloquer ponctuellement le dépassement des flottants? La propriété overflow La propriété CSS overflow définit comment un bloc doit se comporter lorsqu'un contenu dépasse de ce bloc.

Cette propriété a aussi pour caractéristique, lorsqu'on utilise les valeurs autres que visible, de créer ce qu'on appelle un contexte de formatage de bloc. Avantage: technique efficace, tient en une ligne. Initiation au positionnement CSS : 2.position float - Openweb.eu. La position float retire une boîte du flux normal pour la placer le plus à droite ou le plus gauche possible dans son conteneur.

Comment l’utiliser dans une mise en page CSS ? Cet article fait suite à l'initiation au positionnement CSS : 1.Flux et position relative. Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre. Le fonctionnement des flottants Ajoutons aux styles précédents une règle de positionnement flottant à droite et une mesure de largeur (facultative, mais utile pour certains navigateurs) : En HTML: <p class="jaune">Une boîte jaune flottant</p><p class="verte">Une boîte verte doté d'un contenu plus long…</p> En CSS: Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 1 Première utilisation : une mise en page à deux colonnes En CSS : Et en HTML :

Initiation au positionnement CSS : 3. position absolue et fixe - La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d’affichage ou du conteneur. Comment les utiliser dans une mise en page CSS ? Cet article fait suite à l'initiation au positionnement CSS: 2.position float. Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour : placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ; créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML.

Le fonctionnement de la position absolue Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. En CSS : HTML Color Names. Comment bien référencer son blog Hautetfort sur Google : Le blog. Nous laissons aujourd'hui la parole à Damien, que nous vous avions présenté sur cette note. Damien est aussi l'auteur du blog perso, Geek & Cochonneries que vous pouvez retrouver sur Hautetfort. Place à Damien, donc : " Je suppose que la plupart des blogueurs souhaitent être référencés sur Google, et plutôt bien, pour être lus par les autres. Je ne prétends pas vous faire ici la recette miracle pour être bien référencé mais je vais vous donner des aides et conseils simples vous permettant de comprendre le référencement et analyser le votre. Vous allez voir que finalement tout ne tient qu'à vous ;) Je vais faire cet article en plusieurs parties : 1- Optimiser le blog techniquement 2- Optimiser le contenu du blog 3- Aider le référencement avec des outils " Merci Damien, et à vous de cliquer sur Lire la suite pour en savoir plus ;) 1- Optimiser le blog techniquement Alors là on va commencer par les bases, le HTML du blog.

. - Les balises H1, H2... pour donner un ordre d'importance à ses textes. Pourquoi une PME doit avoir un blog : 10 raisons concrètes | Pre. D’accord, le sujet a été rebattu maintes et maintes fois ces dernières années dans les blogs et il semblerait que tout ait été dit. C’est justement pour cette raison que j’y reviens : depuis les balbutiements du web 2.0 (remember ?) On parle de blogs en entreprise, mais tout cela reste finalement assez conceptuel : D’accord, le sujet a été rebattu maintes et maintes fois ces dernières années dans les blogs et il semblerait que tout ait été dit.

C’est justement pour cette raison que j’y reviens : depuis les balbutiements du web 2.0 (remember ?) Mais les choses évoluent, et passée la phase d’évangélisation (ciblée, car toute entreprise n’a pas besoin d’un blog), je constate au fil de mes contacts avec des sociétés que le niveau d’expertise des décideurs vis-à-vis du web a fortement progressé au cours des deux dernières années. Ces avantages sont nombreux, et voici pourquoi : 1 – Pour la communication externe C’est la première raison qui vient à l’idée quand on parle de blog d’entreprise. Mon réseau social c’est mon blog | Presse-Citron.

On dirait que le débat fait rage en ce moment sur la mort annoncée des blogs, dégât collatéral provoqué dit-on par la montée en puissance de la doublette Twitter-Facebook, d’autres réseaux sociaux, et et de leurs nombreux clones.Le tout agrémenté de quelques sorties récentes de blogueurs qui annoncent la fin de la partie, par lassitude, manque de temps ou d’inspiration. Twitter et Facebook, vraiment ? Comme si micro-bloguing et réseau social étaient au coeur d’un complot destiné à déboulonner les blogs de leur piédestal, les rendant rapidement obsolètes, puis (horreur) hasbeen ? Tout d’abord, (re)posons-nous un peu la question : c’est quoi un réseau social ? Quelles en sont les caractéristiques principales ?

Le premier réseau social web que j’ai utilisé était Linkedin. Car après tout, avec mon blog, je peux : En résumé, faire avec mon blog, et en lisant ceux des autres dans mon agrégateur, à peu près tout ce que je peux faire avec un Facebook ou un Linkedin, non ? Développer votre identité numérique, gérer votre réseau social. Tous les tutos Haut et fort - www.blogtuto.org. Dynamisez vos notes hautETfort : Upset Diary. Je l'ai vu dans d'autres blogs, je l'ai voulu dans le mien. Au bas de chaque note de blog, le widget LinkWithin propose les liens vers des notes similaires, selon le contenu, le titre ou les tags. LinkWithin affiche une image en vignette et le titre de chaque note en relation avec la note en cours. Le titre s'affiche seul quand la note en lien ne contient aucune image. Il suffit de cliquer sur une vignette ou un titre pour lire la note proposée.

Ainsi, LinkWithin recycle vos archives et met vos notes en avant. Obtenir le code html partiel pour intégrer le widget LinkWithin Cliquez ici pour afficher le site LinkWithin - Related Posts with ThumbnailsRemplissez le formulaire. <script> var linkwithin_site_id = 91386; </script> <script src=" <a href=" src=" alt="Related Posts with Thumbnails" style="border: 0" /></a> Ne copiez pas ce code en l'état, car il est incomplet! "Modèle de la page archives" du blog de Gee Mee : Gee Mee. Personnaliser "Tags populaires" pour accéder à tous les tags dan. Cet élément de colonne par défaut propose les 10 tags les plus populaires dans votre blog. Pour accéder à tous les autres, il faut se rendre dans la page "Toutes les archives".

Voyons comment favoriser un accès direct à l'ensemble des tags. Il nous faudra d'abord avoir des "ID" clairs dans le modèle "Toutes les pages", puis établir des liens hypertextes. Personnalisons le modèle de page "Toutes les archives" Il nous faut être précis, car plusieurs modèles de page comportent le mot "archives". C'est bien la seconde qui nous intéresse.

Pour un accès direct à l'une ou l'autre de ces sections, il faut poser une "ancre" dans le titre. {categories assign="category"}{if $category.first} <h2 id="categories">{t}Archives by categories{/t}</h2><ul class="category-list">{/if} <li><a href="{$category.url|urlchar|lower}/">{$category.name}</a></li> {if $category.last}</ul>{/if}{/categories} Je déconseille l'utilisation de lettres accentuées dans le code, aussi ai-je préféré "categories" à "catégories".

Dynamisez vos notes avec vos archives et LinkWithin : Gee Mee. Kielut l'a vu dans d'autres blogs, elle l'a voulu dans le sien. Au bas de chaque note de blog, le widget LinkWithin affiche les liens vers des notes "similaires", selon le contenu, le titre ou les tags. La note explicative d'origine a été publiée sur Upsetdiary, et nous l'avons fait évoluer ensemble pour cette version avec vidéo. LinkWithin affiche une image en vignette et le titre de chaque note en relation avec la note en cours. Le titre s'affiche seul quand la note en lien ne contient aucune image.

Il suffit de cliquer sur une vignette ou un titre pour lire la note proposée. Préparez le code à intégrer dans vos pages Gee Mee recommande de copier les lignes ci-dessous, et de les coller dans un éditeur en mode texte pour préparer le code que vous intégrerez. <! Obtenir le code html partiel pour intégrer le widget LinkWithin Cliquez ici pour afficher le site LinkWithin - Related Posts with Thumbnails Remplissez le formulaire. Finalisez le code à intégrer <! Pourquoi utiliser la catégorie "Archives" ? : Gee Mee. Suite à sa mésaventure relatée dans un commentaire sur le blog GeeMee, Octobre nous fait découvrir une fonctionnalité HautetFort permettant d'afficher sur une page unique vos archives de blog classées par ordre chronologique, par thème ou par mots-clés.

En ajoutant chaque élément de colonne correspondant dans "Contenu des colonnes" de l'onglet PRÉSENTATION, vous pouvez proposer vos notes par Catégories, par Tags populaires ou par Archives. Dans ce dernier élément, on trouve en fin de liste un lien vers "Toutes les archives". Voici comment présenter vos archives classées dans une page et 1 seule, sans encombrer une colonne de blog. Ajouter la catégorie "Archives" Cliquez sur l'onglet NOTES de l'éditeur hautETfort. Cliquez sur Catégories Ajoutez une catégorie. Classer une note déjà publiée dans la catégorie "Archives" Cliquez sur Toutes les notes Cliquez sur la plus ancienne de vos notes parmi les Pages : 1 2 3 ...

Vous n'utilisez pas encore l'élément de colonne "Catégories" dans votre blog ? Facebook ? Moi, J'AIME. Facebook Like Button Windows Live Writer Plugin - Guy Burstein's.