Ce qu’il faut savoir avant de commencer

Internet…un vocabulaire à maîtriser Une architecture « client/serveur » Le « réseau des réseaux » Procotole TCP/IP Transmission Transfert Protocol / Internet Protocol Langage de base de communication entre les ordinateurs Adresse IP : IP serveur local : http://127.0.0.1 (ou localhost) IP local dans un LAN : http://192.168.0.1 IP public sur le Net : http://251.125.20.25 PING TRACERT ou (traceroute sur Linux) Autres protocoles : NetBEUI, Netbios, IPX (Novell), V23 (Minitel),…

Exemples…

Internet…un vocabulaire à maîtriser Internet  Serveurs  FAI  Ligne  Modem  Ordinateur (terminal)  Navigateur Les « mots » du réseau : LAN, Routeurs, Modem, Hub, Switch,… Les mots de l’informatique OS = Operating System = Système d’exploitation Lesquels ? (Citez-en au moins 4 OS) PC, MAC, CPU, DD, RAM, carte graphique,…geek DNS = Domain Name System (1984) la base du Web actuel Association IP avec une URL « textuelle » ICANN (puis les pays) FAI et opérateurs télécom

Internet…un vocabulaire à maîtriser HTTP = HyperText Transfert Protocol = WEB Hypertextualité Multimodalité (texte, image, son, animation,…) Interactivité Les autres protocoles : Email (POP, IMAP, SMTP) FTP (Files Transfert Protocol) Newsgroup (Usenet) Peer2Peer IRC …

Internet…un vocabulaire à maîtriser Réserver un « nom de domaine » Passer par un « registrar » (hébergeur) pour réserver son nom de domaine Souvent associé à un pack (espace de stockage) pour héberger son site Exemple : 1and1, Amen, opérateurs télécom (BT, Orange, SFR, Jet MultiMedia, Neuf…)

Internet et informatique…Quelques dates Années 60 : Projet ARPA 1967-1969 : ARPANET 1969 : 1ère liaison entre 4 universités US Fin années 60 : protocole TCP/IP 1971 : premier microprocesseur INTEL 4004 1976 (avril) : création d’Apple Computer 1981 : 1er PC IBM processeur 8088 cadencé à 4,77Mhz 1983 : Lancement du Minitel (France) 1984 : Introduction du Système DNS 1986 : 1er virus identifié (Brain) 1989-1991 : HTML (Tim Bernes Lee – CERN Genève)

Internet et informatique…Quelques dates 1990 et 1992 : Microsoft Windows 3 et 3.1 1993 : 1er navigateur graphique et convivial (Mosaic) 1994 : Sortie de Doom (Jeu de iD Software) 1995 : Sun  Java 1996 : CDROM « Le Louvre » 300 000 ex. 1998 : Imac (Compromis puissance/Prix/Design/pub agressive) … Vous connaissez les dates des années 2000, ce n’est plus de l’histoire

Quelques citations Quelle prétention de prétendre que l’informatique est récente : Adam et Eve avaient déjà un Apple ! L'informatique, ça fait gagner beaucoup de temps... à condition d'en avoir beaucoup devant soi « Informatique : alliance d'une science inexacte et d'une activité humaine faillible » - Luc Fayard « Il y a 10 sortes de gens au monde : ceux qui connaissent le binaire et les autres » « Le danger, avec les ordinateurs, ce n’est pas tellement qu’ils deviennent aussi intelligents que les hommes, mais c’est que nous tombions d’accord avec eux pour les rencontrer à mi-chemin » - Bernard Avishai

Quelques citations «Je pense qu'il y a un marché mondial pour environ 5 ordinateurs.» Thomas WATSON, président d'IBM, 1943. «J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé. Je ne sais plus comment utiliser mon téléphone.» Bjarne Stroustrup, auteur du langage C++

Internet…une histoire de débit L’octet est une unité de mesure en informatique mesurant la quantité de données. Bit : 0 ou 1 Octet = 8 bits = 8 positions de 0 ou 1 = un caractère de texte En Anglais, octet se dit byte (Ne confondez pas avec bit) Ko = kilo octet = 1000 octets 1Mo = 1000 Ko = 1 000 000 octets Un disquette : 1,44 Mo = 1 440 ko = 1,4 millions d’octets Une clé USB : 1 à 64 Go Un disque dur de PC 500 Go = 500 000 Mo

