> Le Site du Zéro > Les news > Logiciel > Trois outils pour peaufiner votre (x)HTML/CSS avec Opera > Lecture d'une news

Trois outils pour peaufiner votre (x)HTML/CSS avec Opera

Revenir à la liste des news
Participer à la discussion

Informations

Contributeur(s) : Trent
Publié : le 29/11/2006 à 23:57:14
Catégorie : Logiciel
Visualisations : 115

Trois outils pour peaufiner votre (x)HTML/CSS avec Opera

Bonjour les zéros

Vous connaissez peut-être le troisième navigateur le plus utilisé au monde, Opera, qui vous propose toute une gamme de fonctionnalités gratuitement.

Dans le but d'améliorer l'efficacité de ses programmeurs, Opera Software vous offre aujourd'hui trois nouveaux outils très pratiques :

CSS Editor
DOM Console
DOM Snapshot

Ces outils qui s'exécutent directement depuis l'interface graphique d'Opera vous permettront de programmer le code CSS de votre site (avec CSS Editor) et d'en voir le résultat en temps réel dans une fenêtre en arrière-plan.

Vous repérerez facilement chaque élément de votre code source en toute simplicité grâce à DOM Console qui organise votre code source à la manière d'un arbre. Vous pourrez également cliquer sur l'image ou sur le texte que vous souhaitez repérer sur votre page WEB et DOM Console vous donnera son emplacement en moins d'une seconde.

Et pour finir, vous disposerez d'un visualisateur de codes sources peu commun. En effet, avec DOM Snapshot, vous verrez la page telle qu'elle s'affiche à l'écran :

Si vous avez rempli des zones de texte, DOM Snapshot les remplira dans la source. Si un script javascript a modifié le contenu d'un DIV, DOM Snapshot vous affichera la source du DIV avec le contenu modifié.

À première vue inutile, DOM Snapshot est pourtant probablement le plus utile des trois outils qui vous sont proposés aujourd'hui. Il est très utile pour déterminer les causes de bugs liés à des scripts javascript ou autre. Il permet également de récupérer la source modifiée par DOM Console.

Quelques captures d'écran de ces petits outils bien pratiques :

Captures d'écran

DOM Console		DOM Snapshot	CSS Editor

Installation des modules

Ces petits outils s'installent très facilement, quelques clics de souris suffisent. Voici comment procéder :

Vous devez vous rendre sur le site de ressources pour Webmaster d'Opera.
Cliquer sur le nom des trois outils cités précédemment et les glisser-déposer dans l'interface graphique de votre Opera.
Pour utiliser l'un de ces programmes, il vous suffira ensuite de cliquer dessus, là où vous l'avez glisser-déposé .

Téléchargement d'Opera

Si vous ne l'avez pas déjà fait, voici les liens de téléchargement d'Opera pour Windows, Mac OSX et Linux dans sa version finale (9.02) et dans sa version bêta (9.1). Les outils cités précédemment sont compatibles aussi bien avec la version finale qu'avec la bêta.

Pour windows

Pour Mac OS X

Pour Linux

Bref, ce sont là 3 outils très intéressants pour les développeurs, il ne reste qu'à voir s'ils auront les effets souhaités et s'ils peuvent être améliorés et mieux adaptés. Avant de terminer, je vous présente en surplus un 4ième module très utile !

*Roulements de tambours...*

Le modificateur de sources en temps réel !

C'est un outil intégré à Opera qui se révèle très utile. Par exemple, pour voir le rendu final de ma news en page d'accueil, j'ai fait une prévisualisation grâce à DOM Snapshot :

Vous pouvez accéder à cet outil via un simple clic droit, "source" depuis Opera 9.

63 Participations

Pour accéder à cette section
Connectez-vous !

Pseudo	Discussion
Page 1 2 3 Suivante
1 visiteur sur cette news (0 membre et 1 Anonyme)
Page 1 2 3 Suivante
Mtzgrmstr	# Posté le 30/11/2006 à 00:01:26
	Effectivement, ce sont d'excellents outils, bien qu'ils ne soient pas tout récents.
