Pour fêter 2010 et l’adoption nouvelle de wordpress par deux copains, je range mes marques pages et vous offre ici un panaché de lectures à ficher…ou à laisser en 2009! à compléter en tous cas. Bonne lecture et bonne année, en attendant de vous lire à mon tour les amis -?-

Référencement

Un poster à télécharger chez une agence déjà très bien placée et qui n’est pas vraiment fréquentable par ailleurs: Pour que Google vous aime et soit encore + votre ami en 2010… Le blog de quelqu’un qui pense que Google is Big G. et dont la devise m’intrigue « In spam we trust« …

WordPress

Comment bannir une IP de son blog – Les nouveautés de WP 2.9 - Maintenance de Blog sur le site d’un autre humain qui vient de céder aux sirènes des pubs…Créer son thème WordPress en 2009, peut-être encore un peu valable -

HTML, JS & CSS

Une définition de la bidouillabilité sur le blog d’un normand de bon conseil – 88 liens-outils sur webinventif – un Laurent J qui explique les standards – un guide pour les débutants en css – LE GUIDE – des docs qu’on devrait déjà connaître par cœur:  http://jquery.com/ – http://mootools.net/ -

Restes du Monde du Web

Un blog qui veut Organiser le futur, et pire encore, qui a des projets pour tous les humains…Thierry Crouzet, un mec qui a flairé le bon filon (« expert en rien« )…
L‘infidélité comme hobby postmoderne sur un blog qui pose des questions, installé quand même chez wordpress.com…On le sait depuis octobre 2009: l’égalité Homme-Femme entraînerait une augmentation du PIB de 15 à 45%… Le smic s’est rapproché du seuil de pauvreté sur un autre blog politiqué… Pour une fin plus optimiste, des maths massivement collaboratives et des sorties gratuites en île de France pour les pauvres que nous sommes! + un blog sur les entrepreneurs qui grandit mieux que gentiment, pour sortir de notre pauvreté en suant massivement à notre compte? ou pas: le point de vue des petits cons sur la vie privée en voie d’extinction…

Mais il est temps de laisser certaines choses derrière nous pour mieux entamer la nouvelle année…

Que 2010 vous couvre de richesse, de réussite et de gloire tout en vous maintenant en bonne santé, pour ceux qui veulent je laisse des fioles d’amour à disposition dans un coin.

http://hold.unttld.com/ a développé un thème qui permet à l’utilisateur de Drag n’Drop-per  sur tous les écrans, et qui le propose en téléchargement. C’est rigolo mais ça marche moins avec la présentation ‘Backgrounded’, cf lien three de leur démo.
à creuser…

http://apdevblog.com/indexhibit/ un thème en flash pour indexhibit, et le développeur met ses sources en ligne sur son blog en vert sur fond noir, pour dire qu’il code. Dur. …si un jour j’trouve un cerveau.

Plus accessibles pour apprivoiser les dossiers de l’outil, on trouve sur http://www.ednacional.com/indexhibit/ un thème libre dont je suis partie pour les nôtres tandis que http://blog.raphaelbastide.com/ propose de mettre le menu à l’horizontal sur 7 colonnes, une bonne feinte pour ne pas trop ressembler à tout ce qui se fait ailleurs.

On peut aussi facilement basculer la présentation complète à l’horizontal comme avec ce thème sur http://jongarcia.info/

Évidemment si dans vos recherches vous en trouvez d’autres, pouvez m’le dire:

Thème et templates

Créer SON thème de blog, c’est le premier truc qu’on puisse faire pour apprendre quand on ne sait pas vraiment coder.

Tutos pour débuter dans la création de thèmes wordpress:
http://blogityourself.net/comment-modifier-theme-wordpress/

http://www.fran6art.com/wordpress/creez-votre-theme-wordpress-de-a-a-z/

Comme expliqué dans ces articles, le thème désigne l’ensemble des fichiers requis pour l’affichage joli du contenu de la base (= styles.css, templates.php et images).

Les Templates sont les .php requis par le visiteur en fonction de la forme de sa requête: on ne les utilise pas tous en même temps:

On commencera donc avec le seul qui soit vraiment indispensable:

