Jquery & Php: Créer une arborescence de fichiers

Créer rapidement une interface web en Jquery permettant de mettre à disposition des fichiers est  facile à mettre en place. Demonstration avec JqueryFileTree!

Démonstration de JqueryFileTree

L’utilisation du plugin JQueryFileTree nécessite Jquery, bien entendu,  ainsi que JQueryEasing (pour les animations).

Téléchargez donc le plugin JQueryFileTree ainsi que ces 2 fichiers et placez les dans le répertoire de votre choix.

Créez les liens vers ces fichiers dans la section head de votre page index.php

<link href href="css/style.css" type="text/css" />;
<link rel="stylesheet" href="css/jqueryFileTree.css" type="text/css" />;
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3"></script>;
<script type="text/javascript" src="js/jqueryFileTree.js"></script>;

Ensuite, créez un élément <div> ayant pour id « container_id » par example, vous pouvez alors appeler le script avec:

<script type="text/javascript">
	$(document).ready( function()
	{
			$('#container_id').fileTree({
				root: './files/',
				folderEvent: 'click',
				expandSpeed: 750,
				collapseSpeed: 750,
			},  function(file) {
					open(file);
			});
	});
</script>;

N’oubliez pas de changer l’option « root: » en choisissant le dossier qui contiendra les fichiers à partager.

Par défaut, le connecteur php est utilisé (jqueryFileTree.php) , mais vous pouvez aussi utiliser un des nombreux connecteurs écrit dans différents languages: ASP, ASP.NET, JSP, Ruby, Python… Pour cela, vous devez ajouter à la liste des options lors de l’appel du plugin:

script: 'jqueryFileTree.py'

Résumé des paramètres que vous pouvez utiliser:

Paramètre Description Valeur par défaut
root dossier racine pour l’affichage /
script l’emplacement du fichier AJAX à utiliser coté serveur jqueryFileTree.php
folderEvent Evénement déclenchant Développer/Réduire click
expandSpeed Vitesse à laquelle les branches s’élargissent (en millisecondes), -1 pour n’utiliser aucune animation 500
collapseSpeed Vitesse à laquelle se replient les branches (en millisecondes), -1 pour utiliser aucune animation 500
expandEasing Effet progressif à l’ouverture none
collapseEasing Effet progressif à la fermeture none
multiFolder Limiter ou non le navigateur à un sous-dossier à la fois true
loadMessage Message à afficher pendant le chargement (peut être du HTML) Chargement…

Voici une archive avec un exemple de base: JQueryFileTree_example.zip

Vous pouvez aussi voir une démo sur mon site sur cette page

Facebook Purity: The art of hidding Facebook’s horrors Facebook Purity: l’art de nettoyer les horreurs de FB

I think i don’t have to introduce Facebook, everyone knows the social network which spread on the web with its 500 000 registered users.

I don’t like the today’s Facebook, private life exhibition, free information about peoples, it becomes a youth place with bad society place; and unfortunately, not only the young people. Every groups, apps or theses « like » button which appeared everywhere on the web  exasperate me: « When are you going to die », « How many children do you’ll have », « Join this group if you have letters on your name » or even theses « pseudo »humanitarian aid groups… But does the 15000 people who joins theses groups gives 5 euros for this goal? I’m not really sure, and it’s not on clicking on « like » button that will change anything.

So, this little introduction is here to show you a indispensable tool for me:  Facebook Purity.

Are you bored to see everyday your FB Homepage polluted by every of theses groups or useless applications? Add the Facebook Purity to your web navigator to never see this again! (it’s not compatible with Internet Explorer, but i don’t consider it as a web navigator 😛 )

Installation

F.B. Purity for Firefox:

  • Open Firefox
  • Install the GreaseMonkey addon (…and restart Firefox to complete the installation)
  • You can now install the script by clicking on: F.B Purity

F.B. Purity for Chrome:

  • Just install the F.B Purity script, Google Chrome convert it on a Chrome extension!

