Développement et design Web Awaves academy Stockholm 2006.

Présentation au sujet: "Développement et design Web Awaves academy Stockholm 2006."— Transcription de la présentation:

1 Développement et design Web Awaves academy Stockholm 2006

2 Développement et design Web Sommaire : Partie 1: Le stage : Présentation générale - Le pays - Structure d’accueil - Projet à réaliser Projet à réaliser - Le site aWaves - La plateforme de cours en ligne et son projet e-business - Un nouveau cours sur le wimax. Partie 2: Le web 2.0 : Présentation générale - Le pays - Structure d’accueil - Projet à réaliser Projet à réaliser - Le site aWaves - La plateforme de cours en ligne - Projet e-business

3 Développement et design Web La Suède :

4 Développement et design Web La structure d’accueil

5 Développement et design Web Projets à réaliser : La refonte du site aWaves L’évolution de la plate forme de cours virtuels en ligne L’ajout du nouveau cours sur le Wimax

6 Développement et design Web La refonte du site aWaves : Défi : site en flash ergonomique et interactif

7 Développement et design Web

8

9 Formation flash et anglais 1 mois DesignRéalisation Mise en ligne 2 mois La refonte du site aWaves : Planning :

10 Développement et design Web  Bilan :  Résultat : - Site réalisé en flash et dynamique  Personnel : - Nouvelle compétence (technique/artistique)

11 Développement et design Web La plateforme de cours en ligne et son projet e-business :

12 Développement et design Web Demande : Ajouter la possibilité d’avoir plusieurs cours Sécuriser la plateforme Mettre en place une procédure d’achat de cours online

13 Développement et design Web Réalisation Rendre la plateforme « multi-cours » Travail flash (action-script) Travail design Travail php

14 Développement et design Web Réalisation Sécuriser la plateforme Défi technique du flash et de ses failles de sécurité Travail de recherche de ‘hacking’ Solutions apportés

15 Développement et design Web Réalisation Mettre en place une procédure d’achat de cours virtuel online : Créer une mini boutique Mettre en place une procédure de paiement en ligne

16 Développement et design Web Bilan  Résultat : - Plateforme multi-cours sécurisée - Solution e-business  Personnel : - Nouvelle compétence

17 Développement et design Web L’ajout du nouveau cours sur le Wimax Défi : Connaitre le wimax Elaborer un story-board avec les professeurs Réaliser les médias et support nécessaire Cours le moins rigide possible

18 Développement et design Web

19 Bilan : Résultat: Cours wimax online avec une section payante Personnel Fonction designer, réalisateur Compétence multimédia Communication

20 Développement et design Web Prise en charge des projets et responsabilité Autonomie Planification Responsabilité 2 mois4 mois Site internetTravaux plateformeProduction cours Wimax

21 Développement et design Web Bilan sur les projets Travail de communication Connaitre la réelle attente, envie du client Travail de recherche Estimer le réalisable Définir le projet Réalisation

22 Développement et design Web Le Web 2.0 Problématique du web 1.0 Définition Nouvelles technologies Architecture Technologies Utilisateurs Recul

23 Développement et design Web Problématique du web 1.0

24 Développement et design Web Définition

25 Développement et design Web Technologies du Web 2.0 Reprise des standards Web 1.0 Séparation du contenu Utilisation des technologies dynamiques et de représentation.

26 Développement et design Web Technologies du Web 2.0 Evolution technologique Nouvelle architecture Utilisation de nouveaux standards Ergonomie - design

27 Développement et design Web Technologies du Web 2.0 Architecture moderne 3 tiers Client : Interface, ergonomie : html, css, ajax, flash.. Métier : Application : php, asp.net, java, services web. Données : Base de données : mysql, postgre, sql server, oracle Client Serveur

28 Technologies du Web 2.0 Développement et design Web

29 Technologies du Web 2.0 Couche métier : WebService : permet à des applications de dialoguer à distance via Internet SOAP : un protocole d'échange d'informations ; définit un format pour l'envoi de messages (structuré en un document XML). Utilise des protocoles de transport, tels que HTTP et SMTP Non lié à un système d'exploitation ni à un langage de programmation. Logique métier Web service En pratique :

30 Développement et design Web Technologies du Web 2.0 Couche métier : Exemple : Protocole SOAP (XML + HTTP) Appel web méthode : GetPointd’eau Réponse au format xml Navigateur internet Serveur web (PHP, ASP.NET, JAVA.. )

31 Développement et design Web Technologies du Web 2.0 Avantage WebService : Interopérabilité entre divers logiciels fonctionnant sur diverses plateformes Utilisation des standards et protocoles ouverts Basés sur le protocole HTTP, les services Web peuvent fonctionner au travers de nombreux firewalls sans nécessiter des changements sur les règles de filtrage

32 Développement et design Web Technologies du Web 2.0 Couche client But final : Simplicité La révolution Ajax Niveau design Règles de bases

33 Développement et design Web Technologies du Web 2.0 Ajax :

34 Développement et design Web Technologies du Web 2.0 Ajax : Indépendant du serveur ! Ensemble de technologies : Javascript dom Xml – html - css l'objet javascript XMLHttpRequest pour échanger et manipuler les données de manière asynchroneXMLHttpRequest

35 Développement et design Web Technologies du Web 2.0 Ajax : Principe

36 Développement et design Web Technologies du Web 2.0 Ajax : Les frameworks = bibliothèques javascript Prototype (yahoo) Dojo (graphique) Aculos Yke (appel à des web service !) Inconvénient 1ére page plus lourde Niveau programmation plus élevé Indexage des moteurs de recherches Avantage Gain de programmation Vitesse de navigation Ergonomie

37 Développement et design Web Technologies du Web 2.0 Ajax : Exemple : Formulaire : saisie à la volée Interface de traduction instantanée E-boutique : panier intelligent (ajouter, enlever des articles instantanément) Page d’accueil personnalisable Bloc d’informations actualisable instantanément

38 Développement et design Web Technologies du Web 2.0 – Couche client Règle 1 : La simplicité

39 Développement et design Web Technologies du Web 2.0 – Couche client Règle 1 : La simplicité

40 Développement et design Web Technologies du Web 2.0 – Couche client Règle 2 : Une mise en page centrale

41 Développement et design Web Technologies du Web 2.0 – Couche client Règle 3 : Utilisé peu de colonnes

42 Développement et design Web Technologies du Web 2.0 – Couche client Règle 4 : Séparation avec une section supérieur

43 Développement et design Web Technologies du Web 2.0 – Couche client Règle 5 : Une navigation simple

44 Développement et design Web Technologies du Web 2.0 – Couche client Règle 6 : Avoir un logo distinctif

45 Développement et design Web Technologies du Web 2.0 – Couche client Règle 7 : Texte large

46 Développement et design Web Technologies du Web 2.0 – Couche client Règle 8 : Utiliser des couleurs fortes

47 Développement et design Web Technologies du Web 2.0 – Couche client Règle 9 : Utiliser des surfaces riches

48 Développement et design Web Technologies du Web 2.0 – Couche client Règle 10 : Utiliser de jolis icones, des étoiles …

49 Développement et design Web Technologies du Web 2.0 Dimension social : source d’information grandissante Internaute crée le web Plus en sens unique : accès en écriture Exemple : Blog (70 millions, plus de 3 en France) Wiki (WikiNews, WikiBooks, WikiTravel, et même YelloWikis ) Communauté : MySpace

50 Développement et design Web Technologies du Web 2.0

51 Développement et design Web Technologies du Web 2.0

52