Billets récents
18 avril 2012 dans CMS, Création de site web, Marketing Web, Meilleurs blogs, PHP, MYSQL, Référencement, SEO, Réseaux sociaux, Technologie, Tutoriaux, Wordpress, XHTML CSS par Bruno Flaven
Un site pour qu’il soit vu doit être impérativement partagé sur Facebook, on doit donc se plier à certaines conditions pour passer au mieux sous les fourches caudines de Facebook car la marge de manœuvre avec Facebook est étroite. Il serait ballot de se priver des 750 millions d’utilisateurs actifs de Facebook si vous souhaitez que les internautes visitant votre site puissent le partager comme bon leur semble et que l’affichage sur leur “wall” se fasse dans les meilleures conditions de présentation pour votre site, en gros sous votre meilleur profil en quelque sorte.
Les bonnes pratiques sur le partage Facebook s’appuie sur le protocole Open Graph. ce protocole permet de transformer toute page du web en objet riche intégré dans le graph social. Au sein de l’eco-système Facebook, il permet à n’importe quelle page web d’avoir les mêmes fonctionnalités qu’une Page Officielle sur Facebook.com, sympa ? Non.
Voilà à quoi doit ressembler vos metas
Dans le cas présent, le vice a même était poussé jusqu’à ajouter un player video afin que la vidéo se joue sur le “wall” lors du partage Facebook. Le système est intégralement géré sous WordPress à s’appuyant au maximum sur les capacités du CMS à disséminer les bonnes informations dans les la bonnes balises.
Extrait du “header” du site www.treetslook.com
<!-- FACEBOOK SHARE METAS -->
<meta property="og:site_name" content="http://www.treetslook.com"/>
<meta property="og:title" content="Street style 059 Toni" />
<meta property="og:url" content="http://www.treetslook.com/style/looks/street-style-059-toni/"/>
<meta property="og:description" content="Watch this look" />
<meta property="og:image" content="http://www.treetslook.com/wp-content/uploads/2011/07/TL_Toni1.png" />
<meta property="og:video" content="http://www.treetslook.com/wp-content/plugins/he3treetslook/swf/components/facebook-player.swf?v=3460" />
<meta property="og:video:width" content="398" />
<meta property="og:video:height" content="243" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<!-- FACEBOOK SHARE METAS (END)-->
Connaitre son USER ID sur Facebook. L’exemple de 3wdoc.com
{
"id": "166802396694841",
"name": "3wdoc",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-ash2/174597_166802396694841_6643612_s.jpg",
"link": "http://www.facebook.com/3wdoc",
"likes": 358,
"category": "Website",
"is_published": true,
"website": "http://3wdoc.com/fr/\nhttp://3wdoc.com/en/\nhttp://3wdoc.com/es/",
"username": "3wdoc",
"company_overview": "3WDOC is a webapplication specificaly designed by HECUBE to create and deliver interactive rich media content optimized in HTML5 to run across the web.",
"mission": "enable easy digital storytelling",
"products": "3WDOC Studio",
"about": "Easy web way to create digital & interactive stories",
"location": {
"street": "23, villa Riberolle",
"city": "Paris",
"country": "France",
"zip": "75020",
"latitude": 48.85823,
"longitude": 2.39654
},
"phone": "33 (0)1 43 71 80 03",
"checkins": 4,
"talking_about_count": 18
}Source: http://graph.facebook.com/3wdoc
En savoir plus
Facebook, Flash, html, HTML5, meta, MySQL, Open Graph protocol, PHP, plugin, theme, Widget, Wordpress
6 avril 2012 dans CMS, Création de site web, Linux, Apache, Marketing Web, Meilleurs blogs, PHP, MYSQL, Référencement, SEO, Technologie, Tutoriaux, Webdesign, Widget, Gadget, Wordpress, XHTML CSS par Bruno Flaven
On va donc écrire un feed sur mesure car nous avons souvent des besoins spécifiques à utiliser l’information d’un blog ou d’un site, fait sous WordPress, tout en ayant le minimum de langage à disposition pour retravailler ce flux.
Par défaut WordPress génère plusieurs formats de flux (RSS, RSS2, et Atom) et leur structure de permalien est définie dans l’objet $wp_rewrite mais on se trouve souvent dans l’obligation de générer son propre feed que l’on pourra à loisir rendre personnalisable.
Notre plugin myfeed
Notre objectif est d’afficher les 5 derniers article d’une catégorie particulière, en l’occurrence la catégorie ayant un ID 24 à cette adresse : http://mon-site-sous-wp/feed/myfeed/
Voilà le résultat de notre plugin, c’est assez simple et pour se faire on a copié le code disponible dans le fichier de base livrée avec WP feed-rss2.php.
Une des choses les plus importantes est que lorsque vous avez activé le plugin, il ne faut pas oublier de bien générer à nouveau les permaliens via l’outil administration de WordPress pour faire exister le feed à l’adresse suivante http://mon-site-sous-wp/feed/myfeed/
La source complète du plugin he3myfeed
<?php
/*
Plugin Name: he3myfeed
Plugin URI: http://hecube.net
Description: Create a sepcific feed for your website <code>url_of_your_site/feed/myfeed</code>
Version: 1.0
Author: Bruno Flaven
Author URI: http://hecube.net
*/
// Add permalink structure and flush on plugin activation
register_activation_hook( __FILE__, 'he3corporatefeed_activate' );
function he3corporatefeed_activate() {
he3corporatefeed_add_feed();
flush_rewrite_rules();
}
// Flush on plugin deactivation
register_deactivation_hook( __FILE__, 'he3corporatefeed_deactivate' );
function he3corporatefeed_deactivate() {
flush_rewrite_rules();
}
// Register a feed named myfeed
add_filter( 'init', 'he3corporatefeed_add_feed' );
function he3corporatefeed_add_feed() {
add_feed( 'myfeed', 'he3corporatefeed_do_feed' );
}
// Echo the feed
function he3corporatefeed_do_feed( $in ) {
// Make custom query to get the 5 last posts from the category 24
$args = array(
'cat' => 24,
'posts_per_page' => 5
'order' => 'DESC'
);
query_posts( $args );
header('Content-Type: ' . feed_content_type('rss-http') . '; charset=' . get_option('blog_charset'), true);
echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>';
?>
<?php
echo "\n";
echo '<!-- My Feed -->';
echo "\n";
?>
<rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
<?php do_action('rss2_ns'); ?>
>
<channel>
<title><?php bloginfo_rss('name'); wp_title_rss(); ?></title>
<atom:link href="<?php self_link(); ?>" rel="self" type="application/rss+xml" />
<link><?php bloginfo_rss('url') ?></link>
<description><?php bloginfo_rss("description") ?></description>
<lastBuildDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_lastpostmodified('GMT'), false); ?></lastBuildDate>
<language><?php echo get_option('rss_language'); ?></language>
<sy:updatePeriod><?php echo apply_filters( 'rss_update_period', 'hourly' ); ?></sy:updatePeriod>
<sy:updateFrequency><?php echo apply_filters( 'rss_update_frequency', '1' ); ?></sy:updateFrequency>
<?php do_action('rss2_head'); ?>
<?php while( have_posts()) : the_post(); ?>
<item>
<title><?php the_title_rss() ?></title>
<link><?php the_permalink_rss() ?></link>
<comments><?php comments_link_feed(); ?></comments>
<pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
<dc:creator><?php the_author() ?></dc:creator>
<?php the_category_rss('rss2') ?>
<guid isPermaLink="false"><?php the_guid(); ?></guid>
<?php if (get_option('rss_use_excerpt')) : ?>
<description><![CDATA[<?php the_excerpt_rss() ?>]]></description>
<?php else : ?>
<description><![CDATA[<?php the_excerpt_rss() ?>]]></description>
<?php if ( strlen( $post->post_content ) > 0 ) : ?>
<content:encoded><![CDATA[<?php the_content_feed('rss2') ?>]]></content:encoded>
<?php else : ?>
<content:encoded><![CDATA[<?php the_excerpt_rss() ?>]]></content:encoded>
<?php endif; ?>
<?php endif; ?>
<wfw:commentRss><?php echo esc_url( get_post_comments_feed_link(null, 'rss2') ); ?></wfw:commentRss>
<slash:comments><?php echo get_comments_number(); ?></slash:comments>
<?php rss_enclosure(); ?>
<?php do_action('rss2_item'); ?>
</item>
<?php endwhile; ?>
</channel>
</rss>
<?php
}Notre source d’inspiration
Pour que vous puissiez voir le plagiat ehonté du code, voici La source du fichier feed-rss2.php
<?php
/**
* RSS2 Feed Template for displaying RSS2 Posts feed.
*
* @package WordPress
*/
header('Content-Type: ' . feed_content_type('rss-http') . '; charset=' . get_option('blog_charset'), true);
$more = 1;
echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>'; ?>
<rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
<?php do_action('rss2_ns'); ?>
>
<channel>
<title><?php bloginfo_rss('name'); wp_title_rss(); ?></title>
<atom:link href="<?php self_link(); ?>" rel="self" type="application/rss+xml" />
<link><?php bloginfo_rss('url') ?></link>
<description><?php bloginfo_rss("description") ?></description>
<lastBuildDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_lastpostmodified('GMT'), false); ?></lastBuildDate>
<language><?php echo get_option('rss_language'); ?></language>
<sy:updatePeriod><?php echo apply_filters( 'rss_update_period', 'hourly' ); ?></sy:updatePeriod>
<sy:updateFrequency><?php echo apply_filters( 'rss_update_frequency', '1' ); ?></sy:updateFrequency>
<?php do_action('rss2_head'); ?>
<?php while( have_posts()) : the_post(); ?>
<item>
<title><?php the_title_rss() ?></title>
<link><?php the_permalink_rss() ?></link>
<comments><?php comments_link_feed(); ?></comments>
<pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
<dc:creator><?php the_author() ?></dc:creator>
<?php the_category_rss('rss2') ?>
<guid isPermaLink="false"><?php the_guid(); ?></guid>
<?php if (get_option('rss_use_excerpt')) : ?>
<description><![CDATA[<?php the_excerpt_rss() ?>]]></description>
<?php else : ?>
<description><![CDATA[<?php the_excerpt_rss() ?>]]></description>
<?php if ( strlen( $post->post_content ) > 0 ) : ?>
<content:encoded><![CDATA[<?php the_content_feed('rss2') ?>]]></content:encoded>
<?php else : ?>
<content:encoded><![CDATA[<?php the_excerpt_rss() ?>]]></content:encoded>
<?php endif; ?>
<?php endif; ?>
<wfw:commentRss><?php echo esc_url( get_post_comments_feed_link(null, 'rss2') ); ?></wfw:commentRss>
<slash:comments><?php echo get_comments_number(); ?></slash:comments>
<?php rss_enclosure(); ?>
<?php do_action('rss2_item'); ?>
</item>
<?php endwhile; ?>
</channel>
</rss>En savoir plus
feed RSS, personnalisation, PHP, plugin, RSS, Wordpress, xml
4 avril 2012 dans CMS, Création de site web, Flash, Actionscript, Flex, Flex, Framework, Hébergement, Image, Graphisme, Photoshop, Tutoriaux, Vidéo, Webdesign par Bruno Flaven
Comme vous vous en doutez peut-être, nous travaillons chez Hecube sur un projet HTML5 nommé 3WDOC ce qui ne nous empêche pas de nous intéresser à d’autres projets, notamment les logiciels en ligne y compris ceux fait en Flash. Pour cette fois-ci, nous avons spécifiquement ciblé 3 logiciels qui sont de véritables logiciels de montage qui permettent de générer des vidéos en ligne.
On a arrêté notre choix sur 3 logiciels : 1. Movie Masher, 2. Kaltura, 3. JayCut.
1. Movie Masher
Le premier logiciel que nous avons sélectionné est Movie Masher. Ce logiciel est un logiciel open source. Ci-dessous, vous trouverez la définition que les créateurs de Movie Masher donnent de leur logiciel.
What is Movie Masher?
A set of Adobe Flash™ applets that provide front-end tools for common video editing tasks:
Trim, composite and timeshift video
Mix and fade multiple audio tracks
Add effects, transitions and titling
An XML API is used to customize both the appearance and behavior of the tools:
Colorize and reposition panels
Reskin and bind interface controls
Reconfigure bundled effects
Integrate with CGI scripts
Les différents exemples fournis et les explications données par l’ensemble de l’archive fournie par Movie Masher sont le suivantes. A noter, vous disposez des sources .fla de l’ensemble du projet.
moviemasher:
example:
actionscript: loads the Movie Masher applet through another SWF
browse: searches through media XML files dynamically
flickr: search and display content from Flickr
javascript: loads and controls the Movie Masher applet through JavaScript
media: demo assets and JavaScript shared by several examples
save: writes mash data to file system
server: uses MovieMasher classes to render mashes
share: demo of mash playback within Facebook wall
static: simplest example requires no CGI
upload: transfers file to server
youtube: search and display video from YouTube
INSTALL.txt: this file
moviemasher: Applet SWF files
private: only used for server example
MovieMasher: classes used by PHP scripts in some examples
MovieMasher.xml: XML configuration for PHP scripts and classes
MovieMasherLog: directory for logs
source: FLAs, fonts, scripts and other source material
Source : INSTALL.txt
Les tests ont été menés sur la Version 3.1.13 de MovieMasher.
Une des grosses questions en suspend est la capacité du logiciel à effectuer le “render” des vos montages.
Vous êtes en mesure d’exporter dans n’importe quel format supporté par FFMPEG. Il faut juste changer le DecoderExtension et probablement aussi DecoderVideoCodec et DecoderAudioCodec à quelque chose de convenable pour les fichiers dans le format que vous souhaitez.
La configuration se fait via /private/MovieMasher.xml
<MovieMasher>
<!-- The MovieMasher_Client implementation to use (REST, SQS or Local) -->
<Client>REST</Client>
<!-- The MovieMasher_File implementation to use (HTTP, S3 or System) -->
<File>HTTP</File>
<!-- This machine's address, as accessed remotely from other machines -->
<Host>www.example.com</Host>
<!-- Address of the machine that stores media assets - eg. MY_BUCKET_NAME.s3.amazonaws.com for S3, otherwise same as Host -->
<HostMedia>www.example.com</HostMedia>
<!-- PATH to web root directory -->
<DirHost>/var/www/www.example.com/</DirHost>
<!-- PATH to Movie Masher private directory -->
<DirMovieMasher>/private/</DirMovieMasher>
<!-- PATH to Movie Masher temporary directory (used by encoded.php example script) -->
<DirTemporary>/tmp/moviemasher/</DirTemporary>
<!-- Relative paths, potentially appended to any option containing 'Host' by example scripts -->
<PathSite>moviemasher/example/server/</PathSite>
<PathCGI>moviemasher/example/server/media/php/</PathCGI>
<PathXML>moviemasher/example/server/media/xml/</PathXML>
<PathMedia>moviemasher/example/server/media/user/</PathMedia>
<PathSWF>moviemasher/moviemasher/</PathSWF>
<!-- LOGGING OPTIONS -->
<!-- PATH to directory where log files should be created (must be writeable) -->
<DirLog>/private/MovieMasherLog/</DirLog>
<!-- Whether or not to log interactions with Client APIs -->
<LogRequests>1</LogRequests>
<LogResponses>1</LogResponses>
<!-- If enabled, transcoding jobs will process slower but with more feedback -->
<Verbose>0</Verbose>
<!-- CLIENT REST OPTIONS -->
<!-- PATH to Private Key that corresponds to keypair used to launch EC2 Instance (must be readable) -->
<RESTKeyPrivate>/private/private_key.pem</RESTKeyPrivate>
<!-- URL to Movie Masher Server Instance, use HTTPS if port 443 is open in security group -->
<RESTEndPoint>https://ec2-123-456-789-10.compute-1.amazonaws.com</RESTEndPoint>
<!-- CLIENT SQS AND FILE S3 OPTIONS -->
<!-- Your Amazon Access Key ID -->
<AWSAccessKeyID></AWSAccessKeyID>
<!-- Your Amazon Secret Access Key -->
<AWSSecretAccessKey></AWSSecretAccessKey>
<!-- FILE S3 OPTIONS -->
<!-- The name of the Amazon S3 bucket you've already created - see HostMedia option -->
<S3Bucket>MY_BUCKET_NAME</S3Bucket>
<!-- CLIENT SQS OPTIONS -->
<!-- The URL for the Amazon Queue you've already created -->
<SQSQueueURLSend>https://queue.amazonaws.com/1234567890/identifier</SQSQueueURLSend>
<!-- CLIENT LOCAL OPTIONS -->
<!-- This machine's address, as accessed locally from this machine -->
<HostLocal></HostLocal>
<!-- PATH to directory for job files queued for processing -->
<DirJobsQueued>/tmp/moviemasher/queued/</DirJobsQueued>
<!-- ENCODING (PREPROCESSING) OPTIONS -->
<!-- Size of low resolution image frames displayed in applet -->
<EncoderDimensions>160x120</EncoderDimensions>
<!-- File extension for image frames (overriden for uploaded PNGs) -->
<EncoderExtension>jpg</EncoderExtension>
<!-- Number of image frames displayed in applet per second -->
<EncoderFPS>10</EncoderFPS>
<!-- Quality used when writing low res image frames -->
<EncoderImageQuality>75</EncoderImageQuality>
<!-- File extension for audio files -->
<EncoderAudioExtension>mp3</EncoderAudioExtension>
<!-- Bitrate of low resolution audio files -->
<EncoderAudioBitrate>128</EncoderAudioBitrate>
<!-- Frequency of low resolution audio files -->
<EncoderAudioFrequency>44100</EncoderAudioFrequency>
<!-- DECODING (RENDERING) OPTIONS -->
<!-- Quality used when writing high res image frames -->
<DecoderImageQuality>100</DecoderImageQuality>
<!-- Size of rendered mash video files and high resolution image frames -->
<DecoderDimensions>320x240</DecoderDimensions>
<!-- File extension of rendered mash video file -->
<DecoderExtension>avi</DecoderExtension>
<!-- Codec used to format rendered video file -->
<DecoderVideoCodec>mpeg4</DecoderVideoCodec>
<!-- Number of frames displayed in rendered video file per second -->
<DecoderFPS>25</DecoderFPS>
<!-- Bitrate of rendered video file -->
<DecoderVideoBitrate>4000</DecoderVideoBitrate>
<!-- Codec used when rendering audio for video file -->
<DecoderAudioCodec>mp2</DecoderAudioCodec>
<!-- Bitrate of high resolution audio files, and video file soundtracks -->
<DecoderAudioBitrate>224</DecoderAudioBitrate>
<!-- Frequency of high resolution audio files, and video file soundtracks -->
<DecoderAudioFrequency>44100</DecoderAudioFrequency>
</MovieMasher>
2. Kaltura
Kaltura est davantage connu pour son player HTML5, open-source. Cette outil a développé pour en gros manipuler le player Kaltura et tirer profit des ces fonctionnalités. Il offre une solution d’édition et de manipulation des fonctionnalités du player, d’encodage pour le web comme le mobile, de diffusion tout cela sur le Cloud Amazon ! Ce qui n’est pas rien. Nous avons découvert que ce n’est pas à proprement parlé un logiciel d’édition en ligne ou de “mashup” de films par exemple.
Il vous est possible très facilement de constituer des playlists et de tirer profit du fameux player HTML5, ajouter des sous-titres…
Globalement, il s’agit à première vue d’un outil d’administration en ligne pour mieux gérer les spécifications de leur player. On n’est pas à proprement parler face à un outil d’authoring, c’est à dire de montage en ligne.
3. Jaycut
Cela fait longtemps que l’on observe ces suédois qui ont ni plus ni moins, reproduit Final Cut en ligne. Ils préparent actuellement une nouvelle version, sans doute l’irruption de HTML5 a perturbé quelque peu leurs plans de sortie. Ils semblent se recentrer sur le mobile et notamment la platform BlackBerry®.
Que propose le site, ni plus ni moins que Your Free Video Editor - Online
JayCut is an online video editing tool!
Your Free Video Editor – Online - Engage your audience with the world’s premier online video editor seamlessly integrated on your website, or edit your own videos on JayCut’s community.
This app redirects to JayCut. No personal information is gathered.
Source : http://jaycut.com/
En savoir plus
édition, Final Cut, Flash, HTML5, jaycut, Kaltura Video Platform, montage, Movie Masher, online, plates-formes, Vidéo
20 mars 2012 dans Accessibilité, CMS, Création de site web, Framework, Image, Graphisme, Photoshop, Marketing Web, PHP, MYSQL, Webdesign, XHTML CSS par Bruno Flaven
C’est chaud sur le front du Webdesign, encore un mot-clé qui fait du buzz, on ne parle plus que Responsive Webdesign. C’est une étape supplémentaire dans l’usage de la CSS dans le Webdesign, mouvement initié avec CSS Zen Garden: The Beauty in CSS Design par Dave Shea et Molly Holzschlag (www.csszengarden.com).
Une définition par Responsive Web Design
Que signifie le Responsive Web Design, il s’agit dans la pratique d’utiliser des grilles fluides, des images au format SVG dans le but d’afficher une page web de manière optimal quelque soit l’environnement, notamment le Web, le Mobile et les Tablettes. Ce terme Responsive Web Design a été forgé par Ethan Marcotte.
De quoi parle-t-on ?
L’essentiel Responsive Web Design consiste à prendre en compte différentes résolutions contingentes que l’on peut résumer ainsi :
- Smartphone (320px)
- Tablet (768px)
- Netbook (1024px)
- Desktop (1600px)
L’ensemble de l’intégration du WebDesign se fera ensuite essentiellement ensuite en HTML5, CSS3. Certains graphistes proposent d’utiliser des graphismes au format SVG, afin de bénéficier d’un format souvent lisible directement dans les navigateurs “modernes”.
En savoir plus
13 mars 2012 dans CMS, Création de site web, Framework, PHP, MYSQL, Technologie, Tutoriaux, Wordpress par Bruno Flaven
L’idée est au lieu de coder à la petite semaine un plugin wordpress, on va utiliser des techniques de programmation orienté objet ou OOP (Object-oriented programming) afin d’avoir une meilleure portabilité et gestion du code. C’est vivement recommandé lorsque vous travaillé avec d’autres développeurs notamment.
Une class pour votre plugin
On n’a bien sur pas la prétention de faire un cours complet sur la programmation orienté objet. Ce qu’il faut retenir, c’est que les classes PHP ont une fonction constructeur, __construct, qui est exécuté dès que une nouvelle instance d’une classe est instanciée. Tous les “hooks” de WordPress et les “filters” seront enregistrés sous le contrôle du constructeur de notre class de notre plugin. On se limite à la création d’un “shorcode” [hecube_welcome_msg] qui sera remplacé par un message d’accueil tout simple. La fonction add_shortcode() function/hook doit être placé sous la fonction du constructeur. Il ne reste plus qu’à instantier la class nommé He3wpoop et voilà !
Bien sur, ce n’est qu’un plugin tout simple mais pour toute personne qui souhaite se consacrer au développement de plugin sous WP, on ne peut que vous encouragez à fonctionner en Class pour le développement de vos plugins.
Le code source du plugin he3wpoop.php
<?php
/*
Plugin Name: he3wpoop
Plugin URI: http://hecube.net
Description: test for OOP plugin WP
Version: 1.0
Author: Hecube
Author URI: http://hecube.net
*/
class He3wpoop {
var $pluginPath;
var $pluginUrl;
public function __construct()
{
// Set Plugin Path
$this->pluginPath = dirname(__FILE__);
// Set Plugin URL
$this->pluginUrl = WP_PLUGIN_URL . '/he3wpoop';
add_shortcode('hecube_welcome_msg', array($this, 'he3wpoopshortcode'));
}
public function he3wpoopshortcode () {
print ('<h1>Welcome on <code>http://social.hecube.net/</code></h1>');
}
}//EOC
/* Instantiate the class */
$he3wpoop_value = new He3wpoop;
?>Installation du plugin he3wpoop.php
Copie du shortcode hecube_welcome_msg
Le résultat dans l’article du plugin he3wpoop.php
Un vrai tutorial sur un plugin bâti sur une Class
On vous invite à découvrir cette excellent article sur http://net.tutsplus.com/tutorials/wordpress/create-wordpress-plugins-with-oop-techniques/ qui vous presente de A à Z comment faire un plugin relativement avancé avec la REST API de Dribbble. Plugin qui permet en plus d’ajouter un shortcode pour les articles et les widgets et au sein du thème selon la forme :
[dribble user="JustinMezzell" images="5" width="100" height="100" caption="true"]
En savoir plus
Class, OOP, PHP, plugin, Programmation orientée objet, Wordpress
30 janvier 2012 dans Création de site web, Framework, Javascript, Ajax, PHP, MYSQL, Technologie, Tutoriaux, XHTML CSS, jQuery par Bruno Flaven
On connait tous forcément des expressions anglophones célèbres en musique notamment Rock and Roll, R’n'B, Twist and Shout… Dans le développement avec jQuery, celle qui faut connaitre, comme en Flash, c’est le Drag-and-Drop, un glisser-déposer dans la langue de Molière. Rien à voir avec une amortie au tennis, je vous rassure tout de suite, on va voir, dans cette article, comment faire un “Glisser-déposer” combiné avec un tri et un enregistrement de ce résultat, le tout à l’aide de jQuery, of course.
N’oubliez pas d’appeler les librairies jQuery.js et jQueryUI.js
<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="jQueryUI.js" type="text/javascript" charset="utf-8"></script>
S’échauffer avec sortable()
Pour s’échauffer, on va d’abord voir tout simplement comment utiliser une fonction de tri nommée sortable(). Il faut pour cela bien sur charger la bibliothèque javascript jQuery UI
A noter, le container est, bien sûr, l’élément <ul>...</ul>, et les enfants sont les éléments sujet au tri <li>...</li> contenue dans cet élément parent.
Le code du fichier candidats_drag_and_drop_1.html
<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="jQueryUI.js" type="text/javascript" charset="utf-8"></script>
<script type='text/javascript'>
$(document).ready(
function() {
$('ul').sortable();
}
);
</script>
<style>
body {
font: 16px sans-serif;
background: #fff;
color: rgb(50, 50, 50);
margin: 0;
padding: 0;
}
h4 {
margin: 5px;
}
ul {
list-style: none;
width: 250px;
margin: 5px;
padding: 0;
}
li {
background: #F6177B;
padding: 3px;
width: 250px;
border: 1px solid #666666;
color:#fff;
}
</style>
</head>
<body>
<h4>Quelques candidats à la présidentielle 2012 en France</h4>
<ul>
<li>Jean-Pierre CHEVENEMENT</li>
<li>François BAYROU</li>
<li>Hervé MORIN</li>
<li>Corinne LEPAGE</li>
<li>Dominique de VILLEPIN</li>
<li>Francois HOLLANDE</li>
<li>Nicolas SARKOZY</li>
<li>Eva JOLY</li>
<li>Jean-Luc MELENCHON</li>
<li>Frédéric NIHOUS</li>
<li>Marine LE PEN</li>
<li>Christine BOUTIN</li>
<li>Nicolas DUPONT-AIGNAN</li>
</ul>Le glisser-déposer sur 2 colonnes
On est toujours avec nos candidats à la présidentielle 2012, on veut classer ces candidats dans l’ordre d’arriver comme au tiercé !
Pour se faire la meilleure approche est de créer une variable globale type var $selectedNameCandidat;, ainsi à chaque fois qu’une sélection est faite, l’élément sélectionné est stocker dans cette variable. Si vous n’agissez pas de la sorte, cela va ralentir considérablement l’exécution de votre script si votre liste contient de très nombreux éléments.
Déplacement d’une colonne à une autre
Le code du fichier candidats_drag_and_drop_2.html
<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="jQueryUI.js" type="text/javascript" charset="utf-8"></script>
<script type='text/javascript'>
$(document).ready(
function() {
var $selectedNameCandidat;
$('li.CandidatName').mousedown(
function() {
if ($selectedNameCandidat && $selectedNameCandidat.length) {
$selectedNameCandidat.removeClass('CandidatNameSelected');
}
$selectedNameCandidat = $(this);
$selectedNameCandidat.addClass('CandidatNameSelected');
}
);
$('ul#column-1').sortable({
connectWith : [
'ul#column-2'
],
placeholder: 'CandidatNamePlaceholder',
opacity: 0.8,
cursor: 'move'
});
$('ul#column-2').sortable({
connectWith : [
'ul#column-1'
],
placeholder: 'CandidatNamePlaceholder',
opacity: 0.8,
cursor: 'move'
});
}
);
</script>
<style>
html,
body {
width: 100%;
height: 100%;
}
body {
font: normal 12px "Lucida Grande", Arial, sans-serif;
color: rgb(50, 50, 50);
margin: 0;
padding: 0;
background: #ccc;
}
div#hcontainer {
position: absolute;
top: 0;
right: 0;
bottom: 23px;
left: 0;
}
ul#column-1,
ul#column-2 {
float: left;
height: 800px;
width: 300px;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
background: #fff;
list-style: none;
margin: 0;
padding: 0;
}
li.CandidatName {
clear: both;
padding: 5px 5px 10px 5px;
min-height: 48px;
width: 290px;
}
li.CandidatName h5 {
font: normal 12px "Lucida Grande", Arial, sans-serif;
margin: 0;
}
h5.CandidatName {
padding-left: 55px;
}
li.CandidatNameSelected {
background: #F6177B;
color: white;
}
.CandidatNamePlaceholder {
background: #999;
height: 58px;
}
</style>
</head>
<body>
<div id="hcontainer">
<table border="0">
<tr>
<th><h1>Candidats</h1></th>
<th><h1>Résultats</h1></th>
</tr>
<tr>
<td valign="top">
<ul id="column-1">
<li class="CandidatName"><h5>Francois HOLLANDE</h5></li>
<li class="CandidatName"><h5>Nicolas SARKOZY</h5></li>
<li class="CandidatName"><h5>Jean-Pierre CHEVENEMENT</h5></li>
<li class="CandidatName"><h5>François BAYROU</h5></li>
<li class="CandidatName"><h5>Hervé MORIN</h5></li>
<li class="CandidatName"><h5>Corinne LEPAGE</h5></li>
<li class="CandidatName"><h5>Dominique de VILLEPIN</h5></li>
<li class="CandidatName"><h5>Eva JOLY</h5></li>
<li class="CandidatName"><h5>Jean-Luc MELENCHON</h5></li>
<li class="CandidatName"><h5>Frédéric NIHOUS</h5></li>
<li class="CandidatName"><h5>Marine LE PEN</h5></li>
<li class="CandidatName"><h5>Christine BOUTIN</h5></li>
<li class="CandidatName"><h5>Nicolas DUPONT-AIGNAN</h5></li>
</ul>
</td>
<td>
<ul id="column-2">
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>Enregistrement de l’état des listes triées
L’étape ultime est d’utiliser JQuery pour sérialiser nos valeurs ordonnancées et les envoyer dans une boite d’alerte. En lieu et place de la boite d’alerte, cela pourrait être un script php qui permettrait l’insertion dans une base de données.
Ceux sont les attributs title de nos <li> qui vont être passés dans une chaine nommée OrderCandidates[].
<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="jQueryUI.js" type="text/javascript" charset="utf-8"></script>
<script type='text/javascript'>
$(document).ready(
function() {
var $selectedFile;
$('li.CandidatName').mousedown(
function() {
if ($selectedNameCandidat && $selectedNameCandidat.length) {
$selectedNameCandidat.removeClass('CandidatNameSelected');
}
$selectedNameCandidat = $(this);
$selectedNameCandidat.addClass('CandidatNameSelected');
}
);
var saveUpdate = function(e, ui) {
var $data = $(this).sortable(
'serialize', {
attribute: 'title',
expression: /^(.*)$/,
key: 'OrderCandidates[]'
}
);
alert($data);
// Ici vous pouvez placer une requete ajax vers
// un script sur votre serveur
// $.get('/chemin/vers/le_serveur/fichier.php', $data);
};
$('ul#column-1').sortable({
connectWith : [
'ul#column-2'
],
placeholder: 'CandidatNamePlaceholder',
opacity: 0.8,
cursor: 'move',
update: saveUpdate
});
$('ul#column-2').sortable({
connectWith : [
'ul#column-1'
],
placeholder: 'CandidatNamePlaceholder',
opacity: 0.8,
cursor: 'move',
update: saveUpdate
});
}
);
</script>
<style>
html,
body {
width: 100%;
height: 100%;
}
body {
font: normal 12px "Lucida Grande", Arial, sans-serif;
color: rgb(50, 50, 50);
margin: 0;
padding: 0;
background: #ccc;
}
div#hcontainer {
position: absolute;
top: 0;
right: 0;
bottom: 23px;
left: 0;
}
ul#column-1,
ul#column-2 {
float: left;
height: 800px;
width: 300px;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
background: #fff;
list-style: none;
margin: 0;
padding: 0;
}
li.CandidatName {
clear: both;
padding: 5px 5px 10px 5px;
min-height: 48px;
width: 290px;
}
li.CandidatName h5 {
font: normal 12px "Lucida Grande", Arial, sans-serif;
margin: 0;
}
h5.CandidatName {
padding-left: 55px;
}
li.CandidatNameSelected {
/*background: #F6177B;*/
color: white;
}
.CandidatNamePlaceholder {
/*background: #999;*/
background: #F6177B;
height: 58px;
}
</style>
</head>
<body>
<div id="hcontainer">
<table border="0">
<tr>
<th><h1>Candidats</h1></th>
<th><h1>Résultats</h1></th>
</tr>
<tr>
<td valign="top">
<ul id="column-1">
<li class="CandidatName" title="nicolas_sarkozy"><h5>Nicolas SARKOZY</h5></li>
<li class="CandidatName" title="jean_pierre_chevenement"><h5>Jean-Pierre CHEVENEMENT</h5></li>
<li class="CandidatName" title="francois_bayrou"><h5>François BAYROU</h5></li>
<li class="CandidatName" title="herve_morin"><h5>Hervé MORIN</h5></li>
<li class="CandidatName" title="corinne_lepage"><h5>Corinne LEPAGE</h5></li>
<li class="CandidatName" title="dominique_de_villepin"><h5>Dominique de VILLEPIN</h5></li>
<li class="CandidatName" title="eva_joly"><h5>Eva JOLY</h5></li>
<li class="CandidatName" title="jean_luc_melenchon"><h5>Jean-Luc MELENCHON</h5></li>
<li class="CandidatName" title="francois_hollande"><h5>Francois HOLLANDE</h5></li>
<li class="CandidatName" title="frederic_nihous"><h5>Frédéric NIHOUS</h5></li>
<li class="CandidatName" title="marine_le_pen"><h5>Marine LE PEN</h5></li>
<li class="CandidatName" title="christine_boutin"><h5>Christine BOUTIN</h5></li>
<li class="CandidatName" title="nicolas_dupont_aignan"><h5>Nicolas DUPONT-AIGNAN</h5></li>
</ul>
</td>
<td>
<ul id="column-2">
</ul>
</td>
</tr>
</table>
</div>En savoir plus
Candidats, développement, fonction, Javascript, jQuery, méthode, plugin, Présidentiel
3 janvier 2012 dans CMS, Création de site web, Meilleurs blogs, PHP, MYSQL, Technologie, Tutoriaux, Webdesign, Wordpress, XHTML CSS par Bruno Flaven
Cela peut devenir assez contraignant d’utiliser un CMS comme WordPress dans sa totalité notamment si vous souhaitez par exemple re-injecter dynamiquement du contenu de votre blog sous WordPress dans un autre site, plus corporate ou bien par exemple parce que vous souhaitez utiliser le “backend” mais pas le “frontend” de WordPress.
C’est l’objet de l’article aujourd’hui qui va vous montrer rapidement comment charger du contenu émanant de WordPress sans le thème (frontend) qui l’accompagne. Vous disposez avec cette méthode néanmoins de toutes les fonctions WordPress.
Le code indispensable
On a fait le test en local sous MAMP à l’aide de WP Version 3.3. Le chemin vers notre WordPress pleinement fonctionnel est disponible à l’adresse suivante :
- Le chemin en local de notre WP est :
/Applications/MAMP/htdocs/wp/
- L’adresse de notre WP est :
http://127.0.0.1/wp/
Il nous reste à créer un répertoire sur le même serveur mais hors de l’arborescence du WordPress.
- Le chemin en local de notre répertoire hors WP est :
/Applications/MAMP/htdocs/no_wp/
- L’adresse en local de notre répertoire hors WP est :
http://127.0.0.1/no_wp/
C’est dans ce répertoire que l’on va placer notre fichier PHP afin d’appeler le contenu du WP hors de WP.
Le fichier call_wp_no_theme.php
Le fichier call_wp_no_theme.php se décompose en deux parties :
1. La partie de code indispensable pour charger wordpress sans son thème mais accéder aux principales fonctions de WP est la suivante.
<?php
/* LOAD WP WITH NO THEME */
define('WP_USE_THEMES', false);
require($_SERVER['DOCUMENT_ROOT'] . '/wp/wp-blog-header.php');
?>2. Le code pour appeler par exemple les 3 derniers articles
<?php
/* THE LOOP */
query_posts('showposts=3');
?>
<table cellpadding="5" cellspacing="5" border="0">
<?php while (have_posts()) : the_post(); ?>
<tr>
<td valign="top"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></td>
<td valign="top"><h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2><?php the_excerpt(); ?></td>
</tr>
<?php endwhile;?>
</table>Le code complet du fichier call_wp_no_theme.php qui sera disponible à l’adresse suivante http://127.0.0.1/no_wp/
<?php
/* LOAD WP WITH NO THEME */
define('WP_USE_THEMES', false);
require($_SERVER['DOCUMENT_ROOT'] . '/wp/wp-blog-header.php');
?>
<?php
/* THE LOOP */
query_posts('showposts=3');
?>
<table cellpadding="5" cellspacing="5" border="0">
<?php while (have_posts()) : the_post(); ?>
<tr>
<td valign="top"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></td>
<td valign="top"><h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2><?php the_excerpt(); ?></td>
</tr>
<?php endwhile;?>
</table>Nos 3 derniers articles avec une image par défaut vus du “backend” http://127.0.0.1/wp/wp-admin/
Nos 3 derniers articles vus du “frontend” http://127.0.0.1/wp/
Nos 3 derniers articles vus depuis http://127.0.0.1/no_wp/call_wp_no_theme.php
En savoir plus
Administration, CMS, MySQL, PHP, theme, Webdesign, Wordpress
20 décembre 2011 dans CMS, Création de site web, Image, Graphisme, Photoshop, Marketing Web, Meilleurs blogs, PHP, MYSQL, Technologie, Tutoriaux, Webdesign, Widget, Gadget, Wordpress, XHTML CSS par Bruno Flaven
Si vous êtes amené à utiliser Wordpress pour le compte d’un client, il vous faudra certainement personnaliser l’outil d’administration, cela peut aussi faire parti d’une démarche personnel afin de personnaliser plus encore votre thème dans sa partie “front” comme dans sa partie “back”.
On va voir la chose en 2 temps :
- Comment ajouter un logo différent sur la page de login sous Wordpress car c’est finalement la premiere chose que sera amené à voir toute personne cherchant à se loguer à l’outil WP.
- Ajouter un widget en top position sur le “dashboard” ou tableau de bord de Wordpress, sachant que là aussi c’est un des tous premiers écrans que voit l’utilisateur.
Les tests ont été sur la dernière version de WordPress, la 3.3
Modifier la page de login via un plugin
On va voir à l’aide d’un plugin comment modifier la page de login. L’activation du plugin aura comme conséquence de placer un logo en lieu et place du logo WP sur la page de login, de changé le lien sur ce même logo, en permettant de retourner sur la page d’accueil du login ainsi que le alt message. Nous sommes servi du logo 3WDOC, notre web application de création d’histoire interactives et enrichies disponible sur www.3wdoc.com
Le plugin se nomme he3adminsettings, il comprend un répertoire css et un répertoire images.
<?php
/*
Plugin Name: he3adminsettings
Plugin URI: http://www.hecube.net
Description: enable to change the login page
Version: 1.0.0
Author: bruno@hecube.net
Author URI: http://www.hecube.net
License: GPLv2
Copyright (c) 2011 hecube.net (http://hecube.net)
he3adminsettings is released under the GNU General Public License (GPL)
http://www.gnu.org/licenses/gpl-2.0.txt
*/
/* Change the CSS for the admin */
function he3_custom_admin_head() {
echo "\n";
echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('css/he3wpadmin.css', __FILE__). '">';
echo "\n";
}//EOF
add_action('admin_head', 'he3_custom_admin_head');
function he3_custom_login_page() {
echo "\n";
echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('css/he3wploginpage.css', __FILE__). '">';
echo "\n";
}//EOF
add_action('login_head', 'he3_custom_login_page');
function he3_custom_login_page_site_url (){
return home_url(); // The url
}//EOF
add_filter('login_headerurl', 'he3_custom_login_page_site_url');
function he3_custom_login_page_site_url_title (){
return "The alt msg on the logo"; // The alt msg
}//EOF
add_filter('login_headertitle', 'he3_custom_login_page_site_url_title');
?>Les deux CSS du repertoire css, he3wploginpage.css et he3wpadmin.css
he3wploginpage.css
/* he3wploginpage.css */
html,
body {
height:100%;
/* background-image: url(../images/bg_night_hunter.png);*/
/*background-image: url(../images/bgsite.jpg);*/
}
#login {
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
-khtml-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
-moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
padding-bottom:20px;
}
#loginform,
#lostpasswordform,
#registerform {
-khtml-box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-border-radius:0;
-khtml-border-radius:0;
-moz-border-radius:0;
border-radius:0;
border:none;
background:transparent;
margin:0;
}
#login h1 a {
/*background:transparent;*/
background-image: url(../images/logo-login.png) !important;
}
#login h1 a {
width:312px;
height:91px;
margin-left:7px;
border-radius:3px;
margin-bottom:10px;
}
.message {
color:#000;
width:275px;
}he3wpadmin.css
/* he3wpadmin.css */
#header-logo {
background-image: url(../images/logo-admin.png) !important;
width:45px;
height:21px;
}Activation des 2 plugins
Le résultat de he3adminsettings
Insérer un widget sur la tableau de bord
Par défaut, ce widget de tableau de bord s’affichera tout en haut à moins que l’utilisateur ne réorganise ses widgets. Ce wigdet n’affiche pour le moment qu’un texte bateau, libre à vous de l’agrémenter de plus d’éléments.
Le résultat de he3dashboardwidget
Le code source du plugin he3dashboardwidget
<?php
/*
Plugin Name: he3dashboardwidget
Plugin URI: http://hecube.net
Description: Add a dashboard widget on top position
Version: 1.0
Author: Bruno Flaven
Author URI: http://hecube.net
License: GPL2
*/
/*
http://codex.wordpress.org/Dashboard_Widgets_API
http://theme.it/an-in-depth-look-at-the-dashboard-widgets-api/
*/
// Create the function to output the contents of our Dashboard Widget
function example_dashboard_widget_function() {
// Display whatever it is you want to show
echo "Hello World, I'm a great Dashboard Widget";
}
function example_add_dashboard_widgets () {
wp_add_dashboard_widget('example_dashboard_widget', 'Example Dashboard Widget', 'example_dashboard_widget_function');
// Globalize the metaboxes array, this holds all the widgets for wp-admin
global $wp_meta_boxes;
// Get the regular dashboard widgets array
// (which has our new widget already but at the end)
$normal_dashboard = $wp_meta_boxes['dashboard']['normal']['core'];
// Backup and delete our new dashbaord widget from the end of the array
$example_widget_backup = array('example_dashboard_widget' => $normal_dashboard['example_dashboard_widget']);
unset($normal_dashboard['example_dashboard_widget']);
// Merge the two arrays together so our widget is at the beginning
$sorted_dashboard = array_merge($example_widget_backup, $normal_dashboard);
// Save the sorted array back into the original metaboxes
$wp_meta_boxes['dashboard']['normal']['core'] = $sorted_dashboard;
}
// Hook into the 'wp_dashboard_setup' action to register our other functions
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );
?>Les plugins de gestion des accès utilisateur
Il existe un florilège de plugins permettant de contrôler les accès des utilisateurs à votre site sous WP notamment dans certains cas de contrôler jusqu’aux widgets que l’utilisateur est susceptible de voir.
En voici quelques-uns, notamment l’excellent Advanced Access Manager.
En savoir plus
Administration, CMS, MySQL, PHP, theme, Webdesign, Wordpress
14 novembre 2011 dans CMS, Création de site web, Linux, Apache, Mac, PHP, MYSQL, Technologie, Tutoriaux, Wordpress par Bruno Flaven
Utiliser du PHP en ligne de commande peut présenter un intérêt si vous avez besoin d’un langage de scripting plus sophistiqué que le bash shell qui reste forcément assez limité. Vous faites d’un certaine façon d’une pierre deux coups dans la mesure où tous les script PHP que vous développez et votre pratique du PHP sont disponibles plus seulement dans une simple page web via un navigateur. Le recours à PHP permet d’étendre considérablement les possibilités qui vous sont offertes dans des taches ardus si elles étaient à concevoir avec à votre disposition du bash shell uniquement.
Prenons un cas concret qui consiste à effectuer la migration de contenu d’une Base De Données (BDD) de type MySQL d’un site géré grâce à un CMS inconnu vers la BDD d’un site sous WordPress.
Déterminer la localisation et la version de PHP
On va procéder à cette opération en local sous MAMP, qui contient en se connectant à la fois via la console au client MySQL et en exécutant nos scripts PHP dans un autre onglet de la console.
Les commandes ci-dessous permettent de déterminer le shebang au début du script de sorte que cela indique au système que ce fichier doit être interprété comme du PHP.
Les différentes commandes nécessaires à déterminer la version l’emplacement de php
which php
whereis php
type -a php
php -v
Voilà donc ce qu’il faudra placer à l’en-tête de votre script
Lancer le script en ligne de commande
Ensuite, il reste à rendre exécutable votre fichier PHP par la commande suivante nom_du_fichier_contenant_votre_script.php.
chmod +x /le/chemin/vers/votre/fichier/nom_du_fichier_contenant_votre_script.php
Vous n’aurez plus qu’ensuite à lancer votre script de la manière suivante :
/le/chemin/vers/votre/fichier/nom_du_fichier_contenant_votre_script.php
Se connecter à une BDD sous MAMP
Vous pouvez vous connecter au client MySQL de MAMP à l’aide de la commande suivante :
/Applications/MAMP/Library/bin/mysql -u root -p
Pour tester votre requête, vous pourrez passer directement votre requête dans la client MySQL, cela est toujours utile avant de la lancer votre script en ligne de commande.
Le contenu PHP du script nom_du_fichier_contenant_votre_script.php
#!/usr/bin/php
<?php
echo "\n\n\n\n\n\n";
echo "--- LAUNCH ---";
echo "\n\n\n\n\n\n";
$username = "root";
/* Sous MAMP le pwd est root */
$password = "root";
/* C'est le moyen de se connceter en mode à la base de données en mode php Cli */
$hostname = ":/Applications/MAMP/tmp/mysql/mysql.sock";
//connection to the database
$dbhandle = mysql_connect($hostname, $username, $password)
or die("Unable to connect to MySQL");
// echo "Connected to MySQL";
// echo "\n\n";
//select a database to work with
$selected = mysql_select_db("db_source",$dbhandle)
or die("Could not select db_source");
//execute the SQL query and return records
$result = mysql_query(" SELECT * FROM posts WHERE user_id = 101 AND status = 'publish' "); // FROM TCMES
$post_author = '3'; // The id for coming for the wp_users
$db_name = 'db_destination';
$file = '/le/chemin/vers/votre/fichier/dump_sql_vers_wordpress.sql';
while ($row = mysql_fetch_array($result)) {
/* VALUES */
$output = "";
$output .= "
INSERT INTO ".$db_name.".wp_posts (ID, post_author, post_date, post_date_gmt, post_content, post_title, post_excerpt, post_status, comment_status, ping_status, post_password, post_name, to_ping, pinged, post_modified, post_modified_gmt, post_content_filtered, post_parent, guid, menu_order, post_type, post_mime_type, comment_count) VALUES";
/* ID */
$output .= "('".trim($row{'id'})."', ";
/* post_author */
$output .= "'".trim($post_author)."',";
/* post_date */
$output .= "'".trim($row{'created_at'})."',";
/* post_date_gmt */
$output .= "'".trim($row{'created_at'})."',";
/* post_content */
$output .= "'".addslashes(trim($row{'body'}))."',";
/* post_title */
$output .= "'".addslashes(trim($row{'title'}))."',";
/* post_excerpt */
$output .= "'',";
/* post_status */
$output .= "'publish',";
/* comment_status */
$output .= "'open',";
/* ping_status */
$output .= "'open',";
/* post_password */
$output .= "'',";
/* post_name (slug) */
$output .= "'".trim($row{'nicetitle'})."',";
/* to_ping */
$output .= "'',";
/* pinged */
$output .= "'',";
/* post_modified */
$output .= "'".trim($row{'updated_at'})."',";
/* post_modified_gmt */
$output .= "'".trim($row{'updated_at'})."',";
/* post_content_filtered */
$output .= "'',";
/* post_parent */
$output .= "'0',";
/* guid */
$output .= "'',";
/* menu_order */
$output .= "'0',";
/* post_type */
$output .= "'post',";
/* post_mime_type */
$output .= "'',";
/* comment_count */
$output .= "'".trim($row{'total_comments'})."'";
/* END */
$output .= ");";
$output .= "\n";
/* INJECT */
$handle = fopen($file, 'a');
fwrite($handle, $output );
fclose($handle);
/* // INJECT */
}
echo "\n\n\n\n\n\n";
echo "--- DONE ---";
echo "\n\n\n\n\n\n";
?>La structure de la table MySQL “source” inclus dans la BDD
CREATE TABLE `posts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`created_at` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`updated_at` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`title` varchar(255) NOT NULL DEFAULT '',
`nicetitle` varchar(255) NOT NULL DEFAULT '',
`body` text NOT NULL,
`date` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`user_id` int(11) NOT NULL DEFAULT '0',
`status` varchar(11) NOT NULL DEFAULT '0',
`last_comment_date` datetime DEFAULT NULL,
`total_comments` int(11) DEFAULT '0',
`blocked` tinyint(1) DEFAULT '0',
`unique_id` varchar(255) DEFAULT NULL,
`imported_feed_id` int(11) DEFAULT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `unique_id` (`unique_id`),
UNIQUE KEY `unique_id_2` (`unique_id`),
KEY `nicetitle` (`nicetitle`),
KEY `user_id` (`user_id`),
KEY `date` (`date`),
KEY `status` (`status`),
FULLTEXT KEY `searching` (`title`,`body`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
En savoir plus
LAMP, Mac, MAMP, MySQL, PHP, script, Shell, WAMP
10 septembre 2011 dans CMS, Création de site web, Ecommerce, Javascript, Ajax, Marketing Web, Meilleurs blogs, PHP, MYSQL, Réseaux sociaux, Technologie, Tutoriaux, Widget, Gadget, Wordpress, XHTML CSS, jQuery par Bruno Flaven
Dès lors que vous exploitez un site en ligne que ce soit un jeu, une application web ou même un site de e-commerce et vous rencontrez un succès relatif, vous serez immanquablement confronté(e) à la gestion des demandes d’utilisateur et à l’obligation de communiquer de la manière la plus fluide possible avec ces derniers.
C’est en gros toute la problématique que recouvre l’acronyme CRM (Customer Relashionship Management) ou en français la sacro-sainte Gestion de la Relation Client (GRC). La plupart du temps, cela donne naissance à un monstre éditorial nommé FAQ (Frequently Asked Questions), traduit en français par Foire Aux Questions. Cela nécessite de gérer une information pertinente, utile et plus ou moins à jour. C’est la problématique que l’on va voir dans cet article.
Dans la gestion de ce problème de communication, deux remarques s’imposent :
- Si vous êtes sur un mode gratuit, la gestion des angoisses de vos utilisateurs peut-être plus souple après tout vous n’êtes en rien lié commercialement avec vos utilisateurs. Le revers de la médaille, c’est que de jouer à cache à cache avec vos utilisateurs, vous risquez de ruiner la réputation de votre site, votre “e-reputation” (réputation sur le web) est en jeu… Et çà c’est grave
- L’autre écueil est que très souvent la page de FAQ est aussi sexy sur un site qu’un rond-point en construction aux abords d’une bretelle d’autoroute, un jour de crachin. Ainsi donc votre FAQ a toutes les chances d’être consciencieusement évitée par vos utilisateurs. C’est pour cette raison que très souvent en lieu et place d’une pauvre page de FAQ, on enrobe le tout au tour d’un blog, histoire d’humaniser un peu la relation client ! Avec plus ou moins de réussite là aussi.
Fort de ces deux remarques, on va donc voir comment sous WordPress (votre outil de blog favori), on peut tout de même gérer des FAQs de manière un peu rationnel et “user-friendly”. On a retenu deux plugins plutôt bien conçus qui permettent un bonne gestion des FAQ notamment à l’aide de post_type qui permet d’isoler les FAQs des articles et des pages sous WP.
Ce test a été mené sur la version de WordPress Version 3.2.1 en Français et sur le thème natif nommé wp-content/themes/twentyeleven.
1. Le plugin FAQ Manager
Un bon plugin pour la gestion des FAQs qui vous donne de bonnes options pour personnaliser votre jeu de questions/réponses. Les FAQs sont gérées dans un post_type et vous pouvez les ordonner à votre guise.
Liste des FAQs
Ajouter une FAQ
Les mots-clés de vos FAQs
Ajouter un mot-clé à vos FAQs
Ordonner vos FAQs
Les paramètres généraux de vos FAQs
Les shortcodes du plugin pour insérer vos FAQs
2. Le plugin Q and A - FAQ Plugin
Un plugin plus sommaire quele precédent pour la gestion des FAQs, un peu moins d’options pour personnaliser votre jeu de questions/réponses. Les FAQs sont elles aussi gérées dans un post_type.
Liste des FAQs
Ajouter une FAQ
Ajouter une catégorie à vos FAQs
Ordonner vos FAQs
Le plugin maison
Ce plugin a été développé pour permettre une gestion plus proche de ce que nous souhaitions pour le gestion des FAQs sur le site 3WDOC.com qui distribue le 3WDOC Studio, une application web polyvalente spécialement conçue pour créer et diffuser en HTML5 des contenus rich media & interactifs optimisés pour le web.
L’insertion des shortcodes et les paramètres à passer. Le paramètre faq_id est l’id de la FAQ, le paramètre faq_no_link permet de créer un lien automatiquement vers le post_type (valeur égale à 0 pas de lien, valeur égale à 1 le lien s’exprime)
[faq_catalogue faq_id="4638" faq_no_link="0"] [faq_catalogue faq_id="4640" faq_no_link="0"] [faq_catalogue faq_id="4642" faq_no_link="1"] [faq_catalogue faq_id="4773" faq_no_link="0"] [faq_catalogue faq_id="4778" faq_no_link="0"] [faq_catalogue faq_id="4783" faq_no_link="0"] [faq_catalogue faq_id="4788" faq_no_link="0"] [faq_catalogue faq_id="4792" faq_no_link="0"] [faq_catalogue faq_id="1904" faq_no_link="0"]
Le code source du plugin he3faqmanagement.php
/*
Plugin Name: he3FaqManagement
Plugin URI: http://www.hemotion.eu
Description: implements a FAQ management like for 3WDOC.com in WP
Version: 1.0.0_19042011
Author: bruno@hecube.net
Author URI: http://www.hemotion.eu
License: GPLv2
Copyright (c) 2011 hecube.net (http://hecube.net)
he3FaqManagement is released under the GNU General Public License (GPL)
http://www.gnu.org/licenses/gpl-2.0.txt
*/
/* TRANSLATION */
/* load the translation if different from english */
load_plugin_textdomain( 'he3faqmanagement', false, dirname(plugin_basename( __FILE__ )).'/languages/');
// flush permalinks on plugin initalization ****thanks to Austin Passay @TheFrosty for the help****
/* NOT IN USE, IT SUCKS */
/*
function he3_faq_collection_flush_rewrite_rules() {
global $pagenow, $wp_rewrite;
if ('plugins.php' == $pagenow && isset( $_GET['activate'] ) )
$wp_rewrite->flush_rules();
}
add_action('load-plugins.php', 'faq_flush_rewrite_rules' );
*/
/* // POST_TYPE */
/* Set up the post types. */
add_action( 'init', 'he3_faq_collection_register_post_types' );
/* Registers post types. */
function he3_faq_collection_register_post_types() {
$menu_icon_url = plugin_dir_url( __FILE__ ).'/images/he3_faq_icon.png';
/* Set up the arguments for the 'faq_catalogue' post type. */
$faq_catalogue_args = array(
'query_var' => 'faq_catalogue',
'public' => true,
'exclude_from_search'=> true,
'show_ui' => true,
'_builtin' => false,
'capability_type' => 'post',
'hierarchical' => false,
'show_tagcloud' => true,
'menu_icon' => ''.$menu_icon_url.'',
/* important */
'rewrite' => array(
'slug' => 'api-3wdoc-faq',
'with_front' => false,
),
'supports' => array(
'title',
'editor',
'comments',
'trackbacks',
'revisions',
'author',
'excerpt',
'thumbnail',
'custom-fields',
'page-attributes'
),
'labels' => array(
'name' => 'FAQs',
'singular_name' => 'FAQ',
'add_new' => ''.__('Add New FAQ', 'he3faqmanagement').'',
'add_new_item' => ''.__('Add New FAQ', 'he3faqmanagement').'',
'edit_item' => ''.__('Edit FAQ', 'he3faqmanagement').'',
'new_item' => ''.__('New FAQ', 'he3faqmanagement').'',
'view_item' => ''.__('View FAQ', 'he3faqmanagement').'',
'search_items' => ''.__('Search FAQ', 'he3faqmanagement').'',
'not_found' => ''.__('No FAQ Found', 'he3faqmanagement').'',
'not_found_in_trash' => ''.__('No FAQ Found In Trash', 'he3faqmanagement').''
),
);
/* Register the faq catalogue post type. */
register_post_type( 'faq_catalogue', $faq_catalogue_args );
} //EOF
/* POST_TYPE // */
/* // SHORTCODE */
add_action( 'init', 'he3_faq_collection_register_shortcodes' );
function he3_faq_collection_register_shortcodes() {
/* Register the [faq_catalogue] shortcode. */
add_shortcode( 'faq_catalogue', 'he3_faq_collection_shortcode' );
}//EOF
function he3_faq_collection_shortcode ($atts, $content = NULL) {
extract(shortcode_atts(array(
'faq_id' => '',
'faq_no_link' => '',
), $atts));
$wp_query = new WP_Query(array(
'post_type' => 'faq_catalogue',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => -1,
'post__in' => array($faq_id)
));
while ($wp_query->have_posts()) : $wp_query->the_post();
global $post;
$id=$post->ID;
$faqcontent= get_the_excerpt();
/* If 0 no read more link if 1 the read more link will be shown */
$faq_no_link[$id];
$displayfaq .= '<div class="single_faq"><!-- '.$id.' -->';
// $displayfaq .= '<a href="#" class="faq_question click">'.get_the_title().'</a>';
$displayfaq .= '<span class="faq_question click">'.get_the_title().'</span>';
$displayfaq .= '<span class="faq_answer">';
$displayfaq .= ''.wpautop($faqcontent, true).'';
if($faq_no_link == 0) {
$displayfaq .= '';
} else {
$displayfaq .= '<br><div class="more"><a href="' . get_permalink() . '">'.__('Read more', WPGROUPLANG).'</a></div><br>';
}
$displayfaq .= '</span>';
$displayfaq .= '</div>';
endwhile;
wp_reset_query();
return $displayfaq;
}//EOF
/* SHORTCODE // */
/* JS */
function he3_faq_collection_load_scripts() {
// Optional setting for loading jQuery collapse
if( !is_admin()) {
wp_enqueue_script('jcollapse', plugins_url('js/faq-collapse.js', __FILE__) , array('jquery'), '1.0' );
}
}
add_action('wp_print_scripts', 'he3_faq_collection_load_scripts');
/* CSS */
function he3_faq_collection_faq_css() {
// Optional setting for loading CSS
if( !is_admin()) {
wp_enqueue_style('faq_style', plugins_url('css/faq-default.css', __FILE__) ) ;
}
}
add_action( 'wp_print_styles', 'he3_faq_collection_faq_css' );En savoir plus
Aide, Assistance, CRM, FAQ, MySQL, ordpress, PHP
20 août 2011 dans CMS, Création de site web, Image, Graphisme, Photoshop, Mac, Meilleurs blogs, PHP, MYSQL, Technologie, Tutoriaux, Webdesign, Widget, Gadget, Wordpress, XHTML CSS par Bruno Flaven
Il n’existe pas de crime plus grave que l’anamorphose aux yeux exigeants d’un photographe et on peut le comprendre au regard du risque de prendre une balle en Syrie ou de s’infliger le supplice de faire une photo de star au milieu d’une foule déchainée… Risque mortel dans les deux cas. Si tant est que vous utilisez WordPress comme outil de gestion pour un site internet, il vous faudra donc vous assurer que les photos, images et autres éléments visuels soient à la bonne taille.
Notre image de départ est un portrait de Sean Connery, dont la taille d’origine est 1091×734. Notre objectif est de mettre cette image dans un rapport de proportionnalité de 320×240.
Ce test a été mené sur la version de WordPress Version 3.2.1 en Français et sur le thème natif nommé wp-content/themes/twentyeleven.
En mode minimaliste ou la “Crop Mode”
Il faut régler la taille de l’image en redimensionnant l’image proportionnellement (ce qui concrètement signifie de ne pas la la déformer ou l’anamorphoser)…
L’activation dans le fichier functions.php
De quoi activer les différents formats dans votre thème.
/* NEW IMAGE SIZE */
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'homepage-slideshow-full', 641, 9999 ); /* 641 pixels wide (and unlimited height) */
add_image_size( 'homepage-slideshow-thumb', 131, 98 ); //(cropped)
add_image_size( 'on-air-programming-promo-thumb', 194, 145 ); //(cropped)
add_image_size( 'mini-slider-thumb', 335, 250 ); //(cropped)
}
/* // NEW IMAGE SIZE */Les explications de WP
add_image_size( 'homepage-thumb', 220, 180 ); // 220 pixels wide by 180 pixels tall, soft proportional crop mode
Un peu de code dans la page du thème.
Le fichier content-page.php du thème dûment modifié dans wp-content/themes/twentyeleven.
<h1 class="entry-title"></h1>
<!-- .entry-header -->
<div class="entry-content">
<?php
/*
add_image_size( 'homepage-slideshow-full', 641, 9999 ); //641 pixels wide (and unlimited height)
add_image_size( 'homepage-slideshow-thumb', 131, 98, true ); //(cropped)
add_image_size( 'on-air-programming-promo-thumb', 194, 145, true ); //(cropped)
add_image_size( 'mini-slider-thumb', 335, 250, true ); //(cropped)
*/
?>
<h2>add_image_size( homepage-slideshow-full', 641, 9999 ); //641 pixels wide (and unlimited height)</h2>
<h2>add_image_size( homepage-slideshow-thumb', 131, 98, true ); //(cropped)</h2>
<h2>add_image_size( on-air-programming-promo-thumb', 194, 145, true ); //(cropped)</h2>
<h2>add_image_size( mini-slider-thumb', 335, 250, true ); //(cropped)</h2>
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '
<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>
' ) ); ?>
</div>
<!-- .entry-content -->
<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
<!-- .entry-meta -->
<!-- #post- -->
Le rendu dans le thème
De quoi afficher les différents formats dans votre thème.
<div class="entry-content">
<?php
/*
add_image_size( 'homepage-slideshow-full', 641, 9999 ); //641 pixels wide (and unlimited height)
add_image_size( 'homepage-slideshow-thumb', 131, 98, true ); //(cropped)
add_image_size( 'on-air-programming-promo-thumb', 194, 145, true ); //(cropped)
add_image_size( 'mini-slider-thumb', 335, 250, true ); //(cropped)
*/
?>
<h2>add_image_size( homepage-slideshow-full', 641, 9999 ); //641 pixels wide (and unlimited height)</h2>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'homepage-slideshow-full' ); } ?>
<h2>add_image_size( homepage-slideshow-thumb', 131, 98, true ); //(cropped)</h2>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'homepage-slideshow-thumb' ); } ?>
<h2>add_image_size( on-air-programming-promo-thumb', 194, 145, true ); //(cropped)</h2>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'on-air-programming-promo-thumb' ); } ?>
<h2>add_image_size( mini-slider-thumb', 335, 250, true ); //(cropped)</h2>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'mini-slider-thumb' ); } ?>
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->if ( function_exists( 'add_theme_support' ) ) {
// Enable post thumbnails usage
add_theme_support( 'post-thumbnails' );
// Sets the dimensions of the post thumbnails (crops the image)
set_post_thumbnail_size( 150, 150, true );
}Il vous suffit d’appeler cette fonction dans votre thème pour pouvoir faire appel au format d’image dont vous aurez besoin.
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
add_image_size( 'homepage-thumb', 220, 180, true ); //(cropped)
}Envoyer l’image
Sélectionner cette image comme vignette par défaut
Le rendu de cette vignette par défaut dans le thème.
Vidéo
How to Add Post Thumbnails in WordPress
http://www.youtube.com/watch?v=fUfgmRCPI0E
En savoir plus
fonction, images, MySQL, PHP, post, propriétés, theme, the_post_thumbnail, thumbnail, vignette, Widget, Wordpress
29 juillet 2011 dans CMS, Création de site web, PHP, MYSQL, Tutoriaux, Webdesign, Widget, Gadget, Wordpress par Bruno Flaven
Lorsque on est responsable éditorial d’un site sous WordPress, on en vient vite à se demander pourquoi ne pas gérer l’intégralité du contenu sous la forme de widgets. En effet, cela présente l’avantage indéniable de pouvoir ajouter ou retirer à l’envie ces modules éditoriaux sans être dans l’obligation d’effectuer des acrobaties en terme de développement et/ou une gestion à la hache de publication/dépublication… Bref de se prendre la tête.
Il est évident que si en tant que chef de projet ou responsable éditorial, vous êtes amené(e) à briefer une équipe de développement autant annoncer la couleur en demandant de ne faire que des widgets et bien évidement un thème widgetisable pour Wordpress. Cela vous évitera bien des déboires ultérieurement quand il s’agira de faire évoluer votre site ou simplement de l’administrer. Pourquoi ? Parce que sans même vous connaitre l’équipe de développement vous déteste déjà et une fois que vous serez vraiment haï(e), vous pourrez de toutes les façons allègrement couper le cordon avec l’équipe de développement.
On va donc voir comment sans trop se fatiguer faire un widget purement éditorial, un vrai truc de limace éditorial. Notre widget consistera à faire circuler au maximum le peu d’articles publiés. A chaque rechargement de page, via un système de tirage aléatoire, on affichera un article de WordPress toutes catégories confondues.
Dans le même temps, on va faire de ce widget, un plugin pour pouvoir assouplir au maximum la gestion éditoriale. Deux avantages à cela :
- Ne pas interférer avec le fichier
functions.php du thème.
- Installer et retirer à loisir cette fonction éditorial sans endommager le site.
Notre plugin/widget a été installé et conçu sous WordPress FR Version 3.2.1.
Comment créer un widget et un plugin Wordpress
La première chose à faire est de mettre ce commentaire qui vous permet d’initier la création de votre plugin. C’est la déclaration nécessaire à tout démarrage de plugin Wordpress.
L’en-tête du plugin
/*
Plugin Name: Exemple Plugin Widget
Plugin URI: http://social.hecube.net/
Description: Un plugin pour créer un widget dans WordPress
Version: 1.0
Author: Hecube
Author URI: http://social.hecube.net/
License: GPLv2
*/
Notre plugin va s’appuyer sur la classe de WordPress pour faire des widgets. On doit donc étendre la classe native de Wordpress WP_Widget avec notre porpre class he3_widgetexample_widget_my_info. C’est le sens de la ligne ci-dessous.
class he3_widgetexample_widget_my_info extends WP_Widget
Pour peu que vous connaissiez un peu le php, vous retrouverez facilement parmi ce code du plugin. Notre plugin / widget a pour but d’afficher un profil composé des valeurs suivantes :
Le code complet de notre plugin he3widgetplugin.php
/*
Plugin Name: he3widgetplugin
Plugin URI: http://social.hecube.net/
Description: Un plugin pour créer un widget dans WordPress
Version: 1.0
Author: Hecube
Author URI: http://social.hecube.net/
License: GPLv2
*/
// use widgets_init action hook to execute custom function
add_action( 'widgets_init', 'he3_widgetexample_register_widgets' );
//register our widget
function he3_widgetexample_register_widgets() {
register_widget( 'he3_widgetexample_widget_my_info' );
}
//he3_widgetexample_widget_my_info class
class he3_widgetexample_widget_my_info extends WP_Widget {
//process the new widget
function he3_widgetexample_widget_my_info() {
$widget_ops = array(
'classname' => 'he3_widgetexample_widget_class',
'description' => 'Mon profil.'
);
$this->WP_Widget( 'he3_widgetexample_widget_my_info', 'Mon Widget', $widget_ops );
}
//build the widget settings form
function form($instance) {
$defaults = array( 'title' => 'Mes infos', 'name' => '', 'firstname' => '', 'age' => '' );
$instance = wp_parse_args( (array) $instance, $defaults );
$title = $instance['title'];
$name = $instance['name'];
$firstname = $instance['firstname'];
$age = $instance['age'];
?>
<p>Titre : <input class="widefat" name="get_field_name( 'title' ); ?>" type="text" value="" /></p>
<p>Nom : <input class="widefat" name="get_field_name( 'name' ); ?>" type="text" value="" /></p>
<p>Prénom : <input class="widefat" name="get_field_name( 'firstname' ); ?>" type="text" value="" /></p>
<p>Age : <input class="widefat" name="get_field_name( 'age' ); ?>" type="text" value="" /></p>
<?php
}
//save the widget settings
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['name'] = strip_tags( $new_instance['name'] );
$instance['firstname'] = strip_tags( $new_instance['firstname'] );
$instance['age'] = strip_tags( $new_instance['age'] );
return $instance;
}
//display the widget
function widget($args, $instance) {
extract($args);
echo $before_widget;
$title = apply_filters( 'widget_title', $instance['title'] );
$name = empty( $instance['name'] ) ? ' ' : $instance['name'];
$firstname = empty( $instance['firstname'] ) ? ' ' : $instance['firstname'];
$age = empty( $instance['age'] ) ? ' ' : $instance['age'];
if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
echo '<p>Name : ' . $name . '</p>';
echo '<p>Firstname : ' . $firstname . '</p>';
echo '<p>Age : ' . $age . '</p>';
echo $after_widget;
}
}En savoir plus
MySQL, PHP, plugin, theme, Widget, Wordpress
10 mai 2011 dans Création de site web, Divers, Framework, Google, Image, Graphisme, Photoshop, Javascript, Ajax, Marketing Web, Technologie, Tutoriaux, Webdesign, jQuery par Bruno Flaven
La chose la plus bluffante lorsque on débute avec jQuery est bien cette capacité offerte par la librairie à manipuler des éléments dans le flot HTML et de leur ajouter des classes CSS.
Lorsque l’on débute dans le développement javascript, c’est de voir un résultat immédiat dans son navigateur qui importe et donne quelques encouragements à poursuivre dans l’aride voie du Javascript !
On va voir donc comment se bluffer soit même en commençant par les principes les plus faciles de manipulation et du filtrage à l’aide de la librairie jQuery.
Charger jQuery depuis le CDN de google
Par facilité et paresse, on va charger le librairie jQuery directement depuis le CDN (Content Distribution Network) de google qui gracieusement met à disposition la librairie jQuery depuis ses serveurs. Les performances des serveurs de Google seront à coup sûrs meilleurs que n’importe lequel des hébergements.
Deux solutions s’offrent à vous :
- Soit vous inscrire pour obtenir une API Key afin d’avoir l’autorisation d’utiliser le CDN de google
- Soit d’utiliser directement les éléments par Google en personne dans ces nombreux exemples avec jQuery
On choisit la deuxième méthode, plus facile….
Si vous choisissez de vous inscrire, il faudra déclarer un nom de domaine par exemple http://social.hecube.net/ et vous obtiendrez une clé de ce type
ABQIXXCCe-06-OL6sTKBMYSHQQpzsRR7boKB_9drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ
Insertion complète à placer entre les balises ... de votre page pour tirer profit de jQuery depuis le CDN de Google
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIXXCCe-06-OL6sTKBMYSHQQpzsRR7boKB_9drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Insertion avec la méthode proposée par Google
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAe-06-OL7sTKBMYSHQQpzsRR7boKB_8drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ"></script>
<script type="text/javascript">
/*
* How to load jQuery with google CDN
*/
google.load("jquery", "1");
</script>Utiliser jQuery
Une fois, la librairie jQuery chargée via le CDN de Google, on va pourvoir manipuler quelques éléments HTML genre div, ul, li.
On a dénombré 14 exemples de filtrage et de sélection avec jQuery, utilisant la plupart des fonctions natives de jQuery telles que addClass, siblings(), next(), prev()… etc.
Une illustration du résultat produit dans la cas numéro 2
Voici le fichier HTML qui résume toutes les manipulations sur deux listes contenant : Légumes et Fruits, Animaux.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo jQuery hecube</title>
<meta name="author" content="Social hecube">
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var filExemple = {
ready : function() {
$("a").click(filExemple.findElts);
},
// fonction de recherche des éléments
findElts : function($e)
{
$e.preventDefault();
$("*").removeClass("Rose");
// les différents cas de recherche
switch (this.id)
{
case "filFindLi":
{
// Trouver tous les li dans ul
$("ul").find("li").addClass("Rose");
break;
}
case "filSibLi":
{
$("li#filPomm").siblings().addClass("Rose");
break;
}
case "filNext":
{
$("li#filRais").next().addClass("Rose");
break;
}
case "filPrev":
{
$("li#filLait").prev().addClass("Rose");
break;
}
case "filNextAll":
{
$("li#filLou").nextAll().addClass("Rose");
break;
}
case "filPrevAll":
{
$("li#filLou").prevAll().addClass("Rose");
break;
}
case "SelectLeg":
{
$("li#filRais").prevAll("li.filLeg").addClass("Rose");
break;
}
case "filParents":
{
$("li#filLait").parents("div#filSelection").addClass("Rose");
break;
}
case "filParent":
{
$("li").parent("ul").addClass("Rose");
break;
}
case "filChildren":
{
$("div.Liste").children("h4").addClass("Rose");
break;
}
case "filNot":
{
$("ul li").not("li.filLeg").addClass("Rose");
break;
}
case "filSlice":
{
$("ul#filAnimaux li").slice(2, 4).addClass("Rose");
break;
}
case "filAdd":
{
$("ul#filAnimaux li").add("li#filPoti, li#filEndi").addClass("Rose");
break;
}
case "filEq":
{
$("ul li").eq(12).addClass("Rose");
break;
}
}
}
};
$(document).ready(filExemple.ready);
</script>
<style>
body {
font: 16px sans-serif;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 200px;
}
li {
padding: 3px;
margin: 3px;
}
div.Liste {
float: left;
margin: 0 20px;
}
div#Select {
clear: left;
padding: 10px;
}
.Rose {
border: 1px solid #666666;
background: #F6177B;
color:#fff;
}
div#filSelection {
overflow: hidden;
}
</style>
<!-- Date: 2011-05-07 -->
</head>
<body>
<!-- begin --><div id="filSelection">
<div class="Liste">
<h4>Légumes et Fruits</h4>
<ul id="filLegumesFruits">
<li class="filLeg" id="filPoti">Potiron</li>
<li class="filLeg" id="filEndi">Endives</li>
<li class="filLeg" id="filLait">Laitue</li>
<li class="filLeg" id="filPomm">Pomme de terre</li>
<li class="filFruits">Poire</li>
<li class="filFruits">Cerise</li>
<li class="filFruits" id="filRais">Raisin</li>
<li class="filFruits">Combava</li>
</ul>
</div>
<div class="Liste">
<h4>Animaux</h4>
<ul id="filAnimaux">
<li id="filPou">Poulet</li>
<li id="filVac">Vache</li>
<li id="filTig">Tigre</li>
<li id="filLou">Loup</li>
<li id="filEle">Éléphant</li>
</ul>
</div>
</div>
<div id="Select">
<ol>
<li><a href="#" id="filFindLi">Sélectionner toutes les balises <code>li</code> à l'intérieur de la balise <code>ul</code>.</a></li>
<li><a href="#" id="filSibLi">Sélectionner toute la parenté de la balise contenant l'id filPomm.</a></li>
<li><a href="#" id="filNext">Sélectionner la balise <code>li</code> <b>suivant</b> la balise <code>li</code> contentant l'id filRais à savoir <b>Combava</b></a></li>
<li><a href="#" id="filPrev">Sélectionner la balise <code>li</code> <b>précédente</b> la balise <code>li</code> contenant l' id filLait à savoir <b>Endives</b>.</a></li>
<li><a href="#" id="filNextAll">Sélectionner toute la parenté après la balise contenant l'id filLou.</a></li>
<li><a href="#" id="filPrevAll">Sélectionner toute la parenté avant la balise contenant l'id filLou</a></li>
<li><a href="#" id="SelectLeg">Sélectionner exclusivement les balises <code>li</code> contenant l'id filLeg à partir de la balise contenant l'id filRais</a>
<li><a href="#" id="filParents">Sélectionner toute la parenté de l'élément <code>div</code> avec l'id filSelection.</a>
<li><a href="#" id="filParent">Sélectionner toute la parenté des éléments <code>ul</code> c'est à dire tous les <code>li</code>.</a>
<li><a href="#" id="filChildren">Sélectionner les balises <code>h4</code> au sein des éléments <code>div</code> qui possèdent la classe Liste.</a>
<li><a href="#" id="filNot">Sélectionner tous les éléments <code>li</code> au sein des balises <code>ul</code>, à l'exception des <code>li</code> dont la classe est filLeg.</a>
<li><a href="#" id="filSlice">Sélectionner tous les éléments <code>li</code> compris entre Vache et Éléphant.</a>
<li><a href="#" id="filAdd">Sélectionner tous les <code>li</code> dans la liste des animaux et ajouter les <code>li</code> contenant les classes filPoti et filEndi à savoir <b>Potiron</b> et <b>Endives</b>.</a>
<li><a href="#" id="filEq">Sélectionner uniquement le dernier <code>li</code> à savoir <b>Éléphant</b>.</a>
</ol>
</div><!-- //end -->
</body>
</html>En savoir plus
CDN, développement, fonction, Google, Javascript, jQuery, méthode, plugin
15 avril 2011 dans Création de site web, Flash, Actionscript, Flex, Flex, Framework, Image, Graphisme, Photoshop, Ruby on Rails, Référencement, SEO, Technologie, Tutoriaux, Webdesign par Bruno Flaven
Pour peu que l’on s’intéresse au webdocumentaire et c’est notre cas dans la cadre de nos activités pour le compte de 3WDOC, on croise de plus en plus de de réalisations faites à l’aide sous Gaia Framework. Comme tout bon framework, cela permet des gains substantiels en terme de production et l’intégration d’un certain nombre de fonctionnalités qui facilite le processus de création.
Les avantages immédiats de Gaia
Ils sont nombreux à première vue :
- Steven Sacks a notamment repris les concepts de Route and Scaffolding, présents dans le Ruby on Rails.
- L’ensemble du projet est piloté par un xml
- Le framework Gaia intègre de très nombreuses autres librairies complémentaires et indispensables à tout bon projet en Flash.
Liste des librairies complémentaires jointes à Gaia
- GreenSock, http://www.greensock.com/
- SWFAddress, http://www.asual.com/swfaddress/
- SWFObject, http://code.google.com/p/swfobject/
- flash-thunderbolt, http://code.google.com/p/flash-thunderbolt/wiki/ThunderBoltAS3
- osflash-xray, http://code.google.com/p/osflash-xray/
Gaia is an open-source front-end Flash Framework for AS3 and AS2 designed to dramatically reduce development time.
Un problème d’installation
Le framework s’installe à l’aide de l’adobe extension manager, ensuite le panneau de Gaia sera disponible via le chemin Window > Other Panels > Gaia Framework.
Il est possible que vous rencontriez des problèmes à l’installation si votre poste est dans une langue autre que l’anglais.
Problème d’accès au panel sur le forum
Source : Forum gaia flash framework
Il faut déjà mettre à jour l’ Extension Manager CS4 2.1 Patch
Source : http://www.adobe.com/exchange/em_download/em20_download.html
A ce jour la solution semble de modifier manuellement les fichiers installés par l’Adobe Extension Manager, en tous les cas c’est ce que nous avons fait.
Le problème vient si vous possédez deux langues sur votre ordinateur par exemple votre ordinateur est en Français et le logiciel Flash est en anglais.
/Users/[your username]/Library/Application Support/Adobe/Flash CS4/en/Configuration/
/Users/[your username]/Library/Application Support/Adobe/Flash CS4/fr/Configuration
L’ensemble des fichiers et des répertoires GaiaFramework à déplacer sont les suivants :
/Users/[your username]/Library/Application Support/Adobe/Flash CS4/fr/Configuration/GaiaFramework/
/Users/[your username]/Library/Application Support/Adobe/Flash CS4/fr/Configuration/Extensions/
/Users/[your username]/Library/Application Support/Adobe/Flash CS4/fr/Configuration/Commands/Gaia Test Project.jsfl
/Users/[your username]/Library/Application Support/Adobe/Flash CS4/fr/Configuration/WindowSWFGaia Framework.swf
1. Créer son projet
Il s’agit de choisir les paramètres généraux du projet comme le nom, la taille, la version de flash et l’arborescence du projet.
En l’espèce, on va donner les propriétés suivantes à notre projet :
- Nom du projet : Test hecube 1
- Taille du projet : 1024 x 768
Le reste de notre projet reste sur les paramètres définis par défaut par Gaia Framework lui-même.
Il faut sélectionner un répertoire dans lequel vous allez gérer l’ensemble des fichiers de votre projet. Nous avons choisi de nommer notre répertoire testhecube1 dans lequel nous allons placer un répertoire qui contiendra notamment les medias que nous avons décidé d’utiliser. Une fois crée le répertoire, Gaia va se comporter un peu à la manière de Ruby On Rails et de la commande rails myapplication qui permet de générer tous les fichiers nécessaires à une application.
Au terme de cette première étape, vous avez tous les éléments indispensables au bon fonctionnement de votre projet sous Gaia. On va donc ensuite tirer profit de la fonction de “Scaffolding” qui a beaucoup impressionné en son temps dans les démonstrations RoR (Ruby On Rails).
2. Utiliser la fonction de “Scaffolding”
Cette action va créer pour vous, tous les .fla et .swf que vous souhaitez en se basant directement sur ce vous aurez modifier dans votre fichier. /bin/xml/site.xml
Notre intention est de créer un site avec les entrées suivantes : Home, Blog, Porfolio, Contact.
2.1 Tirer profit des classes du gaia framework
Premièrement, pour tirer profit des “classes” présentes dans le package com.gaiaframework.templates, il faut compléter, dans le volet “Scaffold”, le champs “Class Package”. Il faut entrer quelque chose de la forme com.Nom_du_Projet.pages. Dans notre cas, on opte pour la ligne suivante :
2.1 Modifier le fichier site.xml
Deuxièmement, il vous reste à modifier le fichier site.xml qui décide de la topologie de votre site. Dans notre cas, le fichier va donc être de la forme suivante :
<?xml version="1.0" encoding="UTF-8"?>
<site title="Gaia Framework Site: %PAGE%" menu="true">
<page id="index" src="index.swf">
<page id="nav" src="nav.swf" depth="top">
<page id="home" title="Home" src="home.swf" menu="true" />
<page id="blog" title="Blog" src="blog.swf" menu="true" />
<page id="porfolio" title="Porfolio" src="porfolio.swf" menu="true" />
<page id="contact" title="Contact" src="contact.swf" menu="true" />
</page>
</page>
</site>Une fois le fichier site.xml modifié, il faut cliquer à nouveau sur le bouton “Scaffold Project”. Cette action permet la création automatique de toutes les .fla et .swf supplémentaires.
3. Publication des .fla à nouveau
Vous pouvez ensuite modifier les fichiers .fla afin de les modifier graphiquement et après chaque modification publiée à nouveau tous les fichiers ou sélectionner uniquement les fichiers qui ont été modifiés.
Une excellente vidéo d’introduction à Gaia par l’auteur Steven Sacks lui-même
FITC Toronto: Gaia Framework for Adobe Flash video
En savoir plus
actionscript, AS2, AS3, Flash, Framework, Gaia Framework, rich-media, Ruby on Rails, Scaffolding, Steven Sacks, Webdocumentaire
2 avril 2011 dans Création de site web, Ecommerce, Framework, Google, Javascript, Ajax, Marketing Web, Référencement, SEO, Statistiques et Tracking, Technologie, Tutoriaux, jQuery par Bruno Flaven
Il existe plusieurs façons d’utiliser l’API de Google Analytics afin de tracer les _trackEvent auquel par exemple vous aurez recours pour mesurer le trafic sur certains des liens significatifs de votre site, les boutons, les liens vers vos comptes sur Facebook ou Twitter par exemple. Dans cet article, on verra rapidement la méthode proposée par Google. Méthode qui fait l’affaire dans bien des cas. Dans un deuxième temps, on verra une manière plus élégante de travailler le même système de tracking avec le célébrissime framework javascript jQuery. En effet, il est toujours préférable d’éviter le “surcodage”, proposé par google lui-même, sur les liens et de trouver un plugin ou une méthode à l’aide jQuery qui remplisse automatiquement la tâche ingrate de récolter les données.
Passer en mode asynchrone pour Google Analytics
C’est assez simple, il suffit de changer le snippet que vous avez collé dans l’ensemble de vos pages à une différence, c’est que le snippet doit être inséré à la toute fin de la section <head>, après tout autre script éventuellement utilisé par vos pages. Tradictionnemenment, le snippete était collé avant juste avant </body>.
<!-- la fin de la section head -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>Quelques-uns des bénéfices du mode asynchrone de Google Analytics selon Google en peronne
The latest version of the Analytics tracking code offers an improved way to track website visitors with Google Analytics. It takes advantage of browser support for asynchronous JavaScript to enhance the speed in which the tracking code is loaded. With the latest version of the tracking code, you can also place the Analytics snippet higher in the page without delaying subsequent content from rendering.
Source : http://code.google.com/intl/fr/apis/analytics/docs/tracking/asyncMigrationExamples.html
Utiliser le code de Google Analytics pour le tracking des événements
Une fois que vous avez marqué vos pages avec le snippet asynchrone, il ne vous reste qu’à placer dans vos pages autant de fonctions _trackEvent(category, action, opt_label, opt_value)sur les liens que vous voulez tracker.
<a href="#" onClick="_gaq.push(['_trackEvent', 'MaCat', 'action-1', 'Desc action-1']);">Lien action-1</a>
Les explications de google concernant les paramètres à passer pour la fonction _trackEvent
category (required)
The name you supply for the group of objects you want to track.
action (required)
A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
label (optional)
An optional string to provide additional dimensions to the event data.
value (optional)
An integer that you can use to provide numerical data about the user event.
Source : Les paramètres de _trackEvent()
http://code.google.com/intl/fr-FR/apis/analytics/docs/gaJS/gaJSApiEventTracking.html#_gat.GA_EventTracker_._trackEvent
Toutefois, afin d’éviter toute pollution intempestive de votre code par du code javascript et d’éviter à avoir marqué manuellement tous vos liens. Vous pouvez décider d’utiliser le framework jQuery pour vous faciliter dans cette tache de marquer chacun des boutons de votre site.
Utiliser un plugin ou un script jQuery pour le tracking des événements
Le Plugin Google Analytics jQuery
C’est un des plugins plus simples à mettre en place. Pour installer ce plugin Google Analytics jQuery Plugin, il vous suffit de charger le script du plugin dans votre page, ainsi que le script de la librairie jQuery. Il ne vous reste qu’à compléter par votre Google Analytics ID UA-XXXXXXXX-X.
Il n’est pas nécessaire de taguer vos pages de manière asynchrone, le plugin s’en charge de vous installer le snippet. Il ne vous reste qu’à placer et à paramétrer les événements que vous souhaitez tracker. Le tout est placé entre les balises <head></head>
Il reste enfin à définir les éléments à tracker à l’aide la fonction suivante : $.ga.trackEvent(category, action, opt_label, opt_value); rendu disponible par le plugin. Vous avez par ailleurs à disposition toutes les fonctions de l’API Google Analytics commençant par un _
Current list of methods that this plugin automatically binds on to: (This is not the ultimate list. The plugin binds on to all functions that begin with an underscore “_”.)
<script src="le_chemin_vers_script/jquery.js" type="text/javascript"></script>
<script src="le_chemin_vers_script/jquery.ga.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$.ga.load("UA-XXXXXXXX-X", function(pageTracker) {
// Un exemple de paramétrage du plugin jquery.ga.js
pageTracker._setDomainName(".votresite.com");
// Pour permettre le suivi des utilisateurs entre domaines.
pageTracker._setAllowLinker(true);
// Pour suivre les comportements des utilisateurs sur plusieurs sous-domaines
pageTracker._setAllowHash(true);
});
/* Tous les liens commençant par http, mais qui ne contiennent pas le domaine du document votresite.com
*/ $("a[href^=http]:not([href*='votresite.com'])").click(function(){
$.ga.trackEvent( 'externe', 'click', this.href);
});
});
</script>Source : http://www.shamasis.net/projects/ga/#usage
Il existe plein d’autres plugins pour tagguer vos pages à l’aide de jQuery ainsi que d’autres scripts. On vous en donne un apercu dans l’ensemble des liens ci-dessous. Il y a d’évidence de quoi trouver votre bonheur ou des idées pour personnaliser votre script de tracking d’événements jQuery pour Google Analytic.
En savoir plus
Informations sur le fonctionnement de Google Analytics
Firebug, FireQuery
D’autres ressources sur Google et jQuery
Async Tracking, événements, Event, expert, Google Analytics, jQuery, plugin, script, snippet, statistiques
21 mars 2011 dans CMS, Création de site web, Divers, Google, Hébergement, Javascript, Ajax, Marketing Web, Technologie, Tutoriaux, Widget, Gadget par Bruno Flaven
Le cercle vertueux suscité par l’App Store d’Apple a fait des émules quant à son modèle de création et de distribution d’applications sur le Web. Avec l’irruption en force des navigateur Chrome Web et de Firefox, on voit tout naturellement se profiler à l’horizon une plate-forme de distribution d’extensions fonctionnelles en vue d’accroître les capacités du navigateur. Pour Chrome, c’est le Google Chrome Web Store, c’est à cette plate-forme et à la relative facilité de création d’applications que notre article est consacré.
Il est sans doute important de retenir deux informations essentielles concernant cette révolution technologique en train de naitre :
- Cet écosystème d’applications va à terme se substituer aux programmes installés sur votre machine, sur le “desktop” en s’appuyant ostensiblement sur le Cloud Computing.
- Le marché de la création de site a toutes les chances d’être litteralment atomisé, laminé par l’apparition de ces nouvelles plate-formes. Le paradigme n’est plus d’avoir un site sous un CMS ou pas, la priorité est d’avoir une API capable de se greffer à toutes ses plates-formes existantes et futures qui font du navigateur, le logiciel à tout faire et l’interface unique pour atteindre l’utilisateur final, en somme le nouveau système d’exploitation de la prochaine décennie.
Pour se familiariser avec le Cloud Computing, vous pouvez vous reporter à un de nos précédents articles qui traite de la menace écologique que peut constituer le cloud computing mais en présente aussi les avantages.
Créer un extension
La première chose à faire est de créer ce que google nomme un manifest file qui sera une sorte de descriptif de ce que votre webapp sera. Un classique en programmation. Par analogie, pour ceux d’entre vous qui connaissent le développement de module sous Drupal par exemple cela équivaut au fichier .info
Il existe deux variables importantes à retenir : elles doivent impérativement être présentes dans votre fichier “manifest” au format .json
“web_url”
Specifies the page that the browser shows when a user launches the app.
“urls”
Specifies the starting URLs of all other web pages that are in the app. In this example, both http://mysubdomain.example.com/page1.html and http://mysubdomain.example.com/subdir/page2.html would be in the app. You don’t need to specify the URLs for included files or for assets such as images. Currently, the domain name must be followed by at least one character (”/”).
Pour information, dans un fichier .json, vous êtes en javascript, vous pouvez donc placer des commentaires pour expliciter votre code.
/* ceci est une première façon de faire un commentaire */
// ceci est une deuxième façon de faire un commentaire
La version du JSON effectivement publiée, cette fois-ci sans les commentaires.
C’est un pré-requis pour publier sur la plate-forme.
{
"name": "3wdoc Test App 1",
"description": "3WDOC Studio will come soon !",
"version": "0.0.0.1",
"icons": {
"128": "3wdoc_128.png"
},
"app": {
"urls": [
"http://www.3wdoc.com/"
],
"launch": {
"web_url": "http://www.3wdoc.com/"
}
}
}Le fichier image 3wdoc_128.png
Charger votre extension
Pour cela, il suffit de vous rendre dans le panneau des extensions de Google Chrome. Cette accès se trouve généralement à droite de la barre d’adresse et est symbolisé par une clé anglaise. Vous accédez au panneau des extensions de Google Chrome et vous choisissez de cliquer sur le bouton
Charger l'extension non empaquetée
Empaqueter votre extension
Vous accédez au panneau des extensions de Google Chrome et vous choisissez de cliquer sur le bouton
Empaqueter l'extension.
Il faut sélectionner le répertoire contenant votre extension
Une fois l’opération terminée, vous possédez deux fichiers .pem et .crx
L’extension de fichier .crx est une extension liée au navigateur Google Chrome. Ce fichier est une sorte de fichier d’archive. Il n’est utile que si vous publiez votre extension en utilisant le Chrome Developer Dashboard ou encore lorsque vous souhaitez distribuer une version non-public, par exemple, pour les testeurs alpha de votre fichier .crx.
Quant au fichier .pem, il contient la clé privée, qui vous sera utile pour les mises à jour ultérieures de votre webapplication sur Chrome Webstore.
Source : http://code.google.com/chrome/extensions/packaging.html
Créer une webapp
C’est l’étape suivante, elle consiste essentiellement à faire un fichier zip de votre répertoire. Deux choses importantes avant de vous lancer dans l’envoie de votre fichier .zip contenant votre web application Google Chrome Webstore.
- Il est important d’enlever l’ensemble de vos commentaires du fichier
.json qui sert de base à votre webapplication. C’est ce fichier qui sera placé sur la plate-forme Google Chrome Webstore.
- Il faut pour publier votre webapp que le nom de domaine attaché à votre webapp soit vérifié par Google. C’est à dire que Google s’assure que vous êtes bien le titulaire de ce nom de domaine.
Un mode de vérification possible pour attester de la propriété du domaine : Il vous suffit d’insérer une balise meta dans le fichier index de votre site
<meta name="google-site-verification" content="a_jk_98-anKDojGPC9t9JKcHEs8mjqH4oVsPvB-Plls" />
Faire sa page sur le Google Chrome Webstore
Il faut se rendre ensuite cette adresse, dans le tableau de bord que met à votre disposition Google :
https://chrome.google.com/webstore/developer/dashboard
Il faudra ensuite au minimum choisir une langue et envoyer au moins une capture d’écran de votre application. La taille de l’image doit faire 400x275 en pixels.
Si vous souhaitez personnaliser plus encore cette page, vous pouvez ajouter un en-tête spécifique de la taille suivante 570x275 en pixels.
N’oubliez pas d’enlever les commentaires du fichier .json
N’oubliez pas de faire valider votre nom de domaine au préalable
Quelques personnalisation possibles de votre page : une capture d’écran de votre application en 400x275 pixels
Quelques personnalisation possibles de votre page : un en-tête spécifique de 400x275 pixels
Quelques vidéos
4 vidéos plutôt synthétiques sur des points essentiels pour créer une bonne webapp sur le Google Chrome Webstore.
- VIDEO 1 - Une bonne introduction au développement sur le coeur applicatif des google app. C’est en python forcément !
- VIDEO 2 - Une réponse essentielle à la question mais qu’est qu’une web app ?
- VIDEO 3 - Les gestes qui sauvent pour créer sa première extension pour Chrome !
- VIDEO 4 - Pas à pas la dernière étape de publication d’une web app sur le Google Chrome Webstore
VIDEO 1 - Developing and deploying an application on Google App Engine
VIDEO 2 - Chrome Web Store - What’s a web app?
VIDEO 3 - Google Chrome Extensions: How to build an extension
VIDEO 4 - How to upload your webapp to the chrome webstore : 5 mn
En savoir plus
Tutorial: Getting Started
http://code.google.com/intl/fr-FR/chrome/webstore/docs/get_started_simple.html
Formats: Manifest Files
http://code.google.com/chrome/extensions/manifest.html
Un aperçu sur le format JSON
http://www.xul.fr/ajax-javascript-json.html
How To Create Your Own Chrome Web Apps
http://www.vikitech.com/2398/create-chrome-web-apps
Get Started with the GWT SDK
http://code.google.com/intl/fr-FR/webtoolkit/gettingstarted.html
CRX Package Format
http://code.google.com/chrome/extensions/crx.html
Samples of webapp provided by Google
http://code.google.com/chrome/extensions/samples.html
Create your own Google Chrome web apps
http://tekkidd.tumblr.com/post/2646163763/create-your-own-google-chrome-web-apps
Un benchmark des meilleurs applications selon Mashable, 10 Chrome Web Apps to Check Out
http://mashable.com/2010/12/07/chrome-web-apps-roundup/
Hosted Apps
http://code.google.com/intl/fr-FR/chrome/apps/docs/developers_guide.html
Les plus récentes “success stories” sur les applications réussies sur la plate-forme Chrome
http://www.google.com/intl/en/landing/chrome/webstore/create/success-stories.html
Le tableau de bord pour le développement. Indispensable.
https://chrome.google.com/webstore/developer/dashboard
Mozilla : Web Applications, l’autre écosystème d’applications. Attention, c’est de l’Open Source pure jus…
https://apps.mozillalabs.com/
Le Chrome Webstore de google
https://chrome.google.com/webstore
Chrome Web Store : ajoutez des fonctions à votre navigateur Chrome
http://www.memoclic.com/1692-google-chrome/13325-chrome-web-store.html
.info, Chrome, Clicker.TV, cloud computing, Crackle, Drupal, extension, Google, Graphic.ly, HuffingtonPost NewsGlide, javacsript, json, Manifest, MOG, New York Times, SlideRocket, Sports Illustrated, Springpad, TweetDeck, Webapplication, Webstore
9 mars 2011 dans CMS, Création de site web, Mac, Meilleurs blogs, PHP, MYSQL, Technologie, Wordpress par Bruno Flaven
Il est certain que choisir WordPress comme CMS pour un site professionnel nécessite de se préoccuper un peu de la sécurité de votre futur site. Sans tomber dans l’excès en affirmant qu’il faut au mieux 100% de sécurité ce qui on le sait est infaisable quel que soit le CMS choisi, on peut avoir grâce à cette sélection de plugins une plus grande lisibilité sur les enjeux de sécurité et une meilleure idée sur les quelques mesures pour parer à toutes éventualités afin de dormir sur vos deux oreilles.
Bien évidemment, il faut autant que faire se peut mettre à jour votre WordPress et de ne pas laisser s’écouler un temps infini entre les différentes sorties de Wordpress. Pourquoi ? Car chaque nouvelle version livrée de WP amène son lot d’améliorations et d’avancées en terme de sécurité notamment.
1. WP Security Scan
Ce plugin vous permet de voir l’état général de votre WP en terme de sécurité ainsi que la plate-forme sur laquelle vous faites tourner votre WP. Il est probable que vous puissiez connaitre des ratés si vous êtes sur une plate-forme d’hébergement mutualisée car vous êtes susceptibles de ne pas voir tous les droits en lecture et en écriture sur le serveur notamment.
Une des recommandations que fait le plugin est de changer le prefix par défaut des tables WP wp_. Il vous propose de la faire en conseillant au préalable de faire un backup de votre base de données, sage précaution !
Le petit résumé produit par le plugin WP Security Scan
WordPress version: 3.1 You have the latest stable version of WordPress.
Your table prefix should not be wp_. Click here to change it.
Your WordPress version is successfully hidden.
WordPress DB Errors turned off.
WP ID META tag removed form WordPress core
“admin” user exists.
The file .htaccess does not exist in wp-admin/.
Source : http://wordpress.org/extend/plugins/wp-security-scan/
2. WordPress Exploit Scanner
Un plugin qui sans dommage pour les fichiers, le code…etc. parcourt l’intégralité de votre WP afin d’en relever toutes les anomalies offrant potentiellement des failles de sécurité. Ces informations pour une plus grande clarté et lisibilté sont ensuite classées en 3 niveaux de sécurité :
- Level Severe (14 matches)
- Level Warning (11 matches)
- Level Note (161 matches)
Intéressant et pratique pour notamment mesurer la dangerosité et la faiblesse d’un thème ou d’un plugin développé avec les pieds ! Ne pas non plus tomber dans la paranoïa car le plugin WordPress Exploit Scanner lui-même induit ces propres failles de sécurité mais au moins il vous en informe…
| Location / Description |
What was matched |
| wp-content/plugins/wp-security-scan/simplepie.inc:12488 |
Used by malicious scripts to decode previously obscured data/programs $data = base64_decode($data); |
Source : http://wordpress.org/extend/plugins/exploit-scanner/
3. WordPress File Monitor
Efficace et peu gourmand, ce plugin de Matt Walters (http://mattwalters.net/) fait bien son boulot et vous informe proprement des ajouts ou des suppressions de fichiers. On peut voir que toutes modifications de fichiers présents dans votre WordPress vous est automatiquement signalés par mail ou dans un fichier de log. Dans le rapport ci-dessous, nous venons de désinstaller 3 plugins et d’installer le plugin WordPress File Monitor en question.
This email is to alert you of the following changes to the file system of your website at http://127.0.0.1/wordpress_2_9_2_en/wordpress
Timestamp: Wed, 09 Mar 2011 09:35:23 +0000
Added:
wp-content/plugins/.DS_Store
wp-content/plugins/wordpress-file-monitor/.DS_Store
Removed:
wp-content/plugins/wp-security-scan/database.php
wp-content/plugins/wp-security-scan/functions.php
wp-content/plugins/wp-security-scan/lock.png
wp-content/plugins/wp-security-scan/password_tools.php
wp-content/plugins/wp-security-scan/readme.txt
wp-content/plugins/wp-security-scan/scanner.php
wp-content/plugins/wp-security-scan/screenshot-1.jpg
wp-content/plugins/wp-security-scan/screenshot-2.jpg
wp-content/plugins/wp-security-scan/scripts.js
wp-content/plugins/wp-security-scan/securityscan.php
wp-content/plugins/wp-security-scan/simplepie.inc
wp-content/plugins/wp-security-scan/style.css
wp-content/plugins/wp-security-scan/support.php
wp-content/plugins/wp-security-scan/js/scripts.js
wp-content/plugins/wp-security-scan/images/bt.gif
wp-content/plugins/wp-security-scan/images/iblogpro.jpg
wp-content/plugins/wp-security-scan/images/pagelines.jpg
wp-content/plugins/wp-security-scan/images/whitehouse.jpg
wp-content/plugins/wp-fb-fan-box/readme.txt
wp-content/plugins/wp-fb-fan-box/screenshot-1.png
wp-content/plugins/wp-fb-fan-box/screenshot-2.png
wp-content/plugins/wp-fb-fan-box/wp-fb-fan-box-id_ID.mo
wp-content/plugins/wp-fb-fan-box/wp-fb-fan-box-id_ID.po
wp-content/plugins/wp-fb-fan-box/wp-fb-fan-box.mo
wp-content/plugins/wp-fb-fan-box/wp-fb-fan-box.php
wp-content/plugins/wp-fb-fan-box/wp-fb-fan-box.po
wp-content/plugins/exploit-scanner/exploit-scanner.php
wp-content/plugins/exploit-scanner/hashes-3.0.1.php
wp-content/plugins/exploit-scanner/hashes-3.0.2.php
wp-content/plugins/exploit-scanner/hashes-3.0.3.php
wp-content/plugins/exploit-scanner/hashes-3.0.4.php
wp-content/plugins/exploit-scanner/hashes-3.0.5.php
wp-content/plugins/exploit-scanner/hashes-3.0.php
wp-content/plugins/exploit-scanner/hashes-3.1.php
wp-content/plugins/exploit-scanner/loader.gif
wp-content/plugins/exploit-scanner/readme.txt
Changed:
.DS_Store
wp-content/.DS_Store
Source : http://wordpress.org/extend/plugins/wordpress-file-monitor/
En savoir plus
Le plugin WP Security Scan
http://wordpress.org/extend/plugins/wp-security-scan/
Le plugin WordPress Exploit Scanner
http://wordpress.org/extend/plugins/exploit-scanner/
Le plugin WordPress File Monitor
http://wordpress.org/extend/plugins/wordpress-file-monitor/
Le mot-clé security sur la base de plugins WP
http://wordpress.org/extend/plugins/tags/security
Le mot-clé monitor sur la base de plugins WP
http://wordpress.org/extend/plugins/tags/monitor
Une présentation sur la sécurité sous WP
http://www.slideshare.net/williamsba/wordpress-security-1709496
faille, monitoring, MySQL, PHP, plugin, sécurité, SQL, Wordpress
31 janvier 2011 dans CMS, Création de site web, Drupal, Image, Graphisme, Photoshop, Joomla, Virtuemart, Meilleurs blogs, PHP, MYSQL, Technologie, Tutoriaux, Webdesign, Wordpress, XHTML CSS par Bruno Flaven
On continue dans l’exploration des nouveautés dans le monde du CMS open-source c’est à dire bâti autour de PHP-MySQL. Des CMS naissants qui pourraient faire la nique dans quelques années, mois, semaines, jours au triptyque de CMS gagnants que sont : Worpdress, Drupal, Joomla. On avait commencé par Concrete5, on continue avec SilverStripe.
Les critères de sélection
Pour mémoire, la sélection s’est faite sur des critères vraiment basiques, trop peut-être pour des développeurs aguerris mais que vaut la beauté du code au regard du résultat graphique produit par un site, de l’expérience utilisateur et de la courbe d’apprentissage ultra rapide dans la gestion d’un site. Les voici.
- Scriptiquement parlant, faire un site, basé sur le tandem PHP-MySQL
- Possiblement hébergement sur un serveur mutualisé
- Avec un temps d’apprentissage limité pour publier un page ou une galerie de photos par exemple
- Et pour finir quelques possibilités de personnalisation graphique afin d’éviter que le site ressemble à celui du voisin
Il ne restera désormais sur la liste que Frog CMS, qui est toujours en attente d’un comparatif.
Une définition de SilverStripe
Notre choix s’est porté sur SilverStripe car c’est à la fois un CMS et un framework PHP. Ce qui soit dit en passant à tous les avantages et/ou les inconvénients de l’un et de l’autre ! C’est un peu comme si on réunissez : Wordpress et Kohana ou Drupal et CodeIgniter…
Pour en savoir un peu plus sur nos deux frameworks favoris chez Hecube.net : Kohana et CodeIgniter. Reportez aux articles précédents de ce blog.
SilverStripe is a PHP CMS built with Sapphire framework, and it uses MVC design pattern. you can view example sites that built with SilverStripe from the official webpage.
Source: http://silverstripe.org/home/
On va faire les test sur SilverStripe-v2.4.4 en local sur MAMP.
Installation de SilverStripe
On va faire les test sur SilverStripe-v2.4.4 en local sur MAMP.
/Applications/MAMP/Library/bin/mysql -u root -p
# Création simultanée de la base sist_install
# et de l'utilisateur sist_install
CREATE USER 'sist_install'@'localhost' IDENTIFIED BY 'sist_install'; GRANT USAGE ON *.* TO 'sist_install'@'localhost' IDENTIFIED BY 'sist_install'WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0; CREATE DATABASE IF NOT EXISTS sist_install;GRANT ALL PRIVILEGES ON sist_install.* TO 'sist_install'@'localhost';
Installation de SilverStripe
Il vous donc au préalable créer la BDD sinon pas mal d’erreurs vont s’afficher sur la page d’installation. Un point intéressant, c’est lors de l’installation vous allez pourvoir configurer l’ensemble du site : Database, CMS Admin Account, Theme…etc. sur une page uniquement.
L’installation
Comme souvent dans un CMS, pour Joomla, il faut faire de même, on doit supprimer les fichiers ou le répertoire d’installation. Il faut tout supprimer manuellement install.php plutôt que de passer par le lien qui vous est proposé.
Surtout, n’oubliez pas de mettre un adresse email valide pour vous connecter au backend en temps qu’admin.
For security reasons you should now delete the install files, unless you are planning to reinstall later (requires admin login, see above). The web server also now only needs write access to the “assets” folder, you can remove write access from all other folders. Click here to delete the install files.
Exploration de l’administration de SilverStripe (backend)
Commençons par l’administration d’une page. On va modifier les pages qui sont livrées avec l’installation de SilverStripe.
En cas d’erreur, il existe une procédure de rollback comme sous WordPress qui permet de restaurer une version antérieure de votre page.
Pour voir les modifications, ne pas oublier de bien cliquer sur Save and Publish
Il existe des possibilité des batch action sur les pages, ce qui est pas mal lorsque vous devez effectuer une maintenance transversale sur tout votre contenu, par exemple changement du copyright en bas de page !
Gestion des médias et insertion d’une image dans une page
Il faut envoyer l’image, une fois dans votre gestionnaire de médias, vous pourrez l’insérer.
Insertion de l’image dans une page
Changer de thème pour votre site sous SilverStripe
Il est assez simple de cloner le thème par défaut pour ensuite l’accommoder à votre “sauce” webdesign. Dans notre cas, nous allons rapidement créer une thème du nom de hecube sur le base du thème qui est proposé par défaut blackcandy.
Les conseils données par SilverStripe pour créer facilement un thème
- Unpack the contents of the zip file into the themes directory in your SilverStripe installation.
- Change the site to the theme. You can do this either by:
- putting the following line in your ./mysite/_config.php: `SSViewer::set_theme("themename");`
- changing the theme in the Site Configuration panel in the CMS
Pour se faire, il faut copier le répertoire blackcandy, le renommer en hecube puis modifier la paramètres suivants :
On change les éléments dans les feuilles de style .css
* SIST Hecube Theme
* http://www.hecube.net
html {
/* background: #626467 url(../images/bg.gif) repeat; */
background-color: #dddddd;
}On modifie le thème chargé par défaut. Vous pouvez aussi le faire depuis l’admin.
le fichier est dans /SilverStripe/mysite/_config.php
// This line set's the current theme. More themes can be
// downloaded from http://www.silverstripe.org/themes/
/* SSViewer::set_theme('blackcandy'); */
SSViewer::set_theme('hecube');Pour information les fichiers SilverStripe par exemple Page.ss sont truffés de pseudo-tags. Ce qui facilite l’intégration si tant qu’on maitrise leurs variables comme sous Drupal par exemple.
<!DOCTYPE html>
<html lang="$ContentLocale">
<head>
<% base_tag %>
<title><% if MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> » $SiteConfig.Title</title>
$MetaTags(false)
<link rel="shortcut icon" href="/favicon.ico" />
<% require themedCSS(layout) %>
<% require themedCSS(typography) %>
<% require themedCSS(form) %>
<!--[if IE 6]>
<style type="text/css">
@import url(themes/blackcandy/css/ie6.css);
</style>
<![endif]-->
</head>
<body>
<div id="BgContainer">
<div id="Container">
<div id="Header">
$SearchForm
<h1>$SiteConfig.Title</h1>
<p>$SiteConfig.Tagline</p>
</div>
C’est un essai “quick and dirty”. Pour développer votre propre thème, reportez-vous à la documentation qui n’existe malheureusement qu’en anglais.
Source: http://doc.silverstripe.org/sapphire/en/topics/themes
Pour accéder à l’admin, il vous suffit d’ajouter /admin/ à la en racine de l’adresse de votre site dans un navigateur http://127.0.0.1/SilverStripe/admin/
En savoir plus
Auteur, CMS, Concrete5, contenu, Drupal, Frog CMS, Joomla, Multi-utilisateurs, SilverStripe, theme, utilisateurs, Wordpress
20 janvier 2011 dans CMS, Création de site web, Framework, Image, Graphisme, Photoshop, Javascript, Ajax, Meilleurs blogs, Technologie, Webdesign, Widget, Gadget, Wordpress par Bruno Flaven
Avoir des images et des galeries de photos sur son site s’impose comme un évidence comme la vidéo et l’audio d’ailleurs. L’utilisation de WP pour la publication de galeries est incroyablement aisée en grande partie grâce à son gestionnaire de médias. On a vu abondamment dans ce blog, le moyen d’accroitre encore les fonctionnalités de ce gestionnaire dans des articles précédents.
Quand est-il de l’”output” ? C’est à dire de la visualisation de ces images envoyés et publiées dans une galerie notamment, on avait déjà un peu abordé la question mais on y revient notamment parce que les bons plugins de visualisation sont difficiles à choisir.
Il y a de très nombreuses façons d’améliorer l’affichage des images et des galeries de photos sous WP en y intégrant des librairies javascript : jQuery ou FancyBox par exemple.
Voilà tout d’abord une sélection de plugins pour intégrer jQuery ou FancyBox dans la balise gallery notamment…
1. FancyBox for WordPress
Un excellent plugin qui utilise la version de FancyBox et bien mieux conçu que prettyphoto par exemple.
Source : http://wordpress.org/extend/plugins/fancybox-for-wordpress/
2. Lightbox Gallery
Même effets, même punition mais sans doute un grand au-dessous en terme de développement.
Source : http://wordpress.org/extend/plugins/lightbox-gallery/
Merci à Lucile pour cette petite sélection
Quelques ressources intéressantes pour aller plus loin
Tous les plugins ci-dessous tournent autour du concept d’insertion d’une librairies sous la forme d’un plugin et c’est vrai que sous WP, cela semble plus facile de disposer des ces effets sous la forme d’un thème car très souvent maintenant les librairies sont directement accessibles depuis le thème. C’est le cas par exemple des thèmes que nous développons pour hemotion.eu.
En savoir plus
1 janvier 2011 dans CMS, Création de site web, Divers, Drupal, Meilleurs blogs, PHP, MYSQL, Technologie, Tutoriaux, Webdesign, Wordpress, XHTML CSS par Bruno Flaven
Comme un plugin sous WordPress, un module Drupal a pour fonction d’étendre les fonctionnalités de votre CMS et de l’étendre dans le sens qui vous convient c’est à dire ne fonction des besoins de gestion de de contenu de votre site sous Drupal. Voici la définition simple et officielle de ce qu’est un module Drupal.
Une définition simple d’un module Drupal
A module is a collection of functions that link into Drupal, providing additional functionality to your Drupal installation. After reading this tutorial, you will be able to create a basic block module and use it as a template for more advanced modules and node modules.
Avant de se lancer dans la lecture de cet article et de se livrer à une expérience d’extreme coding :):). Un juste rappel de l’environnement de développement. Notre développement se fait sur une version de Drupal 5.14 et en local sur un MAMP. Pour installer MAMP sur Mac, reportez aux nombreux articles de ce blog. Vous pouvez réaliser la même opération sur un PC à l’aide de Easyphp.
Pour bien commencer
Il vous faudra créer un répertoire dans sites/all/modules/onthisdate. Il est possible que vous ayez à créer préalablement le répertoire sites/all/modules
Le chemin absolu de notre repertoire sera donc /Applications/MAMP/htdocs/DRUPAL_5_14/sites/all/modules/
Créer et placer un fichier PHP nommé onthisdate.module dans le répertoire nouvellement créé /Applications/MAMP/htdocs/DRUPAL_5_14/sites/all/modules/onthisdate/
Pourquoi dans ce répertoire comme il ne s’agit pas d’un core module mais d’un module de votre composition, il vous sera plus facile de faire les mises à jour des core modules sans écraser vos modules sur-mesure.
Selon les standards de coding de Drupal, vous devez commencer par la balise d’ouverture PHP complète au début de votre fichier <?php mais de ne pas faire de balise de fermeture type ?>
le code source de onthisdate.module est le suivant.
La string $Id$ n’est utile que si vous souhaitez comptabiliser la date et la version de votre module via un outil de gestion de version (CVS).
La définition officielle du _hook
All functions in your module that will be used by Drupal are named {modulename}_{hook}, where “hook” is a pre-defined function name suffix. Drupal will call these functions to get specific data, so having these well-defined names means Drupal knows where to look. We will come to hooks in a while.
On retrouve la même terminologie que dans le CMS WordPress.
Le code du fichier onthisdate.info
; $Id: blog.info,v 1.5 2007/06/08 05:50:53 dries Exp $
name = On this date
description = A block module that lists links to content such as blog entries or forum discussions that were created one week ago.
package = Non-Core - optional
version = VERSION
core = 5.x
; Test of module creation made by hecube.net
On peut rajouter du commentaire et/ou donner plus d’information dans des champs optionnels. Cela est toujours utile quand un autre développeur doit passer derrière, ne soyez jamais avare d’informations, c’est un fichier d’informations !
dependencies = module1 module2 module3
package = "Your arbitrary grouping string"
version = "$Name$"
Un complément d’informations sur les autres champs du .info
- Ne pas compléter
package fera que votre module sera classé une non catégorie ou la catégorie par défaut (Uncategorized).
- Si vous complétez le champs
dependencies, le module ne pourra être activé que si les “dependencies” requises sont installées par exemple CCK, Views
…etc.
Une partie du code source de onthisdate.module
La totalité du code est disponible en fin de cet article.
<?php
/* $Id$ */
/**
* Display help and module information
* @param section which section of the site we're displaying help
* @return help text for section
*/
function onthisdate_help($section='') {
$output = '';
switch ($section) {
case "admin/help#onthisdate":
$output = '<p>'. t("Displays links to nodes created on this date"). '</p>';
break;
}
return $output;
} // function onthisdate_help
/**
* Valid permissions for this module
* @return array An array of valid permissions for the onthisdate module
*/
function onthisdate_perm() {
return array('access onthisdate content');
} // function onthisdate_perm()
/**
* Generate HTML for the onthisdate block
* @param op the operation from the URL
* @param delta offset
* @returns block HTML
*/
function onthisdate_block($op='list', $delta=0) {
// listing of blocks, such as on the admin/block page
if ($op == "list") {
$block[0]["info"] = t("On This Date");
return $block;
} else if ($op == 'view') {
// our block content
// content variable that will be returned for display
$block_content = '';
// Get today's date
$today = getdate();
// calculate midnight one week ago
$start_time = mktime(0, 0, 0,$today['mon'],
($today['mday'] - 7), $today['year']);
// we want items that occur only on the day in question, so
//calculate 1 day
$end_time = $start_time + 86400;
// 60 * 60 * 24 = 86400 seconds in a day
$query = "SELECT nid, title, created FROM "."{node} WHERE created >= '".$start_time."' AND created <= '".$end_time."'";
// get the links
$queryResult = db_query($query);
while ($links = db_fetch_object($queryResult)) {
$block_content .= l($links->title,'node/'.$links->nid).'<br/>';
}
// check to see if there was any content before setting up the block
if ($block_content == '') {
// no content from a week ago, return nothing.
return;
}
// set up the block
$block['subject'] = 'On This Date';
$block['content'] = $block_content;
return $block;
}
}Créer une page de configuration du module
Une fois que notre module est activé, il ne nous reste plus qu’à créer une page de configuration pour notre module onthisdate où l’administrateur du site pourra définir les modalités de fonctionnement de son module bref le paramétrer.
On va créer une fonction onthisdate_admin mais il est à noter que _admin n’est pas un hook on aurait pu donc appeler notre fonction onthisdate_adminitration_parametrage par exemple.
Les fonctions à ajouter à onthisdate.module pour autoriser le paramétrage de votre module sont les suivantes. Elles sont isolées ci-dessous.
/**
* @file
* Enables to show the principles to build a module for Drupal 5.14.
*/
function onthisdate_admin() {
$form['onthisdate_maxdisp'] = array(
'#type' => 'textfield',
'#title' => t('Maximum number of links'),
'#default_value' => variable_get('onthisdate_maxdisp', 3),
'#size' => 2,
'#maxlength' => 2,
'#description' => t("The maximum number of links to display in the block.")
);
return system_settings_form($form);
}
function onthisdate_menu() {
$items = array();
$items[] = array(
'path' => 'admin/settings/onthisdate',
'title' => t('On this date module settings'),
'description' => t('Description of your on this date settings control'),
'callback' => 'drupal_get_form',
'callback arguments' => 'onthisdate_admin',
'access' => user_access('access administration pages'),
'type' => MENU_NORMAL_ITEM,
);
//this is added for this current tutorial.
$items[] = array(
'path' => 'onthisdate',
'title' => t('on this date'),
'callback' => 'onthisdate_all',
'access' => user_access('access onthisdate content'),
'type' => MENU_CALLBACK
// 'type' => MENU_NORMAL_ITEM
);
return $items;
}Changement d’un des paramètres
Si on active 'type' => MENU_NORMAL_ITEM
// 'type' => MENU_CALLBACK
'type' => MENU_NORMAL_ITEM
Vous pouvez voir le résultat de votre paramétrage à la page suivante :
http://127.0.0.1/DRUPAL_5_14/?q=onthisdate
Avec la valeur MENU_CALLBACK activée
Avec la valeur MENU_NORMAL_ITEM activée
Pour voir l’aide concernant le module
http://127.0.0.1/DRUPAL_5_14/?q=admin/help/onthisdate
Pour paramètrer l’accès à votre module pour des utilisateurs loggués ou non…
http://127.0.0.1/DRUPAL_5_14/?q=admin/user/access#module-onthisdate
Un conseil, si la page de configuration ou la page de resulat de votre module http://127.0.0.1/DRUPAL_5_14/?q=admin/settings/onthisdate n’existe pas, le mieux de désactiver puis de réactiver le module, vous devriez voir ensuite apparaitre la page de configuration.
Dans nos exemples d’URL données ci-dessus, nous n’avons pas activé l’option Clean URLs
Les informations sur l’environnement de test
On a fait une installation de test sur MAMP de Drupal 5.14
URL : http://127.0.0.1/DRUPAL_5_14/
Le couple admin:motdepasse
Les information essentielles sur la base de données adossée au Drupal 5.14
Database Name = drupal5_14
Database User name = drupal5_14
Database Password = drupal5_14
Database Host = localhost
Table prefix: d_
/Applications/MAMP/Library/bin/mysql -u root -p
# Création simultanée de la base drupal5_14
# et de l'utilisateur drupal5_14
CREATE USER 'drupal5_14'@'localhost' IDENTIFIED BY 'drupal5_14'; GRANT USAGE ON *.* TO 'drupal5_14'@'localhost' IDENTIFIED BY 'drupal5_14'WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0; CREATE DATABASE IF NOT EXISTS drupal5_14;GRANT ALL PRIVILEGES ON drupal5_14.* TO 'drupal5_14'@'localhost';
Le code du fichier onthisdate.module
Voici le code complet du fichier du module onthisdate
<?php
/* $Id: onthisdate.module,v 1.0 28/12/2010 08:30:45 $ */
/**
* @file
* Enables to show the principles to build a module for Drupal 5.14.
*/
function onthisdate_admin() {
$form['onthisdate_maxdisp'] = array(
'#type' => 'textfield',
'#title' => t('Maximum number of links'),
'#default_value' => variable_get('onthisdate_maxdisp', 3),
'#size' => 2,
'#maxlength' => 2,
'#description' => t("The maximum number of links to display in the block.")
);
return system_settings_form($form);
}
function onthisdate_menu() {
$items = array();
$items[] = array(
'path' => 'admin/settings/onthisdate',
'title' => t('On this date module settings'),
'description' => t('Description of your on this date settings control'),
'callback' => 'drupal_get_form',
'callback arguments' => 'onthisdate_admin',
'access' => user_access('access administration pages'),
'type' => MENU_NORMAL_ITEM,
);
//this is added for this current tutorial.
$items[] = array(
'path' => 'onthisdate',
'title' => t('on this date'),
'callback' => 'onthisdate_all',
'access' => user_access('access onthisdate content'),
'type' => MENU_CALLBACK
// 'type' => MENU_NORMAL_ITEM
);
return $items;
}
/**
* Display help and module information
* @param section which section of the site we're displaying help
* @return help text for section
*/
function onthisdate_help($section='') {
$output = '';
switch ($section) {
case "admin/help#onthisdate":
$output = '<p>'. t('This module displays links to <i>nodes</i> created on this date. <b>The following text has been written by Hecube.net to demonstrate that it is easy to add text, links, explanations in the help section of the module.</b>') .'</p>';
$output .= '<p>'. t('You can find more articles about Drupal on our blog <a href="@hecube" target="_blank">@ social.hecube.net</a>. These <em>articles</em> deal with numerous subjects about Drupal: Drupal 6.x themes web design, Drupal service activation and content type, e-commerce with Drupal 6.x.', array('@hecube' => 'http://social.hecube.net/')) .'</p>';
$output .= '<p>'. t('For this module, it can be called in a block that could be named <em>On this date</em>. This block may be enabled at the <a href="@blocks">blocks administration page</a>.', array('@blocks' => url('admin/build/block'))) .'</p>';
$output .= '<p>'. t('To use this module, be sure to <a href="@modules">enable</a> the module, in the modules page and define a <a href="@blocks">position</a>.', array('@modules' => url('admin/build/modules'), '@blocks' => url('admin/build/block'))) .'</p>';
$output .= '<p>'. t('For more information, see the online handbook on <a href="@drupal">Drupal.org</a>.', array('@drupal' => 'http://drupal.org/handbook/')) .'</p>';
break;
}
return $output;
} // function onthisdate_help
/**
* Valid permissions for this module
* @return array An array of valid permissions for the onthisdate module
*/
function onthisdate_perm() {
return array('access onthisdate content');
} // function onthisdate_perm()
/**
* Generate HTML for the onthisdate block
* @param op the operation from the URL
* @param delta offset
* @returns block HTML
*/
function onthisdate_block($op='list', $delta=0) {
// listing of blocks, such as on the admin/block page
if ($op == "list") {
$block[0]["info"] = t("On This Date");
return $block;
} else if ($op == 'view') {
// our block content
// content variable that will be returned for display
$block_content = '';
// Get today's date
$today = getdate();
// calculate midnight one week ago
$start_time = mktime(0, 0, 0,$today['mon'],
($today['mday'] - 7), $today['year']);
// we want items that occur only on the day in question, so
//calculate 1 day
$end_time = $start_time + 86400;
// 60 * 60 * 24 = 86400 seconds in a day
/* The query changed to enable configuration from admin */
$limitnum = variable_get('onthisdate_maxdisp', 3);
/* $query = "SELECT nid, title, created FROM "."{node} WHERE created >= '".$start_time."' AND created <= '".$end_time. "' LIMIT ".$limitnum; */
$query = "SELECT nid, title, created FROM "."{node} WHERE created >= %d "."AND created <= %d";
$queryResult = db_query_range($query, $start_time, $end_time, 0,
$limitnum);
// get the links
$queryResult = db_query($query);
while ($links = db_fetch_object($queryResult)) {
$block_content .= l($links->title,'node/'.$links->nid).'<br/>';
}
// check to see if there was any content before setting up the block
if ($block_content == '') {
// no content from a week ago, return nothing.
return;
}
// set up the block
$block['subject'] = 'On This Date';
$block['content'] = $block_content;
return $block;
}
}
function onthisdate_all() {
// content variable that will be returned for display
$page_content = '';
// Get today's date
$today = getdate();
// calculate midnight one week ago
$start_time = mktime(0, 0, 0, $today['mon'], ($today['mday'] - 7),
$today['year']);
// we want items that occur only on the day in question,
// so calculate 1 day
$end_time = $start_time + 86400;
// 60 * 60 * 24 = 86400 seconds in a day
/* $query = "SELECT nid, title, created FROM "."{node} WHERE created >= '".$start_time."' AND created <= '". $end_time . "'"; */
/* $query = "SELECT nid, title, created FROM "."{node}"; */
$limitnum = variable_get('onthisdate_maxdisp', 3);
/* $query = "SELECT nid, title, created FROM "."{node} LIMIT 0, ".$limitnum.""; */
$query = "SELECT nid, title, created FROM "."{node} LIMIT ".$limitnum."";
// get the links (no range limit here)
$queryResult = db_query($query);
while ($links = db_fetch_object($queryResult)) {
$page_content .= l($links->title, 'node/'.$links->nid).'<br />';
}
// add a more link to our page that displays all the links
$page_content .="<div class=\"more-link\">".l(t("more"),"onthisdate", array("title" => t("More events on this day.")))."</div>";
// check to see if there was any content before
// setting up the block
if ($page_content == '') {
// no content from a week ago, let the user know
$page_content = "No events occurred on this site on this date in
history.";
}
return $page_content;
} // end function onthisdate_all5.x, 6.x, développement, Drupal, Module, MySQL, PHP, Tutorial
27 décembre 2010 dans CMS, Création de site web, Divers, Hébergement, Linux, Apache, Mac, PHP, MYSQL, Technologie, Tutoriaux par Bruno Flaven
Protéger un répertoire par .htaccess est un sujet assez bateau sur lequel vous trouverez de nombreuses explications sur le web en effet le problème se pose de manière assez fréquente lorsque l’on veut faire un espace protégé sur son site : un espace pro, une page de téléchargement… Un endroit exclusif où le commun des internautes ne peut se rendre à moins de connaitre le précieux sésame !
C’est la méthode la plus facile et la plus efficace pour restreindre l’accès à des destinations sur votre site web.
Les étapes indispensables pour la création du .htpasswd sous Mac via la console
La commande à passer dans la console si vous souhaitez créer un fichier .htpasswd pour un utilisateur du nom de admin
htpasswd -c .htpasswd admin
Il faut retaper le mot de passe une deuxième fois comme sous linux le mot de passe n’apparait même sous une forme cryptée de type *****
Une fois tapé pour la deuxième fois, le fichier .htpasswd est automatiquement créé.
Pour afficher dans le terminal les fichiers du type .htpasswd et.htaccess, il faut taper la commande suivante.
Le code du .htpasswd, le mot de passe est bien évidemment crypté.
Source : http://www.securiteinfo.com/conseils/htaccess.shtml
Si vous souhaitez renforcer la sécurité de hachage de vos mots de passe, vous pouvez passer quelques arguments lors de la ligne de commande. Ainsi, si vous souhaitez utiliser la fonction de hachage MD5 il vous suffit de passer la ligne de commande suivante.
htpasswd -cm .htpasswd admin
La fonction htpasswd accepte plusieurs types de cryptage des mots de passe :
* -m utilise la fonction de hachage MD5 (128 bits). Attention, Apache utilise une version spécifique de l’algorithme, ce qui signifie qu’il n’est pas interopérable avec les autres serveurs web.
* -d utilise la fonction système crypt(). Pour rappel, cette fonction est basée sur le DES, et est également utilisée pour le cryptage des most de passe système (fichier passwd ou shadow).
* -s utilise la fonction de hachage SHA-1 (160 bits).
* -p laisse les mots de passe en clair.
La marché à suivre
Une fois, le fichier .htpasswd créé, il faut placer via un logiciel FTP, dans la répertoire que vous souhaitez protéger le fichier .htaccess en indiquant dans ce fichier le chemin vers le fichier .htpasswd qui contient vos mots de passe cryptés. Il est préférable de ne pas mettre le fichier .htpasswd dans le même répertoire.
Le code du .htaccess
AuthName "Accès restreint"
AuthUserFile [chemin-vers-le-fichier-des-mots-de-passe-htpasswd].htpasswd
AuthGroupFile /dev/null
AuthType Basic
<limit GET>
require valid-user
</Limit>
Les erreurs les plus fréquentes
Des erreurs peuvent se produire, notamment celle qui fera apparaitre une erreur de type 500, Erreur de configuration (Internal server error). On va se concentrer sur cette erreur qui se produit très fréquemment sur des serveurs mutualisés.
La resultion de cette erreur passe tres souvent par l’ouverture et la modification du fichier httpd.conf dans /etc/httpd/conf/httpd.conf.
If you host your own server, open your Apache config file using your favorite editor (in RedHat® Linux 7.1, the file can be found in /etc/httpd/conf/httpd.conf).
Il faut s’assurer que à la ligne de l’option AllowOverride du fichier httpd.conf soit réglé sur la valeur All.
En savoir plus
.htpasswd, Hébergement, Htaccess, mot de passe, protection répertoire
17 décembre 2010 dans CMS, Création de site web, Divers, Drupal, Ecommerce, Hébergement, Image, Graphisme, Photoshop, Joomla, Virtuemart, Meilleurs blogs, PHP, MYSQL, Référencement, SEO, Statistiques et Tracking, Technologie, Tutoriaux, Webdesign, Wordpress, XHTML CSS par Bruno Flaven
Le web regorge de comparatif entre les CMS les populaires du Web : Drupal, Joomla, Wordpress. Cela fait un certain temps que cet article mijote au sein de l’équipe, un comparatif exhaustif mais synthétique sur une lecture comparée des trois CMS sur la base de notre expérience de professionnels et d’experts du web et des CMS. On a tenté à chaque fois de rattacher l’expérience utilisateur sous les 3 CMS, en partant de Drupal, qui est à notre avis le CMS le plus abouti du marché mais dont la courbe d’apprentissage est la plus longue à l’inverse de Joomla et de Wordpress. Or le temps, c’est de l’argent….
Références sous Drupal
Quelques-unes des références de poids de Drupal dans le monde de l’Internet, notamment dans le monde de la presse, la musique, le corporate et même dans la brasserie. C’est notre préféré ici chez Hecube, leffe.com :):)
Autant de raisons objectives de ne pas négliger Drupal.
Concept - Le concept essentiel de Drupal : un sac de noeuds
La gestion de contenu sous Drupal s’articule autour de deux concepts fondamentaux qui sont les suivants :
- NODE : (NOEUD) Chaque élément de contenu dans Drupal, de la page statique à l’article de blog en passant par un sondage par exemple, est appelé un noeud. Tout le contenu est inséré sous forme de node ou noeud.
- BLOCK : (BLOCK) Les block sont des éléments dont vous pouvez disposer à différent endroits dans la page.
Ces deux éléments sont éminemment polyvalents et abstraits à l’inverse des éléments de contenu (containers) à disposition dans Joomla ou Wordpress. Dans ces derniers, cela se résume à des articles ou des pages, ce qui laisse peu de choix pour intégrer un contenu très différent.
Concept - le node
Dans Drupal, le réceptacle du contenu est le node. Chaque Node comprend un champs Titleet un champs Body
équivalence WP/Drupal :
- Story équivaut à l’article (post) dans WP
- Page équivaut à la page (page) dans WP
On peut fonctionner par analogie avec le xml, puisque il est question de “noeud” (node) comme dans un fichier xml. Schématiquement, la représentation de l’élément node de contenu de Drupal au format xml se ferait à l’aide d’un attribut.
<node>
<title>Mon titre</title>
<body>Le contenu figurant dans une page</body>
</node>
C’est cette capacité d’abstraction qui est à la fois sa principale difficulté et sa plus grande force. Avec drupal, vous pouvez faire une meta-représentation de n’importe quel type contenu
Prenons, un node nommé vidéo. Ce node vous pouvez lui attacher n’importe quel type d’attribut comme en xml.
<node type="video">
<title>Le titre de la vidéo</title>
<description>Le contenu figurant dans une page</description>
</node>
équivalence Joomla/Drupal :
De manière un peu abusive, on pourrait dire :
- Story équivaut à l’article dynamique dans Joomla
- Page équivaut à à l’article statique dans Joomla
Concept - Le champs body présent dans les deux containers "Page" et "Story" sous Drupal
- Body comprend un
summary ou teaser, qui affiche un extrait.
- Body comprend un
full view affiche la totalité du contenu.
Concept - Le block sous Drupal
Le contenu dans “Block” sert d’affichage secondaire de fonctionnalités transverses tel que le nuage de mots, la boite de recherche….
Concept - La gestion des images sous Drupal
L’action d’insérer une image dans une page est significative de la complexité du CMS drupal. Il n’est pas question à priori de gestionnaire de médias, vous devez envoyer votre image en FTP puis ensuite faire une insertion en html
Source : http://drupalfr.org/document/inserer_une_image_dans_un_contenu
Concept - L’envoie d’images ou upload d’images
Les images arrivent dans ce répertoire :
Exemple URL images
[chemin_vers_drupal]/site/sites/default/files/images/mypic.jpg
[chemin_vers_drupal]/site/sites/default/files/mypic.jpg
Les liens vers les images sont de ce type. C’est le manière de mettre une image dans une “page” ou une “story”. Pour ceux qui sont familiers de WP ou de Joomla.
La gestion des images et des médias est bien plus complexe sous Drupal que sous les deux autres CMS: Joomla, WordPress. Pour ces deux derniers CMS, le gestionnaire de médias est extrêmement intuitif et parle de lui-même, notamment dans WordPress, voir les deux articles ci-dessous.
Du code d’insertion de la balise image
<img src="files/images/nom_du_fichier.ext" alt="texte_alternatif" />
<img src="[chemin_vers_drupal]/site/sites/default/files/images/mypic.jpg" alt="texte_alternatif" />
<img src="files/images/sam_gal_1_1.preview.jpg" alt="texte_alternatif" />
<img src="[chemin_vers_drupal]/site/sites/default/files/images/mypic.jpg" alt="texte_alternatif" />
<img src="[chemin_vers_drupal]/site/sites/default/files/images/mypic.jpg" alt="texte_alternatif" />
Concept - Les modules sous Drupal
Les modules sont des extensions fonctionnelles proposés au site géré sous Drupal. le concept équivalent sous WP est le plugin toutefois le module sous Drupal offre parfois des accroissements fonctionnelles bien plus conséquents que les simples plugins WP.
Les modules les plus avancés sont souvent accompagnés de “dependencies”, c’est à dire des lots de fonctionnalités supplémentaires qui étendent tel ou tel aspect d’un module de base exemple la vue en vignette d’un module de galerie photos.
ATTENTION : Désinstaller un module supprime les données qui lui sont attachées.
On trouve tout type de module, par exemple, vous pouvez installer sous Drupal des modules aussi variés que les suivants, qui étendent indifféremment les fonctionnalités du frontend et du backend :
Exemple : Activer module Path (frontend)
Editer une page, puis changer l’url, pour une version explicite. Le path est équivalent au slug de WP.
Exemple : module admin_menu exemple d’installation d’un module (frontend/backend)
C’est module qui est grandement utile car il aide à l’administration
Source : http://drupal.org/project/admin_menu
Règle : Où installer modules et thèmes supplémentaires
Toujours installer les thèmes ou les modules dans /sites/all/themes/ et /sites/all/modules/
Concept - Le contrôle d’accès et gestion utilisateur sous Drupal
Drupal offre une très grande granularité dans la gestion des droits des utilisateurs. Il est possible de créer des profils sur mesure ce qui n’est par exemple pas la cas sous Wordpress.
C’est un des points forts de Drupal, cette gestion des utilisateurs, notamment pour permettre des accès restreints à certains sections du site. A titre de comparaison, autant WP est médiocre pour ce type de pratique autant Joomla offre un peu plus de possibilité.
équivalence Joomla/Drupal
Le contrôle d’accès et gestion utilisateur sous Joomla n’offre qu’une équivalence très relative à Drupal
équivalence WP/Drupal
WP est totalement incapable sur cet aspect.
Exemple : module Contact exemple d’installation d’un module
Il s’agit de mettre en place un formulaire en activant le module, créer le formulaire puis ensuite le rende disponible dans le menu “Navigation”.
équivalence WP/Joomla/Drupal
On est pas loin du même concept sous WP où vous allez devoir installer un plugin pour permettre la création d’un formulaire ou sous joomla, il vous faudra un module ou un component.
Gestion de contenu - L’arborescence d’un site (Taxonomy) sous Drupal
Il s’agit de ce que l’on nomme simplement la catégorisation qui se fait soit par catégorie unique ou terme (tags). Il est possible d’effectuer une multi-catégorisation.
Un exemple de taxonomy pour comprendre à quoi cela correspond
- Les autos
- Renault
- Jaguar
- Alfa Romeo
- Les vélos
- Les motos
- Yamaha
- Honda
- Triumph
- Suzuki
Exemple : module admin_menu exemple d’installation d’un module
Pour visualiser, les capacités étendues de taxonomie, on peut télécharger et activer module taxonomy_menu.
Source : http://drupal.org/project/taxonomy_menu
ATTENTION : C’est un concept essentiel. La taxonomie sert d’une part à catégoriser mais d’autre part à tagguer les articles. En fait, c’est un outil complet pour tagguer, classer et ordonner tout le contenu du site. Deux paramètres essentiels : Content types (Blog entry, Page, Poll…etc.).
équivalence WP/Joomla/Drupal
Drupal permet de gérer tout type de contenu et ensuite de les tagguer et de les catégoriser. Joomla ou WP ont des types de contenu définis par défaut et ne permettent pas de de nouveau type.
Pour WP, article (post), page (page) et dans une moindre mesure liens (links) ou média.
Pour Joomla, articles statiques ou dynamiques.
Pour Drupal, Story et Page
Cette possibilité de créer des nouveau type de contenu et de tagguage fait diverger totalement Drupal de Joomla ou WordPress puisque Drupal permet d’augmenter considérablement via “Content types” la typologie de contenu.
Un exemple : vous devez créer un catalogue de films, avec Drupal, vous pourrez créer un “Content types” nommé “movie page” auquel vous pourrez donner des caractéristiques particulières. Dans WP ou Joomla, une telle chose est impossible.
Gestion de contenu - Blog
Pour créer un blog, la démarche est la suivante. Il faut activer le module Blog, cela crée le type de contenu (blog entry). Il reste ensuite à catégoriser et tagguer, donc taxonomie. Il faut créer 2 entrées (vocabularies): Categorie, Tags. Ensuite, créer des blogs entries en les classant dans “Categorie” et en rajoutant des mots-clés dans “Tags”.
- analyse
- audiovisuel
- auteurs
- écriture
- journalisme
- narration
- technique
- webdoc
- webfiction
Gestion de contenu - Modération
Pour le coup, Drupal, Joomla et WordPress présentent les mêmes caractéristiques en ce qui concerne la modération, notamment celle des commentaires des utilisateurs.
Gestion de contenu - Gérer le flot de publication
Il est possible de créer des actions pour des utilisateurs inscrits au site.
Administer > Site configuration > Actions (admin/settings/actions)
Il vous faut ensuite activer module Trigger et ensuite il est possible d’affecter des alertes à des utilisateurs de Drupal.
équivalence WP/Joomla/Drupal
Drupal permet de gérer nativement ce type d’alertes et une ganularité très importante dans les droits de publication par rapport à WP et Joomla. C’est un des actifs de Drupal mais cette gestion du Workflow reste assez complexe à maitriser et souvent sur-dimensionné par rapport aux besoins éditoriaux d’un site classique. Toutefois, cette fine gestion des alertes est à notre sens, une des raisons obejetives de la percée de Drupal dans le monde de la presse Cf références car pour ce genre de site, une gestion affinée des utilisateurs et de leurs droits ainsi que la possibilité d’automatiser autant que possible la validation des procédures de publication est indispensable !
Gestion de contenu - Photo Gallery
C’est un exemple classique dans un site web, publier une galerie de photos sans trop se prendre la tête ! Là pour le coup le niveau d’abstraction de Drupal joue clairement en sa défaveur mais bon… Il est en effet beaucoup plus facile de publier une galerie de photos sous WP ou Joomla, après faire évoluer ces galeries restent plus problématique et là Drupal reprend l’avantage.
Drupal possède un arsenal important pour la gestion des images et la création de galerie de photos… On va clairement sortir l’artillerie pour publier 3 photos mais enfin il faut ce qu’il faut quand il faut comme il est dit dans les tontons flingeurs.
Pour une bonne gestion des images, il vous faudra les modules suivants :
Les pré-requis pour la gestion des images sont les suivants :
- Les deux modules suivants CKK, Filefield installés et activés.
- Activer dans l’option Clean URLs dans Home › Administer › Site configuration
- Avoir la librairie GD installée pour manipuler les images.
équivalence WP/Joomla/Drupal
WP gère aussi correctement et nativement les images notamment via un puissant et très intuitif gestionnaire de medias et une pseudo balise gallery pour afficher des galeries de photos sur votre site. Le toute sans un processus de publication fastidieux. Quant à joomla, il est en mesure de gérer pratiquement tout alors pourquoi pas des galeries d’images ! La vraie question qui demeure pour Joomla est souvent la même et peut se résumer ainsi : à pouvoir tout gérer, on finit par gérer le tout au prix de contorsions incroyables !
Paradoxalement, la profusion de paramétrage possible sous Drupal peut rendre terriblement complexe la création d’une simple galerie de photos. On se contentera d’utiliser CCK et Views pour créer rapidement une galerie de photos personnalisable.
Comme on peut s’en douter un des modules compris dans CKK se nomme ImageField. Comme par hasard, ce module sera très utile dans la manipulation des images.
Le fichier téléchargé => le chemin sous votre Drupal
custom_pagers-6.x-1.0-beta2.tar.gz => /votre_repertoire_drupal/modules/custom_pagers
imagecache-6.x-2.0-beta10.tar.gz => /votre_repertoire_drupal/modules/imagecache
imagefield-6.x-3.7.tar.gz => /votre_repertoire_drupal/modules/imagefield
imageapi-6.x-1.8.tar.gz => /votre_repertoire_drupal/modules/imageapi
L’installation de Getid3
Une petite difficulté concernant l’installation de Getid3
Source : http://drupal.org/project/getid3
Le message d’erreur qui s’affiche pour Getid3
The getID3() module cannot find the getID3 library used to read and write ID3 tags. The site administrator will need to verify that it is installed and then update the settings.
Comment installer et configurer getID3()
Il va falloir télécharger et installer la librairie getID3 manuellement sur le serveur.
- Le module getid3 s’installe comme un autre module mais tout ne fait que commencer.
- Il faut en effet installer la librairie. Ce qui consiste à se rendre dans le répertoire racine de votre installation Drupal et à créer un répertoire
sites/all/libraries/getid3.
- Dans ce répertoire, vous allez installer la dernière version de getid3 à http://sourceforge.net/projects/getid3/files/
- Une fois coller les fichiers de
getid3-1.7.9, vous pouvez supprimer le répertoire demos
- Se rendre dans
Administer > Site building > Modules et activer le module GetID3, si ce n’est pas déjà fait.
- Se rendre dans
Administer > Site configuration > getID3. Pour voir si getid3 est correctement installé. Normalement, le chemin et la version de getid3 sont indiqués.
équivalence WP/Joomla/Drupal
Pour simplement publier une galerie de photos, il vous faudra installer un certain nombre de modules et de nombreuses dépendances à ces mêmes modules : imagefield, getid3…etc.
Il est clair qu’il faut être patient et surtout un peu aguerri côté serveur pour installer l’ensemble. A l’inverse dans WP notamment ou de Joomla, tout est intuitif et facile à installer mais moins personnalisable. Drupal ne vous affranchie que très rarement de l’obligation d’avoir le secours d’un administrateur serveur ou développeur un peu expérimenté. Avec ce simple exemple de creation de galerie, on comprend très clairement pourquoi Drupal essaime auprès des professionnels et non du grand public !
Tout est à installer et à définir sous Drupal, on comprend donc pourquoi le temps d’apprentissage te de maitrise d’un tel CMS coute un bras en temps notamment.
Création du content photo
On va créer un content type nommé photo et attaché à ce content type, un field nommé lui aussi photo
La paramétrage de ce field (champs) est assez évident.
En clair, pour créer une galerie de photos sous Drupal, il faut créer le type puis le réceptacle pour attacher chaque photo.
Webdesign - Thèmes
Ce point est abordée rapidement. On vous invité à vous reporter aux autres articles cités en bas de page et sur ce blog qui traite de cette question très importante. La seule chose à retenir est de placer le .tar.gz dans le répertoire sites/all/themes. Créer le répertoire “themes” si il n’existe pas ! Comme pour “modules”.
Il est possible de choisir un thème différent pour le frontend et la backend. Voir (Administration theme).
Source : http://themegarden.org/drupal6/
Source : http://drupal.org/project/enlight
Gérer un site multilingue sous Drupal
Pour une fois qu’un CMS est d’origine européenne, le coup été bien prévu. Il est possible utiliser un .po comme dans WP.
Pour déployer facilement un site multi-lingue et se faire la main.
Source : http://multilingual.usingdrupal.com/install.php
Une “traduction” est simplement un fichier ou un ensemble de fichiers qui suivent un format standardisé. Les fichiers de traduction qui suivent ce format ont une extension de fichier particulière,. po, qui signifie
pour objet portatif. Un fichier po. est un simple fichier texte qui identifie des chaînes de texte et une langue particulière de la traduction des chaînes de caractères. Dans Drupal, les traductions contiennent une liste de
toutes les chaînes de l’interface utilisateur, ainsi que leurs versions traduites.
équivalence WP/Drupal
La fonction t() fonction est l’équivalent de la fonction dans WP _e (’phrase-en-anglais’, ‘nom-du-theme’);
Quelques ressources supplémentaires
Traduire les interfaces utilisateurs (UI)
La traduction du texte sur les UI (User Interface), c’est un des points essentiels, c’est à dire déployer un site intégralement traduit notamment tous les labels des boutons, les liens automatiques, les modules….etc.
La marche à suivre…
- Décompresser l’archive à la racine de votre site sous Drupal, là où se trouve la page
index.php par exemple pour avoir une version FR fr-6.x-1.0.tar.gz
- Il faut activer le module
Locale dans admin/build/modules
Ensuite, il faut donner des autorisation pour permettre la traduction /admin/user/permissions
- Se rendre ensuite dans
admin/settings/language, ajouter une langue… Le français par exemple… Vous determinez ici le sens de lecture de gauche à droite. Ce qui offre la possibilité de mettre de l’hébreu ou l’arabe qui se lise de droite à gauche.
On a donc une preuve sur la facilité de la gestion des langues via Drupal bien meilleur en un sens que que Joomla ou Wordpress.
Dans la cas de Wordpress, vous pouvez aller voir les articles qui abordent la question de la gestion des langues.
Wordpress - Les plugins de traduction ou comment traduire son blog
http://social.hecube.net/blog/2009/09/04/wordpress-les-plugins-de-traduction-ou-comment-traduire-son-blog/
Wordpress, traduction - Traduire son site Wordpress et ses plugins en plusieurs langues
http://social.hecube.net/blog/2010/02/22/wordpress-traduction-traduire-votre-site-en-plusieurs-langues-avec-transposh/
Wordpress, poEdit - localiser avec poEdit un thème Wordpress à l’aide du fichier de langue
http://social.hecube.net/blog/2009/12/17/wordpress-poedit-localiser-avec-poedit-un-theme-wordpress-a-laide-du-fichier-de-langue/
Quelques explications intéressantes sur une marche à suivre possible si vopus souhaitez aller plus loin dans la tradcution de votre Drupal 6.x
Ce dont il n’est pas question dans cet article
Cet article n’aborde pas les points suivants qui ont déjà abondamment couverts dans des articles précédents dans ce blog : la gestion des Events, la création d’une boutique en ligne via Drupal, la conception et la réalisation d’un thème sous Drupal 6.x… etc
Pour mémoire, ces sujets ont été pas mal auscultés au sein de ce blog…
La création d’une boutique en ligne sous Drupal
Concevoir un thème pour votre Drupal 6.x qui a été abondamment évoqué !
CMS, contenu, Drupal, gestion, Google, images, Joomla, Module, MySQL, PHP, SEO, Wordpress
9 décembre 2010 dans Accessibilité, Création de site web, Divers, Google, Hébergement, Iphone, mobile, Linux, Apache, PHP, MYSQL, Technologie, Webdesign par Bruno Flaven
L’impact écologique du web en général est clairement lié à la problématique de la consommation d’énergie électrique. On peut isoler deux questions très actuelles qui agitent le monde du web et de l’informatique de plus en plus conscients des dommages éventuels occasionnés à l’environnement par le tout numérique comme on évoque le tout automobile !
- La croissance vertigineuse du parc de terminaux mobiles, smartphones notamment, qui donne un relief tout particulier à la controverse qui oppose désormais la technologie flash d’Adobe et le constructeur Apple, supporter de l’HTML5, sur la consommation électrique.
- Les habitudes et usages des internautes, que l’on soit sur une plate-forme mobile ou un ordinateur de bureau, l’usage de plus en plus fréquents de webapplications. Qui n’a jamais consulté sa page Facebook via l’application ou consulter ses mails sur Gmail via son navigateur, sans même évoquer les google apps. Ces webapplications sont souvent liées à des forêts de serveurs applicatifs placés dans des datacenters, gros consommateurs d’électricité.
1 - La controverse Flash vs HTML5, Adobe vs Apple
Sans même évoquer les problématiques de sécurité liées à la technologie Adobe et pointées par Steve Jobs, président d’Apple, ce dernier considère Flash selon ses propres termes comme un “CPU Hog”. De là son refus catégorique de livrer en standard le plugin Flash sur tous les ordinateurs et terminaux Apple, notamment le dernier MacBook Air et de miser sur l’HTML5. Il reviendra donc à l’utilisateur d’effectuer, sur son ordinateur, la manipulation pour profiter de tous les contenus et publicités disponibles en Flash et tout bonnement se passer de flash sur un Iphone ou sur un Ipad où toute installation est impossible. Suite à cette annonce tonitruante, un grand nombre de tests ont été effectués pour mesurer le dommage électrique occasionné à l’installation de Flash sur un terminal Apple.
Citons le test le plus probant, mené par les rédacteurs de l’excellent Ars Technica (www.arstechnica.com) qui ont en effet fait un test de consommation avec et sans le player flash installé sur le dernier-né Apple, le MacBook Air : résultat sans appel, l’autonomie de leur machine, modèle avec écran 11 pouces, baisse de 33 % après installation du module d’Adobe.
Pour réaliser le test, ils ont installé le module Flash puis chargé beaucoup de site dans Safari et mesuré l’autonomie. Résultat le MacBook Air tient 4h dans ces conditions quand Apple annonce 5 heures sur son site web. Après désinstallation du plugin, rechargement des même sites web dans Safari, l’autonomie passe miraculeusement à 6h02, soit une hausse de 50% de l’autonomie de la machine.
Une hausse impressionnante de l’autonomie quand on sait que les constructeurs comme Apple conçoivent leurs portables et leurs logiciels de manière à grappiller des bribes d’autonomie électrique à chaque génération de produits. Or si cette problématique de la surconsommation électrique du runtime Flash se pose pour Mac, elle se pose aussi à l’ensemble des constructeurs de terminaux mobiles et de smarphones..
Source : The future of notebooks: Ars reviews the 11″ MacBook Air http://arstechnica.com/apple/reviews/2010/11/the-future-of-notebooks-ars-reviews-the-11-macbook-air.ars/3
2 - Diminution de l’impact environnemental grâce au Cloud Computing, base arrière des webapps
Il est indéniable que la demande croissante d’Internet, le cloud-computing (utilisation de logiciels et services hébergés à distance, comme ceux de Google apps) et les smartphones… ont un impact véritable sur l’environnement en raison d’une consommation électrique accrue et donc d’émissions de carbone.
Tout d’abord quelques chiffres qui attestent de l’impact environnemental des besoins en consommation électrique des activités liés aux nouvelles technologies de l’information.
Deux études donnent quelques ordres de grandeur significatifs sur l’énormité des besoins actuels et à venir :
- Selon un rapport de l’organisation écologique, Greenpeace, d’ici à 2020, les acteurs majeurs d’Internet utilisant le cloud computing consommeront à eux seuls autant d’électricité que la France, le Brésil, l’Allemagne et le Canada réunis. Greenpeace pointe par exemple du doigt l’iPad qui en offrant des services en ligne multiplie le besoin en serveurs pour gérer ces services qui à leur tour ont un impact sur le rejet de Co2 dans l’atmosphère.
- Selon le Smart 2020 report4 “Enabling the Low Carbon Economy In the Information Age”, estime que l’impact environnemental actuel (émission de carbone notamment) va plus que tripler entre 2002 et 2020, faisant du secteur des technologies de l’information, dont le taux de croissance de gaz carbonique sera la plus rapide.
Cette tendance est aujourd’hui quasiment irréversible. Dès lors l’unique manière de contrôler l’impact environnemental de la société de l’information est dans le futur de déporter un maximun les traitements et les calculs du coté des forêts de serveurs dont il est beaucoup plus aisé de mesurer et contrôler l’efficacité énergétique. Celle-ci est entre les mains des entreprises qui pourront faire les plus importantes économies d’échelle. Google, à ce titre, est déjà en train d’ouvrir son infrastructure serveur aux développeurs d’applications en ligne leur permettant notamment d’encaisser, et c’est l’autre principal avantage, des courbes d’adoption exponentielles, chose qu’il serait couteux et compliqué d’effectuer à petite échelle.
A notre échelle et en tant qu’opérateur de serveurs, nous avons pris conscience de cet impact, c’est ce qui a guidé notre choix dans le mode de distribution et dans la conception d’un webservice tel que 3WDOC. Nous avons renoncé volontairement par exemple à la création d’un client lourd dans une technologie très consommatrice en énergie comme l’est la technologie AIR d’adobe.
En effet, ces applications sont généralement opérées sur des machines clientes et non des serveurs dont on peut contrôler le PUE (PUE, Power Usage Effectiveness ratio), mis au point par le consortium The Green Grid, qui est un indicateur d’efficacité énergétique.
Il faudra de plus en plus gérer l’efficience énergétique des datacenter notamment selon le principe de “multi-Tenancy, qui vise à diminuer les charges sur un serveur tout en servant le maximum d’utilisateurs sur une infrastructure partagée. Pour la plate-forme comme pour notre développement, nous tacherons dans la mesure de nos moyens, à chaque étape, de minimiser l’impact électrique de notre chaine de production et dans son exploitation.
A titre d’exemple, selon une étude Accenture faite en Novembre 2010, mené pour le compte de Microsoft, l’application effective des principes environnementaux, énoncés plus haut, dans l’utilisation du “cloud computing” et dans la conception de « Sofware-as-a-Service (SaaS) », « Platform-as-a-Service (PaaS) » et « Infrastructure-as-a-Service (IaaS) » dans un pays comme les USA et pour toutes les sociétés de 100 à 10 000 employés permettrait une réduction des émissions de carbone équivalente au retrait permanent d’environ 100.000 voitures de la route !
Patrick Chanezon (Google) parle du Cloud computing @ LeWeb’10
Difficile de ne pas comprendre ce qu’est le cloud computing après cet exposé limpide!
Source : http://www.francetv.fr/web10ftv/?page=video&type=questions&id=1hrreNFedLs
C’est conscient des ces préoccupations environnementales que nous concevons la technologie chez hecube et que nous souhaitons exploiter entre autre le service 3WDOC.
En savoir plus
Adobe, cloud computing, Ecologie, Flash, Google, HTML5, PaaS, SaaS
27 novembre 2010 dans Accessibilité, Création de site web, Technologie, Tutoriaux, Vidéo par Bruno Flaven
Dès lors que l’on parle de video sur internet, on est très vite amené à parler de format. Il fut un temps où il n’existait que 3 formats : Quicktime, Windows Media, Real Networks. Qui se souvient encore des deux derniers ? Eh oui, il n’y avait pas Flash, Flash n’avait pas opéré la razzia que l’on lui connait de nos jours où toutes les vidéos sont en Flash, point barre.
Eh bien, un nouveau format pourrait bien venir perturber l’hégémonie de Flash en matière de vidéo en donnant au web un format video de très grande qualité et ouvert, le WebM.
Eh qui peut s’attaquer à une telle suprématie, on se le demande, Big G Google forcément et ce n’est sans doute pas pour faire de la figuration. Si on raisonne par analogie avec le marché du mobile, Google sort Android pour accompagner le phénomène des smartphones. Résultat, Eh vlan ! Selon la cabinet NPD Group, le système d’exploitation Android, sur le marché américain de téléphonie mobile, vient de passer en première position devant l’Iphone d’Apple pour le premier trimestre de 2010.
Une telle mésaventure serait-elle possible dans le monde du format vidéo avec la montée en puissance de ce format, et faire de Flash une solution marginale pour le format comme pour la lecture, qui peut le dire ? Certes, le WebM va être le format de diffusion des vidéos youtube, propriété de Google, et que ce format va être opéré en HTML5. Exit donc Adobe sur Youtube, les autres plates-formes de partage suivent si ce n’est déjà fait (vimeo, viddler, dailymoiton). Or Flash s’est imposé d’une part par l’usage sur des plates-formes d’échange vidéo comme youtube et d’autre part grâce à la qualité de son codec VP6 conçu par On2 Technologies, aujourd’hui propriété de Google, encore eux ! WebM… alors ! Adobe est d’ailleurs bien forcé de s’ouvrir Flash au codec VP8 qui sous-tend le format WebM, faute de pouvoir le contrôler totalement comme c’était le cas par le passé.
Ainsi, les deux différentiels de Flash, qui avaient sacré son avènement comme un standard. L’un s’atténue, l’autre disparait totalement. La combinaison Flash player et son format .flv a bien des chances à terme d’être équivalente avec l’expérience offerte par l’HTML5 et le codec .WebM. Les utilisateurs trancheront comme toujours sur Internet.
Vrais conflits ou entente cordiale ?
Mauvais temps pour Adobe, qui est attaqué par Apple, avec Steve Jobs, vindicatif, désireux de dégommer Flash de sa plate-forme et des ses joujoux. L’issue de cette affrontement est incertain, les avis semblent partagés et cela ne fait-il pas aussi parti du barnum médiatique que les deux firmes attisent allègrement l’une et l’autre, storytelling encore et toujours.
Qui peut prédire l’issue et affirmer que le marché de la vidéo et des RIA sera radicalement changé d’ici 6 mois… Ni Steve Jobs, ni Shantanu Narayen ne le peuvent. Les internautes, seuls en décideront car ils gouvernent le web et c’est leur expérience qui sonnera le glas de flash et/ou l’avènement de HTML5 si tel est leur bon plaisir ! “Souvent internaute varie, bien fol est qui s’y fie” Cette grande volatilité des consommateurs que nous sommes tous appelés à devenir sur le web, certes pour ne consommer que des biens sociaux, de l’hyperloisir (l’immatériel est déjà un terme obsolète), est vraiment le seul paramètre tangible sur lequel on peut compter !
A moins de sortir une technologie disruptive, marquant une rupture comme la navette volante de John Kay lors de la révolution industrielle en Angleterre ! La video est condamné à être abandonnée aux aléas des codecs, des plates-formes et du contenu et des utilisateurs. Remarquez WebM est peut-être bien le format qui va provoquer ce changement.
Le sacre du HTML5 ?
Analysons la brève histoire du temps web, lorsque la vidéo n’était qu’une chimère sur le web, les gens regardaient encore la télé et les différentes normes pullulaient (real, quicktime, windows) puis finalement adobe/flash a fait son chemin vers l’utilisateur final, inondant du même coup par sa production le WWW. Ce basculement pourrait arriver pour l’HTML5 car ni Adobe, ni même Apple ne pourront contrer un mouvement qui délaisserait sa technologie, l’accompagner serait certes plus judicieux. Tous s’y emploient dès à présent tout en continuant de redouter le tsunami qui pourrait les emporter.
Nous sommes donc sur un marché totalement orienté vers les utilisateurs, les chapelles, les idéologies, les cultures semblent avoir moins de prise, seul l’émergence soudaine d’un marché de masse donne vie sur le web. Le succès de la video en flash a été extrêmement conditionné par la création de contenu quasi exclusive qui a été fait par le grand public et les professionnels. De facto, si l’HTML5 prend et le grand des players HTML5 (Projekktor, VideoJS, SublimeVideo, Media Front, Kaltura, FlareVideo) qui naissent chaque jour en témoigne, les lignes de partage de la vidéo seront irrémédiablement bouleversées, sans retour possible. C’est la force d’internet !
Un petit tour d’horizon du WebM
Après, cette intermède prospectif, Revenons à des chose plus prosaïques, à savoir le format et quelques explications le concernant.
La baseline de WebM
The WebM project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone.
The WebM launch is supported by Mozilla, Opera, Adobe, Google and more than forty other publishers, software and hardware vendors. Learn more.
Convertir en WebM
Le format .WebM est un dérivé du conteneur Matroska (extension :.mkv). Pour pouvoir convertir vos vidéos en WebM, on va installer ffmpeg. Il existe sur ce blog, deux articles qui expliquent comment installer ffmpeg sur un PC ou un Mac via MacPorts.
On part du principe que vous vez dejà installer un vesrion de ffmepg via macports, selon les recommandations de l’article ci-dessus “MacPorts - la puissance de l’open-source sur votre Mac Os X“. Il ne vous reste plus qu’à faire une mise à jour complete de votre version de FFMEPG. C’est cette dernière méthode qu’on va suivre.
Cette commande aura pour effet de mettre à jour la totalité des applications installés grâce à macport dont ffmpeg
sudo port -v upgrade outdated
Ligne de commande pour convertir en .WebM
ffmpeg -i my_video.avi -acodec libvorbis -ac 2 -ab 128k -ar 44100 -s 720×480 my_video.webm
A titre de comparaison, notre fichier vidéo avait une taille en MP4 est de 8.8 Mo, ce même fichier pese en webM que 7.4 Mo
Le format WebM semble marchait avec :
- Chrome
- Firefox 4 beta
- Opera
- IE 9 si l’utilisateur a les DLLs Direct Show installés
Une démonstration de la qualité d’une vidéo au format WebM
http://erunways.com/html5/WebM_VP8_video/
En savoir plus
audio, Flash, HTML5, MP4, Ogg, Vidéo, WebM
23 octobre 2010 dans CMS, Création de site web, Image, Graphisme, Photoshop, Mac, Meilleurs blogs, PHP, MYSQL, Référencement, SEO, Technologie, Tutoriaux, Webdesign, Wordpress, XHTML CSS par Bruno Flaven
Qui n’a pas envie de s’affranchir du faible nombre de polices système dont on dispose au sein d’une CSS. On avait déjà en partie répondu à cette question dans un précèdent article de ce blog notamment sur la toute nouvelle librairie Cufón, venu de Finlande si mes souvenirs sont bons. Après quelques mois d’existence, cette librairie qui permet le “font replacement” (remplacement de la police) au sein d’un site web tout en préservant la capacité de référencement de votre site web a été portée par de nombreux développeurs au sein de Worpress via des plugins. Voici donc rapidement notre sélection de plugins.
Le précèdent article sur une question de Cufón
“Ainsi font, font…” - Quelques polices trouvées sur le web
Chez Hecube, on est finalement assez sympa, on vous donne à la police… des polices ! Voilà une liste des polices Cufón que nous avons pu trouver sur le web.
Delicious_500.font.js
Futura_Bk_BT_400.font.js
LeagueGothic_400.js
Myriad_Pro_300.font.js
Myriad_Pro_400.font.js
Myriad_Pro_600.font.js
Myriad_Pro_700.font.js
Rockwell_Std_300.font.js
Vegur_400-Vegur_700.font.js
coupe-bold_500.font.js
coupe-medium_500.font.js
coupe-normal_500.font.js
coupe-thin_500.font.js
georgia_400.font.js
junction_400.font.js
Le fichier zippé du répertoire cufon-fonts des polices ci-dessus (cufon-fonts.zip).
Attention, certaines de ces polices n’ont pas été exportées pour supportés des lettres avec accent comme le Français ou l’Espagnol. Il vous faudra donc refaire l’export si vous souhaitez publier avec accent !
1. Plugin all-in-one-cufon
Excellent plugin… extrêmement synthétique et parfaitement configurable. Le tout sur une seule page d’où son nom sans doute all-in-one. De loin, notre préféré.
Le code pour faire des remplacements, du simple à plus complexe
Cufon.replace('h1');
Cufon.replace('h2');
Cufon.replace('li.current_page_item', {
color: '-linear-gradient(#FFFFFF, #99CCFF)',
textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
hover: {
textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
color: '-linear-gradient(#FFFFFF, #969696)'
}
});
Cufon.replace('li.page_item', {
color: '-linear-gradient(#FFFFFF, #99CCFF)',
textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
hover: {
textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
color: '-linear-gradient(#FFFFFF, #969696)'
}
});Source : http://wordpress.org/extend/plugins/all-in-one-cufon/
2. Plugin WP-Cufón
Le créateur de ce plugin a juste oublié que la configuration de Cufón n’est pas l’onglet “Settings” mais dans l’onglet “Appearance” au sein de l’outil d’administration. Il est ensuite assez difficile de trouver des fonts à part la vegur qui est donné avec le plugin à titre d’exemple mais une fois le système en place, c’est assez facile de changer la police des principaux titres : H1, H2….etc.
Source : http://wordpress.org/extend/plugins/wp-cufon/
1. Upload `wp-cufon` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Convert or get some compatible .font.js fontfiles
4. Create a directory with the name `fonts` in /wp-content/plugins/
5. Upload your font-files to `/wp-content/plugins/fonts/`
6. Go to the Settings Page and enter your replacement codes with the “font-family” names of your fonts
–> Example: Cufon.replace(’h1′, { fontFamily: ‘Vegur’ });
–> you can test the free Vegur fontfile from /wp-cufon/example/ - load the file into your external font directory.
3. Plugin wp-Typography
Ce plugin boxe dans une autre catégorie…. mais il ne marche sur la version Version 3.0.1 semble-t-il ! C’est ballot. Ce plugin ne semble marcher qu’avec une version de 2.7 à 2.8.4.
Il est aussi recommandé d’utiliser le plugin wp-supercache
http://wordpress.org/extend/plugins/wp-super-cache/
Source : http://wordpress.org/extend/plugins/wp-typography/
4. Plugin dynamic-font-replacement-4wp
Intéressant mais ne permet pas d’ajouter des tags supplémentaires.
Source : http://wordpress.org/extend/plugins/dynamic-font-replacement-4wp/
Convertir des polices localement avec Cufón
Une des choses un peu fastidieuses dans Cufón est bien de créer les polices afin de profiter des qualités de la libraire javascript Cufón. Le plus compliqué est bien de de coltiner la conversion des polices, c’est pratiquement un équivalent de la guerre des polices.
La procédure sur Mac, proposée par Cufón
Si vous rencontrez des difficultés à convertir vos fichiers de polices en fichier javascript .font.js utilisables dans Cufón, vous n’etes pas vraiment au bout de vos peines…
Sur l’espace Github de Cufón, vous avez bien un epocédure sur Mac pour tenter d’obtenir sur Mac et via le terminal, un fichier… Sans grand succès
cat "MyFontReg/..namedfork/rsrc" > "MyFontReg.dfont"
Ce qui fait sur un poste Mac, une commande de ce type :
cat /Users/username/Library/Fonts/nom_de_ma_police > /Users/username/Documents/Fonts_for_cufon/nom_de_ma_police.dfont
Source : http://github.com/sorccu/cufon/wiki/trouble-with-font-files
La commande pour connaitre la liste des polices installés sur votre Mac
cd /username/Library/Fonts/
Installer une version en local sur MAMP de la librairie Cufón
Cela suppose que vous connaissez au moins l’article pour utiliser MacPorts
sudo port install fontforge
On fait ensuite un téléchargement et une installation de la librairie sorccu-cufon-1.09-0-g1c9b69b.zip dans un répertoire en local cufon_forge
Source : http://github.com/sorccu/cufon
Il faut ensuite éditer le fichier /generate/settings.ini et placer la ligne suivante en désactivant le chemin par défaut :
#fontforge=/usr/bin/fontforge
fontforge=/opt/local/bin/fontforge
Il ne vous reste qu’à démarrer votre serveur en local (MAMP) et de convertir les polices souhaitées via la procédure normale mais en local.
En savoir plus
Cufon, Javascript, personnalisation, plugin, Polices, theme, Wordpress
7 octobre 2010 dans CMS, Création de site web, Drupal, Framework, Hébergement, Joomla, Virtuemart, Meilleurs blogs, PHP, MYSQL, Technologie, Wordpress, XHTML CSS par Bruno Flaven
Y-a-t-il d’autres CMS après le tiercé gagnant : Wordpdress, Drupal, Joomla dont nous faisons assez fréquemment l’éloge dans ce blog. Je n’évoque même pas les “exotiques” CMS (Content Management System) que sont SPIP, phénomène un peu franco-français ou Typo3, trop professionnel pour être un outil grand public. Non, on recherche la nouveauté pour répondre à des besoins extrêmement basiques dont voici un résumé pour vous en donner une idée générale :
- Scriptiquement parlant, faire un site, basé sur le tandem PHP-MySQL
- Possiblement hébergement sur un serveur mutualisé
- Avec un temps d’apprentissage limité pour publier un page ou une galerie de photos par exemple
- Et pour finir quelques possibilités de personnalisation graphique afin d’éviter que le site ressemble à celui du voisin
Et l’expérience utilisateur dans tout cela…
On ne va pas par ailleurs se livrer à un comparatif exhaustif des mérites des uns et des autres. Le genre de comparatif dont le web regorge. Disons plutôt, en consacrant un temps très limité, essentiellement l’installation du CMS et sa prise en main immédiate sans une lecture poussé de la documentation, voir comment on s’en sort en terme d’expérience, ce qui une notion assez subjective, il faut bien l’avouer.
Notre sélection de CMS
Bien sur retenir quelques postulants n’a pas été chose facile, en fait on a choisi 3 CMS qui possèdent chacun une spécificité qui diffère du triumvirat cité plus haut. Voici la liste et la principale raison qui nous a poussé à le selectionner.
- Frog CMS, une promesse de simplicité absolu dans le webdesign, la conception….etc
- SilverStripe, un CMS construit sur un framework nommé
Sapphire qui contient donc des principes MVC
- Concrete5, une barre d’édition contextuelle hors-backend
Etant la très qualité de ce CMS, Concrete5, on a décidé de consacrer cet article exclusivement à Concrete5, les autres CMS suivront dans une autre série d’articles.
1. La genèse de Concrete5
Deux natifs de Portland, Oregon se sont attelés à la création de ce CMS qui annonce clairement la couleur : concrete5 makes it easy for anyone to build and manage a website
Les deux créateurs ont d’ailleurs rédigé deux lettres ouvertes rédigés à l’intention des développeurs et des designers afin de les convaincre d’utiliser leur CMS. Les arguments sont un mélange de pragmatisme et de candeur qui somme toute peu convaincre. Des à présent mesurons cela à l’épreuve des faits, en installant le CMS.
Concrete5 is an open source content management system with simple administaror interface. You can edit a web page live by using the editing toolbar provided after you log in as administrator.
2. Installation de Concrete5
On va faire les test sur concrete5.4.0.5 en local sur MAMP.
/Applications/MAMP/Library/bin/mysql -u root -p
# Création simultanée de la base c5_install
# et de l'utilisateur c5_install
CREATE USER 'c5_install'@'localhost' IDENTIFIED BY 'c5_install'; GRANT USAGE ON *.* TO 'c5_install'@'localhost' IDENTIFIED BY 'c5_install'WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0; CREATE DATABASE IF NOT EXISTS c5_install;GRANT ALL PRIVILEGES ON c5_install.* TO 'c5_install'@'localhost';
Source : http://www.concrete5.org/
L’installation est ultra-simple, une sorte de mix entre l’installation de WP et de Joomla
3. Le backend de concrete5
3. Quelques écrans de paramétrage du backend concrete5
Les paramètres généraux du site (sitewide)
Le thème du site (webdesign)
La gestion des utilisateurs (users)
4. Le site (frontend)
La sélection du thème et sa personnalisation est extrêmement simple
5. Gérer du contenu dans Concrete5
Créer et mettre à jour du contenu
On va se livre à l’opération la plus basique qui soit c’est à dire rajouter une page, ajouter du contenu.
6. Autres ressources
De l’aide…
Une très bonne FAQ est à votre disposition pour les principales questions qui pourraient survenir dans l’utilisation du CMS concrete5
L’internationalisation ou le multi-langue
L’internationalisation est possible. Il existe même des versions traduites de thème et la communauté qui supporte ce CMS, bien que réduite, semble assez active et internationale.
Ressources : “addons & themes”
Les ressources de développement et de webdesign spécifique à concrete5 n’ont pas encore la volumétrie d’un Wordpress ou d’un Drupal et les capacités de développement de la communauté semblent plus limitées mais qu’importe la quantité, la qualité semble être au rendez-vous !
Travailler sur un thème
Comme souvent, pour évaluer un CMS, il faut voir rapidement la capacité de prise en main afin de personnaliser le futur site d’un point de vue fonctionnel et graphique. En lisant le minimum de documentation, il est possible de construire un thème. Ce thème nous le nommons hecube.
Où placer son thème
Ce thème une fois crée n’est pas à placer dans le répertoire par défaut des thèmes livrés avec le CMS c’est à dire à chemin-sur-votre-serveur/concrete/themes/ mais dans chemin-sur-votre-serveur/themes/
C’est un peu comme dans les thèmes Drupal, où il vaut meiux placer votre themle dans chemin-sur-votre-serveur/sites/all/themes et non dans chemin-sur-votre-serveur/themes
Aperçu des fichiers
Comme sous WP ou Drupal, des fichiers de présentation du theme, un petit “screenshot” (thumbnail.png) et un fichier de description (description.txt).
Extrait du fichier description.txt
Hecube Theme
This is first attempt for concrete5 theme made by hecube.net
Ensuite, il ne vous reste plus qu’activer le tout de la manière suivante :
Conclusion sur concrete5
D’évidence, un CMS plein de promesse, c’est tellement rare ! Simple dans son backend comme Wordpress, sophistiqué comme Drupal sans sa complexité de gestion, s’appuyant sur des principes MVC… Chapeau ! A suivre de près.
Ce que nous avons apprécié…
Une des choses que nous avons aimé que l’on vous livre in extenso… qui rapproche concrete5 des concepts de “views” et de “layouts” si cher au développement MVC de CakePHP et de CodeIgniter.
Themes as Applied to Single Pages
The concept of single pages in concrete5 is discussed more on the terminology section: in short, single pages are a simple way of creating one-off pages for specific functionality in your site. For example, say you have complicated search page, with multiple forms and a special layout that’s unlike any other page on your site. You wouldn’t want to create a page type for this page, since it will not likely be added more than once throughout your site (and certainly won’t appear than in more than one theme.)
Hence, the concept of “single pages.” These are also sometimes referred to as “static pages,” but this is a misnomer, since these single pages are capable of holding concrete5 block areas, being renamed through content management system, and can have arbitrary page attributes assigned to them.
Themes and single pages interact mostly the same way that page types and themes do: if a template for a particular single page appears within a themes directory, it is applied. However, there is an additional directory on the server for “single_pages.” Within this directory is PHP and HTML content for the main area of a page. Additionally, within the theme that is going to be applied to your single page, there should be an extra file, named “view.php.” This file is similar to “default.php” in that it is used automatically, however it requires that a variable, named $innerContent, is printed in one spot. This is the spot in this particular theme wrapper file, that the contents of the single page are going to be printed.
This allows multiple single pages to be added, and the user to automatically include the content within a matching wrapper file, like CakePHP or Code Igniter does with their concepts of “views” and “layouts.” View.php within the theme directory is the layout file, and the specific single page in the single_pages directory is the view.
Source: http://www.concrete5.org/help/building_with_concrete5/developers/themes/single_pages/
En savoir plus
15 septembre 2010 dans CMS, Création de site web, Meilleurs blogs, PHP, MYSQL, Réseaux sociaux, Technologie, Tutoriaux, Webdesign, Wordpress, XHTML CSS par Bruno Flaven
L’objectif poursuivi est de faire une mise en page aussi sophistiqué que le site mashable.com ou le site TechCrunch.com le font pour leurs auteurs. Il n’est pas nécessaire pour cela de prendre un marteau pour écraser une mouche c’est à dire installer l’assortiment des plugins BuddyPress sur votre Blog Wordpress comme c’est aujourd’hui possible mais vous aurez alors totalement à repenser votre thème !
Définir ce que l’on souhaite afficher sur une page auteur
On a vu des modèles sur les sites cites plus haut mais on veut presque si on ne peut pas aller plus loin…
Pour trouver quoi faire et comment faire mieux vaut se reporter à la page de référence du codex Author Templates
http://codex.wordpress.org/Author_Templates
On va tenter rapidement de voir ce qui est directement exploitable sur la page d’un auteur et comment étendre facilement des données de son profil. Les éléments que nous souhaitons afficher sur cette page auteur sont les suivants :
- author-header
- Une image d’illustration (author_header_illustration)
- Une baseline de présentation de l’auteur (author_header_baseline)
- sidebar
- Une biographie de l’auteur (author_bio_sidebar)
- Les fils RSS, Atom de l’auteur (author_feeds_sidebar)
- Les liens sociaux [Twitter, Facebook...] de l’auteur (author_social_sidebar)
- content
- Les articles [posts] de l’auteur, une page archives personnelle (author_posts_content)
Pour ces 4 éléments, il sera nécessaire de faire un peu de développement cela fera l’objet d’un article ultérieur.
- Les derniers commentaires sur les articles de l’auteur (author_comments_sidebar)
- Les tags des articles (posts) de l’auteur pour faire un nuage de mots_clés (author_tags_sidebar)
- Les catégories des articles (posts) de l’auteur (author_categories_sidebar)
- Les liens [blogroll] de l’auteur (author_blogroll_sidebar)
Contrôler l’affichage du contenu d’une page auteur
Cette nouvelle fonction permet la sélection d’une page spécifique par auteur.
Etendre le profil de chaque auteur
Le code à insérer dans functions.php de votre thème.
/* extend the profile */
add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );
function my_show_extra_profile_fields( $user ) { ?>
<h3>Extra profile information</h3>
<table class="form-table">
<tr>
<th><label for="twitter">Twitter</label></th>
<td>
<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr
( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your Twitter profile URL.</span>
</td>
</tr>
<tr>
<th><label for="facebook">Facebook</label></th>
<td>
<input type="text" name="facebook" id="facebook" value="<?php echo esc_attr
( get_the_author_meta( 'facebook', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your facebook profile URL.</span>
</td>
</tr>
<tr>
<th><label for="linkedin">LinkedIn</label></th>
<td>
<input type="text" name="linkedin" id="linkedin" value="<?php echo esc_attr
( get_the_author_meta( 'linkedin', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your linkedin profile URL.</span>
</td>
</tr>
<!-- OTHER INFORMATIONS -->
<tr>
<th><label for="linkedin">author_header_illustration</label></th>
<td>
<input type="text" name="author_header_illustration" id="author_header_illustration" value="<?php echo esc_attr
( get_the_author_meta( 'author_header_illustration', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your author_header_illustration.</span>
</td>
</tr>
<tr>
<th><label for="linkedin">author_header_baseline</label></th>
<td>
<textarea name="author_header_baseline" id="author_header_baseline" id="author_header_baseline" rows="5" cols="30"><?php echo esc_attr
( get_the_author_meta( 'author_header_baseline', $user->ID ) ); ?></textarea><br/>
<!-- <input type="text" name="author_header_baseline" id="author_header_baseline" value="" class="regular-text" /><br /> -->
<span class="description">Please enter your author_header_baseline.</span>
</td>
</tr>
</table>
<?php }
add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );
function my_save_extra_profile_fields( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) )
return false;
/* Copy and paste this line for additional fields. Make sure to change 'twitter' to the field ID. */
update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
update_usermeta( $user_id, 'facebook', $_POST['facebook'] );
update_usermeta( $user_id, 'linkedin', $_POST['linkedin'] );
/* OTHER INFORMATIONS */
update_usermeta( $user_id, 'author_header_illustration', $_POST['author_header_illustration'] );
update_usermeta( $user_id, 'author_header_baseline', $_POST['author_header_baseline'] );De quoi dispose-t-on désormais dans une page auteur
Le code de la page author.php. Vous pouvez tout aussi bien mettre une page par auteur, pour se faire il vous suffira de créer author-2.php ou author-toto.php
WordPress 3.0 it will be possible to use specific author templates. The function get_author_template() has been expanded in wp-includes/theme.php.
Now you can create a author-michael.php or author-123.php, which will be called via the WordPress Template Hierarchy in connection to the author with user_nicename michael or ID 123. Basically the same funtionality as we known for categories.
/*
See more on
http://codex.wordpress.org/Author_Templates
* $curauth->aim;
* $curauth->description;
* $curauth->display_name;
* $curauth->first_name;
* $curauth->ID;
* $curauth->jabber;
* $curauth->last_name;
* $curauth->nickname;
* $curauth->user_email;
* $curauth->user_login;
* $curauth->user_nicename;
* $curauth->user_registered;
* $curauth->user_url;
* $curauth->yim;
See more on
http://codex.wordpress.org/Function_Reference/the_author_meta
* user_login
* user_pass
* user_nicename
* user_email
* user_url
* user_registered
* user_activation_key
* user_status
* display_name
* nickname
* first_name
* last_name
* description
* jabber
* aim
* yim
* user_level
* user_firstname
* user_lastname
* user_description
* rich_editing
* comment_shortcuts
* admin_color
* plugins_per_page
* plugins_last_view
* ID
*/
Les élements de la page auteur author.php
<?php
if(isset($_GET['author_name'])) :
$curauth = get_user_by('slug', $author_name);
else :
$curauth = get_userdata(intval($author));
endif;
echo (''.get_author_template().'');
echo ('author_header_illustration => '.$curauth->author_header_illustration.'');
echo ('author_header_baseline => '.$curauth->author_header_baseline.'');
echo ('facebook => '.$curauth->facebook.'');
echo ('linkedin => '.$curauth->linkedin.'');
echo ('aim => '.$curauth->aim.'');
echo ('description => '.$curauth->description.'');
echo ('display_name => '.$curauth->display_name.'');
echo ('ID => '.$curauth->ID.'');
/*....etc.*/
echo ('yim => '.$curauth->yim.'');
/* Queue the first post, that way we know who
* the author is when we try to get their name,
* URL, description, avatar, etc.
*
* We reset this later so we can run the loop
* properly with a call to rewind_posts().
*/
if ( have_posts() )
the_post();
/* use within the loop */
/*
echo (''.the_author_meta('user_level').'');
echo (''.the_author_meta('user_firstname').'');
echo (''.the_author_meta('user_lastname').'');
echo (''.the_author_meta('user_description').'');
echo (''.the_author_meta('rich_editing').'');
echo (''.the_author_meta('comment_shortcuts').'');
echo (''.the_author_meta('admin_color').'');
echo (''.the_author_meta('plugins_per_page').'');
echo (''.the_author_meta('plugins_last_view').'');
echo (''.the_author_meta('ID').'');
*/
/* Since we called the_post() above, we need to
* rewind the loop back to the beginning that way
* we can run the loop properly, in full.
*/
rewind_posts();
/* Run the loop for the author archive page to output the authors posts
* If you want to overload this in a child theme then include a file
* called loop-author.php and that will be used instead.
*/
get_template_part( 'loop', 'author' );
?>
La gestion des feeds par auteur
Il est extrêmement simple de bénéfier du flux exclusif sur la base du nom de l’auteur authorname. Dans le codex, il est dit que les url de feed sont de la forme suivante http://example.com/author/authorname/feed/.
Source : http://codex.wordpress.org/WordPress_Feeds#Authors
Si votre blog utilise des permaliens, vous pouvez donc accéder aux fluxs suivants par auteur :
- [adresse_de_votre_wordpress]/author/[nom_de_l_auteur]/feed/
- [adresse_de_votre_wordpress]/author/[nom_de_l_auteur]/feed/rss/
- [adresse_de_votre_wordpress]/author/[nom_de_l_auteur]/feed/rss2/
- [adresse_de_votre_wordpress]/author/[nom_de_l_auteur]/feed/rdf/
- [adresse_de_votre_wordpress]/author/[nom_de_l_auteur]/feed/atom/
Créer un réseau multi-sites avec Wordpress 3.0
En fait, WPMU et WP ont fusionné depuis la version 3.0. Il vous est donc possible de faire de votre WordPress 3.0, un reseau multi-blogs.
1. Première étape : désactiver les plugins
Il faut désactiver tous les plugins de votre Blog, puis vous livrer au quelques changements dans le fichier wp-config.php
/** Enable or disable Worpress Multi-site features **/
define('WP_ALLOW_MULTISITE', true);2. Deuxième étape : Lancer la procédure d’installation
2.1 Créer a blogs.dir directory
Create a blogs.dir directory in [chemin_vers_wordpress]/wordpress/wp-content. This directory is used to stored uploaded media for your additional sites and must be writeable by the web server.
2.2 Modifier le fichier wp-config.php
Add the following to your wp-config.php file in [chemin_vers_wordpress]/wordpress/ above the line reading /* That’s all, stop editing! Happy blogging. */:
C’est ces lignes qu’il faut ajouter dans votre fichier wp-config.php
define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', false );
$base = '/wp_hemotion/wordpress/';
define( 'DOMAIN_CURRENT_SITE', '127.0.0.1' );
define( 'PATH_CURRENT_SITE', '/wp_hemotion/wordpress/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );
3. Modifier le fichier .htaccess
Add the following to your .htaccess file in [chemin_vers_wordpress]/wordpress/, replacing other WordPress rules:
Le fichier d’origine .htaccess
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp_hemotion/wordpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp_hemotion/wordpress/index.php [L]
</IfModule>
# END WordPressLe fichier modifié .htaccess
# BEGIN WordPress
RewriteEngine On
RewriteBase /wp_hemotion/wordpress/
RewriteRule ^index\.php$ - [L]
# uploaded files
RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L]
# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]
# END WordPress
C’est fait, votre WordPress est devenu un Wordpress MU !
iv. Once you complete these steps, your network is enabled and configured. You will have to log in again. Log In
Since version 3.0, regular WordPress and WordPress MU are merged into WordPress 3.
Source : http://vadimk.com/2010/06/19/enable-wordpress-mu-in-30/
Quel plugin choisir pour étendre le profil des utilisateurs.
Il existe un grand nombre de plugin pour étendre le profil des utilisateurs. Les voici dans le désordre mais nous en avons tester qu’une très faible partie.
En savoir plus
Auteur, blog, CMS, contenu, Multi-utilisateurs, Profil, theme, utilisateurs, Wordpress
31 août 2010 dans CMS, Création de site web, Drupal, Technologie, Tutoriaux, Vidéo, Webdesign par Bruno Flaven
On va tirer profit de Drupal afin de créer une galerie de vidéos depuis un service tiers, en clair les nombreuses plate-formes de partage vidéo à l’instar de youtube, vimeo ou dailymotion. Le recours à ces plates-formes évite de surcharger inutilement, dans la délivrance de vidéos, le serveur qui héberge votre site en plus d’une multitude d’autres services.
L’environnement dans lequel nous avons travaillé est un Drupal version 6.17. Le module que nous allons utiliser est le suivant emfield-6.x-1.24.tar.gz. Il est nécessaire d’installer un module qui permet de paramétrer les views (vues) : views-6.x-2.11.tar.gz.
Il vous faudra activer le module Views
- Embedded Media Field -
emfield-6.x-1.24.tar.gz
http://drupal.org/project/emfield
- Views -
views-6.x-2.11.tar.gz
http://drupal.org/project/views
Installation du module Embedded Media Field
Pour se faire, on va installer un module nommé Embedded Media Field. La fonction principale de ce module est de permettre la création de champs spécifiques (fields) attachés à des types de contenu (content types).
La description du module Embedded Media Field
This extensible module will create fields for node content types that can be used to display video, image, and audio files from various third party providers.
Source : http://drupal.org/project/emfield
Configuration du module Embedded Media Field
Une fois le module installé, il faut se rendre dans la partie Content management où vous pouvez configurer le module Embedded Media Field.
Il va falloir activer les différentes sources ou fournisseurs que vous souhaitez utiliser pour votre galerie de vidéos. Si toutes vos vidéos sont diffusées depuis vimeo.com, il faudra donc paramétrer Vimeo configuration afin d’autoriser l’utilisation de vos vidéos dans Drupal.
Cette activation est globale pour l’ensemble du site. Ici, l’activation de la plate-forme Vimeo
Création du type de contenu video
On crée un type de contenu nommé video dont on supprime dans Submission form settings le champs Body
On dispose d’un content type nommé video comme il existe un type de contenu nommé Story. Il existe aussi un homme nommé cheval mais c’est une autre histoire !
Ajouter des champs à video
C’est une fois que votre contenu type video a été crée que vous allez rajouter des champs spécifiques à l’aide du module Embedded Media Field.
On va rajouter un champs nommé video_url dont le type sera Embedded video
Une fois le champ ajouté, il est possible de le paramétrer de manière plus pointu notamment la taille de la vidéo, la taille de la prévisualisation…etc.
Créer du contenu via le content type “video”
Cela suppose de créer du contenu qui comprend à chaque fois une vidéo. Une fois le contenu créé, il faut aller créer un vue (view) pour publier effectivement l’ensemble des insertions de vidéo que vous venez de faire.
Ajout d’une video Vimeo
Ajout d’une video YouTube
Créer la vue de la galerie de vidéos
La vue (view) se nomme video_gallery dont le type est node
Il faut préciser le chemin (path) où sera accessible votre galerie de vidéos.
Etant en local, notre “path” sera le suivant http://127.0.0.1/DRUPAL_6_17/video
Il faudra ensuite sélectionner les filtres suivants video et published pour qualifier ce node appelé dans la vue (view).
- Le premier filtre est le “Type” est “video”.
- Le deuxième filtre est que le node doit être publié (published)
On a choisi aussi dans le panneau “Basics settings” de mettre l’affichage des vidéos sous forme de grille (grid)
Le premier filtre est le “Type” est “video”
Le résultat
Vous possédez désormais sur votre site une galerie de vidéos provenant de Vimeo et de YouTube, disponible à l’adresse http://127.0.0.1/DRUPAL_6_17/video.
En savoir plus
Les vidéos Vimeo utilisées sont tirées d’un autre article de ce blog.
3 autres modules qui ne sont pas utilisés dans cette article mais sont données juste pour information :
Blip.tv, Dailymotion, Drupal, galerie, Module, vidéos, Vimeo, YouTube
7 août 2010 dans CMS, Création de site web, Image, Graphisme, Photoshop, Meilleurs blogs, PHP, MYSQL, Tutoriaux, Webdesign, Wordpress par Bruno Flaven
Nativement WordPress possède un puissant gestionnaire de médias qui permet de nombreuses manipulations (cropping, édition des metadonnées…etc.). Toutefois, les manipulations une fois les médias envoyés se révèlent plus délicates, par exemple quid des images qui auraient envoyées dans le gestionnaire de médias sans être attachés à un article ou une page que l’on souhaite attacher massivement… et de facto détacher facilement de manière massive ! C’est bien cette question qui nous intéresse : C’est une fois les médias attachés à un article ou à une page comment les détacher et les ré-attacher à un autre article ou une autre page. On va tenter d’y répondre en donnant une sélection de plugins qui permettent des opérations massives d’attachement et de détachement de médias sur les articles comme sur les pages.
Il existe plusieurs articles qui abordent la gestion des médias sous WordPress et une utilisation optimale des meta-données.
Les tests ont été menés sur un WordPress Versión 3.0.1 en espagnol !
La sélection de plugins
Un assortiment de plugins pour faciliter grandement la gestion des médias sous WordPress.
1. Le plugin Bulk Change Attachment Parent, the coolest*…
* le plus cool, c’est à dire le plus simple donc le meilleur…
Un plugin fondu par viper007bond.com, l’auteur de Viper’s Video Quicktags, une référence donc ! Un basique pour ne pas vous ennuyer si les photos que vous venez de mettre en ligne ne sont pas affectées au bon Article (Post) ou à la bonne Page (Page).
Pour Viper’s Video Quicktags, je vous invite à découvrir http://www.viper007bond.com/wordpress-plugins/vipers-video-quicktags/
Les captures ci-dessous montrent la séquence suivante :
- Un envoie des images via le media manager, natif sous Wordpress
- Un attachement à un article nommé
images source, natif sous Wordpress
- Un déplacement massif des images via le plugin
Bulk Change Attachment Parent vers un article nommé images destination dont l’ID est 321
Les images ont été envoyées via le gestionnaire de médias, on sélectionne l’article images source.
On attache massivement les images.
On transfère les images de l’article images source vers l’article images destination.
Dans Bulk Change Attachment Parent, il faut donner l’ID de l’article images destination, celui qui va recevoir les images.
C’est fait, les images sont passées de l’article images source à de l’article images destination.
On attache massivement les images.
2. Le plugin SuperSlider-Media-Pop
Le plugin semble à première vue tout à fait “superfétatoire”, disons simplement superflu et inutilement ajouté. Il bouleverse totalement la vue d’édition de vos articles mais se révèle à l’usage indispensable surtout dans sa manière toute personnelle d’éditer à la hache les metadata de chaque média attaché à un article (post).
L’édition des article change quelque peu…
L’édition d’une image
La vue des images au sein d’un article
Source : http://wordpress.org/extend/plugins/superslider-media-pop/
3. Le plugin WordPress “File gallery”
Ce plugin est tout à fait remarquable, il vous permet de détacher, de transférer, de supprimer tous les médias attachés à un article via un éditeur qui s’ouvre lors de l’édition d’un article dans une boite qui lui est dédié.
Il peut tout de même avoir des ratés, disons plus sérieusement des effets secondaires side-effects avec votre thème ou d’autres plugins.
Source : http://wordpress.org/extend/plugins/file-gallery/
4. Le plugin Faster Image Insert
Globalement la fonctionnalité de ce plugin est de rajouter le media manager de l’article non dans une ThickBox ou Lightbox mais directement dans l’édition de l’article lui-même. Sympa mais sans plus car pas de fonction supplémentaire par rapport au manager traditionnel de médias .
Il est dit que le plugin ne fonctionne pas sur une version au-de-là de la 2.8.5
Source : http://wordpress.org/extend/plugins/faster-image-insert/
5. Le plugin WordPress Media Library Plugin
Un genre de nextgen qui fait tout y compris le café et ne fait souvent que étendre les fonctionnalités natives de la pseudo balise
[media-library-gallery nb="2" cols="2" tag="chambres" category="photos-interieures" orderby="title" order="ASC"]. Une version de ce plugin existe pour un wordpress 3.0
Source : http://shibashake.com/wordpress-theme/media-library-plus-plugin#changelog
Les plugins laissés dans la “sandbox”
Littéralement, les plugins que l’on a laissé jouer dans la “bac à sable” c’est à dire des plugins trop impliquants, trop incertains pour passer en production.
Le plugin List Related Attachments Widget
Inutile…
Source : http://wordpress.org/extend/plugins/list-related-attachments-widget/
Le plugin Attachments
Trop impliquant
Source : http://wordpress.org/extend/plugins/attachments/
Le plugin Change Media Attachment Parent: Wordpress Plugin
Ne semble pas marcher. Ce plugin semble pourtant avoir inspiré SuperSlider-Media-Pop.
Source : http://lacquerhead.ca/2009/07/change-attachment-parent/
A sandbox is a testing environment that isolates untested code changes and outright experimentation from the production environment or repository, in the context of software development including Web development and revision control.
Source : http://en.wikipedia.org/wiki/Sandbox_%28software_development%29
Un petit extrait à joindre éventuellement au fichier functions.php afin de faire apparaitre un lien d’attachement et de détachement. Cf Support for the attach and re-attach
Source : http://wordpress.org/support/topic/detach-amp-re-attach-media-attachment-images-from-posts
add_filter("manage_upload_columns", 'upload_columns');
add_action("manage_media_custom_column", 'media_custom_columns', 0, 2);
function upload_columns($columns) {
unset($columns['parent']);
$columns['better_parent'] = "Parent";
return $columns;
}
function media_custom_columns($column_name, $id) {
$post = get_post($id);
if($column_name != 'better_parent')
return;
if ( $post->post_parent > 0 ) {
if ( get_post($post->post_parent) ) {
$title =_draft_or_post_title($post->post_parent);
}
?>
<strong><a href="<?php echo get_edit_post_link( $post->post_parent ); ?>"><?php echo $title ?></a></strong>, <?php echo get_the_time(__('Y/m/d')); ?>
<br />
<a class="hide-if-no-js" onclick="findPosts.open('media[]','<?php echo $post->ID ?>');return false;" href="#the-list"><?php _e('Re-Attach'); ?></a></td>
<?php
} else {
?>
<?php _e('(Unattached)'); ?><br />
<a class="hide-if-no-js" onclick="findPosts.open('media[]','<?php echo $post->ID ?>');return false;" href="#the-list"><?php _e('Attach'); ?></a>
<?php
}
}En savoir plus
fonctionnalités, manager, media, Medias, photos, plugin, Wordpress
5 juillet 2010 dans Accessibilité, CMS, Création de site web, Image, Graphisme, Photoshop, Meilleurs blogs, Réseaux sociaux, Webdesign, Wordpress, XHTML CSS par Bruno Flaven
On avait vu dans un article récent, l’installation de la toute dernière version de buddypress, cela s’était révélé assez facile mais un des soucis qui émerge rapidement est la nécessité éventuellement de modifier le thème livré par défaut et de le franciser. C’est à cette question que l’on va tenter de répondre en traitant du même coup de l’upgrade automatique qui vous est proposé car pour les amateurs de WordPress qui l’ignorent encore, la WordPress 3.0 “Thelonious” est sorti !
Pour nos besoins, on va travailler sur les deux dernières versions disponibles de WordPress : wordpress-mu-2.9.2.zip
et celle de buddypress buddypress.1.2.4.1.zip l’ensemble de la procédure d’installation va se faire sous MAMP
Installer Buddypress
On rappelle pour mémoire les principales commandes pour installer BuddyPress.
Se connecter au client MySQL de MAMP
/Applications/MAMP/Library/bin/mysql -u root -p
Créer la BDD pour accueillir Buddypress au client MySQL de MAMP
# Création simultanée de la base bp_install
# et de l'utilisateur bp_install
CREATE USER 'bp_install'@'localhost' IDENTIFIED BY 'bp_install'; GRANT USAGE ON *.* TO 'bp_install'@'localhost' IDENTIFIED BY 'bp_install'WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0; CREATE DATABASE IF NOT EXISTS bp_install;GRANT ALL PRIVILEGES ON bp_install.* TO 'bp_install'@'localhost';
Accessoirement si vous souhaitez voir si la BDD bp_install a bien été créée
Le résumé de nos information pour installer WP 3.0
Database Name = bp_install
Database User name = bp_install
Database Password = bp_install
Database Host = localhost
Si vous souhaitez reprendre l’installation de zéro
# Destruction de 'bp_install'@'localhost' ...
DROP USER 'bp_install'@'localhost';
DROP DATABASE IF EXISTS `bp_install` ;
La modification nécessaire du fichier hosts
Lorsque vous installez en local c’est à dire sous un MAMP ou un [EasyPHP], Buddypress, il vous est recommandé de ne pas utiliser par défaut les adresses suivantes : 127.0.0.1 ou localhost. Il vous faudra donc modifier votre fichier hosts en y placant une adresse de cetype par exmple si vous avez décidez que localment le Buddypress va tourner sous l’adresse suivante http://bp.hecube.net
A insérer dans la fichier hosts pour accéder à Buddypress via http://bp.hecube.net
# test for BP
127.0.0.1 bp.hecube.net
Un article pour savoir comment modifier son fichier hosts
Faire les mises à jour manuellement après l’installation de Buddypress
Il y a 3 mises à jour que vous devez effectuer manuellement pour obtenir la toute dernière de Buddypress sous Wordpress Mu.
- Ajouter la ligne
define( 'NONCE_SALT', '7KGp,gJpIY0Amn#@#PkrPVEc}$0p0E%M8|iiw)Ez{9O7un`]O~[6DiHA,0bcae.Z' ); dans wp-config.php sous la ligne /* That's all, stop editing! Happy blogging. */
- Mettre à jour tous les sites qui existent grâce à Wordpress Mu
- Supprimer le fichier
/wp-content/>blogs.php. Ce fichier sera remplacé automatiquement par le fichier wp-includes/ms-files.php
La ligne à rajouter dans wp-config.php
/* That's all, stop editing! Happy blogging. */
define('NONCE_SALT', '7KGp,gJpIY0Amn#@#PkrPVEc}$0p0E%M8|iiw)Ez{9O7un`]O~[6DiHA,0bcae.Z');Mettre le thème par défaut de Budypress en Français
Pour mettre totalement dans une autre langue comme le français en partant des fichiers d'installation en anglais, il faut se préoccuper de mettre Wordpres Mu en français et de mettre aussi Buddypresss en français.
Mettre WordPress Mu en Français
C'est assez simple, l'obejctif est de traduire en français un blog initialement installé en anglais. Pour cela, il vous suffit d'installer les deux fichier suivants : fr_FR.mo et fr_FR.po dans un dossier languages. Ce dossier a comme emplacement [repertoire_d_install_de_wordpressmu]/wp-content/languages
fr_FR.mo est le fichier compilé .mo pour WordPress 3.0 (obligatoire)fr_FR.po est le fichier modifiable .po pour WordPress 3.0 (en cas de besoin)
Il vous faudra aussi changer la ligne suivante dans wp-config.php
/**
* WordPress Localized Language, defaults to English.
*
* Change this to localize WordPress. A corresponding MO file for the chosen
* language must be installed to wp-content/languages. For example, install
* de.mo to wp-content/languages and set WPLANG to 'de' to enable German
* language support.
*/
define ('WPLANG', 'fr');Mettre ensuite la langue par défaut en Français
Mettre Buddypres en Français
On sait désormais que Buddypress se gère comme un plugin, il est dons disponible dans wp-content/plugins/buddypress/. Il faut donc placer dans le répertoire [repertoire_d_install_de_wordpressmu]/wp-content/plugins/buddypress/bp-languages , les deux fichier suivants : buddypress-fr_FR.mo et buddypress-fr_FR.po
buddypress-fr_FR.mo est le fichier compilé .mo pour Buddypressbuddypress-fr_FR.po est le fichier modifiable .po pour Buddypress
En savoir plus
BuddyPress, Internationalisation, theme, Webdesign, Wordpress Mu
4 juin 2010 dans CMS, Création de site web, Divers, Google, Meilleurs blogs, PHP, MYSQL, Référencement, SEO, Tutoriaux, Wordpress par Bruno Flaven
Un des facteurs déterminants pour accroitre à la fois l’audience et le référencement (SEO) de son site est de créer des liens entre les différents articles déjà publiés. C’est une sorte de Collaborative filtering, que l’on voit désormais en action sur tous les sites de e-commerce notamment, le pionnier en la matière étant le site amazon.com. C’est donc ce type de comportement que l’on va tenter de reproduire à l’aide d’un plugin Wordpress.
Pour information, le plugin que nous avons choisi finalement est actif sur le blog consacré au webdocumnetaire - 3wdoc.com/fr/
Notre liste de plugins
A l’origine, notre recherche consistait à tester le plugin conçu par linkwithin.com. Ce plugin remplit cette fonction de croisement d’articles toutefois l’opacité dans son mode d’obtention et de fonctionnement nous ont bien vite dissuader de l’utiliser. Il a donc fallu chercher un plugin susceptible :
- d’accomplir cette tache de liaison entre articles
- d’être autant que possible configurable depuis le backend de WordPress c’est dire que la liaison puisse se faire depuis les mots-clés ou les catégories des articles.
- d’être autant que possible personalisable et traduisible depuis le backend de WordPress.
Pour plus d’information sur le collaborative filtering, voir l’article “Item-to-item collaborative filtering” - http://glinden.blogspot.com/2006/11/item-to-item-collaborative-filtering.html
1. Related Posts Thumbnails
Excellent plugin qui exploite notamment les images au format “thumbnails” ou les images au format “medium” pour illustrer les liens croisées vers les autres articles. Attention, cela suppose toutefois que vous ayez envoyer vos médias via le gestionnaire de medéis natif de WP et non envoyer vos médias à la hussarde via un logiciel FTP car l’illustration est la première image rencontrée, tirée directement du flot HTML de l’article. Les creoisments peuvent se faire via les mots-clés (tags), les catégories (categories) ou les deux.
Source : http://wordpress.org/extend/plugins/related-posts-thumbnails
2. Microkid’s Related Posts
Il est possible de chercher parmi les articles puis de créer une relation avec l’article édité. Par contre, il semble que l’affichage ne se fasse que sous la forme du titre cliqable impossible d’insérer du contenu (title content both).
Source : http://wordpress.org/extend/plugins/microkids-related-posts/
3. Efficient Related Posts
http://wordpress.org/extend/plugins/efficient-related-posts/
Un très bon plugin qui vous permet de traiter sur le base des mots-clés attachés aux articles de créer des relations entre les différents articles de votre blog. Cela suppose toutefois que vous faites un usage intensif des mots-clés pour qualifier vos articles.
Il est possible de traduire les termes qui s’affichent par défaut. Par exemple, Related posts: par Articles similaires : ou Vous aimerez sans doute :, No related posts. par Pas d'articles complémentaires.
4. Yet Another Related Posts Plugin (YARPP)
Rien à voir avec le plugin Yet Another Featured Posts Plugin (YAFPP) de Jon Raasch. Le moins que l’on puisse dire est que le plugin YARPP est un bon plugin !
Source : http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/
5. Related Posts by Category
Un plugin de gestion des articles basé sur les catégories exclusivement comme son nom l’indique.
Source : http://wordpress.org/extend/plugins/related-posts-by-category/
La FAQ pour le plugin de linkwithin.com
Frequently Asked Questions
1.
The widget does not appear/appears incorrectly on my blog. What should I do?
If your blog uses a non-standard custom template/theme, we will need to add support for your blog manually, and we can do this only if the widget remains installed on your blog. Please email us at support AT linkwithin DOT com, and we will fix the problem, usually within 1-2 days. Thank you for your patience!
2.
How does the widget decide what stories to show?
Stories are chosen based on several factors, including title, tags, and content.
3.
Why does the widget sometimes show text links instead of images?
The widget shows text links when most of the recommended posts in the widget do not have an image.
4.
How can I customize the placement of the widget on my blog?
Modify your HTML template to add the code below at the place where you want the widget to appear:
<div class="linkwithin_div"></div>
5.
How can I customize the text that appears above the widget?
Modify your HTML template to include the code below:
<script>linkwithin_text='Your custom text:'</script>
6.
Are there ads in the widget? How do you make money?
We plan to introduce revenue-sharing features in the future, but they will be optional.
7.
I have several blogs. How can I install the widget on each of them?
Please repeat the installation process starting here for each blog. Simply repeating the steps on the installation page will not work because we need to generate a unique identifier for each blog.
Source : http://www.linkwithin.com/faq
En savoir plus
articles, catégorie, Collaborative filtering, mot-clé, plugin, Référencement, SEO, Wordpress
28 mai 2010 dans Création de site web, Flash, Actionscript, Flex, Flex, Google, Image, Graphisme, Photoshop, Javascript, Ajax, Technologie, Tutoriaux, Vidéo, Widget, Gadget par Bruno Flaven
Il s’agit de montrer des principes en fonction sur chaque type vidéo où il est possible de marquer les vidéos avec de nombreux points qui interagissent avec le service cartographique de Google. Utiliser l’exemple fourni par le service cartographique de Google offre une grande facilité à passer d’un format à un autre .flv ou .mp4 notamment, ce qui est toujours intéressant, vous concevez la gestion des vidéos en dichotomie complète par rapport à la programmation. L’idée qui prévaut, c’est de charger des cuepoints à l’aide d’un fichier .as ou .xml sur une vidéo de type .flv ou .mp4. En l’occurrence dans notre exemple, nous allons chercher à charger ces points via une fichier AFCVideoSyncMapClass.as.
On va utiliser une partie de la librairie en AS3, UMap (AS 3.0) V. 1.6.8, conçu par Matt Wiggins pour le compte de www.afcomponents.com. L’auteur de cette librairie , d’évidence un excellent développeur à la lecture de ces états de service, gagne à être connu car il a fait beaucoup sans le savoir dans la conception de webdocumentaire lorsqu’il s’agit de connecter un service de cartographie de chez Bing ou de chez Google. Pour en savoir plus le webdoc ou webdocumentaire, on vous invite à découvrir le blog de www.3wdoc.com et notamment l’article consacré à Las Vegas Sun qui met en pratique les principes exposés ici sur l’interconnexion entre des cartes et des vidéos.
La même expérience d’utilisation des cuepoints a été tentée mais à l’aide du flowplayer et de cuepoints en embed. C’est un fonctionnement efficace mais plus basique.
Installation du projet cartographique
Une des choses les plus importantes à faire est d’insérer à la librairie .swc fourni par Google pour tirer profit de l’API Google Map.
On avait déjà dans un article précèdent effectué une telle opération. Il faut récuperer le SDK de Google Map qui se résume à une archive zip sdk.zip.
Ce fichier contient 2 répertoires :
- Le répertoire
lib qui contient les fichiers dont vous allez avoir besoin : map_1_18.swc et map_flex_1_18.swc.
- Le répertoire
docs qui contient toute la documentation des class notamment pour manipuler les cartes google.
Les 2 ou 3 choses à faire…
Pour mémoire, voici les quelques manipulations à effectuer pour pourvoir faire fonctionner les sources à télécharger sur google.
- Il vous faut créer le répertoire
lib dans votre projet Flex et copier les deux fichiers map_1_18.swc et map_flex_1_18.swc dans ce répertoire.
- Un autre conseil, dans la démonstration de google, il manque le fichier vidéo, c’est ballot ! Enregistrer le fichier
cheesey_adventure.flv et coller dans le répertoire bin-debug sinon point de vidéo il y aura ! On va d’ailleurs ensuite chnagerla vidéo pur une vidéo au format .mp4
- Changer le
path pour accéder au .swc
Pour plus d’information sur le changement de path pour accéder au .swc, vous pouvez vous reporter à ce précèdent article.
L’importation du projet flex AFCVideoSyncMap.zip
Mettre le fichier .swc qui permet de s’interfacer à la Google API
C’est une des choses importantes à faire pour profiter de la Google AP sous Flex. On trouve ces sources sur le site de google
Source : http://code.google.com/intl/fr/apis/maps/documentation/flash/intro.html
Les sources et les exemples de Google Map API sous Flash/Flex
C’est vraiment la caverne d’Ali-Baba pour ceux d’être vous qui souhaitent comprendre l’incroyable richesse de la Google Map API. On peut aussi utiliser l’expression de Le saint des saints, où tout n’est que stupeur et tremblements.
Le rendu sous Flex
Par rapport à l’exemple de Google, on a allègrement changé la vidéo et les différents points de la carte. le film est en .mp4 encodé à l’aide du codec H.264, ou MPEG-4 AVC (Advanced Video Coding).
Cuepoint 1 - Delft, Pays-Bas
Cuepoint 2 - Burgos, Espagne
Cuepoint 3 - Tallinn, Estonie
Cuepoint 4 - Yokohama, Japon
Cuepoint 5 - Paris, France
Cuepoint 1 - Uppsala, Suède
Le fichier AFCVideoSyncMap.mxml qui dessine l’interface
<?xml version="1.0" encoding="utf-8"?>
<examples:AFCVideoSyncMapClass xmlns:examples="com.afcomponents.googlemaps.examples.*"
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Canvas x="10" y="10" width="800" height="280" id="mapCanvas"
borderColor="#000000" borderStyle="solid" borderThickness="1">
</mx:Canvas>
<mx:VideoDisplay x="815" y="10" width="320" height="280" id="player"
autoPlay="false" cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
borderStyle="none" borderThickness="1" borderColor="#333333"/>
<mx:Image x="10" y="292" width="32" height="32" id="btnPlay"
source="@Embed(source='images/play.jpg')" autoLoad="true" scaleContent="true" visible="true"/>
<mx:Image x="10" y="292" width="32" height="32" id="btnPause"
source="@Embed(source='images/pause.jpg')" scaleContent="true" autoLoad="true" visible="false"/>
</examples:AFCVideoSyncMapClass>
Les fameux cuepoints dans le fichier AFCVideoSyncMapClass.as
// add cue points
cuePointArray.push({name:"0", time:5, type:"actionscript"});
cuePointArray.push({name:"1", time:35, type:"actionscript"});
cuePointArray.push({name:"2", time:65, type:"actionscript"});
cuePointArray.push({name:"3", time:95, type:"actionscript"});
cuePointArray.push({name:"4", time:125, type:"actionscript"});
cuePointArray.push({name:"5", time:155, type:"actionscript"});
// associative array of locations (indexed by cue point name)
locationNameArray.push("Delft, Pays-Bas");
locationNameArray.push("Burgos, Espagne");
locationNameArray.push("Tallinn, Estonie");
locationNameArray.push("Yokohama, Japon");
locationNameArray.push("Paris, France");
locationNameArray.push("Uppsala, Suède");La taille et la position de la barre de progression
progressContainer.x = 47;
progressContainer.y = 292;
progressContainer.width = 763;
progressContainer.height = 32;player.source = "flex_cuepoints_1.mp4";
player.totalTime = 172;
Les films
Le concept de film qui a prévalu pour la recherche est de trouver un film sur une ville en “time elapse”.
- Delft, Pays-Bas
http://www.flickr.com/photos/ettubrute/2421493040/in/set-72157604459717172/
- Burgos, Espagne
http://vimeo.com/10520963
- Tallinn, Estonie
http://vimeo.com/10323109
- Paris, France
http://vimeo.com/10520963
- Yokohama, Japon
http://vimeo.com/1259473
- Uppsala, Suède
http://vimeo.com/11550813
Source : http://vimeo.com/videos/search:time+elapse/
En savoir plus
actionscript, afcomponents, Flex, flv, Google Map, MP4, Vidéo
19 mai 2010 dans CMS, Création de site web, Divers, Meilleurs blogs, PHP, MYSQL, Widget, Gadget, Wordpress par Bruno Flaven
On s’intéresse de près à la vidéo mais on oublie souvent l’audio qui est tout aussi important pour agrémenter ces articles sur un blog ou ailleurs d’une source complémentaire d’information. On s’est donc pencher sur les quelques plugins qui permettent facilement sous wordpress d’agrémenter ces articles de le lecteur MP3 en vue de diffuser du podcast.
Voici notre shortlist des 5 meilleurs plugins que nous ayons tester. Pour mémoire, les critères de choix sont simples :
- L’apparence de player doit être configurable pour être en accord avec la charte du template.
- L’insertion des fichiers audio doit être simplisme soit à l’aide d’une pseudo-balise soit via un bout de code html basique.
- Le player doit faire un usage modéré des metadonnées (metadatas) inclut dans son apparence, pour ne pas voir à faire appel à un ingénieur du son à chaque fois que l’on souhaite encoder et mettre un fichier audio.
Note : Sur le chapitre des metadonnées, on en a déjà fait beaucoup état, dans des articles précédents, pour la gestion de la vidéo et de la photo, en rappelant tout le bénéfice qui peut être tiré.
Notre sélection
Comme toutes les sélections, elle est arbitraire car elle n’as pas vocation à être exhaustive, elle donne néanmoins un aperçu rapide des différents plugins existants sous WP pour jouer des MP3, faire du podcasting comme on dit. A noter, la plupart des plugins cités délivrent le fichier audio en http_streaming c’est à dire comme les images d’une page HTML par exemple.
1. Le plugin Audio Player
Un très bon plugin mais qui connait parfois des ratés en fonction du template…
[audio: {url_de_votre_wordpress}/uploads/2010/05/le_nom_de_mon_fichier_audio.mp3]
Les propriétés du plugin une fois installé
L’interface de gestion de l’apparence du plugin
Le rendu dans un article de la balise [audio: {url_de_votre_wordpress}/uploads/2010/05/le_nom_de_mon_fichier_audio.mp3]
Source : http://wordpress.org/extend/plugins/audio-player/
2. WPaudio MP3 Player
Ce plugin insère un bon player basique et simple, très facile d’installation. Un petit souci, ce plugin lit directement les metadatas attachées au fichier mp3 donc il vous faudra compléter correctement ces metadatas au risque de voir apparaître des valeurs undefined dans vos articles WP.
Les propriétés du plugin une fois installé
Les propriétés du plugin une fois installé
L’insertion des metadatas à l’encodage au format .mp3
Source : http://wordpress.org/extend/plugins/wpaudio-mp3-player/
3. Le plugin podPress
Un plugin complet mais trop complet… Les amateurs du paramétrage aux petits oignons y trouveront leurs compte.
L’apparence du player est configurable
Source : http://wordpress.org/extend/plugins/podpress/
4. Le plugin Tierra's Audio Playlist Manager
C’est l’outil qu’il faut pour faire des playlists mais il vous faudra créer des playlist malgér pour gérer des fichiers audio unique, ce qui est un peu fastidieux. Pas de paramètre pour régler la gestion d’affichage, dommage !
Une pseudo balise permet de faire appel au player…
[ti_audio name="nom_de_la_playlist"]
La gestion des playlists
L’obtention du code d’insertion dans un article
Source : http://wordpress.org/extend/plugins/tierra-audio-playlist-manager/
5. Audio Link Player
Le plugin réduit à sa plus simple expression. Ce dernier rend simplement le service qu’on lui demande c’est à dire insérer et jouer des fichiers audio à l’intérieur des articles.
<a href="{url_de_votre_wordpress}/uploads/2010/05/le_nom_de_mon_fichier_audio.mp3"></a>Le fichier audio s’insère comme un lien
Source : http://wordpress.org/extend/plugins/audio-link-player/
Conclusion : Cet article a comme vocation de montrer comment publier rapidement vraiment un fichier audio sur un blog en privilégiant bien sur le travail d’”editing” qui serait à faire sur les éventuels fichiers audio. On peut voir le résultat qui figure en partie sur les captures d’écran. Une interview de Samuel Bollendorf, http://bit.ly/sambollendorf sur 3wdocs.com.
En savoir plus
audio, metadonnées, player, Playlist, podcast, Wordpress, xml
15 mai 2010 dans Création de site web, Divers, Flash, Actionscript, Flex, Flex, Image, Graphisme, Photoshop, Javascript, Ajax, Technologie, Tutoriaux, Vidéo par Bruno Flaven
La vidéo sur Internet est depuis longtemps “the big thing”. A ce jour et en attendant l’HTML5, pour jouer de la vidéo, vous êtes obligé(e) d’avoir un player vidéo fait en Flash ou Flex. Si on a ni le temps, ni les moyens de faire développer un player sur mesure, il faut donc se résoudre à faire appel à un produit déjà développé. Au vu du grand nombre de players disponibles, cela tourne vite au casse-tête de faire un choix. Par ailleurs tous ces players sont loin de posséder les mêmes capacités. On avait déjà écrit un article sur un des players les plus performants et les plus populaires : The JW Player™. On va parler dans cette article d’un de ces excellents concurrents : Flowplayer. C’est tout bonnement à notre avis le player flash du moment, le plus complet, le mieux documenté, le plus performant… Bref on en vient à manquer de superlatifs !
Les qualités du flowplayer
Tout d’abord la démonstration du player flowplayer et de sa capacité à lire les “cuepoints” http://social.hecube.net/flowplayer/
Les qualités du flowplayer sont nombreuses. Il offre plein de possibilité outre la lecture d’un fichier MP4 (codec H.264) ou d’un fichier FLV (codec On2PV6) notamment la fonctionnalité de FLV fallback en attendant l’HTML5 bien sûr !
Au cas où la lecture de vidéo MP4 n’est pas supporté pas l’utilisateurs, le flowplayer est capable de faire appel si besoin à des fichiers .flv (FLV fallback).
The trick here was to use flashembed’s isSupported method. All of flashembed’s static methods are available because this tool is included in the Flowplayer script.
M4V encoding is used on the video which provides the best video quality you can have on the web today together with a relatively small file size. Typical video formats such as MPG or MOV does not work with Flash and they must first be converted to MP4, M4V or FLV. Take a look at this forum post about MP4 (or H.264) video conversion.
FLV fallback is used to provide a regular FLV video for those Flash clients that do not support support MP4. MP4 support was added to Flash in version 9.115 and lower versions can only play FLV files. You should note that the FLV format is not a bad format. It provides a small file size with relatively good quality. the FLV format can be optimized with a technology called “ON2″ and you can find more information about it here.
Il existe aussi de nombreuse possibilités de gestion de la barre de contrôle
JavaScript plugin: Controlbar
Source : http://flowplayer.org/demos/plugins/javascript/
Installer le flowplayer
On va installer le flowplayer en local, sur un serveur qui tourne sur MAMP afin d’effecteur quelques tests sur les capacités dudit player notamment un test sur sa capacité à gérer les “cuepoints”.
Il est nécessaire d’autoriser votre plugin flash à charger des .swf
Erreur de chargement de flowplayer.controls.swf
Le texte de l’erreur 301
Le texte de l’erreur 301
Comme souvent à la mise en place du player, on rencontre quelques erreurs… Rien de grave, juste le nom d’un fichier .swf qui
No Controlers - 301:Unable to load plugin: unable to load plugin 'controls', url: 'flowplayer.controls.swf'
La solution à l’installation pour faire tourner le player en local.
Il vous suffit de renommer flowplayer.controls-3.2.0.swf en flowplayer.controls.swf
For those of you that are having this same problem - I found the answer. The control file that comes with the download is flowplayer.controls-3.2.0.swf however the flowplayer-3.2.0.swf file is actully trying to load a file called flowplayer.controls.swf.
Source: http://flowplayer.org/forum/5/40605
L’insertion des “cuepoints” à l’aide de Adobe Media Encoder CS4 dans une vidéo .flv
L’encodage à l’aide de Adobe Media Encoder CS4 avec le xml de “cuepoints”
Une fois la liste de “cuepoints” définie, il ne reste qu’à les intégrer au sein de l’encodage de la vidéo au format .flv
Tester l’insertion des “cuepoints embedded” à l’aide de flvtool2
Pour cela on va se servir d’un outil nommé FLVTool2. Cet outil existe sur Mac et PC, il est même distribué dans le “couteau suisse” de FLVKnife
Afin de déterminer si les “cuepoints” sont bien dans la vidéo… étant donné qu’ils sont en “embedded” comme des journalistes qui accompagnent des militaires !
Faire sortir les metadatas de la vidéo au format .txt
flvtool2 -P /Applications/MAMP/htdocs/flowplayer/example/best_after_effects_movie_1.flv
Faire sortir les metadatas de la vidéo au format .xml
flvtool2 -Px /Applications/MAMP/htdocs/flowplayer/example/best_after_effects_movie_1.flv
Faire sortir les metadatas de la vidéo au format .xml et les insrérer dans un fichier best_after_effects_movie_1_flv.xml
flvtool2 -Px /Applications/MAMP/htdocs/flowplayer/example/best_after_effects_movie_1.flv > /Applications/MAMP/htdocs/flowplayer/example/best_after_effects_movie_1_flv.xml
Tester la lecture des “cuepoints embedded” à l’aide de flowplayer
Voici une capture des différents “cuepoints” insérées au sein de la vidéo .flv. Chaque “cuepoint” permet l’affichage d’une légende (caption) attaché à un instant donné de la vidéo (timecode). Les temps sont donnés en millisecondes.
Le début de la vidéo
TestEvent1 @ 4000
TestEvent2 @ 7000
TestEvent3 @ 10000
TestEvent4 @ 13000
TestEvent5 @ 18000
TestEvent6 @ 26000
TestEvent7 @ 28000
TestEvent8 @ 35000
TestEvent9 @ 40000
Les sources des fichiers .xml
Le fichier xml tags_flash.xml qui insère les cuepoints dans la vidéo best_after_effects_movie_marcel_ziul.flv.
<?xml version='1.0' encoding='UTF-8' ?>
<FLVCoreCuePoints>
<!-- begin list -->
<!-- cuepoint 1 -->
<CuePoint>
<Time>4000</Time>
<Type>navigation</Type>
<Name>TestEvent1</Name>
<Parameters>
<Parameter>
<Name>Caption</Name>
<Value>Des légendes en Français, en Portugais et en Allemand avec les cuepoints sur une vidéo.</Value>
</Parameter>
</Parameters>
</CuePoint>
<!-- cuepoint 2 -->
<CuePoint>
<Time>7000</Time>
<Type>navigation</Type>
<Name>TestEvent2</Name>
<Parameters>
<Parameter>
<Name>Caption</Name>
<Value>Une modernité enfin explorée</Value>
</Parameter>
</Parameters>
</CuePoint>
<!-- cuepoint 3 -->
<CuePoint>
<Time>10410</Time>
<Type>navigation</Type>
<Name>TestEvent3</Name>
<Parameters>
<Parameter>
<Name>Caption</Name>
<Value>Rio Janeiro, Brésil</Value>
</Parameter>
</Parameters>
</CuePoint>
<!-- cuepoint 4 -->
<CuePoint>
<Time>13346</Time>
<Type>navigation</Type>
<Name>TestEvent4</Name>
<Parameters>
<Parameter>
<Name>Caption</Name>
<Value>Marcel Ziul V10. Le slogan de TV Globo : Rede Globo > A gente se vê por aqui</Value>
</Parameter>
</Parameters>
</CuePoint>
<!-- cuepoint 5 -->
<CuePoint>
<Time>18618</Time>
<Type>navigation</Type>
<Name>TestEvent5</Name>
<Parameters>
<Parameter>
<Name>Caption</Name>
<Value>Good After Effects Video. Des effets sur la vidéo comme si il en pleuvait...</Value>
</Parameter>
</Parameters>
</CuePoint>
<!-- cuepoint 6 -->
<CuePoint>
<Time>26526</Time>
<Type>event</Type>
<Name>TestEvent6</Name>
<Parameters>
<Parameter>
<Name>Caption</Name>
<Value>Skull, Crâne, une tête de mort ?? Nous ne sommes pas loin du Père Lachaise à Paris</Value>
</Parameter>
</Parameters>
</CuePoint>
<CuePoint>
<Time>28895</Time>
<Type>event</Type>
<Name>TestEvent7</Name>
<Parameters>
<Parameter>
<Name>Caption</Name>
<Value>Food, La nourriture ! Portal gastronómico Lo Mejor de la Gastronomía. Guía y ranking de restaurantes, grandes platos, productos gastronómicos y vinos.</Value>
</Parameter>
</Parameters>
</CuePoint>
<!-- cuepoint 7 -->
<CuePoint>
<Time>35268</Time>
<Type>event</Type>
<Name>TestEvent7</Name>
<Parameters>
<Parameter>
<Name>Caption</Name>
<Value>MTV, une chaîne musicale à la télévision ! Seht die weißen Streifen auf der Bühne. Checkt die Clips!</Value>
</Parameter>
</Parameters>
</CuePoint>
<!-- end list -->
</FLVCoreCuePoints>
Le même fichier généré tags_flash_flvtool2.xml depuis la vidéo best_after_effects_movie_marcel_ziul_flash_tagged.flv à l’aide Flvtool2
flvtool2 -Px /chemin/vers/le/fichier/best_after_effects_movie_marcel_ziul_flash_tagged.flv > /chemin/vers/le/fichier/best_after_effects_movie_marcel_ziul_flash_tagged.xml
<?xml version="1.0"?>
<fileset>
<flv name="/Applications/MAMP/htdocs/flowplayer/example/OK_best_after_effects_movie_4_meta.flv">
<duration>111.833</duration>
<cuePoints>
<6>
<name>TestEvent7</name>
<parameters>
<Caption>Food, La nourriture ! Portal gastronómico Lo Mejor de la Gastronomía. Guía y ranking de restaurantes, grandes platos, productos gastronómicos y vinos.</Caption>
</parameters>
<time>28.895</time>
<type>event</type>
</6>
<7>
<name>TestEvent8</name>
<parameters>
<Caption>MTV, une chaîne musicale à la télévision ! Seht die weißen Streifen auf der Bühne. Checkt die Clips!</Caption>
</parameters>
<time>35.268</time>
<type>event</type>
</7>
<8>
<name>TestEvent9</name>
<parameters>
<Caption>An it goes and on and on....</Caption>
</parameters>
<time>40</time>
<type>event</type>
</8>
<0>
<name>TestEvent1</name>
<parameters>
<Caption>Des légendes en Français, en Portugais et en Allemand avec les cuepoints sur une vidéo.</Caption>
</parameters>
<time>4</time>
<type>navigation</type>
</0>
<1>
<name>TestEvent2</name>
<parameters>
<Caption>Une modernité enfin explorée</Caption>
</parameters>
<time>7</time>
<type>navigation</type>
</1>
<2>
<name>TestEvent3</name>
<parameters>
<Caption>Rio Janeiro, Brésil</Caption>
</parameters>
<time>10.41</time>
<type>navigation</type>
</2>
<3>
<name>TestEvent4</name>
<parameters>
<Caption>Marcel Ziul V10. Le slogan de TV Globo : Rede Globo > A gente se vê por aqui</Caption>
</parameters>
<time>13.346</time>
<type>navigation</type>
</3>
<4>
<name>TestEvent5</name>
<parameters>
<Caption>Good After Effects Video. Des effets sur la vidéo comme si il en pleuvait...</Caption>
</parameters>
<time>18.618</time>
<type>navigation</type>
</4>
<5>
<name>TestEvent6</name>
<parameters>
<Caption>Skull, Crâne, une tête de mort ?? Nous ne sommes pas loin du Père Lachaise à Paris</Caption>
</parameters>
<time>26.526</time>
<type>event</type>
</5>
</cuePoints>
<audiodatarate>256</audiodatarate>
<framerate>30</framerate>
<canSeekToEnd>true</canSeekToEnd>
<videocodecid>4</videocodecid>
<audiodelay>0.027</audiodelay>
<height>480</height>
<audiocodecid>2</audiocodecid>
<videodatarate>1600</videodatarate>
<width>720</width>
</flv>
</fileset>
Le fichier flowplayer_metadata_video.html qui charge le player et permet l’affichage des cuepoints notamment du paramètre spécifique p.parameters.Caption.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>flowplayer - cuepoints embedded</title>
<meta name="author" content="hecube.net">
<script type="text/javascript" src="flowplayer-3.2.0.min.js"></script>
<style>
/* container has a background image */
a.player {
display:block;
width:500px;
height:340px;
text-align:center;
color:#fff;
text-decoration:none;
cursor:pointer;
-moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
}
a.player:hover {
background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.898), rgba(6, 6, 6, 0.898));
}
/* splash image */
a.player img {
margin-top:125px;
border:0;
}
#info {
width:410px;
padding:8px;
border:1px solid #ccc;
background-color:#efefef;
font:16px "bitstream vera sans", "verdana";
margin-left:125px;
}
.player {
width:410px;
padding:8px;
border:1px solid #ccc;
background-color:#efefef;
font:16px "bitstream vera sans", "verdana";
margin-left:125px;
}
</style>
</head>
<body>
<div class="player">
<a style="display:block;width:720px;height:480px" id="player">
</a>
</div>
<script>
/*
*/
flowplayer("player", "../flowplayer-3.2.0.swf", {
clip: {
url: 'best_after_effects_movie_marcel_ziul_flash_tagged.flv',
// you can do different things on each cuepoint by checking the time
onCuepoint: function(clip, p) {
document.getElementById("info").innerHTML = "time : " +p.time+ ", name: " + p.name+", type: " + p.type+", parameter : " +p.parameters.Caption+ " ";
}
}
});
</script>
<div id="info" class="box info">
L'espace d'affichage des cuepoints est ici
</div>
</body>
</html>Conclusion
Il est plus astucieux de lire un xml avec des “cuepoints” via de l’actionscript que de les intégrer c’est à dire les “embedded”. Ainsi, vous pourrez lire des fichiers au format MP4 (H.264) ou FLV selon le protocole qui vous convient, sans faire subir aucune “altération”, c’est à dire l’injection de metadatas, à vos fichiers vidéos. Ainsi, la conclusion est-elle d’éviter les cuepoints en embedded !!! D’un point de vue purement pratique, il existe une réelle difficulté à faire fonctionner flvtool2. Par ailleurs, le programme Adobe Media Encoder CS4 fonctionne mais produit des fichiers différents de flvtool2.
En savoir plus
actionscript, Flash, Flex, Flowplayer, flv, Javascript, MP4, vidéos
22 avril 2010 dans CMS, Création de site web, Divers, Ecommerce, PHP, MYSQL, Technologie, Tutoriaux par Bruno Flaven
On avait abordé dans un article précèdent la question de créer une boutique en ligne adossée à des CMS connus type Drupal ou Wordpress, c’était probant mais pas vraiment concluant ! Pourquoi alors ne pas tout simplement installer un système de boutique en ligne à part entière qui autorise la création complète d’une boutique en ligne plutot de coller une “verrue” à votre CMS existant sopuvent pas dimensionné pour accueillir ce type d’extension fonctionnelle qu’ets une boutique en ligne. On a fini par trouver un OpenCart v1.4.7 grâce aux conseils avisés de Tom.
La baseline du site pour présenter le OpenCart v1.4.7
OpenCart is an open source PHP-based online shopping cart system. A robust e-commerce solution for Internet merchants with the ability to create their own online business and participate in e-commerce at a minimal cost.
Un développement de boutique doté d’un approche MVC
C’est une boutique en ligne construite, en PHP-MySQL, sur un modèle en MVC (Model-View-Controller) donc sur les principes bien connus des développeurs de frameworks PHP (Kohana, CodeIgniter, CakePHP, Zend, Symphony…etc). Nous nous sommes abondamment étendus sur la question des frameworks dans de nombreux articles précédents :
Assez bavasser, passons à l’installation et à l’utilisation de OpenCart v1.4.7. Une dernière chose cependant, l’ensemble du test d’installation et d’utilisation va être fait en, local, sur MAMP et avec le dernière version de OpenCart, la OpenCart v1.4.7.
Ci-dessous, les pré-requis techniques pour faire fonctionner le système OpenCart v1.4.7.
Latest Version
v1.4.7 Released 11th April, 2010
License
GNU GPL License
Requirements
* Apache
* PHP (at least 5)
* MySQL
Merci @ Tom pour nous avoir fait découvrir cet excellent système de boutique en ligne… et les découvertes risquent de ne pas s’arrêter là !
Installer OpenCart v1.4.7
La première chose à faire est de préparer la BDD (Base De Données) MySQL qui va réceptionner votre boutique faite sous OpenCart v1.4.7. Un bref rappel des commandes MySQL pour créer en deux coups de cuillère à pot la base et l’utilisateur et les droits.
Se connecter via la console Mac au client MySQL de MAMP
/Applications/MAMP/Library/bin/mysql -u root -p
Créer la BDD
# Création simultanée de la base oc_install
# et de l'utilisateur oc_install
CREATE USER 'oc_install'@'localhost' IDENTIFIED BY 'oc_install'; GRANT USAGE ON *.* TO 'oc_install'@'localhost' IDENTIFIED BY 'oc_install'WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0; CREATE DATABASE IF NOT EXISTS oc_install;GRANT ALL PRIVILEGES ON oc_install.* TO 'oc_install'@'localhost';
Détruire la BDD si vous souhaitez recommencer
# Destruction de 'oc_install'@'localhost' ...
DROP USER 'oc_install'@'localhost';
DROP DATABASE IF EXISTS `oc_install` ;
Les informations indispensables à l’installation de OpenCart v1.4.7
Database Name = oc_install
Database User name = oc_install
Database Password = oc_install
Database Host = localhost
Le moins que l’on puisse dire est que l’installation est d’une grande simplicité, une fois que vous avez en main les accès à votre BDD.
Etape 1
Etape 2
Etape 3 - les paramètres de connexion
Etape 4 - C’est fait de connexion - Vous obtenez les accès à votre compte administrateur de la future boutique en ligne
*Username: admin
*Password: opencart
Il faut supprimer le dossier install comme souvent dans ce genre de système, dans notre exemple, ce répertoire se trouve à l’emplacement suivant /Applications/MAMP/htdocs/opencart/store/install/. Il faut aussi conserver le couple user/password de l’administrateur de votre futur boutique en ligne, c’est préférable !
- Frontend
http://127.0.0.1/opencart/store/
- Backend
http://127.0.0.1/opencart/store/admin/
Le fichier install.txt découenné de toutes fioritures.
/////////////////////////////////
/// OpenCart V1.4 ///
/// Install Instruction ///
/// http://www.opencart.com ///
/////////////////////////////////
-------
INSTALL
-------
1. Upload all the files and folders to your server from the "Upload" folder.
This can be to anywhere of your choice.
e.g. /public_html/store or /public_html
2. If you have a Linux/Unix make sure the following folders and files are writable.
chmod 0755 or 0777 image/
chmod 0755 or 0777 image/cache/
chmod 0755 or 0777 image/data/
chmod 0755 or 0777 system/cache/
chmod 0755 or 0777 system/logs/
chmod 0755 or 0777 download/
chmod 0755 or 0777 config.php
chmod 0755 or 0777 admin/config.php
3. Make sure you have installed a MySQL Database which has a user assigned to it
DO NOT USE YOUR ROOT USERNAME AND ROOT PASSWORD
4. Visit the store homepage
e.g. http://www.example.com or http://www.example.com/store/
5. Follow the onscreen instructions.
6. Delete the install directory.
For any support issues please visit: http://www.opencart.com
EOF
Le fichier changes.txt qui répertorie les avantages OpenCart v1.4.7.
-- OpenCart v1.4.7 --
FIXED:
- Coupon discount taking more than the product total. Now matches max product total
- "Total" order total module allowed negative totals if discounts exceeded total. Now stops at 0
- Several language duplicates removed
- Some city names updated in sql
- Fixed potential filemanager while loop error with readdir (Based on php.net's recommendation)
- Fixed sagepay array for FailureURL
- Fixed weight based shipping not supporting 0 cost
- Fixed document $styles and $scripts on header.tpl to properly support the correct options
- Shifted the shipping POST check to avoid reloading rate request when going to the payment page and not using quote session check
- Cleaned up field size inconsistencies with email length between the validation checks and the db
- Fixed login link to correct "&" vs "&";
- Account approve not allowing logins for existing customers
- Fixed Google Sitemap xml error to correct "&" vs "&amp";
- Sort by price converting to string issue
- store_url duplication in customer approval email
- Fixed typo in customers "awating" approval function names
- Fixed typo in order model for "notifiy" in the update function
- Fixed incorrect Customers Awaiting Approval count on admin dashboard
ADDED:
- Universal Upgrade Script (supports upgrades as far back as v1.3.0)
- Category Status in admin (per-category)
- Information Status in admin (per-item)
- Country Status in admin
- Zone status in admin
- Shipping Quote Session option in admin
- Added version constant at the top of the startup.php file to allow programmatic usage
- Added page warning on pages with multi-tabs to show error at top instead of just the field errors so it is clear
- Items per page for admin rows configurable via admin
- Items per page for catalog items configurable via admin (per store)
- Show Weight on Cart page option in admin (per store)
- Latest Module
- Specials Module
- Featured Module
- Disable coupon order total will also disable coupon entry box on front end
- Persist original route if login required
- Disabling language removes requirement from need for entry in admin
- Thickbox agree terms on checkout and create
- Added Model Search checkbox on Advanced Search
- Added Popular Products model function (Order by Viewed) for future use.
- Added $product_info array to the product to make echoing additional fields easier
- Improved order data return without double processing/subset
- Added support for common base product discount pricing
- Added Improved language support. Fallback to English for missing entries to avoid fatal errors over missing language file
- Added setting language from url ...route=common/home&language=de
- Added setting currency from url ...route=common/home&currency=USD
- Added Product Tag table and added search support in tags.
En savoir plus
boutique en ligne, Commerce électronique, e-commerce, MySQL, opencart 1.4.7, PHP
13 avril 2010 dans Divers, Flash, Actionscript, Flex, Flex, Image, Graphisme, Photoshop, Technologie, Tutoriaux, Webdesign, XHTML CSS par Bruno Flaven
On ne rappelle jamais assez l’importance d’un webdesign soigné et chaque jour nous devrions méditer chez Hecube ou ailleurs cette phrase de Raymond Loewy La laideur se vend mal…. Par ce premier article de cette série consacrée à l’art du skinning et du styling sous Flex, on continue d’explorer l’art et la manière de personnaliser par des techniques simples la création d’applications sous Flex comme on le fait naturrelement pour de simples templates ou thèmes de CMS pour Wordpress ou Drupal.
Installer les composants nécessaires
Il s’agit de tirer profit des capacités de Flash à produire des skins pour le compte de Flex. En effet, il eut été idiot de se couper du très grand nombre de ressources graphiques, on parle tout aussi bien des individus (flasheurs) que des sources (fichiers) qui permettraient de personnaliser une application faite sous Flex.
Cette possibilité d’importation est d’ailleurs à l’ensemble de ce qui constitue la suite Adobe Illustrator notamment. Tous les logiciels de la suite désormais Adobe peuvent être des contributeurs graphiques à la personnalisation de votre application sous Flex.
Installation du composant nécessaire sous Flash CS4 pour exporter pour Flex Builder 3
Le composante st à télécharger sur le site de Adobe. D’autres composants sont disponibles à cet endroit pour l’ensembles des programmes de la suite Adobe.
Source : Flex MX Skin Design Extensions & Flex Component Kit for Flash Professional downloads
http://www.adobe.com/go/flex3_cs3_swfkit
Skinning & Styling : jouer avec la CSS
Voici la source du fichier Skinning_theming_1 qui va habiller notre toute première application sous Flex.
Le fichier source de l’application Skinning_theming_1.mxml
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Style>
/*
Un extrait tiré d'une CSS quelconque....
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-style:italic;
*/
/* font-family: 'Arial';
font-size: 20px;
font-weight: 'bold';
color: #FFFFFF;
*/
.labelStyle {
font-family: Helvetica, Arial, sans-serif;
font-family: 'Verdana';
font-size: 40px;
font-weight: 'italic';
color: #ff6600;
}
</mx:Style>
<mx:Label text="Bienvenue sur social.hecube.net" styleName="labelStyle" />
</mx:Application> <mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" backgroundColor="#000000" >
<mx:Style>
Skinning & Styling : vers une CSS plus sophistiquée.
Dans un article precedent, on avait choisi la mise en forme à l’aide d’un fichier .swc d’un tableau associatif des présidents américains. On reprend les mêmes et on recommence afin de montrer la mise en forme extensible mis à disposition sous Flex.
C’est l’utilisation de la propriété themeColor de la balise Canvas qui permet d'affecter un style aux différents menu déroulant : haloGreen, haloSilver, haloOrange. Si cette propriété n’est pas renseigné, c’est le style par défaut qui s’affiche.
Le fichier source de l’application Skinning_theming_2.mxml
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="850" height="241">
<mx:Script>
<![CDATA[
[Bindable]
private var dp:Array =
[
/* US presidents */
{label:"George Washington", data:0},
{label:"John F. Kennedy", data:1},
{label:"Lyndon B. Johnson", data:2},
{label:"Richard M. Nixon", data:3},
{label:"Gerald R. Ford", data:4},
{label:"James E. \"Jimmy\" Carter", data:5},
{label:"Ronald W. Reagan", data:6},
{label:"William J. \"Bill\" Clinton", data:7},
{label:"George W. Bush", data:8},
{label:"Barack Obama", data:9}
];
]]>
</mx:Script>
<!-- le nom des thèmes -->
<mx:Label x="10" y="7" text="Standard Theme" fontWeight="bold" color="#ffffff"/>
<mx:Label x="218" y="7" text="Green Theme" fontWeight="bold" color="#ffffff"/>
<mx:Label x="426" y="7" text="Silver Theme" fontWeight="bold" color="#ffffff"/>
<mx:Label x="634" y="7" text="Orange Theme" fontWeight="bold" color="#ffffff"/>
<!-- thème 1 par défaut -->
<mx:Canvas x="10" width="200" height="200" verticalCenter="10.5">
<mx:ComboBox x="10" y="10" dataProvider="{dp}" width="180"></mx:ComboBox>
<mx:DataGrid x="10" y="40" width="180" height="120" dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn headerText="Id" dataField="data" width="30" />
<mx:DataGridColumn headerText="US president" dataField="label" />
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="168" label="Button"/>
</mx:Canvas>
<!-- thème 2 haloGreen -->
<mx:Canvas x="218" width="200" height="200" themeColor="haloGreen"
verticalCenter="10.5" backgroundColor="#ffffff" cornerRadius="8"
borderStyle="solid" alpha="0.5">
<mx:ComboBox x="10" y="10" dataProvider="{dp}" width="180"></mx:ComboBox>
<mx:DataGrid x="10" y="40" width="180" height="120" dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn headerText="Id" dataField="data" width="30" />
<mx:DataGridColumn headerText="US president" dataField="label" />
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="166" label="Button"/>
</mx:Canvas>
<!-- thème 3 haloSilver -->
<mx:Canvas x="426" width="200" height="200" themeColor="haloSilver"
verticalCenter="10.5" backgroundColor="#ffffff"
cornerRadius="8" borderStyle="solid">
<mx:ComboBox x="10" y="10" dataProvider="{dp}" width="180"></mx:ComboBox>
<mx:DataGrid x="10" y="40" width="180" height="120" dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn headerText="Id" dataField="data" width="30" />
<mx:DataGridColumn headerText="US president" dataField="label" />
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="166" label="Button"/>
</mx:Canvas>
<!-- thème 4 haloOrange -->
<mx:Canvas x="634" width="200" height="200" themeColor="haloOrange"
verticalCenter="10.5" backgroundColor="#ffffff" cornerRadius="8"
borderStyle="solid" alpha="0.5">
<mx:ComboBox x="10" y="10" dataProvider="{dp}" width="180"></mx:ComboBox>
<mx:DataGrid x="10" y="40" width="180" height="120" dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn headerText="Id" dataField="data" width="30" />
<mx:DataGridColumn headerText="US president" dataField="label" />
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="166" label="Button"/>
</mx:Canvas>
</mx:Application>En savoir plus
CSS, Flash, Flex, Fonts, Police, Skins, SWF, Theming
31 mars 2010 dans CMS, Création de site web, Meilleurs blogs, PHP, MYSQL, Réseaux sociaux, Tutoriaux, Wordpress par Bruno Flaven
Il était vraiment temps de voir les nouveautés que propose la toute dernière version de BuddyPress 1.2.3 qui aujourd’hui se comporte comme une simple extension fonctionnelle. Cette extension de réseau social est désormais compatible avec Wordpress Mu, la plate-forme de multi-blogging, et une installation WordPress simple.
Installation de WordPress MU 2.9.2 puis de BuddyPress 1.2.3
Pour installer facilement WordPress MU 2.9.2, vou spoiuvez suisvre un des ratciles précédents qui a été publiés sur ce blog.
Nous avons mener un test de mise en place de BuddyPress 1.2.3 sur une plate-forme WordPress MU 2.9.2. le tout sur une installation MAMP
Rappel des principales informations à connaitre pour installer WordPress MU 2.9.2
Voilà un bref rappel des éléments dont vous aurez besoin pour installer WordPress MU 2.9.2. On va pousser le vice jusqu’à changer le fichier hosts de notre ordinateur pour que notre future installation de BuddyPress réponde sur l’adresse suivante : 127.0.0.1 bp.hecube.net
/Applications/MAMP/Library/bin/mysql -u root -p
Créer la BDD
# Création simultanée de la base bp_install
# et de l'utilisateur bp_install
CREATE USER 'bp_install'@'localhost' IDENTIFIED BY 'bp_install'; GRANT USAGE ON *.* TO 'bp_install'@'localhost' IDENTIFIED BY 'bp_install'WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0; CREATE DATABASE IF NOT EXISTS bp_install;GRANT ALL PRIVILEGES ON bp_install.* TO 'bp_install'@'localhost';
Supprimer la BDD
# Destruction de 'bp_install'@'localhost' ...
DROP USER 'bp_install'@'localhost';
DROP DATABASE IF EXISTS `bp_install` ;
Créer seulement la BDD
CREATE DATABASE bp_install;
Utiliser la BDD bp_install
Les informations indispensables à l’installation de BuddyPress
Database Name = bp_install
Database User name = bp_install
Database Password = bp_install
Database Host = localhost
Modification à apporter au fichier hosts qui est préférable pour ne pas avoir adresse IP en guise de nom de domaine.
# test for BP
127.0.0.1 bp.hecube.net
Le changement des autorisations sur les répertoires de fichiers
chmod 755 /Applications/MAMP/htdocs/buddypress_1_2_3/site /Applications/MAMP/htdocs/buddypress_1_2_3/site/wp-content/
Il ne vous reste plus qu’à supprimer le fichier index-install.php pour pouvoir profiter du WPMU.
You can safely delete index-install.php now. It's always a good idea to remove code and scripts you don't need.
En cas de malheur…
Vous pouvez toujours supprimer l’uitlsateur et la BDD de données et recommencer.
# Destruction de 'bp_install'@'localhost' ...
DROP USER 'bp_install'@'localhost';
DROP DATABASE IF EXISTS `bp_install` ;
BuddyPress s’installe comme un simple plugin !
BuddyPress s’installe comme un simple plugin !
Les recommandations officielles pour installer BuddyPress
You can download and install BuddyPress using the built in WordPress plugin installer. If you download BuddyPress manually, make sure it is uploaded to “/wp-content/plugins/buddypress/”.
Activate BuddyPress in the “Plugins” admin panel using the “Activate” link.
You will need to enable permalink support in your WordPress installation for BuddyPress pages to function correctly. You can set this up using the “Settings > Permalinks” menu in your WordPress admin area.
Finally, you will need to activate a BuddyPress compatible theme. Two BuddyPress themes are bundled with the plugin, you can activate these using the “Appearance > Themes” menu in your WordPress admin area. To install other BuddyPress compatible themes, use the “Appearance > Add New Themes” menu and select the “buddypress” checkbox before hitting the “Find Themes” button.
L’activation du plugin BuddyPress
On va voir écran par écran comment procéder pour utiliser BuddyPress ainsi que l’installation du plugin d’album photos.
Dans le backend de WPMU
On active le plugin BuddyPress
On active le template BuddyPress Default 1.2.3 by BuddyPress.org
Exploration de BuddyPress - La création d’un groupe
La création d’un groupe se fait comme toujours en 3 étapes.
Exploration de BuddyPress - La création d’un album de photos dans le profil
On installe un plugin pour la création des albums images qui va s’adjoindre au profil de chaque utilisateur. Le plugin est totalement opérationnelle dans cette version. Il vous offre la possibilité de publier autant d’album que vous le souhaiter en envoyant autant de photos souhaitées par album.
Le contenu complet du readme.txt de BuddyPress
Une partie des indications données par le readme.txtde BuddyPress qui contient entre autre un descriptif de ce qu’est devenu BuddyPress : un plugin !
=== Plugin Name ===
Contributors: apeatling
Tags: buddypress, social networking, activity, profiles, messaging, friends, groups, forums, microblogging, twitter, facebook, mingle, social, community, networks, networking, cms
Requires at least: 2.9.1
Tested up to: 2.9.2
Stable tag: 1.2.3
== Description ==
Social networking in a box. Build a social network for your company, school, sports team or niche community all based on the power and flexibility of WordPress.
BuddyPress will let users register on your site and start creating profiles, posting messages, making connections, creating and interacting in groups and much more.
En savoir plus
BuddyPress, MySQL, PHP, Réseaux sociaux, Wordpress
25 mars 2010 dans CMS, Création de site web, Divers, Image, Graphisme, Photoshop, Meilleurs blogs, PHP, MYSQL, Webdesign, Wordpress, XHTML CSS par Bruno Flaven
Depuis, la sortie de Wordpress 2.5, vous pouvez gérer de manière assez sophistiqué la publication de galerie de photos sans l’ajout d’une extension fonctionnelle quelconque. Avec une bonne pratique du gestionnaire de média, de l’attachement de ces mêmes médias aux articles et l’utilisation de la pseudo balise
Vous serez à même de gérer la plupart de vos galeries de photos au sein de WP. Il est possible de manipuler cette pseudo-variable en lui affectant des éléments. C’est ce que nous allons voir dans cet article, on va dans un deuxième temps modifier Le fichier media.php qui gère la balise wp-includes/media.php pour lui ajouter la vue prettyPhoto.
Cette réflexion sur le bonne usage des galeries sous Wordpress s’inscrit naturellement dans le précèdent article qui avait été consacré aux metadonnées (metadas) qui étaient injectées dans les photos.
Le header du fichier wp-includes/media.php
/**
* The Gallery shortcode.
*
* This implements the functionality of the Gallery Shortcode for displaying
* WordPress images on a post.
*
* @since 2.5.0
*
* @param array $attr Attributes attributed to the shortcode.
* @return string HTML content to display gallery.
*/
Gérer ces images dans Wordpress
Wordpress dispose d’un manager très puissant pour manipuler vos images une fois uploadés dans le media manager pour ensuite les attacher notamment aux articles.
Attacher une image à un article
On va voir la procédure la plus simple pour attacher une image à un article.
On recherche l’article
On attache l’image à l’article
Les paramètres du resize d’image dans Wordpress
Lorsque vous passez par le media manager, automatiquement les images vont être resizés à la volée. Ces images vont en fait constituer le vivier de formats de photo appelés via les options du paramètre size qui sont : thumbnail, medium, large et full.
Quelques cas d’école
Il vous suffit par exemple de chercher l’id d’une des images attachées à cette article et de l’exclure à l’aide de la propriété exclude. On trouve cette id via le media manager attachment_id=504.
[gallery link="file" columns="2" order="ASC" orderby="title" size="thumbnail" ]
[gallery link="file" columns="2" order="ASC" orderby="title" size="thumbnail" exclude="504" ]
La valeur columns affecte l’apparence de votre galerie en déterminant le nombre de colonnes de la matrice de photos. Par exemple, vous disposez de 9 photos, en mettant 3, vos photos vont s’afficher sur une matrice 3×3. La valeur id="441" vous permet d’appeler une galerie attachée à un tout autre article dont l’id est 441 et on en profile pour exclure une photo qui se trouve dans cette galerie.
Pour la petite histoire, on va donc attaché des photos de suisse à une galerie consacrée à la Corse !
La galerie complète de l’article 441
[gallery link="file" columns="2" order="ASC" orderby="title" id="441" size="thumbnail" ]
La galerie complète de l’article 441 exclusion faite de la photo 486
[gallery link="file" columns="2" order="ASC" orderby="title" id="441" size="thumbnail" exclude="486" ]
[gallery link="file" columns="1" order="DESC" orderby="title" id="441" size="medium"]
Le thème de notre Blog WP ne se prête pas trop à un affichage sur deux colonnes et dans un format d’image plus grand type size="large" ou size="full" mais voici les bouts de code à tout hasard.
[gallery link="file" columns="1" order="DESC" orderby="title" id="441" size="large"]
[gallery link="file" columns="1" order="DESC" orderby="title" id="441" size="full"]
Vous pouvez aussi contrôler les balises pour l’inclusion des caractéristiques de l’image : itemtag, icontag, captiontag.
[gallery link="file" columns="1" order="DESC" orderby="title" id="441" size="thumbnail" itemtag="p" icontag="p" captiontag="p" exclude="486" ]
Les options de la balise
Voici les informations concernant les options de la balise galerie de photos dans Wordpress, de quoi faire du vrai photoblogging !
Options
The following basic options are supported:
columns
specify the number of columns. The gallery will include a break tag at the end of each row, and calculate the column width as appropriate. The default value is 3. If columns is set to 0, no row breaks will be included. For example, to display a 4 column gallery:
id
specify the post ID. The gallery will display images which are attached to that post. The default behaviour if no ID is specified is to display images attached to the current post. For example, to display images attached to post 123:
size
specify the image size to use for the thumbnail display. Valid values include “thumbnail”, “medium”, “large” and “full”. The default is “thumbnail”. The size of the images for “thumbnail”, “medium” and “large” can be configured in WordPress admin panel under Settings > Media. For example, to display a gallery of medium sized images:
Some advanced options are available:
orderby
specify the sort order used to display thumbnails. The default is “menu_order ASC, ID ASC”. “RAND” (random) is also supported.
itemtag
the name of the XHTML tag used to enclose each item in the gallery. The default is “dl”.
icontag
the name of the XHTML tag used to enclose each thumbnail icon in the gallery. The default is “dt”.
captiontag
the name of the XHTML tag used to enclose each caption. The default is “dd”. For example, to change the gallery markup to use div, span and p tags:
link
you can set it to “file” so each image will link to the image file. The default value links to the attachment’s permalink.
include
comma separated attachment IDs, will show only the images from these attachments.
exclude
comma separated attachment IDs, excludes the images from these attachments. Please note that include and exclude cannot be used together.
Source : http://codex.wordpress.org/Gallery_Shortcode
Joindre prettyPhoto à vos galeries sous Wordpress
On va tenter de coupler facilement cette balise wp-prettyphoto
Nous avons effectuer des tests sur un WordPress en local sur un mac à l’aide de MAMP, avec un Wordpresss Version 2.9.2 et le plugin WP prettyPhoto Version: 1.6. Il y a un petit bug à régler sur le plugin avec cette version de Wordpresss. Le règlement se fait facilement, il faut placer la valeur autoplay sur true et donc cocher la checkbox.
True to Autoplay, False not to.
Une fois ce bug résolu, on va modifier le code pour générer la
qui se trouve dans wp-includes/media.php. La modification est simple, à l’aide des fonctions wp_get_attachment_image et wp_get_attachment_url, on va modifier la valeur $output en introduisant la balise
rel=\"wp-prettyPhoto[gallery]\"
dans la ligne
<a rel=\"wp-prettyPhoto[gallery]\" href=\"$file\">$img </a>
$i = 0;
foreach ( $attachments as $id => $attachment ) {
/* $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false); */
$img = wp_get_attachment_image($id, $size, false);
$file = wp_get_attachment_url($id);
$output .= "<{$itemtag} class='gallery-item' >";
/* $output .= "<{$icontag} class='gallery-icon'> $link </{$icontag}>"; */
$output .= "<{$icontag} class='gallery-icon'> <a rel=\"wp-prettyPhoto[gallery]\" href=\"$file\">$img </a></{$icontag}>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class='gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= '<br style="clear: both" />';
}
$output .= "
<br style='clear: both;' />
</div>\n";
return $output;
}Conlusion : Automatiquement toutes les images attachés à un article sont désormais disponibles dans la page via la balise gallery et dans une vue prettyPhoto. Wordpress est donc bien nativement un e vrai outil de photoblogging pour ceux qui en doutaient encore !
Le choix de l’apparence de la div qui vient en surimpression
Affichage dark_rounded
Affichage façon facebook
On a donc la possibilité de paramètrer complètement la galerie via le plugin, en chargeant cette balise rel=\"wp-prettyPhoto\” notamment de faire défiler les photos de la galerie.
En savoir plus
Galeries, images, Jpg, MySQL, PHP, Wordpress
18 mars 2010 dans CMS, Création de site web, Drupal, PHP, MYSQL, Technologie, Tutoriaux, Webdesign par Bruno Flaven
L’idée est de créer des variables sur mesure dans votre thème Drupal 6 afin de nettoyer votre code pour qu’il soit plus facile à manipuler et à comprendre. C’est aussi une manière de créer ce que nous nommons ironiquement chez Hecube un thème “couture”, c’est à dire sur-mesure, qui s’éloigne progressivement des thèmes “prêt à porter” que chacun utilise. Des thèmes qui jusqu’à un certain point nous satisfont à court terme mais qui rapidement se trouvent dépassés par de nouveaux besoins graphiques, fonctionnelles et éditoriaux liées à l’évolution du site.
La manucure consiste en une action assez simple : enlever du code et de la logique écrite en php du fichier page.tpl.php pour le transvaser vers un fichier de scripting pur et dur template.php. On va pour cela augmenter ou amender le code du fichier à l’aide d’une preprocess function.
Augmenter la logique de votre fichier template.php
Preprocess functions only apply to theming hooks implemented as templates. The main role of the preprocessor is to setup variables to be placed within the template (.tpl.php) files. Plain theme functions do not interact with preprocessors.
La fonction… phptemplate_preprocess_page
phptemplate_preprocess_page
On garde ce hook générique, c’est à dire disponible pour l’ensemble des thèmes Drupal 6 que l’on pourrait utiliser sur notre site ce qui suppose que l’intitulé de votre fonction commence de la sorte phptemplate_preprocess_.
Si vous souhaitez rendre ce hook disponible uniquement pour un thème, il vous suffit d’indiquer le nom du thème. Dans un article précédent on avait créer un thème nommé singapore, on aurait donc la fonction singapore_preprocess_
Si vous partez d’un fichier vierge template.php, il vous faut ouvrir une balise <?php mais on ne la ferme pas…Dans notre exemple on part du fichier template.php du thème garland
Un seul maître à bord, Capitaine hook
Arrêtons-nous sur cette fonction phptemplate_preprocess_HOOK afin d’en comprendre les principes :
- Le moteur de template est
phptemplate
- Si vous remplacez
phptemplate_ par le nom de votre thème ou template par exemple monthemedrupal_ alors le preprocess ne sera disponible que dans ce thème ou template.
- La partie de cette fonction
_HOOK doit être remplacée par _page si vous souhaitez que cette fonction s’applique dans le fichier page.tpl.php et par _node si vous souhaitez que cette fonction s’applique dans node.tpl.php. Dans notre exemple, nous choisirons _page pour que cela s’applique dans page.tpl.php
Un cas pratique
Pour faciliter la compréhension, on va extraire de la logique du thème ou template garland et appliquer la méthode décrite ci-dessus.
Un extrait du fichier template.php avec notre nouvelle variable site_baseline dans mon thème garland
/**
* Override or insert PHPTemplate variables into the templates.
*/
function phptemplate_preprocess_page(&$vars) {
$vars['tabs2'] = menu_secondary_local_tasks();
// Hook into color.module
if (module_exists('color')) {
_color_page_alter($vars);
}
$output = "<h1>hecube.net avec Drupal</h1>";
$vars['site_baseline'] = $output;
}
Un extrait du fichier page.tpl.php avec notre nouvelle variable $site_baseline dans le thème garland
/**
* L'impression de cette variable
*/
print (''.$site_baseline.''); 
L’impression de la variable $site_baseline dans le theme/template garland
En savoir plus
CSS, Drupal, Drupal 6, html, Intégration, MySQL, Personnaliser, PHP, sur mesure, Template, Variables, XHTML
15 mars 2010 dans CMS, PHP, MYSQL, Tutoriaux, Widget, Gadget, Wordpress par Bruno Flaven
Une des choses primordiales lorsque on travaille sur un site en général, c’est de s’assurer du backup des données du site : textes, images, navigation, liens…etc et/ou de la portabilité éventuelle des données vers un autre espace d’hébergement. Pour mener à bien ces deux actions, WordPress offre nativement des possibilités d’import et d’export au format .xml. Nous allons voir rapidement comment exporter et importer les données. Puis, dans un deuxième temps, utiliser ces facilités d’import et d’export pour passer un site en développement en production.
Merci à Lucile pour les captures d’écran et le détail des scénarios utilisateur pour l’import et l’export au sein de Wordpress.
Les rudiments de l’import-export sous WordPress
Les étapes de l’export
Les étapes à suivre pour un export des données en base.
- Il faut aller dans l’onglet
Outils
- Choisissez exporter
- Choisissez les publications de quels auteurs vous souhaitez télécharger
- Cliquez sur Télécharger le fichier d’export. A l’ouverture de la boite de dialogue choisissez enregistrer le fichier, puis cliquez sur OK.
- Le fichier XML de l’export apparait dans votre dossier de téléchargement.
Vous possédez désormais un fichier XML d’archive contenant la totalité des données de votre site sous WordPress, à l’exception bien sur des fichiers envoyés dans le répertoire uploads dont vous ne possédez que les adresses absolues ex http://url_de_votre_wordpres/wp-content/uploads/2010/02/mon-image_3.jpg. Vous pouvez dorénavant vous servir de ce fichier xml pour l’importer dans un autre Wordpress.
Les étapes de l’import
Les étapes à suivre pour importer ce fichier xml d’export à nouveau dans un WordPress.
- Il faut aller dans les outils
- Choisissez importer
- Vous pouvez importer des sources diverses de contenu importable notamment Blogger ou Dotclear. Nous choisirons ici l’importation de contenu Wordpress, on clique donc sur
Wordpress.
- Dans la nouvelle page, cliquez sur parcourir pour choisir votre fichier
xml à importer puis ensuite cliquez sur OK puis envoyer le fichier et l'importer.
- Vous pouvez ici choisir de créer un nouvel utilisateur ou d’utiliser l’admin déjà créé. Ensuite, choisissez de télécharger ou non les fichiers joints au contenu. Il vous reste à cliquer sur
envoyer.
- Une nouvelle page vous indique que l’importation à correctement été effectuée.
Passer un site sous WordPress en développement en production
Ce n’est qu’une façon de faire pratique et pragmatique pour déployer rapidement un site sous WordPress. On va servir de ce que l’on nomme volontiers la portabilité des données. Par exemple, imaginons que vous développiez le site sur une plate-forme différente de celle qui va héberger votre site en production. Pour illustrer notre propos, on va dire que :
- Le site de développement est conçu avec URL de base
http://projet1.dev.hecube.net
- Le site de production sera déployé avec URL de base
http://projet1.prod.hecube.net
Si vous reproduisez exactement l’arborescence de votre site de développement sur le site de production, notamment le contenu du répertoire /wp-content/uploads/, vous pourrez changer ensuite à l’aide un trouver-remplacer dans votre éditeur favori (Dreamweaver, Textmate…) toutes les adresses commençant par http://projet1.dev.hecube.net par http://projet1.prod.hecube.net pour ensuite importer le fichier xml contenant le contenu de votre Wordpress patiemment rentré sur l’espace de développement. C’est une méthode à la hache mais qui va vous faire économiser bien du temps et pâlit un des gros défauts de Wordpress à savoir écrire en dur l’URL de base partout dans la base de données MySQL à laquelle il est adossé.
Une vue partielle du contenu d’un fichier d’export WordPress
<?xml version="1.0" encoding="UTF-8"?>
<!-- This is a WordPress eXtended RSS file generated by WordPress as an export of your blog. -->
<!-- It contains information about your blog's posts, comments, and categories. -->
<!-- You may use this file to transfer that content from one site to another. -->
<!-- This file is not intended to serve as a complete backup of your blog. -->
<!-- To import this information into a WordPress blog follow these steps. -->
<!-- 1. Log in to that blog as an administrator. -->
<!-- 2. Go to Tools: Import in the blog's admin panels (or Manage: Import in older versions of WordPress). -->
<!-- 3. Choose "WordPress" from the list. -->
<!-- 4. Upload this file using the form provided on that page. -->
<!-- 5. You will first be asked to map the authors in this export file to users -->
<!-- on the blog. For each author, you may choose to map to an -->
<!-- existing user on the blog or to create a new user -->
<!-- 6. WordPress will then import each of the posts, comments, and categories -->
<!-- contained in this file into your blog -->
<rss version="2.0"
xmlns:excerpt="http://wordpress.org/export/1.0/excerpt/"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:wp="http://wordpress.org/export/1.0/"
>
<channel>
<title>wp_install</title>
<link>http://127.0.0.1/wordpress_2_9_1/site</link>
<description>Just another WordPress weblog</description>
<pubDate>Sun, 21 Feb 2010 16:04:17 +0000</pubDate>
<generator>http://wordpress.org/?v=2.9.2</generator>
<language>en</language>
<wp:wxr_version>1.0</wp:wxr_version>
<wp:base_site_url>http://127.0.0.1/wordpress_2_9_1/site</wp:base_site_url>
<wp:base_blog_url>http://127.0.0.1/wordpress_2_9_1/site</wp:base_blog_url>
<wp:category><wp:category_nicename>accueil</wp:category_nicename><wp:category_parent></wp:category_parent><wp:cat_name><![CDATA[accueil]]></wp:cat_name><wp:category_description><![CDATA[only used on homepage]]></wp:category_description></wp:category>
<wp:category><wp:category_nicename>divers</wp:category_nicename><wp:category_parent></wp:category_parent><wp:cat_name><![CDATA[divers]]></wp:cat_name></wp:category>
<wp:category><wp:category_nicename>cinema</wp:category_nicename><wp:category_parent></wp:category_parent><wp:cat_name><![CDATA[Cinéma]]></wp:cat_name></wp:category>
<wp:category><wp:category_nicename>films</wp:category_nicename><wp:category_parent></wp:category_parent><wp:cat_name><![CDATA[Films]]></wp:cat_name></wp:category>
<wp:category><wp:category_nicename>homeslideshow</wp:category_nicename><wp:category_parent></wp:category_parent><wp:cat_name><![CDATA[HomeSlideshow]]></wp:cat_name></wp:category>
<wp:category><wp:category_nicename>destinations</wp:category_nicename><wp:category_parent></wp:category_parent><wp:cat_name><![CDATA[Destinations]]></wp:cat_name></wp:category>
<wp:category><wp:category_nicename>news</wp:category_nicename><wp:category_parent></wp:category_parent><wp:cat_name><![CDATA[News]]></wp:cat_name></wp:category>
<wp:tag><wp:tag_slug>adipiscing</wp:tag_slug><wp:tag_name><![CDATA[adipiscing]]></wp:tag_name></wp:tag>
<wp:tag><wp:tag_slug>amet</wp:tag_slug><wp:tag_name><![CDATA[amet]]></wp:tag_name></wp:tag>
<wp:tag><wp:tag_slug>aristides-de-sousa-mendes</wp:tag_slug><wp:tag_name><![CDATA[aristides de sousa mendes]]></wp:tag_name></wp:tag>
<!-- to be continued -->
Vidéo
Une vidéo en anglais sur l’import et l’export sous WordPress
En savoir plus
Backup, Export, Import, MySQL, PHP, Wordpress, xml
9 mars 2010 dans CMS, Création de site web, Divers, Joomla, Virtuemart, Marketing Web, PHP, MYSQL, Tutoriaux par Bruno Flaven
Il est très souvent question de faire des sondages, de questionner les internautes qui viennent sur votre site afin de se procurer facilement et gratuitement du contenu, ainsi qu’une légère interaction. On va voir parmi les extensions Joomla laquelle vous permettra de faire naitre cette interaction facilement.
On ne va pas s’embarrasser de détails et on ne va s’intéresser qu’à une seule extension JQuarks_v0.2.4. Cette extension nous semble la plus accessible et la plus efficiente à première vue. C’est par ailleurs l’extension la mieux documentée puisque vous avez à votre disposition un manuel d’utilisation très bien fait en anglais JQuarks_v0.2.4_guide.pdf
Il faut “dézipper” le fichier suivant JQuarks_v0.2.4_NEW_INSTALL_unzip_me_first.zip qui vous permet d’obtenir les principaux fichiers pour le fonctionnement de cette extension fonctionnelle :
- Le composant
com_jquarks_v0.2.4.zip
- Le module
mod_jquarks_v0.2.4.zip
- Le plugin
plg_editor_syntaxhighlight_jquarks_v0.2.2.zip
- Le plugin
plg_user_jquarks_v0.2.2.zip
Installer et utiliser l’extension JQuarks_v0.2.4
Cela s’installe le plus simplement du monde…
Installation de com_jquarks_v0.2.4.zip
Installation de mod_jquarks_v0.2.4.zip
Installation de plg_user_jquarks_v0.2.2.zip
Créer en quizz et des questions bref se servir de JQuarks_v0.2.4
Sans prendre connaissance de la méthode qui est décrite dans la pdf, vous risquez quelques déconvenues.
Les étapes sont dans l’ordre :
- La création d’un Quizz avec ou sans description
- La création des Questions de votre futur quizz
- Pour faciliter la gestion des questions, n’hésitez pas à créer des Catégories
Ensuite le système fonctionne comme des poupées russes, par des attachements successifs.
- La première partie la plus importante consiste à attacher des questions à un Ensembles de Questions
- La deuxième partie la plus importante consiste à attacher un ensemble de questions à un Quizz
Création d’un Quizz
Création d’une Question
Création d’une catégorie pour les questions
Affectation d’un ensemble de questions à un Quizz
C’est le truc à savoir, affecter un ensemble de questions à un Quizz
Il ne vous reste ensuite qu’à publier votre Quizz dans un module, ici dans la position left.
En savoir plus
Joomla, Module, plugin, Quizz, Sondage
26 février 2010 dans Divers par Bruno Flaven
Qui n’a pas entendu parlé des metadatas et de l’ensemble des données qui peuvent être ajoutées à des images afin de les qualifier, de les répertorier, bref de les classer et de les vendre ! C’est, au final, bien tout l’enjeu du débat. On rentre ici de plain-pied dans l’incommensurable problématique de gestion de base de données médias, du Digital Asset Management (DAM). De très nombreuses solutions propriétaires ou open-source existent sur le marché. Certaines coûtent chères, voir même très chères à mettre en place.
On va donc survoler dans un premier temps les solutions du marché puis dans un second temps voir comment un photographe seul, sans connaissance technique particulière et à l’aide de ces outils habituels : Photoshop et Bridge de la suite Adobe CS4, peut indexer ses photos et tirer parti de ce travail sur Internet notamment dans l’univers Wordpress, qui peut-être un bonne outil de publication et de communication.
Jeu de DAM
Vendre son DAM au diable ou pas ? On peut citer deux solutions, l’une n’est pas open-source mais connait son affaire, l’autre est open-source en tous les cas se présente comme telle…
Pour ne citer que deux projets, on retiendra donc :
L’une (Algoba) semble disons-le propriétaire, solution qui vend au prix fort le tout en un (logiciel, hébergement…etc) et distribue des gizmos, à la manière des sèche-pleurs dans une grande surface, pour les photographes ou les agences qui ne pourraient s’acquitter du leasing de l’engin mais qui sont quand même venus admirer la vitrine.
L’autre (ResourceSpace) vous laisse un choix, cornélien certes mais un choix tout de même. Pour un prix d’installation (set up fee) de €1315 vous pouvez héberger vous-même la solution et compte tenu des pré-requis demandés cela semble plutôt standard en matière d’environnement (PHP, MySQL, GD graphics, ImageMagick, FFMmpeg) Cf Le texte “If you wish…”. Pour assoir sa légitimité, il n’est pas la peine de donner des milliards de références, quelques grands noms suffisent : WWF, Capgemini…etc
If you wish to host ResourceSpace yourself (instead of using third party services), you will be pleased to hear that the application uses straightforward PHP and MySQL and therefore works with the majority of hosting platforms without modification. The GD graphics library is required for automatic JPG/PNG/GIF thumbnail creation however this has been bundled with PHP since version 4.3. Installing ImageMagick and FFMmpeg will add further thumbnail support for hundreds more image/video formats.
Source : Plus d’informations sur l’acronyme DAM http://en.wikipedia.org/wiki/Digital_asset_management
Au-de-là de la querelle entre des solutions à moitié ou totalement propriétaires, il est indispensable quelle que soit la solution retenue de s’assurer d’une chose. Cette dernière doit s’inscrire dans le cadre de réflexion beaucoup plus large sur la gestion de metadatas. En effet, si pour une raison ou une autre la solution choisie n’évolue pas dans le sens des normes du marché, il vaut mieux y renoncer, vous vous retrouverez avec une solution captive et obsolète. Ces normes, quelles sont-elles ?
Les gens de Dublin
La pratique de la gestion des metadatas s’inscrit dans un cadre plus large de réflexion. Il existe notamment une initiative nommé Dublin Core® Metadata Initiative (DCMI) qui tente de normaliser le gestion des metadatas dans les fichiers images. Pour mieux comprendre les concepts qui se cachent derrière cette initiative et ce que le projet nomme les fameux 4 niveaux d'interoperabilité. Vous pouvez vous rendre sur le site ci-dessous, il est bien rébarbatif comme il se doit pour un site dit sérieux mais passer le haut-le-coeur ce n’est pas si inintéressant !
Au de-là de la compréhension des grands principes, soyons plus prosaïque ! Tentons d’indexer des photos à la “dubliner” avec les quelques ressources à disposition d’un photographe, c’est à dire à l’aide de Photoshop, la connaissance qu’il/elle a de ses photos et sa bonne volonté !
Source :
http://dublincore.org/
http://dublincore.org/metadata-basics/
Afficher les metadatas d’une image
On va donc essayer de visualiser via photoshop, les fameuses metadatas (metadonnées) attachées à une photo. Une fois la photo ouverte, pour afficher les metadatas sous Photoshop, il faut se rendre dans la barre d’outil de photoshop File > File info ou taper sous Mac le raccourci Pomme () + Alt + Shift + i.
On va essentiellement travailler autour de ces 3 volets de données : Meta Data, IPTC Data, XMP Data
Notre photo est swiss_5_with_meta.jpg, elle vient d’un stock de photos libre de droits donc sans metadata. Pour des raisons de poids et de taille, on montre seulement une miniature de cette image.
Source : http://www.bigfoto.com/
La photo swiss_5_with_meta.jpg est ouverte sous photoshop
Pomme () + Alt + Shift + i fait apparaitre le volet contenant les metadatas
Détail du volet contenant les metadatas, l’onglet IPTC
Ces mêmes informations, voir même un plus grand nombre, peuvent être publiées, éditées via Bridge. On édite donc sous Bridge sur Mac, deux photos : l’une avec metadatas, l’autre sans metadatas.
Une image avec des metadatas sous Bridge
Une image sans metadatas sous Bridge
L’édition sous Bridge ou Photoshop vous permettra de remplir l’ensemble des metadatas dont vous pourriez avoir besoin pour qualifier votre photo et de créer ainsi le template éventuel qui peut -être facilement appliqué via photoshop à un ensemble de photos. Un cas concret, vous créez un template pour un reportage photos sur les grands monuments de la ville de Paris, il ne vous restera alors qu’a modifier à la marge photo par photo certaines des métadonnées de la photo pour la faire correspondre au sujet mais le template aura préalablement permis d’insérer les metadonnées relatives au copyright, aux mots-clés par exemple. Cela peut présenter un gain de temps considérable lorsque on est seul et que l’on doit marquer un grand nombre de photos. Cela évite aussi un grand nombre d’erreurs de saisie éventuelles.
Ajouter des metadatas à l’aide d’un template sous Photoshop
On va tenter l’utilisation d’un template de metadatas depuis une photo sur laquelle il n’y a aucun ajout de metadatas ou metadonnées.
Pomme () + Alt + Shift + i fait apparaitre le volet contenant les metadatas
L’onglet Description des metadatas attachés à la photo est vide
L’onglet IPTC des metadatas attachés à la photo est tout aussi vide
On clique sur le bouton Show Templates Folder pour associer un template de metadatas à cette photo. Sur un MAC, les templates se trouvent dans ce répertoire /Users/nom-d-utilisateur/Library/Application Support/Adobe/XMP/Metadata Templates. On va appeler un template qui se nomme test2_swiss_1_with_meta.xmp
On choisit la troisième option Keep original metadata, but append matching properties from template. En clair, on ajoute les metadatas du template à celles déjà présentes dans la photo. Il existe deux autres options, à vous de choisir celle souhaitée.
On sélectionne notre template nommé de test2_swiss_1_with_meta.xmp, on clique OK et on enregistre la photo Pomme () + s. les metadatas du template sont désormais attachées à la photo.
Un processus de publication à l’aide des metadatas sous Wordpress
On a fait le test sur un WP en anglais sur une Version 2.9.2 à l’aide de la dernière version du plugin NextGEN. Il faut savoir que sous Worpress, il existe un ensemble de fonctions natives qui ont été intégrées afin de permettre le photoblogging notamment. C’est cet ensemble de fonctions que recycle le plugin NextGEN que nous allons utiliser. Pour information, le plugin NextGEN ajoute par ailleurs un très grand nombre d’extensions fonctionnelles à le gestion d’images et de galeries sous Wordpress, cela va sans dire !
La partie de lecture des metadatas est dans nextgen-gallery/lib/meta.php à partir de la ligne 100. On voit d’ailleurs le commentaire initial // taken from WP core qui atteste de la filiation du code du plugin à des fonctions cœur de Wordpress.
// taken from WP core
$exif = $this->exif_data['EXIF'];
if (!empty($exif['FNumber']))
$meta['aperture'] = 'F ' . round( $this->exif_frac2dec( $exif['FNumber'] ), 2 );
if (!empty($exif['Model']))
$meta['camera'] = trim( $exif['Model'] );
if (!empty($exif['DateTimeDigitized']))
$meta['created_timestamp'] = date_i18n(get_option('date_format') . ' ' . get_option('time_format'), $this->exif_date2ts($exif['DateTimeDigitized']));
if (!empty($exif['FocalLength']))
$meta['focal_length'] = $this->exif_frac2dec( $exif['FocalLength'] ) . __(' mm','nggallery');
if (!empty($exif['ISOSpeedRatings']))
$meta['iso'] = $exif['ISOSpeedRatings'];
if (!empty($exif['ExposureTime'])) {
$meta['shutter_speed'] = $this->exif_frac2dec ($exif['ExposureTime']);
$meta['shutter_speed'] =($meta['shutter_speed'] > 0.0 and $meta['shutter_speed'] < 1.0) ? ( '1/' . round( 1 / $meta['shutter_speed'], -1) ) : ($meta['shutter_speed']);
$meta['shutter_speed'] .= __(' sec','nggallery');
}
L’installation du plugin NextGEN
L’upload des photos dans NextGEN
Nos photos de Suisse “stéroïdées” aux metadonnées. Un lien siglé Meta va vous permet d’afficher l’ensemble des metadonnées attaché à chaque image
Une vue complète des metadonnées attachées à l’image
La vue en lightbox, des metadonnées de cette photo dans le plugin NextGEN
Un détail de cette vue, on retrouve bien les metadonnées insérées à l’aide de notre template Photoshop
Pourquoi décrire un tel processus, pour la simple et bonne raison que Wordpress nativement peut servir d’outil de publication et de promotion pour un photographe sans que la courbe d’apprentissage soit infinie et que le jeu de procédures de mise à jour soit complexe et chronophage. En effet, la procédure décrite ci-dessus ne requiert que l’utilisation de photoshop/bridge, plutôt habituelle pour un photographe et une pratique minime de Worpdress.
Pour les acharnés de la ligne de commande : ExifTool
Si vous souhaitez sortir de Photoshop, c’est possible, voici un outil qui va permettre de faire la même chose que ce que nous venons de décrire et bien plus ! Sans avoir à régler le paiement de la licence Photoshop. On va servir d’un outil totalement open source qui se nomme ExifTool sur Mac. Pour se faire, il faut télécharger et installer le fichier ExifTool-8.11.dmg. Pour bien comprendre son fonctionnement, je vous invite à découvrir le site du créateur c’est moche mais mon dieu que son outil est efficace !
Quelques commandes usuelles tirées de la documentation
Du bonne usage de ExifTool, il vaut mieux comprendre la notion de chemin vers les fichiers photos. Comme toujours lorsque on passe une ligne de commande dans le terminal de votre Mac, on décide souvent d’un répertoire source et d’un répertoire de destination.
- Le répertoire de fichiers source
/Users/votre-nom/Documents/mon-repertoire-de-travail/img_test_source/
- Le répertoire de fichiers de destination
/Users/votre-nom/Documents/mon-repertoire-de-travail/img_test_dest/
Pour mieux comprendre la maniement de la console sous Mac, vous pouvez vous reporter à cette partie La marche à suivre sous Mac de l’article suivant qui explique les rudiments à connaitre sur le maniement de la console.
Commande (1) dans ExifTool
# Print all meta information in an image, including duplicate and unknown tags, sorted by group (for family 1).
# MODEL
exiftool -a -u -g1 a.jpg
exiftool -a -u -g1 /Users/votre-nom/Documents/mon-repertoire-de-travail/meta_data_injector_photos/img_test_source/swiss_5_with_meta.jpg
Le résultat de cette commande (1) passée ExifTool dans la console sous Mac
Commande (2) dans ExifTool
# Recursively extract common meta information from files in pictures directory, writing text output into files with the same names but with a .txt extension.
# MODEL
exiftool -r -w .txt -common pictures
exiftool -r -w .txt -common /Users/votre-nom/Documents/mon-repertoire-de-travail/meta_data_injector_photos/img_test_source/
Commande (3) dans ExifTool
# Extract all author-related XMP information from an image.
# MODEL
exiftool -xmp:author:all -a image.jpg
exiftool -xmp:author:all -a /Users/votre-nom/Documents/mon-repertoire-de-travail/meta_data_injector_photos/image_source_2/BOS00001C027_21HD737_21.jpg > /Users/votre-nom/Documents/mon-repertoire-de-travail/meta_data_injector_photos/img_test_dest/BOS00001C028_33HD723_21.txt
Commande (4) dans ExifTool
# Extract complete XMP data record intact from a.jpg and write it to out.xmp using the special XMP tag (see the Extra tags in Image::ExifTool::TagNames).
# MODEL
exiftool -xmp -b a.jpg > out.xmp
exiftool -xmp -b /Users/votre-nom/Documents/mon-repertoire-de-travail/meta_data_injector_photos/image_source_2/BOS00001C027_21HD737_21.jpg > /Users/votre-nom/Documents/mon-repertoire-de-travail/meta_data_injector_photos/img_test_dest/BOS00001C028_33HD723_21.xmp
Commande (5) dans ExifTool
# Create XMP meta information data files for all images in dir.
# MODEL
exiftool -o %d%f.xmp dir
# OK
exiftool -o %d%f.xmp /Users/votre-nom/Documents/mon-repertoire-de-travail/meta_data_injector_photos/img_test_source/
Le code des fichiers évoqués ci-dessus, notamment le template de metadonnées Photoshop .xmp
Ce gros charabia est en fait un fichier de metadatas pondu par Adobe Photoshop. Dans notre exemple, ce fichier se nomme test2_swiss_1_with_meta.xmp
<?xpacket begin='' id='W5M0MpCehiHzreSzNTczkc9d'?>
<x:xmpmeta xmlns:x='adobe:ns:meta/' x:xmptk='Image::ExifTool 8.11'>
<rdf:RDF xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'>
<rdf:Description rdf:about=''
xmlns:Iptc4xmpCore='http://iptc.org/std/Iptc4xmpCore/1.0/xmlns/'>
<Iptc4xmpCore:CreatorContactInfo rdf:parseType='Resource'>
<Iptc4xmpCore:CiAdrCity>IPTC City</Iptc4xmpCore:CiAdrCity>
<Iptc4xmpCore:CiAdrCtry>IPTC Country / Territory</Iptc4xmpCore:CiAdrCtry>
<Iptc4xmpCore:CiAdrExtadr>IPTC Address</Iptc4xmpCore:CiAdrExtadr>
<Iptc4xmpCore:CiAdrPcode>IPTC Postal Code</Iptc4xmpCore:CiAdrPcode>
<Iptc4xmpCore:CiAdrRegion>IPTC State / Province</Iptc4xmpCore:CiAdrRegion>
<Iptc4xmpCore:CiEmailWork>IPTC Email(s)</Iptc4xmpCore:CiEmailWork>
<Iptc4xmpCore:CiTelWork>IPTC Phone(s)</Iptc4xmpCore:CiTelWork>
<Iptc4xmpCore:CiUrlWork>IPTC Website(s)</Iptc4xmpCore:CiUrlWork>
</Iptc4xmpCore:CreatorContactInfo>
<Iptc4xmpCore:IntellectualGenre>IPTC Intellectual Genre</Iptc4xmpCore:IntellectualGenre>
<Iptc4xmpCore:Scene>
<rdf:Bag>
<rdf:li>IPTC Scene</rdf:li>
</rdf:Bag>
</Iptc4xmpCore:Scene>
</rdf:Description>
<rdf:Description rdf:about=''
xmlns:crs='http://ns.adobe.com/camera-raw-settings/1.0/'>
<crs:AlreadyApplied>True</crs:AlreadyApplied>
</rdf:Description>
<rdf:Description rdf:about=''
xmlns:dc='http://purl.org/dc/elements/1.1/'>
<dc:creator>
<rdf:Seq>
<rdf:li>IPTC Creator</rdf:li>
</rdf:Seq>
</dc:creator>
<dc:description>
<rdf:Alt>
<rdf:li xml:lang='x-default'>EN Description | FR Description | SP Description</rdf:li>
</rdf:Alt>
</dc:description>
<dc:format>image/jpeg</dc:format>
<dc:rights>
<rdf:Alt>
<rdf:li xml:lang='x-default'>EN Copyright Notice | FR Copyright Notice | ES Copyright Notice</rdf:li>
</rdf:Alt>
</dc:rights>
<dc:subject>
<rdf:Bag>
<rdf:li>EN Keyword1</rdf:li>
<rdf:li>EN Keyword2</rdf:li>
<rdf:li>EN Keyword3 | FR Keyword1</rdf:li>
<rdf:li>FR Keyword2</rdf:li>
<rdf:li>FR Keyword3 | ES Keyword1</rdf:li>
<rdf:li>ES Keyword2</rdf:li>
<rdf:li>ES Keyword3</rdf:li>
</rdf:Bag>
</dc:subject>
<dc:title>
<rdf:Alt>
<rdf:li xml:lang='x-default'>EN Document Title | FR Document Title | SP Document Title</rdf:li>
</rdf:Alt>
</dc:title>
</rdf:Description>
<rdf:Description rdf:about=''
xmlns:exif='http://ns.adobe.com/exif/1.0/'>
<exif:ColorSpace>4294967295</exif:ColorSpace>
<exif:ExifVersion>0221</exif:ExifVersion>
<exif:NativeDigest>256,257,258,259,262,274,277,284,530,531,282,283,296,301,318,319,529,532,306,270,271,272,305,315,33432;D9F18E6F7E75268A03FB8670F1B960F8</exif:NativeDigest>
<exif:PixelXDimension>1199</exif:PixelXDimension>
<exif:PixelYDimension>778</exif:PixelYDimension>
</rdf:Description>
<rdf:Description rdf:about=''
xmlns:pdf='http://ns.adobe.com/pdf/1.3/'>
<pdf:Keywords>EN Keyword1, EN Keyword2, EN Keyword3 | FR Keyword1, FR Keyword2, FR Keyword3 | ES Keyword1, ES Keyword2, ES Keyword3</pdf:Keywords>
</rdf:Description>
<rdf:Description rdf:about=''
xmlns:photoshop='http://ns.adobe.com/photoshop/1.0/'>
<photoshop:AuthorsPosition>IPTC Creator Job Title</photoshop:AuthorsPosition>
<photoshop:CaptionWriter>G Description Writer</photoshop:CaptionWriter>
<photoshop:ColorMode>3</photoshop:ColorMode>
<photoshop:Headline>Headline</photoshop:Headline>
<photoshop:LegacyIPTCDigest>ECC6C07657D166351B3C812E85EB3E5C</photoshop:LegacyIPTCDigest>
</rdf:Description>
<rdf:Description rdf:about=''
xmlns:tiff='http://ns.adobe.com/tiff/1.0/'>
<tiff:Artist>IPTC Creator</tiff:Artist>
<tiff:BitsPerSample>
<rdf:Seq>
<rdf:li>8</rdf:li>
</rdf:Seq>
</tiff:BitsPerSample>
<tiff:Compression>6</tiff:Compression>
<tiff:Copyright>
<rdf:Alt>
<rdf:li xml:lang='x-default'>EN Copyright Notice | FR Copyright Notice | ES Copyright Notice</rdf:li>
</rdf:Alt>
</tiff:Copyright>
<tiff:ImageDescription>
<rdf:Alt>
<rdf:li xml:lang='x-default'>EN Description | FR Description | SP Description</rdf:li>
</rdf:Alt>
</tiff:ImageDescription>
<tiff:ImageLength>778</tiff:ImageLength>
<tiff:ImageWidth>1199</tiff:ImageWidth>
<tiff:NativeDigest>256,257,258,259,262,274,277,284,530,531,282,283,296,301,318,319,529,532,306,270,271,272,305,315,33432;D9F18E6F7E75268A03FB8670F1B960F8</tiff:NativeDigest>
<tiff:Orientation>1</tiff:Orientation>
<tiff:PhotometricInterpretation>2</tiff:PhotometricInterpretation>
<tiff:ResolutionUnit>2</tiff:ResolutionUnit>
<tiff:SamplesPerPixel>3</tiff:SamplesPerPixel>
<tiff:Software>Adobe Photoshop CS4 Macintosh</tiff:Software>
<tiff:XResolution>72/1</tiff:XResolution>
<tiff:YCbCrSubSampling>1 1</tiff:YCbCrSubSampling>
<tiff:YResolution>72/1</tiff:YResolution>
</rdf:Description>
<rdf:Description rdf:about=''
xmlns:xmp='http://ns.adobe.com/xap/1.0/'>
<xmp:CreateDate>2010-02-24T16:53:31+01:00</xmp:CreateDate>
<xmp:CreatorTool>Adobe Photoshop CS4 Macintosh</xmp:CreatorTool>
<xmp:MetadataDate>2010-02-24T17:59:58+01:00</xmp:MetadataDate>
<xmp:ModifyDate>2010-02-24T17:59:58</xmp:ModifyDate>
</rdf:Description>
<rdf:Description rdf:about=''
xmlns:stEvt='http://ns.adobe.com/xap/1.0/sType/ResourceEvent#'
xmlns:xmpMM='http://ns.adobe.com/xap/1.0/mm/'>
<xmpMM:DocumentID>xmp.did:F77F117407206811994CD44ACCE52683</xmpMM:DocumentID>
<xmpMM:History>
<rdf:Seq>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:F77F117407206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:12:57+01:00</stEvt:when>
</rdf:li>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:F87F117407206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:16:42+01:00</stEvt:when>
</rdf:li>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:F97F117407206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:17:20+01:00</stEvt:when>
</rdf:li>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:FA7F117407206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:40:49+01:00</stEvt:when>
</rdf:li>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:FB7F117407206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:46:10+01:00</stEvt:when>
</rdf:li>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:FC7F117407206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:47:48+01:00</stEvt:when>
</rdf:li>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:FD7F117407206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:48:08+01:00</stEvt:when>
</rdf:li>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:FE7F117407206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:50:30+01:00</stEvt:when>
</rdf:li>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:FF7F117407206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:50:30+01:00</stEvt:when>
</rdf:li>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:0080117407206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:51:40+01:00</stEvt:when>
</rdf:li>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:A2B034EC0C206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:52:05+01:00</stEvt:when>
</rdf:li>
<rdf:li rdf:parseType='Resource'>
<stEvt:action>saved</stEvt:action>
<stEvt:changed>/</stEvt:changed>
<stEvt:instanceID>xmp.iid:A3B034EC0C206811994CD44ACCE52683</stEvt:instanceID>
<stEvt:softwareAgent>Adobe Photoshop CS4 Macintosh</stEvt:softwareAgent>
<stEvt:when>2010-02-24T17:59:58+01:00</stEvt:when>
</rdf:li>
</rdf:Seq>
</xmpMM:History>
<xmpMM:InstanceID>xmp.iid:A3B034EC0C206811994CD44ACCE52683</xmpMM:InstanceID>
<xmpMM:OriginalDocumentID>xmp.did:F77F117407206811994CD44ACCE52683</xmpMM:OriginalDocumentID>
</rdf:Description>
<rdf:Description rdf:about=''
xmlns:xmpRights='http://ns.adobe.com/xap/1.0/rights/'>
<xmpRights:WebStatement>EN Copyright Info URL | FR Copyright Info URL | ES Copyright Info URL</xmpRights:WebStatement>
</rdf:Description>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end='w'?>
Les metadonnées modifiées via photoshop puis affichées à l’aide de la commande (1) dans exiftool
---- ExifTool ----
ExifTool Version Number : 8.11
---- System ----
File Name : swiss_5_with_meta.jpg
Directory : /Users/votre-nom/Documents/mon-repertoire-de-travail/meta_data_injector_photos/img_test_source
File Size : 235 kB
File Modification Date/Time : 2010:02:24 18:11:39+01:00
File Permissions : rw-r--r--
---- File ----
File Type : JPEG
MIME Type : image/jpeg
Exif Byte Order : Big-endian (Motorola, MM)
Current IPTC Digest : 58faf54addee482bb99957141da47bc3
Image Width : 1199
Image Height : 778
Encoding Process : Baseline DCT, Huffman coding
Bits Per Sample : 8
Color Components : 3
Y Cb Cr Sub Sampling : YCbCr4:4:4 (1 1)
---- JFIF ----
JFIF Version : 1.02
Resolution Unit : inches
X Resolution : 72
Y Resolution : 72
---- IFD0 ----
Image Description : EN Description | FR text | SP Description
Orientation : Horizontal (normal)
X Resolution : 72
Y Resolution : 72
Resolution Unit : inches
Software : Adobe Photoshop CS4 Macintosh
Modify Date : 2010:02:24 18:11:39
Artist : IPTC Creator
Copyright : EN Copyright Notice | FR text | ES Copyright Notice
---- ExifIFD ----
Color Space : Uncalibrated
Exif Image Width : 1199
Exif Image Height : 778
---- IFD1 ----
Compression : JPEG (old-style)
X Resolution : 72
Y Resolution : 72
Resolution Unit : inches
Thumbnail Offset : 564
Thumbnail Length : 3904
---- IPTC ----
Application Record Version : 2
Caption-Abstract : EN Description | FR some text ! | SP Description
Writer-Editor : G Description Writer
Headline : Headline
By-line : IPTC Creator
By-line Title : IPTC Creator Job Title
Object Name : EN Document Title | FR some text
Keywords : EN Keyword1, EN Keyword2, EN Keyword3 | FR some text | FR some text | ES Keyword1, ES Keyword2, ES Keyword3
Copyright Notice : EN Copyright Notice | FR FR some text ! | ES Copyright Notice
---- Photoshop ----
IPTC Digest : 58faf54addee482bb99957141da47bc3
X Resolution : 72
Displayed Units X : inches
Y Resolution : 72
Displayed Units Y : inches
Print Scale : ??
Global Angle : 30
Global Altitude : 30
Print Flags : .
URL : EN Copyright Info URL | FR Copyright Info URL | ES Copyright Info URL
Print Flags Info : ..
Color Halftoning Info : /ff.lff../ff.???..2.Z..5.-..
Color Transfer Funcs : ??????????????????????.???????????????????????.???????????????????????.???????????????????????.?
Grid Guides Info : ..@.@
URL List :
Slices : ....?.swiss_5_with_meta...?.....null..boundsObjc.Rct1.Top longLeftlongBtomlong..Rghtlong.?.slicesVlLs.Objc..slice..sliceIDlong.groupIDlong.originenum.ESliceOrigin.autoGeneratedTypeenum.ESliceTypeImg .boundsObjc.Rct1.Top longLeftlongBtomlong..Rghtlong.?.urlTEXT.nullTEXT.MsgeTEXT..altTagTEXT..cellTextIsHTMLbool..cellTextTEXT..horzAlignenum.ESliceHorzAlign.default.vertAlignenum.ESliceVertAlign.default.bgColorTypeenum.ESliceBGColorTypeNone.topOutsetlong.leftOutsetlong.bottomOutsetlong.rightOutsetlong
Pixel Aspect Ratio : .??
ICC Untagged : .
IDs Base Value : .
Photoshop Thumbnail : (Binary data 3904 bytes, use -b option to extract)
Version Info : ...Adobe Photoshop.Adobe Photoshop CS4.
Photoshop Quality : 8
Photoshop Format : Standard
Progressive Scans : 3 Scans
---- XMP-x ----
XMP Toolkit : Adobe XMP Core 4.2.2-c063 53.352624, 2008/07/30-18:05:41
---- XMP-xmp ----
Creator Tool : Adobe Photoshop CS4 Macintosh
Create Date : 2010:02:24 16:53:31+01:00
Modify Date : 2010:02:24 18:11:39+01:00
Metadata Date : 2010:02:24 18:11:39+01:00
---- XMP-dc ----
Format : image/jpeg
Creator : IPTC Creator
Subject : EN Keyword1, EN Keyword2, EN Keyword3 | FR text FR text | FR text | ES Keyword1, ES Keyword2, ES Keyword3
Title : EN Document Title | FR text | SP Document Title
Description : EN Description | Fr text | SP Description
Rights : EN Copyright Notice | FR text | ES Copyright Notice
---- XMP-photoshop ----
Legacy IPTC Digest : ECC6C07657D166351B3C812E85EB3E5C
Color Mode : 3
Headline : Headline
Authors Position : IPTC Creator Job Title
Caption Writer : G Description Writer
---- XMP-xmpMM ----
Instance ID : xmp.iid:A4B034EC0C206811994CD44ACCE52683
Document ID : xmp.did:F77F117407206811994CD44ACCE52683
Original Document ID : xmp.did:F77F117407206811994CD44ACCE52683
History Action : saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved
History Instance ID : xmp.iid:F77F117407206811994CD44ACCE52683, xmp.iid:F87F117407206811994CD44ACCE52683, xmp.iid:F97F117407206811994CD44ACCE52683, xmp.iid:FA7F117407206811994CD44ACCE52683, xmp.iid:FB7F117407206811994CD44ACCE52683, xmp.iid:FC7F117407206811994CD44ACCE52683, xmp.iid:FD7F117407206811994CD44ACCE52683, xmp.iid:FE7F117407206811994CD44ACCE52683, xmp.iid:FF7F117407206811994CD44ACCE52683, xmp.iid:0080117407206811994CD44ACCE52683, xmp.iid:A2B034EC0C206811994CD44ACCE52683, xmp.iid:A3B034EC0C206811994CD44ACCE52683, xmp.iid:A4B034EC0C206811994CD44ACCE52683
History When : 2010:02:24 17:12:57+01:00, 2010:02:24 17:16:42+01:00, 2010:02:24 17:17:20+01:00, 2010:02:24 17:40:49+01:00, 2010:02:24 17:46:10+01:00, 2010:02:24 17:47:48+01:00, 2010:02:24 17:48:08+01:00, 2010:02:24 17:50:30+01:00, 2010:02:24 17:50:30+01:00, 2010:02:24 17:51:40+01:00, 2010:02:24 17:52:05+01:00, 2010:02:24 17:59:58+01:00, 2010:02:24 18:11:39+01:00
History Software Agent : Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh, Adobe Photoshop CS4 Macintosh
History Changed : /, /, /, /, /, /, /, /, /, /, /, /, /
---- XMP-tiff ----
Orientation : Horizontal (normal)
Image Width : 1199
Image Height : 778
Photometric Interpretation : RGB
Samples Per Pixel : 3
X Resolution : 72
Y Resolution : 72
Resolution Unit : inches
Native Digest : 256,257,258,259,262,274,277,284,530,531,282,283,296,301,318,319,529,532,306,270,271,272,305,315,33432;2C5000BAA04BFFA9F5900B76C94F4978
Bits Per Sample : 8, 8, 8
---- XMP-exif ----
Exif Image Width : 1199
Exif Image Height : 778
Color Space : Uncalibrated
Exif Version : 0221
Native Digest : 36864,40960,40961,37121,37122,40962,40963,37510,40964,36867,36868,33434,33437,34850,34852,34855,34856,37377,37378,37379,37380,37381,37382,37383,37384,37385,37386,37396,41483,41484,41486,41487,41488,41492,41493,41495,41728,41729,41730,41985,41986,41987,41988,41989,41990,41991,41992,41993,41994,41995,41996,42016,0,2,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,20,22,23,24,25,26,27,28,30;B864613D4B4BE8FCE4057279AEEB3C6A
---- XMP-iptcCore ----
Intellectual Genre : IPTC Intellectual Genre
Creator Address : IPTC Address
Creator City : IPTC City
Creator Region : IPTC State / Province
Creator Postal Code : IPTC Postal Code
Creator Country : IPTC Country / Territory
Creator Work Telephone : IPTC Phone(s)
Creator Work Email : IPTC Email(s)
Creator Work URL : IPTC Website(s)
Scene : IPTC Scene
---- XMP-crs ----
Already Applied : True
---- XMP-xmpRights ----
Web Statement : EN Copyright Info URL | FR Copyright Info URL | ES Copyright Info URL
---- Adobe ----
DCT Encode Version : 100
APP14 Flags 0 : (none)
APP14 Flags 1 : (none)
Color Transform : YCbCr
---- Composite ----
Image Size : 1199x778
Thumbnail Image : (Binary data 3904 bytes, use -b option to extract)
A noter, les termes accentués risquent de connaitre des problèmes de caractère encoding sévère lorsque on les affiche via ExifTool !
---- IPTC ----
Application Record Version : 0
Caption-Abstract : EN Description | Mon cÏur ŽtŽ aussi dur que celui de ma sÏur ! | SP Description
Writer-Editor : G Description Writer
Headline : Headline
By-line : NEW IPTC Creator
By-line Title : NEW IPTC Creator Job Title
Object Name : NEW EN Document Title | Mon cÏur ŽtŽ aussi dur que celui de ma s
Keywords : EN Keyword1, EN Keyword2, EN Keyword3 | FR cÏur FR ŽtŽ | FR sÏur | ES Keyword1, ES Keyword2, ES Keyword3
Copyright Notice : EN Copyright Notice | FR Mon cÏur ŽtŽ aussi dur que celui de ma sÏur ! | ES Copyright Notice
En savoir plus
Logiciels sur MAC de lecture, d’édition des metadonnées sur des fichiers images
Logiciels sur PC de lecture, d’édition des metadonnées sur des fichiers images
Editer, fichiers, Image, Mac, Metadata, Metadonnées, Mettre à jour, PC, photo, Supprimer
19 février 2010 dans CMS, Création de site web, Joomla, Virtuemart, PHP, MYSQL par Bruno Flaven
Voilà une demande récurrente auquelle toute personne qui travaille sur le web a au moins été confronté une fois : gérer de A-Z d’une newsletter. A croire que l’on doit au minimum lire 5 newsletters par jour ! On va donc voir dans cet article comment gérer une newsletter sous Joomla 1.5. De la gestion des inscrit à l’envoi de la newsletter elle-même !
Joomla permet une gestion étendue de l’envoi de newsletter, on va donc tester quelques-uns des modules disponibles. Les tests vont être réalisés sous Joomla 1.5 en français Joomla! 1.5.15 Stable [ Wojmamni Ama Mamni ]
NB : Un conseil sur l’utilisation de ces modules : l’envoi intempestif de newsletter depuis un serveur web qui n’est pas véritablement un serveur d’envoi par exemple smtp.mac.com (serveur “white listed”) risque de causer plus de dégâts que de bienfaits à votre nom de domaine et à votre notoriété. Au de-là disons d’une liste de 500 utilisateurs inscrits, il serait bon d’envisager une vraie solution, la liste des raisons militant pour ce changement serait presque aussi longue que l’article à venir !
Les critères de sélection de notre extension fonctionnelle sous Joomla
Plusieurs de critères sélection président comme souvent à notre choix, citons-les en vrac :
- L’insertion facile d’un formulaire d’inscription à la newsletter
- La gestion des inscrits
- L’envoi d’un mail de confirmation et d’un mail de désabonnement
- L’ export/import des listes d’inscrits à la newsletter eu format
.txt, .csv, .xml. C’est très utile lorsque vous envoyez des newsletters non depuis votre serveur web mais depuis un service véritable d’envoi de newsletter.
- Quelques éléments de personnalisation de la newsletter elle-même ex Bonjour [name]
Compte tenu que nous sommes parti sur Joomla 1.5 et que l’on ne souhaite pas franchement avoir un plugin/module “moisi” qui nécessiterai l’activation legacy de triste mémoire. (Cf Joomla, Mobile, Plugin - Créer une version mobile de votre site sous Joomla)
Notre sélection s’est portée sur la liste suivante :
1. AcyMailing
De loin le meilleur module sous Joomla pour gérer une newsletter pour tous ces aspects. Module pour lequel, nous n’avons fait que peu de capture tant les écrans sont limpides et donc d’une compréhension aisée.
L’écran de configuration de AcyMailing
L’écran classique une fois qu’un module est installé
L’export CSV des inscrits à la newsletter sous AcyMailing ouvert à l’aide d’un éditeur texte
email;name;confirmed;html
info@hecube.net;Administrator;1;1
user_1@hecube.net;user_1;1;1
user_2@hecube.net;user_2;1;1
2. Communicator 2.0.x
C’est une extenion fonctionnelle de joomla qui se compose de 3 fichiers. Ces fichiers doivent être installés dans l’ordre qu’il vous plaira de suivre.
- Un Composant
- Un Module
mod_communicatorsubscribe_2.0.3.zip
- Un Plugin
plg_search_communicator_2.0.0.zip
- Un pack Language
fr-FR_communicator_lang_both_2.0.0.zip
Une fois l’ensemble installé, vous disposez d’un espace de publication des newsletters assez facile d’accès qui permet d’archiver vos envois.
Se promener dans Communicator
L’espace de publication des newsletters assez proche du module letterman
L’export des inscrits se fait dans un format xml via Communicator
<?xml version="1.0" encoding="UTF-8" ?>
<!-- Communicator export file -->
<!DOCTYPE subscribers [
<!ELEMENT subscribers (subscriber+)>
<!ELEMENT subscriber (subscriber_id, name, email, confirmed, subscribe_date)>
<!ELEMENT subscriber_id (#PCDATA)>
<!ELEMENT name (CDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT confirmed (#PCDATA)>
<!ELEMENT subscribe_date (#PCDATA)>
]>
<subscribers>
<subscriber>
<subscriber_id>1</subscriber_id>
<name><![CDATA[info]]></name>
<email>info@hecube.net</email>
<confirmed>0</confirmed>
<subscribe_date>2010-02-18 07:35:47</subscribe_date>
</subscriber>
</subscribers>3. ccNewsletter
C’est un module Joomla, doublé d’un composant, créé par Chill Creations (http://www.extensions.chillcreations.com/), le fichier télécahrgé est newsletter_ccNewsletter_107_UNZIP_FIRST.zip, dans lequel nous trouvons comme dans un oeuf de pâques, deux fichiers à installer : com_ccnewsletter.zip et mod_ccnewsletter.zip.
Un fois le composant et le moudle installés, il vous reste à activer le module.
Activation du module ccNewsletter la position left du template Joomla
Le formulaire d’inscription “moche” de ccNewsletter
Le formulaire vérifie la validité des adresses et nom d’utilisateur comme la plupart des formulaires des modules précédents.
Les paramètres de personnalisation de votre newsletter au sein de ccNewsletter
[unsubscribe link] Inserted anywhere in your email will automatically generate a link for a user to unsubscribe.
[name] Inserted anywhere in your email will automatically generate a username for greetings.
[activate link] Inserted anywhere in your email will automatically generate a link for email activation.
Les laissés pour compte de la gestion newsletter
Il s’agit essentiellement d’abandonner les modules/plugins qui n’ont pas été développés pour Joomla 1.5. Ainsi, l’extension fonctionnelle Letterman ou Acajoom n’ont pas été retenus même si le plugin legacy a été activé. En attendant que ces modules soient portés dans environnement 1.5, il vaut mieux y renoncer, c’est un facteur d’instabilité en moins.
En savoir plus
CMS, Joomla, Module, MySQL, newsletter, PHP
16 février 2010 dans CMS, Création de site web, Drupal, PHP, MYSQL, Technologie, Webdesign, XHTML CSS par Bruno Flaven
On va tenter de réaliser un thème Drupal à partir d’un fichier statique HTML. Le plus rapidement possible cela va sans dire car il est toujours question de se surpasser dans une économie capitaliste obsédé par la performance et le ROI ! L’intégration de ce thème a vocation juste à montrer qu’il est possible de plonger rapidement dans la code et de ressortir avec les prémices d’un thème Drupal. Bien sûr, cela ne couvre que 60% d’un thème opérationnel sous Drupal 6, il reste beaucoup de fine-tuning pour parfaire ce thème. Pour cet article, le thème a été réalisé sous Drupal 6.15
Les valeurs du fichier principale page.tpl.php
La première chose est bien connaitre les valeurs qui peuvent être utilisées dans le fichier page.tpl.php qui est disons le noeud, pour reprendre la terminologie “Drupalienne”, de l’affichage d’un thème.
Ces valeurs sont appelés par Drupal au sein de notre fichier page.tpl.php, vous n’aurez donc qu’à remplacer les éléments statiques en HTML par d’autres valeurs dynamiques reconnus et utilisés par Drupal 6.
On va retrouver ici, quelques-unes des pratiques qui étaient déjà en action sur un précèdent article.
Un extrait des valeurs possibles de page.tpl.php
$base_path
Returns the base URL path of the Drupal installation. At the very least, this will always default to /.
$breadcrumb
HTML for displaying the breadcrumbs at the top of the page.
$closure
Needs to be displayed at the bottom of the page, for any dynamic javascript that needs to be called once the page has already been displayed.
$content
The HTML content generated by Drupal to be displayed.
$css
An array of all the CSS files for the current page.
$directory
The directory the theme is located in, e.g.
themes/garland or themes/garland/minelli.
$feed_icons
A string of all feed icons for the current page.
$footer_message
The footer message as defined in the admin settings, also the HTML for the footer region.
$head
HTML as generated by drupal_get_html_head().
…. to be continued
Source : http://drupal.org/node/11812
Ce fichier sera notre fichier principal pour ce thème qui ne comporte à ce jour qu’un seul fichier. Pour trouvre des modeles HTML, il suffit de se baisser. En effet, le Web regarde de ressources qui distribuent des templates HTML. Pour notre part, nous sommes allés chercher un thème nommé singapore sur freelayouts.com/
Le thème singapore en HTML ou dans les petites rues de singapore
Source : http://www.freelayouts.com/websites/html-templates?order=rating+desc.
Etape 1 - Convertir notre fichier html en page.tpl.php
C’est disons la chose la plus simple à faire, renommer un fichier est donc la première chose à faire. Vous allez donc renommer index.html en page.tpl.php
Etape 2 - Utiliser des normes dans les noms de vos répertoires et de vos fichiers au sein de votre futur thème
Le répertoire d’images
Dans notre exemple, le répertoire d’image se nomme grafics, changez-le pour images ou img. Le nom de ce répertoire n’a pas d’impact sur le fonctionnement de Drupal mais c’est une bonne pratique de nomenclature pour chacun vos thèmes. On gagne toujours du temps et on se rapproche de l’adage, Convention over Configuration
La feuille de style (CSS)
La feuille de style est toujours nommé style.css, comme dans Wordpress d’ailleurs.
Etape 3 - Placer votre nouveau thème dans le répertoire Drupal qui convient
Le répertoire qui dans notre exemple se nomme singapore devra se placer dans le répertoire adéquat de Drupal. Ce répertoire se nomme themes, si c’est la première fois que vous utilisez un thème vous allez devoir le créer à cette endroit /Applications/MAMP/htdocs/[le_repertoire_dans_lequel_drupal_6_est_installe]/sites/all/..
C’est dans ce répertoire que l’on stocke les thèmes personnalisés pour Drupal
Le README.txt
// $Id: README.txt,v 1.3 2006/12/23 15:35:51 dries Exp $
This directory should be used to place downloaded and custom modules
and themes which are common to all sites. This will allow you to
more easily update Drupal core files. These modules and themes should
be placed in subdirectories called modules and themes as follows:
sites/all/modules
sites/all/themes
Etape 4 - Créer un fichier .info pour votre thème
C’est une nécessité pour faire fonctionner un thème sous Drupal 6.
A titre d’exemple, la source du fichier garland.info
; $Id: garland.info,v 1.5 2007/07/01 23:27:32 goba Exp $
name = Garland
description = Tableless, recolorable, multi-column, fluid width theme (default).
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css
; Information added by drupal.org packaging script on 2009-05-13
version = "6.12"
project = "drupal"
datestamp = "1242243950"
; $Id: singapore.info,v 1.0 2010/02/14 16:14:05 $
name = singapore
screenshot = screenshot.png
description = Quick and dirty conversion of an HTML page.
version = VERSION
core = 6.x
engine = phptemplate
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
stylesheets[all][] = style.css
stylesheets[print][] = print.css
; Information added by hecube.net for an article about quick creation for theme in drupal 6, made the 2010-02-14
version = "6.15"
project = "drupal"
datestamp = "1266160263"
Pour information, la valeur datestamp est le nombre de secondes qui sépare la date de création du fichier et le 1 Janvier 1970. Vous obtiendrez en php, la valeur en faisant un print de la valeur time();
$datestamp = time ();
print('$datestamp => '.$datestamp.'');Injecter quelques valeurs de Drupal dans votre tout nouveau template
On place ici en vrac quelques valeurs qui vont être appelées au sein de votre thème pour :
- parfaire un peu son caractère dynamique
- quitter définitivement le coté statique de notre thème HTML
Un conseil, conserver Garland comme thème pour votre administration, car vous risquez avec l’activation d’un thème aussi sommaire de ne pouvoir accéder ensuite à votre administration http://[le_chemin_vers_l_admin-de_votre drupal]/?q=admin. Sous MAMP et dans notre exemple, l’admininbstration est accessible à cette adresse http://127.0.0.1/DRUPAL_6/site/?q=admin.
Activation du thème singapore
On maintient Garland en même temps que le thème singapore
On maintient Garland, il est possible aussi de conserver ce thème lorsque on édite les articles en cliquant sur le checkbox Use administration theme for content editing.
Le thème singapore sous Drupal 6.x
Un rappel de quelques valeurs essentiels à passer dans la fichier de votre thème Drupal 6.x
<?php
print(''.$tabs.'');
print(''.$title.'');
print(''.$content.'');
print(''.$right.'');
print(''.$footer.'');
print(''.$footer_message.'');
?> Notre fichier page.tpl.php aux couleurs de singapore
<?php
// $Id: page.tpl.php,v 1.18.2.1 2009/04/30 00:13:31 goba Exp $
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
</head>
<body>
<div id="overall">
<!-- start head grafic -->
<div id="head">
<!-- start top navigation -->
<div id="topnav">
<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
</div>
</div>
<!-- start any-links & mid grafic-->
<div id="anyline">
<div id="anybgr"></div>
<div id="anylink">
<?php /* PAS UTILE POUR LE MOMENT */ ?>
<!-- <a href="#" target="_top" onfocus="this.blur()">anylink</a>
<a href="#" target="_top" onfocus="this.blur()">anylink</a>
<a href="#" target="_top" onfocus="this.blur()">anylink</a>
<a href="#" target="_top" onfocus="this.blur()">anylink</a>
<a href="#" target="_top" onfocus="this.blur()">anylink</a>
<a href="#" target="_top" onfocus="this.blur()">anylink</a> -->
</div>
</div>
<!-- bottom grafic & homepage title -->
<div id="tgbtm"></div>
<!-- insert homepage title here -->
<div id="title-shadow"><?php print $site_slogan ?></div>
<div id="title"><?php
/* POUR FAIRE UN LIEN SUR LA VALEUR $site_slogan EVENTUELLEMENT */
// print ('<a href="'. check_url($front_page) .'" title="'. $site_slogan .'">'.$site_slogan.'</a>');
print (''.$site_slogan.'');
?></div>
<!-- start sidebar -->
<div id="sidebar">
<?php print $mission ?>
<?php if ($search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
<?php print $left ?>
</div>
<div id="content">
<?php print(''.$content.''); ?>
</div>
</div>
<!-- footer lines -->
<div id="overall-footer">
<div id="footer">
<b><?php print $footer_message?></b>
<br><br>
<?php print $footer?>
<br><br>
<?php print $feed_icons ?>
</div>
</div>
<?php print $closure ?>
</body>
</html>Conclusion : Sans être un développeur aguerri mais avec de bonnes notions d’HTML, de CSS, une compréhension basique du PHP et bien évidemment un solide sens pratique, on peut parvenir à un début de thème sous Drupal 6.x. Paradoxalement, cette relative simplicité dans la création de thème contraste avec la complexité de la gestion éditoriale. En effet, d’un point strictement éditorial, le temps d’apprentissage et de maitrise du workflow dans la publication de Page et de Story va bien plus fastidieux que sous Wordpress par exemple. A ce titre, à lire, un excellent et amusant retour d’expérience sur Drupal vs Wordpress dans l’article ci-dessous notamment la partie Why I Would Stay Away from Drupal.
Une partie intéressante de cette article
[...] At this point, I realized that Drupal users consisted mainly of web developers and programmers who saw the beauty of Drupal from it’s code rather than it’s interface. It was much easier for them to extend the Drupal functions because the “CODE” was clean.
But for someone who doesn’t know how to code, I found it difficult to work with. Don’t get me wrong. Drupal is a fantastic CMS. And if you find it meets your needs out of the box, then by all means use it. But if like me and many other online publishers, you need to tweak it a bit here and there, then you’re better off with something like Joomla unless you have an in house programmer that can do all the tweaking for you. [...]
Source : http://www.webbriefcase.net/2009-04/choosing-a-cms-to-run-your-membership-site/
En savoir plus
CSS, Drupal, html, Intégration, MySQL, PHP, Template, XHTML
10 février 2010 dans Création de site web, Divers, Flash, Actionscript, Flex, Flex, Image, Graphisme, Photoshop, Mac, Technologie, Tutoriaux, Webdesign, XHTML CSS par Bruno Flaven
On souhaite créer un fichier de thème pour une application faite sous Flex, c’est à dire un fichier .swc. On va faire les essais de compilation sous Flex 3 et sur un mac. Il vous faut donc Flex 3 et un accès au terminal. Pour se faire on va créer une application sommaire de sélection parmi un array composé par des présidents américains à laquelle on va rajouter un thème compilé SmokeTheme.swc.
L’application : la Flex’O selection for US president
Le code de Compile_SWC_2.mxml édité dans Flex
Notre application avec l’habillage (skin) par défaut
Le fichier source Compile_SWC_2.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
[Bindable] private var dp:Array =
[
/* US presidents */
{label:"George Washington", data:0},
{label:"John F. Kennedy", data:1},
{label:"Lyndon B. Johnson", data:2},
{label:"Richard M. Nixon", data:3},
{label:"Gerald R. Ford", data:4},
{label:"James E. \"Jimmy\" Carter", data:5},
{label:"Ronald W. Reagan", data:6},
{label:"William J. \"Bill\" Clinton", data:7},
{label:"George W. Bush", data:8},
{label:"Barack Obama", data:9}
];
private function ClickHandler ():void {
messageField.text = "Vous avez choisi => " + nameCB.selectedLabel + " ";
}
]]>
</mx:Script>
<mx:Panel title="Faites un choix parmi ces présidents américains :" width="50%" height="50%" paddingLeft="10" paddingTop="10">
<mx:VBox width="100%">
<mx:HBox width="100%">
<mx:Text text="Choisir :" />
<mx:ComboBox id="nameCB" dataProvider="{dp}"/>
<mx:Button label="Selectionner" click="ClickHandler();"/>
</mx:HBox>
<mx:Text id="messageField" />
</mx:VBox>
</mx:Panel>
</mx:Application>Compil à la “main”
Jusqu’à présent rien d’extraordinaire, on vient de faire une application en Flex. On va maintenant chercher à corser le tout en cherchant à compiler manuellement un thème pour en faire un fichier .swc et l’adjoindre à notre application.
Dans un tout premier temps, il va falloir localiser le répertoire, qui contient l’utilitaire nécessaire à la compilation.
Premier problème, accéder à l’utilitaire de compilation de Flex. Il faut chercher le chemin vers le répertoire bin dans Flex et lancer la commande qui va bien pour accéder à l’utilitaire.
Sous mac, l’utilitaire est dans /Applications/Adobe Flex Builder 3/sdks/3.2.0/bin/. Dans le terminal cette commande vous emmène direct dans le répertoire et lance le terminal comme il faut bin du Flex SDK cd /Applications/Adobe\ Flex\ Builder\ 3/sdks/3.2.0/bin/fcsh
L’aide contextuelle au compiler de Flex
(fcsh) -help
List of fcsh commands:
mxmlc arg1 arg2 ... full compilation and optimization; return a target id
compc arg1 arg2 ... full SWC compilation
compile id incremental compilation
clear [id] clear target(s)
info [id] display compile target info
quit quit
Il s’agit de la commande pour compiler une feuille e style en fichier thème .swc
compc -include-file my_style_dashboard.css /Users/nom-d-utilisateur/le_chemin_vers_la_css/my_style_dashboard.css -o /Users/nom-d-utilisateur/le_chemin_vers_la_swc/my_style_dashboard.swc
Vous pouvez aussi utiliser via une ligne de commande le compiler mxmlc pour convertir vos fichiers .mxml en fichiers .swc
mxmlc /Users/nom-d-utilisateur/le_chemin_vers_la_mxml/MonApplication.mxml -o /Users/nom-d-utilisateur/le_chemin_vers_la_mxml/MonApplication.swc
Une erreur possible pour la compilation d’un mxml
Il vous faut évidemment donner le chemin (path) de là où se trouve les fichiers du thème.
mxmlc MonApplication_1.mxml -o MonApplication_1.swc
Le message d’erreur qui va s’afficher dans la mesure où le fichier MonApplication_1.mxml est introuvable.
Loading configuration file /Applications/Adobe Flex Builder 3/sdks/3.2.0/frameworks/Flex-config.xml
Error: unable to open 'MonApplication_1.mxml'
La ligne de commande pour une bonne compilation d’un mxml
mxmlc /Users/nom-d-utilisateur/le_chemin_vers_la_mxml/MonApplication_1.mxml -o /Users/nom-d-utilisateur/le_chemin_vers_la_mxml/MonApplication_1.swc
Une fois que vous maitrisez les principales lignes de commande pour utiliser le compilateur, on peut se livrer à l’objet véritable de l’article “Créer un fichier de thème en .swc“
Compiler un thème compilé ou Créer un fichier .swc
On va voir véritablement comment on peut à partir d’un thème complet et produire un fichier .swc. Pour cela, on va se servir des thèmes livrés avec l’installation par défaut de Flex. L’ensemble visible sur un mac dans le répertoire suivant : /Applications/Adobe Flex Builder 3/sdks/3.2.0/frameworks/
On va se servir du thème Smoke comme base de départ pour créer note .swc. Ce thème se compose d’un répertoire Smoke contenant 2 fichiers : Smoke.css et moke_bg.jpg. Les deux fichiers compilés vont former le fichier de thème Flex nommé SmokeTheme.swc
compc -include-file /Users/nom-d-utilisateur/le_chemin_vers_le_swc/Smoke/Smoke.css /Users/nom-d-utilisateur/le_chemin_vers_le_swc/Smoke/Smoke.css -include-file /Users/nom-d-utilisateur/le_chemin_vers_le_swc/Smoke/Smoke/smoke_bg.jpg /Users/nom-d-utilisateur/le_chemin_vers_le_swc/Smoke/Smoke/smoke_bg.jpg -o /Users/nom-d-utilisateur/le_chemin_vers_le_swc/SmokeTheme.swc
Associer un .swc à une application Flex
Il vous faut créer le fichier swc selon la procédure décrite ci-dessus. Ensuite, vous devez ajouter le fichier .swc à votre application, puis entrer la ligne de commande pour joindre le thème à la publication de votre application. Il ne vous reste qu’à publier votre application en lançant le compiler via la procédure normale
Ajouter le fichier SmokeTheme.swc à l’application
Modifier les informations du Flex compiler avec l’inclusion du thème SmokeTheme.swc à l’application
Joindre le thème à l’application se fait à l’aide de cette commande, -locale en_US -theme /Users/nom-d-utilisateur/le_chemin_vers_le_swc/SmokeTheme.swc
L’application publiée avec le thème compilé SmokeTheme.swc
Conclusion : Si vous connaissez un tant soit peu l’intégration notamment la rédaction des CSS, vous pouvez produire des “skins” pour des applications au même titre que des thèmes Drupal ou Wordpress.
En savoir plus
Adobe, Flex, Interface, mxml, Skin, SWC, theme
5 février 2010 dans CMS, Création de site web, Divers, Meilleurs blogs, PHP, MYSQL, Technologie, Tutoriaux, Wordpress, XHTML CSS par Bruno Flaven
Les champs personnalisés autrement dit les Custom Fields sont tout ce qui vous restent lorsque vous ne pouvez assigner votre contenu aux formes classiques proposés par WordPress à savoir Article, Page, Lien. Dès lors que vous utilisez les champs personnalisés, vous mettez sans la savoir le doigt dans l’engrenage de la personnalisation de la gestion de contenu et de son affichage de votre contenu. Engrenage dont vous sortirez probablement vivant mais mais au prix exorbitant de la création tous azimuts de Custom Fields qui rend la gestion de votre contenu désormais plus complexe.
En matière de gestion de contenu, on peut se mettre à penser que Drupal bien que à notre avis plus difficile à prendre en main permet d’ingérer plus facilement du contenu de forme diverse. En effet, Drupal se révèle plus souple quant à sa capacité à accueillir et à restituer du contenu hétérogène mais il est définitivement plus technique et complexe que WordPress dans la gestion de contenu. La courbe d’apprentissage de WP infiniment moins longue que celle de Drupal.
- Nom => le champs personnalisé
- Pays => country
- Ville => city
La commande qui appelle le champs personnalisé
Les fonctions pour les champs personnalisés
Les explications concernant toutes les autres fonctions susceptibles d’appeler les champs personnalisés. Elles sont disponibles sur le codex de WordPress
Cette fonction retourne toutes les combinaisons clé/valeur pour un article (post) get_post_custom();. Dans notre exemple, le champs personnalisé que l’on retourne est country.
$custom_fields = get_post_custom($post->ID);
$my_custom_field = $custom_fields['country'];
foreach ( $my_custom_field as $key => $value )
echo $key . " => " . $value . "<br />";
Le rendu HTML du code pour un article doté d’un champ personnalisé country
Source : http://codex.wordpress.org/Function_Reference/get_post_custom
La fonction récupère toute la liste des clés de l’article (post) get_post_custom_keys();.
$custom_field_keys = get_post_custom_keys();
foreach ( $custom_field_keys as $key => $value ) {
$valuet = trim($value);
if ( '_' == $valuet{0} )
continue;
echo $key . " => " . $value . "<br />";
} Le rendu HTML du code pour un article doté de 2 champs personnalisés country, city
Source : http://codex.wordpress.org/Function_Reference/get_post_custom_values
La fonction retourne le couple clé/valeur spécifique pour l’article affiché. Dans notre exemple, attaché à cet article, nous affichons champs personnalisé country
$mykey_values = get_post_custom_values('country');
foreach ( $mykey_values as $key => $value ) {
echo "$key => $value ('country')<br />";
}Le rendu HTML du code pour un article doté d’un champs personnalisé country
Source : http://codex.wordpress.org/Function_Reference/get_post_custom_values
La fonction requiert l’id de l’article (post), la clé et si la dernière valeur est fixé à true, cela permettra d’imprimer la valeur.
if (get_post_meta($post->ID,'country',true)) :
echo ('<br><b>Pays :</b><br> '.get_post_meta($post->ID,'country',true).'');
endif;Source : http://codex.wordpress.org/Function_Reference/get_post_custom
Un exemple d’appel aux champs personnalisés
Le code spécifique pour l’affichage des champs personnalisés.
<?php
if (get_post_meta($post->ID,'country',true)) :
echo ('<br><b>Pays :</b><br> '.get_post_meta($post->ID,'country',true).'');
endif;
if (get_post_meta($post->ID,'city',true)) :
echo ('<br><b>Ville :</b><br> '.get_post_meta($post->ID,'city',true).'');
endif;
?>
Le code complet de la boucle pour afficher le contenu de la page archive.php
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?>>
<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<small><?php the_time('l, F jS, Y') ?></small>
<div class="entry">
<?php /* the_content() */ ?>
</div>
<?php
if (get_post_meta($post->ID,'country',true)) :
echo ('<br><b>Pays :</b><br> '.get_post_meta($post->ID,'country',true).'');
endif;
if (get_post_meta($post->ID,'city',true)) :
echo ('<br><b>Ville :</b><br> '.get_post_meta($post->ID,'city',true).'');
endif;
?>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
<?php endwhile; ?>
Conclusion : L’utilisation de champs personnalisés (custom fields) peut se révéler très utile sous WP. De très nombreux thèmes résolvent notamment les difficultés à gérer un contenu hétérogène sous Wordpress à l’aide des champs personnalisés (custom fields) et notamment l’affichage d’images dans ce que l’on a coutume de nommer un “slideshow”. Un conseil comme pour toute bonne chose, il faut savoir en utiliser les custom fields avec modération. Dès lors que leur nombre devient très important, il faut envisager une véritable extension fonctionnelle (plugin) afin d’apurer toutes ces custom fields qui sont autant de rustines sur votre WP mais dont vous êtes le seul à connaitre la fonction.
Un “slideshow” sur le blog de 3WDOC.COM
Les champs personnalisés qui pilotent le “slideshow”
En savoir plus
champs personnalisés, CMS, Custom fields, MySQL, PHP, Wordpress
29 janvier 2010 dans Création de site web, Divers, Flash, Actionscript, Flex, Javascript, Ajax, Tutoriaux, Vidéo par Bruno Flaven
Le JW FLV Player de LongTail Video est un player extrêmement populaire car gratuit et très facile à mettre en place. Ce player existe en version gratuite déjà très aboutie. Cette version gratuite vous permettra notamment la diffusion de vidéos à différents formats (FLV, MP4 encodé avec le codec H.264), l’utilisation de “playlist” là aussi de formats différents (ASX, RSS… etc) et enfin sous différents protocoles (RMTP, HTTP…).
La baseline commrcial du JW FLV Player
The JW Player™ is the Internet’s most popular and flexible media player. It supports playback of any format the Adobe Flash Player can handle (FLV, H.264, MP4, MP3, AAC, JPG, PNG and GIF). It also supports various streaming and playlist formats (including RMTP, HTTP, live streaming and more), a wide range of flashvar settings and an extensive JavaScript API.
Il existe une version payante du JW FLV Player. L’achat de la licence permet en autre de faire disparaitre l’agençante incrustation du logo JW et son remplacement à la volée vos vidéos avec ce que l’on nomme un bug antenne, c’est à dire votre propre logo. L’achat de la licence offre la possibilité de changer la skin du player JW.
- logo.file (undefined): location of an external jpg, png or gif image which replaces the watermark image (Licensed players only)
- logo.link (undefined): link to direct to when the watermark image is clicked on (Licensed players only)
- logo.hide (true): When set to true, the logo will auto-hide (Licensed players only)
La méthode SWFObject
swfobject est une méthode de chargement de contenu flash plutôt facile à mettre en place pour se faire il ne faut charger qu’un seul fichier.
swfobject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file
Source : http://code.google.com/p/swfobject/
Un exemple du SETUP WIZARD
Le chargement tout simple d’une vidéo direct dans le player à laide de SWFObject avec une légere personnalisation des couleurs.
<script type='text/javascript' src='swfobject.js'></script>
<div id='mediaspace'>C'est ici que s'insère le player</div>
<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','470','320','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
/* La vidéo par défaut proposé par le site de longtailvideo.com */
so.addVariable('file','http://content.longtailvideo.com/videos/flvplayer.flv');
so.addVariable('backcolor','666666');
so.addVariable('frontcolor','000099');
so.addVariable('lightcolor','000099');
so.addVariable('screencolor','0000CC');
so.addVariable('autostart','true');
so.write('mediaspace');
</script>Le rendu du code ci-dessus
Source : http://www.longtailvideo.com/support/jw-player-setup-wizard
Jouer une playlist au sein de JW player
JW player est en mesure de charger les principaux formats de playlist habituels sur le Web. Voici les principaux formats dont vous disposez qui sont tout à la base des dérives du XML avec chacune des nuances. Les fichiers de vos playlists aurront constamment comme extension .xml
- Un flux ASX, c’est la playlist propre au Windows Media Player.
- Un fil ATOM, bien connu des utilisateurs de Wordpress
- Un fil RSS de type iTunes et Media (irss et mrss)
- Un fil SMIL, bien connu des utilisateurs de Quicktime
- XSPF feeds : un format assez classique qui est utilisé par d’autre player gratuit notamment le player audio de mp3
XSPF Web Music Player fait en Flash (http://musicplayer.sourceforge.net/)
<script type='text/javascript' src='swfobject.js'></script>
<!-- Le js va écrire dans le div nommé mediaspace -->
<div id='mediaspace'>C'est ici que s'insère le player</div>
<script type="text/javascript">
var flashvars = {};
flashvars.file = "my_playlist_2.xml";
flashvars.width = "300";
flashvars.height = "328";
flashvars.displayheight = "225";
flashvars.backcolor = "0x111111";
flashvars.frontcolor = "0xdddddd";
flashvars.lightcolor = "0x99cc00";
var params = {};
params.loop = "false";
params.quality = "best";
params.wmode = "transparent";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "movieId";
swfobject.embedSWF("mediaplayer.swf", "mediaspace", "300", "328", "9.0.124", "expressInstall.swf", flashvars, params, attributes);
</script>Les vidéos de la playlist type XSPF sont délivrés par un serveur en local accessible via http://127.0.0.1/97_JW_PLAYER/_m_2.flv en http streaming pour la vidéo _m_2.flv.
<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<title>Titre Film 1</title>
<creator>hecube.net</creator>
<location>http://127.0.0.1/97_JW_PLAYER/_m_2.flv</location>
<info>http://www.hecube.net</info>
</track>
<track>
<title>Titre Film 2</title>
<creator>Hemedia.net</creator>
<location>http://127.0.0.1/97_JW_PLAYER/_m_3.flv</location>
<info>http://social.hecube.net</info>
</track>
</trackList>
</playlist>Source : http://www.longtailvideo.com/support/tutorials/Setting-Up-A-Playlist
Le rendu du code ci-dessus
En le chargeant directement depuis le serveur en local, on évite l’affichage de cette fenêtre système de mise ne garde. Toutefois si vous cliquez sur OK, vous aurez la possibilité de voir la playlist se lancer car vous autoriser une exception temporaire de sécurité.
En savoir plus
flv, Image, Javascript, JW Player, LongTail, Playlist, Vidéo; SWFObject
26 janvier 2010 dans CMS, Création de site web, Ecommerce, Marketing Web, PHP, MYSQL, Wordpress par Bruno Flaven
Dans notre comparatif des solutions e-commerce les plus habituels, après avoir passé rapidement ne revue Drupal/Ubercart, on va s’intéresser à Wordpress et l’un des plus fameux plugins de e-commrece disponible sur le marché à ce jour : wp-e-commerce. On va donc tester le couple Wordpress/WP-e-commerce. Pour se faire, on va partir sur la toute dernière version de wp-e-commerce, conçu par les neo-zélandais de www.instinct.co.nz wp-e-commerce.3.7.5.3.zip et la dernière version de Wordpress disponible en anglais WordPress 2.9.1
Pour l’installation de Wordpress en local, vous pouvez vous reportez à un articles de ce blog.
Les instruction d’installation de wp-e-commerce extrait du readme.txt
== Installation ==
1. Upload the folder ‘wp-e-commerce’ to the ‘/wp-content/plugins/’ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
Activer le Plugin wp-e-commerce
30 de plus à table
La seule installation du plugin wp-e-commerce.3.7.5.3.zip occasionne une sérieuse inflation dans la nombre de tables. De 11 tables nécessaires au fonctionnement du WordPress 2.9.1, on passe à 44 tables, soit un ajout de 30 tables dont le préfixe commence par wp_wpsc_
La BDD avant l’activation du plugin
La BDD après l’activation du plugin
Attention vous êtes dans un environnement anglophone, ainsi la valeur Tax settings où vous allez rentrer le taux de TVA en vigueur pour vos produits, vous devez écrire 19.6 et non 19,6.
La création d’une boutique
On va se livrer à une création de boutique plus avancé, imaginons que vous souhaitiez créer une boutique ne ligne avec 3 catégories Cat_1, Cat_2, Cat_3. Chacune d’entre elles va contenir plusieurs types de produits. On va aussi créer 3 marques Marque_1, Marque_2, Marque_3
Catégories et Marques de notre boutique en ligne
Les produits peuvent classés par catégorie ou par marque. Bien évidemment un article peut être attaché à plusieurs catégories comme à plusieurs marques.
- Cat_1
- Cat_2
- Cat_3
- Marque_1
- Marque_2
- Marque_3
La configuration générale de votre boutique en ligne sous Wordpress
Les différents onglets vous permettront de paramètrer l’ensemble des éléments clés de votre futur boutique.Vous avez dans ce plugin en version gratuite la possibilité de configurer facilement les principaux écrans et procédures de votre future boutique en ligne.
L’insertion des produits et des catégories va se faire à l’aide du nouveau menu apparu à gauche dans votre administration WP.
Il existe la possibilité d’importer en masse vos références produits via un fichier .csv
Quelques améliorations pour une meilleure expérience marketing sur votre boutique en ligne
Vous avez la possibilité de vous livrer dès le lancement de votre boutique à une gestion du “couponing”
Les règles qui régissent l’expédition de vos produits
Vous avez la possibilité de vous livrer dès le lancement de votre boutique à une gestion du “couponing”
Les paramètres de la passerelle de paiement (payment gateway)
L’onglet qui régit les moyens de paiement à disponibles sur votre boutique sous Wordpress.
La configuration du processus de commande (checkout process)
Créer des produits
On va voir les différents champs à compléter pour finaliser l’insertion d’un produit dans notre boutique. Chaque porduit sera illustré par une image, la taille par défaut ets de 96×96 en pixels.
Le nom du produit Prod_C
Les catégories attachés à ce produit Prod_C
Les tarifs d’expédition du produit Prod_C
Passer une commande pour voir le processus de commande en action (checkout process)
On est dans le theme par défaut de WP, c’est la raison pour laquelle, les écrans ne sont pas finalisés mais fonctionnellement tout y est. En Ajax, votre panier s’augmente des différents produits sélectionnés et une mise à jour automatiquement se fait du montant global de vos achats.
Votre profil client et l’adresse d’expédition
L’écran de récapitulation de votre commande
Pour parvenir à cette écran, nous avons réduit à néant les tarifs de livraison. La configuration du “shipping” est un élément clé du fonctionnement de votre boutique ne ligne.
Dans l’administration, vous obtenez une ligne pour votre première commande
Conclusion
Le plugin dans cette version gratuite est complet pour gérer de A à Z une boutique ne ligne adossée à Worpdress, ce qui est était l’objectif initial de cette article. La prise ne main est aisée et facile comme souvent sous Wordpress. Il faut se toutefois se pencher sans doute un peu sur la configuration de la passerelle de paiement mais globalement l’interface avec Paypal ou la solution Google Checkout est grandement faciliter. Si vous souhaitez plus de vues produits notamment, vous pouvez passer à la version payante de ce plugin. Un petit inconvénient tout de même, il faudra dans cette version gratuite comme dans la payante explorer le code pour internationaliser les fichiers afin de publier en français par exemple votre boutique.
En savoir plus
boutique en ligne, e-commerce, MySQL, PHP, plugin, Site E-commerce, solution e-commerce, Wordpress
16 janvier 2010 dans CMS, Création de site web, Drupal, Ecommerce, Hébergement, PHP, MYSQL par Bruno Flaven
Cette article s’intéresse à l’installation d’un module e-commerce complet Ubercart pour gérer une boutique en ligne sous Drupal 6. On tentera dans un avenir proche, de se livre à une comparaison avec les couples les plus connus de solutions e-commerce adossé à un CMS, pour ne pas les citer : Joomla/Virtumart ou Wordpress/GoldenCart.
Notre installation va se faire en local sur la version gratuite de MAMP, avec Drupal version 6.15 et le module Ubercart version 2.2
Pour installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :
Création de la BDD pour accueillir Drupal 6
On passe rapide sur l’installation de Drupal 6 qui a été détaillé dans un article précèdent.
Les information indispensables pour créer la BDD
On crée une base et un utilisateur simultanément bien sûr, en production, le mot de passe peut et doit être légèrement plus complexe. La commande SQL pour se connecter au client MySQL de MAMP. Vous vous connecté(e) comme utilisateur root, le mot de passe est root.
/Applications/MAMP/Library/bin/mysql -u root -p
# Création simultanée de la base drupal6_install et l'utilisateur drupal6_install
CREATE USER 'dr6_install'@'localhost' IDENTIFIED BY 'dr6_install';GRANT USAGE ON *.* TO 'dr6_install'@'localhost' IDENTIFIED BY 'dr6_install'WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0; CREATE DATABASE IF NOT EXISTS dr6_install;GRANT ALL PRIVILEGES ON dr6_install.* TO 'dr6_install'@'localhost';
Au terme de ces commandes dans MySQL, nous aurons donc de quoi compléter les informations demandées lors de l’installation de Drupal 6.x. A savoir les informations suivantes :
Database Name= dr6_install
Database User name = dr6_install
Database Password = dr6_install
Database Host = localhost
Pour mieux comprendre la gestion d’une BDD via la console MySQL ou à l’aide de PhpMyadmin, vous pouvez reportez à cette article :
Problèmes rencontrés sous MAMP
La procédure d’installation de Drupal 6 semble peiner un peu au moment de la configuration de la BDD sous MAMP. Pour contourner cette difficulté, le mieux est d’éditer manuellement le fichier de configuration afin de paramétrer correctement l’accès à la BDD. Le fichier de configuration se trouve dans [le_repertoire_qui_contient_Drupal_6]/sites/default/settings.php
Les lignes à mettre à jour manuellement dans setting.php avec les données de connexion à la BDD MySQL.
* Database URL format:
* $db_url = 'mysql://username:password@localhost/databasename';
* $db_url = 'mysqli://username:password@localhost/databasename';
* $db_url = 'pgsql://username:password@localhost/databasename';
*/
$db_url = 'mysql://dr6_install:dr6_install@localhost/dr6_install';
$db_prefix = ''; /* Ne nous mettons pas de préfixe sur les tables */
Un conseil pour retrouver l’outil d’administration.
Toujours se souvenir que si votre installation plante, vous pouvez accéder aux outils d’administration via ces deux URLs.
http://localhost/adminhttp://localhost/?q=admin
Installation de Drupal
On est parti sur une version drupal 6.13 drupal-6.13.tar.gz sur laquelle on a fait une mise à jour pour passer à la version 6.15 issu de drupal-6.15.tar.gz. Apres cette phase d’installation, vous serez libre devenir le Übermensch de Ubercart. Dans une traduction approximative en français vulgaire, cela donne un cador du Superpanier
Il est conseillé de partir sur Drupal 6.7 ou plus. Cela tombe bien, on est en local sur le version 6.15
Une fois la mise à jour faite pour l’installation de la version 6.15. Vous pouvez vérifier que votre plate-forme est à jour
Drupal et dépendances
Il y a une palanquée de modules complémentaire à installer avant même d’envisager de se servir de Ubercart notamment des modules liés à la gestion des images. Eh, oui vous êtes censé(e) obtenir un catalogue avec au moins des vignettes de vos produits, c’est un minimum pour attirer le chaland sur Internet.
Ubercart s’appuie dans son fonctionnement sur différents modules existant pour Drupal. Seul un certain nombre de ces modules sont à activer. Attention, certains modules sont inclus au sein de modules complets. Dans la liste ci-dessous, entre parenthèses, les modules à activer au sein du module complet.
Le module Token
Le module CCK
Les modules Google Analytics et Views
Il reste tous les modules d’images dont les mises à jour vous sont constamment signalés. Comme c’est la cas ici pour le module ImageCache
Les conseils donnés par Ubercart
Il s’agit des “tips” c’est à dire des petits conseils donnés par l’équipe de développement de Ubercart. Il sont au nombre de 4.
- Choisir un thème avec deux colonnes uniquement pour le backend ou l’administration pour faciliter la vue et le traitement des commandes.
- Activer les URLs lissés (Clean URLs). C’est nécessaire dans la gestion des images.
- Compléter l’information concernant le site
- Désactiver la procédure de validation de l’inscription par email avant d’accéder au site. Il est vrai que si l’inscription est fastidieuse, cela n’encouragera pas vos potentiels clients à s’inscrire. Cette désactivation se fait via
Administer > User management > User settings
Activation des URLs lissés (Clean URLs)
Désactivation de la validation de l’inscription par mail
Source : http://www.ubercart.org/docs/user/8075/installing_ubercart
Installation de Ubercart 2.2 sur Drupal 6.15
Il faut si ce n’est pas déjà fait le module path qui est nécessaire à l’élaboration du catalogue Ubercart.
L’activation de Ubercart se fait comme un module. Il faut placer le répertoire ubercart dans /site/modules/ ensuite activer l’ensemble des modules via l’outil d’administration.
Ubercart core
Ubercart payment
Ubercart extras
Quelques paramètres supplémentaires à régler
Augmenter la valeur memory_limit
Drupal vous conseille instamment de faire passer la valeur du paramètre memory_limit dans le fichier php.ini de votre serveur sinon lorsque Ubercart va tenter de traiter des grandes images de vos produits à l’aide de GD Library, PHP sur le serveur n’aura pas les ressources nécessaires pour effectuer le traitement.
Pour en savoir plus sur cette question, vous pouvez vous reporter à la FAQ du site de boutell, les créateurs de la lib GD
Source : http://www.boutell.com/gd/faq.html - Why does gd cause my PHP script to run out of memory?
Pour information, cela suppose que vous avez la possibilité d’installer la librairie GD sur votre espace d’hébergement, que vous avez accès au fichier de configuration de PHP (php.ini) et que vous êtes en mesure de redémarrez votre serveur ! Cela fait beaucoup de conditions qui sont souvent remplis par un hébergement dédié mais rarement un hébergement mutualisé.
Paramétrer Google Analytics
Cette question est beaucoup simple à régler. Il vous d’entrer le script fourni par GA pour le marquage de vos pages.
Les avantages de Ubercart
Voici en gros tous les avantages attendues de la solution e-commerce Ubercart outre le fait qu’elle tourne sur Drupal.
* Configurable product catalog includes catalog pages and a block to display product categories.
* Flexible product creation system with product classes.
* Multiple product image support out of the box.
* Flexible product attributes system.
* Basic product stock level tracking and notification.
* Product features to add file downloads, role promotions, and more to products.
* Single page checkout.
* Automatic account generation (anonymous checkout).
* Customer and administrator checkout notifications.
* Simple order processing (with workflow-ng integration for automated order processing).
* Simple order creation and editing.
* Integrated payment system that acts as a bridge between acceptable payment methods (check, credit card, purchase order, etc.) and payment gateways (Cyber Source, Authorize.net, PayPal, etc.).
* Shipping quotes and fulfillment, including integration with UPS, FedEx, USPS.
* Sales, product, and customer reports.
* Activity logging.
* Much more… and more to come.
Source : http://drupal.org/project/ubercart
En savoir plus
Les liens vers les modules
Drupal, Drupal 6, Module, MySQL, PHP, Site E-commerce, solution e-commerce, Ubercart
3 janvier 2010 dans CMS, Création de site web, Divers, PHP, MYSQL, Réseaux sociaux, Tutoriaux par Bruno Flaven
La question est quelles sont possibilités offertes par Joomla 1.5 pour se connecter au site de micro-blogging twitter. On a sélectionné un certain nombre d’éléments fonctionnels parmi des plugins, modules notamment qui permettent d’étendre les capacités d’un site sous Joomla pour gérer un compte twitter. L’idée était à la base de faire l’installation la plus rapide avec un minimum de configuration, ce que l’on est légitimement en doit d’attendre d’un module/plugin Joomla. Or, il y a comme souvent pour Joomla, Wordpress ou Drupal “à boire et à manger” dans les développements que l’on peut récupérer sur internet ainsi tous les éléments qui ont été installés avec un succès relatif…
Nous avons classé notre sélection par ordre de préférence.
1. Tweets Module
Un module simple et efficace qui vous permet de rapatrier vos “gazouillis” de votre compte Twitter en ferraillant un minimum pour la configuration. Nous avons testé la version tweetsmodule-v2.2.zip
Dans l’administration de Joomla 1.5
L’installation se fait comme un module standard (upload et installation)
L’installation se fait comme un module standard (upload et installation)
Il faut ensuite activer le module
Il reste ensuite à configurer le tweetsmodule-v2.2.zip pour son affichage en “frontend”
Source : tweetsmodule-v2.2.zip
2. JTweet
Un bon module propret et facile d’installation fait l’équipe de Joomla Bamboo plutôt connu à ce jour pour les templates Joomla.
3. Twitter Status
Un module tout à fait honorable de Tomasz Dobrzynski qui comme son nom l’indique…est polonais et accessoirement bon développeur. On a testé le
mod_easy_twitter_status_joomla1.5.x.zip
4. BizTweet Lite
Ce extension conçue par les australiens de jtips.com.au est assez complète. Cela produit un bon aperçu de votre eventuelle activité sur Twitter. Il existe une version gratuite (lite) et téléchargeable si on s’inscrit. Il existe aussi la version payante avec des fonctionnalités étendues.
5. p8 Twitter
Prometteur mais décevant car pratiquement impossible à faire fonctionner
En savoir plus
Joomla, micro-blogging, Module, MySQL, PHP, plugin, site, Twitter
28 décembre 2009 dans CMS, Création de site web, Divers, Google, Image, Graphisme, Photoshop, Iphone, mobile, Javascript, Ajax, Marketing Web, Meilleurs blogs, Tutoriaux, Webdesign, Widget, Gadget, Wordpress par Bruno Flaven
Lorsque vous vous mettez à écrire des articles ou des pages sous Wordpress, rapidement vous allez souhaiter enrichir ce contenu d’une carte Google Map si par exemple, vous souhaitez donner l’emplacement exacte du magasin dont vous faites l’éloge ou la critique. Pour insérer un carte GM à ce contenu, il va vous falloir trouver rapidement un plugin qui fasse l’affaire, à toutes fins utiles, voici un petit comparatif rapide des plugins les plus performants qui répondent à ce besoin cartographique.
Obtenir une clé Google Map
Les étapes principales pour l’obtention de la clé Google Map qui vous sera souvent demander lors de l’activation du plugin.
Vous devez vous inscrire…
Vous devez donner l’adresse du site sur lequel vous souhaitez mettre en place les cartes Google
Le sésame tant attendu : la clé Google Map API
api key google => ABQIAAAAFyG-m8QhmAV1sRfWzKJDFShSYTp878J79xzYAOhGr
VUYUXOeDpixSM1cRwbCgMk5NXr2AfLPyzYPyUAg
New-York City, USA
On va se servir des coordonnées de NYC comme exemple à placer sur une carte.
Latitude = 40.7143, Longitude = -74.0060
Lat = 40 degrees, 42.9 minutes North
Long = 74 degrees, 0.4 minutes West
1. Geo Mashup
C’est à notre avis le meilleur plugin d’insertion de carte google dans Wordpress. Il y a toutefois, un inconvénient, on ne peut associer q’une seule carte à un article ou une page. Il est possible de sauvegarder des cartes sous le nom de son choix mais cela ne permet pas en revanche de les appeler directement dans la code, c’est dommage ! Par contre, ce plugin met à votre disposition quasiment toutes les valeurs de l’API Google Map.
N’oubliez apres lactivation du plugin, d’inséré la clé API Google sinon, cela ne fonctionnera pas !
Vous ne pouvez pas appeler la carte par le nom sous lequel vous venez sauvegarder la carte.
[geo_mashup_map name="1-Broome-Street-New-York" height="200" width="490" zoom="17" add_overview_control="true" add_map_type_control="true"]
Un usage classique du code à insérer pour faire figurer une carte. Automatiquement, la carte selctionné s’affichera dans l’article correspondant ou la page correspondante
[geo_mashup_map height="235" width="600" map_type="G_HYBRID_MAP" zoom="19" add_overview_control="true" add_map_type_control="true"]
- add_map_control - true or false. Adds zoom/pan controls.
- add_map_type_control - true or false. Adds map type selector controls.
- add_overview_control - true or false. Adds the overview control.
- auto_info_open - true or false. Opens the info window of the most recent or link source post.
- center_lat - decimal latitude. With center_lng, an initial center location for the map.
- center_lng - decimal longitude. With center_lat, an initial center location for the map.
- click_to_load - true or false. Activates the click-to-load feature described above. Default is false.
- click_to_load_text - the text displayed in the click-to-load pane.
- disable_tab_auto_select - For use with the tabbed category index, shows all posts to begin with. Allows the info window to remain open.
- height - the height of the map in pixels
- interactive_legend - true or false. Controls the display of checkboxes in map legend. Default is true.
- legend_format - dl or table. Formats the category legend using a definition list or table. Default is table.
- limit - the maximum number of items to include on a global map or contextual map.
- map_content - global, single, or contextual. Overrides the default content of a map.
- map_control - !GSmallZoomControl, !GSmallMapControl, !GLargeMapControl, !GSmallZoomControl3d, !GLargeMapControl3D
- map_type - G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP
- map_cat - the ID of the category to display (you can edit the category and look for cat_ID in the address bar)
- marker_min_zoom - hide markers until zoom level, 0 to 20
- name - name for this map. You can then use the name in the for_map parameters of other tags.
- show_future - true or false. Includes future-dated posts. Default is false.
Source : http://code.google.com/p/wordpress-geo-mashup/wiki/TagReference
2. Google Map Shortcode
Ce plugin s’appuie sur les “Customs values” ou “Champs personnalisés” pour attacher une carte google map un article ou à une page. Nous ne sommes pas parvenu à faire fonctionner correctement ce plugin mais toutefois le code semble prometteur.
[google-map-sc address="3501 S.W. 130th Ave., Davie 33330" width="250" height="250" zoom="14"]
3. WP Geo
Là encore un code prometteur mais bien des difficultés à la mettre en place et à le faire fonctionner.
[wpgeo_longitude]40.7143[/wpgeo_longitude]
[wpgeo_latitude]-74.0060[/wpgeo_latitude]
Source : http://www.wpgeo.com/
Pour aller plus loin
article, carte, Google, Google Maps, plugin, Wordpress
17 décembre 2009 dans Accessibilité, CMS, Création de site web, Divers, Hébergement, PHP, MYSQL, Référencement, SEO, Technologie, Tutoriaux, Wordpress, XHTML CSS par Bruno Flaven
On va livrer le .po aux roses de la localisation de votre thème. Imaginons un cas de figure simple et diablement réel, en clair “un business case”, vous souhaitez faire un thème multilingue à partir d’un thème existant. Cela va sans dire le thème est loin d’avoir été prévu pour être utilisé dans une langue autre que celle de Shakespeare. Pour une compréhension rapide et se permettre des mauvais jeux de mots, nous faisons référence directement à l’extension du fichier pour désigner les deux fichiers de traduction indispensables sous Wordpdress : le fichier source fr_FR.po et sa version fr_FR.mo compilé.
Pour information, selon wikipedia et pour votre information, Poedit est un logiciel libre d’aide à la traduction utilisant la bibliothèque Gettext. C’est une aide pour le processus de développement d’internationalisation et de localisation.. Nous utiliserons quant à nous comme logiciel pour éditer le .po, notre logiciel d’édition habituel : TextMate.
Dans notre exemple, notre thème se nomme nom-du-theme. Ce thème comprend les deux fichiers fr_FR.po et sa version compilée fr_FR.mo sous PoEdit.
Le .po de FR
Vous ouvrez le fichier fr_FR.po avec un éditeur genre Notepad ++ sur PC, TextMate sur Mac. Vous y ajoutez les lignes manquantes et le tour est joué avec la traduction en dessous. Il ne vous reste ensuite qu’à enregistrer en fr_FR.po puis à envoyer le tout en FTP dans le répertoire du thème qui est celui de votre site.
Un fr_FR.po fr_FR.mo sur mesure dans un thème WP
Les fonctions de traduction de WP
On trouve de texte en anglais souvent collé en dur dans l’ensemble de fichiers .php qui constituent votre thème WP. Il faut rechercher et remplacer ces textes écrits "en dur" afin de les remplacer par des fonctions de traduction propres à un bon fonctionnement WP.
A votre disposition, pour traduire, vous avez globalement deux types de fonction:
__ ('phrase-en-anglais', 'nom-du-theme');, cette fonction permet de passer une traduction figurant dans le fichier .mo dans une fonction par exemple. Le second paramètre permet d’indiquer le chemin vers notre thème WP nommé nom-du-theme. Ce paramètre est indispensable_e ('phrase-en-anglais', 'nom-du-theme');, cette fonction fait un équivalent php de la commande echo. Cette dernière publie la traduction figurant dans le fichier .po et de sa version compilée .mo. Le second paramètre permet d’indiquer le chemin vers notre thème WP nommé nom-du-theme. Ce paramètre est indispensable
Un cas concret de traduction
Prenons les textes à traduire de la page d’erreur 404 d’un thème écrit initialement en anglais.
La première chose à faire, il faut placer cette fonction load_theme_textdomain('nom-du-theme'); dans le fichier functions.php. Ce fichier est parti prenante de votre thème WP.
<?php
/* for the french version */
load_theme_textdomain('nom-du-theme');
?>La visualisation du .po via Poedit
Le code source du fichier fr_FR.po
#: comments.php:102
msgid "Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment."
msgstr "La modération des commentaires est active et cela peut retarder la publication de votre commentaire. Il n'est pas nécessaire de publier à nouveau votre commentaire."
#: comments.php:102
msgid "Please note:"
msgstr "A noter :"
#: category.php:18
msgid "Read More..."
msgstr "En savoir plus..."
#: 404.php:12
msgid "Error 404 - Not Found"
msgstr "Erreur 404 - Aucun fichier trouvé"
#: 404.php:16
msgid "Try Going back home"
msgstr "Essayer de repartir vers la page d'accueil"
#: 404.php:20
msgid "Or use the search form in the sidebar to find what you're looking for..."
msgstr "Ou utilisez la recherche situé dans la barre de côté pour trouver ce que vous cherchez..."
Le fr_FR.po sous TextMate. Cela permet plus facilement d’ajouter des lignes dans ce fichier fr_FR.po
Un type de texte non-traduit dans un template WP sur la page 404 404.php
Les textes dûment traduits à l’aide des foncions de WP
<?php _e('Error 404 - Not Found', 'nom-du-theme'); ?>
<p><small><strong><?php _e('Please note:', 'nom-du-theme'); ?></strong> <?php _e('Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.', 'panama'); ?></small></p>Le rendu de la même du thème cette fois-ci traduit à l’aide du fr_FR.po et fr_FR.mo mis à jour
Des cas plus complexes de traduction
On s’est contenté de traduire avec l’aide de la fonction la plus simple : _e('Error 404 - Not Found', 'nom-du-theme'); qui permet d’afficher dans la page 404, la ligne suivante Erreur 404 - Aucun fichier trouvé
Un première d’usage de la fonction __()
<?php comments_number( __('0 comment', 'nom-du-theme'), __('1 comment', 'nom-du-theme'), __('% comments', 'nom-du-theme') ); ?>Un deuxième usage de la fonction __()
Le code non-traduit
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>Le même code mais correctement traduit
<p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.', 'nom-du-theme'), wp_login_url( get_permalink() )); ?></p>Pour aller plus loin
langue, localiser, poEdit, thème Wordpress, traduction, Wordpress
16 décembre 2009 dans Divers, Google, Hébergement, Iphone, mobile, Technologie, Tutoriaux par Bruno Flaven
Si vous avez l’intention de gérer un nom de domaine doté d’une cinquantaine d’adresses email et d’ajouter éventuellement à ce domaine une multitude de services : calendriers, documents partagés… Tout cela gratuitement ! Alors laissez faire Google. Il existe au demeurant une version payante, pro dont le tarif annoncé est de l’ordre de 40 euros par compte mail. A ce prix-là, vu ce qui vous est proposé par Google dans la version gratuite, Google doit au moins vous fournir le café en plus chaque matin ! On avait déjà dans un article précédent abordé la question des Google Apps et de la gestion du nom de domaine.
Etape par étape, le gestion du domaine sur Google Apps
On va donc s’inscrire de nouveau à Google Apps afin de profiter des différents services proposés lorsque vous déléguez la gestion de votre nom de domaine à Google. Dans cette article cependant, nous allons opter pour une intégration plus poussé et plus complète, notamment en configurant les DNS d’un nom de domaine. Les services dont vous disposerez sont les suivants :
Gmail
Créez une adresse e-mail personnalisée comme fandemoto@votregroupe.com.
Google Agenda
Organisez votre planning et partagez des événements avec vos amis.
Google Documents
Partagez des documents, présentations et feuilles de calcul en ligne.
Google Sites
Créez des sites Web et des wikis de groupes.
Source : http://www.google.com/apps/intl/fr/group/index.html
Page d’accueil des Google Apps où G nous fait l’article !
On va se contenter de la version gratuite et non de la version payante
Les différents services auxquels me donne accès mon inscription à Google Apps
1. Choix du nom de domaine pour Google Apps
On choisit Administrateur : je possède ou contrôle ce nom de domaine
2. Inscription à Google Apps
Le formulaire de l’étape 2. Inscription qui permet de spécifier le compte Administrateur
Ces informations ne sont pas obligatoires mais elle aide Google à mieux vous cibler le marché pro…
Le mail du compte Administrateur, avec le captcha de rigueur
Apres cette ultime étape, vous êtes désormais titulaire d’un compte sur Google Apps. Il va falloir toutefois entériner auprès le fait que vous être propriétaire du nom de domaine.
3. Configuration du nom de domaine sur Google Apps
Confirmer la propriété du nom de domaine à l’aide du CNAME
Nous avons choisi de confirmer la propriété du nom de domaine à l’aide du CNAME. Voici les informations que vous livre Google pour parvenir à vos fins.
Voilà les instructions données par Google
Confirmez que vous possédez le domaine xxxx.com.
1. Connectez-vous au service d’hébergement de votre domaine et accédez à la page de gestion DNS. L’emplacement de cette page varie en fonction des services, mais, de manière générale, vous pourrez y accéder par le biais des sections Gestion du domaine ou Paramètres avancés.
2. Utilisez la chaîne unique suivante pour créer un enregistrement CNAME pour le domaine xxxxxxxx.com :
google53115a17889d8a3b
3. Cibler l’enregistrement CNAME sur :
google.com
4. Une fois les modifications effectuées, vous pouvez contrôler l’enregistrement en lançant une requête CNAME lookup pour http://google53115a17889d8a3b.xxxxxxxx.com . De nombreux sites Web vous permettent de lancer des requêtes CNAME lookup automatisées. Vous trouverez ces sites en recherchant CNAME lookup à partir de la page http://www.google.com .
Vous êtes connecté en tant qu’Administrateur à votre compte Google Apps
On sélectionne la procédure de confirmation de la propriété du nom de domaine par le CNAME
C’est la ligne à ajouter dans votre gestion de zone pour confirmer la gestion du domaine chez Google par CNAME
google53115a13666d8a3b 10800 IN CNAME google.com
La gestion des mails depuis votre compte Google Apps
Dans la gestion de vos zone chez votre registar, il faut changer les lignes qui sont relatives aux MX de la manière suivante.
@ 10800 IN MX 10 ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 10 ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 20 ALT1.ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 20 ALT2.ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 30 ASPMX2.GOOGLEMAIL.COM.
@ 10800 IN MX 30 ASPMX3.GOOGLEMAIL.COM.
@ 10800 IN MX 30 ASPMX4.GOOGLEMAIL.COM.
@ 10800 IN MX 30 ASPMX5.GOOGLEMAIL.COM.
La création de sous-domaine qui pointent vers les applications Google
C’est le point optionnel mais qui a son importance dans la mesure où vous simplifier l’accès à vos services google. Par exemple webmail.xxxxx.com pointe vers votre webmail sur google. Un conseil, n’oubliez pas d’enlever la/les ligne(s) concurrente(s) au webmail donnée par votre registrar, par exemple gandi. Par exemple : (webmail 10800 IN CNAME agent.mail.gandi.net.)
Pour le webmail
Apres avoir fait les modifications suivantes sur google, vous pourrez avoir une adresse webmail.xxxxx.com pointe vers votre webmail sur google
webmail 10800 IN CNAME ghs.google.com.
calendar 10800 IN CNAME ghs.google.com.
docs 10800 IN CNAME ghs.google.com.
sites 10800 IN CNAME ghs.google.com.
Pour les autres services : calendar, docs….etc
On fait de manière identique pour tous les autres services google sur le principe exposé ci-dessus pour le webmail.
Récapitulatif & Conclusion
Vous avez, si vous êtes un indépendant o une TPE, un arsenal digne des grandes entreprises avec des solutions propriétaires souvent très onéreuses. Tout cela est pour vous disponible gratuitement avec des limites certes amis tout de même ! Ci-dessous, un récapitulatif complet des lignes à insérer dans votre gestion de zone pour mémoire.
google53115a17889d8a3b 10800 IN CNAME google.com
@ 10800 IN MX 10 ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 10 ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 20 ALT1.ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 20 ALT2.ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 30 ASPMX2.GOOGLEMAIL.COM.
@ 10800 IN MX 30 ASPMX3.GOOGLEMAIL.COM.
@ 10800 IN MX 30 ASPMX4.GOOGLEMAIL.COM.
@ 10800 IN MX 30 ASPMX5.GOOGLEMAIL.COM.
webmail 10800 IN CNAME ghs.google.com.
calendar 10800 IN CNAME ghs.google.com.
docs 10800 IN CNAME ghs.google.com.
sites 10800 IN CNAME ghs.google.com.
C’est typiquement le type de lignes nécessaires sur gandi.net
Pour aller plus loin
DNS, domaine, Google, Google Apps, Hébergement, nom de domaine
30 novembre 2009 dans Accessibilité, Création de site web, Divers, Google, Iphone, mobile, Javascript, Ajax, Mac, Marketing Web, Statistiques et Tracking, Tutoriaux par Bruno Flaven
Google Analytics évolue constamment, il est donc possible de manière intuitive ou avancée de mesurer les trafics sur votre site en provenance des utilisateurs d’Iphone ou de mobiles et ceci indépendamment de l’existence ou de la version mobile de votre site.
Pour créer un site sous Iphone, notamment si vous utilisez Wordpress, nous avons consacré plusieurs articles à la question. Les principes énoncés et certains des exemples de ces articles sont tout à fait valables pour créer un site spécifique pour Iphone et pour d’autres mobiles éventuels (Android, PalmOS,Playstation 3, Nitendo Wii, Symbian OS, Blackberry…).
Il y a deux façons de faire pour tracer le trafic en provenance de l’Iphone :
- La première est celle qui vous est proposé par google lui-même via les
Segments avancés qui est toujours en version Bêta. Néanmoins, une version Bêta pour Google est plus qu’opérationnelle !
- La seconde est de passer comme nous l’avons vu dans un précèdent article par l’utilisation de filtre avancés. Cette méthode présente un avantage c’est qu’elle vous permettra de tracer pas simplement les utilisateurs sous Iphone, mais tous les utilisateurs utilisant un mobile et la liste est longue, en ne citant que les principaux :
Iphone, Ipod, PalmOS, Playstation Portable, Playstation 3, Nitendo Wii Symbian OS, blackberry
1. Utiliser le segment avancé prédéfini dans GA pour connaitre les utilisateurs iphone
Le choix parmi les Segments avancés
Par défaut, le segment avancé est Toutes les visites
Par défaut, le segment avancé est Visites par Iphone
Le tableau de bord se recharge avec les statistiques pour les utilisateurs iphone uniquement
2. Créer un filtre avancé pour connaitre les utilisateurs sous mobile
C’est un peu plus complexe mais cela a le mérite de passer au-de-là le cercle fermé des détenteurs de Iphone. Pour se familiariser à la création d’un filtre avancé, vous pouvez vous reporter à un article de ce blog qui détaille les étapes de la création.
On va donc créer un filtre dont le nom sera 5_mobile_for_GA. A noter sur certaines de nos captures , le nom est parfois mobile_for_GA.
Nommer le filtre mobile_for_GA et choisir Inclure
Sélectionner pour le champs Champ de filtrage, la valeur Plate-forme du système d'exploitation du visiteur
Voici les champs principaux et la valeur correcte qu’il faut leur affecter pour paramétrer votre filtre avancé pour les mobiles. La Règle de filtrage est un des éléments prépondérants de cet filtre, très utile quand il s’agit de créer un filtre personnalisé donc avancé où vous allez définir à l’aide d’expression regexp (abréviation de regular expressions) la nature même du filtre.
Règle de filtrage (pattern)
A titre d’information, le caractère | (barre verticale) signifie “ou bien”. Il faut donc comprendre que Iphone|Ipod|PalmOS|Playstation Portable|Playstation 3|Nitendo Wii|Symbian OS|blackberry, si l’utilisateur est sur Iphone, PalmOS…etc alors Google Analytics le classe dans notre filtre mobile.
Pour plus d’informations sur les "Regular Expression", cette page "Regular Expression Basic Syntax Reference" fera l’affaire. http://www.regular-expressions.info/reference.html
Note: Google Analytics n’est valable que sur des navigateurs qui exécutent du JavaScript.
Le Nom du filtre : 5_mobile_for_GA
Type de filtre : Filtre personnalisé et choisir Inclure
Champ de filtrage : Plate-forme du système d'exploitation du visiteur
Règle de filtrage : Iphone|Ipod|PalmOS|Playstation Portable|Playstation 3|Nitendo Wii|Symbian OS|blackberry
L’écran de votre filtre correctement paramètré
2A. Afficher ce filtre avancé dans un profil mobile_hecube ou mobile_social.hecube.net
Notre profil va se créer et on va lui affecter le filtre que l’on vient de créer. Sur les captures, le profil se nomme tour à tour mobile_hecube ou mobile_social.hecube.net mais la logique est la même.
On crée un nouveau profil mobile_hecube ou mobile_social.hecube.net mais qui est attaché à un domaine existant hecube.net
A ce nouveau profil mobile_hecube ou mobile_social.hecube.net, on attache le filtre crée précédemment 5_mobile_for_GA
Le profil est activé, la récolte va commencer…
Une vidéo d’introduction sur la sélection du segment avancé pour les utilisateurs Iphone
Iphone on Google analytics (How to View iPhone Visitors using Google Analytics)
Pour aller plus loin
Android, Apple, blackberry, filtre, Google, Google Analytics, Iphone, iPod, Mac, Mesure, Nitendo Wii, PalmOS, Playstation 3, Playstation Portable, Symbian OS, trafic, visiteurs
26 novembre 2009 dans Divers, Flash, Actionscript, Flex, Flex, Statistiques et Tracking, Tutoriaux, Widget, Gadget par Bruno Flaven
L’utilisation de Google Analytics comme outil de mesure statistique pour un site s’est aujourd’hui généralisée, les articles sur ce blog en témoignent. Néanmoins, l’enjeu est de taille avec la multiplication des interfaces en Flex qui concurrencent directement le marché du “desktop”, tenu encore mais pour combien de temps par Microsoft. La prolifération des interfaces “flexibles” pourrait dépendre de 2 raisons économiques évidentes :
- La valorisation de l’audience d’un site aussi enrichie soit-il se fera avant tout sur sa capacité à pister (tracker) les comportements des utilisateurs, c’est à dire à rendre en statistiques les micro décisions qui poussent les utilisateurs/consommateurs à aller à gauche plutôt qu’à droite… Comme une vache à l’abattoir serions-nous tenter d’ajouter ! Oui, internet est un espace marchand où le comportement et son décryptage sont des valeurs en croissance constante.
- La souplesse d’un site “flexible” à s’interfacer simplement, en deux coups de code, aux API environnantes tel que Google (Maps, Analytics pour ne citer que les principales…) semble la clé du succès d’un site. Cela semble vrai que ce soit en Flex ou dans toute autre technologie. Nous avons cité naturellement Google bien que nous n’ayons pas d’actions, on pourrait tout aussi parler de Facebook, Twitter, Tumblr, Flickr… Bien que nous n’ayons là aussi pas d’actions ! Décidément, c’est à croire qu’il n’y a que des actions EADS.
Cette généralisation s’explique essentiellement par la simplicité de la mise en place du “tag” de GA. Le problème est un peu plus ardu lorsque vous devez marquer une application enrichie faite en Flex ou en Flash. Il faut en effet souvent embarqué le script et les variables javascript à l’intérieur de votre fichier .swf. Cet article va exposer simplement quelles sont les meilleurs pratiques pour marquer une application Flex par exemple. Il vous sera désormais possible de suivre à l’aide de Google Analytics ce que vos utilisateurs font à l’intérieur de votre application enrichie (RIA, Rich Internet Application).
Cet article est une introduction aux principes de mesure statistiques au sein de Flash/Flex à l’aide de Google Analytics. On va s’aider pour cela d’une API concu en AS3 mis à disposition dans la cadre du projet Google Analytics Tracking for Flash API (gaforflash)
Les exemples de cette article ont été conçus à l’aide du fichier gaforflash-1.0.1.319.zip ainqie qu’avec Flex Builder 3 dans un environnement en local sur MAMP. La vidéo qui est jouée et une vidéo en local dans MAMP, joué en http streaming.
Définition de Google Analytics Tracking For Adobe Flash (gaforflash)
This is an ActionScript 3 API for Google Analytics data collection.
Pour plus de détails sur comment créer une application sous Flex, vous pouvez vous reporter à cet article qui contient les étapes pas à pas pour créer sous Flex une application en local notamment.
Google, Flex, Buddyress et Wordpress - Interfacer BuddyPress et Google Map API sous Flex
Télécharger le fichier analytics.swc
Google Analytics Tracking For Adobe Flash (gaforflash) est un projet open source. Ce projet s’est constitué pour mettre en place la mesure statistique à l’aide de GA en AS3 au sein d’une application Flex. Comme dans un article précèdent sur Flex où la encore on interfaçait une autre API google, l’API Google Maps, à l’aide d’une “librairie” .swc mis à disposition par Google.
Cette fois-ci, le fichier .swc que vous allez télécharger va vous permettre de vous connecter avec l’API de Google Analytics.
Source : http://code.google.com/p/gaforflash
Le plus simple pour inclure à votre projet sous Flex, le fichier analytics.swc. C’est de le placer dans la répertoire suivant : /Users/votre-username-sous-mac/Documents/Flex Builder 3/gaforflash-example1/libs/analytics.swc
L’API gaforflash supporte deux types d’information de tracking : les page vues (pageviews) et les événements (events). Il est souhaitable d’utiliser ces deux types d’informations.
Dans ce premier exemple, il s’agit d’utiliser de manière efficient l’information de mesure pageviews. Pour quelles raisons ?
- C’est le plus moyen de savoir comment une personne navigue à travers les écrans de votre RIA.
- La notion de
pageviews est le principe plus utilisé dans un outil de mesure statistique comme Google Analytics ou un autre. Si vous optez pour la notion de pageviews au détriment de celle d’events, vous aurez accès à un grand nombre ressources au sien de GA.
Le numéro de votre compte chez Google Analytics
Dans nos exemples de fichiers .mxml, il s’agit d’un compte de test : account="UA-111-222"
<?xml version="1.0" encoding="utf-8"?>
<!--
The account number has to be replaced with your own account number in GA eg account="UA-XXXXXXX-X"
Example 1. Embed the gaforflash component,
demonstrate pageview tracking.
Tested against gaforflash-1.0.1.319
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:ga4flash="com.google.analytics.components.*"
addedToStage="trackInitialView()" viewSourceURL="srcview/index.html">
<ga4flash:FlexTracker
id="tracker"
account="UA-111-222"
mode="AS3"
visualDebug="true"
/>
<mx:Script>
<![CDATA[
public function trackInitialView():void
{
tracker.debug.minimizedOnStart = true;
tracker.trackPageview("/version1");
}
]]>
</mx:Script>
<mx:Accordion x="31" y="43" width="380" height="423"
change="tracker.trackPageview('/pane' + String(event.newIndex+1));">
<mx:Canvas label="ENGLISH VERSION" width="100%" height="100%">
<mx:Text text="Welcome to the english RIA."/>
</mx:Canvas>
<mx:Canvas label="SPANISH VERSION" width="100%" height="100%">
<mx:Text text="¡Bienvenidos a la RIA en Español!"/>
</mx:Canvas>
<mx:Canvas label="FRENCH VERSION" width="100%" height="100%">
<mx:Text text="Bienvenue sur la version française !"/>
</mx:Canvas>
</mx:Accordion>
</mx:Application>Par défaut, l’application Flex se charge sur le panneau en anglais
L’application Flex incluant gaforflash
la valeur visualDebug="true", l’application fonctionne en mode débogage. L’API
Des explications sur les variables du FlexTracker
<ga4flash:FlexTracker
id="tracker"
account="UA-111-222"
mode="AS3"
visualDebug="true"
/>
id : cette propriété permet de déclarer le FlexTracker dans votre application Flex.account : c’est l’id ou identifiant de votre compte Google Analytics. On l’obtient généralement cette valeur lors de la création d’un compte ou d’un profile au sein d’un compte GA.mode : cette variable est soit complétée avec la valeur : AS3 ou Bridge.
Lorsque vous ne maitrisez pas l’environnement dans lequel votre RIA va être chargée, il est préférable de mettre la valeur AS3. Ainsi, si votre application doit être diffusé sur une plate-forme qui n’est pas la votre via un widget par exemple, c’est la type de configuration qu’il faut définir.
Pour le mode Bridgen c’est lorsque les pages dans lesquelles vont se charger votre application contiennent un script de mesure Google Analytics. Une remarque, le mode Bridge s’exécute à l’aide de la class ExternalInterface, il est donc important que le paramètre allowScriptAccess soit correctement défini.
visualDebug : cette propriété permet de faire fonctionner l’API gatorflash en mode débogage. Si le mode est défini sur true, aucun des événements ne sera envoyé vers les serveurs de GA, toutes les données seront disponibles dans la fenêtre de débogage.
Sur le paramètre mode, il y a plus d’information disponible sur le site de gaforflash
La mesure statistique des événements (Event)
Là encore, dans cette exemple de fichier .mxml, il s’agit d’un compte de test : account="UA-111-222", vous pouvez le remplacer par votre propre compte GA. On va aussi de charger une vidéo :
- C’est une vidéo jouée en local depuis le serveur MAMP en http streaming nommé chevaux.flv. La valeur dans le
.mxml est la suivante video.source = "http://127.0.0.1/Flex/chevaux.flv";.
Cette valeur initialise la mesure statistique de Google Analytics. Pour cette valeur, les paramètres passés sont les suivants : le premier paramètre du constructeur correspond dans l’exemple à la mx:Application, ensuite on retrouve les paramètres précédents account, mode, visualDebug
tracker = new GATracker(this, "UA-111-222", "AS3", true);
la valeur visualDebug="true", l’application fonctionne en mode débogage. L’API
Le code de l’exemple 2
<?xml version="1.0" encoding="utf-8"?>
<!--
Example 2. Use gaforflash's classes,
demonstrate event tracking.
Tested against gaforflash-1.0.1.319
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" addedToStage="initExample2()" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.events.MetadataEvent;
import mx.controls.Button;
import mx.events.VideoEvent;
import mx.controls.VideoDisplay;
import mx.containers.Panel;
import com.google.analytics.GATracker;
private var tracker:GATracker;
private var readyTime:Number;
private var video:VideoDisplay;
public function initExample2():void
{
tracker = new GATracker(this, "UA-111-222", "AS3", true);
//build video UI
var panel:Panel = new Panel();
panel.title = "Example 2";
panel.setStyle("horizontalAlign", "center");
panel.x = 20;
panel.y = 40;
panel.width = 545;
panel.height = 372;
this.addChild(panel);
video = new VideoDisplay();
video.autoPlay = true;
video.width = 525;
video.height = 300;
video.autoRewind = false;
video.addEventListener(VideoEvent.READY, handleReady);
video.addEventListener(VideoEvent.COMPLETE, handleComplete);
panel.addChild(video);
var button:Button = new Button();
button.label = "Pause";
button.addEventListener(MouseEvent.CLICK, handlePause);
panel.addChild(button);
readyTime = new Date().time;
// video.source = "http://farm.sproutbuilder.com/asset/JwDKrdjrDnJcRVxp.flv";
/* DEMO VIDEO ON LOCAL SERVER ON MAMP */
video.source = "http://127.0.0.1/Flex/chevaux.flv";
}
public function handleReady(event:Event):void
{
// calculate time (in milliseconds) in which
// the video was ready to play
readyTime = new Date().time - readyTime;
/* evenement_1 */
tracker.trackEvent("Videos", "ReadyTime", "Video1", readyTime);
}
public function handleComplete(event:Event):void
{
/* evenement_2 */
tracker.trackEvent("Videos", "Completed", "Video1");
}
public function handlePause(event:MouseEvent):void
{
var button:Button = event.target as Button;
if (button.label == "Pause") {
video.stop();
button.label = "Resume";
/* evenement_3 */
tracker.trackEvent("Videos", "Paused", "Video1");
} else {
video.play();
button.label = "Pause";
/* evenement_4 */
tracker.trackEvent("Videos", "Resumed", "Video1");
}
}
]]>
</mx:Script>
</mx:Application>Cette exemple piste 4 événements : evenement_1, evenement_2, evenement_3, evenement_4
evenement_1 => Un événement est envoyé lorsque le moment où la vidéo est en chargement et sur le point d’être jouée.evenement_2 => Un événement est envoyé lorsque la vidéo est intégralement jouée.evenement_3 => Un événement est envoyé lorsque la vidéo est en pause.evenement_4 => Un événement est envoyé lorsque la vidéo reprend.
Les paramètres de la méthode GATracker.trackEvent
C’est cette méthode qui permet d’envoyer des événements qui seront enregistrées dans GA. En détaillant la ligne de code ci-dessous, on va dresser une liste définissant les 4 paramètres de cette méthode.
tracker.trackEvent("Videos", "ReadyTime", "Video1", readyTime);
category : une chaîne de caractères (string) représentant un groupe d’événements. Dans notre exemple la category est Videosaction : une chaîne de caractères (string) souvent combinée avec une catégorie permet de signaler des actions. Dans notre exemple, l’événement se nomme ReadyTimelabel : une chaîne de caractères, c’est une valeur optionnel qui permet de passer une information additionnelle sur la combinaison category/action. Il s’agit de préciser que c’est la Video1 si par exemple votre application comporte imaginons 5 Vidéos numérotés comme suit : Video1, Video2…. Video5value : un nombre non négatif, c’est une valeur optionnel qui associe une valeur numérique à un événement mesuré.
Retrouver ces événements dans le tableau de bord de Google Analytics
Tous ces evements sont envoyés à Google Analytics. Il est donc possible de les retrouver dans la tableau de Bord de GA. La correspondance se fait comme suit :
evenement_1 s'enregistre dans le tableau de bord de Google Analytics sous le nom "ReadyTime"
evenement_2 s'enregistre dans le tableau de bord de Google Analytics sous le nom "Completed"
evenement_3 s'enregistre dans le tableau de bord de Google Analytics sous le nom "Paused"
evenement_4 s'enregistre dans le tableau de bord de Google Analytics sous le nom "Resumed"
Conclusion
Il est évident que Google Analytics Tracking for Flash offre des capacités de tracking infinies dans une RIA faite en Flex. En utilisant le concept de page vue (pageview) ne modifie en rien les bonnes pratiques liés à l’utilisation que vous en faites déjà sur un site “classique”.
- L’utilisation de la notion de
pageview vous permettra de mieux voir le trafic d’un point de vue quantitatif de vos utilisateurs.
- L’utilisation de la notion de
event vous permettra de mieux comprendre la manière dont vos utilisateurs réagissent à vos interfaces Flex. C’est donc complément qualitatif, riche d’enseignements, pour comprendre la perception que vos utilisateurs ont de vos interfaces.
Pour aller plus loin
actionscript, Flash, Flex, Google Analytics, Javascript, RIA
21 novembre 2009 dans CMS, Création de site web, Divers, Mac, Marketing Web, Meilleurs blogs, Référencement, SEO, Réseaux sociaux, Tutoriaux, Wordpress, XHTML CSS par Bruno Flaven
Suite au précédent article qui abordait un peu le problème de la gestion en cascade via son blog, de sa présence sur Facebook. Une solution qui semble être adoptée par un très grand d’utilisateurs/blogueurs, c’est de passer par Twitter. C’est effectivement à ce moment là bien moins chronophage.
Gérer Twitter sous WP
Si vous êtes sous WP, les plugins d’administration de votre compte twitter sont très nombreux. Pour information, chez Hecube, nous avons un faible pour un plugin comme : http://wordpress.org/extend/plugins/twitter-tools/
Il nous arrive aussi de passer directement par le terminal sous Mac, comme ce qui était décrit dans cet article. La méthode est assez austère mais redoutablement efficace. On utilise du CURL pour mettre à jour son profil.
Chérie, j’ai rétrécie les URL
Pour poster sur Twitter, afin de maximiser votre espace qui n’est que de 140 caractères, il vaut mieux raccourcir la tête de vos URLs. c’est ce que propose les sites suivants afin de pouvoir poster une versions raccourcie sur Twitter.
Publier en cascade blog > Twitter > Facebook
Une fois que vous avez installé votre plugin de gestion de profil sur twitter et préparer votre contenu pour la publication. Il vous reste à établir le “workflow” en vue d’une publication rapide et simultanée sur les 3 différentes plates-formes.
Le blog Wordpress
Le compte Twitter
la compte Facebook
Comment interconnecter l’ensemble pour publier en cascade
Munissez-vous de vos couples login/password pour chacune des plates-formes et lançons la procédure ultra simple d’interconnexion.
1. Connecté(e) à Facebook et rendez-vous sur la page Twitter de Facebook
En haut à drouten cliquez sur lien “Accéder à l’application”. Vous allez donc autoriser l’application à fonctionner avec votre profil Facebook et rejoindre les plus de 200 000 utilisateurs déjà inscrits.
2. Autoriser l’accès à l’application Twitter à votre compte Facebook
3. Entrer vos identifiants login/mot de votre compte Twitter
5. C’est fait, vous pouvez publier simultanément sur Twitter et sur Facebook
Depuis votre blog sous Wordpress ou sous BuddyPress
Via un plugin Twitter, on va publier depuis notre blog. Ce tweet va ensuite se répercuter sur Twitter puis sur Facebook. Dans notre exemple, nous avons installé Twitter Tools d’Alex King, il est tout à fait possible d’utiliser tout autre plugin pour mettre à jour votre compte Twitter.
Dans notre exemple, ci-dessous, le premier message a été publié directement sur Facebook, le deuxième message émane du “workflow” blog WordPress > Twitter > Facebook. On peut noter une légère différence de “look and feel”.
Conclusion : C’est à notre sens, le moyen le plus de maximiser sa notoriété digitale sur les réseaux sociaux sans s’éreinter à publier en permanence sur les 3 supports : blog, Twitter, Facebook. Il y a un avantage à publier peut-être sur Facebook directement depuis l’interface de gestion, c’est l’extraordinaire capacité de Facebook à agréger d’une façon plus jolie du contenu provenant d’un blog sous Wordpress.
NB : Fruit de mon expérience GEEK récente sur les réseaux, mettre à jour son profil twitter via du CURL dans le terminal MAC avec des URL “bitlysés” ne marchent pas ! Il faut donc semble-t-il passer par un navigateur classique pour insérer vos tweets dans votre blog puis ensuite que la cascade de publication se mette en marche sans qu’il y a d’altération dans le corps du message.
Pour aller plus loin
blog, Facebook, Réseaux sociaux, social, Twitter, Wordpress
16 novembre 2009 dans CMS, Divers, Meilleurs blogs, PHP, MYSQL, Référencement, SEO, Réseaux sociaux, Tutoriaux, Wordpress, XHTML CSS par Bruno Flaven
Il a beaucoup été question de Twitter et finalement peu de Facebook. Notre idée est de maximiser sa présence via son blog sur cet espace social incontournable : Facebook. On va donc rendre à césar ce qui est à césar et voir dans cette article quelques-uns des bons plugins d’interconnexion et de publication de Wordpress vers Facebook. Comme souvent pour se connecter à Facebook, il vous faudra créer dans la plupart des cas vous rendre sur Facebook afin de créer une application Facebook en vue d’obtenir le nécessaire pour activer votre plugin : Clé API, Code d'activation…etc.
On avait déjà évoqué ces question dans un article précèdent sur comment connecter Facebook et l’outil de réseau BuddyPress, rentre une connexion possible via Facebook Connect :
- <a href=”http://social.hecube.net/blog/2009/07/27/facebook-wordpress-buddypress-connecter-votre-blog-ou-votre-reseau-social-a-facebook/”>Facebook, Wordpress, Buddypress - Connecter votre blog ou votre réseau social à Facebook
Note : Nous avons fait les essais avec la distribution Wordpress en français Version 2.8.4 et un compte facebook classique.
1. Le plugin Wordbook
On va tester Wordbook 0.14.8. La question que l’on peut se poser c’est, est-ce l’activation de l’application via son compte Facebook ne va pas servir à d’autres desseins de la part du créateur du plugin. En effet, comme souvent lorsque vous activez une application sur votre compte Facebook, vous autorisez d’accéder à des éléments de votre profil et de ses informations.
Quant au plugin rien à dire, bien que le niveau de personnalisation soit assez limité, on ne peut à première vue changer la petite Wordpress qui apparait à chaque publication sur votre “mur”, il fonctionne. Une dernière chose, vous pouvez utiliser le même compte Facebook pour plusieurs blogs, il vous faudra néanmoins l’activer à chaque fois.
Il faut configurer le plugin en saisissant un code d’activation que vous allez obtenir sur Facebook. Le code d’activation à insérer dans votre plugin Wordbook sera de ce type par exemple LKH894 *.
L’activation du plugin WPBook
Il vous faut insérer le code d’activation, en cliquant sur l’icône Facebook vous parvenez directement sur la page qui permettra d’autoriser Wordbook
Connexion à Facebook
Autoriser l’application WPBook
Obtention du code d’activation WPBook
Le plugin est activé et prêt à l’emploi
la publiaction se fait en simulétané sur votre blog
…et sur le “mur” de votre compte Facebook
Source : http://wordpress.org/extend/plugins/wordbook/
2. Le plugin WPBook
On va tester un plugin plus poussé et qui demande donc à n’en pas douter plus de configuration WPBook Version 1.3.1 . L’installation et la configuration est plus fastidieuse en effet, il faut créer une application en ligne sur le plate-forme Facebook. C’est ce qu nous avons fait dans un article précédent que l’on cite plus haut : <a href=”http://social.hecube.net/blog/2009/07/27/facebook-wordpress-buddypress-connecter-votre-blog-ou-votre-reseau-social-a-facebook/”>Facebook, Wordpress, Buddypress - Connecter votre blog ou votre réseau social à Facebook. On va toute de même de manière rapide voir les étapes nécessaires au fonctionnement de WPBook.
En toute fin vous aurez besoin des informations suivantes pour configurer le plugin WPBook des codes de l’application que nous allons créer WPBook_app_test
Clé API
3f62cd2d5d279abfd3e74d6663aa691d
Clé secrète
9fa4fe6b679765c0085c76447950ecc6
ID de l’application
179805166721
URL de récupération du canevas
http://social.hecube.net/
URL du canevas
http://apps.facebook.com/hemediafacebook/
Installation du plugin WPBook
Le plugin s’installe simplement via la gestion des plugins de WP.
Une très bonne page d’installation qui vous permet de configurer dans les moindres détails votre application.
wp-content/plugins/wpbook/instructions/index.html
Création de l’application qui va se connecter à WPBook
Dans notre exemple, nous avons créer une application nommé WPBook_app_test
Il faut configurer l’onglet Canvas
Les deux champs les plus importants sont : Canvas Page URL, Canvas Callback URL.
Les paramètres pour configurer le plugin WPBook
Sur votre page Facebook, vous pouvez faire figurer un “Encart” de votre application
Fichiers à insérer dans votre thème
Si vous faites l’insertion des fichiers “à la hache”, cela risque de perturber la fonctionnement de votre thème. Un conseil faites-le au scalpel en reportant attentivement les fonctions dont vous pourriez avoir besoin.
Les fichiers à insérer dans la thème sont les suivants :
comments.php
config.php
default (répertoire qui ne contient que des images)
fb-comments-post.php
index.php
Conclusion : Ce plugin est assez complexe mais il permet quand même de créer un encart sur votre page Facebook et cela à laide d’une application Facebook que vous allez créer docn qui ne disperse pas à tous les vents vos informations de profil..
Source : http://wordpress.org/extend/plugins/wpbook/
3. Le plugin Facebook Dashboard Widget
Ce plugin a comme vocation non de publier vos articles de WP sur Facebook, mais de rapatrier la production digitale de vos ami(e)s sur Facebook. Il y a une petite configuration à faire avant de rendre votre widget publique selon la source de données que vous allez sélectionné. A noter que il n’y a dans ce plugin aucune création d’application….etc. Il suffit de paramétrer un fil RSS.
le Widget et Facebook vous offrent donc le choix de récolter le statut ou les “écrits étourdissants” de vos ami(e)s.
Vous aurez le choix de rapatrier les fils RSS suivants :
Status Updates
Le fil rss des “Posted Items”
http://www.facebook.com/feeds/share_friends_posts.php?id=1111111111&key=1111111111&format=rss20
Le fil rss du “status”
http://www.facebook.com/feeds/friends_status.php?id=1111111111&key=1111111111&format=rss20
Les notifications
Pour les atteindre, il faut s’identifier à Facebook et aller voir http://www.facebook.com/notifications.php
Le fil des éléments postés
Pour les atteindre, il faut s’identifier à Facebook et aller voir http://www.facebook.com/posted.php
Configuration du plugin
L’affichage dans votre thème via le widget
Source : http://wordpress.org/extend/plugins/facebook-dashboard-widget/
Ultime conclusion: Il est sans doute préférable de se fendre d’une petite connexion sur Facebook ! C’est juste plus simple et somme toute pas si chrono-phage.
Pour aller plus loin
blog, Facebook, plugin, Réseaux sociaux, social, Wordpress
10 novembre 2009 dans CMS, Création de site web, Divers, Framework, Javascript, Ajax, Meilleurs blogs, PHP, MYSQL, Tutoriaux, Webdesign, Wordpress, XHTML CSS par Bruno Flaven
Voilà peut-être ce que tout bon développeur rêve de trouver au détour du web afin de pouvoir préconiser Wordpress comme CMS plutôt que Drupal par exemple. Le développement de ce framework CMS nommé PODS relance le match Drupal vs Wordpress, en effet WP acquiert avec l’installation de ce framework des capacités qui viennent concurrencer Drupal sur son propre terrain.
La finalité de ce développement semble bien de hisser WP au niveau d’un CMS. On peut considérer que WP n’est déjà plus un simple d’outil de Blog alors l’installation de ce framework CMS nommé PODS à la croisée du CMS et du framework renforce encore cette tendance en introduisant l’esprit du développement MVC et cette notion de service si utile sous Drupal.
A titre de comparaison, un petit rappel sur la philosophie de cette approche sous Drupal. Pour accentuer le parallèle avec Drupal, nous allons réutiliser notamment le même type de contenu à savoir gérer et afficher un carnet d’adresse.
Drupal - Créer un service sur mesure dans Drupal
Un grand merci à Gaspard King pour nous avoir mis sur le piste de ce magnifique “pod… of white whales” comme pourrait dire le capitaine Achab. Pour information, social.hecube.net vient de créer un groupe consacré à Wordpress et son écosystème dénommé L’univers Worpdress
Note : Les essais ont été effectués sur deux version de WP: WordPress 2.7 FR et Wordpress 2.8.5 FR. Les pré-requis du serveur sont les suivants :
- PHP 5.2 et +
- MySQL 4 et +
- Le mod_rewrite Apache doit être activé et le serveur doit être en mesure de lire la configuration locale du .htaccess ( Cf configuration des permaliens )
- Le répertoire wp-content/plugins/pods doit être être autorisé à la lecture.
Source : http://pods.uproot.us/codex/server_requirements
We got the PODwer !
Le petit texte de présentation de la philosophie de PODS ne laisse aucun doute sur la finalité des PODS.
Pods is a CMS framework for WordPress. It’s a plugin that sits on top of WordPress, allowing you to add and display your own content types. These content types, or “pods”, are totally separate from Posts, Pages, or Custom Fields. The Pods plugin uses its own database structure for maximum efficiency, and for relationships among items.
L’élément pods s’installe comme un simple plugin sous WP
Il s’agit de mettre l’intégralité des fichiers dans un répertoire nommé pods
Les indications d’installation des pods
Voici pour information les instructions données pour installer l’élément Pods sur votre site. Au-delà de la simple lecture, que faut-il retenir ?
- Un des pré-requis, c’est une disposition qui se fixe dans
Réglages > Permaliens, il faut ajouter /%postname%/ Cela peut être un inconvénient sérieux si par exemple pour des raisons de SEO, vous avez travaillé sur la valeur slug de WP, c’est la structure des permaliens afin d’avoir notamment les URL les plus explicites possibles.
- Le plugin s’installe et s’active comme les autres plugins WP
- Une recommandation, il existe potentiellement des incompatibilités avec d’autres plugins activés sur votre site notamment depuis le backend.
1. Le paramètre des permaliens
2. Activation des pods
3. Conflit avec d’autres plugins
Il peut y avoir des erreurs de fonctionnement liées à des conflits avec d’autres plugins, notamment ceux de construction de formulaire ou de questionnaire de sondage. Dans notre exemple, l’erreur s’est produite avec WP-survey et les forums disponibles sur le site de pods.uproot.us en font état. Ainsi, pas de panique si cela ne fonctionne pas, c’est probablement un conflit avec d’autres plugins. C’est un handicap sérieux à l’adoption des pods dans la mesure où vous pouvez être amené(e) à désactiver un ou plusieurs plugins pour faire fonctionner les pods..
message d’erreur javascript
the form has expired
Outre les éventuels conflits, vous devez aussi résoudre potentiellement des problèmes d’affichage au sein de votre thème WP.
Pod Cassé ou les ratés d’affichage dans votre thème WP
Dans la plupart des thèmes que nous avons essayé, l’affichage des pods est loin d’être ergonomique. Le contenu des pods va s’afficher directement dans mes balises principales qui gèrent le contenu. Dans tous les cas, une passe CSS s’impose et le “styling” peut vite devenir complexe.
Les balises du thème WP dans lesquelles s’affichent le contenu des pods
<div id="content" >...</div>
<div id="page" >...</div>
Dans le thème par défaut
Pour information, les recommandations d’installation du Framework Pods
Manual Install
1. Download the latest version of the plugin
2. Upload and unzip the contents of the “pods” folder to your site’s wp-content/plugins/ directory
3. Log into your site’s WordPress Admin section
4. Go to Plugins → Installed and activate the “Pods CMS” plugin
Automatic Install
1. Log into your site’s WordPress Admin section
2. Go to Plugins → Add New and enter a search for “Pods”
3. Click the “Install” link in the right-hand column of the “Pods CMS” listing
4. Click the orange “Install” button
5. Click “Activate” once WordPress has finished downloading and installing the plugin
Final Steps
1. FTP to your site’s wp-content/plugins/pods directory
2. Rename Pods’ “htaccess.txt” file to ”.htaccess”
3. If you do not already have another copy of this file, move .htaccess to the root directory of your WordPress installation
4. Log into your site’s WordPress Admin section
5. In Settings → Permalinks, set a Custom Structure of /%postname%/ or an equivalent
Gérer du contenu à l’aide des pods
Une fois, l’installation terminée, on va pouvoir créer à l’aide du pods un type de contenu auquel sera associé une “vue”. On retrouve donc les prémices des concepts très similaires aux frameworks MVC les plus aboutis ou dans certain CMS dont nous sommes faits l’echo dans ce blog.
Finalement, les Pods vous laissent la possibilité d’insérer un contenu spécifique dans votre site. Vous pourriez ainsi “encapsuler” dans WP : un carnet d’adresse, des fiches de films, des recettes de cuisine… Charge à vous ensuite de créer les “vues” afin d’afficher votre contenu en frontend.
Nous allons suivre pas à pas l’exemple donné dans la vidéo d’explication donnée sur le site (http://vimeo.com/6957771). On va créer les éléments de base de ce qui pourraient être un carnet d’adresses. L’installation du Framework Pods à votre WP va vous permettre d’ajouter du code php à l’intérieur de vos pages. Le code php inséré est assez rudimentaire, on peut donc facilement se l’approprier même si on débute.
Création du pod personne et de son contenu
On crée un pod nommé personne
On insère du contenu que l’on affecte à ce pod nommé personne
En cas d’erreur, vous pouvez vous séparer de votre pod ! Comme dans la vraie vie…
Création des vues pour ce pod
Dans l’exemple qui suit, une fois le contenu inséré, il faut pouvoir voir ce contenu. C’est à ce moment que vous allez créer des “vues” de ce contenu via ce que pods nomment des pages. Dans l’exemple, logiquement plusieurs person ou personne forment un people, le nom de la page est donc tout trouvée people*.
Tant que cette page n’existe pas, il n’y aura rien à voir
Une erreur 404 s’affichera dès vous tacherez de vous rendre à cette adresse http://mon-nom-de-domaine/mon-wordpress/people.
Création de la page people
Code à insérer dans la page people
Ce code vous permet d’afficher le contenu déclaré comme person à hauteur de 10 enregistrement par ordre ascendant par rapport au nom. Il ne reste plus qu’à appeler ensuite le template (la vue) nommé person_listing.
<?php
$Record = new Pod ('person');
$Record ->findRecords ('name ASC', 10);
echo $Record->showTemplate('person_listing');
?>Création du template
Ce "pod template" est en fait un vue qui peut contenir du html, du javascript ou du pseudo code connu sous le nom de "magic tag", une sorte là encore de smarty. Il va servir à visualiser le contenu de la page people.
Le code du template person_listing
La valeur {@detail_url} est à placer dans le code de votre vue ou "pod template". Par ailleurs, dans l’édition du Pod person, vous allez compléter la champs Detail page
<p><a href="{@detail_url}">{@name}</a></p>Code à insérer dans la page people/*
Toutes les personnes accessibles depuis people sont disponibles via la page person_detai. Cette page a pour fonction de vous faire visualiser la fiche de chaque personne enregistrée dans le pod person visible dans la template person_listing.
<?php
$slug = pods_url_variable ('last');
/* var_dump ($slug); */
$Record = new Pod ('person', $slug);
echo $Record->showTemplate('person_detail');
?>Code à insérer dans le template person_detail
Dans “Pods templates”, il vous faudra créer une vue pour les données que vous venez d’insérer c’est à dire l’ensemble des personnes contenus dans cet sorte de carnet d’adresse.
<h3>{@name}</h3>
<p>Date added : {@date_added}</p>
<p>Slug : {@slug}</p>Conclusion : Les pods étendent les possibilités de WP dans ses capacités à ingérer et à afficher du contenu qui sort des canons traditionnels du CMS: pages, articles, liens. On peut notre 3 inconvénients :
- Son adoption nécessite quelques connaissance php
- Sa mise en place peut provoquer des conflits avec d’autres plugins. Le dilemme sera parfois entre désactiver certains plugins pour adopter les pods ou conserver les plugins et bazarder les pods. Choix cornélien.
- Le pod nécessite une structure de permalien qui peut être incompatible avec des recommandations SEO. C’est un inconvénient de moindre importance car la structure de permalien retenu pour le pod reste quand même native à WP et conserve l’avantage des URL explicites.
Au-de-là des ces quelques inconvénients, ce type de framework adossé à WP va se généraliser. Ces légers désavantages sont à mettre sur le compte de la relative jeunesse, le projet a été lancé en automne 2008, soit pas plus d’un an. Les améliorations futures apportées au code peuvent être spectaculaires et faire basculer définitivement WP dans la cour des CMS type Drupal et alors là…
Pour aller plus loin
- Le lien vers la vidéo dont cet article est largement inspiré. Pods CMS - The Basics
http://vimeo.com/6957771
- Pods CMS
Pods is a CMS framework that lets you create, manage, and display your own content types. Don’t bother hacking blog posts into becoming something they’re not. With Pods, create entirely new data structures with only the fields you need. Like Drupal CCK, you can set up relationships, allowing for a whole new level of interconnectedness.
http://pods.uproot.us/
- La page “A propos”
http://pods.uproot.us/about
- Pods UI
This plugin allows you to develop plugins that look like WP using the Pods framework - requires Pods CMS plugin. Pods is a CMS (Content Management System) framework for WordPress.
http://pods.uproot.us/about
* Dans chaque tutoriel made in USA, on retrouve soit “Hello world” soit cette référence constante à “person & people”. On peut toujours voir une référence à (”We, the people…”). We, the People sont les premiers mots du préambule de la Constitution des États-Unis d’Amérique (We, the People of the United States, en français, Nous, Peuple des États-Unis).
Source :http://fr.wikipedia.org/wiki/We_the_People
CMS, Drupal, Framework, PHP, Pods, Wordpress
7 novembre 2009 dans Accessibilité, Création de site web, Divers, Framework, Image, Graphisme, Photoshop, Javascript, Ajax, Tutoriaux, Webdesign, XHTML CSS par Bruno Flaven
L’objectif de cet article est bien de pouvoir mettre sur un site toutes les polices même les plus exotiques. En effet, ne pas pouvoir utiliser les polices que l’on veut sur une page web est souvent considéré comme une contrainte quasi insurmontable par les webdesigners, surtout ceux qui viennent du “print” et ils sont nombreux. C’est aussi souvent un des arguments qui milite en faveur du “tout-flash” où le problème du choix des polices ne se pose pas.
Un homme sorti du rang, Simo Kinnunen, finlandais de surcroit, s’est attaqué à ce problème et semble l’avoir résolu en créant cufón. Pour faire simple, il s’agit d’un script JavaScript qui permet à la volée la conversion des éléments textes de votre page.
La liste des balises est celle de pratiquement de toutes les balises html : <h1>...</h1>, <h2>...</h2>, <h3>...</h3>, <a>...</a>, <p>...</p>…
D’autres essais avaient été tenté, via un javascript notamment, un peu sur le même modèle que cufón avec typeface.js
Source : http://www.alsacreations.com/actu/lire/636-cufon-nouvelle-alternative-pour-intgrer-des-polices-truetype-et-opentype-au-web.html
Ainsi font font…
On va essayer juste à titre d’essai avec une police qui est mis à disposition sur site de cufón. Cette police se nomme Vegur. On passe outre le processus de conversion du fichier .ttf au format .font.js, par lequel on obtient un fichier .font.js, en l’occurrence Vegur.font.js. Cette conversion, on y revient en toute fin d’article.
Le fichier de la police Vegur convertie en javascript
/*!
* Copyright (C) 2004-2008 dot colon. All rights reserved.
*/
Cufon.registerFont({"w":209,"face":{"font-family":"Vegur","font-weight":200,"font-stretch":"normal","units-per-em":"360","panose-1":"0 0 0 0 0 0 0 0 0 0","ascent":"270","descent":"-90","x-height":"4","bbox":"-11 -274 322 94","underline-thickness":"18","underline-position":"-36","unicode-range":"U+0020-U+00F3"},
Le fichier de la police Vegur que nous avons renommé Ma_police_de_site (Ma_police_de_site.font.js)
/*!
* Copyright (C) 2004-2008 dot colon. All rights reserved.
*/
Cufon.registerFont({"w":209,"face":{"font-family":"Ma_police_de_site","font-weight":200,"font-stretch":"normal","units-per-em":"360","panose-1":"0 0 0 0 0 0 0 0 0 0","ascent":"270","descent":"-90","x-height":"4","bbox":"-11 -274 322 94","underline-thickness":"18","underline-position":"-36","unicode-range":"U+0020-U+00F3"},
Source : http://github.com/sorccu/cufon/blob/master/fonts/Vegur.font.js
Charger cufón à l’aide de mootools
Un vue rapide de l’arborescence de fichiers et de répertoires nécessaires au fonctionnement de l’ensemble. Le style de l’ensemble figure classiquement dans un fichier .css. Un grand merci à Ben, pour la mise à disposition des fichiers et de ses explications.
Détails du répertoire js
- cufon-yui.js
L’indispensable
- mootools-1.2-full.js
Le nécessaire, le framework Mootools
- functions.js
L’accessoire
Le code source functions.js
var txt2img = {
init: function(){
if(!$('page')) {
log.console('init stopped !');
return false;
}
$('page').getElements('.txt2img').each(function(L, I){
// Cufon.replace(L, { fontFamily: 'Vegur' });
Cufon.replace(L, { fontFamily: 'Ma_police_de_site' });
});
}
};
window.addEvent('domready', function() {
txt2img.init();
});Le code source du fichier load_cufon.php
L’ensemble des fichiers est appelé dans le fichier load_cufon.php
<?php
/** timer start **/
$timer['start'] = microtime(true);
/** auto detect paths **/
$self = pathinfo(__FILE__);
define('BASEPATH', rtrim($self['dirname'], '/') . '/');
define('BASEURL', 'http://' . rtrim($_SERVER['HTTP_HOST'], '/') . '/' . str_replace(rtrim($_SERVER['DOCUMENT_ROOT'], '/') . '/', '', rtrim($self['dirname'], '/') . '/'));
/** config **/
define('_CSS', BASEURL . 'css/styles.css');
/* FONTS */
// define('_CUFON_FONT_1', BASEURL . 'fonts/Vegur.font.js');
define('_CUFON_FONT_1', BASEURL . 'fonts/Ma_police_de_site.font.js');
define('_CUFON_FRAMEWORK', BASEURL . 'js/cufon-yui.js');
define('_MOOTOOLS_FRAMEWORK', BASEURL . 'js/mootools-1.2-full.js');
define('_MOOTOOLS_MYFUNCTIONS', BASEURL . 'js/myfunctions.js');
/** timer stop **/
$timer['stop'] = microtime(true);
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test cufon</title>
<!-- css -->
<link rel="stylesheet" href="<?=_CSS;?>" type="text/css" media="screen"/>
<!-- End css -->
<!-- cufon inclusions -->
<script language="javascript" type="text/javascript" src="<?=_CUFON_FRAMEWORK;?>"></script>
<script language="javascript" type="text/javascript" src="<?=_CUFON_FONT_1;?>"></script>
<!-- End cufon inclusions -->
<!-- mootools -->
<script language="javascript" type="text/javascript" src="<?=_MOOTOOLS_FRAMEWORK;?>"></script>
<script language="javascript" type="text/javascript" src="<?=_MOOTOOLS_MYFUNCTIONS;?>"></script>
<!-- mootools -->
</head>
<body>
<div id="page">
<h1 class="txt2img uppercase">Lorém ipsum dolor sît amet</h1>
<br class="clear_10">
<a href="http://www.google.fr" target="_blank" class="txt2img italic">Lien Lorém ipsum dolor sît amet lien</a>
<br class="clear_10">
<h2 class="txt2img italic">Lorém ipsum dolor sît amet</h2>
<br class="clear_10">
<h3 class="txt2img underline">Lorém ipsum dolor sît amet</h3>
<br class="clear_20">
<p class="txt2img">
Lorém ipsum dolor sît amet: consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua? Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
Lorém ipsum dolor sît amet: consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua? Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br class="clear_20">
</div>
<!-- IE cufon hack to correct delay -->
<script language="javascript" type="text/javascript"> Cufon.now(); </script>
</body>
</html>Extrait du code de styles.css
body {
font-size: 12px;
font-family: arial, helvetica, sans-serif;
background-color: #ffffff;
color: #434343;
text-align: center;
margin: 0 auto;
padding: 0;
}
a {
font-size: 12px;
color: #434343;
outline: none;
}
.clear_O {
line-height: 0;
clear: both;
}
.clear_10 {
line-height: 10px;
clear: both;
}
.clear_20 {
line-height: 20px;
clear: both;
}
h1 {
background-color: #5698D2;
margin: 0;
padding: 10px;
line-height: 16px;
font-size: 16px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: none;
text-align: left;
color: #ffffff;
}
h2 {
background-color: #5698D2;
margin: 0;
padding: 10px;
line-height: 14px;
font-size: 14px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: none;
text-align: left;
color: #ffffff;
}
h3 {
background-color: #5698D2;
margin: 0;
padding: 10px;
line-height: 12px;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: none;
text-align: left;
color: #ffffff;
}
/* to be continued */Le plus important, le rendu du chargement
Le police est de la Vegur mais rien ne vous empêche de faire le test avec de la TradeGothic, GillSans, HelveticaNeue… Il vous faudra cependant avoir acheté les droits d’usage de cette police.
L’interface de conversion
Au terme de cette étape, vous obtiendrez le sésame pour votre site, c’est à dire la conversion de votre fichier .ttf en .font.js qui vous permettra de la mettre en place sur votre site.
Le site de cufón où vous pourrez envoyer votre .tff
Les paramètres de conversion de votre police
Les paramètres plus complets de conversion de votre police
Le paramètre de sécurité, vous devez déclarer le site sur lequel vous allez utiliser cette police. Dans notre exemple, nous avons mis est www.google.com, ils ont les moyens de supporter un procès pour du “Copyright infringement”
Pour aller plus loin
CSS, Cufon, Font, Javascript, polices système, Webdesign
25 octobre 2009 dans Accessibilité, CMS, Création de site web, Divers, Iphone, mobile, Javascript, Ajax, Mac, Marketing Web, PHP, MYSQL, Tutoriaux, Webdesign, Widget, Gadget, Wordpress, XHTML CSS par Bruno Flaven
Le sujet est d’une brûlante actualité, en effet au même titre que le blogging sous Wordpress a du réagir à l’hémorragie lié aux pratiques du micro-blogging, le blogging sous WP se doit aussi de faire face à l’épidémie des terminaux mobiles type Iphone ou Android qui bouleverse les usages sur Internet. En effet, c’est aujourd’hui un mode de surf affectionné par un grand nombre d’utilisateurs qui passent indifféremment de l’ordinateur au mobile et le nombre ne cesse de croitre. Voici, donc un article sur les différents modes de récation à disposition si vous administrez un blog sous WP et penser faire mouvement vers le mobile.
Un grand merci à Julien Landouar qui nous a donné quelques précieuses pistes sur les plugins existants pour faire exister une version mobile d’un WP.
Pour mémoire, quelques essais avaient été menés sur un site en Joomla, sans véritable réussite, il faut bien le reconnaitre. Toutefois, si il est à tirer un enseignement de cette expérience, c’est que la version mobile se gère sur un sous-domaine : http://iphone.hecube.net/*, http://mobile.hecube.net/*.
Cela suppose quand même une certaine maîtrise de ce domaine, ce qui n’est pas toujours la cas, que ce soit sous Joomla ou Wordpress.
* ces sous-domaines ne sont donnés qu’à titre d’exemple, ce qui ne fait pas mentir le proverbe « Les cordonniers sont toujours les plus mal chaussés »
Créer intégralement sous Wordpress son thème Iphone et Mobile
On va voir rapidement les principes de création d’un thème Wordpress pour téléphone mobile et/ou pour Iphone, Android. C’est une manière “quick and dirty” comme on dit mais qui permet d’obtenir un résultat rapide pour convertir son blog sous WP au format mobile et Iphone, Android.
Cette création de zéro se scinde en 3 étapes :
- La création de deux “Modèles” au sein de votre thème Wordpress. Ces deux fichiers constitueront les 2 destinations vers lequel seront redirigés vos visiteurs, munis d’un mobile wap ou d’un mobile Iphone ou un mobile Android
- L’ajout d’une css spécifique pour la page à destination UNIQUEMENT des visiteurs munis d’un mobile Iphone ou un mobile Android.
- Un script
.php de détection des navigateurs de vos visiteurs pour le rediriger automatiquement vers la bonne destination en fonction de leurs mobiles.
1. La création des fichiers spécifiques mobile.php et iphone.php
Les fichiers mobile.php et iphone.php sont à placer dans /le-repertoire-qui-contient-le-wordpress/wp-content/themes/nom-de-votre-theme/
Le code php de la page mobile.php à joindre à votre thème
<?php
/*
Template Name: mobile
*/
?>
<html>
<head>
<title>Version Mobile d'un blog sous Wordpress <?php bloginfo('name'); ?></title>
</head>
<body id="version-mobile">
<div>
<h3>Version Mobile d'un blog sous Wordpress <?php bloginfo('name'); ?></h3>
<?php
/* */
print('<div class="description">');
bloginfo('description');
print('</div>');
?>
<?php
/* Cette query affiche les 3 derniers articles postés dans le blog toutes catégories confondues */
query_posts('showposts=3');
while (have_posts()) : the_post();
?>
<div>
<h2><?php the_title(); ?></h2>
<div><?php
/* La fonction d'affichage du contenu a été désactivée */
/* the_content(); */
?></div>
<p>Publié le <?php the_time('j F Y') ?> par <?php the_author() ?>.</p>
<hr />
</div>
<?php endwhile; ?>
</div>
</body>
</html>Le début du code pour le template de iphone.php
la valeur placé en en-tête Template Name: iphone va donné le nom au template. Ce sera ce nom qui sera disponible dans la menu déroulant dans votre outil d’adminsitration de votre blog sous WP.
<?php
/*
Template Name: iphone
*/
?>
<html>
<head>
<title>Version Mobile d'un blog sous Wordpress <?php bloginfo('name'); ?></title>
<!-- L'ajout d'une CSS specifique est expliqué au point 2 -->
<link media="only screen and (max-device-width: 480px)" href="http://www.jimramsey.net/iphone.css" type="text/css" rel="stylesheet" />
</head>
<body id="version-mobile">
<div>
<!-- le code vient ici --> Lors de la création d’une page, il faut lui affecter le template mobile
Vous avez désormais 2 destinations pour les mobiles : d’un coté l’internet en noir et blanc pour les bouffeurs de wap et de l’autre l’internet ++ en couleurs
Une fois les deux fichiers conçus
2. La création de la CSS pour iphone.php
Pour rehausser le webdesign de la page pour iphone/android, rien de tel qu’un fichier .css pour améliorer l’affichage. En cherchant un peu sur le web, vous trouverez faclement des exemples dont celui de Jim Ramsey qui s’est interress come webdesigner à cette question de l’affichage sous iphone. C’est un bon début pour personnaliser ensuite votre ffcihage.
Le chargement de cette css iphone dans une page web
<link media="only screen and (max-device-width: 480px)" href="http://www.jimramsey.net/iphone.css" type="text/css" rel="stylesheet" />
Un exemple de .css pour iphone
/* This stylesheet is for Mobile Safari only */
/* Reset ------------------------------------------------------------------ */
body {
background-color: #fff;
-webkit-text-size-adjust: none;
}
html, body, div, p, hr,
h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd,
blockquote, pre, th, td,
form, fieldset, input,
select, textarea {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
ol, ul { list-style: none; }
a img { border: 0; }
body, input, select, textarea {
font: 18px Helvetica, sans-serif;
}
#beta {
display: none;
}Source : http://www.jimramsey.net/
3. La création d’un script .php d’autodetect
Un usage du script si vous utilisez l’outil de configuration en ligne mis à disposition par les créateurs du script.
include('mobile_device_detect.php');
mobile_device_detect(false,true,true,true,true,true,false,false);Source : http://detectmobilebrowsers.mobi/
Source dans header.php dans votre théme WP
Voilà plutôt la partie intéressante, à savoir l’intégration de ce détecteur dans le thème par défaut livrer avec Worpdress.
<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
?>
<?php
include('mobile_device_detect.php');
$mobile = mobile_device_detect();
// le retour d'un simple boléen true or false qui fait echo !
if($mobile==true){
echo 'Vous utilisez un mobile';
}else{
echo 'Vous êtes sur un navigateur traditionnel';
}
// redirection de tous les mobiles vers le site mobile et de tout le reste vers la site normal
/*
if($mobile==true){
header('Location:http://mobile.mon-nom-de-domaine.fr');
}else{
header('Location:http://www.mon-nom-de-domaine.fr');
}
exit;
*/
?>Le détection fonctionne, le message s’affiche pour indiquer que vous êtres bien sur un navigateur traditionnel.
Si, via le User Agent Switcher, la détection fonctionne, le message s’affiche pour indiquer que vous êtres bien sur un navigateur sur mobile. Alléluia !
Ultime conclusion, comme souvent, par manque de temps, nous ne prenons pas le temps de finaliser la création du thème néanmoins les principes sont là pour réaliser vous même et sur mesure le thème iphone/android de vos rêves. Dans un souci d’efficacité, nous préconisons quand même l’usage de plugins existants. Cela tombe bien, c’est la partie qui vient ensuite !
Les solutions “clé en main” sous Wordpress
1. L’ensemble theme et plugin iWPhone WordPress Plugin and Theme
Une fois le dossier dézippé, vous vous retrouvez avec un répertoire nommé iwphone-wordpress-plugin-and-theme. A l’intérieur de ce répertoire, vous trouvez :
- Le fichier du plugin à proprement parler
iwphone.php
- Le répertoire contenant le thème Wordpress qui est conçu pour un affichage optimisé pour Iphone.
La marche à suivre pour l’installation iwphone-wordpress-plugin-and-theme.zip
1. Il vous faut envoyer par FTP le fichier iwphone.php dans le répertoire plugins de votre blog sous Wordpress. le chemin sera de la forme suivante sur le serveur /le-repertoire-serveur-qui-heberge-votre-blog-wp/wp-content/plugins
N’activez pas encore le plugin car vous devez ensuite envoyer l’étape suivante, à savoir installation du thème.
2. Il vous reste à placer le thème conçu par les experts Wordpress de contentrobot.com . le répertoire se nomme iwphone-by-contentrobot. Vous l’envoyez par FTP dans ce répertoire.
/le-repertoire-serveur-qui-heberge-votre-blog-wp/wp-content/themes/
Une fois le thème disponible surtout ne pas l’activer.
Les étapes en anglais de l’installation du plugin et du thème
1. Download the iWPhone WordPress Plugin and Theme zip file.
2. Extract the “iwphone-wordpress-plugin-and-theme” folder.
3. Locate the file “iwphone.php” inside the “iwphone-wordpress-plugin-and-theme” folder and upload it into your wp-content/plugins/ directory.
4. Locate and upload the entire folder named “iwphone-by-contentrobot” into your wp-content/themes/ directory.
5. Go to your WordPress administration area and click on Plugins and activate the plugin called “iWPhone”. Do NOT make the iWPhone-by-ContentRobot theme the current theme under Presentation.
IMPORTANT
N’activez pas le theme que vous venez d’installer. L’affichage sous Iphone va se faire via une detéction du user-agent.
La fonction php qui permet la détection sur le user-agent au sein du fichier iwphone.php
function detectiPhone($query){
$container = $_SERVER['HTTP_USER_AGENT'];
//print_r($container); //this prints out the user agent array. uncomment to see it shown on page.
$useragents = array (
"iPhone","iPod");
$this->iphone = false;
foreach ( $useragents as $useragent ) {
if (eregi($useragent,$container)){
$this->iphone = true;
}
}
/*if($this->iphone){
echo ("You are on an iPhone or iPod touch - Lucky you!");
}else{
echo ("You are not on an iPhone or iPod touch - Too bad 
");
}*/
}
Procédure d’activation du plugin IWPhone
Le tout s’active comme un simple plugin WP…
Votre site enfin disponible sur Iphone
Quelques captures pour enjolivés un peu cet article austère.
2. L’ensemble thème et plugin WPtouch iPhone Theme
L’artillerie lourde en matière de plugin et de thème, extrêmement sophistiqué, requiert au minimum un WP 2.6
Ce plugin se pare de tous les adjectif suivants : iphone, ipod touch, theme, apple, mac, bravenewcode, ajax, mobile, mobile, android, blackberry. Il est donc complet et vous assure une visibilité sur un très grand nombre de mobiles.
Les paramètres de la “Skin” ou l’apparence à donner sous l’Iphone notamment.
Le paramétrage de Google Analytics
Le site sur iphone avec le plugin WPtouch iPhone Theme
Extrait du contenu du site vu avec WPtouch iPhone Theme
Tester sa solution
Hormis, l’achat pur et simple d’un iphone ou d’un blackberry pour tester vos pages , il existe des solutions intermédiaires, mois onéreuse cela va sans dire.
- L’installation d’un add-ons firefox
User Agent Switcher
- Le recours à des émulateurs pour tester vos pages. On se contentera de ceux disponibles en ligne, sans parler des émulateurs livrés avec d’éventuels SDK de développement pour mobile.
1. Quel agent êtes-vous ou du bon usage du add-on User Agent Switcher ?
Il vous faut tester l’affichage de votre version mobile en simulant le comportement d’un Iphone ou d’un Android. Le Add-on User Agent Switcher est là pour vous y aider. Ce module sous Firefox vous permettra une gestion plus fine des “User Agent” qui est l’élément pivot de la simulation via un navigateur d’un environnement mobile.
Attention, cela peut perturber le bon fonctionnement de votre navigateur Firefox et certains sites peuvent ne plus savoir ce que vous êtes ! Le problème est survenu notamment avec le site google… qui peut ne plus s’afficher, c’est ballot ! On peut quand même vivre sans google et iphone, tout de même !
Les agents disponibles avec User Agent Switcher, il ne manque que Fox, Mulder et Bauer
Importer, Editer, Exporter les user-agent de User Agent Switcher
L’édition du user-agent “iphone” sous User Agent Switcher
Une erreur possible sur Google suite à l’installation du add-ons User Agent Switcher
A noter, le “Veuillez contacter le webmestre du site…”, savoureux, larry ou sergei, tu peux corriger steplay !
Description : Android
User Agent : Mozilla/5.0 (Linux; U; Android 1.5; fr-fr; HTC Magic Build/CRB17) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1
Une liste plutôt exhaustive des User Agent trouvée sur le net et amendée des User Agent IPhone et Android
<useragentswitcher>
<useragent description=":: BROWSERS - Windows ::" useragent="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="MSIE 6 (Win XP)" useragent="Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)" appname="Microsoft Internet Explorer" appversion="4.0 (Compatible; MSIE 6.0; Windows NT 5.1)" platform="" vendor="" vendorsub=""/>
<useragent description="MSIE 5.5 (Win 2000)" useragent="Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0 )" appname="Microsoft Internet Explorer" appversion="4.0 (compatible; MSIE 5.5; Windows NT 5.0)" platform="" vendor="" vendorsub=""/>
<useragent description="MSIE 5.5 (Win ME)" useragent="Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; Win 9x 4.90)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Netscape 4.8 (Win XP)" useragent="Mozilla/4.8 [en] (Windows NT 5.1; U)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Opera 8.0 (Win 2000)" useragent="Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; en) Opera 8.0" appname="Microsoft Internet Explorer" appversion="4.0 (compatible; MSIE 6.0; Windows NT 5.0; en)" platform="" vendor="" vendorsub=""/>
<useragent description="Opera 7.51 (Win XP)" useragent="Opera/7.51 (Windows NT 5.1; U) [en]" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Opera 7.5 (Win XP)" useragent="Opera/7.50 (Windows XP; U)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Avant Browser" useragent="Avant Browser/1.2.789rel1 (http://www.avantbrowser.com)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Netscape 7.1 (Win 98)" useragent="Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.4) Gecko Netscape/7.1 (ax)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Multizilla (Win xp)" useragent="Mozilla/5.0 (Windows; U; Windows XP) Gecko MultiZilla/1.6.1.0a" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Opera 7.5 (Win ME)" useragent="Opera/7.50 (Windows ME; U) [en]" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Netscape 3.01 gold (Win 95)" useragent="Mozilla/3.01Gold (Win95; I)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Netscape 2.02 (Win 95)" useragent="Mozilla/2.02E (Win95; U)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description=":: SPIDERS - search ::" useragent="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Googlebot 2.1 (New version)" useragent="Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Googlebot 2.1 (Older Version)" useragent="Googlebot/2.1 (+http://www.googlebot.com/bot.html)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Msnbot 1.0 (current version)" useragent="msnbot/1.0 (+http://search.msn.com/msnbot.htm)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Msnbot 0.11 (beta version)" useragent="msnbot/0.11 (+http://search.msn.com/msnbot.htm)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Yahoo Slurp" useragent="Mozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/help/us/ysearch/slurp)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Ask Jeeves/Teoma" useragent="Mozilla/2.0 (compatible; Ask Jeeves/Teoma)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description=":: BROWSERS - Mac ::" useragent="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Safari 125.8 (Mac OSX)" useragent="Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/125.2 (KHTML, like Gecko) Safari/125.8" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Safari 85 (Mac OSX)" useragent="Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/125.2 (KHTML, like Gecko) Safari/85.8" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="MSIE 5.15 (Mac OS 9)" useragent="Mozilla/4.0 (compatible; MSIE 5.15; Mac_PowerPC)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Firefox 0.9 (Mac OSX )" useragent="Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7a) Gecko/20040614 Firefox/0.9.0+" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Omniweb563 (Mac OSX)" useragent="Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US) AppleWebKit/125.4 (KHTML, like Gecko, Safari) OmniWeb/v563.15" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description=":: BROWSERS - linux/unix/beos ::" useragent="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Mozilla 1.6 (Debian)" useragent="Mozilla/5.0 (X11; U; Linux; i686; en-US; rv:1.6) Gecko Debian/1.6-7" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Epiphany (Linux)" useragent="ozilla/5.0 (X11; U; Linux; i686; en-US; rv:1.6) Gecko Epiphany/1.2.5" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Epiphany (Ubuntu)" useragent="Mozilla/5.0 (X11; U; Linux i586; en-US; rv:1.7.3) Gecko/20040924 Epiphany/1.4.4 (Ubuntu)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Galeon 1.3.14 (Linux)" useragent="Mozilla/5.0 (X11; U; Linux; i686; en-US; rv:1.6) Gecko Galeon/1.3.14" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Konqueror 3 rc4 (Linux)" useragent="Konqueror/3.0-rc4; (Konqueror/3.0-rc4; i686 Linux;;datecode)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Konqueror (Gentoo)" useragent="Mozilla/5.0 (compatible; Konqueror/3.3; Linux 2.6.8-gentoo-r3; X11;" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Firefox 0.8 (Linux)" useragent="Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.6) Gecko/20040614 Firefox/0.8" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="ELinks 0.9.3 (Kanotix)" useragent="ELinks/0.9.3 (textmode; Linux 2.6.9-kanotix-8 i686; 127x41)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Elinks (Linux)" useragent="ELinks (0.4pre5; Linux 2.6.10-ac7 i686; 80x33)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Links 2.1 (Linux)" useragent="Links (2.1pre15; Linux 2.4.26 i686; 158x61)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Links 0.9.1 (Linux)" useragent="Links/0.9.1 (Linux 2.4.24; i386;)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Opera 7.23 (Linux)" useragent="MSIE (MSIE 6.0; X11; Linux; i686) Opera 7.23" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Lynx 2.8.5rel.1 (Linux)" useragent="Lynx/2.8.5rel.1 libwww-FM/2.14 SSL-MM/1.4.1 GNUTLS/0.8.12" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="w3m 0.5.1 (Linux)" useragent="w3m/0.5.1" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Links 2 (FreeBSD)" useragent="Links (2.1pre15; FreeBSD 5.3-RELEASE i386; 196x84)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Mozilla 1.7 (FreeBSD)" useragent="Mozilla/5.0 (X11; U; FreeBSD; i386; en-US; rv:1.7) Gecko" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Netscape 4.77 (Irix)" useragent="Mozilla/4.77 [en] (X11; I; IRIX;64 6.5 IP30)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Netscape 4.8 (SunOS)" useragent="Mozilla/4.8 [en] (X11; U; SunOS; 5.7 sun4u)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Net Positive (BeOS)" useragent="Mozilla/3.0 (compatible; NetPositive/2.1.1; BeOS)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description=":: SPIDERS - misc ::" useragent="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="gulperbot" useragent="Gulper Web Bot 0.2.4 (www.ecsl.cs.sunysb.edu/~maxim/cgi-bin/Link/GulperBot)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Email Wolf" useragent="EmailWolf 1.00" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="grub client" useragent="grub-client-1.5.3; (grub-client-1.5.3; Crawl your own stuff with http://grub.org)" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="download demon" useragent="Download Demon/3.5.0.11" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="omni web" useragent="OmniWeb/2.7-beta-3 OWF/1.0" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="winHTTP" useragent="SearchExpress" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="ms url control" useragent="Microsoft URL Control - 6.00.8862" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="iPhone 3.0" useragent="Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16" appcodename="Mozilla" appname="Netscape" appversion="5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16" platform="iPhone" vendor="Apple Computer, Inc." vendorsub=""/>
<useragent description="Android" useragent="Mozilla/5.0 (Linux; U; Android 1.5; fr-fr; HTC Magic Build/CRB17) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1" appcodename="Android" appname="Android" appversion="1.0" platform="Android" vendor="Google Android" vendorsub=""/>
<useragent description=":: source: hecube.net ::" useragent="" appname="" appversion="" platform="" vendor="http://hecube.net" vendorsub=""/>
</useragentswitcher>
Source : http://www.useragentstring.com/pages/useragentstring.php
Source : http://fr.wikipedia.org/wiki/User-Agent
Source : WAP User Agents
2. Emulateur ou comment voir son site sans se fatiguer ?
Voir son site sous un émulateur iphone
Vous risquez de rencontrer quelques difficultés à afficher votre site sous cet émulateur, une fois l’installation du plugin iWPhone WordPress Plugin and Theme. En effet, il semble que vous soyez pris pour un navigateur et non un iphone par la fonction qui détecte le user agent. Vérification faite à l’aide d’un véritable iphone, votre site s’affiche bien correctement donc pas d’inquiétudes intempestives.
Voir son site sous un émulateur mobile
Vous êtes dans le monde merveilleux du WAP (Wireless Application Protocol), un monde en noir et blanc avec son langage à la syntaxe très similaire à l’HTML, le WML et son langage de scripting appelé le WMLScript. . Vous disposez de deux modèles de téléphone mobile un Nokia N70 et un Sony K750.
Quelques captures de la page mobile.php
Si vous cherchez à charger le site destiné à l’iphone, c’est l’erreur assurée
Un tour d’horizon rapide du WAP et de ses acolytes .wbmp et .wml
“Vizavi” de J2M, ou par déférence pour ce grand visionnaire en N&B, on se devait de parler du WAP. On ne va s’étendre sur le langage .wml, c’est une sorte de html du pauvre. Ce qui est plus problématique c’est la création des images dans ce format .wbmp. L’extension .wbmp signifie WirelessBitmap; Il existe deux types d’extensions possibles .wbm ou .wbmp.
Le format WBMP est le format standard d’optimisation des images pour des périphériques mobiles tels que des téléphones portables. Il prend en charge les couleurs 1 bit, ce qui signifie que les images WBMP contiennent uniquement des pixels noir et blanc.
Source : http://help.adobe.com/fr_FR/Photoshop/11.0/WSD4628152-756A-4312-8B2C-A30568F599C7.html
Conversion via php au format wbmp d’un jpg ou d’un png
Un exemple avec png2wbmp()
// Chemin vers la cible png
$path = 'logo_wordpress.png';
// Récupération de la taille de l'image
$image = getimagesize($path);
// Convertion de l'image
png2wbmp($path, 'logo_wordpress_png.wbmp', $image[1], $image[0], 7);
Source : http://www.php.net/manual/fr/function.png2wbmp.php
Le fichier au format logo_wordpress.png
Le fichier logo_wordpress.png converti au format .wbmp
Pour des raisons d’affichage dans un navigateur, l’image au format .wbmp est au format .png
Un exemple avec jpeg2wbmp()
Vous pouvez faire la conversation y compris à partir d’un fichier .jpg
// Chemin vers la cible jpeg
$path = 'logo_wordpress.jpg';
// Récupération de la taille de l'image
$image = getimagesize($path);
// Convertion de l'image
jpeg2wbmp($path, 'logo_wordpress_jpg.wbmp', $image[1], $image[0], 5);
Source : http://www.php.net/manual/fr/function.jpeg2wbmp.php
Pour aller plus loin
Android, Iphone, iPod, Mobile, PHP, Wordpress
11 octobre 2009 dans Divers, Framework, Linux, Apache, PHP, MYSQL, Ruby on Rails, Tutoriaux par Bruno Flaven
On avait affirmé haut et fort notre choix d’un framework PHP à savoir CodeIgniter et voilà qu’un fork de CodeIgniter nommé Kohana viendrait perturber la hiérarchie qui s’élabore lentement parmi les frameworks PHP : Symphony, Zend, CakePHP et puis enfin CodeIgniter.
Kohana ?
Même si le nom évoque plus un animal quasi mascotte de l’Australie, le Koala qu’un framework, une petite recherche sur le site et sur le web nous informe un peu plus. L’origine du nom donne une petite idée de l’intentionnalité des auteurs. En langue sioux, Kohana signifie "swift" c’est à dire rapide, véloce… Si les auteurs ont recherché cette filiation, c’est sans doute pour offrir à la communuaté PHP un framework rapide et robuste. Le slogan qui accompagne Kohana en dit plus que la définition du nom elle-même "Swift, Secure, and Small PHP 5 Framework". Nous voilà donc prevenu sur ce qui a présidé à la naissance de ce Framework inspiré par CodeIgniter, une sorte de "Little Big Man" du framework.
En tous les cas, voilà la défintion officielle données par les auteurs, plus explicite on ne peut pas.
What is Kohana?
Kohana is a PHP5 framework that uses the Model View Controller architectural pattern. It aims to be secure, lightweight, and easy to use.
Avant de livrer in extenso un comparatif avec CodeIgniter, on se permet d’attirer votre attention sur deux atouts majeurs de Kohana. Ces points seront d’ailleurs repris abondamment dans le comparatif, comparatif auquel à largement contribué BinBin que nous remercions chaudement !
Kohana et ses librairies
Bien que le titre évoque plus un groupe de rock à la manière de Johnny Diesel and the Injectors, ces éléments vous seront d’une grande utilité et il est souhaitable de télécharger l’ensemble lorsque vous téléchargerez la totalité du Framework.
Le téléchargement de Kohana inclut toutes les "libraries", les "helpers" et les "views" mais il vous faudra aussi sélectionner notamment les modules qui font la force de Kohana.
- Archive – Compressed archive creation, supports zip, tar, gzip, and bzip.(module d’archivage)
- Auth – Simple authentication and user management. Uses ORM for models. (module d’authentification)
- Gmaps – Google Maps integration, geolocation, and API support. (module de d’interfaçage avec Google Maps)
- Kodoc – Dynamic self-generated documentation. (Beta!) (module de génération de documentation disponible en Beta)
- Payment – Provides merchant and payment gateway wrappers. Supports Authorize.net, PayPal, Trident, Trust Commerce, and YourPay. (module de paiment)
Kohana + quelques outils
Incluez aussi les deux outils qui vous sont à l’heure actuelle proposés
- Markdown – Text formatting tool that offers text to HTML markup with a natural syntax.
- SwiftMailer – Feature-rich emailing library that supports HTML email, SMTP connections, and many other features.
Un petit mot sur l’ORM de Kohana
Selon, l’adage bien connu pourceux d’entre vous qui viennent du RoR "convention over configuration", le recours à un ORM réduit considérablement la quantité de code à produire pour réaliser les tâches habituelles à exécuter sur une BDD. Tâches que l’on a coutume de résumer par l’acronyme CRUD (Create, Read, Update et Delete).
C’est aussi un facteur de rapidité et de viabilité du code, en réduisant l’écriture de code personnel donc en minimisant de facto l’apparition de bugs potentiels.
Deux bémols principaux au recours à un ORM sous Kohana, ils sont d’ailleurs mentionnés dans l’introduction de Kohana sur le chapitre sur l’ORM:
- L’ORM ne produit pas toujours le code le plus efficient pour opérer des requêtes SQL.
- Bien que Kohana possède des "drivers" (pilotes) pour se connecter aux principales BDD qui autorisent "foreign key" (clé étrangère) tel que PostgreSQL, MSSQL et MySQL. Pour MySQL, il vous faudra utiliser en priorité des tables de type InnoDB et non MyISAM.
Source : http://docs.kohanaphp.com/libraries/orm
Définition d’un ORM
A titre de rappel, voici le définition donnée par wikipédia.
Un mapping objet-relationnel (en anglais object-relational mapping ou ORM) est une technique de programmation informatique qui crée l’illusion d’une base de données orientée objet à partir d’une base de données relationnelle en définissant des correspondances entre cette base de données et les objets du langage utilisé. On pourrait le désigner par « correspondance entre monde objet et monde relationnel »
Une comparaison entre Codeigniter et Kohana
A tout seigneur tout honneur, on commence par lister les avantages de Kohana bien qu’il ne soit qu’un vassal, pardon un fork de CodeIgniter.
Les points forts de Kohana
Ils sont nombreux, les voici dans le désordre mais quasiment tous au complet.
- Kohana intègre au maximum les fonctionnalités d’un langage Orienté Objet (très OOP, Object-oriented programming) en utilisant PHP5
- Kohana est 100% compatible UTF-8
- Kohana est léger. Il est extensible à souhait (l’argument de "scalability" ou d’extensibilité)
- Kohana possède une architecture souple et modulaire
- Kohana, comme tout bon framework, il s’appuie sur le Design pattern MVC
- Kohana comprend des
Add-ons pour technologies externes( Google maps, modules de paiements). Les fameuses libraries (librairies) cités plus haut.
- Kohana comprend des Add-ons pour faire un espace membre (authentification via session, déconnexion etc.)
- Kohana possède un système
profiler plus poussé que Codeigniter. On peut ainsi choisir exactement ce que l’on veut profiler pour débuguer (sessions, cookies, requêtes etc.)
- Kohana possède une véritable communauté et n’est pas à l’origine opéré par une agence, ellislab pour ne pas la citer comme CodeIgniter. C’est un argument poru les puristes de l’open-source.
Les points faibles de Kohana
Pour certains, ce n’est pas un point même pertinent mais bon, le cas se présente notamment dans la réécriture complète d’une application. Il peut arriver qu’il faille assurer le maintien d’une application en PHP 4, le coût du redéveloppement complet est souvent trop important, le manque de temps aussi !
- Pas de PHP4. Kohana est en PHP5 et seulement en PHP5
Les points forts de CodeIgniter
- CodeIgniter permet d’utiliser PHP4 comme PHP5. Pas d’obligation de se limiter à PHP5.
- Comme Kohana, CodeIgniter est léger. Il est extensible à souhait (l’argument de "scalability" ou d’extensibilité)
- Comme Kohana, Codeigniter est doté d’une architecture souple et modulaire et s’appuie comme tout framework sur le Design pattern MVC
- CodeIgniter est puissant mais nécessite peu de ressources
- CodeIgniter s’appuie sur une communauté très active et le niveau d’adoption est en croissance constante tant du côte des développeurs que des utilisateur/clients
Les points faibles de CodeIgniter
- A l’inverse de Kohana, CodeIgniter possède peu voir pas du tout d’
Add-ons pour utiliser des technologies externes
Conclusion : Kohana vs CodeIgniter
Codeigniter et Kohana sont sur de très nombreux points similaires, ce qui semble normal compte tenu de leur parenté. Outre le plaisir de la découverte pour Kohana, Kohana se révèle beaucoup plus poussé dans ses capacités, essentiellement grâce à ces fameuse Add-ons et libraries. Toutefois, Kohana reste cantonné à PHP5, ce qui reste un handicap surmontable.
Et par rapport aux autres frameworks, ce sont les frameworks idéals car beaucoup moins complexes Zend, CakePHP, Symphony. Ils sont à conseiller à toute développeur qui souhaiterait appréhender facilement et rapidement un Framework PHP.
C’est un peu aussi le sens de la conclusion de l’article qui avait été consacré précédemment sur ce blog à CodeIgniter.
Pour aller plus loin
NB : L’origine japonaise du nom Kohana semble à écarter, que ferait-on d’un framework nommé "Petite Fleur" ! A moins que les auteurs soient des fans de Sidney Bechet et comme les auteurs de WordPress font une référence constante au jazz..
Il est aussi probable mais pas certain que les concepteur de flash est pensé à cet adjectif lorsque l’extension des fichiers flash est devenu .swf qu’on nomme communément un “swift”
CodeIgniter, Framework, Kohana, OOP, PHP, PHP5
4 octobre 2009 dans CMS, Création de site web, Divers, PHP, MYSQL, Tutoriaux, Wordpress, XHTML CSS par Bruno Flaven
Une question récurrente qui se pose sur un blog où la plupart on souhaite interagir avec les utilisateurs sans pour autant laisser son adresse mail apparente et ce de la manière la moins anarchique possible (choix dans les champs, stockage éventuel des mails récoltés dans une BDD…). C’est à cette question que l’on va tenter de répondre en sélectionnant un plugin qui permet de gérer un formulaire au sein de son blog sous Wordpress.
Les plugins ont été testé sur une version 2.7 un peu antérieure à l’actuelle version disponible de wordpress 2.8 et des brouettes.
Là encore, nous présentons dans l’ordre de préférence les plugins que nous avons préféré selon les critères suivants. Ces critères constituent le plus minimum requis pour créer sans difficultés un formulaire dans un blog Wordpress.
- L’insertion du formulaire se fait indifféremment dans un article ou dans une page via une simple ligne de code
- le formulaire envoie un mail à une adresse email, celle de l’administrateur du site
- Il est possible éventuellement de personnaliser les champs disponibles dans le formulaire
A ces 3 critères, il s’ajoute accessoirement la capacité à stocker les mails, à contrôler l’apparence du formulaire, la mise à disposition dans un widget… qui sont autant de + dans le choix du plugin.
1. Le plugin de formulaire FormBuilder formbuilder.0.81.zip
Une fois le plugin installé, il faut aller dans la section Tools, ce qui est un peu déroutant au premier abord. Par contre une fois cette toute petite difficulté levée, le plugin est un vrai bonheur, entièrement configurable et de manière extrêmement simple et intuitive. Enfin, il existe une superbe interface pour exporter les informations collectées au format .csv
Accès aux paramètres de configuration de formbuilder.0.81.zip dans l’onglet Tools
Un tableau de bord complet pour configurer formbuilder.0.81.zip
Chacun de vos formulaires a un petit nom…
Méthode d’insertion du formulaire nommé mon_form_1
FormBuilder insère un espace spécifique dans chacune de vos pages ou articles pour vous permettre de faire appel au formulaire voulu, ici dans notre exemple mon_form_1
Le mail qui parvient au destinataire du formulaire mon_form_1
Les excellentes fonctionnalités d’export au format .csv de FormBuilder
Extrait du form.csv
"Result ID","Form ID","Timestamp","FormSubject","FormRecipient","Field Values"
00000000000000000002,00000000000000000001,"September 2, 2009, 5:10 pm","FormSubject: Contact","FormRecipient: info@hecube.net","Nom: mon-nom","Prnom: mon-prenom","email: user1@hecube.com","Rgion: ma-région","profession: ma-pofession","commentaires: mon commentaire mon commentaire mon commentaire","Page: http://127.0.0.1/wordpress_2_7/site/contact/","Referrer: http://127.0.0.1/wordpress_2_7/site/"
00000000000000000001,00000000000000000001,"September 4, 2009, 3:53 pm","FormSubject: Contact","FormRecipient: info@hecube.net","Nom: hecube","Prnom: user2","email: user2@hecube.net","Rgion: region","profession: profession","commentaires: hello","Page: http://127.0.0.1/wordpress_2_7/site/contact/","Referrer: http://127.0.0.1/wordpress_2_7/site/contact/"
2. Le plugin de formulaire cformsII cforms.11.0.zip
L’un des plus complets, ce plugin vous permet même de créer 2 tables pour enregistrer les adresses email saisies dans votre formulaire. Il vous propose une espèce de menu flottant de configuration qui est assez agaçant, qui tient plus du gadget mais qui peut avoir ses inconditionnels. Enfin, étant donné son caractère exhaustif, il y a une phase fastidieuse de configuration de ce plugin. A déconseiller à des débutants.
<!--cforms name="form_contact_10"-->
Installation du plugin cforms.11.0.zip
Le panneau de configuration du plugin cforms.11.0.zip
Le widget de configuration du plugin cforms.11.0.zip déplié à droite de l’écran
3. Le plugin de formulaire code>Fast and Secure Contact Form
Beaucoup de paramètres avec notamment une gestion assez avancée du captcha qui prémunie le formulaire du spam qui assaille généralement les formulaires comme les commentaires d’ailleurs.
Réglages du captcha
NB : Pour information, un article de ce blog sur une sélection de plugins anti-spam pour les commentaires http://social.hecube.net/blog/2009/05/06/wordpress-une-selection-de-plugin-anti-spam-pour-les-commentaires/
4. Le plugin de formulaire WP-Lightform wp-lightform.0.4.zip
La copie conforme du précédent. Basique et simple à implémenter. Le rendu html du plugin est plus soigné que le plugin suivant.
Balise pour l’insertion dans une page
Le résultat de l’insertion du code de wp-lightform.0.4.zip sur la page Contact
5. Le plugin de formulaire Easy Contact easy-contact.0.1.2.zip
Ce plugin est super basique. Pratiquement rien n’est configurable ou si peu du meme coup très facile à mettre en place.
La mise en place est toujours la même, il faut insérer du pseudo code, souvent entre parenthèse [....] pour afficher le formulaire.
Balise pour l’insertion dans une page
L’insertion du code pour activer le formulaire de easy-contact.0.1.2.zip sur une page nommée Contact
Le résultat de l’insertion du code de easy-contact.0.1.2.zip sur la page Contact
Pour aller plus loin
Contact, Formulaire, PHP, plugin, Wordpress
29 septembre 2009 dans CMS, Création de site web, Divers, Iphone, mobile, Joomla, Virtuemart, PHP, MYSQL, Tutoriaux, XHTML CSS par Bruno Flaven
L’objectif de cet article est de publier une version mobile d’un site administré sous le CMS Joomla. Or, le moins que l’on puisse dire ce que cela n’a pas été une réussite, disons-le même plus un raté.
Nous allons faire une première tentative avec la combinaison de deux éléments :
- Un template au format PDA
- Un
mambot susceptible de faire la conversion de votre site au format PDA
La deuxième tentative via un plugin du nom de Joomla Mobile Plugin,qui permet la mise à disposition d’une version mobile d’un site sous Joomla.
On travaille sur la Version 1.5.10 de Joomla (Joomla_1.5.10-Stable-Full_Package-French.zip) dans laquelle les plugins système sont activés notamment le plugin System - Legacy, indispensable dans l’activation de nombreux plugins car il permet l’interopérabilité avec des plugins disponibles pour des versions antérieures de Joomla.
Il est à noter que cette conversion ne permet d’afficher qu’une petite partie du contenu disponible sur votre page d’accueil géré par Joomla. Pour faciliter l’accès à cette version mobile, il est conseillé d’utiliser un sous-domaine pour populariser cette version pour PDA.
Une nécessité : créer un sous-domaine
Créer un cname sur votre nom de domaine principale est plus qu’une recommandation, c’est une nécessité. Les anglophones qui sont toujours très pragmatiques proposent ni plus ni moins un CNAME du type m.hecube.net sur un domaine comme hecube.net
Source : http://joomup.com/blog/2007/06/08/the-pda-version-of-a-site-as-a-subdomain/
C’est un développeur russe, Denis Ryabov, qui s’est attaqué au problème de mise à disposition du contenu Joomla pour mobile.
Autant le dire tout de suite, convertir son site au format mobile à l’aide de plugin, de mambot ou tous les autres artefacts à votre disposition pour joomla est un ECHEC ! Il es en effet difficile de mettre en place un site en version mobile et de connaître notamment les plus grandes difficultés pour le visionner. En effet, sur le web, on ne croit que ce que l’on voit ! En dépit de sa popularité et de son extraordinaire vitalité et simplicité, Joomla ne parvient pas à rendre cette conversion aiséé
Installer Joomla 1.5
Pour ceux qui souhaitent installer Joomla, il est préférable de se reporter à l’article ci-dessous :
Joomla est un excellent CMS pourvu d’une grande quantité d’extensions qui étendent de manière incroyable ces capacités toutefois il semble que la simplicité est la première victime lorsque qu’il s’agit de passer la version sous mobile.
Une piqûre de rappel
Les principales commandes SQL pour créer la BDD qui va réceptionner le Joomla 1.5
/Applications/MAMP/Library/bin/mysql -u root -p
CREATE USER 'joomla_1_5'@'localhost' IDENTIFIED BY 'joomla_1_5';
GRANT USAGE ON *.* TO 'joomla_1_5'@'localhost' IDENTIFIED BY 'joomla_1_5'
WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0
MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0;
CREATE DATABASE IF NOT EXISTS joomla_1_5;
GRANT ALL PRIVILEGES ON joomla_1_5.* TO 'joomla_1_5'@'localhost';
Activation du plugin System - Legacy pour faire tourner les éléments sous Joomla 1.5
C’est un pré requis à tout ce qui va suivre et en général une bonne règle à suivre pour le maintien de Joomla.
Les templates mobile pour Joomla 1.5
Ils ont peu nombreux et pour l’un des deux, il est payant :
La procédure à suivre pour convertir son site Joomla 1.5 en site pour mobile
Dans l’admin
Installer les éléments
1. Installer le template PDA pda-template-2.1.2.zip
Une fois le template format PDA installé, n’allez pas l’activer, sinon vous risquez de ne plus voir votre site. Car, jusqu’à présent, vous vous connectez encore à votre site encore via un navigateur et non via votre mobile.
Activation
Voici le message d’erreur si le template PDA devient votre template par défaut.
Inconsistency between versions of pda-mambot and pda-template.
Activation du mambot pda-bot-2.1.2.zip
Publication du mambot pda-bot-2.1.2.zip
2. Installer le Mambot PDA pda-bot-2.1.2.zip
Au terme de l’installation, il vous sera demander d’exécuter une opération. Il s’agit de lancer un fichier nommé installpatch.php or l’URL diffère grandement si on se réfère à la position exacte du fichier dans la distribution Joomla en local sur MAMP alors que se passera-t-il sur votre serveur ?
- URL donné par le lien
http://127.0.0.1/mambots/system/pda/installpatch.php
- URL donné si on se fit à sa position effective
http://127.0.0.1/joomla_1_5/Joomla_1_5_10/plugins/system/pda/installpatch.php
Recommandations après l’installation
PDA-mambot
This mambot changes template to PDA-version.
Do not forget to publish a mambot “PDA-mambot”.
Note: for using subdomain you need to apply patch for joomla cache [restore original]
Development of a mambot: © 2007 Denis Ryabov, Interesting about Joomla! CMS.
Always check for last version at http://physicist.phpnet.us/
Conclusion : A première vue, Convertir son site au format mobile NE MARCHE PAS SUR UN JOOMLA 1.5 via la procédure qui vient d’être décrite. Bien que le système legacy ait été activé ! Plusieurs raisons possible : nous sommes partis d’une version française et non de la version native en anglais, le code n’est sans dout pas suffisamment mis à jour par rapport aux dernières évolutions de Joomla.
3. Installer le 3_pdasubdomain.zip
Est-ce bien nécessaire ?
Joomla Mobile Plugin mobile_friendly_v091a.zip
Une solution de replie, pas franchement ! Cela ne marche pas non plus ! En dépit de l’édition de wurfl_config.phpet d’une lecture attentive de setup_guide_for_v091.pdf. Rien n’y fait !
Conclusion : Avec un peu de persévérance, il est possible de faire fonctionner ce plugin mais il faudra surtout bien vous assurer que votre template Joomla est bien PDA compatible.
Quelques liens sur la question Joomla pour mobile
18 septembre 2009 dans CMS, Création de site web, Divers, Google, Référencement, SEO, Wordpress par Bruno Flaven
Il a déjà beaucoup été question sur ce blog de sitemap et de référencement ainsi que de Wordpress. On se devait donc d’évoquer le plugin qui permettrait le rapprochement des deux. En clair, répondre à la question « quel plugin choisir pour faciliter la création de sitemap en vue d'optimiser son référencement ? » C’est maintenant chose faite à l’aide de cet article !
Pour en savoir plus sur la teneur et l’utilité du sitemap, vous pouvez consulter les quelques articles consacrés à la question sur ce blog.
Pour en savoir plus sur le sitemap et ses usages
1. Le plugin wordpress Google XML Sitemaps
Pour ce plugin il n’ y a rien à redire, c’est meilleur de tous si vous possédez un blog wordpress et que vous souhaitez contrôler la création de manière effective votre fichier sitemap.xml.
Définir le contenu du sitemap
Définir les fréquences et les priorités parmi les pages de votre site
Le code produit par le plugin…
Le plugin produit en racine de votre site un fichier sitemap.xml et un autre fichier sitemap.xml.gz qui serait utile si vous souhaitiez utiliser les fonctionnalités avancés du sitemap.Pour plus d’infos, vous pouvez vous reportez à l’article Créer un sitemap avancé pour Google
<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="http://127.0.0.1/wordpress_2_7/site/wp-content/plugins/google-sitemap-generator/sitemap.xsl"?><!-- generator="wordpress/2.8.4" --><!-- sitemap-generator-url="http://www.arnebrachhold.de" sitemap-generator-version="3.1.6" --><!-- generated-on="September 11, 2009 11:26 am" --><!-- Debug: Total comment count: 4 --><urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url>
<loc>http://127.0.0.1/wordpress_2_7/site/</loc>
<lastmod>2009-09-02T03:18:40+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<!-- Debug: Start Postings --><!-- Debug: Priority report of postID 26: Comments: 0 of 4 = 0 points --> <url>
<loc>http://127.0.0.1/wordpress_2_7/site/2009/08/11/framework-dilemma/</loc>
<lastmod>2009-09-02T03:18:40+00:00</lastmod>
<changefreq>monthly</changefreq>
<priority>0.2</priority>
</url>
<!-- Debug: Priority report of postID 21: Comments: 4 of 4 = 1 points --> <url>
<loc>http://127.0.0.1/wordpress_2_7/site/2009/02/25/howdy-howdy-speaker/</loc>
<lastmod>2009-02-25T13:09:28+00:00</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
<!-- Debug: Priority report of postID 19: Comments: 0 of 4 = 0 points --> <url>
<loc>http://127.0.0.1/wordpress_2_7/site/2009/02/06/again-a-post-in-sex/</loc>
<lastmod>2009-02-06T20:43:36+00:00</lastmod>
<changefreq>monthly</changefreq>
<priority>0.2</priority>
</url>
<!-- to be continued -->
</url>
<!-- Debug: End Postings --><!-- Debug: Start Custom Pages --><!-- Debug: End Custom Pages --><!-- Debug: Start additional URLs --><!-- Debug: End additional URLs --></urlset>
1.1 Le plugin wordpress Google Sitemaps - Append UTW Tags
Un mauvais point, il semble que la version de ce plugin qui requiert l’installation du plugin précédent, n’est plus supportée pour une version supérieure à Wordpress 2.3+. Sachant que Wordpress est désormais à une version 2.8.4 à l’heure où cet article s’écrit.
2. Le plugin wordpress Karailiev's sitemap
Un plugin sobre et efficace, sans chichi qui fait ce qu’on lui demande de faire. A recommander pour un débutant ou quelqu’un qui ne souhaite pas se prendre la tête avec le sitemap, qui somme toute n’est pas si primordiale en terme de référence. La règle pour une référencement adéquat est plutôt :
- Une forme d’URL explicite basé sur le titre de l’article
- La balise <title> </title> identique au titre de l’article
- Une seule balise <h1> </h1> identique au titre de l’article
Une liste réduite de paramètres pour le plugin Karailiev's sitemap
Un exemple de code produit par le plugin Karailiev's sitemap
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<!-- Generated by Karailiev's sitemap 0.7.1 plugin -->
<!-- http://www.karailiev.net/karailievs-sitemap/ -->
<!-- Created September 11, 2009, 12:29-->
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/</loc>
<lastmod>2009-09-18T22:29:10Z</lastmod>
<changefreq>weekly</changefreq>
<priority>1</priority>
</url>
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/2009/08/11/framework-dilemma/</loc>
<lastmod>2009-08-11T09:10:18Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/2009/02/06/blogging-does-mean-no-sex/</loc>
<lastmod>2009-02-06T20:42:31Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/2009/02/06/baby-you-are-a-star-the-return/</loc>
<lastmod>2009-02-06T20:35:39Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/2009/02/06/baby-you-are-star/</loc>
<lastmod>2009-02-06T20:34:32Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/2009/02/06/domain-name-with-numbers/</loc>
<lastmod>2009-02-06T20:32:52Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/2009/02/06/again-i-want-to-post-and-be-part-of-the-web/</loc>
<lastmod>2009-02-06T18:55:56Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/2009/02/06/one-more-post/</loc>
<lastmod>2009-02-06T20:28:11Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.3</priority>
</url>
<!-- to be continued -->
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/tag/www/</loc>
<changefreq>weekly</changefreq>
<priority>0.1</priority>
</url>
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/tag/webdesign/</loc>
<changefreq>weekly</changefreq>
<priority>0.1</priority>
</url>
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/tag/calligraphy/</loc>
<changefreq>weekly</changefreq>
<priority>0.1</priority>
</url>
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/tag/cinema/</loc>
<changefreq>weekly</changefreq>
<priority>0.1</priority>
</url>
<url>
<loc>http://127.0.0.1/wordpress_2_7/site/category/sex/</loc>
<changefreq>weekly</changefreq>
<priority>0.1</priority>
</url>
</urlset>
3. Le plugin wordpress Standard XML Sitemaps
Ce plugin conçu par Patrick Chia est assez déroutant, il ne crée pas physiquement de fichier sitemap.xml. Il se crée que sur demande lorsque les crawlers viennent visiter votre site. C’est assez décevant car vous ne contrôlez pas ou presque les critères de paramétrage de votre sitemap. Pour connaitre des informations supplementaires sur les critéres tel que vous piuvez les voir ci-dessous.
<loc>http://social.hecube.net/</loc>
<lastmod>2009-04-11</lastmod>
<changefreq>hourly</changefreq>
Un point positif, apparemment le plugin est compatible avec WPMU. Toutefois, dans le readme.txt, il y a une erreur sur le mise à disposition des fichiers.
Extrait du readme.txt contenant une erreur pour l’installation
Le fichier feed-sitemap.php va dans le répertoire wp-includes et le fichier xml-sitemap.php va dans le répertoire wp-content/ plugins/
= Wordpress User =
1. Upload ‘xml-sitemap.php’ to the ‘/wp-content/plugins/’ directory
2. Upload ‘feed-sitemap.php’ to the ‘/wp-content/includes/’ directory
3. check your sitemap url like http://yourblogurl.com/sitemap.xml
Le plugin wordpress Dagon Design Sitemap Generator
Ce plugin Dagon Design est un complément indispensable à un site sous Wordpress. Dagon design est d’ailleurs une référence en matière de plugins Wordpress. Il ne s’agit pas à proprement parler de générer un sitemap en xml mais de générer un cartographie de votre blog et par exemple dans la page d’erreur 404.php, un grand classique. C’est un peu la partie émergée du sitemap.xml à destination de votre visiteur et non des crawlers.
Les paramètres de l’administration de Dagon Design Sitemap Generator
Le rendu sur la page 404 de Dagon Design Sitemap Generator
La ligne php à insérer et générer les liens de votre site sur votre page d’erreur 404 (404.php)
<div id="content" class="narrowcolumn">
<h2 class="center">Error 404 - Not Found</h2>
<?php echo ddsg_create_sitemap(); ?>
</div>
Pour aller plus loin
Google, plugin, sitemap, Wordpress, xml
16 septembre 2009 dans Divers par Bruno Flaven
Il parait que l’Internet est le règne du copier-coller, du plagiat et du détournement sans souci pour le droit d’auteur, c’est sans doute la vérité mais qui se soucie encore de ce combat d’arrière-garde comme un personnage de La Cerisaie. On va donc aborder dans cet article, la capacité à l’aide de virtualdub de placer de manière automatique et en masse un bug antenne comme on dit dans le jargon. Logo qui assure au moins pour quelque temps encore l’appartenance d’une œuvre à une filiation d’auteurs et de productions. Bon assez, tergiversez, rentrons dans la vif du sujet.
Pour des raisons de popularité, on est sous windows, PC et toutes les manipulations vont se faire via ms-dos, VirtualDub* et DubMan - The VirtualDub Manager
* Il existe deux versions de VirtualDub, une distribution qui lit le MPEG1 et une autre qui lit le MPEG1 et le MPEG2
Utiliser VirtualDub
Il vous faut télécharger l’application VirtualDub. Une fois installée, pour des raisons de commodité, il faut mieux changer le chemin d’accès vers cette application. Pour cela, il suffit de se reporter à l’article suivant :
Une fois VirtualDub installé et la modification de path faite, vous êtes alors en mesure de faire tourner ce .bat, ci-dessous, qui permettra de signer vos vidéos d’un watermark.
Quelques écrans de virtualdub
Le fichier VCF
Le code source du fichier all_cut_film_bug_320x240.vcf. Ce fichier définit l’ensemble des proprités des futurs vidéos : taille 320×240, logo bug ou bug antenne sans alpha situé en haut à droite… etc. Ce fichier est appelé dans notre script le script code_all_cut_execute_code_320x240.bat à la ligne set vcf_file_1="C:\2_movie_source\all_cut_film_bug_320x240.vcf".
Pour l’insertion de ce logo, c’est un filtre VirtualDub qui ajoute VirtualDub.video.filters.instance[1].Config(”C:\2_movie_source\\watermarks\\mon_logo.jpg”, -30, 16, 0, 0, 2, 0, 65536); notamment un logo nommé mon_logo.jpg en plus de redimensionner la vidéo au format 320×240.
NB : L’adresse vers le logo qui “watermark” les vidéos est donné comme souvent sous Windows, truffé de antislash, couplé avec un antislash pour éviter le pire.
VirtualDub.audio.SetSource(1);
VirtualDub.audio.SetMode(1);
VirtualDub.audio.SetInterleave(1,500,1,0,0);
VirtualDub.audio.SetClipMode(1,1);
VirtualDub.audio.SetConversion(0,0,0,0,0);
VirtualDub.audio.SetVolume();
VirtualDub.audio.SetCompressionWithHint(85,22050,1,0,4000,1,12,"AQACAAAAaAABAHEF","MPEG Layer-3 Codec ");
VirtualDub.audio.EnableFilterGraph(0);
VirtualDub.video.SetInputFormat(0);
VirtualDub.video.SetOutputFormat(7);
VirtualDub.video.SetMode(3);
VirtualDub.video.SetFrameRate(0,1);
VirtualDub.video.SetIVTC(0,0,-1,0);
VirtualDub.video.SetRange(0,0);
VirtualDub.video.SetCompression(0x31367076,0,10000,0);
VirtualDub.video.SetCompData(2056,"VlA2MQEAAADABgAAAAAAAAAAAAAsAQAAOAAAAAAAAAABAAAAaAEAAAAAAAABAAAAUAAAAAQAAABoAQAAAAAAAAAAAAAAAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAZ/P//BAAAAAAAAAAAAAAABAAAAAUAAAAUAAAAIwAAAC0AAAAeAAAAAAAAAAAAAAAAAAAAGfz//wQAAABaAAAAZAAAAAYAAAAZ/P//RgAAAJABAAAoAAAAGfz//wEAAAAAAAAAAAAAAAAAAABmaXJzdHBhc3MuZnBmAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQzpcV0lORE9XU1xzeXN0ZW0zMlxDMk1QXFZQNiBWRlcgQ29kZWMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
VirtualDub.video.filters.Clear();
VirtualDub.video.filters.Add("resize");
VirtualDub.video.filters.instance[0].Config(320,240,0);
VirtualDub.video.filters.Add("logo");
VirtualDub.video.filters.instance[1].Config("C:\2_movie_source\\watermarks\\mon_logo.jpg", -30, 16, 0, 0, 2, 0, 65536);
VirtualDub.audio.filters.Clear();
VirtualDub.subset.Clear();
VirtualDub.subset.AddRange(0,3910);
VirtualDub.project.ClearTextInfo();Le code du .bat qui inclut le .vcf
Le code source du fichier code_all_cut_execute_code_320x240.bat, les fichiers que l’on donne à “manger” à virtualdub sont au format MPEG1, rien ne vous empêche si vous télécharger le virtualdub lisant le format MPEG2 de balancer du MPEG2.
@echo off
:: FUNCTIONS
set dd=%date:~0,2%
set mm=%date:~3,2%
set yyyy=%date:~6,4%
set hour=%time:~0,2%
set min=%time:~3,2%
set sec=%time:~6,2%
set mmsec=%time:~9,2%
:::::::::::::::::::::::::::::::::::::::::::::
:: code_all_cut_execute_code_320x240.bat ::
:: ::
:: convert and watermark with virtualdub ::
:: Made by hecube.net ::
:: === Use virtualdub application === ::
:: (c) Hecube.net ::
:::::::::::::::::::::::::::::::::::::::::::::
:: copyright
echo === BUGS THE VIDEOS ===
echo === Made by hecube (c) %yyyy% ===
echo === version 1.0 : %yyyy% : hecube.net ===
echo.
:: copyright
:: FUNCTIONS
title bug the videos
Color 0A
:: VALUES
:: ------------------ HERE DEFINE THE CORRECT PATH TO THE DIRECTORY OF VIDEO OUTPUT
set vcf_file_1="C:\2_movie_source\all_cut_film_bug_320x240.vcf"
set my_path_input=C:\2_movie_source\source_mpeg_1
set my_path_output=C:\2_movie_source\destination
:: PATH FOR FILES
cd %my_path_input%
:: FILENAME
echo.
echo = bug the videos =
echo.
:: ask for the filename
:op_input
echo ÉÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍ»
echo º º
echo º BUG, 320X240 º
echo º º
echo º º
echo º º
echo º º
echo ÈÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍͼ
echo.
set /P filename_extract="Do you want to BUG, 320X240 (y/n)? "
:: ############################################################# // PUT YOUR CODE HERE
rem VirtualDub /s "C:\2_movie_source\cut_film_03_good_vp6_advanced_profile_alpha_30_bug.vcf" /b "C:\2_movie_source\source_mpeg_1\","C:\2_movie_source\destination\" /r /x /c
:: TREATMENT for files - 320x240 and bug
FOR %%G IN (*.avi *.mpg *.mpeg *.mov) DO (
VirtualDub /s "%vcf_file_1%" /p "%%G","%my_path_output%\%%~nG_bug_320x240.avi" /r /x /c
echo %%G bugged to %%~nG_bug_320x240.avi
)
goto rend
:: ############################################################# // PUT YOUR CODE HERE
:: LEAVE VirtualDub
:rend
echo.
echo === CONGRATULATIONS - YOU MADE ALL ===
:end
ECHO.
ECHO = End of conversion =
ECHO = Push the space bar to exit =
pause>nul
Utiliser VirtualDub DubMan
On peut au lieu d’utiliser le pauvre mais efficace .bat situé au dessus, faire appel à un logiciel avec une vraie interface VirtualDub DubMan-0.83. Il permet de lancer une liste de dubman:jobs qui sont autant de traitement à effectuer par VirtualDub. Ce logiciel a été développé en java. Pour lancer VirtualDub DubMan, il faut cliquer DubMan.jar qui vient avec l’installation du logiciel.
Le fichier de Jobs pour VirtualDub DubMan all_resize_divX_audio_video_320x240_bug.djt
<?xml version="1.0" encoding="ISO-8859-1"?>
<dubman:template xmlns:dubman="http://dubman.sourceforge.net" name="" format="1.1" version="0.83">
<dubman:bulk />
<dubman:jobs>
<!--
Les fichiers source sont au format MPEG1
-->
<dubman:job>
<dubman:name value="movie_01" />
<dubman:input value="C:\2_movie_source\source_mpeg_1\movie_01.mpg" />
<dubman:output value="C:\2_movie_source\destination\movie_01_bug.avi" />
<dubman:deleteInput value="false" />
<dubman:script>
VirtualDub.audio.SetSource(1);
VirtualDub.audio.SetMode(1);
VirtualDub.audio.SetInterleave(1,500,1,0,0);
VirtualDub.audio.SetClipMode(1,1);
VirtualDub.audio.SetConversion(0,0,0,0,0);
VirtualDub.audio.SetVolume();
VirtualDub.audio.SetCompression();
VirtualDub.audio.EnableFilterGraph(0);
VirtualDub.video.SetInputFormat(0);
VirtualDub.video.SetOutputFormat(7);
VirtualDub.video.SetMode(3);
VirtualDub.video.SetFrameRate(0,1);
VirtualDub.video.SetIVTC(0,0,-1,0);
VirtualDub.video.SetCompression(0x78766964,0,10000,0);
VirtualDub.video.SetCompData(150,"LWJ2MSA2MDAwMDAgLXZidiA2MDAwMDAsNjU1MzYwLDQ5MTUyMCAtZGlyICJDOlxEb2N1bWVudHMgYW5kIFNldHRpbmdzXE5FQkZsYXZlblxBcHBsaWNhdGlvbiBEYXRhXERpdlhcRGl2WCBDb2RlYyIgLWIgMCAtbmYgLXByb2ZpbGU9MiAtdGhyZWFkX2RlbGF5PTEA");
VirtualDub.video.filters.Clear();
VirtualDub.video.filters.Add("resize");
VirtualDub.video.filters.instance[0].Config(320,240,0);
VirtualDub.video.filters.Add("logo");
VirtualDub.video.filters.instance[1].Config("C:\2_movie_source\\watermarks\\mon_logo.jpg", -30, 16, 0, 0, 2, 0, 65536);
VirtualDub.audio.filters.Clear();
</dubman:script>
<dubman:runWith value="0" />
</dubman:job>
<dubman:job>
<dubman:name value="movie_02" />
<dubman:input value="C:\2_movie_source\source_mpeg_1\movie_02.mpg" />
<dubman:output value="C:\2_movie_source\destination\movie_02_bug.avi" />
<dubman:deleteInput value="false" />
<dubman:script>
VirtualDub.audio.SetSource(1);
VirtualDub.audio.SetMode(1);
VirtualDub.audio.SetInterleave(1,500,1,0,0);
VirtualDub.audio.SetClipMode(1,1);
VirtualDub.audio.SetConversion(0,0,0,0,0);
VirtualDub.audio.SetVolume();
VirtualDub.audio.SetCompression();
VirtualDub.audio.EnableFilterGraph(0);
VirtualDub.video.SetInputFormat(0);
VirtualDub.video.SetOutputFormat(7);
VirtualDub.video.SetMode(3);
VirtualDub.video.SetFrameRate(0,1);
VirtualDub.video.SetIVTC(0,0,-1,0);
VirtualDub.video.SetCompression(0x78766964,0,10000,0);
VirtualDub.video.SetCompData(150,"LWJ2MSA2MDAwMDAgLXZidiA2MDAwMDAsNjU1MzYwLDQ5MTUyMCAtZGlyICJDOlxEb2N1bWVudHMgYW5kIFNldHRpbmdzXE5FQkZsYXZlblxBcHBsaWNhdGlvbiBEYXRhXERpdlhcRGl2WCBDb2RlYyIgLWIgMCAtbmYgLXByb2ZpbGU9MiAtdGhyZWFkX2RlbGF5PTEA");
VirtualDub.video.filters.Clear();
VirtualDub.video.filters.Add("resize");
VirtualDub.video.filters.instance[0].Config(320,240,0);
VirtualDub.video.filters.Add("logo");
VirtualDub.video.filters.instance[1].Config("C:\2_movie_source\\watermarks\\mon_logo.jpg", -30, 16, 0, 0, 2, 0, 65536);
VirtualDub.audio.filters.Clear();
</dubman:script>
<dubman:runWith value="0" />
</dubman:job>
<dubman:job>
<dubman:name value="movie_03" />
<dubman:input value="C:\2_movie_source\source_mpeg_1\movie_03.mpg" />
<dubman:output value="C:\2_movie_source\destination\movie_03_bug.avi" />
<dubman:deleteInput value="false" />
<dubman:script>
VirtualDub.audio.SetSource(1);
VirtualDub.audio.SetMode(1);
VirtualDub.audio.SetInterleave(1,500,1,0,0);
VirtualDub.audio.SetClipMode(1,1);
VirtualDub.audio.SetConversion(0,0,0,0,0);
VirtualDub.audio.SetVolume();
VirtualDub.audio.SetCompression();
VirtualDub.audio.EnableFilterGraph(0);
VirtualDub.video.SetInputFormat(0);
VirtualDub.video.SetOutputFormat(7);
VirtualDub.video.SetMode(3);
VirtualDub.video.SetFrameRate(0,1);
VirtualDub.video.SetIVTC(0,0,-1,0);
VirtualDub.video.SetCompression(0x78766964,0,10000,0);
VirtualDub.video.SetCompData(150,"LWJ2MSA2MDAwMDAgLXZidiA2MDAwMDAsNjU1MzYwLDQ5MTUyMCAtZGlyICJDOlxEb2N1bWVudHMgYW5kIFNldHRpbmdzXE5FQkZsYXZlblxBcHBsaWNhdGlvbiBEYXRhXERpdlhcRGl2WCBDb2RlYyIgLWIgMCAtbmYgLXByb2ZpbGU9MiAtdGhyZWFkX2RlbGF5PTEA");
VirtualDub.video.filters.Clear();
VirtualDub.video.filters.Add("resize");
VirtualDub.video.filters.instance[0].Config(320,240,0);
VirtualDub.video.filters.Add("logo");
VirtualDub.video.filters.instance[1].Config("C:\2_movie_source\\watermarks\\mon_logo.jpg", -30, 16, 0, 0, 2, 0, 65536);
VirtualDub.audio.filters.Clear();
</dubman:script>
<dubman:runWith value="0" />
</dubman:job>
<!-- to be continued -->
<!-- pour dupliquer le job faire un copier-coller de <dubman:job>...</dubman:job> inclus -->
</dubman:jobs>
</dubman:template>Le fichier de Jobs pour VirtualDub DubMan
Pour insérer le fichier all_resize_divX_audio_video_320x240_bug.djt, il suffit de le sélectionner le fichier via File > Open.
Une fois le fichier all_resize_divX_audio_video_320x240_bug.djt chargé, il faut cliquer sur le bouton Run Jobs File
Pour aller plus loin
alpha, bug antenne, filtres, mpeg, MS-DOS, vidéos, VirtualDub, Watermark
9 septembre 2009 dans Divers, Flash, Actionscript, Flex, Flex, Google, PHP, MYSQL, Réseaux sociaux, Statistiques et Tracking, Tutoriaux, Wordpress par Bruno Flaven
Il s’agit de cartographier les membres d’un réseau social géré sous BuddyPress à l’aide de Flex et de la Google Map API. Voilà enfin une affaire sérieuse dont il va être question… En effet, tracer, localiser… (Espionner ?) Les personnes à l’aide de l ‘API Google Maps ! Bref superposer la réalité virtuelle à une réalité physique (forcément plus décevante !) mais les faits sont têtus a dit Lénine, on ne peut donc d’un manière ou d’une autre échapper à notre condition de bipédie et de sédentarité quoiqu’en dise les chantres de la mobilité. Comme la chèvre, on laisse toujours des petites crottes derrière soi fussent-elles numériques !
Dans cet article, on va donc voir comment se servir de l’API Google Maps, l’interfacer avec une application Flex puis creuser le filon afin de trouver une piste pour brancher le tout sur un réseau social géré sous BuddyPress en s’appuyant sur le champs base du profil de l’utilisateur.
NDLR : Un propos qui n’engage que son auteur, la sédentarité n’est-t-elle à l’origine de la culture (cf les bibliothèques) alors que la mobilité physique et moderne (je ne parle pas de l’errance tsigane ou des bushmen, je pense plutôt aux migrants chinois de WebDocumenaire de Samuel Bollendorff Cf http://www.lemonde.fr/asie-pacifique/visuel/2008/11/17/voyage-au-bout-du-charbon_1118477_3216.html ou au monde des excités de la mobilité, décrit par Pico Iyer dans The Global Soul: Jet Lag, Shopping Malls, and the Search for Home, qui date un peu désormais). Cette mobilité, c’est bien la barbarie de l’instant présent :):)
Préparer son plan google….
Obtenir une API KEY pour Google Maps
Vous devez vous rendre sur l’url principal de l’API Google http://code.google.com/intl/fr/apis/maps/. Il vous suffit de donner d’ennregistrer un nom de domaine pour obtenir une clé pur faire fonctionner l’API google sur le site de votre choix. Dans notre exemple, voici la clé ABQIAAAAbr0JY20cqFgvd3EtzjX8xRTp0ByTiBsAuE4XVoEALBVYr6OMDRQpc_PC6mtqjHFWwOLDbePFpwWjAg pour API key for
hemedia.net subscribed at info@hecube.net
`
Thank You for Signing Up for a Google Maps API Key!
Your key is:
ABQIAAAAbr0JY20cqFgvd3EtzjX8xRTp0ByTiBsAuE4XVoEALBVYr6OMDRQpc
_PC6mtqjHFWwOLDbePFpwWjAg
This key is good for all URLs consisting of this registered domain (and directory if applicable):
http://hemedia.net/
La clé API a été “scindé” afin de pouvoir tenir dans notre article.
Télécharger le fichier map_flex_1_16.swc
Il faut télécharger le “couteau suisse” donnée par google pour intégrer l’API Google Map dans Flex. http://maps.googleapis.com/maps/flash/release/sdk.zip
Ce fichier va permettre de faire appel au sein de Flex aux propriétés de l’API Google
Connaître les coordonnées géographiques d’un lieu (latitude et longitude)
Avant d’interfacer notre application Flex avec la BDD de données. Celle-ci doit contenir les coordonnées géographiques (latitude et longitude) d’un lieu mais il faut pouvoir déterminer ces coordonnées. Google mets à disposition via un formulaire, la possibilité
Le code source du fichier pour obtenir les coordonnées géographiques d’un lieu google_api_coord_hecube.html. On a placé quelques remarques en commentaires dans le code pour comprendre un peu mieux les éléments importants du code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Hecube.net _ Google Map - Trouver les coordonnées géographiques (latitude et longitude) d'un lieu</title>
<!-- La Google Maps API Key vient dans la balise script -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAbr0JY20cqFgvd3EtzjX8xRRi_j0U6kJrkFvY4-OX2XYmEAa76BQRTZkoVHkXJUpOizoXkhUFxW1L6Q" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var geocoder = null;
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) { alert(address + " not found"); }
else {
/* La valeur setCenter est apparament comprise entre 1 -> 23, ils'agit du zoom sur la carte */
map.setCenter(point, 16);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
/* G_HYBRID_MAP => photo ou G_HYBRID_TYPE => carte */
map.setMapType( G_HYBRID_MAP );
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.enableDoubleClickZoom();
document.getElementById("latLng").innerHTML="<p>Latitude and Longitude: <font color="red">" + point + "</font></p>"
}
}
);
}
}
function load() {
/* Lieu chargé par défaut lors du chargement de la page */
var address="Paris"
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
geocoder = new GClientGeocoder();
showAddress(address);
document.getElementById("address").value=address
// Trigger for moveend event
GEvent.addListener(
map, 'moveend',
function() {
// Display current map center
document.getElementById("latLng").innerHTML="<p>Latitude and Longitude: <font color="red">" + map.getCenter() + "</font></p>"
}
)
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>Pour trouver les coordonnées géographiques (latitude et longitude) d'un lieu, il vous suffit de taper le nom du lieu (ville, village...etc.)</p>
<p><i>Il peut exister quelques "ratés", en effet certains lieux peuvent ne pas être localisés !</i></p>
<p>
<input type="text" size="60" name="address" id="address" value="" />
<input type="submit" value="Go!" />
</p>
<div id="latLng"></div>
<div id="map" style="width: 800px; height: 480px"></div>
</form>
</body>
</html>La structure la BDD qui va stocker les coordonnées géographiques
Le fichier “dump” .sql pour la creation de la BDD qui va être interfacé avec notre application Flex via un fichier de génération de xml écrit en php
Nous travaillons en local à l’aide d’un serveur MAMP. Pour installer un environnement similaire reportez-vous aux articles suivants de ce blog :
Pour comprendre comment installer cet environnement PHP-MySQL, reportez-vous aux articles de ce blog :
La structure de la BDD flex_mapgoogle dans laquelle a été inséré quelques lieux.
--
-- Base de données: `flex_mapgoogle`
--
DROP TABLE IF EXISTS `maps`;
CREATE TABLE IF NOT EXISTS `maps` (
id int(11) NOT NULL AUTO_INCREMENT,
lat float,
lon float,
name varchar(255),
PRIMARY KEY (`id`),
FULLTEXT KEY `searching` (name)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;
--
-- Contenu de la table `movies_list_index`
--
-- Ville Latitude Longitude
-- Mendoza -32.890183 -68.8440498
-- Alice Springs -23.700358 133.880889
-- Pau 43.297521 -0.3743618
-- Plock 52.5463446 19.7065364
-- Medina 24.460899 39.62019
-- Courbevoie 48.8968248 2.2565154
-- Paris 48.8566667 2.3509871
INSERT INTO `maps` VALUES (0, -32.8902, -68.844, 'Mendoza');
INSERT INTO `maps` VALUES (0, -23.7004, 133.881, 'Alice Springs');
INSERT INTO `maps` VALUES (0, 43.2975, -0.374362, 'Pau');
INSERT INTO `maps` VALUES (0, 52.5463, 19.7065, 'Plock');
INSERT INTO `maps` VALUES (0, 24.4609, 39.6202, 'Medina');
INSERT INTO `maps` VALUES (0, 48.8968, 2.25652, 'Courbevoie');
INSERT INTO `maps` VALUES (0, 48.8567, 2.35099, 'Paris');
Le fichier map.php, source de données pour Flex
Le fichier map.php qui génère le fichier xml des lieux et de leurs coordonnées géographiques qui constituera la source de données pour notre application Flex. NB: l’indication du port n’est pas indispensable, cela fonctionne aussi avec mysql_connect("localhost", "root", "root");
mysql_connect("localhost:3306", "root", "root");
mysql_select_db("flex_mapgoogle");
$result = mysql_query("select * from maps");
echo ('');
/* la boucle des localisations */
while($row = mysql_fetch_assoc($result))
{
echo ('');
echo (''. $row["lat"].'');
echo (''. $row["lon"].'');
echo (''. $row["name"].'');
echo ('');
}
echo ('');NB : Attention les fichiers square_hecube.png et map.php doivent être attachés à votre projet sous Flex.
CONCLUSION : Nous avons tout l’environnement susceptible de faire fonctionner notre application Flex et surtout de l’interfacer à la BDD flex_mapgoogle
L’application Flex
Pour comprendre de manire plus détaillée comment adosser un projet Flex à une serveur local sous MAMP, reportez-vous à cet article de ce blog :
Une fois le map_flex_1_16.swc inséré dans le projet Flex, on accéde à tous les class de l’application Google Maps
Sans la clé API dument insérée dans le map_google.mxml
Avec la clé API dument insérée dans le map_google.mxml
Le code source du fichier map_google.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:maps="com.google.maps.*">
<mx:Script>
<![CDATA[
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.MapEvent;
/* On choisit le carré de hecube comme icône à placer sur les points de la carte */
[Embed(source="square_hecube.png")]
private var ak:Class;
private function onReady(e:MapEvent):void
{
/* On choisit Paris comme centre de notre carte */
/*
-- Paris
Latitude 48.8566667
Longitude 2.3509871
*/
map.setCenter(new LatLng(48.8566667, 2.3509871), 10, MapType.PHYSICAL_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new MapTypeControl());
service.send();
}
private function onResult(e:ResultEvent):void
{
var list:ArrayCollection = e.result.map.loc;
for(var i:int=0; i<list.length; i++)
{
var bm:Bitmap = new ak() as Bitmap;
var m:Marker = new Marker(new LatLng(list[i].lat, list[i].lon),
new MarkerOptions({tooltip:list[i].name, icon:bm, iconOffset:new Point(-59, -31)}));
map.addOverlay(m);
}
}
]]>
</mx:Script>
<!-- l'API Key vient ci-dessous -->
<mx:HTTPService id="service" url="map.php" result="onResult(event)"/>
<maps:Map width="100%" height="100%" id="map" mapevent_mapready="onReady(event)"
key="ABQIAAAAbr0JY20cqFgvd3EtzjX8xRTp0ByTiBsAuE4XVoEALBVYr6OMDRQpc_PC6mtqjHFWwOLDbePFpwWjAg"/>
</mx:Application>L’icône pour matérialiser un point sur une carte Google
Faute d’imagination, on choisit le carré symbole de Hecube :):)
L’exportation de notre projet Flex map_google.mxml avec sa vue par défaut et la clé API
Grosso modo, l’essentiel de cette vue est déterminée par la ligne suivante map.setCenter(new LatLng(48.8566667, 2.3509871), 10, MapType.PHYSICAL_MAP_TYPE);
A l’aide de la fonction de zoom arrière, on découvre les autres lieux
Les deux premiers insertions INSERT INTO `maps` VALUES (0, -32.8902, -68.844, 'Mendoza');, INSERT INTO `maps` VALUES (0, -23.7004, 133.881, 'Alice Springs'); snt respectivement en Argentine et en Australie.
Dans BuddyPress
On va montrer où se trouve pour le moment les principaux éléments pour interfacer cette application Flex ci-dessus et notre reseau sous BuddyPress.
Qui joue en base ? Le numéro 14
Le field_id numéro 14 correspond au champs base. Ce dernier est défini dans le profile de chaque utilisateur.
Le champs base dans a processus d’inscription de BuddyPress
Il n’y a aucune routine qui permette par défaut de s’assurer d’une part que ce champ soit rempli et d’autre part compléter de manière adéquate pour l’utilisation de Google Map sans parler même de l’obtention des valeurs longitude et latitude.
<div class="signup-field">
<label for="field_14" class="signup-label">* Localisation géographique:</label>
<input type="text" value="Paris" id="field_14" name="field_14"/>
<span class="signup-description"> </span>
</div>
Trouver la table contenant ce champs et la requête SQL adéquate
Voici la tructure la table qui rensiegne le champs base ainsi que la requête qui permet de sélectionner les valeurs remplies par les inscrits à votre réseau.
CREATE TABLE IF NOT EXISTS wp_bp_xprofile_data (
id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT,
field_id bigint(20) UNSIGNED NOT NULL,
user_id bigint(20) UNSIGNED NOT NULL,
value longtext NOT NULL,
last_updated datetime NOT NULL,
PRIMARY KEY (id),
KEY field_id (field_id),
KEY user_id (user_id)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=0 ;
La requête SQL qui permet de sortir les localisations des membres du réseau
Pour des raisons de commodité et éviter de publier l’intégralité des localisation des membres, nous avons réduit à 20, le résultat de la requête. Bien sur pour générer une liste intégrale, il ne reste qu’à retirer la partie LIMIT 0,20
SELECT value FROM wp_bp_xprofile_data WHERE field_id='14' LIMIT 0,20;
Le résultat de la requête ci-dessus donne les éléments saisis dans le champs base
On reconnait le caractère protéiformes des données saisies, il faut donc indiquer quelques recommandation aux futurs membres du réseau sur comment remplir ce champs base. C'est indispensable pour effectuer la jointure avec les coordonnées géographiques d'un lieu (latitude et longitude).
Quelques règles pratiques de saisie du lieu de localisation
- Bannir les doubles localisations
Bourgogne/Ile de France, Google Map va vous envoyer à “Pétaouchnock”
- Bannir les localisations avec un début de code postale ou d’arrondissement
paris 20, Google Map va vous envoyer à “Pétaouchnock”. Le format normalisé Saint Egrève (38) convient par contre à Google
- Google Map reconnait néanmoins certaines abréviations type BCN (pour Barcelone) ou BXL (pour Bruxelles) ou BLN (pour Berlin). Ce qui est d’un usage courant sur le courrier postal.
Une fois ces règles de saisie établies, vous pourrez alors étendre les champs de saisie du champs base avec deux champs supplémentaires lat pour Latitude et long pour Longitude afin que l’utilisateur saisisse lui-même sa localisation et les coordonnées géographiques qui lui sont attachées
Sans nous étendre sur le comment, l’idée est de modifier le processus d’inscription de sorte que lors de l’inscription à BP, l’enregistrement se fasse simultanément dans cette table wp_bp_xprofile_data et maps. la table pourrait être ajoutée à la BDD de votre réseau social sous BP, il n’est pas nécessaire de créer une BDD ad hoc. Il faut aussi éviter de « tordre » une table existante de BP en rajoutant les champs lat et long directement dans la table wp_bp_xprofile_data.
Pétaouchnock inconnu au bataillon
+-------------------------+
| value |
+-------------------------+
| new-york |
| Paris |
| Paris |
| paris 20 |
| Paris |
| Saint Egrève (38) |
| Montpellier |
| Paris |
| Bourgogne/Ile de France |
| london |
| Olympus |
| casablanca |
| rouen |
| Gonesse (95) |
| Madrid |
| Paris |
| BCN |
| Toulouse |
| Toulouse |
| Kaboul |
+-------------------------+
CONCLUSION : Là encore, voici les pièces disparates mais indispensables pour monter la cartographie dans Google API via Flex des membres de votre réseau social. On a défini rapidement les principes fonctionnels et les bonnes directions dans lesquelles chercher. Dans un futur article, on verra comment mettre en musique l’ensemble et le mettre de manière opérationnelle en ligne au sein de BuddyPress sous forme de plugin, qui sait ?
Pour aller plus loin
A cet égard, un autre titre de PI, "The Lady and the Monk", un des titres de Pico Iyer, qui semble faire clairement référence pour des raisons de succès éditorial au titre "The monk and the philosopher" de Matthieu Ricard (fils) et Jean-François Revel (père), vous savez sur l’air de la chanson "Father and son" !
actionscript, Buddyress, Flex, Google, MySQL, PHP, Wordpress
4 septembre 2009 dans CMS, Création de site web, Divers, PHP, MYSQL, Référencement, SEO, Wordpress par Bruno Flaven
La gestion multilingue dans l’écosystème Wordpress, voilà une bonne question car finalement vous pouvez utiliser Wordpress comme machine de guerre en terme de communication et de référencement à l’échelle planétaire si tant est que vous êtes en mesure de poster dans différentes langues et de vous écrier “Aujourd’hui, la France, demain le monde !”
Les enjeux d’une traduction
Il faut plutôt faire attention lorsque vous allez traduire vos articles de ne pas perdre tout le bénéfice SEO (Search en gine Optimization) propre au CMS Wordpress. Généralement lorsque on entreprend une traduction, il faut se fixer l’objectif de tout traduire ! Cela peut sembler une affirmation paradoxale mais par exemple les plugins auront tout les peines du monde à gérer un article qui n’existe que dans une langue.
Imaginons, que vous avez 3 langues : anglais (en), espagnol (es) et français (fr), qui est dans notre exemple la langue par défaut. Si un article n’existe que dans une langue par défaut, à savoir en français, des éléments risquent tout de même de s’afficher dans les autres versions anglais (en), espagnol (es) en témoigne les captures d’écran pour un des plugins que nous avons sélectionné mlanguage.
Plugin or not plugin ?
On peut toujours envisager des solutions plus radicales en matière de traduction, notamment pour permettre une plus grande autonomie et souplesse des versions de votre blog entre elles. En effet, vous pouvez souhaiter ne pas publier les mêmes articles 3 fois de suite dans 3 langues différentes (fr, en, es). Tout en conservant Wordpress, deux possibilités s’offrent à vous, certes plus complexe à mettre en place et qui suppose surtout un bon contrôle de votre nom de domaine et de votre espace d’hébergement.
- La solution la plus radicale : gérer les langues par sous-domaine et créer un nouveau vhost sur votre serveur pour héberger à chaque fois un wordpress complet.
- La solution la plus maline : utiliser Wordpress Mu et créer là aussi un blog par langue mais en faisant du blog par défaut celui de votre langue par défaut. C’est cette solution que l’on aborde en toute fin de cette article.
Mais revenons à un blog et aux plugins de traduction pour le moment !
Pour le test des plugins, on va tester les plugins de traduction sur une plate-forme local avec Wordpress version Version 2.8.4, voici par ordre de préférence notre choix..
Bien évidemment, tous ces plugins s’installent via le manager de plugins avec upload du fichier .zip et activation dans la foulée, c’est le premier pre-requis. Il n’en va pas de même pour l’utilisation !
1. Le plugin zdmultilang
Le meilleur plugin de traduction à notre avis, outre le fait qu’il soit le fait d’Anthony PETITBOIS de www.zen-dreams.com de Vancouver ! Un gage de qualité “no doubt” !
Simple, ergonomique, pas usine à gaz pour deux sous… Un plugin qui vous permet de traduire vos articles, catégories, liens, tags.... De très loin le meilleur plugin pour la traduction d’un blog qui se révèle vite ardue et ingérable.
Les propriétés du plugin
Ajouter une langue
Do you speak “en” ?
Liens avec drapeau qui permettent de remplir les champs
Les liens pour accéder à la traduction de votre contenu
2. Le plugin mlanguage
Ce plugin, fait par un autrichien, est basé sur le travail fait pour le plugin babel par un italien, jusqu’ici nous sommes bien dans un plugin de traduction digne de ce nom. Un peu complexe de comprendre les explication données sur le le site.
L’ajout d’une langue
Frontend - via un widget, l’accès aux liens de version
Dans le corps de l’article, il vous faut publier les texte dans la différentes langues, encadrés comme suit par les balises entre [fr]pour le texte en français per exmple[/fr]
[fr]Bonjour, voici un post en français, fait pour tester la traduction....[/fr]
[es]Hola, es un post en castellano para probar el plugin de traducción...[/es]
[en]Hi, this is the post in english to test the translation plugin[/en]
Insertion des balises [fr]…[/fr]
Ensuite, il vous reste à rajouter un champs sur mesure (Custom field) pour y écrire la traduction du titre.
Name => en
Value => title in english
Name => es
Value => título en castellano
3. Le plugin Babel
Le plugin en choix numéro 2 est tiré de ce plugin initialement. La version sur le site est plus récente que celle disponible sur le site de WP. Un fonctionnement très similaire à celui de mlanguage cela va sans dire.
Source : http://p.osting.it/my-works/babel/
4. Le plugin xlanguage
Très complexe d’utilisation car apparemment exhaustif en terme de traduction. L’auteur du plugin se livre même à un comparatif avec les autres plugins existants. A ne pas conseiller à des débutants ou pour une traduction partielle d’un blog sous WP.
Ajout d’une langue
Attention aux conventions sur les langues, sensibilité à la casse en plutôt que En
La liste des langues
Frontend - les liens des versions
Plus d’explications sur le site officiel
Source : http://hellosam.net/project/xlanguage
5. Le plugin qtranslate
`
Très compliqué lui aussi avec une batterie de spécifications qui modifient même totalement la langue de votre backend, vous passez littéralement dans une langue différente lorsque vous cliquez sur le lien pour publier dans une autre langue. A ne pas conseiller à des débutants ou pour une traduction partielle d’un blog sous WP.
Frontend - Comme les autres plugins, activation du widget
Backend - affichage dans la sidebar
Sur l’activation dans un widget, se reporter à l’article Wordpress - Créer un thème Wordpress Widget Ready
CONCLUSION : Si vous ne souhaitez traduire qu’une partie de votre site sous Wordpress, d’évidence nous vous recommandons le recours au plugin. Pour réaliser la copie exacte de votre site, un clone nous paraît plus approprié surtout en terme de référencement, de gestion et d’accessibilité.
Une alternative radicale au plugin wordpress-mu
`
Si vous pouvez utiliser sur votre espace d’hébergement Worpress Mu, il est tout à fait possible d’installer Wordpress mu et de servir de la possibilité de faire du multi-blogging pour gérer un blog par langue en faisant du blog principal la version de référence de votre site. Vous aurez la possibilité de déléguer la traduction et la gestion d’une langue, de faire des évolution éditoriales beaucoup plus poussées que si vous utilisiez un simple plugin.
On va se livrer à cette excercide de gestion multilingue avec la toute dernière vesrion de wordpress-mu wordpress-mu-2.8.4a
Les principales commandes d’installation de wordpress-mu-2.8.4a
`
Pour une version plus détaillée, vous piyvez vous reporter à cette artcile sur BuddyPress qui s’appuie sur Wordpress Mu.
1.1 se connecter comme root
/Applications/MAMP/Library/bin/mysql -u root -p
1.2 créer la BDD et l’utilisateur bp_2_8_install
CREATE USER 'bp_2_8_install'@'localhost' IDENTIFIED BY 'bp_2_8_install';
GRANT USAGE ON *.* TO 'bp_2_8_install'@'localhost'
IDENTIFIED BY 'bp_2_8_install'WITH MAX_QUERIES_PER_HOUR 0
MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0;
CREATE DATABASE IF NOT EXISTS bp_2_8_install;GRANT ALL PRIVILEGES ON bp_2_8_install.*
TO 'bp_2_8_install'@'localhost';
Au terme de ces commandes dans MySQL, nous aurons donc de quoi compléter les informations demandées lors de l’installation de wordpress-mu-2.8.4a.
A savoir les informations suivantes :
Database Name = bp_2_8_install
Database User name = bp_2_8_install
Database Password = bp_2_8_install
Database Host = localhost
Le choix des URL
Il est possible d’opter pour deux types d’url à l’aide du Sub-directories ou Sub-domains
- Blog en français - C’est le blog par défaut, l’adresse est
http://127.0.0.1/wordpress-mu-2.8.4a/site/
- Blog en anglais - - L’adresse est
http://127.0.0.1/wordpress-mu-2.8.4a/site/en/
La marche à suivre
On va faire deux blogs : l’un en Français, l’autre en Anglais
L’adresse est http://127.0.0.1/wordpress-mu-2.8.4a/site/
Le blog principal en français pour lequel on active le theme Dilectio 1
Le blog principal en anglais pour lequel on active le theme Smashingtheme
Backend - Ajout d’un lien depuis la version française vers la version anglaise
Frontend - Lien disponible dans la version française vers la version anglaise
CONCLUSION : A l’aide de Wordpress Mu, vous pouvez gérer un blog multilingue via une administration unique et décider plus librement du devenir de chacune des versions. Plus difficile à mettre en œuvre mais bien plus souple au final.
Pour aller plus loin
MySQL, PHP, plugin, traduction, Wordpress
31 août 2009 dans CMS, Création de site web, Divers, Drupal, Framework, PHP, MYSQL, Tutoriaux, XHTML CSS par Bruno Flaven
Dans cet article, on va créer un service sur mesure au sein de Drupal. Créer un service peut se révéler très utile, car comme il est dit dans la définition en anglais donnée ci-dessous, vous pourrez accéder un ensemble de méthodes permettant de connecter des applications distantes à du contenu émanant de votre site sous Drupal. Une application distante faite sous Flex ou sous Flash par exemple. Par ailleurs, on s’approche assez près alors même que nous sommes dans un CMS, d’un développement et du vocabulaire proche d’un Framework PHP.
Services are collections of methods available to remote applications. They are defined in modules, and may be accessed in a number of ways through server modules.
Que vous utilisiez la version 5 et + ou la version 6 de Drupal, le fonctionnement est le même. Il est nécessaire d’avoir activé les modules suivants :
- le module
Service
- le module
Node Service
Pour les besoins de cet article, notre environnement de travail sera une installation de Drupal 5.14 en local.
- Frontend -
http://127.0.0.1/DRUPAL/drupal-5.14/
- Backend -
http://127.0.0.1/DRUPAL/drupal-5.14/admin/
Pour comprendre comment installer cet environnement PHP-MySQL, reportez-vous aux articles de ce blog :
Un autre article sur Drupal qui fait référence au même environnement.
Activer les modules
Pour rendre effectif le service, il faut retourner dans l’administration et activer sous l’onglet “Core - required” à l’URL suivante http://127.0.0.1/DRUPAL/drupal-5.14/admin/build/modules, les
- Dans l’onglet Services, le module “Services”
- Dans l’onglet Services - services, le module “Node Service”
activation du module Services
activation du module Node service
Une fois modules activés, votre Drupal est désormais en mesure de se comporter comme une véritable web application au même titre que Google, Flickr, Facebook. Vous pouvez désormais offrir la possibilité à d’autres site de publier du contenu en provenance de votre site
Voir quels sont les services activés
Un lien “Services” apparaît dans la colonne de gauche de navigation sous le lien “Modules”
Dans la page “Services”, il faut aller dans l’onglet “Settings” et décocher les deux checkboxes suivantes :
désactivation de Use keys et Use keys
Creér un Content type nommé Personne
On va créer de toutes pièces un content type nommé Personne correspondant à une entrée dans un carnet d’adresse. Quel intérêt, il y a-t-il à créer un Content type me direz-vous ? Cela vous permet en autre de gérer du contenu récurrent des fiches de musique pour un site de musique, des profils d’intervenants pour un site évènementiel, des listes d’hôtels pour un site de réservation. Etc vous isolez à l’aide de Drupal un contenu spécifique que vous pourrez ensuite appeler via une API différente via une datagrid sous Flex par exemple.
Name * => Personne
Type * => personne
Description => C’est le contenu type d’un carnet d’adresse
La valeur description est optionnel, les deux autres étant obligatoires (signalés par une *). Néanmoins, il n’est pas inutile de commenter certains types dans la mesure où vous n’êtes pas toujours le seul administrateur du contenu, il peut donc être utile de préciser un peu la nature du contenu en question. C’est un peu la fonction du commentaire dans des lignes de code !
les champs Name *, Type * et Description
Title field => Nom
Body field => Adresse
Les autres spécifications restent les mêmes par défaut.
le Content type nommé Personne
Insérer un peu de contenu
On va créer du contenu bouchon pour les besoins de notre démonstration…. Cela ressemble pour commencer à un jeu de Monopoly ! A titre d’information, nous indiquons en italique et entre parenthèse la valeur nid qui nous est retournée par Drupal après l’insertion.
Paul
15, rue de la paix
(12)
Pierre
2, Place du marché
(13)
Vanina
34, rue des soupirs
(14)
Nelson
Impasse Napoléon
(15)
Une fois ce contenu créé, on peut aller vérifier que le contenu que nous venons d’insérer est bien inclus dans un noeud ou node, à l’aide de Services > node.load. Dans notre exemple, le nid pour Paul est 12. On va se servir des fields pour ne retourner que l’essentiel attaché à une personne à savoir : nid,title,body. Attention, vous devez écrire sans espace et le nom des valeurs en anglais…
Préparer des fichiers pour notre module
Nous allons créer un répertoire du nom de personne_service à l’endroit suivant sites > all > modules > personne_service. Nous sommes sur Mac dans la répertoire htdocs de MAMP.
Il reste ensuite à créer deux fichiers : personne_service.info, personne_service.module
Le fichier personne_service.info
name = Service to the personne
version = 1.0
description = A service for address book
package = Services - services
dependencies = services
Mieux vaut écrire les variables du fichier .info en anglais
name = Service à la personne
version = 1.0
description = Un service pour insérer un carnet d'adresse
package = Services - services
dependencies = services
La valeur dependencies est là pour rappeler que notre service Personne ne peut être utilisé sans l’activation du module services
Le service Personne est inactif
Le service Personne est activé
Le fichier personne_service.module
Nous allons testé dans un premier la fonction personne_service_all de notre service module personne_service_service, le nom de cette fonction se compose du nom du module personne_service auquel est ajoutée la mention _service, cette fonction retourne des tableaux multidimensionnels arrays of arrays.
/* un simple retour pour un besoin de test */
/* return "Bonjour Hecube"; */
Le fonction marche, elle retourne return "Bonjour Hecube";
Une fois désactivée et une fois complétée comme dans le code ci-dessous, on aura alors les 4 nœuds ou résultats qui seront retournés.
Dans l’écriture de la requête, mieux vaut mettre la valeur {node} car Drupal identifie la valeur automatiquement et la remplace par le nom de table correct $result = db_query("SELECT * FROM {node} WHERE type='personne' ");. Sinon, c’est la fonction node_load de Drupal qui va nous permettre de retourner un noeud complet.
On va rajouter des arguments dans fields pour retourner un moins grand nombre de valeurs dans notre array.
Ci-dessous la vesrion complete du code source de personne_service.module.
Le code source complet de personne_service.module
<?php
function personne_service_service () {
return array (
array (
/* la méthode */
'#method' => 'personne_all',
/* la fonction */
'#callback' => 'personne_service_all',
/* les filtres */
'#args' => array (
array (
'#name' => 'fields',
'#type' => 'array',
'#optional' => true,
'#description' => 'Une liste de champs pour filtrer notre carnet avec les adresses'
)
),
/* le retour */
'#return' => 'array',
/* description */
'#help' => 'Retourne une liste de personne'
)
);
}
/* V00 */
function personne_service_all ($fields = array() ) {
/* un simple retour pour un besoin de test */
/* return "Bonjour Hecube"; */
$result = db_query("SELECT * FROM {node} WHERE type='personne' ");
$nodes = array ();
while ($node = db_fetch_object($result)) {
$nodes[] = node_load($node);
}
return $nodes;
}
?>Comment installer et activer les services et webservices sous Drupal 6
Il vous reste aussi à télécharger le module Services 6.x-0.15 (services-6.x-0.15.tar.gz) à l’adresse suivante http://drupal.org/project/services) à dézipper le tout et à l’envoyez en FTP le répertoire services dans /chemin_vers_drupal/drupal_install/modules.
Il vous reste à télécharger le module Web Services 6.x-1.02 (webservices-6.x-1.02.tar.gz) à l’adresse suivante http://drupal.org/project/webservices) à dézipper le tout et à l’envoyez en FTP le répertoire webservices dans /chemin_vers_drupal/drupal_install/modules.
Les services et webservices sous Drupal 6 sont activés
Pour aller plus loin
CMS, Drupal, Module, MySQL, PHP, Service
20 août 2009 dans CMS, Création de site web, Divers, Mac, PHP, MYSQL, Tutoriaux, Wordpress par Bruno Flaven
Voici un article sur comment installer un outil de blog, populaire en France et concurrent de Wordpress. Sans vouloir se montrer dissuasif, la puissance de feu de dotclear est quand même nettement moins impressionnante que Wordpress (thèmes, plugins…) toutefois la quantité n’est pas toujours synonyme de qualité. En effet, un rapide tour d’horizon sur le site officiel de Dotclear vous donne une idée des ressources dont vous pourrez disposer : plus de 200 thèmes disponibles version 2 et version 1 confondues, 84 plugins disponibles… En dépit, d’une naissance presque concomitante en 2002 par Olivier Meunier, WP a pris quelques longueurs d’avance.
L’installation va se faire à l’aide des fichiers dotclear disponibles sur le site officiel, nous utiliserons dotclear-2.1.5.zip sur un environnement local.
Pour installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :
Si vous souhaitez vous essayer avec Wordpress, le principal concurrent.
Créer la base de données pour l’installation de Dotclear
Les information indispensables pour créer la BDD
On crée une base et un utilisateur simultanément bien sûr, en production, le mot de passe peut et doit être légèrement plus complexe. La commande SQL pour se connecter au client MySQL de MAMP. Vous vous connecté(e) comme utilisateur root, le mot de passe est root
/Applications/MAMP/Library/bin/mysql -u root -p
# Création de la base dotclear_install
CREATE DATABASE dotclear_install;
# Création de l'utilisateur dotclear_install ayant des droits sur le BDD dotclear_install
CREATE USER 'elgg_install'@'localhost' IDENTIFIED BY 'elgg_install';GRANT USAGE ON *.*
TO 'elgg_install'@'localhost' IDENTIFIED BY 'elgg_install'WITH MAX_QUERIES_PER_HOUR 0
MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0;
CREATE DATABASE IF NOT EXISTS elgg_install;GRANT ALL PRIVILEGES ON
elgg_install.* TO 'elgg_install'@'localhost';
Au terme de ces commandes dans MySQL, nous aurons donc de quoi compléter les informations demandées lors de l’installation de dotclear-2.1.5. A savoir les informations suivantes :
Database Name= dotclear_install
Database User name = dotclear_install
Database Password = dotclear_install
Database Host = localhost
Installer et configurer Dotclear
L’installation de Dotclear va se faire sur un serveur en local à l’adresse suivante http://127.0.0.1/DOTCLEAR/dotclear/ à l’aide du wizzard proposé par Dotclear. Comme nous sommes sous MAMP et sur Mac, le chemin véritable est le suivant /Applications/MAMP/htdocs/DOTCLEAR/dotclear/
L’absence de fichier de configuration vous impose de cliquer sur le lien create a config.php file through a web interface, ce lien vous donne accès au wizard
Le lien vers le wizard car vous n’avez pas créé de fichier de configuration
Configuration de la BDD pour Dotclear
La première étape du wizard pour vous assister dans l’installation de Dotclear
Pour installer vous allez compléter par les informations suivantes, définies plus haut, Database Name= dotclear_install, Database User name = dotclear_install, Database Password = dotclear_install, Database Host = localhost
Configuration du compte admin
L’installation se termine
Deux informations importantes :
- Accès à l’administration de dotclear à l’aide du compte admin hecube:hecube (BACKEND)
http://127.0.0.1/DOTCLEAR/dotclear/admin/auth.php
- Accès au blog sous dotclear (FRONTEND)
http://127.0.0.1/DOTCLEAR/dotclear/
Un tour rapide des fonctionnalités de l’outil d’administration
Si vous êtes familier de wordpress et c’est notre cas chez hecube, on ne peut s’empêcher de se livrer à un léger comparatif. Première conclusion rapide, tout semble rigoureusement identique à l’administration de WP hormis quelques comportements près et paramètres par défaut.
L’accès à l’administration de dotclear à l’aide du compte admin hecube:hecube (BACKEND) via http://127.0.0.1/DOTCLEAR/dotclear/admin/auth.php
La page d’accueil de l’admin de Dotclear
La page d’accueil du blog par défaut de Dotclear
Comme sous WP, vous pouvez créer un blogroll avec des catégories de liens
L’édition d’un billet
Ajout d’un lien dans la blogroll (annuaire de liens)
L’url du lien doit contenir http://
Le gestionnaire des médias
Il est possible d’envoyer une image via le gestionnaire des médias
Le gestionnaire des médias avec l’envoi d’une image
La gestion de l’apparence du blog
Vous pouvez comme dans WP, choisir et implémenter facilement le thème pour votre blog. Dans notre exemple, on active l’apparence Blowup
Deux remarques
Pour bénéficier d’URL explicites, il faut changer la valeur Méthode de lecture de l'URL et la passer en PATH_INFO. Cela améliore grandement le référencement.
Il est étonnant de voir que les tables crées via le wizard sont de type InnoDB et non MyISAM.
Une configuration sur mesure
Il existe enfin de très nombreux paramètres disponibles dans l’administration via l’onglet about:config, il s’agit des paramètres du blog et des paramètres globaux qui vous permettra de gérer finement les spécifications de votre blog.
Enfin, en activant des fonctionnalités supplémentaires via les “Extensions”, qui est l’équivalent des plugins de Wordpress, vous allez accroître les capacités de gestion de votre blog et vous simplifier la tache.
Pour aller plus loin
blog, DotClear, MySQL, PHP, plugin, theme
11 août 2009 dans Accessibilité, CMS, Divers, Image, Graphisme, Photoshop, Tutoriaux, Webdesign, Wordpress, XHTML CSS par Bruno Flaven
Très rapidement lorsque on est titulaire d’un blog sous WordPress ou sur un autre système de publication, on souhaite mettre avant le contenu que l’on poste avec la plus grande aisance possible. Naturellement, il existe de nombreux plugins qui permettent de, mettre en avant, souligner vos liens, vos interventions dans les commentaires afin de faciliter la lecture des articles et l’interaction avec vos lecteurs.
La mise en avant de votre contenu
On a donc sélectionné un assortiment de plugin tout simple qui permettent de rehausser la lisibilité de votre contenu en appuyant de manière assez classique et discrète votre contenu qu’il soit article ou commentaire.
Les plugins selectionnés se répartissent en 2 types :
- Les plugins de mise en avant des commentaires (comment highlight). La fonction de ce plugin consiste à souligner vos interventions dans les commentaires des utilisateurs notamment vos réponses éventuelles à leurs questions.
- Les plugins de gestion de lien extérieur (external link) dont la fonction est d’indiquer à votre lecteur la nature du lien au sein du texte d’un article.
Ces deux changements qui lient contenu et webdesign peuvent sembler à priori dérisoires mais il apporte une aide intuitive dans la compréhension de votre contenu par les lecteurs de votre blog.
Les plugins de mise en avant des commentaires (comment highlight)
Nous avons sélectionné 2 plugins qui rendent ce genre de service, cela consiste à souligner automatiquement les interventions émanant de l’administrateur du blog, c’est à dire vous !
Highlight Author Comments
C’est le plugin le plus complet. Il permet de souligner vos interventions sur les commentaires notamment.
La configuration du plugin
Le résultat sur les commentaires de l’admin
Source : http://wordpress.org/extend/plugins/highlight-author-comments/
BM Comment Highlight
La mise en place est complexe pour un résultat pas toujours garanti… Si vous ne souhaitez pas mettre les mains dans le code, mieux vaut s’abstenir ! Ce plugin soulignera pas seulement les réponses de l’administateur, vous pouvez souligner les commentaires de chaque type d’utilisateur via la CSS de votre thème.
A ajouter dans le fichier comments.php de votre thème dans wp-content/themes/le_nom_de_votre-theme/comments.php
<!-- <ol class="commentlist"> -->
<?php // wp_list_comments(); ?>
<!-- </ol> -->
<ol class="commentlist">
<?php foreach ( $comments as $comment ) {
$commentClass = bm_commentHighlight(); ?>
<li class="<?php echo $commentClass; ?>">
<?php comment_text(); ?>
</li>
<?php } ?>
</ol>A ajouter à la feuille de style de votre thème dans wp-content/themes/le_nom_de_votre-theme/style.css
/* comment style */
.user {
font-weight:normal;
color: #000;
}
.reader {
font-weight:italic;
color: #000;
}
.author {
font-weight:bold;
color: #FF6600;
}Avant…
Après… Bien sur cet après demanderai un peu plus de styling CSS !!
Source : http://wordpress.org/extend/plugins/bm-comment-highlight/
Les plugins de gestion de lien extérieur (external link)
Pour cette mise en avant, c’est au départ un très bon plugin qui existe sur DorClear nommé Hreflang Manager v.1, l’outil de gestion de blog francophone. On a donc cherché un équivalent sur Worpdress ce qui n’a pas été difficile à trouver.
Le plugin Hunk External Links
Un souci sur Internet Explorer, le disposition de l’icone à proximté du lien laisse souvant à désirer….
L’installation et la configuration du plugin sur votre blog WordPress
Un article avec des liens extérieurs
Le plugin Hunk External Links
Ce petit artifice peut toutefois être mis en place sans l’aide d’un plugin, ce qui vous donnera une meilleur maitrise dans l’affichage ou dans l’utilisation que vous souhaitez du marquage des liens vers l’extérieur de votre blog. Si vous souhaitez par exemple signifier la langue à l’aide d’un drapeau…
Voilà rapidement la marche à suivre, il vous faut modifier en conséquence la feuille de style de votre thème et appeler la bonne classe lorsque vous faites un lien et le tour est joué !
/* Global
-------------------------------------------------------- */
html { overflow-y: scroll; }
body {
width: 922px;
margin: 0 auto;
font: 12px/24px "Lucida Grande", "Helvetica Neue", Arial, sans-serif;
position: relative;
}
a:link { color: #FF6600; text-decoration: underline; }
a:visited { color: #FF6600; text-decoration: none; }
a:active, a:focus, a:hover { color: #667788; text-decoration: none; }
/* ==== to be continued ... */
/* Post-Content: #wrapper #main #content .post .post-content
-------------------------------------------------------- */
.post-content { overflow: hidden; }
.post-content ul {
margin: 0 0 12px 0;
}
.post-content a[hreflang]:after { content: "000a0[" attr(hreflang) "]"; font-size: 10px; }
.post-content a.external { padding: 5px 13px 5px 0; background: transparent url(img/external.gif) no-repeat center right; }
/* ==== to be continued ... */
/* counter-increment - 1st time I hear about that was here http://mezzoblue.com/archives/2006/11/01/counter_intu/ */
.post-content ol {
counter-reset: i;
|list-style: decimal inside;
}
.post-content ol li { counter-increment: i; }
.post-content ol li:before { content: counter(i, decimal) ")000a0"; color: #814cd6; }
.post-content ul li { list-style: none; background: url(img/square_8a48d9.png) no-repeat 0 10px; text-indent: 10px; }
.post-content blockquote {
border: 10px solid #EBEBEB;
border-width: 0 0 0 6px;
padding: 4px 0 4px 10px;
font-style: italic;
}
/* ==== to be continued ... */<p>
Aujourd’hui la création de site web, de manière professionnelle, se réduit le plus souvent au <b>dilemme suivant</b> dans sa réalisation :
<ul>
<li>Soit le site est développé <code><em>from scratch *</em></code> à l'aide de préférence d'un Framework dans un langage connu tel que PHP, Python, Ruby ou Perl.
Pour PHP, citons <a hreflang="en" title="Zend Framework. En anglais" href="http://www.symfony-project.org/" class="external">Symfony</a>, <a hreflang="en" title="Zend Framework. En anglais" href="http://framework.zend.com/" class="external">Zend</a>, <a hreflang="en" title="Zend Framework. En anlais" href="http://codeigniter.com/" class="external">Code Igniter</a>, <a hreflang="en" title="Zend Framework. En anglais" href="http://www.kohanaphp.com/" class="external">Kohana</a>
Pour Perl, citons <a hreflang="en" title="Catalyst - Web Framework. En anglais" href="http://www.catalystframework.org/" class="external">Catalyst</a>
Pour Python, citons <a hreflang="en" title="Django | The Web framework for perfectionists with deadlines. En anglais" href="http://www.djangoproject.com/" class="external">Django</a>
Pour Ruby, citons <a hreflang="en" title="Ruby on Rails. En anglais" href="http://www.rubyonrails.org/" class="external">Ruby on Rails</a></li>
<li>Soit le site s'appuie sur un CMS existant : <a hreflang="en" title="WordPress | A semantic personal publishing platform with a focus on aesthetics, web standards, and usability. En anglais" href="http://www.wordpress.org/" class="external">WordPress</a>, <a hreflang="en" title="Drupal | Official homepage of the open source content management system. En anglais" href="http://www.drupal.org/" class="external">Drupal</a> , <a hreflang="en" title="Joomla! - the dynamic portal engine and content management system. En anglais" href="http://www.joomla.org/" class="external">Joomla!</a>, <a hreflang="en" title="CMS Made Simple - the open source content management system for the rest of us. En anglais" href="http://www.cmsmadesimple.com/" class="external">CMS Made Simple</a> </li>
</ul>
Hormis cela point de salut !
<em>* de zéro, d'une feuille blanche...</em>
</p>
Le résultat produit par cette manipulation dans la CSS
Pour aller plus loin
blog, commentaire, contenu, plugin, Wordpress
30 juillet 2009 dans Création de site web, Divers, Hébergement, Linux, Apache, Mac, PHP, MYSQL, Tutoriaux par Bruno Flaven
C’est un truisme de dire qu’un site dynamique fait en PHP s’appuie souvent sur une base de données de type MySQL. Le succès et la diffusion du PHP est en grande partie du aussi à la grande facilité de le coupler, pour un site, à une Base de données (BDD) de type MYSQL. La gratuité, le très grand nombre d’hébergeurs qui propose ce format de Base données l’a imposé comme aujourd’hui un standard. Tout créateur de site quel que soit la technologie utilisé pour ne citer que les langages open source : Ruby, Python se doit de connaitre au moins dans les grandes ligne tout au moins, la création et la gestion de cet type de BDD. C’est bein l’objet de cet article.
NB : Pour information, il existe toutefois un autre moteur de BDD, concurrent de MySQL, c’est SQLite et son manager nommé sqlitemanager conçu en PHP à la manière de PhpMyadmin. Les deux sont souvent distribués dans des environnements LAMP prêt à l’emploi tel que EasyPHP pour PC ou MAMP pour Mac.
Installer un environnement PHP-MYSQL
Pour installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :
En savoir plus sur SQLite
Pour toutes les opérations qui vont suivre et lignes de commande, nous utiliserons le client MySQL et le phpMyadmin qui s’installent lors de l’installation de MAMP. Ce dernier n’étant disponible que pour MAC. A priori, les opération et lignes de commande restent valables sur PC via EasyPHP par exemple.
Les lignes de commande sur PC
Il faut bien reconnaitre que les PC sous windows sont encore majoritaires, ainsi beaucoup des utilisateurs installent leur environnement de développement en local à l’aide de EasyPHP, par souci pédagogique, on donne les quelques commandes qui nécessitent de connaître la chemin vers l’application mysql.exe ou mysldump.exe. Dans nos exemples, les chemins seront les suivants :
- Le client
mysql - C:\EasyPHP_2_0b1\mysql\bin\mysql.exe
- Le client
mysqldump - C:\EasyPHP_2_0b1\mysql\bin\mysqldump.exe
Pour avoir directement accès aux commandes mysql et mysqldump et ne pas trimballer tout le bazar C:\EasyPHP_2_0b1\mysql\bin\mysql.exe et C:\EasyPHP_2_0b1\mysql\bin\mysqldump.exe, reprotez-vous à l’article de ce blog :
Accéder à la console MySQL sur Mac
Voilà, écran par écran, la marche à suivre pour accéder au client mysql de MAP sur un MAC.
1. Lancer le terminal
Vous devez lancer le terminal. Cette application se trouve dans “Applications > Utilitaires > Terminal” (en passant le chemin sous la console elle-même est /Applications/Utilities/Terminal.app).
accès au terminal
Premier écran du terminal
Se connecter au client MySQL via /Applications/MAMP/Library/bin/mysql -u root -p, le mot de passe n’apparait pas en clair lorsque vous le saisissez.
Sortir du client MySQL via exit;, poliment vous répondra bye.
Un exemple de commande passée dans le client MySQL via SHOW databases;.
Utiliser la console MySQL
La commande SQL pour se connecter au client MySQL de MAMP. Vous vous connecté(e) comme utilisateur root, le mot de passe est root
/Applications/MAMP/Library/bin/mysql -u root -p
Pour PC
Le répertoire de EasyPHP peut-être bien sûr différent de celui indiqué ci-dessous.
C:\EasyPHP_2_0b1\mysql\bin\mysql.exe -u root -p
# Montre toutes les bases
SHOW DATABASES;
# Création de la base hecube_demo
CREATE DATABASE hecube_demo;
# Création de la base hecube_demo
DROP DATABASE hecube_demo;
# Destruction de hecube_demo@localhost ...
DROP USER hecube_demo@localhost;
DROP DATABASE IF EXISTS hecube_demo;
# Création simultanée de la base hecube_demo
# et de l'utilisateur hecube_demo
CREATE USER 'hecube_demo'@'localhost' IDENTIFIED BY 'hecube_demo';
GRANT USAGE ON *.* TO 'hecube_demo'@'localhost' IDENTIFIED
BY 'hecube_demo'WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0
MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0; CREATE DATABASE
IF NOT EXISTS hecube_demo;GRANT ALL PRIVILEGES ON hecube_demo.*
TO 'hecube_demo'@'localhost';
Créer une table et importer des données via un fichier .sql d’un seul coup
L’idée si on passe par la console est d’accélérer la saisie dans votre BDD. Dans notre exemple ci-dessous, on va créer une seule et unique table hecube_demo_users_dump.sql et dans le même temps populariser des données à l’intérieur de cette table. Ces inserions s’effectuent à l’aide des lignes INSERT INTO ...
La commande d’importation du fichier hecube_demo_users_dump.sql
# Utiliser la base hecube_demo
USE hecube_demo;
Pour MAC
# Insérer le contenu du fichier hecube_demo_users_dump.sql
# dans la base hecube_demo sélectionnée précédemment
# faire attention au chemin vers le fichier .sql
SOURCE /Users/username/rep-1/he3_fr/datas/hecube_demo_users_dump.sql;
Pour PC
# Insérer le contenu du fichier hecube_demo_users_dump.sql
# dans la base hecube_demo sélectionnée précédemment
# faire attention au chemin vers le fichier .sql
SOURCE C:\mon-repertoire-sans-espaces-1\2-mes_donnes\hecube_demo_users_dump.sql;
Le fichier hecube_demo_users_dump.sql
Ce fichier contient la structure de la table ainsi que quelques enregistrements pour réaliser les requêtes citées plus bas. A noter la définition du charset de la BDD CHARSET=utf8. Cela aura son importance notamment lors des requêtes de mise à jour avec les caractères accentués en Français. Pour plus d’explications sur le charset, voir l’article :
Charset iso-8859-1, iso-8859-15, utf-8, le problème du Charset
-- SQL Dump
--
-- Base de données: hecube_demo
--
-- --------------------------------------------------------
--
-- Structure de la table hecube_demo_users
--
DROP TABLE IF EXISTS hecube_demo_users;
CREATE TABLE hecube_demo_users (
ID bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT,
user_login varchar(60) NOT NULL DEFAULT '',
user_pass varchar(64) NOT NULL DEFAULT '',
user_nicename varchar(50) NOT NULL DEFAULT '',
user_email varchar(100) NOT NULL DEFAULT '',
user_url varchar(100) NOT NULL DEFAULT '',
user_registered datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
user_activation_key varchar(60) NOT NULL DEFAULT '',
user_status int(11) NOT NULL DEFAULT '0',
display_name varchar(250) NOT NULL DEFAULT '',
spam tinyint(2) NOT NULL DEFAULT '0',
deleted tinyint(2) NOT NULL DEFAULT '0',
PRIMARY KEY (ID),
KEY user_login_key (user_login),
KEY user_nicename (user_nicename)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
--
-- Contenu de la table hecube_demo_users
--
INSERT INTO hecube_demo_users VALUES (1, 'admin', '$P$B1jMi1zFm6s4qznrqoshEFwP/UO.wy.', 'admin', 'info@hecube.net',
'http://www.hecube.net', '2009-06-15 03:15:41', '', 0, 'admin', 0, 0);
INSERT INTO hecube_demo_users VALUES (2, 'Barack Obama', '$P$B3Zpg6kH3D6D5nkWfGjJK8HiCss20N1', 'barack-obama',
'barack.obama@hecube.net', 'http://www.hemedia.net/', '2009-09-18 13:12:08', '', 0, 'Barack Obama', 0, 0);
INSERT INTO hecube_demo_users VALUES (3, 'Paris Hilton', '$P$BCavN5n/JBAwLxs8D3WZNGX6H2jjMM.', 'paris-hilton',
'paris.hilton@hecube.net', 'http://www.hemedia.net/', '2009-08-18 13:42:49', '', 0, 'Paris Hilton', 0, 0);
INSERT INTO hecube_demo_users VALUES (4, 'Jeanne Hilton', '$P$BCavN5n/JBAwLxs8D3WZNGX6H2jjMM.', 'jeanne-hilton',
'jeanne.hilton@hecube.net', 'http://www.hemedia.net/', '2009-07-14 13:42:49', '', 0, 'Jeanne Hilton', 0, 0);
INSERT INTO hecube_demo_users VALUES (5, 'Michelle Obama', '$P$BCavN5n/JBAwLxs8D3WZNGX6H2jjMM.', 'michelle-obama',
'michelle.obama@hecube.net', 'http://www.recovery.org/', '2009-04-12 13:45:49', '', 0, 'Paris Hilton', 0, 0);
INSERT INTO hecube_demo_users VALUES (6, 'Jean Paris', '$P$BCavN5n/JBAwLxs8D3WZNGX6H2jjMM.', 'jparis',
'jparis@hecube.net', 'http://www.google.com/', '2009-06-18 13:42:49', '', 0, 'jparis', 0, 0);
INSERT INTO hecube_demo_users VALUES (7, 'brunoflaven', '$P$B3Zpg6kH3D6D5nkWfGjJK8HiCss20N1', 'brunoflaven',
'apps+93832643825.1841931876.1f1942b57f81232860a8777ea4aaeac8@proxymail.facebook.com',
'http://www.facebook.com/people/Bruno-Flaven/1841931876', '2009-06-18 13:12:08', '', 0, 'Bruno Flaven', 0, 0);
INSERT INTO hecube_demo_users VALUES (8, 'etiennedefontainieu', '$P$BCavN5n/JBAwLxs8D3WZNGX6H2jjMM.', 'etiennedefontainieu',
'apps+93832643825.608633262.88b94754f62e27b6b641ff6008e8ecb4@proxymail.facebook.com',
'http://www.facebook.com/people/Etienne-De-Fontainieu/608633262', '2009-06-18 13:42:49', '', 0, 'Etienne De Fontainieu', 0, 0);
En vrac, les commandes SQL indispensables
Vider une table, Supprimer une table
# Vider la table hecube_demo
TRUNCATE TABLE hecube_demo_users;
# Supprimer la table hecube_demo
DROP TABLE hecube_demo_users;
Sélectionner des données
Requête
# Retourne le nombre d'enregistrements dans la table hecube_demo_users
SELECT COUNT(*) FROM hecube_demo_users;
Résultat
+----------+
| COUNT(*) |
+----------+
| 8 |
+----------+
1 row IN SET (0,00 sec)
Avant d’effectuer une requête SELECT, il faut toujours sélectionner sa BDD avant.
Requête
# Retourne le nombre d'enregistrements dans la table hecube_demo_users
SELECT id, user_login, display_name FROM hecube_demo_users WHERE user_nicename LIKE '%obama%';
Résultat
+----+----------------+----------------+
| id | user_login | display_name |
+----+----------------+----------------+
| 2 | Barack Obama | Barack Obama |
| 5 | Michelle Obama | Michelle Obama |
+----+----------------+----------------+
2 rows IN SET (0,00 sec)
La même requête mais qui retourne l’intégralité des champs et leurs contenus
Requête
# Retourne le nombre d'enregistrements dans la table hecube_demo_users
SELECT * FROM hecube_demo_users WHERE user_nicename LIKE '%obama%';
# Retourne le nombre d'enregistrements dans la table hecube_demo_users
SELECT id, user_login, display_name FROM hecube_demo_users WHERE user_nicename LIKE '%obama%';
Résultat
+----+----------------+----------------+
| id | user_login | display_name |
+----+----------------+----------------+
| 2 | Barack Obama | Barack Obama |
| 5 | Michelle Obama | Michelle Obama |
+----+----------------+----------------+
2 rows IN SET (0,00 sec)
# Retourne le nombre d'enregistrements dans la table hecube_demo_users
SELECT id, user_login, display_name FROM hecube_demo_users WHERE user_nicename LIKE '%obama%';
Résultat
+----+----------------+----------------+
| id | user_login | display_name |
+----+----------------+----------------+
| 2 | Barack Obama | Barack Obama |
| 5 | Michelle Obama | Michelle Obama |
+----+----------------+----------------+
2 rows IN SET (0,00 sec)
Mettre à jour des données
Requête
# Mettre à jour le champs display_name de l'enregistrement avec un id égal à 5
UPDATE hecube_demo.hecube_demo_users SET display_name = 'Michelle Obama' WHERE hecube_demo_users.id = 5;
Résultat
Query OK, 0 rows affected (0,00 sec)
Rows matched: 1 Changed: 0 Warnings: 0
Si vous insérez des mots avec apostrophe et avec des accents comme c’est souvent le cas en français, il faut un caractère d’échappement, c’est à dire le \ ou ' ainsi on écrit jeanne l\'été dernier ou Jeanne l\'été cet été en français
Requête
# Mettre à jour le champs display_name de l'enregistrement avec un id égal à 5
UPDATE hecube_demo.hecube_demo_users SET display_name = CONVERT(_utf8 'Jeanne l\'été cet été en français' USING latin1) WHERE hecube_demo_users.id = 5;
UPDATE hecube_demo.hecube_demo_users SET user_login = CONVERT(_utf8 'Jeanne l\'été Dernier' USING latin1) WHERE hecube_demo_users.id = 5;
# une syntaxe alternative qui marche aussi...
UPDATE hecube_demo_users SET display_name = CONVERT(_utf8 'Jeanne l\'été cet été en français' USING latin1) WHERE id = 4;
UPDATE hecube_demo_users SET user_login = CONVERT(_utf8 'Jeanne l\'été Dernier' USING latin1) WHERE id = 4;
# vérifier la mise à jour de l'enregistrement avec un id égal à 5
SELECT id, user_login, display_name FROM hecube_demo_users WHERE id = 5;
# vérifier la mise à jour de l'enregistrement avec un id égal à 5
SELECT id, user_login, display_name FROM hecube_demo_users WHERE display_name LIKE CONVERT(_utf8 'Jeanne%' USING latin1);
Supprimer des données
# supprimer tous les enregistrement dont le champs user_login commence par Jeanne%
DELETE FROM hecube_demo_users WHERE user_login LIKE 'Jeanne%';
Faire un dump complet des données de la table hecube_demo_users de la base hecube_demodans un fichier .txt
Pour MAC
# exporter les données dans un fichier .txt
SELECT * INTO OUTFILE '/Users/username/rep-1/he3_fr/datas/hecube_demo_users_dump.new-1.txt' FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"'LINES TERMINATED BY '\n' FROM hecube_demo_users;
# exporter les données dans un fichier .txt
SELECT * FROM hecube_demo_users INTO OUTFILE '/Users/username/rep-1/he3_fr/datas/hecube_demo_users_dump.new-2.txt' FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"'LINES TERMINATED BY '\n';
# Une requete SELECT plus complexe avec une clause WHERE
SELECT id, user_login, display_name INTO OUTFILE '/Users/username/rep-1/he3_blog/datas/hecube_demo_users_dump.new-3.txt' FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"'LINES TERMINATED BY '\n' FROM hecube_demo_users WHERE display_name LIKE CONVERT(_utf8 'Jeanne%' USING latin1);
Pour PC
# exporter les données dans un fichier .txt
SELECT * INTO OUTFILE 'C:\mon-repertoire-sans-espaces-1\2-mes_donnes\hecube_demo_users_dump.new-1.txt' FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"'LINES TERMINATED BY '\n' FROM hecube_demo_users;
# exporter les données dans un fichier .txt
SELECT * FROM hecube_demo_users INTO OUTFILE 'C:\mon-repertoire-sans-espaces-1\2-mes_donnes\hecube_demo_users_dump.new-2.txt' FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"'LINES TERMINATED BY '\n';
# Une requete SELECT plus complexe avec une clause WHERE
SELECT id, user_login, display_name INTO OUTFILE 'C:\mon-repertoire-sans-espaces-1\2-mes_donnes\hecube_demo_users_dump.new-3.txt' FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"'LINES TERMINATED BY '\n' FROM hecube_demo_users WHERE display_name LIKE CONVERT(_utf8 'Jeanne%' USING latin1);
Faire un backup complet d’une BDD
Pour se faire, il faut sortir du client /Applications/MAMP/Library/bin/mysql et utiliser le client /Applications/MAMP/Library/bin/mysqldump. Vous devez préciser la base de données dont vous souhaitez faire le dump, ici hecube_demo et la table si c’est cette table dont vous souhiatez faire le backup hecube_demo_users. Si on précise pas la table mais on donne juste le nom de la base, vous allez alors sauvegareder l’intégralité des tables contenues dans votre BDD.
Pour MAC
# Utiliser le client mysqldump pour faire un backup de la table hecube_demo_users dans la base hecube_demo
/Applications/MAMP/Library/bin/mysqldump -c -u root -p hecube_demo hecube_demo_users > /Users/username/rep-1/he3_blog/datas/hecube_demo_users.mysqldump-1.sql
# Utiliser le client mysqldump pour faire un backup de toutes tables dans une base hecube_demo
/Applications/MAMP/Library/bin/mysqldump -c -u root -p hecube_demo hecube_demo_users > /Users/username/rep-1/he3_blog/datas/hecube_demo.mysqldump-FULL.sql
Pour PC
# Utiliser le client mysqldump pour faire un backup de la table hecube_demo_users dans la base hecube_demo
C:\EasyPHP_2_0b1\mysql\bin\mysqldump.exe -c -u root -p movies_development movies > C:\mon-repertoire-sans-espaces-1\2-mes_donnes\backup\movies_development.movies.sql
# Utiliser le client mysqldump pour faire un backup de toutes tables dans une base hecube_demo
C:\EasyPHP_2_0b1\mysql\bin\mysqldump.exe -c -u root -p hecube_demo hecube_demo_users > C:\mon-repertoire-sans-espaces-1\2-mes_donnes\backup\hecube_demo.mysqldump-FULL.sql
-- MySQL dump 10.10
--
-- Host: localhost Database: hecube_demo
-- ------------------------------------------------------
-- Server version 5.0.19
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
--
-- Table structure for table `hecube_demo_users`
--
DROP TABLE IF EXISTS `hecube_demo_users`;
CREATE TABLE `hecube_demo_users` (
`ID` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT,
`user_login` varchar(60) NOT NULL DEFAULT '',
`user_pass` varchar(64) NOT NULL DEFAULT '',
`user_nicename` varchar(50) NOT NULL DEFAULT '',
`user_email` varchar(100) NOT NULL DEFAULT '',
`user_url` varchar(100) NOT NULL DEFAULT '',
`user_registered` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`user_activation_key` varchar(60) NOT NULL DEFAULT '',
`user_status` int(11) NOT NULL DEFAULT '0',
`display_name` varchar(250) NOT NULL DEFAULT '',
`spam` tinyint(2) NOT NULL DEFAULT '0',
`deleted` tinyint(2) NOT NULL DEFAULT '0',
PRIMARY KEY (`ID`),
KEY `user_login_key` (`user_login`),
KEY `user_nicename` (`user_nicename`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
--
-- Dumping data for table `hecube_demo_users`
--
/*!40000 ALTER TABLE `hecube_demo_users` DISABLE KEYS */;
LOCK TABLES `hecube_demo_users` WRITE;
INSERT INTO `hecube_demo_users` (`ID`, `user_login`, `user_pass`, `user_nicename`, `user_email`, `user_url`, `user_registered`, `user_activation_key`, `user_status`, `display_name`, `spam`, `deleted`) VALUES (1,'admin','$P$B1jMi1zFm6s4qznrqoshEFwP/UO.wy.','admin','info@hecube.net','http://www.hecube.net','2009-06-15 03:15:41','',0,'admin',0,0),(2,'Barack Obama','$P$B3Zpg6kH3D6D5nkWfGjJK8HiCss20N1','barack-obama','barack.obama@hecube.net','http://www.hemedia.net/','2009-09-18 13:12:08','',0,'Barack Obama',0,0),(3,'Paris Hilton','$P$BCavN5n/JBAwLxs8D3WZNGX6H2jjMM.','paris-hilton','paris.hilton@hecube.net','http://www.hemedia.net/','2009-08-18 13:42:49','',0,'Paris Hilton',0,0),(6,'Jean Paris','$P$BCavN5n/JBAwLxs8D3WZNGX6H2jjMM.','jparis','jparis@hecube.net','http://www.google.com/','2009-06-18 13:42:49','',0,'jparis',0,0),(7,'brunoflaven','$P$B3Zpg6kH3D6D5nkWfGjJK8HiCss20N1','brunoflaven','apps+93832643825.1841931876.1f1942b57f81232860a8777ea4aaeac8@proxymail.facebook.com','http://www.facebook.com/people/Bruno-Flaven/1841931876','2009-06-18 13:12:08','',0,'Bruno Flaven',0,0),(8,'etiennedefontainieu','$P$BCavN5n/JBAwLxs8D3WZNGX6H2jjMM.','etiennedefontainieu','apps+93832643825.608633262.88b94754f62e27b6b641ff6008e8ecb4@proxymail.facebook.com','http://www.facebook.com/people/Etienne-De-Fontainieu/608633262','2009-06-18 13:42:49','',0,'Etienne De Fontainieu',0,0),(4,'Jeanne l\'été Dernier','$P$BCavN5n/JBAwLxs8D3WZNGX6H2jjMM.','jeanne-hilton','jeanne.hilton@hecube.net','http://www.hemedia.net/','2009-07-14 13:42:49','',0,'Jeanne l\'été cet été en français',0,0);
UNLOCK TABLES;
/*!40000 ALTER TABLE `hecube_demo_users` ENABLE KEYS */;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
Manipuler les BDD avec phpMyadmin
Il y a pléthore de tutoriaux et d’explications sur l’utilisation de phpmyadmin (Cf Recherche google : tutorial phpmyadmin). On va se concentrer sur un des aspects les plus utiles de l’outil. Une grande partie des ligne de commande qui sont données plus haut peuvent être saisies dans le champs qui apparit sur la page lorsque on a cliqué l’onglet SQL Cf le point 2.
1. La visualisation de la table hecube_demo_users de la base hecube_demo
2. Le champs de saisie de la commande SQL SELECT COUNT(*) FROM hecube_demo_users;
3. Le résultat de la saisie de la commande SQL SELECT COUNT(*) FROM hecube_demo_users;
4. Le résultat de la commande SQL SELECT * FROM hecube_demo_users; qui correspond à l’onglet Afficher
Pour aller plus loin
Administrer, base de données, MySQL, PHP, PhpMyadmin
27 juillet 2009 dans CMS, Création de site web, Divers, Marketing Web, PHP, MYSQL, Réseaux sociaux, Tutoriaux, Wordpress, XHTML CSS par Bruno Flaven
Si vous souhaitez opérer un réseau social et que la chose ne vous coute pas un bras ! C’est chose possible. En guise de première étape, il vous faudra sélectionner un outil existant, chez Hecube, nous avons fait des essais concluants avec BuddyPress et Elgg. Pour les avantages respectifs des deux outils, vous pouvez vous reporter aux articles suivants :
Dans un deuxième temps, il restera ensuite à vous rapprocher de réseaux sociaux existants, véritable manne d’utilisateurs. Ce qui pourrait singulièrement booster voter propre réseau social, c’est l’objet de cet article. Nous allons effectuer un rapprochement BuddyPress avec FaceBook à l’aide du plugin existant BuddyPress-Facebook Connect 1.1
Créer une application sur FaceBook
Si vous possédez un compte sur FaceBook, rendez-vous sur FaceBook et connectez-vous à http://www.facebook.com/developers/. Avant de détailler la création écran par écran d’une application FaceBook toutefois voici les points importants à ne pas oublier.
Les principales recommandations à ne pas oublier
- Vous allez cliquer sur le bouton “créer un application”
- Nommer l’application avec un nom simple
hecube_test_1 ou heMedia
Vous aller pouvoir récupérer les informations suivantes
ID de l'application 93832643825Clé API de6f40aafeee032cfc2b8082652d1866Secret 43a3c9414fc7f7cf94e645d038797a3c
-
IMPORTANT Le paramètre qu’il ne faut pas oublier de mettre en place est bien dans l’onglet connexion. Il faut compléter le champs Connect URL, qui renseigne l’adhésion à votre application FaceBook via votre site web en l’occurrence ici notre blog ou réseau social.
Ecran par écran, créer son application FaceBook
Dans notre exemple, nous mélangeons des captures d’écran pour la création de 2 applications hecube_test_1 et heMedia.
Donner un nom à son application
Apparemment vous pouvez créer autant d’application que vous le souhaitez.
Les informations indispensables de l’application
Ces 3 champs ID de l'application, Clé API, Secret seront utiles dans la configuration du plugin BuddyPress-Facebook Connect 1.1 dans BuddyPress.
Des informations à compléter éventuellement pour l’application
Ajout d’une icône description …etc.
L’application est crée, vous la voyez dans votre manager FaceBook “Mes applications”
Il y a deux applications disponibles : hecube_test_1 et heMedia.
Détails des écrans de l’application
Editer les paramètres de votre application hecube_test_1
L’application FaceBook peut-être même testé depuis un site en local
IMPORTANT : le paramètre qui assure la connexion
Les modalités d’affichage des écrans de votre application FaceBook
Une fois terminé les modifications, vous retournez sur l’écran qui récapitule les propriétés de votre application FaceBook
Activer votre application FaceBook dans BuddyPress
Il s’agit de configurer BuddyPress-Facebook Connect 1.1 une fois ce plugin activé dans BuddyPress. Pour BuddyPresss, nous avons limité notre choix à ce plugin qui vous permettras donc d’interfacer votre réseau social tournant sous BuddyPress avec la “mère de tous les réseaux sociaux”, la grosse centrifugeuse d’identité numérique FaceBook.
Le descriptif du plugin BuddyPress-Facebook Connect 1.1
Enables members to log in to a BuddyPress enabled install with their Facebook account. Based on wp-facebookconnect by Adam Hupp. Requires a Facebook API Key for use. Par Andy Peatling, Adam Hupp.
Configuration du plugin
Accéder aux paramètres de FaceBook Connect
IMPORTANT : les paramètres qui assurent une bonne configuration du plugin
Les 2 champs Clé API, Secret sont à insérer dans la configuration du plugin BuddyPress-Facebook Connect 1.1 dans BuddyPress.
Une fois le plugin activé, vous pouvez insérer cette ligne de code dans le fichier header.php
<?php do_action('fbc_display_login_button') ?>FaceBook <=> BuddyPress
A l’aide du plugin BuddyPress-Facebook Connect 1.1, vous offrez aux utilisateurs de votre réseau social, la possibilité d’unifier leur couple nom d’utilisateur/mot de passe. dans le jargon technique, on parle d’authentification unique ou SSO (en anglais Single Sign-On).
Un combat inégal, FaceBook > BuddyPress
Un bémol à ou cela ! N’allez surtout pas croire toutefois que FaceBook pour permette impunément de siphonner leurs base de données utilisateur. Nada, niente, macache, ouèlou, rien du tout… FaceBook ne vous donnera rien sauf l’illusion de gérer un réseau social par contre vous accentuerez grandement son emprise sur l’identité numérique de chacun car vous popularisez un recours systématique au compte FaceBook comme aujourd’hui personne ne conteste que le webmail c’est Gmail. Non seulement, tous les champs requis lors de l’inscription de BuddyPress seront ignorés par FaceBook mais aucun des champs ne sera remplis avec une information effective par exemple l’adresse email de votre utilisateur inscrit.
Extrait de la table wp_users de BuddyPress
CREATE TABLE IF NOT EXISTS `wp_users` (
`ID` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT,
`user_login` varchar(60) NOT NULL DEFAULT '',
`user_pass` varchar(64) NOT NULL DEFAULT '',
`user_nicename` varchar(50) NOT NULL DEFAULT '',
`user_email` varchar(100) NOT NULL DEFAULT '',
`user_url` varchar(100) NOT NULL DEFAULT '',
`user_registered` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`user_activation_key` varchar(60) NOT NULL DEFAULT '',
`user_status` int(11) NOT NULL DEFAULT '0',
`display_name` varchar(250) NOT NULL DEFAULT '',
`spam` tinyint(2) NOT NULL DEFAULT '0',
`deleted` tinyint(2) NOT NULL DEFAULT '0',
`poke` int(11) NOT NULL,
PRIMARY KEY (`ID`),
KEY `user_login_key` (`user_login`),
KEY `user_nicename` (`user_nicename`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=18 ;
--
-- Contenu de la table `wp_users`
--
INSERT INTO `wp_users` (`ID`, `user_login`, `user_pass`, `user_nicename`, `user_email`, `user_url`, `user_registered`, `user_activation_key`, `user_status`, `display_name`, `spam`, `deleted`, `poke`) VALUES
(2, 'admin', '$P$BOzF3oLG03e25WoxM8IxmYI7LFjuPS.', 'admin', 'info@hecube.net', 'http://', '2009-02-13 16:41:17', '', 1, 'admin', 0, 0, 9),
-- le reste de la table `wp_users`
-- Un utilisateur en provenance de FaceBook
(12, 'hemediahecube', '$P$BA05SArSzrzzYxIURNFYnVXXSoJ8Lm1', 'hemediahecube', 'apps+112518542512.1841931876.cc53e0dacce5473f1f1fa5da797b179b@proxymail.facebook.com', 'http://www.facebook.com/people/Hemedia-Hecube/1841931876', '2009-06-18 15:24:03', '', 0, 'Hemedia Hecube', 0, 0, 0),
-- Des utilisateurs lambda inscrit via l'inscription classique
(14, 'arnaud', '$P$Bfu/8dz9gafwXJnBSQViEEQ6ih5zAZ/', 'arnaud', 'arnaud@hecube.net', 'http://', '2009-06-27 10:41:43', '', 0, 'arnaud', 0, 0, 0),
(15, 'laurent', '$P$BUh5R9WqRbukZgAn08X3177pajRff40', 'laurent', 'laurent@hecube.net', '', '2009-06-28 08:34:49', '', 0, 'laurent', 0, 0, 0),
(16, 'vanina', '$P$BoQrxUOHTE/97NL1..6/CeCwRvXdWd1', 'vanina', 'vanina@hecube.net', 'http://', '2009-06-28 08:38:40', '', 0, 'vanina', 0, 0, 0);
Une erreur possible lors de la déconnexion
Vous allez peut-être rencontrer une erreur lors de la déconnexion avec BuddyPress-Facebook Connect 1.1
Vous pouvez avec l’activation du plugin pour BuddyPress Il y a aussi un petit problème lors de la déconnexion, il vous faudra certainement passé par le lien de déconnexion qui figure dans l’administration et non le lien disponible à droite de votre nom d’utilisateur lorsque vous être connecté(e).
Plugins pour WordPress
Hecube a fait une petite sélection sur les plugins Wordpress permettant de connecter ou de faire interagir votre blog avec le réseau FaceBook.
WP-FacebookConnectWPBookWordbook
1. Le plugin Wordpress WP-FacebookConnect
Il est le plus abouti en terme de connectique. Il vos permettra d’ouvrir véritablement votre blog à tous les utilisateurs que vous connaissez qui sont enregistrés sur FaceBook. De très bonnes vidéos de tutorial existent sur le site en espagnol du créateur. Cf http://www.sociable.es/
et dans la section Pour aller plus loin de cet article
L’extrait du README.txt pour activer le plugin WP-FacebookConnect
1. Copy the plugin to wp-content/plugins/wp-fbconnect under the Wordpress installation.
1. In the Wordpress Admin panel, visit the plugins page and Activate the plugin.
2. Visit the settings page and select "Facebook Connect". Follow the given instructions to configure the plugin and obtain a Facebook API key.
A minimal amount of theme integration is necessary. Open the 'comment.php' file in the theme and add the following line where the Connect login button should be inserted:
<?php do_action('fbc_display_login_button') ?>
The reason for calling fbccommentlogin via doaction instead of directly is to avoid spewing errors if the plugin is disabled. It would be equally correct to directly call fbccomment_login() here.
As a simple example, the comments.php file on my blog looks like:
<?php if ( $user_ID ) : ?>2. Le plugin Wordpress WPBook
Un plugin qui “embeddera” carrément votre blog sur la plate-forme. Un peu complexe à l’installation mais vous aurez le meilleur de FaceBook et de Wordpress
Source : http://wordpress.org/extend/plugins/wpbook/
3. Le plugin Wordpress Wordbook
Un plugin d’envoi croisé des articles de votre Blog. Tous les post de votre blog atterrissent sur votre Facebook Wall. Très pratique pour drainer du contenu vers votre blog depuis FaceBook.
Source : http://wordpress.org/extend/plugins/wordbook/
Pour aller plus loin
BuddyPress, Facebook, plugin, réseau social, Wordpress
22 juillet 2009 dans Accessibilité, Création de site web, Divers, Marketing Web, Référencement, SEO, Tutoriaux, Webdesign, XHTML CSS par Bruno Flaven
Cet article est un rapide tour d’horizon sur ce qui agite le monde du web en matière d’accessibilité, de normes en devenir qui imposent un renouvellement complet dans la manière d’intégrer ou de développer. On va donc aborder des sujets aussi variés que : la problématique de l’accessibilité sur le web, la balise vidéo prévu en HTML 5 ou des choses à ce jour assez confidentielles comme la notion de Microformat, les formats Europass ou HR-XML pour une homogénéisation des CV !
Bref, quelles sont les normes à venir du web ? O tempora, o mores ! Et pourquoi ne pas se livrer à un peu de prospective…
* Ô temps, ô mœurs ! (Cicéron, Catilinaires,I,1)
L’accessibilité sur le web
Sans préambule, la définition de wiki pour une petite mise en bouche !
La définition de wikipédia
L’accessibilité du Web est la problématique de l’accès aux services et contenus en ligne pour les handicapés et les seniors. Définie par des normes techniques établies par la Web Accessibility Initiative (WAI) du World Wide Web Consortium (W3C), elle nécessite un traitement tout au long du cycle de vie d’un site Web, par l’ensemble de ses acteurs, via des méthodes d’applications, des référentiels métiers et une démarche de suivi. Bien qu’elle soit une composante et un levier d’amélioration de leur qualité globale, le degré d’accessibilité effectif des sites Web reste actuellement très faible.
Plutôt indigeste ! En étant un peu ironique, c’est avec ce genre de définition que l’on dégoûte les professionnel(le)s de la profession de s’intéresser à l’accessibilité tant cela sent le « jargonnage technico-informatico ». Toutefois une fois, la première poussée urticante que peut vous donner cette définition et expurger du jargon, cette définition contient quelques informations essentielles à mes yeux :
Ce qu’il faut retenir de cette définition
- Une prise de conscience encore balbutiante des préoccupations d’accessibilité par les professionnel(le)s du web. Vous ne le serez plus après la lecture de cette excellent article !
- La notion de cycle de vie d’un site web : naissance, vie, mort, résurrection ? Alléluia ! Un site doit être en constante évolution de préférence vers une plus grande accessibilité ! Non pas possible ??!
- Un marché en pleine explosion dans les pays développés (le marché des seniors). Si vous souhaitez cibler ce marché avec vos prestations de service mieux faut être « aware » des questions d’accessibilité. Il en va de même pour la réalisation de site pour le compte d’administrations ou dans le milieu associatif… C’est un peu leur tarte à la crème, l’accessibilité.
Les recommandations à suivre
Au-delà là de notre compréhension, quelles règles puis-je suivre lors de la création d’un site pour répondre aux principaux critères d’accessibilité. Le site pompage.net en fournit une liste qui est à notre avis un bon point de départ. La liste est ci-dessous.
Nous privilégierons pour notre part les 5 points suivants en nous inspirant de cette liste.
La liste hecube
- Validation auprès du validator W3C. (http://validator.w3.org/)
- Pas de frames. Tant d’un point de vue du référencement que de l’accessibilité, la frame pue !
- Remplir les balises
alt, title pour les liens, les images, les titres des pages. Très bon pour le référencement de toutes les façons.
- Offrir la possibilité d’accroitre la taille du texte via un bouton
- Utiliser les outils tel que Firebug 1.4.0 (https://addons.mozilla.org/fr/firefox/addon/1843), Web Developer 1.1.8 (https://addons.mozilla.org/fr/firefox/addon/60) pour faire des tests sur vos pages. Il s’agit aussi d’un conseil pour l’intégration même.
La liste du site pompage.net pour l’accessibilté.
- Valider le HTML et les CSS
- Pas de cadres (frames), svp
- Les outils automatiques d’évaluation d’accessibilité
- Les images et le texte alternatif
- S’assurer de l’utilisation non intrusive de JavaScript
- Augmenter la taille du texte
- Évaluer la sémantique du code
- Désactiver les CSS
- Utiliser Fangs pour simuler un lecteur d’écran
Source : http://www.pompage.net/pompe/evaluer-accessibilite-site-2/
Le liste du blog.kinoa.com
- Séparer la mise en forme du contenu.
- Prévoir des alternatives aux Scripts.
- Proposer des alternatives textes.
- Proposer des formats alternatifs en téléchargement.
- Eviter d’ouvrir des liens dans une nouvelle fenêtre.
- Eviter les frames. Les frames ou cadres sont aujourd’hui de moins en moins utilisées.
- Proposer systématiquement un plan du site et un moteur de recherche.
- Proposer des titres explicites à vos pages.
- Vérifier les contrastes de vos couleurs.
- Utiliser les technologies du W3C.
Source : http://blog.kinoa.com/2008/05/26/10-astuces-pour-ameliorer-l-accessibilite-de-votre-site-web/
Des liens utiles sur l’accessibilité
La balise vidéo
Voilà une innovation qui si elle se mets en place et se répand va faire du bruit ! En effet, vous serez en mesure de contourner toutes les solutions aujourd’hui propriétaires qui vous permettent de visualiser de la vidéo ! Bye bye, donc, Windows Media player, Silverlight, Adobe Flash… L’enjeu est donc de taille et on comprend mieux pourquoi dailymotion est sur les rangs pour l’adoption de ce nouveau format par exemple.
Les avantages comparés de <video>...</video>
Cette balise est propre à l’HTML 5, elle permet donc de lancer un fichier vidéo ou une vidéo en streaming. Par ailleurs, vous possédez une collection d’attributsautoplay, controls, end, height, loopend... qui permet par exemple d’insérer des boutons de contrôle…
Vous êtes ici en terrain connu si vous avez des notions d’HTML, c’est une nouvelle balise comme img par exemple.
Si la balise se diffuse et devient un standard dans son utilisation, cela enverra dans les poubelles de l’histoire toutes les solutions existantes du marché. Ce phénomène ne s’est-il pas produit dans les technologies de streaming avec aujourd’hui l’utilisation en quasi monopole de la vidéo .flv
Microformat
Avec cette nouveauté, nous sommes carrément plus dans un possible avenir que dans une réalité concrète. Les Microformats sont des petits modèles de HTML pour représenter des choses communément publiées comme des personnes, des événements, des billets de blog, des critiques et des mots-clés dans les pages web. L’objectif est ambitieux si on lit plus avant notamment concernant la réindextion possible des données presentées de la sorte.
On voit un peu quelle pourrait être la finalité de tout cela dans la définition donnée par “Que sont les Microformats ?”
Les microformats sont un moyen d’ajouter un simple balisage à des items de données lisibles par des humains, tels que des événements, des détails sur un contact ou des endroits, sur des pages web, de telle façon que l’information puisse être extraite par le logiciel et indexée, cherchée, sauvegardée, référencée ou combinée.
Le microformat appliqué à une vcard
La “bouillie” de vcard
BEGIN:VCARD
VERSION:2.1
N:Hemedia;Hecube;;;
FN:Contact Hecube
ORG:Hemedia.net Hecube.net;
TITLE:Contact Hecube
EMAIL;INTERNET;HOME:contact@hecube.net
TEL;WORK:33 (0)1 43 71 80 03
ADR;WORK:;;23, villa riberolles;Paris;France;75020;
END:VCARD
Les mêmes informations structurées à l’aide des microformats
<div class="vcard">
<span class="fn"><span class="given-name">Hecube</span>
<span class="family-name">Hemedia</span></span>,
<span class="title">Contact Hecube</span>,
<div class="org">Hemedia.net Hecube.net</div>
<div class="adr">
<div class="street-address">23, villa riberolles</div>
<span class="locality">Paris</span>,
<span class="region">France</span>
<span class="postal-code">1007502000</span>
</div>
<div>Tel: <span class="tel">33 (0)1 43 71 80 03</span></div>
<div>Email:
<span class="email">contact@hecube.net</span></div>
</div>
Pas en REST…
La philosophie du Microformat revendique clairement une parenté avec celle de REST, pour les familiers du développement en RoR et de l’univers des “web service”.
Un définition de REST par le JDN
L’architecture REST n’est pas un protocole en soi, ni une technologie, mais une “philosophie” de l’utilisation du Web. Le protocole utilisé ici est simplement HTTP avec ses méthodes (GET, POST et les autres…). Cette philosophie estime qu’il n’est, dans bien des cas, pas nécessaire de faire appel aux couches d’abstraction proposées par SOAP et XML-RPC, et que les méthodes de HTTP, combinées avec de bonne URIs, suffisent amplement dans la majorité des cas.
HR-XML
Bien qu’il s’agit d’une initiative dans un secteur particulier celui des ressources humaines, cet exemple est intéressant car il peut à terme tous nous concerner en effet qui n’a pas écrit un CV une fois dans sa vie. L’idée est simple établir un standard, sur la base de XML, le HR-XML. Ce dernier propose une structure de documents XML qui se prête tout particulièrement à un stockage / exploitation de curriculum vitae.
Plusieurs questions apparaissent dès lors :
- Que devient alors ma mise en page sous Word si magistrale qui fait de mon CV une monstruosité numérique !
- Quid du droit à l’anonymat numérique, mon CV est en base et donc je suis répertorié et pire “xmlisée” :):)
Plus sérieusement, ce type d’initiative chercher à normaliser un peu mieux l’extrême quantité et profusion d’informations disponibles sur le Web comme le sont les CV, les fiches produits, les tutoriaux. Bref tous les documents pourraient connaître ce type d’indexation et d’ordonnancement pour faciliter leur accessibilité par tous.
Accessibilité, HR-XML, HTML 5, Microformat, W3C, XHTML
20 juillet 2009 dans Divers, Iphone, mobile, Mac, PHP, MYSQL, Tutoriaux, Widget, Gadget, XHTML CSS par Bruno Flaven
Si vous faites de l’intégration et que vous avez des notions de Javascript et de CSS, vous pouvez sans aucun doute vous en tirer dans la création de widget. Compte tenu de l’avenir prometteur qui s’ouvre à ce type de mini-applications, ce pourrait être un plus sur votre CV. Enfin, dites-vous bien que les pratiques pour la création d’un widget Apple sont très similaires à celles des autres plates-formes du marché : Yahoo, Google… Pour ne citer que les principales plates-formes concurrentes. Un simple intégrateur avec des notions de développement peut faire d’un coup son entrée sur le “bureau” grâce à ses widgets. C’est la gloire et la fortune assurées !
Mais, au fait c’est quoi un widget !?
Qu’est-ce qu’un “widget” ?
Pour Apple, si on s’en tient à la “baseline” du site en français, on aura une idée concrète ce que c’est ! pas vraiment la peine de chercher plus loin…
Des mini-applications astucieuses pour Mac OS X
Source : http://www.apple.com/fr/downloads/dashboard
Pour les amateurs de sémantique, on pourra toujours se reporter à la définition donnée par Wikipedia.
http://fr.wikipedia.org/wiki/Widget
La version anglaise est moins didactique Amazing widgets for your Mac OS X Dashboard
Le dashboard ou tableau de bord
Le dashboard n’est rien d’autre que le tableau de bord de votre Mac. A titre d’exemple, ci-dessous le tableau de bord d’un utilisateur de mac, qui de toute évidence est aussi un fan de ski ! Vous aurez donc compris que celui-ci peut-être personnalisé à loisir à l’aide des widgets de votre choix.
Télécharger la dernière version de Xcode
Pour commencer à développer, il vous faut d’abord télécharger la plate-forme de développement mis à votre disposition par Apple. Pour recevoir ce gros fichier, pas loin de 1Go, il vous faudra en plus d’une bonne connexion, un compte ADC (Apple Developer Connection), c’est GRATUIT. Toute la procédure se fait en ligne et se fait assez vite. Une fois passée l’inscription, vous pouvez procéder immédiatement au téléchargement de xcode313_2736_developerdvd.dmg.
To download Xcode and access a range of development videos, log in with your ADC member Apple ID or register for a free ADC Online Membership.
Source : http://developer.apple.com/products/membership
Une fois sur le page, http://developer.apple.com/mac/ et muni de votre identifiant/mot de passe ADC, vous pouvez télécharger la dernière version de Xcode
Se loguer grâce à votre identifiant/mot de passe ADC
Télécharger xcode313_2736_developerdvd.dmg, c’est un gros fichier donc soyez patient !
Désinstaller un widget du Dashboard
Un
Le signe + en bas à gauche permet d’ouvrir le gestionnaire de widgets.
Dès que le manager de widgets est ouvert, des croix apparaissent sur chacun des widgets de votre dashboard, il ne vous reste plus qu’à fermer les widgets et de facto les supprimer de votre dashboard.
Image d’imageshack.us et du site apple
Mac OS X 10.4.2 or later: Installing and removing Dashboard widgets
http://support.apple.com/kb/HT2254
Créer votre propre “widget” ?
Nous allons créer un widget qui va passer des valeurs en $_GET à un fichier index.php qui fonctionne sur un site en local. L’adresse que nous allons utiliser est la suivante, voici un exemple de ce que le widget va appeler : http://127.0.0.1/widget_apple/index.php?textField1=200&horizontalSlider1=0.21739130434782608
Pour mémoire, si vous souhaitez installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :
Le fichier .php
Voilà le code du fichier qui sera appelé par notre widget. Un simple echo des valeurs passés en $_GET.
<?php
/* Les valeurs vont être envoyées en $_GET à votre fichier index.php */
/* http://127.0.0.1/widget_apple/index.php?textField1=200&horizontalSlider1=0.21739130434782608 */
/*
$textField1 = $_GET['textField1'];
$horizontalSlider1 = $_GET['horizontalSlider1'];
*/
/* output the value textField1 */
echo ('<h2>textField1 => '.$_GET['textField1'].'</h2>');
/* output the value horizontalSlider1 */
echo ('<h2>horizontalSlider1 => '.$_GET['horizontalSlider1'].'</h2>');
?>Le projet dashcube_W_a.dcproj
Le projet dashcube_W_a.dcproj comprend deux vues : frontend et backend.
Une vue du frontend dans dashcode
Une vue du backend dans dashcode
Le code source javascript du projet dashcube_W_a.dcproj
C’est la dorsale de votre projet avec le fichier http://127.0.0.1/widget_apple/index.php, tout est contenu dans main.js
Le code de main.js
/*
This file was generated by Dashcode.
You may edit this file to customize your widget or web page
according to the license.txt file included in the project.
*/
//
// Function: load()
// Called by HTML body element's onload event when the widget is ready to start
//
function load()
{
dashcode.setupParts();
}
//
// Function: remove()
// Called when the widget has been removed from the Dashboard
//
function remove()
{
// Stop any timers to prevent CPU usage
// Remove any preferences as needed
// widget.setPreferenceForKey(null, dashcode.createInstancePreferenceKey("your-key"));
}
//
// Function: hide()
// Called when the widget has been hidden
//
function hide()
{
// Stop any timers to prevent CPU usage
}
//
// Function: show()
// Called when the widget has been shown
//
function show()
{
// Restart any timers that were stopped on hide
}
//
// Function: sync()
// Called when the widget has been synchronized with .Mac
//
function sync()
{
// Retrieve any preference values that you need to be synchronized here
// Use this for an instance key's value:
// instancePreferenceValue = widget.preferenceForKey(null, dashcode.createInstancePreferenceKey("your-key"));
//
// Or this for global key's value:
// globalPreferenceValue = widget.preferenceForKey(null, "your-key");
}
//
// Function: showBack(event)
// Called when the info button is clicked to show the back of the widget
//
// event: onClick event from the info button
//
function showBack(event)
{
var front = document.getElementById("front");
var back = document.getElementById("back");
if (window.widget) {
widget.prepareForTransition("ToBack");
}
front.style.display = "none";
back.style.display = "block";
if (window.widget) {
setTimeout('widget.performTransition();', 0);
}
}
//
// Function: showFront(event)
// Called when the done button is clicked from the back of the widget
//
// event: onClick event from the done button
//
function showFront(event)
{
var front = document.getElementById("front");
var back = document.getElementById("back");
if (window.widget) {
widget.prepareForTransition("ToFront");
}
front.style.display="block";
back.style.display="none";
if (window.widget) {
setTimeout('widget.performTransition();', 0);
}
}
if (window.widget) {
widget.onremove = remove;
widget.onhide = hide;
widget.onshow = show;
widget.onsync = sync;
}
// testcode
function showMypage(event) {
var websiteURL = document.getElementById("cfgValueWebsiteUrl").value;
var textField1 = document.getElementById("textfield1").value;
var horizontalSlider1 = document.getElementById("horizontalSlider1").object.value;
var websiteURI = "textField1="+textField1+"&"+"horizontalSlider1="+horizontalSlider1;
widget.openURL(websiteURL+"?"+websiteURI);
} // EOFConfigurer l’URL dans le backend de votre widget
Il faudra indiquer au widget vers quel fichier envoyé les valeurs récoltées via votre widget. Nous l’indiquons par défaut directement dans la backend.
Le rendu dans la navigateur
Les deux valeurs sont issus de ce qui a été saisi dans le widget. le champs textField1 affiche le chiffre 200 et le champs horizontalSlider1 affiche la valeur numérique qui est le résulat du déplacement du curseur.
Conclusion : L’élaboration d’un widget sur la plate-forme Apple est donc trivial. Il reste que votre widget peut devenir beaucoup plus sophistiqué que ce que nous venons de montrer. Comme pour les applications développées sous Flex, ce type d’application est appeler à se généraliser Cf Flex , Curl et Twitter - créer une application en Flex interfacé avec Twitter . Il deviendra même un facteur décisif pour rejoindre définitivement l’univers Mac et qui quitter à jamais la plate-forme Windows, “hasta la vista baby…” si vous voyez ce que je veux dire. !
Pour aller plus loin
Vidéos
Un tutorial bien fait sur la création d’une ” Xcode 3 Beep Application”
Un des vidéos de la série Mac vs PC, sur vista justement…
Apple, application, CSS, Dashboard, Javascript, Widget, XHTML
11 juillet 2009 dans Accessibilité, Création de site web, Framework, Tutoriaux, Webdesign, XHTML CSS par Bruno Flaven
Comme une tendance qui s’impose désormais massivement pour le PHP notamment, l’apparition des frameworks gagne aussi les feuille de style CSS. Après le déferlement déjà ancien des CSS à la Zen Garden qui éradiqua les table du code html, voilà donc l’étape suivante qui est celle de concevoir ses CSS à l’aide d’un framework. Vous pourrez éventuellement tirer profit des mêmes avantages que des frameworks que vous pouvez connaître par ailleurs dans un autre langage: PHP, Python, Ruby on Rails, Javascript…etc.
A ce titre, si le PHP est votre langage de prédilection, je vous invite à lire un article de ce blog que nous avons consacré à notre framework php favori : CodeIgniter.
Plus doctement, l’effervescence dans le monde de la CSS est le reflet d’interrogations plus large sur la conception des IHM et leur portabilité sur des supports existants ou futurs. Le sujet inclut assurément les enjeux d’accessibilité ou la construction de widgets par exemple. Implicitement, cela pose deux question : que restera-t-il une fois l’agitation passée et enfin aujourd’hui est-ce opportun de faire mouvement ?
Le choix du framework CSS
Nous avons arrêté notre choix sur 3 Frameworks CSS dont la notoriété va croissante. Pour une liste plus importante, reportez-vous à l’article de w3avenue.com qui indexe un plus grand des frameworks CSS existants et les classe selon la typologie suivante : “Complete CSS Frameworks” vs “Limited CSS Frameworks”. Pour cette article, nous nous plaçons dans ce que l’article nomme les “Complete CSS Frameworks”, c’est à dire ce les frameworks les plus exhaustifs et complets en terme de possibilités .
Les critères de sélection du framework
Ces critères sont intrinsèquement liés aux principes même du framework, en clair tout bon framework CSS répond à ces critères. C’est un pré-requis, les 3 frameworks sélectionnés y répondent. La différence ne se fera ainsi que sur d’éventuels plus mis à disposition de l’utilisateur outre l’opportunité d’utiliser un framework pour votre projet de site. Les principaux critères sont les suivants :
- La notion de reset. Le reset bazarde toutes les règles par défaut établies par n’importe lequel des navigateurs. Vous partez donc sur un style “fresh and clean”. C’est un des avantages mais qui peut-être utilisé indépendamment de l’utilisation d’un CSS.
- La notion de fonts ou Typography. C’est grosso modo le fichier de gestion des polices sur un site. Usage complexe et déterminant si il en est pour appartenir à ce qui a constitué un des points importants de la vieille révolution dite 2.0 :
font-family:verdana,"Lucida Grande",arial,helvetica,sans-serif; auquel on peut ajouter font-family:georgia; parce j’ai “georgia on my mind”.
- La notion de “grid” ou “layout”. C’est la CSS qui permettra de dessiner vos interfaces et leur rendu sous tous les navigateurs
- Une prise en main facilitée comprenant de la documentation, l’existence éventuel de tutoriaux, des exemples…etc
La marque Bleue BLUEPRINT
Ce framework répond à l’ensemble des points cités… L’inclusion est extrêmement aisé et il présente un tutorial et de nombreux exemples pour vous aider à la prise en main. Ce framework inclut même deux scripts pour vous aider dans votre optimisation CSS.
Les balises d’insertion
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->Deux scripts
- L’un de validation en ruby nommé
Validator. Il permet à tout moment de faire valider vos CSS aux règles W3C.
- L’autre de compression de CSS en ruby toujours nommé
Compressor. Comme les fichiers CSS sont eux mêmes compressés, il vous faudra les recompresser une fois vos changements terminés. Le compressor est donc là pour vous aider.
Il vous faudra tout de même installer ruby pour pouvoir vous en servir. Un usage plus sophistiqué peut-être fait avec le recours à des fichiers de configuration .yml. Un exemple de ce type de fichier vous est fourni à titre d’exemple.
Pour connaître les arguments à passer pour ce sript
L’utilisation du script de compression avec un fichier de configuration .yml
ruby compress.rb -p project1
exmple de fichier .yml
project1:
path: /path/to/my/project/stylesheets
namespace: custom-namespace-1-
custom_css:
ie.css:
- custom-ie.css
print.css:
- docs.css
- my-print-styles.css
screen.css:
- subfolder-of-stylesheets/sub_css.css
custom_layout:
column_count: 12
column_width: 70
gutter_width: 10Conclusion : un framework très complet, très documenté mais un peu ardu dans sa compréhension.
YAML “Yet Another Multicolumn Layout”
De loin, la meilleur documentation et la meilleur prise ne main pour tout le monde du débutant à l’intégrateur plus aguerri. Il existe sur la homepage du site officiel, tout ce que vous devez connaître pour utiliser ce framework : YAML Download-Package, YAML Documentation (pdf en anglais et en allemand), YAML “Simple Project” Template.
Le site mets aussi un “YAML-Builder” qui facilitera l’utilisation du framework. Avant, désactivez firebug si vous êtes sur firefox car c’est incompatible.
Les écrans du YAML-Builder
Le YAML-Builder en conflit avec firebug
Le YAML-Builder en action une fois firebug désactivé
Le YAML-Builder vous permet de visualiser votre CSS et de récupérer le code
Conclusion : Le plus pédagogique, le YAML-Builder est un atout pour commencer.
Le contenu du readme.txt de YAML “Yet Another Multicolumn Layout”
/**
* "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
*
* @copyright Copyright 2005-2009, Dirk Jesse
* @license CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
* YAML-C (http://www.yaml.de/en/license/license-conditions.html)
* @link http://www.yaml.de
* @package yaml
* @version 3.1
* @revision $Revision: 343 $
* @lastmodified $Date: 2009-01-19 23:41:32 +0100 (Mo, 19. Jan 2009) $
*/
Table of contents
---------------------------
* documentation/
The full documentation is available for download at http://www.yaml.de/en/. The documentation comes as a
PDF file in German and English.
* examples/
This folder contains several examples for the practical usage of the YAML framework.
It's all there for your inspiration.
* js/
This folder contains a small script for dumy texts as well as the JavaScript library jQuery.
* tools/
This folder contains several tools for developing layouts. The files in this folder are not necessary
for the framework's functionality and need not be placed on the live server.
* yaml/
This folder contains all framework files. To use the framework, copy this folder onto your webserver.
The current version 3.1.x
-------------------------
A detailed overview of all the new functions and modifications to the new version is available in the Changelog (http://www.yaml.de/en/documentation/changelog/version-3x.html).Elastic CSS Framework
Le dernier des framework , outre qu’il soit en accord aux principes énoncés plus haut, les créateurs indiquent une information qui n’est présente dans aucun des frameworks précédents et qui a quand même une importance capitale : la compatibilité avec les navigateurs et les plates-formes utilisateurs.
Un tour rapide des navigateurs sans toucher l’Elastic
Les créateurs d’Elastic affirment que leur framework a été testé sur les couples navigateurs/plates-formes utilisateurs suivantes, autant dire presque 99% du marché !
- Firefox 2 mac, windows, linux
- Firefox 3 mac, windows, linux
- Safari 3 mac and windows
- Safari 4
- Opera 9.6 linux
- Internet Explorer 6
- Internet Explorer 7
- Internet Explorer 8 Beta 2
Le code d’insertion du framework Elastic
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="base.css" />
<link rel="stylesheet" type="text/css" media="all" href="fonts.css" />
<link rel="stylesheet" type="text/css" media="all" href="class.css" />
<link rel="stylesheet" type="text/css" media="all" href="grid.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<script src="jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script src="engine.js" type="text/javascript" language="javascript" charset="utf-8"></script>
</head>
<body>
<div class="unit three-columns">
<div class="column">first column content</div>
<div class="column">second column content</div>
<div class="column">third column content</div>
</div>
</body>
</html>
Modèles d’Elastic
Un très grand nombre de modèles sont à votre disposition, ce qui n’est jamais inutile.
layout based on 1 column, layout based on 2 columns,... But i really really need more columns
Les templates procèdent par ce jeu de questions-réponses plutôt simple et efficace pour l’implémentation.
Jquery to the rescue
Le framework embarque avec lui le framework javascript jquery pour vous permettre éventuellement de passer de nouvelles valeurs à la volée pour des resizes notamment.
<script type="text/javascript" language="javascript" charset="utf-8">
// direct call
Elastic.refresh();
</script>
<script type="text/javascript" language="javascript" charset="utf-8">
// jquery event invocation
$(document).trigger('elastic');
</script>Conclusion : Le plus rapide dans sa prise en main. Un grand nombre de modèles à disposition prêt à l’emploi et une information sur la validité sur les plate-formes utilisateurs.
Utiliser un framework CSS ou pas ?
Finalement, comme le dit un article cité plus bas Cf MarcArea Weblog, les frameworks sont un peu lourds à manipuler pour un petit projet avec peu d’intervenants, peu de jours de production et de développement. Toutefois, sur un projet plus ambitieux, notamment en collaboration avec plusieurs intégrateurs XHTML, c’est une façon de normaliser la nomenclature des classes et de faciliter la collaboration. Vous aurez ainsi les mêmes avantages que dans un autre framework pour un langage différent type PHP par exemple, à savoir normalisation et réutilisation. Le framework est bien sûr totalement inopérant si vous partez sur un CMS genre Drupal, Worpress puisque vous êtes plutôt dans le “theming” propre au CMS utilisé, à moins de substituer l’ensemble des CSS par celles du framework, ce qui est un travail fastidieux. Idéalement il resterait sans doute à créer une librairie dans un langage dynamique pour permettre de l’output de CSS.
Pour aller plus loin
Vidéos
Le fichier CSS signifie aussi “Cansei de Ser Sexy”. Pointu dans son genre mais rien à voir avec les CSS du dessus.
CSS - - Off The Hook
Blueprint, CSS, Elastic, Framework, YAML
6 juillet 2009 dans Divers, Image, Graphisme, Photoshop, Linux, Apache, Mac, Vidéo par Bruno Flaven
Installer MacPorts sur un Mac, c’est pouvoir piocher dans un très grand nombre d’applications, disponibles uniquement sur Linux à l’origine. A ce jour, vous pouvez donc faire votre choix parmi plus de 5700 applications qui existent actuellement sur MacPorts. Applications classés dans les catégories aussi diverses que variées de “accounting” (comptabilité) à “multimedia” (multimédia) en passant par “databases” (base de données)…
Il est vrai que l’on peut se montrer réticent à vouloir installer ces applications. En effet, lancer un logiciel en ligne de commande n’est pas forcément sexy. Toutefois, en installant certaines de ces applications, vous pourrez entrevoir ce qu’il est possible de faire avec le monde de l’open source et de commencer à connaître la joie de l’automatisation ou l’automation avec comme conséquence directe l’accroissement de votre productivité marginale par la truchement de la délégation à un ordinateur des taches répétitives !
S’affranchir des logiciels propriétaires
Sur ce blog, nous avons consacré plusieurs articles à ces logiciels libres qui vous permettent de réaliser de nombreuses opérations dans les domaines de la photo ou de la vidéo. Bien sur, il s’agissait de montrer le potentiel à partir de version compilée notamment sous windows, sur Mac, vous pouvez installer et accéder à ces logiciels en les installant à l’aide de macports.
Télécharger MacPorts et l’installer
Rendez-vous sur le “repository” pour télécharger la version qui convient à votre mac, c’est en suite un fichier .dmg qu’il vous faudra installer. Une fois la chose accomplie, reste à comprendre les commandes.
Le projet se nommé initialement DarwinPorts puis est devenu MacPorts
Le sudo coup
On va se débarassser du sudo d’entrée de jeu pour faire en sorte que les commandes à passer soit plus simple :):) geek mais pas trop tout de même.
Pour simplifier les commandes nous allons passer en root sur notre mac. Il sera alors plus simple de passer des commandes. Il vous sera demandé de rentrer votre mot de passe, attention comme sur Linux, ce mot de passe n’apparait jamais… donc ne vous attendez pas à *******
Les commandes pour survivre à MacPorts
Quelques commandes pour survivre dans ce milieu hostile…
Pour avoir accès au manuel
Liste des logiciels disponibles dans l’absolu…
Liste des logiciels installés sur votre ordinateur…
Un listing que peut produire la commande précédente…
a52dec @0.7.4_0 (active)
atk @1.22.0_1 (active)
autoconf @2.62_0 (active)
automake @1.10.1_0 (active)
avidemux @2.4.1_0 (active)
bison @2.3_2 (active)
bzip2 @1.0.5_1 (active)
cairo @1.6.4_1+macosx (active)
cmake @2.6.1_0 (active)
curl @7.19.5_0 (active)
dbus @1.2.1_0 (active)
dbus-glib @0.76_0 (active)
desktop-file-utils @0.15_0 (active)
expat @2.0.1_0 (active)
faac @1.26_0 (active)
ffmpeg @0.4.9-pre1_10+a52+darwin_i386+gpl+lame+x264+xvid (active)
fontconfig @2.6.0_0+macosx (active)
freetype @2.3.7_1+bytecode (active)
gconf @2.22.0_0 (active)
gettext @0.17_3 (active)
ghostscript @8.63_0 (active)
glib2 @2.16.5_0+darwin_9 (active)
gmake @3.81_0 (active)
gnome-common @2.20.0_0 (active)
gnome-mime-data @2.18.0_3 (active)
gnome-vfs @2.22.0_1 (active)
gperf @3.0.3_0 (active)
gtk2 @2.12.9_0+x11 (active)
help2man @1.36.4_1 (active)
ImageMagick @6.4.2-10_0+gs+jbig+jpeg2+lcms+q16+wmf (active)
intltool @0.37.1_0 (active)
jasper @1.900.1_1+darwin_9 (active)
jbigkit @1.6_0 (active)
jpeg @6b_2 (active)
lame @3.98_0 (active)
lcms @1.17_0 (active)
libart_lgpl @2.3.20_0 (active)
libbonobo @2.22.0_0 (active)
libcroco @0.6.1_1 (active)
libdts @0.0.2_0 (active)
libdv @1.0.0_0+darwin_i386+sdl (active)
libgsf @1.14.8_0 (active)
libiconv @1.12_0 (active)
libidl @0.8.10_0 (active)
libmad @0.15.1b_1 (active)
libogg @1.1.3_2 (active)
libpixman @0.10.0_0 (active)
libpng @1.2.30_0 (active)
librsvg @2.22.2_0 (active)
libsdl @1.2.13_2 (active)
libsndfile @1.0.17_1 (active)
libtheora @1.0beta2_0+darwin_9_i386 (active)
libtool @1.5.26_0 (active)
libungif @4.1.4_2 (active)
libvorbis @1.2.0_1 (active)
libwmf @0.2.8.4_0 (active)
libxml2 @2.6.32_1 (active)
libxslt @1.1.23_1 (active)
lzo2 @2.02_2+darwin_9 (active)
m4 @1.4.11_0 (active)
mjpegtools @1.6.2_2+darwin_9 (active)
MPlayer @1.0rc2_2+binary_codecs+darwin_8+dts+dv+faac+macosx+sdl+theora+twolame+xvid (active)
ncurses @5.6_0 (active)
ncursesw @5.6_1 (active)
openssl @0.9.8h_0 (active)
orbit2 @2.14.12_0 (active)
ossp-uuid @1.6.1_0 (active)
p5-locale-gettext @1.05_0 (active)
p5-xml-parser @2.36_0 (active)
pango @1.20.5_0 (active)
perl5.8 @5.8.8_3+darwin_9 (active)
pkgconfig @0.23_0 (active)
popt @1.13_0 (active)
readline @5.2.012_1 (active)
render @0.9_1 (active)
shared-mime-info @0.40_0 (active)
tiff @3.8.2_2+darwin_9+macosx (active)
twolame @0.3.3_1 (active)
urw-fonts @1.0.7pre44_0 (active)
x264 @20080724_1 (active)
Xft2 @2.1.12_0 (active)
xorg-util-macros @1.1.5_0 (active)
xorg-xproto @7.0.11_1 (active)
xrender @0.9.0_2 (active)
XviD @1.1.3_1 (active)
yasm @0.7.1_0 (active)
zlib @1.2.3_1 (active)
La version de MacPorts que vous venez d’installer
Exemple 1 : l’installation de FFmpeg
C’est mon pêché mignon, jouer avec de la vidéo.
Chercher son jouet
Chercher son jouet et ses accessoires
Oui, je veux jouer moi aussi
port install ffmpeg +gpl +lame +x264 +xvid
C’est installé, c’est quoi la version de mon jouet…
Source : http://www.haykranen.nl/2007/11/21/howto-install-and-use-ffmpeg-on-mac-os-x-leopard/
Exemple 2 : l’installation de postgresql83-server
La première commande
port install port list postgresql83-server
Défaire ce qui vient d’être fait.. Si besoin, les commandes sont valables pour tous les logiciels autre que postgresql83 et postgresql83-server
port uninstall postgresql83
port uninstall postgresql83-server
port -f uninstall postgresql83
port -f uninstall postgresql83-server
sudo port -f uninstall postgresql83 postgresql83-server
Configuration
mkdir -p /opt/local/var/db/postgresql83/defaultdb
chown postgres:postgres /opt/local/var/db/postgresql83/defaultdb
su postgres -c '/opt/local/lib/postgresql83/bin/initdb -D /opt/local/var/db/postgresql83/defaultdb'
pgAdmin III
Recherchez le nom du paquet qui correspond à la version 8.3 de PostgreSQL
Pour connaître toutes les options d’installation, tapez la commande suivante
port variants postgresql83-server
Nous allons installer PostgreSQL 8.3 avec les options d’installation par défaut
port -d selfupdated
port install postgresql83-server
port install postgresql83 postgresql83-server
Source : http://blog.myprod.net/2008/11/23/installer-postgresql-83-avec-macports/
Pour aller plus loin
Mac, Mac Os X, MacPorts, open source
6 juillet 2009 dans Divers, Flash, Actionscript, Flex, Flex, PHP, MYSQL, Réseaux sociaux, Tutoriaux, XHTML CSS par Bruno Flaven
Il existe deux façons de concevoir votre application Flex à destination de twitter soit vous allez publié vers l’API de twitter (disons en push pour faire un peu genre je connais les mots anglais qui assurent grave) soit vous allez rapatrier des éléments de l’API twitter (en pull). On va donc présenter ces 2 scénarios. Nous allons dans tous les cas faire appel à la sainte trilogie : Flex , Curl et Twitter
Qu’on se le dise, ces applications Flex vont bouleverser et bouleversent déjà totalement la donne sur les programmes disponibles sur les ordinateurs personnels. On voit désormais apparaître sur le marché de l’ordinateur personnel, une multitude d’applications adossées à des API de sites tel que Twitter, Google ou Facebook par exemple. Ces applications sont presque aujourd’hui aussi indispensables que le furent en leur temps MS-Word ou Photoshop.
Ce constat appelle deux remarques à mon sens :
- Un concept qui semble émerger et qui semble être porteur : Un site peut être avant tout une “Restful API”, qui favorise une adoption par l’usage, ainsi donc plus d’informations sur le fonctionnement de l’application, moins de services définis à priori et de marketing car finalement l’adoption par les utilisateurs fait office de promotion !
- Faites l’expérience en vous interdisant une journée l’utilisation de google, de twitter ou de facebook, vous verrez alors non sans stupeur doute votre niveau de dépendance à ces outils et ce n’est qu’un début.
Pour cette article, on va donc créer deux applications simples, pour montrer la capacité de Flex couplé à une “Restful API” de créer rapidement une application de bonne facture. On aura donc deux scénarios :
Scénario 1 - Application de recherche sur twitter (pull)
Scénario 2 - Application pour poster des “tweets” sur twitter (push)
On commence donc par l’application de recherche sur Twitter.
Scénario 1 - Application de recherche sur twitter (pull)
Les informations sur l’API twitter sont disponibles sur le site de twitter.
Un exemple de flux sortant de Twitter.com
Voici le feed xml retourné par Twitter.com de notre recherchehttp://search.twitter.com/search.atom?lang=fr&q=hemedia
Ce qui s’affiche dans la navigateur
Ce qui se cache sous le navigateur
Le code de ce fil né de la recherche sur twitter
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns:google="http://base.google.com/ns/1.0" xml:lang="en-US" xmlns:openSearch="http://a9.com/-/spec/opensearch/1.1/" xmlns="http://www.w3.org/2005/Atom" xmlns:twitter="http://api.twitter.com/">
<id>tag:search.twitter.com,2005:search/hemedia</id>
<link type="text/html" rel="alternate" href="http://search.twitter.com/search?q=hemedia"/>
<link type="application/atom+xml" rel="self" href="http://search.twitter.com/search.atom?lang=fr&q=hemedia"/>
<title>hemedia - Twitter Search</title>
<link type="application/opensearchdescription+xml" rel="search" href="http://search.twitter.com/opensearch.xml"/>
<link type="application/atom+xml" rel="refresh" href="http://search.twitter.com/search.atom?lang=fr&q=hemedia&since_id=2418125014"/>
<twitter:warning>adjusted since_id, it was older than allowed</twitter:warning>
<updated>2009-06-25T21:56:30Z</updated>
<openSearch:itemsPerPage>15</openSearch:itemsPerPage>
<openSearch:language>fr</openSearch:language>
<entry>
<id>tag:search.twitter.com,2005:2332989105</id>
<published>2009-06-25T21:56:30Z</published>
<link type="text/html" rel="alternate" href="http://twitter.com/hemedia/statuses/2332989105"/>
<title>Hemedia répond à la question en vous disant de ne pas mettre les « Elggs » dans le même panier… Où quand les « Elggs » attaquent !</title>
<content type="html"><b>Hemedia</b> répond à la question en vous disant de ne pas mettre les « Elggs » dans le même panier… Où quand les « Elggs » attaquent !</content>
<updated>2009-06-25T21:56:30Z</updated>
<link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/263940185/cube_for_twitter_normal.jpg"/>
<twitter:source><a href="http://alexking.org/projects/wordpress">Twitter Tools</a></twitter:source>
<twitter:lang>fr</twitter:lang>
<author>
<name>hemedia (hecube)</name>
<uri>http://twitter.com/hemedia</uri>
</author>
</entry>
<entry>
<id>tag:search.twitter.com,2005:2332984623</id>
<published>2009-06-25T21:56:19Z</published>
<link type="text/html" rel="alternate" href="http://twitter.com/hemedia/statuses/2332984623"/>
<title>Quel outil pour un réseau social ?</title>
<content type="html">Quel outil pour un réseau social ?</content>
<updated>2009-06-25T21:56:19Z</updated>
<link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/263940185/cube_for_twitter_normal.jpg"/>
<twitter:source><a href="http://alexking.org/projects/wordpress">Twitter Tools</a></twitter:source>
<twitter:lang>fr</twitter:lang>
<author>
<name>hemedia (hecube)</name>
<uri>http://twitter.com/hemedia</uri>
</author>
</entry>
</feed>
Le code du fichier TwitterSearch.mxml
Le nom des variables et des fonctions ont été francisés pour rendre le fonctionnement l’application Flex encore plus explicite.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="lafeuilledestylederecherchetwitter.css"></mx:Style>
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var LaCollectionDarrays:ArrayCollection;
private function LancerLaRecherche(e:MouseEvent):void
{
leService.url = "http://search.twitter.com/search.atom?q=" + motdelarecherche.text;
leService.send();
}
private function voirLeResultat(e:ResultEvent):void
{
LaCollectionDarrays = e.result.feed.entry as ArrayCollection;
trace (ac);
}
]]>
</mx:Script>
<mx:HTTPService result="voirLeResultat(event)" id="leService"/>
<mx:TextInput left="10" right="104" top="10" id="motdelarecherche"/>
<mx:Button click="LancerLaRecherche(event)" label="Recherche" right="10" top="10"/>
<mx:List dataProvider="{LaCollectionDarrays}" itemRenderer="Tweet" top="40" left="10"
right="10" bottom="10" id="theList"></mx:List>
</mx:Application>Le code du composant (component) Gazouillis.mxml
{data.link[1].href}, cette variable va fournir l’adresse de l’image de la personne qui aura “twtitté”. dans le cas de notre hemedia, l’url sera http://s3.amazonaws.com/twitter_production/profile_images/263940185/cube_for_twitter_normal.jpg
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image width="50" height="50" source="{data.link[1].href}"> </mx:Image>
<mx:Text width="100%" text="{data.title}" />
</mx:HBox>la peau sur les os de votre application
La chose la plus bluffante et commode dans Flex est sa capacité à importer des skins, autrement ditdes assortiment de boutons de submit, menu déroulant, barre de progression, de bouton radio, de checkbox… Bref, un kit complet pour construire des IHM d’une application sans que cela soit trop moche
Un extrait de la feuille de style lafeuilledestylederecherchetwitter.css, très largement inspiré par le style KingnareStyle
/* CSS file */
/*
//------------------------------
// Application
//------------------------------
*/
Application
{
backgroundGradientAlphas: 1.0, 1.0;
backgroundGradientColors: #333333, #333333;
/* backgroundGradientColors: #0012FF, #FF00FF; */
}
/*
//------------------------------
// global
//------------------------------
*/
global
{
backgroundGradientAlphas: 1.0, 1.0;
backgroundGradientColors: #000000, #000000;
backgroundDisabledColor: #DDDDDD;
focusThickness: 1;
/* focusAlpha: 0.05; */
focusAlpha: 0.0;
themeColor: #FFFFFF;
}
/*
//------------------------------
// Button
//------------------------------
*/
Button
{
color: #AAAAAA;
textRollOverColor: #FFFFFF;
textSelectedColor:#FFFFFF;
disabledColor:#5A5A5A;
fontWeight:normal;
upSkin: Embed(source="kingnarestyle.swf", symbol="Button_upSkin");
overSkin: Embed(source="kingnarestyle.swf", symbol="Button_overSkin");
downSkin: Embed(source="kingnarestyle.swf", symbol="Button_downSkin");
disabledSkin: Embed(source="kingnarestyle.swf", symbol="Button_disabledSkin");
selectedUpSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedUpSkin');
selectedOverSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedOverSkin');
selectedDownSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedDownSkin');
selectedDisabledSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedDisabledSkin');
}
/*
//------------------------------
// TextInput
//------------------------------
*/
TextInput
{
backgroundAlpha: 1.0;
borderColor: #B7BABC;
color: #FFFFFF;
borderSkin: Embed(source="kingnarestyle.swf", symbol="TextInput_borderSkin");
borderStyle: none;
padding-top: 2;
padding-left:2;
}
/* extrait de la css */Pour mieux comprendre le “styling” sous Flex, il existe un pdf disponible sur le site de Aobe sur “Styling Flex Applications”.
Le document aborde les sujets suivants : “Using Inline Styles, Using Style Sheets, Embedding Assets, Skinning, Using Themes”
http://www.adobe.com/devnet/flex/articles/learning_flex3/learning_flex3_ch14.pdf
Under my skin…
Pour obtenir des skins, il existe différentes ressources en ligne qui vous fournissent des “skins” gratuites. Vous pourrez à ce moment là déployer votre application dans un “look and feel” plus sexy que celui livré par défaut lorsque vous développez sous Flex. Pour l’exemple du scénario 1, nous avons utiliser les apparences fournies par le de style de kingnarestyle, les deux fichiers essentiels qui vous seront nécessaires pour imposer votre style à une application Flex sont la feuille de style .css et le movie flash qui contient tous les éléments graphiques à proprement parler .swf
Pour insérer le style Discotype, il vous suffit de placer dans le répertoire src de votre application Flex, les deux fichiers suivants flexskinheatherford.swf et flexskinheatherford.css
Vous gérez ensuite le thème de votre application Flex via une CSS comme pur un banal site !
Des changements de peau assez variés…
Discotype
RockOn
KingnareStyle
Scénario 2 - Application pour poster des “tweets” sur twitter (push)
Nous allons concevoir une application Flex qui permettra de publier des”tweets” directement sur un compte ouvert chez twitter. Pour cela, il va falloir se connecter en Curl à l’API twitter. Pour mémoire, il existe de nombreux scripts en php qui permettent de s’interfacer en Curl avec twitter. Voici quelques adresses :
Les éléments pour construire votre application en Flex
Avant de se lancer tête baissée dans la création de votre aplication Flex. Il reste que vous devez comprendre deux choses dans les exemples qui vont suivre.
- Appréhender AMFPHP car c’est un service d’amfphp qui va nous permettre de nous conneceter à l’API twitter. Pour cela reporter à un article précèdent de ce blog : Flex - AMFPHP - connecter un service amfphp à une application Flex
- Comprendre un peu les rudiments du Curl en PHP. C’est par cela que nous allons commencer, car cette librairie peut s’avérer extrêmement utile dans de très nombreux cas.
Un tour rapide de Curl
cURL qui l’acronyme de “Client URL Request Library”, ou encore “see URL”. C’est grosso modo “une interface en ligne de commande destinée à récupérer le contenu d’une ressource accessible par un réseau informatique” (Cf http://fr.wikipedia.org/wiki/CURL )
On va faire une installation rapide Curl sur Mac OSX via MacPort pour mieux appréhender les lignes de commande permettant d’envoyer des messages sur twitter.
Installer Curl sur mac OSX via macport
Voilà les commandes pour installer Curl sur un mac OSX. Pour information, on est dans un environnement assez proche de celui décrit dans un article précédent Modifier son fichier hosts sur Mac ou sur PC ou vous devez passer en root sur votre mac et avoir installer aussi MacPort (http://www.macports.org/)
sudo -s
port install curl
Si la dernière commande échoue et vous voyez des erreurs notamment de Checksum et que vous voyez s’afficher des erreurs de ce type.
Fetching curl
---> Attempting to fetch curl-7.19.2.tar.bz2 from ftp://gd.tuwien.ac.at/utils/archivers/curl/
---> Attempting to fetch curl-7.19.2.tar.bz2 from http://gd.tuwien.ac.at/utils/archivers/curl/
---> Verifying checksum(s) for curl
Error: Checksum (md5) mismatch for curl-7.19.2.tar.bz2
Error: Checksum (sha1) mismatch for curl-7.19.2.tar.bz2
Error: Checksum (rmd160) mismatch for curl-7.19.2.tar.bz2
Error: Target org.macports.checksum returned: Unable to verify file checksums
Error: Status 1 encountered during processing.
Vous êtes toujours en root et vous passez les commandes suivantes.
port sync
port clean --all curl
port install curl
Avec les commandes suivantes, l’installation devrait marcher et vous devez voir s’afficher les choses suivantes :
port install curl
---> Fetching curl
---> Attempting to fetch curl-7.19.5.tar.bz2 from http://cool.haxx.se/curl/
---> Verifying checksum(s) for curl
---> Extracting curl
---> Configuring curl
---> Building curl
---> Staging curl into destroot
---> Installing curl @7.19.5_0
---> Activating curl @7.19.5_0
---> Cleaning curl
Plus d’infos sur http://curl.darwinports.com/
Attaquer Twitter en Curl
Une fois Curl installé, vous pouvez tester l’API twitter
Vous pouvez passer directement les commandes via la console une fois que l’installation de Curl est faite.
curl -u username:password -d status="twittering from curl" http://twitter.com/statuses/update.xmlcurl -u FlexAMFPHPtest:password -d status="twittering from curl in command line thks to polygeek" http://twitter.com/statuses/update.xml (Pour cet exemple, la ligen peut-être passé tel quel car le couple FlexAMFPHPtest:password ets le bon)curl -u hemedia:xxxxx -d status="l'API twitter est accessible en Curl via une ligne de commande... En voici la preuve" http://twitter.com/statuses/update.xml
Résultats des commandes ci-dessus passées directement dans la console
Créer l’application Flex
Il vous faudra créer un service amfphp pour pouvoir communiquer avec Twitter.
Le script PHP faisant appel à CURL pour mettre à jour son statut sur Twitter
Ce fichier SendTweets.php va être enregistré dans l’arborescence de répertoires de /services/Twitter/SendTweets.php où est installé AMFPHP.
class SendTweets {
private $user;
private $pass;
private $ch;
private $twitterHost = "http://twitter.com/";
function SendTweets () {
$this->user = 'FlexAMFPHPtest'; // this is a username I created for testing apps without pestering people
$this->pass = 'password';
/* Create and setup the curl Session */
$this->ch = curl_init();
curl_setopt($this->ch, CURLOPT_VERBOSE, 1);
curl_setopt($this->ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($this->ch, CURLOPT_USERPWD, "$this->user:$this->pass");
curl_setopt($this->ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
curl_setopt($this->ch, CURLOPT_POST, 1);
}
public function sendTwit($stat) {
if(strlen($stat) twitterHost .= "statuses/update.xml?status=". urlencode(stripslashes(urldecode($stat)));
curl_setopt($this->ch, CURLOPT_URL, $this->twitterHost);
/* Execute and get the http code to see if it was succesfull or not*/
$result = curl_exec($this->ch);
$resultArray = curl_getinfo($this->ch);
if ($resultArray['http_code'] == 200) ;
return true;
return false;
}
public function __destruct() {
/*clean Up */
curl_close($this->ch);
}
}Le fichier MXML de l’application Flex
Le détail important dans le code est source="Twitter.SendTweets" qui fait référence au service /services/Twitter/SendTweets.php, installé dans l’environnement AMFPHP. Le code de ce fichier SendTweets.php où est installé AMFPHP. est donnée plus haut.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
VBox {
padding-left: 10;
padding-right: 10;
padding-bottom: 10;
}
</mx:Style>
<mx:RemoteObject
id="amfphp"
source="Twitter.SendTweets"
destination="amfphp">
<mx:method name="sendTwit" result="onSendTwit(event);" />
</mx:RemoteObject>
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
private function onSendTwit(e:ResultEvent):void {
//e.result == true // if successful
}
]]>
</mx:Script>
<mx:VBox
label="send">
<mx:Label
text="send twit: FlexAMFPHPtest" />
<mx:TextInput
id="twitterMsg"
width="100%" height="60"
maxChars="140"
enter="{ amfphp.sendTwit.send( twitterMsg.text ); }" />
<mx:Button
label="send"
click="{ amfphp.sendTwit.send( twitterMsg.text ); }" />
</mx:VBox>
</mx:Application>Le fichier de configuration de votre application Flex services-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<!-- services-config.xml -->
<services-config>
<services>
<service id="amfphp-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="amfphp">
<channels>
<channel ref="my-amfphp"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel" >
<endpoint uri="votre_URL_en_local/amfphp/gateway.php"
class="flex.messaging.endpoints.AMFEndpoint" />
</channel-definition>
</channels>
</services-config>
Le fichier services-config.xml s’associe de la sorte à un projet Flex.
Pour aller plus loin
- Une EXCELLENTE ressource très pédagogique pour débuter dans le Flex, l’actionscript, le Flash et plein d’autres choses. Un exemple de ce tutorial est largement inspiré. Merci Lee Brimelow
http://www.gotoandlearn.com/
- Le blog de Dan Florio - aka polyGeek -, developpeur freelance Actionscript Flex/Flash/AIR qui fait de très bonnes introductions au monde de Flex dont la deuxième partie de ce tutorial est tirée.
http://polygeek.com/
Si vous rippez sur le Curl, quelques liens utiles…
actionscript, amfphp, Curl, Flex, PHP, Twitter
25 juin 2009 dans CMS, Divers, Réseaux sociaux, Tutoriaux par Bruno Flaven
Elgg se pose aujourd’hui comme un des outils de gestion de Réseau Social les plus aboutis. Il est un concurrent sérieux de BuddyPress bien qu’il ne s’appuie pas comme BuddyPress sur la vitalité sans pareille d’une communauté de pratiques et de développement forte de millions de membres. Toutefois ses qualités sont indéniables.
Pour tester Elgg, nous allons faire le test en local. Pour installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :
Ensuite, nous procéderons à l’installation de Elgg via le navigateur. Nous ferons un tour rapide de Elgg et un rapide comparatif avec BuddyPress notamment.
Elgg 1.5, une solution pour gérer un réseau social
La genèse de Elgg
Je ne m’éternise pas sur l’origine du nom qui pour un francophone reste un mystère et donne la possibilité de faire de gentil jeux de mots “franglish” sur la similitude avec le mot “egg” (oeuf) ou pas dont voici un petit florilège : “Pas d’omelette sans casser des Elggs”, “Le vol de l’Elgg royal”, “Liberté Elggalité Fraternité”, “les Elggs marines”…
Plus sérieusement, si vous souhaitez plus d’informations sur la nature du projet et les membres fondateurs, je vous invite à découvrir la page “About” du site officiel. Il existe aussi la liste des instigateurs du projet disponible dans CONTRIBUTORS.txt. Citons les deux concepteurs d’origine qui sont : Ben Werdmuller et David Tosh dont les portaits figurent en bonne place sur le site officiel.
Elgg, started in 2004, is an open source social engine which powers all kinds of social environments - from education and business to martial arts and rugby. If you are looking for a professional social intranet or want to run a site for your organisation, Elgg is a great choice.
Source : http://elgg.org/about.php
Avantages et Inconvénients de Elgg
Dans le match Elgg vs BuddyPress, Hecube est relativement bien placé pour le savoir dans la mesure où nous avons choisi BuddyPress pour notre propre réseau et nous en connaissons les méandres. Ainsi, si on dénombre les fonctionnalités de Elgg, elles sont aussi nombreuses que celle de BuddyPress et pour certaines bien plus avancées.
Avantages
Vous avez des modules qui vous permettent d’étendre les fonctionnalités pour suivre, gérer, mettre à jour bref de faire vivre pleinement votre réseau social.
- “Activity”, l’activité de votre réseau
- “Profile”, le profile de chacun des utilisateurs inscrits de votre réseau
- “Notifications”, la possibilité de notifier les utilisateurs inscrits de votre réseau
- “Groups”, les groupes à la manière de facebook
- “Blog”, le blog disponible pour chaque utilisateur inscrit
- “Embed media”, l’utilisateur peut enrichir de sa production digitale ses contributions au réseau
- “Files”, ellg vous permet de gérer une grande variété de fichiers qui peuvent être mis à disposition ou non sur le réseau.
- “The wire”, le fil d’information de votre réseau
- … etc. Plus sur le site officiel de Elgg Source : http://elgg.org/about.php
Enfin, d’un point de vue plus technique, vous disposez avec Elgg d’un accès facilité à une API en mesure de fournir des résultats en JSON, PHP serialisé ou des données au format XML.
Inconvénients
Elgg sur un dédié
A noter, pour Elgg, PHP doit s’exécuter en mode Apache, et non en mode CGI ce qui rend difficile le fonctionnement de Elgg sur un serveur mutualisé.
Elgg, combien de divisions ?
La communauté est naissante à l’inverse de BuddyPress qui s’appuie comme nous le disions plus haut sur la communauté WP donc une puissance de développement colossale pour les plugins, les thèmes destinés aux blogs mais assurément bientôt pour BP.
Installer Elgg 1.5
1. Créer la BDD qui va réceptionner Elgg 1.5
Comme dans de précédents articles, il y a plusieurs façons de créer sa BDD soit directement dans le client MySQL soit en passant par phpMyAdmin. Nous choisirons la première méthode. Toutefois, si vous souhaitez procéder via phpMyAdmin, reportez-vous à l’article suivant qui présente la méthode pour une installation…. Wordpress ou Drupal ! Cf Créer et héberger son site avec Wordpress.
Les information indispensables pour créer la BDD
On crée une base et un utilisateur simultanément bien sûr, en production, le mot de passe peut et doit être légèrement plus complexe. La commande SQL pour se connecter au client MySQL de MAMP. Vous vous connecté(e) comme utilisateur root, le mot de passe est root
/Applications/MAMP/Library/bin/mysql -u root -p
# Création de la base elgg_install
CREATE DATABASE elgg_install;
# Création simultanée de la base elgg_install et l'utilisateur elgg_install
CREATE USER 'elgg_install'@'localhost' IDENTIFIED BY 'elgg_install';GRANT USAGE ON *.*
TO 'elgg_install'@'localhost' IDENTIFIED BY 'elgg_install'WITH MAX_QUERIES_PER_HOUR 0
MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0;
CREATE DATABASE IF NOT EXISTS elgg_install;GRANT ALL PRIVILEGES ON
elgg_install.* TO 'elgg_install'@'localhost';
Au terme de ces commandes dans MySQL, nous aurons donc de quoi compléter les informations demandées lors de l’installation de elgg 1.5. A savoir les informations suivantes :
Database Name= elgg_install
Database User name = elgg_install
Database Password = elgg_install
Database Host = localhost
3. La marche à suivre écran par écran
On va donc installer en local, la version anglaise de Elgg 1.5 qui est disponible en téléchargement sur le site de Elgg : http://elgg.org
L’écran de bienvenue
Connexion à la base de données
Le préfix des tables a été changé en elgg_ et non elgg
L’écran de configuration du système “Elgg”
La question du chemin qui tue…
Lors du déploiement de Elgg, il vous sera demandé d’indiquer le chemin du répertoire.
Répertoire où seront stockés les fichiers envoyés (uploadés) par les membres de votre réseau. Notre répertoire se nomme myuploads. C’est un enjeu de taille et un vrai frein lors de l’installation car Elgg ne vous facilite pas la tâche en effet Elgg rechigne à créer ce répertoire ! Quelques-uns des messages d’erreur que vous pourriez rencontrer.
- Le répertoire
myuploads se situe dans l’arborescence de Elgg. Vous n’avez semble-t-il pas les droits d’exploiter un tel répertoire. Entre nous, cette impossibilité est plutôt sage.
- Enervé(e), vous ne souhaitez pas créer ce fameux répertoire
`
Les messages d’erreurs liés à la configuration pour le répertoire de réception des fichiers envoyés (uploadés) par les membres de votre réseau
le chemin est incorrect
La solution : Le répertoire les fichiers envoyés (uploadés) par les membres de votre réseau en l’espèce myuploads doit être hors- de l’arborescence de Ellg. Une fois passée cette étape l’installation se termine assez vite.. Dans notre exemple, le chemin correct est donc /Applications/MAMP/htdocs/81_elgg/myuploads/
Les derniers points de la configuration
On a vu “la question du chemin qui tue” qui mériterait un peu plus “try a user friendliness” lors de l’installation. Voyons rapidement les différents points de configuration importants que nous propose Elgg lors de l’installation. Outre le fait que vous allez envoyer des statistiques à Curverider (éditeur de Elgg) de manière plus poussée sans doute que le simple crédit inséré par l’outil WordPress <meta name="generator" content="WordPress 2.0.4" /> <!-- leave this for stats -->
Il existe enfin cette option Enable the RESTful API. C’est en effet, un des éléments particulièrement intéressant de Elgg bien qu’à première vue assez technique. .
Pour vous figurer REST de manière compréhensible pour tous.
- Votre réseau est en mesure de faire comme twitter ou facebook. C’est l’argument marketing/commercial par excellence.
- Votre réseau social produit une information “comestible” par d’autres applications et cela grâce à la mise à disposition d’une simple URL.
Elgg semble donc être plus qu’un CMS de gestion de réseau social, c’est une véritable API.
Turn on debug mode
Debug mode provides extra information which can be used to diagnose faults, however it can slow your system down so should only be used if you are having problems:
Enable HTTPS logins
Enable this to have user logins performed over HTTPS. You will need to have https enabled on your server for this to work.
Enable the RESTful API
The RESTful API is a flexible and extensible interface that enables applications to use certain Elgg features remotely.
Send anonymous usage statistics
This option lets Elgg send anonymous usage statistics back to Curverider.
Création du compte d’administration principale
C’est la partie “Register” qui va vous permettre de créer le compte “admin” dans notre exemple hecube
Display name: hecube
Email address: info@hecube.net
Username: hecube
Password: ****** (hecube)
Password (again for verification): ****** (hecube)
L’écran de login
Logué en tant qu’admin…
L’installation est terminée
4. Exploration des écrans de l’administration de Elgg
Edition du compte d’administration principale
Activation des plugins
Placement des widgets sur la page par défaut des membres
Gestionnaire des pages externes (page hors-blog finalement)
Gestionnaire de catégories
Poster un article dans le blog
La gestion des médias
Elle est bien faite et très web 2.0 dans son IHM :):)
Personnaliser un peu l’ensemble
Votre icône
Le rendu du site après quelques minutes…
Pour info
Sans entrer dans le détail de la création des groupes, de la messagerie entre les membres, de l’invitation via entre membre afin de devenir ami… mais cependant tout est là et ce de façon assez ergonomique !
Le menu déroulant pour accéder aux fonctionnalités
La messagerie interne
La messagerie interne - “you got a message”
La statut est indiqué par la petite enveloppe passée en rouge, c’est du détail et c’est pas mignon çà !
Un tour sommaire et rapide sur le template
Effectivement, après la prise en main rapide, on cherche souvent rapidement à modifier l’apparence. L’ensemble des vues se trouve dans le répertoire mod
Ensuite, vous pouvez découvrir en éditant quelques-uns des fichiers tel que externalpages > views > default > expages > footer_menu.php, c’est un début et il est vrai que le “theming” chez Elgg est plus compexe que sur WP.
Deux sources d’information imrtnates sur le “theming” chez Elgg
Modification de externalpages > views > default > expages > footer_menu.php
<?php
/**
* Elgg External pages footer menu
*
* @package ElggExpages
* @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU Public License version 2
* @author Curverider Ltd <info@elgg.com>
* @copyright Curverider Ltd 2008-2009
* @link http://elgg.com/
*
*/
?>
<!-- ajout en dur du lien hecube dans le theme de elgg -->
<div class="footer_toolbar_links"><a href="http://hecube.net" target="_blank">hecube</a> | <a href="<?php echo $vars['url']; ?>pg/expages/read/About/"><?php echo echo elgg_echo('expages:about'); ?></a> | <a href="<?php echo $vars['url']; ?>pg/expages/read/Terms/"><?php echo elgg_echo('expages:terms'); ?></a> | <a href="<?php echo $vars['url']; ?>pg/expages/read/Privacy/"><?php echo elgg_echo('expages:privacy'); ?></a> | </div>Pour aller plus loin
CMS, Elgg, MySQL, PHP, réseau social, Réseaux sociaux
19 juin 2009 dans CMS, Création de site web, Divers, PHP, MYSQL, Webdesign, XHTML CSS par Bruno Flaven
Dans un article précédent, on avait une méthode simple, efficace mais finalement assez risquée de créer un thème sur Drupal en détournant un thème existant. Deux raisons à cela :
- Vous ne savez pas grand chose du code que vous allez trouver, la question qui vous viendra à l’esprit est bien evidemment “est-ce la façon dont vous auriez procéder ?”
- En créant votre thème, vous produirez un thème maigre livré sans matière grasse, sans poudre aux yeux, sans chichi et sans fichier inutile… Bref, vous saurez intervenir en cas de pépin comme dirait Francis Heaulmes !
NDLR: Ainsi, comme dit ma grand-mère, “un petit chez soi vaut mieux qu’un grand chez les autres”. Le principe s’applque pour le logement comme pour le thème Drupal.
A faire ou à ne pas faire…
Pour répertorier et se rappeler ces mauvaises pratiques, je vous invite tout de même jeter un œil sur cet article.
Comprendre en 5 minutes les principes du thème drupal
Tout d’abord, il vaut mieux ne pas déplier son thème dans le répertoire usuel de publication. Pour résumer, cette prartique dans un dilemme simple et inquisiteur de ce qu’il faut faire ou pas. Schématiquement, le choix du répertoire pour votre thème est le suivant :
1. BON drupal >> sites >> all >> themes >> lenomdemontheme
2. PAS BON drupal >> themes
Dans le scénario “1. BON”, vous devrez créer le répertoire themes car il n’existe pas.
Créer un fichier .info
Dans un “theme” drupal 6.x, on va créer un fichier .info. Ce fichier recèle les informations indispensable au CMS Drupal sur la nature du thème et de son fonctionnement.
name, le nom, il s’agit du nom du thème (majuscule ou minuscule, avec ou sans accent)description, une description un peu à la manières des themes wordpresscore, la version de drupal sur lequel cela marcheengine, très souvent “phtemplate”, c’est devenu quasiment un standardregions [left] = Left sidebar, il s’agit de la colonne de gauche de votre futur template. Vous disposez d’autres positions comme right, content, header, footer, content. En général, il en existe un certain nombre par défaut : right, content, header, footer.
Le découpage en regions
Ce découpage a pur but de vous permettre ultérieurement de faire appel à l’aide de la variable $left directement dans un fichier .tpl.php. Fichir dont on verra la création plus loin dans l’article.
Apres le découpage, où enfouir le .info
Il faut enregistrer ce fichier .infoavec le nom de votre thème lenomdemontheme.info
Un modèle de fichier .info
name = Un thème de plus dans l'univers
description = un magnifique thème multi colonne, inspiré par cobra, tout désigné pur un blog.
screenshot = screenshot.png
core = 6.x
engine = phptemplate
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
Vous pouvez ajouter une image dans ce même répertoire , c’est plus fun… La taille est de 150 pixels de large par 90 pixels de hauteur.
screenshot = screenshot.png
A NOTER : le fichier doit avoir le même nom que votre répertoire situé dans themes. Ainsi, on enregistrera le fichier au nom de lenomdemontheme.info dans le repertoire drupal >> sites >> all >> themes >> lenomdemontheme
Créer un fichier page.tpl.php
Il est certain que la création d’un fichier page.tpl.php dans Drupal 6.x est loin d’être une obligation mais c’est fortement recommandé car cela vous offre un contrôle sur votre thème. On se cantonnera pour créer ce fichier à un assortiment de xhtml/CSS, qui donnera l’apparence de votre site. Dans cette page, il n’ ya aura plus qu’à imprimer des variables Drupal à l’intérieur de la page.
Variables drupal ?
Pour mémoire, nous sommes dans le moteur phptemplate, ainsi donc on va pouvoir passer des “pseudo-variables” qui sont souvent la marque de fabrique et le propre des moteur de templates (template engine). Pour information, c’est une notion qui existe par exemple dans des frameworks comme CodeIgniter ou Smarty.
A la différence du CMS Drupal, dans CodeIgniter, il ne s’agit pas de véritables variables mais plus d’éléments en “plain text” facilement imprimables et manipulables. Éléments qui s’impriment dans les vues de votre site MVC. Cela élimine du même coup la complexité de PHP. On peut par exemple confier la construction de ces vues à un graphique même ou un intégrateur html.
Quelques exemples de variables Drupal
Quelques-unes de ces variables sont vraiment indispensables.
$head_title, le nom du site
$head, ce que contient la balise head du site
$styles, cette variable insère la feuille de style du site
$scripts, cette variable insère les scripts javascript du site
$closure, cette variable clôt les scripts exécutés dans votre thème Drupal. Il est vivement recommandé de la mettre avant </body>
Lire son template Drupal 6.x
Il existe 3 choses importantes dont il faut se souvenir pour analyser et constituer un thème Drupal.
Pour comprendre ce mode d’affichage de votre thème grâce au code ci-dessous, il faut lire “si il existe une $sidebar_left alors imprime le contenu de cette colonne de gauche définie dans notre fichier .info”
1. Affichage ou non - imprime le contenu de la colonne de gauche
<?php if ($left) { ?><div id="sidebar-left">
<?php print $left ?>
</div><?php } ?>2. le plat de résistance - imprime la variable $content
Cette variable va contenir le contenu principal de vos pages.
3. rappel des autres variables importantes à faire figure dans votre fichier page.tpl.php
<?php
print $messages;
print $help;
print $content;
print $footer;
// à faire figurer toujours en bas de votre template
print $closure;
?>
En gardant en mémoire ces 3 points, il vous faudra compléter votre thème afin. Là encore, deux façons de faire, vous pouvez lister toutes ces variables puis injecter votre code xhtml/css ou vous inspirer d’un thème existant pour isoler les variables.
NB : Un bon article sur les « must-have » d’un thème drupal. ” Anatomy of a Drupal 6 theme ”
http://drupal.org/node/171194
un exemple de code source du fichier page.tpl.php du thème ZEN
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">
<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="header">
<tr>
<td id="logo">
<?php if ($logo) { ?><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?>
<?php if ($site_name) { ?><h1 class='site-name'><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
<?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?>
</td>
<td id="menu">
<?php if (isset($secondary_links)) { ?><?php print theme('links', $secondary_links, array('class' =>'links', 'id' => 'subnavlist')) ?><?php } ?>
<?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' =>'links', 'id' => 'navlist')) ?><?php } ?>
<?php print $search_box ?>
</td>
</tr>
<tr>
<td colspan="2"><div><?php print $header ?></div></td>
</tr>
</table>
<!-- to be continued -->
<?php if ($closure_region): ?>
<div id="closure-blocks"><?php print $closure_region; ?></div>
<?php endif; ?>
<?php print $closure; ?>
</div></div> <!-- /#page-inner, /#page -->
</body>
</html><?php if ($closure_region): ?>Créer un fichier CSS style.css
Il vous restera à créer un fichier CSS dans votre répertoire de thème pour peaufiner l’affichage. Pour information, voici un extrait de la css du thème zen
/* $Id: zen.css,v 1.1.2.27 2008/09/14 09:28:14 johnalbin Exp $ */
/*
* ZEN STYLES
*
* This is an example stylesheet. Sub-themes should NOT include the zen/zen.css
* file, but instead copy this CSS to their own stylesheets.
*
* In this stylesheet, we have included all of the classes and IDs from this
* theme's tpl.php files. We have also included many of the useful Drupal core
* styles to make it easier for theme developers to see them.
*
* Many of these styles are over-riding Drupal's core stylesheets, so if you
* remove a declaration from here, the styles may still not be what you want
* since Drupal's core stylesheets are still styling the element. See the
* drupal5-reference.css file for a list of all Drupal 5.x core styles.
*
* In addition to the style declarations in this file, other Drupal styles that
* you might want to override or augment are those for:
*
* Book Navigation See line 74 of Zen's drupal5-reference.css file
* Forum See line 197 of Zen's drupal5-reference.css file
* Menus See line 667 of Zen's drupal5-reference.css file
* News Aggregator See line 20 of Zen's drupal5-reference.css file
* Polls See line 287 of Zen's drupal5-reference.css file
* Search See line 320 of Zen's drupal5-reference.css file
* User Profiles See line 945 of Zen's drupal5-reference.css file
*/
/** body **/
body
{
margin: 0;
padding: 10px;
}
#page
{
}
#page-inner
{
}
/** header **/
#header
{
}
#header-inner
{
}
#logo-title /* Wrapper for logo, website name, and slogan */
{
}
/* to be continued */Pour aller plus loin
CMS, cobra, Drupal, drupal 6.x, MySQL, phptemplate, pratiques, theme, Webdesign
16 juin 2009 dans CMS, Divers, Hébergement, Réseaux sociaux, Tutoriaux, Wordpress par Bruno Flaven
Dans cet article, nous allons voir comment installer BuddyPress, qui soit dit en passant est le système sur lequel tourne hemedia.net. Pour se faire, on va partir des toutes dernières versions des deux applications nécessaire au bon fonctionnement de la plate-forme communautaire de Wordpress à l’heure où cet article s’écrit.
wordpress Mu 2.7.1, l’outil de gestion de blog multi-utilisateurs basé sur Wordpressbuddypress.1.0.1, l’extension communautaire qui s’applique à wordpress Mu
Quelques informations complémentaires sur Wordpress, BuddyPress….etc Bref l’écosystème WP
Pour mieux comprendre, la logique d’un réseau social et du fonctionnement de Wordpress, je vous invite à découvrir ces articles. Nous y ferons référence au cours de cette article.
Pour installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :
Toutes les installations font se faire en anglais afin d’éviter tous les problèmes liés à la localisation de l’outil WP. Nous allons donc télécharger les versions anglaises des logiciels et pas se faire des .mo au cerveau, cela n’en vaut .po la peine pour le moment !
I. Installation de wordpress Mu 2.7.1 (wordpress-mu-2.7.1.zip)
La première chose à faire est de télécharger le fichier d’installation wordpress-mu-2.7.1.zip à ladresse suivante : http://mu.wordpress.org/download/
1. Créer la BDD pour réceptionner WPMU
Nous passons directement par le client MySQL dans notre environnement de test sur MAMP.
La commande SQL pour se connecter au client MySQL de MAMP. Vous vous connecté(e) comme utilisateur root, le mot de passe est root
1.1 se connecter comme root
/Applications/MAMP/Library/bin/mysql -u root -p
1.2 créer la BDD bp_install
# Création de la base bp_install
CREATE DATABASE bp_install;
1.3 créer l’utilisateur bp_install
# Création simultanée de la base bp_install
# et de l'utilisateur bp_install
CREATE USER 'bp_install'@'localhost' IDENTIFIED BY 'bp_install';
GRANT USAGE ON *.* TO 'bp_install'@'localhost' IDENTIFIED
BY 'bp_install'WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0
MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0; CREATE DATABASE
IF NOT EXISTS bp_install;GRANT ALL PRIVILEGES ON bp_install.*
TO 'bp_install'@'localhost';
Au terme de ces commandes dans MySQL, nous aurons donc de quoi compléter les informations demandées lors de l’installation de Wordpress Mu 2.7.1 A savoir les informations suivantes :
Database Name = bp_install
Database User name = bp_install
Database Password = bp_install
Database Host = localhost
1.4 Commandes SQL pour détruire les BDD
Dans le cas ou vous voulez refaire marche arrière, vous pouvez en passant les commandes suivantes dans client MySQL, repartir de zéro pour l’installation de WPMU/BP.
# Destruction de la base bp_install et
# de l'utilisateur bp_install@localhost ...
DROP USER wpmu_install@localhost;
DROP DATABASE IF EXISTS wpmu_install;
2. Lancement de l’installation de Wordpress Mu (WPMU)
Ecran - Lancement de l’installation
Après voir créer la base, vous venez de décompresser le fichier dans le répertoire /Applications/MAMP/htdocs/wordpress_2_7_mu/, vous pouvez donc accéder à l’installation via http://127.0.0.1/wordpress_2_7_mu/
Ecran - Choix des adresses des blogs
Pour simplifier, on choisit l’option “Sub-directories”
Ecran - Détails de connexion à la BDD
L’écran est complété avec les informations données plus haut.
Ecran - Félicitations, l’installation est terminée !
Vous pouvez vous rendre sur votre WPMU nouvellement crée
Ecran - Accéder à WPMU
Pour simplifier, on choisit l’option “Sub-directories”
Le texte de félicitations une fois WPMU installé.
Deux choses importantes à noter :
- Le mot de passe
admin
- Les autorisations sur les répertoires.
Installation Finished!
Congratulations!
Your WordPress µ site has been configured.
You can log in using the username "admin" and password 60e71a573040
Directory Permissions
Please remember to reset the permissions on the following directories:
* /Applications/MAMP/htdocs/wordpress_2_7_mu/wordpress-mu
* /Applications/MAMP/htdocs/wordpress_2_7_mu/wordpress-mu/wp-content/
You can probably use the following command to fix the
permissions but check with your host if it doubt:
chmod 755 /Applications/MAMP/htdocs/wordpress_2_7_mu/wordpress-mu
chmod 755 /Applications/MAMP/htdocs/wordpress_2_7_mu/wordpress-mu/wp-content/
Further reading
* If you run into problems, please search the WordPress µ Forums
where you will most likely find a solution. Please don't post there
before searching. It's not polite.
* There is also the WordPress µ Trac. That's our bug tracker.
Thanks for installing WordPress µ!
Donncha
wpmu version: 2.7
Créer une entrée dans votre fichier hosts (pas indispensable)
On va pour l’occasion faire une variante en créant une entrée 127.0.0.1 buddypress dans notre fichier hosts. On pourra en local accéder à notre espace avec Wordpress Mu en tapant http://buddypress/wordpress_2_7_1_mu/wordpress-mu/ dans la barre d’adresse de notre navigateur.
Pour savoir comment faire la manipulation sur PC ou MAC, reportez-vous à l’article suivant :
Modifier son fichier hosts sur Mac ou sur PC
N’oublier pas de changer le mot de passe admin par un mot de passe plus simple, dans notre exemple, on passe de 591be202d7aa pour buddypresshecube. Vous en avez terminé avec l’installation de WPMU, passosn à BP (BuddyPress)
II. Installation de BuddyPress 1.0.1 (buddypress.1.0.1.zip)
Une fois que vous avez téléchargé le fichier buddypress.1.0.1.zip. Vous devez le décompresser et le placer dans un répertoire nouvellement crée buddypress dans le répertoire /wp-content/plugins/
1. Activer le plugin buddypress
En activant le plugin buddypress vous aller activer l’extension commaunitaire de WPMU.
L’administration de WPMU
Activation des plugins “site wide”
Avant de pouvoir activer le plugin BP, vous devez permettre au plugin de toute type de s”activer sur l’ensemble du site.
L’activation de BuddyPress se fait ensuite comme un simple plugin
Vous pouvez cliquer indifféremment sur l’un des liens “Activate” ou “Activate BuddyPress Site Wide”
BuddyPress est activé !
2. Autoriser les inscriptions (pas obligatoire)
Si l’écran ci-dessous apparait c’est que vous devez autoriser les inscriptions afin de tirer pleinement profit de WPMU. Si le cas de figurer se présente, vous devez autoriser les inscriptions.
3. Faire apparaitre le thème BuddyPress
Pour faire apparaître à proprement parler, BuddyPress, il vous faut activer le thème BP. En effet tant que le thème n’est aps installé, vous ne verrez pas les ajouts fonctionnels de BuddyPress à WPMU.
Le message d’erreur dans l’attente du theme bp-themes
You do not have any BuddyPress themes installed.
Please move the default BuddyPress themes to their correct location
(move /Applications/MAMP/htdocs/wordpress_2_7_1_mu/bp/wp-content/plugins/buddypress/bp-themes/
to /Applications/MAMP/htdocs/wordpress_2_7_1_mu/bp/wp-content/bp-themes/)
and reload this page. You can download more themes here.
3.1 Le déplacement de bpmember
Il faut copier le répertoire bpmember de /wp-content/plugins/buddypress/bp-themes/ vers /wp-content/bp-themes/. Attention, vous devez créer le répertoire bp-themes dans /wp-content/ car il n’existe pas.
3.2 Le déplacement de bphome
Pour mettre le thème de BP, il faut copier le répertoire du thème bphome de /wp-content/plugins/buddypress/bp-themes/ dans /wp-content/themes/.
3.3 Activation du thème
Vous devez ensuite l’activer comme un thème de Wordpress.
Le message d’erreur a disparu…
4. Insérer des widgets dans le thème BP
Il vous reste à insérer des widgets dans chacune des colonnes du template BP : left-column, center-column, right-column, blog-sidebar
L’insertion des widgets se fait comme sur une theme wordpress normal…
Sur l’insertion des widgets, vous pouvez vous reporter à l’article de ce blog Wordpress - Créer un thème Wordpress Widget Ready dans la partie “Manipuler les widgets par sidebar depuis l’admin”.
Pour aller plus loin
BuddyPress, CMS, MySQL, outil de gestion, PHP, réseau social, Wordpress, Wordpress Mu
13 juin 2009 dans CMS, Création de site web, Divers, Flash, Actionscript, Flex, Google, Javascript, Ajax, PHP, MYSQL, Tutoriaux, Widget, Gadget par Bruno Flaven
Pour parvenir à se servir de la technologie du moteur Google pour son propre moteur de recherche, il va falloir vous livrer un peu plus encore à l’ogre de “Mountain View”. Mais n’est-ce pas déjà le cas ? En effet, si vous êtes déjà un adepte de Gmail, Google sitemap, Google webmaster tools, Google adsense, Google analytics…etc. Il ne vous reste encore qu’un seul effort à faire pour finaliser votre “Google life” alors pourquoi ne pas franchir une étape supplémentaire en confiant votre moteur de recherche à ce qui est à l’origine de la “success story” de Google, le technologie de recherche. C’est trivial, en effet mais Google reste avant tout un moteur de recherche et vous pouvez, auprès de leurs services, externaliser totalement la recherche de votre site.
Mettre du google dans votre moteur
Pour cela, il vous faut un compte Google. C’est sans doute chose faite si vous êtes parvenu(e) sur cette page et/ou que vous fréquenté(e) même occasionnellement ce blog sinon faites-le Pour mémoire, quelques-uns des articles qui détaillent ce que le sésame d’un compte Google vous autorisera :
Faites votre moteur vous-même !
Le plus difficile est bien de trouver la page où vous pourrez vous connecter : http://www.google.com/coop/manage/cse/ une fois ce problème résolu, il ne vous reste plus qu’à suivre les instructions.
1. créer son premier moteur en 2 étapes. Sans le test de page de résultats, la promesse est vraie
2. Les paramètres du moteur
L’écran complété des paramètres du moteur
Vous devez complétez la valeur Sites à explorer :
www.monsite.com/* que je remplace habilement par www.hecube.net/* et donc le moteur va crawler toutes les pages concernant ce domaine uniquement dans notre exemple.
3. l’écran de test du moteur
Un test de recherche sur hecube sur mon_moteur désigné par hecube avec l’aide de Google !!!
Le code délivré par google
Le code en vrai
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="001162007975234339020:0ii-7lvddua" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Rechercher" />
</div>
</form>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("elements", "1",
{packages: "transliteration"});
</script>
<script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse-search-box&t13n_langs=fr">
</script>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=fr">
</script>Vous pouvez spécifier autant de moteurs que vous le souhaitez sur ce même principe de création.
NDLR : Vous qui comme moi pensiez naïvement que Google était totalement gratuit ! Eh bien, nous avons été trompés :):) Qu’on se rassure ici G glisse son offre commerciale après vous avez rendu addictif au service ! De la manière la plus subtile, ils ont compris en finesse comment faire payer les externalités négatives au consommateur que vous êtes. Vous souhaitez une page de résultat sans liens sponsorisés, avec plus de 64 résultats, il faudra donc payer. Rassurez-vous bientôt vous devrez payer pour un air ou une eau débarrassé des pollutions insidieuses (un peu comme la pub sur les pages de résultats) au risque de se rendre durablement malade. Comme l’eau ou l’air, G pourrait devenir une ressource rare, on est pas loin de payer pour la qualité des résultats eux-mêmes, ce qui pourrait se résumer par cette proposition en donnant dans la devise simpliste d’une avenir possible si toi pas payer, toi avoir des pages de m…, pleines d’infomerciales.
Au sujet de l’API Google, je vous invite à voir cette vidéo un peu surréaliste, sur les explications de Mark Lucovsky en charge de l’API Ajax de Google.
“Google AJAX APIs go RESTful”
Le dépliant “ajax” de Google sur les vertus d’un moteur “NOPUB”
Les fameuses limitations de l’API Google. Gratuité vs Payant
Éditions de la Recherche personnalisée
Nous proposons la Recherche personnalisée Google en deux versions :
* L'édition standard vous offre une expérience de recherche sur mesure
grâce à la technologie Google.
Vous pouvez également personnaliser l'apparence de votre moteur
de recherche et l'intégrer à votre site à l'aide d'un iframe.
Vous devez afficher des publicités en regard des résultats de
recherche, sauf si vous créez votre moteur de recherche
pour une organisation à but non lucratif, une université ou
un établissement public. Le cas échéant, vous pouvez désactiver
les publicités. Vous pouvez gagner de l'argent grâce à ces publicités à
l'aide du programme AdSense pour les recherches.
* Édition Entreprise : à partir de 100 $ USD par an, avec options
supplémentaires disponibles. Une API XML vous garantit
une assistance et des options de personnalisation renforcées pour
vos résultats de recherche. En outre, vous avez l'assurance
qu'aucune annonce ne s'affiche en regard des résultats de recherche.Les valeurs de votre moteur perso… Google
Le code mis à disposition pour Google de notre moteur de recherche mon_moteur. La valeur cx est une des plus importantes 001162007975234339020:0ii-7lvddua. Cette valeur atteste qu’il s’agit bien de votre moteur auprès de l’API Google.
cx?
This optional argument supplies the unique id for the Custom Search Engine that should be used for this request (e.g., cx=000455696194071821846:reviews).
Quelques-uns des arguments spécifiques pour paramètrer votre moteur de recherche Google
Tout ce qu’il faut savoir sur les valeurs du moteur…
extrait tiré de la documentation google
| Argument |
Description |
| cx? |
This optional argument supplies the unique id for the Custom Search Engine that should
be used for this request (e.g., cx=000455696194071821846:reviews).
|
| cref? |
This optional argument supplies the url of a linked Custom Search Engine specification that
should be used to satisfy this request (e.g., cref=http%3A%2F%2Fwww.google.com%2Fcse%2Fsamples%2Fvegetarian.xml).
|
| safe? |
This optional argument supplies the search safety level which may be one of:
safe=active - enables the highest level of safe search filteringsafe=moderate - enables moderate safe search filtering (default)safe=off - disables safe search filtering
|
| lr? |
This optional argument allows the caller to restrict the search to documents
written in a particular language (e.g., lr=lang_ja). This list
contains the permissible set of values.
|
| filter? New! |
This optional argument controls turning on or off the duplicate content filter:
filter=0 - Turns off the duplicate content filterfilter=1 - Turns on the duplicate content filter (default)
|
Le personnalisation des pages de résultat
Attention, comme la vidéo ci-dessus le laisse entendre, vous pouvez renforcer l’hégémonie de Google en lui déléguant la recherche sur votre site. La rubrique, “Flash and other Non-Javascript Environments ”
http://code.google.com/intl/fr/apis/ajaxsearch/documentation/reference.html#_intro_fonje
de Google API vous met sur la piste d’une “RESTful interface” qui offre une méthode GET et un format de réponse en JSON… Trop la classe !
En gros voilà le code qui va vous permettre de personnaliser totalement vos pages de résultats.
$url = "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Paris%20Hilton";
// sendRequest
// note how referer is set manually
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// curl_setopt($ch, CURLOPT_REFERER, "http://www.mysite.com/index.html");
$body = curl_exec($ch);
curl_close($ch);
// now, process the JSON string
$json = json_decode($body);
// now have some fun with the results...
Vous pouvez accéder aux différents services de google que celle donnée dans l’exemple, notamment en changeant la “Base Url” pour faire des recherches sur les vidéos. C-dessous, la liste des services mis à disposition par Google.
- Web Search -
http://ajax.googleapis.com/ajax/services/search/web
- Local Search -
http://ajax.googleapis.com/ajax/services/search/local
- Video Search -
http://ajax.googleapis.com/ajax/services/search/video
- Blog Search -
http://ajax.googleapis.com/ajax/services/search/blogs
- News Search -
http://ajax.googleapis.com/ajax/services/search/news
- Book Search -
http://ajax.googleapis.com/ajax/services/search/books
- Image Search -
http://ajax.googleapis.com/ajax/services/search/images
- Patent Search -
http://ajax.googleapis.com/ajax/services/search/patent
A noter la recherche se fait sur Paris Hilton, aussi populaire en son temps que Pamela Anderson. Gare aux erreurs de frappe, qui vous font confondre avec Perez Hilton puis Pervez Musharraf.
Quelques informations sur l’API ajax de Google
Pour plus loin
Google, json, moteur, personnalisation, site, Technologie
9 juin 2009 dans CMS, Création de site web, Divers, Drupal, PHP, MYSQL, Tutoriaux par Bruno Flaven
Le fichier INSTALL.txt est bien fait et vous permet de suivre pas à pas les étapes nécessaires à l’installation. Cela suppose toutefois que vous êtes d’un niveau un peu avancé puisque si vous suivez les 7 points de l’installation cela vous amènera à faire des commandes du genre mv, cp , chmod et autre tar… simple mais compliqué lorsque on n’est pas trop expert. De toutes les façons, nous faisons ici une installation sur MAMP qui est pour l’ensemble de ces articles notre environnement de développement et de test.
Pour installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :
On va donc se contenter de faire l’installation via le navigateur… C’est plus simple et c’est parti&nsb;!
1. La première chose à faire : créer le fichier de settings.php
Une des toutes premières choses à faire est de créer settings.php. Intentionnellement un fichier de démonstration figure en lieu et place, il ne vous reste plus qu’à faire un copier-coller de ce fichier puis de le renommer en settings.php
Lors de la procédure d’installation qui va être lancé via la navigateur, l’application va écrire dans ce fichier settings.php au moment de l’installation. C’est pour information, le sens de la commande chmod a-w sites/default/settings.php figurant dans le fichier INSTALL.txt
2. Dans un deuxième temps, créer la BDD qui va réceptionner Drupal 6.x
Comme dans de précédents articles, il y a plusieurs façons de créer sa BDD soit directement dans le client MySQL soit en passant par phpMyAdmin. Nous choisirons la première méthode. Toutefois, si vous souhaitez procéder via phpMyAdmin, reportez-vous à l’article suivant qui présente la méthode pour une installation…. Wordpress ! Cf Créer et héberger son site avec Wordpress.
Les information indispensables pour créer la BDD
On crée une base et un utilisateur simultanément bien sûr, en production, le mot de passe peut et doit être légèrement plus complexe. La commande SQL pour se connecter au client MySQL de MAMP. Vous vous connecté(e) comme utilisateur root, le mot de passe est root
/Applications/MAMP/Library/bin/mysql -u root -p
# Création de la base drupal6_install
CREATE DATABASE drupal6_install;
# Création simultanée de la base drupal6_install et l'utilisateur drupal6_install
CREATE USER 'drupal6_install'@'localhost' IDENTIFIED BY 'drupal6_install';GRANT USAGE ON *.*
TO 'drupal6_install'@'localhost' IDENTIFIED BY 'drupal6_install'WITH MAX_QUERIES_PER_HOUR 0
MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0;
CREATE DATABASE IF NOT EXISTS drupal6_install;GRANT ALL PRIVILEGES ON
drupal6_install.* TO 'drupal6_install'@'localhost';
Au terme de ces commandes dans MySQL, nous aurons donc de quoi compléter les informations demandées lors de l’installation de Drupal 6.x. A savoir les informations suivantes :
Database Name= drupal6_install
Database User name = drupal6_install
Database Password = drupal6_install
Database Host = localhost
3. La marche à suivre écran par écran
Une fois, les deux étapes précédentes effectuées : le fichier settings.php crée, la BDD créée. Il ne vous reste plus qu’à vous laisser guider écran par écran.
Ecran 1 - Que l’installation commence…
Ecran 2 - Les éléments requis
Le message d’erreur si le fichier settings.php n’existe pas
Ecran 3 - La BDD (la base de données)
L’écran complété - Qui joue en base… MySQL
Vous pouvez compléter d’autres informations concernant la BDD dont notamment le préfixe à vos tables. Nous avons mis dru_
Ecran 4 - Configuration du site
Il y a un test du niveau de sécurité de votre mot de passe admin. C’est “Low”, votre site risque d’être une auberge espagnole.
“Medium” est un niveau acceptable, à vous d’en décider néanmoins. Si l’application est stratégique, mieux vaut tenter le “High” !
La configuration d’autres propriétés du serveur. Vous pouvez toujours les modifier après coup.
Ecran 5 - L’installation se termine
Nous n’avons pas changé la valeur Site name, ce qui explique la présence de 127.0.0.1
Ecran 6 - Le “frontend” de votre site drupal 6.x
Ecran 7 - Le “backend” de votre site drupal 6.x
4. Lancer manuellement le “cron job”
Il y a un message d’alerte qui s’affiche pour vous inviter à lancer le “cron job”. Faites-le manuellement et le message disparaîtra. Pour se faire il faut cliquer sur le lien “run cron manually”. Une fois, cette opération accomplie, on peut légitimement considérer que vous venez d’installer avec succès Drupal 6.
Le message d’erreur à la cron
Les instructions sorties du fichier INSTALL.txt
Livré in extenso, les 7 points de l’installation autant dire les 7 piliers de la sagesse “drupalienne”.
INSTALLATION
------------
1. DOWNLOAD DRUPAL AND OPTIONALLY A TRANSLATION
You can obtain the latest Drupal release from http://drupal.org/. The files
are in .tar.gz format and can be extracted using most compression tools. On a
typical Unix command line, use:
wget http://drupal.org/files/projects/drupal-x.x.tar.gz
tar -zxvf drupal-x.x.tar.gz
This will create a new directory drupal-x.x/ containing all Drupal files
and directories. Move the contents of that directory into a directory within
your web server's document root or your public HTML directory:
mv drupal-x.x/* drupal-x.x/.htaccess /var/www/html
If you would like to have the default English interface translated to a
different language, we have good news. You can install and use Drupal in
other languages from the start. Check whether a released package of the
language desired is available for this Drupal version at
http://drupal.org/project/translations and download the package. Extract
the contents to the same directory where you extracted Drupal into.
2. CREATE THE CONFIGURATION FILE AND GRANT WRITE PERMISSIONS
Drupal comes with a default.settings.php file in the sites/default
directory. The installer uses this file as a template to create your
settings file using the details you provide through the install process.
To avoid problems when upgrading, Drupal is not packaged with an actual
settings file. You must create a file named settings.php. You may do so
by making a copy of default.settings.php (or create an empty file with
this name in the same directory). For example, (from the installation
directory) make a copy of the default.settings.php file with the command:
cp sites/default/default.settings.php sites/default/settings.php
Next, give the web server write privileges to the sites/default/settings.php
file with the command (from the installation directory):
chmod o+w sites/default/settings.php
So that the files directory can be created automatically, give the web server
write privileges to the sites/default directory with the command (from the
installation directory):
chmod o+w sites/default
3. CREATE THE DRUPAL DATABASE
Drupal requires access to a database in order to be installed. Your database
user will need sufficient privileges to run Drupal. Additional information
about privileges, and instructions to create a database using the command
line are available in INSTALL.mysql.txt (for MySQL) or INSTALL.pgsql.txt
(for PostgreSQL).
To create a database using PHPMyAdmin or a web-based control panel consult
the documentation or ask your webhost service provider.
Take note of the username, password, database name and hostname as you
create the database. You will enter these items in the install script.
4. RUN THE INSTALL SCRIPT
To run the install script point your browser to the base URL of your website
(e.g., http://www.example.com).
You will be guided through several screens to set up the database,
create tables, add the first user account and provide basic web
site settings.
The install script will attempt to create a files storage directory
in the default location at sites/default/files (the location of the
files directory may be changed after Drupal is installed). In some
cases, you may need to create the directory and modify its permissions
manually. Use the following commands (from the installation directory)
to create the files directory and grant the web server write privileges to it:
mkdir sites/default/files
chmod o+w sites/default/files
The install script will attempt to write-protect the settings.php file and
the sites/default directory after saving your configuration. However, you
may need to manually write-protect them using the commands (from the
installation directory):
chmod a-w sites/default/settings.php
chmod a-w sites/default
If you make manual changes to the file later, be sure to protect it again
after making your modifications. Failure to remove write permissions to that
file is a security risk. Although the default location for the settings.php
file is at sites/default/settings.php, it may be in another location
if you use the multi-site setup, as explained below.
5. CONFIGURE DRUPAL
When the install script succeeds, you will be directed to the "Welcome"
page, and you will be logged in as the administrator already. Proceed with
the initial configuration steps suggested on the "Welcome" page.
If the default Drupal theme is not displaying properly and links on the page
result in "Page Not Found" errors, try manually setting the $base_url variable
in the settings.php file if not already set. It's currently known that servers
running FastCGI can run into problems if the $base_url variable is left
commented out (see http://bugs.php.net/bug.php?id=19656).
6. REVIEW FILE SYSTEM STORAGE SETTINGS AND FILE PERMISSIONS
The files directory created in step 4 is the default file system path used
to store all uploaded files, as well as some temporary files created by Drupal.
After installation, the settings for the file system path may be modified
to store uploaded files in a different location.
It is not necessary to modify this path, but you may wish to change it if:
* your site runs multiple Drupal installations from a single codebase
(modify the file system path of each installation to a different
directory so that uploads do not overlap between installations); or,
* your site runs a number of web server front-ends behind a load
balancer or reverse proxy (modify the file system path on each
server to point to a shared file repository).
To modify the file system path:
* Ensure that the new location for the path exists or create it if
necessary. To create a new directory named uploads, for example,
use the following command from a shell or system prompt (while in
the installation directory):
mkdir uploads
* Ensure that the new location for the path is writable by the web
server process. To grant write permissions for a directory named
uploads, you may need to use the following command from a shell
or system prompt (while in the installation directory):
chmod o+w uploads
* Access the file system path settings in Drupal by selecting these
menu items from the Navigation menu:
Administer > Site configuration > File system
Enter the path to the new location (e.g.: uploads) at the File
System Path prompt.
Changing the file system path after files have been uploaded may cause
unexpected problems on an existing site. If you modify the file system path
on an existing site, remember to copy all files from the original location
to the new location.
Some administrators suggest making the documentation files, especially
CHANGELOG.txt, non-readable so that the exact version of Drupal you are
running is slightly more difficult to determine. If you wish to implement
this optional security measure, use the following command from a shell or
system prompt (while in the installation directory):
chmod a-r CHANGELOG.txt
Note that the example only affects CHANGELOG.txt. To completely hide
all documentation files from public view, repeat this command for each of
the Drupal documentation files in the installation directory, substituting the
name of each file for CHANGELOG.txt in the example.
For more information on setting file permissions, see "Modifying Linux, Unix,
and Mac file permissions" (http://drupal.org/node/202483) or "Modifying
Windows file permissions" (http://drupal.org/node/202491) in the online
handbook.
7. CRON MAINTENANCE TASKS
Many Drupal modules have periodic tasks that must be triggered by a cron
maintenance task, including search module (to build and update the index
used for keyword searching), aggregator module (to retrieve feeds from other
sites), ping module (to notify other sites about new or updated content), and
system module (to perform routine maintenance and pruning on system tables).
To activate these tasks, call the cron page by visiting
http://www.example.com/cron.php, which, in turn, executes tasks on behalf
of installed modules.
Most systems support the crontab utility for scheduling tasks like this. The
following example crontab line will activate the cron tasks automatically on
the hour:
0 * * * * wget -O - -q -t 1 http://www.example.com/cron.php
More information about cron maintenance tasks are available in the help pages
and in Drupal's online handbook at http://drupal.org/cron. Example scripts can
be found in the scripts/ directory.
Une vidéo de d’installation de Drupal 6.x sur PC
Pour aller plus loin
NB : Par curiosité, la police de drupal se nomme FF Max, elle est payante et disponible à http://www.fontfont.com/. Plus d’infos sur le “look and feel” par défaut de Drupal disponible à http://drupal.org/node/27367.
CMS, Drupal, MySQL, PHP
7 juin 2009 dans CMS, Divers, Tutoriaux, Webdesign, Widget, Gadget, Wordpress, XHTML CSS par Bruno Flaven
-
Voilà bien une chose importante dont on ne souvient jamais en situation lorsque l’on en a le plus besoin, c’est à dire au moment d’intégrer un “template” pour Wordpress. Pour ne rien vous cacher, l’intérêt consiste à utiliser WP comme on le ferait avec Joomla ou avec Drupal, pour positionner des éléments de contenu, c’est à dire à utiliser au maximum le moteur applicatif de widgets mais en plaçant chacun de ces widgets dans des “sidebars” supplémentaires.
On va respecter l’équation ci-dessous.
Tirer profit au maximum des sidebars / à la limite 1 widget = 1 sidebar
Pourquoi respecter une telle équation, deux raisons à cela principalement :
- En fragmentant votre code, vous pouvez déléguer le développement de certains widgets à d’autres développeurs.
- Pour le responsable éditorial du futur site, cela permet de s’appuyer sur les fonctions d’affichage de WP, sans pour autant changer de template ou d’aller triturer le code. Le maximum de fonctions éditoriales sont gérées via les widgets WordPress.
C’est vrai que lorsque vous atteigniez ce niveau de complexité, il vaut peut-être mieux passer à autre chose qu’à Wordpress, Drupal par exemple.
Pour les besoins de notre cause, nous allons travailler sur le “template” livré par défaut lors de l’installation et on va le modifier afin d’ajouter des sidebars supplémentaires.
Modifier le code du fichier functions.php
Le plus simple est donc de prendre le « template » qui est livré par défaut et de le tordre jusqu’à ce qu’il satisfasse vos besoins.
Il faut changer le fichier functions.php, en lui administrant un peu de variabilité. c’est le sens de la commande if ( function_exists('register_sidebars') ) register_sidebars(4);. On déclare en fait qu’il va avoir dans notre thème 4 “sidebars” dont celle qui existe actuellement.
Extrait de functions.php
/**
* @package WordPress
* @subpackage Default_Theme
*/
/*
Le code d'origine est désactivé...
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
*/
if ( function_exists('register_sidebars') )
/* nous avons 4 sidebars à disposition désormais */
register_sidebars(4);Créer les fichiers supplémentaires en respectant une nomenclature
Dans le thème par défaut, il existe un fichier sidebar.php. Il vous faut conserver le nom sidebar.php car ce fichier est appelé par la fonction get_sidebar();. Les fichiers suivants, contenant vos autres “sidebars” sont ensuite numérotés à partir de 2 ex sidebar2.php, sidebar3.php, sidebar4.php…etc.
Insérer le code dans un fichier de “sidebar” par exemple sidebar2.php
Il vous suffit d’indiquer le fichier de “sidebar” la condition suivante if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : et de clore cette condition avec un endif;. C’est la mention dynamic_sidebar(2) qui permet l’appelle à la sidebar2.php, si nous avions eu dynamic_sidebar(4), on aurait eu un appel à sidebar4.php
Ci-dessous le code complet du fichier sidebar2.php, pour pouvoir voir déterminer qu’il s’agit bien de la sidebar2.php, on a placé un <h2 class="pagetitle">sidebar2.php</h2> en début de code.
Extrait de sidebar2.php
<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
?>
<div>
<h2 class="pagetitle">sidebar2.php</h2>
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
<!-- les widgets viennent ici -->
<?php endif; ?>
</ul>
</div>Jouer placé ou pas…
Libre à vous de placer vos “sidebars” additionnelles où vous le souhaitez. Dans notre exemple, on place sidebar2.php dans le fichier footer.php et sidebar3.php en “include” dans le fichier sidebar.php lui-même et enfin sidebar4.php en “include” dans le fichier index.php
Une vue complète de la sidebar de notre thème
sidebar.php qui correpsond à notre “sidebar1″
sidebar3.php inclus dans sidebar.php
sidebar4.php inclus dans index.php
sidebar2.php inclus dans footer.php
Manipuler les widgets par sidebar depuis l’admin
Comme le positionnement de votre contenu est factorisé dans des fichiers indépendants et adossé au moteur de widgets de WP, vous pouvez ensuite sélectionner facilement contenu et l’endroit qui vous convient pur le placer.
4 “sidebars” sont à votre disposition
contenu sibebar4
contenu sibebar3
contenu sibebar2
édition du widget contenu dans la sibebar2 inclus dans footer.php
contenu sibebar1
Un peu plus de code…
Extrait de sidebar.php
<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
?>
<div id="sidebar">
<h2 class="pagetitle">sidebar1.php</h2>
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
<!-- la suite se trouve dans le fichier d'origine -->Extrait de sidebar3.php
<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
?>
<div>
<h2 class="pagetitle">sidebar3.php</h2>
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(3) ) : else : ?>
<!-- les widgets viennent ici -->
<?php endif; ?>
</ul>
</div>Extrait de sidebar4.php
<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
?>
<div>
<h2 class="pagetitle">sidebar4.php</h2>
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(4) ) : else : ?>
<!-- les widgets viennent ici -->
<?php endif; ?>
</ul>
</div>extrait du code index.php, il s’agit de l’insertion de “sidebar4″
<?php get_sidebar(); ?>
<div id="sidebar">
<!-- insertion sidebar4.php -->
<?php include (TEMPLATEPATH . "/sidebar4.php"); ?>
</div>
<?php get_footer(); ?>
extrait du code sidebar.php, il s’agit de l’insertion de “sidebar3″
<?php endif; ?>
</ul>
<!-- insertion sidebar3.php -->
<?php include (TEMPLATEPATH . "/sidebar3.php"); ?>
</div>
extrait du code footer.php, il s’agit de l’insertion de “sidebar2″
<?php wp_footer(); ?>
<div><?php include (TEMPLATEPATH . "/sidebar2.php"); ?></div>
</body>
</html>
Pour aller plus loin
Templates, theme, Widget, Wordpress
31 mai 2009 dans Non classé par Bruno Flaven
L’article devrait s’intituler “Que faire des vieux scripts ou bienvenue au cimetière des éléphants”. En effet, on est en droit de se demander que faire de vos scripts en Cobol ou de vos jeux patiemment élaborés en turbo “fenouil” pascal (je ne sais pas si cela peut exister…). Toutefois, dans le vaste monde du web (on devient lyrique), il y a peut-être quelqu’un, quelque part, qui attend le script en MS-DOS avec impatience car en effet, “fenêtres” dit “windows” est plus qu’étendu sur le monde, cela fait donc potentiellement du monde intéressé par les scripts en MS-DOS.
Plus sérieusement, voilà quelques facilités offertes pour faire l’encodage en masse et l’extraction de DVD sur Windows.
Vous pouvez automatiser ces actions d’extraction, de conversion à l’aide de .bat ou de .exe pour ffmpeg, mencoder ou même imagemagick. Pour installer un environnement susceptible de permettre ce type d’opérations, je vous invite à découvrir les quelques articles consacrées auxquels nous faisons référence dans cet article.
NB : Souvent, l’impossibilité de lire ou de convertir une vidéo vient du fait que vous ne possédez pas le codec correspondant pur la vidéo comme pour le son. Pour d’un seul coup, charger un bon nombre de codecs, un des packs que je vous recommande est à télécharger sur http://www.cole2k.net/
. Il y a 3 types de packs : Advanced, Standard, Silent Install. Je vous conseille le pack Advanced ou Standard.
- DivX 7.0 Pro Video Codec.
- DivX h.264 Video (Decoder) Codec.
- DivX Web Player 1.4.2.7 browser plugin.
- XviD 1.2.1 VAQ Video (Encoder) Codec - Koepi’s 04/12/08 Build
- ffdshow Video Codec 20090320 Revision 2792 by clsid.
- Microsoft - Windows Media 9 Video Codec 9.0.1.369.
- On2 Technologies VP7 Video (Decoder) Codec 7.0.8.
- On2 Technologies VP6 Video Codec 6.4.2.
Source : http://www.cole2k.net/
NDLR : Hadopi, mon ami, qu’as-tu fait de ma vie ? A ce que j’ai compris, déplomber des DVD avec mencoder/ffpmepg peut vous envoyer en prison. Aussi j’aime le risque et veux bien livrer des secrets de polichinelle sur l’encodage pour être sacrifié et dénoncé sur la place publique, avec ou sans le salaire de TF1. Cela me fera toujours un peu de notoriété… Christine Albanel, si tu lis ce “post”, nous sommes dans l’annuaire et je répond aux heures ouvrables, “pick me please” (comme dit l’âne de Shrek) et “make my day” (comme disait Harry Torino) !
Petite index de commandes valables sous MS-DOS
REM => désactive la ligne et la place en commentaire:: => désactive la ligne et la place en commentaireecho. => affiche une ligne videPause>nul => il n’y a plus de message affiché dans vos .battest_04.bat bruno_le_dir => exécute le .bat avec l’argument derrière ici bruno_le_dir.test_06.bat C:0_BATCH_DOS0_test\files_2 => exécute le .bat avec l’argument derrière ici le chemin est C:0_BATCH_DOS0_test\files_2cd C:0_BATCH_DOS0_test\files_2 => se rend à l’adresse indiqué c’est à dire C:0_BATCH_DOS0_test\files_2test_08.bat bruno => exécute le .bat avec l’argument derrière ici bruno
Un fichier .bat pour encoder en masse toutes les vidéos disponibles dans un répertoire.
A l’aide de ce code, vous pourrez encoder l’ensemble des vidéos, figurant dans un répertoire. Les fichiers vidéos dont l’extension sera *.avi *.mpg *.mpeg *.mov
code de convert_mp4.bat
@echo off
:::::::::::::::::::::::::::::::::::::::::::::
:: ::
:: ::
:: Encode video in a dir ::
:: and output in another dir ::
:: work with mencoder ::
:: Made by hecube.net ::
:: ======================================= ::
:: ::
:: Visit hemedia.net ::
:: ::
:::::::::::::::::::::::::::::::::::::::::::::
:: copyright
echo === Encode videos in a dir and output in another dir ===
echo === work with mencoder ===
echo === Made by hecube (c) 2007 ===
echo === version 1.0 ===
echo.
:: FUNCTIONS
set dd=%date:~0,2%
set mm=%date:~3,2%
set yyyy=%date:~6,4%
set hour=%time:~0,2%
set min=%time:~3,2%
set sec=%time:~6,2%
set mmsec=%time:~9,2%
:: values for configuration
:
set my_path_1=C:2_movie_source\source\
:
set my_path_2=C:2_movie_source\dest\
title === Encode video in a dir and outpout in another dir ===
Color 0A
:: FILENAME
echo ÉÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍ»
echo º º
echo º The SELECT questions are disable º
echo º A DIRECTORY FOR DESTINATION º
echo º AND A DIRECTORY FOR SOURCE º
echo º º
echo º º
echo ÈÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍͼ
echo.
echo.
REM set /P my_path_1=" (my_path_1) ex C:2_movie_source\source\ Define the DIRECTORY source ? "
REM set /P my_path_2=" (my_path_2) ex C:2_movie_source\ Define the DIRECTORY destination ? "
set /P type_list_it=" Do you want to encode all the movies (y/n)? "
IF /I %type_list_it% == y (
GOTO re1
) ELSE (
GOTO nor
)
:: LEAVE AND DO NOTHING
:nor
echo.
echo NOTHING HAS BEEN MADE
echo.
goto end
echo.
:: ========= RE1
:re1
cd %my_path_1%
set xvidencopts_specs=pass=2:bitrate=700:vhq=2:bvhq=1:chroma_opt:quant_type=mpeg
set mencoder_specs=-vf scale=320:240,harddup -srate 44100 -af lavcresample=44100 -lameopts preset=medium:fast -ofps 25
set ext=.mpg
FOR %%G IN (*.avi *.mpg *.mpeg *.mov) DO (
mencoder -oac mp3lame -ovc xvid %mencoder_specs% -xvidencopts %xvidencopts_specs% -o %my_path_2%%%~nG%ext% %my_path_1%%%G
echo.
echo.
echo ******
echo %%G converted to %%~nG%ext%
echo ******
echo.
echo.
echo %%G converted to %%~nG%ext% >> %my_path_2%log_encode_%d%%mm%%yyyy%_%sec%.txt
)
goto rend
:: ERROR
IF ERRORLEVEL 1 GOTO er
GOTO rend
:er
echo.
echo !!! FAILURE IN ACTION !!!
echo.
:: ========= RE1
:: LEAVE AFTER THE JOB
:rend
echo.
echo === CONGRATULATIONS - YOU MADE ALL ===
:end
ECHO.
ECHO = End of conversion =
ECHO = Push the space bar to exit =
pause>nul
Un fichier .bat pour extraire la piste d’un dvd
La ligne de commande ci-dessous, vous permet d’indiquer la piste exacte que vous souhaitez extraire en indiquant le nom et le chemin direct vers le fichier .VOB qui contient la vidéo. Dans notre exemple, d:\VIDEO_TS\VTS_01_1.VOB est donc la première piste le premier fichier .VOB sur le lecteur de DVD qui est “mappé” dans notre système par la lettre d:. Deux remarques :
- Votre lecteur DVD peut-être disponible sur une autre lettre par exemple
f:
- Cette commande est parfois utile pour un DVD finalisé
mencoder d:\VIDEO_TS\VTS_01_1.VOB -oac mp3lame -ovc lavc -of mpeg -mpegopts format=dvd -vf scale=720:576, harddup -srate 48000 -af lavcresample=48000 -lavcopts vcodec=mpeg2video:vrc_buf_size=1835:vrc_maxrate=9800:vbitrate=5000:keyint=15:acodec=ac3:abitrate=192:aspect=16/9 -ofps 25 -ss 00:00:00 -endpos 00:00:00 -o %_output%
code de extract_dvd.bat
@echo off
:::::::::::::::::::::::::::::::::::::::::::::
:: extract_dvd.bat ::
:: ::
:: extract any track from a DVD ::
:: Made by hecube.net ::
:: === Use Mencoder application === ::
:: ::
:: Visit hemedia.net ::
:: ::
:::::::::::::::::::::::::::::::::::::::::::::
:: copyright
echo === STEP 1 - extract dvd for futur encoding (.avi) ===
echo === Made by hecube (c) 2007 ===
echo === version 1.0 : 23/07/25007 : blog@hecube.net ===
echo.
:: copyright
:: FUNCTIONS
set dd=%date:~0,2%
set mm=%date:~3,2%
set yyyy=%date:~6,4%
set hour=%time:~0,2%
set min=%time:~3,2%
set sec=%time:~6,2%
set mmsec=%time:~9,2%
:: FUNCTIONS
title extract dvd - step 1
Color 0A
:: VALUES
:: ------------------ HERE DEFINE THE CORRECT PATH TO THE DIRECTORY OF VIDEO OUTPUT
set my_path_output=C:2_movie_source\dest
set cut_start_defaut= 00:00:00
set filename_extract_default=movie_%dd%_%mm%_%yyyy%_%hour%_%min%_%sec%_%mmsec%
set track_nb_defaut= 1
:: PATH FOR FILES
cd %my_path_output%
:: FILENAME
echo.
echo = Filename to extract =
echo.
:: ask for the filename
:op_input
echo ÉÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍ»
echo º º
echo º INSERT THE DVD IN THE COMPUTER º
echo º DO NOT USE ANY SPACE IN THE FILENAME º
echo º DO NOT PUT ANY EXTENSION IN THE FILENAME º
echo º TAPE ON ENTER TO VALIDATE º
echo º º
echo ÈÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍͼ
echo.
set /P filename_extract="What is the filename of the file extracted? "
if not defined filename_extract SET filename_extract=%filename_extract_default%
SET _output= %my_path_output%\%filename_extract%_%dd%_%mm%_%yyyy%_%hour%_%min%_%sec%_%mmsec%.avi
:: CUT THE VID
:cutVid
echo.
echo By default 00:00:00. For 9 sec type 00:00:09..etc
SET /P cut_start="Cut the beginning? "
if not defined cut_start SET cut_start=%cut_start_defaut%
SET _ss= %cut_start%
:: CUT THE VID
:trackNb
:: track_nb
echo.
echo Select the track number ? eg 1 or 2 one @ time...
SET /P cut_start="Cut the beginning? "
if not defined track_nb SET track_nb=%track_nb_defaut%
SET _tnb= %track_nb%
:: ENCODE
mencoder dvd://%_tnb% -oac copy -ovc lavc -of mpeg -mpegopts format=dvd -vf scale=720:576, harddup -srate 48000 -af lavcresample=48000 -lavcopts vcodec=mpeg2video:vrc_buf_size=1835:vrc_maxrate=9800:vbitrate=5000:keyint=15:acodec=ac3:abitrate=192:aspect=16/9 -ofps 25 -ss %_ss% -o %_output%
REM mencoder dvd://%_tnb% -oac copy -ovc lavc -of mpeg -mpegopts format=dvd -vf scale=720:576, harddup -srate 48000 -af lavcresample=48000 -lavcopts vcodec=mpeg2video:vrc_buf_size=1835:vrc_maxrate=9800:vbitrate=5000:keyint=15:acodec=ac3:abitrate=192:aspect=16/9 -ofps 25 -ss %_ss% -o %_output%
goto end
:: ############################################################# // PUT YOUR CODE HERE
:error
ECHO !!! FAILURE IN EXTRACTING THE FILE !!!
:: ERROR
IF ERRORLEVEL 1 GOTO error
GOTO end
:end
echo.
echo === CONGRATULATIONS - YOU MADE ALL ===
ECHO.
ECHO = End of conversion =
ECHO = Push the space bar to exit =
pause>nul
Transformer un .bat en .exe
Si on veut se la donner grave, on peut facilement transformer les .bat en .exe. Dans notre exemple, on va convertir convert_mp4.bat en convert_mp4.exe
Bien sûr quelques avantages a cela :
- Pas de réutilisation du code mais donc pas d’amélioration possible… C’est bien le problème de Microsoft sans doute, du code ouvert, vous passez à un code fermé.
- Placer l’icône de votre choix comme illustration du
.exe, modeste comme avantage mais toujours valorisé par l’utilisateur final que je suis tout comme vous. C’est un peu le même principe que la personnalisation du curseur de la souris. Une remarque néanmoins, on s’en fatigue vite.
Présentation de “Bat To Exe Converter” pour convertir un .bat en .exe
On utilisera “Bat To Exe Converter”. Ce programme est gratuit et il permet de compiler des fichiers .bat en .exe en leur adjoignant une icône de votre choix.
URL : Bat To Exe Converter - http://www.f2ko.de/
Ecran 1 - Choix des options de votre futur programme .exe
Ecran 2 - Sélection de l’icône et des informations de votre futur programme .exe
Création du .exe à partir du .bat
Etape 1 - l’outil pour créer un .ico
Pour convertir depuis photoshop par exemple, vous devez installer un plugin gratuit ou utiliser un logiciel de création d’icône .ico
Etape 2 - Créer un .ico
Nus voilà avec l’image au format .ico
Le cube du logo de hecube dont on va faire une icône
L’image doit être en 16×16, transparent et avec comme extension .ico
Etape 3 - Compiler le .bat
Il vaut mieux laisser les valeurs par défaut à moins que vous souhaitiez les propriétés d’exécution de votre programme.
L’ajout de l’icone .ico avant de lancer la compilation
Après la compilation, vous obtenez votre tout nouveau programme 02_convert_mp4.exe. Pour info, notre .ico se trouve à côté.
Palette “GEEK” des couleurs et des formes en MS-DOS
Les éléments de décoration à disposition pour peaufiner l’esthétique de vos programmes. Selon, votre génération vous serez plutôt Tron, WarGames ou enfin Zelda…
0 = Noir
1 = Bleu foncé
2 = Vert
3 = Bleu gris
4 = Marron
5 = Pourpre
6 = Kaki
7 = Gris clair
8 = Gris
9 = Bleu clair
A = vert clair
B = Cyan
C = Rouge
D = Rose
E = Jaune
F = blanc
Õ = bordure horizontale
∫ = bordure verticale
… = coin supérieur gauche
» = coin inférieur gauche
ª = coin supérieur droit
º = coin inférieur droit
Pour aller plus loin
Des sources supplémentaires de scripting …
.bat, .exe, DVD, FFMPEG, imagemagick, mencoder, MS-DOS, Scripts, vidéos
23 mai 2009 dans Divers, Framework, PHP, MYSQL, Ruby on Rails par Bruno Flaven
Sans vouloir se livrer à un comparatif effréné listant les avantages et les inconvénients entre les différents “frameworks” open-source écrit en PHP. Exercice qui révèle de la gageure tant le monde des frameworks bouillonne de nouveautés. Chez Hecube, nous pouvons nous prévaloir d’une petite série d’essais sur les principaux frameworks : CakePHP, Symphony, Zend et enfin CodeIgniter. Comme l’image l’indique en début d’article, nous ne faisons pas mystère de celui que nous avons élu, CodeIgniter. Pourquoi ? Le principale argument qui a poussé à ce choix est la SIMPLICITÉ, d’installation, d’utilisation et d’appropriation !
En effet, les frameworks PHP qui existent sur le marché sont nombreux. Des plus connus CakePHP, Zend, Symphony au dernier-né Yii, le choix est ardu mais la récompense est grande quelque soit d’ailleurs le framework qui sera employé !
Pour appuyer mes dires et illustrer les avantages de s’appuyer sur un framework, je vous invite à découvrir la dernière réalisation Hecube. Il s’agit d’un atelier de création et de personnalisation de tee-shirt dont le “frontend” est intégralement en Flash, adossé à CodeIgniter pour la sa partie “backend” et “frontend”. Pour la construction d’un site d’une page blanche, utiliser une framework, c’est une sûreté et un gain de temps non négligeable. Le première étage de la fusée a été livrée :):) Il est disponible à : http://smartbox.artiz.fr/
Au fait, qu’est-ce qu’un framework ?
La définition de framework disponible ci-dessous est celle donnée par le wikipedia. Elle a le mérite d’être assez exhaustive. Dans notre cas, on ne s’intéresse qu’aux frameworks destinés au Web.
Un framework fournit un ensemble de fonctions facilitant la création de tout ou d’une partie d’un système logiciel, ainsi qu’un guide architectural en divisant le domaine visé en modules. Un framework est habituellement implémenté à l’aide d’un langage à objets, bien que cela ne soit pas strictement nécessaire : un framework objet fournit ainsi un guide architectural en divisant le domaine visé en classes et en définissant les responsabilités de chacune ainsi que les collaborations entre classes. Ces classes peuvent être subdivisées en classes abstraites.
http://fr.wikipedia.org/wiki/Framework
Ensuite pourquoi un framework en PHP ?
Evidemment, une fois la définition donnée du framework, on n’a pas dit grand chose de plus !
Vive le ROI
Tout d’abord pourquoi du PHP par rapport à d’autre langages, tout simplement parce que PHP et son acolyte MySQL sont un standard de fait. Standard de fait car l’adoption par le plus grand nombre assèche littéralement la possibilité d’utiliser tout autre technologie si vous êtes guidé par une logique mercantile, non on dit ROI (Return On Investment, ), en clair tout sera plus simple et coûtera moins cher si vous choisissez une technologie populaire et éprouvée. Pour illustrer notre propos, penchez-vous sur les cas d’école que sont le marché de la mesure statistique avec l’apparition d’un nouvel entrant du type de Google Analytics, solution qui est en train de réduire au silence toutes les autres solutions actuelles du marché, gratuites ou payantes. Que dire alors du marché de la géolocalisation toujours avec l’ogre Google ou celui du téléphone mobile où pour une fois Apple s’est montré plus opportuniste.
Pour info : on parle, à contrario, de standard de marché. Un bonne illustration c’est l’hégémonie Windows sur le marché des systèmes d’exploitation des ordinateurs personnels.
PHP ou un autre langage ? Le dilemme du choix pionnier ou conservateur…
Certes, il existe toujours le prestige, lié à une position élitiste ou marginale, position qui consiste à défendre une technologie moribonde ou tellement pointue que vous vous trouvez être le seul expert/prescripteur à pouvoir vous débrouiller dans cet environnement. Un avantage au moins, les conférences peuvent se faire dans une cabine téléphonique, pas la peine de louer plus grand. C’est une stratégie osée mais qui peu s’avérer payante, pensez au succès de Guido van Rossum (montreur de python, aujourd’hui chez Google) ou David Heinemeier Hansson (grand danois de kobé, geek en chef chez 37signals). Tiens, puisque on évoque RoR parlons-en…
Pour certains, un des grands avantages de RoR est d’avoir susciter l’apparition des frameworks PHP. En effet, l’excellent marketing dont RoR a fait l’objet, a un temps ringardiser l’utilisation des autres langages dont PHP. Beaucoup de développeurs se demandaient si ils n’allaient pas franchir la pas et se mettre à RoR. On retrouve d’ailleurs, à mon sens, la trace de ce comparatif dans l’argumentaire commercial de CodeIgniter. Ce dernier reprend, de manière frappante, quasiment point par point les avantages du Ruby On Rails. Les créateurs de CI se sont livrés à un vrai “benchmark” des qualités de ROR en privilégiant les notions de MVC, scaffolding, routes, helpers, active record… Le tout transposé en PHP.
Pour ceux qui viendront du ROR, l’arborescence même de CI vous semblera familière car tout s’articule autour du modèle MVC (Model View Controller). Via les vidéo, on y retrouve aussi le concept CRUD (Create, Update, Delete) et le scaffolding qui a tant impressionné le populo avec RoR.
Une des choses de CI que nous avons aimé…
Une chose pratique parmi les nombreux avantages de CI, est la classe “The Profiler”. Elle vous permet de pister les erreurs et vous mettre sur la piste de “bugs” éventuels comme d’autre sur celles des “serial-killers”.
The Profiler Class will display benchmark results,
queries you have run, and $_POST data at the bottom of your pages.
This information can be useful during development in order to
help with debugging and optimization.
Extrait de http://codeigniter.com/user_guide/general/profiling.html
Activation du Profiler
/* To enable the profiler place the following function anywhere
within your Controller functions. When enabled a report will be
generated and inserted at the bottom of your pages. */
$this->output->enable_profiler(TRUE);
Sinon, pour découvrir les autres domaines d’excellence de CodeIgniter, jetez un oeil sur le guide de l’utilisateur.
Vidéos - CodeIgniter (CI)
Vidéo des créateurs de CI - Présentation CodeIgniter (CI)
Vidéo des créateurs de CI - Créer son blog en 20 minutes avec CodeIgniter Partie 1
Create Blog in 20 minutes with Codeigniter Part 1
Derek Allard - Créer une application en utilisant CodeIgniter Partie 1/3
Building an application using CodeIgniter part 1/3
Derek Allard - Créer une application en utilisant CodeIgniter Partie 2/3
Building an application using CodeIgniter part 2/3
Derek Allard - Créer une application en utilisant CodeIgniter Partie 3/3
Building an application using CodeIgniter part 3/3
Vous pouvez aussi directement aller sur le site de Derek Allard, qui met disposition les vidéos et les sources de ces explications.
Pour aller plus loin avec CodeIgniter (CI)
Quelques exemples à suivre ou pas avec CI…
Les autres frameworks
CakePHP, CodeIgniter, Framewok, MVC, MySQL, PHP, Symphony, Zend
21 mai 2009 dans Non classé par Bruno Flaven
En quoi cela consiste, il s’agit de “tromper” votre ordinateur en lui indiquant une adresse IP spécifique pour une adresse internet donnée. Cette pratique est très répandue dans le monde du développement notamment lorsque que vous devez accéder à un site en cours de développement ou de pré-production ou de validation. Ce site ne doit être accessible qu’à un petit nombre de “happy few”. Ces derniers ayant fait le changement dans leur fichier hosts, changement qui rend accessible le site via leur navigateur. Or, il est rare que les développeurs, “geeks” et autres “diafoirus du code” vous donnent la moindre explication sur la marche à suivre, comme si tout cela se faisait le plus naturellement du monde :):)
Ce changement dans le fichier hosts
Cela peut aussi être utile lors d’une phase de développement en local. C’est à dire non pas sur une adresse publique mais sur une adresse
Qu’est-ce-qu’un fichier hosts ?
Il ne s’agit pas d’une bête gluante qui va jaillir de votre poitrine et qui a la vitesse de l’éclair va se réfugier dans la machine à laver… Non, c’est une vulgaire fichier texte, sans l’extension .txt qui est utilisé par le système d’exploitation de votre ordinateur. Ce fichier contient un certain nombre d’adresse IP. Une adresse IP (avec IP pour Internet Protocol) est le numéro qui identifie une machine connecté à Internet. Il contient notamment l’adresse dite “loopback IP address 127.0.0.1 in IPv4″ qui correspond à “localhost (qui signifie “this computer”)” dont la devise est citée plus bas.
Une citation attribuée à tort à Tim Berners-Lee
There’s no place like 127.0.0.1
Le code d’un fichier hosts ?
Si vous placez devant la ligne le signe #, la ligne sera désactivée. C’est le cas de notre ligne 4, #127.0.0.1 site1.local.hecube.net, vous ne pourrez donc accéder en local à cette adresse via votre navigateur.
1
2
3
4
| 127.0.0.1 localhost
127.0.0.1 dev.local.hecube.net
91.121.175.39 prod.local.hecube.net
#127.0.0.1 site1.local.hecube.net |
Modifier le fichier hosts sur un PC et sur MAC
Les deux marches à suivre détaillées ci-dessous….
La marche à suivre sur un PC
Voilà, écran par écran, la marche à suivre pour changer son fichier hosts sur un PC qui tourne sous XP.
1. Via l’explorateur windows, on va se rendre dans le répertoire windows.
2. Vous pouvez, sans modifier les paramètres d’affichage des dossiers, accéder à l’adresse C:\WINDOWS\system32\drivers\etc
emplacement du fichier hosts
Il n’est pas besoin de changer les paramètres d’affichage des dossiers pour accéder à hosts
3. Editer le fichier avec notepad
Ajouter les lignes des adresses que vous voulez atteindre. L’insertion se fait toujours de la forme adresse IP[espace]URL par exemple 127.0.0.1 dev.local.hecube.net
5. Le fichier hosts modifié
Une fois les modifications faites, vous n’avez plus qu’à les enregistrer.
6. Les adresses sont accessibles dans le navigateur
Il ne vous reste plus qu’à vous rendre aux adresses indiquées.
91.121.175.39 prod.local.hecube.net
127.0.0.1 dev.local.hecube.net
La marche à suivre sous Mac
Voilà, écran par écran, la marche à suivre pour changer son fichier hosts sur un MAC.
1. Lancer le terminal
Vous devez lancer le terminal. Cette application se trouve dans “Applications > Utilitaires > Terminal” (en passant le chemin sous la console elle-même est /Applications/Utilities/Terminal.app).
accès au terminal
écran du terminal
2. Passer en root sur votre MAC
Pour vous vus permettre de changer de compte utilisateur et de passer en root sur votre Mac, il vous faut taper la commande ensuite sudo -s, ensuite le mot de passe poru entrer sur votre machine.
NOTE : Le mot de passe n’apparait pas, vous êtes sous linux. Vous pouvez taper whoami pour vérifier que vous êtes désormais en user root sur votre MAC.
ATTENTION : EN root, vous avez de nombreux priviléges donc éviter les commandes intempestives qui pourraient endommager votre ordinateur.
3. Editer /etc/hosts
En tapant la commande vi /etc/hosts, vous allez éditer votre fichier hosts. Pour insérer les nouvelles entrées dans votre fichier hosts, taper sur la lettre i de votre clavier, vous êtes en mode insertion dans Vi. Vous pouvez désormais modifier votre fichier.
4. Sauvegarder les changements dans /etc/hosts
Pour conserver les changements, faites CRTL+C, vous sortez du mode insertion, il ne vous reste plus qu’à sauvegader vos changement en tapant :wq. La conséquence de cette comande est w pour “write” et q pour quitter.
les nouvelles adresses et domaines ont été insérés 91.121.175.39 prod.local.hecube.net, 127.0.0.1 dev.local.hecube.net
5. Sortir du compte root
Pour sortir du compte root, taper exit
Vous êtes revenu dans le compet utilisateur habituel…
6. Les adresses sont accessibles dans le navigateur
Il ne vous reste plus qu’à vous rendre aux adresses indiquées.
91.121.175.39 prod.local.hecube.net
127.0.0.1 dev.local.hecube.net
Pour aller plus loin
Pour installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :
Pour installer rapidement et simplement un site en local sous Ruby On Rails, reportez-vous aux articles de ce blog :
Crédits
Pour l’illustration, il s’agit d’un détournement des panneaux de signalisation visibles ne France. la police c’est de l’Arial à ce qui parait.
Site du ministère de l’Écologie, de l’Energie, du Développement durable et de l’Aménagement du territoire
http://www.developpement-durable.gouv.fr/
Le site officiel du ministère de l’intérieur de l’Outre-mer et des Collectivités Territoriales
http://www.interieur.gouv.fr/
Développement, hosts, internet, local, Mac, MySQL, PC, PHP, production, ROR
20 mai 2009 dans CMS, Divers, PHP, MYSQL, Référencement, SEO, Tutoriaux, Wordpress par Bruno Flaven
Il existe quelques impératifs SEO auxquelles tout site doit se plier si ce dernier veut avoir l’espoir d’être bien référencé. Le temps n’est pas encore venu de remettre en cause ces principes, bien au contraire on a déjà vu à de nombreuses occasions comment faciliter le référencement de son site via la création de sitemap notamment. Dans cet article, il est question de sélectionner le plugin Wordpress le plus efficient afin d’intervenir sur le contenu des pages pour une optimisation du référencement. Il est évident que les principes appliqués par ces plugins peuvent être repris et appliqués dans la cadre de tout autre CMS ou lors développement complet d’un site.
Dans notre exemple, nous avons choisi d’optimiser un blog administré sous Wordpress. Naturellement, ce blog contient une page d’accueil, un ensemble de pages et d’articles. Ces derniers sont classés par catégorie et possède chacun leurs propres tags comme ce blog finalement.
Pourquoi de telles précisions ? C’est bien simple, comme souvent dans un CMS, il faut jouer un peu le bon élève en utilisant à fond les capacités offertes par le CMS pour indexer son contenu car souvent cette assiduité se trouve récompenser, ce qui n’est que rarement le cas dans la vraie vie !
Une brève histoire de meta-tags
Une des conditions pour améliorer le référencement consiste à pouvoir modifier les principaux balises contenus entre les éléments du code HTML <head>...</head>. Ces balises aident au référencement.
Que va-t-il se passer ?
Le plugin dans notre cas mais cela peut-être fait manuellement, il va y avoir quelques interventions chirurgicales sur ce tronçon spécifique de vos pages notamment sur certaines balises. Un rapide tour d’horizon permet de distinguer les balises qui nous préoccupent. On en sélectionne un tout petit nombre sans rentrer dans le dénombrement affolant de toutes les balises dites « meta » qui polluent généralement bon nombre de sites.
- La balise titre
C’est tout bonnement le titre de la page
<title>...</title>
- La balise meta description
C’est la description affichée par défaut par les principaux moteurs de recherche à commencer par google. Il s’agit dans l’exemple ci-dessous du début de la description donnée pour le site de hecube.net
<meta name="description" content="Hecube.net est une agence web..." />
- La balise meta keywords
Ce sont les mots-clés qui indiquent un complément d’information quant à la nature des pages publiées. Il s’agit ici des premiers mots-clés du site hecube.net
<name="keywords" content="site web, site Internet, création de site web, creation de site web, création de site internet,...." />
L’ensemble des meta-tags du site hecube.net
<meta name="robots" content="index, follow"/>
<meta name="author" content="Hecube"/>
<meta name="description" content="Hecube.net est une agence web
spécialisée dans la conception et la création de site internet,
la promotion et l'animation de site web ainsi que l'hébergement
de site Internet. Hecube accompagne la stratégie marketing de votre marque
ou de votre entreprise en leur apportant une expertise dans les technologies
web open source"/>
<meta name="keywords" content="site web, site Internet, création de site web,
creation de site web, création de site internet,
creation de site internet, conception de site web, direction de projet web,
spécifications fonctionnelles, Création de logo et charte graphique,
webdesign, hébergement de site web, serveur dédiés, seo, référencement,
newsletter, développement de site web, intégration XHTML CSS, PHP, MYSQL,
Flash, Actionscript, XML, code ignitor, wordpress, joomla, virtuemart,
mootools, script.aculo.us, Prototype, mootools, script.aculo.us, prototype,
Debian, Apache, URL Rewrite, blogs, réseaux sociaux, plates-formes
vidéo participatives, sites ecommerce, boutique en ligne, sites d’enchères,
petites annonces, sites événementiels, opérations de marketing viral, galeries
photos et vidéos, sites institutionnels, widgets web, applications iphone, mobile"/>
<meta name="abstract" content="Hecube.net est une agence web spécialisée
dans la conception, la création et la promotion de site internet"/>
<meta name="location" content="France"/>
<meta name="revisit-after" content="1 day"/>
Le choix du plugin
Comme définit plus haut, le plugin doit être susceptible de répondre à ces 2 critères de sélection.
- Le plugin doit intervenir sur les principales balises liés au référencement.
- Le plugin doit être opérationnel dans WordPress, éventuellement dans WordPressMu et BuddyPress.
Notre choix s’est porté sur 3 plugins. Nous les avons classé par ordre de préférence, le mieux noté au moins bien noté. Bien sûr, cette sélection n’est pas exhaustive, il existe un très grand nombre de plugins d’optimisation SEO ou prétendument comme tel.
1. Le plugin “All in One SEO Pack”
Il est officiellement reconnu par de nombresues personnes comme le plugin Wp le plus abouti.
Deux remarques au sujet de ce plugin :
1. Le plugin redéfinit carrément toute la fonction wp_head(); . Une fois active, le plugin pour chaque post/article, page, le plugin prend environ les 160 premiers caractère espaces inclus et les place dans la balise meta-description.
2. Des valeurs additionnelles sont disponibles
Dans le fichier all_in_one_seo_pack.php, aux alentours de la ligne 700 :
- La valeur
aiosp_post_meta_tags qui correspond à une information additionnelle qui peut être envoyé dans un article (Additional Post Headers)
- La valeur
aiosp_page_meta_tags qui correspond à une information additionnelle qui peut être envoyé dans une page (Additional Page Headers)
- La valeur
aiosp_home_meta_tags qui correspond à une information additionnelle qui peut être envoyé sur la page d’accueil (Additional Home Headers)
extrait du code ligne 700 de all_in_one_seo_pack.php
$page_meta = stripcslashes(get_option('aiosp_page_meta_tags'));
$post_meta = stripcslashes(get_option('aiosp_post_meta_tags'));
$home_meta = stripcslashes(get_option('aiosp_home_meta_tags'));
if (is_page() && isset($page_meta) && !empty($page_meta)) {
if (isset($meta_string)) {
$meta_string .= "\n";
}
echo "is_page "."\n$page_meta";
}
if (is_single() && isset($post_meta) && !empty($post_meta)) {
if (isset($meta_string)) {
$meta_string .= "\n";
}
$meta_string .= "is_single "."$post_meta";
}
if (is_home() && !empty($home_meta)) {
if (isset($meta_string)) {
$meta_string .= "\n";
}
$meta_string .= "is_home "."$home_meta";
}
if ($meta_string != null) {
echo "$meta_string\n";
}L’écran de configuration de “All in One SEO Pack”
partie 1
partie 2
partie 3
partie 4
partie 5
2. Le plugin “Another Wordpress Meta Plugin”
Ce plugin annonce la couleur, la simplicité. Ce plugin fait une chose mais il le fait bien. Un peu comme WordPress est un outil de gestion de blog et il le fait bien. Pour la petite hstoire, le nom du plugin est un détournenment de la devise qui s’affiche par défaut lors de la ceration dun blog WordPres “Just Another Wordpress Blog”.
A l’aide de ce plugin, vous pourrez modifier les champs META tags “keywords” et “description” pur chaque post et chaque page… Que demander de plus !
3. Le plugin “WPMU MetaTags”
Ce plugin nous l’avons car il annonce être conçu pour WPMU mais bon les instructions d’installation sont loin d’être claires. Honnêtement, les deux autres plugins citées ci-dessus font l’affaire si vous souhaitez les déléguer à des blogs au sein de WPMU.
Le fichier ft_wpmu_metatags_core.php à placer dans le répertoire plugins et non mu-plugins même si vous êtes sous WPMU.
Vous pouvez ensuite renseigner les meta-tag “description” et “keywords” et ce pour chaque par blog si vous êtes sous WPMU.
Il est assez sommaire mais peut se révéler interessant comme base de travail pour concevoir un vrai plugin WPMU.
Les principaux articles du blog consacrés au SEO.
Pour aller plus loin
Google, oprimisation, plugin, SEO, Wordpress
18 mai 2009 dans CMS, Divers, PHP, MYSQL, Tutoriaux par Bruno Flaven
Dans la section “rions un peu des CMS” ou “à la découverte des CMS du monde”, prenons TYPO3, qui connaît pourtant quelque références de poids dans le secteur dit du grand compte : Dassault system, Omega (les montres)… Mais voilà, il s’agit d’un CMS, initié par un danois du nom Kasper Skårhøj, passablement ardu à limite un truc de “Meshugene”. Ainsi donc, à moins d’avoir la gestion des sites cités plus haut, il faut vraiment être un peu maso ou allemand (la communauté est effet très active outre-rhin) sur une application pareille. Bien sur, une fois l’effort passé de compréhension, tous les adeptes de TYPO3 vous disent que c’est un bonheur.
Cela étant dit, se moquer des danois et des allemands est chose facile et on pourrait tout aussi bien dire le plus grand mal du CMS prénommé SPIP, français d’origine !
Pour conclure, avant de rentrer dans le dur, sur une note aussi consensuelle qu’une campagne européenne, chaque CMS est fait pour un usage spécifique, à vous donc de bien analyser vos besoins et le CMS s’imposera alors parait-il de lui même. On peut donc conclure que TYPO3 est donc fait pour s’arracher les cheveux…
Toutefois, passons à l’installation de TYPO3, car les plaisanteries n’ont qu’un temps !
Où trouver l’installation de TYPO3 ?
Il vous est proposé un “TYPO3 Testsite” qui permet une prise en main direct de l’outil. Pour cela, il faut cliquer sur http://typo3.org/1274.0.html puis chercher “TYPO3 Testsite”, ensuite télécharger le package au format .zip ou tar.gz
Il vous reste ensuite à le déployer sur votre serveur de dévéloppement le “TYPO3 Testsite”. Dans notre exemple, on fera l’installation dan sun répertoire de htdocs de MAMP nommé /typo-3.8.1/
Pour installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog&nsp;:
- Installer un environnement php-mysql sur Mac
- Installer un environnement php-mysql sous Windows
Je vous livre in extenso, le texte qui vous invite à télécharger “TYPO3 Testsite” qui commence par un retentissant sans plus attendre. Sachez-le, installer TYPO3 Testsite peut vous changer à jamais !!!
IF YOU REALLY CAN’T WAIT!
=========================
If you’re so keen to get started with TYPO3 that you can’t wait until you’ve read to the bottom of this document first, do this…
1 - Download the testsite ZIP distribution
2 - Unzip the distribution to your server
3 - In your browser hit http://[your.site.name]/index.php
4 - Follow the instructions in the 1-2-3 install tool
Please note - we’re not going to support this…if you have a problem, read the rest of the document before you ask any questions!
Installer TYPO3
Créer la base de données (BDD) qui va accueillir le site sous TYPO3
Nous avons toujours nos 2 façons de créer une BDD, via phpMyAdmin ou via la console MySQL, on choit là encore la deuxième via la console puis le client MySQL.
Créer la BDD via la console MySQL
On se connecte à MySQL et on crée la base. Vous pouvez néanmoins vous laissez guider et passer cette étape dans la mesure ou TYPO3 peut se charger lui-même de la création de la BDD.
/Applications/MAMP/Library/bin/mysql -u root -p
# Création de la base typo3_install
CREATE DATABASE typo3_install;
# Création simultanée de la base typo3_install et l'utilisateur typo3_install
CREATE USER 'typo3_install'@'localhost' IDENTIFIED BY
'typo3_install';GRANT USAGE ON *.* TO 'typo3_install'@'localhost' IDENTIFIED
BY 'typo3_install'WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR
0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0; CREATE DATABASE IF NOT EXISTS
typo3_install;GRANT ALL PRIVILEGES ON typo3_install.* TO 'typo3_install'@'localhost';
Au terme de cette commande, nous aurons donc de quoi compléter les informations demandées lors de l’installation de TYPO3. A savoir les informations suivantes :
Database Name = typo3_install
Database User name = typo3_install
Database Password = typo3_install
Database Host = localhost
Les principales destinations et informations de TYPO3
Voilà les principales adresses à connaitre. Nous avons donc fait une installation en local, dans un répertoire nommé typo-3.8.1
Backend : votreserveurlocl/typo-3.8.1/typo3/index.php
Frontend : votreserveurlocl/typo-3.8.1/
Par défaut, les spécifications du compte admin sont les suivantes.
- User: admin
- Pwd: password
Il vous reste deux choses importantes à connaitre, en fin d’installation, et à modifier éventuellement mais cela n’est pas indispensable en développement :
- Changer le paswword de l’admin
- Générer une clé de cryptage “Encryption key” qui sera de la forme
168908dd3227b8358eababa07fcaf09173693781d47f84a372e713d45966a6e18bf1fc2f20fdf0d9dfd9b0af40405338
Les écrans d’installation de TYPO3
TYPO3, comme de nombreux CMS a réduit son processus d’installation à 3 étapes essentielles. Dans notre exemple, nous avons déjà créé la BDD donc nous différons légèrement de l’installation classique recommandée.
Etape 1 - les paramètres de connexion à la BDD
Etape 2 - Les paramètres de connexion à la BDD
Nous sélectionnons nous une BDD existante typo3_install
Etape 3 - Le récapitulatif de la configuration BDD
Nous sélectionnons nous une BDD existante typo3_install
4. C’est fait !
Vous pouvez accéder au “backend” et au “frontend”
5. L’écran “All Configuration”
Vous devez vous rendre sur cette écran pour générer une clé de cryptage “Encryption key”
6. L’écran “backend”
7. L’écran “frontend”
Pour aller plus loin
MySQL, PHP, site, TYPO3, web
11 mai 2009 dans CMS, Divers, Joomla, Virtuemart, Mac, PHP, MYSQL, Tutoriaux par Bruno Flaven
Joomla est un des CMS (Content Management System) qui possède de très nombreux avantages puisqu’il couvre un grand nombre de besoins nécessaires à la création et la gestion de site Web. Ce CMS est un concurrent sérieux de Wordpress, de SPIP ou bien de Drupal. Il a connu un saut qualitatif important avec le passage à une version 1.5. C’est cette dernière version que nous apprêtons à installer. Cette version présente toutefois deux spécificités qui méritent d’être signalées, les voici:
- Un PLUS - Si vous venez d’une version antérieure, l’outil d’administration à légèrement évolué, en bien ou en mal tout dépend de vos habitudes. On peut estimer que c’est plutôt en bien dans la mesure où par exemple les procédures d’installation ont été simplifiées.
- Un MOINS - Avec cette version 1.5, vous risquez de “faire choux-blanc” si vous souhaitez profiter de l’extraordinaire vitalité de la communauté de développement tant pour les “templates”, les composants ou les modules qui étendent considérablement le spectre des fonctionnalités du CMS en effet à notre avis de très, trop nombreux modules ou composants ne fonctionnent pas sous cette version quand bien même le plugin “System - Legacy” est activée. Ce dernier Fournit une compatibilité avec les versions précédentes de Joomla ! Il vous faudra attendre que le(s) créateur(s) fournissent une version compatible avec votre version 1.5
Pour la défense de Joomla, ce risque existe avec bien d’autres CMS lorsque une nouvelle version est mise à disposition, la migration des plugins devient parfois problématique …
Installer le CMS Joomla 1.5 pour gérer son site
Pour parvenir rapidement à un résultat, on va s’inspirer d’un des méthodes d’installation décrites dans cet article :
Créer et héberger son site avec Wordpress
Méthode qui consiste, à installer le CMS sur MAMP, pour le tester puis ensuite pour le mettre en production. Ces explication sont bien évidemment valables pour PC. Vous pourriez réaliser la même installation à l’aide de Easyphp.
Pour installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :
1. Connecter au client MySQL via la console sous MAMP
Connectez-vous au client MySQL de MAMP avec le commande suivante via le terminal comme utilisateur root, le mot de passe est root.
/Applications/MAMP/Library/bin/mysql -u root -p
2. Créer la BDD joomla_1_5 pour Joomla 1.5 !
On va créer la BDD en al nommant joomla_1_5
# Création de la base joomla_1_5
CREATE DATABASE joomla_1_5;
3. L’utilisateur MySQL joomla_1_5 va avoir tous les droits sur la BDD joomla_1_5
On va créer la BDD en al nommant joomla_1_5
# Création simultanée de la base joomla_1_5 et l'utilisateur joomla_1_5
CREATE USER 'joomla_1_5'@'localhost' IDENTIFIED BY 'joomla_1_5';GRANT
USAGE ON *.* TO 'joomla_1_5'@'localhost' IDENTIFIED BY 'joomla_1_5'WITH
MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR
0 MAX_USER_CONNECTIONS 0; CREATE DATABASE IF NOT EXISTS joomla_1_5;GRANT
ALL PRIVILEGES ON joomla_1_5.* TO 'joomla_1_5'@'localhost';
Pour mémoire, on conserve les informations suivantes qui nous seront demandées plus tard.
Type de la base de données => mysql
Nom du serveur => localhost
Nom d'utilisateur => joomla_1_5
Mot de passe => joomla_1_5
Nom de la base de données => joomla_1_5
En détail, l’écran de la console après les commandes MySQL
Pour sortir, après cette séquence, vous devez taper exit
1. Installation Joomla 1.5 - Ecran de sélection de langue
2. Installation Joomla 1.5 - Ecran de pré-installation
3. Installation Joomla 1.5 - License
4. Installation Joomla 1.5 - Ecran de configuration de la BDD
C’est à ce moment que les informations conservées plus haut vont nous être utiles.
Par défaut, vous pouvez laisser le préfixe des tables jos_. Sinon, voici de nouveau les données :
Type de la base de données => mysqlNom du serveur => localhostNom d'utilisateur => joomla_1_5Mot de passe => joomla_1_5Nom de la base de données => joomla_1_5
En détail, l’écran dûment complété
5. Installation Joomla 1.5 - Ecran de configuration de la BDD
Pour configurer un compte FTP pour se connecter au répertoire de Joomla uniquement.
6. Installation Joomla 1.5 - Ecran de configuration principale
Il s’agit de configurer ici l’accès à l’interface d’administration ou “backend”.
7. Installation Joomla 1.5 - Ecran final “Terminer”
Il vous ai demandé de supprimer intégralement le répertoire d’installation sans quoi vous n’accéderez pas à au “backend” et au “frontend” Joomla 1.5 !
L’écran de “frontend” Joomla 1.5 si le répertoire d’installation existe toujours.
8. Après la suppression du répertoire d’installation
L’écran de “frontend” Joomla 1.5 une fois le répertoire d’installation supprimé.
L’écran de “backend” Joomla 1.5 une fois le répertoire d’installation supprimé.
C’est terminé, vous venez d’installer la version suivante de Joomla :
Version de Joomla!: Joomla! 1.5.10 Production/Stable [ Wohmamni ] 27-March-2009 23:00 GMT
Pour aller plus loin
CMS, Joomla, MySQL, PHP, plugin, site, web
6 mai 2009 dans CMS, Divers, PHP, MYSQL, Tutoriaux, Wordpress par Bruno Flaven
Le spam de commentaires sur les blog wordpress devient vite une tannée. Il faut chaque jour, faire le nettoyage des commentaires en séparant le bon grain de l’ivraie au risque de se tromper et d’effacer un commentaire valable. Bien évidemment le problème est connu depuis fort longtemps et la communauté de développeurs de plugin Wordpress s’est attelé à la tâche. De nombreux plugins peuvent vous aider dans ce travail ingrat en empêchant notamment les robots de Spam d’accomplir leurs basses besognes.
Notre idéal du plugin anti-spam
Notre pre-requis pour cette sélection est de ne pas avoir à insérer une “Captcha” (vous savez les lettres écrites de traviole qu’on ne peut jamais lire surtout lorsqu’on fait parti de l’espèce humaine…), méthode efficace mais quelque peu rébarbatif en terme d’expérience utilisateur.
L’idéal, c’est feu le plugin Spam Karma, je dis feu car il n’est plus mis à jour par son concepteur pourtant sa devise est parfaite pour ce que l’on est en droit d’attendre d’un plugin. Je vous livre cette extrait en anglais dans le texte pour appuyer la démonstration :
It is meant to stop all forms of automated Blog spam effortlessly, while remaining as unobtrusive as possible to regular commenters
Spam-Karma
.
En clair, transparent, sans effort et efficient, toutes les qualités que l’on peut attendre d’un plugin. Malheureusement, il n’est plu et c’est fort dommage ! Ce plugin permettait d’atteindre le nirvana du modérateur et de passer pour un “Spam Killer Swâmi”
Notre panier de plugins
Comme on l’explique plus haut il nous a fallu faire un choix. Les critères de ce choix sont simples :
- Le plugin n’impose pas de Captcha
- Le plugin répond au triptyque idéal du plugin WP : transparent, sans effort et efficient
- Le plugin est GRATUIT*
* on entend la gratuité dans une acceptation assez large dans la mesure où vous êtes parfois obligé(e) de vous enregistrer pour obtenir un clé d’activation API pour le plugin. Toutefois, dans tous les cas, l’inscription doit rester gratuite.
Nous en avons retenu 4 que l’on vous présente par ordre de préférence.
1. Antispam Bee
Notre choix en définitif car il est simple, efficace. Un plugin très rapide et qui ne nécessite pas de connexion avec la base de données de votre blog.
http://wordpress.org/etend/plugins/antispam-bee/
2. WP-SpamFree Anti-Spam
Notre deuxième choix car ce plugin se révèle plus complexe à configurer néanmoins il est très efficace. Son auteur liste en 13 points quelques-uns de ses avantages : le plugin agit en quasi-automatique; le plugin n’introduit pas de CAPTCHA; le plugin offre une protection contre le spam sur les pingbacks et les trackbacks; le plugin marche avec WordPress MU…
http://wordpress.org/extend/plugins/wp-spamfree/
http://www.hybrid6.com/webgeek/plugins/wp-spamfree
3. SpamTask
Bien noté parmi les plugins, il présente ce qui peut-être un inconvénient pour certain(e)s, on doit s’enregister sur un site. Vous devez obtenir une “API key” pour activer complètement le plugin. Rien d’exceptionnel à cela, beaucoup de développements de plugins WP procèdent de la sorte à commencer par le célébrissime plugin “askimet” qui s’active ainsi.
http://wordpress.org/extend/plugins/spamtask/
4. Raven’s Antispam
Extrêmement simple d’utilisation mais ce plugin n’est pas en mesure de filtrer le spam sur les trackbacks, ce qui peut présenter un inconvénient
http://wordpress.org/extend/plugins/ravens-antispam/
Pour aller plus loin
anti-spam, commentaires, plugin, spam, Wordpress
5 mai 2009 dans Divers, Flash, Actionscript, Flex, Flex, PHP, MYSQL par Bruno Flaven
On va voir comment installer et créer un service avec AMFPHP puis le mettre à disposition d’une application Flex, le dernier logiciel d’Adobe. Ce logiciel a été évoqué dans un article précédent concernant twitter via l’application TweetDeck, développé sous Flex. Cf. Sélectionner les meilleurs « twitts » sans se fatiguer.
En premier lieu, une rapide présentation rapide de AMFPHP en anglais .
AMFPHP
“AMFPHP is a free open-source PHP implementation of the Action Message Format (AMF). AMF allows for binary serialization of Action Script (AS2, AS3) native types and objects to be sent to server side services. AMFPHP is challenged with implementing the entire AMF protocol to be an alternative to Flex Data Services (AMF3) and Flash Remoting (AMF0).” Une très abondante documentation existe sur le site officiel : amfphp.org. En résumé, AMFPHP “serialize” des données et permet de les envoyer à Flash ou à Flex.
FLEX
Flex permet de créer des interfaces utilisateur enrichies avec un maximum de souplesse notamment en terme d’affichage puisqu’il existe énormément de “Components” prêts à l’emploi. Ces composants peuvent graphiquement être personnalisés à l’aide de “skins” faites en Flash. Une “skin” flex est tout simplement d’un assortiment de boutons en swf et d’une feuille de style CSS.
Pour votre application, vous pouvez accéder à deux vues en parallèle, la source MXML de votre projet dénommé “Source” ou un écran WYSIWYG appelé “Design” qui vous permettra de positionner et de paramétrer vos différents “components”. Une précision, si l’application créée sous Flex est vraiment aboutie, on parle de Rich Internet Applications (RIA), c’est le terme consacré. Ce n’est pas le cas de l’application de notre exemple !
L’espace de travail FLEX
Faire fonctionner FLEX & AMFPHP ensemble
L’outil d’administration de AMFPHP est lui même construit avec Flex, cet outil en Flex vous permet de tester la validité du service que vous venez d’écrire.
Comment mettre en place un service AMFPHP, tout simplement en écrivant une “Class” dans un fichier .php. Eh oui, un service AMFPHP n’est rien d’autre qu’une “Class”. Le fichier .php est ensuite mis à disposition dans le répertoire /amfphp/service/ compris dans l’arborescence de répertoires de AMFPHP. Pour information, les concepteurs de AMFPHP ont intentionnellement laissé un fichier place_services_here.txt pour indiquer où le fichier devait être déposé.
L’arborescence de AMFPHP
On peut distinguer le répertoire service dans lequel on va placer notre “Class” écrit en php.
L’administration de AMFPHP
Pour rentrer directement dans le vif du sujet, voici en détail le code PHP de la “Class” que nous allons écrire pour AMFPHP.
Le code php correspondant au service HeService
<?php
/**
* Class HeService
*/
class HeService {
/**
* La fonction 1 de la Class HeService
* @returns Cette fonction/method permet
* d'afficher "Bienvenue sur
* le site social.hecube.net"
*/
function SocialHecube ()
{
return "Bienvenue sur le site social.hecube.net";
}
}
?>Une règle tout simple doit s’imposer à vous en ce qui concerne la nomenclature du service et du fichier php de ce service. Le nom du fichier php doit être identique au nom de la classe contenu dans ce fichier. Ainsi dans notre exemple le fichier se nomme HeService.php, la “Class” se nomme HeService
1. Créer un nouveau projet sous Flex
Il faut sélectionner “Flex Project”
2. Un projet nommé HeService
Vous pouvez conserver les sélections cochées ou rempies par défaut pour la localisation des fichiers, le nature du projet… Néanmoins, il vous faut choisir PHP pour la valeur Application server type
3. La configuration du PHP Server
Nous allons publier sous MAMP. Il faut donc indiquer configurer le PHP Server avec des informations valides. Il faut indiquer le répertoire racine /Applications/MAMP/htdocs et l’adresse par défaut http://127.0.0.1 ou http://locahost ainsi que le répertoire de publication de votre choix dans le répertoire racine, par défaut FLEX vous propose le nom du service suivi du suffixe -debug, ce qui donne pour notre exemple /Applications/MAMP/htdocs/HeService-debug
4. La vue du projet HeService
Par défaut, FLEX s’ouvre sur le fichier principal de l’application HeService. Toute votre application est contenue dans le HeService.mxml
Au début de la création du projet, il est totalement vide. Ce fichier ne contient que l’en-tête et les balises d’ouverture et de fermeture de l’application <mx:Application ...> et </mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<!-- Le code de l'application HeService va venir ici -->
</mx:Application>
HeService.mxml vu dans FLEX
En détail, la vue “source” de HeService.mxml dans FLEX
En détail, la vue “design” de HeService.mxml dans FLEX
A cette étape, si vous exportez votre application, rien ne va se passer et vous obtiendrez la page bleue des applications Flex…
5. Le fichier de configuration du service HeService
Ce fichier de configuration est indispensable au bon fonctionnement de l’application HeService. Il va indiquer à l’application FLEX de s’adresser à AMFPHP pour obtenir les données à afficher. L’élément unique à changer, c’est le chemin vers le fichier gateway.php de AMFPHP. Si vous avez fait une installation en local avec MAMP ou sur Easyphp, l’adresse de votre fichier gateway.php sera sans doute de la forme suivante : http://127.0.0.1/amfphp/gateway.php ou http://localhost/amfphp/gateway.php.
Les propriétés du Flex Compiler incomplet
C’est à cet endroit que va être défini l’accès au fichier de config -services config.xml
Les propriétés du Flex Compiler complet
La source du fichier config.xml avec une adresse de gateway correcte
Il ne vous reste plus qu’à faire un copier-coller de cette adresse dans le fichier config.xml dans la balise <endpoint uri="http://127.0.0.1/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint" />
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="amfphp-flashremoting-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="amfphp">
<channels>
<channel ref="my-amfphp"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="my-amfphp"
class="mx.messaging.channels.AMFChannel" >
<endpoint uri="http://127.0.0.1/amfphp/gateway.php"
class="flex.messaging.endpoints.AMFEndpoint" />
</channel-definition>
</channels>
</services-config>
Si vous souhaitez installer un environnement PHP-MySQL sur MAC ou sur PC, reportez-vous à l’un ou à l’autre de ces articles.
Le fichier MXML complet de l’application HeService
Avec le fichier de configuration, ce fichier constitue l’épine dorsale de l’application. Ce fichier détaille non seulement l’interface mais aussi les différentes opérations ou actions susceptibles d’être effectuées par l’application FLEX.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();"
layout="horizontal"
horizontalAlign="center"
cornerRadius="0"
borderColor="#EEEEEE" borderStyle="solid"
backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FF0000, #FF0000]">
<mx:RemoteObject
id="amfphp"
source="Hecube.HeService"
destination="amfphp">
<mx:method name="SocialHecube" result="onConnect (event);" />
</mx:RemoteObject>
<mx:Script>
<![CDATA[
// ActionScript file
import mx.controls.*;
import mx.rpc.events.*;
import mx.utils.ArrayUtil;
private function init ():void {
amfphp.SocialHecube.send();
}
private function onConnect (e:ResultEvent):void {
slogan.text = String (e.result);
}
]]>
</mx:Script>
<mx:TextArea id="slogan" width="621"
height="84" fontSize="29" fontFamily="Arial"
color="#FF0000" cornerRadius="10"/>
</mx:Application>L’application HeService en local…
Une bonne vidéo d’introduction à la programation dans Flex
Pour aller plus loin
actionscript, Amphp, Flex, mxml, xml
4 mai 2009 dans Divers, Google, Référencement, SEO, Tutoriaux par Bruno Flaven
Si vous possédez déjà un nom de domaine, il ne vous reste plus qu’à vous rendre sur la page des “Google Apps”. Sur cette page, vous allez pouvoir enregistrer votre nom de domaine et de fait profiter des différentes applications proposées par Google notamment comme la création et la gestion de comptes email sur ce nom de domaine.
Via une adresse web http://partnerpage.google.com/hecube.net, vous accéderez à vos applications et au compte titulaire de gestion du domaine.
Dans notre exemple, on part du principe que vous avez déjà acheté un nom de domaine. On se servira pour des raisons de commodité de notre domaine principale hecube.net
Créer son compte sur Google Apps
Une fois que vous possédez un nom de domaine, il vous faut l’enregistrer auprès de Google pour en déléguer la gestion en 7 étapes environ.
1. Enregistrer son nom de domaine auprès de Google
2. Les informations d’inscription
3. Les coordonnées du compte administrateur
C’est par ce compte que vous accéderez à la gestion de votre domaine sur Google et des applications.
4. Le tableau de bord de gestion
Vous devez attester auprès de Google que vous êtes bien le/la propriétaire de ce nom de domaine. C’est que vous signale la phrase en dessous des onglets de navigation.
"Pour activer les services Google Apps, vous devez confirmer que vous êtes bien le propriétaire de ce domaine..."
5. Le choix de la méthode de confirmation
Pour confirmer la propriété du nom de domaine, on sélectionne la méthode la plus simple. Elle consiste à envoyer en FTP, un fichier sur votre espace d’hébergement qui contiendra des données que Google vous aura fourni.
6. Le fichier de confirmation
C’est en quelque sorte votre titre de propriété. Ce fichier se nomme toujours googlehostedservice.html, il contient un code unique d’une vingtaine de caractères googlea6999932666d8a3b à placer dans le fichier. Il est à placer à la racine de votre espace d’hébergement
Le code du fichier googlehostedservice.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>googlehostedservice</title>
<meta name="generator" content="Hecube.net">
<meta name="author" content="Bruno Flaven">
</head>
<body>
googlea6999932666d8a3b
</body>
</html>
7. La mise à disposition du fichier googlehostedservice.html et la validation
Dans notre exemple, une fois le fichier googlehostedservice.html accessible via un navigateur l’adresse suivante http://hecube.net/googlehostedservice.html.
Il vous reste alors à valider, votre nom de domaine sera dès lors géré par Google, vous pourrez alors profiter des applications Google, personnaliser votre page d’accès aux services….etc
Pour aller plus loin
application, apps, Google, nom de domaine
25 avril 2009 dans Divers, Google, Marketing Web, Tutoriaux par Bruno Flaven
On a vu comment dans un article précèdent, on gère l’apparence d’un “Ensemble AdSense” pour les faire correspondre autant que possible à la charte graphique de son site. Il aurait peut-être été plus judicieux de commencer par le commencement à savoir comment créer et gérer ces groupes d’annonces et les publicités, c’est la finalité de cette article. Pour reprendre la terminologie exacte de Google Adsense, on va voir comment créer et gérer ce que Google Adsense nomme des “Annonces illustrées” et des “Annonces textuelles”.
Pour savoir comment changer l’apparence des Annonces, se reporter à l’article suivant :
On va se lancer dans la création d’un ensemble “annonces textuelles”, le deuxième exemple sera consacré à la création d’un ensemble “annonces illustrées”. Cet ensemble va se nommer HEADER TEXTE 728x90, il s’agit d’une bannière horizontale d’annonces textuels de la taille standard la plus grande du marché publicitaire..
A la création de votre compte, il n’y a dans aucun ensemble d’annonces à gérer.
L’ensemble 728x90 apparaîtra ci-dessous au terme de la procédure de création de l’ensemble d’annonces.
la création d’un ensemble “Annonces textuelles”
1. Se lancer dans la création d’un ensemble d’ “Annonces illustrées” ou d’ “Annonces textuelles”
Une fois dans votre compte Google Adsense, il vous suffit de cliquer sur le lien AdSense pour les pages de contenu pour accéder à la création des “Annonces illustrées” et des “Annonces textuelles”.
2. Sélectionner son “Ensemble d’annonces”, on choisit de créer un ensemble d’Annonces textuelles uniquement
3. Choix du format de l’annonce
Les formats se répartissent en 3 types et à chaque type correspond un certain nombre de tailles.
- Format Horizontal
- Leaderboard 728 x 90
- Bannière 468 x 60
- Demi-bannière de 234 X 60
- Format Vertical
- Skyscraper 120 x 600
- Skycraper large 160 x 600
- Bannière verticale 120 x 240
- Format Carré
- Grand rectangle 336 x 280
- Rectangle moyen 300 x 250
- Carré 250 x 250
- Petit carré 200 x 200
- Petit rectangle 180 x 150
- Bouton 125 x 125
4. Choix des Couleurs ou de la palette
C’est à cet endroit que l’on définit la palette. Dans notre exemple, on va sélectionner une palette créée préalablement nommée hecube.
5. Insérer des critères
Ce champ est laissé vide dans notre exemple.
6. Le nom de l’ensemble
Vous venez de créer un ensemble.
7. Obtenir le code javascript pour l’affichage
Il vous est possible de prévisualiser le résultat avant une insertion définitive.
La création d’un ensemble “Annonces illustrées”
On a choisi de créer l’ensemble suivant HEADER IMAGE 120x600 qui ets du format Vertical, Skyscraper 120 x 600.
L’écran de sélection
Les étapes sont en tout point identiques à la création des annonces textuelles
La gestion des ensembles d’annonces
Les exemples de code
Le code javascript correspondant à 728x90 avec la palette hecube
<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
/* 728x90, date de création 24/04/09 */
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
Le code javascript correspondant à 120x600 avec la palette hecube
<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
/* 120x600, date de création 24/04/09 */
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
Pour aller plus loin
Adsense, annonces, audience, Google, publicités, trafic
24 avril 2009 dans Divers, Ecommerce, Google, Marketing Web, XHTML CSS par Bruno Flaven
Il existe un moyen assez simple et pratique de gérer l’apparence de vos annonces textuels via votre compte Google Adsense. Une fois que vous êtes titulaire d’un compte Adsense. Vous devez vous rendre sur votre compte dans l’espace accessible via Configuration AdSense > Palettes de couleurs
Dans votre compte, vous allez accéder aux options de la palette afin d’effectuer les opérations suivantes.
Personnaliser graphiquement vos annonces & publicités avec la palette de Adsense
Le chemin vers la palette
Ma palette de couleurs
La palette qui se charge par défaut est Plein air, So refreshing !
La palette par défaut
Modifier la palette de couleurs
Vous pouvez modifier directement cette palette en plaçant votre souris sur chacune des rectangles correspondants aux éléments : Bordure, Titre…etc. Dans notre exemple, nous modifiions la couleur du Titre. Si vous connaissez le code hexadécimal des couleurs que vous souhaitez pour votre palette, vous pouvez les insérer directement. A l’instar des valeurs ci-dessous, faites un copier-coller seulement des 6 chiffres et non du signe #.
La sélection des couleurs
Enregistrer votre nouvelle palette de couleurs
Dans notre exemple, notre palette se nomme SocialHecube et se compose des couleurs suivantes :
- Bordure #
CC0000
- Titre #
CC0000
- Arrière-plan #
FFFFFF
- Texte #
666666
- URL #
660000
La nouvelle palette SocialHecube
Mise à disposition de la nouvelle palette de couleurs SocialHecube
Vous allez pouvoir affecter à un groupe d’annonces textuelles votre nouvelle palette, google nomme cela un “Ensemble AdSense”. Dès lors, automatiquement, sans avoir à changer le javascript inséré dans vos pages, l’apparence de vos annonces textuels pour cette “Ensemble AdSense” sera modifié.
Un avantage, vous évitez des changements en dur dans le code de votre javascript et opter pour une gestion plus souple et externalisée de l’apparence des publicités Google.
Changer de palette mais pas de code
Ci-dessous, les codes AdSense pour un même “Ensemble AdSense” d’annonces textuels de 728×90 mais sur deux palettes différentes.
L’Ensemble AdSense d’annonces textuels de 728×90 sous la Palette Hecube
Le code javascript correspondant à cet ensemble avec la Palette Hecube
<!-- google adsense -->
<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
/* 728x90 */
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
L’Ensemble AdSense d’annonces textuels de 728×90 sous la Palette SocialHecube
Le code javascript correspondant à cet ensemble avec la Palette SocialHecube
<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
/* 728x90 */
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
Pour aller plus loin
Adsense, annonces, Google, Google AdSense, palette, publicités, Webdesign
23 avril 2009 dans Divers, Image, Graphisme, Photoshop, Tutoriaux par Bruno Flaven
Voilà un excellent logiciel open source qui a enfin été pensé et conçu tant dans sa distribution et son adoption pour le plus grand nombre. Le site Imagemagick assure la distribution de versions compilés pour les deux plate-formes : Mac et Windows.
Le point de vue de cette article est de montrer que si vous êtes familier de Photoshop et de ces traitements par lots ou de l’élaboration pénible de droplet alors Imagemagick se montrera 100 fois plus docile et performant. Certes, la sophistication du logiciel n’atteint pas celle d’un Photoshop. Toutefois, une fois passé le caractère un peu rebutant de la ligne de commande, Imagemagick fait des choses différentes et les accomplie sans trop se poser de questions.
La chose à connaître lors de l’installation sous windows
Une fois téléchargée l’application ImageMagick, il vous reste à bien cocher la case “Update executable serach path”. Si vous ne le faites pas, vous pouvez toujours la faire rétroactivement en vous référant à l’article suivant :
Modifier la variable Path sous windows afin d’exécuter des commandes en MS-DOS
L’installation sous windows
Voici le lien de téléchargement pour le fichier pour Windows
ImageMagick-6.5.1-5-Q16-windows-dll.exe Windows Binary Release.
C’est un installation classique, la seule chose qu’il ne faille pas laisser passer, c’est l’un des tous derniers écrans où il faudra cocher (rassurez-vous il est coché par défaut)
démarrage de l’installation sous windows
L’écran à ne pas rater
La mention “Update executable search path” à cocher
Quelques exemples de lignes de commande Imagemagick sous windows
Voici quelques exemples illustrées sur le fonctionnement de Imagemagick sous windows. Pour des raisons de commodité, je vous recommande de ne mettre d’accents ou d’espace dans le nom de vos fichiers images. Dans nos exemples de commande, les photos se nomment comme suit :
- Chemin des images à la source
C:\image\source\
- Chemin des images en destination
C:\image\destination\
- Chemin de l’image qui sert au watermark
C:\image\watermark\
Commande 1 - réduire l’image à 50% en conservant sa qualité
convert C:\image\source\photo_source.jpg -quality 100 -resize 50% -interlace plane C:\image\destination\photo_resize_50.jpg
photo_source.jpg
photo_resize_50.jpg
Commande 2 - mettre un watermark à 90% au centre de l’image
composite -watermark 95% -gravity center C:4_copy\img\watermark\logo_hecube_watermark.png C:\image\source\photo_source.jpg C:\image\destination\photo_source_w.jpg
photo_source.jpg
logo_hecube_watermark.png
photo_source_w.jpg
Pour aller plus loin
droplet, imagemagick, images, photos, photoshop, traitement, Windows
18 avril 2009 dans Non classé par Bruno Flaven
Vous pouvez installer des versions pré-compilés pour Windows. En effet, cela vous évitera des installations fastidieuses et hasardeuses genre “make install” qui finit dans la nature….
Le seul véritable enjeu de la chose est d’autoriser sous la console MSDOS à exécuter des lignes de commande, cela permettra de s’initier rapidement et sans effort à la ligne de commande, voir au “batch” de cette ligne de commande pour qu’elle soit exécutée en masse.
Mencoder
Une présentation rapide de MEncoder auquel il est fait référence dans cette article
Télécharger les vidéos Youtube, dailymotion pour en extraire le son, des images ou une vidéo
MEncoder est un outil en ligne de commande qui vous permettra de très nombreuse manipulations de fichiers vidéo. Vous l’obtiendrez dans l’article suivant avec MPlayer qui vos permettra de lire un tres grande variété de formats encodés à l’aide d’un nombre encore plus imsant de codecs
Les indispensables
Pour trouver la version précompilé, pas de stress inutile, faites un tour sur ce site.
http://ffdshow.faireal.net/mirror/mplayer/.
Il y a un assortiment de fichiers, le premier fait l’affaire mplayer2008.02.06.7z, il contient mplayer et mencoder
Pour info, il vous faudra : 7-zip, pour décompresser le fichier
Les logiciels une fois téléchargés
le fameux mplayer2008.02.06.7z et son compère 7-zip pour le décompresser. il ne vous reste plus qu’à décompresser, relaxez-vous tout va bien se passer !
Le “stade” de décompression
Rien de bien extraordinaire à part un clic droit…
Le répertoire tant attendu…
Vous disposez désormais de MEncoder et de MPlayer dans le répertoire mplayer2008.02.06. Il est à noter que en 2029, le répertoire aura sans doute un nom différent.
Le contenu du répertoire
Faciliter la prise en main de MEncoder
Une fois l’installation faite de Mencoder, comme ci-dessus, il ne vous reste qu’à faire le changement de chemin dans la variable d’environnement path pour lancer l’application en ligne de commande. c’est à dire associer MEncoder à un chemin sous windows, pour cela il faut se reporter à cette article Modifier la variable Path sous windows afin d’executer des commandes en MS-DOS
Le chemin sous Windows doit être le suivant si vous installez l’application téléchargée plus haut dans un répertoire nommé C:\MPLAYER_MENCODER.
%systemroot%system32;%systemroot%;%systemroot%system32wbem;c:\imagemagick-6.4.3-q16;C:\FFMPEG;C:\MPLAYER_MENCODER
Quelques commandes Mencoder
Un assortiment de commandes pour comprendre l’encodage avec mencoder. Ces commandes sont tirées de la “bible” de mplayer -mencoder, disponible à l’adresse suivante : http://www.mplayerhq.hu/DOCS/HTML/en/encoding-guide.html. Les commandes pour les formats suivants :
- 11.8.5.1. PAL
- 11.8.5.2. NTSC DVD
- 11.8.5.3. PAL AVI Containing AC-3 Audio to DVD
- 11.8.5.4. NTSC AVI Containing AC-3 Audio to DVD
- 11.8.5.5. PAL SVCD
- 11.8.5.6. NTSC SVCD
- 11.8.5.7. PAL VCD
- 11.8.5.8. NTSC VCD
PAL DVD
Le format standard PAL DVD de 720×576, qualité dvd format=dvd:tsaf. Vous aurez ensuite un fichier très utile pour avoir un fichier pivot ensuite facilement manipulable.
Windows
mencoder -oac lavc -ovc lavc -of mpeg -mpegopts format=dvd:tsaf
-vf scale=720:576,harddup -srate 48000 -af lavcresample=48000 -lavcopts
vcodec=mpeg2video:vrc_buf_size=1835:vrc_maxrate=9800:vbitrate=5000:
keyint=15:vstrict=0:acodec=ac3:abitrate=192:aspect=16/9 -ofps 25 -o
C:\2_movie_source\destination\mon_film_du_moment_destination.mpg
C:\2_movie_source\source\mon_film_du_moment_source.avi
Mac
mencoder -oac lavc -ovc lavc -of mpeg -mpegopts format=dvd:tsaf
-vf scale=720:576,harddup-srate 48000 -af lavcresample=48000 -lavcopts
vcodec=mpeg2video:vrc_buf_size=1835:vrc_maxrate=9800:vbitrate=5000:
keyint=15:vstrict=0:acodec=ac3:abitrate=192:aspect=16/9 -ofps 25 -o
/Users/monomdutilisateur/destination/mon_film_du_moment_destination.mpg
/Users/monomdutilisateur/source/mon_film_du_moment_source.avi
PAL VCD
Le format standard PAL VCD au format de 320×240, une qualité pour un CD avec le format format=xvcd. C’est assez léger, vous pouvez donc stocker de nombreux petits extraits sur un même CD. C’est pratique mais la qualité laisse un peu à désirer.
Windows
mencoder -oac lavc -ovc lavc -of mpeg -mpegopts format=xvcd -vf
scale=320:240,harddup -srate 44100 -af lavcresample=44100 -lavcopts
vcodec=mpeg1video:keyint=15:vrc_buf_size=327:vrc_minrate=1152:vbitrate=1152:
vrc_maxrate=1152:acodec=mp2:abitrate=224:aspect=16/9 -ofps 25 -o
C:\2_movie_source\destination\mon_film_du_moment_destination.mpg
C:\2_movie_source\source\mon_film_du_moment_source.avi
Mac
mencoder -oac lavc -ovc lavc -of mpeg -mpegopts format=xvcd -vf
scale=320:240,harddup -srate 44100 -af lavcresample=44100 -lavcopts
vcodec=mpeg1video:keyint=15:vrc_buf_size=327:vrc_minrate=1152:vbitrate=1152:
vrc_maxrate=1152:acodec=mp2:abitrate=224:aspect=16/9 -ofps 25 -o
/Users/monomdutilisateur/destination/mon_film_du_moment_destination.mpg
/Users/monomdutilisateur/source/mon_film_du_moment_source.avi
Pour aller plus loin
DVD, encoder, mencoder, MPlayer, PAL, windows
14 avril 2009 dans Divers, Hébergement, Référencement, SEO, Réseaux sociaux, Tutoriaux par Bruno Flaven
Le fichier robots.txt a comme fonction principale d’autoriser et de faciliter, voir d’interdire l’indexation de votre contenu. Cette indexation est faite par les robot d’indexation (en anglais web crawler ou web spider) des moteur de recherche.
Vous ne pouvez avoir qu’un seul fichier robots.txt sur un site car il est la pierre angulaire d’entrée sur votre site.
Quelques article de ce blog pour une gestion SEO affiné :
Créer un fichier sitemap sur PC
http://social.hecube.net/blog/2009/04/14/creer-un-fichier-sitemap-sur-pc/
Créer sur Mac un sitemap google pour votre site
http://social.hecube.net/blog/2009/04/02/creer-un-sitemap-avance-pour-google/
Créer un sitemap avancé pour Google
http://social.hecube.net/blog/2009/04/02/creer-un-sitemap-avance-pour-google/
Envoyer son sitemap dans les outils du webmaster de Google
http://social.hecube.net/blog/2009/04/03/envoyer-son-sitemap-sur-dans-les-outils-du-webmaster-de-google/
Le chemin vers le sitemap
On a vu de nombreux articles sur comment créer des sitemaps ou un index de sitemaps. Il est une information importante qui peut être contenu dans le fichier robots.txt, c’est le chemin vers le sitemap. Placer cette information dans le robots.txt uniformise la gestion et l’accès pour tous les robots d’indexation accédant à votre site. Il est bien évidemment possible d’ajouter plusieurs fichiers de sitemap si vous ne faites pas appel à un index de sitemap.
Gérer via robots.txt des sitemaps et le “Cross submit” dans le cas d’un réseau social
L’exemple ci-dessous montre comment vous pouvez faciliter le référencement de différents blogs hébergés par une même solution comme l’est notre plate-forme de réseau social sous buddypress. Le but ultime étant d’accroître votre notoriété digitale avec de multiples entrées.
Imaginons que vous avez 3 sous-domaines spécifiques correspondant à 3 “hosts” différents.
- bruno.hecube.net avec le fichier de sitemap suivant
sitemap_blog_bruno.xml
- etienne.hecube.net avec le fichier de sitemap suivant
sitemap_blog_etienne.xml
- annie.hecube.net avec le fichier de sitemap suivant
sitemap_blog_annie.xml
Chaque sous-domaine possède un sitemap unique. Vous pouvez gérer l’ensemble de ces sitemaps sur un même nom de domaine, par exemple social.hecube.net. Vous devrez alors pour le premier sous-domaine par exemple bruno.hecube.net, vous pouvez modifier le fichier robots.txt de ce site bruno.hecube.net en lui indiquant la présence d’un sitemap sur un autre nom de domaine disons social.hecube.net par exemple Sitemap: http://social.hecube.net/sitemap_blog_bruno.xml
Un modèle de robots.txt pour un site sous Wordpress
#déclaration faite pour l'ensemble des agents de moteur: msn, google, yahoo...etc
User-agent: *
Disallow: /cgi-bin
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content
Disallow: /search/*/feed
Disallow: /search/*/feed/
# A noter, l'étoile après le slash n'est pas obligatoire mais il figure dans de nombreux exemples.
# Cela signifie que tous les fichiers du répertoire seront pris en compte.
# autoriser le robot à visiter le site en entier pour le compte de AdSense
User-agent: Mediapartners-Google
Disallow:
Allow: /*
# autoriser le robot à visiter le site en entier pour le compte de AdWords
User-agent: Adsbot-Google
Allow: /*
# autoriser le robot google image à indexer les images
User-agent: Googlebot-Image
Allow: /*
# Internet Archiver Wayback Machine - pas de retour dans le passé - c'est un choix
User-agent: ia_archiver
Disallow: /
# digg mirror - éviter un miroir de votre site
User-agent: duggmirror
Disallow: /
# IMPORTANT le chemin vers le fichier de sitemap
Sitemap: http://social.hecube.net/sitemap.xml
Pour aller plus loin
Un très bon site sur le meilleur moyen de référencer un site fait sous Wordpress
Un petit site référent en matière de robots.txt (en anglais)
Un site exhaustif sur la philosophie des sitemap, index ou autre.
Une ressource excellente sur le référencement.
moteur, Référencement, robots, SEO, sitemap, Wordpress, xml
14 avril 2009 dans Divers, Google, Hébergement, Référencement, SEO, Tutoriaux par Bruno Flaven
Sur ce blog, le sujet du sitemap de sa création à son utilisation a été abordé plusieurs fois. Le sitemap est en effet un des leviers important dans l’optimisation du référencement pour un grand nombre de moteur de recherche: MSN, Yahoo et bien évidemment Google. En effet, nul besoin de publier un sitemap différent selon les moteurs, les "crawlers" de ces derniers sont en mesure de "gober" la même information au même format à savoir du XML comme indiqué ci-dessous dans l’échantillon.
Il nous restait à sélectionner sur Windows un logiciel, gratuit de préférence, susceptible de faire le boulot.
Pour mémoire, quelques uns de ces articles :
Les critéres de choix du logiciel
Ces logiciels existent en nombre, nous en avons néanmoins sélectionné un qui nous a semblé performant et simple à l’usage, il se nomme SiteMap Generator.
L’écran “Google Sitemap / XML” de SiteMap Generator
Les raisons en sont simples : Il est gratuit; Il remplit bien la fonction basique qui lui est demandé c’est à dire générer un sitemap sans être bridé dans le nombre d’url entrés; Il possède aussi quelques autres fonctionnalités supplémentaires intéressantes, ce qui ne gâte rien. En vrac, le logiciel offre les fonctionnalités suivantes :
- HTML Map, cette fonctionnalité génère un fichier HTML avec tous les liens de votre site.
- CSV, cette fonctionnalité génère un fichier csv de l’ensemble des pages de votre site.
- Failed URL, cette fonctionnalité génère une liste des adresses incorrectes figurant sur votre site.
- Outbounds Links, cette fonctionnalité génère liste des liens sortants depuis votre site.
- Robots.txt, cette fonctionnalité vous permet d’afficher le fichier robots.txt de votre site si il existe.’
L’écran principal de SiteMap Generator
Un désavantage de taille toutefois, le logiciel traque bien toutes les URLs mais ne complètent pas totalement tous les nœuds xml inclut dans le noeud <url> </url>. Il manque en effet <lastmod> </lastmod>, <changefreq> </changefreq>, <priority> </priority>. A sa décharge, ces nœuds sont optionnels, seul <loc> </loc> est obligatoire.
Un petit tour rapide des nœuds XML inclus dans <url> </url>
<loc>http://social.hecube.net/</loc>
Ce nœud est obligatoire. Il s’agit de l’URL de la page. Elle commence toujours par http et se termine par un slash si le serveur web le nécessite. Elle ne peut contenir plus de 2048 caractères.
<lastmod>2009-04-11</lastmod>
Ce nœud est optionnel. La dernière date de modification du fichier sitemap. Le format de la date est écrit à l’anglo-saxonne YYYY-MM-DD.
<changefreq>hourly</changefreq>
Ce nœud est optionnel. C’est une information d’ordre général concernant la fréquence de changement de la page.
Les valeurs sont les suivantes :
- always
- hourly
- daily
- weekly
- monthly
- yearly
- never
La valeur "always" est utilisé pour une page qui est changé dès que 'on y accède. Inversement "never" est utilisée pour indiquer que les pages sont archivées.
Pour plus d’explication, voici celles données en anglais par “gros G” sur la définition des nœuds.
https://www.google.com/webmasters/tools/docs/en/protocol.html#xmlTagDefinitions
Un échantillon dument complète du fichier sitemap en xml
Rien ne vous interdit de faire figurer des commentaires au sein du fichier pour insérer des explications et rendre le fichier plus lisible par un être humain cette fois-ci et non un crawler :):)
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>http://social.hecube.net/</loc>
<lastmod>2009-04-11</lastmod>
<changefreq>hourly</changefreq>
<priority>1.0</priority>
</url>
<!-- la page d'accueil du blog change tous les jours enfin on essaye -->
<url>
<loc>http://social.hecube.net/blog</loc>
<lastmod>2009-04-11</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>http://social.hecube.net/groups</loc>
<lastmod>2009-04-11</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>http://social.hecube.net/about/</loc>
<lastmod>2009-04-11</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<!-- to be continued... à suivre -->
Pour aller plus loin
Tout ce que vous voulez savoir sur les Sitemaps sans jamais…etc.
Le site officiel de SiteMap Generator, il faut se rendre dans la secion de download. Le logiciel est gratuit.
Google, outils du webmaster, Référencement, SEO, sitemap, xml
10 avril 2009 dans Divers par Bruno Flaven
Un problème simple, une solution simple
Le cas est simple, il vous est peut-être arrivé de devoir trouver des photos, des extraits vidéos, une musique, un discours, un extrait sonore pour illustrer votre propre production digitale.
La question qui se pose alors clairement, selon votre ancienneté*, c’est vais-je acheter ce morceau, le télécharger en “pear to pear” au risque de trouver tout à fait autre chose.
Le plus simple est d’aller sur ce gigantesque librairies que sont devenus les youtube, dailymotion…etc. Je vais vous montrer simplement comment procéder à l’extraction depuis la vidéo youtube de la bande-son dans un fichier mp3 distinct ou d’un certain nombre d’images. C’est totalement illégal et en infraction avec le droit d’auteur.
Une précision tout de même Si vous cherchez du son THX ou de l’image 35 mm, passez votre chemin, il vous faut recourir à des “rips” plus sophistiqués de “fric-frac” numérique.
* selon votre âge, vous avez pu entendre parler de droit d’auteur, de droit moral attaché à une oeuvre bref de ce qui fait d’une personne, l’auteur d’une oeuvre c’est à dire dépositaire de droits inaliénables. Pour éviter, toute controverse, c’est pour cette raison entre autre que le choix c’est porté sur le discours de Obama, qui relève plutôt du droit d’information donc moins sujet au droit d’auteur, à ce qu’il me semble. je vous invite à découvrir quelques articles sur le sujet intarissable en France sur le droit d’auteur et Internet.
La marche à suivre
Lancez-vous à la recherche de votre vidéo avec safari
Sur MAC ou sur PC, si vous disposez de safari, naviguez sur les pages youtube à la recherche de la vidéo que vous souhaitez télécharger. Une fois, que vous avez sélectionné votre vidéo, chargez tout simplement la page dans safari, puis faites “Fenêtre > Activité ” ou sur Mac le raccourci est
pomme+alt+a
La page youtube contenant la vidéo de Barack Obama et la fenêtre d’activité sous Safari
En grisé, le lien vers la vidéo, c’est le fichier le plus lourd chargé sur la page comme souvent pour une vidéo. Cette adresse n’est pas pérenne, elle changera sans doute au cours du temps.
Le code html du lien
http://v22.lscache1.googlevideo.com/videoplayback?id=b867d56622b40160&itag=5&sparams=id%2Cexpire%2Cip%2Cipbits%2Citag&ip=92.128.25.43&signature=B6B86109FD305E4A2E8B1D449C668804CBE37944.C058E31DFB7C766309111C0BCD299FD4736E7754&sver=3&expire=1239021520&key=yt1&ipbits=0
Créez une page html capture_video.html contenant le lien direct vers la vidéo
le code du fichier html pour faire votre page capture_video.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="Hecube http://hecube.net/">
<meta name="author" content="Bruno Flaven">
<!-- Date: 2009-04-05 -->
</head>
<body>
<!-- faire un copier-coller le code html du lien ici -->
</body>
</html>
Enregistrez le fichier flv depuis votre page html capture_video.html
Un fois cette page créée et chargé dans un navigateur ici firefox. En vous plaçant sur le lien vous faites un banal “Enregistrer la cible du lien sous…” et vous enregistrez le fichier flv qui se nomme souvent par défaut
video.flv du nom et à l’endroit que vous souhaitez. Une fois le téléchargement terminé, vous êtes en possession du flv de youtube contenant les images et le son. Le plus dur est fait.
Extraire la bande-son du fichier flv
Mac
ffmpeg -i /Users/monomdeuser/lesfilsmyoutube/obama_speech.flv -ab 128
-ar 44100 /Users/monomdeuser/lesfilsmyoutube/obama_speech_only.mp3
Windows
ffmpeg -i C:\monomdeuser\lesfilsmyoutube\obama_speech.flv -ab 128
-ar 44100 C:\monomdeuser\lesfilsmyoutube\obama_speech_only.mp3
Extraire des jpg de la piste vidéo du fichier flv
ffmpeg -i /Users/monomdeuser/lesfilsmyoutube/obama_speech.flv
-an -ss 00:00:05.800 -t 00:00:08.800 -r 1 -y -s 320x240
/Users/monomdeuser/lesfilsmyoutube/obama_speech_%d.jpg
Windows
ffmpeg -i C:\monomdeuser\lesfilsmyoutube\obama_speech.flv
-an -ss 00:00:05.800 -t 00:00:08.800 -r 1 -y -s 320x240
C:\monomdeuser\lesfilsmyoutube\obama_speech_%d.jpg
Ce qui nous donne la série suivante d’images à la taille de 320×240 entre la cinquième et la huitième seconde à quelques centièmes près.
obama_speech_1.jpg
obama_speech_2.jpg
obama_speech_3.jpg
obama_speech_4.jpg
obama_speech_5.jpg
obama_speech_6.jpg
obama_speech_7.jpg
obama_speech_8.jpg
Sortir un extrait audio+vidéo du fichier flv
Pour se faire, nous allons utiliser mencoder, à mon sens plus puissant que ffmpeg pour ce genre d’opération.
Mac
mencoder -oac lavc -ovc lavc -of mpeg -mpegopts format=xvcd -vf scale=320:240,harddup
-srate 44100 -af lavcresample=44100 -lavcopts vcodec=mpeg1video:keyint=15:vrc_buf_size=327:vrc_minrate=1152:vbitrate=1152:vrc_maxrate=1152:acodec=mp2:abitrate=224
-ofps 25 -ss 00:00:05.800 -endpos 00:00:08.800
-o /Users/monomdeuser/lesfilsmyoutube/obama_speech_extract_direct_full.mpg
/Users/monomdeuser/lesfilsmyoutube/obama_speech.flv
Windows
mencoder -oac lavc -ovc lavc -of mpeg -mpegopts format=xvcd -vf scale=320:240,harddup
-srate 44100 -af lavcresample=44100 -lavcopts vcodec=mpeg1video:keyint=15:vrc_buf_size=327:vrc_minrate=1152:vbitrate=1152:vrc_maxrate=1152:acodec=mp2:abitrate=224
-ofps 25 -ss 00:00:05.800 -endpos 00:00:08.800
-o C:\monomdeuser\lesfilsmyoutube\obama_speech_extract_direct_full.mpg
C:\monomdeuser\lesfilsmyoutube\obama_speech.flv
Pour aller plus loin
Quelques articles e ce blog sur l’installation et le fonctionnement de FFMPEG
dailymotion, FFMPEG, mencoder, mp3, Obama, télécharger, Vidéo, youtube
10 avril 2009 dans CMS, Divers, PHP, MYSQL, Tutoriaux, Wordpress par Bruno Flaven
Pourquoi Wordpress pour créer un site ?
Il s’agit de parler rapidement du système le plus courant pour la création et la gestion de blogs et par extension de création de site à savoir Wordpress. Il existe bien sûr son homologue français Dotclear, mais Wordpress nous a semblé en raison de son très haut niveau d’adoption, de la très grande variété de templates disponibles et de l’abondance de plugins, le tout gratuitement être le système de publication à privilégier si vous souhaitez rapidement monter un site.
Pour se familiariser à Wordpress, si vous êtes novice, rien ne vaut une petite prise en main rapide sur une petite plate-forme d’hébergement maison, vous pourrez comme cela évaluer rapidement les bénéfices de cette solution avant de vous lancer dans la création proprement dite de votre site.
Pour installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :
Nous allons donc installer Wordpress en local sur MAMP.
Installer le CMS Wordpress pour gérer son site
Vous devez vous rendre sur le site de Wordpress et télécharger la dernière version de Wordpress. Vous pouvez à loisir choisir la version en langue française ou en langue anglaise au format .zip ou .tar.gz.
Nous avons choisi le Version 2.7 au format zip.
Créer la base de données (BDD) qui va accueillir le site sous Wordpress
On va le faire dans les règles de l’art en créant une base pour Wordpress avec un utilisateur qui lui est attaché. Cela permet de laisser ce bon vieux compte root tranquille. A cet effet, il vous faut définir dès maintenant le nom de la base de données qui va héberger le site sous Wordpress. Dans notre exemple, nous avons choisi wp_install, en cherchant un nom de base relativement explicite wp pour Wordpress et install comme contraction de installation le tout joint par mon signe favori underscore ou tiret bas ( _ ) pour viser les jambes !
Deux façons de procéder à la création de la BDD, l’une un peu plus experte (Méthode 2 dite de la marquise de Merteuil), l’autre plus accessible (Méthode 1 dite de Cécile de Volanges).
Méthode 1. Créer la BDD via phpMyAdmin
Rendez-vous sur http://localhost/phpMyAdmin/ ou http://127.0.0.1/phpMyAdmin/
1.1 La marche à suivre pour créer la base wp_install seulement via phpMyAdmin
A ce stade, vous pouvez déjà passer à la séquence suivante “Famous 5-minute install”. Vous utiliserez alors le compte root, le mot de passe est root pour gérer votre site. C’est acceptable dans un environnement de développement, cela l’est moins dans un environnement de production.
Création de la base wp_install via phpMyAdmin
1.2 La marche à suivre pour créer la base wp_install et l’utilisateur wp_install via phpMyAdmin
Pourquoi créer un utilisateur MySQL et lui associer une base unique, c’est disons un moyen aisé de gérer les utilisateurs MySQL et les BDD auxquels ils ont accès en rappelant du même coup à quelle application ils sont rattachés.
C’est cette base et cet utilisateur MySQL que nous allons utiliser par la suite. Pour des raisons de commodité, le mot de passe, le nom de la base et le mot de passe sont identiques.
Les écrans principaux sous phpMyAdmin
Cliquez sur le lien “Privilèges” pour pouvoir créer un nouvel utilisateur.
Cliquez sur le lien “Ajouter un utilisateur”.
Remplir les champs pour ajouter un utilisateur et créer la BDD.
Les champs sont complétés par les informations suivantes
Database Name= wp_install
Database User name = wp_install
Database Password = wp_install
Database Host = localhost
L’image indique wordpress_instal au lieu de wp_install. Mauvaise capture tout simplement.
Méthode 2. Créer la BDD via la console MySQL
La commande SQL pour se connecter au client MySQL de MAMP. Vous vous connecté(e) comme utilisateur root, le mot de passe est root
/Applications/MAMP/Library/bin/mysql -u root -p
2.1 La commande SQL pour créer la base wp_install seulement
A ce stade, vous pouvez déjà passer à la séquence suivante “Famous 5-minute install”. Vous utiliserez alors le compte root, le mot de passe est root pour gérer votre site. C’est acceptable dans un environnement de développement, cela l’est moins dans un environnement de production.
# Création de la base wp_install
CREATE DATABASE wp_install;
2.2 La commande sql pour créer la base wp_install et l’utilisateur wp_install
Pourquoi créer un utilisateur MySQL et lui associer une base unique, c’est disons un moyen aisé de gérer les utilisateurs MySQL et les BDD auxquels ils ont accès en rappelant du même coup à quelle application ils sont rattachés.
C’est cette base et cet utilisateur MySQL que nous allons utiliser par la suite. Pour des raisons de commodité, le mot de passe, le nom de la base et le mot de passe sont identiques.
# Création simultanée de la base wp_install et l'utilisateur wp_install
CREATE USER 'wp_install'@'localhost' IDENTIFIED BY 'wp_install';GRANT USAGE ON *.*
TO 'wp_install'@'localhost' IDENTIFIED BY 'wp_install'WITH MAX_QUERIES_PER_HOUR 0
MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0;
CREATE DATABASE IF NOT EXISTS wp_install;GRANT ALL PRIVILEGES ON
wp_install.* TO 'wp_install'@'localhost';
Au terme de cette commande, nous aurons donc de quoi compléter les informations demandées lors de l’installation de Wordpress. A savoir les informations suivantes :
Database Name= wp_install
Database User name = wp_install
Database Password = wp_install
Database Host = localhost
Pour supprimer cette BDD et/ou l’utilisateur qui va avec via la console MySQL
Vous pouvez à tout moment recommencer cette séquence en supprimant la BDD que vous venez de créer ainsi que l’utilsateur MySQL.
La commande SQL pour supprimer la base wp_install seulement
# Destruction de la base de données wp_install
DROP DATABASE wp_install;
La commande SQL pour supprimer l’utilisateur wp_install seulement
GRANT ALL PRIVILEGES ON `wp_install`.* TO 'wp_install'@'localhost';
# Destruction de l'utilisateur 'wp_install'@'localhost'
# c'est à dire wp_install attaché à notre BDD wp_install ...
DROP USER 'wp_install'@'localhost';
L’installation proprement dite c’est se lancer dans la séquence “Famous 5-minute install”
Elle ne prend comme son nom l’indique que 5 minutes… Et c’est souvent le cas ! Avant de vous lancer dans cette séquence, conservez à portée de clic les éléments suivants :
Database Name= wp_install
Database User name = wp_install
Database Password = wp_install
Database Host = localhost
Ci-dessous, chacune de étapes de cette fameuse installation, souvent copiée, jamais égalée. Cette installation est un modèle d’écrans “user friendly”. Elle a beaucoup inspirée les démonstrations que l’on a vu fleurir ultérieurement pour démontrer la puissance des frameworks MVC avec “Faire un blog en 20 minutes”, à 15 minutes près bien sûr.
Installation Wordpress - Ecran 1
Installation Wordpress - Ecran 2 - Creation du fichier de configuration
Installation Wordpress - Ecran 3 - les informations de connexion au serveur MySQL
Dans notre exemple, chaque champs sera complété de la manière suivante : Database Name= wp_install
Database User name = wp_install
Database Password = wp_install
Database Host = localhost
Note : Laissez par défaut le champs Table Prefix= wp_ comme il est. C’est un élément qui sera ajoutée devant chaque nom de table dans votre base wp_install. Cf
Installation Wordpress - Ecran 4 - La connexion au serveur MySQL a réussi
Installation Wordpress - Ecran 5 - Le titre du site et le mail de l’admin
Installation Wordpress - Ecran 6 - Obtention du mot de passe admin
C’est fait ! Vous obtenez, le mot de passe pour l’admin. Notez-les bien car ils vous seront nécessaires pour vous connecter à l’admin via http://adresse_de_monsite/repertoire_d'installation_de wodpress/wp-login.php
Dans notre exemple, les données sont les suivantes Username : admin, Password : 92sYZ4SEuBRr
Installation Wordpress - Ecran 7 - La page d’administration connecté comme admin
Installation Wordpress - Ecran 8 - La base de données wp_install et ses tables
Chaque table possède bien le préfixe wp_ devant son nom. Il s’agit de la BDD de votre site vue via phpMyAdmin
le code source du fichier de configuration wp-config.php
Voici le code complétée du fichier wp-config.php du site que nous venons de créer. On y retrouve les principales informations détaillées plus haut.
/**
* The base configurations of the WordPress.
*
* This file has the following configurations: MySQL settings, Table Prefix,
* Secret Keys, WordPress Language, and ABSPATH. You can find more information by
* visiting {@link http://codex.wordpress.org/Editing_wp-config.php Editing
* wp-config.php} Codex page. You can get the MySQL settings from your web host.
*
* This file is used by the wp-config.php creation script during the
* installation. You don't have to use the web site, you can just copy this file
* to "wp-config.php" and fill in the values.
*
* @package WordPress
*/
// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'wp_install');
/** MySQL database username */
define('DB_USER', 'wp_install');
/** MySQL database password */
define('DB_PASSWORD', 'wp_install');
/** MySQL hostname */
define('DB_HOST', 'localhost');
/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');
/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');
/**#@+
* Authentication Unique Keys.
*
* Change these to different unique phrases!
* You can generate these using the
* {@link http://api.wordpress.org/secret-key/1.1/ WordPress.org secret-key service}
*
* @since 2.6.0
*/
define('AUTH_KEY', 'put your unique phrase here');
define('SECURE_AUTH_KEY', 'put your unique phrase here');
define('LOGGED_IN_KEY', 'put your unique phrase here');
define('NONCE_KEY', 'put your unique phrase here');
/**#@-*/
/**
* WordPress Database Table prefix.
*
* You can have multiple installations in one database if you give each a unique
* prefix. Only numbers, letters, and underscores please!
*/
$table_prefix = 'wp_';
/**
* WordPress Localized Language, defaults to English.
*
* Change this to localize WordPress. A corresponding MO file for the chosen
* language must be installed to wp-content/languages. For example, install
* de.mo to wp-content/languages and set WPLANG to 'de' to enable German
* language support.
*/
define ('WPLANG', '');
/* That's all, stop editing! Happy blogging. */
/** WordPress absolute path to the Wordpress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');Pour aller plus loin
Le site officiel de WordPress
Le site officiel de WordPress en France
MySQL, PHP, Wordpress
7 avril 2009 dans CMS, Création de site web, Drupal, Image, Graphisme, Photoshop, PHP, MYSQL, Tutoriaux, Webdesign, XHTML CSS par Bruno Flaven
Pour comprendre en 5 minutes les principes du thème drupal, il vous faudra comprendre quelques notions de CSS dans la philosophie d’un David Shea et localiser les fichiers
Il faut aussi installer Drupal sur un environnement de dév sur PC ou sur Mac ou bien vous pouvez faire votre installation sur votre serveur si vous en possédez un ! Dans cette exemple, nous allons travailler sur un thème disponible dans une version de Drupal 5.14 et non la version 6.
Quelques mots sur Drupal…
Drupal est un CMS extrêmement puissant qui peut faire énormément de choses y compris certaines ou d’autres CMS sont à n’en pas douter plus performants, faire un blog avec Wordpress par exemple. C’est vrai qu’à la lecture « Is Drupal the right tool for the job? » qui dresse un comparatif en fonction des besoins que vous pourriez avoir en tête pour votre futur projet web, l’accent est mis sur la sacro-sainte « scalability « qu’on pourrait traduire spirituellement par évolutivité et souplesse. Cf Voir l’article intitulé « Is Drupal the right tool for the job? » ci-dessous.
Quant au webdesign, c’est vrai que les sites Drupal tirent toujours un peu la même tête comme souvent avec un CMS mais c’est en train de changer. Force est de constater que de nombreux webdesigners, qui s’étaient spécialisés dans les templates Joomla ou Wordpress sont en train de déplacer le curseur de leurs compétences.
C’est la raison pour laquelle, on se devait de publier un article pour survoler rapidement les principes de création d’un thème pour Drupal
J’ai changé le petit pull “bluemarine”
Pour commencer facilement, il vous suffit de copier tout bêtement le répertoire d’un thème ainsi que les fichiers composant le thème “bluemarine” qui nous servira de modèle et j’ai ensuite renommé le répertoire en “mojo”. mojo sera donc le nom de mon thème et il apparaîtra comme tel dans les menus déroulants de sélection de thème.
Pour se livrer sereinement à ce type de contorsion, je vous invite à installer votre propre environnement de développement. Sur « comment installer un environnement de développement sur PC ou Mac « , consultez les articles suivants:
La marche à suivre au compte-goutte*.
Bien souvent, dans un océan de conseils, on oublie l’essentiel lorsque l’on débute. On veut voir des résultats et le plus souvent le plus rapidement possible. Une sorte de version du pauvre d’une preuve de concept ou POC (en anglais : Proof of concept) sinon on abandonne rapidement le CMS pour en choisir un autre.
Listing de fichiers qui composent le template
Ce thème se compose d’un très petit nombre de fichiers, les ingédients principaux sont pour la partie webdesign :
logo.png, c’est le fichier image de votre logo. Il apparait dans le header.
screenshot.png, c’est le fichier image d’illustration de votre template.
style.css, c’est le feuille de style qui détermine le look and feel de votre theme
Il n’existe ensuite que des fichiers php. Ces derniers mentionnent leur qualité de “template” par l’abréviation “tpl” avant l’extension “.php”.
block.tpl.php
box.tpl.php
comment.tpl.php
node.tpl.php
page.tpl.php
L’arborescente complète de drupal via la console
L’arborescente complète de drupal via le finder
L’installation a été faite sous MAMP sur un MAC.
L’arborescente du répertoire themes contenant le repertoire du thème mojo
L’arborescente du thème mojo
La sélection du template mojo pour le backend
La sélection du template mojo pour le frontend
*du hollandais druppel
Is Drupal the right tool for the job?
La réponse diligenté par le site de Drupal lui-même pour savoir si oui ou non votre projet est éligible pour Drupal.
Although Drupal offers a very powerful and flexible framework which is used to build virtually any kind of website, it is not necessarily the best solution for every situation.
There are several cases where Drupal may not be the best choice:
* If your only requirement is to write a personal blog, you may also want to evaluate one of the more specialized blogging platforms like WordPress or one of the hosted blogging solutions. Although Drupal does provide an excellent blogging platform out-of-the-box, you will probably find that blog-specific software typically has a simpler administration interface.
* Similarly, if your only requirement is to create a wiki, you should probably consider using dedicated wiki software like Wikimedia or a hosted wiki solution. You can certainly configure Drupal as a wiki (with the help of several contributed modules), but it may be simpler to use a more specialized solution.
* With every release, Drupal is becoming easier to use; but like most powerful tools, it will always have a learning curve. If you or your organization are not prepared to spend some time learning the basics of how Drupal works (or if you are not able to hire Drupal expertise), it may not be your best option.
Having said that, Drupal is an excellent choice for any of the following situations:
* You need a site that is flexible enough to evolve in any direction. For example, you might start with a blog but want the option of adding other features like a wiki, electronic commerce, forums etc.
* You need a site that can easily be configured to interact with other sites or with other technologies.
* You need a site that can easily handle complex forms and workflows.
* You need the ability to create your own content types. For example, you need to add a custom field to a page.
* You need the ability to quickly organize and display lists of information.
* One or more of the many contributed Drupal modules addresses your needs.
* You need to quickly develop custom functionality.
URL: http://drupal.org/node/346217
La consécration pour Drupal : recovery.gov
L’auteur du projet Drupal n’en perd pas une miette dans un article sans ambigüités « Obama using Drupal « … Il est vrai que voir son CMS adoubé par BO est une consécration en soit. Bien que Ségolène Royal, qui se targue pourtant d’être une des sources d’inspiration de BO, et a choisi elle aussi Drupal pour son site desirsdavenir.org, elle n’a pas eu droit à un article de son créateur .
Indépendamment du fond, la forme y est, le “theme” drupal est déjà une réussite, sérieux, le genre médical qui va soigner le capitalisme mondial.
URL: http://buytaert.net/obama-using-drupal
URL: http://www.recovery.gov/
Pour aller plus loin
Deux bonnes adresses de David Shea pour comprendre les principes d’une CSS.
Trois tutoriaux sur la création de thème sur Drupal.
Drupal, MySQL, PHP, theme
4 avril 2009 dans Non classé par Bruno Flaven
On a vu comment installer rapidement un environnement de développement sur PC à l’aide de Easyphp, “one-click installer” de Apache, PHP, MySQL. Il eut été étonnant de ne pas faire un article identique pour un environnement Mac car bien évidement il existe son équivalent.
Les atouts de MAMP-la-jolie
Le plus simple disponible sur Mac est conçu par une boite allemand nommé Living-e AG qui édite un certain nombre d’applications (WebEdition, pageLogger, timeEdition, dmgCreator) et fait de MAMP son produit d’appel.
Achtung !!! A noter La version gratuite est MAMP (le logo est gris) et non MAMP PRO.
En plus des distributions de Apache, MySQL, PHP, MAMP vient avec quelques librairies supplémentaires notamment comme libcurl ou libgd. Au niveau des base de données en plus du couple MySQL/phpMyAdmin, MAMP vient avec SQLite/SQLiteManager.
Les principaux écrans
La console MAMP
Munissez vous de votre mot de passe habituel, il peut vous être demandé aux démarrage de la console.
La page d’accueil MAMP
Le widget MAMP
Les 24 heures du MAMP
Pour réduire vos heures de découverte, voici quelques-unes des adresses dont vous pourrez avoir besoin pour vous retrouver dans l’application MAMP.
Accès à la page par défaut du serveur local MAMP
http://127.0.0.1/MAMP/
Accès à la page par défaut de phpMyAdmin
http://127.0.0.1/phpMyAdmin/
Accès à la page par défaut de SQLiteManager
http://127.0.0.1/SQLiteManager/
Accès au répertoire de publication visible à l’adresse http://127.0.0.1/
/Applications/MAMP/htdocs
Se connecter au client MySQL de MAMP via la console
Vous pouvez vous connecter au client MySQL via la console Mac. Vous vous connectez en tant que
root et le mot de passe est…
root.
Vous pourrez passer des commandes SQL habituelles comme show databases;, use database-name;
Les éléments de connexion pour le client MySQL de MAMP
- Utilisateur:
root
- Mot de passe:
root
La commande à passer dans votre console une fois MAMP démarré
/Applications/MAMP/Library/bin/mysql -u root -p
Les deux premiers écrans de connexion au client MySQL de MAMP via la console
Pour aller plus loin
Des explications pour installer php-mysql sur PC.
Les bonnes adresses du MAMP.
Mac, MySQL, PHP
4 avril 2009 dans Non classé par Bruno Flaven
Pour faire suite au « pov article » publié précédemment qui n’est en fait que le détournement de l’incontournable article « Hello Wordpress », la théorie entre la ligne de partage de publication entre le blog officiel et mon « glob » s’est affiné. Comme vous pouvez le voir j’ai du temps à perdre à réfléchir à de pareilles futilités !
Effectivement, autant les articles publiés sur le blog officiel, sont utilitaristes, sérieux, aussi pédagogiques qu’une brochure de L’ONISEP, en effet, ils visent à montrer l’ampleur incroyable de nos domaines d’expertise. Comme vous pouvez le voir j’ai de l’ambition à revendre !
Autant les articles publiés sur ce blog seront du moins je l’espère d’une tout autre nature, à savoir laquelle ce sera l’objet d’un post sur twitter….
Toutefois, le dilemme de cette publication est résumé par cette question infiniment générationelle qui pourrait se formuler ainsi « Glob ? Pas Glob ? Mais toujours glob al ! ». A suivre donc.
Blog, glob, Pas Glob
3 avril 2009 dans Divers, Référencement, SEO, Tutoriaux par Bruno Flaven
Une question simple se pose une fois que vous avez compris comment créer un sitemap, il vous faut l’envoyer sur votre compte “Outils du webmaster” mis à disposition par Google.
Accéder à son compte “Outils du webmaster”
Une fois connecté(e) à votre compte, vous pouvez soit ajouter un site en vue de le référencer à l’aide d’un sitemap dans Google soit mettre à jour un site existant. C’est cette dernière opération que nous allons faire afin de découvrir les écrans pour le compte du site social.hecube.net.
Gérer le sitemap
Il vous faut cliquer sur “Sitemaps” pour accéder aux écrans de d’envoi et de gestion des sitemaps
Envoyer ou mettre à jour le sitemap de votre site
Voilà l’interface d’envoi du sitemap. Si vous arrivez pour la première fois sur cette interface, vous aurez à rechercher le site sur votre site.
Quelques remarques dans la mise à disposition de ce fichier sitemap :
Le nom du fichier de sitemap doit sans accent et sans espace mais pas nécessairement nommé sitemap.xml, vous avez droit à un sitemap_social_avril_09.xml
Le fichier de sitemap doit être déposé à la racine de votre site via un accès FTP.
Pour mettre à jour un sitemap existant, il vous suffit d’envoyer via FTP un nouveau fichier de sitemap en FTP portant le même nom. Cela aura pour effet d’écraser le précèdent sitemap.
Une fois, connecté(e) à l’écran ci-dessus, il faut cliquer simplement sur le bouton “Envoyer de nouveau la sélection” pour que le sitemap soit mis à jour.
Pour aller plus loin
L’accès aux outils du webmaster
Des explications pour créer sur Mac un sitemap google pour votre site.
Des explications pour créer sur Mac un sitemap google avancé pour votre site.
Google, outils du webmaster, Référencement, SEO, sitemap, xml
2 avril 2009 dans Non classé par Bruno Flaven
Un grand nombre d’articles sont disponibles sur le blog principal d’hecube, je vous invite à les lire en attendant d’en publier d’autres sur ce petit nouveau glob.
articles, Blog, glob, publication, tags
2 avril 2009 dans Divers, Référencement, SEO, Tutoriaux par Bruno Flaven
Si vous êtes particulièrement sensible à votre référencement au sein de Google, vous aurez sans doute l’idée de mettre en place un index de vos sitemaps. Cet index vous permettra d’archiver les différentes soumissions de sitemap au moteur Google. La limite de chaque sitemap est de 50 000 les pages à référencer :):)
La mise à l’index des sitemaps
C’est un simple fichier xml qui inclut, comme dans un jeu de poupée russe, les différents xml que vous avez pu soumettre pour indexer votre site dans google.
Le code XML d’un fichier d’index des sitemaps
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>http://social.hecube.net/sitemap_social_1.xml.gz</loc>
<lastmod>2004-10-01T18:23:17+00:00</lastmod>
</sitemap>
<sitemap>
<loc>http://social.hecube.net/sitemap_social_2.xml.gz</loc>
<lastmod>2005-01-01</lastmod>
</sitemap>
<sitemap>
<loc>http://social.hecube.net/sitemap_social_3.xml.gz</loc>
<lastmod>2009-27-01</lastmod>
</sitemap>
</sitemapindex>
Le code XML d’un fichier d’un sitemap sitemap_social_1.xml inclut dans cette index
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.hecube.net/</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/mentions</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/presentation_agence_web/index</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/references/index</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/accueil</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/services_web/gestion_de_site_web</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/contact/index</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/services_web/creation_de_site_web</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/expertises_web</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/expertises_web/index</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/references</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
</urlset>
Creér un sitemap avec l’extension “.gz” sur MAC
Vous avez plusieurs possibilités pour créer un fichier .gz. Sur mac, une fois installée gzip via http://gzip.darwinports.com/.
Les instruction pour l’installation se trouve sur la page et vous devez vous placer dans la console. Vous pourrez ainsi taper la commande pour compresser votre sitemap via la commande ci-dessous.
La commande pour créer un .gz de vos fichiers de sitemap. Le fichier advanced_sitemap_google_2.xml.gz sera créé en lieu et place du fichier xml.
gzip -v advanced_sitemap_google_2.xml
Creér un sitemap avec l’extension “.gz” sur PC
Sur PC, il vous faudra télécharger, l’application 7-zip disponible à www.7-zip.org
Pour aller plus loin
Des explications pour créer sur Mac un sitemap google pour votre site.
Les explications en anglais de Google concernant l’index de sitemap et le sitemap lui-même.
Google, Référencement, SEO, sitemap, xml
30 mars 2009 dans Divers, XHTML CSS par Bruno Flaven
Si il y a bien un problème qui peut virer au casse-tête chinois, c’est bien celui de l’encodage de caractère dans un fichier, une page web ou tout document que vous diffusez et qui se révèle truffé d’erreurs d’encodage.
Arrête ton Charset en dur…
Comment diagnostiquer le problème ? Un symptôme simple, vous voyez apparaître des signes cabalistiques dans vos pages html par exemple. Je vous livre in extenso le diagnostic de http://electron-libre.fassnet.net/utf8.php qui détaille brièvement les moyens de déterminer le bourbier numérique dans lequel vous venez de sauter à touches jointes !
Il donne les symptômes et les soins simples de première urgence.
Reconnaissance rapide des problèmes d’affichage UTF-8 ISO
Cas N°1
Si la page affiche des caractères de ce type : “é”, “î”, “Ô, …
=> Les données ont été enregistrées au format UTF-8, et le navigateur les affiche en pensant avoir affaire à de l’ISO.
Cas N°2
Si la page affiche des caractères de ce type : “�”
=> Les données ont été enregistrées au format ISO, et le navigateur les affiche en pensant avoir affaire à de l’UTF-8.
Si les données sont codées en dur dans la page, voir l’encodage de l’éditeur de texte, le header apache et la balise meta “charset”.
Si les données proviennent de la base, vérifier le format de stockage et les méthodes de lecture et d’insertion (SET NAMES et charset).
Si les données proviennent de l’extérieur (web services, rss, …), penser à convertir les chaînes de caractère (utf8_encode-decode et fonctions du module iconv).
http://electron-libre.fassnet.net/utf8.php
Le mal est déjà fait… Que puis-je faire ?
Il arrive notamment dans le cas d’une BDD que la corruption ait eu lieu. Vous vous retrouvez par exemple avec une BDD codé à l’origine en utf-8 mais dont l’unique sauvegarde que vous possédez est un “dump” (un fichier .sql) fait et ouvert sur une machine en iso-8859-1, un windows par exemple.
Le cas de la BDD corrompue
Si vous popularisez à nouveau ce “dump” (.sql) dans votre BDD et que vos pages continuent de se charger en UTF-8, vous êtes alors dans le Cas N°2 décrit plus haut.
Si vous décidez de cautériser le problème directement dans le client MySQL via le client SSH, dans putty par exemple, n’oubliez de changer les spécifications de “translation” en sélectionnant UTF-8 afin de taper vos requêtes SQl en utf-8. Vous pourrez alors passé allègrement des requêtes, voir même des copier-coller, depuis votre poste ISO sur le serveur en UTF-8.
Changer les propriétés de traduction dans Putty
Pour télécharger Putty, vous pouvez vous rendre à cette adresse
http://www.chiark.greenend.org.uk/~sgtatham/putty/download.
Le cas de XML pour flash
Un cas qui est rarement évoqué, c’est le xml chargé dans flash, bien qu’il s’agisse rigoureusement de problèmes similaires.
Pour éviter parfois des problèmes à répétition, vous pouvez vous rabattre sur l’encodage hexadécimal des caractères accentués… ainsi donc de créer des xml pour vos applications flash sans erreur…
ç s'écrit ç
è s'écrit è
é s'écrit é
ê s'écrit ê
Le plus sur quelque soit le “charset” que vous définissez c’est de remplacer les caractères accentués par leurs équivalents hexadécimaux.
<?xml version="1.0" encoding="UTF-8"?>
<commitments>
<mantra id="one">Cette été je pars pour apprendre le français à Paris</mantra>
<mantra id="two">Les accents ont été mon pire cauchemar</mantra>
</commitments>
<?xml version="1.0" encoding="UTF-8"?>
<commitments>
<mantra id="one">Cette été je pars pour apprendre le français å Paris</mantra>
<mantra id="two">Les accents ont été mon pire cauchemar</mantra>
</commitments>
Il existe des outils de traduction en ligne qui vous donneront les équivalents.
http://rishida.net/scripts/uniview/conversion.php
Enfin, vous pouvez toujours vous référer à la sainte bible du charset.
http://www.w3.org/International/O-charset.fr.php
Le doctype
Disons que pour résumer, le dilemme se pose dans le choix du doctype entre “transitional” et “strict”. Il est certain que si vous choisissez de publier avec un doctype strict, l’obtention de la validation par le validator W3C va se montre plus délicat.
Néanmoins, cela n’est pas impossible que vous puissiez valider ainsi vous pourrez affubler vos pages du logo qui atteste de la validité de vos pages.
La déclaration d’un doctype n’est requise que pour la validation.
Le doctype Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Le doctype strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Les icônes W3C
Si vous souhaitez faire de l’évangélisation, vous pouvez aussi toujours ajouter ce petit logo…
Le “W3C Markup Validation Service”
http://validator.w3.org/
L’en-tête à l’emploi
C’est la balise meta qui va indiquer au navigateur comment interprèter un document web.
L’en-tête UTF-8
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
L’en-tête iso-8859-1
<http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
Le tableau des équivalences
Le tableau de toutes les équivalences pour le chartset ISO 8859-1 Character Set ( Latin - 1) - Western / West European
http://www.tableascii.com/iso88591.htm
Pour aller plus loin
Les règles simples pour passer son site de iso à utf-8
Un récapitulatif bien fait sur la déclaration et les en-têtes
iso, utf-8
26 mars 2009 dans Divers par Bruno Flaven
Dans la série, je forge moi-même mes filtres sur Google Analytics, il existe un “must-have”, le filtre qui vous permettra d’exclure le trafic de venant d’une adresse IP fixe ou d’un domaine.
Vous aurez donc, via Google Analytics, un trafic allégé de vos propres visites ou de vos domaines respectifs. En terme d’audience, c’est une donnée qui peut peser son poids et qui n’est évidement pas monétisable dans une logique ROIste de vente d’espace !!!
1. Attacher ce filtre au compte de son choix
La procédure à suivre pour exclure son adresse IP statique ou de nom de domaine est assez simple. Premièrement, vous devez vous rendre sur le compte principal sur lequel vous souhaitez appliquer ce filtre. Dans notre exemple, il s’agit du compte du domaine principale www.hecube.net
Note : Pour apprendre à créer un compte, vous pouvez vous reporter à cette article
Le lien vers le gestionnaire de filtres
Le menu de sélection du compte
Le lien vers le gestionnaire de filtres
2. Se filtrer soi-même
Il vous reste à créer un nouveau filtre qui va se nommer 3_filter_office_ip_address. Ce filtre va pointer vers cette adresse IP fixe suivante 87\.451\.789 et être attaché au compte principale www.hecube.net
Lien pour ajouter un filtre
3.A Les paramètres du filtre avec les données de l’adresse IP
Pour être conforme avec les regexp (abréviation de regular expressions) ou les expressions rationnelles de Posix, l’adresse IP doit contenir devant chaque . (pour les plus myopes d’entre vous, c’est ce qu’on appelle communément un point), un signe d’échappement l’adresse IP s’écrit donc de la manière suivante 87\.451\.789.
3.B Les paramètres du filtre avec les données de votre nom de domaine
L’expression est beaucoup plus simple. Il vous suffit de rentrer le nom de domaine que vous souhaitez exclure. Imaginons que vous souhaitez exclure les gens venant de ask.com, vous insérerez alors ask.com à la place de la valeur par défaut mis par Google Analytics mydomain.com
4. Le filtre est disponible dans votre gestionnaire
Le filtre a été appliqué à un compte, le trafic sera donc déflaté des vos visites….
Pour aller plus loin
Quelles sont les expressions rationnelles supportées par les filtres Google Analytics
adresse IP, filtre, Google
25 mars 2009 dans Divers, Réseaux sociaux, Tutoriaux par Bruno Flaven
Vous avez sans doute entendu parler de Twitter, le site avec l’oiseau sur la branche dont le ramage et le plumage embellissent de jour en jour. Il se dit que ce serait la « killer app » qui va détrôner facebook pour la sociabilité et google pour la pertinence… A moins que tous ces services coexistent dans le meilleur des mondes possibles. Voilà enfin une parole sage et cela évite de dire des énormités prophétiques sur ce que sera les usages d’ Internet.
En tous les cas, si on mesure le succès d’une application web se mesure à la nuée de petits applicatifs qui viennent se greffer autour d’une API (Application Programming Interface) alors twitter est un énorme succès ! On s’intéressera essentiellement à ces applications qui facilitent la récolte des “twitts” sur les conversations car un Twitt est à consommer rapidement, il ne fond pas dans la main.
Quelques applications pures “twitter-oriented” : TweetDeck, Monitter…
A tous seigneurs tout honneur, commençons par la plus connue des applications, sans doute lié à twitter, commençons par TweetDeck !
TweetDeck
Bien que l’oiseau perché, symbole de twitter, qui sert donc de modèle à TweetDeck, semble avoir été « mazouté », l’application est elle dans l’air du temps au moment où ce post s’écrit. Le tout a été développé sous Flex d’Adobe.
Le concept de Tweetdeck est simple il s’agit de « monitorer » en temps réel ce qui ce dit sur Twitter.com
Un petite vidéo en anglais sur comment se servir TweetDeck
Monitter
Un de mes favoris qui suit en temps réel ce qui se dit sur Twitter. Il est possible d’installer un widget qui rapatrie pour vous les mots-clés et les personnes qui causent en ce moment sur twitter
#screen @Monitter
Pour parfaire sa culture de “Twitter fellas”
La aussi une petite interview du développeur de Twitter Alex Payne. Twitter est une des applications les plus citées lorsque on se met à chercher un exemple marquant d’application tournant sur RoR avec celles bien sûr de 37signals.
http://www.radicalbehavior.com/5-question-interview-with-twitter-developer-alex-payne/
Quelques bons outils pour jumeler twitter et wordpress
http://www.quickonlinetips.com/archives/2007/04/10-best-twitter-tools-for-wordpress-blogs/
Les expressions courantes du vocabulaire twitter.com
Quelques définitions pour voir plus clair dans le vocable twittien.
Le twitt
C’est l’alpha et l’oméga du site, le sésame absolu à savoir un message de 140 caractères maximum. Pas lourd mais on ne perd pas son temps !
Le @
L’arobase désigne les réponses
Voir @hecube C’est la réponse faite à hecube
Le #
Le dièse # désigne des sujets
Mettre un dièse devant un mot-clé et c’est toute la conversation que vous allez récolter… Pour connaître tout ce qui “se dit rapport à/aux”* recettes, à l’art culinaire bon ou mauvais #cuisine, Vous adorez cette petite guitare #ukulélé
* elle est vraiment moche cette expression
Pour info et selon wikipédia, à l’origine le mot anglais “tweets” désignent les gazouillis d’un oiseau.
Petit lexique du Twitter addict donné par le site stratetgeek.fr
Twitter addict: utilisateurs et fan inconditionnel de Twitter. Synonyme: Twitter fellas, fellas, Twitterer
Twitt: l’entité de base de Twitter, soit un billet de 140 caractères maximum.
Twitter: verbe qui signifie publier un twitt.
Follower: 1. Mot qui désigne les personnes qui s’inscrive au twitter de quelqu’un. 2. Verbe qui signifie suivre le twitter de quelqu’un
Timeline: C’est le fil de discussion regroupant l’ensemble des twitts des personnes que vous follower.
DM: ou Direct Message est un message privé d’une personne à une autre
http://www.stratetgeek.fr/post/Twitter-simple-tendance-ou-veritable-evolution
Pour aller plus loin
Le site officiel de Tweetdeck
Le site officiel de Monitter
Twitt, Twitter
14 mars 2009 dans PHP, MYSQL, Tutoriaux par Bruno Flaven
Pour obtenir rapidement un environnement de développement PHP-MySQL sur PC, le plus simple est de télécharger le « one click installer » Easyphp. Cet exécutable vous permettra d’installer très facilement localement les principaux éléments pour découvrir ou réaliser des développements à l’aide PHP-MySQL. Ce package comprend les 3 dernières lettres du sacro-saint acronyme LAMP (Linux, Apache, MySQL, PHP). Son concurrent direct l’a d’ailleurs compris puisque il se nomme WAMP (Windows, Apache, MySQL, PHP). Il propose à peu de choses prés un environnement équivalent.
Installer et découvrir l’application EasyPHP
L’installation de EasyPHP se fait comme une simple application windows, on ne s’attarde donc pas sur cette phase qui ne pose à priori pas de problèmes.
La console et l’icône EasyPHP
Une fois l’application téléchargée sur le site de EasyPHP et l’installation effectuée sans accroches, vous devez avoir accès à la console ci-dessous. Par ailleurs, l’icône EasyPHP vient se loger dans la barre de taches, cela vous donne accès à tous les propriétés de EasyPHP.
EasyPHP à l’arrêt
EasyPHP demarré
L’accès via le navigateur au serveur en local et à l’administration EasyPHP
Lorsque les services suivants Apache et MySQL sont démarrés, vous pouvez accéder à un site web en local en tapant l’adresse suivante dans votre navigateur http://127.0.0.1/
L’écran de configuration de EasyPHP lorsque vous sélectionnez “Administration” via l’icône ou via http://127.0.0.1/home/.
L’accès à phpMyadmin se fait via http://127.0.0.1/home/mysql/.
Ma première page en php dans EasyPHP
En plaçant un fichier index.php, localement dans le répertoire www de EasyPHP situé dans notre exemple à cette adresse C:\EasyPHP_2_0b1\www.. Vous pouvez renommer la page.
Le code de ma première page en php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>ma nouvelle page index.php</title>
</head>
<body>
<?php
/* php code */
echo ('<h1>ma nouvelle page index.php</h1>');
?>
</body>
</html>Pour aller plus loin
Le site officiel de EasyPHP
Le site officiel de WAMP
Les principaux éléments que vous installez avec Easyphp
MySQL, PHP
20 mars 2009 dans Google, Marketing Web, Statistiques et Tracking, Tutoriaux par Bruno Flaven
Google a pris résolument le parti de faire aussi bien dans son outil de mesure statistique que toutes les solutions actuellement sur le marché. Bien que Google Analytics ne soit pas toujours pris comme maitre étalon dans la mesure statistique pour un site, surtout si l’une des solutions ci-dessous a déjà été implémenté. Les très nombreuses fonctionnalités existantes de Google Analytics et la base de connaissance qui existe sur le Web en font un candidat idéal et fiable dans la mesure statistique.
Dans le problème qui nous intéresse aujourd’hui, on va voir l’extraordinaire finesse offerte par la création de filtres avancés.
Dans cette exemple, on va essayer de dissocier le trafic du domaine principale www.hecube.net du sous-domaine social.hecube.net sur un même compte Google Analytics
Affiner l’analyse de votre audience à l’aide de filtre dans Google Analytics
Le code de Google analytics avec le paramètre _setDomainName renseigné
Il vous faut abord paramétrer différemment le script de tracking fourni par Google Analytics.
On renseigne le paramètre pageTracker._setDomainName("hecube.net"); pour notifier le nom de domaine principal pour Google Analytics, dans notre exemple hecube.net. Faites attention de le renseigner sans le “www” devant !
<!-- // google analytics tracking script -->
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js'
type='text/javascript'%3E%3C/script%3E"));
try {
var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
/* main domain */
pageTracker._setDomainName("hecube.net");
pageTracker._initData();
pageTracker._trackPageview();
} catch(err) {}
<!-- // google analytics tracking script -->1. Sélectionner le compte sur lequel vous allez travailler
Si vous avez plusieurs comptes, dans le menu de droite, vous pouvez créer un compte ou sélectionner un compte existant, dans notre exemple, nous choisirons de travailler sur le compte du domaine principal intitulé www.hecube.net
Le menu de sélection du compte
2. Créer un nouveau profil attaché à ce compte principal
On va créer un nouveau profil web subdomain_hecube.net attaché au compte principal www.hecube.net.
Lien pour ajouter un profil de site Web
3. Remplir les paramètres du nouveau profil subdomain_hecube.net
Par défaut, l’écran s’ouvre pour la création d’un nouveau profil pour un nouveau domaine. Le bouton radio de sélection est par défaut “Ajouter un profil pour un nouveau domaine”. Il faut choisir “Ajouter un profil pour un domaine existant” car vous serez alors en mesure d’attacher votre sous-domaine au domaine principale existant.
Une fois “Ajouter un profil pour un domaine existant”, vous choisirez le domaine existant auquel vous allez ajouter le profil, dans le notre exemple http://www.hecube.net/
Les paramètres du nouveau profil
4. Créer les 2 filtres pour séparer le trafic entre le domaine principale et le(s) sous-domaine(s)
Il va falloir créer deux filtres afin de pouvoir comptabiliser le trafic de votre domaine principal et de votre sous-domaine.
5. Créer le premier filtre 1_master_profile pour séparer le trafic entre le domaine principale et le(s) sous-domaine(s)
Il s’agit de créer un filtre personnalisé donc avancé où vous allez définir à l’aide d’expression regexp (abréviation de regular expressions).
Pour éviter les longues explications fastidieuses, faites une reproduction exacte des valeurs suivantes à la différence que vous êtes libres de nommer comme bon vous semble ce filtre, nommé dans notre exemple 1_master_profile
Le filtre 1_master_profile attaché au profils de site web principal www.hecube.net
Les détails des spécifications du filtre
Nom du filtre : 1_master_profile
Type de filtre : Filtre personnalisé
Button radio selectionné est Avancé
Champ A -> Extraire A Nom d'hôte
Champ B -> Extraire B URI de la demande
Sortie vers -> Constructeur URI de la demande/$A1$B1
Champ A obligatoire Oui
Champ B obligatoire Non
Remplacer le champ de sortie Oui
Respect de la casse Non
Ce filtre est à attacher au domaine principal : www.hecube.net
6. Créer le deuxieme filtre 2_inc_social_hecube.net pour séparer le trafic entre le domaine principale et le(s) sous-domaine(s)
Cette fois-ci ce filtre sera attaché au sous-domaine créée précédemment subdomain_hecube.net attaché au domaine secondaire social.hecube.net
Nom du filtre : 2_inc_social_hecube.net
Type de filtre : Filtre personnalisé
Button radio selectionné est Inclure
Champ de filtrage Nom d'hôte
Règle de filtrage social\.hecube\.net
Respect de la casse Non
Ce filtre est à attacher au domaine principal : subdomain_hecube.net
En conclusion
Vous êtes donc parvenu au terme de ces différentes étapes, à scinder sur un même compte Google Analytics le trafic de votre site principal et d’un sous-domaine. Cette opération dans sa partie concernant sous-domaine peut être reproduite autant de fois que vous possédez un sous-domaine.
Pour résumer, vous avez donc :
- 2 profils de site Web
www.hecube.net, subdomain_hecube.net
- 2 filtres :
1_master_profile, 2_inc_social_hecube.net
Pour aller plus loin
Les principales de solutions de mesure d’audience
Un article avec de nombreuses captures sur comment tagguer des sous-domaines dont cette article s’est abondamment inspiré.
Un autre très bonne article synthétique sur comment tagguer des sous-domaines
domaine, filtre, Google, Google Analytics, tracking
18 mars 2009 dans Divers, Framework, Ruby on Rails, Tutoriaux par Bruno Flaven
La réponse du berger à la bergère, on a vu dans un article précédent comment installer avec un « one click installer » l’environnement Ruby on Rails sur un Mac via locomotive. Il existe l’équivalent sur PC, cet équivalent se nomme Instant Rails. Il est identique à EasyPHP dans son installation, les concepteurs du projet ne s’en cachent d’ailleurs pas. A noter, parmi ces concepteur Curt Hibbs, auteur du très fameux article publié chez O’reilly « Rolling with Ruby on Rails » et de nombreux ouvrages d’évangélisation sur RoR.
Quelques-uns des composants inclus dans la distribution de Instant Rails 2.0
Il est à noter qu’Instant Rails est astucieusement livré avec PHP et phpMyAdmin pour les personnes, nombreuses qui viennent du PHP et souhaitent s’initier à l’environnement RoR.
Enfin, dernière remarque, l’application est livrée avec deux exemples : une application de blog nommé typo et l’exemple Cookbook qui est repris dans l’article cité plus haut. Instant Rails est donc un vrai outil pédagogique d’initiation à RoR.
- [Instant Rails Manager] 2.0
- [Ruby 1.8.6] (from the [One-Click Ruby Installer] 1.8.6-26)
- [Ruby on Rails] 2.0.2
- [Apache] 1.3.33
- [MySQL] 5.0.27
- [MySQL/Ruby] 2.7.3 (native driver)
- [Mongrel] 1.1.2
- [phpMyAdmin] 2.10.0.2
- Cookbook app from [ONLamp.com article]
- [Typo] 2.6.0 Ancillary Instant Rails Components
- [PHP] 4.3.10
Créer son environnement RoR avec InstantRails sur PC
Il faut aller télécharger l’application http://instantrails.rubyforge.org/wiki/wiki.pl
Le site est en anglais mais il y a quelques tutoriaux pour vous aider à vous retrouver pour l’installation.
Lancement de l’application
Une fois installé, vous pouvez lancer l’application et vous allez voir apparaître la console InstantRails.
Configuration de l’application
Vous pouvez accéder à la console pour gérer vos applications Rails ou la configuration des éléments de InstantRails.
Créer une application rails sous InstantRails
En choisissant “Rails Application” puis “Manage Rails Application”, une console MS-DOS s’ouvre directement dans le répertoire où il est installé par défaut.
C:InstantRails-2.0-win. Via la commande cd rails_apps, vous accédez au répertoire dans lequel vous allez créer l’application rails.
En lançant la commande “rails myapplication”, vous allez créer le répertoire de l’application visible à cette adresse C:InstantRails-2.0-winrails_appsmyapplication.
Une fois créé, vous pouvez vous rendre dans le répertoire en tapant cd myapplication.
Puis dir pour afficher le contenu du répertoire myapplication
Démarrer l’application myapplication
Via la console InstantRails, vous sélectionnez en cochant “myapplication” puis “Start with Mongrel”. Ce qui équivaut aux commandes suivantes si vous êtes dans le répertoire de l’application myapplication script/server ou ruby script/server
Le serveur Mongrel va faire tourner l’application sur le port 3000. Vous devez parfois autoriser Mongrel dans le firewall Windows comme sur la capture d’écran.
Vous pouvez donc accédez à votre application à l’adresse suivante http://127.0.0.1:3000/, la page traditionnelle de RoR s’affiche, vous y êtes !
Créer son premier controller
En étant dans le répertoire myapplication, vous pouvez lancer à partir le console d’autre commande plus orienté RoR par exemple la création de votre premier controller nommé index. ruby script/generate controller index
Ce controller index sera accessible à http://127.0.0.1:3000/index/
Eteindre InstantRails
Par un clic droit sur l’icône InstantRails dans votre barre de tâches, vous accédez au menu contextuel à la commande Stop Servers pour éteindre le serveur.
Ensuite en sélectionnant Exit vus sortez définitivement de l’application InstantRails.
InstantRails, PC, RoR, ruby
6 mars 2009 dans CMS, Divers, Tutoriaux, Wordpress, XHTML CSS par Bruno Flaven
Pour ceux d’entre vous qui utilisent Wordpress, qui pondent un « peu de code » à leurs heures perdues… Dieu sait si vous êtes nombreux ! Un jour ou l’autre, vous vous êtes demandé comment insérer un morceau de code tout beau, tout chaud au sein d’un post Wordpress enfin montrer à la face du monde votre expertise par exemple dans le langage assembleur …
Comme toujours dans le monde merveilleux du groupe « Wordpress and the plugins », il existe des béquilles qui vous facilitent le travail en colorant à la main chacune de vos balises.
Des critères pour sélectionner un plugin
J’ai jeté mon dévolu sur ces 3 plugins mais à l’installation, je n’en ai retenu qu’un seul. Ces trois plugins répondent à quelques critères objectifs que l’on peut attendre en terme de « color coding »* , « highlight coding »*, « syntax highlighting »*.
- La possibilité d’ajouter ou de retirer les numéros de ligne.
- La possibilité offerte pour les utilisateurs de faire un copier-coller facile sans se trimballer les numéros de lignes. Internet est le règne du bout-de-code-copier-coller-à-droite-à-gauche.
- La possibilité de poster des codes source dans un grand nombre de langage : actionscript, php, ruby…etc
* C’est ainsi que l’on nomme cette fonctionnalité recherchée en cherchant dans google via ces deux termes, vous trouvez pléthore de références si la proposition de ce triptyque ne vous plait décidément pas.
Le goût et les couleurs
Le triptyque de plugins à découvrir
Choix N°1 - WP-syntax
Ce plugin qui fonctionne à merveille est celui de Ryan Mcgeary qui s’appui sur GeSHi (Generic Syntax Highlighter) initialement conçu pour le système de forums phpBB qui inclut nativement un très grand nombre de langages. Notre choix pour ce blog même.
http://wordpress.org/extend/plugins/wp-syntax/
http://ryan.mcgeary.org/
http://qbnz.com/highlighter/
Choix N°2 – CodeColorer
Ce plugin d’un développer ukrainien du nom de Dmytro Shteflyuk offre notamment en plus du numéro de lignes le noir comme couleur par défaut pour le code très « ruby like ».
http://kpumuk.info/projects/wordpress-plugins/codecolorer/
Choix N°3 - Dojox Wordpress Syntax Highlighter
Ce plugin concut par les allemands de OS Expert.net répond lui aussi aux trois critères énoncés ci-dessus. ?
http://osexpert.net/wordpress-syntax-highlighter
Envoyez les couleurs !
Un exemple de PHP sous WP-syntax
On renseigne le paramètre lang=”php” pour notifier qu’il s’agit de php.
// $Id: install.php,v 1.34.2.5 2008/07/09 21:48:41 drumm Exp $
require_once './includes/install.inc';
/**
* The Drupal installation happens in a series of steps. We begin by verifying
* that the current environment meets our minimum requirements. We then go
* on to verify that settings.php is properly configured. From there we
* connect to the configured database and verify that it meets our minimum
* requirements. Finally we can allow the user to select an installation
* profile and complete the installation process.
*
* @param $phase
* The installation phase we should proceed to.
*/
function install_main() {
require_once './includes/bootstrap.inc';
drupal_bootstrap(DRUPAL_BOOTSTRAP_CONFIGURATION);
// This must go after drupal_bootstrap(), which unsets globals!
global $profile, $install_locale;
require_once './modules/system/system.install';
require_once './includes/file.inc';
// Ensure correct page headers are sent (e.g. caching)
drupal_page_header();
// Check existing settings.php.
$verify = install_verify_settings();
// Drupal may already be installed.
if ($verify) {
// Establish a connection to the database.
require_once './includes/database.inc';
db_set_active();
// Check if Drupal is installed.
if (install_verify_drupal()) {
install_already_done_error();
}
}
// Load module basics (needed for hook invokes).
include_once './includes/module.inc';
$module_list['system']['filename'] = 'modules/system/system.module';
$module_list['filter']['filename'] = 'modules/filter/filter.module';
module_list(TRUE, FALSE, FALSE, $module_list);
drupal_load('module', 'system');
drupal_load('module', 'filter');Un exemple de CSS sous WP-syntax
On renseigne le paramètre line=”1″ pour faire apparaître les numéros de ligne.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
/** general styles START **/
html {
min-height: 100%;
margin-bottom: 1px;
}
body {
background-color: #E4F2FD;
font-family: "Lucida Grande", Trebuchet, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
text-align: left;
margin: 0 auto 0 auto;
padding: 0;
color: #000000;
z-index: auto;
}
form {
margin: 0;
padding: 0;
}
/** general styles STOP **/
/* police text (begin) */
p.hecube_website_text{
font-size: 12px;
text-align: justify;
line-height: 20px;
color: #464646;
text-decoration: none;
margin: 0px auto;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
z-index: auto;
} |
Un exemple de XML sous WP-syntax
On renseigne le paramètre escaped=”true” lorsque le code contient les balises < et > transcrites en html.
<sitelist>
<asset aspectRatio="normal" isSite="true" >
<url><![CDATA[http://hecube.net]]></url>
<headline><![CDATA[Le site de hecube.net]]></headline>
<description><![CDATA[Hecube.net est une
agence web spécialisée dans
la conception et la création de site internet, la promotion et
l'animation de site web ainsi que l'hébergement
serveur dédié administré.
Hecube accompagne les entreprises sur Internet en leur apportant le meilleur
des technologies web créatrices de
notoriété]]></description>
</asset>
</sitelist>
Pour aller plus loin
couleur, plugin, tag, Wordpress
5 mars 2009 dans Divers, Tutoriaux, Vidéo par Bruno Flaven
Une fois installer FFmpeg, vous pouvez désormais vous servir des lignes de commandes pour exécuter différentes actions sur des fichiers vidéos situées sur votre ordinateur.
Pour installer sans problème FFmpeg, vous pouvez consulter l’article “Installer FFmpeg sur un PC”
Pour lancer des commandes dans la console MS-DOS, vous pouvez consulter l’article ”
Modifier la variable Path sous windows afin d’executer des commandes en MS-DOS”
Pour faciliter la compréhension, nous allons utiliser toujours le même fichier. Le nom du fichier est écrit sans espace et sans accent, rappelez-vous les commandes sont passés en MS-DOS.
Répertoire et Fichier source
Le fichier source et sa localisation est la suivante : C:2_movie_sourceoriginemon_film_du_moment.avi
Il s’agit d’un film d’une taille 320×240 au format avi
Répertoire et Fichier de destination
Le répertoire de destination est le suivant : C:2_movie_sourcedestination_web
Selon les commandes (Commande 1, 2 et 3) que vous allez passer, vos obtiendrez des fichier de destination différent.
- Pour la Commande 1, vous obtenez une suite de fichier .jpg numéroté de 1 à n ex mon_film_du_moment_en_1.jpg, mon_film_du_moment_en_2.jpg…etc
- Pour la Commande 2, vous obtenez un fichier .avi encodé en mpeg4 qui se nomme mon_film_du_moment_en_mpg4.avi localisé dans
C:2_movie_sourcedestination_web
- Pour la Commande 3, vous obtenez un fichier .flv encodé en flash video qui se nomme mon_film_du_moment_en_flv.flv localisé dans
C:2_movie_sourcedestination_web
Commande 1
Extraire des images de 320×240 au format jpg dans une plage de temps de 1 à 5 sec.
Windows
ffmpeg -i C:\2_movie_source\origine\mon_film_du_moment.avi
-an -ss 00:00:01.000 -t 00:00:05.000 -r 1 -y
-s 320x240 C:\2_movie_source\destination_web\mon_film_du_moment_en_%d.jpg
Mac
ffmpeg -i /Users/monomdutilisateur/origine/mon_film_du_moment.avi
-an -ss 00:00:01.000 -t 00:00:05.000 -r 1 -y
-s 320x240 /Users/monomdutilisateur/destination_web/mon_film_du_moment_en_%d.jpg
Commande 2
Convertir une vidéo au format avi à l’aide du codec mepg4 en ajoutant des métadonnées
Windows
ffmpeg -i C:\2_movie_source\origine\mon_film_du_moment.avi -author Hecube
-year 2007 -title ©-Hecube:utiliser-ffmpeg -copyright ©-Hecube-France
-comment www.hecube.net -ar 44100 -aspect 4:3 -ab 64
-vcodec msmpeg4v2 -s 320x240 -ss 00:00:00
C:\2_movie_source\destination_web\mon_film_du_moment_en_mpg4.avi
Mac
ffmpeg -i /Users/monomdutilisateur/origine/mon_film_du_moment.avi -author Hecube
-year 2007 -title ©-Hecube:utiliser-ffmpeg -copyright ©-Hecube-France
-comment www.hecube.net -ar 44100 -aspect 4:3 -ab 64
-vcodec msmpeg4v2 -s 320x240 -ss 00:00:00
/Users/monomdutilisateur/destination_web/mon_film_du_moment_en_mpg4.avi
Commande 3
Convertir une vidéo au format flv (flash vidéo) en ajoutant des métadonnées
Windows
ffmpeg -i C:\2_movie_source\origine\mon_film_du_moment.avi
-author Hecube -year 2007 -title ©-Hecube:utiliser-ffmpeg
-copyright ©-Hecube-France -comment www.hecube.net
-ar 44100 -aspect 4:3 -ab 64 -f flv -s 320x240
-ss 00:00:00 C:\2_movie_source\destination_web\mon_film_du_moment_en_flv.flv
Mac
ffmpeg -i /Users/monomdutilisateur/origine/mon_film_du_moment.avi
-author Hecube -year 2007 -title ©-Hecube:utiliser-ffmpeg
-copyright ©-Hecube-France -comment www.hecube.net
-ar 44100 -aspect 4:3 -ab 64 -f flv -s 320x240
-ss 00:00:00 /Users/monomdutilisateur/destination_web/mon_film_du_moment_en_flv.flv
FFmpeg dans le texte (en anglais)
Le détail de certains arguments qui sont passés dans FFmpeg en ligne de commande.
`-ar freq'
Set the audio sampling frequency (default = 44100 Hz).
`-aspect aspect'
Set aspect ratio (4:3, 16:9 or 1.3333, 1.7777).
`-ab bitrate'
Set the audio bitrate in bit/s (default = 64k).
`-f fmt'
Force format.
`-ss position'
Seek to given time position in seconds. hh:mm:ss[.xxx] syntax is also supported.
`-vcodec codec'
Force video codec to codec. Use the copy special value to tell that the raw codec data must be copied as is.
`-r fps'
Set frame rate (Hz value, fraction or abbreviation), (default = 25).
Pour aller plus loin
ffmpeg, Vidéo
3 mars 2009 dans Ecommerce, Google, Marketing Web, Tutoriaux par Bruno Flaven
Titulaire d’un compte Adsense, vous êtes ravi(e) à l’idée de pouvoir enfin délivrer de la publicité sur votre site. A vous bannières, annonces et autre inventions publicitaires qui enfin monétisent votre audience et viennent garnir en monnaie sonnante et trébuchante votre porte-monnaie. Mais, passé l’affichage des premières annonces, vous découvrez des publicités pour le moins inappropriés. La question est alors comment se défaire de ces publicités parasitaires sans pour autant renoncer à la manne ! G pense à tout et a trouvé la parade, il nomme cela pudiquement « Filtres des annonces de la concurrence »
Il vous reste donc à implémenter la solution…
La google adsense bout filtre
Le plus simple est d’abord de pister la bannière non désiré en relevant le lien de destination de la publicité. On le trouve généralement simplement écrit sous l’annonce ou la bannière elle-même.
Il faut ensuite entrer une URL par ligne dans le champ dont une capture figure ci-dessous.
Les règles google sur la bonne composition du filtre.
Google rappelle des règles simples à suivre pour bloquer tout ou partie des publicités sur la base d’un lien de destination illustré par un site d’exemple dont l’adresse est « www.exemple.com » justement ! L’adresse aurait pu être www.unsitedecrevard.com l’exemple n’en aurait été que plus parlant.
* En entrant « exemple.com », vous bloquez les annonces associées à « exemple.com » et à « exemple.com/sous ».
* La chaîne « exemple.com » permet également de bloquer l’affichage des annonces référençant « www.exemple.com » et « forums.exemple.com ».
* La chaîne « www.exemple.com » bloque les annonces associées à « www.exemple.com », mais pas celles pointant vers « forums.exemple.com » ou « exemple.com ».
* La chaîne « exemple.com/sous » ne bloque pas les annonces référençant « exemple.com/produits » ni « exemple.com/sous/index.html ».
Si les symptômes persistent…
Vous pouvez toujours consulter un spécialiste. Google le dit lui même « Si des annonces non souhaitées apparaissent toujours après 12 heures, contactez-nous. »
Pour aller plus loin
Adsense, Google, publicité
2 mars 2009 dans Divers, Tutoriaux, Vidéo par Bruno Flaven
Tout le monde peut avoir entendu parler du MS-DOS une fois dans sa vie. Racheté à vil prix par Bill Gates, il est le socle de programmation des distributions Windows. Loin de moi l’idée de donner un cours de DOS, cet article ne s’y intéresse que pour une unique (et bonne !) raison qui tient dans la question suivante : Comment modifier la variable d’environnement PATH afin de pouvoir lancer des commandes directement depuis la console pour des applications du type de FFMPEG, Imagemagick…etc.
NOTE : Les opérations décrites ci-dessous qui consistent à manipuler la variable path de votre environnement Windows peuvent endommager votre système. Agissez donc avec la plus grande prudence.
1 - Accéder et afficher la variable path via la console MS-DOS sous Windows
La première question est de savoir comment accéder à sa console MS-DOS. Via le menu « Démarrer » sous Windows, vous avez accès à la mention « Exécuter » qui lancera une boite de saisie dans laquelle vous devrez en toute lettres « cmd » ou « command ».
La conséquence sera alors l’apparition de la console MS-DOS de Windows.
Accéder à la console MS-DOS
Editer la variable path sous MS-DOS
Il vous suffit de taper le mot « path ». Vous verrez alors apparaître le détail de la variable d’environnement path.
Dans notre exemple, vous voyez notamment le chemin vers l’application ffmpeg.
Cette valeur correspond bien à ce que vous pouvez voir via l’explorateur Windows.
2 – Modifier la variable « path » de windows
Faites un clic droit sur l’icône de votre poste de travail afin d’accéder aux « propriétés »
Dans l’onglet avancé, vous accédez au bouton « variables d’environnement »
Dans le tableau des variables système vous sélectionner la ligne « Path » puis cliquer sur le bouton « Modifier ».
Rajouter à la fin de la ligne complète l’élément suivant « ;C:FFMPEG » puis cliquer sur OK.
# %systemroot%system32;%systemroot%;%systemroot%system32wbem;c:\imagemagick-6.4.3-q16;C:\FFMPEG
Attention : Si vous sélectionnez la ligne complète en fonction de votre configuration, vous devriez avoir une ligne de ce type par exemple. La variable qui se situe à la fin n’est pas terminé par un point virgule « ; »
Désormais vous allez pouvoir lancer des commandes directement dans votre console MS-DOS pour manipuler des vidéos avec ffmpeg ou manipuler des fichiers photos via imagemagick.
ffmpeg, imagemagick, MS-DOS, Windows
2 mars 2009 dans Divers, Framework, Ruby on Rails, Tutoriaux par Bruno Flaven
Même si l’installation de Ruby On Rails (RoR) semble toujours à priori facile sur un Mac. Il y a pléthore d’articles concernant l’installation de Ruby, Rails, Mongrel, Capistrano…etc. Il existe même des scripts shell qui vous installe l’ensemble.
Toutefois, si vous souhaitez juste voir à quoi ressemble une page RoR, je vous conseille de télécharger Locomotive. Bien que l’application vienne sans être adossé à MySQL, à l’inverse de InstantRails sur PC, cela donne une idée rapide du mode de fonctionnement d’un site en RoR sans base de données évidemment ce qui e vous permettra pas d’expérimenter le « Scaffolding » ou les vertus supposées de l’ « Active Record ».
Accrochez locomotive à votre MAC
Voici la marche à suivre pour installer Locomotive sur Mac.
Comme on peut s’en douter, il faut télécharger l’application Locomotive, sélectionnez l’application la plus récente Locomotive_2.0.X.dmg.
A priori pas d’inquiétude sur la version de votre Mac puisque toutes les distributions sont “Mac Universal (PPC/x86)”.
Note : Il n’en va pas de même pour les “bundles” qui peuvent être utiles pour aller plus avant dans le développement d’application RoR : RMagickRail notamment où la distinction se fait entre les deux mac PPC et i386 mais on laisse intentionnellement de côté cette problématique pour éviter de compliquer inutilement nos explications.
Faites tourner la loco…
La fenêtre par défaut
Une fois installé et lancé, l’application se présentée via cet écran.
Créer votre première application RoR
En bas à gauche, vous avez un menu contextuelle qui vous permet de créer votre application. Nous contenterons de mener à bien la séquence “Create New” qui consiste à créer une application Rails.
La fenêtre Rails
Dans le champs “Application Name”, vous allez saisir le nom de votre future application rails. dans notre exemple, elle se nomme “myappliaction”. La valeur “Application Directory” est le chemin vers votre répertoire par défaut en local où viendra se stocker vos applications RoR. Lancer cette commande équivaut à la commande “rails myapplication” passé dans le terminal.
myappliaction tourne sur le port 3001
L’application “myappliaction” est créée. Pour démarrer cette application, il vous suffit de la sélectionner et de cliquer sur la flèche verte intitulée “Run”. Dans notre exemple d’écran, l’application tourne en local sur le port 3001, elle est donc disponible via votre navigateur à l’adresse suivante “http://127.0.0.1:3001″.
Bienvenue à la station RoR
Vous apercevez la page standard lancée pour une application RoR. Vous y êtes, vous avez une application RoR en fonction “http://127.0.0.1:3001″.
Pour aller plus loin
installation, locomotive, RoR, ruby
2 mars 2009 dans Divers, Google, Hébergement, Mac, Référencement, SEO, Tutoriaux par Bruno Flaven
Forcément même si vous possédez un site basique, vous vous interrogez un jour ou l’autre sur sa notoriété à travers le référencement Google. Vous vous livrez alors frénétiquement à la première mesure sauvage de votre notoriété qui consiste à taper frénétiquement chaque jour les mots-clés émanant du contenu de votre site ou les métadonnées que vous avez inséré consciencieusement dans vos pages en espérant que Google vous fasse un signe de la main.
Rapidement, vous découvrez que taper la recherche site:hecube.net vous donne le nombre de pages indexées par Google.
A quoi sert le fichier Sitemap ?
Eh pourtant rien n’y fait, vous restez scotcher éternellement dans les tréfonds du classement Google, votre site et vos pages restent invisibles… Tout espoir n’est pas perdu cependant et Big G là encore vous amène sa solution maison qui consiste à compléter d’un fichier xml nommé « sitemap ». Ce fichier détaille l’arborescence des différentes pages de votre site, disponible à l’indexation, en précisant la fréquence de la visite et la pertinence du contenu. Là encore, en osant une critique feutrée, la méthode est subtile, l’hégémonie de Google lui confère le droit d’externaliser auprès des utilisateurs ce qu’aucun robot ne serait en mesure de fournir de manière précise et pertinente, un choix des pages à référencer. Dans une futur proche sans doute, l’algorithme ne pourra plus rien pour déterminer la pertinence d’une page, seule la recommandation par des tiers via les réseaux sociaux sera significatif (cf. articles réseaux sociaux vs google)… Mais cessons là la critique et nous perdre en conjecture car aujourd’hui Google c’est Internet et vous êtes tellement accro à votre référencement Google que vous êtes prêt à toutes les bassesses possibles pour voir vos pages décoller un peu… Alors soyons zélées…
En pratique, voilà comment sans se fatiguer rendre son site le plus attrayant pour gros G… Car, dans le décalogue du SEO (Search Engine Optimization), il est dit :
Qui possède un « sitemap », possède un sésame important dans la science du référencement.
Tous les charlatans et prédicateurs du référencement vous le diront !
Le bon outil pour créer un sitemap sur Mac
C’est d’abord faire le choix parmi une palanquée d’outils générateur de sitemap qui profitent tel des poissons pilotes du sillon tracé par le requin Google.
Nous avons retenu pour MAC, l’application iGooMap conçu par les allemands de http://www.pointworks.de/. Plusieurs critères à ce choix, une bonne documentation, un site simple et clair… et même si vous ne payez pas la license pour avoir l’ensemble de fonctionnalités, le logiciel vous permettra de générer un sitemap avec un bémol tout de même une restriction dans le nombre d’entrées. Au moment de l’enregistrement un iGooMap non enregistré prendra environ entre 70% à 80% des entrées du fichier.
Le maniement en 3 étapes de iGooMap : Lancer, Indexer, Sauver
Lancer l’application
Une fois installé, il vous reste à lancer l’application… jusque là rien de bien sorcier.
Indexer votre site
Il vous suffit pour cela d’insérer l’adresse de votre site exemple http://www.hecube.net
Vous pouvez laisser les paramètres par défaut. Un conseil tout de même, si la profondeur de votre site est conséquente c’est à dire que le nombre de pages qu’il contient est très important, l’indexation risque de prendre un certain temps… Armez vous de patience en allant chercher un café ou un thé, voire une bière.
Sauver le sitemap (sitemap.xml)
Nous sauvegardons dans notre exemple le sitemap sur le bureau. Il ne reste plus qu’à l’envoyer à la racine de votre site sur le serveur qui l’héberge puis le donner en pâture à Google. A noter, iGooMap est en version d’essai, le logiciel ne prend en compte que 11 des entrées et non les 14 inscrites dans le fichier.
Le sitemap XML du site www.hecube.net
Voilà le code source produit par notre manipulation, cela vous donne un gabarit pour ensuite augmenter ou diminuer le nombre d’entrées à l’aide de TexEdit par exemple.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.hecube.net/</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/mentions</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/presentation_agence_web/index</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/references/index</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/accueil</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/services_web/gestion_de_site_web</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/contact/index</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/services_web/creation_de_site_web</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/expertises_web</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/expertises_web/index</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.hecube.net/references</loc>
<lastmod>2009-03-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
</urlset>
Le script Python, la voie royale
Pour les plus téméraires, Il y a toujours la marche à suivre préconisée par Google à partir du script python que Google mets à votre disposition.
Il vous faudra installer le language Python pour Mac OS X
http://www.python.org/download/mac/
Ensuite cette page vous présente la marche à suivre pour utiliser leur script.
https://www.google.com/webmasters/tools/docs/en/sitemap-generator.html
Les autres outils conseillés par Google
Pour les plus curieux, les outils et sites recommandés par Google pour servir un sitemap.
http://code.google.com/p/sitemap-generators/wiki/SitemapGenerators
Pour aller plus loin
Google, Référencement, sitemap, xml
1 mars 2009 dans Divers, Tutoriaux, Vidéo par Bruno Flaven
« FFmpeg is a complete, cross-platform solution to record, convert and stream audio and video. It includes libavcodec - the leading audio/video codec library. »
Voici la définition selon wikipédia et la traduction approximative selon moi de FFmpeg est une solution complète et multiplateforme pour enregistrer, convertir et lire de la vidéo et de l’audio. Cette solution inclut notamment la librairie « libavcodec », une des libraories de codecs les plus populaires.
On pourrait aussi ajouter que comme le codec DivX de Monsieur Rota, FFmpeg a fait beaucoup pour et la capture et l’extraction de films depuis des DVD et leur diffusion sur le Net. De très nombreux logiciels, notamment d’encodage en FLV, s’appuie sur cette librairie, Riva FLV encoder pour citer sur PC l’un des plus connus.
Installer FFmpeg compilé sur votre PC
Le plus simple pour éviter les complications liés à la compilation de FFMPEG sur un PC sous Windows est de télécharger une version compilée c’est à dire disposer de FFmepg sur son disque dur sous la forme d’une application avec un .exe à la fin
Vous pourrez ensuite l’installer où bon vous semblera, dans un répertoire prévu à cette effet par exemple du type C:/FFMPEG
FFMPEG sur votre PC
Vous n’êtes pas dans l’obligation d’installer le tout dans “Program files”, vous pouvez très bien créer un répertoire comme indique ci-dessous.
Si vous choisissez d’installer FFmpeg compilé, en consultant cette article consacré à la modification du PATH sur ce blog, vous pourrez faire appel à un ensemble de commandes afin d’encoder, extraire, convertir facilement vos vidéos en utilisant des commandes directes sous la console MS-DOS.
Consulter l’article si vous souhaitez simplifier lancer des commandes FFmpeg dans la console MS-DOS - Modifier la variable Path sous windows afin d’exécuter des commandes en MS-DOS
Vous trouverez des versions compilées de FFMPEG sur ce site en téléchargement.
http://esby.free.fr/CelticDruid/mirror/ffmpeg/
Il vous faudra aussi télécharger 7-Zip le logiciel nécessaire à la décompression de FFmpeg. Ce logiciel vous permettra de décompresser l’archive contenant FFmpeg, Winrar doit piuvoir faire l’affaire mais ce n’est pas sûre…
http://www.7-zip.org/
Pour aller plus loin
convertir, encoder, extraire, ffmpeg, flv, Vidéo