Dont kill Kenny	# Posté le 30/11/2006 à 00:01:50
études : IUT Lens	( C'est mon premier com's sur le SdZ ) Très bonne news, comme je suis en pleine conception d'un site web, les outils présentés me seront bien utiles !
anonyme	# Posté le 30/11/2006 à 00:02:10
	Citation : news Ces outils qui s'exécutent directement depuis l'interface graphique d'Opera vous permettront de programmer le code CSS de votre site (avec CSS Editor) et d'en voir le résultat en temps réel dans une fenêtre en arrière-plan. Avec FF et webdevelopper on peut modifier le CSS et le HTML <= d'après trent c'est un troll alors je barre comme ça vous lirez pas ( c'est pas méchant trent hein, juste que je trouve pas ça un troll ) En tout cas bonne news ça donnera surement envie à ceux qui sont sous IE de passer sous opera !
Talus	# Posté le 30/11/2006 à 00:06:56
"Go ahead. Make my day..." Blog Twitter close Ville : Paris Pays : France métropolitaine études : EFREI	Mignons Des projets : Talus' TPL ~ Talus' Works ~ Talus' LaBlog Des tutos : La Représentation Intervallaire A lire : Réf. PHP ~ Réf. MySQL ~ Réf. Javascript Err... Mes Mangas
Waxlabo	# Posté le 30/11/2006 à 00:09:09
	Ca sera une bonne raison pour que je puisse enfin telecharger opera, ca a l'air joli ces outils il faut accepter l'inacceptable!
Trent	# Posté le 30/11/2006 à 00:11:58
Surdoué à mi-temps.	Citation Avec FF et webdevelopper on peut modifier le CSS et le HTML Pas de troll j'ai dit. Citation Effectivement, ce sont d'excellents outils, bien qu'ils ne soient pas tout récents. La news a été proposé il y a déjà plus d'une semaine, soit juste après leur sortie
Varouj	# Posté le 30/11/2006 à 00:26:47
Varouj'z études : EFREI	Merci pour la news Je testerai "demain" (tout à l'heure) La découpe, plus qu'une passion...
Regnareb	# Posté le 30/11/2006 à 00:30:14
	Moi qui voulais les essayer... et bien c'est ce qui m'a poussé à le faire merci [Après de brefs essais] C'est tout bonnement énorme, tout ça va nous simplifier la tache pour de très nombreuses opérations : D Très très bon outils qu'ils nous ont pondus la... Et encore, je ne les ais testé que brièvements. Sortie de l'alpha d'OpEra 10 ! (sans accent !) Quaddxmas (aide)
