Posted: septembre 5th, 2010 | Author: rabehasy | Filed under: HTML5 / CSS 3 | 3 Comments »
Il est impossible de faire fonctionner du HTML5 et encore moins avoir des beaux effets CSS3 avec le navigateur Internet Explorer jusqu’à la version 8.
Toutefois, quelques outils et scripts existent et permettent de pallier à ce problème.
Selectivizr
Il s’agit d’un émulateur en Javascript de 19 pseudo-classes, 2 pseudo-élements et tous les attributs en CSS3 pour les version de 6 à 8 de Internet Explorer. Il suffit juste d’inclure le script téléchargeable sur le site Internet de l’éditeur dans l’entête de la page HTML c’est-à-dire entre les balises <head></head> et Selectivizr s’occupe du reste. Une autre librairie Javascript telle que (jQuery, Mootools, Django…) est nécessaire au bon fonctionnement de Selectivizr. En revanche, il n’est plus nécessaire de créer plusieurs feuilles de styles CSS pour les navigateurs non compatibles.
L’appel dans l’entête d’une page se fait tout simplement comme ce bout de code :
1
2
3
4
5
| <script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]--> |
Pour que ces élements CSS3 soient bien interprétés, il faut qu’ils soient inclus :
- Soit dans la balise <link />
- Soit avec la propriété @import dans la balise <style></style>
Aussi, la feuille de style doit être située sur le même serveur.
PIE (Progressive Internet Explorer)
PIE est un fichier .htc (behavior) qui permet à Internet Explorer 6 et 7 de reconnaître et d’interpréter les propriétés CSS3 suivantes : border-radius, box-shadow, border-image, rgba et gradients
IE-CSS3 est un autre fichier htc qui permet de faire les mêmes manipulations que PIE mais ne reconnaît que les propriétés suivantes : border-radius, box-shadow et text-shadow
html5shiv
html5shiv est un script Javascript créé par le développeur Remy Sharp. Ce script permet d’accepter les nouvelles balises du HTML5 avec les navigateurs Internet Explorer de 6 à 8.
Il suffit d’appeler le bout de code suivant dans l’entete de la page HTML :
1
2
3
| <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> |
Internet Explorer UA Style Sheets
Internet Explorer User Agent Style Sheets est une grande liste tabulaire permettant au développeur de mieux comprendre l’interprétation par défaut des balises par les navigateurs Internet Explorer 6 à 8.
Par exemple, une balise <body> possède une marge différente selon les navigateurs :
- Internet Explorer 6-7 – appliquent une marge supérieure et inférieure de 15px, et une marge gauche et droite de 10 pixels.
- Internet Explorer 8-9 et les navigateurs Opera, Webkit, firefox- appliquent une marge de 8 pixels.
Posted: août 30th, 2010 | Author: rabehasy | Filed under: jquery | Tags: ckeditor, elrte, jquery, tinymce | 2 Comments »
Pourquoi nouvelle génération ? Euh…parce que…ben….c’est parce que j’ai envie de donner ce titre.
Trêve de plaisanterie, j’avais envie de bloguer sur ce nouvel éditeur de texte enrichi WysiWYG qui va bientôt se classer dans le rang des grands tels que tinymce, ckeditor, rtehtmlarea… Cet éditeur s’appelle elRTE.
Il s’agit d’un éditeur enrichi opensource créé avec jQuery et utilise jQuery UI pour les fonctionnalités avancées et supplémentaires.
Comme les grands RTE, en plus d’être rapide et facile à mettre en place, il est possible :
- d’Avoir une barre d’outils personnalisée.
- de Contrôler l’apparence de l’éditeur avec des CSS.
- de créer des extensions.
- de l’utiliser dans plusieurs langues.
L’autre grand atout par rapport aux autres éditeurs RTE est qu’il est accompagné nativement de elFinder, le gestionnaire de fichier opensource créé par l’éditeur même du RTE. Il est à noter que ce gestionnaire peut être utilisé indépendamment de l’éditeur.
Je noterai quand même un point pour lequel je n’ai pas trop apprécié par rapport aux autres RTE. Au lieu d’éxecuter ou de remplacer la valeur d’un champ de texte multiligne, cet éditeur remplace la valeur d’une DIV qu’on lui donne en paramètre lors du chargement.
Pour tester >>
Posted: août 25th, 2010 | Author: rabehasy | Filed under: HTML5 / CSS 3, jquery | No Comments »
Parmi les types de champs classique d’un formulaire HTML4, on a :
- Un type text (une seule ligne), textarea (champ texte multiligne) ou un password
- Un type checkbox ou bouton radio.
- Un bouton de validation submit, de réinitialisation reset ou bouton simple button
- Un bouton avancé button.
- Une liste déroulante select avec ses items option.
- Un champ fichier file.
- Un champ caché hidden.
Read the rest of this entry »
Posted: août 12th, 2010 | Author: rabehasy | Filed under: HTML5 / CSS 3 | Tags: html5Boilerplate, html5doctor, reset | No Comments »
HTML5 encore lui et toujours lui…Et ca ne fait que commencer. Parmi tous les navigateurs les plus utilisés, seul Internet Explorer 8 n’est pas totalement prêt alors qu’il détient quand même le maximum d’utilisateurs. La Beta de la version 9 de IE devrait sortir d’ici le 15 Septembre 2010 On pourra donc confirmer que HTML5 sera le nouveau standard pour créer des pages web en 2011.
Posted: août 11th, 2010 | Author: rabehasy | Filed under: jquery | Tags: cleditor, wysiwyg | No Comments »
Il existe des tonnes d’éditeurs WYSIWYG en Jquery. Parmi les meilleurs qui sont TinyMCE, CKeditor (anciennement FCKeditor), d’autres valent le coup de présenter ici. La raison est qu’ils sont fait en Jquery. Ce qui implique qu’il est très facile de les intégrer dans une page puisqu’ils bénéficient de toute la richesse de Jquery.
CLEditor fait partie de ces nouveaux éditeurs WYSIWYG faits avec Jquery. Voici les caractéristiques de cet éditeur :
- Il est possible d’avoir une barre d’outils personnalisée.
- Plusieurs éditeurs peuvent s’intégrer facilement dans une page.
- La taille de l’éditeur peut s’adapter automatiquement à son élement parent (soit la fenêtre du navigateur, soit le bloc de contenu dans lequel il se trouve).
- Des plugins peuvent être créés et ajouter dans la barre d’outils pour avoir une barre d’outil supplémentaire par exemple.
- S’intègre facilement dans une page avec le code suivant :
1
2
3
4
5
6
7
8
9
10
11
12
| <script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.cleditor.defaultOptions.width = 200;
$.cleditor.defaultOptions.height = 100;
$.cleditor.defaultOptions.controls = "bold italic underline strikethrough";
$("textarea").cleditor()[0].focus();
});
// ]]></script><script type="text/javascript">
$(document).ready(function() {
$("#input").cleditor()[0].focus();
});
</script> |
D’autres éditeurs WYSIWYG existent également en Jquery :
Mais aussi d’autres éditeurs destinés plutôt à des langages spécifiques telles BBCODE, Wiki :
Posted: juillet 7th, 2010 | Author: rabehasy | Filed under: logiciel, Technologie, web2 | Tags: firefox | No Comments »
Suite à l’annonce de la sortie de la version de Firefox 4.0 Beta, je me suis pressé de télécharger et de tester la bête. Je vous partage ci-dessous quelques copies d’écran :
La navigation par onglet en haut du navigateur.
Cette nouveauté se trouve dans le menu Tools > Heads Up Display.
Rien à signaler spécialement sur cette nouveauté si ce n’est qu’on a plus d’espace pour travailler correctement
Inspecteur DOM
Un nouvel onglet pour gérer les extensions, thèmes, plugins
Cette amélioration se trouve dans le menu View > Toolbar > Tabs on top .
Ainsi, il est possible dans cet onglet de désinstaller rapidement une extension, d’activer un thème, de supprimer ou d’ajouter un plugin.
Affichage de l’entête HTTP d’une page
Cette nouveauté se trouve dans le menu Tools > Heads Up Display
Posted: juillet 4th, 2010 | Author: rabehasy | Filed under: Technologie | No Comments »
Ce 3 juillet 2010, #Madagascar est le nom de code choisi par CMSMadesimple pour la version 1.8 de leur Outil de gestion de contenu après avoir refondu leur site Internet le 28 juin 2010. Ca me fait plaisir de voir qu’ils ont choisi #Madagascar comme nom de code. Cependant je n’arrive pas à trouver l’origine de ce choix.
CMSMadeSimple a la particularité comme son nom l’indique d’être simple d’utilisation mais aussi simple à maintenir. De nouvelles fonctionnalités ont été ajoutées, des améliorations ont été apportées pour rendre le CMS plus rapide et plus léger et des bugs signalés récemment résolus.
Nouvelles balises {cms_stylesheet} et {content_module}
Principalement, la fonction {stylesheet} remplacée récemment par {smarty_stylesheet} a été finalement remplacée par {cms_stylesheet}.
Pour info, cette balise lie toutes les feuilles de style attachées au gabarit. Si elle est oubliée, la page apparaîtra sans style. Pour utiliser des feuilles de style externes, l’utilisation de <link/> standard dans l’en-tête est également permise.
Voici donc la nouvelle utilisation dans un template :
1
2
3
4
5
| <head>
<title>{sitename} - {title}</title>
{cms_stylesheet}
{metadata}
</head> |
Il ne s’agit pas que d’un remplacement de fonction ou de dénomination. En effet, cette nouvelle fonction prend tout le contenu des feuilles de styles. Elle les envoie à Smarty, qui est le moteur de template de ce CMS. Smarty met en cache ensuite ces feuilles de styles pour rendre l’affichage plus rapide et envoie le tout vers le navigateur dans un fichier unique.
La balise {content_module} est également une grande amélioration ajoutée à ce CMS. En effet, jusqu’alors il était impossible sans extension de mettre en forme un même module différemment sur 2 pages différentes.
Copier-Coller une page
Il est maintenant facile et possible de copier une structure d’une page et de coller dans l’arborescence du site comme ce que font les grands CMS actuels.
Posted: juillet 3rd, 2010 | Author: rabehasy | Filed under: Contao (ex-Typolight), Technologie | No Comments »
Depuis que je me suis intéressé à #Contao (ex-#Typolight), je constate que ce CMS ne cesse d’évoluer et mes découvertes me font dire qu’il est vraiment très puissant.
J’ai un site Internet qui tourne avec ce CMS (Typolight 2.8.4) depuis quelques mois et voici les étapes pour la mise à jour vers Contao 2.9.
Il faut tout d’abord télécharger l’archive contao-2.9.0.zip sur cette page http://www.contao.org/download.html.
Sur le serveur du projet pour lequel Typolight 2.8 est installé, je renomme les fichiers et dossiers suivants pour éviter qu’ils soient écrasés par les fichiers de Contao :
- system/config/dcaconfig.php est renommé en system/config/___dcaconfig.php
- system/config/localconfig.php renommé en system/config/___localconfig.php
- system/config/langconfig.php renommé en system/config/___langconfig.php
- templates/ renommé en ___templates/
- tl_files/ renommé en ___tl_files
J’envoies ensuite tous les fichiers extraits de l’archive téléchargée sur le serveur en écrasant tous les fichiers.
En allant sur http://votrenomdedomaine.fr/typolight/install, je suis redirigé automatiquement sur http://votrenomdedomaine.fr/contao/install
L’outil d’installation me demande de saisir le mot de passe, je saisis alors contao au lieu de typolight.
Les étapes suivantes sont inchangées : changer directement le mot de passe par défaut, générer la clé de cryptage, information de connexion à la base de données.
Après cette étape, un bouton « Run version 2.9 Update » est apparu. A la page suivante, Contao m’informe que de nouvelles colonnes vont être ajoutées sur les tables suivantes : layout, member, module, user, article, content et des colonnes vont être supprimées sur les tables : calendar, faq_category, layout, news_archive
La mise à jour de la base de données s’effectue correctement. Contao a conservé l’utilisateur administrateur (ce qui est logique d’ailleurs, sinon je suis un peu dans la m****)
Je remets les noms des fichiers que j’ai renommé précédemment. Ceci afin que les templates et configurations personnalisées puissent être conservés.
Je me connecte en front et en backend, Tout se passe très bien. Contao est bien en version 2.9.
Ddans le BE pour voir ce qu’il y a dans le menu thème , je clique sur ce menu
Un thème « Contao Open Source CMS » par défaut a été créé. Il regroupe les éléments permettant de personnaliser l’affichage du frontend général. 7 boutons suivants : Editer, Supprimer, détail, Editer la feuille de style, Editer les fichiers de templates, Editer les modèles de présentation, Exporter le thème se situent à droite du thème pour permettre d’intéragir sur le thème. Il est bien entendu possible de créer un autre thème et aussi d’importer un thème au format .cto.
Je vous raconterai la suite de cette expérience bientôt…
Posted: juillet 2nd, 2010 | Author: rabehasy | Filed under: cms, Contao (ex-Typolight), Technologie | Tags: contao, TYPO3, typolight | 1 Comment »
Il y a une semaine exactement, la nouvelle était annoncée sur Twitter.
Chose promie, chose due. La version 2.9 de Contao (ex-Typolight) est sortie.
Contao est un CMS simple. Son code est propre. Il est très facile à utiliser. Le backend est accessible et respecte les standards HTML et CSS du web. Contao ressemble beaucoup à Typo3 dans la façon de gérer la structure d’un projet dans le backend et dans la structure des fichiers de configuration. Un exemple concret, en typo3 pour représenter les élements d’un enregistrement en backend, on utilise le TCA (Table Content Array). Avec Contao, on a le DCA (Data Container Array) si je ne me trompe pas? De ce fait, certains utilisateurs confondent Contao et Typo3. Mais il est très important de faire savoir que malgré quelques ressemblances, ce CMS tire des avantages par rapport à d’autres CMS.
Cette nouvelle version signe aussi la nouvelle dénomination du CMS. En effet, ce CMS s’appelait jusqu’alors Typolight.
Parmi les nouveautés apportées : un nouveau gestionnaire de thème. Les thèmes n’existaient pas dans Typolight. On n’avait que les templates pour pouvoir modifier le gabarit de la page frontend. En effet, un template est juste un fichier au format .tpl . Un thème quand à lui est un groupe qui peut contenir des feuilles de styles CSS, des modules, et des layout. Ce groupe est stocké en base de données et reconnu automatiquement par le backend de Contao lors de l’accès à la page gestion des thèmes. De plus il est possible d’exporter un thème pour pouvoir l’utiliser plus tard par exemple. L’export sera au format .cto qui n’est autre qu’un fichier compréssé au format ZIP renommé différement.
Un nouveau gestionnaire des extensions a été mis en place également. De multitudes options ont été ajoutées telles que : la possibilité de faire une recherche dans la liste des extensions installées. Une option pour permettre de mettre à jour en une seule fois plusieurs extensions. Sur ce point, il me semble que wordpress a été le premier CMS à initier cette option.
Il est possible maintenant d’associer différents templates à des sous-pages. Jusqu’à maintenant, on ne pouvait avoir qu’un seul template pour l’ensemble du site et un seul template pour un module. Ces fichiers étaient stockés dans le répertoire templates. L’avantage est dans cette nouveauté la possibilité de pouvoir skinner différemment un même module placé dans diverses pages du site.
Partager sur Twitter et Facebook deviennent maintenant très facile et sont intégrés nativement dans la version 2.9 de Contao. En plus des boutons déjà existants tels que : impression au format PDF, et lien à un ami, On peut paramétrer une page pour que l’internaute puisse l’imprimer, et partager la page sur les réseaux sociaux : Twitter et Facebook. Lors d’une partage d’un lien, Contao a prévu de raccourcir les liens avec TinyURL. J’imagine déjà que d’ici quelques jours, une extension qui utilisera bit.ly verra le jour.
>> Tester, Télécharger Contao http://www.contao.org/
Posted: juin 26th, 2010 | Author: rabehasy | Filed under: cms, wordpress | Tags: cms | No Comments »
Dans la suite du post 1 sur les nouveautés de WordPress 3, je suis maintenant prêt pour approfondir ce CMS et vous présenter d’autres nouveautés.
Possibilité de créer des nouveaux types de contenus et taxonomy.
Cette nouveauté figure parmi les plus importantes de cette version 3 de WordPress. Jusqu’à ce jour, on était limité uniquement à deux types de contenus pour remplir le site : les articles et les pages. Aussi, nous n’avions droit qu’aux taxonomy suivants : tags et catégories.
Il est maintenant possible de créer n’importe quel type de contenu structuré ou de taxonomy, de les remonter facilement dans la partie publique du site. Cette remontée se fait très facilement puisque WordPress a créé spécialement une fonction pour. Il est important de noter que ce type de contenu n’a rien à voir avec les catégories et les tags.
En lisant ce post et particulièrement le paragraphe précédent, vous direz surement : « mais sous une version antérieure, ceci était possible, et le nombre de plugins faisant cette fonctionnalité était innombrable« . D’accord, mais il s’agit là, d’un nouveau type de contenu intégré nativement dans WordPress. Ce qui veut dire que le risque de perte de données est nul si une mise à jour de l’outil devait être fait. De plus, il ne s’agit plus de surcharger la base de données en créant de nouvelles tables. J’ajouterai en plus qu’il s’agit d’écrire quelques lignes de codes aussi bien pour les créer que pour les remonter dans la partie publique.
Techniquement, voici comment faire fonctionner et créer un nouveau type de contenu video par exemple :
- Editer le fichier functions.php situé dans le répertoire de votre thème avec un éditeur de texte tel que notepad par exemple.
- L’objectif est de créer une fonction qui se lancera au chargement du backend de WordPress. Cette fonction est init.
- Ajouter le code suivant à la fin du fichier :
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
| <?php
add_action ('init', 'my_video_init');
function my_video_init ()
{
//Ajouter un nouveau type de contenu
register_post_type (
'projet',
array(
'label' => __ ('Video'), //Nom de l'élément utilisé dans la remontée
'singular_label' => __ ('Video'), //Nom de l'élément affiché dans la colonne de gauche du backend
'public' => true, //Permet de modérer le type de contenu
'show_ui' => true, //Faire apparaître ou non cet élément dans le backend
'capability_type' => 'post', //post ou pages,
'hierarchical' => false, //Si il y a une relation enfant parent
'supports' => array('title', 'editor', 'thumbnail', 'custom-fields') //Autres élements qu'on souhaite avoir
)
);
//Ajouter un nouveau type de taxonomy
register_taxonomy (
'nom_taxonomy', //nom de la taxonomy
'projet', //post,pages, ou ici projet
array(
'hierarchical' => true, //Si il y a une relation enfant parent
'label' => 'Nom taxonomy',//Nom qui s'affichera dans le backend
'query_var' => true,
'rewrite' => true
)
);
//Ajouter autant de fonctions que nécessaire à la suite
}
?> |
- Enregistrer le fichier et renvoyer le dans le répertoire de votre thème.
Voici ce que ca devrait donner en Backend
Gestionnaire de menu personnalisé.
Pourquoi créer des menus personnalisés ? Pour avoir la possibilité de créer un menu qui va vers un site externe par exemple. Pour créer un menu de type mailto. Pour créer un menu qui regroupera les posts et catégories….Autant de possibilités limitées par l’imagination.
Comme c’est une fonctionnalité de la version 3.0, pour le faire fonctionner correctement, quelques retouches doivent être faites au niveau du code.
- Editer le fichier header.php situé dans le répertoire de votre thème avec un éditeur de texte tel que notepad par exemple.
- Ajouter le code suivant à l’endroit où vous souhaitez faire apparaitre le menu personnalisé :
- Enregistrer le fichier et renvoyer le dans le répertoire de votre thème.
Voyez plutôt le résultat :
L’intérêt est multiple :
- On n’a plus besoin de bidouiller le code de notre thème, pour afficher un menu personnalisé, en essayant de jouer sur l’affichage des catégories, tags…
- La gestion des menus devient administrable par le contributeur. Il a le contrôle total de son affichage, de sa gestion.
- Il peut créer autant de menus souhaité, par exemple en bas de page, en haut de page, à gauche, dans la navigation centrale.
width