Index.php qui appelle (via <?php get) deux autres fichiers qu’on sépare du reste de la page car ils seront appelés par tous les templates ( sauf si get header1 // header2 // …etc…):

• header.php –> DOCTYPE, HEAD, META, <body> + svt un peu de menus.

• footer.php –> credits, google analytics, </body>

Entre ces deux appels, tout se passe dans le Loop WordPress; ça porte bien son nom, ça se repère aux conditions:

If – while – endwhile – endif

<!-- ici l'affichage des trouvés par la boucle "tant qu'il y a des posts..." -->
<h2><a href="" title=""></a></h2> <!-- par exemple -->

C’est la boucle qui construit la page demandée. On y « invoque » donc les différents attributs des posts qu’on veut voir pour chaque article (ici ligne 6).
Pour cela on se sert d’expressions prédéfinies, elles indiquent la présence de variables qui seront remplacées au moment de l’affichage par leur valeur spécifique au contenu consulté, par exemple:

the_title();— — le Titre de l’article
the_content(); — — le Contenu de l’article
the_excerpt();— — le Résumé de l’article
the_ID(); — — le numéro unique de l’article
the_time(); — — la date de publication de l’article
the_author();— — le nom de l’auteur
the_category(); — — catégorie(s) de l’article.

Liste non exhaustive, ces formules peuvent contenir des conditions (pour ne lister que certaines catégories, pour ordonner les résultats de la boucle…)
voir: « Marqueurs de Modèles » selon le Codex. et c’est avec ça on construit son thème jusqu’à avoir tous les fichiers .php qu’on veut (correspondant chacun à une demande différente du visiteur).

Styles imposés

WordPress utilise certaines classes et certains objets html dans les articles du site. Il faut penser à styler ces éléments, ainsi on doit les intégrer aux css des thèmes « faits maison »:

/* les images  */
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}

/* les images liées */
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

/* la séparation  */
hr {	display: none;	}

