Net-Actuality

Opera 10.50, le navigateur élégant selon Opera Software.

Opera 10.50, le navigateur élégant selon Opera Software.

La société éditrice du navigateur web Opera vient de dévoiler Opera 10.50 bêta pour Windows, la nouvelle monture majeure du navigateur norvégien Opera 10.50.

Avec une interface utilisateur beaucoup plus intégrée au système hôte que dans les versions précédentes, Opera 10.50 exploite maintenant les avancées de Microsoft Windows 7, comme les Jump Lists, qui permettent d'accéder rapidement à un onglet ou à une fonctionnalité du navigateur depuis la barre des taches.

Opera 10.50 sur sa page de présentation avec trois onglets ouvertsOpera 10.50 sur Net-Actuality présentant ses onglets déployés, on voit dans l'un d'eux le Acid Test 3 réussi à 100% !

Si cette bêta n'est sortie uniquement pour Windows, ce n'est pas parce que les autres systèmes sont délaissés par Opera Software, mais simplement car la version Windows a été prête plus rapidement, les versions Unix et Mac OS ayant subit des changements assez conséquents demandant un développement plus long. Une version alpha de Opera 10.50 est d'ailleurs sortie aujourd'hui même pour GNU/linux et Mac OS.

Une interface utilisateur élégante et intégrée!

Opera Software a déjà fait de très gros travaux sur son interface ces dernières années, particulièrement depuis Opera 9.50. Et cette nouvelle bêta contient, elle aussi, un grand lot de nouveautés diverses, associées à une intégration jusqu'alors jamais égalée. Plusieurs points ont été améliorés, comme les boites de dialogues dynamiques, qui désormais ne sont plus bloquantes vis-à-vis du navigateur, comme vous le montrent les captures d'écran ci-dessous.

Une fenêtre dynamique dans Opera 10.50La nouvelle recherche de texte dans les pages web d'Opera 10.50Une fenêtre non-bloquante demandant à l'utilisateur d'entrer son pseudonyme et son mot de passeLe nouveau gestionnaire de mot de passe d'Opera qui nous demande si l'on veut enregistrer un mot de passe

C'est aussi l'occasion, pour Opera Software, de remettre un coup de peinture sur certaines fonctionnalités, comme la recherche de texte dans les pages web. A présent, celle-ci est beaucoup plus élégante et pratique à utiliser ! N'oublions pas non plus le gestionnaire de mot de passe, qui se comporte désormais de la même manière que celui de Firefox ou Chrome, en demandant si un mot de passe doit être enregistré à partir d'une barre de menu non-bloquante placée en haut de la page web.

Un effort visuel a également été apporté à la barre d'adresse, dont le champ de complétion rapide offre désormais de nouvelles fonctionnalités, comme la suppression de pages en direct ou la recherche uniquement dans les signets ou dans l'historique.

Sous Windows

On retrouve donc un Opera exploitant toutes les dernières nouveautés de Windows 7. Ainsi, l'utilisation aboutie d'Aero Glass permet d'offrir aux créateurs de skins le droit d'utiliser des options de transparence, mais aussi l'intégration des « JumpListes ». Celles-ci permettent l'accès aux sites favoris directement depuis l'icône de Opera, cela depuis la nouvelle barre des tâches de Windows 7.

Un Opera complètement transparent !

La barre de menu disparaît de l'interface et est remplacée par un bouton placé en haut à gauche du navigateur. Cela poursuit la politique des applications Windows depuis la sortie de Vista. L'intégration ne s'arrête pas là, puisqu'Opera 10.50, à l'instar de Internet Explorer, est maintenant en mesure d'afficher la liste de ses onglets sous forme de vignettes lors d'un survol depuis la barre des tâches sous Windows 7.

Sous Mac OS X

Complètement revu en Cocoa, l'interface native de Mac OS X, Opera 10.50 abandonne presque complètement Carbon. Pour rappel, Carbon est une interface de compatibilité vieillissant qu'Apple tend à abandonner. Opera améliore ainsi son design et se rapproche des nouvelles interfaces des logiciels Apple instaurées depuis Leopard.

