Anthilemoon

Vous avez envie de vous créer un blog tout en japonais, hébergé par un serveur japonais, au sein d’une communauté japonaise ? Yaplog est la solution. Tout est en japonais, c’est génial, mais quand on ne sait baragouiner que des konnichiwa, on fait comment ?

On suit le guide ^^

Enregistrement

1) Rendez-vous sur Yaplog.

2) Cliquez sur l’image suivante :

3) Vous arriverez sur la page suivante :

Remplissez les champs tels qu’indiqué sur l’image. Seuls les champs munis d’une étoile sont obligatoires.

Attention : Votre adresse e-mail servira ensuite à activer et à accéder à votre compte. Utilisez une adresse valide.

4) Plus bas sur la même page, vous verrez ceci :

Remplissez encore les champs comme indiqué sur l’image.

Pour le code postal, vous pouvez mettre n’importe quoi, mais respectez le nombre de chiffres demandés (3+4).

5) Cochez les deux cases apparaissant en dessous, puis cliquez sur le bouton :

Un message de validation va vous être envoyé par email. Cliquez sur le lien. Vous vous retrouverez sur la page d’accueil ou sur une page vous demandant de vous connecter. Dans les deux cas, entrez votre adresse e-mail, votre mot de passe, puis cliquez sur le bouton en bas de la page.

Découverte

Voilà, vous possédez un Yaplog ! Cependant, il n’est pas facile au premier abord de s’y repérer. Visitons le menu ensemble.

• Accueil : Vous permet d’avoir une vue d’ensemble de l’activité de votre blog, avec le nombre de pages vues, le nombre de commentaires, etc.
• Nouvel Article : Vous permet de poster un nouvel article sur votre blog. Vous pourrez activer le html dans le menu à gauche une fois rendu sur cette page.
• Archives : Vous permet de visualiser tous vos articles postés, mais aussi de les modifier.
• Menu : Vous permet de configurer le menu de qui apparait sur votre blog. Vous pouvez ajouter des catégorie, changer l’ordre dans lequel apparaissent les boîtes, d’afficher des liens, choisir une nouvelle horloge, mais aussi renommer les catégories en français ou comme vous le souhaitez pour vous aider à vous y retrouver.
• Design : Vous permet de modifier l’aspect de votre blog. Une fonction avancée html/css est disponible pour ceux et celles qui maîtrisent ce langage.
• Règlages : Vous permet de paramétrer votre blog, de changer son titre, de choisir l’ordre et le nombre de billets à afficher par pages, etc.

La boîte à outils

Je ne peux pas faire le tour ici de toutes les fonctionnalités qu’offre Yaplog, ce serait trop long de vous faire une copie d’écran de chaque lien et de vous le traduire, je vais donc ensuite vous donner quelques idées d’outils qui pourront vous faciliter la vie et vous permettre de profiter au mieux de votre blog.

• Yahoo Babelfish : Un traducteur très puissant et gratuit dans lequel vous pourrez copier/coller du texte japonais pour le traduire en anglais, ou l’inverse. Très utile lorsqu’on ne sait pas où mène un lien ou si on en comprend pas un commentaire que nous a laissé une japonaise.
• JPinput : Utilitaire en ligne permettant d’écrire directement en japonais sans disposer d’un clavier japonais.
• JWPce : Pour ceux et celles qui désirent un outil à installer sur son ordinateur, JWPce est un programme proposant les mêmes fonctionnalités que JPinput, mais sur son ordinateur, avec évidement plus de fonctionnalités.

Pour finir

Vous pouvez faire l’utilisation que vous voulez de Yaplog. Certains l’utilisent pour être sûrs que leurs amis ne tombent jamais sur leur blog, d’autre parce que le choix de designs, de smileys et de fonctionnalités est beaucoup étendu que celui qu’on peut trouver sur les hébergeurs de blogs francophones.

Personnellement, je pense que c’est une bonne occasion d’améliorer son japonais, voire de se lancer.

Vous pouvez jeter un coup d’oeil à mon propre Yaplog ici.

Merci de me laisser un message ! N’hésitez pas à me donner le lien de votre nouveau Yaplog sur le forum (ou à m’y demander de l’aide si un point n’est pas assez clair) !

Tags :tutoriel

