HTML Styles, générateur de feuilles de style CSS 3

Nouvelle version 4.10 - décembre 2023 !
Compatible Windows 10.

Présentation

HTML Styles a été conçu au départ pour élaborer des feuilles de style CSS, à une époque où l’on commençait à séparer dans les pages contenu et style. La programmation CSS a comme principale difficulté que les erreurs « ne se voient pas » : c’est en testant dans un navigateur, en inspectant les styles, que l’on comprend ce qui ne va pas. Pas bien pratique.

Je voulais donc faire un outil plus intuitif, utilisant en interface graphique une « boîte de texte CSS » qui restitue visuellement la saisie contrôlée de styles ; et permettant d’exporter les styles saisis et d’en importer pour modifications.

Comme je programme tout ce site manuellement, j’ai naturellement complété HTML Styles de fonctions générant du code HTML : associé à un simple éditeur de texte et avec de bonnes connaissances du langage HTML, HTML Styles est un environnement de développement web complet. Tout ce site internet a été réalisé avec ces outils.

  1. coder du HTML : par défaut, les pages sont générées en HTML 5 et UTF-8 ;
  2. un mini-éditeur permet de composer des pages « simples » ;
  3. générer les balises nécessaires pour une image ou un lot complet d'images, produire une table, faire un copier-coller stylé ;
  4. rédiger pour les pages des « meta » optimisés pour le référencement (<title>, description, keywords, etc.), préparer des sitemaps pour les moteurs, fichiers robots.txt et plan de site.
  5. construire une imageMap.
  6. produire des planches photographiques.

HTML Styles fonctionne dans les environnements Mac OS, Windows et Linux.

CSS est un langage de mise en page

CSS décrit la mise en page des documents indépendamment de leur contenu : cette approche allège le contenu des pages, assure une plus grande homogénéité graphique et simplifie la maintenance des sites internet. Plus de détails sur les feuilles de styles CSS.

La boîte de texte CSS représente un bloc de texte

margin
 
border
padding
texte

La boîte de texte sert d'interface graphique pour spécifier les styles

Bien sûr, on peut toujours écrire une feuille CSS à la main… Mais c'est un peu laborieux et HTML Styles évite les fautes de syntaxe qui font qu'un style ne fonctionne pas.

J'ai choisi d'implémenter le support des propriétés CSS les plus utilisées, mais la saisie de n'importe quelle propriété est possible, sans contrôle.

Les spécifications CSS3

CSS est, à mon avis, un langage spécifié de manière inutilement complexe : on aurait gagné du temps à regarder comment font les typographes plutôt que d'inventer l'eau chaude…

Quant à Internet Explorer, Microsoft a fini par l'abandonner et venir aux standards, ce qui réduit la complexité.

Installation de HTML Styles

Éléments à installer

  • Téléchargez ici la version adaptée à votre système d'exploitation.
    Si vous n'avez pas l'application LiveCode, installez également le Player StackRunner adapté à votre plateforme ;
  • Décompressez le fichier zip ; il contient deux éléments, la pile « htmlstyles.livecode » et un dossier de plugins « htmlstyles_plugins » que vous pourrez placer dans un répertoire à l'intérieur de « Documents »;
Vous pourrez ajouter d'autres plugins par la suite…

1er Démarrage

  • Double-cliquez le fichier HTML Styles; si le système (je parle de windows…) vous demande avec quel logiciel le fichier doit être ouvert, indiquez lui que c'est StackRunner.
  • Cliquez l'icone "plugin" plugin icon en haut à droite pour prendre en compte les plugins installés.
htmlstyles.livecode
htmlstyles_plugins
imageBatch.livecode
imageMap.livecode
MetaMaker.livecode
Photosheet.livecode
RTF2HTML.livecode
SiteMap.livecode
webkit.livecode

Créer un environnement de travail

  • Le répertoire « Réglages HTML Styles » (nom donné dans la documentation, mais en fait ce que vous voulez) contient 3 sous-répertoires destinés à enregistrer les fichiers de travail de HTML Styles : Groupes de styles, fichiers pour plugins et Sitemaps. Ces fichiers enregistrent, par exemple, les instructions CSS, les données nécessaires aux sitemaps Google, des modèles de pages HTML…
  • Un « assistant » permet de créer l'environnement de travail.
Réglages HTML Styles
Groupes de styles
Métas et plugins
Sitemaps

Historique des versions

1 décembre 20234.10 HTML Styles et tous plug-ins : portage vers Windows 10.
Résolution de problèmes d'enregistrement des réglages de HtmlStyles et des plugins. Correction de divers bugs ;
plugin Photosheet 2.83 : placé une balise video html5 contenant un aperçu. Cela évite de lancer un téléchargement avec certains navigateurs : Brave et Edge sous windows ;
plugin MetaMaker 2.8 : revu le groupe og-metas en mettant une icone alert de contrôle des racines.
30 avril 20234.10 HTML Styles et tous plug-ins : adaptation à LiveCode 9.03.
meilleure gestion de l'Unicode, des images SVG et des familles de polices ;
30 décembre 20214.09 HTML Styles :
  • En placement d'images, gestion des images SVG ;
  • correction d'un bug sur content lorsque l'on place un caractère spécial utf-8 : il commence par un \ suivi de sa valeur hexadécimale.