Sous GNU/*nix

Opera 10.50, dans sa version Unix/linux, est désormais livré avec trois bibliothèques graphiques différentes. Celles-ci seront utilisées selon le système et les préférences de l'utilisateur. Ainsi, sous l'environnement de bureau GNOME, programmé avec la librairie graphique GTK+, Opera adoptera la librairie GTK+ afin de fournir une intégration beaucoup plus aboutie à l'environnement hôte. De ce fait, le logiciel bénéficiera de l'apparence et des personnalisations de l'utilisateurs.

Sous KDE, qui repose sur la librairie graphique Qt, Opera utilisera lui aussi Qt, tandis que sous les autres environnements de bureaux, le navigateur sera en mesure d'utiliser directement la Xlib. Il sera ainsi capable de fonctionner sans autre dépendance, sur toute machine équipée d'un système de type Unix disposant d'un serveur X-Window.

Carakan, le nouveau moteur Javascript d'Opera Software !

Pendant de nombreuses années, la raison d'être d'Opera était sa rapidité incontestée. En effet, il disposait d'un moteur Javascript ayant d'excellentes performances faces à ses concurrents, à une époque où ce langage était considéré comme beaucoup plus facultatif et gadget qu'aujourd'hui.

Depuis quelques années cependant, la vitesse des moteurs Javascript n'a cessé de croître, notamment avec l'arrivée de Google Chrome et son redoutable moteur baptisé « v8 ». Ce dernier fût rapidement suivi par SquirrelFish Extreme, ou encore Nitro de Safari et TraceMonkey de Firefox. Trois nouveaux moteurs reposant sur la compilation de Javascript en code natif, procédé aussi appelé « compilation à la volée », apportant des performances très élevées.

N'ayant, dans un premier temps, pas rejoint cette guerre au plus rapide et allant même jusqu'à la qualifier de ridicule, Opera Software a finalement revu sa position et entrepris la programmation d'un nouveau moteur Javascript. L'objectif étant de rattraper ses concurrents dans la course au plus rapide ; il a ainsi dévoilé, en février dernier, le nom et le concept du tout nouveau moteur Javascript maison : « Carakan » !

Et le pari est réussi, puisque dévoilé pour la première fois dans Opera 10.50 pré-alpha à noël 2009, Carakan tient toutes ses promesses et rejoint ses concurrents en matière de vitesse d'exécution Javascript

Comparatif de vitesses d'exécution Javascript sur différents tests (Sunspider, Peacekeeper, Dromaeo et V8Benchmark. Opera est le plus rapide sur tous ces tests sauf sur le v8benchmark ou il est dépassé (de peu) par Chrome 4. Ces tests ont étés réalisés sur un Intel Core 2 Duo à 2.33GHz, 4Go de ram et Windows Seven 32 bits.

Vega, la nouvelle bibliothèque d'affichage d'Opera

Quand Firefox a dévoilé son nouveau moteur Javascript révolutionnaire tirant parti de la compilation à la volée, Tracemonkey, Opera Software a noté que, si les performances Javascript avaient été largement améliorées avec ce nouveau moteur, elles restaient relativement basses lorsque que l'on demandait à Firefox de réaliser des animations et autres opérations impliquant le rendu graphique.

La conclusion tirée par Opera Software a été qu'un nouveau moteur Javascript ne suffisait pas pour ce genre d'opérations aujourd'hui de plus en plus populaires. Il en a déduit qu'il fallait aussi concevoir une nouvelle bibliothèque graphique tirant parti des ressources des cartes graphiques, afin de proposer des effets visuels bluffants sans mettre à genoux le navigateur !

C'est ainsi que, « Vega », la nouvelle bibliothèque d'affichage à haute performance de Opera 10.50, naquit ! Si elle ne tire pas encore partie des cartes graphiques, ce qui reste néanmoins le but final de cette bibliothèque, Vega rend néanmoins Opera ultra-rapide et ultra-fluide dans le traitement des animations et des images complexes (notament SVG, Canvas Javascript).

Des Widgets indépendants et puissants !

Dévoilés avec Opera 9.0 en 2006, les Widgets sont de petites applications réalisées en XHTML, CSS et Javascript ayant la capacité de sortir de la fenêtre du navigateur et d'êtres placées n'importe où sur l'écran de l'ordinateur.

Dans Opera 10.50, les Widgets sont désormais indépendants d'Opera et fonctionnent même quand ce dernier n'est pas lancé sur l'ordinateur. En outre, ils se dotent en de certaines capacités inédites telles que la capacité de lire et écrire des informations sur le disque dur de la machine, mais de manière très sécurisée, avant de pouvoir rôder sur le disque dur de l'utilisateur (ce dernier devra l'y avoir autorisé) !

Capture d'écran de la boite de dialogue d'installation d'un Widget

Opera 10.50 ouvre donc la porte à une nouvelle génération de petites applications aux différentes utilités. On trouvera, par exemple, un excellent client Twitter, un programme éducatif pour tout savoir du système solaire et bien d'autres choses sur Widgets.Opera.com !

Un support des standards HTML et CSS toujours plus abouti

Les nouveautés CSS 3

Équipé du nouveau moteur de rendu Presto 2.5, créé et commercialisé par Opera Software, Opera 10.50 permet à présent une utilisation beaucoup plus poussée des feuilles de styles en cascade CSS 3 et de HTML 5. En effet, cette bêta apporte enfin le support des populaires « border-radius », permettant d'arrondir les bordures des différents éléments d'un site web, mais aussi des transitions, qui offrent un moyen extrêmement simple aux webmestres pour ajouter de l'animation à leur site web. Dans le même ordre d'idée, les transformations permettent étirer, incliner, déformer les différents éléments des pages, et bien d'autres choses encore. Ainsi, Presto 2.5 est une vraie petite révolution.

Les transitions

Les transitions CSS 3 sont un moyen très simple de réaliser des animations, tels que des effets de survol ou de déroulement, entièrement par le biais des CSS. Alors que, par le passé, le CSS ne prenait en charge que deux états différents (l'état survolé et non survolé), les transitions CSS 3 proposent désormais une multitude d'états intermédiaires utilisables très facilement.

Safari/Webkit a été le premier à implémenter ces transitions (que l'on retrouve donc également dans Google Chrome/Webkit). Notons que, Firefox, devrait quant à lui implémenter ces transitions dans sa version 3.7.

Ci-dessous, voyez un petit exemple d'animation réalisable avec les transitions, livré avec son code source (rien que pour vous par votre site d'actualités informatique favoris !). Les navigateurs ne supportant pas les transitions se contenteront d'afficher les différents états sans animation entre ces états.

Survolez-moi et cliquez moi !!!
<style type="text/css">
<!--
#transition-exemple-01
{
	overflow: hidden;
	background-color: yellow;
	width: 30%;
	height: 30px;
	font-size: 1.2em;
	text-align: center;
	border-radius: 120px 20px;
	-o-transition-property: background-color, width, height, -o-transform;
	-o-transition-duration: 0.5s, 2s, 1.5s, 2s;
}
#transition-exemple-01:hover
{
	-o-transform: scale(1);
	color: red;
	background-color: blue;
	width: 100%;
	height: 200px;
}
#transition-exemple-01:active
{
	color: white;
	background-color: red;
	width: 40%;
	height: 120px;
	/* Les deux lignes qui suivent ne sont pas des transitions mais des transformations,
		leur fonctionnement est indiqué plus bas */
	-o-transform: scale(2.5);
	-o-transform: skew(10deg, 10deg);
}
-->
</style>
<div id="transition-exemple-01">Survolez-moi et cliquez moi !!!</div>

