Journal Les possibilités des nouvelles techno web

Posté par (page perso) .
Tags : aucun
14
16
avr.
2009
Dans les navigateurs dernières générations, arrivent des technos qui vont permettre de faire des choses vraiment avancées dans les pages web.

Quelques exemples :

* l'élément canvas, pour "dessiner" dans une page web
* l'élément video, pour afficher une video sans passer par un plugin, et ayant une intégration beaucoup plus poussée dans les pages web
* les DOM workers, qui permettent de faire des traitements javascript en parallèle (dans des threads)

Pris indépendamment, on peut se dire pourquoi pas, mais quand on combine toute ses technos, on arrive à faire des choses totalement inédites dans une page web, comme cette démo de mon ami Paul : http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-e(...)

-> traitement d'image sur une vidéo pour détecter des points précis + incrustation d'une image (png ou canvas) ou d'une autre vidéo dans cette vidéo + rotation/translation de cette incrustation selon les points détectés. Et le tout en temps réel.

Vous pouvez voir un screencast de cette démo si vous ne voulez/pouvez pas installer la dernière beta de Firefox 3.5/3.1 :
http://standblog.org/blog/post/2009/04/15/Faire-de-la-vid%C3(...)

Paul a aussi fait d'autres démos:

* Les DOM workers en action : http://blog.mozbox.org/post/2009/04/10/Web-Workers-in-action
* Amélioration de XMLHttpRequest : http://blog.mozbox.org/post/2009/04/12/Demo-Firefox-35%3A-XM(...)
* Faire des sous titres sur les vidéos avec la balise video : http://blog.mozbox.org/post/2009/03/10/video-tag-and-subtitl(...)
* Faire de l'incrustation d'image avec la balise video+canvas : http://blog.mozbox.org/post/2009/02/25/video-canvas%3A-speci(...)
* et d'autres encore... je vous laisse parcourir son blog :-)

Bref, les standards de demain vont permettre de se passer de flash pour faire du "multimedia", des jeux vraiment sympa ou encore des applications "comme sur le desktop". (Je vous laisse imaginer ce que peux aussi donner canvas + video + svg animé/SMIL etc... )

Cool non ? :-)