Internet…une histoire de débit Un débit se mesure en Kbits/s ou Ko/s Ligne RTC (téléphone) 56 Kbits/s = 56 000 Kbits/s = 7 Ko/s (en réalité 4 à 5 Ko/s) ADSL 1 méga = 1024 kbits/S = 128 ko/s ADSL 10 méga = 1280 ko/s Les modes de transmission : Ligne Numéris Modem RTC (téléphone !) ADSL, SDSL, Turbo DSL Câble et fibre optique (> 100 méga bits) Liaison via satellite 3G, Wifi,… (par les ondes)

Internet…une histoire de débit Une photo ou une image « optimisée » sur le Net ? environ1 Mo ? 1 Ko ? 30 à 100 Ko ? Théorie des 8 secondes (temps de téléchargement) Moyenne de temps d’attente maxi avant de quitter un site Les formats des images : PNG (très optimisé pour le web – Transparence possible) JPEG (adapté pour les photos) GIF (images avec 256 couleurs maxi, animation GIF)

Les résolutions de sortie Notion de pixel Image sur l’écran est constitué de points = pixel Abréviation de PICture Element Le plus petit élément constitutif de l’image Notion de définition Définition = le nombre de points (ou pixels) constituant l’image Sa dimension « informatique » Ex. une image de 640 X 480 (largeur X hauteur) Notion de résolution Nombre de points sur une surface Exprimée en points par pouce (DPI ou PPP en français) Un pouce = 2,4 cm

Les résolutions de sortie Résolution (suite) La résolution permet d'établir le rapport entre le nombre de pixels d'une image et la taille réelle de sa représentation sur un support physique Ex. 300 DPI = 300 colonnes et 300 rangées de pixels sur 1 pouce carré  RESOLUTION STANDARD DU WEB = 72 DPI Pour aller plus loin sur la résolution, la taille des images et les couleurs : www.commentcamarche.net http://www.commentcamarche.net/contents/video/affich.php3 Cf. vos cours de design et création graphique

Les résolutions de sortie Résolutions des écrans en constante augmentation 600X400 800X600  7% 1024X768 (standard)  45% (décembre 2008) 1280X960 1280X1024 31 % 1600X1200  moins de 1% …grande diversité avec les écrans plat WIDE 20’’ et supérieur Et les terminaux mobiles (GSM, PDA,…) Moyenne autour de 2,8’’ et 3’’ voire 3,2’’ Affichage de 800X480 (on y arrive doucement)

Création de site web, les grands principes On ne maîtrise pas l’affichage (ce que voit l’internaute) : Diversité des tailles et résolutions d’écran Diversité des navigateurs Diversité des terminaux (PC, Mobile, PDA,…) Héritage de l’édition papier : Typographie Le fond blanc adapté à la lecture Sens de lecture (gauchedroite) Des différences importantes : Lecture linéaire contre lecture interactive Internaute libre dans sa navigation Hypertextualité Interactivité

Création de site web, les grands principes Compromis entre poids (Ko), design et ergonomie Faire des choix cohérents par rapport à la cible Mariage FOND et FORME réussi Un système de navigation adapté Conception et ergonomie en fonction : Du message diffusé Des objectifs du média Du public visé Des contraintes techniques … Cf. vos cours de design et création graphique

Un site web ? Pour quoi faire ? Informer, renseigner, diffuser,… Communiquer & promouvoir Vendre un produit ou un service Rendre un Service Public Assurer un service après vente (SAV),… Gagner de l’argent Fédérer et animer une communauté Jouer Se divertir (écouter de la musique) …Cf. vos cours de communication

Un site web, à l’interface de…, un compromis entre : Message(s) Marketing / Communication Design/Graphisme (Image / Esthétisme) Site WEB Attentes (Exigences) Ergonomie (Utilisabilité) Cibles (internautes) Navigation (Système de navigation) Technologies (Serveur, HTML,…)

Sites statiques Vs Sites dynamiques Site statique INTERNET Strate client Strate serveur Utilisateur  Requête de l’utilisateur qui demande une page Ex : http://www.supersite.com/index.html Serveur WEB http Réponse du serveur qui envoie la page HTML Ex : http://www.supersite.com/index.html CLIENT

Sites statiques Vs Sites dynamiques Site web dynamique ou « interactif » : Architecture 3 Tiers : Client - Serveur WEB & Serveur d’Application - SGBD Strate client Strate application Strate données BD INTERNET Utilisateur  Serveur WEB Serveur / service d’application CLIENT SGBD

Les grandes étapes d’un site web Un besoin, une demande, une attente, des objectifs,… Cahier des charges (spécifications techniques / fonctionnelles) Une gestion (ou conduite) de projet Conception du design (ergonomie, charte, iconographie…) Réalisation et développement des pages Tests et recette Réservation du nom de domaine Hébergement Référencement et promotion Suivi et maintenance Evolution, modification et mise à jour

