Association 2 0

836 views
759 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
836
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Association 2 0

  1. 1. Association 2.0<br />Comment faire ?<br />Bouchaala Sabri<br />Directeur technique MediaExtrem<br />1<br />
  2. 2. Problématique<br />Sites d’associations:<br /><ul><li>Information
  3. 3. Statique ou Dynamique géré par un administrateur.
  4. 4. Services</li></ul>Internet d’aujourd'hui<br /><ul><li>Utilisateurs, utilisateurs et utilisateurs …</li></ul>Internet d’aujourd'hui<br />Sites d’associations<br />Web 1.5<br />Web 3.0<br />Web 2.0<br />2<br />
  5. 5. Problématique (2)<br />Technologique<br />Structural<br />Sociologique<br />Sites d’associations<br />Web 1.5<br />Web 3.0<br />Web 2.0<br />3<br />
  6. 6. Technologique<br />Technologies et ensembles de technologies<br />4<br />
  7. 7. Historique GML / SGML(1986)<br />« Standard Generalized Markup Language »<br /><ul><li>Structure logique d'un document
  8. 8. Titres
  9. 9. Chapitres
  10. 10. Paragraphes
  11. 11. ...
  12. 12. Mise en page dépendant du support de présentation
  13. 13. Livre
  14. 14. Journal
  15. 15. Écran
  16. 16. ...
  17. 17. la structure du document est définit par un Document Type Definition (DTD)</li></ul>Balises<br />Feuilles et balises de style<br />5<br />
  18. 18. SGML 2 HTML / XML <br />Dérivé : HTML<br /><ul><li>Application de SGML (non formel)
  19. 19. Structure géré pas les navigateur
  20. 20. Internet</li></ul>Simplifiée : XML<br /><ul><li>humain
  21. 21. B2B
  22. 22. Service Web
  23. 23. RSS</li></ul>6<br />
  24. 24. HTML / XHTML<br />Les Balises:<br /><p> C’est le contenu du paragraphe </p><br /><img src=‘lien_vers_image.jpg’ width=‘450px’ /> <br /> Lu par les Navigateurs<br /><ul><li>HTML = Majuscule <IMG SRC=‘…’>
  25. 25. Balises sans contenu ou balises vide</li></ul>Fermeture<br />Ouverture<br />Contenu<br />Attribut<br />7<br />
  26. 26. Document XHTML de base<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>Document sans nom</title><br /> <link href="/style.css" rel="stylesheet" type="text/css" /><br /> <script type="text/javascript" src="script.js"></script><br /></head><br /><body><br /><p>C’est le contenu</p><br /></body><br /></html><br />8<br />
  27. 27. CSS<br />Cascading Style Sheets : feuilles de style en cascade<br /><style type="text/css"><br /><!--<br />body,td,th { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000; }<br />body { background-color: #FFF; margin-left: 5px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; }<br />--><br /> </style><br /><link href="style.css" rel="stylesheet" type="text/css" /><br /><ul><li>style.css</li></ul>@charset "utf-8";<br />/* CSS Document */<br />body,td,th { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000; }<br />body { background-color: #FFF; margin-left: 5px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; }<br />9<br />
  28. 28. JAVASCRIPT(1995)<br />JAVAECMAScript<br /><script type="text/javascript" src="script.js"></script><br /><script type="text/javascript"> </script><br />Orienté objets à prototype<br />Dynamisme coté client Navigateur Web<br />N’est pas un standard<br /><ul><li>Internet Explorer
  29. 29. Netscape
  30. 30. if (typeof monObjet.methode == 'function') { monObjet.methode(); }
  31. 31. Utilisation des Framework JS</li></ul>10<br />
  32. 32. Demo JavaScript<br />Exemple pratique<br />Lien: http://www.webdesignerwall.com/demo/jquery/<br />11<br />
  33. 33. DOM(1998)<br />Document Object Model<br />Recommandation W3C<br />Interface indépendante<br /><ul><li>Langage de programmation
  34. 34. Plate-forme</li></ul>Permet à des programmes informatiques / des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents<br />Document XHTML  Objet JavaScript<br />12<br />
  35. 35. XML<br />eXtensible Markup Language : langage extensible de balisage<br />Langage de balise (identique XHTML)<br />Stocker / Transférer des données<br />Structure définissable / validable par un schéma<br />Lecture / Ecriture facile<br /><ul><li>Machine
  36. 36. Humain</li></ul>13<br />
  37. 37. Document XML<br /><formation xmlns="http:/mediaextrem.com/formation"> <titre>Association 2.0</titre><br /> <lieu>Manouba</lieu><br /></ formation><br />Décrit un objet spécifique en texte ascii <br />Compréhensible par les humains (human friendly)<br />Langage de balise  Compréhensible par les machines<br />14<br />
  38. 38. XMLHttpRequest<br />Objet JavaScript :<br /><ul><li>Microsoft ActiveX (IE5 1998)
  39. 39. Mozilla 1.0 (2002)
  40. 40. Safari1.2 (2004)
  41. 41. Konqueror 3.4 (2005)
  42. 42. Opera 8 (2005)</li></ul>Obtenir des données:<br /><ul><li>XML
  43. 43. JSON
  44. 44. HTML
  45. 45. Texte</li></ul>15<br />
  46. 46. Ajax<br />Asynchronous JavaScript and XML : XML et Javascript asynchrones <br />Ensemble de technologie : <br /><ul><li>HTML (ou XHTML) pour la structure sémantique des informations
  47. 47. CSS pour la présentation des informations
  48. 48. DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée
  49. 49. L'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web
  50. 50. XML pour remplacer le format des données informatives (JSON) et visuelles (HTML)</li></ul>16<br />
  51. 51. Demo Ajax<br />Exemple pratique<br />Lien: http://www.xul.fr/scripts/ajax-charger-html.html<br />17<br />
  52. 52. RIA(2002)<br />Rich Internet application : Application Internet riche<br />Application web<br /><ul><li>Caractéristiques similaires aux logiciels traditionnels installés sur un ordinateur.
  53. 53. Dimension interactive / vitesse d'exécution sont particulièrement soignées dans ces applications web.</li></ul>Peut être exécutée:<br /><ul><li>Exécutée sur un navigateur internet, aucune installation n'est requise.
  54. 54. Exécutée localement dans un environnement sécurisé appelé sandbox (bac à sable).</li></ul>18<br />
  55. 55. Demo RIA<br />Exemple pratique<br />Lien: http://jqueryui.com/demos/<br />19<br />
  56. 56. RSS<br />Really Simple Syndication (RSS 2.0)<br />Syndication de contenu Web<br />Format XML<br /><ul><li>Contenu  XML</li></ul>Applications indépendantes:<br /><ul><li>Emetteur
  57. 57. Récepteur (Agrégateur / Lecteur)</li></ul> <link rel="alternate" type="application/rss+xml" href="http://www.xul.fr/rss.xml" title="Votre titre"><br />20<br />
  58. 58. Flux RSS<br /><?xml version="1.0" encoding="iso-8859-1"?><br /><rss version="2.0"><br /> <channel><br /> <title>Mon site</title><br /> <description>Ceci est un exemple de flux RSS 2.0</description><br /> <lastBuildDate>Sat, 07 Sep 2002 00:00:01 GMT</lastBuildDate><br /> <link>http://www.example.org</link><br /> <item><br /> <title>Actualité N°1</title><br /> <description>Ceci est ma première actualité</description><br /> <pubDate>Sat, 07 Sep 2002 00:00:01 GMT</pubDate><br /> <link>http://www.example.org/actu1</link><br /> </item><br /> </channel><br /></rss><br />21<br />
  59. 59. Demo RSS<br />Exemple pratique<br />Lien: http://www.tunisie.gov.tn/?option=com_rd_rss&id=2<br />22<br />
  60. 60. Conclusion et recommandations<br />Toute les technologies WEB 2.0 peuvent être utiliser pour un site d’association<br />Les documents doivent être bien structurés en XHTML et conformes au standard W3C<br />Séparer la forme du contenu : CSS-Design <br />N’utiliser l’élément html <table> que pour afficher un tableau de donnée (TABLESS)<br />Le DOM et le JavaScript peuvent causer des problèmes de performance.<br />23<br />
  61. 61. Structural<br />Structure de site, des pages et du contenu<br />24<br />
  62. 62. Contenu 2.0<br />Web 1.0<br />Web 2.0<br />Les utilisateurs individuels édite des sites à des fréquences différentes.<br />support d'écriture mono-utilisateur.<br />Lot de contenu généré par les utilisateurs.<br />Les changements n'ont pas à être fait par le propriétaire du contenu.<br />Vos amis peuvent écrire des commentaires qui constituerait un changement.<br />La page est plus un espace partagé<br />25<br />
  63. 63. Thème WordPress<br />Blog pour les membres de l’association ou les utilisateurs<br /><ul><li>Open source http://wordpress.org/
  64. 64. Intégrer le design du site au design du blog grâce au Template.</li></ul>Thème WordPress:<br /><ul><li>Header : l’en-tête du site, a ne pas confondre avec</li></ul>La balise du html.<br /><ul><li>Content :
  65. 65. Articles
  66. 66. Article
  67. 67. Recherche
  68. 68. Commentaire
  69. 69. SideBar : optionnel peut contenir des widgets et des </li></ul>Menus<br /><ul><li>Footer : pieds de page</li></ul>26<br />
  70. 70. Demo Thème WordPress<br />Exemple pratique<br />Lien: http://agatheway.wordpress.com/2010/02/18/la-tunisie-une-destination-toujours-a-la-mode/<br />27<br />
  71. 71. Conclusion et recommandations<br />La structure des sites d’association ne doit pas perdre son aspect informatif<br />l’expérience partagé par les utilisateurs est importante pour l’association et aussi pour les visiteurs<br />L’ajout des applications tel que les blog, les wiki, le broadcast, les lecteurs RSS est un élément majeur permettant l’utilisation parfaite du WEB 2.0<br />Installer ses applications est un acte facile sauf que le plus important et de les intégrer correctement au site<br />28<br />
  72. 72. Sociologique<br />Partage de contenu, d’expérience et de visiteurs<br />29<br />
  73. 73. Partage de contenu<br />Social bookmarking : marque-page social, navigation sociale, partage de signets<br />Partager le contenu d’une page sur une site sociale.<br />La plupart des sites sociaux offre ce service.<br />30<br />
  74. 74. Partager sur FaceBook<br />Lien XHTML:<br /><a href="http://www.facebook.com/sharer.php?u=<url toshare>&t=<title of content>">Partager sur FB</a><br />FB Share JavaScript API<br /><a name="fb_share"></a> <br /><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script><br /><ul><li>Donner facilement un style au lien:</li></ul><a name="fb_share" type="box_count" share_url="YOUR_URL"></a><br />31<br />
  75. 75. Web Plateforme<br />Une tendance récente<br />Poussé par Facebook (mai 2007)<br />Plate-forme de soutien d'autres applications<br />Utilisation de l'API du hébergeur de service<br />API: <br /><ul><li>Application Programming Interface : interface de programmation
  76. 76. Ensemble de fonctions, procédures ou classes mises à disposition des programmes informatiques par une bibliothèque logicielle, un système d'exploitation ou un service. </li></ul>32<br />
  77. 77. Plateforme FaceBook<br />Single sign-on:<br /><ul><li>Supprimer la procédure d'enregistrement pour votre site
  78. 78. l'utilisateur se connecter avec son compte Facebook
  79. 79. accès aux informations de compte Facebook</li></ul><script><br />FB.init({appId: 'yourapp id', status: true, cookie: true, xfbml: true});<br />FB.Event.subscribe('auth.sessionChange', function(response) {<br /> if (response.session) {<br /> // A user has logged in, and a new cookie has been saved<br /> } <br />});<br /></script><br />33<br />
  80. 80. Plateforme FaceBook(2)<br />Accountregistration data:<br /><ul><li>l'utilisateur se connecter avec son compte Facebook
  81. 81. accès aux informations de compte Facebook
  82. 82. Utiliser votre propre formulaire de création de comte mais charger les donnée automatiquement du compte Facebook</li></ul>34<br />
  83. 83. Conclusion<br />Partage<br />35<br />

×