Libratoi.net - Lopez Cyril

Nethik l’a annoncé dans son billet Meabilis, une nouvelle façon de créer son site internet, Meabilis est lancé, avance et avance bien.

Alors qu’est-ce que Meabilis ?

Meabilis est une solution web alliant la facilité d’utilisation (pas de connaissance en programmation requise) à la vélocité d’un système couvrant le maximum des besoins qu’un professionnel du web peut avoir. La qualité étant un des objectifs principaux du projet.

Qu’est-ce que je peux faire avec Meabilis ?

Grâce à sa multitude de modules prêts à l’emploi et utilisables en 1 clic, Meabilis permet de faire un site Internet complet sans connaissance technique particulière. Pour vous donner une idée, voici quelques modules dont vous pourriez avoir besoin : la galerie de photos ou de vidéos, la Carte Google Maps, le formulaire de contact, le lecteur de flux RSS, etc.

Tous ces modules sont facilement personnalisables, mais un accès au code HTML / CSS est possible pour les connaisseurs et pour ceux qui aiment “avoir les mains dedans”.

Plus d’informations sur le centre d’aide Meabilis, rubrique Guide.

Ca va me coûter un bras ?

Meabilis est accessible à toutes les bourses puisque l’offre Mea Free est gratuite et comprends toutes les fonctionnalités (hébergement, plusieurs chartes graphiques, nombre de page illimité, 500 Mo d’espace, avec publicité).
L’offre Mea Plus qui comprends plus d’espace web, plusieurs boites mails et un nom domaine, se veut “Low cost” à un prix de 10€ HT / mois.
De nombreuses options sont disponibles à la carte telles qu’un design personnalisé, des noms de domaines supplémentaires, l’intégration de contenu, etc.

Plus d’informations sur la page dédiée aux offres.

De la qualité, de l’éthique

L’équipe de l’agence Nethik (statut SCOP) est soudée autour de valeurs telles que les bonnes pratiques, la qualité et l’éthique professionnelle. C’est pourquoi Meabilis suit les recommandations de consortiums reconnus (W3C) et s’engage à reverser 10% des abonnements Mea Plus à des associations luttant pour des causes humanitaires, sociales ou environnementales.

Plus d’informations sur l’éthique Meabilis sur la page dédiée.

Des exemples ?

• Ax-les-thermes.net, infos et tourisme en Ariège
• Exemple de site Internet professionnel
• Site de Jahnodead, émission radio reggae à Toulouse
• Site l’ association Initiation à la forêt
• Site de l’ Alliance Française de Galway (Irlande)
• Site professionnel de Solid’Action, Coopérative de Solidarité Internationale

Découvrir Meabilis en vidéo et en 2 minutes

Visite guidée de la création d’un site internet complet avec l’outil en ligne Meabilis.

TinyMce est un éditeur de texte pour applications web. Pour en savoir plus, voir un comparatif de plusieurs éditeurs WYSIWYG.

Des classes à disposition de l’utilisateur

Avec TinyMce, il est possible d’offrir à l’utilisateur de l’outil, la possibilité d’appliquer des styles CSS prédéfinis (classes) au contenu à mettre en forme.
Pour cela, il suffit de créer une feuille de style avec les classes voulues et de la lier à TinyMce lors de son instanciation.

Des CSS personnalisés par défaut

Le paramètre suivant permet de “surcharger” la feuille de style par défaut de TinyMce. Cela permet par exemple de mettre en forme les listes à puces du contenu WYSIWYG de la même manière que dans le reste de votre application.

Dans l’exemple ci-dessus, on a une instance de TinyMce, grâce à la méthode init().
Il suffit de passer un paramètre de plus comme ceci :

pour obtenir une liste déroulante des classes que vous aurez définies grâce au paramètre theme_advanced_styles sous la forme : {Intitulé=class;}

Les sélecteurs CSS avancés simplifient (simplifieraient ?) la tâche de tout intégrateur. Ils permettent d’accéder à un élément ou à ses attributs sans lui spécifier de classe.

Des exemples pratiques :

Pour accéder seulement aux checkbox d’un formulaire :

Pour iconiser des liens (permet un fond de lien différent en fonction de la cible du href) :

Les sélecteur d’enfants (permet de cibler les enfants d’un élément) :

ou

qui permet de ne cibler que le premier enfant d’un élément.

Très pratique ! Et le “Mais” dans tout çà ? Eh bien il se nomme Internet Explorer 6 voyons ! Aucune de ces techniques n’aura les effets escomptés sur ce vieux navigateur.

Il existe une solution concernant le sélecteur d’enfant sur le JDN Développeurs.

Sinon l’ultime solution pour la totalité de ces techniques : Télécharger Firefox - Télécharger Opéra. Stop à l’utilisation d’IE 6 !

Le Document Object Model (ou DOM) est une recommandation du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d’accéder ou de mettre à jour le contenu, la structure ou le style de documents. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu’il sera présenté. Source Wikipedia.

En résumé, cela permet de jouer sur les éléments HTML d’un page. Prenons un exemple, celui sur lequel on travaille actuellement. On a un formulaire d’ajout de produit dans une interface d’administration web. On a un champ “file” qui me permet d’attacher une image au produit.

Eh bien grâce au DOM et à Javascript, sur le clic du lien “Fichier supplémentaire”, on fait apparaitre les mêmes types de champs (on modifie l’arbre DOM) afin de pouvoir attacher un nombre illimité de fichiers, ceci sans rechargement de page puisque tout se passe “côté client”, c’est à dire sur le navigateur de l’internaute.