Note: la première demo consomme pas mal de ressources. En effet, faire du traitement d'image et faire tourner deux videos, tout ça en même temps, c'est sûr que c'est pas anodin en terme de calcul... Les machines un peu vieille, surtout en mono core risquent de souffrir...
  • # lenteur

    Posté par (page perso) . Évalué à  -1 .

    <troll>
    Vous ne trouvez donc pas firefox assez lent sous linux?
    </troll>
    • [^] # Re: lenteur

      Posté par (page perso) . Évalué à  -1 .

      Non, je le trouve très lent ! Vivement Chrom(ium parce que c'est ouvert) qui a de très bonnes performances sous Linux.
      • [^] # Re: lenteur

        Posté par . Évalué à  7 .

        Raison de plus de tester Firefox 3.1b3 et arrêter vos pleurnicheries.
    • [^] # Re: lenteur

      Posté par (page perso) . Évalué à  10 .

      Vous ne trouvez donc pas firefox assez lent sous linux?

      FireFox n'est pas lent ... c'est juste nous qui allons trop vite pour lui.
  • # Je serais déjà content avec beaucoup moins

    Posté par (page perso) . Évalué à  8 .

    Si le (x)thml et le CSS pouvaient déjà être supporté correctement, je serais déjà content.

    http://www.quirksmode.org/css/contents.html

    Avec un support total des recommandations. La plupart des scripts javascript et autres hacks pourrait être supprimés :
    - Menu dynamique
    - Coins arrondi
    - Feuilles de style alternatives
    - ...

    Cela fait déjà pas mal.
    • [^] # Re: Je serais déjà content avec beaucoup moins

      Posté par (page perso) . Évalué à  2 .

      > menu dynamique

      Comment ça menu dynamique ? C'est quoi un menu "dynamique" pour toi ? Y a des choses en HTML "standard" ou "css" qui permettent de faire des menus dynamiques ?

      >Coins arrondi

      Mozilla a été le premier à implementer les coins arrondis. ça fait des années que je fais des coins arrondis en CSS. Mise à part ça, les coins arrondis ne sont pas un standard, vu que la specification est encore en brouillon...

      >Feuilles de style alternatives

      Firefox supporte très bien les css alternatives: menu affichage > style de la page
      • [^] # Re: Je serais déjà content avec beaucoup moins

        Posté par . Évalué à  2 .

        le menu dynamique HTML "standard" c'est
        - un menu à structure hiérarchique a base de ul et de li
        - des CSS avec du :hover sur autre chose que des balises a

        IE ne supportant pas nativement le hover sur autre chose que des balises a, la technique est peu répandue ou ajoute une couche de javascript voir (horreur !) une couche de htc (un truc spécifique IE).

        Certes il n'y a pas de balise menudynamique mais il est possible d'en faire en HTML "standard"
        • [^] # Re: Je serais déjà content avec beaucoup moins

          Posté par (page perso) . Évalué à  3 .

          >Certes il n'y a pas de balise menudynamique mais il est possible d'en faire en HTML "standard"

          Oui ok, mais je ne comprend pas : sous firefox, il n'y a pas besoin de faire du js pour ça, je vois donc pas où veut en venir Alenvers.

          C'est certes emmerdant que dans certains navigateurs, on ne puisse toujours pas faire des choses simples et pourtant très utile, mais on ne va quand même pas arrêter d'implémenter des nouveaux trucs parce que d'autres sont à la traîne. Sinon personne n'avancerait ou n'innoverait.
          • [^] # Re: Je serais déjà content avec beaucoup moins

            Posté par . Évalué à  2 .

            Je te sens assez centré sur Firefox...
            Firefox est un excellent navigateur mais il n'est pas le seul.

            Il (Alenvers) n'a pas eu l'air de dire qu'il fallait arrêter le développement des navigateurs (il faudra lui demander) et je t'assure que ce n'est pas ce que j'ai dit non plus. Je me suis contenté de t'expliquer ce que pouvait être un menu dynamique "standard". Et très humblement en plus car il y a peut-être d'autres méthodes.

            Et dire "je sais le faire sous Firefox" ne veux pas encore (et de loin) dire "je sais le faire de manière standard".
            Je suis utilisateur de Konqueror de Firefox et de Chrome, selon ou je me trouve (maison boulot...) et je développe des progiciels très ciblés Internet Explorer et je t'assure que la remarque de (Alenvers) est très justifiée et que de dire "Firefox sait faire" ne fait pas (mais alors pas du tout) avancer le schmilblick.



            Seul le respect des standards établis fera avancer le Web dans la bonne direction.

            Cela veut aussi dire qu'il faut ajouter des nouveaux standards, notamment pour combler le vide autour (à la place?) de flash et les nouveaux usages.
            Mais sans effort réel, de la part de tous navigateurs les plus répandus (et pas que de Firefox), au sujet des standards existants on sera loin d'une efficacité optimum.
            • [^] # Re: Je serais déjà content avec beaucoup moins

              Posté par (page perso) . Évalué à  4 .

              >Je te sens assez centré sur Firefox...

              en effet, contributeur depuis 2003.

              >Je me suis contenté de t'expliquer ce que pouvait être un menu dynamique "standard". Et très humblement en plus car il y a peut-être d'autres méthodes.

              Oui la méthode que tu as indiqué est celle que nous avons expliqué sur openweb.eu.org, (crée par moi et 10 autres gus dans un garage en 2003).

              >dire "Firefox sait faire" ne fait pas (mais alors pas du tout) avancer le schmilblick.

              Si, bien au contraire. Si IE8 (et puis avant IE7) respecte un peu mieux les standards, c'est grâce à quoi à ton avis ? Grâce au fait que Firefox respecte les standards (ou presque : disons que l'on s'efforce d'implémenter au maximum tout les standards, mais c'est un travail de longue haleine), et grâce au fait que les developpeurs gueulent après les mauvais navigateurs, qui ne fonctionnent pas comme attendu quand on utilise les standards. Ils gueulent, font pour certains le forcing à utiliser des navigateurs plus respectueux, d'où perte de marché pour les mauvais, ce qui forcent ceux-ci à réagir et à donc s'améliorer.

              Et ça ne fait pas avancer le schmilblick seulement du coté des mauvais, mais aussi des "bons". Pour preuve cette deuxième guerre des navigateurs qui a démarré depuis le succés de Firefox.

              Toutefois, c'est une guerre "saine", dans le sens où c'est plutôt une course à l'implémentation des standards.

              Donc, oui, que "Firefox sait faire", ou même que "Webkit/Opera/Whatever sait faire", ça fait avancer le schmilblick.

              Y a qu'à voir les avancées sur le support de CSS de Firefox 3.5 par rapport à 3.0 (et 3.0 par rapport à 2.5), forcées plus ou moins par les tests Acid, mais aussi par d'autres avancées dans Webkit comme les css transforms (spec qui est maintenant devenu un draft au W3C).

              >Seul le respect des standards établis fera avancer le Web dans la bonne direction.

              C'est justement ce qui se passe chez toutes les equipes de dev des navigateurs, IE compris.
      • [^] # Re: Je serais déjà content avec beaucoup moins

        Posté par . Évalué à  8 .

        >> Feuilles de style alternatives

        > Firefox supporte très bien les css alternatives: menu affichage > style de la page

        ouais bof. c'est inutilisable en l'état puisque changer de page (en restant sur le même site) remettra la CSS par défaut et impliquera donc un nouveau changement manuel de style... ou l'emploi de zigouigouis déviants comme des extensions ou une promenade dans userContent.css

        or le besoin me parait simple à exprimer, le navigateur devrait se souvenir que je choisis telle ou telle CSS alternative tant que je reste sur le même "site".

        du coup très peu de sites en proposent, ce qui est ma foi assez ballot.
      • [^] # Re: Je serais déjà content avec beaucoup moins

        Posté par (page perso) . Évalué à  2 .

        >Comment ça menu dynamique ? C'est quoi un menu "dynamique" pour toi ? Y a des choses
        >en HTML "standard" ou "css" qui permettent de faire des menus dynamiques ?

        C'est trivial :
        http://meyerweb.com/eric/css/edge/menus/demo.html

        >Mozilla a été le premier à implementer les coins arrondis. ça fait des années que je fais

        Mozilla le fait avec une extension popriétaire -moz d'autres, avec -webkit... C'est pour le moins pas très portables.

        >des coins arrondis en CSS. Mise à part ça, les coins arrondis ne sont pas un standard, vu
        >que la specification est encore en brouillon...
        Rien n'empêche d'implémenter un draft, surtout que cela existe depuis très très longtemps 2002 ( http://www.w3.org/TR/2002/WD-css3-border-20021107/ ) et que c'est très stable depuis cette période...

        Implémenter le draft permettra de plus de détecter les problèmes et d'accélérer la sortie de la recommandation. Pour le status : http://www.w3.org/Style/CSS/current-work .

        >Firefox supporte très bien les css alternatives: menu affichage > style de la page

        Pas internet explorer et pas pleins d'autres browser...


        Aujourd'hui, on voit énormément de design :
        - avec table
        - en javascript
        - avec un taille fixe en largeur hauteur en pixel car les bords, coins (en image dans une table) et les backgrounds ne s'élargissent pas
        - Avec un switch de feuille de style coté serveur ou en javascript

        Si on voit ça c'est du fait de l'insuffisance d'implémentation des feuilles de style CSS. Beaucoups de choses sont faites avec des bricolages immondes et pas sans raison. Pleins de chose sont faites avec des solutions totalement insatisfaisantes. Faire un site portable est un enfer...
        • [^] # Re: Je serais déjà content avec beaucoup moins

          Posté par (page perso) . Évalué à  3 .

          >C'est trivial :

          oui c'est trivial. Mais il n'y a rien de spécifié dans les standards "pour faire un menu dynamique". Et vu qu'il y a mille manière de faire un menu dynamique, je vois pas pourquoi tu parles d'implémentation correcte de menu dynamique. Mais bon je pense avoir compris de travers ton premier commentaire.

          >Rien n'empêche d'implémenter un draft, surtout que cela existe depuis très très longtemps 2002

          C'est justement ce qui est fait dans Mozilla et Webkit. Cependant, comme c'est pas finalisé, ils ont mis leur prefixe -moz- et -webkit- (comme c'est autorisé dans la spec css), parce qu'effectivement, la spec peut changer d'ici l'etape "recommandation", et donc leur implementation ne plus correspondre avec la spec définitive (qui ne l'est toujours pas, definitive).

          Maintenant, rien ne t'empêche à mettre les styles -moz-border-radius, -webkit-border-radius et même border-radius, en même temps dans ta feuille de style (comme ça, ton site sera pret ;-). Pour les autres navigateurs ne reconnaissant pas ces styles, bah tant pis, coin carré, et c'est pas un drame ;-)

          >Faire un site portable est un enfer...

          bah oui, et c'est pour ça que Mozilla et Webkit font la course à l'implementation des standards, car ça force les autres à suivre (en particulier IE). Et même si IE8 a encore du retard, beaucoup de progrés ont été fait, pour le bien des developeurs web.
  • # Le détail ...

    Posté par (page perso) . Évalué à  3 .

    Ça a l'air sympa tout ça mais ...

    ... était-il vraiment obligé d'utiliser deux iphone juste pour faire 2 carrés blancs ??

    Arf, ces mac addict ...
  • # respect des standards

    Posté par (page perso) . Évalué à  2 .

    tout cela est très sympa et démontre que le respect des standards n'est pas limitant bien au contraire.

    Mais combien de temps va donc falloir que l'on perde notre temps avec des navigateurs "boulets" ?

    suivez mon regard ...
    • [^] # Re: respect des standards

      Posté par . Évalué à  3 .

      IE8 semble marquer un très bon début dans la bonne direction. espérons que ça continue comme ça
      • [^] # Re: respect des standards

        Posté par . Évalué à  2 .

        Ils font juste ce qu'il faut pour éviter que trop de monde ne passe sous FF...
        Mais il en feront surement pas qq chose qui mettrait en danger silverlight et autre. Donc vidéo et autre faudra pas rêver.
        Y'aura ptêt un rendu ACID à 100% d'un internet explorer un jour... mais ce sera juste un hack affichant un snapshot correct si le test est détecté. Faut pas se faire d'illusions.
        • [^] # Re: respect des standards

          Posté par . Évalué à  4 .

          Pas certain qu'ils le fassent pour ça : les gens qui migrent le font pour de toutes autres raisons et n'ont strictement rien à secouer des standards. Je pense qu'ils le font pour redorer leur blason vis à vis des pros (ceux qui en ont quelque-chose à secouer) car c'est d'eux qu'est partie la mode de firefox... si un jour ils se mettaient à dire "Maintenant que IE respecte les standards et permet d'afficher l'intranet correctement, on peut le laisser par défaut sur les postes clients" Ils auront gagné.

          Concernant Silverlight : il va quand même bien falloir qu'ils se rendent à l'évidence, et enterrer officiellement cette daube. La transition ne se fait pas, les pros n'ont pas envie d'y passer : ça fait 10 ans qu'ils font du Flash, le player est distribué par défaut jusque dans les téléphones portables, on frôle 100% de parts de marché… et silverlight n'apporte strictement rien de plus que flash… à part des contraintes. Il va donc bien falloir qu'ils acceptent de mettre en place un support des éléments multimedia d'html5, ce qui aura en plus pour effet de faire reculer Flash… Ils y ont tout intérêt.

          Je pense que MS a déjà abordé un revirement de politique assez sournois : jouer la carte du standard (OOXML, support d'ODF dans Office, IE8), de l'open-source ("{Open Source Heroes}", partenariats avec Novell etc) pour se faire passer pour… nous, les libristes, car nous avons le vent en poupe, parce qu'on est "IN" et que la mode et le bon goût viennes désormais de nous.

          Pour finir :
          Comment faut-il le dire ? Acid ne correspond à rien de concret dans la vraie vie de l'intégration de contenus à l'aide d'(x)html+css...
  • # .

    Posté par . Évalué à  10 .

    Un navigateur web, c'est comme une machine virtuelle :
    - exécution dans un environnement dont l'accès aux ressources est contrôlé
    - application non native de plus en plus souvent compilée à la volée
    - des bibliothèques de base multiplateforme

    Ce qui est rigolo, c'est que c'est pas la meilleure des machines virtuelles :
    - Les implémentations sont pour le moins hétérogènes ( et j'essaye de rester diplomate )
    - Un seul langage est supporté
    - Les bibliothèques de base son plutôt pauvres et le tout manque cruellement de consistance

    Bref, les standards de demain, c'est quand même moyennement funky.
    Il faut s'extasier devant une appli qui pour faire tourner 2 vidéos demande un dual core et l'installation d'une JVM de 10 Mo encore en béta ? A coté de tout ça Java parait séduisant.
    • [^] # Re: ..

      Posté par . Évalué à  4 .

      tu connais des machines virtuelles qui permettent de faire tourner un langage dynamique aussi rapidement que les versions en développement des Safari, Chrome et Firefox ? Quelle horreur cette hétérogénéité ...

      La bibliothèque de base du C est assez pauvre aussi, de même pour php ou Python. Où est le problème avec le fait d'utiliser des frameworks complémentaires?

      Tu veux quoi ? Du flex, du sylverlight, du JavaFx ? Ces petites démos on l'air anodine, mais le code est simple, et j'ai pas vu d'équivalent avec d'autres technologies.

      Je pense que tu vas pas apprécier les transformations qui vont s'opérer dans le web avec HTML 5 (Canvas3D, mode hors ligne, accès aux périphériques : Webcam ou appareil photo, SVG ..) en plus de la balise vidéo et du canvas. Si tu trouves pas ça Funky, donne moi une piste sur ce qui pourrait t'émouvoir...

      Tu peux déjà voir certaines avancées avec la dernière béta de FF. Compare surtout la consommation mémoire avec la version actuelle.

      Vraiment, ces gus dans leur garage qui créent des standards, ils perdent trop leur temps.
    • [^] # Re: .

      Posté par (page perso) . Évalué à  6 .

      T'oublies juste que java c'est nul (ça c'est fait), et que c'est un peu spécifique à internet, un navigateur internet.

      Je sais que tu peux bidouiller des chaussettes en java pour faire du réseau, mais il n'y a pas de norme, et faire installer une application java pour chaque visiteur de ton site de commerce, c'est pas efficace.

      Par contre, c'est certain, t'as de meilleures performances. Mais moins qu'en assembleur.

      Envoyé depuis mon lapin.

      • [^] # Re: .

        Posté par . Évalué à  0 .

        > T'oublies juste que java c'est nul (ça c'est fait), et que c'est un peu spécifique à internet, un navigateur internet.

        clair. java m'a fait aimer et respecter Flash :( je dis pas comment ca m'a fait mal au cul...

        > Je sais que tu peux bidouiller des chaussettes en java pour faire du réseau, mais il n'y a pas de norme

        je suppose que tu voulais dire bibliothèque bien standard ou incontournable

        > et faire installer une application java pour chaque visiteur de ton site de commerce, c'est pas efficace.

        le site des impots y arrive presque bien. c'est donc que ça serait jouable si... si Java était pas aussi bloated que Vista.
        • [^] # Re: .

          Posté par (page perso) . Évalué à  2 .

          Non, je parle bien de norme. C'est au niveau du protocole qu'il faut que ça soit pareil.
          Puis le site des impôts, il est en monopole sur le secteur. Il en use et abuse. Il y aurait une ouverture à la concurrence, et un site sans java, je pense que ce site ne serait plus utilisé.

          Envoyé depuis mon lapin.

          • [^] # Re: .

            Posté par . Évalué à  2 .

            > Non, je parle bien de norme. C'est au niveau du protocole qu'il faut que ça soit pareil.

            gné... et on l'appelerait... HTTP ? pour celui qui sera le plus utilisé
  • # Pendant qu'on est dans le dev web

    Posté par (page perso) . Évalué à  7 .

    Tiens je profite de ce journal pour parler de Pyjamas ( http://pyjs.org/ ) que j'ai découvert hier et qui est un port du Google Web Toolkit en python. En gros ça compile du python en javascript, et ça permet de faire un code portable entre les butineurs (c'est assez fou d'ailleurs qu'on en arrive à parler de cross-browser après le cross-platform).
    Vous codez une appli en python comme comme vous le feriez avec un toolkit graphique style gtk ou qt, et ça s'occupe de toute la conversion pour avoir le code côté client.
    J'ai un peu joué avec et ça marche plutôt bien, vraiment sympa (quand je pense à l'époque où je faisais du dev web et que je devais faire des hacks dans tous les sens pour des trucs simples pour que ça tourne partout, ça devrait beaucoup simplifier la vie).

    Si vous avez d'autres toolkits dans le style pour le dev web, faites tourner :)

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.