C’est bien joli d’écrire son texte directement dans la page puis d’ajouter ensuite un module de commentaire, mais comment faire lorsque l’on veut poster un article, que l’on est pas sur son PC et que l’on a pas de FTP ? Rien, on ne peut rien faire. De même, si on s’emmêle les pinceaux avec toutes les balises HTML, on ne fait pas grand chose.

Heureusement, un gentil petit génie a pensé à nous offrir Cutenews, un module de news qui permet, une fois installer, de poster normalement des articles comme dans un blog classique.

En plus de cela, il offre de nombreuses fonctionnalités : smilies, système d’archivage, modification de l’apparence, champs (pseudo, e-mail, site) à remplir par les visiteurs qui commentent, etc.

L’installation n’est pas bien compliquée si vous suivez attentivement ces quelques instructions !

Téléchargement

Tout d’abord, cela vous paraitra évident, téléchargez Cutenews en allant sur CutePHP et en cliquant sur « CuteNews.1.4.5.zip » (c’est la version actuelle à l’heure où j’écris ce tutorial, elle est susceptible de changer) dans la partie Download.

Dézippez le dossier sur votre disque dur.

Installation

Quelques étapes toutes simples… Que je me suis contentée de traduire du fichier README.txt xD

• Créez un dossier sur votre serveur. Je vous suggère de l’appeler Cutenews.
• Uploadez l’intégralité du contenu du dossier « cutenews.1.4.5.zip » dans le dossier que vous venez de créer à l’étape 1.
• Vous devez CHMOD le dossier cutenews/data/ et les fichiers qu’il contient. Pas de panique, je vous donne quelques explications ! Pour cela, faite clic droit sur le dossier data et « Attributs du fichier ». Tapez « 777″ dans le champs qui s’affiche. Et la bonne nouvelle, c’est que vous n’êtes pas obligés de le faire pour tous les fichiers, mais seulement pour les dossiers. En tout cas, c’est ce que je fais toujours, et ça marche à merveille ^^
• Ensuite, ouvrez votre navigateur et tapez dans la barre d’adresse http://votresite.com/cutenews/index.php. Vous n’avez plus qu’à vous laisser guider !

Dernières étapes

Pour faire apparaitre les news sur votre page, par exemple votre page d’index, ouvrez index.html ou index.php et copiez-collez le code suivant à l’endroit où voulez les faire apparaitre :

<?PHP
 $number = « x« ;
 include( »cutenews/show_news.php »);
?>

Vous devez remplacer le x par le nombre de news à afficher par page.

Pour personnaliser le style de Cutenews, vous pouvez aller dans Options >> Edit Templates et modifier ainsi parties par parties l’apparence des articles. Vous pouvez évidement utiliser les class de votre feuille de style !

Et voilà, enjoy ! N’oubliez pas de penser à me lier si vous utilisez ce tutorial =)

Edit

J’ai reçu beaucoup de mails me demandant de l’aide depuis que j’ai ajouté ce tutorial. Je vais donc ajouter quelques indications supplémentaires :

• Avant de vous lancer dans l’installation, vérifiez que votre hébergeur accepte le PHP. Par exemple, Voila ne l’accepte pas. Vous pouvez vous tourner vers Free par exemple.
• Toutes les étapes de l’installation se passent sur votre serveur. Si vous ne trouvez pas Attributs du fichier c’est parce que vous le cherchez dans le menu contextuel de votre ordinateur.
• Il semblerait qu’il y ait quelques soucis au niveau des commentaires avec IFrance. Je ne sais malheureusement pas d’où ça vient, mais par ailleurs, le script fonctionne parfaitement.
• Si vous n’y arrivez toujours pas, postez un message sur le forum, je vous répondrai dans les plus brefs délais.

Tags :tutoriel

Depuis que le site a acquis un nom de domaine, je reçois pas mal de mails me demandant comment faire, s’il faut la carte bleue, est-ce que ça coûte cher, etc.

Je vais donc essayer de vous aider au mieux à vous faire un nom sur le toile.

Tout d’abord, posez vous les questions essentielles :

• Est-ce que vous êtes prêts à investir de l’argent ?
• Si oui, est-ce que Papa et Maman pourront vous faciliter les choses avec la carte bleue [vous les remboursez en espèce] ?
• Si non, est-ce que vous acceptez la publicité ?

