Titre

Créer du contenu Web adapté à

tous type d'écrans.

W3C en pratique: Xhtml1.1, XML, CSS, RSS, ...

Raoul Mengis, -1-Computer

Stéphane Gay, -1-Computer

Stéphane Micheloud, EPFL Lausanne

Sommaire

-1-Computer en bref

La société -1-Computer en quelques mots..

• 1991 - fondation (Sion, Suisse)
• 1994 - adoption de la plateforme Linux
  • solutions basées sur le logiciel libre
• 1997 - réalisation des premiers sites Internet
• 1999 - hébergement de sites Internet
• 2001 - développement pour l'Internet mobile
• 2002 - application des standards Web (XHTML 1.1)

Thèmes

• Comment rester indépendant de la plate-forme matérielle (terminaux mobiles, écrans plasma) ?
  • publier facilement sur des supports différents, allant du petit écran d'un mobile, au grand écran d'un plasma.
• Comment tirer profit des standards?

Sommaire

Qualité Web 1/2

Comment évaluer la qualité technique ?

• accessibilité
• compatibilité
• conformité
• sécurité, etc..

Et la qualité perçue par l'utilisateur ?

• le contenu est plus important que la forme
• la valeur ajoutée permet de fidéliser le visiteur

Qualité Web 2/2

Les erreurs d'utilisabilité selon Jakob Nielsen

Standards Web 1/3

Pourquoi les standards Web ?

• interopérabilité et une portabilité certifiée
  • droit fondamental de l'utilisateur d'utiliser le navigateur Web de son choix
• accessibilité universelle aux contenus
• production de contenu Web à moindre coût
• réduction du volume des documents
• référencement plus efficace dans les moteurs de recherche
• pérennité des documents

Standards Web 2/3

Quels standards Web ?

• Consortium W3C
  • jan. 2006 - Mobile Web Best Practices 1.0 (Draft)
  • mai 2005 - XHTML™ 2.0 (Draft)
  • mai 2001 - XHTML™ 1.1 - Module-based XHTML
  • jan. 2000 - XHTML™ 1.0
  • déc. 1999 - HTML 4.01 Specification
  • mai 1999 - Web Content Accessibility Guidelines 1.0
  • mai 1998 - CSS, level 2
  • déc. 1996 - CSS, level 1
• Section 508 Standards
  • juin 2001 - Web-based Intranet and Internet Information and Applications (1194.22)
• e-Government Unit
  • mai 2002 - Illustrated Handbook for Web Management Teams

Standards Web 3/3

• Outils de validation en ligne

  URL	(X)HTML	CSS	RSS
  scala.epfl.ch	valide	valide	valide
  www.histoireduvin.ch	valide	valide	-
  www.google.fr	46 erreurs	valide	-

  
• Tests d'accessibilité: Cynthia, Ocawa, etc..

Internet mobile 1/2

• L'Internet mobile est une étape de plus dans la révolution de la communication sans fil (« informatique nomade », « bureau itinérant»)
• Vous avez dit « terminal mobile » ?
  • Smartphone
  • Assistant personnel (PDA)
  • Console de jeu
  • Tablet PC, etc..

  On constate d'importantes divergences entre l'Europe, le Japon et les USA au niveau du comportement social et des conditions de marché

Internet mobile 2/2

• Quelques sites ciblés pour l'Internet mobile

  Nom	URL	Mobile
  Google	www.google.com www.gmail.com	mobile.google.com
  TSR	www.tsr.ch	mobile.tsr.ch
  Wikipedia	fr.wikipedia.org	fr.wapedia.org
  Mike Davidson	www.mikeindustries.com	mobile.mikeindustries.com
  Lyon Tourisme et Congrès	www.lyon-france.com	mobile.lyon-france.com
  National Hurricane Center	www.nhc.noaa.gov	www.nhc.noaa.gov/?text

• Une alternative: le service de conversion de Google permet d'optimiser l'affichage d'un site pour les terminaux mobiles
• Encore mieux: le logiciel 1Work de la société -1-Computer permet de générer des documents avec « structure liquide »

Terminaux mobiles 1/3

Un terminal mobile..

• le matériel en constante évolution en rapport d'un ordinateur de bureau
  • affichage écran: 320x200, 640x480, ....
  • mémoire: 32Mb, 64Mb, 128Mb, 1Gb,...
  • Réseau: WIFI, Bluetooth, GPRS, UMTS,...
  • Clavier, souris, TV-Commande, Touch-Screen
  • OS: Windows, Linux,...
  • CPU: toujours plus rapide 200Mhz,500Mhz, 1Ghz,...
  • Toujours plus de fonctions: photos, radio, tv, etc...

Terminaux mobiles 2/3

• Recommendations MWI
  • navigation simplifiée en début de page ???
  • accès clavier dans les menus de navigation ???
  • défilement vertical uniquement
  • mise en page sans cadres et sans tableaux
  • conformité avec les standards Web

Terminaux mobiles 3/3

• Vitesse de transfert

  Génération	Débit théorique	Couverture
  2G (GSM)	< 10 kbps	>90%
  2.5G (GPRS)	<54 kbps [1]	>90%
  2.75G (EDGE)	<250 kbps [2]	<70%
  3G (UMTS)	<2 Mbps [3]	<70%
  Wifi	11-54 Mbps	?

  ^[1] 20-30 kbps en pratique; ^[2] <200 kbps en France; ^[3] 64-128 kbps en émission, 128-348 kbps en réception
