View
517
Download
0
Category
Preview:
DESCRIPTION
Citation preview
1
ASSOCIATION 2.0Comment faire ?
Bouchaala SabriDirecteur 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
TECHNOLOGIQUETechnologies et ensembles de technologies
5
Historique GML / SGML(1986)• « Standard Generalized Markup Language »
Structure logique d'un documentTitresChapitresParagraphes...
Mise en page dépendant du support de présentationLivreJournalÉ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 FermetureContenuAttribut
8
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>
9
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; }
10
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
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="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
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="alternate" type="application/rss+xml" href="http://www.xul.fr/rss.xml" title="Votre titre">
21
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>
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
STRUCTURALStructure 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 :
ArticlesArticleRechercheCommentaire
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
SOCIOLOGIQUEPartage 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="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>
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
35
Conclusion
Partage
Recommended