SlideShare une entreprise Scribd logo
Association 2.0 Comment faire ? Bouchaala Sabri Directeur technique MediaExtrem 1
Problématique Sites d’associations: ,[object Object]
Statique ou Dynamique géré par un administrateur.
ServicesInternet d’aujourd'hui ,[object Object],Internet d’aujourd'hui Sites d’associations Web 1.5 Web 3.0 Web 2.0 2
Problématique (2) Technologique Structural Sociologique Sites d’associations Web 1.5 Web 3.0 Web 2.0 3
Technologique Technologies et ensembles de technologies 4
Historique GML / SGML(1986) « Standard Generalized Markup Language » ,[object Object]
Titres
Chapitres
Paragraphes
...
Mise en page dépendant du support de présentation
Livre
Journal
Écran
...
la structure du document est définit par un Document Type Definition (DTD)Balises Feuilles et balises de style 5
SGML 2 HTML / XML  Dérivé : HTML ,[object Object]
Structure géré pas les navigateur
InternetSimplifiée : XML ,[object Object]
B2B
Service Web
RSS6
HTML / XHTML Les Balises: <p> C’est le contenu du paragraphe </p> <img src=‘lien_vers_image.jpg’ width=‘450px’ />  		Lu par les Navigateurs ,[object Object]
Balises sans contenu ou balises videFermeture Ouverture Contenu Attribut 7
Document XHTML de base <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; 		charset=utf-8" /> 		<title>Document sans nom</title> 		<link href="/style.css"  rel="stylesheet" type="text/css" /> 		<script type="text/javascript" src="script.js"></script> </head> <body> <p>C’est le contenu</p> </body> </html> 8
CSS Cascading Style Sheets : feuilles de style en cascade <style type="text/css"> <!-- body,td,th { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000; } body { background-color: #FFF; margin-left: 5px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; } -->     </style> <link href="style.css"  rel="stylesheet" type="text/css" /> ,[object Object],@charset "utf-8"; /* CSS Document */ body,td,th { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000; } body { background-color: #FFF; margin-left: 5px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; } 9
JAVASCRIPT(1995) JAVAECMAScript <script type="text/javascript" src="script.js"></script> <script type="text/javascript"> </script> Orienté objets à prototype Dynamisme coté client Navigateur Web N’est pas un standard ,[object Object]
Netscape
if (typeof monObjet.methode == 'function') { monObjet.methode(); }
Utilisation des Framework JS10
Demo JavaScript Exemple pratique Lien: http://www.webdesignerwall.com/demo/jquery/ 11
DOM(1998) Document Object Model Recommandation W3C Interface indépendante ,[object Object]
Plate-formePermet à des programmes informatiques / des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents Document XHTML  Objet JavaScript 12
XML eXtensible Markup Language : langage extensible de balisage Langage de balise (identique XHTML) Stocker / Transférer des données Structure définissable / validable par un schéma Lecture / Ecriture facile ,[object Object]

Contenu connexe

En vedette

Présentation
PrésentationPrésentation
Présentationeloblaz
 
Stage DIREN Poitou-Charentes
Stage DIREN Poitou-CharentesStage DIREN Poitou-Charentes
Stage DIREN Poitou-Charentes
eloblaz
 
Le keukenhof
Le keukenhofLe keukenhof
Le keukenhofmeelinda
 
Stage SMEAG - Stratégie en faveur des zones humides
Stage SMEAG - Stratégie en faveur des zones humidesStage SMEAG - Stratégie en faveur des zones humides
Stage SMEAG - Stratégie en faveur des zones humides
eloblaz
 
Le Directeur d’Organisation Professionnelle en France. Frèdèric Cuchet, CEDAP...
Le Directeur d’Organisation Professionnelle en France. Frèdèric Cuchet, CEDAP...Le Directeur d’Organisation Professionnelle en France. Frèdèric Cuchet, CEDAP...
Le Directeur d’Organisation Professionnelle en France. Frèdèric Cuchet, CEDAP...Korazza
 
« Le numérique : invitation à repenser le travail et son environnement »
« Le numérique : invitation à repenser le travail et son environnement »« Le numérique : invitation à repenser le travail et son environnement »
« Le numérique : invitation à repenser le travail et son environnement »
Maud DEGRUEL
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
Barry Feldman
 

En vedette (8)

Présentation
PrésentationPrésentation
Présentation
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Stage DIREN Poitou-Charentes
Stage DIREN Poitou-CharentesStage DIREN Poitou-Charentes
Stage DIREN Poitou-Charentes
 
Le keukenhof
Le keukenhofLe keukenhof
Le keukenhof
 
Stage SMEAG - Stratégie en faveur des zones humides
Stage SMEAG - Stratégie en faveur des zones humidesStage SMEAG - Stratégie en faveur des zones humides
Stage SMEAG - Stratégie en faveur des zones humides
 
Le Directeur d’Organisation Professionnelle en France. Frèdèric Cuchet, CEDAP...
Le Directeur d’Organisation Professionnelle en France. Frèdèric Cuchet, CEDAP...Le Directeur d’Organisation Professionnelle en France. Frèdèric Cuchet, CEDAP...
Le Directeur d’Organisation Professionnelle en France. Frèdèric Cuchet, CEDAP...
 
« Le numérique : invitation à repenser le travail et son environnement »
« Le numérique : invitation à repenser le travail et son environnement »« Le numérique : invitation à repenser le travail et son environnement »
« Le numérique : invitation à repenser le travail et son environnement »
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
 

Similaire à Association 2 0

Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
Paris Web
Paris WebParis Web
Paris Web
cyrildoussin
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
IrinaTsimpilova1
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 
Publication de documents sur le Web
Publication de documents sur le WebPublication de documents sur le Web
Publication de documents sur le Web
Saïd Radhouani
 
Mettre en place un fil RSS : mode d’emploi. Par Stéphane Roux - Assistant che...
Mettre en place un fil RSS : mode d’emploi. Par Stéphane Roux - Assistant che...Mettre en place un fil RSS : mode d’emploi. Par Stéphane Roux - Assistant che...
Mettre en place un fil RSS : mode d’emploi. Par Stéphane Roux - Assistant che...
juriconnexion
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
Nicolas Morin
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
Nicolas Morin
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 
Resource Oriented Architecture
Resource Oriented ArchitectureResource Oriented Architecture
Resource Oriented Architecture
DNG Consulting
 
Du site Web au portail d'entreprise
Du site Web au portail d'entrepriseDu site Web au portail d'entreprise
Du site Web au portail d'entreprise
mastertic
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
Renaud Dumont
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Marouan OMEZZINE
 
RSS
RSSRSS
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
Arnaud Héritier
 
Introduction au RSS
Introduction au RSSIntroduction au RSS
Introduction au RSS
olivier
 
Le WEB 2.0 en bibliothèque
Le WEB 2.0 en bibliothèqueLe WEB 2.0 en bibliothèque
Le WEB 2.0 en bibliothèque
KOMOROWSKI Corinne
 
Cours Licence Pro (Système de gestion de contenu) Partie 1
Cours Licence Pro (Système de gestion de contenu) Partie 1Cours Licence Pro (Système de gestion de contenu) Partie 1
Cours Licence Pro (Système de gestion de contenu) Partie 1
Creazzly
 
Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009
Frédéric Queudret
 

Similaire à Association 2 0 (20)

Atelier template
Atelier templateAtelier template
Atelier template
 
Paris Web
Paris WebParis Web
Paris Web
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Publication de documents sur le Web
Publication de documents sur le WebPublication de documents sur le Web
Publication de documents sur le Web
 
Mettre en place un fil RSS : mode d’emploi. Par Stéphane Roux - Assistant che...
Mettre en place un fil RSS : mode d’emploi. Par Stéphane Roux - Assistant che...Mettre en place un fil RSS : mode d’emploi. Par Stéphane Roux - Assistant che...
Mettre en place un fil RSS : mode d’emploi. Par Stéphane Roux - Assistant che...
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Présentation WPF
Présentation  WPFPrésentation  WPF
Présentation WPF
 
Resource Oriented Architecture
Resource Oriented ArchitectureResource Oriented Architecture
Resource Oriented Architecture
 
Du site Web au portail d'entreprise
Du site Web au portail d'entrepriseDu site Web au portail d'entreprise
Du site Web au portail d'entreprise
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
RSS
RSSRSS
RSS
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
 
Introduction au RSS
Introduction au RSSIntroduction au RSS
Introduction au RSS
 
Le WEB 2.0 en bibliothèque
Le WEB 2.0 en bibliothèqueLe WEB 2.0 en bibliothèque
Le WEB 2.0 en bibliothèque
 
Cours Licence Pro (Système de gestion de contenu) Partie 1
Cours Licence Pro (Système de gestion de contenu) Partie 1Cours Licence Pro (Système de gestion de contenu) Partie 1
Cours Licence Pro (Système de gestion de contenu) Partie 1
 
Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009
 

Association 2 0

  • 1. Association 2.0 Comment faire ? Bouchaala Sabri Directeur technique MediaExtrem 1
  • 2.
  • 3. Statique ou Dynamique géré par un administrateur.
  • 4.
  • 5. Problématique (2) Technologique Structural Sociologique Sites d’associations Web 1.5 Web 3.0 Web 2.0 3
  • 6. Technologique Technologies et ensembles de technologies 4
  • 7.
  • 11. ...
  • 12. Mise en page dépendant du support de présentation
  • 13. Livre
  • 16. ...
  • 17. la structure du document est définit par un Document Type Definition (DTD)Balises Feuilles et balises de style 5
  • 18.
  • 19. Structure géré pas les navigateur
  • 20.
  • 21. B2B
  • 23. RSS6
  • 24.
  • 25. Balises sans contenu ou balises videFermeture Ouverture Contenu Attribut 7
  • 26. Document XHTML de base <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sans nom</title> <link href="/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="script.js"></script> </head> <body> <p>C’est le contenu</p> </body> </html> 8
  • 27.
  • 28.
  • 30. if (typeof monObjet.methode == 'function') { monObjet.methode(); }
  • 32. Demo JavaScript Exemple pratique Lien: http://www.webdesignerwall.com/demo/jquery/ 11
  • 33.
  • 34. Plate-formePermet à des programmes informatiques / des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents Document XHTML  Objet JavaScript 12
  • 35.
  • 37. Document XML <formation xmlns="http:/mediaextrem.com/formation"> <titre>Association 2.0</titre> <lieu>Manouba</lieu> </ formation> Décrit un objet spécifique en texte ascii Compréhensible par les humains (human friendly) Langage de balise  Compréhensible par les machines 14
  • 38.
  • 42.
  • 43. JSON
  • 44. HTML
  • 46.
  • 47. CSS pour la présentation des informations
  • 48. DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée
  • 49. L'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web
  • 50. XML pour remplacer le format des données informatives (JSON) et visuelles (HTML)16
  • 51. Demo Ajax Exemple pratique Lien: http://www.xul.fr/scripts/ajax-charger-html.html 17
  • 52.
  • 53.
  • 54. Exécutée localement dans un environnement sécurisé appelé sandbox (bac à sable).18
  • 55. Demo RIA Exemple pratique Lien: http://jqueryui.com/demos/ 19
  • 56.
  • 57. Récepteur (Agrégateur / Lecteur) <link rel="alternate" type="application/rss+xml" href="http://www.xul.fr/rss.xml" title="Votre titre"> 20
  • 58. Flux RSS <?xml version="1.0" encoding="iso-8859-1"?> <rss version="2.0"> <channel> <title>Mon site</title> <description>Ceci est un exemple de flux RSS 2.0</description> <lastBuildDate>Sat, 07 Sep 2002 00:00:01 GMT</lastBuildDate> <link>http://www.example.org</link> <item> <title>Actualité N°1</title> <description>Ceci est ma première actualité</description> <pubDate>Sat, 07 Sep 2002 00:00:01 GMT</pubDate> <link>http://www.example.org/actu1</link> </item> </channel> </rss> 21
  • 59. Demo RSS Exemple pratique Lien: http://www.tunisie.gov.tn/?option=com_rd_rss&id=2 22
  • 60. Conclusion et recommandations Toute les technologies WEB 2.0 peuvent être utiliser pour un site d’association Les documents doivent être bien structurés en XHTML et conformes au standard W3C Séparer la forme du contenu : CSS-Design N’utiliser l’élément html <table> que pour afficher un tableau de donnée (TABLESS) Le DOM et le JavaScript peuvent causer des problèmes de performance. 23
  • 61. Structural Structure de site, des pages et du contenu 24
  • 62. 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é 25
  • 63.
  • 64.
  • 69.
  • 70. Demo Thème WordPress Exemple pratique Lien: http://agatheway.wordpress.com/2010/02/18/la-tunisie-une-destination-toujours-a-la-mode/ 27
  • 71. Conclusion et recommandations La structure des sites d’association ne doit pas perdre son aspect informatif l’expérience partagé par les utilisateurs est importante pour l’association et aussi pour les visiteurs 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 Installer ses applications est un acte facile sauf que le plus important et de les intégrer correctement au site 28
  • 72. Sociologique Partage de contenu, d’expérience et de visiteurs 29
  • 73. Partage de contenu Social bookmarking : marque-page social, navigation sociale, partage de signets Partager le contenu d’une page sur une site sociale. La plupart des sites sociaux offre ce service. 30
  • 74.
  • 75.
  • 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. 32
  • 77.
  • 78. l'utilisateur se connecter avec son compte Facebook
  • 79. accès aux informations de compte Facebook<script> FB.init({appId: 'yourapp id', status: true, cookie: true, xfbml: true}); FB.Event.subscribe('auth.sessionChange', function(response) { if (response.session) { // A user has logged in, and a new cookie has been saved } }); </script> 33
  • 80.
  • 81. accès aux informations de compte Facebook
  • 82. Utiliser votre propre formulaire de création de comte mais charger les donnée automatiquement du compte Facebook34