• Lisibilité des écrans
  • selon la norme Afnor (NF X 35-121), la résolution maximale d'un écran est de l'ordre de 100 ppp
  • les résolutions maximales proposées par certains constructeurs de portables ne sont pas utilisables pour un travail normal sur écran

Terminaux fixes

N'oublions pas les affichages publiques sur grands écrans !

• Services
  • émissions TV
  • publicité
  • informations
  • divertissements
• Lieux
  • Commerces: magasins, restaurants, etc..
  • Transports: aéroport, hôtels, etc..
  • Culture: concerts, musées, etc..
  • Loisirs: tourisme (offices), sports (stades), etc..

Sommaire

Documents Web

• Un document Web utilise les standards Web pour présenter les informations (sur une ou plusieurs pages)
  • La présentation d'un document Web s'adapte à tout format de sortie (écran ou imprimante, PDA ou téléphone mobile, etc..)
• Un site Web est constitué uniquement de documents Web (contrairement à un site Intra-/Internet).

• Site culturel: www.histoireduvin.ch
• Site d'entreprise: www.frialp.ch

Projet « Histoireduvin » 1/2

• Objectifs
  • tenir à jour les informations recueillies durant la dur&ée du projet (2001-2008) qui réunit plusieurs universités suisses et institutions valaisannes
  • offrir un résumé en ligne de l'ouvrage édité à la fin du projet
• Historique
  • septembre - octobre 2005
  • env. 10 jours pour le développement du canevas et le transfert initial des données (plus de 200 pages A4 de rapports)
  • ajouts réguliers de nouveaux documents par l'équipe interdisciplinaire de chercheurs

Bouteille de vin celtique

Projet « Histoireduvin » 2/2

• Caractéristiques
  • lisibilité sur toute taille d'écran
  • impression sur tout support
  • modification de la taille des polices
  • séparation du contenu et du style (structure des documents)
• Expériences
  • Taille réduite des documents (<64 KB)
  • Tableaux auto-ajustables

Projet « Frialp »

• Objectifs
  • refonte d'un site d'entreprise
  • mise à jour du site par le client
  • documents promotionnels imprimables directement depuis le site
• Historique
  • octobre - novembre 2005
  • env. 3 jours pour le développement du canevas en utilisant les imprimés de l'entreprise cliente
• Caractéristiques
  • lisibilité sur toute taille d'écran
  • impression sur tout support
  • séparation du contenu et du style (structure des documents)
  • modification de la taille des polices

REFRIGERATION - CLIMATISATION

Addendum

• Gestion des formulaires
  • Formulaire de commande
• Gestion des notes de bas de pages
  • Notes de bas de pages
• Gestion des flux RSS
  • Sion Passion: Crus de la semaine

Sommaire

Applications Web

• Une application Web utilise les standards Web pour gérer les informations (documents XML vs. SGBD).

• www.1computer.info/1work/
• www.1computer.info/artemis/

Projet « 1Work » 1/3

• Objectifs
  • outil d'édition de documents Web (CMS)
  • application de type client-serveur
  • application basée exclusivement sur le logiciel libre
  • application indépendante de tout type de matériel et de la plateforme logicielle.
• Historique
  • Début 2003 - en constante évolution
  • 8 réalisation à ce jour
  • 2 projet en cours (1 Tourisme, 1 Personalité politique)

1Work CMS

Projet « 1Work » 2/3

• Caractéristiques
  • uniquement un nagivateur et connexion internet
  • documents éditables sur affichage de petite taille
  • visibilité immédiate de la mise en page
• Technologies mises en oeuvre
  • serveur Apache + PHP
  • documents au format XML (pas de base de données)
  • support des standards XHTML 1.1, CSS 2.0 et RSS 2.0
  • (à venir) support du standard SVG 1.1

Projet « 1Work » 3/3

• Editeur en ligne
  • méta-informations: référencement
  • types de blocs: texte, image, XHTML
  • types de fichiers: page, image, modèle
  • actions: ajouter, copier, modifier, déplacer, supprimer
  • mode avancé: édition des feuilles de style (CSS)
• Expériences
  • compatibilité avec tous les navigateurs
  • ne suit pas la filière traditionnelle: document MS-Word -> document HTML -> document PDF -> fichier PAO
  • transfert directement sur clé USB, CD-ROM, etc.

Projet « Artemis » 1/2

• Objectifs
  • saisie quotidienne des données de traçabilité
  • affichage des résultats des requêtes SQL
• Historique
  • juillet 2005 à janvier 2006
  • second mandat en cours

Mémoire du Temps

Projet « Artemis » 2/2

• Caractéristiques
  • application Extranet sécurisée (SSL)
  • solution basée exclusivement sur le logiciel libre
  • affichage de tableaux sur écrans de petites tailles
  • maintenance à distance
    • programmation et modification entièrement depuis le web à l'aide d'un formulaire
• Expériences
  • création de tableaux de type Excel (fichiers CSV)

Sommaire

Conclusion

• Philosophie « One Web »
  • créer un contenu Web unique !
• Outil pour générer des documents avec « structure liquide »
  • utiliser le logiciel 1Work de la société -1-Computer !

Discussion