FireFlame	# Posté le 30/11/2006 à 00:35:10
Feu de Flame	Opera m'épate de plus en plus. J'ai bien faite de passer sous celui-ci il y a quelque mois. Ces outils seront tres utils a tous créateur de site web, mais surtout, je le croie, aux débuatants voulant avoir un aperçu de leur page pour savoir ce qu'ils font. Si t'as envie de travailler... Va au toilette :P Programmeur: Visual Basic et C/C++.
Zalby	# Posté le 30/11/2006 à 00:56:06
Nom de Zeus ! Ville : Vandoeuvre-les-nancy Pays : France métropolitaine	Naviguation par souris, widgets, irc, torrent, et maintenant ces outils, bref, Opera reste pour moi le meilleur naviguateur
Trent	# Posté le 30/11/2006 à 01:00:29
Surdoué à mi-temps.	Citation Naviguation par souris, widgets, irc, torrent, et maintenant ces outils, bref, Opera reste pour moi le meilleur naviguateur Lecteur MP3, synthèse vocale, reconnaissance vocale, bloque publicitée, Navigation par onglets, Recherche intégrée, Gestionnaire de mot de passe, Sessions, Notes, Corbeille, Contrôle des cookies, Client mail, Zoom, Feuilles de style utilisateur, Mode petit écran, ... Que ne sais-il pas faire?
Zalby	# Posté le 30/11/2006 à 01:05:01
Nom de Zeus ! Ville : Vandoeuvre-les-nancy Pays : France métropolitaine	Citation : Trent Citation Naviguation par souris, widgets, irc, torrent, et maintenant ces outils, bref, Opera reste pour moi le meilleur naviguateur Lecteur MP3, synthèse vocale, reconnaissance vocale, bloque publicitée, Navigation par onglets, Recherche intégrée, Gestionnaire de mot de passe, Sessions, Notes, Corbeille, Contrôle des cookies, Client mail, Zoom, Feuilles de style utilisateur, Mode petit écran, ... Que ne sais-il pas faire? Du café ?
Trent	# Posté le 30/11/2006 à 01:13:35
Surdoué à mi-temps.	Citation : Maxim Citation : news Ces outils qui s'exécutent directement depuis l'interface graphique d'Opera vous permettront de programmer le code CSS de votre site (avec CSS Editor) et d'en voir le résultat en temps réel dans une fenêtre en arrière-plan. Avec FF et webdevelopper on peut modifier le CSS et le HTML <= d'après trent c'est un troll alors je barre comme ça vous lirez pas ( c'est pas méchant trent hein, juste que je trouve pas ça un troll ) En tout cas bonne news ça donnera surement envie à ceux qui sont sous IE de passer sous opera ! http://files.myopera.com/TR3NT/Snapshot/2Capture-6.png <--
Bling182	# Posté le 30/11/2006 à 01:53:28
Asinus Asinum Fricat	Ca ressemble aux fonctionnalités de Mozilla... (non, c'est pas un troll) Cependant, le meilleur éditeur (x)html/CSS/PHP/<tout autre langage> c'est vi <-- ça c'est un troll "To fall in love is easy, even to remain in it. Our lonelyness is cause enough." Bling182's home page
Cam	# Posté le 30/11/2006 à 01:54:34
Community manager Blog Twitter close Ville : Saint martin Pays : Guadeloupe	Pas mal je trouve, j'aime bien l'idée, ça serait cool de genre de chose pour Firefox ( peut-être que cela existe ). Me contacter par MP ou Twitter.
Trent	# Posté le 30/11/2006 à 02:08:58
Surdoué à mi-temps.	Citation Ca ressemble aux fonctionnalités de Mozilla... (non, c'est pas un troll) Effectivement, des développeurs ont recopiés après qu'opera 9 soit sorti il y a quelques mois. Mais Opera et Amaya sont toutefois les pionnier de l'édition temps réel. Toutefois, n'ayant pas testé sous firefox a caus du fait qu'il faut le relancé a chaque fois qu'on met une extension et que ce n'est pas pratique, je ne sais pas comment est l'extension d'édition de source de firefox. Par contre, on m'as appris que celui d'opera était beaucoup plus convivial, n'ayant pas testé je ne peut émmetre d'avis sur ce point. Citation Cependant, le meilleur éditeur (x)html/CSS/PHP/<tout autre langage> c'est vi faut avoué que quand on a pas d'interface graphique et qu'on veut programmer... Ça arrive incroyablement souvent...
Alex	# Posté le 30/11/2006 à 02:26:08
Je suis Dieu \/ études : Cégep Lévis-Lauzon	Citation : Bling182 Ca ressemble aux fonctionnalités de Mozilla... (non, c'est pas un troll) Cependant, le meilleur éditeur (x)html/CSS/PHP/<tout autre langage> c'est vi <-- ça c'est un troll Euh l'intérêt c'est pas d'avoir un tout-en-un . Et contrairement à ce que tu sembles insinuer, vi (et plus particulièrement vim) est un éditeur extrêmement puissant .
elludovico	# Posté le 30/11/2006 à 03:00:57
Enjoy Life !	Sympa ... bien que je n'utilise pas Opera Mon Blog \| Annuaire pour votre site \| Opening Hours
lastsseldon	# Posté le 30/11/2006 à 03:43:19
études : Paris 7 Denis Diderot	Citation : Trent Mais Opera et Amaya sont toutefois les pionnier de l'édition temps réel. D'une manière générale, l'informatique suit le même cycle de développement à chaque fois : pas d'effet sur le texte -> des effets via un balisage -> des effets via le wysiwyg. Je considère pas qu'il s'agisse d'une nouveauté majeure dans opera, c'est plutôt une constatation intelligente de leur part . (Vous noterez que c'est aussi valable pour le matos : noir&blanc -> couleur (typiquement visible dans les téléphones portables / lecteur mp3 qui suivent de loin la télé). La technologie progresse, les innovations restent les mêmes. À partir de là, libre à vous d'être original en suivant ce principe - y a plein de machins vieux comme le monde qui n'ont pas été portés en info... parce que les gens préfèrent tout réinventer (malgré que ça soit plus lent et moins bien du coup : faut toujours tenir compte de l'expérience des anciens ).) Cem > perso, j'aime bien Firebug dans le genre. Citation : Bling182 Cependant, le meilleur éditeur (x)html/CSS/PHP/<tout autre langage> c'est vi <-- ça c'est un troll Bah euh non. Un troll, à la base, c'est un débat dont les acteurs prônent des idéologies différentes via des arguments constructif sans que personne ne puisse réellement trancher pour une philosophie en particulier. Un troll, c'est donc un vieux sage intéressant qui se remet en permanence en question (et qui oublie de se laver / raser à force, d'où la légende..). Toi tu dis rien, tu le dis mal, t'es hs, tu cris au troll bêtement, tu fais que répéter ce que les autres disent et t'as pas d'argument / d'interlocuteur. Ça fait un peu beaucoup, non ? Trent > je comprends encore moins ta remarque, quand on veux éditer un texte, y a pas besoin d'interface graphique.. Genre, un textarea, c'est pas une gui pour moi. Donc ça arrive tout le temps comme situation... Quoi qu'il en soit, c'est pas le sujet de la news - donc on dérive pas, merci :] . Par contre, vous avez le droit de vous taper dessus à propos de firefox / safari / konqueror / whatever si vous vous comportez bien (c.f. les erreurs de Bling182). [,, ,, ]
super_g	# Posté le 30/11/2006 à 06:55:55
roller powaaaa!!!	je testerai ça prochainement
anonyme	# Posté le 30/11/2006 à 10:15:00
	Voilà quelque chose d'interressant qui va me renouer avec opera
KWAL01	# Posté le 30/11/2006 à 10:18:47
Maitre KAY pour vous servir ;) études : AFPA Dunkerque	ca a l'air pas mal, et surtout utile de plus je note une certaine acceleration dans les traitements des news (environs 1/jours ) du bon ca meme si le SDZ n'est pas un site d'information
Cumulus	# Posté le 30/11/2006 à 11:09:48
Blog Twitter close Ville : Beni mellal Pays : Maroc	Très intéressent ! Opera, je l'ai utilisé la semaine dernière car j'avais des soucis avec FireFox. Il est très fort, mais je l'ai trouvé beaucoup trop instable : Il se bloque 5 fois toutes les 30 minutes ! Heureusement qu'il gère bien les crash, ce qui permet de retrouver les pages ouvertes après son redémarrage. FireFox et maintenant fonctionnel, j'abandonne Opera mais je ne le désinstalle pas NB : Je parle de FireFox 2 et Opera 9 pour Linux Ubuntu. Peut être la version pour Windows et plus stable. Mon Blog \| "Le SDZ" dans toutes les langues
PhY	# Posté le 30/11/2006 à 11:34:09
	merci pour cette news Le site de Lau & PhY: des infos sur Thierry Amiel et Mylène Farmer, nos chats, des astuces informatique, et pourquoi pas nous connaître un peu ;-) Sev des bois: créatrice de bijoux