Il y a donc le cas argent sans parents, argent avec parents, pas d’argent sans parents et pas d’argent avec parents.

Il y a une solution pour chacun de ces cas.

Argent sans parents

Jexiste vous propose un nom de domaine en .com .net ou .org pour plusieurs appels que vous pouvez faire depuis votre téléphone portable. Pas besoin de vos parents ! Sachant qu’un appel coûte 1.85 Euro en France, qu’il crédite votre compte de 100 points, qu’il faut 800 points pour enregistrer un nom de domaine, et ensuite 50 points par mois pour le maintenir… Faites le calcul ! C’est possible mais beaucoup plus cher sans l’aide des parents !

Argent avec parents

C’est la possibilité la plus intéressante ! Là, de nombreux solutions vous sont offertes. Je vous recommande 1and1 pour sa simplicité, ses prix [je paye juste 7€16 par an pour le nom de domaine d'Anthilemoon], sa flexibilité [on peut aisément changer de formule] et ses options [redirection mail, sous-domaines, accès FTP, etc.].

Pas d’argent sans parents

Mon ou ma pauvre, c’est la misère ^^’ Heureusement pour toi, il existe des redirections gratuites et non professionnelles. J’en ai selectionné deux pour toi qui sont très connues, mais en faisant une recherche sur Google tu en trouveras d’autres.

Il y a le bien connu New.fr, qui est très complet et sans publicité : des noms de domaines non professionnels du type « .new.fr » ou « .be.cx » mais aussi des noms de domaine payants. Je ne vous conseille que la partie gratuite, car il y a mieux pour les noms de domaines payants.

Chez Xdir, vous aurez un nom de domaine gratuit avec publicité sous forme d’une frame dont vous pourrez changer la couleur pour l’adapter à votre design, avec une extension moins professionnelle du type « fr.tc » ou « xdir.fr », etc. Les statistiques sont par contre très complètes.

Pas d’argent avec parents

C’est bizarre comme situation, mais pourquoi pas ? Des parents qui sont d’accord mais qui n’ont pas trop envie de s’en mêler… C’est juste que pour ces sites il faudra en général se présenter comme majeur, et les informations pourront être vérifiées au même titre que pour un domaine payant.

Et pour cause : c’est un nom de domaine payant que vus ne payez pas puisqu’il est financé par la publicité apparaissant sur votre site.

Gratis Domaine vous permet d’avoir un nom de domaine gratuit en .fr « .com », « .net », « .org », « .info » ou « .biz » GRATUITEMENT en l’échange de l’affichage d’une bannière 468×60px sur votre site et de la lecture régulière de mails publicitaires.

Domaine Gratuit est très bien, mais un peu plus pointilleux sur les inscriptions. Votre site devra entre autre avoir 2000 visiteurs par mois, être ouvert depuis 2 mois, avoir une mise à jour par mois minimum, être compatible avec IE, Netscape, etc. Vous trouverez toutes les conditions sur le site, mais c’est le même principe : gratuit avec un nom de domaine « .net », « .org » ou « .com » et pas de bannière de pub, juste une pop-up !

Vous hésitez encore ? N’hésitez pas à demander conseil sur le forum !

Tags :tutoriel

Vous en avez assez de prendre vos designs sur des sites de graphisme, et aimeriez bien avoir quelque chose de vraiment personnalisé ? Comme on dit, on est jamais mieux servi que par soit même.
Ce tutorial vous propose de suivre étape par étape la création d’un layout en div. Évidement, il est très simple, mais il vous sera ensuite permis de vous améliorer quand vous aurez compris le principe !

Logiciels nécessaires :
- Photoshop CS2 9.0
- Bloc-note

PARTIE I – Le design

Ouvrez votre Photoshop et créez un nouveau fichier [Ctrl+N]. Comme options, choisissez : Largeur [750 pixels], Hauteur [600 pixels], Fond [Blanc].
Choisissez une image, de préférence un PNG transparent, et ouvrez le. Copiez-collez la sur votre fond blanc.

Grâce à l’outil « Transformation Manuelle », dans le menu Edition, recadrez l’image pour qu’elle soit située de cette façon :

Avec l’outil pipette sélectionnez une couleur sur votre image. J’ai choisis ce rose.
Choisissez maintenant l’outil de sélection rectangulaire et seclectionnez deux cadres en utilisant la touche « Maj » comme ci-dessous :

Puis remplissez avec ceci les deux caddres, ce qui donne ceci :

Prenez maintenant une autre couleur, positionnez vous sur le fond, et répétez la même opération de remplissage.
Vous pouvez ensuite ajouter tous les effets de texture, de transparence ou de brushes que vous voulez, ajouter du texte à votre guise, etc.

Voici ce que j’obtiens :

Grâce à l’outil de découpage séparez le layout horizontalement en plusieurs images. Faites click droit, puis « diviser la tranche ». Choisissez le nombre de tranches que vous souhaitez, c’est indifférent.

Enregistrez pour le web le tout, avec des images en JPEG et une qualité de 60. Nommez le fichier « index.html ».

La première partie est terminée !

PARTIE II – Le codage

Ouvrez index.html. Juste après

<!-- ImageReady Slices --> copiez collez ceci :

<div style="position: absolute; top: XXXpx;<br /> left: XXXpx; top: XXXpx; width: XXXpx"><br /> Tes liens ici</p> </div> <div style="position: absolute; top: XXXpx;<br /> left: XXXpx; top: XXXpx; width: XXXpx"><br /> Ton texte ici</p> </div> <p>

Maintenant, retournez sur Photoshop. Selectionnez la zone où vous voulez voir apparaitre votre menu grâce à l’outil selection rectangulaire . Regardez dans la fenêtre info les nombres qui apparaissent.

Remplacez les XXX du code donné ci-dessus par les nombres correspondants :
Top : Y
Left : X
Width : L

Faites de même pour le rectangle de contenu.

Maintenant, ajoutez ce code dans la balise « body » :

background=&nbsp;&raquo;images/fond.jpg&nbsp;&raquo;

Retournez de nouveau sur Photoshop, et utilisiez l’outil de sélection rectangulaire pour sélectionnez une ligne tout en bas de votre design. Copiez-collez la dans un nouveau document et enregistrez-là sous « fond.jpg » dans le dossier Images.

Il faut maintenant que ce fond se répète. Pour cela, insérez le code suivant juste avant la balise « head » :

<br /> <style> body { background-repeat: repeat-y; } </style> <p>

Modifiez la couleur de fond ici :

bgcolor=&nbsp;&raquo;#000000&#8243;

Le tour est joué !

Si vous rencontrez un problème avec ce tutorial, n’hésitez pas à me laisser un commentaire !

Tags :tutoriel

Et oui, combien de fois vois-t-on une belle création, un beau texte, que l’on aimerait commenter, et combien de fois est-ton obligé de revenir misérablement au tagboard ?

Ce tutorial est là pour mettre fin aux articles sans modules de commentaires, simplement et sans prise de tête. Suivez le guide =)

