HTML Styles, générateur de feuilles de style CSS 3
Nouvelle version 4.10 - mai 2023 !
Éditeur html simplifié, images SVG…
Éditeur html simplifié, images SVG…
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.
- coder du HTML : par défaut, les pages sont générées en HTML 5 et UTF-8 ;
- un mini-éditeur permet de composer des pages « simples » ;
- générer les balises nécessaires pour une image ou un lot complet d'images, produire une table, faire un copier-coller stylé ;
- 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.
- construire une imageMap.
- 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
- le texte lui-même possède plusieurs attributs de style : police, taille, attributs de paragraphe, ornementations, couleur, etc.
- le texte « s'écoule » à l'intérieur d'un rectangle de fond (représenté ici en jaune) en réservant un espace interne baptisé « espacement » ou « padding » (représenté ici en jaune pâle).
- le fond du texte possède une couleur (et éventuellement une image) et est délimité par une bordure (ici, en rouge).
- la bordure se situe également à une certaine distance par rapport aux bords de l'écran : cet espace (transparent) s'appelle la « marge » ou « margin ».
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
1er Démarrage
|
| |||||||||
Créer un environnement de travail
|
|
en haut à droite pour prendre en compte les plugins installés.Historique des versions
| 30 avril 2023 | 4.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 2021 | 4.09 |
HTML Styles :
|
| 4 juin 2021 | 4.08 |
HTML Styles :
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 2019 | 4.06 |
HTML Styles :
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 2015 | 4.05 |
HTML Styles :
Éditeur de metas : correction d'un bug sous Linux (format dates). |
| 3 décembre 2014 | 4.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 2014 | 4.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 2013 | 4.02 | Meilleur 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 2013 | 4.01 | Ajout 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 2013 | 4.00 | Support du HTML 5 et nouvelles propriétés CSS3
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 2012 | 3.40 | Amé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 2012 | 3.39 | Correction d'une anomalie du menu plugins avec la touche commande et amélioration des plans de site. |
| 27 août 2012 | 3.38 | Amé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 2012 | 3.37 | Améliorations de la version 3.36. |
| 4 avril 2012 | 3.35 | Améliorations du plugin PhotoSheet. |
| 9 janvier 2012 | 3.34 | Améliorations techniques : simplification du paramétrage et suppression du support des couleurs NetScape. |
| 18 novembre 2011 | 3.33 | Support 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 2011 | 3.32 | Remaniement du dialogue « texte » et correction de bugs mineurs. |
| 21 juin 2011 | 3.31 | Nouvelle version du plugin « Sitemap » permettant d'uploader directement le fichier Sitemap et le fichier robots.txt à la racine du site. |
| 16 mai 2011 | 3.30 | Nouveau 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 2011 | 3.29 | Proprié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 2010 | 3.28 | Version 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 2010 | 3.27 | Nouveau bouton Pagination gérant les propriétés de mise en page et de sauts de page. |
| 22 mai 2010 | 3.26 | Améliorations techniques de la pile et des plugins. Nouvelle version de la carte background. |
| 19 août 2009 | 3.22 | ajout 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 2009 | 3.21 | Proprié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 2009 | 3.19 | Optimisations techniques diverses. Possibilité de vérifier le dernier niveau de version disponible. |
| 2 juillet 2008 | 3.14 | Ajout 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 2008 | 3.13 | Gestion des couleurs RGB et RGBA, support des propriétés Opacity et clip. |
| 14 mars 2008 | 3.11 | revue de l'interface graphique, propriété raccourcie « background ». |
| 11 octobre 2007 | 3.06 | Premiers plugins externes éditeur de META et SiteMap. |
| 23 août 2007 | 3.04 | Première version pour Revolution, compatible toutes plateformes. Amélioration de l'interface et ajout de nouvelles propriétés CSS. |
| 16 septembre 2006 | 2.72 | Dernière version pour HyperCard. |
| janvier 2003 | 1.02 | Premiè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 -