Après cette longue introduction, venons en au problème. Il n’y a pas beaucoup de sources à propos de ce bug sur internet, d’où la création de ce billet. Le problème se situe dans la création de formulaire grâce au DOM et sous Internet Explorer. Pour créer un formulaire le code peut être le suivant :

Maintenant si on veut transférer des fichiers via ce formulaire (upload grâce à input file), on doit créer un input de ce genre :

Mais il faut aussi ajouter l’encodage du formulaire, spécifiant un échange de données :

Sous Firefox tout va bien, le problème vient d’un bug d’Internet Explorer (qui a dit encore ?) qui ignore tout simplement l’encodage attribué ci-avant.

La solution ?

Coupler à l’attribut enctype l’attribut encoding de la manière suivante :

Dorénavant IE et Firefox prendront en compte l’encodage du formulaire et vos fichiers seront correctement “postés” vers votre page de traitements.

La programmation, et dans mon cas le développement web, est remplie de conventions en tout genre. Ce sont des accords sur des règles à respecter tant dans l’écriture de code que dans le “nommage” des tables et champs de bases de données.

Il n’existe pas de règles officielles, chacun est libre, selon ses acquis ou ses habitudes de choisir telle ou telle convention, ou d’en créer une particulière.

C’est pour cela que j’aurai aimé avoir l’avis de développeurs confirmés, étudiants ou bricoleurs du web, peu importe.

1. Quelles sont vos règles et pourquoi ? Quels noms donnez vous à vos tables, vos champs ?
2. Faut-il mettre au pluriel le nom de la table des “Categories” ?
3. L’identifiant d’une table (et plus généralement tous ses champs) doit-il est suffixé par le nom de la table ?
4. Un identifiant d’un produit de type “id_produit” devrait-il être au singulier ou au pluriel ?
5. Undersore, tiret ou concaténation entre les mots d’une table ?

Merci de laisser vos conseils avisés en commentaires !

C’est officiel, l’équipe de développement de PHP (langage de programmation web) recommande de migrer toute application vers PHP5 avant la fin de l’année.

La version 4.4 va donc être arrêtée. PHP 5 étant stable, PHP6 en préparation, sautons le pas !

Un guide de migration vers PHP 5 est dispo.

Source : Journal du net

Afin de faciliter la mise en forme de texte, les applications web en ligne proposent souvent un éditeur. Celui-ci permet au client ou à l’utilisateur du CMS de mettre en forme ses données en ligne sans connaissance de HTML et des feuilles de styles.

Il existe plusieurs solutions gratuites et opensource d’éditeurs de textes riches (rich text editor). J’ai eu l’occasion d’en tester quelques unes.

FCKeditor : Très personnalisable (boutons) et installation assez facile. Produit un code XHTML 1.0. Supporte aussi les “skins” permettant de changer l’apparence de l’éditeur (en office 2007 par exemple !). Mais fckeditor est assez lourd à charger. Documentation en ligne excellente.

Tinymce : Très jolie interface pastel, léger et très facile à installer. Point négatif : l’upload de fichier. Il faut installer un plugin payant pour intégrer une image par exemple. L’alternative serait d’installer un autre plugin gratuit qui s’intègre parfaitement à Tinymce : Imanager. (Il suffit ensuite de l’appeller dans la liste des plugins lors de l’initialisation de TinyMce, et de l’affecter aux boutons).

TinyFck : Projet hybride, c’est TinyMce avec le gestionnaire d’image de FCKeditor.

XINHA :Non testé. Projet opensource sérieux. Bon guide de démarrage rapide.

On peut aussi citer Kupu, AreaEdit, eArea, etc.

HtmlArea se veut un annuaire qui recence pas mal (pour ne pas dire une tonne) d’editeurs de toutes sortes.

Quelles plateformes avez-vous testé ? Des retours d’expérience ?

“XHTML ce n’est que la combinaison du HTML et des feuilles de styles”, m’a t-on dit en Licence Pro !

Je me permet donc de contredire cette idée en définissant le XHTML.

“Le XHTML n’est rien de plus que du HTML reformulé de façon à respecter les règles strictes du XML ” (Source openweb).

Voici quelques-unes de ces règles strites :

1. Toute balise doit être fermée (<p></p>,<img …/>)
2. Balises et attributs en minuscules (car XML est sensible à la casse)
3. Bonne imbrication des balises (fermeture dans l’ordre inverse de l’ouverture)
4. Les valeurs des attributs entre guillemets (quotes)
5. Le remplacement de l’attribut name par l’attribut id (il est possible d’utiliser les deux simultanément afin d’avoir une meilleure intégration avec les navigateurs veillissants ou avec certaines fonctions Javascript) Ex : <form name=”contact” id=”contact” […] ></form>
6. Une déclaration de type de document obligatoire : La DTD. Il existe 3 doctypes : strict, transitional, frameset, toutes plus ou moins permissives. Mais leurs principales différences étant la séparation de la structure du document (balises) de la présentation (mise en forme) plus ou moins importante.
7. Formes abrégées bannies (CHECKED devient checked=”checked”)
8. Faire attention aux caractères spéciaux dans les URLs. Ex: & devient &
9. Utilisation de CDATA dans les déclarations javascript ou CSS (CDATA signifie “tout type de caractère” en XML et permet une meilleure gestion des caractères spéciaux)
10. Le prologue xml (<? xml […] ?>) et encodage de caractères en début de page (peut causer souci avec php), sujet de vives discussions sur le forum d’alsacreations
11. Stipuler l’élément racine du document qui doit être html avec un espace de noms, du genre :

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

Le suivi de ces quelques règles pourront vous permettre de coder XHTML et de ce fait, séparer la structure du site de sa présentation grâce aux feuilles de styles en cascade (CSS). (CQFD)