Installer les commentaires

Rendez vous sur Haloscan et cliquez sur Register :

Puis connectez vous, et remplissez les champs demandés à l’étape 1 comme ci-dessous :

Mettez le code suivant juste avant

</head> dans toutes les pages où se trouvent des articles à commenter.

<script type="text/javascript" src="http://www.haloscan.com/load/exemple"> </script>

Mettre un lien de commentaire

Mettez le code suivant à l’endroit où vous voulez voir apparaitre un lien de commentaire :

<a href="javascript:HaloScan('Name');" target="_self"><script type="text/javascript">postCount('Name');</script></a> | <a href="javascript:HaloScanTB('Name');" target="_self"><script type="text/javascript">postCountTB('Name'); </script></a>

Vous pouvez supprimer la seconde partie du code si vous ne voulez pas de trackbacks.

Personnaliser les modules de commentaires

Cliquez sur .

Vous pourrez alors modifier ceci :

Window settings : L’ordre des commentaires / Largeur / Hauteur / Ouverture d’une pop-up / Heure / Titre

Comment link text : Le nom du lien de commentaires

Trackback link text : Le nom du lien de trackbacks

Advanced settings : L’encodage / Le format de la dat

Notification settings : La notification par e-mail

Cliquez sur .

Vous pourrez choisir une skin à votre goût.

C’était pas si dur que ça, hein ?
Si néanmoins vous avez rencontré des difficultés, le forum est fait pour cela =)

Crédits

Tags :tutoriel