Les transformations

Si les transitions permettent d'animer les pages web, les transformations comblent un autre grand manque qu'avait le CSS : la possibilité d'incliner, étirer et... transformer les différents éléments d'une page web. Il est désormais possible de placer du texte avec une rotation dans une page web, cela sans avoir recourt à une image !

À l'heure actuelle, les transformations sont supportées par Firefox depuis sa version 3.5, mais aussi Safari et Google Chrome dans leurs versions finales. Ainsi, il ne manquait plus qu'Opera (quoi que... il manque encore Internet Explorer, en réalité).

Couplez les transformations avec les transitions, que nous avons vues ci-dessus, et vous êtes paré à réaliser des animations très poussées.

Border-radius

S'il y a une balise CSS 3 que tous les intégrateurs connaissent, c'est bien border-radius ! Implémentée dans Firefox dés sa version 1.0 en 2004, puis dans Webkit en 2007, elle permet simplement de créer des petits angles arrondis dans les pages web ; rien de plus, rien de moins ! Contrairement à Mozilla et Webkit, qui jugent leur implémentation de border-radius expérimentale, y ajoutant de ce fait le préfixe « -moz » et « -webkit», Opera semble juger son implémentation stable et nous propose un simple « border-radius », sans autre préfixe donc.

On notera qu'Opera a mis des années à décider d'implémenter cette propriété, pourtant très prisée des intégrateurs/designers, la firme norvégienne prônant jusqu'alors l'utilisation de SVG pour cette tâche. Dans Opera, il est possible de placer, via la propriété CSS « background-image », un document SVG en fond d'élément. Ainsi, le SVG étant vectoriel, il s'adapte automatiquement à la taille de l'élément dans lequel il est placé. Placez un document SVG avec une largeur et une hauteur en pourcentage ainsi que des bords arrondis en fond d'élément, et vous obtiendrez un résultat exactement similaire à ce que propose border-radius. Toutefois SVG ne se limite pas à cette seule tâche et peut offrir des personnalisations beaucoup plus poussées. Il est aussi beaucoup plus compliqué à « apprendre » qu'une simple propriété CSS.

