Cherche rédacteurs de Tutoriels

9 messages   •   Page 1 sur 1
Eléphant du PHP | 83 Messages

15 sept. 2013, 19:24

Bonsoir,

Je suis à la recherche de rédacteurs de Tutoriels Informatique Bénévole (pour le moment !), j'ai presque fini la plateforme et commencé à rédiger quelques Tutoriels que je juge assez bon (reste à savoir l'avis des lecteurs).

Le but ici n'est pas de faire un autre site qui fait des articles présentatifs et ou des articles d'actualité, il s'agit de rédiger des tutoriels solides aidant nos lecteurs francophones a évolué, le projet offrira des tutoriels gratuit pour un moment a précisé puis on verra un système pour avoir des tutoriels prémiums moyennant une rémunération symbolique qui pourra devenir un revenu pour le maintien du projet et présenté un revenu plus ou moins suffisant pour nos rédacteurs.

Je sais que la rédaction de Tutoriels n'est pas assez attirante comme activité mais, reste à voir le nombre de blogs anglophones qui offre un appui important par rapport aux supports francophones.

Bon, le lancement officiel du projet est envisagé dans +ou- 1 mois, donc si vous êtes intéressé veuillez me contacté par MP ou email : ([email protected]) ou skype : biboyass ou en répondant à ce message.

Merci

Eléphant du PHP | 83 Messages

12 févr. 2014, 10:00

Bonjour,

Je continus le projet "Plateforme de tutoriels Informatique francophone", maintenant j'ai acquis le nom de domaine www.nettuto.com et j'ai installé la plateforme dessus, je suis encore à la recherche de rédacteurs de Tutoriel (bénévoles ou partenaires).

Pour plus de détails veuillez répondre à ce message ou par email ([email protected])

Cordialement,

Eléphant du PHP | 83 Messages

13 févr. 2014, 09:27

Bonjour,

Voilà un extrais de mon premier Tutoriel, Intitulé "JQuery : Créez votre propre Plugin."

Pouvez-vous me donner des conseilles?

IE : je suis encore à la recherche de rédacteurs, administrateurs, modérateurs pour le projet.

Merci,

Début de l'extrais:

Les Plugins JQuery

Les Plugins nous permettent d’étendre les fonctionnalités de la bibliothèque JQuery, il existe bon nombre de Plugins qui fournissent des options pour pratiquement tout ce dont vous pourriez avoir besoin dans votre code JavaScript. Le codage d’un Plugin peut être simple en se résument à une fonction JavaScript ou bien assez complexe en offrant des fonctionnalités avancées, en fait tout dépend du besoin du projet en question.
Objectifs

Dans ce tutoriel, nous allons codé un Plugin JQuery simple mais hautement configurable qui ajoute un effet de survole aux images qui composent un élément choisit. Notre Plugin utilise un masque composé d’une icône et d’une couleur d’arrière-plan, ces deux éléments serons paramétrables pour ajouter un niveau de flexibilité a notre Plugin.

Squelette de notre Plugin

Pour notre Plugin nous allons utiliser le squelette suivant :


[javascript];(function( $, window, document, undefined ){

// constructeur du Plugin
var Plugin = function( elem, options ){
this.elem = elem;
this.$elem = $(elem);
this.options = options;

// Utilisation des HTML5 data attributes
// Ainsi notre Plugin pourra extraire les paramètres a partir de ces attributs
// Par exemple :
// <div data-plugin-options='{"option":"valeur"}'></div>
this.metadata = this.$elem.data( "plugin-options" );
};

Plugin.prototype = {
defaults: {
option: "valeur!"
},

init: function() {
// Surcharge des valeurs par défaut par ceux passé en paramétre!
this.config = $.extend({}, this.defaults, this.options, this.metadata);

// Utilisation:
// $('#elem').plugin({ option: 'Valeur!'});
// ou
// var p = new Plugin(document.getElementById('elem'),
// { option: 'Valeur!'}).init()
// oubien, définir manuellement les valeur par defaut :
// Plugin.defaults.option = 'valeur!'

this.initialise();
return this;
},

initialise: function() {
// ie : afficher la valeur de l'option par defaut
// console.log(this.config.option);
}
};

Plugin.defaults = Plugin.prototype.defaults;

$.fn.plugin = function(options) {
return this.each(function() {
new Plugin(this, options).init();
});
};

})( jQuery, window , document );
[/javascript]

