Association 2 0

594 views
542 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Association 2 0

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

×