Legendarus	# Posté le 30/11/2006 à 13:00:29
Pensez Firefox 3.6 Ville : Le cendre Pays : France métropolitaine	Moué, moi je reste avec FF2.0 Etudiant en BTS IG
Regnareb	# Posté le 30/11/2006 à 13:15:47
	Citation : Cumulus Très intéressent ! Opera, je l'ai utilisé la semaine dernière car j'avais des soucis avec FireFox. Il est très fort, mais je l'ai trouvé beaucoup trop instable : Il se bloque 5 fois toutes les 30 minutes ! Heureusement qu'il gère bien les crash, ce qui permet de retrouver les pages ouvertes après son redémarrage. FireFox et maintenant fonctionnel, j'abandonne Opera mais je ne le désinstalle pas NB : Je parle de FireFox 2 et Opera 9 pour Linux Ubuntu. Peut être la version pour Windows et plus stable. C'est curieux, car Firefox est connu pour être très instable sous Linux (surtout) et Opera pour être très stable sous toutes les plates formes Citation : Trent Citation Naviguation par souris, widgets, irc, torrent, et maintenant ces outils, bref, Opera reste pour moi le meilleur naviguateur Lecteur MP3, synthèse vocale, reconnaissance vocale, bloque publicitée, Navigation par onglets, Recherche intégrée, Gestionnaire de mot de passe, Sessions, Notes, Corbeille, Contrôle des cookies, Client mail, Zoom, Feuilles de style utilisateur, Mode petit écran, ... Que ne sais-il pas faire? Client FTP... personnellement c'est LA chose que j'attend (et que beaucoup de monde attend d'ailleurs) mais apparemment c'est pas pour tout de suite... en même temps ça concerne un public assez ciblé cette fonctionnalité Sortie de l'alpha d'OpEra 10 ! (sans accent !) Quaddxmas (aide)
dk53	# Posté le 30/11/2006 à 13:31:25
Agena	Citation : Legendarus Moué, moi je reste avec FF2.0 Ué moi aussi Intel Core 2 quad Q6600 / 2048 Mo DDR2 corsair / Gigabyte GA-P35C-DS3R / Samsung 7200T/Min 2*250Go (Spinpoint T166) en Raid 0 / Nvidia GeForce 8800 GtS 512 Mo / Fortron blue storm II 400w /razer Copperhead /Antec Nine hundred. Changer une image d'eté en une image hivernale
Lpu8er	# Posté le 30/11/2006 à 13:44:55
[R34n1m4T3d] Blog Twitter close Ville : Grenoble Pays : France métropolitaine études : BTS IG Grenoble	News intéressante, bonnes nouvelles fonctionnalités... ... qui ne vont pas nous réjouir, amis codeurs php. Il faudra encore créer d'autres vérifs de sécurité, niveau formulaires en particulier. Déjà que l'édition de code sous Fifi a forcé à vérifier des choses qu'on n'aurait pas pensé à vérifier, qu'en plus les clients puissent en obtenir les résultats... Mais après tout, des fonctionnalités restent des fonctionnalités, et fort pratiques dans un tel cas ! Le or exit(mysql_error()), nom d'un chien !!! (et apprenez à concaténer avant de le faire) Oui, oui, c'est exit(), pas die() (alias, toussa). Tant qu'on y est, je mettrais aussi une gestion Exception PDO Error. Ca fera beau en signature.
Trent	# Posté le 30/11/2006 à 13:52:23
Surdoué à mi-temps.	Citation Client FTP... personnellement c'est LA chose que j'attend (et que beaucoup de monde attend d'ailleurs) mais apparemment c'est pas pour tout de suite... en même temps ça concerne un public assez ciblé cette fonctionnalité un client FTP est présent, il ne sais juste pas transféré d'information de ton ordi au serveur distant, juste l'inverse.
Regnareb	# Posté le 30/11/2006 à 13:57:13
	Citation : Lpu8er News intéressante, bonnes nouvelles fonctionnalités... ... qui ne vont pas nous réjouir, amis codeurs php. Il faudra encore créer d'autres vérifs de sécurité, niveau formulaires en particulier. Déjà que l'édition de code sous Fifi a forcé à vérifier des choses qu'on n'aurait pas pensé à vérifier, qu'en plus les clients puissent en obtenir les résultats... Mais après tout, des fonctionnalités restent des fonctionnalités, et fort pratiques dans un tel cas ! En même temps ça fait perpet que ça existe sous Opera, c'est juste que la c'est plus convivial et bien plus simple et rapide (pour la plupart) Je trouve que ça ne change strictement rien, si ces soucis de sécurité n'étaient pas réglé avant, c'était un tort Citation : Trent Citation Client FTP... personnellement c'est LA chose que j'attend (et que beaucoup de monde attend d'ailleurs) mais apparemment c'est pas pour tout de suite... en même temps ça concerne un public assez ciblé cette fonctionnalité un client FTP est présent, il ne sais juste pas transféré d'information de ton ordi au serveur distant, juste l'inverse. Encore heureux... enfin on s'est compris Sortie de l'alpha d'OpEra 10 ! (sans accent !) Quaddxmas (aide)