plugin imageBatch 2.7 :
  • Refonte de l'interface et changement d'icones ;
  • Les données du fichier listimages.txt sont prioritaires dans la recherche des légendes d'images d'un lot ;
  • Prise en charge des images svg et du codage Base64.
plugin MetaMaker 2.7 :
  • Revu le script de génération de l’Aperçu Google.
plugin RTF2HTML 1.8 :
  • Simplification de l'interface, du setup et des modèles. Le modèle contient des métas en variable et que l'on peut saisir avant de générer la page. Ajout carte de setup d'indexation dossier ;
  • Ajouté une dragzone qui fait tous les imports. ;
  • Insertion de la feuille de style pour l'export des couleurs ;
  • Ajouté « target » à la gestion des liens. Export de la page avec le charset du modèle.
4 juin 20214.08 HTML Styles :
  • Aide en ligne sur tous les plugins.
  • Possibilité d'import de sélecteurs en sélection multiple.
  • Insertion d'images et import de styles par drag & drop.
  • ajout menu édition "Copier une couleur…" et des couleurs HSL.
  • encodage dataurl des images svg.
  • nouvelles propriétés outline, outline-width, brek-after, break-before, break-inside.
plugin Photosheet 2.82 : optimisation temps de traitement et support du mode simplifié (sans ExifTools).
plugin webkit 2.02 : transforms et gradients supportés par tous les navigateurs, import depuis le Presse-Papier, propriété filter.
RTF2HTML 1.7 : pages couleurs optimisées.
10 avril 20194.06 HTML Styles :
  • Webdesign adaptatif : gestion flexbox et @media. Ajout du meta viewport. Gestion du HTML5.
  • codage des data-url en base64 selon un seuil de taille d'image en préférences.
  • ajout pseudo classes à la liste sélecteurs.
  • revue de la gestion des plugins.
plugin Photosheet 2.8 : correction de bugs (export thumbs de movies), ajout effacement données GPS, modèle de caméra.
plugin imageBatch 2.6 : amélioration du script de maj d'une page, prise en compte de l'angle des images, gestion saut de lignes en légende.
plugin webkit 2.0 : nouvelle interface en 3 cartes : transformation, transition, gradient.
1 juillet 20154.05 HTML Styles :
  • ajout de la propriété CSS3 box-sizing.
  • regroupement des préférences en 2 onglets sur la même carte.
Photosheet 2.7 : correction de bugs (formats de légendes, rotation des images).
Éditeur de metas : correction d'un bug sous Linux (format dates).
3 décembre 20144.04 Mis une icone « plugin » affichant la version sur tous les plugins.
Photosheet 2.6 : La gestion des données IPTC repose désormais uniquement sur ExifTools. En absence de ce dernier, il reste possible de créer des planches, non légendées.
Ajout d'une fonction « série » permettant de créer des dates espacées en séquence pour une ensemble d'images lorsque l'appareil photo n'a pas créé les données correctement. Support des légendes et dates pour les films. Fonction d'export des données IPTC vers un tableur pour des modifications « massives » par lots. Ajout de rétro-liens entre index et planches HTML pour optimiser la navigation. Correction d'un bug sur les légendes d'image multi-lignes.
28 juin 20144.03 Correction d'un bug à l'import de css avec la propriété background.
plugin Photosheet 2.6 : Optimisation de la gestion des données IPTC, rotation des images originales, ajout .m4v aux formats de films, customisation des légendes de vignettes.
14 juillet 20134.02Meilleur décodage des fichiers importés (feuilles css et documents à convertir).
Suppression de l'encodage de caractère spéciaux dans le HTML généré lorsque le charset de la page est UTF-8.
plugin SiteMap 2.5 : correction bug sur plan de site et ajout transfert FTP des plans de site
correction bugs : affichage gifs animés, génération des tables, réglages spécifiques à lot d'images.
21 avril 20134.01Ajout des propriétés counter-reset, counter-increment, content et des propriétés raccourcies list-style, columns et column-rule.
Possibilité d'ajouter une opacité alpha après une valeur hexa lors de la saisie d'une couleur.
21 mars 20134.00Support du HTML 5 et nouvelles propriétés CSS3
  • Dans les dialogues, les propriétés CSS sont affichées avec leur nom.
  • Ajout des propriétés CSS3 background-clip, background-origin, background-size et border-image.
  • Prise en compte du nom standard pour les propriétés border-radius, box-shadow et text-shadow supportées par tous les navigateurs récents. Modification de vertical-align pour accepter longueur et pourcentage.
  • Ajout d'un éditeur de table et d'un sélecteur d'image permettant de placer des styles plutôt que des instructions HTML obsolètes.
