Association 2 0
-
Upload
fouleni-ben-foulen -
Category
Technology
-
view
691 -
download
0
Transcript of Association 2 0
ASSOCIATION 2.0Comment faire ?
Bouchaala Sabri
Directeur technique MediaExtrem
1
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
2
Problématique (2)
• Technologique
• Structural
• Sociologique
Web 1.5 Web 2.0 Web 3.0
Sites d’associations
3
TECHNOLOGIQUETechnologies et ensembles de technologies
4
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
5
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
6
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 FermetureContenuAttribut
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" />
style.css
@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)
• JAVA ECMAScript
• <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
Internet Explorer
Netscape
if (typeof monObjet.methode == 'function') { monObjet.methode(); }
Utilisation des Framework JS
10
Demo JavaScript
• Exemple pratique
• Lien: http://www.webdesignerwall.com/demo/jquery/
11
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
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
Machine
Humain
13
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
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
15
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)
16
• Exemple pratique
• Lien: http://www.xul.fr/scripts/ajax-charger-html.html
Demo Ajax
17
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).
18
• Exemple pratique
• Lien: http://jqueryui.com/demos/
Demo RIA
19
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="alternate" type="application/rss+xml"
href="http://www.xul.fr/rss.xml" title="Votre titre">
20
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
• Exemple pratique
• Lien:
http://www.tunisie.gov.tn/?option=com_rd_rss&id=2
Demo RSS
22
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
STRUCTURALStructure de site, des pages et du contenu
24
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
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
26
• Exemple pratique
• Lien: http://agatheway.wordpress.com/2010/02/18/la-
tunisie-une-destination-toujours-a-la-mode/
Demo Thème WordPress
27
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
SOCIOLOGIQUEPartage de contenu, d’expérience et de
visiteurs
29
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
Partager sur FaceBook
• Lien XHTML:
<a href="http://www.facebook.com/sharer.php?u=<url toshare>&t=<title
of content>">Partager sur FB</a>
• FB Share JavaScript API
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script>
Donner facilement un style au lien:
<a name="fb_share" type="box_count"
share_url="YOUR_URL"></a>
31
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.
32
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>
33
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
34
Conclusion
Partage
35