SlideShare une entreprise Scribd logo
ASSOCIATION 2.0 Comment faire ? Bouchaala Sabri Directeur technique MediaExtrem
Problématique Sites d’associations: Information Statique ou Dynamique géré par un administrateur. Services Internet d’aujourd'hui Utilisateurs, utilisateurs et utilisateurs … Web 1.5 Web 2.0 Web 3.0 Sites d’associations Internet d’aujourd'hui
Problématique (2) Technologique Structural Sociologique Web 1.5 Web 2.0 Web 3.0 Sites d’associations
TECHNOLOGIQUE Technologies et ensembles de technologies
Historique GML / SGML(1986) « Standard Generalized Markup Language » Structure logique d'un document 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
SGML 2 HTML / XML  Dérivé : HTML Application de SGML (non formel) Structure géré pas les navigateur Internet Simplifiée : XML humain B2B Service Web RSS
HTML / XHTML Les Balises: <p>  C’est le contenu du paragraphe  </p> <img src=‘lien_vers_image.jpg’ width=‘450px’ />  Lu par les Navigateurs HTML = Majuscule <IMG SRC=‘…’> Balises sans contenu ou balises vide Ouverture Fermeture Contenu Attribut
Document XHTML de base <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;  charset=utf-8&quot; /> <title>Document sans nom</title> <link href=&quot;/style.css&quot;  rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> <script type=&quot;text/javascript&quot; src=&quot;script.js&quot;></script> </head> <body> <p> C’est le contenu </p> </body> </html>
CSS Cascading Style Sheets : feuilles de style en cascade <style type=&quot;text/css&quot;> <!-- 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=&quot;style.css&quot;  rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> style.css @charset &quot;utf-8&quot;; /* 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; }
JAVASCRIPT(1995)
Demo JavaScript Exemple pratique Lien:  http://www.webdesignerwall.com/demo/jquery /
DOM(1998) Document Object Model Recommandation W3C Interface indépendante Langage de programmation Plate-forme Permet à 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
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 Machine Humain
Document XML <formation xmlns=&quot;http:/mediaextrem.com/formation&quot;>  <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
XMLHttpRequest Objet JavaScript : Microsoft ActiveX (IE5 1998) Mozilla 1.0 (2002) Safari1.2 (2004) Konqueror 3.4 (2005) Opera 8 (2005) Obtenir des données: XML JSON HTML Texte
Ajax Asynchronous JavaScript and XML : XML et Javascript asynchrones  Ensemble de technologie :  HTML (ou XHTML) pour la structure sémantique des informations CSS pour la présentation des informations  DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée  L'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web XML pour remplacer le format des données informatives (JSON) et visuelles (HTML)
Exemple pratique Lien:  http://www.xul.fr/scripts/ajax-charger-html.html Demo Ajax
RIA(2002) Rich Internet application : Application Internet riche Application web Caractéristiques similaires aux logiciels traditionnels installés sur un ordinateur. Dimension interactive / vitesse d'exécution sont particulièrement soignées dans ces applications web. Peut être exécutée: Exécutée sur un navigateur internet, aucune installation n'est requise. Exécutée localement dans un environnement sécurisé appelé sandbox (bac à sable).
Exemple pratique Lien:  http://jqueryui.com/demos / Demo RIA
RSS Really Simple Syndication (RSS 2.0) Syndication de contenu Web Format XML Contenu    XML Applications indépendantes: Emetteur Récepteur (Agrégateur / Lecteur) <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;>
Flux RSS <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> <rss version=&quot;2.0&quot;> <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>
Exemple pratique Lien:  http :// www.tunisie.gov.tn/?option=com_rd_rss&id=2 Demo RSS
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.
STRUCTURAL Structure de site, des pages et du contenu
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é
Thème WordPress Blog  pour les membres de l’association ou les utilisateurs Open source  http ://wordpress.org / Intégrer le design du site au design du blog grâce au Template. Thème  WordPress: Header  : l’en-tête du site, a ne pas confondre avec La balise du html. Content  : Articles Article Recherche Commentaire SideBar  : optionnel peut contenir des widgets et des  Menus Footer  : pieds de page
Exemple pratique Lien:  http://agatheway.wordpress.com/2010/02/18/la-tunisie-une-destination-toujours-a-la-mode/ Demo Thème WordPress
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
SOCIOLOGIQUE Partage de contenu, d’expérience et de visiteurs
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.
Partager sur FaceBook Lien XHTML: <a href=&quot;http://www.facebook.com/sharer.php?u=<url toshare>&t=<title of content>&quot;>Partager sur FB</a> FB Share JavaScript API <a name=&quot;fb_share&quot;></a>  <script src=&quot;http://static.ak.fbcdn.net/connect.php/js/FB.Share&quot; type=&quot;text/javascript&quot;></script> Donner facilement un style au lien: <a name=&quot;fb_share&quot; type=&quot;box_count&quot; share_url=&quot;YOUR_URL&quot;></a>
Web Plateforme Une tendance récente Poussé par Facebook (mai 2007) Plate-forme de soutien d'autres applications Utilisation de l' API  du hébergeur de service API:  Application Programming Interface : interface de programmation 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.
Plateforme FaceBook Single sign-on: Supprimer la procédure d'enregistrement pour votre site l'utilisateur  se connecter avec son compte Facebook accès aux informations de compte Facebook <script> FB.init({appId: 'your app 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>
Plateforme FaceBook(2) Account registration data: l'utilisateur  se connecter avec son compte Facebook accès aux informations de compte Facebook Utiliser votre propre formulaire de création de comte mais charger les donnée automatiquement du compte Facebook
Conclusion Partage

Contenu connexe

Tendances

Créez et mettez en ligne votre 1e page web
Créez et mettez en ligne votre 1e page webCréez et mettez en ligne votre 1e page web
Créez et mettez en ligne votre 1e page web
NETPRESTA
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
Ghodhbane Mohamed Amine
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces web
David Desrousseaux
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
Kénium
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
Axel Chalon
 
utilisabilite et accessibilite au web
utilisabilite et accessibilite au webutilisabilite et accessibilite au web
utilisabilite et accessibilite au web
Vlad Posea
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
Nicolas Morin
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
Abdoulaye Dieng
 
Presentation joomla
Presentation joomlaPresentation joomla
Presentation joomla
Cynapsys It Hotspot
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
Yaya Im
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
JDerrien
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
Stephane PERES
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
Rémy Savard
 
cours Php
cours Phpcours Php
cours Php
mohamednacim
 
Formation Créajeunes - Simplon.co par Michel Lubac
Formation Créajeunes - Simplon.co par Michel LubacFormation Créajeunes - Simplon.co par Michel Lubac
Formation Créajeunes - Simplon.co par Michel Lubac
Philemonday
 

Tendances (20)

Créez et mettez en ligne votre 1e page web
Créez et mettez en ligne votre 1e page webCréez et mettez en ligne votre 1e page web
Créez et mettez en ligne votre 1e page web
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces web
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Intro appli facebook_v1.1
Intro appli facebook_v1.1Intro appli facebook_v1.1
Intro appli facebook_v1.1
 
utilisabilite et accessibilite au web
utilisabilite et accessibilite au webutilisabilite et accessibilite au web
utilisabilite et accessibilite au web
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
Presentation joomla
Presentation joomlaPresentation joomla
Presentation joomla
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
 
Css+html
Css+htmlCss+html
Css+html
 
cours Php
cours Phpcours Php
cours Php
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
Formation Créajeunes - Simplon.co par Michel Lubac
Formation Créajeunes - Simplon.co par Michel LubacFormation Créajeunes - Simplon.co par Michel Lubac
Formation Créajeunes - Simplon.co par Michel Lubac
 

En vedette

Trabajo de campo
Trabajo de campoTrabajo de campo
Trabajo de campo
larrasco
 
El racismo
El  racismoEl  racismo
El racismo
JOHN BONILLA
 
Nuevas habilidades y conocimientos para el bibliotectario existoso
Nuevas habilidades y conocimientos para el bibliotectario existosoNuevas habilidades y conocimientos para el bibliotectario existoso
Nuevas habilidades y conocimientos para el bibliotectario existoso
Embajada de EE.UU. en el Perú
 
Finaware (Morocco)
Finaware (Morocco)Finaware (Morocco)
Finaware (Morocco)
CITIZEN ACT
 
Mecanismos de contratación estable de trabajadores extranjeros. 12.5.2011.
Mecanismos de contratación estable de trabajadores extranjeros. 12.5.2011.Mecanismos de contratación estable de trabajadores extranjeros. 12.5.2011.
Mecanismos de contratación estable de trabajadores extranjeros. 12.5.2011.
Universidad Autónoma de Barcelona
 
Concientízate valora tu medio ambiente
Concientízate  valora tu medio ambienteConcientízate  valora tu medio ambiente
Concientízate valora tu medio ambiente
marlyn mercado
 
Matriz valoración proyecto democracia y valores (2)
Matriz valoración proyecto democracia y valores (2)Matriz valoración proyecto democracia y valores (2)
Matriz valoración proyecto democracia y valores (2)
LUZ ELENA GARCIA
 
Baobaz SES - La semaine sociale 211111
Baobaz SES - La semaine sociale 211111Baobaz SES - La semaine sociale 211111
Baobaz SES - La semaine sociale 211111
armstrong
 
Resultados: Línea de Base derechos sexuales y reproductivos en Chuquisaca
Resultados: Línea de Base derechos sexuales y reproductivos en ChuquisacaResultados: Línea de Base derechos sexuales y reproductivos en Chuquisaca
Resultados: Línea de Base derechos sexuales y reproductivos en Chuquisaca
Gobernabilidad
 
Etude PwC "Carbon Factor" (nov. 2015)
Etude PwC "Carbon Factor" (nov. 2015)Etude PwC "Carbon Factor" (nov. 2015)
Etude PwC "Carbon Factor" (nov. 2015)
PwC France
 
Taller cross docking
Taller cross dockingTaller cross docking
Taller cross docking
andres felipe güiza peñaloza
 
Ponència Barcelona. 23.3.2011. CiJ.
Ponència Barcelona. 23.3.2011. CiJ. Ponència Barcelona. 23.3.2011. CiJ.
Ponència Barcelona. 23.3.2011. CiJ.
Universidad Autónoma de Barcelona
 
Firefox os et vie privee - RMLL 2015
Firefox os et vie privee - RMLL 2015Firefox os et vie privee - RMLL 2015
Firefox os et vie privee - RMLL 2015
Christophe Villeneuve
 
Semaine Ecole Entreprise 2014 : C'est quoi une entreprise ?
Semaine Ecole Entreprise 2014 : C'est quoi une entreprise ?Semaine Ecole Entreprise 2014 : C'est quoi une entreprise ?
Semaine Ecole Entreprise 2014 : C'est quoi une entreprise ?
MEDEF - Mouvement des Entreprises de France
 
D n°1 présentation agen asso 47
D n°1 présentation agen asso 47D n°1 présentation agen asso 47
D n°1 présentation agen asso 47
Alexandra Vandroux Pro
 
Dossier presse - le champ de l'oubli
Dossier presse - le champ de l'oubliDossier presse - le champ de l'oubli
Dossier presse - le champ de l'oubli
COURTOT Lionel
 
Traitement des matières résiduelles - Présentation St Michel (2novembre 2011)
Traitement des matières résiduelles - Présentation St Michel (2novembre 2011)Traitement des matières résiduelles - Présentation St Michel (2novembre 2011)
Traitement des matières résiduelles - Présentation St Michel (2novembre 2011)
Louis-Alexandre Cazal
 
Petition à l'union africaine sur le sida et l'ebola en afrique
Petition à l'union africaine sur le sida et l'ebola en afriquePetition à l'union africaine sur le sida et l'ebola en afrique
Petition à l'union africaine sur le sida et l'ebola en afrique
Patrice Piardon
 

En vedette (20)

Trabajo de campo
Trabajo de campoTrabajo de campo
Trabajo de campo
 
Psix1
Psix1Psix1
Psix1
 
El racismo
El  racismoEl  racismo
El racismo
 
Qui suis-je ?
Qui suis-je ?Qui suis-je ?
Qui suis-je ?
 
Nuevas habilidades y conocimientos para el bibliotectario existoso
Nuevas habilidades y conocimientos para el bibliotectario existosoNuevas habilidades y conocimientos para el bibliotectario existoso
Nuevas habilidades y conocimientos para el bibliotectario existoso
 
Finaware (Morocco)
Finaware (Morocco)Finaware (Morocco)
Finaware (Morocco)
 
Mecanismos de contratación estable de trabajadores extranjeros. 12.5.2011.
Mecanismos de contratación estable de trabajadores extranjeros. 12.5.2011.Mecanismos de contratación estable de trabajadores extranjeros. 12.5.2011.
Mecanismos de contratación estable de trabajadores extranjeros. 12.5.2011.
 
Concientízate valora tu medio ambiente
Concientízate  valora tu medio ambienteConcientízate  valora tu medio ambiente
Concientízate valora tu medio ambiente
 
Matriz valoración proyecto democracia y valores (2)
Matriz valoración proyecto democracia y valores (2)Matriz valoración proyecto democracia y valores (2)
Matriz valoración proyecto democracia y valores (2)
 
Baobaz SES - La semaine sociale 211111
Baobaz SES - La semaine sociale 211111Baobaz SES - La semaine sociale 211111
Baobaz SES - La semaine sociale 211111
 
Resultados: Línea de Base derechos sexuales y reproductivos en Chuquisaca
Resultados: Línea de Base derechos sexuales y reproductivos en ChuquisacaResultados: Línea de Base derechos sexuales y reproductivos en Chuquisaca
Resultados: Línea de Base derechos sexuales y reproductivos en Chuquisaca
 
Etude PwC "Carbon Factor" (nov. 2015)
Etude PwC "Carbon Factor" (nov. 2015)Etude PwC "Carbon Factor" (nov. 2015)
Etude PwC "Carbon Factor" (nov. 2015)
 
Taller cross docking
Taller cross dockingTaller cross docking
Taller cross docking
 
Ponència Barcelona. 23.3.2011. CiJ.
Ponència Barcelona. 23.3.2011. CiJ. Ponència Barcelona. 23.3.2011. CiJ.
Ponència Barcelona. 23.3.2011. CiJ.
 
Firefox os et vie privee - RMLL 2015
Firefox os et vie privee - RMLL 2015Firefox os et vie privee - RMLL 2015
Firefox os et vie privee - RMLL 2015
 
Semaine Ecole Entreprise 2014 : C'est quoi une entreprise ?
Semaine Ecole Entreprise 2014 : C'est quoi une entreprise ?Semaine Ecole Entreprise 2014 : C'est quoi une entreprise ?
Semaine Ecole Entreprise 2014 : C'est quoi une entreprise ?
 
D n°1 présentation agen asso 47
D n°1 présentation agen asso 47D n°1 présentation agen asso 47
D n°1 présentation agen asso 47
 
Dossier presse - le champ de l'oubli
Dossier presse - le champ de l'oubliDossier presse - le champ de l'oubli
Dossier presse - le champ de l'oubli
 
Traitement des matières résiduelles - Présentation St Michel (2novembre 2011)
Traitement des matières résiduelles - Présentation St Michel (2novembre 2011)Traitement des matières résiduelles - Présentation St Michel (2novembre 2011)
Traitement des matières résiduelles - Présentation St Michel (2novembre 2011)
 
Petition à l'union africaine sur le sida et l'ebola en afrique
Petition à l'union africaine sur le sida et l'ebola en afriquePetition à l'union africaine sur le sida et l'ebola en afrique
Petition à l'union africaine sur le sida et l'ebola en afrique
 

Similaire à Association 2 0

Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
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
 
Paris Web
Paris WebParis Web
Paris Web
cyrildoussin
 
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
 
Resource Oriented Architecture
Resource Oriented ArchitectureResource Oriented Architecture
Resource Oriented Architecture
DNG Consulting
 
Jump Camp - HTML5
Jump Camp - HTML5Jump Camp - HTML5
Jump Camp - HTML5
chaudavid
 
RSS
RSSRSS
Web et communication
Web et communicationWeb et communication
Web et communication
laureno
 
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Peak Ace
 
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
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
IrinaTsimpilova1
 
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
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
Fnot
 
TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)
Stéphane Rouilly
 
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
 
XHL8
XHL8XHL8
XHL8
hypranet
 
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
 

Similaire à Association 2 0 (20)

Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
Publication de documents sur le Web
Publication de documents sur le WebPublication de documents sur le Web
Publication de documents sur le Web
 
Paris Web
Paris WebParis Web
Paris Web
 
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
 
Resource Oriented Architecture
Resource Oriented ArchitectureResource Oriented Architecture
Resource Oriented Architecture
 
Jump Camp - HTML5
Jump Camp - HTML5Jump Camp - HTML5
Jump Camp - HTML5
 
RSS
RSSRSS
RSS
 
Présentation WPF
Présentation  WPFPrésentation  WPF
Présentation WPF
 
Web et communication
Web et communicationWeb et communication
Web et communication
 
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
 
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
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
 
TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)
 
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...
 
XHL8
XHL8XHL8
XHL8
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 

Association 2 0

  • 1. ASSOCIATION 2.0 Comment faire ? Bouchaala Sabri Directeur technique MediaExtrem
  • 2. Problématique Sites d’associations: Information Statique ou Dynamique géré par un administrateur. Services Internet d’aujourd'hui Utilisateurs, utilisateurs et utilisateurs … Web 1.5 Web 2.0 Web 3.0 Sites d’associations Internet d’aujourd'hui
  • 3. Problématique (2) Technologique Structural Sociologique Web 1.5 Web 2.0 Web 3.0 Sites d’associations
  • 4. TECHNOLOGIQUE Technologies et ensembles de technologies
  • 5. Historique GML / SGML(1986) « Standard Generalized Markup Language » Structure logique d'un document 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
  • 6. SGML 2 HTML / XML Dérivé : HTML Application de SGML (non formel) Structure géré pas les navigateur Internet Simplifiée : XML humain B2B Service Web RSS
  • 7. HTML / XHTML Les Balises: <p> C’est le contenu du paragraphe </p> <img src=‘lien_vers_image.jpg’ width=‘450px’ /> Lu par les Navigateurs HTML = Majuscule <IMG SRC=‘…’> Balises sans contenu ou balises vide Ouverture Fermeture Contenu Attribut
  • 8. Document XHTML de base <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>Document sans nom</title> <link href=&quot;/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> <script type=&quot;text/javascript&quot; src=&quot;script.js&quot;></script> </head> <body> <p> C’est le contenu </p> </body> </html>
  • 9. CSS Cascading Style Sheets : feuilles de style en cascade <style type=&quot;text/css&quot;> <!-- 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=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> style.css @charset &quot;utf-8&quot;; /* 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; }
  • 11. Demo JavaScript Exemple pratique Lien: http://www.webdesignerwall.com/demo/jquery /
  • 12. DOM(1998) Document Object Model Recommandation W3C Interface indépendante Langage de programmation Plate-forme Permet à 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
  • 13. 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 Machine Humain
  • 14. Document XML <formation xmlns=&quot;http:/mediaextrem.com/formation&quot;> <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
  • 15. XMLHttpRequest Objet JavaScript : Microsoft ActiveX (IE5 1998) Mozilla 1.0 (2002) Safari1.2 (2004) Konqueror 3.4 (2005) Opera 8 (2005) Obtenir des données: XML JSON HTML Texte
  • 16. Ajax Asynchronous JavaScript and XML : XML et Javascript asynchrones Ensemble de technologie : HTML (ou XHTML) pour la structure sémantique des informations CSS pour la présentation des informations DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée L'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web XML pour remplacer le format des données informatives (JSON) et visuelles (HTML)
  • 17. Exemple pratique Lien: http://www.xul.fr/scripts/ajax-charger-html.html Demo Ajax
  • 18. RIA(2002) Rich Internet application : Application Internet riche Application web Caractéristiques similaires aux logiciels traditionnels installés sur un ordinateur. Dimension interactive / vitesse d'exécution sont particulièrement soignées dans ces applications web. Peut être exécutée: Exécutée sur un navigateur internet, aucune installation n'est requise. Exécutée localement dans un environnement sécurisé appelé sandbox (bac à sable).
  • 19. Exemple pratique Lien: http://jqueryui.com/demos / Demo RIA
  • 20. RSS Really Simple Syndication (RSS 2.0) Syndication de contenu Web Format XML Contenu  XML Applications indépendantes: Emetteur Récepteur (Agrégateur / Lecteur) <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;>
  • 21. Flux RSS <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> <rss version=&quot;2.0&quot;> <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>
  • 22. Exemple pratique Lien: http :// www.tunisie.gov.tn/?option=com_rd_rss&id=2 Demo RSS
  • 23. 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.
  • 24. STRUCTURAL Structure de site, des pages et du contenu
  • 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. Thème WordPress Blog pour les membres de l’association ou les utilisateurs Open source http ://wordpress.org / Intégrer le design du site au design du blog grâce au Template. Thème WordPress: Header : l’en-tête du site, a ne pas confondre avec La balise du html. Content : Articles Article Recherche Commentaire SideBar : optionnel peut contenir des widgets et des Menus Footer : pieds de page
  • 27. Exemple pratique Lien: http://agatheway.wordpress.com/2010/02/18/la-tunisie-une-destination-toujours-a-la-mode/ Demo Thème WordPress
  • 28. 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
  • 29. SOCIOLOGIQUE Partage de contenu, d’expérience et de visiteurs
  • 30. 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.
  • 31. Partager sur FaceBook Lien XHTML: <a href=&quot;http://www.facebook.com/sharer.php?u=<url toshare>&t=<title of content>&quot;>Partager sur FB</a> FB Share JavaScript API <a name=&quot;fb_share&quot;></a> <script src=&quot;http://static.ak.fbcdn.net/connect.php/js/FB.Share&quot; type=&quot;text/javascript&quot;></script> Donner facilement un style au lien: <a name=&quot;fb_share&quot; type=&quot;box_count&quot; share_url=&quot;YOUR_URL&quot;></a>
  • 32. Web Plateforme Une tendance récente Poussé par Facebook (mai 2007) Plate-forme de soutien d'autres applications Utilisation de l' API du hébergeur de service API: Application Programming Interface : interface de programmation 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.
  • 33. Plateforme FaceBook Single sign-on: Supprimer la procédure d'enregistrement pour votre site l'utilisateur se connecter avec son compte Facebook accès aux informations de compte Facebook <script> FB.init({appId: 'your app 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>
  • 34. Plateforme FaceBook(2) Account registration data: l'utilisateur se connecter avec son compte Facebook accès aux informations de compte Facebook Utiliser votre propre formulaire de création de comte mais charger les donnée automatiquement du compte Facebook