plugin Metamaker 2.5 :
  • ajout du doctype HTML5 et gestion de Metas compatibles html4 et html5;
  • fabrication de fichiers modèles de pages compatibles RTF2HTML.
plugin Sitemap 2.4
  • prise en compte des Metas HTML5 et filtrage des pages en "noindex ou none";
  • dialogue de saisie l'url, du dossier local et de l'adresse FTP
plugin ImageMap 1.6: amélioration de l'interface de saisie des areas.
plugin ImageBatch 2.4: gestion des styles d'images (en remplacement des instructions HTML) et mémorisation des options dans le dossier d'images.
4 novembre 20123.40Amélioration du plugin Photosheet avec le support en lecture et mise à jour des légendes IPTC; plus grande compatibilité avec des logiciels comme iPhoto ou Picasa, les légendes (ainsi que l'auteur et les mots-clés) sont sauvegardés au sein des images sans altérer la date du fichier. Nécessite d'installer exifTool de Phil Harvey.
10 septembre 20123.39Correction d'une anomalie du menu plugins avec la touche commande et amélioration des plans de site.
27 août 20123.38Améliorations de la version 3.37. Suppression des JavaScripts dans l'import de styles. Photosheet 2.33 : nouvelle version corrigeant l'affichage des dates des images et possibilité de tri des vignettes par date.
7 juin 20123.37Améliorations de la version 3.36.
4 avril 20123.35Améliorations du plugin PhotoSheet.
9 janvier 20123.34Améliorations techniques : simplification du paramétrage et suppression du support des couleurs NetScape.
18 novembre 20113.33Support des principaux charsets.
Propriétés du « column manager » : column-count, column-width, column-gap, column-rule-color, column-rule-style, column-rule-width, column-span.
Fonction d'attachement de page à une CSS pour tester de manière interactive.
15 août 20113.32Remaniement du dialogue « texte » et correction de bugs mineurs.
21 juin 20113.31Nouvelle version du plugin « Sitemap » permettant d'uploader directement le fichier Sitemap et le fichier robots.txt à la racine du site.
16 mai 20113.30Nouveau plugin « webkit-transforms.livecode » permettant de saisir les transformations.
Version 2.0 du plugin Photosheet : prise en compte des photos et des vidéos.
10 février 20113.29Propriété box-shadow; choix des coins arrondis sur border-radius; optimisation des scripts. Gestion des plans de site et de plans partiels dans le plugin Sitemap. Nouveau plugin convertisseur/éditeur de pages HTML « RTF2HTML.livecode ».
Amélioration du plugin Photosheet : prise en compte de l'orientation des images (données EXIF) pour créer les vignettes.
24 septembre 20103.28Version de transition portée à l'environnement Linux (testée sous Fedora et Ubuntu, Debian ne marche pas...) au moyen de la Libimage XPlatform.
5 juillet 20103.27Nouveau bouton Pagination gérant les propriétés de mise en page et de sauts de page.
22 mai 20103.26Améliorations techniques de la pile et des plugins. Nouvelle version de la carte background.
19 août 20093.22ajout cursor sous la forme de l'url d'une image spécifique.
Nouvelle version du plugin Sitemap permettant de générer un plan de site et le fichier robots.txt.
Photosheet 1.5, plugin de création d'une planche contact.
24 mai 20093.21Propriété « text-shadow ».
Nouvelle version de l'éditeur de metas, optimisée pour le référencement des pages.
Nouveaux plugins imageBatch.livecode (création de balises <img> pour un lot d'images) et imageMap.livecode (saisie d'une image map).
2 février 20093.19Optimisations techniques diverses. Possibilité de vérifier le dernier niveau de version disponible.
2 juillet 20083.14Ajout de l'outil « crayon » permettant d'entrer manuellement les propriétés css spécifiques et d'ajouter des commentaires aux feuilles de style. Arrondi de bordure border-radius.
21 mai 20083.13Gestion des couleurs RGB et RGBA, support des propriétés Opacity et clip.
14 mars 20083.11revue de l'interface graphique, propriété raccourcie « background ».
11 octobre 20073.06Premiers plugins externes éditeur de META et SiteMap.
23 août 20073.04Première version pour Revolution, compatible toutes plateformes.
Amélioration de l'interface et ajout de nouvelles propriétés CSS.
16 septembre 20062.72Dernière version pour HyperCard.
janvier 20031.02Première version réalisée avec HyperCard.

présentation, installation et historique versions - préférences / options - la boîte de texte - menu Fichier - couleurs CSS et sélecteurs - background - police et texte - margin et padding - borders styles et arrondis - position, block, display... - listes - boîtes flexibles - outil crayon - mise en page et sauts de page - outils HTML intégrés - plugin éditeur de Métas - plugin Site Map - plugin Photosheet - plugin Lots d'images - plugin Image Map - convertisseur/mini-éditeur HTML - plugin CSS-transforms - feuilles CSS, un peu de théorie - Un exemple simple -