Ce modèle de Plugin fait partie d’une collection de squelettes offert gratuitement par « Zeno Rocha » que vous pouvez la télécharger gratuitement ici : https://github.com/jquery-boilerplate/jquery-patterns

Cette collection offre des squelettes adaptés a plusieurs situations d’utilisation et de codages de Plugin Jquery. Le code précédent est le modèle adapté au codage de Plugins qui offrent une flexibilité maximale de paramétrage que vous pouvez trouver dans le package sous le nom de « jquery.highly-configurable.plugin.boilerplate.js »

Le code précédent est suffisamment commenté pour vous permettre de comprendre sa structure mais, si vous avez des difficultés à assimiler n’importe quel bout de code veuillez ajouter un commentaire pour pouvoir vous répondre.

Le Plugin

Il est temps de commencer le codage de notre plugin

Pour commencer nous allons nommer notre Plugin « surveff » pour cela il faut renommer la variable « Plugin » et/ou « plugin » en « Surveff » dans le fichier « surveff.js » , notez bien que vous pouviez choisir le nom que vous voulez pour le vôtre, mais il faut choisir toujours un nom en relation avec le fonctionnement du Plugin.

Maintenant il faut avoir un fichier HTML (index.html), un fichier CSS (style.css) et notre fichier JavaScript (surveff.js) donc notre structure fichier ressemblera à :
image ici
Dans le <body> de notre fichier HTML, ajoutez le code suivant :
...
<div>
   <div>
      <span></span>
      <img src="" />
   </div>
</div>
...
Cette structure est simple, nous avons un conteneur pour nos images:

...
<div></div>
...
Ce conteneur englobe toutes nos images et c’est lui que notre Plugin affectera, bien évidemment c’est le choix du tutoriel mais, vous pouvez étendre la zone d’activité du Plugin à la totalité du document, on verra ça plus loin.

Puis nous avons un autre conteneur:

...
<div></div>
...
Qui regroupe un élément:
...
<span></span>
...
Qui sera le masque a appliqué sur l’image, et puis l’image en question:
...
<img src=" " />
...
Maintenant, nous allons avoir besoin de trois images:

Une qui sera notre image principale sur laquelle notre Plugin va ajouter l’effet de survole.
Une deuxième qui sera l’image au centré dans le masque.
Une troisième qui va nous permettre de tester la possibilité de changer l’image au centre du masque via les paramètres.

Dans notre exemple, nous allons utiliser ces deux images comme image principale pour tester si notre plugin adapte le masque sur des images de dimensions différentes:

Fin de l'extrais:

Eléphant du PHP | 83 Messages

15 févr. 2014, 22:00

Bonsoir,