Dev.Opera, le site de ressources pour développeurs d'Opera, propose d'ailleurs quelques exemples d'utilisation combinées de SVG et de Border-radius, afin d'avoir des bordures arrondies fonctionnant à la fois dans les anciennes versions de Opera et dans les navigateurs qui ne supportent pas un fond d'élément SVG, ici.

L'équipe de développement d'Internet Explorer 9 a indiqué que border-radius serait supporté par la prochaine version du navigateur de Microsoft.

Je suis un bloc avec des bords arrondis !

Et bien plus encore...

Background-image multiples

Un autre manque du CSS est aujourd'hui comblé avec les Background-images multiples, une technique permettant aux webmestres et designers de placer plusieurs images d'arrière plan sur un seul élément afin de les superposer. Différentes manières de répéter ces différentes images indépendamment les unes des autres sont aussi au menu de cette propriété.

Actuellement, cette technique est déjà supportée que par Safari 4.0 et Firefox 3.5.

border-image

S'il est depuis des années possible d'ajouter des bordures personnalisées à nos pages web, il était jusqu'alors impossible d'utiliser des images afin de les créer. En effet, il était nécessaire de réaliser de fausses bordures à l'aide d'un ou plusieurs background-image, ce qui présentait de nombreux soucis si l'on voulait que notre élément ne soit pas de taille fixe... Border-Image vient combler ce problème efficacement !

background-origin

Voici comment le navigateur visualise les différentes boites HTML :

Marge extérieure (transparente)
Bordure
Marge intérieure
Contenu

Au centre, on trouve le contenu de l'élément (le texte, les images, etc).
Ensuite, on trouve la marge intérieure puis la bordure entourant l'élément, et enfin, la marge entre cet élément et les autres éléments de la page.

Par défaut, la propriété background (permettant de donner un fond coloré ou imagé à un élément), s'applique au contenu et à la marge intérieure.

Grâce à la propriété background-origin, il est possible de changer ce comportement afin que le fond s'applique uniquement au contenu, et non à la marge intérieure ; ou au contraire, que le fond s'applique à partir de la bordure.

Aucun background-origin
background-origin: border-box

De la <video> et de l'<audio> dans le navigateur

Côté HTML 5, les très attendues balises <video> et <audio> sont supportées par cette nouvelle bêta. Pour rappel, notons qu'Opera avait été, en février 2007, le premier navigateur à implémenter ces balises dans l'une de ses versions expérimentales. Néanmoins, deux ans plus tard, elles ne sont toujours pas présentes dans la version finale du navigateur, et c'est ce qu'Opera 10.50 corrige aujourd'hui !

Polémiques autour des codecs

Ces balises, dont beaucoup de monde parle, ne permettent rien de moins que de placer du contenu vidéo et audio dans les pages web, sans utiliser un quelconque plugin. Ainsi, le navigateur devient lui même un lecteur multimédia. Beaucoup de polémiques tournent autour de cette balise. En effet, même si Firefox, Google Chrome et Safari l'ont déjà tous trois implémentée, son utilisation reste très difficile, notamment en raison des différents codecs utilisés par ces navigateurs.

Opera et Firefox, dans leur implémentation de la balise <video> avaient utilisé le codec libre de droit Theora et le format d'encapsulation OGG, libre lui aussi (format que la Wikimédia Foundation promeut depuis plusieurs années et utilise massivement sur son Wikimedia). Cependant, lorsqu'il a implémenté la balise <video>, Safari a quant à lui choisi le codec H.264, développé par le groupe de travail MPEG et soumis à certains brevets coûteux. Alors que la balise <video> venait à peine de pointer le bout de son nez, d'énormes soucis de compatibilités étaient à venir à cause de ces différences de codecs.

Quand Google Chrome est sorti en septembre 2008, il a lui aussi apporté son implémentation de la balise <video>, avec la gestion des codecs Theora et h.264, ne prenant ainsi pas partie au combat qui opposait ces deux formats. Toutefois, la situation restait, et reste aujourd'hui encore, très chaotique. Vous pouvez retrouver plus d'informations au sujet de cette guerre des codecs sur Wikipédia.

Le choix d'Opera 10.50 : ne faire aucun choix.