I don’t try on Safari and Opera, but the details are on the officiel website .

Configuration

When you’re going to your Facebook homepage, you have an new menu at the top of your news:

FB Purity menu
Le menu FB Purity sur votre page Facebook

You get a menu which show how many applications are hidden and the « extras », the groups, likes etc…

With a clic on F.B Purity, you get an easy to read menu:

FB Purity config
FB Purity configuration

You can tick every elements you want to hide.

The other menu is here to hide the right menu, as sponsors, suggestions of pages or friends:

FBPurity config 2

You can now hide every elements which are not necessary to your FB news. If it’s not enough, you can delete your Facebook account. I think seriously about it, but many people use only it to communicate, so we ‘ll have no more news of certains person if i do it.

Je ne présente plus Facebook, tout le monde connait le réseau social qui nous a envahi avec son demi-million d’utilisateurs inscrits.

Je n’aime pas le Facebook d’aujourd’hui,  passoire à informations, exhibition de vie privée, c’est devenu un repère à petits jeune en mal d’identité; enfin, pas que les jeunes malheureusement. Tout ces groupes, applications, ou même ces boutons « like » qui sont apparu partout sur la toile m’exaspèrent: « Découvre comment tu vas mourir en répondant à ces 3 questions » , « Combien d’enfants auras-tu » ,  « Rejoins ce groupe si tu as des lettres dans ton prénom » ou même encore des pseudo groupes humanitaires… mais est-ce que les 15000 utilisateurs de ce genre de groupes ont seulement fait 5 euros de don pour cette cause? pas sur, et c’est pas en cliquant sur un bouton « J’aime »  que ça va faire avancer le schmilblick.

Bref, toute cette petite introduction pour vous présenter un outil qui est vite devenu indispensable selon moi: Facebook Purity.

Vous en avez marre de voir tout les jours votre page d’accueil polluée par tous ces groupes, et autres applications inutiles? pour y remédier, rien de plus simple, vous ajoutez le script de Facebook Purity selon votre navigateur web (pas compatible avec Internet Explorer, mais bon, je ne le considère pas comme un navigateur 😛 )

Installation

F.B. Purity pour Firefox:

  • Ouvrez Firefox
  • Installez l’addon GreaseMonkey (vous devez redémarrer Firefox pour finir l’installation)
  • Vous pouvez alors installer le script F.B Purity

F.B. Purity pour Chrome:

  • Installez seulement le script F.B Purity, Google Chrome se charge de le convertir en extension Chrome!

Pour Opera et Safari, j’ai pas testé, la procédure est détaillée sur le site officiel.

Configuration

En allant sur votre page Facebook, vous vous retrouvez avec un nouveau petit menu au dessus de vos news:

FB Purity menu
Le menu FB Purity sur votre page Facebook

Vous avez donc un menu présentant les applications cachés ainsi que les « extras » c’est à dire, les groupes rejoints, les « likes » etc…

En cliquant directement sur F.B Purity, vous obtenez un menu assez compréhensible:

FB Purity config
Menu de configuration de FB Purity

Vous pouvez donc cocher ici tout les éléments que vous voulez cacher (pas besoin d’être un as en anglais pour comprendre je pense 🙂 )

L’autre menu consiste à cacher les éléments dans le menu de droite, tel que les sponsors, les suggestions de pages et d’amis :

FBPurity config 2

Voila, avec ça vous avez de quoi cacher  tous les éléments polluants votre fil d’actualités. Si ça suffit pas, vous pouvez toujours essayer de supprimer votre compte Facebook. J’y réfléchis d’ailleurs sérieusement, mais sachant que certains n’utilisent que ça pour communiquer, on se retrouve vite sans nouvelles de ces personnes.

The Power of HTML5La puissance d’HTML5

To begin with my first note on this blog, I ‘ll talk a bit of HTML5, I suppose that, with the buzz on the internet, everyone knows what i’m talking about! The new HTML norm has already appeared to wide public with Youtube and it’s video player written with html5 instead of Flash.

