Développement et design Web Awaves academy Stockholm 2006

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

Développement et design Web La Suède :

Développement et design Web La structure d’accueil

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

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

Développement et design Web

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

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

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

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

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

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

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

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

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

Développement et design Web

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

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

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

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

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

Développement et design Web Définition

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.

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

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

Technologies du Web 2.0 Développement et design Web

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 :

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.. )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Développement et design Web Technologies du Web 2.0

Développement et design Web Technologies du Web 2.0