Dans cette version 10.50, Opera Software a choisi d'utiliser le Framework multimédia GStreamer, supportant une multitude de codecs vidéo (dont Theora et H.264), si l'utilisateur prend toutefois la peine de l'installer (le codec Theora est malgré tout inclut). Sous GNU/linux, ce choix est particulièrement approprié quand on sait que les deux principaux environnements de bureau, GNOME et KDE, tirent tous deux parti de GStreamer afin d'afficher de la vidéo et de l'audio dans leurs lecteurs intégrés. Opera bénéficiera donc de tous les codecs installés par les utilisateurs.

Pour le moment, on ne sait pas encore si Opera Software offrira une solution d'installation simplifiée pour les codecs, principalement pour les systèmes d'exploitation Windows et Mac OS.

À propos d'Opera Software...

Logo de Opera Software

Opera Software est une société norvégienne fondée par Jon Stephenson Von Tetzchner et Geir Ivarsøy en 1995, dont la principale activité est d'éditer le navigateur Web « Opera » ainsi que quelques services Web généralement liés à ce navigateur, tel que My Opera, communauté officielle des utilisateurs de Opera dans le monde. Traduit dans 17 langues différentes, My Opera fait partie des plus grands réseaux sociaux de l'Internet, avec plus de 3,9 millions de membres en janvier 2010.

Les fonctionnalités offertes par ce service sont variées et permettent, par exemple, la création de blogues et de forums. Une partie du service est entièrement consacrée au navigateur Opera et à la création de nouvelles peaux (skins), fonds d'écrans et personnalisations en tout genre. Plusieurs services sont interconnectés avec My Opera, comme Opera Link. Ce service permet la synchronisation des données et est par défaut inclus dans le navigateur Opera ; il permet ainsi le partage de signets et d'informations diverses entre les différents navigateurs Opera, instantanément.

Le navigateur Opera connaît un succès relatif sur les ordinateurs. Selon des statistiques réalisées par StatCounter, il est très en vogue dans les pays d'Europe Centrale et Europe de l'Est, comme la Russie où Opera s'accapare 38% du marché des navigateurs, l'Ukraine (44%), la Géorgie (47%), et dépasse même la barre symbolique des 50% en Biélorussie !

S'il est assez populaire dans les régions citées ci-dessus, il l'est beaucoup moins dans d'autres endroits du globe, comme les États-Unis d'Amérique, où il dispose, selon OneStat.com, de moins de 1% du marché.

Mais Opera Software se rattrape très fort sur un marché connexe, celui des navigateurs Web pour téléphones portables et dispositifs embarqués (consoles de jeux, PDA, etc.). Son navigateur, « Opera Mini », se targue en effet d'être le navigateur le plus populaire au monde, sur téléphones portables, avec plus de 50 millions d'utilisateurs réguliers en février 2010, contre 23 millions en mai 2009.

Statistiques d'utilisation de Opera Mini

La principale source de revenus d'Opera Software (75 - 80%) provient des dispositifs mobiles, grâce à des partenariats avec Nokia, Motorola, Archos et une quantité d'autres fabricants d'appareils mobiles. Les consoles de jeux sont aussi un marché où Opera Software vend des versions personnalisées de son navigateur, comme sur Nintendo Wii et Nintendo DS.

Site officiel d'Opera Software (Multilangues, français)
Communauté des utilisateurs d'Opera officielle (Multilangues, français)
Communauté francophone non officielle des utilisateurs francophones d'Opera (Français)

Flux RSS des derniers billets publiés.

Ils ont dit...

n°1 - Ecrit par Nickko (Visiteur), .

Rang : Visiteur

Salut et bravo Trent !

Un vrai régal ton article !
As-tu remarqué que l'affichage de la boite jaune avec les coins arrondi différait grandement entre Opera et Webkit ?


@++ Nickko

n°2 - Ecrit par Trent, .

Salut,
Vi j'ai nôté la différence d'interprétation de mon border radius entre Opera&gecko et Webkit sans toutefois la comprendre pour le moment.

Et merci beaucoup pour tes compliments !

Flux RSS des derniers commentaires publiés sur le billet.

Ajouter un commentaire

En vous enregistrant en tant que membre, vous vous assurez d'avoir votre propre pseudonyme réservé, tout en n'ayant plus à saisir de code de sécurité ni de pseudo. En postant un message, vous déclarez accepter nos conditions générales d'utilisation.

Captcha :Si vous voyez les champs suivants, veuillez ne surtout PAS LES COMPLETER. Ce test vise à nous protéger des robots spammeurs.
Mémoriser mes identifiants : Sauvegarde votre pseudo et votre adresse e-mail, afin que n'ayez plus à les resaisir ultérieurement.