But for a Web developer, it’s interesting to see the infinite possibilities! For example, the html5vsflash website shows us a beautiful demonstration of flash animations reproduced with HTML5 without get a up to date flash version. (useful for the free only community, for who flash is an heretic anti-free software and they refuse to use the flashplugin-nonfree).

Html5.VS.Flash includes a bit of comics humor by placing the two heroes: Flash & Green Lantern with an apple, but don’t make confusion between HTML5 and the Apple company!

Exemple html5
Html5 on the one side...
example flash
... Flash on the other side

The documents structure is now easier to analyse to use the common CSS properties:

Exemple de structure
Example of a HTML5/CSS2(3) structure
<br />&lt;!doctype html&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br /><%%KEEPWHITESPACE%%>    &lt;title&gt;Page title&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /><%%KEEPWHITESPACE%%>    &lt;header&gt;<br /><%%KEEPWHITESPACE%%>        &lt;h1&gt;Page title&lt;/h1&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/header&gt;<br /><%%KEEPWHITESPACE%%>    &lt;nav&gt;<br /><%%KEEPWHITESPACE%%>        &lt;!-- Navigation --&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/nav&gt;<br /><%%KEEPWHITESPACE%%>    &lt;section id="intro"&gt;<br /><%%KEEPWHITESPACE%%>        &lt;!-- Introduction --&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/section&gt;<br /><%%KEEPWHITESPACE%%>    &lt;section&gt;<br /><%%KEEPWHITESPACE%%>        &lt;!-- Main content area --&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/section&gt;<br /><%%KEEPWHITESPACE%%>    &lt;aside&gt;<br /><%%KEEPWHITESPACE%%>        &lt;!-- Sidebar --&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/aside&gt;<br /><%%KEEPWHITESPACE%%>    &lt;footer&gt;<br /><%%KEEPWHITESPACE%%>        &lt;!-- Footer --&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/footer&gt;&lt;/p&gt;<br />&lt;p&gt;&lt;/body&gt;<br />&lt;/html&gt;<br />

To finish this little presentation, this link show you the start of an FPS entirely made with HTML5 and Javascript!

Example of a HTML5 game!

sources:

http://net.tutsplus.com/category/tutorials/html-css-techniques/

http://html5tutorial.net/category/general

http://www.benjoffe.com/code/

http://html5vsflash.tumblr.com/



Pour commencer mon premier article sur ce blog, je  vais vous parler un peu d’HTML5, je suppose qu’avec le buzz que ça à fait sur le net, tout le monde connait! La nouvelle norme HTML à déjà fait parler d’elle auprès du grand public avec Youtube et sa version lecteur vidéo HTML5 à la place de Flash.

Mais pour un développeur Web, il est intéressant de voir les possibilités quasi-infinies  que cela laisse à celui-ci. Par exemple le site  html5vsflash nous présente une belle démonstration des animations flash qui sont faisable en HTML5 sans pour autant posséder une version de flash à jour (pratique pour les puristes du libre, pour qui flash est une hérésie propriétaire et qui se refusent d’utiliser le flashplugin-nonfree).

Html5.VS.Flash à intégré une petite touche d’humour comics en prenant les personnages Flash et Green Lantern arborant une pomme, mais il ne faut pas faire l’amalgame entre html5 et Apple!

Exemple html5
D'un coté html5...
example flash
... de l'autre Flash

La structure des documents est maintenant plus facile à analyser  pour utiliser les propriétés CSS habituelles :

Exemple de structure
Exemple de structure facilement réalisable en HTML5/CSS2(3)
t

Pour finir cette petite présentation, je vous met un lien pour découvrir le début d’un FPS entièrement en HTML5 et en Javascript!

Exemple d'un jeu réalisé entièrement en HTML5

sources:

http://net.tutsplus.com/category/tutorials/html-css-techniques/

http://html5tutorial.net/category/general

http://www.benjoffe.com/code/

http://html5vsflash.tumblr.com/