/* les abbréviations */
acronym, abbr, span.caps {	cursor: help;	}
acronym, abbr {	border-bottom: 1px dashed #999;	}

/* les citations  */
blockquote {
margin: 15px 30px 0 10px;	padding-left: 20px;	border-left: 5px solid #ddd;
}
cite {	margin: 5px 0 0;	display: block;	}

J’en oublie sans doute beaucoup en chemin, mais dans les grandes lignes un thème wordpress ça se passe comme ça, non?

Ressources Utiles

En plus des liens cités plus haut, pour commencer je lis un peu

wordPress tuto porte bien son nom, c’est écrit en français par un type qui partage son faire.
Geekeries.fr – qui agrège plein de rédacteurs pédagogues au sein de sa Galaxie WordPress et qui présente régulièrement beaucoup d’extensions gadgets.

Notion de parent et d’enfants.

La nouvelle version de bp se sert en même temps  des deux dossiers que l’on a placé dans wp-content/themes/. Y’en a qui parle de framework, pour le moment je vais m’ abstenir .

thèmes buddyPress dans l'admin

• bp-sn-parent
  Contient les templates php de bp, c à d les modèles de grilles (maquette et fonctions) des pages comme archives, author, blogs, forums…etc…Vu comme un thème complet par l’interface d’administration, il n’a pas besoin d’être activé pour fonctionner. On ne le modifie jamais.
• bp-default
  C’est ce dossier qui contient les images et les styles du thème utilisé: c’est lui qu’on active dans l’admin et il se sert des fichiers du premeir dossier dont il est un peu l’essorage. C’est lui dont on va modifier le contenu (après une ‘tite sauvegarde de l’original), on commence par l’entête du fichier de style principal : /style.css

Ce fichier débute avec ces quelques déclarations:

/*
Theme Name: BuddyPress Default
Theme URI: http://buddypress.org/extend/themes/
Description: The default theme for BuddyPress.
Version: 1.1
Author: BuddyPress.org
Author URI: http://buddypress.org
Tags: buddypress, three-columns, white, orange, flexible-width
Template: bp-sn-parent
*/

Quand on personnalise son site on peut modifier toutes les lignes (elles s’affichent dans les panneaux d’admin) sauf la dernière « Template » où on voit bien qu’il appelle le dossier parent dans lequel on ne doit rien toucher.

Les styles css

La suite du fichier styles.css consiste justement à importer les règles de mises en pages depuis le dossier parent, selon cet ordre:

/* *** TYPO *** */
/* Font styles */
@import url( ../bp-sn-parent/_inc/css/fonts/12px.css );

/* *** MAQUETTE *** */
/* Layout styles for home page, internal pages and blog/directory pages */

@import url( ../bp-sn-parent/_inc/css/layout/home-page/3c-right.css );
@import url( ../bp-sn-parent/_inc/css/layout/internal-pages/3c-left.css );
@import url( ../bp-sn-parent/_inc/css/layout/blog-dir-pages/2c-right.css );

/* *** STUFF à CHANGER *** */
/* Default theme admin bar styles */
@import url( _inc/css/adminbar.css );

/* Default theme styles */
@import url( _inc/css/screen.css ); /* LA GROSSE FEUILLE DE STYLE*/

/* Uncomment the following line and add your custom styles to '_inc/css/custom.css' */
/* @import url( _inc/css/custom.css ); */

NOTES:

l.3 on choisit la taille des polices. Dans le dossier fonts indiqué comme source on trouve 5 modèles différents basés sur 5 taille de polices: 12, 14, 18, 20 et 22px.

l.8,9 & 10  on choisit le nb de colonnes et le sens de lecture de -dans l’ordre- la home, les pages internes et le blog principal
Les modèles proposés par défaut dans bp-sn-parent pour ces pages sont aussi divers:

• pour home-page: 7 variations, pour internal-pages ce sont 5 exemples et pour blog-dir-pages 3 modèles qui sont proposés, mais je ne comprend pas bien la façon dont les deux derniers s’imbriquent (a priori internal-pages sert surtout au float des blocs, blog-dir-pages définit la maquette de toutes les sous pages à deux colonnes).
• mais où sont les styles des pages de ‘mon compte’ et autres? Ses colonnes grises restent toujours figées à gauche en tout cas…

l.14 & 15 on importe les styles contenus dans le dossier enfant, c’est là qu’on peut intervenir. Pour ces deux derniers fichiers importés on peut modifier ce qu’on veut et même tout enlever pour repartir de Zér0 si ça nous chante, mais puisque les layouts apportent un minimum de contraintes en déclarant certains éléments il est conseillé de re-partir des versions ultra-light de ces styles sauvegardées dans le dossier bp-sn-parent\_inc\css

les modèles

Pas de problèmes pour modifier la structure ou le contenu de certaines pages comme « groupes », « forum » …Etc il suffit de dupliquer le fichier concerné de votre dossier parent à votre dossier « à vous », sans le renommer. Il remplacera automatiquement celui du dossier parent, chargé uniquement en l’absence de. Et comme cela on ne modifie rien dans le dossier bp-sn-parent.
Pour construire son thème à soi on aura besoin, entre autres:
la liste des Template tags - les loops où les placer

Mais avant de vouloir tout modifier il vaut mieux savoir ce qu’on veut faire, ce qui n’est pas encore mon cas. Et ça m’arrange bien, dans un sens, j’ai le temps de continuer mes expériences et d’apprendre un peu mieux à me servir de tout cela avant de proposer une home digne de son .com comme commercial. Pour ça il existe aussi bien sûr des tas de thèmes plus ou moins paramétrables à customizer.

Quoi?

Super extension parce que buddyPress désigne en fait une mini suite logicielle pour wordpress mu. Son job c’est, en gros, de créer un système de relations entre les évènements des blogs et entre les auteurs en rajoutant des tables courtes mais nombreuses à votre base de données.
Elle intègre aussi par défaut des outils plus « gourmands » comme une messagerie, des forums…etc…  De cette façon les membres peuvent créer des tas de relations différentes sur votre site, par exemple en devenant « amis », en s’adressant des messages privés ou en publiant sur le « fil » les uns des autres (FB 4 ever… buddypress & iphone, mobiles??) et en se syndiquant en groupes dont ils gèrent la confidentialité (publique, privée ou cachée) (les groupes contiennent les forums), …etc… parmi les fonctionnalités du plugin magique, et en vrac.
C’est l’esprit wp et on peut en rajouter à celles déjà nombreuses du pack basique.

Les références 1 – 2 – 3 – les bons gens qu’en parlent 1-2-3-4 – ceux qui l’utilisent – tout ça…
Comme je ne m’étais pas aventuré dans de grandes modifications avant l’installation de la 1.1, et que vous dites partout qu’il y a de gros changements, je vais pas trop chercher comment ça fonctionnait avant.

Comment?

• Récupérer les forums…

…ça c’est fait.
Grâce au comment faire en français. Avant mon bbpress était installé dans dans un dossier www/forums/ et dans une base rien qu’à lui, c’était mon bon moyen du moment… Pour mettre à jour buddypress il faut que les forums partage la bdd du mu… Une fois que c’est fait j’ai supprimé le dossier forums/ de mon site sinon bp balançait  sur cette coquille, et j’avais l’impression d’être devenu roi du monde en 10 minutes.

…mais les anciens forums buggent gravement de l’affichage…leur texte a été passé à la moulinette, et les ‘&’ ont été remplacées par des ‘/’ ce qui n’est pas grandement pratique…et je sais pas ce que c’est UTF-8 c’est mal barré… htmlentities il a dit…

je continue les recherches là-dessus ici.

• Modifier le thème, et par exemple…
  (Olivier Buisson propose plusieurs articles de mise en jambes en français pour jusqu’avant) mais visiblement c’est quelque chose qui a beaucoup changé depuis la dernière version.  Le HowTo sur la doc en anglais.

…Choisir et changer les avatars des blogs? … un début de solution ici…
… Réunir des articles & des activités choisis dans le site  au sein de catégories sur le blog principal?

Mais pour ça le mieux c’est d’aller mettre un peu le nez dedans alors j’arrête là les recherches théoriques et j’ouvre notepad++ de suite pour mettre des couleurs sur la home
je continue les recherches là-dessus ici.

]]> http://lorgie.com/bqqmf/01-10-2009/buddypress-en-questions/feed/ 0 http://lorgie.com/bqqmf/30-09-2009/optimisation-web/ http://lorgie.com/bqqmf/30-09-2009/optimisation-web/#comments Wed, 30 Sep 2009 01:32:54 +0000 L. http://lorgie.com/bqqmf/?p=257 Optimiser son site, c’est faire baisser le temps de chargement des pages entre chaque clic depuis celui qui a amené le visiteur chez soi. Le premier post d’une série de mes notes sur ce nouveau mo(t)nde. Les outils comme wordpress le font déjà beaucoup pour nous, mais quand on les utilise un peu trop de travers, ça commence à ramer. Sur le site du Nuage par exemple trop d’images tue les images, semblerait…