Les grandes étapes d’un site web Refonte… …une histoire sans fin (on recommence le processus) « Un site qui ne vit pas est un média mort » Mise à jour régulière Qualité du contenu Un contact humain derrière les pages Interactivité ! Cf. vos cours de gestion de projet

Conception basique de site Web Les grandes étapes toujours présentes dans la conception …à la prochaine séance

Les technologies des sites dynamiques

Les limites du HTML (RAPPELS) Contenu et contenant sont mêlés fond et forme sur le même document Peu d’interactivité native besoin de javascript, CSS, DHTML,… Pages HTML statiques mises à jour fastidieuses qui nécessitent de réécrire le code client FTP Nécessite un navigateur Internet sur un ordinateur quid de la mobilité : PDA, GSM, palm...

1ère solution : JAVASCRIPT et DHTML (et AJAX) A ne pas confondre avec JAVA Netscape et SUN (1995) Intégration du code Javascript dans le code HTML Le Javascript est exécuté par le navigateur : langage interprété (<> compilé) Plusieurs versions (1.0 à 1.3) Dynamique HTML (DHTML) = CSS + Javascript

2ème solution : les sites dynamiques ou interactifs Architecture 3 Tiers : Client - Serveur WEB & Serveur d’Application - SGBD Strate client Strate application Strate données BD INTERNET Utilisateur  Serveur WEB Serveur / service d’application CLIENT SGBD

Principes des sites dynamiques Le serveur WEB (http) envoie les pages générées au format HTML et réceptionne les requêtes du client Le serveur d’application est un logiciel qui traite les pages qui contiennent des scripts ou des balises coté serveur et assure la relation avec la SGBD. Les données sont stockées dans une BD gérée par un SGBD

Avantages des sites dynamiques Interactivité accrue avec l’internaute Partage de l’information et traitement de l’information Personnalisation de l’interface selon le profil de l’internaute Fond et forme séparés Mises à jour plus aisées

Architectures des sites dynamiques 3-tiers Trois principales solutions : Open Source / LAMP Le « marketing » Microsoft Sun et le « monde java » Les autres, histoire de ne pas les oublier

LAMP, puissance & simplicité adaptées pour le web LAMP : Open Source leader sur le WEB Linux APACHE (Serveur HTTP) => près de 66,5 % des serveurs WEB (2006) MySQL (SGBD) PHP PHP en statistiques : près de 40 % des sites web dynamique en France (01 Informatique Nov 2003) En 2006, 34,8% des sites dans le monde 55 % des grandes entreprises françaises 78 % des entreprises FR du CAC 40 utilisent cette technologie

Solution 1 : Les technologies « serveur » : PHP Pesonnal Home Page - Hypertexte Preprocessor 1994 par Rasmus Lerdorf Issu du monde Libre et Open Source Moteur ZEND Engine (applicatif) PHP 5 depuis août 2004 Une véritable alternative professionnelle Framework ZEND PHP 6 prochainement

Solution 2 : le « marketing » Microsoft Serveur HTTP : IIS (Internet Information Server) Une version basique fournie avec Windows 2000 ou XP IIS : 29% des serveurs web (2006) Un langage de script spécifique : ASP Active Server Page Un environnement complet : .NET (dot net) Un SGBD fiable : SQL Server 2005 (Précédente version 2000) une version express gratuite (Cf. site de MS ) Une version standard à 3500 / 4000 € ht environ

Solution 3 : le monde JAVA (Cf. SUN) Serveurs HTTP : TOMCAT (projet de la fondation Apache) et de nombreux Open Source et des propriétaires SUN : J2EE  JSE / JEE IBM websphere BEA Weblogic Un langage de script : JSP Un SGBD au choix : Open Source (Mysql, Postgresql,…) MS SQL Server, Oracle 10i,… Site de SUN à voir pour en savoir plus…

Les autres histoires de ne pas les oublier Server Coldfusion (.CFM) Éditeur Allaire racheté par Macromedia Scripts CGI (Common Gateway Interface) PERL Langage C Ruby on Rails (Framework)

Ajax (Asynchronous Javascript and XML) Des technos à suivre Ajax (Asynchronous Javascript and XML) xHTML + CSS + javascript + XML Exemple : www.progx.org puis bibliothèque Igoogle … XHTML (DHTML + Javascript + quelques principes du XML) Cf. les sites sans tableau Les clients « riches » / « Rich media » : Flash/Flex…

Une nouvelle version du HTML / XHTML à venir http://fr.wikipedia.org/wiki/HTML_5 http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html http://bbxdesign.com/2009/06/08/introduction-au-html-5/