Me revoilà, je suis sur le deuxième tutoriel intitulé " Wordpress : Créer un widget pas à pas " et voici un extrais (personne n'est intéressé):

DEBUT DE L'EXTRAI :


Wordpress offre deux composantes de haute importance (les Plugins et les Widgets) pour améliorer et renforcer les fonctionnalités de votre Blog, dans la plupart des cas les utilisateurs n'arrives pas à différencier entre ces deux composantes alors qu'ils les utilisent couramment dans leurs blogs.

Dans ce tutoriel, nous allons codé pas à pas un widget "article aléatoire", qui permet de faire défiler un nombre paramétrable de tutoriels issus de notre blog en utilisant un effet fadein/fadeout basé sur JQuery.
Différence entre Plugin et Widget

Un plugin est un composant qui lorsqu'on l'installe dans wordpress permet d'ajouter de nouvelles fonctionnalités à votre blog, il permet d'accroitre l'efficacité de votre système et peut parfois avoir un impact sur l'interface utilisateur ou d'administration de votre blog.

Un widget en revanche, est un composant qui se place dans les sidebar de votre blog, il ne touche généralement pas aux fonctionnalités du système, mais il ajoute de nouveaux éléments au thème de votre blog permettant d'améliorer l'interaction des utilisateurs avec votre système.

Ainsi, un widget est un plugin que vous pouvez placer dans l'un de vos sidebar, il permet a vos utilisateurs d'interagir plus facilement avec votre blog. Un plugin est un script qui permet d’améliorer les fonctionnalités de base de wordpress.
Structure de base d'un Widget Wordpress

Un widget possède une structure spécifique pour qu'il soit intégré à wordpress, la structure suivante représente une structure basique d'un widget :
/*
Plugin Name: Mon Widget
Plugin URI: http://www.nettuto.com/
Description: Une squelette de widget
Version: 1.0
Author: Bibos
Author URI: http://www.nettuto.com/
License: GPL2
*/

class Mon_Widget extends WP_Widget {

	// constructeur
	function Mon_Widget() {
		/* ... */
	}

	// formulaire du widget
	function form($instance) {
	/* ... */
	}

	// mise à jour du widget
	function update($new_instance, $old_instance) {
		/* ... */
	}

	// affichage du widget
	function widget($args, $instance) {
		/* ... */
	}
}

// enregistrement du widget dans wordpress
add_action( 'widgets_init', 'enregistrer_mon_widget' );
function enregistrer_mon_widget() {
register_widget( 'My_Widget' );
}
Nous allons utiliser cette structure pour la réalisation de notre widget, avant de commencer étudions un peu cette structure.

Au début, nous avons un commentaire composé de plusieurs attributs :
/*
Plugin Name: Widget
Plugin URI: http://www.nettuto.com/
Description: Une squelette de widget
Version: 1.0
Author: Bibos
Author URI: http://www.nettuto.com/
License: GPL2
*/
Ce code commenté représente la définition de notre widget, wordpress l'utilise pour identifier le widget et ces paramètres comme le nom du widget, sa description, l'auteur du widget...

Comme vous l'avez certainement remarqué, il y a mention du terme Plugin et non Widget dans la définition du widget ! c'est normal, car n'oublions pas qu'un Widget n'est autre qu'un Plugin spécial, mais comment wordpress différencie entre un Widget d'un Plugin ? c'est ce qui nous ramène à l'étude du reste du code, après la définition du widget nous avons une classe PHP :
...
class Mon_Widget extends WP_Widget {

	// constructeur
	function Mon_Widget() {
		/* ... */
	}

	// formulaire du widget
	function form($instance) {
	/* ... */
	}

	// mise à jour du widget
	function update($new_instance, $old_instance) {
		/* ... */
	}

	// affichage du widget
	function widget($args, $instance) {
		/* ... */
	}
}
...
Cette classe est le code principal du widget c'est elle qui définit le comportement du widget et ces paramètres.

Tout d’abord, il faut attribuer un nom a notre classe, généralement on choisit un nom en relation au fonctionnement du widget moyennant un préfixe personnel pour éviter toute confusion avec d’autres widgets.

Notre classe est composé d'un constructeur :
...
// constructeur
function Mon_Widget() {
  /* ... */
}
...
Dans notre cas le constructeur de la classe "Mon_Widget" est utilisé pour initialisé quelques paramètres nécessaire a wordpres pour installé notre widget, parmi ces paramètres on trouve :

Le nom du widget.
La description du widget.

Puis nous avons une fonction "form" :
...
// formulaire du widget
function form($instance) {
  /* ... */
}
...
Cette fonction définit le formulaire de paramétrage du widget qui se trouve dans "Apparence/Widgets" en bref c'est avec ce formulaire qu'on enregistre les paramètres qu'utilise notre widget.

Puis nous avons une fonction 'update" :
...
// mise à jour du widget
function update($new_instance, $old_instance) {
  /* ... */
}
...
Cette fonction permet l'enregistrement et la mise à jour des paramètres du formulaire définit par la fonction "form" du widget.

Ensuite, nous avons la fonction "widget" :
...
// affichage du widget
function widget($args, $instance) {
  /* ... */
}
...
Cette fonction s'occupe de la partie visuelle du widget, elle définit ce que l'utilisateur finale verra dans la partie frontale du système.

A ce stade, nous avons défini la structure basique d'un widget et nous avons étudié de quoi elle est composée. Passons maintenant au codage de notre widget, comme dit précédemment, nous allons codé un widget qui va défiler un contenu issu de notre blog on utilisant l'effet fadein/fadeout JQuery.

FIN DE L'EXTRAI

Je cherche encore des partenaires, quelqu’un est intéressé?
MERCI

Mammouth du PHP | 2278 Messages

18 févr. 2014, 11:31

Voici une version personnelle du premier extrait:
Début de l'extrait:

Les Plugins JQuery

Les Plugins permettent d’étendre les fonctionnalités de la bibliothèque JQuery; il existe bon nombre de Plugins qui fournissent des options pour presque tout ce que peut nécessiter votre code JavaScript.

Dans ce tutoriel, nous allons coder un Plugin JQuery simple mais hautement configurable qui ajoute un effet de survol aux images qui composent un élément choisi.Il utilise un masque composé d’une icône et d’une couleur d’arrière-plan, paramétrables pouren augmenter la flexibilité.

Squelette du Plugin
La collection de squelettes de « Zeno Rocha » que vous pouvez télécharger gratuitement ici : https://github.com/jquery-boilerplate/jquery-patterns offre des squelettes adaptés à plusieurs situations d’utilisation et de codage de Plugins Jquery. Le code qui va être utilisé est le modèle adapté au codage de Plugins offrant une flexibilité maximale de paramétrage, que vous pouvez trouver dans le package sous le nom de « jquery.highly-configurable.plugin.boilerplate.js »

reproduction du code

Ce code est suffisamment commenté pour permettre d'en comprendre la structure mais, si vous avez des difficultés à assimiler n’importe quel bout de code <veuillez ajouter un commentaire pour pouvoir vous répondre. pas clair>

Le codage
Changement de nom
Enregistrer le squelette sous le nom « surveff.js », puis y renommer la variable « Plugin » et/ou « plugin » en « Surveff », ou dans tout autre nom de votre goût, mais il vaut mieux choisir toujours un nom en relation avec la fonction du Plugin.

En plus du fichier JavaScript, surveff.js, on doit créer un fichier HTML, index.html et un fichier CSS, style.css.
La structure des fichiers ressemble à :

image ici
Dans la partie <body> du fichier HTML, ajoutez le code suivant :
Vanitas vanitatum et omnia vanitas
Mes derniers livres :
Sauvez les Mots chez BoD,
Tous les chemins mènent à ROM chez BoD

Eléphant du PHP | 83 Messages

23 févr. 2014, 23:28

Merci sirakawa :)

J'ai terminer mon deuxième tutoriel, et je viens de commencer mon troisième intitulé :

CodeIgniter : votre propre squelette de projets

Encore à la recherche de partenaire :)

Captures d'écran :
112.png
113.png
114.png
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Eléphant du PHP | 83 Messages

25 févr. 2014, 02:05

Bonjour,
J'aimerai avoir vos avis à propos du nouveau logo du projet Plateforme Tutoriel "nettuto" :
logo.png
Merci
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Eléphant du PHP | 83 Messages

26 févr. 2014, 02:02

Bonsoir,
Je viens de finir la partie 1 de la série : CodeIgniter : votre propre squelette de projets
et voici un screan du prochain tutoriel intitulé : Jquery Plugin - Menu Déroulant
1.png
Des avis?

Merci
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Eléphant du PHP | 83 Messages

27 févr. 2014, 00:46

Bonsoir,

J'ai le plaisir de vous informer que le lancement officiel du projet nettuto.com est prévu pour le 01 mars 2014.

je suis encore à la recherche de partenaires.

Merci

9 messages   •   Page 1 sur 1