Comment?

La réponse en geek, c’est « en limitant le nombre de requêtes (questions à la base) et de traitements sur le serveur  et le nombre de fichiers externes à la page ( images, scripts, …) à charger par le navigateur ». Concrètement, heu…

Ici, je suis à 78 queries en 1,585 seconds sur la home. C’est trop de temps pour un peu trop de questions, je crois (je monte à presque 90 si je met les commentaires récents dans la sidebar, dans le même temps quasi) (et les référents conseillent un temps maxi de 0.8 sec et considèrent que jusqu’à 150 requêtes ça peut exister(mais moins de 20 ils préfèrent, quand même), tant qu’on arrive à les afficher en moins d’1’2… enfin, j’croyais…

Globalement les bonnes idées à appliquer c’est: d’installer un plugin de cache comme celui là, de  réduire le nombre de « révisions » des articles sauvées par les coulisses dans la base, de modifier un peu son .htaccess pour empêcher les visiteurs assidus de recharger sans cesse les mêmes illustrations et dans l’idéal d’utiliser des trucs comme Gzip, les sprites css et le moins possible de scripts tordus / décoratifs…ça en fait des trucs à creuser tout ça…
En attendant,aujourd’hui  je lis…

Les articles avec lesquels je commence:
- Optimisation WordPress sur Malaiac.net, sur parenthese.be, et un peu partout ailleurs vraiment ils insistent pour le plug-in qui génère vos pages en html et les stocke en cache sur le serveur, pour le .htaccess et les petites images aussi. Pour les images, d’ailleurs, beaucoup parlent de smush.it qui se décline en plugin wp et permettrait peut-être d’obliger tous les utilisateurs à poster petit…ça sert à couper les bouts de jpg invisibles, les meta des jpg un peu.

-Sur websourcing.fr un partisan du code décoratif sur les serveurs spécialisés, mais c’est surtout pour les iliens a priori (ou les sites aux visiteurs internationaux comme la Tour Eiffel, bref ça concerne plutôt les japonais que moi).

-Sur Techcrunch un billet de l’an dernier fixe à 500k la limite décente du poids de la home. Homo Sapiens Internetus traduit une bible et passe la barre à 100k, voire à 50k. Ici je suis à 306k, sur la home lOrgie à 230.3k, le Nuage à 618.7k sur la home, plus d’1Mo sur la galerie!

- WebDevOnLinux.fr me fait installer Yslow, un plugin de plugin parcequ’il ajoute un onglet à Firebug…encore des nouveaux meilleurs amis. C’est un outil de Yahoo qui note votre page selon des règles de bonnes pratiques. J’écrirai plus sur ces notes et ces règles, plus tard, aussi, peut-être, pour l’instant je compare mes camemberts à ceux des autres…
Il m’encourage même à y obtenir un A alors que lui-même n’obtient que E (ça rassure, là on est à D) et surtout il fixe la limite de temps chargement maxi à 7 sec.
C’est énorme, comparé à Larry Page qui voudrait qu’en moins de 2 Google ait tout compris de ce qu’il lit…Je vais ressasser un peu tout ça et je vous tient au courant de comment je ferai pour améliorer nos sites.

Des sites pour tester son site

http://www.websiteoptimization.com/

http://tools.pingdom.com/

Ma note Yslow ici c’est D – 64 /100, mais avec la home du Nuage par exemple c’est seulement 2 points d’écart alors que la page est 3X plus lourde. Pour tous ces tests globalement les thèmes ont trop de fichiers .css distincts mais pas de problèmes (ça va s’améliorer tout seul dans BuddyPress, semblerait) et seul le côté « serveur » de la question est tout rouge. Je vais m’en contenter pour l’instant et j’installe pas encore de gros plug-ins comme les gen de cache ou WP-dbmanager, mais je note qu’il faudra.

html-ipsum.com: fournit du faux texte structuré.
www.typetester.org ou suprb.com: des générateurs de styles css pour le texte.
unicode for you: un joli tableau rappel des caractères unicode.

Couleurs

colourlovers : Un site pour stocker des palettes et générer des motifs assortis.
kuler : le service web d’Adobe pour partager des nuanciers.
colorsuckr ou degraevecom: pour extraire les couleurs d’une image en ligne.
colr.org le fait aussi, et propose de décliner un scheme à partir d’une ou deux couleurs choisies.

Images

http://photofunia.com/

Personnalisation d’avatars / illustration de site. Permet d’intégrer un portrait à des tas d’images graphiques bien réalisées ( de l’affiche WANTED country à l’énorme triptyque trichrome contemporain, propose aussi des rendus animés).

Et toujours, les CCommons de Flickr et de Google.

• http://vivre-en-autarcie.com/ réseau de chevelus libres à demi fous.
• http://ablogm.org/ un autre plus concentré sur la libération de ses contenus.
• http://reseau-artistes.com/ réseau de créateurs et d’organisateurs d’événements.
• http://social.hecube.net/ réseau  social des métiers du Web …
• http://isexl.com/ réseau pour une école d’éco belge, avec de bons tutos de prises en mains, aussi.
• http://owni.fr/ réseau de journalisme de faits réels mais pixellisés.

n’hésitez pas à en proposer d’autres ou à commenter ceux-là…

Je cherche donc une remplacante à cette extension assez pratique puisqu’il me suffisait d’utiliser les balises

<code class='prettyprint'> mais ici c’est pas pretty </code>

Je me contenterai aussi de la recette pour rendre les extensions compatible avec le combo Mu+ buddyPress. Une série d’articles à venir sur ces énormes outils, en attendant et pour revenir au problème de la citation geek, je sollicite votre contribution.

Pour l’instant j’ai aussi essayé sans succès:

-  Code Colorer pour lequel il faut utiliser les balises

<code lang="lang">code</code>

où lang devrait pouvoir accepter tout un tas de valeurs strictement définies, mais là non!

- WordPress Code Snippet qui utilise les champs personnalisés « code_editor » ( où l’on doit mettre son code) et « code_type » (où l’on renseigne le langage utilisé).

%code_editor% – mais voilà en plus d’être plus fastidieux ça ne fonctionne pas non plus…

En désespoir de cause je tend ma sébille sur quelques forums et désinstalle tout pour le moment…